@api-client/ui 0.2.0 → 0.2.3

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

@@ -1,706 +0,0 @@
-import { __esDecorate, __runInitializers } from "tslib";
-import { html, nothing } from 'lit';
-import { property } from 'lit/decorators.js';
-import { classMap } from 'lit/directives/class-map.js';
-import { SecurityProcessor } from '@api-client/core/authorization/lib/SecurityProcessor.js';
-import { AmfNamespace } from '@api-client/core/amf/definitions/Namespace.js';
-import { ApiDocumentationBase } from './ApiDocumentationBase.js';
-import { joinTraitNames } from '../../amf/lib/Utils.js';
-import * as UrlLib from '../../amf/lib/UrlUtils.js';
-import { ReportingEvents } from '../../events/amf/ReportingEvents.js';
-import { TelemetryEvents } from '../../events/amf/TelemetryEvents.js';
-import { EndpointEvents } from '../../events/amf/EndpointEvents.js';
-import { ServerEvents } from '../../events/amf/ServerEvents.js';
-import { ApiEvents } from '../../events/amf/ApiEvents.js';
-import '../../define/amf/api-request.js';
-import '../../define/amf/api-operation-document.js';
-import '../../define/amf/api-parameter-document.js';
-import '../../define/http/http-snippets.js';
-let ApiResourceDocument = (() => {
-    let _classSuper = ApiDocumentationBase;
-    let _instanceExtraInitializers = [];
-    let _set_operationId_decorators;
-    let _set_serverId_decorators;
-    let _set_baseUri_decorators;
-    let _tryItButton_decorators;
-    let _tryItButton_initializers = [];
-    let _tryItButton_extraInitializers = [];
-    let _tryItPanel_decorators;
-    let _tryItPanel_initializers = [];
-    let _tryItPanel_extraInitializers = [];
-    let _httpUrlEditor_decorators;
-    let _httpUrlEditor_initializers = [];
-    let _httpUrlEditor_extraInitializers = [];
-    let _httpCredentialsSource_decorators;
-    let _httpCredentialsSource_initializers = [];
-    let _httpCredentialsSource_extraInitializers = [];
-    let _redirectUri_decorators;
-    let _redirectUri_initializers = [];
-    let _redirectUri_extraInitializers = [];
-    let _httpNoServerSelector_decorators;
-    let _httpNoServerSelector_initializers = [];
-    let _httpNoServerSelector_extraInitializers = [];
-    let _httpAllowCustom_decorators;
-    let _httpAllowCustom_initializers = [];
-    let _httpAllowCustom_extraInitializers = [];
-    let _httpAllowCustomBaseUri_decorators;
-    let _httpAllowCustomBaseUri_initializers = [];
-    let _httpAllowCustomBaseUri_extraInitializers = [];
-    let _asyncApi_decorators;
-    let _asyncApi_initializers = [];
-    let _asyncApi_extraInitializers = [];
-    let _serverValue_decorators;
-    let _serverValue_initializers = [];
-    let _serverValue_extraInitializers = [];
-    let _serverType_decorators;
-    let _serverType_initializers = [];
-    let _serverType_extraInitializers = [];
-    return class ApiResourceDocument extends _classSuper {
-        static {
-            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
-            _set_operationId_decorators = [property({ type: String, reflect: true })];
-            _set_serverId_decorators = [property({ type: String, reflect: true })];
-            _set_baseUri_decorators = [property({ type: String })];
-            _tryItButton_decorators = [property({ type: Boolean, reflect: true })];
-            _tryItPanel_decorators = [property({ type: Boolean, reflect: true })];
-            _httpUrlEditor_decorators = [property({ type: Boolean, reflect: true })];
-            _httpCredentialsSource_decorators = [property({ type: Array })];
-            _redirectUri_decorators = [property({ type: String })];
-            _httpNoServerSelector_decorators = [property({ type: Boolean, reflect: true })];
-            _httpAllowCustom_decorators = [property({ type: Boolean, reflect: true })];
-            _httpAllowCustomBaseUri_decorators = [property({ type: Boolean, reflect: true })];
-            _asyncApi_decorators = [property({ type: Boolean, reflect: true })];
-            _serverValue_decorators = [property({ type: String })];
-            _serverType_decorators = [property({ type: String })];
-            __esDecorate(this, null, _set_operationId_decorators, { kind: "setter", name: "operationId", static: false, private: false, access: { has: obj => "operationId" in obj, set: (obj, value) => { obj.operationId = value; } }, metadata: _metadata }, null, _instanceExtraInitializers);
-            __esDecorate(this, null, _set_serverId_decorators, { kind: "setter", name: "serverId", static: false, private: false, access: { has: obj => "serverId" in obj, set: (obj, value) => { obj.serverId = value; } }, metadata: _metadata }, null, _instanceExtraInitializers);
-            __esDecorate(this, null, _set_baseUri_decorators, { kind: "setter", name: "baseUri", static: false, private: false, access: { has: obj => "baseUri" in obj, set: (obj, value) => { obj.baseUri = value; } }, metadata: _metadata }, null, _instanceExtraInitializers);
-            __esDecorate(this, null, _tryItButton_decorators, { kind: "accessor", name: "tryItButton", static: false, private: false, access: { has: obj => "tryItButton" in obj, get: obj => obj.tryItButton, set: (obj, value) => { obj.tryItButton = value; } }, metadata: _metadata }, _tryItButton_initializers, _tryItButton_extraInitializers);
-            __esDecorate(this, null, _tryItPanel_decorators, { kind: "accessor", name: "tryItPanel", static: false, private: false, access: { has: obj => "tryItPanel" in obj, get: obj => obj.tryItPanel, set: (obj, value) => { obj.tryItPanel = value; } }, metadata: _metadata }, _tryItPanel_initializers, _tryItPanel_extraInitializers);
-            __esDecorate(this, null, _httpUrlEditor_decorators, { kind: "accessor", name: "httpUrlEditor", static: false, private: false, access: { has: obj => "httpUrlEditor" in obj, get: obj => obj.httpUrlEditor, set: (obj, value) => { obj.httpUrlEditor = value; } }, metadata: _metadata }, _httpUrlEditor_initializers, _httpUrlEditor_extraInitializers);
-            __esDecorate(this, null, _httpCredentialsSource_decorators, { kind: "accessor", name: "httpCredentialsSource", static: false, private: false, access: { has: obj => "httpCredentialsSource" in obj, get: obj => obj.httpCredentialsSource, set: (obj, value) => { obj.httpCredentialsSource = value; } }, metadata: _metadata }, _httpCredentialsSource_initializers, _httpCredentialsSource_extraInitializers);
-            __esDecorate(this, null, _redirectUri_decorators, { kind: "accessor", name: "redirectUri", static: false, private: false, access: { has: obj => "redirectUri" in obj, get: obj => obj.redirectUri, set: (obj, value) => { obj.redirectUri = value; } }, metadata: _metadata }, _redirectUri_initializers, _redirectUri_extraInitializers);
-            __esDecorate(this, null, _httpNoServerSelector_decorators, { kind: "accessor", name: "httpNoServerSelector", static: false, private: false, access: { has: obj => "httpNoServerSelector" in obj, get: obj => obj.httpNoServerSelector, set: (obj, value) => { obj.httpNoServerSelector = value; } }, metadata: _metadata }, _httpNoServerSelector_initializers, _httpNoServerSelector_extraInitializers);
-            __esDecorate(this, null, _httpAllowCustom_decorators, { kind: "accessor", name: "httpAllowCustom", static: false, private: false, access: { has: obj => "httpAllowCustom" in obj, get: obj => obj.httpAllowCustom, set: (obj, value) => { obj.httpAllowCustom = value; } }, metadata: _metadata }, _httpAllowCustom_initializers, _httpAllowCustom_extraInitializers);
-            __esDecorate(this, null, _httpAllowCustomBaseUri_decorators, { kind: "accessor", name: "httpAllowCustomBaseUri", static: false, private: false, access: { has: obj => "httpAllowCustomBaseUri" in obj, get: obj => obj.httpAllowCustomBaseUri, set: (obj, value) => { obj.httpAllowCustomBaseUri = value; } }, metadata: _metadata }, _httpAllowCustomBaseUri_initializers, _httpAllowCustomBaseUri_extraInitializers);
-            __esDecorate(this, null, _asyncApi_decorators, { kind: "accessor", name: "asyncApi", static: false, private: false, access: { has: obj => "asyncApi" in obj, get: obj => obj.asyncApi, set: (obj, value) => { obj.asyncApi = value; } }, metadata: _metadata }, _asyncApi_initializers, _asyncApi_extraInitializers);
-            __esDecorate(this, null, _serverValue_decorators, { kind: "accessor", name: "serverValue", static: false, private: false, access: { has: obj => "serverValue" in obj, get: obj => obj.serverValue, set: (obj, value) => { obj.serverValue = value; } }, metadata: _metadata }, _serverValue_initializers, _serverValue_extraInitializers);
-            __esDecorate(this, null, _serverType_decorators, { kind: "accessor", name: "serverType", static: false, private: false, access: { has: obj => "serverType" in obj, get: obj => obj.serverType, set: (obj, value) => { obj.serverType = value; } }, metadata: _metadata }, _serverType_initializers, _serverType_extraInitializers);
-            if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
-        }
-        endpointValue = __runInitializers(this, _instanceExtraInitializers);
-        serverInternal;
-        serversValue;
-        operationIdValue;
-        serverIdValue;
-        baseUriValue;
-        urlValue;
-        protocolsValue;
-        snippetsInternal;
-        get snippets() {
-            return { ...this.snippetsInternal };
-        }
-        processSelectionTimeout;
-        get endpoint() {
-            return this.endpointValue;
-        }
-        set endpoint(value) {
-            const old = this.endpointValue;
-            if (old === value) {
-                return;
-            }
-            this.endpointValue = value;
-            this.processGraph();
-        }
-        get operationId() {
-            return this.operationIdValue;
-        }
-        /**
-         * When set it scrolls to the operation with the given id, if exists.
-         * The operation is performed after render.
-         * @attribute
-         */
-        set operationId(value) {
-            const old = this.operationIdValue;
-            if (old === value) {
-                return;
-            }
-            this.operationIdValue = value;
-            this.requestUpdate('operationId', old);
-            this.operationIdChanged();
-        }
-        get serverId() {
-            return this.serverIdValue;
-        }
-        /**
-         * The id of the currently selected server to use to construct the URL.
-         * If not set a first server in the API servers array is used.
-         * @attribute
-         */
-        set serverId(value) {
-            const old = this.serverIdValue;
-            if (old === value) {
-                return;
-            }
-            this.serverIdValue = value;
-            this.selectServer();
-            this.processServerSelection();
-            this.requestUpdate();
-        }
-        get server() {
-            if (this.serverInternal) {
-                return this.serverInternal;
-            }
-            const servers = this.serversValue;
-            if (Array.isArray(servers) && servers.length) {
-                const [server] = servers;
-                if (server) {
-                    this.serverInternal = server;
-                }
-            }
-            return this.serverInternal;
-        }
-        set server(value) {
-            const old = this.serverInternal;
-            if (old === value) {
-                return;
-            }
-            this.serverInternal = value;
-            this.processServerSelection();
-            this.requestUpdate('server', old);
-        }
-        /**
-         * The list of the servers read from the API and the endpoint.
-         */
-        get servers() {
-            return this.serversValue;
-        }
-        /**
-         * The list of protocols to render.
-         */
-        get protocol() {
-            const { server } = this;
-            if (!server) {
-                return undefined;
-            }
-            const { protocol } = server;
-            return protocol;
-        }
-        /**
-         * A property to set to override AMF's model base URI information.
-         * When this property is set, the `endpointUri` property is recalculated.
-         * @attribute
-         */
-        get baseUri() {
-            return this.baseUriValue;
-        }
-        set baseUri(value) {
-            const old = this.baseUriValue;
-            if (old === value) {
-                return;
-            }
-            this.baseUriValue = value;
-            this.computeUrlValue();
-            this.requestUpdate();
-        }
-        /**
-         * The computed URI for the endpoint.
-         */
-        get endpointUri() {
-            return this.urlValue;
-        }
-        /**
-         * The API's protocols.
-         */
-        get protocols() {
-            return this.protocolsValue;
-        }
-        #tryItButton_accessor_storage = __runInitializers(this, _tryItButton_initializers, void 0);
-        /**
-         * When set it renders the "try it" button that dispatches the `tryit` event.
-         * @attribute
-         */
-        get tryItButton() { return this.#tryItButton_accessor_storage; }
-        set tryItButton(value) { this.#tryItButton_accessor_storage = value; }
-        #tryItPanel_accessor_storage = (__runInitializers(this, _tryItButton_extraInitializers), __runInitializers(this, _tryItPanel_initializers, void 0));
-        /**
-         * When set it renders the "try it" panel next to the operation documentation.
-         * Setting this automatically disables the `tryItButton` property.
-         *
-         * Note, use this only when there's enough space on the screen to render 2 panels side-by-side.
-         * @attribute
-         */
-        get tryItPanel() { return this.#tryItPanel_accessor_storage; }
-        set tryItPanel(value) { this.#tryItPanel_accessor_storage = value; }
-        #httpUrlEditor_accessor_storage = (__runInitializers(this, _tryItPanel_extraInitializers), __runInitializers(this, _httpUrlEditor_initializers, void 0));
-        /**
-         * When set it renders the URL input above the URL parameters in the HTTP editor.
-         * @attribute
-         */
-        get httpUrlEditor() { return this.#httpUrlEditor_accessor_storage; }
-        set httpUrlEditor(value) { this.#httpUrlEditor_accessor_storage = value; }
-        #httpCredentialsSource_accessor_storage = (__runInitializers(this, _httpUrlEditor_extraInitializers), __runInitializers(this, _httpCredentialsSource_initializers, void 0));
-        /**
-         * List of credentials source passed to the HTTP editor
-         */
-        get httpCredentialsSource() { return this.#httpCredentialsSource_accessor_storage; }
-        set httpCredentialsSource(value) { this.#httpCredentialsSource_accessor_storage = value; }
-        #redirectUri_accessor_storage = (__runInitializers(this, _httpCredentialsSource_extraInitializers), __runInitializers(this, _redirectUri_initializers, void 0));
-        /**
-         * OAuth2 redirect URI.
-         * This value **must** be set in order for OAuth 1/2 to work properly.
-         * This is only required in inline mode (`inlineMethods`).
-         * @attribute
-         */
-        get redirectUri() { return this.#redirectUri_accessor_storage; }
-        set redirectUri(value) { this.#redirectUri_accessor_storage = value; }
-        #httpNoServerSelector_accessor_storage = (__runInitializers(this, _redirectUri_extraInitializers), __runInitializers(this, _httpNoServerSelector_initializers, void 0));
-        /**
-         * Optional property to set on the request editor.
-         * When true, the server selector is not rendered
-         * @attribute
-         */
-        get httpNoServerSelector() { return this.#httpNoServerSelector_accessor_storage; }
-        set httpNoServerSelector(value) { this.#httpNoServerSelector_accessor_storage = value; }
-        #httpAllowCustom_accessor_storage = (__runInitializers(this, _httpNoServerSelector_extraInitializers), __runInitializers(this, _httpAllowCustom_initializers, void 0));
-        /**
-         * When set it renders "add custom" item button in the HTTP request editor.
-         * If the element is to be used without AMF model this should always
-         * be enabled. Otherwise users won't be able to add a parameter.
-         * @attribute
-         */
-        get httpAllowCustom() { return this.#httpAllowCustom_accessor_storage; }
-        set httpAllowCustom(value) { this.#httpAllowCustom_accessor_storage = value; }
-        #httpAllowCustomBaseUri_accessor_storage = (__runInitializers(this, _httpAllowCustom_extraInitializers), __runInitializers(this, _httpAllowCustomBaseUri_initializers, void 0));
-        /**
-         * Optional property to set on the request editor.
-         * If true, the server selector custom base URI option is rendered
-         * @attribute
-         */
-        get httpAllowCustomBaseUri() { return this.#httpAllowCustomBaseUri_accessor_storage; }
-        set httpAllowCustomBaseUri(value) { this.#httpAllowCustomBaseUri_accessor_storage = value; }
-        #asyncApi_accessor_storage = (__runInitializers(this, _httpAllowCustomBaseUri_extraInitializers), __runInitializers(this, _asyncApi_initializers, void 0));
-        /**
-         * When set it renders the view optimised for asynchronous API operation.
-         * @attribute
-         */
-        get asyncApi() { return this.#asyncApi_accessor_storage; }
-        set asyncApi(value) { this.#asyncApi_accessor_storage = value; }
-        #serverValue_accessor_storage = (__runInitializers(this, _asyncApi_extraInitializers), __runInitializers(this, _serverValue_initializers, void 0));
-        /**
-         * Holds the value of the currently selected server
-         * Data type: URI
-         * @attribute
-         */
-        get serverValue() { return this.#serverValue_accessor_storage; }
-        set serverValue(value) { this.#serverValue_accessor_storage = value; }
-        #serverType_accessor_storage = (__runInitializers(this, _serverValue_extraInitializers), __runInitializers(this, _serverType_initializers, void 0));
-        /**
-         * Holds the type of the currently selected server
-         * Values: `server` | `uri` | `custom`
-         * @attribute
-         */
-        get serverType() { return this.#serverType_accessor_storage; }
-        set serverType(value) { this.#serverType_accessor_storage = value; }
-        constructor() {
-            super();
-            __runInitializers(this, _serverType_extraInitializers);
-            this.snippetsInternal = {};
-        }
-        disconnectedCallback() {
-            if (this.processSelectionTimeout) {
-                clearTimeout(this.processSelectionTimeout);
-                this.processSelectionTimeout = undefined;
-            }
-            super.disconnectedCallback();
-        }
-        /**
-         * Scrolls the view to the operation, when present in the DOM.
-         * @param id The operation domain id to scroll into.
-         */
-        scrollToOperation(id) {
-            const { shadowRoot } = this;
-            if (!shadowRoot) {
-                return;
-            }
-            const elm = shadowRoot.querySelector(`api-operation-document[data-domain-id="${id}"]`);
-            if (!elm) {
-                return;
-            }
-            elm.scrollIntoView({ block: 'start', inline: 'nearest', behavior: 'smooth' });
-        }
-        async processGraph() {
-            await this.queryEndpoint();
-            await this.queryServers();
-            await this.queryProtocols();
-            this.computeUrlValue();
-            this.requestUpdate();
-            await this.updateComplete;
-            if (this.processSelectionTimeout) {
-                clearTimeout(this.processSelectionTimeout);
-                this.processSelectionTimeout = undefined;
-            }
-            // this timeout gives few milliseconds for operations to render.
-            this.processSelectionTimeout = setTimeout(() => {
-                this.processSelectionTimeout = undefined;
-                this.collectCodeSnippets();
-                if (this.operationId) {
-                    this.scrollToOperation(this.operationId);
-                }
-            }, 200);
-        }
-        /**
-         * Queries the API store for the API summary object.
-         */
-        async queryProtocols() {
-            this.protocolsValue = undefined;
-            try {
-                const info = await ApiEvents.protocols(this);
-                this.protocolsValue = info;
-            }
-            catch (e) {
-                const ex = e;
-                TelemetryEvents.exception(this, ex.message, false);
-                ReportingEvents.error(this, ex, `Unable to query for API protocols list: ${ex.message}`, this.localName);
-            }
-        }
-        /**
-         * Queries the store for the endpoint data.
-         * @returns {Promise<void>}
-         */
-        async queryEndpoint() {
-            const { domainId } = this;
-            if (!domainId) {
-                // this.endpointValue = undefined;
-                return;
-            }
-            if (this.endpointValue && this.endpointValue.id === domainId) {
-                // in case the endpoint model was provided via property setter.
-                return;
-            }
-            try {
-                const info = await EndpointEvents.get(this, domainId);
-                this.endpointValue = info;
-            }
-            catch (e) {
-                const ex = e;
-                TelemetryEvents.exception(this, ex.message, false);
-                ReportingEvents.error(this, ex, `Unable to query for API endpoint data: ${ex.message}`, this.localName);
-            }
-        }
-        /**
-         * Scrolls to the selected operation after view update.
-         */
-        async operationIdChanged() {
-            await this.updateComplete;
-            const { operationId } = this;
-            if (operationId) {
-                this.scrollToOperation(operationId);
-            }
-            else {
-                this.scrollIntoView({ block: 'start', inline: 'nearest', behavior: 'smooth' });
-            }
-        }
-        /**
-         * Queries the store for the current servers value.
-         */
-        async queryServers() {
-            this.serversValue = undefined;
-            const { domainId } = this;
-            const endpointId = this.endpointValue && this.endpointValue.id;
-            try {
-                const info = await ServerEvents.query(this, {
-                    endpointId,
-                    methodId: domainId,
-                });
-                this.serversValue = info;
-            }
-            catch (e) {
-                const ex = e;
-                TelemetryEvents.exception(this, ex.message, false);
-                ReportingEvents.error(this, ex, `Unable to query for API servers: ${ex.message}`, this.localName);
-            }
-        }
-        /**
-         * Sets the private server value for the current server defined by `serverId`.
-         * Calls the `.processServerSelection()` function to set server related values.
-         */
-        selectServer() {
-            this.serverInternal = undefined;
-            const { serverId } = this;
-            const servers = this.serversValue;
-            if (!serverId || !Array.isArray(servers)) {
-                return;
-            }
-            this.serverInternal = servers.find((s) => s.id === serverId);
-        }
-        /**
-         * Performs actions after a server is selected.
-         */
-        processServerSelection() {
-            this.computeUrlValue();
-        }
-        /**
-         * Computes the URL value for the current serves, selected server, and endpoint's path.
-         */
-        computeUrlValue() {
-            const endpoint = this.endpointValue;
-            const { baseUri, server, protocols } = this;
-            const url = UrlLib.computeEndpointUri({ baseUri, server, endpoint, protocols });
-            this.urlValue = url;
-        }
-        /**
-         * Runs over each request editor and collects request values for code snippets generators.
-         */
-        collectCodeSnippets() {
-            const { shadowRoot } = this;
-            if (!shadowRoot) {
-                return;
-            }
-            const panels = shadowRoot.querySelectorAll('api-request');
-            if (!panels.length) {
-                return;
-            }
-            Array.from(panels).forEach((panel) => this.readCodeSnippets(panel));
-            this.requestUpdate();
-        }
-        requestChangeHandler(e) {
-            const panel = e.target;
-            this.readCodeSnippets(panel);
-            this.requestUpdate();
-        }
-        /**
-         * Reads the request data from the request panel for the code snippets.
-         */
-        async readCodeSnippets(panel) {
-            const { requestId } = panel.dataset;
-            if (!requestId) {
-                return;
-            }
-            if (!this.snippetsInternal[requestId]) {
-                this.snippetsInternal[requestId] = { reading: false };
-            }
-            const info = this.snippetsInternal[requestId];
-            if (info.reading) {
-                return;
-            }
-            try {
-                info.reading = true;
-                const request = await panel.serialize();
-                if (request.authorization && request.authorization.length) {
-                    SecurityProcessor.applyAuthorization(request.expects, request.authorization);
-                }
-                info.value = request;
-                this.requestUpdate();
-            }
-            catch {
-                // what can go wrong it that the request is not yet set on the editor
-                // due to the debouncer and we are trying to serialize a request
-                // that is not yet ready. This will redo the operation when the request panel
-                // render the HTTP editor.
-                // ...
-            }
-            finally {
-                info.reading = false;
-            }
-        }
-        render() {
-            const { endpoint } = this;
-            if (!endpoint) {
-                return html ``;
-            }
-            return html `
-      ${this.renderTitle(endpoint)} ${this.renderUrl()} ${this.renderExtensions(endpoint)}
-      ${this.descriptionTemplate(endpoint.description)}
-      ${this.customDomainPropertiesTemplate(endpoint.customDomainProperties)} ${this.renderOperations(endpoint)}
-    `;
-        }
-        /**
-         * @returns The template for the Operation title.
-         */
-        renderTitle(endpoint) {
-            const { name, path } = endpoint;
-            const label = name || path;
-            if (!label) {
-                return '';
-            }
-            const subLabel = this.asyncApi ? 'API channel' : 'API endpoint';
-            return html `
-      <div class="endpoint-header">
-        <div class="endpoint-title">
-          <span class="label text-selectable">${label}</span>
-        </div>
-        <p class="sub-header">${subLabel}</p>
-      </div>
-    `;
-        }
-        /**
-         * @returns The template for the operation's URL.
-         */
-        renderUrl() {
-            const url = this.urlValue;
-            return html `
-      <div class="endpoint-url">
-        <div class="url-value text-selectable">${url}</div>
-      </div>
-    `;
-        }
-        /**
-         * @returns The template for the list of operations.
-         */
-        renderOperations(endpoint) {
-            const { operations } = endpoint;
-            if (!operations.length) {
-                return '';
-            }
-            return html `
-      <div class="operations">${operations.map((operation) => this.renderOperation(endpoint, operation))}</div>
-    `;
-        }
-        /**
-         * @param operation The operation to render.
-         * @returns The template for the API operation.
-         */
-        renderOperation(endpoint, operation) {
-            const { serverId, baseUri, tryItPanel, tryItButton, asyncApi } = this;
-            const renderTryIt = !tryItPanel && !asyncApi && !!tryItButton;
-            const classes = {
-                'operation-container': true,
-                'surface1': true,
-                'tryit': !!tryItPanel,
-            };
-            return html `
-      <div class="${classMap(classes)}">
-        <api-operation-document
-          .domainId="${operation.id}"
-          .operation="${operation}"
-          .endpoint="${endpoint}"
-          .endpointId="${endpoint.id}"
-          .serverId="${serverId}"
-          .baseUri="${baseUri}"
-          data-domain-id="${operation.id}"
-          ?tryItButton="${renderTryIt}"
-          showSecurity
-          ?renderCodeSnippets="${!tryItPanel}"
-          ?asyncApi="${this.asyncApi}"
-          class="operation"
-        ></api-operation-document>
-        ${tryItPanel ? this.renderTryItColumn(operation) : ''}
-      </div>
-    `;
-        }
-        /**
-         * @param operation The operation to render.
-         * @returns The template for the try it column panel rendered next to the operation documentation/
-         */
-        renderTryItColumn(operation) {
-            if (this.asyncApi) {
-                return '';
-            }
-            return html `
-      <div class="try-it-column">
-        <!-- <div class="sticky-content"> -->
-        ${this.renderHttpRequest(operation)} ${this.renderCodeSnippetsPanel(operation)}
-        <!-- </div> -->
-      </div>
-    `;
-        }
-        /**
-         * @param operation The operation to render.
-         * @returns The template for the request editor.
-         */
-        renderHttpRequest(operation) {
-            const content = html `
-      <api-request
-        .domainId="${operation.id}"
-        .serverValue="${this.serverValue}"
-        .serverType="${this.serverType}"
-        .baseUri="${this.baseUri}"
-        .redirectUri="${this.redirectUri}"
-        .credentialsSource="${this.httpCredentialsSource}"
-        ?urlEditor="${this.httpUrlEditor}"
-        ?urlLabel="${!this.httpUrlEditor}"
-        ?noServerSelector="${this.httpNoServerSelector}"
-        ?allowCustomBaseUri="${this.httpAllowCustomBaseUri}"
-        ?allowCustom="${this.httpAllowCustom}"
-        allowHideOptional
-        data-request-id="${operation.id}"
-        @change="${this.requestChangeHandler}"
-      ></api-request>
-    `;
-            return content;
-        }
-        /**
-         * @param operation The operation to render.
-         * @returns The template for the request's code snippets.
-         */
-        renderCodeSnippetsPanel(operation) {
-            const values = this.snippetsInternal[operation.id];
-            if (!values || !values.value) {
-                return nothing;
-            }
-            const { expects } = values.value;
-            let { payload } = expects;
-            if (payload && typeof payload !== 'string') {
-                payload = '';
-            }
-            const request = {
-                url: expects.url,
-                headers: expects.headers,
-                method: expects.method,
-                payload: payload,
-            };
-            return html `
-      <section class="snippets text-selectable">
-        <http-snippets .request="${request}"></http-snippets>
-      </section>
-    `;
-        }
-        /**
-         * @return The template for the endpoint's extensions.
-         */
-        renderExtensions(endpoint) {
-            const { extends: extensions } = endpoint;
-            if (!extensions || !extensions.length) {
-                return nothing;
-            }
-            const type = extensions.find((e) => e.types.includes(AmfNamespace.aml.vocabularies.apiContract.ParametrizedResourceType));
-            const traits = extensions.filter((e) => e.types.includes(AmfNamespace.aml.vocabularies.apiContract.ParametrizedTrait));
-            const traitsLabel = joinTraitNames(traits);
-            const typeLabel = type && type.name;
-            if (!traitsLabel && !typeLabel) {
-                return nothing;
-            }
-            return html `
-      <section class="extensions">${this.renderExtends(typeLabel)} ${this.renderTraits(traitsLabel)}</section>
-    `;
-        }
-        /**
-         * @returns The template for the parent resource type.
-         */
-        renderExtends(label) {
-            if (!label) {
-                return nothing;
-            }
-            return html `<span>Implements </span
-      ><span class="resource-type-name text-selectable" title="Resource type applied to this endpoint">${label}</span>.`;
-        }
-        /**
-         * @returns The template for the traits applied to the resource.
-         */
-        renderTraits(label) {
-            if (!label) {
-                return nothing;
-            }
-            return html `<span>Mixes in </span><span class="trait-name text-selectable">${label}</span>.`;
-        }
-    };
-})();
-/**
- * A web component that renders the resource documentation page for an API resource built from
- * the AMF graph model.
- *
- * @fires tryit
- */
-export default ApiResourceDocument;
-//# sourceMappingURL=ApiResourceDocument.element.js.map