@api-client/ui 0.5.58 → 0.6.0

package/src/modeling/dialogs/PasswordTaxonomy.ts

@@ -0,0 +1,201 @@
+import type { DomainProperty } from '@api-client/core/modeling/DomainProperty.js'
+import { bound } from '../../decorators/bound.js'
+import { html, nothing, TemplateResult } from 'lit'
+import { DEFAULT_PASSWORD_CONFIG, type PasswordConfig } from '@api-client/core/modeling/definitions/Password.js'
+import { SemanticType } from '@api-client/core/modeling/Semantics.js'
+import { live } from 'lit/directives/live.js'
+import { renderHelp } from '../../help/render.js'
+import { ifDefined } from 'lit/directives/if-defined.js'
+import { TaxonomyDialog } from './TaxonomyDialog.js'
+
+/**
+ * A class that generates a dialog that allows the user to configure the taxonomy of a password.
+ */
+export class PasswordTaxonomy extends TaxonomyDialog<PasswordConfig> {
+  static override title = `Configure Password Taxonomy`
+
+  constructor(public domainElement: DomainProperty) {
+    let config: PasswordConfig
+    const semantic = domainElement.semantics.find((s) => s.id === SemanticType.Password)
+    if (semantic && semantic.config) {
+      config = structuredClone(semantic.config) as PasswordConfig
+    } else {
+      config = {}
+    }
+    super(config)
+  }
+
+  protected override formCallback(event: Event): Promise<void> {
+    const semantic = this.domainElement.semantics.find((s) => s.id === SemanticType.Password)
+    if (semantic) {
+      semantic.config = this.config
+    } else {
+      this.domainElement.semantics.push({
+        id: SemanticType.Password,
+        config: this.config,
+      })
+    }
+    this.domainElement.domain.notifyChange()
+    return super.formCallback(event)
+  }
+
+  @bound
+  render(): TemplateResult {
+    return html`
+      <div class="checkbox-group">
+        ${this.renderRequireSpecialChars()} ${this.renderRequireNumbers()} ${this.renderRequireUppercase()}
+        ${this.renderRequireLowercase()} ${this.renderPreventReuse()}
+      </div>
+      <div class="input-group">${this.renderReuseCountInput()} ${this.renderMaxAgeInput()}</div>
+    `
+  }
+
+  protected renderRequireSpecialChars(): TemplateResult {
+    const enabled = this.config?.requireSpecialChars ?? false
+    return html`
+      <div class="row">
+        <div class="input checkbox metadata">
+          <ui-checkbox
+            id="require-special-chars"
+            .checked="${enabled}"
+            name="requireSpecialChars"
+            @change="${this.handleBooleanChange}"
+          ></ui-checkbox>
+          <div class="label">
+            <label for="require-special-chars" class="body-medium">Require Special Characters</label>
+            <span class="body-small meta">Users must add special characters in their passwords.</span>
+          </div>
+        </div>
+        ${renderHelp('taxonomy', 'password:requireSpecialChars')}
+      </div>
+    `
+  }
+
+  protected renderRequireNumbers(): TemplateResult {
+    const enabled = this.config?.requireNumbers ?? DEFAULT_PASSWORD_CONFIG.requireNumbers
+    return html`
+      <div class="row">
+        <div class="input checkbox metadata">
+          <ui-checkbox
+            id="require-numbers"
+            .checked="${enabled}"
+            name="requireNumbers"
+            @change="${this.handleBooleanChange}"
+          ></ui-checkbox>
+          <div class="label">
+            <label for="require-numbers" class="body-medium">Require Numbers</label>
+            <span class="body-small meta">Users must add numbers to their passwords.</span>
+          </div>
+        </div>
+        ${renderHelp('taxonomy', 'password:requireNumbers')}
+      </div>
+    `
+  }
+
+  protected renderRequireUppercase(): TemplateResult {
+    const enabled = this.config?.requireUppercase ?? DEFAULT_PASSWORD_CONFIG.requireUppercase
+    return html`
+      <div class="row">
+        <div class="input checkbox metadata">
+          <ui-checkbox
+            id="require-uppercase"
+            .checked="${enabled}"
+            name="requireUppercase"
+            @change="${this.handleBooleanChange}"
+          ></ui-checkbox>
+          <div class="label">
+            <label for="require-uppercase" class="body-medium">Require Uppercase Letters</label>
+            <span class="body-small meta">Users must add uppercase letters to their passwords.</span>
+          </div>
+        </div>
+        ${renderHelp('taxonomy', 'password:requireUppercase')}
+      </div>
+    `
+  }
+
+  protected renderRequireLowercase(): TemplateResult {
+    const enabled = this.config?.requireLowercase ?? DEFAULT_PASSWORD_CONFIG.requireLowercase
+    return html`
+      <div class="row">
+        <div class="input checkbox metadata">
+          <ui-checkbox
+            id="require-lowercase"
+            .checked="${enabled}"
+            name="requireLowercase"
+            @change="${this.handleBooleanChange}"
+          ></ui-checkbox>
+          <div class="label">
+            <label for="require-lowercase" class="body-medium">Require Lowercase Letters</label>
+            <span class="body-small meta">Users must add lowercase letters to their passwords.</span>
+          </div>
+        </div>
+        ${renderHelp('taxonomy', 'password:requireLowercase')}
+      </div>
+    `
+  }
+
+  protected renderPreventReuse(): TemplateResult {
+    const enabled = this.config?.preventReuse ?? DEFAULT_PASSWORD_CONFIG.preventReuse
+    return html`
+      <div class="row">
+        <div class="input checkbox metadata">
+          <ui-checkbox
+            id="prevent-reuse"
+            .checked="${enabled}"
+            name="preventReuse"
+            @change="${this.handleBooleanChange}"
+          ></ui-checkbox>
+          <div class="label">
+            <label for="prevent-reuse" class="body-medium">Prevent Reuse</label>
+            <span class="body-small meta">Prevents users from reusing old passwords.</span>
+          </div>
+        </div>
+        ${renderHelp('taxonomy', 'password:preventReuse')}
+      </div>
+    `
+  }
+
+  protected renderReuseCountInput(): TemplateResult | typeof nothing {
+    const enabled = this.config?.preventReuse ?? DEFAULT_PASSWORD_CONFIG.preventReuse
+    if (!enabled) {
+      return nothing
+    }
+    const value = this.config?.preventReuseCount ?? DEFAULT_PASSWORD_CONFIG.preventReuseCount
+    return html`
+      <div class="row input-row">
+        <ui-outlined-text-field
+          class="input"
+          name="preventReuseCount"
+          .value="${live(String(value))}"
+          label="Reuse count history"
+          required
+          min="1"
+          type="number"
+          @change="${this.handleTextChange}"
+          supportingText="Number of previous passwords to remember."
+        ></ui-outlined-text-field>
+        ${renderHelp('taxonomy', 'password:preventReuseCount')}
+      </div>
+    `
+  }
+
+  protected renderMaxAgeInput(): TemplateResult {
+    const info = 'Maximum age of password in days before requiring change.'
+    const value = this.config?.maxAge ?? DEFAULT_PASSWORD_CONFIG.maxAge
+    return html`
+      <div class="row input-row">
+        <ui-outlined-text-field
+          class="input"
+          name="maxAge"
+          value="${ifDefined(value as unknown as string)}"
+          label="Max age (in days)"
+          min="0"
+          type="number"
+          @change="${this.handleTextChange}"
+          .supportingText="${info}"
+        ></ui-outlined-text-field>
+        ${renderHelp('taxonomy', 'password:maxAge')}
+      </div>
+    `
+  }
+}

