@pb33f/cowboy-components 0.0.13 → 0.1.0

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

@@ -0,0 +1,10 @@
+import { LitElement } from "lit";
+export declare class DocumentStatistic extends LitElement {
+    static styles: import("lit").CSSResult[];
+    label: string;
+    value: any;
+    postfix: string;
+    private isNumeric;
+    constructor();
+    render(): import("lit-html").TemplateResult<1>;
+}

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

@@ -0,0 +1,49 @@
+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 documentStatisticCss from "./document-statistic.css";
+let DocumentStatistic = class DocumentStatistic extends LitElement {
+    constructor() {
+        super();
+        this.isNumeric = (string) => /^[+-]?\d+(\.\d+)?$/.test(string);
+        this.label = "[statistic]";
+        this.value = 0;
+        this.postfix = '';
+    }
+    render() {
+        let formatted;
+        if (this.value && !this.isNumeric(this.value)) {
+            formatted = html `${this.value}`;
+        }
+        else {
+            let v = this.value;
+            if (this.value < 1) {
+                v = 0;
+            }
+            formatted = html `<sl-format-number value="${v}"></sl-format-number>`;
+        }
+        return html `
+            <label>${this.label}:</label>
+            <span>${formatted}${this.postfix}</span>
+        `;
+    }
+};
+DocumentStatistic.styles = [documentStatisticCss];
+__decorate([
+    property()
+], DocumentStatistic.prototype, "label", void 0);
+__decorate([
+    property()
+], DocumentStatistic.prototype, "value", void 0);
+__decorate([
+    property()
+], DocumentStatistic.prototype, "postfix", void 0);
+DocumentStatistic = __decorate([
+    customElement("pb33f-document-statistic")
+], DocumentStatistic);
+export { DocumentStatistic };

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

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

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

@@ -0,0 +1,84 @@
+import { css } from "lit";
+export default css `
+    .problem-overview-group {
+        display: flex;
+        flex-direction: row;
+        border-bottom: 1px dashed var(--secondary-color);
+        padding-bottom: 10px;
+        margin-top: 10px;
+    }
+
+    .group-rank {
+        width: 30px;
+        text-align: center;
+        font-size: 1rem;
+    }
+
+    .group-rank span {
+
+    }
+
+    .group-details {
+        flex-grow: 2;
+        margin-left: 10px;
+    }
+
+    span.name {
+        color: var(--primary-color);
+        font-size: 0.9rem;
+    }
+
+    span.name:hover {
+        text-decoration: underline;
+        cursor: pointer;
+    }
+
+
+    span.error {
+        color: var(--error-color);
+        font-family: var(--font-stack-bold), monospace;
+    }
+
+    span.warn {
+        color: var(--warn-color);
+        font-family: var(--font-stack-bold), monospace;
+    }
+
+    .violation-count {
+        font-size: 0.8rem;
+        color: var(--font-color-sub1);
+    }
+
+    .violations {
+        font-size: 0.7rem;
+        width: 100px;
+        margin-left: 20px;
+    }
+
+    .violation {
+        display: flex;
+        flex-direction: row;
+    }
+
+
+    .line {
+        color: var(--font-color-sub1)
+    }
+
+    .path {
+        margin-left: 5px;
+    }
+
+    .action-buttons {
+        padding-right: 5px;
+    }
+
+    .action-buttons sl-button::part(base) {
+        display: block;
+        margin-top: 10px;
+        min-width: 100px;
+    }
+
+
+
+`;

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

@@ -0,0 +1,17 @@
+import { LitElement, TemplateResult } from "lit";
+import { ProblemItem } from "@/components/problem-list/problem-item";
+export declare class ProblemOverviewGroup extends LitElement {
+    static styles: import("lit").CSSResult[];
+    rank: number;
+    totalViolations: number;
+    groupName: string;
+    description: string;
+    category: string;
+    violationPercent: number;
+    problems: ProblemItem[];
+    constructor();
+    viewRuleDocs(): void;
+    selectRule(): void;
+    selectLine(problem: ProblemItem): void;
+    render(): TemplateResult<1>;
+}

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

