@pb33f/cowboy-components 0.6.7 → 0.7.0

package/dist/components/model-renderer/document.js

@@ -7,7 +7,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import './extensions.js';
 import { customElement, property } from "lit/decorators.js";
 import { html } from "lit";
-import { extractExtensions } from "../../model/media-type.js";
+import { extractDocumentExtensions } from "../../model/media-type.js";
 import { ClickableRef } from "./clickable-ref.js";
 import sharedCss from "../../css/shared.css.js";
 import modelSharedCss from "./model-shared.css.js";
@@ -21,7 +21,7 @@ let RenderedDocumentNodeComponent = class RenderedDocumentNodeComponent extends
             bubbles: true,
             composed: true,
             detail: {
-                nodeHashId: id
+                nodeId: id
             }
         }));
     }
@@ -50,7 +50,7 @@ let RenderedDocumentNodeComponent = class RenderedDocumentNodeComponent extends
         let tags = html ``;
         let servers = html ``;
         let ext = html ``;
-        const extensions = extractExtensions(this.document);
+        const extensions = extractDocumentExtensions(this.document);
         if (extensions.size > 0) {
             ext = html `
                 <hr style="margin-bottom: 10px;"/>
@@ -65,7 +65,7 @@ let RenderedDocumentNodeComponent = class RenderedDocumentNodeComponent extends
                     <div id="components">
                         <h3 class="label" style="padding-top: 0; margin-top: 0">
                             <sl-icon name="${ModelIconComponent.getIconForType(NodeType.COMPONENTS)}" class="icon-vertical"></sl-icon>
-                            <a href="#" @click="${() => this.clicked(this.document.components_idhash)}">Components</a>
+                            <a href="#" @click="${() => this.clicked('$.components')}">Components</a>
                             (<span class="count">${this.document.components}</span>)
                         </h3>
                     </div>
@@ -76,7 +76,7 @@ let RenderedDocumentNodeComponent = class RenderedDocumentNodeComponent extends
                     <div id="paths">
                         <h3 class="label" style="padding-top: 0; margin-top: 0">
                             <sl-icon name="${ModelIconComponent.getIconForType(NodeType.PATHS)}" class="icon-vertical"></sl-icon>
-                            <a href="#" @click="${() => this.clicked(this.document.paths_idhash)}">Paths</a>
+                            <a href="#" @click="${() => this.clicked('$.paths')}">Paths</a>
                             (<span class="count">${this.document.paths}</span>)
                         </h3>
                     </div>
@@ -87,7 +87,7 @@ let RenderedDocumentNodeComponent = class RenderedDocumentNodeComponent extends
                     <div id="tags">
                         <h3 class="label" style="padding-top: 0; margin-top: 0">
                             <sl-icon name="${ModelIconComponent.getIconForType(NodeType.TAGS)}" class="icon-vertical"></sl-icon>
-                            <a href="#" @click="${() => this.clicked(this.document.tags_idhash)}">Tags</a>
+                            <a href="#" @click="${() => this.clicked('$tags')}">Tags</a>
                             (<span class="count">${this.document.tags}</span>)
                         </h3>
                     </div>
@@ -98,7 +98,7 @@ let RenderedDocumentNodeComponent = class RenderedDocumentNodeComponent extends
                     <div id="security">
                         <h3 class="label" style="padding-top: 0; margin-top: 0">
                             <sl-icon name="${ModelIconComponent.getIconForType(NodeType.SECURITY)}" class="icon-vertical"></sl-icon>
-                            <a href="#" @click="${() => this.clicked(this.document.security_idhash)}">Global Security</a>
+                            <a href="#" @click="${() => this.clicked('$.security')}">Global Security</a>
                             (<span class="count">${this.document.security}</span>)
                         </h3>
                     </div>
@@ -109,7 +109,7 @@ let RenderedDocumentNodeComponent = class RenderedDocumentNodeComponent extends
                     <div id="security">
                         <h3 class="label" style="padding-top: 0; margin-top: 0">
                             <sl-icon name="${ModelIconComponent.getIconForType(NodeType.SERVERS)}" class="icon-vertical"></sl-icon>
-                            <a href="#" @click="${() => this.clicked(this.document.servers_idhash)}">Global Servers</a>
+                            <a href="#" @click="${() => this.clicked('$.servers')}">Global Servers</a>
                             (<span class="count">${this.document.servers}</span>)
                         </h3>
                     </div>
@@ -131,7 +131,9 @@ let RenderedDocumentNodeComponent = class RenderedDocumentNodeComponent extends
             ${tags}
             ${security}
             ${servers}
-            ${ext}`;
+            ${ext}
+            ${super.renderChanges()}
+        `;
     }
 };
 RenderedDocumentNodeComponent.styles = [sharedCss, modelSharedCss, formattingCss];

package/dist/components/model-renderer/encoding.js

@@ -76,6 +76,7 @@ let RenderedEncodingNodeComponent = class RenderedEncodingNodeComponent extends
             ${style}
             ${allowReserved}
             ${headers}
+            ${super.renderChanges()}
         `;
     }
 };

