@alegendstale/holly-components 0.2.8 → 0.2.10

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

@@ -1,346 +1,438 @@
-import { css as S, LitElement as b, nothing as x, html as d } from "lit";
-import { query as C, property as h, state as $, customElement as N } from "lit/decorators.js";
-import { styleMap as w } from "lit/directives/style-map.js";
-import { repeat as _ } from "lit/directives/repeat.js";
-import { defaultSettings as f, Status as n, PaletteError as I, parseColors as D, Direction as P } from "./color-palette-utils.js";
-import { ColorPaletteItem as A } from "./item/color-palette-item.js";
-import { copyToClipboard as y } from "../../utils/basicUtils.js";
-import { EventEmitter as M } from "../../utils/EventEmitter.js";
-import { CanvasGradient as E } from "../canvas/canvas-gradient.js";
-import { classMap as L } from "lit/directives/class-map.js";
-import { ColorPaletteItemEdit as O } from "./item/color-palette-item-edit.js";
-import { ref as m, createRef as k } from "lit/directives/ref.js";
-var T = Object.defineProperty, V = Object.getOwnPropertyDescriptor, a = (t, e, i, l) => {
-  for (var r = l > 1 ? void 0 : l ? V(e, i) : e, p = t.length - 1, o; p >= 0; p--)
-    (o = t[p]) && (r = (l ? o(e, i, r) : o(r)) || r);
-  return l && r && T(e, i, 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 s = class extends b {
-  constructor() {
-    super(...arguments), this._editMode = !1, this.colors = [], this.height = f.height, this.width = f.width, this.direction = f.direction, this.gradient = !1, this.preventHover = !1, this.override = !1, this.aliases = [], this.maxWidth = 0, this.status = n.VALID, this.pulse = !1, this.emitter = new M(), this.pluginSettings = f, this.createPalette = () => {
-      try {
-        if (this.status === n.VALID)
-          return this.gradient ? this.createGradient() : this.createColors();
-        throw new I(this.status);
-      } catch (t) {
-        return t instanceof I ? (this.emitter.emit("notice", t.message), this.createInvalidPalette(t.status, t.message)) : x;
-      }
-    };
-  }
-  set editMode(t) {
-    this._editMode = t, this.emitter.emit("editMode", t);
-  }
-  get editMode() {
-    return this._editMode;
-  }
-  /**
-   * Helper accessor for settings
-   */
-  set settings({ height: t, width: e, direction: i, gradient: l, preventHover: r, override: p, aliases: o }) {
-    this.height = t, this.width = e, this.direction = i, this.gradient = l, this.preventHover = r, this.override = p, this.aliases = o;
-  }
-  get settings() {
-    return {
-      height: this.height,
-      width: this.width,
-      direction: this.direction,
-      gradient: this.gradient,
-      preventHover: this.preventHover,
-      override: this.override,
-      aliases: this.aliases
-    };
-  }
-  connectedCallback() {
-    super.connectedCallback(), this.pluginSettings.errorPulse && (this.pulse = !0, setTimeout(() => {
-      this.pulse = !1;
-    }, this.pluginSettings.noticeDuration));
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback(), this.emitter.clear();
-  }
-  willUpdate(t) {
-    super.willUpdate(t), this.setStatusAndColors();
-  }
-  /**
-   * Sets the current status and parses colors
-   */
-  setStatusAndColors() {
-    const t = () => !isNaN(this.height) && !isNaN(this.width) && Object.values(P).includes(this.direction) && this.gradient != null && this.preventHover != null && this.override != null && (this.aliases instanceof Array || typeof this.aliases > "u"), e = D(this.colors);
-    t() || (this.status = n.INVALID_SETTINGS), (typeof e == "string" || typeof e == "object" && e.length === 0) && (this.status = this.status === n.INVALID_SETTINGS ? n.INVALID_COLORS_AND_SETTINGS : n.INVALID_COLORS), typeof e == "object" && (this.colors = e), this.colors.length <= 1 && this.gradient && (this.status = n.INVALID_GRADIENT);
-  }
-  render() {
-    const t = {
-      // Set default corner style
-      "--palette-corners": this.pluginSettings.corners ? "5px" : "0px",
-      "--palette-height": `${this.height}px`,
-      "--palette-width": `${this.getPaletteWidth()}px`,
-      "--palette-column-flex-basis": `${this.height / this.colors.length / 2}px`
-    }, e = {
-      animation: this.pulse ? `pulse ${this.pluginSettings.noticeDuration / 1e3 / 2}s infinite` : ""
-    }, i = {
-      "palette-scroll": this.width > f.width
-    };
-    return d`
-			<div 
-				id="palette" 
-				class=${L(i)}
-				style=${this.status === n.VALID ? w(t) : w(e)}
-			>
-				${this.createPalette()}
-			</div>
-		`;
-  }
-  /**
-  * @returns `user` OR `auto` width based on which is more appropriate
-  */
-  getPaletteWidth() {
-    return this.maxWidth < this.settings.width && this.maxWidth > 0 ? this.maxWidth : this.settings.width;
-  }
-  createColors() {
-    return d`
-			${_(
-      this.colors,
-      (t, e) => {
-        var r, p;
-        let i = (o) => {
-          o instanceof A && (o.emitter.clear(), o.emitter.on("click", async (u) => await y(t.toUpperCase(), this.pluginSettings.copyFormat)));
-        }, l = (o) => {
-          o instanceof O && (o.emitter.clear(), o.emitter.on("click", async (u) => await y(t.toUpperCase(), this.pluginSettings.copyFormat)), o.emitter.on("trash", (u) => {
-            u.stopPropagation();
-            const g = this.colors.indexOf(t);
-            this.colors = this.colors.filter((c, v) => v !== g), this.aliases = this.aliases.filter((c, v) => v !== g), this.emitter.emit("changed", this.colors, this.settings);
-          }), o.emitter.on("alias", (u) => {
-            const g = this.colors.findIndex((c) => c === t);
-            for (let c = 0; c < g; c++)
-              this.aliases[c] || (this.aliases[c] = "");
-            this.aliases[g] = u, this.emitter.emit("changed", this.colors, this.settings);
-          }));
+import { LitElement, html, nothing, css } from 'lit';
+import { customElement, property, query, state } from 'lit/decorators.js';
+import { styleMap } from 'lit/directives/style-map.js';
+import { repeat } from 'lit/directives/repeat.js';
+import { defaultSettings, Direction, PaletteError, parseColors, Status } from './color-palette-utils';
+import { ColorPaletteItem } from './item/color-palette-item';
+import { copyToClipboard } from '../../utils/basicUtils';
+import { EventEmitter } from '../../utils/EventEmitter';
+import { CanvasGradient } from '../canvas/canvas-gradient';
+import { classMap } from 'lit/directives/class-map.js';
+import { ColorPaletteItemEdit } from './item/color-palette-item-edit';
+import { createRef, ref } from 'lit/directives/ref.js';
+let ColorPalette = class ColorPalette extends LitElement {
+    constructor() {
+        super(...arguments);
+        this._editMode = false;
+        this.colors = [];
+        // Settings
+        this.height = defaultSettings.height;
+        this.width = defaultSettings.width;
+        this.direction = defaultSettings.direction;
+        this.gradient = false;
+        this.preventHover = false;
+        this.override = false;
+        this.aliases = [];
+        this.maxWidth = 0;
+        this.status = Status.VALID;
+        this.pulse = false;
+        this.emitter = new EventEmitter();
+        this.pluginSettings = defaultSettings;
+        this.createPalette = () => {
+            try {
+                if (this.status === Status.VALID) {
+                    if (this.gradient)
+                        return this.createGradient();
+                    else
+                        return this.createColors();
+                }
+                else {
+                    // Throw error & create Invalid Palette
+                    throw new PaletteError(this.status);
+                }
+            }
+            catch (err) {
+                if (!(err instanceof PaletteError))
+                    return nothing;
+                this.emitter.emit('notice', err.message);
+                return this.createInvalidPalette(err.status, err.message);
+            }
+        };
+    }
+    set editMode(val) {
+        this._editMode = val;
+        this.emitter.emit('editMode', val);
+    }
+    get editMode() {
+        return this._editMode;
+    }
+    /**
+     * Helper accessor for settings
+     */
+    set settings({ height, width, direction, gradient, preventHover, override, aliases }) {
+        this.height = height;
+        this.width = width;
+        this.direction = direction;
+        this.gradient = gradient;
+        this.preventHover = preventHover;
+        this.override = override;
+        this.aliases = aliases;
+    }
+    get settings() {
+        return {
+            height: this.height,
+            width: this.width,
+            direction: this.direction,
+            gradient: this.gradient,
+            preventHover: this.preventHover,
+            override: this.override,
+            aliases: this.aliases,
+        };
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        // Pulse the Invalid Palette to show its location
+        if (this.pluginSettings.errorPulse) {
+            this.pulse = true;
+            setTimeout(() => {
+                this.pulse = false;
+            }, this.pluginSettings.noticeDuration);
+        }
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.emitter.clear();
+    }
+    willUpdate(_changedProperties) {
+        super.willUpdate(_changedProperties);
+        this.setStatusAndColors();
+    }
+    /**
+     * Sets the current status and parses colors
+     */
+    setStatusAndColors() {
+        const isSettingsValid = () => {
+            return (!isNaN(this.height)
+                && !isNaN(this.width)
+                && Object.values(Direction).includes(this.direction)
+                && this.gradient != null
+                && this.preventHover != null
+                && this.override != null
+                && (this.aliases instanceof Array
+                    || typeof this.aliases === 'undefined'));
         };
-        return this.editMode ? d`
-							<color-palette-item-edit
-								draggable=${!0}
-								color=${t}
-								alias=${((p = this.aliases) == null ? void 0 : p[e]) || ""}
-								aliasMode=${this.pluginSettings.aliasMode}
-								direction=${this.direction}
-								?editMode=${this.editMode}
-								height=${this.height}
-								?preventHover=${this.preventHover}
-								?hoverWhileEditing=${this.pluginSettings.hoverWhileEditing}
-								colorCount=${this.colors.length}
-								${m(l)}
-							>
-							</color-palette-item-edit>
-						` : d`
-							<color-palette-item
-								color=${t}
-								alias=${((r = this.aliases) == null ? void 0 : r[e]) || ""}
-								aliasMode=${this.pluginSettings.aliasMode}
-								direction=${this.direction}
-								?editMode=${this.editMode}
-								height=${this.height}
-								?preventHover=${this.preventHover}
-								?hoverWhileEditing=${this.pluginSettings.hoverWhileEditing}
-								colorCount=${this.colors.length}
-								${m(i)}
-							>
-							</color-palette-item>
+        const colorsResult = parseColors(this.colors, this.override);
+        if (!isSettingsValid()) {
+            this.status = Status.INVALID_SETTINGS;
+        }
+        // Set status to invalid if parsedColors returns a status, or if parsedColors returns an empty array
+        if (typeof colorsResult === 'string' || (typeof colorsResult === 'object' && colorsResult.length === 0)) {
+            this.status = this.status === Status.INVALID_SETTINGS ? Status.INVALID_COLORS_AND_SETTINGS : Status.INVALID_COLORS;
+        }
+        if (typeof colorsResult === 'object') {
+            this.colors = colorsResult;
+        }
+        if (this.colors.length <= 1 && this.gradient)
+            this.status = Status.INVALID_GRADIENT;
+    }
+    render() {
+        const paletteStyles = {
+            // Set default corner style
+            '--palette-corners': this.pluginSettings.corners ? '5px' : '0px',
+            '--palette-height': `${this.height}px`,
+            '--palette-width': `${this.getPaletteWidth()}px`,
+            '--palette-column-flex-basis': `${(this.height / this.colors.length / 2)}px`
+        };
+        const invalidStyles = {
+            animation: this.pulse ? `pulse ${this.pluginSettings.noticeDuration / 1000 / 2}s infinite` : ''
+        };
+        const paletteClasses = {
+            "palette-scroll": this.width > defaultSettings.width,
+        };
+        return html `
+			<div 
+				id="palette" 
+				class=${classMap(paletteClasses)}
+				style=${this.status === Status.VALID ? styleMap(paletteStyles) : styleMap(invalidStyles)}
+			>
+				${this.createPalette()}
+			</div>
+		`;
+    }
+    /**
+    * @returns `user` OR `auto` width based on which is more appropriate
+    */
+    getPaletteWidth() {
+        // Automatically set width if offset is less than settings width
+        if (this.maxWidth < this.settings.width && this.maxWidth > 0)
+            return this.maxWidth;
+        // Set user-set width
+        else
+            return this.settings.width;
+    }
+    createColors() {
+        return html `
+			${repeat(this.colors, (color, index) => {
+            let itemRef = (item) => {
+                if (!(item instanceof ColorPaletteItem))
+                    return;
+                item.emitter.clear();
+                item.emitter.on('click', async (e) => await copyToClipboard(color.toUpperCase(), this.pluginSettings.copyFormat));
+            };
+            let itemEditRef = (item) => {
+                if (!(item instanceof ColorPaletteItemEdit))
+                    return;
+                item.emitter.clear();
+                item.emitter.on('click', async (e) => await copyToClipboard(color.toUpperCase(), this.pluginSettings.copyFormat));
+                item.emitter.on('trash', (e) => {
+                    e.stopPropagation();
+                    const deletedIndex = this.colors.indexOf(color);
+                    this.colors = this.colors.filter((_, index) => index !== deletedIndex);
+                    this.aliases = this.aliases.filter((_, index) => index !== deletedIndex);
+                    this.emitter.emit('changed', this.colors, this.settings);
+                });
+                item.emitter.on('alias', (alias) => {
+                    // Get the index of the alias relative to the PaletteItem color
+                    const aliasIndex = this.colors.findIndex((val) => val === color);
+                    for (let i = 0; i < aliasIndex; i++) {
+                        // Set empty strings to empty indexes
+                        if (!this.aliases[i])
+                            this.aliases[i] = '';
+                    }
+                    // Set modified alias index
+                    this.aliases[aliasIndex] = alias;
+                    this.emitter.emit('changed', this.colors, this.settings);
+                });
+            };
+            return !this.editMode
+                ? html `
+							<color-palette-item
+								color=${color}
+								alias=${this.aliases?.[index] || ''}
+								aliasMode=${this.pluginSettings.aliasMode}
+								direction=${this.direction}
+								?editMode=${this.editMode}
+								height=${this.height}
+								?preventHover=${this.preventHover}
+								?hoverWhileEditing=${this.pluginSettings.hoverWhileEditing}
+								colorCount=${this.colors.length}
+								${ref(itemRef)}
+							>
+							</color-palette-item>
+						`
+                : html `
+							<color-palette-item-edit
+								draggable=${true}
+								color=${color}
+								alias=${this.aliases?.[index] || ''}
+								aliasMode=${this.pluginSettings.aliasMode}
+								direction=${this.direction}
+								?editMode=${this.editMode}
+								height=${this.height}
+								?preventHover=${this.preventHover}
+								?hoverWhileEditing=${this.pluginSettings.hoverWhileEditing}
+								colorCount=${this.colors.length}
+								${ref(itemEditRef)}
+							>
+							</color-palette-item-edit>
 						`;
-      }
-    )}
+        })}
 		`;
-  }
-  createGradient() {
-    let t = k(), e = (i) => {
-      i instanceof E && (i.emitter.clear(), i.emitter.on("click", async (l) => await y(l.toUpperCase(), this.pluginSettings.copyFormat)), i.emitter.on("move", (l) => {
-        if (!t.value) return;
-        let r = t.value;
-        r.text = i.getCanvasHex(l.x, l.y).toUpperCase(), r.setClampedPosition(l, this.getBoundingClientRect());
-      }));
-    };
-    return d`
-			<tool-tip 
-				id="tooltip" 
-				?display=${!this.preventHover}
-				${m(t)}
-			>
-				<canvas-gradient
-					.colors=${this.colors}
-					height=${this.height}
-					width=${this.getPaletteWidth()}
-					direction=${this.direction}
-					id="canvas"
-					${m(e)}
-				>
-				</canvas-gradient>
-			</tool-tip>
+    }
+    createGradient() {
+        let tooltipRef = createRef();
+        let canvasRef = (canvas) => {
+            if (!(canvas instanceof CanvasGradient))
+                return;
+            canvas.emitter.clear();
+            canvas.emitter.on('click', async (color) => await copyToClipboard(color.toUpperCase(), this.pluginSettings.copyFormat));
+            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, this.getBoundingClientRect());
+            });
+        };
+        return html `
+			<tool-tip 
+				id="tooltip" 
+				?display=${!this.preventHover}
+				${ref(tooltipRef)}
+			>
+				<canvas-gradient
+					.colors=${this.colors}
+					height=${this.height}
+					width=${this.getPaletteWidth()}
+					direction=${this.direction}
+					id="canvas"
+					${ref(canvasRef)}
+				>
+				</canvas-gradient>
+			</tool-tip>
 		`;
-  }
-  /**
-   * Create invalid palette based on palette status
-   * @param type Palette status type
-   */
-  createInvalidPalette(t, e = "") {
-    let i = "Invalid palette";
-    switch (t) {
-      case n.INVALID_COLORS:
-        i = "Colors are defined incorrectly";
-        break;
-      case n.INVALID_SETTINGS:
-        i = "Issues parsing settings";
-        break;
-      case n.INVALID_COLORS_AND_SETTINGS:
-        i = "Colors and settings are defined incorrectly";
-        break;
-      case n.INVALID_GRADIENT:
-        i = "Gradients require more than 1 color to display";
-        break;
     }
-    return this.emitter.emit("notice", `Palette:
-${e || i}`), d`
-			<section id="invalid">
-				<span>${t}</span>
-			</section>
+    /**
+     * Create invalid palette based on palette status
+     * @param type Palette status type
+     */
+    createInvalidPalette(type, message = '') {
+        let defaultMessage = 'Invalid palette';
+        switch (type) {
+            case Status.INVALID_COLORS:
+                defaultMessage = 'Colors are defined incorrectly';
+                break;
+            case Status.INVALID_SETTINGS:
+                defaultMessage = 'Issues parsing settings';
+                break;
+            case Status.INVALID_COLORS_AND_SETTINGS:
+                defaultMessage = 'Colors and settings are defined incorrectly';
+                break;
+            case Status.INVALID_GRADIENT:
+                defaultMessage = 'Gradients require more than 1 color to display';
+                break;
+        }
+        this.emitter.emit('notice', `Palette:\n${message ? message : defaultMessage}`);
+        return html `
+			<section id="invalid">
+				<span>${type}</span>
+			</section>
 		`;
-  }
+    }
 };
-s.styles = [
-  S`
-			:host {
-				display: block;
-				width: fit-content;
-			}
-
-			:host([direction='row']) #palette {
-				flex-direction: column;
-			}
-			
-			/* Edit Mode */
-			:host([editMode]) #palette {
-				overflow-x: auto;
-			}
-
-			// Invalid Palette
-			:host(:not([status='Valid'])) #palette {
-				
-			}
-			
-			/* Palette Container */
-
-			#container {
-				cursor: pointer;
-				position: relative;
-				background-color: #000;
-				contain: paint;
-			}
-
-			#container.palette-scroll {
-				overflow-x: auto;
-			}
-
-			/* Palette */
-
-			#palette {
-				/* fallback vars */
-				--palette-height: 150px;
-				--palette-width: 700px;
-				--palette-background-color: transparent;
-				--palette-color: #000;
-				--palette-column-flex-basis: 80px;
-				--palette-corners: 5px;
-
-				display: flex;
-				flex-direction: row;
-				border-radius: var(--palette-corners);
-				overflow: hidden;
-				cursor: pointer;
-				height: var(--palette-height);
-				width: var(--palette-width);
-				position: relative;
-				scrollbar-width: thin;
-
-				/* Drag & Drop */
-
-				& > .is-dragging {
-					opacity: 0;
-				}
-
-				& > #invalid {
-					position: absolute;
-					display: flex;
-					justify-content: center;
-					align-items: center;
-					height: var(--palette-height);
-					width: var(--palette-width);
-					background-color: #000000c0;
-					border-radius: var(--palette-corners);
-
-					& > span {
-						display: flex;
-						justify-content: center;
-						align-items: center;
-						color: white;
-						background-color: #000;
-						width: 100%;
-						height: 30%;
-						text-align: center;
-						user-select: none;
-					}
-				}
-			}
-
-			@keyframes pulse {
-				50% {
-					background-color: #FFFF0080;
-				}
-			}
-		`
+ColorPalette.styles = [
+    css `
+			:host {
+				display: block;
+				width: fit-content;
+			}
+
+			:host([direction='row']) #palette {
+				flex-direction: column;
+			}
+			
+			/* Edit Mode */
+			:host([editMode]) #palette {
+				overflow-x: auto;
+			}
+
+			// Invalid Palette
+			:host(:not([status='Valid'])) #palette {
+				
+			}
+			
+			/* Palette Container */
+
+			#container {
+				cursor: pointer;
+				position: relative;
+				background-color: #000;
+				contain: paint;
+			}
+
+			#container.palette-scroll {
+				overflow-x: auto;
+			}
+
+			/* Palette */
+
+			#palette {
+				/* fallback vars */
+				--palette-height: 150px;
+				--palette-width: 700px;
+				--palette-background-color: transparent;
+				--palette-color: #000;
+				--palette-column-flex-basis: 80px;
+				--palette-corners: 5px;
+
+				display: flex;
+				flex-direction: row;
+				border-radius: var(--palette-corners);
+				overflow: hidden;
+				cursor: pointer;
+				height: var(--palette-height);
+				width: var(--palette-width);
+				position: relative;
+				scrollbar-width: thin;
+
+				/* Drag & Drop */
+
+				& > .is-dragging {
+					opacity: 0;
+				}
+
+				& > #invalid {
+					position: absolute;
+					display: flex;
+					justify-content: center;
+					align-items: center;
+					height: var(--palette-height);
+					width: var(--palette-width);
+					background-color: #000000c0;
+					border-radius: var(--palette-corners);
+
+					& > span {
+						display: flex;
+						justify-content: center;
+						align-items: center;
+						color: white;
+						background-color: #000;
+						width: 100%;
+						height: 30%;
+						text-align: center;
+						user-select: none;
+					}
+				}
+			}
+
+			@keyframes pulse {
+				50% {
+					background-color: #FFFF0080;
+				}
+			}
+		`,
 ];
-a([
-  C("#palette")
-], s.prototype, "palette", 2);
-a([
-  h({ type: Boolean })
-], s.prototype, "editMode", 1);
-a([
-  h({ type: Array, reflect: !0 })
-], s.prototype, "colors", 2);
-a([
-  h({ type: Number, reflect: !0 })
-], s.prototype, "height", 2);
-a([
-  h({ type: Number, reflect: !0 })
-], s.prototype, "width", 2);
-a([
-  h({ type: String, reflect: !0 })
-], s.prototype, "direction", 2);
-a([
-  h({ type: Boolean, reflect: !0 })
-], s.prototype, "gradient", 2);
-a([
-  h({ type: Boolean, reflect: !0 })
-], s.prototype, "preventHover", 2);
-a([
-  h({ type: Boolean, reflect: !0 })
-], s.prototype, "override", 2);
-a([
-  h({ type: Array, reflect: !0 })
-], s.prototype, "aliases", 2);
-a([
-  h({ type: Number })
-], s.prototype, "maxWidth", 2);
-a([
-  $()
-], s.prototype, "status", 2);
-a([
-  $()
-], s.prototype, "pulse", 2);
-a([
-  h({ type: Object })
-], s.prototype, "pluginSettings", 2);
-s = a([
-  N("color-palette")
-], s);
-export {
-  s as ColorPalette
-};
+__decorate([
+    query('#palette')
+], ColorPalette.prototype, "palette", void 0);
+__decorate([
+    property({ type: Boolean })
+], ColorPalette.prototype, "editMode", null);
+__decorate([
+    property({ type: Array, reflect: true })
+], ColorPalette.prototype, "colors", void 0);
+__decorate([
+    property({ type: Number, reflect: true })
+], ColorPalette.prototype, "height", void 0);
+__decorate([
+    property({ type: Number, reflect: true })
+], ColorPalette.prototype, "width", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], ColorPalette.prototype, "direction", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], ColorPalette.prototype, "gradient", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], ColorPalette.prototype, "preventHover", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], ColorPalette.prototype, "override", void 0);
+__decorate([
+    property({ type: Array, reflect: true })
+], ColorPalette.prototype, "aliases", void 0);
+__decorate([
+    property({ type: Number })
+], ColorPalette.prototype, "maxWidth", void 0);
+__decorate([
+    state()
+], ColorPalette.prototype, "status", void 0);
+__decorate([
+    state()
+], ColorPalette.prototype, "pulse", void 0);
+__decorate([
+    property({ type: Object })
+], ColorPalette.prototype, "pluginSettings", void 0);
+ColorPalette = __decorate([
+    customElement('color-palette')
+], ColorPalette);
+export { ColorPalette };