@api-client/ui 0.5.38 → 0.5.40

package/demo/elements/currency/index.ts

@@ -1,352 +0,0 @@
-import { html, TemplateResult } from 'lit'
-import { DemoPage } from '../../../src/demo/DemoPage.js'
-import reactive from '../../../src/decorators/reactive.js'
-import type { Currency, CurrencyPickerError } from '../../../src/elements/currency/internals/Picker.js'
-
-import '../../../src/elements/currency/currency-picker.js'
-import '../../../src/md/button/ui-button.js'
-import '../../../src/md/checkbox/ui-checkbox.js'
-import '../../../src/md/dialog/ui-dialog.js'
-
-class CurrencyPickerDemoPage extends DemoPage {
-  override accessor componentName = 'Currency Picker'
-
-  @reactive() accessor singleSelected: string[] = []
-  @reactive() accessor multiSelected: string[] = ['USD', 'EUR']
-  @reactive() accessor limitedSelected: string[] = []
-  @reactive() accessor formSelected: string[] = []
-  @reactive() accessor disabledSelected: string[] = ['GBP']
-
-  @reactive() accessor lastChangeEvent = 'No changes yet'
-  @reactive() accessor lastErrorEvent = 'No errors yet'
-  @reactive() accessor dialogOpen = false
-  @reactive() accessor dialogFormSelected: string[] = []
-
-  private readonly allowedCurrencies = ['USD', 'EUR', 'GBP', 'JPY', 'CAD']
-
-  handleSingleChange(event: CustomEvent<{ currencies: Currency[]; codes: string[] }>): void {
-    this.singleSelected = event.detail.codes
-    this.lastChangeEvent = `Single Select: ${JSON.stringify(event.detail, null, 2)}`
-  }
-
-  handleMultiChange(event: CustomEvent<{ currencies: Currency[]; codes: string[] }>): void {
-    this.multiSelected = event.detail.codes
-    this.lastChangeEvent = `Multi Select: ${JSON.stringify(event.detail, null, 2)}`
-  }
-
-  handleLimitedChange(event: CustomEvent<{ currencies: Currency[]; codes: string[] }>): void {
-    this.limitedSelected = event.detail.codes
-    this.lastChangeEvent = `Limited Currencies: ${JSON.stringify(event.detail, null, 2)}`
-  }
-
-  handleFormChange(event: CustomEvent<{ currencies: Currency[]; codes: string[] }>): void {
-    this.formSelected = event.detail.codes
-    this.lastChangeEvent = `Form Element: ${JSON.stringify(event.detail, null, 2)}`
-  }
-
-  handleError(event: CustomEvent<{ error: CurrencyPickerError }>): void {
-    this.lastErrorEvent = `Error: ${JSON.stringify(event.detail, null, 2)}`
-  }
-
-  handleDialogFormChange(event: CustomEvent<{ currencies: Currency[]; codes: string[] }>): void {
-    this.dialogFormSelected = event.detail.codes
-    this.lastChangeEvent = `Dialog Form: ${JSON.stringify(event.detail, null, 2)}`
-  }
-
-  handleOpenDialog(): void {
-    this.dialogOpen = true
-  }
-
-  handleCloseDialog(): void {
-    this.dialogOpen = false
-  }
-
-  handleDialogFormSubmit(event: Event): void {
-    event.preventDefault()
-    const formData = new FormData(event.target as HTMLFormElement)
-    console.log('Dialog form submitted:', Object.fromEntries(formData.entries()))
-
-    if (this.dialogFormSelected.length === 0) {
-      alert('Please select a currency before submitting.')
-    } else {
-      alert(`Dialog form submitted with currency: ${this.dialogFormSelected.join(', ')}`)
-      this.dialogOpen = false
-    }
-  }
-
-  handleClearSingle(): void {
-    const picker = document.querySelector('#single-picker') as HTMLElement & { clearSelection(): void }
-    picker?.clearSelection()
-  }
-
-  handleClearMulti(): void {
-    const picker = document.querySelector('#multi-picker') as HTMLElement & { clearSelection(): void }
-    picker?.clearSelection()
-  }
-
-  handleClearLimited(): void {
-    const picker = document.querySelector('#limited-picker') as HTMLElement & { clearSelection(): void }
-    picker?.clearSelection()
-  }
-
-  handleTriggerValidationError(): void {
-    const picker = document.querySelector('#error-demo-picker') as HTMLElement & { selected: string[] }
-    if (picker) {
-      // Try to set invalid currency codes
-      picker.selected = ['INVALID', 'FAKE', 'USD']
-    }
-  }
-
-  handleTriggerSelectionError(): void {
-    const picker = document.querySelector('#single-error-picker') as HTMLElement & { selected: string[] }
-    if (picker) {
-      // Try to set multiple currencies on single-select picker
-      picker.selected = ['USD', 'EUR', 'GBP']
-    }
-  }
-
-  override contentTemplate(): TemplateResult {
-    return html`
-      <section class="demo-section">
-        <h3>Single Currency Selection</h3>
-        <p>Select one currency at a time. When a new currency is selected, it replaces the previous selection.</p>
-
-        <div class="demo-controls">
-          <currency-picker
-            id="single-picker"
-            label="Select Currency"
-            .selected="${this.singleSelected}"
-            @change="${this.handleSingleChange}"
-            @error="${this.handleError}"
-          ></currency-picker>
-        </div>
-
-        <ui-button @click="${this.handleClearSingle}">Clear Selection</ui-button>
-
-        <div class="output-section">
-          <h4>Selected Currency</h4>
-          <div class="output-content">${this.singleSelected.join(', ') || 'None'}</div>
-        </div>
-      </section>
-
-      <section class="demo-section">
-        <h3>Multiple Currency Selection</h3>
-        <p>Select multiple currencies. Selected currencies appear as chips that can be removed individually.</p>
-
-        <div class="demo-controls">
-          <currency-picker
-            id="multi-picker"
-            label="Add Currency"
-            multi
-            .selected="${this.multiSelected}"
-            @change="${this.handleMultiChange}"
-            @error="${this.handleError}"
-          ></currency-picker>
-        </div>
-
-        <ui-button @click="${this.handleClearMulti}">Clear All</ui-button>
-
-        <div class="output-section">
-          <h4>Selected Currencies</h4>
-          <div class="output-content">${this.multiSelected.join(', ') || 'None'}</div>
-        </div>
-      </section>
-
-      <section class="demo-section">
-        <h3>Limited Currency Options</h3>
-        <p>Restrict available currencies to a specific subset using the allowedCurrencies property.</p>
-
-        <div class="demo-controls">
-          <currency-picker
-            id="limited-picker"
-            label="Select from Limited Options"
-            multi
-            .selected="${this.limitedSelected}"
-            .allowedCurrencies="${this.allowedCurrencies}"
-            supportingText="Only major currencies available"
-            @change="${this.handleLimitedChange}"
-            @error="${this.handleError}"
-          ></currency-picker>
-        </div>
-
-        <ui-button @click="${this.handleClearLimited}">Clear Selection</ui-button>
-
-        <div class="output-section">
-          <h4>Available Currencies</h4>
-          <div class="output-content">${this.allowedCurrencies.join(', ')}</div>
-          <h4>Selected Currencies</h4>
-          <div class="output-content">${this.limitedSelected.join(', ') || 'None'}</div>
-        </div>
-      </section>
-
-      <section class="demo-section">
-        <h3>Form Integration</h3>
-        <p>Use the currency picker in forms with proper name and required attributes.</p>
-
-        <form @submit="${this.handleFormSubmit}">
-          <div class="demo-controls">
-            <currency-picker
-              label="Required Currency"
-              name="currency"
-              required
-              .selected="${this.formSelected}"
-              supportingText="This field is required"
-              @change="${this.handleFormChange}"
-              @error="${this.handleError}"
-            ></currency-picker>
-          </div>
-
-          <ui-button type="submit">Submit Form</ui-button>
-          <ui-button color="text" type="reset">Reset Form</ui-button>
-        </form>
-
-        <div class="output-section">
-          <h4>Form Value</h4>
-          <div class="output-content">${this.formSelected.join(', ') || 'None'}</div>
-        </div>
-      </section>
-
-      <section class="demo-section">
-        <h3>Disabled State</h3>
-        <p>Currency picker in disabled state with pre-selected currencies.</p>
-
-        <div class="demo-controls">
-          <currency-picker
-            label="Disabled Picker"
-            disabled
-            .selected="${this.disabledSelected}"
-            supportingText="This picker is disabled"
-          ></currency-picker>
-        </div>
-
-        <div class="output-section">
-          <h4>Disabled Selection</h4>
-          <div class="output-content">${this.disabledSelected.join(', ')}</div>
-        </div>
-      </section>
-
-      <section class="demo-section">
-        <h3>Error Handling Demonstration</h3>
-        <p>Test various error scenarios to see how the component handles and displays errors.</p>
-
-        <h4>Validation Errors</h4>
-        <p>This picker demonstrates validation errors when invalid currency codes are set programmatically.</p>
-
-        <div class="demo-controls">
-          <currency-picker
-            id="error-demo-picker"
-            label="Validation Error Demo"
-            multi
-            @error="${this.handleError}"
-          ></currency-picker>
-        </div>
-
-        <ui-button @click="${this.handleTriggerValidationError}">Trigger Validation Error</ui-button>
-
-        <h4>Selection Constraint Errors</h4>
-        <p>This single-select picker demonstrates selection constraint errors.</p>
-
-        <div class="demo-controls">
-          <currency-picker
-            id="single-error-picker"
-            label="Single Select Error Demo"
-            @error="${this.handleError}"
-          ></currency-picker>
-        </div>
-
-        <ui-button @click="${this.handleTriggerSelectionError}">Trigger Selection Error</ui-button>
-
-        <div class="output-section">
-          <h4>Error Event Output</h4>
-          <div class="output-content">${this.lastErrorEvent}</div>
-        </div>
-      </section>
-
-      <section class="demo-section">
-        <h3>Event Output</h3>
-        <p>View the latest change event data in real-time.</p>
-
-        <div class="output-section">
-          <h4>Last Change Event</h4>
-          <div class="output-content">${this.lastChangeEvent}</div>
-        </div>
-      </section>
-
-      <section class="demo-section">
-        <h3>Error Handling</h3>
-        <p>View the latest error event data in real-time.</p>
-
-        <div class="output-section">
-          <h4>Last Error Event</h4>
-          <div class="output-content">${this.lastErrorEvent}</div>
-        </div>
-      </section>
-
-      <section class="demo-section">
-        <h3>Dialog Form Integration</h3>
-        <p>Test currency picker rendering inside a dialog that's inside a form.</p>
-
-        <ui-button @click="${this.handleOpenDialog}">Open Currency Selection Dialog</ui-button>
-
-        <ui-dialog ?open="${this.dialogOpen}" modal @close="${this.handleCloseDialog}">
-          <span slot="title">Select Currency</span>
-
-          <form @submit="${this.handleDialogFormSubmit}">
-            <div class="demo-controls">
-              <currency-picker
-                id="dialog-picker"
-                label="Choose Currency"
-                name="dialogCurrency"
-                required
-                multi
-                .selected="${this.dialogFormSelected}"
-                supportingText="Select currencies for your account"
-                @change="${this.handleDialogFormChange}"
-                @error="${this.handleError}"
-              ></currency-picker>
-            </div>
-
-            <div slot="button">
-              <ui-button type="button" color="text" value="dismiss">Cancel</ui-button>
-              <ui-button type="submit" color="text" value="confirm">Save Selection</ui-button>
-            </div>
-          </form>
-        </ui-dialog>
-
-        <div class="output-section">
-          <h4>Dialog Form Selection</h4>
-          <div class="output-content">${this.dialogFormSelected.join(', ') || 'None'}</div>
-        </div>
-      </section>
-
-      <section class="demo-section">
-        <h3>Complex Dialog Scenario</h3>
-        <p>Additional test with multiple layers to identify potential z-index or stacking context issues.</p>
-
-        <div
-          style="position: relative; z-index: 1; background: var(--md-sys-color-surface-variant); padding: 16px; border-radius: 8px;"
-        >
-          <h4>Container with relative positioning</h4>
-          <p>This container has position: relative and z-index: 1 to test stacking context issues.</p>
-
-          <ui-button @click="${this.handleOpenDialog}">Open Dialog from Positioned Container</ui-button>
-        </div>
-      </section>
-    `
-  }
-
-  private handleFormSubmit(event: Event): void {
-    event.preventDefault()
-    const formData = new FormData(event.target as HTMLFormElement)
-    console.log('Form submitted:', Object.fromEntries(formData.entries()))
-
-    if (this.formSelected.length === 0) {
-      alert('Please select a currency before submitting the form.')
-    } else {
-      alert(`Form submitted with currency: ${this.formSelected.join(', ')}`)
-    }
-  }
-}
-
-const instance = new CurrencyPickerDemoPage()
-instance.render()

