@pb33f/cowboy-components 0.0.13 → 0.1.0

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

@@ -0,0 +1,108 @@
+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, query } from "lit/decorators.js";
+import { html, LitElement } from "lit";
+import { Problem } from "@/model/problem";
+import { ProblemStatisticsComponent } from "./problem-statistics";
+import './diagnostic-evaluation.js';
+import '@/components/percent-bar/percent-bar.js';
+import { ProblemOverviewGroup } from "./problem-overview-group";
+import problemsOverviewCss from "./problems-overview.css";
+import { Paginator } from "@/components/paginator/paginator";
+import { DrDiagnostics } from "@/model/document-statistics";
+let ProblemsOverview = class ProblemsOverview extends LitElement {
+    constructor() {
+        super();
+        this.problemList = [];
+        this.problemStatistics = new ProblemStatisticsComponent();
+        this.problemOverviewGroups = [];
+        this.paginator = new Paginator();
+        this.paginator.label = "Rules";
+        this.unavailable = false;
+    }
+    willUpdate() {
+        this.problemStatistics.drDiagnostics = this.statistics;
+        this.problemStatistics.problems = this.problemList;
+    }
+    buildProblemOverviewGroups(problems) {
+        let problemOverviewGroups = new Map();
+        for (let i = 0; i < problems.length; i++) {
+            let problem = problems[i];
+            let rule = problem.problemObject.source;
+            if (problemOverviewGroups.has(rule)) {
+                let group = problemOverviewGroups.get(rule);
+                group.totalViolations++;
+                group.problems.push(problem);
+            }
+            else {
+                const group = new ProblemOverviewGroup();
+                group.groupName = problem.problemObject.source;
+                group.totalViolations = 1;
+                group.problems = [problem];
+                problemOverviewGroups.set(rule, group);
+            }
+        }
+        // now we need to calculate the percentage of violations for each group
+        let totalViolations = problems.length;
+        for (let group of problemOverviewGroups.values()) {
+            group.violationPercent = Math.round((group.totalViolations / totalViolations) * 100);
+        }
+        const values = Array.from(problemOverviewGroups.values());
+        // order by violations
+        values.sort((a, b) => {
+            return b.totalViolations - a.totalViolations;
+        });
+        // stack rank.
+        for (let i = 0; i < values.length; i++) {
+            values[i].rank = i + 1;
+        }
+        return values;
+    }
+    set problems(value) {
+        this.problemList = value;
+        this.problemOverviewGroups = this.buildProblemOverviewGroups(value);
+        this.paginator.values = this.problemOverviewGroups;
+        this.paginator.itemsPerPage = 10;
+    }
+    render() {
+        if (this.unavailable) {
+            return html `
+                <div class="overview-container unavailable">
+                    <sl-icon name="sign-stop" class="stop"></sl-icon>
+                    <p>The doctor is <strong>unavailable</strong>.</p>
+                </div>`;
+        }
+        return html `
+            <div class="overview-container">
+                ${this.problemStatistics}
+                <pb33f-diagnostic-evaluation 
+                        score="${this.statistics?.statistics.overallScore}" 
+                        evaluation="${this.statistics?.evaluation}"
+                        diagnosis="${this.statistics?.diagnosis}"
+                ></pb33f-diagnostic-evaluation>
+                <div class="paginator">${this.paginator}</div>
+            </div>
+        `;
+    }
+};
+ProblemsOverview.styles = [problemsOverviewCss];
+__decorate([
+    property({ type: Problem })
+], ProblemsOverview.prototype, "problemList", void 0);
+__decorate([
+    query('sl-resize-observer')
+], ProblemsOverview.prototype, "resizeObserver", void 0);
+__decorate([
+    property({ type: DrDiagnostics })
+], ProblemsOverview.prototype, "statistics", void 0);
+__decorate([
+    property({ type: Boolean })
+], ProblemsOverview.prototype, "unavailable", void 0);
+ProblemsOverview = __decorate([
+    customElement("pb33f-problems-overview")
+], ProblemsOverview);
+export { ProblemsOverview };

package/dist/components/render-json-path/render-json-path.css.d.ts

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

package/dist/components/render-json-path/render-json-path.css.js

