openapi-explorer 2.1.654 → 2.1.658

package/dist/lib/components/api-request.js

@@ -2,41 +2,25 @@
 
 exports.__esModule = true;
 exports.default = void 0;
-
 var _lit = require("lit");
-
 var _marked = require("marked");
-
 var _unsafeHtml = require("lit/directives/unsafe-html.js");
-
 var _keyed = require("lit/directives/keyed.js");
-
 var _xmlButPrettier = _interopRequireDefault(require("xml-but-prettier"));
-
 var _index = require("../languages/index.js");
-
 var _schemaUtils = require("../utils/schema-utils.js");
-
 require("./schema-tree.js");
-
 var _requestFormTable = _interopRequireDefault(require("./request-form-table.js"));
-
 require("./tag-input.js");
-
 require("./syntax-highlighter.js");
-
 var _json = _interopRequireDefault(require("json5"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 const textFileRegex = RegExp('^font/|tar$|zip$|7z$|rtf$|msword$|excel$|/pdf$|/octet-stream$|^application/vnd.');
 const mediaFileRegex = RegExp('^audio/|^image/|^video/');
-
 class ApiRequest extends _lit.LitElement {
   createRenderRoot() {
     return this;
   }
-
   constructor() {
     super();
     this.duplicatedRowsByKey = {};
@@ -50,11 +34,9 @@ class ApiRequest extends _lit.LitElement {
     this.responseElapsedMs = 0;
     this.curlSyntax = '';
     this.activeResponseTab = 'curl'; // allowed values: response, headers, curl
-
     this.selectedRequestBodyType = '';
     this.selectedRequestBodyExample = '';
   }
-
   static get properties() {
     return {
       serverUrl: {
@@ -127,11 +109,9 @@ class ApiRequest extends _lit.LitElement {
       includeNulls: {
         type: Boolean,
         attribute: 'display-nulls',
-
         converter(value) {
           return value === 'true';
         }
-
       },
       allowTry: {
         type: String,
@@ -179,46 +159,38 @@ class ApiRequest extends _lit.LitElement {
         type: String,
         attribute: 'selected-request-body-example'
       } // internal tracking of selected request-body example
-
     };
   }
-
   render() {
     const id = this.elementId || `${this.method}-${this.path}`;
     return (0, _keyed.keyed)(id, (0, _lit.html)` <div id="api-request-${id}" class="api-request col regular-font request-panel ${this.renderStyle === 'focused' || this.callback === 'true' ? 'focused-mode' : 'view-mode'}"> <div class="${this.callback === 'true' ? 'tiny-title' : 'req-res-title'}"> ${this.callback === 'true' ? 'CALLBACK REQUEST' : (0, _index.getI18nText)('operations.request')} </div> <div> ${this.inputParametersTemplate('path')} ${this.inputParametersTemplate('query')} ${this.requestBodyTemplate()} ${this.inputParametersTemplate('header')} ${this.inputParametersTemplate('cookie')} ${this.allowTry === 'false' ? '' : (0, _lit.html)`${this.apiCallTemplate()}`} </div> </div> `);
   }
-
   updated(changedProperties) {
     // In focused mode after rendering the request component, update the text-areas(which contains examples) using the original values from hidden textareas.
     // This is done coz, user may update the dom by editing the textarea's and once the DOM is updated externally change detection wont happen, therefore update the values manually
     if (this.renderStyle !== 'focused') {
       return;
-    } // dont update example as only tabs is switched
-
+    }
 
+    // dont update example as only tabs is switched
     if (changedProperties.size === 1 && changedProperties.has('activeSchemaTab')) {
       return;
     }
-
     const exampleTextAreaEls = [...this.querySelectorAll('textarea[data-ptype="form-data"]')];
     exampleTextAreaEls.forEach(el => {
       const origExampleEl = this.querySelector(`textarea[data-pname='hidden-${el.dataset.pname}']`);
-
       if (origExampleEl) {
         el.value = origExampleEl.value;
       }
     });
   }
-  /* eslint-disable indent */
-
 
+  /* eslint-disable indent */
   inputParametersTemplate(paramLocation) {
     const filteredParams = this.parameters ? this.parameters.filter(param => param.in === paramLocation) : [];
-
     if (filteredParams.length === 0) {
       return '';
     }
-
     const title = {
       path: 'PATH PARAMETERS',
       query: 'QUERY-STRING PARAMETERS',
@@ -226,36 +198,28 @@ class ApiRequest extends _lit.LitElement {
       cookie: 'COOKIES'
     }[paramLocation];
     const tableRows = [];
-
     for (const param of filteredParams) {
       var _this$storedParamValu;
-
       if (!param.schema) {
         continue;
       }
-
       const paramSchema = (0, _schemaUtils.getTypeInfo)(param.schema, {
         includeNulls: this.includeNulls
       });
-
       if (!paramSchema) {
         continue;
       }
-
       const defaultVal = Array.isArray(paramSchema.default) ? paramSchema.default : `${paramSchema.default}`;
       let paramStyle = 'form';
       let paramExplode = true;
-
       if (paramLocation === 'query') {
         if (param.style && 'form spaceDelimited pipeDelimited'.includes(param.style)) {
           paramStyle = param.style;
         }
-
         if (typeof param.explode === 'boolean') {
           paramExplode = param.explode;
         }
       }
-
       tableRows.push((0, _lit.html)` <tr> <td colspan="1" style="width:160px;min-width:50px;vertical-align:top"> <div class="param-name ${paramSchema.deprecated ? 'deprecated' : ''}" style="margin-top:1rem"> ${param.name}${!paramSchema.deprecated && param.required ? (0, _lit.html)`<span style="color:var(--red)">*</span>` : ''} </div> <div class="param-type" style="margin-bottom:1rem"> ${paramSchema.type === 'array' ? `${paramSchema.arrayType}` : `${paramSchema.format ? paramSchema.format : paramSchema.type}`}${!paramSchema.deprecated && param.required ? (0, _lit.html)`<span style="opacity:0">*</span>` : ''} </div> </td> <td colspan="2" style="min-width:160px;vertical-align:top"> ${this.allowTry === 'true' ? paramSchema.type === 'array' && (0, _lit.html)` <div style="margin-top:1rem;margin-bottom:1rem"> <tag-input class="request-param" style="width:100%" data-ptype="${paramLocation}" data-pname="${param.name}" data-default="${Array.isArray(defaultVal) ? defaultVal.join('~|~') : defaultVal}" data-param-serialize-style="${paramStyle}" data-param-serialize-explode="${paramExplode}" data-array="true" placeholder="add-multiple ↩" @change="${e => {
         this.storedParamValues[param.name] = e.detail.value;
         this.computeCurlSyntax();
@@ -265,41 +229,33 @@ class ApiRequest extends _lit.LitElement {
         this.computeCurlSyntax();
       }}" placeholder="${paramSchema.example || defaultVal || ''}" class="request-param" part="textbox textbox-param" data-ptype="${paramLocation}" data-pname="${param.name}" data-default="${Array.isArray(defaultVal) ? defaultVal.join('~|~') : defaultVal}" data-array="false" @keyup="${this.requestParamFunction}" .value="${this.fillRequestWithDefault === 'true' ? defaultVal : ''}">` : ''} ${this.exampleListTemplate.call(this, param, paramSchema.type)} </td> ${this.renderStyle === 'focused' ? (0, _lit.html)` <td colspan="2" style="vertical-align:top"> ${param.description ? (0, _lit.html)` <div class="param-description" style="margin-top:1rem"> ${(0, _unsafeHtml.unsafeHTML)((0, _marked.marked)(param.description))} </div>` : ''} ${paramSchema.constraints.length || paramSchema.allowedValues || paramSchema.pattern ? (0, _lit.html)` <div class="param-constraint" style="margin-top:1rem"> ${paramSchema.constraints.length ? (0, _lit.html)`<span style="font-weight:700">Constraints: </span>${paramSchema.constraints.join(', ')}<br>` : ''} ${paramSchema.pattern ? (0, _lit.html)` <div class="tooltip tooltip-replace" style="cursor:pointer;max-width:100%;display:flex"> <div style="white-space:nowrap;font-weight:700;margin-right:2px">Pattern: </div> <div style="white-space:nowrap;text-overflow:ellipsis;max-width:100%;overflow:hidden">${paramSchema.pattern}</div> <br> <div class="tooltip-text" style="position:absolute;display:block">${paramSchema.pattern}</div> </div> ` : ''} ${paramSchema.allowedValues && paramSchema.allowedValues.split('┃').map((v, i) => (0, _lit.html)` ${i > 0 ? '|' : (0, _lit.html)`<span style="font-weight:700">Allowed: </span>`} ${(0, _lit.html)` <a part="anchor anchor-param-constraint" class="${this.allowTry === 'true' ? '' : 'inactive-link'}" data-type="${paramSchema.type === 'array' ? 'array' : 'string'}" data-enum="${v.trim()}" @click="${e => {
         const inputEl = e.target.closest('table').querySelector(`[data-pname="${param.name}"]`);
-
         if (inputEl) {
           inputEl.value = e.target.dataset.type === 'array' ? [e.target.dataset.enum] : e.target.dataset.enum;
         }
       }}"> ${v} </a>`}`)} </div>` : ''} </td> ` : ''} </tr>`);
     }
-
     return (0, _lit.html)` <div class="table-title top-gap">${title}${paramLocation === 'path' ? (0, _lit.html)`<span style="color:var(--red)">*</span>` : ''}</div> <div style="display:block;overflow-x:auto;max-width:100%"> <table role="presentation" class="m-table" style="width:100%;word-break:break-word"> ${tableRows} </table> </div>`;
   }
-
   renderExample(example, paramType, paramName) {
     var _example$exampleValue, _example$exampleValue2;
-
     return (0, _lit.html)` <a part="anchor anchor-param-example" class="${this.allowTry === 'true' ? '' : 'inactive-link'}" data-example-type="${paramType === 'array' ? paramType : 'string'}" data-example="${Array.isArray(example.exampleValue) ? (_example$exampleValue = example.exampleValue) === null || _example$exampleValue === void 0 ? void 0 : _example$exampleValue.join('~|~') : example.exampleValue}" @click="${e => {
       const inputEl = e.target.closest('table').querySelector(`[data-pname="${paramName}"]`);
-
       if (inputEl) {
         inputEl.value = paramType === 'array' ? e.target.dataset.example.split('~|~') || [] : e.target.dataset.example;
       }
     }}">${Array.isArray(example.exampleValue) ? (_example$exampleValue2 = example.exampleValue) === null || _example$exampleValue2 === void 0 ? void 0 : _example$exampleValue2.join(', ') : example.exampleValue} </a> `;
   }
-
   renderShortFormatExamples(examples, paramType, paramName) {
     return (0, _lit.html)`${examples.map((example, i) => (0, _lit.html)` ${i === 0 ? '' : '┃'} ${this.renderExample(example, paramType, paramName)}`)}`;
   }
-
   renderLongFormatExamples(exampleList, paramType, paramName) {
     return (0, _lit.html)` <ul style="margin-block-start:.25em"> ${exampleList.map(example => {
       var _example$exampleSumma, _example$exampleDescr;
-
       return (0, _lit.html)` <li> ${this.renderExample(example, paramType, paramName)} ${((_example$exampleSumma = example.exampleSummary) === null || _example$exampleSumma === void 0 ? void 0 : _example$exampleSumma.length) > 0 ? (0, _lit.html)`<span>&lpar;${example.exampleSummary}&rpar;</span>` : ''} ${((_example$exampleDescr = example.exampleDescription) === null || _example$exampleDescr === void 0 ? void 0 : _example$exampleDescr.length) > 0 ? (0, _lit.html)`<p>${(0, _unsafeHtml.unsafeHTML)((0, _marked.marked)(example.exampleDescription))}</p>` : ''} </li>`;
     })} </ul>`;
   }
-  /* eslint-disable indent */
 
+  /* eslint-disable indent */
 
   exampleListTemplate(param, paramType) {
     const paramName = param.name;
@@ -317,30 +273,26 @@ class ApiRequest extends _lit.LitElement {
     }, null, param.schema, null, false, true, 'json', false);
     const someExampleWithSummaryOrDescription = examples.some(x => {
       var _x$exampleSummary, _x$exampleDescription;
-
       return ((_x$exampleSummary = x.exampleSummary) === null || _x$exampleSummary === void 0 ? void 0 : _x$exampleSummary.length) > 0 || ((_x$exampleDescription = x.exampleDescription) === null || _x$exampleDescription === void 0 ? void 0 : _x$exampleDescription.length) > 0;
     });
-
     if (!examples.length) {
       return '';
-    } // Don't show an example if there is just one without a description because it is the same as the placeholder for the field
-
+    }
 
+    // Don't show an example if there is just one without a description because it is the same as the placeholder for the field
     if (examples.length === 1 && !someExampleWithSummaryOrDescription) {
       return '';
     }
-
     return (0, _lit.html)`<div style="min-width:50px;margin-bottom:1rem"> <span style="font-weight:700">Examples: </span> ${someExampleWithSummaryOrDescription ? this.renderLongFormatExamples(examples, paramType, paramName) : this.renderShortFormatExamples(examples, paramType, paramName)} </div>`;
   }
-
   resetRequestBodySelection() {
     this.selectedRequestBodyType = '';
     this.selectedRequestBodyExample = '';
     this.computeCurlSyntax();
     this.clearResponseData();
-  } // Request-Body Event Handlers
-
+  }
 
+  // Request-Body Event Handlers
   onSelectExample(e) {
     this.selectedRequestBodyExample = e.target.value;
     const exampleDropdownEl = e.target;
@@ -351,37 +303,31 @@ class ApiRequest extends _lit.LitElement {
       this.computeCurlSyntax();
     }, 0, exampleDropdownEl);
   }
-
   onMimeTypeChange(e) {
     this.selectedRequestBodyType = e.target.value;
     const mimeDropdownEl = e.target;
     this.selectedRequestBodyExample = '';
     window.setTimeout(selectEl => {
       const exampleTextareaEl = selectEl.closest('.request-body-container').querySelector('.request-body-param');
-
       if (exampleTextareaEl) {
         const userInputExampleTextareaEl = selectEl.closest('.request-body-container').querySelector('.request-body-param-user-input');
         userInputExampleTextareaEl.value = exampleTextareaEl.value;
       }
-
       this.computeCurlSyntax();
     }, 0, mimeDropdownEl);
   }
-
   requestBodyTemplate() {
     if (!this.request_body) {
       return '';
     }
-
     if (Object.keys(this.request_body).length === 0) {
       return '';
     }
-
     if (this.method === 'get' || this.method === 'head') {
       return '';
-    } // Variable to store partial HTMLs
-
+    }
 
+    // Variable to store partial HTMLs
     let reqBodyTypeSelectorHtml = '';
     let reqBodyFileInputHtml = '';
     let reqBodySchemaHtml = '';
@@ -389,7 +335,6 @@ class ApiRequest extends _lit.LitElement {
     let bodyTabNameUseBody = true;
     const requestBodyTypes = [];
     const content = this.request_body.content;
-
     for (const mimeType in content) {
       requestBodyTypes.push({
         mimeType,
@@ -398,25 +343,22 @@ class ApiRequest extends _lit.LitElement {
         examples: content[mimeType].examples
       });
     }
-
     if (!content[this.selectedRequestBodyType]) {
       var _requestBodyTypes$;
-
       this.selectedRequestBodyType = (_requestBodyTypes$ = requestBodyTypes[0]) === null || _requestBodyTypes$ === void 0 ? void 0 : _requestBodyTypes$.mimeType;
-    } // MIME Type selector
-
-
-    reqBodyTypeSelectorHtml = requestBodyTypes.length === 1 ? '' : (0, _lit.html)` <select aria-label="mime type" style="min-width:100px;max-width:100%;margin-bottom:-1px" @change="${e => this.onMimeTypeChange(e)}"> ${requestBodyTypes.map(reqBody => (0, _lit.html)` <option value="${reqBody.mimeType}" ?selected="${reqBody.mimeType === this.selectedRequestBodyType}"> ${reqBody.mimeType} </option> `)} </select> `; // For Loop - Main
+    }
 
-    const reqBody = requestBodyTypes.find(req => req.mimeType === this.selectedRequestBodyType); // Generate Example
+    // MIME Type selector
+    reqBodyTypeSelectorHtml = requestBodyTypes.length === 1 ? '' : (0, _lit.html)` <select aria-label="mime type" style="min-width:100px;max-width:100%;margin-bottom:-1px" @change="${e => this.onMimeTypeChange(e)}"> ${requestBodyTypes.map(reqBody => (0, _lit.html)` <option value="${reqBody.mimeType}" ?selected="${reqBody.mimeType === this.selectedRequestBodyType}"> ${reqBody.mimeType} </option> `)} </select> `;
 
+    // For Loop - Main
+    const reqBody = requestBodyTypes.find(req => req.mimeType === this.selectedRequestBodyType);
+    // Generate Example
     if (this.selectedRequestBodyType.includes('json') || this.selectedRequestBodyType.includes('xml') || this.selectedRequestBodyType.includes('text')) {
       const reqBodyExamples = (0, _schemaUtils.generateExample)(reqBody.examples ? reqBody.examples : '', reqBody.example ? reqBody.example : '', reqBody.schema, reqBody.mimeType, false, true, 'text', true);
-
       if (!this.selectedRequestBodyExample) {
         this.selectedRequestBodyExample = reqBodyExamples.length > 0 ? reqBodyExamples[0].exampleId : '';
       }
-
       const displayedBodyExample = reqBodyExamples.find(v => v.exampleId === this.selectedRequestBodyExample) || reqBodyExamples[0];
       reqBodyDefaultHtml = (0, _lit.html)` <div class="example-panel border-top pad-top-8"> ${reqBodyExamples.length === 1 ? '' : (0, _lit.html)` <select aria-label="request body example" style="min-width:100px;max-width:100%;margin-bottom:-1px" @change="${e => this.onSelectExample(e)}"> ${reqBodyExamples.map(v => (0, _lit.html)`<option value="${v.exampleId}" ?selected="${v.exampleId === this.selectedRequestBodyExample}"> ${v.exampleSummary.length > 80 ? v.exampleId : v.exampleSummary ? v.exampleSummary : v.exampleId} </option>`)} </select>`} ${displayedBodyExample ? (0, _lit.html)` <div class="example" data-default="${displayedBodyExample.exampleId}"> ${displayedBodyExample.exampleSummary && displayedBodyExample.exampleSummary.length > 80 ? (0, _lit.html)`<div style="padding:4px 0"> ${displayedBodyExample.exampleSummary} </div>` : ''} ${displayedBodyExample.exampleDescription ? (0, _lit.html)`<div class="m-markdown-small" style="padding:4px 0"> ${(0, _unsafeHtml.unsafeHTML)((0, _marked.marked)(displayedBodyExample.exampleDescription || ''))} </div>` : ''} <slot name="${this.elementId}--request-body"> <textarea @input="${() => {
         this.computeCurlSyntax();
@@ -429,27 +371,27 @@ class ApiRequest extends _lit.LitElement {
       reqBodyDefaultHtml = _requestFormTable.default.call(this, schemaAsObj, this.selectedRequestBodyType);
     } else if (mediaFileRegex.test(this.selectedRequestBodyType) || textFileRegex.test(this.selectedRequestBodyType)) {
       reqBodyFileInputHtml = (0, _lit.html)` <div class="small-font-size bold-text row"> <input type="file" part="file-input" style="max-width:100%" class="request-body-param-file" data-ptype="${reqBody.mimeType}" spellcheck="false"> </div> `;
-    } // Generate Schema
-
+    }
 
+    // Generate Schema
     if (reqBody.mimeType.includes('json') || reqBody.mimeType.includes('xml') || reqBody.mimeType.includes('text') || reqBody.mimeType.includes('form-')) {
       const schemaAsObj = (0, _schemaUtils.schemaInObjectNotation)(reqBody.schema, {
         includeNulls: this.includeNulls
       });
-
       if (this.schemaStyle === 'table') {
         reqBodySchemaHtml = (0, _lit.html)` ${reqBodySchemaHtml} <schema-table class="${reqBody.mimeType.substring(reqBody.mimeType.indexOf('/') + 1)} pad-top-8" style="display:${this.selectedRequestBodyType === reqBody.mimeType ? 'block' : 'none'}" .data="${schemaAsObj}" schema-expand-level="${this.schemaExpandLevel}" schema-hide-read-only="${this.schemaHideReadOnly.includes(this.method)}" schema-hide-write-only="false"> </schema-table> `;
       } else {
         reqBodySchemaHtml = (0, _lit.html)` ${reqBodySchemaHtml} <schema-tree class="${reqBody.mimeType.substring(reqBody.mimeType.indexOf('/') + 1)} pad-top-8" style="display:${this.selectedRequestBodyType === reqBody.mimeType ? 'block' : 'none'}" .data="${schemaAsObj}" schema-expand-level="${this.schemaExpandLevel}" schema-hide-read-only="${this.schemaHideReadOnly.includes(this.method)}" schema-hide-write-only="false"> </schema-tree> `;
       }
     }
-
     return (0, _lit.html)` <div class="request-body-container" data-selected-request-body-type="${this.selectedRequestBodyType}"> <div class="table-title top-gap row"> ${(0, _index.getI18nText)('operations.request-body')} ${this.request_body.required ? (0, _lit.html)`<span class="mono-font" style="color:var(--red)">*</span>` : ''} <span style="font-weight:400;margin-left:5px"> ${this.selectedRequestBodyType}</span> <span style="flex:1"></span> ${reqBodyTypeSelectorHtml} </div> ${this.request_body.description ? (0, _lit.html)`<div class="m-markdown" style="margin-bottom:12px">${(0, _unsafeHtml.unsafeHTML)((0, _marked.marked)(this.request_body.description))}</div>` : ''} ${reqBodySchemaHtml || reqBodyDefaultHtml ? (0, _lit.html)` <div class="tab-panel col" style="border-width:0 0 1px 0"> <div class="tab-buttons row" @click="${e => {
       if (e.target.tagName.toLowerCase() === 'button') {
         this.activeSchemaTab = e.target.dataset.tab;
       }
     }}"> <button class="tab-btn ${this.activeSchemaTab === 'model' ? 'active' : ''}" data-tab="model">${(0, _index.getI18nText)('operations.model')}</button> <button class="tab-btn ${this.activeSchemaTab !== 'model' ? 'active' : ''}" data-tab="body">${bodyTabNameUseBody ? (0, _index.getI18nText)('operations.body') : (0, _index.getI18nText)('operations.form')}</button> </div> ${(0, _lit.html)`<div class="tab-content col" style="display:${this.activeSchemaTab === 'model' ? 'block' : 'none'}"> ${reqBodySchemaHtml}</div>`} ${(0, _lit.html)`<div class="tab-content col" style="display:${this.activeSchemaTab === 'model' ? 'none' : 'block'}"> ${reqBodyDefaultHtml}</div>`} </div>` : (0, _lit.html)`${reqBodyFileInputHtml}`} </div> `;
-  } // formDataTemplate(schema, mimeType, exampleValue = '') {
+  }
+
+  // formDataTemplate(schema, mimeType, exampleValue = '') {
   //   return html`
   //     <textarea
   //       class = "textarea dynamic-form-param ${mimeType}"