@@ -0,0 +1,121 @@
+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 problemOverviewGroupCss from "./problem-overview-group.css";
+import { ProblemDrawerEventType } from "@/components/problem-list/details-drawer";
+import { OpenProblemDrawer, ProblemClicked, RuleClicked } from "@/events/doctor";
+import sharedCss from "@/css/shared.css";
+import buttonCss from "@/css/button.css";
+import { ProblemItem } from "@/components/problem-list/problem-item";
+let ProblemOverviewGroup = class ProblemOverviewGroup extends LitElement {
+    constructor() {
+        super();
+    }
+    viewRuleDocs() {
+        this.dispatchEvent(new CustomEvent(OpenProblemDrawer, {
+            bubbles: true,
+            composed: true,
+            detail: {
+                type: ProblemDrawerEventType.RULE_DOCS,
+                rule: this.groupName
+            }
+        }));
+    }
+    selectRule() {
+        this.dispatchEvent(new CustomEvent(RuleClicked, {
+            bubbles: true,
+            composed: true,
+            detail: {
+                rule: this.groupName
+            }
+        }));
+    }
+    selectLine(problem) {
+        this.dispatchEvent(new CustomEvent(ProblemClicked, {
+            bubbles: true,
+            composed: true,
+            detail: {
+                problem: problem,
+                launchedFromProblems: false
+            }
+        }));
+    }
+    render() {
+        const renderedProblems = this.problems?.slice(0, 4);
+        //const renderedProblems = this.problems;
+        let pc = html `
+            <pb33f-percent-bar value="${this.violationPercent}"></pb33f-percent-bar>`;
+        let clazz = "";
+        if (this.rank == 1) {
+            clazz = "error";
+            pc = html `
+                <pb33f-percent-bar value="${this.violationPercent}" error></pb33f-percent-bar>`;
+        }
+        if (this.rank == 2) {
+            clazz = "warn";
+            pc = html `
+                <pb33f-percent-bar value="${this.violationPercent}" warning></pb33f-percent-bar>`;
+        }
+        if (!this.groupName || this.groupName === '') {
+            this.groupName = 'invalid OpenAPI specification';
+        }
+        return html `
+            <div class="problem-overview-group">
+                <div class="group-rank">
+                    <span>${this.rank}</span>
+                </div>
+                <div class="group-details">
+                    <span class="name ${clazz}" @click="${this.viewRuleDocs}">${this.groupName}</span>
+                    ${pc}
+                </div>
+                <div class="violations">
+                    
+                    ${renderedProblems?.map(problem => {
+            return html `
+                            <div class="violation">
+                                <div class="line">
+                                    <a href="#" @click="${() => this.selectLine(problem)}">
+                                        ${problem?.problemObject?.startLineNumber}:${problem?.problemObject?.startColumn}</a>
+                                </div>
+                            </div>
+                        `;
+        })}
+                </div>
+                <div class="action-buttons">
+                    <sl-button @click="${this.selectRule}">${this.totalViolations} &gt;</sl-button>
+                </div>
+            </div>
+        `;
+    }
+};
+ProblemOverviewGroup.styles = [sharedCss, buttonCss, problemOverviewGroupCss];
+__decorate([
+    property({ type: Number })
+], ProblemOverviewGroup.prototype, "rank", void 0);
+__decorate([
+    property({ type: Number })
+], ProblemOverviewGroup.prototype, "totalViolations", void 0);
+__decorate([
+    property()
+], ProblemOverviewGroup.prototype, "groupName", void 0);
+__decorate([
+    property()
+], ProblemOverviewGroup.prototype, "description", void 0);
+__decorate([
+    property()
+], ProblemOverviewGroup.prototype, "category", void 0);
+__decorate([
+    property({ type: Number })
+], ProblemOverviewGroup.prototype, "violationPercent", void 0);
+__decorate([
+    property({ type: ProblemItem })
+], ProblemOverviewGroup.prototype, "problems", void 0);
+ProblemOverviewGroup = __decorate([
+    customElement("pb33f-problem-overview-group")
+], ProblemOverviewGroup);
+export { ProblemOverviewGroup };

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

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

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

