@pb33f/cowboy-components 0.0.14 → 0.1.0

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

@@ -0,0 +1,67 @@
+import { css } from "lit";
+export default css `
+    .filter {
+        display: flex;
+    }
+
+    .label {
+        padding-top: 7px;
+    }
+
+    sl-button::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);
+        min-height: 20px;
+        max-height: 20px;
+        margin-top: 5px;
+        margin-left: 5px;
+        min-width: 150px;
+        max-width: 180px;
+    }
+
+    sl-button::part(label){
+        line-height: 17px;
+        font-size: 0.7rem;
+        overflow-x: hidden;
+    }
+
+
+    sl-menu{
+        border: 1px solid var(--primary-color);
+        border-radius: 0;
+    }
+
+    sl-menu-item::part(base){
+        color: var(--primary-color);
+        font-family: var(--font-stack), monospace;
+        line-height: 17px;
+        font-size: 0.7rem;
+        --sl-color-neutral-100: var(--secondary-color-lowalpha);
+    }
+    
+    sl-input {
+        width: 100%;
+    }
+    
+    sl-input::part(base){
+        border-radius: 0;
+        border: 1px solid var(--primary-color);
+        font-family: var(--font-stack), monospace;
+        font-size: 0.7rem;
+        height: 20px;
+        padding: 0;
+        margin-top: 5px;
+        background-color: var(--background-color);
+
+    }
+
+    sl-input::part(input){
+        border-radius: 0;
+        height: 16px;
+        padding: 0 0 0 5px;
+     
+    }
+`;

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

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

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

@@ -0,0 +1,170 @@
+import { css } from "lit";
+export default css `
+
+    .problem {
+        margin: 0 5px 0 5px;
+        padding-top: 5px;
+        padding-bottom: 5px;
+        border-top: 1px dashed var(--background-color);
+        border-bottom: 1px dashed var(--secondary-color-lowalpha);
+        font-size: 0.8rem;
+        display: flex;
+        min-height: 20px;
+        line-height: 20px;
+    }
+    
+    
+    .problem:hover {
+        color: var(--primary-color);
+        font-family: var(--font-stack-bold), monospace;
+        cursor: pointer;
+        border-top: 1px dashed var(--primary-color);
+        border-bottom: 1px dashed var(--primary-color);
+    }
+    
+    .problem:hover .location {
+        font-family: var(--font-stack), monospace;
+        color: var(--primary-color);
+    }
+
+    .problem:hover .problem-message {
+        color: var(--primary-color);
+        font-family: var(--font-stack), monospace;
+    }
+    
+    .problem:hover pb33f-render-json-path::part(path) {
+        color: var(--font-color);
+    }
+
+    .problem.selected:hover pb33f-render-json-path::part(path) {
+        color: var(--background-color);
+    }
+
+    .problem.selected-sibling:hover pb33f-render-json-path::part(path) {
+        color: var(--font-color);
+    }
+    
+    .problem.selected .location {
+        color: var(--background-color);
+    }
+    
+    .problem.selected-sibling .location {
+        color: var(--font-color);
+    }
+    
+    .problem.selected:hover .location {
+        color: var(--background-color);
+    }
+
+    .problem.selected:hover .problem-message {
+        color: var(--background-color);
+    }
+    
+    .problem.selected-sibling:hover .location {
+        color: var(--font-color);
+    }
+    
+    .problem:active {
+        color: var(--error-color);
+    }
+    
+    .location {
+        min-width: 90px;
+        text-align: center;
+    }
+    
+    .selected {
+        color: var(--background-color);
+        border-bottom: 1px solid var(--primary-color);
+        border-top: 1px solid var(--primary-color);
+        background-color: var(--primary-color);
+    }
+    
+    .selected-sibling {
+        color: var(--primary-color);
+        //border-bottom: 1px solid var(--primary-color);
+        background-color: var(--primary-color-verylowalpha);
+    }
+    
+    p {
+        padding: 0;
+        margin:0;
+        display: inline-block;
+    }
+    
+    .selected code {
+        border: 1px solid var(--primary-color-lowalpha);
+        background-color: var(--background-color);
+        color: var(--primary-color);
+        text-shadow: none;
+    }
+    
+    
+    .location {
+        color: var(--font-color-sub2);
+    }
+
+    .selected .location {
+        font-family: var(--font-stack),monospace;
+    }
+    
+
+    .selected-sibling .location {
+        font-family: var(--font-stack),monospace;
+    }
+    
+    .icon {
+        margin-right: 10px;
+        margin-top: 2px;
+        margin-left: 5px;
+    }
+    
+    .selected .icon {
+        color: var(--background-color);
+    }
+
+    .selected-sibling .icon {
+        color: var(--font-color);
+    }
+    
+    sl-icon {
+        width: 1.2em;
+        font-size: 1.1em;;
+        
+    }
+    .problem-message {
+        word-wrap: break-word;
+        overflow: hidden;
+        white-space: normal;
+    }
+
+    pb33f-render-json-path.selectedPath::part(path) {
+        color: var(--font-color);
+    }
+
+
+    code {
+        font-family: var(--font-stack), monospace;
+        border: none;
+        color: var(--secondary-color);
+        border-radius: 0;
+        padding: 0;
+        margin: 0;
+        display: inline;
+        background: none;
+        vertical-align: baseline;
+    }
+
+    code:hover {
+        border: none;
+        color: var(--primary-color);
+    }
+
+    .problem.selected code {
+        background: none;
+        border: none;
+        color: var(--background-color);
+    }
+    
+    
+`;

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