@@ -463,7 +405,6 @@ class ApiRequest extends _lit.LitElement {
   //   `;
   // }
 
-
   apiResponseTabTemplate() {
     const curlSyntax = this.curlSyntax || this.computeCurlSyntax() || '';
     const hasResponse = this.responseMessage !== '';
@@ -471,17 +412,14 @@ class ApiRequest extends _lit.LitElement {
       if (e.target.classList.contains('tab-btn') === false) {
         return;
       }
-
       this.activeResponseTab = e.target.dataset.tab;
     }}"> <br> <div style="width:100%"> ${!hasResponse ? '' : (0, _lit.html)` <button class="tab-btn ${this.activeResponseTab === 'response' ? 'active' : ''}" data-tab="response">${(0, _index.getI18nText)('operations.response')}</button> <button class="tab-btn ${this.activeResponseTab === 'headers' ? 'active' : ''}" data-tab="headers">${(0, _index.getI18nText)('operations.response-headers')}</button>`} <button class="tab-btn ${!hasResponse || this.activeResponseTab === 'curl' ? 'active' : ''}" data-tab="curl">FULL REQUEST</button> </div> </div> ${this.responseIsBlob ? (0, _lit.html)` <div class="tab-content col" style="flex:1;display:${this.activeResponseTab === 'response' ? 'flex' : 'none'}"> ${this.responseBlobType === 'image' ? (0, _lit.html)`<img style="max-height:var(--resp-area-height,300px);object-fit:contain" class="mar-top-8" src="${this.responseBlobUrl}">` : ''} <div style="display:flex;justify-content:center"> <div> <button class="m-btn thin-border mar-top-8" style="width:135px" @click="${this.downloadResponseBlob}" part="btn btn-outline">DOWNLOAD</button> ${this.responseBlobType === 'view' || this.responseBlobType === 'image' ? (0, _lit.html)`<button class="m-btn thin-border mar-top-8" style="width:135px" @click="${this.viewResponseBlob}" part="btn btn-outline">VIEW (NEW TAB)</button>` : ''} </div> </div> </div>` : (0, _lit.html)` <div class="tab-content col m-markdown" style="flex:1;display:${this.activeResponseTab === 'response' ? 'flex' : 'none'}"> <syntax-highlighter style="min-height:60px" mime-type="${this.responseContentType}" .content="${this.responseText}"> </div>`} <div class="tab-content col m-markdown" style="flex:1;display:${this.activeResponseTab === 'headers' ? 'flex' : 'none'}"> <syntax-highlighter language="http" .content="${this.responseHeaders}"> </div> <div class="tab-content m-markdown col" style="flex:1;display:${this.activeResponseTab === 'curl' ? 'flex' : 'none'}"> <syntax-highlighter class="fs-exclude" data-hj-suppress data-sl="mask" language="shell" .content="${curlSyntax.trim()}"> </div> </div>`;
   }
