openapi-explorer 1.1.578 → 1.1.581

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

@@ -258,7 +258,9 @@ class ApiRequest extends _lit.LitElement {
       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();
-      }}" .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' && (0, _lit.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>` || (0, _lit.html)` <input type="${paramSchema.format === 'password' ? 'password' : 'text'}" spellcheck="false" style="width:100%;margin-top:1rem;margin-bottom:1rem" @input="${() => {
+      }}" .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' && (0, _lit.html)` <textarea @input="${() => {
+        this.computeCurlSyntax();
+      }}" 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>` || (0, _lit.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' ? (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.default || paramSchema.s || 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}"]`);
@@ -415,7 +417,9 @@ class ApiRequest extends _lit.LitElement {
       }
 
       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 class="textarea request-body-param-user-input" part="textarea textarea-param" spellcheck="false" data-ptype="${reqBody.mimeType}" data-default="${displayedBodyExample.exampleFormat === 'text' ? displayedBodyExample.exampleValue : JSON.stringify(displayedBodyExample.exampleValue, null, 8)}" data-default-format="${displayedBodyExample.exampleFormat}" style="width:100%;resize:vertical" .value="${this.fillRequestWithDefault === 'true' ? displayedBodyExample.exampleFormat === 'text' ? displayedBodyExample.exampleValue : JSON.stringify(displayedBodyExample.exampleValue, null, 8) : ''}"></textarea> </slot> <textarea class="textarea is-hidden request-body-param ${reqBody.mimeType.substring(reqBody.mimeType.indexOf('/') + 1)}" spellcheck="false" data-ptype="${reqBody.mimeType}" style="width:100%;resize:vertical;display:none" .value="${displayedBodyExample.exampleFormat === 'text' ? displayedBodyExample.exampleValue : JSON.stringify(displayedBodyExample.exampleValue, null, 8)}"></textarea> </div>` : ''} </div> `;
+      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();
+      }}" class="textarea request-body-param-user-input" part="textarea textarea-param" spellcheck="false" data-ptype="${reqBody.mimeType}" data-default="${displayedBodyExample.exampleFormat === 'text' ? displayedBodyExample.exampleValue : JSON.stringify(displayedBodyExample.exampleValue, null, 8)}" data-default-format="${displayedBodyExample.exampleFormat}" style="width:100%;resize:vertical" .value="${this.fillRequestWithDefault === 'true' ? displayedBodyExample.exampleFormat === 'text' ? displayedBodyExample.exampleValue : JSON.stringify(displayedBodyExample.exampleValue, null, 8) : ''}"></textarea> </slot> <textarea class="textarea is-hidden request-body-param ${reqBody.mimeType.substring(reqBody.mimeType.indexOf('/') + 1)}" spellcheck="false" data-ptype="${reqBody.mimeType}" style="width:100%;resize:vertical;display:none" .value="${displayedBodyExample.exampleFormat === 'text' ? displayedBodyExample.exampleValue : JSON.stringify(displayedBodyExample.exampleValue, null, 8)}"></textarea> </div>` : ''} </div> `;
     } else if (this.selectedRequestBodyType.includes('form-urlencoded') || this.selectedRequestBodyType.includes('form-data')) {
       bodyTabNameUseBody = false;
       const schemaAsObj = (0, _schemaUtils.schemaInObjectNotation)(reqBody.schema, {
@@ -469,7 +473,7 @@ class ApiRequest extends _lit.LitElement {
       }
 
       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, _languages.getI18nText)('operations.response')}</button> <button class="tab-btn ${this.activeResponseTab === 'headers' ? 'active' : ''}" data-tab="headers">${(0, _languages.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'}"> <button class="m-btn thin-border mar-top-8" style="width:135px" @click="${this.downloadResponseBlob}" part="btn btn-outline">DOWNLOAD</button> ${this.responseBlobType === 'view' ? (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>` : (0, _lit.html)` <div class="tab-content col m-markdown" style="flex:1;display:${this.activeResponseTab === 'response' ? 'flex' : 'none'}"> ${this.responseText ? (0, _lit.html)`<button class="m-btn outline-primary toolbar-copy-btn" @click="${e => {
+    }}"> <br> <div style="width:100%"> ${!hasResponse ? '' : (0, _lit.html)` <button class="tab-btn ${this.activeResponseTab === 'response' ? 'active' : ''}" data-tab="response">${(0, _languages.getI18nText)('operations.response')}</button> <button class="tab-btn ${this.activeResponseTab === 'headers' ? 'active' : ''}" data-tab="headers">${(0, _languages.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'}"> ${this.responseText ? (0, _lit.html)`<button class="m-btn outline-primary toolbar-copy-btn" @click="${e => {
       (0, _commonUtils.copyToClipboard)(this.responseText, e);
     }}" part="btn btn-fill">${(0, _languages.getI18nText)('operations.copy')}</button>` : ''} <pre style="min-height:60px" @copy="${() => {
       (0, _commonUtils.copyToClipboard)(window.getSelection().toString());
