@api-client/ui 0.0.3 → 0.0.5

package/dist/elements/schema-design/AssociationFormElement.js

@@ -25,19 +25,6 @@ export default class AssociationFormElement extends ApiElement {
       `
         ];
     }
-    /**
-     * The key of the association to edit.
-     * @attribute
-     */
-    key;
-    /**
-     * The read data namespace.
-     */
-    root;
-    /**
-     * The computed entity when the key or root change.
-     */
-    _association;
     willUpdate(cp) {
         if (cp.has('key')) {
             this._computeAssociation();

package/dist/elements/schema-design/AssociationFormElement.js.map

@@ -1 +1 @@
-{"version":3,"file":"AssociationFormElement.js","sourceRoot":"","sources":["../../../src/elements/schema-design/AssociationFormElement.ts"],"names":[],"mappings":";AAAA,OAAO,EAAkC,UAAU,EAAE,MAAM,mCAAmC,CAAC;AAC/F,OAAO,EAAE,GAAG,EAAa,IAAI,EAAkC,MAAM,KAAK,CAAC;AAC3E,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,IAAI,EAAE,MAAM,wBAAwB,CAAC;AAC9C,OAAO,UAAU,MAAM,kBAAkB,CAAC;AAC1C,OAAO,YAAY,MAAM,mBAAmB,CAAC;AAC7C,OAAO,KAAK,MAAM,aAAa,CAAC;AAChC,OAAO,UAAU,MAAM,sCAAsC,CAAC;AAG9D,OAAO,kCAAkC,CAAC;AAC1C,OAAO,gCAAgC,CAAC;AACxC,OAAO,+BAA+B,CAAC;AACvC,OAAO,mCAAmC,CAAC;AAC3C,OAAO,4BAA4B,CAAC;AAEpC,MAAM,CAAC,OAAO,OAAO,sBAAuB,SAAQ,UAAU;IAC5D,MAAM,KAAc,MAAM;QACxB,OAAO;YACL,KAAK;YACL,YAAY;YACZ,UAAU;YACV,GAAG,CAAA;;;;OAIF;SACF,CAAA;IACH,CAAC;IAED;;;OAGG;IACwC,GAAG,CAAU;IAExD;;OAEG;IACyB,IAAI,CAAiB;IAEjD;;OAEG;IACgB,YAAY,CAAmB;IAEzC,UAAU,CAAC,EAAwB;QAC1C,IAAI,EAAE,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE;YACjB,IAAI,CAAC,mBAAmB,EAAE,CAAC;SAC5B;IACH,CAAC;IAES,cAAc;QACtB,IAAI,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC;IAC1C,CAAC;IAED;;;OAGG;IACO,mBAAmB;QAC3B,MAAM,EAAE,IAAI,EAAE,GAAG,EAAE,GAAG,IAAI,CAAC;QAC3B,IAAI,CAAC,IAAI,IAAI,CAAC,GAAG,EAAE;YACjB,IAAI,CAAC,YAAY,GAAG,SAAS,CAAC;YAC9B,OAAO;SACR;QACD,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,WAAW,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,KAAK,GAAG,CAAC,CAAC;IAC7E,CAAC;IAES,kBAAkB,CAAC,CAAQ;QACnC,MAAM,EAAE,YAAY,EAAE,GAAG,IAAI,CAAC;QAC9B,IAAI,CAAC,YAAY,EAAE;YACjB,OAAO;SACR;QACD,MAAM,IAAI,GAAG,CAAC,CAAC,MAAe,CAAC;QAC/B,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC;QAC7B,IAAI,CAAC,CAAC,MAAM,EAAE,aAAa,EAAE,aAAa,CAAC,CAAC,QAAQ,CAAC,IAAc,CAAC,EAAE;YACpE,OAAO;SACR;QACD,IAAI,IAAI,KAAK,MAAM,IAAI,CAAC,KAAK,EAAE;YAC7B,OAAO;SACR;QACD,YAAY,CAAC,IAAI,CAAC,IAA8C,CAAC,GAAG,KAAK,CAAC;QAC1E,IAAI,CAAC,cAAc,EAAE,CAAC;QACtB,IAAI,CAAC,aAAa,EAAE,CAAC;IACvB,CAAC;IAES,eAAe,CAAC,CAAQ;QAChC,MAAM,EAAE,YAAY,EAAE,GAAG,IAAI,CAAC;QAC9B,IAAI,CAAC,YAAY,EAAE;YACjB,OAAO;SACR;QACD,MAAM,KAAK,GAAG,CAAC,CAAC,MAAyB,CAAC;QAC1C,MAAM,IAAI,GAAG,KAAK,CAAC,IAA+B,CAAC;QACnD,MAAM,EAAE,OAAO,EAAE,GAAG,KAAK,CAAC;QAC1B,IAAI,YAAY,CAAC,IAAI,CAAC,KAAK,OAAO,EAAE;YAClC,OAAO;SACR;QACD,YAAY,CAAC,IAAI,CAAC,GAAG,OAAO,CAAC;QAC7B,IAAI,CAAC,cAAc,EAAE,CAAC;QACtB,IAAI,CAAC,aAAa,EAAE,CAAC;IACvB,CAAC;IAEkB,MAAM;QACvB,MAAM,EAAE,YAAY,EAAE,IAAI,EAAE,GAAG,IAAI,CAAC;QACpC,IAAI,CAAC,IAAI,EAAE;YACT,OAAO,IAAI,CAAA,EAAE,CAAC;SACf;QACD,MAAM,EAAE,IAAI,EAAE,QAAQ,GAAG,KAAK,EAAE,QAAQ,GAAG,KAAK,EAAE,GAAG,IAAI,CAAC;QAC1D,OAAO,IAAI,CAAA;6CAC8B,UAAU,CAAC,WAAW,eAAe,IAAI,CAAC,GAAG;yDACjC,IAAI,CAAC,IAAI,CAAC,IAAI,IAAI,EAAE,CAAC,gDAAgD,IAAI,CAAC,kBAAkB;gEACrF,IAAI,CAAC,IAAI,CAAC,WAAW,IAAI,EAAE,CAAC,8CAA8C,IAAI,CAAC,kBAAkB;gEACjG,IAAI,CAAC,IAAI,CAAC,WAAW,IAAI,EAAE,CAAC,yDAAyD,IAAI,CAAC,kBAAkB;;;;mDAIzH,QAAQ,wEAAwE,IAAI,CAAC,eAAe;;;;mDAIpG,QAAQ,wHAAwH,IAAI,CAAC,eAAe;;;;;KAKlM,CAAC;IACJ,CAAC;CACF;AA9F4C;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;mDAAc;AAK5B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;oDAAsB;AAKxC;IAAR,KAAK,EAAE;4DAA0C","sourcesContent":["import { DataAssociation, DataNamespace, EventUtils } from \"@api-client/core/build/browser.js\";\nimport { css, CSSResult, html, PropertyValues, TemplateResult } from \"lit\";\nimport { property, state } from \"lit/decorators.js\";\nimport { live } from \"lit/directives/live.js\";\nimport ApiElement from \"../ApiElement.js\";\nimport EditorCommon from './CommonStyles.js';\nimport theme from '../theme.js';\nimport typography from \"../../styles/m3/typography.module.js\";\nimport Input from \"../../ui/input/Input.js\";\nimport CheckboxElement from \"../../ui/input/CheckboxElement.js\";\nimport '../../define/ui/ui-text-field.js';\nimport '../../define/ui/ui-checkbox.js';\nimport '../../define/ui/ui-divider.js';\nimport '../../define/ui/ui-icon-button.js';\nimport '../../define/ui/ui-icon.js';\n\nexport default class AssociationFormElement extends ApiElement {\n  static override get styles(): CSSResult[] {\n    return [\n      theme,\n      EditorCommon,\n      typography,\n      css`\n      :host {\n        display: block;\n      }\n      `\n    ]\n  }\n  \n  /**\n   * The key of the association to edit.\n   * @attribute\n   */\n  @property({ type: String, reflect: true }) key?: string;\n\n  /**\n   * The read data namespace.\n   */\n  @property({ type: Object }) root?: DataNamespace;\n\n  /**\n   * The computed entity when the key or root change.\n   */\n  @state() protected _association?: DataAssociation;\n\n  override willUpdate(cp: PropertyValues<this>): void {\n    if (cp.has('key')) {\n      this._computeAssociation();\n    }\n  }\n\n  protected _notifyChanged(): void {\n    this.dispatchEvent(new Event('change'));\n  }\n\n  /**\n   * Computes the view value for the association.\n   * This should be called before the update is complete so this won't trigger another update.\n   */\n  protected _computeAssociation(): void {\n    const { root, key } = this;\n    if (!root || !key) {\n      this._association = undefined;\n      return;\n    }\n    this._association = root.definitions.associations.find(i => i.key === key);\n  }\n\n  protected _infoChangeHandler(e: Event): void {\n    const { _association } = this;\n    if (!_association) {\n      return;\n    }\n    const node = e.target as Input;\n    const { name, value } = node;\n    if (!['name', 'description', 'displayName'].includes(name as string)) {\n      return;\n    }\n    if (name === 'name' && !value) {\n      return;\n    }\n    _association.info[name as 'name' | 'description' | 'displayName'] = value;\n    this._notifyChanged();\n    this.requestUpdate();\n  }\n\n  protected _checkedHandler(e: Event): void {\n    const { _association } = this;\n    if (!_association) {\n      return;\n    }\n    const input = e.target as CheckboxElement;\n    const name = input.name as 'multiple' | 'required';\n    const { checked } = input;\n    if (_association[name] === checked) {\n      return;\n    }\n    _association[name] = checked;\n    this._notifyChanged();\n    this.requestUpdate();\n  }\n\n  protected override render(): TemplateResult {\n    const { _association: item } = this;\n    if (!item) {\n      return html``;\n    }\n    const { info, multiple = false, required = false } = item;\n    return html`\n    <form name=\"data-association\" @submit=\"${EventUtils.cancelEvent}\" data-key=\"${item.key}\">\n      <ui-text-field class=\"input\" name=\"name\" .value=\"${live(info.name || '')}\" label=\"Association name\" required @change=\"${this._infoChangeHandler}\"></ui-text-field>\n      <ui-text-field class=\"input\" name=\"displayName\" .value=\"${live(info.displayName || '')}\" label=\"Display name (optional)\" @change=\"${this._infoChangeHandler}\"></ui-text-field>\n      <ui-text-field class=\"input\" name=\"description\" .value=\"${live(info.description || '')}\" label=\"Association description (optional)\" @change=\"${this._infoChangeHandler}\"></ui-text-field>\n\n      <div class=\"checkbox-group\">\n        <label class=\"label-large\">\n          <ui-checkbox name=\"required\" .checked=\"${required}\" title=\"Whether the association is required in the schema\" @change=\"${this._checkedHandler}\"></ui-checkbox>\n          Required\n        </label>\n        <label class=\"label-large\">\n          <ui-checkbox name=\"multiple\" .checked=\"${multiple}\" title=\"When set it declares this association as an array. Multiple instances of the value are permitted.\" @change=\"${this._checkedHandler}\"></ui-checkbox>\n          Multiple\n        </label>\n      </div>\n    </form>\n    `;\n  }\n}\n"]}
+{"version":3,"file":"AssociationFormElement.js","sourceRoot":"","sources":["../../../src/elements/schema-design/AssociationFormElement.ts"],"names":[],"mappings":"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","sourcesContent":["import { DataAssociation, DataNamespace, EventUtils } from \"@api-client/core/build/browser.js\";\nimport { css, CSSResult, html, PropertyValues, TemplateResult } from \"lit\";\nimport { property, state } from \"lit/decorators.js\";\nimport { live } from \"lit/directives/live.js\";\nimport ApiElement from \"../ApiElement.js\";\nimport EditorCommon from './CommonStyles.js';\nimport theme from '../theme.js';\nimport typography from \"../../styles/m3/typography.module.js\";\nimport Input from \"../../ui/input/Input.js\";\nimport CheckboxElement from \"../../ui/input/CheckboxElement.js\";\nimport '../../define/ui/ui-text-field.js';\nimport '../../define/ui/ui-checkbox.js';\nimport '../../define/ui/ui-divider.js';\nimport '../../define/ui/ui-icon-button.js';\nimport '../../define/ui/ui-icon.js';\n\nexport default class AssociationFormElement extends ApiElement {\n  static override get styles(): CSSResult[] {\n    return [\n      theme,\n      EditorCommon,\n      typography,\n      css`\n      :host {\n        display: block;\n      }\n      `\n    ]\n  }\n  \n  /**\n   * The key of the association to edit.\n   * @attribute\n   */\n  @property({ type: String, reflect: true }) key?: string;\n\n  /**\n   * The read data namespace.\n   */\n  @property({ type: Object }) root?: DataNamespace;\n\n  /**\n   * The computed entity when the key or root change.\n   */\n  @state() protected _association?: DataAssociation;\n\n  override willUpdate(cp: PropertyValues<this>): void {\n    if (cp.has('key')) {\n      this._computeAssociation();\n    }\n  }\n\n  protected _notifyChanged(): void {\n    this.dispatchEvent(new Event('change'));\n  }\n\n  /**\n   * Computes the view value for the association.\n   * This should be called before the update is complete so this won't trigger another update.\n   */\n  protected _computeAssociation(): void {\n    const { root, key } = this;\n    if (!root || !key) {\n      this._association = undefined;\n      return;\n    }\n    this._association = root.definitions.associations.find(i => i.key === key);\n  }\n\n  protected _infoChangeHandler(e: Event): void {\n    const { _association } = this;\n    if (!_association) {\n      return;\n    }\n    const node = e.target as Input;\n    const { name, value } = node;\n    if (!['name', 'description', 'displayName'].includes(name as string)) {\n      return;\n    }\n    if (name === 'name' && !value) {\n      return;\n    }\n    _association.info[name as 'name' | 'description' | 'displayName'] = value;\n    this._notifyChanged();\n    this.requestUpdate();\n  }\n\n  protected _checkedHandler(e: Event): void {\n    const { _association } = this;\n    if (!_association) {\n      return;\n    }\n    const input = e.target as CheckboxElement;\n    const name = input.name as 'multiple' | 'required';\n    const { checked } = input;\n    if (_association[name] === checked) {\n      return;\n    }\n    _association[name] = checked;\n    this._notifyChanged();\n    this.requestUpdate();\n  }\n\n  protected override render(): TemplateResult {\n    const { _association: item } = this;\n    if (!item) {\n      return html``;\n    }\n    const { info, multiple = false, required = false } = item;\n    return html`\n    <form name=\"data-association\" @submit=\"${EventUtils.cancelEvent}\" data-key=\"${item.key}\">\n      <ui-text-field class=\"input\" name=\"name\" .value=\"${live(info.name || '')}\" label=\"Association name\" required @change=\"${this._infoChangeHandler}\"></ui-text-field>\n      <ui-text-field class=\"input\" name=\"displayName\" .value=\"${live(info.displayName || '')}\" label=\"Display name (optional)\" @change=\"${this._infoChangeHandler}\"></ui-text-field>\n      <ui-text-field class=\"input\" name=\"description\" .value=\"${live(info.description || '')}\" label=\"Association description (optional)\" @change=\"${this._infoChangeHandler}\"></ui-text-field>\n\n      <div class=\"checkbox-group\">\n        <label class=\"label-large\">\n          <ui-checkbox name=\"required\" .checked=\"${required}\" title=\"Whether the association is required in the schema\" @change=\"${this._checkedHandler}\"></ui-checkbox>\n          Required\n        </label>\n        <label class=\"label-large\">\n          <ui-checkbox name=\"multiple\" .checked=\"${multiple}\" title=\"When set it declares this association as an array. Multiple instances of the value are permitted.\" @change=\"${this._checkedHandler}\"></ui-checkbox>\n          Multiple\n        </label>\n      </div>\n    </form>\n    `;\n  }\n}\n"]}

