@pb33f/cowboy-components 0.0.13 → 0.1.0

package/dist/components/paginator/paginator-navigator.js

@@ -0,0 +1,168 @@
+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, state } from "lit/decorators.js";
+import { html, LitElement } from "lit";
+import paginatorNavigatorCss from "./paginator-navigator.css";
+import { PaginatorFirstPage, PaginatorLastPage, PaginatorNextPage, PaginatorPreviousPage } from "@/components/paginator/paginator-events";
+import "@shoelace-style/shoelace/dist/components/format-number/format-number.js";
+let PaginatorNavigation = class PaginatorNavigation extends LitElement {
+    constructor() {
+        super();
+        this.currentPage = 1;
+        this.totalPages = 0;
+        this.totalItems = 0;
+        this.itemsPerPage = 20;
+        this.label = "Problems";
+    }
+    getRangeStart() {
+        let res = (this.currentPage * this.itemsPerPage) - this.itemsPerPage;
+        if (res == 0) {
+            return 0;
+        }
+        if (res > 0) {
+            return res;
+        }
+        return 0;
+    }
+    getPagesRemaining() {
+        let res = this.totalItems - (this.currentPage * this.itemsPerPage);
+        if (res > 0) {
+            return res;
+        }
+        return 0;
+    }
+    getRangeEnd() {
+        let start = this.getRangeStart();
+        if (start == 1) {
+            start = 0;
+        }
+        let res = start + this.itemsPerPage;
+        if (res > this.totalItems) {
+            return this.totalItems;
+        }
+        if (res >= 0) {
+            return res;
+        }
+        return 0;
+    }
+    nextPage() {
+        if (this.currentPage < this.totalPages) {
+            this.dispatchEvent(new CustomEvent(PaginatorNextPage, {
+                composed: true,
+            }));
+        }
+    }
+    previousPage() {
+        if (this.currentPage > 1) {
+            this.dispatchEvent(new CustomEvent(PaginatorPreviousPage, {
+                composed: true,
+            }));
+        }
+    }
+    lastPage() {
+        if (this.currentPage < this.totalPages) {
+            this.dispatchEvent(new CustomEvent(PaginatorLastPage, {
+                composed: true,
+            }));
+        }
+    }
+    firstPage() {
+        if (this.currentPage > 1) {
+            this.dispatchEvent(new CustomEvent(PaginatorFirstPage, {
+                composed: true,
+            }));
+        }
+    }
+    togglePrev(toggle) {
+        if (this.homeButton) {
+            this.prevButton.disabled = toggle;
+            this.homeButton.disabled = toggle;
+        }
+    }
+    toggleNext(toggle) {
+        if (this.endButton) {
+            this.nextButton.disabled = toggle;
+            this.endButton.disabled = toggle;
+        }
+    }
+    render() {
+        if (this.currentPage == 1) {
+            this.togglePrev(true);
+        }
+        else {
+            this.togglePrev(false);
+        }
+        if (this.currentPage == this.totalPages) {
+            this.toggleNext(true);
+        }
+        else {
+            this.toggleNext(false);
+        }
+        if (this.totalItems <= this.itemsPerPage) {
+            this.hide = true;
+        }
+        else {
+            this.hide = false;
+        }
+        return html `
+            <div class="paginator-navigation ${this.hide ? 'hide' : ''}">
+                <div>
+                    <sl-icon-button @click=${this.firstPage} name="chevron-double-left" class="home" title="first page" disabled>
+                    </sl-icon-button>
+                    <sl-icon-button @click=${this.previousPage} name="chevron-left"  title="previous page" class="previous" disabled>
+                    </sl-icon-button>
+                </div>
+                <div class="location">Page 
+                    <strong class="current-page">${this.currentPage}</strong> of 
+                    <strong class="total-pages">${this.totalPages}</strong>
+                </div>
+                <div class="result-range">
+                    ${this.label} ${this.getRangeStart() + 1} - ${this.getRangeEnd()} of <strong class="total">
+                    <sl-format-number value="${this.totalItems}"></sl-format-number></strong>
+                </div>
+                <div>
+                    <sl-icon-button @click=${this.nextPage} name="chevron-right" title="next page" class="next">
+                    </sl-icon-button>
+                    <sl-icon-button @click=${this.lastPage} name="chevron-double-right"  title="last page" class="end">
+                    </sl-icon-button>
+                </div>
+            </div>
+        `;
+    }
+};
+PaginatorNavigation.styles = [paginatorNavigatorCss];
+__decorate([
+    state()
+], PaginatorNavigation.prototype, "currentPage", void 0);
+__decorate([
+    state()
+], PaginatorNavigation.prototype, "totalPages", void 0);
+__decorate([
+    state()
+], PaginatorNavigation.prototype, "totalItems", void 0);
+__decorate([
+    state()
+], PaginatorNavigation.prototype, "itemsPerPage", void 0);
+__decorate([
+    query('.home')
+], PaginatorNavigation.prototype, "homeButton", void 0);
+__decorate([
+    query('.previous')
+], PaginatorNavigation.prototype, "prevButton", void 0);
+__decorate([
+    query('.next')
+], PaginatorNavigation.prototype, "nextButton", void 0);
+__decorate([
+    query('.end')
+], PaginatorNavigation.prototype, "endButton", void 0);
+__decorate([
+    property()
+], PaginatorNavigation.prototype, "label", void 0);
+PaginatorNavigation = __decorate([
+    customElement("pb33f-paginator")
+], PaginatorNavigation);
+export { PaginatorNavigation };

