@api-client/ui 0.5.38 → 0.5.40

package/demo/md/checkbox/index.ts

@@ -1,220 +0,0 @@
-import { html, TemplateResult } from 'lit'
-import '../../../src/md/checkbox/ui-checkbox.js'
-import CheckboxElement from '../../../src/md/checkbox/internals/CheckboxElement.js'
-import { DemoPage } from '../../../src/demo/DemoPage.js'
-import { reactive } from '../../../src/decorators/index.js'
-
-class ComponentDemoPage extends DemoPage {
-  override accessor componentName = 'UI checkbox'
-
-  @reactive() accessor formValues: string | undefined
-
-  _changeHandler(e: Event): void {
-    const button = e.target as CheckboxElement
-    console.log(`Log: ${button.value} checkbox was clicked.`)
-  }
-
-  _submitHandler(e: SubmitEvent): void {
-    e.preventDefault()
-    const form = e.target as HTMLFormElement
-    const values = Array.from(new FormData(form)) as string[][]
-
-    const serialized = new URLSearchParams(values).toString()
-    this.formValues = serialized
-  }
-
-  contentTemplate(): TemplateResult {
-    const { formValues } = this
-    return html`
-      <a href="../">Back</a>
-      <section class="demo-section">
-        <h2 class="title-large">States</h2>
-        <div class="demo-row grid-5">
-          <ui-checkbox
-            @change="${this._changeHandler}"
-            name="checkbox"
-            value="unchecked"
-            aria-labelledby="acu"
-          ></ui-checkbox>
-          <ui-checkbox
-            checked
-            @change="${this._changeHandler}"
-            name="checkbox"
-            value="Checked"
-            aria-labelledby="acc"
-          ></ui-checkbox>
-          <ui-checkbox
-            indeterminate
-            @change="${this._changeHandler}"
-            name="checkbox"
-            value="Indeterminate"
-            aria-labelledby="aci"
-          ></ui-checkbox>
-          <ui-checkbox
-            checked
-            indeterminate
-            @change="${this._changeHandler}"
-            name="checkbox"
-            value="Checked, indeterminate"
-            aria-labelledby="acci"
-          ></ui-checkbox>
-          <ui-checkbox
-            disabled
-            @change="${this._changeHandler}"
-            name="checkbox"
-            value="disabled"
-            aria-labelledby="acd"
-          ></ui-checkbox>
-
-          <p class="label-large" id="acu">Unchecked</p>
-          <p class="label-large" id="acc">Checked</p>
-          <p class="label-large" id="aci">Indeterminate</p>
-          <p class="label-large" id="acci">Checked, indeterminate</p>
-          <p class="label-large" id="acd">Disabled</p>
-        </div>
-      </section>
-
-      <section class="demo-section">
-        <h2 class="title-large">Invalid checkboxes</h2>
-        <div class="demo-row grid-3">
-          <label class="label-large">
-            <ui-checkbox
-              required
-              aria-required="true"
-              @change="${this._changeHandler}"
-              name="checkbox"
-              value="error, unselected"
-              invalid
-            ></ui-checkbox>
-            Invalid, unselected
-          </label>
-          <label class="label-large">
-            <ui-checkbox
-              required
-              aria-required="true"
-              checked
-              @change="${this._changeHandler}"
-              name="checkbox"
-              value="error, selected"
-              invalid
-            ></ui-checkbox>
-            Invalid, selected
-          </label>
-          <label class="label-large">
-            <ui-checkbox
-              required
-              aria-required="true"
-              indeterminate
-              @change="${this._changeHandler}"
-              name="checkbox"
-              value="error, indeterminate"
-              aria-labelledby="aci"
-              invalid
-            ></ui-checkbox>
-            Invalid, indeterminate
-          </label>
-        </div>
-      </section>
-
-      <section class="demo-section">
-        <h2 class="title-large">Disabled state</h2>
-        <div class="demo-row grid-4">
-          <ui-checkbox
-            disabled
-            @change="${this._changeHandler}"
-            name="checkbox"
-            value="disabled, unchecked"
-            aria-labelledby="acdu"
-          ></ui-checkbox>
-          <ui-checkbox
-            disabled
-            checked
-            @change="${this._changeHandler}"
-            name="checkbox"
-            value="disabled, checked"
-            aria-labelledby="acdc"
-          ></ui-checkbox>
-          <ui-checkbox
-            disabled
-            invalid
-            @change="${this._changeHandler}"
-            name="checkbox"
-            value="disabled, checked, invalid"
-            aria-labelledby="acdui"
-          ></ui-checkbox>
-          <ui-checkbox
-            disabled
-            checked
-            invalid
-            @change="${this._changeHandler}"
-            name="checkbox"
-            value="disabled, checked, invalid"
-            aria-labelledby="acdci"
-          ></ui-checkbox>
-          <p class="label-large" id="acdu">Unchecked</p>
-          <p class="label-large" id="acdc">Checked</p>
-          <p class="label-large" id="acdui">Unchecked, invalid</p>
-          <p class="label-large" id="acdci">Checked, invalid</p>
-        </div>
-      </section>
-
-      <section class="demo-section">
-        <h2 class="title-large">Labels</h2>
-        <div class="demo-row">
-          <label class="label-large">
-            <ui-checkbox
-              @change="${this._changeHandler}"
-              name="checkbox"
-              value="custom label"
-              id="customCheckbox"
-              required
-            ></ui-checkbox>
-            Surrounded with label
-          </label>
-        </div>
-        <div class="demo-row">
-          <ui-checkbox
-            @change="${this._changeHandler}"
-            name="checkbox"
-            value="build-in label"
-            required
-            id="refLabelInput"
-            aria-labelledby="refLabel"
-          ></ui-checkbox>
-          <label class="label-large" for="refLabelInput" id="refLabel">Referenced with id/ref/aria</label>
-        </div>
-      </section>
-
-      <section class="demo-section">
-        <h2 class="title-large">A checkbox in a form</h2>
-        <form method="get" action="#" @submit="${this._submitHandler}">
-          <ui-checkbox required name="newsletter" aria-labelledby="newsletter" id="newsletterCheckbox"></ui-checkbox>
-          <label class="label-medium" id="newsletter" for="newsletterCheckbox">Newsletter</label>
-
-          <label class="label-medium">
-            <ui-checkbox name="other" value="optional value"></ui-checkbox>
-            Optional checkbox
-          </label>
-
-          <label class="label-medium">
-            <ui-checkbox name="indeterminate" value="indeterminate value" checked indeterminate></ui-checkbox>
-            Always indeterminate
-          </label>
-
-          <ui-button name="submit" value="on" type="submit">Submit</ui-button>
-        </form>
-
-        ${formValues
-          ? html`
-              <output>
-                <code><pre>${formValues}</pre></code>
-              </output>
-            `
-          : html``}
-      </section>
-    `
-  }
-}
-
-const instance = new ComponentDemoPage()
-instance.render()

