/**
 * @license
 * Copyright 2019 Google LLC
 * SPDX-License-Identifier: BSD-3-Clause
 */
const t$2 = window,
  e$3 = t$2.ShadowRoot && (void 0 === t$2.ShadyCSS || t$2.ShadyCSS.nativeShadow) && "adoptedStyleSheets" in Document.prototype && "replace" in CSSStyleSheet.prototype,
  s$4 = Symbol(),
  n$4 = new WeakMap();
let o$4 = class o {
  constructor(t, e, n) {
    if (this._$cssResult$ = !0, n !== s$4) throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");
    this.cssText = t, this.t = e;
  }
  get styleSheet() {
    let t = this.o;
    const s = this.t;
    if (e$3 && void 0 === t) {
      const e = void 0 !== s && 1 === s.length;
      e && (t = n$4.get(s)), void 0 === t && ((this.o = t = new CSSStyleSheet()).replaceSync(this.cssText), e && n$4.set(s, t));
    }
    return t;
  }
  toString() {
    return this.cssText;
  }
};
const r$3 = t => new o$4("string" == typeof t ? t : t + "", void 0, s$4),
  S$2 = (s, n) => {
    e$3 ? s.adoptedStyleSheets = n.map(t => t instanceof CSSStyleSheet ? t : t.styleSheet) : n.forEach(e => {
      const n = document.createElement("style"),
        o = t$2.litNonce;
      void 0 !== o && n.setAttribute("nonce", o), n.textContent = e.cssText, s.appendChild(n);
    });
  },
  c$2 = e$3 ? t => t : t => t instanceof CSSStyleSheet ? (t => {
    let e = "";
    for (const s of t.cssRules) e += s.cssText;
    return r$3(e);
  })(t) : t;

/**
 * @license
 * Copyright 2017 Google LLC
 * SPDX-License-Identifier: BSD-3-Clause
 */
var s$3;
const e$2 = window,
  r$2 = e$2.trustedTypes,
  h$2 = r$2 ? r$2.emptyScript : "",
  o$3 = e$2.reactiveElementPolyfillSupport,
  n$3 = {
    toAttribute(t, i) {
      switch (i) {
        case Boolean:
          t = t ? h$2 : null;
          break;
        case Object:
        case Array:
          t = null == t ? t : JSON.stringify(t);
      }
      return t;
    },
    fromAttribute(t, i) {
      let s = t;
      switch (i) {
        case Boolean:
          s = null !== t;
          break;
        case Number:
          s = null === t ? null : Number(t);
          break;
        case Object:
        case Array:
          try {
            s = JSON.parse(t);
          } catch (t) {
            s = null;
          }
      }
      return s;
    }
  },
  a$2 = (t, i) => i !== t && (i == i || t == t),
  l$3 = {
    attribute: !0,
    type: String,
    converter: n$3,
    reflect: !1,
    hasChanged: a$2
  },
  d$2 = "finalized";
let u$2 = class u extends HTMLElement {
  constructor() {
    super(), this._$Ei = new Map(), this.isUpdatePending = !1, this.hasUpdated = !1, this._$El = null, this.u();
  }
  static addInitializer(t) {
    var i;
    this.finalize(), (null !== (i = this.h) && void 0 !== i ? i : this.h = []).push(t);
  }
  static get observedAttributes() {
    this.finalize();
    const t = [];
    return this.elementProperties.forEach((i, s) => {
      const e = this._$Ep(s, i);
      void 0 !== e && (this._$Ev.set(e, s), t.push(e));
    }), t;
  }
  static createProperty(t, i = l$3) {
    if (i.state && (i.attribute = !1), this.finalize(), this.elementProperties.set(t, i), !i.noAccessor && !this.prototype.hasOwnProperty(t)) {
      const s = "symbol" == typeof t ? Symbol() : "__" + t,
        e = this.getPropertyDescriptor(t, s, i);
      void 0 !== e && Object.defineProperty(this.prototype, t, e);
    }
  }
  static getPropertyDescriptor(t, i, s) {
    return {
      get() {
        return this[i];
      },
      set(e) {
        const r = this[t];
        this[i] = e, this.requestUpdate(t, r, s);
      },
      configurable: !0,
      enumerable: !0
    };
  }
  static getPropertyOptions(t) {
    return this.elementProperties.get(t) || l$3;
  }
  static finalize() {
    if (this.hasOwnProperty(d$2)) return !1;
    this[d$2] = !0;
    const t = Object.getPrototypeOf(this);
    if (t.finalize(), void 0 !== t.h && (this.h = [...t.h]), this.elementProperties = new Map(t.elementProperties), this._$Ev = new Map(), this.hasOwnProperty("properties")) {
      const t = this.properties,
        i = [...Object.getOwnPropertyNames(t), ...Object.getOwnPropertySymbols(t)];
      for (const s of i) this.createProperty(s, t[s]);
    }
    return this.elementStyles = this.finalizeStyles(this.styles), !0;
  }
  static finalizeStyles(i) {
    const s = [];
    if (Array.isArray(i)) {
      const e = new Set(i.flat(1 / 0).reverse());
      for (const i of e) s.unshift(c$2(i));
    } else void 0 !== i && s.push(c$2(i));
    return s;
  }
  static _$Ep(t, i) {
    const s = i.attribute;
    return !1 === s ? void 0 : "string" == typeof s ? s : "string" == typeof t ? t.toLowerCase() : void 0;
  }
  u() {
    var t;
    this._$E_ = new Promise(t => this.enableUpdating = t), this._$AL = new Map(), this._$Eg(), this.requestUpdate(), null === (t = this.constructor.h) || void 0 === t || t.forEach(t => t(this));
  }
  addController(t) {
    var i, s;
    (null !== (i = this._$ES) && void 0 !== i ? i : this._$ES = []).push(t), void 0 !== this.renderRoot && this.isConnected && (null === (s = t.hostConnected) || void 0 === s || s.call(t));
  }
  removeController(t) {
    var i;
    null === (i = this._$ES) || void 0 === i || i.splice(this._$ES.indexOf(t) >>> 0, 1);
  }
  _$Eg() {
    this.constructor.elementProperties.forEach((t, i) => {
      this.hasOwnProperty(i) && (this._$Ei.set(i, this[i]), delete this[i]);
    });
  }
  createRenderRoot() {
    var t;
    const s = null !== (t = this.shadowRoot) && void 0 !== t ? t : this.attachShadow(this.constructor.shadowRootOptions);
    return S$2(s, this.constructor.elementStyles), s;
  }
  connectedCallback() {
    var t;
    void 0 === this.renderRoot && (this.renderRoot = this.createRenderRoot()), this.enableUpdating(!0), null === (t = this._$ES) || void 0 === t || t.forEach(t => {
      var i;
      return null === (i = t.hostConnected) || void 0 === i ? void 0 : i.call(t);
    });
  }
  enableUpdating(t) {}
  disconnectedCallback() {
    var t;
    null === (t = this._$ES) || void 0 === t || t.forEach(t => {
      var i;
      return null === (i = t.hostDisconnected) || void 0 === i ? void 0 : i.call(t);
    });
  }
  attributeChangedCallback(t, i, s) {
    this._$AK(t, s);
  }
  _$EO(t, i, s = l$3) {
    var e;
    const r = this.constructor._$Ep(t, s);
    if (void 0 !== r && !0 === s.reflect) {
      const h = (void 0 !== (null === (e = s.converter) || void 0 === e ? void 0 : e.toAttribute) ? s.converter : n$3).toAttribute(i, s.type);
      this._$El = t, null == h ? this.removeAttribute(r) : this.setAttribute(r, h), this._$El = null;
    }
  }
  _$AK(t, i) {
    var s;
    const e = this.constructor,
      r = e._$Ev.get(t);
    if (void 0 !== r && this._$El !== r) {
      const t = e.getPropertyOptions(r),
        h = "function" == typeof t.converter ? {
          fromAttribute: t.converter
        } : void 0 !== (null === (s = t.converter) || void 0 === s ? void 0 : s.fromAttribute) ? t.converter : n$3;
      this._$El = r, this[r] = h.fromAttribute(i, t.type), this._$El = null;
    }
  }
  requestUpdate(t, i, s) {
    let e = !0;
    void 0 !== t && (((s = s || this.constructor.getPropertyOptions(t)).hasChanged || a$2)(this[t], i) ? (this._$AL.has(t) || this._$AL.set(t, i), !0 === s.reflect && this._$El !== t && (void 0 === this._$EC && (this._$EC = new Map()), this._$EC.set(t, s))) : e = !1), !this.isUpdatePending && e && (this._$E_ = this._$Ej());
  }
  async _$Ej() {
    this.isUpdatePending = !0;
    try {
      await this._$E_;
    } catch (t) {
      Promise.reject(t);
    }
    const t = this.scheduleUpdate();
    return null != t && (await t), !this.isUpdatePending;
  }
  scheduleUpdate() {
    return this.performUpdate();
  }
  performUpdate() {
    var t;
    if (!this.isUpdatePending) return;
    this.hasUpdated, this._$Ei && (this._$Ei.forEach((t, i) => this[i] = t), this._$Ei = void 0);
    let i = !1;
    const s = this._$AL;
    try {
      i = this.shouldUpdate(s), i ? (this.willUpdate(s), null === (t = this._$ES) || void 0 === t || t.forEach(t => {
        var i;
        return null === (i = t.hostUpdate) || void 0 === i ? void 0 : i.call(t);
      }), this.update(s)) : this._$Ek();
    } catch (t) {
      throw i = !1, this._$Ek(), t;
    }
    i && this._$AE(s);
  }
  willUpdate(t) {}
  _$AE(t) {
    var i;
    null === (i = this._$ES) || void 0 === i || i.forEach(t => {
      var i;
      return null === (i = t.hostUpdated) || void 0 === i ? void 0 : i.call(t);
    }), this.hasUpdated || (this.hasUpdated = !0, this.firstUpdated(t)), this.updated(t);
  }
  _$Ek() {
    this._$AL = new Map(), this.isUpdatePending = !1;
  }
  get updateComplete() {
    return this.getUpdateComplete();
  }
  getUpdateComplete() {
    return this._$E_;
  }
  shouldUpdate(t) {
    return !0;
  }
  update(t) {
    void 0 !== this._$EC && (this._$EC.forEach((t, i) => this._$EO(i, this[i], t)), this._$EC = void 0), this._$Ek();
  }
  updated(t) {}
  firstUpdated(t) {}
};
u$2[d$2] = !0, u$2.elementProperties = new Map(), u$2.elementStyles = [], u$2.shadowRootOptions = {
  mode: "open"
}, null == o$3 || o$3({
  ReactiveElement: u$2
}), (null !== (s$3 = e$2.reactiveElementVersions) && void 0 !== s$3 ? s$3 : e$2.reactiveElementVersions = []).push("1.6.2");

/**
 * @license
 * Copyright 2017 Google LLC
 * SPDX-License-Identifier: BSD-3-Clause
 */
var t$1;
const i$1 = window,
  s$2 = i$1.trustedTypes,
  e$1 = s$2 ? s$2.createPolicy("lit-html", {
    createHTML: t => t
  }) : void 0,
  o$2 = "$lit$",
  n$2 = `lit$${(Math.random() + "").slice(9)}$`,
  l$2 = "?" + n$2,
  h$1 = `<${l$2}>`,
  r$1 = document,
  u$1 = () => r$1.createComment(""),
  d$1 = t => null === t || "object" != typeof t && "function" != typeof t,
  c$1 = Array.isArray,
  v$1 = t => c$1(t) || "function" == typeof (null == t ? void 0 : t[Symbol.iterator]),
  a$1 = "[ \t\n\f\r]",
  f$1 = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,
  _$1 = /-->/g,
  m$1 = />/g,
  p$1 = RegExp(`>|${a$1}(?:([^\\s"'>=/]+)(${a$1}*=${a$1}*(?:[^ \t\n\f\r"'\`<>=]|("|')|))|$)`, "g"),
  g$1 = /'/g,
  $$1 = /"/g,
  y$1 = /^(?:script|style|textarea|title)$/i,
  T$1 = Symbol.for("lit-noChange"),
  A$1 = Symbol.for("lit-nothing"),
  E$1 = new WeakMap(),
  C$1 = r$1.createTreeWalker(r$1, 129, null, !1);