package/src/modeling/dialogs/PhoneTaxonomy.ts

@@ -0,0 +1,238 @@
+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, nothing, TemplateResult } from 'lit'
+import { renderHelp } from '../../help/render.js'
+import { DEFAULT_PHONE_CONFIG, type PhoneConfig } from '@api-client/core/modeling/definitions/Phone.js'
+
+export class PhoneTaxonomy extends TaxonomyDialog<PhoneConfig> {
+  static override title = `Configure Phone Taxonomy`
+
+  constructor(public domainElement: DomainProperty) {
+    let config: PhoneConfig
+    const semantic = domainElement.semantics.find((s) => s.id === SemanticType.Phone)
+    if (semantic && semantic.config) {
+      config = structuredClone(semantic.config) as PhoneConfig
+    } else {
+      config = {}
+    }
+    super(config)
+  }
+
+  protected override formCallback(event: Event): Promise<void> {
+    const semantic = this.domainElement.semantics.find((s) => s.id === SemanticType.Phone)
+    if (semantic) {
+      semantic.config = this.config
+    } else {
+      this.domainElement.semantics.push({
+        id: SemanticType.Phone,
+        config: this.config,
+      })
+    }
+    this.domainElement.domain.notifyChange()
+    return super.formCallback(event)
+  }
+
+  @bound
+  handleAllowedCountriesChange(event: Event): void {
+    const input = event.target as HTMLInputElement
+    const value = input.value.trim()
+    if (value) {
+      const countries = this.config?.allowedCountries ?? DEFAULT_PHONE_CONFIG.allowedCountries ?? []
+      if (!countries.includes(value)) {
+        countries.push(value)
+        this.config = { ...this.config, allowedCountries: countries }
+        this.requestUpdate()
+      }
+      input.value = '' // Clear the input after adding
+    }
+  }
+
+  @bound
+  handleRemoveCountry(event: Event): void {
+    const chip = event.target as HTMLElement
+    const index = parseInt(chip.dataset.index || '0', 10)
+    if (!isNaN(index) && this.config?.allowedCountries) {
+      this.config.allowedCountries.splice(index, 1)
+      this.requestUpdate()
+    }
+  }
+
+  @bound
+  render(): TemplateResult {
+    return html`
+      <div class="checkbox-group">
+        ${this.renderRequireCountryCode()} ${this.renderAllowExtension()} ${this.renderRequireVerification()}
+      </div>
+      <div class="input-group">
+        ${this.renderVerificationMethodSelect()} ${this.renderFormatSelect()} ${this.renderCustomFormatInput()}
+        ${this.renderAllowedCountriesInput()}
+      </div>
+    `
+  }
+
+  protected renderRequireCountryCode(): TemplateResult {
+    const enabled = this.config?.requireCountryCode ?? DEFAULT_PHONE_CONFIG.requireCountryCode
+    return html`
+      <div class="row">
+        <div class="input checkbox metadata">
+          <ui-checkbox
+            id="require-country-code"
+            .checked="${enabled}"
+            name="requireCountryCode"
+            @change="${this.handleBooleanChange}"
+          ></ui-checkbox>
+          <div class="label">
+            <label for="require-country-code" class="body-medium">Require Country Code</label>
+            <span class="body-small meta">Users must include a country code in their phone numbers.</span>
+          </div>
+        </div>
+        ${renderHelp('taxonomy', 'phone:requireCountryCode')}
+      </div>
+    `
+  }
+
+  protected renderAllowExtension(): TemplateResult {
+    const enabled = this.config?.allowExtension ?? DEFAULT_PHONE_CONFIG.allowExtension
+    return html`
+      <div class="row">
+        <div class="input checkbox metadata">
+          <ui-checkbox
+            id="allow-extension"
+            .checked="${enabled}"
+            name="allowExtension"
+            @change="${this.handleBooleanChange}"
+          ></ui-checkbox>
+          <div class="label">
+            <label for="allow-extension" class="body-medium">Allow Extension</label>
+            <span class="body-small meta">Users can add an extension to their phone numbers.</span>
+          </div>
+        </div>
+        ${renderHelp('taxonomy', 'phone:allowExtension')}
+      </div>
+    `
+  }
+
+  protected renderRequireVerification(): TemplateResult {
+    const enabled = this.config?.requireVerification ?? DEFAULT_PHONE_CONFIG.requireVerification
+    return html`
+      <div class="row">
+        <div class="input checkbox metadata">
+          <ui-checkbox
+            id="require-verification"
+            .checked="${enabled}"
+            name="requireVerification"
+            @change="${this.handleBooleanChange}"
+          ></ui-checkbox>
+          <div class="label">
+            <label for="require-verification" class="body-medium">Require Verification</label>
+            <span class="body-small meta">Users must verify their phone numbers.</span>
+          </div>
+        </div>
+        ${renderHelp('taxonomy', 'phone:requireVerification')}
+      </div>
+    `
+  }
+
+  protected renderFormatSelect(): TemplateResult {
+    const value = this.config?.format ?? DEFAULT_PHONE_CONFIG.format
+    return html`
+      <div class="row input-row select">
+        <ui-select
+          label="Phone Number Format"
+          class="input"
+          name="format"
+          .value="${value as string}"
+          @change="${this.handleSelectChange}"
+        >
+          <ui-option value="international" lines="two">
+            <div>International</div>
+            <div slot="supporting-text">E.164 format with country code (e.g., +1234567890).</div>
+          </ui-option>
+          <ui-option value="national" lines="two">
+            <div>National</div>
+            <div slot="supporting-text">Local format without country code (e.g., 0123456789).</div>
+          </ui-option>
+          <ui-option value="custom" lines="two">
+            <div>Custom</div>
+            <div slot="supporting-text">User-defined format.</div>
+          </ui-option>
+        </ui-select>
+        ${renderHelp('taxonomy', 'phone:format')}
+      </div>
+    `
+  }
+
+  protected renderVerificationMethodSelect(): TemplateResult | typeof nothing {
+    const enabled = this.config?.requireVerification ?? DEFAULT_PHONE_CONFIG.requireVerification
+    if (!enabled) {
+      return nothing // Skip rendering if verification is not required
+    }
+    // Render verification method select only if verification is required
+    const value = this.config?.verificationMethod ?? DEFAULT_PHONE_CONFIG.verificationMethod
+    return html`
+      <div class="row input-row select">
+        <ui-select
+          label="Verification method"
+          class="input"
+          name="verificationMethod"
+          .value="${value as string}"
+          @change="${this.handleSelectChange}"
+        >
+          <ui-option value="sms">SMS</ui-option>
+          <ui-option value="call">Call</ui-option>
+        </ui-select>
+        ${renderHelp('taxonomy', 'phone:verificationMethod')}
+      </div>
+    `
+  }
+
+  protected renderAllowedCountriesInput(): TemplateResult {
+    const value = this.config?.allowedCountries ?? DEFAULT_PHONE_CONFIG.allowedCountries
+    const chips = (value || []).map(
+      (country, index) =>
+        html`<ui-chip type="input" removable data-index="${index}" @remove="${this.handleRemoveCountry}"
+          >${country}</ui-chip
+        >`
+    )
+    return html`
+      <div class="row input-row">
+        <div class="input chips-input">
+          <ui-outlined-text-field
+            class="input"
+            name="allowedCountries"
+            label="Allowed Countries"
+            @change="${this.handleAllowedCountriesChange}"
+            supportingText="Add a country code and press Enter to add it to the list."
+          ></ui-outlined-text-field>
+          <ui-chip-set>${chips}</ui-chip-set>
+        </div>
+        ${renderHelp('taxonomy', 'phone:allowedCountries')}
+      </div>
+    `
+  }
+
+  protected renderCustomFormatInput(): TemplateResult | typeof nothing {
+    const format = this.config?.format ?? DEFAULT_PHONE_CONFIG.format
+    if (format !== 'custom') {
+      return nothing // Skip rendering if format is not custom
+    }
+    // Render custom format input only if the format is set to 'custom'
+    // Examples: '###-###-####', '(###) ###-####'
+    const value = this.config?.customFormat ?? DEFAULT_PHONE_CONFIG.customFormat
+    return html`
+      <div class="row input-row">
+        <ui-outlined-text-field
+          class="input"
+          name="customFormat"
+          label="Custom Format"
+          .value="${value || ''}"
+          @change="${this.handleTextChange}"
+          supportingText="Examples: '###-###-####', '(###) ###-####'"
+        ></ui-outlined-text-field>
+        ${renderHelp('taxonomy', 'phone:customFormat')}
+      </div>
+    `
+  }
+}