package/demo/elements/environment/environment-editor.html

@@ -1,20 +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>Environment editor</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" />
-  <link href="../../page.css" rel="stylesheet" type="text/css" />
-</head>
-<body>
-  <div id="app"></div>
-
-  <script type="module" src="/.tmp/demo/elements/environment/environment-editor.js"></script>
-</body>
-</html>

package/demo/elements/environment/environment-editor.ts

@@ -1,49 +0,0 @@
-import { html, TemplateResult } from 'lit'
-import { IEnvironment, Environment } from '@api-client/core/models/Environment.js'
-import { DemoPage } from '../../../src/demo/DemoPage.js'
-import '../../../src/define/environment/environment-editor.js'
-import { reactive } from '../../../src/decorators/index.js'
-import EnvironmentEditor from '../../../src/elements/environment/EnvironmentEditor.js'
-
-const storeKey = 'api-client.demo.elements.environment.environment-editor'
-
-class ComponentDemoPage extends DemoPage {
-  override accessor componentName = 'Environment editor'
-
-  @reactive() accessor environment: IEnvironment = new Environment().toJSON()
-
-  constructor() {
-    super()
-    this.restoreValues()
-  }
-
-  restoreValues(): void {
-    const data = localStorage.getItem(storeKey)
-    if (!data) {
-      return
-    }
-    try {
-      this.environment = JSON.parse(data) as IEnvironment
-    } catch {
-      // ...
-    }
-  }
-
-  _changedHandler(): void {
-    const editor = document.querySelector('environment-editor') as EnvironmentEditor
-    localStorage.setItem(storeKey, JSON.stringify(editor.environment))
-    console.log('change')
-  }
-
-  contentTemplate(): TemplateResult {
-    return html`
-      <a href="./">Back</a>
-      <section class="demo-section">
-        <environment-editor .environment="${this.environment}" @change="${this._changedHandler}"></environment-editor>
-      </section>
-    `
-  }
-}
-
-const instance = new ComponentDemoPage()
-instance.render()

