@pb33f/cowboy-components 0.1.8 → 0.1.10

package/dist/components/attention-box/attention-box.d.ts

@@ -1,4 +1,5 @@
 import { LitElement } from 'lit';
+import { SlAlert } from "@shoelace-style/shoelace";
 export declare enum AttentionType {
     Context = "context",
     Info = "info",
@@ -12,7 +13,11 @@ export declare class AttentionBox extends LitElement {
     static styles: import("lit").CSSResult[];
     type: AttentionType;
     headerText: string;
+    closeable: boolean;
+    alert: SlAlert;
     constructor();
+    hide(): void;
+    show(): void;
     getIcon(): "braces-asterisk" | "info-square" | "exclamation-triangle" | "exclamation-square" | "check-square" | "question-square";
     render(): import("lit-html").TemplateResult<1>;
 }

package/dist/components/attention-box/attention-box.js

@@ -5,7 +5,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { LitElement, html } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
+import { customElement, property, query } from 'lit/decorators.js';
 import attentionBoxCss from "./attention-box.css.js";
 import alertsCss from "../../css/alerts.css.js";
 export var AttentionType;
@@ -23,6 +23,13 @@ let AttentionBox = class AttentionBox extends LitElement {
         super();
         this.type = AttentionType.Context;
         //this.headerText = 'information'
+        this.closeable = false;
+    }
+    hide() {
+        this.alert.hide();
+    }
+    show() {
+        this.alert.show();
     }
     getIcon() {
         switch (this.type) {
@@ -53,13 +60,23 @@ let AttentionBox = class AttentionBox extends LitElement {
         if (this.headerText?.length > 0) {
             header = html `<strong>${this.headerText}</strong>`;
         }
-        return html `
-            <div class='attention ${this.type}'>
-                <sl-alert class="${this.type}" open>
+        let alert = html `
+            <sl-alert class="${this.type}" open>
+                    <sl-icon slot="icon" name="${this.getIcon()}" class="${this.headerText ? '' : 'noheader'}"></sl-icon>
+                    ${header}
+                    <slot></slot>
+                </sl-alert>`;
+        if (this.closeable) {
+            alert = html `
+            <sl-alert class="${this.type}" open closable>
                     <sl-icon slot="icon" name="${this.getIcon()}" class="${this.headerText ? '' : 'noheader'}"></sl-icon>
                     ${header}
                     <slot></slot>
-                </sl-alert>
+                </sl-alert>`;
+        }
+        return html `
+            <div class='attention ${this.type}'>
+                ${alert}
             </div>
         `;
     }
@@ -71,6 +88,12 @@ __decorate([
 __decorate([
     property()
 ], AttentionBox.prototype, "headerText", void 0);
+__decorate([
+    property({ type: Boolean })
+], AttentionBox.prototype, "closeable", void 0);
+__decorate([
+    query('sl-alert')
+], AttentionBox.prototype, "alert", void 0);
 AttentionBox = __decorate([
     customElement('pb33f-attention-box')
 ], AttentionBox);

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

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

package/dist/components/footer/footer.css.js

@@ -0,0 +1,21 @@
+import { css } from "lit";
+export default css `
+    footer {
+        padding: var(--footer-padding);
+        width: 100vw;
+        font-size: var(--footer-font-size);
+        height: var(--footer-height);
+        position: fixed;
+        bottom: 0;
+        background-color: var(--background-color);
+        z-index: 10;
+        border-top: 1px dashed var(--secondary-color);
+    }
+
+    footer > .generated-timestamp {
+        float: right;
+        margin-right: 15px;
+        font-weight: normal;
+        color: var(--font-color-sub2);
+    }
+`;

package/dist/components/footer/footer.d.ts

@@ -0,0 +1,8 @@
+import { LitElement } from "lit";
+export declare class FooterComponent extends LitElement {
+    static styles: import("lit").CSSResult[];
+    build: string;
+    url: string;
+    constructor();
+    render(): import("lit-html").TemplateResult<1>;
+}

package/dist/components/footer/footer.js

@@ -0,0 +1,36 @@
+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 footerCss from "./footer.css.js";
+import linksCss from "../../css/links.css";
+let FooterComponent = class FooterComponent extends LitElement {
+    constructor() {
+        super();
+        this.url = 'https://pb33f.io';
+        this.build = '';
+    }
+    render() {
+        const date = new Date().getFullYear();
+        return html `
+            <footer>
+                &copy;${date} <a href="${this.url}">princess b33f heavy industries</a>
+                <span class="generated-timestamp">${this.build}</span>
+            </footer>`;
+    }
+};
+FooterComponent.styles = [footerCss, linksCss];
+__decorate([
+    property()
+], FooterComponent.prototype, "build", void 0);
+__decorate([
+    property()
+], FooterComponent.prototype, "url", void 0);
+FooterComponent = __decorate([
+    customElement('pb33f-footer')
+], FooterComponent);
+export { FooterComponent };

package/dist/components/header/header.css.js

@@ -1,102 +1,111 @@
 import { css } from "lit";
 export default css `
-  a, a:visited, a:active {
-    text-decoration: none;
-    color: var(--primary-color);
-  }
-
-  a:hover {
-    color: var(--primary-color);
-    text-decoration: underline;
-  }
-  
-  header.pb33f-header {
-    display: flex;
-    height: 57px;
-    flex-direction: row;
-    z-index: 1;
-    background-color: var(--background-color);
-  }
-
-  header.pb33f-header > .logo {
-    width: 170px;
-    min-width: 170px;
-    padding: 9px 0 10px 10px;
-    border-bottom: 1px dashed var(--secondary-color);
-    height: 36px;
-  }
-
-  header.pb33f-header > .logo .caret {
-    font-size: 1.6em;
-    color: var(--secondary-color)
-  }
-
-  header.pb33f-header > .logo .name {
-    font-size: 1.7em;
-    font-family: var(--font-stack-bold),sans-serif;
-    color: var(--primary-color);
-    text-shadow:  0 0 10px var(--primary-color-text-shadow), 0 0 10px var(--primary-color-text-shadow);
-  }
-
-  header.pb33f-header > .logo .name > a {
-    text-decoration: none;
-  }
-
-  header.pb33f-header > .logo .name > a:hover {
-    text-decoration: underline;
-
-  }
-
-  header.pb33f-header > .logo .name > a:active {
-    text-decoration: underline;
-    color: var(--secondary-color);
-    text-shadow:  0 0 5px var(--secondary-color-text-shadow), 0 0 10px var(--secondary-color-text-shadow-outer);
-  }
-
-  header.pb33f-header > .logo .name::after {
-    content: "";
-    -webkit-animation: cursor .8s infinite;
-    animation: cursor .8s infinite;
-    background: var(--primary-color);
-    border-radius: 0;
-    display: inline-block;
-    height: 0.9em;
-    margin-left: 0.2em;
-    width: 3px;
-    bottom: -2px;
-    position: relative;
-  }
-  
-  header .header-space {
-    height: 55px;
-    flex-grow: 2;
-    border-bottom: 1px dashed var(--secondary-color);
-  }
-
-  @-webkit-keyframes cursor {
-    0% {
-      opacity: 0;
+    a, a:visited, a:active {
+        text-decoration: none;
+        color: var(--primary-color);
     }
 
-    50% {
-      opacity: 1;
+    a:hover {
+        color: var(--primary-color);
+        text-decoration: underline;
     }
 
-    to {
-      opacity: 0;
+    header.pb33f-header {
+        display: flex;
+        height: 57px;
+        flex-direction: row;
+        z-index: 1;
+        background-color: var(--background-color);
     }
-  }
 
-  @keyframes cursor {
-    0% {
-      opacity: 0;
+    header.pb33f-header > .logo {
+        width: 170px;
+        min-width: 170px;
+        padding: 9px 0 10px 10px;
+        border-bottom: 1px dashed var(--secondary-color);
+        height: 36px;
     }
 
-    50% {
-      opacity: 1;
+    header.pb33f-header > .logo.wide {
+        width: 300px;
     }
 
-    to {
-      opacity: 0;
+    header.pb33f-header > .logo .caret {
+        font-size: 1.6em;
+        color: var(--secondary-color)
     }
-  }`;
+
+    header.pb33f-header > .logo .name {
+        font-size: 1.7em;
+        font-family: var(--font-stack-bold), sans-serif;
+        color: var(--primary-color);
+        text-shadow: 0 0 10px var(--primary-color-text-shadow), 0 0 10px var(--primary-color-text-shadow);
+    }
+
+    header.pb33f-header > .logo .name > sl-icon {
+        vertical-align: middle;
+    }
+    
+
+    header.pb33f-header > .logo .name > a {
+        text-decoration: none;
+    }
+
+    header.pb33f-header > .logo .name > a:hover {
+        text-decoration: underline;
+
+    }
+
+    header.pb33f-header > .logo .name > a:active {
+        text-decoration: underline;
+        color: var(--secondary-color);
+        text-shadow: 0 0 5px var(--secondary-color-text-shadow), 0 0 10px var(--secondary-color-text-shadow-outer);
+    }
+
+    header.pb33f-header > .logo .name::after {
+        content: "";
+        -webkit-animation: cursor .8s infinite;
+        animation: cursor .8s infinite;
+        background: var(--primary-color);
+        border-radius: 0;
+        display: inline-block;
+        height: 0.9em;
+        margin-left: 0.2em;
+        width: 3px;
+        bottom: -2px;
+        position: relative;
+    }
+
+    header .header-space {
+        height: 55px;
+        flex-grow: 2;
+        border-bottom: 1px dashed var(--secondary-color);
+    }
+
+    @-webkit-keyframes cursor {
+        0% {
+            opacity: 0;
+        }
+
+        50% {
+            opacity: 1;
+        }
+
+        to {
+            opacity: 0;
+        }
+    }
+
+    @keyframes cursor {
+        0% {
+            opacity: 0;
+        }
+
+        50% {
+            opacity: 1;
+        }
+
+        to {
+            opacity: 0;
+        }
+    }`;

package/dist/components/header/header.d.ts

@@ -3,6 +3,7 @@ export declare class HeaderComponent extends LitElement {
     static styles: import("lit").CSSResult;
     name: string;
     url: string;
+    wide: boolean;
     constructor();
     render(): import("lit-html").TemplateResult<1>;
 }

package/dist/components/header/header.js

@@ -12,11 +12,12 @@ let HeaderComponent = class HeaderComponent extends LitElement {
         super();
         this.name = 'pb33f';
         this.url = 'https://pb33f.io';
+        this.wide = false;
     }
     render() {
-        return html `
+        return html ` 
             <header class="pb33f-header">
-                <div class="logo">
+                <div class="logo ${this.wide ? 'wide' : ''}">
                     <span class="caret">$</span>
                     <span class="name"><a href="${this.url}">${this.name}</a></span>
                 </div>
@@ -33,6 +34,9 @@ __decorate([
 __decorate([
     property()
 ], HeaderComponent.prototype, "url", void 0);
+__decorate([
+    property({ type: Boolean })
+], HeaderComponent.prototype, "wide", void 0);
 HeaderComponent = __decorate([
     customElement('pb33f-header')
 ], HeaderComponent);

package/dist/components/the-doctor/activity-spinner.d.ts

@@ -0,0 +1,8 @@
+import { LitElement } from "lit";
+export declare class ActivitySpinner extends LitElement {
+    visible: boolean;
+    constructor();
+    show(): void;
+    hide(): void;
+    render(): import("lit-html").TemplateResult<1>;
+}

package/dist/components/the-doctor/activity-spinner.js

@@ -0,0 +1,43 @@
+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, state } from "lit/decorators.js";
+import { html, LitElement } from "lit";
+let ActivitySpinner = class ActivitySpinner extends LitElement {
+    constructor() {
+        super();
+        this.visible = false;
+    }
+    show() {
+        if (!this.visible) {
+            this.visible = true;
+        }
+    }
+    hide() {
+        if (this.visible) {
+            this.visible = false;
+        }
+    }
+    render() {
+        if (this.visible) {
+            return html `
+                <sl-spinner style="font-size: 1rem; 
+                    --indicator-color: var(--primary-color); 
+                    --track-color: var(--secondary-color);"></sl-spinner>
+            `;
+        }
+        else {
+            return html ``;
+        }
+    }
+};
+__decorate([
+    state()
+], ActivitySpinner.prototype, "visible", void 0);
+ActivitySpinner = __decorate([
+    customElement('pb33f-activity-spinner')
+], ActivitySpinner);
+export { ActivitySpinner };

package/dist/components/the-doctor/feedback.css.d.ts

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

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

@@ -0,0 +1,30 @@
+import { css } from "lit";
+export default css `
+    .feedback {
+        font-size: 0.9rem;
+        padding: 10px;
+    }
+    
+    h2 {
+        margin-top:0;
+    }
+    
+    sl-textarea::part(base) {
+        font-family: var(--font-stack), monospace;  
+        border-radius: 0;
+        margin-top: 10px;
+        margin-bottom: 10px;
+    }
+    
+    sl-input::part(base) {
+        font-family: var(--font-stack), monospace;  
+        border-radius: 0;
+        font-size: 0.9rem;
+    }
+    
+    sl-input::part(form-control-label) {
+        font-family: var(--font-stack), monospace;
+        border-radius: 0;
+        font-size: 0.9rem;
+    }
+`;

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

@@ -0,0 +1,14 @@
+import '@shoelace-style/shoelace/dist/components/textarea/textarea.js';
+import { LitElement } from "lit";
+import { SlButton, SlInput, SlTextarea } from "@shoelace-style/shoelace";
+export declare class FeedbackComponent extends LitElement {
+    static styles: import("lit").CSSResult[];
+    textArea: SlTextarea;
+    emailInput: SlInput;
+    sendButton: SlButton;
+    sent: boolean;
+    constructor();
+    toggleButton(): void;
+    send(): void;
+    render(): import("lit-html").TemplateResult<1>;
+}

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

@@ -0,0 +1,83 @@
+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/textarea/textarea.js';
+import { customElement, query, state } from "lit/decorators.js";
+import { html, LitElement } from "lit";
+import feedbackCss from "./feedback.css.js";
+import buttonCss from "../../css/button.css";
+import sharedCss from "../../css/shared.css";
+import { FeedbackService } from "@/services/feedback-service";
+let FeedbackComponent = class FeedbackComponent extends LitElement {
+    constructor() {
+        super();
+        this.sent = false;
+    }
+    toggleButton() {
+        this.sendButton.disabled = !(this.textArea.value.length > 0 && this.textArea.value.trim() !== '');
+    }
+    send() {
+        this.sendButton.loading = true;
+        FeedbackService.sendFeedback(this.emailInput.value, this.textArea.value).then(() => {
+            this.sendButton.loading = false;
+            this.sent = true;
+        }).catch((error) => {
+            console.error("unable to send feedback: ", error);
+            this.sendButton.loading = false;
+        });
+    }
+    render() {
+        if (!this.sent) {
+            return html `
+                <div class="feedback">
+                    <h2>Penny for your thoughts?</h2>
+                    <p>
+                        This is an <strong>early preview</strong>, lots more functionality and capability is coming
+                        soon. In
+                        the meantime
+                        Your feedback about this tool would be <strong>most welcome</strong>.
+                    </p>
+                    <p>
+                        Everything you see has been built from the ground up by a single person, <em>please be kind</em>.
+                    </p>
+                    <hr/>
+                    <sl-input label="Email (optional)" placeholder="your@email.com"></sl-input>
+                    <sl-textarea placeholder="What do you like? What do you hate? What would make the doctor better?"
+                                 size="small" @sl-input="${this.toggleButton}">
+                    </sl-textarea>
+                    <sl-button @click="${this.send}" disabled>Send Feedback</sl-button>
+                </div>
+            `;
+        }
+        else {
+            return html `
+                <div class="feedback">
+                    <pb33f-attention-box type="success" headerText="Feedback Sent!">
+                        Thank you, it is most appreciated. Your thoughts have been delivered directly to
+                        <a href="https://quobix.com">quobix</a> via discord.
+                    </pb33f-attention-box>
+                </div>
+            `;
+        }
+    }
+};
+FeedbackComponent.styles = [buttonCss, feedbackCss, sharedCss];
+__decorate([
+    query('sl-textarea')
+], FeedbackComponent.prototype, "textArea", void 0);
+__decorate([
+    query('sl-input')
+], FeedbackComponent.prototype, "emailInput", void 0);
+__decorate([
+    query('sl-button')
+], FeedbackComponent.prototype, "sendButton", void 0);
+__decorate([
+    state()
+], FeedbackComponent.prototype, "sent", void 0);
+FeedbackComponent = __decorate([
+    customElement('pb33f-feedback')
+], FeedbackComponent);
+export { FeedbackComponent };

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

@@ -8,6 +8,7 @@ import { customElement, property, query } from "lit/decorators.js";
 import { html, LitElement } from "lit";
 import statusBarCss from "./status-bar.css.js";
 import linksCss from "../../css/links.css.js";
+import buttonCss from "../../css/button.css";
 let StatusBar = class StatusBar extends LitElement {
     constructor() {
         super();
@@ -55,7 +56,7 @@ let StatusBar = class StatusBar extends LitElement {
         }
     }
 };
-StatusBar.styles = [statusBarCss, linksCss];
+StatusBar.styles = [statusBarCss, linksCss, buttonCss];
 __decorate([
     property({ type: Boolean })
 ], StatusBar.prototype, "visible", void 0);

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

@@ -147,9 +147,13 @@ export default css `
         color: var(--error-color);
         text-decoration: underline;
     }
-
-
-
+    
+    pb33f-activity-spinner {
+        position: absolute;
+        top: 0;
+        right: 0;
+        
+    }
 
 
 

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

@@ -9,6 +9,7 @@ import { LitElement } from "lit";
 import { EditorUpdatedEvent, ProblemRuleFilterChangedEvent } from "../../events/doctor.js";
 import { ProblemDrawerEvent } from "../problem-list/details-drawer.js";
 import { SlSwitch, SlTab, SlTabGroup } from "@shoelace-style/shoelace";
+import { AttentionBox } from "../attention-box/attention-box";
 export declare const DoctorDocumentBag = "pb33f-doctor-editor";
 export declare const HowToFixBag = "pb33f-doctor-howtofix";
 export declare const RuleDocumentationBag = "pb33f-doctor-ruledocs";
@@ -23,9 +24,10 @@ export declare class TheDoctor extends LitElement {
     problemsPanel: SlTab;
     tabGroup: SlTabGroup;
     owaspSwitch: SlSwitch;
+    welcomeBox: AttentionBox;
     private unavailable;
     doctorEndpoint: string;
-    private errorBanner;
+    private readonly errorBanner;
     private bagManager;
     private readonly editor;
     private docBag;
@@ -44,6 +46,8 @@ export declare class TheDoctor extends LitElement {
     private OWASPEnabled;
     private readonly statusBar;
     private session;
+    private readonly feedback;
+    private readonly activitySpinner;
     constructor(doctorEndpoint?: string);
     ruleGroupClicked(event: CustomEvent<ProblemRuleFilterChangedEvent>): void;
     ruleDocsClicked(event: CustomEvent<ProblemDrawerEvent>): void;
@@ -55,5 +59,7 @@ export declare class TheDoctor extends LitElement {
     private fetchDocs;
     specChanged(event: CustomEvent<EditorUpdatedEvent>): void;
     toggleOWASP(): void;
+    boostrap(): void;
     render(): import("lit-html").TemplateResult<1>;
+    closeWelcome(): void;
 }