@alegendstale/holly-components/dist/components/color-palette/menu/color-palette-menu.js

Reusable UI components created using lit

import { LitElement as b, html as a, nothing as $ } from "lit";
import { property as c, customElement as f } from "lit/decorators.js";
import { defaultSettings as v } from "../color-palette-utils.js";
import { createElement as r, ArrowLeftRight as g, Palette as E, Brush as C, Check as w, Droplets as u, Scissors as P, Copy as M } from "lucide";
import { copyToClipboard as y } from "../../../utils/basicUtils.js";
import d from "../../../utils/colorsea-wrapper.js";
import O from "./color-palette-menu.styles.js";
import { HCPaletteChangeEvent as p } from "../../../events/palette-change.js";
import { HCPaletteEditEvent as S } from "../../../events/palette-edit.js";
var _ = Object.defineProperty, k = Object.getOwnPropertyDescriptor, l = (i, t, e, o) => {
  for (var n = o > 1 ? void 0 : o ? k(t, e) : t, h = i.length - 1, m; h >= 0; h--)
    (m = i[h]) && (n = (o ? m(t, e, n) : m(n)) || n);
  return o && n && _(t, e, n), n;
};
let s = class extends b {
  constructor() {
    super(...arguments), this.colors = [], this.editMode = !1, this.copyFormat = v.copyFormat, this.reorder = !1;
  }
  render() {
    return a`
				${this.reorder ? this.reorderItems() : this.menuItems()}
		`;
  }
  /** Renders the menu items. */
  menuItems() {
    const i = {
      colors: this.colors,
      settings: this.settings
    };
    return a`
			<menu>
				<li>
					<button
						@click=${(t) => {
      t.stopPropagation(), this.reorder = !this.reorder;
    }}
					>
						${r(g)}
						<span>Reorder</span>
					</button>
				</li>
				<li>
					<button
						@click=${() => {
      this.dispatchEvent(new Event("open-editor"));
    }}
					>
						${r(E)}
						<span>Edit Mode</span>
					</button>
				</li>
				${// Only show toggle edit mode option when palette is not a gradient
    this.settings?.gradient ? $ : a`
							<li>
								<button
									@click=${() => {
      this.dispatchEvent(new S({ isEditMode: !this.editMode }));
    }}
								>
									${r(C)}
									<span>Quick Edit</span>
									${this.editMode ? r(w) : $}
								</button>
							</li>
					`}
				<hr>
				<li>
					<button
						@click=${() => {
      const t = this.colors.map((e) => {
        const o = d(e).rgb();
        return `rgb(${o[0]}, ${o[1]}, ${o[2]})`;
      });
      this.dispatchEvent(new p({ colors: t }));
    }}
					>
						${r(u)}
						<span>Convert to RGB</span>
					</button>
				</li>
				<li>
					<button
						@click=${() => {
      const t = this.colors.map((e) => {
        const o = d(e).hsl();
        return `hsl(${o[0]} ${o[1]}% ${o[2]}%)`;
      });
      this.dispatchEvent(new p({ colors: t }));
    }}
					>
						${r(u)}
						<span>Convert to HSL</span>
					</button>
				</li>
				<li>
					<button
						@click=${() => {
      const t = this.colors.map((e) => d(e).hex(2));
      this.dispatchEvent(new p({ colors: t }));
    }}
					>
						${r(u)}
						<span>Convert to HEX</span>
					</button>
				</li>
				<hr>
				<li>
					<button
						@click=${async () => {
      await y(JSON.stringify(i), this.copyFormat), this.dispatchEvent(new p({ colors: [] }));
    }}
					>
						${r(P)}
						<span>Cut</span>
					</button>
				</li>
				<li>
					<button
						@click=${async () => {
      await y(JSON.stringify(i), this.copyFormat);
    }}
					>
						${r(M)}
						<span>Copy</span>
					</button>
				</li>
			</menu>
		`;
  }
  /** Renders the reorder items. */
  reorderItems() {
    return a`
			<color-palette-reorder
				.colors=${this.colors}
				@hc-palette-change=${(i) => {
      this.dispatchEvent(new p({ colors: i.detail.colors })), this.reorder = !1;
    }}
			>
			</color-palette-reorder>
		`;
  }
};
s.styles = [O];
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({ type: Boolean })
], s.prototype, "reorder", 2);
s = l([
  f("color-palette-menu")
], s);
export {
  s as ColorPaletteMenu
};