package/demo/md/chip/chip.html

@@ -1,70 +0,0 @@
-<!doctype html>
-<html lang="en-GB">
-<head>
-  <meta charset="utf-8">
-  <title>UI chip</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-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;
-    }
-
-    .grid-5 {
-      display: grid;
-      grid-template-columns: 160px 1fr 1fr 1fr 1fr;
-      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;
-    }
-
-    .grid-4 {
-      display: grid;
-      grid-template-columns: 160px 1fr 1fr 1fr;
-      gap: 0 0;
-      justify-items: center; 
-      align-items: center;
-      grid-template-rows: 40px repeat(auto-fit, minmax(80px, 1fr));
-      grid-auto-rows: 60px;
-
-      padding: 40px;
-      border-radius: 20px;
-      border: 1px var(--md-sys-color-outline) solid;
-    }
-
-    .grid-3 {
-      display: grid;
-      grid-template-columns: 1fr 1fr 1fr;
-      justify-items: center;
-    }
-  </style>
-</head>
-<body>
-  <div id="app"></div>
-
-  <script type="module" src="/.tmp/demo/md/chip/chip.js"></script>
-</body>
-</html>

package/demo/md/chip/chip.ts

@@ -1,219 +0,0 @@
-import { html, svg, TemplateResult } from 'lit'
-import { iconWrapper } from '../../../src/md/icons/Icons.js'
-import type UiChip from '../../../src/md/chip/internals/Chip.js'
-import { DemoPage } from '../../../src/demo/DemoPage.js'
-import '../../../src/md/chip/ui-chip.js'
-import '../../../src/md/chip/ui-chip-set.js'
-import '../../../src/md/icons/ui-icon.js'
-
-const calendarIcon = iconWrapper(
-  svg`<path d="M17 22v-3h-3v-2h3v-3h2v3h3v2h-3v3ZM5 20q-.825 0-1.413-.587Q3 18.825 3 18V6q0-.825.587-1.412Q4.175 4 5 4h1V2h2v2h6V2h2v2h1q.825 0 1.413.588Q19 5.175 19 6v6.1q-.5-.075-1-.075t-1 .075V10H5v8h7q0 .5.075 1t.275 1ZM5 8h12V6H5Zm0 0V6v2Z"/>`
-)
-
-class ComponentDemoPage extends DemoPage {
-  override accessor componentName = 'UI chip'
-
-  handleClickHandler(e: Event): void {
-    const chip = e.target as UiChip
-    console.log(`A ${chip.type} chip was clicked.`)
-  }
-
-  handleClose(e: Event): void {
-    const chip = e.target as UiChip
-    console.log(`A ${chip.type} chip was closed.`)
-  }
-
-  handleList(e: Event): void {
-    const chip = e.target as UiChip
-    console.log(`A ${chip.type} chip requested to trigger a list.`)
-  }
-
-  handleSelect(e: Event): void {
-    const chip = e.target as UiChip
-    console.log('A filter chip was selected, current state is', chip.checked)
-  }
-
-  contentTemplate(): TemplateResult {
-    return html`
-      <a href="../">Back</a>
-      <section class="demo-section">
-        <h2 class="display-large">Assist chip</h2>
-
-        <div class="grid-5">
-          <span>&nbsp</span>
-          <span class="column-title title-medium">Regular</span>
-          <span class="column-title title-medium">Icon</span>
-          <span class="column-title title-medium">Avatar</span>
-          <span class="column-title title-medium">Elevated</span>
-
-          <span class="row-name title-small">Enabled</span>
-          <ui-chip type="assist" @click="${this.handleClickHandler}">Assist</ui-chip>
-          <ui-chip type="assist" @click="${this.handleClickHandler}">
-            <ui-icon slot="icon">${calendarIcon}</ui-icon>
-            Assist
-          </ui-chip>
-          <ui-chip type="assist" @click="${this.handleClickHandler}">
-            <img src="./pawel6c9a.jpg" slot="avatar" alt="Pawel Psztyc" />
-            Assist
-          </ui-chip>
-          <ui-chip type="assist" @click="${this.handleClickHandler}" elevated>
-            <ui-icon slot="icon">${calendarIcon}</ui-icon>Assist
-          </ui-chip>
-
-          <span class="row-name title-small">Disabled</span>
-          <ui-chip type="assist" disabled @click="${this.handleClickHandler}">Assist</ui-chip>
-          <ui-chip type="assist" @click="${this.handleClickHandler}" disabled>
-            <ui-icon slot="icon">${calendarIcon}</ui-icon>
-            Assist
-          </ui-chip>
-          <ui-chip type="assist" disabled @click="${this.handleClickHandler}">
-            <img src="./pawel6c9a.jpg" slot="avatar" alt="Pawel Psztyc" />
-            Assist
-          </ui-chip>
-          <ui-chip type="assist" @click="${this.handleClickHandler}" disabled elevated>
-            <ui-icon slot="icon">${calendarIcon}</ui-icon>
-            Assist
-          </ui-chip>
-        </div>
-      </section>
-
-      <section class="demo-section">
-        <h2 class="display-large">Filter chip</h2>
-        <div class="grid-5">
-          <span>&nbsp</span>
-          <span class="column-title title-medium">Unchecked</span>
-          <span class="column-title title-medium">Checked</span>
-          <span class="column-title title-medium">List</span>
-          <span class="column-title title-medium">Elevated</span>
-
-          <span class="row-name title-small">Enabled</span>
-          <ui-chip type="filter" @click="${this.handleClickHandler}" @select="${this.handleSelect}">Filter</ui-chip>
-          <ui-chip type="filter" checked @click="${this.handleClickHandler}" @select="${this.handleSelect}"
-            >Filter</ui-chip
-          >
-          <ui-chip
-            type="filter"
-            list
-            @click="${this.handleClickHandler}"
-            @list="${this.handleList}"
-            @select="${this.handleSelect}"
-            >Other</ui-chip
-          >
-          <ui-chip
-            type="filter"
-            list
-            elevated
-            @click="${this.handleClickHandler}"
-            @list="${this.handleList}"
-            @select="${this.handleSelect}"
-            >Other</ui-chip
-          >
-
-          <span class="row-name title-small">Disabled</span>
-          <ui-chip type="filter" disabled @click="${this.handleClickHandler}" @select="${this.handleSelect}"
-            >Filter</ui-chip
-          >
-          <ui-chip type="filter" disabled checked @click="${this.handleClickHandler}" @select="${this.handleSelect}"
-            >Filter</ui-chip
-          >
-          <ui-chip
-            type="filter"
-            list
-            disabled
-            @click="${this.handleClickHandler}"
-            @list="${this.handleList}"
-            @select="${this.handleSelect}"
-            >Other</ui-chip
-          >
-          <ui-chip
-            type="filter"
-            list
-            elevated
-            disabled
-            @click="${this.handleClickHandler}"
-            @list="${this.handleList}"
-            @select="${this.handleSelect}"
-            >Other</ui-chip
-          >
-        </div>
-      </section>
-
-      <section class="demo-section">
-        <h2 class="display-large">Input chip</h2>
-
-        <div class="grid-5">
-          <span>&nbsp</span>
-          <span class="column-title title-medium">Regular</span>
-          <span class="column-title title-medium">removable</span>
-          <span class="column-title title-medium">Disabled</span>
-          <span class="column-title title-medium">Elevated</span>
-
-          <span class="row-name title-small">Regular</span>
-          <ui-chip type="input" @click="${this.handleClickHandler}">Input</ui-chip>
-          <ui-chip type="input" removable @click="${this.handleClickHandler}" @close="${this.handleClose}"
-            >Input</ui-chip
-          >
-          <ui-chip type="input" disabled @click="${this.handleClickHandler}">Input</ui-chip>
-          <ui-chip type="input" elevated @click="${this.handleClickHandler}">Input</ui-chip>
-
-          <span class="row-name title-small">With icon</span>
-          <ui-chip type="input" @click="${this.handleClickHandler}">
-            <ui-icon slot="icon">${calendarIcon}</ui-icon>
-            Input
-          </ui-chip>
-          <ui-chip type="input" @click="${this.handleClickHandler}" removable @close="${this.handleClose}">
-            <ui-icon slot="icon">${calendarIcon}</ui-icon>
-            Input
-          </ui-chip>
-          <ui-chip type="input" @click="${this.handleClickHandler}" removable disabled @close="${this.handleClose}">
-            <ui-icon slot="icon">${calendarIcon}</ui-icon>
-            Input
-          </ui-chip>
-          <ui-chip type="input" @click="${this.handleClickHandler}" removable elevated @close="${this.handleClose}">
-            <ui-icon slot="icon">${calendarIcon}</ui-icon>
-            Input
-          </ui-chip>
-
-          <span class="row-name title-small">With avatar</span>
-          <ui-chip type="input" @click="${this.handleClickHandler}">
-            <img src="./pawel6c9a.jpg" slot="avatar" alt="Pawel Psztyc" />
-            Input
-          </ui-chip>
-          <ui-chip type="input" @click="${this.handleClickHandler}" removable @close="${this.handleClose}">
-            <img src="./pawel6c9a.jpg" slot="avatar" alt="Pawel Psztyc" />
-            Input
-          </ui-chip>
-          <ui-chip type="input" @click="${this.handleClickHandler}" removable disabled @close="${this.handleClose}">
-            <img src="./pawel6c9a.jpg" slot="avatar" alt="Pawel Psztyc" />
-            Input
-          </ui-chip>
-          <ui-chip type="input" @click="${this.handleClickHandler}" removable elevated @close="${this.handleClose}">
-            <img src="./pawel6c9a.jpg" slot="avatar" alt="Pawel Psztyc" />
-            Input
-          </ui-chip>
-        </div>
-      </section>
-
-      <section class="demo-section">
-        <h2 class="display-large">Suggestion chip</h2>
-        <div class="demo-row grid-3 frame">
-          <ui-chip type="suggestion" @click="${this.handleClickHandler}">Enabled</ui-chip>
-          <ui-chip type="suggestion" @click="${this.handleClickHandler}" elevated>Elevated</ui-chip>
-          <ui-chip type="suggestion" disabled @click="${this.handleClickHandler}">Disabled</ui-chip>
-        </div>
-      </section>
-
-      <section class="demo-section">
-        <h2 class="display-large">Chip set</h2>
-        <ui-chip-set>
-          <ui-chip type="input" @click="${this.handleClickHandler}" removable>Input</ui-chip>
-          <ui-chip type="input" @click="${this.handleClickHandler}" removable>Input</ui-chip>
-          <ui-chip type="input" @click="${this.handleClickHandler}" removable>Input</ui-chip>
-        </ui-chip-set>
-      </section>
-    `
-  }
-}
-
-const instance = new ComponentDemoPage()
-instance.render()

