@pb33f/cowboy-components 0.3.2 → 0.3.4

package/dist/components/manage-ruleset/manage-ruleset.css.js

@@ -27,10 +27,21 @@ export default css `
         color: var(--primary-color);
         margin-top: 22px;
     }
+
+    sl-icon-button {
+        font-size: 1.2rem;
+        color: var(--primary-color);
+        margin-top: 22px;
+    }
+    
+    
+    sl-icon-button.sort {
+        margin: 0; 
+        padding: 0;
+    }
     
-    sl-icon-button#save-button  {
-        color: var(--warn-color);
-        animation: pulse-animation 1.5s infinite;
+    sl-icon-button.sort::part(base) {
+       padding: 7px 5px 2px 10px
     }
 
     @keyframes pulse-animation {

package/dist/components/manage-ruleset/manage-ruleset.d.ts

@@ -19,6 +19,8 @@ export declare class ManageRuleset extends LitElement {
     customWipeDialog: SlDialog;
     confirmWipeButton: SlButton;
     allRulesSwitch: SlSwitch;
+    sortAlpha: boolean;
+    sortSeverity: boolean;
     private _defaultRuleset;
     private _owaspRuleset;
     private _allRuleset;
@@ -43,6 +45,7 @@ export declare class ManageRuleset extends LitElement {
     clearRuleProblems(): void;
     processBadRules(ruleError: RuleError[]): void;
     rulesetSaved(ruleset: RuleSet, returnedRuleset: RuleSet): void;
+    private _noSort;
     private dirty;
     private copyActiveRulesetCustom;
     private buildConfig;

package/dist/components/manage-ruleset/manage-ruleset.js

@@ -7,7 +7,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import '@shoelace-style/shoelace/dist/components/radio-group/radio-group.js';
 import '@shoelace-style/shoelace/dist/components/radio-button/radio-button.js';
 import '@shoelace-style/shoelace/dist/components/dialog/dialog.js';
-import { customElement, query } from "lit/decorators.js";
+import { customElement, property, query } from "lit/decorators.js";
 import { html, LitElement } from "lit";
 import manageRulesetCss from "./manage-ruleset.css.js";
 import { RuleComponent } from "./rule.js";
@@ -26,6 +26,7 @@ export const customRuleset = "custom";
 let ManageRuleset = class ManageRuleset extends LitElement {
     constructor() {
         super();
+        this._noSort = false;
         this._defaultRules = [];
         this._owaspRules = [];
         this._allRules = [];
@@ -33,6 +34,8 @@ let ManageRuleset = class ManageRuleset extends LitElement {
         this._rulesetConfig = { ruleMapping: new Map(), allRulesSwitch: true };
         this.currentRuleset = defaultRuleset;
         this.allRulesEnabled = true;
+        this.sortAlpha = true;
+        this.sortSeverity = false;
         // @ts-ignore
         this.addEventListener(RulesetDirty, this.dirty.bind(this));
         this.addEventListener(RulesetSaved, this.rulesetUpdated.bind(this));
@@ -165,6 +168,7 @@ let ManageRuleset = class ManageRuleset extends LitElement {
         else {
             this.copyActiveRulesetCustom();
         }
+        this._noSort = true;
     }
     copyActiveRulesetCustom(submittedRule) {
         const customRules = [];
@@ -493,10 +497,67 @@ let ManageRuleset = class ManageRuleset extends LitElement {
     }
     render() {
         let selectAll = html ``;
+        let sortBySeverity = html ``;
+        let sortByAlpha = html ``;
         let numRules = 0;
         if (this._activeRuleset) {
             numRules = this._activeRuleset.length;
         }
+        const priority = { error: 0, warn: 1, info: 2 };
+        // if sortSeverity or sortAlpha is true, sort the ruleset by alpha or severity, or both starting
+        // with severity and then alpha
+        if (this.sortSeverity && !this._noSort) {
+            this._activeRuleset?.sort((a, b) => {
+                if (a && b) {
+                    if (a.rule && b.rule) {
+                        if (a.rule.severity === b.rule.severity) {
+                            if (a.rule.id && b.rule.id) {
+                                if (this.sortAlpha) {
+                                    return a.rule.id.localeCompare(b.rule.id);
+                                }
+                                else {
+                                    return b.rule.id.localeCompare(a.rule.id);
+                                }
+                            }
+                        }
+                        if (a.rule.severity && b.rule.severity) {
+                            return priority[b.rule.severity] - priority[a.rule.severity];
+                        }
+                    }
+                }
+                return 0;
+            });
+        }
+        else {
+            if (!this._noSort) {
+                this._activeRuleset?.sort((a, b) => {
+                    if (a && b) {
+                        if (a.rule && b.rule) {
+                            if (a.rule.severity === b.rule.severity) {
+                                if (a.rule.id && b.rule.id) {
+                                    if (this.sortAlpha) {
+                                        return a.rule.id.localeCompare(b.rule.id);
+                                    }
+                                    else {
+                                        return b.rule.id.localeCompare(a.rule.id);
+                                    }
+                                }
+                            }
+                            if (a.rule.severity && b.rule.severity) {
+                                if (this.sortSeverity) {
+                                    return priority[b.rule.severity] - priority[a.rule.severity];
+                                }
+                                else {
+                                    return priority[a.rule.severity] - priority[b.rule.severity];
+                                }
+                            }
+                        }
+                    }
+                    return 0;
+                });
+            }
+        }
+        this._noSort = false;
         if (numRules > 0) {
             selectAll = html `
                 <div class="toggle-allcheck">
