@pb33f/cowboy-components 0.6.6 → 0.6.7

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

@@ -37,7 +37,6 @@ let OAuthLogin = class OAuthLogin extends LitElement {
         }, 2000);
     }
     render() {
-        console.log('rendering with ' + this.animateBox);
         return html `
             <div style="width: 500px; height: 280px; margin: 0 auto;">
                 <pb33f-electric-box .orbs="${this.orbs}"

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

@@ -21,7 +21,7 @@ export default css `
     }
     
     .no-values {
-        //min-height: 550px;
+        height: 600px;
         width: 500px;
         margin: 0 auto;
         padding-top: 50px;

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

@@ -9,6 +9,7 @@ export declare class Paginator extends LitElement {
     label: string;
     activeIndex: number;
     invalid: boolean;
+    hideSparks: boolean;
     private renderValues;
     private sparks;
     private paginatorNavigator;

package/dist/components/paginator/paginator.js

@@ -20,6 +20,7 @@ let Paginator = class Paginator extends LitElement {
         this.itemsPerPage = 20;
         this.activeIndex = 0;
         this.invalid = false;
+        this.hideSparks = false;
         this.paginatorNavigator = new PaginatorNavigation();
         this.paginatorNavigator.currentPage = this.currentPage;
         this.paginatorNavigator.totalPages = this.totalPages;
@@ -84,14 +85,29 @@ let Paginator = class Paginator extends LitElement {
     }
     render() {
         this.sparks.isError = this.invalid;
+        if (this.sparks.animating) {
+            this.sparks.stopAnimation();
+        }
         if (this.renderValues?.length === 0 || !this.renderValues) {
-            return html `
-                <div class="no-values ${this.invalid ? 'error' : ''}" style="position: relative">
-                    <div style="position: absolute; width: 100%; top: -50px; left: 0;">${this.sparks}</div>
-                    <sl-icon name="prescription2"></sl-icon><br/>
-                    ${this.invalid ? 'invalid / error' : 'healthy!'}
-            </div>
-            `;
+            if (!this.sparks.animating) {
+                this.sparks.startAnimation();
+            }
+            if (!this.hideSparks) {
+                return html `
+                    <div class="no-values ${this.invalid ? 'error' : ''}" style="position: relative">
+                        <div style="position: absolute; width: 100%; top: -50px; left: 0;">${this.sparks}</div>
+                        <sl-icon name="prescription2"></sl-icon>
+                        <br/>
+                        ${this.invalid ? 'invalid / error' : 'healthy!'}
+                    </div>
+                `;
+            }
+            else {
+                return html `
+                    <div class="no-values" style="position: relative">
+                    </div>
+                    `;
+            }
         }
         return html `
             ${this.paginatorNavigator}
@@ -126,6 +142,9 @@ __decorate([
 __decorate([
     property({ type: Boolean })
 ], Paginator.prototype, "invalid", void 0);
+__decorate([
+    property({ type: Boolean })
+], Paginator.prototype, "hideSparks", void 0);
 Paginator = __decorate([
     customElement("pb33f-paginator-navigation")
 ], Paginator);

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

@@ -5,11 +5,14 @@ export declare class PixelSparks extends LitElement {
     private readonly spawnRate;
     private ctx;
     private canvas;
+    private animationTimer;
     isError: boolean;
+    animating: boolean;
     static styles: import("lit").CSSResult;
     constructor();
     firstUpdated(): void;
     startAnimation(): void;
+    stopAnimation(): void;
     getRandomBetween(min: number, max: number): number;
     spawnSpark(): void;
     animateSparks(): void;

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

@@ -13,6 +13,7 @@ let PixelSparks = class PixelSparks extends LitElement {
         this.gravity = 0.0001;
         this.spawnRate = 70;
         this.isError = false;
+        this.animating = false;
     }
     firstUpdated() {
         const canvas = this.renderRoot.querySelector('canvas');
@@ -23,11 +24,19 @@ let PixelSparks = class PixelSparks extends LitElement {
                 this.ctx = ctx;
             }
         }
-        this.startAnimation();
     }
     startAnimation() {
-        setInterval(() => this.spawnSpark(), 1000 / this.spawnRate);
-        this.animateSparks();
+        if (!this.animating) {
+            this.animationTimer = setInterval(() => this.spawnSpark(), 1000 / this.spawnRate);
+            this.animateSparks();
+            this.animating = true;
+        }
+    }
+    stopAnimation() {
+        if (this.animating) {
+            clearInterval(this.animationTimer);
+            this.animating = false;
+        }
     }
     getRandomBetween(min, max) {
         return Math.random() * (max - min) + min;
@@ -64,8 +73,10 @@ let PixelSparks = class PixelSparks extends LitElement {
     drawSpark(spark) {
         this.ctx.globalAlpha = spark.opacity; // Set transparency level
         this.ctx.fillStyle = spark.color;
-        this.ctx.shadowColor = spark.color;
-        this.ctx.shadowBlur = 8;
+        if (!/Safari/.test(navigator.userAgent)) {
+            this.ctx.shadowColor = spark.color;
+            this.ctx.shadowBlur = 8;
+        }
         this.ctx.fillRect(spark.x, spark.y, spark.size, spark.size);
         this.ctx.globalAlpha = 1; // Reset alpha to default
     }