@alegendstale/holly-components/dist/components/canvas/canvas-gradient.js

Reusable UI components created using lit

import { Direction as h } from "../color-palette/color-palette-utils.js";
import { property as c, customElement as f } from "lit/decorators.js";
import { CanvasBase as d } from "./canvas-base.js";
import { isColorValid as u } from "../../utils/basicUtils.js";
var m = Object.defineProperty, y = Object.getOwnPropertyDescriptor, p = (r, e, o, s) => {
  for (var t = s > 1 ? void 0 : s ? y(e, o) : e, n = r.length - 1, a; n >= 0; n--)
    (a = r[n]) && (t = (s ? a(e, o, t) : a(t)) || t);
  return s && t && m(e, o, t), t;
};
let i = class extends d {
  constructor() {
    super(...arguments), this.colors = [], this.height = 0, this.width = 0, this.direction = h.Column;
  }
  updated(r) {
    super.updated(r), this.createGradient(this.colors, this.height, this.width, this.direction);
  }
  /** Creates a new gradient canvas */
  createGradient(r, e, o, s) {
    if (!this.context) return;
    this.canvas.height = e, this.canvas.width = o;
    let t = s === h.Column ? this.context.createLinearGradient(0, 0, o, 0) : this.context.createLinearGradient(0, 0, 0, e), n = [];
    for (const [a, l] of r.entries())
      u(l) && (t.addColorStop(a / (r.length - 1), l), n.push(l));
    if (n.length <= 1) throw new Error("There are not enough valid color stops to create the gradient.");
    this.context.fillStyle = t || "#000", this.context.fillRect(0, 0, o, e), this.canvas.classList.add("gradient"), this.canvas.style.setProperty("--palette-column-flex-basis", (e / r.length / 2).toString() + "px");
  }
};
i.styles = [...d.styles];
p([
  c({ type: Array })
], i.prototype, "colors", 2);
p([
  c({ type: Number })
], i.prototype, "height", 2);
p([
  c({ type: Number })
], i.prototype, "width", 2);
p([
  c({ type: String })
], i.prototype, "direction", 2);
i = p([
  f("canvas-gradient")
], i);
export {
  i as CanvasGradient
};