@alegendstale/holly-components 0.2.2

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

@@ -0,0 +1,611 @@
+import { css as P, LitElement as H, html as g } from "lit";
+import { query as D, property as u, state as M, customElement as U } from "lit/decorators.js";
+import { createElement as h, Pipette as S, Shuffle as C, Image as j, Link as R, ArrowUpToLine as G } from "lucide";
+import { defaultSettings as m, Direction as _, urlRegex as z, CopyFormat as A } from "../color-palette-utils.js";
+import { Combination as b, generateColors as L } from "../../../utils/generateUtils.js";
+import y from "colorsea";
+import { parseUrl as B, copyToClipboard as F } from "../../../utils/basicUtils.js";
+import { CanvasImage as E } from "../../canvas/canvas-image.js";
+import { ref as f, createRef as $ } from "lit/directives/ref.js";
+import { EventEmitter as W } from "../../../utils/EventEmitter.js";
+import { ColorPalette as q } from "../color-palette.js";
+var X = Object.defineProperty, Y = Object.getOwnPropertyDescriptor, s = (t, i, n, a) => {
+  for (var r = a > 1 ? void 0 : a ? Y(i, n) : i, l = t.length - 1, p; l >= 0; l--)
+    (p = t[l]) && (r = (a ? p(i, n, r) : p(r)) || r);
+  return a && r && X(i, n, r), r;
+};
+let c = class extends H {
+  constructor() {
+    super(...arguments), this.colors = [], this.settings = {
+      height: m.height,
+      width: m.width,
+      direction: m.direction,
+      gradient: m.gradient,
+      preventHover: m.preventHover,
+      override: m.override,
+      aliases: []
+    }, this.selectedInput = "Color Picker", this.combination = b.Random, this.colorPickerDisabled = !1, this.emitter = new W();
+  }
+  disconnectedCallback() {
+    this.emitter.clear();
+  }
+  render() {
+    const t = () => {
+      switch (this.selectedInput) {
+        case "Color Picker":
+          return this.pickerOption();
+        case "Generate":
+          return this.generateOption();
+        case "Image":
+          return this.imageOption();
+        case "URL":
+          return this.urlOption();
+      }
+    }, i = (n) => {
+      n instanceof q && n.emitter.on("changed", (a, r) => {
+        this.colors = a, this.settings = r;
+      });
+    };
+    return g`
+			<div id="color-palette-editor">
+				<h1>Editor</h1>
+				<section id='colors'>
+					<h3>Colors</h3>
+					<div id="control-container">
+						<button
+							title="Color Picker"
+							@click=${() => this.selectedInput = "Color Picker"}
+						>
+							${h(S)}
+						</button>
+						<button
+							title="Generate"
+							@click=${() => this.selectedInput = "Generate"}
+						>
+							${h(C)}
+						</button>
+						<button
+							title="Image"
+							@click=${() => this.selectedInput = "Image"}
+						>
+							${h(j)}
+						</button>
+						<button
+							title="URL"
+							@click=${() => this.selectedInput = "URL"}
+						>
+							${h(R)}
+						</button>
+					</div>
+					<div id='colors-container'>
+						${t()}
+					</div>
+				</section>
+				<section id='preview'>
+					<color-palette
+						.colors=${this.colors}
+						height=${this.settings.height}
+						width=${this.settings.width}
+						direction=${this.settings.direction}
+						?gradient=${this.settings.gradient}
+						?preventHover=${this.settings.preventHover}
+						?override=${this.settings.override}
+						.aliases=${this.settings.aliases}
+						?editMode=${!0}
+						maxWidth=${560}
+						${f(i)}
+					>
+					</color-palette>
+				</section>
+				<section id='settings'>
+					<h3>Settings</h3>
+					${this.renderSettings()}
+					<button
+						id='create-btn'
+						@click=${() => {
+      try {
+        this.colors.length === 0 && (this.colors = L(b.Random).colors), this.emitter.emit("submit", this.colors, this.settings);
+      } catch {
+      }
+    }}
+					>
+						Create
+					</button>
+				</section>
+			</div>
+		`;
+  }
+  renderSettings() {
+    return g`
+			<setting-item
+				name='Height'
+			>
+				<input
+					type='number'
+					value=${this.settings.height}
+					step=${5}
+					@input=${(t) => {
+      t.target instanceof HTMLInputElement && (this.settings = { ...this.settings, height: +t.target.value });
+    }}
+				>
+			</setting-item>
+			<setting-item
+				name='Width'
+				description='Caution - Might cause palette to display incorrectly.'
+			>
+				<input
+						type='number'
+						value=${this.settings.width}
+						step=${10}
+						@input=${(t) => {
+      t.target instanceof HTMLInputElement && (this.settings = { ...this.settings, width: +t.target.value });
+    }}
+				>
+			</setting-item>
+			<setting-item
+				name='Direction'
+			>
+				<select
+					@change=${(t) => {
+      t.target instanceof HTMLSelectElement && (this.settings = { ...this.settings, direction: t.target.value });
+    }}
+				>
+					${Object.values(_).map((t) => g`<option ?selected=${this.settings.direction === t}>${t}</option>`)}
+				</select>
+			</setting-item>
+			<setting-item
+				name='Gradient'
+			>
+				<input
+					type='checkbox'
+					?checked=${this.settings.gradient}
+					@change=${(t) => {
+      t.target instanceof HTMLInputElement && (this.settings = { ...this.settings, gradient: t.target.checked });
+    }}
+				>
+			</setting-item>
+			<setting-item
+				name='Prevent Hover'
+				description='Toggles whether palettes can be hovered'
+			>
+				<input
+					type='checkbox'
+					?checked=${this.settings.preventHover}
+					@change=${(t) => {
+      t.target instanceof HTMLInputElement && (this.settings = { ...this.settings, preventHover: t.target.checked });
+    }}
+				>
+			</setting-item>
+			<setting-item
+				name='Override'
+				description='Disables color validation for full control (advanced)'
+			>
+				<input
+					type='checkbox'
+					?checked=${this.settings.override}
+					@change=${(t) => {
+      t.target instanceof HTMLInputElement && (this.settings = { ...this.settings, override: t.target.checked });
+    }}
+				>
+			</setting-item>
+		`;
+  }
+  pickerOption() {
+    return g`
+			<setting-item
+				name='Color Picker'
+				description='Use handpicked colors'
+			>
+				<input
+					type='color'
+					@change=${(t) => {
+      t.target instanceof HTMLInputElement && (this.colors = [...this.colors, t.target.value], this.settings.aliases.push(""));
+    }}
+				>
+			</setting-item>
+		`;
+  }
+  generateOption() {
+    return this.colorPickerDisabled = this.combination === b.Random, g`
+			<setting-item
+				name='Generate'
+				description='Generate colors based on color theory'
+			>
+				<select
+					@change=${(t) => {
+      t.target instanceof HTMLSelectElement && (this.combination = t.target.value, this.colorPickerDisabled = this.combination === b.Random);
+    }}
+				>
+					${Object.values(b).map((t) => g`<option ?selected=${this.combination === t}>${t}</option>`)}
+				</select>
+				<input
+					type='color'
+					?disabled=${this.colorPickerDisabled}
+					@change=${(t) => {
+      t.target instanceof HTMLInputElement && (this.baseColor = y(t.target.value));
+    }}
+					@contextmenu=${(t) => {
+      t.preventDefault(), t.target instanceof HTMLInputElement && (t.target.value = y("#000").hex(), this.baseColor = void 0);
+    }}
+				>
+				<button
+					title='Loads the generated colors'
+					@click=${(t) => {
+      const i = L(this.combination, { baseColor: this.baseColor, settings: this.settings });
+      this.colors = i.colors, i.settings && (this.settings = i.settings);
+    }}
+				>
+					${h(C)}
+				</button>
+			</setting-item>
+		`;
+  }
+  imageOption() {
+    var w;
+    let t = "", i = $(), n = $(), a = $(), r = ((w = i.value) == null ? void 0 : w.value) || "", l, p = $(), O = (e) => {
+      e instanceof E && (l = e, e.emitter.clear(), e.emitter.on("click", async (o) => await F(o.toUpperCase(), A.Raw)), e.emitter.on("move", (o) => {
+        if (!p.value) return;
+        let d = p.value;
+        d.text = e.getCanvasHex(o.x, o.y).toUpperCase(), d.setClampedPosition(o, e.getBoundingClientRect());
+      }));
+    };
+    const T = async () => {
+      if (!n.value || !l) return;
+      const e = n.value;
+      return await l.getPalette(+e.value);
+    }, k = async () => {
+      const e = await T();
+      e && (this.colors = e.map((o) => y(o).hex(0)), this.settings.aliases = []);
+    }, x = async (e) => {
+      if (!URL.canParse(e) || !l) return;
+      l.updateImage(e, this.palette.getBoundingClientRect().width, this.palette.getBoundingClientRect().height), await k();
+    };
+    return g`
+			<setting-item
+				name='Image'
+				description='Convert image into palette'
+			>
+				<input
+					type='url'
+					placeholder='Enter URL or select file'
+					${f(i)}
+				>
+				<button
+					title='Right click to clear URL'
+					@click=${async (e) => {
+      try {
+        if (!a.value) return;
+        let o = a.value;
+        if (r !== "")
+          if (URL.canParse(r)) await x(r);
+          else throw new Error("URL provided is not valid.");
+        else o.click();
+      } catch {
+      }
+    }}
+					@contextmenu=${() => {
+      if (!i.value) return;
+      const e = i.value;
+      e.value = "";
+    }}
+				>
+					${h(G)}
+				</button>
+				<input
+					type ='file'
+					accept = 'image/*'
+					@change=${(e) => {
+      var o;
+      try {
+        const d = new FileReader(), I = (o = e.target.files) == null ? void 0 : o[0];
+        I && d.readAsDataURL(I), d.addEventListener("load", async () => {
+          typeof d.result == "string" && (r = d.result, await x(r));
+        }), d.addEventListener("error", () => {
+          throw new Error("Error processing image");
+        });
+      } catch {
+      }
+    }}
+					${f(a)}
+				>
+			</setting-item>
+			<setting-item
+				name='Count'
+				description='Set the number of colors to generate from the image'
+			>
+				<input
+					id='range-slider'
+					type='range'
+					min='4'
+					max='12'
+					value='8'
+					@change=${async () => {
+      await k();
+    }}
+					${f(n)}
+				>
+			</setting-item>
+			<tool-tip
+				trigger='hover'
+				${f(p)}
+			>
+				<canvas-image
+					@mousemove=${(e) => {
+      e.target instanceof E && (t = e.target.getCanvasHex(e.clientX, e.clientY));
+    }}
+					@click=${(e) => {
+      t && (this.colors = [...this.colors, t], this.settings.aliases = [...this.settings.aliases, ""]);
+    }}
+					${f(O)}
+				>
+				</canvas-image>
+			</tool-tip>
+		`;
+  }
+  urlOption() {
+    let t;
+    return g`
+			<setting-item
+				name='URL'
+				description='Only coolors.co & colorhunt.co are currently supported'
+			>
+				<input
+					type='url'
+					placeholder='Enter URL'
+					@change=${(i) => {
+      i.target instanceof HTMLInputElement && (t = i.target);
+    }}
+				>
+				<button
+					title='Right click to clear URL'
+					@click=${(i) => {
+      try {
+        if (!t.value.match(z)) throw new Error("URL provided is not valid.");
+        this.colors = B(t.value), this.settings.aliases = [];
+      } catch {
+      }
+    }}
+					@contextmenu=${(i) => {
+      i.preventDefault(), t && (t.value = "");
+    }}
+				>
+					${h(R)}
+				</button>
+			</setting-item>
+		`;
+  }
+};
+c.styles = [
+  P`
+			:host {
+				display: block;
+				contain: content;
+				width: 560px;
+				padding: 16px;
+				background-color: rgb(27, 27, 27);
+				color: rgba(245, 245, 245, .9);
+				border-radius: 5px;
+				
+				--cta-background: hsl(262, 83%, 69%);
+			}
+
+			input[type='file'] {
+				display: none;
+			}
+
+			:host([selectedInput="Color Picker"]) {
+				#color-palette-editor #colors {
+					div:nth-of-type(1) {
+						button[title="Color Picker"] {
+							background-color: var(--cta-background);
+						}
+					}
+					div:nth-of-type(2) {
+						canvas {
+							max-width: 100%;
+							max-height: fit-content;
+							object-fit: cover;
+						}
+					}
+				}
+			}
+
+			:host([selectedInput="Generate"]) {
+				#color-palette-editor #colors div {
+					button[title="Generate"] {
+						background-color: var(--cta-background);
+					}
+				}
+			}
+
+			:host([selectedInput="Image"]) {
+				#color-palette-editor #colors div {
+					button[title="Image"] {
+						background-color: var(--cta-background);
+					}
+				}
+			}
+
+			:host([selectedInput="URL"]) {
+				#color-palette-editor #colors div {
+					button[title="URL"] {
+						background-color: var(--cta-background);
+					}
+				}
+			}
+
+			#color-palette-editor {
+				display: flex;
+				flex-direction: column;
+				gap: .5rem;
+
+				h1 {
+					font-size: 2.25rem;
+				}
+
+				button {
+					cursor: pointer;
+				}
+
+				#colors {
+					div {
+						input:not([type='color']) {
+							color: rgb(245, 245, 245);
+							background-color: rgb(38, 38, 38);
+							border: none;
+							border-radius: 5px;
+							height: fit-content;
+							width: fit-content;
+							padding: .5rem;
+						}
+
+						select {
+							color: rgb(245, 245, 245);
+							background-color: rgb(38, 38, 38);
+							border: none;
+							border-radius: 5px;
+							height: fit-content;
+							width: fit-content;
+							padding: .5rem;
+						}
+
+						button {
+							color: rgb(245, 245, 245);
+							background-color: rgb(38, 38, 38);
+							border: none;
+							border-radius: 5px;
+							height: fit-content;
+							width: fit-content;
+							padding: 4px 12px;
+						}
+					}
+				}
+
+				#settings {
+					display: flex;
+					flex-direction: column;
+
+					input {
+						color: rgb(245, 245, 245);
+						background-color: rgb(38, 38, 38);
+						border: none;
+						border-radius: 5px;
+						height: fit-content;
+						width: fit-content;
+						padding: .5rem;
+					}
+
+					select {
+						color: rgb(245, 245, 245);
+						background-color: rgb(38, 38, 38);
+						border: none;
+						border-radius: 5px;
+						height: fit-content;
+						width: fit-content;
+						padding: .5rem;
+					}
+
+					#create-btn {
+						background-color: var(--cta-background);
+						color: white;
+						border-radius: 5px;
+						padding: 4px 12px;
+						user-select: none;
+						border: none;
+						width: fit-content;
+						align-self: flex-end;
+
+						&:hover {
+							background-color: hsl(calc( 262 - 3), calc( 83% * 1.02), calc( 69% * 1.15));
+						}
+					}
+				}
+			}
+		`
+];
+s([
+  D("#color-palette-editor")
+], c.prototype, "palette", 2);
+s([
+  u({ type: Array })
+], c.prototype, "colors", 2);
+s([
+  u({ type: Object })
+], c.prototype, "settings", 2);
+s([
+  u({ type: String, reflect: !0 })
+], c.prototype, "selectedInput", 2);
+s([
+  u({ type: String })
+], c.prototype, "combination", 2);
+s([
+  u({ type: Object })
+], c.prototype, "baseColor", 2);
+s([
+  M()
+], c.prototype, "colorPickerDisabled", 2);
+c = s([
+  U("color-palette-editor")
+], c);
+let v = class extends H {
+  constructor() {
+    super(...arguments), this.name = "", this.description = "";
+  }
+  render() {
+    return g`
+			<div>
+				<h3>${this.name}</h3>
+				<p>${this.description}</p>
+			</div>
+			<slot></slot>
+		`;
+  }
+};
+v.styles = [
+  P`
+			:host {
+				display: grid;
+				grid-template-columns: 1fr 1fr;
+				padding-block: 2%;
+			}
+
+			:host(:not([description])) p {
+				display: none;
+			}
+
+			h3 {
+				margin: 0;
+				font-size: 15px;
+			}
+
+			p {
+				margin: 0;
+				padding-top: 4px;
+				font-size: 12px;
+			}
+			
+			slot {
+				display: flex;
+				justify-self: flex-end;
+				align-items: center;
+				gap: 5%;
+			}
+
+			::slotted(input[type="color"]) {
+				border: none;
+			}
+		`
+];
+s([
+  u({ type: String })
+], v.prototype, "name", 2);
+s([
+  u({ type: String })
+], v.prototype, "description", 2);
+v = s([
+  U("setting-item")
+], v);
+export {
+  c as ColorPaletteEditor,
+  v as SettingItem
+};

