@pb33f/cowboy-components 0.6.6 → 0.7.0

package/dist/components/visualizer/nodes/link.js

@@ -11,6 +11,7 @@ import { GraphNodeComponent } from "./graph-node.js";
 import { IconColor, IconSize } from "../../model-icon/model-icon.js";
 import { NodeType } from "../../../model/node_type.js";
 import linksCss from "../../../css/links.css.js";
+import changesCss from "./changes.css";
 let LinkNodeComponent = class LinkNodeComponent extends GraphNodeComponent {
     constructor() {
         super();
@@ -60,11 +61,12 @@ let LinkNodeComponent = class LinkNodeComponent extends GraphNodeComponent {
                  style="height: ${this.height}px; width: ${this.width}px" @click="${this.clicked}">
                 ${this.renderNode()}
                 ${this.renderUpArrow()}
+                ${this.renderChanges()}
             </div>
         `;
     }
 };
-LinkNodeComponent.styles = [sharedCss, linksCss];
+LinkNodeComponent.styles = [sharedCss, linksCss, changesCss];
 LinkNodeComponent = __decorate([
     customElement('pb33f-explorer-link-node')
 ], LinkNodeComponent);

package/dist/components/visualizer/nodes/media-type.js

@@ -11,6 +11,7 @@ import { GraphNodeComponent } from "./graph-node.js";
 import { IconColor, IconSize } from "../../model-icon/model-icon.js";
 import { NodeType } from "../../../model/node_type.js";
 import { unsafeHTML } from "lit/directives/unsafe-html.js";
+import changesCss from "./changes.css";
 let MediaTypeNodeComponent = class MediaTypeNodeComponent extends GraphNodeComponent {
     constructor() {
         super();
@@ -58,11 +59,12 @@ let MediaTypeNodeComponent = class MediaTypeNodeComponent extends GraphNodeCompo
                  style="height: ${this.height}px; width: ${this.width}px" @click="${this.clicked}">
                 ${this.renderNode()}
                 ${this.renderUpArrow()}
+                ${this.renderChanges()}
             </div>
         `;
     }
 };
-MediaTypeNodeComponent.styles = [sharedCss];
+MediaTypeNodeComponent.styles = [sharedCss, changesCss];
 MediaTypeNodeComponent = __decorate([
     customElement('pb33f-explorer-media-type-node')
 ], MediaTypeNodeComponent);

package/dist/components/visualizer/nodes/operation.js

@@ -11,6 +11,7 @@ import { GraphNodeComponent } from "./graph-node.js";
 import { IconColor, IconSize } from "../../model-icon/model-icon.js";
 import { NodeType } from "../../../model/node_type.js";
 import linksCss from "../../../css/links.css.js";
+import changesCss from "./changes.css";
 let OperationNodeComponent = class OperationNodeComponent extends GraphNodeComponent {
     constructor() {
         super();
@@ -94,11 +95,13 @@ let OperationNodeComponent = class OperationNodeComponent extends GraphNodeCompo
                  style="height: ${this.height}px; width: ${this.width}px" @click="${this.clicked}">
                 ${this.renderNode()}
                 ${this.renderUpArrow()}
+                ${this.renderChanges()}
+                ${this.renderChanges()}
             </div>
         `;
     }
 };
-OperationNodeComponent.styles = [sharedCss, linksCss];
+OperationNodeComponent.styles = [sharedCss, linksCss, changesCss];
 OperationNodeComponent = __decorate([
     customElement('pb33f-explorer-operation-node')
 ], OperationNodeComponent);

package/dist/components/visualizer/nodes/parameter.js

@@ -10,6 +10,7 @@ import sharedCss from "../shared.css.js";
 import { GraphNodeComponent } from "./graph-node.js";
 import { IconColor, IconSize } from "../../model-icon/model-icon.js";
 import { NodeType } from "../../../model/node_type.js";
+import changesCss from "./changes.css";
 let ParameterNodeComponent = class ParameterNodeComponent extends GraphNodeComponent {
     constructor() {
         super();
@@ -75,11 +76,12 @@ let ParameterNodeComponent = class ParameterNodeComponent extends GraphNodeCompo
                  style="height: ${this.height}px; width: ${this.width}px" @click="${this.clicked}">
                 ${this.renderNode()}
                 ${this.renderUpArrow()}
+                ${this.renderChanges()}
             </div>
         `;
     }
 };
-ParameterNodeComponent.styles = [sharedCss];
+ParameterNodeComponent.styles = [sharedCss, changesCss];
 ParameterNodeComponent = __decorate([
     customElement('pb33f-explorer-parameter-node')
 ], ParameterNodeComponent);

package/dist/components/visualizer/nodes/path-item.js

@@ -10,6 +10,7 @@ import sharedCss from "../shared.css.js";
 import { GraphNodeComponent } from "./graph-node.js";
 import { IconColor, IconSize } from "../../model-icon/model-icon.js";
 import { NodeType } from "../../../model/node_type.js";
+import changesCss from "./changes.css";
 let PathItemNodeComponent = class PathItemNodeComponent extends GraphNodeComponent {
     constructor() {
         super();
@@ -174,11 +175,12 @@ let PathItemNodeComponent = class PathItemNodeComponent extends GraphNodeCompone
                  style="height: ${this.height}px; width: ${this.width}px" @click="${this.clicked}">
                 ${this.renderNode()}
                 ${this.renderUpArrow()}
+                ${this.renderChanges()}
             </div>
         `;
     }
 };
-PathItemNodeComponent.styles = [sharedCss];
+PathItemNodeComponent.styles = [sharedCss, changesCss];
 PathItemNodeComponent = __decorate([
     customElement('pb33f-explorer-pathitem-node')
 ], PathItemNodeComponent);

package/dist/components/visualizer/nodes/request-body.js

@@ -10,6 +10,7 @@ import sharedCss from "../shared.css.js";
 import { GraphNodeComponent } from "./graph-node.js";
 import { IconColor, IconSize } from "../../model-icon/model-icon.js";
 import { NodeType } from "../../../model/node_type.js";
+import changesCss from "./changes.css";
 let RequestBodyNodeComponent = class RequestBodyNodeComponent extends GraphNodeComponent {
     constructor() {
         super();
@@ -45,11 +46,12 @@ let RequestBodyNodeComponent = class RequestBodyNodeComponent extends GraphNodeC
                  style="height: ${this.height}px; width: ${this.width}px" @click="${this.clicked}">
                 ${this.renderNode()}
                 ${this.renderUpArrow()}
+                ${this.renderChanges()}
             </div>
         `;
     }
 };
-RequestBodyNodeComponent.styles = [sharedCss];
+RequestBodyNodeComponent.styles = [sharedCss, changesCss];
 RequestBodyNodeComponent = __decorate([
     customElement('pb33f-explorer-request-body-node')
 ], RequestBodyNodeComponent);

package/dist/components/visualizer/nodes/response.js

@@ -12,6 +12,7 @@ import { IconColor, IconSize } from "../../model-icon/model-icon.js";
 import { NodeType } from "../../../model/node_type.js";
 import { ExtractStatusStyleFromCodeByCode } from "../../../model/extract_status.js";
 import modelSharedCss from "../../model-renderer/model-shared.css.js";
+import changesCss from "./changes.css";
 let ResponseNodeComponent = class ResponseNodeComponent extends GraphNodeComponent {
     constructor() {
         super();
@@ -56,11 +57,12 @@ let ResponseNodeComponent = class ResponseNodeComponent extends GraphNodeCompone
                  style="height: ${this.height}px; width: ${this.width}px" @click="${this.clicked}">
                 ${this.renderNode()}
                 ${this.renderUpArrow()}
+                ${this.renderChanges()}
             </div>
         `;
     }
 };
-ResponseNodeComponent.styles = [sharedCss, modelSharedCss];
+ResponseNodeComponent.styles = [sharedCss, modelSharedCss, changesCss];
 ResponseNodeComponent = __decorate([
     customElement('pb33f-explorer-response-node')
 ], ResponseNodeComponent);

package/dist/components/visualizer/nodes/schema.js

@@ -10,6 +10,7 @@ import sharedCss from "../shared.css.js";
 import { GraphNodeComponent } from "./graph-node.js";
 import { IconColor, IconSize } from "../../model-icon/model-icon.js";
 import { NodeType } from "../../../model/node_type.js";
+import changesCss from "./changes.css";
 let SchemaNodeComponent = class SchemaNodeComponent extends GraphNodeComponent {
     constructor() {
         super();
@@ -129,11 +130,12 @@ let SchemaNodeComponent = class SchemaNodeComponent extends GraphNodeComponent {
                  style="height: ${this.height}px; width: ${this.width}px" @click="${this.clicked}">
                 ${this.renderNode()}
                 ${this.renderUpArrow()}
+                ${this.renderChanges()}
             </div>
         `;
     }
 };
-SchemaNodeComponent.styles = [sharedCss];
+SchemaNodeComponent.styles = [sharedCss, changesCss];
 __decorate([
     property({ type: Boolean })
 ], SchemaNodeComponent.prototype, "embedded", void 0);

package/dist/components/visualizer/nodes/security-scheme.js

@@ -10,6 +10,7 @@ import sharedCss from "../shared.css.js";
 import { GraphNodeComponent } from "./graph-node.js";
 import { IconColor, IconSize } from "../../model-icon/model-icon.js";
 import { NodeType } from "../../../model/node_type.js";
+import changesCss from "./changes.css";
 let SecuritySchemeNodeComponent = class SecuritySchemeNodeComponent extends GraphNodeComponent {
     constructor() {
         super();
@@ -41,11 +42,12 @@ let SecuritySchemeNodeComponent = class SecuritySchemeNodeComponent extends Grap
                  style="height: ${this.height}px; width: ${this.width}px" @click="${this.clicked}">
                 ${this.renderNode()}
                 ${this.renderUpArrow()}
+                ${this.renderChanges()}
             </div>
         `;
     }
 };
-SecuritySchemeNodeComponent.styles = [sharedCss];
+SecuritySchemeNodeComponent.styles = [sharedCss, changesCss];
 SecuritySchemeNodeComponent = __decorate([
     customElement('pb33f-explorer-security-scheme-node')
 ], SecuritySchemeNodeComponent);

package/dist/components/visualizer/nodes/server.js

@@ -11,6 +11,7 @@ import { GraphNodeComponent } from "./graph-node.js";
 import { IconColor, IconSize } from "../../model-icon/model-icon.js";
 import { NodeType } from "../../../model/node_type.js";
 import linksCss from "../../../css/links.css.js";
+import changesCss from "./changes.css";
 let ServerNodeComponent = class ServerNodeComponent extends GraphNodeComponent {
     constructor() {
         super();
@@ -48,11 +49,12 @@ let ServerNodeComponent = class ServerNodeComponent extends GraphNodeComponent {
                  style="height: ${this.height}px; width: ${this.width}px" @click="${this.clicked}">
                 ${this.renderNode()}
                 ${this.renderUpArrow()}
+                ${this.renderChanges()}
             </div>
         `;
     }
 };
-ServerNodeComponent.styles = [sharedCss, linksCss];
+ServerNodeComponent.styles = [sharedCss, linksCss, changesCss];
 ServerNodeComponent = __decorate([
     customElement('pb33f-explorer-server-node')
 ], ServerNodeComponent);

package/dist/components/visualizer/nodes/tag.js

@@ -10,6 +10,7 @@ import sharedCss from "../shared.css.js";
 import { GraphNodeComponent } from "./graph-node.js";
 import { IconColor, IconSize } from "../../model-icon/model-icon.js";
 import { NodeType } from "../../../model/node_type.js";
+import changesCss from "./changes.css";
 let TagNodeComponent = class TagNodeComponent extends GraphNodeComponent {
     constructor() {
         super();
@@ -41,11 +42,12 @@ let TagNodeComponent = class TagNodeComponent extends GraphNodeComponent {
                  style="height: ${this.height}px; width: ${this.width}px" @click="${this.clicked}">
                 ${this.renderNode()}
                 ${this.renderUpArrow()}
+                ${this.renderChanges()}
             </div>
         `;
     }
 };
-TagNodeComponent.styles = [sharedCss];
+TagNodeComponent.styles = [sharedCss, changesCss];
 TagNodeComponent = __decorate([
     customElement('pb33f-explorer-tag-node')
 ], TagNodeComponent);

package/dist/components/visualizer/nodes/xml.js

@@ -10,6 +10,7 @@ import sharedCss from "../shared.css.js";
 import { GraphNodeComponent } from "./graph-node.js";
 import { IconColor, IconSize } from "../../model-icon/model-icon.js";
 import { NodeType } from "../../../model/node_type.js";
+import changesCss from "./changes.css";
 let XMLNodeComponent = class XMLNodeComponent extends GraphNodeComponent {
     constructor() {
         super();
@@ -38,11 +39,12 @@ let XMLNodeComponent = class XMLNodeComponent extends GraphNodeComponent {
                  style="height: ${this.height}px; width: ${this.width}px" @click="${this.clicked}">
                 ${this.renderNode()}
                 ${this.renderUpArrow()}
+                ${this.renderChanges()}
             </div>
         `;
     }
 };
-XMLNodeComponent.styles = [sharedCss];
+XMLNodeComponent.styles = [sharedCss, changesCss];
 XMLNodeComponent = __decorate([
     customElement('pb33f-explorer-xml-node')
 ], XMLNodeComponent);

package/dist/components/visualizer/orientation-controls.d.ts

@@ -4,6 +4,7 @@ export declare class OrientationControlsComponent extends LitElement {
     static styles: import("lit").CSSResult[];
     equalizerClosed: boolean;
     keyClosed: boolean;
+    renderEqualizer: boolean;
     searchComponent: SearchControlsComponent;
     eqPulse: boolean;
     constructor();

package/dist/components/visualizer/orientation-controls.js

@@ -17,6 +17,7 @@ let OrientationControlsComponent = class OrientationControlsComponent extends Li
         this.equalizerClosed = true;
         this.keyClosed = true;
         this.eqPulse = true;
+        this.renderEqualizer = true;
     }
     zoomIn() {
         this.dispatchEvent(new Event(ExplorerZoomIn, { bubbles: true, composed: true }));
@@ -51,6 +52,24 @@ let OrientationControlsComponent = class OrientationControlsComponent extends Li
     }
     render() {
         let pulse = this.eqPulse ? 'pulse' : 'seen';
+        let eqControl = html `
+            <div class="control">
+                <sl-tooltip content="Toggle the Equalizer">
+                    <sl-icon-button id="eq" name="sliders" label="Toggle Equalizer"
+                                    @click="${this.toggleEqualizer}"
+                                    class="${!this.equalizerClosed ? 'active' : pulse}"></sl-icon-button>
+                </sl-tooltip>
+            </div>`;
+        let searchControl = html `
+            <div class="search">
+                ${this.searchComponent}
+                <div class="control">
+                </div>
+            </div>`;
+        if (!this.renderEqualizer) {
+            eqControl = html ``;
+            searchControl = html ``;
+        }
         return html `
             <div class="controls">
                 <div class="control">
@@ -60,13 +79,14 @@ let OrientationControlsComponent = class OrientationControlsComponent extends Li
                 </div>
                 <div class="control">
                     <sl-tooltip content="Zoom Out">
-                        <sl-icon-button name="zoom-out" label="Zoom Out"  @click="${this.zoomOut}"></sl-icon-button>
+                        <sl-icon-button name="zoom-out" label="Zoom Out" @click="${this.zoomOut}"></sl-icon-button>
                     </sl-tooltip>
                 </div>
                 <div class="control">
                     <sl-tooltip content="Rotate Clockwise">
-                        <sl-icon-button name="arrow-clockwise" label="Rotate Clockwise" @click="${this.rotate}"></sl-icon-button>
-                    </sl-tooltip>    
+                        <sl-icon-button name="arrow-clockwise" label="Rotate Clockwise"
+                                        @click="${this.rotate}"></sl-icon-button>
+                    </sl-tooltip>
                 </div>
                 <div class="control">
                     <sl-tooltip content="Reset Explorer View">
@@ -76,21 +96,13 @@ let OrientationControlsComponent = class OrientationControlsComponent extends Li
                 <div class="control">
                     <sl-tooltip content="Explorer Key">
                         <sl-icon-button id="key" name="key" label="Explorer Key"
-                                        @click="${this.toggleKey}" class="${!this.keyClosed ? 'active' : ''}"></sl-icon-button>
-                    </sl-tooltip>
-                </div>
-                <div class="control">
-                    <sl-tooltip content="Toggle the Equalizer">
-                        <sl-icon-button id="eq" name="sliders" label="Toggle Equalizer" 
-                                        @click="${this.toggleEqualizer}" class="${!this.equalizerClosed ? 'active' : pulse}"></sl-icon-button>
+                                        @click="${this.toggleKey}"
+                                        class="${!this.keyClosed ? 'active' : ''}"></sl-icon-button>
                     </sl-tooltip>
                 </div>
-                <div class="search">
-                    ${this.searchComponent}
-                    <div class="control">
-                    </div>
-                </div>
-            </div>    
+                ${eqControl}
+                ${searchControl}
+            </div>
         `;
     }
 };
@@ -101,6 +113,9 @@ __decorate([
 __decorate([
     property()
 ], OrientationControlsComponent.prototype, "keyClosed", void 0);
+__decorate([
+    property()
+], OrientationControlsComponent.prototype, "renderEqualizer", void 0);
 OrientationControlsComponent = __decorate([
     customElement('pb33f-explorer-orientation-controls')
 ], OrientationControlsComponent);

package/dist/components/visualizer/search.js

@@ -33,7 +33,8 @@ let SearchControlsComponent = class SearchControlsComponent extends LitElement {
     }
     disableSearchPanel() {
         this.searchActive = false;
-        this.searchInput.value = '';
+        if (this.searchInput)
+            this.searchInput.value = '';
         this.activeNodeId = '';
         this.activeNodeIndex = -1;
         for (let node of this.results) {
@@ -73,12 +74,12 @@ let SearchControlsComponent = class SearchControlsComponent extends LitElement {
         }
     }
     selectResult(node) {
-        if (node && node.idHash) {
+        if (node && node.id) {
             this.dispatchEvent(new CustomEvent(ModelTreeNodeClicked, {
                 bubbles: true,
                 composed: true,
                 detail: {
-                    nodeHashId: node.idHash
+                    nodeId: node.id
                 }
             }));
         }

package/dist/components/warning-stripe/warning-stripe.d.ts

@@ -0,0 +1,20 @@
+import { LitElement } from 'lit';
+export declare class WarningStripe extends LitElement {
+    static styles: import("lit").CSSResult;
+    height: number;
+    animateStripe: boolean;
+    speed: number;
+    warn: boolean;
+    danger: boolean;
+    colorMain: string;
+    colorAlt: string;
+    constructor();
+    private _animationFrameId?;
+    private _lastTime;
+    private _currentOffset;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    updated(changedProperties: Map<string, unknown>): void;
+    private _updateAnimation;
+    render(): import("lit-html").TemplateResult<1>;
+}

package/dist/components/warning-stripe/warning-stripe.js

@@ -0,0 +1,124 @@
+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 { LitElement, html, css } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+let WarningStripe = class WarningStripe extends LitElement {
+    constructor() {
+        super();
+        this.height = 20;
+        this.animateStripe = false;
+        this.speed = 2;
+        this._lastTime = performance.now();
+        this._currentOffset = 0;
+        this.warn = false;
+        this.danger = false;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.colorAlt = 'var(--background-color)';
+        this.colorMain = 'var(--primary-color)';
+        if (this.warn) {
+            this.colorMain = 'var(--warning-color)';
+        }
+        if (this.danger) {
+            this.colorMain = 'var(--error-color)';
+        }
+        if (this.animateStripe) {
+            this._lastTime = performance.now();
+            this._animationFrameId = requestAnimationFrame(this._updateAnimation.bind(this));
+        }
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        if (this._animationFrameId) {
+            cancelAnimationFrame(this._animationFrameId);
+        }
+    }
+    updated(changedProperties) {
+        // If the animateStripe property changed, start or stop the animation loop.
+        if (changedProperties.has('animateStripe')) {
+            if (this.animateStripe) {
+                this._lastTime = performance.now();
+                this._animationFrameId = requestAnimationFrame(this._updateAnimation.bind(this));
+            }
+            else {
+                if (this._animationFrameId) {
+                    cancelAnimationFrame(this._animationFrameId);
+                    this._animationFrameId = undefined;
+                    // Reset offset when stopping
+                    this._currentOffset = 0;
+                    this.requestUpdate();
+                }
+            }
+        }
+    }
+    _updateAnimation(now) {
+        const dt = now - this._lastTime;
+        this._lastTime = now;
+        // Calculate the speed in pixels per second.
+        // The pattern width is 40px, so a full cycle (40px) takes "speed" seconds.
+        const speedPxPerSec = 40 / this.speed;
+        this._currentOffset = (this._currentOffset + (dt / 1000) * speedPxPerSec) % 40;
+        this.requestUpdate();
+        this._animationFrameId = requestAnimationFrame(this._updateAnimation.bind(this));
+    }
+    render() {
+        // Build the transform: always rotate 45 degrees, and if animating, add the horizontal translation.
+        const transform = `rotate(45) translate(${this.animateStripe ? this._currentOffset : 0} 0)`;
+        return html `
+            <svg
+                    width="100%"
+                    height="${this.height}px"
+                    xmlns="http://www.w3.org/2000/svg"
+                    aria-hidden="true"
+            >
+                <defs>
+                    <pattern
+                            id="warning-stripes"
+                            patternUnits="userSpaceOnUse"
+                            width="40"
+                            height="40"
+                            patternTransform="${transform}"
+                    >
+                        <rect x="0" y="0" width="20" height="40" fill="${this.colorMain}"></rect>
+                        <rect x="20" y="0" width="20" height="40" fill="${this.colorAlt}"></rect>
+                    </pattern>
+                </defs>
+                <rect width="100%" height="100%" fill="url(#warning-stripes)"></rect>
+            </svg>
+        `;
+    }
+};
+WarningStripe.styles = css `
+        :host {
+            display: block;
+            width: 100%;
+        }
+
+        svg {
+            display: block;
+        }
+    `;
+__decorate([
+    property({ type: Number })
+], WarningStripe.prototype, "height", void 0);
+__decorate([
+    property({ type: Boolean })
+], WarningStripe.prototype, "animateStripe", void 0);
+__decorate([
+    property({ type: Number })
+], WarningStripe.prototype, "speed", void 0);
+__decorate([
+    property({ type: Boolean })
+], WarningStripe.prototype, "warn", void 0);
+__decorate([
+    property({ type: Boolean })
+], WarningStripe.prototype, "danger", void 0);
+WarningStripe = __decorate([
+    customElement('pb33f-warning-stripe')
+], WarningStripe);
+export { WarningStripe };