@@ -0,0 +1,40 @@
+import { css } from "lit";
+export default css `
+
+    label {
+        font-size: 0.8rem;
+        font-family: var(--font-stack), monospace;
+    }
+    
+    span {
+        display: block;
+        font-size: 1.3rem;
+        padding-top: 3px;
+        color: var(--primary-color);
+        font-family: var(--font-stack-bold), monospace;
+        text-shadow: 0 0 1rem var(--primary-color);
+    }
+    
+    .warn {
+        color: var(--warn-color);
+    }
+    
+    .error {
+        color: var(--error-color);
+    }
+    
+    sl-icon {
+        vertical-align: middle;
+        margin-right: 5px;
+        font-size: 1rem;
+    }
+    
+    .glow-warn {
+        text-shadow: 0 0 1rem var(--warn-color);
+    }
+
+    .glow-error {
+        text-shadow: 0 0 1rem var(--error-color), 0 0 1.2rem var(--error-color);
+    }
+    
+`;

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

@@ -0,0 +1,11 @@
+import { LitElement } from "lit";
+export declare class ProblemStatistic extends LitElement {
+    static styles: import("lit").CSSResult[];
+    label: string;
+    value: number;
+    isError: boolean;
+    isWarning: boolean;
+    isInform: boolean;
+    constructor();
+    render(): import("lit-html").TemplateResult<1>;
+}

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

@@ -0,0 +1,57 @@
+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 problemStatisticCss from "./problem-statistic.css";
+let ProblemStatistic = class ProblemStatistic extends LitElement {
+    constructor() {
+        super();
+        this.label = "[statistic]";
+        this.value = 0;
+    }
+    render() {
+        if (this.isError) {
+            return html `
+                <sl-icon name="x-square" class="error"></sl-icon><label>${this.label}</label>
+                <span class="error glow-error"><sl-format-number value="${this.value}"></sl-format-number></span>`;
+        }
+        if (this.isWarning) {
+            return html `
+                <sl-icon name="exclamation-triangle" class="warn"></sl-icon><label>${this.label}</label>
+                <span class="warn glow-warn"><sl-format-number value="${this.value}"></sl-format-number></span>`;
+        }
+        if (this.isInform) {
+            return html `
+                <sl-icon name="info-square"></sl-icon><label>${this.label}</label>
+                <span><sl-format-number value="${this.value}"></sl-format-number></span>`;
+        }
+        return html `
+            <label>${this.label}</label>
+            <span><sl-format-number value="${this.value}"></sl-format-number></span>
+        `;
+    }
+};
+ProblemStatistic.styles = [problemStatisticCss];
+__decorate([
+    property()
+], ProblemStatistic.prototype, "label", void 0);
+__decorate([
+    property({ type: Number })
+], ProblemStatistic.prototype, "value", void 0);
+__decorate([
+    property({ type: Boolean })
+], ProblemStatistic.prototype, "isError", void 0);
+__decorate([
+    property({ type: Boolean })
+], ProblemStatistic.prototype, "isWarning", void 0);
+__decorate([
+    property({ type: Boolean })
+], ProblemStatistic.prototype, "isInform", void 0);
+ProblemStatistic = __decorate([
+    customElement("pb33f-problem-statistic")
+], ProblemStatistic);
+export { ProblemStatistic };

package/dist/components/problems-overview/problem-statistics.css.d.ts

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

package/dist/components/problems-overview/problem-statistics.css.js

@@ -0,0 +1,46 @@
+import { css } from "lit";
+export default css `
+    sl-card {
+        --border-color: var(--secondary-color);
+        --border-radius: 0;
+        --border-width: 1px;
+       
+        --padding: 5px;
+        flex-grow: 1;
+        margin-left: 10px;
+    }
+    
+    sl-card::part(base) {
+        border-style: dashed;
+    }
+
+
+    sl-card.card-small::part(body) {
+        padding:0;
+    }
+
+    sl-card.card-small {
+        --border-color: var(--background-color)
+    }
+    
+    
+    h3 {
+        margin-top: 10px;
+        margin-bottom: 10px;
+    }
+    
+    .statistics {
+        display: flex;
+        justify-content: space-between;
+        padding-bottom: 10px;
+        border-bottom:  1px dashed var(--secondary-color);
+    }
+    
+    
+    .statistics sl-card:first-child {
+        margin-left: 0;
+    }
+    
+   
+    
+`;

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

