@alegendstale/holly-components 0.2.2

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

@@ -0,0 +1,91 @@
+import { css as l, html as p } from "lit";
+import { customElement as u } from "lit/decorators.js";
+import { EventEmitter as c } from "../../../utils/EventEmitter.js";
+import { ColorPaletteItem as m } from "./color-palette-item.js";
+import { createElement as f, Trash2 as g } from "lucide";
+var h = Object.defineProperty, v = Object.getOwnPropertyDescriptor, d = Object.getPrototypeOf, b = Reflect.get, x = (t, r, o, i) => {
+  for (var e = i > 1 ? void 0 : i ? v(r, o) : r, n = t.length - 1, s; n >= 0; n--)
+    (s = t[n]) && (e = (i ? s(r, o, e) : s(e)) || e);
+  return i && e && h(r, o, e), e;
+}, _ = (t, r, o) => b(d(t), o, r);
+let a = class extends m {
+  constructor() {
+    super(...arguments), this.storedAlias = "", this.emitter = new c();
+  }
+  content() {
+    return p`
+			<input
+				value=${this.alias || this.color}
+				@pointerdown=${(t) => {
+      t.target instanceof HTMLInputElement && (t.stopPropagation(), this.storedAlias = t.target.value, t.target.value = "", t.target.focus());
+    }}
+				@contextmenu=${(t) => {
+      t.target instanceof HTMLInputElement && (t.stopPropagation(), t.preventDefault(), t.target.value = this.color.toUpperCase(), this.alias = "", t.target.blur());
+    }}
+				@keypress=${(t) => {
+      t.target instanceof HTMLInputElement && t.key === "Enter" && t.target.blur();
+    }}
+				@focusout=${(t) => {
+      t.target instanceof HTMLInputElement && (t.target.value.trim() === "" ? t.target.value = this.storedAlias : t.target.value !== this.color && (this.alias = t.target.value), this.emitter.emit("alias", this.alias));
+    }}
+			>
+			<button
+				id='trash'
+				title='Remove'
+				@click=${(t) => this.emitter.emit("trash", t)}
+			>
+				${f(g)}
+			</button>
+		`;
+  }
+};
+a.styles = [
+  ..._(a, a, "styles"),
+  l`
+			:host(:not([preventHover]):hover) {
+				flex-basis: 0 !important;
+			}
+
+			#container {
+				input {
+					color: var(--palette-item-color);
+					font-size: var(--palette-item-font-size);
+					font-weight: bold;
+					user-select: none;
+					border: none;
+					background-color: transparent;
+					field-sizing: content;
+					min-width: 2rem;
+					cursor: pointer;
+					text-align: center;
+				}
+
+				/* Color Trash Button */
+				#trash {
+					background-color: var(--palette-item-background-color);
+					color: var(--palette-item-color);
+					box-shadow: rgba(0, 0, 0, 0.35) 0px -50px 20px -28px inset;
+					cursor: pointer;
+
+					border: none;
+					border-radius: 5px;
+					padding: 4px 12px;
+
+					&:hover {
+						background-color: rgb(75, 75, 75);
+					}
+
+					svg {
+						width: 18px;
+						height: 18px;
+					}
+				}
+			}
+		`
+];
+a = x([
+  u("color-palette-item-edit")
+], a);
+export {
+  a as ColorPaletteItemEdit
+};

package/dist/components/color-palette/item/color-palette-item.d.ts

@@ -0,0 +1,29 @@
+import { LitElement } from 'lit';
+import { AliasMode, Direction } from '../color-palette-utils';
+import { EventEmitter } from '../../../utils/EventEmitter';
+export type EventMap = {
+    click: [e: MouseEvent];
+};
+export declare class ColorPaletteItem extends LitElement {
+    static styles: import("lit").CSSResult[];
+    container: HTMLDivElement;
+    color: string;
+    alias: string;
+    aliasMode: AliasMode;
+    direction: Direction;
+    editMode: boolean;
+    height: number;
+    preventHover: boolean;
+    hoverWhileEditing: boolean;
+    colorCount: number;
+    emitter: EventEmitter<EventMap>;
+    disconnectedCallback(): void;
+    render(): import("lit-html").TemplateResult<1>;
+    content(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'color-palette-item': ColorPaletteItem;
+    }
+}
+//# sourceMappingURL=color-palette-item.d.ts.map