@@ -0,0 +1,27 @@
+import { LitElement, TemplateResult } from "lit";
+import { Problem } from "@/model/problem";
+import { ProblemLabelView } from "@/components/problem-list/problem-label-view-filter";
+import { ProblemList } from "@/components/problem-list/problem-list";
+export declare class ProblemItem extends LitElement {
+    static styles: import("lit").CSSResult[];
+    source: string;
+    problem: string;
+    line: number;
+    column: number;
+    selected: boolean;
+    selectedSibling: boolean;
+    problemLabelView: ProblemLabelView;
+    prob: HTMLElement;
+    idx: number;
+    problemObject: Problem;
+    scrollOnUpdate: boolean;
+    parent: ProblemList;
+    resultIndex: number;
+    constructor();
+    renderMessage(sl: boolean): TemplateResult;
+    select(select: boolean, scroll?: boolean): void;
+    selectSibling(select: boolean, scroll?: boolean): void;
+    updated(): void;
+    selectedProblem(): void;
+    render(): TemplateResult<1>;
+}

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

@@ -0,0 +1,126 @@
+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 { ProblemClicked } from "@/events/doctor";
+import problemItemCss from "./problem-item.css";
+import sharedCss from "./shared.css";
+import { getProblemClass, getProblemIcon } from "@/model/problem";
+import { ProblemLabelView } from "@/components/problem-list/problem-label-view-filter";
+import { unsafeHTML } from "lit/directives/unsafe-html.js";
+import { marked } from "marked";
+let ProblemItem = class ProblemItem extends LitElement {
+    constructor() {
+        super();
+        this.scrollOnUpdate = true;
+        this.selectedSibling = false;
+        this.problemLabelView = ProblemLabelView.JSONPath;
+    }
+    renderMessage(sl) {
+        let render = html ``;
+        switch (this.problemLabelView) {
+            case ProblemLabelView.JSONPath:
+                render = html `
+                    <pb33f-render-json-path path="${this.problem}"
+                                            .selected=${sl}
+                                            class="${this.selectedSibling ? 'selectedPath' : ''}"></pb33f-render-json-path>`;
+                break;
+            case ProblemLabelView.RuleViolation:
+                render = html `${this.problemObject.source}</>`;
+                break;
+            case ProblemLabelView.Message:
+                render = html `${unsafeHTML(marked.parse(this.problemObject.message).toString())}</>`;
+                break;
+            case ProblemLabelView.Category:
+                render = html `${this.problemObject.category}</>`;
+                break;
+        }
+        return render;
+    }
+    select(select, scroll = true) {
+        this.selected = select;
+        this.scrollOnUpdate = scroll;
+    }
+    selectSibling(select, scroll = true) {
+        this.selectedSibling = select;
+        this.scrollOnUpdate = scroll;
+    }
+    updated() {
+        if (this.selected && this.scrollOnUpdate) {
+            requestAnimationFrame(() => {
+                this.scrollIntoView();
+            });
+            this.scrollOnUpdate = true;
+        }
+    }
+    selectedProblem() {
+        this.selected = true;
+        this.scrollOnUpdate = false;
+        this.dispatchEvent(new CustomEvent(ProblemClicked, {
+            bubbles: false,
+            composed: true,
+            detail: {
+                problem: this,
+                launchedFromProblems: true
+            }
+        }));
+    }
+    render() {
+        let selectedClass = "";
+        let sl = false;
+        if (this.selected) {
+            selectedClass = "selected";
+            sl = true;
+        }
+        if (this.selectedSibling) {
+            selectedClass = "selected-sibling";
+            sl = true;
+        }
+        //<pb33f-render-json-path path="${this.problem}" .selected=${sl} class="${this.selectedSibling? 'selectedPath': ''}"></pb33f-render-json-path>
+        return html `
+            <div @click="${this.selectedProblem}" class="problem ${selectedClass}">
+                <div class="icon ${getProblemClass(this.problemObject)} class="${sl ? selectedClass : ''}"">
+                    <sl-icon name="${getProblemIcon(this.problemObject)}"></sl-icon>
+                </div>
+                <div class="location">
+                   ${this.line}:${this.column}&nbsp;
+                </div>    
+                <div class="problem-message">
+                    ${this.renderMessage(sl)}
+                </div>
+            </div>`;
+    }
+};
+ProblemItem.styles = [sharedCss, problemItemCss];
+__decorate([
+    property()
+], ProblemItem.prototype, "source", void 0);
+__decorate([
+    property()
+], ProblemItem.prototype, "problem", void 0);
+__decorate([
+    property({ type: Number })
+], ProblemItem.prototype, "line", void 0);
+__decorate([
+    property({ type: Number })
+], ProblemItem.prototype, "column", void 0);
+__decorate([
+    property({ type: Boolean })
+], ProblemItem.prototype, "selected", void 0);
+__decorate([
+    property({ type: Boolean })
+], ProblemItem.prototype, "selectedSibling", void 0);
+__decorate([
+    property({ type: ProblemLabelView })
+], ProblemItem.prototype, "problemLabelView", void 0);
+__decorate([
+    query('.problem')
+], ProblemItem.prototype, "prob", void 0);
+ProblemItem = __decorate([
+    customElement("pb33f-problem-item")
+], ProblemItem);
+export { ProblemItem };

