@pb33f/cowboy-components 0.1.16 → 0.2.1

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

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

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

@@ -0,0 +1,117 @@
+import { css } from "lit";
+export default css `
+    .rule {
+        display: flex;
+        margin: 10px 0 5px 0;
+    }
+    
+    .rule-docs {
+        float: right;
+        display: inline-block;
+        padding-left: 10px; 
+        padding-top: 5px;
+        font-size: 0.8rem;
+    }
+    
+    .error-message {
+        font-size: 0.8rem;
+    }
+    
+    .check {
+        width: 30px;
+        padding-top: 5px;
+    }
+    
+    .details {
+        display: block;
+        width: calc(100% - 30px);
+    }
+    
+    form {
+        display: block;
+    }
+    
+    .rule-actions {
+        display: grid;
+        grid: auto / 70px 1fr;
+        gap: 30px;
+        margin-top: 20px;
+        padding-top: 10px;
+        border-top: 1px dashed var(--secondary-color-dimmer);
+    }
+
+    .rule-actions label {
+        text-align: right;
+        font-size: 0.8rem;
+    }
+
+    .label-on-left::part(form-control-help-text) {
+        grid-column-start: 2;
+    }
+    
+    .actions {
+        width: 100%;
+    }
+    
+    sl-details::part(base) {
+        font-size: 0.9rem;
+        border-radius: 0;
+        background-color: var(--background-color);
+        padding: 0 0 0 10px;
+    }
+
+    sl-details::part(header) {
+        font-size: 0.9rem;
+        padding: 5px;
+        font-family: var(--font-stack-bold), monospace;
+    }
+
+    sl-details.error-rule::part(base) {
+        font-size: 0.9rem;
+        border-radius: 0;
+        background-color: var(--background-color);
+        border: 1px solid var(--error-color);
+        padding: 0 0 0 10px;
+    }
+    
+    .error-col {
+        margin-right: 10px;
+        font-size: 1.2rem;
+        padding-top: 5px;
+    }
+
+    sl-details.error::part(body) {
+        color: var(--font-color);
+    }
+    h4 {
+        margin-top: 0;
+        padding-top: 0;
+    }
+    
+    .error-box {
+        border: 1px dashed var(--error-color);
+        padding: 10px;
+        margin-bottom: 20px;
+    }
+    
+    .warning {
+        color: var(--warn-color);
+    }
+
+    .info {
+        color: var(--primary-color);
+    }
+
+    .error {
+        color: var(--error-color);
+    }
+    
+    .actions sl-button {
+        float: right;
+    }
+
+    .hidden {
+        display: none;
+    }
+
+`;

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

@@ -0,0 +1,31 @@
+import '@shoelace-style/shoelace/dist/components/checkbox/checkbox.js';
+import '@shoelace-style/shoelace/dist/components/select/select.js';
+import '@shoelace-style/shoelace/dist/components/option/option.js';
+import '@shoelace-style/shoelace/dist/components/radio-group/radio-group.js';
+import '@shoelace-style/shoelace/dist/components/radio/radio.js';
+import { LitElement } from "lit";
+import "./rule-action.js";
+import { Rule } from "../../model/vacuum_rule.js";
+import { SlDetails } from "@shoelace-style/shoelace";
+export declare class RuleComponent extends LitElement {
+    static styles: import("lit").CSSResult[];
+    rule: Rule;
+    error: boolean;
+    details: SlDetails;
+    ruleId: string;
+    open: boolean;
+    custom: boolean;
+    ruleActive: boolean;
+    ruleErrorMessage: string[];
+    ruleErrorFunction: string[];
+    ruleErrorFunctionOption: string[];
+    private readonly ruleInput;
+    constructor(rule: Rule, id: string, custom: boolean);
+    nameUpdated(name: string): void;
+    dirty(): void;
+    toggleRule(): void;
+    close(): void;
+    show(): void;
+    opened(): void;
+    render(): import("lit-html").TemplateResult<1>;
+}

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

