openapi-explorer 0.9.331 → 0.9.337

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

@@ -1,2 +1,2 @@
 import { css } from 'lit-element';
-export default css`*,:after,:before{box-sizing:border-box}.tr{display:flex;flex:none;width:100%;box-sizing:content-box;border-bottom:1px dotted transparent}.td{display:block;flex:0 0 auto}.key{font-family:var(--font-mono);white-space:normal;word-break:break-all}.collapsed-descr .key{overflow:hidden}.key-descr{font-family:var(--font-regular);flex-shrink:1;text-overflow:ellipsis;overflow:hidden;display:none}.toolbar{display:none}.expanded-descr .key-descr{max-height:auto;overflow:hidden;display:none}.collapsed-descr .tr{max-height:20px}.tr.xxx-of{border-top:1px dotted var(--primary-color)}.xxx-of-key{font-size:calc(var(--font-size-small) - 2px);font-weight:700;background-color:var(--primary-color);color:var(--primary-btn-text-color);border-radius:2px;line-height:calc(var(--font-size-small) + 6px);padding:0 5px;margin-bottom:1px;display:inline-block}.xxx-of-descr{font-family:var(--font-regular);color:var(--primary-color);font-size:calc(var(--font-size-small) - 1px);margin-left:2px}.bina,.byte,.date,.emai,.host,.ipv4,.pass,.stri,.string,.uri,.url,.uuid{color:var(--green)}.deci .blue,.doub,.floa,.int3,.int6,.inte,.numb,.number{color:var(--blue)}.null{color:var(--red)}.bool,.boolean{color:var(--orange)}.enum{color:var(--yellow)}.tree .toolbar{display:flex;justify-content:space-between}.toolbar{width:100%}.toolbar-item{cursor:pointer;padding:5px 0 5px 1rem;margin:0 1rem!important;color:#38b3f9;flex-shrink:0}.tree .toolbar .toolbar-item{display:none}.schema-root-type{cursor:auto;color:var(--fg2);font-weight:700;text-transform:uppercase}.schema-root-type.xxx-of{display:none}.toolbar-item:first-of-type{margin:0 2px 0 0}@media only screen and (min-width:576px){.key-descr{display:block}.tree .toolbar .toolbar-item{display:block}.toolbar{display:flex}.expanded-descr .key-descr{display:block}}`;
+export default css`*,:after,:before{box-sizing:border-box}.tr{display:flex;flex:none;width:100%;box-sizing:content-box;border-bottom:1px dotted transparent}.td{display:block;flex:0 0 auto}.key{font-family:var(--font-mono);white-space:normal;word-break:break-all}.key-descr{font-family:var(--font-regular);flex-shrink:1;text-overflow:ellipsis;overflow:hidden;display:none;max-height:auto}.toolbar{display:none}.tr.xxx-of{border-top:1px dotted var(--primary-color)}.xxx-of-key{font-size:calc(var(--font-size-small) - 2px);font-weight:700;background-color:var(--primary-color);color:var(--primary-btn-text-color);border-radius:2px;line-height:calc(var(--font-size-small) + 6px);padding:0 5px;margin-bottom:1px;display:inline-block}.xxx-of-descr{font-family:var(--font-regular);color:var(--primary-color);font-size:calc(var(--font-size-small) - 1px);margin-left:2px}.bina,.byte,.date,.emai,.host,.ipv4,.pass,.stri,.string,.uri,.url,.uuid{color:var(--green)}.deci .blue,.doub,.floa,.int3,.int6,.inte,.numb,.number{color:var(--blue)}.null{color:var(--red)}.bool,.boolean{color:var(--orange)}.enum{color:var(--yellow)}.tree .toolbar{display:flex;justify-content:space-between}.toolbar{width:100%}.toolbar-item{cursor:pointer;padding:5px 0 5px 1rem;margin:0 1rem!important;color:#38b3f9;flex-shrink:0}.tree .toolbar .toolbar-item{display:none}.schema-root-type{cursor:auto;color:var(--fg2);font-weight:700;text-transform:uppercase}.schema-root-type.xxx-of{display:none}.toolbar-item:first-of-type{margin:0 2px 0 0}@media only screen and (min-width:576px){.key-descr{display:block}.tree .toolbar .toolbar-item{display:block}.toolbar{display:flex}}`;

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