package/dist/components/problem-list/problem-label-view-filter.css.d.ts

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

package/dist/components/problem-list/problem-label-view-filter.css.js

@@ -0,0 +1,6 @@
+import { css } from "lit";
+export default css `
+   .filter {
+  
+   }
+`;

package/dist/components/problem-list/problem-label-view-filter.d.ts

@@ -0,0 +1,18 @@
+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 ProblemLabelView {
+    JSONPath = "Path",
+    RuleViolation = "Rule Violation",
+    Message = "Message",
+    Category = "Category"
+}
+export declare class ProblemLabelViewFilter extends LitElement {
+    static styles: import("lit").CSSResult[];
+    selectedLabel: string;
+    private readonly menuValues;
+    constructor();
+    filterChanged(event: CustomEvent): void;
+    render(): import("lit-html").TemplateResult<1>;
+}

package/dist/components/problem-list/problem-label-view-filter.js

@@ -0,0 +1,66 @@
+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 { ProblemLabelViewFilterChanged } from "@/events/doctor";
+export var ProblemLabelView;
+(function (ProblemLabelView) {
+    ProblemLabelView["JSONPath"] = "Path";
+    ProblemLabelView["RuleViolation"] = "Rule Violation";
+    ProblemLabelView["Message"] = "Message";
+    ProblemLabelView["Category"] = "Category";
+})(ProblemLabelView || (ProblemLabelView = {}));
+let ProblemLabelViewFilter = class ProblemLabelViewFilter extends LitElement {
+    constructor() {
+        super();
+        this.menuValues = Object.values(ProblemLabelView);
+        this.selectedLabel = this.menuValues[0].toString();
+    }
+    filterChanged(event) {
+        const menuItem = event.detail.item;
+        this.selectedLabel = menuItem.value;
+        this.dispatchEvent(new CustomEvent(ProblemLabelViewFilterChanged, {
+            composed: true,
+            detail: {
+                label: this.selectedLabel,
+            }
+        }));
+    }
+    render() {
+        return html `
+            <div class="filter">
+                <div class="label"><label>View:</label></div>
+                <div class="dropdown">
+                <sl-dropdown skidding="5" distance="5">
+                    <sl-button slot="trigger" caret>${this.selectedLabel}</sl-button>
+                    <sl-menu @sl-select=${this.filterChanged}>
+                        ${this.menuValues.map((value) => {
+            return html `
+                                <sl-menu-item value="${value}" type="checkbox" .checked=${this.selectedLabel === value}>
+                                    ${value}
+                                </sl-menu-item>`;
+        })}
+                    </sl-menu>
+                </sl-dropdown>
+                </div>
+            </div>
+        `;
+    }
+};
+ProblemLabelViewFilter.styles = [problemLabelViewFilterCss, filterCss];
+__decorate([
+    property()
+], ProblemLabelViewFilter.prototype, "selectedLabel", void 0);
+ProblemLabelViewFilter = __decorate([
+    customElement('pb33f-problem-label-view-filter')
+], ProblemLabelViewFilter);
+export { ProblemLabelViewFilter };

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

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

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

