@api-client/ui 0.2.2 → 0.2.4

package/src/elements/environment/ServerEditor.ts

@@ -6,7 +6,7 @@ import { type IServer, Server } from '@api-client/core/models/Server.js'
 import elementStyles from './ServerEditor.styles.js'
 import Input from '../../md/input/Input.js'
 import ApiElement from '../ApiElement.js'
-import '../../md/text-field/ui-text-field.js'
+import '../../md/text-field/ui-filled-text-field.js'
 import '../../md/icons/ui-icon.js'
 import '../../md/icon-button/ui-icon-button.js'
 
@@ -165,37 +165,37 @@ export default class ServerEditor extends ApiElement {
   protected renderUriInput(): TemplateResult {
     return html`
       <div class="form-item">
-        <ui-text-field
+        <ui-filled-text-field
           required
           name="uri"
           .value="${live(this.uri || '')}"
           label="URI"
           @change="${this.handleUriChange}"
-        ></ui-text-field>
+        ></ui-filled-text-field>
       </div>
     `
   }
 
   protected renderProtocolInput(): TemplateResult {
     return html` <div class="form-item">
-      <ui-text-field
+      <ui-filled-text-field
         name="protocol"
         .value="${live(this.protocol || '')}"
         .list="${DefaultProtocols}"
         label="Protocol (optional)"
         @change="${this.handleProtocolChange}"
-      ></ui-text-field>
+      ></ui-filled-text-field>
     </div>`
   }
 
   protected renderBasePathInput(): TemplateResult {
     return html` <div class="form-item">
-      <ui-text-field
+      <ui-filled-text-field
         name="basePath"
         .value="${live(this.basePath || '')}"
         label="Base path (optional)"
         @change="${this.handleBasePathChange}"
-      ></ui-text-field>
+      ></ui-filled-text-field>
     </div>`
   }
 

package/src/elements/http/BodyMultipartEditor.ts

@@ -208,10 +208,14 @@ export default class BodyMultipartEditor extends ApiElement {
   protected async updateModel(value?: unknown): Promise<void> {
     if (!value || !(value instanceof FormData)) {
       this.model = []
+      setTimeout(() => {
+        this.dispatchEvent(new CustomEvent('modelupdate', { bubbles: false, composed: false }))
+      })
       return
     }
     const payload = await PayloadSerializer.stringifyFormData(value as FormData)
     this.model = payload.data as IMultipartBody[]
+    this.dispatchEvent(new CustomEvent('modelupdate', { bubbles: false, composed: false }))
   }
 
   /**

package/src/elements/http/CertificateAdd.element.ts

@@ -14,7 +14,7 @@ import type Input from '../../md/input/Input.js'
 import { SnackNotifications } from '../../md/notification/SnackNotifications.js'
 import '../../md/segmented-button/ui-segmented-button.js'
 import '../../md/segmented-button/ui-segmented-button-set.js'
-import '../../md/text-field/ui-text-field.js'
+import '../../md/text-field/ui-filled-text-field.js'
 import '../../md/button/ui-text-button.js'
 import '../../md/button/ui-filled-button.js'
 import '../../md/button/ui-filled-tonal-button.js'
@@ -304,7 +304,7 @@ export default class CertificateAdd extends ApiElement {
   }
 
   reportValidity(): boolean {
-    const inputs = Array.from((this.shadowRoot as ShadowRoot).querySelectorAll('ui-text-field'))
+    const inputs = Array.from((this.shadowRoot as ShadowRoot).querySelectorAll('ui-filled-text-field'))
     let invalid = false
     inputs.forEach((input) => {
       const inputResult = input.reportValidity()
@@ -362,14 +362,14 @@ export default class CertificateAdd extends ApiElement {
     const { certificateName = '' } = this
     return html`
       <div class="form-input">
-        <ui-text-field
+        <ui-filled-text-field
           required
           name="name"
           .value="${live(certificateName)}"
           label="Certificate name"
           @change="${this.handleNameChange}"
           invalidText="The name is required"
-        ></ui-text-field>
+        ></ui-filled-text-field>
       </div>
     `
   }
@@ -406,14 +406,14 @@ export default class CertificateAdd extends ApiElement {
     }
     return html`
       <div class="form-input">
-        <ui-text-field
+        <ui-filled-text-field
           name="certificatePassword"
           type="password"
           .value="${live(certificatePassword)}"
           label="Certificate password"
           @change="${this.handleCertificatePasswordChange}"
           supportingText="Optional password for the certificate"
-        ></ui-text-field>
+        ></ui-filled-text-field>
       </div>
     `
   }
@@ -452,14 +452,14 @@ export default class CertificateAdd extends ApiElement {
     const { keyPassword = '' } = this
     return html`
       <div class="form-input">
-        <ui-text-field
+        <ui-filled-text-field
           name="keyPassword"
           type="password"
           .value="${live(keyPassword)}"
           label="Key password"
           @change="${this.handleKeyPasswordChange}"
           supportingText="Optional password for the key"
-        ></ui-text-field>
+        ></ui-filled-text-field>
       </div>
     `
   }

package/src/elements/http/CertificateAdd.styles.ts

@@ -53,7 +53,7 @@ export default [
       margin-right: 8px;
     }
 
-    ui-text-field {
+    ui-filled-text-field {
       min-width: 320px;
     }
 

package/src/elements/http/HttpAssertions.element.ts

@@ -123,7 +123,7 @@ export default class HttpAssertions extends HttpFlowsUi {
     if (!dialog) {
       return
     }
-    const input = dialog.querySelector('ui-text-field') as Input
+    const input = dialog.querySelector('ui-filled-text-field') as Input
     input.value = description || ''
     dialog.open = true
     dialog.dataset.assertionIndex = target.dataset.assertionIndex
@@ -142,7 +142,7 @@ export default class HttpAssertions extends HttpFlowsUi {
     if (!assertion) {
       return
     }
-    const input = dialog.querySelector('ui-text-field') as Input
+    const input = dialog.querySelector('ui-filled-text-field') as Input
     assertion.description = input.value
     this.requestUpdate()
     this.notifyChange()
@@ -265,7 +265,7 @@ export default class HttpAssertions extends HttpFlowsUi {
         <ui-icon slot="icon" icon="rename"></ui-icon>
         <span slot="title">Rename assertion</span>
 
-        <ui-text-field name="rename" label="Assertion description" required class="input"></ui-text-field>
+        <ui-filled-text-field name="rename" label="Assertion description" required class="input"></ui-filled-text-field>
       </ui-dialog>
     `
   }

package/src/elements/http/HttpFlows.element.ts

@@ -218,7 +218,7 @@ export default class HttpFlows extends HttpFlowsUi {
       return
     }
     const dialog = e.target as UiDialog
-    const input = dialog.querySelector('ui-text-field')
+    const input = dialog.querySelector('ui-filled-text-field')
     if (!input) {
       return
     }
@@ -521,13 +521,13 @@ export default class HttpFlows extends HttpFlowsUi {
       >
         <span slot="title">New Flow</span>
 
-        <ui-text-field
+        <ui-filled-text-field
           class="input"
           label="Flow name"
           name="name"
           required
           invalidText="Flow name is required"
-        ></ui-text-field>
+        ></ui-filled-text-field>
       </ui-dialog>
     `
   }

package/src/elements/http/HttpFlowsUi.ts

@@ -21,7 +21,7 @@ import '../../md/list/ui-list-item.js'
 import '../../md/dropdown-list/ui-dropdown-list.js'
 import '../../md/icons/ui-icon.js'
 import '../../md/icon-button/ui-icon-button.js'
-import '../../md/text-field/ui-text-field.js'
+import '../../md/text-field/ui-filled-text-field.js'
 import '../../md/chip/ui-chip.js'
 import '../../md/dialog/ui-dialog.js'
 import '../dialog/delete-cookie-action-dialog.js'
@@ -876,7 +876,7 @@ export abstract class HttpFlowsUi extends ApiElement {
     const pill = this.renderStepPill('Read value', assertionOrActionIndex, stepIndex)
     return html`
       ${pill}
-      <ui-text-field
+      <ui-filled-text-field
         name="value.${assertionOrActionIndex}.${stepIndex}"
         data-assertion-index="${assertionOrActionIndex}"
         data-step-index="${stepIndex}"
@@ -885,7 +885,7 @@ export abstract class HttpFlowsUi extends ApiElement {
         .value="${live(item.path || '')}"
         class="space-step-left"
         @change="${this.handleReadValueStepChange}"
-      ></ui-text-field>
+      ></ui-filled-text-field>
     `
   }
 
@@ -948,7 +948,7 @@ export abstract class HttpFlowsUi extends ApiElement {
     const pill = this.renderStepPill('Set variable', assertionOrActionIndex, stepIndex)
     return html`
       ${pill}
-      <ui-text-field
+      <ui-filled-text-field
         name="variable.${assertionOrActionIndex}.${stepIndex}"
         data-assertion-index="${assertionOrActionIndex}"
         data-step-index="${stepIndex}"
@@ -959,7 +959,7 @@ export abstract class HttpFlowsUi extends ApiElement {
         class="space-step-left"
         pattern="[a-zA-Z0-9_]+"
         aria-label="Variable name"
-      ></ui-text-field>
+      ></ui-filled-text-field>
     `
   }
 
@@ -972,7 +972,7 @@ export abstract class HttpFlowsUi extends ApiElement {
     const pill = this.renderStepPill('Delete variable', assertionOrActionIndex, stepIndex)
     return html`
       ${pill}
-      <ui-text-field
+      <ui-filled-text-field
         name="variable.${assertionOrActionIndex}.${stepIndex}"
         data-assertion-index="${assertionOrActionIndex}"
         data-step-index="${stepIndex}"
@@ -983,7 +983,7 @@ export abstract class HttpFlowsUi extends ApiElement {
         class="space-step-left"
         pattern="[a-zA-Z0-9_]+"
         aria-label="Variable name"
-      ></ui-text-field>
+      ></ui-filled-text-field>
     `
   }
 
@@ -996,7 +996,7 @@ export abstract class HttpFlowsUi extends ApiElement {
     const { precision = 0 } = item
     return html`
       ${pill}
-      <ui-text-field
+      <ui-filled-text-field
         name="precision.${assertionOrActionIndex}.${stepIndex}"
         data-assertion-index="${assertionOrActionIndex}"
         data-step-index="${stepIndex}"
@@ -1010,7 +1010,7 @@ export abstract class HttpFlowsUi extends ApiElement {
         max="100"
         step="1"
         title="The number of digits to appear after the decimal point. Should be a value between 0 and 100, inclusive."
-      ></ui-text-field>
+      ></ui-filled-text-field>
     `
   }
 
@@ -1023,7 +1023,7 @@ export abstract class HttpFlowsUi extends ApiElement {
     const { start = 0, end } = item
     return html`
       ${pill}
-      <ui-text-field
+      <ui-filled-text-field
         name="start.${assertionOrActionIndex}.${stepIndex}"
         data-assertion-index="${assertionOrActionIndex}"
         data-step-index="${stepIndex}"
@@ -1035,9 +1035,9 @@ export abstract class HttpFlowsUi extends ApiElement {
         type="number"
         step="1"
         title="The index of the first character to include in the returned substring."
-      ></ui-text-field>
+      ></ui-filled-text-field>
 
-      <ui-text-field
+      <ui-filled-text-field
         name="end.${assertionOrActionIndex}.${stepIndex}"
         data-assertion-index="${assertionOrActionIndex}"
         data-step-index="${stepIndex}"
@@ -1048,7 +1048,7 @@ export abstract class HttpFlowsUi extends ApiElement {
         type="number"
         step="1"
         title="The index of the first character to exclude from the returned substring."
-      ></ui-text-field>
+      ></ui-filled-text-field>
     `
   }
 
@@ -1058,7 +1058,7 @@ export abstract class HttpFlowsUi extends ApiElement {
     stepIndex: number
   ): TemplateResult {
     return html`
-      <ui-text-field
+      <ui-filled-text-field
         name="equal.${assertionOrActionIndex}.${stepIndex}"
         data-assertion-index="${assertionOrActionIndex}"
         data-step-index="${stepIndex}"
@@ -1077,7 +1077,7 @@ export abstract class HttpFlowsUi extends ApiElement {
           data-step-index="${stepIndex}"
           ><ui-icon icon="close" role="presentation"></ui-icon
         ></ui-icon-button>
-      </ui-text-field>
+      </ui-filled-text-field>
     `
   }
 
@@ -1087,7 +1087,7 @@ export abstract class HttpFlowsUi extends ApiElement {
     stepIndex: number
   ): TemplateResult {
     return html`
-      <ui-text-field
+      <ui-filled-text-field
         name="not-equal.${assertionOrActionIndex}.${stepIndex}"
         data-assertion-index="${assertionOrActionIndex}"
         data-step-index="${stepIndex}"
@@ -1106,7 +1106,7 @@ export abstract class HttpFlowsUi extends ApiElement {
           data-step-index="${stepIndex}"
           ><ui-icon icon="close" role="presentation"></ui-icon
         ></ui-icon-button>
-      </ui-text-field>
+      </ui-filled-text-field>
     `
   }
 
@@ -1119,7 +1119,7 @@ export abstract class HttpFlowsUi extends ApiElement {
     const label = equal ? 'Greater than equal' : 'Greater than'
     const effectiveValue = typeof value === 'number' ? String(value) : ''
     return html`
-      <ui-text-field
+      <ui-filled-text-field
         name="value.${assertionOrActionIndex}.${stepIndex}"
         data-assertion-index="${assertionOrActionIndex}"
         data-step-index="${stepIndex}"
@@ -1140,7 +1140,7 @@ export abstract class HttpFlowsUi extends ApiElement {
           data-step-index="${stepIndex}"
           ><ui-icon icon="close" role="presentation"></ui-icon
         ></ui-icon-button>
-      </ui-text-field>
+      </ui-filled-text-field>
     `
   }
 
@@ -1153,7 +1153,7 @@ export abstract class HttpFlowsUi extends ApiElement {
     const label = equal ? 'Less than equal' : 'Less than'
     const effectiveValue = typeof value === 'number' ? String(value) : ''
     return html`
-      <ui-text-field
+      <ui-filled-text-field
         name="value.${assertionOrActionIndex}.${stepIndex}"
         data-assertion-index="${assertionOrActionIndex}"
         data-step-index="${stepIndex}"
@@ -1174,7 +1174,7 @@ export abstract class HttpFlowsUi extends ApiElement {
           data-step-index="${stepIndex}"
           ><ui-icon icon="close" role="presentation"></ui-icon
         ></ui-icon-button>
-      </ui-text-field>
+      </ui-filled-text-field>
     `
   }
 
@@ -1185,7 +1185,7 @@ export abstract class HttpFlowsUi extends ApiElement {
   ): TemplateResult {
     const { value } = item
     return html`
-      <ui-text-field
+      <ui-filled-text-field
         name="includes.${assertionOrActionIndex}.${stepIndex}"
         data-assertion-index="${assertionOrActionIndex}"
         data-step-index="${stepIndex}"
@@ -1204,7 +1204,7 @@ export abstract class HttpFlowsUi extends ApiElement {
           data-step-index="${stepIndex}"
           ><ui-icon icon="close" role="presentation"></ui-icon
         ></ui-icon-button>
-      </ui-text-field>
+      </ui-filled-text-field>
     `
   }
 
@@ -1215,7 +1215,7 @@ export abstract class HttpFlowsUi extends ApiElement {
   ): TemplateResult {
     const { value } = item
     return html`
-      <ui-text-field
+      <ui-filled-text-field
         name="not-includes.${assertionOrActionIndex}.${stepIndex}"
         data-assertion-index="${assertionOrActionIndex}"
         data-step-index="${stepIndex}"
@@ -1234,7 +1234,7 @@ export abstract class HttpFlowsUi extends ApiElement {
           data-step-index="${stepIndex}"
           ><ui-icon icon="close" role="presentation"></ui-icon
         ></ui-icon-button>
-      </ui-text-field>
+      </ui-filled-text-field>
     `
   }
 
@@ -1245,7 +1245,7 @@ export abstract class HttpFlowsUi extends ApiElement {
   ): TemplateResult {
     const { value } = item
     return html`
-      <ui-text-field
+      <ui-filled-text-field
         name="matches.${assertionOrActionIndex}.${stepIndex}"
         data-assertion-index="${assertionOrActionIndex}"
         data-step-index="${stepIndex}"
@@ -1266,7 +1266,7 @@ export abstract class HttpFlowsUi extends ApiElement {
           data-step-index="${stepIndex}"
           ><ui-icon icon="close" role="presentation"></ui-icon
         ></ui-icon-button>
-      </ui-text-field>
+      </ui-filled-text-field>
     `
   }
 
@@ -1278,7 +1278,7 @@ export abstract class HttpFlowsUi extends ApiElement {
     const { value } = item
     const types = Object.values(CoreAssertions.ToBeTypes)
     return html`
-      <ui-text-field
+      <ui-filled-text-field
         name="to-be.${assertionOrActionIndex}.${stepIndex}"
         data-assertion-index="${assertionOrActionIndex}"
         data-step-index="${stepIndex}"
@@ -1298,7 +1298,7 @@ export abstract class HttpFlowsUi extends ApiElement {
           data-step-index="${stepIndex}"
           ><ui-icon icon="close" role="presentation"></ui-icon
         ></ui-icon-button>
-      </ui-text-field>
+      </ui-filled-text-field>
     `
   }
 
@@ -1310,7 +1310,7 @@ export abstract class HttpFlowsUi extends ApiElement {
     const { value } = item
     const types = Object.values(CoreAssertions.ToBeTypes)
     return html`
-      <ui-text-field
+      <ui-filled-text-field
         name="not-to-be.${assertionOrActionIndex}.${stepIndex}"
         data-assertion-index="${assertionOrActionIndex}"
         data-step-index="${stepIndex}"
@@ -1330,7 +1330,7 @@ export abstract class HttpFlowsUi extends ApiElement {
           data-step-index="${stepIndex}"
           ><ui-icon icon="close" role="presentation"></ui-icon
         ></ui-icon-button>
-      </ui-text-field>
+      </ui-filled-text-field>
     `
   }
 

package/src/elements/http/RequestConfigElement.ts

@@ -6,7 +6,7 @@ import ApiElement from '../ApiElement.js'
 import type SwitchElement from '../../md/switch/internals/SwitchElement.js'
 import type Input from '../../md/input/Input.js'
 import '../../md/switch/ui-switch.js'
-import '../../md/text-field/ui-text-field.js'
+import '../../md/text-field/ui-filled-text-field.js'
 
 /**
  * @fires change - when the configuration object changed.
@@ -172,7 +172,7 @@ export default class RequestConfigElement extends ApiElement {
     const value = typeof timeout === 'number' ? String(timeout) : ''
     return html`
       <div class="form-row">
-        <ui-text-field
+        <ui-filled-text-field
           name="timeout"
           label="Request timeout"
           .value="${live(value)}"
@@ -180,7 +180,7 @@ export default class RequestConfigElement extends ApiElement {
           supportingText="0 for no timeout, clear for default."
           inputMode="numeric"
           invalidText="Enter a positive integer or zero."
-        ></ui-text-field>
+        ></ui-filled-text-field>
       </div>
     `
   }
@@ -192,12 +192,12 @@ export default class RequestConfigElement extends ApiElement {
     }
     return html`
       <div class="form-row">
-        <ui-text-field
+        <ui-filled-text-field
           name="defaultUserAgent"
           label="Default user agent"
           .value="${live(defaultUserAgent)}"
           @change="${this.handleDefaultUserAgentChange}"
-        ></ui-text-field>
+        ></ui-filled-text-field>
       </div>
     `
   }
@@ -209,12 +209,12 @@ export default class RequestConfigElement extends ApiElement {
     }
     return html`
       <div class="form-row">
-        <ui-text-field
+        <ui-filled-text-field
           name="defaultAccept"
           label="Default accept"
           .value="${live(defaultAccept)}"
           @change="${this.handleDefaultAcceptChange}"
-        ></ui-text-field>
+        ></ui-filled-text-field>
       </div>
     `
   }

package/src/elements/http/UrlParamsForm.ts

@@ -14,7 +14,7 @@ import '../../md/list/ui-list-item.js'
 import '../../md/switch/ui-switch.js'
 import '../../md/divider/ui-divider.js'
 import '../../md/icons/ui-icon.js'
-import '../../md/text-field/ui-text-field.js'
+import '../../md/text-field/ui-filled-text-field.js'
 
 export default class UrlParamsForm extends ApiElement {
   protected parser = new UrlProcessor('/')

package/src/elements/project/ProjectRunner.ts

@@ -16,7 +16,7 @@ import type Input from '../../md/input/Input.js'
 import '@github/relative-time-element'
 import '../../define/http-project/project-run-report.js'
 import '../../md/checkbox/ui-checkbox.js'
-import '../../md/text-field/ui-text-field.js'
+import '../../md/text-field/ui-filled-text-field.js'
 import '../../md/button/ui-filled-button.js'
 import '../../md/button/ui-filled-tonal-button.js'
 import '../../md/progress/ui-progress.js'
@@ -405,7 +405,7 @@ export default class ProjectRunner extends ApiElement {
     const value = typeof config.iterations === 'number' ? config.iterations : 1
     return html`
       <div class="form-row">
-        <ui-text-field
+        <ui-filled-text-field
           required
           label="Iterations"
           aria-describedby="iterationsDescription"
@@ -415,7 +415,7 @@ export default class ProjectRunner extends ApiElement {
           step="1"
           .value="${String(value)}"
           @change="${this.handleIterationsChange}"
-        ></ui-text-field>
+        ></ui-filled-text-field>
         <p class="body-medium" id="iterationsDescription">The number of times the execution should be repeated.</p>
       </div>
     `
@@ -426,7 +426,7 @@ export default class ProjectRunner extends ApiElement {
     const value = typeof config.iterationDelay === 'number' ? config.iterationDelay : 0
     return html`
       <div class="form-row">
-        <ui-text-field
+        <ui-filled-text-field
           required
           label="Iteration delay"
           aria-describedby="iterationDelayDescription"
@@ -436,7 +436,7 @@ export default class ProjectRunner extends ApiElement {
           step="1"
           .value="${String(value)}"
           @change="${this.handleIterationDelayChange}"
-        ></ui-text-field>
+        ></ui-filled-text-field>
         <p class="body-medium" id="iterationDelayDescription">
           The number of milliseconds to wait between each iteration.
         </p>

package/src/md/input/Input.ts

@@ -9,9 +9,6 @@ import { UiElement } from '../UiElement.js'
 import '../icon-button/ui-icon-button.js'
 import '../icons/ui-icon.js'
 
-// export type SupportedInputTypes = "text" | "search" | "tel" | "url" | "email" | "password" |
-//   "datetime" | "date" | "month" | "week" | "time" | "datetime-local" | "number" | "color" | "file";
-
 const floatTypes = ['date', 'color', 'datetime-local', 'file', 'month', 'time', 'week']
 
 /**
@@ -227,23 +224,6 @@ export default abstract class Input extends UiElement {
    */
   override autocapitalize: SupportedAutocapitalize = 'off'
 
-  /**
-   * Binds this to the `<input>`'s `autocorrect` property.
-   * @default off
-   * @attribute
-   */
-  @property({ type: String }) accessor autocorrect = 'off'
-
-  /**
-   * Binds this to the `<input>`'s `results` property,
-   * used with type=search.
-   *
-   * The maximum number of items that should be displayed in the
-   * drop-down list of previous search queries. Safari only.
-   * @attribute
-   */
-  @property({ type: Number }) accessor results: number | undefined
-
   /**
    * Binds this to the `<input>`'s `accept` property,
    * used with type=file.
@@ -572,6 +552,9 @@ export default abstract class Input extends UiElement {
   }
 
   protected getInputValue(): string {
+    if (this.type === 'color') {
+      return this.value || '#000000'
+    }
     return this.value || ''
   }
 
@@ -896,10 +879,12 @@ export default abstract class Input extends UiElement {
 
   protected override render(): TemplateResult {
     const { pressed = false } = this
+    const labelResting = this.labelResting()
     const containerClasses = classMap({
       surface: true,
       pressed,
-      labelResting: this.labelResting(),
+      labelResting,
+      labelActive: !labelResting,
       labelHidden: this.labelHidden(),
     })
     return html`