@alegendstale/holly-components 2.0.2 → 2.0.4

package/dist/components/color-palette/color-palette.js

@@ -1,393 +1,259 @@
-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 I, html as c, nothing as S } from "lit";
+import { query as C, property as n, state as $, customElement as x } from "lit/decorators.js";
+import { styleMap as y } from "lit/directives/style-map.js";
+import { repeat as N } from "lit/directives/repeat.js";
+import { defaultSettings as u, Status as l, parseColors as w, PaletteError as v, Direction as _ } from "./color-palette-utils.js";
+import { ColorPaletteItem as T } from "./item/color-palette-item.js";
+import { copyToClipboard as m } from "../../utils/basicUtils.js";
+import { EventEmitter as b } from "../../utils/EventEmitter.js";
+import { CanvasGradient as A } from "../canvas/canvas-gradient.js";
+import { classMap as D } from "lit/directives/class-map.js";
+import { ColorPaletteItemEdit as M } from "./item/color-palette-item-edit.js";
+import { ref as g, createRef as P } from "lit/directives/ref.js";
+import L from "./color-palette.styles.js";
+var E = Object.defineProperty, O = Object.getOwnPropertyDescriptor, o = (t, e, s, a) => {
+  for (var i = a > 1 ? void 0 : a ? O(e, s) : e, h = t.length - 1, p; h >= 0; h--)
+    (p = t[h]) && (i = (a ? p(e, s, i) : p(i)) || i);
+  return a && i && E(e, s, i), i;
 };