-
   apiCallTemplate() {
     return (0, _lit.html)` <div style="display:flex;align-items:flex-end;margin:16px 0;font-size:var(--font-size-small)"> ${this.parameters.length > 0 || this.request_body ? (0, _lit.html)` <button class="m-btn thin-border" part="btn btn-outline" style="margin-right:5px" @click="${this.onClearRequestData}"> ${(0, _index.getI18nText)('operations.clear')} </button>` : ''} <button class="m-btn primary btn-execute thin-border" part="btn btn-fill btn-try" @click="${this.onTryClick}">${(0, _index.getI18nText)('operations.execute')}</button> </div> ${this.apiResponseTabTemplate()} `;
   }
   /* eslint-enable indent */
 
-
   onClearRequestData(e) {
     const requestPanelEl = e.target.closest('.request-panel');
     const requestPanelInputEls = [...requestPanelEl.querySelectorAll('input, tag-input, textarea:not(.is-hidden)')];
@@ -503,7 +441,6 @@ class ApiRequest extends _lit.LitElement {
     this.dispatchEvent(new CustomEvent('event', event));
     this.computeCurlSyntax();
   }
-
   recomputeFetchOptions() {
     const closestRespContainer = this.closest('.expanded-req-resp-container, .req-resp-container');
     const respEl = closestRespContainer && closestRespContainer.getElementsByTagName('api-response')[0];
@@ -514,25 +451,27 @@ class ApiRequest extends _lit.LitElement {
     const queryParamObjTypeEls = [...requestPanelEl.querySelectorAll("[data-ptype='query-object']")];
     const headerParamEls = [...requestPanelEl.querySelectorAll("[data-ptype='header']")];
     const requestBodyContainerEl = requestPanelEl.querySelector('.request-body-container');
-    let pathUrl = `${this.serverUrl.replace(/\/$/, '')}${this.path.replaceAll(' ', '')}`; // Generate URL using Path Params
+    let pathUrl = `${this.serverUrl.replace(/\/$/, '')}${this.path.replaceAll(' ', '')}`;
 
+    // Generate URL using Path Params
     const pathParameterMap = {};
     pathParamEls.map(el => {
       pathParameterMap[el.dataset.pname] = el.value;
       pathUrl = pathUrl.replace(`{${el.dataset.pname}}`, encodeURIComponent(el.value) || '-');
-    }); // Handle relative serverUrls
+    });
 
+    // Handle relative serverUrls
     if (!pathUrl.startsWith('http')) {
       const newUrl = new URL(pathUrl, window.location.href);
       pathUrl = newUrl.toString();
     }
-
     const fetchUrl = new URL(pathUrl);
     const fetchOptions = {
       method: this.method.toUpperCase(),
       headers: new Headers()
-    }; // Query Params
+    };
 
