@api-client/ui 0.5.57 → 0.6.0

package/src/modeling/dialogs/TaxonomyDialog.ts

@@ -0,0 +1,183 @@
+import { render, type TemplateResult } from 'lit'
+import { bound } from '../../decorators/bound.js'
+import type { UiCheckboxElement } from '../../md/checkbox/ui-checkbox.js'
+import type { DomainProperty } from '@api-client/core/modeling/DomainProperty.js'
+import type { DomainEntity } from '@api-client/core/modeling/DomainEntity.js'
+import deepClone from '@api-client/json/core/Clone.js'
+import deepEqual from '@api-client/json/core/Equal.js'
+import formStyles from '../internals/styles/form_styles.js'
+import commonStyles from './common.js'
+import { adoptStyles } from '../../lib/Dom.js'
+import { DialogBuilder } from '../../builders/DialogBuilder.js'
+
+import '../../md/checkbox/ui-checkbox.js'
+import '../../md/text-field/ui-outlined-text-field.js'
+import '../../md/select/ui-select.js'
+import '../../md/select/ui-option.js'
+
+export abstract class TaxonomyDialog<T extends object = Record<string, unknown>> extends DialogBuilder {
+  /**
+   * A reference to the form element
+   */
+  declare renderRoot?: HTMLFormElement
+
+  static override title = 'Configure Taxonomy'
+
+  /**
+   * The configuration object for the taxonomy.
+   * This object is used to store the state of the form.
+   */
+  config: T
+
+  /**
+   * The original configuration object used to track changes.
+   * This is a deep clone of the config passed to the constructor.
+   */
+  private originalConfig: T
+
+  constructor(config: T) {
+    super()
+    this.config = config
+    this.modal = true
+    this.originalConfig = deepClone(config)
+    this.renderRoot = this.createForm()
+    this.body = document.createElement('div')
+    this.body.classList.add('form-inputs')
+    this.classes = ['taxonomy-dialog', 'message', this.constructor.name.toLocaleLowerCase()]
+    this.positiveAction = {
+      label: 'Save',
+      value: 'confirm',
+      type: 'submit',
+    }
+    this.negativeAction = {
+      label: 'Cancel',
+      value: 'dismiss',
+    }
+    this.title = (this.constructor as typeof TaxonomyDialog).title || 'Configure Taxonomy'
+
+    // Set up unsaved changes detection
+    this.setUnsavedChangesDetection({
+      hasUnsavedChanges: () => this.hasUnsavedChanges(),
+      warningTitle: 'Unsaved Changes',
+      warningMessage:
+        'You have unsaved changes that will be lost if you continue. Are you sure you want to discard your changes?',
+      discardLabel: 'Discard Changes',
+      keepEditingLabel: 'Keep Editing',
+    })
+  }
+
+  /**
+   * Checks if there are unsaved changes by comparing the current config
+   * with the original config.
+   */
+  protected hasUnsavedChanges(): boolean {
+    return !deepEqual(this.config, this.originalConfig)
+  }
+
+  protected createForm(): HTMLFormElement {
+    const form = document.createElement('form')
+    form.classList.add('taxonomy-form')
+    form.addEventListener('submit', this.formCallback)
+    form.addEventListener('reset', this.handleDialogClosed)
+    return form
+  }
+
+  @bound
+  protected async formCallback(event: Event): Promise<void> {
+    event.preventDefault()
+    this.dispose()
+  }
+
+  /**
+   * Removes the dialog from the DOM and removes all listeners.
+   * The dialog does not call any lifecycle methods.
+   */
+  override dispose(): void {
+    super.dispose()
+    this.renderRoot?.removeEventListener('submit', this.formCallback)
+    this.renderRoot?.removeEventListener('reset', this.handleDialogClosed)
+    this.renderRoot?.remove()
+    this.renderRoot = undefined
+  }
+
+  async run(): Promise<void> {
+    if (!this.renderRoot) {
+      throw new Error('The form was disposed and cannot be run again.')
+    }
+    adoptStyles(formStyles, commonStyles)
+    document.body.appendChild(this.renderRoot)
+    this.open()
+    this.requestUpdate()
+  }
+
+  requestUpdate(): void {
+    if (this.body) {
+      render(this.render(), this.body, {
+        host: this,
+      })
+    }
+  }
+
+  /**
+   * A handler for any of the checkboxes in the form.
+   * Updates the `config`
+   */
+  @bound
+  protected handleBooleanChange(e: Event): void {
+    const checkbox = e.target as UiCheckboxElement
+    const { name = '', checked } = checkbox
+    const cnf = this.config as Record<string, boolean>
+    cnf[name] = !!checked
+    this.requestUpdate()
+  }
+
+  @bound
+  protected handleTextChange(e: Event): void {
+    const input = e.target as HTMLInputElement
+    const { name, value, type } = input
+    const cnf = this.config as Record<string, string | number>
+    if (type === 'number') {
+      cnf[name] = Number(value)
+    } else {
+      cnf[name] = value
+    }
+    this.requestUpdate()
+  }
+
+  @bound
+  protected handleSelectChange(e: Event): void {
+    const select = e.target as HTMLSelectElement
+    const { name, value } = select
+    if (!name || !value) {
+      return
+    }
+    const cnf = this.config as Record<string, string>
+    cnf[name] = value
+    this.requestUpdate()
+  }
+
+  listComputedProperties(entity: DomainEntity, opts: { exclude?: string[]; types?: string[] } = {}): DomainProperty[] {
+    const result: DomainProperty[] = []
+    const { exclude = [], types = [] } = opts
+    for (const prop of entity.properties) {
+      if (exclude.includes(prop.key)) {
+        // Skip the current property itself and excluded properties
+        continue
+      }
+      // Only include properties that match the specified types
+      if (!types.length || types.includes(prop.type)) {
+        result.push(prop)
+      }
+    }
+    for (const parent of entity.parents) {
+      for (const prop of parent.properties) {
+        if (!types.length || types.includes(prop.type)) {
+          result.push(prop)
+        }
+      }
+    }
+    return result
+  }
+
+  abstract render(): TemplateResult
+}