package/dist/components/model-renderer/example.js

@@ -319,6 +319,7 @@ let RenderedSchemaNodeComponent = class RenderedSchemaNodeComponent extends Clic
                     ${externalValue}
                     ${value}
                     ${ext}
+                    ${super.renderChanges()}
                 </div>
             `;
         }

package/dist/components/model-renderer/external-docs.js

@@ -61,6 +61,7 @@ let RenderedExternalDocsNodeComponent = class RenderedExternalDocsNodeComponent
                 ${description}
                 ${url}
                 ${ext}
+                ${super.renderChanges()}
             </div>
         `;
     }

package/dist/components/model-renderer/has-changes.d.ts

@@ -0,0 +1,8 @@
+import { LitElement, TemplateResult } from "lit";
+import { Change } from "../../model/graph";
+export declare class HasChanges extends LitElement {
+    constructor();
+    renderChangeIcon(change: Change): TemplateResult;
+    renderChangeType(change: Change): TemplateResult;
+    renderBreaking(breaking: boolean): TemplateResult;
+}

package/dist/components/model-renderer/has-changes.js

@@ -0,0 +1,50 @@
+import { html, LitElement } from "lit";
+export class HasChanges extends LitElement {
+    constructor() {
+        super();
+    }
+    renderChangeIcon(change) {
+        let icon = html ``;
+        switch (change.change) {
+            case 1:
+                icon = html `
+                    <sl-icon name="pencil" class="modified modified-icon"></sl-icon>`;
+                break;
+            case 2:
+            case 3:
+                icon = html `
+                    <sl-icon name="plus-lg" class="added added-icon"></sl-icon>`;
+                break;
+            case 4:
+            case 5:
+                icon = html `
+                    <sl-icon name="x-lg" class="removed removed-icon"></sl-icon>`;
+                break;
+        }
+        return html `${icon}`;
+    }
+    renderChangeType(change) {
+        let icon = html ``;
+        switch (change.change) {
+            case 1:
+                icon = html `<span class="change-type modified">(modified)</span>`;
+                break;
+            case 2:
+            case 3:
+                icon = html `<span class="change-type added">(added)</span>`;
+                break;
+            case 4:
+            case 5:
+                icon = html `<span class="change-type removed">(removed)</span>`;
+                break;
+        }
+        return html `${icon}`;
+    }
+    renderBreaking(breaking) {
+        if (breaking) {
+            return html `<span class="breaking"><sl-icon name="heartbreak-fill" class="removed"></sl-icon> 
+               </span>`;
+        }
+        return html ``;
+    }
+}

package/dist/components/model-renderer/header.js

@@ -130,6 +130,7 @@ let RenderedHeaderNodeComponent = class RenderedHeaderNodeComponent extends HasE
             ${schema}
             ${content}
             ${ext}
+            ${super.renderChanges()}
         `;
     }
 };

package/dist/components/model-renderer/info.js

@@ -81,7 +81,9 @@ let RenderedInfoNodeComponent = class RenderedInfoNodeComponent extends Clickabl
             ${description}
             ${contact}
             ${license}
-            ${ext}`;
+            ${ext}
+            ${super.renderChanges()}    
+        `;
     }
 };
 RenderedInfoNodeComponent.styles = [sharedCss, modelSharedCss, listsCss, formattingCss];

package/dist/components/model-renderer/license.js

@@ -32,11 +32,10 @@ let RenderedLicenseNodeComponent = class RenderedLicenseNodeComponent extends Cl
                 <pb33f-rendered-extensions-node .extensions="${extensions}"></pb33f-rendered-extensions-node>
                 <hr class="hr-nopadding">`;
         }
-        this.extractLicense(this.license?.name);
         if (this.license?.name) {
             const lic = this.extractLicense(this.license?.name);
             name = html `<div class="margin-bottom"><span class="list-value">${this.license.name} 
-            </span>${lic ? html `<span class="model-text">(${lic.fullName})</span>` : ''}</div>`;
+                </span>${lic ? html `<span class="model-text">(${lic.fullName})</span>` : ''}</div>`;
         }
         if (this.license?.url) {
             url = html `<div class="margin-bottom"><span class="list-key">URL:</span> 
@@ -51,7 +50,8 @@ let RenderedLicenseNodeComponent = class RenderedLicenseNodeComponent extends Cl
             ${name}
             ${identifier}
             ${url}
-            ${ext}`;
+            ${ext}
+            ${super.renderChanges()}`;
     }
 };
 RenderedLicenseNodeComponent.styles = [sharedCss, modelSharedCss, formattingCss];