@@ -0,0 +1,14 @@
+import '@shoelace-style/shoelace/dist/components/card/card.js';
+import './problem-statistic.js';
+import './document-statistic.js';
+import { LitElement } from "lit";
+import { DrDiagnostics } from "@/model/document-statistics";
+import { ProblemItem } from "@/components/problem-list/problem-item";
+export declare class ProblemStatisticsComponent extends LitElement {
+    static styles: import("lit").CSSResult[];
+    problems: ProblemItem[];
+    drDiagnostics: DrDiagnostics;
+    constructor();
+    protected willUpdate(): void;
+    render(): import("lit-html").TemplateResult<1>;
+}

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

@@ -0,0 +1,132 @@
+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/card/card.js';
+import './problem-statistic.js';
+import './document-statistic.js';
+import { customElement, property } from "lit/decorators.js";
+import { html, LitElement } from "lit";
+import { Problem } from "@/model/problem";
+import problemStatisticsCss from "./problem-statistics.css";
+import { DocumentStatistics } from "@/model/document-statistics";
+let ProblemStatisticsComponent = class ProblemStatisticsComponent extends LitElement {
+    // private problemStatistics: ProblemStatistics;
+    constructor() {
+        super();
+    }
+    willUpdate() {
+        // if (this.problemStatistics) {
+        //     this.problemStatistics.problems = this.problems;
+        // } else {
+        //     this.problemStatistics = new ProblemStatistics(this.problems);
+        // }
+    }
+    render() {
+        const totalViolations = this.problems.length;
+        const rulesViolated = new Set(this.problems.map((problem) => {
+            return problem.problemObject.source;
+        })).size;
+        let categoriesViolated = 0;
+        if (this.drDiagnostics) {
+            categoriesViolated = this.drDiagnostics?.statistics.categoryStatistics?.filter((cat) => {
+                return cat.numIssues > 0;
+            }).length;
+        }
+        return html `
+            <div class="statistics">
+                <sl-card class="card-small">
+                    <pb33f-document-statistic label="Size"
+                                              postFix="kb"
+                                              value="${this.drDiagnostics?.statistics.filesizeKb}">
+                    </pb33f-document-statistic>
+                </sl-card>
+
+                <sl-card class="card-small">
+                    <pb33f-document-statistic label="Version"
+                                              value="${this.drDiagnostics?.statistics.version}">
+                    </pb33f-document-statistic>
+                </sl-card>
+
+                <sl-card class="card-small">
+                    <pb33f-document-statistic label="Schemas"
+                                              value="${this.drDiagnostics?.statistics.schemas}">
+                    </pb33f-document-statistic>
+                </sl-card>
+
+                <sl-card class="card-small">
+                    <pb33f-document-statistic label="Parameters"
+                                              value="${this.drDiagnostics?.statistics.parameters}">
+                    </pb33f-document-statistic>
+                </sl-card>
+
+                <sl-card class="card-small">
+                    <pb33f-document-statistic label="Operations"
+                                              value="${this.drDiagnostics?.statistics.operations}">
+                    </pb33f-document-statistic>
+                </sl-card>
+                <sl-card class="card-small">
+                    <pb33f-document-statistic label="Refs"
+                                              value="${this.drDiagnostics?.statistics.references}">
+                    </pb33f-document-statistic>
+                </sl-card>
+                <sl-card class="card-small">
+                    <pb33f-document-statistic label="Enums"
+                                              value="${this.drDiagnostics?.statistics.enums}">
+                    </pb33f-document-statistic>
+                </sl-card>
+                <sl-card class="card-small">
+                    <pb33f-document-statistic label="Tags"
+                                              value="${this.drDiagnostics?.statistics.tags}">
+                    </pb33f-document-statistic>
+                </sl-card>
+            </div>
+            <h3>Violation Statistics</h3>
+            <div class="statistics">
+                <sl-card class="card-basic">
+                    <pb33f-problem-statistic label="Total"
+                                             value="${totalViolations}">
+                    </pb33f-problem-statistic>
+                </sl-card>
+                <sl-card class="card-basic">
+                    <pb33f-problem-statistic label="Rules"
+                                             value="${rulesViolated}">
+                    </pb33f-problem-statistic>
+                </sl-card>
+                <sl-card class="card-basic">
+                    <pb33f-problem-statistic label="Categories"
+                                             value="${categoriesViolated}">
+                    </pb33f-problem-statistic>
+                </sl-card>
+                <sl-card class="card-basic">
+                    <pb33f-problem-statistic label="Errors"
+                                             value="${this.drDiagnostics?.statistics.totalErrors}" isError>
+                    </pb33f-problem-statistic>
+                </sl-card>
+                <sl-card class="card-basic">
+                    <pb33f-problem-statistic label="Warnings"
+                                             value="${this.drDiagnostics?.statistics.totalWarnings}" isWarning>
+                    </pb33f-problem-statistic>
+                </sl-card>
+                <sl-card class="card-basic">
+                    <pb33f-problem-statistic label="Informs"
+                                             value="${this.drDiagnostics?.statistics.totalInfo}" isInform>
+                    </pb33f-problem-statistic>
+                </sl-card>
+            </div>
+        `;
+    }
+};
+ProblemStatisticsComponent.styles = [problemStatisticsCss];
+__decorate([
+    property({ type: Problem })
+], ProblemStatisticsComponent.prototype, "problems", void 0);
+__decorate([
+    property({ type: DocumentStatistics })
+], ProblemStatisticsComponent.prototype, "drDiagnostics", void 0);
+ProblemStatisticsComponent = __decorate([
+    customElement("pb33f-problem-statistics")
+], ProblemStatisticsComponent);
+export { ProblemStatisticsComponent };

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

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

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

