@pb33f/cowboy-components 0.6.7 → 0.7.0

package/dist/components/the-doctor/upload-archive.js

@@ -94,7 +94,7 @@ let UploadArchiveComponent = class UploadArchiveComponent extends LitElement {
                 detail: {
                     content: response.instance,
                     path: path,
-                    nodeHashId: response.idHash,
+                    nodeId: response.id,
                 }
             }));
             this.files = [];

package/dist/components/theme-switcher/theme-switcher.d.ts

@@ -3,7 +3,7 @@ export declare const DarkTheme = "dark";
 export declare const LightTheme = "light";
 export declare const PB33F_THEME = "pb33f-theme";
 export declare class ThemeSwitcher extends LitElement {
-    static styles: import("lit").CSSResult;
+    static styles: import("lit").CSSResult[];
     theme: string;
     connectedCallback(): void;
     toggleTheme(): void;

package/dist/components/theme-switcher/theme-switcher.js

@@ -7,6 +7,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { customElement, state } from "lit/decorators.js";
 import { html, LitElement } from "lit";
 import themeSwitcherCss from "./theme-switcher.css.js";
+import tooltipCss from "../../css/tooltip.css.js";
 export const DarkTheme = 'dark';
 export const LightTheme = 'light';
 export const PB33F_THEME = 'pb33f-theme';
@@ -17,7 +18,7 @@ let ThemeSwitcher = class ThemeSwitcher extends LitElement {
     }
     connectedCallback() {
         super.connectedCallback();
-        this.theme = localStorage.getItem(PB33F_THEME) || LightTheme;
+        this.theme = localStorage.getItem(PB33F_THEME) || DarkTheme;
         const root = document.querySelector('html');
         if (root) {
             root.setAttribute('theme', this.theme);
@@ -58,15 +59,17 @@ let ThemeSwitcher = class ThemeSwitcher extends LitElement {
             gear = 'moon';
         }
         return html `
+            <sl-tooltip content="Toggle between dark and light mode" placement="top">
             <sl-icon-button 
                     @click=${this.toggleTheme}
                     name="${gear}" 
                     label="Settings">
             </sl-icon-button>
+            </sl-tooltip>
         `;
     }
 };
-ThemeSwitcher.styles = themeSwitcherCss;
+ThemeSwitcher.styles = [themeSwitcherCss, tooltipCss];
 __decorate([
     state()
 ], ThemeSwitcher.prototype, "theme", void 0);

package/dist/components/time-vortex/change-list-item.css.d.ts

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

package/dist/components/time-vortex/change-list-item.css.js

@@ -0,0 +1,96 @@
+import { css } from "lit";
+export default css `
+    
+    .changes {
+        display: grid;
+        grid-template-columns: 50px 170px auto 30px 100px;
+        max-height: calc(100vh - 550px);
+        overflow-y: auto;
+    }
+    
+    .change-list-item {
+        border-bottom: 1px dotted var(--secondary-color-dimmer);
+        font-size: 0.8rem;
+    }
+    
+    .icon {
+  
+     
+        text-align: center;
+        border-bottom: 1px dotted var(--secondary-color-dimmer);
+    }
+    
+    .context {
+       
+        width: 100px;
+        color: var(--font-color-sub2);
+        text-align: center;
+        font-size: 0.8rem;
+        border-bottom: 1px dotted var(--secondary-color-dimmer);
+        
+    }
+    
+    .removed-icon {
+        font-size: 1rem;   
+    }
+
+    .added-icon {
+        font-size: 1rem;
+    }
+
+    .modified-icon {
+        font-size: 1rem;
+    }
+    
+    .removed {
+        color: var(--error-color);
+    }
+    
+    .added {
+        color: var(--terminal-text);
+    }
+    
+    .modified {
+        color: var(--font-color-sub1);
+    }
+
+    sl-badge::part(base) {
+        border-radius: 0;
+        background-color: var(--background-color);
+        border: 1px solid var(--secondary-color);
+        color: var(--secondary-color);
+    }
+    
+    .type {
+        border-bottom: 1px dotted var(--secondary-color-dimmer);
+    }
+    
+    .property {
+        padding-top: 6px!important;
+        font-size: 0.9rem;
+        border-bottom: 1px dotted var(--secondary-color-dimmer);
+    }
+    
+    .property-type {
+        color: var(--primary-color);
+    }
+    
+    .property-value {
+        font-family: var(--font-stack-bold), sans-serif;
+    }
+    
+    .change-type {
+        font-size: 0.7rem;
+    }
+    
+    .breaking-col {
+        padding-top: 10px!important;
+        text-align: center;
+        border-bottom: 1px dotted var(--secondary-color-dimmer);
+    }
+    .col {
+        padding-top: 5px;
+        padding-bottom: 5px;
+    }
+
+`;

package/dist/components/time-vortex/change-list-item.d.ts

@@ -0,0 +1,10 @@
+import { TemplateResult } from "lit";
+import { Change } from "../../model/graph.js";
+import { HasChanges } from "../model-renderer/has-changes.js";
+export declare class ChangeList extends HasChanges {
+    static styles: import("lit").CSSResult[];
+    constructor();
+    changes: Change[];
+    getChangeValue(change: Change): TemplateResult;
+    render(): TemplateResult<1>;
+}

package/dist/components/time-vortex/change-list-item.js

@@ -0,0 +1,58 @@
+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 } from "lit";
+import { HasChanges } from "../model-renderer/has-changes.js";
+import changeListItemCss from "./change-list-item.css.js";
+import scrollbarCss from "../../css/scrollbar.css.js";
+let ChangeList = class ChangeList extends HasChanges {
+    constructor() {
+        super();
+    }
+    getChangeValue(change) {
+        if (change.new)
+            return html `<span class="property-type">${change.property}</span>:
+            <span class="property-value">${change.new.length > 100 ? change.new.slice(0, 70) + '...' : change.new}</span>`;
+        if (change.original)
+            return html `<span class="property-type">${change.property}</span>:
+            <span class="property-value">${change.original.length > 100 ? change.original.slice(0, 70) + '...' : change.original}</span>`;
+        return html `<span class="property-type">${change.property}</span>`;
+    }
+    render() {
+        return html `
+            <div class="changes scroller">
+                ${this.changes.map((change) => {
+            let ctx = html `${change.context.newLine}:${change.context.newColumn}`;
+            if (!change.context.newLine) {
+                ctx = html `${change.context.originalLine}:${change.context.originalColumn}`;
+            }
+            return html `
+                    <div class="col icon">${this.renderChangeIcon(change)}</div>
+                    <div class="col type">
+                            <pb33f-model-icon icon="${change.type}"></pb33f-model-icon>
+                            <sl-badge>${change.type?.replace(/([a-z])([A-Z])/g, '$1 $2').toLowerCase()}</sl-badge>
+                    </div>
+                    <div class="col property">
+                        <span class="property-item">${this.getChangeValue(change)}
+                            <span class="change-type">${this.renderChangeType(change)}</span>
+                        </span>
+                    </div>
+                    <div class="col breaking-col">${this.renderBreaking(change.breaking)}</div>
+                    <div class="col context">${ctx}</div>
+                   `;
+        })}
+            </div>`;
+    }
+};
+ChangeList.styles = [changeListItemCss, scrollbarCss];
+__decorate([
+    property()
+], ChangeList.prototype, "changes", void 0);
+ChangeList = __decorate([
+    customElement("pb33f-change-list")
+], ChangeList);
+export { ChangeList };