package/dist/components/model-renderer/link.js

@@ -96,7 +96,7 @@ let RenderedLinkNodeComponent = class RenderedLinkNodeComponent extends Clickabl
             `;
         }
         return html `
-            ${references}${operationId}${operationRef}${description}${parameters}${requestBody}${ext}`;
+            ${references}${operationId}${operationRef}${description}${parameters}${requestBody}${ext}${super.renderChanges()}`;
     }
 };
 RenderedLinkNodeComponent.styles = [sharedCss, modelSharedCss, listsCss, formattingCss];

package/dist/components/model-renderer/media-type.js

@@ -64,7 +64,7 @@ let RenderedSchemaNodeComponent = class RenderedSchemaNodeComponent extends HasE
         }
         return html `
             ${(this.mediaType.examples || (this.mediaType.example || this.mediaType.example == 0)) ? this.renderExamples(this.mediaType.examples, this.mediaType.example) : ''}
-            ${references}${schema}${encoding}${ext}`;
+            ${references}${schema}${encoding}${ext}${super.renderChanges()}`;
     }
 };
 RenderedSchemaNodeComponent.styles = [mediaTypeCss, sharedCss, modelSharedCss, formattingCss];

package/dist/components/model-renderer/oauth-flows.js

@@ -133,7 +133,8 @@ let RenderedOauthFlowsNodeComponent = class RenderedOauthFlowsNodeComponent exte
             ${password}
             ${clientCredentials}
             ${authorizationCode}
-            ${ext}`;
+            ${ext}
+            ${super.renderChanges()}`;
     }
 };
 RenderedOauthFlowsNodeComponent.styles = [sharedCss, modelSharedCss, formattingCss, linksCss];

package/dist/components/model-renderer/operation.js

@@ -209,7 +209,8 @@ let RenderedOperationNodeComponent = class RenderedOperationNodeComponent extend
             ${responses}
             ${externalDocs}
             ${references}
-            ${ext}`;
+            ${ext}
+            ${super.renderChanges()}`;
     }
 };
 RenderedOperationNodeComponent.styles = [mediaTypeCss, sharedCss, modelSharedCss, formattingCss, listsCss];

package/dist/components/model-renderer/parameter.js

@@ -149,6 +149,7 @@ let RenderedParameterNodeComponent = class RenderedParameterNodeComponent extend
             ${schema}
             ${content}
             ${ext}
+            ${super.renderChanges()}
         `;
     }
 };

package/dist/components/model-renderer/path-item.js

@@ -219,6 +219,7 @@ let RenderedPathItemNodeComponent = class RenderedPathItemNodeComponent extends
             ${head}
             ${trace}
             ${ext}
+            ${super.renderChanges()}
         `;
     }
 };

package/dist/components/model-renderer/paths.js

@@ -46,6 +46,7 @@ let RenderedPathItemNodeComponent = class RenderedPathItemNodeComponent extends
         return html `
             ${references}
             ${paths}