package/src/modeling/dialogs/UrlTaxonomy.ts

@@ -0,0 +1,194 @@
+import { type URLConfig, DEFAULT_URL_CONFIG } from '@api-client/core/modeling/definitions/URL.js'
+import { TaxonomyDialog } from './TaxonomyDialog.js'
+import type { DomainProperty } from '@api-client/core/modeling/DomainProperty.js'
+import { SemanticType } from '@api-client/core/modeling/Semantics.js'
+import { bound } from '../../decorators/bound.js'
+import { html, TemplateResult } from 'lit'
+import { renderHelp } from '../../help/render.js'
+
+export class UrlTaxonomy extends TaxonomyDialog<URLConfig> {
+  static override title = `Configure URL Taxonomy`
+
+  constructor(public domainElement: DomainProperty) {
+    let config: URLConfig
+    const semantic = domainElement.semantics.find((s) => s.id === SemanticType.URL)
+    if (semantic && semantic.config) {
+      config = structuredClone(semantic.config) as URLConfig
+    } else {
+      config = {}
+    }
+    super(config)
+  }
+
+  protected override formCallback(event: Event): Promise<void> {
+    const semantic = this.domainElement.semantics.find((s) => s.id === SemanticType.URL)
+    if (semantic) {
+      semantic.config = this.config
+    } else {
+      this.domainElement.semantics.push({
+        id: SemanticType.URL,
+        config: this.config,
+      })
+    }
+    this.domainElement.domain.notifyChange()
+    return super.formCallback(event)
+  }
+
+  @bound
+  render(): TemplateResult {
+    return html`
+      <div class="checkbox-group">
+        ${this.renderRequireHttps()} ${this.renderAllowQueryParams()} ${this.renderAllowFragments()}
+        ${this.renderAllowInternational()} ${this.renderAllowIPAddresses()} ${this.renderAllowPorts()}
+        ${this.renderAllowAuthentication()}
+      </div>
+    `
+  }
+
+  protected renderRequireHttps(): TemplateResult {
+    const enabled = this.config?.requireHttps ?? DEFAULT_URL_CONFIG.requireHttps
+    return html`
+      <div class="row">
+        <div class="input checkbox metadata">
+          <ui-checkbox
+            id="require-https"
+            name="requireHttps"
+            .checked="${enabled}"
+            @change="${this.handleBooleanChange}"
+          ></ui-checkbox>
+          <div class="label">
+            <label for="require-https" class="body-medium">Require HTTPS</label>
+            <span class="body-small meta">Users must include HTTPS in their URLs.</span>
+          </div>
+        </div>
+        ${renderHelp('taxonomy', 'url:requireHttps')}
+      </div>
+    `
+  }
+
+  protected renderAllowQueryParams(): TemplateResult {
+    const enabled = this.config?.allowQueryParams ?? DEFAULT_URL_CONFIG.allowQueryParams
+    return html`
+      <div class="row">
+        <div class="input checkbox metadata">
+          <ui-checkbox
+            id="allow-query-params"
+            name="allowQueryParams"
+            .checked="${enabled}"
+            @change="${this.handleBooleanChange}"
+          ></ui-checkbox>
+          <div class="label">
+            <label for="allow-query-params" class="body-medium">Allow Query Parameters</label>
+            <span class="body-small meta">Users can include query parameters in their URLs.</span>
+          </div>
+        </div>
+        ${renderHelp('taxonomy', 'url:allowQueryParams')}
+      </div>
+    `
+  }
+
+  protected renderAllowFragments(): TemplateResult {
+    const enabled = this.config?.allowFragments ?? DEFAULT_URL_CONFIG.allowFragments
+    return html`
+      <div class="row">
+        <div class="input checkbox metadata">
+          <ui-checkbox
+            id="allow-fragments"
+            name="allowFragments"
+            .checked="${enabled}"
+            @change="${this.handleBooleanChange}"
+          ></ui-checkbox>
+          <div class="label">
+            <label for="allow-fragments" class="body-medium">Allow Fragments</label>
+            <span class="body-small meta">Users can include fragments (hashes) in their URLs.</span>
+          </div>
+        </div>
+        ${renderHelp('taxonomy', 'url:allowFragments')}
+      </div>
+    `
+  }
+
+  protected renderAllowInternational(): TemplateResult {
+    const enabled = this.config?.allowInternational ?? DEFAULT_URL_CONFIG.allowInternational
+    return html`
+      <div class="row">
+        <div class="input checkbox metadata">
+          <ui-checkbox
+            id="allow-international"
+            name="allowInternational"
+            .checked="${enabled}"
+            @change="${this.handleBooleanChange}"
+          ></ui-checkbox>
+          <div class="label">
+            <label for="allow-international" class="body-medium">Allow International Characters</label>
+            <span class="body-small meta">Users can include non-ASCII characters in their URLs.</span>
+          </div>
+        </div>
+        ${renderHelp('taxonomy', 'url:allowInternational')}
+      </div>
+    `
+  }
+
+  protected renderAllowIPAddresses(): TemplateResult {
+    const enabled = this.config?.allowIP ?? DEFAULT_URL_CONFIG.allowIP
+    return html`
+      <div class="row">
+        <div class="input checkbox metadata">
+          <ui-checkbox
+            id="allow-ip"
+            name="allowIP"
+            .checked="${enabled}"
+            @change="${this.handleBooleanChange}"
+          ></ui-checkbox>
+          <div class="label">
+            <label for="allow-ip" class="body-medium">Allow IP Address</label>
+            <span class="body-small meta">Users can include an IP address in their URLs.</span>
+          </div>
+        </div>
+        ${renderHelp('taxonomy', 'url:allowIP')}
+      </div>
+    `
+  }
+
+  protected renderAllowPorts(): TemplateResult {
+    const enabled = this.config?.allowPort ?? DEFAULT_URL_CONFIG.allowPort
+    return html`
+      <div class="row">
+        <div class="input checkbox metadata">
+          <ui-checkbox
+            id="allow-port"
+            name="allowPort"
+            .checked="${enabled}"
+            @change="${this.handleBooleanChange}"
+          ></ui-checkbox>
+          <div class="label">
+            <label for="allow-port" class="body-medium">Allow Port</label>
+            <span class="body-small meta">Users can include a port number in their URLs.</span>
+          </div>
+        </div>
+        ${renderHelp('taxonomy', 'url:allowPort')}
+      </div>
+    `
+  }
+
+  protected renderAllowAuthentication(): TemplateResult {
+    const enabled = this.config?.allowAuthentication ?? DEFAULT_URL_CONFIG.allowAuthentication
+    return html`
+      <div class="row">
+        <div class="input checkbox metadata">
+          <ui-checkbox
+            id="allow-authentication"
+            name="allowAuthentication"
+            .checked="${enabled}"
+            @change="${this.handleBooleanChange}"
+          ></ui-checkbox>
+          <div class="label">
+            <label for="allow-authentication" class="body-medium">Allow Authentication</label>
+            <span class="body-small meta">Users can include authentication credentials in their URLs.</span>
+          </div>
+        </div>
+        ${renderHelp('taxonomy', 'url:allowAuthentication')}
+      </div>
+    `
+  }
+}

