@pb33f/cowboy-components 0.0.13 → 0.1.0

package/dist/components/problem-list/problem-search-filter.js

@@ -0,0 +1,45 @@
+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 '@shoelace-style/shoelace/dist/components/dropdown/dropdown.js';
+import '@shoelace-style/shoelace/dist/components/menu/menu.js';
+import '@shoelace-style/shoelace/dist/components/menu-item/menu-item.js';
+import { customElement, property, query } from "lit/decorators.js";
+import { html, LitElement } from "lit";
+import filterCss from "./filter.css";
+import { ProblemSearchFilterChanged } from "@/events/doctor";
+let ProblemSearchFilter = class ProblemSearchFilter extends LitElement {
+    constructor() {
+        super();
+    }
+    search() {
+        this.dispatchEvent(new CustomEvent(ProblemSearchFilterChanged, {
+            composed: true,
+            bubbles: true,
+            detail: {
+                search: this.input.value,
+            }
+        }));
+    }
+    render() {
+        return html `
+            <div class="filter">
+                <sl-input @sl-change=${this.search} placeholder="search" clearable></sl-input>
+            </div>
+        `;
+    }
+};
+ProblemSearchFilter.styles = [filterCss];
+__decorate([
+    property()
+], ProblemSearchFilter.prototype, "selectedSort", void 0);
+__decorate([
+    query('sl-input')
+], ProblemSearchFilter.prototype, "input", void 0);
+ProblemSearchFilter = __decorate([
+    customElement('pb33f-problem-search-filter')
+], ProblemSearchFilter);
+export { ProblemSearchFilter };

package/dist/components/problem-list/problem-sort-filter.d.ts

@@ -0,0 +1,19 @@
+import '@shoelace-style/shoelace/dist/components/dropdown/dropdown.js';
+import '@shoelace-style/shoelace/dist/components/menu/menu.js';
+import '@shoelace-style/shoelace/dist/components/menu-item/menu-item.js';
+import { LitElement } from "lit";
+export declare enum ProblemSortView {
+    LineNumber = "Line Number",
+    Rule = "Rule Violation",
+    JSONPath = "Path",
+    Category = "Category",
+    Severity = "Severity"
+}
+export declare class ProblemSortFilter extends LitElement {
+    static styles: import("lit").CSSResult[];
+    selectedSort: string;
+    private readonly menuValues;
+    constructor();
+    filterChanged(event: CustomEvent): void;
+    render(): import("lit-html").TemplateResult<1>;
+}

package/dist/components/problem-list/problem-sort-filter.js

@@ -0,0 +1,67 @@
+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 '@shoelace-style/shoelace/dist/components/dropdown/dropdown.js';
+import '@shoelace-style/shoelace/dist/components/menu/menu.js';
+import '@shoelace-style/shoelace/dist/components/menu-item/menu-item.js';
+import { customElement, property } from "lit/decorators.js";
+import { html, LitElement } from "lit";
+import problemLabelViewFilterCss from "./problem-label-view-filter.css";
+import filterCss from "./filter.css";
+import { ProblemSortFilterChanged } from "@/events/doctor";
+export var ProblemSortView;
+(function (ProblemSortView) {
+    ProblemSortView["LineNumber"] = "Line Number";
+    ProblemSortView["Rule"] = "Rule Violation";
+    ProblemSortView["JSONPath"] = "Path";
+    ProblemSortView["Category"] = "Category";
+    ProblemSortView["Severity"] = "Severity";
+})(ProblemSortView || (ProblemSortView = {}));
+let ProblemSortFilter = class ProblemSortFilter extends LitElement {
+    constructor() {
+        super();
+        this.menuValues = Object.values(ProblemSortView);
+        this.selectedSort = this.menuValues[0].toString();
+    }
+    filterChanged(event) {
+        const menuItem = event.detail.item;
+        this.selectedSort = menuItem.value;
+        this.dispatchEvent(new CustomEvent(ProblemSortFilterChanged, {
+            composed: true,
+            detail: {
+                sort: this.selectedSort,
+            }
+        }));
+    }
+    render() {
+        return html `
+            <div class="filter">
+                <div class="label"><label>Sort:</label></div>
+                <div class="dropdown">
+                <sl-dropdown skidding="5" distance="5">
+                    <sl-button slot="trigger" caret>${this.selectedSort}</sl-button>
+                    <sl-menu @sl-select=${this.filterChanged}>
+                        ${this.menuValues.map((value) => {
+            return html `
+                                <sl-menu-item value="${value}" type="checkbox" .checked=${this.selectedSort === value}>
+                                    ${value}
+                                </sl-menu-item>`;
+        })}
+                    </sl-menu>
+                </sl-dropdown>
+                </div>
+            </div>
+        `;
+    }
+};
+ProblemSortFilter.styles = [problemLabelViewFilterCss, filterCss];
+__decorate([
+    property()
+], ProblemSortFilter.prototype, "selectedSort", void 0);
+ProblemSortFilter = __decorate([
+    customElement('pb33f-problem-sort-filter')
+], ProblemSortFilter);
+export { ProblemSortFilter };