package/demo/md/collapse/CustomDetail.ts

@@ -1,89 +0,0 @@
-/* eslint-disable @typescript-eslint/no-non-null-assertion */
-import { html, css, LitElement, TemplateResult, CSSResult } from 'lit'
-import { property, customElement } from 'lit/decorators.js'
-import type UiCollapse from '../../../src/md/collapse/internals/Collapse.js'
-import '../../../src/md/collapse/ui-collapse.js'
-
-@customElement('custom-detail')
-export class CustomDetail extends LitElement {
-  static override get styles(): CSSResult {
-    return css`
-      :host {
-        display: block;
-      }
-
-      #trigger {
-        padding: 10px 15px;
-        background-color: #f3f3f3;
-        border: 1px solid #dedede;
-        border-radius: 5px;
-        font-size: 18px;
-        cursor: pointer;
-        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-        text-align: left;
-      }
-
-      :host([opened]) #trigger {
-        border-bottom-left-radius: 0;
-        border-bottom-right-radius: 0;
-      }
-
-      ui-collapse {
-        border: 1px solid #dedede;
-        border-top: none;
-        border-bottom-left-radius: 5px;
-        border-bottom-right-radius: 5px;
-        box-shadow:
-          0 2px 2px 0 rgba(0, 0, 0, 0.14),
-          0 1px 5px 0 rgba(0, 0, 0, 0.12),
-          0 3px 1px -2px rgba(0, 0, 0, 0.2);
-        padding: 12px;
-      }
-    `
-  }
-
-  /**
-   * @attribute
-   */
-  @property({ type: Boolean }) accessor horizontal: boolean | undefined
-
-  /**
-   * @attribute
-   */
-  @property({ type: Boolean, reflect: true }) accessor open: boolean | undefined
-
-  /**
-   * @attribute
-   */
-  @property({ type: Boolean }) accessor noAnimation: boolean | undefined
-
-  get buttonLabel(): string {
-    return this.open ? 'Collapse' : 'Expand'
-  }
-
-  toggle(): void {
-    const node = this.shadowRoot!.querySelector('#collapse') as UiCollapse
-    node.toggle()
-  }
-
-  override render(): TemplateResult {
-    const { open, buttonLabel, horizontal, noAnimation } = this
-    return html` <button
-        id="trigger"
-        @click="${this.toggle}"
-        aria-expanded="${open ? 'true' : 'false'}"
-        aria-controls="collapse"
-      >
-        ${buttonLabel}
-      </button>
-      <ui-collapse id="collapse" ?open="${open}" ?horizontal="${horizontal}" ?noanimation="${noAnimation}" tabindex="0">
-        <slot></slot>
-      </ui-collapse>`
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'custom-detail': CustomDetail
-  }
-}

package/demo/md/collapse/collapse.html

@@ -1,21 +0,0 @@
-<!doctype html>
-<html lang="en-GB">
-<head>
-  <meta charset="utf-8">
-  <title>UI collapse</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-row {
-      margin: 20px 0;
-    }
-  </style>
-</head>
-<body>
-  <div id="app"></div>
-
-  <script type="module" src="/.tmp/demo/md/collapse/collapse.js"></script>
-</body>
-</html>