package/demo/elements/environment/index.html

@@ -1,33 +0,0 @@
-<!doctype html>
-<html lang="en-GB">
-<head>
-  <meta charset="utf-8">
-  <title>API Client UI</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" />
-  <link href="../../page.css" rel="stylesheet" type="text/css" />
-</head>
-<body>
-  <main>
-    <h1>The UI library for environments</h1>
-    <a href="../">Back</a>
-    <nav>
-      <h2>Elements</h2>
-      <dl>
-        <dt><a href="environment-editor.html">Environment editor</a></dt>
-        <dd>Editor for an Environment.</dd>
-
-        <dt><a href="server-editor.html">Server editor</a></dt>
-        <dd>Editor for a Server.</dd>
-
-        <dt><a href="variables-editor.html">Variables editor</a></dt>
-        <dd>Editor for a list of variables.</dd>
-      </dl>
-    </nav>
-  </main>
-</body>
-</html>

package/demo/elements/environment/server-editor.html

@@ -1,20 +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>Server editor</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" />
-  <link href="../../page.css" rel="stylesheet" type="text/css" />
-</head>
-<body>
-  <div id="app"></div>
-
-  <script type="module" src="/.tmp/demo/elements/environment/server-editor.js"></script>
-</body>
-</html>

package/demo/elements/environment/server-editor.ts

