@api-client/ui 0.5.6 → 0.5.8

package/demo/elements/currency/index.ts

@@ -0,0 +1,272 @@
+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'
+
+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'
+
+  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)}`
+  }
+
+  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>
+    `
+  }
+
+  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/index.html

@@ -27,6 +27,9 @@
 
         <dt><a href="context-menu/index.html">Context menu</a></dt>
         <dd>An element that render a context menu.</dd>
+
+        <dt><a href="currency/index.html">Currency picker</a></dt>
+        <dd>A component for selecting currencies with chips display.</dd>
         
         <dt><a href="environment/index.html">Environment</a></dt>
         <dd>The environment elements library.</dd>
@@ -43,6 +46,9 @@
         <dt><a href="http-client/index.html">HTTP Client</a></dt>
         <dd>The HTTP Client UI library.</dd>
 
+        <dt><a href="mention-textarea/index.html">Mention Textarea</a></dt>
+        <dd>The mention-textarea component.</dd>
+
         <dt><a href="icons/index.html">Icons</a></dt>
         <dd>The icons library.</dd>
 

package/demo/elements/mention-textarea/index.html

@@ -0,0 +1,19 @@
+<!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>Mention Textarea</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" />
+  <script type="module" src="/.tmp/demo/elements/mention-textarea/index.js"></script>
+</head>
+<body>
+  <div id="app"></div>
+</body>
+</html>

package/demo/elements/mention-textarea/index.ts