package/dist/components/color-palette/editor/color-palette-editor.stories.d.ts

@@ -0,0 +1,11 @@
+import type { Meta, StoryObj } from '@storybook/web-components';
+import { PaletteSettings } from '../color-palette-utils';
+declare const meta: Meta;
+export default meta;
+type Props = {
+    colors: string[];
+    settings: PaletteSettings;
+};
+type Story = StoryObj<Props>;
+export declare const Default: Story;
+//# sourceMappingURL=color-palette-editor.stories.d.ts.map

package/dist/components/color-palette/editor/color-palette-editor.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-palette-editor.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/color-palette/editor/color-palette-editor.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAMhE,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AAGzD,QAAA,MAAM,IAAI,EAAE,IAIX,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG;IAAE,MAAM,EAAE,MAAM,EAAE,CAAC;IAAC,QAAQ,EAAE,eAAe,CAAA;CAAE,CAAC;AAE7D,KAAK,KAAK,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;AAwB7B,eAAO,MAAM,OAAO,EAAE,KAMrB,CAAC"}

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

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

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

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

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

@@ -0,0 +1,6 @@
+import './color-palette';
+import './item';
+import './menu';
+import './component';
+import './editor';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/color-palette/index.ts"],"names":[],"mappings":"AAAA,OAAO,iBAAiB,CAAA;AACxB,OAAO,QAAQ,CAAA;AACf,OAAO,QAAQ,CAAA;AACf,OAAO,aAAa,CAAA;AACpB,OAAO,UAAU,CAAA"}

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

