@pb33f/cowboy-components 0.7.17 → 0.8.0

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

@@ -9,8 +9,8 @@ import { html, LitElement } from "lit";
 import { getProblemClass, getProblemIcon, Problem } from "../../model/problem.js";
 import { unsafeHTML } from "lit/directives/unsafe-html.js";
 import { marked } from "marked";
-import { ProblemDrawerEventType } from "../problem-list/details-drawer.js";
-import { OpenProblemDrawer } from "../../events/doctor.js";
+import { DrawerContentType } from "../../model/drawer-content.js";
+import { OpenDrawer } from "../../events/doctor.js";
 import { MarkerSeverity } from "monaco-editor";
 import sharedCss from "../problem-list/shared.css.js";
 import problemMainViewCss from "../problem-list/problem-mainview.css.js";
@@ -19,22 +19,22 @@ let ProblemNodeComponent = class ProblemNodeComponent extends LitElement {
         super();
     }
     showRuleDocs(source) {
-        this.dispatchEvent(new CustomEvent(OpenProblemDrawer, {
+        this.dispatchEvent(new CustomEvent(OpenDrawer, {
             bubbles: true,
             composed: true,
             detail: {
-                type: ProblemDrawerEventType.RULE_DOCS,
-                rule: source
+                type: DrawerContentType.RULE_DOCS,
+                ruleId: source
             }
         }));
     }
     howToFix(source) {
-        this.dispatchEvent(new CustomEvent(OpenProblemDrawer, {
+        this.dispatchEvent(new CustomEvent(OpenDrawer, {
             bubbles: true,
             composed: true,
             detail: {
-                type: ProblemDrawerEventType.HOW_TO_FIX,
-                rule: source
+                type: DrawerContentType.HOW_TO_FIX,
+                ruleId: source
             }
         }));
     }
@@ -68,12 +68,12 @@ let ProblemNodeComponent = class ProblemNodeComponent extends LitElement {
                         ${unsafeHTML(marked.parse(problem.message).toString())}
                         <br/>
                         <div class="source tiny-text">
-                            <div>Rule: <a @click="${() => {
+                            <div>RULE: <a @click="${() => {
             this.showRuleDocs(problem.source);
         }}" href="#" data-name="${problem.source}">${problem.source}</a></div>
                             <sl-icon-button @click=${() => {
             this.howToFix(problem.source);
-        }} name="question-square" class="button-icon tiny-text">
+        }} name="question-square" label="How to fix" class="button-icon tiny-text">
                             </sl-icon-button>
                         </div>
                     </div>

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

@@ -15,15 +15,30 @@ export default css `
     sl-badge::part(base) {
        border-radius: 0;
         background-color: var(--background-color);
-        border: 1px solid var(--secondary-color);
+        border: none;
         color: var(--secondary-color);
+        line-height: revert;
     }
-    
+
+    .button-group {
+        display: flex;
+        gap: var(--sl-spacing-small);
+        flex-wrap: wrap;
+    }
+
+    .button-group sl-button {
+        flex: 0 0 auto;
+    }
+
     .rendered-node {
-        padding: 10px 10px 10px 0;
+        padding-right: 10px;
         overflow-y: auto;
     }
-
+    
+    .object-badge::part(base) {
+        text-transform: uppercase; 
+        letter-spacing: 0.05em;
+    }
 
     .rendered-node::-webkit-scrollbar {
         width: 8px;
@@ -40,8 +55,7 @@ export default css `
     }
     
     .rendered-node-container {
-        padding-left: 5px;
-        height: calc(100vh - 250px);
+        height: calc(100vh - 300px);
     }
     
     .prop {
@@ -89,6 +103,8 @@ export default css `
     h5 {
         margin-top: 0;
         margin-bottom: 0;
+        text-transform: uppercase;
+        letter-spacing: 0.02em;
     }
     
     .nested-props {
@@ -106,6 +122,19 @@ export default css `
         margin-bottom: 10px;
     }
     
+    sl-button.pov-button::part(base) {
+        height: 25px;
+        line-height: 22px;
+        margin-top: 0;
+    }
+
+    sl-button.diagram-button::part(base) {
+        height: 25px;
+        line-height: 22px;
+        margin-top: 0;
+    }
+    
+    
     .vacuum-results {
         padding-top: 10px;
         border-top: 1px solid var(--secondary-color);

package/dist/components/model-renderer/rendered-node.d.ts

@@ -21,16 +21,26 @@ import './tag.js';
 import './document.js';
 import './responses.js';
 import '../model-icon/model-icon.js';
+import '@shoelace-style/shoelace/dist/components/tooltip/tooltip.js';
+import '@shoelace-style/shoelace/dist/components/button/button.js';
+import '@shoelace-style/shoelace/dist/components/icon/icon.js';
 import { TemplateResult } from "lit";
 import './rendered-property.js';
-import { Node } from "../../model/graph.js";
-import { HasExamples } from "./clickable-ref";
+import { Node, VacuumResult } from "../../model/graph.js";
+import { HasExamples } from "./clickable-ref.js";
+import '../premium-gate/premium-gate.js';
 export declare class RenderedNodeComponent extends HasExamples {
     static styles: import("lit").CSSResult[];
-    node: Node;
+    node: Node | null;
+    violationMap: Map<string, VacuumResult>;
     renderProblems: boolean;
+    constructor();
+    activatePovMode(): void;
+    requestDiagram(): void;
+    renderPovButton(): TemplateResult<1>;
+    renderDiagramButton(): TemplateResult<1>;
     render(): TemplateResult<1>;
     renderLocation(): TemplateResult;
     renderPath(): TemplateResult;
-    renderLabel(objectType: string): TemplateResult;
+    renderLabel(objectType: string | undefined): TemplateResult;
 }

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

@@ -27,22 +27,88 @@ import './tag.js';
 import './document.js';
 import './responses.js';
 import '../model-icon/model-icon.js';
+import '@shoelace-style/shoelace/dist/components/tooltip/tooltip.js';
+import '@shoelace-style/shoelace/dist/components/button/button.js';
+import '@shoelace-style/shoelace/dist/components/icon/icon.js';
 import { customElement, property } from "lit/decorators.js";
 import { html } from "lit";
 import renderedNodeCss from "./rendered-node.css.js";
 import './rendered-property.js';
 import sharedCss from "../../css/shared.css.js";
-import { HasExamples } from "./clickable-ref";
-import modelSharedCss from "./model-shared.css";
-import { NodeType } from "../../model/node_type";
-import { IconSize } from "../model-icon/model-icon";
+import { HasExamples } from "./clickable-ref.js";
+import modelSharedCss from "./model-shared.css.js";
+import { NodeType } from "../../model/node_type.js";
+import { IconSize } from "../model-icon/model-icon.js";
+import { ExplorerPovModeClicked, DiagramRequested } from "../../events/doctor.js";
+import buttonCss from "../../css/button.css.js";
+import tooltipCss from "../../css/tooltip.css.js";
+import '../premium-gate/premium-gate.js';
 let RenderedNodeComponent = class RenderedNodeComponent extends HasExamples {
+    constructor() {
+        super();
+        this.renderProblems = true;
+    }
+    activatePovMode() {
+        if (this.node) {
+            this.dispatchEvent(new CustomEvent(ExplorerPovModeClicked, {
+                bubbles: true,
+                composed: true,
+                detail: {
+                    nodeId: this.node.id
+                }
+            }));
+        }
+    }
+    requestDiagram() {
+        if (this.node) {
+            this.dispatchEvent(new CustomEvent(DiagramRequested, {
+                bubbles: true,
+                composed: true,
+                detail: {
+                    nodeId: this.node.id,
+                    jsonPath: this.node.id,
+                    nodeType: this.node.type,
+                    title: this.node.label
+                }
+            }));
+        }
+    }
+    renderPovButton() {
+        return html `
+                <sl-tooltip content="View this object in the explorer as a focused graph, only the direct ancestors are shown">
+                <sl-button @click="${() => this.activatePovMode()}" class="pov-button"
+                                title="Point of view mode - re-build graph around this node">
+                    <sl-icon slot="prefix" name="binoculars"></sl-icon>
+                   focused view
+                </sl-button>
+                </sl-tooltip>`;
+    }
+    renderDiagramButton() {
+        // this is only available to objects that contain a schema.
+        if ((this.node && this.node.instance && this.node.instance.hasOwnProperty('schema')) || this.node?.type === 'schema') {
+            return html `
+                <pb33f-premium-gate dialogTitle="Show us your credentials, partner"
+                                    featureName="Diagram Generation"
+                                    featureExplanation="Howdy! We'd love to generate a diagram of this object for you, 
+ however, we're going to need you to authenticate first. Tell us who you are, and we will give you a bunch of free credit to use.">
+                    
+            <sl-tooltip content="View this object as a UML class diagram">
+                <sl-button @click="${() => this.requestDiagram()}" class="diagram-button premium"
+                           title="View this object as a UML class diagram">
+                    <sl-icon slot="prefix" name="diagram-3"></sl-icon>
+                    diagramify
+                </sl-button>
+            </sl-tooltip>
+                </pb33f-premium-gate>`;
+        }
+        return html ``;
+    }
     render() {
         if (!this.node) {
             return html `
                 <div class="rendered-node">
                     <sl-icon name="arrow-left" style="vertical-align: middle; font-size: 1.3rem; color: var(--primary-color)"></sl-icon>
-                    <span style="color: var(--primary-color)">Select something...</span>
+                    <span style="color: var(--primary-color); text-transform: uppercase">Select an object...</span>
                 </div>`;
         }
         // render node based on type
@@ -59,112 +125,106 @@ let RenderedNodeComponent = class RenderedNodeComponent extends HasExamples {
                 break;
             case NodeType.EXAMPLE:
             case NodeType.EXAMPLES:
-                this.renderProblems = true;
                 renderedNode = html `${this.renderExamples(null, this.node.instance)}`;
                 break;
             case NodeType.ENCODING:
-                this.renderProblems = true;
                 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} .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} .changes=${this.node.timeline} name="${this.node.label}" .changes=${this.node.timeline}></pb33f-rendered-parameter-node>`;
+                renderedNode = html `<pb33f-rendered-parameter-node .parameter=${this.node.instance} .changes=${this.node.timeline} name="${this.node.label}"></pb33f-rendered-parameter-node>`;
                 break;
             case NodeType.LINK:
-                this.renderProblems = true;
                 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} .changes=${this.node.timeline} name="${this.node.label}"></pb33f-rendered-response-node>`;
                 break;
             case NodeType.RESPONSES:
-                this.renderProblems = true;
                 renderedNode = html `<pb33f-rendered-responses-node .responses=${this.node.instance} name="${this.node.label}"></pb33f-rendered-responses-node>`;
                 break;
             case NodeType.OPERATION:
-                this.renderProblems = true;
                 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} .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} .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} .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} .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} .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} .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} .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} .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} .changes=${this.node.timeline}></pb33f-rendered-info-node>`;
                 break;
             case NodeType.DOCUMENT:
                 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} .changes=${this.node.timeline}></pb33f-rendered-tag-node>`;
