import { at as o, ae as e, w as t, af as r, U as i, ag as n, ah as l, ai as a, aj as s, au as m, ak as p, al as c, a6 as d } from "./index-6d97e67f.js";
import "./lodash-226cb5b1.js";
import { lA as h, lR as g, lS as j } from "./ant-design-icons-a81e6d18.js";
import "./loglevel-5e7e37fc.js";
import u, { memo as v, useState as y, useEffect as x, useRef as w } from "react";
import { d as f } from "./styled-components-b776227d.js";
import { S as C } from "./Segmented-c92ef663.js";
import { L as b, D as S } 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 $ = [{ name: "color", label: "Color", depName: "color", depType: p.CONTRAST_TEXT, transformer: c }, { name: "textSize", label: "Size", textSize: "30px" }], k = [{ value: "normal", label: "Normal" }, { value: "hover", label: "Hover" }], z = { option: o, iconStyle: e($, "iconStyle"), countColor: t(r, "#fff"), countBgColor: t(r, "red"), itemTextSize: t(d, "14px"), itemTextWeight: t(d, "normal"), itemColor: t(r, "#222222"), itemIconWidth: t(d, "50px"), itemHoverTextWeight: t(d, "normal"), itemHoverColor: t(r, "#222222"), itemHoverBackgroundColor: r }, W = f.div`
  @media (max-width: 360px) {
    width: 15px;
    height: 15px;
  }
  width: ${(o2) => o2.$iconStyle.textSize};
  height: ${(o2) => o2.$iconStyle.textSize};
  line-height: ${(o2) => o2.$iconStyle.textSize};
  color: ${(o2) => o2.$iconStyle.color};
`, B = f.div`
  ul {
    gap: 10px;

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

  .ant-list-item-meta {
    display: flex;
    gap: 8px;
  }
  &:hover {
    background-color: ${(o2) => {
  var _a, _b;
  return ((_a = o2.$style) == null ? void 0 : _a.hoverBgColor) ? ((_b = o2.$style) == null ? void 0 : _b.hoverBgColor) + "!important" : void 0;
}};
    color: ${(o2) => {
  var _a;
  return (_a = o2.$style) == null ? void 0 : _a.hoverColor;
}};
  }
`, V = f.div`
  position: relative;
  .icon-notify {
    width: 100%;
    height: 100%;
  }
`, H = f.div`
  position: absolute;
  right: 0;
  top: 0;
  font-size: 10px;
  color: ${(o2) => o2.$countStyle.color};
  width: 50%;
  height: 40%;
  border-radius: 50%;
  background-color: ${(o2) => o2.$countStyle.bgColor};
  display: flex;
  justify-content: center;
  align-items: center;
  @media (max-width: 360px) {
    font-size: 10px;
  }
  @media (min-width: 360px) and (max-width: 768px) {
    font-size: 11px;
  }
`, E = v((o2) => {
  var _a;
  const [e2, t2] = y(false), [r2, i2] = y(window.innerWidth);
  const n2 = () => {
    i2(window.innerWidth);
  };
  x(() => (window.addEventListener("resize", n2), () => {
    window.removeEventListener("resize", n2);
  }), []);
  const l2 = w(null);
  var a2;
  x(() => {
    function o3(o4) {
      a2.current && !a2.current.contains(o4.target) && t2(false);
    }
    return document.addEventListener("mouseup", o3), () => {
      document.removeEventListener("mouseup", o3);
    };
  }, [a2 = l2]);
  const s2 = (_a = o2.option) == null ? void 0 : _a.map((e3, t3) => ({ key: t3, label: h(T, { $style: { align: e3.align, color: o2.itemColor, fontSize: o2.itemTextSize, fontWeight: o2.itemTextWeight, iconWidth: o2.itemIconWidth, hoverColor: o2.itemHoverColor, hoverBgColor: o2.itemHoverBackgroundColor }, onClick: () => e3.onEvent("click"), children: h(b.Item.Meta, { avatar: e3.icon, title: e3.label, description: e3.content }) }, e3.label) }));
  return h(W, { onClick: () => t2(!e2), ref: l2, $iconStyle: o2.iconStyle, children: h(S, { menu: { items: s2 }, popupRender: (o3) => h(B, { children: u.cloneElement(o3) }), open: e2, children: g(V, { children: [h("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", strokeWidth: 1.5, stroke: "currentColor", className: "icon-notify", children: h("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M14.857 17.082a23.848 23.848 0 0 0 5.454-1.31A8.967 8.967 0 0 1 18 9.75V9A6 6 0 0 0 6 9v.75a8.967 8.967 0 0 1-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 0 1-5.714 0m5.714 0a3 3 0 1 1-5.714 0" }) }), o2.option.length > 0 && h(H, { $countStyle: { color: o2.countColor, bgColor: o2.countBgColor }, children: h("span", { children: o2.option.length }) })] }) }) });
}), I = s(new i(z, (o2) => {
  const e2 = n({ ...o2 }, "NotifyComp");
  return h(E, { ...e2 });
}).setPropertyViewFn((o2) => {
  const [e2, t2] = y("normal");
  return g(j, { children: [h(l, { name: "Basic", children: o2.option.propertyView({}) }), h(l, { name: "Icon", children: o2.iconStyle.getPropertyView() }), g(l, { name: "Counter", children: [o2.countColor.propertyView({ label: "Color" }), o2.countBgColor.propertyView({ label: "Background Color" })] }), g(l, { name: "Notify Items", children: [a({}, h(C, { block: true, options: k, value: e2, onChange: (o3) => t2(o3) })), "normal" === e2 && o2.itemTextSize.propertyView({ label: "Font Size" }), "normal" === e2 && o2.itemColor.propertyView({ label: "Font Color" }), "normal" === e2 && o2.itemTextWeight.propertyView({ label: "Font Weight" }), "normal" === e2 && o2.itemIconWidth.propertyView({ label: "Icon Width" }), "hover" === e2 && o2.itemHoverColor.propertyView({ label: "Font Color" }), "hover" === e2 && o2.itemHoverBackgroundColor.propertyView({ label: "Background Color" })] })] });
}).build(), [new m("option", "")]);
export {
  I as NotifyComp
};
