@pb33f/cowboy-components 0.7.18 → 0.8.0

package/dist/components/paginator/paginator-navigator.js

@@ -114,13 +114,13 @@ let PaginatorNavigation = class PaginatorNavigation extends LitElement {
         return html `
             <div class="paginator-navigation ${this.hide ? 'hide' : ''}">
                 <div>
-                    <sl-icon-button @click=${this.firstPage} name="chevron-double-left" class="home" title="first page" disabled>
+                    <sl-icon-button @click=${this.firstPage} name="chevron-double-left" label="First page" class="home" title="first page" disabled>
                     </sl-icon-button>
-                    <sl-icon-button @click=${this.previousPage} name="chevron-left"  title="previous page" class="previous" disabled>
+                    <sl-icon-button @click=${this.previousPage} name="chevron-left" label="Previous page" title="previous page" class="previous" disabled>
                     </sl-icon-button>
                 </div>
-                <div class="location">Page 
-                    <strong class="current-page">${this.currentPage}</strong> of 
+                <div class="location" aria-current="page">Page
+                    <strong class="current-page">${this.currentPage}</strong> of
                     <strong class="total-pages">${this.totalPages}</strong>
                 </div>
                 <div class="result-range">
@@ -128,9 +128,9 @@ let PaginatorNavigation = class PaginatorNavigation extends LitElement {
                     <sl-format-number value="${this.totalItems}"></sl-format-number></strong>
                 </div>
                 <div>
-                    <sl-icon-button @click=${this.nextPage} name="chevron-right" title="next page" class="next">
+                    <sl-icon-button @click=${this.nextPage} name="chevron-right" label="Next page" title="next page" class="next">
                     </sl-icon-button>
-                    <sl-icon-button @click=${this.lastPage} name="chevron-double-right"  title="last page" class="end">
+                    <sl-icon-button @click=${this.lastPage} name="chevron-double-right" label="Last page" title="last page" class="end">
                     </sl-icon-button>
                 </div>
             </div>

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

@@ -33,6 +33,8 @@ export default css `
         color: var(--font-color-sub4);
         font-family: var(--font-stack-bold), monospace;
         overflow-y: hidden;
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
     }
 
     .error {

package/dist/components/paginator/paginator.js

@@ -10,6 +10,7 @@ import { PaginatorNavigation } from "./paginator-navigator.js";
 import { PaginatorFirstPage, PaginatorLastPage, PaginatorNextPage, PaginatorPreviousPage } from "./paginator-events.js";
 import paginatorCss from "./paginator.css.js";
 import { PixelSparks } from "../the-doctor/sparks";
+import { typedEventHandler } from "../../helpers/typed-events.js";
 let Paginator = class Paginator extends LitElement {
     constructor() {
         super();
@@ -26,14 +27,10 @@ let Paginator = class Paginator extends LitElement {
         this.paginatorNavigator.totalPages = this.totalPages;
         this.paginatorNavigator.totalItems = this.totalItems;
         this.paginatorNavigator.itemsPerPage = this.itemsPerPage;
-        //@ts-ignore
-        this.addEventListener(PaginatorFirstPage, this.firstPage);
-        //@ts-ignore
-        this.addEventListener(PaginatorLastPage, this.lastPage);
-        //@ts-ignore
-        this.addEventListener(PaginatorNextPage, this.nextPage);
-        //@ts-ignore
-        this.addEventListener(PaginatorPreviousPage, this.previousPage);
+        this.addEventListener(PaginatorFirstPage, typedEventHandler(this.firstPage.bind(this)));
+        this.addEventListener(PaginatorLastPage, typedEventHandler(this.lastPage.bind(this)));
+        this.addEventListener(PaginatorNextPage, typedEventHandler(this.nextPage.bind(this)));
+        this.addEventListener(PaginatorPreviousPage, typedEventHandler(this.previousPage.bind(this)));
     }
     nextPage(event) {
         event.stopPropagation();

package/dist/components/percent-bar/percent-bar.css.js

@@ -4,37 +4,138 @@ export default css `
         display: flex;
         flex-direction: row;
         margin: 10px 0 10px 0;
+        align-items: center;
     }
     
-    .bar svg {
-        width: calc(100% - 47px); 
-        border: 1px solid var(--primary-color)
+    .bar-inner {
+        flex: 1;
+        border: 1px solid var(--primary-color);
+        box-sizing: border-box;
+        overflow: hidden;
+        position: relative;
+    }
+    
+    .bar-fill {
+        transition: width 0.3s ease;
+        margin-left: 3px;
+        box-sizing: border-box;
+    }
+    
+    /* Pattern styles using CSS gradients for the block effect */
+    .bar-fill.pattern-solid {
+        /* Solid filled blocks */
+        background: repeating-linear-gradient(
+            90deg,
+            var(--bar-color) 0px,
+            var(--bar-color) 5px,
+            transparent 5px,
+            transparent 8px
+        );
+    }
+    
+    .bar-fill.pattern-empty {
+        /* Empty/outline blocks - just vertical borders with horizontal borders from box */
+        background: 
+            /* Top border */
+            linear-gradient(var(--bar-color), var(--bar-color)) top,
+            /* Bottom border */
+            linear-gradient(var(--bar-color), var(--bar-color)) bottom,
+            /* Vertical borders for blocks */
+            repeating-linear-gradient(
+                90deg,
+                var(--bar-color) 0px,
+                var(--bar-color) 1px,
+                transparent 1px,
+                transparent 4px,
+                var(--bar-color) 4px,
+                var(--bar-color) 5px,
+                transparent 5px,
+                transparent 8px
+            );
+        background-size: 100% 1px, 100% 1px, 100% 100%;
+        background-repeat: no-repeat, no-repeat, repeat;
+        background-position: 0 0, 0 100%, 0 0;
+    }
+    
+    .bar-fill.pattern-crosshatch {
+        /* Square grid pattern with 3 rows */
+        background: 
+            /* Vertical lines */
+            repeating-linear-gradient(
+                90deg,
+                transparent,
+                transparent 4px,
+                var(--bar-color) 5px,
+                var(--bar-color) 5px
+            ),
+            /* Horizontal lines - 3 rows */
+            repeating-linear-gradient(
+                0deg,
+                transparent,
+                transparent 3px,
+                var(--bar-color) 5px,
+                var(--bar-color) 5px
+            );
+    }
+    
+    .bar-fill.pattern-striped {
+        /* SVG pattern with simple diagonal lines */
+        background-color: var(--bar-color);
+        -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='8' height='8' viewBox='0 0 8 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0,8 L8,0 M-4,4 L4,-4 M4,12 L12,4' stroke='black' stroke-width='1.2' fill='none'/%3E%3C/svg%3E");
+        mask-image: url("data:image/svg+xml,%3Csvg width='8' height='8' viewBox='0 0 8 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0,8 L8,0 M-4,4 L4,-4 M4,12 L12,4' stroke='black' stroke-width='1.2' fill='none'/%3E%3C/svg%3E");
+        -webkit-mask-size: 8px 8px;
+        mask-size: 8px 8px;
+        -webkit-mask-repeat: repeat;
+        mask-repeat: repeat;
+    }
+    
+    .bar-fill.pattern-dotted {
+        /* Simple 3-row dot pattern */
+        background-image: radial-gradient(
+            circle,
+            var(--bar-color) 1px,
+            transparent 1px
+        );
+        background-size: 4px 4px;
+        background-position: 4px 4px;
     }
     
 
     .percent {
-        width: 40px;
+        width: 45px;
         margin-left: 5px;
         font-size: 0.8rem;
         text-align: center;
         color: var(--primary-color);
         border: 1px solid var(--primary-color);
         text-shadow: 0 0 1rem var(--primary-color);
+        box-sizing: border-box;
+        display: flex;
+        align-items: center;
+        justify-content: center;
     }
-    
+
+    :host-context(html[theme="light"]) .percent {
+        text-shadow: none;
+    }
+
     .percent span {
         line-height: normal;
         display: inline-block;
         font-family: var(--font-stack-bold), monospace;
     }
-    
+
     .success {
         border: 1px solid var(--terminal-text);
         color: var(--terminal-text);
         text-shadow: 0 0 1rem var(--terminal-text);
     }
 
-    .bar svg.success {
+    :host-context(html[theme="light"]) .success {
+        text-shadow: none;
+    }
+
+    .bar-inner.success {
         border: 1px solid var(--terminal-text);
     }
 
@@ -44,21 +145,40 @@ export default css `
         text-shadow: 0 0 1rem var(--warn-color);
     }
 
-    .bar svg.warning {
+    :host-context(html[theme="light"]) .warning {
+        text-shadow: none;
+    }
+
+    .bar-inner.warning {
         border: 1px solid var(--warn-color);
-        color: var(--warn-color);
     }
-    
+
     .error {
         border: 1px solid var(--error-color);
         color: var(--error-color);
         text-shadow: 0 0 1rem var(--error-color);
     }
 
-    .bar svg.error {
+    :host-context(html[theme="light"]) .error {
+        text-shadow: none;
+    }
+
+    .bar-inner.error {
         border: 1px solid var(--error-color);
-        color: var(--error-color);
-        
+    }
+
+    .info {
+        border: 1px solid var(--tertiary-color);
+        color: var(--tertiary-color);
+        text-shadow: 0 0 1rem var(--tertiary-color);
+    }
+
+    :host-context(html[theme="light"]) .info {
+        text-shadow: none;
+    }
+
+    .bar-inner.info {
+        border: 1px solid var(--tertiary-color);
     }
     
 

package/dist/components/percent-bar/percent-bar.d.ts

@@ -6,6 +6,8 @@ export declare class PercentBar extends LitElement {
     success: boolean;
     warning: boolean;
     error: boolean;
+    info: boolean;
+    pattern: 'solid' | 'crosshatch' | 'striped' | 'dotted' | 'empty';
     constructor();
     render(): TemplateResult<1>;
 }

package/dist/components/percent-bar/percent-bar.js

@@ -4,21 +4,22 @@ 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 { html, LitElement, svg } from "lit";
+import { html, LitElement } from "lit";
 import { property, customElement } from "lit/decorators.js";
 import percentBarCss from "./percent-bar.css.js";
 let PercentBar = class PercentBar extends LitElement {
     constructor() {
         super();
+        this.pattern = 'solid';
         this.value = 0;
         this.height = 20;
+        this.pattern = 'solid';
     }
     render() {
-        let nodes = [];
-        for (let i = 0; i < this.value / 2; i++) {
-            nodes.push((i + 0.2) * 2);
-        }
-        let count = 0;
+        // The key insight: we need to fill bars up to the percentage point
+        // We'll create a wrapper div that clips at the percentage width
+        const barHeight = this.height || 20;
+        const innerBarHeight = barHeight - 7; // Leave padding top and bottom
         let clazz = "";
         let fill = "var(--primary-color)";
         if (this.warning) {
@@ -33,29 +34,26 @@ let PercentBar = class PercentBar extends LitElement {
             fill = "var(--terminal-text)";
             clazz = "success";
         }
+        if (this.info) {
+            fill = "var(--tertiary-color)";
+            clazz = "info";
+        }
         let valueLabel = `${this.value}`;
         if (this.value < 1) {
             valueLabel = "<1";
         }
+        // Clean approach: Use CSS patterns instead of DOM elements
         return html `
-            <div class="bar">
-                <svg xmlns="http://www.w3.org/2000/svg" style="height: ${this.height}px" class="${clazz}">
-                    ${nodes.map((node) => {
-            count++;
-            let width = 1.5;
-            if (count == 50) {
-                width = 1;
-            }
-            return svg `
-                        <rect 
-                        width="${width}%" 
-                        height="${this.height - 4}px" 
-                        x="${node}%" 
-                        y="2" 
-                        fill="${fill}" />`;
-        })}
-                </svg>
-                <div class="percent ${clazz}" style="height: ${this.height}px; line-height: ${this.height}px">
+            <div class="bar" style="height: ${barHeight}px">
+                <div class="bar-inner ${clazz}" style="height: ${barHeight}px">
+                    <div class="bar-fill pattern-${this.pattern}" 
+                         style="width: calc(${this.value}% - 3px); 
+                                --bar-color: ${fill};
+                                height: ${innerBarHeight}px;
+                                margin-top: 3px;">
+                    </div>
+                </div>
+                <div class="percent ${clazz}" style="height: ${barHeight}px; line-height: ${barHeight}px">
                     <span>${valueLabel}%</span>
                 </div>
             </div>
@@ -78,6 +76,12 @@ __decorate([
 __decorate([
     property({ type: Boolean })
 ], PercentBar.prototype, "error", void 0);
+__decorate([
+    property({ type: Boolean })
+], PercentBar.prototype, "info", void 0);
+__decorate([
+    property({ type: String })
+], PercentBar.prototype, "pattern", void 0);
 PercentBar = __decorate([
     customElement("pb33f-percent-bar")
 ], PercentBar);

package/dist/components/premium-gate/premium-gate.css.d.ts

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

package/dist/components/premium-gate/premium-gate.css.js

@@ -0,0 +1,117 @@
+import { css } from 'lit';
+export const styles = css `
+    :host {
+        display: contents;
+    }
+
+    .gate-wrapper {
+        display: contents;
+    }
+
+    .gate-wrapper.gated {
+        opacity: 0.6;
+        cursor: not-allowed;
+    }
+
+    .gate-wrapper.gated ::slotted(*) {
+        pointer-events: none;
+        opacity: 0.8;
+    }
+
+    .inline-gate-message {
+        display: inline-flex;
+        align-items: center;
+        margin-left: 0.5rem;
+        font-size: 0.8rem;
+    }
+
+    .default-inline-message {
+        display: inline-flex;
+        align-items: center;
+        gap: 0.25rem;
+    }
+
+    .default-inline-message sl-icon {
+        font-size: 0.8rem;
+    }
+
+    /* Dialog styles */
+    .premium-dialog {
+        --width: 600px;
+    }
+    
+    .premium-dialog::part(panel) {
+        border-radius: 0;
+    }
+
+    .premium-dialog::part(header) {
+        border-bottom: 1px dashed var(--secondary-color);
+    }
+    
+    .premium-dialog::part(footer) {
+        text-align: center;
+        padding-bottom: 15px;
+        padding-top: 10px;
+        margin-top: 40px;
+        border-top: 1px dashed var(--secondary-color);
+    }
+    
+    h3 {
+        margin-top: 0;
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+    }
+    
+    hr {
+        margin-top: 30px;
+        margin-bottom: 40px;
+    }
+
+    .default-message {
+        text-align: center;
+        padding: 1rem;
+    }
+
+    .message-icon {
+        font-size: 3rem;
+        color: var(--sl-color-primary-600);
+        margin-bottom: 1rem;
+    }
+
+    .default-message h3 {
+        margin: 0 0 0.5rem;
+        font-family: var(--font-stack-bold);
+        font-size: 1.25rem;
+        color: var(--sl-color-neutral-900);
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+    }
+
+    .default-message p {
+        margin: 0.5rem 0;
+        color: var(--sl-color-neutral-700);
+        line-height: 1.5;
+    }
+
+    .credit-status {
+        font-size: 0.875rem;
+        color: var(--sl-color-warning-600);
+        font-family: var(--font-stack-bold);
+        margin-top: 1rem;
+    }
+
+
+    /* Theme adjustments */
+    :host([theme="dark"]) .default-message h3 {
+        color: var(--sl-color-neutral-0);
+    }
+
+    :host([theme="dark"]) .default-message p {
+        color: var(--sl-color-neutral-300);
+    }
+
+    :host([theme="dark"]) .inline-gate-message {
+        color: var(--sl-color-neutral-400);
+    }
+    
+`;

package/dist/components/premium-gate/premium-gate.d.ts

@@ -0,0 +1,49 @@
+import { LitElement, PropertyValues } from 'lit';
+import '@shoelace-style/shoelace/dist/components/dialog/dialog.js';
+import '@shoelace-style/shoelace/dist/components/button/button.js';
+import '@shoelace-style/shoelace/dist/components/icon/icon.js';
+import '../auth/login-panel.js';
+import { LoginPanel } from "../auth/login-panel";
+export declare class PremiumGate extends LitElement {
+    static styles: import("lit").CSSResult[];
+    requireAuth: boolean;
+    requireCredits: number;
+    showDialog: boolean;
+    dialogTitle: string;
+    featureExplanation: string;
+    featureName: string;
+    showVisualGate: boolean;
+    private isAuthenticated;
+    private creditsRemaining;
+    private showPremiumDialog;
+    private gateReason;
+    private dialog?;
+    loginPanel: LoginPanel;
+    private doc?;
+    private authController?;
+    private static readonly INTERCEPTED_EVENTS;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private setupAuthListeners;
+    private removeAuthListeners;
+    private handleAuthChanged;
+    private refreshAuthController;
+    private handleCreditUpdate;
+    private updateAuthState;
+    private setupEventInterception;
+    private removeEventInterception;
+    private isEventFromDialog;
+    private handleInterceptedEvent;
+    private checkAccess;
+    private triggerGate;
+    private handleDialogClose;
+    private openAuthentication;
+    private handleBuyCredits;
+    protected updated(changedProperties: PropertyValues): void;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'pb33f-premium-gate': PremiumGate;
+    }
+}