function P$1(t, i) {
  if (!Array.isArray(t) || !t.hasOwnProperty("raw")) throw Error("invalid template strings array");
  return void 0 !== e$1 ? e$1.createHTML(i) : i;
}
const V$1 = (t, i) => {
  const s = t.length - 1,
    e = [];
  let l,
    r = 2 === i ? "<svg>" : "",
    u = f$1;
  for (let i = 0; i < s; i++) {
    const s = t[i];
    let d,
      c,
      v = -1,
      a = 0;
    for (; a < s.length && (u.lastIndex = a, c = u.exec(s), null !== c);) a = u.lastIndex, u === f$1 ? "!--" === c[1] ? u = _$1 : void 0 !== c[1] ? u = m$1 : void 0 !== c[2] ? (y$1.test(c[2]) && (l = RegExp("</" + c[2], "g")), u = p$1) : void 0 !== c[3] && (u = p$1) : u === p$1 ? ">" === c[0] ? (u = null != l ? l : f$1, v = -1) : void 0 === c[1] ? v = -2 : (v = u.lastIndex - c[2].length, d = c[1], u = void 0 === c[3] ? p$1 : '"' === c[3] ? $$1 : g$1) : u === $$1 || u === g$1 ? u = p$1 : u === _$1 || u === m$1 ? u = f$1 : (u = p$1, l = void 0);
    const w = u === p$1 && t[i + 1].startsWith("/>") ? " " : "";
    r += u === f$1 ? s + h$1 : v >= 0 ? (e.push(d), s.slice(0, v) + o$2 + s.slice(v) + n$2 + w) : s + n$2 + (-2 === v ? (e.push(void 0), i) : w);
  }
  return [P$1(t, r + (t[s] || "<?>") + (2 === i ? "</svg>" : "")), e];
};
let N$1 = class N {
  constructor({
    strings: t,
    _$litType$: i
  }, e) {
    let h;
    this.parts = [];
    let r = 0,
      d = 0;
    const c = t.length - 1,
      v = this.parts,
      [a, f] = V$1(t, i);
    if (this.el = N.createElement(a, e), C$1.currentNode = this.el.content, 2 === i) {
      const t = this.el.content,
        i = t.firstChild;
      i.remove(), t.append(...i.childNodes);
    }
    for (; null !== (h = C$1.nextNode()) && v.length < c;) {
      if (1 === h.nodeType) {
        if (h.hasAttributes()) {
          const t = [];
          for (const i of h.getAttributeNames()) if (i.endsWith(o$2) || i.startsWith(n$2)) {
            const s = f[d++];
            if (t.push(i), void 0 !== s) {
              const t = h.getAttribute(s.toLowerCase() + o$2).split(n$2),
                i = /([.?@])?(.*)/.exec(s);
              v.push({
                type: 1,
                index: r,
                name: i[2],
                strings: t,
                ctor: "." === i[1] ? H$1 : "?" === i[1] ? L$1 : "@" === i[1] ? z$1 : k$1
              });
            } else v.push({
              type: 6,
              index: r
            });
          }
          for (const i of t) h.removeAttribute(i);
        }
        if (y$1.test(h.tagName)) {
          const t = h.textContent.split(n$2),
            i = t.length - 1;
          if (i > 0) {
            h.textContent = s$2 ? s$2.emptyScript : "";
            for (let s = 0; s < i; s++) h.append(t[s], u$1()), C$1.nextNode(), v.push({
              type: 2,
              index: ++r
            });
            h.append(t[i], u$1());
          }
        }
      } else if (8 === h.nodeType) if (h.data === l$2) v.push({
        type: 2,
        index: r
      });else {
        let t = -1;
        for (; -1 !== (t = h.data.indexOf(n$2, t + 1));) v.push({
          type: 7,
          index: r
        }), t += n$2.length - 1;
      }
      r++;
    }
  }
  static createElement(t, i) {
    const s = r$1.createElement("template");
    return s.innerHTML = t, s;
  }
};
function S$1(t, i, s = t, e) {
  var o, n, l, h;
  if (i === T$1) return i;
  let r = void 0 !== e ? null === (o = s._$Co) || void 0 === o ? void 0 : o[e] : s._$Cl;
  const u = d$1(i) ? void 0 : i._$litDirective$;
  return (null == r ? void 0 : r.constructor) !== u && (null === (n = null == r ? void 0 : r._$AO) || void 0 === n || n.call(r, !1), void 0 === u ? r = void 0 : (r = new u(t), r._$AT(t, s, e)), void 0 !== e ? (null !== (l = (h = s)._$Co) && void 0 !== l ? l : h._$Co = [])[e] = r : s._$Cl = r), void 0 !== r && (i = S$1(t, r._$AS(t, i.values), r, e)), i;
}
let M$1 = class M {
  constructor(t, i) {
    this._$AV = [], this._$AN = void 0, this._$AD = t, this._$AM = i;
  }
  get parentNode() {
    return this._$AM.parentNode;
  }
  get _$AU() {
    return this._$AM._$AU;
  }
  u(t) {
    var i;
    const {
        el: {
          content: s
        },
        parts: e
      } = this._$AD,
      o = (null !== (i = null == t ? void 0 : t.creationScope) && void 0 !== i ? i : r$1).importNode(s, !0);
    C$1.currentNode = o;
    let n = C$1.nextNode(),
      l = 0,
      h = 0,
      u = e[0];
    for (; void 0 !== u;) {
      if (l === u.index) {
        let i;
        2 === u.type ? i = new R$1(n, n.nextSibling, this, t) : 1 === u.type ? i = new u.ctor(n, u.name, u.strings, this, t) : 6 === u.type && (i = new Z(n, this, t)), this._$AV.push(i), u = e[++h];
      }
      l !== (null == u ? void 0 : u.index) && (n = C$1.nextNode(), l++);
    }
    return C$1.currentNode = r$1, o;
  }
  v(t) {
    let i = 0;
    for (const s of this._$AV) void 0 !== s && (void 0 !== s.strings ? (s._$AI(t, s, i), i += s.strings.length - 2) : s._$AI(t[i])), i++;
  }
};
let R$1 = class R {
  constructor(t, i, s, e) {
    var o;
    this.type = 2, this._$AH = A$1, this._$AN = void 0, this._$AA = t, this._$AB = i, this._$AM = s, this.options = e, this._$Cp = null === (o = null == e ? void 0 : e.isConnected) || void 0 === o || o;
  }
  get _$AU() {
    var t, i;
    return null !== (i = null === (t = this._$AM) || void 0 === t ? void 0 : t._$AU) && void 0 !== i ? i : this._$Cp;
  }
  get parentNode() {
    let t = this._$AA.parentNode;
    const i = this._$AM;
    return void 0 !== i && 11 === (null == t ? void 0 : t.nodeType) && (t = i.parentNode), t;
  }
  get startNode() {
    return this._$AA;
  }
  get endNode() {
    return this._$AB;
  }
  _$AI(t, i = this) {
    t = S$1(this, t, i), d$1(t) ? t === A$1 || null == t || "" === t ? (this._$AH !== A$1 && this._$AR(), this._$AH = A$1) : t !== this._$AH && t !== T$1 && this._(t) : void 0 !== t._$litType$ ? this.g(t) : void 0 !== t.nodeType ? this.$(t) : v$1(t) ? this.T(t) : this._(t);
  }
  k(t) {
    return this._$AA.parentNode.insertBefore(t, this._$AB);
  }
  $(t) {
    this._$AH !== t && (this._$AR(), this._$AH = this.k(t));
  }
  _(t) {
    this._$AH !== A$1 && d$1(this._$AH) ? this._$AA.nextSibling.data = t : this.$(r$1.createTextNode(t)), this._$AH = t;
  }
  g(t) {
    var i;
    const {
        values: s,
        _$litType$: e
      } = t,
      o = "number" == typeof e ? this._$AC(t) : (void 0 === e.el && (e.el = N$1.createElement(P$1(e.h, e.h[0]), this.options)), e);
    if ((null === (i = this._$AH) || void 0 === i ? void 0 : i._$AD) === o) this._$AH.v(s);else {
      const t = new M$1(o, this),
        i = t.u(this.options);
      t.v(s), this.$(i), this._$AH = t;
    }
  }
  _$AC(t) {
    let i = E$1.get(t.strings);
    return void 0 === i && E$1.set(t.strings, i = new N$1(t)), i;
  }
  T(t) {
    c$1(this._$AH) || (this._$AH = [], this._$AR());
    const i = this._$AH;
    let s,
      e = 0;
    for (const o of t) e === i.length ? i.push(s = new R(this.k(u$1()), this.k(u$1()), this, this.options)) : s = i[e], s._$AI(o), e++;
    e < i.length && (this._$AR(s && s._$AB.nextSibling, e), i.length = e);
  }
  _$AR(t = this._$AA.nextSibling, i) {
    var s;
    for (null === (s = this._$AP) || void 0 === s || s.call(this, !1, !0, i); t && t !== this._$AB;) {
      const i = t.nextSibling;
      t.remove(), t = i;
    }
  }
  setConnected(t) {
    var i;
    void 0 === this._$AM && (this._$Cp = t, null === (i = this._$AP) || void 0 === i || i.call(this, t));
  }
};
let k$1 = class k {
  constructor(t, i, s, e, o) {
    this.type = 1, this._$AH = A$1, this._$AN = void 0, this.element = t, this.name = i, this._$AM = e, this.options = o, s.length > 2 || "" !== s[0] || "" !== s[1] ? (this._$AH = Array(s.length - 1).fill(new String()), this.strings = s) : this._$AH = A$1;
  }
  get tagName() {
    return this.element.tagName;
  }
  get _$AU() {
    return this._$AM._$AU;
  }
  _$AI(t, i = this, s, e) {
    const o = this.strings;
    let n = !1;
    if (void 0 === o) t = S$1(this, t, i, 0), n = !d$1(t) || t !== this._$AH && t !== T$1, n && (this._$AH = t);else {
      const e = t;
      let l, h;
      for (t = o[0], l = 0; l < o.length - 1; l++) h = S$1(this, e[s + l], i, l), h === T$1 && (h = this._$AH[l]), n || (n = !d$1(h) || h !== this._$AH[l]), h === A$1 ? t = A$1 : t !== A$1 && (t += (null != h ? h : "") + o[l + 1]), this._$AH[l] = h;
    }
    n && !e && this.j(t);
  }
  j(t) {
    t === A$1 ? this.element.removeAttribute(this.name) : this.element.setAttribute(this.name, null != t ? t : "");
  }
};
let H$1 = class H extends k$1 {
  constructor() {
    super(...arguments), this.type = 3;
  }
  j(t) {
    this.element[this.name] = t === A$1 ? void 0 : t;
  }
};
const I$1 = s$2 ? s$2.emptyScript : "";
let L$1 = class L extends k$1 {
  constructor() {
    super(...arguments), this.type = 4;
  }
  j(t) {
    t && t !== A$1 ? this.element.setAttribute(this.name, I$1) : this.element.removeAttribute(this.name);
  }
};
let z$1 = class z extends k$1 {
  constructor(t, i, s, e, o) {
    super(t, i, s, e, o), this.type = 5;
  }
  _$AI(t, i = this) {
    var s;
    if ((t = null !== (s = S$1(this, t, i, 0)) && void 0 !== s ? s : A$1) === T$1) return;
    const e = this._$AH,
      o = t === A$1 && e !== A$1 || t.capture !== e.capture || t.once !== e.once || t.passive !== e.passive,
      n = t !== A$1 && (e === A$1 || o);
    o && this.element.removeEventListener(this.name, this, e), n && this.element.addEventListener(this.name, this, t), this._$AH = t;
  }
  handleEvent(t) {
    var i, s;
    "function" == typeof this._$AH ? this._$AH.call(null !== (s = null === (i = this.options) || void 0 === i ? void 0 : i.host) && void 0 !== s ? s : this.element, t) : this._$AH.handleEvent(t);
  }
};
class Z {
  constructor(t, i, s) {
    this.element = t, this.type = 6, this._$AN = void 0, this._$AM = i, this.options = s;
  }
  get _$AU() {
    return this._$AM._$AU;
  }
  _$AI(t) {
    S$1(this, t);
  }
}
const B$1 = i$1.litHtmlPolyfillSupport;
null == B$1 || B$1(N$1, R$1), (null !== (t$1 = i$1.litHtmlVersions) && void 0 !== t$1 ? t$1 : i$1.litHtmlVersions = []).push("2.8.0");

/**
 * @license
 * Copyright 2017 Google LLC
 * SPDX-License-Identifier: BSD-3-Clause
 */
var t;
const i = window,
  s$1 = i.trustedTypes,
  e = s$1 ? s$1.createPolicy("lit-html", {
    createHTML: t => t
  }) : void 0,
  o$1 = "$lit$",
  n$1 = `lit$${(Math.random() + "").slice(9)}$`,
  l$1 = "?" + n$1,
  h = `<${l$1}>`,
  r = document,
  d = () => r.createComment(""),
  u = t => null === t || "object" != typeof t && "function" != typeof t,
  c = Array.isArray,
  v = t => c(t) || "function" == typeof (null == t ? void 0 : t[Symbol.iterator]),
  a = "[ \t\n\f\r]",
  f = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,
  _ = /-->/g,
  m = />/g,
  p = RegExp(`>|${a}(?:([^\\s"'>=/]+)(${a}*=${a}*(?:[^ \t\n\f\r"'\`<>=]|("|')|))|$)`, "g"),
  g = /'/g,
  $ = /"/g,
  y = /^(?:script|style|textarea|title)$/i,
  w = t => (i, ...s) => ({
    _$litType$: t,
    strings: i,
    values: s
  }),
  x = w(1),
  T = Symbol.for("lit-noChange"),
  A = Symbol.for("lit-nothing"),
  E = new WeakMap(),
  C = r.createTreeWalker(r, 129, null, !1),
  P = (t, i) => {
    const s = t.length - 1,
      l = [];
    let r,
      d = 2 === i ? "<svg>" : "",
      u = f;
    for (let i = 0; i < s; i++) {
      const s = t[i];
      let e,
        c,
        v = -1,
        a = 0;
      for (; a < s.length && (u.lastIndex = a, c = u.exec(s), null !== c);) a = u.lastIndex, u === f ? "!--" === c[1] ? u = _ : void 0 !== c[1] ? u = m : void 0 !== c[2] ? (y.test(c[2]) && (r = RegExp("</" + c[2], "g")), u = p) : void 0 !== c[3] && (u = p) : u === p ? ">" === c[0] ? (u = null != r ? r : f, v = -1) : void 0 === c[1] ? v = -2 : (v = u.lastIndex - c[2].length, e = c[1], u = void 0 === c[3] ? p : '"' === c[3] ? $ : g) : u === $ || u === g ? u = p : u === _ || u === m ? u = f : (u = p, r = void 0);
      const w = u === p && t[i + 1].startsWith("/>") ? " " : "";
      d += u === f ? s + h : v >= 0 ? (l.push(e), s.slice(0, v) + o$1 + s.slice(v) + n$1 + w) : s + n$1 + (-2 === v ? (l.push(void 0), i) : w);
    }
    const c = d + (t[s] || "<?>") + (2 === i ? "</svg>" : "");
    if (!Array.isArray(t) || !t.hasOwnProperty("raw")) throw Error("invalid template strings array");
    return [void 0 !== e ? e.createHTML(c) : c, l];
  };
