openapi-explorer 1.0.571 → 1.1.578

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

@@ -7,7 +7,7 @@ import { keyed } from 'lit/directives/keyed.js';
 import formatXml from 'xml-but-prettier';
 import { copyToClipboard } from '../utils/common-utils';
 import { getI18nText } from '../languages';
-import { schemaInObjectNotation, getTypeInfo, generateExample } from '../utils/schema-utils';
+import { schemaInObjectNotation, getTypeInfo, generateExample, isPatternProperty } from '../utils/schema-utils';
 import './json-tree';
 import './schema-tree';
 import getRequestFormTable from './request-form-table';
@@ -21,6 +21,7 @@ export default class ApiRequest extends LitElement {
 
   constructor() {
     super();
+    this.duplicatedRowsByKey = {};
     this.storedParamValues = {};
     this.responseMessage = '';
     this.responseStatus = '';
@@ -29,7 +30,7 @@ export default class ApiRequest extends LitElement {
     this.responseUrl = '';
     this.responseElapsedMs = 0;
     this.curlSyntax = '';
-    this.activeResponseTab = 'response'; // allowed values: response, headers, curl
+    this.activeResponseTab = 'curl'; // allowed values: response, headers, curl
 
     this.selectedRequestBodyType = '';
     this.selectedRequestBodyExample = '';
@@ -138,6 +139,10 @@ export default class ApiRequest extends LitElement {
         attribute: 'fetch-credentials'
       },
       // properties for internal tracking
+      duplicatedRowsByKey: {
+        type: Object
+      },
+      // Tracking duplicated rows in form table
       activeResponseTab: {
         type: String
       },
@@ -161,13 +166,8 @@ export default class ApiRequest extends LitElement {
   }
 
   updated(changedProperties) {
-    if (changedProperties.has('elementId')) {
-      this.selectedRequestBodyType = '';
-      this.selectedRequestBodyExample = '';
-    } // In focused mode after rendering the request component, update the text-areas(which contains examples) using the original values from hidden textareas.
+    // 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
@@ -235,7 +235,10 @@ export default class ApiRequest extends LitElement {
 
       tableRows.push(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 ? 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 ? html`<span style="opacity:0">*</span>` : ''} </div> </td> <td colspan="2" style="min-width:160px;vertical-align:top"> ${this.allowTry === 'true' ? paramSchema.type === 'array' && 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;
-      }}" .value="${(_this$storedParamValu = this.storedParamValues[param.name]) !== null && _this$storedParamValu !== void 0 ? _this$storedParamValu : this.fillRequestWithDefault === 'true' && Array.isArray(defaultVal) ? defaultVal : defaultVal.split(',')}"></tag-input> </div>` || paramSchema.type === 'object' && html` <textarea class="textarea small request-param" part="textarea small textarea-param" rows="3" data-ptype="${paramLocation}" data-pname="${param.name}" data-default="${defaultVal}" data-param-serialize-style="${paramStyle}" data-param-serialize-explode="${paramExplode}" spellcheck="false" placeholder="${paramSchema.example || defaultVal || ''}" style="width:100%;margin-top:1rem;margin-bottom:1rem" .value="${this.fillRequestWithDefault === 'true' ? defaultVal : ''}"></textarea>` || html` <input type="${paramSchema.format === 'password' ? 'password' : 'text'}" spellcheck="false" style="width:100%;margin-top:1rem;margin-bottom:1rem" 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' ? html` <td colspan="2" style="vertical-align:top"> ${param.description ? html` <div class="param-description" style="margin-top:1rem"> ${unsafeHTML(marked(param.description))} </div>` : ''} ${paramSchema.default || paramSchema.s || paramSchema.allowedValues || paramSchema.pattern ? html` <div class="param-constraint" style="margin-top:1rem"> ${paramSchema.constraints.length ? html`<span style="font-weight:700">Constraints: </span>${paramSchema.constraints.join(', ')}<br>` : ''} ${paramSchema.pattern ? 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) => html` ${i > 0 ? '|' : html`<span style="font-weight:700">Allowed: </span>`} ${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 => {
+        this.computeCurlSyntax();
+      }}" .value="${(_this$storedParamValu = this.storedParamValues[param.name]) !== null && _this$storedParamValu !== void 0 ? _this$storedParamValu : this.fillRequestWithDefault === 'true' && Array.isArray(defaultVal) ? defaultVal : defaultVal.split(',')}"></tag-input> </div>` || paramSchema.type === 'object' && html` <textarea class="textarea small request-param" part="textarea small textarea-param" rows="3" data-ptype="${paramLocation}" data-pname="${param.name}" data-default="${defaultVal}" data-param-serialize-style="${paramStyle}" data-param-serialize-explode="${paramExplode}" spellcheck="false" placeholder="${paramSchema.example || defaultVal || ''}" style="width:100%;margin-top:1rem;margin-bottom:1rem" .value="${this.fillRequestWithDefault === 'true' ? defaultVal : ''}"></textarea>` || html` <input type="${paramSchema.format === 'password' ? 'password' : 'text'}" spellcheck="false" style="width:100%;margin-top:1rem;margin-bottom:1rem" @input="${() => {
+        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' ? html` <td colspan="2" style="vertical-align:top"> ${param.description ? html` <div class="param-description" style="margin-top:1rem"> ${unsafeHTML(marked(param.description))} </div>` : ''} ${paramSchema.default || paramSchema.s || paramSchema.allowedValues || paramSchema.pattern ? html` <div class="param-constraint" style="margin-top:1rem"> ${paramSchema.constraints.length ? html`<span style="font-weight:700">Constraints: </span>${paramSchema.constraints.join(', ')}<br>` : ''} ${paramSchema.pattern ? 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) => html` ${i > 0 ? '|' : html`<span style="font-weight:700">Allowed: </span>`} ${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) {
@@ -308,6 +311,7 @@ export default class ApiRequest extends LitElement {
   resetRequestBodySelection() {
     this.selectedRequestBodyType = '';
     this.selectedRequestBodyExample = '';
+    this.computeCurlSyntax();
     this.clearResponseData();
   } // Request-Body Event Handlers
 
@@ -319,6 +323,7 @@ export default class ApiRequest extends LitElement {
       const exampleTextareaEl = selectEl.closest('.example-panel').querySelector('.request-body-param');
       const userInputExampleTextareaEl = selectEl.closest('.example-panel').querySelector('.request-body-param-user-input');
       userInputExampleTextareaEl.value = exampleTextareaEl.value;
+      this.computeCurlSyntax();
     }, 0, exampleDropdownEl);
   }
 
@@ -333,6 +338,8 @@ export default class ApiRequest extends LitElement {
         const userInputExampleTextareaEl = selectEl.closest('.request-body-container').querySelector('.request-body-param-user-input');
         userInputExampleTextareaEl.value = exampleTextareaEl.value;
       }
+
+      this.computeCurlSyntax();
     }, 0, mimeDropdownEl);
   }
 
