@api-client/ui 0.0.15 → 0.0.17

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

@@ -0,0 +1,535 @@
+import { __esDecorate, __runInitializers } from "tslib";
+import { nothing, html } from 'lit';
+import { state } from 'lit/decorators.js';
+import { live } from 'lit/directives/live.js';
+import { DomainAssociation, DomainEntityKind, EventUtils } from '@api-client/core/browser.js';
+import { ModelingElement } from './ModelingElement.js';
+import { Events } from '../../../events/Events.js';
+import { DATA_DOMAIN_BROWSE } from '../../../apps/quick-api/Intents.js';
+import { bound } from '../../../decorators/bound.js';
+import { IntentFlags, IntentResult } from '../../../core/ActivityManager.js';
+import '../../../md/icons/ui-icon.js';
+import '../../../md/button/ui-filled-tonal-button.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/checkbox/checkbox.js';
+import '@material/web/switch/switch.js';
+import '@material/web/chips/chip-set.js';
+import '@material/web/chips/input-chip.js';
+let DomainAssociationEditor = (() => {
+    let _classSuper = ModelingElement;
+    let _instanceExtraInitializers = [];
+    let _domainElement_decorators;
+    let _domainElement_initializers = [];
+    let _domainElement_extraInitializers = [];
+    let _handleSelectTargetEntity_decorators;
+    return class DomainAssociationEditor extends _classSuper {
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _domainElement_decorators = [state()];
+            _handleSelectTargetEntity_decorators = [bound];
+            __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, _handleSelectTargetEntity_decorators, { kind: "method", name: "handleSelectTargetEntity", static: false, private: false, access: { has: obj => "handleSelectTargetEntity" in obj, get: obj => obj.handleSelectTargetEntity }, metadata: _metadata }, null, _instanceExtraInitializers);
+            if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        }
+        #domainElement_accessor_storage = (__runInitializers(this, _instanceExtraInitializers), __runInitializers(this, _domainElement_initializers, void 0));
+        /**
+         * The `DomainAssociation` 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; }
+        willUpdate(cp) {
+            if (cp.has('selected')) {
+                this.computeAssociation();
+            }
+            super.willUpdate(cp);
+        }
+        async computeAssociation() {
+            const { root, selected } = this;
+            this.domainElement = undefined;
+            if (!root || !selected) {
+                this.domainElement = undefined;
+                return;
+            }
+            // MD components have issues updating values
+            // so we need to wait for the updateComplete to remove them.
+            await this.updateComplete;
+            this.domainElement = root.findAssociation(selected);
+        }
+        /**
+         * 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 (!DomainAssociation.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 value of the association's `schema.linked` property.
+         * @param value The value to set the `linked` property to.
+         */
+        setSchemaLinked(value) {
+            const { domainElement } = this;
+            if (!domainElement) {
+                return;
+            }
+            const schema = domainElement.ensureSchema();
+            schema.linked = value;
+            this.notifyChange();
+            this.requestUpdate();
+        }
+        /**
+         * A handler for the one of the metadata inputs value change.
+         *
+         * It supports the following fields:
+         *
+         * - `name`
+         * - `displayName`
+         * - `description`
+         */
+        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();
+        }
+        /**
+         * 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);
+        }
+        handleLinkedChange(e) {
+            const checkbox = e.target;
+            const { name, selected } = checkbox;
+            if (name !== 'linked') {
+                return;
+            }
+            this.setSchemaLinked(selected);
+        }
+        handleSelectTarget() {
+            Events.Intent.startActivityForResult({
+                action: DATA_DOMAIN_BROWSE,
+                flags: IntentFlags.Modal | IntentFlags.ForResult,
+                data: {
+                    reason: 'pick',
+                    namespaceKey: this.domainElement?.domain.key,
+                    allowed: ['entity'],
+                    withExternal: false,
+                    withRecent: true,
+                },
+            }, this.handleSelectTargetEntity, this);
+        }
+        handleSelectTargetEntity(result, intent) {
+            if (result === IntentResult.RESULT_CANCELED) {
+                return;
+            }
+            const info = intent.data;
+            if (info.result !== 'ok') {
+                return;
+            }
+            const { kind, selected, namespace } = info;
+            if (!kind || !selected || !namespace) {
+                return;
+            }
+            const { domainElement, root } = this;
+            if (!domainElement || !root) {
+                return;
+            }
+            if (kind !== DomainEntityKind) {
+                return;
+            }
+            this.addTarget(selected, namespace);
+        }
+        handleDeleteTarget(e) {
+            const button = e.target;
+            const { key, namespace } = button.dataset;
+            if (!key || !namespace) {
+                return;
+            }
+            const { domainElement, root } = this;
+            if (!domainElement || !root) {
+                return;
+            }
+            let entity;
+            if (root.key === namespace) {
+                entity = root.findEntity(key);
+            }
+            else {
+                // const foreign = root.foreign.find((item) => item.key === namespace)
+                // if (!foreign) {
+                //   throw new Error(`Namespace ${namespace} not found.`)
+                // }
+                // entity = foreign.findEntity(key)
+                throw new Error(`Foreign namespaces are not supported yet.`);
+            }
+            if (entity) {
+                domainElement.removeTarget(entity);
+                this.notifyChange();
+                this.requestUpdate();
+            }
+        }
+        handleNavigateTarget(e) {
+            const item = e.currentTarget;
+            const { key } = item.dataset;
+            if (!key) {
+                return;
+            }
+            const detail = {
+                key,
+                kind: DomainEntityKind,
+            };
+            this.dispatchEvent(new CustomEvent('openentity', { detail }));
+        }
+        handleUnionTypeChange(e) {
+            const select = e.target;
+            const { value } = select;
+            const { domainElement } = this;
+            if (!domainElement) {
+                return;
+            }
+            const schema = domainElement.ensureSchema();
+            schema.unionType = value;
+            this.notifyChange();
+            this.requestUpdate();
+        }
+        handleTargetDragEnter(e) {
+            const dt = e.dataTransfer;
+            if (!dt) {
+                return;
+            }
+            const isDraggedEntity = dt.types.includes(DomainEntityKind.toLowerCase());
+            if (!isDraggedEntity) {
+                return;
+            }
+            const zone = e.currentTarget;
+            zone.classList.add('drop-zone');
+            dt.dropEffect = 'link';
+            dt.effectAllowed = 'link';
+        }
+        handleTargetDragOver(e) {
+            const dt = e.dataTransfer;
+            if (!dt) {
+                return;
+            }
+            const isDraggedEntity = dt.types.includes(DomainEntityKind.toLowerCase());
+            if (!isDraggedEntity) {
+                return;
+            }
+            e.preventDefault();
+        }
+        handleTargetDragLeave(e) {
+            const dt = e.dataTransfer;
+            if (!dt) {
+                return;
+            }
+            const zone = e.currentTarget;
+            zone.classList.remove('drop-zone');
+        }
+        handleTargetDrop(e) {
+            const dt = e.dataTransfer;
+            if (!dt) {
+                return;
+            }
+            const zone = e.currentTarget;
+            zone.classList.remove('drop-zone');
+            const key = dt.getData('text/key');
+            const kind = dt.getData('text/kind');
+            const ns = dt.getData('text/namespace');
+            if (!key || kind !== DomainEntityKind) {
+                return;
+            }
+            this.addTarget(key, ns || undefined);
+        }
+        addTarget(key, nsKey) {
+            const { domainElement, root } = this;
+            if (!domainElement || !root) {
+                return;
+            }
+            if (!nsKey || root.key === nsKey) {
+                const entity = root.findEntity(key);
+                if (entity) {
+                    domainElement.addTarget(entity);
+                }
+            }
+            else {
+                throw new Error('Foreign namespaces are not supported yet.');
+                // const foreign = root.foreign.find((item) => item.key === nsKey)
+                // if (!foreign) {
+                //   throw new Error(`Namespace ${nsKey} not found.`)
+                // }
+                // const entity = foreign.findEntity(key)
+                // if (!entity) {
+                //   throw new Error(`Entity ${key} not found in foreign namespace ${nsKey}.`)
+                // }
+                // domainElement.addTarget(entity)
+            }
+            this.notifyChange();
+            this.requestUpdate();
+        }
+        handleDelete() {
+            const { domainElement } = this;
+            if (!domainElement) {
+                return;
+            }
+            const { root } = this;
+            if (!root) {
+                return;
+            }
+            root.removeAssociation(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="association" @submit="${EventUtils.cancelEvent}" data-key="${model.key}" class="modeling-form">
+        ${this.renderMetaInputs(model)} ${this.renderAttributes(model)} ${this.renderTargetEntitySection(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.renderAttributeOptions(model)}
+    </div>`;
+        }
+        renderAttributeOptions(model) {
+            const { required = false, multiple = false } = model;
+            return html `<div class="checkbox-group">
+      <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>`;
+        }
+        renderSchema(model) {
+            const { linked = false } = model.schema || {};
+            return html `<div class="editor-section">
+      <div class="section-title title-medium">Schema</div>
+      <div class="row">
+        <div class="input">
+          <md-switch .selected="${linked}" name="linked" id="linked" @change="${this.handleLinkedChange}"></md-switch>
+          <label for="linked" class="body-medium">Use the reference key to access schema.</label>
+        </div>
+        <md-icon-button type="button"><ui-icon icon="help"></ui-icon></md-icon-button>
+      </div>
+    </div>`;
+        }
+        renderTargetEntitySection(model) {
+            return html `<div
+      class="editor-section"
+      @dragenter="${this.handleTargetDragEnter}"
+      @dragover="${this.handleTargetDragOver}"
+      @dragleave="${this.handleTargetDragLeave}"
+      @drop="${this.handleTargetDrop}"
+    >
+      <div class="section-title title-medium">Target entity</div>
+      ${this.renderChooseTargetButton()} ${this.renderTargetEntities(model)}
+    </div>`;
+        }
+        /**
+         * Renders the section with the current target entity.
+         *
+         * @todo: The UI only allows to select one target entity.
+         *        We need to add a way to select multiple target entities.
+         */
+        renderTargetEntities(model) {
+            const targets = [...model.listTargets()];
+            if (!targets.length) {
+                return nothing;
+            }
+            return html `${this.renderTargetItems(targets)} ${targets.length > 1 ? this.renderUnionType(model) : nothing}`;
+        }
+        renderChooseTargetButton() {
+            return html `<div class="row">
+      <ui-filled-tonal-button type="button" @click="${this.handleSelectTarget}"
+        >Choose target entity</ui-filled-tonal-button
+      >
+      <md-icon-button type="button"><ui-icon icon="help"></ui-icon></md-icon-button>
+    </div>`;
+        }
+        renderTargetItems(targets) {
+            if (!targets.length) {
+                return nothing;
+            }
+            return html `<md-chip-set>
+      ${targets.map((item) => {
+                const label = item.info.getLabel();
+                return html `<md-input-chip
+          class="target-chip"
+          data-key="${item.key}"
+          data-namespace="${item.domain.key}"
+          remove-only
+          title="Open the association target"
+          aria-label="Open the association target ${label}"
+          @remove="${this.handleDeleteTarget}"
+          @click="${this.handleNavigateTarget}"
+          >${label}</md-input-chip
+        >`;
+            })}
+    </md-chip-set> `;
+        }
+        renderUnionType(model) {
+            const { schema } = model;
+            const unionType = schema?.unionType || 'anyOf';
+            const supportingText = 'Used with multiple entities.';
+            return html `<div class="row">
+      <md-outlined-select
+        label="Union type"
+        class="input"
+        name="unionType"
+        menuPositioning="popover"
+        .supportingText="${supportingText}"
+        @change="${this.handleUnionTypeChange}"
+      >
+        <md-select-option ?selected="${unionType === 'allOf'}" value="allOf">
+          <div slot="headline">All of</div>
+          <div slot="supporting-text">Combines all fields into a single schema.</div>
+        </md-select-option>
+        <md-select-option ?selected="${unionType === 'anyOf'}" value="anyOf">
+          <div slot="headline">Any of (default)</div>
+          <div slot="supporting-text">Any of the schemas are valid (separately).</div>
+        </md-select-option>
+        <md-select-option ?selected="${unionType === 'oneOf'}" value="oneOf">
+          <div slot="headline">One of</div>
+          <div slot="supporting-text">Same as Any of, but different validation rules.</div>
+        </md-select-option>
+      </md-outlined-select>
+      <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>`;
+        }
+        constructor() {
+            super(...arguments);
+            __runInitializers(this, _domainElement_extraInitializers);
+        }
+    };
+})();
+/**
+ * Dispatched when the user wants to navigate to a parent entity.
+ *
+ * @event DomainAssociationEditor#openentity
+ * @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`.
+ */
+/**
+ * An element that specializes in editing properties of a domain association.
+ *
+ * @fires startactivityforresult - Dispatched when the user clicks on the "pick" button.
+ * @fires change - Dispatched when the user changes the value of one of the inputs.
+ * @fires DomainAssociationEditor#openentity - A custom event with the `key` and `type` when a property was selected.
+ */
+export default DomainAssociationEditor;
+//# sourceMappingURL=DomainAssociationEditor.js.map