+    // Query Params
     const queryParameterMap = {};
     queryParamEls.forEach(el => {
       if (!el.dataset.array || el.dataset.array === 'false') {
@@ -545,7 +484,6 @@ class ApiRequest extends _lit.LitElement {
         const paramSerializeExplode = el.dataset.paramSerializeExplode;
         const values = Array.isArray(el.value) ? el.value.filter(v => v !== '') : [];
         queryParameterMap[el.dataset.pname] = values;
-
         if (values.length > 0) {
           if (paramSerializeStyle === 'spaceDelimited') {
             fetchUrl.searchParams.append(el.dataset.pname, values.join(' ').replace(/^\s|\s$/g, ''));
@@ -563,15 +501,15 @@ class ApiRequest extends _lit.LitElement {
           }
         }
       }
-    }); // Query Params (Dynamic - create from JSON)
+    });
 
+    // Query Params (Dynamic - create from JSON)
     queryParamObjTypeEls.map(el => {
       try {
         let queryParamObj = {};
         const paramSerializeStyle = el.dataset.paramSerializeStyle;
         const paramSerializeExplode = el.dataset.paramSerializeExplode;
         queryParamObj = Object.assign(queryParamObj, JSON.parse(el.value.replace(/\s+/g, ' ')));
-
         for (const key in queryParamObj) {
           if (typeof queryParamObj[key] === 'object') {
             if (Array.isArray(queryParamObj[key])) {
@@ -597,52 +535,51 @@ class ApiRequest extends _lit.LitElement {
       } catch (err) {
         console.log('OpenAPI Explorer: unable to parse %s into object', el.value); // eslint-disable-line no-console
       }
-    }); // Add Authentication api keys if provided
+    });
 
+    // Add Authentication api keys if provided
     this.api_keys.filter(v => v.finalKeyValue).forEach(v => {
       if (v.in === 'query') {
         fetchUrl.searchParams.append(v.name, v.finalKeyValue);
         return;
-      } // Otherwise put it in the header
-
+      }
 
+      // Otherwise put it in the header
       fetchOptions.headers.append(v.name, v.finalKeyValue);
     });
-
     if (acceptHeader) {
       // Uses the acceptHeader from Response panel
       fetchOptions.headers.append('Accept', acceptHeader);
     } else if (this.accept) {
       fetchOptions.headers.append('Accept', this.accept);
-    } // Add Header Params
-
+    }
 
