openapi-explorer 0.9.387 → 0.9.389

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

@@ -5,27 +5,34 @@ import xmlFormatter from './xml/xml'; // When the type is not known for a proper
 const IS_MISSING_TYPE_INFO_TYPE = '';
 /* Generates an schema object containing type and constraint info */
 
-export function getTypeInfo(schema) {
-  var _schema$items;
+export function getTypeInfo(schema, options = {
+  includeNulls: false
+}) {
+  var _schema$items, _schema$const;
 
   if (!schema) {
     return undefined;
   }
 
-  let dataType = '';
-  let constraint = '';
+  let dataType = IS_MISSING_TYPE_INFO_TYPE;
 
   if (schema.circularReference) {
     dataType = `{recursive: ${schema.circularReference.name}} `;
   } else if (schema.type) {
     const arraySchema = Array.isArray(schema.type) ? schema.type : typeof schema.type === 'string' ? schema.type.split('┃') : schema.type;
-    dataType = Array.isArray(arraySchema) ? arraySchema.filter(s => s !== 'null').join('┃') : schema.type;
+    dataType = Array.isArray(arraySchema) ? arraySchema.filter(s => s !== 'null' || options.includeNulls).join('┃') : schema.type;
 
-    if (schema.format || schema.enum) {
-      dataType = dataType.replace('string', schema.enum ? 'enum' : schema.format);
+    if (schema.format || schema.enum || schema.const) {
+      dataType = dataType.replace('string', schema.enum && 'enum' || schema.const && 'const' || schema.format);
+    }
+
+    if (schema.nullable && options.includeNulls) {
+      dataType += '┃null';
+    }
+
+    if (dataType.includes('┃null') && schema.format) {
+      schema.format += '┃null';
     }
-  } else {
-    dataType = IS_MISSING_TYPE_INFO_TYPE;
   }
 
   const info = {
@@ -39,21 +46,18 @@ export function getTypeInfo(schema) {
     title: schema.title || '',
     description: schema.description || '',
     constraint: '',
-    allowedValues: '',
-    arrayType: '',
-    html: ''
-  }; // Set Allowed Values
-
-  info.allowedValues = Array.isArray(schema.enum) ? schema.enum.join('┃') : '';
+    allowedValues: (_schema$const = schema.const) !== null && _schema$const !== void 0 ? _schema$const : Array.isArray(schema.enum) ? schema.enum.join('┃') : '',
+    arrayType: ''
+  };
 
   if (dataType === 'array' && schema.items) {
-    var _schema$items$default;
+    var _schema$items$default, _schema$const2;
 
     const arrayItemType = schema.items.type;
     const arrayItemDefault = (_schema$items$default = schema.items.default) !== null && _schema$items$default !== void 0 ? _schema$items$default : '';
     info.arrayType = `${schema.type} of ${Array.isArray(arrayItemType) ? arrayItemType.join('') : arrayItemType}`;
     info.default = arrayItemDefault;
-    info.allowedValues = Array.isArray(schema.items.enum) ? schema.items.enum.join('┃') : '';
+    info.allowedValues = (_schema$const2 = schema.const) !== null && _schema$const2 !== void 0 ? _schema$const2 : Array.isArray(schema.items.enum) ? schema.items.enum.join('┃') : '';
   }
 
   if (dataType.match(/integer|number/g)) {
@@ -65,25 +69,24 @@ export function getTypeInfo(schema) {
     const rightBound = schema.maximum !== undefined ? ']' : ')';
 
     if (typeof minimum === 'number' || typeof maximum === 'number') {
-      constraint = `Range: ${leftBound}${minimum !== null && minimum !== void 0 ? minimum : ''},${maximum !== null && maximum !== void 0 ? maximum : ''}${rightBound}`;
+      info.constraint = `Range: ${leftBound}${minimum !== null && minimum !== void 0 ? minimum : ''},${maximum !== null && maximum !== void 0 ? maximum : ''}${rightBound}`;
     }
 
     if (schema.multipleOf !== undefined) {
-      constraint += `${constraint ? ', ' : ''}Multiples: ${schema.multipleOf}`;
+      info.constraint += `${info.constraint ? ', ' : ''}Multiples: ${schema.multipleOf}`;
     }
   }
 
   if (dataType.match(/string/g)) {
     if (schema.minLength !== undefined && schema.maxLength !== undefined) {
-      constraint += `Min length: ${schema.minLength}, Max length: ${schema.maxLength}`;
+      info.constraint += `Min length: ${schema.minLength}, Max length: ${schema.maxLength}`;
     } else if (schema.minLength !== undefined) {
-      constraint += `Min length: ${schema.minLength}`;
+      info.constraint += `Min length: ${schema.minLength}`;
     } else if (schema.maxLength !== undefined) {
-      constraint += `Max length: ${schema.maxLength}`;
+      info.constraint += `Max length: ${schema.maxLength}`;
     }
   }
 
-  info.constraint = constraint;
   info.html = JSON.stringify({
     type: info.type,
     format: info.format,
@@ -160,6 +163,10 @@ export function getSampleValueByType(schemaObj, fallbackPropertyName, skipExampl
   }
 
   if (typeValue.match(/^string/g)) {
+    if (schemaObj.const) {
+      return schemaObj.const;
+    }
+
     if (schemaObj.enum) {
       return schemaObj.enum[0];
     }
@@ -356,13 +363,13 @@ function getExampleValuesFromSchemaRecursive(schema, config = {}) {
  * For changing OpenAPI-Schema to an Object Notation,
  * This Object would further be an input to UI Components to generate an Object-Tree
  * @param {object} schema - Schema object from OpenAPI spec
- * @param {object} obj - recursively pass this object to generate object notation
+ * @param {object} options - recursively pass this object to generate object notation
  * @param {number} level - recursion level
  * @param {string} suffix - used for suffixing property names to avoid duplicate props during object composition
  */
 
 
-export function schemaInObjectNotation(rawSchema, _, level = 0, suffix = '') {
+export function schemaInObjectNotation(rawSchema, options, level = 0, suffix = '') {
   if (!rawSchema) {
     return undefined;
   }
@@ -380,18 +387,18 @@ export function schemaInObjectNotation(rawSchema, _, level = 0, suffix = '') {
     allOf.map((v, i) => {
       if (v.type === 'object' || v.properties || v.allOf || v.anyOf || v.oneOf) {
         const propSuffix = (v.anyOf || v.oneOf) && i > 0 ? i : '';
-        const partialObj = schemaInObjectNotation(v, {}, level + 1, propSuffix);
+        const partialObj = schemaInObjectNotation(v, options, level + 1, propSuffix);
         Object.assign(objWithAllProps, partialObj);
       } else if (v.type === 'array' || v.items) {
-        const partialObj = schemaInObjectNotation(v, {}, level + 1);
+        const partialObj = schemaInObjectNotation(v, options, level + 1);
         Object.assign(objWithAllProps, partialObj);
       } else if (v.type) {
         const prop = `prop${Object.keys(objWithAllProps).length}`;
-        const typeObj = getTypeInfo(v);
+        const typeObj = getTypeInfo(v, options);
         objWithAllProps[prop] = `${typeObj.html}`;
       }
     });
-    const obj = schemaInObjectNotation(schema, {}, 0);
+    const obj = schemaInObjectNotation(schema, options, 0);
     return Object.assign({}, objWithAllProps, typeof obj === 'object' && !Array.isArray(obj) ? obj : {});
   } else if (anyOf || oneOf) {
     const objWithAnyOfProps = {};
@@ -401,7 +408,7 @@ export function schemaInObjectNotation(rawSchema, _, level = 0, suffix = '') {
       if (v.type === 'object' || v.properties || v.allOf || v.anyOf || v.oneOf) {
         var _partialObj$Flags, _partialObj$Flags2;
 
-        const partialObj = schemaInObjectNotation(v, {});
+        const partialObj = schemaInObjectNotation(v, options);
         objWithAnyOfProps[`::OPTION~${index + 1}${v.title ? `~${v.title}` : ''}`] = partialObj;
         objWithAnyOfProps['::type'] = 'xxx-of-option';
         readOnly = readOnly && ((_partialObj$Flags = partialObj['::flags']) === null || _partialObj$Flags === void 0 ? void 0 : _partialObj$Flags['🆁']);
@@ -410,7 +417,7 @@ export function schemaInObjectNotation(rawSchema, _, level = 0, suffix = '') {
         var _partialObj$Flags3, _partialObj$Flags4;
 
         // This else-if block never seems to get executed
-        const partialObj = schemaInObjectNotation(v, {});
+        const partialObj = schemaInObjectNotation(v, options);
         objWithAnyOfProps[`::OPTION~${index + 1}${v.title ? `~${v.title}` : ''}`] = partialObj;
         objWithAnyOfProps['::type'] = 'xxx-of-array';
         readOnly = readOnly && ((_partialObj$Flags3 = partialObj['::flags']) === null || _partialObj$Flags3 === void 0 ? void 0 : _partialObj$Flags3['🆁']);
@@ -419,13 +426,13 @@ export function schemaInObjectNotation(rawSchema, _, level = 0, suffix = '') {
         var _objWithAnyOfProps$, _objWithAnyOfProps$2;
 
         const prop = `::OPTION~${index + 1}${v.title ? `~${v.title}` : ''}`;
-        objWithAnyOfProps[prop] = `${getTypeInfo(v).html}`;
+        objWithAnyOfProps[prop] = `${getTypeInfo(v, options).html}`;
         objWithAnyOfProps['::type'] = 'xxx-of-option';
         readOnly = readOnly && ((_objWithAnyOfProps$ = objWithAnyOfProps['::flags']) === null || _objWithAnyOfProps$ === void 0 ? void 0 : _objWithAnyOfProps$['🆁']);
         writeOnly = writeOnly && ((_objWithAnyOfProps$2 = objWithAnyOfProps['::flags']) === null || _objWithAnyOfProps$2 === void 0 ? void 0 : _objWithAnyOfProps$2['🆆']);
       }
     });
-    const obj = schemaInObjectNotation(schema, {}, 0);
+    const obj = schemaInObjectNotation(schema, options, 0);
     const resultObj = typeof obj === 'object' && !Array.isArray(obj) ? obj : {};
     resultObj[anyOf ? `::ANY~OF ${suffix}` : `::ONE~OF ${suffix}`] = objWithAnyOfProps;
     resultObj['::type'] = 'xxx-of';
@@ -459,7 +466,7 @@ export function schemaInObjectNotation(rawSchema, _, level = 0, suffix = '') {
 
     if (primitiveType.length > 0) {
       subSchema.type = primitiveType.join('┃');
-      multiPrimitiveTypes = getTypeInfo(subSchema);
+      multiPrimitiveTypes = getTypeInfo(subSchema, options);
 
       if (complexTypes.length === 0) {
         return `${multiPrimitiveTypes && multiPrimitiveTypes.html || ''}`;
@@ -477,7 +484,7 @@ export function schemaInObjectNotation(rawSchema, _, level = 0, suffix = '') {
           multiTypeOptions[`::OPTION~${i + 1}`] = 'NULL~|~~|~~|~~|~~|~~|~~|~~|~';
         } else if ('integer, number, string, boolean,'.includes(`${v},`)) {
           subSchema.type = Array.isArray(v) ? v.join('┃') : v;
-          const primitiveTypeInfo = getTypeInfo(subSchema);
+          const primitiveTypeInfo = getTypeInfo(subSchema, options);
           multiTypeOptions[`::OPTION~${i + 1}`] = primitiveTypeInfo.html;
         } else if (v === 'object') {
           // If object type iterate all the properties and create an object-type-option
@@ -494,9 +501,9 @@ export function schemaInObjectNotation(rawSchema, _, level = 0, suffix = '') {
 
           for (const key in schema.properties) {
             if (schema.required && schema.required.includes(key)) {
-              objTypeOption[`${key}*`] = schemaInObjectNotation(schema.properties[key], {}, level + 1);
+              objTypeOption[`${key}*`] = schemaInObjectNotation(schema.properties[key], options, level + 1);
             } else {
-              objTypeOption[key] = schemaInObjectNotation(schema.properties[key], {}, level + 1);
+              objTypeOption[key] = schemaInObjectNotation(schema.properties[key], options, level + 1);
             }
           }
 
@@ -513,7 +520,7 @@ export function schemaInObjectNotation(rawSchema, _, level = 0, suffix = '') {
             '::props': schemaInObjectNotation(Object.assign({
               readOnly: schema.readOnly,
               writeOnly: schema.writeOnly
-            }, schema.items), {}, level + 1)
+            }, schema.items), options, level + 1)
           };
         }
       });
@@ -535,14 +542,14 @@ export function schemaInObjectNotation(rawSchema, _, level = 0, suffix = '') {
 
     for (const key in schema.properties) {
       if (schema.required && schema.required.includes(key)) {
-        obj[`${key}*`] = schemaInObjectNotation(schema.properties[key], {}, level + 1);
+        obj[`${key}*`] = schemaInObjectNotation(schema.properties[key], options, level + 1);
       } else {
-        obj[key] = schemaInObjectNotation(schema.properties[key], {}, level + 1);
+        obj[key] = schemaInObjectNotation(schema.properties[key], options, level + 1);
       }
     }
 
     if (schema.additionalProperties) {
-      obj['<any-key>'] = schemaInObjectNotation(schema.additionalProperties, {});
+      obj['<any-key>'] = schemaInObjectNotation(schema.additionalProperties, options);
     }
 
     return obj;
@@ -563,7 +570,7 @@ export function schemaInObjectNotation(rawSchema, _, level = 0, suffix = '') {
       deprecated: schema.deprecated,
       readOnly: schema.readOnly,
       writeOnly: schema.writeOnly
-    }, schema.items), {}, level + 1);
+    }, schema.items), options, level + 1);
 
     if ((_schema$items2 = schema.items) !== null && _schema$items2 !== void 0 && _schema$items2.items) {
       obj['::array-type'] = schema.items.items.type;
@@ -572,7 +579,7 @@ export function schemaInObjectNotation(rawSchema, _, level = 0, suffix = '') {
     return obj;
   }
 
-  const typeObj = getTypeInfo(schema);
+  const typeObj = getTypeInfo(schema, options);
   return `${(typeObj === null || typeObj === void 0 ? void 0 : typeObj.html) || ''}`;
 }
 /* Create Example object */

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

@@ -117,6 +117,15 @@ class ApiRequest extends _litElement.LitElement {
         type: String,
         attribute: 'fill-defaults'
       },
+      includeNulls: {
+        type: Boolean,
+        attribute: 'display-nulls',
+
+        converter(value) {
+          return value === 'true';
+        }
+
+      },
       allowTry: {
         type: String,
         attribute: 'enable-console'
@@ -217,7 +226,9 @@ class ApiRequest extends _litElement.LitElement {
         continue;
       }
 
-      const paramSchema = (0, _schemaUtils.getTypeInfo)(param.schema);
+      const paramSchema = (0, _schemaUtils.getTypeInfo)(param.schema, {
+        includeNulls: this.includeNulls
+      });
 
       if (!paramSchema) {
         continue;
@@ -237,7 +248,7 @@ class ApiRequest extends _litElement.LitElement {
         }
       }
 
-      tableRows.push((0, _litElement.html)` <tr> <td style="width:160px;min-width:50px"> <div class="param-name ${paramSchema.deprecated ? 'deprecated' : ''}"> ${param.name}${!paramSchema.deprecated && param.required ? (0, _litElement.html)`<span style="color:var(--red)">*</span>` : ''} </div> <div class="param-type"> ${paramSchema.type === 'array' ? `${paramSchema.arrayType}` : `${paramSchema.format ? paramSchema.format : paramSchema.type}`}${!paramSchema.deprecated && param.required ? (0, _litElement.html)`<span style="opacity:0">*</span>` : ''} </div> </td> ${this.allowTry === 'true' ? (0, _litElement.html)` <td style="min-width:160px"> ${paramSchema.type === 'array' ? (0, _litElement.html)` <tag-input class="request-param" style="width:100%" data-ptype="${paramType}" data-pname="${param.name}" data-default="${Array.isArray(defaultVal) ? defaultVal.join('~|~') : defaultVal}" data-param-serialize-style="${paramStyle}" data-param-serialize-explode="${paramExplode}" data-array="true" placeholder="${paramSchema.example || (Array.isArray(defaultVal) ? defaultVal[0] : defaultVal) || 'add-multiple ↩'}" .value="${Array.isArray(defaultVal) ? defaultVal : defaultVal.split(',')}"> </tag-input>` : paramSchema.type === 'object' ? (0, _litElement.html)` <textarea class="textarea request-param" part="textarea textarea-param" data-ptype="${paramType}-object" data-pname="${param.name}" data-default="${defaultVal}" data-param-serialize-style="${paramStyle}" data-param-serialize-explode="${paramExplode}" spellcheck="false" placeholder="${paramSchema.example || defaultVal || ''}" style="resize:vertical;width:100%;height:${'read focused'.includes(this.renderStyle) ? '180px' : '120px'}">${this.fillRequestWithDefault === 'true' ? defaultVal : ''}</textarea>` : (0, _litElement.html)` <input type="${paramSchema.format === 'password' ? 'password' : 'text'}" spellcheck="false" style="width:100%" placeholder="${paramSchema.example || defaultVal || ''}" class="request-param" part="textbox textbox-param" data-ptype="${paramType}" data-pname="${param.name}" data-default="${Array.isArray(defaultVal) ? defaultVal.join('~|~') : defaultVal}" data-array="false" @keyup="${this.requestParamFunction}" .value="${this.fillRequestWithDefault === 'true' ? defaultVal : ''}">`} </td>` : ''} ${this.renderStyle === 'focused' ? (0, _litElement.html)` <td> ${paramSchema.default || paramSchema.constraint || paramSchema.allowedValues || paramSchema.pattern ? (0, _litElement.html)` <div class="param-constraint"> ${paramSchema.constraint ? (0, _litElement.html)`<span style="font-weight:700">Constraints: </span>${paramSchema.constraint}<br>` : ''} ${paramSchema.pattern ? (0, _litElement.html)`<span style="font-weight:700">Pattern: </span>${truncateString(paramSchema.pattern, 60)}<br>` : ''} ${paramSchema.allowedValues && paramSchema.allowedValues.split('┃').map((v, i) => (0, _litElement.html)` ${i > 0 ? '|' : (0, _litElement.html)`<span style="font-weight:700">Allowed: </span>`} ${(0, _litElement.html)` <a part="anchor anchor-param-constraint" class="${this.allowTry === 'true' ? '' : 'inactive-link'}" data-type="${paramSchema.type === 'array' ? paramSchema.type : 'string'}" data-enum="${v.trim()}" @click="${e => {
+      tableRows.push((0, _litElement.html)` <tr> <td style="width:160px;min-width:50px"> <div class="param-name ${paramSchema.deprecated ? 'deprecated' : ''}"> ${param.name}${!paramSchema.deprecated && param.required ? (0, _litElement.html)`<span style="color:var(--red)">*</span>` : ''} </div> <div class="param-type"> ${paramSchema.type === 'array' ? `${paramSchema.arrayType}` : `${paramSchema.format ? paramSchema.format : paramSchema.type}`}${!paramSchema.deprecated && param.required ? (0, _litElement.html)`<span style="opacity:0">*</span>` : ''} </div> </td> ${this.allowTry === 'true' ? (0, _litElement.html)` <td style="min-width:160px"> ${paramSchema.type === 'array' ? (0, _litElement.html)` <tag-input class="request-param" style="width:100%" data-ptype="${paramType}" data-pname="${param.name}" data-default="${Array.isArray(defaultVal) ? defaultVal.join('~|~') : defaultVal}" data-param-serialize-style="${paramStyle}" data-param-serialize-explode="${paramExplode}" data-array="true" placeholder="${paramSchema.example || (Array.isArray(defaultVal) ? defaultVal[0] : defaultVal) || 'add-multiple ↩'}" .value="${Array.isArray(defaultVal) ? defaultVal : defaultVal.split(',')}"> </tag-input>` : paramSchema.type === 'object' ? (0, _litElement.html)` <textarea class="textarea request-param" part="textarea textarea-param" data-ptype="${paramType}-object" data-pname="${param.name}" data-default="${defaultVal}" data-param-serialize-style="${paramStyle}" data-param-serialize-explode="${paramExplode}" spellcheck="false" placeholder="${paramSchema.example || defaultVal || ''}" style="resize:vertical;width:100%;height:${'read focused'.includes(this.renderStyle) ? '180px' : '120px'}">${this.fillRequestWithDefault === 'true' ? defaultVal : ''}</textarea>` : (0, _litElement.html)` <input type="${paramSchema.format === 'password' ? 'password' : 'text'}" spellcheck="false" style="width:100%" placeholder="${paramSchema.example || defaultVal || ''}" class="request-param" part="textbox textbox-param" data-ptype="${paramType}" data-pname="${param.name}" data-default="${Array.isArray(defaultVal) ? defaultVal.join('~|~') : defaultVal}" data-array="false" @keyup="${this.requestParamFunction}" .value="${this.fillRequestWithDefault === 'true' ? defaultVal : ''}">`} </td>` : ''} ${this.renderStyle === 'focused' ? (0, _litElement.html)` <td> ${paramSchema.default || paramSchema.constraint || paramSchema.allowedValues || paramSchema.pattern ? (0, _litElement.html)` <div class="param-constraint"> ${paramSchema.constraint ? (0, _litElement.html)`<span style="font-weight:700">Constraints: </span>${paramSchema.constraint}<br>` : ''} ${paramSchema.pattern ? (0, _litElement.html)`<span style="font-weight:700">Pattern: </span>${truncateString(paramSchema.pattern, 60)}<br>` : ''} ${paramSchema.allowedValues && paramSchema.allowedValues.split('┃').map((v, i) => (0, _litElement.html)` ${i > 0 ? '|' : (0, _litElement.html)`<span style="font-weight:700">Allowed: </span>`} ${(0, _litElement.html)` <a part="anchor anchor-param-constraint" class="${this.allowTry === 'true' ? '' : 'inactive-link'}" data-type="${paramSchema.type === 'array' ? 'array' : 'string'}" data-enum="${v.trim()}" @click="${e => {
         const inputEl = e.target.closest('table').querySelector(`[data-pname="${param.name}"]`);
 
         if (inputEl) {
@@ -350,7 +361,9 @@ class ApiRequest extends _litElement.LitElement {
 
 
       if (reqBody.mimeType.includes('json') || reqBody.mimeType.includes('xml') || reqBody.mimeType.includes('text')) {
-        const schemaAsObj = (0, _schemaUtils.schemaInObjectNotation)(reqBody.schema, {});
+        const schemaAsObj = (0, _schemaUtils.schemaInObjectNotation)(reqBody.schema, {
+          includeNulls: this.includeNulls
+        });
 
         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-hide-read-only="${this.schemaHideReadOnly.includes(this.method)}" schema-hide-write-only="false"> </schema-table> `;
@@ -378,8 +391,12 @@ class ApiRequest extends _litElement.LitElement {
         }
 
         const fieldType = fieldSchema.type;
-        const formdataPartSchema = (0, _schemaUtils.schemaInObjectNotation)(fieldSchema, {});
-        const paramSchema = (0, _schemaUtils.getTypeInfo)(fieldSchema);
+        const formdataPartSchema = (0, _schemaUtils.schemaInObjectNotation)(fieldSchema, {
+          includeNulls: this.includeNulls
+        });
+        const paramSchema = (0, _schemaUtils.getTypeInfo)(fieldSchema, {
+          includeNulls: this.includeNulls
+        });
         const formdataPartExample = (0, _schemaUtils.generateExample)('', fieldSchema.example ? fieldSchema.example : '', fieldSchema, 'json', false, true, 'text', true);
         formDataTableRows.push((0, _litElement.html)` <tr> <td style="width:160px;min-width:100px"> <div class="param-name ${fieldSchema.deprecated ? 'deprecated' : ''}"> ${fieldName}${!fieldSchema.deprecated && (schema.required && schema.required.includes(fieldName) || fieldSchema.required) ? (0, _litElement.html)`<span style="color:var(--red)">*</span>` : ''} </div> <div class="param-type"> ${paramSchema.type === 'array' ? (0, _litElement.html)`[<span>${paramSchema.format || paramSchema.type}</span>]` : `${paramSchema.format || paramSchema.type}`} </div> </td> <td style="${fieldType === 'object' ? 'width:100%; padding:0;' : this.allowTry === 'true' ? '' : 'display:none;'} min-width:100px" colspan="${fieldType === 'object' ? 2 : 1}"> ${fieldType === 'array' ? fieldSchema.items && fieldSchema.items.format === 'binary' ? (0, _litElement.html)` <div class="file-input-container col" style="align-items:flex-end" @click="${e => this.onAddRemoveFileInput(e, fieldName, mimeType)}"> <div class="input-set row"> <input type="file" part="file-input" style="width:100%" data-pname="${fieldName}" data-ptype="${mimeType.includes('form-urlencode') ? 'form-urlencode' : 'form-data'}" data-array="false" data-file-array="true"> <button class="file-input-remove-btn"> &#x2715; </button> </div> <button class="m-btn primary file-input-add-btn" part="btn btn-fill" style="margin:2px 25px 0 0;padding:2px 6px">ADD</button> </div> ` : (0, _litElement.html)` <tag-input style="width:100%" data-ptype="${mimeType.includes('form-urlencode') ? 'form-urlencode' : 'form-data'}" data-pname="${fieldName}" data-default="${paramSchema.default || ''}" data-array="true" placeholder="${(Array.isArray(paramSchema.example) ? paramSchema.example[0] : paramSchema.example) || 'add-multiple ↩'}" .value="${paramSchema.default || ''}"> </tag-input> ` : (0, _litElement.html)` ${fieldType === 'object' ? (0, _litElement.html)` <div class="tab-panel row" style="min-height:300px;border-left:6px solid var(--light-border-color);align-items:stretch"> <div style="width:24px;background-color:var(--light-border-color)"> <div class="row" style="flex-direction:row-reverse;width:260px;height:24px;transform:rotate(270deg) translateX(-260px);transform-origin:top left;display:block" @click="${e => {
           if (e.target.classList.contains('v-tab-btn')) {

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

@@ -49,6 +49,15 @@ class ApiResponse extends _litElement.LitElement {
       parser: {
         type: Object
       },
+      includeNulls: {
+        type: Boolean,
+        attribute: 'display-nulls',
+
+        converter(value) {
+          return value === 'true';
+        }
+
+      },
       schemaStyle: {
         type: String,
         attribute: 'schema-style'
@@ -115,7 +124,9 @@ class ApiResponse extends _litElement.LitElement {
         } // Generate Schema
 
 
-        const schemaTree = (0, _schemaUtils.schemaInObjectNotation)(mimeRespObj.schema, {}); // Generate Example
+        const schemaTree = (0, _schemaUtils.schemaInObjectNotation)(mimeRespObj.schema, {
+          includeNulls: this.includeNulls
+        }); // Generate Example
 
         const respExamples = (0, _schemaUtils.generateExample)(mimeRespObj.examples || '', mimeRespObj.example || '', mimeRespObj.schema, mimeResp, true, false, mimeResp.includes('json') ? 'json' : 'text');
         allMimeResp[mimeResp] = {

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

@@ -154,7 +154,7 @@ class SchemaTree extends _litElement.LitElement {
       }
 
       const displayLine = [flags['🆁'] || flags['🆆'], description].filter(v => v).join(' ');
-      return (0, _litElement.html)` <div class="tr ${schemaLevel < this.schemaExpandLevel || data['::type'] && data['::type'].startsWith('xxx-of') ? 'expanded' : 'collapsed'} ${data['::type'] || 'no-type-info'}"> <div class="td key ${data['::deprecated'] ? 'deprecated' : ''}" style="min-width:${minFieldColWidth}px"> ${data['::type'] === 'xxx-of-option' || data['::type'] === 'xxx-of-array' || key.startsWith('::OPTION') ? (0, _litElement.html)`<span class="key-label xxx-of-key">${keyLabel}</span><span class="xxx-of-descr">${keyDescr}</span>` : keyLabel === '::props' || keyLabel === '::ARRAY~OF' ? '' : schemaLevel > 0 ? (0, _litElement.html)`<span class="key-label"> ${keyLabel.replace(/\*$/, '')}${keyLabel.endsWith('*') ? (0, _litElement.html)`<span style="color:var(--red)">*</span>:` : ''}: </span>` : ''} ${data['::type'] === 'xxx-of' && dataType === 'array' ? (0, _litElement.html)`<span style="color:var(--primary-color)">ARRAY</span>` : ''} ${openBracket} </div> <div class="td key-descr"> <span class="m-markdown-small" style="font-family:var(--font-mono);vertical-align:middle" title="${flags['🆁'] && 'Read only attribute' || flags['🆆'] && 'Write only attribute' || ''}"> ${(0, _unsafeHtml.unsafeHTML)((0, _marked.marked)(displayLine))} </span> </div> </div> <div class="inside-bracket ${data['::type'] || 'no-type-info'}" style="padding-left:${data['::type'] === 'xxx-of-option' || data['::type'] === 'xxx-of-array' ? 0 : leftPadding}px"> ${Array.isArray(data) && data[0] ? (0, _litElement.html)`${this.generateTree(data[0], 'xxx-of-option', '', data[0]['::flags'] || {}, '::ARRAY~OF', '', newSchemaLevel, newIndentLevel)}` : (0, _litElement.html)` ${Object.keys(data).map(dataKey => !['::title', '::description', '::type', '::props', '::deprecated', '::array-type', '::dataTypeLabel', '::flags'].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'], data[dataKey]['::array-type'] || '', data[dataKey]['::flags'], dataKey, data[dataKey]['::description'], newSchemaLevel, newIndentLevel)}` : '')}`} </div> ${data['::type'] && data['::type'].includes('xxx-of') ? '' : (0, _litElement.html)`<div class="close-bracket"> ${closeBracket} </div>`} `;
+      return (0, _litElement.html)` <div class="tr ${schemaLevel < this.schemaExpandLevel || data['::type'] && data['::type'].startsWith('xxx-of') ? 'expanded' : 'collapsed'} ${data['::type'] || 'no-type-info'}"> <div class="td key ${data['::deprecated'] ? 'deprecated' : ''}" style="min-width:${minFieldColWidth}px"> ${data['::type'] === 'xxx-of-option' || data['::type'] === 'xxx-of-array' || key.startsWith('::OPTION') ? (0, _litElement.html)`<span class="key-label xxx-of-key">${keyLabel}</span><span class="xxx-of-descr">${keyDescr}</span>` : keyLabel === '::props' || keyLabel === '::ARRAY~OF' ? '' : schemaLevel > 0 ? (0, _litElement.html)`<span class="key-label"> ${keyLabel.replace(/\*$/, '')}${keyLabel.endsWith('*') ? (0, _litElement.html)`<span style="color:var(--red)">*</span>` : ''}: </span>` : ''} ${data['::type'] === 'xxx-of' && dataType === 'array' ? (0, _litElement.html)`<span style="color:var(--primary-color)">ARRAY</span>` : ''} ${openBracket} </div> <div class="td key-descr"> <span class="m-markdown-small" style="font-family:var(--font-mono);vertical-align:middle" title="${flags['🆁'] && 'Read only attribute' || flags['🆆'] && 'Write only attribute' || ''}"> ${(0, _unsafeHtml.unsafeHTML)((0, _marked.marked)(displayLine))} </span> </div> </div> <div class="inside-bracket ${data['::type'] || 'no-type-info'}" style="padding-left:${data['::type'] === 'xxx-of-option' || data['::type'] === 'xxx-of-array' ? 0 : leftPadding}px"> ${Array.isArray(data) && data[0] ? (0, _litElement.html)`${this.generateTree(data[0], 'xxx-of-option', '', data[0]['::flags'] || {}, '::ARRAY~OF', '', newSchemaLevel, newIndentLevel)}` : (0, _litElement.html)` ${Object.keys(data).map(dataKey => !['::title', '::description', '::type', '::props', '::deprecated', '::array-type', '::dataTypeLabel', '::flags'].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'], data[dataKey]['::array-type'] || '', data[dataKey]['::flags'], dataKey, data[dataKey]['::description'], newSchemaLevel, newIndentLevel)}` : '')}`} </div> ${data['::type'] && data['::type'].includes('xxx-of') ? '' : (0, _litElement.html)`<div class="close-bracket"> ${closeBracket} </div>`} `;
     } // For Primitive Data types
 
 

package/dist/lib/openapi-explorer.js

@@ -159,6 +159,10 @@ class OpenApiExplorer extends _litElement.LitElement {
         type: String,
         attribute: 'enable-console'
       },
+      includeNulls: {
+        type: Boolean,
+        attribute: 'display-nulls'
+      },
       allowSearch: {
         type: String,
         attribute: 'allow-search'

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}.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);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}}`;
+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);font-size:calc(var(--font-size-small) - 1px);margin-left:2px}.bina,.binary,.byte,.date,.emai,.email,.host,.hostname,.ipv4,.pass,.password,.stri,.string,.uri,.url,.uuid{color:var(--green)}.blue,.deci,.decimal,.doub,.double,.floa,.float,.int3,.int32,.int6,.int64,.inte,.numb,.number{color:var(--blue)}.null{color:var(--red)}.bool,.boolean{color:var(--orange)}.cons,.const,.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.displaySchemaAsTable ? 'table' : 'tree'}" active-schema-tab="${this.defaultSchemaTab}" schema-expand-level="${this.schemaExpandLevel}" 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}" 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}" display-nulls="${!!this.includeNulls}" enable-console="false" render-style="${this.renderStyle}" schema-style="${this.displaySchemaAsTable ? 'table' : 'tree'}" active-schema-tab="${this.defaultSchemaTab}" schema-expand-level="${this.schemaExpandLevel}" 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}" display-nulls="${!!this.includeNulls}" render-style="${this.renderStyle}" schema-style="${this.displaySchemaAsTable ? 'table' : 'tree'}" active-schema-tab="${this.defaultSchemaTab}" schema-expand-level="${this.schemaExpandLevel}" 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

@@ -17,7 +17,9 @@ require("../components/schema-tree");
 
 /* eslint-disable no-console */
 function componentBodyTemplate(sComponent) {
-  const formdataPartSchema = (0, _schemaUtils.schemaInObjectNotation)(sComponent.component, {});
+  const formdataPartSchema = (0, _schemaUtils.schemaInObjectNotation)(sComponent.component, {
+    includeNulls: this.includeNulls
+  });
   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-hide-read-only="false" schema-hide-write-only="false"> </schema-table>` : (0, _litElement.html)`<schema-tree .data="${formdataPartSchema}" schema-expand-level="${this.schemaExpandLevel}" schema-hide-read-only="false" schema-hide-write-only="false"> </schema-tree>`} </div> </div> `;
 }
 

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}" element-id="${path.elementId}" .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-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-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}" element-id="${path.elementId}" .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}" display-nulls="${!!this.includeNulls}" enable-console="${this.allowTry}" accept="${accept}" render-style="${this.renderStyle}" schema-style="${this.displaySchemaAsTable ? 'table' : 'tree'}" schema-expand-level="${this.schemaExpandLevel}" 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}" display-nulls="${!!this.includeNulls}" active-schema-tab="${this.defaultSchemaTab}" render-style="${this.renderStyle}" schema-style="${this.displaySchemaAsTable ? 'table' : 'tree'}" schema-expand-level="${this.schemaExpandLevel}" 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}" element-id="${path.elementId}" .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-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-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}" element-id="${path.elementId}" .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}" display-nulls="${!!this.includeNulls}" 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-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}" display-nulls="${!!this.includeNulls}" render-style="${this.renderStyle}" schema-style="${this.displaySchemaAsTable ? 'table' : 'tree'}" active-schema-tab="${this.defaultSchemaTab}" schema-expand-level="${this.schemaExpandLevel}" 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 expandedTagTemplate(tagId, subsectionFullId) {