+            ${super.renderChanges()}
         `;
     }
 };

package/dist/components/model-renderer/rendered-node.js

@@ -47,13 +47,13 @@ let RenderedNodeComponent = class RenderedNodeComponent extends HasExamples {
         let renderedNode;
         switch (this.node.type) {
             case NodeType.SCHEMA:
-                renderedNode = html `<pb33f-rendered-schema-node .schema="${this.node.instance}" renderType></pb33f-rendered-schema-node>`;
+                renderedNode = html `<pb33f-rendered-schema-node .schema=${this.node.instance} .changes=${this.node.timeline} renderType></pb33f-rendered-schema-node>`;
                 break;
             case NodeType.MEDIA_TYPE:
-                renderedNode = html `<pb33f-rendered-mediatype-node .mediaType="${this.node.instance}"></pb33f-rendered-mediatype-node>`;
+                renderedNode = html `<pb33f-rendered-mediatype-node .mediaType=${this.node.instance} .changes=${this.node.timeline}></pb33f-rendered-mediatype-node>`;
                 break;
             case NodeType.HEADER:
-                renderedNode = html `<pb33f-rendered-header-node .header="${this.node.instance}" name="${this.node.label}"></pb33f-rendered-header-node>`;
+                renderedNode = html `<pb33f-rendered-header-node .header=${this.node.instance} .changes=${this.node.timeline} name="${this.node.label}"></pb33f-rendered-header-node>`;
                 break;
             case NodeType.EXAMPLE:
             case NodeType.EXAMPLES:
@@ -62,70 +62,70 @@ let RenderedNodeComponent = class RenderedNodeComponent extends HasExamples {
                 break;
             case NodeType.ENCODING:
                 this.renderProblems = true;
-                renderedNode = html `<pb33f-rendered-encoding-node .encoding="${this.node.instance}"></pb33f-rendered-encoding-node>`;
+                renderedNode = html `<pb33f-rendered-encoding-node .encoding=${this.node.instance} .changes=${this.node.timeline}></pb33f-rendered-encoding-node>`;
                 break;
             case NodeType.REQUEST_BODY:
                 this.renderProblems = true;
-                renderedNode = html `<pb33f-rendered-requestbody-node .requestBody="${this.node.instance}"></pb33f-rendered-requestbody-node>`;
+                renderedNode = html `<pb33f-rendered-requestbody-node .requestBody=${this.node.instance} .changes=${this.node.timeline}></pb33f-rendered-requestbody-node>`;
                 break;
             case NodeType.PARAMETER:
                 this.renderProblems = true;
-                renderedNode = html `<pb33f-rendered-parameter-node .parameter="${this.node.instance}" name="${this.node.label}"></pb33f-rendered-parameter-node>`;
+                renderedNode = html `<pb33f-rendered-parameter-node .parameter=${this.node.instance} .changes=${this.node.timeline} name="${this.node.label}" .changes=${this.node.timeline}></pb33f-rendered-parameter-node>`;
                 break;
             case NodeType.LINK:
                 this.renderProblems = true;
-                renderedNode = html `<pb33f-rendered-link-node .link="${this.node.instance}" name="${this.node.label}"></pb33f-rendered-link-node>`;
+                renderedNode = html `<pb33f-rendered-link-node .link=${this.node.instance} .changes=${this.node.timeline} name="${this.node.label}"></pb33f-rendered-link-node>`;
                 break;
             case NodeType.RESPONSE:
                 this.renderProblems = true;
-                renderedNode = html `<pb33f-rendered-response-node .response="${this.node.instance}" name="${this.node.label}"></pb33f-rendered-response-node>`;
+                renderedNode = html `<pb33f-rendered-response-node .response=${this.node.instance} .changes=${this.node.timeline} name="${this.node.label}"></pb33f-rendered-response-node>`;
                 break;
             case NodeType.OPERATION:
                 this.renderProblems = true;
-                renderedNode = html `<pb33f-rendered-operation-node .operation="${this.node.instance}" name="${this.node.label}"></pb33f-rendered-operation-node>`;
+                renderedNode = html `<pb33f-rendered-operation-node .operation=${this.node.instance} .changes=${this.node.timeline} name="${this.node.label}"></pb33f-rendered-operation-node>`;
                 break;
             case NodeType.SECURITY_SCHEME:
                 this.renderProblems = true;
-                renderedNode = html `<pb33f-rendered-securityscheme-node .securityScheme="${this.node.instance}" name="${this.node.label}"></pb33f-rendered-securityscheme-node>`;
+                renderedNode = html `<pb33f-rendered-securityscheme-node .securityScheme=${this.node.instance} .changes=${this.node.timeline} name="${this.node.label}"></pb33f-rendered-securityscheme-node>`;
                 break;
             case NodeType.CALLBACK:
                 this.renderProblems = true;
-                renderedNode = html `<pb33f-rendered-callback-node .callback="${this.node.instance}" name="${this.node.label}"></pb33f-rendered-callback-node>`;
+                renderedNode = html `<pb33f-rendered-callback-node .callback=${this.node.instance} .changes=${this.node.timeline} name="${this.node.label}"></pb33f-rendered-callback-node>`;
                 break;
             case NodeType.PATH_ITEM:
                 this.renderProblems = true;
-                renderedNode = html `<pb33f-rendered-pathItem-node .pathItem="${this.node.instance}" path="${this.node.label}"></pb33f-rendered-pathItem-node>`;
+                renderedNode = html `<pb33f-rendered-pathItem-node .pathItem=${this.node.instance} .changes=${this.node.timeline} path="${this.node.label}"></pb33f-rendered-pathItem-node>`;
                 break;
             case NodeType.SERVER:
                 this.renderProblems = true;
-                renderedNode = html `<pb33f-rendered-server-node .server="${this.node.instance}"></pb33f-rendered-server-node>`;
+                renderedNode = html `<pb33f-rendered-server-node .server=${this.node.instance} .changes=${this.node.timeline}></pb33f-rendered-server-node>`;
                 break;
             case NodeType.PATHS:
                 this.renderProblems = true;
-                renderedNode = html `<pb33f-rendered-paths-node .paths="${this.node.instance}"></pb33f-rendered-paths-node>`;
+                renderedNode = html `<pb33f-rendered-paths-node .paths=${this.node.instance} .changes=${this.node.timeline}></pb33f-rendered-paths-node>`;
                 break;
             case NodeType.COMPONENTS:
                 this.renderProblems = true;
-                renderedNode = html `<pb33f-rendered-components-node .components="${this.node.instance}"></pb33f-rendered-components-node>`;
+                renderedNode = html `<pb33f-rendered-components-node .components=${this.node.instance} .changes=${this.node.timeline}></pb33f-rendered-components-node>`;
                 break;
             case NodeType.CONTACT:
                 this.renderProblems = true;
-                renderedNode = html `<pb33f-rendered-contact-node .contact="${this.node.instance}"></pb33f-rendered-contact-node>`;
+                renderedNode = html `<pb33f-rendered-contact-node .contact=${this.node.instance} .changes=${this.node.timeline}></pb33f-rendered-contact-node>`;
                 break;
             case NodeType.LICENSE:
                 this.renderProblems = true;
-                renderedNode = html `<pb33f-rendered-license-node .license="${this.node.instance}"></pb33f-rendered-license-node>`;
+                renderedNode = html `<pb33f-rendered-license-node .license=${this.node.instance} .changes=${this.node.timeline}></pb33f-rendered-license-node>`;
                 break;
             case NodeType.INFO:
                 this.renderProblems = true;
-                renderedNode = html `<pb33f-rendered-info-node .info="${this.node.instance}"></pb33f-rendered-info-node>`;
+                renderedNode = html `<pb33f-rendered-info-node .info=${this.node.instance} .changes=${this.node.timeline}></pb33f-rendered-info-node>`;
                 break;
             case NodeType.DOCUMENT:
-                renderedNode = html `<pb33f-rendered-document-node .document="${this.node.instance}"></pb33f-rendered-document-node>`;
+                renderedNode = html `<pb33f-rendered-document-node .document=${this.node.instance} .changes=${this.node.timeline}></pb33f-rendered-document-node>`;
                 this.renderProblems = false;
                 break;
             case NodeType.TAG:
-                renderedNode = html `<pb33f-rendered-tag-node .tag="${this.node.instance}"></pb33f-rendered-tag-node>`;
+                renderedNode = html `<pb33f-rendered-tag-node .tag=${this.node.instance} .changes=${this.node.timeline}></pb33f-rendered-tag-node>`;
                 this.renderProblems = true;
                 break;
             default:

package/dist/components/model-renderer/rendered-property.css.js

@@ -105,6 +105,10 @@ export default css `
     }
     
     .response-code {
+        color: var(--terminal-text);
+    }
+
+    .response-code-warn {
         color: var(--warn-color);
     }
 

