@alegendstale/holly-components/dist/components/color-palette/color-palette.js

Reusable UI components created using lit

import { LitElement as $, html as p, nothing as I } from "lit";
import { query as S, property as l, state as m, customElement as C } from "lit/decorators.js";
import { styleMap as u } from "lit/directives/style-map.js";
import { repeat as x } from "lit/directives/repeat.js";
import { defaultSettings as c, Status as h, parseColors as w, PaletteError as f, Direction as _ } from "./color-palette-utils.js";
import { copyToClipboard as g } from "../../utils/basicUtils.js";
import { CanvasGradient as N } from "../canvas/canvas-gradient.js";
import { classMap as T } from "lit/directives/class-map.js";
import E from "./color-palette.styles.js";
import { HCPaletteChangeEvent as v } from "../../events/palette-change.js";
import { HCNoticeEvent as y } from "../../events/notice.js";
import { HCPaletteEditEvent as A } from "../../events/palette-edit.js";
var D = Object.defineProperty, b = Object.getOwnPropertyDescriptor, o = (t, e, i, a) => {
  for (var s = a > 1 ? void 0 : a ? b(e, i) : e, n = t.length - 1, d; n >= 0; n--)
    (d = t[n]) && (s = (a ? d(e, i, s) : d(s)) || s);
  return a && s && D(e, i, s), s;
};
let r = class extends $ {
  constructor() {
    super(...arguments), this._editMode = !1, this.colors = [], this.height = c.height, this.width = c.width, this.direction = c.direction, this.gradient = !1, this.preventHover = !1, this.hideText = !1, this.override = !1, this.aliases = [], this.maxWidth = 0, this.status = h.VALID, this.pulse = !1, this.pluginSettings = c;
  }
  set editMode(t) {
    this._editMode = t, this.dispatchEvent(new A({ isEditMode: t }));
  }
  get editMode() {
    return this._editMode;
  }
  /** Helper accessor for settings */
  set settings({ height: t, width: e, direction: i, gradient: a, preventHover: s, override: n, aliases: d }) {
    this.height = t, this.width = e, this.direction = i, this.gradient = a, this.preventHover = s, this.override = n, this.aliases = d;
  }
  get settings() {
    return {
      height: this.height,
      width: this.width,
      direction: this.direction,
      gradient: this.gradient,
      preventHover: this.preventHover,
      hideText: this.hideText,
      override: this.override,
      aliases: this.aliases
    };
  }
  connectedCallback() {
    super.connectedCallback(), this.pluginSettings.errorPulse && (this.pulse = !0, setTimeout(() => {
      this.pulse = !1;
    }, this.pluginSettings.noticeDuration));
  }
  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(_).includes(this.direction) && this.gradient != null && this.preventHover != null && this.hideText != null && this.override != null && (this.aliases instanceof Array || typeof this.aliases > "u"), e = w(this.colors, this.override);
    t() || (this.status = h.INVALID_SETTINGS), (typeof e == "string" || typeof e == "object" && e.length === 0) && (this.status = this.status === h.INVALID_SETTINGS ? h.INVALID_COLORS_AND_SETTINGS : h.INVALID_COLORS), typeof e == "object" && (this.colors = e), this.colors.length <= 1 && this.gradient && (this.status = h.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 > c.width
    };
    return p`
			<div 
				id="palette" 
				class=${T(i)}
				style=${this.status === h.VALID ? u(t) : u(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;
  }
  /** Creates a color palette or gradient palette depending on settings. */
  createPalette() {
    try {
      if (this.status === h.VALID)
        return this.gradient ? this.createGradient() : this.createColors();
      throw new f(this.status);
    } catch (t) {
      return t instanceof f ? (this.dispatchEvent(new y({ message: t.message })), this.createInvalidPalette(t.status, t.message)) : I;
    }
  }
  /** Create a color palette. */
  createColors() {
    return p`
			${x(
      this.colors,
      (t, e) => this.editMode ? p`
							<color-palette-item-edit
								draggable=${!0}
								color=${t}
								alias=${this.aliases?.[e] || ""}
								aliasMode=${this.pluginSettings.aliasMode}
								direction=${this.direction}
								?editMode=${this.editMode}
								height=${this.height}
								?preventHover=${this.preventHover}
								?hideText=${this.hideText}
								colorCount=${this.colors.length}
								?stabilizeWhileEditing=${this.pluginSettings.stabilizeWhileEditing}
								@select=${async () => {
        await g(t.toUpperCase(), this.pluginSettings.copyFormat);
      }}
								@trash=${(i) => {
        i.stopPropagation();
        const a = this.colors.indexOf(t);
        this.colors = this.colors.filter((s, n) => n !== a), this.aliases = this.aliases.filter((s, n) => n !== a), this.dispatchEvent(new v({ colors: this.colors, settings: this.settings }));
      }}
								@hc-palette-alias=${({ detail: { alias: i } }) => {
        const a = this.colors.findIndex((s) => s === t);
        for (let s = 0; s < a; s++)
          this.aliases[s] || (this.aliases[s] = "");
        this.aliases[a] = i, this.dispatchEvent(new v({ colors: this.colors, settings: this.settings }));
      }}
							>
							</color-palette-item-edit>
						` : p`
							<color-palette-item
								color=${t}
								alias=${this.aliases?.[e] || ""}
								aliasMode=${this.pluginSettings.aliasMode}
								direction=${this.direction}
								?editMode=${this.editMode}
								height=${this.height}
								?preventHover=${this.preventHover}
								?hideText=${this.hideText}
								colorCount=${this.colors.length}
								@select=${async () => await g(t.toUpperCase(), this.pluginSettings.copyFormat)}
							>
							</color-palette-item>
						`
    )}
		`;
  }
  /** Create a gradient palette. */
  createGradient() {
    return p`
			<tool-tip 
				id="tooltip" 
				trigger="hover"
				?display=${!this.preventHover}
			>
				<canvas-gradient
					.colors=${this.colors}
					height=${this.height}
					width=${this.getPaletteWidth()}
					direction=${this.direction}
					id="canvas"
					@hc-select-hex=${async ({ detail: { hex: t } }) => await g(t.toUpperCase(), this.pluginSettings.copyFormat)}
					@hc-move=${(t) => {
      if (!(t.target instanceof N)) return;
      const e = t.target, i = t.detail;
      this._tooltip.text = e.getCanvasHex(i.x, i.y).toUpperCase(), this._tooltip.setClampedPosition(i, this.getBoundingClientRect());
    }}
				>
				</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 h.INVALID_COLORS:
        i = "Colors are defined incorrectly";
        break;
      case h.INVALID_SETTINGS:
        i = "Issues parsing settings";
        break;
      case h.INVALID_COLORS_AND_SETTINGS:
        i = "Colors and settings are defined incorrectly";
        break;
      case h.INVALID_GRADIENT:
        i = "Gradients require more than 1 color to display";
        break;
    }
    return this.dispatchEvent(new y({ message: `Palette:
${e || i}` })), p`
			<section id="invalid">
				<span>${t}</span>
			</section>
		`;
  }
};
r.styles = [E];
o([
  S("tool-tip")
], r.prototype, "_tooltip", 2);
o([
  l({ type: Boolean })
], r.prototype, "editMode", 1);
o([
  l({ type: Array, reflect: !0 })
], r.prototype, "colors", 2);
o([
  l({ type: Number, reflect: !0 })
], r.prototype, "height", 2);
o([
  l({ type: Number, reflect: !0 })
], r.prototype, "width", 2);
o([
  l({ type: String, reflect: !0 })
], r.prototype, "direction", 2);
o([
  l({ type: Boolean, reflect: !0 })
], r.prototype, "gradient", 2);
o([
  l({ type: Boolean, reflect: !0 })
], r.prototype, "preventHover", 2);
o([
  l({ type: Boolean, reflect: !0 })
], r.prototype, "hideText", 2);
o([
  l({ type: Boolean, reflect: !0 })
], r.prototype, "override", 2);
o([
  l({ type: Array, reflect: !0 })
], r.prototype, "aliases", 2);
o([
  l({ type: Number })
], r.prototype, "maxWidth", 2);
o([
  m()
], r.prototype, "status", 2);
o([
  m()
], r.prototype, "pulse", 2);
o([
  l({ type: Object })
], r.prototype, "pluginSettings", 2);
r = o([
  C("color-palette")
], r);
export {
  r as ColorPalette
};