package/dist/components/time-vortex/history-picker.css.d.ts

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

package/dist/components/time-vortex/history-picker.css.js

@@ -0,0 +1,90 @@
+import { css } from "lit";
+export default css `
+    .breaking-change {
+        color: var(--error-color);
+        font-size: 1.5rem;
+        background: var(--background-color);
+    }
+
+    .change {
+        color: var(--secondary-color);
+        font-size: 1rem;
+        padding-left: 6px;
+    }
+
+    .heart-breaker {
+
+        border-left: 3px solid var(--error-color);
+        padding-left: 5px;
+    }
+
+    
+    .selected-bar {
+        border-left: 3px solid var(--primary-color)!important;
+    }
+    
+    .dream-maker {
+
+        border-left: 3px solid var(--secondary-color-lowalpha);
+        padding-left: 5px;
+
+    }
+    
+    .change {
+        
+        height: 30px;
+        
+    }
+
+    pb33f-timeline-item:hover {
+        background-color: var(--secondary-color-very-lowalpha);
+        cursor: pointer;
+    }
+
+
+    pb33f-timeline-item.selected:hover {
+        background-color: var(--primary-color-verylowalpha);
+        cursor: pointer;
+    }
+
+    .selected {
+        background: linear-gradient(90deg, var(--background-color) 0%, var(--primary-color-verylowalpha) 100%);
+        color: var(--background-color);
+        border-right: 4px solid var(--primary-color);
+    }
+    
+    .view-tardis {
+        padding-left: 12px;
+        padding-bottom: 10px;
+        padding-top: 5px;
+        font-size: 0.9rem;
+        border-bottom: 1px dashed var(--secondary-color);
+    }
+    
+    .view-tardis sl-icon {
+        vertical-align: middle;
+        font-size: 1rem;
+    }
+
+    .skip-changes{
+        padding-left: 12px;
+        padding-bottom: 5px;
+        padding-top: 5px;
+        margin-bottom: 5px;
+        color: var(--warn-color);
+        font-size: 0.9rem;
+        border: 1px dashed var(--warn-color);
+    }
+    
+    .tardis-timeline {
+        height: calc(100vh - 205px);
+        width: 100%;
+        overflow-y: auto;
+        overflow-x: hidden;
+    }
+    
+    strong {
+        font-family: var(--font-stack-bold), sans-serif;
+    }
+    
+`;

