@api-client/ui 0.0.17 → 0.1.0

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

@@ -1,1096 +0,0 @@
-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 { EventUtils, DomainProperty, DataFormat } from '@api-client/core/browser.js';
-import { ModelingElement } from './ModelingElement.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';
-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')) {
-                this.computeEntity();
-            }
-            super.willUpdate(cp);
-        }
-        async computeEntity() {
-            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() {
-            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 === 'literalDefaultValue') {
-                this.setDefaultValue(value, 'literal');
-                return;
-            }
-            if (!['name', 'displayName', 'description'].includes(name)) {
-                return;
-            }
-            if (name === 'name' && !value) {
-                return;
-            }
-            domainElement.info[name] = value;
-            this.notifyChange();
-        }
-        /**
-         * A handler for the data type select input change
-         */
-        handleDataTypeChange(e) {
-            const select = e.target;
-            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.
-         */
-        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.target;
-            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);
-        }
-        handleDelete() {
-            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 } }));
-        }
-        render() {
-            const { domainElement } = this;
-            if (!domainElement) {
-                return nothing;
-            }
-            return this.renderForm(domainElement);
-        }
-        renderForm(model) {
-            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>
-    `;
-        }
-        renderMetaInputs(model) {
-            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>
-    `;
-        }
-        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 { 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>`;
-        }
-        renderAttributeOptions(model) {
-            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>`;
-        }
-        renderStringSchema(model) {
-            return [
-                this.renderDefaultValueInput(model),
-                this.renderLiteralDefaultValueInput(model),
-                this.renderExampleValueInput(model),
-                this.renderEnumEditor(model),
-            ];
-        }
-        renderNumberSchema(model) {
-            return [
-                this.renderDefaultValueInput(model),
-                this.renderLiteralDefaultValueInput(model),
-                this.renderExampleValueInput(model),
-                this.renderEnumEditor(model),
-            ];
-        }
-        renderBooleanSchema(model) {
-            return [this.renderDefaultValueInput(model)];
-        }
-        renderDateSchema(model) {
-            return [
-                this.renderDefaultValueInput(model),
-                this.renderLiteralDefaultValueInput(model),
-                this.renderExampleValueInput(model),
-            ];
-        }
-        renderTimeSchema(model) {
-            return [
-                this.renderDefaultValueInput(model),
-                this.renderLiteralDefaultValueInput(model),
-                this.renderExampleValueInput(model),
-            ];
-        }
-        renderDateTimeSchema(model) {
-            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.
-         */
-        renderDefaultValueInput(model) {
-            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 = [
-                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>`;
-        }
-        renderLiteralDefaultValueInput(model) {
-            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>`;
-        }
-        renderFormat(model) {
-            const { type } = model;
-            if (type === 'number') {
-                return this.renderFormatInput(model, DataFormat.NumberFormats);
-            }
-            if (type === 'binary') {
-                return this.renderFormatInput(model, DataFormat.BinaryFormats);
-            }
-            return nothing;
-        }
-        renderFormatInput(model, formats) {
-            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.
-         */
-        renderEnumEditor(model) {
-            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.
-         */
-        renderEnumToggle() {
-            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.
-         */
-        renderEnumValues(model) {
-            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.
-         */
-        renderEnumItem(value, index) {
-            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.
-         */
-        renderAddEnumButton() {
-            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>`;
-        }
-        renderExampleValueInput(model) {
-            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>`;
-        }
-        renderDeleteButton() {
-            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>`;
-        }
-    };
-})();
-/**
- * `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 DomainPropertyEditor;
-//# sourceMappingURL=DomainPropertyEditor.js.map