@pb33f/cowboy-components 0.7.18 → 0.8.0

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

@@ -23,12 +23,17 @@ let RenderedHeaderNodeComponent = class RenderedHeaderNodeComponent extends HasE
     constructor() {
         super();
     }
+    willUpdate(changedProps) {
+        if (changedProps.has('header')) {
+            this.resetExpandedSections();
+        }
+    }
     render() {
         if (isHasRef(this.header)) {
             const hasRef = this.header;
             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);
@@ -52,14 +57,14 @@ let RenderedHeaderNodeComponent = class RenderedHeaderNodeComponent extends HasE
         if (this.header?.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 class="closed" id="summary">${unsafeHTML(marked.parse(this.header.summary.toString()).toString())}</span>
                 </pb33f-rendered-description-node>`;
         }
         if (this.header?.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 class="closed" id="description">${unsafeHTML(marked.parse(this.header.description.toString()).toString())}</span>
                 </pb33f-rendered-description-node>`;
         }
@@ -67,44 +72,51 @@ let RenderedHeaderNodeComponent = class RenderedHeaderNodeComponent extends HasE
             required = html `
                 <div class="required-large">
                     <sl-icon name="asterisk"></sl-icon>
-                    <strong>Required</strong></div>`;
+                    <strong>REQUIRED</strong></div>`;
         }
         if (this.header?.deprecated) {
             depreciated = html `
                 <div class="deprecated-large">
                     <sl-icon name="exclamation-triangle"></sl-icon>
-                    <strong>Deprecated!</strong></div>`;
+                    <strong>DEPRECATED!</strong></div>`;
         }
         if (this.header?.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.header?.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.header?.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.header?.schema) {
             schema = html `
-                <h4 class="margin-top">${this.renderSection('Header Schema', 'schema')}</h4>
-                <pb33f-rendered-schema-node class="closed" id="schema" 
-                                            .schema="${this.header.schema}" 
+                <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> HEADER SCHEMA
+                </h4>
+                ${this.isExpanded('schema') ? html `
+                <pb33f-rendered-schema-node id="schema"
+                                            .schema="${this.header.schema}"
                                             renderType></pb33f-rendered-schema-node>
+                ` : ''}
                 <hr class="hr-nopadding margin-top"/>`;
         }
         if (this.header?.content) {
             content = html `
-                <h4  class="margin-top">${this.renderSection('Header 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> HEADER CONTENT
+                </h4>
+                ${this.isExpanded('content') ? html `
+                <div id="content" style="padding-left: 30px;">
                     ${Object.keys(this.header.content).map((mediaType) => {
                 if (mediaType != '' && this.header.content && this.header.content[mediaType]) {
                     return html `
@@ -114,8 +126,9 @@ let RenderedHeaderNodeComponent = class RenderedHeaderNodeComponent extends HasE
                                             .mediaType="${this.header.content[mediaType]}"></pb33f-rendered-mediatype-node>
                                 </div>`;
                 }
-            })} 
+            })}
                 </div>