@@ -0,0 +1,153 @@
+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/checkbox/checkbox.js';
+import '@shoelace-style/shoelace/dist/components/select/select.js';
+import '@shoelace-style/shoelace/dist/components/option/option.js';
+import '@shoelace-style/shoelace/dist/components/radio-group/radio-group.js';
+import '@shoelace-style/shoelace/dist/components/radio/radio.js';
+import { customElement, property, query, state } from "lit/decorators.js";
+import { html, LitElement } from "lit";
+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 { RuleInputComponent } from "./rule-input.js";
+import linksCss from "../../css/links.css.js";
+import listsCss from "../../css/lists.css.js";
+let RuleComponent = class RuleComponent extends LitElement {
+    constructor(rule, id, custom) {
+        super();
+        this.rule = rule;
+        this.ruleId = id;
+        this.ruleActive = true;
+        this.custom = custom;
+        this.error = false;
+        this.ruleInput = new RuleInputComponent(this.rule, this, this.custom);
+        this.ruleErrorFunction = [];
+        this.ruleErrorFunctionOption = [];
+        this.ruleErrorMessage = [];
+        //@ts-ignore
+        this.ruleInput.addEventListener(RuleNameUpdated, (evt) => {
+            this.nameUpdated(evt.detail.name);
+        });
+    }
+    nameUpdated(name) {
+        this.rule.id = name;
+        this.ruleId = name;
+        this.requestUpdate();
+    }
+    dirty() {
+        this.dispatchEvent(new CustomEvent(RulesetDirty, {
+            bubbles: true,
+            composed: true,
+            detail: {
+                rule: this
+            }
+        }));
+    }
+    toggleRule() {
+        this.ruleActive = !this.ruleActive;
+        this.dirty();
+    }
+    close() {
+        this.open = false;
+        this.details.open = false;
+    }
+    show() {
+        this.open = true;
+        this.details.open = true;
+    }
+    opened() {
+        this.open = true;
+        this.dispatchEvent(new CustomEvent(RuleClicked, {
+            bubbles: true,
+            composed: true,
+            detail: {
+                ruleId: this.ruleId
+            }
+        }));
+    }
+    render() {
+        if (!this.rule) {
+            return html ``;
+        }
+        let errorCol = html ``;
+        if (this.error) {
+            this.ruleInput.error = true;
+            this.ruleInput.ruleErrorFunction = this.ruleErrorFunction;
+            this.ruleInput.ruleErrorFunctionOption = this.ruleErrorFunctionOption;
+            errorCol = html `
+                <div class="error-col error"><sl-icon name="exclamation-square"></sl-icon></div>`;
+        }
+        else {
+            this.ruleInput.error = false;
+            this.ruleInput.ruleErrorFunctionOption = [];
+            this.ruleInput.ruleErrorFunction = [];
+        }
+        let errorBox = html ``;
+        if (this.error) {
+            let errorMessages = html ``;
+            if (this.ruleErrorMessage.length > 0) {
+                errorMessages = [];
+                for (let i = 0; i < this.ruleErrorMessage.length; i++) {
+                    errorMessages.push(html `<li>${this.ruleErrorMessage[i]}</li>`);
+                }
+            }
+            errorBox = html `
+                <div class="error-box">
+                    <div class="error-message">
+                        <h4 class="error">Something is wrong with this rule:</h4>
+                           <ul>
+                               ${errorMessages}
+                           </ul>
+                    </div>
+                </div>`;
+        }
+        return html `
+            <div class="rule">
+                <div class="check">
+                    <sl-checkbox @sl-change="${this.toggleRule}" ?checked=${this.ruleActive}></sl-checkbox>
+                </div>
+                ${errorCol}
+                <div class="details">
+                    <sl-details summary="${this.rule.id}"
+                                class="${this.error ? 'error-rule' : ''}" @sl-show="${this.opened}">
+                        ${errorBox}
+                        ${this.ruleInput}
+                    </sl-details>
+                </div>
+            </div>
+        `;
+    }
+};
+RuleComponent.styles = [linksCss, buttonCss, ruleCss, formsCss, listsCss];
+__decorate([
+    state()
+], RuleComponent.prototype, "rule", void 0);
+__decorate([
+    property({ type: Boolean })
+], RuleComponent.prototype, "error", void 0);
+__decorate([
+    query('sl-details')
+], RuleComponent.prototype, "details", void 0);
+__decorate([
+    property({ type: Boolean })
+], RuleComponent.prototype, "open", void 0);
+__decorate([
+    property({ type: Boolean })
+], RuleComponent.prototype, "custom", void 0);
+__decorate([
+    property()
+], RuleComponent.prototype, "ruleActive", void 0);
+__decorate([
+    property()
+], RuleComponent.prototype, "ruleErrorMessage", void 0);
+RuleComponent = __decorate([
+    customElement('pb33f-rule')
+], RuleComponent);
+export { RuleComponent };

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