package/dist/components/color-palette/item/color-palette-item.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-palette-item.d.ts","sourceRoot":"","sources":["../../../../src/components/color-palette/item/color-palette-item.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAErD,OAAO,EAAE,SAAS,EAAmB,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAC/E,OAAO,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAI3D,MAAM,MAAM,QAAQ,GAAG;IACtB,KAAK,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,CAAA;CACtB,CAAA;AAED,qBACa,gBAAiB,SAAQ,UAAU;IAC/C,MAAM,CAAC,MAAM,4BAgEX;IAGF,SAAS,EAAG,cAAc,CAAC;IAG3B,KAAK,EAAE,MAAM,CAAM;IAGnB,KAAK,EAAE,MAAM,CAAM;IAGnB,SAAS,EAAE,SAAS,CAA6B;IAGjD,SAAS,EAAE,SAAS,CAA6B;IAGjD,QAAQ,EAAE,OAAO,CAAS;IAG1B,MAAM,EAAE,MAAM,CAA0B;IAGxC,YAAY,EAAE,OAAO,CAAS;IAG9B,iBAAiB,EAAE,OAAO,CAAS;IAGnC,UAAU,EAAE,MAAM,CAAK;IAEhB,OAAO,EAAE,YAAY,CAAC,QAAQ,CAAC,CAAgC;IAEtE,oBAAoB,IAAI,IAAI;IAK5B,MAAM;IAkBN,OAAO;CAoBP;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,oBAAoB,EAAE,gBAAgB,CAAC;KACvC;CACD"}

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

@@ -0,0 +1,146 @@
+import { css as h, LitElement as m, html as s, nothing as f } from "lit";
+import { query as u, property as o, customElement as y } from "lit/decorators.js";
+import { defaultSettings as d, AliasMode as g } from "../color-palette-utils.js";
+import { EventEmitter as v } from "../../../utils/EventEmitter.js";
+import { styleMap as x } from "lit/directives/style-map.js";
+import { getForegroundColor as b, getAdjustedFontSize as C } from "../../../utils/basicUtils.js";
+var M = Object.defineProperty, $ = Object.getOwnPropertyDescriptor, e = (r, l, a, n) => {
+  for (var i = n > 1 ? void 0 : n ? $(l, a) : l, c = r.length - 1, p; c >= 0; c--)
+    (p = r[c]) && (i = (n ? p(l, a, i) : p(i)) || i);
+  return n && i && M(l, a, i), i;
+};
+let t = class extends m {
+  constructor() {
+    super(...arguments), this.color = "", this.alias = "", this.aliasMode = d.aliasMode, this.direction = d.direction, this.editMode = !1, this.height = d.height, this.preventHover = !1, this.hoverWhileEditing = !1, this.colorCount = 0, this.emitter = new v();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this.emitter.clear();
+  }
+  render() {
+    const r = {
+      "--palette-item-background-color": this.color,
+      "--palette-item-color": b(this.color),
+      "--palette-item-font-size": `${C(this.colorCount)}px`
+    };
+    return s`
+			<div
+				id='container'
+				style=${x(r)}
+				@click=${(l) => this.emitter.emit("click", l)}
+			>
+				${this.content()}
+			</div>
+		`;
+  }
+  content() {
+    const r = this.aliasMode === g.Both || this.alias == null || this.alias.trim() === "";
+    return s`
+			${r ? s`<span id='text'>${this.color.trim().toUpperCase()}</span>` : f}
+			${this.alias !== "" ? s`
+					<span id="alias">${this.alias}</span>
+				` : f}
+			
+		`;
+  }
+};
+t.styles = [
+  h`
+			:host {
+				display: flex;
+				flex: 1;
+				transition: all 0.1s ease-in-out;
+				--palette-item-background-color: #000000;
+				--palette-item-color: #ffffff;
+				--palette-item-font-size: 16px;
+			}
+
+			:host(:not([preventHover]):hover) {
+				flex-basis: var(--palette-column-flex-basis);
+
+				#container > span {
+					display: block;
+				}
+			}
+
+			:host([direction='column']:not([preventHover]):hover) {
+				flex-basis: 80px;
+			}
+			
+			:host([direction='column']) > #container{
+				display: flex;
+				flex-direction: column;
+				justify-content: center;
+			}
+
+			:host([direction='row']) > #container {
+				display: flex;
+				justify-content: center;
+			}
+
+			:host([direction='row'][editMode]) > #container {
+				display: grid;
+				grid-template-columns: 1fr 1fr;
+			}
+
+			#container {
+				flex: 1;
+				gap: 3%;
+				background-color: var(--palette-item-background-color);
+				color: var(--palette-item-color);
+
+				*:first-child {
+					justify-self: flex-end;
+					align-self: center;
+				}
+
+				*:last-child {
+					justify-self: flex-start;
+					align-self: center;
+				}
+
+				span {
+					display: none;
+					text-align: center;
+					font-size: 100%;
+					font-weight: bold;
+					user-select: none;
+				}
+			}
+		`
+];
+e([
+  u("#container")
+], t.prototype, "container", 2);
+e([
+  o({ type: String })
+], t.prototype, "color", 2);
+e([
+  o({ type: String })
+], t.prototype, "alias", 2);
+e([
+  o({ type: String })
+], t.prototype, "aliasMode", 2);
+e([
+  o({ type: String, reflect: !0 })
+], t.prototype, "direction", 2);
+e([
+  o({ type: Boolean, reflect: !0 })
+], t.prototype, "editMode", 2);
+e([
+  o({ type: Number })
+], t.prototype, "height", 2);
+e([
+  o({ type: Boolean, reflect: !0 })
+], t.prototype, "preventHover", 2);
+e([
+  o({ type: Boolean })
+], t.prototype, "hoverWhileEditing", 2);
+e([
+  o({ type: Number })
+], t.prototype, "colorCount", 2);
+t = e([
+  y("color-palette-item")
+], t);
+export {
+  t as ColorPaletteItem
+};

