import h from "./color-picker.js";
import m from "./space.js";
import { n as p, C as u } from "../chunks/lib-cortex-element.CVMmyPMC.js";
import { c as f } from "../chunks/component.styles.CRO4Odto.js";
import { c as v } from "../chunks/custom-element.L4WJXn1j.js";
import { i as x, x as C } from "../chunks/lit-element.jLBm65_O.js";
import { o as n } from "../chunks/style-map.llVFPd__.js";
const g = x``;
var F = Object.defineProperty, d = Object.getOwnPropertyDescriptor, s = (r, e, l, c) => {
  for (var o = c > 1 ? void 0 : c ? d(e, l) : e, a = r.length - 1, i; a >= 0; a--)
    (i = r[a]) && (o = (c ? i(e, l, o) : i(o)) || o);
  return c && o && F(e, l, o), o;
};
let t = class extends u {
  constructor() {
    super(...arguments), this.value = ["", ""], this.form = void 0;
  }
  handleFirstColorPickerChange(r) {
    const e = [...this.value];
    e[0] = r.target.value.replaceAll(" ", ""), this.value = e, this.emit("cx-bicolor-picker-change", {
      detail: {
        value: e
      }
    });
  }
  handleSecondColorPickerChange(r) {
    const e = [...this.value];
    e[1] = r.target.value.replaceAll(" ", ""), this.value = e, this.emit("cx-bicolor-picker-change", {
      detail: {
        value: e
      }
    });
  }
  render() {
    return C`<cx-space spacing="x-small" wrap="nowrap"><cx-color-picker variant="button" value=${this.value[0]} hoist opacity .form=${this.form || this.closest("form")} @cx-change=${this.handleFirstColorPickerChange} style=${n({
      "--control-button-color": "#FFFFFF",
      "--control-caret-color": "#1A1A1E"
    })}></cx-color-picker><cx-color-picker variant="button" value=${this.value[1]} hoist opacity .form=${this.form || this.closest("form")} @cx-change=${this.handleSecondColorPickerChange} style=${n({
      "--control-button-color": "#1A1A1E",
      "--control-caret-color": "#FFFFFF"
    })}></cx-color-picker></cx-space>`;
  }
};
t.styles = [f, g];
t.dependencies = {
  "cx-color-picker": h,
  "cx-space": m
};
s([
  p({
    converter: {
      fromAttribute: (r) => {
        const e = (r ?? "").split(" ");
        return [
          !e[0] || e[0] === "transparent" ? "" : e[0],
          !e[1] || e[1] === "transparent" ? "" : e[1]
        ];
      },
      toAttribute: (r) => r.join(" ")
    },
    type: String
  })
], t.prototype, "value", 2);
s([
  p({ reflect: !1 })
], t.prototype, "form", 2);
t = s([
  v("cx-bicolor-picker")
], t);
export {
  t as default
};