@@ -0,0 +1,20 @@
+import { EventEmitter } from "../../../utils/EventEmitter";
+import { ColorPaletteItem, EventMap as ItemEvents } from "./color-palette-item";
+type EditEvents = {
+    trash: [e: MouseEvent];
+    alias: [alias: string];
+};
+type EventMap = EditEvents & ItemEvents;
+export declare class ColorPaletteItemEdit extends ColorPaletteItem {
+    static styles: import("lit").CSSResult[];
+    storedAlias: string;
+    emitter: EventEmitter<EventMap>;
+    content(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'color-palette-item-edit': ColorPaletteItemEdit;
+    }
+}
+export {};
+//# sourceMappingURL=color-palette-item-edit.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"color-palette-item-edit.d.ts","sourceRoot":"","sources":["../../../../src/components/color-palette/item/color-palette-item-edit.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAC3D,OAAO,EAAE,gBAAgB,EAAE,QAAQ,IAAI,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAGhF,KAAK,UAAU,GAAG;IACjB,KAAK,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,CAAC;IACvB,KAAK,EAAE,CAAC,KAAK,EAAE,MAAM,CAAC,CAAA;CACtB,CAAA;AAED,KAAK,QAAQ,GAAG,UAAU,GAAG,UAAU,CAAC;AAExC,qBACa,oBAAqB,SAAQ,gBAAgB;IACzD,MAAM,CAAC,MAAM,4BA2CX;IAEF,WAAW,EAAE,MAAM,CAAM;IAEzB,OAAO,EAAE,YAAY,CAAC,QAAQ,CAAC,CAAgC;IAE/D,OAAO;CA+CP;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,yBAAyB,EAAE,oBAAoB,CAAC;KAChD;CACD"}