package/src/modeling/dialogs/common.ts

@@ -0,0 +1,52 @@
+import { css } from 'lit'
+
+export default css`
+  .taxonomy-form {
+    --ui-dialog-width: 600px;
+    --md-outlined-text-field-label-active-background-color: var(--md-sys-color-surface-container-high);
+
+    .calculatedtaxonomy {
+      --ui-dialog-width: 90vw;
+      &::part(dialog) {
+        overflow: initial;
+      }
+    }
+
+    .form-inputs {
+      display: flex;
+      flex-direction: column;
+      gap: 16px;
+      /* If the first element is an input, the label may overflow */
+      padding-top: 5px;
+    }
+
+    .md-select select {
+      min-width: 200px;
+    }
+
+    ui-dialog::part(dialog) {
+      z-index: 1000;
+    }
+
+    .error-message {
+      color: var(--md-sys-color-error);
+    }
+
+    .test-result {
+      margin-left: 8px;
+      min-height: 40px;
+      display: flex;
+      gap: 8px;
+      align-items: center;
+
+      .generated-value {
+        user-select: text;
+      }
+    }
+
+    .code-editor .help {
+      /* Accounts for the label that is rendered over the editor */
+      padding-top: 20px;
+    }
+  }
+`

package/src/modeling/domain-association-editor.ts