class V {
  constructor({
    strings: t,
    _$litType$: i
  }, e) {
    let h;
    this.parts = [];
    let r = 0,
      u = 0;
    const c = t.length - 1,
      v = this.parts,
      [a, f] = P(t, i);
    if (this.el = V.createElement(a, e), C.currentNode = this.el.content, 2 === i) {
      const t = this.el.content,
        i = t.firstChild;
      i.remove(), t.append(...i.childNodes);
    }
    for (; null !== (h = C.nextNode()) && v.length < c;) {
      if (1 === h.nodeType) {
        if (h.hasAttributes()) {
          const t = [];
          for (const i of h.getAttributeNames()) if (i.endsWith(o$1) || i.startsWith(n$1)) {
            const s = f[u++];
            if (t.push(i), void 0 !== s) {
              const t = h.getAttribute(s.toLowerCase() + o$1).split(n$1),
                i = /([.?@])?(.*)/.exec(s);
              v.push({
                type: 1,
                index: r,
                name: i[2],
                strings: t,
                ctor: "." === i[1] ? k : "?" === i[1] ? I : "@" === i[1] ? L : R
              });
            } else v.push({
              type: 6,
              index: r
            });
          }
          for (const i of t) h.removeAttribute(i);
        }
        if (y.test(h.tagName)) {
          const t = h.textContent.split(n$1),
            i = t.length - 1;
          if (i > 0) {
            h.textContent = s$1 ? s$1.emptyScript : "";
            for (let s = 0; s < i; s++) h.append(t[s], d()), C.nextNode(), v.push({
              type: 2,
              index: ++r
            });
            h.append(t[i], d());
          }
        }
      } else if (8 === h.nodeType) if (h.data === l$1) v.push({
        type: 2,
        index: r
      });else {
        let t = -1;
        for (; -1 !== (t = h.data.indexOf(n$1, t + 1));) v.push({
          type: 7,
          index: r
        }), t += n$1.length - 1;
      }
      r++;
    }
  }
  static createElement(t, i) {
    const s = r.createElement("template");
    return s.innerHTML = t, s;
  }
}
function N(t, i, s = t, e) {
  var o, n, l, h;
  if (i === T) return i;
  let r = void 0 !== e ? null === (o = s._$Co) || void 0 === o ? void 0 : o[e] : s._$Cl;
  const d = u(i) ? void 0 : i._$litDirective$;
  return (null == r ? void 0 : r.constructor) !== d && (null === (n = null == r ? void 0 : r._$AO) || void 0 === n || n.call(r, !1), void 0 === d ? r = void 0 : (r = new d(t), r._$AT(t, s, e)), void 0 !== e ? (null !== (l = (h = s)._$Co) && void 0 !== l ? l : h._$Co = [])[e] = r : s._$Cl = r), void 0 !== r && (i = N(t, r._$AS(t, i.values), r, e)), i;
}
class S {
  constructor(t, i) {
    this._$AV = [], this._$AN = void 0, this._$AD = t, this._$AM = i;
  }
  get parentNode() {
    return this._$AM.parentNode;
  }
  get _$AU() {
    return this._$AM._$AU;
  }
  u(t) {
    var i;
    const {
        el: {
          content: s
        },
        parts: e
      } = this._$AD,
      o = (null !== (i = null == t ? void 0 : t.creationScope) && void 0 !== i ? i : r).importNode(s, !0);
    C.currentNode = o;
    let n = C.nextNode(),
      l = 0,
      h = 0,
      d = e[0];
    for (; void 0 !== d;) {
      if (l === d.index) {
        let i;
        2 === d.type ? i = new M(n, n.nextSibling, this, t) : 1 === d.type ? i = new d.ctor(n, d.name, d.strings, this, t) : 6 === d.type && (i = new z(n, this, t)), this._$AV.push(i), d = e[++h];
      }
      l !== (null == d ? void 0 : d.index) && (n = C.nextNode(), l++);
    }
    return C.currentNode = r, o;
  }
  v(t) {
    let i = 0;
    for (const s of this._$AV) void 0 !== s && (void 0 !== s.strings ? (s._$AI(t, s, i), i += s.strings.length - 2) : s._$AI(t[i])), i++;
  }
}
class M {
  constructor(t, i, s, e) {
    var o;
    this.type = 2, this._$AH = A, this._$AN = void 0, this._$AA = t, this._$AB = i, this._$AM = s, this.options = e, this._$Cp = null === (o = null == e ? void 0 : e.isConnected) || void 0 === o || o;
  }
  get _$AU() {
    var t, i;
    return null !== (i = null === (t = this._$AM) || void 0 === t ? void 0 : t._$AU) && void 0 !== i ? i : this._$Cp;
  }
  get parentNode() {
    let t = this._$AA.parentNode;
    const i = this._$AM;
    return void 0 !== i && 11 === (null == t ? void 0 : t.nodeType) && (t = i.parentNode), t;
  }
  get startNode() {
    return this._$AA;
  }
  get endNode() {
    return this._$AB;
  }
  _$AI(t, i = this) {
    t = N(this, t, i), u(t) ? t === A || null == t || "" === t ? (this._$AH !== A && this._$AR(), this._$AH = A) : t !== this._$AH && t !== T && this._(t) : void 0 !== t._$litType$ ? this.g(t) : void 0 !== t.nodeType ? this.$(t) : v(t) ? this.T(t) : this._(t);
  }
  k(t) {
    return this._$AA.parentNode.insertBefore(t, this._$AB);
  }
  $(t) {
    this._$AH !== t && (this._$AR(), this._$AH = this.k(t));
  }
  _(t) {
    this._$AH !== A && u(this._$AH) ? this._$AA.nextSibling.data = t : this.$(r.createTextNode(t)), this._$AH = t;
  }
  g(t) {
    var i;
    const {
        values: s,
        _$litType$: e
      } = t,
      o = "number" == typeof e ? this._$AC(t) : (void 0 === e.el && (e.el = V.createElement(e.h, this.options)), e);
    if ((null === (i = this._$AH) || void 0 === i ? void 0 : i._$AD) === o) this._$AH.v(s);else {
      const t = new S(o, this),
        i = t.u(this.options);
      t.v(s), this.$(i), this._$AH = t;
    }
  }
  _$AC(t) {
    let i = E.get(t.strings);
    return void 0 === i && E.set(t.strings, i = new V(t)), i;
  }
  T(t) {
    c(this._$AH) || (this._$AH = [], this._$AR());
    const i = this._$AH;
    let s,
      e = 0;
    for (const o of t) e === i.length ? i.push(s = new M(this.k(d()), this.k(d()), this, this.options)) : s = i[e], s._$AI(o), e++;
    e < i.length && (this._$AR(s && s._$AB.nextSibling, e), i.length = e);
  }
  _$AR(t = this._$AA.nextSibling, i) {
    var s;
    for (null === (s = this._$AP) || void 0 === s || s.call(this, !1, !0, i); t && t !== this._$AB;) {
      const i = t.nextSibling;
      t.remove(), t = i;
    }
  }
  setConnected(t) {
    var i;
    void 0 === this._$AM && (this._$Cp = t, null === (i = this._$AP) || void 0 === i || i.call(this, t));
  }
}
class R {
  constructor(t, i, s, e, o) {
    this.type = 1, this._$AH = A, this._$AN = void 0, this.element = t, this.name = i, this._$AM = e, this.options = o, s.length > 2 || "" !== s[0] || "" !== s[1] ? (this._$AH = Array(s.length - 1).fill(new String()), this.strings = s) : this._$AH = A;
  }
  get tagName() {
    return this.element.tagName;
  }
  get _$AU() {
    return this._$AM._$AU;
  }
  _$AI(t, i = this, s, e) {
    const o = this.strings;
    let n = !1;
    if (void 0 === o) t = N(this, t, i, 0), n = !u(t) || t !== this._$AH && t !== T, n && (this._$AH = t);else {
      const e = t;
      let l, h;
      for (t = o[0], l = 0; l < o.length - 1; l++) h = N(this, e[s + l], i, l), h === T && (h = this._$AH[l]), n || (n = !u(h) || h !== this._$AH[l]), h === A ? t = A : t !== A && (t += (null != h ? h : "") + o[l + 1]), this._$AH[l] = h;
    }
    n && !e && this.j(t);
  }
  j(t) {
    t === A ? this.element.removeAttribute(this.name) : this.element.setAttribute(this.name, null != t ? t : "");
  }
}
class k extends R {
  constructor() {
    super(...arguments), this.type = 3;
  }
  j(t) {
    this.element[this.name] = t === A ? void 0 : t;
  }
}
const H = s$1 ? s$1.emptyScript : "";
class I extends R {
  constructor() {
    super(...arguments), this.type = 4;
  }
  j(t) {
    t && t !== A ? this.element.setAttribute(this.name, H) : this.element.removeAttribute(this.name);
  }
}
class L extends R {
  constructor(t, i, s, e, o) {
    super(t, i, s, e, o), this.type = 5;
  }
  _$AI(t, i = this) {
    var s;
    if ((t = null !== (s = N(this, t, i, 0)) && void 0 !== s ? s : A) === T) return;
    const e = this._$AH,
      o = t === A && e !== A || t.capture !== e.capture || t.once !== e.once || t.passive !== e.passive,
      n = t !== A && (e === A || o);
    o && this.element.removeEventListener(this.name, this, e), n && this.element.addEventListener(this.name, this, t), this._$AH = t;
  }
  handleEvent(t) {
    var i, s;
    "function" == typeof this._$AH ? this._$AH.call(null !== (s = null === (i = this.options) || void 0 === i ? void 0 : i.host) && void 0 !== s ? s : this.element, t) : this._$AH.handleEvent(t);
  }
}
class z {
  constructor(t, i, s) {
    this.element = t, this.type = 6, this._$AN = void 0, this._$AM = i, this.options = s;
  }
  get _$AU() {
    return this._$AM._$AU;
  }
  _$AI(t) {
    N(this, t);
  }
}
const j = i.litHtmlPolyfillSupport;
null == j || j(V, M), (null !== (t = i.litHtmlVersions) && void 0 !== t ? t : i.litHtmlVersions = []).push("2.7.4");
const B = (t, i, s) => {
  var e, o;
  const n = null !== (e = null == s ? void 0 : s.renderBefore) && void 0 !== e ? e : i;
  let l = n._$litPart$;
  if (void 0 === l) {
    const t = null !== (o = null == s ? void 0 : s.renderBefore) && void 0 !== o ? o : null;
    n._$litPart$ = l = new M(i.insertBefore(d(), t), t, void 0, null != s ? s : {});
  }
  return l._$AI(t), l;
};

/**
 * @license
 * Copyright 2017 Google LLC
 * SPDX-License-Identifier: BSD-3-Clause
 */
var l, o;
class s extends u$2 {
  constructor() {
    super(...arguments), this.renderOptions = {
      host: this
    }, this._$Do = void 0;
  }
  createRenderRoot() {
    var t, e;
    const i = super.createRenderRoot();
    return null !== (t = (e = this.renderOptions).renderBefore) && void 0 !== t || (e.renderBefore = i.firstChild), i;
  }
  update(t) {
    const i = this.render();
    this.hasUpdated || (this.renderOptions.isConnected = this.isConnected), super.update(t), this._$Do = B(i, this.renderRoot, this.renderOptions);
  }
  connectedCallback() {
    var t;
    super.connectedCallback(), null === (t = this._$Do) || void 0 === t || t.setConnected(!0);
  }
  disconnectedCallback() {
    var t;
    super.disconnectedCallback(), null === (t = this._$Do) || void 0 === t || t.setConnected(!1);
  }
  render() {
    return T;
  }
}
s.finalized = !0, s._$litElement$ = !0, null === (l = globalThis.litElementHydrateSupport) || void 0 === l || l.call(globalThis, {
  LitElement: s
});
const n = globalThis.litElementPolyfillSupport;
null == n || n({
  LitElement: s
});
(null !== (o = globalThis.litElementVersions) && void 0 !== o ? o : globalThis.litElementVersions = []).push("3.3.2");