package/dist/components/model-renderer/rendered-property.js

@@ -136,10 +136,13 @@ let RenderedPropertyComponent = class RenderedPropertyComponent extends LitEleme
                 let keyValue = html `${key}`;
                 // check if this is not an index, but it is a response
                 if (!isNaN(key) && !isNumKey) {
-                    if (parseInt(key) >= 200) {
+                    if (parseInt(key) >= 200 && parseInt(key) < 400) {
                         keyValue = html `<span class="response-code">${key}</span>`;
                     }
-                    if (parseInt(key) >= 400) {
+                    if (parseInt(key) >= 400 && parseInt(key) < 500) {
+                        keyValue = html `<span class="response-code-warn">${key}</span>`;
+                    }
+                    if (parseInt(key) >= 500) {
                         keyValue = html `<span class="response-code-error">${key}</span>`;
                     }
                 }

package/dist/components/model-renderer/request-body.js

@@ -74,7 +74,7 @@ let RenderedRequestBodyNodeComponent = class RenderedRequestBodyNodeComponent ex
                 </pb33f-rendered-description-node>`;
         }
         return html `
-            ${references}${required}${description}${content}${ext}`;
+            ${references}${required}${description}${content}${ext}${super.renderChanges()}`;
     }
 };
 RenderedRequestBodyNodeComponent.styles = [sharedCss, modelSharedCss, formattingCss];

package/dist/components/model-renderer/response.js

@@ -148,7 +148,7 @@ ${ExtractHTTPCodeDescription(resp)}`
         }
         return html `
             ${httpCode}
-            ${references}${description}${content}${headers}${links}${ext}`;
+            ${references}${description}${content}${headers}${links}${ext}${super.renderChanges()}`;
     }
 };
 RenderedResponseNodeComponent.styles = [sharedCss, modelSharedCss, formattingCss];

package/dist/components/model-renderer/schema.js

@@ -62,18 +62,18 @@ let RenderedSchemaNodeComponent = class RenderedSchemaNodeComponent extends HasE
             return html `<div class="schema-item">${this.schema}</div>`;
         }
         // check if this is just a string array, if so, just render it
