@api-client/ui 0.0.14 → 0.0.17

package/build/src/elements/amf/ApiNavigation.element.js

@@ -0,0 +1,2244 @@
+import { __esDecorate, __runInitializers } from "tslib";
+import { html } 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 { 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 ApiElement from '../ApiElement.js';
+import { SnackNotifications } from '../../md/notification/SnackNotifications.js';
+import '../../md/icons/ui-icon.js';
+import '../../md/collapse/ui-collapse.js';
+import '../../md/icon-button/ui-icon-button.js';
+const defaultPadding = 40;
+let ApiNavigation = (() => {
+    let _classSuper = ApiElement;
+    let _instanceExtraInitializers = [];
+    let _documentMeta_decorators;
+    let _documentMeta_initializers = [];
+    let _documentMeta_extraInitializers = [];
+    let _sourceEndpoints_decorators;
+    let _sourceEndpoints_initializers = [];
+    let _sourceEndpoints_extraInitializers = [];
+    let _set_domainId_decorators;
+    let _set_query_decorators;
+    let _set_layout_decorators;
+    let _set_endpointsExpanded_decorators;
+    let _apiId_decorators;
+    let _apiId_initializers = [];
+    let _apiId_extraInitializers = [];
+    let _summary_decorators;
+    let _summary_initializers = [];
+    let _summary_extraInitializers = [];
+    let _summaryLabel_decorators;
+    let _summaryLabel_initializers = [];
+    let _summaryLabel_extraInitializers = [];
+    let _documentationsOpened_decorators;
+    let _documentationsOpened_initializers = [];
+    let _documentationsOpened_extraInitializers = [];
+    let _schemasOpened_decorators;
+    let _schemasOpened_initializers = [];
+    let _schemasOpened_extraInitializers = [];
+    let _securityOpened_decorators;
+    let _securityOpened_initializers = [];
+    let _securityOpened_extraInitializers = [];
+    let _endpointsOpened_decorators;
+    let _endpointsOpened_initializers = [];
+    let _endpointsOpened_extraInitializers = [];
+    let _indentSize_decorators;
+    let _indentSize_initializers = [];
+    let _indentSize_extraInitializers = [];
+    let _filter_decorators;
+    let _filter_initializers = [];
+    let _filter_extraInitializers = [];
+    let _manualQuery_decorators;
+    let _manualQuery_initializers = [];
+    let _manualQuery_extraInitializers = [];
+    let _edit_decorators;
+    let _edit_initializers = [];
+    let _edit_extraInitializers = [];
+    return class ApiNavigation extends _classSuper {
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _documentMeta_decorators = [state()];
+            _sourceEndpoints_decorators = [state()];
+            _set_domainId_decorators = [property({ type: String, reflect: true })];
+            _set_query_decorators = [property({ type: String })];
+            _set_layout_decorators = [property({ type: String, reflect: true })];
+            _set_endpointsExpanded_decorators = [property({ type: Boolean, reflect: true })];
+            _apiId_decorators = [property({ type: String, reflect: true })];
+            _summary_decorators = [property({ type: Boolean, reflect: true })];
+            _summaryLabel_decorators = [property({ type: String, reflect: true })];
+            _documentationsOpened_decorators = [property({ type: Boolean, reflect: true })];
+            _schemasOpened_decorators = [property({ type: Boolean, reflect: true })];
+            _securityOpened_decorators = [property({ type: Boolean, reflect: true })];
+            _endpointsOpened_decorators = [property({ type: Boolean, reflect: true })];
+            _indentSize_decorators = [property({ type: Number, reflect: true })];
+            _filter_decorators = [property({ type: Boolean, reflect: true })];
+            _manualQuery_decorators = [property({ type: Boolean, reflect: true })];
+            _edit_decorators = [property({ type: Boolean, reflect: true })];
+            __esDecorate(this, null, _documentMeta_decorators, { kind: "accessor", name: "documentMeta", static: false, private: false, access: { has: obj => "documentMeta" in obj, get: obj => obj.documentMeta, set: (obj, value) => { obj.documentMeta = value; } }, metadata: _metadata }, _documentMeta_initializers, _documentMeta_extraInitializers);
+            __esDecorate(this, null, _sourceEndpoints_decorators, { kind: "accessor", name: "sourceEndpoints", static: false, private: false, access: { has: obj => "sourceEndpoints" in obj, get: obj => obj.sourceEndpoints, set: (obj, value) => { obj.sourceEndpoints = value; } }, metadata: _metadata }, _sourceEndpoints_initializers, _sourceEndpoints_extraInitializers);
+            __esDecorate(this, null, _set_domainId_decorators, { kind: "setter", name: "domainId", static: false, private: false, access: { has: obj => "domainId" in obj, set: (obj, value) => { obj.domainId = value; } }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _set_query_decorators, { kind: "setter", name: "query", static: false, private: false, access: { has: obj => "query" in obj, set: (obj, value) => { obj.query = value; } }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _set_layout_decorators, { kind: "setter", name: "layout", static: false, private: false, access: { has: obj => "layout" in obj, set: (obj, value) => { obj.layout = value; } }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _set_endpointsExpanded_decorators, { kind: "setter", name: "endpointsExpanded", static: false, private: false, access: { has: obj => "endpointsExpanded" in obj, set: (obj, value) => { obj.endpointsExpanded = value; } }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _apiId_decorators, { kind: "accessor", name: "apiId", static: false, private: false, access: { has: obj => "apiId" in obj, get: obj => obj.apiId, set: (obj, value) => { obj.apiId = value; } }, metadata: _metadata }, _apiId_initializers, _apiId_extraInitializers);
+            __esDecorate(this, null, _summary_decorators, { kind: "accessor", name: "summary", static: false, private: false, access: { has: obj => "summary" in obj, get: obj => obj.summary, set: (obj, value) => { obj.summary = value; } }, metadata: _metadata }, _summary_initializers, _summary_extraInitializers);
+            __esDecorate(this, null, _summaryLabel_decorators, { kind: "accessor", name: "summaryLabel", static: false, private: false, access: { has: obj => "summaryLabel" in obj, get: obj => obj.summaryLabel, set: (obj, value) => { obj.summaryLabel = value; } }, metadata: _metadata }, _summaryLabel_initializers, _summaryLabel_extraInitializers);
+            __esDecorate(this, null, _documentationsOpened_decorators, { kind: "accessor", name: "documentationsOpened", static: false, private: false, access: { has: obj => "documentationsOpened" in obj, get: obj => obj.documentationsOpened, set: (obj, value) => { obj.documentationsOpened = value; } }, metadata: _metadata }, _documentationsOpened_initializers, _documentationsOpened_extraInitializers);
+            __esDecorate(this, null, _schemasOpened_decorators, { kind: "accessor", name: "schemasOpened", static: false, private: false, access: { has: obj => "schemasOpened" in obj, get: obj => obj.schemasOpened, set: (obj, value) => { obj.schemasOpened = value; } }, metadata: _metadata }, _schemasOpened_initializers, _schemasOpened_extraInitializers);
+            __esDecorate(this, null, _securityOpened_decorators, { kind: "accessor", name: "securityOpened", static: false, private: false, access: { has: obj => "securityOpened" in obj, get: obj => obj.securityOpened, set: (obj, value) => { obj.securityOpened = value; } }, metadata: _metadata }, _securityOpened_initializers, _securityOpened_extraInitializers);
+            __esDecorate(this, null, _endpointsOpened_decorators, { kind: "accessor", name: "endpointsOpened", static: false, private: false, access: { has: obj => "endpointsOpened" in obj, get: obj => obj.endpointsOpened, set: (obj, value) => { obj.endpointsOpened = value; } }, metadata: _metadata }, _endpointsOpened_initializers, _endpointsOpened_extraInitializers);
+            __esDecorate(this, null, _indentSize_decorators, { kind: "accessor", name: "indentSize", static: false, private: false, access: { has: obj => "indentSize" in obj, get: obj => obj.indentSize, set: (obj, value) => { obj.indentSize = value; } }, metadata: _metadata }, _indentSize_initializers, _indentSize_extraInitializers);
+            __esDecorate(this, null, _filter_decorators, { kind: "accessor", name: "filter", static: false, private: false, access: { has: obj => "filter" in obj, get: obj => obj.filter, set: (obj, value) => { obj.filter = value; } }, metadata: _metadata }, _filter_initializers, _filter_extraInitializers);
+            __esDecorate(this, null, _manualQuery_decorators, { kind: "accessor", name: "manualQuery", static: false, private: false, access: { has: obj => "manualQuery" in obj, get: obj => obj.manualQuery, set: (obj, value) => { obj.manualQuery = value; } }, metadata: _metadata }, _manualQuery_initializers, _manualQuery_extraInitializers);
+            __esDecorate(this, null, _edit_decorators, { kind: "accessor", name: "edit", static: false, private: false, access: { has: obj => "edit" in obj, get: obj => obj.edit, set: (obj, value) => { obj.edit = value; } }, metadata: _metadata }, _edit_initializers, _edit_extraInitializers);
+            if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        }
+        queryingInternal = __runInitializers(this, _instanceExtraInitializers);
+        abortControllerInternal;
+        domainIdInternal;
+        domainTypeInternal;
+        selectedItemInternal;
+        focusedItemInternal;
+        /**
+         * The processed and final query term for the list items.
+         */
+        queryInternal;
+        #documentMeta_accessor_storage = __runInitializers(this, _documentMeta_initializers, void 0);
+        get documentMeta() { return this.#documentMeta_accessor_storage; }
+        set documentMeta(value) { this.#documentMeta_accessor_storage = value; }
+        layoutInternal = __runInitializers(this, _documentMeta_extraInitializers);
+        endpointsExpandedInternal;
+        endpointsInternal;
+        get endpoints() {
+            const { endpointsInternal } = this;
+            if (!endpointsInternal) {
+                return undefined;
+            }
+            return [...endpointsInternal];
+        }
+        documentationsInternal;
+        get documentations() {
+            const { documentationsInternal } = this;
+            if (!documentationsInternal) {
+                return undefined;
+            }
+            return [...documentationsInternal];
+        }
+        schemasInternal;
+        get schemas() {
+            const { schemasInternal } = this;
+            if (!schemasInternal) {
+                return undefined;
+            }
+            return [...schemasInternal];
+        }
+        securityInternal;
+        get security() {
+            const { securityInternal } = this;
+            if (!securityInternal) {
+                return undefined;
+            }
+            return [...securityInternal];
+        }
+        /**
+         * Holds a list of ids of currently opened endpoints.
+         */
+        openedEndpoints;
+        /**
+         * Cached list of all list elements
+         */
+        itemsInternal;
+        get items() {
+            const { itemsInternal } = this;
+            if (!itemsInternal) {
+                return undefined;
+            }
+            return [...itemsInternal];
+        }
+        #sourceEndpoints_accessor_storage = __runInitializers(this, _sourceEndpoints_initializers, void 0);
+        get sourceEndpoints() { return this.#sourceEndpoints_accessor_storage; }
+        set sourceEndpoints(value) { this.#sourceEndpoints_accessor_storage = value; }
+        shiftTabPressedInternal = __runInitializers(this, _sourceEndpoints_extraInitializers);
+        get shiftTabPressed() {
+            return this.shiftTabPressedInternal || false;
+        }
+        summarySelectedInternal;
+        addingSchemaTypeInternal;
+        addingSchemaInternal;
+        addingDocumentationInternal;
+        addingExternalInternal;
+        addingEndpointInternal;
+        /**
+         * When true then the element is currently querying for the graph data.
+         */
+        get querying() {
+            return this.queryingInternal || false;
+        }
+        /**
+         * Set when `querying`. Use to abort the query operation.
+         * When calling `abort` on the controller the element stops querying and processing the graph data.
+         * All data that already has been processed are not cleared.
+         */
+        get abortController() {
+            return this.abortControllerInternal;
+        }
+        /**
+         * A model `@id` of selected documentation part.
+         * Special case is for `summary` view. It's not part of an API
+         * but most applications has some kins of summary view for the
+         * API.
+         * @attribute
+         */
+        get domainId() {
+            return this.domainIdInternal;
+        }
+        set domainId(value) {
+            const old = this.domainIdInternal;
+            if (old === value) {
+                return;
+            }
+            this.domainIdInternal = value;
+            this.requestUpdate('domainId', old);
+            this.select(value);
+        }
+        /**
+         * Type of the selected domain item.
+         */
+        get domainType() {
+            return this.domainTypeInternal;
+        }
+        /**
+         * true when `_docs` property is set with values
+         */
+        get hasDocs() {
+            const docs = this.documentationsInternal;
+            return Array.isArray(docs) && !!docs.length;
+        }
+        /**
+         * true when has schemas definitions
+         */
+        get hasSchemas() {
+            const items = this.schemasInternal;
+            return Array.isArray(items) && !!items.length;
+        }
+        /**
+         * true when `_security` property is set with values
+         */
+        get hasSecurity() {
+            const items = this.securityInternal;
+            return Array.isArray(items) && !!items.length;
+        }
+        /**
+         * true when `_endpoints` property is set with values
+         */
+        get hasEndpoints() {
+            const items = this.endpointsInternal;
+            return Array.isArray(items) && !!items.length;
+        }
+        /**
+         * A reference to currently selected element.
+         */
+        get selectedItem() {
+            return this.selectedItemInternal;
+        }
+        /**
+         * The currently focused item.
+         */
+        get focusedItem() {
+            return this.focusedItemInternal;
+        }
+        /**
+         * Filters list elements by this value when set.
+         * Clear the value to reset the search.
+         *
+         * This is not currently exposed in element's UI due
+         * to complexity of search and performance.
+         * @attribute
+         */
+        get query() {
+            return this.queryInternal;
+        }
+        set query(value) {
+            const old = this.queryInternal;
+            if (old === value) {
+                return;
+            }
+            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
+         * 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-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
+         * in the API spec file.
+         * @attribute
+         */
+        get layout() {
+            return this.layoutInternal;
+        }
+        set layout(value) {
+            const old = this.layoutInternal;
+            if (old === value) {
+                return;
+            }
+            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
+         */
+        get endpointsExpanded() {
+            const value = this.endpointsExpandedInternal;
+            if (typeof value !== 'boolean') {
+                return false;
+            }
+            return value;
+        }
+        set endpointsExpanded(value) {
+            const old = this.endpointsExpandedInternal;
+            if (old === value) {
+                return;
+            }
+            this.endpointsExpandedInternal = value;
+            if (value) {
+                this.expandAllEndpoints();
+            }
+            else {
+                this.collapseAllEndpoints();
+            }
+        }
+        /**
+         * True when the summary entry is rendered.
+         * Summary should be rendered only when `summary` is set and current model is not a RAML fragment.
+         */
+        get summaryRendered() {
+            const { summary, documentMeta } = this;
+            if (!summary || !documentMeta) {
+                return false;
+            }
+            const { isFragment, isLibrary } = documentMeta;
+            return !isFragment && !isLibrary;
+        }
+        #apiId_accessor_storage = __runInitializers(this, _apiId_initializers, void 0);
+        /**
+         * 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
+         */
+        get apiId() { return this.#apiId_accessor_storage; }
+        set apiId(value) { this.#apiId_accessor_storage = value; }
+        #summary_accessor_storage = (__runInitializers(this, _apiId_extraInitializers), __runInitializers(this, _summary_initializers, void 0));
+        /**
+         * If set it renders `API summary` menu option.
+         * It will allow to set `domainId` and `domainType` to `summary`
+         * when this option is set.
+         * @attribute
+         */
+        get summary() { return this.#summary_accessor_storage; }
+        set summary(value) { this.#summary_accessor_storage = value; }
+        #summaryLabel_accessor_storage = (__runInitializers(this, _summary_extraInitializers), __runInitializers(this, _summaryLabel_initializers, void 0));
+        /**
+         * A label for the `summary` section.
+         * @attribute
+         */
+        get summaryLabel() { return this.#summaryLabel_accessor_storage; }
+        set summaryLabel(value) { this.#summaryLabel_accessor_storage = value; }
+        #documentationsOpened_accessor_storage = (__runInitializers(this, _summaryLabel_extraInitializers), __runInitializers(this, _documentationsOpened_initializers, void 0));
+        /**
+         * Determines and changes state of documentation panel.
+         * @attribute
+         */
+        get documentationsOpened() { return this.#documentationsOpened_accessor_storage; }
+        set documentationsOpened(value) { this.#documentationsOpened_accessor_storage = value; }
+        #schemasOpened_accessor_storage = (__runInitializers(this, _documentationsOpened_extraInitializers), __runInitializers(this, _schemasOpened_initializers, void 0));
+        /**
+         * Determines and changes state of schemas (types) panel.
+         * @attribute
+         */
+        get schemasOpened() { return this.#schemasOpened_accessor_storage; }
+        set schemasOpened(value) { this.#schemasOpened_accessor_storage = value; }
+        #securityOpened_accessor_storage = (__runInitializers(this, _schemasOpened_extraInitializers), __runInitializers(this, _securityOpened_initializers, void 0));
+        /**
+         * Determines and changes state of security panel.
+         * @attribute
+         */
+        get securityOpened() { return this.#securityOpened_accessor_storage; }
+        set securityOpened(value) { this.#securityOpened_accessor_storage = value; }
+        #endpointsOpened_accessor_storage = (__runInitializers(this, _securityOpened_extraInitializers), __runInitializers(this, _endpointsOpened_initializers, void 0));
+        /**
+         * Determines and changes state of endpoints panel.
+         * @attribute
+         */
+        get endpointsOpened() { return this.#endpointsOpened_accessor_storage; }
+        set endpointsOpened(value) { this.#endpointsOpened_accessor_storage = value; }
+        #indentSize_accessor_storage = (__runInitializers(this, _endpointsOpened_extraInitializers), __runInitializers(this, _indentSize_initializers, void 0));
+        /**
+         * Size of endpoint indentation for nested resources.
+         * In pixels.
+         *
+         * The attribute name for this property is `indent-size`. Note, that this
+         * will change to web consistent name `indentSize` in the future.
+         * @attribute
+         */
+        get indentSize() { return this.#indentSize_accessor_storage; }
+        set indentSize(value) { this.#indentSize_accessor_storage = value; }
+        #filter_accessor_storage = (__runInitializers(this, _indentSize_extraInitializers), __runInitializers(this, _filter_initializers, void 0));
+        /**
+         * When set it renders an input to filter the menu items.
+         * @attribute
+         */
+        get filter() { return this.#filter_accessor_storage; }
+        set filter(value) { this.#filter_accessor_storage = value; }
+        #manualQuery_accessor_storage = (__runInitializers(this, _filter_extraInitializers), __runInitializers(this, _manualQuery_initializers, void 0));
+        /**
+         * 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
+         */
+        get manualQuery() { return this.#manualQuery_accessor_storage; }
+        set manualQuery(value) { this.#manualQuery_accessor_storage = value; }
+        #edit_accessor_storage = (__runInitializers(this, _manualQuery_extraInitializers), __runInitializers(this, _edit_initializers, void 0));
+        /**
+         * When set it enables graph items editing functionality.
+         * The user can double-click on a menu item and edit its name.
+         * @attribute
+         */
+        get edit() { return this.#edit_accessor_storage; }
+        set edit(value) { this.#edit_accessor_storage = value; }
+        constructor() {
+            super();
+            __runInitializers(this, _edit_extraInitializers);
+            this.summaryLabel = 'Summary';
+            this.indentSize = defaultPadding;
+            this.openedEndpoints = [];
+            this.graphChangeHandler = this.graphChangeHandler.bind(this);
+            this.addEventListener('focus', this.focusHandler.bind(this));
+            this.addEventListener('keydown', this.keydownHandler.bind(this));
+        }
+        /**
+         * Ensures aria role attribute is in place.
+         * Attaches element's listeners.
+         */
+        connectedCallback() {
+            super.connectedCallback();
+            if (!this.getAttribute('aria-label')) {
+                this.setAttribute('aria-label', 'API navigation');
+            }
+            if (!this.getAttribute('tabindex')) {
+                this.setAttribute('tabindex', '0');
+            }
+            if (!this.getAttribute('role')) {
+                this.setAttribute('role', 'navigation');
+            }
+            this.eventsTarget.addEventListener(EventTypes.Store.graphChange, this.graphChangeHandler);
+            if (!this.manualQuery) {
+                this.queryGraph();
+            }
+        }
+        disconnectedCallback() {
+            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() {
+            this.queryGraph();
+        }
+        /**
+         * Queries for the API data from the graph store.
+         */
+        async queryGraph() {
+            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);
+            if (!ctrl.signal.aborted) {
+                this.layoutEndpoints();
+            }
+            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) {
+            this.documentMeta = undefined;
+            try {
+                const info = await Events.Api.documentMeta(this);
+                if (signal.aborted) {
+                    return;
+                }
+                this.documentMeta = info;
+            }
+            catch (e) {
+                const ex = e;
+                Events.Telemetry.exception(this, ex.message, false);
+                Events.Reporting.error(this, ex, `Enable to query for API data: ${ex.message}`, this.localName);
+            }
+        }
+        /**
+         * Queries and sets endpoints data
+         */
+        async queryEndpoints(signal) {
+            if (signal.aborted) {
+                return;
+            }
+            try {
+                const result = await Events.Endpoint.list(this);
+                if (signal.aborted) {
+                    return;
+                }
+                if (!result) {
+                    return;
+                }
+                this.sourceEndpoints = result;
+            }
+            catch (e) {
+                const ex = e;
+                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);
+            }
+        }
+        /**
+         * Queries and sets documentations data
+         */
+        async queryDocumentations(signal) {
+            this.documentationsInternal = undefined;
+            if (signal.aborted) {
+                return;
+            }
+            try {
+                const result = await Events.Documentation.list(this);
+                if (signal.aborted) {
+                    return;
+                }
+                this.documentationsInternal = result;
+            }
+            catch (e) {
+                const ex = e;
+                Events.Telemetry.exception(this, ex.message, false);
+                Events.Reporting.error(this, ex, `Enable to query for Documents data: ${ex.message}`, this.localName);
+            }
+        }
+        /**
+         * Queries and sets types (schemas) data
+         */
+        async querySchemas(signal) {
+            this.schemasInternal = undefined;
+            if (signal.aborted) {
+                return;
+            }
+            try {
+                const result = await Events.Type.list(this);
+                if (signal.aborted) {
+                    return;
+                }
+                this.schemasInternal = result;
+            }
+            catch (e) {
+                const ex = e;
+                Events.Telemetry.exception(this, ex.message, false);
+                Events.Reporting.error(this, ex, `Enable to query for Schemas data: ${ex.message}`, this.localName);
+            }
+        }
+        /**
+         * Queries and sets security data
+         */
+        async querySecurity(signal) {
+            this.securityInternal = undefined;
+            if (signal.aborted) {
+                return;
+            }
+            try {
+                const result = await Events.Security.list(this);
+                if (signal.aborted) {
+                    return;
+                }
+                this.securityInternal = result;
+            }
+            catch (e) {
+                const ex = e;
+                Events.Telemetry.exception(this, ex.message, false);
+                Events.Reporting.error(this, ex, `Enable to query for Security data: ${ex.message}`, this.localName);
+            }
+        }
+        createFlatTreeItems(items) {
+            if (!Array.isArray(items) || !items.length) {
+                return [];
+            }
+            return items.map((endpoint) => ({
+                ...endpoint,
+                indent: 0,
+                label: endpoint.name || endpoint.path,
+                selected: false,
+                secondarySelected: false,
+            }));
+        }
+        /**
+         * Processes endpoints layout for the given configuration.
+         */
+        layoutEndpoints() {
+            const { layout } = this;
+            this.itemsInternal = undefined;
+            const endpoints = this.sourceEndpoints;
+            if (!endpoints) {
+                this.endpointsInternal = undefined;
+                return;
+            }
+            if (layout === 'tree') {
+                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;
+            }
+            if (layout === 'natural-sort') {
+                const sorted = ApiSorting.sortEndpointsByPath([...endpoints]);
+                this.endpointsInternal = new NaturalTree().create(sorted);
+                return;
+            }
+            //
+            // Default layout
+            //
+            this.endpointsInternal = this.createFlatTreeItems(endpoints);
+        }
+        /**
+         * Filters the current endpoints by the current query value.
+         */
+        getFilteredEndpoints() {
+            const value = this.endpointsInternal;
+            if (!value || !value.length) {
+                return undefined;
+            }
+            const q = this.queryInternal;
+            if (!q) {
+                return value;
+            }
+            const result = [];
+            value.forEach((endpoint) => {
+                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;
+                }
+                // 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));
+                if (ops.length) {
+                    const copy = { ...endpoint };
+                    copy.operations = ops;
+                    result[result.length] = copy;
+                }
+            });
+            return result;
+        }
+        /**
+         * Computes `style` attribute value for endpoint item.
+         * It sets padding-left property to indent resources.
+         * See https://github.com/mulesoft/api-console/issues/571.
+         *
+         * @param indent The computed indentation of the item.
+         * @returns The value for the left padding of the endpoint menu item.
+         */
+        computeEndpointPaddingValue(indent = 0) {
+            const padding = this.computeEndpointPaddingLeft();
+            if (indent < 1) {
+                return `${padding}px`;
+            }
+            const result = indent * (this.indentSize || 0) + padding;
+            return `${result}px`;
+        }
+        /**
+         * Computes endpoint list item left padding from CSS variables.
+         */
+        computeEndpointPaddingLeft() {
+            const prop = '--api-navigation-list-item-padding';
+            const padding = getComputedStyle(this).getPropertyValue(prop);
+            if (!padding) {
+                return defaultPadding;
+            }
+            const parts = padding.split(' ');
+            let paddingLeftValue;
+            switch (parts.length) {
+                case 1:
+                    paddingLeftValue = parts[0];
+                    break;
+                case 2:
+                    paddingLeftValue = parts[1];
+                    break;
+                case 3:
+                    paddingLeftValue = parts[1];
+                    break;
+                case 4:
+                    paddingLeftValue = parts[3];
+                    break;
+                default:
+                    return defaultPadding;
+            }
+            if (!paddingLeftValue) {
+                return defaultPadding;
+            }
+            paddingLeftValue = paddingLeftValue.replace('px', '').trim();
+            const result = Number(paddingLeftValue);
+            if (Number.isNaN(result)) {
+                return defaultPadding;
+            }
+            return result;
+        }
+        /**
+         * Computes `style` attribute value for an operation item.
+         * It sets padding-left property to indent operations relative to a resource.
+         *
+         * @param indent The computed indentation of the parent resource.
+         * @returns The value for the left padding of the endpoint menu item.
+         */
+        computeOperationPaddingValue(indent = 0) {
+            const padding = this.computeOperationPaddingLeft() + defaultPadding;
+            const { indentSize = 0 } = this;
+            if (indentSize < 1) {
+                return `${padding}px`;
+            }
+            const result = indent * indentSize + padding;
+            return `${result}px`;
+        }
+        /**
+         * Computes operation list item left padding from CSS variables.
+         */
+        computeOperationPaddingLeft() {
+            const prop = '--api-navigation-operation-item-padding-left';
+            let paddingLeft = getComputedStyle(this).getPropertyValue(prop);
+            if (!paddingLeft) {
+                return defaultPadding;
+            }
+            paddingLeft = paddingLeft.replace('px', '').trim();
+            const result = Number(paddingLeft);
+            if (Number.isNaN(result)) {
+                return defaultPadding;
+            }
+            return result;
+        }
+        /**
+         * A handler for the click event on a menu list item.
+         * Makes a selection from the target.
+         */
+        itemClickHandler(e) {
+            const node = e.currentTarget;
+            const { graphId, graphShape } = node.dataset;
+            if (graphId && graphShape) {
+                this.makeSelection(graphId, graphShape);
+            }
+            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();
+            }
+        }
+        /**
+         * A handler for the click event on endpoints toggle button.
+         */
+        endpointToggleClickHandler(e) {
+            const node = e.currentTarget;
+            const { graphId } = node.dataset;
+            if (graphId) {
+                this.toggleEndpoint(graphId);
+                e.stopPropagation();
+                e.preventDefault();
+                Events.Telemetry.event(this, {
+                    category: 'API navigation',
+                    action: 'Toggle endpoint',
+                });
+            }
+        }
+        /**
+         * Toggles operations visibility for an endpoint.
+         * @param graphId The Endpoint graph id.
+         */
+        toggleEndpoint(graphId) {
+            const index = this.openedEndpoints.indexOf(graphId);
+            if (index === -1) {
+                this.openedEndpoints.push(graphId);
+            }
+            else {
+                this.openedEndpoints.splice(index, 1);
+            }
+            this.requestUpdate();
+        }
+        /**
+         * A handler for the click event on a section item. Toggles the clicked section.
+         */
+        toggleSectionClickHandler(e) {
+            const node = e.currentTarget;
+            this.toggleSectionElement(node);
+            Events.Telemetry.event(this, {
+                category: 'API navigation',
+                action: 'Toggle section',
+                label: node.dataset.section,
+            });
+        }
+        toggleSectionKeydownHandler() {
+            // This is handled by the global key handler.
+            // if (e.code !== 'Space') {
+            //   return;
+            // }
+            // const node = e.currentTarget as HTMLElement;
+            // this[toggleSectionElement](node);
+            // Events.Telemetry.event(this, {
+            //   category: 'API navigation',
+            //   action: 'Toggle section',
+            //   label: node.dataset.section,
+            // });
+        }
+        /**
+         * Toggles a section of the menu represented by the element (section list item).
+         */
+        toggleSectionElement(element) {
+            const prop = element.dataset.property;
+            if (!prop) {
+                return;
+            }
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            ;
+            this[prop] = !this[prop];
+        }
+        /**
+         * @returns The list of documentation items filtered by the current query.
+         */
+        getFilteredDocumentations() {
+            const items = this.documentationsInternal;
+            if (!Array.isArray(items) || !items.length) {
+                return [];
+            }
+            const q = this.queryInternal;
+            if (!q) {
+                return items;
+            }
+            return items.filter((doc) => (doc.title || '').toLocaleLowerCase().includes(q));
+        }
+        /**
+         * @returns The list of schemas items filtered by the current query.
+         */
+        getFilteredSchemas() {
+            const items = this.schemasInternal;
+            if (!Array.isArray(items) || !items.length) {
+                return [];
+            }
+            const q = this.queryInternal;
+            if (!q) {
+                return items;
+            }
+            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() {
+            const items = this.securityInternal;
+            if (!Array.isArray(items) || !items.length) {
+                return [];
+            }
+            const q = this.queryInternal;
+            if (!q) {
+                return items;
+            }
+            return items.filter((doc) => (doc.name || '').toLocaleLowerCase().includes(q) ||
+                (doc.displayName || '').toLocaleLowerCase().includes(q) ||
+                (doc.type || '').toLocaleLowerCase().includes(q));
+        }
+        /**
+         * A handler for the focus event on this element.
+         */
+        focusHandler(e) {
+            if (this.shiftTabPressedInternal) {
+                // do not focus the menu itself
+                return;
+            }
+            const path = e.composedPath();
+            const rootTarget = path[0];
+            if (rootTarget !== this && typeof rootTarget.tabIndex !== 'undefined' && !this.contains(rootTarget)) {
+                return;
+            }
+            this.focusedItemInternal = undefined;
+            const { selectedItem } = this;
+            if (selectedItem) {
+                this.focusItem(selectedItem);
+            }
+            else {
+                this.focusNext();
+            }
+        }
+        /**
+         * Sets a list item focused
+         */
+        focusItem(item) {
+            const old = this.focusedItemInternal;
+            this.focusedItemInternal = item;
+            if (old) {
+                old.setAttribute('tabindex', '-1');
+            }
+            if (item && !item.hasAttribute('disabled')) {
+                item.setAttribute('tabindex', '0');
+                item.focus();
+            }
+        }
+        /**
+         * Handler for the keydown event.
+         */
+        keydownHandler(e) {
+            const path = e.composedPath();
+            const target = path[0];
+            if (target.localName === 'input') {
+                return;
+            }
+            if (e.key === 'ArrowDown') {
+                this.keyDownAction(e);
+            }
+            else if (e.key === 'ArrowUp') {
+                this.keyUpAction(e);
+            }
+            else if (e.key === 'Tab' && e.shiftKey) {
+                this.keyShiftTabAction();
+            }
+            else if (e.key === 'Escape') {
+                this.keyEscAction();
+            }
+            else if (e.key === ' ' || e.code === 'Space') {
+                this.keySpaceAction(e);
+            }
+            else if (e.key === 'Enter' || e.key === 'NumpadEnter') {
+                this.keySpaceAction(e);
+            }
+            else if (e.key === 'ArrowRight') {
+                this.keyArrowRightAction(e);
+            }
+            else if (e.key === 'ArrowLeft') {
+                this.keyArrowLeftAction(e);
+            }
+            e.stopPropagation();
+        }
+        /**
+         * Handler that is called when the down key is pressed.
+         */
+        keyDownAction(e) {
+            e.preventDefault();
+            e.stopPropagation();
+            this.focusNext();
+        }
+        /**
+         * Handler that is called when the up key is pressed.
+         */
+        keyUpAction(e) {
+            e.preventDefault();
+            this.focusPrevious();
+        }
+        /**
+         * Handles shift+tab keypress on the menu.
+         */
+        keyShiftTabAction() {
+            const oldTabIndex = this.getAttribute('tabindex');
+            this.shiftTabPressedInternal = true;
+            this.focusedItemInternal = undefined;
+            this.setAttribute('tabindex', '-1');
+            setTimeout(() => {
+                if (oldTabIndex) {
+                    this.setAttribute('tabindex', oldTabIndex);
+                }
+                this.shiftTabPressedInternal = false;
+            }, 1);
+        }
+        /**
+         * Handler that is called when the esc key is pressed.
+         */
+        keyEscAction() {
+            const { focusedItem } = this;
+            if (focusedItem) {
+                focusedItem.blur();
+            }
+        }
+        /**
+         * A handler for the space bar key down.
+         */
+        keySpaceAction(e) {
+            e.preventDefault();
+            e.stopPropagation();
+            const path = e.composedPath();
+            const target = path && path[0];
+            if (!target) {
+                return;
+            }
+            const { classList, dataset } = target;
+            if (classList.contains('section-title')) {
+                this.toggleSectionElement(target);
+            }
+            else if (classList.contains('list-item')) {
+                const { graphId, graphShape } = dataset;
+                if (graphId && graphShape) {
+                    this.makeSelection(graphId, graphShape);
+                }
+            }
+        }
+        /**
+         * A handler for the key right down. Opens operations when needed.
+         */
+        keyArrowRightAction(e) {
+            const path = e.composedPath();
+            const target = path && path[0];
+            if (!target) {
+                return;
+            }
+            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();
+                }
+            }
+        }
+        /**
+         * A handler for the key left down. Closes operations when needed.
+         */
+        keyArrowLeftAction(e) {
+            const path = e.composedPath();
+            const target = path && path[0];
+            if (!target) {
+                return;
+            }
+            const { classList, dataset } = target;
+            if (dataset.graphId && classList.contains('endpoint') && classList.contains('list-item')) {
+                const index = this.openedEndpoints.indexOf(dataset.graphId);
+                if (index !== -1) {
+                    this.openedEndpoints.splice(index, 1);
+                    this.requestUpdate();
+                }
+            }
+        }
+        /**
+         * Focuses on the previous item in the navigation.
+         */
+        focusPrevious() {
+            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];
+                if (item && !item.hasAttribute('disabled')) {
+                    const owner = (item.getRootNode && item.getRootNode()) || 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;
+                    }
+                }
+            }
+        }
+        /**
+         * Focuses on the next item in the navigation.
+         */
+        focusNext() {
+            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];
+                if (!item.hasAttribute('disabled')) {
+                    const owner = (item.getRootNode && item.getRootNode()) || 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;
+                    }
+                }
+            }
+        }
+        /**
+         * Selects an item in the navigation.
+         * Note, this dispatches the navigation action event.
+         */
+        select(id) {
+            const { shadowRoot } = this;
+            if (!id || !shadowRoot) {
+                return;
+            }
+            const element = shadowRoot.querySelector(`[data-graph-id="${id}"]`);
+            if (!element) {
+                return;
+            }
+            const { graphShape } = element.dataset;
+            this.makeSelection(id, graphShape);
+        }
+        /**
+         * Lists all HTML elements that are currently rendered in the view.
+         * @returns Currently rendered items.
+         */
+        listActiveItems() {
+            if (this.itemsInternal) {
+                return this.itemsInternal;
+            }
+            const { shadowRoot } = this;
+            if (!shadowRoot) {
+                return [];
+            }
+            let result = [];
+            if (this.summary) {
+                const node = shadowRoot.querySelector('.list-item.summary');
+                if (node) {
+                    result[result.length] = node;
+                }
+            }
+            if (this.hasEndpoints) {
+                const node = shadowRoot.querySelector('.endpoints .section-title');
+                if (node) {
+                    result[result.length] = node;
+                }
+                const nodes = Array.from(shadowRoot.querySelectorAll('.endpoints .list-item.endpoint'));
+                nodes.forEach((item) => {
+                    result[result.length] = item;
+                    const collapse = item.nextElementSibling;
+                    if (!collapse || collapse.localName !== 'ui-collapse') {
+                        return;
+                    }
+                    const children = Array.from(collapse.querySelectorAll('.list-item.operation'));
+                    if (children.length) {
+                        result = result.concat(children);
+                    }
+                });
+            }
+            if (this.hasDocs) {
+                const children = this.listSectionActiveNodes('.documentation');
+                result = result.concat(children);
+            }
+            if (this.hasSchemas) {
+                const children = this.listSectionActiveNodes('.schemas');
+                result = result.concat(children);
+            }
+            if (this.hasSecurity) {
+                const children = this.listSectionActiveNodes('.security');
+                result = result.concat(children);
+            }
+            this.itemsInternal = result.length ? result : undefined;
+            return result;
+        }
+        /**
+         * @param selector The prefix for the query selector
+         * @returns Nodes returned from query function.
+         */
+        listSectionActiveNodes(selector) {
+            const { shadowRoot } = this;
+            let result = [];
+            if (!shadowRoot) {
+                return result;
+            }
+            const node = shadowRoot.querySelector(`${selector} .section-title`);
+            if (node) {
+                result[result.length] = node;
+                const collapse = node.nextElementSibling;
+                if (collapse) {
+                    const children = Array.from(collapse.querySelectorAll('.list-item'));
+                    if (children.length) {
+                        result = result.concat(children);
+                    }
+                }
+            }
+            return result;
+        }
+        /**
+         * Selects an item in the menu.
+         *
+         * @param id The domain id of the node to be selected
+         * @param type The selected type of the item.
+         */
+        makeSelection(id, type) {
+            const { shadowRoot } = this;
+            if (!shadowRoot) {
+                return;
+            }
+            const element = shadowRoot.querySelector(`[data-graph-id="${id}"]`);
+            if (!element) {
+                return;
+            }
+            this.selectedItemInternal = element;
+            this.deselectItem(this.domainId, this.domainType);
+            this.domainIdInternal = id;
+            this.domainTypeInternal = type;
+            if (id === 'summary') {
+                this.summarySelectedInternal = true;
+            }
+            else {
+                this.selectItem(id, type);
+            }
+            this.focusItem(this.selectedItemInternal);
+            this.requestUpdate();
+            this.notifyNavigation(id, type);
+            let parent = element.parentElement;
+            while (parent) {
+                if (parent === this || !parent) {
+                    return;
+                }
+                if (parent.localName === 'ui-collapse') {
+                    ;
+                    parent.open = true;
+                }
+                parent = parent.parentElement;
+            }
+        }
+        /**
+         * Selects an item.
+         * @param id The domain id of the menu item.
+         * @param type The type of the data.
+         */
+        selectItem(id, type) {
+            const selectable = this.findSelectable(id, type);
+            if (selectable) {
+                selectable.selected = true;
+                this.requestUpdate();
+            }
+        }
+        /**
+         * Removes all selections from an item.
+         * @param id The domain id of the menu item.
+         * @param type The type of the data.
+         */
+        deselectItem(id, type) {
+            this.summarySelectedInternal = false;
+            const selectable = this.findSelectable(id, type);
+            if (selectable) {
+                selectable.selected = false;
+                selectable.secondarySelected = false;
+                this.requestUpdate();
+            }
+        }
+        /**
+         * Finds a selectable item by its id and type.
+         * @param id The domain id of the menu item.
+         * @param type The type of the data.
+         */
+        findSelectable(id, type) {
+            if (!id || !type) {
+                return undefined;
+            }
+            let selectable;
+            if (type === 'resource') {
+                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;
+                    }
+                    const op = item.operations.find((opItem) => opItem.id === id);
+                    return !!op;
+                });
+                if (endpoint) {
+                    selectable = endpoint.operations.find((item) => item.id === id);
+                }
+            }
+            else if (type === 'documentation') {
+                selectable = (this.documentationsInternal || []).find((item) => item.id === id);
+            }
+            else if (type === 'schema') {
+                selectable = (this.schemasInternal || []).find((item) => item.id === id);
+            }
+            else if (type === 'security') {
+                selectable = (this.securityInternal || []).find((item) => item.id === id);
+            }
+            return selectable;
+        }
+        /**
+         * @param value The new query. Empty or null to clear the query
+         */
+        processQuery(value) {
+            if (typeof value !== 'string' || value.trim() === '') {
+                this.queryInternal = undefined;
+            }
+            else {
+                this.queryInternal = value.toLowerCase();
+            }
+            this.requestUpdate();
+        }
+        /**
+         * A handler for the search event from the filter input.
+         */
+        searchHandler(e) {
+            const input = e.target;
+            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() {
+            this.endpointsOpened = true;
+            this.schemasOpened = true;
+            this.securityOpened = true;
+            this.documentationsOpened = true;
+            this.expandAllEndpoints();
+        }
+        /**
+         * Closes all sections of the menu and all endpoints.
+         */
+        collapseAll() {
+            this.endpointsOpened = false;
+            this.schemasOpened = false;
+            this.securityOpened = false;
+            this.documentationsOpened = false;
+            this.collapseAllEndpoints();
+        }
+        /**
+         * Opens all endpoints exposing all operations
+         */
+        expandAllEndpoints() {
+            const { shadowRoot } = this;
+            if (!shadowRoot) {
+                return;
+            }
+            this.endpointsOpened = true;
+            const items = Array.from(shadowRoot.querySelectorAll('div.endpoints .list-item.endpoint'));
+            this.openedEndpoints = [];
+            items.forEach((item) => {
+                const { graphId } = item.dataset;
+                if (graphId) {
+                    this.openedEndpoints.push(graphId);
+                }
+            });
+            this.endpointsExpandedInternal = true;
+            this.requestUpdate();
+        }
+        /**
+         * Hides all operations and collapses all endpoints.
+         */
+        collapseAllEndpoints() {
+            this.openedEndpoints = [];
+            this.endpointsExpandedInternal = false;
+            this.requestUpdate();
+        }
+        /**
+         * Triggers a flow when the user can define a new endpoint in the navigation.
+         * This renders an input in the view (in the endpoints list) where the user can enter the path name.
+         */
+        async addEndpoint() {
+            if (!this.endpointsOpened) {
+                this.endpointsOpened = true;
+                await this.updateComplete;
+            }
+            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');
+                input.focus();
+                input.select();
+            }
+        }
+        /**
+         * Triggers a flow when the user can define a new documentation document.
+         * 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) {
+            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);
+            if (wrap) {
+                wrap.scrollIntoView();
+                const input = wrap.querySelector('input');
+                input.focus();
+                input.select();
+            }
+        }
+        /**
+         * Triggers a flow when the user can define a new schema in the navigation.
+         * This renders an input in the view (in the schema list) where the user can enter the schema name.
+         * @param type The type of the schema to add. Default to `object`.
+         */
+        async addSchema(type = 'object') {
+            if (!this.schemasOpened) {
+                this.schemasOpened = true;
+            }
+            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');
+                input.focus();
+                input.select();
+            }
+        }
+        /**
+         * Resets all tabindex attributes to the appropriate value based on the
+         * current selection state. The appropriate value is `0` (focusable) for
+         * the default selected item, and `-1` (not keyboard focusable) for all
+         * other items. Also sets the correct initial values for aria-selected
+         * attribute, true for default selected item and false for others.
+         */
+        resetTabindices() {
+            const { selectedItem } = this;
+            const items = this.listActiveItems();
+            items.forEach((item) => item.setAttribute('tabindex', item === selectedItem ? '0' : '-1'));
+        }
+        /**
+         * Dispatches the navigation event.
+         * @param id The domain id of the selected node
+         * @param type The domain type.
+         */
+        notifyNavigation(id, type) {
+            let parent;
+            if (type === 'operation' && id) {
+                const node = this.shadowRoot?.querySelector(`.operation[data-graph-id="${id}"]`);
+                if (node) {
+                    parent = node.dataset.graphParent;
+                }
+            }
+            Events.Navigation.apiNavigate(this, id, type, parent);
+            Events.Telemetry.event(this, {
+                category: 'API navigation',
+                action: 'Navigate',
+                label: type,
+            });
+        }
+        /**
+         * Event handler for the keydown event of the add endpoint input.
+         */
+        addEndpointKeydownHandler(e) {
+            if (e.key === 'Enter' || e.key === 'NumpadEnter') {
+                e.preventDefault();
+                this.commitNewEndpoint();
+            }
+            else if (e.key === 'Escape') {
+                e.preventDefault();
+                this.cancelNewEndpoint();
+            }
+        }
+        /**
+         * Event handler for the keydown event of the add documentation input.
+         */
+        addDocumentationKeydownHandler(e) {
+            if (e.key === 'Enter' || e.key === 'NumpadEnter') {
+                e.preventDefault();
+                const input = e.target;
+                this.commitNewDocumentation(input.value);
+            }
+            else if (e.key === 'Escape') {
+                e.preventDefault();
+                this.addingDocumentationInternal = false;
+                this.addingExternalInternal = undefined;
+                this.requestUpdate();
+            }
+        }
+        /**
+         * Event handler for the keydown event of the add schema input.
+         */
+        addSchemaKeydownHandler(e) {
+            if (e.key === 'Enter' || e.key === 'NumpadEnter') {
+                e.preventDefault();
+                const input = e.target;
+                this.commitNewSchema(input.value);
+            }
+            else if (e.key === 'Escape') {
+                e.preventDefault();
+                this.addingSchemaInternal = false;
+                this.addingSchemaTypeInternal = undefined;
+                this.requestUpdate();
+            }
+        }
+        async commitNewEndpoint() {
+            const input = this.shadowRoot?.querySelector('.add-endpoint-input input');
+            if (!input) {
+                return;
+            }
+            const name = input.value.trim();
+            if (!name) {
+                return;
+            }
+            // await Events.Endpoint.add(this, { path: name });
+            await this.cancelNewEndpoint();
+        }
+        async cancelNewEndpoint() {
+            this.addingEndpointInternal = false;
+            this.requestUpdate();
+            await this.updateComplete;
+        }
+        /**
+         * @param value The title of the documentation.
+         */
+        async commitNewDocumentation(value = '') {
+            const name = value.trim();
+            if (!name) {
+                return;
+            }
+            // const opts = { title: name };
+            // const isExternal = this.addingExternalInternal;
+            // if (isExternal) {
+            //   const input = (this.shadowRoot?.querySelector('.add-external-doc-input input'));
+            //   if (input) {
+            //     opts.url = (input as HTMLInputElement).value;
+            //   }
+            // }
+            this.addingDocumentationInternal = false;
+            this.addingExternalInternal = undefined;
+            // await Events.Documentation.add(this, opts);
+            this.requestUpdate();
+        }
+        /**
+         * @param value The name of the schema.
+         */
+        async commitNewSchema(value = '') {
+            const name = value.trim();
+            if (!name) {
+                return;
+            }
+            // const type = this.addingSchemaTypeInternal;
+            // const opts = { name };
+            // switch (type) {
+            //   case 'object': opts.type = AmfNamespace.w3.shacl.NodeShape; break;
+            //   case 'scalar': opts.type = AmfNamespace.aml.vocabularies.shapes.ScalarShape; break;
+            //   case 'array': opts.type = AmfNamespace.aml.vocabularies.shapes.ArrayShape; break;
+            //   case 'file': opts.type = AmfNamespace.aml.vocabularies.shapes.FileShape; break;
+            //   case 'union': opts.type = AmfNamespace.aml.vocabularies.shapes.UnionShape; break;
+            //   default:
+            // }
+            this.addingSchemaInternal = false;
+            this.addingSchemaTypeInternal = undefined;
+            // await Events.Type.add(this, opts);
+            this.requestUpdate();
+        }
+        /**
+         * Triggers a rename action for the menu item identified by the `id`.
+         * @param id The domain id of the item to edit.
+         */
+        async renameAction(id) {
+            const { shadowRoot } = this;
+            if (!shadowRoot) {
+                throw new Error(`Invalid state. The DOM is not ready.`);
+            }
+            const item = this.findViewModelItem(id);
+            if (!item) {
+                return;
+            }
+            item.nameEditor = true;
+            this.requestUpdate();
+            await this.updateComplete;
+            const input = shadowRoot.querySelector(`input[data-id="${id}"]`);
+            input.select();
+            input.focus();
+        }
+        /**
+         * @param id The domain id of the item to find.
+         */
+        findViewModelItem(id) {
+            const endpoints = this.endpointsInternal;
+            if (endpoints && endpoints.length) {
+                for (let i = 0, len = endpoints.length; i < len; i++) {
+                    const endpoint = endpoints[i];
+                    if (endpoint.id === id) {
+                        return endpoint;
+                    }
+                    const operation = endpoint.operations.find((op) => op.id === id);
+                    if (operation) {
+                        return operation;
+                    }
+                }
+            }
+            const docs = this.documentationsInternal;
+            if (docs && docs.length) {
+                const doc = docs.find((item) => item.id === id);
+                if (doc) {
+                    return doc;
+                }
+            }
+            const schemas = this.schemasInternal;
+            if (schemas && schemas.length) {
+                const schema = schemas.find((item) => item.id === id);
+                if (schema) {
+                    return schema;
+                }
+            }
+            return null;
+        }
+        /**
+         * A key down event handler on the rename input
+         */
+        async renameKeydownHandler(e) {
+            // do not interfere with the navigation logic.
+            e.stopPropagation();
+            if (!['Enter', 'NumpadEnter', 'Escape'].includes(e.code)) {
+                return;
+            }
+            e.preventDefault();
+            const input = e.target;
+            const { value, dataset } = input;
+            const { id, type } = dataset;
+            const item = this.findViewModelItem(id);
+            if (!item) {
+                return;
+            }
+            item.nameEditor = false;
+            this.requestUpdate();
+            if (e.code === 'Escape') {
+                return;
+            }
+            await this.updateNameHandler(id, value, type);
+        }
+        /**
+         * A blur event handler on the rename input
+         */
+        async renameBlurHandler(e) {
+            const input = e.target;
+            const { value, dataset } = input;
+            const { id, type } = dataset;
+            const item = this.findViewModelItem(id);
+            if (!item) {
+                return;
+            }
+            item.nameEditor = false;
+            this.requestUpdate();
+            await this.updateNameHandler(id, value, type);
+        }
+        /**
+         * Updates the name or the display name of the menu object
+         * @param id The id of the domain object to update
+         * @param value The new value.
+         * @param type The object type
+         * @returns A promise when the update operation finish.
+         */
+        async updateNameHandler(id, value, type) {
+            const updateValue = value.trim();
+            if (!updateValue) {
+                return;
+            }
+            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);
+            // } else if (type === 'operation') {
+            //   promise = Events.Operation.update(this, id, 'name', updateValue);
+            // } else if (type === 'documentation') {
+            //   const obj = await StoreEvents.Documentation.get(this, id);
+            //   const prop = obj.title ? 'title' : 'description';
+            //   promise = Events.Documentation.update(this, id, prop, updateValue);
+            // } else if (type === 'schema') {
+            //   const obj = await StoreEvents.Type.get(this, id);
+            //   const { displayName } = obj;
+            //   const prop = displayName ? 'displayName' : 'name';
+            //   promise = Events.Type.update(this, id, prop, updateValue);
+            // }
+            try {
+                await promise;
+            }
+            catch (e) {
+                const ex = e;
+                Events.Reporting.error(this, ex, `Unable rename object: ${ex.message}`, 'graph-api-navigation');
+            }
+        }
+        /**
+         * Click handler for the external navigation item.
+         * Dispatches the external navigation event. When this event is handled (cancelled)
+         * the original event is cancelled to prevent default behavior.
+         */
+        externalDocumentationHandler(e) {
+            const a = e.currentTarget;
+            if (a.href.startsWith('javascript')) {
+                cancelEvent(e);
+                SnackNotifications.notify(`Navigation blocked due to security concern. Javascript detected.`);
+                return;
+            }
+            const handled = Events.Navigation.navigateExternal(this, a.href);
+            if (handled) {
+                cancelEvent(e);
+            }
+        }
+        render() {
+            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>
+    `;
+        }
+        /**
+         * @returns The template for the summary filed.
+         */
+        renderSummary() {
+            const { summaryRendered, summaryLabel } = this;
+            if (!summaryRendered || !summaryLabel) {
+                return '';
+            }
+            const selected = !!this.summarySelectedInternal;
+            const classes = {
+                'list-item': 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>
+      </div>
+    `;
+        }
+        /**
+         * @returns The template for the list of endpoints.
+         */
+        renderEndpoints() {
+            const { edit } = this;
+            if (!this.hasEndpoints && !edit) {
+                return '';
+            }
+            const items = this.getFilteredEndpoints();
+            const hasItems = !!items && !!items.length;
+            if (!hasItems && !edit) {
+                return '';
+            }
+            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;
+            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">
+            <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>` : ''}
+          </div>
+        </ui-collapse>
+      </div>
+    `;
+        }
+        /**
+         * @returns The template for an endpoint.
+         */
+        renderEndpoint(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);
+            const classes = {
+                'list-item': true,
+                'endpoint': true,
+                opened,
+                '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, 'resource', label)
+                : html `
+              ${renderChildren
+                    ? this.renderEndpointToggle(id)
+                    : 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}"
+              role="menu"
+              .open="${opened}"
+            >
+              ${item.operations.map((op) => this.renderOperationItem(item, op))}
+            </ui-collapse>
+          `
+                : ''}
+    `;
+        }
+        /**
+         * @param id The domain id of the endpoint.
+         * @return The template for an endpoint toggle button.
+         */
+        renderEndpointToggle(id) {
+            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>`;
+        }
+        /**
+         * @param item The endpoint definition
+         * @param op The operation definition.
+         * @return The template for an operation list item.
+         */
+        renderOperationItem(item, 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,
+            };
+            return html `
+      <div
+        part="api-navigation-list-item"
+        class="${classMap(classes)}"
+        role="menuitem"
+        tabindex="-1"
+        data-graph-parent="${item.id}"
+        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.
+         */
+        renderDocumentations() {
+            const { edit } = this;
+            const items = this.getFilteredDocumentations();
+            if (!items.length && !edit) {
+                return '';
+            }
+            const { documentationsOpened = false } = this;
+            const classes = {
+                documentation: true,
+                opened: !!documentationsOpened,
+            };
+            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">
+            <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>` : ''}
+          </div>
+        </ui-collapse>
+      </div>
+    `;
+        }
+        /**
+         * @return The template for the documentation list item.
+         */
+        documentationTemplate(item) {
+            if (item.url) {
+                return this.renderExternalDocumentation(item);
+            }
+            const { title, id, selected, secondarySelected, nameEditor } = item;
+            const classes = {
+                'list-item': true,
+                'label': true,
+                'documentation': true,
+                'selected': !!selected,
+                'secondarySelected': !!secondarySelected,
+            };
+            return html `<div
+      part="api-navigation-list-item"
+      class="${classMap(classes)}"
+      role="menuitem"
+      tabindex="-1"
+      data-graph-id="${id}"
+      data-graph-shape="documentation"
+      @click="${this.itemClickHandler}"
+    >
+      ${nameEditor ? this.renameInputTemplate(id, 'documentation', title) : title}
+    </div>`;
+        }
+        /**
+         * @return The template for the external documentation list item.
+         */
+        renderExternalDocumentation(item) {
+            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,
+            };
+            return html `<a
+      href="${url}"
+      target="_blank"
+      part="api-navigation-list-item"
+      class="${classMap(classes)}"
+      tabindex="-1"
+      data-graph-id="${id}"
+      data-graph-shape="documentation"
+      @click="${this.externalDocumentationHandler}"
+    >
+      ${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>`;
+        }
+        /**
+         * @return The template for the types (schemas) section.
+         */
+        renderSchemas() {
+            const { edit } = this;
+            const items = this.getFilteredSchemas();
+            if (!items.length && !edit) {
+                return '';
+            }
+            const { schemasOpened = false } = this;
+            const classes = {
+                schemas: true,
+                opened: !!schemasOpened,
+            };
+            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">
+            <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>` : ''}
+          </div>
+        </ui-collapse>
+      </div>
+    `;
+        }
+        /**
+         * @return The template for the documentation list item.
+         */
+        renderSchema(item) {
+            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,
+            };
+            return html ` <div
+      part="api-navigation-list-item label"
+      class="${classMap(classes)}"
+      role="menuitem"
+      tabindex="-1"
+      data-graph-id="${id}"
+      data-graph-shape="schema"
+      @click="${this.itemClickHandler}"
+    >
+      ${nameEditor ? this.renameInputTemplate(id, 'schema', label) : label}
+    </div>`;
+        }
+        /**
+         * @return The template for the security section.
+         */
+        renderSecurities() {
+            const items = this.getFilteredSecurity();
+            if (!items.length) {
+                return '';
+            }
+            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">
+            <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))}</div>
+        </ui-collapse>
+      </div>
+    `;
+        }
+        /**
+         * @return The template for the security list item.
+         */
+        securityTemplate(item) {
+            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,
+            };
+            return html ` <div
+      part="api-navigation-list-item"
+      class="${classMap(classes)}"
+      role="menuitem"
+      tabindex="-1"
+      data-graph-id="${id}"
+      data-graph-shape="security"
+      @click="${this.itemClickHandler}"
+    >
+      ${type}: ${label}
+    </div>`;
+        }
+        /**
+         * @return The template for the filter input.
+         */
+        filterTemplate() {
+            const { filter } = this;
+            if (!filter) {
+                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>
+    `;
+        }
+        /**
+         * @return The template for the new endpoint input.
+         */
+        addEndpointInputTemplate() {
+            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>
+    `;
+        }
+        /**
+         * @return The template for the new documentation input.
+         */
+        addDocumentationInputTemplate() {
+            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>
+    `;
+        }
+        /**
+         * @return The template for the new schema input.
+         */
+        addSchemaInputTemplate() {
+            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>
+    `;
+        }
+        /**
+         * @param id The domain id of the item being edited
+         * @param label The current name to render.
+         * @returns The template for the rename input.
+         */
+        renameInputTemplate(id, type, label = '') {
+            return html `
+      <input
+        type="text"
+        .value="${label}"
+        required
+        class="rename"
+        data-id="${id}"
+        data-type="${type}"
+        @click="${cancelEvent}"
+        @keydown="${this.renameKeydownHandler}"
+        @blur="${this.renameBlurHandler}"
+      />
+    `;
+        }
+    };
+})();
+/**
+ * @fires apinavigate - Dispatched when a selection change
+ * @fires graphload - When the graph was loaded
+ */
+export default ApiNavigation;
+//# sourceMappingURL=ApiNavigation.element.js.map