@@ -0,0 +1,49 @@
+import { css } from "lit";
+export default css `
+
+    h3.rule-violations {
+        border-top: 1px dashed var(--secondary-color);
+        margin-top: 0;
+        padding-top: 10px;
+        margin-bottom: 10px;
+    }
+    
+    .paginator {
+        overflow-y: auto;
+    }
+
+
+    pb33f-paginator-navigation::part(values) {
+        max-height: calc(100vh - 450px);
+    }
+    
+    
+    .paginator::part(values) {
+        background-color: red;
+       
+    }
+    
+    .overview-container {
+        height: 100%;
+    }
+    
+    .unavailable {
+        width: 50%;
+        margin: 80px auto;
+        font-size: 6rem;
+        text-align: center;
+        color: var(--error-color);
+        
+    }
+    
+    .unavailable p {
+        font-size: 1.2rem;
+        color: var(--font-color-sub1)
+    }
+    
+    .unavailable p strong {
+        font-family:  var(--font-stack-bold), monospace;
+        color: var(--error-color);
+    }
+    
+`;

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

@@ -0,0 +1,21 @@
+import { LitElement } from "lit";
+import './diagnostic-evaluation.js';
+import '@/components/percent-bar/percent-bar.js';
+import { SlResizeObserver } from "@shoelace-style/shoelace";
+import { ProblemItem } from "@/components/problem-list/problem-item";
+import { DrDiagnostics } from "@/model/document-statistics";
+export declare class ProblemsOverview extends LitElement {
+    static styles: import("lit").CSSResult[];
+    problemList: ProblemItem[];
+    resizeObserver: SlResizeObserver;
+    statistics: DrDiagnostics;
+    unavailable: boolean;
+    private readonly problemStatistics;
+    private problemOverviewGroups;
+    private readonly paginator;
+    constructor();
+    willUpdate(): void;
+    private buildProblemOverviewGroups;
+    set problems(value: ProblemItem[]);
+    render(): import("lit-html").TemplateResult<1>;
+}