package/dist/components/color-palette/item/index.d.ts

@@ -0,0 +1,3 @@
+import './color-palette-item';
+import './color-palette-item-edit';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/color-palette/item/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/color-palette/item/index.ts"],"names":[],"mappings":"AAAA,OAAO,sBAAsB,CAAA;AAC7B,OAAO,2BAA2B,CAAA"}

package/dist/components/color-palette/menu/color-palette-menu.d.ts

@@ -0,0 +1,30 @@
+import { LitElement } from 'lit';
+import { EventEmitter } from '../../../utils/EventEmitter';
+import { CopyFormat, PaletteSettings } from '../color-palette-utils';
+import { AbsoluteContainer } from '../../absolute-container/absolute-container';
+type EventMap = {
+    change: [colors: string[] | undefined];
+    editMode: [val: boolean];
+    openEditor: [];
+};
+export declare class ColorPaletteMenu extends LitElement {
+    static styles: import("lit").CSSResult[];
+    absolute: AbsoluteContainer;
+    colors: string[];
+    settings?: Partial<PaletteSettings>;
+    editMode: Boolean;
+    copyFormat: CopyFormat;
+    reorder: boolean;
+    emitter: EventEmitter<EventMap>;
+    disconnectedCallback(): void;
+    render(): import("lit-html").TemplateResult<1>;
+    menuItems(): import("lit-html").TemplateResult<1>;
+    reorderItems(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'color-palette-menu': ColorPaletteMenu;
+    }
+}
+export {};
+//# sourceMappingURL=color-palette-menu.d.ts.map