package/dist/components/problem-list/problem-toolbar.css.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("lit").CSSResult;
+export default _default;

package/dist/components/problem-list/problem-toolbar.css.js

@@ -0,0 +1,41 @@
+import { css } from "lit";
+export default css `
+    .toolbar-container{
+     
+      
+      //  height: 30px;
+        font-size: 0.7rem;
+        display: flex;
+        justify-content: flex-start;
+        flex-flow: row wrap;
+    }
+    
+    .spacer{
+        margin-left: 20px;
+        border-left: 1px dashed var(--secondary-color);
+        height: 30px;
+        margin-right: 10px;
+    }
+    
+    .filter {
+        border: 1px dashed var(--secondary-color);
+        min-width: 200px;
+        width: 200px;
+        padding-left: 5px;
+        padding-right: 5px;
+        height: 30px;
+
+    }
+
+    .first {
+        flex-grow: 2;
+    }
+    
+    .mid {
+        flex-grow: 2;
+    }
+    
+    .last {
+        flex-grow: 2;
+    }
+`;

package/dist/components/problem-list/problem-toolbar.d.ts

@@ -0,0 +1,14 @@
+import { LitElement } from "lit";
+export declare class ProblemToolbar extends LitElement {
+    availableRules: string[];
+    static styles: import("lit").CSSResult[];
+    private readonly problemLabelFilter;
+    private readonly problemSortFilter;
+    private readonly problemSearchFilter;
+    private readonly problemRuleFilter;
+    constructor();
+    protected willUpdate(): void;
+    ruleFilterChanged(rule: string): void;
+    resetRuleFilter(): void;
+    render(): import("lit-html").TemplateResult<1>;
+}

package/dist/components/problem-list/problem-toolbar.js

@@ -0,0 +1,63 @@
+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, property } from "lit/decorators.js";
+import { html, LitElement } from "lit";
+import { ProblemLabelViewFilter } from "./problem-label-view-filter";
+import { ProblemSortFilter } from "./problem-sort-filter";
+import { ProblemSearchFilter } from "./problem-search-filter";
+import { Rules, ProblemRuleFilter } from "./problem-rule-filter";
+import problemToolbarCss from "./problem-toolbar.css";
+let ProblemToolbar = class ProblemToolbar extends LitElement {
+    constructor() {
+        super();
+        this.problemLabelFilter = new ProblemLabelViewFilter();
+        this.problemSortFilter = new ProblemSortFilter();
+        this.problemSearchFilter = new ProblemSearchFilter();
+        this.problemRuleFilter = new ProblemRuleFilter();
+        this.problemRuleFilter.rules = this.availableRules;
+    }
+    willUpdate() {
+        if (this.availableRules?.length > 0) {
+            this.problemRuleFilter.rules = this.availableRules;
+        }
+    }
+    ruleFilterChanged(rule) {
+        this.problemRuleFilter.selectedRule = rule;
+    }
+    resetRuleFilter() {
+        this.problemRuleFilter.selectedRule = Rules.AllRules;
+    }
+    render() {
+        return html `
+            <div class="toolbar-container">
+                <div class="filter first">
+                    ${this.problemLabelFilter}
+                </div>
+
+                <div class="filter mid">
+                    ${this.problemSortFilter}
+                </div>
+
+                <div class="filter mid">
+                    ${this.problemRuleFilter}
+                </div>
+
+                <div class="filter last">
+                    ${this.problemSearchFilter}
+                </div>
+            </div>
+        `;
+    }
+};
+ProblemToolbar.styles = [problemToolbarCss];
+__decorate([
+    property()
+], ProblemToolbar.prototype, "availableRules", void 0);
+ProblemToolbar = __decorate([
+    customElement('pb33f-problem-toolbar')
+], ProblemToolbar);
+export { ProblemToolbar };

