@pb33f/cowboy-components 0.7.17 → 0.8.0

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

@@ -19,19 +19,24 @@ 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 { ExtractHTTPCodeDefinition, ExtractHTTPCodeDescription, ExtractStatusStyleFromCode } from "../../model/extract_status";
-import { ProblemDrawerEventType } from "../problem-list/details-drawer";
-import { OpenProblemDrawer } from "../../events/doctor";
+import { ExtractHTTPCodeDefinition, ExtractHTTPCodeDescription, ExtractStatusStyleFromCode } from "../../model/extract_status.js";
+import { DrawerContentType } from "../../model/drawer-content.js";
+import { OpenDrawer } from "../../events/doctor.js";
 let RenderedResponseNodeComponent = class RenderedResponseNodeComponent extends ClickableRef {
+    willUpdate(changedProps) {
+        if (changedProps.has('response')) {
+            this.resetExpandedSections();
+        }
+    }
     showHttpDescription(resp) {
-        this.dispatchEvent(new CustomEvent(OpenProblemDrawer, {
+        this.dispatchEvent(new CustomEvent(OpenDrawer, {
             bubbles: true,
             composed: true,
             detail: {
-                type: ProblemDrawerEventType.MARKDOWN,
-                customTitle: `HTTP Response Information`,
+                type: DrawerContentType.MARKDOWN,
+                title: `HTTP Response Information`,
                 body: `### HTTP Code ${resp.statusCode}
-                
+
 ${ExtractHTTPCodeDescription(resp)}`
             }
         }));
@@ -52,9 +57,9 @@ ${ExtractHTTPCodeDescription(resp)}`
             `;
         }
         if (this.response?.$ref) {
-            let label = 'Reference';
+            let label = 'REFERENCE';
             if (this.name === 'default') {
-                label = 'Default Response Reference';
+                label = 'DEFAULT RESPONSE REFERENCE';
             }
             references = html `
                 <div class="link margin-top"">
@@ -66,8 +71,11 @@ ${ExtractHTTPCodeDescription(resp)}`
         }
         if (this.response?.content) {
             content = html `
-                <h4 class="margin-top">${this.renderSection('Response Content', 'content')}</h4>
-                <div id="content" class="closed" style="padding-left: 30px;">
+                <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> RESPONSE CONTENT
+                </h4>
+                ${this.isExpanded('content') ? html `
+                <div id="content" style="padding-left: 30px;">
                 ${Object.keys(this.response.content).map((mediaType) => {
                 if (mediaType != '' && this.response.content && this.response.content[mediaType]) {
                     return html `
@@ -79,12 +87,16 @@ ${ExtractHTTPCodeDescription(resp)}`
                 }
             })}
                 </div>
+                ` : ''}
                 <hr class="hr-nopadding margin-top"/>`;
         }
         if (this.response?.headers) {
             headers = html `
-                <h4 class="margin-top">${this.renderSection('Response Headers', 'headers')}</h4>
-                <div id="headers" class="closed" style="padding-left: 30px;">
+                <h4 class="margin-top" @click="${() => this.toggleExpanded('headers')}" style="cursor: pointer" aria-expanded="${this.isExpanded('headers') ? 'true' : 'false'}">
+                    <sl-icon name="chevron-${this.isExpanded('headers') ? 'down' : 'right'}"></sl-icon> RESPONSE HEADERS
+                </h4>
+                ${this.isExpanded('headers') ? html `
+                <div id="headers" style="padding-left: 30px;">
                 ${Object.keys(this.response.headers).map((headerName) => {
                 if (headerName != '' && this.response.headers && this.response.headers[headerName]) {
                     return html `
@@ -96,12 +108,16 @@ ${ExtractHTTPCodeDescription(resp)}`
                 }
             })}
                 </div>
+                ` : ''}
                 <hr class="hr-nopadding margin-top"/>`;
         }
         if (this.response?.links) {
             links = html `
-                <h4 class="margin-top">${this.renderSection('Response Links', 'links')}</h4>
-                <div id="links" class="closed" style="padding-left: 30px;">
+                <h4 class="margin-top" @click="${() => this.toggleExpanded('links')}" style="cursor: pointer" aria-expanded="${this.isExpanded('links') ? 'true' : 'false'}">
+                    <sl-icon name="chevron-${this.isExpanded('links') ? 'down' : 'right'}"></sl-icon> RESPONSE LINKS
+                </h4>
+                ${this.isExpanded('links') ? html `
+                <div id="links" style="padding-left: 30px;">
                     ${Object.keys(this.response.links).map((linkName) => {
                 if (linkName != '' && this.response.links && this.response.links[linkName]) {
                     return html `
@@ -112,12 +128,13 @@ ${ExtractHTTPCodeDescription(resp)}`
                                     </div>`;
                 }
             })}</div>
+                ` : ''}
                 <hr class="hr-nopadding margin-top"/>`;
         }
         if (this.response?.description) {
             description = html `
                 <pb33f-rendered-description-node>
-                    <h4 class="hr-nopadding">Description</h4>
+                    <h4 class="hr-nopadding">DESCRIPTION</h4>
                     ${unsafeHTML(marked.parse(this.response.description.toString()).toString())}
                 </pb33f-rendered-description-node>`;
         }
@@ -137,13 +154,14 @@ ${ExtractHTTPCodeDescription(resp)}`
                     ${code} / <em>${ExtractHTTPCodeDefinition(resp)}</em>
                     <sl-icon-button class="title-question"
                                     name="question-square"
+                                    label="Show HTTP description"
                                     @click="${() => this.showHttpDescription(resp)}"></sl-icon-button>
                 </h3>`;
         }
         if (this.name === 'default') {
             httpCode = html `
                 <h3 class="title-container">
-                    Default Response
+                   DEFAULT RESPONSE
                 </h3>`;
         }
         return html `

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

@@ -18,7 +18,7 @@ export default css `
     }
     
     .key {
-        color: var(--primary-color);   
+        color: var(--primary-color);
         font-family: var(--font-stack-bold), monospace;
     }
 
@@ -30,6 +30,8 @@ export default css `
         padding-right: 10px;
         text-align: right;
         border-right: 1px dotted var(--secondary-color-dimmer);
+        text-transform: uppercase;
+        letter-spacing: 0.02em;
     }
     
     .skinny-root {
@@ -141,4 +143,11 @@ export default css `
         margin-top: 5px;
         margin-bottom: 5px;
     }
+
+    .type-box {
+        display: inline-block;
+        min-width: 55px;
+        text-align: center;
+        margin-right: 5px;
+    }
 `;

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

@@ -1,6 +1,6 @@
 import './description.js';
 import './example.js';
-import { TemplateResult } from "lit";
+import { PropertyValues, TemplateResult } from "lit";
 import { Schema } from "../../model/schema.js";
 import { HasExamples } from "./clickable-ref.js";
 export declare class RenderedSchemaNodeComponent extends HasExamples {
@@ -12,9 +12,10 @@ export declare class RenderedSchemaNodeComponent extends HasExamples {
     skinny: boolean;
     required: string[];
     constructor();
+    willUpdate(changedProps: PropertyValues): void;
+    private renderTypeBox;
     renderMockRequest(e: CustomEvent): void;
     render(): TemplateResult<1>;
-    toggleNode(id: string): void;
     renderNoExample(): TemplateResult<1>;
     renderObject(key: string, obj: any, required?: string[]): TemplateResult<1>;
 }

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

@@ -14,43 +14,61 @@ import schemaCss from "./schema.css.js";
 import { extractNameFromRef } from "./render-utils.js";
 import { HasExamples } from "./clickable-ref.js";
 import { ModelService } from "../../services/model-service.js";
-import { AddToast, GenerateMockFromSchema, OpenProblemDrawer } from "../../events/doctor.js";
-import { ProblemDrawerEventType } from "../problem-list/details-drawer.js";
+import { AddToast, GenerateMockFromSchema, OpenDrawer } from "../../events/doctor.js";
+import { DrawerContentType } from "../../model/drawer-content.js";
 import { ToastType } from "../../model/toast.js";
-import modelSharedCss from "./model-shared.css";
+import modelSharedCss from "./model-shared.css.js";
 import { unsafeHTML } from "lit/directives/unsafe-html.js";
 import { marked } from "marked";
 import listsCss from "../../css/lists.css.js";
 import sharedCss from "../../css/shared.css.js";
 import { extractExtensions } from "../../model/media-type.js";
+import { typedEventHandler } from "../../helpers/typed-events.js";
 let RenderedSchemaNodeComponent = class RenderedSchemaNodeComponent extends HasExamples {
     constructor() {
         super();
-        // @ts-ignore
-        this.addEventListener(GenerateMockFromSchema, this.renderMockRequest.bind(this));
+        this.addEventListener(GenerateMockFromSchema, typedEventHandler(this.renderMockRequest.bind(this)));
+    }
+    willUpdate(changedProps) {
+        if (changedProps.has('schema')) {
+            this.resetExpandedSections();
+        }
+    }
+    renderTypeBox(type) {
+        if (Array.isArray(type)) {
+            return type.map((item, i) => html `<code class="type-box">${item}</code>${i < type.length - 1 ? html `,&nbsp;&nbsp;` : ''}`);
+        }
+        return [html `<code class="type-box">${type}</code>`];
     }
     renderMockRequest(e) {
         e.stopPropagation();
-        ModelService.generateMock(JSON.stringify(this.schema)).then((response) => {
-            this.dispatchEvent(new CustomEvent(OpenProblemDrawer, {
+        const brokerId = this.getBrokerId();
+        ModelService.generateMock(JSON.stringify(this.schema), brokerId).then((response) => {
+            this.dispatchEvent(new CustomEvent(OpenDrawer, {
                 bubbles: true,
                 composed: true,
                 detail: {
-                    type: ProblemDrawerEventType.RENDERED_EXAMPLE,
-                    render: response
+                    type: DrawerContentType.RENDERED_EXAMPLE,
+                    json: response
                 }
             }));
         }).catch((e) => {
+            let title = 'Mock failed';
+            let body = e.detail ? e.detail : e.message ? e.message : e;
+            if (e?.instance === 'https://pb33f.io/errors/no-credit-remaining') {
+                title = '💰 Credit Exhausted!';
+                body = 'Run out of credit, please authenticate for more or wait 24 hours.';
+            }
             this.dispatchEvent(new CustomEvent(AddToast, {
                 bubbles: true,
                 composed: true,
                 detail: {
                     toast: {
-                        title: 'Mock failed',
+                        title,
                         id: crypto.randomUUID(),
                         type: ToastType.ERROR,
                         time: new Date().toISOString(),
-                        body: e.detail ? e.detail : e.message ? e.message : e
+                        body
                     },
                 }
             }));
@@ -73,12 +91,11 @@ let RenderedSchemaNodeComponent = class RenderedSchemaNodeComponent extends HasE
         }
         const sch = this.schema;
         if (isHasRef(sch)) {
-            const segs = this.schema?.$ref?.split('/');
-            // @ts-ignore
-            const refName = segs[segs.length - 1].replaceAll('~1', '/');
+            const segs = this.schema?.$ref?.split('/') ?? [];
+            const refName = segs[segs.length - 1]?.replaceAll('~1', '/') ?? '';
             return html `
                 <div class="link margin-top">
-                    Schema Reference: 
+                    SCHEMA REF: 
                     <sl-icon name="arrow-right" class="reflink reflink-icon"></sl-icon>
                     <span class="inline-ref reflink" @click=${() => {
                 this.clickedRef(this.schema?.$ref);
@@ -94,10 +111,17 @@ let RenderedSchemaNodeComponent = class RenderedSchemaNodeComponent extends HasE
             <hr class="hr-nopadding">
             </div>`;
         }
+        let examples = this.renderNoExample();
+        if (this.schema?.examples && Object.keys(this.schema.examples).length > 0) {
+            examples = this.renderExamples(this.schema.examples, this.schema?.example);
+        }
+        if (this.schema?.example) {
+            examples = this.renderExamples(this.schema?.examples, this.schema.example);
+        }
         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()}
+            ${examples}
             ${(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) : ''}
@@ -146,37 +170,19 @@ let RenderedSchemaNodeComponent = class RenderedSchemaNodeComponent extends HasE
             ${super.renderChanges()}
         `;
     }
-    toggleNode(id) {
-        let node = this.shadowRoot?.querySelector('#' + id);
-        let toggle = this.shadowRoot?.querySelector('#' + id + '-toggle');
-        if (node && toggle) {
-            if (node.classList.contains('hide')) {
-                node.classList.remove('hide');
-                toggle.innerHTML = `<sl-icon name="chevron-down" class="expand"></sl-icon>`;
-            }
-            else {
-                node.classList.add('hide');
-                toggle.innerHTML = '<sl-icon name="chevron-right" class="expand"></sl-icon>';
-            }
-        }
-    }
     renderNoExample() {
         return super.renderNoExample(this.schema);
     }
     renderObject(key, obj, required = []) {
         let renderedObject = html ``;
         let isObject = false;
-        let id = crypto.randomUUID();
-        id = `id-${id}`;
         let isPoly = false;
         switch (typeof obj) {
             case 'object':
                 if (Array.isArray(obj)) {
                     renderedObject = html `
-                        <div id="${id}" class="list">
+                        <div class="list">
                             ${obj.map((item, index) => {
-                        let id = crypto.randomUUID();
-                        id = `id-${id}`;
                         isObject = true;
                         const child = item;
                         if (child.$ref) {
@@ -194,21 +200,23 @@ let RenderedSchemaNodeComponent = class RenderedSchemaNodeComponent extends HasE
                                                   @click=${() => { this.clickedRef(child.$ref); }}>${refName}</span></div>`;
                         }
                         if (key == 'AllOf' || key == 'AnyOf' || key == 'OneOf') {
+                            const polyId = `${key}-${index}`;
                             return html `
                                         <div class="object">
                                             <span class="index-bracket">[</span><span class="index-item">${index}</span><span
                                                 class="index-bracket">]</span>
-                                            <span @click="${() => this.toggleNode(id)}" class="expand key">object</span>
-                                            <span class="expand" id="${id}-toggle"
-                                                  @click="${() => this.toggleNode(id)}">
-                                                <sl-icon class="expand" name="chevron-right"></sl-icon>
+                                            <span @click="${() => this.toggleExpanded(polyId)}" class="expand key">object</span>
+                                            <span class="expand" @click="${() => this.toggleExpanded(polyId)}" aria-expanded="${this.isExpanded(polyId) ? 'true' : 'false'}">
+                                                <sl-icon class="expand" name="chevron-${this.isExpanded(polyId) ? 'down' : 'right'}"></sl-icon>
                                             </span>
-                                            <div class="hide mong" id="${id}">
-                                                <pb33f-rendered-schema-node .required=${required} 
-                                                                            .schema="${item}"
-                                                                            objectItem
-                                                                            skinny></pb33f-rendered-schema-node>
-                                            </div>
+                                            ${this.isExpanded(polyId) ? html `
+                                                <div class="mong">
+                                                    <pb33f-rendered-schema-node .required=${required}
+                                                                                .schema="${item}"
+                                                                                objectItem
+                                                                                skinny></pb33f-rendered-schema-node>
+                                                </div>
+                                            ` : ''}
                                         </div>
                                     `;
                         }
@@ -222,37 +230,40 @@ let RenderedSchemaNodeComponent = class RenderedSchemaNodeComponent extends HasE
                                     `;
                         }
                         if (sch.type && sch.type.includes('object')) {
+                            const objId = `object-${index}`;
                             return html `
                                         <div class="object"><span class="index-bracket">[</span><span
                                                 class="index-item">${index}</span><span class="index-bracket">]</span>
-                                            <span @click="${() => {
-                                this.toggleNode(id);
-                            }}" class="expand key">object</span>
-                                            <span class="expand" id="${id}-toggle" @click="${() => {
-                                this.toggleNode(id);
-                            }}">
-                                                <sl-icon class="expand" name="chevron-right"></sl-icon></span>
-                                            <div class="hide mong" id="${id}">
-                                                <pb33f-rendered-schema-node .required=${required} 
-                                                                            .schema="${item}"
-                                                                            objectItem
-                                                                            skinny></pb33f-rendered-schema-node>
-                                            </div>
+                                            <span @click="${() => this.toggleExpanded(objId)}" class="expand key">object</span>
+                                            <span class="expand" @click="${() => this.toggleExpanded(objId)}" aria-expanded="${this.isExpanded(objId) ? 'true' : 'false'}">
+                                                <sl-icon class="expand" name="chevron-${this.isExpanded(objId) ? 'down' : 'right'}"></sl-icon>
+                                            </span>
+                                            ${this.isExpanded(objId) ? html `
+                                                <div class="mong">
+                                                    <pb33f-rendered-schema-node .required=${required}
+                                                                                .schema="${item}"
+                                                                                objectItem
+                                                                                skinny></pb33f-rendered-schema-node>
+                                                </div>
+                                            ` : ''}
                                         </div>
                                     `;
                         }
+                        const itemId = `${key}-item-${index}`;
                         return html `
                                     <div class="object"><span class="index-bracket">[</span>${index}<span
                                             class="index-bracket">]</span>
-                                        <span @click="${() => { this.toggleNode(id); }}" class="expand key  ${(key == 'AnyOf' || key == 'AllOf' || key == 'OneOf') ? 'poly-key' : ''}">${key}</span> ${item}
-                                        <span class="expand" id="${id}-toggle" @click="${() => { this.toggleNode(id); }}">
-                                            <sl-icon class="expand" name="chevron-right"></sl-icon>
+                                        <span @click="${() => this.toggleExpanded(itemId)}" class="expand key ${(key == 'AnyOf' || key == 'AllOf' || key == 'OneOf') ? 'poly-key' : ''}">${key}</span> ${item}
+                                        <span class="expand" @click="${() => this.toggleExpanded(itemId)}" aria-expanded="${this.isExpanded(itemId) ? 'true' : 'false'}">
+                                            <sl-icon class="expand" name="chevron-${this.isExpanded(itemId) ? 'down' : 'right'}"></sl-icon>
                                         </span>
-                                        <div class="hide mong" id="${id}">
-                                            <pb33f-rendered-schema-node .schema="${item}" 
-                                                                        objectItem 
-                                                                        skinny></pb33f-rendered-schema-node>
-                                        </div>
+                                        ${this.isExpanded(itemId) ? html `
+                                            <div class="mong">
+                                                <pb33f-rendered-schema-node .schema="${item}"
+                                                                            objectItem
+                                                                            skinny></pb33f-rendered-schema-node>
+                                            </div>
+                                        ` : ''}
                                     </div>
                                 `;
                     })}
@@ -264,8 +275,6 @@ let RenderedSchemaNodeComponent = class RenderedSchemaNodeComponent extends HasE
                         if (required?.includes(mapKey) || this.required?.includes(mapKey)) {
                             req = html `<span class="required"><sl-icon name="asterisk"></sl-icon></span>`;
                         }
-                        let id = crypto.randomUUID();
-                        id = `id-${id}`;
                         if (mapKey == '$ref') {
                             const segs = obj[mapKey].split('/');
                             const refName = segs[segs.length - 1].replaceAll('~1', '/');
@@ -277,58 +286,43 @@ let RenderedSchemaNodeComponent = class RenderedSchemaNodeComponent extends HasE
                             }}>${refName}</span></div>`;
                         }
                         else {
-                            //check if the mapKey is 'properties, if so, for each property, re-render
                             if (mapKey == 'properties') {
-                                // child is an object, so extract the keys and treat them as schemas
                                 const keys = Object.keys(obj[mapKey]);
-                                // for each key, render the schema
                                 const templates = [];
                                 keys.forEach((key) => {
                                     const child = obj[mapKey][key];
-                                    let sub = html ``;
-                                    if (Object.keys(obj[mapKey]).length > 1) {
-                                        sub = html `
-                                            <div class="object">
-                                                <pb33f-rendered-schema-node .schema="${child}" objectItem
-                                                                            skinny></pb33f-rendered-schema-node>
-                                            </div>`;
-                                    }
-                                    let v = [];
-                                    if (child.type) {
-                                        if (Array.isArray(child.type)) {
-                                            for (let i = 0; i < child.type.length; i++) {
-                                                const item = child.type[i];
-                                                v.push(html `<code>${item}</code>`);
-                                                if (i < child.type.length - 1) {
-                                                    v.push(html `<span>,&nbsp;&nbsp;</span>`);
-                                                }
-                                            }
-                                        }
-                                        else {
-                                            v.push(html `<code>${child.type}</code>`);
-                                        }
-                                    }
+                                    const v = child.type ? this.renderTypeBox(child.type) : [];
+                                    const nestedPropId = `nested-prop-${key}`;
+                                    const hasMoreProps = Object.keys(obj[mapKey]).length > 1;
                                     templates.push(html `
                                         <div class="object">
-                                            <span class="key">${key} ${v}: </span> 
-                                            ${sub}
+                                            ${v}<span class="key">${key}</span>
+                                            ${hasMoreProps ? html `
+                                                <span class="expand" @click="${() => this.toggleExpanded(nestedPropId)}" aria-expanded="${this.isExpanded(nestedPropId) ? 'true' : 'false'}">
+                                                    <sl-icon class="expand" name="chevron-${this.isExpanded(nestedPropId) ? 'down' : 'right'}"></sl-icon>
+                                                </span>
+                                                ${this.isExpanded(nestedPropId) ? html `
+                                                    <div class="mong">
+                                                        <pb33f-rendered-schema-node .schema="${child}" objectItem skinny></pb33f-rendered-schema-node>
+                                                    </div>
+                                                ` : ''}
+                                            ` : ''}
                                         </div>`);
                                 });
+                                const propsId = `properties-${mapKey}`;
                                 return html `
                                     <div class="object expandable">
-                                        <span @click="${() => {
-                                    this.toggleNode(id);
-                                }}" class="expand key">${mapKey}</span>
-                                        <span class="expand" id="${id}-toggle" @click="${() => {
-                                    this.toggleNode(id);
-                                }}">
-                                        <sl-icon class="expand" name="chevron-right"></sl-icon>
-                                    </span>
-                                        <div class="hide mong" id="${id}">
-                                          ${templates}
-                                        </div>
+                                        <span @click="${() => this.toggleExpanded(propsId)}" class="expand key">${mapKey}</span>
+                                        <span class="expand" @click="${() => this.toggleExpanded(propsId)}" aria-expanded="${this.isExpanded(propsId) ? 'true' : 'false'}">
+                                            <sl-icon class="expand" name="chevron-${this.isExpanded(propsId) ? 'down' : 'right'}"></sl-icon>
+                                        </span>
+                                        ${this.isExpanded(propsId) ? html `
+                                            <div class="mong">
+                                                ${templates}
+                                            </div>
+                                        ` : ''}
                                     </div>
-                                    `;
+                                `;
                             }
                             isObject = true;
                             const child = obj[mapKey];
@@ -346,33 +340,37 @@ let RenderedSchemaNodeComponent = class RenderedSchemaNodeComponent extends HasE
                                 `;
                             }
                             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) {
-                                    sub = html `
-                                        <div class="object">
-                                            <pb33f-rendered-schema-node .schema="${obj[mapKey]}" objectItem
-                                                                        skinny></pb33f-rendered-schema-node>
-                                        </div>`;
-                                }
+                                const hasMoreProps = Object.keys(obj[mapKey]).length > 1;
+                                const childTypeId = `child-type-${mapKey}`;
                                 return html `
                                     <div class="object">
-                                       <span class="key  ${(key == 'AnyOf' || key == 'AllOf' || key == 'OneOf') ? 'poly-key' : ''}">${mapKey}</span> <code>${child.type}</code> ${req} ${sub}
+                                       ${this.renderTypeBox(child.type)}<span class="key ${(key == 'AnyOf' || key == 'AllOf' || key == 'OneOf') ? 'poly-key' : ''}">${mapKey}</span> ${req}
+                                       ${hasMoreProps ? html `
+                                           <span class="expand" @click="${() => this.toggleExpanded(childTypeId)}" aria-expanded="${this.isExpanded(childTypeId) ? 'true' : 'false'}">
+                                               <sl-icon class="expand" name="chevron-${this.isExpanded(childTypeId) ? 'down' : 'right'}"></sl-icon>
+                                           </span>
+                                           ${this.isExpanded(childTypeId) ? html `
+                                               <div class="mong">
+                                                   <pb33f-rendered-schema-node .schema="${obj[mapKey]}" objectItem skinny></pb33f-rendered-schema-node>
+                                               </div>
+                                           ` : ''}
+                                       ` : ''}
                                     </div>`;
                             }
+                            const objMapId = `obj-${mapKey}`;
                             return html `
                                 <div class="object expandable">
-                                    <span @click="${() => {
-                                this.toggleNode(id);
-                            }}" class="expand key  ${(mapKey == 'AnyOf' || mapKey == 'AllOf' || mapKey == 'OneOf') ? 'poly-key' : ''}">${mapKey}</span> 
-                                    <span class="expand" id="${id}-toggle" @click="${() => { this.toggleNode(id); }}">
-                                        <sl-icon class="expand" name="chevron-right"></sl-icon>
+                                    <span @click="${() => this.toggleExpanded(objMapId)}" class="expand key ${(mapKey == 'AnyOf' || mapKey == 'AllOf' || mapKey == 'OneOf') ? 'poly-key' : ''}">${mapKey}</span>
+                                    <span class="expand" @click="${() => this.toggleExpanded(objMapId)}" aria-expanded="${this.isExpanded(objMapId) ? 'true' : 'false'}">
+                                        <sl-icon class="expand" name="chevron-${this.isExpanded(objMapId) ? 'down' : 'right'}"></sl-icon>
                                     </span>
                                     ${req}
-                                    <div class="hide mong" id="${id}">
-                                        <pb33f-rendered-schema-node .schema="${obj[mapKey]}" objectItem
-                                                                    skinny></pb33f-rendered-schema-node>
-                                    </div>
+                                    ${this.isExpanded(objMapId) ? html `
+                                        <div class="mong">
+                                            <pb33f-rendered-schema-node .schema="${obj[mapKey]}" objectItem
+                                                                        skinny></pb33f-rendered-schema-node>
+                                        </div>
+                                    ` : ''}
                                 </div>
                                 ${super.renderChanges()}
                             `;
@@ -387,7 +385,7 @@ let RenderedSchemaNodeComponent = class RenderedSchemaNodeComponent extends HasE
                 break;
             case 'string':
                 if (obj == 'object' || obj == 'number' || obj == 'string' || obj == 'boolean' || obj == 'array' || obj == 'null' || obj == 'integer' || obj == 'float') {
-                    renderedObject = html `<code class="root ${this.skinny ? 'skinny-root' : ''}">${obj}</code>`;
+                    renderedObject = html `<code class="type-box root ${this.skinny ? 'skinny-root' : ''}">${obj}</code>`;
                     break;
                 }
                 renderedObject = html `
@@ -401,7 +399,7 @@ let RenderedSchemaNodeComponent = class RenderedSchemaNodeComponent extends HasE
                 renderedObject = html `<code class="root ${this.skinny ? 'skinny-root' : ''}">${obj}</code>`;
                 break;
         }
-        let output = html `${renderedObject}`;
+        let output = html `${renderedObject} `;
         if (key !== '' && key !== '$ref') {
             let width = 'normal';
             output = html `<span class="key-alt ${width} ${this.skinny ? 'skinny skinny-root' : ''}  ${(key == 'AnyOf' || key == 'AllOf' || key == 'OneOf') ? 'poly-key' : ''}">${key}</span>

package/dist/components/model-renderer/security-scheme.js

@@ -38,16 +38,16 @@ let RenderedSecuritySchemeNodeComponent = class RenderedSecuritySchemeNodeCompon
         if (this.securityScheme?.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 class="closed" id="description">${unsafeHTML(marked.parse(this.securityScheme.description.toString()).toString())}</span>
                 </pb33f-rendered-description-node>`;
         }
         if (this.securityScheme?.name) {
-            name = html `<div class="margin-bottom"><span class="list-key">Name:</span> 
+            name = html `<div class="margin-bottom"><span class="list-key">NAME:</span> 
                 <span class="list-value">${this.securityScheme.name}</span></div>`;
         }
         if (this.securityScheme?.in) {
-            schemeIn = html `<div class="margin-bottom"><span class="list-key">In:</span> 
+            schemeIn = html `<div class="margin-bottom"><span class="list-key">IN:</span> 
                 <pb33f-rendered-parameter-location-node type="${this.securityScheme.in}"></pb33f-rendered-parameter-location-node></div>`;
         }
         if (this.securityScheme?.type) {