rapidoc 9.1.6 → 9.2.0

package/src/styles/border-styles.js

@@ -1,4 +1,4 @@
-import { css } from 'lit-element';
+import { css } from 'lit';
 
 export default css`
 .border-top {

package/src/styles/custom-styles.js

@@ -1,4 +1,4 @@
-import { css } from 'lit-element';
+import { css } from 'lit';
 
 /*
 This file is reserved for any custom css that developers want to add to

package/src/styles/dialog-box-styles.js

@@ -1,4 +1,4 @@
-import { css } from 'lit-element';
+import { css } from 'lit';
 
 export default css`
   *, *:before, *:after { box-sizing: border-box; }

package/src/styles/endpoint-styles.js

@@ -1,4 +1,4 @@
-import { css } from 'lit-element';
+import { css } from 'lit';
 
 export default css`
 .only-large-screen { display:none; }

package/src/styles/flex-styles.js

@@ -1,4 +1,4 @@
-import { css } from 'lit-element';
+import { css } from 'lit';
 
 export default css`
 .row, .col{

package/src/styles/font-styles.js

@@ -1,4 +1,4 @@
-import { css } from 'lit-element';
+import { css } from 'lit';
 
 export default css`
   .hover-bg:hover{

package/src/styles/info-styles.js

@@ -1,4 +1,4 @@
-import { css } from 'lit-element';
+import { css } from 'lit';
 
 export default css`
 #api-info {

package/src/styles/input-styles.js

@@ -1,4 +1,4 @@
-import { css } from 'lit-element';
+import { css } from 'lit';
 
 /* eslint-disable max-len */
 export default css`

package/src/styles/nav-styles.js

@@ -1,4 +1,4 @@
-import { css } from 'lit-element';
+import { css } from 'lit';
 
 export default css`
 .nav-bar {

package/src/styles/prism-styles.js

@@ -1,4 +1,4 @@
-import { css } from 'lit-element';
+import { css } from 'lit';
 
 export default css`
 code[class*="language-"],

package/src/styles/schema-styles.js

@@ -1,4 +1,4 @@
-import { css } from 'lit-element';
+import { css } from 'lit';
 
 export default css`
 

package/src/styles/tab-styles.js

@@ -1,4 +1,4 @@
-import { css } from 'lit-element';
+import { css } from 'lit';
 
 export default css`
 .tab-panel {

package/src/styles/table-styles.js

@@ -1,4 +1,4 @@
-import { css } from 'lit-element';
+import { css } from 'lit';
 
 export default css`
 .m-table {

package/src/templates/advance-search-template.js

@@ -1,4 +1,4 @@
-import { html } from 'lit-element';
+import { html } from 'lit';
 import '~/components/dialog-box';
 
 /* eslint-disable indent */

package/src/templates/callback-template.js

@@ -1,4 +1,4 @@
-import { html } from 'lit-element';
+import { html } from 'lit';
 
 /* eslint-disable indent */
 export default function callbackTemplate(callbacks) {
@@ -38,7 +38,9 @@ export default function callbackTemplate(callbacks) {
                       allow-schema-description-expand-toggle = "${this.allowSchemaDescriptionExpandToggle}",
                       schema-hide-read-only = "${this.schemaHideReadOnly}"
                       fetch-credentials = "${this.fetchCredentials}"
-                      exportparts="btn btn-fill btn-outline btn-try"
+                      exportparts = "btn:btn, btn-fill:btn-fill, btn-outline:btn-outline, btn-try:btn-try, btn-clear:btn-clear, btn-clear-resp:btn-clear-resp,
+                        file-input:file-input, textbox:textbox, textbox-param:textbox-param, textarea:textarea, textarea-param:textarea-param, 
+                        anchor:anchor, anchor-param-example:anchor-param-example"
                     > </api-request>
 
                     <api-response
@@ -52,7 +54,7 @@ export default function callbackTemplate(callbacks) {
                       schema-expand-level = "${this.schemaExpandLevel}"
                       schema-description-expanded = "${this.schemaDescriptionExpanded}"
                       allow-schema-description-expand-toggle = "${this.allowSchemaDescriptionExpandToggle}"
-                      exportparts = "btn--resp btn-fill--resp btn-outline--resp"
+                      exportparts = "btn:btn, btn-response-status:btn-response-status, btn-selected-response-status:btn-selected-response-status, btn-fill:btn-fill, btn-copy:btn-copy"
                     > </api-response>
                   </div>
                 </div>  

package/src/templates/code-samples-template.js

@@ -1,5 +1,5 @@
-import { html } from 'lit-element';
-import { unsafeHTML } from 'lit-html/directives/unsafe-html';
+import { html } from 'lit';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js'; // eslint-disable-line import/extensions
 import Prism from 'prismjs';
 import { copyToClipboard } from '~/utils/common-utils';
 

package/src/templates/components-template.js

@@ -1,5 +1,5 @@
-import { html } from 'lit-element';
-import { unsafeHTML } from 'lit-html/directives/unsafe-html';
+import { html } from 'lit';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js'; // eslint-disable-line import/extensions
 import { marked } from 'marked';
 import { schemaInObjectNotation } from '~/utils/schema-utils';
 import '~/components/json-tree';

package/src/templates/endpoint-template.js

@@ -1,5 +1,5 @@
-import { html } from 'lit-element';
-import { unsafeHTML } from 'lit-html/directives/unsafe-html';
+import { html } from 'lit';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js'; // eslint-disable-line import/extensions
 import { marked } from 'marked';
 import '~/components/api-request';
 import '~/components/api-response';
@@ -137,7 +137,9 @@ function endpointBodyTemplate(path) {
           allow-schema-description-expand-toggle = "${this.allowSchemaDescriptionExpandToggle}"
           schema-hide-read-only = "${this.schemaHideReadOnly}"
           fetch-credentials = "${this.fetchCredentials}"
-          exportparts="btn btn-fill btn-outline btn-try"
+          exportparts = "btn:btn, btn-fill:btn-fill, btn-outline:btn-outline, btn-try:btn-try, btn-clear:btn-clear, btn-clear-resp:btn-clear-resp,
+            file-input:file-input, textbox:textbox, textbox-param:textbox-param, textarea:textarea, textarea-param:textarea-param, 
+            anchor:anchor, anchor-param-example:anchor-param-example"
         > </api-request>
 
           ${path.callbacks ? callbackTemplate.call(this, path.callbacks) : ''}
@@ -155,7 +157,8 @@ function endpointBodyTemplate(path) {
         allow-schema-description-expand-toggle = "${this.allowSchemaDescriptionExpandToggle}"
         schema-hide-write-only = "${this.schemaHideWriteOnly}"
         selected-status = "${Object.keys(path.responses || {})[0] || ''}"
-        exportparts = "btn--resp btn-fill--resp btn-outline--resp"
+        exportparts = 
+        "btn:btn, btn-fill:btn-fill, btn-outline:btn-outline, btn-try:btn-try, file-input:file-input, textbox:textbox, textbox-param:textbox-param, textarea:textarea, textarea-param:textarea-param, anchor:anchor, anchor-param-example:anchor-param-example, btn-clear-resp:btn-clear-resp"
       > </api-response>
     </div>
   </div>`;

package/src/templates/expanded-endpoint-template.js

@@ -1,5 +1,5 @@
-import { html } from 'lit-element';
-import { unsafeHTML } from 'lit-html/directives/unsafe-html';
+import { html } from 'lit';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js'; // eslint-disable-line import/extensions
 import { marked } from 'marked';
 import { rapidocApiKey } from '~/utils/common-utils';
 import { pathSecurityTemplate } from '~/templates/security-scheme-template';
@@ -89,7 +89,9 @@ export function expandedEndpointBodyTemplate(path, tagName = '') {
         allow-schema-description-expand-toggle = "${this.allowSchemaDescriptionExpandToggle}"
         schema-hide-read-only = "${this.schemaHideReadOnly}"
         fetch-credentials = "${this.fetchCredentials}"
-        exportparts = "btn btn-fill btn-outline btn-try"
+        exportparts = "btn:btn, btn-fill:btn-fill, btn-outline:btn-outline, btn-try:btn-try, btn-clear:btn-clear, btn-clear-resp:btn-clear-resp,
+          file-input:file-input, textbox:textbox, textbox-param:textbox-param, textarea:textarea, textarea-param:textarea-param, 
+          anchor:anchor, anchor-param-example:anchor-param-example"
       > </api-request>
 
       ${path.callbacks ? callbackTemplate.call(this, path.callbacks) : ''}
@@ -106,7 +108,7 @@ export function expandedEndpointBodyTemplate(path, tagName = '') {
         allow-schema-description-expand-toggle = "${this.allowSchemaDescriptionExpandToggle}"
         schema-hide-write-only = "${this.schemaHideWriteOnly}"
         selected-status = "${Object.keys(path.responses || {})[0] || ''}"
-        exportparts = "btn--resp btn-fill--resp btn-outline--resp"
+        exportparts = "btn:btn, btn-response-status:btn-response-status, btn-selected-response-status:btn-selected-response-status, btn-fill:btn-fill, btn-copy:btn-copy"
       > </api-response>
     </div>
   </div>

package/src/templates/focused-endpoint-template.js

@@ -1,5 +1,5 @@
-import { html } from 'lit-element';
-import { unsafeHTML } from 'lit-html/directives/unsafe-html';
+import { html } from 'lit';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js'; // eslint-disable-line import/extensions
 import { marked } from 'marked';
 import { expandedEndpointBodyTemplate } from '~/templates/expanded-endpoint-template';
 import '~/components/api-request';

package/src/templates/header-template.js

@@ -1,4 +1,4 @@
-import { html } from 'lit-element';
+import { html } from 'lit';
 import logoTemplate from '~/templates/logo-template';
 
 /* eslint-disable indent */

package/src/templates/json-schema-viewer-template.js

@@ -1,6 +1,6 @@
-import { html } from 'lit-element';
+import { html } from 'lit';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js'; // eslint-disable-line import/extensions
 import { marked } from 'marked';
-import { unsafeHTML } from 'lit-html/directives/unsafe-html';
 
 // Templates
 import overviewTemplate from '~/templates/overview-template';

package/src/templates/logo-template.js

@@ -1,4 +1,4 @@
-import { html } from 'lit-element';
+import { html } from 'lit';
 
 /* eslint-disable indent */
 export default function logoTemplate(style) {

package/src/templates/main-body-template.js

@@ -1,4 +1,4 @@
-import { html } from 'lit-element';
+import { html } from 'lit';
 
 // Templates
 import expandedEndpointTemplate from '~/templates/expanded-endpoint-template';

package/src/templates/navbar-template.js

@@ -1,4 +1,4 @@
-import { html } from 'lit-element';
+import { html } from 'lit';
 import { marked } from 'marked';
 import { pathIsInSearch } from '~/utils/common-utils';
 

package/src/templates/overview-template.js

@@ -1,5 +1,5 @@
-import { html } from 'lit-element';
-import { unsafeHTML } from 'lit-html/directives/unsafe-html';
+import { html } from 'lit';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js'; // eslint-disable-line import/extensions
 import { marked } from 'marked';
 import { downloadResource, viewResource } from '~/utils/common-utils';
 

package/src/templates/security-scheme-template.js

@@ -1,6 +1,6 @@
 /* eslint-disable arrow-body-style */
-import { html } from 'lit-element';
-import { unsafeHTML } from 'lit-html/directives/unsafe-html';
+import { html } from 'lit';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js'; // eslint-disable-line import/extensions
 import { marked } from 'marked';
 
 const codeVerifier = '731DB1C3F7EA533B85E29492D26AA-1234567890-1234567890';
@@ -252,8 +252,8 @@ async function onInvokeOAuthFlow(securitySchemeId, flowType, authUrl, tokenUrl,
 
 /* eslint-disable indent */
 
-function oAuthFlowTemplate(flowName, clientId, clientSecret, securitySchemeId, authFlow) {
-  let { authorizationUrl, tokenUrl, refreshUrl } = authFlow.authorizationUrl;
+function oAuthFlowTemplate(flowName, clientId, clientSecret, securitySchemeId, authFlow, defaultScopes = []) {
+  let { authorizationUrl, tokenUrl, refreshUrl } = authFlow;
   const isUrlAbsolute = (url) => (url.indexOf('://') > 0 || url.indexOf('//') === 0);
   if (refreshUrl && !isUrlAbsolute(refreshUrl)) {
     refreshUrl = `${this.selectedServer.computedUrl}/${refreshUrl.replace(/^\//, '')}`;
@@ -277,8 +277,8 @@ function oAuthFlowTemplate(flowName, clientId, clientSecret, securitySchemeId, a
     flowNameDisplay = flowName;
   }
   return html`
-    <div class="oauth-flow ${flowName}" style="padding: 12px 0; margin-bottom:12px;"> 
-      <div class="tiny-title upper" style="margin-bottom:8px;">${flowNameDisplay}</div> 
+    <div class="oauth-flow ${flowName}" style="padding: 12px 0; margin-bottom:12px;">
+      <div class="tiny-title upper" style="margin-bottom:8px;">${flowNameDisplay}</div>
       ${authorizationUrl
         ? html`<div style="margin-bottom:5px"><span style="width:75px; display: inline-block;">Auth URL</span> <span class="mono-font"> ${authorizationUrl} </span></div>`
         : ''
@@ -299,7 +299,7 @@ function oAuthFlowTemplate(flowName, clientId, clientSecret, securitySchemeId, a
               <div class= "oauth-scopes" part="section-auth-scopes" style = "width:100%; display:flex; flex-direction:column; flex-wrap:wrap; margin:0 0 10px 24px">
                 ${Object.entries(authFlow.scopes).map((scopeAndDescr, index) => html`
                   <div class="m-checkbox" style="display:inline-flex; align-items:center">
-                    <input type="checkbox" part="checkbox checkbox-auth-scope" class="scope-checkbox" id="${securitySchemeId}${flowName}${index}" value="${scopeAndDescr[0]}">
+                    <input type="checkbox" part="checkbox checkbox-auth-scope" class="scope-checkbox" id="${securitySchemeId}${flowName}${index}" ?checked="${defaultScopes.includes(scopeAndDescr[0])}" value="${scopeAndDescr[0]}">
                     <label for="${securitySchemeId}${flowName}${index}" style="margin-left:5px; cursor:pointer">
                       <span class="mono-font">${scopeAndDescr[0]}</span>
                         ${scopeAndDescr[0] !== scopeAndDescr[1] ? ` - ${scopeAndDescr[1] || ''}` : ''}
@@ -317,16 +317,16 @@ function oAuthFlowTemplate(flowName, clientId, clientSecret, securitySchemeId, a
                 <input type="password" value = "" placeholder="password" spellcheck="false" class="oauth2 ${flowName} ${securitySchemeId} api-key-password" style = "margin:0 5px;" part="textbox textbox-password">
               </div>`
             : ''
-          }  
+          }
           <div>
             ${flowName === 'authorizationCode'
               ? html`
                 <div style="margin: 16px 0 4px">
-                  <input type="checkbox" part="checkbox checkbox-auth-scope" id="${securitySchemeId}-pkce" checked> 
+                  <input type="checkbox" part="checkbox checkbox-auth-scope" id="${securitySchemeId}-pkce" checked>
                   <label for="${securitySchemeId}-pkce" style="margin:0 16px 0 4px; line-height:24px; cursor:pointer">
                    Send Proof Key for Code Exchange (PKCE)
                   </label>
-                </div>  
+                </div>
               `
               : ''
             }
@@ -337,8 +337,8 @@ function oAuthFlowTemplate(flowName, clientId, clientSecret, securitySchemeId, a
                 ${flowName === 'authorizationCode' || flowName === 'clientCredentials' || flowName === 'password'
                   ? html`
                     <select style="margin-right:5px;" class="${flowName} ${securitySchemeId} oauth-send-client-secret-in">
-                      <option value = 'header' selected> Authorization Header </option> 
-                      <option value = 'request-body'> Request Body </option> 
+                      <option value = 'header' selected> Authorization Header </option>
+                      <option value = 'request-body'> Request Body </option>
                     </select>`
                   : ''
                 }`
@@ -356,7 +356,7 @@ function oAuthFlowTemplate(flowName, clientId, clientSecret, securitySchemeId, a
           `
         : ''
       }
-    </div>  
+    </div>
   `;
 }
 
@@ -424,14 +424,14 @@ export default function securitySchemeTemplate() {
                         ? html`Send <code>${v.name}</code> in <code>${v.in}</code>`
                         : html`Send <code>Authorization</code> in <code>header</code> containing the word <code>Bearer</code> followed by a space and a Token String.`
                       }
-                    </div>  
+                    </div>
                     <div style="max-height:28px;">
                       ${v.in !== 'cookie'
                         ? html`
                           <input type = "text" value = "${v.value}" class="${v.type} ${v.securitySchemeId} api-key-input" placeholder = "api-token" spellcheck = "false">
                           <button class="m-btn thin-border" style = "margin-left:5px;"
                             part = "btn btn-outline"
-                            @click="${(e) => { onApiKeyChange.call(this, v.securitySchemeId, e); }}"> 
+                            @click="${(e) => { onApiKeyChange.call(this, v.securitySchemeId, e); }}">
                             ${v.finalKeyValue ? 'UPDATE' : 'SET'}
                           </button>`
                         : html`<span class="gray-text" style="font-size::var(--font-size-small)"> cookies cannot be set from here</span>`
@@ -443,14 +443,14 @@ export default function securitySchemeTemplate() {
                   ? html`
                     <div style="margin-bottom:5px">
                       Send <code>Authorization</code> in <code>header</code> containing the word <code>Basic</code> followed by a space and a base64 encoded string of <code>username:password</code>.
-                    </div>  
+                    </div>
                     <div>
                       <input type="text" value = "${v.user}" placeholder="username" spellcheck="false" class="${v.type} ${v.securitySchemeId} api-key-user" style="width:100px">
                       <input type="password" value = "${v.password}" placeholder="password" spellcheck="false" class="${v.type} ${v.securitySchemeId} api-key-password" style = "width:100px; margin:0 5px;">
                       <button class="m-btn thin-border"
                         @click="${(e) => { onApiKeyChange.call(this, v.securitySchemeId, e); }}"
                         part = "btn btn-outline"
-                      > 
+                      >
                         ${v.finalKeyValue ? 'UPDATE' : 'SET'}
                       </button>
                     </div>`
@@ -462,12 +462,12 @@ export default function securitySchemeTemplate() {
               ? html`
                 <tr>
                   <td style="border:none; padding-left:48px">
-                    ${Object.keys(v.flows).map((f) => oAuthFlowTemplate.call(this, f, v['x-client-id'], v['x-client-secret'], v.securitySchemeId, v.flows[f]))} 
+                    ${Object.keys(v.flows).map((f) => oAuthFlowTemplate.call(this, f, v['x-client-id'], v['x-client-secret'], v.securitySchemeId, v.flows[f], v['x-default-scopes']))}
                   </td>
-                </tr>    
+                </tr>
                 `
               : ''
-            }    
+            }
           `)}
         </table>`
       : ''
@@ -507,7 +507,7 @@ export function pathSecurityTemplate(pathSecurity) {
           </g>
         </svg>
           ${orSecurityKeys1.map((orSecurityItem1, i) => html`
-          
+
           ${orSecurityItem1.securityTypes
             ? html`
               ${i !== 0 ? html`<div style="padding:3px 4px;"> OR </div>` : ''}
@@ -522,11 +522,11 @@ export function pathSecurityTemplate(pathSecurity) {
                       const scopeHtml = html`${andSecurityItem.scopes !== ''
                         ? html`
                           <div>
-                            <b>Required scopes:</b> 
-                            <br/> 
-                            <div style="margin-left:8px">  
+                            <b>Required scopes:</b>
+                            <br/>
+                            <div style="margin-left:8px">
                               ${andSecurityItem.scopes.split(',').map((scope, cnt) => html`${cnt === 0 ? '' : '┃'}<span>${scope}</span>`)}
-                            </div>  
+                            </div>
                           </div>`
                         : ''
                       }`;
@@ -545,19 +545,19 @@ export function pathSecurityTemplate(pathSecurity) {
                         : andSecurityItem.type === 'http'
                           ? html`
                             <div>
-                              ${orSecurityItem1.securityDefs.length > 1 ? html`<b>${j + 1}.</b> &nbsp;` : html`Requires`} 
+                              ${orSecurityItem1.securityDefs.length > 1 ? html`<b>${j + 1}.</b> &nbsp;` : html`Requires`}
                               ${andSecurityItem.scheme === 'basic' ? 'Base 64 encoded username:password' : 'Bearer Token'} in <b>Authorization header</b>
                               ${scopeHtml}
                             </div>`
                           : html`
                             <div>
-                              ${orSecurityItem1.securityDefs.length > 1 ? html`<b>${j + 1}.</b> &nbsp;` : html`Requires`} 
+                              ${orSecurityItem1.securityDefs.length > 1 ? html`<b>${j + 1}.</b> &nbsp;` : html`Requires`}
                               Token in <b>${andSecurityItem.name} ${andSecurityItem.in}</b>
                               ${scopeHtml}
                             </div>`
                       }`;
                     })}
-                  </div>  
+                  </div>
                 </div>
               </div>
             `

package/src/templates/server-template.js

@@ -1,6 +1,6 @@
-import { html } from 'lit-element';
+import { html } from 'lit';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js'; // eslint-disable-line import/extensions
 import { marked } from 'marked';
-import { unsafeHTML } from 'lit-html/directives/unsafe-html';
 
 export function setApiServer(serverUrl) {
   const serverObj = this.resolvedSpec?.servers.find((s) => s.url === serverUrl);

package/src/utils/schema-utils.js

@@ -32,7 +32,7 @@ export function getTypeInfo(schema) {
     readOrWriteOnly: (schema.readOnly ? '🆁' : schema.writeOnly ? '🆆' : ''),
     deprecated: schema.deprecated ? '❌' : '',
     examples: schema.examples || schema.example,
-    default: schema.default || '',
+    default: schema.default != null ? `${schema.default}` : '',
     description: schema.description || '',
     constrain: '',
     allowedValues: '',
@@ -479,6 +479,32 @@ export function schemaToSampleObj(schema, config = { }) {
   return obj;
 }
 
+function generateMarkdownForArrayAndObjectDescription(schema, level = 0) {
+  let markdown = '';
+  if (schema.title) {
+    markdown = `**${schema.title}:** `;
+  }
+  if (schema.minItems) {
+    markdown = `${markdown} **Min Items:** ${schema.minItems}`;
+  }
+  if (schema.maxItems) {
+    markdown = `${markdown} **Max Items:** ${schema.maxItems}`;
+  }
+  if (schema.description) {
+    markdown = `${markdown} ${schema.description}`;
+  }
+  if (level > 0 && schema.items?.description) {
+    let itemsMarkdown = '';
+    if (schema.items.minProperties) {
+      itemsMarkdown = `**Min Properties:** ${schema.items.minProperties}`;
+    }
+    if (schema.items.maxProperties) {
+      itemsMarkdown = `${itemsMarkdown} **Max Properties:** ${schema.items.maxProperties}`;
+    }
+    markdown = `${markdown} ⮕ ${itemsMarkdown} [ ${schema.items.description} ] `;
+  }
+  return markdown;
+}
 /**
  * For changing OpenAPI-Schema to an Object Notation,
  * This Object would further be an input to UI Components to generate an Object-Tree
@@ -597,6 +623,7 @@ export function schemaInObjectNotation(schema, obj, level = 0, suffix = '') {
         } else if (v === 'object') {
           // If object type iterate all the properties and create an object-type-option
           const objTypeOption = {
+            '::title': schema.title || '',
             '::description': schema.description || '',
             '::type': 'object',
             '::deprecated': schema.deprecated || false,
@@ -611,6 +638,7 @@ export function schemaInObjectNotation(schema, obj, level = 0, suffix = '') {
           multiTypeOptions[`::OPTION~${i + 1}`] = objTypeOption;
         } else if (v === 'array') {
           multiTypeOptions[`::OPTION~${i + 1}`] = {
+            '::title': schema.title || '',
             '::description': schema.description || '',
             '::type': 'array',
             '::props': schemaInObjectNotation(schema.items, {}, (level + 1)),
@@ -620,8 +648,9 @@ export function schemaInObjectNotation(schema, obj, level = 0, suffix = '') {
       multiTypeOptions[`::OPTION~${complexTypes.length + 1}`] = multiPrimitiveTypes?.html || '';
       obj['::ONE~OF'] = multiTypeOptions;
     }
-  } else if (schema.type === 'object' || schema.properties) {
-    obj['::description'] = schema.description || '';
+  } else if (schema.type === 'object' || schema.properties) { // If Object
+    obj['::title'] = schema.title || '';
+    obj['::description'] = generateMarkdownForArrayAndObjectDescription(schema, level);
     obj['::type'] = 'object';
     obj['::deprecated'] = schema.deprecated || false;
     obj['::readwrite'] = schema.readOnly ? 'readonly' : schema.writeOnly ? 'writeonly' : '';
@@ -636,11 +665,8 @@ export function schemaInObjectNotation(schema, obj, level = 0, suffix = '') {
       obj['<any-key>'] = schemaInObjectNotation(schema.additionalProperties, {});
     }
   } else if (schema.type === 'array' || schema.items) { // If Array
-    obj['::description'] = schema.description
-      ? schema.description
-      : schema.items?.description
-        ? `array&lt;${schema.items.description}&gt;`
-        : '';
+    obj['::title'] = schema.title || '';
+    obj['::description'] = generateMarkdownForArrayAndObjectDescription(schema, level);
     obj['::type'] = 'array';
     obj['::deprecated'] = schema.deprecated || false;
     obj['::readwrite'] = schema.readOnly ? 'readonly' : schema.writeOnly ? 'writeonly' : '';
@@ -787,6 +813,15 @@ export function generateExample(schema, mimeType, examples = '', example = '', i
             exampleValue,
           });
         }
+      } else if (mimeType?.toLowerCase().includes('jose')) {
+        finalExamples.push({
+          exampleId: 'Example',
+          exampleSummary: 'Base64 Encoded',
+          exampleDescription: '',
+          exampleType: mimeType,
+          exampleValue: schema.pattern || 'bXJpbg==',
+          exampleFormat: 'text',
+        });
       } else {
         finalExamples.push({
           exampleId: 'Example',

package/src/utils/theme.js

@@ -1,4 +1,4 @@
-import { html } from 'lit-element';
+import { html } from 'lit';
 import ColorUtils from '~/utils/color-utils';
 /* Generates an schema object containing type and constraint info */
 export default function setTheme(baseTheme, theme = {}) {