@api-client/ui 0.0.4 → 0.0.7

package/src/elements/http/RequestConfigElement.ts

@@ -3,8 +3,8 @@ import { html, nothing, TemplateResult } from "lit";
 import { property } from "lit/decorators.js";
 import { live } from "lit/directives/live.js";
 import ApiElement from "../ApiElement.js";
-import SwitchElement from "../../ui/input/SwitchElement.js";
-import Input from "../../ui/input/Input.js";
+import type SwitchElement from "../../ui/input/SwitchElement.js";
+import type Input from "../../ui/input/Input.js";
 import '../../define/ui/ui-switch.js';
 import '../../define/ui/ui-text-field.js';
 
@@ -20,32 +20,32 @@ export default class RequestConfigElement extends ApiElement {
   protected handleEnabledToggle(e: Event): void {
     const node = e.currentTarget as SwitchElement;
     this.config.enabled = node.checked;
-    this.notifyChanged();
+    this.notifyChange();
     this.requestUpdate();
   }
 
   protected handleFollowRedirects(e: Event): void {
     const node = e.currentTarget as SwitchElement;
     this.config.followRedirects = node.checked;
-    this.notifyChanged();
+    this.notifyChange();
   }
 
   protected handleIgnoreCookies(e: Event): void {
     const node = e.currentTarget as SwitchElement;
     this.config.ignoreSessionCookies = node.checked;
-    this.notifyChanged();
+    this.notifyChange();
   }
 
   protected handleValidateCertificates(e: Event): void {
     const node = e.currentTarget as SwitchElement;
     this.config.validateCertificates = node.checked;
-    this.notifyChanged();
+    this.notifyChange();
   }
 
   protected handleDefaultHeaders(e: Event): void {
     const node = e.currentTarget as SwitchElement;
     this.config.defaultHeaders = node.checked;
-    this.notifyChanged();
+    this.notifyChange();
     this.requestUpdate();
   }
 
@@ -69,7 +69,7 @@ export default class RequestConfigElement extends ApiElement {
     }
     input.setCustomValidity('');
     input.checkValidity();
-    this.notifyChanged();
+    this.notifyChange();
     this.requestUpdate();
   }
 
@@ -89,7 +89,7 @@ export default class RequestConfigElement extends ApiElement {
       }
       this.config.defaultUserAgent = raw;
     }
-    this.notifyChanged();
+    this.notifyChange();
   }
 
   protected handleDefaultAcceptChange(e: Event): void {
@@ -108,11 +108,7 @@ export default class RequestConfigElement extends ApiElement {
       }
       this.config.defaultAccept = raw;
     }
