@pb33f/cowboy-components 0.7.17 → 0.8.0

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

@@ -26,6 +26,11 @@ import { unsafeHTML } from "lit/directives/unsafe-html.js";
 import { marked } from "marked";
 import { ExtractStatusStyleFromCode } from "../../model/extract_status";
 let RenderedOperationNodeComponent = class RenderedOperationNodeComponent extends ClickableRef {
+    willUpdate(changedProps) {
+        if (changedProps.has('operation')) {
+            this.resetExpandedSections();
+        }
+    }
     render() {
         let references = html ``;
         let top = html ``;
@@ -45,7 +50,7 @@ let RenderedOperationNodeComponent = class RenderedOperationNodeComponent extend
         if (this.operation?.$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.operation.$ref);
@@ -55,7 +60,7 @@ let RenderedOperationNodeComponent = class RenderedOperationNodeComponent extend
         if (this.operation?.summary) {
             summary = html `
                 <pb33f-rendered-description-node>
-                    <h4 class="hr-nopadding">${this.renderSection('Summary', 'summary', true)}</h4>
+                    <h4 class="hr-nopadding">${this.renderSection('SUMMARY', 'summary', true)}</h4>
                     <span id="summary"
                           class="open">${unsafeHTML(marked.parse(this.operation.summary.toString()).toString())}</span>
                 </pb33f-rendered-description-node>`;
@@ -63,7 +68,7 @@ let RenderedOperationNodeComponent = class RenderedOperationNodeComponent extend
         if (this.operation?.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.operation.description.toString()).toString())}</span>
                 </pb33f-rendered-description-node>`;
@@ -78,8 +83,11 @@ let RenderedOperationNodeComponent = class RenderedOperationNodeComponent extend
         if (this.operation?.parameters) {
             parameters = html `
                 <hr class="hr-nopadding">
-                <h4 class="margin-top">${this.renderSection('Parameters', 'parameters')}</h4>
-                <div id="parameters" class="closed">
+                <h4 class="margin-top" @click="${() => this.toggleExpanded('parameters')}" style="cursor: pointer" aria-expanded="${this.isExpanded('parameters') ? 'true' : 'false'}">
+                    <sl-icon name="chevron-${this.isExpanded('parameters') ? 'down' : 'right'}"></sl-icon> PARAMETERS
+                </h4>
+                ${this.isExpanded('parameters') ? html `
+                <div id="parameters" style="padding-left: 20px;">
                     ${this.operation.parameters.map((parameter, idx) => {
                 return html `
                             <div class="flex margin-bottom">
@@ -93,23 +101,31 @@ let RenderedOperationNodeComponent = class RenderedOperationNodeComponent extend
                         `;
             })}
                 </div>
+                ` : ''}
                 <hr class="hr-nopadding">
             `;
         }
         if (this.operation?.requestBody) {
             requestBody = html `
-                <h4 class="margin-top">${this.renderSection('Request Body ', 'request-body')}</h4>
-                <div id="request-body" class="closed" style="margin-left: 20px;">
+                <h4 class="margin-top" @click="${() => this.toggleExpanded('request-body')}" style="cursor: pointer" aria-expanded="${this.isExpanded('request-body') ? 'true' : 'false'}">
+                    <sl-icon name="chevron-${this.isExpanded('request-body') ? 'down' : 'right'}"></sl-icon> REQUEST BODY
+                </h4>
+                ${this.isExpanded('request-body') ? html `
+                <div id="request-body" style="margin-left: 20px;">
                     <pb33f-rendered-requestbody-node
                             .requestBody="${this.operation.requestBody}"></pb33f-rendered-requestbody-node>
                 </div>
+                ` : ''}
                 <hr class="hr-nopadding">
             `;
         }
         if (this.operation?.responses) {
             responses = html `
-                <h4 class="margin-top">${this.renderSection('Responses', 'responses')}</h4>
-                <div id="responses" class="closed ">
+                <h4 class="margin-top" @click="${() => this.toggleExpanded('responses')}" style="cursor: pointer" aria-expanded="${this.isExpanded('responses') ? 'true' : 'false'}">
+                    <sl-icon name="chevron-${this.isExpanded('responses') ? 'down' : 'right'}"></sl-icon> RESPONSES
+                </h4>
+                ${this.isExpanded('responses') ? html `
+                <div id="responses" style="padding-left: 20px;">
                     ${Object.keys(this.operation.responses).map(key => {
                 const response = this.operation.responses[key];
                 let clazz = '';
@@ -138,6 +154,7 @@ let RenderedOperationNodeComponent = class RenderedOperationNodeComponent extend
                         `;
             })}
                 </div>