@@ -1,67 +0,0 @@
-import { html, TemplateResult } from 'lit'
-import { IServer } from '@api-client/core/models/Server.js'
-import { DemoPage } from '../../../src/demo/DemoPage.js'
-import { reactive } from '../../../src/decorators/index.js'
-import ServerEditor from '../../../src/elements/environment/ServerEditor.js'
-import '../../../src/define/environment/server-editor.js'
-
-const storeKey = 'api-client.demo.elements.environment.server-editor'
-
-class ComponentDemoPage extends DemoPage {
-  override accessor componentName = 'Server editor'
-
-  @reactive() accessor server: IServer | undefined
-
-  constructor() {
-    super()
-    this.restoreValues()
-  }
-
-  restoreValues(): void {
-    const data = localStorage.getItem(storeKey)
-    if (!data) {
-      return
-    }
-    try {
-      this.server = JSON.parse(data) as IServer
-    } catch {
-      // ...
-    }
-  }
-
-  storeValues(): void {
-    const { server } = this
-    if (!server) {
-      localStorage.removeItem(storeKey)
-    } else {
-      localStorage.setItem(storeKey, JSON.stringify(server))
-    }
-  }
-
-  _changedHandler(): void {
-    console.log('change')
-    const editor = document.querySelector('server-editor') as ServerEditor
-    this.server = editor.getSchema()
-    this.storeValues()
-  }
-
-  contentTemplate(): TemplateResult {
-    const { server } = this
-    const { uri, basePath, description, protocol } = server || {}
-    return html`
-      <a href="./">Back</a>
-      <section class="demo-section">
-        <server-editor
-          .uri="${uri}"
-          .basePath="${basePath}"
-          .description="${description}"
-          .protocol="${protocol}"
-          @change="${this._changedHandler}"
-        ></server-editor>
-      </section>
-    `
-  }
-}
-
-const instance = new ComponentDemoPage()
-instance.render()

