@alegendstale/holly-components 2.0.2 → 2.0.4

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

@@ -1,212 +1,174 @@
-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 y, html as c, nothing as d } from "lit";
+import { query as $, property as p, state as f, customElement as g } from "lit/decorators.js";
+import { EventEmitter as C } from "../../../utils/EventEmitter.js";
+import { defaultSettings as v } from "../color-palette-utils.js";
+import { createElement as r, ArrowLeftRight as E, Palette as P, Brush as k, Check as M, Droplets as h, Scissors as O, Copy as w } from "lucide";
+import { copyToClipboard as b } from "../../../utils/basicUtils.js";
+import u from "../../../utils/colorsea-wrapper.js";
+import { ref as S } from "lit/directives/ref.js";
+import { ColorPaletteReorder as _ } from "./color-palette-reorder.js";
+import F from "./color-palette-menu.styles.js";
+var R = Object.defineProperty, I = Object.getOwnPropertyDescriptor, l = (i, t, o, e) => {
+  for (var n = e > 1 ? void 0 : e ? I(t, o) : t, a = i.length - 1, m; a >= 0; a--)
+    (m = i[a]) && (n = (e ? m(t, o, n) : m(n)) || n);
+  return e && n && R(t, o, n), n;
 };
-import { LitElement, html, nothing } from 'lit';
-import { customElement, property, query, state } from 'lit/decorators.js';
-import { EventEmitter } from '../../../utils/EventEmitter.js';
-import { defaultSettings } from '../color-palette-utils.js';
-import { ArrowLeftRight, Brush, Check, Copy, createElement, Droplets, Palette, Scissors } from 'lucide';
-import { copyToClipboard } from '../../../utils/basicUtils.js';
-import colorsea from '../../../utils/colorsea-wrapper.js';
-import { AbsoluteContainer } from '../../absolute-container/absolute-container.js';
-import { ref } from 'lit/directives/ref.js';
-import { ColorPaletteReorder } from './color-palette-reorder.js';
-import styles from './color-palette-menu.styles.js';
-/**
- * A context menu for color-palette.
- */
-let ColorPaletteMenu = class ColorPaletteMenu extends LitElement {
-    constructor() {
-        super(...arguments);
-        /** The settings palette colors. */
-        this.colors = [];
-        /** The selected palette edit mode status. */
-        this.editMode = false;
-        /** Determines if copying takes the raw value or just the colors. */
-        this.copyFormat = defaultSettings.copyFormat;
-        /** Whether reorder state is active. */
-        this.reorder = false;
-        /** Public way to subscribe to events. */
-        this.emitter = new EventEmitter();
-    }
-    static { this.styles = [styles]; }
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        this.emitter.clear();
-    }
-    render() {
-        const absoluteRef = (absolute) => {
-            if (!(absolute instanceof AbsoluteContainer))
-                return;
-            absolute.emitter.on('visibility', (open) => {
-                this.reorder = false;
-            });
-        };
-        return html `
-				${this.reorder
-            ? this.reorderItems()
-            : this.menuItems()}
+let s = class extends y {
+  constructor() {
+    super(...arguments), this.colors = [], this.editMode = !1, this.copyFormat = v.copyFormat, this.reorder = !1, this.emitter = new C();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this.emitter.clear();
+  }
+  render() {
+    return c`
+				${this.reorder ? this.reorderItems() : this.menuItems()}
 		`;
-    }
-    /** Renders the menu items. */
-    menuItems() {
-        const palette = {
-            colors: this.colors,
-            settings: this.settings
-        };
-        return html `
-			<menu>
-				<li>
-					<button
-						@click=${(e) => {
-            e.stopPropagation();
-            this.reorder = !this.reorder;
-        }}
-					>
-						${createElement(ArrowLeftRight)}
-						<span>Reorder</span>
-					</button>
-				</li>
-				<li>
-					<button
+  }
+  /** Renders the menu items. */
+  menuItems() {
+    const i = {
+      colors: this.colors,
+      settings: this.settings
+    };
+    return c`
+			<menu>
+				<li>
+					<button
+						@click=${(t) => {
+      t.stopPropagation(), this.reorder = !this.reorder;
+    }}
+					>
+						${r(E)}
+						<span>Reorder</span>
+					</button>
+				</li>
+				<li>
+					<button
 						@click=${() => {
-            this.emitter.emit('openEditor');
-        }}
-					>
-						${createElement(Palette)}
-						<span>Edit Mode</span>
-					</button>
-				</li>
-				${
-        // Only show toggle edit mode option when palette is not a gradient
-        !this.settings?.gradient
-            ? html `
-							<li>
-								<button
+      this.emitter.emit("openEditor");
+    }}
+					>
+						${r(P)}
+						<span>Edit Mode</span>
+					</button>
+				</li>
+				${// Only show toggle edit mode option when palette is not a gradient
+    this.settings?.gradient ? d : c`
+							<li>
+								<button
 									@click=${() => {
-                // Toggle palette edit mode
-                this.emitter.emit('editMode', !this.editMode);
-            }}
-								>
-									${createElement(Brush)}
-									<span>Quick Edit</span>
-									${this.editMode ? createElement(Check) : nothing}
-								</button>
-							</li>
-					`
-            : nothing}
-				<hr>
-				<li>
-					<button
+      this.emitter.emit("editMode", !this.editMode);
+    }}
+								>
+									${r(k)}
+									<span>Quick Edit</span>
+									${this.editMode ? r(M) : d}
+								</button>
+							</li>
+					`}
+				<hr>
+				<li>
+					<button
 						@click=${() => {
-            const colors = this.colors.map((color) => {
-                const rgbColor = colorsea(color).rgb();
-                return `rgb(${rgbColor[0]}, ${rgbColor[1]}, ${rgbColor[2]})`;
-            });
-            this.emitter.emit('change', colors);
-        }}
-					>
-						${createElement(Droplets)}
-						<span>Convert to RGB</span>
-					</button>
-				</li>
-				<li>
-					<button
+      const t = this.colors.map((o) => {
+        const e = u(o).rgb();
+        return `rgb(${e[0]}, ${e[1]}, ${e[2]})`;
+      });
+      this.emitter.emit("change", t);
+    }}
+					>
+						${r(h)}
+						<span>Convert to RGB</span>
+					</button>
+				</li>
+				<li>
+					<button
 						@click=${() => {
-            const colors = this.colors.map((color) => {
-                const hslColor = colorsea(color).hsl();
-                return `hsl(${hslColor[0]} ${hslColor[1]}% ${hslColor[2]}%)`;
-            });
-            this.emitter.emit('change', colors);
-        }}
-					>
-						${createElement(Droplets)}
-						<span>Convert to HSL</span>
-					</button>
-				</li>
-				<li>
-					<button
+      const t = this.colors.map((o) => {
+        const e = u(o).hsl();
+        return `hsl(${e[0]} ${e[1]}% ${e[2]}%)`;
+      });
+      this.emitter.emit("change", t);
+    }}
+					>
+						${r(h)}
+						<span>Convert to HSL</span>
+					</button>
+				</li>
+				<li>
+					<button
 						@click=${() => {
-            const colors = this.colors.map((color) => {
-                return colorsea(color).hex(2);
-            });
-            this.emitter.emit('change', colors);
-        }}
-					>
-						${createElement(Droplets)}
-						<span>Convert to HEX</span>
-					</button>
-				</li>
-				<hr>
-				<li>
-					<button
+      const t = this.colors.map((o) => u(o).hex(2));
+      this.emitter.emit("change", t);
+    }}
+					>
+						${r(h)}
+						<span>Convert to HEX</span>
+					</button>
+				</li>
+				<hr>
+				<li>
+					<button
 						@click=${async () => {
-            // Copy palette to clipboard
-            await copyToClipboard(JSON.stringify(palette), this.copyFormat);
-            // Remove palette
-            this.emitter.emit('change', []);
-        }}
-					>
-						${createElement(Scissors)}
-						<span>Cut</span>
-					</button>
-				</li>
-				<li>
-					<button
+      await b(JSON.stringify(i), this.copyFormat), this.emitter.emit("change", []);
+    }}
+					>
+						${r(O)}
+						<span>Cut</span>
+					</button>
+				</li>
+				<li>
+					<button
 						@click=${async () => {
-            // Copy palette to clipboard
-            await copyToClipboard(JSON.stringify(palette), this.copyFormat);
-        }}
-					>
-						${createElement(Copy)}
-						<span>Copy</span>
-					</button>
-				</li>
-			</menu>
+      await b(JSON.stringify(i), this.copyFormat);
+    }}
+					>
+						${r(w)}
+						<span>Copy</span>
+					</button>
+				</li>
+			</menu>
 		`;