package/dist/components/color-palette/menu/color-palette-menu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-palette-menu.d.ts","sourceRoot":"","sources":["../../../../src/components/color-palette/menu/color-palette-menu.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAErD,OAAO,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAC3D,OAAO,EAAE,UAAU,EAAmB,eAAe,EAAE,MAAM,wBAAwB,CAAC;AAItF,OAAO,EAAE,iBAAiB,EAAE,MAAM,6CAA6C,CAAC;AAIhF,KAAK,QAAQ,GAAG;IACf,MAAM,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,GAAG,SAAS,CAAC,CAAA;IACtC,QAAQ,EAAE,CAAC,GAAG,EAAE,OAAO,CAAC,CAAA;IACxB,UAAU,EAAE,EAAE,CAAA;CACd,CAAA;AAED,qBACa,gBAAiB,SAAQ,UAAU;IAC/C,MAAM,CAAC,MAAM,4BAiDX;IAGF,QAAQ,EAAG,iBAAiB,CAAC;IAG7B,MAAM,EAAE,MAAM,EAAE,CAAM;IAGtB,QAAQ,CAAC,EAAE,OAAO,CAAC,eAAe,CAAC,CAAC;IAGpC,QAAQ,EAAE,OAAO,CAAS;IAG1B,UAAU,EAAE,UAAU,CAA8B;IAGpD,OAAO,EAAE,OAAO,CAAS;IAEzB,OAAO,EAAE,YAAY,CAAC,QAAQ,CAAC,CAAgC;IAE/D,oBAAoB,IAAI,IAAI;IAK5B,MAAM;IAuBN,SAAS;IAuHT,YAAY;CAmBZ;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,oBAAoB,EAAE,gBAAgB,CAAC;KACvC;CACD"}

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

@@ -0,0 +1,231 @@
+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;
+};
+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>
+		`;
+  }
+  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
+						@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
+									@click=${() => {
+      this.emitter.emit("editMode", !this.editMode);
+    }}
+								>
+									${i(P)}
+									<span>Quick Edit</span>
+									${this.editMode ? i(M) : h}
+								</button>
+							</li>
+					`}
+				<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
+						@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
+						@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
+						@click=${async () => {
+      await b(JSON.stringify(n), this.copyFormat), this.emitter.emit("change", []);
+    }}
+					>
+						${i(O)}
+						<span>Cut</span>
+					</button>
+				</li>
+				<li>
+					<button
+						@click=${async () => {
+      await b(JSON.stringify(n), this.copyFormat);
+    }}
+					>
+						${i(R)}
+						<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>
+		`;
+  }
+};
+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);
+			}
+		`
+];
+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
+};

package/dist/components/color-palette/menu/color-palette-reorder.d.ts

@@ -0,0 +1,31 @@
+import { LitElement } from 'lit';
+import { EventEmitter } from '../../../utils/EventEmitter';
+import { AbsoluteContainer } from '../../absolute-container/absolute-container';
+declare enum Reorder {
+    Hue = "Hue",
+    Saturation = "Saturation",
+    Lightness = "Lightness",
+    Red = "Red",
+    Green = "Green",
+    Blue = "Blue",
+    Alpha = "Alpha"
+}
+type EventMap = {
+    submit: [colors: string[]];
+};
+export declare class ColorPaletteReorder extends LitElement {
+    static styles: import("lit").CSSResult[];
+    absolute: AbsoluteContainer;
+    colors: string[];
+    emitter: EventEmitter<EventMap>;
+    disconnectedCallback(): void;
+    render(): import("lit-html").TemplateResult<1>;
+    selectOption(item: Reorder): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'color-palette-reorder': ColorPaletteReorder;
+    }
+}
+export {};
+//# sourceMappingURL=color-palette-reorder.d.ts.map

package/dist/components/color-palette/menu/color-palette-reorder.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-palette-reorder.d.ts","sourceRoot":"","sources":["../../../../src/components/color-palette/menu/color-palette-reorder.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAG5C,OAAO,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAC3D,OAAO,EAAE,iBAAiB,EAAE,MAAM,6CAA6C,CAAC;AAEhF,aAAK,OAAO;IACX,GAAG,QAAQ;IACX,UAAU,eAAe;IACzB,SAAS,cAAc;IACvB,GAAG,QAAQ;IACX,KAAK,UAAU;IACf,IAAI,SAAS;IACb,KAAK,UAAU;CACf;AAED,KAAK,QAAQ,GAAG;IACf,MAAM,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,CAAC,CAAA;CAC1B,CAAA;AAED,qBACa,mBAAoB,SAAQ,UAAU;IAClD,MAAM,CAAC,MAAM,4BA+BX;IAGF,QAAQ,EAAG,iBAAiB,CAAC;IAG7B,MAAM,EAAE,MAAM,EAAE,CAAM;IAEf,OAAO,EAAE,YAAY,CAAC,QAAQ,CAAC,CAAgC;IAEtE,oBAAoB,IAAI,IAAI;IAM5B,MAAM;IAuBN,YAAY,CAAC,IAAI,EAAE,OAAO;CAiC1B;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,uBAAuB,EAAE,mBAAmB,CAAC;KAC7C;CACD"}

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