package/dist/components/time-vortex/history-picker.d.ts

@@ -0,0 +1,18 @@
+import { LitElement } from "lit";
+import { SpecSummary } from "../../model/timeline.js";
+import '../timeline/timeline.js';
+import '../timeline/timeline-item.js';
+import './spec-summary-timeline-item.js';
+import '@shoelace-style/shoelace/dist/components/format-date/format-date.js';
+import '@shoelace-style/shoelace/dist/components/relative-time/relative-time.js';
+export declare class HistoryPicker extends LitElement {
+    static styles: import("lit").CSSResult[];
+    specSummary: SpecSummary[];
+    skipChanges: boolean;
+    constructor();
+    loadOverview(): void;
+    openSettings(): void;
+    render(): import("lit-html").TemplateResult<1>;
+    deselectTimelineItems(): void;
+    loadSpecSummary(spec: SpecSummary): void;
+}

package/dist/components/time-vortex/history-picker.js

@@ -0,0 +1,143 @@
+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 } from "lit";
+import { customElement, state } from "lit/decorators.js";
+import historyPickerCss from "./history-picker.css.js";
+import { OpenSettings, RevisionClicked, ShowTimelineSummary } from "../../events/doctor.js";
+import linksCss from "../../css/links.css.js";
+import scrollbarCss from "../../css/scrollbar.css.js";
+import '../timeline/timeline.js';
+import '../timeline/timeline-item.js';
+import './spec-summary-timeline-item.js';
+import '@shoelace-style/shoelace/dist/components/format-date/format-date.js';
+import '@shoelace-style/shoelace/dist/components/relative-time/relative-time.js';
+let HistoryPicker = class HistoryPicker extends LitElement {
+    constructor() {
+        super();
+        this.skipChanges = false;
+    }
+    loadOverview() {
+        this.deselectTimelineItems();
+        this.dispatchEvent(new Event(ShowTimelineSummary, {
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    openSettings() {
+        this.dispatchEvent(new Event(OpenSettings, {
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    render() {
+        let skipped = html ``;
+        if (this.skipChanges) {
+            skipped = html `<div class="skip-changes">
+                The tardis is <strong>disabled</strong>, changes <strong>not</strong> being tracked. 
+                <a href="#" @click="${this.openSettings}">Open settings</a>
+            </div>`;
+        }
+        return html `
+            ${skipped}
+            <div class="view-tardis">
+                <sl-icon name="clock-history"></sl-icon>
+                <a href="#" @click="${this.loadOverview}">Timeline Overview</a>
+            </div>
+            <div class="tardis-timeline scroller">
+                <pb33f-timeline skinny>
+                    ${this.specSummary?.map((spec, index) => {
+            let heartBreaker = false;
+            let breaking = html `
+                            <sl-icon slot="icon" name="caret-right-fill" class="change"></sl-icon>`;
+            if (spec.breakingChanges && spec.breakingChanges > 0) {
+                breaking = html `
+                                <sl-icon slot="icon" name="heartbreak-fill" class="breaking-change"></sl-icon>`;
+                heartBreaker = true;
+            }
+            if (this.specSummary[index + 1] != undefined && spec && spec.diagnosisScore) {
+                const preSpec = this.specSummary[index + 1];
+                if (preSpec && preSpec.diagnosisScore && preSpec.diagnosisScore > spec.diagnosisScore) {
+                    spec.wentDown = true;
+                    spec.scoreVariance = preSpec.diagnosisScore - spec.diagnosisScore;
+                }
+                if (preSpec && preSpec.diagnosisScore && preSpec.diagnosisScore < spec.diagnosisScore) {
+                    spec.wentUp = true;
+                    spec.scoreVariance = spec.diagnosisScore - preSpec.diagnosisScore;
+                }
+            }
+            return html `
+                            <pb33f-timeline-item id="change-${spec.changeId}" skinny @click="${() => {
+                this.loadSpecSummary(spec);
+            }}">
+                                ${breaking}
+                                <div id="timebar-${spec.changeId}" slot="time"
+                                     class="time ${heartBreaker ? 'heart-breaker' : 'dream-maker'}">
+                                    <sl-relative-time date="${spec.created}" format="long"></sl-relative-time>
+                                </div>
+                                <div slot="content">
+                                    <div id="changebar-${spec.changeId}"
+                                         class="change ${heartBreaker ? 'heart-breaker' : 'dream-maker'}">
+                                        <pb33f-spec-summary-timeline-item .specSummary="${spec}">
+                                        </pb33f-spec-summary-timeline-item>
+                                    </div>
+
+                                </div>
+                            </pb33f-timeline-item>
+                        `;
+        })}
+                </pb33f-timeline>
+            </div>
+        `;
+    }
+    deselectTimelineItems() {
+        const items = this.shadowRoot?.querySelectorAll('pb33f-timeline-item');
+        const changeBars = this.shadowRoot?.querySelectorAll('div.change');
+        const timeBars = this.shadowRoot?.querySelectorAll('div.time');
+        if (items) {
+            for (const item of items) {
+                item.classList.remove('selected');
+            }
+        }
+        if (changeBars) {
+            for (const item of changeBars) {
+                item.classList.remove('selected-bar');
+            }
+        }
+        if (timeBars) {
+            for (const item of timeBars) {
+                item.classList.remove('selected-bar');
+            }
+        }
+    }
+    loadSpecSummary(spec) {
+        this.dispatchEvent(new CustomEvent(RevisionClicked, {
+            bubbles: true,
+            composed: true,
+            detail: {
+                specSummary: spec,
+            }
+        }));
+        const picked = this.shadowRoot?.querySelector('pb33f-timeline-item#change-' + spec.changeId);
+        const changeBar = this.shadowRoot?.querySelector('div#changebar-' + spec.changeId);
+        const timeBar = this.shadowRoot?.querySelector('div#timebar-' + spec.changeId);
+        this.deselectTimelineItems();
+        picked?.classList.add('selected');
+        changeBar?.classList.add('selected-bar');
+        timeBar?.classList.add('selected-bar');
+    }
+};
+HistoryPicker.styles = [historyPickerCss, linksCss, scrollbarCss];
+__decorate([
+    state()
+], HistoryPicker.prototype, "specSummary", void 0);
+__decorate([
+    state()
+], HistoryPicker.prototype, "skipChanges", void 0);
+HistoryPicker = __decorate([
+    customElement("pb33f-history-picker")
+], HistoryPicker);
+export { HistoryPicker };

package/dist/components/time-vortex/spec-summary-timeline-item.css.d.ts

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

package/dist/components/time-vortex/spec-summary-timeline-item.css.js

@@ -0,0 +1,144 @@
+import { css } from "lit";
+export default css `
+    .timeline-item {
+        display: flex;
+        padding-top: 5px;
+
+    }
+    
+    .selected {
+        color: var(--background-color);!important;
+    }
+    
+    .score {
+        height: 15px;
+        width: 15px;
+        font-size: 0.8rem;
+        text-align: center;
+        color: var(--font-color);
+        border: 1px solid var(--font-color-sub3);
+        padding: 3px;
+        margin-right : 5px;
+        position: relative;
+    }
+    
+    .triple {
+        width: 25px!important;
+    }
+    
+    .triple-large {
+        width: 60px!important;
+    }
+
+    .quad {
+        width: 35px!important;
+    }
+
+    .quad-large {
+        width: 75px!important;
+    }
+    
+    .quint {
+        width: 45px!important;
+    }
+
+    .sext {
+        width: 55px!important;
+    }
+
+    .sext-large {
+        width: 115px!important;
+    }
+    
+    .quint-large {
+        width: 95px!important;
+    }
+    
+    .large {
+        height: 40px;
+        width: 43px;
+        font-size: 1.9rem !important;
+    }
+    
+    .breaking {
+        color: var(--error-color)!important;
+    }
+
+
+    .breaking-score {
+        color: var(--error-color);
+        border: 1px solid var(--error-color);
+    }
+    
+    .score sl-icon {
+        margin-top: 8px;
+        font-size: 0.7rem;
+        color: var(--font-color-sub1)
+    }
+
+    .score > sl-icon:hover, .score.large > sl-icon:hover {
+        color: var(--primary-color);
+    }
+    
+    .score.large sl-icon {
+        margin-top: 20px;
+        font-size: 1.5rem;
+        color: var(--font-color-sub1)
+    }
+    
+    .justify-center {
+        justify-content: center;
+    }
+
+    .score sl-icon.empty {
+        margin-top: 2px;
+        font-size: 0.8rem;
+        color: var(--font-color-sub3)
+    }
+
+    .score.large sl-icon.empty {
+        font-size: 1.7rem;
+        margin-top: 6px;
+        margin-left: 2px;
+    }
+    
+    .score:hover, .score.large:hover {
+        cursor: pointer;
+        border-color: var(--primary-color);
+        color: var(--primary-color);
+    }
+
+    .breaking-score:hover {
+        border-color: var(--error-color) !important;
+        color: var(--error-color) !important;
+    }
+    
+    strong {
+        font-family: var(--font-stack-bold), sans-serif;
+    }
+    
+    .arrow {
+        position: absolute;
+        right: -18px;
+        top: -5px;
+        font-size: 1rem !important;
+    }
+
+    .arrow.large {
+        position: absolute;
+        right: -45px;
+        top: -10px;
+        font-size: 2rem !important;
+    }
+
+    .up {
+        color: var(--terminal-text) !important;
+    }
+
+
+    .down {
+        color: var(--error-color) !important;
+    }
+   
+    
+`;

package/dist/components/time-vortex/spec-summary-timeline-item.d.ts

@@ -0,0 +1,11 @@
+import { LitElement } from "lit";
+import { SpecSummary } from "../../model/timeline";
+export declare class SpecSummaryTimelineItem extends LitElement {
+    static styles: import("lit").CSSResult[];
+    specSummary: SpecSummary;
+    large: boolean;
+    selected: boolean;
+    constructor();
+    render(): import("lit-html").TemplateResult<1>;
+    additionalWidth(v: number | undefined): string;
+}