@pb33f/cowboy-components 0.0.12 → 0.0.13

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

@@ -1,9 +1,8 @@
 import { css } from "lit";
 export default css `
-    
     sl-alert::part(message) {
         padding-bottom: var(--global-padding);
-        color: var(--font-color-sub1);
+        color: var(--font-color);
     }
     
     sl-alert.error::part(message) {
@@ -12,6 +11,12 @@ export default css `
 
     sl-alert.warning::part(message) {
         color: var(--warn-300);
+        
+    }
+    
+    strong {
+        font-weight: normal;
+        font-family: var(--font-stack-bold), monospace;
     }
     
     .attention {
@@ -50,6 +55,12 @@ export default css `
         border-left: 5px solid var(--terminal-text);
     }
 
+    .question {
+        color: var(--secondary-color);
+        border-color: var(--secondary-color);
+        border-left: 5px solid var(--secondary-color);
+    }
+
 
     .warning {
         color: var(--warn-300);

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

@@ -3,6 +3,7 @@ export declare enum AttentionType {
     Context = "context",
     Info = "info",
     Success = "success",
+    Question = "question",
     Warning = "warning",
     Error = "error",
     Danger = "danger"
@@ -11,6 +12,7 @@ export declare class AttentionBox extends LitElement {
     static styles: import("lit").CSSResult[];
     type: AttentionType;
     headerText: string;
-    getIcon(): "braces-asterisk" | "info-square" | "exclamation-triangle" | "exclamation-square" | "check-square";
+    constructor();
+    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

@@ -13,11 +13,17 @@ export var AttentionType;
     AttentionType["Context"] = "context";
     AttentionType["Info"] = "info";
     AttentionType["Success"] = "success";
+    AttentionType["Question"] = "question";
     AttentionType["Warning"] = "warning";
     AttentionType["Error"] = "error";
     AttentionType["Danger"] = "danger";
 })(AttentionType || (AttentionType = {}));
 let AttentionBox = class AttentionBox extends LitElement {
+    constructor() {
+        super();
+        this.type = AttentionType.Context;
+        //this.headerText = 'information'
+    }
     getIcon() {
         switch (this.type) {
             case AttentionType.Context:
@@ -32,6 +38,8 @@ let AttentionBox = class AttentionBox extends LitElement {
                 return 'exclamation-square';
             case AttentionType.Success:
                 return 'check-square';
+            case AttentionType.Question:
+                return 'question-square';
         }
     }
     render() {
@@ -42,13 +50,13 @@ let AttentionBox = class AttentionBox extends LitElement {
             this.type = AttentionType.Error;
         }
         let header = html ``;
-        if (this.headerText != '') {
+        if (this.headerText?.length > 0) {
             header = html `<strong>${this.headerText}</strong>`;
         }
         return html `
             <div class='attention ${this.type}'>
                 <sl-alert class="${this.type}" open>
-                    <sl-icon slot="icon" name="${this.getIcon()}"></sl-icon>
+                    <sl-icon slot="icon" name="${this.getIcon()}" class="${this.headerText ? '' : 'noheader'}"></sl-icon>
                     ${header}
                     <slot></slot>
                 </sl-alert>

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

@@ -5,8 +5,10 @@ export declare class ChangelogComponent extends LitElement {
     project: string;
     summaries: ReleaseSummary[];
     private error;
+    private _linked;
     constructor();
     connectedCallback(): void;
+    extractHash(): void;
     fetchChangelogSummary(): Promise<any>;
     render(): TemplateResult<1>;
 }

package/dist/components/changelog/changelog.js

@@ -7,10 +7,10 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { customElement, property, state } from "lit/decorators.js";
 import { html, LitElement } from "lit";
 import { marked } from "marked";
-import { unsafeHTML } from "lit/directives/unsafe-html.js";
 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";
 let ChangelogComponent = class ChangelogComponent extends LitElement {
     constructor() {
         super();
@@ -25,6 +25,10 @@ let ChangelogComponent = class ChangelogComponent extends LitElement {
             .catch((err) => {
             this.error = err;
         });
+        this.extractHash();
+    }
+    extractHash() {
+        this._linked = window.location.hash.substring(1);
     }
     async fetchChangelogSummary() {
         const response = await fetch(`${this.apiURL}/${this.project}`);
@@ -46,6 +50,7 @@ let ChangelogComponent = class ChangelogComponent extends LitElement {
             //     parseInt(version.split('.')[1])
             const extractPatchVersion = (version) => parseInt(version.split('.')[2]);
             const items = [];
+            let selectedDetails = null;
             for (let i = 0; i < this.summaries?.length; i++) {
                 const summary = this.summaries[i];
                 let patchVersion = extractPatchVersion(summary.tag_name);
@@ -61,26 +66,38 @@ let ChangelogComponent = class ChangelogComponent extends LitElement {
                 if (i == 0) {
                     latest = true;
                 }
+                const release = new ReleaseComponent();
+                release.latest = latest;
+                release.milestone = milestone;
+                release.name = summary.name;
+                release.published = summary.published_at;
+                release.link = summary.html_url;
+                release.author = summary.author;
+                release.tarball = summary.tarball_url;
+                release.authorLink = summary.author_url;
+                release.authorImage = summary.author_image;
+                release.body = parsed;
+                let open = false;
+                if (summary.name == this._linked) {
+                    open = true;
+                }
+                if (open) {
+                    selectedDetails = release;
+                }
                 items.push(html `
                     <pb33f-timeline-item id="release_${summary.name}">
                         <span slot="icon">${icon}</span>
                         <span slot="time" class="${milestone ? `major` : null}">${summary.publish_date}</span>
                         <div slot="content">
-                            <pb33f-release
-                                    .latest="${latest}"
-                                    .milestone="${milestone}"
-                                    name="${summary.name}"
-                                    published="${summary.published_at}"
-                                    link="${summary.html_url}"
-                                    author="${summary.author}"
-                                    tarball="${summary.tarball_url}"
-                                    authorLink="${summary.author_url}"
-                                    authorImage="${summary.author_image}">
-                                ${unsafeHTML(parsed)}
-                            </pb33f-release>
+                          ${release}
                         </div>
                     </pb33f-timeline-item>`);
             }
+            if (selectedDetails) {
+                setTimeout(() => {
+                    selectedDetails?.open();
+                });
+            }
             return html `
                 <pb33f-timeline>
                     ${items.map((item) => {

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

@@ -35,6 +35,7 @@ export default css `
     .published {
         color: var(--font-color-sub1);
     }
+    
     hr {
         margin-top: 0;
         border-top: 1px dashed var(--bars-and-borders);
@@ -66,7 +67,7 @@ export default css `
     pb33f-kv-view {
         max-width: 500px;
     }
-    
+
     @media only screen and (max-width: 800px) {
 
         sl-details {

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

@@ -1,4 +1,5 @@
 import { LitElement } from "lit";
+import { SlDetails } from "@shoelace-style/shoelace";
 export declare class ReleaseComponent extends LitElement {
     static styles: import("lit").CSSResult[];
     name: string;
@@ -11,6 +12,8 @@ export declare class ReleaseComponent extends LitElement {
     tarball: string;
     milestone: boolean;
     latest: boolean;
+    details: SlDetails;
     constructor();
+    open(): void;
     render(): import("lit-html").TemplateResult<1>;
 }

package/dist/components/changelog/release.js

@@ -4,7 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     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 { customElement, property, query } from "lit/decorators.js";
 import { html, LitElement } from "lit";
 import { unsafeHTML } from "lit/directives/unsafe-html.js";
 import { KVViewComponent } from "../kv-view/kv-view.js";
@@ -14,26 +14,23 @@ let ReleaseComponent = class ReleaseComponent extends LitElement {
     constructor() {
         super();
     }
+    open() {
+        if (this.details != null) {
+            this.details.show().then(() => {
+                window.scrollTo({
+                    behavior: 'smooth',
+                    top: this.details.getBoundingClientRect().top -
+                        document.body.getBoundingClientRect().top -
+                        150,
+                });
+            });
+        }
+    }
     render() {
         const kv = new Map();
         if (this.link) {
             kv.set('Release ', `<a href="${this.link}">${this.link}</a>`);
         }
-        if (this.author && this.authorImage) {
-            let name = this.author;
-            if (this.author == 'daveshanley') {
-                name = 'quobix';
-            }
-            kv.set('Author', `<sl-avatar image="${this.authorImage}" label="Avatar of ${name}"></sl-avatar>
-<a href="${this.authorLink}">${name}</a>`);
-        }
-        if (this.author && !this.authorImage) {
-            let name = this.author;
-            if (this.author == 'daveshanley') {
-                name = 'quobix';
-            }
-            kv.set('Author', `<a href="${this.authorLink}">${name}</a>`);
-        }
         if (this.tarball) {
             kv.set('Tarball', `<a href="${this.tarball}">${this.tarball}</a>`);
         }
@@ -90,6 +87,9 @@ __decorate([
 __decorate([
     property({ type: Boolean })
 ], ReleaseComponent.prototype, "latest", void 0);
+__decorate([
+    query('sl-details')
+], ReleaseComponent.prototype, "details", void 0);
 ReleaseComponent = __decorate([
     customElement('pb33f-release')
 ], ReleaseComponent);

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

@@ -20,7 +20,7 @@ export default css `
 
   header.pb33f-header > .logo {
     width: 170px;
-    min-width: 145px;
+    min-width: 170px;
     padding: 9px 0 10px 10px;
     border-bottom: 1px dashed var(--secondary-color);
     height: 36px;

package/dist/components/terminal/terminal-example.css.js

@@ -40,4 +40,12 @@ export default css `
         border-radius: 0;
         text-transform: uppercase;
     }
+
+    @media only screen and (max-width: 1000px) {
+        
+        sl-button {
+            display: none;
+        }
+    }
+    
 `;