openapi-explorer 2.1.656 → 2.1.659

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

@@ -2,41 +2,23 @@
 
 exports.__esModule = true;
 exports.default = void 0;
-
 var _lit = require("lit");
-
 var _marked = require("marked");
-
 var _unsafeHtml = require("lit/directives/unsafe-html.js");
-
 var _schemaUtils = require("../utils/schema-utils.js");
-
 var _index = require("../languages/index.js");
-
 var _fontStyles = _interopRequireDefault(require("../styles/font-styles.js"));
-
 var _flexStyles = _interopRequireDefault(require("../styles/flex-styles.js"));
-
 var _tableStyles = _interopRequireDefault(require("../styles/table-styles.js"));
-
 var _inputStyles = _interopRequireDefault(require("../styles/input-styles.js"));
-
 var _tabStyles = _interopRequireDefault(require("../styles/tab-styles.js"));
-
 var _borderStyles = _interopRequireDefault(require("../styles/border-styles.js"));
-
 var _schemaStyles = _interopRequireDefault(require("../styles/schema-styles.js"));
-
 var _prismStyles = _interopRequireDefault(require("../styles/prism-styles.js"));
-
 require("./schema-tree.js");
-
 require("./schema-table.js");
-
 require("./syntax-highlighter.js");
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 class ApiResponse extends _lit.LitElement {
   constructor() {
     super();
@@ -45,7 +27,6 @@ class ApiResponse extends _lit.LitElement {
     this.mimeResponsesForEachStatus = {};
     this.activeSchemaTab = 'model';
   }
-
   static get properties() {
     return {
       callback: {
@@ -60,11 +41,9 @@ class ApiResponse extends _lit.LitElement {
       includeNulls: {
         type: Boolean,
         attribute: 'display-nulls',
-
         converter(value) {
           return value === 'true';
         }
-
       },
       schemaStyle: {
         type: String,
@@ -96,46 +75,37 @@ class ApiResponse extends _lit.LitElement {
       }
     };
   }
-
   static finalizeStyles() {
     return [_schemaStyles.default, _fontStyles.default, _flexStyles.default, _tabStyles.default, _tableStyles.default, _inputStyles.default, _borderStyles.default, _prismStyles.default, (0, _lit.css)`.resp-head{vertical-align:middle;padding:16px 0 8px}.resp-head.divider{border-top:1px solid var(--border-color);margin-top:10px}.resp-status{font-weight:700;font-size:calc(var(--font-size-small) + 1px)}.resp-descr{font-size:calc(var(--font-size-small) + 1px)}.top-gap{margin-top:16px}.example-panel{font-size:var(--font-size-small);margin:0}.generic-tree{background:var(--bg2,#333);color:var(--fg,#fff)}.example-panel.generic-tree{margin-top:8px}pre.generic-tree{border:none;padding:8px 10px 10px}.example-panel select{margin-left:8px;padding-top:8px;min-width:100px;max-width:100%}.example-panel .example{padding:0 12px}.focused-mode,.read-mode{padding-top:24px;margin-top:12px;border-top:1px dashed var(--border-color)}`];
   }
-
   render() {
     return (0, _lit.html)` <div class="col regular-font response-panel ${this.renderStyle}-mode"> <div class="${this.callback === 'true' ? 'tiny-title' : 'req-res-title'}"> ${this.callback === 'true' ? 'CALLBACK RESPONSE' : (0, _index.getI18nText)('operations.response')} </div> <div> ${this.responseTemplate()} <div> </div> </div></div>`;
   }
-
   resetSelection() {
     this.selectedStatus = '';
     this.selectedMimeType = '';
   }
-  /* eslint-disable indent */
-
 
+  /* eslint-disable indent */
   responseTemplate() {
     if (!this.responses) {
       return '';
     }
-
     for (const statusCode in this.responses) {
       if (!this.selectedStatus) {
         this.selectedStatus = statusCode;
       }
-
       const allMimeResp = {};
-
       for (const mimeResp in this.responses[statusCode] && this.responses[statusCode].content) {
         const mimeRespObj = this.responses[statusCode].content[mimeResp];
-
         if (!this.selectedMimeType) {
           this.selectedMimeType = mimeResp;
-        } // Generate Schema
-
-
+        }
+        // Generate Schema
         const schemaTree = (0, _schemaUtils.schemaInObjectNotation)(mimeRespObj.schema, {
           includeNulls: this.includeNulls
-        }); // Generate Example
-
+        });
+        // Generate Example
         const respExamples = (0, _schemaUtils.generateExample)(mimeRespObj.examples || '', mimeRespObj.example || '', mimeRespObj.schema, mimeResp, true, false, mimeResp.includes('json') ? 'json' : 'text');
         allMimeResp[mimeResp] = {
           description: this.responses[statusCode].description,
@@ -143,26 +113,21 @@ class ApiResponse extends _lit.LitElement {
           selectedExample: respExamples[0] && respExamples[0].exampleId || '',
           schemaTree
         };
-      } // Headers for each response status
-
-
+      }
+      // Headers for each response status
       const tempHeaders = [];
-
       for (const key in this.responses[statusCode] && this.responses[statusCode].headers) {
         tempHeaders.push({
           name: key,
           ...this.responses[statusCode].headers[key]
         });
       }
-
       this.headersForEachRespStatus[statusCode] = tempHeaders;
       this.mimeResponsesForEachStatus[statusCode] = allMimeResp;
     }
-
     return (0, _lit.html)`<div class="row" style="flex-wrap:wrap"> ${Object.keys(this.responses).map(respStatus => (0, _lit.html)` ${respStatus === '$$ref' // Swagger-Client parser creates '$$ref' object if JSON references are used to create responses - this should be ignored
     ? '' : (0, _lit.html)` <button @click="${() => {
       this.selectedStatus = respStatus;
-
       if (this.responses[respStatus].content && Object.keys(this.responses[respStatus].content)[0]) {
         this.selectedMimeType = Object.keys(this.responses[respStatus].content)[0];
       } else {
@@ -174,20 +139,17 @@ class ApiResponse extends _lit.LitElement {
       }
     }}"> <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">${(0, _index.getI18nText)('operations.example')}</button> <div style="flex:1"></div> ${Object.keys(this.mimeResponsesForEachStatus[status]).length === 1 ? (0, _lit.html)`<span class="small-font-size gray-text" style="align-self:center;margin-top:8px"> ${Object.keys(this.mimeResponsesForEachStatus[status])[0]} </span>` : (0, _lit.html)`${this.mimeTypeDropdownTemplate(Object.keys(this.mimeResponsesForEachStatus[status]))}`} </div> ${this.activeSchemaTab === 'body' ? (0, _lit.html)`<div class="tab-content col" style="flex:1"> ${this.mimeExampleTemplate(this.mimeResponsesForEachStatus[status][this.selectedMimeType])} </div>` : (0, _lit.html)`<div class="tab-content col" style="flex:1"> ${this.mimeSchemaTemplate(this.mimeResponsesForEachStatus[status][this.selectedMimeType])} </div>`} </div> `}</div>`)} `;
   }
-
   responseHeaderListTemplate(respHeaders) {
     return (0, _lit.html)` <div style="padding:16px 0 8px 0" class="resp-headers small-font-size bold-text">${(0, _index.getI18nText)('operations.response-headers')}</div> <table role="presentation" style="border-collapse:collapse;margin-bottom:16px;border:1px solid var(--border-color);border-radius:var(--border-radius)" class="small-font-size mono-font"> ${respHeaders.map(v => {
       const typeData = (0, _schemaUtils.getTypeInfo)(v.schema);
       return (0, _lit.html)` <tr> <td style="padding:8px;vertical-align:baseline;min-width:160px;border-top:1px solid var(--light-border-color);text-overflow:ellipsis"> ${v.name || ''} </td> <td class="${(typeData === null || typeData === void 0 ? void 0 : typeData.cssType) || ''}" style="padding:4px;vertical-align:baseline;min-width:100px;padding:0 5px;border-top:1px solid var(--light-border-color);text-overflow:ellipsis"> ${(typeData === null || typeData === void 0 ? void 0 : typeData.format) || (typeData === null || typeData === void 0 ? void 0 : typeData.type) || ''} </td> <td style="padding:8px;vertical-align:baseline;border-top:1px solid var(--light-border-color);text-overflow:ellipsis"> <div class="m-markdown-small regular-font">${(0, _unsafeHtml.unsafeHTML)((0, _marked.marked)(v.description || ''))}</div> </td> <td style="padding:8px;vertical-align:baseline;border-top:1px solid var(--light-border-color);text-overflow:ellipsis"> ${(typeData === null || typeData === void 0 ? void 0 : typeData.example) || ''} </td> </tr> `;
     })} </table>`;
   }
-
   mimeTypeDropdownTemplate(mimeTypes) {
     return (0, _lit.html)` <select aria-label="mime type" @change="${e => {
       this.selectedMimeType = e.target.value;
     }}" style="margin-bottom:-1px;z-index:1"> ${mimeTypes.map(mimeType => (0, _lit.html)`<option value="${mimeType}" ?selected="${mimeType === this.selectedMimeType}"> ${mimeType} </option>`)} </select>`;
   }
-
   onSelectExample(e) {
     const exampleContainerEl = e.target.closest('.example-panel');
     const exampleEls = [...exampleContainerEl.querySelectorAll('.example')];
@@ -195,30 +157,23 @@ class ApiResponse extends _lit.LitElement {
       v.style.display = v.dataset.example === e.target.value ? 'block' : 'none';
     });
   }
-
   mimeExampleTemplate(mimeRespDetails) {
     if (!mimeRespDetails) {
       return (0, _lit.html)` <pre style="color:var(--red)" class="example-panel border-top"> No example provided </pre> `;
     }
-
     return (0, _lit.html)` ${mimeRespDetails.examples.length === 1 ? (0, _lit.html)` ${mimeRespDetails.examples[0].exampleSummary && mimeRespDetails.examples[0].exampleSummary.length > 80 ? (0, _lit.html)`<div style="padding:4px 0"> ${mimeRespDetails.examples[0].exampleSummary} </div>` : ''} ${mimeRespDetails.examples[0].exampleDescription ? (0, _lit.html)`<div class="m-markdown-small" style="padding:4px 0"> ${(0, _unsafeHtml.unsafeHTML)((0, _marked.marked)(mimeRespDetails.examples[0].exampleDescription || ''))} </div>` : ''} <syntax-highlighter class="example-panel generic-tree border-top pad-top-8" mime-type="${mimeRespDetails.examples[0].exampleType}" .content="${mimeRespDetails.examples[0].exampleValue}">` : (0, _lit.html)` <span class="example-panel generic-tree ${this.renderStyle === 'read' ? 'border pad-8-16' : 'border-top pad-top-8'}"> <select aria-label="response body example" @change="${e => this.onSelectExample(e)}"> ${mimeRespDetails.examples.map(v => (0, _lit.html)`<option value="${v.exampleId}" ?selected="${v.exampleId === mimeRespDetails.selectedExample}"> ${!v.exampleSummary || v.exampleSummary.length > 80 ? v.exampleId : v.exampleSummary} </option>`)} </select> ${mimeRespDetails.examples.map(v => (0, _lit.html)` <div class="example" data-example="${v.exampleId}" style="display:${v.exampleId === mimeRespDetails.selectedExample ? 'block' : 'none'}"> ${v.exampleSummary && v.exampleSummary.length > 80 ? (0, _lit.html)`<div style="padding:4px 0"> ${v.exampleSummary} </div>` : ''} ${v.exampleDescription && v.exampleDescription !== v.exampleSummary ? (0, _lit.html)`<div class="m-markdown-small" style="padding:4px 0"> ${(0, _unsafeHtml.unsafeHTML)((0, _marked.marked)(v.exampleDescription || ''))} </div>` : ''} <syntax-highlighter mime-type="${v.exampleType}" .content="${v.exampleValue}"> </div> `)} </span> `} `;
   }
-
   mimeSchemaTemplate(mimeRespDetails) {
     if (!mimeRespDetails) {
       return (0, _lit.html)` <pre style="color:var(--red)" class="${this.renderStyle === 'read' ? 'border pad-8-16' : 'border-top'}"> Schema not found</pre> `;
     }
-
     return (0, _lit.html)` ${this.schemaStyle === 'table' ? (0, _lit.html)` <schema-table render-style="${this.renderStyle}" .data="${mimeRespDetails.schemaTree}" class="example-panel ${this.renderStyle === 'read' ? 'border pad-8-16' : 'border-top pad-top-8'}" schema-expand-level="${this.schemaExpandLevel}" schema-hide-read-only="false" schema-hide-write-only="${this.schemaHideWriteOnly}"> </schema-table> ` : (0, _lit.html)` <schema-tree render-style="${this.renderStyle}" .data="${mimeRespDetails.schemaTree}" class="example-panel ${this.renderStyle === 'read' ? 'border pad-8-16' : 'pad-top-8'}" schema-expand-level="${this.schemaExpandLevel}" schema-hide-read-only="false" schema-hide-write-only="${this.schemaHideWriteOnly}"> </schema-tree>`}`;
   }
   /* eslint-enable indent */
+}
 