package/src/modeling/dialogs/PublicUniqueNameTaxonomy.ts

@@ -0,0 +1,212 @@
+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, nothing, TemplateResult } from 'lit'
+import { renderHelp } from '../../help/render.js'
+import {
+  type PublicUniqueNameConfig,
+  DEFAULT_PUBLIC_UNIQUE_NAME_CONFIG,
+} from '@api-client/core/modeling/definitions/PublicUniqueName.js'
+import { repeat } from 'lit/directives/repeat.js'
+
+export class PublicUniqueNameTaxonomy extends TaxonomyDialog<PublicUniqueNameConfig> {
+  static override title = `Configure Public Unique Name Taxonomy`
+
+  /**
+   * The list of properties available for source list.
+   * It is a computed list for the parent entity and all its parents.
+   */
+  properties: DomainProperty[] = []
+
+  /**
+   * The default source field to use for the public unique name.
+   * It is the first property with the `Title` semantic.
+   */
+  defaultSourceField?: DomainProperty
+
+  constructor(public domainElement: DomainProperty) {
+    let config: PublicUniqueNameConfig
+    const semantic = domainElement.semantics.find((s) => s.id === SemanticType.PublicUniqueName)
+    if (semantic && semantic.config) {
+      config = structuredClone(semantic.config) as PublicUniqueNameConfig
+    } else {
+      config = {}
+    }
+    super(config)
+    const entity = domainElement.getParentInstance()
+    if (entity) {
+      this.properties = this.listComputedProperties(entity, {
+        exclude: [this.domainElement.key],
+        types: ['string'],
+      })
+      this.defaultSourceField = this.properties.find((prop) => prop.hasSemantic(SemanticType.Title))
+    }
+  }
+
+  protected override formCallback(event: Event): Promise<void> {
+    const semantic = this.domainElement.semantics.find((s) => s.id === SemanticType.PublicUniqueName)
+    if (semantic) {
+      semantic.config = this.config
+    } else {
+      this.domainElement.semantics.push({
+        id: SemanticType.PublicUniqueName,
+        config: this.config,
+      })
+    }
+    this.domainElement.domain.notifyChange()
+    return super.formCallback(event)
+  }
+
+  @bound
+  render(): TemplateResult {
+    return html`
+      <div class="input-group">
+        ${this.renderSourceFieldInput()} ${this.renderFallbackFieldInput()} ${this.renderSeparatorInput()}
+      </div>
+      <div class="checkbox-group">
+        ${this.renderCaseSensitive()} ${this.renderAllowUnicode()} ${this.renderAllowDuplicates()}
+      </div>
+    `
+  }
+
+  protected renderSourceFieldInput(): TemplateResult {
+    const value = this.config?.sourceField ?? this.defaultSourceField?.key
+    return html`
+      <div class="row input-row">
+        <ui-select
+          label="Source Field"
+          class="input"
+          name="sourceField"
+          required
+          .value="${value as string}"
+          @change="${this.handleSelectChange}"
+        >
+          ${repeat(
+            this.properties,
+            (prop) => prop.key,
+            (prop) => {
+              return html`
+                <ui-option value="${prop.key}">
+                  <div>${prop.info.getLabel()}</div>
+                  ${prop.info.description ? html`<div slot="supporting-text">${prop.info.description}</div>` : nothing}
+                </ui-option>
+              `
+            }
+          )}
+        </ui-select>
+        ${renderHelp('taxonomy', 'publicuniquename:sourceField')}
+      </div>
+    `
+  }
+
+  protected renderFallbackFieldInput(): TemplateResult {
+    const value = this.config?.fallbackField
+    return html`
+      <div class="row input-row">
+        <ui-select
+          label="Fallback Field"
+          class="input"
+          name="fallbackField"
+          .value="${value as string}"
+          @change="${this.handleSelectChange}"
+          supportingText="If the source field is empty, this field will be used as a fallback."
+        >
+          ${repeat(
+            this.properties,
+            (prop) => prop.key,
+            (prop) => {
+              return html`
+                <ui-option value="${prop.key}">
+                  <div>${prop.info.getLabel()}</div>
+                  ${prop.info.description ? html`<div slot="supporting-text">${prop.info.description}</div>` : nothing}
+                </ui-option>
+              `
+            }
+          )}
+        </ui-select>
+        ${renderHelp('taxonomy', 'publicuniquename:fallbackField')}
+      </div>
+    `
+  }
+
+  protected renderSeparatorInput(): TemplateResult {
+    const value = this.config?.separator ?? DEFAULT_PUBLIC_UNIQUE_NAME_CONFIG.separator
+    return html`
+      <div class="row input-row">
+        <ui-outlined-text-field
+          label="Separator"
+          class="input"
+          name="separator"
+          .value="${value as string}"
+          @change="${this.handleTextChange}"
+          required
+        ></ui-outlined-text-field>
+        ${renderHelp('taxonomy', 'publicuniquename:separator')}
+      </div>
+    `
+  }
+
+  protected renderCaseSensitive(): TemplateResult {
+    const enabled = this.config?.caseSensitive ?? DEFAULT_PUBLIC_UNIQUE_NAME_CONFIG.caseSensitive
+    return html`
+      <div class="row">
+        <div class="input checkbox metadata">
+          <ui-checkbox
+            id="case-sensitive"
+            .checked="${enabled}"
+            name="caseSensitive"
+            @change="${this.handleBooleanChange}"
+          ></ui-checkbox>
+          <div class="label">
+            <label for="case-sensitive" class="body-medium">Case Sensitive</label>
+            <span class="body-small meta">Whether the public unique name is case sensitive.</span>
+          </div>
+        </div>
+        ${renderHelp('taxonomy', 'publicuniquename:caseSensitive')}
+      </div>
+    `
+  }
+
+  protected renderAllowUnicode(): TemplateResult {
+    const enabled = this.config?.allowUnicode ?? DEFAULT_PUBLIC_UNIQUE_NAME_CONFIG.allowUnicode
+    return html`
+      <div class="row">
+        <div class="input checkbox metadata">
+          <ui-checkbox
+            id="allow-unicode"
+            .checked="${enabled}"
+            name="allowUnicode"
+            @change="${this.handleBooleanChange}"
+          ></ui-checkbox>
+          <div class="label">
+            <label for="allow-unicode" class="body-medium">Allow Unicode Characters</label>
+            <span class="body-small meta">Whether to allow Unicode characters in the public unique name.</span>
+          </div>
+        </div>
+        ${renderHelp('taxonomy', 'publicuniquename:allowUnicode')}
+      </div>
+    `
+  }
+
+  protected renderAllowDuplicates(): TemplateResult {
+    const enabled = this.config?.allowDuplicates ?? DEFAULT_PUBLIC_UNIQUE_NAME_CONFIG.allowDuplicates
+    return html`
+      <div class="row">
+        <div class="input checkbox metadata">
+          <ui-checkbox
+            id="allow-duplicates"
+            .checked="${enabled}"
+            name="allowDuplicates"
+            @change="${this.handleBooleanChange}"
+          ></ui-checkbox>
+          <div class="label">
+            <label for="allow-duplicates" class="body-medium">Allow Duplicates</label>
+            <span class="body-small meta">Whether to allow duplicate public unique names.</span>
+          </div>
+        </div>
+        ${renderHelp('taxonomy', 'publicuniquename:allowDuplicates')}
+      </div>
+    `
+  }
+}