package/dist/components/paginator/paginator.css.d.ts

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

package/dist/components/paginator/paginator.css.js

@@ -0,0 +1,38 @@
+import { css } from "lit";
+export default css `
+
+    .paginator-values {
+        overflow-y: auto;
+        max-height: calc(100vh - 460px);
+    }
+
+    .paginator-values::-webkit-scrollbar {
+        width: 8px;
+    }
+
+    .paginator-values::-webkit-scrollbar-track {
+        background-color: black;
+    }
+
+    .paginator-values::-webkit-scrollbar-thumb {
+        box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+        background: var(--secondary-color-lowalpha);
+        padding: var(--global-padding);
+    }
+    
+    .no-values {
+        width: 400px;
+        margin: 50px auto;
+        text-align: center;
+        font-size: 1.9em;
+        color: var(--font-color-sub3);
+        font-family: var(--font-stack-bold), monospace;
+        
+    }
+    
+    .no-values sl-icon {
+        margin-bottom: 30px;
+        font-size: 5em;
+    }
+   
+`;

package/dist/components/paginator/paginator.d.ts

@@ -0,0 +1,22 @@
+import { LitElement } from "lit";
+export declare class Paginator extends LitElement {
+    static styles: import("lit").CSSResult[];
+    values: LitElement[];
+    currentPage: number;
+    totalPages: number;
+    totalItems: number;
+    itemsPerPage: number;
+    label: string;
+    activeIndex: number;
+    private renderValues;
+    private paginatorNavigator;
+    constructor();
+    nextPage(event: CustomEvent): void;
+    lastPage(event: CustomEvent): void;
+    firstPage(event: CustomEvent): void;
+    setPage(item: number): void;
+    previousPage(event: CustomEvent): void;
+    calcTotalPages(): number;
+    protected willUpdate(): void;
+    render(): import("lit-html").TemplateResult<1>;
+}

package/dist/components/paginator/paginator.js