-                this.renderProblems = true;
                 break;
             default:
-                this.renderProblems = true;
                 renderedNode = html `<pb33f-rendered-property .value="${this.node.instance}"></pb33f-rendered-property>`;
                 if (!this.node.instance || Object.keys(this.node.instance).length === 0) {
                     renderedNode = html `<span class="empty-node">Defined on line [${this.node.keyLine}]</span>`;
                 }
         }
         let vacuumResults = html ``;
-        if (this.node.results && this.renderProblems) {
-            vacuumResults = html `
-                <div class="vacuum-results margin-top">
-                    <h5>Problems (${this.node.results.length})</h5>
-                    <hr/>
-                    <div class="results">
-                        ${this.node.results.map((result) => {
-                return html `
-                                <pb33f-rendered-problem-node .message="${result.message}" .severity="${result.ruleSeverity}" .path="${result.path}" .ruleId="${result.ruleId}"></pb33f-rendered-problem-node>
-                                <hr/>
-                            `;
-            })}
+        if (this.node.violationIds && this.node.violationIds.length > 0 && this.violationMap && this.renderProblems) {
+            const results = this.node.violationIds
+                .map(id => this.violationMap.get(id))
+                .filter((r) => !!r);
+            if (results.length > 0) {
+                vacuumResults = html `
+                    <div class="vacuum-results margin-top">
+                        <h5>Problems (${results.length})</h5>
+                        <hr/>
+                        <div class="results">
+                            ${results.map((result) => {
+                    return html `
+                                    <pb33f-rendered-problem-node .message="${result.message}" .severity="${result.ruleSeverity}" .path="${result.path}" .ruleId="${result.ruleId}"></pb33f-rendered-problem-node>
+                                    <hr/>
+                                `;
+                })}
+                        </div>
                     </div>
-                </div>
-            `;
+                `;
+            }
         }