@@ -0,0 +1,26 @@
+import { customElement } from 'lit/decorators.js'
+import Element from './internals/DomainAssociationEditor.js'
+import formStyles from './internals/styles/form_styles.js'
+import typography from '../styles/m3/typography.module.js'
+
+import '../md/icons/ui-icon.js'
+import '../md/button/ui-button.js'
+import '../md/text-field/ui-outlined-text-field.js'
+import '../md/icon-button/ui-icon-button.js'
+import '../md/switch/ui-switch.js'
+import '../md/checkbox/ui-checkbox.js'
+import '../md/chip/ui-chip.js'
+import '../md/chip/ui-chip-set.js'
+import '../md/select/ui-select.js'
+import '../md/select/ui-option.js'
+
+@customElement('domain-association-editor')
+export class DomainAssociationEditorElement extends Element {
+  static override styles = [formStyles, typography]
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'domain-association-editor': DomainAssociationEditorElement
+  }
+}

package/src/modeling/domain-auto-fields-dialog.ts

@@ -0,0 +1,55 @@
+import { customElement } from 'lit/decorators.js'
+import Element from './internals/DomainAutoFieldsDialog.js'
+import styles from './internals/styles/DomainAutoFieldsDialog.js'
+import typography from '../styles/m3/typography.module.js'
+import { DialogBuilder } from '../builders/DialogBuilder.js'
+import { AutoFieldsSelectionResult } from './types.js'
+
+import '../md/button/ui-button.js'
+import '../md/checkbox/ui-checkbox.js'
+import '../md/list/ui-list.js'
+import '../md/list/ui-list-item.js'
+
+@customElement('domain-auto-fields-dialog')
+export class DomainAutoFieldsDialog extends Element {
+  static override styles = [styles, typography]
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'domain-auto-fields-dialog': DomainAutoFieldsDialog
+  }
+}
+
+/**
+ * Creates and opens an auto fields selection dialog
+ * @param parent The parent activity or fragment (optional)
+ * @param onSelect Callback when fields are selected
+ * @returns The dialog builder instance
+ */
+export function openAutoFieldsDialog(onSelect: (selectedFields: string[]) => void): DialogBuilder {
+  // Create the content component
+  const content = new DomainAutoFieldsDialog()
+
+  // Create the dialog using DialogBuilder
+  const dialog = new DialogBuilder().setTitle('Add Auto Fields').setBody(content).setRenderAs('picker').setModal(true)
+
+  // Listen for selection events
+  content.addEventListener('select', (event) => {
+    const { selectedFields } = (event as CustomEvent<AutoFieldsSelectionResult>).detail
+    onSelect(selectedFields)
+    dialog.close()
+  })
+
+  // Listen for cancel events
+  content.addEventListener('cancel', () => {
+    dialog.close()
+  })
+
+  // Open the dialog
+  dialog.open()
+
+  return dialog
+}
+
+export { AutoFieldCategory, AutoFieldDefinition, AutoFieldsSelectionResult } from './types.js'