-    }
-    /** Renders the reorder items. */
-    reorderItems() {
-        const reorderRef = (reorder) => {
-            if (!(reorder instanceof ColorPaletteReorder))
-                return;
-            reorder.emitter.clear();
-            reorder.emitter.on('submit', (colors) => {
-                this.emitter.emit('change', colors);
-                this.reorder = false;
-            });
-        };
-        return html `
-			<color-palette-reorder
-				.colors=${this.colors}
-				${ref(reorderRef)}
-			>
-			</color-palette-reorder>
+  }
+  /** Renders the reorder items. */
+  reorderItems() {
+    const i = (t) => {
+      t instanceof _ && (t.emitter.clear(), t.emitter.on("submit", (o) => {
+        this.emitter.emit("change", o), this.reorder = !1;
+      }));
+    };
+    return c`
+			<color-palette-reorder
+				.colors=${this.colors}
+				${S(i)}
+			>
+			</color-palette-reorder>
 		`;
-    }
+  }
+};
+s.styles = [F];
+l([
+  $("absolute-container")
+], s.prototype, "absolute", 2);
+l([
+  p({ type: Array })
+], s.prototype, "colors", 2);
+l([
+  p({ type: Object })
+], s.prototype, "settings", 2);
+l([
+  p({ type: Boolean })
+], s.prototype, "editMode", 2);
+l([
+  p({ type: String })
+], s.prototype, "copyFormat", 2);
+l([
+  f()
+], s.prototype, "reorder", 2);
+s = l([
+  g("color-palette-menu")
+], s);
+export {
+  s as ColorPaletteMenu
 };
-__decorate([
-    query('absolute-container')
-], ColorPaletteMenu.prototype, "absolute", void 0);
-__decorate([
-    property({ type: Array })
-], ColorPaletteMenu.prototype, "colors", void 0);
-__decorate([
-    property({ type: Object })
-], ColorPaletteMenu.prototype, "settings", void 0);
-__decorate([
-    property({ type: Boolean })
-], ColorPaletteMenu.prototype, "editMode", void 0);
-__decorate([
-    property({ type: String })
-], ColorPaletteMenu.prototype, "copyFormat", void 0);
-__decorate([
-    state()
-], ColorPaletteMenu.prototype, "reorder", void 0);
-ColorPaletteMenu = __decorate([
-    customElement('color-palette-menu')
-], ColorPaletteMenu);
-export { ColorPaletteMenu };

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

@@ -1,49 +1,52 @@
-import { css } from 'lit';
-export default css `
-	:host {
-		display: block;
-	}
-
-	menu {
-		display: grid;
-		grid-template-columns: 1fr;
-		padding: 0.5rem;
-		margin: 0;
-		border-radius: 5px;
-		color: rgb(245, 245, 245);
-		background-color: #222222;
-	}
-
-	li {
-		display: grid;
-		grid-template-columns: subgrid;
-		list-style: none;
-	}
-
-	button {
-		display: grid;
-		grid-template-columns: auto 1fr auto;
-		align-items: center;
-		justify-items: flex-start;
-		column-gap: 0.5rem;
-		background-color: inherit;
-		color: inherit;
-		border: none;
-		cursor: pointer;
-		padding: 4px 8px;
-		text-wrap: nowrap;
-
-		&:hover {
-			background-color: #323232;
-		}
-
-		span {
-			font-size: 14px;
-		}
-	}
-
-	hr {
-		width: 95%;
-		border-color: rgb(45, 45, 45);
-	}
+import { css as r } from "lit";
+const t = r`
+	:host {
+		display: block;
+	}
+
+	menu {
+		display: grid;
+		grid-template-columns: 1fr;
+		padding: 0.5rem;
+		margin: 0;
+		border-radius: 5px;
+		color: rgb(245, 245, 245);
+		background-color: #222222;
+	}
+
+	li {
+		display: grid;
+		grid-template-columns: subgrid;
+		list-style: none;
+	}
+
+	button {
+		display: grid;
+		grid-template-columns: auto 1fr auto;
+		align-items: center;
+		justify-items: flex-start;
+		column-gap: 0.5rem;
+		background-color: inherit;
+		color: inherit;
+		border: none;
+		cursor: pointer;
+		padding: 4px 8px;
+		text-wrap: nowrap;
+
+		&:hover {
+			background-color: #323232;
+		}
+
+		span {
+			font-size: 14px;
+		}
+	}
+
+	hr {
+		width: 95%;
+		border-color: rgb(45, 45, 45);
+	}
 `;
+export {
+  t as default
+};

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

@@ -1,98 +1,79 @@
-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 colorsea from '../../../utils/colorsea-wrapper.js';
-import { LitElement, html } from 'lit';
-import { customElement, property, query } from 'lit/decorators.js';
-import { repeat } from 'lit/directives/repeat.js';
-import { EventEmitter } from '../../../utils/EventEmitter.js';
-import styles from './color-palette-reorder.styles.js';
-var Reorder;
-(function (Reorder) {
-    Reorder["Hue"] = "Hue";
-    Reorder["Saturation"] = "Saturation";
-    Reorder["Lightness"] = "Lightness";
-    Reorder["Red"] = "Red";
-    Reorder["Green"] = "Green";
-    Reorder["Blue"] = "Blue";
-    Reorder["Alpha"] = "Alpha";
-})(Reorder || (Reorder = {}));
-/**
- * A companion UI to color-palette-menu for when the client selects reorder.
- */
-let ColorPaletteReorder = class ColorPaletteReorder extends LitElement {
-    constructor() {
-        super(...arguments);
-        /** The colors that can be reordered. */
-        this.colors = [];
-        /** Public way to subscribe to events. */
-        this.emitter = new EventEmitter();
-    }
-    static { this.styles = [styles]; }
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        this.emitter.clear();
-    }
-    render() {
-        return html `
-			<menu>
-				${repeat(Object.keys(Reorder), (item) => {
-            return html `
-								<button
-									@click=${(e) => {
-                this.selectOption(item);
-            }}
-								>
-									<span>${item}</span>
-								</button>
-							`;
-        })}
-			</menu>
+import u from "../../../utils/colorsea-wrapper.js";
+import { LitElement as m, html as c } from "lit";
+import { query as h, property as b, customElement as f } from "lit/decorators.js";
+import { repeat as x } from "lit/directives/repeat.js";
+import { EventEmitter as y } from "../../../utils/EventEmitter.js";
+import g from "./color-palette-reorder.styles.js";
+var v = Object.defineProperty, O = Object.getOwnPropertyDescriptor, p = (r, s, a, e) => {
+  for (var t = e > 1 ? void 0 : e ? O(s, a) : s, n = r.length - 1, l; n >= 0; n--)
+    (l = r[n]) && (t = (e ? l(s, a, t) : l(t)) || t);
+  return e && t && v(s, a, t), t;
+}, i = /* @__PURE__ */ ((r) => (r.Hue = "Hue", r.Saturation = "Saturation", r.Lightness = "Lightness", r.Red = "Red", r.Green = "Green", r.Blue = "Blue", r.Alpha = "Alpha", r))(i || {});
+let o = class extends m {
+  constructor() {
+    super(...arguments), this.colors = [], this.emitter = new y();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this.emitter.clear();
+  }
+  render() {
+    return c`
+			<menu>
+				${x(
+      Object.keys(i),
+      (r) => c`
+								<button
+									@click=${(s) => {
+        this.selectOption(r);
+      }}
+								>
+									<span>${r}</span>
+								</button>
+							`
+    )}
+			</menu>
 		`;
+  }
+  /** Reorders the palette colors based on the selected option. */
+  selectOption(r) {
+    const s = this.colors.map((e) => u(e));
+    let a = [];
+    switch (r) {
+      case "Hue":
+        a = s.sort((e, t) => e.hue() - t.hue()).map((e) => e.hex());
+        break;
+      case "Saturation":
+        a = s.sort((e, t) => e.saturation() - t.saturation()).map((e) => e.hex());
+        break;
+      case "Lightness":
+        a = s.sort((e, t) => e.lightness() - t.lightness()).map((e) => e.hex());
+        break;
+      case "Red":
+        a = s.sort((e, t) => e.red() - t.red()).map((e) => e.hex());
+        break;
+      case "Green":
+        a = s.sort((e, t) => e.green() - t.green()).map((e) => e.hex());
+        break;
+      case "Blue":
+        a = s.sort((e, t) => e.blue() - t.blue()).map((e) => e.hex());
+        break;
+      case "Alpha":
+        a = s.sort((e, t) => e.alpha() - t.alpha()).map((e) => e.hex());
+        break;
     }
-    /** Reorders the palette colors based on the selected option. */
-    selectOption(item) {
-        // Create colorsea array
-        const csColors = this.colors.map((color) => {
-            return colorsea(color);
-        });
-        let colors = [];
-        switch (item) {
-            case Reorder.Hue:
-                colors = csColors.sort((a, b) => a.hue() - b.hue()).map((color) => color.hex());
-                break;
-            case Reorder.Saturation:
-                colors = csColors.sort((a, b) => a.saturation() - b.saturation()).map((color) => color.hex());
-                break;
-            case Reorder.Lightness:
-                colors = csColors.sort((a, b) => a.lightness() - b.lightness()).map((color) => color.hex());
-                break;
-            case Reorder.Red:
-                colors = csColors.sort((a, b) => a.red() - b.red()).map((color) => color.hex());
-                break;
-            case Reorder.Green:
-                colors = csColors.sort((a, b) => a.green() - b.green()).map((color) => color.hex());
-                break;
-            case Reorder.Blue:
-                colors = csColors.sort((a, b) => a.blue() - b.blue()).map((color) => color.hex());
-                break;
-            case Reorder.Alpha:
-                colors = csColors.sort((a, b) => a.alpha() - b.alpha()).map((color) => color.hex());
-                break;
-        }
-        this.emitter.emit('submit', colors);
-    }
+    this.emitter.emit("submit", a);
+  }
+};
+o.styles = [g];
+p([
+  h("absolute-container")
+], o.prototype, "absolute", 2);
+p([
+  b({ type: Array })
+], o.prototype, "colors", 2);
+o = p([
+  f("color-palette-reorder")
+], o);
+export {
+  o as ColorPaletteReorder
 };
-__decorate([
-    query('absolute-container')
-], ColorPaletteReorder.prototype, "absolute", void 0);
-__decorate([
-    property({ type: Array })
-], ColorPaletteReorder.prototype, "colors", void 0);
-ColorPaletteReorder = __decorate([
-    customElement('color-palette-reorder')
-], ColorPaletteReorder);
-export { ColorPaletteReorder };