/* 
Tool Cool Color Picker
Version: 1.0.15
Documentation: https://github.com/mzusin/toolcool-color-picker
Author: Miriam Zusin
License: MIT License                                   
*/
(() => {
  var Mt = Object.defineProperty;
  var kt = (o, e, t) => e in o ? Mt(o, e, {
    enumerable: !0,
    configurable: !0,
    writable: !0,
    value: t
  }) : o[e] = t;
  var h = (o, e, t) => (kt(o, typeof e != "symbol" ? e + "" : e, t), t);
  var ot = ":root{--tool-cool-color-picker-btn-bg:#fff;--tool-cool-color-picker-btn-border-color:#cecece;--tool-cool-color-picker-btn-border-color-inner:#626262;--tool-cool-color-picker-btn-border-radius:.25rem;--tool-cool-color-picker-btn-border-radius-inner:0}.color-picker{position:relative}.button{width:3rem;height:1.5rem;padding:.25rem;background:var(--tool-cool-color-picker-btn-bg,#fff);border-radius:var(--tool-cool-color-picker-btn-border-radius,0.25rem);border-width:1px;border-style:solid;border-color:var(--tool-cool-color-picker-btn-border-color,#cecece);cursor:pointer;box-sizing:border-box}.button-color{display:block;width:100%;height:100%;border-width:1px;border-style:solid;border-color:var(--tool-cool-color-picker-btn-border-color-inner,#626262);background:#000;box-sizing:border-box;border-radius:var(--tool-cool-color-picker-btn-border-radius-inner,0)}";
  var it = ":root{--tool-cool-color-picker-popup-bg:#fff;--tool-cool-color-picker-popup-border-color:#cecece;--tool-cool-color-picker-popup-width:214px}.popup{position:absolute;left:0;top:calc(100% - 1px);z-index:50;width:var(--tool-cool-color-picker-popup-width,214px);box-shadow:0 1px 3px 0 rgba(0,0,0,0.1),0 1px 2px -1px rgba(0,0,0,0.1);padding:.5rem;background:var(--tool-cool-color-picker-popup-bg,#fff);border-width:1px;border-style:solid;border-color:var(--tool-cool-color-picker-popup-border-color,#cecece);border-radius:.25rem}.popup.right{right:0;left:auto}";
  var rt = ".saturation{touch-action:none;overflow:hidden;width:100%;height:9rem;position:relative}.box{width:100%;height:100%;position:absolute}.white{background:linear-gradient(90deg,#fff,hsla(0,0%,100%,0))}.black{background:linear-gradient(0,#000,transparent)}.pointer{top:34.902%;left:18.6747%;cursor:pointer;position:absolute;outline:0}.handler{box-shadow:0 0 0 1.5px #fff,inset 0 0 1px 1px rgb(0,0,0,0.3),0 0 1px 2px rgb(0,0,0,0.4);-webkit-transform:translate(-2px,-2px);transform:translate(-2px,-2px);border-radius:100%;width:.25rem;height:.25rem;outline:0}";
  var p = "tc-hsv-changed",
    f = "tc-hue-changed",
    m = "tc-alpha-changed",
    D = "tc-button-clicked",
    nt = o => {
      !o || document.dispatchEvent(new CustomEvent(D, {
        detail: {
          cid: o
        }
      }));
    },
    M = (o, e) => {
      !o || document.dispatchEvent(new CustomEvent(m, {
        detail: {
          a: e,
          cid: o
        }
      }));
    },
    b = (o, e, t, i) => {
      !o || document.dispatchEvent(new CustomEvent(p, {
        detail: {
          h: e,
          s: t,
          v: i,
          cid: o
        }
      }));
    },
    st = (o, e) => {
      !o || document.dispatchEvent(new CustomEvent(f, {
        detail: {
          h: e,
          cid: o
        }
      }));
    };
  function u(o, e) {
    St(o) && (o = "100%");
    var t = Tt(o);
    return o = e === 360 ? o : Math.min(e, Math.max(0, parseFloat(o))), t && (o = parseInt(String(o * e), 10) / 100), Math.abs(o - e) < 1e-6 ? 1 : (e === 360 ? o = (o < 0 ? o % e + e : o % e) / parseFloat(String(e)) : o = o % e / parseFloat(String(e)), o);
  }
  function k(o) {
    return Math.min(1, Math.max(0, o));
  }
  function St(o) {
    return typeof o == "string" && o.indexOf(".") !== -1 && parseFloat(o) === 1;
  }
  function Tt(o) {
    return typeof o == "string" && o.indexOf("%") !== -1;
  }
  function _(o) {
    return o = parseFloat(o), (isNaN(o) || o < 0 || o > 1) && (o = 1), o;
  }
  function L(o) {
    return o <= 1 ? "".concat(Number(o) * 100, "%") : o;
  }
  function C(o) {
    return o.length === 1 ? "0" + o : String(o);
  }
  function at(o, e, t) {
    return {
      r: u(o, 255) * 255,
      g: u(e, 255) * 255,
      b: u(t, 255) * 255
    };
  }
  function U(o, e, t) {
    o = u(o, 255), e = u(e, 255), t = u(t, 255);
    var i = Math.max(o, e, t),
      r = Math.min(o, e, t),
      n = 0,
      s = 0,
      a = (i + r) / 2;
    if (i === r) s = 0, n = 0;else {
      var d = i - r;
      switch (s = a > .5 ? d / (2 - i - r) : d / (i + r), i) {
        case o:
          n = (e - t) / d + (e < t ? 6 : 0);
          break;
        case e:
          n = (t - o) / d + 2;
          break;
        case t:
          n = (o - e) / d + 4;
          break;
      }
      n /= 6;
    }
    return {
      h: n,
      s,
      l: a
    };
  }
  function O(o, e, t) {
    return t < 0 && (t += 1), t > 1 && (t -= 1), t < 1 / 6 ? o + (e - o) * (6 * t) : t < 1 / 2 ? e : t < 2 / 3 ? o + (e - o) * (2 / 3 - t) * 6 : o;
  }
  function ht(o, e, t) {
    var i, r, n;
    if (o = u(o, 360), e = u(e, 100), t = u(t, 100), e === 0) r = t, n = t, i = t;else {
      var s = t < .5 ? t * (1 + e) : t + e - t * e,
        a = 2 * t - s;
      i = O(a, s, o + 1 / 3), r = O(a, s, o), n = O(a, s, o - 1 / 3);
    }
    return {
      r: i * 255,
      g: r * 255,
      b: n * 255
    };
  }
  function N(o, e, t) {
    o = u(o, 255), e = u(e, 255), t = u(t, 255);
    var i = Math.max(o, e, t),
      r = Math.min(o, e, t),
      n = 0,
      s = i,
      a = i - r,
      d = i === 0 ? 0 : a / i;
    if (i === r) n = 0;else {
      switch (i) {
        case o:
          n = (e - t) / a + (e < t ? 6 : 0);
          break;
        case e:
          n = (t - o) / a + 2;
          break;
        case t:
          n = (o - e) / a + 4;
          break;
      }
      n /= 6;
    }
    return {
      h: n,
      s: d,
      v: s
    };
  }
  function lt(o, e, t) {
    o = u(o, 360) * 6, e = u(e, 100), t = u(t, 100);
    var i = Math.floor(o),
      r = o - i,
      n = t * (1 - e),
      s = t * (1 - r * e),
      a = t * (1 - (1 - r) * e),
      d = i % 6,
      w = [t, s, n, n, a, t][d],
      x = [a, t, t, s, n, n][d],
      R = [n, n, a, t, t, s][d];
    return {
      r: w * 255,
      g: x * 255,
      b: R * 255
    };
  }
  function K(o, e, t, i) {
    var r = [C(Math.round(o).toString(16)), C(Math.round(e).toString(16)), C(Math.round(t).toString(16))];
    return i && r[0].startsWith(r[0].charAt(1)) && r[1].startsWith(r[1].charAt(1)) && r[2].startsWith(r[2].charAt(1)) ? r[0].charAt(0) + r[1].charAt(0) + r[2].charAt(0) : r.join("");
  }
  function dt(o, e, t, i, r) {
    var n = [C(Math.round(o).toString(16)), C(Math.round(e).toString(16)), C(Math.round(t).toString(16)), C(Rt(i))];
    return r && n[0].startsWith(n[0].charAt(1)) && n[1].startsWith(n[1].charAt(1)) && n[2].startsWith(n[2].charAt(1)) && n[3].startsWith(n[3].charAt(1)) ? n[0].charAt(0) + n[1].charAt(0) + n[2].charAt(0) + n[3].charAt(0) : n.join("");
  }
  function Rt(o) {
    return Math.round(parseFloat(o) * 255).toString(16);
  }
  function V(o) {
    return g(o) / 255;
  }
  function g(o) {
    return parseInt(o, 16);
  }
  function ut(o) {
    return {
      r: o >> 16,
      g: (o & 65280) >> 8,
      b: o & 255
    };
  }
  var A = {
    aliceblue: "#f0f8ff",
    antiquewhite: "#faebd7",
    aqua: "#00ffff",
    aquamarine: "#7fffd4",
    azure: "#f0ffff",
    beige: "#f5f5dc",
    bisque: "#ffe4c4",
    black: "#000000",
    blanchedalmond: "#ffebcd",
    blue: "#0000ff",
    blueviolet: "#8a2be2",
    brown: "#a52a2a",
    burlywood: "#deb887",
    cadetblue: "#5f9ea0",
    chartreuse: "#7fff00",
    chocolate: "#d2691e",
    coral: "#ff7f50",
    cornflowerblue: "#6495ed",
    cornsilk: "#fff8dc",
    crimson: "#dc143c",
    cyan: "#00ffff",
    darkblue: "#00008b",
    darkcyan: "#008b8b",
    darkgoldenrod: "#b8860b",
    darkgray: "#a9a9a9",
    darkgreen: "#006400",
    darkgrey: "#a9a9a9",
    darkkhaki: "#bdb76b",
    darkmagenta: "#8b008b",
    darkolivegreen: "#556b2f",
    darkorange: "#ff8c00",
    darkorchid: "#9932cc",
    darkred: "#8b0000",
    darksalmon: "#e9967a",
    darkseagreen: "#8fbc8f",
    darkslateblue: "#483d8b",
    darkslategray: "#2f4f4f",
    darkslategrey: "#2f4f4f",
    darkturquoise: "#00ced1",
    darkviolet: "#9400d3",
    deeppink: "#ff1493",
    deepskyblue: "#00bfff",
    dimgray: "#696969",
    dimgrey: "#696969",
    dodgerblue: "#1e90ff",
    firebrick: "#b22222",
    floralwhite: "#fffaf0",
    forestgreen: "#228b22",
    fuchsia: "#ff00ff",
    gainsboro: "#dcdcdc",
    ghostwhite: "#f8f8ff",
    goldenrod: "#daa520",
    gold: "#ffd700",
    gray: "#808080",
    green: "#008000",
    greenyellow: "#adff2f",
    grey: "#808080",
    honeydew: "#f0fff0",
    hotpink: "#ff69b4",
    indianred: "#cd5c5c",
    indigo: "#4b0082",
    ivory: "#fffff0",
    khaki: "#f0e68c",
    lavenderblush: "#fff0f5",
    lavender: "#e6e6fa",
    lawngreen: "#7cfc00",
    lemonchiffon: "#fffacd",
    lightblue: "#add8e6",
    lightcoral: "#f08080",
    lightcyan: "#e0ffff",
    lightgoldenrodyellow: "#fafad2",
    lightgray: "#d3d3d3",
    lightgreen: "#90ee90",
    lightgrey: "#d3d3d3",
    lightpink: "#ffb6c1",
    lightsalmon: "#ffa07a",
    lightseagreen: "#20b2aa",
    lightskyblue: "#87cefa",
    lightslategray: "#778899",
    lightslategrey: "#778899",
    lightsteelblue: "#b0c4de",
    lightyellow: "#ffffe0",
    lime: "#00ff00",
    limegreen: "#32cd32",
    linen: "#faf0e6",
    magenta: "#ff00ff",
    maroon: "#800000",
    mediumaquamarine: "#66cdaa",
    mediumblue: "#0000cd",
    mediumorchid: "#ba55d3",
    mediumpurple: "#9370db",
    mediumseagreen: "#3cb371",
    mediumslateblue: "#7b68ee",
    mediumspringgreen: "#00fa9a",
    mediumturquoise: "#48d1cc",
    mediumvioletred: "#c71585",
    midnightblue: "#191970",
    mintcream: "#f5fffa",
    mistyrose: "#ffe4e1",
    moccasin: "#ffe4b5",
    navajowhite: "#ffdead",
    navy: "#000080",
    oldlace: "#fdf5e6",
    olive: "#808000",
    olivedrab: "#6b8e23",
    orange: "#ffa500",
    orangered: "#ff4500",
    orchid: "#da70d6",
    palegoldenrod: "#eee8aa",
    palegreen: "#98fb98",
    paleturquoise: "#afeeee",
    palevioletred: "#db7093",
    papayawhip: "#ffefd5",
    peachpuff: "#ffdab9",
    peru: "#cd853f",
    pink: "#ffc0cb",
    plum: "#dda0dd",
    powderblue: "#b0e0e6",
    purple: "#800080",
    rebeccapurple: "#663399",
    red: "#ff0000",
    rosybrown: "#bc8f8f",
    royalblue: "#4169e1",
    saddlebrown: "#8b4513",
    salmon: "#fa8072",
    sandybrown: "#f4a460",
    seagreen: "#2e8b57",
    seashell: "#fff5ee",
    sienna: "#a0522d",
    silver: "#c0c0c0",
    skyblue: "#87ceeb",
    slateblue: "#6a5acd",
    slategray: "#708090",
    slategrey: "#708090",
    snow: "#fffafa",
    springgreen: "#00ff7f",
    steelblue: "#4682b4",
    tan: "#d2b48c",
    teal: "#008080",
    thistle: "#d8bfd8",
    tomato: "#ff6347",
    turquoise: "#40e0d0",
    violet: "#ee82ee",
    wheat: "#f5deb3",
    white: "#ffffff",
    whitesmoke: "#f5f5f5",
    yellow: "#ffff00",
    yellowgreen: "#9acd32"
  };
  function ct(o) {
    var e = {
        r: 0,
        g: 0,
        b: 0
      },
      t = 1,
      i = null,
      r = null,
      n = null,
      s = !1,
      a = !1;
    return typeof o == "string" && (o = Pt(o)), typeof o == "object" && (E(o.r) && E(o.g) && E(o.b) ? (e = at(o.r, o.g, o.b), s = !0, a = String(o.r).substr(-1) === "%" ? "prgb" : "rgb") : E(o.h) && E(o.s) && E(o.v) ? (i = L(o.s), r = L(o.v), e = lt(o.h, i, r), s = !0, a = "hsv") : E(o.h) && E(o.s) && E(o.l) && (i = L(o.s), n = L(o.l), e = ht(o.h, i, n), s = !0, a = "hsl"), Object.prototype.hasOwnProperty.call(o, "a") && (t = o.a)), t = _(t), {
      ok: s,
      format: o.format || a,
      r: Math.min(255, Math.max(e.r, 0)),
      g: Math.min(255, Math.max(e.g, 0)),
      b: Math.min(255, Math.max(e.b, 0)),
      a: t
    };
  }
  var Dt = "[-\\+]?\\d+%?",
    _t = "[-\\+]?\\d*\\.\\d+%?",
    y = "(?:".concat(_t, ")|(?:").concat(Dt, ")"),
    G = "[\\s|\\(]+(".concat(y, ")[,|\\s]+(").concat(y, ")[,|\\s]+(").concat(y, ")\\s*\\)?"),
    F = "[\\s|\\(]+(".concat(y, ")[,|\\s]+(").concat(y, ")[,|\\s]+(").concat(y, ")[,|\\s]+(").concat(y, ")\\s*\\)?"),
    v = {
      CSS_UNIT: new RegExp(y),
      rgb: new RegExp("rgb" + G),
      rgba: new RegExp("rgba" + F),
      hsl: new RegExp("hsl" + G),
      hsla: new RegExp("hsla" + F),
      hsv: new RegExp("hsv" + G),
      hsva: new RegExp("hsva" + F),
      hex3: /^#?([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/,
      hex6: /^#?([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/,
      hex4: /^#?([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/,
      hex8: /^#?([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/
    };
  function Pt(o) {
    if (o = o.trim().toLowerCase(), o.length === 0) return !1;
    var e = !1;
    if (A[o]) o = A[o], e = !0;else if (o === "transparent") return {
      r: 0,
      g: 0,
      b: 0,
      a: 0,
      format: "name"
    };
    var t = v.rgb.exec(o);
    return t ? {
      r: t[1],
      g: t[2],
      b: t[3]
    } : (t = v.rgba.exec(o), t ? {
      r: t[1],
      g: t[2],
      b: t[3],
      a: t[4]
    } : (t = v.hsl.exec(o), t ? {
      h: t[1],
      s: t[2],
      l: t[3]
    } : (t = v.hsla.exec(o), t ? {
      h: t[1],
      s: t[2],
      l: t[3],
      a: t[4]
    } : (t = v.hsv.exec(o), t ? {
      h: t[1],
      s: t[2],
      v: t[3]
    } : (t = v.hsva.exec(o), t ? {
      h: t[1],
      s: t[2],
      v: t[3],
      a: t[4]
    } : (t = v.hex8.exec(o), t ? {
      r: g(t[1]),
      g: g(t[2]),
      b: g(t[3]),
      a: V(t[4]),
      format: e ? "name" : "hex8"
    } : (t = v.hex6.exec(o), t ? {
      r: g(t[1]),
      g: g(t[2]),
      b: g(t[3]),
      format: e ? "name" : "hex"
    } : (t = v.hex4.exec(o), t ? {
      r: g(t[1] + t[1]),
      g: g(t[2] + t[2]),
      b: g(t[3] + t[3]),
      a: V(t[4] + t[4]),
      format: e ? "name" : "hex8"
    } : (t = v.hex3.exec(o), t ? {
      r: g(t[1] + t[1]),
      g: g(t[2] + t[2]),
      b: g(t[3] + t[3]),
      format: e ? "name" : "hex"
    } : !1)))))))));
  }
  function E(o) {
    return Boolean(v.CSS_UNIT.exec(String(o)));
  }
  var l = function () {
    function o(e, t) {
      e === void 0 && (e = ""), t === void 0 && (t = {});
      var i;
      if (e instanceof o) return e;
      typeof e == "number" && (e = ut(e)), this.originalInput = e;
      var r = ct(e);
      this.originalInput = e, this.r = r.r, this.g = r.g, this.b = r.b, this.a = r.a, this.roundA = Math.round(100 * this.a) / 100, this.format = (i = t.format) !== null && i !== void 0 ? i : r.format, this.gradientType = t.gradientType, this.r < 1 && (this.r = Math.round(this.r)), this.g < 1 && (this.g = Math.round(this.g)), this.b < 1 && (this.b = Math.round(this.b)), this.isValid = r.ok;
    }
    return o.prototype.isDark = function () {
      return this.getBrightness() < 128;
    }, o.prototype.isLight = function () {
      return !this.isDark();
    }, o.prototype.getBrightness = function () {
      var e = this.toRgb();
      return (e.r * 299 + e.g * 587 + e.b * 114) / 1e3;
    }, o.prototype.getLuminance = function () {
      var e = this.toRgb(),
        t,
        i,
        r,
        n = e.r / 255,
        s = e.g / 255,
        a = e.b / 255;
      return n <= .03928 ? t = n / 12.92 : t = Math.pow((n + .055) / 1.055, 2.4), s <= .03928 ? i = s / 12.92 : i = Math.pow((s + .055) / 1.055, 2.4), a <= .03928 ? r = a / 12.92 : r = Math.pow((a + .055) / 1.055, 2.4), .2126 * t + .7152 * i + .0722 * r;
    }, o.prototype.getAlpha = function () {
      return this.a;
    }, o.prototype.setAlpha = function (e) {
      return this.a = _(e), this.roundA = Math.round(100 * this.a) / 100, this;
    }, o.prototype.toHsv = function () {
      var e = N(this.r, this.g, this.b);
      return {
        h: e.h * 360,
        s: e.s,
        v: e.v,
        a: this.a
      };
    }, o.prototype.toHsvString = function () {
      var e = N(this.r, this.g, this.b),
        t = Math.round(e.h * 360),
        i = Math.round(e.s * 100),
        r = Math.round(e.v * 100);
      return this.a === 1 ? "hsv(".concat(t, ", ").concat(i, "%, ").concat(r, "%)") : "hsva(".concat(t, ", ").concat(i, "%, ").concat(r, "%, ").concat(this.roundA, ")");
    }, o.prototype.toHsl = function () {
      var e = U(this.r, this.g, this.b);
      return {
        h: e.h * 360,
        s: e.s,
        l: e.l,
        a: this.a
      };
    }, o.prototype.toHslString = function () {
      var e = U(this.r, this.g, this.b),
        t = Math.round(e.h * 360),
        i = Math.round(e.s * 100),
        r = Math.round(e.l * 100);
      return this.a === 1 ? "hsl(".concat(t, ", ").concat(i, "%, ").concat(r, "%)") : "hsla(".concat(t, ", ").concat(i, "%, ").concat(r, "%, ").concat(this.roundA, ")");
    }, o.prototype.toHex = function (e) {
      return e === void 0 && (e = !1), K(this.r, this.g, this.b, e);
    }, o.prototype.toHexString = function (e) {
      return e === void 0 && (e = !1), "#" + this.toHex(e);
    }, o.prototype.toHex8 = function (e) {
      return e === void 0 && (e = !1), dt(this.r, this.g, this.b, this.a, e);
    }, o.prototype.toHex8String = function (e) {
      return e === void 0 && (e = !1), "#" + this.toHex8(e);
    }, o.prototype.toRgb = function () {
      return {
        r: Math.round(this.r),
        g: Math.round(this.g),
        b: Math.round(this.b),
        a: this.a
      };
    }, o.prototype.toRgbString = function () {
      var e = Math.round(this.r),
        t = Math.round(this.g),
        i = Math.round(this.b);
      return this.a === 1 ? "rgb(".concat(e, ", ").concat(t, ", ").concat(i, ")") : "rgba(".concat(e, ", ").concat(t, ", ").concat(i, ", ").concat(this.roundA, ")");
    }, o.prototype.toPercentageRgb = function () {
      var e = function (t) {
        return "".concat(Math.round(u(t, 255) * 100), "%");
      };
      return {
        r: e(this.r),
        g: e(this.g),
        b: e(this.b),
        a: this.a
      };
    }, o.prototype.toPercentageRgbString = function () {
      var e = function (t) {
        return Math.round(u(t, 255) * 100);
      };
      return this.a === 1 ? "rgb(".concat(e(this.r), "%, ").concat(e(this.g), "%, ").concat(e(this.b), "%)") : "rgba(".concat(e(this.r), "%, ").concat(e(this.g), "%, ").concat(e(this.b), "%, ").concat(this.roundA, ")");
    }, o.prototype.toName = function () {
      if (this.a === 0) return "transparent";
      if (this.a < 1) return !1;
      for (var e = "#" + K(this.r, this.g, this.b, !1), t = 0, i = Object.entries(A); t < i.length; t++) {
        var r = i[t],
          n = r[0],
          s = r[1];
        if (e === s) return n;
      }
      return !1;
    }, o.prototype.toString = function (e) {
      var t = Boolean(e);
      e = e != null ? e : this.format;
      var i = !1,
        r = this.a < 1 && this.a >= 0,
        n = !t && r && (e.startsWith("hex") || e === "name");
      return n ? e === "name" && this.a === 0 ? this.toName() : this.toRgbString() : (e === "rgb" && (i = this.toRgbString()), e === "prgb" && (i = this.toPercentageRgbString()), (e === "hex" || e === "hex6") && (i = this.toHexString()), e === "hex3" && (i = this.toHexString(!0)), e === "hex4" && (i = this.toHex8String(!0)), e === "hex8" && (i = this.toHex8String()), e === "name" && (i = this.toName()), e === "hsl" && (i = this.toHslString()), e === "hsv" && (i = this.toHsvString()), i || this.toHexString());
    }, o.prototype.toNumber = function () {
      return (Math.round(this.r) << 16) + (Math.round(this.g) << 8) + Math.round(this.b);
    }, o.prototype.clone = function () {
      return new o(this.toString());
    }, o.prototype.lighten = function (e) {
      e === void 0 && (e = 10);
      var t = this.toHsl();
      return t.l += e / 100, t.l = k(t.l), new o(t);
    }, o.prototype.brighten = function (e) {
      e === void 0 && (e = 10);
      var t = this.toRgb();
      return t.r = Math.max(0, Math.min(255, t.r - Math.round(255 * -(e / 100)))), t.g = Math.max(0, Math.min(255, t.g - Math.round(255 * -(e / 100)))), t.b = Math.max(0, Math.min(255, t.b - Math.round(255 * -(e / 100)))), new o(t);
    }, o.prototype.darken = function (e) {
      e === void 0 && (e = 10);
      var t = this.toHsl();
      return t.l -= e / 100, t.l = k(t.l), new o(t);
    }, o.prototype.tint = function (e) {
      return e === void 0 && (e = 10), this.mix("white", e);
    }, o.prototype.shade = function (e) {
      return e === void 0 && (e = 10), this.mix("black", e);
    }, o.prototype.desaturate = function (e) {
      e === void 0 && (e = 10);
      var t = this.toHsl();
      return t.s -= e / 100, t.s = k(t.s), new o(t);
    }, o.prototype.saturate = function (e) {
      e === void 0 && (e = 10);
      var t = this.toHsl();
      return t.s += e / 100, t.s = k(t.s), new o(t);
    }, o.prototype.greyscale = function () {
      return this.desaturate(100);
    }, o.prototype.spin = function (e) {
      var t = this.toHsl(),
        i = (t.h + e) % 360;
      return t.h = i < 0 ? 360 + i : i, new o(t);
    }, o.prototype.mix = function (e, t) {
      t === void 0 && (t = 50);
      var i = this.toRgb(),
        r = new o(e).toRgb(),
        n = t / 100,
        s = {
          r: (r.r - i.r) * n + i.r,
          g: (r.g - i.g) * n + i.g,
          b: (r.b - i.b) * n + i.b,
          a: (r.a - i.a) * n + i.a
        };
      return new o(s);
    }, o.prototype.analogous = function (e, t) {
      e === void 0 && (e = 6), t === void 0 && (t = 30);
      var i = this.toHsl(),
        r = 360 / t,
        n = [this];
      for (i.h = (i.h - (r * e >> 1) + 720) % 360; --e;) i.h = (i.h + r) % 360, n.push(new o(i));
      return n;
    }, o.prototype.complement = function () {
      var e = this.toHsl();
      return e.h = (e.h + 180) % 360, new o(e);
    }, o.prototype.monochromatic = function (e) {
      e === void 0 && (e = 6);
      for (var t = this.toHsv(), i = t.h, r = t.s, n = t.v, s = [], a = 1 / e; e--;) s.push(new o({
        h: i,
        s: r,
        v: n
      })), n = (n + a) % 1;
      return s;
    }, o.prototype.splitcomplement = function () {
      var e = this.toHsl(),
        t = e.h;
      return [this, new o({
        h: (t + 72) % 360,
        s: e.s,
        l: e.l
      }), new o({
        h: (t + 216) % 360,
        s: e.s,
        l: e.l
      })];
    }, o.prototype.onBackground = function (e) {
      var t = this.toRgb(),
        i = new o(e).toRgb();
      return new o({
        r: i.r + (t.r - i.r) * t.a,
        g: i.g + (t.g - i.g) * t.a,
        b: i.b + (t.b - i.b) * t.a
      });
    }, o.prototype.triad = function () {
      return this.polyad(3);
    }, o.prototype.tetrad = function () {
      return this.polyad(4);
    }, o.prototype.polyad = function (e) {
      for (var t = this.toHsl(), i = t.h, r = [this], n = 360 / e, s = 1; s < e; s++) r.push(new o({
        h: (i + s * n) % 360,
        s: t.s,
        l: t.l
      }));
      return r;
    }, o.prototype.equals = function (e) {
      return this.toRgbString() === new o(e).toRgbString();
    }, o;
  }();
  var $ = () => Math.random().toString(16).slice(2),
    P = o => Math.round((o + Number.EPSILON) * 100) / 100;
  var H = .01,
    q = o => (o < 0 && (o = 0), o > 360 && (o = 360), `hsl(${Math.round(o)}, 100%, 50%)`),
    z = o => {
      let e = o.toRgb();
      return `linear-gradient(to right, rgba(${e.r},${e.g},${e.b}, 0) 0%, rgba(${e.r},${e.g},${e.b}, 1) 100%)`;
    },
    S = o => {
      let e = o.toRgb();
      return `rgba(${e.r}, ${e.g}, ${e.b}, ${P(e.a)})`;
    },
    pt = o => {
      let e = o.toHsl();
      return `hsla(${Math.round(e.h)}, ${Math.round(e.s * 100)}%, ${Math.round(e.l * 100)}%, ${P(e.a)})`;
    },
    gt = o => {
      let e = o.toHsv();
      return `hsva(${Math.round(e.h)}, ${Math.round(e.s * 100)}%, ${Math.round(e.v * 100)}%, ${P(e.a)})`;
    },
    W = o => (o < 0 && (o = 0), o > 1 && (o = 1), `${(-(o * 100) + 100).toFixed(2)}%`),
    X = o => (o < 0 && (o = 0), o > 1 && (o = 1), `${(o * 100).toFixed(2)}%`),
    T = o => {
      o < 0 && (o = 0), o > 360 && (o = 360);
      let e = o * 100 / 360,
        t = Math.round(e * 100) / 100;
      return t < 0 && (t = 0), t > 100 && (t = 100), t;
    },
    B = o => 360 * o / 100,
    I = o => {
      let e = Number(o) || 0;
      return e = Math.round(e), e = Math.max(0, e), e = Math.min(255, e), e;
    },
    ft = o => {
      let e = Number(o) || 100;
      return e = Math.round(e), e = Math.max(0, e), e = Math.min(100, e), e;
    },
    c = o => {
      let e = new l(o || "#000");
      return e.setAlpha(e.getAlpha()), e;
    };
  var j = class extends HTMLElement {
      constructor() {
        super();
        h(this, "cid");
        h(this, "$saturation");
        h(this, "$color");
        h(this, "$pointer");
        h(this, "hue", 0);
        h(this, "saturation", 0);
        h(this, "value", 0);
        this.attachShadow({
          mode: "open"
        }), this.onMouseDown = this.onMouseDown.bind(this), this.onMouseUp = this.onMouseUp.bind(this), this.onChange = this.onChange.bind(this), this.onPointerKeyDown = this.onPointerKeyDown.bind(this), this.hsvChanged = this.hsvChanged.bind(this), this.hueChanged = this.hueChanged.bind(this);
      }
      static get observedAttributes() {
        return ["color"];
      }
      render(t = !0) {
        this.$pointer && (this.$pointer.style.left = X(this.saturation), this.$pointer.style.top = W(this.value)), this.$color && this.$color.setAttribute("style", `background: ${q(this.hue)}`), t && b(this.cid, this.hue, this.saturation, this.value);
      }
      onChange(t) {
        if (!this.$saturation) return;
        let {
          width: i,
          height: r,
          left: n,
          top: s
        } = this.$saturation.getBoundingClientRect();
        if (i === 0 || r === 0) return;
        let a = typeof t.clientX == "number" ? t.clientX : t.touches[0].clientX,
          d = typeof t.clientY == "number" ? t.clientY : t.touches[0].clientY,
          w = Math.min(Math.max(0, a - n), i),
          x = Math.min(Math.max(0, d - s), r);
        this.saturation = w / i, this.value = 1 - x / r, this.render();
      }
      onPointerKeyDown(t) {
        switch (t.key) {
          case "ArrowLeft":
            {
              this.saturation = Math.max(0, this.saturation - H), this.render();
              break;
            }
          case "ArrowRight":
            {
              this.saturation = Math.min(1, this.saturation + H), this.render();
              break;
            }
          case "ArrowUp":
            {
              this.value = Math.min(1, this.value + H), this.render();
              break;
            }
          case "ArrowDown":
            {
              t.preventDefault(), this.value = Math.max(0, this.value - H), this.render();
              break;
            }
        }
      }
      onMouseDown(t) {
        t.preventDefault && t.preventDefault(), this.onChange(t), window.addEventListener("mousemove", this.onChange), window.addEventListener("mouseup", this.onMouseUp), window.setTimeout(() => {
          var i;
          (i = this.$pointer) == null || i.focus();
        }, 0);
      }
      onMouseUp() {
        window.removeEventListener("mousemove", this.onChange), window.removeEventListener("mouseup", this.onChange);
      }
      hsvChanged(t) {
        if (!t || !t.detail || !t.detail.cid || t.detail.cid !== this.cid) return;
        let i = !1;
        this.hue !== t.detail.h && (this.hue = t.detail.h, i = !0), this.saturation !== t.detail.s && (this.saturation = t.detail.s, i = !0), this.value !== t.detail.v && (this.value = t.detail.v, i = !0), i && this.render(!1);
      }
      hueChanged(t) {
        !t || !t.detail || !t.detail.cid || t.detail.cid === this.cid && (this.hue = t.detail.h, this.render());
      }
      connectedCallback() {
        var s, a, d, w, x;
        if (!this.shadowRoot) return;
        this.cid = this.getAttribute("cid") || "";
        let i = c(this.getAttribute("color")).toHsv();
        this.hue = i.h, this.saturation = i.s, this.value = i.v;
        let r = W(this.value),
          n = X(this.saturation);
        this.shadowRoot.innerHTML = `
           <style>${rt}</style>
           <div class="saturation">
                <div class="box" style="background: ${q(this.hue)}">
                    <div class="white box">
                        <div class="black box"></div>
                        
                        <div class="pointer" tabindex="0" style="top: ${r}; left: ${n};">
                            <div class="handler"></div>
                        </div>
                    </div>
                </div>
           </div>
        `, this.$saturation = this.shadowRoot.querySelector(".saturation"), this.$color = this.shadowRoot.querySelector(".box"), this.$pointer = this.shadowRoot.querySelector(".pointer"), (s = this.$pointer) == null || s.addEventListener("keydown", this.onPointerKeyDown), (a = this.$saturation) == null || a.addEventListener("mousedown", this.onMouseDown), (d = this.$saturation) == null || d.addEventListener("mouseup", this.onMouseUp), (w = this.$saturation) == null || w.addEventListener("touchmove", this.onChange), (x = this.$saturation) == null || x.addEventListener("touchstart", this.onChange), document.addEventListener(p, this.hsvChanged), document.addEventListener(f, this.hueChanged);
      }
      disconnectedCallback() {
        var t, i, r, n, s;
        (t = this.$saturation) == null || t.removeEventListener("mousedown", this.onMouseDown), (i = this.$saturation) == null || i.removeEventListener("mouseup", this.onMouseUp), (r = this.$saturation) == null || r.removeEventListener("touchmove", this.onChange), (n = this.$saturation) == null || n.removeEventListener("touchstart", this.onChange), (s = this.$pointer) == null || s.removeEventListener("keydown", this.onPointerKeyDown), document.removeEventListener(p, this.hsvChanged), document.removeEventListener(f, this.hueChanged);
      }
      attributeChangedCallback(t, i, r) {
        let s = c(r).toHsv();
        this.hue = s.h, this.saturation = s.s, this.value = s.v, this.render(!1);
      }
    },
    bt = j;
  var vt = ".hue{overflow:hidden;height:.625rem;margin-bottom:.25rem;margin-top:.25rem;position:relative}.box{width:100%;height:100%;position:absolute}.hue-v{background:linear-gradient(0,red 0,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red)}.hue-h{background:linear-gradient(90deg,red 0,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red);width:100%;height:100%;position:relative}.pointer-box{left:87%;position:absolute;outline:0}.handler{background:#fff;box-shadow:0 0 2px rgb(0 0 0 / 60%);box-sizing:border-box;border:1px solid hsla(0,0%,88%,.5);height:8px;margin-top:1px;-webkit-transform:translateX(-4px);transform:translateX(-4px);width:8px;cursor:pointer;outline:0}.pointer-box:focus .handler{border:2px solid hsla(0,0%,88%,1)}";
  var Y = class extends HTMLElement {
      constructor() {
        super();
        h(this, "cid");
        h(this, "$hue");
        h(this, "$pointer");
        h(this, "hue", 0);
        this.attachShadow({
          mode: "open"
        }), this.onMouseDown = this.onMouseDown.bind(this), this.onMouseUp = this.onMouseUp.bind(this), this.onChange = this.onChange.bind(this), this.onKeyDown = this.onKeyDown.bind(this), this.hsvChanged = this.hsvChanged.bind(this);
      }
      static get observedAttributes() {
        return ["color"];
      }
      render() {
        this.$pointer && (this.$pointer.style.left = `${T(this.hue)}%`), st(this.cid, this.hue);
      }
      hsvChanged(t) {
        !t || !t.detail || !t.detail.cid || t.detail.cid === this.cid && this.hue !== t.detail.h && (this.hue = t.detail.h, this.render());
      }
      onChange(t) {
        if (!this.$hue) return;
        t.preventDefault && t.preventDefault();
        let {
          width: i,
          left: r
        } = this.$hue.getBoundingClientRect();
        if (i === 0) return;
        let n = typeof t.clientX == "number" ? t.clientX : t.touches[0].clientX,
          s = Math.min(Math.max(0, n - r), i),
          a = Math.min(Math.max(0, Math.round(s * 100 / i)), 100);
        this.hue = B(a), this.render();
      }
      onKeyDown(t) {
        var i;
        switch ((i = this.$pointer) == null || i.focus(), t.key) {
          case "ArrowLeft":
            {
              let r = T(this.hue);
              r = Math.max(0, r - 1), this.hue = B(r), this.render();
              break;
            }
          case "ArrowRight":
            {
              let r = T(this.hue);
              r = Math.min(100, r + 1), this.hue = B(r), this.render();
              break;
            }
        }
      }
      onMouseDown(t) {
        t.preventDefault && t.preventDefault(), this.onChange(t), window.addEventListener("mousemove", this.onChange), window.addEventListener("mouseup", this.onMouseUp), window.setTimeout(() => {
          var i;
          (i = this.$pointer) == null || i.focus();
        }, 0);
      }
      onMouseUp() {
        window.removeEventListener("mousemove", this.onChange), window.removeEventListener("mouseup", this.onChange);
      }
      connectedCallback() {
        var i, r, n, s, a;
        if (!this.shadowRoot) return;
        this.cid = this.getAttribute("cid") || "";
        let t = c(this.getAttribute("color"));
        this.hue = t.toHsv().h, this.shadowRoot.innerHTML = `
           <style>${vt}</style>
           <div class="hue">
                <div class="box">
                    <div class="hue-v box">
                        <div class="hue-h"></div>
                    </div>
                    
                    <div class="pointer box">
                        <div class="pointer-box" tabindex="0" style="left: ${T(this.hue)}%">
                            <div class="handler"></div>
                        </div>
                    </div>
                </div>
           </div>
        `, this.$hue = this.shadowRoot.querySelector(".hue"), this.$pointer = this.shadowRoot.querySelector(".pointer-box"), (i = this.$hue) == null || i.addEventListener("mousedown", this.onMouseDown), (r = this.$hue) == null || r.addEventListener("mouseup", this.onMouseUp), (n = this.$hue) == null || n.addEventListener("touchmove", this.onChange), (s = this.$hue) == null || s.addEventListener("touchstart", this.onChange), (a = this.$pointer) == null || a.addEventListener("keydown", this.onKeyDown), document.addEventListener(p, this.hsvChanged);
      }
      disconnectedCallback() {
        var t, i, r, n, s;
        (t = this.$hue) == null || t.removeEventListener("mousedown", this.onMouseDown), (i = this.$hue) == null || i.removeEventListener("mouseup", this.onMouseUp), (r = this.$hue) == null || r.removeEventListener("touchmove", this.onChange), (n = this.$hue) == null || n.removeEventListener("touchstart", this.onChange), (s = this.$pointer) == null || s.removeEventListener("keydown", this.onKeyDown), document.removeEventListener(p, this.hsvChanged);
      }
      attributeChangedCallback(t, i, r) {
        let s = c(r).toHsv();
        this.hue = s.h, this.render();
      }
    },
    mt = Y;
  var wt = ".alpha{overflow:hidden;height:.625rem;position:relative;background:#fff}.box{width:100%;height:100%;position:absolute}.transparent-bg{background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAADFJREFUOE9jZGBgEGHAD97gk2YcNYBhmIQBgWSAP52AwoAQwJvQRg1gACckQoC2gQgAIF8IscwEtKYAAAAASUVORK5CYII=);overflow:hidden}.pointer-box{left:100%;position:absolute;outline:0}.handler{background:#fff;box-shadow:0 0 2px rgb(0 0 0 / 60%);box-sizing:border-box;border:1px solid hsla(0,0%,88%,.5);height:8px;margin-top:1px;-webkit-transform:translateX(-4px);transform:translateX(-4px);width:8px;cursor:pointer;outline:0}.alpha-pointer-box:focus .alpha-pointer-handler{border:2px solid hsla(0,0%,88%,1)}";
  var Q = class extends HTMLElement {
      constructor() {
        super();
        h(this, "cid");
        h(this, "$alpha");
        h(this, "$color");
        h(this, "$pointer");
        h(this, "alpha", 1);
        h(this, "hue", 0);
        h(this, "saturation", 0);
        h(this, "value", 0);
        this.attachShadow({
          mode: "open"
        }), this.onMouseDown = this.onMouseDown.bind(this), this.onMouseUp = this.onMouseUp.bind(this), this.onChange = this.onChange.bind(this), this.onKeyDown = this.onKeyDown.bind(this), this.hsvChanged = this.hsvChanged.bind(this), this.hueChanged = this.hueChanged.bind(this), this.alphaChanged = this.alphaChanged.bind(this);
      }
      static get observedAttributes() {
        return ["color"];
      }
      render(t = !0) {
        if (this.$pointer && (this.$pointer.style.left = `${this.alpha * 100}%`), this.$color) {
          let i = new l({
            h: this.hue,
            s: this.saturation,
            v: this.value,
            a: this.alpha
          });
          this.$color.style.background = z(i);
        }
        t && M(this.cid, this.alpha);
      }
      onChange(t) {
        if (!this.$alpha) return;
        t.preventDefault && t.preventDefault();
        let {
          width: i,
          left: r
        } = this.$alpha.getBoundingClientRect();
        if (i === 0) return;
        let n = typeof t.clientX == "number" ? t.clientX : t.touches[0].clientX,
          s = Math.min(Math.max(0, n - r), i),
          a = Math.min(Math.max(0, s * 100 / i), 100);
        this.alpha = a / 100, this.render();
      }
      onKeyDown(t) {
        var i;
        switch ((i = this.$pointer) == null || i.focus(), t.key) {
          case "ArrowLeft":
            {
              let r = this.alpha * 100;
              r = Math.max(0, r - 1), this.alpha = r / 100, this.render();
              break;
            }
          case "ArrowRight":
            {
              let r = this.alpha * 100;
              r = Math.min(100, r + 1), this.alpha = r / 100, this.render();
              break;
            }
        }
      }
      hsvChanged(t) {
        !t || !t.detail || !t.detail.cid || t.detail.cid === this.cid && (this.saturation = t.detail.h, this.hue = t.detail.s, this.value = t.detail.v, this.render(!1));
      }
      hueChanged(t) {
        !t || !t.detail || !t.detail.cid || t.detail.cid === this.cid && (this.hue = t.detail.h, this.render(!1));
      }
      alphaChanged(t) {
        !t || !t.detail || !t.detail.cid || t.detail.cid === this.cid && this.alpha !== t.detail.a && (this.alpha = t.detail.a, this.render());
      }
      onMouseDown(t) {
        t.preventDefault && t.preventDefault(), this.onChange(t), window.addEventListener("mousemove", this.onChange), window.addEventListener("mouseup", this.onMouseUp), window.setTimeout(() => {
          var i;
          (i = this.$pointer) == null || i.focus();
        }, 0);
      }
      onMouseUp() {
        window.removeEventListener("mousemove", this.onChange), window.removeEventListener("mouseup", this.onChange);
      }
      connectedCallback() {
        var r, n, s, a, d;
        if (!this.shadowRoot) return;
        this.cid = this.getAttribute("cid") || "";
        let t = c(this.getAttribute("color")),
          i = t.toHsv();
        this.alpha = i.a, this.hue = i.h, this.saturation = i.s, this.value = i.v, this.shadowRoot.innerHTML = `
           <style>${wt}</style>
           <div class="alpha">
                <div class="box">
                    <div class="transparent-bg box"></div>
                    <div class="color-bg box" style="background: ${z(t)}"></div>
                    
                    <div class="pointer box">
                        <div class="pointer-box" tabindex="0" style="left: ${this.alpha * 100}%;" >
                            <div class="handler"></div>
                        </div>
                    </div>
                </div>
           </div>
        `, this.$alpha = this.shadowRoot.querySelector(".alpha"), this.$color = this.shadowRoot.querySelector(".color-bg"), this.$pointer = this.shadowRoot.querySelector(".pointer-box"), (r = this.$alpha) == null || r.addEventListener("mousedown", this.onMouseDown), (n = this.$alpha) == null || n.addEventListener("mouseup", this.onMouseUp), (s = this.$alpha) == null || s.addEventListener("touchmove", this.onChange), (a = this.$alpha) == null || a.addEventListener("touchstart", this.onChange), (d = this.$pointer) == null || d.addEventListener("keydown", this.onKeyDown), document.addEventListener(p, this.hsvChanged), document.addEventListener(f, this.hueChanged), document.addEventListener(m, this.alphaChanged);
      }
      disconnectedCallback() {
        var t, i, r, n, s;
        (t = this.$alpha) == null || t.removeEventListener("mousedown", this.onMouseDown), (i = this.$alpha) == null || i.removeEventListener("mouseup", this.onMouseUp), (r = this.$alpha) == null || r.removeEventListener("touchmove", this.onChange), (n = this.$alpha) == null || n.removeEventListener("touchstart", this.onChange), (s = this.$pointer) == null || s.removeEventListener("keydown", this.onKeyDown), document.removeEventListener(p, this.hsvChanged), document.removeEventListener(f, this.hueChanged), document.removeEventListener(m, this.alphaChanged);
      }
      attributeChangedCallback(t, i, r) {
        let s = c(r).toHsv();
        this.alpha = s.a, this.hue = s.h, this.saturation = s.s, this.value = s.v, this.render();
      }
    },
    xt = Q;
  var Et = ":root{--tool-cool-color-picker-field-border-color:#cecece;--tool-cool-color-picker-field-label-color:#000}.fields{font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Noto Sans,Liberation Sans,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-size:11px;grid-template-columns:60px 35px 35px 35px 34px;text-align:center;display:grid;gap:.25rem;margin-top:.25rem;color:var(--tool-cool-color-picker-field-label-color,#000)}.fields input{background:#fff;border-width:1px;border-style:solid;border-color:var(--tool-cool-color-picker-field-border-color,#cecece);padding:1px 3px;border-radius:2px;color:#000;font-family:inherit;font-size:100%;line-height:inherit;margin:0;box-sizing:border-box}";
  var J = class extends HTMLElement {
      constructor() {
        super();
        h(this, "cid");
        h(this, "color", new l("#000"));
        h(this, "$hex");
        h(this, "$r");
        h(this, "$g");
        h(this, "$b");
        h(this, "$a");
        h(this, "hex", "");
        h(this, "r", 0);
        h(this, "g", 0);
        h(this, "b", 0);
        h(this, "a", 1);
        this.attachShadow({
          mode: "open"
        }), this.hsvChanged = this.hsvChanged.bind(this), this.hueChanged = this.hueChanged.bind(this), this.alphaChanged = this.alphaChanged.bind(this), this.onHexChange = this.onHexChange.bind(this), this.render = this.render.bind(this), this.onRedChange = this.onRedChange.bind(this), this.onGreenChange = this.onGreenChange.bind(this), this.onBlueChange = this.onBlueChange.bind(this), this.onAlphaChange = this.onAlphaChange.bind(this), this.onRedKeyDown = this.onRedKeyDown.bind(this), this.onBlueKeyDown = this.onBlueKeyDown.bind(this), this.onGreenKeyDown = this.onGreenKeyDown.bind(this), this.onAlphaKeyDown = this.onAlphaKeyDown.bind(this);
      }
      static get observedAttributes() {
        return ["color"];
      }
      hueChanged(t) {
        if (!t || !t.detail || !t.detail.cid || t.detail.cid !== this.cid) return;
        let i = this.color.toHsv();
        this.color = new l({
          h: Number(t.detail.h),
          s: i.s,
          v: i.v,
          a: i.a
        }), this.render();
      }
      alphaChanged(t) {
        if (!t || !t.detail || !t.detail.cid || t.detail.cid !== this.cid) return;
        let i = this.color.toRgb();
        i.a = t.detail.a, this.color = new l(i), this.render();
      }
      hsvChanged(t) {
        !t || !t.detail || !t.detail.cid || t.detail.cid === this.cid && (this.color = new l({
          h: t.detail.h,
          s: t.detail.s,
          v: t.detail.v,
          a: this.color.toHsv().a
        }), this.render());
      }
      render() {
        var i, r, n, s, a;
        let t = this.color.toRgb();
        this.r = t.r, this.g = t.g, this.b = t.b, this.a = t.a, this.hex = this.color.toHex(), this.$hex && ((i = this.shadowRoot) == null ? void 0 : i.activeElement) !== this.$hex && (this.$hex.value = this.hex.toUpperCase()), this.$r && ((r = this.shadowRoot) == null ? void 0 : r.activeElement) !== this.$r && (this.$r.value = this.r.toString()), this.$g && ((n = this.shadowRoot) == null ? void 0 : n.activeElement) !== this.$g && (this.$g.value = this.g.toString()), this.$b && ((s = this.shadowRoot) == null ? void 0 : s.activeElement) !== this.$b && (this.$b.value = this.b.toString()), this.$a && ((a = this.shadowRoot) == null ? void 0 : a.activeElement) !== this.$a && (this.$a.value = Math.round(this.a * 100).toString());
      }
      onFieldKeyDown(t, i) {
        var n, s;
        let r = this.color.toRgb();
        switch (t.key) {
          case "ArrowUp":
            {
              if (i === "r") {
                this.r = Math.min(255, r.r + 1), r.r = this.r;
                let a = new l(r).toHsv();
                b(this.cid, a.h, a.s, a.v), this.$r.value = this.r.toString(), this.render();
              }
              if (i === "g") {
                this.g = Math.min(255, r.g + 1), r.g = this.g;
                let a = new l(r).toHsv();
                b(this.cid, a.h, a.s, a.v), this.$g.value = this.g.toString(), this.render();
              }
              if (i === "b") {
                this.b = Math.min(255, r.b + 1), r.b = this.b;
                let a = new l(r).toHsv();
                b(this.cid, a.h, a.s, a.v), this.$b.value = this.b.toString(), this.render();
              }
              if (i === "a") {
                this.a = Math.max(0, Math.min(this.a + .01, 1)), this.$a.value = Math.round(this.a * 100).toString();
                let a = this.color.toRgb();
                a.a = this.a, this.color = new l(a), this.render(), M(this.cid, this.a);
              }
              break;
            }
          case "ArrowDown":
            {
              if (i === "r") {
                this.r = Math.max(0, r.r - 1), r.r = this.r;
                let a = new l(r).toHsv();
                b(this.cid, a.h, a.s, a.v), this.$r.value = this.r.toString(), this.render();
              }
              if (i === "g") {
                this.g = Math.max(0, r.g - 1), r.g = this.g;
                let a = new l(r).toHsv();
                b(this.cid, a.h, a.s, a.v), this.$g.value = this.g.toString(), this.render();
              }
              if (i === "b") {
                this.b = Math.max(0, r.b - 1), r.b = this.b;
                let a = new l(r).toHsv();
                b(this.cid, a.h, a.s, a.v), this.$b.value = this.b.toString(), this.render();
              }
              if (i === "a") {
                this.a = Math.max(0, this.a - .01), this.$a.value = Math.round(this.a * 100).toString();
                let a = this.color.toRgb();
                a.a = this.a, this.color = new l(a), this.render(), M(this.cid, this.a);
              }
              break;
            }
          case "Escape":
            {
              (n = this.shadowRoot) != null && n.activeElement && this.shadowRoot.activeElement.blur(), this.render();
              break;
            }
          case "Enter":
            {
              (s = this.shadowRoot) != null && s.activeElement && this.shadowRoot.activeElement.blur(), this.render();
              break;
            }
        }
      }
      onRedKeyDown(t) {
        this.onFieldKeyDown(t, "r");
      }
      onGreenKeyDown(t) {
        this.onFieldKeyDown(t, "g");
      }
      onBlueKeyDown(t) {
        this.onFieldKeyDown(t, "b");
      }
      onAlphaKeyDown(t) {
        this.onFieldKeyDown(t, "a");
      }
      onHexChange(t) {
        let i = t.target;
        if (i.value.length !== 6) return;
        let r = new l(`#${i.value}`);
        if (r.isValid) {
          this.color = r;
          let n = this.color.toHsv();
          b(this.cid, n.h, n.s, n.v);
        }
      }
      onRedChange(t) {
        let i = t.target,
          r = I(i.value);
        if (r.toString() === i.value) {
          let n = this.color.toRgb();
          n.r = r;
          let s = new l(n).toHsv();
          b(this.cid, s.h, s.s, s.v);
        }
      }
      onGreenChange(t) {
        let i = t.target,
          r = I(i.value);
        if (r.toString() === i.value) {
          let n = this.color.toRgb();
          n.g = r;
          let s = new l(n).toHsv();
          b(this.cid, s.h, s.s, s.v);
        }
      }
      onBlueChange(t) {
        let i = t.target,
          r = I(i.value);
        if (r.toString() === i.value) {
          let n = this.color.toRgb();
          n.b = r;
          let s = new l(n).toHsv();
          b(this.cid, s.h, s.s, s.v);
        }
      }
      onAlphaChange(t) {
        let i = t.target,
          r = ft(i.value);
        r.toString() === i.value && M(this.cid, r / 100);
      }
      connectedCallback() {
        if (!this.shadowRoot) return;
        this.cid = this.getAttribute("cid") || "", this.color = c(this.getAttribute("color"));
        let t = this.color.toRgb();
        this.r = t.r, this.g = t.g, this.b = t.b, this.a = t.a, this.hex = this.color.toHex();
        let i = $(),
          r = $(),
          n = $(),
          s = $(),
          a = $();
        this.shadowRoot.innerHTML = `
           <style>${Et}</style>
           <div class="fields">
               <input id="hex-${i}" type="text" value="${this.hex.toUpperCase()}" data-type="hex" />
               <input id="r-${r}" type="text" value="${this.r}" data-type="r" />
               <input id="g-${n}" type="text" value="${this.g}" data-type="g" />
               <input id="b-${s}" type="text" value="${this.b}" data-type="b" />
               <input id="a-${a}" type="text" value="${Math.round(this.a * 100)}" data-type="a" />
               
               <label for="hex-${i}">Hex</label>
               <label for="r-${r}">R</label>
               <label for="g-${n}">G</label>
               <label for="b-${s}">B</label>
               <label for="a-${a}">A</label>
           </div>
        `, this.$hex = this.shadowRoot.getElementById(`hex-${i}`), this.$r = this.shadowRoot.getElementById(`r-${r}`), this.$g = this.shadowRoot.getElementById(`g-${n}`), this.$b = this.shadowRoot.getElementById(`b-${s}`), this.$a = this.shadowRoot.getElementById(`a-${a}`), document.addEventListener(p, this.hsvChanged), document.addEventListener(f, this.hueChanged), document.addEventListener(m, this.alphaChanged), this.$hex.addEventListener("input", this.onHexChange), this.$r.addEventListener("input", this.onRedChange), this.$g.addEventListener("input", this.onGreenChange), this.$b.addEventListener("input", this.onBlueChange), this.$a.addEventListener("input", this.onAlphaChange), this.$hex.addEventListener("blur", this.render), this.$r.addEventListener("blur", this.render), this.$g.addEventListener("blur", this.render), this.$b.addEventListener("blur", this.render), this.$a.addEventListener("blur", this.render), this.$r.addEventListener("keydown", this.onRedKeyDown), this.$g.addEventListener("keydown", this.onGreenKeyDown), this.$b.addEventListener("keydown", this.onBlueKeyDown), this.$a.addEventListener("keydown", this.onAlphaKeyDown);
      }
      disconnectedCallback() {
        document.removeEventListener(p, this.hsvChanged), document.removeEventListener(f, this.hueChanged), document.removeEventListener(m, this.alphaChanged), this.$hex.removeEventListener("input", this.onHexChange), this.$r.removeEventListener("input", this.onRedChange), this.$g.removeEventListener("input", this.onGreenChange), this.$b.removeEventListener("input", this.onBlueChange), this.$a.removeEventListener("input", this.onAlphaChange), this.$hex.removeEventListener("blur", this.render), this.$r.removeEventListener("blur", this.render), this.$g.removeEventListener("blur", this.render), this.$b.removeEventListener("blur", this.render), this.$a.removeEventListener("blur", this.render), this.$r.removeEventListener("keydown", this.onRedKeyDown), this.$g.removeEventListener("keydown", this.onGreenKeyDown), this.$b.removeEventListener("keydown", this.onBlueKeyDown), this.$a.removeEventListener("keydown", this.onAlphaKeyDown);
      }
      attributeChangedCallback(t, i, r) {
        this.color = c(r), this.render();
      }
    },
    Ct = J;
  var Z = class extends HTMLElement {
      constructor() {
        super();
        h(this, "cid");
        h(this, "popupPosition", "left");
        h(this, "$popup");
        h(this, "color", "#000");
        customElements.get("toolcool-color-picker-saturation") || customElements.define("toolcool-color-picker-saturation", bt), customElements.get("toolcool-color-picker-hue") || customElements.define("toolcool-color-picker-hue", mt), customElements.get("toolcool-color-picker-alpha") || customElements.define("toolcool-color-picker-alpha", xt), customElements.get("toolcool-color-picker-fields") || customElements.define("toolcool-color-picker-fields", Ct), this.cid = this.getAttribute("cid") || "", this.prevent = this.prevent.bind(this), this.attachShadow({
          mode: "open"
        });
      }
      static get observedAttributes() {
        return ["color", "popup-position"];
      }
      prevent(t) {
        t.stopPropagation();
      }
      connectedCallback() {
        var t, i;
        !this.shadowRoot || (this.color = this.getAttribute("color") || "#000", this.popupPosition = this.getAttribute("popup-position") || "left", this.shadowRoot.innerHTML = `
           <style>${it}</style>
           <div class="popup">
                <toolcool-color-picker-saturation color="${this.color}" cid="${this.cid}"></toolcool-color-picker-saturation>
                <toolcool-color-picker-hue color="${this.color}" cid="${this.cid}"></toolcool-color-picker-hue>
                <toolcool-color-picker-alpha color="${this.color}" cid="${this.cid}"></toolcool-color-picker-alpha>
                <toolcool-color-picker-fields color="${this.color}" cid="${this.cid}"></toolcool-color-picker-fields>
           </div>
        `, this.$popup = this.shadowRoot.querySelector(".popup"), (t = this.$popup) == null || t.addEventListener("mousedown", this.prevent), (i = this.$popup) == null || i.classList.toggle("right", this.popupPosition === "right"));
      }
      disconnectedCallback() {
        var t;
        (t = this.$popup) == null || t.removeEventListener("mousedown", this.prevent);
      }
      attributeChangedCallback(t, i, r) {
        var n, s, a, d;
        if (t === "popup-position" && (this.popupPosition = r, this.$popup && this.$popup.classList.toggle("right", this.popupPosition === "right")), t === "color") {
          this.color = r;
          let w = (n = this.shadowRoot) == null ? void 0 : n.querySelector("toolcool-color-picker-saturation"),
            x = (s = this.shadowRoot) == null ? void 0 : s.querySelector("toolcool-color-picker-hue"),
            R = (a = this.shadowRoot) == null ? void 0 : a.querySelector("toolcool-color-picker-alpha"),
            et = (d = this.shadowRoot) == null ? void 0 : d.querySelector("toolcool-color-picker-fields");
          w && w.setAttribute("color", this.color), x && x.setAttribute("color", this.color), R && R.setAttribute("color", this.color), et && et.setAttribute("color", this.color);
        }
      }
    },
    yt = Z;
  var Ut = {
      sm: "0.875rem",
      md: "1.2rem",
      lg: "1.5rem",
      xl: "2.25rem",
      "2xl": "3rem",
      "3xl": "3.75rem",
      "4xl": "4.5rem"
    },
    tt = class extends HTMLElement {
      constructor() {
        super();
        h(this, "cid");
        h(this, "$button");
        h(this, "$buttonColor");
        h(this, "$popupBox");
        h(this, "stateDefaults", {
          isPopupVisible: !1,
          popupPosition: "left",
          initialColor: new l("#000"),
          color: new l("#000"),
          buttonWidth: null,
          buttonHeight: null,
          buttonPadding: null
        });
        h(this, "state");
        this.cid = $(), customElements.get("toolcool-color-picker-popup") || customElements.define("toolcool-color-picker-popup", yt), this.attachShadow({
          mode: "open"
        }), this.toggle = this.toggle.bind(this), this.onKeyDown = this.onKeyDown.bind(this), this.clickedOutside = this.clickedOutside.bind(this), this.stopPropagation = this.stopPropagation.bind(this), this.hsvChanged = this.hsvChanged.bind(this), this.hueChanged = this.hueChanged.bind(this), this.alphaChanged = this.alphaChanged.bind(this), this.buttonClicked = this.buttonClicked.bind(this), this.formatButtonSize = this.formatButtonSize.bind(this), this.initState();
      }
      static get observedAttributes() {
        return ["color", "popup-position", "button-width", "button-height", "button-padding"];
      }
      set color(t) {
        this.state.color = new l(t);
      }
      get color() {
        return this.state.color;
      }
      get hex() {
        return this.state.color.toHexString().toUpperCase();
      }
      get hex8() {
        return this.state.color.toHex8String().toUpperCase();
      }
      get rgb() {
        return this.state.color.toRgbString();
      }
      get rgba() {
        return S(this.state.color);
      }
      get hsl() {
        return this.state.color.toHslString();
      }
      get hsla() {
        return pt(this.state.color);
      }
      get hsv() {
        return this.state.color.toHsvString();
      }
      get hsva() {
        return gt(this.state.color);
      }
      get opened() {
        return this.state.isPopupVisible;
      }
      set opened(t) {
        this.state.isPopupVisible = t;
      }
      initState() {
        let t = this;
        this.state = new Proxy(t.stateDefaults, {
          set(i, r, n, s) {
            return i[r] = n, r === "isPopupVisible" && t.onPopupVisibilityChange(), r === "popupPosition" && t.onPopupPosChange(), r === "initialColor" && t.onInitialColorChange(), r === "color" && t.onColorChange(), (r === "buttonWidth" || r === "buttonHeight" || r === "buttonPadding") && t.setButtonSize(), !0;
          }
        });
      }
      onPopupVisibilityChange() {
        !this.$popupBox || (this.$popupBox.innerHTML = this.state.isPopupVisible ? `<toolcool-color-picker-popup color="${this.state.color.toRgbString()}" cid="${this.cid}" popup-position="${this.state.popupPosition}" />` : "");
      }
      onPopupPosChange() {
        if (!this.$popupBox) return;
        let t = this.$popupBox.querySelector("toolcool-color-picker-popup");
        !t || t.setAttribute("popup-position", this.state.popupPosition);
      }
      onInitialColorChange() {
        var r;
        let t = S(this.state.color);
        this.$buttonColor && (this.$buttonColor.style.backgroundColor = t);
        let i = (r = this.shadowRoot) == null ? void 0 : r.querySelector("toolcool-color-picker-popup");
        i && i.setAttribute("color", t);
      }
      setButtonSize() {
        !this.$button || (this.state.buttonWidth && (this.$button.style.width = this.formatButtonSize(this.state.buttonWidth)), this.state.buttonHeight && (this.$button.style.height = this.formatButtonSize(this.state.buttonHeight)), this.state.buttonPadding && (this.$button.style.padding = this.state.buttonPadding));
      }
      onColorChange() {
        this.$buttonColor && (this.$buttonColor.style.backgroundColor = S(this.state.color)), this.dispatchEvent(new CustomEvent("change", {
          detail: {
            hex: this.hex,
            hex8: this.hex8,
            rgb: this.rgb,
            rgba: this.rgba,
            hsl: this.hsl,
            hsla: this.hsla,
            hsv: this.hsv,
            hsva: this.hsva,
            color: this.color
          }
        }));
      }
      hsvChanged(t) {
        !t || !t.detail || !t.detail.cid || t.detail.cid === this.cid && (this.state.color = new l({
          h: t.detail.h,
          s: t.detail.s,
          v: t.detail.v,
          a: this.state.color.toHsv().a
        }));
      }
      hueChanged(t) {
        if (!t || !t.detail || !t.detail.cid || t.detail.cid !== this.cid) return;
        let i = this.state.color.toHsv();
        this.state.color = new l({
          h: t.detail.h,
          s: i.s,
          v: i.v,
          a: i.a
        });
      }
      alphaChanged(t) {
        if (!t || !t.detail || !t.detail.cid || t.detail.cid !== this.cid) return;
        let i = this.state.color.toRgb();
        i.a = t.detail.a, this.state.color = new l(i);
      }
      buttonClicked(t) {
        !t || !t.detail || !t.detail.cid || t.detail.cid !== this.cid && (this.state.isPopupVisible = !1);
      }
      clickedOutside() {
        this.state.isPopupVisible = !1;
      }
      toggle() {
        let t = this.state.isPopupVisible;
        window.setTimeout(() => {
          this.state.isPopupVisible = !t, nt(this.cid);
        }, 0);
      }
      onKeyDown(t) {
        t.key === "Escape" && (this.state.isPopupVisible = !1);
      }
      stopPropagation(t) {
        t.stopPropagation();
      }
      formatButtonSize(t) {
        var i;
        return (i = Ut[t]) != null ? i : t;
      }
      connectedCallback() {
        var t, i, r;
        !this.shadowRoot || (this.state.initialColor = c(this.getAttribute("color")), this.state.color = c(this.getAttribute("color")), this.state.popupPosition = this.getAttribute("popup-position") || "left", this.state.buttonWidth = this.getAttribute("button-width"), this.state.buttonHeight = this.getAttribute("button-height"), this.state.buttonPadding = this.getAttribute("button-padding"), this.shadowRoot.innerHTML = `
            <style>
                ${ot} 
            </style>
            <div class="color-picker" >
                <button
                    type="button"
                    tabIndex="0"
                    class="button"
                    title="Select Color">
                    <span class="button-color" style="background: ${S(this.state.color)};"></span>
                </button>
                <div data-popup-box></div>
            </div>
        `, this.$button = this.shadowRoot.querySelector(".button"), this.$buttonColor = this.shadowRoot.querySelector(".button-color"), (t = this.$button) == null || t.addEventListener("click", this.toggle), (i = this.$button) == null || i.addEventListener("keydown", this.onKeyDown), (r = this.$button) == null || r.addEventListener("mousedown", this.stopPropagation), this.$popupBox = this.shadowRoot.querySelector("[data-popup-box]"), this.setButtonSize(), document.addEventListener("mousedown", this.clickedOutside), document.addEventListener(p, this.hsvChanged), document.addEventListener(f, this.hueChanged), document.addEventListener(m, this.alphaChanged), document.addEventListener(D, this.buttonClicked));
      }
      disconnectedCallback() {
        var t, i, r;
        (t = this.$button) == null || t.removeEventListener("click", this.toggle), (i = this.$button) == null || i.removeEventListener("keydown", this.onKeyDown), (r = this.$button) == null || r.removeEventListener("mousedown", this.stopPropagation), document.removeEventListener("mousedown", this.clickedOutside), document.removeEventListener(p, this.hsvChanged), document.removeEventListener(f, this.hueChanged), document.removeEventListener(m, this.alphaChanged), document.removeEventListener(D, this.buttonClicked);
      }
      attributeChangedCallback(t) {
        switch (t) {
          case "color":
            {
              this.state.initialColor = c(this.getAttribute("color")), this.state.color = c(this.getAttribute("color")), this.onInitialColorChange();
              break;
            }
          case "popup-position":
            {
              this.state.popupPosition = this.getAttribute("popup-position") || "left", this.onPopupPosChange();
              break;
            }
          case "button-width":
            {
              this.state.buttonWidth = this.getAttribute("button-width"), this.setButtonSize();
              break;
            }
          case "button-height":
            {
              this.state.buttonHeight = this.getAttribute("button-height"), this.setButtonSize();
              break;
            }
          case "button-padding":
            {
              this.state.buttonPadding = this.getAttribute("button-padding"), this.setButtonSize();
              break;
            }
        }
      }
    },
    $t = tt;
  customElements.get("toolcool-color-picker") || customElements.define("toolcool-color-picker", $t);
})();

