@pb33f/cowboy-components 0.7.17 → 0.8.0

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

@@ -14,31 +14,38 @@ import { marked } from "marked";
 import { unsafeHTML } from "lit/directives/unsafe-html.js";
 import sharedCss from "./shared.css.js";
 import { getProblemClass, getProblemIcon } from "../../model/problem.js";
-import { MainViewSlideChanged, OpenProblemDrawer } from "../../events/doctor.js";
-import { ProblemDrawerEventType } from "./details-drawer.js";
+import { MainViewSlideChanged, OpenDrawer } from "../../events/doctor.js";
+import { DrawerContentType } from "../../model/drawer-content.js";
 let ProblemMainView = class ProblemMainView extends LitElement {
     constructor() {
         super();
+        this.isHealthy = false;
         this.selectedIndex = 0;
         this.manualChange = false;
     }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        if (this.slideTimeout !== undefined) {
+            clearTimeout(this.slideTimeout);
+        }
+    }
     showRuleDocs(source) {
-        this.dispatchEvent(new CustomEvent(OpenProblemDrawer, {
+        this.dispatchEvent(new CustomEvent(OpenDrawer, {
             bubbles: true,
             composed: true,
             detail: {
-                type: ProblemDrawerEventType.RULE_DOCS,
-                rule: source
+                type: DrawerContentType.RULE_DOCS,
+                ruleId: source
             }
         }));
     }
     howToFix(source) {
-        this.dispatchEvent(new CustomEvent(OpenProblemDrawer, {
+        this.dispatchEvent(new CustomEvent(OpenDrawer, {
             bubbles: true,
             composed: true,
             detail: {
-                type: ProblemDrawerEventType.HOW_TO_FIX,
-                rule: source
+                type: DrawerContentType.HOW_TO_FIX,
+                ruleId: source
             }
         }));
     }
@@ -59,7 +66,10 @@ let ProblemMainView = class ProblemMainView extends LitElement {
     selectSlide(index) {
         this.selectedIndex = index;
         this.manualChange = true;
-        setTimeout(() => {
+        if (this.slideTimeout !== undefined) {
+            clearTimeout(this.slideTimeout);
+        }
+        this.slideTimeout = window.setTimeout(() => {
             this.carousel?.goToSlide(index - 1);
         });
     }
@@ -67,15 +77,15 @@ let ProblemMainView = class ProblemMainView extends LitElement {
         if (this.problems) {
             if (this.problems.length > 1) {
                 return html `
-                    <div class="main-view-carousel">
-                        <sl-carousel @sl-slide-change=${this.slideChanged} navigation mouse-dragging>
+                    <div class="main-view-carousel" role="region" aria-label="Problem viewer">
+                        <sl-carousel @sl-slide-change=${this.slideChanged} navigation mouse-dragging aria-label="Problems carousel">
                             ${this.problems.map((problemItem) => {
                     return html `
-                                    <sl-carousel-item>
+                                    <sl-carousel-item aria-label="Problem ${problemItem.idx} of ${this.problems.length}">
                                         <div class="main-view-carousel">
                                             ${this.renderProblem(problemItem.problemObject)}
-                                            <div class="problem-count">Problem 
-                                                <strong>${problemItem.idx}</strong> of 
+                                            <div class="problem-count">Problem
+                                                <strong>${problemItem.idx}</strong> of
                                                 <em>${this.problems.length}</em></div>
                                         </div>
                                     </sl-carousel-item>
@@ -92,6 +102,13 @@ let ProblemMainView = class ProblemMainView extends LitElement {
                     </div>`;
             }
         }
+        if (this.isHealthy) {
+            return html `
+                <div class="main-view empty healthy">
+                    <sl-icon name="heart-pulse"></sl-icon><br/>
+                    Clean bill of health!
+                </div>`;
+        }
         return html `
             <div class="main-view empty">Pick a problem...<br/><sl-icon name="pin-angle"></sl-icon><br/></div>`;
     }
@@ -116,14 +133,14 @@ let ProblemMainView = class ProblemMainView extends LitElement {
                 <div class="message">
                     ${unsafeHTML(marked.parse(msg).toString())}
                     <div class="location">
-                        Location: <pb33f-render-json-path path="${problem.jsonPath}"></pb33f-render-json-path>
+                        <label class="location-label">Location:</label> <pb33f-render-json-path path="${problem.jsonPath}"></pb33f-render-json-path>
                     </div>
                     ${sourceLocation}
                 </div>
             </div>
             <div class="source">
-                <div>Rule: <a @click="${() => { this.showRuleDocs(problem.source); }}" href="#" data-name="${problem.source}">${problem.source}</a></div>
-                <sl-icon-button @click=${() => { this.howToFix(problem.source); }} name="question-square" class="button-icon">
+                <div><label class="rule-label">Rule:</label> <a @click="${() => { this.showRuleDocs(problem.source); }}" href="#" data-name="${problem.source}">${problem.source}</a></div>
+                <sl-icon-button @click=${() => { this.howToFix(problem.source); }} name="question-square" label="How to fix" class="button-icon">
                 </sl-icon-button>
             </div>`;
     }
@@ -132,6 +149,9 @@ ProblemMainView.styles = [problemMainViewCss, sharedCss];
 __decorate([
     property({ type: ProblemItem })
 ], ProblemMainView.prototype, "problems", void 0);
+__decorate([
+    property({ type: Boolean })
+], ProblemMainView.prototype, "isHealthy", void 0);
 __decorate([
     query('sl-carousel')
 ], ProblemMainView.prototype, "carousel", void 0);

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

@@ -1,13 +1,12 @@
 import { css } from "lit";
 export default css `
     .toolbar-container{
-     
-      
-      //  height: 30px;
         font-size: 0.7rem;
         display: flex;
         justify-content: flex-start;
         flex-flow: row wrap;
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
     }
     
     .spacer{
@@ -18,17 +17,21 @@ export default css `
     }
     
     .filter {
-        border: 1px dashed var(--secondary-color);
+        border-top: 1px solid var(--secondary-color);
+        //border-bottom: 1px solid var(--secondary-color);
+
         min-width: 200px;
         width: 200px;
-        padding-left: 5px;
-        padding-right: 5px;
+        //padding-left: 5px;
+        //padding-right: 5px;
         height: 30px;
-
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
     }
 
     .first {
         flex-grow: 2;
+        padding-left: 5px;
     }
     
     .mid {

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

@@ -14,6 +14,8 @@ export default css `
     .diagnostic-evaluation label {
         font-size: 0.7rem;
         font-family: var(--font-stack), monospace;
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
     }
 
     .diagnostic-evaluation span {
@@ -75,7 +77,11 @@ export default css `
         animation-iteration-count: infinite;
         animation-direction: alternate;
     }
-    
+
+    :host-context(html[theme="light"]) .score.one {
+        animation: none;
+    }
+
     .score.one span {
         color: var(--error-color);
     }
@@ -89,6 +95,10 @@ export default css `
         animation-direction: alternate;
     }
 
+    :host-context(html[theme="light"]) .score.two {
+        animation: none;
+    }
+
     .score.two span {
         color: var(--warn-400);
     }

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

@@ -8,8 +8,8 @@ import { customElement, property } from "lit/decorators.js";
 import { html, LitElement } from "lit";
 import { marked } from "marked";
 import { unsafeHTML } from "lit/directives/unsafe-html.js";
-import { ProblemDrawerEventType } from "../problem-list/details-drawer.js";
-import { OpenProblemDrawer } from "../../events/doctor.js";
+import { DrawerContentType } from "../../model/drawer-content.js";
+import { OpenDrawer } from "../../events/doctor.js";
 import diagnosticEvaluationCss from "./diagnostic-evaluation.css.js";
 import listsCss from "../../css/lists.css.js";
 let DiagnosticEvaluation = class DiagnosticEvaluation extends LitElement {
@@ -39,19 +39,18 @@ let DiagnosticEvaluation = class DiagnosticEvaluation extends LitElement {
         }
     }
     viewRuleDocs(ruleName) {
-        this.dispatchEvent(new CustomEvent(OpenProblemDrawer, {
+        this.dispatchEvent(new CustomEvent(OpenDrawer, {
             bubbles: true,
             composed: true,
             detail: {
-                type: ProblemDrawerEventType.RULE_DOCS,
-                rule: ruleName
+                type: DrawerContentType.RULE_DOCS,
+                ruleId: ruleName
             }
         }));
     }
     convertToLinks(text) {
         const regex = /#\{([^}]+)}/g;
-        // @ts-ignore
-        const replaced = text.replace(regex, (match, p1) => {
+        const replaced = text.replace(regex, (_match, p1) => {
             this.links.push(p1);
             return ``;
         });

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

@@ -4,6 +4,8 @@ export default css `
     label {
         font-size: 0.7rem;
         font-family: var(--font-stack), monospace;
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
     }
     
     span {
@@ -12,4 +14,8 @@ export default css `
         font-family: var(--font-stack-bold), monospace;
         text-shadow: 0 0 1rem var(--primary-color);
     }
+
+    :host-context(html[theme="light"]) span {
+        text-shadow: none;
+    }
 `;

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

@@ -28,7 +28,7 @@ let DocumentStatistic = class DocumentStatistic extends LitElement {
             formatted = html `<sl-format-number value="${v}"></sl-format-number>`;
         }
         return html `
-            <label>${this.label}:</label>
+            <label>${this.label}</label>
             <span>${formatted}${this.postfix}</span>`;
     }
 };

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

@@ -7,8 +7,8 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 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, RuleViolationClicked } from "../../events/doctor.js";
+import { DrawerContentType } from "../../model/drawer-content.js";
+import { OpenDrawer, 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";
@@ -18,12 +18,12 @@ let ProblemOverviewGroup = class ProblemOverviewGroup extends LitElement {
         super();
     }
     viewRuleDocs() {
-        this.dispatchEvent(new CustomEvent(OpenProblemDrawer, {
+        this.dispatchEvent(new CustomEvent(OpenDrawer, {
             bubbles: true,
             composed: true,
             detail: {
-                type: ProblemDrawerEventType.RULE_DOCS,
-                rule: this.groupName
+                type: DrawerContentType.RULE_DOCS,
+                ruleId: this.groupName
             }
         }));
     }

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

@@ -4,6 +4,8 @@ export default css `
     label {
         font-size: 0.8rem;
         font-family: var(--font-stack), monospace;
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
     }
     
     span {
@@ -14,27 +16,44 @@ export default css `
         font-family: var(--font-stack-bold), monospace;
         text-shadow: 0 0 1rem var(--primary-color);
     }
-    
+
+    :host-context(html[theme="light"]) span {
+        text-shadow: none;
+    }
+
     .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);
     }
 
+    :host-context(html[theme="light"]) .glow-warn {
+        text-shadow: none;
+    }
+
     .glow-error {
         text-shadow: 0 0 1rem var(--error-color), 0 0 1.2rem var(--error-color);
     }
-    
+
+    :host-context(html[theme="light"]) .glow-error {
+        text-shadow: none;
+    }
+
+    @container (max-width: 500px) {
+        sl-icon + label {
+            display: none;
+        }
+    }
 `;

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

@@ -14,21 +14,30 @@ let ProblemStatistic = class ProblemStatistic extends LitElement {
         this.value = 0;
     }
     render() {
-        if (this.isError) {
+        if (this.isError && this.value > 0) {
             return html `
-                <sl-icon name="x-square" class="error"></sl-icon><label>${this.label}</label>
+                <sl-icon name="x-square" class="error" aria-hidden="true"></sl-icon><label class="error">${this.label}</label>
                 <span class="error glow-error"><sl-format-number value="${this.value}"></sl-format-number></span>`;
         }
-        if (this.isWarning) {
+        if (this.isError && this.value <= 0) {
+            return html ``; // show no box.
+        }
+        if (this.isWarning && this.value > 0) {
             return html `
-                <sl-icon name="exclamation-triangle" class="warn"></sl-icon><label>${this.label}</label>
+                <sl-icon name="exclamation-triangle" class="warn" aria-hidden="true"></sl-icon><label class="warn">${this.label}</label>
                 <span class="warn glow-warn"><sl-format-number value="${this.value}"></sl-format-number></span>`;
         }
-        if (this.isInform) {
+        if (this.isWarning && this.value <= 0) {
+            return html ``; // show no box.
+        }
+        if (this.isInform && this.value > 0) {
             return html `
-                <sl-icon name="info-square"></sl-icon><label>${this.label}</label>
+                <sl-icon name="info-square" aria-hidden="true"></sl-icon><label>${this.label}</label>
                 <span><sl-format-number value="${this.value}"></sl-format-number></span>`;
         }
+        if (this.isInform && this.value <= 0) {
+            return html ``; // show no box.
+        }
         return html `
             <label>${this.label}</label>
             <span><sl-format-number value="${this.value}"></sl-format-number></span>

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

@@ -10,7 +10,7 @@ export default css `
     }
     
     sl-card::part(base) {
-        border-style: dashed;
+        border-style: solid;
     }
 
 
@@ -25,6 +25,8 @@ export default css `
     h3 {
         margin-top: 10px;
         margin-bottom: 10px;
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
     }
     
     .statistics {
@@ -32,6 +34,7 @@ export default css `
         justify-content: space-between;
         padding-bottom: 10px;
         border-bottom:  1px dashed var(--secondary-color);
+        container-type: inline-size;
     }
     
     .statistics sl-card:first-child {
@@ -45,9 +48,6 @@ export default css `
         .rules {
             display: none;
         }
-        .categories {
-            display: none;
-        }
         .tags {
             display: none;
         }

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

@@ -21,11 +21,32 @@ let ProblemStatisticsComponent = class ProblemStatisticsComponent extends LitEle
         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;
+        let errs = html ``;
+        let warns = html ``;
+        let infs = html ``;
+        if (this.drDiagnostics?.statistics.totalErrors > 0) {
+            errs = html `
+                <sl-card class="card-basic">
+                    <pb33f-problem-statistic label="Errors"
+                                             value="${this.drDiagnostics?.statistics.totalErrors}" isError>
+                    </pb33f-problem-statistic>
+                </sl-card>`;
+        }
+        if (this.drDiagnostics?.statistics.totalWarnings > 0) {
+            warns = html `
+                <sl-card class="card-basic">
+                    <pb33f-problem-statistic label="Warnings"
+                                             value="${this.drDiagnostics?.statistics.totalWarnings}" isWarning>
+                    </pb33f-problem-statistic>
+                </sl-card>`;
+        }
+        if (this.drDiagnostics?.statistics.totalInfo > 0) {
+            infs = html `
+                <sl-card class="card-basic">
+                    <pb33f-problem-statistic label="Informs"
+                                             value="${this.drDiagnostics?.statistics.totalInfo}" isInform>
+                    </pb33f-problem-statistic>
+                </sl-card>`;
         }
         return html `
             <div class="statistics">
@@ -87,26 +108,9 @@ let ProblemStatisticsComponent = class ProblemStatisticsComponent extends LitEle
                                              value="${rulesViolated}">
                     </pb33f-problem-statistic>
                 </sl-card>
-                <sl-card class="card-basic categories">
-                    <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>
+                ${errs}
+                ${warns}
+                ${infs}
             </div>`;
     }
 };

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

@@ -9,11 +9,10 @@ export default css `
     
     .paginator {
         overflow-y: auto;
-        //height: calc(100vh - 485px);
     }
 
     pb33f-paginator-navigation::part(values) {
-        max-height: calc(100vh - 490px);
+        max-height: calc(100vh - 460px);
     }
     
     .paginator::part(values) {
@@ -23,6 +22,7 @@ export default css `
     
     .overview-container {
         height: 100%;
+        padding-right: 5px;
     }
     
     .unavailable {

package/dist/components/property-view/property-view.css.js

@@ -9,6 +9,8 @@ export default css `
         border-bottom: 1px dashed var(--kv-table-dividers);
         border-top: 1px dashed var(--kv-table-header-border-top);
         font-weight: normal;
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
     }
 
     .prop-type-table > table > thead > tr > th:first-child {

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

@@ -24,15 +24,19 @@ export default css `
         font-family: var(--font-stack-bold), monospace;
         text-shadow: 0 0 10px var(--secondary-color);
     }
-    
+
+    :host-context(html[theme="light"]) .bracket {
+        text-shadow: none;
+    }
+
     .bracket-nested {
         color: var(--tertiary-color);
     }
-    
+
     .param {
         color: var(--primary-color);
         font-family: var(--font-stack), monospace;
-      
+
         font-weight: normal;
     }
 
@@ -43,6 +47,10 @@ export default css `
         font-weight: normal;
 
     }
+
+    :host-context(html[theme="light"]) .param-nested {
+        text-shadow: none;
+    }
     
     .param:hover {
         //text-decoration: underline;

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

@@ -36,6 +36,9 @@ let RenderJSONPathComponent = class RenderJSONPathComponent extends LitElement {
         return returnString;
     }
     breakPath() {
+        if (!this.path) {
+            return html `<span part='path' class='dot'>{no path}</span>`;
+        }
         let segments = this.path.split(".");
         if (segments.length > 0) {
             if (segments[0] == '$')

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

@@ -11,12 +11,21 @@ export default css `
         font-family: var(--font-stack-bold), monospace;
         text-shadow: 0 0 10px var(--secondary-color);
     }
+
+    :host-context(html[theme="light"]) .bracket {
+        text-shadow: none;
+    }
+
     .param {
         color: var(--primary-color);
         font-family: var(--font-stack-bold), monospace;
         text-shadow: 0 0 10px var(--primary-color);
         font-weight: normal;
     }
+
+    :host-context(html[theme="light"]) .param {
+        text-shadow: none;
+    }
     .slash {
         color: var(--font-color-sub2)
     }

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

@@ -15,30 +15,15 @@ let PathRenderComponent = class PathRenderComponent extends LitElement {
         this.nowrap = false;
     }
     replaceBrackets() {
-        const regex = /(\{)([\w$.#/]+)(\})/gm;
-        let m;
-        let returnString = this.formatSlashes(this.path);
-        while ((m = regex.exec(this.path)) !== null) {
-            // This is necessary to avoid infinite loops with zero-width matches
-            if (m.index === regex.lastIndex) {
-                regex.lastIndex++;
-            }
-            m.forEach((match, groupIndex) => {
-                if (groupIndex === 1) {
-                    returnString = returnString.replaceAll(match, `<span class="bracket ${this.nowrap ? 'nowrap' : ''}">` + match + '</span>');
-                }
-                if (groupIndex === 2) {
-                    returnString = returnString.replaceAll(match, `<span class="param ${this.nowrap ? 'nowrap' : ''}">` + match + '</span>');
-                }
-                if (groupIndex === 3) {
-                    returnString = returnString.replaceAll(match, `<span class="bracket ${this.nowrap ? 'nowrap' : ''}">` + match + '</span>');
-                }
-            });
-        }
+        const regex = /\{([\w$.#/]+)\}/g;
+        const nowrapClass = this.nowrap ? ' nowrap' : '';
+        const returnString = this.formatSlashes(this.path).replace(regex, (_match, param) => {
+            return `<span class="bracket${nowrapClass}">{</span><span class="param${nowrapClass}">${param}</span><span class="bracket${nowrapClass}">}</span>`;
+        });
         if (!this.nowrap) {
-            return html `${unsafeHTML(returnString.toString())}`;
+            return html `${unsafeHTML(returnString)}`;
         }
-        return html `<div style="white-space: nowrap;">${unsafeHTML(returnString.toString())}</div>`;
+        return html `<div style="white-space: nowrap;">${unsafeHTML(returnString)}</div>`;
     }
     formatSlashes(formatted) {
         return formatted.replaceAll(`/`, `<span class="slash">/</span>`);

package/dist/components/rodeo/rodeo.d.ts

@@ -24,6 +24,7 @@ export declare class Rodeo extends LitElement {
     protected connectToBroker(): void;
     whoAmI(): void;
     firstUpdated(): void;
+    disconnectedCallback(): void;
     render(): import("lit-html").TemplateResult<1>;
     handlePlatformEvent(evt: PlatformEvent): void;
     rodeoServiceStream(): BusCallback<CommandResponse>;

package/dist/components/rodeo/rodeo.js

@@ -99,6 +99,11 @@ let Rodeo = class Rodeo extends LitElement {
         ]);
         this.connectToBroker();
     }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.rodeoChannelSubscription?.unsubscribe();
+        this.doctorChannelSubscription?.unsubscribe();
+    }
     render() {
         return html `
             <main>