+                ` : ''}
                 <hr class="hr-nopadding">
             `;
         }
@@ -145,13 +162,13 @@ let RenderedOperationNodeComponent = class RenderedOperationNodeComponent extend
             let operationId = html ``;
             if (this.operation?.operationId) {
                 operationId = html `
-                    <div style="margin-right: ${this.operation.tags ? 'margin-right: 10px;' : 'width:100%;'}">
-                        <h4>Operation ID</h4>
+                    <div style="${this.operation.tags ? 'margin-right: 20px;' : 'width:100%;'}">
+                        <h4>OPERATION ID</h4>
                         <span class="tag-alt"><strong>${this.operation.operationId}</strong></span>
                         ${this.operation.deprecated ? html `
                             <div class="deprecated-large">
                                 <sl-icon name="exclamation-triangle"></sl-icon>
-                                <strong>Deprecated!</strong></div>` : html ``}
+                                <strong>DEPRECATED!</strong></div>` : html ``}
                     </div>
                 `;
             }
@@ -161,7 +178,7 @@ let RenderedOperationNodeComponent = class RenderedOperationNodeComponent extend
                         <div style="${this.operation.tags ? 'margin-right: 10px;' : 'width:100%;'}">
                             <div class="deprecated-large">
                                 <sl-icon name="exclamation-triangle"></sl-icon>
-                                <strong>Deprecated!</strong></div>
+                                <strong>DEPRECATED!</strong></div>
                         </div>`;
                 }
             }
