@api-client/ui 0.2.3 → 0.2.4

package/demo/md/inputs/input.ts

@@ -1,11 +1,12 @@
 import { html, TemplateResult } from 'lit'
-import '../../../src/md/text-area/ui-text-area.js'
-import '../../../src/md/text-field/ui-text-field.js'
-import '../../../src/md/checkbox/ui-checkbox.js'
-import '../../../src/md/icons/ui-icon.js'
 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'
@@ -34,145 +35,432 @@ class ComponentDemoPage extends DemoPage {
 
       <form method="get" action="#" @submit="${this._submitHandler}">
         <section class="demo-section">
-          <h2 class="title-large">Filled text field</h2>
-
-          <h3 class="title-medium">Regular text field</h3>
-          <div class="demo-row">
-            <ui-text-field label="Field label"></ui-text-field>
-          </div>
-
-          <h3 class="title-medium">Required text field</h3>
-          <div class="demo-row">
-            <ui-text-field label="Required label" required invalidText="This field is required"></ui-text-field>
+          <h2 class="title-large">Regular text field</h2>
+
+          <div class="input-compare">
+            <h3 class="title-medium">Filled</h3>
+            <h3 class="title-medium">Outlined</h3>
+            <div class="input">
+              <ui-filled-text-field label="Field label" name="regular-filled"></ui-filled-text-field>
+            </div>
+            <div class="input">
+              <ui-outlined-text-field label="Field label" name="regular-outlined"></ui-outlined-text-field>
+            </div>
           </div>
+        </section>
 
-          <h3 class="title-medium">Prefix icon</h3>
-          <div class="demo-row">
-            <ui-text-field label="Search for projects" name="search">
-              <ui-icon slot="prefix" icon="search"></ui-icon>
-            </ui-text-field>
+        <section class="demo-section">
+          <h2 class="title-large">Required text field</h2>
+
+          <div class="input-compare">
+            <h3 class="title-medium">Filled</h3>
+            <h3 class="title-medium">Outlined</h3>
+            <div class="input">
+              <ui-filled-text-field
+                label="Required label"
+                required
+                invalidText="This field is required"
+                name="required-filled"
+              ></ui-filled-text-field>
+            </div>
+            <div class="input">
+              <ui-outlined-text-field
+                label="Required label"
+                required
+                invalidText="This field is required"
+                name="required-outlined"
+              ></ui-outlined-text-field>
+            </div>
           </div>
+        </section>
 
-          <h3 class="title-medium">Suffix icon</h3>
-          <div class="demo-row">
-            <ui-text-field label="Suffix input" name="suffixed">
-              <ui-icon slot="suffix" icon="close"></ui-icon>
-            </ui-text-field>
+        <section class="demo-section">
+          <h2 class="title-large">Prefix icon</h2>
+
+          <div class="input-compare">
+            <h3 class="title-medium">Filled</h3>
+            <h3 class="title-medium">Outlined</h3>
+            <div class="input">
+              <ui-filled-text-field label="Prefix input" name="prefix-filled"
+                ><ui-icon slot="prefix" icon="search"></ui-icon
+              ></ui-filled-text-field>
+            </div>
+            <div class="input">
+              <ui-outlined-text-field label="Prefix input" name="prefix-outlined"
+                ><ui-icon slot="prefix" icon="search"></ui-icon
+              ></ui-outlined-text-field>
+            </div>
           </div>
+        </section>
 
-          <h3 class="title-medium">Suffix text</h3>
-          <div class="demo-row">
-            <ui-text-field label="Your weight" name="weight" required>
-              <span slot="suffix">kg</span>
-            </ui-text-field>
+        <section class="demo-section">
+          <h2 class="title-large">Suffix icon</h2>
+
+          <div class="input-compare">
+            <h3 class="title-medium">Filled</h3>
+            <h3 class="title-medium">Outlined</h3>
+            <div class="input">
+              <ui-filled-text-field label="Suffix input" name="suffix-filled"
+                ><ui-icon slot="suffix" icon="close"></ui-icon
+              ></ui-filled-text-field>
+            </div>
+            <div class="input">
+              <ui-outlined-text-field label="Suffix input" name="suffix-outlined"
+                ><ui-icon slot="suffix" icon="close"></ui-icon
+              ></ui-outlined-text-field>
+            </div>
           </div>
+        </section>
 
-          <h3 class="title-medium">Hiding label</h3>
-          <div class="demo-row">
-            <ui-text-field label="No label floating" name="noFloat" noFloating></ui-text-field>
+        <section class="demo-section">
+          <h2 class="title-large">Suffix text</h2>
+
+          <div class="input-compare">
+            <h3 class="title-medium">Filled</h3>
+            <h3 class="title-medium">Outlined</h3>
+            <div class="input">
+              <ui-filled-text-field label="Your weight" name="suffix-text-filled"
+                ><span slot="suffix">kg</span></ui-filled-text-field
+              >
+            </div>
+            <div class="input">
+              <ui-outlined-text-field label="Your weight" name="suffix-text-outlined"
+                ><span slot="suffix">kg</span></ui-outlined-text-field
+              >
+            </div>
           </div>
+        </section>
 
-          <h3 class="title-medium">Supporting text</h3>
-          <div class="demo-row">
-            <ui-text-field
-              label="Text field"
-              name="supportingText"
-              supportingText="This is a supporting text with a long value"
-            ></ui-text-field>
+        <section class="demo-section">
+          <h2 class="title-large">Hiding label</h2>
+
+          <div class="input-compare">
+            <h3 class="title-medium">Filled</h3>
+            <h3 class="title-medium">Outlined</h3>
+            <div class="input">
+              <ui-filled-text-field label="No label floating" name="noFloat-filled" noFloating></ui-filled-text-field>
+            </div>
+            <div class="input">
+              <ui-outlined-text-field
+                label="No label floating"
+                name="noFloat-outlined"
+                noFloating
+              ></ui-outlined-text-field>
+            </div>
           </div>
+        </section>
 
-          <h3 class="title-medium">Text counter</h3>
-          <div class="demo-row">
-            <ui-text-field label="Count text" name="text counter" maxLength="75"></ui-text-field>
+        <section class="demo-section">
+          <h2 class="title-large">Supporting text</h2>
+
+          <div class="input-compare">
+            <h3 class="title-medium">Filled</h3>
+            <h3 class="title-medium">Outlined</h3>
+            <div class="input">
+              <ui-filled-text-field
+                label="Text field"
+                name="supportingText-filled"
+                supportingText="This is a supporting text with a long value"
+              ></ui-filled-text-field>
+            </div>
+            <div class="input">
+              <ui-outlined-text-field
+                label="Text field"
+                name="supportingText-outlined"
+                supportingText="This is a supporting text with a long value"
+              ></ui-outlined-text-field>
+            </div>
           </div>
+        </section>
 
-          <h3 class="title-medium">Disabled input</h3>
-          <div class="demo-row">
-            <ui-text-field label="Input" value="A value" name="disabled" disabled></ui-text-field>
+        <section class="demo-section">
+          <h2 class="title-large">Text counter</h2>
+
+          <div class="input-compare">
+            <h3 class="title-medium">Filled</h3>
+            <h3 class="title-medium">Outlined</h3>
+            <div class="input">
+              <ui-filled-text-field label="Count text" name="counter-filled" maxLength="75"></ui-filled-text-field>
+            </div>
+            <div class="input">
+              <ui-outlined-text-field
+                label="Count text"
+                name="counter-outlined"
+                maxLength="75"
+              ></ui-outlined-text-field>
+            </div>
           </div>
+        </section>
 
-          <h3 class="title-medium">Read only input</h3>
-          <div class="demo-row">
-            <ui-text-field label="Input" value="A value" name="readonly" readOnly></ui-text-field>
+        <section class="demo-section">
+          <h2 class="title-large">Disabled input</h2>
+
+          <div class="input-compare">
+            <h3 class="title-medium">Filled</h3>
+            <h3 class="title-medium">Outlined</h3>
+            <div class="input">
+              <ui-filled-text-field
+                label="Input"
+                name="disabled-filled"
+                value="A value"
+                disabled
+              ></ui-filled-text-field>
+            </div>
+            <div class="input">
+              <ui-outlined-text-field
+                label="Input"
+                name="disabled-outlined"
+                value="A value"
+                disabled
+              ></ui-outlined-text-field>
+            </div>
           </div>
+        </section>
 
-          <h3 class="title-medium">Invalid input</h3>
-          <div class="demo-row">
-            <ui-text-field
-              label="Input"
-              value="invalid"
-              name="invalid"
-              minLength="20"
-              invalid
-              invalidText="Minimum 20 characters."
-            ></ui-text-field>
+        <section class="demo-section">
+          <h2 class="title-large">Read only input</h2>
+
+          <div class="input-compare">
+            <h3 class="title-medium">Filled</h3>
+            <h3 class="title-medium">Outlined</h3>
+            <div class="input">
+              <ui-filled-text-field
+                label="Input"
+                name="readonly-filled"
+                value="A value"
+                readonly
+              ></ui-filled-text-field>
+            </div>
+            <div class="input">
+              <ui-outlined-text-field
+                label="Input"
+                name="readonly-outlined"
+                value="A value"
+                readonly
+              ></ui-outlined-text-field>
+            </div>
           </div>
+        </section>
 
-          <h3 class="title-medium">Color</h3>
-          <div class="demo-row">
-            <ui-text-field label="Select a color" name="color" type="color"></ui-text-field>
+        <section class="demo-section">
+          <h2 class="title-large">Invalid input</h2>
+
+          <div class="input-compare">
+            <h3 class="title-medium">Filled</h3>
+            <h3 class="title-medium">Outlined</h3>
+            <div class="input">
+              <ui-filled-text-field
+                label="Input"
+                name="invalid-filled"
+                value="invalid"
+                invalid
+                invalidText="Minimum 20 characters."
+              ></ui-filled-text-field>
+            </div>
+            <div class="input">
+              <ui-outlined-text-field
+                label="Input"
+                name="invalid-outlined"
+                value="invalid"
+                invalid
+                invalidText="Minimum 20 characters."
+              ></ui-outlined-text-field>
+            </div>
           </div>
+        </section>
 
-          <h3 class="title-medium">Date input</h3>
-          <div class="demo-row">
-            <ui-text-field label="Select a date" name="date" type="date"></ui-text-field>
+        <section class="demo-section">
+          <h2 class="title-large">Color</h2>
+
+          <div class="input-compare">
+            <h3 class="title-medium">Filled</h3>
+            <h3 class="title-medium">Outlined</h3>
+            <div class="input">
+              <ui-filled-text-field label="Select a color" name="color-filled" type="color"></ui-filled-text-field>
+            </div>
+            <div class="input">
+              <ui-outlined-text-field
+                label="Select a color"
+                name="color-outlined"
+                type="color"
+              ></ui-outlined-text-field>
+            </div>
           </div>
+        </section>
 
-          <h3 class="title-medium">Datetime input</h3>
-          <div class="demo-row">
-            <ui-text-field label="Select a date and time" name="datetime" type="datetime"></ui-text-field>
+        <section class="demo-section">
+          <h2 class="title-large">Date input</h2>
+
+          <div class="input-compare">
+            <h3 class="title-medium">Filled</h3>
+            <h3 class="title-medium">Outlined</h3>
+            <div class="input">
+              <ui-filled-text-field label="Select a date" name="date-filled" type="date"></ui-filled-text-field>
+            </div>
+            <div class="input">
+              <ui-outlined-text-field label="Select a date" name="date-outlined" type="date"></ui-outlined-text-field>
+            </div>
           </div>
+        </section>
 
-          <h3 class="title-medium">Datetime-local input</h3>
-          <div class="demo-row">
-            <ui-text-field label="Select a date and time" name="datetime-local" type="datetime-local"></ui-text-field>
+        <section class="demo-section">
+          <h2 class="title-large">Datetime-local input</h2>
+
+          <div class="input-compare">
+            <h3 class="title-medium">Filled</h3>
+            <h3 class="title-medium">Outlined</h3>
+            <div class="input">
+              <ui-filled-text-field
+                label="Select a date and time"
+                name="datetime-local-filled"
+                type="datetime-local"
+              ></ui-filled-text-field>
+            </div>
+            <div class="input">
+              <ui-outlined-text-field
+                label="Select a date and time"
+                name="datetime-local-outlined"
+                type="datetime-local"
+              ></ui-outlined-text-field>
+            </div>
           </div>
+        </section>
 
-          <h3 class="title-medium">Month input</h3>
-          <div class="demo-row">
-            <ui-text-field label="Select month" name="month" type="month"></ui-text-field>
+        <section class="demo-section">
+          <h2 class="title-large">Month input</h2>
+
+          <div class="input-compare">
+            <h3 class="title-medium">Filled</h3>
+            <h3 class="title-medium">Outlined</h3>
+            <div class="input">
+              <ui-filled-text-field label="Select month" name="month-filled" type="month"></ui-filled-text-field>
+            </div>
+            <div class="input">
+              <ui-outlined-text-field label="Select month" name="month-outlined" type="month"></ui-outlined-text-field>
+            </div>
           </div>
+        </section>
 
-          <h3 class="title-medium">Week input</h3>
-          <div class="demo-row">
-            <ui-text-field label="Select week" name="week" type="week"></ui-text-field>
+        <section class="demo-section">
+          <h2 class="title-large">Week input</h2>
+
+          <div class="input-compare">
+            <h3 class="title-medium">Filled</h3>
+            <h3 class="title-medium">Outlined</h3>
+            <div class="input">
+              <ui-filled-text-field label="Select week" name="week-filled" type="week"></ui-filled-text-field>
+            </div>
+            <div class="input">
+              <ui-outlined-text-field label="Select week" name="week-outlined" type="week"></ui-outlined-text-field>
+            </div>
           </div>
+        </section>
 
-          <h3 class="title-medium">Time input</h3>
-          <div class="demo-row">
-            <ui-text-field label="Select time" name="time" type="time"></ui-text-field>
+        <section class="demo-section">
+          <h2 class="title-large">Time input</h2>
+
+          <div class="input-compare">
+            <h3 class="title-medium">Filled</h3>
+            <h3 class="title-medium">Outlined</h3>
+            <div class="input">
+              <ui-filled-text-field label="Select time" name="time-filled" type="time"></ui-filled-text-field>
+            </div>
+            <div class="input">
+              <ui-outlined-text-field label="Select time" name="time-outlined" type="time"></ui-outlined-text-field>
+            </div>
           </div>
+        </section>
 
-          <h3 class="title-medium">Email input</h3>
-          <div class="demo-row">
-            <ui-text-field label="Enter email" name="email" type="email"></ui-text-field>
+        <section class="demo-section">
+          <h2 class="title-large">Email input</h2>
+
+          <div class="input-compare">
+            <h3 class="title-medium">Filled</h3>
+            <h3 class="title-medium">Outlined</h3>
+            <div class="input">
+              <ui-filled-text-field label="Enter email" name="email-filled" type="email"></ui-filled-text-field>
+            </div>
+            <div class="input">
+              <ui-outlined-text-field label="Enter email" name="email-outlined" type="email"></ui-outlined-text-field>
+            </div>
           </div>
+        </section>
 
-          <h3 class="title-medium">File input</h3>
-          <div class="demo-row">
-            <ui-text-field label="Select file" name="file" type="file"></ui-text-field>
+        <section class="demo-section">
+          <h2 class="title-large">File input</h2>
+
+          <div class="input-compare">
+            <h3 class="title-medium">Filled</h3>
+            <h3 class="title-medium">Outlined</h3>
+            <div class="input">
+              <ui-filled-text-field label="Select a file" name="file-filled" type="file"></ui-filled-text-field>
+            </div>
+            <div class="input">
+              <ui-outlined-text-field label="Select a file" name="file-outlined" type="file"></ui-outlined-text-field>
+            </div>
           </div>
+        </section>
 
-          <h3 class="title-medium">Number input</h3>
-          <div class="demo-row">
-            <ui-text-field
-              label="Enter a number"
-              name="number"
-              type="number"
-              step="10"
-              min="0"
-              max="100"
-            ></ui-text-field>
+        <section class="demo-section">
+          <h2 class="title-large">Number input</h2>
+
+          <div class="input-compare">
+            <h3 class="title-medium">Filled</h3>
+            <h3 class="title-medium">Outlined</h3>
+            <div class="input">
+              <ui-filled-text-field
+                label="Enter a number"
+                name="number-filled"
+                type="number"
+                step="10"
+                min="0"
+                max="100"
+              ></ui-filled-text-field>
+            </div>
+            <div class="input">
+              <ui-outlined-text-field
+                label="Enter a number"
+                name="number-outlined"
+                type="number"
+                step="10"
+                min="0"
+                max="100"
+              ></ui-outlined-text-field>
+            </div>
           </div>
+        </section>
 
-          <h3 class="title-medium">Tel input</h3>
-          <div class="demo-row">
-            <ui-text-field label="Enter a phone number" name="tel" type="tel"></ui-text-field>
+        <section class="demo-section">
+          <h2 class="title-large">Tel input</h2>
+
+          <div class="input-compare">
+            <h3 class="title-medium">Filled</h3>
+            <h3 class="title-medium">Outlined</h3>
+            <div class="input">
+              <ui-filled-text-field label="Enter a phone number" name="tel-filled" type="tel"></ui-filled-text-field>
+            </div>
+            <div class="input">
+              <ui-outlined-text-field
+                label="Enter a phone number"
+                name="tel-outlined"
+                type="tel"
+              ></ui-outlined-text-field>
+            </div>
           </div>
+        </section>
 
-          <h3 class="title-medium">URL input</h3>
-          <div class="demo-row">
-            <ui-text-field label="Enter a url" name="url" type="url"></ui-text-field>
+        <section class="demo-section">
+          <h2 class="title-large">URL input</h2>
+
+          <div class="input-compare">
+            <h3 class="title-medium">Filled</h3>
+            <h3 class="title-medium">Outlined</h3>
+            <div class="input">
+              <ui-filled-text-field label="Enter a url" name="url-filled" type="url"></ui-filled-text-field>
+            </div>
+            <div class="input">
+              <ui-outlined-text-field label="Enter a url" name="url-outlined" type="url"></ui-outlined-text-field>
+            </div>
           </div>
         </section>
 

package/demo/page.css

@@ -2,3 +2,7 @@ body {
   font-family: Roboto, system-ui, -apple-system, 'Segoe UI', Ubuntu, Cantarell, 'Noto Sans', sans-serif;
   font-size: 16px;
 }
+
+.demo-row {
+  margin: 12px 0;
+}

package/package.json

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

package/src/elements/authorization/ui/ApiKeyAuthorization.ts

@@ -4,7 +4,7 @@ import { live } from 'lit/directives/live.js'
 import type { IApiKeyAuthorization } from '@api-client/core/models/Authorization.js'
 import { Authorization } from './Authorization.js'
 import Input from '../../../md/input/Input.js'
-import '../../../md/text-field/ui-text-field.js'
+import '../../../md/text-field/ui-filled-text-field.js'
 import '../../../md/list/ui-list.js'
 import '../../../md/list/ui-list-item.js'
 import '../../../md/dropdown-list/ui-dropdown-list.js'
@@ -110,7 +110,7 @@ export default class ApiKeyAuthorization extends Authorization {
     }
     return html`
       <div class="full-input">
-        <ui-text-field
+        <ui-filled-text-field
           label="Key name"
           name="key"
           .value="${live(value || '')}"
@@ -119,7 +119,7 @@ export default class ApiKeyAuthorization extends Authorization {
           ?disabled="${this.disabled}"
           ?readOnly="${this.readOnly}"
           @change="${this.handleChange}"
-        ></ui-text-field>
+        ></ui-filled-text-field>
       </div>
     `
   }
