@api-client/ui 0.0.15 → 0.1.0

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

@@ -0,0 +1,1735 @@
+import { __esDecorate, __runInitializers } from "tslib";
+import { html, nothing } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { nanoid } from 'nanoid';
+import { Headers } from '@api-client/core/lib/headers/Headers.js';
+import { Request } from '@api-client/core/models/Request.js';
+import { Kind as HttpRequestKind } from '@api-client/core/models/HttpRequest.js';
+import { cancelEvent } from '@api-client/core/lib/events/Utils.js';
+import { Events as CoreEvents } from '@api-client/core/events/Events.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 '../../md/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 '../../md/icons/ui-icon.js';
+import '../../md/text-field/ui-text-field.js';
+import '../../md/switch/ui-switch.js';
+import '../../md/button/ui-filled-tonal-button.js';
+import '../../md/button/ui-outlined-button.js';
+import '../../md/dropdown-list/ui-dropdown-list.js';
+import '../../md/list/ui-list.js';
+import '../../md/list/ui-list-item.js';
+import '../../md/progress/ui-progress.js';
+export const EventCategory = 'API Request editor';
+let ApiRequestEditor = (() => {
+    let _classSuper = ApiElement;
+    let _instanceExtraInitializers = [];
+    let _mimeType_decorators;
+    let _mimeType_initializers = [];
+    let _mimeType_extraInitializers = [];
+    let _urlLabel_decorators;
+    let _urlLabel_initializers = [];
+    let _urlLabel_extraInitializers = [];
+    let _urlEditor_decorators;
+    let _urlEditor_initializers = [];
+    let _urlEditor_extraInitializers = [];
+    let _allowHideOptional_decorators;
+    let _allowHideOptional_initializers = [];
+    let _allowHideOptional_extraInitializers = [];
+    let _allowCustom_decorators;
+    let _allowCustom_initializers = [];
+    let _allowCustom_extraInitializers = [];
+    let _redirectUri_decorators;
+    let _redirectUri_initializers = [];
+    let _redirectUri_extraInitializers = [];
+    let _url_decorators;
+    let _url_initializers = [];
+    let _url_extraInitializers = [];
+    let _serverValue_decorators;
+    let _serverValue_initializers = [];
+    let _serverValue_extraInitializers = [];
+    let _serverType_decorators;
+    let _serverType_initializers = [];
+    let _serverType_extraInitializers = [];
+    let _noServerSelector_decorators;
+    let _noServerSelector_initializers = [];
+    let _noServerSelector_extraInitializers = [];
+    let _allowCustomBaseUri_decorators;
+    let _allowCustomBaseUri_initializers = [];
+    let _allowCustomBaseUri_extraInitializers = [];
+    let _credentialsSource_decorators;
+    let _credentialsSource_initializers = [];
+    let _credentialsSource_extraInitializers = [];
+    let _selectedSecurity_decorators;
+    let _selectedSecurity_initializers = [];
+    let _selectedSecurity_extraInitializers = [];
+    let _endpointId_decorators;
+    let _endpointId_initializers = [];
+    let _endpointId_extraInitializers = [];
+    let _set_domainId_decorators;
+    let _loadingRequest_decorators;
+    let _loadingRequest_initializers = [];
+    let _loadingRequest_extraInitializers = [];
+    let _set_baseUri_decorators;
+    return class ApiRequestEditor extends _classSuper {
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _mimeType_decorators = [property({ type: String, reflect: true })];
+            _urlLabel_decorators = [property({ type: Boolean, reflect: true })];
+            _urlEditor_decorators = [property({ type: Boolean, reflect: true })];
+            _allowHideOptional_decorators = [property({ type: Boolean, reflect: true })];
+            _allowCustom_decorators = [property({ type: Boolean, reflect: true })];
+            _redirectUri_decorators = [property({ type: String })];
+            _url_decorators = [property({ type: String })];
+            _serverValue_decorators = [property({ type: String })];
+            _serverType_decorators = [property({ type: String })];
+            _noServerSelector_decorators = [property({ type: Boolean, reflect: true })];
+            _allowCustomBaseUri_decorators = [property({ type: Boolean, reflect: true })];
+            _credentialsSource_decorators = [property({ type: Array })];
+            _selectedSecurity_decorators = [property({ type: String })];
+            _endpointId_decorators = [property({ type: String })];
+            _set_domainId_decorators = [property({ type: String, reflect: true })];
+            _loadingRequest_decorators = [state()];
+            _set_baseUri_decorators = [property({ type: String })];
+            __esDecorate(this, null, _mimeType_decorators, { kind: "accessor", name: "mimeType", static: false, private: false, access: { has: obj => "mimeType" in obj, get: obj => obj.mimeType, set: (obj, value) => { obj.mimeType = value; } }, metadata: _metadata }, _mimeType_initializers, _mimeType_extraInitializers);
+            __esDecorate(this, null, _urlLabel_decorators, { kind: "accessor", name: "urlLabel", static: false, private: false, access: { has: obj => "urlLabel" in obj, get: obj => obj.urlLabel, set: (obj, value) => { obj.urlLabel = value; } }, metadata: _metadata }, _urlLabel_initializers, _urlLabel_extraInitializers);
+            __esDecorate(this, null, _urlEditor_decorators, { kind: "accessor", name: "urlEditor", static: false, private: false, access: { has: obj => "urlEditor" in obj, get: obj => obj.urlEditor, set: (obj, value) => { obj.urlEditor = value; } }, metadata: _metadata }, _urlEditor_initializers, _urlEditor_extraInitializers);
+            __esDecorate(this, null, _allowHideOptional_decorators, { kind: "accessor", name: "allowHideOptional", static: false, private: false, access: { has: obj => "allowHideOptional" in obj, get: obj => obj.allowHideOptional, set: (obj, value) => { obj.allowHideOptional = value; } }, metadata: _metadata }, _allowHideOptional_initializers, _allowHideOptional_extraInitializers);
+            __esDecorate(this, null, _allowCustom_decorators, { kind: "accessor", name: "allowCustom", static: false, private: false, access: { has: obj => "allowCustom" in obj, get: obj => obj.allowCustom, set: (obj, value) => { obj.allowCustom = value; } }, metadata: _metadata }, _allowCustom_initializers, _allowCustom_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, _url_decorators, { kind: "accessor", name: "url", static: false, private: false, access: { has: obj => "url" in obj, get: obj => obj.url, set: (obj, value) => { obj.url = value; } }, metadata: _metadata }, _url_initializers, _url_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);
+            __esDecorate(this, null, _noServerSelector_decorators, { kind: "accessor", name: "noServerSelector", static: false, private: false, access: { has: obj => "noServerSelector" in obj, get: obj => obj.noServerSelector, set: (obj, value) => { obj.noServerSelector = value; } }, metadata: _metadata }, _noServerSelector_initializers, _noServerSelector_extraInitializers);
+            __esDecorate(this, null, _allowCustomBaseUri_decorators, { kind: "accessor", name: "allowCustomBaseUri", static: false, private: false, access: { has: obj => "allowCustomBaseUri" in obj, get: obj => obj.allowCustomBaseUri, set: (obj, value) => { obj.allowCustomBaseUri = value; } }, metadata: _metadata }, _allowCustomBaseUri_initializers, _allowCustomBaseUri_extraInitializers);
+            __esDecorate(this, null, _credentialsSource_decorators, { kind: "accessor", name: "credentialsSource", static: false, private: false, access: { has: obj => "credentialsSource" in obj, get: obj => obj.credentialsSource, set: (obj, value) => { obj.credentialsSource = value; } }, metadata: _metadata }, _credentialsSource_initializers, _credentialsSource_extraInitializers);
+            __esDecorate(this, null, _selectedSecurity_decorators, { kind: "accessor", name: "selectedSecurity", static: false, private: false, access: { has: obj => "selectedSecurity" in obj, get: obj => obj.selectedSecurity, set: (obj, value) => { obj.selectedSecurity = value; } }, metadata: _metadata }, _selectedSecurity_initializers, _selectedSecurity_extraInitializers);
+            __esDecorate(this, null, _endpointId_decorators, { kind: "accessor", name: "endpointId", static: false, private: false, access: { has: obj => "endpointId" in obj, get: obj => obj.endpointId, set: (obj, value) => { obj.endpointId = value; } }, metadata: _metadata }, _endpointId_initializers, _endpointId_extraInitializers);
+            __esDecorate(this, null, _set_domainId_decorators, { kind: "setter", name: "domainId", static: false, private: false, access: { has: obj => "domainId" in obj, set: (obj, value) => { obj.domainId = value; } }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _loadingRequest_decorators, { kind: "accessor", name: "loadingRequest", static: false, private: false, access: { has: obj => "loadingRequest" in obj, get: obj => obj.loadingRequest, set: (obj, value) => { obj.loadingRequest = value; } }, metadata: _metadata }, _loadingRequest_initializers, _loadingRequest_extraInitializers);
+            __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);
+            if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        }
+        #mimeType_accessor_storage = (__runInitializers(this, _instanceExtraInitializers), __runInitializers(this, _mimeType_initializers, void 0));
+        /**
+         * The currently selected media type for the payloads.
+         * @attribute
+         */
+        get mimeType() { return this.#mimeType_accessor_storage; }
+        set mimeType(value) { this.#mimeType_accessor_storage = value; }
+        #urlLabel_accessor_storage = (__runInitializers(this, _mimeType_extraInitializers), __runInitializers(this, _urlLabel_initializers, void 0));
+        /**
+         * When set it renders a label with the computed URL.
+         * @attribute
+         */
+        get urlLabel() { return this.#urlLabel_accessor_storage; }
+        set urlLabel(value) { this.#urlLabel_accessor_storage = value; }
+        #urlEditor_accessor_storage = (__runInitializers(this, _urlLabel_extraInitializers), __runInitializers(this, _urlEditor_initializers, void 0));
+        /**
+         * When set it renders the URL input above the URL parameters.
+         * @attribute
+         */
+        get urlEditor() { return this.#urlEditor_accessor_storage; }
+        set urlEditor(value) { this.#urlEditor_accessor_storage = value; }
+        #allowHideOptional_accessor_storage = (__runInitializers(this, _urlEditor_extraInitializers), __runInitializers(this, _allowHideOptional_initializers, void 0));
+        /**
+         * If set it computes `hasOptional` property and shows checkbox in the
+         * form to show / hide optional properties.
+         * @attribute
+         */
+        get allowHideOptional() { return this.#allowHideOptional_accessor_storage; }
+        set allowHideOptional(value) { this.#allowHideOptional_accessor_storage = value; }
+        #allowCustom_accessor_storage = (__runInitializers(this, _allowHideOptional_extraInitializers), __runInitializers(this, _allowCustom_initializers, void 0));
+        /**
+         * 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
+         */
+        get allowCustom() { return this.#allowCustom_accessor_storage; }
+        set allowCustom(value) { this.#allowCustom_accessor_storage = value; }
+        #redirectUri_accessor_storage = (__runInitializers(this, _allowCustom_extraInitializers), __runInitializers(this, _redirectUri_initializers, void 0));
+        /**
+         * OAuth2 redirect URI.
+         * This value **must** be set in order for OAuth 1/2 to work properly.
+         * @attribute
+         */
+        get redirectUri() { return this.#redirectUri_accessor_storage; }
+        set redirectUri(value) { this.#redirectUri_accessor_storage = value; }
+        #url_accessor_storage = (__runInitializers(this, _redirectUri_extraInitializers), __runInitializers(this, _url_initializers, void 0));
+        /**
+         * Final request URL including settings like `baseUri`, AMF
+         * model settings and user provided parameters.
+         * @attribute
+         */
+        get url() { return this.#url_accessor_storage; }
+        set url(value) { this.#url_accessor_storage = value; }
+        #serverValue_accessor_storage = (__runInitializers(this, _url_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; }
+        #noServerSelector_accessor_storage = (__runInitializers(this, _serverType_extraInitializers), __runInitializers(this, _noServerSelector_initializers, void 0));
+        /**
+         * Optional property to set
+         * If true, the server selector is not rendered
+         * @attribute
+         */
+        get noServerSelector() { return this.#noServerSelector_accessor_storage; }
+        set noServerSelector(value) { this.#noServerSelector_accessor_storage = value; }
+        #allowCustomBaseUri_accessor_storage = (__runInitializers(this, _noServerSelector_extraInitializers), __runInitializers(this, _allowCustomBaseUri_initializers, void 0));
+        /**
+         * Optional property to set
+         * If true, the server selector custom base URI option is rendered
+         * @attribute
+         */
+        get allowCustomBaseUri() { return this.#allowCustomBaseUri_accessor_storage; }
+        set allowCustomBaseUri(value) { this.#allowCustomBaseUri_accessor_storage = value; }
+        #credentialsSource_accessor_storage = (__runInitializers(this, _allowCustomBaseUri_extraInitializers), __runInitializers(this, _credentialsSource_initializers, void 0));
+        /**
+         * List of credentials source
+         */
+        get credentialsSource() { return this.#credentialsSource_accessor_storage; }
+        set credentialsSource(value) { this.#credentialsSource_accessor_storage = value; }
+        #selectedSecurity_accessor_storage = (__runInitializers(this, _credentialsSource_extraInitializers), __runInitializers(this, _selectedSecurity_initializers, void 0));
+        /**
+         * The domain id key of the selected security
+         * @attribute
+         */
+        get selectedSecurity() { return this.#selectedSecurity_accessor_storage; }
+        set selectedSecurity(value) { this.#selectedSecurity_accessor_storage = value; }
+        #endpointId_accessor_storage = (__runInitializers(this, _selectedSecurity_extraInitializers), __runInitializers(this, _endpointId_initializers, void 0));
+        /**
+         * 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
+         */
+        get endpointId() { return this.#endpointId_accessor_storage; }
+        set endpointId(value) { this.#endpointId_accessor_storage = value; }
+        domainIdValue = __runInitializers(this, _endpointId_extraInitializers);
+        /**
+         * 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;
+        }
+        #loadingRequest_accessor_storage = __runInitializers(this, _loadingRequest_initializers, void 0);
+        /**
+         * A flag set when the request is being made.
+         */
+        get loadingRequest() { return this.#loadingRequest_accessor_storage; }
+        set loadingRequest(value) { this.#loadingRequest_accessor_storage = value; }
+        baseUriValue = __runInitializers(this, _loadingRequest_extraInitializers);
+        /**
+         * 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));
+        }
+        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 {
+                // ...
+            }
+            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.
+         */
+        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 = nanoid();
+            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="${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-filled-tonal-button class="send-button abort" @click="${this.abortHandler}"
+      >Abort</ui-filled-tonal-button
+    >`;
+        }
+        /**
+         * Creates a template for the "send" or "auth and send" button.
+         */
+        sendButtonTemplate() {
+            return html ` <ui-filled-tonal-button class="send-button" @click="${this.sendHandler}">Send</ui-filled-tonal-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-outlined-button
+          data-type="${type}"
+          title="Adds a new custom parameter to the request"
+          @click="${this.addCustomHandler}"
+        >
+          <ui-icon icon="add" role="presentation"></ui-icon>
+          Add custom
+        </ui-outlined-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>
+    `;
+        }
+    };
+})();
+/**
+ * @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 ApiRequestEditor;
+//# sourceMappingURL=ApiRequestEditor.element.js.map