@@ -0,0 +1,86 @@
+import { css } from "lit";
+export default css `
+    :host {
+        color: var(--font-color);
+        font-family: var(--font-stack), monospace;
+        background: none;
+    }
+    
+    .jsonpath {
+        background: none;
+        border: none;
+    }
+    
+    .jsonpath:hover {
+        color: var(--font-color);
+    }
+
+    .jsonpath.selected:hover {
+        color: var(--background-color);
+    }
+    
+    .bracket {
+        color: var(--secondary-color);
+        font-family: var(--font-stack-bold), monospace;
+        text-shadow: 0 0 10px var(--secondary-color);
+    }
+    
+    .bracket-nested {
+        color: var(--tertiary-color);
+    }
+    
+    .param {
+        color: var(--primary-color);
+        font-family: var(--font-stack), monospace;
+      
+        font-weight: normal;
+    }
+
+    .param-nested {
+        color: var(--primary-color);
+        font-family: var(--font-stack-bolditalic), monospace;
+        text-shadow: 0 0 10px var(--primary-color);
+        font-weight: normal;
+
+    }
+    
+    .param:hover {
+        //text-decoration: underline;
+        //cursor: pointer;
+    }
+    
+    .dot {
+        color: var(--font-color-sub2)
+    }
+    
+    .dollar {
+        color: var(--terminal-yellow)
+    }
+    
+    .jsonpath {
+        color: var(--font-color-sub1);
+    }
+    
+    .selected {
+        color: var(--background-color)
+    }
+
+    .selected .bracket {
+        color: var(--background-color)
+    }
+
+    .selected .bracket-nested {
+        color: var(--background-color)
+    }
+
+    .selected .param {
+        color: var(--background-color)
+    }
+
+    .selected .param-nested {
+        color: var(--background-color)
+    }
+    
+    
+    
+`;

package/dist/components/render-json-path/render-json-path.d.ts

@@ -0,0 +1,11 @@
+import { LitElement } from 'lit';
+export declare class RenderJSONPathComponent extends LitElement {
+    static styles: import("lit").CSSResult;
+    path: string;
+    selected: boolean;
+    private readonly chars;
+    constructor();
+    replaceBrackets(value: string): string;
+    breakPath(): import("lit-html").TemplateResult<1>;
+    render(): import("lit-html").TemplateResult<1>;
+}

package/dist/components/render-json-path/render-json-path.js

@@ -0,0 +1,105 @@
+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 } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { unsafeHTML } from "lit/directives/unsafe-html.js";
+import renderJsonPathCss from "./render-json-path.css";
+const bracketRegex = /(\{)([\w.-_$:]+)(})|(:)([\w.-_$:]+)/g;
+const pathRegex = /(\[)(["']?)([\w${}:./\\]+)(['"]?)(])/g;
+let RenderJSONPathComponent = class RenderJSONPathComponent extends LitElement {
+    constructor() {
+        super();
+        this.path = "/";
+        this.selected = false;
+        this.chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
+    }
+    replaceBrackets(value) {
+        let m;
+        let returnString = value;
+        while ((m = bracketRegex.exec(value)) !== null) {
+            m.forEach((match, groupIndex) => {
+                if (match !== undefined && (groupIndex === 1 || groupIndex === 4)) {
+                    returnString = returnString.replaceAll(match, '<span class="bracket">' + match + '</span>');
+                }
+                if (match !== undefined && (groupIndex === 2 || groupIndex === 5)) {
+                    returnString = returnString.replaceAll(match, '<span class="param-nested">' + match + '</span>');
+                }
+                if (match !== undefined && groupIndex === 3) {
+                    returnString = returnString.replaceAll(match, '<span class="bracket">' + match + '</span>');
+                }
+            });
+        }
+        return returnString;
+    }
+    breakPath() {
+        let segments = this.path.split(".");
+        if (segments.length > 0) {
+            if (segments[0] == '$')
+                segments = segments.slice(1, segments.length);
+        }
+        let cleaned = segments.join(".");
+        const path = cleaned;
+        let matchMap = new Map();
+        let match;
+        // build a match map and replace the matches with a random string that matches the length of the match
+        while ((match = pathRegex.exec(path)) !== null) {
+            const size = pathRegex.lastIndex - match.index;
+            const key = randomString(size, this.chars);
+            matchMap.set(key, match);
+            cleaned = cleaned.substring(0, match.index) + key + cleaned.substring(pathRegex.lastIndex);
+        }
+        // replace dots with rendered dots
+        cleaned = cleaned.replaceAll(".", '<span class="dot">.</span>');
+        // iterate through match map, build the segments and replace the random strings with the segments
+        matchMap.forEach((value, key) => {
+            let rendered = [];
+            if (value[1] !== undefined) {
+                rendered.push('<span part="path" class="bracket">' + value[1] + '</span>');
+            }
+            if (value[2] !== undefined) {
+                rendered.push(value[2]);
+            }
+            if (value[3] !== undefined) {
+                rendered.push('<span part="path" class="param">' + this.replaceBrackets(value[3]) + '</span>');
+            }
+            if (value[4] !== undefined) {
+                rendered.push(value[4]);
+            }
+            if (value[5] !== undefined) {
+                rendered.push('<span part="path" class="bracket">' + value[5] + '</span>');
+            }
+            const renderedString = rendered.join("");
+            cleaned = cleaned.replaceAll(key, renderedString);
+        });
+        let returnString = cleaned;
+        returnString = returnString.replaceAll("$", "<span class='dollar'>$</span>");
+        if (returnString === '') {
+            returnString = "<span part='path' class='dot'>{no path available}</span>";
+        }
+        return html `${unsafeHTML(returnString)}`;
+    }
+    render() {
+        return html `<span part="path" class="jsonpath ${this.selected ? 'selected' : ''}">${this.breakPath()}</span>`;
+    }
+};
+RenderJSONPathComponent.styles = renderJsonPathCss;
+__decorate([
+    property()
+], RenderJSONPathComponent.prototype, "path", void 0);
+__decorate([
+    property({ type: Boolean })
+], RenderJSONPathComponent.prototype, "selected", void 0);
+RenderJSONPathComponent = __decorate([
+    customElement('pb33f-render-json-path')
+], RenderJSONPathComponent);
+export { RenderJSONPathComponent };
+function randomString(length, chars) {
+    let result = '';
+    for (let i = length; i > 0; --i)
+        result += chars[Math.floor(Math.random() * chars.length)];
+    return result;
+}

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

