@alegendstale/holly-components 0.2.8 → 0.2.10

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

@@ -1,611 +1,722 @@
-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;
+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 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'
+import { LitElement, html, css } from 'lit';
+import { customElement, property, query, state } from 'lit/decorators.js';
+import { ArrowUpToLine, createElement, Image, Link, Pipette, Shuffle } from 'lucide';
+import { defaultSettings, Direction } from '../color-palette-utils';
+import { Combination, generateColors } from '../../../utils/generateUtils';
+import colorsea from 'colorsea';
+import { copyToClipboard, parseUrl } from '../../../utils/basicUtils';
+import { CopyFormat, urlRegex } from '../color-palette-utils';
+import { CanvasImage } from '../../canvas/canvas-image';
+import { ref, createRef } from 'lit/directives/ref.js';
+import { EventEmitter } from '../../../utils/EventEmitter';
+import { ColorPalette } from '../color-palette';
+var SelectedInput;
+(function (SelectedInput) {
+    SelectedInput["Color_Picker"] = "Color Picker";
+    SelectedInput["Generate"] = "Generate";
+    SelectedInput["Image"] = "Image";
+    SelectedInput["URL"] = "URL";
+})(SelectedInput || (SelectedInput = {}));
+let ColorPaletteEditor = class ColorPaletteEditor extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.colors = [];
+        this.settings = {
+            height: defaultSettings.height,
+            width: defaultSettings.width,
+            direction: defaultSettings.direction,
+            gradient: defaultSettings.gradient,
+            preventHover: defaultSettings.preventHover,
+            override: defaultSettings.override,
+            aliases: []
+        };
+        this.selectedInput = SelectedInput.Color_Picker;
+        this.combination = Combination.Random;
+        this.colorPickerDisabled = false;
+        this.emitter = new EventEmitter();
+    }
+    disconnectedCallback() {
+        this.emitter.clear();
+    }
+    render() {
+        const chooseControl = () => {
+            switch (this.selectedInput) {
+                case SelectedInput.Color_Picker:
+                    return this.pickerOption();
+                case SelectedInput.Generate:
+                    return this.generateOption();
+                case SelectedInput.Image:
+                    return this.imageOption();
+                case SelectedInput.URL:
+                    return this.urlOption();
+            }
+        };
+        const paletteRef = (palette) => {
+            if (!(palette instanceof ColorPalette))
+                return;
+            palette.emitter.on('changed', (colors, settings) => {
+                this.colors = colors;
+                this.settings = settings;
+            });
+        };
+        return html `
+			<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 = SelectedInput.Color_Picker}
+						>
+							${createElement(Pipette)}
+						</button>
+						<button
+							title="Generate"
+							@click=${() => this.selectedInput = SelectedInput.Generate}
+						>
+							${createElement(Shuffle)}
+						</button>
+						<button
+							title="Image"
+							@click=${() => this.selectedInput = SelectedInput.Image}
+						>
+							${createElement(Image)}
+						</button>
+						<button
+							title="URL"
+							@click=${() => this.selectedInput = SelectedInput.URL}
+						>
+							${createElement(Link)}
+						</button>
+					</div>
+					<div id='colors-container'>
+						${chooseControl()}
+					</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=${true}
+						maxWidth=${560}
+						${ref(paletteRef)}
+					>
+					</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>
+            try {
+                // Generate random colors if none are provided
+                if (this.colors.length === 0)
+                    this.colors = generateColors(Combination.Random).colors;
+                this.emitter.emit('submit', this.colors, this.settings);
+            }
+            catch (e) {
+                // new Notice(e);
+            }
+        }}
+					>
+						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>
+    }
+    renderSettings() {
+        return html `
+			<setting-item
+				name='Height'
+			>
+				<input
+					type='number'
+					value=${this.settings.height}
+					step=${5}
+					@input=${(e) => {
+            if (!(e.target instanceof HTMLInputElement))
+                return;
+            this.settings = { ...this.settings, height: +e.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=${(e) => {
+            if (!(e.target instanceof HTMLInputElement))
+                return;
+            this.settings = { ...this.settings, width: +e.target.value };
+        }}
+				>
+			</setting-item>
+			<setting-item
+				name='Direction'
+			>
+				<select
+					@change=${(e) => {
+            if (!(e.target instanceof HTMLSelectElement))
+                return;
+            this.settings = { ...this.settings, direction: e.target.value };
+        }}
+				>
+					${Object.values(Direction).map((val) => {
+            return html `<option ?selected=${this.settings.direction === val}>${val}</option>`;
+        })}
+				</select>
+			</setting-item>
+			<setting-item
+				name='Gradient'
+			>
+				<input
+					type='checkbox'
+					?checked=${this.settings.gradient}
+					@change=${(e) => {
+            if (!(e.target instanceof HTMLInputElement))
+                return;
+            this.settings = { ...this.settings, gradient: e.target.checked };
+        }}
+				>
+			</setting-item>
+			<setting-item
+				name='Prevent Hover'
+				description='Toggles whether palettes can be hovered'
+			>
+				<input
+					type='checkbox'
+					?checked=${this.settings.preventHover}
+					@change=${(e) => {
+            if (!(e.target instanceof HTMLInputElement))
+                return;
+            this.settings = { ...this.settings, preventHover: e.target.checked };
+        }}
+				>
+			</setting-item>
+			<setting-item
+				name='Override'
+				description='Disables color validation for full control (advanced)'
+			>
+				<input
+					type='checkbox'
+					?checked=${this.settings.override}
+					@change=${(e) => {
+            if (!(e.target instanceof HTMLInputElement))
+                return;
+            this.settings = { ...this.settings, override: e.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>
+    }
+    pickerOption() {
+        return html `
+			<setting-item
+				name='Color Picker'
+				description='Use handpicked colors'
+			>
+				<input
+					type='color'
+					@change=${(e) => {
+            if (!(e.target instanceof HTMLInputElement))
+                return;
+            this.colors = [...this.colors, e.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>
+    }
+    generateOption() {
+        this.colorPickerDisabled = this.combination === Combination.Random;
+        return html `
+			<setting-item
+				name='Generate'
+				description='Generate colors based on color theory'
+			>
+				<select
+					@change=${(e) => {
+            if (!(e.target instanceof HTMLSelectElement))
+                return;
+            this.combination = e.target.value;
+            this.colorPickerDisabled = this.combination === Combination.Random;
+        }}
+				>
+					${Object.values(Combination).map((val) => {
+            return html `<option ?selected=${this.combination === val}>${val}</option>`;
+        })}
+				</select>
+				<input
+					type='color'
+					?disabled=${this.colorPickerDisabled}
+					@change=${(e) => {
+            if (!(e.target instanceof HTMLInputElement))
+                return;
+            this.baseColor = colorsea(e.target.value);
+        }}
+					@contextmenu=${(e) => {
+            e.preventDefault();
+            if (!(e.target instanceof HTMLInputElement))
+                return;
+            e.target.value = colorsea('#000').hex();
+            this.baseColor = undefined;
+        }}
+				>
+				<button
+					title='Loads the generated colors'
+					@click=${(e) => {
+            const generated = generateColors(this.combination, { baseColor: this.baseColor, settings: this.settings });
+            this.colors = generated.colors;
+            if (generated.settings)
+                this.settings = generated.settings;
+        }}
+				>
+					${createElement(Shuffle)}
+				</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'
+    }
+    imageOption() {
+        let hex = '';
+        let urlRef = createRef();
+        let sliderRef = createRef();
+        let fileRef = createRef();
+        let fileUrl = urlRef.value?.value || '';
+        let canvasEl;
+        let tooltipRef = createRef();
+        let canvasRef = (canvas) => {
+            if (!(canvas instanceof CanvasImage))
+                return;
+            canvasEl = canvas;
+            canvas.emitter.clear();
+            canvas.emitter.on('click', async (color) => await copyToClipboard(color.toUpperCase(), CopyFormat.Raw));
+            canvas.emitter.on('move', (pos) => {
+                if (!tooltipRef.value)
+                    return;
+                let tooltip = tooltipRef.value;
+                // Set tooltip text
+                tooltip.text = canvas.getCanvasHex(pos.x, pos.y).toUpperCase();
+                // Set tooltip position
+                tooltip.setClampedPosition(pos, canvas.getBoundingClientRect());
+            });
+        };
+        const getColors = async () => {
+            if (!sliderRef.value || !canvasEl)
+                return;
+            const sliderInput = sliderRef.value;
+            const canvasImage = canvasEl;
+            return await canvasImage.getPalette(+sliderInput.value);
+        };
+        const updateColors = async () => {
+            const colors = await getColors();
+            if (colors) {
+                this.colors = colors.map((color) => colorsea(color).hex(0));
+                this.settings.aliases = [];
+            }
+        };
+        const updateImagePreview = async (url) => {
+            if (!URL.canParse(url) || !canvasEl)
+                return;
+            const canvasImage = canvasEl;
+            canvasImage.updateImage(url, this.palette.getBoundingClientRect().width, this.palette.getBoundingClientRect().height);
+            await updateColors();
+        };
+        return html `
+			<setting-item
+				name='Image'
+				description='Convert image into palette'
+			>
+				<input
+					type='url'
+					placeholder='Enter URL or select file'
+					${ref(urlRef)}
+				>
+				<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 {
-      }
-    }}
+            try {
+                if (!fileRef.value)
+                    return;
+                let fileInput = fileRef.value;
+                // Check if any text is present, otherwise prompt user to select image
+                if (fileUrl !== '') {
+                    // Check if URL is valid
+                    if (URL.canParse(fileUrl))
+                        await updateImagePreview(fileUrl);
+                    else
+                        throw new Error('URL provided is not valid.');
+                }
+                else
+                    fileInput.click();
+            }
+            catch (e) {
+                // new Notice(e);
+            }
+        }}
 					@contextmenu=${() => {
-      if (!i.value) return;
-      const e = i.value;
-      e.value = "";
-    }}
-				>
-					${h(G)}
-				</button>
-				<input
-					type ='file'
-					accept = 'image/*'
+            if (!urlRef.value)
+                return;
+            const urlInput = urlRef.value;
+            urlInput.value = '';
+        }}
+				>
+					${createElement(ArrowUpToLine)}
+				</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'
+            try {
+                const reader = new FileReader();
+                const file = e.target.files?.[0];
+                if (file)
+                    reader.readAsDataURL(file);
+                reader.addEventListener('load', async () => {
+                    if (typeof reader.result === 'string') {
+                        fileUrl = reader.result;
+                        await updateImagePreview(fileUrl);
+                    }
+                });
+                reader.addEventListener('error', () => {
+                    throw new Error('Error processing image');
+                });
+            }
+            catch (e) {
+                // new Notice(e);
+            }
+        }}
+					${ref(fileRef)}
+				>
+			</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
+            await updateColors();
+        }}
+					${ref(sliderRef)}
+				>
+			</setting-item>
+			<tool-tip
+				trigger='hover'
+				${ref(tooltipRef)}
+			>
+				<canvas-image
 					@mousemove=${(e) => {
-      e.target instanceof E && (t = e.target.getCanvasHex(e.clientX, e.clientY));
-    }}
+            if (!(e.target instanceof CanvasImage))
+                return;
+            hex = 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>
+            if (!hex)
+                return;
+            this.colors = [...this.colors, hex];
+            this.settings.aliases = [...this.settings.aliases, ''];
+        }}
+					${ref(canvasRef)}
+				>
+				</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>
+    }
+    urlOption() {
+        let input;
+        return html `
+			<setting-item
+				name='URL'
+				description='Only coolors.co & colorhunt.co are currently supported'
+			>
+				<input
+					type='url'
+					placeholder='Enter URL'
+					@change=${(e) => {
+            if (!(e.target instanceof HTMLInputElement))
+                return;
+            input = e.target;
+        }}
+				>
+				<button
+					title='Right click to clear URL'
+					@click=${(e) => {
+            try {
+                if (!input.value.match(urlRegex))
+                    throw new Error('URL provided is not valid.');
+                this.colors = parseUrl(input.value);
+                this.settings.aliases = [];
+            }
+            catch (e) {
+                // new Notice(e)
+            }
+        }}
+					@contextmenu=${(e) => {
+            e.preventDefault();
+            if (input)
+                input.value = '';
+        }}
+				>
+					${createElement(Link)}
+				</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));
-						}
-					}
-				}
-			}
-		`
+ColorPaletteEditor.styles = [
+    css `
+			: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>
+__decorate([
+    query('#color-palette-editor')
+], ColorPaletteEditor.prototype, "palette", void 0);
+__decorate([
+    property({ type: Array })
+], ColorPaletteEditor.prototype, "colors", void 0);
+__decorate([
+    property({ type: Object })
+], ColorPaletteEditor.prototype, "settings", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], ColorPaletteEditor.prototype, "selectedInput", void 0);
+__decorate([
+    property({ type: String })
+], ColorPaletteEditor.prototype, "combination", void 0);
+__decorate([
+    property({ type: Object })
+], ColorPaletteEditor.prototype, "baseColor", void 0);
+__decorate([
+    state()
+], ColorPaletteEditor.prototype, "colorPickerDisabled", void 0);
+ColorPaletteEditor = __decorate([
+    customElement('color-palette-editor')
+], ColorPaletteEditor);
+export { ColorPaletteEditor };
+let SettingItem = class SettingItem extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.name = '';
+        this.description = '';
+    }
+    render() {
+        return html `
+			<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;
-			}
+SettingItem.styles = [
+    css `
+			: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
-};
+__decorate([
+    property({ type: String })
+], SettingItem.prototype, "name", void 0);
+__decorate([
+    property({ type: String })
+], SettingItem.prototype, "description", void 0);
+SettingItem = __decorate([
+    customElement('setting-item')
+], SettingItem);
+export { SettingItem };