@@ -169,7 +186,7 @@ let RenderedOperationNodeComponent = class RenderedOperationNodeComponent extend
             if (this.operation?.tags) {
                 tag = html `
                     <div>
-                        <h4>${this.renderSection('Tags', 'tags-list')}</h4>
+                        <h4>${this.renderSection(html `TAGS (${this.operation.tags.length})`, 'tags-list')}</h4>
                         <ul id="tags-list" class="closed">
                             ${this.operation.tags.map(tag => html `
                                 <li><span class="tag">${tag}</sl-tag></li>`)}
@@ -185,8 +202,11 @@ let RenderedOperationNodeComponent = class RenderedOperationNodeComponent extend
         }
         if (this.operation?.servers) {
             servers = html `
-                <h4 class="margin-top">${this.renderSection('Servers', 'servers')}</h4>
-                <div id="servers" class="closed margin-top" style="padding-left: 20px;">
+                <h4 class="margin-top" @click="${() => this.toggleExpanded('servers')}" style="cursor: pointer" aria-expanded="${this.isExpanded('servers') ? 'true' : 'false'}">
+                    <sl-icon name="chevron-${this.isExpanded('servers') ? 'down' : 'right'}"></sl-icon> SERVERS
+                </h4>
+                ${this.isExpanded('servers') ? html `
+                <div id="servers" class="margin-top" style="padding-left: 20px;">
                     ${this.operation.servers.map((server, idx) => {
                 return html `
                             <div class="flex">
@@ -196,6 +216,7 @@ let RenderedOperationNodeComponent = class RenderedOperationNodeComponent extend
                             </div>`;
             })}
                 </div>
+                ` : ''}
                 <hr class="margin-bottom"/>
             `;
         }

package/dist/components/model-renderer/param-location.js

@@ -16,11 +16,11 @@ let RenderedParameterNodeComponent = class RenderedParameterNodeComponent extend
             case 'query':
                 return html `<span class="list-value">
                     <sl-icon name="question-lg" 
-                             style="font-size: 1rem; vertical-align: text-top"></sl-icon> Query String</span>`;
+                             style="font-size: 1rem; vertical-align: text-top"></sl-icon> QUERY STRING</span>`;
             case 'header':
                 return html `<span class="list-value">
                     <sl-icon name="envelope-paper" 
-                             style="font-size: 1rem; vertical-align: text-top"></sl-icon> Header</span>`;
+                             style="font-size: 1rem; vertical-align: text-top"></sl-icon> HEADER</span>`;
             case 'path':
                 return html `<span class="list-value">
                     <sl-icon name="braces-asterisk" 
@@ -28,7 +28,7 @@ let RenderedParameterNodeComponent = class RenderedParameterNodeComponent extend
             case 'cookie':
                 return html `<span class="list-value">
                     <sl-icon name="cookie" 
-                             style="font-size: 1rem; vertical-align: text-top"></sl-icon> Cookie</span>`;
+                             style="font-size: 1rem; vertical-align: text-top"></sl-icon> COOKIE</span>`;
             default:
                 return html ``;
         }

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

@@ -3,11 +3,13 @@ import './extensions.js';
 import './param-location.js';
 import './description.js';
 import { HasExamples } from "./clickable-ref.js";
+import { PropertyValues } from "lit";
 import { Parameter } from "../../model/parameter.js";
 export declare class RenderedParameterNodeComponent extends HasExamples {
     static styles: import("lit").CSSResult[];
     parameter: Parameter;
     name: string;
     constructor();
+    willUpdate(changedProps: PropertyValues): void;
     render(): import("lit-html").TemplateResult<1>;
 }

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

@@ -24,12 +24,17 @@ let RenderedParameterNodeComponent = class RenderedParameterNodeComponent extend
     constructor() {
         super();
     }
+    willUpdate(changedProps) {
+        if (changedProps.has('parameter')) {
+            this.resetExpandedSections();
+        }
+    }
     render() {
         if (isHasRef(this.parameter)) {
             const hasRef = this.parameter;
             return html `
                 <div class="link">
-                    Reference:
+                    REFERENCE:
                     <sl-icon name="arrow-right" class="reflink reflink-icon"></sl-icon>
                     <span class="inline-ref reflink" @click=${() => {
                 this.clickedRef(hasRef.$ref);
@@ -57,14 +62,14 @@ let RenderedParameterNodeComponent = class RenderedParameterNodeComponent extend
         if (this.parameter.summary) {
             summary = html `
                 <pb33f-rendered-description-node>
-                    <h4 class="hr-nopadding">${this.renderSection('Summary', 'summary')}</h4>
+                    <h4 class="hr-nopadding">${this.renderSection('SUMMARY', 'summary')}</h4>
                     <span id="summary" class="closed">${unsafeHTML(marked.parse(this.parameter.summary.toString()).toString())}<span>
                 </pb33f-rendered-description-node>`;
         }
         if (this.parameter.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.parameter.description.toString()).toString())}</span>
                 </pb33f-rendered-description-node>`;
         }
@@ -72,43 +77,50 @@ let RenderedParameterNodeComponent = class RenderedParameterNodeComponent extend
             required = html `
                 <div class="required-large">
                     <sl-icon name="asterisk"></sl-icon>
-                    <strong>Required</strong>
+                    <strong>REQUIRED</strong>
                 </div>`;
         }
         if (this.parameter.deprecated) {
             deprecated = html `
                 <div class="deprecated-large">
                     <sl-icon name="exclamation-triangle"></sl-icon>
-                    <strong>Deprecated!</strong></div>`;
+                    <strong>DEPRECATED!</strong></div>`;
         }
         if (this.parameter.allowEmptyValue) {
             allowEmptyValue = html `
                 <div class="boolean-value">
                     <sl-icon name="slash-circle"></sl-icon>
-                    Allows <strong>empty values</strong></div>`;
+                    ALLOWS <strong>EMPTY VALUES</strong></div>`;
         }
         if (this.parameter.explode) {
             explode = html `
                 <div class="boolean-value">
                     <sl-icon name="fullscreen"></sl-icon>
-                    Uses <strong>exploded encoding</strong></div>`;
+                    USES <strong>EXPLODED ENCODING</strong></div>`;
         }
         if (this.parameter.allowReserved) {
             allowReserved = html `
                 <div class="boolean-value">
                     <sl-icon name="regex"></sl-icon>
-                    Allows <strong>reserved characters</strong></div>`;
+                    ALLOWS <strong>RESERVED CHARACTERS</strong></div>`;
         }
         if (this.parameter.schema) {
             schema = html `
-                <h4 class="margin-top">${this.renderSection('Parameter Schema', 'schema')}</h4>
-                <pb33f-rendered-schema-node id="schema" class="closed" .schema="${this.parameter.schema}" renderType></pb33f-rendered-schema-node>
+                <h4 class="margin-top" @click="${() => this.toggleExpanded('schema')}" style="cursor: pointer" aria-expanded="${this.isExpanded('schema') ? 'true' : 'false'}">
+                    <sl-icon name="chevron-${this.isExpanded('schema') ? 'down' : 'right'}"></sl-icon> PARAMETER SCHEMA
+                </h4>
+                ${this.isExpanded('schema') ? html `
+                <pb33f-rendered-schema-node id="schema" .schema="${this.parameter.schema}" renderType></pb33f-rendered-schema-node>
+                ` : ''}
                 <hr class="hr-nopadding margin-top"/>`;
         }
         if (this.parameter.content) {
             content = html `
-                <h4 class="margin-top">${this.renderSection('Parameter Content', 'content')}</h4>
-                <div class="closed" id="content" 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> PARAMETER CONTENT
+                </h4>
+                ${this.isExpanded('content') ? html `
+                <div id="content" style="padding-left: 30px;">
                 ${Object.keys(this.parameter.content).map((mediaType) => {
                 if (mediaType != '' && this.parameter.content && this.parameter.content[mediaType]) {
                     return html `
@@ -120,19 +132,20 @@ let RenderedParameterNodeComponent = class RenderedParameterNodeComponent extend
                 }
             })}
                 </div>
