@api-client/ui 0.0.1

package/dist/elements/amf/ApiRequestEditor.element.js

@@ -0,0 +1,1684 @@
+import { __decorate } from "tslib";
+import { html, nothing } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { uuidV4, Headers, EventUtils, Events as CoreEvents, Request, HttpRequestKind, } from '@api-client/core/build/browser.js';
+import { ensureContentType, generateHeaders } from "../../amf/lib/Utils.js";
+import { cachePayloadValue, getPayloadValue, readCachePayloadValue } from "../../amf/lib/PayloadUtils.js";
+import { applyUrlParameters, applyUrlVariables, computeEndpointUri, applyQueryParamStringToObject } from '../../amf/lib/UrlUtils.js';
+import { AmfInputParser } from '../../amf/lib/AmfInputParser.js';
+import * as InputCache from '../../amf/lib/InputCache.js';
+import { Events } from '../../events/amf/Events.js';
+import { EventTypes } from '../../events/amf/EventTypes.js';
+import { EventTypes as UiEventTypes } from '../../events/EventTypes.js';
+import { ifProperty } from '../../directives/if-property.js';
+import ApiElement from '../ApiElement.js';
+import { AmfParameters } from '../../amf/lib/AmfParameters.js';
+import { AmfSecurity } from '../../amf/lib/AmfSecurity.js';
+import { SnackNotifications } from '../../ui/notification/SnackNotifications.js';
+import '../../define/amf/api-authorization-editor.js';
+import '../../define/amf/api-server-picker.js';
+import '../../define/http/http-body-urlencoded-editor.js';
+import '../../define/http/http-body-multipart-editor.js';
+import '../../define/http/http-body-text-editor.js';
+import '../../define/ui/ui-icon.js';
+import '../../define/ui/ui-text-field.js';
+import '../../define/ui/ui-switch.js';
+import '../../define/ui/ui-button.js';
+import '../../define/ui/ui-dropdown-list.js';
+import '../../define/ui/ui-list.js';
+import '../../define/ui/ui-list-item.js';
+import '../../define/ui/ui-progress.js';
+export const EventCategory = 'API Request editor';
+/**
+ * @fires amfstoreopget - Dispatched when querying for an operation data
+ * @fires amfstoreopgetparent - Dispatched when querying for an operation data for an endpoint
+ * @fires amfstoreendpointget - Dispatched when querying for an endpoint data
+ * @fires apistoreserverquery - Dispatched when querying for API servers
+ * @fires amfstoreapiprotocols - Dispatched when querying for API protocols
+ * @fires amfstoreapiversion - Dispatched when querying for API version
+ * @fires response - Dispatched when the response was received by the editor.
+ */
+export default class ApiRequestEditor extends ApiElement {
+    /**
+     * The currently selected media type for the payloads.
+     * @attribute
+     */
+    mimeType;
+    /**
+     * When set it renders a label with the computed URL.
+     * @attribute
+     */
+    urlLabel;
+    /**
+     * When set it renders the URL input above the URL parameters.
+     * @attribute
+     */
+    urlEditor;
+    /**
+     * If set it computes `hasOptional` property and shows checkbox in the
+     * form to show / hide optional properties.
+     * @attribute
+     */
+    allowHideOptional;
+    /**
+     * When set, renders "add custom" item button.
+     * 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
+     */
+    allowCustom;
+    /**
+     * OAuth2 redirect URI.
+     * This value **must** be set in order for OAuth 1/2 to work properly.
+     * @attribute
+     */
+    redirectUri;
+    /**
+     * Final request URL including settings like `baseUri`, AMF
+     * model settings and user provided parameters.
+     * @attribute
+     */
+    url;
+    /**
+     * Holds the value of the currently selected server
+     * Data type: URI
+     * @attribute
+     */
+    serverValue;
+    /**
+     * Holds the type of the currently selected server
+     * Values: `server` | `uri` | `custom`
+     * @attribute
+     */
+    serverType;
+    /**
+     * Optional property to set
+     * If true, the server selector is not rendered
+     * @attribute
+     */
+    noServerSelector;
+    /**
+     * Optional property to set
+     * If true, the server selector custom base URI option is rendered
+     * @attribute
+     */
+    allowCustomBaseUri;
+    /**
+     * List of credentials source
+     */
+    credentialsSource;
+    /**
+     * The domain id key of the selected security
+     * @attribute
+     */
+    selectedSecurity;
+    /**
+     * Optional. The parent endpoint id. When set it uses this value to query for the endpoint
+     * instead of querying for a parent through the operation id.
+     * Also, when `endpoint` is set and the `endpointId` match then it ignores querying for
+     * the endpoint.
+     * @attribute
+     */
+    endpointId;
+    domainIdValue;
+    /**
+     * The domain id (AMF id) of the rendered operation.
+     * @attribute
+     */
+    get domainId() {
+        return this.domainIdValue;
+    }
+    set domainId(value) {
+        const old = this.domainIdValue;
+        /* istanbul ignore if */
+        if (old === value) {
+            return;
+        }
+        this.domainIdValue = value;
+        this.requestUpdate('domainId', old);
+        this.processDebounce();
+    }
+    endpointValue;
+    get endpoint() {
+        return this.endpointValue;
+    }
+    set endpoint(value) {
+        const old = this.endpointValue;
+        if (old === value) {
+            return;
+        }
+        this.endpointValue = value;
+        this.requestUpdate();
+        this.readUrlData();
+        this.notifyChange();
+    }
+    /**
+     * The HTTP method name.
+     */
+    get httpMethod() {
+        const op = this.operationValue;
+        if (!op) {
+            return undefined;
+        }
+        return op.method;
+    }
+    /**
+     * A flag set when the request is being made.
+     */
+    loadingRequest;
+    baseUriValue;
+    /**
+     * A base URI for the API. To be set if RAML spec is missing `baseUri`
+     * declaration and this produces invalid URL input. This information
+     * is passed to the URL editor that prefixes the URL with `baseUri` value
+     * if passed URL is a relative URL.
+     * @attribute
+     */
+    get baseUri() {
+        return this.baseUriValue;
+    }
+    set baseUri(value) {
+        const old = this.baseUriValue;
+        if (old === value) {
+            return;
+        }
+        this.baseUriValue = value;
+        this.readUrlData();
+        this.requestUpdate('baseUri', old);
+    }
+    serversValue;
+    /**
+     * The computed list of servers.
+     */
+    get servers() {
+        return this.serversValue;
+    }
+    serverLocalValue;
+    get server() {
+        return this.serverLocalValue;
+    }
+    /**
+     * This is the final computed value for the baseUri to propagate downwards
+     * If baseUri is defined, return baseUri
+     * Else, return the selectedServerValue if serverType is not `server`
+     */
+    get effectiveBaseUri() {
+        if (this.baseUri) {
+            return this.baseUri;
+        }
+        if (this.serverType !== 'server') {
+            return this.serverValue;
+        }
+        return '';
+    }
+    /**
+     * @return True when there is not enough servers to render the selector
+     */
+    get serverSelectorHidden() {
+        const { serversCount = 0, noServerSelector = false, allowCustomBaseUri } = this;
+        return noServerSelector || (!allowCustomBaseUri && serversCount < 2);
+    }
+    /**
+     * The list of security list items to render.
+     * An operation may have multiple security definition in an or/and fashion.
+     * This allows to render the selector to pick the current security.
+     */
+    securityList;
+    /**
+     * The security requirement for the operation or undefined.
+     */
+    get security() {
+        const items = this.securityList;
+        if (Array.isArray(items) && items.length) {
+            return items;
+        }
+        return undefined;
+    }
+    /**
+     * The currently rendered payload, if any.
+     */
+    get payload() {
+        const { payloads } = this;
+        if (!payloads) {
+            return undefined;
+        }
+        const { mimeType } = this;
+        let payload;
+        if (mimeType) {
+            payload = payloads.find(i => i.mediaType === mimeType);
+        }
+        if (!payload) {
+            [payload] = payloads;
+        }
+        return payload;
+    }
+    /**
+     * The list of all possible payloads for this operation.
+     */
+    get payloads() {
+        const operation = this.operationValue;
+        if (!operation) {
+            return undefined;
+        }
+        const { request } = operation;
+        if (!request) {
+            return undefined;
+        }
+        const { payloads } = request;
+        if (!Array.isArray(payloads) || !payloads.length) {
+            return undefined;
+        }
+        return payloads;
+    }
+    /**
+     * @returns API defined base URI (current server + the endpoint)
+     */
+    get apiBaseUri() {
+        const endpoint = this.endpointValue;
+        const server = this.serverLocalValue;
+        if (!server || !endpoint) {
+            return undefined;
+        }
+        const { path = '' } = endpoint;
+        let { url = '' } = server;
+        if (url.endsWith('/')) {
+            url = url.substr(0, url.length - 1);
+        }
+        return `${url}${path}`;
+    }
+    urlInvalidValue;
+    /**
+     * True when the URL input is invalid.
+     */
+    get urlInvalid() {
+        return this.urlInvalidValue;
+    }
+    protocolsValue;
+    /**
+     * The API's protocols.
+     */
+    get protocols() {
+        return this.protocolsValue;
+    }
+    versionValue;
+    /**
+     * The API's version.
+     */
+    get version() {
+        return this.versionValue;
+    }
+    queryDebouncerTimeout;
+    /**
+     * Set when the selection change, this is a JS object created form the
+     * supportedOperation definition of the AMF graph.
+     */
+    operationValue;
+    /**
+     * The list of parameter groups that are opened when `allowHideOptional` is set.
+     */
+    openedOptional;
+    debounceValue;
+    urlSearchRegexpValue;
+    serversCount;
+    amfParameters;
+    /**
+     * This is set while the HTTP request is being executed.
+     * It allows to abort the request.
+     */
+    requestController;
+    /**
+     * @constructor
+     */
+    constructor() {
+        super();
+        /**
+         * The timeout after which the `queryGraph()` function is called
+         * in the debouncer.
+         */
+        this.queryDebouncerTimeout = 1;
+        this.authRedirectChangedHandler = this.authRedirectChangedHandler.bind(this);
+        this.populateAnnotatedFieldsHandler = this.populateAnnotatedFieldsHandler.bind(this);
+        this.openedOptional = [];
+        this.amfParameters = new AmfParameters(this);
+        this.amfParameters.addEventListener('render', () => this.requestUpdate());
+        this.amfParameters.addEventListener('change', () => this.notifyChange());
+        this.amfParameters.addEventListener('paramchange', this.paramChangeHandler.bind(this));
+        InputCache.registerLocal(this);
+        this.graphChangeHandler = this.graphChangeHandler.bind(this);
+        this.addEventListener(UiEventTypes.Http.Request.send, this.internalSendHandler.bind(this));
+    }
+    notifyChange() {
+        this.dispatchEvent(new Event('change'));
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.processDebounce();
+        this.amfParameters.globalCache = true;
+        const node = this.eventsTarget;
+        node.addEventListener(EventTypes.Store.graphChange, this.graphChangeHandler);
+        node.addEventListener(EventTypes.Request.redirectUriChange, this.authRedirectChangedHandler);
+        node.addEventListener(EventTypes.Request.populateAnnotatedFields, this.populateAnnotatedFieldsHandler);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        if (this.debounceValue) {
+            clearTimeout(this.debounceValue);
+            this.debounceValue = undefined;
+        }
+        const node = this.eventsTarget;
+        node.removeEventListener(EventTypes.Store.graphChange, this.graphChangeHandler);
+        node.removeEventListener(EventTypes.Request.redirectUriChange, this.authRedirectChangedHandler);
+        node.removeEventListener(EventTypes.Request.populateAnnotatedFields, this.populateAnnotatedFieldsHandler);
+    }
+    /**
+     * Handler for the event dispatched by the store when the graph model change.
+     */
+    graphChangeHandler() {
+        this.processDebounce();
+    }
+    /**
+     * Calls the `queryGraph()` function in a debouncer.
+     */
+    processDebounce() {
+        if (this.debounceValue) {
+            clearTimeout(this.debounceValue);
+        }
+        this.debounceValue = setTimeout(() => {
+            this.debounceValue = undefined;
+            this.processGraph();
+        }, this.queryDebouncerTimeout);
+    }
+    /**
+     * Reads the URL data from the ApiUrlDataModel library and sets local variables.
+     */
+    readUrlData() {
+        this.updateServerParameters();
+        this.orderPathParameters();
+        this.computeUrlValue();
+    }
+    /**
+     * It makes sure that the path parameters are rendered in order (server, endpoint) and in order of occurrence in the URL.
+     */
+    orderPathParameters() {
+        const params = this.getOrderedPathParams();
+        if (!params || !params.length) {
+            return;
+        }
+        const { amfParameters } = this;
+        amfParameters.parametersValue = amfParameters.parametersValue.filter(item => item.binding !== 'path');
+        amfParameters.parametersValue = amfParameters.parametersValue.concat(params);
+    }
+    paramChangeHandler(e) {
+        this.paramChanged(e.detail);
+    }
+    /**
+     * A function to be overwritten by child classes to execute an action when a parameter has changed.
+     */
+    paramChanged(key) {
+        this.computeUrlValue();
+        this.validateUrl();
+        const { amfParameters } = this;
+        const param = amfParameters.parametersValue.find(p => p.paramId === key);
+        if (param && param.binding === 'header' && (param.parameter.name || '').toLocaleLowerCase() === 'content-type') {
+            const value = InputCache.get(this, param.paramId, true);
+            this.mimeType = value;
+        }
+    }
+    /**
+     * Computes the URL value for the current serves, selected server, and endpoint's path.
+     */
+    computeUrlValue() {
+        const { effectiveBaseUri, server, protocols, version } = this;
+        const endpoint = this.endpointValue;
+        const result = computeEndpointUri({
+            baseUri: effectiveBaseUri,
+            server,
+            endpoint,
+            protocols,
+            version,
+            forceHttpProtocol: true,
+        });
+        const { amfParameters } = this;
+        const params = amfParameters.parametersValue.map(p => p.parameter);
+        const report = AmfInputParser.reportRequestInputs(params, InputCache.getStore(this, true), amfParameters.nilValues);
+        let url = applyUrlVariables(result, report.path, true);
+        url = applyUrlParameters(url, report.query, true);
+        this.url = url;
+    }
+    /**
+     * Checks if the current server has variables and update the parameters array
+     */
+    updateServerParameters() {
+        const { server } = this;
+        const source = 'server';
+        const { amfParameters } = this;
+        // clears previously set request parameters related to server configuration.
+        amfParameters.parametersValue = amfParameters.parametersValue.filter(item => item.source !== source);
+        if (!server || ['custom', 'uri'].includes(this.serverType || '')) {
+            // we don't need to compute server variables for a custom URLs.
+            return;
+        }
+        if (Array.isArray(server.variables) && server.variables.length) {
+            server.variables.forEach((param) => {
+                const item = {
+                    binding: param.binding || '',
+                    paramId: param.id,
+                    parameter: param,
+                    source,
+                };
+                if (param.schema) {
+                    item.schema = param.schema;
+                    item.schemaId = param.schema.id;
+                }
+                amfParameters.parametersValue.push(item);
+            });
+        }
+    }
+    /**
+     * Checks if the current endpoint has variables and requests them when needed.
+     */
+    updateEndpointParameters() {
+        const source = 'endpoint';
+        const { amfParameters } = this;
+        // clears previously set request parameters related to server configuration.
+        amfParameters.parametersValue = amfParameters.parametersValue.filter(item => item.source !== source);
+        const endpoint = this.endpointValue;
+        if (!endpoint) {
+            // we don't need to compute endpoint variables for a custom URLs.
+            return;
+        }
+        if (Array.isArray(endpoint.parameters) && endpoint.parameters.length) {
+            endpoint.parameters.forEach((param) => {
+                const item = {
+                    binding: param.binding || '',
+                    paramId: param.id,
+                    parameter: param,
+                    source,
+                };
+                if (param.schema) {
+                    item.schema = param.schema;
+                    item.schemaId = param.schema.id;
+                }
+                amfParameters.parametersValue.push(item);
+            });
+        }
+    }
+    reset() {
+        this.securityList = undefined;
+        this.mimeType = undefined;
+        this.amfParameters.parametersValue = [];
+    }
+    /**
+     * Processes the selection of the domain id for an operation.
+     */
+    async processGraph() {
+        await this.queryEndpoint();
+        await this.queryOperation();
+        await this.queryServers();
+        await this.queryProtocols();
+        this.processEndpoint();
+        this.processOperation();
+        this.processSecurity();
+        this.processPayload();
+        this.computeUrlValue();
+        this.readUrlData();
+        this.notifyChange();
+    }
+    /**
+     * Queries the store for the operation data, when needed.
+     */
+    async queryOperation() {
+        const { domainId } = this;
+        if (!domainId || domainId === 'undefined') {
+            // this.operationValue = undefined;
+            return;
+        }
+        if (this.operationValue && this.operationValue.id === domainId) {
+            // in case the operation model was provided via the property setter.
+            return;
+        }
+        try {
+            const endpointId = this.endpointValue && this.endpointValue.id;
+            const info = await Events.Operation.get(this, domainId, endpointId);
+            this.operationValue = info;
+        }
+        catch (e) {
+            const ex = e;
+            Events.Telemetry.exception(this, ex.message, false);
+            Events.Reporting.error(this, ex, `Unable to query for API operation data: ${ex.message}`, this.localName);
+        }
+    }
+    /**
+     * Queries the store for the endpoint data.
+     * @returns {Promise<void>}
+     */
+    async queryEndpoint() {
+        const { domainId, endpointId } = this;
+        if (!domainId || domainId === 'undefined') {
+            // this.endpointValue = undefined;
+            return;
+        }
+        if (this.endpointValue && this.endpointValue.id === endpointId) {
+            // in case the endpoint model was provided via the property setter.
+            return;
+        }
+        this.endpointValue = undefined;
+        try {
+            const info = await (endpointId ? Events.Endpoint.get(this, endpointId) : Events.Operation.getParent(this, domainId));
+            this.endpointValue = info;
+        }
+        catch (e) {
+            const ex = e;
+            Events.Telemetry.exception(this, ex.message, false);
+            Events.Reporting.error(this, ex, `Unable to query for API endpoint data: ${ex.message}`, this.localName);
+        }
+    }
+    /**
+     * Queries for the current servers value.
+     */
+    async queryServers() {
+        const { domainId } = this;
+        const endpointId = this.endpointValue && this.endpointValue.id;
+        try {
+            const info = await Events.Server.query(this, {
+                endpointId,
+                methodId: domainId,
+            });
+            this.serversValue = info || undefined;
+        }
+        catch (e) {
+            const ex = e;
+            this.serversValue = undefined;
+            Events.Telemetry.exception(this, ex.message, false);
+            Events.Reporting.error(this, ex, `Unable to query for API servers: ${ex.message}`, this.localName);
+        }
+    }
+    /**
+     * Queries the API store for the API protocols list.
+     */
+    async queryProtocols() {
+        this.protocolsValue = undefined;
+        try {
+            const info = await Events.Api.protocols(this);
+            this.protocolsValue = info;
+        }
+        catch (e) {
+            const ex = e;
+            Events.Telemetry.exception(this, ex.message, false);
+            Events.Reporting.error(this, ex, `Unable to query for API protocols list: ${ex.message}`, this.localName);
+        }
+    }
+    /**
+     * Searches for the current operation endpoint and sets variables from the endpoint definition.
+     */
+    processEndpoint() {
+        this.updateEndpointParameters();
+        this.computeUrlRegexp();
+    }
+    /**
+     * Collects operations input parameters into a single object.
+     */
+    processOperation() {
+        const source = 'request';
+        const operation = this.operationValue;
+        const { amfParameters } = this;
+        // clears previously set request parameters (query, path, headers)
+        amfParameters.parametersValue = amfParameters.parametersValue.filter(item => item.source !== source);
+        if (!operation) {
+            return;
+        }
+        const { request } = operation;
+        if (!request) {
+            return;
+        }
+        const uri = [];
+        if (Array.isArray(request.uriParameters)) {
+            // OAS has this weird thing where you can define URI parameters on the endpoint and the operation.
+            // this eliminates the duplicates and merges the schemas
+            request.uriParameters.forEach((param) => {
+                if (!param.paramName) {
+                    uri.push(param);
+                    return;
+                }
+                const index = amfParameters.parametersValue.findIndex(p => p.binding === 'path' && p.parameter.paramName === param.paramName);
+                if (index !== -1) {
+                    // remove the parameter that is being replaced by the local definition
+                    amfParameters.parametersValue.splice(index, 1);
+                }
+                uri.push(param);
+            });
+        }
+        this.appendToParams(uri, source);
+        this.appendToParams(request.queryParameters, source);
+        this.appendToParams(request.headers, source);
+        this.appendToParams(request.cookieParameters, source);
+    }
+    /**
+     * Processes security information for the UI.
+     */
+    processSecurity() {
+        const operation = this.operationValue;
+        if (!operation) {
+            return;
+        }
+        const { security } = operation;
+        this.securityList = AmfSecurity.readSecurityList(security);
+        const [first] = this.securityList;
+        this.selectedSecurity = first ? first.security.id : undefined;
+    }
+    /**
+     * Makes sure the correct mime type is selected for the current selection.
+     */
+    processPayload() {
+        const operation = this.operationValue;
+        if (!operation) {
+            return;
+        }
+        const { request } = operation;
+        if (!request) {
+            return;
+        }
+        const { payloads = [] } = request;
+        if (!payloads.length) {
+            return;
+        }
+        let mime = this.mimeType;
+        if (mime) {
+            const has = payloads.find(p => p.mediaType === mime);
+            if (!has) {
+                mime = undefined;
+            }
+        }
+        if (!mime) {
+            const first = payloads.find(p => p.mediaType);
+            if (first) {
+                mime = first.mediaType;
+            }
+        }
+        this.mimeType = mime;
+    }
+    /**
+     * Appends a list of parameters to the list of rendered parameters
+     */
+    appendToParams(list, source) {
+        const params = this.amfParameters.parametersValue;
+        if (Array.isArray(list)) {
+            list.forEach((param) => {
+                params.push({
+                    paramId: param.id,
+                    parameter: param,
+                    binding: param.binding || '',
+                    source,
+                    schema: param.schema,
+                    schemaId: param.schema && param.schema.id ? param.schema.id : undefined,
+                });
+            });
+        }
+    }
+    /**
+     * A handler for the change event dispatched by the `raw` editor.
+     */
+    rawBodyChangeHandler(e) {
+        const editor = e.target;
+        const { value, dataset } = editor;
+        const { payloadId } = dataset;
+        if (!payloadId) {
+            return;
+        }
+        cachePayloadValue(payloadId, value);
+    }
+    /**
+     * A handler for the change event dispatched by the
+     * `urlEncode` editor.
+     * Updated the local value, model, and notifies the change.
+     */
+    modelBodyEditorChangeHandler(e) {
+        const editor = e.target;
+        const { value, model, dataset } = editor;
+        const { payloadId } = dataset;
+        if (!payloadId) {
+            return;
+        }
+        cachePayloadValue(payloadId, value, model);
+    }
+    handleAuthSelect(e) {
+        const { item } = e.detail;
+        const { id } = item.dataset;
+        if (!id) {
+            return;
+        }
+        this.selectedSecurity = id;
+        this.requestUpdate();
+    }
+    /**
+     * Handles send button click.
+     * Depending on authorization validity it either sends the
+     * request or forces authorization and sends the request.
+     */
+    sendHandler() {
+        this.execute();
+    }
+    /**
+     * To be called when the user want to execute the request but
+     * authorization is invalid (missing values).
+     * This function brings the auth panel to front and displays error toast
+     */
+    async authAndExecute() {
+        const { shadowRoot } = this;
+        if (!shadowRoot) {
+            throw new Error(`Invalid state. The element is not initialized.`);
+        }
+        const panel = shadowRoot.querySelector('api-authorization-editor');
+        if (!panel) {
+            throw new Error(`Invalid state. The authorization editor element was removed from the DOM.`);
+        }
+        await panel.authorize();
+        const valid = panel.validate();
+        if (valid) {
+            this.execute();
+        }
+    }
+    async proxyRequest(init) {
+        let result;
+        try {
+            result = await CoreEvents.Transport.Core.request(init, this);
+        }
+        catch (e) {
+            // ...
+        }
+        return result;
+    }
+    /**
+     * Proxies the request to the endpoint using the core libraries.
+     */
+    async execute() {
+        if (this.loadingRequest) {
+            this.abort();
+        }
+        Events.Telemetry.event(this, {
+            category: EventCategory,
+            action: 'request-execute',
+            label: 'true'
+        });
+        const request = await this.serialize();
+        const ctrl = new AbortController();
+        this.requestController = ctrl;
+        const init = {
+            kind: HttpRequestKind,
+            request: request.expects,
+            authorization: request.authorization,
+            signal: ctrl.signal,
+        };
+        this.loadingRequest = true;
+        const result = await this.proxyRequest(init);
+        this.loadingRequest = false;
+        if (!result) {
+            if (ctrl.signal.aborted) {
+                return;
+            }
+            const message = `The request was not sent. Proxy not available.`;
+            SnackNotifications.notify(message, { timeout: 2000, close: true });
+            throw new Error(message);
+        }
+        this.dispatchEvent(new CustomEvent('response', { detail: result.result }));
+    }
+    /**
+     * Uses the `requestController` to abort the ongoing HTTP request.
+     */
+    abort() {
+        Events.Telemetry.event(this, {
+            category: EventCategory,
+            action: 'request-abort',
+            label: 'true'
+        });
+        const { requestController } = this;
+        if (!requestController) {
+            return;
+        }
+        requestController.abort();
+        this.requestController = undefined;
+        this.loadingRequest = false;
+    }
+    /**
+     * Event handler for abort click.
+     */
+    abortHandler() {
+        this.abort();
+    }
+    /**
+     * Serializes the state of the request editor into the `ApiConsoleRequest` object.
+     */
+    async serialize() {
+        const op = this.operationValue;
+        if (!op) {
+            throw new Error(`No API operation defined on the editor`);
+        }
+        const method = (op.method || 'get').toUpperCase();
+        const params = [];
+        const { amfParameters } = this;
+        amfParameters.parametersValue.forEach((item) => {
+            const { parameter, enabled } = item;
+            if (enabled === false) {
+                return;
+            }
+            params.push(parameter);
+        });
+        const report = AmfInputParser.reportRequestInputs(params, InputCache.getStore(this, true), amfParameters.nilValues);
+        const serverUrl = computeEndpointUri({
+            baseUri: this.effectiveBaseUri,
+            server: this.server,
+            endpoint: this.endpointValue,
+            protocols: this.protocols,
+            forceHttpProtocol: true,
+        });
+        let url = applyUrlVariables(serverUrl, report.path, true);
+        url = applyUrlParameters(url, report.query, true);
+        const headers = generateHeaders(report.header);
+        const instance = new Request();
+        const expects = instance.getExpects();
+        expects.method = method;
+        expects.url = url;
+        expects.headers = headers;
+        if (!['GET', 'HEAD'].includes(method)) {
+            let body;
+            const { payload } = this;
+            if (payload) {
+                const info = readCachePayloadValue(payload.id);
+                if (info && info.value) {
+                    body = info.value;
+                }
+            }
+            if (body instanceof FormData) {
+                const parser = new Headers(expects.headers);
+                parser.delete('content-type');
+                expects.headers = parser.toString();
+            }
+            else if (payload) {
+                expects.headers = ensureContentType(expects.headers || '', payload.mediaType);
+            }
+            if (typeof body !== 'undefined') {
+                await expects.writePayload(body);
+            }
+        }
+        const result = instance.toJSON();
+        const authElement = this.shadowRoot?.querySelector('api-authorization-editor');
+        if (authElement) {
+            const auth = authElement.serialize();
+            result.authorization = auth;
+        }
+        return result;
+    }
+    /**
+     * Handler for the `oauth2-redirect-uri-changed` custom event. Changes
+     * the `redirectUri` property.
+     */
+    authRedirectChangedHandler(e) {
+        this.redirectUri = e.detail.value;
+    }
+    /**
+     * Handle event for populating annotated fields in the editor.
+     */
+    populateAnnotatedFieldsHandler(e) {
+        const populationInfoArray = e.detail.values;
+        const { parametersValue = [] } = this.amfParameters;
+        const allAnnotated = parametersValue.filter(param => Array.isArray(param.parameter.customDomainProperties) && !!param.parameter.customDomainProperties.length);
+        let update = false;
+        populationInfoArray.forEach(({ annotationName, annotationValue, fieldValue }) => {
+            allAnnotated.forEach((item) => {
+                const { parameter, paramId } = item;
+                const hasAnnotation = (parameter.customDomainProperties || []).some((prop) => prop.name === annotationName && prop.extension.value === annotationValue);
+                if (!hasAnnotation) {
+                    return;
+                }
+                InputCache.set(this, paramId, fieldValue, true);
+                update = true;
+            });
+        });
+        if (update) {
+            this.requestUpdate();
+        }
+        /* @TODO populate values for the security schema. */
+    }
+    /**
+     * Computes a current server value for selection made in the server selector.
+     */
+    updateServer() {
+        const { serverValue, serverType, servers = [] } = this;
+        if (serverType !== 'server') {
+            this.serverLocalValue = undefined;
+        }
+        else {
+            this.serverLocalValue = servers.find(server => server.url === serverValue);
+        }
+        this.readUrlData();
+        this.computeUrlRegexp();
+    }
+    /**
+     * Handler for the change dispatched from the server selector.
+     */
+    serverCountHandler(e) {
+        const { value = 0 } = e.detail;
+        this.serversCount = value;
+        this.updateServer();
+        this.requestUpdate();
+    }
+    /**
+     * Handler for the change dispatched from the server selector.
+     */
+    serverHandler(e) {
+        const { value, type } = e.detail;
+        this.serverType = type;
+        this.serverValue = value;
+        this.updateServer();
+        this.computeUrlRegexp();
+    }
+    /**
+     * Computes a regexp for the base URI defined in the server to process URL input change
+     * and set the `.urlSearchRegexpValue` value.
+     * This should be computed only when a server and en endpoint change.
+     */
+    computeUrlRegexp() {
+        const { effectiveBaseUri } = this;
+        let value;
+        if (effectiveBaseUri) {
+            value = computeEndpointUri({
+                baseUri: effectiveBaseUri,
+                endpoint: this.endpointValue,
+                forceHttpProtocol: true,
+            });
+        }
+        else {
+            value = this.apiBaseUri;
+        }
+        if (!value) {
+            this.urlSearchRegexpValue = undefined;
+        }
+        else {
+            value = value.replace('?', '\\?');
+            value = value.replace(/(\.|\/)/g, '\\$1');
+            value = value.replace(/{[\w\\+]+}/g, '([a-zA-Z0-9\\$\\-_\\.~\\+!\'\\(\\)\\*\\{\\}]+)');
+            value += '.*';
+            this.urlSearchRegexpValue = new RegExp(value);
+        }
+    }
+    handleMediaTypeSelect(e) {
+        const node = e.target;
+        const { value } = node;
+        this.mimeType = value;
+        const ctParam = this.amfParameters.parametersValue.find(p => p.binding === 'header' && (p.parameter.name || '').toLocaleLowerCase() === 'content-type');
+        if (ctParam) {
+            InputCache.set(this, ctParam.paramId, value, true);
+        }
+    }
+    async notifyResizeAfterUpdate() {
+        await this.updateComplete;
+        this.dispatchEvent(new Event('resize', { bubbles: true, composed: true }));
+    }
+    /**
+     * Toggles optional parameter groups.
+     */
+    handleOptionalToggle(e) {
+        const node = e.target;
+        const { target } = node.dataset;
+        if (!target) {
+            return;
+        }
+        if (!Array.isArray(this.openedOptional)) {
+            this.openedOptional = [];
+        }
+        if (this.openedOptional.includes(target)) {
+            const index = this.openedOptional.indexOf(target);
+            this.openedOptional.splice(index, 1);
+        }
+        else {
+            this.openedOptional.push(target);
+        }
+        this.requestUpdate();
+        this.notifyResizeAfterUpdate();
+    }
+    /**
+     * When enabled it adds a new custom parameter to the request section defined in the source button.
+     */
+    addCustomHandler(e) {
+        const button = e.currentTarget;
+        const { type } = button.dataset;
+        if (!['query', 'header'].includes(type)) {
+            return;
+        }
+        const id = uuidV4();
+        const param = {
+            binding: type || '',
+            source: 'custom',
+            paramId: id,
+            parameter: {
+                id,
+                required: true,
+                binding: type,
+                name: '',
+                examples: [],
+                payloads: [],
+                customDomainProperties: [],
+                types: [],
+            },
+        };
+        this.amfParameters.parametersValue.push(param);
+        this.requestUpdate();
+    }
+    /**
+     * Updates path/query model from user input.
+     *
+     * @param e The change event
+     */
+    handleUrlEditorChange(e) {
+        const { value } = e.target;
+        let matches;
+        const uriRegexp = this.urlSearchRegexpValue;
+        // parameters must be in order from server to the endpoint
+        const pathParams = this.getOrderedPathParams();
+        let changed = false;
+        if (pathParams.length && uriRegexp) {
+            matches = value.match(uriRegexp);
+            if (matches) {
+                matches.shift();
+                changed = this.applyUriValues(matches, pathParams);
+            }
+        }
+        const matchesNew = value.match(/[^&?]*?=[^&?]*/g);
+        if (matchesNew) {
+            const params = {};
+            matchesNew.forEach((item) => applyQueryParamStringToObject(item, params));
+            const qpChanged = this.applyQueryParamsValues(params);
+            if (!changed) {
+                changed = qpChanged;
+            }
+        }
+        this.url = value;
+        this.validateUrl();
+        this.notifyChange();
+        this.requestUpdate();
+    }
+    /**
+     * Sets the value of `.urlInvalidValue` and therefore `urlInvalid` properties.
+     */
+    validateUrl() {
+        this.urlInvalidValue = !this.readUrlValidity();
+        this.requestUpdate();
+    }
+    /**
+     * Validates the current URL value.
+     * @returns True when the current URL is a valid URL.
+     */
+    readUrlValidity() {
+        const { url } = this;
+        if (!url) {
+            return false;
+        }
+        if (typeof url !== 'string') {
+            return false;
+        }
+        if (url.indexOf('{') !== -1 && url.indexOf('}') !== -1) {
+            return false;
+        }
+        const { shadowRoot } = this;
+        if (!shadowRoot) {
+            return true;
+        }
+        const inputElement = shadowRoot.querySelector('.url-input');
+        if (inputElement) {
+            return inputElement.reportValidity();
+        }
+        return true;
+    }
+    /**
+     * Reads the ordered list of path parameters from the server and the endpoint.
+     */
+    getOrderedPathParams() {
+        const result = [];
+        const { effectiveBaseUri } = this;
+        let url;
+        if (effectiveBaseUri) {
+            url = computeEndpointUri({
+                baseUri: effectiveBaseUri,
+                endpoint: this.endpointValue,
+                forceHttpProtocol: true,
+            });
+        }
+        else {
+            url = this.apiBaseUri;
+        }
+        if (!url) {
+            return result;
+        }
+        const matches = url.match(/{[\w\\+]+}/g);
+        if (!matches) {
+            return result;
+        }
+        const all = this.amfParameters.parametersValue;
+        matches.forEach((tpl) => {
+            const name = tpl.substr(1, tpl.length - 2);
+            const param = all.find(p => p.binding === 'path' && p.parameter.name === name);
+            if (param) {
+                result.push(param);
+            }
+        });
+        return result;
+    }
+    /**
+     * Applies values from the `values` array to the uri parameters which names are in the `names` array.
+     * Both lists are ordered list of parameters.
+     *
+     * @param values Values for the parameters
+     * @param params List of path parameters.
+     * @returns True when any parameter was changed.
+     */
+    applyUriValues(values, params) {
+        let changed = false;
+        for (let i = 0, len = params.length; i < len; i++) {
+            const value = values[i];
+            if (value && value[0] === '{') {
+                // This is still a variable
+                continue;
+            }
+            const param = params[i];
+            if (InputCache.get(this, param.paramId, true) !== value) {
+                InputCache.set(this, param.paramId, value, true);
+                changed = true;
+            }
+        }
+        return changed;
+    }
+    /**
+     * Applies query parameters values to the render list.
+     *
+     * @returns True when any parameter was changed.
+     */
+    applyQueryParamsValues(map) {
+        if (!map) {
+            return false;
+        }
+        const keys = Object.keys(map);
+        let changed = false;
+        keys.forEach((key) => {
+            const value = map[key];
+            if (value && value[0] === '{') {
+                // This is still a variable
+                return;
+            }
+            const param = this.amfParameters.parametersValue.find(p => p.binding === 'query' && p.parameter.name === key);
+            if (param) {
+                if (InputCache.get(this, param.paramId, true) !== value) {
+                    InputCache.set(this, param.paramId, value, true);
+                    changed = true;
+                }
+            }
+        });
+        return changed;
+    }
+    internalSendHandler(e) {
+        e.stopPropagation();
+        this.execute();
+    }
+    /**
+     * A handler for the change event on the authorization panel.
+     */
+    authorizationChangeHandler() {
+        this.notifyChange();
+    }
+    render() {
+        return html `
+    <div class="content">
+      ${this.serverSelectorTemplate()}
+      ${this.urlLabelTemplate()}
+      ${this.renderUrlEditor()}
+      ${this.parametersTemplate()}
+      ${this.headersTemplate()}
+      ${this.mediaTypeSelectorTemplate()}
+      ${this.bodyTemplate()}
+      ${this.authorizationTemplate()}
+      ${this.formActionsTemplate()}
+    </div>`;
+    }
+    /**
+     * @return Template for the request URL label.
+     */
+    urlLabelTemplate() {
+        const { urlLabel, url } = this;
+        if (!urlLabel) {
+            return nothing;
+        }
+        return html `<div class="url-label text-selectable" title="Current request URL">${url}</div>`;
+    }
+    authorizationTemplate() {
+        const { security } = this;
+        if (!security) {
+            return nothing;
+        }
+        const { selectedSecurity, redirectUri, credentialsSource } = this;
+        const rendered = security.find(i => i.security.id === selectedSecurity);
+        if (!rendered) {
+            return nothing;
+        }
+        return html `
+    <section class="authorization params-section">
+      <div class="section-title"><span class="label">Credentials</span></div>
+      ${security.length > 1 ? this.authorizationSelectorTemplate(security, rendered) : ''}
+      <api-authorization-editor 
+        .security="${rendered.security}"
+        .oauth2RedirectUri="${redirectUri}"
+        .credentialsSource="${credentialsSource}"
+        @change="${this.authorizationChangeHandler}"></api-authorization-editor>
+    </section>
+    `;
+    }
+    /**
+     * @returns The template for the security drop down selector.
+     */
+    authorizationSelectorTemplate(security, selected) {
+        const finalValue = selected.labels.join(', ');
+        return html `
+    <ui-dropdown-list
+      class="authorization-selector"
+      closeOnOutsideClick
+      matchTriggerWidth
+      @select="${this.handleAuthSelect}"
+    >
+      <ui-text-field 
+        class="dropdown-trigger" 
+        label="Authorization method" 
+        readOnly 
+        name="authorization"
+        .value="${finalValue || ''}" 
+        @select="${EventUtils.cancelEvent}"
+      >
+        <ui-icon icon="arrowDropDown" role="presentation" slot="suffix"></ui-icon>
+      </ui-text-field>
+      <ui-list slot="dropdown" role="menu" selector="[data-value]" selectActive>
+        ${security.map((item) => this.authorizationSelectorItemTemplate(item))}
+      </ui-list>
+    </ui-dropdown-list>
+    `;
+    }
+    /**
+     * @returns The template for the security drop down selector list item.
+     */
+    authorizationSelectorItemTemplate(info) {
+        const { labels, types, security } = info;
+        const label = labels.join(', ');
+        const type = types.join(', ');
+        const single = !type;
+        return html `
+    <ui-list-item 
+      role="menuitem" 
+      lines="${single ? 'one' : 'two'}"
+      data-id="${security.id}"
+    >
+      ${label}
+      ${!single ? html `<div slot="supporting-text">${type}</div>` : ''}
+    </ui-list-item>
+    `;
+    }
+    formActionsTemplate() {
+        const loading = this.loadingRequest;
+        return html `
+    <div class="action-bar">
+      ${loading ? this.abortButtonTemplate() : this.sendButtonTemplate()}
+      <ui-progress ?hidden="${!loading}" indeterminate class="request-progress"></ui-progress>
+    </div>`;
+    }
+    /**
+     * Creates a template for the "abort" button.
+     */
+    abortButtonTemplate() {
+        return html `
+    <ui-button
+      class="send-button abort"
+      type="filled"
+      @click="${this.abortHandler}"
+    >Abort</ui-button>`;
+    }
+    /**
+     * Creates a template for the "send" or "auth and send" button.
+     */
+    sendButtonTemplate() {
+        return html `
+    <ui-button
+      class="send-button"
+      type="filled"
+      @click="${this.sendHandler}"
+    >Send</ui-button>`;
+    }
+    /**
+     * @return A template for the server selector
+     */
+    serverSelectorTemplate() {
+        const { serverType, serverValue, allowCustomBaseUri, serverSelectorHidden, domainId, } = this;
+        return html `
+    <api-server-picker
+      ?hidden="${serverSelectorHidden}"
+      ?custom="${allowCustomBaseUri}"
+      .value="${serverValue}"
+      .type="${serverType}"
+      .domainId="${domainId}"
+      domainType="operation"
+      auto
+      @serverscountchanged="${this.serverCountHandler}"
+      @apiserverchanged="${this.serverHandler}"
+    >
+      <slot name="custom-base-uri" slot="custom-base-uri"></slot>
+    </api-server-picker>`;
+    }
+    /**
+     * @return
+     */
+    parametersTemplate() {
+        const qp = [];
+        const path = [];
+        // NOTE, the "* Required field" has been added after the a11y audit of API Console.
+        let hasRequired = false;
+        const { amfParameters } = this;
+        amfParameters.parametersValue.forEach((item) => {
+            if (!hasRequired && item.parameter && item.parameter.required) {
+                hasRequired = true;
+            }
+            if (item.binding === 'query') {
+                qp.push(item);
+            }
+            else if (item.binding === 'path') {
+                path.push(item);
+            }
+        });
+        const { allowCustom, openedOptional = [] } = this;
+        if (!allowCustom && !qp.length && !path.length) {
+            return nothing;
+        }
+        const pathOptions = Object.freeze({ required: true });
+        const queryClasses = {
+            'query-params': true,
+            'hide-optional': !!this.allowHideOptional && !openedOptional.includes('query'),
+        };
+        return html `
+    <section class="params-section parameter">
+      <div class="section-title"><span class="label">Parameters</span></div>
+      ${hasRequired ? html `<p class="required-field">* Required field</p>` : ''}
+      <div class="path-params">
+        ${path.map(param => amfParameters.parameterTemplate(param, pathOptions))}
+      </div>
+      <div class="${classMap(queryClasses)}">
+        ${this.renderToggleOptional('query', qp)}
+        ${qp.map(param => amfParameters.parameterTemplate(param))}
+        ${allowCustom ? this.addCustomButtonTemplate('query') : ''}
+      </div>
+    </section>
+    `;
+    }
+    headersTemplate() {
+        const headers = [];
+        // NOTE, the "* Required field" has been added after the a11y audit of API Console.
+        let hasRequired = false;
+        const { amfParameters } = this;
+        amfParameters.parametersValue.forEach((item) => {
+            if (item.binding === 'header') {
+                headers.push(item);
+                if (!hasRequired && item.parameter && item.parameter.required) {
+                    hasRequired = true;
+                }
+            }
+        });
+        const { allowCustom, openedOptional = [] } = this;
+        if (!allowCustom && !headers.length) {
+            return nothing;
+        }
+        const classes = {
+            'header-params': true,
+            'hide-optional': !!this.allowHideOptional && !openedOptional.includes('header'),
+        };
+        return html `
+    <section class="params-section header" aria-label="HTTP headers">
+      <div class="section-title"><span class="label">Headers</span></div>
+      ${hasRequired ? html `<p class="required-field">* Required field</p>` : ''}
+      ${this.renderToggleOptional('header', headers)}
+      <div class="${classMap(classes)}">
+        ${headers.map(param => amfParameters.parameterTemplate(param))}
+        ${allowCustom ? this.addCustomButtonTemplate('header') : ''}
+      </div>
+    </section>
+    `;
+    }
+    /**
+     * @returns The template for the add custom parameter button
+     */
+    addCustomButtonTemplate(type) {
+        return html `
+    <div class="add-custom-button">
+      <ui-button
+        data-type="${type}"
+        title="Adds a new custom parameter to the request"
+        @click="${this.addCustomHandler}"
+        type="outlined"
+      >
+        <ui-icon icon="add" role="presentation"></ui-icon>
+        Add custom
+      </ui-button>
+    </div>
+    `;
+    }
+    /**
+     * @return The template for the payload's mime type selector.
+     */
+    mediaTypeSelectorTemplate() {
+        const { payloads, mimeType } = this;
+        if (!payloads || payloads.length === 1) {
+            return nothing;
+        }
+        const mimes = payloads.map(p => p.mediaType);
+        let index = mimes.indexOf(mimeType);
+        if (index === -1) {
+            index = 0;
+        }
+        return html `
+    <div class="payload-mime-selector">
+      <span id="body-mime" class="label-large">Body media type</span>
+      ${mimes.map((item) => html `
+      <label class="label-large">
+        <ui-radio
+          name="mediaTypeValue"
+          value="${item || ''}"
+          .checked="${item === mimeType}"
+          @change="${this.handleMediaTypeSelect}"
+        ></ui-radio>
+        ${item}
+      </label>
+      `)}
+    </div>
+    `;
+    }
+    /**
+     * @returns The template for the body editor.
+     */
+    bodyTemplate() {
+        const { payload } = this;
+        if (!payload) {
+            return nothing;
+        }
+        const info = getPayloadValue(payload);
+        const mimeType = payload.mediaType;
+        let content;
+        if (mimeType === 'application/x-www-form-urlencoded') {
+            content = this.formDataEditorTemplate(info, payload.id);
+        }
+        else if (mimeType === 'multipart/form-data') {
+            content = this.multipartEditorTemplate(info, payload.id);
+        }
+        else {
+            content = this.rawEditorTemplate(info, payload.id, mimeType);
+        }
+        return html `
+    <section class="params-section body" aria-label="HTTP body">
+      <div class="section-title"><span class="label">Body</span></div>
+      ${content}
+    </section>
+    `;
+    }
+    /**
+     * @returns The template for the editor that specializes in the URL encoded form data
+     */
+    formDataEditorTemplate(info, id) {
+        const editorModel = info.model;
+        const effectiveValue = Array.isArray(editorModel) && editorModel.length ? undefined : info.value;
+        return html `
+    <http-body-urlencoded-editor 
+      class="body-editor"
+      autoEncode
+      .value="${ifProperty(effectiveValue)}"
+      .model="${ifProperty(editorModel)}"
+      data-payload-id="${id}"
+      @change="${this.modelBodyEditorChangeHandler}"
+    ></http-body-urlencoded-editor>
+    `;
+    }
+    /**
+     * @returns The template for the editor that specializes in the multipart form data
+     */
+    multipartEditorTemplate(info, id) {
+        const editorModel = info.model;
+        const effectiveValue = Array.isArray(editorModel) && editorModel.length ? undefined : info.value;
+        return html `
+    <http-body-multipart-editor 
+      class="body-editor"
+      .value="${ifProperty(effectiveValue)}"
+      .model="${ifProperty(editorModel)}"
+      data-payload-id="${id}"
+      @change="${this.modelBodyEditorChangeHandler}"
+    ></http-body-multipart-editor>
+    `;
+    }
+    /**
+     * @returns The template for the editor that specializes in any text data
+     */
+    rawEditorTemplate(info, id, mimeType) {
+        let schemas;
+        if (Array.isArray(info.schemas) && info.schemas.length) {
+            schemas = info.schemas;
+        }
+        return html `
+    <http-body-text-editor
+      class="body-editor" 
+      .value="${info.value}" 
+      .contentType="${mimeType}"
+      .schemas="${ifProperty(schemas)}"
+      data-payload-id="${id}"
+      @change="${this.rawBodyChangeHandler}"
+    ></http-body-text-editor>
+    `;
+    }
+    /**
+     * @param target The name of the target parameter group.
+     * @param params The list of parameters. When all are required or empty it won't render then button.
+     * @returns Template for the switch button to toggle visibility of the optional items.
+     */
+    renderToggleOptional(target, params) {
+        const { openedOptional = [], allowHideOptional } = this;
+        if (!allowHideOptional || !params || !params.length) {
+            return nothing;
+        }
+        const optional = params.some(p => !!p.parameter && !p.parameter.required);
+        if (!optional) {
+            return nothing;
+        }
+        const checked = openedOptional.includes(target);
+        return html `
+    <div class="optional-checkbox">
+      <label class="label-large">
+        <ui-switch
+          class="toggle-optional-switch"
+          .checked="${checked}"
+          @change="${this.handleOptionalToggle}"
+          title="Toggles optional parameters"
+          data-target="${target}"
+          name="toggleOptional"
+          aria-label="Toggle optional parameters"
+        ></ui-switch>
+        Show optional parameters
+      </label>
+    </div>
+    `;
+    }
+    /**
+     * @returns A template for the URL editor.
+     */
+    renderUrlEditor() {
+        const { urlEditor, url, urlInvalid } = this;
+        if (!urlEditor) {
+            return nothing;
+        }
+        return html `
+    <div class="url-input-wrapper">
+      <ui-text-field  
+        name="url" 
+        type="url" 
+        class="url-input"
+        ?invalid="${urlInvalid}"
+        required
+        invalidText="The URL is invalid"
+        .value="${url || ''}"
+        @change="${this.handleUrlEditorChange}"
+        @blur="${this.validateUrl}"
+        label="Request URL"
+      ></ui-text-field>
+    </div>
+    `;
+    }
+}
+__decorate([
+    property({ type: String, reflect: true, })
+], ApiRequestEditor.prototype, "mimeType", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], ApiRequestEditor.prototype, "urlLabel", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], ApiRequestEditor.prototype, "urlEditor", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], ApiRequestEditor.prototype, "allowHideOptional", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], ApiRequestEditor.prototype, "allowCustom", void 0);
+__decorate([
+    property({ type: String })
+], ApiRequestEditor.prototype, "redirectUri", void 0);
+__decorate([
+    property({ type: String })
+], ApiRequestEditor.prototype, "url", void 0);
+__decorate([
+    property({ type: String })
+], ApiRequestEditor.prototype, "serverValue", void 0);
+__decorate([
+    property({ type: String })
+], ApiRequestEditor.prototype, "serverType", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], ApiRequestEditor.prototype, "noServerSelector", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], ApiRequestEditor.prototype, "allowCustomBaseUri", void 0);
+__decorate([
+    property({ type: Array })
+], ApiRequestEditor.prototype, "credentialsSource", void 0);
+__decorate([
+    property({ type: String })
+], ApiRequestEditor.prototype, "selectedSecurity", void 0);
+__decorate([
+    property({ type: String })
+], ApiRequestEditor.prototype, "endpointId", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], ApiRequestEditor.prototype, "domainId", null);
+__decorate([
+    state()
+], ApiRequestEditor.prototype, "loadingRequest", void 0);
+__decorate([
+    property({ type: String })
+], ApiRequestEditor.prototype, "baseUri", null);
+//# sourceMappingURL=ApiRequestEditor.element.js.map