@api-client/ui 0.0.15 → 0.1.0

package/src/elements/amf/ApiNavigation.element.ts

@@ -1,143 +1,156 @@
-/* eslint-disable lit-a11y/click-events-have-key-events */
-/* eslint-disable prefer-destructuring */
-import { html, TemplateResult } from 'lit';
-import { property, state } from 'lit/decorators.js';
-import { ApiDefinitions } from '@api-client/core/build/esm/browser.js';
-import { styleMap } from 'lit/directives/style-map.js';
-import { classMap } from 'lit/directives/class-map.js';
-import { ifDefined } from 'lit/directives/if-defined.js';
-import { ApiSorting } from '../../amf/lib/navigation-layout/ApiSorting.js';
-import { EndpointsTree } from '../../amf/lib/navigation-layout/EndpointsTree.js';
-import { NaturalTree } from '../../amf/lib/navigation-layout/NaturalTree.js';
-import { EventTypes } from '../../events/amf/EventTypes.js';
-import { Events } from '../../events/amf/Events.js';
+import { html, TemplateResult } from 'lit'
+import { property, state } from 'lit/decorators.js'
+import { styleMap } from 'lit/directives/style-map.js'
+import { classMap } from 'lit/directives/class-map.js'
+import { ifDefined } from 'lit/directives/if-defined.js'
+import type {
+  IApiEndPointWithOperationsListItem,
+  IDocumentationItem,
+  IEndpointItem,
+  INodeShapeItem,
+  ISecurityItem,
+} from '@api-client/core/amf/definitions/Api.js'
+import { ApiSorting } from '../../amf/lib/navigation-layout/ApiSorting.js'
+import { EndpointsTree } from '../../amf/lib/navigation-layout/EndpointsTree.js'
+import { NaturalTree } from '../../amf/lib/navigation-layout/NaturalTree.js'
+import { EventTypes } from '../../events/amf/EventTypes.js'
+import { Events } from '../../events/amf/Events.js'
 import { cancelEvent } from '../../amf/lib/Utils.js'