package/dist/elements/schema-design/DataEntityEditorElement.js

@@ -77,28 +77,6 @@ export default class DataEntityEditorElement extends ApiElement {
       `,
         ];
     }
-    /**
-     * The read data namespace.
-     */
-    root;
-    /**
-     * The selected entity.
-     */
-    selected;
-    /**
-     * The key of the selected property being edited.
-     */
-    selectedProperty;
-    /**
-     * The key of the selected association being edited.
-     */
-    selectedAssociation;
-    _highlightEntityDropZone;
-    _schemaExample;
-    _schemaMime;
-    _schemaMock;
-    _schemaOpened;
-    _schemaDoc;
     constructor() {
         super();
         this._schemaMime = 'application/json';

package/dist/elements/schema-design/DataEntityEditorElement.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataEntityEditorElement.js","sourceRoot":"","sources":["../../../src/elements/schema-design/DataEntityEditorElement.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, CSSResult, html, PropertyValues, TemplateResult } from \"lit\";\nimport { property, query, state } from \"lit/decorators.js\";\nimport { DataEntityKind, DataNamespace } from \"@api-client/core/build/browser.js\";\nimport ApiElement from \"../ApiElement.js\";\nimport theme from '../theme.js';\nimport schemaCommon from './schemaCommon.js';\nimport EditorCommon from './CommonStyles.js';\nimport MarkdownStyles from '../highlight/MarkdownStyles.js';\nimport typography from \"../../styles/m3/typography.module.js\";\nimport DataSchemaDocument from \"./DataSchemaDocument.js\";\nimport RadioElement from \"../../ui/input/RadioElement.js\";\nimport CheckboxElement from \"../../ui/input/CheckboxElement.js\";\nimport '../../define/ui/ui-icon.js';\nimport '../../define/ui/ui-icon-button.js';\nimport '../../define/ui/ui-radio.js';\nimport '../../define/ui/ui-checkbox.js';\nimport '../../define/highlight/marked-highlight.js';\nimport '../../define/data/data-association-form.js';\nimport '../../define/data/data-property-form.js';\nimport '../../define/data/data-entity-form.js';\nimport '../../define/data/data-schema-document.js';\n\n/**\n * The DataEntity editor UI and logic.\n * \n * @fires change - When the entity has changed and the parent element / app should update the value in the store.\n * @fires namechange - When a name of the data entity has changed. This triggers a render in the navigation. This is fired after the `change` event.\n */\nexport default class DataEntityEditorElement extends ApiElement {\n  static override get styles(): CSSResult[] {\n    return [\n      theme,\n      schemaCommon,\n      MarkdownStyles,\n      EditorCommon,\n      typography,\n      css`\n      :host {\n        display: block;\n        height: 100%;\n      }\n\n      .container {\n        display: flex;\n        flex-direction: row;\n        height: inherit;\n        flex: 1;\n      }\n\n      .structure {\n        flex: 8;\n        overflow: hidden;\n      }\n\n      .editor {\n        flex: 4;\n        background-color: var(--md-sys-color-surface);\n        border-radius: var(--md-sys-shape-corner-small);\n        box-shadow: var(--md-sys-elevation-1);\n        overflow: hidden;\n        display: flex;\n        flex-direction: column;\n        /* for the box shadow */\n        margin: 4px; \n      }\n\n      .editor-form {\n        overflow: auto;\n      }\n\n      .mime-options {\n        box-sizing: border-box;\n        display: flex;\n        align-items: center;\n      }\n\n      .schema-card {\n        margin: 20px 20px 20px 0px;\n      }\n      `,\n    ];\n  }\n\n  /**\n   * The read data namespace.\n   */\n  @property({ type: Object }) root?: DataNamespace;\n\n  /**\n   * The selected entity.\n   */\n  @property({ type: String }) selected?: string;\n\n  /**\n   * The key of the selected property being edited.\n   */\n  @property({ type: String }) selectedProperty?: string;\n\n  /**\n   * The key of the selected association being edited.\n   */\n  @property({ type: String }) selectedAssociation?: string;\n\n  @state() protected _highlightEntityDropZone?: boolean;\n\n  @state() protected _schemaExample?: string | number | boolean | null;\n\n  @state() protected _schemaMime: string;\n\n  @state() protected _schemaMock: boolean;\n\n  protected _schemaOpened?: boolean;\n\n  @query('data-schema-document')\n  protected _schemaDoc?: DataSchemaDocument;\n\n  constructor() {\n    super();\n    this._schemaMime = 'application/json';\n    this._schemaMock = true;\n    this.addEventListener('dragenter', this._dragEnterHandler.bind(this));\n    this.addEventListener('dragleave', this._dragLeaveHandler.bind(this));\n  }\n\n  protected override willUpdate(cp: PropertyValues<this>): void {\n    super.willUpdate(cp);\n    if (cp.has('selected')) {\n      this._computeExampleSchemaIfNeeded();\n    }\n  }\n\n  protected _notifyChanged(): void {\n    this.dispatchEvent(new Event('change'));\n    if (this._highlightEntityDropZone) {\n      this._highlightEntityDropZone = false;\n    }\n  }\n\n  protected _dragEnterHandler(e: DragEvent): void {\n    const { dataTransfer: dt } = e;\n    if (!dt) {\n      return;\n    }\n    if (![...dt.types].includes(DataEntityKind.toLowerCase())) {\n      return;\n    }\n    this._highlightEntityDropZone = true;\n    this.selectedProperty = undefined;\n    this.selectedAssociation = undefined;\n  }\n\n  protected _dragLeaveHandler(e: DragEvent): void {\n    const { dataTransfer: dt } = e;\n    if (!dt) {\n      return;\n    }\n    if (![...dt.types].includes(DataEntityKind.toLowerCase())) {\n      return;\n    }\n    this._highlightEntityDropZone = false;\n  }\n\n  protected _propertyChangeHandler(): void {\n    this._notifyChanged();\n    const { _schemaDoc } = this;\n    if (_schemaDoc) {\n      _schemaDoc.requestUpdate();\n    }\n    this._computeExampleSchemaIfNeeded();\n  }\n\n  protected _entityChangeHandler(): void {\n    this._notifyChanged();\n    const { _schemaDoc } = this;\n    if (_schemaDoc) {\n      _schemaDoc.requestUpdate();\n    }\n    this._computeExampleSchemaIfNeeded();\n  }\n\n  protected _schemaEntityChangeHandler(): void {\n    this._notifyChanged();\n    this.requestUpdate();\n    this._computeExampleSchemaIfNeeded();\n  }\n\n  protected _schemaEntityEditHandler(e: CustomEvent): void {\n    const { type, key } = e.detail;\n    if (type === 'property') {\n      this.selectedProperty = key;\n      this.selectedAssociation = undefined;\n    } else if (type === 'association') {\n      this.selectedProperty = undefined;\n      this.selectedAssociation = key;\n    }\n    this._computeExampleSchemaIfNeeded();\n  }\n\n  protected _entityNameHandler(): void {\n    // just retarget\n    this.dispatchEvent(new Event('namechange'));\n    this._computeExampleSchemaIfNeeded();\n  }\n\n  protected _cancelEditor(): void {\n    this.selectedProperty = undefined;\n    this.selectedAssociation = undefined;\n  }\n\n  protected _computeExampleSchema(): void {\n    const { selected, root } = this;\n    const entity = root?.definitions.entities.find(i => i.key === selected);\n    if (!entity) {\n      this._schemaExample = undefined;\n      return\n    }\n    this._schemaExample = entity.toExample(this._schemaMime, {\n      renderMocked: this._schemaMock,\n      renderExamples: true,\n      renderOptional: true,\n    });\n  }\n\n  protected _computeExampleSchemaIfNeeded(): void {\n    if (this._schemaOpened) {\n      this._computeExampleSchema();\n    }\n  }\n\n  protected _schemaOpenHandler(e: Event): void {\n    const details = e.target as HTMLDetailsElement;\n    this._schemaOpened = details.open;\n    if (details.open) {\n      this._computeExampleSchema();\n    }\n  }\n\n  protected _schemaMimeHandler(e: Event): void {\n    const button = e.target as RadioElement;\n    if (!button.checked) {\n      return;\n    }\n    this._schemaMime = button.value as string;\n    this._computeExampleSchemaIfNeeded();\n  }\n\n  protected _mockSchemaValuesHandler(e: Event): void {\n    const input = e.target as CheckboxElement;\n    const { checked } = input;\n    this._schemaMock = checked;\n    this._computeExampleSchema();\n  }\n\n  protected override render(): TemplateResult {\n    return html`\n    <div class=\"container\">\n      ${this._structureTemplate()}\n      ${this._editorTemplate()}\n    </div>\n    `;\n  }\n\n  protected _structureTemplate(): TemplateResult {\n    return html`\n    <div class=\"structure\">\n      <data-schema-document\n        .root=\"${this.root}\"\n        .key=\"${this.selected}\"\n        .selectedProperty=\"${this.selectedProperty || this.selectedAssociation}\"\n        ?associationDropZone=\"${this._highlightEntityDropZone}\"\n        editable\n        @change=\"${this._schemaEntityChangeHandler}\"\n        @edit=\"${this._schemaEntityEditHandler}\"\n      ></data-schema-document>\n      ${this.renderSchema()}\n    </div>\n    `;\n  }\n\n  protected _editorTemplate(): TemplateResult {\n    const { selectedProperty, selectedAssociation } = this;\n    let content: TemplateResult;\n    if (selectedProperty) {\n      content = this._propertyEditorTemplate(selectedProperty);\n    } else if (selectedAssociation) {\n      content = this._associationEditorTemplate(selectedAssociation);\n    } else {\n      content = this.renderEntityEditor();\n    }\n    return html`\n    <div class=\"editor\">${content}</div>\n    `;\n  }\n\n  protected _propertyEditorTemplate(id: string): TemplateResult {\n    return html`\n    <div class=\"editor-title title-large\">\n      Data Property\n      <ui-icon-button class=\"title-icon\" title=\"Close this editor\" @click=\"${this._cancelEditor}\">\n        <ui-icon icon=\"close\"></ui-icon>\n      </ui-icon-button>\n    </div>\n    <data-property-form \n      .root=\"${this.root}\" \n      .key=\"${id}\" \n      @change=\"${this._propertyChangeHandler}\"\n      class=\"editor-form\"\n    ></data-property-form>\n    `;\n  }\n\n  protected _associationEditorTemplate(id: string): TemplateResult {\n    return html`\n    <div class=\"editor-title title-large\">\n      Data Association\n      <ui-icon-button class=\"title-icon\" title=\"Close this editor\" @click=\"${this._cancelEditor}\">\n        <ui-icon icon=\"close\"></ui-icon>\n      </ui-icon-button>\n    </div>\n    <data-association-form\n      .root=\"${this.root}\" \n      .key=\"${id}\" \n      @change=\"${this._propertyChangeHandler}\"\n      class=\"editor-form\"\n    ></data-association-form>\n    `;\n  }\n\n  protected renderEntityEditor(): TemplateResult {\n    return html`\n    <div class=\"editor-title title-large\">Data Entity</div>\n    <data-entity-form \n      .root=\"${this.root}\" \n      .key=\"${this.selected}\"\n      ?parentDropZone=\"${this._highlightEntityDropZone}\"\n      @change=\"${this._entityChangeHandler}\"\n      @namechange=\"${this._entityNameHandler}\"\n      class=\"editor-form\"\n    ></data-entity-form>\n    `;\n  }\n\n  protected renderSchema(): TemplateResult {\n    return html`\n    <details class=\"schema-card\" @toggle=\"${this._schemaOpenHandler}\">\n      <summary class=\"title-medium\">Example</summary>\n      <div class=\"example-content\">\n        <div class=\"mime-options\">\n          <span id=\"mimeLabel\" class=\"label-large\">Mime type:</span>\n          <label class=\"label-large\">\n            <ui-radio \n              name=\"mimeValue\" \n              value=\"application/json\" \n              .checked=\"${this._schemaMime === 'application/json'}\" \n              @change=\"${this._schemaMimeHandler}\"\n              aria-describedby=\"mimeLabel\"\n            ></ui-radio>\n            application/json\n          </label>\n          <label class=\"label-large\">\n            <ui-radio \n              name=\"mimeValue\" \n              value=\"application/xml\" \n              .checked=\"${this._schemaMime === 'application/xml'}\" \n              @change=\"${this._schemaMimeHandler}\"\n              aria-describedby=\"mimeLabel\"\n            ></ui-radio>\n            application/xml\n          </label>\n          <label class=\"label-large\">\n            <ui-checkbox\n              .checked=\"${this._schemaMock}\" \n              @change=\"${this._mockSchemaValuesHandler}\" \n              title=\"Generates random values when examples are not defined.\"\n            ></ui-checkbox>\n            Mock values\n          </label>\n        </div>\n        <pre class=\"code-value text-selectable\"><code>${this._schemaExample}</code></pre>\n      </div>\n    </details>`;\n  }\n}\n"]}
+{"version":3,"file":"DataEntityEditorElement.js","sourceRoot":"","sources":["../../../src/elements/schema-design/DataEntityEditorElement.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, CSSResult, html, PropertyValues, TemplateResult } from \"lit\";\nimport { property, query, state } from \"lit/decorators.js\";\nimport { DataEntityKind, DataNamespace } from \"@api-client/core/build/browser.js\";\nimport ApiElement from \"../ApiElement.js\";\nimport theme from '../theme.js';\nimport schemaCommon from './schemaCommon.js';\nimport EditorCommon from './CommonStyles.js';\nimport MarkdownStyles from '../highlight/MarkdownStyles.js';\nimport typography from \"../../styles/m3/typography.module.js\";\nimport DataSchemaDocument from \"./DataSchemaDocument.js\";\nimport RadioElement from \"../../ui/input/RadioElement.js\";\nimport CheckboxElement from \"../../ui/input/CheckboxElement.js\";\nimport '../../define/ui/ui-icon.js';\nimport '../../define/ui/ui-icon-button.js';\nimport '../../define/ui/ui-radio.js';\nimport '../../define/ui/ui-checkbox.js';\nimport '../../define/highlight/marked-highlight.js';\nimport '../../define/data/data-association-form.js';\nimport '../../define/data/data-property-form.js';\nimport '../../define/data/data-entity-form.js';\nimport '../../define/data/data-schema-document.js';\n\n/**\n * The DataEntity editor UI and logic.\n * \n * @fires change - When the entity has changed and the parent element / app should update the value in the store.\n * @fires namechange - When a name of the data entity has changed. This triggers a render in the navigation. This is fired after the `change` event.\n */\nexport default class DataEntityEditorElement extends ApiElement {\n  static override get styles(): CSSResult[] {\n    return [\n      theme,\n      schemaCommon,\n      MarkdownStyles,\n      EditorCommon,\n      typography,\n      css`\n      :host {\n        display: block;\n        height: 100%;\n      }\n\n      .container {\n        display: flex;\n        flex-direction: row;\n        height: inherit;\n        flex: 1;\n      }\n\n      .structure {\n        flex: 8;\n        overflow: hidden;\n      }\n\n      .editor {\n        flex: 4;\n        background-color: var(--md-sys-color-surface);\n        border-radius: var(--md-sys-shape-corner-small);\n        box-shadow: var(--md-sys-elevation-1);\n        overflow: hidden;\n        display: flex;\n        flex-direction: column;\n        /* for the box shadow */\n        margin: 4px; \n      }\n\n      .editor-form {\n        overflow: auto;\n      }\n\n      .mime-options {\n        box-sizing: border-box;\n        display: flex;\n        align-items: center;\n      }\n\n      .schema-card {\n        margin: 20px 20px 20px 0px;\n      }\n      `,\n    ];\n  }\n\n  /**\n   * The read data namespace.\n   */\n  @property({ type: Object }) root?: DataNamespace;\n\n  /**\n   * The selected entity.\n   */\n  @property({ type: String }) selected?: string;\n\n  /**\n   * The key of the selected property being edited.\n   */\n  @property({ type: String }) selectedProperty?: string;\n\n  /**\n   * The key of the selected association being edited.\n   */\n  @property({ type: String }) selectedAssociation?: string;\n\n  @state() protected _highlightEntityDropZone?: boolean;\n\n  @state() protected _schemaExample?: string | number | boolean | null;\n\n  @state() protected _schemaMime: string;\n\n  @state() protected _schemaMock: boolean;\n\n  protected _schemaOpened?: boolean;\n\n  @query('data-schema-document')\n  protected _schemaDoc?: DataSchemaDocument;\n\n  constructor() {\n    super();\n    this._schemaMime = 'application/json';\n    this._schemaMock = true;\n    this.addEventListener('dragenter', this._dragEnterHandler.bind(this));\n    this.addEventListener('dragleave', this._dragLeaveHandler.bind(this));\n  }\n\n  protected override willUpdate(cp: PropertyValues<this>): void {\n    super.willUpdate(cp);\n    if (cp.has('selected')) {\n      this._computeExampleSchemaIfNeeded();\n    }\n  }\n\n  protected _notifyChanged(): void {\n    this.dispatchEvent(new Event('change'));\n    if (this._highlightEntityDropZone) {\n      this._highlightEntityDropZone = false;\n    }\n  }\n\n  protected _dragEnterHandler(e: DragEvent): void {\n    const { dataTransfer: dt } = e;\n    if (!dt) {\n      return;\n    }\n    if (![...dt.types].includes(DataEntityKind.toLowerCase())) {\n      return;\n    }\n    this._highlightEntityDropZone = true;\n    this.selectedProperty = undefined;\n    this.selectedAssociation = undefined;\n  }\n\n  protected _dragLeaveHandler(e: DragEvent): void {\n    const { dataTransfer: dt } = e;\n    if (!dt) {\n      return;\n    }\n    if (![...dt.types].includes(DataEntityKind.toLowerCase())) {\n      return;\n    }\n    this._highlightEntityDropZone = false;\n  }\n\n  protected _propertyChangeHandler(): void {\n    this._notifyChanged();\n    const { _schemaDoc } = this;\n    if (_schemaDoc) {\n      _schemaDoc.requestUpdate();\n    }\n    this._computeExampleSchemaIfNeeded();\n  }\n\n  protected _entityChangeHandler(): void {\n    this._notifyChanged();\n    const { _schemaDoc } = this;\n    if (_schemaDoc) {\n      _schemaDoc.requestUpdate();\n    }\n    this._computeExampleSchemaIfNeeded();\n  }\n\n  protected _schemaEntityChangeHandler(): void {\n    this._notifyChanged();\n    this.requestUpdate();\n    this._computeExampleSchemaIfNeeded();\n  }\n\n  protected _schemaEntityEditHandler(e: CustomEvent): void {\n    const { type, key } = e.detail;\n    if (type === 'property') {\n      this.selectedProperty = key;\n      this.selectedAssociation = undefined;\n    } else if (type === 'association') {\n      this.selectedProperty = undefined;\n      this.selectedAssociation = key;\n    }\n    this._computeExampleSchemaIfNeeded();\n  }\n\n  protected _entityNameHandler(): void {\n    // just retarget\n    this.dispatchEvent(new Event('namechange'));\n    this._computeExampleSchemaIfNeeded();\n  }\n\n  protected _cancelEditor(): void {\n    this.selectedProperty = undefined;\n    this.selectedAssociation = undefined;\n  }\n\n  protected _computeExampleSchema(): void {\n    const { selected, root } = this;\n    const entity = root?.definitions.entities.find(i => i.key === selected);\n    if (!entity) {\n      this._schemaExample = undefined;\n      return\n    }\n    this._schemaExample = entity.toExample(this._schemaMime, {\n      renderMocked: this._schemaMock,\n      renderExamples: true,\n      renderOptional: true,\n    });\n  }\n\n  protected _computeExampleSchemaIfNeeded(): void {\n    if (this._schemaOpened) {\n      this._computeExampleSchema();\n    }\n  }\n\n  protected _schemaOpenHandler(e: Event): void {\n    const details = e.target as HTMLDetailsElement;\n    this._schemaOpened = details.open;\n    if (details.open) {\n      this._computeExampleSchema();\n    }\n  }\n\n  protected _schemaMimeHandler(e: Event): void {\n    const button = e.target as RadioElement;\n    if (!button.checked) {\n      return;\n    }\n    this._schemaMime = button.value as string;\n    this._computeExampleSchemaIfNeeded();\n  }\n\n  protected _mockSchemaValuesHandler(e: Event): void {\n    const input = e.target as CheckboxElement;\n    const { checked } = input;\n    this._schemaMock = checked;\n    this._computeExampleSchema();\n  }\n\n  protected override render(): TemplateResult {\n    return html`\n    <div class=\"container\">\n      ${this._structureTemplate()}\n      ${this._editorTemplate()}\n    </div>\n    `;\n  }\n\n  protected _structureTemplate(): TemplateResult {\n    return html`\n    <div class=\"structure\">\n      <data-schema-document\n        .root=\"${this.root}\"\n        .key=\"${this.selected}\"\n        .selectedProperty=\"${this.selectedProperty || this.selectedAssociation}\"\n        ?associationDropZone=\"${this._highlightEntityDropZone}\"\n        editable\n        @change=\"${this._schemaEntityChangeHandler}\"\n        @edit=\"${this._schemaEntityEditHandler}\"\n      ></data-schema-document>\n      ${this.renderSchema()}\n    </div>\n    `;\n  }\n\n  protected _editorTemplate(): TemplateResult {\n    const { selectedProperty, selectedAssociation } = this;\n    let content: TemplateResult;\n    if (selectedProperty) {\n      content = this._propertyEditorTemplate(selectedProperty);\n    } else if (selectedAssociation) {\n      content = this._associationEditorTemplate(selectedAssociation);\n    } else {\n      content = this.renderEntityEditor();\n    }\n    return html`\n    <div class=\"editor\">${content}</div>\n    `;\n  }\n\n  protected _propertyEditorTemplate(id: string): TemplateResult {\n    return html`\n    <div class=\"editor-title title-large\">\n      Data Property\n      <ui-icon-button class=\"title-icon\" title=\"Close this editor\" @click=\"${this._cancelEditor}\">\n        <ui-icon icon=\"close\"></ui-icon>\n      </ui-icon-button>\n    </div>\n    <data-property-form \n      .root=\"${this.root}\" \n      .key=\"${id}\" \n      @change=\"${this._propertyChangeHandler}\"\n      class=\"editor-form\"\n    ></data-property-form>\n    `;\n  }\n\n  protected _associationEditorTemplate(id: string): TemplateResult {\n    return html`\n    <div class=\"editor-title title-large\">\n      Data Association\n      <ui-icon-button class=\"title-icon\" title=\"Close this editor\" @click=\"${this._cancelEditor}\">\n        <ui-icon icon=\"close\"></ui-icon>\n      </ui-icon-button>\n    </div>\n    <data-association-form\n      .root=\"${this.root}\" \n      .key=\"${id}\" \n      @change=\"${this._propertyChangeHandler}\"\n      class=\"editor-form\"\n    ></data-association-form>\n    `;\n  }\n\n  protected renderEntityEditor(): TemplateResult {\n    return html`\n    <div class=\"editor-title title-large\">Data Entity</div>\n    <data-entity-form \n      .root=\"${this.root}\" \n      .key=\"${this.selected}\"\n      ?parentDropZone=\"${this._highlightEntityDropZone}\"\n      @change=\"${this._entityChangeHandler}\"\n      @namechange=\"${this._entityNameHandler}\"\n      class=\"editor-form\"\n    ></data-entity-form>\n    `;\n  }\n\n  protected renderSchema(): TemplateResult {\n    return html`\n    <details class=\"schema-card\" @toggle=\"${this._schemaOpenHandler}\">\n      <summary class=\"title-medium\">Example</summary>\n      <div class=\"example-content\">\n        <div class=\"mime-options\">\n          <span id=\"mimeLabel\" class=\"label-large\">Mime type:</span>\n          <label class=\"label-large\">\n            <ui-radio \n              name=\"mimeValue\" \n              value=\"application/json\" \n              .checked=\"${this._schemaMime === 'application/json'}\" \n              @change=\"${this._schemaMimeHandler}\"\n              aria-describedby=\"mimeLabel\"\n            ></ui-radio>\n            application/json\n          </label>\n          <label class=\"label-large\">\n            <ui-radio \n              name=\"mimeValue\" \n              value=\"application/xml\" \n              .checked=\"${this._schemaMime === 'application/xml'}\" \n              @change=\"${this._schemaMimeHandler}\"\n              aria-describedby=\"mimeLabel\"\n            ></ui-radio>\n            application/xml\n          </label>\n          <label class=\"label-large\">\n            <ui-checkbox\n              .checked=\"${this._schemaMock}\" \n              @change=\"${this._mockSchemaValuesHandler}\" \n              title=\"Generates random values when examples are not defined.\"\n            ></ui-checkbox>\n            Mock values\n          </label>\n        </div>\n        <pre class=\"code-value text-selectable\"><code>${this._schemaExample}</code></pre>\n      </div>\n    </details>`;\n  }\n}\n"]}

