@alegendstale/holly-components 2.0.2 → 2.0.4

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

@@ -1,182 +1,117 @@
-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 { html as l } from "lit";
+import { query as d, property as p, customElement as f } from "lit/decorators.js";
+import w from "quantize";
+import { CanvasBase as c } from "./canvas-base.js";
+import y from "./canvas-image.styles.js";
+var v = Object.defineProperty, x = Object.getOwnPropertyDescriptor, h = (t, a, e, s) => {
+  for (var i = s > 1 ? void 0 : s ? x(a, e) : a, o = t.length - 1, n; o >= 0; o--)
+    (n = t[o]) && (i = (s ? n(a, e, i) : n(i)) || i);
+  return s && i && v(a, e, i), i;
 };
-import { html } from 'lit';
-import { customElement, property, query } from 'lit/decorators.js';
-import quantize from 'quantize';
-import { CanvasBase } from './canvas-base.js';
-import styles from './canvas-image.styles.js';
-const imageStatus = ['idle', 'loading', 'success', 'error'];
-/**
- * Utility component to make creating and retrieving image colors easier based on canvas coordinates.
- *
- * @dependency canvas-base
- */
-let CanvasImage = class CanvasImage extends CanvasBase {
-    constructor() {
-        super(...arguments);
-        /** The image URL. */
-        this.imageURL = '';
-        /** Whether to apply smoothing to the image generated by the canvas. */
-        this.smoothing = false;
-        /** The canvas width. */
-        this.width = 0;
-        /** The canvas height. */
-        this.height = 0;
-        /** @readonly Used to style the canvas based on its current state. */
-        this.status = 'idle';
-    }
-    static { this.styles = [...CanvasBase.styles, styles]; }
-    updated(_changedProperties) {
-        super.updated(_changedProperties);
-        if (_changedProperties.has('imageURL')) {
-            this.status = this.imageURL ? 'loading' : 'idle';
-        }
-        else if ((_changedProperties.has('width') || _changedProperties.has('height')) && this.status === 'success') {
-            this._performDraw();
-        }
-    }
-    get updateComplete() {
-        const _waitForImage = async () => {
-            await super.updateComplete;
-            if (this.status === 'loading') {
-                await new Promise((resolve) => {
-                    this.addEventListener('canvas-ready', resolve, { once: true });
-                });
-            }
-            if (this.status === 'error') {
-                throw new Error(`canvas-image failed to load ${this.imageURL}`);
-            }
-            return true;
-        };
-        return _waitForImage();
-    }
-    render() {
-        // Allows CORS requests for images from different domains
-        return html `
-			${super.render()}
-			<img
-				src=${this.imageURL}
-				crossorigin='anonymous'
-				@load=${() => this._performDraw()}
-				@error=${() => this._handleLoadError()}
-			>
+let r = class extends c {
+  constructor() {
+    super(...arguments), this.imageURL = "", this.smoothing = !1, this.width = 0, this.height = 0, this.status = "idle";
+  }
+  updated(t) {
+    super.updated(t), t.has("imageURL") ? this.status = this.imageURL ? "loading" : "idle" : (t.has("width") || t.has("height")) && this.status === "success" && this._performDraw();
+  }
+  get updateComplete() {
+    return (async () => {
+      if (await super.updateComplete, this.status === "loading" && await new Promise((a) => {
+        this.addEventListener("canvas-ready", a, { once: !0 });
+      }), this.status === "error")
+        throw new Error(`canvas-image failed to load ${this.imageURL}`);
+      return !0;
+    })();
+  }
+  render() {
+    return l`
+			${super.render()}
+			<img
+				src=${this.imageURL}
+				crossorigin='anonymous'
+				@load=${() => this._performDraw()}
+				@error=${() => this._handleLoadError()}
+			>
 		`;
+  }
+  /**
+   * Updates & loads the canvas image.
+   * Attempts to preserve aspect ratio based on width.
+   */
+  _performDraw() {
+    const t = this.image;
+    if (!t || !this.context) return;
+    const a = t.naturalHeight / t.naturalWidth;
+    let e = this.width, s = e * a;
+    s > this.height && (e = this.height / a, s = this.height), this.canvas.width = e, this.canvas.height = s, this.context.imageSmoothingEnabled = this.smoothing, this.context.drawImage(t, 0, 0, e, s), this.status = "success", this.dispatchEvent(new CustomEvent("canvas-ready"));
+  }
+  /** @internal Handle errors when the image fails to load. */
+  _handleLoadError() {
+    this.status = this.imageURL === "" ? "idle" : "error", this.dispatchEvent(new CustomEvent("canvas-ready"));
+  }
+  /**
+   * 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(t = 7, a = 10) {
+    const e = t <= 7 ? t : t + 1;
+    await this.updateComplete;
+    const s = await this.createPixelArray(a);
+    if (!s) return null;
+    const i = w(s, e);
+    return i ? i.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 Array of pixels
+   */
+  async createPixelArray(t) {
+    await this.updateComplete;
+    const a = [], e = (await this.getImageData())?.data;
+    if (!e) return null;
+    const s = this.height * this.width;
+    for (let i = 0; i < s; i += t) {
+      const o = i * 4, [n, m, u, g] = [e[o + 0], e[o + 1], e[o + 2], e[o + 3]];
+      (typeof g > "u" || g >= 125) && (n > 250 && m > 250 && u > 250 || a.push([n, m, u]));
     }
-    /**
-     * Updates & loads the canvas image.
-     * Attempts to preserve aspect ratio based on width.
-     */
-    _performDraw() {
-        const img = this.image;
-        if (!img || !this.context)
-            return;
-        // Calculate the new height based on the aspect ratio
-        const aspectRatio = img.naturalHeight / img.naturalWidth;
-        let drawWidth = this.width;
-        let drawHeight = drawWidth * aspectRatio;
-        // Ensure the new height fits within the canvas height
-        if (drawHeight > this.height) {
-            // Adjust width if height exceeds canvas height
-            drawWidth = this.height / aspectRatio;
-            drawHeight = this.height;
-        }
-        this.canvas.width = drawWidth;
-        this.canvas.height = drawHeight;
-        this.context.imageSmoothingEnabled = this.smoothing;
-        this.context.drawImage(img, 0, 0, drawWidth, drawHeight);
-        this.status = 'success';
-        this.dispatchEvent(new CustomEvent('canvas-ready'));
-    }
-    /** @internal Handle errors when the image fails to load. */
-    _handleLoadError() {
-        // Return to idle state if there is no URL.
-        this.status = this.imageURL === '' ? 'idle' : 'error';
-        this.dispatchEvent(new CustomEvent('canvas-ready'));
-    }
-    /**
-     * 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.updateComplete;
-        // 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 Array of pixels
-     */
-    async createPixelArray(quality) {
-        await this.updateComplete;
-        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.updateComplete;
-            return this.context.getImageData(x, y, this.canvas.width, this.canvas.height);
-        }
-        catch (e) {
-            throw new Error('Failed to get image data.');
-        }
+    return a;
+  }
+  /** Gets the image data from the canvas. */
+  async getImageData(t = 0, a = 0) {
+    try {
+      return await this.updateComplete, this.context.getImageData(t, a, this.canvas.width, this.canvas.height);
+    } catch {
+      throw new Error("Failed to get image data.");
     }
+  }
+};
+r.styles = [...c.styles, y];
+h([
+  d("img")
+], r.prototype, "image", 2);
+h([
+  p({ type: String })
+], r.prototype, "imageURL", 2);
+h([
+  p({ type: Boolean })
+], r.prototype, "smoothing", 2);
+h([
+  p({ type: Number })
+], r.prototype, "width", 2);
+h([
+  p({ type: Number })
+], r.prototype, "height", 2);
+h([
+  p({ type: String, reflect: !0, attribute: "data-status" })
+], r.prototype, "status", 2);
+r = h([
+  f("canvas-image")
+], r);
+export {
+  r 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);
-__decorate([
-    property({ type: Number })
-], CanvasImage.prototype, "width", void 0);
-__decorate([
-    property({ type: Number })
-], CanvasImage.prototype, "height", void 0);
-__decorate([
-    property({ type: String, reflect: true, attribute: 'data-status' })
-], CanvasImage.prototype, "status", void 0);
-CanvasImage = __decorate([
-    customElement('canvas-image')
-], CanvasImage);
-export { CanvasImage };

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

@@ -1,21 +1,24 @@
-import { css } from 'lit';
-export default css `
-	:host {
-		display: block;
-	}
-
-	:host([data-status='error']) {
-		width: 100px;
-		height: 100px;
-		border: 2px solid red;
-	}
-
-	/* Hide when width hasn't been set */
-	canvas:not([width]) {
-		display: none;
-	}
-
-	img {
-		display: none;
-	}
+import { css as s } from "lit";
+const e = s`
+	:host {
+		display: block;
+	}
+
+	:host([data-status='error']) {
+		width: 100px;
+		height: 100px;
+		border: 2px solid red;
+	}
+
+	/* Hide when width hasn't been set */
+	canvas:not([width]) {
+		display: none;
+	}
+
+	img {
+		display: none;
+	}
 `;
+export {
+  e as default
+};

package/dist/components/carousel-scroller/carousel-scroller.js

@@ -1,90 +1,66 @@
-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 { LitElement as c, html as d } from "lit";
+import { query as u, customElement as a } from "lit/decorators.js";
+import { EventEmitter as m } from "../../utils/EventEmitter.js";
+import S from "./carousel-scroller.styles.js";
+var _ = Object.defineProperty, p = Object.getOwnPropertyDescriptor, h = (e, s, r, l) => {
+  for (var t = l > 1 ? void 0 : l ? p(s, r) : s, o = e.length - 1, n; o >= 0; o--)
+    (n = e[o]) && (t = (l ? n(s, r, t) : n(t)) || t);
+  return l && t && _(s, r, t), t;
 };
-import { html, LitElement } from 'lit';
-import { customElement, query } from 'lit/decorators.js';
-import { EventEmitter } from '../../utils/EventEmitter.js';
-import styles from './carousel-scroller.styles.js';
-/**
- * A carousel which can have any number of slides, and rotates circularly.
- *
- * @cssprop {<length>} --padding - The size of the scroller padding.
- * @cssprop {<length>} --margin - The size of the scroller margin.
- */
-let CarouselScroller = class CarouselScroller extends LitElement {
-    static { this.styles = [styles]; }
-    constructor() {
-        super();
-        /** The slides being used. */
-        this.slotChildren = [];
-        /** Public way to subscribe to events. */
-        this.emitter = new EventEmitter();
-        /** @internal */
-        this._currentSlide = 0;
-        /** @internal */
-        this.debouncers = new WeakMap();
-        this.emitter.on('slotsLoaded', (slotChildren) => {
-            this.slotChildren = slotChildren;
-        });
-    }
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        this.emitter.clear();
-    }
-    render() {
-        return html `
-			<div class="container">
-				<button @click=${this.scrollToPrevSlide}><</button>
-				<button @click=${this.scrollToNextSlide}>></button>
-				<div>
-					<slot @slotchange=${this.slotChange}></slot>
-				</div>
-			</div>
+let i = class extends c {
+  constructor() {
+    super(), this.slotChildren = [], this.emitter = new m(), this._currentSlide = 0, this.debouncers = /* @__PURE__ */ new WeakMap(), this.emitter.on("slotsLoaded", (e) => {
+      this.slotChildren = e;
+    });
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this.emitter.clear();
+  }
+  render() {
+    return d`
+			<div class="container">
+				<button @click=${this.scrollToPrevSlide}><</button>
+				<button @click=${this.scrollToNextSlide}>></button>
+				<div>
+					<slot @slotchange=${this.slotChange}></slot>
+				</div>
+			</div>
 		`;
-    }
-    /** Gets the current slide.
-     * @returns HTMLElement
-     */
-    getCurrentSlide() {
-        return this.slotChildren[this._currentSlide - 1];
-    }
-    /** Scrolls to the slide before the current slide. */
-    scrollToPrevSlide() {
-        this._currentSlide =
-            this._currentSlide === 0
-                ? (this._currentSlide = this.slotChildren.length - 1)
-                : this._currentSlide - 1;
-        this.slotChildren
-            .at(this._currentSlide)
-            ?.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
-    }
-    /** Scrolls to the slide after the current slide. */
-    scrollToNextSlide() {
-        this._currentSlide =
-            this._currentSlide === this.slotChildren.length - 1
-                ? 0
-                : this._currentSlide + 1;
-        this.slotChildren
-            .at(this._currentSlide)
-            ?.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
-    }
-    /** @internal */
-    slotChange() {
-        const slotElements = Array.from(this.slotEl
-            .assignedElements()
-            .map((element) => element));
-        clearTimeout(this.debouncers.get(this.slotEl));
-        const timeoutId = setTimeout(() => this.emitter.emit('slotsLoaded', slotElements), 100);
-        this.debouncers.set(this.slotEl, timeoutId);
-    }
+  }
+  /** Gets the current slide.
+   * @returns HTMLElement
+   */
+  getCurrentSlide() {
+    return this.slotChildren[this._currentSlide - 1];
+  }
+  /** Scrolls to the slide before the current slide. */
+  scrollToPrevSlide() {
+    this._currentSlide = this._currentSlide === 0 ? this._currentSlide = this.slotChildren.length - 1 : this._currentSlide - 1, this.slotChildren.at(this._currentSlide)?.scrollIntoView({ behavior: "smooth", block: "nearest" });
+  }
+  /** Scrolls to the slide after the current slide. */
+  scrollToNextSlide() {
+    this._currentSlide = this._currentSlide === this.slotChildren.length - 1 ? 0 : this._currentSlide + 1, this.slotChildren.at(this._currentSlide)?.scrollIntoView({ behavior: "smooth", block: "nearest" });
+  }
+  /** @internal */
+  slotChange() {
+    const e = Array.from(
+      this.slotEl.assignedElements().map((r) => r)
+    );
+    clearTimeout(this.debouncers.get(this.slotEl));
+    const s = setTimeout(
+      () => this.emitter.emit("slotsLoaded", e),
+      100
+    );
+    this.debouncers.set(this.slotEl, s);
+  }
+};
+i.styles = [S];
+h([
+  u("slot")
+], i.prototype, "slotEl", 2);
+i = h([
+  a("carousel-scroller")
+], i);
+export {
+  i as CarouselScroller
 };
-__decorate([
-    query('slot')
-], CarouselScroller.prototype, "slotEl", void 0);
-CarouselScroller = __decorate([
-    customElement('carousel-scroller')
-], CarouselScroller);
-export { CarouselScroller };

package/dist/components/carousel-scroller/carousel-scroller.styles.js

@@ -1,66 +1,69 @@
-import { css } from 'lit';
-export default css `
-	:host {
-		--padding: 40px;
-		--margin: 80px;
-	}
-
-	.container {
-		width: 600px;
-		height: 400px;
-		margin: 20px;
-		border-radius: 20px;
-		overflow: hidden;
-		position: relative;
-
-		& > button {
-			position: absolute;
-			width: var(--padding);
-			height: calc(var(--padding) * 2);
-			z-index: 1;
-			background-color: #00000080;
-			border: none;
-			bottom: calc(50% - var(--padding));
-			font-size: 32px;
-
-			&:hover {
-				background-color: #6352b880;
-			}
-
-			&:nth-child(1) {
-				left: 0;
-				border-top-right-radius: 314px;
-				border-bottom-right-radius: 314px;
-			}
-
-			&:nth-child(2) {
-				right: 0;
-				border-top-left-radius: 314px;
-				border-bottom-left-radius: 314px;
-			}
-		}
-
-		& > div {
-			display: flex;
-			overflow-x: scroll;
-			position: relative;
-			scroll-behavior: smooth;
-			scroll-snap-type: x mandatory;
-			scrollbar-width: none;
-			padding: 0 var(--padding);
-		}
-
-		::slotted(*) {
-			display: flex;
-			flex-direction: column;
-			justify-content: center;
-			min-height: calc(400px - var(--margin));
-			min-width: calc(600px - var(--margin));
-			max-height: calc(400px - var(--margin));
-			max-width: calc(600px - var(--margin));
-			background: white;
-			scroll-snap-align: center;
-			padding: calc(var(--margin) / 2);
-		}
-	}
+import { css as r } from "lit";
+const o = r`
+	:host {
+		--padding: 40px;
+		--margin: 80px;
+	}
+
+	.container {
+		width: 600px;
+		height: 400px;
+		margin: 20px;
+		border-radius: 20px;
+		overflow: hidden;
+		position: relative;
+
+		& > button {
+			position: absolute;
+			width: var(--padding);
+			height: calc(var(--padding) * 2);
+			z-index: 1;
+			background-color: #00000080;
+			border: none;
+			bottom: calc(50% - var(--padding));
+			font-size: 32px;
+
+			&:hover {
+				background-color: #6352b880;
+			}
+
+			&:nth-child(1) {
+				left: 0;
+				border-top-right-radius: 314px;
+				border-bottom-right-radius: 314px;
+			}
+
+			&:nth-child(2) {
+				right: 0;
+				border-top-left-radius: 314px;
+				border-bottom-left-radius: 314px;
+			}
+		}
+
+		& > div {
+			display: flex;
+			overflow-x: scroll;
+			position: relative;
+			scroll-behavior: smooth;
+			scroll-snap-type: x mandatory;
+			scrollbar-width: none;
+			padding: 0 var(--padding);
+		}
+
+		::slotted(*) {
+			display: flex;
+			flex-direction: column;
+			justify-content: center;
+			min-height: calc(400px - var(--margin));
+			min-width: calc(600px - var(--margin));
+			max-height: calc(400px - var(--margin));
+			max-width: calc(600px - var(--margin));
+			background: white;
+			scroll-snap-align: center;
+			padding: calc(var(--margin) / 2);
+		}
+	}
 `;
+export {
+  o as default
+};