var hue = "214";
var fallbackJson = {
	"bs-primary": "#5087E0",
	"bs-link-color": "#5087E0",
	"link-color": "#5087E0",
	"bs-primary-rgb": "80,135,224",
	"bs-link-color-rgb": "80,135,224",
	"link-color-rgb": "80,135,224",
	"bs-link-hover-color": "#144AAB",
	"link-hover-color": "#144AAB",
	"template-link-hover-color": "#144AAB",
	"bs-link-hover-color-rgb": "20, 74, 171",
	"template-link-color": "#5087E0",
	"template-special-color": "#5087E0",
	"link-hover-color-rgb": "20, 74, 171",
	"template-contrast": "#144AAB",
	hue: hue,
	"template-bg-light": "#f0f4fb",
	"template-text-dark": "#495057",
	"template-text-light": "#fff",
	"template-sidebar-bg": "var(--template-bg-dark-80)",
	"template-sidebar-font-color": "#fff",
	"template-sidebar-link-color": "#fff",
	"template-bg-dark": "hsl(var(--hue), 40%, 20%)",
	"template-bg-dark-3": "hsl(var(--hue), 40%, 97%)",
	"template-bg-dark-5": "hsl(var(--hue), 40%, 95%)",
	"template-bg-dark-7": "hsl(var(--hue), 40%, 93%)",
	"template-bg-dark-10": "hsl(var(--hue), 40%, 90%)",
	"template-bg-dark-15": "hsl(var(--hue), 40%, 85%)",
	"template-bg-dark-20": "hsl(var(--hue), 40%, 80%)",
	"template-bg-dark-30": "hsl(var(--hue), 40%, 70%)",
	"template-bg-dark-40": "hsl(var(--hue), 40%, 60%)",
	"template-bg-dark-50": "hsl(var(--hue), 40%, 50%)",
	"template-bg-dark-60": "hsl(var(--hue), 40%, 40%)",
	"template-bg-dark-65": "hsl(var(--hue), 40%, 35%)",
	"template-bg-dark-70": "hsl(var(--hue), 40%, 30%)",
	"template-bg-dark-75": "hsl(var(--hue), 40%, 25%)",
	"template-bg-dark-80": "hsl(var(--hue), 40%, 20%)",
	"template-bg-dark-90": "hsl(var(--hue), 40%, 10%)"
};

