@api-client/ui 0.5.38 → 0.5.40

package/demo/md/inputs/input.ts

@@ -1,278 +0,0 @@
-import { html, TemplateResult } from 'lit'
-import ApiCheckboxElement from '../../../src/md/checkbox/internals/CheckboxElement.js'
-import { DemoPage } from '../../../src/demo/DemoPage.js'
-import { reactive } from '../../../src/decorators/index.js'
-import '../../../src/md/text-area/ui-text-area.js'
-import '../../../src/md/text-field/ui-filled-text-field.js'
-import '../../../src/md/text-field/ui-outlined-text-field.js'
-import '../../../src/md/checkbox/ui-checkbox.js'
-import '../../../src/md/icons/ui-icon.js'
-
-class ComponentDemoPage extends DemoPage {
-  override accessor componentName = 'UI text field'
-
-  @reactive() accessor formValues: string | undefined
-
-  _changeHandler(e: Event): void {
-    const button = e.target as ApiCheckboxElement
-    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>
-
-      <form method="get" action="#" @submit="${this._submitHandler}">
-        <section class="demo-section">
-          <h2 class="display-large">Feature comparison</h2>
-          <div class="demo-grid">
-            <span>&nbsp</span>
-            <span class="column-title title-medium">Filled</span>
-            <span class="column-title title-medium">Outlined</span>
-
-            <span class="row-name title-small">Regular</span>
-            <ui-filled-text-field label="Field label" name="regular-filled"></ui-filled-text-field>
-            <ui-outlined-text-field label="Field label" name="regular-outlined"></ui-outlined-text-field>
-
-            <span class="row-name title-small">Required</span>
-            <ui-filled-text-field
-              label="Required label"
-              required
-              invalidText="This field is required"
-              name="required-filled"
-            ></ui-filled-text-field>
-            <ui-outlined-text-field
-              label="Required label"
-              required
-              invalidText="This field is required"
-              name="required-outlined"
-            ></ui-outlined-text-field>
-
-            <span class="row-name title-small">Prefix icon</span>
-            <ui-filled-text-field label="Prefix input" name="prefix-filled"
-              ><ui-icon slot="prefix" icon="search"></ui-icon
-            ></ui-filled-text-field>
-            <ui-outlined-text-field label="Prefix input" name="prefix-outlined"
-              ><ui-icon slot="prefix" icon="search"></ui-icon
-            ></ui-outlined-text-field>
-
-            <span class="row-name title-small">Suffix icon</span>
-            <ui-filled-text-field label="Suffix input" name="suffix-filled"
-              ><ui-icon slot="suffix" icon="close"></ui-icon
-            ></ui-filled-text-field>
-            <ui-outlined-text-field label="Suffix input" name="suffix-outlined"
-              ><ui-icon slot="suffix" icon="close"></ui-icon
-            ></ui-outlined-text-field>
-
-            <span class="row-name title-small">Suffix icon</span>
-            <ui-filled-text-field label="Your weight" name="suffix-text-filled"
-              ><span slot="suffix">kg</span></ui-filled-text-field
-            >
-            <ui-outlined-text-field label="Your weight" name="suffix-text-outlined"
-              ><span slot="suffix">kg</span></ui-outlined-text-field
-            >
-
-            <span class="row-name title-small">Hiding label</span>
-            <ui-filled-text-field label="No label floating" name="noFloat-filled" noFloating></ui-filled-text-field>
-            <ui-outlined-text-field
-              label="No label floating"
-              name="noFloat-outlined"
-              noFloating
-            ></ui-outlined-text-field>
-
-            <span class="row-name title-small">Supporting text</span>
-            <ui-filled-text-field
-              label="Text field"
-              name="supportingText-filled"
-              supportingText="This is a supporting text with a long value"
-            ></ui-filled-text-field>
-            <ui-outlined-text-field
-              label="Text field"
-              name="supportingText-outlined"
-              supportingText="This is a supporting text with a long value"
-            ></ui-outlined-text-field>
-
-            <span class="row-name title-small">Text counter</span>
-            <ui-filled-text-field label="Count text" name="counter-filled" maxLength="75"></ui-filled-text-field>
-            <ui-outlined-text-field label="Count text" name="counter-outlined" maxLength="75"></ui-outlined-text-field>
-
-            <span class="row-name title-small">Supporting text + counter</span>
-            <ui-filled-text-field
-              label="Supporting counter"
-              maxLength="12"
-              supportingText="Only alphanumeric values"
-              pattern="[a-zA-Z0-9]*"
-              invalidText="Invalid value"
-              ><ui-icon slot="suffix" icon="visibility"></ui-icon
-            ></ui-filled-text-field>
-            <ui-outlined-text-field
-              label="Supporting counter"
-              maxLength="12"
-              supportingText="Only alphanumeric values"
-              pattern="[a-zA-Z0-9]*"
-              ><ui-icon slot="suffix" icon="visibility"></ui-icon
-            ></ui-outlined-text-field>
-          </div>
-        </section>
-
-        <section class="demo-section">
-          <h2 class="display-large">States</h2>
-          <div class="demo-grid">
-            <span>&nbsp</span>
-            <span class="column-title title-medium">Filled</span>
-            <span class="column-title title-medium">Outlined</span>
-
-            <span class="row-name title-small">Disabled</span>
-            <ui-filled-text-field label="Input" name="disabled-filled" value="A value" disabled></ui-filled-text-field>
-            <ui-outlined-text-field
-              label="Input"
-              name="disabled-outlined"
-              value="A value"
-              disabled
-            ></ui-outlined-text-field>
-
-            <span class="row-name title-small">Read only</span>
-            <ui-filled-text-field label="Input" name="readonly-filled" value="A value" readonly></ui-filled-text-field>
-            <ui-outlined-text-field
-              label="Input"
-              name="readonly-outlined"
-              value="A value"
-              readonly
-            ></ui-outlined-text-field>
-
-            <span class="row-name title-small">Invalid</span>
-            <ui-filled-text-field
-              label="Input"
-              name="invalid-filled"
-              value="invalid"
-              invalid
-              invalidText="Minimum 20 characters."
-            ></ui-filled-text-field>
-            <ui-outlined-text-field
-              label="Input"
-              name="invalid-outlined"
-              value="invalid"
-              invalid
-              invalidText="Minimum 20 characters."
-            ></ui-outlined-text-field>
-          </div>
-        </section>
-
-        <section class="demo-section">
-          <h2 class="display-large">Types</h2>
-
-          <div class="demo-grid">
-            <span>&nbsp</span>
-            <span class="column-title title-medium">Filled</span>
-            <span class="column-title title-medium">Outlined</span>
-
-            <span class="row-name title-small">Password</span>
-            <ui-filled-text-field label="Enter password" name="pwd-filled" type="password"></ui-filled-text-field>
-            <ui-outlined-text-field label="Enter password" name="pwd-outlined" type="password"></ui-outlined-text-field>
-
-            <span class="row-name title-small">Color</span>
-            <ui-filled-text-field label="Select a color" name="color-filled" type="color"></ui-filled-text-field>
-            <ui-outlined-text-field label="Select a color" name="color-outlined" type="color"></ui-outlined-text-field>
-
-            <span class="row-name title-small">Date</span>
-            <ui-filled-text-field label="Select a date" name="date-filled" type="date"></ui-filled-text-field>
-            <ui-outlined-text-field label="Select a date" name="date-outlined" type="date"></ui-outlined-text-field>
-
-            <span class="row-name title-small">Datetime-local</span>
-            <ui-filled-text-field
-              label="Select a date and time"
-              name="datetime-local-filled"
-              type="datetime-local"
-            ></ui-filled-text-field>
-            <ui-outlined-text-field
-              label="Select a date and time"
-              name="datetime-local-outlined"
-              type="datetime-local"
-            ></ui-outlined-text-field>
-
-            <span class="row-name title-small">Datetime-local</span>
-            <ui-filled-text-field label="Select month" name="month-filled" type="month"></ui-filled-text-field>
-            <ui-outlined-text-field label="Select month" name="month-outlined" type="month"></ui-outlined-text-field>
-
-            <span class="row-name title-small">Week</span>
-            <ui-filled-text-field label="Select week" name="week-filled" type="week"></ui-filled-text-field>
-            <ui-outlined-text-field label="Select week" name="week-outlined" type="week"></ui-outlined-text-field>
-
-            <span class="row-name title-small">Time</span>
-            <ui-filled-text-field label="Select time" name="time-filled" type="time"></ui-filled-text-field>
-            <ui-outlined-text-field label="Select time" name="time-outlined" type="time"></ui-outlined-text-field>
-
-            <span class="row-name title-small">Email</span>
-            <ui-filled-text-field label="Enter email" name="email-filled" type="email"></ui-filled-text-field>
-            <ui-outlined-text-field label="Enter email" name="email-outlined" type="email"></ui-outlined-text-field>
-
-            <span class="row-name title-small">File</span>
-            <ui-filled-text-field label="Select a file" name="file-filled" type="file"></ui-filled-text-field>
-            <ui-outlined-text-field label="Select a file" name="file-outlined" type="file"></ui-outlined-text-field>
-
-            <span class="row-name title-small">Number</span>
-            <ui-filled-text-field
-              label="Enter a number"
-              name="number-filled"
-              type="number"
-              step="10"
-              min="0"
-              max="100"
-            ></ui-filled-text-field>
-            <ui-outlined-text-field
-              label="Enter a number"
-              name="number-outlined"
-              type="number"
-              step="10"
-              min="0"
-              max="100"
-            ></ui-outlined-text-field>
-
-            <span class="row-name title-small">Tel</span>
-            <ui-filled-text-field label="Enter a phone number" name="tel-filled" type="tel"></ui-filled-text-field>
-            <ui-outlined-text-field
-              label="Enter a phone number"
-              name="tel-outlined"
-              type="tel"
-            ></ui-outlined-text-field>
-
-            <span class="row-name title-small">URL</span>
-            <ui-filled-text-field label="Enter a url" name="url-filled" type="url"></ui-filled-text-field>
-            <ui-outlined-text-field label="Enter a url" name="url-outlined" type="url"></ui-outlined-text-field>
-          </div>
-        </section>
-
-        <section class="demo-section">
-          <h2 class="title-large">Multiline input</h2>
-          <ui-text-area label="Your bio" name="bio" required></ui-text-area>
-        </section>
-
-        <section class="demo-section">
-          <h2 class="title-large">Inputs in a form</h2>
-          <ui-button color="filled" name="submit" value="on" type="submit">Submit</ui-button>
-          ${formValues
-            ? html`
-                <output>
-                  <code><pre>${formValues}</pre></code>
-                </output>
-              `
-            : html``}
-        </section>
-      </form>
-    `
-  }
-}
-
-const instance = new ComponentDemoPage()
-instance.render()

package/demo/md/inputs/radio.html

@@ -1,39 +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 radio</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-row {
-      margin: 20px 0;
-    }
-
-    .grid-5 {
-      display: grid;
-      grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
-      justify-items: center;
-    }
-
-    .grid-4 {
-      display: grid;
-      grid-template-columns: 1fr 1fr 1fr 1fr;
-      justify-items: center;
-    }
-
-    .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/inputs/radio.js"></script>
-</body>
-</html>

package/demo/md/inputs/radio.ts

@@ -1,156 +0,0 @@
-import { html, TemplateResult } from 'lit'
-import '../../../src/md/radio/ui-radio.js'
-import { DemoPage } from '../../../src/demo/DemoPage.js'
-import { reactive } from '../../../src/decorators/index.js'
-import RadioElement from '../../../src/md/radio/internals/RadioElement.js'
-
-class ComponentDemoPage extends DemoPage {
-  override accessor componentName = 'UI radio'
-
-  @reactive() accessor formValues: string | undefined
-
-  _changeHandler(e: Event): void {
-    const button = e.target as RadioElement
-    console.log(`Log: ${button.name} with value ${button.value} radio was changed.`)
-  }
-
-  _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}&time=${Date.now()}`
-  }
-
-  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-4">
-          <ui-radio
-            name="demo"
-            value="unchecked"
-            checked
-            aria-labelledby="aru"
-            @change="${this._changeHandler}"
-          ></ui-radio>
-          <ui-radio
-            name="demo"
-            value="checked"
-            checked
-            aria-labelledby="arc"
-            @change="${this._changeHandler}"
-          ></ui-radio>
-          <ui-radio
-            name="demo1"
-            value="disabled"
-            disabled
-            aria-labelledby="ard"
-            @change="${this._changeHandler}"
-          ></ui-radio>
-          <ui-radio
-            name="demo1"
-            value="disabled,checked"
-            disabled
-            checked
-            aria-labelledby="ardc"
-            @change="${this._changeHandler}"
-          ></ui-radio>
-
-          <p class="label-large" id="aru">Unchecked</p>
-          <p class="label-large" id="arc">Checked</p>
-          <p class="label-large" id="ard">Disabled</p>
-          <p class="label-large" id="ardc">Disabled, checked</p>
-        </div>
-      </section>
-
-      <section class="demo-section">
-        <h2 class="title-large">Mixed groups</h2>
-        <div class="demo-row grid-4">
-          <label class="label-medium">
-            <ui-radio name="group1" value="a" @change="${this._changeHandler}"></ui-radio>
-            Group 1, A
-          </label>
-          <label class="label-medium">
-            <ui-radio name="group1" value="b" @change="${this._changeHandler}"></ui-radio>
-            Group 1, B
-          </label>
-          <label class="label-medium">
-            <ui-radio name="group2" value="a" @change="${this._changeHandler}"></ui-radio>
-            Group 2, A
-          </label>
-          <label class="label-medium">
-            <ui-radio name="group2" value="b" @change="${this._changeHandler}"></ui-radio>
-            Group 2, B
-          </label>
-        </div>
-      </section>
-
-      <section class="demo-section">
-        <h2 class="title-large">HTML form example</h2>
-        <form method="get" action="#" @submit="${this._submitHandler}">
-          <div class="grid-3">
-            <label class="label-medium">
-              <input type="radio" name="group-1" value="A" required />
-              Group 1, A
-            </label>
-            <label class="label-medium">
-              <input type="radio" name="group-1" value="B" />
-              Group 1, B
-            </label>
-            <label class="label-medium">
-              <input type="radio" name="group-1" value="C" />
-              Group 1, C
-            </label>
-          </div>
-
-          <div class="grid-3">
-            <label class="label-medium">
-              <ui-radio name="group-2" value="A" required></ui-radio>
-              Group 2, A
-            </label>
-            <label class="label-medium">
-              <ui-radio name="group-2" value="B"></ui-radio>
-              Group 2, B
-            </label>
-            <label class="label-medium">
-              <ui-radio name="group-2" value="C" required></ui-radio>
-              Group 2, C
-            </label>
-          </div>
-
-          <div class="grid-3">
-            <label class="label-medium">
-              <ui-radio name="group-3" value="A" required disabled></ui-radio>
-              Group 3, A
-            </label>
-            <label class="label-medium">
-              <ui-radio name="group-3" value="B" required></ui-radio>
-              Group 3, B
-            </label>
-            <label class="label-medium">
-              <ui-radio name="group-3" value="C" required></ui-radio>
-              Group 3, C
-            </label>
-          </div>
-
-          <ui-button color="filled" 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/inputs/switch.html

@@ -1,45 +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 switch</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-row {
-      margin: 20px 0;
-    }
-
-    .grid-5 {
-      display: grid;
-      grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
-      justify-items: center;
-    }
-
-    .grid-4 {
-      display: grid;
-      grid-template-columns: 1fr 1fr 1fr 1fr;
-      justify-items: center;
-    }
-
-    .grid-3 {
-      display: grid;
-      grid-template-columns: 1fr 1fr 1fr;
-      justify-items: center;
-    }
-
-    .grid-2 {
-      display: grid;
-      grid-template-columns: 1fr 1fr;
-      justify-items: center;
-    }
-  </style>
-</head>
-<body>
-  <div id="app"></div>
-
-  <script type="module" src="/.tmp/demo/md/inputs/switch.js"></script>
-</body>
-</html>

package/demo/md/inputs/switch.ts

@@ -1,144 +0,0 @@
-import { html, TemplateResult } from 'lit'
-import '../../../src/md/switch/ui-switch.js'
-import SwitchElement from '../../../src/md/switch/internals/SwitchElement.js'
-import { cancel as cancelIcon, info as infoIcon } from '../../../src/md/icons/Icons.js'
-import { DemoPage } from '../../../src/demo/DemoPage.js'
-import { reactive } from '../../../src/decorators/index.js'
-
-class ComponentDemoPage extends DemoPage {
-  override accessor componentName = 'API switch'
-
-  @reactive() accessor formValues: string | undefined
-
-  _changeHandler(e: Event): void {
-    const button = e.target as SwitchElement
-    console.log(`Log: ${button.value} switch 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-3">
-          <ui-switch @change="${this._changeHandler}" name="switch" value="unchecked" aria-labelledby="acu"></ui-switch>
-          <ui-switch
-            checked
-            @change="${this._changeHandler}"
-            name="switch"
-            value="Checked"
-            aria-labelledby="acc"
-          ></ui-switch>
-          <ui-switch
-            disabled
-            @change="${this._changeHandler}"
-            name="switch"
-            value="disabled"
-            aria-labelledby="acd"
-          ></ui-switch>
-
-          <p class="label-large" id="acu">Unchecked</p>
-          <p class="label-large" id="acc">Checked</p>
-          <p class="label-large" id="acd">Disabled</p>
-        </div>
-      </section>
-
-      <section class="demo-section">
-        <h2 class="title-large">Disabled state</h2>
-        <div class="demo-row grid-2">
-          <ui-switch
-            disabled
-            @change="${this._changeHandler}"
-            name="checkbox"
-            value="disabled, unchecked"
-            aria-labelledby="acdu"
-          ></ui-switch>
-          <ui-switch
-            disabled
-            checked
-            @change="${this._changeHandler}"
-            name="checkbox"
-            value="disabled, checked"
-            aria-labelledby="acdc"
-          ></ui-switch>
-          <p class="label-large" id="acdu">Unchecked</p>
-          <p class="label-large" id="acdc">Checked</p>
-        </div>
-      </section>
-
-      <section class="demo-section">
-        <h2 class="title-large">Icons</h2>
-        <div class="demo-row grid-4">
-          <ui-switch
-            onIcon
-            checked
-            @change="${this._changeHandler}"
-            name="checkbox"
-            value="on-icon only"
-            aria-labelledby="asoni"
-          ></ui-switch>
-          <ui-switch
-            offIcon
-            @change="${this._changeHandler}"
-            name="checkbox"
-            value="off-icon only"
-            aria-labelledby="asoffi"
-          ></ui-switch>
-          <ui-switch
-            onIcon
-            offIcon
-            @change="${this._changeHandler}"
-            name="checkbox"
-            value="all icons"
-            aria-labelledby="asi"
-          ></ui-switch>
-          <ui-switch
-            onIcon
-            offIcon
-            .onIconInstance="${infoIcon}"
-            .offIconInstance="${cancelIcon}"
-            @change="${this._changeHandler}"
-            name="checkbox"
-            value="custom icons"
-            aria-labelledby="asci"
-          ></ui-switch>
-          <p class="label-large" id="asoni">On icon only</p>
-          <p class="label-large" id="asoffi">Off icon only</p>
-          <p class="label-large" id="asi">Both icons</p>
-          <p class="label-large" id="asci">Custom icons</p>
-        </div>
-      </section>
-
-      <section class="demo-section">
-        <h2 class="title-large">A switch in a form</h2>
-        <form method="get" action="#" @submit="${this._submitHandler}">
-          <ui-switch name="switch" aria-labelledby="switch" id="switchCheckbox"></ui-switch>
-          <label class="label-medium" id="switch" for="switchCheckbox">Newsletter</label>
-
-          <ui-button color="filled" 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()