@api-client/ui 0.0.17 → 0.1.0

package/src/elements/modeling/internals/DomainPropertyEditor.ts

@@ -1,1112 +0,0 @@
-import { nothing, html, type PropertyValues, type TemplateResult } from 'lit'
-import { state } from 'lit/decorators.js'
-import { ifDefined } from 'lit/directives/if-defined.js'
-import { live } from 'lit/directives/live.js'
-import { EventUtils, DomainProperty, DataFormat } from '@api-client/core/browser.js'
-import { ModelingElement } from './ModelingElement.js'
-import type { MdOutlinedSelect } from '@material/web/select/outlined-select.js'
-import type { MdCheckbox } from '@material/web/checkbox/checkbox.js'
-import type { DomainPropertyInputConfig } from '../types.js'
-import { getFormatInfo, getPropertyInputOptions } from './lib/UiMapping.js'
-
-import '../../../md/icons/ui-icon.js'
-import '../../../md/button/ui-outlined-button.js'
-import '@material/web/textfield/outlined-text-field.js'
-import '@material/web/iconbutton/icon-button.js'
-import '@material/web/select/outlined-select.js'
-import '@material/web/select/select-option.js'
-import '@material/web/checkbox/checkbox.js'
-import '@material/web/divider/divider.js'
-import '@material/web/switch/switch.js'
-
-/**
- * `DomainPropertyEditor` is a LitElement-based web component that provides a user interface for editing
- * properties of a `DomainProperty` object. It allows users to modify various aspects of a data property,
- * including its metadata, attributes, schema, and enum values.
- *
- * ## Features
- *
- * -   **Metadata Editing**: Allows editing of the property's name, display name, and description.
- * -   **Attribute Management**: Provides controls for setting data type, format, and other attributes
- *     like `required`, `multiple`, `primary`, `index`, and `readOnly`.
- * -   **Schema Definition**: Enables defining the schema for the property, including default values
- *     and enum values.
- * -   **Enum Editor**: Supports enabling and disabling an enum editor for predefined values, with
- *     options to add, update, and delete enum values.
- * -   **Default Value Setting**: Allows setting a default value for the property, either as a literal
- *     value or a function.
- * -   **Data Type and Format Selection**: Provides dropdowns for selecting the data type and format
- *     of the property.
- * -   **Validation**: Includes input validation to ensure data integrity.
- * -   **Change Notification**: Dispatches a `change` event whenever a property is modified.
- *
- * ## Usage
- *
- * The `DomainPropertyEditor` is typically used within a larger application that manages data models.
- *
- * ```html
- * <domain-property-editor .root="${this.domainNamespace}" selected="property-key"></domain-property-editor>
- * ```
- */
-export default class DomainPropertyEditor extends ModelingElement {
-  /**
-   * The `DomainProperty` object being edited.
-   * This is updated when the `selected` property changes.
-   */
-  @state() private accessor domainElement: DomainProperty | undefined
-  /**
-   * Indicates whether the default value input field is visible.
-   * This is set to `true` when the user selects the "Literal" option in the default value select.
-   */
-  @state() private accessor hasDefaultValueInput = false
-  /**
-   * Whether the enum options are enabled.
-   * When `true` the user can add, update, and delete enum values.
-   */
-  @state() private accessor enumEnabled = false
-
-  /**
-   * A fields that holds in memory enum values after disabling the enum editor.
-   * When that happens the values are removed from the model but kept in memory.
-   * As long as the property stays the same, the user can reopen the enum editor
-   * and restore the previous value.
-   */
-  protected cachedEnumValues: string[] | undefined
-  /**
-   * A cached value of the schema-sensitive input configuration.
-   * These are the default value and enum value inputs.
-   */
-  protected cachedSchemaInputConfig?: DomainPropertyInputConfig
-
-  /**
-   * A configuration for a schema-sensitive HTML input.
-   */
-  get schemaInputConfig(): DomainPropertyInputConfig {
-    return this.cachedSchemaInputConfig || { type: 'text' }
-  }
-
-  protected override willUpdate(cp: PropertyValues<this>): void {
-    if (cp.has('selected')) {
-      this.computeEntity()
-    }
-    super.willUpdate(cp)
-  }
-
-  protected async computeEntity(): Promise<void> {
-    const { root, selected } = this
-    this.domainElement = undefined
-    if (!root || !selected) {
-      this.domainElement = undefined
-      return
-    }
-    await this.updateComplete
-    const value = root.findProperty(selected)
-    this.domainElement = value
-    const schema = value?.ensureSchema()
-    if (schema && schema.defaultValue) {
-      this.hasDefaultValueInput = schema.defaultValue.type === 'literal'
-    } else {
-      this.hasDefaultValueInput = false
-    }
-    if (schema && schema.enum) {
-      this.enumEnabled = true
-    } else {
-      this.enumEnabled = false
-    }
-    this.cachedEnumValues = undefined
-    this.updateSchemaInputConfig()
-  }
-
-  /**
-   * Toggles the state of the enum editor.
-   *
-   * If the editor was disabled, it enables it and vice-versa.
-   *
-   * It ensures the property has the schema and then:
-   * - When enabling:
-   *   - If `cachedEnumValues` is set it restores them.
-   *   - Otherwise it sets the default enum value `['']`
-   * - When disabling:
-   *   - It sets the `cachedEnumValues` to the current enum value.
-   *   - Removes the enum from the model
-   * - Requests the model update.
-   *
-   * @fires change - Dispatched when the enum editor state changes.
-   */
-  toggleEnum(): void {
-    const { domainElement } = this
-    if (!domainElement) {
-      return
-    }
-    this.enumEnabled = !this.enumEnabled
-    const schema = domainElement.ensureSchema()
-    if (!this.enumEnabled) {
-      this.cachedEnumValues = schema.enum
-      schema.enum = undefined
-    } else if (this.cachedEnumValues) {
-      schema.enum = this.cachedEnumValues || ['']
-      this.cachedEnumValues = undefined
-    } else {
-      schema.enum = ['']
-    }
-    this.requestUpdate()
-    this.notifyChange()
-  }
-
-  /**
-   * Updates an enum value.
-   *
-   * @param index The index at which to update the value.
-   * @param value The value to set. Empty string is acceptable. The type is determined by the property type.
-   * @throws {RangeError} When the index is out of bounds.
-   * @throws {TypeError} When the value is not a string.
-   * @fires change - Dispatched when the enum value is updated.
-   */
-  updateEnum(index: number, value: string): void {
-    if (index < 0) {
-      throw new RangeError(`Enum array index cannot be negative.`)
-    }
-    if (typeof value !== 'string') {
-      throw new TypeError(`Expected a string for the enum value, got ${typeof value}.`)
-    }
-    const { domainElement } = this
-    if (!domainElement) {
-      return
-    }
-    const schema = domainElement.ensureSchema()
-    if (!schema.enum) {
-      schema.enum = [value]
-    } else {
-      if (schema.enum.length - 1 < index) {
-        throw new RangeError(`Invalid enum array index: ${index}.`)
-      }
-      schema.enum[index] = value
-    }
-    this.notifyChange()
-  }
-
-  /**
-   * Adds a new enum value to the property.
-   *
-   * @param value The value to add. Defaults to an empty string.
-   * @throws {TypeError} When the value is not a string.
-   * @fires change - Dispatched when a new enum value is added.
-   */
-  addEnum(value = ''): void {
-    if (typeof value !== 'string') {
-      throw new TypeError(`Expected a string for the enum value, got ${typeof value}.`)
-    }
-    const { domainElement } = this
-    if (!domainElement) {
-      return
-    }
-    const schema = domainElement.ensureSchema()
-    if (!schema.enum) {
-      schema.enum = [value]
-    } else {
-      schema.enum.push(value)
-    }
-    this.requestUpdate()
-    // this should be immediately propagated to other clients.
-    this.notifyChange()
-  }
-
-  /**
-   * Deletes an enum value at a position.
-   *
-   * @param index The index at which to delete an enum property.
-   * @throws {RangeError} When the index is out of bounds.
-   * @fires change - Dispatched when an enum value is deleted.
-   */
-  deleteEnum(index: number): void {
-    if (index < 0) {
-      throw new RangeError(`Enum array index cannot be negative.`)
-    }
-    const { domainElement } = this
-    if (!domainElement) {
-      return
-    }
-    const schema = domainElement.ensureSchema()
-    if (!schema.enum) {
-      return
-    }
-    if (schema.enum.length - 1 < index) {
-      throw new RangeError(`Invalid enum array index: ${index}.`)
-    }
-    schema.enum.splice(index, 1)
-    this.requestUpdate()
-    this.notifyChange()
-  }
-
-  /**
-   * Sets a new defaultValue on the property schema.
-   *
-   * @param value The default value to set. Empty to remove.
-   * @param type The type of the value.
-   * @param dataType Optional data type to set. Defaults to string. Only used with `type` equal `literal`.
-   * @fires change - Dispatched when the default value is updated.
-   */
-  setDefaultValue(value?: string, type: 'function' | 'literal' = 'function'): void {
-    const { domainElement } = this
-    if (!domainElement) {
-      return
-    }
-    const schema = domainElement.ensureSchema()
-    if (value === schema.defaultValue?.value) {
-      return
-    }
-    if (value || (type === 'literal' && value === '')) {
-      schema.defaultValue = {
-        type,
-        value: value,
-      }
-    } else {
-      delete schema.defaultValue
-    }
-    this.notifyChange()
-    this.requestUpdate()
-  }
-
-  /**
-   * Updates the property's data type.
-   *
-   * It sets the `format` for `number`, `datetime`, and `binary` data types.
-   *
-   * @param value The value to set.
-   * @throws {TypeError} When the passed value is not a valid data type.
-   * @fires change - Dispatched when the data type is updated.
-   */
-  setDataType(value: string): void {
-    const { domainElement } = this
-    if (!domainElement) {
-      return
-    }
-    if (!DomainProperty.isValidType(value)) {
-      throw new TypeError(`Invalid data type: ${value}.`)
-    }
-    domainElement.type = value
-    const binding = domainElement.getWebBinding()
-    if (value === 'number') {
-      binding.format = 'int64'
-    } else if (value === 'binary') {
-      binding.format = 'base64'
-    } else {
-      binding.format = undefined
-    }
-    this.notifyChange()
-    this.requestUpdate()
-    this.updateSchemaInputConfig()
-  }
-
-  /**
-   * Sets the value of one of the "attribute" fields.
-   * These are the checkboxes located in the "Attributes" section.
-   *
-   * @param name The name of the attribute to set.
-   * @param value The boolean option to set as the value.
-   * @throws {TypeError} When the passed name is not a valid attribute name.
-   * @throws {TypeError} When the passed value is not a boolean value.
-   * @fires change - Dispatched when an attribute value is updated.
-   */
-  setModelAttribute(name: string, value: boolean): void {
-    if (!DomainProperty.isValidAttribute(name)) {
-      throw new TypeError(`Invalid attribute name: ${name}.`)
-    }
-    if (typeof value !== 'boolean') {
-      throw new TypeError(`Invalid attribute value: ${value}.`)
-    }
-    const { domainElement } = this
-    if (!domainElement) {
-      return
-    }
-    domainElement[name] = value
-    this.notifyChange()
-    this.requestUpdate()
-  }
-
-  /**
-   * Sets the `format` value on the model.
-   *
-   * @param format The format value to set.
-   * @throws {TypeError} When the passed format value is not supported.
-   * @fires change - Dispatched when the format value is updated.
-   */
-  setFormat(format?: string): void {
-    if (!DomainProperty.isValidFormat(format)) {
-      throw new TypeError(`Invalid format value: ${format}.`)
-    }
-    const { domainElement } = this
-    if (!domainElement) {
-      return
-    }
-    const binding = domainElement.getWebBinding()
-    if (binding.format === format) {
-      return
-    }
-    binding.format = format
-    this.requestUpdate()
-    this.notifyChange()
-    this.updateSchemaInputConfig()
-  }
-
-  /**
-   * Sets an example value on the schema.
-   * @param value The value to set. Removes the examples array if not set.
-   */
-  setExampleValue(value?: string): void {
-    const { domainElement } = this
-    if (!domainElement) {
-      return
-    }
-    // @TODO: Eventually, support multiple examples
-    const schema = domainElement.ensureSchema()
-    if (value) {
-      schema.examples = [value]
-    } else {
-      delete schema.examples
-    }
-    this.requestUpdate()
-    this.notifyChange()
-  }
-
-  /**
-   * A method to be called when a schema property changes.
-   * It caches the schema-sensitive input configuration.
-   */
-  protected updateSchemaInputConfig(): void {
-    const { domainElement } = this
-    if (!domainElement) {
-      return
-    }
-    this.cachedSchemaInputConfig = getPropertyInputOptions(domainElement)
-  }
-
-  /**
-   * A handler for the one of the metadata inputs value change.
-   *
-   * It supports the following fields:
-   *
-   * - `name`
-   * - `displayName`
-   * - `description`
-   * - `literalDefaultValue`
-   */
-  protected handleMetaChange(e: Event): void {
-    const { domainElement } = this
-    if (!domainElement) {
-      return
-    }
-    const node = e.target as HTMLInputElement
-    const { name, value } = node
-    if (value && !node.reportValidity()) {
-      return
-    }
-    if (name === 'literalDefaultValue') {
-      this.setDefaultValue(value, 'literal')
-      return
-    }
-    if (!['name', 'displayName', 'description'].includes(name as string)) {
-      return
-    }
-    if (name === 'name' && !value) {
-      return
-    }
-    domainElement.info[name as 'name' | 'description' | 'displayName'] = value
-    this.notifyChange()
-  }
-
-  /**
-   * A handler for the data type select input change
-   */
-  protected handleDataTypeChange(e: Event): void {
-    const select = e.target as MdOutlinedSelect
-    const { value, name } = select
-    if (name !== 'datatype') {
-      return
-    }
-    this.setDataType(value)
-  }
-
-  /**
-   * A handler for any of the checkboxes in the `attributes` section.
-   * It calls the `setModelAttribute()` method.
-   */
-  protected handleAttributeOptionChange(e: Event): void {
-    const checkbox = e.target as MdCheckbox
-    const { name, checked } = checkbox
-    this.setModelAttribute(name, checked)
-  }
-
-  /**
-   * A handler for the default value select input change.
-   * Depending on the selected options it calls the `setDefaultValue()`
-   * with appropriate arguments.
-   */
-  protected handleDefaultValueChange(e: Event): void {
-    const { domainElement } = this
-    if (!domainElement) {
-      return
-    }
-    const select = e.target as MdOutlinedSelect
-    const { value = '' } = select
-    if (!value) {
-      this.setDefaultValue()
-      this.hasDefaultValueInput = false
-      return
-    }
-    if (value.startsWith('function.')) {
-      const fName = value.substring(9)
-      this.setDefaultValue(fName, 'function')
-      this.hasDefaultValueInput = false
-      return
-    }
-    if (value.startsWith('literal.')) {
-      const setValue = value.substring(8)
-      this.setDefaultValue(setValue, 'literal')
-      this.hasDefaultValueInput = false
-      return
-    }
-    if (value === 'literal') {
-      this.hasDefaultValueInput = true
-      this.setDefaultValue('', 'literal')
-    }
-  }
-
-  /**
-   * A handler for the format select input change.
-   * Calls the `setFormat()` with the appropriate value.
-   */
-  protected handleFormatChange(e: Event): void {
-    const { domainElement } = this
-    if (!domainElement) {
-      return
-    }
-    const select = e.target as MdOutlinedSelect
-    const { value } = select
-    this.setFormat(value)
-  }
-
-  /**
-   * Handles the toggle button for the enum editor.
-   * It calls the toggleEnum() whenever activated.
-   */
-  protected handleEnumOptionChange(): void {
-    this.toggleEnum()
-  }
-
-  /**
-   * A handler for the enum input change.
-   * It calls the `updateEnum()` method
-   */
-  protected handleEnumChange(e: Event): void {
-    const input = e.target as HTMLInputElement
-    if (!input.reportValidity()) {
-      return
-    }
-    const { value, dataset } = input
-    const index = Number(dataset.index)
-    if (isNaN(index)) {
-      return
-    }
-    this.updateEnum(index, value)
-  }
-
-  /**
-   * A handler for the add enum button.
-   */
-  protected handleAddEnum(): void {
-    this.addEnum()
-  }
-
-  /**
-   * A handler for the delete enum value button click.
-   */
-  protected handleDeleteEnum(e: Event): void {
-    const button = e.target as HTMLElement
-    const { dataset } = button
-    const index = Number(dataset.index)
-    if (isNaN(index)) {
-      return
-    }
-    this.deleteEnum(index)
-  }
-
-  /**
-   * Handles a change on the example input.
-   */
-  protected handleExampleChange(e: Event): void {
-    const node = e.target as HTMLInputElement
-    const { name, value } = node
-    if (value && !node.reportValidity()) {
-      return
-    }
-    if (name !== 'example') {
-      return
-    }
-    this.setExampleValue(value)
-  }
-
-  protected handleDelete(): void {
-    const { domainElement } = this
-    if (!domainElement) {
-      return
-    }
-    const { root } = this
-    if (!root) {
-      return
-    }
-    root.removeProperty(domainElement.key)
-    this.dispatchEvent(new CustomEvent('delete', { detail: { key: domainElement.key, kind: domainElement.kind } }))
-  }
-
-  protected override render(): TemplateResult | typeof nothing {
-    const { domainElement } = this
-    if (!domainElement) {
-      return nothing
-    }
-    return this.renderForm(domainElement)
-  }
-
-  protected renderForm(model: DomainProperty): TemplateResult {
-    return html`
-      <form name="property" @submit="${EventUtils.cancelEvent}" data-key="${model.key}" class="modeling-form">
-        ${this.renderMetaInputs(model)} ${this.renderAttributes(model)} ${this.renderSchema(model)}
-        ${this.renderDeleteButton()}
-      </form>
-    `
-  }
-
-  protected renderMetaInputs(model: DomainProperty): TemplateResult {
-    return html`
-      <div class="editor-section">
-        <div class="row">
-          <md-outlined-text-field
-            class="input"
-            name="name"
-            .value="${live(model.info.name || '')}"
-            label="Name"
-            required
-            @change="${this.handleMetaChange}"
-          ></md-outlined-text-field>
-          <md-icon-button type="button"><ui-icon icon="help"></ui-icon></md-icon-button>
-        </div>
-        <div class="row">
-          <md-outlined-text-field
-            class="input"
-            name="displayName"
-            .value="${live(model.info.displayName || '')}"
-            label="Display name (optional)"
-            @change="${this.handleMetaChange}"
-          ></md-outlined-text-field>
-          <md-icon-button type="button"><ui-icon icon="help"></ui-icon></md-icon-button>
-        </div>
-        <div class="row">
-          <md-outlined-text-field
-            class="input"
-            name="description"
-            .value="${live(model.info.description || '')}"
-            label="Description (optional)"
-            @change="${this.handleMetaChange}"
-          ></md-outlined-text-field>
-          <md-icon-button type="button"><ui-icon icon="help"></ui-icon></md-icon-button>
-        </div>
-      </div>
-    `
-  }
-
-  protected renderAttributes(model: DomainProperty): TemplateResult {
-    return html`<div class="editor-section">
-      <div class="section-title title-medium">Attributes</div>
-      ${this.renderDataTypeInput(model)} ${this.renderFormat(model)} ${this.renderAttributeOptions(model)}
-    </div>`
-  }
-
-  protected renderTaxonomy(): TemplateResult {
-    return html`<div class="editor-section"></div>`
-  }
-
-  protected renderSchema(model: DomainProperty): TemplateResult | typeof nothing {
-    if (model.type === 'binary') {
-      return nothing
-    }
-    let content: (TemplateResult | typeof nothing)[] | typeof nothing
-    switch (model.type) {
-      case 'string':
-        content = this.renderStringSchema(model)
-        break
-      case 'number':
-        content = this.renderNumberSchema(model)
-        break
-      case 'boolean':
-        content = this.renderBooleanSchema(model)
-        break
-      case 'date':
-        content = this.renderDateSchema(model)
-        break
-      case 'time':
-        content = this.renderTimeSchema(model)
-        break
-      case 'datetime':
-        content = this.renderDateTimeSchema(model)
-        break
-      // case 'binary':
-      //   content = this.renderBinarySchema(model)
-      //   break
-      default:
-        content = nothing
-    }
-    return html`<div class="editor-section">
-      <div class="section-title title-medium">Schema</div>
-      ${content}
-    </div>`
-  }
-
-  protected renderDataTypeInput(model: DomainProperty): TemplateResult {
-    const { type } = model
-    return html`<div class="row">
-      <md-outlined-select
-        label="Data Type"
-        class="input"
-        required
-        name="datatype"
-        menuPositioning="popover"
-        @change="${this.handleDataTypeChange}"
-      >
-        <md-select-option ?selected="${type === 'string'}" value="string">
-          <div slot="headline">String</div>
-        </md-select-option>
-        <md-select-option ?selected="${type === 'number'}" value="number">
-          <div slot="headline">Number</div>
-        </md-select-option>
-        <md-select-option ?selected="${type === 'boolean'}" value="boolean">
-          <div slot="headline">Boolean</div>
-        </md-select-option>
-        <md-select-option ?selected="${type === 'date'}" value="date">
-          <div slot="headline">Date</div>
-        </md-select-option>
-        <md-select-option ?selected="${type === 'time'}" value="time">
-          <div slot="headline">Time</div>
-        </md-select-option>
-        <md-select-option ?selected="${type === 'datetime'}" value="datetime">
-          <div slot="headline">Date and time</div>
-        </md-select-option>
-        <md-select-option ?selected="${type === 'binary'}" value="binary">
-          <div slot="headline">Binary</div>
-        </md-select-option>
-      </md-outlined-select>
-      <md-icon-button type="button"><ui-icon icon="help"></ui-icon></md-icon-button>
-    </div>`
-  }
-
-  protected renderAttributeOptions(model: DomainProperty): TemplateResult {
-    const { primary = false, index = false, required = false, multiple = false, readOnly = false } = model
-    return html`<div class="checkbox-group">
-      <div class="row">
-        <div class="input checkbox metadata">
-          <md-checkbox
-            id="att-identifier"
-            .checked="${primary}"
-            name="primary"
-            @change="${this.handleAttributeOptionChange}"
-          ></md-checkbox>
-          <div class="label">
-            <label for="att-identifier" class="body-medium">Identifier</label>
-            <span class="body-small meta">The primary key in the data store.</span>
-          </div>
-        </div>
-        <md-icon-button type="button"><ui-icon icon="help"></ui-icon></md-icon-button>
-      </div>
-      <div class="row">
-        <div class="input checkbox metadata">
-          <md-checkbox
-            id="att-index"
-            .checked="${index}"
-            name="index"
-            @change="${this.handleAttributeOptionChange}"
-          ></md-checkbox>
-          <div class="label">
-            <label for="att-index" class="body-medium">Search field</label>
-            <span class="body-small meta">Marks this field as index and enables searching on it.</span>
-          </div>
-        </div>
-        <md-icon-button type="button"><ui-icon icon="help"></ui-icon></md-icon-button>
-      </div>
-      <div class="row">
-        <div class="input checkbox">
-          <md-checkbox
-            id="att-required"
-            .checked="${required}"
-            name="required"
-            @change="${this.handleAttributeOptionChange}"
-          ></md-checkbox>
-          <div class="label">
-            <label for="att-required" class="body-medium">Required</label>
-          </div>
-        </div>
-        <md-icon-button type="button"><ui-icon icon="help"></ui-icon></md-icon-button>
-      </div>
-      <div class="row">
-        <div class="input checkbox metadata">
-          <md-checkbox
-            id="att-multiple"
-            .checked="${multiple}"
-            name="multiple"
-            @change="${this.handleAttributeOptionChange}"
-          ></md-checkbox>
-          <div class="label">
-            <label for="att-multiple" class="body-medium">Multiple values</label>
-            <span class="body-small meta">Creates an array of values.</span>
-          </div>
-        </div>
-        <md-icon-button type="button"><ui-icon icon="help"></ui-icon></md-icon-button>
-      </div>
-      <div class="row">
-        <div class="input checkbox metadata">
-          <md-checkbox
-            id="att-readOnly"
-            .checked="${readOnly}"
-            name="readOnly"
-            @change="${this.handleAttributeOptionChange}"
-          ></md-checkbox>
-          <div class="label">
-            <label for="att-readOnly" class="body-medium">Read only</label>
-            <span class="body-small meta">The value can only be set when object is created.</span>
-          </div>
-        </div>
-        <md-icon-button type="button"><ui-icon icon="help"></ui-icon></md-icon-button>
-      </div>
-    </div>`
-  }
-
-  protected renderStringSchema(model: DomainProperty): (TemplateResult | typeof nothing)[] {
-    return [
-      this.renderDefaultValueInput(model),
-      this.renderLiteralDefaultValueInput(model),
-      this.renderExampleValueInput(model),
-      this.renderEnumEditor(model),
-    ]
-  }
-
-  protected renderNumberSchema(model: DomainProperty): (TemplateResult | typeof nothing)[] {
-    return [
-      this.renderDefaultValueInput(model),
-      this.renderLiteralDefaultValueInput(model),
-      this.renderExampleValueInput(model),
-      this.renderEnumEditor(model),
-    ]
-  }
-
-  protected renderBooleanSchema(model: DomainProperty): (TemplateResult | typeof nothing)[] {
-    return [this.renderDefaultValueInput(model)]
-  }
-
-  protected renderDateSchema(model: DomainProperty): (TemplateResult | typeof nothing)[] {
-    return [
-      this.renderDefaultValueInput(model),
-      this.renderLiteralDefaultValueInput(model),
-      this.renderExampleValueInput(model),
-    ]
-  }
-
-  protected renderTimeSchema(model: DomainProperty): (TemplateResult | typeof nothing)[] {
-    return [
-      this.renderDefaultValueInput(model),
-      this.renderLiteralDefaultValueInput(model),
-      this.renderExampleValueInput(model),
-    ]
-  }
-
-  protected renderDateTimeSchema(model: DomainProperty): (TemplateResult | typeof nothing)[] {
-    return [
-      this.renderDefaultValueInput(model),
-      this.renderLiteralDefaultValueInput(model),
-      this.renderExampleValueInput(model),
-    ]
-  }
-
-  /**
-   * Renders the input for the default value.
-   *
-   * Note, when defining a new function, add support for it generation in the
-   * `src/modeling/value_generator.ts` file.
-   */
-  protected renderDefaultValueInput(model: DomainProperty): TemplateResult | typeof nothing {
-    const { type } = model
-    //  || type === 'any' || type === 'nil'
-    if (type === 'binary') {
-      return nothing
-    }
-    const schema = model.ensureSchema()
-    const { defaultValue } = schema
-    let isNone = true
-    let isLiteral = false
-    if (defaultValue) {
-      if (defaultValue.type === 'literal') {
-        isNone = false
-        isLiteral = true
-      } else if (defaultValue.value) {
-        isNone = false
-      }
-    }
-
-    let allowLiteral = false
-    const options: TemplateResult[] = [
-      html`<md-select-option ?selected="${isNone}" value="">
-        <div slot="headline">None</div>
-      </md-select-option>`,
-      html`<md-divider></md-divider>`,
-    ]
-    if (type === 'string') {
-      options.push(
-        html`<md-select-option ?selected="${defaultValue?.value === 'random'}" value="function.random">
-          <div slot="headline">Random string</div>
-          <div slot="supporting-text">Generates a random string.</div>
-        </md-select-option>`
-      )
-      options.push(
-        html`<md-select-option ?selected="${defaultValue?.value === 'uuid-v4'}" value="function.uuid-v4">
-          <div slot="headline">UUID</div>
-          <div slot="supporting-text">Random UUID v4 value.</div>
-        </md-select-option>`
-      )
-      allowLiteral = true
-    } else if (type === 'number') {
-      options.push(
-        html`<md-select-option ?selected="${defaultValue?.value === 'incremental'}" value="function.incremental">
-          <div slot="headline">Incremental</div>
-          <div slot="supporting-text">Increments the value with each new object.</div>
-        </md-select-option>`
-      )
-      allowLiteral = true
-    } else if (type === 'boolean') {
-      options.push(
-        html`<md-select-option ?selected="${defaultValue?.value === 'false'}" value="literal.false">
-          <div slot="headline">FALSE</div>
-        </md-select-option>`
-      )
-      options.push(
-        html`<md-select-option ?selected="${defaultValue?.value === 'true'}" value="literal.true">
-          <div slot="headline">TRUE</div>
-        </md-select-option>`
-      )
-    } else if (type === 'date') {
-      options.push(
-        html`<md-select-option ?selected="${defaultValue?.value === 'now'}" value="function.now">
-          <div slot="headline">Current date</div>
-          <div slot="supporting-text">YYYY-MM-DD format</div>
-        </md-select-option>`
-      )
-      allowLiteral = true
-    } else if (type === 'time') {
-      options.push(
-        html`<md-select-option ?selected="${defaultValue?.value === 'now'}" value="function.now">
-          <div slot="headline">Current time</div>
-          <div slot="supporting-text">HH:mm:ss format.</div>
-        </md-select-option>`
-      )
-      allowLiteral = true
-    } else if (type === 'datetime') {
-      options.push(
-        html`<md-select-option ?selected="${defaultValue?.value === 'now'}" value="function.now">
-          <div slot="headline">Current date and time</div>
-          <div slot="supporting-text">YYYY-MM-DDTHH:mm:ss format.</div>
-        </md-select-option>`
-      )
-      allowLiteral = true
-    }
-
-    if (allowLiteral) {
-      // options.push(html`<md-divider></md-divider>`)
-      options.push(
-        html`<md-select-option ?selected="${isLiteral}" value="literal">
-          <div slot="headline">Literal</div>
-          <div slot="supporting-text">Enter custom value.</div>
-        </md-select-option>`
-      )
-    }
-    const supportingText = 'Used when creating the object.'
-    return html`<div class="row">
-      <md-outlined-select
-        label="Default value"
-        class="input"
-        name="defaultValue"
-        menuPositioning="popover"
-        .supportingText="${supportingText}"
-        @change="${this.handleDefaultValueChange}"
-      >
-        ${options}
-      </md-outlined-select>
-      <md-icon-button type="button"><ui-icon icon="help"></ui-icon></md-icon-button>
-    </div>`
-  }
-
-  protected renderLiteralDefaultValueInput(model: DomainProperty): TemplateResult | typeof nothing {
-    if (!this.hasDefaultValueInput) {
-      return nothing
-    }
-    const schema = model.ensureSchema()
-    const { defaultValue } = schema
-    const currentValue = defaultValue?.value || ''
-    const info = this.schemaInputConfig
-    return html`<div class="row">
-      <md-outlined-text-field
-        class="input"
-        name="literalDefaultValue"
-        .value="${live(currentValue)}"
-        label="Literal value"
-        required
-        type="${info.type}"
-        pattern="${ifDefined(info.pattern)}"
-        min="${ifDefined(info.min)}"
-        max="${ifDefined(info.max)}"
-        step="${ifDefined(info.step)}"
-        .supportingText="${info.help || ''}"
-        @change="${this.handleMetaChange}"
-      ></md-outlined-text-field>
-      <md-icon-button type="button"><ui-icon icon="help"></ui-icon></md-icon-button>
-    </div>`
-  }
-
-  protected renderFormat(model: DomainProperty): TemplateResult | typeof nothing {
-    const { type } = model
-    if (type === 'number') {
-      return this.renderFormatInput(model, DataFormat.NumberFormats)
-    }
-    if (type === 'binary') {
-      return this.renderFormatInput(model, DataFormat.BinaryFormats)
-    }
-    return nothing
-  }
-
-  protected renderFormatInput(model: DomainProperty, formats: DataFormat.DomainPropertyFormat[]): TemplateResult {
-    const binding = model.getWebBinding()
-    const options = formats.map((format) => {
-      const info = getFormatInfo(format)
-      return html`<md-select-option ?selected="${format === binding.format}" value="${format}">
-        <div slot="headline">${info.label}</div>
-        <div slot="supporting-text">${info.help}</div>
-      </md-select-option>`
-    })
-    return html`<div class="row">
-      <md-outlined-select
-        label="Format"
-        class="input"
-        name="format"
-        menuPositioning="popover"
-        @change="${this.handleFormatChange}"
-      >
-        ${options}
-      </md-outlined-select>
-      <md-icon-button type="button"><ui-icon icon="help"></ui-icon></md-icon-button>
-    </div>`
-  }
-
-  /**
-   * Renders the enum editing editor section.
-   */
-  protected renderEnumEditor(model: DomainProperty): TemplateResult {
-    return html`<div class="row">
-        ${this.renderEnumToggle()}
-        <md-icon-button type="button"><ui-icon icon="help"></ui-icon></md-icon-button>
-      </div>
-      ${this.renderEnumValues(model)} ${this.renderAddEnumButton()}`
-  }
-
-  /**
-   * Renders the enum toggle button.
-   */
-  protected renderEnumToggle(): TemplateResult {
-    return html`<div class="input enum">
-      <md-switch .selected="${this.enumEnabled}" id="enumValues" @change="${this.handleEnumOptionChange}"></md-switch>
-      <label for="enumValues" class="body-medium">Pre-defined values (enum)</label>
-    </div>`
-  }
-
-  /**
-   * Renders the list of enum inputs or nothing when not required.
-   */
-  protected renderEnumValues(model: DomainProperty): TemplateResult[] | typeof nothing {
-    if (!this.enumEnabled) {
-      return nothing
-    }
-    const schema = model.ensureSchema()
-    // We use the default value to render the first input when no enum was set.
-    const { enum: enumValues = [''] } = schema
-    if (!enumValues.length) {
-      return nothing
-    }
-    return enumValues.map((value, index) => this.renderEnumItem(value, index))
-  }
-
-  /**
-   * Renders the text field to edit an enum value.
-   * @param value The enum value to render in the input
-   * @param index The enum's index in the enum array.
-   */
-  protected renderEnumItem(value: string, index: number): TemplateResult {
-    const info = this.schemaInputConfig
-    return html`<div class="enum-input row">
-      <md-outlined-text-field
-        class="input"
-        name="enum"
-        .value="${live(value)}"
-        label="Value"
-        data-index="${index}"
-        @change="${this.handleEnumChange}"
-        type="${info.type}"
-        pattern="${ifDefined(info.pattern)}"
-        min="${ifDefined(info.min)}"
-        max="${ifDefined(info.max)}"
-        step="${ifDefined(info.step)}"
-        .supportingText="${info.help || ''}"
-      ></md-outlined-text-field>
-      <md-icon-button type="button" data-index="${index}" @click="${this.handleDeleteEnum}"
-        ><ui-icon icon="deleteOutline"></ui-icon
-      ></md-icon-button>
-    </div>`
-  }
-
-  /**
-   * Renders the "add" value value button.
-   */
-  protected renderAddEnumButton(): TemplateResult | typeof nothing {
-    if (!this.enumEnabled) {
-      return nothing
-    }
-    return html`<div class="enum-input row">
-      <ui-outlined-button @click="${this.handleAddEnum}">
-        <ui-icon slot="icon" icon="add"></ui-icon>Add
-      </ui-outlined-button>
-    </div>`
-  }
-
-  protected renderExampleValueInput(model: DomainProperty): TemplateResult {
-    const schema = model.ensureSchema()
-    const { examples = [] } = schema
-    const [example = ''] = examples
-    const info = this.schemaInputConfig
-    return html`<div class="row">
-      <md-outlined-text-field
-        class="input"
-        name="example"
-        .value="${live(example)}"
-        label="Example value"
-        @change="${this.handleExampleChange}"
-        pattern="${ifDefined(info.pattern)}"
-        min="${ifDefined(info.min)}"
-        max="${ifDefined(info.max)}"
-        step="${ifDefined(info.step)}"
-        .supportingText="${info.help || 'Used with documentation.'}"
-      ></md-outlined-text-field>
-      <md-icon-button type="button"><ui-icon icon="help"></ui-icon></md-icon-button>
-    </div>`
-  }
-
-  protected renderDeleteButton(): TemplateResult {
-    return html`<div class="property-delete row">
-      <ui-outlined-button @click="${this.handleDelete}" title="Delete this property" type="button">
-        <ui-icon slot="icon" icon="deleteOutline"></ui-icon>Delete
-      </ui-outlined-button>
-    </div>`
-  }
-}