package/demo/elements/environment/variables-editor.html

@@ -1,20 +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>Variables editor</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" />
-  <link href="../../page.css" rel="stylesheet" type="text/css" />
-</head>
-<body>
-  <div id="app"></div>
-
-  <script type="module" src="/.tmp/demo/elements/environment/variables-editor.js"></script>
-</body>
-</html>

package/demo/elements/environment/variables-editor.ts

@@ -1,94 +0,0 @@
-import { html, TemplateResult } from 'lit'
-import { IProperty, Property } from '@api-client/core/models/Property.js'
-import { DemoPage } from '../../../src/demo/DemoPage.js'
-import { reactive } from '../../../src/decorators/index.js'
-import env from '../../env.js'
-import VariablesEditor from '../../../src/elements/environment/VariablesEditor.js'
-
-import '../../../src/define/environment/variables-editor.js'
-import '../../../src/md/button/ui-button.js'
-
-const storeKey = 'api-client.demo.elements.environment.variables-editor'
-
-class ComponentDemoPage extends DemoPage {
-  override accessor componentName = 'Variables editor'
-
-  @reactive() accessor variables: IProperty[] | undefined
-
-  constructor() {
-    super()
-    this.restoreValues()
-  }
-
-  fromEnvironment(): void {
-    const result: IProperty[] = []
-    const vars = env.systemVariables as Record<string, string>
-    Object.keys(vars).forEach((key) => {
-      const value = vars[key]
-      const prop = Property.String(key, String(value))
-      result.push(prop.toJSON())
-    })
-    this.variables = result
-  }
-
-  restoreValues(): void {
-    const data = localStorage.getItem(storeKey)
-    if (!data) {
-      this.fromEnvironment()
-      return
-    }
-    try {
-      const list = JSON.parse(data) as IProperty[]
-      if (Array.isArray(list)) {
-        this.variables = list
-      } else {
-        this.fromEnvironment()
-      }
-    } catch {
-      this.fromEnvironment()
-    }
-  }
-
-  storeValues(): void {
-    const { variables } = this
-    if (!variables) {
-      localStorage.removeItem(storeKey)
-    } else {
-      localStorage.setItem(storeKey, JSON.stringify(variables))
-    }
-  }
-
-  loadSystem(): void {
-    this.fromEnvironment()
-    this.storeValues()
-  }
-
-  _changedHandler(): void {
-    console.log('change')
-    const editor = document.querySelector('variables-editor') as VariablesEditor
-    this.variables = editor.variables
-    this.storeValues()
-  }
-
-  contentTemplate(): TemplateResult {
-    return html`
-      <a href="./">Back</a>
-      ${this.renderDataControl()}
-      <section class="demo-section">
-        <variables-editor .variables="${this.variables}" @change="${this._changedHandler}"></variables-editor>
-      </section>
-    `
-  }
-
-  renderDataControl(): TemplateResult {
-    return html`
-      <section class="demo-section">
-        <h2 class="title-large">Data control</h2>
-        <ui-button color="outlined" @click="${this.loadSystem}">Load system variables</ui-button>
-      </section>
-    `
-  }
-}
-
-const instance = new ComponentDemoPage()
-instance.render()

package/demo/elements/har/har-viewer.html

@@ -1,20 +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>HAR viewer</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" />
-  <link href="../../page.css" rel="stylesheet" type="text/css" />
-</head>
-<body>
-  <div id="app"></div>
-
-  <script type="module" src="/.tmp/demo/elements/har/har-viewer.js"></script>
-</body>
-</html>