var colors = [
	{
		type: "hue",
		cssVariableName: "hue",
		label: "TPL_MUTA_COLORS_HUE"
	},
	{
		type: "picker",
		cssVariableName: "bs-link-color",
		label: "TPL_MUTA_COLORS_SETTINGS_LINK_COLOR_LABEL"
	},
	{
		type: "picker",
		cssVariableName: "bs-link-hover-color",
		label: "TPL_MUTA_COLORS_SETTINGS_LINK_HOVER_COLOR_LABEL"
	},
	{
		type: "calculated",
		cssVariableName: "bs-primary",
		label: ""
	},
	{
		type: "calculated",
		cssVariableName: "bs-primary-rgb",
		label: ""
	},
	{
		type: "calculated",
		cssVariableName: "link-color",
		label: ""
	},
	{
		type: "calculated",
		cssVariableName: "link-color-rgb",
		label: ""
	},
	{
		type: "calculated",
		cssVariableName: "bs-link-color-rgb",
		label: ""
	},
	{
		type: "calculated",
		cssVariableName: "bs-link-hover-color-rgb",
		label: ""
	},
	{
		type: "calculated",
		cssVariableName: "template-bg-light",
		label: ""
	},
	{
		type: "calculated",
		cssVariableName: "template-text-dark",
		label: ""
	},
	{
		type: "calculated",
		cssVariableName: "template-text-light",
		label: ""
	},
	{
		type: "calculated",
		cssVariableName: "template-link-color",
		label: ""
	},
	{
		type: "calculated",
		cssVariableName: "template-link-hover-color",
		label: ""
	},
	{
		type: "calculated",
		cssVariableName: "template-special-color",
		label: ""
	},
	{
		type: "calculated",
		cssVariableName: "template-sidebar-bg",
		label: ""
	},
	{
		type: "calculated",
		cssVariableName: "template-sidebar-font-color",
		label: ""
	},
	{
		type: "calculated",
		cssVariableName: "template-sidebar-link-color",
		label: ""
	},
	{
		type: "calculated",
		cssVariableName: "template-bg-light",
		label: ""
	},
	{
		type: "calculated",
		cssVariableName: "template-text-light",
		label: ""
	},
	{
		type: "calculated",
		cssVariableName: "template-contrast",
		label: ""
	},
	{
		type: "calculated",
		cssVariableName: "template-bg-dark",
		label: ""
	},
	{
		type: "calculated",
		cssVariableName: "template-bg-dark-3",
		label: ""
	},
	{
		type: "calculated",
		cssVariableName: "template-bg-dark-5",
		label: ""
	},
	{
		type: "calculated",
		cssVariableName: "template-bg-dark-7",
		label: ""
	},
	{
		type: "calculated",
		cssVariableName: "template-bg-dark-10",
		label: ""
	},
	{
		type: "calculated",
		cssVariableName: "template-bg-dark-15",
		label: ""
	},
	{
		type: "calculated",
		cssVariableName: "template-bg-dark-20",
		label: ""
	},
	{
		type: "calculated",
		cssVariableName: "template-bg-dark-30",
		label: ""
	},
	{
		type: "calculated",
		cssVariableName: "template-bg-dark-40",
		label: ""
	},
	{
		type: "calculated",
		cssVariableName: "template-bg-dark-50",
		label: ""
	},
	{
		type: "calculated",
		cssVariableName: "template-bg-dark-60",
		label: ""
	},
	{
		type: "calculated",
		cssVariableName: "template-bg-dark-65",
		label: ""
	},
	{
		type: "calculated",
		cssVariableName: "template-bg-dark-70",
		label: ""
	},
	{
		type: "calculated",
		cssVariableName: "template-bg-dark-75",
		label: ""
	},
	{
		type: "calculated",
		cssVariableName: "template-bg-dark-80",
		label: ""
	},
	{
		type: "calculated",
		cssVariableName: "template-bg-dark-90",
		label: ""
	}
];
var blueprint = {
	colors: colors
};