@@ -0,0 +1,5 @@
+import { LitElement } from "lit";
+export declare class DoctorSettings extends LitElement {
+    constructor();
+    render(): import("lit-html").TemplateResult<1>;
+}

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

@@ -0,0 +1,22 @@
+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";
+let DoctorSettings = class DoctorSettings extends LitElement {
+    constructor() {
+        super();
+    }
+    render() {
+        return html `
+            
+        `;
+    }
+};
+DoctorSettings = __decorate([
+    customElement("pb33f-doctor-settings")
+], DoctorSettings);
+export { DoctorSettings };

package/dist/components/the-doctor/status-bar.css.d.ts

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

package/dist/components/the-doctor/status-bar.css.js

@@ -0,0 +1,47 @@
+import { css } from "lit";
+export default css `
+    .status-bar {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        width: 100%;
+        height: 20px;
+        background: var(--background-color);
+        border: 1px dashed var(--secondary-color);
+        z-index: 1000;
+        border-bottom: none;
+        font-size: 0.9rem;
+        padding: 2px 0 0 5px;
+        vertical-align: middle;
+    }
+    
+    sl-icon {
+        vertical-align: middle;
+        font-size: 1rem;
+    }
+    
+    .warning-icon {
+        color: var(--warn-color);
+        vertical-align: middle;
+    }
+    
+    .error-icon {
+        color: var(--error-color);
+        vertical-align: middle;
+    }
+    
+    .warning {
+        border: 1px dashed var(--warn-color);
+        border-bottom: none;
+    }
+    
+    .error {
+        border: 1px dashed var(--error-color);
+        border-bottom: none;
+    }
+    
+    strong {
+        font-family: var(--font-stack-bold), monospace;
+    }
+    
+`;

package/dist/components/the-doctor/status-bar.d.ts

@@ -0,0 +1,12 @@
+import { LitElement } from "lit";
+import { SlDialog } from "@shoelace-style/shoelace";
+export declare class StatusBar extends LitElement {
+    static styles: import("lit").CSSResult[];
+    visible: boolean;
+    callsRemaining: number;
+    dialog: SlDialog;
+    constructor();
+    openDialog(): void;
+    closeDialog(): void;
+    render(): import("lit-html").TemplateResult<1> | undefined;
+}

package/dist/components/the-doctor/status-bar.js