@@ -0,0 +1,108 @@
+import u from "colorsea";
+import { css as m, LitElement as h, html as c } from "lit";
+import { query as b, property as d, customElement as g } from "lit/decorators.js";
+import { repeat as x } from "lit/directives/repeat.js";
+import { EventEmitter as f } from "../../../utils/EventEmitter.js";
+var k = Object.defineProperty, y = Object.getOwnPropertyDescriptor, p = (t, o, s, e) => {
+  for (var r = e > 1 ? void 0 : e ? y(o, s) : o, n = t.length - 1, l; n >= 0; n--)
+    (l = t[n]) && (r = (e ? l(o, s, r) : l(r)) || r);
+  return e && r && k(o, s, r), r;
+}, i = /* @__PURE__ */ ((t) => (t.Hue = "Hue", t.Saturation = "Saturation", t.Lightness = "Lightness", t.Red = "Red", t.Green = "Green", t.Blue = "Blue", t.Alpha = "Alpha", t))(i || {});
+let a = class extends h {
+  constructor() {
+    super(...arguments), this.colors = [], this.emitter = new f();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this.emitter.clear();
+  }
+  render() {
+    return c`
+			<menu>
+				${x(
+      Object.keys(i),
+      (t) => c`
+								<button
+									@click=${(o) => {
+        this.selectOption(t);
+      }}
+								>
+									<span>${t}</span>
+								</button>
+							`
+    )}
+			</menu>
+		`;
+  }
+  selectOption(t) {
+    const o = this.colors.map((e) => u(e));
+    let s = [];
+    switch (t) {
+      case "Hue":
+        s = o.sort((e, r) => e.hue() - r.hue()).map((e) => e.hex());
+        break;
+      case "Saturation":
+        s = o.sort((e, r) => e.saturation() - r.saturation()).map((e) => e.hex());
+        break;
+      case "Lightness":
+        s = o.sort((e, r) => e.lightness() - r.lightness()).map((e) => e.hex());
+        break;
+      case "Red":
+        s = o.sort((e, r) => e.red() - r.red()).map((e) => e.hex());
+        break;
+      case "Green":
+        s = o.sort((e, r) => e.green() - r.green()).map((e) => e.hex());
+        break;
+      case "Blue":
+        s = o.sort((e, r) => e.blue() - r.blue()).map((e) => e.hex());
+        break;
+      case "Alpha":
+        s = o.sort((e, r) => e.alpha() - r.alpha()).map((e) => e.hex());
+        break;
+    }
+    this.emitter.emit("submit", s);
+  }
+};
+a.styles = [
+  m`
+			:host {
+				display: block;
+			}
+			
+			menu {
+				display: flex;
+				flex-direction: column;
+				gap: .5rem;
+				background-color: rgb(27, 27, 27);
+				padding: .5rem;
+				border-radius: 5px;
+
+				button {
+					color: rgb(245, 245, 245);
+					background-color: transparent;
+					border: none;
+					padding: 4px 12px;
+					cursor: pointer;
+
+					&:hover {
+						background-color: rgb(75, 75, 75);
+					}
+
+					span {
+						font-size: 14px;
+					}
+				}
+			}
+		`
+];
+p([
+  b("absolute-container")
+], a.prototype, "absolute", 2);
+p([
+  d({ type: Array })
+], a.prototype, "colors", 2);
+a = p([
+  g("color-palette-reorder")
+], a);
+export {
+  a as ColorPaletteReorder
+};

package/dist/components/color-palette/menu/index.d.ts

@@ -0,0 +1,3 @@
+import './color-palette-menu';
+import './color-palette-reorder';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/color-palette/menu/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/color-palette/menu/index.ts"],"names":[],"mappings":"AAAA,OAAO,sBAAsB,CAAA;AAC7B,OAAO,yBAAyB,CAAA"}