import { D as L, q as i, R as m, d as s, x as c, H as A, C as h, w as g, L as R, T, B as y, G as _, b, s as G, c as S, a as x, f as p, bx as D, by as P } from "./am-chart.H2jnOzFc.js";
import { L as k } from "./LinearGradient.B1z9AGUt.js";
import { C as M } from "./Circle.DBa5Ok8V.js";
import { E as H } from "./EditableLabel.BWeq6fgX.js";
import { S as B } from "./Slider.C20No2z5.js";
class O extends L {
  setupDefaultRules() {
    super.setupDefaultRules();
    const t = this.rule.bind(this);
    t("ColorPickerButton").setAll({
      colorOpacity: 1,
      width: 35,
      height: 35,
      marginRight: 0,
      cursorOverStyle: "pointer"
    }), t("Graphics", ["colorpickerbutton", "icon"]).setAll({
      svgPath: "M 1 14 L 3 16 L 5 14 L 7 14 L 15 6 A 0.6 0.6 90 0 0 11 2 L 3 10 L 3 12 L 1 14 M 7 4 L 13 10",
      forceInactive: !0,
      centerX: i,
      centerY: i,
      x: i,
      y: i,
      strokeOpacity: 0.5
    }), t("Graphics", ["colorpickerbutton", "nocolor"]).setAll({
      x: i,
      y: i,
      centerX: i,
      centerY: i,
      forceInactive: !0,
      svgPath: "M 5 5 L 25 25 M 25 5 L 5 25"
    }), t("ColorPicker").setAll({
      exportable: !1,
      paddingBottom: 20,
      paddingTop: 20,
      paddingLeft: 20,
      paddingRight: 20,
      width: 250,
      position: "absolute",
      x: i,
      y: i,
      centerX: i,
      centerY: i,
      background: m.new(this._root, {
        strokeOpacity: 1,
        fillOpacity: 1,
        shadowBlur: 8,
        shadowColor: s(0),
        shadowOpacity: 0.3,
        shadowOffsetX: 2,
        shadowOffsetY: 2,
        fill: s(16777215)
      })
    }), t("ColorPicker").states.create("hidden", {
      stateAnimationDuration: 200,
      opacity: 0,
      visible: !1
    }), t("ColorPicker").states.create("default", {
      stateAnimationDuration: 300
    }), t("Container", ["colorpicker", "lastcolors"]).setAll({
      layout: this._root.horizontalLayout,
      width: c
    }), t("Circle", ["colorpicker", "circle", "target"]).setAll({
      radius: 5,
      fill: s(16777215),
      stroke: s(16777215),
      fillOpacity: 1,
      strokeOpacity: 1,
      strokeWidth: 2,
      shadowColor: s(0),
      shadowOpacity: 1,
      shadowBlur: 5,
      shadowOffsetX: 0,
      shadowOffsetY: 0
    }), t("Slider", ["colorpicker", "gradient"]).setAll({
      marginLeft: 15,
      marginRight: 0
    }), t("RoundedRectangle", ["colorpicker", "gradient", "scrollbar", "main", "background"]).setAll({
      fillGradient: k.new(this._root, {
        rotation: 90,
        stops: [
          { color: s(16711680), offset: 0 },
          { color: s(16776960), offset: 0.17 },
          { color: s(65280), offset: 0.34 },
          { color: s(65535), offset: 0.51 },
          { color: s(255), offset: 0.68 },
          { color: s(16711935), offset: 0.85 },
          { color: s(16711680), offset: 1 }
        ]
      })
    }), t("Button", ["colorpicker", "resize"]).setAll({
      tooltipY: 0,
      width: 22,
      height: 22,
      paddingTop: 0,
      paddingBottom: 0,
      paddingLeft: 0,
      paddingRight: 0
    }), t("RoundedRectangle", ["colorpicker", "resize", "background"]).setAll({
      fillOpacity: 1,
      strokeOpacity: 1,
      strokeWidth: 2,
      shadowColor: s(0),
      shadowOpacity: 1,
      shadowBlur: 5,
      shadowOffsetX: 0,
      shadowOffsetY: 0
    }), t("Graphics", ["colorpicker", "resize", "button", "icon"]).setAll({
      forceHidden: !0
    }), t("Slider", ["colorpicker", "opacity"]).setAll({
      centerY: i,
      y: i,
      width: c
    }), t("RoundedRectangle", ["colorpicker", "main", "opacity", "background"]).setAll({
      strokeWidth: 1,
      strokeOpacity: 0.5
    }), t("EditableLabel", ["colorpicker", "input"]).setAll({
      text: "Text",
      width: c,
      height: 30,
      marginLeft: 5,
      fontSize: "13px",
      fontFamily: "monospace",
      oversizedBehavior: "none",
      textAlign: "center",
      minWidth: 50
    }), t("EditableLabel", ["colorpicker", "color", "input"]).setAll({
      maxChars: 7
    }), t("RoundedRectangle", ["colorpicker", "background", "input"]).setAll({
      strokeWidth: 1,
      cornerRadiusBL: 4,
      cornerRadiusBR: 4,
      cornerRadiusTL: 4,
      cornerRadiusTR: 4,
      strokeOpacity: 0.25,
      fillOpacity: 0
    }), t("Button", ["colorpicker", "pickertool"]).setAll({
      width: 30,
      height: 30,
      marginTop: 0,
      marginBottom: 0,
      marginLeft: 0,
      marginRight: 0,
      tooltipX: A(90)
    }), t("Button", ["colorpicker", "pickertool", "nocolor"]).setAll({
      tooltipText: "No color",
      marginLeft: 5
    }), t("Graphics", ["colorpicker", "icon", "nocolor"]).setAll({
      svgPath: "M 0 0 L 14 14 M 14 0 L 0 14",
      centerX: i,
      centerY: i,
      x: i,
      y: i
    }), t("Button", ["colorpicker", "picker"]).setAll({
      tooltipText: "Pick color from screen"
    }), t("Graphics", ["picker", "icon"]).setAll({
      centerX: i,
      centerY: i,
      x: i,
      y: i,
      svgPath: "M 1 14 L 3 16 L 5 14 L 7 14 L 15 6 A 0.6 0.6 90 0 0 11 2 L 3 10 L 3 12 L 1 14 M 7 4 L 13 10"
    }), t("Button", ["colorpicker", "button"]).setAll({
      height: void 0,
      paddingTop: 1,
      paddingBottom: 1,
      width: i
    }), t("Button", ["colorpicker", "button", "ok"]).setAll({
      marginLeft: 5
    }), t("Label", ["colorpicker", "cancel"]).setAll({
      text: "Cancel",
      x: i,
      centerX: i
    }), t("Label", ["colorpicker", "ok"]).setAll({
      text: "OK",
      x: i,
      centerX: i
    }), t("Tooltip", ["colorpicker"]).setAll({
      getFillFromSprite: !1,
      autoTextColor: !1,
      paddingBottom: 5,
      paddingTop: 5,
      paddingLeft: 7,
      paddingRight: 7
    }), t("PointedRectangle", ["colorpicker", "tooltip", "background"]).setAll({
      fill: s(0),
      fillOpacity: 0.9,
      stroke: s(16777215),
      strokeOpacity: 1
    }), t("Label", ["colorpicker", "tooltip"]).setAll({
      fontSize: "12px",
      fill: s(16777215)
    });
  }
}
class v extends h {
  constructor() {
    super(...arguments), this._clickOverlay = this.children.push(g.new(this._root, {
      position: "absolute",
      fillOpacity: 0,
      interactive: !0,
      isMeasured: !1,
      fill: s(0),
      forceHidden: !0
    })), this.rectangles = new R(T.new({}), () => m._new(this._root, {}, [this.rectangles.template])), this.gradientsContainer = this.children.push(h.new(this._root, {
      themeTagsSelf: ["gradientscontainer"],
      width: c,
      layout: this._root.horizontalLayout
    })), this.colorGradientsContainer = this.gradientsContainer.children.push(h.new(this._root, {
      width: c,
      layer: 0
    })), this.colorRectangle = this.colorGradientsContainer.children.push(g.new(this._root, {
      crisp: !0,
      themeTags: ["colorrectangle"],
      width: c,
      height: c,
      strokeWidth: 1
    })), this.colorRectangleWhiteOverlay = this.colorGradientsContainer.children.push(g.new(this._root, {
      crisp: !0,
      forceInactive: !0,
      width: c,
      height: c
    })), this.colorRectangleBlackOverlay = this.colorGradientsContainer.children.push(g.new(this._root, {
      crisp: !0,
      forceInactive: !0,
      width: c,
      height: c
    })), this.slider = this.gradientsContainer.children.push(B.new(this._root, {
      orientation: "vertical",
      themeTags: ["gradient"]
    })), this.inputContainer = this.children.push(h.new(this._root, {
      marginTop: 10,
      layout: this._root.horizontalLayout,
      width: c
    })), this.pickerButton = this.inputContainer.children.push(y.new(this._root, {
      themeTags: ["picker", "pickertool"],
      toggleKey: "active",
      icon: _.new(this._root, {
        themeTags: ["icon"]
      })
    })), this.noColorButton = this.inputContainer.children.push(y.new(this._root, {
      themeTags: ["nocolor", "pickertool"],
      icon: _.new(this._root, {
        themeTags: ["icon"]
      })
    })), this.colorInput = this.inputContainer.children.push(H.new(this._root, {
      themeTags: ["input", "color"]
    })), this.opacityContainer = this.children.push(h.new(this._root, {
      width: c,
      marginTop: 10,
      layout: this._root.horizontalLayout
    })), this.opacitySlider = this.opacityContainer.children.push(B.new(this._root, {
      themeTags: ["opacity"],
      orientation: "horizontal"
    })), this.targetCircle = this.colorGradientsContainer.children.push(M.new(this._root, {
      themeTags: ["circle", "target"],
      isMeasured: !1,
      forceInactive: !0,
      position: "absolute",
      layer: 30
    })), this.buttonsContainer = this.children.push(h.new(this._root, {
      marginTop: 10,
      layout: this._root.horizontalLayout,
      width: c
    })), this.cancelButton = this.buttonsContainer.children.push(y.new(this._root, {
      themeTags: ["cancel"],
      label: b.new(this._root, {})
    })), this.okButton = this.buttonsContainer.children.push(y.new(this._root, {
      themeTags: ["ok"],
      label: b.new(this._root, {})
    })), this._isColorDown = !1, this._isPicking = !1, this._isEditing = !1;
  }
  /**
   * @ignore
   */
  _afterNew() {
    this._defaultThemes.push(O.new(this._root)), this.addTag("colorpicker"), super._afterNew(), this.set("tooltip", this._root.systemTooltip), this.cancelButton.events.on("click", () => {
      this.cancel();
    }), this.okButton.events.on("click", () => {
      this.set("colorButton", void 0), this.events.dispatch("colorchanged", {
        type: "colorchanged",
        target: this,
        color: this.get("color"),
        colorOpacity: this.get("colorOpacity")
      });
    });
    const t = this.root.container;
    t.events.on("boundschanged", () => {
      const o = t.width(), e = t.height();
      this._clickOverlay.setAll({
        width: o,
        height: e,
        x: 0,
        y: 0
      });
    }), this._clickOverlay.events.on("click", () => {
      !this._isPicking && !this._isEditing ? this.cancel() : this.pickerButton.set("active", !1);
    }), this.set("layout", this._root.verticalLayout), this.noColorButton.events.on("click", () => {
      this.set("color", void 0);
      const o = this.get("colorButton");
      o && o.setAll({
        color: void 0,
        colorOpacity: 1
      }), this.events.dispatch("colorchanged", {
        type: "colorchanged",
        target: this,
        color: void 0,
        colorOpacity: 1
      }), this.set("colorButton", void 0);
    }), this.colorInput.on("text", (o) => {
      if (o) {
        o = o.replace(/[^abcdef0-9#]/ig, ""), o.substring(0, 1) !== "#" && (o = "#" + o);
        try {
          this.set("color", s(o));
        } catch {
          return;
        }
        this.colorInput.set("text", o);
      }
    }), this.pickerButton.on("active", (o) => {
      this._isPicking = !!o, this.set("forceInactive", o);
    }), G("keyboardevents") && this._disposers.push(S(document, "keyup", (o) => {
      o.key === "Escape" && this.set("colorButton", void 0);
    })), this.gradientsContainer.events.on("boundschanged", () => {
      const o = Math.floor(this.colorGradientsContainer.width());
      this.colorGradientsContainer.setAll({ width: o, height: o }), this.slider.set("height", o);
    }), this.targetCircle.setAll({
      x: this.colorRectangle.width(),
      y: 0
    }), this.targetCircle.adapters.add("x", (o) => {
      if (x(o)) {
        const e = this.colorRectangle.width();
        return Math.min(e, Math.max(0, o));
      }
    }), this.targetCircle.adapters.add("y", (o) => {
      if (x(o)) {
        const e = this.colorRectangle.height();
        return Math.min(e, Math.max(0, o));
      }
    }), this.slider.on("start", () => {
      this.set("hue", this.slider.get("start", 0));
    });
    const r = this.slider.get("background");
    r && r.set("layer", 0), this.opacitySlider.on("start", () => {
      this.set("colorOpacity", this.opacitySlider.get("start", 1));
    });
    const a = this.opacitySlider.get("background");
    a && a.set("layer", 0), this.colorRectangle.events.on("pointerdown", (o) => {
      this._isColorDown = !0, this._handleTargetMove(o), this.set("draggable", !1), this.dragStop(o);
    }), this.colorRectangle.events.on("globalpointermove", (o) => {
      if (this._isColorDown && this._handleTargetMove(o), this._isPicking) {
        const e = this._root.container._display, l = e.getLayer().context, n = e._renderer.resolution, d = l.getImageData(Math.floor(o.point.x * n), Math.floor(o.point.y * n), 1, 1).data, f = p.fromRGB(d[0], d[1], d[2]);
        this.set("color", f);
      }
    }), this.colorRectangle.events.on("globalpointerup", (o) => {
      this.set("draggable", !0), this.dragStop(o), this._isColorDown = !1;
    }), this.colorInput.on("active", (o) => {
      this._isEditing = !!o;
    });
  }
  /**
   * @ignore
   */
  _updateChildren() {
    var t, r, a, o;
    if (super._updateChildren(), this.isDirty("colorButton")) {
      this.pickerButton.set("active", !1);
      const e = this.get("colorButton");
      let l = !0;
      if (e) {
        this.opacityContainer.set("forceHidden", e.get("disableOpacity")), this._previousColor = e.get("color", e.getPrivate("color")), this._previousOpacity = e.get("colorOpacity");
        const n = this.parent;
        n && (n.children.moveValue(this._clickOverlay), n.children.moveValue(this)), l = !1, this.show(), this.set("color", e.get("color", e.getPrivate("color"))), this.set("colorOpacity", e.get("colorOpacity") || 1);
      } else
        this.hide();
      this._clickOverlay.set("forceHidden", l);
    }
    if (this.isDirty("hue") && (this._handleDirtyHue(), this._updateColor()), this.isDirty("colorOpacity")) {
      const e = this.opacitySlider, l = this.get("colorOpacity", 1);
      e.startGrip.set("tooltipText", "opacity:" + Math.round(l * 100) + "%"), e.startGrip.isDragging() ? e.startGrip.hover() : (e.set("start", l), e.markDirtyKey("start"));
      const n = this.get("colorButton");
      n && n.set("colorOpacity", l), this._updateOpacitySliderGrip();
    }
    if (this.isDirty("color")) {
      const e = this.get("color"), l = this._prevColor;
      let n = !1;
      if (e && l && e.toCSSHex() === l.toCSSHex() && (n = !0), !n) {
        if (e) {
          if (this.targetCircle.show(), !this._isColorDown) {
            const u = D(e.toHSL());
            this.setRaw("hue", u.h), this.slider.startGrip.isDragging() || this.slider.set("start", u.h), this.targetCircle.setAll({
              x: this.colorRectangle.width() * u.s,
              y: this.colorRectangle.height() * (1 - u.v)
            });
          }
          this.targetCircle.set("fill", e), this._handleDirtyHue(), this.colorInput.set("text", e.toCSSHex().substring(1, 7));
        } else
          this.targetCircle.hide(), this.colorInput.set("text", "");
        this._prevColor = e;
        const d = this.opacitySlider.get("background");
        d && d.set("fillGradient", k.new(this._root, {
          rotation: 0,
          stops: [
            { color: e, opacity: 0 },
            { color: e, opacity: 1 }
          ]
        }));
        const f = this.get("colorButton");
        f && f.set("color", e), this._updateOpacitySliderGrip();
      }
    }
    if (this.isDirty("backgroundColor")) {
      const e = this.get("backgroundColor", s(16777215));
      this.colorRectangle.setAll({
        stroke: e
      }), this.colorRectangleBlackOverlay.setAll({
        stroke: e
      }), this.colorRectangleWhiteOverlay.setAll({
        stroke: e
      }), (t = this.pickerButton.get("background")) === null || t === void 0 || t.states.applyAnimate("default", 0), (r = this.noColorButton.get("background")) === null || r === void 0 || r.states.applyAnimate("default", 0), (a = this.cancelButton.get("background")) === null || a === void 0 || a.states.applyAnimate("default", 0), (o = this.okButton.get("background")) === null || o === void 0 || o.states.applyAnimate("default", 0);
    }
  }
  /**
   * @ignore
   */
  _handleDirtyHue() {
    var t, r, a;
    const o = this.slider.get("start", 0), e = p.fromHSL(o, 1, 0.5), l = this.slider.startGrip;
    this.colorRectangle.setAll({
      fill: e,
      stroke: this.get("backgroundColor", s(16777215))
    });
    const n = l.get("background");
    n && (n.set("fill", e), (t = n.states.lookup("default")) === null || t === void 0 || t.set("fill", e), (r = n.states.lookup("hover")) === null || r === void 0 || r.set("fill", e), (a = n.states.lookup("down")) === null || a === void 0 || a.set("fill", e)), this.colorRectangleWhiteOverlay.setAll({
      fillGradient: k.new(this._root, {
        rotation: 0,
        stops: [
          { color: s(16777215), opacity: 1, offset: 0 },
          { color: s(16777215), opacity: 0, offset: 1 }
        ]
      })
    }), this.colorRectangleBlackOverlay.setAll({
      fillGradient: k.new(this._root, {
        stops: [
          { color: s(0), opacity: 0, offset: 0 },
          { color: s(0), opacity: 1, offset: 1 }
        ]
      })
    });
  }
  /**
   * @ignore
   */
  _handleTargetMove(t) {
    const r = this.colorGradientsContainer.toLocal({ x: t.point.x, y: t.point.y });
    this.targetCircle.setAll({
      x: r.x,
      y: r.y
    }), this._updateColor();
  }
  /**
   * @ignore
   */
  _updateColor() {
    const t = this.targetCircle.x(), r = this.targetCircle.y(), a = this.colorRectangle.height(), o = this.colorRectangle.width(), e = this.slider.get("start", 0);
    let l = P({ h: e, s: t / o, v: 1 - r / a });
    this.set("color", p.fromHSL(l.h, l.s, l.l));
  }
  /**
   * @ignore
   */
  _updateOpacitySliderGrip() {
    var t, r, a;
    const o = this.opacitySlider.startGrip.get("background");
    if (o) {
      const e = p.interpolate(this.get("colorOpacity", 1), this.get("backgroundColor", s(16777215)), this.get("color", s(16777215)));
      o.set("fill", e), (t = o.states.lookup("default")) === null || t === void 0 || t.set("fill", e), (r = o.states.lookup("hover")) === null || r === void 0 || r.set("fill", e), (a = o.states.lookup("down")) === null || a === void 0 || a.set("fill", e);
    }
  }
  /**
   * Cancels color selection and restores previous color.
   */
  cancel() {
    var t;
    (t = this.get("colorButton")) === null || t === void 0 || t.setAll({
      color: this._previousColor,
      colorOpacity: this._previousOpacity
    }), this._isEditing = !1, this._isPicking = !1, this.set("color", this._previousColor), this.set("colorButton", void 0);
  }
}
v.className = "ColorPicker";
v.classNames = h.classNames.concat([v.className]);
class w extends h {
  constructor() {
    super(...arguments), this.noColorGraphics = this.children.push(_.new(this._root, {
      themeTags: ["nocolor"]
    })), this.icon = this.children.push(_.new(this._root, {
      themeTags: ["icon"]
    }));
  }
  _afterNew() {
    this._defaultThemes.push(O.new(this._root)), this.addTag("colorpickerbutton"), super._afterNew(), this.set("background", m.new(this._root, {
      themeTags: ["background"]
    }));
  }
  _changed() {
    if (super._changed(), this.isDirty("color") || this.isPrivateDirty("color") || this.isDirty("colorOpacity") || this.isDirty("backgroundColor")) {
      let t = this.get("color", this.getPrivate("color")), r = this.get("colorOpacity", 1);
      t ? this.noColorGraphics.hide() : this.noColorGraphics.show();
      const a = this.get("backgroundColor", s(16777215));
      t || (t = a);
      let o = t, e = -0.1;
      a.toHSL().l < 0.5 && (e = -e), o = p.lighten(t, e), this.noColorGraphics.set("stroke", o);
      const l = this.get("background");
      l && l.setAll({
        fill: t,
        stroke: o,
        fillOpacity: r,
        strokeOpacity: Math.max(0.2, r)
      }), this.icon.set("stroke", p.alternative(o, this._root.interfaceColors.get("alternativeText"), this._root.interfaceColors.get("text")));
    }
  }
}
w.className = "ColorPickerButton";
w.classNames = h.classNames.concat([w.className]);
export {
  v as ColorPicker,
  w as ColorPickerButton
};