-import { LitElement, html, nothing } from 'lit';
-import { customElement, property, query, state } from 'lit/decorators.js';
-import { styleMap } from 'lit/directives/style-map.js';
-import { repeat } from 'lit/directives/repeat.js';
-import { defaultSettings, Direction, PaletteError, parseColors, Status } from './color-palette-utils.js';
-import { ColorPaletteItem } from './item/color-palette-item.js';
-import { copyToClipboard } from '../../utils/basicUtils.js';
-import { EventEmitter } from '../../utils/EventEmitter.js';
-import { CanvasGradient } from '../canvas/canvas-gradient.js';
-import { classMap } from 'lit/directives/class-map.js';
-import { ColorPaletteItemEdit } from './item/color-palette-item-edit.js';
-import { createRef, ref } from 'lit/directives/ref.js';
-import styles from './color-palette.styles.js';
-/**
- * A component which can display colors in various ways.
- *
- * @cssprop {<length>} --palette-height - The height of the palette.
- * @cssprop {<length> } --palette-width - The width of the palette.
- * @cssprop {<color>} --palette-background-color - The background color of the palette.
- * @cssprop {<color>} --palette-color - The color of the palette.
- * @cssprop {<length>} --palette-column-flex-basis - The flex size for palette items.
- * @cssprop {<length>} --palette-corners - The radius of the palette corners.
- */
-let ColorPalette = class ColorPalette extends LitElement {
-    constructor() {
-        super(...arguments);
-        /** @internal */
-        this._editMode = false;
-        /** The input colors the palette will display. */
-        this.colors = [];
-        // Settings
-        /**
-         * The height of the palette.
-         * @default 150
-        */
-        this.height = defaultSettings.height;
-        /**
-         * The width of the palette.
-         * @default 700
-        */
-        this.width = defaultSettings.width;
-        /**
-         * The direction the palette colors will face.
-         * @default column
-        */
-        this.direction = defaultSettings.direction;
-        /** Whether the colors will appear as a gradient. */
-        this.gradient = false;
-        /** Whether hovering over the palette is allowed. */
-        this.preventHover = false;
-        /** Whether the text on each color is shown. */
-        this.hideText = false;
-        /** Whether the input bypasses validation checks. */
-        this.override = false;
-        /** The aliases for each color. */
-        this.aliases = [];
-        /** The maximum width of the container. (So that the palette doesn't expand past its bounds) */
-        this.maxWidth = 0;
-        /** The current status of the palette. */
-        this.status = Status.VALID;
-        /** @internal Whether the palette should pulse on error. */
-        this.pulse = false;
-        /** Public way to subscribe to events. */
-        this.emitter = new EventEmitter();
-        /** Extended settings */
-        this.pluginSettings = defaultSettings;
-    }
-    static { this.styles = [styles]; }
-    /**
-     * Whether the palette can be edited.
-     * @type {boolean}
-     * @default false
-    */
-    set editMode(val) {
-        this._editMode = val;
-        this.emitter.emit('editMode', val);
-    }
-    get editMode() {
-        return this._editMode;
-    }
-    /** Helper accessor for settings */
-    set settings({ height, width, direction, gradient, preventHover, override, aliases }) {
-        this.height = height;
-        this.width = width;
-        this.direction = direction;
-        this.gradient = gradient;
-        this.preventHover = preventHover;
-        this.override = override;
-        this.aliases = aliases;
-    }
-    get settings() {
-        return {
-            height: this.height,
-            width: this.width,
-            direction: this.direction,
-            gradient: this.gradient,
-            preventHover: this.preventHover,
-            hideText: this.hideText,
-            override: this.override,
-            aliases: this.aliases,
-        };
-    }
-    connectedCallback() {
-        super.connectedCallback();
-        // Pulse the Invalid Palette to show its location
-        if (this.pluginSettings.errorPulse) {
-            this.pulse = true;
-            setTimeout(() => {
-                this.pulse = false;
-            }, this.pluginSettings.noticeDuration);
-        }
-    }
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        this.emitter.clear();
-    }
-    willUpdate(_changedProperties) {
-        super.willUpdate(_changedProperties);
-        this.setStatusAndColors();
-    }
-    /** Sets the current status and parses colors. */
-    setStatusAndColors() {
-        const isSettingsValid = () => {
-            return (!isNaN(this.height)
-                && !isNaN(this.width)
-                && Object.values(Direction).includes(this.direction)
-                && this.gradient != null
-                && this.preventHover != null
-                && this.hideText != null
-                && this.override != null
-                && (this.aliases instanceof Array
-                    || typeof this.aliases === 'undefined'));
-        };
-        const colorsResult = parseColors(this.colors, this.override);
-        if (!isSettingsValid()) {
-            this.status = Status.INVALID_SETTINGS;
-        }
-        // Set status to invalid if parsedColors returns a status, or if parsedColors returns an empty array
-        if (typeof colorsResult === 'string' || (typeof colorsResult === 'object' && colorsResult.length === 0)) {
-            this.status = this.status === Status.INVALID_SETTINGS ? Status.INVALID_COLORS_AND_SETTINGS : Status.INVALID_COLORS;
-        }
-        if (typeof colorsResult === 'object') {
-            this.colors = colorsResult;
-        }
-        if (this.colors.length <= 1 && this.gradient)
-            this.status = Status.INVALID_GRADIENT;
-    }
-    render() {
-        const paletteStyles = {
-            // Set default corner style
-            '--palette-corners': this.pluginSettings.corners ? '5px' : '0px',
-            '--palette-height': `${this.height}px`,
-            '--palette-width': `${this.getPaletteWidth()}px`,
-            '--palette-column-flex-basis': `${(this.height / this.colors.length / 2)}px`
-        };
-        const invalidStyles = {
-            animation: this.pulse ? `pulse ${this.pluginSettings.noticeDuration / 1000 / 2}s infinite` : ''
-        };
-        const paletteClasses = {
-            "palette-scroll": this.width > defaultSettings.width,
-        };
-        return html `
-			<div 
-				id="palette" 
-				class=${classMap(paletteClasses)}
-				style=${this.status === Status.VALID ? styleMap(paletteStyles) : styleMap(invalidStyles)}
-			>
-				${this.createPalette()}
-			</div>
+let r = class extends I {
+  constructor() {
+    super(...arguments), this._editMode = !1, this.colors = [], this.height = u.height, this.width = u.width, this.direction = u.direction, this.gradient = !1, this.preventHover = !1, this.hideText = !1, this.override = !1, this.aliases = [], this.maxWidth = 0, this.status = l.VALID, this.pulse = !1, this.emitter = new b(), this.pluginSettings = u;
+  }
+  set editMode(t) {
+    this._editMode = t, this.emitter.emit("editMode", t);
+  }
+  get editMode() {
+    return this._editMode;
+  }
+  /** Helper accessor for settings */
+  set settings({ height: t, width: e, direction: s, gradient: a, preventHover: i, override: h, aliases: p }) {
+    this.height = t, this.width = e, this.direction = s, this.gradient = a, this.preventHover = i, this.override = h, this.aliases = p;
+  }
+  get settings() {
+    return {
+      height: this.height,
+      width: this.width,
+      direction: this.direction,
+      gradient: this.gradient,
+      preventHover: this.preventHover,
+      hideText: this.hideText,
+      override: this.override,
+      aliases: this.aliases
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.pluginSettings.errorPulse && (this.pulse = !0, setTimeout(() => {
+      this.pulse = !1;
+    }, this.pluginSettings.noticeDuration));
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this.emitter.clear();
+  }
+  willUpdate(t) {
+    super.willUpdate(t), this.setStatusAndColors();
+  }
+  /** Sets the current status and parses colors. */
+  setStatusAndColors() {
+    const t = () => !isNaN(this.height) && !isNaN(this.width) && Object.values(_).includes(this.direction) && this.gradient != null && this.preventHover != null && this.hideText != null && this.override != null && (this.aliases instanceof Array || typeof this.aliases > "u"), e = w(this.colors, this.override);
+    t() || (this.status = l.INVALID_SETTINGS), (typeof e == "string" || typeof e == "object" && e.length === 0) && (this.status = this.status === l.INVALID_SETTINGS ? l.INVALID_COLORS_AND_SETTINGS : l.INVALID_COLORS), typeof e == "object" && (this.colors = e), this.colors.length <= 1 && this.gradient && (this.status = l.INVALID_GRADIENT);
+  }
+  render() {
+    const t = {
+      // Set default corner style
+      "--palette-corners": this.pluginSettings.corners ? "5px" : "0px",
+      "--palette-height": `${this.height}px`,
+      "--palette-width": `${this.getPaletteWidth()}px`,
+      "--palette-column-flex-basis": `${this.height / this.colors.length / 2}px`
+    }, e = {
+      animation: this.pulse ? `pulse ${this.pluginSettings.noticeDuration / 1e3 / 2}s infinite` : ""
+    }, s = {
+      "palette-scroll": this.width > u.width
+    };
+    return c`
+			<div 
+				id="palette" 
+				class=${D(s)}
+				style=${this.status === l.VALID ? y(t) : y(e)}
+			>
+				${this.createPalette()}
+			</div>
 		`;
+  }
+  /** @returns `user` OR `auto` width based on which is more appropriate. */
+  getPaletteWidth() {
+    return this.maxWidth < this.settings.width && this.maxWidth > 0 ? this.maxWidth : this.settings.width;
+  }
+  /** Creates a color palette or gradient palette depending on settings. */
+  createPalette() {
+    try {
+      if (this.status === l.VALID)
+        return this.gradient ? this.createGradient() : this.createColors();
+      throw new v(this.status);
+    } catch (t) {
+      return t instanceof v ? (this.emitter.emit("notice", t.message), this.createInvalidPalette(t.status, t.message)) : S;
     }
-    /** @returns `user` OR `auto` width based on which is more appropriate. */
-    getPaletteWidth() {
-        // Automatically set width if offset is less than settings width
-        if (this.maxWidth < this.settings.width && this.maxWidth > 0)
-            return this.maxWidth;
-        // Set user-set width
-        else
-            return this.settings.width;
-    }
-    /** Creates a color palette or gradient palette depending on settings. */
-    createPalette() {
-        try {
-            if (this.status === Status.VALID) {
-                if (this.gradient)
-                    return this.createGradient();
-                else
-                    return this.createColors();
-            }
-            else {
-                // Throw error & create Invalid Palette
-                throw new PaletteError(this.status);
-            }
-        }
-        catch (err) {
-            if (!(err instanceof PaletteError))
-                return nothing;
-            this.emitter.emit('notice', err.message);
-            return this.createInvalidPalette(err.status, err.message);
-        }
-    }
-    ;
-    /** Create a color palette. */
-    createColors() {
-        return html `
-			${repeat(this.colors, (color, index) => {
-            let itemRef = (item) => {
-                if (!(item instanceof ColorPaletteItem))
-                    return;
-                item.emitter.clear();
-                item.emitter.on('click', async (e) => await copyToClipboard(color.toUpperCase(), this.pluginSettings.copyFormat));
-            };
-            let itemEditRef = (item) => {
-                if (!(item instanceof ColorPaletteItemEdit))
-                    return;
-                item.emitter.clear();
-                item.emitter.on('click', async (e) => await copyToClipboard(color.toUpperCase(), this.pluginSettings.copyFormat));
-                item.emitter.on('trash', (e) => {
-                    e.stopPropagation();
-                    const deletedIndex = this.colors.indexOf(color);
-                    this.colors = this.colors.filter((_, index) => index !== deletedIndex);
-                    this.aliases = this.aliases.filter((_, index) => index !== deletedIndex);
-                    this.emitter.emit('changed', this.colors, this.settings);
-                });
-                item.emitter.on('alias', (alias) => {
-                    // Get the index of the alias relative to the PaletteItem color
-                    const aliasIndex = this.colors.findIndex((val) => val === color);
-                    for (let i = 0; i < aliasIndex; i++) {
-                        // Set empty strings to empty indexes
-                        if (!this.aliases[i])
-                            this.aliases[i] = '';
-                    }
-                    // Set modified alias index
-                    this.aliases[aliasIndex] = alias;
-                    this.emitter.emit('changed', this.colors, this.settings);
-                });
-            };
-            return !this.editMode
-                ? html `
-							<color-palette-item
-								color=${color}
-								alias=${this.aliases?.[index] || ''}
-								aliasMode=${this.pluginSettings.aliasMode}
-								direction=${this.direction}
-								?editMode=${this.editMode}
-								height=${this.height}
-								?preventHover=${this.preventHover}
-								?hideText=${this.hideText}
-								colorCount=${this.colors.length}
-								${ref(itemRef)}
-							>
-							</color-palette-item>
-						`
-                : html `
-							<color-palette-item-edit
-								draggable=${true}
-								color=${color}
-								alias=${this.aliases?.[index] || ''}
-								aliasMode=${this.pluginSettings.aliasMode}
-								direction=${this.direction}
-								?editMode=${this.editMode}
-								height=${this.height}
-								?preventHover=${this.preventHover}
-								?hideText=${this.hideText}
-								colorCount=${this.colors.length}
-								?stabilizeWhileEditing=${this.pluginSettings.stabilizeWhileEditing}
-								${ref(itemEditRef)}
-							>
-							</color-palette-item-edit>
+  }
+  /** Create a color palette. */
+  createColors() {
+    return c`
+			${N(
+      this.colors,
+      (t, e) => {
+        let s = (i) => {
+          i instanceof T && (i.emitter.clear(), i.emitter.on("click", async (h) => await m(t.toUpperCase(), this.pluginSettings.copyFormat)));
+        }, a = (i) => {
+          i instanceof M && (i.emitter.clear(), i.emitter.on("click", async (h) => await m(t.toUpperCase(), this.pluginSettings.copyFormat)), i.emitter.on("trash", (h) => {
+            h.stopPropagation();
+            const p = this.colors.indexOf(t);
+            this.colors = this.colors.filter((d, f) => f !== p), this.aliases = this.aliases.filter((d, f) => f !== p), this.emitter.emit("changed", this.colors, this.settings);
+          }), i.emitter.on("alias", (h) => {
+            const p = this.colors.findIndex((d) => d === t);
+            for (let d = 0; d < p; d++)
+              this.aliases[d] || (this.aliases[d] = "");
+            this.aliases[p] = h, this.emitter.emit("changed", this.colors, this.settings);
+          }));
+        };
+        return this.editMode ? c`
+							<color-palette-item-edit
+								draggable=${!0}
+								color=${t}
+								alias=${this.aliases?.[e] || ""}
+								aliasMode=${this.pluginSettings.aliasMode}
+								direction=${this.direction}
+								?editMode=${this.editMode}
+								height=${this.height}
+								?preventHover=${this.preventHover}
+								?hideText=${this.hideText}
+								colorCount=${this.colors.length}
+								?stabilizeWhileEditing=${this.pluginSettings.stabilizeWhileEditing}
+								${g(a)}
+							>
+							</color-palette-item-edit>
+						` : c`
+							<color-palette-item
+								color=${t}
+								alias=${this.aliases?.[e] || ""}
+								aliasMode=${this.pluginSettings.aliasMode}
+								direction=${this.direction}
+								?editMode=${this.editMode}
+								height=${this.height}
+								?preventHover=${this.preventHover}
+								?hideText=${this.hideText}
+								colorCount=${this.colors.length}
+								${g(s)}
+							>
+							</color-palette-item>
 						`;
-        })}
+      }
+    )}
 		`;
-    }
-    /** Create a gradient palette. */
-    createGradient() {
-        let tooltipRef = createRef();
-        let canvasRef = (canvas) => {
-            if (!(canvas instanceof CanvasGradient))
-                return;
-            canvas.emitter.clear();
-            canvas.emitter.on('click', async (color) => await copyToClipboard(color.toUpperCase(), this.pluginSettings.copyFormat));
-            canvas.emitter.on('move', (pos) => {
-                if (!tooltipRef.value)
-                    return;
-                let tooltip = tooltipRef.value;
-                // Set tooltip text
-                tooltip.text = canvas.getCanvasHex(pos.x, pos.y).toUpperCase();
-                // Set tooltip position
-                tooltip.setClampedPosition(pos, this.getBoundingClientRect());
-            });
-        };
-        return html `
-			<tool-tip 
-				id="tooltip" 
-				trigger="hover"
-				?display=${!this.preventHover}
-				${ref(tooltipRef)}
-			>
-				<canvas-gradient
-					.colors=${this.colors}
-					height=${this.height}
-					width=${this.getPaletteWidth()}
-					direction=${this.direction}
-					id="canvas"
-					${ref(canvasRef)}
-				>
-				</canvas-gradient>
-			</tool-tip>
+  }
+  /** Create a gradient palette. */
+  createGradient() {
+    let t = P(), e = (s) => {
+      s instanceof A && (s.emitter.clear(), s.emitter.on("click", async (a) => await m(a.toUpperCase(), this.pluginSettings.copyFormat)), s.emitter.on("move", (a) => {
+        if (!t.value) return;
+        let i = t.value;
+        i.text = s.getCanvasHex(a.x, a.y).toUpperCase(), i.setClampedPosition(a, this.getBoundingClientRect());
+      }));
+    };
+    return c`
+			<tool-tip 
+				id="tooltip" 
+				trigger="hover"
+				?display=${!this.preventHover}
+				${g(t)}
+			>
+				<canvas-gradient
+					.colors=${this.colors}
+					height=${this.height}
+					width=${this.getPaletteWidth()}
+					direction=${this.direction}
+					id="canvas"
+					${g(e)}
+				>
+				</canvas-gradient>
+			</tool-tip>
 		`;
+  }
+  /**
+   * Create invalid palette based on palette status.
+   * @param type Palette status type
+   */
+  createInvalidPalette(t, e = "") {
+    let s = "Invalid palette";
+    switch (t) {
+      case l.INVALID_COLORS:
+        s = "Colors are defined incorrectly";
+        break;
+      case l.INVALID_SETTINGS:
+        s = "Issues parsing settings";
+        break;
+      case l.INVALID_COLORS_AND_SETTINGS:
+        s = "Colors and settings are defined incorrectly";
+        break;
+      case l.INVALID_GRADIENT:
+        s = "Gradients require more than 1 color to display";
+        break;
     }
-    /**
-     * Create invalid palette based on palette status.
-     * @param type Palette status type
-     */
-    createInvalidPalette(type, message = '') {
-        let defaultMessage = 'Invalid palette';
-        switch (type) {
-            case Status.INVALID_COLORS:
-                defaultMessage = 'Colors are defined incorrectly';
-                break;
-            case Status.INVALID_SETTINGS:
-                defaultMessage = 'Issues parsing settings';
-                break;
-            case Status.INVALID_COLORS_AND_SETTINGS:
-                defaultMessage = 'Colors and settings are defined incorrectly';
-                break;
-            case Status.INVALID_GRADIENT:
-                defaultMessage = 'Gradients require more than 1 color to display';
-                break;
-        }
-        this.emitter.emit('notice', `Palette:\n${message ? message : defaultMessage}`);
-        return html `
-			<section id="invalid">
-				<span>${type}</span>
-			</section>
+    return this.emitter.emit("notice", `Palette:
+${e || s}`), c`
+			<section id="invalid">
+				<span>${t}</span>
+			</section>
 		`;
-    }
+  }
+};
+r.styles = [L];
+o([
+  C("#palette")
+], r.prototype, "palette", 2);
+o([
+  n({ type: Boolean })
+], r.prototype, "editMode", 1);
+o([
+  n({ type: Array, reflect: !0 })
+], r.prototype, "colors", 2);
+o([
+  n({ type: Number, reflect: !0 })
+], r.prototype, "height", 2);
+o([
+  n({ type: Number, reflect: !0 })
+], r.prototype, "width", 2);
+o([
+  n({ type: String, reflect: !0 })
+], r.prototype, "direction", 2);
+o([
+  n({ type: Boolean, reflect: !0 })
+], r.prototype, "gradient", 2);
+o([
+  n({ type: Boolean, reflect: !0 })
+], r.prototype, "preventHover", 2);
+o([
+  n({ type: Boolean, reflect: !0 })
+], r.prototype, "hideText", 2);
+o([
+  n({ type: Boolean, reflect: !0 })
+], r.prototype, "override", 2);
+o([
+  n({ type: Array, reflect: !0 })
+], r.prototype, "aliases", 2);
+o([
+  n({ type: Number })
+], r.prototype, "maxWidth", 2);
+o([
+  $()
+], r.prototype, "status", 2);
+o([
+  $()
+], r.prototype, "pulse", 2);
+o([
+  n({ type: Object })
+], r.prototype, "pluginSettings", 2);
+r = o([
+  x("color-palette")
+], r);
+export {
+  r as ColorPalette
 };
-__decorate([
-    query('#palette')
-], ColorPalette.prototype, "palette", void 0);
-__decorate([
-    property({ type: Boolean })
-], ColorPalette.prototype, "editMode", null);
-__decorate([
-    property({ type: Array, reflect: true })
-], ColorPalette.prototype, "colors", void 0);
-__decorate([
-    property({ type: Number, reflect: true })
-], ColorPalette.prototype, "height", void 0);
-__decorate([
-    property({ type: Number, reflect: true })
-], ColorPalette.prototype, "width", void 0);
-__decorate([
-    property({ type: String, reflect: true })
-], ColorPalette.prototype, "direction", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], ColorPalette.prototype, "gradient", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], ColorPalette.prototype, "preventHover", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], ColorPalette.prototype, "hideText", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], ColorPalette.prototype, "override", void 0);
-__decorate([
-    property({ type: Array, reflect: true })
-], ColorPalette.prototype, "aliases", void 0);
-__decorate([
-    property({ type: Number })
-], ColorPalette.prototype, "maxWidth", void 0);
-__decorate([
-    state()
-], ColorPalette.prototype, "status", void 0);
-__decorate([
-    state()
-], ColorPalette.prototype, "pulse", void 0);
-__decorate([
-    property({ type: Object })
-], ColorPalette.prototype, "pluginSettings", void 0);
-ColorPalette = __decorate([
-    customElement('color-palette')
-], ColorPalette);
-export { ColorPalette };