@api-client/ui 0.5.57 → 0.6.0

package/build/src/modeling/internals/DomainPropertyEditor.js

@@ -0,0 +1,1478 @@
+import { __esDecorate, __runInitializers } from "tslib";
+import { nothing, html } from 'lit';
+import { state } from 'lit/decorators.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { live } from 'lit/directives/live.js';
+import { getFormatInfo, getPropertyInputOptions } from '../lib/ui_mapping.js';
+import { DomainProperty } from '@api-client/core/modeling/DomainProperty.js';
+import { cancelEvent } from '@api-client/core/lib/events/Utils.js';
+import { BinaryFormats, NumberFormats } from '@api-client/core/modeling/DataFormat.js';
+import { SemanticScope, SemanticType, getSemanticsByCategory, } from '@api-client/core/modeling/Semantics.js';
+import { ModelingElement } from './ModelingElement.js';
+import { renderHelp } from '../../help/render.js';
+import { PasswordTaxonomy } from '../dialogs/PasswordTaxonomy.js';
+import { MarkdownTaxonomy } from '../dialogs/MarkdownTaxonomy.js';
+import { HtmlTaxonomy } from '../dialogs/HtmlTaxonomy.js';
+import { CurrencyTaxonomy } from '../dialogs/CurrencyTaxonomy.js';
+import { StatusTaxonomy } from '../dialogs/StatusTaxonomy.js';
+import { SkuTaxonomy } from '../dialogs/SkuTaxonomy.js';
+import { EmailTaxonomy } from '../dialogs/EmailTaxonomy.js';
+import { PhoneTaxonomy } from '../dialogs/PhoneTaxonomy.js';
+import { UrlTaxonomy } from '../dialogs/UrlTaxonomy.js';
+import { PublicUniqueNameTaxonomy } from '../dialogs/PublicUniqueNameTaxonomy.js';
+import { GeospatialCoordinatesTaxonomy } from '../dialogs/GeospatialCoordinatesTaxonomy.js';
+import { CalculatedTaxonomy } from '../dialogs/CalculatedTaxonomy.js';
+let DomainPropertyEditor = (() => {
+    let _classSuper = ModelingElement;
+    let _domainElement_decorators;
+    let _domainElement_initializers = [];
+    let _domainElement_extraInitializers = [];
+    let _hasDefaultValueInput_decorators;
+    let _hasDefaultValueInput_initializers = [];
+    let _hasDefaultValueInput_extraInitializers = [];
+    let _enumEnabled_decorators;
+    let _enumEnabled_initializers = [];
+    let _enumEnabled_extraInitializers = [];
+    return class DomainPropertyEditor extends _classSuper {
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _domainElement_decorators = [state()];
+            _hasDefaultValueInput_decorators = [state()];
+            _enumEnabled_decorators = [state()];
+            __esDecorate(this, null, _domainElement_decorators, { kind: "accessor", name: "domainElement", static: false, private: false, access: { has: obj => "domainElement" in obj, get: obj => obj.domainElement, set: (obj, value) => { obj.domainElement = value; } }, metadata: _metadata }, _domainElement_initializers, _domainElement_extraInitializers);
+            __esDecorate(this, null, _hasDefaultValueInput_decorators, { kind: "accessor", name: "hasDefaultValueInput", static: false, private: false, access: { has: obj => "hasDefaultValueInput" in obj, get: obj => obj.hasDefaultValueInput, set: (obj, value) => { obj.hasDefaultValueInput = value; } }, metadata: _metadata }, _hasDefaultValueInput_initializers, _hasDefaultValueInput_extraInitializers);
+            __esDecorate(this, null, _enumEnabled_decorators, { kind: "accessor", name: "enumEnabled", static: false, private: false, access: { has: obj => "enumEnabled" in obj, get: obj => obj.enumEnabled, set: (obj, value) => { obj.enumEnabled = value; } }, metadata: _metadata }, _enumEnabled_initializers, _enumEnabled_extraInitializers);
+            if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        }
+        #domainElement_accessor_storage = __runInitializers(this, _domainElement_initializers, void 0);
+        /**
+         * The `DomainProperty` object being edited.
+         * This is updated when the `selected` property changes.
+         */
+        get domainElement() { return this.#domainElement_accessor_storage; }
+        set domainElement(value) { this.#domainElement_accessor_storage = value; }
+        #hasDefaultValueInput_accessor_storage = (__runInitializers(this, _domainElement_extraInitializers), __runInitializers(this, _hasDefaultValueInput_initializers, false
+        /**
+         * Whether the enum options are enabled.
+         * When `true` the user can add, update, and delete enum values.
+         */
+        ));
+        /**
+         * 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.
+         */
+        get hasDefaultValueInput() { return this.#hasDefaultValueInput_accessor_storage; }
+        set hasDefaultValueInput(value) { this.#hasDefaultValueInput_accessor_storage = value; }
+        #enumEnabled_accessor_storage = (__runInitializers(this, _hasDefaultValueInput_extraInitializers), __runInitializers(this, _enumEnabled_initializers, 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.
+         */
+        ));
+        /**
+         * Whether the enum options are enabled.
+         * When `true` the user can add, update, and delete enum values.
+         */
+        get enumEnabled() { return this.#enumEnabled_accessor_storage; }
+        set enumEnabled(value) { this.#enumEnabled_accessor_storage = value; }
+        /**
+         * 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.
+         */
+        cachedEnumValues = __runInitializers(this, _enumEnabled_extraInitializers);
+        /**
+         * A cached value of the schema-sensitive input configuration.
+         * These are the default value and enum value inputs.
+         */
+        cachedSchemaInputConfig;
+        /**
+         * A configuration for a schema-sensitive HTML input.
+         */
+        get schemaInputConfig() {
+            return this.cachedSchemaInputConfig || { type: 'text' };
+        }
+        willUpdate(cp) {
+            if (cp.has('selected') || cp.has('root') || cp.has('namespace')) {
+                this.computeProperty();
+            }
+            super.willUpdate(cp);
+        }
+        async computeProperty() {
+            const { root, selected, namespace } = this;
+            this.domainElement = undefined;
+            if (!root || !selected) {
+                return;
+            }
+            await this.updateComplete;
+            const value = root.findProperty(selected, namespace);
+            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() {
+            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, value) {
+            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 = '') {
+            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) {
+            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, type = 'function') {
+            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) {
+            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, value) {
+            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) {
+            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) {
+            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.
+         */
+        updateSchemaInputConfig() {
+            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`
+         */
+        handleMetaChange(e) {
+            const { domainElement } = this;
+            if (!domainElement) {
+                return;
+            }
+            const node = e.target;
+            const { name, value } = node;
+            if (value && !node.reportValidity()) {
+                return;
+            }
+            if (!['name', 'displayName', 'description'].includes(name)) {
+                return;
+            }
+            if (name === 'name' && !value) {
+                return;
+            }
+            domainElement.info[name] = value;
+            this.notifyChange();
+        }
+        handleSchemaChange(e) {
+            const { domainElement } = this;
+            if (!domainElement) {
+                return;
+            }
+            const node = e.target;
+            const { name, value, checked } = node;
+            if ((value || checked) && !node.reportValidity()) {
+                return;
+            }
+            if (name === 'literalDefaultValue') {
+                this.setDefaultValue(value, 'literal');
+                return;
+            }
+            if (['minimum', 'maximum', 'multipleOf'].includes(name)) {
+                const schema = domainElement.ensureSchema();
+                schema[name] = Number(value) || undefined;
+            }
+            else if (['exclusiveMinimum', 'exclusiveMaximum'].includes(name)) {
+                const schema = domainElement.ensureSchema();
+                schema[name] = checked;
+            }
+            this.updateSchemaInputConfig();
+            this.notifyChange();
+        }
+        /**
+         * A handler for the data type select input change
+         */
+        handleDataTypeChange(e) {
+            const select = e.target;
+            const { value, name } = select;
+            if (name !== 'datatype' || !value) {
+                return;
+            }
+            this.setDataType(value);
+        }
+        /**
+         * A handler for any of the checkboxes in the `attributes` section.
+         * It calls the `setModelAttribute()` method.
+         */
+        handleAttributeOptionChange(e) {
+            const checkbox = e.target;
+            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.
+         */
+        handleDefaultValueChange(e) {
+            const { domainElement } = this;
+            if (!domainElement) {
+                return;
+            }
+            const select = e.target;
+            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.
+         */
+        handleFormatChange(e) {
+            const { domainElement } = this;
+            if (!domainElement) {
+                return;
+            }
+            const select = e.target;
+            const { value } = select;
+            this.setFormat(value);
+        }
+        /**
+         * Handles the toggle button for the enum editor.
+         * It calls the toggleEnum() whenever activated.
+         */
+        handleEnumOptionChange() {
+            this.toggleEnum();
+        }
+        /**
+         * A handler for the enum input change.
+         * It calls the `updateEnum()` method
+         */
+        handleEnumChange(e) {
+            const input = e.target;
+            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.
+         */
+        handleAddEnum() {
+            this.addEnum();
+        }
+        /**
+         * A handler for the delete enum value button click.
+         */
+        handleDeleteEnum(e) {
+            const button = e.currentTarget;
+            const { dataset } = button;
+            const index = Number(dataset.index);
+            if (isNaN(index)) {
+                return;
+            }
+            this.deleteEnum(index);
+        }
+        /**
+         * Handles a change on the example input.
+         */
+        handleExampleChange(e) {
+            const node = e.target;
+            const { name, value } = node;
+            if (value && !node.reportValidity()) {
+                return;
+            }
+            if (name !== 'example') {
+                return;
+            }
+            this.setExampleValue(value);
+        }
+        // protected handleTaxonomyChange(e: Event): void {
+        //   const node = e.currentTarget as MdOutlinedSelect
+        //   const { value } = node
+        //   if (!value) {
+        //     return
+        //   }
+        //   node.displayText = ''
+        //   this.domainElement?.addSemantic({
+        //     id: value as SemanticType,
+        //   })
+        //   this.requestUpdate()
+        // }
+        handleDeleteTaxonomy(e) {
+            const button = e.currentTarget;
+            const { id } = button.dataset;
+            if (!id) {
+                return;
+            }
+            this.domainElement?.removeSemantic(id);
+        }
+        handleTaxonomySelect(e) {
+            const { value } = e.detail.item.dataset;
+            if (value) {
+                this.domainElement?.addSemantic({
+                    id: value,
+                });
+                this.requestUpdate();
+            }
+        }
+        handleConfigureTaxonomy(e) {
+            const button = e.currentTarget;
+            const { id } = button.dataset;
+            if (!id) {
+                return;
+            }
+            const element = this.domainElement;
+            if (!element) {
+                return;
+            }
+            let dialog;
+            if (id === SemanticType.Password) {
+                dialog = new PasswordTaxonomy(element);
+            }
+            else if (id === SemanticType.Markdown) {
+                dialog = new MarkdownTaxonomy(element);
+            }
+            else if (id === SemanticType.HTML) {
+                dialog = new HtmlTaxonomy(element);
+            }
+            else if (id === SemanticType.Status) {
+                dialog = new StatusTaxonomy(element);
+            }
+            else if (id === SemanticType.Currency) {
+                dialog = new CurrencyTaxonomy(element);
+            }
+            else if (id === SemanticType.SKU) {
+                dialog = new SkuTaxonomy(element);
+            }
+            else if (id === SemanticType.Email) {
+                dialog = new EmailTaxonomy(element);
+            }
+            else if (id === SemanticType.Phone) {
+                dialog = new PhoneTaxonomy(element);
+            }
+            else if (id === SemanticType.URL) {
+                dialog = new UrlTaxonomy(element);
+            }
+            else if (id === SemanticType.PublicUniqueName) {
+                dialog = new PublicUniqueNameTaxonomy(element);
+            }
+            else if (id === SemanticType.GeospatialCoordinates) {
+                dialog = new GeospatialCoordinatesTaxonomy(element);
+            }
+            else if (id === SemanticType.Calculated) {
+                dialog = new CalculatedTaxonomy(element);
+            }
+            else {
+                throw new TypeError(`Unsupported taxonomy type: ${id}.`);
+            }
+            dialog.run();
+        }
+        render() {
+            const { domainElement } = this;
+            if (!domainElement) {
+                return nothing;
+            }
+            return this.renderForm(domainElement);
+        }
+        renderForm(model) {
+            return html `
+      <form name="property" @submit="${cancelEvent}" data-key="${model.key}" class="modeling-form">
+        ${this.renderMetaInputs(model)} ${this.renderAttributes(model)} ${this.renderSchema(model)}
+        ${this.renderDataGovernanceSection(model)}
+      </form>
+    `;
+        }
+        renderMetaInputs(model) {
+            const disabled = !this.canEdit;
+            const formatError = 'Name must start with a letter or underscore and can only contain letters, numbers, and underscores.';
+            return html `
+      <div class="editor-section">
+        <div class="row input-row">
+          <ui-outlined-text-field
+            class="input"
+            name="name"
+            .value="${live(model.info.name || '')}"
+            label="Name"
+            required
+            minLength="2"
+            maxLength="59"
+            pattern="[a-zA-Z_][a-zA-Z0-9_]+"
+            .invalidText="${formatError}"
+            ?disabled="${disabled}"
+            @change="${this.handleMetaChange}"
+          ></ui-outlined-text-field>
+          ${renderHelp('property', 'name-input')}
+        </div>
+        <div class="row input-row">
+          <ui-outlined-text-field
+            class="input"
+            name="displayName"
+            .value="${live(model.info.displayName || '')}"
+            label="Display name (optional)"
+            ?disabled="${disabled}"
+            @change="${this.handleMetaChange}"
+          ></ui-outlined-text-field>
+          ${renderHelp('property', 'displayName-input')}
+        </div>
+        <div class="row input-row">
+          <ui-outlined-text-field
+            class="input"
+            name="description"
+            .value="${live(model.info.description || '')}"
+            label="Description (optional)"
+            ?disabled="${disabled}"
+            @change="${this.handleMetaChange}"
+          ></ui-outlined-text-field>
+          ${renderHelp('property', 'description-input')}
+        </div>
+      </div>
+    `;
+        }
+        renderAttributes(model) {
+            return html `<div class="editor-section">
+      <div class="section-title title-medium">Attributes</div>
+      ${this.renderDataTypeInput(model)} ${this.renderFormat(model)} ${this.renderAttributeOptions(model)}
+    </div>`;
+        }
+        renderTaxonomy() {
+            return html `<div class="editor-section"></div>`;
+        }
+        renderSchema(model) {
+            if (model.type === 'binary') {
+                return nothing;
+            }
+            let content;
+            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>`;
+        }
+        renderDataTypeInput(model) {
+            const disabled = !this.canEdit;
+            const { type } = model;
+            return html `<div class="row input-row">
+      <ui-select
+        label="Data Type"
+        class="input"
+        required
+        name="datatype"
+        ?disabled="${disabled}"
+        @change="${this.handleDataTypeChange}"
+      >
+        <ui-option ?selected="${type === 'string'}" value="string">
+          <div>String</div>
+        </ui-option>
+        <ui-option ?selected="${type === 'number'}" value="number">
+          <div>Number</div>
+        </ui-option>
+        <ui-option ?selected="${type === 'boolean'}" value="boolean">
+          <div>Boolean</div>
+        </ui-option>
+        <ui-option ?selected="${type === 'date'}" value="date">
+          <div>Date</div>
+        </ui-option>
+        <ui-option ?selected="${type === 'time'}" value="time">
+          <div>Time</div>
+        </ui-option>
+        <ui-option ?selected="${type === 'datetime'}" value="datetime">
+          <div>Date and time</div>
+        </ui-option>
+        <ui-option ?selected="${type === 'binary'}" value="binary">
+          <div>Binary</div>
+        </ui-option>
+      </ui-select>
+      ${renderHelp('property', 'datatype-select')}
+    </div>`;
+        }
+        renderAttributeOptions(model) {
+            const { primary = false, index = false, required = false, multiple = false, readOnly = false } = model;
+            const disabled = !this.canEdit;
+            return html `<div class="checkbox-group">
+      <div class="row">
+        <div class="input checkbox metadata">
+          <ui-checkbox
+            id="att-identifier"
+            .checked="${primary}"
+            name="primary"
+            @change="${this.handleAttributeOptionChange}"
+            ?disabled="${disabled}"
+          ></ui-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>
+        ${renderHelp('property', 'primary-checkbox')}
+      </div>
+      <div class="row">
+        <div class="input checkbox metadata">
+          <ui-checkbox
+            id="att-index"
+            .checked="${index}"
+            name="index"
+            ?disabled="${disabled}"
+            @change="${this.handleAttributeOptionChange}"
+          ></ui-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>
+        ${renderHelp('property', 'index-checkbox')}
+      </div>
+      <div class="row">
+        <div class="input checkbox">
+          <ui-checkbox
+            id="att-required"
+            .checked="${required}"
+            name="required"
+            ?disabled="${disabled}"
+            @change="${this.handleAttributeOptionChange}"
+          ></ui-checkbox>
+          <div class="label">
+            <label for="att-required" class="body-medium">Required</label>
+          </div>
+        </div>
+        ${renderHelp('property', 'required-checkbox')}
+      </div>
+      <div class="row">
+        <div class="input checkbox metadata">
+          <ui-checkbox
+            id="att-multiple"
+            .checked="${multiple}"
+            name="multiple"
+            ?disabled="${disabled}"
+            @change="${this.handleAttributeOptionChange}"
+          ></ui-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>
+        ${renderHelp('property', 'multiple-checkbox')}
+      </div>
+      <div class="row">
+        <div class="input checkbox metadata">
+          <ui-checkbox
+            id="att-readOnly"
+            .checked="${readOnly}"
+            name="readOnly"
+            ?disabled="${disabled}"
+            @change="${this.handleAttributeOptionChange}"
+          ></ui-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>
+        ${renderHelp('property', 'readOnly-checkbox')}
+      </div>
+    </div>`;
+        }
+        renderStringSchema(model) {
+            return [
+                this.renderDefaultValueInput(model),
+                this.renderLiteralDefaultValueInput(model),
+                this.renderExampleValueInput(model),
+                this.renderEnumEditor(model),
+                this.renderMinimumValueInput(model),
+                this.renderExclusiveMinimumInput(model),
+                this.renderMaximumValueInput(model),
+                this.renderExclusiveMaximumInput(model),
+            ];
+        }
+        renderNumberSchema(model) {
+            return [
+                this.renderMultipleOfInput(model),
+                this.renderDefaultValueInput(model),
+                this.renderLiteralDefaultValueInput(model),
+                this.renderExampleValueInput(model),
+                this.renderEnumEditor(model),
+                this.renderMinimumValueInput(model),
+                this.renderExclusiveMinimumInput(model),
+                this.renderMaximumValueInput(model),
+                this.renderExclusiveMaximumInput(model),
+            ];
+        }
+        renderBooleanSchema(model) {
+            return [this.renderDefaultValueInput(model)];
+        }
+        renderDateSchema(model) {
+            return [
+                this.renderDefaultValueInput(model),
+                this.renderLiteralDefaultValueInput(model),
+                this.renderExampleValueInput(model),
+                this.renderMinimumValueInput(model),
+                this.renderExclusiveMinimumInput(model),
+                this.renderMaximumValueInput(model),
+                this.renderExclusiveMaximumInput(model),
+            ];
+        }
+        renderTimeSchema(model) {
+            return [
+                this.renderDefaultValueInput(model),
+                this.renderLiteralDefaultValueInput(model),
+                this.renderExampleValueInput(model),
+                this.renderMinimumValueInput(model),
+                this.renderExclusiveMinimumInput(model),
+                this.renderMaximumValueInput(model),
+                this.renderExclusiveMaximumInput(model),
+            ];
+        }
+        renderDateTimeSchema(model) {
+            return [
+                this.renderDefaultValueInput(model),
+                this.renderLiteralDefaultValueInput(model),
+                this.renderExampleValueInput(model),
+                this.renderMinimumValueInput(model),
+                this.renderExclusiveMinimumInput(model),
+                this.renderMaximumValueInput(model),
+                this.renderExclusiveMaximumInput(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.
+         */
+        renderDefaultValueInput(model) {
+            const { type } = model;
+            //  || type === 'any' || type === 'nil'
+            if (type === 'binary') {
+                return nothing;
+            }
+            const schema = model.schema || {};
+            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 = [
+                html `<ui-option ?selected="${isNone}" value="">
+        <div>None</div>
+      </ui-option>`,
+                html `<ui-divider></ui-divider>`,
+            ];
+            if (type === 'string') {
+                options.push(html `<ui-option ?selected="${defaultValue?.value === 'random'}" value="function.random">
+          <div>Random string</div>
+          <div slot="supporting-text">Generates a random string.</div>
+        </ui-option>`);
+                options.push(html `<ui-option ?selected="${defaultValue?.value === 'uuid-v4'}" value="function.uuid-v4">
+          <div>UUID</div>
+          <div slot="supporting-text">Random UUID v4 value.</div>
+        </ui-option>`);
+                allowLiteral = true;
+            }
+            else if (type === 'number') {
+                options.push(html `<ui-option ?selected="${defaultValue?.value === 'incremental'}" value="function.incremental">
+          <div>Incremental</div>
+          <div slot="supporting-text">Increments the value with each new object.</div>
+        </ui-option>`);
+                allowLiteral = true;
+            }
+            else if (type === 'boolean') {
+                options.push(html `<ui-option ?selected="${defaultValue?.value === 'false'}" value="literal.false">
+          <div>FALSE</div>
+        </ui-option>`);
+                options.push(html `<ui-option ?selected="${defaultValue?.value === 'true'}" value="literal.true">
+          <div>TRUE</div>
+        </ui-option>`);
+            }
+            else if (type === 'date') {
+                options.push(html `<ui-option ?selected="${defaultValue?.value === 'now'}" value="function.now">
+          <div>Current date</div>
+          <div slot="supporting-text">YYYY-MM-DD format</div>
+        </ui-option>`);
+                allowLiteral = true;
+            }
+            else if (type === 'time') {
+                options.push(html `<ui-option ?selected="${defaultValue?.value === 'now'}" value="function.now">
+          <div>Current time</div>
+          <div slot="supporting-text">HH:mm:ss format.</div>
+        </ui-option>`);
+                allowLiteral = true;
+            }
+            else if (type === 'datetime') {
+                options.push(html `<ui-option ?selected="${defaultValue?.value === 'now'}" value="function.now">
+          <div>Current date and time</div>
+          <div slot="supporting-text">YYYY-MM-DDTHH:mm:ss format.</div>
+        </ui-option>`);
+                allowLiteral = true;
+            }
+            if (allowLiteral) {
+                // options.push(html`<ui-divider></ui-divider>`)
+                options.push(html `<ui-option ?selected="${isLiteral}" value="literal">
+          <div>Literal</div>
+          <div slot="supporting-text">Enter custom value.</div>
+        </ui-option>`);
+            }
+            const disabled = !this.canEdit;
+            const supportingText = 'Used when creating the object.';
+            return html `<div class="row input-row">
+      <ui-select
+        label="Default value"
+        class="input"
+        name="defaultValue"
+        .supportingText="${supportingText}"
+        ?disabled="${disabled}"
+        @change="${this.handleDefaultValueChange}"
+      >
+        ${options}
+      </ui-select>
+      ${renderHelp('property', 'defaultValue-select')}
+    </div>`;
+        }
+        renderLiteralDefaultValueInput(model) {
+            if (!this.hasDefaultValueInput) {
+                return nothing;
+            }
+            const schema = model.schema || {};
+            const { defaultValue } = schema;
+            const currentValue = defaultValue?.value || '';
+            const info = this.schemaInputConfig;
+            const disabled = !this.canEdit;
+            return html `<div class="row input-row">
+      <ui-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.handleSchemaChange}"
+        ?disabled="${disabled}"
+      ></ui-outlined-text-field>
+      ${renderHelp('property', 'literalDefaultValue-input')}
+    </div>`;
+        }
+        renderFormat(model) {
+            const { type } = model;
+            if (type === 'number') {
+                return this.renderFormatInput(model, NumberFormats);
+            }
+            if (type === 'binary') {
+                return this.renderFormatInput(model, BinaryFormats);
+            }
+            return nothing;
+        }
+        renderFormatInput(model, formats) {
+            const binding = model.getWebBinding();
+            const options = formats.map((format) => {
+                const info = getFormatInfo(format);
+                return html `<ui-option ?selected="${format === binding.format}" value="${format}">
+        <div>${info.label}</div>
+        <div slot="supporting-text">${info.help}</div>
+      </ui-option>`;
+            });
+            const disabled = !this.canEdit;
+            return html `<div class="row input-row">
+      <ui-select
+        label="Format"
+        class="input"
+        name="format"
+        ?disabled="${disabled}"
+        @change="${this.handleFormatChange}"
+      >
+        ${options}
+      </ui-select>
+      ${renderHelp('property', 'format-select')}
+    </div>`;
+        }
+        /**
+         * Renders the enum editing editor section.
+         */
+        renderEnumEditor(model) {
+            return html `<div class="row">${this.renderEnumToggle()} ${renderHelp('property', 'enumValues-switch')}</div>
+      ${this.renderEnumValues(model)} ${this.renderAddEnumButton()}`;
+        }
+        /**
+         * Renders the enum toggle button.
+         */
+        renderEnumToggle() {
+            const disabled = !this.canEdit;
+            return html `<div class="input enum">
+      <ui-switch
+        .checked="${this.enumEnabled}"
+        id="enumValues"
+        ?disabled="${disabled}"
+        @change="${this.handleEnumOptionChange}"
+      ></ui-switch>
+      <label for="enumValues" class="body-medium">Pre-defined values (enum)</label>
+    </div>`;
+        }
+        /**
+         * Renders the list of enum inputs or nothing when not required.
+         */
+        renderEnumValues(model) {
+            if (!this.enumEnabled) {
+                return nothing;
+            }
+            const schema = model.schema || {};
+            // 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.
+         */
+        renderEnumItem(value, index) {
+            const info = this.schemaInputConfig;
+            const disabled = !this.canEdit;
+            return html `<div class="enum-input row">
+      <ui-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)}"
+        ?disabled="${disabled}"
+        .supportingText="${info.help || ''}"
+      ></ui-outlined-text-field>
+      <ui-icon-button type="button" data-index="${index}" @click="${this.handleDeleteEnum}"
+        ><ui-icon icon="deleteOutline"></ui-icon
+      ></ui-icon-button>
+    </div>`;
+        }
+        /**
+         * Renders the "add" value value button.
+         */
+        renderAddEnumButton() {
+            if (!this.enumEnabled || !this.canEdit) {
+                return nothing;
+            }
+            return html `<div class="enum-input row">
+      <ui-button color="outlined" @click="${this.handleAddEnum}">
+        <ui-icon slot="icon" icon="add"></ui-icon>Add
+      </ui-button>
+    </div>`;
+        }
+        renderExampleValueInput(model) {
+            const schema = model.schema || {};
+            const { examples = [] } = schema;
+            const [example = ''] = examples;
+            const info = this.schemaInputConfig;
+            const disabled = !this.canEdit;
+            return html `<div class="row input-row">
+      <ui-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.'}"
+        .type="${info.type}"
+        ?disabled="${disabled}"
+      ></ui-outlined-text-field>
+      ${renderHelp('property', 'example-input')}
+    </div>`;
+        }
+        renderMinimumValueInput(model) {
+            const schema = model.schema || {};
+            const { minimum } = schema;
+            let label = 'Minimum length';
+            if (model.type === 'number') {
+                label = 'Minimum value';
+            }
+            else if (model.type === 'date' || model.type === 'datetime') {
+                label = 'Minimum date';
+            }
+            else if (model.type === 'time') {
+                label = 'Minimum time';
+            }
+            const info = this.schemaInputConfig;
+            const disabled = !this.canEdit;
+            return html `<div class="row input-row">
+      <ui-outlined-text-field
+        class="input"
+        name="minimum"
+        .value="${live(minimum ?? '')}"
+        label="${label}"
+        type="${info.type}"
+        pattern="${ifDefined(info.pattern)}"
+        min="${ifDefined(info.min)}"
+        max="${ifDefined(info.max)}"
+        step="${ifDefined(info.step)}"
+        .supportingText="${info.help || ''}"
+        @change="${this.handleSchemaChange}"
+        ?disabled="${disabled}"
+      ></ui-outlined-text-field>
+      ${renderHelp('property', 'schema:minimum-input')}
+    </div>`;
+        }
+        renderExclusiveMinimumInput(model) {
+            const schema = model.schema || {};
+            const { exclusiveMinimum = false } = schema;
+            const disabled = !this.canEdit;
+            return html `<div class="checkbox row">
+      <div class="input checkbox metadata">
+        <ui-checkbox
+          id="exclusive-minimum"
+          .checked="${exclusiveMinimum}"
+          name="exclusiveMinimum"
+          @change="${this.handleSchemaChange}"
+          ?disabled="${disabled}"
+        ></ui-checkbox>
+        <div class="label">
+          <label for="exclusive-minimum" class="body-medium">Exclude minimum value</label>
+          <span class="body-small meta">The value must be greater than, but not equal to, the minimum.</span>
+        </div>
+      </div>
+      ${renderHelp('property', 'schema:exclusive-minimum-checkbox')}
+    </div>`;
+        }
+        renderExclusiveMaximumInput(model) {
+            const schema = model.schema || {};
+            const { exclusiveMaximum } = schema;
+            const disabled = !this.canEdit;
+            return html `<div class="checkbox row">
+      <div class="input checkbox metadata">
+        <ui-checkbox
+          id="exclusive-maximum"
+          .checked="${exclusiveMaximum || false}"
+          name="exclusiveMaximum"
+          @change="${this.handleSchemaChange}"
+          ?disabled="${disabled}"
+        ></ui-checkbox>
+        <div class="label">
+          <label for="exclusive-maximum" class="body-medium">Exclude maximum value</label>
+          <span class="body-small meta">The value must be less than, but not equal to, the maximum.</span>
+        </div>
+      </div>
+      ${renderHelp('property', 'schema:exclusive-maximum-checkbox')}
+    </div>`;
+        }
+        renderMaximumValueInput(model) {
+            const schema = model.schema || {};
+            const { maximum } = schema;
+            let label = 'Maximum length';
+            if (model.type === 'number') {
+                label = 'Maximum value';
+            }
+            else if (model.type === 'date' || model.type === 'datetime') {
+                label = 'Maximum date';
+            }
+            else if (model.type === 'time') {
+                label = 'Maximum time';
+            }
+            const info = this.schemaInputConfig;
+            const disabled = !this.canEdit;
+            return html `<div class="row input-row">
+      <ui-outlined-text-field
+        class="input"
+        name="maximum"
+        .value="${live(maximum ?? '')}"
+        label="${label}"
+        type="${info.type}"
+        pattern="${ifDefined(info.pattern)}"
+        min="${ifDefined(info.min)}"
+        max="${ifDefined(info.max)}"
+        step="${ifDefined(info.step)}"
+        .supportingText="${info.help || ''}"
+        @change="${this.handleSchemaChange}"
+        ?disabled="${disabled}"
+      ></ui-outlined-text-field>
+      ${renderHelp('property', 'schema:maximum-input')}
+    </div>`;
+        }
+        renderMultipleOfInput(model) {
+            const schema = model.schema || {};
+            const { multipleOf } = schema;
+            const disabled = !this.canEdit;
+            const supportingText = 'The number must be divisible by this value. E.g., 2 for even numbers.';
+            return html `<div class="row input-row">
+      <ui-outlined-text-field
+        class="input"
+        name="multipleOf"
+        .value="${live(multipleOf || '')}"
+        label="Value increment"
+        .supportingText="${supportingText}"
+        type="number"
+        @change="${this.handleSchemaChange}"
+        ?disabled="${disabled}"
+      ></ui-outlined-text-field>
+      ${renderHelp('property', 'schema:multipleOf-input')}
+    </div>`;
+        }
+        renderDataGovernanceSection(model) {
+            // TODO: Add classification UI (data tagging)
+            const tax = this.renderTaxonomyInput(model);
+            if (tax === nothing) {
+                return nothing;
+            }
+            return html `<div class="editor-section">
+      <div class="section-title title-medium">Data Governance</div>
+      ${tax}
+    </div>`;
+        }
+        renderTaxonomyInput(model) {
+            const allCategories = getSemanticsByCategory(SemanticScope.Property);
+            const selectedSemantics = [];
+            const filteredCategories = {};
+            // Filter categories and semantics, excluding already selected ones
+            for (const category of Object.keys(allCategories)) {
+                const semantics = allCategories[category].filter((s) => {
+                    if (s.applicableDataTypes && !s.applicableDataTypes.includes(model.type)) {
+                        return false;
+                    }
+                    // Check if this semantic is already selected
+                    if (model.semantics.some((ms) => ms.id === s.id)) {
+                        selectedSemantics.push(s);
+                        return false;
+                    }
+                    return true;
+                });
+                if (semantics.length > 0) {
+                    filteredCategories[category] = semantics;
+                }
+            }
+            if (Object.keys(filteredCategories).length === 0 && selectedSemantics.length === 0) {
+                return nothing;
+            }
+            return html `<div class="taxonomy">
+        <ui-button
+          id="taxonomy-menu-anchor"
+          popoverTarget="taxonomy-menu"
+          color="outlined"
+          aria-label="Add property taxonomy"
+          ?disabled="${!this.canEdit}"
+        >
+          <ui-icon slot="icon">add</ui-icon>Add taxonomy
+        </ui-button>
+        <ui-menu popover="auto" id="taxonomy-menu" class="taxonomy-menu" @select="${this.handleTaxonomySelect}">
+          ${this.renderTaxonomyCategories(filteredCategories)}
+        </ui-menu>
+        ${renderHelp('property', 'taxonomy-select')}
+      </div>
+      ${this.renderSelectedSemantics(selectedSemantics)}`;
+        }
+        renderSelectedSemantics(selected) {
+            if (selected.length === 0) {
+                return nothing;
+            }
+            const items = selected.map((semantic) => this.renderTaxonomyItem(semantic));
+            return html `<div class="enabled-taxonomy">${items}</div>`;
+        }
+        renderTaxonomyItem(semantic) {
+            const canEdit = this.canEdit;
+            return html `<div class="taxonomy-item">
+      <span class="label body-large">${semantic.displayName}</span>
+      ${semantic.hasConfig
+                ? html `<ui-button
+            color="text"
+            data-id="${semantic.id}"
+            @click="${this.handleConfigureTaxonomy}"
+            ?disabled="${!canEdit}"
+            >Configure</ui-button
+          >`
+                : nothing}
+      ${canEdit
+                ? html `<ui-icon-button
+            type="button"
+            data-id="${semantic.id}"
+            @click="${this.handleDeleteTaxonomy}"
+            ?disabled="${!canEdit}"
+            ><ui-icon icon="deleteOutline"></ui-icon
+          ></ui-icon-button>`
+                : nothing}
+    </div>`;
+        }
+        renderTaxonomyCategories(categories) {
+            const items = [];
+            const entries = Object.entries(categories);
+            const cLen = entries.length;
+            entries.forEach(([categoryName, semantics], categoryIndex) => {
+                // Add category title as a non-selectable menu item
+                items.push(html ` <div class="menu-category-title title-small">${categoryName}</div> `);
+                // Add semantics from this category
+                for (const semantic of semantics) {
+                    items.push(html `
+          <ui-menu-item data-value="${semantic.id}" lines="two">
+            <div>${semantic.displayName}</div>
+            <div slot="supporting-text">${semantic.description}</div>
+          </ui-menu-item>
+        `);
+                }
+                // Add divider after each category except the last one
+                if (categoryIndex < cLen - 1) {
+                    items.push(html `<ui-divider></ui-divider>`);
+                }
+            });
+            return items;
+        }
+    };
+})();
+/**
+ * Dispatched when the user deletes a property.
+ *
+ * @event DomainPropertyEditor#delete
+ * @type {CustomEvent}
+ * @property {object} detail - The event details.
+ * @property {string} detail.key - The key of the parent entity to navigate to.
+ * @property {string} detail.kind - The kind of the parent entity. It will always be `DomainEntityKind`.
+ */
+/**
+ * `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>
+ * ```
+ *
+ * @fires DomainPropertyEditor#delete - A custom event with the `key` and `type` when a property was selected.
+ */
+export default DomainPropertyEditor;
+//# sourceMappingURL=DomainPropertyEditor.js.map