@alegendstale/holly-components 0.2.8 → 0.2.10

package/dist/components/bottom-sheet/bottom-sheet.stories.js

@@ -0,0 +1,43 @@
+import { html } from 'lit';
+const meta = {
+    title: 'Bottom Sheet',
+    tags: ['autodocs'],
+    component: 'bottom-sheet',
+};
+export default meta;
+const Template = {
+    render: ({ open, nonmodal, snapPoints }) => {
+        return html `
+			<bottom-sheet ?open=${open} .snapPoints=${snapPoints} ?nonmodal=${nonmodal}>
+				<p>
+					Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eget dui eros. Nunc vel magna pellentesque, euismod lacus eu, euismod ligula. Nulla porttitor ultrices enim, ac fermentum ligula bibendum nec. Maecenas et volutpat nulla. Donec sit amet dapibus est, ultricies accumsan nunc. Praesent vitae nulla metus. Aenean non posuere lorem, bibendum scelerisque mauris. Praesent arcu dolor, efficitur vel malesuada nec, rhoncus eget eros. Nullam facilisis, diam eu tristique euismod, neque dolor pellentesque purus, id tristique ex quam eget lacus. Pellentesque lacinia consequat ligula. Duis egestas ornare porttitor. Morbi tempus fermentum nulla. Sed eu turpis quis nunc aliquam cursus vitae nec arcu. Nulla nec leo et tellus condimentum commodo mollis in dolor. Vivamus tortor eros, dictum in nulla ac, ultricies posuere ligula. Maecenas elit sem, efficitur et risus sed, placerat imperdiet nisl. Donec nunc ipsum, molestie et elementum a, hendrerit in diam. Vestibulum
+					ullamcorper eu dolor id maximus. Donec in nunc vel dolor vehicula mollis. Mauris elementum, massa vitae condimentum efficitur, nisi massa condimentum dolor, at ultricies nulla ante et tortor. Praesent vitae vestibulum urna. Nunc aliquam aliquam elementum. Nullam facilisis ut ligula in ultrices. Vestibulum et risus ut eros gravida malesuada varius euismod dolor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aenean dui nisl, auctor quis laoreet fringilla, aliquam id risus. Pellentesque sit amet neque finibus, pharetra dolor eu, eleifend ante. Vestibulum condimentum urna urna, ut dignissim nibh posuere in. Proin nec tincidunt enim, vel vehicula nunc. In quis pellentesque urna. Curabitur egestas arcu non arcu ullamcorper, at pellentesque lacus varius. Maecenas ac molestie erat. Integer ornare dui vitae turpis porttitor, nec semper mauris ultrices. Quisque eu arcu ipsum. Morbi sed tristique urna. Pellentesque gravida, nisi elementum ultrices condimentum,
+					ipsum nisl faucibus ex, eget imperdiet dolor sem sit amet dui. Aenean dictum nibh nulla, non lacinia arcu molestie tempus. Donec a ex sodales, posuere felis eget, vestibulum odio. Sed lectus sapien, lacinia in orci eu, molestie finibus ex. Pellentesque dictum, dolor nec interdum gravida, sapien velit venenatis libero, eu finibus elit purus et ipsum. Vivamus sed eros libero. Aenean a auctor quam. Vivamus blandit enim tellus, in posuere enim fermentum varius. Donec malesuada orci ac ex dapibus, nec condimentum metus hendrerit. Nam non efficitur sem, ac ornare sapien. In varius libero et malesuada gravida. Suspendisse sollicitudin euismod ante, quis tincidunt quam rhoncus ac. Proin in pulvinar tortor. Nullam condimentum vestibulum dignissim. In hac habitasse platea dictumst. Etiam laoreet volutpat urna, et euismod urna aliquet egestas. Nulla odio tellus, vestibulum sit amet auctor vitae, tristique ut turpis. Cras sed tellus accumsan, pellentesque urna eget,
+					sollicitudin felis. In euismod ac arcu vitae suscipit. Curabitur non consequat nibh. In purus nulla, egestas in commodo in, fermentum sit amet massa. Nullam luctus velit vel arcu dictum, vel fermentum dolor convallis. Nulla interdum quam nibh, in egestas turpis vestibulum vel. Nulla placerat sapien sit amet pharetra porttitor.
+				</p>
+			</bottom-sheet>
+		`;
+    },
+};
+export const Modal = {
+    ...Template,
+    args: {
+        open: false,
+        snapPoints: [0, 50, 100],
+    },
+};
+export const NonModal = {
+    ...Template,
+    args: {
+        open: false,
+        nonmodal: true,
+        snapPoints: [0, 50, 100],
+    },
+};
+export const Thirds = {
+    ...Template,
+    args: {
+        open: false,
+        snapPoints: [0, 33, 66],
+    },
+};

