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