package/dist/components/problem-list/shared.css.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("lit").CSSResult;
+export default _default;

package/dist/components/problem-list/shared.css.js

@@ -0,0 +1,91 @@
+import { css } from "lit";
+export default css `
+    code {
+        font-family: var(--font-stack), monospace;
+        border: 1px solid var(--secondary-color-lowalpha);
+        color: var(--secondary-color);
+        border-radius: 0;
+        padding: 0 2px 1px 2px;
+        margin: 0 0 2px 0;
+        display: inline-block;
+        background-color: var(--secondary-color-very-lowalpha);
+        vertical-align: middle;
+    }
+
+    code:hover {
+        border: 1px solid var(--primary-color);
+        color: var(--primary-color);
+    }
+
+    p {
+        margin: 0;
+        padding: 0;
+    }
+
+    a {
+        text-decoration: none;
+        color: var(--primary-color);
+    }
+
+    a:hover {
+        text-decoration: underline;
+        color: var(--primary-color);
+    }
+
+    a:visited {
+        text-decoration: none;
+        color: var(--primary-color);
+    }
+
+    a:active {
+        text-decoration: underline;
+        color: var(--secondary-color);
+    }
+
+    .button-primary::part(base) {
+        border: 1px solid var(--primary-color);
+        border-radius: 0;
+        font-family: var(--font-stack), monospace;
+        background-color: var(--background-color);
+        color: var(--primary-color);
+    }
+
+    .button-primary::part(base):hover {
+        background-color: var(--primary-color);
+        color: var(--background-color);
+        font-family: var(--font-stack-bold), monospace;
+    }
+
+    .button-primary::part(base):active {
+        background-color: var(--background-color);
+        color: var(--error-color);
+        border: 1px solid var(--error-color);
+    }
+
+    .button-icon::part(base) {
+        color: var(--primary-color);
+        padding: 0 0 0 8px;
+        font-size: 1.1rem;
+    }
+
+    .button-icon::part(base):hover {
+        color: var(--error-color);
+    }
+
+    .button-icon::part(base):active {
+        color: var(--font-color);
+    }
+
+    .error {
+        color: var(--error-color);
+    }
+
+    .warning {
+        color: var(--warn-color)
+    }
+
+    .info {
+        color: var(--primary-color)
+    }
+
+`;

package/dist/components/problems-overview/diagnostic-evaluation.css.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("lit").CSSResult;
+export default _default;

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