@@ -136,7 +136,7 @@ export default class ApiKeyAuthorization extends Authorization {
     }
     return html`
       <div class="full-input">
-        <ui-text-field
+        <ui-filled-text-field
           label="Value"
           name="value"
           type="password"
@@ -146,7 +146,7 @@ export default class ApiKeyAuthorization extends Authorization {
           ?disabled="${this.disabled}"
           ?readOnly="${this.readOnly}"
           @change="${this.handleChange}"
-        ></ui-text-field>
+        ></ui-filled-text-field>
       </div>
     `
   }
@@ -161,9 +161,9 @@ export default class ApiKeyAuthorization extends Authorization {
         class="type-dropdown"
         closeOnOutsideClick
       >
-        <ui-text-field readOnly name="location" .value="${label}" label="Key location">
+        <ui-filled-text-field readOnly name="location" .value="${label}" label="Key location">
           <ui-icon slot="suffix" icon="arrowDropDown" role="presentation"></ui-icon>
-        </ui-text-field>
+        </ui-filled-text-field>
         <ui-list slot="dropdown" role="menu">
           <ui-list-item role="menuitem" data-value="query" title="Place the key in the query string"
             >${LabelsMap.query}</ui-list-item

package/src/elements/authorization/ui/Authorization.styles.ts

@@ -39,7 +39,7 @@ export default css`
     margin-bottom: 12px;
   }
 
-  .full-input > ui-text-field {
+  .full-input > ui-filled-text-field {
     width: 100%;
     max-width: var(--authorization-editor-max-width, 900);
   }
@@ -55,13 +55,13 @@ export default css`
     line-height: var(--md-sys-typescale-body-small-height);
   }
 
-  ui-dropdown-list > ui-text-field {
+  ui-dropdown-list > ui-filled-text-field {
     cursor: default;
     user-select: none;
   }
 
-  ui-text-field[name='grantType'],
-  ui-text-field[name='deliveryMethod'] {
+  ui-filled-text-field[name='grantType'],
+  ui-filled-text-field[name='deliveryMethod'] {
     width: 240px;
   }
 `