openapi-explorer 2.2.775 → 2.3.777

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

@@ -100,6 +100,7 @@ export default class ApiResponse extends LitElement {
         const schemaTree = schemaInObjectNotation(mimeRespObj.schema, {
           includeNulls: this.includeNulls
         });
+
         // Generate Example
         const respExamples = generateExample(mimeRespObj.examples || '', mimeRespObj.example || '', mimeRespObj.schema, mimeResp, true, false, mimeResp.includes('json') ? 'json' : 'text');
         allMimeResp[mimeResp] = {

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

@@ -36,7 +36,7 @@ function generateFormRows(data, options, dataType = 'object', key = '', descript
     const displayLine = [description].filter(v => v).join(' ');
     return html` ${newSchemaLevel >= 0 && key ? 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' || key.startsWith('::OPTION') ? html`<span class="xxx-of-key">${keyLabel}</span><span class="${isOneOfLabel ? 'xxx-of-key' : 'xxx-of-descr'}">${keyDescr}</span>` : isRequired ? html`<span class="key-label requiredStar" style="display:inline-block" title="Required">${keyLabel}</span>` : html`<span class="key-label" style="display:inline-block">${keyLabel === '::props' ? '' : keyLabel}</span>`} </div> </td> <td> </td> <td class="key-descr m-markdown-small">${unsafeHTML(toMarkdown(displayLine))}</td> </tr>` : html`${data['::type'] === 'array' && dataType === 'array' ? html`<tr><td> ${dataType} </td> </tr>` : ''}`} ${Array.isArray(data) && data[0] ? html`${generateFormRows.call(this, data[0], options, 'xxx-of-option', '::ARRAY~OF', '', newSchemaLevel)}` : 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') ? html`${generateFormRows.call(this, data[dataKey]['::type'] === 'array' ? data[dataKey]['::props'] : data[dataKey], options, data[dataKey]['::type'], dataKey, data[dataKey]['::description'], newSchemaLevel)}` : '';
+      return !['::metadata', '::title', '::description', '::type', '::link', '::circular', '::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') ? html`${generateFormRows.call(this, data[dataKey]['::type'] === 'array' ? data[dataKey]['::props'] : data[dataKey], options, data[dataKey]['::type'], dataKey, data[dataKey]['::description'], newSchemaLevel)}` : '';
     })}`}`;
   }
 

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

@@ -17,6 +17,10 @@ export default class SchemaTable extends LitElement {
         type: String,
         attribute: 'schema-hide-read-only'
       },