-import { 
-  ApiEndpointsTreeItem, ApiEndPointWithOperationsListItem, DocumentMeta, NavigationLayout, 
-  SelectionType, SelectableMenuItem, EndpointItem, EditableMenuItem, 
-  SchemaAddType, OperationItem, DocumentationItem, NodeShapeItem, 
-  SecurityItem 
-} from '../../amf/types.js';
-import ApiElement from '../ApiElement.js';
-import { SnackNotifications } from '../../ui/notification/SnackNotifications.js';
-import type UiCollapse from '../../ui/collapse/UiCollapse.js';
-import '../../define/ui/ui-icon.js';
-import '../../define/ui/ui-collapse.js';
-import '../../define/ui/ui-icon-button.js';
-
-const defaultPadding = 40;
+import {
+  ApiEndpointsTreeItem,
+  ApiEndPointWithOperationsListItem,
+  DocumentMeta,
+  NavigationLayout,
+  SelectionType,
+  SelectableMenuItem,
+  EndpointItem,
+  EditableMenuItem,
+  SchemaAddType,
+  OperationItem,
+  DocumentationItem,
+  NodeShapeItem,
+  SecurityItem,
+} from '../../amf/types.js'
+import ApiElement from '../ApiElement.js'
+import { SnackNotifications } from '../../md/notification/SnackNotifications.js'
+import type UiCollapse from '../../md/collapse/internals/Collapse.js'
+import '../../md/icons/ui-icon.js'
+import '../../md/collapse/ui-collapse.js'
+import '../../md/icon-button/ui-icon-button.js'
+
+const defaultPadding = 40
 
 /**
  * @fires apinavigate - Dispatched when a selection change
  * @fires graphload - When the graph was loaded
  */
 export default class ApiNavigation extends ApiElement {
-  protected queryingInternal?: boolean;
+  protected queryingInternal?: boolean
 
-  protected abortControllerInternal?: AbortController;
+  protected abortControllerInternal?: AbortController
 
-  protected domainIdInternal?: string;
+  protected domainIdInternal?: string
 
-  protected domainTypeInternal?: SelectionType;
+  protected domainTypeInternal?: SelectionType
 
-  protected selectedItemInternal?: HTMLElement;
+  protected selectedItemInternal?: HTMLElement
 
-  protected focusedItemInternal?: HTMLElement;
+  protected focusedItemInternal?: HTMLElement
 
-  /** 
+  /**
    * The processed and final query term for the list items.
    */
-  protected queryInternal?: string;
+  protected queryInternal?: string
 
-  @state() documentMeta?: DocumentMeta;
+  @state() accessor documentMeta: DocumentMeta | undefined
 
-  protected layoutInternal?: NavigationLayout;
+  protected layoutInternal?: NavigationLayout
 
-  protected endpointsExpandedInternal?: boolean;
+  protected endpointsExpandedInternal?: boolean
 
-  protected endpointsInternal?: EndpointItem[];
+  protected endpointsInternal?: EndpointItem[]
 
   get endpoints(): EndpointItem[] | undefined {
-    const { endpointsInternal } = this;
+    const { endpointsInternal } = this
     if (!endpointsInternal) {
-      return undefined;
+      return undefined
     }
-    return [...endpointsInternal];
+    return [...endpointsInternal]
   }
 
-  protected documentationsInternal?: ApiDefinitions.IDocumentationItem[];
+  protected documentationsInternal?: IDocumentationItem[]
 
-  get documentations(): ApiDefinitions.IDocumentationItem[] | undefined {
-    const { documentationsInternal } = this;
+  get documentations(): IDocumentationItem[] | undefined {
+    const { documentationsInternal } = this
     if (!documentationsInternal) {
-      return undefined;
+      return undefined
     }
-    return [...documentationsInternal];
+    return [...documentationsInternal]
   }
 
-  protected schemasInternal?: ApiDefinitions.INodeShapeItem[];
+  protected schemasInternal?: INodeShapeItem[]
 
-  get schemas(): ApiDefinitions.INodeShapeItem[] | undefined {
-    const { schemasInternal } = this;
+  get schemas(): INodeShapeItem[] | undefined {
+    const { schemasInternal } = this
     if (!schemasInternal) {
-      return undefined;
+      return undefined
     }
-    return [...schemasInternal];
+    return [...schemasInternal]
   }
 
-  protected securityInternal?: ApiDefinitions.ISecurityItem[];
+  protected securityInternal?: ISecurityItem[]
 
-  get security(): ApiDefinitions.ISecurityItem[] | undefined {
-    const { securityInternal } = this;
+  get security(): ISecurityItem[] | undefined {
+    const { securityInternal } = this
     if (!securityInternal) {
-      return undefined;
+      return undefined
     }
-    return [...securityInternal];
+    return [...securityInternal]
   }
 
-  /** 
+  /**
    * Holds a list of ids of currently opened endpoints.
    */
-  openedEndpoints: string[];
+  openedEndpoints: string[]
 
-  /** 
+  /**
    * Cached list of all list elements
    */
-  protected itemsInternal?: HTMLElement[];
+  protected itemsInternal?: HTMLElement[]
 
   get items(): HTMLElement[] | undefined {
-    const { itemsInternal } = this;
+    const { itemsInternal } = this
     if (!itemsInternal) {
-      return undefined;
+      return undefined
     }
-    return [...itemsInternal];
+    return [...itemsInternal]
   }
 
-  @state() sourceEndpoints?: ApiDefinitions.IApiEndPointWithOperationsListItem[];
+  @state() accessor sourceEndpoints: IApiEndPointWithOperationsListItem[] | undefined
 
-  protected shiftTabPressedInternal?: boolean;
+  protected shiftTabPressedInternal?: boolean
 
   get shiftTabPressed(): boolean {
-    return this.shiftTabPressedInternal || false;
+    return this.shiftTabPressedInternal || false
   }
 
-  protected summarySelectedInternal?: boolean;
+  protected summarySelectedInternal?: boolean
 
-  protected addingSchemaTypeInternal?: string;
+  protected addingSchemaTypeInternal?: string
 
-  protected addingSchemaInternal?: boolean;
+  protected addingSchemaInternal?: boolean
 
-  protected addingDocumentationInternal?: boolean;
+  protected addingDocumentationInternal?: boolean
 
-  protected addingExternalInternal?: boolean;
+  protected addingExternalInternal?: boolean
 
-  protected addingEndpointInternal?: boolean;
+  protected addingEndpointInternal?: boolean
 
-  /** 
+  /**
    * When true then the element is currently querying for the graph data.
    */
   get querying(): boolean {
-    return this.queryingInternal || false;
+    return this.queryingInternal || false
   }
 
   /**
@@ -146,7 +159,7 @@ export default class ApiNavigation extends ApiElement {
    * All data that already has been processed are not cleared.
    */
   get abortController(): AbortController | undefined {
-    return this.abortControllerInternal;
+    return this.abortControllerInternal
   }
 
   /**
@@ -156,72 +169,72 @@ export default class ApiNavigation extends ApiElement {
    * API.
    * @attribute
    */
-  @property({ type: String, reflect: true })
   get domainId(): string | undefined {
-    return this.domainIdInternal;
+    return this.domainIdInternal
   }
 
+  @property({ type: String, reflect: true })
   set domainId(value: string | undefined) {
-    const old = this.domainIdInternal;
+    const old = this.domainIdInternal
     if (old === value) {
-      return;
+      return
     }
-    this.domainIdInternal = value;
-    this.requestUpdate('domainId', old);
-    this.select(value);
+    this.domainIdInternal = value
+    this.requestUpdate('domainId', old)
+    this.select(value)
   }
 
   /**
    * Type of the selected domain item.
    */
   get domainType(): SelectionType | undefined {
-    return this.domainTypeInternal;
+    return this.domainTypeInternal
   }
 
   /**
    * true when `_docs` property is set with values
    */
   get hasDocs(): boolean {
-    const docs = this.documentationsInternal;
-    return Array.isArray(docs) && !!docs.length;
+    const docs = this.documentationsInternal
+    return Array.isArray(docs) && !!docs.length
   }
 
   /**
    * true when has schemas definitions
    */
   get hasSchemas(): boolean {
-    const items = this.schemasInternal;
-    return Array.isArray(items) && !!items.length;
+    const items = this.schemasInternal
+    return Array.isArray(items) && !!items.length
   }
 
   /**
    * true when `_security` property is set with values
    */
   get hasSecurity(): boolean {
-    const items = this.securityInternal;
-    return Array.isArray(items) && !!items.length;
+    const items = this.securityInternal
+    return Array.isArray(items) && !!items.length
   }
 
   /**
    * true when `_endpoints` property is set with values
    */
   get hasEndpoints(): boolean {
-    const items = this.endpointsInternal;
-    return Array.isArray(items) && !!items.length;
+    const items = this.endpointsInternal
+    return Array.isArray(items) && !!items.length
   }
 
   /**
    * A reference to currently selected element.
    */
   get selectedItem(): HTMLElement | undefined {
-    return this.selectedItemInternal;
+    return this.selectedItemInternal
   }
 
   /**
    * The currently focused item.
    */
   get focusedItem(): HTMLElement | undefined {
-    return this.focusedItemInternal;
+    return this.focusedItemInternal
   }
 
   /**
@@ -232,76 +245,77 @@ export default class ApiNavigation extends ApiElement {
    * to complexity of search and performance.
    * @attribute
    */
-  @property({ type: String })
   get query(): string | undefined {
-    return this.queryInternal;
+    return this.queryInternal
   }
 
+  @property({ type: String })
   set query(value: string | undefined) {
-    const old = this.queryInternal;
+    const old = this.queryInternal
     if (old === value) {
-      return;
+      return
     }
-    this.queryInternal = value;
-    this.processQuery(value);
-    this.requestUpdate('query', old);
+    this.queryInternal = value
+    this.processQuery(value)
+    this.requestUpdate('query', old)
   }
 
-  /** 
+  /**
    * By default the endpoints are rendered one-by-one as defined in the API spec file
-   * without any tree structure. When this option is set it sorts the endpoints 
+   * without any tree structure. When this option is set it sorts the endpoints
    * alphabetically and creates a tree structure for the endpoints.
-   * 
+   *
    * - tree - creates a tree structure from the endpoints list
-   * - natural - behavior consistent with the previous version of the navigation. Creates a tree structure based on the previous endpoints.
+   * - natural - behavior consistent with the previous version of the navigation.
+   *             Creates a tree structure based on the previous endpoints.
    * - natural-sort - as `natural` but endpoints are sorted by name.
    * - off (or none) - just like in the API spec.
-   * 
-   * Note, the resulted tree structure will likely be different to the one encoded 
+   *
+   * Note, the resulted tree structure will likely be different to the one encoded
    * in the API spec file.
    * @attribute
    */
-  @property({ type: String, reflect: true })
   get layout(): NavigationLayout | undefined {
-    return this.layoutInternal;
+    return this.layoutInternal
   }
 
+  @property({ type: String, reflect: true })
   set layout(value: NavigationLayout | undefined) {
-    const old = this.layoutInternal;
+    const old = this.layoutInternal
     if (old === value) {
-      return;
+      return
     }
-    this.layoutInternal = value;
-    this.layoutEndpoints();
-    this.requestUpdate('layout', old);
+    this.layoutInternal = value
+    this.layoutEndpoints()
+    this.requestUpdate('layout', old)
   }
 
-  /** 
+  /**
    * When set it expands or opens all endpoints and makes all operations visible.
    * Note, the user can toggle an endpoint anyway so this property does not mean
    * that all endpoints are expanded. When it's true then it means that all endpoints
    * was expanded at some point in time.
    * @attribute
    */
-  @property({ type: Boolean, reflect: true })
   get endpointsExpanded(): boolean {
-    const value = this.endpointsExpandedInternal;
+    const value = this.endpointsExpandedInternal
     if (typeof value !== 'boolean') {
-      return false;
+      return false
     }
-    return value;
+    return value
   }
 
+  @property({ type: Boolean, reflect: true })
   set endpointsExpanded(value: boolean | undefined) {
-    const old = this.endpointsExpandedInternal;
+    const old = this.endpointsExpandedInternal
     if (old === value) {
-      return;
+      return
     }
-    this.endpointsExpandedInternal = value;
+    this.endpointsExpandedInternal = value
     if (value) {
-      this.expandAllEndpoints();
+      this.expandAllEndpoints()
     } else {
-      this.collapseAllEndpoints();
+      this.collapseAllEndpoints()
     }
   }
 
@@ -310,20 +324,20 @@ export default class ApiNavigation extends ApiElement {
    * Summary should be rendered only when `summary` is set and current model is not a RAML fragment.
    */
   get summaryRendered(): boolean {
-    const { summary, documentMeta } = this;
+    const { summary, documentMeta } = this
     if (!summary || !documentMeta) {
-      return false;
+      return false
     }
-    const { isFragment, isLibrary } = documentMeta;
-    return !isFragment && !isLibrary;
+    const { isFragment, isLibrary } = documentMeta
+    return !isFragment && !isLibrary
   }
 
-  /** 
+  /**
    * When this property change the element queries the graph store for the data model.
    * It can be skipped when the application calls the `queryGraph()` method imperatively.
    * @attribute
    */
-  @property({ type: String, reflect: true }) apiId?: string;
+  @property({ type: String, reflect: true }) accessor apiId: string | undefined
 
   /**
    * If set it renders `API summary` menu option.
@@ -331,37 +345,37 @@ export default class ApiNavigation extends ApiElement {
    * when this option is set.
    * @attribute
    */
-  @property({ type: Boolean, reflect: true }) summary?: boolean;
+  @property({ type: Boolean, reflect: true }) accessor summary: boolean | undefined
 
   /**
    * A label for the `summary` section.
    * @attribute
    */
-  @property({ type: String, reflect: true }) summaryLabel: string;
+  @property({ type: String, reflect: true }) accessor summaryLabel: string
 
   /**
    * Determines and changes state of documentation panel.
    * @attribute
    */
-  @property({ type: Boolean, reflect: true }) documentationsOpened?: boolean;
+  @property({ type: Boolean, reflect: true }) accessor documentationsOpened: boolean | undefined
 
   /**
    * Determines and changes state of schemas (types) panel.
    * @attribute
    */
-  @property({ type: Boolean, reflect: true }) schemasOpened?: boolean;
+  @property({ type: Boolean, reflect: true }) accessor schemasOpened: boolean | undefined
 
   /**
    * Determines and changes state of security panel.
    * @attribute
    */
-  @property({ type: Boolean, reflect: true }) securityOpened?: boolean;
+  @property({ type: Boolean, reflect: true }) accessor securityOpened: boolean | undefined
 
   /**
    * Determines and changes state of endpoints panel.
    * @attribute
    */
-  @property({ type: Boolean, reflect: true }) endpointsOpened?: boolean;
+  @property({ type: Boolean, reflect: true }) accessor endpointsOpened: boolean | undefined
 
   /**
    * Size of endpoint indentation for nested resources.
@@ -371,38 +385,38 @@ export default class ApiNavigation extends ApiElement {
    * will change to web consistent name `indentSize` in the future.
    * @attribute
    */
-  @property({ type: Number, reflect: true }) indentSize?: number;
+  @property({ type: Number, reflect: true }) accessor indentSize: number | undefined
 
-  /** 
+  /**
    * When set it renders an input to filter the menu items.
    * @attribute
    */
-  @property({ type: Boolean, reflect: true }) filter?: boolean;
+  @property({ type: Boolean, reflect: true }) accessor filter: boolean | undefined
 
-  /** 
+  /**
    * When set the element won't query the store when attached to the DOM.
    * Instead set the `apiId` property or directly call the `queryGraph()` function.
    * @attribute
    */
-  @property({ type: Boolean, reflect: true }) manualQuery?: boolean;
+  @property({ type: Boolean, reflect: true }) accessor manualQuery: boolean | undefined
 
-  /** 
+  /**
    * When set it enables graph items editing functionality.
    * The user can double-click on a menu item and edit its name.
    * @attribute
    */
-  @property({ type: Boolean, reflect: true }) edit?: boolean;
+  @property({ type: Boolean, reflect: true }) accessor edit: boolean | undefined
 
   constructor() {
-    super();
-    this.summaryLabel = 'Summary';
-    this.indentSize = defaultPadding;
+    super()
+    this.summaryLabel = 'Summary'
+    this.indentSize = defaultPadding
 
-    this.openedEndpoints = [];
+    this.openedEndpoints = []
 
-    this.graphChangeHandler = this.graphChangeHandler.bind(this);
-    this.addEventListener('focus', this.focusHandler.bind(this));
-    this.addEventListener('keydown', this.keydownHandler.bind(this));
+    this.graphChangeHandler = this.graphChangeHandler.bind(this)
+    this.addEventListener('focus', this.focusHandler.bind(this))
+    this.addEventListener('keydown', this.keydownHandler.bind(this))
   }
 
   /**
@@ -410,33 +424,33 @@ export default class ApiNavigation extends ApiElement {
    * Attaches element's listeners.
    */
   override connectedCallback(): void {
-    super.connectedCallback();
+    super.connectedCallback()
     if (!this.getAttribute('aria-label')) {
-      this.setAttribute('aria-label', 'API navigation');
+      this.setAttribute('aria-label', 'API navigation')
     }
     if (!this.getAttribute('tabindex')) {
-      this.setAttribute('tabindex', '0');
+      this.setAttribute('tabindex', '0')
     }
     if (!this.getAttribute('role')) {
-      this.setAttribute('role', 'navigation');
+      this.setAttribute('role', 'navigation')
     }
-    this.eventsTarget.addEventListener(EventTypes.Store.graphChange, this.graphChangeHandler);
+    this.eventsTarget.addEventListener(EventTypes.Store.graphChange, this.graphChangeHandler)
     if (!this.manualQuery) {
-      this.queryGraph();
+      this.queryGraph()
     }
   }
 
   override disconnectedCallback(): void {
-    super.disconnectedCallback();
-    this.eventsTarget.removeEventListener(EventTypes.Store.graphChange, this.graphChangeHandler);
-    this.itemsInternal = undefined;
+    super.disconnectedCallback()
+    this.eventsTarget.removeEventListener(EventTypes.Store.graphChange, this.graphChangeHandler)
+    this.itemsInternal = undefined
   }
 
   /**
    * Handler for the event dispatched by the store when the graph model change.
    */
   graphChangeHandler(): void {
-    this.queryGraph();
+    this.queryGraph()
   }
 
   /**
@@ -444,44 +458,44 @@ export default class ApiNavigation extends ApiElement {
    */
   async queryGraph(): Promise<void> {
     if (this.querying) {
-      return;
-    }
-    this.queryingInternal = true;
-    this.itemsInternal = undefined;
-    const ctrl = new AbortController();
-    this.abortControllerInternal = ctrl;
-    await this.queryApi(ctrl.signal);
-    await this.queryEndpoints(ctrl.signal);
-    await this.queryDocumentations(ctrl.signal);
-    await this.querySchemas(ctrl.signal);
-    await this.querySecurity(ctrl.signal);
+      return
+    }
+    this.queryingInternal = true
+    this.itemsInternal = undefined
+    const ctrl = new AbortController()
+    this.abortControllerInternal = ctrl
+    await this.queryApi(ctrl.signal)
+    await this.queryEndpoints(ctrl.signal)
+    await this.queryDocumentations(ctrl.signal)
+    await this.querySchemas(ctrl.signal)
+    await this.querySecurity(ctrl.signal)
     if (!ctrl.signal.aborted) {
-      this.layoutEndpoints();
+      this.layoutEndpoints()
     }
-    this.queryingInternal = false;
-    this.abortControllerInternal = undefined;
-    this.openedEndpoints = [];
-    this.requestUpdate();
-    await this.updateComplete;
-    this.resetTabindices();
-    this.dispatchEvent(new Event('graphload'));
+    this.queryingInternal = false
+    this.abortControllerInternal = undefined
+    this.openedEndpoints = []
+    this.requestUpdate()
+    await this.updateComplete
+    this.resetTabindices()
+    this.dispatchEvent(new Event('graphload'))
   }
 
   /**
    * Queries for the current API base info.
    */
   async queryApi(signal: AbortSignal): Promise<void> {
-    this.documentMeta = undefined;
+    this.documentMeta = undefined
     try {
-      const info = await Events.Api.documentMeta(this);
+      const info = await Events.Api.documentMeta(this)
       if (signal.aborted) {
-        return;
+        return
       }
-      this.documentMeta = info;
+      this.documentMeta = info
     } catch (e) {
-      const ex = e as Error;
-      Events.Telemetry.exception(this, ex.message, false);
-      Events.Reporting.error(this, ex, `Enable to query for API data: ${ex.message}`, this.localName);
+      const ex = e as Error
+      Events.Telemetry.exception(this, ex.message, false)
+      Events.Reporting.error(this, ex, `Enable to query for API data: ${ex.message}`, this.localName)
     }
   }
 
@@ -490,22 +504,22 @@ export default class ApiNavigation extends ApiElement {
    */
   async queryEndpoints(signal: AbortSignal): Promise<void> {
     if (signal.aborted) {
-      return;
+      return
     }
     try {
-      const result = await Events.Endpoint.list(this);
+      const result = await Events.Endpoint.list(this)
       if (signal.aborted) {
-        return;
+        return
       }
       if (!result) {
-        return;
+        return
       }
-      this.sourceEndpoints = result;
+      this.sourceEndpoints = result
     } catch (e) {
-      const ex = e as Error;
-      this.sourceEndpoints = undefined;
-      Events.Telemetry.exception(this, ex.message, false);
-      Events.Reporting.error(this, ex, `Enable to query for Endpoints data: ${ex.message}`, this.localName);
+      const ex = e as Error
+      this.sourceEndpoints = undefined
+      Events.Telemetry.exception(this, ex.message, false)
+      Events.Reporting.error(this, ex, `Enable to query for Endpoints data: ${ex.message}`, this.localName)
     }
   }
 
@@ -513,20 +527,20 @@ export default class ApiNavigation extends ApiElement {
    * Queries and sets documentations data
    */
   async queryDocumentations(signal: AbortSignal): Promise<void> {
-    this.documentationsInternal = undefined;
+    this.documentationsInternal = undefined
     if (signal.aborted) {
-      return;
+      return
     }
     try {
-      const result = await Events.Documentation.list(this);
+      const result = await Events.Documentation.list(this)
       if (signal.aborted) {
-        return;
+        return
       }
-      this.documentationsInternal = result;
+      this.documentationsInternal = result
     } catch (e) {
-      const ex = e as Error;
-      Events.Telemetry.exception(this, ex.message, false);
-      Events.Reporting.error(this, ex, `Enable to query for Documents data: ${ex.message}`, this.localName);
+      const ex = e as Error
+      Events.Telemetry.exception(this, ex.message, false)
+      Events.Reporting.error(this, ex, `Enable to query for Documents data: ${ex.message}`, this.localName)
     }
   }
 
@@ -534,20 +548,20 @@ export default class ApiNavigation extends ApiElement {
    * Queries and sets types (schemas) data
    */
   async querySchemas(signal: AbortSignal): Promise<void> {
-    this.schemasInternal = undefined;
+    this.schemasInternal = undefined
     if (signal.aborted) {
-      return;
+      return
     }
     try {
-      const result = await Events.Type.list(this);
+      const result = await Events.Type.list(this)
       if (signal.aborted) {
-        return;
+        return
       }
-      this.schemasInternal = result;
+      this.schemasInternal = result
     } catch (e) {
-      const ex = e as Error;
-      Events.Telemetry.exception(this, ex.message, false);
-      Events.Reporting.error(this, ex, `Enable to query for Schemas data: ${ex.message}`, this.localName);
+      const ex = e as Error
+      Events.Telemetry.exception(this, ex.message, false)
+      Events.Reporting.error(this, ex, `Enable to query for Schemas data: ${ex.message}`, this.localName)
     }
   }
 
@@ -555,26 +569,26 @@ export default class ApiNavigation extends ApiElement {
    * Queries and sets security data
    */
   async querySecurity(signal: AbortSignal): Promise<void> {
-    this.securityInternal = undefined;
+    this.securityInternal = undefined
     if (signal.aborted) {
-      return;
+      return
     }
     try {
-      const result = await Events.Security.list(this);
+      const result = await Events.Security.list(this)
       if (signal.aborted) {
-        return;
+        return
       }
-      this.securityInternal = result;
+      this.securityInternal = result
     } catch (e) {
-      const ex = e as Error;
-      Events.Telemetry.exception(this, ex.message, false);
-      Events.Reporting.error(this, ex, `Enable to query for Security data: ${ex.message}`, this.localName);
+      const ex = e as Error
+      Events.Telemetry.exception(this, ex.message, false)
+      Events.Reporting.error(this, ex, `Enable to query for Security data: ${ex.message}`, this.localName)
     }
   }
 
-  createFlatTreeItems(items: ApiDefinitions.IApiEndPointWithOperationsListItem[]): ApiDefinitions.IEndpointItem[] {
+  createFlatTreeItems(items: IApiEndPointWithOperationsListItem[]): IEndpointItem[] {
     if (!Array.isArray(items) || !items.length) {
-      return [];
+      return []
     }
     return items.map((endpoint) => ({
       ...endpoint,
@@ -582,73 +596,75 @@ export default class ApiNavigation extends ApiElement {
       label: endpoint.name || endpoint.path,
       selected: false,
       secondarySelected: false,
-    }));
+    }))
   }
 
   /**
    * Processes endpoints layout for the given configuration.
    */
   layoutEndpoints(): void {
-    const { layout } = this;
-    this.itemsInternal = undefined;
-    const endpoints = this.sourceEndpoints;
+    const { layout } = this
+    this.itemsInternal = undefined
+    const endpoints = this.sourceEndpoints
     if (!endpoints) {
-      this.endpointsInternal = undefined;
-      return;
+      this.endpointsInternal = undefined
+      return
     }
     if (layout === 'tree') {
-      const sorted = ApiSorting.sortEndpointsByPath([...endpoints]);
-      const items = new EndpointsTree().create(sorted);
-      this.endpointsInternal = items;
-      return;
+      const sorted = ApiSorting.sortEndpointsByPath([...endpoints])
+      const items = new EndpointsTree().create(sorted)
+      this.endpointsInternal = items
+      return
     }
     if (layout === 'natural') {
-      this.endpointsInternal = new NaturalTree().create(endpoints);
-      return;
+      this.endpointsInternal = new NaturalTree().create(endpoints)
+      return
     }
     if (layout === 'natural-sort') {
-      const sorted = ApiSorting.sortEndpointsByPath([...endpoints]) as ApiEndPointWithOperationsListItem[];
-      this.endpointsInternal = new NaturalTree().create(sorted);
-      return;
+      const sorted = ApiSorting.sortEndpointsByPath([...endpoints]) as ApiEndPointWithOperationsListItem[]
+      this.endpointsInternal = new NaturalTree().create(sorted)
+      return
     }
     //
     // Default layout
     //
-    this.endpointsInternal = this.createFlatTreeItems(endpoints);
+    this.endpointsInternal = this.createFlatTreeItems(endpoints)
   }
 
   /**
    * Filters the current endpoints by the current query value.
    */
   getFilteredEndpoints(): ApiEndpointsTreeItem[] | undefined {
-    const value = this.endpointsInternal;
+    const value = this.endpointsInternal
     if (!value || !value.length) {
-      return undefined;
+      return undefined
     }
-    const q = this.queryInternal;
+    const q = this.queryInternal
     if (!q) {
-      return value;
+      return value
     }
-    const result: ApiEndpointsTreeItem[] = [];
+    const result: ApiEndpointsTreeItem[] = []
     value.forEach((endpoint) => {
-      const { path, label = '', operations = [] } = endpoint;
-      const lPath = path.toLowerCase();
-      const lLabel = label.toLowerCase();
+      const { path, label = '', operations = [] } = endpoint
+      const lPath = path.toLowerCase()
+      const lLabel = label.toLowerCase()
       // If the endpoint's path or label matches the query include whole item
       if (lPath.includes(q) || lLabel.includes(q)) {
-        result[result.length] = endpoint;
-        return;
+        result[result.length] = endpoint
+        return
       }
       // otherwise check all operations and only include matched operations. If none match
       // then do not include the endpoint.
-      const ops = operations.filter((op) => op.method.toLowerCase().includes(q) || (op.name || '').toLowerCase().includes(q));
+      const ops = operations.filter(
+        (op) => op.method.toLowerCase().includes(q) || (op.name || '').toLowerCase().includes(q)
+      )
       if (ops.length) {
-        const copy = { ...endpoint } as ApiEndpointsTreeItem;
-        copy.operations = ops;
-        result[result.length] = copy;
+        const copy = { ...endpoint } as ApiEndpointsTreeItem
+        copy.operations = ops
+        result[result.length] = copy
       }
-    });
-    return result;
+    })
+    return result
   }
 
   /**
@@ -660,50 +676,50 @@ export default class ApiNavigation extends ApiElement {
    * @returns The value for the left padding of the endpoint menu item.
    */
   computeEndpointPaddingValue(indent = 0): string {
-    const padding = this.computeEndpointPaddingLeft();
+    const padding = this.computeEndpointPaddingLeft()
     if (indent < 1) {
-      return `${padding}px`;
+      return `${padding}px`
     }
-    const result = indent * (this.indentSize || 0) + padding;
-    return `${result}px`;
+    const result = indent * (this.indentSize || 0) + padding
+    return `${result}px`
   }
 
   /**
    * Computes endpoint list item left padding from CSS variables.
    */
   computeEndpointPaddingLeft(): number {
-    const prop = '--api-navigation-list-item-padding';
-    const padding = getComputedStyle(this).getPropertyValue(prop);
+    const prop = '--api-navigation-list-item-padding'
+    const padding = getComputedStyle(this).getPropertyValue(prop)
     if (!padding) {
-      return defaultPadding;
+      return defaultPadding
     }
-    const parts = padding.split(' ');
-    let paddingLeftValue;
+    const parts = padding.split(' ')
+    let paddingLeftValue
     switch (parts.length) {
       case 1:
-        paddingLeftValue = parts[0];
-        break;
+        paddingLeftValue = parts[0]
+        break
       case 2:
-        paddingLeftValue = parts[1];
-        break;
+        paddingLeftValue = parts[1]
+        break
       case 3:
-        paddingLeftValue = parts[1];
-        break;
+        paddingLeftValue = parts[1]
+        break
       case 4:
-        paddingLeftValue = parts[3];
-        break;
+        paddingLeftValue = parts[3]
+        break
       default:
-        return defaultPadding;
+        return defaultPadding
     }
     if (!paddingLeftValue) {
-      return defaultPadding;
+      return defaultPadding
     }
-    paddingLeftValue = paddingLeftValue.replace('px', '').trim();
-    const result = Number(paddingLeftValue);
+    paddingLeftValue = paddingLeftValue.replace('px', '').trim()
+    const result = Number(paddingLeftValue)
     if (Number.isNaN(result)) {
-      return defaultPadding;
+      return defaultPadding
     }
-    return result;
+    return result
   }
 
   /**
@@ -714,30 +730,30 @@ export default class ApiNavigation extends ApiElement {
    * @returns The value for the left padding of the endpoint menu item.
    */
   computeOperationPaddingValue(indent = 0): string {
-    const padding = this.computeOperationPaddingLeft() + defaultPadding;
-    const { indentSize = 0 } = this;
+    const padding = this.computeOperationPaddingLeft() + defaultPadding
+    const { indentSize = 0 } = this
     if (indentSize < 1) {
-      return `${padding}px`;
+      return `${padding}px`
     }
-    const result = indent * indentSize + padding;
-    return `${result}px`;
+    const result = indent * indentSize + padding
+    return `${result}px`
   }
 
   /**
    * Computes operation list item left padding from CSS variables.
    */
   computeOperationPaddingLeft(): number {
-    const prop = '--api-navigation-operation-item-padding-left';
-    let paddingLeft = getComputedStyle(this).getPropertyValue(prop);
+    const prop = '--api-navigation-operation-item-padding-left'
+    let paddingLeft = getComputedStyle(this).getPropertyValue(prop)
     if (!paddingLeft) {
-      return defaultPadding;
+      return defaultPadding
     }
-    paddingLeft = paddingLeft.replace('px', '').trim();
-    const result = Number(paddingLeft);
+    paddingLeft = paddingLeft.replace('px', '').trim()
+    const result = Number(paddingLeft)
     if (Number.isNaN(result)) {
-      return defaultPadding;
+      return defaultPadding
     }
-    return result;
+    return result
   }
 
   /**
@@ -745,15 +761,15 @@ export default class ApiNavigation extends ApiElement {
    * Makes a selection from the target.
    */
   protected itemClickHandler(e: MouseEvent): void {
-    const node = e.currentTarget as HTMLElement;
-    const { graphId, graphShape } = node.dataset;
+    const node = e.currentTarget as HTMLElement
+    const { graphId, graphShape } = node.dataset
     if (graphId && graphShape) {
-      this.makeSelection(graphId, graphShape as SelectionType);
+      this.makeSelection(graphId, graphShape as SelectionType)
     } else {
       // this is probably the abstract endpoint from the EndpointTree class.
       // We are preventing default so the element can ignore focusing on the item.
-      e.preventDefault();
-      e.stopPropagation();
+      e.preventDefault()
+      e.stopPropagation()
     }
   }
 
@@ -761,16 +777,16 @@ export default class ApiNavigation extends ApiElement {
    * A handler for the click event on endpoints toggle button.
    */
   protected endpointToggleClickHandler(e: MouseEvent): void {
-    const node = e.currentTarget as HTMLElement;
-    const { graphId } = node.dataset;
+    const node = e.currentTarget as HTMLElement
+    const { graphId } = node.dataset
     if (graphId) {
-      this.toggleEndpoint(graphId);
-      e.stopPropagation();
-      e.preventDefault();
+      this.toggleEndpoint(graphId)
+      e.stopPropagation()
+      e.preventDefault()
       Events.Telemetry.event(this, {
         category: 'API navigation',
         action: 'Toggle endpoint',
-      });
+      })
     }
   }
 
@@ -779,31 +795,30 @@ export default class ApiNavigation extends ApiElement {
    * @param graphId The Endpoint graph id.
    */
   toggleEndpoint(graphId: string): void {
-    const index = this.openedEndpoints.indexOf(graphId);
+    const index = this.openedEndpoints.indexOf(graphId)
     if (index === -1) {
-      this.openedEndpoints.push(graphId);
+      this.openedEndpoints.push(graphId)
     } else {
-      this.openedEndpoints.splice(index, 1);
+      this.openedEndpoints.splice(index, 1)
     }
-    this.requestUpdate();
+    this.requestUpdate()
   }
 
   /**
    * A handler for the click event on a section item. Toggles the clicked section.
    */
   protected toggleSectionClickHandler(e: MouseEvent): void {
-    const node = e.currentTarget as HTMLElement;
-    this.toggleSectionElement(node);
+    const node = e.currentTarget as HTMLElement
+    this.toggleSectionElement(node)
     Events.Telemetry.event(this, {
       category: 'API navigation',
       action: 'Toggle section',
       label: node.dataset.section,
-    });
+    })
   }
 
   protected toggleSectionKeydownHandler(): void {
     // This is handled by the global key handler.
-
     // if (e.code !== 'Space') {
     //   return;
     // }
@@ -820,63 +835,65 @@ export default class ApiNavigation extends ApiElement {
    * Toggles a section of the menu represented by the element (section list item).
    */
   toggleSectionElement(element: HTMLElement): void {
-    const prop = element.dataset.property;
+    const prop = element.dataset.property
     if (!prop) {
-      return;
+      return
     }
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    (this as any)[prop] = !(this as any)[prop];
+    ;(this as any)[prop] = !(this as any)[prop]
   }
 
   /**
    * @returns The list of documentation items filtered by the current query.
    */
-  getFilteredDocumentations(): ApiDefinitions.IDocumentationItem[] {
-    const items = this.documentationsInternal;
+  getFilteredDocumentations(): IDocumentationItem[] {
+    const items = this.documentationsInternal
     if (!Array.isArray(items) || !items.length) {
-      return [];
+      return []
     }
-    const q = this.queryInternal;
+    const q = this.queryInternal
     if (!q) {
-      return items;
+      return items
     }
-    return items.filter((doc) =>
-      (doc.title || '').toLocaleLowerCase().includes(q));
+    return items.filter((doc) => (doc.title || '').toLocaleLowerCase().includes(q))
   }
 
   /**
    * @returns The list of schemas items filtered by the current query.
    */
-  getFilteredSchemas(): ApiDefinitions.INodeShapeItem[] {
-    const items = this.schemasInternal;
+  getFilteredSchemas(): INodeShapeItem[] {
+    const items = this.schemasInternal
     if (!Array.isArray(items) || !items.length) {
-      return [];
+      return []
     }
-    const q = this.queryInternal;
+    const q = this.queryInternal
     if (!q) {
-      return items;
+      return items
     }
-    return items.filter((doc) =>
-      (doc.name || '').toLocaleLowerCase().includes(q) ||
-      (doc.displayName || '').toLocaleLowerCase().includes(q));
+    return items.filter(
+      (doc) =>
+        (doc.name || '').toLocaleLowerCase().includes(q) || (doc.displayName || '').toLocaleLowerCase().includes(q)
+    )
   }
 
   /**
    * @returns The list of security items filtered by the current query.
    */
-  getFilteredSecurity(): ApiDefinitions.ISecurityItem[] {
-    const items = this.securityInternal;
+  getFilteredSecurity(): ISecurityItem[] {
+    const items = this.securityInternal
     if (!Array.isArray(items) || !items.length) {
-      return [];
+      return []
     }
-    const q = this.queryInternal;
+    const q = this.queryInternal
     if (!q) {
-      return items;
+      return items
     }
-    return items.filter((doc) =>
-      (doc.name || '').toLocaleLowerCase().includes(q) ||
-      (doc.displayName || '').toLocaleLowerCase().includes(q) ||
-      (doc.type || '').toLocaleLowerCase().includes(q));
+    return items.filter(
+      (doc) =>
+        (doc.name || '').toLocaleLowerCase().includes(q) ||
+        (doc.displayName || '').toLocaleLowerCase().includes(q) ||
+        (doc.type || '').toLocaleLowerCase().includes(q)
+    )
   }
 
   /**
@@ -885,19 +902,19 @@ export default class ApiNavigation extends ApiElement {
   protected focusHandler(e: FocusEvent): void {
     if (this.shiftTabPressedInternal) {
       // do not focus the menu itself
-      return;
+      return
     }
-    const path = e.composedPath();
-    const rootTarget = path[0] as HTMLElement;
+    const path = e.composedPath()
+    const rootTarget = path[0] as HTMLElement
     if (rootTarget !== this && typeof rootTarget.tabIndex !== 'undefined' && !this.contains(rootTarget)) {
-      return;
+      return
     }
-    this.focusedItemInternal = undefined;
-    const { selectedItem } = this;
+    this.focusedItemInternal = undefined
+    const { selectedItem } = this
     if (selectedItem) {
-      this.focusItem(selectedItem);
+      this.focusItem(selectedItem)
     } else {
-      this.focusNext();
+      this.focusNext()
     }
   }
 
@@ -905,14 +922,14 @@ export default class ApiNavigation extends ApiElement {
    * Sets a list item focused
    */
   focusItem(item: HTMLElement): void {
-    const old = this.focusedItemInternal;
-    this.focusedItemInternal = item;
+    const old = this.focusedItemInternal
+    this.focusedItemInternal = item
     if (old) {
-      old.setAttribute('tabindex', '-1');
+      old.setAttribute('tabindex', '-1')
     }
     if (item && !item.hasAttribute('disabled')) {
-      item.setAttribute('tabindex', '0');
-      item.focus();
+      item.setAttribute('tabindex', '0')
+      item.focus()
     }
   }
 
@@ -920,71 +937,71 @@ export default class ApiNavigation extends ApiElement {
    * Handler for the keydown event.
    */
   protected keydownHandler(e: KeyboardEvent): void {
-    const path = e.composedPath();
-    const target = path[0] as HTMLElement;
+    const path = e.composedPath()
+    const target = path[0] as HTMLElement
     if (target.localName === 'input') {
-      return;
+      return
     }
     if (e.key === 'ArrowDown') {
-      this.keyDownAction(e);
+      this.keyDownAction(e)
     } else if (e.key === 'ArrowUp') {
-      this.keyUpAction(e);
+      this.keyUpAction(e)
     } else if (e.key === 'Tab' && e.shiftKey) {
-      this.keyShiftTabAction();
+      this.keyShiftTabAction()
     } else if (e.key === 'Escape') {
-      this.keyEscAction();
+      this.keyEscAction()
     } else if (e.key === ' ' || e.code === 'Space') {
-      this.keySpaceAction(e);
+      this.keySpaceAction(e)
     } else if (e.key === 'Enter' || e.key === 'NumpadEnter') {
-      this.keySpaceAction(e);
+      this.keySpaceAction(e)
     } else if (e.key === 'ArrowRight') {
-      this.keyArrowRightAction(e);
+      this.keyArrowRightAction(e)
     } else if (e.key === 'ArrowLeft') {
-      this.keyArrowLeftAction(e);
+      this.keyArrowLeftAction(e)
     }
-    e.stopPropagation();
+    e.stopPropagation()
   }
 
   /**
    * Handler that is called when the down key is pressed.
    */
   keyDownAction(e: KeyboardEvent): void {
-    e.preventDefault();
-    e.stopPropagation();
-    this.focusNext();
+    e.preventDefault()
+    e.stopPropagation()
+    this.focusNext()
   }
 
   /**
    * Handler that is called when the up key is pressed.
    */
   keyUpAction(e: KeyboardEvent): void {
-    e.preventDefault();
-    this.focusPrevious();
+    e.preventDefault()
+    this.focusPrevious()
   }
 
   /**
    * Handles shift+tab keypress on the menu.
    */
   keyShiftTabAction(): void {
-    const oldTabIndex = this.getAttribute('tabindex');
-    this.shiftTabPressedInternal = true;
-    this.focusedItemInternal = undefined;
-    this.setAttribute('tabindex', '-1');
+    const oldTabIndex = this.getAttribute('tabindex')
+    this.shiftTabPressedInternal = true
+    this.focusedItemInternal = undefined
+    this.setAttribute('tabindex', '-1')
     setTimeout(() => {
       if (oldTabIndex) {
-        this.setAttribute('tabindex', oldTabIndex);
+        this.setAttribute('tabindex', oldTabIndex)
       }
-      this.shiftTabPressedInternal = false;
-    }, 1);
+      this.shiftTabPressedInternal = false
+    }, 1)
   }
 
   /**
    * Handler that is called when the esc key is pressed.
    */
   keyEscAction(): void {
-    const { focusedItem } = this;
+    const { focusedItem } = this
     if (focusedItem) {
-      focusedItem.blur();
+      focusedItem.blur()
     }
   }
 
@@ -992,20 +1009,20 @@ export default class ApiNavigation extends ApiElement {
    * A handler for the space bar key down.
    */
   keySpaceAction(e: KeyboardEvent): void {
-    e.preventDefault();
-    e.stopPropagation();
-    const path = e.composedPath();
-    const target = path && path[0] as HTMLElement;
+    e.preventDefault()
+    e.stopPropagation()
+    const path = e.composedPath()
+    const target = path && (path[0] as HTMLElement)
     if (!target) {
-      return;
+      return
     }
-    const { classList, dataset } = target;
+    const { classList, dataset } = target
     if (classList.contains('section-title')) {
-      this.toggleSectionElement(target);
+      this.toggleSectionElement(target)
     } else if (classList.contains('list-item')) {
-      const { graphId, graphShape } = dataset;
+      const { graphId, graphShape } = dataset
       if (graphId && graphShape) {
-        this.makeSelection(graphId, graphShape as SelectionType);
+        this.makeSelection(graphId, graphShape as SelectionType)
       }
     }
   }
@@ -1014,16 +1031,16 @@ export default class ApiNavigation extends ApiElement {
    * A handler for the key right down. Opens operations when needed.
    */
   keyArrowRightAction(e: KeyboardEvent): void {
-    const path = e.composedPath();
-    const target = path && path[0] as HTMLElement;
+    const path = e.composedPath()
+    const target = path && (path[0] as HTMLElement)
     if (!target) {
-      return;
+      return
     }
-    const { classList, dataset } = target;
+    const { classList, dataset } = target
     if (dataset.graphId && classList.contains('endpoint') && classList.contains('list-item')) {
       if (!this.openedEndpoints.includes(dataset.graphId)) {
-        this.openedEndpoints.push(dataset.graphId);
-        this.requestUpdate();
+        this.openedEndpoints.push(dataset.graphId)
+        this.requestUpdate()
       }
     }
   }
@@ -1032,17 +1049,17 @@ export default class ApiNavigation extends ApiElement {
    * A handler for the key left down. Closes operations when needed.
    */
   keyArrowLeftAction(e: KeyboardEvent): void {
-    const path = e.composedPath();
-    const target = path && path[0] as HTMLElement;
+    const path = e.composedPath()
+    const target = path && (path[0] as HTMLElement)
     if (!target) {
-      return;
+      return
     }
-    const { classList, dataset } = target;
+    const { classList, dataset } = target
     if (dataset.graphId && classList.contains('endpoint') && classList.contains('list-item')) {
-      const index = this.openedEndpoints.indexOf(dataset.graphId);
+      const index = this.openedEndpoints.indexOf(dataset.graphId)
       if (index !== -1) {
-        this.openedEndpoints.splice(index, 1);
-        this.requestUpdate();
+        this.openedEndpoints.splice(index, 1)
+        this.requestUpdate()
       }
     }
   }
@@ -1051,18 +1068,18 @@ export default class ApiNavigation extends ApiElement {
    * Focuses on the previous item in the navigation.
    */
   focusPrevious(): void {
-    const items = this.listActiveItems();
-    const { length } = items;
-    const curFocusIndex = this.focusedItemInternal ? items.indexOf(this.focusedItemInternal) : -1;
+    const items = this.listActiveItems()
+    const { length } = items
+    const curFocusIndex = this.focusedItemInternal ? items.indexOf(this.focusedItemInternal) : -1
     for (let i = 1; i < length + 1; i++) {
-      const item = items[(curFocusIndex - i + length) % length];
+      const item = items[(curFocusIndex - i + length) % length]
       if (item && !item.hasAttribute('disabled')) {
-        const owner = (item.getRootNode && item.getRootNode()) as Document || document;
-        this.focusItem(item);
+        const owner = ((item.getRootNode && item.getRootNode()) as Document) || document
+        this.focusItem(item)
         // Focus might not have worked, if the element was hidden or not
         // focusable. In that case, try again.
         if (owner.activeElement === item) {
-          return;
+          return
         }
       }
     }
@@ -1072,18 +1089,18 @@ export default class ApiNavigation extends ApiElement {
    * Focuses on the next item in the navigation.
    */
   focusNext(): void {
-    const items = this.listActiveItems();
-    const { length } = items;
-    const curFocusIndex = this.focusedItemInternal ? items.indexOf(this.focusedItemInternal) : -1;
+    const items = this.listActiveItems()
+    const { length } = items
+    const curFocusIndex = this.focusedItemInternal ? items.indexOf(this.focusedItemInternal) : -1
     for (let i = 1; i < length + 1; i++) {
-      const item = items[(curFocusIndex + i) % length];
+      const item = items[(curFocusIndex + i) % length]
       if (!item.hasAttribute('disabled')) {
-        const owner = (item.getRootNode && item.getRootNode()) as Document || document;
-        this.focusItem(item);
+        const owner = ((item.getRootNode && item.getRootNode()) as Document) || document
+        this.focusItem(item)
         // Focus might not have worked, if the element was hidden or not
         // focusable. In that case, try again.
         if (owner.activeElement === item) {
-          return;
+          return
         }
       }
     }
@@ -1094,16 +1111,16 @@ export default class ApiNavigation extends ApiElement {
    * Note, this dispatches the navigation action event.
    */
   select(id?: string): void {
-    const { shadowRoot } = this;
+    const { shadowRoot } = this
     if (!id || !shadowRoot) {
-      return;
+      return
     }
-    const element = (shadowRoot.querySelector(`[data-graph-id="${id}"]`)) as HTMLElement | null;
+    const element = shadowRoot.querySelector(`[data-graph-id="${id}"]`) as HTMLElement | null
     if (!element) {
-      return;
+      return
     }
-    const { graphShape } = element.dataset;
-    this.makeSelection(id, graphShape as SelectionType);
+    const { graphShape } = element.dataset
+    this.makeSelection(id, graphShape as SelectionType)
   }
 
   /**
@@ -1112,51 +1129,51 @@ export default class ApiNavigation extends ApiElement {
    */
   listActiveItems(): HTMLElement[] {
     if (this.itemsInternal) {
-      return this.itemsInternal;
+      return this.itemsInternal
     }
-    const { shadowRoot } = this;
+    const { shadowRoot } = this
     if (!shadowRoot) {
-      return [];
+      return []
     }
-    let result: HTMLElement[] = [];
+    let result: HTMLElement[] = []
     if (this.summary) {
-      const node = shadowRoot.querySelector('.list-item.summary');
+      const node = shadowRoot.querySelector('.list-item.summary')
       if (node) {
-        result[result.length] = node as HTMLElement;
+        result[result.length] = node as HTMLElement
       }
     }
     if (this.hasEndpoints) {
-      const node = shadowRoot.querySelector('.endpoints .section-title');
+      const node = shadowRoot.querySelector('.endpoints .section-title')
       if (node) {
-        result[result.length] = node as HTMLElement;
+        result[result.length] = node as HTMLElement
       }
-      const nodes = Array.from(shadowRoot.querySelectorAll('.endpoints .list-item.endpoint'));
+      const nodes = Array.from(shadowRoot.querySelectorAll('.endpoints .list-item.endpoint'))
       nodes.forEach((item) => {
-        result[result.length] = item as HTMLElement;
-        const collapse = item.nextElementSibling;
+        result[result.length] = item as HTMLElement
+        const collapse = item.nextElementSibling
         if (!collapse || collapse.localName !== 'ui-collapse') {
-          return;
+          return
         }
-        const children = Array.from(collapse.querySelectorAll('.list-item.operation')) as HTMLElement[];
+        const children = Array.from(collapse.querySelectorAll('.list-item.operation')) as HTMLElement[]
         if (children.length) {
-          result = result.concat(children);
+          result = result.concat(children)
         }
-      });
+      })
     }
     if (this.hasDocs) {
-      const children = this.listSectionActiveNodes('.documentation');
-      result = result.concat(children);
+      const children = this.listSectionActiveNodes('.documentation')
+      result = result.concat(children)
     }
     if (this.hasSchemas) {
-      const children = this.listSectionActiveNodes('.schemas');
-      result = result.concat(children);
+      const children = this.listSectionActiveNodes('.schemas')
+      result = result.concat(children)
     }
     if (this.hasSecurity) {
-      const children = this.listSectionActiveNodes('.security');
-      result = result.concat(children);
+      const children = this.listSectionActiveNodes('.security')
+      result = result.concat(children)
     }
-    this.itemsInternal = result.length ? result : undefined;
-    return result;
+    this.itemsInternal = result.length ? result : undefined
+    return result
   }
 
   /**
@@ -1164,23 +1181,23 @@ export default class ApiNavigation extends ApiElement {
    * @returns Nodes returned from query function.
    */
   listSectionActiveNodes(selector: string): HTMLElement[] {
-    const { shadowRoot } = this;
-    let result: HTMLElement[] = [];
+    const { shadowRoot } = this
+    let result: HTMLElement[] = []
     if (!shadowRoot) {
-      return result;
+      return result
     }
-    const node = shadowRoot.querySelector(`${selector} .section-title`);
+    const node = shadowRoot.querySelector(`${selector} .section-title`)
     if (node) {
-      result[result.length] = node as HTMLElement;
-      const collapse = node.nextElementSibling;
+      result[result.length] = node as HTMLElement
+      const collapse = node.nextElementSibling
       if (collapse) {
-        const children = Array.from(collapse.querySelectorAll('.list-item')) as HTMLElement[];
+        const children = Array.from(collapse.querySelectorAll('.list-item')) as HTMLElement[]
         if (children.length) {
-          result = result.concat(children);
+          result = result.concat(children)
         }
       }
     }
-    return result;
+    return result
   }
 
   /**
@@ -1190,35 +1207,35 @@ export default class ApiNavigation extends ApiElement {
    * @param type The selected type of the item.
    */
   makeSelection(id: string, type: SelectionType): void {
-    const { shadowRoot } = this;
+    const { shadowRoot } = this
     if (!shadowRoot) {
-      return ;
+      return
     }
-    const element = (shadowRoot.querySelector(`[data-graph-id="${id}"]`)) as HTMLElement | null;
+    const element = shadowRoot.querySelector(`[data-graph-id="${id}"]`) as HTMLElement | null
     if (!element) {
-      return;
+      return
     }
-    this.selectedItemInternal = element;
-    this.deselectItem(this.domainId as string, this.domainType as SelectionType);
-    this.domainIdInternal = id;
-    this.domainTypeInternal = type;
+    this.selectedItemInternal = element
+    this.deselectItem(this.domainId as string, this.domainType as SelectionType)
+    this.domainIdInternal = id
+    this.domainTypeInternal = type
     if (id === 'summary') {
-      this.summarySelectedInternal = true;
+      this.summarySelectedInternal = true
     } else {
-      this.selectItem(id, type);
+      this.selectItem(id, type)
     }
-    this.focusItem(this.selectedItemInternal);
-    this.requestUpdate();
-    this.notifyNavigation(id, type);
-    let parent = element.parentElement;
+    this.focusItem(this.selectedItemInternal)
+    this.requestUpdate()
+    this.notifyNavigation(id, type)
+    let parent = element.parentElement
     while (parent) {
       if (parent === this || !parent) {
-        return;
+        return
       }
       if (parent.localName === 'ui-collapse') {
-        (parent as UiCollapse).open = true;
+        ;(parent as UiCollapse).open = true
       }
-      parent = parent.parentElement;
+      parent = parent.parentElement
     }
   }
 
@@ -1228,10 +1245,10 @@ export default class ApiNavigation extends ApiElement {
    * @param type The type of the data.
    */
   selectItem(id: string, type: SelectionType): void {
-    const selectable = this.findSelectable(id, type);
+    const selectable = this.findSelectable(id, type)
     if (selectable) {
-      selectable.selected = true;
-      this.requestUpdate();
+      selectable.selected = true
+      this.requestUpdate()
     }
   }
 
@@ -1241,12 +1258,12 @@ export default class ApiNavigation extends ApiElement {
    * @param type The type of the data.
    */
   deselectItem(id: string, type: SelectionType): void {
-    this.summarySelectedInternal = false;
-    const selectable = this.findSelectable(id, type);
+    this.summarySelectedInternal = false
+    const selectable = this.findSelectable(id, type)
     if (selectable) {
-      selectable.selected = false;
-      selectable.secondarySelected = false;
-      this.requestUpdate();
+      selectable.selected = false
+      selectable.secondarySelected = false
+      this.requestUpdate()
     }
   }
 
@@ -1255,32 +1272,32 @@ export default class ApiNavigation extends ApiElement {
    * @param id The domain id of the menu item.
    * @param type The type of the data.
    */
-  findSelectable(id: string, type: SelectionType): SelectableMenuItem|undefined {
+  findSelectable(id: string, type: SelectionType): SelectableMenuItem | undefined {
     if (!id || !type) {
-      return undefined;
+      return undefined
     }
-    let selectable: SelectableMenuItem | undefined;
+    let selectable: SelectableMenuItem | undefined
     if (type === 'resource') {
-      selectable = (this.endpointsInternal || []).find((item) => item.id === id);
+      selectable = (this.endpointsInternal || []).find((item) => item.id === id)
     } else if (type === 'operation') {
       const endpoint = (this.endpointsInternal || []).find((item) => {
         if (!Array.isArray(item.operations) || !item.operations.length) {
-          return false;
+          return false
         }
-        const op = item.operations.find((opItem) => opItem.id === id);
-        return !!op;
-      });
+        const op = item.operations.find((opItem) => opItem.id === id)
+        return !!op
+      })
       if (endpoint) {
-        selectable = endpoint.operations.find((item) => item.id === id);
+        selectable = endpoint.operations.find((item) => item.id === id)
       }
     } else if (type === 'documentation') {
-      selectable = (this.documentationsInternal || []).find((item) => item.id === id);
+      selectable = (this.documentationsInternal || []).find((item) => item.id === id)
     } else if (type === 'schema') {
-      selectable = (this.schemasInternal || []).find((item) => item.id === id);
+      selectable = (this.schemasInternal || []).find((item) => item.id === id)
     } else if (type === 'security') {
-      selectable = (this.securityInternal || []).find((item) => item.id === id);
+      selectable = (this.securityInternal || []).find((item) => item.id === id)
     }
-    return selectable;
+    return selectable
   }
 
   /**
@@ -1288,76 +1305,76 @@ export default class ApiNavigation extends ApiElement {
    */
   processQuery(value?: string): void {
     if (typeof value !== 'string' || value.trim() === '') {
-      this.queryInternal = undefined;
+      this.queryInternal = undefined
     } else {
-      this.queryInternal = value.toLowerCase();
+      this.queryInternal = value.toLowerCase()
     }
-    this.requestUpdate();
+    this.requestUpdate()
   }
 
   /**
    * A handler for the search event from the filter input.
    */
   searchHandler(e: Event): void {
-    const input = (e.target as HTMLInputElement);
-    this.query = input.value;
+    const input = e.target as HTMLInputElement
+    this.query = input.value
     Events.Telemetry.event(this, {
       category: 'API navigation',
       action: 'Filter',
       label: input.value ? 'Query' : 'Clear',
-    });
+    })
   }
 
   /**
    * Opens all sections of the menu and all endpoints.
    */
   expandAll(): void {
-    this.endpointsOpened = true;
-    this.schemasOpened = true;
-    this.securityOpened = true;
-    this.documentationsOpened = true;
-    this.expandAllEndpoints();
+    this.endpointsOpened = true
+    this.schemasOpened = true
+    this.securityOpened = true
+    this.documentationsOpened = true
+    this.expandAllEndpoints()
   }
 
   /**
    * Closes all sections of the menu and all endpoints.
    */
   collapseAll(): void {
-    this.endpointsOpened = false;
-    this.schemasOpened = false;
-    this.securityOpened = false;
-    this.documentationsOpened = false;
-    this.collapseAllEndpoints();
+    this.endpointsOpened = false
+    this.schemasOpened = false
+    this.securityOpened = false
+    this.documentationsOpened = false
+    this.collapseAllEndpoints()
   }
 
   /**
    * Opens all endpoints exposing all operations
    */
   expandAllEndpoints(): void {
-    const { shadowRoot } = this;
+    const { shadowRoot } = this
     if (!shadowRoot) {
-      return;
+      return
     }
-    this.endpointsOpened = true;
-    const items = Array.from(shadowRoot.querySelectorAll('div.endpoints .list-item.endpoint')) as HTMLInputElement[];
-    this.openedEndpoints = [];
+    this.endpointsOpened = true
+    const items = Array.from(shadowRoot.querySelectorAll('div.endpoints .list-item.endpoint')) as HTMLInputElement[]
+    this.openedEndpoints = []
     items.forEach((item) => {
-      const { graphId } = item.dataset;
+      const { graphId } = item.dataset
       if (graphId) {
-        this.openedEndpoints.push(graphId);
+        this.openedEndpoints.push(graphId)
       }
-    });
-    this.endpointsExpandedInternal = true;
-    this.requestUpdate();
+    })
+    this.endpointsExpandedInternal = true
+    this.requestUpdate()
   }
 
   /**
    * Hides all operations and collapses all endpoints.
    */
   collapseAllEndpoints(): void {
-    this.openedEndpoints = [];
-    this.endpointsExpandedInternal = false;
-    this.requestUpdate();
+    this.openedEndpoints = []
+    this.endpointsExpandedInternal = false
+    this.requestUpdate()
   }
 
   /**
@@ -1366,18 +1383,18 @@ export default class ApiNavigation extends ApiElement {
    */
   async addEndpoint(): Promise<void> {
     if (!this.endpointsOpened) {
-      this.endpointsOpened = true;
-      await this.updateComplete;
+      this.endpointsOpened = true
+      await this.updateComplete
     }
-    this.addingEndpointInternal = true;
-    this.requestUpdate();
-    await this.updateComplete;
-    const wrap = this.shadowRoot?.querySelector('.add-endpoint-input');
+    this.addingEndpointInternal = true
+    this.requestUpdate()
+    await this.updateComplete
+    const wrap = this.shadowRoot?.querySelector('.add-endpoint-input')
     if (wrap) {
-      wrap.scrollIntoView();
-      const input = wrap.querySelector('input') as HTMLInputElement;
-      input.focus();
-      input.select();
+      wrap.scrollIntoView()
+      const input = wrap.querySelector('input') as HTMLInputElement
+      input.focus()
+      input.select()
     }
   }
 
@@ -1386,21 +1403,21 @@ export default class ApiNavigation extends ApiElement {
    * This renders an input in the view (in the documentation list) where the user can enter the name.
    * @param isExternal Whether the documentation is a link to a www document.
    */
-  async addDocumentation(isExternal = false) : Promise<void>{
+  async addDocumentation(isExternal = false): Promise<void> {
     if (!this.documentationsOpened) {
-      this.documentationsOpened = true;
-    }
-    this.addingDocumentationInternal = true;
-    this.addingExternalInternal = isExternal;
-    this.requestUpdate();
-    await this.updateComplete;
-    const selector = isExternal ? '.add-external-doc-input' : '.add-documentation-input';
-    const wrap = this.shadowRoot?.querySelector(selector) as HTMLInputElement;
+      this.documentationsOpened = true
+    }
+    this.addingDocumentationInternal = true
+    this.addingExternalInternal = isExternal
+    this.requestUpdate()
+    await this.updateComplete
+    const selector = isExternal ? '.add-external-doc-input' : '.add-documentation-input'
+    const wrap = this.shadowRoot?.querySelector(selector) as HTMLInputElement
     if (wrap) {
-      wrap.scrollIntoView();
-      const input = wrap.querySelector('input') as HTMLInputElement;
-      input.focus();
-      input.select();
+      wrap.scrollIntoView()
+      const input = wrap.querySelector('input') as HTMLInputElement
+      input.focus()
+      input.select()
     }
   }
 
@@ -1411,18 +1428,18 @@ export default class ApiNavigation extends ApiElement {
    */
   async addSchema(type: SchemaAddType = 'object'): Promise<void> {
     if (!this.schemasOpened) {
-      this.schemasOpened = true;
+      this.schemasOpened = true
     }
-    this.addingSchemaInternal = true;
-    this.addingSchemaTypeInternal = type;
-    this.requestUpdate();
-    await this.updateComplete;
-    const wrap = this.shadowRoot?.querySelector('.add-schema-input');
+    this.addingSchemaInternal = true
+    this.addingSchemaTypeInternal = type
+    this.requestUpdate()
+    await this.updateComplete
+    const wrap = this.shadowRoot?.querySelector('.add-schema-input')
     if (wrap) {
-      wrap.scrollIntoView();
-      const input = wrap.querySelector('input') as HTMLInputElement;
-      input.focus();
-      input.select();
+      wrap.scrollIntoView()
+      const input = wrap.querySelector('input') as HTMLInputElement
+      input.focus()
+      input.select()
     }
   }
 
@@ -1434,9 +1451,9 @@ export default class ApiNavigation extends ApiElement {
    * attribute, true for default selected item and false for others.
    */
   resetTabindices(): void {
-    const { selectedItem } = this;
-    const items = this.listActiveItems();
-    items.forEach((item) => item.setAttribute('tabindex', item === selectedItem ? '0' : '-1'));
+    const { selectedItem } = this
+    const items = this.listActiveItems()
+    items.forEach((item) => item.setAttribute('tabindex', item === selectedItem ? '0' : '-1'))
   }
 
   /**
@@ -1445,19 +1462,19 @@ export default class ApiNavigation extends ApiElement {
    * @param type The domain type.
    */
   notifyNavigation(id: string, type: SelectionType): void {
-    let parent;
+    let parent
     if (type === 'operation' && id) {
-      const node = this.shadowRoot?.querySelector(`.operation[data-graph-id="${id}"]`);
+      const node = this.shadowRoot?.querySelector(`.operation[data-graph-id="${id}"]`)
       if (node) {
-        parent = (node as HTMLElement).dataset.graphParent;
+        parent = (node as HTMLElement).dataset.graphParent
       }
     }
-    Events.Navigation.apiNavigate(this, id, type, parent);
+    Events.Navigation.apiNavigate(this, id, type, parent)
     Events.Telemetry.event(this, {
       category: 'API navigation',
       action: 'Navigate',
       label: type,
-    });
+    })
   }
 
   /**
@@ -1465,11 +1482,11 @@ export default class ApiNavigation extends ApiElement {
    */
   addEndpointKeydownHandler(e: KeyboardEvent): void {
     if (e.key === 'Enter' || e.key === 'NumpadEnter') {
-      e.preventDefault();
-      this.commitNewEndpoint();
+      e.preventDefault()
+      this.commitNewEndpoint()
     } else if (e.key === 'Escape') {
-      e.preventDefault();
-      this.cancelNewEndpoint();
+      e.preventDefault()
+      this.cancelNewEndpoint()
     }
   }
 
@@ -1478,14 +1495,14 @@ export default class ApiNavigation extends ApiElement {
    */
   addDocumentationKeydownHandler(e: KeyboardEvent): void {
     if (e.key === 'Enter' || e.key === 'NumpadEnter') {
-      e.preventDefault();
-      const input = e.target as HTMLInputElement;
-      this.commitNewDocumentation(input.value);
+      e.preventDefault()
+      const input = e.target as HTMLInputElement
+      this.commitNewDocumentation(input.value)
     } else if (e.key === 'Escape') {
-      e.preventDefault();
-      this.addingDocumentationInternal = false;
-      this.addingExternalInternal = undefined;
-      this.requestUpdate();
+      e.preventDefault()
+      this.addingDocumentationInternal = false
+      this.addingExternalInternal = undefined
+      this.requestUpdate()
     }
   }
 
@@ -1494,43 +1511,43 @@ export default class ApiNavigation extends ApiElement {
    */
   addSchemaKeydownHandler(e: KeyboardEvent): void {
     if (e.key === 'Enter' || e.key === 'NumpadEnter') {
-      e.preventDefault();
-      const input = (e.target as HTMLInputElement);
-      this.commitNewSchema(input.value);
+      e.preventDefault()
+      const input = e.target as HTMLInputElement
+      this.commitNewSchema(input.value)
     } else if (e.key === 'Escape') {
-      e.preventDefault();
-      this.addingSchemaInternal = false;
-      this.addingSchemaTypeInternal = undefined;
-      this.requestUpdate();
+      e.preventDefault()
+      this.addingSchemaInternal = false
+      this.addingSchemaTypeInternal = undefined
+      this.requestUpdate()
     }
   }
 
   async commitNewEndpoint(): Promise<void> {
-    const input = this.shadowRoot?.querySelector('.add-endpoint-input input');
+    const input = this.shadowRoot?.querySelector('.add-endpoint-input input')
     if (!input) {
-      return;
+      return
     }
-    const name = (input as HTMLInputElement).value.trim();
+    const name = (input as HTMLInputElement).value.trim()
     if (!name) {
-      return;
+      return
     }
     // await Events.Endpoint.add(this, { path: name });
-    await this.cancelNewEndpoint();
+    await this.cancelNewEndpoint()
   }
 
   async cancelNewEndpoint(): Promise<void> {
-    this.addingEndpointInternal = false;
-    this.requestUpdate();
-    await this.updateComplete;
+    this.addingEndpointInternal = false
+    this.requestUpdate()
+    await this.updateComplete
   }
 
   /**
    * @param value The title of the documentation.
    */
   async commitNewDocumentation(value = ''): Promise<void> {
-    const name = value.trim();
+    const name = value.trim()
     if (!name) {
-      return;
+      return
     }
     // const opts = { title: name };
     // const isExternal = this.addingExternalInternal;
@@ -1540,19 +1557,19 @@ export default class ApiNavigation extends ApiElement {
     //     opts.url = (input as HTMLInputElement).value;
     //   }
     // }
-    this.addingDocumentationInternal = false;
-    this.addingExternalInternal = undefined;
+    this.addingDocumentationInternal = false
+    this.addingExternalInternal = undefined
     // await Events.Documentation.add(this, opts);
-    this.requestUpdate();
+    this.requestUpdate()
   }
 
   /**
    * @param value The name of the schema.
    */
   async commitNewSchema(value = ''): Promise<void> {
-    const name = value.trim();
+    const name = value.trim()
     if (!name) {
-      return;
+      return
     }
     // const type = this.addingSchemaTypeInternal;
     // const opts = { name };
@@ -1565,10 +1582,10 @@ export default class ApiNavigation extends ApiElement {
     //   case 'union': opts.type = AmfNamespace.aml.vocabularies.shapes.UnionShape; break;
     //   default:
     // }
-    this.addingSchemaInternal = false;
-    this.addingSchemaTypeInternal = undefined;
+    this.addingSchemaInternal = false
+    this.addingSchemaTypeInternal = undefined
     // await Events.Type.add(this, opts);
-    this.requestUpdate();
+    this.requestUpdate()
   }
 
   /**
@@ -1576,54 +1593,54 @@ export default class ApiNavigation extends ApiElement {
    * @param id The domain id of the item to edit.
    */
   async renameAction(id: string): Promise<void> {
-    const { shadowRoot } = this;
+    const { shadowRoot } = this
     if (!shadowRoot) {
-      throw new Error(`Invalid state. The DOM is not ready.`);
+      throw new Error(`Invalid state. The DOM is not ready.`)
     }
-    const item = this.findViewModelItem(id);
+    const item = this.findViewModelItem(id)
     if (!item) {
-      return;
+      return
     }
-    item.nameEditor = true;
-    this.requestUpdate();
-    await this.updateComplete;
-    const input = (shadowRoot.querySelector(`input[data-id="${id}"]`)) as HTMLInputElement;
-    input.select();
-    input.focus();
+    item.nameEditor = true
+    this.requestUpdate()
+    await this.updateComplete
+    const input = shadowRoot.querySelector(`input[data-id="${id}"]`) as HTMLInputElement
+    input.select()
+    input.focus()
   }
 
   /**
    * @param id The domain id of the item to find.
    */
-  findViewModelItem(id: string): SelectableMenuItem & EditableMenuItem | null {
-    const endpoints = this.endpointsInternal;
+  findViewModelItem(id: string): (SelectableMenuItem & EditableMenuItem) | null {
+    const endpoints = this.endpointsInternal
     if (endpoints && endpoints.length) {
       for (let i = 0, len = endpoints.length; i < len; i++) {
-        const endpoint = endpoints[i];
+        const endpoint = endpoints[i]
         if (endpoint.id === id) {
-          return endpoint;
+          return endpoint
         }
-        const operation = endpoint.operations.find((op) => op.id === id);
+        const operation = endpoint.operations.find((op) => op.id === id)
         if (operation) {
-          return operation;
+          return operation
         }
       }
     }
-    const docs = this.documentationsInternal;
+    const docs = this.documentationsInternal
     if (docs && docs.length) {
-      const doc = docs.find((item) => item.id === id);
+      const doc = docs.find((item) => item.id === id)
       if (doc) {
-        return doc;
+        return doc
       }
     }
-    const schemas = this.schemasInternal;
+    const schemas = this.schemasInternal
     if (schemas && schemas.length) {
-      const schema = schemas.find((item) => item.id === id);
+      const schema = schemas.find((item) => item.id === id)
       if (schema) {
-        return schema;
+        return schema
       }
     }
-    return null;
+    return null
   }
 
   /**
@@ -1631,40 +1648,40 @@ export default class ApiNavigation extends ApiElement {
    */
   protected async renameKeydownHandler(e: KeyboardEvent): Promise<void> {
     // do not interfere with the navigation logic.
-    e.stopPropagation();
+    e.stopPropagation()
     if (!['Enter', 'NumpadEnter', 'Escape'].includes(e.code)) {
-      return;
+      return
     }
-    e.preventDefault();
-    const input = e.target as HTMLInputElement;
-    const { value, dataset } = input;
-    const { id, type } = dataset;
-    const item = this.findViewModelItem(id as string);
+    e.preventDefault()
+    const input = e.target as HTMLInputElement
+    const { value, dataset } = input
+    const { id, type } = dataset
+    const item = this.findViewModelItem(id as string)
     if (!item) {
-      return;
+      return
     }
-    item.nameEditor = false;
-    this.requestUpdate();
+    item.nameEditor = false
+    this.requestUpdate()
     if (e.code === 'Escape') {
-      return;
+      return
     }
-    await this.updateNameHandler(id as string, value, type as SelectionType);
+    await this.updateNameHandler(id as string, value, type as SelectionType)
   }
 
   /**
    * A blur event handler on the rename input
    */
   protected async renameBlurHandler(e: Event): Promise<void> {
-    const input = e.target as HTMLInputElement;
-    const { value, dataset } = input;
-    const { id, type } = dataset;
-    const item = this.findViewModelItem(id as string);
+    const input = e.target as HTMLInputElement
+    const { value, dataset } = input
+    const { id, type } = dataset
+    const item = this.findViewModelItem(id as string)
     if (!item) {
-      return;
+      return
     }
-    item.nameEditor = false;
-    this.requestUpdate();
-    await this.updateNameHandler(id as string, value, type as SelectionType);
+    item.nameEditor = false
+    this.requestUpdate()
+    await this.updateNameHandler(id as string, value, type as SelectionType)
   }
 
   /**
@@ -1675,11 +1692,11 @@ export default class ApiNavigation extends ApiElement {
    * @returns A promise when the update operation finish.
    */
   protected async updateNameHandler(id: string, value: string, type: SelectionType): Promise<void> {
-    const updateValue = value.trim();
+    const updateValue = value.trim()
     if (!updateValue) {
-      return;
+      return
     }
-    const promise = Promise.reject(new Error(`APi editing of ${type} ${id} is not yet supported`));
+    const promise = Promise.reject(new Error(`APi editing of ${type} ${id} is not yet supported`))
     // let promise;
     // if (type === 'SelectionType') {
     //   promise = Events.Endpoint.update(this, id, 'name', updateValue);
@@ -1696,10 +1713,10 @@ export default class ApiNavigation extends ApiElement {
     //   promise = Events.Type.update(this, id, prop, updateValue);
     // }
     try {
-      await promise;
+      await promise
     } catch (e) {
-      const ex = e as Error;
-      Events.Reporting.error(this, ex, `Unable rename object: ${ex.message}`, 'graph-api-navigation');
+      const ex = e as Error
+      Events.Reporting.error(this, ex, `Unable rename object: ${ex.message}`, 'graph-api-navigation')
     }
   }
 
@@ -1709,173 +1726,161 @@ export default class ApiNavigation extends ApiElement {
    * the original event is cancelled to prevent default behavior.
    */
   protected externalDocumentationHandler(e: Event): void {
-    const a = e.currentTarget as HTMLAnchorElement;
+    const a = e.currentTarget as HTMLAnchorElement
     if (a.href.startsWith('javascript')) {
-      cancelEvent(e);
-      SnackNotifications.notify(`Navigation blocked due to security concern. Javascript detected.`);
-      return;
+      cancelEvent(e)
+      SnackNotifications.notify(`Navigation blocked due to security concern. Javascript detected.`)
+      return
     }
-    const handled = Events.Navigation.navigateExternal(this, a.href);
+    const handled = Events.Navigation.navigateExternal(this, a.href)
     if (handled) {
-      cancelEvent(e);
+      cancelEvent(e)
     }
   }
 
   override render(): TemplateResult {
     return html`
-    <div class="wrapper" role="menu" aria-label="Navigate the API">
-      ${this.filterTemplate()}
-      ${this.renderSummary()}
-      ${this.renderEndpoints()}
-      ${this.renderDocumentations()}
-      ${this.renderSchemas()}
-      ${this.renderSecurities()}
-    </div>
-    `;
+      <div class="wrapper" role="menu" aria-label="Navigate the API">
+        ${this.filterTemplate()} ${this.renderSummary()} ${this.renderEndpoints()} ${this.renderDocumentations()}
+        ${this.renderSchemas()} ${this.renderSecurities()}
+      </div>
+    `
   }
 
   /**
    * @returns The template for the summary filed.
    */
   protected renderSummary(): TemplateResult | string {
-    const { summaryRendered, summaryLabel } = this;
+    const { summaryRendered, summaryLabel } = this
     if (!summaryRendered || !summaryLabel) {
-      return '';
+      return ''
     }
-    const selected = !!this.summarySelectedInternal;
+    const selected = !!this.summarySelectedInternal
     const classes = {
       'list-item': true,
-      summary: true,
-      label: true,
+      'summary': true,
+      'label': true,
       selected,
-    };
+    }
     return html`
-    <div class="summary">
-      <div 
-        part="api-navigation-list-item label" 
-        class="${classMap(classes)}"
-        role="menuitem"
-        tabindex="-1"
-        data-graph-id="summary"
-        data-graph-shape="summary"
-        @click="${this.itemClickHandler}"
-      >
-        ${summaryLabel}
+      <div class="summary">
+        <div
+          part="api-navigation-list-item label"
+          class="${classMap(classes)}"
+          role="menuitem"
+          tabindex="-1"
+          data-graph-id="summary"
+          data-graph-shape="summary"
+          @click="${this.itemClickHandler}"
+        >
+          ${summaryLabel}
+        </div>
       </div>
-    </div>
-    `;
+    `
   }
 
   /**
    * @returns The template for the list of endpoints.
    */
   protected renderEndpoints(): TemplateResult | string {
-    const { edit } = this;
+    const { edit } = this
     if (!this.hasEndpoints && !edit) {
-      return '';
+      return ''
     }
-    const items = this.getFilteredEndpoints();
-    const hasItems = !!items && !!items.length;
+    const items = this.getFilteredEndpoints()
+    const hasItems = !!items && !!items.length
     if (!hasItems && !edit) {
-      return '';
+      return ''
     }
-    const { endpointsOpened = false, documentMeta } = this;
-    const sectionLabel = documentMeta && documentMeta.isAsync ? 'Channels' : 'Endpoints';
+    const { endpointsOpened = false, documentMeta } = this
+    const sectionLabel = documentMeta && documentMeta.isAsync ? 'Channels' : 'Endpoints'
     const classes = {
       endpoints: true,
       opened: !!endpointsOpened,
-    };
-    const addingEndpoint = this.addingEndpointInternal;
-    const showEmpty = !hasItems && !addingEndpoint;
+    }
+    const addingEndpoint = this.addingEndpointInternal
+    const showEmpty = !hasItems && !addingEndpoint
     return html`
-    <div
-      class="${classMap(classes)}"
-    >
-      <div
-        class="section-title"
-        data-property="endpointsOpened"
-        data-section="endpoints"
-        @click="${this.toggleSectionClickHandler}"
-        @keydown="${this.toggleSectionKeydownHandler}"
-        title="Toggle the list"
-        aria-haspopup="true"
-        role="menuitem"
-      >
-        <ui-icon-button
-          part="toggle-button"
-          class="toggle-button section"
-          aria-label="Toggle the list"
-          tabindex="-1"
+      <div class="${classMap(classes)}">
+        <div
+          class="section-title"
+          data-property="endpointsOpened"
+          data-section="endpoints"
+          @click="${this.toggleSectionClickHandler}"
+          @keydown="${this.toggleSectionKeydownHandler}"
+          title="Toggle the list"
+          aria-haspopup="true"
+          role="menuitem"
         >
-          <ui-icon role="presentation" icon="arrowDropDown"></ui-icon>
-        </ui-icon-button>
-        <div class="section-title-label label">${sectionLabel}</div>
-      </div>
-      <ui-collapse
-        .open="${endpointsOpened}"
-        aria-hidden="${endpointsOpened ? 'false' : 'true'}"
-        role="menu"
-      >
-        <div class="children">
-          ${addingEndpoint ? this.addEndpointInputTemplate() : ''}
-          ${hasItems ? items.map((item) => this.renderEndpoint(item)) : ''}
-          ${showEmpty ? html`<p class="empty-section">No endpoints in this API</p>` : ''}
+          <ui-icon-button part="toggle-button" class="toggle-button section" aria-label="Toggle the list" tabindex="-1">
+            <ui-icon role="presentation" icon="arrowDropDown"></ui-icon>
+          </ui-icon-button>
+          <div class="section-title-label label">${sectionLabel}</div>
         </div>
-      </ui-collapse>
-    </div>
-    `;
+        <ui-collapse .open="${endpointsOpened}" aria-hidden="${endpointsOpened ? 'false' : 'true'}" role="menu">
+          <div class="children">
+            ${addingEndpoint ? this.addEndpointInputTemplate() : ''}
+            ${hasItems ? items.map((item) => this.renderEndpoint(item)) : ''}
+            ${showEmpty ? html`<p class="empty-section">No endpoints in this API</p>` : ''}
+          </div>
+        </ui-collapse>
+      </div>
+    `
   }
 
   /**
    * @returns The template for an endpoint.
    */
   protected renderEndpoint(item: EndpointItem): TemplateResult {
-    const { indent, operations, label, path, id, selected, secondarySelected, nameEditor } = item;
+    const { indent, operations, label, path, id, selected, secondarySelected, nameEditor } = item
     const itemStyles = {
       paddingLeft: this.computeEndpointPaddingValue(indent),
-    };
-    const renderChildren = Array.isArray(operations) && !!operations.length;
-    const opened = renderChildren && this.openedEndpoints.includes(id as string);
+    }
+    const renderChildren = Array.isArray(operations) && !!operations.length
+    const opened = renderChildren && this.openedEndpoints.includes(id as string)
     const classes = {
       'list-item': true,
       'endpoint': true,
       opened,
-      selected: !!selected,
-      secondarySelected: !!secondarySelected,
-    };
+      'selected': !!selected,
+      'secondarySelected': !!secondarySelected,
+    }
     return html`
-    <div
-      part="api-navigation-list-item"
-      class="${classMap(classes)}"
-      data-path="${path}"
-      data-graph-id="${ifDefined(id)}"
-      data-graph-shape="resource"
-      @click="${this.itemClickHandler}"
-      title="Open this endpoint"
-      style="${styleMap(itemStyles)}"
-      role="menuitem"
-      aria-haspopup="true"
-    >
-      ${nameEditor ?
-        this.renameInputTemplate(id as string, 'resource', label)
-        : html`
-        ${renderChildren ? this.renderEndpointToggle(id as string) : html`<div class="endpoint-toggle-mock"></div>`}
-        <div class="endpoint-name label">${label}</div>
-        `
-      }
-    </div>
-    ${renderChildren ? html`
-      <ui-collapse
-        part="api-navigation-operation-collapse"
-        class="operation-collapse"
-        data-graph-id="${id as string}"
-        role="menu"
-        .open="${opened}"
+      <div
+        part="api-navigation-list-item"
+        class="${classMap(classes)}"
+        data-path="${path}"
+        data-graph-id="${ifDefined(id)}"
+        data-graph-shape="resource"
+        @click="${this.itemClickHandler}"
+        title="Open this endpoint"
+        style="${styleMap(itemStyles)}"
+        role="menuitem"
+        aria-haspopup="true"
       >
-        ${item.operations.map((op) => this.renderOperationItem(item, op))}
-      </ui-collapse>
-    ` : ''}
-    `;
+        ${nameEditor
+          ? this.renameInputTemplate(id as string, 'resource', label)
+          : html`
+              ${renderChildren
+                ? this.renderEndpointToggle(id as string)
+                : html`<div class="endpoint-toggle-mock"></div>`}
+              <div class="endpoint-name label">${label}</div>
+            `}
+      </div>
+      ${renderChildren
+        ? html`
+            <ui-collapse
+              part="api-navigation-operation-collapse"
+              class="operation-collapse"
+              data-graph-id="${id as string}"
+              role="menu"
+              .open="${opened}"
+            >
+              ${item.operations.map((op) => this.renderOperationItem(item, op))}
+            </ui-collapse>
+          `
+        : ''}
+    `
   }
 
   /**
@@ -1883,109 +1888,100 @@ export default class ApiNavigation extends ApiElement {
    * @return The template for an endpoint toggle button.
    */
   protected renderEndpointToggle(id: string): TemplateResult {
-    return html`
-    <ui-icon-button 
-      class="toggle-button endpoint" 
-      aria-label="Toggle the list of operations" 
+    return html` <ui-icon-button
+      class="toggle-button endpoint"
+      aria-label="Toggle the list of operations"
       tabindex="-1"
       data-graph-id="${id}"
       @click="${this.endpointToggleClickHandler}"
     >
       <ui-icon icon="arrowDropDown" role="presentation"></ui-icon>
-    </ui-icon-button>`;
+    </ui-icon-button>`
   }
 
   /**
-   * @param item The endpoint definition 
+   * @param item The endpoint definition
    * @param op The operation definition.
    * @return The template for an operation list item.
    */
   protected renderOperationItem(item: EndpointItem, op: OperationItem): TemplateResult {
-    const { id, name, method, selected, secondarySelected, nameEditor } = op;
+    const { id, name, method, selected, secondarySelected, nameEditor } = op
     const itemStyles = {
       paddingLeft: this.computeOperationPaddingValue(item.indent),
-    };
+    }
     const classes = {
       'list-item': true,
-      label: true,
-      operation: true,
-      selected: !!selected,
-      secondarySelected: !!secondarySelected,
-    };
+      'label': true,
+      'operation': true,
+      'selected': !!selected,
+      'secondarySelected': !!secondarySelected,
+    }
     return html`
-    <div
-      part="api-navigation-list-item"
-      class="${classMap(classes)}"
-      role="menuitem"
-      tabindex="-1"
-      data-graph-parent="${item.id as string}"
-      data-graph-id="${id}"
-      data-graph-shape="operation"
-      data-operation="${method}"
-      @click="${this.itemClickHandler}"
-      style="${styleMap(itemStyles)}"
-    >
-      ${nameEditor ?
-        this.renameInputTemplate(id, 'operation', name)
-        : html`
-        <span class="http-label pill" data-method="${method}">${method}</span>
-        ${name}
-        `
-      }
-    </div>
-    `;
+      <div
+        part="api-navigation-list-item"
+        class="${classMap(classes)}"
+        role="menuitem"
+        tabindex="-1"
+        data-graph-parent="${item.id as string}"
+        data-graph-id="${id}"
+        data-graph-shape="operation"
+        data-operation="${method}"
+        @click="${this.itemClickHandler}"
+        style="${styleMap(itemStyles)}"
+      >
+        ${nameEditor
+          ? this.renameInputTemplate(id, 'operation', name)
+          : html`
+              <span class="http-label pill" data-method="${method}">${method}</span>
+              ${name}
+            `}
+      </div>
+    `
   }
 
   /**
    * @return The template for the documentations section.
    */
   protected renderDocumentations(): TemplateResult | string {
-    const { edit } = this;
-    const items = this.getFilteredDocumentations();
+    const { edit } = this
+    const items = this.getFilteredDocumentations()
     if (!items.length && !edit) {
-      return '';
+      return ''
     }
-    const { documentationsOpened = false } = this;
+    const { documentationsOpened = false } = this
     const classes = {
       documentation: true,
       opened: !!documentationsOpened,
-    };
-    const addingDocumentation = this.addingDocumentationInternal;
-    const showItems = !!items.length;
-    const showEmpty = !showItems && !addingDocumentation;
+    }
+    const addingDocumentation = this.addingDocumentationInternal
+    const showItems = !!items.length
+    const showEmpty = !showItems && !addingDocumentation
     return html`
-    <div
-      class="${classMap(classes)}"
-    >
-      <div
-        class="section-title"
-        data-property="documentationsOpened"
-        data-section="documentations"
-        @click="${this.toggleSectionClickHandler}"
-        @keydown="${this.toggleSectionKeydownHandler}"
-        title="Toggle the list"
-        aria-haspopup="true"
-        role="menuitem"
-      >
-        <ui-icon-button
-          part="toggle-button"
-          class="toggle-button section"
-          aria-label="Toggle the list"
-          tabindex="-1"
+      <div class="${classMap(classes)}">
+        <div
+          class="section-title"
+          data-property="documentationsOpened"
+          data-section="documentations"
+          @click="${this.toggleSectionClickHandler}"
+          @keydown="${this.toggleSectionKeydownHandler}"
+          title="Toggle the list"
+          aria-haspopup="true"
+          role="menuitem"
         >
-          <ui-icon role="presentation" icon="arrowDropDown"></ui-icon>
-        </ui-icon-button>
-        <div class="section-title-label label">Documentation</div>
-      </div>
-      <ui-collapse .open="${documentationsOpened}">
-        <div class="children">
-          ${addingDocumentation ? this.addDocumentationInputTemplate() : ''}
-          ${showItems ? items.map((item) => this.documentationTemplate(item)) : ''}
-          ${showEmpty ? html`<p class="empty-section">No documentations in this API</p>` : ''}
+          <ui-icon-button part="toggle-button" class="toggle-button section" aria-label="Toggle the list" tabindex="-1">
+            <ui-icon role="presentation" icon="arrowDropDown"></ui-icon>
+          </ui-icon-button>
+          <div class="section-title-label label">Documentation</div>
         </div>
-      </ui-collapse>
-    </div>
-    `;
+        <ui-collapse .open="${documentationsOpened}">
+          <div class="children">
+            ${addingDocumentation ? this.addDocumentationInputTemplate() : ''}
+            ${showItems ? items.map((item) => this.documentationTemplate(item)) : ''}
+            ${showEmpty ? html`<p class="empty-section">No documentations in this API</p>` : ''}
+          </div>
+        </ui-collapse>
+      </div>
+    `
   }
 
   /**
@@ -1993,15 +1989,15 @@ export default class ApiNavigation extends ApiElement {
    */
   protected documentationTemplate(item: DocumentationItem): TemplateResult {
     if (item.url) {
-      return this.renderExternalDocumentation(item);
+      return this.renderExternalDocumentation(item)
     }
-    const { title, id, selected, secondarySelected, nameEditor } = item;
+    const { title, id, selected, secondarySelected, nameEditor } = item
     const classes = {
       'list-item': true,
-      label: true,
-      documentation: true,
-      selected: !!selected,
-      secondarySelected: !!secondarySelected,
+      'label': true,
+      'documentation': true,
+      'selected': !!selected,
+      'secondarySelected': !!secondarySelected,
     }
     return html`<div
       part="api-navigation-list-item"
@@ -2013,21 +2009,21 @@ export default class ApiNavigation extends ApiElement {
       @click="${this.itemClickHandler}"
     >
       ${nameEditor ? this.renameInputTemplate(id, 'documentation', title) : title}
-    </div>`;
+    </div>`
   }
 
   /**
    * @return The template for the external documentation list item.
    */
   protected renderExternalDocumentation(item: DocumentationItem): TemplateResult {
-    const { title, description, url, id, selected, secondarySelected, nameEditor } = item;
-    const label = title || description;
+    const { title, description, url, id, selected, secondarySelected, nameEditor } = item
+    const label = title || description
     const classes = {
       'list-item': true,
-      label: true,
-      documentation: true,
-      selected: !!selected,
-      secondarySelected: !!secondarySelected,
+      'label': true,
+      'documentation': true,
+      'selected': !!selected,
+      'secondarySelected': !!secondarySelected,
     }
     return html`<a
       href="${url as string}"
@@ -2039,83 +2035,74 @@ export default class ApiNavigation extends ApiElement {
       data-graph-shape="documentation"
       @click="${this.externalDocumentationHandler}"
     >
-      ${nameEditor ?
-        this.renameInputTemplate(id, 'documentation', label)
+      ${nameEditor
+        ? this.renameInputTemplate(id, 'documentation', label)
         : html`
-        ${label}
-        <ui-icon class="icon new-tab" title="Opens in a new tab" role="presentation" icon="openInNew"></ui-icon>
-        `
-      }
-    </a>`;
+            ${label}
+            <ui-icon class="icon new-tab" title="Opens in a new tab" role="presentation" icon="openInNew"></ui-icon>
+          `}
+    </a>`
   }
 
   /**
    * @return The template for the types (schemas) section.
    */
   protected renderSchemas(): TemplateResult | string {
-    const { edit } = this;
-    const items = this.getFilteredSchemas();
+    const { edit } = this
+    const items = this.getFilteredSchemas()
     if (!items.length && !edit) {
-      return '';
+      return ''
     }
-    const { schemasOpened = false } = this;
+    const { schemasOpened = false } = this
     const classes = {
       schemas: true,
       opened: !!schemasOpened,
-    };
-    const addingSchema = this.addingSchemaInternal;
-    const showItems = !!items.length;
-    const showEmpty = !showItems && !addingSchema;
+    }
+    const addingSchema = this.addingSchemaInternal
+    const showItems = !!items.length
+    const showEmpty = !showItems && !addingSchema
     return html`
-    <div
-      class="${classMap(classes)}"
-    >
-      <div
-        class="section-title"
-        data-property="schemasOpened"
-        data-section="schemas"
-        @click="${this.toggleSectionClickHandler}"
-        @keydown="${this.toggleSectionKeydownHandler}"
-        title="Toggle the list"
-        aria-haspopup="true"
-        role="menuitem"
-      >
-        <ui-icon-button
-          part="toggle-button"
-          class="toggle-button section"
-          aria-label="Toggle the list"
-          tabindex="-1"
+      <div class="${classMap(classes)}">
+        <div
+          class="section-title"
+          data-property="schemasOpened"
+          data-section="schemas"
+          @click="${this.toggleSectionClickHandler}"
+          @keydown="${this.toggleSectionKeydownHandler}"
+          title="Toggle the list"
+          aria-haspopup="true"
+          role="menuitem"
         >
-          <ui-icon role="presentation" icon="arrowDropDown"></ui-icon>
-        </ui-icon-button>
-        <div class="section-title-label label">Schemas</div>
-      </div>
-      <ui-collapse .open="${schemasOpened}">
-        <div class="children">
-          ${addingSchema ? this.addSchemaInputTemplate() : ''}
-          ${showItems ? items.map((item) => this.renderSchema(item)) : ''}
-          ${showEmpty ? html`<p class="empty-section">No schemas in this API</p>` : ''}
+          <ui-icon-button part="toggle-button" class="toggle-button section" aria-label="Toggle the list" tabindex="-1">
+            <ui-icon role="presentation" icon="arrowDropDown"></ui-icon>
+          </ui-icon-button>
+          <div class="section-title-label label">Schemas</div>
         </div>
-      </ui-collapse>
-    </div>
-    `;
+        <ui-collapse .open="${schemasOpened}">
+          <div class="children">
+            ${addingSchema ? this.addSchemaInputTemplate() : ''}
+            ${showItems ? items.map((item) => this.renderSchema(item)) : ''}
+            ${showEmpty ? html`<p class="empty-section">No schemas in this API</p>` : ''}
+          </div>
+        </ui-collapse>
+      </div>
+    `
   }
 
   /**
    * @return The template for the documentation list item.
    */
   protected renderSchema(item: NodeShapeItem): TemplateResult {
-    const { id, displayName, name, selected, secondarySelected, nameEditor } = item;
-    const label = displayName || name || 'Unnamed schema';
+    const { id, displayName, name, selected, secondarySelected, nameEditor } = item
+    const label = displayName || name || 'Unnamed schema'
     const classes = {
       'list-item': true,
-      schema: true,
-      label: true,
-      selected: !!selected,
-      secondarySelected: !!secondarySelected,
+      'schema': true,
+      'label': true,
+      'selected': !!selected,
+      'secondarySelected': !!secondarySelected,
     }
-    return html`
-    <div
+    return html` <div
       part="api-navigation-list-item label"
       class="${classMap(classes)}"
       role="menuitem"
@@ -2125,70 +2112,60 @@ export default class ApiNavigation extends ApiElement {
       @click="${this.itemClickHandler}"
     >
       ${nameEditor ? this.renameInputTemplate(id, 'schema', label) : label}
-   </div>`;
+    </div>`
   }
 
   /**
    * @return The template for the security section.
    */
   protected renderSecurities(): TemplateResult | string {
-    const items = this.getFilteredSecurity();
+    const items = this.getFilteredSecurity()
     if (!items.length) {
-      return '';
+      return ''
     }
-    const { securityOpened = false } = this;
+    const { securityOpened = false } = this
     const classes = {
       security: true,
       opened: !!securityOpened,
-    };
+    }
     return html`
-    <div
-      class="${classMap(classes)}"
-    >
-      <div
-        class="section-title"
-        data-property="securityOpened"
-        data-section="security"
-        @click="${this.toggleSectionClickHandler}"
-        @keydown="${this.toggleSectionKeydownHandler}"
-        title="Toggle the list"
-        aria-haspopup="true"
-        role="menuitem"
-      >
-        <ui-icon-button
-          part="toggle-button"
-          class="toggle-button section"
-          aria-label="Toggle the list"
-          tabindex="-1"
+      <div class="${classMap(classes)}">
+        <div
+          class="section-title"
+          data-property="securityOpened"
+          data-section="security"
+          @click="${this.toggleSectionClickHandler}"
+          @keydown="${this.toggleSectionKeydownHandler}"
+          title="Toggle the list"
+          aria-haspopup="true"
+          role="menuitem"
         >
-          <ui-icon role="presentation" icon="arrowDropDown"></ui-icon>
-        </ui-icon-button>
-        <div class="section-title-label label">Security</div>
-      </div>
-      <ui-collapse .open="${securityOpened}">
-        <div class="children">
-          ${items.map((item) => this.securityTemplate(item))}
+          <ui-icon-button part="toggle-button" class="toggle-button section" aria-label="Toggle the list" tabindex="-1">
+            <ui-icon role="presentation" icon="arrowDropDown"></ui-icon>
+          </ui-icon-button>
+          <div class="section-title-label label">Security</div>
         </div>
-      </ui-collapse>
-    </div>
-    `;
+        <ui-collapse .open="${securityOpened}">
+          <div class="children">${items.map((item) => this.securityTemplate(item))}</div>
+        </ui-collapse>
+      </div>
+    `
   }
 
   /**
    * @return The template for the security list item.
    */
   protected securityTemplate(item: SecurityItem): TemplateResult {
-    const { id, displayName, name, selected, secondarySelected, type } = item;
-    const label = displayName || name || 'Unnamed security';
+    const { id, displayName, name, selected, secondarySelected, type } = item
+    const label = displayName || name || 'Unnamed security'
     const classes = {
       'list-item': true,
-      label: true,
-      security: true,
-      selected: !!selected,
-      secondarySelected: !!secondarySelected,
+      'label': true,
+      'security': true,
+      'selected': !!selected,
+      'secondarySelected': !!secondarySelected,
     }
-    return html`
-    <div
+    return html` <div
       part="api-navigation-list-item"
       class="${classMap(classes)}"
       role="menuitem"
@@ -2198,30 +2175,30 @@ export default class ApiNavigation extends ApiElement {
       @click="${this.itemClickHandler}"
     >
       ${type}: ${label}
-   </div>`;
+    </div>`
   }
 
   /**
    * @return The template for the filter input.
    */
   protected filterTemplate(): TemplateResult | string {
-    const { filter } = this;
+    const { filter } = this
     if (!filter) {
-      return '';
+      return ''
     }
     return html`
-    <div class="filter-wrapper">
-      <input 
-        type="search" 
-        name="filter" 
-        aria-label="Filter the menu" 
-        placeholder="Filter" 
-        @search="${this.searchHandler}"
-        @change="${this.searchHandler}"
-      />
-      <ui-icon icon="search"></ui-icon>
-    </div>
-    `;
+      <div class="filter-wrapper">
+        <input
+          type="search"
+          name="filter"
+          aria-label="Filter the menu"
+          placeholder="Filter"
+          @search="${this.searchHandler}"
+          @change="${this.searchHandler}"
+        />
+        <ui-icon icon="search"></ui-icon>
+      </div>
+    `
   }
 
   /**
@@ -2229,56 +2206,48 @@ export default class ApiNavigation extends ApiElement {
    */
   protected addEndpointInputTemplate(): TemplateResult {
     return html`
-    <div
-      part="api-navigation-input-item"
-      class="input-item add-endpoint-input"
-      data-graph-shape="resource"
-    >
-      <input 
-        type="text" 
-        class="add-endpoint-input" 
-        @keydown="${this.addEndpointKeydownHandler}"
-        placeholder="Endpoint's path"
-        aria-label="Enter the path for the endpoint"
-      >
-      <ui-icon icon="add" title="Enter to save, ESC to cancel" role="presentation"></ui-icon>
-    </div>
-    `;
+      <div part="api-navigation-input-item" class="input-item add-endpoint-input" data-graph-shape="resource">
+        <input
+          type="text"
+          class="add-endpoint-input"
+          @keydown="${this.addEndpointKeydownHandler}"
+          placeholder="Endpoint's path"
+          aria-label="Enter the path for the endpoint"
+        />
+        <ui-icon icon="add" title="Enter to save, ESC to cancel" role="presentation"></ui-icon>
+      </div>
+    `
   }
 
   /**
    * @return The template for the new documentation input.
    */
   protected addDocumentationInputTemplate(): TemplateResult {
-    const isExternal = this.addingExternalInternal;
+    const isExternal = this.addingExternalInternal
     return html`
-    ${isExternal ? html`
-    <div
-      part="api-navigation-input-item"
-      class="input-item add-external-doc-input"
-    >
-      <input 
-        type="url" 
-        class="add-external-doc-input" 
-        aria-label="Enter the documentation URL"
-        placeholder="Documentation URL"
-      />
-    </div>
-    ` : ''}
-    <div
-      part="api-navigation-input-item"
-      class="input-item add-documentation-input"
-      data-graph-shape="documentation"
-    >
-      <input 
-        type="text" 
-        class="add-documentation-input" 
-        aria-label="Enter name for the documentation"
-        placeholder="Documentation title"
-        @keydown="${this.addDocumentationKeydownHandler}"/>
-      <ui-icon icon="add" title="Enter to save, ESC to cancel"></ui-icon>
-    </div>
-    `;
+      ${isExternal
+        ? html`
+            <div part="api-navigation-input-item" class="input-item add-external-doc-input">
+              <input
+                type="url"
+                class="add-external-doc-input"
+                aria-label="Enter the documentation URL"
+                placeholder="Documentation URL"
+              />
+            </div>
+          `
+        : ''}
+      <div part="api-navigation-input-item" class="input-item add-documentation-input" data-graph-shape="documentation">
+        <input
+          type="text"
+          class="add-documentation-input"
+          aria-label="Enter name for the documentation"
+          placeholder="Documentation title"
+          @keydown="${this.addDocumentationKeydownHandler}"
+        />
+        <ui-icon icon="add" title="Enter to save, ESC to cancel"></ui-icon>
+      </div>
+    `
   }
 
   /**
@@ -2286,35 +2255,31 @@ export default class ApiNavigation extends ApiElement {
    */
   protected addSchemaInputTemplate(): TemplateResult {
     return html`
-    <div
-      part="api-navigation-input-item"
-      class="input-item add-schema-input"
-      data-graph-shape="schema"
-    >
-      <input type="text" class="add-schema-input" @keydown="${this.addSchemaKeydownHandler}"/>
-      <ui-icon icon="add" title="Enter to save, ESC to cancel"></ui-icon>
-    </div>
-    `;
+      <div part="api-navigation-input-item" class="input-item add-schema-input" data-graph-shape="schema">
+        <input type="text" class="add-schema-input" @keydown="${this.addSchemaKeydownHandler}" />
+        <ui-icon icon="add" title="Enter to save, ESC to cancel"></ui-icon>
+      </div>
+    `
   }
 
   /**
    * @param id The domain id of the item being edited
    * @param label The current name to render.
-   * @returns The template for the rename input. 
+   * @returns The template for the rename input.
    */
   protected renameInputTemplate(id: string, type: SelectionType, label = ''): TemplateResult {
     return html`
-    <input 
-      type="text" 
-      .value="${label}" 
-      required
-      class="rename"
-      data-id="${id}"
-      data-type="${type}"
-      @click="${cancelEvent}"
-      @keydown="${this.renameKeydownHandler}"
-      @blur="${this.renameBlurHandler}"
-    />
-    `;
+      <input
+        type="text"
+        .value="${label}"
+        required
+        class="rename"
+        data-id="${id}"
+        data-type="${type}"
+        @click="${cancelEvent}"
+        @keydown="${this.renameKeydownHandler}"
+        @blur="${this.renameBlurHandler}"
+      />
+    `
   }
 }