+        let title = () => {
+            if (this.node?.type === NodeType.OPERATION) {
+                return html `${this.renderLabel(this.node?.label)}`;
+            }
+            return html `<pb33f-model-icon icon="${this.node?.type}"></pb33f-model-icon> ${this.renderLabel(this.node?.label)}`;
+        };
         return html `
             <div class="rendered-node">
-                <pb33f-model-icon icon="${this.node.type}"></pb33f-model-icon>
-                <sl-badge>${this.node.type.replace(/([a-z])([A-Z])/g, '$1 $2').toLowerCase()}</sl-badge>
-                <h3>${this.renderLabel(this.node.label)}</h3>
+                <h3>${title()}</h3>
                 ${this.renderPath()}
                 <hr/>
+                <div class="button-group">
+                    ${this.renderPovButton()}
+                    ${this.renderDiagramButton()}
+                </div>
+                <hr/>
                 ${this.renderLocation()}
                 <div class="rendered-node-container">
                     ${renderedNode}
@@ -174,51 +234,54 @@ let RenderedNodeComponent = class RenderedNodeComponent extends HasExamples {
         `;
     }
     renderLocation() {
-        if (this.node.origin && this.node.origin != "/root.yaml") {
+        if (this.node?.origin && this.node.origin !== "/root.yaml") {
             return html `
                 <div class="origin-location">
                     <pb33f-model-icon size="${IconSize.small}" icon="${NodeType.ROLODEX_FILE}"></pb33f-model-icon>
-                    Origin: <strong>${this.node.origin}</strong>
+                    ORIGIN: <strong>${this.node.origin}</strong>
                 </div>
                 <hr/>`;
         }
         return html ``;
     }
     renderPath() {
-        if (this.node.type === NodeType.DOCUMENT) {
+        if (this.node?.type === NodeType.DOCUMENT) {
             return html ``;
         }
-        if (this.node.label.charAt(0) !== '/') {
-            return html ` <span class="node-path">$.<pb33f-render-json-path path="${this.node.id}"></pb33f-render-json-path></span>`;
+        if (this.node?.label.charAt(0) !== '/') {
+            return html ` <span class="node-path">$.<pb33f-render-json-path path="${this.node?.id}"></pb33f-render-json-path></span>`;
         }
         return html ``;
     }
     renderLabel(objectType) {
-        if (objectType == 'GET')
+        if (objectType === 'GET')
             return html `<pb33f-http-method method="GET"  large>`;
-        if (objectType == 'POST')
+        if (objectType === 'POST')
             return html `<pb33f-http-method method="POST" large>`;
-        if (objectType == 'PUT')
+        if (objectType === 'PUT')
             return html `<pb33f-http-method method="PUT" large>`;
-        if (objectType == 'PATCH')
+        if (objectType === 'PATCH')
             return html `<pb33f-http-method method="PATCH" large>`;
-        if (objectType == 'DELETE')
+        if (objectType === 'DELETE')
             return html `<pb33f-http-method method="DELETE" large>`;
-        if (objectType == 'OPTIONS')
+        if (objectType === 'OPTIONS')
             return html `<pb33f-http-method method="OPTIONS" large>`;
-        if (objectType == 'HEAD')
+        if (objectType === 'HEAD')
             return html `<pb33f-http-method method="HEAD" large>`;
-        if (objectType == 'TRACE')
+        if (objectType === 'TRACE')
             return html `<pb33f-http-method method="TRACE" large>`;
-        if (objectType.charAt(0) === '/' || objectType.charAt(0) === '{')
+        if (objectType?.charAt(0) === '/' || objectType?.charAt(0) === '{')
             return html `<pb33f-render-operation-path path="${objectType}"></pb33f-render-operation-path>`;
         return html `${objectType}`;
     }
 };
-RenderedNodeComponent.styles = [sharedCss, renderedNodeCss, modelSharedCss];
+RenderedNodeComponent.styles = [sharedCss, renderedNodeCss, modelSharedCss, buttonCss, tooltipCss];
 __decorate([
     property()
 ], RenderedNodeComponent.prototype, "node", void 0);
+__decorate([
+    property()
+], RenderedNodeComponent.prototype, "violationMap", void 0);
 RenderedNodeComponent = __decorate([
     customElement('pb33f-rendered-node')
 ], RenderedNodeComponent);

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

@@ -59,7 +59,7 @@ let RenderedPropertyComponent = class RenderedPropertyComponent extends LitEleme
             if (Array.isArray(this.value['type'])) {
                 typeDef = html `
                     <div>
-                        <span class="label">type:</span> ${Array.from(this.value['type']).map((type, i) => {
+                        <span class="label">TYPE:</span> ${Array.from(this.value['type']).map((type, i) => {
                     return html `<span class="type">${type}</span> ${i + 1 < this.value['type'].length ? ', ' : ''}`;
                 })}
                     </div>`;
@@ -67,7 +67,7 @@ let RenderedPropertyComponent = class RenderedPropertyComponent extends LitEleme
             else {
                 typeDef = html `
                     <div>
-                        <span class="label">type:</span> <span class="type">${this.value['type']}</span>
+                        <span class="label">TYPE:</span> <span class="type">${this.value['type']}</span>
                     </div>`;
             }
         }
@@ -150,7 +150,7 @@ let RenderedPropertyComponent = class RenderedPropertyComponent extends LitEleme
                             <div class="object-node">
                                 <span class="${(propType.length > 0 || isRef) ? 'prop-type' : 'prop-key'}">${keyValue}</span>:
                                 ${propTypeRendered}
-                                ${required ? html `<span class="required">*required</span>` : ''}
+                                ${required ? html `<span class="required">*REQUIRED</span>` : ''}
                                 ${nested}
                             </div>
                         `;
@@ -168,7 +168,7 @@ let RenderedPropertyComponent = class RenderedPropertyComponent extends LitEleme
                                                          ?polyParent="${isPoly}"></pb33f-rendered-property>
                             </div>`;
                 if (value.length == 0) {
-                    nested = html `<span class="nested-inline">[empty]</span>`;
+                    nested = html `<span class="nested-inline">[EMPTY]</span>`;
                 }
                 return html `
                             <div>

package/dist/components/model-renderer/request-body.d.ts

@@ -2,10 +2,12 @@ import '../kv-view/kv-view.js';
 import './extensions.js';
 import './header.js';
 import './encoding.js';
+import { PropertyValues } from "lit";
 import { ClickableRef } from "./clickable-ref.js";
 import { RequestBody } from "../../model/request-body.js";
 export declare class RenderedRequestBodyNodeComponent extends ClickableRef {
     static styles: import("lit").CSSResult[];
     requestBody: RequestBody;
+    willUpdate(changedProps: PropertyValues): void;
     render(): import("lit-html").TemplateResult<1>;
 }

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

@@ -18,8 +18,12 @@ import modelSharedCss from "./model-shared.css.js";
 import formattingCss from "../../css/formatting.css.js";
 import { unsafeHTML } from "lit/directives/unsafe-html.js";
 import { marked } from "marked";
-import { RanchUtils } from "@pb33f/ranch";
 let RenderedRequestBodyNodeComponent = class RenderedRequestBodyNodeComponent extends ClickableRef {
+    willUpdate(changedProps) {
+        if (changedProps.has('requestBody')) {
+            this.resetExpandedSections();
+        }
+    }
     render() {
         let references = html ``;
         let content = html ``;
@@ -35,7 +39,7 @@ let RenderedRequestBodyNodeComponent = class RenderedRequestBodyNodeComponent ex
         if (this.requestBody?.$ref) {
             references = html `
                 <div class="link margin-top"">
-                    Reference:
+                    REFERENCE:
                     <sl-icon name="arrow-right" class="reflink reflink-icon"></sl-icon>
                     <span class="reflink" @click=${() => {
                 this.clickedRef(this.requestBody.$ref);
@@ -44,32 +48,35 @@ let RenderedRequestBodyNodeComponent = class RenderedRequestBodyNodeComponent ex
         }
         if (this.requestBody?.content) {
             content = html `
-                <h4 class="margin-top">${this.renderSection('Body Content', 'content')}</h4>
-                <div class="closed margin-bottom" id="content" style="padding-left: 20px;">
+                <h4 class="margin-top" @click="${() => this.toggleExpanded('content')}" style="cursor: pointer" aria-expanded="${this.isExpanded('content') ? 'true' : 'false'}">
+                    <sl-icon name="chevron-${this.isExpanded('content') ? 'down' : 'right'}"></sl-icon> BODY CONTENT
+                </h4>
+                ${this.isExpanded('content') ? html `
+                <div class="margin-bottom" id="content" style="padding-left: 20px;">
                 ${Object.keys(this.requestBody.content).map((mediaType) => {
-                const id = `rand-${RanchUtils.genShortId(5)}`;
                 if (mediaType != '' && this.requestBody.content && this.requestBody.content[mediaType]) {
                     return html `
-                            <h4 class="map-key">${this.renderSection(mediaType, id)}</h4>
-                            <div class="map-value closed" id="${id}">
+                            <h4 class="map-key">${mediaType}:</h4>
+                            <div class="map-value">
                                 <pb33f-rendered-mediatype-node
                                         .mediaType="${this.requestBody.content[mediaType]}"></pb33f-rendered-mediatype-node>
                             </div>`;
                 }
             })}
                 </div>
+                ` : ''}
                 <hr class="hr-nopadding margin-top"/>`;
         }
         if (this.requestBody?.required) {
             required = html `
                 <div class="required-large">
                     <sl-icon name="asterisk"></sl-icon>
-                    <strong>Required</strong></div>`;
+                    <strong>REQUIRED</strong></div>`;
         }
         if (this.requestBody?.description) {
             description = html `
                 <pb33f-rendered-description-node>
-                    <h4 class="hr-nopadding">${this.renderSection('Description', 'description')}</h4>
+                    <h4 class="hr-nopadding">${this.renderSection('DESCRIPTION', 'description')}</h4>
                     <span id="description" class="closed">${unsafeHTML(marked.parse(this.requestBody.description.toString()).toString())}</span>
                 </pb33f-rendered-description-node>`;
         }

package/dist/components/model-renderer/response.d.ts

@@ -3,6 +3,7 @@ import './extensions.js';
 import './header.js';
 import './media-type.js';
 import './link.js';
+import { PropertyValues } from "lit";
 import { ClickableRef } from "./clickable-ref.js";
 import { Response } from "../../model/response.js";
 import { HttpResponse } from "../../model/http_transaction.js";
@@ -10,6 +11,7 @@ export declare class RenderedResponseNodeComponent extends ClickableRef {
     static styles: import("lit").CSSResult[];
     response: Response;
     name: string;
+    willUpdate(changedProps: PropertyValues): void;
     showHttpDescription(resp: HttpResponse): void;
     render(): import("lit-html").TemplateResult<1>;
 }