@@ -410,7 +417,7 @@ export default class ApiRequest extends LitElement {
       }
     }
 
-    return html` <div class="request-body-container" data-selected-request-body-type="${this.selectedRequestBodyType}"> <div class="table-title top-gap row"> REQUEST BODY ${this.request_body.required ? 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 ? html`<div class="m-markdown" style="margin-bottom:12px">${unsafeHTML(marked(this.request_body.description))}</div>` : ''} ${reqBodySchemaHtml || reqBodyDefaultHtml ? html` <div class="tab-panel col" style="border-width:0 0 1px 0"> <div class="tab-buttons row" @click="${e => {
+    return html` <div class="request-body-container" data-selected-request-body-type="${this.selectedRequestBodyType}"> <div class="table-title top-gap row"> ${getI18nText('operations.request-body')} ${this.request_body.required ? 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 ? html`<div class="m-markdown" style="margin-bottom:12px">${unsafeHTML(marked(this.request_body.description))}</div>` : ''} ${reqBodySchemaHtml || reqBodyDefaultHtml ? 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;
       }
@@ -431,14 +438,16 @@ export default class ApiRequest extends LitElement {
 
 
   apiResponseTabTemplate() {
+    const curlSyntax = this.curlSyntax || this.computeCurlSyntax() || '';
+    const hasResponse = this.responseMessage !== '';
     const responseFormat = this.responseHeaders.includes('json') ? 'json' : this.responseHeaders.includes('html') || this.responseHeaders.includes('xml') ? 'html' : '';
-    return html` <div class="row" style="font-size:var(--font-size-small);margin:5px 0"> ${this.responseMessage ? html`<div class="response-message ${this.responseStatus}">Response Status: ${this.responseMessage} ${this.responseElapsedMs ? html`<span><br>Execution Time: ${this.responseElapsedMs}ms</span>` : ''} </div>` : ''} <div style="flex:1"></div> <button class="m-btn" part="btn btn-outline" @click="${this.clearResponseData}">CLEAR RESPONSE</button> </div> <div class="tab-panel col" style="border-width:0 0 1px 0"> <div id="tab_buttons" class="tab-buttons row" @click="${e => {
+    return html` <div class="row" style="font-size:var(--font-size-small);margin:5px 0"> ${this.responseMessage ? html`<div class="response-message ${this.responseStatus}">Response Status: ${this.responseMessage} ${this.responseElapsedMs ? html`<span><br>Execution Time: ${this.responseElapsedMs}ms</span>` : ''} </div>` : ''} <div style="flex:1"></div> ${!hasResponse ? '' : html`<button class="m-btn" part="btn btn-outline" @click="${this.clearResponseData}">CLEAR RESPONSE</button>`} </div> <div class="tab-panel col" style="border-width:0 0 1px 0"> <div id="tab_buttons" class="tab-buttons row" @click="${e => {
       if (e.target.classList.contains('tab-btn') === false) {
         return;
       }
 
       this.activeResponseTab = e.target.dataset.tab;
-    }}"> <button class="tab-btn ${this.activeResponseTab === 'response' ? 'active' : ''}" data-tab="response">${getI18nText('operations.response')}</button> <button class="tab-btn ${this.activeResponseTab === 'headers' ? 'active' : ''}" data-tab="headers">${getI18nText('operations.response-headers')}</button> <button class="tab-btn ${this.activeResponseTab === 'curl' ? 'active' : ''}" data-tab="curl">CURL</button> </div> ${this.responseIsBlob ? html` <div class="tab-content col" style="flex:1;display:${this.activeResponseTab === 'response' ? 'flex' : 'none'}"> <button class="m-btn thin-border mar-top-8" style="width:135px" @click="${this.downloadResponseBlob}" part="btn btn-outline">DOWNLOAD</button> ${this.responseBlobType === 'view' ? 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>` : html` <div class="tab-content col m-markdown" style="flex:1;display:${this.activeResponseTab === 'response' ? 'flex' : 'none'}"> ${this.responseText ? html`<button class="m-btn outline-primary toolbar-copy-btn" @click="${e => {
+    }}"> <br> <div style="width:100%"> ${!hasResponse ? '' : html` <button class="tab-btn ${this.activeResponseTab === 'response' ? 'active' : ''}" data-tab="response">${getI18nText('operations.response')}</button> <button class="tab-btn ${this.activeResponseTab === 'headers' ? 'active' : ''}" data-tab="headers">${getI18nText('operations.response-headers')}</button>`} <button class="tab-btn ${!hasResponse || this.activeResponseTab === 'curl' ? 'active' : ''}" data-tab="curl">FULL REQUEST</button> </div> </div> ${this.responseIsBlob ? html` <div class="tab-content col" style="flex:1;display:${this.activeResponseTab === 'response' ? 'flex' : 'none'}"> <button class="m-btn thin-border mar-top-8" style="width:135px" @click="${this.downloadResponseBlob}" part="btn btn-outline">DOWNLOAD</button> ${this.responseBlobType === 'view' ? 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>` : html` <div class="tab-content col m-markdown" style="flex:1;display:${this.activeResponseTab === 'response' ? 'flex' : 'none'}"> ${this.responseText ? html`<button class="m-btn outline-primary toolbar-copy-btn" @click="${e => {
       copyToClipboard(this.responseText, e);
     }}" part="btn btn-fill">${getI18nText('operations.copy')}</button>` : ''} <pre style="min-height:60px" @copy="${() => {
       copyToClipboard(window.getSelection().toString());
@@ -446,14 +455,14 @@ export default class ApiRequest extends LitElement {
               </pre> </div>`} <div class="tab-content col m-markdown" style="flex:1;display:${this.activeResponseTab === 'headers' ? 'flex' : 'none'}"> <button class="m-btn outline-primary toolbar-copy-btn" @click="${e => {
       copyToClipboard(this.responseHeaders, e);
     }}" part="btn btn-fill">${getI18nText('operations.copy')}</button> <pre><code>${unsafeHTML(Prism.highlight(this.responseHeaders, Prism.languages.css, 'css'))}</code></pre> </div> <div class="tab-content col m-markdown" style="flex:1;display:${this.activeResponseTab === 'curl' ? 'flex' : 'none'}"> <button class="m-btn outline-primary toolbar-copy-btn" @click="${e => {
-      copyToClipboard(this.curlSyntax, e);
+      copyToClipboard(curlSyntax, e);
     }}" part="btn btn-fill">${getI18nText('operations.copy')}</button> <pre class="fs-exclude" data-hj-suppress data-sl="mask">
-            <code>${unsafeHTML(Prism.highlight(this.curlSyntax.trim(), Prism.languages.shell, 'shell'))}</code>
+            <code>${unsafeHTML(Prism.highlight(curlSyntax.trim(), Prism.languages.shell, 'shell'))}</code>
           </pre> </div> </div>`;
   }
 
   apiCallTemplate() {
-    return 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 ? html` <button class="m-btn thin-border" part="btn btn-outline" style="margin-right:5px" @click="${this.onClearRequestData}"> ${getI18nText('operations.clear')} </button>` : ''} <button class="m-btn primary btn-execute thin-border" part="btn btn-fill btn-try" @click="${this.onTryClick}">${getI18nText('operations.execute')}</button> </div> ${this.responseMessage === '' ? '' : this.apiResponseTabTemplate()} `;
+    return 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 ? html` <button class="m-btn thin-border" part="btn btn-outline" style="margin-right:5px" @click="${this.onClearRequestData}"> ${getI18nText('operations.clear')} </button>` : ''} <button class="m-btn primary btn-execute thin-border" part="btn btn-fill btn-try" @click="${this.onTryClick}">${getI18nText('operations.execute')}</button> </div> ${this.apiResponseTabTemplate()} `;
   }
   /* eslint-enable indent */
 
@@ -477,12 +486,10 @@ export default class ApiRequest extends LitElement {
       }
     };
     this.dispatchEvent(new CustomEvent('event', event));
+    this.computeCurlSyntax();
   }
 