+                ` : ''}
                 <hr class="hr-nopadding margin-top"/>`;
         }
         if (this.parameter.name) {
             name = html `
-                <div class="margin-bottom"><span class="list-key">Name:</span> <span class="list-value">${this.parameter.name}</span><hr class="margin-top margin-bottom hr-nopadding "/></div>`;
+                <div class="margin-bottom"><span class="list-key">NAME:</span> <span class="list-value">${this.parameter.name}</span><hr class="margin-top margin-bottom hr-nopadding "/></div>`;
         }
         if (this.parameter.in) {
             paramIn = html `
-                <div class="margin-bottom"><span class="list-key">In:</span> <pb33f-rendered-parameter-location-node type="${this.parameter.in}"></pb33f-rendered-parameter-location-node><hr class=" margin-top margin-bottom hr-nopadding"/></div>`;
+                <div class="margin-bottom"><span class="list-key">IN:</span> <pb33f-rendered-parameter-location-node type="${this.parameter.in}"></pb33f-rendered-parameter-location-node><hr class=" margin-top margin-bottom hr-nopadding"/></div>`;
         }
         if (this.parameter.title) {
             title = html `
-                <div  class="margin-bottom"><span class="list-key">Title:</span> <span class="list-value">${this.parameter.title}</span><hr class="margin-top margin-bottom hr-nopadding "/></div>`;
+                <div  class="margin-bottom"><span class="list-key">TITLE:</span> <span class="list-value">${this.parameter.title}</span><hr class="margin-top margin-bottom hr-nopadding "/></div>`;
         }
         return html `
             ${name}

package/dist/components/model-renderer/path-item.d.ts

@@ -1,9 +1,12 @@
 import './parameter.js';
+import { PropertyValues } from "lit";
 import { ClickableRef } from "./clickable-ref.js";
 import { PathItem } from "../../model/path-item.js";
 export declare class RenderedPathItemNodeComponent extends ClickableRef {
     static styles: import("lit").CSSResult[];
     pathItem: PathItem;
     path: string;
+    willUpdate(changedProps: PropertyValues): void;
+    private renderOperationLazy;
     render(): import("lit-html").TemplateResult<1>;
 }

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

@@ -17,6 +17,25 @@ import { unsafeHTML } from "lit/directives/unsafe-html.js";
 import { marked } from "marked";
 import { extractExtensions } from "../../model/media-type.js";
 let RenderedPathItemNodeComponent = class RenderedPathItemNodeComponent extends ClickableRef {
+    willUpdate(changedProps) {
+        if (changedProps.has('pathItem')) {
+            this.resetExpandedSections();
+        }
+    }
+    renderOperationLazy(method, sectionId, operationId, operation) {
+        return html `
+            <h4 class="hr-nopadding" @click="${() => this.toggleExpanded(sectionId)}" style="cursor: pointer" aria-expanded="${this.isExpanded(sectionId) ? 'true' : 'false'}">
+                <sl-icon name="chevron-${this.isExpanded(sectionId) ? 'down' : 'right'}"></sl-icon>
+                <pb33f-http-method method="${method}"></pb33f-http-method>
+                ${operationId ? html `<span class="operation-id">${operationId}</span>` : ''}
+            </h4>
+            ${this.isExpanded(sectionId) ? html `
+            <div class="margin-top" style="padding-left: 30px;">
+                <pb33f-rendered-operation-node .operation="${operation}" .path="${this.path}"></pb33f-rendered-operation-node>
+            </div>
+            ` : ''}
+        `;
+    }
     render() {
         let references = html ``;
         let summary = html ``;
@@ -35,7 +54,7 @@ let RenderedPathItemNodeComponent = class RenderedPathItemNodeComponent extends
         if (this.pathItem?.$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.pathItem.$ref);
@@ -49,7 +68,7 @@ let RenderedPathItemNodeComponent = class RenderedPathItemNodeComponent extends
         if (this.pathItem?.summary) {
             summary = html `
                 <pb33f-rendered-description-node>
-                    <h4 class="hr-nopadding">${this.renderSection('Summary', 'summary')}</h4>
+                    <h4 class="hr-nopadding">${this.renderSection('SUMMARY', 'summary')}</h4>
                     <span id="summary"
                           class="closed">${unsafeHTML(marked.parse(this.pathItem.summary).toString())}</span>
                 </pb33f-rendered-description-node>`;
@@ -57,7 +76,7 @@ let RenderedPathItemNodeComponent = class RenderedPathItemNodeComponent extends
         if (this.pathItem?.description) {
             description = html `
                 <pb33f-rendered-description-node noTopPadding>
-                    <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.pathItem.description).toString())}</span>
                 </pb33f-rendered-description-node>`;
@@ -65,8 +84,11 @@ let RenderedPathItemNodeComponent = class RenderedPathItemNodeComponent extends
         if (this.pathItem?.servers) {
             servers = html `
                 <hr class="margin-bottom"/>
-                <h4 class="hr-nopadding">${this.renderSection('Servers', 'servers')}</h4>
-                <div id="servers" class="closed margin-top" style="padding-left: 20px;">
+                <h4 class="hr-nopadding" @click="${() => this.toggleExpanded('servers')}" style="cursor: pointer" aria-expanded="${this.isExpanded('servers') ? 'true' : 'false'}">
+                    <sl-icon name="chevron-${this.isExpanded('servers') ? 'down' : 'right'}"></sl-icon> SERVERS
+                </h4>
+                ${this.isExpanded('servers') ? html `
+                <div class="margin-top" style="padding-left: 20px;">
                     ${this.pathItem.servers.map((server, idx) => {
                 return html `
                             <div class="flex">
@@ -76,12 +98,16 @@ let RenderedPathItemNodeComponent = class RenderedPathItemNodeComponent extends
                             </div>`;
             })}
                 </div>
+                ` : ''}
                 <hr class="margin-bottom hrlist"/>`;
         }
         if (this.pathItem?.parameters) {
             parameters = html `
-                <h4 class="hr-nopadding">${this.renderSection('Parameters (All Operations)', 'parameters')}</h4>
-                <div id="parameters" class="closed margin-top" style="padding-left: 20px;">
+                <h4 class="hr-nopadding" @click="${() => this.toggleExpanded('parameters')}" style="cursor: pointer" aria-expanded="${this.isExpanded('parameters') ? 'true' : 'false'}">
+                    <sl-icon name="chevron-${this.isExpanded('parameters') ? 'down' : 'right'}"></sl-icon> PARAMETERS (ALL OPERATIONS)
+                </h4>
+                ${this.isExpanded('parameters') ? html `
+                <div class="margin-top" style="padding-left: 20px;">
                     ${this.pathItem.parameters.map((param, idx) => {
                 return html `
                             <div class="flex">
@@ -91,117 +117,63 @@ let RenderedPathItemNodeComponent = class RenderedPathItemNodeComponent extends
                             </div>`;
             })}
                 </div>
+                ` : ''}
                 <hr class="margin-bottom hrlist"/>`;
         }
         if (this.pathItem?.get) {
             const op = this.pathItem.get;
-            let operationId = '';
-            if (op.operationId) {
-                operationId = op.operationId;
-            }
+            let operationId = op.operationId || '';
             get = html `
-                ${this.renderOperation('get', 'get', operationId)}</h4>
-                <div id="get" class="closed margin-top" style="padding-left: 30px;">
-                    <pb33f-rendered-operation-node .operation="${this.pathItem.get}"
-                                                   .path="${this.path}"></pb33f-rendered-operation-node>
-                </div>
+                ${this.renderOperationLazy('get', 'get', operationId, this.pathItem.get)}
                 <hr class="margin-bottom hrlist"/>`;
         }
         if (this.pathItem?.put) {
             const op = this.pathItem.put;
-            let operationId = '';
-            if (op.operationId) {
-                operationId = op.operationId;
-            }
+            let operationId = op.operationId || '';
             put = html `
-                ${this.renderOperation('put', 'put', operationId)}</h4>
-                <div id="put" class="closed margin-top" style="padding-left: 30px;">
-                    <pb33f-rendered-operation-node .operation="${this.pathItem.put}"
-                                                   .path="${this.path}"></pb33f-rendered-operation-node>
-                </div>
+                ${this.renderOperationLazy('put', 'put', operationId, this.pathItem.put)}
                 <hr class="margin-bottom hrlist"/>`;
         }
         if (this.pathItem?.post) {
             const op = this.pathItem.post;
-            let operationId = '';
-            if (op.operationId) {
-                operationId = op.operationId;
-            }
+            let operationId = op.operationId || '';
             post = html `
-                ${this.renderOperation('post', 'post', operationId)}</h4>
-                <div id="post" class="closed margin-top" style="padding-left: 30px;">
-                    <pb33f-rendered-operation-node .operation="${this.pathItem.post}"
-                                                   .path="${this.path}"></pb33f-rendered-operation-node>
-                </div>
+                ${this.renderOperationLazy('post', 'post', operationId, this.pathItem.post)}
                 <hr class="margin-bottom hrlist"/>`;
         }
         if (this.pathItem?.patch) {
             const op = this.pathItem.patch;
-            let operationId = '';
-            if (op.operationId) {
-                operationId = op.operationId;
-            }
-            patch = html `${this.renderOperation('patch', 'patch', operationId)}</h4>
-            <div id="patch" class="closed margin-top" style="padding-left: 30px;">
-                <pb33f-rendered-operation-node .operation="${this.pathItem.patch}"
-                                               .path="${this.path}"></pb33f-rendered-operation-node>
-            </div>
-            <hr class="margin-bottom hrlist"/>`;
+            let operationId = op.operationId || '';
+            patch = html `
+                ${this.renderOperationLazy('patch', 'patch', operationId, this.pathItem.patch)}
+                <hr class="margin-bottom hrlist"/>`;
         }
         if (this.pathItem?.delete) {
             const op = this.pathItem.delete;
-            let operationId = '';
-            if (op.operationId) {
-                operationId = op.operationId;
-            }
+            let operationId = op.operationId || '';
             deleteOp = html `
-                ${this.renderOperation('delete', 'delete', operationId)}</h4>
-                <div id="delete" class="closed margin-top" style="padding-left: 30px;">
-                    <pb33f-rendered-operation-node .operation="${this.pathItem.delete}"
-                                                   .path="${this.path}"></pb33f-rendered-operation-node>
-                </div>
+                ${this.renderOperationLazy('delete', 'delete', operationId, this.pathItem.delete)}
                 <hr class="margin-bottom hrlist"/>`;
         }
         if (this.pathItem?.options) {
             const op = this.pathItem.options;
-            let operationId = '';
-            if (op.operationId) {
-                operationId = op.operationId;
-            }
+            let operationId = op.operationId || '';
             options = html `
-                ${this.renderOperation('options', 'options', operationId)}</h4>
-                <div id="options" class="closed margin-top" style="padding-left: 30px;">
-                    <pb33f-rendered-operation-node .operation="${this.pathItem.options}"
-                                                   .path="${this.path}"></pb33f-rendered-operation-node>
-                </div>
+                ${this.renderOperationLazy('options', 'options', operationId, this.pathItem.options)}
                 <hr class="margin-bottom hrlist"/>`;
         }
         if (this.pathItem?.head) {
             const op = this.pathItem.head;
-            let operationId = '';
-            if (op.operationId) {
-                operationId = op.operationId;
-            }
+            let operationId = op.operationId || '';
             head = html `
-                ${this.renderOperation('head', 'head', operationId)}</h4>
-                <div id="head" class="closed margin-top" style="padding-left: 30px;">
-                    <pb33f-rendered-operation-node .operation="${this.pathItem.head}"
-                                                   .path="${this.path}"></pb33f-rendered-operation-node>
-                </div>
+                ${this.renderOperationLazy('head', 'head', operationId, this.pathItem.head)}
                 <hr class="margin-bottom hrlist"/>`;
         }
         if (this.pathItem?.trace) {
             const op = this.pathItem.trace;
-            let operationId = '';
-            if (op.operationId) {
-                operationId = op.operationId;
-            }
+            let operationId = op.operationId || '';
             trace = html `
-                ${this.renderOperation('trace', 'trace', operationId)}</h4>
-                <div id="trace" class="closed margin-top" style="padding-left: 20px;">
-                    <pb33f-rendered-operation-node .operation="${this.pathItem.trace}"
-                                                   .path="${this.path}"></pb33f-rendered-operation-node>
-                </div>
+                ${this.renderOperationLazy('trace', 'trace', operationId, this.pathItem.trace)}
                 <hr class="margin-bottom hrlist"/>`;
         }
         return html `

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

@@ -1,11 +1,13 @@
 import './parameter.js';
 import './path-item.js';
 import './operation.js';
+import { PropertyValues } from "lit";
 import { ClickableRef } from "./clickable-ref.js";
 import { Paths } from "../../model/path-item.js";
 export declare class RenderedPathItemNodeComponent extends ClickableRef {
     static styles: import("lit").CSSResult[];
     paths: Paths;
+    willUpdate(changedProps: PropertyValues): void;
     renderPath(path: string, sectionId: string): import("lit-html").TemplateResult<1>;
     render(): import("lit-html").TemplateResult<1>;
 }

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

@@ -15,13 +15,20 @@ import modelSharedCss from "./model-shared.css.js";
 import listsCss from "../../css/lists.css.js";
 import formattingCss from "../../css/formatting.css.js";
 let RenderedPathItemNodeComponent = class RenderedPathItemNodeComponent extends ClickableRef {
+    willUpdate(changedProps) {
+        if (changedProps.has('paths')) {
+            this.resetExpandedSections();
+        }
+    }
     renderPath(path, sectionId) {
         return html `
-            <pb33f-render-operation-path class="clickable" path="${path}" @click="${() => this.toggleSection(sectionId)}"></pb33f-render-operation-path>
-            <sl-icon-button class="section-control" @click="${() => this.toggleSection(sectionId)}" name="chevron-right" id="${sectionId}-toggle"></sl-icon-button>
-            <div id="${sectionId}" class="closed" style="padding-left: 30px; padding-top: 10px;">
+            <pb33f-render-operation-path class="clickable" path="${path}" @click="${() => this.toggleExpanded(sectionId)}"></pb33f-render-operation-path>
+            <sl-icon-button class="section-control" aria-expanded="${this.isExpanded(sectionId) ? 'true' : 'false'}" @click="${() => this.toggleExpanded(sectionId)}" name="chevron-${this.isExpanded(sectionId) ? 'down' : 'right'}" label="Toggle path"></sl-icon-button>
+            ${this.isExpanded(sectionId) ? html `
+            <div style="padding-left: 30px; padding-top: 10px;">
                 <pb33f-rendered-pathitem-node .pathItem="${this.paths[path]}" path="${path}"></pb33f-rendered-pathitem-node>
             </div>
+            ` : ''}
             <hr class="margin-bottom"/>
         `;
     }