@@ -2,6 +2,6 @@ import { html } from 'lit-element';
 /* eslint-disable indent */
 
 export default function callbackTemplate(callbacks) {
-  return html` <div class="api-request col regular-font request-panel ${this.renderStyle}-mode"> ${Object.entries(callbacks).map(kv => html` <div class="${this.renderStyle}-request"> <div class="req-res-title">CALLBACKS</div> <div class="table-title">${kv[0]}</div> ${Object.entries(kv[1]).map(pathObj => html` <div class="mono-font small-font-size" style="display:flex"> <div style="width:100%"> ${Object.entries(pathObj[1]).map(method => html` <div> <div style="margin-top:12px"> <div class="method method-fg ${method[0]}" style="width:70px;border:none;margin:0;padding:0;line-height:20px;vertical-align:baseline;text-align:left"> <span style="font-size:20px"> &#x2944; </span> ${method[0]} </div> <span style="line-height:20px;vertical-align:baseline">${pathObj[0]} </span> </div> <div class="expanded-req-resp-container"> <api-request class="request-panel" callback="true" method="${method[0] || ''}" , path="${pathObj[0] || ''}" .parameters="${method[1] && method[1].parameters || ''}" .request_body="${method[1] && method[1].requestBody || ''}" fill-defaults="${this.fillRequestWithDefault}" enable-console="false" render-style="${this.renderStyle}" schema-style="${this.schemaStyle}" active-schema-tab="${this.defaultSchemaTab}" schema-expand-level="${this.schemaExpandLevel}" schema-description-expanded="${this.schemaDescriptionExpanded}" schema-hide-read-only="${this.schemaHideReadOnly}" fetch-credentials="${this.fetchCredentials}" exportparts="btn btn-fill btn-outline btn-try"> </api-request> <api-response callback="true" .responses="${method[1] && method[1].responses}" render-style="${this.renderStyle}" schema-style="${this.schemaStyle}" active-schema-tab="${this.defaultSchemaTab}" schema-expand-level="${this.schemaExpandLevel}" schema-description-expanded="${this.schemaDescriptionExpanded}" exportparts="btn--resp btn-fill--resp btn-outline--resp"> </api-response> </div> </div> `)} </div> </div> `)} </div> `)} </div> `;
+  return html` <div class="api-request col regular-font request-panel ${this.renderStyle}-mode"> ${Object.entries(callbacks).map(kv => html` <div class="${this.renderStyle}-request"> <div class="req-res-title">CALLBACKS</div> <div class="table-title">${kv[0]}</div> ${Object.entries(kv[1]).map(pathObj => html` <div class="mono-font small-font-size" style="display:flex"> <div style="width:100%"> ${Object.entries(pathObj[1]).map(method => html` <div> <div style="margin-top:12px"> <div class="method method-fg ${method[0]}" style="width:70px;border:none;margin:0;padding:0;line-height:20px;vertical-align:baseline;text-align:left"> <span style="font-size:20px"> &#x2944; </span> ${method[0]} </div> <span style="line-height:20px;vertical-align:baseline">${pathObj[0]} </span> </div> <div class="expanded-req-resp-container"> <api-request class="request-panel" callback="true" method="${method[0] || ''}" , path="${pathObj[0] || ''}" .parameters="${method[1] && method[1].parameters || ''}" .request_body="${method[1] && method[1].requestBody || ''}" fill-defaults="${this.fillRequestWithDefault}" enable-console="false" render-style="${this.renderStyle}" schema-style="${this.displaySchemaAsTable ? 'table' : 'tree'}" active-schema-tab="${this.defaultSchemaTab}" schema-expand-level="${this.schemaExpandLevel}" schema-description-expanded="${this.schemaDescriptionExpanded}" schema-hide-read-only="${this.schemaHideReadOnly}" fetch-credentials="${this.fetchCredentials}" exportparts="btn btn-fill btn-outline btn-try"> </api-request> <api-response callback="true" .responses="${method[1] && method[1].responses}" render-style="${this.renderStyle}" schema-style="${this.displaySchemaAsTable ? 'table' : 'tree'}" active-schema-tab="${this.defaultSchemaTab}" schema-expand-level="${this.schemaExpandLevel}" schema-description-expanded="${this.schemaDescriptionExpanded}" exportparts="btn--resp btn-fill--resp btn-outline--resp"> </api-response> </div> </div> `)} </div> </div> `)} </div> `)} </div> `;
 }
 /* eslint-enable indent */

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

@@ -8,7 +8,7 @@ import '../components/schema-tree';
 
 function componentBodyTemplate(sComponent) {
   const formdataPartSchema = schemaInObjectNotation(sComponent.component, {});
-  return html` <div class="expanded-endpoint-body observe-me ${sComponent.name}" id="cmp--${sComponent.id}"> <h2>${sComponent.name}</h2> <div class="mono-font regular-font-size" style="padding:8px 0;color:var(--fg2)"> <schema-tree .data="${formdataPartSchema}" schema-expand-level="${this.schemaExpandLevel}" schema-description-expanded="${this.schemaDescriptionExpanded}" schema-hide-read-only="false" schema-hide-write-only="false"> </schema-tree> </div> </div> `;
+  return html` <div class="expanded-endpoint-body observe-me ${sComponent.name}" id="cmp--${sComponent.id}"> <h2>${sComponent.name}</h2> <div class="mono-font regular-font-size" style="padding:8px 0;color:var(--fg2)"> ${this.displaySchemaAsTable ? html`<schema-table .data="${formdataPartSchema}" schema-expand-level="${this.schemaExpandLevel}" schema-description-expanded="${this.schemaDescriptionExpanded}" schema-hide-read-only="false" schema-hide-write-only="false"> </schema-table>` : html`<schema-tree .data="${formdataPartSchema}" schema-expand-level="${this.schemaExpandLevel}" schema-description-expanded="${this.schemaDescriptionExpanded}" schema-hide-read-only="false" schema-hide-write-only="false"> </schema-tree>`} </div> </div> `;
 }
 
 export default function componentsTemplate() {

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

@@ -76,7 +76,7 @@ function endpointBodyTemplate(path) {
 
   const nonEmptyApiKeys = this.resolvedSpec.securitySchemes.filter(v => v.finalKeyValue && path.security && path.security.some(ps => ps[v.apiKeyId])) || [];
   const codeSampleTabPanel = path.xCodeSamples ? codeSamplesTemplate(path.xCodeSamples) : '';
-  return html` <div class="endpoint-body ${path.method}"> <div class="summary"> ${path.summary ? html`<div class="title">${path.summary}<div></div></div>` : path.shortSummary !== path.description ? html`<div class="title">${path.shortSummary}</div>` : ''} ${path.description ? html`<div class="m-markdown"> ${unsafeHTML(marked(path.description))}</div>` : ''} <slot name="${path.elementId}"></slot> ${pathSecurityTemplate.call(this, path.security)} ${codeSampleTabPanel} </div> <div class="req-resp-container"> <div style="display:flex;flex-direction:column" class="request"> <api-request class="request-panel" style="width:100%" method="${path.method}" , path="${path.path}" .parameters="${path.parameters}" .request_body="${path.requestBody}" .api_keys="${nonEmptyApiKeys}" .servers="${path.servers}" server-url="${path.servers && path.servers.length > 0 ? path.servers[0].url : this.selectedServer.computedUrl}" active-schema-tab="${this.defaultSchemaTab}" fill-defaults="${this.fillRequestWithDefault}" enable-console="${this.allowTry}" accept="${accept}" render-style="${this.renderStyle}" schema-style="${this.schemaStyle}" schema-expand-level="${this.schemaExpandLevel}" schema-description-expanded="${this.schemaDescriptionExpanded}" schema-hide-read-only="${this.schemaHideReadOnly}" fetch-credentials="${this.fetchCredentials}" exportparts="btn btn-fill btn-outline btn-try"> </api-request> </div> ${path.callbacks ? callbackTemplate.call(this, path.callbacks) : ''} <api-response class="request response" .responses="${path.responses}" active-schema-tab="${this.defaultSchemaTab}" render-style="${this.renderStyle}" schema-style="${this.schemaStyle}" schema-expand-level="${this.schemaExpandLevel}" schema-description-expanded="${this.schemaDescriptionExpanded}" schema-hide-write-only="${this.schemaHideWriteOnly}" selected-status="${Object.keys(path.responses || {})[0] || ''}" exportparts="btn--resp btn-fill--resp btn-outline--resp"> </api-response> </div> </div>`;
+  return html` <div class="endpoint-body ${path.method}"> <div class="summary"> ${path.summary ? html`<div class="title">${path.summary}<div></div></div>` : path.shortSummary !== path.description ? html`<div class="title">${path.shortSummary}</div>` : ''} ${path.description ? html`<div class="m-markdown"> ${unsafeHTML(marked(path.description))}</div>` : ''} <slot name="${path.elementId}"></slot> ${pathSecurityTemplate.call(this, path.security)} ${codeSampleTabPanel} </div> <div class="req-resp-container"> <div style="display:flex;flex-direction:column" class="request"> <api-request class="request-panel" style="width:100%" method="${path.method}" , path="${path.path}" .parameters="${path.parameters}" .request_body="${path.requestBody}" .api_keys="${nonEmptyApiKeys}" .servers="${path.servers}" server-url="${path.servers && path.servers.length > 0 ? path.servers[0].url : this.selectedServer.computedUrl}" active-schema-tab="${this.defaultSchemaTab}" fill-defaults="${this.fillRequestWithDefault}" enable-console="${this.allowTry}" accept="${accept}" render-style="${this.renderStyle}" schema-style="${this.displaySchemaAsTable ? 'table' : 'tree'}" schema-expand-level="${this.schemaExpandLevel}" schema-description-expanded="${this.schemaDescriptionExpanded}" schema-hide-read-only="${this.schemaHideReadOnly}" fetch-credentials="${this.fetchCredentials}" exportparts="btn btn-fill btn-outline btn-try"> </api-request> </div> ${path.callbacks ? callbackTemplate.call(this, path.callbacks) : ''} <api-response class="request response" .responses="${path.responses}" active-schema-tab="${this.defaultSchemaTab}" render-style="${this.renderStyle}" schema-style="${this.displaySchemaAsTable ? 'table' : 'tree'}" schema-expand-level="${this.schemaExpandLevel}" schema-description-expanded="${this.schemaDescriptionExpanded}" schema-hide-write-only="${this.schemaHideWriteOnly}" selected-status="${Object.keys(path.responses || {})[0] || ''}" exportparts="btn--resp btn-fill--resp btn-outline--resp"> </api-response> </div> </div>`;
 }
 
 export default function endpointTemplate() {

package/dist/es/templates/expanded-endpoint-template.js

@@ -21,7 +21,7 @@ export function expandedEndpointBodyTemplate(path, tagName = '') {
 
   const nonEmptyApiKeys = this.resolvedSpec.securitySchemes.filter(v => v.finalKeyValue && path.security && path.security.some(ps => ps[v.apiKeyId])) || [];
   const codeSampleTabPanel = path.xCodeSamples ? codeSamplesTemplate.call(this, path.xCodeSamples) : '';
-  return html` ${this.renderStyle === 'read' ? html`<div class="divider" part="operation-divider"></div>` : ''} <div class="expanded-endpoint-body observe-me ${path.method}" part="section-operation ${path.elementId}" id="${path.elementId}"> ${this.renderStyle === 'focused' && tagName !== 'General ⦂' ? html`<h3 class="upper" style="font-weight:700"> ${tagName} </h3>` : ''} ${path.deprecated ? html`<div class="bold-text red-text"> DEPRECATED </div>` : ''} ${html` <h2> ${path.shortSummary || `${path.method.toUpperCase()} ${path.path}`}</h2> <div class='mono-font part="section-operation-url" regular-font-size' style="padding:8px 0;color:var(--fg3)"> ${path.isWebhook ? html`<span style="color:var(--primary-color)"> WEBHOOK </span>` : ''} <span part="label-operation-method" class="regular-font upper method-fg bold-text ${path.method}">${path.method}</span> <span part="label-operation-path">${path.path}</span> </div>`} ${path.description ? html`<div class="m-markdown"> ${unsafeHTML(marked(path.description))}</div>` : ''} <slot name="${path.elementId}"></slot> ${pathSecurityTemplate.call(this, path.security)} ${codeSampleTabPanel} <div class="expanded-req-resp-container"> <api-request class="request-panel" method="${path.method}" path="${path.path}" .parameters="${path.parameters}" .request_body="${path.requestBody}" .api_keys="${nonEmptyApiKeys}" .servers="${path.servers}" server-url="${path.servers && path.servers[0] && path.servers[0].url || this.selectedServer.computedUrl}" fill-defaults="${this.fillRequestWithDefault}" enable-console="${this.allowTry}" accept="${accept}" render-style="${this.renderStyle}" schema-style="${this.schemaStyle}" active-schema-tab="${this.defaultSchemaTab}" schema-expand-level="${this.schemaExpandLevel}" schema-description-expanded="${this.schemaDescriptionExpanded}" schema-hide-read-only="${this.schemaHideReadOnly}" fetch-credentials="${this.fetchCredentials}" exportparts="btn btn-fill btn-outline btn-try"> </api-request> ${path.callbacks ? callbackTemplate.call(this, path.callbacks) : ''} <api-response class="response-panel" .responses="${path.responses}" render-style="${this.renderStyle}" schema-style="${this.schemaStyle}" active-schema-tab="${this.defaultSchemaTab}" schema-expand-level="${this.schemaExpandLevel}" schema-description-expanded="${this.schemaDescriptionExpanded}" schema-hide-write-only="${this.schemaHideWriteOnly}" selected-status="${Object.keys(path.responses || {})[0] || ''}" exportparts="btn--resp btn-fill--resp btn-outline--resp"> </api-response> </div> </div> `;
+  return html` ${this.renderStyle === 'read' ? html`<div class="divider" part="operation-divider"></div>` : ''} <div class="expanded-endpoint-body observe-me ${path.method}" part="section-operation ${path.elementId}" id="${path.elementId}"> ${this.renderStyle === 'focused' && tagName !== 'General ⦂' ? html`<h3 class="upper" style="font-weight:700"> ${tagName} </h3>` : ''} ${path.deprecated ? html`<div class="bold-text red-text"> DEPRECATED </div>` : ''} ${html` <h2> ${path.shortSummary || `${path.method.toUpperCase()} ${path.path}`}</h2> <div class='mono-font part="section-operation-url" regular-font-size' style="padding:8px 0;color:var(--fg3)"> ${path.isWebhook ? html`<span style="color:var(--primary-color)"> WEBHOOK </span>` : ''} <span part="label-operation-method" class="regular-font upper method-fg bold-text ${path.method}">${path.method}</span> <span part="label-operation-path">${path.path}</span> </div>`} ${path.description ? html`<div class="m-markdown"> ${unsafeHTML(marked(path.description))}</div>` : ''} <slot name="${path.elementId}"></slot> ${pathSecurityTemplate.call(this, path.security)} ${codeSampleTabPanel} <div class="expanded-req-resp-container"> <api-request class="request-panel" method="${path.method}" path="${path.path}" .parameters="${path.parameters}" .request_body="${path.requestBody}" .api_keys="${nonEmptyApiKeys}" .servers="${path.servers}" server-url="${path.servers && path.servers[0] && path.servers[0].url || this.selectedServer.computedUrl}" fill-defaults="${this.fillRequestWithDefault}" enable-console="${this.allowTry}" accept="${accept}" render-style="${this.renderStyle}" schema-style="${this.displaySchemaAsTable ? 'table' : 'tree'}" active-schema-tab="${this.defaultSchemaTab}" schema-expand-level="${this.schemaExpandLevel}" schema-description-expanded="${this.schemaDescriptionExpanded}" schema-hide-read-only="${this.schemaHideReadOnly}" fetch-credentials="${this.fetchCredentials}" exportparts="btn btn-fill btn-outline btn-try"> </api-request> ${path.callbacks ? callbackTemplate.call(this, path.callbacks) : ''} <api-response class="response-panel" .responses="${path.responses}" render-style="${this.renderStyle}" schema-style="${this.displaySchemaAsTable ? 'table' : 'tree'}" active-schema-tab="${this.defaultSchemaTab}" schema-expand-level="${this.schemaExpandLevel}" schema-description-expanded="${this.schemaDescriptionExpanded}" schema-hide-write-only="${this.schemaHideWriteOnly}" selected-status="${Object.keys(path.responses || {})[0] || ''}" exportparts="btn--resp btn-fill--resp btn-outline--resp"> </api-response> </div> </div> `;
 }
 export default function expandedEndpointTemplate() {
   return html` ${(this.resolvedSpec && this.resolvedSpec.tags || []).map(tag => html` <section id="${tag.elementId}" part="section-tag" class="regular-font section-gap--read-mode observe-me" style="border-top:1px solid var(--primary-color)"> <div class="title tag" part="label-tag-title">${tag.name}</div> <slot name="${tag.elementId}"></slot> <div class="regular-font-size"> ${unsafeHTML(`

package/dist/es/templates/focused-endpoint-template.js

@@ -47,7 +47,7 @@ export default function focusedEndpointTemplate() {
     focusedTemplate = serverTemplate.call(this);
   } else if (focusElId === 'section') {
     focusedTemplate = html` <section id="section" class="observe-me"> <slot name="custom-section"></slot> </section>`;
-  } else if (focusElId.startsWith('cmp--') && this.showComponents === 'true') {
+  } else if (focusElId.startsWith('cmp--') && !this.hideComponents) {
     focusedTemplate = componentsTemplate.call(this);
   } else if (focusElId.startsWith('tag--')) {
     const idToFocus = focusElId.indexOf('--', 4) > 0 ? focusElId.substring(0, focusElId.indexOf('--', 5)) : focusElId;

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

@@ -41,6 +41,6 @@ export default function navbarTemplate() {
     return true;
   }).map(p => html` <div class="nav-bar-path ${this.usePathInNavBar === 'true' ? 'small-font' : ''}" data-content-id="${p.elementId}" id="link-${p.elementId}" @click="${e => {
     this.scrollToEventTarget(e, false);
-  }}"> <span style="line-break:anywhere;${p.deprecated ? 'filter:opacity(0.5)' : ''}"> ${this.usePathInNavBar === 'true' ? html`<span class="mono-font">${p.method.toUpperCase()} ${p.path}</span>` : p.summary || p.shortSummary} ${p.isWebhook ? '(Webhook)' : ''} </span> </div>`)} </div> </div> </slot> `)} ${this.resolvedSpec.components && this.showComponents === 'true' ? html` <div class="sticky-scroll-element"> <div id="link-components" class="nav-bar-section"> <div class="nav-bar-section-title">COMPONENTS</div> </div> </div> ${this.resolvedSpec.components.map(component => component.subComponents.filter(s => s.expanded).length ? html` <div class="nav-bar-tag" data-content-id="cmp--${component.name.toLowerCase()}" id="link-cmp--${component.name.toLowerCase()}" @click="${e => this.scrollToEventTarget(e, false)}"> ${component.name} </div> ${component.subComponents.filter(s => s.expanded).map(p => html` <div class="nav-bar-path" data-content-id="cmp--${p.id}" id="link-cmp--${p.id}" @click="${e => this.scrollToEventTarget(e, false)}"> <span> ${p.name} </span> </div>`)}` : '')}` : ''} </nav>`} </nav> `;
+  }}"> <span style="line-break:anywhere;${p.deprecated ? 'filter:opacity(0.5)' : ''}"> ${this.usePathInNavBar === 'true' ? html`<span class="mono-font">${p.method.toUpperCase()} ${p.path}</span>` : p.summary || p.shortSummary} ${p.isWebhook ? '(Webhook)' : ''} </span> </div>`)} </div> </div> </slot> `)} ${this.resolvedSpec.components && !this.hideComponents ? html` <div class="sticky-scroll-element"> <div id="link-components" class="nav-bar-section"> <div class="nav-bar-section-title">COMPONENTS</div> </div> </div> ${this.resolvedSpec.components.map(component => component.subComponents.filter(s => s.expanded).length ? html` <div class="nav-bar-tag" data-content-id="cmp--${component.name.toLowerCase()}" id="link-cmp--${component.name.toLowerCase()}" @click="${e => this.scrollToEventTarget(e, false)}"> ${component.name} </div> ${component.subComponents.filter(s => s.expanded).map(p => html` <div class="nav-bar-path" data-content-id="cmp--${p.id}" id="link-cmp--${p.id}" @click="${e => this.scrollToEventTarget(e, false)}"> <span> ${p.name} </span> </div>`)}` : '')}` : ''} </nav>`} </nav> `;
 }
 /* eslint-enable indent */

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

@@ -87,6 +87,7 @@ export function getTypeInfo(schema) {
     readOrWriteOnly: info.readOrWriteOnly,
     constraint: info.constraint,
     defaultValue: info.default,
+    example: info.example,
     allowedValues: info.allowedValues,
     pattern: info.pattern,
     schemaDescription: info.description,
@@ -348,19 +349,6 @@ function getExampleValuesFromSchemaRecursive(schema, config = {}) {
   const value = getSampleValueByType(schema, config.propertyName, config.skipExampleStrings);
   return [value];
 }
-
-function removeTitlesAndDescriptions(obj) {
-  if (typeof obj !== 'object' || obj === null) {
-    return;
-  }
-
-  delete obj['::TITLE'];
-  delete obj['::DESCRIPTION'];
-
-  for (const k in obj) {
-    removeTitlesAndDescriptions(obj[k]);
-  }
-}
 /**
  * For changing OpenAPI-Schema to an Object Notation,
  * This Object would further be an input to UI Components to generate an Object-Tree
@@ -691,9 +679,6 @@ export function generateExample(examples, example, schema, rawMimeType, includeR
   }
 
   return samples.map((sample, sampleCounter) => {
-    const summary = sample['::TITLE'] || `Example ${sampleCounter + 1}`;
-    const description = sample['::DESCRIPTION'] || '';
-    removeTitlesAndDescriptions(sample);
     let exampleValue = '';
 
     if (mimeType.toLowerCase().includes('xml')) {
@@ -707,8 +692,8 @@ export function generateExample(examples, example, schema, rawMimeType, includeR
 
     return {
       exampleId: `Example-${sampleCounter}`,
-      exampleSummary: summary,
-      exampleDescription: description,
+      exampleSummary: `Example ${sampleCounter + 1}`,
+      exampleDescription: '',
       exampleType: mimeType,
       exampleFormat: mimeType.toLowerCase().includes('xml') ? 'text' : outputType,
       exampleValue

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

@@ -352,7 +352,7 @@ class ApiRequest extends _litElement.LitElement {
 
         if (this.schemaStyle === 'table') {
           reqBodySchemaHtml = (0, _litElement.html)` ${reqBodySchemaHtml} <schema-table class="${reqBody.mimeType.substring(reqBody.mimeType.indexOf('/') + 1)} pad-top-8" style="display:${this.selectedRequestBodyType === reqBody.mimeType ? 'block' : 'none'}" .data="${schemaAsObj}" schema-expand-level="${this.schemaExpandLevel}" schema-description-expanded="${this.schemaDescriptionExpanded}" schema-hide-read-only="${this.schemaHideReadOnly.includes(this.method)}" schema-hide-write-only="false"> </schema-table> `;
-        } else if (this.schemaStyle === 'tree') {
+        } else {
           reqBodySchemaHtml = (0, _litElement.html)` ${reqBodySchemaHtml} <schema-tree class="${reqBody.mimeType.substring(reqBody.mimeType.indexOf('/') + 1)} pad-top-8" style="display:${this.selectedRequestBodyType === reqBody.mimeType ? 'block' : 'none'}" .data="${schemaAsObj}" schema-expand-level="${this.schemaExpandLevel}" schema-description-expanded="${this.schemaDescriptionExpanded}" schema-hide-read-only="${this.schemaHideReadOnly.includes(this.method)}" schema-hide-write-only="false"> </schema-tree> `;
         }
       }

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

@@ -191,7 +191,7 @@ class ApiResponse extends _litElement.LitElement {
       return (0, _litElement.html)` <pre style="color:var(--red)" class="${this.renderStyle === 'read' ? 'border pad-8-16' : 'border-top'}"> Schema not found</pre> `;
     }
 
-    return (0, _litElement.html)` ${this.schemaStyle === 'table' ? (0, _litElement.html)` <schema-table render-style="${this.renderStyle}" .data="${mimeRespDetails.schemaTree}" class="example-panel ${this.renderStyle === 'read' ? 'border pad-8-16' : 'border-top pad-top-8'}" schema-expand-level="${this.schemaExpandLevel}" schema-description-expanded="${this.schemaDescriptionExpanded}" schema-hide-read-only="false" schema-hide-write-only="${this.schemaHideWriteOnly}">  </schema-table>` : (0, _litElement.html)` <schema-tree render-style="${this.renderStyle}" .data="${mimeRespDetails.schemaTree}" class="example-panel ${this.renderStyle === 'read' ? 'border pad-8-16' : 'pad-top-8'}" schema-expand-level="${this.schemaExpandLevel}" schema-description-expanded="${this.schemaDescriptionExpanded}" schema-hide-read-only="false" schema-hide-write-only="${this.schemaHideWriteOnly}"> </schema-tree>`}`;
+    return (0, _litElement.html)` ${this.schemaStyle === 'table' ? (0, _litElement.html)` <schema-table render-style="${this.renderStyle}" .data="${mimeRespDetails.schemaTree}" class="example-panel ${this.renderStyle === 'read' ? 'border pad-8-16' : 'border-top pad-top-8'}" schema-expand-level="${this.schemaExpandLevel}" schema-description-expanded="${this.schemaDescriptionExpanded}" schema-hide-read-only="false" schema-hide-write-only="${this.schemaHideWriteOnly}"> </schema-table> ` : (0, _litElement.html)` <schema-tree render-style="${this.renderStyle}" .data="${mimeRespDetails.schemaTree}" class="example-panel ${this.renderStyle === 'read' ? 'border pad-8-16' : 'pad-top-8'}" schema-expand-level="${this.schemaExpandLevel}" schema-description-expanded="${this.schemaDescriptionExpanded}" schema-hide-read-only="false" schema-hide-write-only="${this.schemaHideWriteOnly}"> </schema-tree>`}`;
   }
   /* eslint-enable indent */
 

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

@@ -29,15 +29,15 @@ class JsonTree extends _litElement.LitElement {
   }
 
   static get styles() {
-    return [_fontStyles.default, _borderStyles.default, _inputStyles.default, (0, _litElement.css)`:host{display:flex}.json-tree{background:#333;color:#fff;padding:8px;min-height:30px;font-family:var(--font-mono);font-size:var(--font-size-small);overflow:hidden;word-break:break-all;flex:1;line-height:calc(var(--font-size-small) + 6px)}.open-bracket{display:inline-block;padding:0 20px 0 0;cursor:pointer;border:1px solid transparent;border-radius:3px}.open-bracket:hover{color:var(--primary-color);background-color:var(--hover-color);border:1px solid var(--border-color)}.inside-bracket{padding-left:16px;border-left:1px dotted var(--border-color)}.open-bracket.collapsed+.inside-bracket,.open-bracket.collapsed+.inside-bracket+.close-bracket{display:none}.string{color:var(--green)}.number{color:var(--blue)}.null{color:var(--red)}.boolean{color:var(--orange)}.object{color:#fff}.toolbar{position:absolute;right:6px;display:flex;align-items:center}`];
+    return [_fontStyles.default, _borderStyles.default, _inputStyles.default, (0, _litElement.css)`:host{display:flex}.json-tree{background:#333;color:#fff;padding:12px;min-height:30px;font-family:var(--font-mono);font-size:var(--font-size-small);overflow:hidden;word-break:break-all;flex:1;line-height:calc(var(--font-size-small) + 6px)}.open-bracket{display:inline-block;padding:0 20px 0 0;cursor:pointer;border:1px solid transparent;border-radius:3px}.collapsed.open-bracket{padding-right:0}.tree>.open-bracket{margin-left:-2px}.open-bracket:hover{color:var(--primary-color);background-color:var(--hover-color);border:1px solid var(--border-color)}.inside-bracket{padding-left:16px;border-left:1px dotted var(--border-color)}.open-bracket.collapsed+.inside-bracket,.open-bracket.collapsed+.inside-bracket+.close-bracket{display:none}.close-bracket{margin-left:-2px}.string{color:var(--green)}.number{color:var(--blue)}.null{color:var(--red)}.boolean{color:var(--orange)}.object{color:#fff}.toolbar{display:none}.tree .toolbar{display:flex;justify-content:space-between;width:100%}.tree .item{border-bottom:1px dotted transparent}.toolbar-item{cursor:pointer;padding:5px 0 5px 1rem;margin:0 1rem!important;color:#38b3f9;flex-shrink:0}.tree .toolbar .toolbar-item{display:none}.inside-bracket.xxx-of{padding:5px 0;border-style:dotted;border-width:0 0 1px 0;border-color:var(--primary-color)}.schema-root-type.xxx-of{display:none}.toolbar-item:first-of-type{margin:0 2px 0 0}@media only screen and (min-width:576px){.key-descr{display:block}.tree .toolbar .toolbar-item{display:block}.toolbar{display:flex}}.toolbar-backup{position:absolute;right:6px;display:flex;align-items:center}`];
   }
   /* eslint-disable indent */
 
 
   render() {
-    return (0, _litElement.html)` <div class="json-tree"> <div class="toolbar"> <button class="toolbar-copy-btn" part="btn btn-fill" @click="${e => {
+    return (0, _litElement.html)` <div class="json-tree tree"> <div class="toolbar"> <div>&nbsp;</div> <div class="toolbar-item"> <button class="toolbar-copy-btn" part="btn btn-fill" @click="${e => {
       (0, _commonUtils.copyToClipboard)(JSON.stringify(this.data, null, 2), e);
-    }}">Copy</button> </div> ${this.generateTree(this.data, true)} </div> `;
+    }}">Copy</button> </div> </div> ${this.generateTree(this.data, true)} </div> `;
   }
 
   generateTree(data, isLast = false) {

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

@@ -61,15 +61,13 @@ class SchemaTable extends _litElement.LitElement {
   }
 
   static get styles() {
-    return [_fontStyles.default, _schemaStyles.default, (0, _litElement.css)`.table{font-size:var(--font-size-small);text-align:left;line-height:calc(var(--font-size-small) + 6px)}.table .tr{width:calc(100% - 5px);padding:0 0 0 5px;border-bottom:1px dotted var(--light-border-color)}.table .td{padding:4px 0}.table .key{width:240px}.key.deprecated .key-label{text-decoration:line-through}.table .key-type{white-space:normal;width:150px}.collapsed-descr .tr{max-height:calc(var(--font-size-small) + var(--font-size-small) + 4px)}.obj-toggle{padding:0 2px;border-radius:2px;border:1px solid transparent;display:inline-block;margin-left:-16px;color:var(--primary-color);cursor:pointer;font-size:calc(var(--font-size-small) + 4px);font-family:var(--font-mono);background-clip:border-box}.obj-toggle:hover{border-color:var(--primary-color)}.tr.expanded+.object-body{display:block}.tr.collapsed+.object-body{display:none}`];
+    return [_fontStyles.default, _schemaStyles.default, (0, _litElement.css)`.table{font-size:var(--font-size-small);text-align:left;line-height:calc(var(--font-size-small) + 6px)}.table .tr{width:calc(100% - 5px);padding:0 0 0 5px;border-bottom:1px dotted var(--light-border-color)}.table .td{padding:4px 0}.table .key{width:240px}.key.deprecated .key-label{text-decoration:line-through}.table .key-type{white-space:normal;width:150px}.obj-toggle{padding:0 2px;border-radius:2px;border:1px solid transparent;display:inline-block;margin-left:-16px;color:var(--primary-color);cursor:pointer;font-size:calc(var(--font-size-small) + 4px);font-family:var(--font-mono);background-clip:border-box}.obj-toggle:hover{border-color:var(--primary-color)}.tr.expanded+.object-body{display:block}.tr.collapsed+.object-body{display:none}`];
   }
   /* eslint-disable indent */
 
 
   render() {
-    return (0, _litElement.html)` <div class="table ${this.schemaDescriptionExpanded === 'true' ? 'expanded-descr' : 'collapsed-descr'}"> <div class="toolbar"> <div style="flex:1"></div> <div class="toolbar-item" @click="${() => {
-      this.schemaDescriptionExpanded = this.schemaDescriptionExpanded === 'true' ? 'false' : 'true';
-    }}"> ${this.schemaDescriptionExpanded === 'true' ? 'Collapse descriptions' : 'Expand descriptions'} </div> </div> ${this.data && this.data['::description'] ? (0, _litElement.html)`<span class="m-markdown"> ${(0, _unsafeHtml.unsafeHTML)((0, _marked.marked)(this.data['::description'] || ''))}</span>` : ''} <div style="border:1px solid var(--light-border-color)"> <div style="display:flex;background-color:var(--bg2);padding:8px 4px;border-bottom:1px solid var(--light-border-color)"> <div class="key" style="font-family:var(--font-regular);font-weight:700;color:var(--fg)"> Field </div> <div class="key-type" style="font-family:var(--font-regular);font-weight:700;color:var(--fg)"> Type </div> <div class="key-descr" style="font-family:var(--font-regular);font-weight:700;color:var(--fg)"> Description </div> </div> ${this.data ? (0, _litElement.html)`${this.generateTree(this.data['::type'] === 'array' ? this.data['::props'] : this.data, this.data['::type'])}` : ''} </div> </div> `;
+    return (0, _litElement.html)` <div class="table"> ${this.data && this.data['::description'] ? (0, _litElement.html)`<span class="m-markdown"> ${(0, _unsafeHtml.unsafeHTML)((0, _marked.marked)(this.data['::description'] || ''))}</span>` : ''} <div style="border:1px solid var(--light-border-color)"> <div style="display:flex;background-color:var(--bg2);padding:8px 4px;border-bottom:1px solid var(--light-border-color)"> <div class="key" style="font-family:var(--font-regular);font-weight:700;color:var(--fg)"> Field </div> <div class="key-type" style="font-family:var(--font-regular);font-weight:700;color:var(--fg)"> Type </div> <div class="key-descr" style="font-family:var(--font-regular);font-weight:700;color:var(--fg)"> Description </div> </div> ${this.data ? (0, _litElement.html)`${this.generateTree(this.data['::type'] === 'array' ? this.data['::props'] : this.data, this.data['::type'])}` : ''} </div> </div> `;
   }
 
   generateTree(data, dataType = 'object', key = '', description = '', schemaLevel = 0, indentLevel = 0) {
@@ -117,7 +115,7 @@ class SchemaTable extends _litElement.LitElement {
     }
 
     if (typeof data === 'object') {
-      return (0, _litElement.html)` ${newSchemaLevel >= 0 && key ? (0, _litElement.html)` <div class="tr ${newSchemaLevel <= this.schemaExpandLevel ? 'expanded' : 'collapsed'} ${data['::type']}" data-obj="${keyLabel}"> <div class="td key ${data['::deprecated'] ? 'deprecated' : ''}" style="padding-left:${leftPadding}px"> ${keyLabel || keyDescr ? (0, _litElement.html)` <span class="obj-toggle ${newSchemaLevel < this.schemaExpandLevel ? 'expanded' : 'collapsed'}" data-obj="${keyLabel}" @click="${e => this.toggleObjectExpand(e, keyLabel)}"> ${schemaLevel < this.schemaExpandLevel ? '-' : '+'} </span>` : ''} ${data['::type'] === 'xxx-of-option' || data['::type'] === 'xxx-of-array' || key.startsWith('::OPTION') ? (0, _litElement.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, _litElement.html)`<span class="key-label" style="display:inline-block;margin-left:-6px"> ${keyLabel.substring(0, keyLabel.length - 1)}</span><span style="color:var(--red)">*</span>` : (0, _litElement.html)`<span class="key-label" style="display:inline-block;margin-left:-6px">${keyLabel === '::props' ? '' : keyLabel}</span>`} ${data['::type'] === 'xxx-of' && dataType === 'array' ? (0, _litElement.html)`<span style="color:var(--primary-color)">ARRAY</span>` : ''} </div> <div class="td key-type">${(data['::type'] || '').includes('xxx-of') ? '' : detailObjType}</div> <div class="td key-descr m-markdown-small" style="line-height:1.7">${(0, _unsafeHtml.unsafeHTML)((0, _marked.marked)(description || ''))}</div> </div>` : (0, _litElement.html)` ${data['::type'] === 'array' && dataType === 'array' ? (0, _litElement.html)`<div class="tr"> <div class="td"> ${dataType} </div> </div>` : ''} `} <div class="object-body"> ${Array.isArray(data) && data[0] ? (0, _litElement.html)`${this.generateTree(data[0], 'xxx-of-option', '::ARRAY~OF', '', newSchemaLevel, newIndentLevel)}` : (0, _litElement.html)`${Object.keys(data).map(dataKey => ['::title', '::description', '::type', '::props', '::deprecated'].includes(dataKey) && data[dataKey]['::type'] !== 'array' && data[dataKey]['::type'] !== 'object' ? '' : (0, _litElement.html)`${this.generateTree(data[dataKey]['::type'] === 'array' ? data[dataKey]['::props'] : data[dataKey], data[dataKey]['::type'], dataKey, data[dataKey]['::description'], newSchemaLevel, newIndentLevel)}`)}`} <div> </div></div>`;
+      return (0, _litElement.html)` ${newSchemaLevel >= 0 && key ? (0, _litElement.html)` <div class="tr ${newSchemaLevel <= this.schemaExpandLevel ? 'expanded' : 'collapsed'} ${data['::type']}" data-obj="${keyLabel}"> <div class="td key ${data['::deprecated'] ? 'deprecated' : ''}" style="padding-left:${leftPadding}px"> ${keyLabel || keyDescr ? (0, _litElement.html)` <span class="obj-toggle ${newSchemaLevel < this.schemaExpandLevel ? 'expanded' : 'collapsed'}" data-obj="${keyLabel}" @click="${e => this.toggleObjectExpand(e, keyLabel)}"> ${schemaLevel < this.schemaExpandLevel ? '-' : '+'} </span>` : ''} ${data['::type'] === 'xxx-of-option' || data['::type'] === 'xxx-of-array' || key.startsWith('::OPTION') ? (0, _litElement.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, _litElement.html)`<span class="key-label" style="display:inline-block;margin-left:-6px"> ${keyLabel.substring(0, keyLabel.length - 1)}</span><span style="color:var(--red)">*</span>` : (0, _litElement.html)`<span class="key-label" style="display:inline-block;margin-left:-6px">${keyLabel === '::props' ? '' : keyLabel}</span>`} ${data['::type'] === 'xxx-of' && dataType === 'array' ? (0, _litElement.html)`<span style="color:var(--primary-color)">ARRAY</span>` : ''} </div> <div class="td key-type">${(data['::type'] || '').includes('xxx-of') ? '' : detailObjType}</div> <div class="td key-descr m-markdown-small" style="line-height:1.7">${(0, _unsafeHtml.unsafeHTML)((0, _marked.marked)(description || ''))}</div> </div>` : (0, _litElement.html)` ${data['::type'] === 'array' && dataType === 'array' ? (0, _litElement.html)`<div class="tr"> <div class="td"> ${dataType} </div> </div>` : ''} `} <div class="object-body"> ${Array.isArray(data) && data[0] ? (0, _litElement.html)`${this.generateTree(data[0], 'xxx-of-option', '::ARRAY~OF', '', newSchemaLevel, newIndentLevel)}` : (0, _litElement.html)` ${Object.keys(data).map(dataKey => dataKey.startsWith('::') && data[dataKey]['::type'] !== 'array' && data[dataKey]['::type'] !== 'object' ? '' : (0, _litElement.html)`${this.generateTree(data[dataKey]['::type'] === 'array' ? data[dataKey]['::props'] : data[dataKey], data[dataKey]['::type'], dataKey, data[dataKey]['::description'], newSchemaLevel, newIndentLevel)}`)}`} <div> </div></div>`;
     } // For Primitive Data types
 
 
@@ -126,6 +124,7 @@ class SchemaTable extends _litElement.LitElement {
       readOrWriteOnly,
       constraint,
       defaultValue,
+      example,
       allowedValues,
       pattern,
       schemaDescription,
@@ -142,7 +141,7 @@ class SchemaTable extends _litElement.LitElement {
     }
 
     const dataTypeCss = type.replace(/┃.*/g, '').replace(/[^a-zA-Z0-9+]/g, '').substring(0, 4).toLowerCase();
-    return (0, _litElement.html)` <div class="tr primitive"> <div class="td key ${deprecated ? 'deprecated' : ''}" style="padding-left:${leftPadding}px"> ${keyLabel && keyLabel.endsWith('*') ? (0, _litElement.html)`<span class="key-label">${keyLabel.substring(0, keyLabel.length - 1)}</span><span style="color:var(--red)">*</span>` : key.startsWith('::OPTION') ? (0, _litElement.html)`<span class="xxx-of-key">${keyLabel}</span><span class="xxx-of-descr">${keyDescr}</span>` : (0, _litElement.html)`${keyLabel ? (0, _litElement.html)`<span class="key-label"> ${keyLabel}</span>` : (0, _litElement.html)`<span class="xxx-of-descr">${schemaTitle}</span>`}`} </div> <div class="td key-type ${dataTypeCss}"> ${dataType === 'array' ? `${type}[]` : type} <span style="font-family:var(--font-mono)" title="${readOrWriteOnly === '🆁' && 'Read only attribute' || readOrWriteOnly === '🆆' && 'Write only attribute' || ''}"> ${readOrWriteOnly} </span> </div> <div class="td key-descr"> ${dataType === 'array' ? (0, _litElement.html)`<span class="m-markdown-small">${(0, _unsafeHtml.unsafeHTML)((0, _marked.marked)(description))}</span>` : ''} ${schemaTitle || schemaDescription ? (0, _litElement.html)`<span class="m-markdown-small">${(0, _unsafeHtml.unsafeHTML)((0, _marked.marked)(`${schemaTitle ? `**${schemaTitle}:** ` : ''}${schemaDescription || ''}`))}</span>` : ''} ${constraint ? (0, _litElement.html)`<div style="display:inline-block;line-break:anywhere;margin-right:8px"> <span class="bold-text">Constraints: </span> ${constraint}</div>` : ''} ${defaultValue ? (0, _litElement.html)`<div style="display:inline-block;line-break:anywhere;margin-right:8px"> <span class="bold-text">Default: </span>${defaultValue}</div>` : ''} ${allowedValues ? (0, _litElement.html)`<div style="display:inline-block;line-break:anywhere;margin-right:8px"> <span class="bold-text">Allowed: </span>${allowedValues}</div>` : ''} ${pattern ? (0, _litElement.html)`<div style="display:inline-block;line-break:anywhere;margin-right:8px"> <span class="bold-text">Pattern: </span>${pattern}</div>` : ''} </div> </div> `;
+    return (0, _litElement.html)` <div class="tr primitive"> <div class="td key ${deprecated ? 'deprecated' : ''}" style="padding-left:${leftPadding}px"> ${keyLabel && keyLabel.endsWith('*') ? (0, _litElement.html)`<span class="key-label">${keyLabel.substring(0, keyLabel.length - 1)}</span><span style="color:var(--red)">*</span>` : key.startsWith('::OPTION') ? (0, _litElement.html)`<span class="xxx-of-key">${keyLabel}</span><span class="xxx-of-descr">${keyDescr}</span>` : (0, _litElement.html)`${keyLabel ? (0, _litElement.html)`<span class="key-label"> ${keyLabel}</span>` : (0, _litElement.html)`<span class="xxx-of-descr">${schemaTitle}</span>`}`} </div> <div class="td key-type ${dataTypeCss}"> ${dataType === 'array' ? `${type}[]` : type} <span style="font-family:var(--font-mono)" title="${readOrWriteOnly === '🆁' && 'Read only attribute' || readOrWriteOnly === '🆆' && 'Write only attribute' || ''}"> ${readOrWriteOnly} </span> </div> <div class="td key-descr"> ${dataType === 'array' ? (0, _litElement.html)`<span class="m-markdown-small">${(0, _unsafeHtml.unsafeHTML)((0, _marked.marked)(description))}</span>` : ''} <span class="m-markdown-small" style="font-family:var(--font-mono);vertical-align:middle" title="${readOrWriteOnly === '🆁' && 'Read only attribute' || readOrWriteOnly === '🆆' && 'Write only attribute' || ''}"> ${(0, _unsafeHtml.unsafeHTML)((0, _marked.marked)(`${readOrWriteOnly && `${readOrWriteOnly} ` || ''}${dataType === 'array' && description || `${schemaTitle ? `**${schemaTitle}:**` : ''} ${schemaDescription}` || ''}`))} </span> ${this.schemaDescriptionExpanded ? (0, _litElement.html)` ${constraint ? (0, _litElement.html)`<div style="display:inline-block;line-break:anywhere;margin-right:8px"><span class="bold-text">Constraints: </span>${constraint}</div><br>` : ''} ${defaultValue ? (0, _litElement.html)`<div style="display:inline-block;line-break:anywhere;margin-right:8px"><span class="bold-text">Default: </span>${defaultValue}</div><br>` : ''} ${allowedValues ? (0, _litElement.html)`<div style="display:inline-block;line-break:anywhere;margin-right:8px"><span class="bold-text">Allowed: </span>${allowedValues}</div><br>` : ''} ${pattern ? (0, _litElement.html)`<div style="display:inline-block;line-break:anywhere;margin-right:8px"><span class="bold-text">Pattern: </span>${pattern}</div><br>` : ''} ${example ? (0, _litElement.html)`<div style="display:inline-block;line-break:anywhere;margin-right:8px"><span class="bold-text">Example: </span>${example}</div><br>` : ''}` : ''} </div> </div> `;
   }
   /* eslint-enable indent */
 

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

@@ -63,15 +63,18 @@ class SchemaTree extends _litElement.LitElement {
   }
 
   static get styles() {
-    return [_fontStyles.default, _schemaStyles.default, _borderStyles.default, (0, _litElement.css)`.tree{min-height:30px;background:#333;padding:10px;color:#fff;font-size:var(--font-size-small);text-align:left;line-height:calc(var(--font-size-small) + 6px)}.collapsed-descr .tr{max-height:calc(var(--font-size-small) + 8px)}.collapsed-descr .m-markdown-small p{line-height:calc(var(--font-size-small) + 6px)}.tree .key{max-width:300px}.key.deprecated .key-label{text-decoration:line-through}.open-bracket{display:inline-block;padding:0 20px 0 0;cursor:pointer;border:1px solid transparent;border-radius:3px}.open-bracket:hover{color:var(--primary-color);background-color:var(--hover-color);border:1px solid var(--border-color)}.close-bracket{display:inline-block;font-family:var(--font-mono)}.tr.collapsed+.inside-bracket,.tr.collapsed+.inside-bracket+.close-bracket{display:none}.inside-bracket.array,.inside-bracket.object{border-left:1px dotted var(--border-color)}.inside-bracket.xxx-of{padding:5px 0;border-style:dotted;border-width:0 0 1px 0;border-color:var(--primary-color)}`];
+    return [_fontStyles.default, _schemaStyles.default, _borderStyles.default, (0, _litElement.css)`.tree{min-height:30px;background:#333;padding:12px;color:#fff;font-size:var(--font-size-small);text-align:left;line-height:calc(var(--font-size-small) + 6px)}.tree .key{max-width:300px}.key.deprecated .key-label{text-decoration:line-through}.open-bracket{display:inline-block;padding:0 20px 0 0;cursor:pointer;border:1px solid transparent;border-radius:3px}.collapsed .open-bracket{padding-right:0}.td.key>.open-bracket:first-child{margin-left:-2px}.open-bracket:hover{color:var(--primary-color);background-color:var(--hover-color);border:1px solid var(--border-color)}.close-bracket{display:inline-block;font-family:var(--font-mono);margin-left:-2px}.tr.collapsed .close-bracket{margin-left:0}.tr.collapsed+.inside-bracket,.tr.collapsed+.inside-bracket+.close-bracket{display:none}.inside-bracket.array,.inside-bracket.object{border-left:1px dotted var(--border-color)}.inside-bracket.xxx-of{padding:5px 0;border-style:dotted;border-width:0 0 1px 0;border-color:var(--primary-color)}`];
   }
   /* eslint-disable indent */
 
 
   render() {
-    return (0, _litElement.html)` <div class="tree ${this.schemaDescriptionExpanded === 'true' ? 'expanded-descr' : 'collapsed-descr'}"> <div class="toolbar"> ${this.data && this.data['::description'] ? (0, _litElement.html)`<span class="m-markdown" style="margin-block-start:0"> ${(0, _unsafeHtml.unsafeHTML)((0, _marked.marked)(this.data['::description'] || ''))}</span>` : (0, _litElement.html)`<div>&nbsp;</div>`} <div class="toolbar-item" @click="${() => {
-      this.schemaDescriptionExpanded = this.schemaDescriptionExpanded === 'true' ? 'false' : 'true';
-    }}"> ${this.schemaDescriptionExpanded === 'true' ? 'Collapse descriptions' : 'Expand descriptions'} </div> </div> ${this.data ? (0, _litElement.html)`${this.generateTree(this.data['::type'] === 'array' ? this.data['::props'] : this.data, this.data['::type'])}` : (0, _litElement.html)`<span class="mono-font" style="color:var(--red)"> Schema not found </span>`} </div> `;
+    return (0, _litElement.html)` <div class="tree"> <div class="toolbar"> ${this.data && this.data['::description'] ? (0, _litElement.html)`<span class="m-markdown" style="margin-block-start:0"> ${(0, _unsafeHtml.unsafeHTML)((0, _marked.marked)(this.data['::description'] || ''))}</span>` : (0, _litElement.html)`<div>&nbsp;</div>`} <div class="toolbar-item" @click="${() => this.toggleSchemaDescription()}"> ${this.schemaDescriptionExpanded === 'true' ? 'Collapse descriptions' : 'Expand descriptions'} </div> </div> ${this.data ? (0, _litElement.html)`${this.generateTree(this.data['::type'] === 'array' ? this.data['::props'] : this.data, this.data['::type'])}` : (0, _litElement.html)`<span class="mono-font" style="color:var(--red)"> Schema not found </span>`} </div> `;
+  }
+
+  toggleSchemaDescription() {
+    this.schemaDescriptionExpanded = !this.schemaDescriptionExpanded;
+    this.requestUpdate();
   }
 
   generateTree(data, dataType = 'object', key = '', description = '', schemaLevel = 0, indentLevel = 0) {
@@ -164,6 +167,7 @@ class SchemaTree extends _litElement.LitElement {
       readOrWriteOnly,
       constraint,
       defaultValue,
+      example,
       allowedValues,
       pattern,
       schemaDescription,
@@ -180,7 +184,7 @@ class SchemaTree extends _litElement.LitElement {
     }
 
     const dataTypeCss = type.replace(/┃.*/g, '').replace(/[^a-zA-Z0-9+]/g, '').substring(0, 4).toLowerCase();
-    return (0, _litElement.html)` <div class="tr primitive"> <div class="td key ${deprecated ? 'deprecated' : ''}" style="min-width:${minFieldColWidth}px"> ${keyLabel.endsWith('*') ? (0, _litElement.html)`<span class="key-label">${keyLabel.substring(0, keyLabel.length - 1)}</span><span style="color:var(--red)">*</span>:` : key.startsWith('::OPTION') ? (0, _litElement.html)`<span class="key-label xxx-of-key">${keyLabel}</span><span class="xxx-of-descr">${keyDescr}</span>` : schemaLevel > 0 ? (0, _litElement.html)`<span class="key-label">${keyLabel}:</span>` : ''} <span class="${dataTypeCss}"> ${dataType === 'array' ? `${type}[]` : `${type}`} </span> </div> <div class="td key-descr"> <span class="m-markdown-small" style="font-family:var(--font-mono);vertical-align:middle" title="${readOrWriteOnly === '🆁' && 'Read only attribute' || readOrWriteOnly === '🆆' && 'Write only attribute' || ''}"> ${(0, _unsafeHtml.unsafeHTML)((0, _marked.marked)(`${readOrWriteOnly && `${readOrWriteOnly} ` || ''}${dataType === 'array' && description || `${schemaTitle ? `**${schemaTitle}:**` : ''} ${schemaDescription}` || ''}`))} </span> ${constraint ? (0, _litElement.html)`<div style="display:inline-block;line-break:anywhere;margin-right:8px"><span class="bold-text">Constraints: </span>${constraint}</div>` : ''} ${defaultValue ? (0, _litElement.html)`<div style="display:inline-block;line-break:anywhere;margin-right:8px"><span class="bold-text">Default: </span>${defaultValue}</div>` : ''} ${allowedValues ? (0, _litElement.html)`<div style="display:inline-block;line-break:anywhere;margin-right:8px"><span class="bold-text">Allowed: </span>${allowedValues}</div>` : ''} ${pattern ? (0, _litElement.html)`<div style="display:inline-block;line-break:anywhere;margin-right:8px"><span class="bold-text">Pattern: </span>${pattern}</div>` : ''} </div> </div> `;
+    return (0, _litElement.html)` <div class="tr primitive"> <div class="td key ${deprecated ? 'deprecated' : ''}" style="min-width:${minFieldColWidth}px"> ${keyLabel.endsWith('*') ? (0, _litElement.html)`<span class="key-label">${keyLabel.substring(0, keyLabel.length - 1)}</span><span style="color:var(--red)">*</span>:` : key.startsWith('::OPTION') ? (0, _litElement.html)`<span class="key-label xxx-of-key">${keyLabel}</span><span class="xxx-of-descr">${keyDescr}</span>` : schemaLevel > 0 ? (0, _litElement.html)`<span class="key-label">${keyLabel}:</span>` : ''} <span class="${dataTypeCss}"> ${dataType === 'array' ? `${type}[]` : `${type}`} </span> </div> <div class="td key-descr"> <span class="m-markdown-small" style="font-family:var(--font-mono);vertical-align:middle" title="${readOrWriteOnly === '🆁' && 'Read only attribute' || readOrWriteOnly === '🆆' && 'Write only attribute' || ''}"> ${(0, _unsafeHtml.unsafeHTML)((0, _marked.marked)(`${readOrWriteOnly && `${readOrWriteOnly} ` || ''}${dataType === 'array' && description || `${schemaTitle ? `**${schemaTitle}:**` : ''} ${schemaDescription}` || ''}`))} </span> ${this.schemaDescriptionExpanded ? (0, _litElement.html)` ${constraint ? (0, _litElement.html)`<div style="display:inline-block;line-break:anywhere;margin-right:8px"><span class="bold-text">Constraints: </span>${constraint}</div><br>` : ''} ${defaultValue ? (0, _litElement.html)`<div style="display:inline-block;line-break:anywhere;margin-right:8px"><span class="bold-text">Default: </span>${defaultValue}</div><br>` : ''} ${allowedValues ? (0, _litElement.html)`<div style="display:inline-block;line-break:anywhere;margin-right:8px"><span class="bold-text">Allowed: </span>${allowedValues}</div><br>` : ''} ${pattern ? (0, _litElement.html)`<div style="display:inline-block;line-break:anywhere;margin-right:8px"><span class="bold-text">Pattern: </span>${pattern}</div><br>` : ''} ${example ? (0, _litElement.html)`<div style="display:inline-block;line-break:anywhere;margin-right:8px"><span class="bold-text">Example: </span>${example}</div><br>` : ''}` : ''} </div> </div> `;
   }
   /* eslint-enable indent */
 

package/dist/lib/openapi-explorer.js

@@ -127,17 +127,16 @@ class OpenApiExplorer extends _litElement.LitElement {
         attribute: 'fill-defaults'
       },
       // Schema Styles
-      schemaStyle: {
-        type: String,
-        attribute: 'schema-style'
+      displaySchemaAsTable: {
+        type: Boolean,
+        attribute: 'table'
       },
       schemaExpandLevel: {
         type: Number,
         attribute: 'schema-expand-level'
       },
       schemaDescriptionExpanded: {
-        type: String,
-        attribute: 'schema-description-expanded'
+        type: String
       },
       // API Server
       serverUrl: {
@@ -169,9 +168,9 @@ class OpenApiExplorer extends _litElement.LitElement {
         type: String,
         attribute: 'show-server-selection'
       },
-      showComponents: {
-        type: String,
-        attribute: 'show-components'
+      hideComponents: {
+        type: Boolean,
+        attribute: 'hide-components'
       },
       // Main Colors and Font
       primaryColor: {
@@ -290,10 +289,6 @@ class OpenApiExplorer extends _litElement.LitElement {
     this.renderStyle = 'focused';
     this.explorerLocation = this.explorerLocation || (0, _commonUtils.getCurrentElement)();
 
-    if (!this.schemaStyle || !'tree, table,'.includes(`${this.schemaStyle},`)) {
-      this.schemaStyle = 'tree';
-    }
-
     if (!this.defaultSchemaTab || !'body, model,'.includes(`${this.defaultSchemaTab},`)) {
       this.defaultSchemaTab = 'model';
     }
@@ -353,10 +348,6 @@ class OpenApiExplorer extends _litElement.LitElement {
       this.allowAuthentication = 'true';
     }
 
-    if (!this.showComponents || !'true false'.includes(this.showComponents)) {
-      this.showComponents = 'true';
-    }
-
     if (!this.fetchCredentials || !'omit, same-origin, include,'.includes(`${this.fetchCredentials},`)) {
       this.fetchCredentials = '';
     }

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

@@ -5,6 +5,6 @@ exports.default = void 0;
 
 var _litElement = require("lit-element");
 
-var _default = (0, _litElement.css)`*,:after,:before{box-sizing:border-box}.tr{display:flex;flex:none;width:100%;box-sizing:content-box;border-bottom:1px dotted transparent}.td{display:block;flex:0 0 auto}.key{font-family:var(--font-mono);white-space:normal;word-break:break-all}.collapsed-descr .key{overflow:hidden}.key-descr{font-family:var(--font-regular);flex-shrink:1;text-overflow:ellipsis;overflow:hidden;display:none}.toolbar{display:none}.expanded-descr .key-descr{max-height:auto;overflow:hidden;display:none}.collapsed-descr .tr{max-height:20px}.tr.xxx-of{border-top:1px dotted var(--primary-color)}.xxx-of-key{font-size:calc(var(--font-size-small) - 2px);font-weight:700;background-color:var(--primary-color);color:var(--primary-btn-text-color);border-radius:2px;line-height:calc(var(--font-size-small) + 6px);padding:0 5px;margin-bottom:1px;display:inline-block}.xxx-of-descr{font-family:var(--font-regular);color:var(--primary-color);font-size:calc(var(--font-size-small) - 1px);margin-left:2px}.bina,.byte,.date,.emai,.host,.ipv4,.pass,.stri,.string,.uri,.url,.uuid{color:var(--green)}.deci .blue,.doub,.floa,.int3,.int6,.inte,.numb,.number{color:var(--blue)}.null{color:var(--red)}.bool,.boolean{color:var(--orange)}.enum{color:var(--yellow)}.tree .toolbar{display:flex;justify-content:space-between}.toolbar{width:100%}.toolbar-item{cursor:pointer;padding:5px 0 5px 1rem;margin:0 1rem!important;color:#38b3f9;flex-shrink:0}.tree .toolbar .toolbar-item{display:none}.schema-root-type{cursor:auto;color:var(--fg2);font-weight:700;text-transform:uppercase}.schema-root-type.xxx-of{display:none}.toolbar-item:first-of-type{margin:0 2px 0 0}@media only screen and (min-width:576px){.key-descr{display:block}.tree .toolbar .toolbar-item{display:block}.toolbar{display:flex}.expanded-descr .key-descr{display:block}}`;
+var _default = (0, _litElement.css)`*,:after,:before{box-sizing:border-box}.tr{display:flex;flex:none;width:100%;box-sizing:content-box;border-bottom:1px dotted transparent}.td{display:block;flex:0 0 auto}.key{font-family:var(--font-mono);white-space:normal;word-break:break-all}.key-descr{font-family:var(--font-regular);flex-shrink:1;text-overflow:ellipsis;overflow:hidden;display:none;max-height:auto}.toolbar{display:none}.tr.xxx-of{border-top:1px dotted var(--primary-color)}.xxx-of-key{font-size:calc(var(--font-size-small) - 2px);font-weight:700;background-color:var(--primary-color);color:var(--primary-btn-text-color);border-radius:2px;line-height:calc(var(--font-size-small) + 6px);padding:0 5px;margin-bottom:1px;display:inline-block}.xxx-of-descr{font-family:var(--font-regular);color:var(--primary-color);font-size:calc(var(--font-size-small) - 1px);margin-left:2px}.bina,.byte,.date,.emai,.host,.ipv4,.pass,.stri,.string,.uri,.url,.uuid{color:var(--green)}.deci .blue,.doub,.floa,.int3,.int6,.inte,.numb,.number{color:var(--blue)}.null{color:var(--red)}.bool,.boolean{color:var(--orange)}.enum{color:var(--yellow)}.tree .toolbar{display:flex;justify-content:space-between}.toolbar{width:100%}.toolbar-item{cursor:pointer;padding:5px 0 5px 1rem;margin:0 1rem!important;color:#38b3f9;flex-shrink:0}.tree .toolbar .toolbar-item{display:none}.schema-root-type{cursor:auto;color:var(--fg2);font-weight:700;text-transform:uppercase}.schema-root-type.xxx-of{display:none}.toolbar-item:first-of-type{margin:0 2px 0 0}@media only screen and (min-width:576px){.key-descr{display:block}.tree .toolbar .toolbar-item{display:block}.toolbar{display:flex}}`;
 
 exports.default = _default;

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

@@ -7,6 +7,6 @@ var _litElement = require("lit-element");
 
 /* eslint-disable indent */
 function callbackTemplate(callbacks) {
-  return (0, _litElement.html)` <div class="api-request col regular-font request-panel ${this.renderStyle}-mode"> ${Object.entries(callbacks).map(kv => (0, _litElement.html)` <div class="${this.renderStyle}-request"> <div class="req-res-title">CALLBACKS</div> <div class="table-title">${kv[0]}</div> ${Object.entries(kv[1]).map(pathObj => (0, _litElement.html)` <div class="mono-font small-font-size" style="display:flex"> <div style="width:100%"> ${Object.entries(pathObj[1]).map(method => (0, _litElement.html)` <div> <div style="margin-top:12px"> <div class="method method-fg ${method[0]}" style="width:70px;border:none;margin:0;padding:0;line-height:20px;vertical-align:baseline;text-align:left"> <span style="font-size:20px"> &#x2944; </span> ${method[0]} </div> <span style="line-height:20px;vertical-align:baseline">${pathObj[0]} </span> </div> <div class="expanded-req-resp-container"> <api-request class="request-panel" callback="true" method="${method[0] || ''}" , path="${pathObj[0] || ''}" .parameters="${method[1] && method[1].parameters || ''}" .request_body="${method[1] && method[1].requestBody || ''}" fill-defaults="${this.fillRequestWithDefault}" enable-console="false" render-style="${this.renderStyle}" schema-style="${this.schemaStyle}" active-schema-tab="${this.defaultSchemaTab}" schema-expand-level="${this.schemaExpandLevel}" schema-description-expanded="${this.schemaDescriptionExpanded}" schema-hide-read-only="${this.schemaHideReadOnly}" fetch-credentials="${this.fetchCredentials}" exportparts="btn btn-fill btn-outline btn-try"> </api-request> <api-response callback="true" .responses="${method[1] && method[1].responses}" render-style="${this.renderStyle}" schema-style="${this.schemaStyle}" active-schema-tab="${this.defaultSchemaTab}" schema-expand-level="${this.schemaExpandLevel}" schema-description-expanded="${this.schemaDescriptionExpanded}" exportparts="btn--resp btn-fill--resp btn-outline--resp"> </api-response> </div> </div> `)} </div> </div> `)} </div> `)} </div> `;
+  return (0, _litElement.html)` <div class="api-request col regular-font request-panel ${this.renderStyle}-mode"> ${Object.entries(callbacks).map(kv => (0, _litElement.html)` <div class="${this.renderStyle}-request"> <div class="req-res-title">CALLBACKS</div> <div class="table-title">${kv[0]}</div> ${Object.entries(kv[1]).map(pathObj => (0, _litElement.html)` <div class="mono-font small-font-size" style="display:flex"> <div style="width:100%"> ${Object.entries(pathObj[1]).map(method => (0, _litElement.html)` <div> <div style="margin-top:12px"> <div class="method method-fg ${method[0]}" style="width:70px;border:none;margin:0;padding:0;line-height:20px;vertical-align:baseline;text-align:left"> <span style="font-size:20px"> &#x2944; </span> ${method[0]} </div> <span style="line-height:20px;vertical-align:baseline">${pathObj[0]} </span> </div> <div class="expanded-req-resp-container"> <api-request class="request-panel" callback="true" method="${method[0] || ''}" , path="${pathObj[0] || ''}" .parameters="${method[1] && method[1].parameters || ''}" .request_body="${method[1] && method[1].requestBody || ''}" fill-defaults="${this.fillRequestWithDefault}" enable-console="false" render-style="${this.renderStyle}" schema-style="${this.displaySchemaAsTable ? 'table' : 'tree'}" active-schema-tab="${this.defaultSchemaTab}" schema-expand-level="${this.schemaExpandLevel}" schema-description-expanded="${this.schemaDescriptionExpanded}" schema-hide-read-only="${this.schemaHideReadOnly}" fetch-credentials="${this.fetchCredentials}" exportparts="btn btn-fill btn-outline btn-try"> </api-request> <api-response callback="true" .responses="${method[1] && method[1].responses}" render-style="${this.renderStyle}" schema-style="${this.displaySchemaAsTable ? 'table' : 'tree'}" active-schema-tab="${this.defaultSchemaTab}" schema-expand-level="${this.schemaExpandLevel}" schema-description-expanded="${this.schemaDescriptionExpanded}" exportparts="btn--resp btn-fill--resp btn-outline--resp"> </api-response> </div> </div> `)} </div> </div> `)} </div> `)} </div> `;
 }
 /* eslint-enable indent */

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

@@ -18,7 +18,7 @@ require("../components/schema-tree");
 /* eslint-disable no-console */
 function componentBodyTemplate(sComponent) {
   const formdataPartSchema = (0, _schemaUtils.schemaInObjectNotation)(sComponent.component, {});
-  return (0, _litElement.html)` <div class="expanded-endpoint-body observe-me ${sComponent.name}" id="cmp--${sComponent.id}"> <h2>${sComponent.name}</h2> <div class="mono-font regular-font-size" style="padding:8px 0;color:var(--fg2)"> <schema-tree .data="${formdataPartSchema}" schema-expand-level="${this.schemaExpandLevel}" schema-description-expanded="${this.schemaDescriptionExpanded}" schema-hide-read-only="false" schema-hide-write-only="false"> </schema-tree> </div> </div> `;
+  return (0, _litElement.html)` <div class="expanded-endpoint-body observe-me ${sComponent.name}" id="cmp--${sComponent.id}"> <h2>${sComponent.name}</h2> <div class="mono-font regular-font-size" style="padding:8px 0;color:var(--fg2)"> ${this.displaySchemaAsTable ? (0, _litElement.html)`<schema-table .data="${formdataPartSchema}" schema-expand-level="${this.schemaExpandLevel}" schema-description-expanded="${this.schemaDescriptionExpanded}" schema-hide-read-only="false" schema-hide-write-only="false"> </schema-table>` : (0, _litElement.html)`<schema-tree .data="${formdataPartSchema}" schema-expand-level="${this.schemaExpandLevel}" schema-description-expanded="${this.schemaDescriptionExpanded}" schema-hide-read-only="false" schema-hide-write-only="false"> </schema-tree>`} </div> </div> `;
 }
 
 function componentsTemplate() {

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

@@ -93,7 +93,7 @@ function endpointBodyTemplate(path) {
 
   const nonEmptyApiKeys = this.resolvedSpec.securitySchemes.filter(v => v.finalKeyValue && path.security && path.security.some(ps => ps[v.apiKeyId])) || [];
   const codeSampleTabPanel = path.xCodeSamples ? (0, _codeSamplesTemplate.default)(path.xCodeSamples) : '';
-  return (0, _litElement.html)` <div class="endpoint-body ${path.method}"> <div class="summary"> ${path.summary ? (0, _litElement.html)`<div class="title">${path.summary}<div></div></div>` : path.shortSummary !== path.description ? (0, _litElement.html)`<div class="title">${path.shortSummary}</div>` : ''} ${path.description ? (0, _litElement.html)`<div class="m-markdown"> ${(0, _unsafeHtml.unsafeHTML)((0, _marked.marked)(path.description))}</div>` : ''} <slot name="${path.elementId}"></slot> ${_securitySchemeTemplate.pathSecurityTemplate.call(this, path.security)} ${codeSampleTabPanel} </div> <div class="req-resp-container"> <div style="display:flex;flex-direction:column" class="request"> <api-request class="request-panel" style="width:100%" method="${path.method}" , path="${path.path}" .parameters="${path.parameters}" .request_body="${path.requestBody}" .api_keys="${nonEmptyApiKeys}" .servers="${path.servers}" server-url="${path.servers && path.servers.length > 0 ? path.servers[0].url : this.selectedServer.computedUrl}" active-schema-tab="${this.defaultSchemaTab}" fill-defaults="${this.fillRequestWithDefault}" enable-console="${this.allowTry}" accept="${accept}" render-style="${this.renderStyle}" schema-style="${this.schemaStyle}" schema-expand-level="${this.schemaExpandLevel}" schema-description-expanded="${this.schemaDescriptionExpanded}" schema-hide-read-only="${this.schemaHideReadOnly}" fetch-credentials="${this.fetchCredentials}" exportparts="btn btn-fill btn-outline btn-try"> </api-request> </div> ${path.callbacks ? _callbackTemplate.default.call(this, path.callbacks) : ''} <api-response class="request response" .responses="${path.responses}" active-schema-tab="${this.defaultSchemaTab}" render-style="${this.renderStyle}" schema-style="${this.schemaStyle}" schema-expand-level="${this.schemaExpandLevel}" schema-description-expanded="${this.schemaDescriptionExpanded}" schema-hide-write-only="${this.schemaHideWriteOnly}" selected-status="${Object.keys(path.responses || {})[0] || ''}" exportparts="btn--resp btn-fill--resp btn-outline--resp"> </api-response> </div> </div>`;
+  return (0, _litElement.html)` <div class="endpoint-body ${path.method}"> <div class="summary"> ${path.summary ? (0, _litElement.html)`<div class="title">${path.summary}<div></div></div>` : path.shortSummary !== path.description ? (0, _litElement.html)`<div class="title">${path.shortSummary}</div>` : ''} ${path.description ? (0, _litElement.html)`<div class="m-markdown"> ${(0, _unsafeHtml.unsafeHTML)((0, _marked.marked)(path.description))}</div>` : ''} <slot name="${path.elementId}"></slot> ${_securitySchemeTemplate.pathSecurityTemplate.call(this, path.security)} ${codeSampleTabPanel} </div> <div class="req-resp-container"> <div style="display:flex;flex-direction:column" class="request"> <api-request class="request-panel" style="width:100%" method="${path.method}" , path="${path.path}" .parameters="${path.parameters}" .request_body="${path.requestBody}" .api_keys="${nonEmptyApiKeys}" .servers="${path.servers}" server-url="${path.servers && path.servers.length > 0 ? path.servers[0].url : this.selectedServer.computedUrl}" active-schema-tab="${this.defaultSchemaTab}" fill-defaults="${this.fillRequestWithDefault}" enable-console="${this.allowTry}" accept="${accept}" render-style="${this.renderStyle}" schema-style="${this.displaySchemaAsTable ? 'table' : 'tree'}" schema-expand-level="${this.schemaExpandLevel}" schema-description-expanded="${this.schemaDescriptionExpanded}" schema-hide-read-only="${this.schemaHideReadOnly}" fetch-credentials="${this.fetchCredentials}" exportparts="btn btn-fill btn-outline btn-try"> </api-request> </div> ${path.callbacks ? _callbackTemplate.default.call(this, path.callbacks) : ''} <api-response class="request response" .responses="${path.responses}" active-schema-tab="${this.defaultSchemaTab}" render-style="${this.renderStyle}" schema-style="${this.displaySchemaAsTable ? 'table' : 'tree'}" schema-expand-level="${this.schemaExpandLevel}" schema-description-expanded="${this.schemaDescriptionExpanded}" schema-hide-write-only="${this.schemaHideWriteOnly}" selected-status="${Object.keys(path.responses || {})[0] || ''}" exportparts="btn--resp btn-fill--resp btn-outline--resp"> </api-response> </div> </div>`;
 }
 
 function endpointTemplate() {

package/dist/lib/templates/expanded-endpoint-template.js

@@ -36,7 +36,7 @@ function expandedEndpointBodyTemplate(path, tagName = '') {
 
   const nonEmptyApiKeys = this.resolvedSpec.securitySchemes.filter(v => v.finalKeyValue && path.security && path.security.some(ps => ps[v.apiKeyId])) || [];
   const codeSampleTabPanel = path.xCodeSamples ? _codeSamplesTemplate.default.call(this, path.xCodeSamples) : '';
-  return (0, _litElement.html)` ${this.renderStyle === 'read' ? (0, _litElement.html)`<div class="divider" part="operation-divider"></div>` : ''} <div class="expanded-endpoint-body observe-me ${path.method}" part="section-operation ${path.elementId}" id="${path.elementId}"> ${this.renderStyle === 'focused' && tagName !== 'General ⦂' ? (0, _litElement.html)`<h3 class="upper" style="font-weight:700"> ${tagName} </h3>` : ''} ${path.deprecated ? (0, _litElement.html)`<div class="bold-text red-text"> DEPRECATED </div>` : ''} ${(0, _litElement.html)` <h2> ${path.shortSummary || `${path.method.toUpperCase()} ${path.path}`}</h2> <div class='mono-font part="section-operation-url" regular-font-size' style="padding:8px 0;color:var(--fg3)"> ${path.isWebhook ? (0, _litElement.html)`<span style="color:var(--primary-color)"> WEBHOOK </span>` : ''} <span part="label-operation-method" class="regular-font upper method-fg bold-text ${path.method}">${path.method}</span> <span part="label-operation-path">${path.path}</span> </div>`} ${path.description ? (0, _litElement.html)`<div class="m-markdown"> ${(0, _unsafeHtml.unsafeHTML)((0, _marked.marked)(path.description))}</div>` : ''} <slot name="${path.elementId}"></slot> ${_securitySchemeTemplate.pathSecurityTemplate.call(this, path.security)} ${codeSampleTabPanel} <div class="expanded-req-resp-container"> <api-request class="request-panel" method="${path.method}" path="${path.path}" .parameters="${path.parameters}" .request_body="${path.requestBody}" .api_keys="${nonEmptyApiKeys}" .servers="${path.servers}" server-url="${path.servers && path.servers[0] && path.servers[0].url || this.selectedServer.computedUrl}" fill-defaults="${this.fillRequestWithDefault}" enable-console="${this.allowTry}" accept="${accept}" render-style="${this.renderStyle}" schema-style="${this.schemaStyle}" active-schema-tab="${this.defaultSchemaTab}" schema-expand-level="${this.schemaExpandLevel}" schema-description-expanded="${this.schemaDescriptionExpanded}" schema-hide-read-only="${this.schemaHideReadOnly}" fetch-credentials="${this.fetchCredentials}" exportparts="btn btn-fill btn-outline btn-try"> </api-request> ${path.callbacks ? _callbackTemplate.default.call(this, path.callbacks) : ''} <api-response class="response-panel" .responses="${path.responses}" render-style="${this.renderStyle}" schema-style="${this.schemaStyle}" active-schema-tab="${this.defaultSchemaTab}" schema-expand-level="${this.schemaExpandLevel}" schema-description-expanded="${this.schemaDescriptionExpanded}" schema-hide-write-only="${this.schemaHideWriteOnly}" selected-status="${Object.keys(path.responses || {})[0] || ''}" exportparts="btn--resp btn-fill--resp btn-outline--resp"> </api-response> </div> </div> `;
+  return (0, _litElement.html)` ${this.renderStyle === 'read' ? (0, _litElement.html)`<div class="divider" part="operation-divider"></div>` : ''} <div class="expanded-endpoint-body observe-me ${path.method}" part="section-operation ${path.elementId}" id="${path.elementId}"> ${this.renderStyle === 'focused' && tagName !== 'General ⦂' ? (0, _litElement.html)`<h3 class="upper" style="font-weight:700"> ${tagName} </h3>` : ''} ${path.deprecated ? (0, _litElement.html)`<div class="bold-text red-text"> DEPRECATED </div>` : ''} ${(0, _litElement.html)` <h2> ${path.shortSummary || `${path.method.toUpperCase()} ${path.path}`}</h2> <div class='mono-font part="section-operation-url" regular-font-size' style="padding:8px 0;color:var(--fg3)"> ${path.isWebhook ? (0, _litElement.html)`<span style="color:var(--primary-color)"> WEBHOOK </span>` : ''} <span part="label-operation-method" class="regular-font upper method-fg bold-text ${path.method}">${path.method}</span> <span part="label-operation-path">${path.path}</span> </div>`} ${path.description ? (0, _litElement.html)`<div class="m-markdown"> ${(0, _unsafeHtml.unsafeHTML)((0, _marked.marked)(path.description))}</div>` : ''} <slot name="${path.elementId}"></slot> ${_securitySchemeTemplate.pathSecurityTemplate.call(this, path.security)} ${codeSampleTabPanel} <div class="expanded-req-resp-container"> <api-request class="request-panel" method="${path.method}" path="${path.path}" .parameters="${path.parameters}" .request_body="${path.requestBody}" .api_keys="${nonEmptyApiKeys}" .servers="${path.servers}" server-url="${path.servers && path.servers[0] && path.servers[0].url || this.selectedServer.computedUrl}" fill-defaults="${this.fillRequestWithDefault}" enable-console="${this.allowTry}" accept="${accept}" render-style="${this.renderStyle}" schema-style="${this.displaySchemaAsTable ? 'table' : 'tree'}" active-schema-tab="${this.defaultSchemaTab}" schema-expand-level="${this.schemaExpandLevel}" schema-description-expanded="${this.schemaDescriptionExpanded}" schema-hide-read-only="${this.schemaHideReadOnly}" fetch-credentials="${this.fetchCredentials}" exportparts="btn btn-fill btn-outline btn-try"> </api-request> ${path.callbacks ? _callbackTemplate.default.call(this, path.callbacks) : ''} <api-response class="response-panel" .responses="${path.responses}" render-style="${this.renderStyle}" schema-style="${this.displaySchemaAsTable ? 'table' : 'tree'}" active-schema-tab="${this.defaultSchemaTab}" schema-expand-level="${this.schemaExpandLevel}" schema-description-expanded="${this.schemaDescriptionExpanded}" schema-hide-write-only="${this.schemaHideWriteOnly}" selected-status="${Object.keys(path.responses || {})[0] || ''}" exportparts="btn--resp btn-fill--resp btn-outline--resp"> </api-response> </div> </div> `;
 }
 
 function expandedEndpointTemplate() {

package/dist/lib/templates/focused-endpoint-template.js

@@ -61,7 +61,7 @@ function focusedEndpointTemplate() {
     focusedTemplate = _serverTemplate.default.call(this);
   } else if (focusElId === 'section') {
     focusedTemplate = (0, _litElement.html)` <section id="section" class="observe-me"> <slot name="custom-section"></slot> </section>`;
-  } else if (focusElId.startsWith('cmp--') && this.showComponents === 'true') {
+  } else if (focusElId.startsWith('cmp--') && !this.hideComponents) {
     focusedTemplate = _componentsTemplate.default.call(this);
   } else if (focusElId.startsWith('tag--')) {
     const idToFocus = focusElId.indexOf('--', 4) > 0 ? focusElId.substring(0, focusElId.indexOf('--', 5)) : focusElId;

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

@@ -49,6 +49,6 @@ function navbarTemplate() {
     return true;
   }).map(p => (0, _litElement.html)` <div class="nav-bar-path ${this.usePathInNavBar === 'true' ? 'small-font' : ''}" data-content-id="${p.elementId}" id="link-${p.elementId}" @click="${e => {
     this.scrollToEventTarget(e, false);
-  }}"> <span style="line-break:anywhere;${p.deprecated ? 'filter:opacity(0.5)' : ''}"> ${this.usePathInNavBar === 'true' ? (0, _litElement.html)`<span class="mono-font">${p.method.toUpperCase()} ${p.path}</span>` : p.summary || p.shortSummary} ${p.isWebhook ? '(Webhook)' : ''} </span> </div>`)} </div> </div> </slot> `)} ${this.resolvedSpec.components && this.showComponents === 'true' ? (0, _litElement.html)` <div class="sticky-scroll-element"> <div id="link-components" class="nav-bar-section"> <div class="nav-bar-section-title">COMPONENTS</div> </div> </div> ${this.resolvedSpec.components.map(component => component.subComponents.filter(s => s.expanded).length ? (0, _litElement.html)` <div class="nav-bar-tag" data-content-id="cmp--${component.name.toLowerCase()}" id="link-cmp--${component.name.toLowerCase()}" @click="${e => this.scrollToEventTarget(e, false)}"> ${component.name} </div> ${component.subComponents.filter(s => s.expanded).map(p => (0, _litElement.html)` <div class="nav-bar-path" data-content-id="cmp--${p.id}" id="link-cmp--${p.id}" @click="${e => this.scrollToEventTarget(e, false)}"> <span> ${p.name} </span> </div>`)}` : '')}` : ''} </nav>`} </nav> `;
+  }}"> <span style="line-break:anywhere;${p.deprecated ? 'filter:opacity(0.5)' : ''}"> ${this.usePathInNavBar === 'true' ? (0, _litElement.html)`<span class="mono-font">${p.method.toUpperCase()} ${p.path}</span>` : p.summary || p.shortSummary} ${p.isWebhook ? '(Webhook)' : ''} </span> </div>`)} </div> </div> </slot> `)} ${this.resolvedSpec.components && !this.hideComponents ? (0, _litElement.html)` <div class="sticky-scroll-element"> <div id="link-components" class="nav-bar-section"> <div class="nav-bar-section-title">COMPONENTS</div> </div> </div> ${this.resolvedSpec.components.map(component => component.subComponents.filter(s => s.expanded).length ? (0, _litElement.html)` <div class="nav-bar-tag" data-content-id="cmp--${component.name.toLowerCase()}" id="link-cmp--${component.name.toLowerCase()}" @click="${e => this.scrollToEventTarget(e, false)}"> ${component.name} </div> ${component.subComponents.filter(s => s.expanded).map(p => (0, _litElement.html)` <div class="nav-bar-path" data-content-id="cmp--${p.id}" id="link-cmp--${p.id}" @click="${e => this.scrollToEventTarget(e, false)}"> <span> ${p.name} </span> </div>`)}` : '')}` : ''} </nav>`} </nav> `;
 }
 /* eslint-enable indent */

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

@@ -101,6 +101,7 @@ function getTypeInfo(schema) {
     readOrWriteOnly: info.readOrWriteOnly,
     constraint: info.constraint,
     defaultValue: info.default,
+    example: info.example,
     allowedValues: info.allowedValues,
     pattern: info.pattern,
     schemaDescription: info.description,
@@ -364,19 +365,6 @@ function getExampleValuesFromSchemaRecursive(schema, config = {}) {
   const value = getSampleValueByType(schema, config.propertyName, config.skipExampleStrings);
   return [value];
 }
-
-function removeTitlesAndDescriptions(obj) {
-  if (typeof obj !== 'object' || obj === null) {
-    return;
-  }
-
-  delete obj['::TITLE'];
-  delete obj['::DESCRIPTION'];
-
-  for (const k in obj) {
-    removeTitlesAndDescriptions(obj[k]);
-  }
-}
 /**
  * For changing OpenAPI-Schema to an Object Notation,
  * This Object would further be an input to UI Components to generate an Object-Tree
@@ -708,9 +696,6 @@ function generateExample(examples, example, schema, rawMimeType, includeReadOnly
   }
 
   return samples.map((sample, sampleCounter) => {
-    const summary = sample['::TITLE'] || `Example ${sampleCounter + 1}`;
-    const description = sample['::DESCRIPTION'] || '';
-    removeTitlesAndDescriptions(sample);
     let exampleValue = '';
 
     if (mimeType.toLowerCase().includes('xml')) {
@@ -724,8 +709,8 @@ function generateExample(examples, example, schema, rawMimeType, includeReadOnly
 
     return {
       exampleId: `Example-${sampleCounter}`,
-      exampleSummary: summary,
-      exampleDescription: description,
+      exampleSummary: `Example ${sampleCounter + 1}`,
+      exampleDescription: '',
       exampleType: mimeType,
       exampleFormat: mimeType.toLowerCase().includes('xml') ? 'text' : outputType,
       exampleValue

package/package.json

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