/** Remove the inline help button and shenanigans  */
document.querySelectorAll('.hide-aware-inline-help.d-none').forEach(el => el.classList.remove('hide-aware-inline-help', 'd-none'));
const inlineHelp = document.getElementById('toolbar-inlinehelp');
if (inlineHelp) inlineHelp.remove();
const darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
const forced = () => document.documentElement.hasAttribute('data-forced-theme');
document.querySelectorAll('input[name="jform[params][forcedColorScheme]"]').forEach(el => el.addEventListener('click', () => {
  if (el.checked && el.value === '0') {
    if (!forced()) {
      document.cookie = 'mutaPrefersColorScheme=light;expires=Thu, 01 Jan 1970 00:00:01 GMT';
    } else {
      document.cookie = 'mutaPrefersColorScheme=light;expires=Thu, 01 Jan 1970 00:00:01 GMT';
    }
  }
  if (el.checked && el.value === '1') {
    const oneYearFromNow = new Date();
    oneYearFromNow.setFullYear(oneYearFromNow.getFullYear() + 1);
    if (!forced()) {
      document.cookie = 'mutaPrefersColorScheme=light;expires=Thu, 01 Jan 1970 00:00:01 GMT';
    } else {
      document.cookie = `mutaPrefersColorScheme=${darkModeMediaQuery.matches ? 'dark' : 'light'};expires=${oneYearFromNow.toGMTString()}`;
    }
  }
}));
class DgColor extends s {
  static get properties() {
    return {
      value: {
        type: Object,
        value: {}
      },
      name: {
        type: String,
        value: 'muta-colors'
      },
      initValue: {
        type: Object,
        value: {}
      }
    };
  }
  constructor() {
    super();
    try {
      this.value = JSON.parse(this.getAttribute('value'));
      this.initValue = this.value;
    } catch (e) {
      this.value = fallbackJson;
      this.initValue = fallbackJson;
    }
    if (!this.value.length) this.value = fallbackJson;
    this.applyColors = this.applyColors.bind(this);
  }
  createRenderRoot() {
    return this; // Disable shadow DOM.
  }