package/src/modeling/domain-browser.ts

@@ -0,0 +1,25 @@
+import { customElement } from 'lit/decorators.js'
+import Element from './internals/DomainBrowser.js'
+import styles from './internals/styles/DomainBrowser.styles.js'
+import typography from '../styles/m3/typography.module.js'
+
+import '../md/tabs/ui-tabs.js'
+import '../md/tabs/ui-tab.js'
+import '../md/icons/ui-icon.js'
+import '../md/button/ui-button.js'
+import '../md/icon-button/ui-icon-button.js'
+import '../md/divider/ui-divider.js'
+import '../md/progress/ui-circular-progress.js'
+import '../md/list/ui-list.js'
+import '../md/list/ui-list-item.js'
+
+@customElement('domain-browser')
+export class DomainBrowserElement extends Element {
+  static override styles = [styles, typography]
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'domain-browser': DomainBrowserElement
+  }
+}

package/src/modeling/domain-entity-editor.ts

@@ -0,0 +1,34 @@
+import { customElement } from 'lit/decorators.js'
+import Element from './internals/DomainEntityEditor.js'
+import styles from './internals/styles/DomainEntityEditor.styles.js'
+import formStyles from './internals/styles/form_styles.js'
+import learning from './internals/styles/learning.styles.js'
+import typography from '../styles/m3/typography.module.js'
+
+import '../md/icons/ui-icon.js'
+import '../md/button/ui-button.js'
+import '../md/text-field/ui-outlined-text-field.js'
+import '../md/icon-button/ui-icon-button.js'
+import '../md/tabs/ui-tab.js'
+import '../md/tabs/ui-tabs.js'
+import '../md/chip/ui-chip.js'
+import '../md/chip/ui-chip-set.js'
+import '../md/menu/ui-menu.js'
+import '../md/menu/ui-menu-item.js'
+import '../md/menu/ui-sub-menu.js'
+import '../md/divider/ui-divider.js'
+import '../md/select/ui-select.js'
+import '../md/select/ui-option.js'
+import '../md/list/ui-list.js'
+import '../md/list/ui-list-item.js'
+
+@customElement('domain-entity-editor')
+export class DomainEntityEditorElement extends Element {
+  static override styles = [styles, formStyles, learning, typography]
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'domain-entity-editor': DomainEntityEditorElement
+  }
+}

