@api-client/ui 0.5.39 → 0.5.40

package/demo/md/dialog/confirm-dialog.ts

@@ -1,121 +0,0 @@
-import { html, TemplateResult } from 'lit'
-import { DemoPage } from '../../../src/demo/DemoPage.js'
-import { UiDialogClosingReason } from '../../../src/md/dialog/internals/Dialog.js'
-import { reactive } from '../../../src/decorators/index.js'
-import '../../../src/md/dialog/ui-confirm-dialog.js'
-import '../../../src/md/button/ui-button.js'
-
-class ConfirmDialogDemo extends DemoPage {
-  override accessor componentName = 'UI Confirm Dialog'
-
-  @reactive() accessor basicDialogOpen = false
-
-  @reactive() accessor deleteDialogOpen = false
-
-  @reactive() accessor customDialogOpen = false
-
-  @reactive() accessor lastResult = ''
-
-  protected openBasicDialog(): void {
-    this.basicDialogOpen = true
-  }
-
-  protected openDeleteDialog(): void {
-    this.deleteDialogOpen = true
-  }
-
-  protected openCustomDialog(): void {
-    this.customDialogOpen = true
-  }
-
-  protected handleBasicClose(e: CustomEvent<UiDialogClosingReason>): void {
-    this.basicDialogOpen = false
-    this.updateResult('Basic Dialog', e.detail)
-  }
-
-  protected handleDeleteClose(e: CustomEvent<UiDialogClosingReason>): void {
-    this.deleteDialogOpen = false
-    this.updateResult('Delete Dialog', e.detail)
-  }
-
-  protected handleCustomClose(e: CustomEvent<UiDialogClosingReason>): void {
-    this.customDialogOpen = false
-    this.updateResult('Custom Dialog', e.detail)
-  }
-
-  private updateResult(dialogType: string, detail: UiDialogClosingReason): void {
-    const action = detail.cancelled ? 'dismissed' : 'confirmed'
-    this.lastResult = `${dialogType} was ${action}`
-  }
-
-  contentTemplate(): TemplateResult {
-    return html`
-      <a href="../">Back</a>
-      <h1>Confirm Dialog Demo</h1>
-
-      <section class="demo-section">
-        <h2>Basic Confirm Dialog</h2>
-        <p>A simple confirmation dialog with default button labels.</p>
-        <div class="button-group">
-          <ui-button color="filled" @click="${this.openBasicDialog}">Open Basic Dialog</ui-button>
-        </div>
-
-        <ui-confirm-dialog .open="${this.basicDialogOpen}" @close="${this.handleBasicClose}">
-          <span slot="title">Confirm Action</span>
-          <p>Are you sure you want to proceed with this action?</p>
-        </ui-confirm-dialog>
-      </section>
-
-      <section class="demo-section">
-        <h2>Delete Confirmation Dialog</h2>
-        <p>A confirmation dialog with custom button labels for a destructive action.</p>
-        <div class="button-group">
-          <ui-button color="filled" @click="${this.openDeleteDialog}">Delete Item</ui-button>
-        </div>
-
-        <ui-confirm-dialog
-          confirmLabel="Delete"
-          dismissLabel="Keep"
-          destructive
-          .open="${this.deleteDialogOpen}"
-          @close="${this.handleDeleteClose}"
-        >
-          <span slot="title">Delete Item</span>
-          <p>Are you sure you want to delete this item? This action cannot be undone.</p>
-          <p><strong>This will permanently remove the item from your account.</strong></p>
-        </ui-confirm-dialog>
-      </section>
-
-      <section class="demo-section">
-        <h2>Custom Styled Dialog</h2>
-        <p>A confirmation dialog with custom button labels for a specific workflow.</p>
-        <div class="button-group">
-          <ui-button color="filled" @click="${this.openCustomDialog}">Save & Exit</ui-button>
-        </div>
-
-        <ui-confirm-dialog
-          confirmLabel="Save & Exit"
-          dismissLabel="Continue Editing"
-          .open="${this.customDialogOpen}"
-          @close="${this.handleCustomClose}"
-        >
-          <span slot="title">Save Changes</span>
-          <p>You have unsaved changes in your document.</p>
-          <p>Would you like to save your changes before exiting?</p>
-        </ui-confirm-dialog>
-      </section>
-
-      ${this.lastResult
-        ? html`
-            <section class="demo-section">
-              <h2>Last Action Result</h2>
-              <div class="result">${this.lastResult}</div>
-            </section>
-          `
-        : ''}
-    `
-  }
-}
-
-const instance = new ConfirmDialogDemo()
-instance.render()