@@ -0,0 +1,122 @@
+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 { PaginatorNavigation } from "@/components/paginator/paginator-navigator";
+import { PaginatorFirstPage, PaginatorLastPage, PaginatorNextPage, PaginatorPreviousPage } from "@/components/paginator/paginator-events";
+import paginatorCss from "./paginator.css";
+let Paginator = class Paginator extends LitElement {
+    constructor() {
+        super();
+        this.currentPage = 1;
+        this.totalPages = 1;
+        this.totalItems = 0;
+        this.itemsPerPage = 20;
+        this.activeIndex = 0;
+        this.paginatorNavigator = new PaginatorNavigation();
+        this.paginatorNavigator.currentPage = this.currentPage;
+        this.paginatorNavigator.totalPages = this.totalPages;
+        this.paginatorNavigator.totalItems = this.totalItems;
+        this.paginatorNavigator.itemsPerPage = this.itemsPerPage;
+        //@ts-ignore
+        this.addEventListener(PaginatorFirstPage, this.firstPage);
+        //@ts-ignore
+        this.addEventListener(PaginatorLastPage, this.lastPage);
+        //@ts-ignore
+        this.addEventListener(PaginatorNextPage, this.nextPage);
+        //@ts-ignore
+        this.addEventListener(PaginatorPreviousPage, this.previousPage);
+    }
+    nextPage(event) {
+        event.stopPropagation();
+        if (this.currentPage < this.totalPages) {
+            this.currentPage++;
+        }
+    }
+    lastPage(event) {
+        event.stopPropagation();
+        if (this.currentPage < this.totalPages) {
+            this.currentPage = this.totalPages;
+        }
+    }
+    firstPage(event) {
+        event.stopPropagation();
+        if (this.currentPage > 1) {
+            this.currentPage = 1;
+        }
+    }
+    setPage(item) {
+        this.currentPage = Math.ceil(item / this.itemsPerPage);
+        this.activeIndex = item;
+    }
+    previousPage(event) {
+        event.stopPropagation();
+        if (this.currentPage > 1) {
+            this.currentPage--;
+        }
+    }
+    calcTotalPages() {
+        return Math.ceil(this.totalItems / this.itemsPerPage);
+    }
+    willUpdate() {
+        this.totalItems = this.values?.length;
+        this.totalPages = this.calcTotalPages();
+        if (this.activeIndex > 0 && this.totalPages > 1) {
+            this.paginatorNavigator.currentPage = this.currentPage;
+        }
+        else {
+            this.paginatorNavigator.currentPage = this.currentPage;
+        }
+        this.paginatorNavigator.totalItems = this.values?.length;
+        this.paginatorNavigator.itemsPerPage = this.itemsPerPage;
+        this.paginatorNavigator.totalPages = this.totalPages;
+        if (this.label) {
+            this.paginatorNavigator.label = this.label;
+        }
+        this.renderValues = this.values?.slice(this.paginatorNavigator.getRangeStart(), this.paginatorNavigator.getRangeEnd());
+    }
+    render() {
+        if (this.renderValues?.length === 0 || !this.renderValues) {
+            return html `<div class="no-values">
+                <sl-icon name="x-square"></sl-icon><br/>
+                no results
+            </div>`;
+        }
+        return html `
+            ${this.paginatorNavigator}
+            <div class="paginator-values" part="values">
+                ${this.renderValues}
+            </div>
+        `;
+    }
+};
+Paginator.styles = [paginatorCss];
+__decorate([
+    property({ type: LitElement })
+], Paginator.prototype, "values", void 0);
+__decorate([
+    property({ type: Number })
+], Paginator.prototype, "currentPage", void 0);
+__decorate([
+    property({ type: Number })
+], Paginator.prototype, "totalPages", void 0);
+__decorate([
+    property({ type: Number })
+], Paginator.prototype, "totalItems", void 0);
+__decorate([
+    property({ type: Number })
+], Paginator.prototype, "itemsPerPage", void 0);
+__decorate([
+    property()
+], Paginator.prototype, "label", void 0);
+__decorate([
+    property()
+], Paginator.prototype, "activeIndex", void 0);
+Paginator = __decorate([
+    customElement("pb33f-paginator-navigation")
+], Paginator);
+export { Paginator };

package/dist/components/percent-bar/percent-bar.css.d.ts

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

package/dist/components/percent-bar/percent-bar.css.js

