@pb33f/cowboy-components 0.7.5 → 0.7.7

package/dist/components/auth/login-button.d.ts

@@ -6,9 +6,12 @@ export declare class LoginButton extends LitElement {
     authDialog: SlDialog;
     title: string;
     buttonLabel: string;
+    redirectUrl: string;
+    textLink: boolean;
     oauthLogin: OAuthLogin;
     private controller;
     constructor();
+    updated(): void;
     render(): import("lit-html").TemplateResult<1>;
     anonView(): import("lit-html").TemplateResult<1>;
     hide(): void;

package/dist/components/auth/login-button.js

@@ -6,18 +6,26 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { html, LitElement } from "lit";
 import { customElement, property, query } from "lit/decorators.js";
-import { AuthController } from "../../controllers/auth";
+import { AuthController } from "../../controllers/auth-controller";
 import buttonCss from "../../css/button.css";
 import modalCss from "../../css/modal.css";
 import loginButtonCss from "./login-button.css";
 import tooltipCss from "../../css/tooltip.css";
 import { LogoutRequested } from "../../events/doctor";
+import linksCss from "../../css/links.css";
 let LoginButton = class LoginButton extends LitElement {
     constructor() {
         super();
         this.controller = new AuthController(this);
         this.title = 'authenticate';
         this.buttonLabel = 'Authenticate';
+        this.redirectUrl = '';
+        this.textLink = false;
+    }
+    updated() {
+        if (this.oauthLogin) {
+            this.oauthLogin.redirectURL = this.redirectUrl;
+        }
     }
     render() {
         let out = this.anonView();
@@ -27,11 +35,15 @@ let LoginButton = class LoginButton extends LitElement {
         return out;
     }
     anonView() {
+        let action = html ` <sl-button @click="${this.openAuthModal}">
+            <sl-icon name="key" slot="prefix" style="font-size: 1rem"></sl-icon>
+            ${this.buttonLabel}
+        </sl-button>`;
+        if (this.textLink) {
+            action = html `<a href="#" @click="${this.openAuthModal}"><strong>${this.buttonLabel}</strong></a>`;
+        }
         return html `
-            <sl-button @click="${this.openAuthModal}">
-                <sl-icon name="key" slot="prefix" style="font-size: 1rem"></sl-icon>
-                ${this.buttonLabel}
-            </sl-button>
+            ${action}
             <sl-dialog id="auth-dialog" style="--width: 600px" no-header>
                 <div style="padding-top: 20px;">
                     <pb33f-oauth-login title="${this.title}"></pb33f-oauth-login>
@@ -65,8 +77,11 @@ let LoginButton = class LoginButton extends LitElement {
         `;
     }
     logout() {
-        this.dispatchEvent(new Event(LogoutRequested, {
-            bubbles: true, composed: true
+        this.dispatchEvent(new CustomEvent(LogoutRequested, {
+            bubbles: true, composed: true,
+            detail: {
+                redirectURL: this.redirectUrl
+            }
         }));
     }
     openAuthModal() {
@@ -75,7 +90,7 @@ let LoginButton = class LoginButton extends LitElement {
         this.authDialog.show();
     }
 };
-LoginButton.styles = [tooltipCss, buttonCss, modalCss, loginButtonCss];
+LoginButton.styles = [tooltipCss, buttonCss, modalCss, loginButtonCss, linksCss];
 __decorate([
     query('#auth-dialog')
 ], LoginButton.prototype, "authDialog", void 0);
@@ -85,6 +100,12 @@ __decorate([
 __decorate([
     property()
 ], LoginButton.prototype, "buttonLabel", void 0);
+__decorate([
+    property()
+], LoginButton.prototype, "redirectUrl", void 0);
+__decorate([
+    property({ type: Boolean })
+], LoginButton.prototype, "textLink", void 0);
 __decorate([
     query('pb33f-oauth-login')
 ], LoginButton.prototype, "oauthLogin", void 0);

package/dist/components/auth/login-panel.d.ts

@@ -1,9 +1,10 @@
 import { LitElement } from "lit";
+import { AuthController } from "../../controllers/auth-controller";
 export declare class LoginPanel extends LitElement {
     static styles: import("lit").CSSResult[];
     title: string;
     redirect: string;
-    private controller;
+    controller: AuthController;
     constructor();
     willUpdate(): void;
     render(): import("lit-html").TemplateResult<1> | undefined;

package/dist/components/auth/login-panel.js

@@ -6,12 +6,10 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators.js";
-import { AuthController } from "../../controllers/auth";
 import loginButtonCss from "./login-button.css";
 let LoginPanel = class LoginPanel extends LitElement {
     constructor() {
         super();
-        this.controller = new AuthController(this);
         this.title = 'authenticate';
         this.redirect = '/';
     }
@@ -40,6 +38,9 @@ __decorate([
 __decorate([
     property()
 ], LoginPanel.prototype, "redirect", void 0);
+__decorate([
+    property()
+], LoginPanel.prototype, "controller", void 0);
 LoginPanel = __decorate([
     customElement('pb33f-login-panel')
 ], LoginPanel);

package/dist/components/auth/oauth-login.d.ts

@@ -6,6 +6,7 @@ export declare class OAuthLogin extends LitElement {
     static styles: import("lit").CSSResult[];
     title: string;
     instruction: string;
+    redirectURL: string;
     mintravel: number;
     maxtravel: number;
     spin: number;

package/dist/components/auth/oauth-login.js

@@ -22,17 +22,20 @@ let OAuthLogin = class OAuthLogin extends LitElement {
         this.animateBox = false;
     }
     githubLogin() {
-        this.mintravel = 1000;
-        this.maxtravel = 1500;
-        this.spin = 150;
+        this.mintravel = 800;
+        this.maxtravel = 1200;
+        this.spin = 170;
         this.orbs = false;
         this.githubButton.style.animation = 'spinFade 1s ease-out forwards';
         this.githubButton.disabled = true;
         this.instruction = 'hold on, accessing the grid...';
         setTimeout(() => {
-            this.dispatchEvent(new Event(AuthenticationGithubRequested, {
+            this.dispatchEvent(new CustomEvent(AuthenticationGithubRequested, {
                 bubbles: true,
                 composed: true,
+                detail: {
+                    redirectURL: this.redirectURL
+                }
             }));
         }, 2000);
     }
@@ -59,7 +62,7 @@ let OAuthLogin = class OAuthLogin extends LitElement {
                           
                         </div>
                         
-                    </div>    
+                    </div>
                 </pb33f-electric-box>
             </div>`;
     }
@@ -71,6 +74,9 @@ __decorate([
 __decorate([
     property()
 ], OAuthLogin.prototype, "instruction", void 0);
+__decorate([
+    property()
+], OAuthLogin.prototype, "redirectURL", void 0);
 __decorate([
     state()
 ], OAuthLogin.prototype, "mintravel", void 0);

package/dist/components/editor/editor-breadcrumb.css.js

@@ -7,7 +7,7 @@ export default css `
         width: 100%;    
         bottom: 10px;
         font-size: 0.8rem;
-        z-index: 102;
+        z-index: 9;
     }
 
     .sep {

package/dist/components/model-renderer/rendered-node.d.ts

@@ -19,6 +19,7 @@ import './license.js';
 import './info.js';
 import './tag.js';
 import './document.js';
+import './responses.js';
 import '../model-icon/model-icon.js';
 import { TemplateResult } from "lit";
 import './rendered-property.js';
@@ -29,6 +30,7 @@ export declare class RenderedNodeComponent extends HasExamples {
     node: Node;
     renderProblems: boolean;
     render(): TemplateResult<1>;
+    renderLocation(): TemplateResult;
     renderPath(): TemplateResult;
     renderLabel(objectType: string): TemplateResult;
 }

package/dist/components/model-renderer/rendered-node.js

@@ -25,6 +25,7 @@ import './license.js';
 import './info.js';
 import './tag.js';
 import './document.js';
+import './responses.js';
 import '../model-icon/model-icon.js';
 import { customElement, property } from "lit/decorators.js";
 import { html } from "lit";
@@ -34,6 +35,7 @@ import sharedCss from "../../css/shared.css.js";
 import { HasExamples } from "./clickable-ref";
 import modelSharedCss from "./model-shared.css";
 import { NodeType } from "../../model/node_type";
+import { IconSize } from "../model-icon/model-icon";
 let RenderedNodeComponent = class RenderedNodeComponent extends HasExamples {
     render() {
         if (!this.node) {
@@ -80,6 +82,10 @@ let RenderedNodeComponent = class RenderedNodeComponent extends HasExamples {
                 this.renderProblems = true;
                 renderedNode = html `<pb33f-rendered-response-node .response=${this.node.instance} .changes=${this.node.timeline} name="${this.node.label}"></pb33f-rendered-response-node>`;
                 break;
+            case NodeType.RESPONSES:
+                this.renderProblems = true;
+                renderedNode = html `<pb33f-rendered-responses-node .responses=${this.node.instance} name="${this.node.label}"></pb33f-rendered-responses-node>`;
+                break;
             case NodeType.OPERATION:
                 this.renderProblems = true;
                 renderedNode = html `<pb33f-rendered-operation-node .operation=${this.node.instance} .changes=${this.node.timeline} name="${this.node.label}"></pb33f-rendered-operation-node>`;
@@ -159,6 +165,7 @@ let RenderedNodeComponent = class RenderedNodeComponent extends HasExamples {
                 <h3>${this.renderLabel(this.node.label)}</h3>
                 ${this.renderPath()}
                 <hr/>
+                ${this.renderLocation()}
                 <div class="rendered-node-container">
                     ${renderedNode}
                     ${vacuumResults}
@@ -166,6 +173,17 @@ let RenderedNodeComponent = class RenderedNodeComponent extends HasExamples {
             </div>
         `;
     }
+    renderLocation() {
+        if (this.node.origin && this.node.origin != "/root.yaml") {
+            return html `
+                <div class="origin-location">
+                    <pb33f-model-icon size="${IconSize.small}" icon="${NodeType.ROLODEX_FILE}"></pb33f-model-icon>
+                    Origin: <strong>${this.node.origin}</strong>
+                </div>
+                <hr/>`;
+        }
+        return html ``;
+    }
     renderPath() {
         if (this.node.type === NodeType.DOCUMENT) {
             return html ``;

package/dist/components/model-renderer/responses.d.ts

@@ -0,0 +1,11 @@
+import './response.js';
+import { ClickableRef } from "./clickable-ref.js";
+import { HasRef } from "../../model/schema.js";
+export declare class RenderedResponsesNodeComponent extends ClickableRef {
+    static styles: never[];
+    responses: {
+        [key: string]: Response | HasRef;
+    };
+    name: string;
+    render(): import("lit-html").TemplateResult<1>;
+}

package/dist/components/model-renderer/responses.js

@@ -0,0 +1,46 @@
+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 './response.js';
+import { customElement, property } from "lit/decorators.js";
+import { html } from "lit";
+import { ClickableRef } from "./clickable-ref.js";
+let RenderedResponsesNodeComponent = class RenderedResponsesNodeComponent extends ClickableRef {
+    render() {
+        // let references = html``
+        let responses = html ``;
+        if (this.responses) {
+            responses = html `
+                <div id="responses">
+                    ${Object.keys(this.responses).map(key => {
+                return html `
+                            <div class="margin-bottom" style="font-size: 0.8rem">
+                                <div style="margin-bottom: 10px; font-size: 1rem">
+                                    <pb33f-rendered-response-node .response=${this.responses[key]}
+                                                                  name="${key}"></pb33f-rendered-response-node>
+                                </div>
+                            </div>`;
+            })}
+                </div>
+            `;
+        }
+        return html `
+            ${responses}
+            ${super.renderChanges()}
+        `;
+    }
+};
+RenderedResponsesNodeComponent.styles = [];
+__decorate([
+    property()
+], RenderedResponsesNodeComponent.prototype, "responses", void 0);
+__decorate([
+    property()
+], RenderedResponsesNodeComponent.prototype, "name", void 0);
+RenderedResponsesNodeComponent = __decorate([
+    customElement('pb33f-rendered-responses-node')
+], RenderedResponsesNodeComponent);
+export { RenderedResponsesNodeComponent };

package/dist/components/model-tree/tree.js

@@ -124,7 +124,7 @@ let ModelTree = class ModelTree extends LitElement {
         let selected = null;
         for (let i = 0; i < treeItems?.length; i++) {
             const item = treeItems[i];
-            item.selected = item.id === `model-${nodeId}`;
+            item.selected = (item.id === `model-${nodeId}` || item.dataset.hashid === `${nodeId}`);
             if (item.selected) {
                 selected = item;
                 item.expanded = true;

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

@@ -25,7 +25,7 @@ export default css `
     
     .no-values {
         height: 600px;
-        width: 500px;
+        width: 70%;
         margin: 0 auto;
         padding-top: 50px;
         text-align: center;

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

@@ -21,5 +21,7 @@ export declare class Paginator extends LitElement {
     previousPage(event: CustomEvent): void;
     calcTotalPages(): number;
     protected willUpdate(): void;
+    startSparks(): void;
+    stopSparks(): void;
     render(): import("lit-html").TemplateResult<1>;
 }

package/dist/components/paginator/paginator.js

@@ -83,15 +83,15 @@ let Paginator = class Paginator extends LitElement {
         }
         this.renderValues = this.values?.slice(this.paginatorNavigator.getRangeStart(), this.paginatorNavigator.getRangeEnd());
     }
+    startSparks() {
+        this.sparks.startAnimation();
+    }
+    stopSparks() {
+        this.sparks.stopAnimation();
+    }
     render() {
         this.sparks.isError = this.invalid;
-        if (this.sparks.animating) {
-            this.sparks.stopAnimation();
-        }
         if (this.renderValues?.length === 0 || !this.renderValues) {
-            if (!this.sparks.animating) {
-                this.sparks.startAnimation();
-            }
             if (!this.hideSparks) {
                 return html `
                     <div class="no-values ${this.invalid ? 'error' : ''}" style="position: relative">

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

@@ -73,6 +73,12 @@ let ProblemsOverview = class ProblemsOverview extends LitElement {
         this.problemOverviewGroups = this.buildProblemOverviewGroups(value);
         this.paginator.values = this.problemOverviewGroups;
         this.paginator.itemsPerPage = 10;
+        if (this.problemList.length <= 0) {
+            this.paginator.startSparks();
+        }
+        else {
+            this.paginator.stopSparks();
+        }
     }
     render() {
         if (this.unavailable) {

package/dist/components/rodeo/rodeo.js

@@ -15,7 +15,7 @@ import './users.js';
 import { CreateBus } from "@pb33f/ranch";
 import { Command, DoctorServiceChannel, isBrokerResponse, QueuePrefix, TopicPrefix, RodeoServiceChannel, isPlatformEvent } from "../../model/channels.js";
 import { LintingService } from "../../services/linting-service.js";
-import { AuthController } from "../../controllers/auth.js";
+import { AuthController } from "../../controllers/auth-controller";
 import { RodeoService } from "../../services/rodeo-service.js";
 import { RodeoRoundup } from "./roundup.js";
 import { PlatformEventType } from "../../model/platform-events.js";

package/dist/components/the-doctor/sparks.d.ts

@@ -6,6 +6,7 @@ export declare class PixelSparks extends LitElement {
     private ctx;
     private canvas;
     private animationTimer;
+    private animationFrameId;
     isError: boolean;
     animating: boolean;
     static styles: import("lit").CSSResult;

package/dist/components/the-doctor/sparks.js

@@ -9,9 +9,10 @@ import { css, html, LitElement } from "lit";
 let PixelSparks = class PixelSparks extends LitElement {
     constructor() {
         super();
+        this.animationFrameId = null;
         this.sparkArray = [];
-        this.gravity = 0.0001;
-        this.spawnRate = 70;
+        this.gravity = 0.005;
+        this.spawnRate = 50;
         this.isError = false;
         this.animating = false;
     }
@@ -26,39 +27,52 @@ let PixelSparks = class PixelSparks extends LitElement {
         }
     }
     startAnimation() {
+        // Only start if not already animating
         if (!this.animating) {
             this.animationTimer = setInterval(() => this.spawnSpark(), 1000 / this.spawnRate);
-            this.animateSparks();
             this.animating = true;
+            this.animateSparks();
         }
     }
     stopAnimation() {
-        if (this.animating) {
-            clearInterval(this.animationTimer);
-            this.animating = false;
+        this.animating = false;
+        clearInterval(this.animationTimer);
+        // Cancel any pending animation frame
+        if (this.animationFrameId !== null) {
+            cancelAnimationFrame(this.animationFrameId);
+            this.animationFrameId = null;
+        }
+        this.sparkArray = [];
+        // Clear the canvas one last time
+        if (this.ctx && this.canvas) {
+            this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
         }
     }
     getRandomBetween(min, max) {
         return Math.random() * (max - min) + min;
     }
     spawnSpark() {
-        let color = Math.random() > 0.5 ? 'rgb(248, 58, 255)' : 'rgb(98, 196, 255)';
-        if (this.isError) {
-            // create a color between
-            color = Math.random() > 0.5 ? 'rgb(255, 60, 116)' : 'rgb(157, 26, 65)';
+        if (this.animating) {
+            let color = Math.random() > 0.5 ? 'rgb(248, 58, 255)' : 'rgb(98, 196, 255)';
+            if (this.isError) {
+                // create a color between
+                color = Math.random() > 0.5 ? 'rgb(255, 60, 116)' : 'rgb(157, 26, 65)';
+            }
+            this.sparkArray.push({
+                x: Math.random() * this.canvas.width,
+                y: -2,
+                size: 1,
+                color: color,
+                velocityY: this.getRandomBetween(0.05, 0.3),
+                lifetime: 150,
+                initialLifetime: 150,
+                opacity: 1
+            });
         }
-        this.sparkArray.push({
-            x: Math.random() * this.canvas.width,
-            y: -2,
-            size: 1,
-            color: color,
-            velocityY: this.getRandomBetween(0.05, 0.3),
-            lifetime: 300,
-            initialLifetime: 300,
-            opacity: 1
-        });
     }
     animateSparks() {
+        if (!this.animating)
+            return;
         this.ctx?.clearRect(0, 0, this.canvas?.width, this.canvas?.height);
         this.sparkArray = this.sparkArray.filter(spark => spark.lifetime > 0);
         for (let spark of this.sparkArray) {
@@ -68,7 +82,8 @@ let PixelSparks = class PixelSparks extends LitElement {
             spark.lifetime--;
             spark.opacity = spark.lifetime / spark.initialLifetime;
         }
-        requestAnimationFrame(() => this.animateSparks());
+        // Store the ID so we can cancel it later
+        this.animationFrameId = requestAnimationFrame(() => this.animateSparks());
     }
     drawSpark(spark) {
         this.ctx.globalAlpha = spark.opacity; // Set transparency level

package/dist/components/the-doctor/status-bar.css.js

@@ -4,14 +4,14 @@ export default css `
         position: absolute;
         bottom: 8px;
         left: 0;
-        width: 100%;
-        height: 20px;
+        width: calc(100% - 6px);
+        height: 22px;
         background: var(--background-color);
-        border: 1px dashed var(--secondary-color);
+        border-top: 1px dashed var(--secondary-color);
         z-index: 100;
         border-bottom: none;
-        font-size: 0.8rem;
-        padding: 4px 0 0 5px;
+        font-size: 0.9rem;
+        padding: 4px 0 2px 5px;
         vertical-align: middle;
         
     }
@@ -27,18 +27,20 @@ export default css `
     }
     
     .error-icon {
-        color: var(--error-color);
+        color: var(--font-color);
         vertical-align: middle;
     }
     
     .warning {
-        border: 1px dashed var(--warn-color);
+        border-top: 1px dashed var(--warn-color);
         border-bottom: none;
     }
     
     .error {
-        border: 1px dashed var(--error-color);
+        border-top: 1px solid var(--error-color);
+        background-color: var(--error-color-dimmed);
         border-bottom: none;
+        color: var(--font-color)
     }
     
     strong {

package/dist/components/the-doctor/status-bar.d.ts

@@ -4,9 +4,11 @@ export declare class StatusBar extends LitElement {
     static styles: import("lit").CSSResult[];
     visible: boolean;
     callsRemaining: number;
+    authenticated: boolean;
     dialog: SlDialog;
     constructor();
     openDialog(): void;
     closeDialog(): void;
+    authenticate(): void;
     render(): import("lit-html").TemplateResult<1> | undefined;
 }

package/dist/components/the-doctor/status-bar.js

@@ -9,11 +9,14 @@ import { html, LitElement } from "lit";
 import buttonCss from "../../css/button.css.js";
 import statusBarCss from "./status-bar.css.js";
 import linksCss from "../../css/links.css.js";
+import dialogCss from "../../css/dialog.css";
+import { OpenAuthentication } from "../../events/doctor";
 let StatusBar = class StatusBar extends LitElement {
     constructor() {
         super();
         this.visible = false;
         this.callsRemaining = 0;
+        this.authenticated = false;
     }
     openDialog() {
         this.dialog.show();
@@ -21,6 +24,11 @@ let StatusBar = class StatusBar extends LitElement {
     closeDialog() {
         this.dialog.hide();
     }
+    authenticate() {
+        this.dispatchEvent(new Event(OpenAuthentication, {
+            bubbles: true
+        }));
+    }
     render() {
         if (this.visible) {
             let clazz = '';
@@ -41,28 +49,30 @@ let StatusBar = class StatusBar extends LitElement {
             }
             return html `
                 <div class="status-bar ${clazz}">
-                    <sl-dialog label="Credit upgrade coming soon!" class="dialog-overview">
-                        <p>To get more credit for the doctor, you will need to create an account. This feature is coming soon.</p>
-                        <p>
-                            In the meantime please wait 24 hours for your credit to be reset.
+                    <sl-dialog label="Purchase Credit" class="dialog-overview">
+                        <p>Still working on this, coming soon!
                         </p>
                         <sl-button slot="footer" variant="primary" @click="${this.closeDialog}">Close</sl-button>
                     </sl-dialog>
                     <sl-icon name="${icon}" class="${clazzIcon}"></sl-icon>
-                    <span class="status-text">Credits remaining: <strong>${this.callsRemaining}</strong></span> | 
-                    <span class="action-text">${actionText}</span>
-                    ${this.callsRemaining <= 0 ? html ` | <a href="#" @click="${this.openDialog}"><strong>Get more credit</strong></a>` : ''}
+                    <span class="status-text"><strong>Credits remaining: ${this.callsRemaining}</strong></span> | 
+                    <span class="action-text"><strong>${actionText}</strong></span>
+                    ${this.callsRemaining <= 0 && !this.authenticated ? html `| <pb33f-login-button title="Get More Credit" buttonLabel="Authenticate for more credit" textLink></pb33f-login-button>` : ''}
+                    ${this.callsRemaining <= 0 && this.authenticated ? html `| <a href="#" @click="${this.openDialog}"><strong>Purchase Credit</strong></a>` : ''}
                 </div>`;
         }
     }
 };
-StatusBar.styles = [statusBarCss, linksCss, buttonCss];
+StatusBar.styles = [statusBarCss, linksCss, buttonCss, dialogCss];
 __decorate([
     property({ type: Boolean })
 ], StatusBar.prototype, "visible", void 0);
 __decorate([
     property({ type: Number })
 ], StatusBar.prototype, "callsRemaining", void 0);
+__decorate([
+    property({ type: Boolean })
+], StatusBar.prototype, "authenticated", void 0);
 __decorate([
     query('sl-dialog')
 ], StatusBar.prototype, "dialog", void 0);

package/dist/components/the-doctor/the-doctor.css.js

@@ -32,7 +32,7 @@ export default css `
 
     .problems-data {
         height: min-content;
-        max-height: calc(100vh - 50px);
+        max-height: calc(100vh - 75px);
     }