package/dist/components/bottom-sheet/bottom-sheet.test.js

@@ -0,0 +1,15 @@
+import { $, expect } from '@wdio/globals';
+import './bottom-sheet';
+import { html, render } from 'lit';
+describe('Lit component testing', () => {
+    it('should open the sheet', async () => {
+        render(html `
+				<bottom-sheet></bottom-sheet>,
+			`, document.body);
+        const sheet = await $('bottom-sheet');
+        it('should open sheet', async () => {
+            // sheet.showSheet(true);
+            await expect($(sheet)).toHaveAttr('open');
+        });
+    });
+});

package/dist/components/bottom-sheet/index.js

@@ -1 +1 @@
-import "./bottom-sheet.js";
+import './bottom-sheet';

package/dist/components/canvas/canvas-base.d.ts

@@ -1,9 +1,10 @@
 import { EventEmitter } from '../../utils/EventEmitter';
+import { LitElement } from 'lit';
+import { client } from '../../utils/types';
 type EventMap = {
     click: [hex: string];
     move: [e: client];
 };
-import { LitElement } from 'lit';
 export declare class CanvasBase extends LitElement {
     canvas: HTMLCanvasElement;
     protected context: CanvasRenderingContext2D;

package/dist/components/canvas/canvas-base.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"canvas-base.d.ts","sourceRoot":"","sources":["../../../src/components/canvas/canvas-base.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAGxD,KAAK,QAAQ,GAAG;IACf,KAAK,EAAE,CAAC,GAAG,EAAE,MAAM,CAAC,CAAC;IACrB,IAAI,EAAE,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC;CAClB,CAAC;AAEF,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAG5C,qBACa,UAAW,SAAQ,UAAU;IAEzC,MAAM,EAAG,iBAAiB,CAAC;IAE3B,SAAS,CAAC,OAAO,EAAG,wBAAwB,CAAC;IAEtC,OAAO,EAAE,YAAY,CAAC,QAAQ,CAAC,CAAgC;IAEtE,oBAAoB,IAAI,IAAI;IAK5B,MAAM;IAsBC,YAAY,CAAC,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM;CAWpD"}
+{"version":3,"file":"canvas-base.d.ts","sourceRoot":"","sources":["../../../src/components/canvas/canvas-base.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAExD,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAE5C,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAE3C,KAAK,QAAQ,GAAG;IACf,KAAK,EAAE,CAAC,GAAG,EAAE,MAAM,CAAC,CAAC;IACrB,IAAI,EAAE,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC;CAClB,CAAC;AAEF,qBACa,UAAW,SAAQ,UAAU;IAEzC,MAAM,EAAG,iBAAiB,CAAC;IAE3B,SAAS,CAAC,OAAO,EAAG,wBAAwB,CAAC;IAEtC,OAAO,EAAE,YAAY,CAAC,QAAQ,CAAC,CAAgC;IAEtE,oBAAoB,IAAI,IAAI;IAK5B,MAAM;IAsBC,YAAY,CAAC,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM;CAWpD"}

package/dist/components/canvas/canvas-base.js

@@ -1,48 +1,60 @@
-import m from "colorsea";
-import { EventEmitter as u } from "../../utils/EventEmitter.js";
-import { ref as f } from "lit/directives/ref.js";
-import { LitElement as h, html as x } from "lit";
-import { query as d, customElement as g } from "lit/decorators.js";
-var C = Object.defineProperty, b = Object.getOwnPropertyDescriptor, v = (i, e, r, a) => {
-  for (var t = a > 1 ? void 0 : a ? b(e, r) : e, n = i.length - 1, s; n >= 0; n--)
-    (s = i[n]) && (t = (a ? s(e, r, t) : s(t)) || t);
-  return a && t && C(e, r, t), t;
+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;
 };
-let c = class extends h {
-  constructor() {
-    super(...arguments), this.emitter = new u();
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback(), this.emitter.clear();
-  }
-  render() {
-    return x`
-			<canvas
-				@click=${(e) => this.emitter.emit("click", this.getCanvasHex(e.clientX, e.clientY))}
+import colorsea from 'colorsea';
+import { EventEmitter } from '../../utils/EventEmitter';
+import { ref } from 'lit/directives/ref.js';
+import { LitElement, html } from 'lit';
+import { customElement, query } from 'lit/decorators.js';
+let CanvasBase = class CanvasBase extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.emitter = new EventEmitter();
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.emitter.clear();
+    }
+    render() {
+        let canvasRef = (canvas) => {
+            if (!(canvas instanceof HTMLCanvasElement))
+                return;
+            this.context = canvas.getContext('2d', { willReadFrequently: true, alpha: true });
+        };
+        return html `
+			<canvas
+				@click=${(e) => this.emitter.emit('click', this.getCanvasHex(e.clientX, e.clientY))}
 				@pointermove=${(e) => {
-      e.isPrimary && this.emitter.emit("move", { x: e.clientX, y: e.clientY });
-    }}
-				${f((e) => {
-      e instanceof HTMLCanvasElement && (this.context = e.getContext("2d", { willReadFrequently: !0, alpha: !0 }));
-    })}
-			>
-			</canvas>
+            // Track only the first touch
+            if (!e.isPrimary)
+                return;
+            this.emitter.emit('move', { x: e.clientX, y: e.clientY });
+        }}
+				${ref(canvasRef)}
+			>
+			</canvas>
 		`;
-  }
-  // Retrieves the hex from the mouse position
-  getCanvasHex(i, e) {
-    const r = this.canvas.getBoundingClientRect();
-    let a = i - r.left, t = e - r.top, [n, s, o, p] = this.context.getImageData(a, t, 1, 1).data;
-    const l = Math.round(p / 255 * 100);
-    return l !== 255 ? m([n, s, o, l]).hex() : m([n, s, o]).hex();
-  }
-};
-v([
-  d("canvas")
-], c.prototype, "canvas", 2);
-c = v([
-  g("canvas-base")
-], c);
-export {
-  c as CanvasBase
+    }
+    // Retrieves the hex from the mouse position
+    getCanvasHex(clientX, clientY) {
+        const canvasBounds = this.canvas.getBoundingClientRect();
+        let x = clientX - canvasBounds.left;
+        let y = clientY - canvasBounds.top;
+        let [r, g, b, a] = this.context.getImageData(x, y, 1, 1).data;
+        // Convert alpha from 0-255 to 0-1
+        const alpha = Math.round((a / 255) * 100);
+        // Hide alpha value if not an alpha color
+        let hex = alpha !== 255 ? colorsea([r, g, b, alpha]).hex() : colorsea([r, g, b]).hex();
+        return hex;
+    }
 };
+__decorate([
+    query('canvas')
+], CanvasBase.prototype, "canvas", void 0);
+CanvasBase = __decorate([
+    customElement('canvas-base')
+], CanvasBase);
+export { CanvasBase };

package/dist/components/canvas/canvas-gradient.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"canvas-gradient.d.ts","sourceRoot":"","sources":["../../../src/components/canvas/canvas-gradient.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,sCAAsC,CAAC;AAGjE,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAErC,qBACa,cAAe,SAAQ,UAAU;IAE7C,MAAM,EAAE,MAAM,EAAE,CAAM;IAGtB,MAAM,EAAE,MAAM,CAAK;IAGnB,KAAK,EAAE,MAAM,CAAK;IAGlB,SAAS,EAAE,SAAS,CAAoB;IAExC,SAAS,CAAC,OAAO,CAAC,kBAAkB,EAAE,cAAc,GAAG,IAAI;IAM3D;;OAEG;IACI,cAAc,CAAC,MAAM,EAAE,MAAM,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,SAAS;CAyB3F;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,iBAAiB,EAAE,cAAc,CAAC;KAClC;CACD"}
+{"version":3,"file":"canvas-gradient.d.ts","sourceRoot":"","sources":["../../../src/components/canvas/canvas-gradient.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,sCAAsC,CAAC;AAEjE,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAGrC,qBACa,cAAe,SAAQ,UAAU;IAE7C,MAAM,EAAE,MAAM,EAAE,CAAM;IAGtB,MAAM,EAAE,MAAM,CAAK;IAGnB,KAAK,EAAE,MAAM,CAAK;IAGlB,SAAS,EAAE,SAAS,CAAoB;IAExC,SAAS,CAAC,OAAO,CAAC,kBAAkB,EAAE,cAAc,GAAG,IAAI;IAM3D;;OAEG;IACI,cAAc,CAAC,MAAM,EAAE,MAAM,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,SAAS;CAyB3F;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,iBAAiB,EAAE,cAAc,CAAC;KAClC;CACD"}

package/dist/components/canvas/canvas-gradient.js

@@ -1,47 +1,63 @@
-import { Direction as l } from "../color-palette/color-palette-utils.js";
-import d from "validate-color";
-import { property as c, customElement as f } from "lit/decorators.js";
-import { CanvasBase as u } from "./canvas-base.js";
-var m = Object.defineProperty, v = Object.getOwnPropertyDescriptor, p = (r, e, o, i) => {
-  for (var t = i > 1 ? void 0 : i ? v(e, o) : e, s = r.length - 1, a; s >= 0; s--)
-    (a = r[s]) && (t = (i ? a(e, o, t) : a(t)) || t);
-  return i && t && m(e, o, t), t;
+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;
 };
-let n = class extends u {
-  constructor() {
-    super(...arguments), this.colors = [], this.height = 0, this.width = 0, this.direction = l.Column;
-  }
-  updated(r) {
-    super.updated(r), this.createGradient(this.colors, this.height, this.width, this.direction);
-  }
-  /**
-   * Creates a new gradient canvas
-   */
-  createGradient(r, e, o, i) {
-    if (!this.context) return;
-    this.canvas.height = e, this.canvas.width = o;
-    let t = i === l.Column ? this.context.createLinearGradient(0, 0, o, 0) : this.context.createLinearGradient(0, 0, 0, e), s = [];
-    for (const [a, h] of r.entries())
-      d(h) && (t.addColorStop(a / (r.length - 1), h), s.push(h));
-    if (s.length <= 1) throw new Error("There are not enough valid color stops to create the gradient.");
-    this.context.fillStyle = t || "#000", this.context.fillRect(0, 0, o, e), this.canvas.classList.add("gradient"), this.canvas.style.setProperty("--palette-column-flex-basis", (e / r.length / 2).toString() + "px");
-  }
-};
-p([
-  c({ type: Array })
-], n.prototype, "colors", 2);
-p([
-  c({ type: Number })
-], n.prototype, "height", 2);
-p([
-  c({ type: Number })
-], n.prototype, "width", 2);
-p([
-  c({ type: String })
-], n.prototype, "direction", 2);
-n = p([
-  f("canvas-gradient")
-], n);
-export {
-  n as CanvasGradient
+import { Direction } from '../color-palette/color-palette-utils';
+import { customElement, property } from 'lit/decorators.js';
+import { CanvasBase } from './canvas-base';
+import { isColorValid } from '../../utils/basicUtils';
+let CanvasGradient = class CanvasGradient extends CanvasBase {
+    constructor() {
+        super(...arguments);
+        this.colors = [];
+        this.height = 0;
+        this.width = 0;
+        this.direction = Direction.Column;
+    }
+    updated(_changedProperties) {
+        super.updated(_changedProperties);
+        this.createGradient(this.colors, this.height, this.width, this.direction);
+    }
+    /**
+     * Creates a new gradient canvas
+     */
+    createGradient(colors, height, width, direction) {
+        if (!this.context)
+            return;
+        this.canvas.height = height;
+        this.canvas.width = width;
+        let gradient = direction === Direction.Column ? this.context.createLinearGradient(0, 0, width, 0) : this.context.createLinearGradient(0, 0, 0, height);
+        let colorStops = [];
+        for (const [i, color] of colors.entries()) {
+            // Skip non-colors, even with override enabled. This prevents errors, especially dealing with css-variables which cannot be parsed at run-time.
+            if (isColorValid(color)) {
+                gradient.addColorStop(i / (colors.length - 1), color);
+                colorStops.push(color);
+            }
+        }
+        if (colorStops.length <= 1)
+            throw new Error('There are not enough valid color stops to create the gradient.');
+        this.context.fillStyle = gradient || '#000';
+        this.context.fillRect(0, 0, width, height);
+        this.canvas.classList.add('gradient');
+        this.canvas.style.setProperty('--palette-column-flex-basis', (height / colors.length / 2).toString() + 'px');
+    }
 };
+__decorate([
+    property({ type: Array })
+], CanvasGradient.prototype, "colors", void 0);
+__decorate([
+    property({ type: Number })
+], CanvasGradient.prototype, "height", void 0);
+__decorate([
+    property({ type: Number })
+], CanvasGradient.prototype, "width", void 0);
+__decorate([
+    property({ type: String })
+], CanvasGradient.prototype, "direction", void 0);
+CanvasGradient = __decorate([
+    customElement('canvas-gradient')
+], CanvasGradient);
+export { CanvasGradient };

package/dist/components/canvas/canvas-image.js

@@ -1,117 +1,164 @@
-import { css as p, html as w } from "lit";
-import { query as u, property as m, customElement as f } from "lit/decorators.js";
-import y from "quantize";
-import { CanvasBase as v } from "./canvas-base.js";
-var x = Object.defineProperty, L = Object.getOwnPropertyDescriptor, h = (e, a, i, s) => {
-  for (var t = s > 1 ? void 0 : s ? L(a, i) : a, r = e.length - 1, n; r >= 0; r--)
-    (n = e[r]) && (t = (s ? n(a, i, t) : n(t)) || t);
-  return s && t && x(a, i, t), t;
+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;
 };
-let o = class extends v {
-  constructor() {
-    super(...arguments), this.imageURL = "", this.smoothing = !1, this.loading = !0, this.width = 0, this.height = 0, this.waitForLoading = () => new Promise((e) => {
-      const a = setInterval(() => {
-        this.loading || (clearInterval(a), e(!0));
-      }, 100);
-    });
-  }
-  firstUpdated(e) {
-    super.firstUpdated(e), this.canvas.classList.add("image"), this.context.imageSmoothingEnabled = this.smoothing;
-  }
-  render() {
-    return w`
-			${super.render()}
-			<img
-				src=${this.imageURL}
-				crossorigin='anonymous'
-				@load=${() => this.loading = !1}
-			>
+import { html, css } from 'lit';
+import { customElement, property, query } from 'lit/decorators.js';
+import quantize from 'quantize';
+import { CanvasBase } from './canvas-base';
+let CanvasImage = class CanvasImage extends CanvasBase {
+    constructor() {
+        super(...arguments);
+        this.imageURL = '';
+        this.smoothing = false;
+        this.loading = true;
+        this.width = 0;
+        this.height = 0;
+        /**
+         * Waits for loading variable to equal true
+         */
+        this.waitForLoading = () => new Promise((resolve) => {
+            const checkLoading = setInterval(() => {
+                if (!this.loading) {
+                    clearInterval(checkLoading);
+                    resolve(true);
+                }
+            }, 100);
+        });
+    }
+    firstUpdated(_changedProperties) {
+        super.firstUpdated(_changedProperties);
+        this.canvas.classList.add('image');
+        this.context.imageSmoothingEnabled = this.smoothing;
+    }
+    render() {
+        // Allows CORS requests for images from different domains
+        return html `
+			${super.render()}
+			<img
+				src=${this.imageURL}
+				crossorigin='anonymous'
+				@load=${() => this.loading = false}
+			>
 		`;
-  }
-  /**
-   * Updates & loads the canvas image.
-   * Attempts to preserve aspect ratio based on width.
-   * @param width The canvas width
-   * @param height The canvas height
-   */
-  updateImage(e, a, i) {
-    this.image.src = e, this.waitForLoading().then(() => {
-      const s = this.image.naturalHeight / this.image.naturalWidth;
-      let t = a, r = t * s;
-      r > i && (t = i / s, r = i), this.width = this.canvas.width = t, this.height = this.canvas.height = r, this.context.drawImage(this.image, 0, 0, t, r);
-    });
-  }
-  /**
-   * Gets the most frequent colors in an image
-   * @param numColors Number of colors to return
-   * @param quality Artificially reduce number of pixels (higher = less accurate but faster)
-   * @returns Most frequent colors
-   */
-  async getPalette(e = 7, a = 10) {
-    const i = e <= 7 ? e : e + 1;
-    await this.waitForLoading();
-    const s = await this.createPixelArray(a);
-    if (!s) return null;
-    const t = y(s, i);
-    return t ? t.palette() : [];
-  }
-  /**
-   * Creates an array of pixels from the image
-   * Inspired by colorthief
-   * @param quality Artificially reduce number of pixels (higher = less accurate but faster)
-   * @returns
-   */
-  async createPixelArray(e) {
-    var t;
-    await this.waitForLoading();
-    const a = [], i = (t = await this.getImageData()) == null ? void 0 : t.data;
-    if (!i) return null;
-    const s = this.height * this.width;
-    for (let r = 0; r < s; r += e) {
-      const n = r * 4, [g, c, l, d] = [i[n + 0], i[n + 1], i[n + 2], i[n + 3]];
-      (typeof d > "u" || d >= 125) && (g > 250 && c > 250 && l > 250 || a.push([g, c, l]));
     }
-    return a;
-  }
-  /**
-   * Gets the image data from the canvas
-   */
-  async getImageData(e = 0, a = 0) {
-    try {
-      return await this.waitForLoading(), this.context.getImageData(e, a, this.width, this.height);
-    } catch {
-      throw new Error("Failed to get image data.");
+    /**
+     * Updates & loads the canvas image.
+     * Attempts to preserve aspect ratio based on width.
+     * @param width The canvas width
+     * @param height The canvas height
+     */
+    updateImage(imageURL, width, height) {
+        // Set URL
+        this.image.src = imageURL;
+        // Wait for image to load before calculating dimensions & drawing image to canvas
+        this.waitForLoading().then(() => {
+            // Calculate the new height based on the aspect ratio
+            const aspectRatio = this.image.naturalHeight / this.image.naturalWidth;
+            let newWidth = width;
+            let newHeight = newWidth * aspectRatio;
+            // Ensure the new height fits within the canvas height
+            if (newHeight > height) {
+                // Adjust width if height exceeds canvas height
+                newWidth = height / aspectRatio;
+                newHeight = height;
+            }
+            this.width = this.canvas.width = newWidth;
+            this.height = this.canvas.height = newHeight;
+            this.context.drawImage(this.image, 0, 0, newWidth, newHeight);
+        });
+    }
+    /**
+     * Gets the most frequent colors in an image
+     * @param numColors Number of colors to return
+     * @param quality Artificially reduce number of pixels (higher = less accurate but faster)
+     * @returns Most frequent colors
+     */
+    async getPalette(numColors = 7, quality = 10) {
+        /*
+        Quantize has an issue with number of colors which has been addressed here https://github.com/olivierlesnicki/quantize/issues/9
+        `nColors` is a simple fix for this.
+        */
+        const nColors = numColors <= 7 ? numColors : numColors + 1;
+        // Wait for image to load
+        await this.waitForLoading();
+        // Get an array of pixels
+        const pixels = await this.createPixelArray(quality);
+        if (!pixels)
+            return null;
+        // Reduce pixels array to a small number of the most common colors
+        const colorMap = quantize(pixels, nColors);
+        // Return palette
+        return colorMap ? colorMap.palette() : [];
+    }
+    /**
+     * Creates an array of pixels from the image
+     * Inspired by colorthief
+     * @param quality Artificially reduce number of pixels (higher = less accurate but faster)
+     * @returns
+     */
+    async createPixelArray(quality) {
+        await this.waitForLoading();
+        const pixelArray = [];
+        const imageData = (await this.getImageData())?.data;
+        if (!imageData)
+            return null;
+        // Get number of pixels in image
+        const pixelCount = this.height * this.width;
+        for (let i = 0; i < pixelCount; i += quality) {
+            // Offset to correct starting position of each pixel
+            const offset = i * 4;
+            const [r, g, b, a] = [imageData[offset + 0], imageData[offset + 1], imageData[offset + 2], imageData[offset + 3]];
+            // If pixel is mostly opaque and not white
+            if (typeof a === 'undefined' || a >= 125) {
+                if (!(r > 250 && g > 250 && b > 250)) {
+                    pixelArray.push([r, g, b]);
+                }
+            }
+        }
+        return pixelArray;
+    }
+    /**
+     * Gets the image data from the canvas
+     */
+    async getImageData(x = 0, y = 0) {
+        try {
+            await this.waitForLoading();
+            return this.context.getImageData(x, y, this.width, this.height);
+        }
+        catch (e) {
+            throw new Error('Failed to get image data.');
+        }
     }
-  }
 };
-o.styles = [
-  p`
-			:host {
-				display: block;
-			}
-			
-			/* Hide when width hasn't been set */
-			canvas:not([width]) {
-				display: none;
-			}
-
-			img {
-				display: none;
-			}
-		`
+CanvasImage.styles = [
+    css `
+			:host {
+				display: block;
+			}
+			
+			/* Hide when width hasn't been set */
+			canvas:not([width]) {
+				display: none;
+			}
+
+			img {
+				display: none;
+			}
+		`,
 ];
-h([
-  u("img")
-], o.prototype, "image", 2);
-h([
-  m({ type: String })
-], o.prototype, "imageURL", 2);
-h([
-  m({ type: Boolean })
-], o.prototype, "smoothing", 2);
-o = h([
-  f("canvas-image")
-], o);
-export {
-  o as CanvasImage
-};
+__decorate([
+    query('img')
+], CanvasImage.prototype, "image", void 0);
+__decorate([
+    property({ type: String })
+], CanvasImage.prototype, "imageURL", void 0);
+__decorate([
+    property({ type: Boolean })
+], CanvasImage.prototype, "smoothing", void 0);
+CanvasImage = __decorate([
+    customElement('canvas-image')
+], CanvasImage);
+export { CanvasImage };

package/dist/components/canvas/index.js

@@ -1,2 +1,2 @@
-import "./canvas-gradient.js";
-import "./canvas-image.js";
+import './canvas-gradient';
+import './canvas-image';