import { ad as e, ae as o, w as t, af as r, U as i, ag as s, ah as a, ai as n, aj as m, ak as l, al as p, a6 as c } from "./index-6d97e67f.js";
import "./lodash-226cb5b1.js";
import { lR as d, lA as h, lS as j } from "./ant-design-icons-a81e6d18.js";
import "./loglevel-5e7e37fc.js";
import u, { memo as g, useState as x, useRef as v, useEffect as y } from "react";
import { d as w } from "./styled-components-b776227d.js";
import { S as f } from "./Segmented-c92ef663.js";
import { D as $ } from "./antd-eb0b81b8.js";
import "./axios-0ffd51b8.js";
import "./redux-devtools-36ca30b8.js";
import "./alasql-f59e855e.js";
import "./react-router-38313ddc.js";
import "./fontawesome-7bcd29b1.js";
import "react-dom";
import "./dnd-kit-e0a0bf75.js";
import "./moment-d731d247.js";
import "./crypto-js-8020edb5.js";
import "./dayjs-63343308.js";
import "./numbro-48e81844.js";
import "./papaparse-088c0adc.js";
import "./uuid-82f303b2.js";
import "./supabase-6aa220db.js";
import "./websockets-80729b50.js";
import "./fetch-03ca8116.js";
import "./react-draggable-1ced44e5.js";
import "./clsx-b06d39d3.js";
import "./remark-gfm-72b87c7d.js";
import "./buffer-f89d742d.js";
import "./rehype-raw-49057806.js";
import "./parse5-31d0cb5d.js";
import "./rehype-sanitize-38a120e4.js";
import "./simplebar-react-a37a9b2a.js";
import "./react-best-gradient-color-picker-2e7ff36d.js";
import "./ua-parser-js-1d18a3f8.js";
import "./codemirror-8fe65581.js";
import "./really-relaxed-json-e5391d6a.js";
import "./immer-c0428a8d.js";
import "./redux-saga-3b3a9c7b.js";
import "./hotkeys-js-216206c9.js";
import "./cnchar-8c3eaa86.js";
import "./react-documents-a03b99c9.js";
import "./sql-formatter-69e8df59.js";
import "./rc-trigger-7d152aa4.js";
import "./react-json-view-364658b4.js";
import "./qrcode-react-417e3716.js";
import "./katex-05fb1c31.js";
import "./ecogis-maps-10e82de5.js";
import "./devextreme-be18bda8.js";
import "./exceljs-1678d36b.js";
import "./file-saver-es-c18fae8f.js";
const b = [{ name: "color", label: "Color", depName: "color", depType: l.CONTRAST_TEXT, transformer: p }, { name: "textSize", label: "Size", textSize: "30px" }], C = [{ value: "normal", label: "Normal" }, { value: "hover", label: "Hover" }], S = { options: e, iconStyle: o(b, "iconStyle"), itemTextSize: t(c, "14px"), itemTextWeight: t(c, "normal"), itemColor: t(r, "#222222"), itemIconWidth: t(c, "50px"), itemIconRadius: t(c, "0"), itemHoverTextWeight: t(c, "normal"), itemHoverColor: t(r, "#222222"), itemHoverBackgroundColor: r }, k = w.div`
  @media (max-width: 360px) {
    width: 15px;
    height: 15px;
  }
  width: ${(e2) => e2.$iconStyle.textSize};
  height: ${(e2) => e2.$iconStyle.textSize};
  line-height: ${(e2) => e2.$iconStyle.textSize};
  color: ${(e2) => e2.$iconStyle.color};
`, I = w.div`
  ul {
    display: flex;
    gap: 10px;

    li {
      padding: 0 !important;
    }
  }
`, z = w.div`
  text-align: ${(e2) => {
  var _a;
  return ((_a = e2.$style) == null ? void 0 : _a.align) || "left";
}};
  padding: 5px;
  font-weight: ${(e2) => {
  var _a, _b;
  return ((_a = e2.$style) == null ? void 0 : _a.fontWeight) ? ((_b = e2.$style) == null ? void 0 : _b.fontWeight) + "!important" : void 0;
}};

  img {
    border-radius: ${(e2) => {
  var _a, _b;
  return ((_a = e2.$style) == null ? void 0 : _a.iconRadius) ? (_b = e2.$style) == null ? void 0 : _b.iconRadius : void 0;
}};
  }

  p {
    color: ${(e2) => {
  var _a;
  return (_a = e2.$style) == null ? void 0 : _a.color;
}};
  }
  &:hover {
    background-color: ${(e2) => {
  var _a, _b;
  return ((_a = e2.$style) == null ? void 0 : _a.hoverBgColor) ? ((_b = e2.$style) == null ? void 0 : _b.hoverBgColor) + "!important" : void 0;
}};
    p {
      color: ${(e2) => {
  var _a;
  return (_a = e2.$style) == null ? void 0 : _a.hoverColor;
}};
    }
  }
  .menuItem-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: ${(e2) => {
  var _a;
  return (_a = e2.$style) == null ? void 0 : _a.fontSize;
}};
  }
  .menuItem-img {
    width: ${(e2) => {
  var _a;
  return (_a = e2.$style) == null ? void 0 : _a.iconWidth;
}};
    height: 50px;
  }
  @media (max-width: 360px) {
    .menuItem-text {
      font-size: 8px;
    }
    .menuItem-img {
      width: 20px;
      height: 20px;
    }
  }
  @media (min-width: 360px) and (max-width: 768px) {
    .menuItem-text {
      font-size: 10px;
    }
    .menuItem-img {
      width: "30px";
      height: "30px";
    }
  }
`, W = g((e2) => {
  var _a;
  const [o2, t2] = x(false);
  const r2 = v(null);
  var i2;
  y(() => {
    function e3(e4) {
      i2.current && !i2.current.contains(e4.target) && t2(false);
    }
    return document.addEventListener("mouseup", e3), () => {
      document.removeEventListener("mouseup", e3);
    };
  }, [i2 = r2]);
  const s2 = (_a = e2.options) == null ? void 0 : _a.map((o3, t3) => ({ key: t3, label: d(z, { $style: { align: o3.align, color: e2.itemColor, fontSize: e2.itemTextSize, fontWeight: e2.itemTextWeight, iconWidth: e2.itemIconWidth, iconRadius: e2.itemIconRadius, hoverColor: e2.itemHoverColor, hoverBgColor: e2.itemHoverBackgroundColor }, onClick: () => o3.onEvent("click"), children: ["" != (o3 == null ? void 0 : o3.icon) && h("img", { className: "menuItem-img", src: o3 == null ? void 0 : o3.icon, alt: "" }), h("p", { className: "menuItem-text", children: o3 == null ? void 0 : o3.label })] }, o3.label) }));
  return h(k, { onClick: () => t2(!o2), ref: r2, $iconStyle: e2.iconStyle, children: h($, { menu: { items: s2 }, popupRender: (e3) => h(I, { children: u.cloneElement(e3) }), open: o2, children: h("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", strokeWidth: 1.5, stroke: "currentColor", children: h("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M3.75 6A2.25 2.25 0 0 1 6 3.75h2.25A2.25 2.25 0 0 1 10.5 6v2.25a2.25 2.25 0 0 1-2.25 2.25H6a2.25 2.25 0 0 1-2.25-2.25V6ZM3.75 15.75A2.25 2.25 0 0 1 6 13.5h2.25a2.25 2.25 0 0 1 2.25 2.25V18a2.25 2.25 0 0 1-2.25 2.25H6A2.25 2.25 0 0 1 3.75 18v-2.25ZM13.5 6a2.25 2.25 0 0 1 2.25-2.25H18A2.25 2.25 0 0 1 20.25 6v2.25A2.25 2.25 0 0 1 18 10.5h-2.25a2.25 2.25 0 0 1-2.25-2.25V6ZM13.5 15.75a2.25 2.25 0 0 1 2.25-2.25H18a2.25 2.25 0 0 1 2.25 2.25V18A2.25 2.25 0 0 1 18 20.25h-2.25A2.25 2.25 0 0 1 13.5 18v-2.25Z" }) }) }) });
}), H = m(new i(S, (e2) => {
  const o2 = s({ ...e2 }, "HeaderMenuComp");
  return h(W, { ...o2 });
}).setPropertyViewFn((e2) => {
  const [o2, t2] = x("normal");
  return d(j, { children: [h(a, { name: "Basic", children: e2.options.propertyView({}) }), h(a, { name: "Icon", children: e2.iconStyle.getPropertyView() }), d(a, { name: "Menu Items", children: [n({}, h(f, { block: true, options: C, value: o2, onChange: (e3) => t2(e3) })), "normal" === o2 && e2.itemTextSize.propertyView({ label: "Font Size" }), "normal" === o2 && e2.itemColor.propertyView({ label: "Font Color" }), "normal" === o2 && e2.itemTextWeight.propertyView({ label: "Font Weight" }), "normal" === o2 && e2.itemIconWidth.propertyView({ label: "Icon Width" }), "normal" === o2 && e2.itemIconRadius.propertyView({ label: "Icon Radius" }), "hover" === o2 && e2.itemHoverColor.propertyView({ label: "Font Color" }), "hover" === o2 && e2.itemHoverBackgroundColor.propertyView({ label: "Background Color" })] })] });
}).build(), []);
export {
  H as HeaderMenuComp
};