-
-} // Register the element with the browser
-
-
+// Register the element with the browser
 exports.default = ApiResponse;
-
 if (!customElements.get('openapi-explorer')) {
   customElements.define('api-response', ApiResponse);
 }

package/dist/lib/components/json-tree.js

@@ -2,19 +2,12 @@
 
 exports.__esModule = true;
 exports.default = void 0;
-
 var _lit = require("lit");
-
 var _fontStyles = _interopRequireDefault(require("../styles/font-styles.js"));
-
 var _borderStyles = _interopRequireDefault(require("../styles/border-styles.js"));
-
 var _inputStyles = _interopRequireDefault(require("../styles/input-styles.js"));
-
 var _keyFrameStyles = _interopRequireDefault(require("../styles/key-frame-styles.js"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 class JsonTree extends _lit.LitElement {
   static get properties() {
     return {
@@ -27,71 +20,55 @@ class JsonTree extends _lit.LitElement {
       }
     };
   }
+
   /**
    * @param {Map<string, object>} changedProperties Changed Properties
    */
-
-
   update(changedProperties) {
     if (changedProperties.has('data')) {
       this.interactive = false;
     }
-
     super.update(changedProperties);
   }
-
   updated() {
     this.interactive = true; // Note: interactive is not a reactive property
   }
-
   static finalizeStyles() {
     return [_fontStyles.default, _borderStyles.default, _inputStyles.default, _keyFrameStyles.default, (0, _lit.css)`:host{display:flex}.json-tree{background:var(--bg2);padding:12px;min-height:30px;font-family:var(--font-mono);font-size:var(--font-size-small);overflow:hidden;word-break:break-all;flex:1;line-height:calc(var(--font-size-small) + 6px)}.open-bracket{display:inline-block;padding:0 20px 0 0;cursor:pointer;border:1px solid transparent;border-radius:3px}.collapsed.open-bracket{padding-right:0}.tree>.open-bracket{margin-left:-2px}.open-bracket:hover{color:var(--primary-color);background-color:var(--hover-color);border:1px solid var(--border-color)}.inside-bracket-wrapper{overflow:hidden}.tree:not(.interactive) .inside-bracket-wrapper{animation-duration:0s!important}.open-bracket:not(.collapsed)+.inside-bracket-wrapper{animation:linear .2s expand-height}.open-bracket.collapsed+.inside-bracket-wrapper{animation:linear .2s collapse-height;max-height:0}.inside-bracket{padding-left:16px;border-left:1px dotted var(--border-color)}.string{color:var(--green)}.number{color:var(--blue)}.null{color:var(--red)}.boolean{color:var(--orange)}.toolbar{display:none}.tree .toolbar{display:flex;justify-content:space-between;width:100%}.tree .item{border-bottom:1px dotted transparent}.toolbar-item{cursor:pointer;flex-shrink:0}.tree .toolbar .toolbar-item{display:none}.inside-bracket.xxx-of{padding:5px 0;border-style:dotted;border-width:0 0 1px 0;border-color:var(--primary-color)}.schema-root-type.xxx-of{display:none}.toolbar-item:first-of-type{margin:0 2px 0 0}@media only screen and (min-width:576px){.key-descr{display:block}.tree .toolbar .toolbar-item{display:block}.toolbar{display:flex}}.toolbar-backup{position:absolute;right:6px;display:flex;align-items:center}`];
   }
-  /* eslint-disable indent */
-
 
+  /* eslint-disable indent */
   render() {
     return (0, _lit.html)` <div class="json-tree tree ${this.interactive ? 'interactive' : ''}"> ${this.generateTree(this.data, true)} </div> `;
   }
-
   generateTree(data, isLast = false) {
     if (data === null) {
       return (0, _lit.html)`<div class="null" style="display:inline">null</div>`;
     }
-
     if (typeof data === 'object' && data instanceof Date === false) {
       const detailType = Array.isArray(data) ? 'array' : 'pure_object';
-
       if (Object.keys(data).length === 0) {
         return (0, _lit.html)`${Array.isArray(data) ? '[ ],' : '{ },'}`;
       }
-
       return (0, _lit.html)` <div class="open-bracket ${detailType === 'array' ? 'array' : 'object'}" @click="${this.toggleExpand}"> ${detailType === 'array' ? '[' : '{'}</div> <div class="inside-bracket-wrapper"> <div class="inside-bracket"> ${Object.keys(data).map((key, i, a) => (0, _lit.html)` <div class="item"> ${detailType === 'pure_object' ? (0, _lit.html)`"${key}":` : ''} ${this.generateTree(data[key], i === a.length - 1)} </div>`)} </div> <div class="close-bracket">${detailType === 'array' ? ']' : '}'}${isLast ? '' : ','}</div> </div> `;
     }
-
     return typeof data === 'string' || data instanceof Date ? (0, _lit.html)`<span class="${typeof data}">"${data}"</span>${isLast ? '' : ','}` : (0, _lit.html)`<span class="${typeof data}">${data}</span>${isLast ? '' : ','}`;
   }
   /* eslint-enable indent */
 
-
   toggleExpand(e) {
     const openBracketEl = e.target;
     openBracketEl.classList.toggle('collapsed');
-
     if (openBracketEl.classList.contains('collapsed')) {
       e.target.innerHTML = e.target.classList.contains('array') ? '[...]' : '{...}';
     } else {
       e.target.innerHTML = e.target.classList.contains('array') ? '[' : '{';
     }
-
     this.requestUpdate();
   }
-
-} // Register the element with the browser
-
-
+}
+// Register the element with the browser
 exports.default = JsonTree;
-
 if (!customElements.get('openapi-explorer')) {
   customElements.define('json-tree', JsonTree);
 }

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

@@ -2,35 +2,25 @@
 
 exports.__esModule = true;
 exports.default = getRequestFormTable;
-
 var _lit = require("lit");
-
 var _marked = require("marked");
-
 var _unsafeHtml = require("lit/directives/unsafe-html.js");
-
 var _schemaUtils = require("../utils/schema-utils.js");
-
 var _map = require("lit/directives/map.js");
-
 var _range = require("lit/directives/range.js");
-
 /* eslint-disable indent */
+
 function generateFormRows(data, options, dataType = 'object', key = '', description = '', schemaLevel = 0) {
   const newSchemaLevel = data['::type'] && data['::type'].startsWith('xxx-of') ? schemaLevel : schemaLevel + 1;
-
   if (!data) {
     return null;
   }
-
   if (Object.keys(data).length === 0) {
     return null;
   }
-
   let rawKeyLabel = '';
   let keyDescr = '';
   let isOneOfLabel = false;
-
   if (key.startsWith('::ONE~OF') || key.startsWith('::ANY~OF')) {
     rawKeyLabel = key.replace('::', '').replace('~', ' ');
     isOneOfLabel = true;
@@ -41,22 +31,21 @@ function generateFormRows(data, options, dataType = 'object', key = '', descript
   } else {
     rawKeyLabel = key;
   }
-
   const keyLabel = rawKeyLabel.replace(/[*]$/, '');
   const isRequired = rawKeyLabel.endsWith('*');
-
   if (typeof data === 'object') {
     const flags = data['::flags'] || {};
-
     if (flags['🆁']) {
       return undefined;
     }
-
     const displayLine = [description].filter(v => v).join(' ');
-    return (0, _lit.html)` ${newSchemaLevel >= 0 && key ? (0, _lit.html)` <tr class="complex-object-display ${data['::type']}" data-obj="${keyLabel}"> <td class="key ${data['::deprecated'] ? 'deprecated' : ''}"> <div style="display:flex;align-items:center"> ${data['::type'] === 'xxx-of-option' || data['::type'] === 'xxx-of-array' || key.startsWith('::OPTION') ? (0, _lit.html)`<span class="xxx-of-key">${keyLabel}</span><span class="${isOneOfLabel ? 'xxx-of-key' : 'xxx-of-descr'}">${keyDescr}</span>` : isRequired ? (0, _lit.html)`<span class="key-label requiredStar" style="display:inline-block" title="Required">${keyLabel}</span>` : (0, _lit.html)`<span class="key-label" style="display:inline-block">${keyLabel === '::props' ? '' : keyLabel}</span>`} </div> </td> <td> </td> <td class="key-descr m-markdown-small">${(0, _unsafeHtml.unsafeHTML)((0, _marked.marked)(displayLine))}</td> </tr>` : (0, _lit.html)`${data['::type'] === 'array' && dataType === 'array' ? (0, _lit.html)`<tr><td> ${dataType} </td> </tr>` : ''}`} ${Array.isArray(data) && data[0] ? (0, _lit.html)`${generateFormRows.call(this, data[0], options, 'xxx-of-option', '::ARRAY~OF', '', newSchemaLevel)}` : (0, _lit.html)`${Object.keys(data).map(dataKey => !['::metadata', '::title', '::description', '::type', '::props', '::deprecated', '::array-type', '::dataTypeLabel', '::flags'].includes(dataKey) || data[dataKey]['::type'] === 'array' && data[dataKey]['::type'] === 'object' ? (0, _lit.html)`${generateFormRows.call(this, data[dataKey]['::type'] === 'array' ? data[dataKey]['::props'] : data[dataKey], options, data[dataKey]['::type'], dataKey, data[dataKey]['::description'], newSchemaLevel)}` : '')}`}`;
-  } // For Primitive Data types
-
+    return (0, _lit.html)` ${newSchemaLevel >= 0 && key ? (0, _lit.html)` <tr class="complex-object-display ${data['::type']}" data-obj="${keyLabel}"> <td class="key ${data['::deprecated'] ? 'deprecated' : ''}"> <div style="display:flex;align-items:center"> ${data['::type'] === 'xxx-of-option' || data['::type'] === 'xxx-of-array' || key.startsWith('::OPTION') ? (0, _lit.html)`<span class="xxx-of-key">${keyLabel}</span><span class="${isOneOfLabel ? 'xxx-of-key' : 'xxx-of-descr'}">${keyDescr}</span>` : isRequired ? (0, _lit.html)`<span class="key-label requiredStar" style="display:inline-block" title="Required">${keyLabel}</span>` : (0, _lit.html)`<span class="key-label" style="display:inline-block">${keyLabel === '::props' ? '' : keyLabel}</span>`} </div> </td> <td> </td> <td class="key-descr m-markdown-small">${(0, _unsafeHtml.unsafeHTML)((0, _marked.marked)(displayLine))}</td> </tr>` : (0, _lit.html)`${data['::type'] === 'array' && dataType === 'array' ? (0, _lit.html)`<tr><td> ${dataType} </td> </tr>` : ''}`} ${Array.isArray(data) && data[0] ? (0, _lit.html)`${generateFormRows.call(this, data[0], options, 'xxx-of-option', '::ARRAY~OF', '', newSchemaLevel)}` : (0, _lit.html)`${Object.keys(data).map(dataKey => {
+      var _data$dataKey;
+      return !['::metadata', '::title', '::description', '::type', '::link', '::props', '::deprecated', '::array-type', '::dataTypeLabel', '::flags'].includes(dataKey) || (_data$dataKey = data[dataKey]) !== null && _data$dataKey !== void 0 && _data$dataKey['::type'] && !data[dataKey]['::type'].includes('xxx-of') ? (0, _lit.html)`${generateFormRows.call(this, data[dataKey]['::type'] === 'array' ? data[dataKey]['::props'] : data[dataKey], options, data[dataKey]['::type'], dataKey, data[dataKey]['::description'], newSchemaLevel)}` : '';
+    })}`}`;
+  }
 
+  // For Primitive Data types
   const parsedData = JSON.parse(data);
   return generatePrimitiveRow.call(this, parsedData, {
     key,
@@ -68,10 +57,8 @@ function generateFormRows(data, options, dataType = 'object', key = '', descript
     options
   });
 }
-
 function generatePrimitiveRow(rowData, parentRecursionOptions) {
   var _this$duplicatedRowsB;
-
   const {
     type,
     format,
@@ -94,54 +81,42 @@ function generatePrimitiveRow(rowData, parentRecursionOptions) {
     isRequired,
     options
   } = parentRecursionOptions;
-
   if (readOrWriteOnly === '🆁') {
     return undefined;
   }
-
   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' && !(0, _schemaUtils.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
-
-
+    }
+    // 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 => (0, _schemaUtils.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
-
+    const patternPropertyInputEls = [...this.querySelectorAll("[data-ptype='form-input']")].filter(el => (0, _schemaUtils.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 (0, _map.map)((0, _range.range)(((_this$duplicatedRowsB = this.duplicatedRowsByKey) === null || _this$duplicatedRowsB === void 0 ? void 0 : _this$duplicatedRowsB[duplicateRowGeneratorKey]) || 1), () => (0, _lit.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 ? (0, _lit.html)`<div class="param-description">${(0, _unsafeHtml.unsafeHTML)((0, _marked.marked)(description))}</div>` : ''} ${defaultValue || constraints || allowedValues || pattern ? (0, _lit.html)` <div class="param-constraint"> ${pattern ? (0, _lit.html)`<span style="font-weight:700">Pattern: </span>${pattern}<br>` : ''} ${constraints.length ? (0, _lit.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) => (0, _lit.html)` ${i > 0 ? '|' : (0, _lit.html)`<span style="font-weight:700">Allowed: </span>`} ${(0, _lit.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) {
       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}" @input="${e => {
@@ -149,9 +124,10 @@ function inputFieldKeyLabel(isOption, keyLabel, keyDescription, dataType, deprec
       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>`;
   }
-
   return (0, _lit.html)` <td style="width:160px;min-width:100px"> <div class="param-name ${deprecated ? 'deprecated' : ''}"> ${!deprecated && isRequired ? (0, _lit.html)`<span class="key-label">${keyLabel}</span><span style="color:var(--red)">*</span>` : isOption ? (0, _lit.html)`<span class="xxx-of-key">${keyLabel}</span><span class="xxx-of-descr">${keyDescription}</span>` : (0, _lit.html)`${keyLabel ? (0, _lit.html)`<span class="key-label"> ${keyLabel}</span>` : (0, _lit.html)`<span class="xxx-of-descr">${schemaTitle}</span>`}`} </div> <div class="param-type"> ${dataType === 'array' ? (0, _lit.html)`[<span>${format}</span>]` : `${format}`} </div> </td>`;
-} // function getObjectFormField(keyLabel, example, defaultValue, format, options) {
+}
+
+// function getObjectFormField(keyLabel, example, defaultValue, format, options) {
 //   return html`
 //     <td>
 //       <div class="tab-panel row" style="min-height:300px; border-left: 6px solid var(--light-border-color); align-items: stretch;">
@@ -174,7 +150,6 @@ function inputFieldKeyLabel(isOption, keyLabel, keyDescription, dataType, deprec
 //     </td>`;
 // }
 
-
 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 @input="${e => {
@@ -182,20 +157,17 @@ function getArrayFormField(keyLabel, example, defaultValue, format, rowGenerator
       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 || ''}" @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>`;
 }
-
 function getRequestFormTable(data, mimeType) {
   const options = {
     mimeType: mimeType,