import n from "./input.js";
import p from "./space.js";
import { n as u, C as m } from "../chunks/lib-cortex-element.CVMmyPMC.js";
import { c as h } from "../chunks/component.styles.CRO4Odto.js";
import { c as d } from "../chunks/custom-element.L4WJXn1j.js";
import { L as x } from "../chunks/i18n.BABe9hN4.js";
import { i as v, x as b } from "../chunks/lit-element.jLBm65_O.js";
import f from "./bicolor-picker.js";
const g = v`.border-width{width:72px}`;
var C = Object.defineProperty, w = Object.getOwnPropertyDescriptor, c = (r, e, t, o) => {
  for (var a = o > 1 ? void 0 : o ? w(e, t) : e, s = r.length - 1, l; s >= 0; s--)
    (l = r[s]) && (a = (o ? l(e, t, a) : l(a)) || a);
  return o && a && C(e, t, a), a;
};
let i = class extends m {
  constructor() {
    super(...arguments), this.localize = new x(this), this.value = ["", "", "0px"];
  }
  handleBiColorPickerChange(r) {
    const e = [...this.value];
    e[0] = r.detail.value[0], e[1] = r.detail.value[1];
    const t = e[2];
    e[2] = Number.isNaN(Number.parseFloat(t)) ? "0px" : t, this.value = e, this.emit("cx-border-input-group-change", {
      detail: {
        value: e
      }
    });
  }
  handleBorderWidthInputChange(r) {
    const e = r.target, t = [...this.value], o = e.value;
    t[2] = Number.isNaN(Number.parseFloat(o)) ? "0px" : o, this.value = t, this.emit("cx-border-input-group-change", {
      detail: {
        value: t
      }
    });
  }
  render() {
    return b`<cx-space spacing="x-small" wrap="nowrap"><cx-bicolor-picker part="border-color" value=${`${this.value[0]} ${this.value[1]}`} .form=${this.closest("form")} @cx-bicolor-picker-change=${this.handleBiColorPickerChange}></cx-bicolor-picker><cx-input part="border-width" class="border-width" value=${this.value[2]} mask="numpx" .maskBlocks=${{
      num: {
        mask: Number,
        min: 0,
        scale: 0,
        thousandsSeparator: ""
      }
    }} .form=${this.closest("form")} @cx-change=${this.handleBorderWidthInputChange} placeholder=${this.localize.term("borderWidth")}></cx-input></cx-space>`;
  }
};
i.styles = [h, g];
i.dependencies = {
  "cx-bi-color-picker": f,
  "cx-input": n,
  "cx-space": p
};
c([
  u({
    converter: {
      fromAttribute: (r) => {
        const e = (r ?? "").split(" ");
        return [e[0] ?? "", e[1] ?? "", e[2] ?? "0px"];
      },
      toAttribute: (r) => r.join(" ")
    },
    type: String
  })
], i.prototype, "value", 2);
i = c([
  d("cx-border-input-group")
], i);
export {
  i as default
};
