@api-client/ui 0.0.17 → 0.1.0

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

@@ -1,809 +0,0 @@
-import { __esDecorate, __runInitializers } from "tslib";
-import { html, nothing } from 'lit';
-import { live } from 'lit-html/directives/live.js';
-import { property, state } from 'lit/decorators.js';
-import { classMap } from 'lit/directives/class-map.js';
-import { EventUtils, DomainPropertyKind, DomainAssociationKind, DomainEntityKind, } from '@api-client/core/browser.js';
-import { ModelingElement } from './ModelingElement.js';
-import { getFieldDataTypeLabel, getFieldIcon } from './lib/UiMapping.js';
-import { createRef, ref } from 'lit/directives/ref.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 '@material/web/textfield/outlined-text-field.js';
-import '@material/web/iconbutton/icon-button.js';
-import '@material/web/tabs/tabs.js';
-import '@material/web/tabs/secondary-tab.js';
-import '@material/web/list/list.js';
-import '@material/web/list/list-item.js';
-import '@material/web/icon/icon.js';
-import '@material/web/menu/menu.js';
-import '@material/web/menu/menu-item.js';
-import '@material/web/select/outlined-select.js';
-import '@material/web/select/select-option.js';
-import '@material/web/chips/chip-set.js';
-import '@material/web/chips/input-chip.js';
-let DomainEntityEditor = (() => {
-    let _classSuper = ModelingElement;
-    let _instanceExtraInitializers = [];
-    let _contentTab_decorators;
-    let _contentTab_initializers = [];
-    let _contentTab_extraInitializers = [];
-    let _selectedProperty_decorators;
-    let _selectedProperty_initializers = [];
-    let _selectedProperty_extraInitializers = [];
-    let _mime_decorators;
-    let _mime_initializers = [];
-    let _mime_extraInitializers = [];
-    let _mockValues_decorators;
-    let _mockValues_initializers = [];
-    let _mockValues_extraInitializers = [];
-    let _schemaPreview_decorators;
-    let _schemaPreview_initializers = [];
-    let _schemaPreview_extraInitializers = [];
-    let _handleSelectTargetEntity_decorators;
-    return class DomainEntityEditor extends _classSuper {
-        static {
-            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
-            _contentTab_decorators = [property({ type: String, reflect: true })];
-            _selectedProperty_decorators = [property({ type: String, reflect: true })];
-            _mime_decorators = [property({ type: String })];
-            _mockValues_decorators = [property({ type: Boolean })];
-            _schemaPreview_decorators = [state()];
-            _handleSelectTargetEntity_decorators = [bound];
-            __esDecorate(this, null, _contentTab_decorators, { kind: "accessor", name: "contentTab", static: false, private: false, access: { has: obj => "contentTab" in obj, get: obj => obj.contentTab, set: (obj, value) => { obj.contentTab = value; } }, metadata: _metadata }, _contentTab_initializers, _contentTab_extraInitializers);
-            __esDecorate(this, null, _selectedProperty_decorators, { kind: "accessor", name: "selectedProperty", static: false, private: false, access: { has: obj => "selectedProperty" in obj, get: obj => obj.selectedProperty, set: (obj, value) => { obj.selectedProperty = value; } }, metadata: _metadata }, _selectedProperty_initializers, _selectedProperty_extraInitializers);
-            __esDecorate(this, null, _mime_decorators, { kind: "accessor", name: "mime", static: false, private: false, access: { has: obj => "mime" in obj, get: obj => obj.mime, set: (obj, value) => { obj.mime = value; } }, metadata: _metadata }, _mime_initializers, _mime_extraInitializers);
-            __esDecorate(this, null, _mockValues_decorators, { kind: "accessor", name: "mockValues", static: false, private: false, access: { has: obj => "mockValues" in obj, get: obj => obj.mockValues, set: (obj, value) => { obj.mockValues = value; } }, metadata: _metadata }, _mockValues_initializers, _mockValues_extraInitializers);
-            __esDecorate(this, null, _schemaPreview_decorators, { kind: "accessor", name: "schemaPreview", static: false, private: false, access: { has: obj => "schemaPreview" in obj, get: obj => obj.schemaPreview, set: (obj, value) => { obj.schemaPreview = value; } }, metadata: _metadata }, _schemaPreview_initializers, _schemaPreview_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 = __runInitializers(this, _instanceExtraInitializers);
-        #contentTab_accessor_storage = __runInitializers(this, _contentTab_initializers, 'design'
-        /**
-         * The key of the currently selected property.
-         * @attribute
-         */
-        );
-        /**
-         * The currently selected tab in the editor.
-         * @attribute
-         */
-        get contentTab() { return this.#contentTab_accessor_storage; }
-        set contentTab(value) { this.#contentTab_accessor_storage = value; }
-        #selectedProperty_accessor_storage = (__runInitializers(this, _contentTab_extraInitializers), __runInitializers(this, _selectedProperty_initializers, void 0));
-        /**
-         * The key of the currently selected property.
-         * @attribute
-         */
-        get selectedProperty() { return this.#selectedProperty_accessor_storage; }
-        set selectedProperty(value) { this.#selectedProperty_accessor_storage = value; }
-        #mime_accessor_storage = (__runInitializers(this, _selectedProperty_extraInitializers), __runInitializers(this, _mime_initializers, 'application/json'
-        /**
-         * When set, the preview tab will generate example (mock) data.
-         * By default it only render values as defined in the schema.
-         * @attribute
-         */
-        ));
-        /**
-         * The mime type of the preview to render.
-         * @attribute
-         */
-        get mime() { return this.#mime_accessor_storage; }
-        set mime(value) { this.#mime_accessor_storage = value; }
-        #mockValues_accessor_storage = (__runInitializers(this, _mime_extraInitializers), __runInitializers(this, _mockValues_initializers, false
-        /**
-         * The generated schema preview.
-         */
-        ));
-        /**
-         * When set, the preview tab will generate example (mock) data.
-         * By default it only render values as defined in the schema.
-         * @attribute
-         */
-        get mockValues() { return this.#mockValues_accessor_storage; }
-        set mockValues(value) { this.#mockValues_accessor_storage = value; }
-        #schemaPreview_accessor_storage = (__runInitializers(this, _mockValues_extraInitializers), __runInitializers(this, _schemaPreview_initializers, void 0));
-        /**
-         * The generated schema preview.
-         */
-        get schemaPreview() { return this.#schemaPreview_accessor_storage; }
-        set schemaPreview(value) { this.#schemaPreview_accessor_storage = value; }
-        addMenuRef = (__runInitializers(this, _schemaPreview_extraInitializers), createRef());
-        willUpdate(cp) {
-            if (cp.has('selected') || cp.has('root')) {
-                this.computeEntity();
-            }
-            if (cp.has('mime') || cp.has('mockValues')) {
-                this.generateExample();
-            }
-            else if (cp.has('contentTab')) {
-                this.generateExample();
-            }
-            else if (this.contentTab === 'preview') {
-                this.generateExample();
-            }
-            super.willUpdate(cp);
-        }
-        computeEntity() {
-            const { root, selected } = this;
-            if (!root || !selected) {
-                this.domainElement = undefined;
-                return;
-            }
-            this.domainElement = root.findEntity(selected);
-        }
-        handleMetaChange(e) {
-            const { domainElement } = this;
-            if (!domainElement) {
-                return;
-            }
-            const node = e.target;
-            const { name, value } = node;
-            if (!['name', 'displayName', 'description'].includes(name)) {
-                return;
-            }
-            if (name === 'name' && !value) {
-                return;
-            }
-            domainElement.info[name] = value;
-            this.notifyChange();
-        }
-        handleContentTabChange(e) {
-            const tabs = e.target;
-            const tab = tabs.activeTab;
-            if (!tab) {
-                return;
-            }
-            const { key = '' } = tab.dataset;
-            if (!['design', 'preview'].includes(key)) {
-                return;
-            }
-            this.contentTab = key;
-        }
-        /**
-         * Generates the example data for the preview tab.
-         */
-        generateExample() {
-            const { domainElement: model, mime, mockValues = false, contentTab } = this;
-            if (!model || contentTab !== 'preview') {
-                return;
-            }
-            const value = model.toExample(mime, { renderMocked: mockValues, renderExamples: true });
-            this.schemaPreview = value;
-        }
-        notifyChange() {
-            super.notifyChange();
-            this.generateExample();
-        }
-        /**
-         * A handler for the mime type change event.
-         */
-        handleMimeChange(e) {
-            const node = e.currentTarget;
-            const { value } = node;
-            if (!value) {
-                return;
-            }
-            this.mime = value;
-        }
-        /**
-         * A handler for the field item click to select a field.
-         * @param e The click event.
-         */
-        handleFieldSelection(e) {
-            const item = e.currentTarget;
-            const { key, kind } = item.dataset;
-            if (!key || !kind) {
-                return;
-            }
-            this.select(key, kind);
-        }
-        /**
-         * Selects a field in the editor and dispatches a custom event with the key and kind of the field.
-         * @param key The key of the field to select.
-         * @param kind The kind of the field to select.
-         */
-        select(key, kind) {
-            const detail = {
-                key,
-                kind,
-            };
-            this.selectedProperty = key;
-            this.dispatchEvent(new CustomEvent('select', {
-                detail,
-            }));
-        }
-        addProperty(name) {
-            const { domainElement } = this;
-            if (!domainElement) {
-                return;
-            }
-            const prop = domainElement.addProperty({ info: { name: name || 'new_field' } });
-            this.select(prop.key, DomainPropertyKind);
-            this.notifyChange();
-        }
-        addAssociation(name) {
-            const { domainElement } = this;
-            if (!domainElement) {
-                return;
-            }
-            const prop = domainElement.addAssociation({}, { info: { name: name || 'new_reference' } });
-            this.select(prop.key, DomainAssociationKind);
-            this.notifyChange();
-        }
-        handleAddMenuClose(e) {
-            const { reason, initiator } = e.detail;
-            if (reason.kind === 'keydown') {
-                const typedReason = reason;
-                if (typedReason.key === 'Escape') {
-                    return;
-                }
-            }
-            const { action = '' } = initiator.dataset;
-            if (action === 'property') {
-                this.addProperty();
-            }
-            else if (action === 'association') {
-                this.addAssociation();
-            }
-        }
-        handleChooseParent() {
-            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);
-        }
-        handleDeleteParent(e) {
-            const { domainElement } = this;
-            if (!domainElement) {
-                return;
-            }
-            const item = e.currentTarget;
-            const { key } = item.dataset;
-            if (!key) {
-                return;
-            }
-            domainElement.removeParent(key);
-            this.notifyChange();
-            this.requestUpdate();
-        }
-        handleNavigateParent(e) {
-            const item = e.currentTarget;
-            const { key } = item.dataset;
-            if (!key) {
-                return;
-            }
-            const detail = {
-                key,
-                kind: DomainEntityKind,
-            };
-            this.dispatchEvent(new CustomEvent('openentity', { detail }));
-        }
-        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 (root.key === namespace) {
-                domainElement.addParent(selected);
-                this.notifyChange();
-                this.requestUpdate();
-            }
-        }
-        handleInheritanceDragEnter(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';
-        }
-        handleInheritanceDragOver(e) {
-            const dt = e.dataTransfer;
-            if (!dt) {
-                return;
-            }
-            const isDraggedEntity = dt.types.includes(DomainEntityKind.toLowerCase());
-            if (!isDraggedEntity) {
-                return;
-            }
-            e.preventDefault();
-        }
-        handleInheritanceDragLeave(e) {
-            const dt = e.dataTransfer;
-            if (!dt) {
-                return;
-            }
-            const zone = e.currentTarget;
-            zone.classList.remove('drop-zone');
-        }
-        handleInheritanceDrop(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');
-            if (!key || kind !== DomainEntityKind) {
-                return;
-            }
-            if (this.domainElement) {
-                this.domainElement.addParent(key);
-                this.notifyChange();
-                this.requestUpdate();
-            }
-        }
-        render() {
-            const { domainElement } = this;
-            if (!domainElement) {
-                return nothing;
-            }
-            return html `${this.renderForm(domainElement)}${this.renderIntro()}`;
-        }
-        renderForm(model) {
-            return html `
-      <form name="entity" @submit="${EventUtils.cancelEvent}" data-key="${model.key}" class="modeling-form">
-        ${this.renderMetaInputs(model)} ${this.renderParentEntity(model)} ${this.renderContentTabs()}
-        ${this.renderTabsContent(model)}
-      </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>
-    `;
-        }
-        renderParentEntity(model) {
-            return html `
-      <div
-        class="inheritance-section"
-        @dragenter="${this.handleInheritanceDragEnter}"
-        @dragover="${this.handleInheritanceDragOver}"
-        @dragleave="${this.handleInheritanceDragLeave}"
-        @drop="${this.handleInheritanceDrop}"
-      >
-        <div class="section-header">
-          <span class="label-large">Inherits from</span>
-          <ui-filled-tonal-button type="button" class="select" @click="${this.handleChooseParent}"
-            >Choose parent entity</ui-filled-tonal-button
-          >
-          <md-icon-button type="button"><ui-icon icon="help"></ui-icon></md-icon-button>
-        </div>
-        ${this.renderParentItems(model)}
-      </div>
-    `;
-        }
-        renderParentItems(model) {
-            if (!model.hasParents()) {
-                return nothing;
-            }
-            const contents = [];
-            for (const item of model.listParents()) {
-                const label = item.info.getLabel();
-                contents.push(html `<md-input-chip
-          class="parent-chip"
-          data-key="${item.key}"
-          remove-only
-          title="Open the parent entity"
-          aria-label="Open the parent entity ${label}"
-          @remove="${this.handleDeleteParent}"
-          @click="${this.handleNavigateParent}"
-          >${label}</md-input-chip
-        >`);
-            }
-            return html `<md-chip-set>${contents}</md-chip-set>`;
-        }
-        renderContentTabs() {
-            return html `
-      <md-tabs @change="${this.handleContentTabChange}">
-        <md-secondary-tab data-key="design" active>Design</md-secondary-tab>
-        <md-secondary-tab data-key="preview">Preview</md-secondary-tab>
-      </md-tabs>
-    `;
-        }
-        renderTabsContent(model) {
-            const { contentTab } = this;
-            switch (contentTab) {
-                case 'design':
-                    return this.renderDesignTabContent(model);
-                case 'preview':
-                    return this.renderPreviewTabContent();
-                default:
-                    return html `<p>Invalid selection.</p>`;
-            }
-        }
-        renderDesignTabContent(model) {
-            // TODO: Add taxonomy related UI.
-            return this.renderFieldsSection(model);
-        }
-        renderPreviewTabContent() {
-            return html `
-      <div class="preview-section">
-        ${this.renderPreviewMimeSelector()}
-        <div class="schema-preview"><pre class="title-small">${this.schemaPreview}</pre></div>
-      </div>
-    `;
-        }
-        renderPreviewMimeSelector() {
-            const { mime } = this;
-            const mimes = ['application/json', 'application/xml'];
-            return html `<div class="row">
-      <md-outlined-select
-        label="Media Type"
-        class="input"
-        name="mime"
-        menuPositioning="popover"
-        @change="${this.handleMimeChange}"
-      >
-        ${mimes.map((item) => html `<md-select-option ?selected="${mime === item}" value="${item}">
-              <div slot="headline">${item}</div>
-            </md-select-option>`)}
-      </md-outlined-select>
-    </div>`;
-        }
-        renderFieldsSection(model) {
-            return html `
-      <div class="fields-section">
-        <div class="fields-header">
-          <span class="label-large">Fields</span>
-          ${this.renderFieldAddButton()}
-        </div>
-        ${model.hasFields() ? this.renderFieldsList(model) : this.renderFieldsEmptyState()}
-      </div>
-    `;
-        }
-        renderFieldAddButton() {
-            return html `<div class="field-add-button">
-      <ui-filled-tonal-button
-        id="field-new-anchor"
-        trailingicon
-        type="button"
-        @click=${() => this.addMenuRef.value?.show()}
-      >
-        Add field
-        <md-icon slot="icon">arrow_drop_down</md-icon>
-      </ui-filled-tonal-button>
-      <md-menu
-        positioning="popover"
-        id="new-field-menu"
-        anchor="field-new-anchor"
-        anchor-corner="end-start"
-        y-offset="8"
-        @close-menu="${this.handleAddMenuClose}"
-        ${ref(this.addMenuRef)}
-      >
-        <md-menu-item data-action="property">
-          <div slot="headline">Property</div>
-          <div slot="supporting-text">Data property in the schema</div>
-        </md-menu-item>
-        <md-menu-item data-action="association">
-          <div slot="headline">Reference</div>
-          <div slot="supporting-text">Connect to another entity object</div>
-        </md-menu-item>
-      </md-menu>
-    </div>`;
-        }
-        renderFieldsEmptyState() {
-            return html `<div class="empty-fields">
-      <div class="icon-wrapper">
-        <ui-icon class="icon" icon="textFields"></ui-icon>
-      </div>
-      <p class="empty-message body-large">Find your data entities here</p>
-      <p class="empty-message body-large">Add a data entity to describe your schema.</p>
-    </div>`;
-        }
-        renderFieldsList(items) {
-            const contents = [];
-            for (const item of items.listFields()) {
-                contents.push(this.renderField(item));
-            }
-            return html `<md-list class="fields-list">${contents}</md-list>`;
-        }
-        renderField(item) {
-            const selected = this.selectedProperty === item.key;
-            const classes = {
-                'field-item': true,
-                'selected': selected,
-            };
-            const label = item.info.getLabel();
-            const icon = selected ? 'check' : getFieldIcon(item);
-            return html `<md-list-item
-      class="${classMap(classes)}"
-      type="button"
-      data-key="${item.key}"
-      data-kind="${item.kind}"
-      @click="${this.handleFieldSelection}"
-    >
-      <span slot="start"><ui-icon class="icon" icon="${icon}"></ui-icon></span>
-      <span slot="headline">${label}</span>
-      <span slot="trailing-supporting-text">${getFieldDataTypeLabel(item)}</span>
-    </md-list-item>`;
-        }
-        renderIntro() {
-            return html `
-      <ui-divider class="divider"></ui-divider>
-      <section class="intro body-medium">
-        <h2 class="intro-title title-large">
-          <div class="theme-icon-wrapper">
-            <ui-icon class="icon" icon="schemaEntity"></ui-icon>
-          </div>
-          Defining the Pieces of Your Data: Introducing Data Entities
-        </h2>
-        <p>
-          You've already learned about data namespaces (the folders) and data models (the blueprints). Now, let's dive
-          into the individual pieces of information that make up your data: <strong>data entities</strong>.
-        </p>
-
-        <p>
-          Think of a data entity as a specific type of thing you want to track or manage in your data domain. It's like
-          a template for a particular kind of object. For example, in an online store, you might have data entities like
-          "Customer," "Product," "Order," or "Address."
-        </p>
-
-        <h3 class="title-medium">What is a Data Entity?</h3>
-        <p>
-          A data entity represents a single, distinct type of data. It's a way to describe the characteristics and
-          properties of a specific kind of object. Each data entity has:
-        </p>
-        <ul>
-          <li>
-            <strong>Properties:</strong> These are the individual pieces of information that describe the entity. For
-            example, a "Customer" entity might have properties like "Name," "Email," and "Phone Number."
-          </li>
-          <li>
-            <strong>Associations:</strong> These are the relationships between different entities. For example, a
-            "Customer" entity might be associated with one or more "Order" entities.
-          </li>
-        </ul>
-
-        <h3 class="title-medium">Why Use Data Entities?</h3>
-        <p>Data entities help you:</p>
-        <ul>
-          <li>
-            <strong>Define Your Data Clearly:</strong> They provide a structured way to describe the different types of
-            information you're working with.
-          </li>
-          <li>
-            <strong>Organize Related Information:</strong> They group together all the properties that belong to a
-            specific type of object.
-          </li>
-          <li>
-            <strong>Establish Relationships:</strong> They allow you to define how different types of data are connected
-            to each other.
-          </li>
-          <li>
-            <strong>Create Reusable Structures:</strong> Once you've defined a data entity, you can use it as a template
-            for creating new data entries of that type.
-          </li>
-          <li>
-            <strong>Build Complex Data Domains:</strong> You can create a complex data domain by combining multiple data
-            entities.
-          </li>
-          <li>
-            <strong>Reuse:</strong> You can reuse the same data structures in different contexts. For example, you can
-            reuse the "Address" data entity in both the "Customers" and "Orders" data models.
-          </li>
-          <li>
-            <strong>Extend:</strong> You can extend the existing data structures without breaking the existing data. For
-            example, you can add a new data entity for "Marketing" without breaking the existing data structures.
-          </li>
-        </ul>
-
-        <h3 class="title-medium">Example: The Online Store Data Entities</h3>
-
-        <p>Let's continue with our online store example. Here are some data entities you might define:</p>
-
-        <div class="example">
-          <div class="example-title title-small">Customer:</div>
-          <ul>
-            <li>
-              <strong>Properties:</strong>
-              <ul class="property-list">
-                <li>Name</li>
-                <li>Email</li>
-                <li>Phone Number</li>
-                <li>Date of Birth</li>
-              </ul>
-            </li>
-            <li>
-              <strong>Associations:</strong>
-              <ul class="property-list">
-                <li>Orders (a customer can have multiple orders)</li>
-                <li>Address (a customer has an address)</li>
-              </ul>
-            </li>
-          </ul>
-        </div>
-
-        <div class="example">
-          <div class="example-title title-small">Product:</div>
-          <ul>
-            <li>
-              <strong>Properties:</strong>
-              <ul class="property-list">
-                <li>Name</li>
-                <li>Description</li>
-                <li>Price</li>
-                <li>SKU</li>
-                <li>Image URL</li>
-              </ul>
-            </li>
-            <li>
-              <strong>Associations:</strong>
-              <ul class="property-list">
-                <li>None in this example, but you could have associations to "Category" or "Supplier" entities.</li>
-              </ul>
-            </li>
-          </ul>
-        </div>
-
-        <div class="example">
-          <div class="example-title title-small">Order:</div>
-          <ul>
-            <li>
-              <strong>Properties:</strong>
-              <ul class="property-list">
-                <li>Order Number</li>
-                <li>Order Date</li>
-                <li>Total</li>
-                <li>Status</li>
-              </ul>
-            </li>
-            <li>
-              <strong>Associations:</strong>
-              <ul class="property-list">
-                <li>Customer (an order belongs to a customer)</li>
-                <li>Order Items (an order has multiple order items)</li>
-              </ul>
-            </li>
-          </ul>
-        </div>
-        <div class="example">
-          <div class="example-title title-small">Address:</div>
-          <ul>
-            <li>
-              <strong>Properties:</strong>
-              <ul class="property-list">
-                <li>Street</li>
-                <li>City</li>
-                <li>Zip Code</li>
-                <li>Country</li>
-              </ul>
-            </li>
-            <li>
-              <strong>Associations:</strong>
-              <ul class="property-list">
-                <li>Customer (an address belongs to a customer)</li>
-              </ul>
-            </li>
-          </ul>
-        </div>
-
-        <h3 class="title-medium">Benefits in this Scenario:</h3>
-        <ul>
-          <li>
-            <strong>Clear Definitions:</strong> You have a clear definition of what a "Customer," "Product," "Order,"
-            and "Address" are in your system.
-          </li>
-          <li>
-            <strong>Organized Information:</strong> All the relevant information about a customer is grouped within the
-            "Customer" entity.
-          </li>
-          <li>
-            <strong>Understanding Relationships:</strong> You can see that a "Customer" can have multiple "Orders" and
-            that an "Order" is associated with a "Customer."
-          </li>
-          <li>
-            <strong>Complex Data Domains:</strong> You can create a complex data domain by combining multiple data
-            entities.
-          </li>
-          <li>
-            <strong>Reuse:</strong> You can reuse the "Address" data entity in both the "Customers" and "Orders" data
-            models.
-          </li>
-          <li>
-            <strong>Extend:</strong> You can add a new data entity for "Marketing" without breaking the existing data
-            structures.
-          </li>
-        </ul>
-
-        <h3 class="title-medium">In Summary</h3>
-
-        <p>
-          Data entities are the core building blocks of your data domain. They allow you to define the specific types of
-          information you need to manage, organize related data, and establish relationships between different types of
-          data.
-        </p>
-      </section>
-    `;
-        }
-    };
-})();
-/**
- * Dispatched when a field (either a `DomainProperty` or a `DomainAssociation`) within the entity is selected.
- *
- * @event DomainEntityEditor#select
- * @type {CustomEvent}
- * @property {object} detail - The event details.
- * @property {string} detail.key - The key of the selected field.
- * @property {string} detail.kind - The kind of the selected field (e.g., `DomainPropertyKind`,
- * `DomainAssociationKind`).
- */
-/**
- * Dispatched when the user wants to navigate to a parent entity.
- *
- * @event DomainEntityEditor#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`.
- */
-/**
- * @fires DomainEntityEditor#select - A custom event with the `key` and `type` when a property was selected.
- * @fires DomainEntityEditor#openentity - A custom event with the `key` and `type` when a property was selected.
- */
-export default DomainEntityEditor;
-//# sourceMappingURL=DomainEntityEditor.js.map