openapi-explorer 0.9.310 → 0.9.314

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

@@ -0,0 +1,184 @@
+import { LitElement, html, css } from 'lit-element';
+import { marked } from 'marked';
+import { unsafeHTML } from 'lit-html/directives/unsafe-html';
+import { schemaInObjectNotation, generateExample } from '../utils/schema-utils';
+import FontStyles from '../styles/font-styles';
+import FlexStyles from '../styles/flex-styles';
+import TableStyles from '../styles/table-styles';
+import InputStyles from '../styles/input-styles';
+import TabStyles from '../styles/tab-styles';
+import BorderStyles from '../styles/border-styles';
+import './schema-tree';
+import './schema-table';
+export default class ApiResponse extends LitElement {
+  constructor() {
+    super();
+    this.selectedStatus = '';
+    this.headersForEachRespStatus = {};
+    this.mimeResponsesForEachStatus = {};
+    this.activeSchemaTab = 'model';
+  }
+
+  static get properties() {
+    return {
+      callback: {
+        type: String
+      },
+      responses: {
+        type: Object
+      },
+      parser: {
+        type: Object
+      },
+      schemaStyle: {
+        type: String,
+        attribute: 'schema-style'
+      },
+      renderStyle: {
+        type: String,
+        attribute: 'render-style'
+      },
+      selectedStatus: {
+        type: String,
+        attribute: 'selected-status'
+      },
+      selectedMimeType: {
+        type: String,
+        attribute: 'selected-mime-type'
+      },
+      activeSchemaTab: {
+        type: String,
+        attribute: 'active-schema-tab'
+      },
+      schemaExpandLevel: {
+        type: Number,
+        attribute: 'schema-expand-level'
+      },
+      schemaDescriptionExpanded: {
+        type: String,
+        attribute: 'schema-description-expanded'
+      },
+      schemaHideWriteOnly: {
+        type: String,
+        attribute: 'schema-hide-write-only'
+      }
+    };
+  }
+
+  static get styles() {
+    return [FontStyles, FlexStyles, TabStyles, TableStyles, InputStyles, BorderStyles, 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:#333;color:#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-top:8px}.focused-mode,.read-mode{padding-top:24px;margin-top:12px;border-top:1px dashed var(--border-color)}`];
+  }
+
+  render() {
+    return 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' : 'RESPONSE'} </div> <div> ${this.responseTemplate()} <div> </div> </div></div>`;
+  }
+
+  resetSelection() {
+    this.selectedStatus = '';
+    this.selectedMimeType = '';
+  }
+  /* 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
+
+
+        const schemaTree = schemaInObjectNotation(mimeRespObj.schema, {}); // Generate Example
+
+        const respExamples = generateExample(mimeRespObj.examples || '', mimeRespObj.example || '', mimeRespObj.schema, mimeResp, true, false, mimeResp.includes('json') ? 'json' : 'text');
+        allMimeResp[mimeResp] = {
+          description: this.responses[statusCode].description,
+          examples: respExamples,
+          selectedExample: respExamples[0] && respExamples[0].exampleId || '',
+          schemaTree
+        };
+      } // 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 html`<div class="row" style="flex-wrap:wrap"> ${Object.keys(this.responses).map(respStatus => html` ${respStatus === '$$ref' // Swagger-Client parser creates '$$ref' object if JSON references are used to create responses - this should be ignored
+    ? '' : 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 {
+        this.selectedMimeType = undefined;
+      }
+    }}" class="m-btn small ${this.selectedStatus === respStatus ? 'primary' : ''}" part="btn--resp ${this.selectedStatus === respStatus ? 'btn-fill--resp' : 'btn-outline--resp'} btn-response-status" style="margin:8px 4px 0 0"> ${respStatus} </button>`}`)} </div> ${Object.keys(this.responses).map(status => html` <div style="display:${status === this.selectedStatus ? 'block' : 'none'}"> <div class="top-gap"> <span class="resp-descr m-markdown">${unsafeHTML(marked(this.responses[status] && this.responses[status].description || ''))}</span> ${this.headersForEachRespStatus[status] && this.headersForEachRespStatus[status].length > 0 ? html`${this.responseHeaderListTemplate(this.headersForEachRespStatus[status])}` : ''} </div> ${Object.keys(this.mimeResponsesForEachStatus[status]).length === 0 ? '' : html` <div class="tab-panel col"> <div class="tab-buttons row" @click="${e => {
+      if (e.target.tagName.toLowerCase() === 'button') {
+        this.activeSchemaTab = e.target.dataset.tab;
+      }
+    }}"> <button class="tab-btn ${this.activeSchemaTab === 'model' ? 'active' : ''}" data-tab="model">MODEL</button> <button class="tab-btn ${this.activeSchemaTab === 'body' ? 'active' : ''}" data-tab="body">EXAMPLE</button> <div style="flex:1"></div> ${Object.keys(this.mimeResponsesForEachStatus[status]).length === 1 ? html`<span class="small-font-size gray-text" style="align-self:center;margin-top:8px"> ${Object.keys(this.mimeResponsesForEachStatus[status])[0]} </span>` : html`${this.mimeTypeDropdownTemplate(Object.keys(this.mimeResponsesForEachStatus[status]))}`} </div> ${this.activeSchemaTab === 'body' ? html`<div class="tab-content col" style="flex:1"> ${this.mimeExampleTemplate(this.mimeResponsesForEachStatus[status][this.selectedMimeType])} </div>` : html`<div class="tab-content col" style="flex:1"> ${this.mimeSchemaTemplate(this.mimeResponsesForEachStatus[status][this.selectedMimeType])} </div>`} </div> `}</div>`)} `;
+  }
+
+  responseHeaderListTemplate(respHeaders) {
+    return html` <div style="padding:16px 0 8px 0" class="resp-headers small-font-size bold-text">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 => html` <tr> <td style="padding:8px;vertical-align:baseline;min-width:120px;border-top:1px solid var(--light-border-color);text-overflow:ellipsis"> ${v.name || ''} </td> <td style="padding:4px;vertical-align:baseline;padding:0 5px;border-top:1px solid var(--light-border-color);text-overflow:ellipsis"> ${v.schema.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">${unsafeHTML(marked(v.description || ''))}</div> </td> <td style="padding:8px;vertical-align:baseline;border-top:1px solid var(--light-border-color);text-overflow:ellipsis"> ${v.schema.example || ''} </td> </tr> `)} </table>`;
+  }
+
+  mimeTypeDropdownTemplate(mimeTypes) {
+    return html` <select aria-label="mime type" @change="${e => {
+      this.selectedMimeType = e.target.value;
+    }}" style="margin-bottom:-1px;z-index:1"> ${mimeTypes.map(mimeType => 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')];
+    exampleEls.forEach(v => {
+      v.style.display = v.dataset.example === e.target.value ? 'block' : 'none';
+    });
+  }
+
+  mimeExampleTemplate(mimeRespDetails) {
+    if (!mimeRespDetails) {
+      return html` <pre style="color:var(--red)" class="example-panel border-top"> No example provided </pre> `;
+    }
+
+    return html` ${mimeRespDetails.examples.length === 1 ? html` ${mimeRespDetails.examples[0].exampleSummary && mimeRespDetails.examples[0].exampleSummary.length > 80 ? html`<div style="padding:4px 0"> ${mimeRespDetails.examples[0].exampleSummary} </div>` : ''} ${mimeRespDetails.examples[0].exampleDescription ? html`<div class="m-markdown-small" style="padding:4px 0"> ${unsafeHTML(marked(mimeRespDetails.examples[0].exampleDescription || ''))} </div>` : ''} ${mimeRespDetails.examples[0].exampleFormat === 'json' ? html` <json-tree render-style="${this.renderStyle}" .data="${mimeRespDetails.examples[0].exampleValue}" class="example-panel pad-top-8"></json-tree>` : html` <pre class="example-panel generic-tree border-top pad-top-8">${mimeRespDetails.examples[0].exampleValue}</pre> `}` : 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 => html`<option value="${v.exampleId}" ?selected="${v.exampleId === mimeRespDetails.selectedExample}"> ${v.exampleSummary.length > 80 ? v.exampleId : v.exampleSummary} </option>`)} </select> ${mimeRespDetails.examples.map(v => html` <div class="example" data-example="${v.exampleId}" style="display:${v.exampleId === mimeRespDetails.selectedExample ? 'block' : 'none'}"> ${v.exampleSummary && v.exampleSummary.length > 80 ? html`<div style="padding:4px 0"> ${v.exampleSummary} </div>` : ''} ${v.exampleDescription ? html`<div class="m-markdown-small" style="padding:4px 0"> ${unsafeHTML(marked(v.exampleDescription || ''))} </div>` : ''} ${v.exampleFormat === 'json' ? html` <json-tree render-style="${this.renderStyle}" .data="${v.exampleValue}"></json-tree>` : html`<pre class="generic-tree">${v.exampleValue}</pre>`} </div> `)} </span> `} `;
+  }
+
+  mimeSchemaTemplate(mimeRespDetails) {
+    if (!mimeRespDetails) {
+      return html` <pre style="color:var(--red)" class="${this.renderStyle === 'read' ? 'border pad-8-16' : 'border-top'}"> Schema not found</pre> `;
+    }
+
+    return html` ${this.schemaStyle === 'table' ? 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-description-expanded="${this.schemaDescriptionExpanded}" schema-hide-read-only="false" schema-hide-write-only="${this.schemaHideWriteOnly}">  </schema-table>` : 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-description-expanded="${this.schemaDescriptionExpanded}" schema-hide-read-only="false" schema-hide-write-only="${this.schemaHideWriteOnly}"> </schema-tree>`}`;
+  }
+  /* eslint-enable indent */
+
+
+} // Register the element with the browser
+
+if (!customElements.get('openapi-explorer')) {
+  customElements.define('api-response', ApiResponse);
+}

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

@@ -0,0 +1,67 @@
+import { LitElement, html, css } from 'lit-element';
+import { copyToClipboard } from '../utils/common-utils';
+import FontStyles from '../styles/font-styles';
+import BorderStyles from '../styles/border-styles';
+import InputStyles from '../styles/input-styles';
+export default class JsonTree extends LitElement {
+  static get properties() {
+    return {
+      data: {
+        type: Object
+      },
+      renderStyle: {
+        type: String,
+        attribute: 'render-style'
+      }
+    };
+  }
+
+  static get styles() {
+    return [FontStyles, BorderStyles, InputStyles, css`:host{display:flex}.json-tree{background:#333;color:#fff;padding:8px;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}.open-bracket:hover{color:var(--primary-color);background-color:var(--hover-color);border:1px solid var(--border-color)}.inside-bracket{padding-left:16px;border-left:1px dotted var(--border-color)}.open-bracket.collapsed+.inside-bracket,.open-bracket.collapsed+.inside-bracket+.close-bracket{display:none}.string{color:var(--green)}.number{color:var(--blue)}.null{color:var(--red)}.boolean{color:var(--orange)}.object{color:#fff}.toolbar{position:absolute;right:6px;display:flex;align-items:center}`];
+  }
+  /* eslint-disable indent */
+
+
+  render() {
+    return html` <div class="json-tree"> <div class="toolbar"> <button class="toolbar-copy-btn" part="btn btn-fill" @click="${e => {
+      copyToClipboard(JSON.stringify(this.data, null, 2), e);
+    }}">Copy</button> </div> ${this.generateTree(this.data, true)} </div> `;
+  }
+
+  generateTree(data, isLast = false) {
+    if (data === null) {
+      return 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 html`${Array.isArray(data) ? '[ ],' : '{ },'}`;
+      }
+
+      return html` <div class="open-bracket expanded ${detailType === 'array' ? 'array' : 'object'}" @click="${this.toggleExpand}"> ${detailType === 'array' ? '[' : '{'}</div> <div class="inside-bracket"> ${Object.keys(data).map((key, i, a) => html` <div class="item"> ${detailType === 'pure_object' ? html`"${key}":` : ''} ${this.generateTree(data[key], i === a.length - 1)} </div>`)} </div> <div class="close-bracket">${detailType === 'array' ? ']' : '}'}${isLast ? '' : ','}</div> `;
+    }
+
+    return typeof data === 'string' || data instanceof Date ? html`<span class="${typeof data}">"${data}"</span>${isLast ? '' : ','}` : html`<span class="${typeof data}">${data}</span>${isLast ? '' : ','}`;
+  }
+  /* eslint-enable indent */
+
+
+  toggleExpand(e) {
+    const openBracketEl = e.target;
+
+    if (openBracketEl.classList.contains('expanded')) {
+      openBracketEl.classList.replace('expanded', 'collapsed');
+      e.target.innerHTML = e.target.classList.contains('array') ? '[...]' : '{...}';
+    } else {
+      openBracketEl.classList.replace('collapsed', 'expanded');
+      e.target.innerHTML = e.target.classList.contains('array') ? '[' : '{';
+    }
+  }
+
+} // Register the element with the browser
+
+if (!customElements.get('openapi-explorer')) {
+  customElements.define('json-tree', JsonTree);
+}