@@ -0,0 +1,178 @@
+import { css } from "lit";
+export default css `
+    .diagnostic-evaluation {
+        display: flex;
+        border-bottom: 1px dashed var(--secondary-color);
+    }
+    
+    .diagnostic-score {
+        text-align: center;
+        margin-top: 5px;
+        padding-bottom: 10px;
+    }
+    
+    .diagnostic-evaluation label {
+        font-size: 0.7rem;
+        font-family: var(--font-stack), monospace;
+    }
+
+    .diagnostic-evaluation span {
+        font-size: 0.9rem;
+        font-family: var(--font-stack-bold), monospace;
+    }
+    
+    .score {
+        width: 100px;
+        height: 100px;
+        line-height: 100px;
+        border: 1px solid var(--primary-color);
+        text-align: center;
+        margin-top: 10px;
+        margin-bottom: 10px;
+    }
+    .score span {
+        display: inline-block;
+        vertical-align: middle;
+        line-height: normal;
+        font-size: 2rem;
+        color: var(--primary-color);
+        font-family: var(--font-stack-bold), monospace;
+        
+    }
+    
+    .evaluation {
+        margin-left: 10px;
+        text-align: left;
+        border-left: 1px dashed var(--secondary-color);
+        padding-left: 10px;
+        padding-top: 5px;
+    }
+    
+    .evaluation p {
+        font-size: 0.8rem;
+        margin-bottom: 3px;
+    }
+    
+    .evaluation label {
+        font-family: var(--font-stack-bold), monospace;
+    }
+
+    .score.one {
+        border-color: var(--error-color);
+        text-shadow: none;
+        animation-name: errorGlow;
+        animation-duration: 1.2s;
+        animation-iteration-count: infinite;
+        animation-direction: alternate;
+    }
+    
+    .score.one span {
+        color: var(--error-color);
+    }
+
+    .score.two {
+        border-color: var(--warn-400);
+        text-shadow: none;
+        animation-name: twoGlow;
+        animation-duration: 1.2s;
+        animation-iteration-count: infinite;
+        animation-direction: alternate;
+    }
+
+    .score.two span {
+        color: var(--warn-400);
+    }
+
+    .score.three {
+        border-color: var(--warn-color);
+        text-shadow: none;
+    }
+
+    .score.three span {
+        color: var(--warn-color);
+    }
+    
+    .score.four {
+        border-color: var(--ok-200);
+        text-shadow: none;
+    }
+
+    .score.four span {
+        color: var(--ok-200);
+    }
+
+    .score.five {
+        border-color: var(--terminal-text);
+        text-shadow: none;
+    }
+
+    .score.five span {
+        color: var(--terminal-text);
+    }
+
+
+    .score.zero {
+        border-color: var(--font-color-sub2);
+        text-shadow: none;
+    }
+
+    .score.zero span {
+        color: var(--font-color-sub2);
+    }
+    
+    a {
+        color: var(--primary-color);
+        text-decoration: none;
+    }
+    
+    a:hover {
+        color: var(--primary-color);
+        text-decoration: underline;
+    }
+    a:active {
+        color: var(--error-color);
+    }
+    
+    ul  {
+        padding-left: 5px;
+        margin-top: 0;
+        padding-top: 0;
+    }
+
+    ul > li {
+        font-size: 0.8rem;
+        line-height: 1.2em;
+    }
+    
+    
+    @keyframes errorGlow {
+        from {
+            box-shadow: 0 0 1px var(--error-color-lowalpha);
+            border-color: var(--error-color-lowalpha);
+            text-shadow: 0 0 1rem var(--background-color);
+
+        }
+        to {
+            border-color: var(--error-color);
+            box-shadow: 0 0 8px var(--error-color);
+            text-shadow: 0 0 1rem var(--error-color);
+        }
+    }
+
+    @keyframes twoGlow {
+        from {
+            box-shadow: 0 0 1px var(--warn-400-lowalpha);
+            border-color: var(--warn-400-lowalpha);
+            text-shadow: 0 0 1rem var(--background-color);
+        }
+        to {
+            border-color: var(--warn-400);
+            box-shadow: 0 0 8px var(--warn-400);
+            text-shadow: 0 0 1rem var(--warn-400);
+        }
+    }
+    
+    
+    
+    
+`;

package/dist/components/problems-overview/diagnostic-evaluation.d.ts

@@ -0,0 +1,13 @@
+import { LitElement } from "lit";
+export declare class DiagnosticEvaluation extends LitElement {
+    static styles: import("lit").CSSResult[];
+    score: number;
+    evaluation: string;
+    diagnosis: string;
+    private links;
+    constructor();
+    scoreClass(): string;
+    viewRuleDocs(ruleName: string): void;
+    convertToLinks(text: string): string;
+    render(): import("lit-html").TemplateResult<1>;
+}

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