-  async onTryClick() {
-    const tryBtnEl = this.querySelectorAll('.btn-execute')[0];
-    let curlData = '';
-    let curlForm = '';
+  recomputeFetchOptions() {
     const closestRespContainer = this.closest('.expanded-req-resp-container, .req-resp-container');
     const respEl = closestRespContainer && closestRespContainer.getElementsByTagName('api-response')[0];
     const acceptHeader = respEl === null || respEl === void 0 ? void 0 : respEl.selectedMimeType;
@@ -602,14 +609,21 @@ export default class ApiRequest extends LitElement {
         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)
+
+    const rawFormInputEls = [...requestPanelEl.querySelectorAll("[data-ptype='form-input']")];
+    const patternPropertyKeyEls = [...requestPanelEl.querySelectorAll("[data-ptype='pattern-property-key']")];
+    const patternPropertyInputEls = rawFormInputEls.filter(el => isPatternProperty(el.dataset.pname));
+    const formInputEls = rawFormInputEls.filter(el => !isPatternProperty(el.dataset.pname));
+    let curlData = '';
+    let curlForm = '';
 
     if (requestBodyContainerEl) {
       const requestBodyType = requestBodyContainerEl.dataset.selectedRequestBodyType;
 
       if (requestBodyType.includes('form-urlencoded')) {
-        // url-encoded Form Params (dynamic) - Parse JSON and generate Params
-        const formUrlDynamicTextAreaEl = requestPanelEl.querySelector("[data-ptype='dynamic-form']");
-
         if (formUrlDynamicTextAreaEl) {
           const val = formUrlDynamicTextAreaEl.value;
           const formUrlDynParams = new URLSearchParams();
@@ -636,17 +650,23 @@ export default class ApiRequest extends LitElement {
             curlData = ` \\\n  -d ${formUrlDynParams.toString()}`;
           }
         } else {
-          // url-encoded Form Params (regular)
-          const formUrlEls = [...requestPanelEl.querySelectorAll("[data-ptype='form-urlencode']")];
           const formUrlParams = new URLSearchParams();
-          formUrlEls.filter(v => v.type !== 'file').forEach(el => {
+          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(el.dataset.pname, el.value);
+                formUrlParams.append(keyName, el.value);
               }
             } else {
               const vals = el.value && Array.isArray(el.value) ? el.value.join(',') : '';
-              formUrlParams.append(el.dataset.pname, vals);
+              formUrlParams.append(keyName, vals);
             }
           });
           fetchOptions.body = formUrlParams;
@@ -654,21 +674,24 @@ export default class ApiRequest extends LitElement {
         }
       } else if (requestBodyType.includes('form-data')) {
         const formDataParams = new FormData();
-        const formDataEls = [...requestPanelEl.querySelectorAll("[data-ptype='form-data']")];
-        formDataEls.forEach(el => {
+        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(el.dataset.pname, el.files[0], el.files[0].name);
-              curlForm += ` \\\n  -F "${el.dataset.pname}=@${el.files[0].name}"`;
+              formDataParams.append(keyName, el.files[0], el.files[0].name);
+              curlForm += ` \\\n  -F "${keyName}=@${el.files[0].name}"`;
             } else if (el.value) {
-              formDataParams.append(el.dataset.pname, el.value);
-              curlForm += ` \\\n  -F "${el.dataset.pname}=${el.value}"`;
+              formDataParams.append(keyName, el.value);
+              curlForm += ` \\\n  -F "${keyName}=${el.value}"`;
             }
           } else if (el.value && Array.isArray(el.value)) {
             el.value.forEach(v => {
-              curlForm += ` \\\n  -F "${el.dataset.pname}[]=${v}"`;
+              curlForm += ` \\\n  -F "${keyName}[]=${v}"`;
             });
-            formDataParams.append(el.dataset.pname, el.value.join(','));
+            formDataParams.append(keyName, el.value.join(','));
           }
         });
         fetchOptions.body = formDataParams;
@@ -707,16 +730,46 @@ export default class ApiRequest extends LitElement {
       }
     }
 
