import i from "./input.js";
import l from "./input-group.js";
import { n as c, C as x } from "../chunks/lib-cortex-element.CVMmyPMC.js";
import { c as f } from "../chunks/component.styles.CRO4Odto.js";
import { c as d } from "../chunks/custom-element.L4WJXn1j.js";
import { s as g } from "../chunks/parse.Cu5nBDTb.js";
import { i as h, x as u } from "../chunks/lit-element.jLBm65_O.js";
import { c as v } from "../chunks/repeat.DbF2p5ae.js";
const C = h``;
var $ = Object.defineProperty, I = Object.getOwnPropertyDescriptor, m = (t, e, a, r) => {
  for (var n = r > 1 ? void 0 : r ? I(e, a) : e, o = t.length - 1, p; o >= 0; o--)
    (p = t[o]) && (n = (r ? p(e, a, n) : p(n)) || n);
  return r && n && $(e, a, n), n;
};
let s = class extends x {
  constructor() {
    super(...arguments), this.value = ["0", "0", "0", "0"];
  }
  handleInputChange(t) {
    if (!(t.target instanceof i))
      return;
    const e = t.target.dataset.index;
    if (!e)
      return;
    const a = parseInt(e);
    let r = [...this.value];
    r[a] = t.target.value, r = r.map((n) => {
      const o = parseInt(n);
      return (isNaN(o) ? 0 : o) + "px";
    }), this.value = r, this.emit("cx-padding-input-group-change", {
      detail: {
        value: r
      }
    });
  }
  render() {
    return u`<cx-input-group @cx-change=${this.handleInputChange}>${v(
      ["Top", "Right", "Bottom", "Left"],
      (t) => t,
      (t, e) => u`<cx-input data-index=${e} id=${t} label=${t} value=${this.value[e] ?? ""} mask="numpx" .maskBlocks=${{
        num: {
          mask: Number,
          min: 0,
          scale: 0,
          thousandsSeparator: ""
        }
      }} .form=${this.closest("form")}></cx-input>`
    )}</cx-input-group>`;
  }
};
s.styles = [f, C];
s.dependencies = {
  "cx-input": i,
  "cx-input-group": l
};
m([
  c({
    converter: {
      fromAttribute: (t) => g(t),
      toAttribute: (t) => t.join(" ")
    },
    type: String
  })
], s.prototype, "value", 2);
s = m([
  d("cx-padding-input-group")
], s);
export {
  s as default
};