+                ` : ''}
                 <hr class="hr-nopadding margin-top"/>`;
         }
         return html `

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

@@ -2,10 +2,12 @@ import './extensions.js';
 import './description.js';
 import './contact.js';
 import './license.js';
+import { PropertyValues } from "lit";
 import { ClickableRef } from "./clickable-ref.js";
 import { Info } from "../../model/info.js";
 export declare class RenderedInfoNodeComponent extends ClickableRef {
     static styles: import("lit").CSSResult[];
     info: Info;
+    willUpdate(changedProps: PropertyValues): void;
     render(): import("lit-html").TemplateResult<1>;
 }

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

@@ -19,6 +19,11 @@ import formattingCss from "../../css/formatting.css.js";
 import { unsafeHTML } from "lit/directives/unsafe-html.js";
 import { marked } from "marked";
 let RenderedInfoNodeComponent = class RenderedInfoNodeComponent extends ClickableRef {
+    willUpdate(changedProps) {
+        if (changedProps.has('info')) {
+            this.resetExpandedSections();
+        }
+    }
     render() {
         let title = html ``;
         let version = html ``;
@@ -37,14 +42,14 @@ let RenderedInfoNodeComponent = class RenderedInfoNodeComponent extends Clickabl
         if (this.info.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 class="closed" id="summary">${unsafeHTML(marked.parse(this.info.summary.toString()).toString())}</span>
                 </pb33f-rendered-description-node>`;
         }
         if (this.info.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 class="closed" id="description">${unsafeHTML(marked.parse(this.info.description.toString()).toString())}</span>
                 </pb33f-rendered-description-node>`;
         }
@@ -55,23 +60,31 @@ let RenderedInfoNodeComponent = class RenderedInfoNodeComponent extends Clickabl
             title = html `<h3>${this.info.title} ${version}</h3>`;
         }
         if (this.info?.termsOfService) {
-            termsOfService = html `<div class="margin-bottom"><span class="list-key">Terms:</span> <a href="${this.info.termsOfService}">${this.info.termsOfService}</a></div>`;
+            termsOfService = html `<div class="margin-bottom"><span class="list-key">TERMS:</span> <a href="${this.info.termsOfService}">${this.info.termsOfService}</a></div>`;
         }
         if (this.info?.contact) {
             contact = html `
                 <hr class="hr-nopadding margin-bottom" />
-                <h4  class="margin-top">${this.renderSection('Contact Information', 'contact')}</h4>
-                <div class="closed" id="contact" style="padding-left: 30px;">
+                <h4 class="margin-top" @click="${() => this.toggleExpanded('contact')}" style="cursor: pointer" aria-expanded="${this.isExpanded('contact') ? 'true' : 'false'}">
+                    <sl-icon name="chevron-${this.isExpanded('contact') ? 'down' : 'right'}"></sl-icon> CONTACT INFORMATION
+                </h4>
+                ${this.isExpanded('contact') ? html `
+                <div id="contact" style="padding-left: 30px;">
                     <pb33f-rendered-contact-node .contact="${this.info.contact}"></pb33f-rendered-contact-node>
                 </div>
+                ` : ''}
                 <hr class="hr-nopadding margin-bottom" />`;
         }
         if (this.info?.license) {
             license = html `
-                <h4  class="margin-top">${this.renderSection('License Information', 'license')}</h4>
-                <div class="closed" id="license" style="padding-left: 30px;">
+                <h4 class="margin-top" @click="${() => this.toggleExpanded('license')}" style="cursor: pointer" aria-expanded="${this.isExpanded('license') ? 'true' : 'false'}">
+                    <sl-icon name="chevron-${this.isExpanded('license') ? 'down' : 'right'}"></sl-icon> LICENSE INFORMATION
+                </h4>
+                ${this.isExpanded('license') ? html `
+                <div id="license" style="padding-left: 30px;">
                     <pb33f-rendered-license-node .license="${this.info.license}"></pb33f-rendered-license-node>
                 </div>
+                ` : ''}
                 <hr class="hr-nopadding margin-bottom" />`;
         }
         return html `

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

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

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

@@ -20,6 +20,11 @@ import formattingCss from "../../css/formatting.css.js";
 import { unsafeHTML } from "lit/directives/unsafe-html.js";
 import { marked } from "marked";
 let RenderedLinkNodeComponent = class RenderedLinkNodeComponent extends ClickableRef {
+    willUpdate(changedProps) {
+        if (changedProps.has('link')) {
+            this.resetExpandedSections();
+        }
+    }
     render() {
         let references = html ``;
         let requestBody = html ``;
@@ -37,14 +42,14 @@ let RenderedLinkNodeComponent = class RenderedLinkNodeComponent extends Clickabl
         if (this.link?.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.link.description.toString()).toString())}</span>
                 </pb33f-rendered-description-node>`;
         }
         if (this.link?.$ref) {
             references = html `
                 <div class="link">
-                    Reference:
+                    REFERENCE:
                     <sl-icon name="arrow-right" class="reflink reflink-icon"></sl-icon>
                     <span class="reflink" @click=${() => {
                 this.clickedRef(this.link.$ref);
@@ -52,8 +57,11 @@ let RenderedLinkNodeComponent = class RenderedLinkNodeComponent extends Clickabl
         }
         if (this.link?.parameters) {
             parameters = html `
-                <h4 class="margin-top">${this.renderSection('Link Parameters', 'parameters')}</h4>
-                <div class="closed" id="parameters" style="padding-left: 30px">
+                <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> LINK PARAMETERS
+                </h4>
+                ${this.isExpanded('parameters') ? html `
+                <div id="parameters" style="padding-left: 30px">
                     ${Object.keys(this.link.parameters).map((name) => {
                 if (name != '' && this.link.parameters && this.link.parameters[name]) {
                     return html `
@@ -65,33 +73,42 @@ let RenderedLinkNodeComponent = class RenderedLinkNodeComponent extends Clickabl
                 }
             })}
                 </div>
+                ` : ''}
                 <hr class="hr-nopadding margin-top"/>`;
         }
         if (this.link?.operationId) {
             operationId = html `
-                <div><span class="list-key list-key-wide">Operation ID:</span> 
+                <div><span class="list-key list-key-wide">OPERATION ID:</span> 
                     <span class="list-value">${this.link.operationId}</span><hr class="margin-top margin-bottom hr-nopadding "/></div>`;
         }
         if (this.link?.operationRef) {
             operationRef = html `
-                <div><span class="list-key list-key-wide">Operation Ref:</span> 
+                <div><span class="list-key list-key-wide">OPERATION REF:</span> 
                     <span class="list-value">${this.link.operationRef}</span><hr class="margin-top margin-bottom hr-nopadding "/></div>`;
         }
         if (this.link?.requestBody) {
             requestBody = html `
-                <h4 class="margin-top">${this.renderSection('Link Request Body', 'requestBody')}</h4>
-                <div class="closed" id="requestBody" style="padding-left: 30px"> 
+                <h4 class="margin-top" @click="${() => this.toggleExpanded('requestBody')}" style="cursor: pointer" aria-expanded="${this.isExpanded('requestBody') ? 'true' : 'false'}">
+                    <sl-icon name="chevron-${this.isExpanded('requestBody') ? 'down' : 'right'}"></sl-icon> LINK REQUEST BODY
+                </h4>
+                ${this.isExpanded('requestBody') ? html `
+                <div id="requestBody" style="padding-left: 30px">
                     <pb33f-rendered-requestbody-node .requestBody="${this.link.requestBody}"></pb33f-rendered-requestbody-node>
                 </div>
+                ` : ''}
                 <hr class="hr-nopadding margin-top"/>
             `;
         }
         if (this.link?.server) {
             requestBody = html `
-                <h4 class="margin-top">${this.renderSection('Link Server', 'server')}</h4>
-                <div class="closed" id="server" style="padding-left: 30px"> 
+                <h4 class="margin-top" @click="${() => this.toggleExpanded('server')}" style="cursor: pointer" aria-expanded="${this.isExpanded('server') ? 'true' : 'false'}">
+                    <sl-icon name="chevron-${this.isExpanded('server') ? 'down' : 'right'}"></sl-icon> LINK SERVER
+                </h4>
+                ${this.isExpanded('server') ? html `
+                <div id="server" style="padding-left: 30px">
                     <pb33f-rendered-server-node .server="${this.link.server}"></pb33f-rendered-server-node>
                 </div>
+                ` : ''}
                 <hr class="hr-nopadding margin-top"/>
             `;
         }

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

@@ -30,7 +30,7 @@ let RenderedSchemaNodeComponent = class RenderedSchemaNodeComponent extends HasE
         if (this.mediaType?.$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.mediaType.$ref); }}>${extractNameFromRef(this.mediaType)}</span></div>
             `;
@@ -38,7 +38,7 @@ let RenderedSchemaNodeComponent = class RenderedSchemaNodeComponent extends HasE
         if (this.mediaType.schema?.$ref) {
             references = html `
                 <div class="link margin-bottom">
-                    Schema Reference:
+                    SCHEMA REF:
                     <sl-icon name="arrow-right" class="reflink reflink-icon"></sl-icon>
                     <span class="inline-ref reflink"  @click=${() => { this.clickedRef(this.mediaType.schema?.$ref); }}>${extractNameFromRef(this.mediaType.schema)}</span></div>
             `;

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

@@ -0,0 +1,11 @@
+import { LitElement } from "lit";
+import '@shoelace-style/shoelace/dist/components/badge/badge.js';
+import '../model-icon/model-icon.js';
+import { IconSize } from '../model-icon/model-icon.js';
+export declare class ModelBadge extends LitElement {
+    static styles: import("lit").CSSResult;
+    icon: string;
+    iconSize: IconSize;
+    private formatLabel;
+    render(): import("lit-html").TemplateResult<1>;
+}

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

@@ -0,0 +1,59 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { css, html, LitElement } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import '@shoelace-style/shoelace/dist/components/badge/badge.js';
+import '../model-icon/model-icon.js';
+import { IconSize } from '../model-icon/model-icon.js';
+let ModelBadge = class ModelBadge extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.iconSize = IconSize.medium;
+    }
+    formatLabel(type) {
+        if (!type)
+            return '';
+        return type.replace(/([a-z])([A-Z])/g, '$1 $2').toUpperCase();
+    }
+    render() {
+        return html `
+            <pb33f-model-icon icon="${this.icon}" size="${this.iconSize}"></pb33f-model-icon>
+            <sl-badge>${this.formatLabel(this.icon)}</sl-badge>
+        `;
+    }
+};
+ModelBadge.styles = css `
+        :host {
+            display: inline-flex;
+            align-items: center;
+            gap: var(5px, 4px);
+        }
+
+        sl-badge::part(base) {
+            border-radius: 0;
+            background-color: var(--background-color);
+            border: 1px solid var(--secondary-color);
+            color: var(--secondary-color);
+            text-transform: uppercase;
+            letter-spacing: 0.02em;
+            font-size: 0.7rem;
+            min-width: var(--model-badge-min-width, auto);
+            text-align: center;
+            margin-left: 10px;
+            padding-top: 4px;
+        }
+    `;
+__decorate([
+    property()
+], ModelBadge.prototype, "icon", void 0);
+__decorate([
+    property()
+], ModelBadge.prototype, "iconSize", void 0);
+ModelBadge = __decorate([
+    customElement('pb33f-model-badge')
+], ModelBadge);
+export { ModelBadge };

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

@@ -11,6 +11,7 @@ export default css `
         margin: 0 0 2px 0;
         display: inline-block;
         background-color: var(--secondary-color-very-lowalpha);
+        text-transform: uppercase;
     }
 
     code:hover {
@@ -27,12 +28,14 @@ export default css `
     code.root {
         margin-left: 10px;
         font-size: 0.7rem;
+        text-transform: uppercase;
     }
 
 
     code.skinny-root {
         margin-left: 10px;
         font-size: 0.7rem;
+        
     }
     
     .clickable:hover {
@@ -57,6 +60,15 @@ export default css `
         font-size: 1rem;
     }
 
+    blockquote {
+        color: var(--font-color-sub1);
+        font-family: var(--font-stack-italic), sans-serif;
+        border-left: 1px solid var(--secondary-color);
+        padding-left: 10px;
+        margin-inline-start: 20px;
+    }
+    
+    
     .secondary {
         color: var(--secondary-color);
     }
@@ -82,12 +94,12 @@ export default css `
     }
     
     .icon-vertical {
-        vertical-align: middle;
+        vertical-align: text-top;
         margin-top: -2px;
     }
 
     .icon-vertical-no-margin {
-        vertical-align: middle;
+        vertical-align: text-top;
     }
 
     .model-text{

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

@@ -38,7 +38,7 @@ let RenderedOauthFlowsNodeComponent = class RenderedOauthFlowsNodeComponent exte
                 url = u.hostname + u.pathname;
             }
             refreshUrl = html `<div>
-                <span class="list-key-full">Refresh URL:</span> 
+                <span class="list-key-full">REFRESH URL:</span> 
                 <sl-icon name="link" style="color: var(--primary-color); font-size: 1.2rem; vertical-align: middle"></sl-icon> 
                 <span class="list-value"><a href="${flow.refreshUrl}" target="_blank">${url}</a></span>
             </div>`;
@@ -50,7 +50,7 @@ let RenderedOauthFlowsNodeComponent = class RenderedOauthFlowsNodeComponent exte
                 url = u.hostname + u.pathname;
             }
             authorizationURL = html `<div>
-                <span class="list-key-full">Authorization URL:</span>
+                <span class="list-key-full">AUTHORIZATION URL:</span>
                 <sl-icon name="link" style="color: var(--primary-color); font-size: 1.2rem; vertical-align: middle"></sl-icon>
                 <span class="list-value"><a href="${flow.authorizationUrl}" target="_blank">${url}</a></span>
             </div>`;
@@ -62,7 +62,7 @@ let RenderedOauthFlowsNodeComponent = class RenderedOauthFlowsNodeComponent exte
                 url = u.hostname + u.pathname;
             }
             tokenURL = html `<div>
-                <span class="list-key-full">Token URL:</span>
+                <span class="list-key-full">TOKEN URL:</span>
                 <sl-icon name="link" style="color: var(--primary-color); font-size: 1.2rem; vertical-align: middle"></sl-icon>
                 <span class="list-value"><a href="${flow.tokenUrl}" target="_blank">${url}</a> 
             </span></div>`;
@@ -74,7 +74,7 @@ let RenderedOauthFlowsNodeComponent = class RenderedOauthFlowsNodeComponent exte
             });
             scopes = html `<div style="font-size: 0.8rem;">
                 <hr class="hr-nopadding margin-top margin-bottom">
-                <h4>Flow Scopes:</h4>
+                <h4>FLOW SCOPES:</h4>
                 <pb33f-kv-view .data="${scopeMap}" keyLabel="Scope"></brpb33f-kv-view></div>`;
         }
         return html `

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

@@ -6,11 +6,12 @@ import './external-docs.js';
 import './parameter.js';
 import './request-body.js';
 import './server.js';
-import { TemplateResult } from "lit";
+import { PropertyValues, TemplateResult } from "lit";
 import { ClickableRef } from "./clickable-ref.js";
 import { Operation } from "../../model/operation";
 export declare class RenderedOperationNodeComponent extends ClickableRef {
     static styles: import("lit").CSSResult[];
     operation: Operation;
+    willUpdate(changedProps: PropertyValues): void;
     render(): TemplateResult<1>;
 }