@@ -0,0 +1,205 @@
+import { html, TemplateResult } from 'lit'
+import reactive from '../../../src/decorators/reactive.js'
+import { DemoPage } from '../../../src/demo/DemoPage.js'
+import type {
+  MentionTextAreaElement,
+  MentionSuggestion,
+  MentionInsertEvent,
+  MentionRemoveEvent,
+} from '../../../src/elements/mention-textarea/ui-mention-textarea.js'
+import '../../../src/elements/mention-textarea/ui-mention-textarea.js'
+
+class ComponentDemoPage extends DemoPage {
+  override accessor componentName = 'Mention Textarea'
+
+  @reactive() accessor value = 'Hello @{john-doe}, please review the document with @{jane-smith}.'
+
+  @reactive() accessor suggestions: MentionSuggestion[] = [
+    {
+      id: 'john-doe',
+      label: 'John Doe',
+      description: 'Senior Developer',
+      suffix: 'Engineering',
+    },
+    {
+      id: 'jane-smith',
+      label: 'Jane Smith',
+      description: 'Product Manager',
+      suffix: 'Product',
+    },
+    {
+      id: 'bob-wilson',
+      label: 'Bob Wilson',
+      description: 'UI/UX Designer',
+      suffix: 'Design',
+    },
+    {
+      id: 'alice-johnson',
+      label: 'Alice Johnson',
+      description: 'Quality Assurance Engineer',
+      suffix: 'QA',
+    },
+    {
+      id: 'mike-brown',
+      label: 'Mike Brown',
+      description: 'DevOps Engineer',
+      suffix: 'Infrastructure',
+    },
+    {
+      id: 'sarah-davis',
+      label: 'Sarah Davis',
+      description: 'Technical Writer',
+      suffix: 'Documentation',
+    },
+  ]
+
+  handleMentionInsert(event: CustomEvent<MentionInsertEvent>): void {
+    console.log('Mention inserted:', event.detail)
+  }
+
+  handleMentionRemove(event: CustomEvent<MentionRemoveEvent>): void {
+    console.log('Mention removed:', event.detail)
+  }
+
+  handleInput(event: Event): void {
+    const target = event.target as MentionTextAreaElement
+    this.value = target.value
+    console.log('Value changed:', this.value)
+  }
+
+  contentTemplate(): TemplateResult {
+    return html`
+      <a href="../">Back</a>
+
+      <section class="demo-section">
+        <h2 class="display-large">Basic Usage</h2>
+        <p>
+          Type @ to trigger mentions. The component supports rich suggestions with headline, description, and suffix.
+        </p>
+
+        <mention-textarea
+          label="Message"
+          supporting-text="Type @ to mention someone"
+          .value="${this.value}"
+          .suggestions="${this.suggestions}"
+          @mention-insert="${this.handleMentionInsert}"
+          @mention-remove="${this.handleMentionRemove}"
+          @input="${this.handleInput}"
+        ></mention-textarea>
+
+        <h3 class="title-large">Current Value:</h3>
+        <pre
+          style="background: var(--md-sys-color-surface-variant); padding: 16px; border-radius: 8px; overflow-x: auto;"
+        >
+${this.value}
+        </pre
+        >
+      </section>
+
+      <section class="demo-section">
+        <h2 class="display-large">Different States</h2>
+
+        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px;">
+          <mention-textarea label="Default" .suggestions="${this.suggestions}"></mention-textarea>
+
+          <mention-textarea
+            label="With placeholder"
+            placeholder="Start typing..."
+            .suggestions="${this.suggestions}"
+          ></mention-textarea>
+        </div>
+
+        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px;">
+          <mention-textarea label="Required" required .suggestions="${this.suggestions}"></mention-textarea>
+
+          <mention-textarea
+            label="Invalid"
+            invalid
+            supporting-text="This field has an error"
+            .suggestions="${this.suggestions}"
+          ></mention-textarea>
+        </div>
+
+        <mention-textarea
+          label="Disabled"
+          disabled
+          value="This is disabled"
+          .suggestions="${this.suggestions}"
+        ></mention-textarea>
+      </section>
+
+      <section class="demo-section">
+        <h2 class="display-large">Custom Trigger</h2>
+        <p>This example uses '#' as the mention trigger instead of '@'.</p>
+
+        <mention-textarea
+          label="Tags"
+          supporting-text="Type # to add tags"
+          mention-trigger="#"
+          .suggestions="${this.suggestions.map((s) => ({ ...s, label: s.label.toLowerCase().replace(' ', '-') }))}"
+        ></mention-textarea>
+      </section>
+
+      <section class="demo-section">
+        <h2 class="display-large">Minimum Query Length</h2>
+        <p>This example requires at least 2 characters after @ before showing suggestions.</p>
+
+        <mention-textarea
+          label="Message with min query"
+          supporting-text="Type @+ at least 2 characters"
+          min-query-length="2"
+          .suggestions="${this.suggestions}"
+        ></mention-textarea>
+      </section>
+
+      <section class="demo-section">
+        <h2 class="display-large">Overflow: Hidden Test</h2>
+        <p>
+          This test ensures the popover works correctly even inside containers with overflow: hidden. The Popover API
+          should handle this properly.
+        </p>
+
+        <div
+          style="height: 150px; overflow: hidden; border: 2px solid var(--md-sys-color-outline); border-radius: 8px; padding: 16px;"
+        >
+          <p>Container with overflow: hidden (height: 150px)</p>
+          <mention-textarea
+            label="Test @mentions here"
+            supporting-text="Type @ - the suggestions should appear outside this container"
+            .suggestions="${this.suggestions}"
+          ></mention-textarea>
+        </div>
+
+        <div
+          style="height: 100px; width: 300px; overflow: hidden; border: 2px solid var(--md-sys-color-outline); border-radius: 8px; padding: 16px; margin-top: 20px;"
+        >
+          <p>Small container with overflow: hidden</p>
+          <mention-textarea label="Constrained" .suggestions="${this.suggestions}"></mention-textarea>
+        </div>
+      </section>
+
+      <style>
+        .demo-section {
+          max-width: 900px;
+          margin: 40px auto;
+          padding: 0 20px;
+        }
+
+        mention-textarea {
+          width: 100%;
+          margin-bottom: 20px;
+        }
+
+        pre {
+          font-family: 'Courier New', monospace;
+          font-size: 14px;
+          white-space: pre-wrap;
+          word-break: break-all;
+        }
+      </style>
+    `
+  }
+}
+
+const instance = new ComponentDemoPage()
+instance.render()