@@ -0,0 +1,119 @@
+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 { html, LitElement } from "lit";
+import { property } from "lit/decorators.js";
+import { marked } from "marked";
+import { unsafeHTML } from "lit/directives/unsafe-html.js";
+import { ProblemDrawerEventType } from "@/components/problem-list/details-drawer";
+import { OpenProblemDrawer } from "@/events/doctor";
+import diagnosticEvaluationCss from "./diagnostic-evaluation.css";
+import listsCss from "@/css/lists.css";
+let DiagnosticEvaluation = class DiagnosticEvaluation extends LitElement {
+    constructor() {
+        super();
+        this.links = [];
+        this.evaluation = "Unknown";
+    }
+    scoreClass() {
+        if (this.score === 0) {
+            return "zero";
+        }
+        if (this.score >= 90) {
+            return "five";
+        }
+        else if (this.score >= 70) {
+            return "four";
+        }
+        else if (this.score >= 50) {
+            return "three";
+        }
+        else if (this.score >= 30) {
+            return "two";
+        }
+        else {
+            return "one";
+        }
+    }
+    viewRuleDocs(ruleName) {
+        this.dispatchEvent(new CustomEvent(OpenProblemDrawer, {
+            bubbles: true,
+            composed: true,
+            detail: {
+                type: ProblemDrawerEventType.RULE_DOCS,
+                rule: ruleName
+            }
+        }));
+    }
+    convertToLinks(text) {
+        const regex = /#\{([^}]+)}/g;
+        // @ts-ignore
+        const replaced = text.replace(regex, (match, p1) => {
+            this.links.push(p1);
+            return ``;
+        });
+        return replaced;
+    }
+    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>`;
+        });
+        let evalString = this.evaluation;
+        if (evalString === '') {
+            evalString = "Unknown";
+        }
+        let score = this.score;
+        if (score === 0) {
+            score = "??";
+        }
+        else {
+            score = this.score + '%';
+        }
+        if (parsed === '') {
+            parsed = "No diagnosis available, looks like we're missing an OpenAPI specification";
+        }
+        return html `
+            <div class="diagnostic-evaluation">
+                <div class="diagnostic-score">
+                    <label>Overall score</label>
+                    <div class="score ${this.scoreClass()}">
+                        <span>${score}</span>
+                    </div>
+                    <span>${evalString}</span>
+                </div>
+                <div class="evaluation">
+                    <label>The doctor's diagnosis:</label>
+                    <p class="diagnosis">
+                        ${unsafeHTML(parsed)}
+                    </p>
+                    <ul>
+                    ${renderedLinks}
+                    </ul>
+                </div>
+            </div>
+        `;
+    }
+};
+DiagnosticEvaluation.styles = [listsCss, diagnosticEvaluationCss];
+__decorate([
+    property({ type: Number })
+], DiagnosticEvaluation.prototype, "score", void 0);
+__decorate([
+    property()
+], DiagnosticEvaluation.prototype, "evaluation", void 0);
+__decorate([
+    property()
+], DiagnosticEvaluation.prototype, "diagnosis", void 0);
+DiagnosticEvaluation = __decorate([
+    customElement("pb33f-diagnostic-evaluation")
+], DiagnosticEvaluation);
+export { DiagnosticEvaluation };

package/dist/components/problems-overview/document-statistic.css.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("lit").CSSResult;
+export default _default;

package/dist/components/problems-overview/document-statistic.css.js

@@ -0,0 +1,16 @@
+import { css } from "lit";
+export default css `
+
+    label {
+        font-size: 0.7rem;
+        font-family: var(--font-stack), monospace;
+    }
+    
+    span {
+        font-size: 0.7rem;
+        color: var(--primary-color);
+        font-family: var(--font-stack-bold), monospace;
+        text-shadow: 0 0 1rem var(--primary-color);
+    }
+    
+`;