@@ -0,0 +1,65 @@
+import { css } from "lit";
+export default css `
+    .bar {
+        display: flex;
+        flex-direction: row;
+        margin: 10px 0 10px 0;
+    }
+    
+    .bar svg {
+        width: calc(100% - 47px); 
+        border: 1px solid var(--primary-color)
+    }
+    
+
+    .percent {
+        width: 40px;
+        margin-left: 5px;
+        font-size: 0.8rem;
+        text-align: center;
+        color: var(--primary-color);
+        border: 1px solid var(--primary-color);
+        text-shadow: 0 0 1rem var(--primary-color);
+    }
+    
+    .percent span {
+        line-height: normal;
+        display: inline-block;
+        font-family: var(--font-stack-bold), monospace;
+    }
+    
+    .success {
+        border: 1px solid var(--terminal-text);
+        color: var(--terminal-text);
+        text-shadow: 0 0 1rem var(--terminal-text);
+    }
+
+    .bar svg.success {
+        border: 1px solid var(--terminal-text);
+    }
+
+    .warning {
+        border: 1px solid var(--warn-color);
+        color: var(--warn-color);
+        text-shadow: 0 0 1rem var(--warn-color);
+    }
+
+    .bar svg.warning {
+        border: 1px solid var(--warn-color);
+        color: var(--warn-color);
+    }
+    
+    .error {
+        border: 1px solid var(--error-color);
+        color: var(--error-color);
+        text-shadow: 0 0 1rem var(--error-color);
+    }
+
+    .bar svg.error {
+        border: 1px solid var(--error-color);
+        color: var(--error-color);
+        
+    }
+    
+
+`;

package/dist/components/percent-bar/percent-bar.d.ts

@@ -0,0 +1,11 @@
+import { LitElement, TemplateResult } from "lit";
+export declare class PercentBar extends LitElement {
+    static styles: import("lit").CSSResult[];
+    value: number;
+    height: number;
+    success: boolean;
+    warning: boolean;
+    error: boolean;
+    constructor();
+    render(): TemplateResult<1>;
+}

package/dist/components/percent-bar/percent-bar.js

@@ -0,0 +1,85 @@
+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 { html, LitElement, svg } from "lit";
+import { property, customElement } from "lit/decorators.js";
+import percentBarCss from "./percent-bar.css";
+let PercentBar = class PercentBar extends LitElement {
+    constructor() {
+        super();
+        this.value = 0;
+        this.height = 20;
+    }
+    render() {
+        let nodes = [];
+        for (let i = 0; i < this.value / 2; i++) {
+            nodes.push((i + 0.2) * 2);
+        }
+        let count = 0;
+        let clazz = "";
+        let fill = "var(--primary-color)";
+        if (this.warning) {
+            fill = "var(--warn-color)";
+            clazz = "warning";
+        }
+        if (this.error) {
+            fill = "var(--error-color)";
+            clazz = "error";
+        }
+        if (this.success) {
+            fill = "var(--terminal-text)";
+            clazz = "success";
+        }
+        let valueLabel = `${this.value}`;
+        if (this.value < 1) {
+            valueLabel = "<1";
+        }
+        return html `
+           
+            <div class="bar">
+                <svg xmlns="http://www.w3.org/2000/svg" style="height: ${this.height}" class="${clazz}">
+                ${nodes.map((node) => {
+            count++;
+            let width = 1.5;
+            if (count == 50) {
+                width = 1;
+            }
+            return svg `
+                        <rect 
+                        width="${width}%" 
+                        height="${this.height - 4}px" 
+                        x="${node}%" 
+                        y="2" 
+                        fill="${fill}" />`;
+        })}
+                </svg>
+                <div class="percent ${clazz}" style="height: ${this.height}px; line-height: ${this.height}px">
+                    <span>${valueLabel}%</span>
+                </div>
+            </div>
+        `;
+    }
+};
+PercentBar.styles = [percentBarCss];
+__decorate([
+    property({ type: Number })
+], PercentBar.prototype, "value", void 0);
+__decorate([
+    property({ type: Number })
+], PercentBar.prototype, "height", void 0);
+__decorate([
+    property({ type: Boolean })
+], PercentBar.prototype, "success", void 0);
+__decorate([
+    property({ type: Boolean })
+], PercentBar.prototype, "warning", void 0);
+__decorate([
+    property({ type: Boolean })
+], PercentBar.prototype, "error", void 0);
+PercentBar = __decorate([
+    customElement("pb33f-percent-bar")
+], PercentBar);
+export { PercentBar };

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

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

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