-        if (Array.isArray(this.schema) && this.schema.every(item => typeof item === 'string')) {
+        if (Array.isArray(this.schema) && this.schema?.every(item => typeof item === 'string')) {
             return html `
                 <div class="schema-item" style="display: block">
                
-                ${this.schema.map((item, index) => {
+                ${this.schema?.map((item, index) => {
                 return html `<div>[${index}] <code class="root" style="margin-left: 2px">${item}</code></div>`;
             })}
             </div>`;
         }
         const sch = this.schema;
         if (isHasRef(sch)) {
-            const segs = this.schema.$ref?.split('/');
+            const segs = this.schema?.$ref?.split('/');
             // @ts-ignore
             const refName = segs[segs.length - 1].replaceAll('~1', '/');
             return html `
@@ -81,7 +81,7 @@ let RenderedSchemaNodeComponent = class RenderedSchemaNodeComponent extends HasE
                     Schema Reference: 
                     <sl-icon name="arrow-right" class="reflink reflink-icon"></sl-icon>
                     <span class="inline-ref reflink" @click=${() => {
-                this.clickedRef(this.schema.$ref);
+                this.clickedRef(this.schema?.$ref);
             }}>${refName}</span>
                 </div>
                 <hr/>
@@ -95,54 +95,55 @@ let RenderedSchemaNodeComponent = class RenderedSchemaNodeComponent extends HasE
             </div>`;
         }
         return html `
-            ${this.schema.description ? html `
-                <pb33f-rendered-description-node>${unsafeHTML(marked.parse(this.schema.description).toString())}</pb33f-rendered-description-node>` : ''}
-            ${((this.schema.examples && this.schema.examples.length > 0) || (this.schema.example || this.schema.example == 0)) ? this.renderExamples(this.schema.examples, this.schema.example) : this.renderNoExample()}
-            ${(this.renderType && this.schema.type) ? this.renderObject('Type', this.schema.type) : ''}
-            ${this.schema.title ? this.renderObject('Title', this.schema.title) : ''}
-            ${this.schema.properties ? this.renderObject('Properties', this.schema.properties, this.schema.required) : ''}
-            ${this.schema.patternProperties ? this.renderObject('Pattern Properties', this.schema.patternProperties) : ''}
-            ${this.schema.additionalProperties ? this.renderObject('Additional Properties', this.schema.additionalProperties) : ''}
-            ${this.schema.format ? this.renderObject('Format', this.schema.format) : ''}
-            ${this.schema.items ? this.renderObject('Items', this.schema.items) : ''}
-            ${this.schema.additionalItems ? this.renderObject('Additional Items', this.schema.additionalItems) : ''}
-            ${(this.schema.minimum || this.schema.minimum == 0) ? this.renderObject('Minimum', this.schema.minimum) : ''}
-            ${(this.schema.maximum || this.schema.maximum == 0) ? this.renderObject('Maximum', this.schema.maximum) : ''}
-            ${(this.schema.exclusiveMinimum || this.schema.exclusiveMinimum == 0) ? this.renderObject('Exclusive Minimum', this.schema.exclusiveMinimum) : ''}
-            ${(this.schema.exclusiveMaximum || this.schema.exclusiveMaximum == 0) ? this.renderObject('Exclusive Maximum', this.schema.exclusiveMaximum) : ''}
-            ${(this.schema.multipleOf || this.schema.multipleOf == 0) ? this.renderObject('Multiple Of', this.schema.multipleOf) : ''}
-            ${(this.schema.minLength || this.schema.minLength) ? this.renderObject('Min Length', this.schema.minLength) : ''}
-            ${(this.schema.maxLength || this.schema.maxLength == 0) ? this.renderObject('Max Length', this.schema.maxLength) : ''}
-            ${this.schema.pattern ? this.renderObject('Pattern', this.schema.pattern) : ''}
-            ${(this.schema.minItems || this.schema.minItems == 0) ? this.renderObject('Min Items', this.schema.minItems) : ''}
-            ${(this.schema.maxItems || this.schema.maxItems == 0) ? this.renderObject('Max Items', this.schema.maxItems) : ''}
-            ${this.schema.uniqueItems ? this.renderObject('Unique Items', this.schema.uniqueItems) : ''}
-            ${this.schema.contains ? this.renderObject('Contains', this.schema.contains) : ''}
-            ${(this.schema.const || this.schema.const == 0) ? this.renderObject('const', this.schema.const) : ''}
-            ${this.schema.enum ? this.renderObject('enum', this.schema.enum) : ''}
-            ${this.schema.allOf ? this.renderObject('AllOf', this.schema.allOf, this.schema.required) : ''}
-            ${this.schema.anyOf ? this.renderObject('AnyOf', this.schema.anyOf, this.schema.required) : ''}
-            ${this.schema.oneOf ? this.renderObject('OneOf', this.schema.oneOf, this.schema.required) : ''}
-            ${this.schema.not ? this.renderObject('Not', this.schema.not) : ''}
-            ${this.schema.if ? this.renderObject('If', this.schema.if) : ''}
-            ${this.schema.then ? this.renderObject('Then', this.schema.then) : ''}
-            ${this.schema.else ? this.renderObject('Else', this.schema.else) : ''}
-            ${this.schema.unevaluatedItems ? this.renderObject('Unevaluated Items', this.schema.unevaluatedItems) : ''}
-            ${this.schema.prefixItems ? this.renderObject('Prefix Items', this.schema.prefixItems) : ''}
-            ${this.schema.unevaluatedProperties ? this.renderObject('Unevaluated Properties', this.schema.unevaluatedProperties) : ''}
-            ${this.schema.minContains ? this.renderObject('Min Contains', this.schema.minContains) : ''}
-            ${this.schema.maxContains ? this.renderObject('Max Contains', this.schema.maxContains) : ''}
-            ${this.schema.dependentSchemas ? this.renderObject('Dependent Schemas', this.schema.dependentSchemas) : ''}
-            ${this.schema.propertyNames ? this.renderObject('Property Names', this.schema.propertyNames) : ''}
-            ${this.schema.anchor ? this.renderObject('Anchor', this.schema.anchor) : ''}
-            ${this.schema.readOnly ? this.renderObject('Read Only', this.schema.readOnly) : ''}
-            ${this.schema.default ? this.renderObject('Default', this.schema.default) : ''}
-            ${this.schema.nullable ? this.renderObject('Nullable', this.schema.nullable) : ''}
-            ${this.schema.writeOnly ? this.renderObject('Write Only', this.schema.writeOnly) : ''}
-            ${this.schema.xml ? this.renderObject('XML', this.schema.xml) : ''}
-            ${this.schema.externalDocs ? this.renderObject('External Docs', this.schema.externalDocs) : ''}
-            ${this.schema.deprecated ? this.renderObject('Deprecated', this.schema.deprecated) : ''}
+            ${this.schema?.description ? html `
+                <pb33f-rendered-description-node>${unsafeHTML(marked.parse(this.schema?.description).toString())}</pb33f-rendered-description-node>` : ''}
+            ${((this.schema?.examples && this.schema?.examples.length > 0) || (this.schema?.example || this.schema?.example == 0)) ? this.renderExamples(this.schema?.examples, this.schema?.example) : this.renderNoExample()}
+            ${(this.renderType && this.schema?.type) ? this.renderObject('Type', this.schema?.type) : ''}
+            ${this.schema?.title ? this.renderObject('Title', this.schema?.title) : ''}
+            ${this.schema?.properties ? this.renderObject('Properties', this.schema?.properties, this.schema?.required) : ''}
+            ${this.schema?.patternProperties ? this.renderObject('Pattern Properties', this.schema?.patternProperties) : ''}
+            ${this.schema?.additionalProperties ? this.renderObject('Additional Properties', this.schema?.additionalProperties) : ''}
+            ${this.schema?.format ? this.renderObject('Format', this.schema?.format) : ''}
+            ${this.schema?.items ? this.renderObject('Items', this.schema?.items) : ''}
+            ${this.schema?.additionalItems ? this.renderObject('Additional Items', this.schema?.additionalItems) : ''}
+            ${(this.schema?.minimum || this.schema?.minimum == 0) ? this.renderObject('Minimum', this.schema?.minimum) : ''}
+            ${(this.schema?.maximum || this.schema?.maximum == 0) ? this.renderObject('Maximum', this.schema?.maximum) : ''}
+            ${(this.schema?.exclusiveMinimum || this.schema?.exclusiveMinimum == 0) ? this.renderObject('Exclusive Minimum', this.schema?.exclusiveMinimum) : ''}
+            ${(this.schema?.exclusiveMaximum || this.schema?.exclusiveMaximum == 0) ? this.renderObject('Exclusive Maximum', this.schema?.exclusiveMaximum) : ''}
+            ${(this.schema?.multipleOf || this.schema?.multipleOf == 0) ? this.renderObject('Multiple Of', this.schema?.multipleOf) : ''}
+            ${(this.schema?.minLength || this.schema?.minLength) ? this.renderObject('Min Length', this.schema?.minLength) : ''}
+            ${(this.schema?.maxLength || this.schema?.maxLength == 0) ? this.renderObject('Max Length', this.schema?.maxLength) : ''}
+            ${this.schema?.pattern ? this.renderObject('Pattern', this.schema?.pattern) : ''}
+            ${(this.schema?.minItems || this.schema?.minItems == 0) ? this.renderObject('Min Items', this.schema?.minItems) : ''}
+            ${(this.schema?.maxItems || this.schema?.maxItems == 0) ? this.renderObject('Max Items', this.schema?.maxItems) : ''}
+            ${this.schema?.uniqueItems ? this.renderObject('Unique Items', this.schema?.uniqueItems) : ''}
+            ${this.schema?.contains ? this.renderObject('Contains', this.schema?.contains) : ''}
+            ${(this.schema?.const || this.schema?.const == 0) ? this.renderObject('const', this.schema?.const) : ''}
+            ${this.schema?.enum ? this.renderObject('enum', this.schema?.enum) : ''}
+            ${this.schema?.allOf ? this.renderObject('AllOf', this.schema?.allOf, this.schema?.required) : ''}
+            ${this.schema?.anyOf ? this.renderObject('AnyOf', this.schema?.anyOf, this.schema?.required) : ''}
+            ${this.schema?.oneOf ? this.renderObject('OneOf', this.schema?.oneOf, this.schema?.required) : ''}
+            ${this.schema?.not ? this.renderObject('Not', this.schema?.not) : ''}
+            ${this.schema?.if ? this.renderObject('If', this.schema?.if) : ''}
+            ${this.schema?.then ? this.renderObject('Then', this.schema?.then) : ''}
+            ${this.schema?.else ? this.renderObject('Else', this.schema?.else) : ''}
+            ${this.schema?.unevaluatedItems ? this.renderObject('Unevaluated Items', this.schema?.unevaluatedItems) : ''}
+            ${this.schema?.prefixItems ? this.renderObject('Prefix Items', this.schema?.prefixItems) : ''}
+            ${this.schema?.unevaluatedProperties ? this.renderObject('Unevaluated Properties', this.schema?.unevaluatedProperties) : ''}
+            ${this.schema?.minContains ? this.renderObject('Min Contains', this.schema?.minContains) : ''}
+            ${this.schema?.maxContains ? this.renderObject('Max Contains', this.schema?.maxContains) : ''}
+            ${this.schema?.dependentSchemas ? this.renderObject('Dependent Schemas', this.schema?.dependentSchemas) : ''}
+            ${this.schema?.propertyNames ? this.renderObject('Property Names', this.schema?.propertyNames) : ''}
+            ${this.schema?.anchor ? this.renderObject('Anchor', this.schema?.anchor) : ''}
+            ${this.schema?.readOnly ? this.renderObject('Read Only', this.schema?.readOnly) : ''}
+            ${this.schema?.default ? this.renderObject('Default', this.schema?.default) : ''}
+            ${this.schema?.nullable ? this.renderObject('Nullable', this.schema?.nullable) : ''}
+            ${this.schema?.writeOnly ? this.renderObject('Write Only', this.schema?.writeOnly) : ''}
+            ${this.schema?.xml ? this.renderObject('XML', this.schema?.xml) : ''}
+            ${this.schema?.externalDocs ? this.renderObject('External Docs', this.schema?.externalDocs) : ''}
+            ${this.schema?.deprecated ? this.renderObject('Deprecated', this.schema?.deprecated) : ''}
             ${ext}
+            ${super.renderChanges()}
         `;
     }
     toggleNode(id) {
@@ -331,7 +332,7 @@ let RenderedSchemaNodeComponent = class RenderedSchemaNodeComponent extends HasE
                             }
                             isObject = true;
                             const child = obj[mapKey];
