/* COPYRIGHT Esri - https://js.arcgis.com/5.0/LICENSE.txt */
import { c as o } from "../../chunks/runtime.js";
import { css as l, html as c } from "lit";
import { f as g } from "../../chunks/chart-ui-utils2.js";
import { u as h } from "../../chunks/useT9n.js";
import { LitElement as m, createEvent as n } from "@arcgis/lumina";
const u = "arcgis-charts-config-storage-colors", v = l`:host{--calcite-color-border-1: transparent}.color-header{margin-bottom:.5rem}`;
class b extends m {
  constructor() {
    super(...arguments), this._messages = h(), this.arcgisColorSelect = n();
  }
  static {
    this.properties = { messageOverrides: 0, rgba: 0, heading: 1 };
  }
  static {
    this.styles = v;
  }
  onColorSelect(s) {
    const { value: e } = s.target;
    if (e !== null) {
      const { r: t, g: r, b: i } = e, a = [t, r, i, 255];
      this.isNewColor(a) && this.arcgisColorSelect.emit(a);
    }
  }
  isNewColor(s) {
    let e = !1;
    return this.rgba === void 0 ? e = !0 : s === void 0 ? e = !1 : e = s[0] !== this.rgba[0] || s[1] !== this.rgba[1] || s[2] !== this.rgba[2], e;
  }
  render() {
    let s;
    if (this.rgba !== void 0) {
      const [e, t, r] = this.rgba;
      s = { r: e, g: t, b: r };
    }
    return c`<calcite-label>${this.heading ?? this._messages.color}</calcite-label><calcite-color-picker .value=${g(s)} @calciteColorPickerInput=${this.onColorSelect} .messageOverrides=${{
      g: this._messages.g,
      green: this._messages.green,
      h: this._messages.h,
      hex: this._messages.hex,
      hsv: this._messages.hsv,
      hue: this._messages.hue,
      r: this._messages.r,
      red: this._messages.red,
      rgb: this._messages.rgb,
      s: this._messages.s,
      saturation: this._messages.saturation,
      saveColor: this._messages.saveColor,
      saved: this._messages.saved,
      v: this._messages.v,
      value: this._messages.value
    }} clearable .storageId=${u} format=rgb></calcite-color-picker>`;
  }
}
o("arcgis-charts-config-colors", b);
export {
  b as ArcgisChartsConfigColors
};
