import { C as x } from "../chunks/icon-button.C2s3pHG4.js";
import d from "./input.js";
import g from "./select.js";
import v from "./space.js";
import k from "./tooltip.js";
import { n as u, C as P } from "../chunks/lib-cortex-element.CVMmyPMC.js";
import { c as $ } from "../chunks/component.styles.CRO4Odto.js";
import { c as b } from "../chunks/custom-element.L4WJXn1j.js";
import { d as _ } from "../chunks/default-value.COZopaet.js";
import { L as y } from "../chunks/i18n.BABe9hN4.js";
import { w as V } from "../chunks/watch.BCJD77bD.js";
import { i as w, x as h } from "../chunks/lit-element.jLBm65_O.js";
import { r as c } from "../chunks/state.CSDxrqLd.js";
import { e as m } from "../chunks/query.BBf1UFkC.js";
import { n as f } from "../chunks/when.Dr1es41R.js";
var i = /* @__PURE__ */ ((t) => (t.Percentage = "percentage", t.Pixel = "pixel", t))(i || {});
const z = w`:host{width:100%;display:block}.size-input-group__width,.size-input-group__height{flex:1}`;
var C = Object.defineProperty, R = Object.getOwnPropertyDescriptor, s = (t, e, r, n) => {
  for (var l = n > 1 ? void 0 : n ? R(e, r) : e, o = t.length - 1, p; o >= 0; o--)
    (p = t[o]) && (l = (n ? p(e, r, l) : p(l)) || l);
  return n && l && C(e, r, l), l;
};
let a = class extends P {
  constructor() {
    super(...arguments), this.localize = new y(this), this.value = ["100%", "100%"], this.defaultPixelValue = ["0px", "0px"], this.keepRatio = !1, this.canSetUnit = !1, this.canSetAspectRatio = !1, this.useMask = !1, this.unit = i.Percentage, this.defaultUnit = i.Percentage, this.fallbackValue = ["100%", ""], this.name = "", this.defaultValue = ["100%", ""];
  }
  get mask() {
    return this.useMask ? this.unit === i.Pixel ? "numpx" : "num%" : "num";
  }
  get defaultAspectRatio() {
    return this.defaultPixelValue[0] === "0px" || this.defaultPixelValue[1] === "0px" ? 1 : parseFloat(this.defaultPixelValue[0]) / parseFloat(this.defaultPixelValue[1]);
  }
  handleValueChange() {
    this.value[0].includes("%") ? this.unit = i.Percentage : this.unit = i.Pixel, this.hasUpdated || (this.defaultUnit = this.unit, this.fallbackValue = [...this.defaultValue]);
  }
  handleWidthInput(t) {
    t.stopPropagation();
    const e = t.target, r = [...this.value], n = e.value, l = !Number.isNaN(parseFloat(n));
    let o = "";
    this.useMask ? o = l ? n : "0" : this.unit === i.Percentage ? o = l ? `${n}%` : "0%" : o = l ? `${n}px` : "0px", r[0] = o, this.keepRatio && this.unit === i.Pixel && (r[1] = (parseFloat(o) / this.defaultAspectRatio).toFixed(0) + "px", this.heightInput.requestUpdate()), this.value = r, this.emit("cx-change");
  }
  handleHeightInput(t) {
    t.stopPropagation();
    const e = t.target, r = [...this.value], n = e.value, l = !Number.isNaN(parseFloat(n));
    let o = "";
    this.useMask ? o = l ? n : "0" : this.unit === i.Percentage ? o = l ? `${n}%` : "0%" : o = l ? `${n}px` : "0px", r[1] = o, this.keepRatio && this.unit === i.Pixel && (r[0] = (parseFloat(o) * this.defaultAspectRatio).toFixed(0) + "px", this.widthInput.requestUpdate()), this.value = r, this.emit("cx-change");
  }
  handleUnitChange(t) {
    t.stopPropagation();
    const e = t.target;
    this.unit = e.value, this.unit === this.defaultUnit ? this.value = [...this.fallbackValue] : this.unit === i.Pixel ? this.value = [...this.defaultPixelValue] : this.value = ["100%", ""], this.emit("cx-change");
  }
  handleKeepRatioClick() {
    this.keepRatio = !this.keepRatio;
    const t = [...this.value];
    this.keepRatio && this.unit === i.Pixel && (t[1] = (parseFloat(this.value[0]) / this.defaultAspectRatio).toFixed(0) + "px", this.value = t), this.emit("cx-change");
  }
  handleInputChange(t) {
    t.stopPropagation();
  }
  render() {
    let t = this.value[0], e = this.value[1];
    return this.useMask || (t = Number.isNaN(parseFloat(this.value[0])) ? "" : String(parseFloat(this.value[0])), e = Number.isNaN(parseFloat(this.value[1])) ? "" : String(parseFloat(this.value[1]))), h`<cx-space spacing="x-small" align-items="center" wrap="nowrap" class="size-input-group"><cx-input part="width" class="size-input-group__width" value=${t} label=${this.localize.term("width")} mask=${this.mask} .maskBlocks=${{
      num: {
        mask: Number,
        max: this.unit === i.Percentage ? 100 : void 0,
        min: 0,
        scale: 0,
        thousandsSeparator: ""
      }
    }} .form=${this.closest("form")} @cx-change=${this.handleInputChange} @cx-input=${this.handleWidthInput}></cx-input>${f(
      this.unit === i.Pixel && this.canSetAspectRatio,
      () => h`<cx-icon-button part="keep-aspect-ratio" class="size-input-group__keep-aspect-ratio" name=${this.keepRatio ? "insert_link" : "link_off"} title=${this.localize.term("keepAspectRatio")} @click=${this.handleKeepRatioClick}></cx-icon-button>`
    )}<cx-tooltip content=${this.localize.term("disabledHeightInputHelpText")} ?disabled=${this.unit === i.Pixel}><cx-input part="height" class="size-input-group__height" value=${e} label=${this.localize.term("height")} ?disabled=${this.unit === i.Percentage} mask=${this.mask} .maskBlocks=${{
      num: {
        mask: Number,
        max: this.unit === i.Percentage ? 100 : void 0,
        min: 0,
        scale: 0,
        thousandsSeparator: ""
      }
    }} .form=${this.closest("form")} @cx-input=${this.handleHeightInput}></cx-input></cx-tooltip>${f(
      this.canSetUnit,
      () => h`<cx-select part="unit" class="size-input-group__unit" label=${this.localize.term("unit")} value=${this.unit} .form=${this.closest("form")} @cx-change=${this.handleUnitChange}><cx-option value=${i.Pixel}>px</cx-option><cx-option value=${i.Percentage}>%</cx-option></cx-select>`
    )}</cx-space>`;
  }
};
a.styles = [$, z];
a.dependencies = {
  "cx-icon-button": x,
  "cx-input": d,
  "cx-select": g,
  "cx-space": v,
  "cx-tooltip": k
};
s([
  m(".size-input-group__width")
], a.prototype, "widthInput", 2);
s([
  m(".size-input-group__height")
], a.prototype, "heightInput", 2);
s([
  m(".size-input-group__unit")
], a.prototype, "unitSelect", 2);
s([
  u({
    converter: {
      fromAttribute: (t) => {
        const e = (t ?? "").split(" ");
        return [e[0] ?? "", e[1] ?? ""];
      },
      toAttribute: (t) => t.join(" ")
    },
    type: String
  })
], a.prototype, "value", 2);
s([
  u({
    attribute: "default-pixel-value",
    converter: {
      fromAttribute: (t) => {
        const e = (t ?? "").split(" ");
        return [e[0] ?? "", e[1] ?? ""];
      },
      toAttribute: (t) => t.join(" ")
    },
    reflect: !0,
    type: String
  })
], a.prototype, "defaultPixelValue", 2);
s([
  u({ attribute: "keep-ratio", reflect: !0, type: Boolean })
], a.prototype, "keepRatio", 2);
s([
  u({ attribute: "can-set-unit", reflect: !0, type: Boolean })
], a.prototype, "canSetUnit", 2);
s([
  u({ attribute: "can-set-aspect-ratio", reflect: !0, type: Boolean })
], a.prototype, "canSetAspectRatio", 2);
s([
  u({ attribute: "use-mask", reflect: !0, type: Boolean })
], a.prototype, "useMask", 2);
s([
  c()
], a.prototype, "unit", 2);
s([
  c()
], a.prototype, "defaultUnit", 2);
s([
  c()
], a.prototype, "fallbackValue", 2);
s([
  u()
], a.prototype, "name", 2);
s([
  _()
], a.prototype, "defaultValue", 2);
s([
  V("value")
], a.prototype, "handleValueChange", 1);
a = s([
  b("cx-size-input-group")
], a);
export {
  a as default
};