+    // Add Header Params
     headerParamEls.map(el => {
       if (el.value) {
         fetchOptions.headers.append(el.dataset.pname, el.value);
       }
-    }); // Request Body Params
-    // url-encoded Form Params (dynamic) - Parse JSON and generate Params
+    });
 
-    const formUrlDynamicTextAreaEl = requestPanelEl.querySelector("[data-ptype='dynamic-form']"); // url-encoded Form Params (regular)
+    // Request Body Params
 
+    // url-encoded Form Params (dynamic) - Parse JSON and generate Params
+    const formUrlDynamicTextAreaEl = requestPanelEl.querySelector("[data-ptype='dynamic-form']");
+    // url-encoded Form Params (regular)
     const rawFormInputEls = [...requestPanelEl.querySelectorAll("[data-ptype='form-input']")];
     const patternPropertyKeyEls = [...requestPanelEl.querySelectorAll("[data-ptype='pattern-property-key']")];
     const patternPropertyInputEls = rawFormInputEls.filter(el => (0, _schemaUtils.isPatternProperty)(el.dataset.pname));
     const formInputEls = rawFormInputEls.filter(el => !(0, _schemaUtils.isPatternProperty)(el.dataset.pname));
     let curlData = '';
     let curlForm = '';
-
     if (requestBodyContainerEl) {
       const requestBodyType = requestBodyContainerEl.dataset.selectedRequestBodyType;
-
       if (requestBodyType.includes('form-urlencoded')) {
         if (formUrlDynamicTextAreaEl) {
           const val = formUrlDynamicTextAreaEl.value;
           const formUrlDynParams = new URLSearchParams();
           let proceed = true;
           let tmpObj;
-
           if (val) {
             try {
               tmpObj = JSON.parse(val);
@@ -653,12 +590,10 @@ class ApiRequest extends _lit.LitElement {
           } else {
             proceed = false;
           }
-
           if (proceed) {
             for (const prop in tmpObj) {
               formUrlDynParams.append(prop, JSON.stringify(tmpObj[prop]));
             }
-
             fetchOptions.body = formUrlDynParams;
             curlData = ` \\\n  -d ${formUrlDynParams.toString()}`;
           }
@@ -666,13 +601,10 @@ class ApiRequest extends _lit.LitElement {
           const formUrlParams = new URLSearchParams();
           patternPropertyInputEls.concat(formInputEls).forEach((el, counter) => {
             var _patternPropertyKeyEl;
-
             const keyName = ((_patternPropertyKeyEl = patternPropertyKeyEls[counter]) === null || _patternPropertyKeyEl === void 0 ? void 0 : _patternPropertyKeyEl.value) || el.dataset.pname;
-
             if (el.type === 'file') {
               return;
             }
-
             if (el.dataset.array === 'false') {
               if (el.value) {
                 formUrlParams.append(keyName, el.value);
@@ -689,9 +621,7 @@ class ApiRequest extends _lit.LitElement {
         const formDataParams = new FormData();
         patternPropertyInputEls.concat(formInputEls).forEach((el, counter) => {
           var _patternPropertyKeyEl2;
-
           const keyName = ((_patternPropertyKeyEl2 = patternPropertyKeyEls[counter]) === null || _patternPropertyKeyEl2 === void 0 ? void 0 : _patternPropertyKeyEl2.value) || el.dataset.pname;
-
           if (el.dataset.array === 'false') {
             if (el.type === 'file' && el.files[0]) {
               formDataParams.append(keyName, el.files[0], el.files[0].name);
@@ -710,45 +640,35 @@ class ApiRequest extends _lit.LitElement {
         fetchOptions.body = formDataParams;
       } else if (mediaFileRegex.test(requestBodyType) || textFileRegex.test(requestBodyType)) {
         const bodyParamFileEl = requestPanelEl.querySelector('.request-body-param-file');
-
         if (bodyParamFileEl && bodyParamFileEl.files[0]) {
           fetchOptions.body = bodyParamFileEl.files[0];
           curlData = ` \\\n  --data-binary @${bodyParamFileEl.files[0].name}`;
         }
       } else if (requestBodyType.includes('json') || requestBodyType.includes('xml') || requestBodyType.includes('text')) {
         const exampleTextAreaEl = requestPanelEl.querySelector('.request-body-param-user-input');
-
         if (exampleTextAreaEl && exampleTextAreaEl.value) {
           fetchOptions.body = exampleTextAreaEl.value;
-
           if (requestBodyType.includes('json')) {
             fetchOptions.body = JSON.stringify(_json.default.parse(exampleTextAreaEl.value));
-
             try {
               curlData = ` \\\n  -d '${fetchOptions.body}'`;
-            } catch (err) {
-              /* Ignore unparseable JSON */
-            }
+            } catch (err) {/* Ignore unparseable JSON */}
           }
-
           if (!curlData) {
             // Save single quotes wrapped => 'text' => `"'"text"'"`
             curlData = ` \\\n  -d '${fetchOptions.body.replace(/'/g, '\'"\'"\'')}'`;
           }
         }
-      } // Common for all request-body
-
-
+      }
+      // Common for all request-body
       if (!requestBodyType.includes('form-data')) {
         // For multipart/form-data don't set the content-type to allow creation of browser generated part boundaries
         fetchOptions.headers.append('Content-Type', requestBodyType);
       }
     }
-
     if (this.fetchCredentials) {
       fetchOptions.credentials = this.fetchCredentials;
     }
-
     return {
       fetchOptions,
       fetchUrl,
@@ -760,7 +680,6 @@ class ApiRequest extends _lit.LitElement {
       }
     };
   }
-
   computeCurlSyntax(headerOverride) {
     const {
       fetchOptions,
@@ -772,9 +691,9 @@ class ApiRequest extends _lit.LitElement {
     const curlHeaders = [...headers.entries()].reduce((acc, [key, value]) => `${acc} \\\n  -H "${key}: ${value}"`, '');
     this.curlSyntax = `${curl}${curlHeaders}${curlParts.data}${curlParts.form}`;
     this.requestUpdate();
-  } // onExecuteButtonClicked
-
+  }
 
+  // onExecuteButtonClicked
   async onTryClick() {
     const tryBtnEl = this.querySelectorAll('.btn-execute')[0];
     const {
@@ -785,13 +704,12 @@ class ApiRequest extends _lit.LitElement {
     } = this.recomputeFetchOptions();
     this.responseIsBlob = false;
     this.respContentDisposition = '';
-
     if (this.responseBlobUrl) {
       URL.revokeObjectURL(this.responseBlobUrl);
       this.responseBlobUrl = '';
-    } // Options is legacy usage, documentation has been updated to reference properties of the fetch option directly, but older usages may still be using options
-
+    }
 
+    // Options is legacy usage, documentation has been updated to reference properties of the fetch option directly, but older usages may still be using options
     const fetchRequest = {
       explorerLocation: this.elementId,
       url: fetchUrl.toString(),
@@ -818,7 +736,6 @@ class ApiRequest extends _lit.LitElement {
     const fetchRequestObject = new Request(fetchRequest.url, newFetchOptions);
     this.computeCurlSyntax(newFetchOptions.headers);
     let fetchResponse;
-
     try {
       let respBlob;
       let respJson;
@@ -849,7 +766,6 @@ class ApiRequest extends _lit.LitElement {
       const contentType = fetchResponse.headers.get('content-type');
       this.responseContentType = contentType;
       const respEmpty = (await fetchResponse.clone().text()).length === 0;
-
       if (respEmpty) {
         this.responseText = '';
       } else if (contentType) {
@@ -857,13 +773,11 @@ class ApiRequest extends _lit.LitElement {
           if (/charset=[^"']+/.test(contentType)) {
             const encoding = contentType.split('charset=')[1];
             const buffer = await fetchResponse.arrayBuffer();
-
             try {
               respText = new TextDecoder(encoding).decode(buffer);
             } catch (_) {
               respText = new TextDecoder('utf-8').decode(buffer);
             }
-
             try {
               this.responseText = JSON.stringify(JSON.parse(respText), null, 8);
             } catch (_) {
@@ -884,7 +798,6 @@ class ApiRequest extends _lit.LitElement {
           this.responseBlobType = 'view';
         } else {
           respText = await fetchResponse.text();
-
           if (contentType.includes('xml')) {
             this.responseText = (0, _xmlButPrettier.default)(respText, {
               textNodesOnSameLine: true,
@@ -894,10 +807,8 @@ class ApiRequest extends _lit.LitElement {
             this.responseText = respText;
           }
         }
-
         if (this.responseIsBlob) {
           var _filename$;
-
           const contentDisposition = fetchResponse.headers.get('content-disposition');
           const filenameRegex = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/;
           const filename = filenameRegex.exec(contentDisposition);
@@ -909,7 +820,6 @@ class ApiRequest extends _lit.LitElement {
         respText = await fetchResponse.text();
         this.responseText = respText;
       }
-
       const responseEvent = {
         bubbles: true,
         composed: true,
@@ -941,46 +851,45 @@ class ApiRequest extends _lit.LitElement {
       document.dispatchEvent(new CustomEvent('after-try', responseEvent));
       document.dispatchEvent(new CustomEvent('response', responseEvent));
     }
-
     this.requestUpdate();
   }
-
   onAddRemoveFileInput(e, pname) {
     if (e.target.tagName.toLowerCase() !== 'button') {
       return;
     }
-
     if (e.target.classList.contains('file-input-remove-btn')) {
       // Remove File Input Set
       const el = e.target.closest('.input-set');
       el.remove();
       return;
     }
+    const el = e.target.closest('.file-input-container');
 
-    const el = e.target.closest('.file-input-container'); // Add File Input Set
-    // Container
+    // Add File Input Set
 
+    // Container
     const newInputContainerEl = document.createElement('div');
-    newInputContainerEl.setAttribute('class', 'input-set row'); // File Input
+    newInputContainerEl.setAttribute('class', 'input-set row');
 
+    // File Input
     const newInputEl = document.createElement('input');
     newInputEl.type = 'file';
     newInputEl.setAttribute('class', 'file-input');
     newInputEl.setAttribute('data-pname', pname);
     newInputEl.setAttribute('data-ptype', 'form-input');
     newInputEl.setAttribute('data-array', 'false');
-    newInputEl.setAttribute('data-file-array', 'true'); // Remover Button
+    newInputEl.setAttribute('data-file-array', 'true');
 
+    // Remover Button
     const newRemoveBtnEl = document.createElement('button');
     newRemoveBtnEl.setAttribute('class', 'file-input-remove-btn');
     newRemoveBtnEl.innerHTML = '&#x2715;';
     newInputContainerEl.appendChild(newInputEl);
     newInputContainerEl.appendChild(newRemoveBtnEl);
-    el.insertBefore(newInputContainerEl, e.target); // el.appendChild(newInputContainerEl);
-
+    el.insertBefore(newInputContainerEl, e.target);
+    // el.appendChild(newInputContainerEl);
     this.computeCurlSyntax();
   }
-
   downloadResponseBlob() {
     if (this.responseBlobUrl) {
       const a = document.createElement('a');
@@ -992,7 +901,6 @@ class ApiRequest extends _lit.LitElement {
       a.remove();
     }
   }
-
   viewResponseBlob() {
     if (this.responseBlobUrl) {
       const a = document.createElement('a');
@@ -1004,7 +912,6 @@ class ApiRequest extends _lit.LitElement {
       a.remove();
     }
   }
-
   clearResponseData() {
     this.responseUrl = '';
     this.responseHeaders = '';
@@ -1015,35 +922,29 @@ class ApiRequest extends _lit.LitElement {
     this.responseIsBlob = false;
     this.responseBlobType = '';
     this.respContentDisposition = '';
-
     if (this.responseBlobUrl) {
       URL.revokeObjectURL(this.responseBlobUrl);
       this.responseBlobUrl = '';
     }
   }
-
   requestParamFunction(event) {
     if (event.key === 'Enter') {
       this.onTryClick();
       event.preventDefault();
     }
   }
-
   disconnectedCallback() {
     // Cleanup ObjectURL forthe blob data if this component created one
     if (this.responseBlobUrl) {
       URL.revokeObjectURL(this.responseBlobUrl);
       this.responseBlobUrl = '';
     }
-
     super.disconnectedCallback();
   }
+}
 
-} // Register the element with the browser
-
-
+// Register the element with the browser
 exports.default = ApiRequest;
-
 if (!customElements.get('openapi-explorer')) {
   customElements.define('api-request', ApiRequest);
 }