@api-client/ui 0.0.17 → 0.1.0

package/build/src/elements/schema-design/DataSchemaDocument.js

@@ -1,949 +0,0 @@
-import { __esDecorate, __runInitializers } from "tslib";
-import { css, html, nothing } from 'lit';
-import { property, state } from 'lit/decorators.js';
-import { classMap } from 'lit/directives/class-map.js';
-import ApiElement from '../ApiElement.js';
-import { DataEntityKind } from '@api-client/core/browser.js';
-import theme from '../theme.js';
-import schemaCommon from './schemaCommon.js';
-import EditorCommon from './CommonStyles.js';
-import MarkdownStyles from '../highlight/MarkdownStyles.js';
-import typography from '../../styles/m3/typography.module.js';
-import '../../md/icons/ui-icon.js';
-import '../../md/button/ui-outlined-button.js';
-import '../../md/icon-button/ui-icon-button.js';
-import '../../md/radio/ui-radio.js';
-/**
- * We keep the list of expanded attributes in a weak map
- * so the state is kept as long as the namespace is loaded and the DataEntity exists.
- * WeakMap allows to GC the DataEntity when it is removed from the namespace (and also release the values).
- */
-const expandedState = new WeakMap();
-const selectedUnions = new Map();
-let DataSchemaDocument = (() => {
-    let _classSuper = ApiElement;
-    let _root_decorators;
-    let _root_initializers = [];
-    let _root_extraInitializers = [];
-    let _key_decorators;
-    let _key_initializers = [];
-    let _key_extraInitializers = [];
-    let __entity_decorators;
-    let __entity_initializers = [];
-    let __entity_extraInitializers = [];
-    let _selectedProperty_decorators;
-    let _selectedProperty_initializers = [];
-    let _selectedProperty_extraInitializers = [];
-    let _associationDropZone_decorators;
-    let _associationDropZone_initializers = [];
-    let _associationDropZone_extraInitializers = [];
-    let _editable_decorators;
-    let _editable_initializers = [];
-    let _editable_extraInitializers = [];
-    let __dropAssociationTarget_decorators;
-    let __dropAssociationTarget_initializers = [];
-    let __dropAssociationTarget_extraInitializers = [];
-    return class DataSchemaDocument extends _classSuper {
-        static {
-            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
-            _root_decorators = [property({ type: Object })];
-            _key_decorators = [property({ type: String, reflect: true })];
-            __entity_decorators = [state()];
-            _selectedProperty_decorators = [property({ type: String, reflect: true })];
-            _associationDropZone_decorators = [property({ type: Boolean, reflect: true })];
-            _editable_decorators = [property({ type: Boolean, reflect: true })];
-            __dropAssociationTarget_decorators = [state()];
-            __esDecorate(this, null, _root_decorators, { kind: "accessor", name: "root", static: false, private: false, access: { has: obj => "root" in obj, get: obj => obj.root, set: (obj, value) => { obj.root = value; } }, metadata: _metadata }, _root_initializers, _root_extraInitializers);
-            __esDecorate(this, null, _key_decorators, { kind: "accessor", name: "key", static: false, private: false, access: { has: obj => "key" in obj, get: obj => obj.key, set: (obj, value) => { obj.key = value; } }, metadata: _metadata }, _key_initializers, _key_extraInitializers);
-            __esDecorate(this, null, __entity_decorators, { kind: "accessor", name: "_entity", static: false, private: false, access: { has: obj => "_entity" in obj, get: obj => obj._entity, set: (obj, value) => { obj._entity = value; } }, metadata: _metadata }, __entity_initializers, __entity_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, _associationDropZone_decorators, { kind: "accessor", name: "associationDropZone", static: false, private: false, access: { has: obj => "associationDropZone" in obj, get: obj => obj.associationDropZone, set: (obj, value) => { obj.associationDropZone = value; } }, metadata: _metadata }, _associationDropZone_initializers, _associationDropZone_extraInitializers);
-            __esDecorate(this, null, _editable_decorators, { kind: "accessor", name: "editable", static: false, private: false, access: { has: obj => "editable" in obj, get: obj => obj.editable, set: (obj, value) => { obj.editable = value; } }, metadata: _metadata }, _editable_initializers, _editable_extraInitializers);
-            __esDecorate(this, null, __dropAssociationTarget_decorators, { kind: "accessor", name: "_dropAssociationTarget", static: false, private: false, access: { has: obj => "_dropAssociationTarget" in obj, get: obj => obj._dropAssociationTarget, set: (obj, value) => { obj._dropAssociationTarget = value; } }, metadata: _metadata }, __dropAssociationTarget_initializers, __dropAssociationTarget_extraInitializers);
-            if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
-        }
-        static get styles() {
-            return [
-                theme,
-                schemaCommon,
-                MarkdownStyles,
-                EditorCommon,
-                typography,
-                css `
-        :host {
-          display: block;
-        }
-
-        .entity-header {
-          margin-bottom: 20px;
-        }
-
-        .entity-header .label {
-          margin-bottom: 1em;
-        }
-
-        .no-info {
-          margin: 12px 20px;
-        }
-
-        .add-property-section {
-          margin-top: 20px;
-        }
-
-        .property-container.selected {
-          background: var(--list-active-background);
-        }
-
-        .tree-view.drop-active {
-          background: var(--association-drop-background, #e3f2fd);
-        }
-
-        .property-container.drag-over {
-          background: var(--association-drop-background, #e3f2fd);
-        }
-
-        .drop-zone {
-          position: absolute;
-          inset: 0;
-          height: unset;
-          margin: 0;
-          padding: 0;
-          background: rgba(255, 255, 255, 0.92);
-        }
-      `,
-            ];
-        }
-        #root_accessor_storage = __runInitializers(this, _root_initializers, void 0);
-        /**
-         * The read data namespace.
-         */
-        get root() { return this.#root_accessor_storage; }
-        set root(value) { this.#root_accessor_storage = value; }
-        #key_accessor_storage = (__runInitializers(this, _root_extraInitializers), __runInitializers(this, _key_initializers, void 0));
-        /**
-         * The entity key to render the schema documentation for
-         * @attribute
-         */
-        get key() { return this.#key_accessor_storage; }
-        set key(value) { this.#key_accessor_storage = value; }
-        #_entity_accessor_storage = (__runInitializers(this, _key_extraInitializers), __runInitializers(this, __entity_initializers, void 0));
-        /**
-         * The read data entity when the "selected" change.
-         */
-        get _entity() { return this.#_entity_accessor_storage; }
-        set _entity(value) { this.#_entity_accessor_storage = value; }
-        #selectedProperty_accessor_storage = (__runInitializers(this, __entity_extraInitializers), __runInitializers(this, _selectedProperty_initializers, void 0));
-        /**
-         * The key of the property being highlighted.
-         * @attribute
-         */
-        get selectedProperty() { return this.#selectedProperty_accessor_storage; }
-        set selectedProperty(value) { this.#selectedProperty_accessor_storage = value; }
-        #associationDropZone_accessor_storage = (__runInitializers(this, _selectedProperty_extraInitializers), __runInitializers(this, _associationDropZone_initializers, void 0));
-        /**
-         * When set it activates the drop zone in the properties list to drop an entity as an association.
-         * This has no effect when `editable` is not set.
-         * @attribute
-         */
-        get associationDropZone() { return this.#associationDropZone_accessor_storage; }
-        set associationDropZone(value) { this.#associationDropZone_accessor_storage = value; }
-        #editable_accessor_storage = (__runInitializers(this, _associationDropZone_extraInitializers), __runInitializers(this, _editable_initializers, void 0));
-        /**
-         * Whether to render the view in the edit-ready model.
-         * This mode allows to add new property, create an association, or remove those.
-         * It does not allow to manipulate properties of association or properties.
-         * @attribute
-         */
-        get editable() { return this.#editable_accessor_storage; }
-        set editable(value) { this.#editable_accessor_storage = value; }
-        #_dropAssociationTarget_accessor_storage = (__runInitializers(this, _editable_extraInitializers), __runInitializers(this, __dropAssociationTarget_initializers, void 0));
-        /**
-         * When dragging an entity over an existing association this is the key
-         * of the association hovered.
-         */
-        get _dropAssociationTarget() { return this.#_dropAssociationTarget_accessor_storage; }
-        set _dropAssociationTarget(value) { this.#_dropAssociationTarget_accessor_storage = value; }
-        willUpdate(cp) {
-            if (cp.has('key')) {
-                this.computeEntity();
-            }
-        }
-        /**
-         * Computes the view value for the property.
-         * This should be called before the update is complete so this won't trigger another update.
-         */
-        computeEntity() {
-            const { root, key } = this;
-            if (!root || !key) {
-                this._entity = undefined;
-                return;
-            }
-            const entity = root.definitions.entities.find((i) => i.key === key);
-            this._entity = entity;
-        }
-        /**
-         * Adds an entity with the given key as an association to this entity.
-         * This does nothing when the view is not in the `editable` model.
-         *
-         * Note, we allow to create an association to self. Also note, an entity can have multiple
-         * associations to the same target.
-         *
-         * @param foreignKey The key of the target entity to add.
-         * @param parentAssociation When set, it adds another target to an existing association.
-         */
-        addAssociation(foreignKey, parentAssociation) {
-            const { _entity, editable } = this;
-            if (!editable || !foreignKey || !_entity) {
-                return;
-            }
-            if (parentAssociation) {
-                const parent = _entity.associations.find((i) => i.key === parentAssociation);
-                if (!parent) {
-                    return;
-                }
-                parent.addTarget(foreignKey);
-            }
-            else {
-                const created = _entity.addTargetAssociation(foreignKey);
-                this.dispatchEvent(new CustomEvent('edit', {
-                    detail: {
-                        type: 'association',
-                        key: created.key,
-                    },
-                }));
-            }
-            this.notifyChange();
-        }
-        /**
-         * Removes an association from the entity.
-         * This does nothing when the view is not in the `editable` model.
-         *
-         * @param key The key of the association to remove.
-         */
-        removeAssociation(key) {
-            const { _entity, editable } = this;
-            if (!editable || !key || !_entity) {
-                return;
-            }
-            _entity.removeAssociation(key);
-            this.notifyChange();
-            this.requestUpdate();
-        }
-        addProperty(name) {
-            const { _entity, editable } = this;
-            if (!_entity || !editable) {
-                return;
-            }
-            const created = _entity.addNamedProperty(name || 'New property');
-            this.selectedProperty = created.key;
-            this.notifyChange();
-            this.requestUpdate();
-            this.dispatchEvent(new CustomEvent('edit', {
-                detail: {
-                    type: 'property',
-                    key: created.key,
-                },
-            }));
-        }
-        removeProperty(key) {
-            const { _entity, editable } = this;
-            if (!key || !_entity || !editable) {
-                return;
-            }
-            _entity.removeProperty(key);
-            if (this.selectedProperty === key) {
-                this.selectedProperty = undefined;
-            }
-            this.notifyChange();
-            this.requestUpdate();
-        }
-        _addPropertyHandler() {
-            this.addProperty();
-        }
-        _findParentKeyedElement(node) {
-            let target = node;
-            while (target) {
-                if (target.nodeType !== Node.ELEMENT_NODE || !target.dataset) {
-                    target = target.parentElement;
-                    continue;
-                }
-                if (target.dataset.key) {
-                    return target;
-                }
-                target = target.parentElement;
-            }
-            return null;
-        }
-        _removeHandler(e) {
-            const button = e.currentTarget;
-            const { type } = button.dataset;
-            if (!type) {
-                return;
-            }
-            const node = this._findParentKeyedElement(e.target);
-            if (node) {
-                if (type === 'property') {
-                    this.removeProperty(node.dataset.key);
-                }
-                else if (type === 'association') {
-                    this.removeAssociation(node.dataset.key);
-                }
-            }
-        }
-        _editHandler(e) {
-            const button = e.currentTarget;
-            const { type } = button.dataset;
-            if (!type) {
-                return;
-            }
-            const node = this._findParentKeyedElement(e.target);
-            if (node) {
-                this.dispatchEvent(new CustomEvent('edit', {
-                    detail: {
-                        type,
-                        key: node.dataset.key,
-                    },
-                }));
-            }
-        }
-        _associationDragOver(e) {
-            const { dataTransfer } = e;
-            if (!dataTransfer) {
-                return;
-            }
-            const dt = dataTransfer;
-            if (!dt.types.includes(DataEntityKind.toLocaleLowerCase())) {
-                return;
-            }
-            const node = e.currentTarget;
-            const { key } = node.dataset;
-            if (key) {
-                e.preventDefault();
-                dt.effectAllowed = 'copy';
-                dt.dropEffect = 'copy';
-                this._dropAssociationTarget = key;
-            }
-        }
-        _associationDragLeave(e) {
-            const { dataTransfer } = e;
-            if (!dataTransfer) {
-                return;
-            }
-            const dt = dataTransfer;
-            if (!dt.types.includes(DataEntityKind.toLocaleLowerCase())) {
-                return;
-            }
-            this._dropAssociationTarget = undefined;
-        }
-        _associationDrop(e) {
-            const { dataTransfer } = e;
-            if (!dataTransfer) {
-                return;
-            }
-            const dt = dataTransfer;
-            if (!dt.types.includes(DataEntityKind.toLocaleLowerCase())) {
-                return;
-            }
-            const { _dropAssociationTarget } = this;
-            if (!_dropAssociationTarget) {
-                return;
-            }
-            e.preventDefault();
-            this._dropAssociationTarget = undefined;
-            const key = dataTransfer.getData('text/key');
-            this.addAssociation(key, _dropAssociationTarget);
-        }
-        _dragoverHandler(e) {
-            const { dataTransfer } = e;
-            if (!dataTransfer) {
-                return;
-            }
-            if (e.defaultPrevented) {
-                return;
-            }
-            e.preventDefault();
-            dataTransfer.dropEffect = 'copy';
-            dataTransfer.effectAllowed = 'copy';
-        }
-        _dropHandler(e) {
-            const { dataTransfer } = e;
-            if (!dataTransfer) {
-                return;
-            }
-            if (e.defaultPrevented) {
-                return;
-            }
-            e.preventDefault();
-            const key = dataTransfer.getData('text/key');
-            this.addAssociation(key);
-        }
-        /**
-         * @returns the list of keys of properties that are expanded (children are rendered).
-         */
-        _getExpandedKeys() {
-            const { _entity } = this;
-            if (!_entity) {
-                return [];
-            }
-            if (!expandedState.has(_entity)) {
-                expandedState.set(_entity, []);
-            }
-            return expandedState.get(_entity);
-        }
-        _expandHandler(e) {
-            const button = e.currentTarget;
-            const { id } = button.dataset;
-            this._toggleExpandedProperty(id);
-        }
-        _expandKeydownHandler(e) {
-            if (e.code !== 'Space') {
-                return;
-            }
-            e.preventDefault();
-            const button = e.currentTarget;
-            const { id } = button.dataset;
-            this._toggleExpandedProperty(id);
-        }
-        /**
-         * Toggles an "expanded" state for a property children.
-         *
-         * @param id Parent property id that has children to toggle visibility of.
-         */
-        _toggleExpandedProperty(id) {
-            const list = this._getExpandedKeys();
-            const index = list.indexOf(id);
-            if (index === -1) {
-                list.push(id);
-            }
-            else {
-                list.splice(index, 1);
-            }
-            this.requestUpdate();
-        }
-        _isRecursive(association, target) {
-            const entity = association.getParent();
-            return entity.hasClosedCycle(this.key, target);
-        }
-        _unionSelectedHandler(e) {
-            const button = e.target;
-            if (!button.checked) {
-                return;
-            }
-            const value = button.value;
-            const { association } = button.dataset;
-            if (!association || !value) {
-                return;
-            }
-            selectedUnions.set(association, value);
-            this.requestUpdate();
-        }
-        render() {
-            const { _entity } = this;
-            if (!_entity) {
-                return nothing;
-            }
-            const treeClasses = {
-                'drop-active': !!this.associationDropZone && !this._dropAssociationTarget,
-                'tree-view': true,
-            };
-            return html `
-      ${this._headerTemplate(_entity)}
-      <div class="${classMap(treeClasses)}" @dragover="${this._dragoverHandler}" @drop="${this._dropHandler}">
-        ${this._propertiesTemplate(_entity.properties, _entity.associations)}
-        ${this._parentsProperties(_entity.getComputedParents())}
-      </div>
-      ${this._addButtonTemplate()}
-    `;
-        }
-        _headerTemplate(entity) {
-            const label = entity.info.name || 'Unnamed data entity';
-            return html `
-      <div class="entity-header">
-        <div class="label title-large">${label}</div>
-        ${this._descriptionTemplate(entity)}
-      </div>
-    `;
-        }
-        _descriptionTemplate(entity) {
-            const { description } = entity.info;
-            if (description) {
-                return html ` <div class="description">
-        <marked-highlight sanitize .markdown="${description}">
-          <div slot="markdown-html" class="markdown-body text-selectable"></div>
-        </marked-highlight>
-      </div>`;
-            }
-            return html `
-      <div class="description">
-        <span class="no-description body-medium">No schema description provided.</span>
-      </div>
-    `;
-        }
-        _propertiesTemplate(properties, associations, readonly) {
-            if (!properties.length && !associations.length) {
-                // don't change the "div" to anything else. It's for the CSS to compute borders correctly.
-                return html `<div class="no-properties">This entity has no properties or associations.</div>`;
-            }
-            return html `
-      ${properties.map((p) => this._propertyTemplate(p, readonly))}
-      ${associations.map((a) => this._associationTemplate(a, readonly))}
-    `;
-        }
-        _propertyTemplate(item, readonly = false) {
-            const { info, type, key, required, multiple, index, primary } = item;
-            const containerClasses = {
-                'property-container': true,
-                'selected': this.selectedProperty === item.key,
-            };
-            return html `
-      <div class="${classMap(containerClasses)}" data-key="${key}">
-        <div class="property-border"></div>
-        <div class="property-value">
-          <div class="property-headline">
-            <div class="property-decorator scalar"><hr /></div>
-            ${this._paramNameTemplate(item)}
-            <span class="headline-separator"></span>
-            <div class="param-type text-selectable">${type || 'Any type'}</div>
-            ${this._pillTemplate('Required', 'This property is required.', required)}
-            ${this._pillTemplate('Multiple', 'Multiple instances of the value are possible.', multiple)}
-            ${this._pillTemplate('Index', 'This property is a key which can be indexed.', index)}
-            ${this._pillTemplate('Primary', 'This property is the primary key for this entity.', primary, 'primary')}
-          </div>
-          <div class="description-column">${this._propertyDescriptionTemplate(info.description)}</div>
-          <div class="details-column"></div>
-        </div>
-        ${this._propertyListActions('property', readonly)}
-      </div>
-    `;
-        }
-        /**
-         * A template for the data association list item view.
-         * Depending on the number of targets of the association it renders the "empty target",
-         * single association, or a union association view.
-         *
-         * @param item The association item to render.
-         * @param parent The parent entity of the association.
-         * @param readonly Whether to render the view as "read only" (no edit controls).
-         * We do not show controls for properties inherited from parents.
-         */
-        _associationTemplate(item, readonly = false) {
-            const { targets = [] } = item;
-            if (!targets.length) {
-                return this._noTargetAssociationTemplate(item, readonly);
-            }
-            if (targets.length === 1) {
-                return this._singleAssociationTemplate(item, readonly);
-            }
-            return this._unionAssociationTemplate(item, readonly);
-        }
-        /**
-         * Renders the template for the an association that has one target. This is a classic association where a property
-         * is associated with an object.
-         */
-        _singleAssociationTemplate(item, readonly = false) {
-            const { info, key, required, multiple } = item;
-            const containerClasses = {
-                'property-container': true,
-                'selected': this.selectedProperty === key,
-                'drag-over': this._dropAssociationTarget === key,
-            };
-            const entity = item.getTargets()[0];
-            const recursive = this._isRecursive(item, entity.key); // entity === this._entity || entity === parent;
-            let targetLabel;
-            if (entity) {
-                targetLabel = entity.info.renderLabel;
-            }
-            else {
-                targetLabel = 'Invalid target';
-            }
-            const list = this._getExpandedKeys();
-            const expanded = !recursive && list.includes(key);
-            return html `
-      <div
-        class="${classMap(containerClasses)}"
-        data-key="${key}"
-        @dragover="${this._associationDragOver}"
-        @dragleave="${this._associationDragLeave}"
-        @drop="${this._associationDrop}"
-      >
-        <div class="property-border"></div>
-        <div class="property-value">
-          <div class="property-headline">
-            <div
-              class="property-decorator object"
-              tabindex="${recursive ? '-1' : '0'}"
-              data-id="${key}"
-              @click="${this._expandHandler}"
-              @keydown="${this._expandKeydownHandler}"
-            >
-              <hr />
-              ${recursive
-                ? ''
-                : html `<ui-icon icon="chevronRight" class="object-toggle-icon ${expanded ? 'opened' : ''}"></ui-icon>`}
-            </div>
-            ${this._assocNameTemplate(item)}
-            <span class="headline-separator"></span>
-            <div class="param-type text-selectable">${multiple ? `Array of ${targetLabel}` : targetLabel}</div>
-            ${this._pillTemplate('Recursive shape', 'This association is recursive.', recursive)}
-            ${this._pillTemplate('Required', 'This property is required.', required)}
-            ${this._pillTemplate('Multiple', 'Multiple instances of the value are possible.', multiple)}
-          </div>
-          <div class="description-column">${this._propertyDescriptionTemplate(info.description)}</div>
-          <div class="details-column"></div>
-        </div>
-        ${this._propertyListActions('association', readonly)}
-      </div>
-      ${expanded
-                ? html `
-            <div class="shape-children">
-              <div class="property-border"></div>
-              ${this._associationPropertiesTemplate(item)}
-            </div>
-          `
-                : ''}
-    `;
-        }
-        /**
-         * Renders the template for the an association that has multiple targets. This association represents
-         * an union of shapes. This means the property can be any, one of, or either of the union shapes.
-         */
-        _unionAssociationTemplate(item, readonly = false) {
-            const { info, key, required, multiple } = item;
-            const containerClasses = {
-                'property-container': true,
-                'selected': this.selectedProperty === key,
-                'drag-over': this._dropAssociationTarget === key,
-            };
-            const entities = item.getTargets();
-            const schema = item.schema;
-            // The `anyOf` and `oneOf` renders the same as this is a selection of one of the schemas
-            // The `allOf` renders properties for all shapes in the union.
-            // The not can potentially be a scalar shape and we don't have a concept of that in this tool so probably
-            // we gonna skip that.
-            let type = 'anyOf';
-            if (schema?.unionType) {
-                type = schema.unionType;
-            }
-            let unionLabel = '';
-            if (!entities.length) {
-                // this will happen when all targets were removed from the namespace.
-                unionLabel = 'invalid targets';
-            }
-            else if (type === 'anyOf') {
-                const names = entities.map((i) => i.info.renderLabel).join(' or ');
-                unionLabel = `any of ${names}`;
-            }
-            else if (type === 'oneOf') {
-                const names = entities.map((i) => i.info.renderLabel).join(' or ');
-                unionLabel = `one of ${names}`;
-            }
-            else {
-                const names = entities.map((i) => i.info.renderLabel).join(' and ');
-                unionLabel = `all of ${names}`;
-            }
-            if (multiple) {
-                unionLabel = `list of ${unionLabel}`;
-            }
-            const list = this._getExpandedKeys();
-            const expanded = list.includes(key);
-            return html `
-      <div class="${classMap(containerClasses)}" data-key="${key}">
-        <div class="property-border"></div>
-        <div class="property-value">
-          <div class="property-headline">
-            <div
-              class="property-decorator object"
-              tabindex="0"
-              data-id="${key}"
-              @click="${this._expandHandler}"
-              @keydown="${this._expandKeydownHandler}"
-            >
-              <hr />
-              <ui-icon icon="chevronRight" class="object-toggle-icon ${expanded ? 'opened' : ''}"></ui-icon>
-            </div>
-            ${this._assocNameTemplate(item)}
-            <span class="headline-separator"></span>
-            <div class="param-type text-selectable">${unionLabel}</div>
-            ${this._pillTemplate('Required', 'This association is required.', required)}
-            ${this._pillTemplate('Multiple', 'Multiple instances of the value are possible.', multiple)}
-            ${this._pillTemplate('Union', 'This association is an union.', true)}
-          </div>
-          <div class="description-column">${this._propertyDescriptionTemplate(info.description)}</div>
-          <div class="details-column"></div>
-        </div>
-        ${this._propertyListActions('association', readonly)}
-      </div>
-      ${expanded
-                ? html `
-            <div class="shape-children">
-              <div class="property-border"></div>
-              ${this._unionPropertiesTemplate(item, type)}
-            </div>
-          `
-                : ''}
-    `;
-        }
-        /**
-         * Renders the template for an association that has no target set.
-         */
-        _noTargetAssociationTemplate(item, readonly = false) {
-            const { info, key, required, multiple } = item;
-            const containerClasses = {
-                'property-container': true,
-                'selected': this.selectedProperty === key,
-                'drag-over': this._dropAssociationTarget === key,
-            };
-            return html `
-      <div class="${classMap(containerClasses)}" data-key="${key}">
-        <div class="property-border"></div>
-        <div class="property-value">
-          <div class="property-headline">
-            <div class="property-decorator object">
-              <hr />
-            </div>
-            ${this._assocNameTemplate(item)}
-            <span class="headline-separator"></span>
-            ${this._pillTemplate('No target', 'This association has no target.', true)}
-            ${this._pillTemplate('Required', 'This property is required.', required)}
-            ${this._pillTemplate('Multiple', 'Multiple instances of the value are possible.', multiple)}
-          </div>
-          <div class="description-column">${this._propertyDescriptionTemplate(info.description)}</div>
-          <div class="details-column"></div>
-        </div>
-        ${this._propertyListActions('association', readonly)}
-      </div>
-    `;
-        }
-        _associationPropertiesTemplate(item) {
-            const entities = item.getTargets();
-            if (!entities.length) {
-                // don't change the "div" to anything else. It's for the CSS to compute borders correctly.
-                return html `<div class="no-properties">Invalid entry. The target entity does not exist.</div>`;
-            }
-            const [entity] = entities;
-            return html `
-      <div class="tree-view">${this._propertiesTemplate(entity.properties, entity.associations, true)}</div>
-    `;
-        }
-        _unionPropertiesTemplate(item, type) {
-            const entities = item.getTargets();
-            if (!entities.length) {
-                // don't change the "div" to anything else. It's for the CSS to compute borders correctly.
-                return html `<div class="no-properties">Invalid entry. The target entity does not exist.</div>`;
-            }
-            if (type === 'allOf') {
-                let allProperties = [];
-                let allAssociations = [];
-                entities.forEach((entity) => {
-                    const { associations, properties } = entity;
-                    allProperties = allProperties.concat(properties);
-                    allAssociations = allAssociations.concat(associations);
-                });
-                return html ` <div class="tree-view">
-        ${this._unionSelector(item, type, entities)} ${this._propertiesTemplate(allProperties, allAssociations, true)}
-      </div>`;
-            }
-            let selected = selectedUnions.get(item.key);
-            if (!selected) {
-                selected = entities[0].key;
-            }
-            const entity = entities.find((i) => i.key === selected);
-            if (!entity) {
-                return html `
-        <div class="tree-view">
-          ${this._unionSelector(item, type, entities, selected)}
-          <p class="no-info">Invalid selection. Entity not found.</p>
-        </div>
-      `;
-            }
-            return html `
-      <div class="tree-view">
-        ${this._unionSelector(item, type, entities, selected)}
-        ${this._propertiesTemplate(entity.properties, entity.associations, true)}
-      </div>
-    `;
-        }
-        /**
-         * Depending on the union type, it renders the union type label and a selector of the union member.
-         *
-         * This template is intended to use when multiple targets in association were detected.
-         *
-         * @param item The association item
-         * @param type The entity association type.
-         * @param entities The list of association targets.
-         * @param selected The key of the currently selected association target
-         * @returns The template for the union selection in the list of properties.
-         */
-        _unionSelector(item, type, entities, selected) {
-            let label;
-            if (type === 'anyOf') {
-                label = 'Any (one or more) of the following schemas';
-            }
-            else if (type === 'oneOf') {
-                label = 'One of the following schemas';
-            }
-            else if (type === 'allOf') {
-                label = 'All properties of union schemas';
-            }
-            else {
-                label = 'Not matching the schema';
-            }
-            const renderSelection = ['anyOf', 'oneOf'].includes(type);
-            return html `
-      <div class="union-options">
-        <span class="label-large">${label}</span>
-        ${renderSelection
-                ? html `
-              ${entities.map((entity) => html ` <label class="label-large">
-                    <ui-radio
-                      class="union-toggle"
-                      name="unionFor${item.key}"
-                      data-association="${item.key}"
-                      value="${entity.key}"
-                      .checked="${selected === entity.key}"
-                      @change="${this._unionSelectedHandler}"
-                    ></ui-radio>
-                    ${entity.info.renderLabel}
-                  </label>`)}
-            `
-                : nothing}
-      </div>
-    `;
-        }
-        _propertyDescriptionTemplate(description) {
-            return html `
-      <div class="description">
-        <marked-highlight sanitize .markdown="${description || 'No description'}">
-          <div slot="markdown-html" class="markdown-body text-selectable"></div>
-        </marked-highlight>
-      </div>
-    `;
-        }
-        /**
-         * Adds the delete and edit buttons to the tree item.
-         * This renders nothing when the property is readonly or the element is not `editable`.
-         *
-         * @param readonly Indicates the property is a readonly mode (e.g. belongs to an external entity.)
-         */
-        _propertyListActions(type, readonly) {
-            if (readonly || !this.editable) {
-                return nothing;
-            }
-            const removeTitle = type === 'property' ? 'Remove this property' : 'Remove this association';
-            const removeLabel = type === 'property' ? 'Remove property' : 'Remove association';
-            const editTitle = type === 'property' ? 'Edit this property' : 'Edit this association';
-            const editLabel = type === 'property' ? 'Edit property' : 'Edit association';
-            return html `
-      <div class="property-actions">
-        <ui-icon-button
-          data-type="${type}"
-          aria-label="${removeLabel}"
-          title="${removeTitle}"
-          @click="${this._removeHandler}"
-        >
-          <ui-icon icon="deleteOutline" role="presentation"></ui-icon>
-        </ui-icon-button>
-        <ui-icon-button
-          data-type="${type}"
-          aria-label="${editLabel}"
-          title="${editTitle}"
-          @click="${this._editHandler}"
-        >
-          <ui-icon icon="edit" role="presentation"></ui-icon>
-        </ui-icon-button>
-      </div>
-    `;
-        }
-        /**
-         * A template for the display name of a property.
-         * @param item The property to render the name filed for
-         * @returns The template for the property name.
-         */
-        _paramNameTemplate(item) {
-            const { info, required = false, deprecated = false } = item;
-            const paramName = !info.displayName ? '' : info.name;
-            const classes = {
-                'param-name': true,
-                required,
-                deprecated,
-            };
-            return html `
-      <div class="${classMap(classes)}">
-        <span class="param-label text-selectable">${info.renderLabel}</span>
-      </div>
-      ${paramName
-                ? html `<span class="param-name-secondary text-selectable" title="Schema property name">${paramName}</span>`
-                : ''}
-    `;
-        }
-        /**
-         * A template for the display name of an association.
-         * @param item The property to render the name filed for
-         * @returns The template for the property name.
-         */
-        _assocNameTemplate(item) {
-            const { info, required = false } = item;
-            const paramName = !info.displayName ? '' : info.name;
-            const classes = {
-                'param-name': true,
-                required,
-            };
-            return html `
-      <div class="${classMap(classes)}">
-        <span class="param-label text-selectable">${info.renderLabel}</span>
-      </div>
-      ${paramName
-                ? html `<span class="param-name-secondary text-selectable" title="Schema property name">${paramName}</span>`
-                : ''}
-    `;
-        }
-        _pillTemplate(label, title, test, className) {
-            if (!test) {
-                return '';
-            }
-            const classes = {
-                'pill': true,
-                'param-pill': true,
-                [className || '']: !!className,
-            };
-            return html `<span class="${classMap(classes)}" title="${title}">${label}</span>`;
-        }
-        /**
-         * Renders the template for the parents of the entity.
-         *
-         * @param parents The parents of the entity. This is an unordered list.
-         */
-        _parentsProperties(parents) {
-            if (!parents.length) {
-                return nothing;
-            }
-            // don't change the "div" to anything else. It's for the CSS to compute borders correctly.
-            return parents.map((p) => html `
-        <div class="inheritance-label text-selectable">Properties inherited from <b>${p.info.name}</b>.</div>
-        ${this._propertiesTemplate(p.properties, p.associations, true)}
-      `);
-        }
-        _addButtonTemplate() {
-            if (!this.editable) {
-                return nothing;
-            }
-            return html `
-      <div class="add-property-section">
-        <ui-outlined-button @click="${this._addPropertyHandler}">Add property</ui-outlined-button>
-      </div>
-    `;
-        }
-        constructor() {
-            super(...arguments);
-            __runInitializers(this, __dropAssociationTarget_extraInitializers);
-        }
-    };
-})();
-/**
- * An element that renders a documentation view for a data entity.
- *
- * @fires edit - When a property is selected for editing. This is only possible when the `editable` property is set.
- * @fires change - When the entity has changed. This is only possible when the `editable` property is set.
- */
-export default DataSchemaDocument;
-//# sourceMappingURL=DataSchemaDocument.js.map