@@ -3,7 +3,8 @@ import { LitElement, TemplateResult } from "lit";
 import { SlDrawer } from "@shoelace-style/shoelace";
 export declare enum ProblemDrawerEventType {
     RULE_DOCS = "ruleDocs",
-    HOW_TO_FIX = "howToFix"
+    HOW_TO_FIX = "howToFix",
+    FUNCTION_DOCS = "functionDocs"
 }
 export interface ProblemDrawerEvent {
     type: ProblemDrawerEventType;

package/dist/components/problem-list/details-drawer.js

@@ -15,6 +15,7 @@ export var ProblemDrawerEventType;
 (function (ProblemDrawerEventType) {
     ProblemDrawerEventType["RULE_DOCS"] = "ruleDocs";
     ProblemDrawerEventType["HOW_TO_FIX"] = "howToFix";
+    ProblemDrawerEventType["FUNCTION_DOCS"] = "functionDocs";
 })(ProblemDrawerEventType || (ProblemDrawerEventType = {}));
 let ProblemDetailsDrawer = class ProblemDetailsDrawer extends LitElement {
     constructor() {
@@ -43,6 +44,12 @@ let ProblemDetailsDrawer = class ProblemDetailsDrawer extends LitElement {
                     <h3>How to fix this problem</h3>
                     ${event.body}`;
                 break;
+            case ProblemDrawerEventType.FUNCTION_DOCS:
+                if (event.rule) {
+                    this.label = 'Function: ' + event.rule;
+                    this.content = html `${unsafeHTML(event.body)}`;
+                }
+                break;
         }
         this.requestUpdate();
         if (this.drawer != null) {

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

@@ -27,8 +27,7 @@ export default css `
         font-size: 0.7rem;
         overflow-x: hidden;
     }
-
-
+    
     sl-menu{
         border: 1px solid var(--primary-color);
         border-radius: 0;
@@ -62,6 +61,6 @@ export default css `
         border-radius: 0;
         height: 16px;
         padding: 0 0 0 5px;
-     
     }
+
 `;

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

@@ -82,7 +82,6 @@ export default css `
     
     .selected-sibling {
         color: var(--primary-color);
-        //border-bottom: 1px solid var(--primary-color);
         background-color: var(--primary-color-verylowalpha);
     }
     
@@ -141,8 +140,7 @@ export default css `
     pb33f-render-json-path.selectedPath::part(path) {
         color: var(--font-color);
     }
-
-
+    
     code {
         font-family: var(--font-stack), monospace;
         border: none;

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

@@ -52,7 +52,7 @@ let ProblemItem = class ProblemItem extends LitElement {
     updated() {
         if (this.selected && this.scrollOnUpdate) {
             requestAnimationFrame(() => {
-                this.scrollIntoView();
+                this.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'start' });
             });
             this.scrollOnUpdate = true;
         }

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

@@ -1,7 +1,5 @@
 import { css } from "lit";
 export default css `
-    
-    
     .main-view {
         height: 200px;
         width: calc(100% - 2px);
@@ -14,16 +12,11 @@ export default css `
     
     .problem-list-container {
         position: relative;
-        //height: calc(100vh - 180px);
-        
     }
     
     .problem-list {
         position: relative;
         width: 100%;
-      
-      
-
     }
 
     .problem-list::-webkit-scrollbar {
@@ -53,7 +46,4 @@ export default css `
         background: var(--secondary-color-lowalpha);
         padding: var(--global-padding);
     }
-
-
-
 `;

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

@@ -194,7 +194,6 @@ let ProblemList = class ProblemList extends LitElement {
         this.requestUpdate();
     }
     problemClicked(event) {
-        //event.stopPropagation()
         this.mainView.problems = [event.detail.problem];
         this.lineClicked(event.detail.problem.line, false, event.detail.problem.idx);
         this.paginator.activeIndex = event.detail.problem.resultIndex;

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

@@ -12,5 +12,4 @@ export default css `
         font-family: var(--font-stack-bold), monospace;
         text-shadow: 0 0 1rem var(--primary-color);
     }
-    
 `;

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

@@ -59,8 +59,7 @@ export default css `
         display: flex;
         flex-direction: row;
     }
-
-
+    
     .line {
         color: var(--font-color-sub1)
     }
@@ -83,7 +82,6 @@ export default css `
         font-size: 0.7rem;
     }
     
-    
     @media only screen and (max-width: 1100px) {
         .group-rank {
             display: none;

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

@@ -8,7 +8,7 @@ import { customElement, property } from "lit/decorators.js";
 import { html, LitElement } from "lit";
 import problemOverviewGroupCss from "./problem-overview-group.css.js";
 import { ProblemDrawerEventType } from "../problem-list/details-drawer.js";
-import { OpenProblemDrawer, ProblemClicked, RuleClicked } from "../../events/doctor.js";
+import { OpenProblemDrawer, ProblemClicked, RuleViolationClicked } from "../../events/doctor.js";
 import sharedCss from "../../css/shared.css.js";
 import buttonCss from "../../css/button.css.js";
 import { ProblemItem } from "../problem-list/problem-item.js";
@@ -27,7 +27,7 @@ let ProblemOverviewGroup = class ProblemOverviewGroup extends LitElement {
         }));
     }
     selectRule() {
-        this.dispatchEvent(new CustomEvent(RuleClicked, {
+        this.dispatchEvent(new CustomEvent(RuleViolationClicked, {
             bubbles: true,
             composed: true,
             detail: {

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

@@ -4,7 +4,6 @@ export default css `
         --border-color: var(--secondary-color);
         --border-radius: 0;
         --border-width: 1px;
-       
         --padding: 5px;
         flex-grow: 1;
         margin-left: 10px;
@@ -23,7 +22,6 @@ export default css `
         --border-color: var(--background-color)
     }
     
-    
     h3 {
         margin-top: 10px;
         margin-bottom: 10px;
@@ -36,7 +34,6 @@ export default css `
         border-bottom:  1px dashed var(--secondary-color);
     }
     
-    
     .statistics sl-card:first-child {
         margin-left: 0;
     }
@@ -64,6 +61,4 @@ export default css `
             display: none;
         }
     }
-    
-    
 `;

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

@@ -1,6 +1,5 @@
 import { css } from "lit";
 export default css `
-
     h3.rule-violations {
         border-top: 1px dashed var(--secondary-color);
         margin-top: 0;
@@ -12,12 +11,10 @@ export default css `
         overflow-y: auto;
     }
 
-
     pb33f-paginator-navigation::part(values) {
         max-height: calc(100vh - 450px);
     }
     
-    
     .paginator::part(values) {
         background-color: red;
        
@@ -33,7 +30,6 @@ export default css `
         font-size: 6rem;
         text-align: center;
         color: var(--error-color);
-        
     }
     
     .unavailable p {