package/{src → dist/es}/components/mime-types.js

@@ -1,5 +1,4 @@
-const db = require('mime-db');
-
+import db from 'mime-db';
 const EXTRACT_TYPE_REGEXP = /^\s*([^;\s]*)(?:;|\s|$)/;
 /**
  * Get the default extension for a MIME type.
@@ -11,12 +10,11 @@ const EXTRACT_TYPE_REGEXP = /^\s*([^;\s]*)(?:;|\s|$)/;
 export default function extension(type) {
   if (!type || typeof type !== 'string') {
     return false;
-  }
+  } // TODO: use media-typer
+
 
-  // TODO: use media-typer
-  const match = EXTRACT_TYPE_REGEXP.exec(type);
+  const match = EXTRACT_TYPE_REGEXP.exec(type); // get extensions
 
-  // get extensions
   const exts = match && exports.extensions[match[1].toLowerCase()];
 
   if (!exts || !exts.length) {
@@ -25,7 +23,6 @@ export default function extension(type) {
 
   return exts[0];
 }
-
 const extensions = {};
 const types = {};
 populateMaps();
@@ -33,19 +30,17 @@ populateMaps();
 function populateMaps() {
   // source preference (least -> most)
   const preference = ['nginx', 'apache', undefined, 'iana'];
-
   Object.keys(db).forEach(function forEachMimeType(type) {
     const mime = db[type];
     const exts = mime.extensions;
 
     if (!exts || !exts.length) {
       return;
-    }
+    } // mime -> extensions
+
 
-    // mime -> extensions
-    extensions[type] = exts;
+    extensions[type] = exts; // extension -> mime
 
-    // extension -> mime
     for (let i = 0; i < exts.length; i++) {
       const extensionToTest = exts[i];
 
@@ -53,15 +48,14 @@ function populateMaps() {
         const from = preference.indexOf(db[types[extensionToTest]].source);
         const to = preference.indexOf(mime.source);
 
-        if (types[extensionToTest] !== 'application/octet-stream'
-          && (from > to || (from === to && types[extensionToTest].substr(0, 12) === 'application/'))) {
+        if (types[extensionToTest] !== 'application/octet-stream' && (from > to || from === to && types[extensionToTest].substr(0, 12) === 'application/')) {
           // skip the remapping
           continue;
         }
-      }
+      } // set the extension -> mime
+
 
-      // set the extension -> mime
       types[extensionToTest] = type;
     }
   });
-}
+}

package/dist/es/components/schema-table.js

@@ -0,0 +1,156 @@
+import { LitElement, html, css } from 'lit-element';
+import { marked } from 'marked';
+import { unsafeHTML } from 'lit-html/directives/unsafe-html';
+import FontStyles from '../styles/font-styles';
+import SchemaStyles from '../styles/schema-styles';
+export default class SchemaTable extends LitElement {
+  static get properties() {
+    return {
+      schemaExpandLevel: {
+        type: Number,
+        attribute: 'schema-expand-level'
+      },
+      schemaDescriptionExpanded: {
+        type: String,
+        attribute: 'schema-description-expanded'
+      },
+      schemaHideReadOnly: {
+        type: String,
+        attribute: 'schema-hide-read-only'
+      },
+      schemaHideWriteOnly: {
+        type: String,
+        attribute: 'schema-hide-write-only'
+      },
+      data: {
+        type: Object
+      }
+    };
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+
+    if (!this.schemaExpandLevel || this.schemaExpandLevel < 1) {
+      this.schemaExpandLevel = 99999;
+    }
+
+    if (!this.schemaDescriptionExpanded || !'true false'.includes(this.schemaDescriptionExpanded)) {
+      this.schemaDescriptionExpanded = 'true';
+    }
+
+    if (!this.schemaHideReadOnly || !'true false'.includes(this.schemaHideReadOnly)) {
+      this.schemaHideReadOnly = 'true';
+    }
+
+    if (!this.schemaHideWriteOnly || !'true false'.includes(this.schemaHideWriteOnly)) {
+      this.schemaHideWriteOnly = 'true';
+    }
+  }
+
+  static get styles() {
+    return [FontStyles, SchemaStyles, css`.table{font-size:var(--font-size-small);text-align:left;line-height:calc(var(--font-size-small) + 6px)}.table .tr{width:calc(100% - 5px);padding:0 0 0 5px;border-bottom:1px dotted var(--light-border-color)}.table .td{padding:4px 0}.table .key{width:240px}.key.deprecated .key-label{text-decoration:line-through}.table .key-type{white-space:normal;width:150px}.collapsed-descr .tr{max-height:calc(var(--font-size-small) + var(--font-size-small) + 4px)}.obj-toggle{padding:0 2px;border-radius:2px;border:1px solid transparent;display:inline-block;margin-left:-16px;color:var(--primary-color);cursor:pointer;font-size:calc(var(--font-size-small) + 4px);font-family:var(--font-mono);background-clip:border-box}.obj-toggle:hover{border-color:var(--primary-color)}.tr.expanded+.object-body{display:block}.tr.collapsed+.object-body{display:none}`];
+  }
+  /* eslint-disable indent */
+
+
+  render() {
+    return html` <div class="table ${this.schemaDescriptionExpanded === 'true' ? 'expanded-descr' : 'collapsed-descr'}"> <div class="toolbar"> <div style="flex:1"></div> <div class="toolbar-item" @click="${() => {
+      this.schemaDescriptionExpanded = this.schemaDescriptionExpanded === 'true' ? 'false' : 'true';
+    }}"> ${this.schemaDescriptionExpanded === 'true' ? 'Collapse descriptions' : 'Expand descriptions'} </div> </div> ${this.data && this.data['::description'] ? html`<span class="m-markdown"> ${unsafeHTML(marked(this.data['::description'] || ''))}</span>` : ''} <div style="border:1px solid var(--light-border-color)"> <div style="display:flex;background-color:var(--bg2);padding:8px 4px;border-bottom:1px solid var(--light-border-color)"> <div class="key" style="font-family:var(--font-regular);font-weight:700;color:var(--fg)"> Field </div> <div class="key-type" style="font-family:var(--font-regular);font-weight:700;color:var(--fg)"> Type </div> <div class="key-descr" style="font-family:var(--font-regular);font-weight:700;color:var(--fg)"> Description </div> </div> ${this.data ? html`${this.generateTree(this.data['::type'] === 'array' ? this.data['::props'] : this.data, this.data['::type'])}` : ''} </div> </div> `;
+  }
+
+  generateTree(data, dataType = 'object', key = '', description = '', schemaLevel = 0, indentLevel = 0) {
+    const newSchemaLevel = data['::type'] && data['::type'].startsWith('xxx-of') ? schemaLevel : schemaLevel + 1;
+    const newIndentLevel = dataType === 'xxx-of-option' || data['::type'] === 'xxx-of-option' || key.startsWith('::OPTION') ? indentLevel : indentLevel + 1;
+    const leftPadding = 16 * newIndentLevel; // 2 space indentation at each level
+
+    if (!data) {
+      return html`<div class="null" style="display:inline">null</div>`;
+    }
+
+    if (Object.keys(data).length === 0) {
+      return html`<span class="td key object" style="padding-left:${leftPadding}px">${key}</span>`;
+    }
+
+    let keyLabel = '';
+    let keyDescr = '';
+    let isOneOfLabel = false;
+
+    if (key.startsWith('::ONE~OF') || key.startsWith('::ANY~OF')) {
+      keyLabel = key.replace('::', '').replace('~', ' ');
+      isOneOfLabel = true;
+    } else if (key.startsWith('::OPTION')) {
+      const parts = key.split('~');
+      keyLabel = parts[1];
+      keyDescr = parts[2];
+    } else {
+      keyLabel = key;
+    }
+
+    let detailObjType = '';
+
+    if (data['::type'] === 'object') {
+      if (dataType === 'array') {
+        detailObjType = 'array'; // Array of Object
+      } else {
+        detailObjType = 'object';
+      }
+    } else if (data['::type'] === 'array') {
+      if (dataType === 'array') {
+        detailObjType = 'array of array'; // Array of array
+      } else {
+        detailObjType = 'array';
+      }
+    }
+
+    if (typeof data === 'object') {
+      return html` ${newSchemaLevel >= 0 && key ? html` <div class="tr ${newSchemaLevel <= this.schemaExpandLevel ? 'expanded' : 'collapsed'} ${data['::type']}" data-obj="${keyLabel}"> <div class="td key ${data['::deprecated'] ? 'deprecated' : ''}" style="padding-left:${leftPadding}px"> ${keyLabel || keyDescr ? html` <span class="obj-toggle ${newSchemaLevel < this.schemaExpandLevel ? 'expanded' : 'collapsed'}" data-obj="${keyLabel}" @click="${e => this.toggleObjectExpand(e, keyLabel)}"> ${schemaLevel < this.schemaExpandLevel ? '-' : '+'} </span>` : ''} ${data['::type'] === 'xxx-of-option' || data['::type'] === 'xxx-of-array' || key.startsWith('::OPTION') ? html`<span class="xxx-of-key" style="margin-left:-6px">${keyLabel}</span><span class="${isOneOfLabel ? 'xxx-of-key' : 'xxx-of-descr'}">${keyDescr}</span>` : keyLabel.endsWith('*') ? html`<span class="key-label" style="display:inline-block;margin-left:-6px"> ${keyLabel.substring(0, keyLabel.length - 1)}</span><span style="color:var(--red)">*</span>` : html`<span class="key-label" style="display:inline-block;margin-left:-6px">${keyLabel === '::props' ? '' : keyLabel}</span>`} ${data['::type'] === 'xxx-of' && dataType === 'array' ? html`<span style="color:var(--primary-color)">ARRAY</span>` : ''} </div> <div class="td key-type">${(data['::type'] || '').includes('xxx-of') ? '' : detailObjType}</div> <div class="td key-descr m-markdown-small" style="line-height:1.7">${unsafeHTML(marked(description || ''))}</div> </div>` : html` ${data['::type'] === 'array' && dataType === 'array' ? html`<div class="tr"> <div class="td"> ${dataType} </div> </div>` : ''} `} <div class="object-body"> ${Array.isArray(data) && data[0] ? html`${this.generateTree(data[0], 'xxx-of-option', '::ARRAY~OF', '', newSchemaLevel, newIndentLevel)}` : html`${Object.keys(data).map(dataKey => ['::title', '::description', '::type', '::props', '::deprecated'].includes(dataKey) && data[dataKey]['::type'] !== 'array' && data[dataKey]['::type'] !== 'object' ? '' : html`${this.generateTree(data[dataKey]['::type'] === 'array' ? data[dataKey]['::props'] : data[dataKey], data[dataKey]['::type'], dataKey, data[dataKey]['::description'], newSchemaLevel, newIndentLevel)}`)}`} <div> </div></div>`;
+    } // For Primitive Data types
+
+
+    const {
+      type,
+      readOrWriteOnly,
+      constraint,
+      defaultValue,
+      allowedValues,
+      pattern,
+      schemaDescription,
+      schemaTitle,
+      deprecated
+    } = JSON.parse(data);
+
+    if (readOrWriteOnly === '🆁' && this.schemaHideReadOnly === 'true') {
+      return undefined;
+    }
+
+    if (readOrWriteOnly === '🆆' && this.schemaHideWriteOnly === 'true') {
+      return undefined;
+    }
+
+    const dataTypeCss = type.replace(/┃.*/g, '').replace(/[^a-zA-Z0-9+]/g, '').substring(0, 4).toLowerCase();
+    return html` <div class="tr primitive"> <div class="td key ${deprecated ? 'deprecated' : ''}" style="padding-left:${leftPadding}px"> ${keyLabel && keyLabel.endsWith('*') ? html`<span class="key-label">${keyLabel.substring(0, keyLabel.length - 1)}</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="td key-type ${dataTypeCss}"> ${dataType === 'array' ? `${type}[]` : type} <span style="font-family:var(--font-mono)" title="${readOrWriteOnly === '🆁' && 'Read only attribute' || readOrWriteOnly === '🆆' && 'Write only attribute' || ''}"> ${readOrWriteOnly} </span> </div> <div class="td key-descr"> ${dataType === 'array' ? html`<span class="m-markdown-small">${unsafeHTML(marked(description))}</span>` : ''} ${schemaTitle || schemaDescription ? html`<span class="m-markdown-small">${unsafeHTML(marked(`${schemaTitle ? `**${schemaTitle}:** ` : ''}${schemaDescription || ''}`))}</span>` : ''} ${constraint ? html`<div style="display:inline-block;line-break:anywhere;margin-right:8px"> <span class="bold-text">Constraints: </span> ${constraint}</div>` : ''} ${defaultValue ? html`<div style="display:inline-block;line-break:anywhere;margin-right:8px"> <span class="bold-text">Default: </span>${defaultValue}</div>` : ''} ${allowedValues ? html`<div style="display:inline-block;line-break:anywhere;margin-right:8px"> <span class="bold-text">Allowed: </span>${allowedValues}</div>` : ''} ${pattern ? html`<div style="display:inline-block;line-break:anywhere;margin-right:8px"> <span class="bold-text">Pattern: </span>${pattern}</div>` : ''} </div> </div> `;
+  }
+  /* eslint-enable indent */
+
+
+  toggleObjectExpand(e) {
+    const rowEl = e.target.closest('.tr');
+
+    if (rowEl.classList.contains('expanded')) {
+      rowEl.classList.add('collapsed');
+      rowEl.classList.remove('expanded');
+      e.target.innerText = '+';
+    } else {
+      rowEl.classList.remove('collapsed');
+      rowEl.classList.add('expanded');
+      e.target.innerText = '-';
+    }
+  }
+
+}
+
+if (!customElements.get('openapi-explorer')) {
+  customElements.define('schema-table', SchemaTable);
+}