-    this.notifyChanged();
-  }
-
-  protected notifyChanged(): void {
-    this.dispatchEvent(new Event('change'));
+    this.notifyChange();
   }
 
   protected override render(): TemplateResult {

package/src/elements/http/RequestEditor.ts

@@ -16,21 +16,22 @@ import {
   IHttpAssertion,
   RequestConfig,
   IRequestConfig,
+  IHttpFlow,
 } from '@api-client/core/build/browser.js';
-import { AuthorizationType } from '@api-client/core/build/src/models/Authorization.js';
-import UrlInputEditorElement from './UrlInput.js';
+import type { AuthorizationType } from '@api-client/core/build/src/models/Authorization.js';
 import { EventTypes } from '../../events/EventTypes.js';
 import { Events } from '../../events/Events.js';
-import BodyEditor from './BodyEditor.js';
 import ApiElement from '../ApiElement.js';
-import { TabSelectionDetail } from '../../ui/tabs/UiTabs.js';
-import UrlParamsForm from './UrlParamsForm.js';
-import HeadersForm from './HeadersForm.js';
 import { authTypeToLabel } from '../authorization/AuthLabels.js';
-import { Authorization } from '../authorization/ui/Authorization.js';
-import HttpAssertions from './HttpAssertions.js';
-import RequestConfigElement from './RequestConfigElement.js';
-import { UiDialogClosingReason } from '../../ui/dialog/UiDialog.js';
+import type UrlInputEditorElement from './UrlInput.js';
+import type BodyEditor from './BodyEditor.js';
+import type { TabSelectionDetail } from '../../ui/tabs/UiTabs.js';
+import type UrlParamsForm from './UrlParamsForm.js';
+import type HeadersForm from './HeadersForm.js';
+import type { Authorization } from '../authorization/ui/Authorization.js';
+import type HttpAssertions from './HttpAssertions.element.js';
+import type RequestConfigElement from './RequestConfigElement.js';
+import type { UiDialogClosingReason } from '../../ui/dialog/UiDialog.js';
 import '../../define/ui/ui-icon.js';
 import '../../define/http/http-url-input.js';
 import '../../define/http/http-url-params-form.js';
@@ -38,6 +39,7 @@ import '../../define/http/http-headers-form.js';
 import '../../define/http/http-snippets.js';
 import '../../define/http/http-body-editor.js';
 import '../../define/http/http-assertions.js';
+import '../../define/http/http-flows.js';
 import '../../define/http/http-request-config.js';
 import '../../define/ui/ui-dropdown-list.js';
 import '../../define/ui/ui-list.js';
@@ -54,11 +56,12 @@ import '../../define/authorization/apikey-authorization.js';
 import '../../define/authorization/oauth2-authorization.js';
 import '../../define/authorization/oidc-authorization.js';
 import '../../define/authorization/cc-authorization.js';
+import HttpFlows from './HttpFlows.element.js';
 
 export const HttpMethods = ['GET', 'POST', 'PUT', 'DELETE', 'PATCH', 'HEAD', 'CONNECT', 'OPTIONS', 'TRACE'];
 export const NonPayloadMethods = ['GET', 'HEAD'];
 
-export type SelectedTab = 'parameters' | 'headers' | 'payload' | 'authorization' | 'code-snippets' | 'assertions' | 'config';
+export type SelectedTab = 'parameters' | 'headers' | 'payload' | 'authorization' | 'code-snippets' | 'assertions' | 'config' | 'flows';
 
 export interface SendDetails {
   /**
@@ -125,6 +128,8 @@ export default class RequestEditor extends ApiElement {
 
   @property({ type: Array }) assertions?: IHttpAssertion[];
 
+  @property({ type: Array }) flows?: IHttpFlow[];
+
   /**
    * Redirect URL for the OAuth2 authorization.
    * If can be also set by dispatching `oauth2-redirect-url-changed`
@@ -432,8 +437,8 @@ export default class RequestEditor extends ApiElement {
     const request = this.getRequest();
     request.method = verb;
     this.requestUpdate();
-    this.notifyRequestChanged();
-    this.notifyChanged('method', verb);
+    this.notifyChange();
+    this.notifyPropertyChanged('method', verb);
     if (!this.isPayload && this.selectedTab === 'payload') {
       this.selectedTab = 'headers';
     }
@@ -462,8 +467,8 @@ export default class RequestEditor extends ApiElement {
     const request = this.getRequest();
     request.url = value;
     this.requestUpdate();
-    this.notifyRequestChanged();
-    this.notifyChanged('url', value);
+    this.notifyChange();
+    this.notifyPropertyChanged('url', value);
     this.computeSnippetsRequest();
   }
 
@@ -472,7 +477,7 @@ export default class RequestEditor extends ApiElement {
     this.selectedTab = info.select as SelectedTab;
     if (this.ui) {
       this.ui.selectedEditor = this.selectedTab;
-      this.notifyChanged('ui', this.ui);
+      this.notifyPropertyChanged('ui', this.ui);
     }
     CoreEvents.Telemetry.event({
       category: 'Request editor',
@@ -502,7 +507,7 @@ export default class RequestEditor extends ApiElement {
       this.ui.headers = {};
     }
     // this.ui.headers.source = source;
-    this.notifyChanged('ui', this.ui);
+    this.notifyPropertyChanged('ui', this.ui);
   }
 
   selectHeaders(model: IProperty[]): void {
@@ -512,7 +517,7 @@ export default class RequestEditor extends ApiElement {
     this.contentType = ct && ct.value as string;
     this.setPayloadMimeOption(request, this.contentType);
     this.requestUpdate();
-    this.notifyRequestChanged();
+    this.notifyChange();
     this.computeSnippetsRequest();
   }
 
@@ -533,7 +538,7 @@ export default class RequestEditor extends ApiElement {
     }
     this.ui.body.model = model;
     this.ui.body.selected = selected;
-    this.notifyChanged('ui', this.ui);
+    this.notifyPropertyChanged('ui', this.ui);
   }
 
   protected async updatePayload(value: DeserializedPayload, mime?: string): Promise<void> {
@@ -543,8 +548,8 @@ export default class RequestEditor extends ApiElement {
     this.setPayloadMimeOption(request, mime);
     this.payload = value;
     this.requestUpdate();
-    this.notifyRequestChanged();
-    this.notifyChanged('payload', value);
+    this.notifyChange();
+    this.notifyPropertyChanged('payload', value);
   }
 
   /**
@@ -561,6 +566,17 @@ export default class RequestEditor extends ApiElement {
     }
   }
 
+  protected handleFlows(e: Event): void {
+    e.preventDefault();
+    const node = e.target as HttpFlows;
+    this.selectFlows(node.model);
+  }
+
+  selectFlows(flows?: IHttpFlow[]): void {
+    this.flows = flows;
+    this.notifyChange();
+  }
+
   protected handleAssertions(e: Event): void {
     e.preventDefault();
     const node = e.target as HttpAssertions;
@@ -569,7 +585,7 @@ export default class RequestEditor extends ApiElement {
 
   selectAssertions(assertions?: IHttpAssertion[]): void {
     this.assertions = assertions;
-    this.notifyRequestChanged();
+    this.notifyChange();
   }
 
   protected handleConfig(e: Event): void {
@@ -579,15 +595,7 @@ export default class RequestEditor extends ApiElement {
 
   selectRequestConfig(config: IRequestConfig): void {
     this.config = config;
-    this.notifyRequestChanged();
-  }
-
-  /**
-   * Called when a value on one of the editors change.
-   * Dispatches non-bubbling `change` event.
-   */
-  protected notifyRequestChanged(): void {
-    this.dispatchEvent(new Event('change'));
+    this.notifyChange();
   }
 
   /**
@@ -596,7 +604,7 @@ export default class RequestEditor extends ApiElement {
    * @param type The property that changed. The resulting event type is the combination of this value and the `change` suffix.
    * @param value The value of the changed property
    */
-  protected notifyChanged(type: string, value: unknown): void {
+  protected notifyPropertyChanged(type: string, value: unknown): void {
     this.dispatchEvent(new CustomEvent(`${type}change`, {
       detail: {
         value
@@ -637,7 +645,7 @@ export default class RequestEditor extends ApiElement {
       this.authorization = [];
     }
     this.authorization.push(cnf.toJSON());
-    this.notifyChanged('authorization', this.authorization);
+    this.notifyPropertyChanged('authorization', this.authorization);
     this.requestUpdate();
     return cnf;
   }
@@ -659,7 +667,7 @@ export default class RequestEditor extends ApiElement {
     // eslint-disable-next-line no-param-reassign
     schema.valid = isValid;
     authorization[index] = schema;
-    this.notifyChanged('authorization', this.authorization);
+    this.notifyPropertyChanged('authorization', this.authorization);
   }
 
   /**
@@ -676,7 +684,7 @@ export default class RequestEditor extends ApiElement {
       return;
     }
     authorization.splice(index, 1);
-    this.notifyChanged('authorization', this.authorization);
+    this.notifyPropertyChanged('authorization', this.authorization);
     this.requestUpdate();
   }
 
@@ -825,6 +833,7 @@ export default class RequestEditor extends ApiElement {
       <ui-tab aria-controls="headers" id="headers-tab">Headers</ui-tab>
       <ui-tab ?hidden="${!isPayload}" aria-controls="payload" id="payload-tab">Body</ui-tab>
       <ui-tab aria-controls="authorization" id="authorization-tab">Authorization</ui-tab>
+      <ui-tab aria-controls="flows" id="flows-tab">Flows</ui-tab>
       <ui-tab aria-controls="assertions" id="assertions-tab">Assertions</ui-tab>
       <ui-tab aria-controls="config" id="config-tab">Config</ui-tab>
       <ui-tab aria-controls="code-snippets" id="code-snippets-tab">Code snippets</ui-tab>
@@ -843,12 +852,14 @@ export default class RequestEditor extends ApiElement {
     const codeVisible = selectedTab === 'code-snippets';
     const assertionsVisible = selectedTab === 'assertions';
     const configVisible = selectedTab === 'config';
+    const flowsVisible = selectedTab === 'flows';
     return html`
     <div class="panel">
       ${this.renderParameters(parametersVisible)}
     ${this.renderHeaders(headersVisible)}
     ${this.renderBody(bodyVisible)}
     ${this.renderAuthorization(authVisible)}
+    ${this.renderHttpFlows(flowsVisible)}
     ${this.renderAssertions(assertionsVisible)}
     ${this.renderRequestConfig(configVisible)}
     ${this.renderSnippets(codeVisible)}
@@ -1022,6 +1033,8 @@ export default class RequestEditor extends ApiElement {
       .authorization="${auth}"
       ?readOnly="${this.readOnly}"
       class="auth-panel"
+      canToggle
+      canDelete
       @change="${this.handleAuthChange}"
       @delete="${this.handleAuthDelete}"
     ></basic-authorization>
@@ -1034,6 +1047,8 @@ export default class RequestEditor extends ApiElement {
       .authorization="${auth}"
       ?readOnly="${this.readOnly}"
       class="auth-panel"
+      canToggle
+      canDelete
       @change="${this.handleAuthChange}"
       @delete="${this.handleAuthDelete}"
     ></bearer-authorization>
@@ -1046,6 +1061,8 @@ export default class RequestEditor extends ApiElement {
       .authorization="${auth}"
       ?readOnly="${this.readOnly}"
       class="auth-panel"
+      canToggle
+      canDelete
       @change="${this.handleAuthChange}"
       @delete="${this.handleAuthDelete}"
     ></ntlm-authorization>
@@ -1058,6 +1075,8 @@ export default class RequestEditor extends ApiElement {
       .authorization="${auth}"
       ?readOnly="${this.readOnly}"
       class="auth-panel"
+      canToggle
+      canDelete
       @change="${this.handleAuthChange}"
       @delete="${this.handleAuthDelete}"
       .defaultRedirectUri="${this.oauth2RedirectUri}"
@@ -1071,6 +1090,8 @@ export default class RequestEditor extends ApiElement {
       .authorization="${auth}"
       ?readOnly="${this.readOnly}"
       class="auth-panel"
+      canToggle
+      canDelete
       @change="${this.handleAuthChange}"
       @delete="${this.handleAuthDelete}"
       .defaultRedirectUri="${this.oauth2RedirectUri}"
@@ -1084,6 +1105,8 @@ export default class RequestEditor extends ApiElement {
       .authorization="${auth}"
       ?readOnly="${this.readOnly}"
       class="auth-panel"
+      canToggle
+      canDelete
       @change="${this.handleAuthChange}"
       @delete="${this.handleAuthDelete}"
     ></cc-authorization>
@@ -1096,12 +1119,31 @@ export default class RequestEditor extends ApiElement {
       .authorization="${auth}"
       ?readOnly="${this.readOnly}"
       class="auth-panel"
+      canToggle
+      canDelete
       @change="${this.handleAuthChange}"
       @delete="${this.handleAuthDelete}"
     ></apikey-authorization>
     `;
   }
 
+  protected renderHttpFlows(visible: boolean): TemplateResult | string {
+    if (!visible) {
+      return '';
+    }
+    const { flows = [] } = this;
+    return html`
+    <http-flows
+      aria-label="HTTP fLows" 
+      aria-labelledby="flows-tab" 
+      id="flows" 
+      role="tabpanel"
+      .model="${flows}" 
+      @change="${this.handleFlows}"
+    ></http-flows>
+    `;
+  }
+
   protected renderAssertions(visible: boolean): TemplateResult | string {
     if (!visible) {
       return '';

package/src/elements/http/UrlInput.ts

@@ -16,14 +16,14 @@ import { html, TemplateResult } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
 import { StyleInfo, styleMap } from 'lit/directives/style-map.js';
 import { eventOptions, property, query, state } from 'lit/decorators.js';
-import { IUrl } from '@api-client/core/build/browser.js';
+import type { IUrl } from '@api-client/core/build/browser.js';
 import { sortUrls } from '../../lib/http/Url.js';
 import { Events } from '../../events/Events.js';
 import { EventTypes } from '../../events/EventTypes.js';
 import ApiElement from '../ApiElement.js';
 import { ElementPositioning } from '../../ui/lib/ElementPositioning.js';
-import UiList from '../../ui/list/UiList.js';
-import UiListItem from '../../ui/list/UiListItem.js';
+import type UiList from '../../ui/list/UiList.js';
+import type UiListItem from '../../ui/list/UiListItem.js';
 import '../../define/ui/ui-listbox.js';
 import '../../define/ui/ui-list-item.js';
 import '../../define/ui/ui-divider.js';
@@ -113,9 +113,9 @@ export default class UrlInput extends ApiElement {
   /**
    * A handler that is called on input
    */
-  protected notifyChange(): void {
+  override notifyChange(): void {
     Events.Http.Request.State.urlChange(this.value, this);
-    this.dispatchEvent(new Event('change'));
+    super.notifyChange();
   }
 
   /**
@@ -130,7 +130,7 @@ export default class UrlInput extends ApiElement {
     const { value } = (e as CustomEvent).detail;
     if (value !== this.value) {
       this.value = value;
-      this.dispatchEvent(new Event('change'));
+      super.notifyChange();
     }
   }
 

package/src/elements/http/UrlParamsForm.ts

@@ -4,6 +4,8 @@ import { IUrlParamPart, UrlEncoder, UrlProcessor } from "@api-client/core/build/
 import { property, state } from "lit/decorators.js";
 import { live } from "lit/directives/live.js";
 import ApiElement from "../ApiElement.js";
+import type Input from "../../ui/input/Input.js";
+import type SwitchElement from "../../ui/input/SwitchElement.js";
 import '../../define/ui/ui-button.js';
 import '../../define/ui/ui-icon-button.js';
 import '../../define/ui/ui-dropdown-list.js';
@@ -13,8 +15,6 @@ import '../../define/ui/ui-switch.js';
 import '../../define/ui/ui-divider.js';
 import '../../define/ui/ui-icon.js';
 import '../../define/ui/ui-text-field.js';
-import Input from "../../ui/input/Input.js";
-import SwitchElement from "../../ui/input/SwitchElement.js";
 
 export default class UrlParamsForm extends ApiElement {
   protected parser = new UrlProcessor('/');
@@ -102,10 +102,6 @@ export default class UrlParamsForm extends ApiElement {
     }
   }
 
-  protected notifyChange(): void {
-    this.dispatchEvent(new Event('change'));
-  }
-
   protected handleOption(e: CustomEvent): void {
     const element = e.detail.item as HTMLElement;
     const { option } = element.dataset;

package/src/elements/layout/SplitView.styles.ts

@@ -124,6 +124,7 @@ export default [surfaceStyles, css`
   width: 16px;
   height: 16px;
   margin-left: auto;
+  z-index: 2;
 }
 
 .close-icon:hover {

package/src/elements/navigation/AppNavigationItem.styles.ts

@@ -54,6 +54,7 @@ export default css`
 .container {
   z-index: 1;
   transition: box-shadow 160ms cubic-bezier(.4,0,.2,1), background-color 230ms cubic-bezier(.4,0,.2,1);
+  background-color: var(--md-sys-color-surface);
 }
 
 :host([selected]) .container {
@@ -80,6 +81,7 @@ export default css`
   position: relative;
   padding: 16px 24px 16px 16px;
   width: inherit;
+  color: var(--md-sys-color-on-surface);
 }
 
 .ripple {

package/src/elements/project/HttpProjectRequest.ts

@@ -9,6 +9,7 @@ import {
   IHttpAssertion,
   IRequestConfig,
   RequestConfig,
+  IHttpFlow,
 } from '@api-client/core/build/browser.js';
 import { AuthorizationType } from '@api-client/core/build/src/models/Authorization.js';
 import { JsonPatchOperation } from '@api-client/json';
@@ -136,6 +137,7 @@ export default class HttpProjectRequest extends RequestEditor {
     this.request = expects.toJSON();
     this.authorization =  request.authorization?.map(i => i.toJSON());
     this.assertions  = request.assertions;
+    this.flows  = request.flows;
     if (request.config) {
       this.config = request.config.toJSON();
     }
@@ -190,6 +192,15 @@ export default class HttpProjectRequest extends RequestEditor {
     super.selectAssertions(assertions);
   }
 
+  override selectFlows(flows?: IHttpFlow[]): void {
+    const { projectRequest } = this;
+    if (!projectRequest) {
+      return;
+    }
+    projectRequest.flows = flows;
+    super.selectFlows(flows);
+  }
+
   override selectRequestConfig(config: IRequestConfig): void {
     const { projectRequest } = this;
     if (!projectRequest) {
@@ -216,7 +227,7 @@ export default class HttpProjectRequest extends RequestEditor {
         this.projectRequest.authorization = [];
       }
       this.projectRequest.authorization.push(schema)
-      this.notifyRequestChanged();
+      this.notifyChange();
     }
     return schema;
   }
@@ -236,7 +247,7 @@ export default class HttpProjectRequest extends RequestEditor {
       return;
     }
     projectRequest.authorization[index] = new RequestAuthorization(schema);
-    this.notifyRequestChanged();
+    this.notifyChange();
   }
 
   override removeAuthorization(type: string): void {
@@ -253,7 +264,7 @@ export default class HttpProjectRequest extends RequestEditor {
       return;
     }
     projectRequest.authorization.splice(index, 1);
-    this.notifyRequestChanged();
+    this.notifyChange();
   }
 
   protected override notifySend(): void {
@@ -344,8 +355,8 @@ export default class HttpProjectRequest extends RequestEditor {
     this.computeEnvironmentLabel();
     projectRequest.environment = key;
     this.computeSnippetsRequest();
-    this.notifyRequestChanged();
-    this.notifyChanged('environment', key);
+    this.notifyChange();
+    this.notifyPropertyChanged('environment', key);
   }
 
   protected computeEnvironmentLabel(): void {

package/src/elements/project/ProjectRunner.ts

@@ -13,9 +13,10 @@ import {
   ContextStateDeleteEvent,
 } from '@api-client/core/build/browser.js';
 import ApiElement from '../ApiElement.js';
-import CheckboxElement from '../../ui/input/CheckboxElement.js';
-import Input from '../../ui/input/Input.js';
+import type CheckboxElement from '../../ui/input/CheckboxElement.js';
+import type Input from '../../ui/input/Input.js';
 import { Events } from '../../events/Events.js';
+import { EventTypes } from '../../events/EventTypes.js';
 import '@github/relative-time-element';
 import '../../define/http-project/project-run-report.js';
 import '../../define/ui/ui-checkbox.js';
@@ -26,7 +27,6 @@ import '../../define/ui/ui-icon.js';
 import '../../define/ui/ui-dropdown-list.js';
 import '../../define/ui/ui-list.js';
 import '../../define/ui/ui-list-item.js';
-import { EventTypes } from '../../events/EventTypes.js';
 
 /**
  * @fires change - When the configuration of the runner change.
@@ -321,10 +321,6 @@ export default class ProjectRunner extends ApiElement {
     this.notifyChange();
   }
 
-  notifyChange(): void {
-    this.dispatchEvent(new Event('change'));
-  }
-
   protected handleRecursiveChecked(e: Event): void {
     const input = e.target as CheckboxElement;
     this.setRecursive(input.checked);

package/src/elements/schema-design/AssociationFormElement.ts

@@ -6,8 +6,8 @@ import ApiElement from "../ApiElement.js";
 import EditorCommon from './CommonStyles.js';
 import theme from '../theme.js';
 import typography from "../../styles/m3/typography.module.js";
-import Input from "../../ui/input/Input.js";
-import CheckboxElement from "../../ui/input/CheckboxElement.js";
+import type Input from "../../ui/input/Input.js";
+import type CheckboxElement from "../../ui/input/CheckboxElement.js";
 import '../../define/ui/ui-text-field.js';
 import '../../define/ui/ui-checkbox.js';
 import '../../define/ui/ui-divider.js';
@@ -50,10 +50,6 @@ export default class AssociationFormElement extends ApiElement {
     }
   }
 
-  protected _notifyChanged(): void {
-    this.dispatchEvent(new Event('change'));
-  }
-
   /**
    * Computes the view value for the association.
    * This should be called before the update is complete so this won't trigger another update.
@@ -81,7 +77,7 @@ export default class AssociationFormElement extends ApiElement {
       return;
     }
     _association.info[name as 'name' | 'description' | 'displayName'] = value;
-    this._notifyChanged();
+    this.notifyChange();
     this.requestUpdate();
   }
 
@@ -97,7 +93,7 @@ export default class AssociationFormElement extends ApiElement {
       return;
     }
     _association[name] = checked;
-    this._notifyChanged();
+    this.notifyChange();
     this.requestUpdate();
   }
 

package/src/elements/schema-design/DataEntityEditorElement.ts

@@ -7,9 +7,9 @@ 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 DataSchemaDocument from "./DataSchemaDocument.js";
-import RadioElement from "../../ui/input/RadioElement.js";
-import CheckboxElement from "../../ui/input/CheckboxElement.js";
+import type DataSchemaDocument from "./DataSchemaDocument.js";
+import type RadioElement from "../../ui/input/RadioElement.js";
+import type CheckboxElement from "../../ui/input/CheckboxElement.js";
 import '../../define/ui/ui-icon.js';
 import '../../define/ui/ui-icon-button.js';
 import '../../define/ui/ui-radio.js';
@@ -129,8 +129,8 @@ export default class DataEntityEditorElement extends ApiElement {
     }
   }
 
-  protected _notifyChanged(): void {
-    this.dispatchEvent(new Event('change'));
+  override notifyChange(): void {
+    super.notifyChange();
     if (this._highlightEntityDropZone) {
       this._highlightEntityDropZone = false;
     }
@@ -161,7 +161,7 @@ export default class DataEntityEditorElement extends ApiElement {
   }
 
   protected _propertyChangeHandler(): void {
-    this._notifyChanged();
+    this.notifyChange();
     const { _schemaDoc } = this;
     if (_schemaDoc) {
       _schemaDoc.requestUpdate();
@@ -170,7 +170,7 @@ export default class DataEntityEditorElement extends ApiElement {
   }
 
   protected _entityChangeHandler(): void {
-    this._notifyChanged();
+    this.notifyChange();
     const { _schemaDoc } = this;
     if (_schemaDoc) {
       _schemaDoc.requestUpdate();
@@ -179,7 +179,7 @@ export default class DataEntityEditorElement extends ApiElement {
   }
 
   protected _schemaEntityChangeHandler(): void {
-    this._notifyChanged();
+    this.notifyChange();
     this.requestUpdate();
     this._computeExampleSchemaIfNeeded();
   }