package/dist/elements/schema-design/DataModelVisualizationElement.js

@@ -99,22 +99,6 @@ export default class DataModelVisualizationElement extends ApiElement {
       `,
         ];
     }
-    /**
-     * The key of the entity to edit.
-     */
-    key;
-    /**
-     * The read data namespace.
-     */
-    root;
-    /**
-     * The computed entity when the key or root change.
-     */
-    _model;
-    _data;
-    _workspace;
-    groupSelectionPlugin;
-    dndPlugin;
     firstUpdated(cp) {
         super.firstUpdated(cp);
         const node = this._workspace;

package/dist/elements/schema-design/DataModelVisualizationElement.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataModelVisualizationElement.js","sourceRoot":"","sources":["../../../src/elements/schema-design/DataModelVisualizationElement.ts"],"names":[],"mappings":"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","sourcesContent":["import { DataAssociation, DataEntity, DataModel, DataNamespace, DataProperty } from \"@api-client/core/build/browser.js\";\nimport { html, TemplateResult, nothing, CSSResult, css, PropertyValues } from \"lit\";\nimport { property, query, state } from \"lit/decorators.js\";\nimport { styleMap } from \"lit/directives/style-map.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport ApiElement from \"../ApiElement.js\";\nimport VizWorkspaceElement from \"../../visualization/elements/VizWorkspaceElement.js\";\nimport { DataModelLayout } from \"../../visualization/plugin/positioning/DataModelLayout.js\";\nimport '../../define/visualization/viz-workspace.js';\nimport '../../define/visualization/viz-association.js';\nimport '../../define/ui/ui-icon.js';\nimport { GroupSelection } from \"../../visualization/plugin/group-selection/GroupSelection.js\";\nimport { DragAndDropPlugin } from \"../../visualization/plugin/dnd/DragAndDropPlugin.js\";\n\ninterface VizModel {\n  id?: string;\n  entity: DataEntity;\n  type: 'parent' | 'association' | 'internal' | 'external' | 'self';\n  x?: number;\n  y?: number;\n}\n\nexport default class DataModelVisualizationElement extends ApiElement {\n  static override get styles(): CSSResult[] {\n    return [\n      css`\n      :host {\n        display: block;\n      }\n\n      viz-workspace {\n        flex: 1;\n        height: 100%;\n      }\n\n      [data-selectable][data-selected] {\n        border: 2px var(--workspace-entity-selection-border-color) solid;\n        background-color: var(--workspace-entity-selection-background-color, #fff);\n        color: var(--workspace-entity-selection-color, unset);\n      }\n\n      [data-selectable][data-secondary-selected] {\n        border: 2px var(--workspace-entity-secondary-selection-border-color) solid;\n        background-color: var(--workspace-entity-secondary-selection-background-color, #fff);\n      }\n\n      .data-entity {\n        border: 2px var(--workspace-entity-border-color, #9e9e9e) solid;\n        border-radius: var(--workspace-entity-border-radius, 8px);\n        background-color: var(--workspace-entity-background-color, #fff);\n        min-width: 240px;\n        box-shadow: var(--workspace-entity-box-shadow, none);\n      }\n\n      .title {\n        display: flex;\n        align-items: center;\n        margin: 12px 20px;\n      }\n\n      .title .label {\n        padding: 0;\n        margin: 0;\n        /* font-weight: 300; */\n        /* font-size: 1.25rem; */\n        margin-left: 8px;\n\n        font-family: var(--md-sys-typescale-title-large-font-family-name);\n        font-style: var(--md-sys-typescale-title-large-font-family-style);\n        font-weight: var(--md-sys-typescale-title-large-font-weight);\n        font-size: var(--md-sys-typescale-title-large-font-size);\n        letter-spacing: var(--md-sys-typescale-title-large-tracking);\n        line-height: var(--md-sys-typescale-title-large-height);\n        text-transform: var(--md-sys-typescale-title-large-text-transform);\n        text-decoration: var(--md-sys-typescale-title-large-text-decoration);\n      }\n\n      .properties {\n        margin: 20px 0;\n        padding: 0;\n        list-style: none;\n      }\n\n      .property {\n        padding: 0 20px;\n        height: 36px;\n        display: flex;\n        align-items: center;\n\n        font-family: var(--md-sys-typescale-label-medium-font-family-name);\n        font-style: var(--md-sys-typescale-label-medium-font-family-style);\n        font-weight: var(--md-sys-typescale-label-medium-font-weight);\n        font-size: var(--md-sys-typescale-label-medium-font-size);\n        letter-spacing: var(--md-sys-typescale-label-medium-tracking);\n        line-height: var(--md-sys-typescale-label-medium-height);\n        text-transform: var(--md-sys-typescale-label-medium-text-transform);\n        text-decoration: var(--md-sys-typescale-label-medium-text-decoration);\n      }\n\n      .property.primary,\n      .property.index {\n        font-weight: 700;\n      }\n\n      .data-type {\n        margin-left: auto;\n      }\n      `,\n    ];\n  }\n\n  /**\n   * The key of the entity to edit.\n   */\n  @property({ type: String, reflect: true }) key?: string;\n\n  /**\n   * The read data namespace.\n   */\n  @property({ type: Object }) root?: DataNamespace;\n\n  /**\n   * The computed entity when the key or root change.\n   */\n  @state() protected _model?: DataModel;\n\n  @state() protected _data?: VizModel[];\n\n  @query('viz-workspace') protected _workspace?: VizWorkspaceElement;\n\n  protected groupSelectionPlugin?: GroupSelection;\n\n  protected dndPlugin?: DragAndDropPlugin;\n\n  override firstUpdated(cp: PropertyValues<this>): void {\n    super.firstUpdated(cp);\n    const node = this._workspace;\n    if (!node) {\n      return;\n    }\n    this.dndPlugin = new DragAndDropPlugin(node);\n    this.dndPlugin.connect();\n    this.groupSelectionPlugin = new GroupSelection(node);\n    this.groupSelectionPlugin.connect();\n  }\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    if (this.dndPlugin) {\n      this.dndPlugin.connect();\n    }\n    if (this.groupSelectionPlugin) {\n      this.groupSelectionPlugin.connect();\n    }\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    if (this.dndPlugin) {\n      this.dndPlugin.disconnect();\n    }\n    if (this.groupSelectionPlugin) {\n      this.groupSelectionPlugin.disconnect();\n    }\n  }\n\n  protected override willUpdate(cp: PropertyValues<this>): void {\n    if (cp.has('key')) {\n      this._computeModel();\n    }\n  }\n\n  /**\n   * Reloads the generated view model, runs the auto layout, and updated the view.\n   * Note, this is very expensive operation. It updates the view at least twice.\n   * THe layout computation can be very complex.\n   */\n  async refresh(): Promise<void> {\n    this._createVizData();\n    await this.updateComplete;\n    await this._runLayout();\n  }\n\n  /**\n   * Computes the view value for the property.\n   * This should be called before the update is complete so this won't trigger another update.\n   */\n  protected _computeModel(): void {\n    const { root, key } = this;\n    if (!root || !key) {\n      this._model = undefined;\n      return;\n    }\n    this._model = root.definitions.models.find(i => i.key === key);\n    this.refresh();\n  }\n\n  protected async _runLayout(): Promise<void> {\n    const { _workspace: workspace, _model: dm, _data: list } = this;\n    if (!workspace || !dm || !list) {\n      return;\n    }\n    const layout = new DataModelLayout(workspace);\n    layout.nodeSeparation = 80;\n    layout.rankSeparation = 80;\n\n    const result = layout.layout(dm);\n    if (!result) {\n      return;\n    }\n    result.nodes.forEach((info) => {\n      const item = list.find(i => i.entity.key === info.id);\n      if (!item) {\n        return;\n      }\n      item.x = info.node.x;\n      item.y = info.node.y;\n    });\n    this.requestUpdate();\n    await this.updateComplete;\n    workspace.edges.recalculate();\n  }\n\n  protected _createVizData(): void {\n    const { _model: dm, root } = this;\n    if (!dm || !root) {\n      this._data = undefined;\n      return;\n    }\n    const result: VizModel[] = [];\n\n    dm.entities.forEach((entity) => {\n      result.push({ entity, type: 'internal' });\n\n      entity.parents.forEach(id => {\n        if (result.some(i => i.entity.key === id) || dm.entities.some(i => i.key === id)) {\n          // don't add a parent that is already added.\n          return;\n        }\n        const parent = root.definitions.entities.find(i => i.key === id);\n        if (parent) {\n          result.push({ entity: parent, type: 'parent' });\n        }\n      });\n\n      entity.associations.forEach((assoc) => {\n        if (!assoc.targets.length) {\n          return;\n        }\n        const targets = assoc.getTargets();\n        if (targets.length === 1) {\n          // classic association\n          const [target] = targets;\n          if (result.some(i => i.entity.key === target.key) || dm.entities.some(i => i.key === target.key)) {\n            return;\n          }\n          const isSelf = entity === target;\n          result.push({ \n            entity: target, \n            type: isSelf ? 'self' : 'association',\n          });\n        } else {\n          // TODO: Union layout.\n          // console.log(targets);\n        }\n      });\n\n      // entity.associations.forEach((assoc) => {\n      //   if (!assoc.target) {\n      //     // ignore associations without a target\n      //     return;\n      //   }\n      //   if (result.some(i => i.entity.key === assoc.target) || dm.entities.some(i => i.key === assoc.target)) {\n      //     return;\n      //   }\n      //   const target = assoc.getTarget();\n      //   if (target) {\n      //     const isSelf = entity === target;\n      //     result.push({ \n      //       entity: target, \n      //       type: isSelf ? 'self' : 'association',\n      //     });\n      //   }\n      // });\n    });\n\n    this._data = result;\n  }\n\n  protected async _repositionHandler(e: CustomEvent): Promise<void> {\n    const node = e.target as HTMLElement;\n    const { key } = node.dataset;\n    if (!key) {\n      return;\n    }\n    const model = this._data?.find(i => i.entity.key === key);\n    if (!model) {\n      return;\n    }\n    const { dx, dy } = e.detail;\n    const { x=0, y=0 } = model;\n    model.x = x + dx;\n    model.y = y + dy;\n    this.requestUpdate();\n    await this.updateComplete;\n    this._workspace?.edges.recalculate();\n  }\n\n  protected override render(): TemplateResult {\n    return html`\n    <viz-workspace\n      @positionchange=\"${this._repositionHandler}\"\n    >${this._modelContents()}</viz-workspace>\n    `;\n  }\n\n  protected _modelContents(): TemplateResult[] | typeof nothing {\n    const { _data: list } = this;\n    if (!list || !list.length) {\n      return nothing;\n    }\n    return list.map(e => this._entityVisualization(e));\n  }\n\n  protected _entityVisualization(model: VizModel): TemplateResult {\n    const { entity, x = 0, y = 0, type } = model;\n    const { info, key, associations, parents } = entity;\n    const styles = {\n      transform: `translate(${x}px, ${y}px)`,\n    };\n    return html`\n    <div class=\"data-entity\" data-key=\"${key}\" data-type=\"${type}\" data-selectable=\"true\" draggable=\"true\" style=\"${styleMap(styles)}\">\n      <div class=\"content\">\n        <div class=\"title\">\n          <ui-icon icon=\"schemaEntity\"></ui-icon>\n          <p class=\"label\">${info.renderLabel}</p>\n        </div>\n        ${this._propertiesListTemplate(entity)}\n      </div>\n      ${associations.map(assoc => this._associationTemplate(assoc))}\n      ${parents.map(id => this._parentAssociationTemplate(id))}\n    </div>\n    `;\n  }\n\n  protected _propertiesListTemplate(entity: DataEntity): TemplateResult {\n    const { properties } = entity;\n    return html`\n    <ul class=\"properties\">\n      ${properties.map(p => this._propertyItemTemplate(p))}\n    </ul>\n    `;\n  }\n\n  protected _propertyItemTemplate(item: DataProperty): TemplateResult {\n    const { key, info, type, deprecated = false, primary = false, index = false } = item;\n    const classes = {\n      property: true,\n      deprecated,\n      primary,\n      index,\n    };\n    return html`\n    <li data-key=\"${key}\" class=\"${classMap(classes)}\">\n      <span class=\"label\">${info.renderLabel}</span>\n      <span class=\"data-type\">${type}</span>\n    </li>\n    `;\n  }\n\n  protected _associationTemplate(item: DataAssociation): TemplateResult | typeof nothing {\n    const { key, info, targets } = item;\n    if (!targets.length) {\n      return nothing;\n    }\n    if (targets.length === 1) {\n      return html`<viz-association \n        data-key=\"${key}\" \n        data-target=\"${targets[0]}\"\n        title=\"${info.renderLabel}\"\n        data-selectable\n        data-marker-start=\"association\"\n      ></viz-association>`;\n    }\n    // TODO: Make union associations\n    return nothing;\n  }\n\n  protected _parentAssociationTemplate(id: string): TemplateResult {\n    return html`<viz-association \n      data-key=\"child-${id}\" \n      data-target=\"${ifDefined(id)}\"\n      data-selectable\n        data-marker-end=\"parent\"\n    ></viz-association>`;\n  }\n}\n"]}
+{"version":3,"file":"DataModelVisualizationElement.js","sourceRoot":"","sources":["../../../src/elements/schema-design/DataModelVisualizationElement.ts"],"names":[],"mappings":"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","sourcesContent":["import { DataAssociation, DataEntity, DataModel, DataNamespace, DataProperty } from \"@api-client/core/build/browser.js\";\nimport { html, TemplateResult, nothing, CSSResult, css, PropertyValues } from \"lit\";\nimport { property, query, state } from \"lit/decorators.js\";\nimport { styleMap } from \"lit/directives/style-map.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport ApiElement from \"../ApiElement.js\";\nimport VizWorkspaceElement from \"../../visualization/elements/VizWorkspaceElement.js\";\nimport { DataModelLayout } from \"../../visualization/plugin/positioning/DataModelLayout.js\";\nimport '../../define/visualization/viz-workspace.js';\nimport '../../define/visualization/viz-association.js';\nimport '../../define/ui/ui-icon.js';\nimport { GroupSelection } from \"../../visualization/plugin/group-selection/GroupSelection.js\";\nimport { DragAndDropPlugin } from \"../../visualization/plugin/dnd/DragAndDropPlugin.js\";\n\ninterface VizModel {\n  id?: string;\n  entity: DataEntity;\n  type: 'parent' | 'association' | 'internal' | 'external' | 'self';\n  x?: number;\n  y?: number;\n}\n\nexport default class DataModelVisualizationElement extends ApiElement {\n  static override get styles(): CSSResult[] {\n    return [\n      css`\n      :host {\n        display: block;\n      }\n\n      viz-workspace {\n        flex: 1;\n        height: 100%;\n      }\n\n      [data-selectable][data-selected] {\n        border: 2px var(--workspace-entity-selection-border-color) solid;\n        background-color: var(--workspace-entity-selection-background-color, #fff);\n        color: var(--workspace-entity-selection-color, unset);\n      }\n\n      [data-selectable][data-secondary-selected] {\n        border: 2px var(--workspace-entity-secondary-selection-border-color) solid;\n        background-color: var(--workspace-entity-secondary-selection-background-color, #fff);\n      }\n\n      .data-entity {\n        border: 2px var(--workspace-entity-border-color, #9e9e9e) solid;\n        border-radius: var(--workspace-entity-border-radius, 8px);\n        background-color: var(--workspace-entity-background-color, #fff);\n        min-width: 240px;\n        box-shadow: var(--workspace-entity-box-shadow, none);\n      }\n\n      .title {\n        display: flex;\n        align-items: center;\n        margin: 12px 20px;\n      }\n\n      .title .label {\n        padding: 0;\n        margin: 0;\n        /* font-weight: 300; */\n        /* font-size: 1.25rem; */\n        margin-left: 8px;\n\n        font-family: var(--md-sys-typescale-title-large-font-family-name);\n        font-style: var(--md-sys-typescale-title-large-font-family-style);\n        font-weight: var(--md-sys-typescale-title-large-font-weight);\n        font-size: var(--md-sys-typescale-title-large-font-size);\n        letter-spacing: var(--md-sys-typescale-title-large-tracking);\n        line-height: var(--md-sys-typescale-title-large-height);\n        text-transform: var(--md-sys-typescale-title-large-text-transform);\n        text-decoration: var(--md-sys-typescale-title-large-text-decoration);\n      }\n\n      .properties {\n        margin: 20px 0;\n        padding: 0;\n        list-style: none;\n      }\n\n      .property {\n        padding: 0 20px;\n        height: 36px;\n        display: flex;\n        align-items: center;\n\n        font-family: var(--md-sys-typescale-label-medium-font-family-name);\n        font-style: var(--md-sys-typescale-label-medium-font-family-style);\n        font-weight: var(--md-sys-typescale-label-medium-font-weight);\n        font-size: var(--md-sys-typescale-label-medium-font-size);\n        letter-spacing: var(--md-sys-typescale-label-medium-tracking);\n        line-height: var(--md-sys-typescale-label-medium-height);\n        text-transform: var(--md-sys-typescale-label-medium-text-transform);\n        text-decoration: var(--md-sys-typescale-label-medium-text-decoration);\n      }\n\n      .property.primary,\n      .property.index {\n        font-weight: 700;\n      }\n\n      .data-type {\n        margin-left: auto;\n      }\n      `,\n    ];\n  }\n\n  /**\n   * The key of the entity to edit.\n   */\n  @property({ type: String, reflect: true }) key?: string;\n\n  /**\n   * The read data namespace.\n   */\n  @property({ type: Object }) root?: DataNamespace;\n\n  /**\n   * The computed entity when the key or root change.\n   */\n  @state() protected _model?: DataModel;\n\n  @state() protected _data?: VizModel[];\n\n  @query('viz-workspace') protected _workspace?: VizWorkspaceElement;\n\n  protected groupSelectionPlugin?: GroupSelection;\n\n  protected dndPlugin?: DragAndDropPlugin;\n\n  override firstUpdated(cp: PropertyValues<this>): void {\n    super.firstUpdated(cp);\n    const node = this._workspace;\n    if (!node) {\n      return;\n    }\n    this.dndPlugin = new DragAndDropPlugin(node);\n    this.dndPlugin.connect();\n    this.groupSelectionPlugin = new GroupSelection(node);\n    this.groupSelectionPlugin.connect();\n  }\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    if (this.dndPlugin) {\n      this.dndPlugin.connect();\n    }\n    if (this.groupSelectionPlugin) {\n      this.groupSelectionPlugin.connect();\n    }\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    if (this.dndPlugin) {\n      this.dndPlugin.disconnect();\n    }\n    if (this.groupSelectionPlugin) {\n      this.groupSelectionPlugin.disconnect();\n    }\n  }\n\n  protected override willUpdate(cp: PropertyValues<this>): void {\n    if (cp.has('key')) {\n      this._computeModel();\n    }\n  }\n\n  /**\n   * Reloads the generated view model, runs the auto layout, and updated the view.\n   * Note, this is very expensive operation. It updates the view at least twice.\n   * THe layout computation can be very complex.\n   */\n  async refresh(): Promise<void> {\n    this._createVizData();\n    await this.updateComplete;\n    await this._runLayout();\n  }\n\n  /**\n   * Computes the view value for the property.\n   * This should be called before the update is complete so this won't trigger another update.\n   */\n  protected _computeModel(): void {\n    const { root, key } = this;\n    if (!root || !key) {\n      this._model = undefined;\n      return;\n    }\n    this._model = root.definitions.models.find(i => i.key === key);\n    this.refresh();\n  }\n\n  protected async _runLayout(): Promise<void> {\n    const { _workspace: workspace, _model: dm, _data: list } = this;\n    if (!workspace || !dm || !list) {\n      return;\n    }\n    const layout = new DataModelLayout(workspace);\n    layout.nodeSeparation = 80;\n    layout.rankSeparation = 80;\n\n    const result = layout.layout(dm);\n    if (!result) {\n      return;\n    }\n    result.nodes.forEach((info) => {\n      const item = list.find(i => i.entity.key === info.id);\n      if (!item) {\n        return;\n      }\n      item.x = info.node.x;\n      item.y = info.node.y;\n    });\n    this.requestUpdate();\n    await this.updateComplete;\n    workspace.edges.recalculate();\n  }\n\n  protected _createVizData(): void {\n    const { _model: dm, root } = this;\n    if (!dm || !root) {\n      this._data = undefined;\n      return;\n    }\n    const result: VizModel[] = [];\n\n    dm.entities.forEach((entity) => {\n      result.push({ entity, type: 'internal' });\n\n      entity.parents.forEach(id => {\n        if (result.some(i => i.entity.key === id) || dm.entities.some(i => i.key === id)) {\n          // don't add a parent that is already added.\n          return;\n        }\n        const parent = root.definitions.entities.find(i => i.key === id);\n        if (parent) {\n          result.push({ entity: parent, type: 'parent' });\n        }\n      });\n\n      entity.associations.forEach((assoc) => {\n        if (!assoc.targets.length) {\n          return;\n        }\n        const targets = assoc.getTargets();\n        if (targets.length === 1) {\n          // classic association\n          const [target] = targets;\n          if (result.some(i => i.entity.key === target.key) || dm.entities.some(i => i.key === target.key)) {\n            return;\n          }\n          const isSelf = entity === target;\n          result.push({ \n            entity: target, \n            type: isSelf ? 'self' : 'association',\n          });\n        } else {\n          // TODO: Union layout.\n          // console.log(targets);\n        }\n      });\n\n      // entity.associations.forEach((assoc) => {\n      //   if (!assoc.target) {\n      //     // ignore associations without a target\n      //     return;\n      //   }\n      //   if (result.some(i => i.entity.key === assoc.target) || dm.entities.some(i => i.key === assoc.target)) {\n      //     return;\n      //   }\n      //   const target = assoc.getTarget();\n      //   if (target) {\n      //     const isSelf = entity === target;\n      //     result.push({ \n      //       entity: target, \n      //       type: isSelf ? 'self' : 'association',\n      //     });\n      //   }\n      // });\n    });\n\n    this._data = result;\n  }\n\n  protected async _repositionHandler(e: CustomEvent): Promise<void> {\n    const node = e.target as HTMLElement;\n    const { key } = node.dataset;\n    if (!key) {\n      return;\n    }\n    const model = this._data?.find(i => i.entity.key === key);\n    if (!model) {\n      return;\n    }\n    const { dx, dy } = e.detail;\n    const { x=0, y=0 } = model;\n    model.x = x + dx;\n    model.y = y + dy;\n    this.requestUpdate();\n    await this.updateComplete;\n    this._workspace?.edges.recalculate();\n  }\n\n  protected override render(): TemplateResult {\n    return html`\n    <viz-workspace\n      @positionchange=\"${this._repositionHandler}\"\n    >${this._modelContents()}</viz-workspace>\n    `;\n  }\n\n  protected _modelContents(): TemplateResult[] | typeof nothing {\n    const { _data: list } = this;\n    if (!list || !list.length) {\n      return nothing;\n    }\n    return list.map(e => this._entityVisualization(e));\n  }\n\n  protected _entityVisualization(model: VizModel): TemplateResult {\n    const { entity, x = 0, y = 0, type } = model;\n    const { info, key, associations, parents } = entity;\n    const styles = {\n      transform: `translate(${x}px, ${y}px)`,\n    };\n    return html`\n    <div class=\"data-entity\" data-key=\"${key}\" data-type=\"${type}\" data-selectable=\"true\" draggable=\"true\" style=\"${styleMap(styles)}\">\n      <div class=\"content\">\n        <div class=\"title\">\n          <ui-icon icon=\"schemaEntity\"></ui-icon>\n          <p class=\"label\">${info.renderLabel}</p>\n        </div>\n        ${this._propertiesListTemplate(entity)}\n      </div>\n      ${associations.map(assoc => this._associationTemplate(assoc))}\n      ${parents.map(id => this._parentAssociationTemplate(id))}\n    </div>\n    `;\n  }\n\n  protected _propertiesListTemplate(entity: DataEntity): TemplateResult {\n    const { properties } = entity;\n    return html`\n    <ul class=\"properties\">\n      ${properties.map(p => this._propertyItemTemplate(p))}\n    </ul>\n    `;\n  }\n\n  protected _propertyItemTemplate(item: DataProperty): TemplateResult {\n    const { key, info, type, deprecated = false, primary = false, index = false } = item;\n    const classes = {\n      property: true,\n      deprecated,\n      primary,\n      index,\n    };\n    return html`\n    <li data-key=\"${key}\" class=\"${classMap(classes)}\">\n      <span class=\"label\">${info.renderLabel}</span>\n      <span class=\"data-type\">${type}</span>\n    </li>\n    `;\n  }\n\n  protected _associationTemplate(item: DataAssociation): TemplateResult | typeof nothing {\n    const { key, info, targets } = item;\n    if (!targets.length) {\n      return nothing;\n    }\n    if (targets.length === 1) {\n      return html`<viz-association \n        data-key=\"${key}\" \n        data-target=\"${targets[0]}\"\n        title=\"${info.renderLabel}\"\n        data-selectable\n        data-marker-start=\"association\"\n      ></viz-association>`;\n    }\n    // TODO: Make union associations\n    return nothing;\n  }\n\n  protected _parentAssociationTemplate(id: string): TemplateResult {\n    return html`<viz-association \n      data-key=\"child-${id}\" \n      data-target=\"${ifDefined(id)}\"\n      data-selectable\n        data-marker-end=\"parent\"\n    ></viz-association>`;\n  }\n}\n"]}

package/dist/elements/schema-design/DataSchemaDocument.js

@@ -78,42 +78,6 @@ export default class DataSchemaDocument extends ApiElement {
       `,
         ];
     }
-    /**
-     * The read data namespace.
-     */
-    root;
-    /**
-     * The entity key to render the schema documentation for
-     * @attribute
-     */
-    key;
-    /**
-     * The read data entity when the "selected" change.
-     */
-    _entity;
-    /**
-     * The key of the property being highlighted.
-     * @attribute
-     */
-    selectedProperty;
-    /**
-     * 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
-     */
-    associationDropZone;
-    /**
-     * 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
-     */
-    editable;
-    /**
-     * When dragging an entity over an existing association this is the key
-     * of the association hovered.
-     */
-    _dropAssociationTarget;
     willUpdate(cp) {
         if (cp.has('key')) {
             this.computeEntity();