  connectedCallback() {
    super.connectedCallback();
    this.fields = blueprint.colors.filter(x => !x.cssVariableName.endsWith('-rgb'));
    this.sliderValue = this.value.hue;
  }
  firstUpdated() {
    this.querySelector('input[type="hidden"]')?.remove();
  }
  reset() {
    this.sliderValue = this.initValue.hue;
    this.requestUpdate();
  }
  renderDetails() {
    return x`
    <details><summary>CSS Variables:</summary>
      ${blueprint.colors.map(field => x`
        <pre>
          <code>--${field.cssVariableName}: ${this.value?.[field.cssVariableName]};</code>
        </pre>
      `)}
    </details>
    <input type="hidden" name="${this.name}" .value='${JSON.stringify(this.value)}'>`;
  }
  render() {
    this.applyColors();
    return x`${this.fields.map(field => {
      if (field.type === 'picker') return this.createColorField(field);
      if (field.type === 'hue') return this.createHueField();
      return '';
    })}
    <button class="btn btn-warning" type="button" @click=${this.reset}>${Joomla.Text._('JRESET')}</button>
    <p></p>${this.renderDetails()}`;
  }
  createHueField() {
    /* eslint-disable max-len */
    return x`<div class="control-group">
    <div class="control-label"><label id="jform_params_hue-lbl" for="jform_params_hue">Choose your hue value for the dark template colour</label></div>

    <div class="controls">
      <label for="slider-input" class="visually-hidden">Selected Colour Value</label>
      <input type="text" class="form-control" id="slider-input" pattern="[0-9]{1,3}" style="border: 2px solid rgb(19, 47, 83);" .value=${this.sliderValue} @input=${e => {
      this.sliderValue = e.target.value;
      this.value.hue = e.target.value;
      this.requestUpdate();
    }}>
      <label for="hue-slider" class="visually-hidden">Hue Slider</label>
      <input type="range" min="0" step="1" max="360" class="form-control color-slider" .value=${this.sliderValue} @input=${e => {
      this.sliderValue = e.target.value;
      this.value.hue = e.target.value;
      this.requestUpdate();
    }} style="background-image: linear-gradient(90deg, rgb(83, 19, 19), rgb(83, 19, 19), rgb(83, 38, 19), rgb(83, 57, 19), rgb(83, 77, 19), rgb(70, 83, 19), rgb(51, 83, 19), rgb(32, 83, 19), rgb(19, 83, 25), rgb(19, 83, 45), rgb(19, 83, 64), rgb(19, 83, 83), rgb(19, 64, 83), rgb(19, 45, 83), rgb(19, 25, 83), rgb(32, 19, 83), rgb(51, 19, 83), rgb(70, 19, 83), rgb(83, 19, 77), rgb(83, 19, 57), rgb(83, 19, 38), rgb(83, 19, 19), rgb(83, 19, 19)); appearance: none;">
      </div>
    </div>
</div>`; /* eslint-enable max-len */
  }

  createColorField(field) {
    return x`<div class="control-group">
    <div class="control-label"><label for=${field.cssVariableName}>${Joomla.Text._(field.label)}</label></div>
    <div class="controls">
      <toolcool-color-picker id=${field.cssVariableName} color=${this.value?.[field.cssVariableName]} @change=${e => {
      this.value[`${field.cssVariableName}-rgb`] = e.detail.rgb.replace('rgb(', '').replace(')', '');
      if (field.cssVariableName === 'bs-link-color') {
        this.value['template-link-color'] = e.detail.rgb;
        this.value['link-color'] = e.detail.rgb;
        this.value['bs-primary'] = e.detail.rgb;
      }
      if (field.cssVariableName === 'bs-link-hover-color') {
        this.value['template-link-hover-color'] = e.detail.rgb;
        this.value['link-hover-color'] = e.detail.rgb;
        this.value['bs-primary-rgb'] = e.detail.rgb;
      }
      this.value[`${field.cssVariableName}`] = e.detail.hex;
      this.value[`${field.cssVariableName}-rgb`] = e.detail.rgb.replace('rgb(', '').replace(')', '');
      this.requestUpdate();
      /* eslint-disable max-len */
    }} button-width="8rem" button-height="3rem" button-padding="2px" style="--tool-cool-color-picker-popup-bg: var(--bs-body-bg); --tool-cool-color-picker-field-label-color: var(--bs-body-color)"></toolcool-color-picker>
    </div>
  </div>`;
    /* eslint-enable max-len */
  }

  applyColors() {
    /* eslint-disable-next-line no-restricted-syntax */
    for (const [key, value] of Object.entries(this.value)) {
      document.documentElement.style.setProperty(`--${key}`, value);
    }
    document.documentElement.style.setProperty('accent-color', this.value?.['bs-link-color']);
  }
}
customElements.define('dg-color-field', DgColor);