@@ -0,0 +1,59 @@
+import { css } from "lit";
+export default css `
+    
+    
+    .main-view {
+        height: 200px;
+        width: calc(100% - 2px);
+        border: 1px solid var(--primary-color);
+        word-break-wrap: break-word;
+        margin-bottom: 10px;
+        position: relative;
+        overflow: hidden;
+    }
+    
+    .problem-list-container {
+        position: relative;
+        //height: calc(100vh - 180px);
+        
+    }
+    
+    .problem-list {
+        position: relative;
+        width: 100%;
+      
+      
+
+    }
+
+    .problem-list::-webkit-scrollbar {
+        width: 8px;
+    }
+
+    .problem-list::-webkit-scrollbar-track {
+        background-color: black;
+    }
+
+    .problem-list::-webkit-scrollbar-thumb {
+        box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+        background: var(--secondary-color-lowalpha);
+        padding: var(--global-padding);
+    }
+
+    .problem-list-container::-webkit-scrollbar {
+        width: 8px;
+    }
+
+    .problem-list-container::-webkit-scrollbar-track {
+        background-color: black;
+    }
+
+    .problem-list-container::-webkit-scrollbar-thumb {
+        box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+        background: var(--secondary-color-lowalpha);
+        padding: var(--global-padding);
+    }
+
+
+
+`;

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

@@ -0,0 +1,37 @@
+import { LitElement } from "lit";
+import { ProblemItem } from "@/components/problem-list/problem-item";
+import { MainViewSlideChangedEvent, ProblemClickedEvent, ProblemRuleFilterChangedEvent } from "@/events/doctor";
+import { Problem } from "@/model/problem";
+export declare class ProblemList extends LitElement {
+    static styles: import("lit").CSSResult[];
+    private searchWorker;
+    private problemList;
+    private readonly mainView;
+    private readonly problemToolbar;
+    private problemLabelView;
+    private activeProblem;
+    private readonly paginator;
+    private unfilteredProblems;
+    private activeSearch;
+    constructor();
+    private reset;
+    private addSearchWorkerListener;
+    ruleFilterChanged(event: CustomEvent<ProblemRuleFilterChangedEvent>): void;
+    ruleFilterChangedManual(event: CustomEvent<ProblemRuleFilterChangedEvent>): void;
+    private searchFilterChanged;
+    private labelFilterChanged;
+    private sortFilterChanged;
+    private extractProblemsFromList;
+    private extractRulesFromProblems;
+    private search;
+    private changeProblemLabels;
+    private changeSorting;
+    problemClicked(event: CustomEvent<ProblemClickedEvent>): void;
+    slideChanged(event: CustomEvent<MainViewSlideChangedEvent>): void;
+    private setActiveProblem;
+    get problemItems(): ProblemItem[];
+    generateProblemItems(problems: Problem[]): ProblemItem[];
+    set problems(problems: Problem[]);
+    lineClicked(line: number | undefined, scroll?: boolean, index?: number, stopCycle?: boolean): void;
+    render(): import("lit-html").TemplateResult<1>;
+}