@@ -0,0 +1,71 @@
+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, query } from "lit/decorators.js";
+import { html, LitElement } from "lit";
+import statusBarCss from "./status-bar.css";
+import linksCss from "@/css/links.css";
+let StatusBar = class StatusBar extends LitElement {
+    constructor() {
+        super();
+        this.visible = false;
+        this.callsRemaining = 0;
+    }
+    openDialog() {
+        this.dialog.show();
+    }
+    closeDialog() {
+        this.dialog.hide();
+    }
+    render() {
+        if (this.visible) {
+            let clazz = '';
+            let clazzIcon = '';
+            let actionText = '';
+            let icon = 'info-square';
+            if (this.callsRemaining > 0 && this.callsRemaining <= 10) {
+                clazz = 'warning';
+                clazzIcon = 'warning-icon';
+                actionText = 'You are running low.';
+                icon = 'exclamation-triangle';
+            }
+            if (this.callsRemaining <= 0) {
+                clazz = 'error';
+                clazzIcon = 'error-icon';
+                actionText = 'You have run out of credit. Service disabled';
+                icon = 'exclamation-square';
+            }
+            return html `
+                <div class="status-bar ${clazz}">
+                    <sl-dialog label="Credit upgrade coming soon!" class="dialog-overview">
+                        <p>To get more credit for the doctor, you will need to create an account. This feature is coming soon.</p>
+                        <p>
+                            In the meantime please wait 24 hours for your credit to be reset.
+                        </p>
+                        <sl-button slot="footer" variant="primary" @click="${this.closeDialog}">Close</sl-button>
+                    </sl-dialog>
+                    <sl-icon name="${icon}" class="${clazzIcon}"></sl-icon>
+                    <span class="status-text">Credits remaining: <strong>${this.callsRemaining}</strong></span> | 
+                    <span class="action-text">${actionText}</span>
+                    ${this.callsRemaining <= 0 ? html ` | <a href="#" @click="${this.openDialog}"><strong>Get more credit</strong></a>` : ''}
+                </div>`;
+        }
+    }
+};
+StatusBar.styles = [statusBarCss, linksCss];
+__decorate([
+    property({ type: Boolean })
+], StatusBar.prototype, "visible", void 0);
+__decorate([
+    property({ type: Number })
+], StatusBar.prototype, "callsRemaining", void 0);
+__decorate([
+    query('sl-dialog')
+], StatusBar.prototype, "dialog", void 0);
+StatusBar = __decorate([
+    customElement("pb33f-doctor-statusbar")
+], StatusBar);
+export { StatusBar };

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

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

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

@@ -0,0 +1,156 @@
+import { css } from "lit";
+export default css `
+    
+    
+    .doctor {
+        width: 100%;
+        height: 100%;
+        position: relative;
+        
+        
+    }
+    
+    .editor {
+        
+        width: 100%;
+        height: 100%;
+        min-width: 500px;
+        min-height: 300px;
+        position: relative;
+        display: block;
+    }
+    
+    .problems {
+        position: relative;
+        display: block;
+        margin-left: 10px;
+        overflow-y: hidden;
+        width: 100%;
+        height: min-content;
+    }
+
+    .problems::-webkit-scrollbar {
+        width: 8px;
+    }
+
+    .problems::-webkit-scrollbar-track {
+        background-color: black;
+    }
+
+    .problems::-webkit-scrollbar-thumb {
+        box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+        background: var(--secondary-color-lowalpha);
+        padding: var(--global-padding);
+    }
+    
+    
+    sl-split-panel {
+        width: calc(100% - 9px);
+        height: 100%;
+        --divider-width: 2px;
+    }
+
+
+    sl-split-panel::part(divider) {
+        background-color: var(--secondary-color);
+    }
+
+    sl-icon {
+        position: absolute;
+        left: 2px;
+        border-radius: 0;
+        background: var(--secondary-color);
+        color: var(--background-color);
+        padding: 0;
+        width: 10px;
+        height:40px;
+    }
+
+     sl-split-panel::part(divider):focus-visible {
+        background-color: var(--primary-color);
+    }
+
+    sl-split-panel:focus-within sl-icon {
+        background-color: var(--primary-color);
+        color: var(--background-color);
+    }
+    
+    sl-tab-group::part(tabs) {
+        height: 30px;
+    }
+
+    sl-tab::part(base) {
+        padding-top: 0;
+    }
+    
+    .tab-group {
+        --indicator-color: var(--secondary-color);
+
+    }
+
+    sl-tab-panel::part(base) {
+        padding-top: 10px;
+        overflow-y: hidden;
+        
+    }
+    
+    .tab::part(base) {
+        font: var(--font-stack);
+        font-size: 0.9rem;
+    }
+    
+    .unavailable {
+        opacity: 0.4;
+        transition: all 0.5s;
+    }
+    
+    .split-panel {
+        --min: 600px; --max: calc(100vw - 600px);
+    }
+    
+    .overlay {
+        width: 100%;
+        opacity: 1;
+        height: 100%;
+        position: absolute;
+        top: 0;
+        left: 0;
+        pointer-events: auto;
+        cursor: not-allowed;
+        z-index: 100;
+        //backdrop-filter: blur(2px);
+    }
+    
+    .ruleset {
+        font-size: 0.9rem;
+        margin-left: 10px;
+        margin-right: 10px;
+    }
+    
+    sl-switch::part(label) {
+        font-family: var(--font-stack), monospace;
+    }
+
+    sl-switch a  {
+        color: var(--primary-color);
+        text-decoration: none;
+    }
+    sl-switch a:visited  {
+        color: var(--primary-color);
+    }
+    sl-switch a:hover  {
+        color: var(--primary-color);
+        text-decoration: underline;
+    }
+
+    sl-switch a:active {
+        color: var(--error-color);
+        text-decoration: underline;
+    }
+
+
+
+
+
+
+`;