+    if (this.fetchCredentials) {
+      fetchOptions.credentials = this.fetchCredentials;
+    }
+
+    return {
+      fetchOptions,
+      fetchUrl,
+      curlParts: {
+        data: curlData,
+        form: curlForm
+      }
+    };
+  }
+
+  computeCurlSyntax(headerOverride) {
+    const {
+      fetchOptions,
+      fetchUrl,
+      curlParts
+    } = this.recomputeFetchOptions();
+    const curl = `curl -X ${this.method.toUpperCase()} "${fetchUrl.toString()}"`;
+    const headers = headerOverride !== null && headerOverride !== void 0 ? headerOverride : fetchOptions.headers;
+    const curlHeaders = [...headers.entries()].reduce((acc, [key, value]) => `${acc} \\\n  -H "${key}: ${value}"`, '');
+    this.curlSyntax = `${curl}${curlHeaders}${curlParts.data}${curlParts.form}`;
+    this.requestUpdate();
+  } // onExecuteButtonClicked
+
+
+  async onTryClick() {
+    const tryBtnEl = this.querySelectorAll('.btn-execute')[0];
+    const {
+      fetchOptions,
+      fetchUrl
+    } = this.recomputeFetchOptions();
     this.responseIsBlob = false;
     this.respContentDisposition = '';
 
     if (this.responseBlobUrl) {
       URL.revokeObjectURL(this.responseBlobUrl);
       this.responseBlobUrl = '';
-    }
-
-    if (this.fetchCredentials) {
-      fetchOptions.credentials = this.fetchCredentials;
     } // Options is legacy usage, documentation has been updated to reference properties of the fetch option directly, but older usages may still be using options
 
 
@@ -742,9 +795,7 @@ export default class ApiRequest extends LitElement {
       body: fetchRequest.body || fetchOptions.body
     };
     const fetchRequestObject = new Request(fetchRequest.url, newFetchOptions);
-    const curl = `curl -X ${this.method.toUpperCase()} "${fetchUrl.toString()}"`;
-    const curlHeaders = [...newFetchOptions.headers.entries()].reduce((acc, [key, value]) => `${acc} \\\n  -H "${key}: ${value}"`, '');
-    this.curlSyntax = `${curl}${curlHeaders}${curlData}${curlForm}`;
+    this.computeCurlSyntax(newFetchOptions.headers);
     let fetchResponse;
 
     try {
@@ -758,6 +809,7 @@ export default class ApiRequest extends LitElement {
       this.responseUrl = '';
       this.responseHeaders = '';
       this.responseText = '⌛';
+      this.activeResponseTab = 'response';
       this.requestUpdate();
       const awaiter = new Promise(resolve => setTimeout(resolve, 200));
       fetchResponse = await fetch(fetchRequestObject);
@@ -864,7 +916,7 @@ export default class ApiRequest extends LitElement {
     }
   }
 
-  onAddRemoveFileInput(e, pname, ptype) {
+  onAddRemoveFileInput(e, pname) {
     if (e.target.tagName.toLowerCase() !== 'button') {
       return;
     }
@@ -886,7 +938,7 @@ export default class ApiRequest extends LitElement {
     newInputEl.type = 'file';
     newInputEl.setAttribute('class', 'file-input');
     newInputEl.setAttribute('data-pname', pname);
-    newInputEl.setAttribute('data-ptype', ptype.includes('form-urlencode') ? 'form-urlencode' : 'form-data');
+    newInputEl.setAttribute('data-ptype', 'form-input');
     newInputEl.setAttribute('data-array', 'false');
     newInputEl.setAttribute('data-file-array', 'true'); // Remover Button
 
@@ -896,6 +948,8 @@ export default class ApiRequest extends LitElement {
     newInputContainerEl.appendChild(newInputEl);
     newInputContainerEl.appendChild(newRemoveBtnEl);
     el.insertBefore(newInputContainerEl, e.target); // el.appendChild(newInputContainerEl);
+
+    this.computeCurlSyntax();
   }
 
   downloadResponseBlob() {

package/dist/es/components/request-form-table.js

@@ -2,6 +2,9 @@
 import { html } from 'lit';
 import { marked } from 'marked';
 import { unsafeHTML } from 'lit/directives/unsafe-html.js';
+import { isPatternProperty } from '../utils/schema-utils';
+import { map } from 'lit/directives/map.js';
+import { range } from 'lit/directives/range.js';
 
 function generateFormRows(data, options, dataType = 'object', key = '', description = '', schemaLevel = 0) {
   const newSchemaLevel = data['::type'] && data['::type'].startsWith('xxx-of') ? schemaLevel : schemaLevel + 1;
@@ -45,6 +48,20 @@ function generateFormRows(data, options, dataType = 'object', key = '', descript
 
 
   const parsedData = JSON.parse(data);
+  return generatePrimitiveRow.call(this, parsedData, {
+    key,
+    keyLabel,
+    keyDescr,
+    description,
+    dataType,
+    isRequired,
+    options
+  });
+}
+
+function generatePrimitiveRow(rowData, parentRecursionOptions) {
+  var _this$duplicatedRowsB;
+
   const {
     type,
     format,
@@ -57,13 +74,46 @@ function generateFormRows(data, options, dataType = 'object', key = '', descript
     schemaDescription,
     schemaTitle,
     deprecated
-  } = parsedData;
+  } = rowData;
+  const {
+    key,
+    keyLabel,
+    keyDescr,
+    description,
+    dataType,
+    isRequired,
+    options
+  } = parentRecursionOptions;
 
   if (readOrWriteOnly === '🆁') {
     return undefined;
   }
 
-  return html` <tr> <td style="width:160px;min-width:100px"> <div class="param-name ${deprecated ? 'deprecated' : ''}"> ${!deprecated && isRequired ? html`<span class="key-label">${keyLabel}</span><span style="color:var(--red)">*</span>` : key.startsWith('::OPTION') ? html`<span class="xxx-of-key">${keyLabel}</span><span class="xxx-of-descr">${keyDescr}</span>` : html`${keyLabel ? html`<span class="key-label"> ${keyLabel}</span>` : html`<span class="xxx-of-descr">${schemaTitle}</span>`}`} </div> <div class="param-type"> ${dataType === 'array' ? html`[<span>${format || type}</span>]` : `${format || type}`} </div> </td> ${dataType === 'array' ? getArrayFormField.call(this, keyLabel, example, defaultValue, format, options) : ''} ${dataType !== 'array' ? getPrimitiveFormField.call(this, keyLabel, example, defaultValue, format, options) : ''} <td> ${description ? html`<div class="param-description">${unsafeHTML(marked(description))}</div>` : ''} ${defaultValue || constraints || allowedValues || pattern ? html` <div class="param-constraint"> ${pattern ? html`<span style="font-weight:700">Pattern: </span>${pattern}<br>` : ''} ${constraints.length ? html`<span style="font-weight:700">Constraints: </span>${constraints.join(', ')}<br>` : ''} ${allowedValues === null || allowedValues === void 0 ? void 0 : allowedValues.split('┃').map((v, i) => html` ${i > 0 ? '|' : html`<span style="font-weight:700">Allowed: </span>`} ${html` <a part="anchor anchor-param-constraint" data-type="${type === 'array' ? type : 'string'}" data-enum="${v.trim()}" @click="${e => {
+  const elementId = this.elementId || `${this.method}-${this.path}`;
+  const duplicateRowGeneratorKey = `${elementId}-${key}`;
+
+  const rowGenerator = e => {
+    var _e$target$dataset, _e$target$dataset2;
+
+    if (((_e$target$dataset = e.target.dataset) === null || _e$target$dataset === void 0 ? void 0 : _e$target$dataset.ptype) !== 'pattern-property-key' && !isPatternProperty((_e$target$dataset2 = e.target.dataset) === null || _e$target$dataset2 === void 0 ? void 0 : _e$target$dataset2.pname)) {
+      return;
+    } // If the row key has a value then add another row
+
+
+    const patternPropertyKeyEls = [...this.querySelectorAll("[data-ptype='pattern-property-key']")];
+    const patternPropertyInputEls = [...this.querySelectorAll("[data-ptype='form-input']")].filter(el => isPatternProperty(el.dataset.pname)); // If there is still some row that either has an empty key or an empty value, then skip adding a new row
+
+    if (patternPropertyKeyEls.some((keyElement, index) => !keyElement.value || !patternPropertyInputEls[index].value)) {
+      return;
+    }
+
+    if (e.target.value) {
+      this.duplicatedRowsByKey[duplicateRowGeneratorKey] = (this.duplicatedRowsByKey[duplicateRowGeneratorKey] || 1) + 1;
+      this.requestUpdate();
+    }
+  };
+
+  return map(range(((_this$duplicatedRowsB = this.duplicatedRowsByKey) === null || _this$duplicatedRowsB === void 0 ? void 0 : _this$duplicatedRowsB[duplicateRowGeneratorKey]) || 1), () => html` <tr> ${inputFieldKeyLabel.call(this, key.startsWith('::OPTION'), keyLabel, keyDescr, dataType, deprecated, isRequired, schemaTitle, format || type, rowGenerator)} ${dataType === 'array' ? getArrayFormField.call(this, keyLabel, example, defaultValue, format, rowGenerator) : ''} ${dataType !== 'array' ? getPrimitiveFormField.call(this, keyLabel, example, defaultValue, format, options, rowGenerator) : ''} <td> ${description ? html`<div class="param-description">${unsafeHTML(marked(description))}</div>` : ''} ${defaultValue || constraints || allowedValues || pattern ? html` <div class="param-constraint"> ${pattern ? html`<span style="font-weight:700">Pattern: </span>${pattern}<br>` : ''} ${constraints.length ? html`<span style="font-weight:700">Constraints: </span>${constraints.join(', ')}<br>` : ''} ${allowedValues === null || allowedValues === void 0 ? void 0 : allowedValues.split('┃').filter(v => v !== '').map((v, i) => html` ${i > 0 ? '|' : html`<span style="font-weight:700">Allowed: </span>`} ${html` <a part="anchor anchor-param-constraint" data-type="${type === 'array' ? type : 'string'}" data-enum="${v.trim()}" @click="${e => {
     const inputEl = e.target.closest('table').querySelector(`[data-pname="${keyLabel}"]`);
 
     if (inputEl) {
@@ -75,7 +125,17 @@ function generateFormRows(data, options, dataType = 'object', key = '', descript
     if (inputEl) {
       inputEl.value = e.target.dataset.exampleType === 'array' ? e.target.dataset.example.split('~|~') : e.target.dataset.example;
     }
-  }}"> ${type === 'array' ? example.join(', ') : example} </a> ${type === 'array' ? '] ' : ''} </span>` : ''} </td> </tr>` : ''}`;
+  }}"> ${type === 'array' ? example.join(', ') : example} </a> ${type === 'array' ? '] ' : ''} </span>` : ''} </td> </tr>` : ''}`);
+}
+
+function inputFieldKeyLabel(isOption, keyLabel, keyDescription, dataType, deprecated, isRequired, schemaTitle, format, rowGenerator) {
+  if (isPatternProperty(keyLabel)) {
+    return html` <td style="width:160px;min-width:100px"> <div class="param-name ${deprecated ? 'deprecated' : ''}"> <input placeholder="${keyLabel}" @change="${e => {
+      rowGenerator(e);
+    }}" .value="${''}" spellcheck="false" type="${format === 'binary' ? 'file' : format === 'password' ? 'password' : 'text'}" part="textbox textbox-param" style="width:100%" data-ptype="pattern-property-key" data-pname="${keyLabel}" data-default="${''}" data-array="false"> </div></td>`;
+  }
+
+  return html` <td style="width:160px;min-width:100px"> <div class="param-name ${deprecated ? 'deprecated' : ''}"> ${!deprecated && isRequired ? html`<span class="key-label">${keyLabel}</span><span style="color:var(--red)">*</span>` : isOption ? html`<span class="xxx-of-key">${keyLabel}</span><span class="xxx-of-descr">${keyDescription}</span>` : html`${keyLabel ? html`<span class="key-label"> ${keyLabel}</span>` : html`<span class="xxx-of-descr">${schemaTitle}</span>`}`} </div> <div class="param-type"> ${dataType === 'array' ? html`[<span>${format}</span>]` : `${format}`} </div> </td>`;
 } // function getObjectFormField(keyLabel, example, defaultValue, format, options) {
 //   return html`
 //     <td>
@@ -86,30 +146,36 @@ function generateFormRows(data, options, dataType = 'object', key = '', descript
 //             part = "textarea textarea-param"
 //             style = "width:100%; border:none; resize:vertical;"
 //             data-array = "false"
-//             data-ptype = "${options.mimeType.includes('form-urlencode') ? 'form-urlencode' : 'form-data'}"
+//             data-ptype = "form-input"
 //             data-pname = "${keyLabel}"
 //             data-default = "${defaultValue || ''}"
 //             spellcheck = "false"
 //             .value="${options.fillRequestWithDefault === 'true' ? defaultValue : ''}"
 //           ></textarea>
 //           <!-- This textarea(hidden) is to store the original example value, in focused mode on navbar change it is used to update the example text -->
-//           <textarea data-pname = "hidden-${keyLabel}" data-ptype = "${options.mimeType.includes('form-urlencode') ? 'hidden-form-urlencode' : 'hidden-form-data'}" class="is-hidden" style="display:none" .value="${defaultValue}"></textarea>
+//           <textarea data-pname = "hidden-${keyLabel}" data-ptype = "hidden-form-input" class="is-hidden" style="display:none" .value="${defaultValue}"></textarea>
 //         </div>
 //       </div>
 //     </td>`;
 // }
 
 
-function getArrayFormField(keyLabel, example, defaultValue, format, options) {
+function getArrayFormField(keyLabel, example, defaultValue, format, rowGenerator) {
   if (format === 'binary') {
-    return html`<td style="min-width:100px"> <div class="file-input-container col" style="align-items:flex-end" @click="${e => this.onAddRemoveFileInput(e, keyLabel, options.mimeType)}"> <div class="input-set row"> <input type="file" part="file-input" class="file-input" data-pname="${keyLabel}" data-ptype="${options.mimeType.includes('form-urlencode') ? 'form-urlencode' : 'form-data'}" data-array="false" data-file-array="true"> <button class="file-input-remove-btn"> &#x2715; </button> </div> <button class="m-btn primary file-input-add-btn" part="btn btn-fill" style="margin:2px 25px 0 0;padding:2px 6px">ADD</button> </div> </td>`;
+    return html`<td style="min-width:100px"> <div class="file-input-container col" style="align-items:flex-end" @click="${e => this.onAddRemoveFileInput(e, keyLabel)}"> <div class="input-set row"> <input @change="${e => {
+      rowGenerator(e);
+    }}" type="file" part="file-input" class="file-input" data-pname="${keyLabel}" data-ptype="form-input" data-array="false" data-file-array="true"> <button class="file-input-remove-btn"> &#x2715; </button> </div> <button class="m-btn primary file-input-add-btn" part="btn btn-fill" style="margin:2px 25px 0 0;padding:2px 6px">ADD</button> </div> </td>`;
   }
 
-  return html`<td style="min-width:100px"> <tag-input style="width:100%" data-ptype="${options.mimeType.includes('form-urlencode') ? 'form-urlencode' : 'form-data'}" data-pname="${keyLabel}" data-default="${defaultValue || ''}" data-array="true" placeholder="${(Array.isArray(example) ? example[0] : example) || defaultValue || 'add-multiple ↩'}" .value="${defaultValue || ''}"></tag-input> </td>`;
+  return html`<td style="min-width:100px"> <tag-input @change="${e => {
+    rowGenerator(e);
+  }}" style="width:100%" data-ptype="form-input" data-pname="${keyLabel}" data-default="${defaultValue || ''}" data-array="true" placeholder="${(Array.isArray(example) ? example[0] : example) || defaultValue || 'add-multiple ↩'}" .value="${defaultValue || ''}"></tag-input> </td>`;
 }
 
-function getPrimitiveFormField(keyLabel, example, defaultValue, format, options) {
-  return html`<td style="min-width:100px"> <input placeholder="${example || defaultValue || ''}" .value="${options.fillRequestWithDefault && defaultValue || ''}" spellcheck="false" type="${format === 'binary' ? 'file' : format === 'password' ? 'password' : 'text'}" part="textbox textbox-param" style="width:100%" data-ptype="${options.mimeType.includes('form-urlencode') ? 'form-urlencode' : 'form-data'}" data-pname="${keyLabel}" data-default="${defaultValue || ''}" data-array="false"> </td>`;
+function getPrimitiveFormField(keyLabel, example, defaultValue, format, options, rowGenerator) {
+  return html`<td style="min-width:100px"> <input placeholder="${example || defaultValue || ''}" @change="${e => {
+    rowGenerator(e);
+  }}" .value="${options.fillRequestWithDefault && defaultValue || ''}" spellcheck="false" type="${format === 'binary' ? 'file' : format === 'password' ? 'password' : 'text'}" part="textbox textbox-param" style="width:100%" data-ptype="form-input" data-pname="${keyLabel}" data-default="${defaultValue || ''}" data-array="false"> </td>`;
 }
 
 export default function getRequestFormTable(data, mimeType) {
@@ -117,5 +183,5 @@ export default function getRequestFormTable(data, mimeType) {
     mimeType: mimeType,
     fillRequestWithDefault: this.fillRequestWithDefault === 'true'
   };
-  return html` <table role="presentation" class="request-form-table" style="border:1px solid var(--light-border-color);width:100%"> ${data ? html`${generateFormRows.call(this, data['::type'] === 'array' ? data['::props'] : data, options, data['::type'])}` : ''} </table>`;
+  return html` <table id="request-form-table" role="presentation" class="request-form-table" style="border:1px solid var(--light-border-color);width:100%"> ${data ? html`${generateFormRows.call(this, data['::type'] === 'array' ? data['::props'] : data, options, data['::type'])}` : ''} </table>`;
 }

package/dist/es/utils/schema-utils.js

@@ -385,6 +385,10 @@ function getSimpleValueResult(schema, config, namespace, prefix, xmlAttributes,
   const value = getSampleValueByType(schema, config.propertyName, config.skipExampleStrings);
   return [value];
 }
+
+export function isPatternProperty(label) {
+  return label.match(/^<any-key>|<pattern:/);
+}
 /**
  * For changing OpenAPI-Schema to an Object Notation,
  * This Object would further be an input to UI Components to generate an Object-Tree
@@ -394,7 +398,6 @@ function getSimpleValueResult(schema, config, namespace, prefix, xmlAttributes,
  * @param {string} suffix - used for suffixing property names to avoid duplicate props during object composition
  */
 
-
 export function schemaInObjectNotation(rawSchema, options, level = 0, suffix = '') {
   if (!rawSchema) {
     return undefined;