package/demo/md/dialog/dialog.html

@@ -1,25 +0,0 @@
-<!doctype html>
-<html lang="en-GB">
-<head>
-  <meta charset="utf-8">
-  <title>UI dialog</title>
-  <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, minimum-scale=1.0">
-  <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" />
-  <style>
-    .demo-row {
-      margin: 20px 0;
-    }
-  </style>
-</head>
-<body>
-  <div id="app"></div>
-
-  <dialog id="myDialog">
-    <p>This dialog is not initially visible.</p>
-  </dialog>
-
-  <script type="module" src="/.tmp/demo/md/dialog/dialog.js"></script>
-</body>
-</html>

package/demo/md/dialog/dialog.ts

@@ -1,468 +0,0 @@
-import { html, TemplateResult } from 'lit'
-import { DemoPage } from '../../../src/demo/DemoPage.js'
-import '../../../src/md/button/ui-button.js'
-import '../../../src/md/icons/ui-icon.js'
-import '../../../src/md/dialog/ui-dialog.js'
-import '../../../src/md/divider/ui-divider.js'
-import '../../../src/md/list/ui-list.js'
-import '../../../src/md/list/ui-list-item.js'
-import { reactive } from '../../../src/decorators/index.js'
-import UiDialog, { type UiDialogClosingReason } from '../../../src/md/dialog/internals/Dialog.js'
-
-class ComponentDemoPage extends DemoPage {
-  override accessor componentName = 'UI dialog'
-
-  @reactive() accessor simpleOpened = false
-
-  @reactive() accessor fullOpened = false
-
-  @reactive() accessor overflowOpened = false
-
-  @reactive() accessor formOpened = false
-
-  @reactive() accessor destructiveOpened = false
-
-  @reactive() accessor nonModalOpened = false
-
-  protected openSimple(): void {
-    this.simpleOpened = true
-  }
-
-  protected basicClosed(e: CustomEvent<UiDialogClosingReason>): void {
-    this.simpleOpened = false
-    this.reportClosingReason(e.detail)
-  }
-
-  protected openFull(): void {
-    this.fullOpened = true
-  }
-
-  protected fullClosed(e: CustomEvent<UiDialogClosingReason>): void {
-    this.fullOpened = false
-    this.reportClosingReason(e.detail)
-  }
-
-  protected openOverflow(): void {
-    this.overflowOpened = true
-  }
-
-  protected overflowClosed(e: CustomEvent<UiDialogClosingReason>): void {
-    this.overflowOpened = false
-    this.reportClosingReason(e.detail)
-  }
-
-  protected openForm(): void {
-    this.formOpened = true
-  }
-
-  protected formClosed(e: CustomEvent<UiDialogClosingReason>): void {
-    this.formOpened = false
-    this.reportClosingReason(e.detail)
-  }
-
-  protected openDestructive(): void {
-    this.destructiveOpened = true
-  }
-
-  protected destructiveClosed(e: CustomEvent<UiDialogClosingReason>): void {
-    this.destructiveOpened = false
-    this.reportClosingReason(e.detail)
-  }
-
-  protected openNonModal(): void {
-    this.nonModalOpened = true
-  }
-
-  protected nonModalClosed(e: CustomEvent<UiDialogClosingReason>): void {
-    this.nonModalOpened = false
-    this.reportClosingReason(e.detail)
-  }
-
-  imperativeDialog: UiDialog | null = null
-
-  protected openImperative(): void {
-    if (this.imperativeDialog) {
-      document.body.removeChild(this.imperativeDialog)
-      this.imperativeDialog = null
-    }
-    const dialog = document.createElement('ui-dialog')
-    dialog.textContent = 'This is a dialog content.'
-    dialog.dismissLabel = 'Close'
-    dialog.confirmLabel = 'OK'
-    dialog.open = true
-    document.body.appendChild(dialog)
-    this.imperativeDialog = dialog
-    dialog.addEventListener('close', (e: Event): void => {
-      document.body.removeChild(dialog)
-      this.imperativeDialog = null
-      const event = e as CustomEvent<UiDialogClosingReason>
-      this.reportClosingReason(event.detail)
-    })
-  }
-
-  protected reportClosingReason(reason: UiDialogClosingReason): void {
-    if (reason.cancelled) {
-      console.log('The dialog was dismissed')
-    } else {
-      console.log('The dialog was confirmed')
-    }
-  }
-
-  protected handleInertButton(): void {
-    console.log('An inert button was clicked.')
-  }
-
-  contentTemplate(): TemplateResult {
-    return html`
-      <a href="../">Back</a>
-      ${this.simpleDialog()} ${this.fullDialog()} ${this.overflowDialog()} ${this.formDialog()}
-      ${this.destructiveDialog()} ${this.nonModalDialog()} ${this.renderImperativeDialog()}
-    `
-  }
-
-  simpleDialog(): TemplateResult {
-    return html`
-      <section class="demo-section">
-        <h2 class="title-large">Simple dialog</h2>
-        <ui-button color="filled" @click="${this.openSimple}">Open</ui-button>
-        <ui-dialog ?open="${this.simpleOpened}" @close="${this.basicClosed}">
-          <p>This is a confirmation dialog content</p>
-          <ui-button color="text" slot="button" value="dismiss">Dismiss</ui-button>
-        </ui-dialog>
-      </section>
-    `
-  }
-
-  fullDialog(): TemplateResult {
-    return html`
-      <section class="demo-section">
-        <h2 class="title-large">Full UI dialog</h2>
-        <ui-button color="filled" @click="${this.openFull}">Open</ui-button>
-        <ui-dialog ?open="${this.fullOpened}" @close="${this.fullClosed}" modal style="--ui-dialog-max-width: 380px">
-          <ui-icon slot="icon" icon="deleteOutline"></ui-icon>
-          <span slot="title">Reset settings?</span>
-          <p>
-            This will reset your app preferences back to their default settings. The following accounts will also be
-            signed out:
-          </p>
-          <ui-divider></ui-divider>
-          <ui-list>
-            <ui-list-item>email1@gmail.com</ui-list-item>
-            <ui-list-item>email2@gmail.com</ui-list-item>
-          </ui-list>
-          <ui-divider></ui-divider>
-          <ui-button color="text" slot="button" @click="${this.handleInertButton}">Learn more</ui-button>
-          <ui-button color="text" slot="button" value="dismiss">Cancel</ui-button>
-          <ui-button color="text" slot="button" value="confirm">Accept</ui-button>
-        </ui-dialog>
-      </section>
-    `
-  }
-
-  overflowDialog(): TemplateResult {
-    return html`
-      <section class="demo-section">
-        <h2 class="title-large">Overflow dialog</h2>
-        <p>This dialog contains a lot of content that will overflow the container.</p>
-        <ui-button color="filled" @click="${this.openOverflow}">Open</ui-button>
-        <ui-dialog
-          ?open="${this.overflowOpened}"
-          @close="${this.overflowClosed}"
-          modal
-          style="--ui-dialog-max-width: 400px; --ui-dialog-max-height: 500px;"
-        >
-          <ui-icon slot="icon" icon="info"></ui-icon>
-          <span slot="title">Terms and Conditions</span>
-          <div style="overflow-y: auto; max-height: 300px;">
-            <h3>1. Introduction</h3>
-            <p>
-              Welcome to our application. These terms and conditions outline the rules and regulations for the use of
-              our software.
-            </p>
-
-            <h3>2. User Agreement</h3>
-            <p>
-              By accessing this application, we assume you accept these terms and conditions. Do not continue to use our
-              application if you do not agree to take all of the terms and conditions stated on this page.
-            </p>
-
-            <h3>3. Privacy Policy</h3>
-            <p>
-              Your privacy is important to us. Our Privacy Policy explains how we collect, use, and protect your
-              information when you use our service. By using our service, you agree to the collection and use of
-              information in accordance with our Privacy Policy.
-            </p>
-
-            <h3>4. Data Collection</h3>
-            <p>
-              We collect several different types of information for various purposes to provide and improve our service
-              to you. This includes:
-            </p>
-            <ul>
-              <li>
-                Personal Data: While using our service, we may ask you to provide us with certain personally
-                identifiable information.
-              </li>
-              <li>Usage Data: We may also collect information on how the service is accessed and used.</li>
-              <li>Tracking & Cookies Data: We use cookies and similar tracking technologies to track activity.</li>
-            </ul>
-
-            <h3>5. User Responsibilities</h3>
-            <p>
-              Users are responsible for maintaining the confidentiality of their account information and for all
-              activities that occur under their account. You agree to:
-            </p>
-            <ul>
-              <li>Provide accurate and complete information</li>
-              <li>Maintain the security of your password</li>
-              <li>Notify us immediately of any unauthorized use</li>
-              <li>Use the service in compliance with applicable laws</li>
-            </ul>
-
-            <h3>6. Prohibited Uses</h3>
-            <p>You may not use our service:</p>
-            <ul>
-              <li>For any unlawful purpose or to solicit others to perform acts</li>
-              <li>
-                To violate any international, federal, provincial, or state regulations, rules, laws, or local
-                ordinances
-              </li>
-              <li>
-                To infringe upon or violate our intellectual property rights or the intellectual property rights of
-                others
-              </li>
-              <li>To harass, abuse, insult, harm, defame, slander, disparage, intimidate, or discriminate</li>
-              <li>To submit false or misleading information</li>
-            </ul>
-
-            <h3>7. Intellectual Property</h3>
-            <p>
-              The service and its original content, features, and functionality are and will remain the exclusive
-              property of our company and its licensors. The service is protected by copyright, trademark, and other
-              laws.
-            </p>
-
-            <h3>8. Termination</h3>
-            <p>
-              We may terminate or suspend your account and bar access to the service immediately, without prior notice
-              or liability, under our sole discretion, for any reason whatsoever and without limitation.
-            </p>
-
-            <h3>9. Disclaimer</h3>
-            <p>
-              The information on this application is provided on an "as is" basis. To the fullest extent permitted by
-              law, this company excludes all representations, warranties, conditions and terms.
-            </p>
-
-            <h3>10. Limitation of Liability</h3>
-            <p>
-              In no event shall our company, nor its directors, employees, partners, agents, suppliers, or affiliates,
-              be liable for any indirect, incidental, special, consequential, or punitive damages.
-            </p>
-
-            <h3>11. Changes to Terms</h3>
-            <p>
-              We reserve the right, at our sole discretion, to modify or replace these terms at any time. If a revision
-              is material, we will provide at least 30 days notice prior to any new terms taking effect.
-            </p>
-
-            <h3>12. Contact Information</h3>
-            <p>
-              If you have any questions about these Terms and Conditions, please contact us at support@example.com or
-              through our contact form.
-            </p>
-          </div>
-          <ui-button color="text" slot="button" value="dismiss">Decline</ui-button>
-          <ui-button color="filled" slot="button" value="confirm">Accept</ui-button>
-        </ui-dialog>
-      </section>
-    `
-  }
-
-  formDialog(): TemplateResult {
-    return html`
-      <section class="demo-section">
-        <h2 class="title-large">Form dialog</h2>
-        <p>This dialog contains a form with validation and submit handling.</p>
-        <ui-button color="filled" @click="${this.openForm}">Open Form Dialog</ui-button>
-        <form @submit="${this.handleFormSubmit}" style="display: contents;">
-          <ui-dialog
-            ?open="${this.formOpened}"
-            @close="${this.formClosed}"
-            modal
-            style="--ui-dialog-max-width: 500px;"
-            submitClose
-          >
-            <ui-icon slot="icon" icon="info"></ui-icon>
-            <span slot="title">User Registration</span>
-
-            <div style="display: flex; flex-direction: column; gap: 16px;">
-              <label style="display: flex; flex-direction: column; gap: 4px;">
-                <span style="font-weight: 500; color: var(--md-sys-color-on-surface);">Full Name *</span>
-                <input
-                  type="text"
-                  name="fullName"
-                  required
-                  style="padding: 12px; border: 1px solid var(--md-sys-color-outline); border-radius: 4px; font-size: 14px;"
-                  placeholder="Enter your full name"
-                />
-              </label>
-
-              <label style="display: flex; flex-direction: column; gap: 4px;">
-                <span style="font-weight: 500; color: var(--md-sys-color-on-surface);">Email *</span>
-                <input
-                  type="email"
-                  name="email"
-                  required
-                  style="padding: 12px; border: 1px solid var(--md-sys-color-outline); border-radius: 4px; font-size: 14px;"
-                  placeholder="Enter your email address"
-                />
-              </label>
-
-              <label style="display: flex; flex-direction: column; gap: 4px;">
-                <span style="font-weight: 500; color: var(--md-sys-color-on-surface);">Phone Number</span>
-                <input
-                  type="tel"
-                  name="phone"
-                  style="padding: 12px; border: 1px solid var(--md-sys-color-outline); border-radius: 4px; font-size: 14px;"
-                  placeholder="Enter your phone number (optional)"
-                />
-              </label>
-
-              <label style="display: flex; flex-direction: column; gap: 4px;">
-                <span style="font-weight: 500; color: var(--md-sys-color-on-surface);">Department</span>
-                <select
-                  name="department"
-                  style="padding: 12px; border: 1px solid var(--md-sys-color-outline); border-radius: 4px; font-size: 14px; background: white;"
-                >
-                  <option value="">Select a department</option>
-                  <option value="engineering">Engineering</option>
-                  <option value="design">Design</option>
-                  <option value="marketing">Marketing</option>
-                  <option value="sales">Sales</option>
-                  <option value="support">Support</option>
-                </select>
-              </label>
-
-              <label style="display: flex; align-items: center; gap: 8px; margin-top: 8px;">
-                <input type="checkbox" name="newsletter" style="margin: 0;" />
-                <span style="font-size: 14px; color: var(--md-sys-color-on-surface);">
-                  Subscribe to our newsletter
-                </span>
-              </label>
-
-              <label style="display: flex; align-items: center; gap: 8px;">
-                <input type="checkbox" name="terms" required style="margin: 0;" />
-                <span style="font-size: 14px; color: var(--md-sys-color-on-surface);">
-                  I agree to the <a href="#" style="color: var(--md-sys-color-primary);">Terms and Conditions</a> *
-                </span>
-              </label>
-            </div>
-
-            <ui-button color="text" slot="button" value="dismiss">Cancel</ui-button>
-            <ui-button color="filled" slot="button" value="confirm" type="submit">Register</ui-button>
-          </ui-dialog>
-        </form>
-      </section>
-    `
-  }
-
-  protected handleFormSubmit(e: CustomEvent): void {
-    e.preventDefault()
-
-    // Get form data from the event
-    const form = e.target as HTMLFormElement
-    const formData = new FormData(form)
-
-    // Convert to regular object for easier handling
-    const data: Record<string, string | boolean> = {}
-    for (const [key, value] of formData.entries()) {
-      if (key === 'newsletter' || key === 'terms') {
-        data[key] = value === 'on'
-      } else {
-        data[key] = value as string
-      }
-    }
-
-    console.log('Form submitted with data:', data)
-
-    // Simulate form validation
-    if (!data.fullName || !data.email) {
-      console.error('Required fields are missing')
-      return
-    }
-
-    if (!data.terms) {
-      console.error('Terms and conditions must be accepted')
-      return
-    }
-
-    // If validation passes, the dialog will close automatically
-    console.log('Registration successful!', data)
-  }
-
-  renderImperativeDialog(): TemplateResult {
-    return html`
-      <section class="demo-section">
-        <h2 class="title-large">Imperative dialog</h2>
-        <p>This dialog is created using imperative API.</p>
-        <ui-button color="filled" @click="${this.openImperative}">Open</ui-button>
-      </section>
-    `
-  }
-
-  destructiveDialog(): TemplateResult {
-    return html`
-      <section class="demo-section">
-        <h2 class="title-large">Destructive dialog</h2>
-        <p>This dialog demonstrates the destructive attribute for dangerous actions.</p>
-        <ui-button color="filled" @click="${this.openDestructive}">Open destructive dialog</ui-button>
-        <ui-dialog
-          ?open="${this.destructiveOpened}"
-          @close="${this.destructiveClosed}"
-          modal
-          confirmLabel="Delete"
-          dismissLabel="Cancel"
-          destructive
-        >
-          <ui-icon slot="icon" icon="warning"></ui-icon>
-          <span slot="title">Delete Account</span>
-          <p>
-            Are you sure you want to permanently delete your account? This action cannot be undone and all your data
-            will be lost.
-          </p>
-        </ui-dialog>
-      </section>
-    `
-  }
-
-  nonModalDialog(): TemplateResult {
-    return html`
-      <section class="demo-section">
-        <h2 class="title-large">Non-modal dialog</h2>
-        <p>This dialog demonstrates a non-modal dialog that is centered in the viewport.</p>
-        <ui-button color="filled" @click="${this.openNonModal}">Open non-modal dialog</ui-button>
-        <ui-dialog
-          ?open="${this.nonModalOpened}"
-          @close="${this.nonModalClosed}"
-          confirmLabel="Got it"
-          dismissLabel="Close"
-        >
-          <ui-icon slot="icon" icon="info"></ui-icon>
-          <span slot="title">Non-Modal Information</span>
-          <p>
-            This is a non-modal dialog. Unlike modal dialogs, you can still interact with the content behind this
-            dialog. The dialog is automatically centered in the viewport and maintains the smooth opening animation.
-          </p>
-          <p>
-            Non-modal dialogs are useful for displaying information that doesn't require the user's full attention or
-            when you want to allow interaction with the background content.
-          </p>
-        </ui-dialog>
-      </section>
-    `
-  }
-}
-
-const instance = new ComponentDemoPage()
-instance.render()

package/demo/md/dropdown-list/index.html

@@ -1,31 +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>UI list</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" />
-  <style>
-    .demo-row {
-      margin: 20px 0;
-    }
-
-    .button-in-lists {
-      display: inline-block;
-      vertical-align: top;
-      width: 48px;
-      height: 48px;
-      overflow: hidden;
-
-      margin-right: 40px;;
-    }
-  </style>
-</head>
-<body>
-  <div id="app"></div>
-
-  <script type="module" src="/.tmp/demo/md/dropdown-list/index.js"></script>
-</body>
-</html>