+      hideComponentTitle: {
+        type: Boolean,
+        attribute: 'hide-component-title'
+      },
       schemaHideWriteOnly: {
         type: String,
         attribute: 'schema-hide-write-only'
@@ -52,20 +56,20 @@ export default class SchemaTable extends LitElement {
     this.interactive = true; // Note: interactive is not a reactive property
   }
   static finalizeStyles() {
-    return [FontStyles, KeyFrameStyles, 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}.requiredStar::after{content:'*';color:var(--red);font-size:larger}.key.deprecated .key-label{text-decoration:line-through}.table .key-type{white-space:normal}.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)}`];
+    return [FontStyles, KeyFrameStyles, 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}.requiredStar::after{content:'*';color:var(--red);font-size:larger}.key.deprecated .key-label{text-decoration:line-through}.table .key-type{white-space:normal}.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)}.tr.circular-object .obj-toggle{display:none}.tr.object .key-label{margin-left:-6px}`];
   }
 
   /* eslint-disable indent */
   render() {
     var _this$data, _this$data2, _this$data3, _this$data3$Props, _this$data4, _this$data4$Props, _this$data5;
     const title = ((_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['::type']) === 'array' && ((_this$data3 = this.data) === null || _this$data3 === void 0 ? void 0 : (_this$data3$Props = _this$data3['::props']) === null || _this$data3$Props === void 0 ? void 0 : _this$data3$Props['::title']) && `[${(_this$data4 = this.data) === null || _this$data4 === void 0 ? void 0 : (_this$data4$Props = _this$data4['::props']) === null || _this$data4$Props === void 0 ? void 0 : _this$data4$Props['::title']}]`;
-    const displayLine = [title, (_this$data5 = this.data) === null || _this$data5 === void 0 ? void 0 : _this$data5['::description']].filter(d => d).join(' - ');
+    const displayLine = [!this.hideComponentTitle && title, (_this$data5 = this.data) === null || _this$data5 === void 0 ? void 0 : _this$data5['::description']].filter(d => d).join(' - ');
     const {
       result,
       keyLabelMaxCharacterLength,
       typeMaxCharacterLength
     } = this.data ? this.generateTree(this.data['::type'] === 'array' ? this.data['::props'] : this.data, this.data['::type']) : {};
-    return html` ${displayLine ? html`<span class="m-markdown" style="padding-bottom:8px"> ${unsafeHTML(toMarkdown(displayLine))}</span>` : ''} <style>.table .key{width:${Math.max(240, (keyLabelMaxCharacterLength || 0) * 6) + 8}px;max-width:Min(400px,75%)}.table .key-type{width:${Math.max(150, (typeMaxCharacterLength || 0) * 6) + 8}px;max-width:25%}</style> <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" part="schema-key schema-table-header" style="font-family:var(--font-regular);font-weight:700;color:var(--fg);padding-left:${firstColumnInitialPadding}px"> Field </div> <div class="key-type" part="schema-type schema-table-header" style="font-family:var(--font-regular);font-weight:700;color:var(--fg)"> Type </div> <div class="key-descr" part="schema-description schema-table-header" style="font-family:var(--font-regular);font-weight:700;color:var(--fg)"> Description </div> </div> ${result || ''} </div> </div> `;
+    return html` ${displayLine ? html`<span class="m-markdown" style="padding-bottom:8px"> ${unsafeHTML(toMarkdown(displayLine))}</span>` : ''} <style>.table .key{width:${Math.max(240, (keyLabelMaxCharacterLength || 0) * 8) + 16}px;max-width:Min(400px,75%)}.table .key-type{width:${Math.max(150, (typeMaxCharacterLength || 0) * 8) + 16}px;max-width:25%}</style> <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" part="schema-key schema-table-header" style="font-family:var(--font-regular);font-weight:700;color:var(--fg);padding-left:${firstColumnInitialPadding}px"> Field </div> <div class="key-type" part="schema-type schema-table-header" style="font-family:var(--font-regular);font-weight:700;color:var(--fg)"> Type </div> <div class="key-descr" part="schema-description schema-table-header" style="font-family:var(--font-regular);font-weight:700;color:var(--fg)"> Description </div> </div> ${result || ''} </div> </div> `;
   }
   scrollToSchemaComponentByName(componentName) {
     this.dispatchEvent(new CustomEvent('scrollToSchemaComponentByName', {
@@ -150,24 +154,25 @@ export default class SchemaTable extends LitElement {
       } else {
         recursiveResult = Object.keys(data).filter(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 ? void 0 : _data$dataKey['::type']) && !data[dataKey]['::type'].includes('xxx-of');
+          return !['::metadata', '::title', '::description', '::type', '::link', '::circular', '::props', '::deprecated', '::array-type', '::dataTypeLabel', '::flags'].includes(dataKey) || ((_data$dataKey = data[dataKey]) === null || _data$dataKey === void 0 ? void 0 : _data$dataKey['::type']) && !data[dataKey]['::type'].includes('xxx-of');
         }).map(dataKey => {
           const {
             result: innerResult,
-            keyLabelMaxCharacterLength: innerObjectLevelIndentTationLevel,
+            keyLabelMaxCharacterLength: innerObjectLevelIndentationLevel,
             typeMaxCharacterLength: innerObjectLevelTypeMaxCharacterLength
           } = this.generateTree(data[dataKey]['::type'] === 'array' ? data[dataKey]['::props'] : data[dataKey], data[dataKey]['::type'], dataKey, data[dataKey]['::title'], data[dataKey]['::description'], newSchemaLevel, newIndentLevel) || {};
-          innerMaxIndentationLevel = Math.max(innerMaxIndentationLevel, innerObjectLevelIndentTationLevel);
+          innerMaxIndentationLevel = Math.max(innerMaxIndentationLevel, innerObjectLevelIndentationLevel);
           innerTypeMaxCharacterLength = Math.max(innerTypeMaxCharacterLength, innerObjectLevelTypeMaxCharacterLength);
           return innerResult;
         });
       }
       const displayLine = [title && `**${title}${description ? ':' : ''}**`, description].filter(v => v).join(' ');
-      const outerResult = html` ${newSchemaLevel >= 0 && key ? html` <div class="tr ${newSchemaLevel <= this.schemaExpandLevel ? '' : 'collapsed'} ${data['::type']}" data-obj="${keyLabel}"> <div class="td no-select key ${data['::deprecated'] ? 'deprecated' : ''}" part="schema-key" style="padding-left:${leftPadding}px;cursor:pointer" @click="${e => this.toggleObjectExpand(e, keyLabel)}"> <div style="display:flex;align-items:center"> ${keyLabel || keyDescr ? html`<div class="obj-toggle" data-obj="${keyLabel}">▾</div>` : ''} ${data['::type'] === 'xxx-of-option' || 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 requiredStar" style="display:inline-block;margin-left:-6px" title="Required"> ${keyLabel.substring(0, keyLabel.length - 1)}</span>` : html`<span class="key-label" style="display:inline-block;margin-left:-6px">${keyLabel === '::props' ? '' : keyLabel}</span>`} </div> </div> <div class="td key-type" part="schema-type"> ${displaySchemaLink ? html`<div class="schema-link" style="overflow:hidden;text-overflow:ellipsis" @click="${() => this.scrollToSchemaComponentByName(displaySchemaLink)}"> ${dataType === 'array' ? '[' : ''}<span style="color:var(--secondary-color)">${detailObjType}</span>${dataType === 'array' ? ']' : ''} </div>` : html`<div>${(data['::type'] || '').includes('xxx-of') ? '' : `${dataType === 'array' ? '[' : ''}${detailObjType}${dataType === 'array' ? ']' : ''}`}</div>`} <div class="attributes" title="${flags['🆁'] && 'Read only attribute' || flags['🆆'] && 'Write only attribute' || ''}">${flags['🆁'] || flags['🆆'] || ''}</div> </div> <div class="td key-descr" part="schema-description"> <span class="m-markdown-small">${unsafeHTML(toMarkdown(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 ? 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>` : html` ${data['::type'] === 'array' && dataType === 'array' ? html`<div class="tr"> <div class="td"> ${dataType} </div> </div>` : ''} `} <div class="object-body"> ${recursiveResult} <div> </div></div>`;
+      const detailObjTypeDisplay = data['::circular'] ? `{ Recursive: ${detailObjType} }` : detailObjType;
+      const outerResult = html` ${newSchemaLevel >= 0 && key ? html` <div class="tr ${newSchemaLevel <= this.schemaExpandLevel ? '' : 'collapsed'} ${data['::circular'] ? 'circular-object' : 'object'} ${data['::type']}" data-obj="${keyLabel}"> <div class="td no-select key ${data['::deprecated'] ? 'deprecated' : ''}" part="schema-key" style="padding-left:${leftPadding}px;cursor:pointer" @click="${e => this.toggleObjectExpand(e)}"> <div style="display:flex;align-items:center"> ${keyLabel || keyDescr ? html`<div class="obj-toggle" data-obj="${keyLabel}">▾</div>` : ''} ${data['::type'] === 'xxx-of-option' || key.startsWith('::OPTION') ? html`<span class="key-label xxx-of-key">${keyLabel}</span><span class="${isOneOfLabel ? 'xxx-of-key' : 'xxx-of-descr'}">${keyDescr}</span>` : keyLabel.endsWith('*') ? html`<span class="key-label requiredStar" style="display:inline-block" title="Required"> ${keyLabel.substring(0, keyLabel.length - 1)}</span>` : html`<span class="key-label" style="display:inline-block">${keyLabel === '::props' ? '' : keyLabel}</span>`} </div> </div> <div class="td key-type" part="schema-type"> ${displaySchemaLink ? html`<div class="schema-link" style="overflow:hidden;text-overflow:ellipsis" @click="${() => this.scrollToSchemaComponentByName(displaySchemaLink)}"> ${dataType === 'array' ? '[' : ''}<span style="color:var(--secondary-color)">${detailObjTypeDisplay}</span>${dataType === 'array' ? ']' : ''} </div>` : html`<div>${(data['::type'] || '').includes('xxx-of') ? '' : `${dataType === 'array' ? '[' : ''}${detailObjTypeDisplay}${dataType === 'array' ? ']' : ''}`}</div>`} <div class="attributes" title="${flags['🆁'] && 'Read only attribute' || flags['🆆'] && 'Write only attribute' || ''}">${flags['🆁'] || flags['🆆'] || ''}</div> </div> <div class="td key-descr" part="schema-description"> <span class="m-markdown-small">${unsafeHTML(toMarkdown(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 ? 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>` : html` ${data['::type'] === 'array' && dataType === 'array' ? html`<div class="tr"> <div class="td"> ${dataType} </div> </div>` : ''} `} <div class="object-body"> ${recursiveResult} <div> </div></div>`;
       return {
         result: outerResult,
         keyLabelMaxCharacterLength: Math.max(innerMaxIndentationLevel, (keyLabel || keyDescr).length),
-        typeMaxCharacterLength: Math.max(innerTypeMaxCharacterLength, detailObjType.length)
+        typeMaxCharacterLength: Math.max(innerTypeMaxCharacterLength, detailObjTypeDisplay.length)
       };
     }
 

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

@@ -23,6 +23,10 @@ export default class SchemaTree extends LitElement {
         type: String,
         attribute: 'schema-hide-read-only'
       },
+      hideComponentTitle: {
+        type: Boolean,
+        attribute: 'hide-component-title'
+      },
       schemaHideWriteOnly: {
         type: String,
         attribute: 'schema-hide-write-only'
@@ -63,7 +67,7 @@ export default class SchemaTree extends LitElement {
   render() {
     var _this$data, _this$data2, _this$data3, _this$data3$Props, _this$data4, _this$data4$Props, _this$data5;
     const title = ((_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['::type']) === 'array' && ((_this$data3 = this.data) === null || _this$data3 === void 0 ? void 0 : (_this$data3$Props = _this$data3['::props']) === null || _this$data3$Props === void 0 ? void 0 : _this$data3$Props['::title']) && `[${(_this$data4 = this.data) === null || _this$data4 === void 0 ? void 0 : (_this$data4$Props = _this$data4['::props']) === null || _this$data4$Props === void 0 ? void 0 : _this$data4$Props['::title']}]`;
-    const displayLine = [title, (_this$data5 = this.data) === null || _this$data5 === void 0 ? void 0 : _this$data5['::description']].filter(d => d).join(' - ');
+    const displayLine = [!this.hideComponentTitle && title, (_this$data5 = this.data) === null || _this$data5 === void 0 ? void 0 : _this$data5['::description']].filter(d => d).join(' - ');
     return html` <div class="tree ${this.interactive ? 'interactive' : ''}"> <div class="toolbar"> ${displayLine ? html`<span class="m-markdown" style="margin-block-start:0"> ${unsafeHTML(toMarkdown(displayLine))}</span>` : html`<div>&nbsp;</div>`} <div class="toolbar-item" @click="${() => this.toggleSchemaDescription()}"> ${this.schemaDescriptionExpanded ? getI18nText('schemas.collapse-desc') : getI18nText('schemas.expand-desc')} </div> </div> ${this.data ? html`${this.generateTree(this.data['::type'] === 'array' ? this.data['::props'] : this.data, this.data['::type'], this.data['::array-type'] || '')}` : html`<span class="mono-font" style="color:var(--red)"> ${getI18nText('schemas.schema-missing')} </span>`} </div> `;
   }
   toggleSchemaDescription() {

package/dist/es/styles/endpoint-styles.js

@@ -1,2 +1,2 @@
 import { css } from 'lit';
-export default css`.only-large-screen{display:none}.endpoint-head .path{display:flex;font-family:var(--font-mono);font-size:var(--font-size-small);align-items:center;flex-wrap:wrap}.endpoint-head .descr{font-size:var(--font-size-small);color:var(--light-fg);font-weight:400;align-items:center;overflow-wrap:break-word;word-break:break-all;display:none}.m-endpoint.expanded{margin-bottom:16px}.m-endpoint>.endpoint-head{border-width:1px 1px 1px 5px;border-style:solid;border-color:transparent;border-top-color:var(--light-border-color);display:flex;padding:6px 16px;align-items:center;cursor:pointer}.m-endpoint>.endpoint-head.put.expanded,.m-endpoint>.endpoint-head.put:hover{border-color:var(--orange);background-color:var(--light-orange)}.m-endpoint>.endpoint-head.post.expanded,.m-endpoint>.endpoint-head.post:hover{border-color:var(--green);background-color:var(--light-green)}.m-endpoint>.endpoint-head.get.expanded,.m-endpoint>.endpoint-head.get:hover,.m-endpoint>.endpoint-head.head.expanded,.m-endpoint>.endpoint-head.head:hover{border-color:var(--blue);background-color:var(--light-blue)}.m-endpoint>.endpoint-head.delete.expanded,.m-endpoint>.endpoint-head.delete:hover{border-color:var(--red);background-color:var(--light-red)}.m-endpoint>.endpoint-head.patch.expanded,.m-endpoint>.endpoint-head.patch:hover{border-color:var(--yellow);background-color:var(--light-yellow)}.m-endpoint>.endpoint-head.query.expanded,.m-endpoint>.endpoint-head.query:hover{border-color:var(--purple);background-color:var(--light-purple)}.m-endpoint>.endpoint-head.options.expanded,.m-endpoint>.endpoint-head.options:hover{border-color:var(--gray);background-color:var(--light-gray)}.m-endpoint .endpoint-body{word-break:break-word;flex-wrap:wrap;padding:16px 0 0 0;border-width:0 1px 1px 5px;border-style:solid;box-shadow:0 4px 3px -3px rgba(0,0,0,.15)}.m-endpoint .endpoint-body.delete{border-color:var(--red)}.m-endpoint .endpoint-body.put{border-color:var(--orange)}.m-endpoint .endpoint-body.post{border-color:var(--green)}.m-endpoint .endpoint-body.get,.m-endpoint .endpoint-body.head{border-color:var(--blue)}.m-endpoint .endpoint-body.patch{border-color:var(--yellow)}.m-endpoint .endpoint-body.query{border-color:var(--purple)}.m-endpoint .endpoint-body.options{border-color:var(--gray)}.summary{padding:8px 8px}.summary .title{font-size:calc(var(--font-size-regular) + 2px);margin-bottom:6px;word-break:break-word}.method{display:flex;justify-content:center;align-items:center;vertical-align:middle;font-size:calc(var(--font-size-small) - 2px);height:calc(var(--font-size-small) + .75rem);line-height:calc(var(--font-size-small) + .5rem);width:3.5rem;flex-shrink:0;border-radius:2px;text-align:center;font-weight:700;text-transform:uppercase;margin-right:5px}.method.delete{border:1px solid var(--red)}.method.put{border:1px solid var(--orange)}.method.post{border:1px solid var(--green)}.method.get,.method.head{border:1px solid var(--blue)}.method.patch{border:1px solid var(--yellow)}.method.query{border:1px solid var(--purple)}.method.options{border:1px solid var(--gray)}.req-resp-container{display:flex;margin-top:16px;align-items:stretch;flex-wrap:wrap;flex-direction:column}.view-request{flex:1;min-height:100px;max-width:100%;padding:16px 8px;overflow:hidden;border-width:0;border-style:dashed}.request,.response{flex:1;min-height:100px;max-width:100%;padding:16px 8px;overflow:hidden}.request{border-width:0 0 1px 0;border-style:dashed}.patch .request{border-top:1px dashed var(--yellow);border-color:var(--yellow)}.query .request{border-top:1px dashed var(--purple);border-color:var(--purple)}.options .request{border-top:1px dashed var(--gray);border-color:var(--gray)}.put .request{border-top:1px dashed var(--orange);border-color:var(--orange)}.post .request{border-top:1px dashed var(--green);border-color:var(--green)}.get .request,.head .request{border-top:1px dashed var(--blue);border-color:var(--blue)}.delete .request{border-top:1px dashed var(--red);border-color:var(--red)}@media only screen and (min-width:1024px){.only-large-screen{display:block}.endpoint-head .path{font-size:var(--font-size-regular);min-width:400px}.endpoint-head .descr{display:flex}.descr .m-markdown-small,.endpoint-head .m-markdown-small{display:block}.req-resp-container{flex-direction:var(--layout,row)}.request{border-width:0 1px 0 0;padding:16px}.response{padding:16px}.summary{padding:8px 16px}}.security-info-button{position:absolute;top:3px;right:2px;font-size:var(--font-size-small);line-height:1.5}@media only screen and (max-width:768px){.security-info-button{display:none}}pre.code-sample{padding:8px;min-height:30px;font-family:var(--font-mono);font-size:var(--font-size-small)}`;
+export default css`.only-large-screen{display:none}.endpoint-head .path{display:flex;font-family:var(--font-mono);font-size:var(--font-size-small);align-items:center;flex-wrap:wrap}.endpoint-head .descr{font-size:var(--font-size-small);color:var(--light-fg);font-weight:400;align-items:center;overflow-wrap:break-word;word-break:break-all;display:none}.m-endpoint.expanded{margin-bottom:16px}.m-endpoint>.endpoint-head{border-width:1px 1px 1px 5px;border-style:solid;border-color:transparent;border-top-color:var(--light-border-color);display:flex;padding:6px 16px;align-items:center;cursor:pointer}.m-endpoint>.endpoint-head.put.expanded,.m-endpoint>.endpoint-head.put:hover{border-color:var(--orange);background-color:var(--light-orange)}.m-endpoint>.endpoint-head.post.expanded,.m-endpoint>.endpoint-head.post:hover{border-color:var(--green);background-color:var(--light-green)}.m-endpoint>.endpoint-head.get.expanded,.m-endpoint>.endpoint-head.get:hover,.m-endpoint>.endpoint-head.head.expanded,.m-endpoint>.endpoint-head.head:hover{border-color:var(--blue);background-color:var(--light-blue)}.m-endpoint>.endpoint-head.delete.expanded,.m-endpoint>.endpoint-head.delete:hover{border-color:var(--red);background-color:var(--light-red)}.m-endpoint>.endpoint-head.patch.expanded,.m-endpoint>.endpoint-head.patch:hover{border-color:var(--yellow);background-color:var(--light-yellow)}.m-endpoint>.endpoint-head.query.expanded,.m-endpoint>.endpoint-head.query:hover{border-color:var(--purple);background-color:var(--light-purple)}.m-endpoint>.endpoint-head.trace.expanded,.m-endpoint>.endpoint-head.trace:hover{border-color:var(--purple);background-color:var(--light-purple)}.m-endpoint>.endpoint-head.options.expanded,.m-endpoint>.endpoint-head.options:hover{border-color:var(--gray);background-color:var(--light-gray)}.m-endpoint .endpoint-body{word-break:break-word;flex-wrap:wrap;padding:16px 0 0 0;border-width:0 1px 1px 5px;border-style:solid;box-shadow:0 4px 3px -3px rgba(0,0,0,.15)}.m-endpoint .endpoint-body.delete{border-color:var(--red)}.m-endpoint .endpoint-body.put{border-color:var(--orange)}.m-endpoint .endpoint-body.post{border-color:var(--green)}.m-endpoint .endpoint-body.get,.m-endpoint .endpoint-body.head{border-color:var(--blue)}.m-endpoint .endpoint-body.patch{border-color:var(--yellow)}.m-endpoint .endpoint-body.query{border-color:var(--purple)}.m-endpoint .endpoint-body.trace{border-color:var(--purple)}.m-endpoint .endpoint-body.options{border-color:var(--gray)}.summary{padding:8px 8px}.summary .title{font-size:calc(var(--font-size-regular) + 2px);margin-bottom:6px;word-break:break-word}.method{display:flex;justify-content:center;align-items:center;vertical-align:middle;font-size:calc(var(--font-size-small) - 2px);height:calc(var(--font-size-small) + .75rem);line-height:calc(var(--font-size-small) + .5rem);width:3.5rem;flex-shrink:0;border-radius:2px;text-align:center;font-weight:700;text-transform:uppercase;margin-right:5px}.method.delete{border:1px solid var(--red)}.method.put{border:1px solid var(--orange)}.method.post{border:1px solid var(--green)}.method.get,.method.head{border:1px solid var(--blue)}.method.patch{border:1px solid var(--yellow)}.method.query{border:1px solid var(--purple)}.method.trace{border:1px solid var(--purple)}.method.options{border:1px solid var(--gray)}.req-resp-container{display:flex;margin-top:16px;align-items:stretch;flex-wrap:wrap;flex-direction:column}.view-request{flex:1;min-height:100px;max-width:100%;padding:16px 8px;overflow:hidden;border-width:0;border-style:dashed}.request,.response{flex:1;min-height:100px;max-width:100%;padding:16px 8px;overflow:hidden}.request{border-width:0 0 1px 0;border-style:dashed}.patch .request{border-top:1px dashed var(--yellow);border-color:var(--yellow)}.query .request{border-top:1px dashed var(--purple);border-color:var(--purple)}.trace .request{border-top:1px dashed var(--purple);border-color:var(--purple)}.options .request{border-top:1px dashed var(--gray);border-color:var(--gray)}.put .request{border-top:1px dashed var(--orange);border-color:var(--orange)}.post .request{border-top:1px dashed var(--green);border-color:var(--green)}.get .request,.head .request{border-top:1px dashed var(--blue);border-color:var(--blue)}.delete .request{border-top:1px dashed var(--red);border-color:var(--red)}@media only screen and (min-width:1024px){.only-large-screen{display:block}.endpoint-head .path{font-size:var(--font-size-regular);min-width:400px}.endpoint-head .descr{display:flex}.descr .m-markdown-small,.endpoint-head .m-markdown-small{display:block}.req-resp-container{flex-direction:var(--layout,row)}.request{border-width:0 1px 0 0;padding:16px}.response{padding:16px}.summary{padding:8px 16px}}.security-info-button{position:absolute;top:3px;right:2px;font-size:var(--font-size-small);line-height:1.5}@media only screen and (max-width:768px){.security-info-button{display:none}}pre.code-sample{padding:8px;min-height:30px;font-family:var(--font-mono);font-size:var(--font-size-small)}`;

package/dist/es/styles/font-styles.js

@@ -1,2 +1,2 @@
 import { css } from 'lit';
-export default css`.hover-bg:hover{background:var(--bg3)}::selection{background:var(--selection-bg);color:var(--selection-fg)}.regular-font{font-family:var(--font-regular)}.mono-font{font-family:var(--font-mono)}.title{font-size:calc(var(--font-size-small) + 1rem);font-weight:400}.sub-title{font-size:20px}.req-res-title{font-family:var(--font-regular);font-size:calc(var(--font-size-small) + 4px);font-weight:700}.tiny-title{font-size:calc(var(--font-size-small) + 1px);font-weight:700}.regular-font-size{font-size:var(--font-size-regular)}.small-font-size{font-size:var(--font-size-small)}.upper{text-transform:uppercase}.primary-text{color:var(--primary-color)}.bold-text{font-weight:700}.gray-text{color:var(--light-fg)}.red-text{color:var(--red)}.blue-text{color:var(--blue)}.multiline{overflow:scroll;max-height:var(--resp-area-height,300px);color:var(--fg3)}.method-fg.put{color:var(--orange)}.method-fg.post{color:var(--green)}.method-fg.get,.method-fg.head{color:var(--blue)}.method-fg.delete{color:var(--red)}.method-fg.query{color:var(--purple)}.method-fg.options{color:var(--gray)}.method-fg.patch{color:var(--yellow)}h1{font-family:var(--font-regular);font-size:28px;padding-top:10px;letter-spacing:normal;font-weight:400}h2{font-family:var(--font-regular);font-size:24px;padding-top:10px;letter-spacing:normal;font-weight:400}h3{font-family:var(--font-regular);font-size:18px;padding-top:10px;letter-spacing:normal;font-weight:400}h4{font-family:var(--font-regular);font-size:16px;padding-top:10px;letter-spacing:normal;font-weight:400}h5{font-family:var(--font-regular);font-size:14px;padding-top:10px;letter-spacing:normal;font-weight:400}h6{font-family:var(--font-regular);font-size:14px;padding-top:10px;letter-spacing:normal;font-weight:400}h1,h2,h3,h4,h5{margin-block-end:.2em;margin-block-start:.5em}h3{margin-top:0}p{margin-block-start:.5em}a{color:var(--blue);cursor:pointer}a.inactive-link{color:var(--fg);text-decoration:none;cursor:text}code,pre,syntax-highlighter{margin:0;font-family:var(--font-mono);font-size:calc(var(--font-size-mono) - 1px)}.m-markdown syntax-highlighter{display:block}.m-markdown,.m-markdown-small{display:block}.m-markdown a,.m-markdown li,.m-markdown p,.m-markdown span{font-size:var(--font-size-regular);line-height:calc(var(--font-size-regular) + 6px)}.m-markdown-small a,.m-markdown-small li,.m-markdown-small p,.m-markdown-small span{font-size:var(--font-size-small);line-height:calc(var(--font-size-small) + 6px)}.m-markdown p:not(:first-child){margin-block-start:12px}.m-markdown-small p:not(:first-child){margin-block-start:12px}.m-markdown :first-child,.m-markdown-small :first-child{margin-block-start:0}.m-markdown p,.m-markdown-small p{margin-block-end:0;overflow-wrap:anywhere}.toolbar .m-markdown p,.toolbar .m-markdown-small p{margin-block-start:0}.m-markdown code span{font-size:var(--font-size-mono)}.m-markdown code,.m-markdown syntax-highlighter,.m-markdown-small code{padding:1px 6px;border-radius:2px;color:var(--inline-code-fg);background-color:var(--bg3);font-size:calc(var(--font-size-mono));line-height:1.2}.m-markdown-small code,.m-markdown-small syntax-highlighter{font-size:calc(var(--font-size-mono) - 1px)}.m-markdown pre,.m-markdown syntax-highlighter,.m-markdown-small pre{white-space:pre-wrap;overflow-x:auto;line-height:normal;border-radius:2px;border:1px solid var(--code-border-color)}.m-markdown pre,.m-markdown syntax-highlighter{padding:8px;background-color:var(--bg2);color:var(--code-fg)}.m-markdown-small pre,.m-markdown-small syntax-highlighter{margin-top:4px;padding:2px 4px;background-color:var(--bg3);color:var(--fg2)}.m-markdown pre code,.m-markdown-small pre code{border:none;padding:0}.m-markdown pre code{color:var(--code-fg);background-color:var(--bg2);background-color:transparent}.m-markdown-small pre code,.m-markdown-small syntax-highlighter{color:var(--fg2);background-color:var(--bg3)}.m-markdown ol,.m-markdown ul{padding-inline-start:30px}.m-markdown-small ol,.m-markdown-small ul{padding-inline-start:20px}.m-markdown a,.m-markdown-small a{color:var(--blue)}.m-markdown img,.m-markdown-small img{max-width:100%}.m-markdown table,.m-markdown-small table{border-spacing:0;margin:10px 0;border-collapse:separate;border:1px solid var(--border-color);border-radius:var(--border-radius);font-size:calc(var(--font-size-small) + 1px);line-height:calc(var(--font-size-small) + 4px);max-width:100%}.m-markdown-small table{font-size:var(--font-size-small);line-height:calc(var(--font-size-small) + 2px);margin:8px 0}.m-markdown td,.m-markdown th,.m-markdown-small td,.m-markdown-small th{vertical-align:top;border-top:1px solid var(--border-color);line-height:calc(var(--font-size-small) + 4px)}.m-markdown tr:first-child th,.m-markdown-small tr:first-child th{border-top:0 none}.m-markdown td,.m-markdown th{padding:10px 12px}.m-markdown-small td,.m-markdown-small th{padding:8px 8px}.m-markdown th,.m-markdown-small th{font-weight:600;background-color:var(--bg2);vertical-align:middle}.m-markdown-small table code{font-size:calc(var(--font-size-mono) - 2px)}.m-markdown table code{font-size:calc(var(--font-size-mono) - 1px)}.m-markdown blockquote,.m-markdown-small blockquote{margin-inline-start:0;margin-inline-end:0;border-left:3px solid var(--border-color);padding:6px 0 6px 6px}`;
+export default css`.hover-bg:hover{background:var(--bg3)}::selection{background:var(--selection-bg);color:var(--selection-fg)}.regular-font{font-family:var(--font-regular)}.mono-font{font-family:var(--font-mono)}.title{font-size:calc(var(--font-size-small) + 1rem);font-weight:400}.sub-title{font-size:20px}.req-res-title{font-family:var(--font-regular);font-size:calc(var(--font-size-small) + 4px);font-weight:700}.tiny-title{font-size:calc(var(--font-size-small) + 1px);font-weight:700}.regular-font-size{font-size:var(--font-size-regular)}.small-font-size{font-size:var(--font-size-small)}.upper{text-transform:uppercase}.primary-text{color:var(--primary-color)}.bold-text{font-weight:700}.gray-text{color:var(--light-fg)}.red-text{color:var(--red)}.blue-text{color:var(--blue)}.multiline{overflow:scroll;max-height:var(--resp-area-height,300px);color:var(--fg3)}.method-fg.put{color:var(--orange)}.method-fg.post{color:var(--green)}.method-fg.get,.method-fg.head{color:var(--blue)}.method-fg.delete{color:var(--red)}.method-fg.query{color:var(--purple)}.method-fg.trace{color:var(--purple)}.method-fg.options{color:var(--gray)}.method-fg.patch{color:var(--yellow)}h1{font-family:var(--font-regular);font-size:28px;padding-top:10px;letter-spacing:normal;font-weight:400}h2{font-family:var(--font-regular);font-size:24px;padding-top:10px;letter-spacing:normal;font-weight:400}h3{font-family:var(--font-regular);font-size:18px;padding-top:10px;letter-spacing:normal;font-weight:400}h4{font-family:var(--font-regular);font-size:16px;padding-top:10px;letter-spacing:normal;font-weight:400}h5{font-family:var(--font-regular);font-size:14px;padding-top:10px;letter-spacing:normal;font-weight:400}h6{font-family:var(--font-regular);font-size:14px;padding-top:10px;letter-spacing:normal;font-weight:400}h1,h2,h3,h4,h5{margin-block-end:.2em;margin-block-start:.5em}h3{margin-top:0}p{margin-block-start:.5em}a{color:var(--blue);cursor:pointer}a.inactive-link{color:var(--fg);text-decoration:none;cursor:text}code,pre,syntax-highlighter{margin:0;font-family:var(--font-mono);font-size:var(--font-size-mono)}.m-markdown syntax-highlighter{display:block}.m-markdown,.m-markdown-small{display:block}.m-markdown a,.m-markdown li,.m-markdown p,.m-markdown span{font-size:var(--font-size-regular);line-height:calc(var(--font-size-regular) + 6px)}.m-markdown-small a,.m-markdown-small li,.m-markdown-small p,.m-markdown-small span{font-size:var(--font-size-small);line-height:calc(var(--font-size-small) + 6px)}.m-markdown p:not(:first-child){margin-block-start:12px}.m-markdown-small p:not(:first-child){margin-block-start:12px}.m-markdown :first-child,.m-markdown-small :first-child{margin-block-start:0}.m-markdown p,.m-markdown-small p{margin-block-end:0;overflow-wrap:anywhere}.toolbar .m-markdown p,.toolbar .m-markdown-small p{margin-block-start:0}.m-markdown code span{font-size:var(--font-size-mono)}.m-markdown code,.m-markdown syntax-highlighter,.m-markdown-small code{padding:1px 6px;border-radius:2px;color:var(--inline-code-fg);background-color:var(--bg3);font-size:calc(var(--font-size-mono));line-height:1.2}.m-markdown-small code,.m-markdown-small syntax-highlighter{font-size:var(--font-size-mono)}.m-markdown pre,.m-markdown syntax-highlighter,.m-markdown-small pre{white-space:pre-wrap;overflow-x:auto;line-height:normal;border-radius:2px;border:1px solid var(--code-border-color)}.m-markdown pre,.m-markdown syntax-highlighter{padding:8px;background-color:var(--bg2);color:var(--code-fg)}.m-markdown-small pre,.m-markdown-small syntax-highlighter{margin-top:4px;padding:2px 4px;background-color:var(--bg3);color:var(--fg2)}.m-markdown pre code,.m-markdown-small pre code{border:none;padding:0}.m-markdown pre code{color:var(--code-fg);background-color:var(--bg2);background-color:transparent}.m-markdown-small pre code,.m-markdown-small syntax-highlighter{color:var(--fg2);background-color:var(--bg3)}.m-markdown ol,.m-markdown ul{padding-inline-start:30px}.m-markdown-small ol,.m-markdown-small ul{padding-inline-start:20px}.m-markdown a,.m-markdown-small a{color:var(--blue)}.m-markdown img,.m-markdown-small img{max-width:100%}.m-markdown table,.m-markdown-small table{border-spacing:0;margin:10px 0;border-collapse:separate;border:1px solid var(--border-color);border-radius:var(--border-radius);font-size:calc(var(--font-size-small) + 1px);line-height:calc(var(--font-size-small) + 4px);max-width:100%}.m-markdown-small table{font-size:var(--font-size-small);line-height:calc(var(--font-size-small) + 2px);margin:8px 0}.m-markdown td,.m-markdown th,.m-markdown-small td,.m-markdown-small th{vertical-align:top;border-top:1px solid var(--border-color);line-height:calc(var(--font-size-small) + 4px)}.m-markdown tr:first-child th,.m-markdown-small tr:first-child th{border-top:0 none}.m-markdown td,.m-markdown th{padding:10px 12px}.m-markdown-small td,.m-markdown-small th{padding:8px 8px}.m-markdown th,.m-markdown-small th{font-weight:600;background-color:var(--bg2);vertical-align:middle}.m-markdown-small table code{font-size:calc(var(--font-size-mono) - 1px)}.m-markdown table code{font-size:var(--font-size-mono)}.m-markdown blockquote,.m-markdown-small blockquote{margin-inline-start:0;margin-inline-end:0;border-left:3px solid var(--border-color);padding:6px 0 6px 6px}`;

package/dist/es/templates/components-template.js

@@ -9,7 +9,7 @@ function componentBodyTemplate(sComponent) {
   const formdataPartSchema = schemaInObjectNotation(sComponent.component, {
     includeNulls: this.includeNulls
   });
-  return html` <div class="expanded-endpoint-component observe-me ${sComponent.name}" id="cmp--${sComponent.id}"> <h2 @click="${() => this.scrollTo(`cmp--${sComponent.id}`)}">${sComponent.name}</h2> <div class="mono-font regular-font-size" style="padding:8px 0;color:var(--fg2)"> ${!this.displaySchemaAsTree ? html`<schema-table .data="${formdataPartSchema}" @scrollToSchemaComponentByName="${v => this.scrollToSchemaComponentByName(v)}" schema-expand-level="${this.schemaExpandLevel}" schema-hide-read-only="false" schema-hide-write-only="false" exportparts="schema-key, schema-type, schema-description, schema-table-header"> </schema-table>` : html`<schema-tree .data="${formdataPartSchema}" schema-expand-level="${this.schemaExpandLevel}" schema-hide-read-only="false" schema-hide-write-only="false" exportparts="schema-key, schema-type, schema-description"> </schema-tree>`} </div> </div> `;
+  return html` <div class="expanded-endpoint-component observe-me ${sComponent.id}" id="cmp--${sComponent.id}"> <h2 @click="${() => this.scrollTo(`cmp--${sComponent.id}`)}">${sComponent.name}</h2> <div class="mono-font regular-font-size" style="padding:8px 0;color:var(--fg2)"> ${!this.displaySchemaAsTree ? html`<schema-table .data="${formdataPartSchema}" @scrollToSchemaComponentByName="${v => this.scrollToSchemaComponentByName(v)}" schema-expand-level="${this.schemaExpandLevel}" hide-component-title="${true}" schema-hide-read-only="${false}" schema-hide-write-only="${false}" exportparts="schema-key, schema-type, schema-description, schema-table-header"> </schema-table>` : html`<schema-tree .data="${formdataPartSchema}" schema-expand-level="${this.schemaExpandLevel}" hide-component-title="${true}" schema-hide-read-only="${false}" schema-hide-write-only="${false}" exportparts="schema-key, schema-type, schema-description"> </schema-tree>`} </div> </div> `;
 }
 export function getComponentInfo(componentKeyId) {
   const infoDictionary = {

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

@@ -19,9 +19,7 @@ export function getTypeInfo(parameter, options = {
   const schema = Object.assign({}, parameter, parameter.schema);
   let dataType = IS_MISSING_TYPE_INFO_TYPE;
   let format = schema.format || ((_schema$items = schema.items) === null || _schema$items === void 0 ? void 0 : _schema$items.format) || '';
-  if (schema.circularReference) {
-    dataType = `{recursive: ${schema.circularReference.name}} `;
-  } else if (schema.type || schema.const) {
+  if (schema.type || schema.const) {
     if (!schema.type && schema.const) {
       schema.type = 'const';
     }
@@ -413,6 +411,7 @@ export function schemaInObjectNotation(rawSchema, options, level = 0, suffix = '
       resultObj[anyOf ? `::ANY~OF ${suffix}` : `::ONE~OF ${suffix}`] = objWithAnyOfProps;
     }
     resultObj['::link'] = schema.title || '';
+    resultObj['::circular'] = !!schema.circularReference;
     resultObj['::type'] = schema.title || 'object';
     resultObj['::flags'] = {
       '🆁': readOnly && '🆁',
@@ -457,6 +456,7 @@ export function schemaInObjectNotation(rawSchema, options, level = 0, suffix = '
     }
     if (complexTypes.length > 0) {
       obj['::link'] = schema.title || '';
+      obj['::circular'] = !!schema.circularReference;
       obj['::type'] = 'object';
       const multiTypeOptions = {
         '::type': 'xxx-of-option'
@@ -480,6 +480,7 @@ export function schemaInObjectNotation(rawSchema, options, level = 0, suffix = '
               '🆆': schema.writeOnly && '🆆'
             },
             '::link': schema.title || '',
+            '::circular': !!schema.circularReference,
             '::type': schema.title || 'object',
             '::deprecated': schema.deprecated || false,
             '::metadata': metadata
@@ -502,6 +503,7 @@ export function schemaInObjectNotation(rawSchema, options, level = 0, suffix = '
               '🆆': schema.writeOnly && '🆆'
             },
             '::link': arrayItemsSchema.title || schema.title || '',
+            '::circular': !!schema.circularReference,
             '::type': 'array',
             // Array properties are read from the ::props object instead of reading from the keys of this object
             '::props': schemaInObjectNotation(Object.assign({}, schema, arrayItemsSchema, {
@@ -517,7 +519,7 @@ export function schemaInObjectNotation(rawSchema, options, level = 0, suffix = '
     }
     return obj;
   }
-  if (propertyType === 'object' || schemaProperties) {
+  if (propertyType === 'object' || schemaProperties || schema.circularReference) {
     const obj = {
       '::type': ''
     };
@@ -528,6 +530,7 @@ export function schemaInObjectNotation(rawSchema, options, level = 0, suffix = '
       '🆆': schema.writeOnly && '🆆'
     };
     obj['::link'] = schema.title || '';
+    obj['::circular'] = !!schema.circularReference;
     obj['::type'] = schema.title || 'object';
     obj['::deprecated'] = schema.deprecated || false;
     obj['::metadata'] = metadata;
@@ -559,6 +562,7 @@ export function schemaInObjectNotation(rawSchema, options, level = 0, suffix = '
       '🆆': schema.writeOnly && '🆆'
     };
     obj['::link'] = (arrayItemsSchema === null || arrayItemsSchema === void 0 ? void 0 : arrayItemsSchema.title) || schema.title || '';
+    obj['::circular'] = !!schema.circularReference;
     obj['::type'] = 'array';
     obj['::deprecated'] = schema.deprecated || false;
     obj['::metadata'] = metadata;

package/dist/es/utils/spec-parser.js

@@ -135,11 +135,11 @@ function getComponents(openApiSpec) {
   }
   const components = [];
   for (const componentKeyId in openApiSpec.components) {
-    const subComponents = Object.keys(openApiSpec.components[componentKeyId]).map(sComponent => ({
+    const subComponents = Object.keys(openApiSpec.components[componentKeyId]).map(sComponentId => ({
       expanded: true,
-      id: `${componentKeyId.toLowerCase()}-${sComponent.toLowerCase()}`.replace(invalidCharsRegEx, '-'),
-      name: sComponent,
-      component: openApiSpec.components[componentKeyId][sComponent]
+      id: `${componentKeyId.toLowerCase()}-${sComponentId.toLowerCase()}`.replace(invalidCharsRegEx, '-'),
+      name: openApiSpec.components[componentKeyId][sComponentId].title || sComponentId,
+      component: openApiSpec.components[componentKeyId][sComponentId]
     })).sort((a, b) => a.name.toLowerCase().localeCompare(b.name.toLowerCase()));
     if (componentKeyId === 'requestBodies' || componentKeyId === 'securitySchemes' || componentKeyId === 'securitySchemas') {
       continue;

package/dist/es/utils/theme.js

@@ -68,5 +68,5 @@ export default function setTheme(theme = {}) {
     codeKeywordColor: theme.codeKeywordColor || '#07a',
     codeOperatorColor: theme.codeOperatorColor || '#9a6e3a'
   };
-  return html` <style>*,:after,:before{box-sizing:border-box}:host{--border-radius:2px;--layout:${this.layout || 'column'};--nav-path-padding:7px 0 7px 1.5rem;--resp-area-height:${this.responseAreaHeight};--font-size-small:13px;--font-size-mono:13px;--font-size-regular:16px;--dialog-z-index:1000;--bg:${newTheme.bg1};--bg2:${newTheme.bg2};--bg3:${newTheme.bg3};--light-bg:${newTheme.lightBg};--fg:${newTheme.fg1};--fg2:${newTheme.fg2};--fg3:${newTheme.fg3};--light-fg:${newTheme.lightFg};--selection-bg:${newTheme.selectionBg};--selection-fg:${newTheme.selectionFg};--overlay-bg:${newTheme.overlayBg};--border-color:${newTheme.borderColor};--light-border-color:${newTheme.lightBorderColor};--code-border-color:${newTheme.codeBorderColor};--input-bg:${newTheme.inputBg};--placeholder-color:${newTheme.placeHolder};--hover-color:${newTheme.hoverColor};${defaultColors.join(';\n')} ${lightColors.join(';\n')} --header-bg:${newTheme.headerColor};--header-fg:${newTheme.headerColorInvert};--header-color-darker:${newTheme.headerColorDarker};--header-color-border:${newTheme.headerColorBorder};--nav-bg-color:${newTheme.navBgColor};--nav-text-color:${newTheme.navTextColor};--nav-hover-bg-color:${newTheme.navHoverBgColor};--nav-hover-scrollbar-color:${navHoverScrollbarColor};--nav-hover-text-color:${newTheme.navHoverTextColor};--code-fg:${newTheme.codeFg};--inline-code-fg:${newTheme.inlineCodeFg};--code-property-color:${newTheme.codePropertyColor};--code-keyword-color:${newTheme.codeKeywordColor};--code-operator-color:${newTheme.codeOperatorColor};--primary-color:${theme.primaryColor};--secondary-color:${theme.secondaryColor};--primary-btn-text-color:${ColorUtils.color.selectTextColorFromBackground(theme.primaryColor)}}</style>`;
+  return html` <style>*,:after,:before{box-sizing:border-box}:host{--border-radius:2px;--layout:${this.layout || 'column'};--nav-path-padding:7px 0 7px 1.5rem;--resp-area-height:${this.responseAreaHeight};--font-size-small:16px;--font-size-mono:15px;--font-size-regular:18px;--dialog-z-index:1000;--bg:${newTheme.bg1};--bg2:${newTheme.bg2};--bg3:${newTheme.bg3};--light-bg:${newTheme.lightBg};--fg:${newTheme.fg1};--fg2:${newTheme.fg2};--fg3:${newTheme.fg3};--light-fg:${newTheme.lightFg};--selection-bg:${newTheme.selectionBg};--selection-fg:${newTheme.selectionFg};--overlay-bg:${newTheme.overlayBg};--border-color:${newTheme.borderColor};--light-border-color:${newTheme.lightBorderColor};--code-border-color:${newTheme.codeBorderColor};--input-bg:${newTheme.inputBg};--placeholder-color:${newTheme.placeHolder};--hover-color:${newTheme.hoverColor};${defaultColors.join(';\n')} ${lightColors.join(';\n')} --header-bg:${newTheme.headerColor};--header-fg:${newTheme.headerColorInvert};--header-color-darker:${newTheme.headerColorDarker};--header-color-border:${newTheme.headerColorBorder};--nav-bg-color:${newTheme.navBgColor};--nav-text-color:${newTheme.navTextColor};--nav-hover-bg-color:${newTheme.navHoverBgColor};--nav-hover-scrollbar-color:${navHoverScrollbarColor};--nav-hover-text-color:${newTheme.navHoverTextColor};--code-fg:${newTheme.codeFg};--inline-code-fg:${newTheme.inlineCodeFg};--code-property-color:${newTheme.codePropertyColor};--code-keyword-color:${newTheme.codeKeywordColor};--code-operator-color:${newTheme.codeOperatorColor};--primary-color:${theme.primaryColor};--secondary-color:${theme.secondaryColor};--primary-btn-text-color:${ColorUtils.color.selectTextColorFromBackground(theme.primaryColor)}}</style>`;
 }

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

@@ -105,6 +105,7 @@ class ApiResponse extends _lit.LitElement {
         const schemaTree = (0, _schemaUtils.schemaInObjectNotation)(mimeRespObj.schema, {
           includeNulls: this.includeNulls
         });
+
         // Generate Example
         const respExamples = (0, _schemaUtils.generateExample)(mimeRespObj.examples || '', mimeRespObj.example || '', mimeRespObj.schema, mimeResp, true, false, mimeResp.includes('json') ? 'json' : 'text');
         allMimeResp[mimeResp] = {

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

@@ -41,7 +41,7 @@ function generateFormRows(data, options, dataType = 'object', key = '', descript
     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' || 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, _commonUtils.toMarkdown)(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)}` : '';
+      return !['::metadata', '::title', '::description', '::type', '::link', '::circular', '::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)}` : '';
     })}`}`;
   }
 

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

@@ -22,6 +22,10 @@ class SchemaTable extends _lit.LitElement {
         type: String,
         attribute: 'schema-hide-read-only'
       },
+      hideComponentTitle: {
+        type: Boolean,
+        attribute: 'hide-component-title'
+      },
       schemaHideWriteOnly: {
         type: String,
         attribute: 'schema-hide-write-only'
@@ -57,20 +61,20 @@ class SchemaTable extends _lit.LitElement {
     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}.requiredStar::after{content:'*';color:var(--red);font-size:larger}.key.deprecated .key-label{text-decoration:line-through}.table .key-type{white-space:normal}.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)}`];
+    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}.requiredStar::after{content:'*';color:var(--red);font-size:larger}.key.deprecated .key-label{text-decoration:line-through}.table .key-type{white-space:normal}.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)}.tr.circular-object .obj-toggle{display:none}.tr.object .key-label{margin-left:-6px}`];
   }
 
   /* eslint-disable indent */
   render() {
     var _this$data, _this$data2, _this$data3, _this$data3$Props, _this$data4, _this$data4$Props, _this$data5;
     const title = ((_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['::type']) === 'array' && ((_this$data3 = this.data) === null || _this$data3 === void 0 ? void 0 : (_this$data3$Props = _this$data3['::props']) === null || _this$data3$Props === void 0 ? void 0 : _this$data3$Props['::title']) && `[${(_this$data4 = this.data) === null || _this$data4 === void 0 ? void 0 : (_this$data4$Props = _this$data4['::props']) === null || _this$data4$Props === void 0 ? void 0 : _this$data4$Props['::title']}]`;
-    const displayLine = [title, (_this$data5 = this.data) === null || _this$data5 === void 0 ? void 0 : _this$data5['::description']].filter(d => d).join(' - ');
+    const displayLine = [!this.hideComponentTitle && title, (_this$data5 = this.data) === null || _this$data5 === void 0 ? void 0 : _this$data5['::description']].filter(d => d).join(' - ');
     const {
       result,
       keyLabelMaxCharacterLength,
       typeMaxCharacterLength
     } = this.data ? this.generateTree(this.data['::type'] === 'array' ? this.data['::props'] : this.data, this.data['::type']) : {};
-    return (0, _lit.html)` ${displayLine ? (0, _lit.html)`<span class="m-markdown" style="padding-bottom:8px"> ${(0, _unsafeHtml.unsafeHTML)((0, _commonUtils.toMarkdown)(displayLine))}</span>` : ''} <style>.table .key{width:${Math.max(240, (keyLabelMaxCharacterLength || 0) * 6) + 8}px;max-width:Min(400px,75%)}.table .key-type{width:${Math.max(150, (typeMaxCharacterLength || 0) * 6) + 8}px;max-width:25%}</style> <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" part="schema-key schema-table-header" style="font-family:var(--font-regular);font-weight:700;color:var(--fg);padding-left:${firstColumnInitialPadding}px"> Field </div> <div class="key-type" part="schema-type schema-table-header" style="font-family:var(--font-regular);font-weight:700;color:var(--fg)"> Type </div> <div class="key-descr" part="schema-description schema-table-header" style="font-family:var(--font-regular);font-weight:700;color:var(--fg)"> Description </div> </div> ${result || ''} </div> </div> `;
+    return (0, _lit.html)` ${displayLine ? (0, _lit.html)`<span class="m-markdown" style="padding-bottom:8px"> ${(0, _unsafeHtml.unsafeHTML)((0, _commonUtils.toMarkdown)(displayLine))}</span>` : ''} <style>.table .key{width:${Math.max(240, (keyLabelMaxCharacterLength || 0) * 8) + 16}px;max-width:Min(400px,75%)}.table .key-type{width:${Math.max(150, (typeMaxCharacterLength || 0) * 8) + 16}px;max-width:25%}</style> <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" part="schema-key schema-table-header" style="font-family:var(--font-regular);font-weight:700;color:var(--fg);padding-left:${firstColumnInitialPadding}px"> Field </div> <div class="key-type" part="schema-type schema-table-header" style="font-family:var(--font-regular);font-weight:700;color:var(--fg)"> Type </div> <div class="key-descr" part="schema-description schema-table-header" style="font-family:var(--font-regular);font-weight:700;color:var(--fg)"> Description </div> </div> ${result || ''} </div> </div> `;
   }
   scrollToSchemaComponentByName(componentName) {
     this.dispatchEvent(new CustomEvent('scrollToSchemaComponentByName', {
@@ -155,24 +159,25 @@ class SchemaTable extends _lit.LitElement {
       } else {
         recursiveResult = Object.keys(data).filter(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 ? void 0 : _data$dataKey['::type']) && !data[dataKey]['::type'].includes('xxx-of');
+          return !['::metadata', '::title', '::description', '::type', '::link', '::circular', '::props', '::deprecated', '::array-type', '::dataTypeLabel', '::flags'].includes(dataKey) || ((_data$dataKey = data[dataKey]) === null || _data$dataKey === void 0 ? void 0 : _data$dataKey['::type']) && !data[dataKey]['::type'].includes('xxx-of');
         }).map(dataKey => {
           const {
             result: innerResult,
-            keyLabelMaxCharacterLength: innerObjectLevelIndentTationLevel,
+            keyLabelMaxCharacterLength: innerObjectLevelIndentationLevel,
             typeMaxCharacterLength: innerObjectLevelTypeMaxCharacterLength
           } = this.generateTree(data[dataKey]['::type'] === 'array' ? data[dataKey]['::props'] : data[dataKey], data[dataKey]['::type'], dataKey, data[dataKey]['::title'], data[dataKey]['::description'], newSchemaLevel, newIndentLevel) || {};
-          innerMaxIndentationLevel = Math.max(innerMaxIndentationLevel, innerObjectLevelIndentTationLevel);
+          innerMaxIndentationLevel = Math.max(innerMaxIndentationLevel, innerObjectLevelIndentationLevel);
           innerTypeMaxCharacterLength = Math.max(innerTypeMaxCharacterLength, innerObjectLevelTypeMaxCharacterLength);
           return innerResult;
         });
       }
       const displayLine = [title && `**${title}${description ? ':' : ''}**`, description].filter(v => v).join(' ');
-      const outerResult = (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' : ''}" part="schema-key" 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' || 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" part="schema-type"> ${displaySchemaLink ? (0, _lit.html)`<div class="schema-link" style="overflow:hidden;text-overflow:ellipsis" @click="${() => this.scrollToSchemaComponentByName(displaySchemaLink)}"> ${dataType === 'array' ? '[' : ''}<span style="color:var(--secondary-color)">${detailObjType}</span>${dataType === 'array' ? ']' : ''} </div>` : (0, _lit.html)`<div>${(data['::type'] || '').includes('xxx-of') ? '' : `${dataType === 'array' ? '[' : ''}${detailObjType}${dataType === 'array' ? ']' : ''}`}</div>`} <div class="attributes" title="${flags['🆁'] && 'Read only attribute' || flags['🆆'] && 'Write only attribute' || ''}">${flags['🆁'] || flags['🆆'] || ''}</div> </div> <div class="td key-descr" part="schema-description"> <span class="m-markdown-small">${(0, _unsafeHtml.unsafeHTML)((0, _commonUtils.toMarkdown)(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"> ${recursiveResult} <div> </div></div>`;
+      const detailObjTypeDisplay = data['::circular'] ? `{ Recursive: ${detailObjType} }` : detailObjType;
+      const outerResult = (0, _lit.html)` ${newSchemaLevel >= 0 && key ? (0, _lit.html)` <div class="tr ${newSchemaLevel <= this.schemaExpandLevel ? '' : 'collapsed'} ${data['::circular'] ? 'circular-object' : 'object'} ${data['::type']}" data-obj="${keyLabel}"> <div class="td no-select key ${data['::deprecated'] ? 'deprecated' : ''}" part="schema-key" style="padding-left:${leftPadding}px;cursor:pointer" @click="${e => this.toggleObjectExpand(e)}"> <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' || key.startsWith('::OPTION') ? (0, _lit.html)`<span class="key-label xxx-of-key">${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" title="Required"> ${keyLabel.substring(0, keyLabel.length - 1)}</span>` : (0, _lit.html)`<span class="key-label" style="display:inline-block">${keyLabel === '::props' ? '' : keyLabel}</span>`} </div> </div> <div class="td key-type" part="schema-type"> ${displaySchemaLink ? (0, _lit.html)`<div class="schema-link" style="overflow:hidden;text-overflow:ellipsis" @click="${() => this.scrollToSchemaComponentByName(displaySchemaLink)}"> ${dataType === 'array' ? '[' : ''}<span style="color:var(--secondary-color)">${detailObjTypeDisplay}</span>${dataType === 'array' ? ']' : ''} </div>` : (0, _lit.html)`<div>${(data['::type'] || '').includes('xxx-of') ? '' : `${dataType === 'array' ? '[' : ''}${detailObjTypeDisplay}${dataType === 'array' ? ']' : ''}`}</div>`} <div class="attributes" title="${flags['🆁'] && 'Read only attribute' || flags['🆆'] && 'Write only attribute' || ''}">${flags['🆁'] || flags['🆆'] || ''}</div> </div> <div class="td key-descr" part="schema-description"> <span class="m-markdown-small">${(0, _unsafeHtml.unsafeHTML)((0, _commonUtils.toMarkdown)(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"> ${recursiveResult} <div> </div></div>`;
       return {
         result: outerResult,
         keyLabelMaxCharacterLength: Math.max(innerMaxIndentationLevel, (keyLabel || keyDescr).length),
-        typeMaxCharacterLength: Math.max(innerTypeMaxCharacterLength, detailObjType.length)
+        typeMaxCharacterLength: Math.max(innerTypeMaxCharacterLength, detailObjTypeDisplay.length)
       };
     }
 

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

@@ -28,6 +28,10 @@ class SchemaTree extends _lit.LitElement {
         type: String,
         attribute: 'schema-hide-read-only'
       },
+      hideComponentTitle: {
+        type: Boolean,
+        attribute: 'hide-component-title'
+      },
       schemaHideWriteOnly: {
         type: String,
         attribute: 'schema-hide-write-only'
@@ -68,7 +72,7 @@ class SchemaTree extends _lit.LitElement {
   render() {
     var _this$data, _this$data2, _this$data3, _this$data3$Props, _this$data4, _this$data4$Props, _this$data5;
     const title = ((_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['::type']) === 'array' && ((_this$data3 = this.data) === null || _this$data3 === void 0 ? void 0 : (_this$data3$Props = _this$data3['::props']) === null || _this$data3$Props === void 0 ? void 0 : _this$data3$Props['::title']) && `[${(_this$data4 = this.data) === null || _this$data4 === void 0 ? void 0 : (_this$data4$Props = _this$data4['::props']) === null || _this$data4$Props === void 0 ? void 0 : _this$data4$Props['::title']}]`;
-    const displayLine = [title, (_this$data5 = this.data) === null || _this$data5 === void 0 ? void 0 : _this$data5['::description']].filter(d => d).join(' - ');
+    const displayLine = [!this.hideComponentTitle && title, (_this$data5 = this.data) === null || _this$data5 === void 0 ? void 0 : _this$data5['::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, _commonUtils.toMarkdown)(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() {

package/dist/lib/styles/endpoint-styles.js

@@ -3,4 +3,4 @@
 exports.__esModule = true;
 exports.default = void 0;
 var _lit = require("lit");
-var _default = exports.default = (0, _lit.css)`.only-large-screen{display:none}.endpoint-head .path{display:flex;font-family:var(--font-mono);font-size:var(--font-size-small);align-items:center;flex-wrap:wrap}.endpoint-head .descr{font-size:var(--font-size-small);color:var(--light-fg);font-weight:400;align-items:center;overflow-wrap:break-word;word-break:break-all;display:none}.m-endpoint.expanded{margin-bottom:16px}.m-endpoint>.endpoint-head{border-width:1px 1px 1px 5px;border-style:solid;border-color:transparent;border-top-color:var(--light-border-color);display:flex;padding:6px 16px;align-items:center;cursor:pointer}.m-endpoint>.endpoint-head.put.expanded,.m-endpoint>.endpoint-head.put:hover{border-color:var(--orange);background-color:var(--light-orange)}.m-endpoint>.endpoint-head.post.expanded,.m-endpoint>.endpoint-head.post:hover{border-color:var(--green);background-color:var(--light-green)}.m-endpoint>.endpoint-head.get.expanded,.m-endpoint>.endpoint-head.get:hover,.m-endpoint>.endpoint-head.head.expanded,.m-endpoint>.endpoint-head.head:hover{border-color:var(--blue);background-color:var(--light-blue)}.m-endpoint>.endpoint-head.delete.expanded,.m-endpoint>.endpoint-head.delete:hover{border-color:var(--red);background-color:var(--light-red)}.m-endpoint>.endpoint-head.patch.expanded,.m-endpoint>.endpoint-head.patch:hover{border-color:var(--yellow);background-color:var(--light-yellow)}.m-endpoint>.endpoint-head.query.expanded,.m-endpoint>.endpoint-head.query:hover{border-color:var(--purple);background-color:var(--light-purple)}.m-endpoint>.endpoint-head.options.expanded,.m-endpoint>.endpoint-head.options:hover{border-color:var(--gray);background-color:var(--light-gray)}.m-endpoint .endpoint-body{word-break:break-word;flex-wrap:wrap;padding:16px 0 0 0;border-width:0 1px 1px 5px;border-style:solid;box-shadow:0 4px 3px -3px rgba(0,0,0,.15)}.m-endpoint .endpoint-body.delete{border-color:var(--red)}.m-endpoint .endpoint-body.put{border-color:var(--orange)}.m-endpoint .endpoint-body.post{border-color:var(--green)}.m-endpoint .endpoint-body.get,.m-endpoint .endpoint-body.head{border-color:var(--blue)}.m-endpoint .endpoint-body.patch{border-color:var(--yellow)}.m-endpoint .endpoint-body.query{border-color:var(--purple)}.m-endpoint .endpoint-body.options{border-color:var(--gray)}.summary{padding:8px 8px}.summary .title{font-size:calc(var(--font-size-regular) + 2px);margin-bottom:6px;word-break:break-word}.method{display:flex;justify-content:center;align-items:center;vertical-align:middle;font-size:calc(var(--font-size-small) - 2px);height:calc(var(--font-size-small) + .75rem);line-height:calc(var(--font-size-small) + .5rem);width:3.5rem;flex-shrink:0;border-radius:2px;text-align:center;font-weight:700;text-transform:uppercase;margin-right:5px}.method.delete{border:1px solid var(--red)}.method.put{border:1px solid var(--orange)}.method.post{border:1px solid var(--green)}.method.get,.method.head{border:1px solid var(--blue)}.method.patch{border:1px solid var(--yellow)}.method.query{border:1px solid var(--purple)}.method.options{border:1px solid var(--gray)}.req-resp-container{display:flex;margin-top:16px;align-items:stretch;flex-wrap:wrap;flex-direction:column}.view-request{flex:1;min-height:100px;max-width:100%;padding:16px 8px;overflow:hidden;border-width:0;border-style:dashed}.request,.response{flex:1;min-height:100px;max-width:100%;padding:16px 8px;overflow:hidden}.request{border-width:0 0 1px 0;border-style:dashed}.patch .request{border-top:1px dashed var(--yellow);border-color:var(--yellow)}.query .request{border-top:1px dashed var(--purple);border-color:var(--purple)}.options .request{border-top:1px dashed var(--gray);border-color:var(--gray)}.put .request{border-top:1px dashed var(--orange);border-color:var(--orange)}.post .request{border-top:1px dashed var(--green);border-color:var(--green)}.get .request,.head .request{border-top:1px dashed var(--blue);border-color:var(--blue)}.delete .request{border-top:1px dashed var(--red);border-color:var(--red)}@media only screen and (min-width:1024px){.only-large-screen{display:block}.endpoint-head .path{font-size:var(--font-size-regular);min-width:400px}.endpoint-head .descr{display:flex}.descr .m-markdown-small,.endpoint-head .m-markdown-small{display:block}.req-resp-container{flex-direction:var(--layout,row)}.request{border-width:0 1px 0 0;padding:16px}.response{padding:16px}.summary{padding:8px 16px}}.security-info-button{position:absolute;top:3px;right:2px;font-size:var(--font-size-small);line-height:1.5}@media only screen and (max-width:768px){.security-info-button{display:none}}pre.code-sample{padding:8px;min-height:30px;font-family:var(--font-mono);font-size:var(--font-size-small)}`;
+var _default = exports.default = (0, _lit.css)`.only-large-screen{display:none}.endpoint-head .path{display:flex;font-family:var(--font-mono);font-size:var(--font-size-small);align-items:center;flex-wrap:wrap}.endpoint-head .descr{font-size:var(--font-size-small);color:var(--light-fg);font-weight:400;align-items:center;overflow-wrap:break-word;word-break:break-all;display:none}.m-endpoint.expanded{margin-bottom:16px}.m-endpoint>.endpoint-head{border-width:1px 1px 1px 5px;border-style:solid;border-color:transparent;border-top-color:var(--light-border-color);display:flex;padding:6px 16px;align-items:center;cursor:pointer}.m-endpoint>.endpoint-head.put.expanded,.m-endpoint>.endpoint-head.put:hover{border-color:var(--orange);background-color:var(--light-orange)}.m-endpoint>.endpoint-head.post.expanded,.m-endpoint>.endpoint-head.post:hover{border-color:var(--green);background-color:var(--light-green)}.m-endpoint>.endpoint-head.get.expanded,.m-endpoint>.endpoint-head.get:hover,.m-endpoint>.endpoint-head.head.expanded,.m-endpoint>.endpoint-head.head:hover{border-color:var(--blue);background-color:var(--light-blue)}.m-endpoint>.endpoint-head.delete.expanded,.m-endpoint>.endpoint-head.delete:hover{border-color:var(--red);background-color:var(--light-red)}.m-endpoint>.endpoint-head.patch.expanded,.m-endpoint>.endpoint-head.patch:hover{border-color:var(--yellow);background-color:var(--light-yellow)}.m-endpoint>.endpoint-head.query.expanded,.m-endpoint>.endpoint-head.query:hover{border-color:var(--purple);background-color:var(--light-purple)}.m-endpoint>.endpoint-head.trace.expanded,.m-endpoint>.endpoint-head.trace:hover{border-color:var(--purple);background-color:var(--light-purple)}.m-endpoint>.endpoint-head.options.expanded,.m-endpoint>.endpoint-head.options:hover{border-color:var(--gray);background-color:var(--light-gray)}.m-endpoint .endpoint-body{word-break:break-word;flex-wrap:wrap;padding:16px 0 0 0;border-width:0 1px 1px 5px;border-style:solid;box-shadow:0 4px 3px -3px rgba(0,0,0,.15)}.m-endpoint .endpoint-body.delete{border-color:var(--red)}.m-endpoint .endpoint-body.put{border-color:var(--orange)}.m-endpoint .endpoint-body.post{border-color:var(--green)}.m-endpoint .endpoint-body.get,.m-endpoint .endpoint-body.head{border-color:var(--blue)}.m-endpoint .endpoint-body.patch{border-color:var(--yellow)}.m-endpoint .endpoint-body.query{border-color:var(--purple)}.m-endpoint .endpoint-body.trace{border-color:var(--purple)}.m-endpoint .endpoint-body.options{border-color:var(--gray)}.summary{padding:8px 8px}.summary .title{font-size:calc(var(--font-size-regular) + 2px);margin-bottom:6px;word-break:break-word}.method{display:flex;justify-content:center;align-items:center;vertical-align:middle;font-size:calc(var(--font-size-small) - 2px);height:calc(var(--font-size-small) + .75rem);line-height:calc(var(--font-size-small) + .5rem);width:3.5rem;flex-shrink:0;border-radius:2px;text-align:center;font-weight:700;text-transform:uppercase;margin-right:5px}.method.delete{border:1px solid var(--red)}.method.put{border:1px solid var(--orange)}.method.post{border:1px solid var(--green)}.method.get,.method.head{border:1px solid var(--blue)}.method.patch{border:1px solid var(--yellow)}.method.query{border:1px solid var(--purple)}.method.trace{border:1px solid var(--purple)}.method.options{border:1px solid var(--gray)}.req-resp-container{display:flex;margin-top:16px;align-items:stretch;flex-wrap:wrap;flex-direction:column}.view-request{flex:1;min-height:100px;max-width:100%;padding:16px 8px;overflow:hidden;border-width:0;border-style:dashed}.request,.response{flex:1;min-height:100px;max-width:100%;padding:16px 8px;overflow:hidden}.request{border-width:0 0 1px 0;border-style:dashed}.patch .request{border-top:1px dashed var(--yellow);border-color:var(--yellow)}.query .request{border-top:1px dashed var(--purple);border-color:var(--purple)}.trace .request{border-top:1px dashed var(--purple);border-color:var(--purple)}.options .request{border-top:1px dashed var(--gray);border-color:var(--gray)}.put .request{border-top:1px dashed var(--orange);border-color:var(--orange)}.post .request{border-top:1px dashed var(--green);border-color:var(--green)}.get .request,.head .request{border-top:1px dashed var(--blue);border-color:var(--blue)}.delete .request{border-top:1px dashed var(--red);border-color:var(--red)}@media only screen and (min-width:1024px){.only-large-screen{display:block}.endpoint-head .path{font-size:var(--font-size-regular);min-width:400px}.endpoint-head .descr{display:flex}.descr .m-markdown-small,.endpoint-head .m-markdown-small{display:block}.req-resp-container{flex-direction:var(--layout,row)}.request{border-width:0 1px 0 0;padding:16px}.response{padding:16px}.summary{padding:8px 16px}}.security-info-button{position:absolute;top:3px;right:2px;font-size:var(--font-size-small);line-height:1.5}@media only screen and (max-width:768px){.security-info-button{display:none}}pre.code-sample{padding:8px;min-height:30px;font-family:var(--font-mono);font-size:var(--font-size-small)}`;

package/dist/lib/styles/font-styles.js

@@ -3,4 +3,4 @@
 exports.__esModule = true;
 exports.default = void 0;
 var _lit = require("lit");
-var _default = exports.default = (0, _lit.css)`.hover-bg:hover{background:var(--bg3)}::selection{background:var(--selection-bg);color:var(--selection-fg)}.regular-font{font-family:var(--font-regular)}.mono-font{font-family:var(--font-mono)}.title{font-size:calc(var(--font-size-small) + 1rem);font-weight:400}.sub-title{font-size:20px}.req-res-title{font-family:var(--font-regular);font-size:calc(var(--font-size-small) + 4px);font-weight:700}.tiny-title{font-size:calc(var(--font-size-small) + 1px);font-weight:700}.regular-font-size{font-size:var(--font-size-regular)}.small-font-size{font-size:var(--font-size-small)}.upper{text-transform:uppercase}.primary-text{color:var(--primary-color)}.bold-text{font-weight:700}.gray-text{color:var(--light-fg)}.red-text{color:var(--red)}.blue-text{color:var(--blue)}.multiline{overflow:scroll;max-height:var(--resp-area-height,300px);color:var(--fg3)}.method-fg.put{color:var(--orange)}.method-fg.post{color:var(--green)}.method-fg.get,.method-fg.head{color:var(--blue)}.method-fg.delete{color:var(--red)}.method-fg.query{color:var(--purple)}.method-fg.options{color:var(--gray)}.method-fg.patch{color:var(--yellow)}h1{font-family:var(--font-regular);font-size:28px;padding-top:10px;letter-spacing:normal;font-weight:400}h2{font-family:var(--font-regular);font-size:24px;padding-top:10px;letter-spacing:normal;font-weight:400}h3{font-family:var(--font-regular);font-size:18px;padding-top:10px;letter-spacing:normal;font-weight:400}h4{font-family:var(--font-regular);font-size:16px;padding-top:10px;letter-spacing:normal;font-weight:400}h5{font-family:var(--font-regular);font-size:14px;padding-top:10px;letter-spacing:normal;font-weight:400}h6{font-family:var(--font-regular);font-size:14px;padding-top:10px;letter-spacing:normal;font-weight:400}h1,h2,h3,h4,h5{margin-block-end:.2em;margin-block-start:.5em}h3{margin-top:0}p{margin-block-start:.5em}a{color:var(--blue);cursor:pointer}a.inactive-link{color:var(--fg);text-decoration:none;cursor:text}code,pre,syntax-highlighter{margin:0;font-family:var(--font-mono);font-size:calc(var(--font-size-mono) - 1px)}.m-markdown syntax-highlighter{display:block}.m-markdown,.m-markdown-small{display:block}.m-markdown a,.m-markdown li,.m-markdown p,.m-markdown span{font-size:var(--font-size-regular);line-height:calc(var(--font-size-regular) + 6px)}.m-markdown-small a,.m-markdown-small li,.m-markdown-small p,.m-markdown-small span{font-size:var(--font-size-small);line-height:calc(var(--font-size-small) + 6px)}.m-markdown p:not(:first-child){margin-block-start:12px}.m-markdown-small p:not(:first-child){margin-block-start:12px}.m-markdown :first-child,.m-markdown-small :first-child{margin-block-start:0}.m-markdown p,.m-markdown-small p{margin-block-end:0;overflow-wrap:anywhere}.toolbar .m-markdown p,.toolbar .m-markdown-small p{margin-block-start:0}.m-markdown code span{font-size:var(--font-size-mono)}.m-markdown code,.m-markdown syntax-highlighter,.m-markdown-small code{padding:1px 6px;border-radius:2px;color:var(--inline-code-fg);background-color:var(--bg3);font-size:calc(var(--font-size-mono));line-height:1.2}.m-markdown-small code,.m-markdown-small syntax-highlighter{font-size:calc(var(--font-size-mono) - 1px)}.m-markdown pre,.m-markdown syntax-highlighter,.m-markdown-small pre{white-space:pre-wrap;overflow-x:auto;line-height:normal;border-radius:2px;border:1px solid var(--code-border-color)}.m-markdown pre,.m-markdown syntax-highlighter{padding:8px;background-color:var(--bg2);color:var(--code-fg)}.m-markdown-small pre,.m-markdown-small syntax-highlighter{margin-top:4px;padding:2px 4px;background-color:var(--bg3);color:var(--fg2)}.m-markdown pre code,.m-markdown-small pre code{border:none;padding:0}.m-markdown pre code{color:var(--code-fg);background-color:var(--bg2);background-color:transparent}.m-markdown-small pre code,.m-markdown-small syntax-highlighter{color:var(--fg2);background-color:var(--bg3)}.m-markdown ol,.m-markdown ul{padding-inline-start:30px}.m-markdown-small ol,.m-markdown-small ul{padding-inline-start:20px}.m-markdown a,.m-markdown-small a{color:var(--blue)}.m-markdown img,.m-markdown-small img{max-width:100%}.m-markdown table,.m-markdown-small table{border-spacing:0;margin:10px 0;border-collapse:separate;border:1px solid var(--border-color);border-radius:var(--border-radius);font-size:calc(var(--font-size-small) + 1px);line-height:calc(var(--font-size-small) + 4px);max-width:100%}.m-markdown-small table{font-size:var(--font-size-small);line-height:calc(var(--font-size-small) + 2px);margin:8px 0}.m-markdown td,.m-markdown th,.m-markdown-small td,.m-markdown-small th{vertical-align:top;border-top:1px solid var(--border-color);line-height:calc(var(--font-size-small) + 4px)}.m-markdown tr:first-child th,.m-markdown-small tr:first-child th{border-top:0 none}.m-markdown td,.m-markdown th{padding:10px 12px}.m-markdown-small td,.m-markdown-small th{padding:8px 8px}.m-markdown th,.m-markdown-small th{font-weight:600;background-color:var(--bg2);vertical-align:middle}.m-markdown-small table code{font-size:calc(var(--font-size-mono) - 2px)}.m-markdown table code{font-size:calc(var(--font-size-mono) - 1px)}.m-markdown blockquote,.m-markdown-small blockquote{margin-inline-start:0;margin-inline-end:0;border-left:3px solid var(--border-color);padding:6px 0 6px 6px}`;
+var _default = exports.default = (0, _lit.css)`.hover-bg:hover{background:var(--bg3)}::selection{background:var(--selection-bg);color:var(--selection-fg)}.regular-font{font-family:var(--font-regular)}.mono-font{font-family:var(--font-mono)}.title{font-size:calc(var(--font-size-small) + 1rem);font-weight:400}.sub-title{font-size:20px}.req-res-title{font-family:var(--font-regular);font-size:calc(var(--font-size-small) + 4px);font-weight:700}.tiny-title{font-size:calc(var(--font-size-small) + 1px);font-weight:700}.regular-font-size{font-size:var(--font-size-regular)}.small-font-size{font-size:var(--font-size-small)}.upper{text-transform:uppercase}.primary-text{color:var(--primary-color)}.bold-text{font-weight:700}.gray-text{color:var(--light-fg)}.red-text{color:var(--red)}.blue-text{color:var(--blue)}.multiline{overflow:scroll;max-height:var(--resp-area-height,300px);color:var(--fg3)}.method-fg.put{color:var(--orange)}.method-fg.post{color:var(--green)}.method-fg.get,.method-fg.head{color:var(--blue)}.method-fg.delete{color:var(--red)}.method-fg.query{color:var(--purple)}.method-fg.trace{color:var(--purple)}.method-fg.options{color:var(--gray)}.method-fg.patch{color:var(--yellow)}h1{font-family:var(--font-regular);font-size:28px;padding-top:10px;letter-spacing:normal;font-weight:400}h2{font-family:var(--font-regular);font-size:24px;padding-top:10px;letter-spacing:normal;font-weight:400}h3{font-family:var(--font-regular);font-size:18px;padding-top:10px;letter-spacing:normal;font-weight:400}h4{font-family:var(--font-regular);font-size:16px;padding-top:10px;letter-spacing:normal;font-weight:400}h5{font-family:var(--font-regular);font-size:14px;padding-top:10px;letter-spacing:normal;font-weight:400}h6{font-family:var(--font-regular);font-size:14px;padding-top:10px;letter-spacing:normal;font-weight:400}h1,h2,h3,h4,h5{margin-block-end:.2em;margin-block-start:.5em}h3{margin-top:0}p{margin-block-start:.5em}a{color:var(--blue);cursor:pointer}a.inactive-link{color:var(--fg);text-decoration:none;cursor:text}code,pre,syntax-highlighter{margin:0;font-family:var(--font-mono);font-size:var(--font-size-mono)}.m-markdown syntax-highlighter{display:block}.m-markdown,.m-markdown-small{display:block}.m-markdown a,.m-markdown li,.m-markdown p,.m-markdown span{font-size:var(--font-size-regular);line-height:calc(var(--font-size-regular) + 6px)}.m-markdown-small a,.m-markdown-small li,.m-markdown-small p,.m-markdown-small span{font-size:var(--font-size-small);line-height:calc(var(--font-size-small) + 6px)}.m-markdown p:not(:first-child){margin-block-start:12px}.m-markdown-small p:not(:first-child){margin-block-start:12px}.m-markdown :first-child,.m-markdown-small :first-child{margin-block-start:0}.m-markdown p,.m-markdown-small p{margin-block-end:0;overflow-wrap:anywhere}.toolbar .m-markdown p,.toolbar .m-markdown-small p{margin-block-start:0}.m-markdown code span{font-size:var(--font-size-mono)}.m-markdown code,.m-markdown syntax-highlighter,.m-markdown-small code{padding:1px 6px;border-radius:2px;color:var(--inline-code-fg);background-color:var(--bg3);font-size:calc(var(--font-size-mono));line-height:1.2}.m-markdown-small code,.m-markdown-small syntax-highlighter{font-size:var(--font-size-mono)}.m-markdown pre,.m-markdown syntax-highlighter,.m-markdown-small pre{white-space:pre-wrap;overflow-x:auto;line-height:normal;border-radius:2px;border:1px solid var(--code-border-color)}.m-markdown pre,.m-markdown syntax-highlighter{padding:8px;background-color:var(--bg2);color:var(--code-fg)}.m-markdown-small pre,.m-markdown-small syntax-highlighter{margin-top:4px;padding:2px 4px;background-color:var(--bg3);color:var(--fg2)}.m-markdown pre code,.m-markdown-small pre code{border:none;padding:0}.m-markdown pre code{color:var(--code-fg);background-color:var(--bg2);background-color:transparent}.m-markdown-small pre code,.m-markdown-small syntax-highlighter{color:var(--fg2);background-color:var(--bg3)}.m-markdown ol,.m-markdown ul{padding-inline-start:30px}.m-markdown-small ol,.m-markdown-small ul{padding-inline-start:20px}.m-markdown a,.m-markdown-small a{color:var(--blue)}.m-markdown img,.m-markdown-small img{max-width:100%}.m-markdown table,.m-markdown-small table{border-spacing:0;margin:10px 0;border-collapse:separate;border:1px solid var(--border-color);border-radius:var(--border-radius);font-size:calc(var(--font-size-small) + 1px);line-height:calc(var(--font-size-small) + 4px);max-width:100%}.m-markdown-small table{font-size:var(--font-size-small);line-height:calc(var(--font-size-small) + 2px);margin:8px 0}.m-markdown td,.m-markdown th,.m-markdown-small td,.m-markdown-small th{vertical-align:top;border-top:1px solid var(--border-color);line-height:calc(var(--font-size-small) + 4px)}.m-markdown tr:first-child th,.m-markdown-small tr:first-child th{border-top:0 none}.m-markdown td,.m-markdown th{padding:10px 12px}.m-markdown-small td,.m-markdown-small th{padding:8px 8px}.m-markdown th,.m-markdown-small th{font-weight:600;background-color:var(--bg2);vertical-align:middle}.m-markdown-small table code{font-size:calc(var(--font-size-mono) - 1px)}.m-markdown table code{font-size:var(--font-size-mono)}.m-markdown blockquote,.m-markdown-small blockquote{margin-inline-start:0;margin-inline-end:0;border-left:3px solid var(--border-color);padding:6px 0 6px 6px}`;

package/dist/lib/templates/components-template.js

@@ -15,7 +15,7 @@ function componentBodyTemplate(sComponent) {
   const formdataPartSchema = (0, _schemaUtils.schemaInObjectNotation)(sComponent.component, {
     includeNulls: this.includeNulls
   });
-  return (0, _lit.html)` <div class="expanded-endpoint-component observe-me ${sComponent.name}" id="cmp--${sComponent.id}"> <h2 @click="${() => this.scrollTo(`cmp--${sComponent.id}`)}">${sComponent.name}</h2> <div class="mono-font regular-font-size" style="padding:8px 0;color:var(--fg2)"> ${!this.displaySchemaAsTree ? (0, _lit.html)`<schema-table .data="${formdataPartSchema}" @scrollToSchemaComponentByName="${v => this.scrollToSchemaComponentByName(v)}" schema-expand-level="${this.schemaExpandLevel}" schema-hide-read-only="false" schema-hide-write-only="false" exportparts="schema-key, schema-type, schema-description, schema-table-header"> </schema-table>` : (0, _lit.html)`<schema-tree .data="${formdataPartSchema}" schema-expand-level="${this.schemaExpandLevel}" schema-hide-read-only="false" schema-hide-write-only="false" exportparts="schema-key, schema-type, schema-description"> </schema-tree>`} </div> </div> `;
+  return (0, _lit.html)` <div class="expanded-endpoint-component observe-me ${sComponent.id}" id="cmp--${sComponent.id}"> <h2 @click="${() => this.scrollTo(`cmp--${sComponent.id}`)}">${sComponent.name}</h2> <div class="mono-font regular-font-size" style="padding:8px 0;color:var(--fg2)"> ${!this.displaySchemaAsTree ? (0, _lit.html)`<schema-table .data="${formdataPartSchema}" @scrollToSchemaComponentByName="${v => this.scrollToSchemaComponentByName(v)}" schema-expand-level="${this.schemaExpandLevel}" hide-component-title="${true}" schema-hide-read-only="${false}" schema-hide-write-only="${false}" exportparts="schema-key, schema-type, schema-description, schema-table-header"> </schema-table>` : (0, _lit.html)`<schema-tree .data="${formdataPartSchema}" schema-expand-level="${this.schemaExpandLevel}" hide-component-title="${true}" schema-hide-read-only="${false}" schema-hide-write-only="${false}" exportparts="schema-key, schema-type, schema-description"> </schema-tree>`} </div> </div> `;
 }
 function getComponentInfo(componentKeyId) {
   const infoDictionary = {

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

@@ -28,9 +28,7 @@ function getTypeInfo(parameter, options = {
   const schema = Object.assign({}, parameter, parameter.schema);
   let dataType = IS_MISSING_TYPE_INFO_TYPE;
   let format = schema.format || ((_schema$items = schema.items) === null || _schema$items === void 0 ? void 0 : _schema$items.format) || '';
-  if (schema.circularReference) {
-    dataType = `{recursive: ${schema.circularReference.name}} `;
-  } else if (schema.type || schema.const) {
+  if (schema.type || schema.const) {
     if (!schema.type && schema.const) {
       schema.type = 'const';
     }
@@ -422,6 +420,7 @@ function schemaInObjectNotation(rawSchema, options, level = 0, suffix = '') {
       resultObj[anyOf ? `::ANY~OF ${suffix}` : `::ONE~OF ${suffix}`] = objWithAnyOfProps;
     }
     resultObj['::link'] = schema.title || '';
+    resultObj['::circular'] = !!schema.circularReference;
     resultObj['::type'] = schema.title || 'object';
     resultObj['::flags'] = {
       '🆁': readOnly && '🆁',
@@ -466,6 +465,7 @@ function schemaInObjectNotation(rawSchema, options, level = 0, suffix = '') {
     }
     if (complexTypes.length > 0) {
       obj['::link'] = schema.title || '';
+      obj['::circular'] = !!schema.circularReference;
       obj['::type'] = 'object';
       const multiTypeOptions = {
         '::type': 'xxx-of-option'
@@ -489,6 +489,7 @@ function schemaInObjectNotation(rawSchema, options, level = 0, suffix = '') {
               '🆆': schema.writeOnly && '🆆'
             },
             '::link': schema.title || '',
+            '::circular': !!schema.circularReference,
             '::type': schema.title || 'object',
             '::deprecated': schema.deprecated || false,
             '::metadata': metadata
@@ -511,6 +512,7 @@ function schemaInObjectNotation(rawSchema, options, level = 0, suffix = '') {
               '🆆': schema.writeOnly && '🆆'
             },
             '::link': arrayItemsSchema.title || schema.title || '',
+            '::circular': !!schema.circularReference,
             '::type': 'array',
             // Array properties are read from the ::props object instead of reading from the keys of this object
             '::props': schemaInObjectNotation(Object.assign({}, schema, arrayItemsSchema, {
@@ -526,7 +528,7 @@ function schemaInObjectNotation(rawSchema, options, level = 0, suffix = '') {
     }
     return obj;
   }
-  if (propertyType === 'object' || schemaProperties) {
+  if (propertyType === 'object' || schemaProperties || schema.circularReference) {
     const obj = {
       '::type': ''
     };
@@ -537,6 +539,7 @@ function schemaInObjectNotation(rawSchema, options, level = 0, suffix = '') {
       '🆆': schema.writeOnly && '🆆'
     };
     obj['::link'] = schema.title || '';
+    obj['::circular'] = !!schema.circularReference;
     obj['::type'] = schema.title || 'object';
     obj['::deprecated'] = schema.deprecated || false;
     obj['::metadata'] = metadata;
@@ -568,6 +571,7 @@ function schemaInObjectNotation(rawSchema, options, level = 0, suffix = '') {
       '🆆': schema.writeOnly && '🆆'
     };
     obj['::link'] = (arrayItemsSchema === null || arrayItemsSchema === void 0 ? void 0 : arrayItemsSchema.title) || schema.title || '';
+    obj['::circular'] = !!schema.circularReference;
     obj['::type'] = 'array';
     obj['::deprecated'] = schema.deprecated || false;
     obj['::metadata'] = metadata;