@api-client/ui 0.2.3 → 0.2.5

package/src/elements/dialog/internals/SetCookieAction.element.ts

@@ -8,7 +8,7 @@ import type CheckboxElement from '../../../md/checkbox/internals/CheckboxElement
 import { type ISetCookieStep, SetCookieStep } from '@api-client/core/models/http-flows/steps/data/SetCookieStep.js'
 import type { SameSiteValue } from '@api-client/core/cookies/CookieParser.js'
 
-import '../../../md/text-field/ui-text-field.js'
+import '../../../md/text-field/ui-filled-text-field.js'
 import '../../../md/checkbox/ui-checkbox.js'
 
 /**
@@ -91,7 +91,7 @@ export default class SetCookieAction extends UiDialog {
     return html`
       <div class="content">
         <div class="param-row">
-          <ui-text-field
+          <ui-filled-text-field
             name="name"
             label="Cookie name"
             type="text"
@@ -100,11 +100,11 @@ export default class SetCookieAction extends UiDialog {
             @change="${this.handleValueChange}"
             class="input"
             supportingText="The name of the cookie to set."
-          ></ui-text-field>
+          ></ui-filled-text-field>
         </div>
 
         <div class="param-row">
-          <ui-text-field
+          <ui-filled-text-field
             name="url"
             label="Cookie URL"
             type="url"
@@ -112,29 +112,29 @@ export default class SetCookieAction extends UiDialog {
             @change="${this.handleValueChange}"
             class="input"
             supportingText="When the URL is not set then the request URL is used."
-          ></ui-text-field>
+          ></ui-filled-text-field>
         </div>
 
         <div class="param-row">
-          <ui-text-field
+          <ui-filled-text-field
             name="expires"
             label="Expires"
             .value="${live(expires)}"
             @change="${this.handleValueChange}"
             class="input"
             supportingText="A valid cookie date or relative time like 4d, 600s, etc."
-          ></ui-text-field>
+          ></ui-filled-text-field>
         </div>
 
         <div class="param-row">
-          <ui-text-field
+          <ui-filled-text-field
             name="sameSite"
             label="Same site"
             .value="${live(sameSite)}"
             @change="${this.handleSameSiteChange}"
             class="input"
             .list="${['Lax', 'Strict', 'None']}"
-          ></ui-text-field>
+          ></ui-filled-text-field>
         </div>
 
         <div class="checkbox-row">

package/src/elements/environment/EnvironmentEditor.styles.ts

@@ -6,7 +6,7 @@ export default css`
     max-width: 900px;
   }
 
-  ui-text-field {
+  ui-filled-text-field {
     margin: 0;
     width: 100%;
   }

package/src/elements/environment/EnvironmentEditor.ts

@@ -20,7 +20,7 @@ import { TabSelectionDetail } from '../../md/tabs/internals/Tabs.js'
 import '../../define/environment/server-editor.js'
 import '../../define/environment/variables-editor.js'
 import '../../md/icons/ui-icon.js'
-import '../../md/text-field/ui-text-field.js'
+import '../../md/text-field/ui-filled-text-field.js'
 import '../../md/switch/ui-switch.js'
 import '../../md/icon-button/ui-icon-button.js'
 import '../../md/button/ui-filled-tonal-button.js'
@@ -256,13 +256,13 @@ export default class EnvironmentEditor extends ApiElement {
   protected renderNameInput(): TemplateResult {
     const { environment } = this
     return html` <div class="form-item">
-      <ui-text-field
+      <ui-filled-text-field
         name="name"
         label="Environment name"
         required
         .value="${live(environment.info.name || '')}"
         @change="${this.handleNameChange}"
-      ></ui-text-field>
+      ></ui-filled-text-field>
     </div>`
   }
 

package/src/elements/environment/ServerEditor.styles.ts

@@ -9,7 +9,7 @@ export default css`
     margin: 20px 0;
   }
 
-  ui-text-field {
+  ui-filled-text-field {
     margin: 0;
     width: 100%;
   }

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('/')