package/build/src/elements/modeling/internals/DomainAssociationEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DomainAssociationEditor.js","sourceRoot":"","sources":["../../../../../src/elements/modeling/internals/DomainAssociationEditor.ts"],"names":[],"mappings":"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","sourcesContent":["import { nothing, type TemplateResult, type PropertyValues, html } from 'lit'\nimport { state } from 'lit/decorators.js'\nimport { live } from 'lit/directives/live.js'\nimport { DomainAssociation, DomainEntity, DomainEntityKind, EventUtils } from '@api-client/core/browser.js'\nimport { ModelingElement } from './ModelingElement.js'\nimport type { MdCheckbox } from '@material/web/checkbox/checkbox.js'\nimport type { MdSwitch } from '@material/web/switch/switch.js'\nimport { Events } from '../../../events/Events.js'\nimport { DATA_DOMAIN_BROWSE } from '../../../apps/quick-api/Intents.js'\nimport { bound } from '../../../decorators/bound.js'\nimport { IntentFlags, Intent, IntentResult } from '../../../core/ActivityManager.js'\nimport type { BrowseDataDomainResult } from '../../../apps/activities/BrowseDataDomainActivity.js'\nimport type { EntitySelectDetail } from '../types.js'\n\nimport '../../../md/icons/ui-icon.js'\nimport '../../../md/button/ui-filled-tonal-button.js'\nimport '../../../md/button/ui-outlined-button.js'\nimport '@material/web/textfield/outlined-text-field.js'\nimport '@material/web/iconbutton/icon-button.js'\nimport '@material/web/checkbox/checkbox.js'\nimport '@material/web/switch/switch.js'\nimport '@material/web/chips/chip-set.js'\nimport '@material/web/chips/input-chip.js'\n\n/**\n * Dispatched when the user wants to navigate to a parent entity.\n *\n * @event DomainAssociationEditor#openentity\n * @type {CustomEvent}\n * @property {object} detail - The event details.\n * @property {string} detail.key - The key of the parent entity to navigate to.\n * @property {string} detail.kind - The kind of the parent entity. It will always be `DomainEntityKind`.\n */\n\n/**\n * An element that specializes in editing properties of a domain association.\n *\n * @fires startactivityforresult - Dispatched when the user clicks on the \"pick\" button.\n * @fires change - Dispatched when the user changes the value of one of the inputs.\n * @fires DomainAssociationEditor#openentity - A custom event with the `key` and `type` when a property was selected.\n */\nexport default class DomainAssociationEditor extends ModelingElement {\n  /**\n   * The `DomainAssociation` object being edited.\n   * This is updated when the `selected` property changes.\n   */\n  @state() private accessor domainElement: DomainAssociation | undefined\n\n  protected override willUpdate(cp: PropertyValues<this>): void {\n    if (cp.has('selected')) {\n      this.computeAssociation()\n    }\n    super.willUpdate(cp)\n  }\n\n  protected async computeAssociation(): Promise<void> {\n    const { root, selected } = this\n    this.domainElement = undefined\n    if (!root || !selected) {\n      this.domainElement = undefined\n      return\n    }\n    // MD components have issues updating values\n    // so we need to wait for the updateComplete to remove them.\n    await this.updateComplete\n    this.domainElement = root.findAssociation(selected)\n  }\n\n  /**\n   * Sets the value of one of the \"attribute\" fields.\n   * These are the checkboxes located in the \"Attributes\" section.\n   *\n   * @param name The name of the attribute to set.\n   * @param value The boolean option to set as the value.\n   * @throws {TypeError} When the passed name is not a valid attribute name.\n   * @throws {TypeError} When the passed value is not a boolean value.\n   * @fires change - Dispatched when an attribute value is updated.\n   */\n  setModelAttribute(name: string, value: boolean): void {\n    if (!DomainAssociation.isValidAttribute(name)) {\n      throw new TypeError(`Invalid attribute name: ${name}.`)\n    }\n    if (typeof value !== 'boolean') {\n      throw new TypeError(`Invalid attribute value: ${value}.`)\n    }\n    const { domainElement } = this\n    if (!domainElement) {\n      return\n    }\n    domainElement[name] = value\n    this.notifyChange()\n    this.requestUpdate()\n  }\n\n  /**\n   * Sets the value of the association's `schema.linked` property.\n   * @param value The value to set the `linked` property to.\n   */\n  setSchemaLinked(value: boolean): void {\n    const { domainElement } = this\n    if (!domainElement) {\n      return\n    }\n    const schema = domainElement.ensureSchema()\n    schema.linked = value\n    this.notifyChange()\n    this.requestUpdate()\n  }\n\n  /**\n   * A handler for the one of the metadata inputs value change.\n   *\n   * It supports the following fields:\n   *\n   * - `name`\n   * - `displayName`\n   * - `description`\n   */\n  protected handleMetaChange(e: Event): void {\n    const { domainElement } = this\n    if (!domainElement) {\n      return\n    }\n    const node = e.target as HTMLInputElement\n    const { name, value } = node\n    if (value && !node.reportValidity()) {\n      return\n    }\n    if (!['name', 'displayName', 'description'].includes(name as string)) {\n      return\n    }\n    if (name === 'name' && !value) {\n      return\n    }\n    domainElement.info[name as 'name' | 'description' | 'displayName'] = value\n    this.notifyChange()\n  }\n\n  /**\n   * A handler for any of the checkboxes in the `attributes` section.\n   * It calls the `setModelAttribute()` method.\n   */\n  protected handleAttributeOptionChange(e: Event): void {\n    const checkbox = e.target as MdCheckbox\n    const { name, checked } = checkbox\n    this.setModelAttribute(name, checked)\n  }\n\n  protected handleLinkedChange(e: Event): void {\n    const checkbox = e.target as MdSwitch\n    const { name, selected } = checkbox\n    if (name !== 'linked') {\n      return\n    }\n    this.setSchemaLinked(selected)\n  }\n\n  protected handleSelectTarget(): void {\n    Events.Intent.startActivityForResult(\n      {\n        action: DATA_DOMAIN_BROWSE,\n        flags: IntentFlags.Modal | IntentFlags.ForResult,\n        data: {\n          reason: 'pick',\n          namespaceKey: this.domainElement?.domain.key,\n          allowed: ['entity'],\n          withExternal: false,\n          withRecent: true,\n        },\n      },\n      this.handleSelectTargetEntity,\n      this\n    )\n  }\n\n  @bound\n  protected handleSelectTargetEntity(result: IntentResult, intent: Intent): void {\n    if (result === IntentResult.RESULT_CANCELED) {\n      return\n    }\n    const info = intent.data as BrowseDataDomainResult\n    if (info.result !== 'ok') {\n      return\n    }\n    const { kind, selected, namespace } = info\n    if (!kind || !selected || !namespace) {\n      return\n    }\n    const { domainElement, root } = this\n    if (!domainElement || !root) {\n      return\n    }\n    if (kind !== DomainEntityKind) {\n      return\n    }\n    this.addTarget(selected, namespace)\n  }\n\n  protected handleDeleteTarget(e: Event): void {\n    const button = e.target as HTMLButtonElement\n    const { key, namespace } = button.dataset\n    if (!key || !namespace) {\n      return\n    }\n    const { domainElement, root } = this\n    if (!domainElement || !root) {\n      return\n    }\n    let entity: DomainEntity | undefined\n    if (root.key === namespace) {\n      entity = root.findEntity(key)\n    } else {\n      // const foreign = root.foreign.find((item) => item.key === namespace)\n      // if (!foreign) {\n      //   throw new Error(`Namespace ${namespace} not found.`)\n      // }\n      // entity = foreign.findEntity(key)\n      throw new Error(`Foreign namespaces are not supported yet.`)\n    }\n    if (entity) {\n      domainElement.removeTarget(entity)\n      this.notifyChange()\n      this.requestUpdate()\n    }\n  }\n\n  protected handleNavigateTarget(e: Event): void {\n    const item = e.currentTarget as HTMLElement\n    const { key } = item.dataset\n    if (!key) {\n      return\n    }\n    const detail: EntitySelectDetail = {\n      key,\n      kind: DomainEntityKind,\n    }\n    this.dispatchEvent(new CustomEvent('openentity', { detail }))\n  }\n\n  protected handleUnionTypeChange(e: Event): void {\n    const select = e.target as HTMLSelectElement\n    const { value } = select\n    const { domainElement } = this\n    if (!domainElement) {\n      return\n    }\n    const schema = domainElement.ensureSchema()\n    schema.unionType = value as 'allOf' | 'anyOf' | 'oneOf' | 'not'\n    this.notifyChange()\n    this.requestUpdate()\n  }\n\n  protected handleTargetDragEnter(e: DragEvent): void {\n    const dt = e.dataTransfer\n    if (!dt) {\n      return\n    }\n    const isDraggedEntity = dt.types.includes(DomainEntityKind.toLowerCase())\n    if (!isDraggedEntity) {\n      return\n    }\n    const zone = e.currentTarget as HTMLElement\n    zone.classList.add('drop-zone')\n    dt.dropEffect = 'link'\n    dt.effectAllowed = 'link'\n  }\n\n  protected handleTargetDragOver(e: DragEvent): void {\n    const dt = e.dataTransfer\n    if (!dt) {\n      return\n    }\n    const isDraggedEntity = dt.types.includes(DomainEntityKind.toLowerCase())\n    if (!isDraggedEntity) {\n      return\n    }\n    e.preventDefault()\n  }\n\n  protected handleTargetDragLeave(e: DragEvent): void {\n    const dt = e.dataTransfer\n    if (!dt) {\n      return\n    }\n    const zone = e.currentTarget as HTMLElement\n    zone.classList.remove('drop-zone')\n  }\n\n  protected handleTargetDrop(e: DragEvent): void {\n    const dt = e.dataTransfer\n    if (!dt) {\n      return\n    }\n    const zone = e.currentTarget as HTMLElement\n    zone.classList.remove('drop-zone')\n    const key = dt.getData('text/key')\n    const kind = dt.getData('text/kind')\n    const ns = dt.getData('text/namespace')\n    if (!key || kind !== DomainEntityKind) {\n      return\n    }\n    this.addTarget(key, ns || undefined)\n  }\n\n  protected addTarget(key: string, nsKey?: string): void {\n    const { domainElement, root } = this\n    if (!domainElement || !root) {\n      return\n    }\n    if (!nsKey || root.key === nsKey) {\n      const entity = root.findEntity(key)\n      if (entity) {\n        domainElement.addTarget(entity)\n      }\n    } else {\n      throw new Error('Foreign namespaces are not supported yet.')\n      // const foreign = root.foreign.find((item) => item.key === nsKey)\n      // if (!foreign) {\n      //   throw new Error(`Namespace ${nsKey} not found.`)\n      // }\n      // const entity = foreign.findEntity(key)\n      // if (!entity) {\n      //   throw new Error(`Entity ${key} not found in foreign namespace ${nsKey}.`)\n      // }\n      // domainElement.addTarget(entity)\n    }\n    this.notifyChange()\n    this.requestUpdate()\n  }\n\n  protected handleDelete(): void {\n    const { domainElement } = this\n    if (!domainElement) {\n      return\n    }\n    const { root } = this\n    if (!root) {\n      return\n    }\n    root.removeAssociation(domainElement.key)\n    this.dispatchEvent(new CustomEvent('delete', { detail: { key: domainElement.key, kind: domainElement.kind } }))\n  }\n\n  protected override render(): TemplateResult | typeof nothing {\n    const { domainElement } = this\n    if (!domainElement) {\n      return nothing\n    }\n    return this.renderForm(domainElement)\n  }\n\n  protected renderForm(model: DomainAssociation): TemplateResult {\n    return html`\n      <form name=\"association\" @submit=\"${EventUtils.cancelEvent}\" data-key=\"${model.key}\" class=\"modeling-form\">\n        ${this.renderMetaInputs(model)} ${this.renderAttributes(model)} ${this.renderTargetEntitySection(model)}\n        ${this.renderSchema(model)} ${this.renderDeleteButton()}\n      </form>\n    `\n  }\n\n  protected renderMetaInputs(model: DomainAssociation): TemplateResult {\n    return html`\n      <div class=\"editor-section\">\n        <div class=\"row\">\n          <md-outlined-text-field\n            class=\"input\"\n            name=\"name\"\n            .value=\"${live(model.info.name || '')}\"\n            label=\"Name\"\n            required\n            @change=\"${this.handleMetaChange}\"\n          ></md-outlined-text-field>\n          <md-icon-button type=\"button\"><ui-icon icon=\"help\"></ui-icon></md-icon-button>\n        </div>\n        <div class=\"row\">\n          <md-outlined-text-field\n            class=\"input\"\n            name=\"displayName\"\n            .value=\"${live(model.info.displayName || '')}\"\n            label=\"Display name (optional)\"\n            @change=\"${this.handleMetaChange}\"\n          ></md-outlined-text-field>\n          <md-icon-button type=\"button\"><ui-icon icon=\"help\"></ui-icon></md-icon-button>\n        </div>\n        <div class=\"row\">\n          <md-outlined-text-field\n            class=\"input\"\n            name=\"description\"\n            .value=\"${live(model.info.description || '')}\"\n            label=\"Description (optional)\"\n            @change=\"${this.handleMetaChange}\"\n          ></md-outlined-text-field>\n          <md-icon-button type=\"button\"><ui-icon icon=\"help\"></ui-icon></md-icon-button>\n        </div>\n      </div>\n    `\n  }\n\n  protected renderAttributes(model: DomainAssociation): TemplateResult {\n    return html`<div class=\"editor-section\">\n      <div class=\"section-title title-medium\">Attributes</div>\n      ${this.renderAttributeOptions(model)}\n    </div>`\n  }\n\n  protected renderAttributeOptions(model: DomainAssociation): TemplateResult {\n    const { required = false, multiple = false } = model\n    return html`<div class=\"checkbox-group\">\n      <div class=\"row\">\n        <div class=\"input checkbox\">\n          <md-checkbox\n            id=\"att-required\"\n            .checked=\"${required}\"\n            name=\"required\"\n            @change=\"${this.handleAttributeOptionChange}\"\n          ></md-checkbox>\n          <div class=\"label\">\n            <label for=\"att-required\" class=\"body-medium\">Required</label>\n          </div>\n        </div>\n        <md-icon-button type=\"button\"><ui-icon icon=\"help\"></ui-icon></md-icon-button>\n      </div>\n      <div class=\"row\">\n        <div class=\"input checkbox metadata\">\n          <md-checkbox\n            id=\"att-multiple\"\n            .checked=\"${multiple}\"\n            name=\"multiple\"\n            @change=\"${this.handleAttributeOptionChange}\"\n          ></md-checkbox>\n          <div class=\"label\">\n            <label for=\"att-multiple\" class=\"body-medium\">Multiple values</label>\n            <span class=\"body-small meta\">Creates an array of values.</span>\n          </div>\n        </div>\n        <md-icon-button type=\"button\"><ui-icon icon=\"help\"></ui-icon></md-icon-button>\n      </div>\n    </div>`\n  }\n\n  protected renderSchema(model: DomainAssociation): TemplateResult | typeof nothing {\n    const { linked = false } = model.schema || {}\n    return html`<div class=\"editor-section\">\n      <div class=\"section-title title-medium\">Schema</div>\n      <div class=\"row\">\n        <div class=\"input\">\n          <md-switch .selected=\"${linked}\" name=\"linked\" id=\"linked\" @change=\"${this.handleLinkedChange}\"></md-switch>\n          <label for=\"linked\" class=\"body-medium\">Use the reference key to access schema.</label>\n        </div>\n        <md-icon-button type=\"button\"><ui-icon icon=\"help\"></ui-icon></md-icon-button>\n      </div>\n    </div>`\n  }\n\n  protected renderTargetEntitySection(model: DomainAssociation): TemplateResult {\n    return html`<div\n      class=\"editor-section\"\n      @dragenter=\"${this.handleTargetDragEnter}\"\n      @dragover=\"${this.handleTargetDragOver}\"\n      @dragleave=\"${this.handleTargetDragLeave}\"\n      @drop=\"${this.handleTargetDrop}\"\n    >\n      <div class=\"section-title title-medium\">Target entity</div>\n      ${this.renderChooseTargetButton()} ${this.renderTargetEntities(model)}\n    </div>`\n  }\n\n  /**\n   * Renders the section with the current target entity.\n   *\n   * @todo: The UI only allows to select one target entity.\n   *        We need to add a way to select multiple target entities.\n   */\n  protected renderTargetEntities(model: DomainAssociation): TemplateResult | typeof nothing {\n    const targets = [...model.listTargets()]\n    if (!targets.length) {\n      return nothing\n    }\n    return html`${this.renderTargetItems(targets)} ${targets.length > 1 ? this.renderUnionType(model) : nothing}`\n  }\n\n  protected renderChooseTargetButton(): TemplateResult {\n    return html`<div class=\"row\">\n      <ui-filled-tonal-button type=\"button\" @click=\"${this.handleSelectTarget}\"\n        >Choose target entity</ui-filled-tonal-button\n      >\n      <md-icon-button type=\"button\"><ui-icon icon=\"help\"></ui-icon></md-icon-button>\n    </div>`\n  }\n\n  protected renderTargetItems(targets: DomainEntity[]): TemplateResult | typeof nothing {\n    if (!targets.length) {\n      return nothing\n    }\n    return html`<md-chip-set>\n      ${targets.map((item) => {\n        const label = item.info.getLabel()\n        return html`<md-input-chip\n          class=\"target-chip\"\n          data-key=\"${item.key}\"\n          data-namespace=\"${item.domain.key}\"\n          remove-only\n          title=\"Open the association target\"\n          aria-label=\"Open the association target ${label}\"\n          @remove=\"${this.handleDeleteTarget}\"\n          @click=\"${this.handleNavigateTarget}\"\n          >${label}</md-input-chip\n        >`\n      })}\n    </md-chip-set> `\n  }\n\n  protected renderUnionType(model: DomainAssociation): TemplateResult {\n    const { schema } = model\n    const unionType = schema?.unionType || 'anyOf'\n    const supportingText = 'Used with multiple entities.'\n    return html`<div class=\"row\">\n      <md-outlined-select\n        label=\"Union type\"\n        class=\"input\"\n        name=\"unionType\"\n        menuPositioning=\"popover\"\n        .supportingText=\"${supportingText}\"\n        @change=\"${this.handleUnionTypeChange}\"\n      >\n        <md-select-option ?selected=\"${unionType === 'allOf'}\" value=\"allOf\">\n          <div slot=\"headline\">All of</div>\n          <div slot=\"supporting-text\">Combines all fields into a single schema.</div>\n        </md-select-option>\n        <md-select-option ?selected=\"${unionType === 'anyOf'}\" value=\"anyOf\">\n          <div slot=\"headline\">Any of (default)</div>\n          <div slot=\"supporting-text\">Any of the schemas are valid (separately).</div>\n        </md-select-option>\n        <md-select-option ?selected=\"${unionType === 'oneOf'}\" value=\"oneOf\">\n          <div slot=\"headline\">One of</div>\n          <div slot=\"supporting-text\">Same as Any of, but different validation rules.</div>\n        </md-select-option>\n      </md-outlined-select>\n      <md-icon-button type=\"button\"><ui-icon icon=\"help\"></ui-icon></md-icon-button>\n    </div>`\n  }\n\n  protected renderDeleteButton(): TemplateResult {\n    return html`<div class=\"property-delete row\">\n      <ui-outlined-button @click=\"${this.handleDelete}\" title=\"Delete this property\" type=\"button\">\n        <ui-icon slot=\"icon\" icon=\"deleteOutline\"></ui-icon>Delete\n      </ui-outlined-button>\n    </div>`\n  }\n}\n"]}