@@ -0,0 +1,42 @@
+import { css } from "lit";
+export default css `
+    :host {
+        font-family: var(--font-stack), monospace;
+        font-size: 0.9rem;
+    }
+
+    sl-drawer::part(panel) {
+        border: 1px dashed var(--secondary-color);
+    }
+
+    sl-drawer::part(header) {
+        border-bottom: 1px dashed var(--secondary-color);
+    }
+
+    sl-drawer::part(title) {
+        padding-top: 10px;
+        padding-bottom: 10px;
+        font-family:  var(--font-stack-bold), monospace;
+    }
+
+    sl-drawer::part(body) {
+        padding-top: 10px;
+    }
+
+    a:after {
+        content: " ↗";
+        display: inline-block;
+    }
+
+    h2, h3, h4, h5, h6 {
+        margin-top: 40px;
+        padding-bottom: 10px;
+        border-bottom: 1px dashed var(--secondary-color);
+    }
+    
+    p {
+        margin-top: 20px;
+        margin-bottom: 20px;
+    }
+
+`;

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

@@ -0,0 +1,22 @@
+import '@shoelace-style/shoelace/dist/components/drawer/drawer.js';
+import { LitElement, TemplateResult } from "lit";
+import { SlDrawer } from "@shoelace-style/shoelace";
+export declare enum ProblemDrawerEventType {
+    RULE_DOCS = "ruleDocs",
+    HOW_TO_FIX = "howToFix"
+}
+export interface ProblemDrawerEvent {
+    type: ProblemDrawerEventType;
+    rule?: string;
+    body?: string;
+}
+export declare class ProblemDetailsDrawer extends LitElement {
+    static styles: import("lit").CSSResult[];
+    drawer: SlDrawer;
+    private label;
+    private content;
+    constructor();
+    render(): TemplateResult<1>;
+    open(event: ProblemDrawerEvent): void;
+    close(): void;
+}

package/dist/components/problem-list/details-drawer.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/drawer/drawer.js';
+import { customElement, query } from "lit/decorators.js";
+import { html, LitElement } from "lit";
+import { unsafeHTML } from "lit/directives/unsafe-html.js";
+import syntaxCss from "@/css/chroma-synxtax.css";
+import detailsDrawerCss from "./details-drawer.css";
+import sharedCss from "./shared.css";
+export var ProblemDrawerEventType;
+(function (ProblemDrawerEventType) {
+    ProblemDrawerEventType["RULE_DOCS"] = "ruleDocs";
+    ProblemDrawerEventType["HOW_TO_FIX"] = "howToFix";
+})(ProblemDrawerEventType || (ProblemDrawerEventType = {}));
+let ProblemDetailsDrawer = class ProblemDetailsDrawer extends LitElement {
+    constructor() {
+        super();
+    }
+    render() {
+        return html `
+            <sl-drawer contained label="${this.label}" class="drawer" style="--size: 800px;">
+                ${this.content}
+                <sl-button slot="footer" @click=${this.close} variant="primary" class="button-primary">close panel</sl-button>
+            </sl-drawer>
+        `;
+    }
+    open(event) {
+        this.label = "";
+        switch (event.type) {
+            case ProblemDrawerEventType.RULE_DOCS:
+                if (event.rule) {
+                    this.label = 'Rule: ' + event.rule;
+                    this.content = html `${unsafeHTML(event.body)}`;
+                }
+                break;
+            case ProblemDrawerEventType.HOW_TO_FIX:
+                if (event.rule)
+                    this.label = 'Rule: ' + event.rule;
+                this.content = html `
+                    <h3>How to fix this problem</h3>
+                    ${event.body}`;
+                break;
+        }
+        this.requestUpdate();
+        if (this.drawer != null) {
+            this.drawer.show();
+        }
+    }
+    close() {
+        if (this.drawer != null) {
+            this.drawer.hide();
+        }
+    }
+};
+ProblemDetailsDrawer.styles = [sharedCss, syntaxCss, detailsDrawerCss];
+__decorate([
+    query('sl-drawer')
+], ProblemDetailsDrawer.prototype, "drawer", void 0);
+ProblemDetailsDrawer = __decorate([
+    customElement("pb33f-problem-details-drawer")
+], ProblemDetailsDrawer);
+export { ProblemDetailsDrawer };

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

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