@alegendstale/holly-components 2.0.2 → 2.0.4

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

@@ -1,553 +1,427 @@
-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;
-};
-import { LitElement, html } 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.js';
-import { Combination, generateColors } from '../../../utils/generateUtils.js';
-import colorsea from '../../../utils/colorsea-wrapper.js';
-import { copyToClipboard, parseUrl } from '../../../utils/basicUtils.js';
-import { CopyFormat, urlRegex } from '../color-palette-utils.js';
-import { CanvasImage } from '../../canvas/canvas-image.js';
-import { ref, createRef } from 'lit/directives/ref.js';
-import { EventEmitter } from '../../../utils/EventEmitter.js';
-import { ColorPalette } from '../color-palette.js';
-import styles from './color-palette-editor.styles.js';
-import './settings-item.js';
-export var SelectedInput;
-(function (SelectedInput) {
-    SelectedInput["Color_Picker"] = "Color Picker";
-    SelectedInput["Generate"] = "Generate";
-    SelectedInput["Image"] = "Image";
-    SelectedInput["URL"] = "URL";
-})(SelectedInput || (SelectedInput = {}));
-/**
- * An editor which can assist in modifying new or existing color palettes.
- *
- * @dependency setting-item
- *
- * @cssprop {<color>} --cta-background - The call to action background color.
- */
-let ColorPaletteEditor = class ColorPaletteEditor extends LitElement {
-    constructor() {
-        super(...arguments);
-        /** The palette colors to be edited. */
-        this.colors = [];
-        /** The palette settings to be edited. */
-        this.settings = {
-            height: defaultSettings.height,
-            width: defaultSettings.width,
-            direction: defaultSettings.direction,
-            gradient: defaultSettings.gradient,
-            preventHover: defaultSettings.preventHover,
-            hideText: defaultSettings.hideText,
-            override: defaultSettings.override,
-            aliases: []
-        };
-        /** The editing input that will be used. */
-        this.selectedInput = SelectedInput.Color_Picker;
-        /** The color theory combination used when generating colors. */
-        this.combination = Combination.Random;
-        /** @internal Whether the color input is enabled. */
-        this.colorPickerDisabled = false;
-        /** Public way to subscribe to events. */
-        this.emitter = new EventEmitter();
-    }
-    static { this.styles = [styles]; }
-    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}
-						?hideText=${this.settings.hideText}
-						?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'
+import { LitElement as x, html as l } from "lit";
+import { query as P, property as v, state as H, customElement as T } from "lit/decorators.js";
+import { createElement as p, Pipette as U, Shuffle as C, Image as O, Link as R, ArrowUpToLine as D } from "lucide";
+import { defaultSettings as u, Direction as M, urlRegex as G, CopyFormat as S } from "../color-palette-utils.js";
+import { Combination as f, generateColors as L } from "../../../utils/generateUtils.js";
+import b from "../../../utils/colorsea-wrapper.js";
+import { parseUrl as _, copyToClipboard as j } from "../../../utils/basicUtils.js";
+import { CanvasImage as w } from "../../canvas/canvas-image.js";
+import { ref as m, createRef as $ } from "lit/directives/ref.js";
+import { EventEmitter as A } from "../../../utils/EventEmitter.js";
+import { ColorPalette as B } from "../color-palette.js";
+import F from "./color-palette-editor.styles.js";
+var W = Object.defineProperty, q = Object.getOwnPropertyDescriptor, g = (t, n, s, o) => {
+  for (var r = o > 1 ? void 0 : o ? q(n, s) : n, c = t.length - 1, h; c >= 0; c--)
+    (h = t[c]) && (r = (o ? h(n, s, r) : h(r)) || r);
+  return o && r && W(n, s, r), r;
+}, X = /* @__PURE__ */ ((t) => (t.Color_Picker = "Color Picker", t.Generate = "Generate", t.Image = "Image", t.URL = "URL", t))(X || {});
+let a = class extends x {
+  constructor() {
+    super(...arguments), this.colors = [], this.settings = {
+      height: u.height,
+      width: u.width,
+      direction: u.direction,
+      gradient: u.gradient,
+      preventHover: u.preventHover,
+      hideText: u.hideText,
+      override: u.override,
+      aliases: []
+    }, this.selectedInput = "Color Picker", this.combination = f.Random, this.colorPickerDisabled = !1, this.emitter = new A();
+  }
+  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();
+      }
+    }, n = (s) => {
+      s instanceof B && s.emitter.on("changed", (o, r) => {
+        this.colors = o, this.settings = r;
+      });
+    };
+    return l`
+			<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"}
+						>
+							${p(U)}
+						</button>
+						<button
+							title="Generate"
+							@click=${() => this.selectedInput = "Generate"}
+						>
+							${p(C)}
+						</button>
+						<button
+							title="Image"
+							@click=${() => this.selectedInput = "Image"}
+						>
+							${p(O)}
+						</button>
+						<button
+							title="URL"
+							@click=${() => this.selectedInput = "URL"}
+						>
+							${p(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}
+						?hideText=${this.settings.hideText}
+						?override=${this.settings.override}
+						.aliases=${this.settings.aliases}
+						?editMode=${!0}
+						maxWidth=${560}
+						${m(n)}
+					>
+					</color-palette>
+				</section>
+				<section id='settings'>
+					<h3>Settings</h3>
+					${this.renderSettings()}
+					<button
+						id='create-btn'
 						@click=${() => {
-            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>
+      try {
+        this.colors.length === 0 && (this.colors = L(f.Random).colors), this.emitter.emit("submit", this.colors, this.settings);
+      } catch {
+      }
+    }}
+					>
+						Create
+					</button>
+				</section>
+			</div>
 		`;
