import u from "./input.js";
import l from "./input-group.js";
import m from "./space.js";
import { n as h, C as x } from "../chunks/lib-cortex-element.CVMmyPMC.js";
import f from "./bicolor-picker.js";
import { c as d } from "../chunks/component.styles.CRO4Odto.js";
import { c as g } from "../chunks/custom-element.L4WJXn1j.js";
import { i as v, x as c } from "../chunks/lit-element.jLBm65_O.js";
import { c as b } from "../chunks/repeat.DbF2p5ae.js";
const $ = v``;
var C = Object.defineProperty, w = Object.getOwnPropertyDescriptor, p = (r, e, o, t) => {
  for (var a = t > 1 ? void 0 : t ? w(e, o) : e, n = r.length - 1, s; n >= 0; n--)
    (s = r[n]) && (a = (t ? s(e, o, a) : s(a)) || a);
  return t && a && C(e, o, a), a;
};
let i = class extends x {
  constructor() {
    super(...arguments), this.value = [
      "0",
      "0",
      "0",
      "0",
      "",
      ""
    ];
  }
  handleBicolorPickerChange(r) {
    const e = [...this.value];
    [0, 1, 2, 3].forEach((o) => {
      const t = Number.parseInt(e[o]);
      e[o] = (Number.isNaN(t) ? 0 : t) + "px";
    }), e[4] = r.detail.value[0], e[5] = r.detail.value[1], this.value = e, this.emit("cx-shadow-input-group-change", {
      detail: {
        value: e
      }
    });
  }
  handleInputChange(r) {
    if (!(r.target instanceof u))
      return;
    const e = r.target.dataset.index;
    if (!e)
      return;
    const o = Number.parseInt(e), t = [...this.value];
    t[o] = r.target.value, [0, 1, 2, 3].forEach((a) => {
      const n = Number.parseInt(t[a]);
      t[a] = (Number.isNaN(n) ? 0 : n) + "px";
    }), this.value = t, this.emit("cx-shadow-input-group-change", {
      detail: {
        value: t
      }
    });
  }
  render() {
    return c`<cx-space spacing="x-small" wrap="nowrap" align-items="end"><cx-input-group @cx-change=${this.handleInputChange}>${b(
      ["X", "Y", "Blur", "Spread"],
      (r) => r,
      (r, e) => c`<cx-input data-index=${e} id=${r} label=${r} value=${this.value[e] ?? ""} mask="numpx" .maskBlocks=${{
        num: {
          mask: Number,
          min: r === "Blur" ? 0 : -1 / 0,
          scale: 0,
          thousandsSeparator: ""
        }
      }} .form=${this.closest("form")}></cx-input>`
    )}</cx-input-group><cx-bicolor-picker part="border-color" value=${`${this.value[4] ?? ""} ${this.value[5] ?? ""}`} .form=${this.closest("form")} @cx-bicolor-picker-change=${this.handleBicolorPickerChange}></cx-bicolor-picker></cx-space>`;
  }
};
i.styles = [d, $];
i.dependencies = {
  "cx-bi-color-picker": f,
  "cx-input": u,
  "cx-input-group": l,
  "cx-space": m
};
p([
  h({
    converter: {
      fromAttribute: (r) => {
        const e = (r ?? "").split(" ");
        return [
          e[0] ?? "0",
          e[1] ?? "0",
          e[2] ?? "0",
          e[3] ?? "0",
          e[4] ?? "",
          e[5] ?? ""
        ];
      },
      toAttribute: (r) => r.join(" ")
    },
    type: String
  })
], i.prototype, "value", 2);
i = p([
  g("cx-shadow-input-group")
], i);
export {
  i as default
};
