import u from "./input.js";
import { C as h } from "../chunks/option.DGXQzdtb.js";
import m from "./select.js";
import x from "./space.js";
import { n as l, C as g } from "../chunks/lib-cortex-element.CVMmyPMC.js";
import { c as C } from "../chunks/component.styles.CRO4Odto.js";
import { C as o } from "../chunks/index.Cpamj0jB.js";
import { c as d } from "../chunks/custom-element.L4WJXn1j.js";
import { L as _ } from "../chunks/i18n.BABe9hN4.js";
import { i as v, x as y } from "../chunks/lit-element.jLBm65_O.js";
const $ = v`:host{width:100%;display:block}.corner-position-input-group__inputs{width:100%}.corner-position-input-group__input{flex:1}`;
var X = Object.defineProperty, Y = Object.getOwnPropertyDescriptor, r = (e, t, f, n) => {
  for (var i = n > 1 ? void 0 : n ? Y(t, f) : t, c = e.length - 1, a; c >= 0; c--)
    (a = e[c]) && (i = (n ? a(t, f, i) : a(i)) || i);
  return n && i && X(t, f, i), i;
};
const p = {
  mask: "numpx",
  maskBlocks: {
    num: {
      mask: Number,
      min: 0,
      scale: 0,
      thousandsSeparator: ""
    }
  }
};
let s = class extends g {
  constructor() {
    super(...arguments), this.localize = new _(this), this.position = o.TopLeft, this.offsetX = "0px", this.offsetY = "0px";
  }
  get offsetXKey() {
    return this.position === o.TopLeft || this.position === o.BottomLeft ? "left" : "right";
  }
  get offsetYKey() {
    return this.position === o.TopLeft || this.position === o.TopRight ? "top" : "bottom";
  }
  handlePositionChange(e) {
    const t = e.target;
    this.position = t.value, this.offsetX = "0px", this.offsetY = "0px", this.emit("cx-corner-position-input-group-change", {
      detail: {
        offsetX: this.offsetX,
        offsetY: this.offsetY,
        position: this.position
      }
    });
  }
  handleOffsetXChange(e) {
    const t = e.target;
    this.offsetX = t.value, this.emit("cx-corner-position-input-group-change", {
      detail: {
        offsetX: this.offsetX,
        offsetY: this.offsetY,
        position: this.position
      }
    });
  }
  handleOffsetYChange(e) {
    const t = e.target;
    this.offsetY = t.value, this.emit("cx-corner-position-input-group-change", {
      detail: {
        offsetX: this.offsetX,
        offsetY: this.offsetY,
        position: this.position
      }
    });
  }
  render() {
    return y`<cx-space class="corner-position-input-group" direction="vertical"><cx-select class="corner-position-input-group__select" value=${this.position} label="Position" name="position" hoist @cx-change=${this.handlePositionChange}><cx-option value=${o.TopLeft}>Top Left</cx-option><cx-option value=${o.TopRight}>Top Right</cx-option><cx-option value=${o.BottomLeft}>Bottom Left</cx-option><cx-option value=${o.BottomRight}>Bottom Right</cx-option></cx-select><cx-space class="corner-position-input-group__inputs" direction="horizontal"><cx-input class="corner-position-input-group__input" value=${this.offsetY} label=${this.localize.term(this.offsetYKey)} name="offset-y" mask=${p.mask} .maskBlocks=${p.maskBlocks} @cx-change=${this.handleOffsetYChange}></cx-input><cx-input class="corner-position-input-group__input" value=${this.offsetX} label=${this.localize.term(this.offsetXKey)} name="offset-x" mask=${p.mask} .maskBlocks=${p.maskBlocks} @cx-change=${this.handleOffsetXChange}></cx-input></cx-space></cx-space>`;
  }
};
s.styles = [C, $];
s.dependencies = {
  "cx-input": u,
  "cx-option": h,
  "cx-select": m,
  "cx-space": x
};
r([
  l({ reflect: !0, type: String })
], s.prototype, "position", 2);
r([
  l({ attribute: "offset-x", reflect: !0, type: String })
], s.prototype, "offsetX", 2);
r([
  l({ attribute: "offset-y", reflect: !0, type: String })
], s.prototype, "offsetY", 2);
s = r([
  d("cx-corner-position-input-group")
], s);
export {
  s as default
};