-    }
-    /** Renders the settings fields. */
-    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='Hide Text'
-				description='Disables color and alias visibility'
-			>
-				<input
-					type='checkbox'
-					?checked=${this.settings.hideText}
-					@change=${(e) => {
-            if (!(e.target instanceof HTMLInputElement))
-                return;
-            this.settings = { ...this.settings, hideText: 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>
+  }
+  /** Renders the settings fields. */
+  renderSettings() {
+    return l`
+			<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(M).map((t) => l`<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='Hide Text'
+				description='Disables color and alias visibility'
+			>
+				<input
+					type='checkbox'
+					?checked=${this.settings.hideText}
+					@change=${(t) => {
+      t.target instanceof HTMLInputElement && (this.settings = { ...this.settings, hideText: 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>
 		`;
-    }
-    /** Renders the picker option. */
-    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>
+  }
+  /** Renders the picker option. */
+  pickerOption() {
+    return l`
+			<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>
 		`;
-    }
-    /** Renders the generate option. */
-    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>
+  }
+  /** Renders the generate option. */
+  generateOption() {
+    return this.colorPickerDisabled = this.combination === f.Random, l`
+			<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 === f.Random);
+    }}
+				>
+					${Object.values(f).map((t) => l`<option ?selected=${this.combination === t}>${t}</option>`)}
+				</select>
+				<input
+					type='color'
+					?disabled=${this.colorPickerDisabled}
+					@change=${(t) => {
+      t.target instanceof HTMLInputElement && (this.baseColor = b(t.target.value));
+    }}
+					@contextmenu=${(t) => {
+      t.preventDefault(), t.target instanceof HTMLInputElement && (t.target.value = b("#000").hex(), this.baseColor = void 0);
+    }}
+				>
+				<button
+					title='Loads the generated colors'
+					@click=${(t) => {
+      const n = L(this.combination, { baseColor: this.baseColor, settings: this.settings });
+      this.colors = n.colors, n.settings && (this.settings = n.settings);
+    }}
+				>
+					${p(C)}
+				</button>
+			</setting-item>
 		`;
-    }
-    /** Renders the image option. */
-    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.imageURL = url;
-            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'
+  }
+  /** Renders the image option. */
+  imageOption() {
+    let t = "", n = $(), s = $(), o = $(), r = n.value?.value || "", c, h = $(), I = (e) => {
+      e instanceof w && (c = e, e.emitter.clear(), e.emitter.on("click", async (i) => await j(i.toUpperCase(), S.Raw)), e.emitter.on("move", (i) => {
+        if (!h.value) return;
+        let d = h.value;
+        d.text = e.getCanvasHex(i.x, i.y).toUpperCase(), d.setClampedPosition(i, e.getBoundingClientRect());
+      }));
+    };
+    const E = async () => {
+      if (!s.value || !c) return;
+      const e = s.value;
+      return await c.getPalette(+e.value);
+    }, y = async () => {
+      const e = await E();
+      e && (this.colors = e.map((i) => b(i).hex(0)), this.settings.aliases = []);
+    }, k = async (e) => {
+      if (!URL.canParse(e) || !c) return;
+      const i = c;
+      i.imageURL = e, await y();
+    };
+    return l`
+			<setting-item
+				name='Image'
+				description='Convert image into palette'
+			>
+				<input
+					type='url'
+					placeholder='Enter URL or select file'
+					${m(n)}
+				>
+				<button
+					title='Right click to clear URL'
 					@click=${async (e) => {
-            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);
-            }
-        }}
+      try {
+        if (!o.value) return;
+        let i = o.value;
+        if (r !== "")
+          if (URL.canParse(r)) await k(r);
+          else throw new Error("URL provided is not valid.");
+        else i.click();
+      } catch {
+      }
+    }}
 					@contextmenu=${(e) => {
-            e.preventDefault();
-            if (!urlRef.value)
-                return;
-            const urlInput = urlRef.value;
-            urlInput.value = '';
-        }}
-				>
-					${createElement(ArrowUpToLine)}
-				</button>
-				<input
-					type ='file'
-					accept = 'image/*'
+      if (e.preventDefault(), !n.value) return;
+      const i = n.value;
+      i.value = "";
+    }}
+				>
+					${p(D)}
+				</button>
+				<input
+					type ='file'
+					accept = 'image/*'
 					@change=${(e) => {
-            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'
+      try {
+        const i = new FileReader(), d = e.target.files?.[0];
+        d && i.readAsDataURL(d), i.addEventListener("load", async () => {
+          typeof i.result == "string" && (r = i.result, await k(r));
+        }), i.addEventListener("error", () => {
+          throw new Error("Error processing image");
+        });
+      } catch {
+      }
+    }}
+					${m(o)}
+				>
+			</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 updateColors();
-        }}
-					${ref(sliderRef)}
-				>
-			</setting-item>
-			<tool-tip
-				trigger='hover'
-				${ref(tooltipRef)}
-			>
-				<canvas-image
-					width=${this.palette.getBoundingClientRect().width}
-					height=${this.palette.getBoundingClientRect().height}
+      await y();
+    }}
+					${m(s)}
+				>
+			</setting-item>
+			<tool-tip
+				trigger='hover'
+				${m(h)}
+			>
+				<canvas-image
+					width=${this.palette.getBoundingClientRect().width}
+					height=${this.palette.getBoundingClientRect().height}
 					@mousemove=${(e) => {
-            if (!(e.target instanceof CanvasImage))
-                return;
-            hex = e.target.getCanvasHex(e.clientX, e.clientY);
-        }}
+      e.target instanceof w && (t = e.target.getCanvasHex(e.clientX, e.clientY));
+    }}
 					@click=${(e) => {
-            if (!hex)
-                return;
-            this.colors = [...this.colors, hex];
-            this.settings.aliases = [...this.settings.aliases, ''];
-        }}
-					${ref(canvasRef)}
-				>
-				</canvas-image>
-			</tool-tip>
+      t && (this.colors = [...this.colors, t], this.settings.aliases = [...this.settings.aliases, ""]);
+    }}
+					${m(I)}
+				>
+				</canvas-image>
+			</tool-tip>
 		`;
-    }
-    /** Renders the URL option. */
-    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>
+  }
+  /** Renders the URL option. */
+  urlOption() {
+    let t;
+    return l`
+			<setting-item
+				name='URL'
+				description='Only coolors.co & colorhunt.co are currently supported'
+			>
+				<input
+					type='url'
+					placeholder='Enter URL'
+					@change=${(n) => {
+      n.target instanceof HTMLInputElement && (t = n.target);
+    }}
+				>
+				<button
+					title='Right click to clear URL'
+					@click=${(n) => {
+      try {
+        if (!t.value.match(G)) throw new Error("URL provided is not valid.");
+        this.colors = _(t.value), this.settings.aliases = [];
+      } catch {
+      }
+    }}
+					@contextmenu=${(n) => {
+      n.preventDefault(), t && (t.value = "");
+    }}
+				>
+					${p(R)}
+				</button>
+			</setting-item>
 		`;
-    }
+  }
+};
+a.styles = [F];
+g([
+  P("#color-palette-editor")
+], a.prototype, "palette", 2);
+g([
+  v({ type: Array })
+], a.prototype, "colors", 2);
+g([
+  v({ type: Object })
+], a.prototype, "settings", 2);
+g([
+  v({ type: String, reflect: !0 })
+], a.prototype, "selectedInput", 2);
+g([
+  v({ type: String })
+], a.prototype, "combination", 2);
+g([
+  v({ type: Object })
+], a.prototype, "baseColor", 2);
+g([
+  H()
+], a.prototype, "colorPickerDisabled", 2);
+a = g([
+  T("color-palette-editor")
+], a);
+export {
+  a as ColorPaletteEditor,
+  X as SelectedInput
 };
-__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 };