-                            if (child.$ref) {
+                            if (child?.$ref) {
                                 const refName = extractNameFromRef(child);
                                 return html `
                                     <div class="object">
@@ -344,7 +345,7 @@ let RenderedSchemaNodeComponent = class RenderedSchemaNodeComponent extends HasE
                                     </div>
                                 `;
                             }
-                            if (child.type && (!child.type.includes('object') || child.type != 'object')) {
+                            if (child?.type && (!child?.type.includes('object') || child?.type != 'object')) {
                                 // check if obj[key] has any other properties other than a type, if so render
                                 let sub = html ``;
                                 if (Object.keys(obj[mapKey]).length > 1) {
@@ -373,6 +374,7 @@ let RenderedSchemaNodeComponent = class RenderedSchemaNodeComponent extends HasE
                                                                     skinny></pb33f-rendered-schema-node>
                                     </div>
                                 </div>
+                                ${super.renderChanges()}
                             `;
                         }
                     })}`;
@@ -407,7 +409,8 @@ let RenderedSchemaNodeComponent = class RenderedSchemaNodeComponent extends HasE
         }
         return html `
             <div class="schema-item ${this.listItem ? 'inline' : ''} ${this.objectItem ? 'object' : ''}">${output}
-            </div>`;
+            </div>
+        `;
     }
 };
 RenderedSchemaNodeComponent.styles = [sharedCss, sharedProblemCss, schemaCss, modelSharedCss, listsCss];