@alegendstale/holly-components 0.2.9 → 0.2.11

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

@@ -1,231 +1,255 @@
-import { css as f, LitElement as y, html as a, nothing as h } from "lit";
-import { query as $, property as c, state as C, customElement as v } from "lit/decorators.js";
-import { EventEmitter as k } from "../../../utils/EventEmitter.js";
-import { defaultSettings as x } from "../color-palette-utils.js";
-import { createElement as i, ArrowLeftRight as E, Palette as w, Brush as P, Check as M, Droplets as u, Scissors as O, Copy as R } from "lucide";
-import { copyToClipboard as b } from "../../../utils/basicUtils.js";
-import d from "colorsea";
-import { AbsoluteContainer as S } from "../../absolute-container/absolute-container.js";
-import { ref as g } from "lit/directives/ref.js";
-import { ColorPaletteReorder as _ } from "./color-palette-reorder.js";
-var F = Object.defineProperty, j = Object.getOwnPropertyDescriptor, l = (n, e, r, o) => {
-  for (var t = o > 1 ? void 0 : o ? j(e, r) : e, p = n.length - 1, m; p >= 0; p--)
-    (m = n[p]) && (t = (o ? m(e, r, t) : m(t)) || t);
-  return o && t && F(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 s = class extends y {
-  constructor() {
-    super(...arguments), this.colors = [], this.editMode = !1, this.copyFormat = x.copyFormat, this.reorder = !1, this.emitter = new k();
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback(), this.emitter.clear();
-  }
-  render() {
-    return a`
-			<absolute-container
-				disableContextEvent
-				${g((e) => {
-      e instanceof S && e.emitter.on("visibility", (r) => {
-        this.reorder = !1;
-      });
-    })}
-			>
-				${this.reorder ? this.reorderItems() : this.menuItems()}
-			</absolute-container>
+import { LitElement, html, css, nothing } from 'lit';
+import { customElement, property, query, state } from 'lit/decorators.js';
+import { EventEmitter } from '../../../utils/EventEmitter';
+import { defaultSettings } from '../color-palette-utils';
+import { ArrowLeftRight, Brush, Check, Copy, createElement, Droplets, Palette, Scissors } from 'lucide';
+import { copyToClipboard } from '../../../utils/basicUtils';
+import colorsea from 'colorsea';
+import { AbsoluteContainer } from '../../absolute-container/absolute-container';
+import { ref } from 'lit/directives/ref.js';
+import { ColorPaletteReorder } from './color-palette-reorder';
+let ColorPaletteMenu = class ColorPaletteMenu extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.colors = [];
+        this.editMode = false;
+        this.copyFormat = defaultSettings.copyFormat;
+        this.reorder = false;
+        this.emitter = new EventEmitter();
+    }
+    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 `
+			<absolute-container
+				disableContextEvent
+				${ref(absoluteRef)}
+			>
+				${this.reorder
+            ? this.reorderItems()
+            : this.menuItems()}
+			</absolute-container>
 		`;
-  }
-  menuItems() {
-    var e;
-    const n = {
-      colors: this.colors,
-      settings: this.settings
-    };
-    return a`
-			<menu>
-				<li>
-					<button
-						@click=${(r) => {
-      r.stopPropagation(), this.reorder = !this.reorder;
-    }}
-					>
-						${i(E)}
-						<span>Reorder</span>
-					</button>
-				</li>
-				<li>
-					<button
+    }
+    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
 						@click=${() => {
-      this.emitter.emit("openEditor");
-    }}
-					>
-						${i(w)}
-						<span>Edit Mode</span>
-					</button>
-				</li>
-				${// Only show toggle edit mode option when palette is not a gradient
-    (e = this.settings) != null && e.gradient ? h : a`
-							<li>
-								<button
+            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
 									@click=${() => {
-      this.emitter.emit("editMode", !this.editMode);
-    }}
-								>
-									${i(P)}
-									<span>Quick Edit</span>
-									${this.editMode ? i(M) : h}
-								</button>
-							</li>
-					`}
-				<hr>
-				<li>
-					<button
+                // 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
 						@click=${() => {
-      const r = this.colors.map((o) => {
-        const t = d(o).rgb();
-        return `rgb(${t[0]}, ${t[1]}, ${t[2]})`;
-      });
-      this.emitter.emit("change", r);
-    }}
-					>
-						${i(u)}
-						<span>Convert to RGB</span>
-					</button>
-				</li>
-				<li>
-					<button
+            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
 						@click=${() => {
-      const r = this.colors.map((o) => {
-        const t = d(o).hsl();
-        return `hsl(${t[0]} ${t[1]}% ${t[2]}%)`;
-      });
-      this.emitter.emit("change", r);
-    }}
-					>
-						${i(u)}
-						<span>Convert to HSL</span>
-					</button>
-				</li>
-				<li>
-					<button
+            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
 						@click=${() => {
-      const r = this.colors.map((o) => d(o).hex(2));
-      this.emitter.emit("change", r);
-    }}
-					>
-						${i(u)}
-						<span>Convert to HEX</span>
-					</button>
-				</li>
-				<hr>
-				<li>
-					<button
+            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
 						@click=${async () => {
-      await b(JSON.stringify(n), this.copyFormat), this.emitter.emit("change", []);
-    }}
-					>
-						${i(O)}
-						<span>Cut</span>
-					</button>
-				</li>
-				<li>
-					<button
+            // 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
 						@click=${async () => {
-      await b(JSON.stringify(n), this.copyFormat);
-    }}
-					>
-						${i(R)}
-						<span>Copy</span>
-					</button>
-				</li>
-			</menu>
+            // Copy palette to clipboard
+            await copyToClipboard(JSON.stringify(palette), this.copyFormat);
+        }}
+					>
+						${createElement(Copy)}
+						<span>Copy</span>
+					</button>
+				</li>
+			</menu>
 		`;
-  }
-  reorderItems() {
-    const n = (e) => {
-      e instanceof _ && (e.emitter.clear(), e.emitter.on("submit", (r) => {
-        this.emitter.emit("change", r), this.reorder = !1;
-      }));
-    };
-    return a`
-			<color-palette-reorder
-				.colors=${this.colors}
-				${g(n)}
-			>
-			</color-palette-reorder>
+    }
+    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>
 		`;
-  }
+    }
 };
-s.styles = [
-  f`
-			:host {
-				display: block;
-			}
-
-			menu {
-				display: grid;
-				grid-template-columns: 1fr;
-				padding: .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 1fr;
-				align-items: center;
-				justify-items: flex-start;
-				column-gap: .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);
-			}
+ColorPaletteMenu.styles = [
+    css `
+			:host {
+				display: block;
+			}
+
+			menu {
+				display: grid;
+				grid-template-columns: 1fr;
+				padding: .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 1fr;
+				align-items: center;
+				justify-items: flex-start;
+				column-gap: .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);
+			}
 		`
 ];
-l([
-  $("absolute-container")
-], s.prototype, "absolute", 2);
-l([
-  c({ type: Array })
-], s.prototype, "colors", 2);
-l([
-  c({ type: Object })
-], s.prototype, "settings", 2);
-l([
-  c({ type: Boolean })
-], s.prototype, "editMode", 2);
-l([
-  c({ type: String })
-], s.prototype, "copyFormat", 2);
-l([
-  C()
-], s.prototype, "reorder", 2);
-s = l([
-  v("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 };