@@ -538,75 +542,68 @@ class ApiRequest extends _lit.LitElement {
       headers: new Headers()
     }; // Query Params
 
-    if (queryParamEls.length > 0) {
-      queryParamEls.forEach(el => {
-        if (el.dataset.array === 'false') {
-          if (el.value !== '') {
-            fetchUrl.searchParams.append(el.dataset.pname, el.value);
-          }
-        } else {
-          const paramSerializeStyle = el.dataset.paramSerializeStyle;
-          const paramSerializeExplode = el.dataset.paramSerializeExplode;
-          let vals = el.value && Array.isArray(el.value) ? el.value : [];
-          vals = Array.isArray(vals) ? vals.filter(v => v !== '') : [];
-
-          if (vals.length > 0) {
-            if (paramSerializeStyle === 'spaceDelimited') {
-              fetchUrl.searchParams.append(el.dataset.pname, vals.join(' ').replace(/^\s|\s$/g, ''));
-            } else if (paramSerializeStyle === 'pipeDelimited') {
-              fetchUrl.searchParams.append(el.dataset.pname, vals.join('|').replace(/^\||\|$/g, ''));
+    queryParamEls.forEach(el => {
+      if (!el.dataset.array || el.dataset.array === 'false') {
+        if (el.value !== '') {
+          fetchUrl.searchParams.append(el.dataset.pname, el.value);
+        }
+      } else {
+        const paramSerializeStyle = el.dataset.paramSerializeStyle;
+        const paramSerializeExplode = el.dataset.paramSerializeExplode;
+        const values = Array.isArray(el.value) ? el.value.filter(v => v !== '') : [];
+
+        if (values.length > 0) {
+          if (paramSerializeStyle === 'spaceDelimited') {
+            fetchUrl.searchParams.append(el.dataset.pname, values.join(' ').replace(/^\s|\s$/g, ''));
+          } else if (paramSerializeStyle === 'pipeDelimited') {
+            fetchUrl.searchParams.append(el.dataset.pname, values.join('|').replace(/^\||\|$/g, ''));
+          } else {
+            if (paramSerializeExplode === 'true') {
+              // eslint-disable-line no-lonely-if
+              values.forEach(v => {
+                fetchUrl.searchParams.append(el.dataset.pname, v);
+              });
             } else {
-              if (paramSerializeExplode === 'true') {
-                // eslint-disable-line no-lonely-if
-                vals.forEach(v => {
-                  fetchUrl.searchParams.append(el.dataset.pname, v);
-                });
-              } else {
-                fetchUrl.searchParams.append(el.dataset.pname, vals.join(',').replace(/^,|,$/g, ''));
-              }
+              fetchUrl.searchParams.append(el.dataset.pname, values.join(',').replace(/^,|,$/g, ''));
             }
           }
         }
-      });
-    } // Query Params (Dynamic - create from JSON)
-
-
-    if (queryParamObjTypeEls.length > 0) {
-      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])) {
-                if (paramSerializeStyle === 'spaceDelimited') {
-                  fetchUrl.searchParams.append(key, queryParamObj[key].join(' '));
-                } else if (paramSerializeStyle === 'pipeDelimited') {
-                  fetchUrl.searchParams.append(key, queryParamObj[key].join('|'));
+      }
+    }); // 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])) {
+              if (paramSerializeStyle === 'spaceDelimited') {
+                fetchUrl.searchParams.append(key, queryParamObj[key].join(' '));
+              } else if (paramSerializeStyle === 'pipeDelimited') {
+                fetchUrl.searchParams.append(key, queryParamObj[key].join('|'));
+              } else {
+                if (paramSerializeExplode === 'true') {
+                  // eslint-disable-line no-lonely-if
+                  queryParamObj[key].forEach(v => {
+                    fetchUrl.searchParams.append(key, v);
+                  });
                 } else {
-                  if (paramSerializeExplode === 'true') {
-                    // eslint-disable-line no-lonely-if
-                    queryParamObj[key].forEach(v => {
-                      fetchUrl.searchParams.append(key, v);
-                    });
-                  } else {
-                    fetchUrl.searchParams.append(key, queryParamObj[key]);
-                  }
+                  fetchUrl.searchParams.append(key, queryParamObj[key]);
                 }
               }
-            } else {
-              fetchUrl.searchParams.append(key, queryParamObj[key]);
             }
+          } else {
+            fetchUrl.searchParams.append(key, queryParamObj[key]);
           }
-        } 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
-
+      } 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
 
     this.api_keys.filter(v => v.finalKeyValue).forEach(v => {
       if (v.in === 'query') {
@@ -876,6 +873,9 @@ class ApiRequest extends _lit.LitElement {
         } else if (textFileRegex.test(contentType)) {
           this.responseIsBlob = true;
           this.responseBlobType = 'download';
+        } else if (contentType.match(/^image/)) {
+          this.responseIsBlob = true;
+          this.responseBlobType = 'image';
         } else if (mediaFileRegex.test(contentType)) {
           this.responseIsBlob = true;
           this.responseBlobType = 'view';
@@ -896,7 +896,7 @@ class ApiRequest extends _lit.LitElement {
           const contentDisposition = fetchResponse.headers.get('content-disposition');
           const filenameRegex = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/;
           const filename = filenameRegex.exec(contentDisposition);
-          this.respContentDisposition = filename && filename[1] && filename[1].replace(/['"]/g, '') || `download.${_mimeTypes.default.extension(contentType) || 'file'}`;
+          this.respContentDisposition = filename && filename[1] && filename[1].replace(/['"]/g, '') || `download.${(0, _mimeTypes.default)(contentType) || 'file'}`;
           respBlob = await fetchResponse.blob();
           this.responseBlobUrl = URL.createObjectURL(respBlob);
         }
@@ -936,6 +936,8 @@ class ApiRequest extends _lit.LitElement {
       document.dispatchEvent(new CustomEvent('after-try', responseEvent));
       document.dispatchEvent(new CustomEvent('response', responseEvent));
     }
+
+    this.requestUpdate();
   }
 
   onAddRemoveFileInput(e, pname) {

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

@@ -129,19 +129,24 @@ function generatePrimitiveRow(rowData, parentRecursionOptions) {
     if (inputEl) {
       inputEl.value = e.target.dataset.type === 'array' ? [e.target.dataset.enum] : e.target.dataset.enum;
     }
+
+    this.computeCurlSyntax();
   }}"> ${v} </a>`}`)} </div>` : ''} </td> </tr> ${schemaDescription || example ? (0, _lit.html)`<tr class="form-parameter-description"> <td> </td> <td colspan="2" style="margin-top:0;padding:0 5px 8px 5px"> <span class="m-markdown-small">${(0, _unsafeHtml.unsafeHTML)((0, _marked.marked)(schemaDescription || ''))}</span> ${example ? (0, _lit.html)`<span> <span style="font-weight:700"> Example: </span> ${type === 'array' ? '[ ' : ''} <a part="anchor anchor-param-example" data-example-type="${type === 'array' ? type : 'string'}" data-example="${Array.isArray(example) && example.join('~|~') || example || ''}" @click="${e => {
     const inputEl = e.target.closest('table').querySelector(`[data-pname="${keyLabel}"]`);
 
     if (inputEl) {
       inputEl.value = e.target.dataset.exampleType === 'array' ? e.target.dataset.example.split('~|~') : e.target.dataset.example;
     }
+
+    this.computeCurlSyntax();
   }}"> ${type === 'array' ? example.join(', ') : example} </a> ${type === 'array' ? '] ' : ''} </span>` : ''} </td> </tr>` : ''}`);
 }
 
 function inputFieldKeyLabel(isOption, keyLabel, keyDescription, dataType, deprecated, isRequired, schemaTitle, format, rowGenerator) {
   if ((0, _schemaUtils.isPatternProperty)(keyLabel)) {
-    return (0, _lit.html)` <td style="width:160px;min-width:100px"> <div class="param-name ${deprecated ? 'deprecated' : ''}"> <input placeholder="${keyLabel}" @change="${e => {
+    return (0, _lit.html)` <td style="width:160px;min-width:100px"> <div class="param-name ${deprecated ? 'deprecated' : ''}"> <input placeholder="${keyLabel}" @input="${e => {
       rowGenerator(e);
+      this.computeCurlSyntax();
     }}" .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>`;
   }
 
@@ -172,19 +177,22 @@ function inputFieldKeyLabel(isOption, keyLabel, keyDescription, dataType, deprec
 
 function getArrayFormField(keyLabel, example, defaultValue, format, rowGenerator) {
   if (format === 'binary') {
-    return (0, _lit.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 => {
+    return (0, _lit.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 @input="${e => {
       rowGenerator(e);
+      this.computeCurlSyntax();
     }}" 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 (0, _lit.html)`<td style="min-width:100px"> <tag-input @change="${e => {
     rowGenerator(e);
+    this.computeCurlSyntax();
   }}" 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, rowGenerator) {
-  return (0, _lit.html)`<td style="min-width:100px"> <input placeholder="${example || defaultValue || ''}" @change="${e => {
+  return (0, _lit.html)`<td style="min-width:100px"> <input placeholder="${example || defaultValue || ''}" @input="${e => {
     rowGenerator(e);
+    this.computeCurlSyntax();
   }}" .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>`;
 }
 

package/dist/lib/components/tag-input.js

@@ -77,12 +77,16 @@ class TagInput extends _lit.LitElement {
   }
 
   emitChanged() {
-    const event = new CustomEvent('change', {
+    this.dispatchEvent(new CustomEvent('change', {
       detail: {
         value: this.value
       }
-    });
-    this.dispatchEvent(event);
+    }));
+    this.dispatchEvent(new CustomEvent('input', {
+      detail: {
+        value: this.value
+      }
+    }));
   }
 
 } // Register the element with the browser

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "openapi-explorer",
-  "version": "1.1.578",
+  "version": "1.1.581",
   "description": "OpenAPI Explorer - API viewer with dynamically generated components, documentation, and interaction console",
   "author": "Rhosys Developers <developers@rhosys.ch>",
   "type": "module",