@api-client/ui 0.2.2 → 0.2.4

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;
   }
 `

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

@@ -3,7 +3,7 @@ import { live } from 'lit/directives/live.js'
 import type { IBasicAuthorization } 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'
 
 export default class BasicAuthorization extends Authorization {
   get config(): IBasicAuthorization {
@@ -76,7 +76,7 @@ export default class BasicAuthorization extends Authorization {
   protected renderUsername(config: IBasicAuthorization): TemplateResult {
     return html`
       <div class="full-input">
-        <ui-text-field
+        <ui-filled-text-field
           label="Username"
           name="username"
           .value="${live(config.username || '')}"
@@ -85,7 +85,7 @@ export default class BasicAuthorization extends Authorization {
           ?disabled="${this.disabled}"
           ?readOnly="${this.readOnly}"
           @change="${this.handleUsername}"
-        ></ui-text-field>
+        ></ui-filled-text-field>
       </div>
     `
   }
@@ -93,7 +93,7 @@ export default class BasicAuthorization extends Authorization {
   protected renderPassword(config: IBasicAuthorization): TemplateResult {
     return html`
       <div class="full-input">
-        <ui-text-field
+        <ui-filled-text-field
           label="Password"
           name="password"
           type="password"
@@ -101,7 +101,7 @@ export default class BasicAuthorization extends Authorization {
           ?disabled="${this.disabled}"
           ?readOnly="${this.readOnly}"
           @change="${this.handlePassword}"
-        ></ui-text-field>
+        ></ui-filled-text-field>
       </div>
     `
   }

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

@@ -3,7 +3,7 @@ import { live } from 'lit/directives/live.js'
 import type { IBearerAuthorization } 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'
 
 export default class BearerAuthorization extends Authorization {
   get config(): IBearerAuthorization {
@@ -60,7 +60,7 @@ export default class BearerAuthorization extends Authorization {
   protected renderToken(config: IBearerAuthorization): TemplateResult {
     return html`
       <div class="full-input">
-        <ui-text-field
+        <ui-filled-text-field
           label="Token value"
           name="token"
           type="password"
@@ -70,7 +70,7 @@ export default class BearerAuthorization extends Authorization {
           ?disabled="${this.disabled}"
           ?readOnly="${this.readOnly}"
           @change="${this.handleToken}"
-        ></ui-text-field>
+        ></ui-filled-text-field>
       </div>
     `
   }

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

@@ -3,7 +3,7 @@ import { live } from 'lit/directives/live.js'
 import type { INtlmAuthorization } 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'
 
 export default class NtlmAuthorization extends Authorization {
   override checkValidity(): boolean {
@@ -79,7 +79,7 @@ export default class NtlmAuthorization extends Authorization {
   protected renderUsername(config: INtlmAuthorization): TemplateResult {
     return html`
       <div class="full-input">
-        <ui-text-field
+        <ui-filled-text-field
           label="Username"
           name="username"
           .value="${live(config.username || '')}"
@@ -88,7 +88,7 @@ export default class NtlmAuthorization extends Authorization {
           ?disabled="${this.disabled}"
           ?readOnly="${this.readOnly}"
           @change="${this.handleUsername}"
-        ></ui-text-field>
+        ></ui-filled-text-field>
       </div>
     `
   }
@@ -96,7 +96,7 @@ export default class NtlmAuthorization extends Authorization {
   protected renderPassword(config: INtlmAuthorization): TemplateResult {
     return html`
       <div class="full-input">
-        <ui-text-field
+        <ui-filled-text-field
           label="Password"
           name="password"
           type="password"
@@ -104,7 +104,7 @@ export default class NtlmAuthorization extends Authorization {
           ?disabled="${this.disabled}"
           ?readOnly="${this.readOnly}"
           @change="${this.handlePassword}"
-        ></ui-text-field>
+        ></ui-filled-text-field>
       </div>
     `
   }
@@ -112,14 +112,14 @@ export default class NtlmAuthorization extends Authorization {
   protected renderDomain(config: INtlmAuthorization): TemplateResult {
     return html`
       <div class="full-input">
-        <ui-text-field
+        <ui-filled-text-field
           label="NT Domain"
           name="domain"
           .value="${live(config.domain || '')}"
           ?disabled="${this.disabled}"
           ?readOnly="${this.readOnly}"
           @change="${this.handleDomain}"
-        ></ui-text-field>
+        ></ui-filled-text-field>
       </div>
     `
   }

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

@@ -19,7 +19,7 @@ import CheckboxElement from '../../../md/checkbox/internals/CheckboxElement.js'
 import { selectNode } from '../Utils.js'
 import { SnackNotifications } from '../../../md/notification/SnackNotifications.js'
 import '../../../md/button/ui-filled-button.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'
@@ -905,7 +905,7 @@ export default class OAuth2Authorization extends Authorization {
     return html`
       <div class="full-input grant-line">
         <ui-dropdown-list verticalAlign="top" @select="${this.handleGrantTypeSelect}" closeOnOutsideClick>
-          <ui-text-field
+          <ui-filled-text-field
             readOnly
             name="grantType"
             .value="${value || ''}"
@@ -915,7 +915,7 @@ export default class OAuth2Authorization extends Authorization {
             ?disabled="${disabled || readOnly}"
           >
             <ui-icon slot="suffix" icon="arrowDropDown" role="presentation"></ui-icon>
-          </ui-text-field>
+          </ui-filled-text-field>
           <ui-list slot="dropdown" role="menu">
             ${items.map(
               (current) =>
@@ -940,9 +940,9 @@ export default class OAuth2Authorization extends Authorization {
     }
     return html` <div class="full-input credential-source-list">
       <ui-dropdown-list verticalAlign="top" @select="${this.handleCredentialSource}" closeOnOutsideClick>
-        <ui-text-field readOnly name="credentialSource" .value="${credentialSource || ''}" label="Grant type">
+        <ui-filled-text-field readOnly name="credentialSource" .value="${credentialSource || ''}" label="Grant type">
           <ui-icon slot="suffix" icon="arrowDropDown" role="presentation"></ui-icon>
-        </ui-text-field>
+        </ui-filled-text-field>
         <ui-list slot="dropdown" role="menu">
           ${credentials.map(
             (current) => html`<ui-list-item role="menuitem" data-value="${current.name}">${current.name}</ui-list-item>`
@@ -964,7 +964,7 @@ export default class OAuth2Authorization extends Authorization {
     const sourceSelected = this.isSourceSelected()
     return html`
       <div class="full-input base-level">
-        <ui-text-field
+        <ui-filled-text-field
           label="Client id"
           name="clientId"
           type="password"
@@ -974,7 +974,7 @@ export default class OAuth2Authorization extends Authorization {
           ?disabled="${sourceSelected ? credentialsDisabled : true}"
           ?readOnly="${this.readOnly}"
           @change="${this.handleClientId}"
-        ></ui-text-field>
+        ></ui-filled-text-field>
       </div>
     `
   }
@@ -992,7 +992,7 @@ export default class OAuth2Authorization extends Authorization {
     const sourceSelected = this.isSourceSelected()
     return html`
       <div class="full-input base-level">
-        <ui-text-field
+        <ui-filled-text-field
           label="Client secret"
           name="clientSecret"
           type="password"
@@ -1002,7 +1002,7 @@ export default class OAuth2Authorization extends Authorization {
           ?disabled="${sourceSelected ? credentialsDisabled : true}"
           ?readOnly="${this.readOnly}"
           @change="${this.handleClientSecret}"
-        ></ui-text-field>
+        ></ui-filled-text-field>
       </div>
     `
   }
@@ -1017,7 +1017,7 @@ export default class OAuth2Authorization extends Authorization {
     }
     return html`
       <div class="full-input base-level">
-        <ui-text-field
+        <ui-filled-text-field
           label="Assertion (JWT)"
           name="assertion"
           .value="${live(config.assertion || '')}"
@@ -1026,7 +1026,7 @@ export default class OAuth2Authorization extends Authorization {
           ?disabled="${this.disabled}"
           ?readOnly="${this.readOnly}"
           @change="${this.handleAssertion}"
-        ></ui-text-field>
+        ></ui-filled-text-field>
       </div>
     `
   }
@@ -1041,7 +1041,7 @@ export default class OAuth2Authorization extends Authorization {
     }
     return html`
       <div class="full-input base-level">
-        <ui-text-field
+        <ui-filled-text-field
           label="Device code"
           name="deviceCode"
           .value="${live(config.deviceCode || '')}"
@@ -1050,7 +1050,7 @@ export default class OAuth2Authorization extends Authorization {
           ?disabled="${this.disabled}"
           ?readOnly="${this.readOnly}"
           @change="${this.handleDeviceCode}"
-        ></ui-text-field>
+        ></ui-filled-text-field>
       </div>
     `
   }
@@ -1067,7 +1067,7 @@ export default class OAuth2Authorization extends Authorization {
     const { authorizationUri } = config
     return html`
       <div class="full-input base-level">
-        <ui-text-field
+        <ui-filled-text-field
           label="Authorization URI"
           name="authorizationUri"
           .value="${live(authorizationUri || '')}"
@@ -1077,7 +1077,7 @@ export default class OAuth2Authorization extends Authorization {
           ?disabled="${this.disabled}"
           ?readOnly="${this.readOnly}"
           @change="${this.handleAuthorizationUri}"
-        ></ui-text-field>
+        ></ui-filled-text-field>
       </div>
     `
   }
@@ -1094,7 +1094,7 @@ export default class OAuth2Authorization extends Authorization {
     const { accessTokenUri } = config
     return html`
       <div class="full-input base-level">
-        <ui-text-field
+        <ui-filled-text-field
           label="Access token URI"
           name="accessTokenUri"
           .value="${live(accessTokenUri || '')}"
@@ -1104,7 +1104,7 @@ export default class OAuth2Authorization extends Authorization {
           ?disabled="${this.disabled}"
           ?readOnly="${this.readOnly}"
           @change="${this.handleAccessTokenUri}"
-        ></ui-text-field>
+        ></ui-filled-text-field>
       </div>
     `
   }
@@ -1120,7 +1120,7 @@ export default class OAuth2Authorization extends Authorization {
     const { username } = config
     return html`
       <div class="full-input base-level">
-        <ui-text-field
+        <ui-filled-text-field
           label="Username"
           name="username"
           .value="${live(username || '')}"
@@ -1129,7 +1129,7 @@ export default class OAuth2Authorization extends Authorization {
           ?disabled="${this.disabled}"
           ?readOnly="${this.readOnly}"
           @change="${this.handleUsername}"
-        ></ui-text-field>
+        ></ui-filled-text-field>
       </div>
     `
   }
@@ -1145,7 +1145,7 @@ export default class OAuth2Authorization extends Authorization {
     const { password } = config
     return html`
       <div class="full-input base-level">
-        <ui-text-field
+        <ui-filled-text-field
           label="Password"
           name="password"
           .value="${live(password || '')}"
@@ -1155,7 +1155,7 @@ export default class OAuth2Authorization extends Authorization {
           ?disabled="${this.disabled}"
           ?readOnly="${this.readOnly}"
           @change="${this.handlePassword}"
-        ></ui-text-field>
+        ></ui-filled-text-field>
       </div>
     `
   }
@@ -1175,7 +1175,7 @@ export default class OAuth2Authorization extends Authorization {
     const { disabled, readOnly } = this
     return html` <div class="full-input delivery-method-line">
       <ui-dropdown-list verticalAlign="top" @select="${this.handleDeliveryMethod}" closeOnOutsideClick>
-        <ui-text-field
+        <ui-filled-text-field
           readOnly
           name="deliveryMethod"
           .value="${LocationLabels[deliveryMethod as OAuth2DeliveryMethod] || ''}"
@@ -1184,7 +1184,7 @@ export default class OAuth2Authorization extends Authorization {
           data-selected="${deliveryMethod || ''}"
         >
           <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="header">${LocationLabels.header}</ui-list-item>
           <ui-list-item role="menuitem" data-value="body">${LocationLabels.body}</ui-list-item>
@@ -1227,7 +1227,7 @@ export default class OAuth2Authorization extends Authorization {
     const { redirectUri = defaultRedirectUri } = config
     return html`
       <div class="full-input base-level">
-        <ui-text-field
+        <ui-filled-text-field
           label="Redirect URI"
           name="redirectUri"
           .value="${live(redirectUri)}"
@@ -1237,7 +1237,7 @@ export default class OAuth2Authorization extends Authorization {
           ?disabled="${this.disabled}"
           ?readOnly="${this.readOnly}"
           @change="${this.handleRedirectUri}"
-        ></ui-text-field>
+        ></ui-filled-text-field>
       </div>
     `
   }
@@ -1254,7 +1254,12 @@ export default class OAuth2Authorization extends Authorization {
         </div>
 
         <div class="full-input base-level">
-          <ui-text-field label="Scope value" name="scope" ?disabled="${this.disabled}" ?readOnly="${this.readOnly}">
+          <ui-filled-text-field
+            label="Scope value"
+            name="scope"
+            ?disabled="${this.disabled}"
+            ?readOnly="${this.readOnly}"
+          >
             <ui-icon-button
               type="outlined"
               slot="suffix"
@@ -1264,7 +1269,7 @@ export default class OAuth2Authorization extends Authorization {
             >
               <ui-icon icon="add" role="presentation"></ui-icon>
             </ui-icon-button>
-          </ui-text-field>
+          </ui-filled-text-field>
         </div>
         ${this.renderScopesList(scopes)}
       </section>

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

@@ -418,7 +418,7 @@ export default class OidcAuthorization extends OAuth2Authorization {
     const { issuerUri } = config
     return html`
       <div class="full-input base-level issuer-field">
-        <ui-text-field
+        <ui-filled-text-field
           label="Issuer URI"
           name="issuerUri"
           .value="${live(issuerUri || '')}"
@@ -429,7 +429,7 @@ export default class OidcAuthorization extends OAuth2Authorization {
           ?disabled="${this.disabled}"
           ?readOnly="${this.readOnly}"
           @change="${this.handleIssuerUri}"
-        ></ui-text-field>
+        ></ui-filled-text-field>
 
         <ui-filled-tonal-button
           title="Downloads and processes the discovery info"
@@ -462,7 +462,7 @@ export default class OidcAuthorization extends OAuth2Authorization {
 
     return html` <div class="full-input">
       <ui-dropdown-list verticalAlign="top" @select="${this.handleResponseTypeSelect}" closeOnOutsideClick>
-        <ui-text-field
+        <ui-filled-text-field
           readOnly
           name="responseType"
           .value="${label}"
@@ -470,7 +470,7 @@ export default class OidcAuthorization extends OAuth2Authorization {
           ?disabled="${disabled || readOnly}"
         >
           <ui-icon slot="suffix" icon="arrowDropDown" role="presentation"></ui-icon>
-        </ui-text-field>
+        </ui-filled-text-field>
         <ui-list slot="dropdown" role="menu">
           ${supportedResponses.map((item, index) => this.renderResponseItem(item, index))}
         </ui-list>

package/src/elements/autocomplete/autocomplete-input.ts

@@ -0,0 +1,14 @@
+import { customElement } from 'lit/decorators.js'
+import Element from './internals/autocomplete.js'
+import styles from './internals/autocomplete.styles.js'
+
+@customElement('autocomplete-input')
+export class AutocompleteInput extends Element {
+  static override styles = [styles]
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'autocomplete-input': AutocompleteInput
+  }
+}

package/src/elements/autocomplete/internals/autocomplete.styles.ts

@@ -0,0 +1,25 @@
+import { css } from 'lit'
+
+export default css`
+  :host {
+    display: block;
+  }
+
+  ::slotted([popover]) {
+    border: none;
+    margin: 0;
+    position-area: bottom;
+    position-try-fallbacks:
+      flip-block,
+      flip-inline,
+      flip-block flip-inline;
+    width: anchor-size(width);
+
+    box-shadow: var(--md-sys-elevation-1);
+    border-radius: var(--md-sys-shape-corner-medium);
+  }
+
+  ::slotted([popover]:not(:popover-open)) {
+    display: none;
+  }
+`