@pb33f/cowboy-components 0.7.3 → 0.7.5

package/dist/components/changelog/changelog.d.ts

@@ -1,4 +1,6 @@
 import { LitElement, TemplateResult } from "lit";
+import './timeline.js';
+import './timeline-item.js';
 export declare class ChangelogComponent extends LitElement {
     static styles: import("lit").CSSResult[];
     apiURL: string;

package/dist/components/changelog/changelog.js

@@ -11,6 +11,8 @@ import changelogCss from "./changelog.css.js";
 import sharedCss from "../../css/shared.css.js";
 import alertsCss from "../../css/alerts.css.js";
 import { ReleaseComponent } from "./release.js";
+import './timeline.js';
+import './timeline-item.js';
 let ChangelogComponent = class ChangelogComponent extends LitElement {
     constructor() {
         super();
@@ -85,13 +87,13 @@ let ChangelogComponent = class ChangelogComponent extends LitElement {
                     selectedDetails = release;
                 }
                 items.push(html `
-                    <pb33f-timeline-item id="release_${summary.name}">
+                    <pb33f-timeline-item-ch id="release_${summary.name}">
                         <span slot="icon">${icon}</span>
                         <span slot="time" class="${milestone ? `major` : null}">${summary.publish_date}</span>
                         <div slot="content" style="width: 100%">
                           ${release}
                         </div>
-                    </pb33f-timeline-item>`);
+                    </pb33f-timeline-item-ch>`);
             }
             if (selectedDetails) {
                 setTimeout(() => {
@@ -99,24 +101,24 @@ let ChangelogComponent = class ChangelogComponent extends LitElement {
                 });
             }
             return html `
-                <pb33f-timeline>
+                <pb33f-timeline-ch>
                     ${items.map((item) => {
                 return item;
             })}
-                </pb33f-timeline>
+                </pb33f-timeline-ch>
             `;
         }
         else {
             return html `
-                <pb33f-timeline>
-                    <pb33f-timeline-item>
+                <pb33f-timeline-ch>
+                    <pb33f-timeline-item-ch>
                         <div slot="content">
                             <div class="pb33f-loader">
                                 <div class="spin"></div>
                                 fetching changelog for <em>${this.project}</em></div>
                         </div>
-                    </pb33f-timeline-item>
-                </pb33f-timeline>
+                    </pb33f-timeline-item-ch>
+                </pb33f-timeline-ch>
             `;
         }
     }

package/dist/components/changelog/timeline-item.css.d.ts

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

package/dist/components/changelog/timeline-item.css.js

@@ -0,0 +1,51 @@
+import { css } from "lit";
+export default css `
+    :host {
+        display: flex;
+        position: relative;
+    }
+
+    .icon {
+        width: 110px;
+        min-height: 80px;
+        position: relative;
+    }
+
+    .icon:first-child {
+        min-height: 20px;
+    }
+    .icon > .timeline {
+        width: 40px;
+        height: 100%;
+        border-right: 2px solid var(--bars-and-borders);
+        position: absolute;
+    }
+
+    .timeline-icon {
+        width: 20px;
+        height: 20px;
+        border-radius: 15px;
+        margin: 0 10px;
+        text-align: center;
+        font-size: 20px;
+        position: absolute;
+        top: 10px;
+    }
+
+    .content {
+        flex-grow: 2;
+        min-height: 50px;
+    }
+
+    .request-time {
+        font-size: 0.7em;
+        color: var(--font-color-sub2);
+        position: absolute;
+        left: 50px;
+        top: 15px;
+        display: block;
+    }
+
+
+
+`;

package/dist/components/changelog/timeline-item.d.ts

@@ -0,0 +1,7 @@
+import { LitElement } from "lit";
+export declare class TimelineItemComponent extends LitElement {
+    static styles: import("lit").CSSResult;
+    skinny: boolean;
+    constructor();
+    render(): import("lit-html").TemplateResult<1>;
+}

package/dist/components/changelog/timeline-item.js

@@ -0,0 +1,51 @@
+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 timelineItemCss from "./timeline-item.css.js";
+let TimelineItemComponent = class TimelineItemComponent extends LitElement {
+    constructor() {
+        super();
+        this.skinny = false;
+    }
+    render() {
+        if (this.skinny) {
+            return html `
+              
+                    <div class="icon skinny-icon">
+                        <div class="timeline skinny"></div>
+                        <div class="timeline-icon skinny-timeline-icon">
+                            <slot name="icon"></slot>
+                        </div>
+                    </div>
+                    <div class="content-skinny">
+                        <slot name="time" class="request-time skinny-time"></slot>
+                        <slot name="content" class="timeline-content"></slot>
+                    </div>
+          `;
+        }
+        return html `
+            <div class="icon">
+                <div class="timeline"></div>
+                <div class="timeline-icon">
+                    <slot name="icon"></slot>
+                </div>
+            </div>
+            <div class="content">
+                <slot name="time" class="request-time"></slot>
+                <slot name="content" class="timeline-content"></slot>
+            </div>`;
+    }
+};
+TimelineItemComponent.styles = timelineItemCss;
+__decorate([
+    property({ type: Boolean })
+], TimelineItemComponent.prototype, "skinny", void 0);
+TimelineItemComponent = __decorate([
+    customElement('pb33f-timeline-item-ch')
+], TimelineItemComponent);
+export { TimelineItemComponent };

package/dist/components/changelog/timeline.css.d.ts

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

package/dist/components/changelog/timeline.css.js

@@ -0,0 +1,44 @@
+import { css } from "lit";
+export default css `
+
+    pb33f-timeline-item {
+        width: 100%;
+        margin-bottom: 20px;
+    }
+
+    .start {
+        position: relative;
+        width: 100%;
+        height: 20px;
+    }
+
+    .ball-start {
+        width: 15px;
+        height: 15px;
+        border-radius: 10px;
+        background-color: var(--bars-and-borders);
+        position: absolute;
+        left: 33px;
+        top: 5px;
+        z-index: 10;
+    }
+
+    .ball-end {
+        width: 15px;
+        height: 15px;
+        border-radius: 10px;
+        background-color: var(--bars-and-borders);
+        position: absolute;
+        left: 33px;
+        top: 0;
+        z-index: 10;
+        margin-bottom: 20px;
+    }
+
+    .end {
+        position: relative;
+        width: 100%;
+        height: 20px;
+    }
+
+`;

package/dist/components/changelog/timeline.d.ts

@@ -0,0 +1,7 @@
+import { LitElement } from "lit";
+export declare class TimelineComponent extends LitElement {
+    static styles: import("lit").CSSResult;
+    skinny: boolean;
+    constructor();
+    render(): import("lit-html").TemplateResult<1>;
+}

package/dist/components/changelog/timeline.js

@@ -0,0 +1,34 @@
+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 timelineCss from "./timeline.css.js";
+let TimelineComponent = class TimelineComponent extends LitElement {
+    constructor() {
+        super();
+        this.skinny = false;
+    }
+    render() {
+        return html `
+            <div class="start ${this.skinny ? 'skinny' : ''}">
+                <div class="ball-start ${this.skinny ? 'skinny' : ''}"></div>
+            </div>
+            <slot></slot>
+            <div class="end ${this.skinny ? 'skinny' : ''}">
+                <div class="ball-end ${this.skinny ? 'skinny' : ''}"></div>
+            </div>
+        `;
+    }
+};
+TimelineComponent.styles = timelineCss;
+__decorate([
+    property({ type: Boolean })
+], TimelineComponent.prototype, "skinny", void 0);
+TimelineComponent = __decorate([
+    customElement('pb33f-timeline-ch')
+], TimelineComponent);
+export { TimelineComponent };

package/dist/components/the-doctor/nuke-workspace.js

@@ -34,12 +34,17 @@ let NukeWorkspaceComponent = class NukeWorkspaceComponent extends LitElement {
                 <span slot="label" style="color: var(--error-color);"><sl-icon name="radioactive"
                                                                                style="vertical-align: middle">
                 </sl-icon> Nuke workspace</span>
-                <p style="margin-top: 0; padding-top: 0">Things get messed up sometimes.</p>
+                <p style="margin-top: 0; padding-top: 0"><h3>Things get messed up sometimes.</h3></p>
 
+                <p>We keep on introducing new stuff all the time, things might get a bit messed up and you may see some 
+                errors popping up now and then.
+                </p>
+                
                 <p>
-                    To <strong>reset</strong> the workspace back to factory default, you can <strong>nuke it</strong>.
+                    If you're seeing errors, or things are not behaving correctly, or something has gone wrong. You can reset your
+                    workspace. Essentially <strong>Nuke</strong> everything, all the files, all the data.
                 </p>
-
+                
                 <hr/>
                 <pb33f-attention-box type="${AttentionType.Warning}" headerText="All changes will be lost">
                     The doctor will forget everything you have done and obliterate the workspace.

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

@@ -383,10 +383,6 @@ export default css `
         color: var(--warn-color)
     }
     
-    .nuke-session-button {
-        font-size: 1.4rem;
-        margin: 0 10px 0 10px;
-    }
     
     .diagnose-button {
         position: absolute;
@@ -402,14 +398,6 @@ export default css `
         line-height: 18px;
     }
     
-    .nuke-session-button::part(base) {
-        padding: 0;
-    }
-
-    .nuke-session-button::part(base):hover {
-        color: var(--error-color);
-    }
-
     pb33f-credit-ticker {
         position: fixed;
         display: inline-block;

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

@@ -60,6 +60,7 @@ import { TimeVortex } from "../time-vortex/time-vortex.js";
 import { TimelineService } from "../../services/timeline-service.js";
 import { DoctorSettings } from "./settings.js";
 import panelsCss from "../../css/panels.css.js";
+import nukeCss from "../../css/nuke.css";
 export const GraphBag = "pb33f-doctor-graph";
 export const PanelStateBag = "pb33f-doctor-panel-state";
 export const RolodexResponseBag = "pb33f-doctor-rolodex-response";
@@ -2323,8 +2324,7 @@ let TheDoctor = class TheDoctor extends LitElement {
                                 </sl-button>
                             </sl-tooltip>
                             <sl-tooltip content="Nuke / reset workspace" placement="top">
-                                <sl-icon-button style="${!this.importDisabled ? 'display: none' : ''}"
-                                                class="nuke-session-button" name="radioactive" @click="${() => {
+                                <sl-icon-button class="nuke-session-button" name="radioactive" @click="${() => {
             this.nukeWorkspace.show();
         }}">
                                 </sl-icon-button>
@@ -2495,7 +2495,7 @@ let TheDoctor = class TheDoctor extends LitElement {
         this.historyPanel.click();
     }
 };
-TheDoctor.styles = [theDoctorCss, linksCss, dialogCss, buttonCss, radioGroupsCss, tabsCss, formsCss, spinnerCss, tooltipCss, panelsCss];
+TheDoctor.styles = [theDoctorCss, linksCss, dialogCss, buttonCss, radioGroupsCss, tabsCss, formsCss, spinnerCss, tooltipCss, panelsCss, nukeCss];
 __decorate([
     query('#overviewPanel')
 ], TheDoctor.prototype, "overviewPanel", void 0);

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

@@ -51,7 +51,13 @@ let UploadArchiveComponent = class UploadArchiveComponent extends LitElement {
             this.fileName = file.name;
             this.fileType = file.type;
             this.fileSize = file.size;
-            if (file.type === 'application/zip' || file.type === 'application/gzip' || file.type === 'application/x-gzip') {
+            if (file.type === 'application/zip' ||
+                file.type === 'application/zip-compressed' ||
+                file.type === 'application/x-zip' ||
+                file.type === 'multipart/zip' ||
+                file.type === 'application/x-zip-compressed' ||
+                file.type === 'application/gzip' ||
+                file.type === 'application/x-gzip') {
                 this.file = file;
                 this.invalid = false;
                 const formData = new FormData();