@alegendstale/holly-components 2.0.3 → 2.0.4

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

@@ -1,115 +1,118 @@
-import { css } from 'lit';
-export default css `
-	:host {
-		contain: content;
-		overscroll-behavior-block: none;
-		--height: fit-content;
-	}
-
-	:host([dragging]) dialog {
-		#content {
-			cursor: grabbing;
-			/* Important! Prevents mobile browsers from reclaiming PointerMove event on touch devices */
-			touch-action: none;
-			/* Prevent weird scrollbar movement on mobile when dragging */
-			overflow-y: hidden;
-		}
-	}
-
-	:host(:not([dragging])) dialog {
-		/* Only animate if not dragging */
-		transition-property: overlay opacity display;
-		transition-duration: 0.25s;
-		transition-behavior: allow-discrete;
-
-		&::backdrop {
-			transition-property: overlay opacity display;
-			transition-duration: 0.25s;
-			transition-behavior: allow-discrete;
-		}
-
-		#content {
-			/* Allow scroll */
-			touch-action: pan-y;
-		}
-	}
-
-	dialog {
-		display: none;
-		opacity: 0;
-		translate: 0 var(--height);
-
-		height: var(--height);
-		min-height: 0;
-		max-height: 100%;
-		min-width: 100%;
-		max-width: 100%;
-		flex-direction: column;
-		box-sizing: border-box;
-		padding: 0;
-		border: 0;
-		background-color: light-dark(#d9d9d9, #1c1c1c);
-		/* Important! Removes default browser styling, allowing bottom to work */
-		inset: unset;
-		bottom: 0;
-		left: 0;
-		overflow-y: hidden;
-
-		/* Important! Prevents mobile browsers from reclaiming PointerMove event on touch devices */
-		touch-action: none;
-		/* Prevent weird scrollbar movement on mobile when dragging */
-		overflow-y: hidden;
-
-		&[open] {
-			display: flex;
-			opacity: 1;
-			translate: 0 0;
-
-			&::backdrop {
-				opacity: 0.8;
-			}
-		}
-
-		&::backdrop {
-			background: black;
-			opacity: 0;
-		}
-	}
-
-	@starting-style {
-		dialog[open] {
-			opacity: 0;
-			translate: 0 var(--height);
-
-			&::backdrop {
-				opacity: 0;
-			}
-		}
-	}
-
-	#handle {
-		display: block;
-		position: sticky;
-		top: 0;
-		background: transparent;
-		border: 0;
-		cursor: grabbing;
-		min-height: 35px;
-		user-select: none;
-		touch-action: none;
-	}
-
-	div {
-		/* display: contents; */
-		overflow-y: auto;
-		scrollbar-width: none;
-		box-sizing: border-box;
-		min-height: 100%;
-		min-width: 100%;
-	}
-
-	::slotted(*) {
-		/* Prevent slotted items from taking pointer events */
-		/* pointer-events: none; */
-	}
+import { css as o } from "lit";
+const e = o`
+	:host {
+		contain: content;
+		overscroll-behavior-block: none;
+		--height: fit-content;
+	}
+
+	:host([dragging]) dialog {
+		#content {
+			cursor: grabbing;
+			/* Important! Prevents mobile browsers from reclaiming PointerMove event on touch devices */
+			touch-action: none;
+			/* Prevent weird scrollbar movement on mobile when dragging */
+			overflow-y: hidden;
+		}
+	}
+
+	:host(:not([dragging])) dialog {
+		/* Only animate if not dragging */
+		transition-property: overlay opacity display;
+		transition-duration: 0.25s;
+		transition-behavior: allow-discrete;
+
+		&::backdrop {
+			transition-property: overlay opacity display;
+			transition-duration: 0.25s;
+			transition-behavior: allow-discrete;
+		}
+
+		#content {
+			/* Allow scroll */
+			touch-action: pan-y;
+		}
+	}
+
+	dialog {
+		display: none;
+		opacity: 0;
+		translate: 0 var(--height);
+
+		height: var(--height);
+		min-height: 0;
+		max-height: 100%;
+		min-width: 100%;
+		max-width: 100%;
+		flex-direction: column;
+		box-sizing: border-box;
+		padding: 0;
+		border: 0;
+		background-color: light-dark(#d9d9d9, #1c1c1c);
+		/* Important! Removes default browser styling, allowing bottom to work */
+		inset: unset;
+		bottom: 0;
+		left: 0;
+		overflow-y: hidden;
+
+		/* Important! Prevents mobile browsers from reclaiming PointerMove event on touch devices */
+		touch-action: none;
+		/* Prevent weird scrollbar movement on mobile when dragging */
+		overflow-y: hidden;
+
+		&[open] {
+			display: flex;
+			opacity: 1;
+			translate: 0 0;
+
+			&::backdrop {
+				opacity: 0.8;
+			}
+		}
+
+		&::backdrop {
+			background: black;
+			opacity: 0;
+		}
+	}
+
+	@starting-style {
+		dialog[open] {
+			opacity: 0;
+			translate: 0 var(--height);
+
+			&::backdrop {
+				opacity: 0;
+			}
+		}
+	}
+
+	#handle {
+		display: block;
+		position: sticky;
+		top: 0;
+		background: transparent;
+		border: 0;
+		cursor: grabbing;
+		min-height: 35px;
+		user-select: none;
+		touch-action: none;
+	}
+
+	div {
+		/* display: contents; */
+		overflow-y: auto;
+		scrollbar-width: none;
+		box-sizing: border-box;
+		min-height: 100%;
+		min-width: 100%;
+	}
+
+	::slotted(*) {
+		/* Prevent slotted items from taking pointer events */
+		/* pointer-events: none; */
+	}
 `;
+export {
+  e as default
+};

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

@@ -1,10 +1,13 @@
 import { EventEmitter } from '../../utils/EventEmitter.js';
 import { LitElement } from 'lit';
-import { client } from '../../utils/types.js';
 type EventMap = {
     click: [hex: string];
     move: [e: client];
 };
+type client = {
+    x: number;
+    y: number;
+};
 /**
  * Utility component to help with creating canvases.
  */

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,6BAA6B,CAAC;AAE3D,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAE5C,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAE9C,KAAK,QAAQ,GAAG;IACf,KAAK,EAAE,CAAC,GAAG,EAAE,MAAM,CAAC,CAAC;IACrB,IAAI,EAAE,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC;CAClB,CAAC;AAEF;;GAEG;AACH,qBACa,UAAW,SAAQ,UAAU;IACzC,MAAM,CAAC,MAAM,4BAMX;IAEF,0BAA0B;IAE1B,SAAS,CAAC,MAAM,EAAG,iBAAiB,CAAC;IAErC,0BAA0B;IAC1B,SAAS,CAAC,OAAO,EAAG,wBAAwB,CAAC;IAE7C,yCAAyC;IAClC,OAAO,EAAE,YAAY,CAAC,QAAQ,CAAC,CAAgC;IAEtE,oBAAoB,IAAI,IAAI;IAK5B,MAAM;IAqBN,iDAAiD;IAC1C,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,6BAA6B,CAAC;AAE3D,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAG5C,KAAK,QAAQ,GAAG;IACf,KAAK,EAAE,CAAC,GAAG,EAAE,MAAM,CAAC,CAAC;IACrB,IAAI,EAAE,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC;CAClB,CAAC;AAEF,KAAK,MAAM,GAAG;IACb,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;CACV,CAAA;AAED;;GAEG;AACH,qBACa,UAAW,SAAQ,UAAU;IACzC,MAAM,CAAC,MAAM,4BAMX;IAEF,0BAA0B;IAE1B,SAAS,CAAC,MAAM,EAAG,iBAAiB,CAAC;IAErC,0BAA0B;IAC1B,SAAS,CAAC,OAAO,EAAG,wBAAwB,CAAC;IAE7C,yCAAyC;IAClC,OAAO,EAAE,YAAY,CAAC,QAAQ,CAAC,CAAgC;IAEtE,oBAAoB,IAAI,IAAI;IAK5B,MAAM;IAqBN,iDAAiD;IAC1C,YAAY,CAAC,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM;CAWpD"}

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

@@ -1,71 +1,55 @@
-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 m from "../../utils/colorsea-wrapper.js";
+import { EventEmitter as h } from "../../utils/EventEmitter.js";
+import { ref as u } from "lit/directives/ref.js";
+import { css as f, LitElement as x, html as d } from "lit";
+import { query as g, customElement as C } from "lit/decorators.js";
+var y = 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 && y(e, r, t), t;
 };
-import colorsea from '../../utils/colorsea-wrapper.js';
-import { EventEmitter } from '../../utils/EventEmitter.js';
-import { ref } from 'lit/directives/ref.js';
-import { LitElement, html, css } from 'lit';
-import { customElement, query } from 'lit/decorators.js';
-/**
- * Utility component to help with creating canvases.
- */
-let CanvasBase = class CanvasBase extends LitElement {
-    constructor() {
-        super(...arguments);
-        /** Public way to subscribe to events. */
-        this.emitter = new EventEmitter();
-    }
-    static { this.styles = [
-        css `
-			:host {
-				display: block;
-			}
-		`
-    ]; }
-    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))}
+let c = class extends x {
+  constructor() {
+    super(...arguments), this.emitter = new h();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this.emitter.clear();
+  }
+  render() {
+    return d`
+			<canvas
+				@click=${(e) => this.emitter.emit("click", this.getCanvasHex(e.clientX, e.clientY))}
 				@pointermove=${(e) => {
-            // Track only the first touch
-            if (!e.isPrimary)
-                return;
-            this.emitter.emit('move', { x: e.clientX, y: e.clientY });
-        }}
-				${ref(canvasRef)}
-			>
-			</canvas>
+      e.isPrimary && this.emitter.emit("move", { x: e.clientX, y: e.clientY });
+    }}
+				${u((e) => {
+      e instanceof HTMLCanvasElement && (this.context = e.getContext("2d", { willReadFrequently: !0, alpha: !0 }));
+    })}
+			>
+			</canvas>
 		`;
-    }
-    /** 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;
-    }
+  }
+  /** 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();
+  }
+};
+c.styles = [
+  f`
+			:host {
+				display: block;
+			}
+		`
+];
+v([
+  g("canvas")
+], c.prototype, "canvas", 2);
+c = v([
+  C("canvas-base")
+], c);
+export {
+  c as CanvasBase
 };
-__decorate([
-    query('canvas')
-], CanvasBase.prototype, "canvas", void 0);
-CanvasBase = __decorate([
-    customElement('canvas-base')
-], CanvasBase);
-export { CanvasBase };

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

@@ -1,71 +1,46 @@
-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 { Direction as h } from "../color-palette/color-palette-utils.js";
+import { property as c, customElement as f } from "lit/decorators.js";
+import { CanvasBase as d } from "./canvas-base.js";
+import { isColorValid as u } from "../../utils/basicUtils.js";
+var m = Object.defineProperty, y = Object.getOwnPropertyDescriptor, p = (r, e, o, s) => {
+  for (var t = s > 1 ? void 0 : s ? y(e, o) : e, n = r.length - 1, a; n >= 0; n--)
+    (a = r[n]) && (t = (s ? a(e, o, t) : a(t)) || t);
+  return s && t && m(e, o, t), t;
 };
-import { Direction } from '../color-palette/color-palette-utils.js';
-import { customElement, property } from 'lit/decorators.js';
-import { CanvasBase } from './canvas-base.js';
-import { isColorValid } from '../../utils/basicUtils.js';
-/**
- * Utility component to make creating and retrieving gradient colors easier based on canvas coordinates.
- *
- * @dependency canvas-base
- */
-let CanvasGradient = class CanvasGradient extends CanvasBase {
-    constructor() {
-        super(...arguments);
-        /** An array of the colors that will make the gradient. */
-        this.colors = [];
-        /** The height of the gradient canvas. */
-        this.height = 0;
-        /** The width of the gradient canvas. */
-        this.width = 0;
-        /** The direction the gradient will face. (Column or Row) */
-        this.direction = Direction.Column;
-    }
-    static { this.styles = [...CanvasBase.styles]; }
-    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');
-    }
+let i = class extends d {
+  constructor() {
+    super(...arguments), this.colors = [], this.height = 0, this.width = 0, this.direction = h.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, s) {
+    if (!this.context) return;
+    this.canvas.height = e, this.canvas.width = o;
+    let t = s === h.Column ? this.context.createLinearGradient(0, 0, o, 0) : this.context.createLinearGradient(0, 0, 0, e), n = [];
+    for (const [a, l] of r.entries())
+      u(l) && (t.addColorStop(a / (r.length - 1), l), n.push(l));
+    if (n.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");
+  }
+};
+i.styles = [...d.styles];
+p([
+  c({ type: Array })
+], i.prototype, "colors", 2);
+p([
+  c({ type: Number })
+], i.prototype, "height", 2);
+p([
+  c({ type: Number })
+], i.prototype, "width", 2);
+p([
+  c({ type: String })
+], i.prototype, "direction", 2);
+i = p([
+  f("canvas-gradient")
+], i);
+export {
+  i as CanvasGradient
 };
-__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 };