package/src/modeling/domain-file-import.ts

@@ -0,0 +1,22 @@
+import { customElement } from 'lit/decorators.js'
+import Element from './internals/DomainFileImport.js'
+import styles from './internals/styles/DomainFileImport.styles.js'
+import typography from '../styles/m3/typography.module.js'
+
+import '../md/icons/ui-icon.js'
+import '../md/button/ui-button.js'
+import '../md/tabs/ui-tabs.js'
+import '../md/tabs/ui-tab.js'
+import '../md/select/ui-select.js'
+import '../md/select/ui-option.js'
+
+@customElement('domain-file-import')
+export class DomainFileImportElement extends Element {
+  static override styles = [styles, typography]
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'domain-file-import': DomainFileImportElement
+  }
+}

package/src/modeling/domain-model-editor.ts

@@ -0,0 +1,21 @@
+import { customElement } from 'lit/decorators.js'
+import Element from './internals/DomainModelEditor.js'
+import styles from './internals/styles/DomainModelEditor.styles.js'
+import formStyles from './internals/styles/form_styles.js'
+import learning from './internals/styles/learning.styles.js'
+import typography from '../styles/m3/typography.module.js'
+
+import '../md/icons/ui-icon.js'
+import '../md/text-field/ui-outlined-text-field.js'
+import '../md/icon-button/ui-icon-button.js'
+
+@customElement('domain-model-editor')
+export class DomainModelEditorElement extends Element {
+  static override styles = [styles, formStyles, learning, typography]
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'domain-model-editor': DomainModelEditorElement
+  }
+}

package/src/modeling/domain-namespace-editor.ts

@@ -0,0 +1,22 @@
+import { customElement } from 'lit/decorators.js'
+import Element from './internals/DomainNamespaceEditor.js'
+import styles from './internals/styles/DomainNamespaceEditor.styles.js'
+import formStyles from './internals/styles/form_styles.js'
+import learning from './internals/styles/learning.styles.js'
+import typography from '../styles/m3/typography.module.js'
+
+import '../md/icons/ui-icon.js'
+import '../md/divider/ui-divider.js'
+import '../md/text-field/ui-outlined-text-field.js'
+import '../md/icon-button/ui-icon-button.js'
+
+@customElement('domain-namespace-editor')
+export class DomainNamespaceEditorElement extends Element {
+  static override styles = [styles, formStyles, learning, typography]
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'domain-namespace-editor': DomainNamespaceEditorElement
+  }
+}

package/src/modeling/domain-navigation.ts

@@ -0,0 +1,21 @@
+import { customElement } from 'lit/decorators.js'
+import Element from './internals/DomainNavigation.js'
+import styles from './internals/styles/DomainNavigation.styles.js'
+import typography from '../styles/m3/typography.module.js'
+
+import '../md/divider/ui-divider.js'
+import '../md/icons/ui-icon.js'
+import '../md/button/ui-button.js'
+import '../md/icon-button/ui-icon-button.js'
+import '../elements/search-input/search-input.js'
+
+@customElement('domain-navigation')
+export class DomainNavigationElement extends Element {
+  static override styles = [styles, typography]
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'domain-navigation': DomainNavigationElement
+  }
+}

package/src/modeling/domain-property-editor.ts

@@ -0,0 +1,21 @@
+import { customElement } from 'lit/decorators.js'
+import Element from './internals/DomainPropertyEditor.js'
+import styles from './internals/styles/DomainPropertyEditor.styles.js'
+import formStyles from './internals/styles/form_styles.js'
+import typography from '../styles/m3/typography.module.js'
+
+import '../md/menu/ui-menu.js'
+import '../md/menu/ui-menu-item.js'
+import '../md/select/ui-select.js'
+import '../md/select/ui-option.js'
+
+@customElement('domain-property-editor')
+export class DomainPropertyEditorElement extends Element {
+  static override styles = [styles, formStyles, typography]
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'domain-property-editor': DomainPropertyEditorElement
+  }
+}