@api-client/ui 0.5.39 → 0.5.40

package/demo/elements/context-menu/separators.ts

@@ -1,172 +0,0 @@
-import { html, TemplateResult } from 'lit'
-import { DemoPage } from '../../../src/demo/DemoPage.js'
-import { ContextualMenu } from '../../../src/elements/contextual-menu/internals/ContextualMenu.js'
-import { ContextMenuCommand, CommandExecuteOptions } from '../../../src/elements/contextual-menu/internals/types.js'
-import { formatSize, copy, paste, title, fontDownload } from './DemoIcons.js'
-
-class ComponentPage extends DemoPage {
-  override accessor componentName = 'Using separators'
-
-  override firstRender(): void {
-    super.firstRender()
-    this.initContextMenu()
-  }
-
-  initContextMenu(): void {
-    const container = document.body.querySelector('#workspace') as HTMLElement
-    const instance = new ContextualMenu(container)
-    const commands: ContextMenuCommand[] = [
-      {
-        target: 'root',
-        label: 'Font size',
-        icon: formatSize,
-        execute: (args: CommandExecuteOptions): void => {
-          console.log('Selected option:', args.item.id)
-        },
-        children: [
-          {
-            label: '0.75 rem',
-            id: '0.75rem',
-          },
-          {
-            label: '1 rem',
-            id: '1rem',
-          },
-          {
-            label: '1.25 rem',
-            id: '1.25rem',
-          },
-          {
-            label: '1.5 rem',
-            id: '1.5rem',
-          },
-          {
-            label: '2 rem',
-            id: '2rem',
-          },
-        ],
-      },
-      {
-        target: 'root',
-        label: 'Font family',
-        icon: title,
-        execute: (args: CommandExecuteOptions): void => {
-          console.log('Selected font:', args.item.id)
-        },
-        children: [
-          {
-            label: 'Arial',
-            id: 'Arial',
-          },
-          {
-            label: 'Calibri',
-            id: 'Calibri',
-          },
-          {
-            label: 'Consolas',
-            id: 'Consolas',
-          },
-          {
-            label: 'Courier New',
-            id: 'Courier New',
-          },
-          {
-            label: 'Open Sans',
-            id: 'Open Sans',
-          },
-          {
-            label: 'Roboto',
-            id: 'Roboto',
-          },
-          {
-            label: 'Times New Roman',
-            id: 'Times New Roman',
-          },
-          {
-            type: 'separator',
-          },
-          {
-            label: 'Custom font',
-            id: 'custom-font',
-            icon: fontDownload,
-          },
-        ],
-      },
-      {
-        type: 'separator',
-        target: 'root',
-      },
-      {
-        target: 'root',
-        label: 'Paste',
-        title: 'Paste the value',
-        icon: paste,
-        execute: (args: CommandExecuteOptions): void => {
-          console.log(args)
-        },
-      },
-      {
-        target: 'root',
-        label: 'Copy',
-        title: 'Copies the object',
-        icon: copy,
-        execute: (args: CommandExecuteOptions): void => {
-          console.log(args)
-        },
-      },
-      {
-        type: 'separator',
-        target: 'root',
-      },
-      {
-        target: 'root',
-        label: 'Add',
-        children: [
-          {
-            label: 'Event',
-            children: [
-              {
-                type: 'label',
-                label: 'Notification',
-              },
-              {
-                label: 'Resource updated',
-                id: 'event-updated',
-              },
-              {
-                label: 'Resource deleted',
-                id: 'event-deleted',
-              },
-              {
-                type: 'label',
-                label: 'Mutation',
-              },
-              {
-                label: 'Create resource',
-                id: 'event-create',
-              },
-            ],
-          },
-        ],
-        execute: (args: CommandExecuteOptions): void => {
-          console.log(args)
-        },
-      },
-    ]
-    instance.registerCommands(commands)
-    instance.connect()
-  }
-
-  contentTemplate(): TemplateResult {
-    return html`
-      <a href="./">Back</a>
-      <section class="demo-section">
-        <h2 class="title-large">Contextual menu with separators</h2>
-        <div id="workspace"></div>
-      </section>
-    `
-  }
-}
-
-const instance = new ComponentPage()
-instance.render()

package/demo/elements/currency/index.html

@@ -1,91 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
-  <title>Currency Picker</title>
-  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <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="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" 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" />
-  <style>
-    .demo-section {
-      margin: 2rem 0;
-      padding: 1.5rem;
-      border: 1px solid var(--md-sys-color-outline-variant);
-      border-radius: 12px;
-      background: var(--md-sys-color-surface-container-lowest);
-    }
-
-    .demo-section h3 {
-      margin-top: 0;
-      color: var(--md-sys-color-on-surface);
-      font-weight: 500;
-    }
-
-    .demo-section p {
-      margin-bottom: 1rem;
-      color: var(--md-sys-color-on-surface-variant);
-    }
-
-    .output-section {
-      margin-top: 1rem;
-      padding: 1rem;
-      background: var(--md-sys-color-surface-container);
-      border-radius: 8px;
-      border-left: 4px solid var(--md-sys-color-primary);
-    }
-
-    .output-section h4 {
-      margin: 0 0 0.5rem 0;
-      font-size: 0.875rem;
-      font-weight: 500;
-      color: var(--md-sys-color-primary);
-      text-transform: uppercase;
-      letter-spacing: 0.1em;
-    }
-
-    .output-content {
-      font-family: 'Roboto Mono', monospace;
-      font-size: 0.875rem;
-      color: var(--md-sys-color-on-surface);
-      white-space: pre-wrap;
-      word-wrap: break-word;
-    }
-
-    .demo-controls {
-      display: flex;
-      flex-wrap: wrap;
-      gap: 1rem;
-      margin-bottom: 1rem;
-    }
-
-    .demo-controls currency-picker {
-      min-width: 200px;
-    }
-
-    @media (max-width: 768px) {
-      .demo-controls {
-        flex-direction: column;
-      }
-
-      .demo-controls currency-picker {
-        min-width: unset;
-      }
-    }
-  </style>
-</head>
-
-<body>
-  <div id="app"></div>
-  <script type="module" src="/.tmp/demo/elements/currency/index.js"></script>
-</body>
-
-</html>

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