openapi-explorer 2.1.656 → 2.1.658

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

@@ -2,24 +2,15 @@
 
 exports.__esModule = true;
 exports.default = void 0;
-
 var _lit = require("lit");
-
 var _marked = require("marked");
-
 var _unsafeHtml = require("lit/directives/unsafe-html.js");
-
 var _fontStyles = _interopRequireDefault(require("../styles/font-styles.js"));
-
 var _schemaStyles = _interopRequireDefault(require("../styles/schema-styles.js"));
-
 var _keyFrameStyles = _interopRequireDefault(require("../styles/key-frame-styles.js"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 const tablePadding = 16;
 const firstColumnInitialPadding = tablePadding * 2;
-
 class SchemaTable extends _lit.LitElement {
   static get properties() {
     return {
@@ -40,69 +31,63 @@ class SchemaTable extends _lit.LitElement {
       }
     };
   }
-
   connectedCallback() {
     super.connectedCallback();
-
     if (!this.schemaExpandLevel || this.schemaExpandLevel < 1) {
       this.schemaExpandLevel = 99999;
     }
-
     if (!this.schemaHideReadOnly || !'true false'.includes(this.schemaHideReadOnly)) {
       this.schemaHideReadOnly = 'true';
     }
-
     if (!this.schemaHideWriteOnly || !'true false'.includes(this.schemaHideWriteOnly)) {
       this.schemaHideWriteOnly = 'true';
     }
   }
+
   /**
    * @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, _keyFrameStyles.default, _schemaStyles.default, (0, _lit.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}.requiredStar::after{content:'*';color:var(--red);font-size:larger}.key.deprecated .key-label{text-decoration:line-through}.table .key-type{white-space:normal;width:150px}.key-type{display:flex}.key-type>.attributes{margin:.0625rem 0 0 .25rem}.obj-toggle{display:inline-flex;margin-left:-.8rem;margin-right:.8rem;color:var(--primary-color);cursor:pointer;font-size:calc(var(--font-size-small) + 4px);font-family:var(--font-mono);background-clip:border-box}.tr+.object-body{overflow:hidden}.table:not(.interactive) .object-body{animation-duration:0s!important}.tr:not(.collapsed)+.object-body{animation:linear .2s expand-height}.tr.collapsed+.object-body{animation:linear .2s collapse-height;max-height:0}.obj-toggle{transition:transform .1s ease}.tr.collapsed .obj-toggle{transform:rotate(-90deg)}`];
   }
-  /* eslint-disable indent */
-
 
+  /* eslint-disable indent */
   render() {
-    return (0, _lit.html)` ${this.data && this.data['::description'] ? (0, _lit.html)`<span class="m-markdown" style="padding-bottom:8px"> ${(0, _unsafeHtml.unsafeHTML)((0, _marked.marked)(this.data['::description'] || ''))}</span>` : ''} <div class="table ${this.interactive ? 'interactive' : ''}"> <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);padding-left:${firstColumnInitialPadding}px"> 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 ? (0, _lit.html)`${this.generateTree(this.data['::type'] === 'array' ? this.data['::props'] : this.data, this.data['::type'])}` : ''} </div> </div> `;
+    var _this$data, _this$data2;
+    const displayLine = [(_this$data = this.data) === null || _this$data === void 0 ? void 0 : _this$data['::title'], (_this$data2 = this.data) === null || _this$data2 === void 0 ? void 0 : _this$data2['::description']].filter(d => d).join(' - ');
+    return (0, _lit.html)` ${displayLine ? (0, _lit.html)`<span class="m-markdown" style="padding-bottom:8px"> ${(0, _unsafeHtml.unsafeHTML)((0, _marked.marked)(displayLine))}</span>` : ''} <div class="table ${this.interactive ? 'interactive' : ''}"> <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);padding-left:${firstColumnInitialPadding}px"> 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 ? (0, _lit.html)`${this.generateTree(this.data['::type'] === 'array' ? this.data['::props'] : this.data, this.data['::type'])}` : ''} </div> </div> `;
+  }
+  scrollToSchemaComponentByName(componentName) {
+    this.dispatchEvent(new CustomEvent('scrollToSchemaComponentByName', {
+      bubbles: true,
+      composed: true,
+      detail: componentName
+    }));
   }
-
   generateTree(data, dataType = 'object', key = '', title = '', description = '', schemaLevel = 0, indentLevel = 0) {
     var _keyLabel;
-
     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; // 16px space indentation at each level, start the first one at 32px to align with the field hr key row object
-
+    const newIndentLevel = dataType === 'xxx-of-option' || data['::type'] === 'xxx-of-option' || key.startsWith('::OPTION') ? indentLevel : indentLevel + 1;
+    // 16px space indentation at each level, start the first one at 32px to align with the field hr key row object
     const leftPadding = Math.max(firstColumnInitialPadding, tablePadding * newIndentLevel);
-
     if (!data) {
       return (0, _lit.html)`<div class="null" style="display:inline">null</div>`;
     }
-
     if (Object.keys(data).length === 0) {
       return (0, _lit.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;
@@ -113,43 +98,41 @@ class SchemaTable extends _lit.LitElement {
     } else {
       keyLabel = key;
     }
-
     let detailObjType = '';
-
+    let displaySchemaLink = false;
     if ((data['::type'] || '').includes('xxx-of')) {
       detailObjType = '';
-    } else if (data['::type'] === 'object') {
-      if (dataType === 'array') {
-        detailObjType = `[${keyLabel.replace(/(s|Collection|List)[*]?$/i, '')}]`; // Array of Object
-      } else {
-        detailObjType = 'object'; // Object
-      }
     } else if (data['::type'] === 'array') {
       if (dataType === 'array') {
         detailObjType = 'array of array'; // Array of array
       } else {
         detailObjType = 'array';
       }
+    } else if (data['::type']) {
+      displaySchemaLink = data['::link'];
+      if (dataType === 'array') {
+        detailObjType = `[${data['::link']}]`; // Array of Object
+      } else {
+        detailObjType = data['::link'] || data['::type'];
+      }
     }
-
     if (typeof data === 'object') {
       var _data$Metadata, _data$Metadata$constr;
-
       const flags = data['::flags'] || {};
-
       if (flags['🆁'] && this.schemaHideReadOnly === 'true') {
         return undefined;
       }
-
       if (flags['🆆'] && this.schemaHideWriteOnly === 'true') {
         return undefined;
       }
-
       const displayLine = [title && `**${title}${description ? ':' : ''}**`, description].filter(v => v).join(' ');
-      return (0, _lit.html)` ${newSchemaLevel >= 0 && key ? (0, _lit.html)` <div class="tr ${newSchemaLevel <= this.schemaExpandLevel ? '' : 'collapsed'} ${data['::type']}" data-obj="${keyLabel}"> <div class="td no-select key ${data['::deprecated'] ? 'deprecated' : ''}" style="padding-left:${leftPadding}px;cursor:pointer" @click="${e => this.toggleObjectExpand(e, keyLabel)}"> <div style="display:flex;align-items:center"> ${keyLabel || keyDescr ? (0, _lit.html)`<div class="obj-toggle" data-obj="${keyLabel}">▾</div>` : ''} ${data['::type'] === 'xxx-of-option' || data['::type'] === 'xxx-of-array' || key.startsWith('::OPTION') ? (0, _lit.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('*') ? (0, _lit.html)`<span class="key-label requiredStar" style="display:inline-block;margin-left:-6px" title="Required"> ${keyLabel.substring(0, keyLabel.length - 1)}</span>` : (0, _lit.html)`<span class="key-label" style="display:inline-block;margin-left:-6px">${keyLabel === '::props' ? '' : keyLabel}</span>`} </div> </div> <div class="td key-type"> <div>${(data['::type'] || '').includes('xxx-of') ? '' : detailObjType}</div> <div class="attributes" title="${flags['🆁'] && 'Read only attribute' || flags['🆆'] && 'Write only attribute' || ''}">${flags['🆁'] || flags['🆆'] || ''}</div> </div> <div class="td key-descr"> <span class="m-markdown-small">${(0, _unsafeHtml.unsafeHTML)((0, _marked.marked)(displayLine))}</span> ${(_data$Metadata = data['::metadata']) !== null && _data$Metadata !== void 0 && (_data$Metadata$constr = _data$Metadata.constraints) !== null && _data$Metadata$constr !== void 0 && _data$Metadata$constr.length ? (0, _lit.html)`<div style="display:inline-block;line-break:anywhere;margin-right:8px"><span class="bold-text">Constraints: </span>${data['::metadata'].constraints.join(', ')}</div><br>` : ''} </div> </div>` : (0, _lit.html)` ${data['::type'] === 'array' && dataType === 'array' ? (0, _lit.html)`<div class="tr"> <div class="td"> ${dataType} </div> </div>` : ''} `} <div class="object-body"> ${Array.isArray(data) && data[0] ? (0, _lit.html)`${this.generateTree(data[0], 'xxx-of-option', '::ARRAY~OF', data[0]['::title'], data[0]['::description'], newSchemaLevel, newIndentLevel)}` : (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)`${this.generateTree(data[dataKey]['::type'] === 'array' ? data[dataKey]['::props'] : data[dataKey], data[dataKey]['::type'], dataKey, data[dataKey]['::title'], data[dataKey]['::description'], newSchemaLevel, newIndentLevel)}` : '')}`} <div> </div></div>`;
-    } // For Primitive Data types
-
+      return (0, _lit.html)` ${newSchemaLevel >= 0 && key ? (0, _lit.html)` <div class="tr ${newSchemaLevel <= this.schemaExpandLevel ? '' : 'collapsed'} ${data['::type']}" data-obj="${keyLabel}"> <div class="td no-select key ${data['::deprecated'] ? 'deprecated' : ''}" style="padding-left:${leftPadding}px;cursor:pointer" @click="${e => this.toggleObjectExpand(e, keyLabel)}"> <div style="display:flex;align-items:center"> ${keyLabel || keyDescr ? (0, _lit.html)`<div class="obj-toggle" data-obj="${keyLabel}">▾</div>` : ''} ${data['::type'] === 'xxx-of-option' || data['::type'] === 'xxx-of-array' || key.startsWith('::OPTION') ? (0, _lit.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('*') ? (0, _lit.html)`<span class="key-label requiredStar" style="display:inline-block;margin-left:-6px" title="Required"> ${keyLabel.substring(0, keyLabel.length - 1)}</span>` : (0, _lit.html)`<span class="key-label" style="display:inline-block;margin-left:-6px">${keyLabel === '::props' ? '' : keyLabel}</span>`} </div> </div> <div class="td key-type"> ${displaySchemaLink ? (0, _lit.html)`<div class="schema-link" style="overflow:hidden;text-overflow:ellipsis" @click="${() => this.scrollToSchemaComponentByName(displaySchemaLink)}">${detailObjType}</div>` : (0, _lit.html)`<div>${(data['::type'] || '').includes('xxx-of') ? '' : detailObjType}</div>`} <div class="attributes" title="${flags['🆁'] && 'Read only attribute' || flags['🆆'] && 'Write only attribute' || ''}">${flags['🆁'] || flags['🆆'] || ''}</div> </div> <div class="td key-descr"> <span class="m-markdown-small">${(0, _unsafeHtml.unsafeHTML)((0, _marked.marked)(displayLine))}</span> ${(_data$Metadata = data['::metadata']) !== null && _data$Metadata !== void 0 && (_data$Metadata$constr = _data$Metadata.constraints) !== null && _data$Metadata$constr !== void 0 && _data$Metadata$constr.length ? (0, _lit.html)`<div style="display:inline-block;line-break:anywhere;margin-right:8px"><span class="bold-text">Constraints: </span>${data['::metadata'].constraints.join(', ')}</div><br>` : ''} </div> </div>` : (0, _lit.html)` ${data['::type'] === 'array' && dataType === 'array' ? (0, _lit.html)`<div class="tr"> <div class="td"> ${dataType} </div> </div>` : ''} `} <div class="object-body"> ${Array.isArray(data) && data[0] ? (0, _lit.html)`${this.generateTree(data[0], 'xxx-of-option', '::ARRAY~OF', data[0]['::title'], data[0]['::description'], newSchemaLevel, newIndentLevel)}` : (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)`${this.generateTree(data[dataKey]['::type'] === 'array' ? data[dataKey]['::props'] : data[dataKey], data[dataKey]['::type'], dataKey, data[dataKey]['::title'], data[dataKey]['::description'], newSchemaLevel, newIndentLevel)}` : '';
+      })}`} <div> </div></div>`;
+    }
 
+    // For Primitive Data types
     const {
       type,
       cssType,
@@ -164,29 +147,22 @@ class SchemaTable extends _lit.LitElement {
       schemaTitle,
       deprecated
     } = JSON.parse(data);
-
     if (readOrWriteOnly === '🆁' && this.schemaHideReadOnly === 'true') {
       return undefined;
     }
-
     if (readOrWriteOnly === '🆆' && this.schemaHideWriteOnly === 'true') {
       return undefined;
     }
-
     return (0, _lit.html)` <div class="tr"> <div class="td key ${deprecated ? 'deprecated' : ''}" style="padding-left:${leftPadding}px"> ${(_keyLabel = keyLabel) !== null && _keyLabel !== void 0 && _keyLabel.endsWith('*') ? (0, _lit.html)`<span class="key-label requiredStar" title="Required">${keyLabel.substring(0, keyLabel.length - 1)}</span>` : key.startsWith('::OPTION') ? (0, _lit.html)`<span class="xxx-of-key">${keyLabel}</span><span class="xxx-of-descr">${keyDescr}</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="td key-type"> <div>${dataType === 'array' ? '[' : ''}<span class="${cssType}">${format || type}</span>${dataType === 'array' ? ']' : ''}</div> <div class="attributes ${cssType}" style="font-family:var(--font-mono)" title="${readOrWriteOnly === '🆁' && 'Read only attribute' || readOrWriteOnly === '🆆' && 'Write only attribute' || ''}">${readOrWriteOnly}</div> </div> <div class="td key-descr"> <span class="m-markdown-small" style="vertical-align:middle"> ${(0, _unsafeHtml.unsafeHTML)((0, _marked.marked)(`${`${schemaTitle || title ? `**${schemaTitle || title}${schemaDescription || description ? ':' : ''}**` : ''} ${schemaDescription || description}` || ''}`))} </span> ${constraints.length ? (0, _lit.html)`<div style="display:inline-block;line-break:anywhere;margin-right:8px"><span class="bold-text">Constraints: </span>${constraints.join(', ')}</div><br>` : ''} ${defaultValue ? (0, _lit.html)`<div style="display:inline-block;line-break:anywhere;margin-right:8px"><span class="bold-text">Default: </span>${defaultValue}</div><br>` : ''} ${allowedValues ? (0, _lit.html)`<div style="display:inline-block;line-break:anywhere;margin-right:8px"><span class="bold-text">Allowed: </span>${allowedValues}</div><br>` : ''} ${pattern ? (0, _lit.html)`<div style="display:inline-block;line-break:anywhere;margin-right:8px"><span class="bold-text">Pattern: </span>${pattern}</div><br>` : ''} ${example ? (0, _lit.html)`<div style="display:inline-block;line-break:anywhere;margin-right:8px"><span class="bold-text">Example: </span>${example}</div><br>` : ''} </div> </div> `;
   }
   /* eslint-enable indent */
 
-
   toggleObjectExpand(e) {
     const rowEl = e.target.closest('.tr');
     rowEl.classList.toggle('collapsed');
   }
-
 }
-
 exports.default = SchemaTable;
-
 if (!customElements.get('openapi-explorer')) {
   customElements.define('schema-table', SchemaTable);
 }

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

@@ -2,25 +2,15 @@
 
 exports.__esModule = true;
 exports.default = void 0;
-
 var _lit = require("lit");
-
 var _marked = require("marked");
-
 var _unsafeHtml = require("lit/directives/unsafe-html.js");
-
 var _index = require("../languages/index.js");
-
 var _fontStyles = _interopRequireDefault(require("../styles/font-styles.js"));
-
 var _schemaStyles = _interopRequireDefault(require("../styles/schema-styles.js"));
-
 var _borderStyles = _interopRequireDefault(require("../styles/border-styles.js"));
-
 var _keyFrameStyles = _interopRequireDefault(require("../styles/key-frame-styles.js"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 class SchemaTree extends _lit.LitElement {
   static get properties() {
     return {
@@ -44,68 +34,55 @@ class SchemaTree extends _lit.LitElement {
       }
     };
   }
-
   connectedCallback() {
     super.connectedCallback();
-
     if (!this.schemaExpandLevel || this.schemaExpandLevel < 1) {
       this.schemaExpandLevel = 99999;
     }
-
     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';
     }
   }
+
   /**
    * @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, _schemaStyles.default, _borderStyles.default, _keyFrameStyles.default, (0, _lit.css)`.tree{min-height:30px;background:var(--bg2);padding:12px;font-size:var(--font-size-small);text-align:left;line-height:calc(var(--font-size-small) + 6px)}.tree .key{max-width:300px}.requiredStar::after{content:'*';color:var(--red);font-size:larger}.key.deprecated .key-label{text-decoration:line-through}.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}.td.key>.open-bracket:first-child{margin-left:-2px}.open-bracket:hover{color:var(--primary-color);background-color:var(--hover-color);border:1px solid var(--border-color)}.close-bracket{display:inline-block;font-family:var(--font-mono)}.inside-bracket-wrapper{overflow:hidden}.tree:not(.interactive) .inside-bracket-wrapper{animation-duration:0s!important}.tr:not(.collapsed)+.inside-bracket-wrapper{animation:linear .2s expand-height}.tr.collapsed+.inside-bracket-wrapper{animation:linear .2s collapse-height;max-height:0}.inside-bracket.array,.inside-bracket.object{border-left:1px dotted var(--border-color)}.inside-bracket.xxx-of.option{border-left:1px solid transparent}`];
   }
-  /* eslint-disable indent */
-
 
+  /* eslint-disable indent */
   render() {
-    return (0, _lit.html)` <div class="tree ${this.interactive ? 'interactive' : ''}"> <div class="toolbar"> ${this.data && this.data['::description'] ? (0, _lit.html)`<span class="m-markdown" style="margin-block-start:0"> ${(0, _unsafeHtml.unsafeHTML)((0, _marked.marked)(this.data['::description'] || ''))}</span>` : (0, _lit.html)`<div>&nbsp;</div>`} <div class="toolbar-item" @click="${() => this.toggleSchemaDescription()}"> ${this.schemaDescriptionExpanded ? (0, _index.getI18nText)('schemas.collapse-desc') : (0, _index.getI18nText)('schemas.expand-desc')} </div> </div> ${this.data ? (0, _lit.html)`${this.generateTree(this.data['::type'] === 'array' ? this.data['::props'] : this.data, this.data['::type'], this.data['::array-type'] || '')}` : (0, _lit.html)`<span class="mono-font" style="color:var(--red)"> ${(0, _index.getI18nText)('schemas.schema-missing')} </span>`} </div> `;
+    var _this$data, _this$data2;
+    const displayLine = [(_this$data = this.data) === null || _this$data === void 0 ? void 0 : _this$data['::title'], (_this$data2 = this.data) === null || _this$data2 === void 0 ? void 0 : _this$data2['::description']].filter(d => d).join(' - ');
+    return (0, _lit.html)` <div class="tree ${this.interactive ? 'interactive' : ''}"> <div class="toolbar"> ${displayLine ? (0, _lit.html)`<span class="m-markdown" style="margin-block-start:0"> ${(0, _unsafeHtml.unsafeHTML)((0, _marked.marked)(displayLine))}</span>` : (0, _lit.html)`<div>&nbsp;</div>`} <div class="toolbar-item" @click="${() => this.toggleSchemaDescription()}"> ${this.schemaDescriptionExpanded ? (0, _index.getI18nText)('schemas.collapse-desc') : (0, _index.getI18nText)('schemas.expand-desc')} </div> </div> ${this.data ? (0, _lit.html)`${this.generateTree(this.data['::type'] === 'array' ? this.data['::props'] : this.data, this.data['::type'], this.data['::array-type'] || '')}` : (0, _lit.html)`<span class="mono-font" style="color:var(--red)"> ${(0, _index.getI18nText)('schemas.schema-missing')} </span>`} </div> `;
   }
-
   toggleSchemaDescription() {
     this.schemaDescriptionExpanded = !this.schemaDescriptionExpanded;
     this.requestUpdate();
   }
-
   generateTree(data, dataType = 'object', arrayType = '', flags = {}, key = '', title = '', description = '', schemaLevel = 0, indentLevel = 0) {
     if (!data) {
-      return (0, _lit.html)`<div class="null" style="display:inline"> <span class="key-label xxx-of-key"> ${key.replace('::OPTION~', '')}</span> ${dataType === 'array' ? (0, _lit.html)`<span class="mono-font"> [ ] </span>` : dataType === 'object' ? (0, _lit.html)`<span class="mono-font"> { } </span>` : (0, _lit.html)`<span class="mono-font"> schema undefined </span>`} </div>`;
+      return (0, _lit.html)`<div class="null" style="display:inline"> <span class="key-label xxx-of-key"> ${key.replace('::OPTION~', '')}</span> ${dataType === 'array' && (0, _lit.html)`<span class="mono-font"> [ ] </span>` || dataType === 'object' && (0, _lit.html)`<span class="mono-font"> { } </span>` || (0, _lit.html)`<span class="mono-font"> ${dataType} </span>`} </div>`;
     }
-
     if (Object.keys(data).length === 0) {
       return (0, _lit.html)`<span class="key object">${key}:{ }</span>`;
     }
-
     let keyLabel = '';
     let keyDescr = '';
-
     if (key.startsWith('::ONE~OF') || key.startsWith('::ANY~OF')) {
       keyLabel = key.replace('::', '').replace('~', ' ');
     } else if (key.startsWith('::OPTION')) {
@@ -115,43 +92,21 @@ class SchemaTree extends _lit.LitElement {
     } else {
       keyLabel = key;
     }
-
-    const leftPadding = 16; // Min-width used for model keys: `td key `
-
+    const leftPadding = 16;
+    // Min-width used for model keys: `td key `
     const minFieldColWidth = 300 - indentLevel * leftPadding;
     let openBracket = '';
     let closeBracket = '';
     const newSchemaLevel = data['::type'] && data['::type'].startsWith('xxx-of') ? schemaLevel : schemaLevel + 1;
     const newIndentLevel = dataType === 'xxx-of-option' || data['::type'] === 'xxx-of-option' ? indentLevel : indentLevel + 1;
-
-    if (data['::type'] === 'object') {
-      if (dataType === 'array') {
-        if (schemaLevel < this.schemaExpandLevel) {
-          openBracket = (0, _lit.html)`<span class="open-bracket array-of-object" @click="${this.toggleObjectExpand}">[{</span>`;
-        } else {
-          openBracket = (0, _lit.html)`<span class="open-bracket array-of-object" @click="${this.toggleObjectExpand}">[{...}]</span>`;
-        }
-
-        closeBracket = '}]';
-      } else {
-        if (schemaLevel < this.schemaExpandLevel) {
-          openBracket = (0, _lit.html)`<span class="open-bracket object" @click="${this.toggleObjectExpand}">{</span>`;
-        } else {
-          openBracket = (0, _lit.html)`<span class="open-bracket object" @click="${this.toggleObjectExpand}">{...}</span>`;
-        }
-
-        closeBracket = '}';
-      }
-    } else if (data['::type'] === 'array') {
+    if (data['::type'] === 'array') {
       if (dataType === 'array') {
         const arrType = arrayType !== 'object' ? arrayType : '';
-
         if (schemaLevel < this.schemaExpandLevel) {
           openBracket = (0, _lit.html)`<span class="open-bracket array-of-array" data-array-type="${arrType}" @click="${this.toggleObjectExpand}">[[ ${arrType} </span>`;
         } else {
           openBracket = (0, _lit.html)`<span class="open-bracket array-of-array" data-array-type="${arrType}" @click="${this.toggleObjectExpand}">[[...]]</span>`;
         }
-
         closeBracket = ']]';
       } else {
         if (schemaLevel < this.schemaExpandLevel) {
@@ -159,7 +114,6 @@ class SchemaTree extends _lit.LitElement {
         } else {
           openBracket = (0, _lit.html)`<span class="open-bracket array" @click="${this.toggleObjectExpand}">[...]</span>`;
         }
-
         closeBracket = ']';
       }
     } else if (data['::type'] === 'xxx-of' && dataType === 'array') {
@@ -168,26 +122,40 @@ class SchemaTree extends _lit.LitElement {
       } else {
         openBracket = (0, _lit.html)`<span class="open-bracket array" @click="${this.toggleObjectExpand}">[...]</span>`;
       }
-
       closeBracket = ']';
+    } else if (data['::type']) {
+      if (dataType === 'array') {
+        if (schemaLevel < this.schemaExpandLevel) {
+          openBracket = (0, _lit.html)`<span class="open-bracket array-of-object" @click="${this.toggleObjectExpand}">[{</span>`;
+        } else {
+          openBracket = (0, _lit.html)`<span class="open-bracket array-of-object" @click="${this.toggleObjectExpand}">[{...}]</span>`;
+        }
+        closeBracket = '}]';
+      } else {
+        if (schemaLevel < this.schemaExpandLevel) {
+          openBracket = (0, _lit.html)`<span class="open-bracket object" @click="${this.toggleObjectExpand}">{</span>`;
+        } else {
+          openBracket = (0, _lit.html)`<span class="open-bracket object" @click="${this.toggleObjectExpand}">{...}</span>`;
+        }
+        closeBracket = '}';
+      }
     }
-
     if (typeof data === 'object') {
       var _data$Metadata, _data$Metadata$constr;
-
       if (flags['🆁'] && this.schemaHideReadOnly === 'true') {
         return undefined;
       }
-
       if (flags['🆆'] && this.schemaHideWriteOnly === 'true') {
         return undefined;
       }
-
       const displayLine = [flags['🆁'] || flags['🆆'], title && `**${title}${description ? ':' : ''}**`, description].filter(v => v).join(' ');
-      return (0, _lit.html)` <div class="tr ${schemaLevel < this.schemaExpandLevel || data['::type'] && data['::type'].startsWith('xxx-of') ? '' : 'collapsed'} ${data['::type'] || 'no-type-info'}"> <div class="td key ${data['::deprecated'] ? 'deprecated' : ''}" style="min-width:${minFieldColWidth}px"> ${data['::type'] === 'xxx-of-option' || data['::type'] === 'xxx-of-array' || key.startsWith('::OPTION') ? (0, _lit.html)`<span class="key-label xxx-of-key">${keyLabel}</span><span class="xxx-of-descr">${keyDescr}</span>` : keyLabel === '::props' || keyLabel === '::ARRAY~OF' ? '' : schemaLevel > 0 ? (0, _lit.html)`<span class="key-label"> ${keyLabel.replace(/\*$/, '')}${keyLabel.endsWith('*') ? (0, _lit.html)`<span class="requiredStar" title="Required"></span>` : ''}: </span>` : ''} ${openBracket} </div> <div class="td key-descr"> <span class="m-markdown-small" style="vertical-align:middle" title="${flags['🆁'] && 'Read only attribute' || flags['🆆'] && 'Write only attribute' || ''}"> ${(0, _unsafeHtml.unsafeHTML)((0, _marked.marked)(displayLine))} </span> ${this.schemaDescriptionExpanded ? (0, _lit.html)` ${(_data$Metadata = data['::metadata']) !== null && _data$Metadata !== void 0 && (_data$Metadata$constr = _data$Metadata.constraints) !== null && _data$Metadata$constr !== void 0 && _data$Metadata$constr.length ? (0, _lit.html)`<div style="display:inline-block;line-break:anywhere;margin-right:8px"><span class="bold-text">Constraints: </span>${data['::metadata'].constraints.join(', ')}</div><br>` : ''}` : ''} </div> </div> <div class="inside-bracket-wrapper"> <div class="inside-bracket ${data['::type'] || 'no-type-info'}" style="padding-left:${data['::type'] === 'xxx-of-option' || data['::type'] === 'xxx-of-array' ? 0 : leftPadding}px"> ${Array.isArray(data) && data[0] ? (0, _lit.html)`${this.generateTree(data[0], 'xxx-of-option', '', data[0]['::flags'] || {}, '::ARRAY~OF', data[0]['::title'], data[0]['::description'], newSchemaLevel, newIndentLevel)}` : (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)`${this.generateTree(data[dataKey]['::type'] === 'array' ? data[dataKey]['::props'] : data[dataKey], data[dataKey]['::type'], data[dataKey]['::array-type'] || '', data[dataKey]['::flags'], dataKey, data[dataKey]['::title'], data[dataKey]['::description'], newSchemaLevel, newIndentLevel)}` : '')}`} </div> ${data['::type'] && data['::type'].includes('xxx-of') ? '' : (0, _lit.html)`<div class="close-bracket"> ${closeBracket} </div>`} </div> `;
-    } // For Primitive Data types
-
+      return (0, _lit.html)` <div class="tr ${schemaLevel < this.schemaExpandLevel || data['::type'] && data['::type'].startsWith('xxx-of') ? '' : 'collapsed'} ${data['::type'] || 'no-type-info'}"> <div class="td key ${data['::deprecated'] ? 'deprecated' : ''}" style="min-width:${minFieldColWidth}px"> ${data['::type'] === 'xxx-of-option' || data['::type'] === 'xxx-of-array' || key.startsWith('::OPTION') ? (0, _lit.html)`<span class="key-label xxx-of-key">${keyLabel}</span><span class="xxx-of-descr">${keyDescr}</span>` : keyLabel === '::props' || keyLabel === '::ARRAY~OF' ? '' : schemaLevel > 0 ? (0, _lit.html)`<span class="key-label"> ${keyLabel.replace(/\*$/, '')}${keyLabel.endsWith('*') ? (0, _lit.html)`<span class="requiredStar" title="Required"></span>` : ''}: </span>` : ''} ${openBracket} </div> <div class="td key-descr"> <span class="m-markdown-small" style="vertical-align:middle" title="${flags['🆁'] && 'Read only attribute' || flags['🆆'] && 'Write only attribute' || ''}"> ${(0, _unsafeHtml.unsafeHTML)((0, _marked.marked)(displayLine))} </span> ${this.schemaDescriptionExpanded ? (0, _lit.html)` ${(_data$Metadata = data['::metadata']) !== null && _data$Metadata !== void 0 && (_data$Metadata$constr = _data$Metadata.constraints) !== null && _data$Metadata$constr !== void 0 && _data$Metadata$constr.length ? (0, _lit.html)`<div style="display:inline-block;line-break:anywhere;margin-right:8px"><span class="bold-text">Constraints: </span>${data['::metadata'].constraints.join(', ')}</div><br>` : ''}` : ''} </div> </div> <div class="inside-bracket-wrapper"> <div class="inside-bracket ${data['::type'] || 'no-type-info'}" style="padding-left:${data['::type'] === 'xxx-of-option' || data['::type'] === 'xxx-of-array' ? 0 : leftPadding}px"> ${Array.isArray(data) && data[0] ? (0, _lit.html)`${this.generateTree(data[0], 'xxx-of-option', '', data[0]['::flags'] || {}, '::ARRAY~OF', data[0]['::title'], data[0]['::description'], newSchemaLevel, newIndentLevel)}` : (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)`${this.generateTree(data[dataKey]['::type'] === 'array' ? data[dataKey]['::props'] : data[dataKey], data[dataKey]['::type'], data[dataKey]['::array-type'] || '', data[dataKey]['::flags'], dataKey, data[dataKey]['::title'], data[dataKey]['::description'], newSchemaLevel, newIndentLevel)}` : '';
+      })}`} </div> ${data['::type'] && data['::type'].includes('xxx-of') ? '' : (0, _lit.html)`<div class="close-bracket"> ${closeBracket} </div>`} </div> `;
+    }
 
+    // For Primitive Data types
     const {
       type,
       cssType,
@@ -202,39 +170,30 @@ class SchemaTree extends _lit.LitElement {
       schemaTitle,
       deprecated
     } = JSON.parse(data);
-
     if (readOrWriteOnly === '🆁' && this.schemaHideReadOnly === 'true') {
       return undefined;
     }
-
     if (readOrWriteOnly === '🆆' && this.schemaHideWriteOnly === 'true') {
       return undefined;
     }
-
     const titleString = schemaTitle || title;
     const descriptionString = schemaDescription || description;
     return (0, _lit.html)` <div class="tr"> <div class="td key ${deprecated ? 'deprecated' : ''}" style="min-width:${minFieldColWidth}px"> ${keyLabel.endsWith('*') ? (0, _lit.html)`<span class="key-label requiredStar" title="Required">${keyLabel.substring(0, keyLabel.length - 1)}</span>:` : key.startsWith('::OPTION') ? (0, _lit.html)`<span class="key-label xxx-of-key">${keyLabel}</span><span class="xxx-of-descr">${keyDescr}</span>` : schemaLevel > 0 ? (0, _lit.html)`<span class="key-label">${keyLabel}:</span>` : ''} <span>${dataType === 'array' ? '[' : ''}<span class="${cssType}">${format || type}</span>${dataType === 'array' ? ']' : ''}</span> </div> <div class="td key-descr"> <span class="m-markdown-small" style="vertical-align:middle" title="${readOrWriteOnly === '🆁' && 'Read only attribute' || readOrWriteOnly === '🆆' && 'Write only attribute' || ''}"> ${(0, _unsafeHtml.unsafeHTML)((0, _marked.marked)(`${readOrWriteOnly && `${readOrWriteOnly} ` || ''}${`${titleString ? `**${titleString}${descriptionString ? ':' : ''}**` : ''} ${descriptionString}` || ''}`))} </span> ${this.schemaDescriptionExpanded ? (0, _lit.html)` ${constraints.length ? (0, _lit.html)`<div style="display:inline-block;line-break:anywhere;margin-right:8px"><span class="bold-text">Constraints: </span>${constraints.join(', ')}</div><br>` : ''} ${defaultValue ? (0, _lit.html)`<div style="display:inline-block;line-break:anywhere;margin-right:8px"><span class="bold-text">Default: </span>${defaultValue}</div><br>` : ''} ${allowedValues ? (0, _lit.html)`<div style="display:inline-block;line-break:anywhere;margin-right:8px"><span class="bold-text">Allowed: </span>${allowedValues}</div><br>` : ''} ${pattern ? (0, _lit.html)`<div style="display:inline-block;line-break:anywhere;margin-right:8px"><span class="bold-text">Pattern: </span>${pattern}</div><br>` : ''} ${example ? (0, _lit.html)`<div style="display:inline-block;line-break:anywhere;margin-right:8px"><span class="bold-text">Example: </span>${example}</div><br>` : ''}` : ''} </div> </div> `;
   }
   /* eslint-enable indent */
 
-
   toggleObjectExpand(e) {
     const rowEl = e.target.closest('.tr');
     rowEl.classList.toggle('collapsed');
-
     if (rowEl.classList.contains('collapsed')) {
       e.target.innerHTML = e.target.classList.contains('array-of-object') ? '[{...}]' : e.target.classList.contains('array-of-array') ? '[[...]]' : e.target.classList.contains('array') ? '[...]' : '{...}';
     } else {
       e.target.innerHTML = e.target.classList.contains('array-of-object') ? '[{' : e.target.classList.contains('array-of-array') ? '[[' : e.target.classList.contains('object') ? '{' : '[';
     }
-
     this.requestUpdate();
   }
-
 }
-
 exports.default = SchemaTree;
-
 if (!customElements.get('openapi-explorer')) {
   customElements.define('schema-tree', SchemaTree);
 }

package/dist/lib/components/syntax-highlighter.js

@@ -1,53 +1,29 @@
 "use strict";
 
 var _lit = require("lit");
-
 var _unsafeHtml = require("lit/directives/unsafe-html.js");
-
 var _marked = require("marked");
-
 var _prismjs = _interopRequireDefault(require("prismjs"));
-
 require("./json-tree.js");
-
 require("prismjs/components/prism-markup-templating.js");
-
 require("prismjs/components/prism-css.js");
-
 require("prismjs/components/prism-yaml.js");
-
 require("prismjs/components/prism-go.js");
-
 require("prismjs/components/prism-ruby.js");
-
 require("prismjs/components/prism-java.js");
-
 require("prismjs/components/prism-json.js");
-
 require("prismjs/components/prism-bash.js");
-
 require("prismjs/components/prism-python.js");
-
 require("prismjs/components/prism-http.js");
-
 require("prismjs/components/prism-csharp.js");
-
 require("prismjs/components/prism-rust.js");
-
 require("prismjs/components/prism-php.js");
-
 var _prismStyles = _interopRequireDefault(require("../styles/prism-styles.js"));
-
 var _fontStyles = _interopRequireDefault(require("../styles/font-styles.js"));
-
 var _inputStyles = _interopRequireDefault(require("../styles/input-styles.js"));
-
 var _index = require("../languages/index.js");
-
 var _commonUtils = require("../utils/common-utils.js");
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 /**
  * Mapping mime-type => prism language
  */
@@ -58,10 +34,10 @@ const LANGUAGES = [{
   pattern: /xml/,
   language: 'html'
 }];
+
 /**
  * Syntax Highlighter component.
  */
-
 class SyntaxHighlighter extends _lit.LitElement {
   static get properties() {
     return {
@@ -78,96 +54,77 @@ class SyntaxHighlighter extends _lit.LitElement {
       }
     };
   }
-
   static finalizeStyles() {
     return [_prismStyles.default, _fontStyles.default, _inputStyles.default, (0, _lit.css)`:host{font-weight:400}div{position:relative;display:flex;flex-direction:column}.toolbar-copy-btn{position:absolute;top:0;right:0;margin-right:8px}.toolbar-copy-btn+pre{white-space:pre;max-height:400px;overflow:auto;display:flex;padding-right:70px}`];
   }
+
   /**
    * Returns the prism language to use based on language/content type
    * @returns {string} The language to use
    */
-
-
   detectLanguage() {
     if (this.language) {
       var _this$language;
-
       return (_this$language = this.language) === null || _this$language === void 0 ? void 0 : _this$language.toLowerCase();
     }
-
     if (this.mimeType) {
       var _this$mimeType, _LANGUAGES$find;
-
       const lcMimeType = (_this$mimeType = this.mimeType) === null || _this$mimeType === void 0 ? void 0 : _this$mimeType.toLowerCase();
       return (_LANGUAGES$find = LANGUAGES.find(def => def.pattern.test(lcMimeType))) === null || _LANGUAGES$find === void 0 ? void 0 : _LANGUAGES$find.language;
     }
-
     return null;
   }
-
   render() {
     return this.renderCopyWrapper(this.renderHighlight());
   }
+
   /**
    * Render the highlighted content.
    * @returns Highlighter
    */
-
-
   renderHighlight() {
     var _this$content;
-
     const lang = this.detectLanguage();
     const grammar = _prismjs.default.languages[lang];
-
     if (typeof this.content !== 'string') {
       return (0, _lit.html)`<json-tree .data="${this.content}">`;
     }
-
     const stringContent = ((_this$content = this.content) === null || _this$content === void 0 ? void 0 : _this$content.toString()) || '';
     const increasedSpaceContent = lang !== 'python' && lang !== 'yaml' && lang !== 'toml' ? stringContent.split('\n').map(line => line.replace(/^\s{2}/g, '    ')).join('\n') : stringContent;
     return grammar ? (0, _lit.html)`<pre><code>${(0, _unsafeHtml.unsafeHTML)(_prismjs.default.highlight(increasedSpaceContent, grammar, lang))}</code></pre>` : (0, _lit.html)`<pre>${increasedSpaceContent}</pre>`;
   }
+
   /**
    * Render a copy-to-clipboard button.
    * @param {*} content Content
    * @returns Content
    */
-
-
   renderCopyWrapper(content) {
     return (0, _lit.html)`<div> <button class="m-btn outline-primary toolbar-copy-btn" @click="${this.copyToClipboard}" part="btn btn-fill btn-copy">${(0, _index.getI18nText)('operations.copy')}</button> ${content} </div>`;
   }
+
   /**
    * Copy to clipboard.
    * @param {Event} e Event
    */
-
-
   copyToClipboard(e) {
     var _this$content2;
-
     const data = this.detectLanguage() === 'json' && typeof this.content !== 'string' ? JSON.stringify(this.content, null, 2) : (_this$content2 = this.content) === null || _this$content2 === void 0 ? void 0 : _this$content2.toString();
     (0, _commonUtils.copyToClipboard)(data, e);
   }
-
 }
+
 /*
  * Configure marked globally.
  */
-
-
 _marked.marked.setOptions({
   highlight(code, lang) {
     if (_prismjs.default.languages[lang]) {
       return _prismjs.default.highlight(code, _prismjs.default.languages[lang], lang);
     }
-
     return code;
   }
-
 });
-
 if (!customElements.get('openapi-explorer')) {
   customElements.define('syntax-highlighter', SyntaxHighlighter);
 }