@@ -506,6 +567,18 @@ let ManageRuleset = class ManageRuleset extends LitElement {
                     </sl-switch>
                 </div>
             `;
+            sortByAlpha = html `<div class="sort-by-alpha">
+                <sl-tooltip content="Sort alphabetically" placement="top">
+                    <sl-icon-button @click="${() => { this.sortAlpha = !this.sortAlpha; }}" 
+                        name="${this.sortAlpha ? 'sort-alpha-down' : 'sort-alpha-down-alt'}" class="sort"></sl-icon-button>
+                </sl-tooltip>
+            </div>`;
+            sortBySeverity = html `<div class="sort-by-severity">
+                <sl-tooltip content="Sort by severity" placement="top">
+                    <sl-icon-button @click="${() => { this.sortSeverity = !this.sortSeverity; }}" 
+                        name="${this.sortSeverity ? 'sort-down-alt' : 'sort-down'}" class="sort"></sl-icon-button>
+                </sl-tooltip>
+            </div>`;
         }
         let rules = html `
             <div class="pb33f-loader">
@@ -552,7 +625,11 @@ let ManageRuleset = class ManageRuleset extends LitElement {
                     </div>
                 </div>
                 <div class="ruleset-body">
-                    ${selectAll}
+                    <div style="display: flex;">
+                        ${selectAll}
+                        ${sortByAlpha}
+                        ${sortBySeverity}
+                    </div>
                     ${rules}
                 </div>
             </div>
@@ -594,6 +671,12 @@ __decorate([
 __decorate([
     query('sl-switch')
 ], ManageRuleset.prototype, "allRulesSwitch", void 0);
+__decorate([
+    property({ type: Boolean })
+], ManageRuleset.prototype, "sortAlpha", void 0);
+__decorate([
+    property({ type: Boolean })
+], ManageRuleset.prototype, "sortSeverity", void 0);
 ManageRuleset = __decorate([
     customElement('pb33f-manage-ruleset')
 ], ManageRuleset);

package/dist/components/manage-ruleset/rule-input.js

@@ -7,7 +7,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { customElement, property, query, state } from "lit/decorators.js";
 import { html, LitElement } from "lit";
 import { ProblemDrawerEventType } from "../problem-list/details-drawer.js";
-import { OpenProblemDrawer, RuleNameUpdated, RulesetDirty } from "../../events/doctor";
+import { OpenProblemDrawer, RuleNameUpdated, RulesetDirty, SeverityChanged } from "../../events/doctor";
 import { RuleActionComponent } from "./rule-action.js";
 import ruleCss from "./rule.css.js";
 import formsCss from "../../css/forms.css.js";
@@ -112,6 +112,13 @@ let RuleInputComponent = class RuleInputComponent extends LitElement {
     }
     updateSeverity() {
         this.rule.severity = this.severity.value;
+        this.dispatchEvent(new CustomEvent(SeverityChanged, {
+            bubbles: true,
+            composed: true,
+            detail: {
+                severity: this.rule.severity
+            }
+        }));
         this.dirty();
     }
     updateCategory() {

package/dist/components/manage-ruleset/rule.css.js

@@ -62,7 +62,9 @@ export default css `
 
     sl-details::part(header) {
         font-size: 0.9rem;
-        padding: 5px;
+        padding-top: 5px;
+        padding-bottom: 8px;
+        padding-left: 0;
         font-family: var(--font-stack-bold), monospace;
     }
 

package/dist/components/manage-ruleset/rule.js

@@ -15,10 +15,12 @@ import ruleCss from "./rule.css.js";
 import formsCss from "../../css/forms.css.js";
 import buttonCss from "../../css/button.css.js";
 import "./rule-action.js";
-import { RuleClicked, RuleNameUpdated, RulesetDirty } from "../../events/doctor.js";
+import { RuleClicked, RuleNameUpdated, RulesetDirty, SeverityChanged } from "../../events/doctor.js";
 import { RuleInputComponent } from "./rule-input.js";
 import linksCss from "../../css/links.css.js";
 import listsCss from "../../css/lists.css.js";
+import { NodeType } from "../../model/node_type.js";
+import { IconColor, IconSize } from "../model-icon/model-icon.js";
 let RuleComponent = class RuleComponent extends LitElement {
     constructor(rule, id, custom) {
         super();
@@ -35,6 +37,11 @@ let RuleComponent = class RuleComponent extends LitElement {
         this.ruleInput.addEventListener(RuleNameUpdated, (evt) => {
             this.nameUpdated(evt.detail.name);
         });
+        //@ts-ignore
+        this.ruleInput.addEventListener(SeverityChanged, (evt) => {
+            this.rule.severity = evt.detail.severity;
+            this.requestUpdate();
+        });
     }
     nameUpdated(name) {
         this.rule.id = name;
@@ -108,6 +115,38 @@ let RuleComponent = class RuleComponent extends LitElement {
                     </div>
                 </div>`;
         }
+        let summary = html ``;
+        switch (this.rule.severity) {
+            case 'error':
+                summary = html `
+                    <div slot="summary">
+                        <pb33f-model-icon style="margin-right: 5px;" 
+                                          icon="${NodeType.ERROR}" 
+                                          color="${IconColor.error}"
+                                          size="${IconSize.small}"></pb33f-model-icon>
+                        ${this.rule.id}
+                    </div>`;
+                break;
+            case 'warn':
+                summary = html `<div slot="summary">
+                    <pb33f-model-icon style="margin-right: 5px;" 
+                                      icon="${NodeType.WARNING}" 
+                                      color="${IconColor.warning}" 
+                                      size="${IconSize.small}"></pb33f-model-icon>
+                    ${this.rule.id}
+                </div>`;
+                break;
+            case 'info':
+                summary = html `
+                    <div slot="summary">
+                        <pb33f-model-icon style="margin-right: 5px;" 
+                                          icon="${NodeType.INFO}" 
+                                          color="${IconColor.primary}" 
+                                          size="${IconSize.small}"></pb33f-model-icon>
+                        ${this.rule.id}
+                    </div>`;
+                break;
+        }
         return html `
             <div class="rule">
                 <div class="check">
@@ -115,8 +154,8 @@ let RuleComponent = class RuleComponent extends LitElement {
                 </div>
                 ${errorCol}
                 <div class="details">
-                    <sl-details summary="${this.rule.id}"
-                                class="${this.error ? 'error-rule' : ''}" @sl-show="${this.opened}">
+                    <sl-details class="${this.error ? 'error-rule' : ''}" @sl-show="${this.opened}">
+                        ${summary}
                         ${errorBox}
                         ${this.ruleInput}
                     </sl-details>

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

@@ -61,6 +61,16 @@ let RenderedSchemaNodeComponent = class RenderedSchemaNodeComponent extends HasE
         if (typeof this.schema !== 'object') {
             return html `<div class="schema-item">${this.schema}</div>`;
         }
+        // check if this is just a string array, if so, just render it
+        if (Array.isArray(this.schema) && this.schema.every(item => typeof item === 'string')) {
+            return html `
+                <div class="schema-item" style="display: block">
+               
+                ${this.schema.map((item, index) => {
+                return html `<div>[${index}] <code class="root" style="margin-left: 2px">${item}</code></div>`;
+            })}
+            </div>`;
+        }
         const sch = this.schema;
         if (isHasRef(sch)) {
             const segs = this.schema.$ref?.split('/');

package/dist/components/paginator/paginator-navigator.js

@@ -90,6 +90,9 @@ let PaginatorNavigation = class PaginatorNavigation extends LitElement {
         }
     }
     render() {
+        if (this.totalItems == 0) {
+            return html ``;
+        }
         if (this.currentPage == 1) {
             this.togglePrev(true);
         }

package/dist/components/paginator/paginator.css.js

@@ -21,18 +21,21 @@ export default css `
     }
     
     .no-values {
-        width: 400px;
-        margin: 50px auto;
+        width: 500px;
+        margin: 0 auto;
+        padding-top: 50px;
         text-align: center;
         font-size: 1.9em;
         color: var(--font-color-sub3);
         font-family: var(--font-stack-bold), monospace;
+        overflow-y: hidden;
         
     }
     
     .no-values sl-icon {
         margin-bottom: 30px;
         font-size: 5em;
+       
     }
    
 `;

package/dist/components/paginator/paginator.d.ts

@@ -9,6 +9,7 @@ export declare class Paginator extends LitElement {
     label: string;
     activeIndex: number;
     private renderValues;
+    private sparks;
     private paginatorNavigator;
     constructor();
     nextPage(event: CustomEvent): void;

package/dist/components/paginator/paginator.js

@@ -9,9 +9,11 @@ import { html, LitElement } from "lit";
 import { PaginatorNavigation } from "./paginator-navigator.js";
 import { PaginatorFirstPage, PaginatorLastPage, PaginatorNextPage, PaginatorPreviousPage } from "./paginator-events.js";
 import paginatorCss from "./paginator.css.js";
+import { PixelSparks } from "../the-doctor/sparks";
 let Paginator = class Paginator extends LitElement {
     constructor() {
         super();
+        this.sparks = new PixelSparks();
         this.currentPage = 1;
         this.totalPages = 1;
         this.totalItems = 0;
@@ -80,11 +82,15 @@ let Paginator = class Paginator extends LitElement {
         this.renderValues = this.values?.slice(this.paginatorNavigator.getRangeStart(), this.paginatorNavigator.getRangeEnd());
     }
     render() {
+        let sparks = new PixelSparks();
         if (this.renderValues?.length === 0 || !this.renderValues) {
-            return html `<div class="no-values">
-                <sl-icon name="x-square"></sl-icon><br/>
+            return html `
+                <div class="no-values" style="position: relative">
+                    <div style="position: absolute; width: 100%; top: -50px; left: 0;">${this.sparks}</div>
+                    <sl-icon name="x-square"></sl-icon><br/>
                 no results
-            </div>`;
+            </div>
+            `;
         }
         return html `
             ${this.paginatorNavigator}

package/dist/components/problems-overview/diagnostic-evaluation.js

@@ -60,9 +60,6 @@ let DiagnosticEvaluation = class DiagnosticEvaluation extends LitElement {
     render() {
         this.links = [];
         let parsed = this.convertToLinks(marked.parse(this.diagnosis).toString());
-        this.links.sort((a, b) => {
-            return a.localeCompare(b);
-        });
         const renderedLinks = this.links.map((link) => {
             return html `<li><a href="#" @click=${() => { this.viewRuleDocs(link); }}>${link}</a></li>`;
         });

package/dist/components/problems-overview/problem-overview-group.d.ts

@@ -1,5 +1,6 @@
 import { LitElement, TemplateResult } from "lit";
 import { ProblemItem } from "../problem-list/problem-item.js";
+import { MarkerSeverity } from "monaco-editor";
 export declare class ProblemOverviewGroup extends LitElement {
     static styles: import("lit").CSSResult[];
     rank: number;
@@ -7,6 +8,7 @@ export declare class ProblemOverviewGroup extends LitElement {
     groupName: string;
     description: string;
     category: string;
+    severity: MarkerSeverity;
     violationPercent: number;
     problems: ProblemItem[];
     constructor();

package/dist/components/problems-overview/problem-overview-group.js

@@ -12,6 +12,7 @@ import { OpenProblemDrawer, ProblemClicked, RuleViolationClicked } from "../../e
 import sharedCss from "../../css/shared.css.js";
 import buttonCss from "../../css/button.css.js";
 import { ProblemItem } from "../problem-list/problem-item.js";
+import { MarkerSeverity } from "monaco-editor";
 let ProblemOverviewGroup = class ProblemOverviewGroup extends LitElement {
     constructor() {
         super();
@@ -64,13 +65,22 @@ let ProblemOverviewGroup = class ProblemOverviewGroup extends LitElement {
         if (!this.groupName || this.groupName === '') {
             this.groupName = 'invalid OpenAPI specification';
         }
+        let severity = html ``;
+        if (this.severity === MarkerSeverity.Error) {
+            clazz = "error";
+            severity = html `
+                <pb33f-model-icon color="error" size="small" icon="error"></pb33f-model-icon>
+            `;
+            pc = html `
+                <pb33f-percent-bar value="${this.violationPercent}" error></pb33f-percent-bar>`;
+        }
         return html `
             <div class="problem-overview-group">
                 <div class="group-rank">
-                    <span>${this.rank}</span>
+                    <span class="${clazz}">${this.rank}</span>
                 </div>
                 <div class="group-details">
-                    <span class="name ${clazz}" @click="${this.viewRuleDocs}">${this.groupName}</span>
+                    ${severity}<span class="name ${clazz}" @click="${this.viewRuleDocs}">${this.groupName}</span>
                     ${pc}
                 </div>
                 <div class="violations">
@@ -109,6 +119,9 @@ __decorate([
 __decorate([
     property()
 ], ProblemOverviewGroup.prototype, "category", void 0);
+__decorate([
+    property()
+], ProblemOverviewGroup.prototype, "severity", void 0);
 __decorate([
     property({ type: Number })
 ], ProblemOverviewGroup.prototype, "violationPercent", void 0);

package/dist/components/problems-overview/problems-overview.js

@@ -42,6 +42,7 @@ let ProblemsOverview = class ProblemsOverview extends LitElement {
                 const group = new ProblemOverviewGroup();
                 group.groupName = problem.problemObject.source;
                 group.totalViolations = 1;
+                group.severity = problem.problemObject.severity;
                 group.problems = [problem];
                 problemOverviewGroups.set(rule, group);
             }
@@ -52,9 +53,14 @@ let ProblemsOverview = class ProblemsOverview extends LitElement {
             group.violationPercent = Math.round((group.totalViolations / totalViolations) * 100);
         }
         const values = Array.from(problemOverviewGroups.values());
-        // order by violations
+        // order by violations, errors first.
         values.sort((a, b) => {
-            return b.totalViolations - a.totalViolations;
+            if (a.severity === b.severity) {
+                return b.totalViolations - a.totalViolations;
+            }
+            else {
+                return b.severity - a.severity;
+            }
         });
         // stack rank.
         for (let i = 0; i < values.length; i++) {

package/dist/components/the-doctor/sparks.d.ts

@@ -0,0 +1,17 @@
+import { LitElement } from "lit";
+export declare class PixelSparks extends LitElement {
+    private sparkArray;
+    private readonly gravity;
+    private readonly spawnRate;
+    private ctx;
+    private canvas;
+    static styles: import("lit").CSSResult;
+    constructor();
+    firstUpdated(): void;
+    startAnimation(): void;
+    getRandomBetween(min: number, max: number): number;
+    spawnSpark(): void;
+    animateSparks(): void;
+    drawSpark(spark: any): void;
+    render(): import("lit-html").TemplateResult<1>;
+}

package/dist/components/the-doctor/sparks.js

@@ -0,0 +1,81 @@
+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 { customElement } from "lit/decorators.js";
+import { css, html, LitElement } from "lit";
+let PixelSparks = class PixelSparks extends LitElement {
+    constructor() {
+        super();
+        this.sparkArray = [];
+        this.gravity = 0.0001;
+        this.spawnRate = 70;
+    }
+    firstUpdated() {
+        const canvas = this.renderRoot.querySelector('canvas');
+        if (canvas) {
+            this.canvas = canvas;
+            const ctx = this.canvas?.getContext('2d');
+            if (ctx) {
+                this.ctx = ctx;
+            }
+        }
+        this.startAnimation();
+    }
+    startAnimation() {
+        setInterval(() => this.spawnSpark(), 1000 / this.spawnRate);
+        this.animateSparks();
+    }
+    getRandomBetween(min, max) {
+        return Math.random() * (max - min) + min;
+    }
+    spawnSpark() {
+        this.sparkArray.push({
+            x: Math.random() * this.canvas.width,
+            y: -2,
+            size: 1,
+            color: Math.random() > 0.5 ? 'rgb(248, 58, 255)' : 'rgb(98, 196, 255)',
+            velocityY: this.getRandomBetween(0.05, 0.3),
+            lifetime: 300,
+            initialLifetime: 300,
+            opacity: 1
+        });
+    }
+    animateSparks() {
+        this.ctx?.clearRect(0, 0, this.canvas?.width, this.canvas?.height);
+        this.sparkArray = this.sparkArray.filter(spark => spark.lifetime > 0);
+        for (let spark of this.sparkArray) {
+            this.drawSpark(spark);
+            spark.y += spark.velocityY;
+            spark.velocityY += this.gravity; // Apply gravity
+            spark.lifetime--;
+            spark.opacity = spark.lifetime / spark.initialLifetime;
+        }
+        requestAnimationFrame(() => this.animateSparks());
+    }
+    drawSpark(spark) {
+        this.ctx.globalAlpha = spark.opacity; // Set transparency level
+        this.ctx.fillStyle = spark.color;
+        this.ctx.shadowColor = spark.color;
+        this.ctx.shadowBlur = 8;
+        this.ctx.fillRect(spark.x, spark.y, spark.size, spark.size);
+        this.ctx.globalAlpha = 1; // Reset alpha to default
+    }
+    render() {
+        return html `
+            <canvas width="100%" height="100%"></canvas>`;
+    }
+};
+PixelSparks.styles = css `
+        canvas {
+            width: 100%;
+            height: 100%;
+            image-rendering: pixelated; /* Ensures pixelated appearance */
+        }
+    `;
+PixelSparks = __decorate([
+    customElement('pb33f-pixel-sparks')
+], PixelSparks);
+export { PixelSparks };