import { cr as e, jK as o, gA as t, d_ as n, av as r, g5 as a, dU as i, jL as l, jM as s, Y as d, g6 as c, gh as p, jN as m, ji as h, ed as u, jO as g, dW as f, jP as x, jQ as y, fD as v, jR as b, jS as w, j9 as j, fQ as T, jT as I, ez as k, dV as C, jU as D, jV as $, jW as N, jr as S, js as P, ft as L, fv as E, gc as F, gd as O, jX as A, fC as M, cu as z, eE as _, eN as B, fF as V, jY as U, jZ as R, gK as H, fE as G, eL as K, j_ as q, j$ as Q, e3 as W, fu as Y, k0 as J, k1 as X, k2 as Z, k3 as ee, k4 as oe, fr as te, ja as ne, fn as re, fI as ae, eB as ie, iA as le, k5 as se, fo as de, d$ as ce, k6 as pe, k7 as me, k8 as he, k9 as ue, g3 as ge } from "./index-df8c00b4.js";
import fe, { useContext as xe, createContext as ye, useState as ve, useMemo as be, useEffect as we, useCallback as je } from "react";
import { lA as Te, lS as Ie, lR as ke } from "./ant-design-icons-b1480d8d.js";
import { S as Ce } from "./Segmented-63c0bebe.js";
import { l as De, d as $e } from "./styled-components-1e696d6b.js";
import { f as Ne, _ as Se } from "./lodash-f1e42446.js";
import "./loglevel-6fb66d22.js";
import { g as Pe } from "./enterpriseSelectors-1897ddd8.js";
import { f as Le } from "./folderSelector-82f1bcf3.js";
import { D as Ee } from "./DraggableTree-f6881ca2.js";
import { a as Fe } from "./axios-84bb1c75.js";
import "./redux-devtools-d38e5b33.js";
import "./alasql-0ff6dabf.js";
import "./react-router-a1807b5b.js";
import "./antd-04a23d13.js";
import "react-dom";
import "./dayjs-844325ae.js";
import "./fontawesome-2445f580.js";
import "./dnd-kit-56a2f36f.js";
import "./numbro-c1edb412.js";
import "./papaparse-1bac8e5f.js";
import "./uuid-82f303b2.js";
import "./supabase-c27c62e3.js";
import "./fetch-a3c8ad94.js";
import "./react-draggable-60f59f09.js";
import "./remark-gfm-f2973785.js";
import "./buffer-d3713d77.js";
import "./rehype-raw-41b6145f.js";
import "./parse5-6476676e.js";
import "./rehype-sanitize-deb53e9a.js";
import "./simplebar-react-e1b123a3.js";
import "./react-best-gradient-color-picker-4dd60dac.js";
import "./ua-parser-js-094f59ba.js";
import "./clsx-469c2c43.js";
import "./crypto-js-d5eac8ba.js";
import "./codemirror-73d8c217.js";
import "./really-relaxed-json-49b6a70d.js";
import "./immer-c0428a8d.js";
import "./redux-saga-5514e228.js";
import "./hotkeys-js-0dddb21a.js";
import "./cnchar-5678e6bc.js";
import "./react-documents-eb6de859.js";
import "./sql-formatter-69e8df59.js";
import "./rc-trigger-5125aafe.js";
import "./react-json-view-9403d8a1.js";
import "./qrcode-react-cb73d2b6.js";
import "./katex-a34f0265.js";
import "./ecogis-maps-bb0d63f9.js";
import "./devextreme-2fa5bb9a.js";
const Oe = (e2) => Te(a, { children: Te("div", { style: { paddingBottom: "10px" }, children: e2.children }) });
function Ae(a2) {
  const { uiComp: i2 } = a2, l2 = xe(e), s2 = l2.selectedCompNames, d2 = l2.selectedComp(), c2 = i2 == null ? void 0 : i2.getModuleLayoutComp();
  let p2;
  return d2 ? Te(Ie, { children: d2.getPropertyView() }) : (p2 = s2.size > 1 ? Te(o, { comps: Array.from(s2), onChange: (e2) => {
    l2.setSelectedCompNames(/* @__PURE__ */ new Set([e2]));
  }, delete: () => {
    t.deleteComp(l2, l2.selectedComps());
  } }) : c2 ? c2.getPropertyView() : Te(n, { style: { margin: 16 }, text: r("rightPanel.noSelectedComps") }), Te(Oe, { children: p2 }));
}
const Me = ye({ searchValue: "", onDrag: () => {
} }), ze = De`
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  perspective: 1000px;
  transform-style: preserve-3d;
`, _e = $e.div`
  ${ze};
  padding: 3px;
  background: #ffffff;
  border: 1px solid #d7d9e0;
  border-radius: 4px;
  height: ${(e2) => e2.$h}px;
  width: ${(e2) => e2.$w}px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: grab;
  transition: all 0.2s ease-in-out;

  &:active {
    background: #f2f4f8;
  }

  &:hover {
    ${ze};
    padding: 0;
    transform: scale(1.05);
    transition: all 0.2s ease;
    border: 1px solid #b3c4ff;
    box-shadow: 0 0 5px 0 rgba(51, 119, 255, 0.15);
    transform-style: preserve-3d;
    backface-visibility: hidden;
  }
  
  ${(e2) => e2.$isSelected && `
    ${ze};
    padding: 0;
    transform: scale(1.05);
    transition: all 0.2s ease;
    border: 2px solid #b3c4ff;
    box-shadow: 0 0 5px 0 rgba(51, 119, 255, 0.15);
    transform-style: preserve-3d;
    backface-visibility: hidden;
  `}

  ${(e2) => e2.$color && `
    svg > *[fill='#B480DE'] {
      fill: ${e2.$color};
    }
    svg > *[stroke='#B480DE'] {
      stroke: ${e2.$color};
    }
  `}
`, Be = $e.div`
  padding: 0 16px;
`, Ve = $e.div`
  padding-top: 4px;
  margin-bottom: 12px;
`, Ue = () => {
  const e2 = r("docUrls.aboutUs"), o2 = r("lowcoderUrl.createIssue");
  return Te(n, { text: ke(Ie, { children: [r("rightPanel.searchNotFound"), e2 && ke(Ie, { children: [Te("br", {}), Te(l, { target: "_blank", href: e2, children: r("rightPanel.contactUs") })] }), Te("br", {}), Te("br", {}), r("help.submitIssue"), Te("br", {}), o2 && Te(l, { target: "_blank", href: o2, children: r("rightPanel.issueHere") })] }) });
}, Re = $e.span`
  ${i};
  font-weight: 500;
  font-size: 14px;
  color: #8b8fa3;
  line-height: 22px;
  display: block;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
`, He = $e.div`
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 64px;
  margin-top: 4px;
`, Ge = $e.div`
  ${i};
  line-height: 15px;
  display: table;
  margin: 3px auto 0;
  color: #333333;
  text-align: center;
  word-break: keep-all;
`, Ke = $e.span`
  ${i};
  line-height: 14px;
  font-size: 12px;
  display: table;
  margin: 4px auto auto;
  color: #8b8fa3;
  text-align: center;
  word-spacing: 99px;
`, qe = $e.div`
  display: inline-block;
  border-radius: 4px;

  &:hover + ${Ge} {
    color: #315efb;
  }
`, Qe = (e2) => {
  var _a;
  const { Icon: o2 } = e2, t2 = f(Pe);
  return Te(_e, { $w: 64, $h: 64, $color: (_a = t2 == null ? void 0 : t2.config_set) == null ? void 0 : _a.mainBrandingColor, children: Te(o2, {}) });
}, We = $e.div`
  width: 296px;
  display: flex;
  flex-wrap: wrap;
  padding: 4px 0 0 0;
  box-sizing: border-box;
  gap: 8px;
`, Ye = $e.div`
  .section-header {
    margin-left: 0;
  }
  &:not(:last-child){
    border-bottom: 1px solid #e1e3eb;
  }
`, Je = "UICompSections", Xe = { [Je]: {} };
Object.keys(s).forEach((e2) => {
  const o2 = s[e2];
  Xe[Je][o2] = o2 === s.layout;
});
const Ze = () => {
  const { onDrag: e2, searchValue: o2 } = xe(Me), [t2, n2] = ve(Xe), [r2, a2] = ve({}), i2 = be(() => {
    const e3 = Object.fromEntries(Object.keys(s).map((e4) => [e4, []]));
    return Object.entries(d).forEach(([o3, t3]) => {
      t3.categories.forEach((n3) => {
        e3[n3].push([o3, t3]);
      });
    }), e3;
  }, []), l2 = be(() => {
    const e3 = o2 ? a2 : n2;
    return { compName: Je, state: o2 ? r2 : t2, toggle: (o3, t3) => {
      e3((e4) => {
        const n3 = { ...e4 }, r3 = n3[o3] || {};
        return r3[t3] = false === r3[t3], n3[o3] = r3, n3;
      });
    } };
  }, [o2, t2, r2]);
  we(() => {
    o2 || a2({});
  }, [o2]);
  const f2 = be(() => Object.entries(i2).map(([t3, n3], r3) => {
    let a3 = n3;
    if (!Ne.isEmpty(o2)) {
      const e3 = o2.trim().toLocaleLowerCase();
      a3 = a3.filter((o3) => o3[1].keywords.toLowerCase().includes(e3.toLowerCase()));
    }
    return Ne.isEmpty(a3) ? null : Te(Ye, { children: Te(c, { noMargin: true, width: 288, name: s[t3], children: Te(We, { children: a3.map((o3) => ke(He, { className: "table" === o3[0] ? p : "", children: [Te(qe, { draggable: true, onDragStart: (t4) => {
      t4.dataTransfer.setData("compType", o3[0]), t4.dataTransfer.setDragImage(m, 0, 0), h.setData("compType", o3[0]), e2(o3[0]);
    }, children: Te(Qe, { Icon: o3[1].icon }) }), Te(Ge, { children: o3[1].name }), "en" !== u && Te(Ke, { children: o3[1].enName })] }, o3[0])) }) }) }, r3);
  }).filter((e3) => null != e3), [i2, o2, e2]);
  return f2.length ? Te(Be, { children: Te(g.Provider, { value: l2, children: f2 }) }) : Te(Be, { children: Te(Ue, {}) });
};
var eo = ((e2) => (e2[e2.All = 0] = "All", e2[e2.Application = 1] = "Application", e2[e2.Module = 2] = "Module", e2[e2.NavLayout = 3] = "NavLayout", e2[e2.Folder = 4] = "Folder", e2[e2.MobileTabLayout = 6] = "MobileTabLayout", e2[e2.Navigation = 7] = "Navigation", e2))(eo || {});
const oo = { [eo.All]: { name: r("home.all"), icon: x }, [eo.Application]: { name: r("home.app"), icon: y }, [eo.Module]: { name: r("home.module"), icon: v }, [eo.Navigation]: { name: r("home.navigation"), icon: b }, [eo.NavLayout]: { name: r("home.navLayout"), icon: b, desc: r("home.navLayoutDesc") }, [eo.Folder]: { name: r("home.folder"), icon: w }, [eo.MobileTabLayout]: { name: r("home.mobileTabLayout"), icon: b, desc: r("home.mobileTabLayoutDesc") } };
$e.div`
  font-size: 13px;
  color: #333333;
  line-height: 13px;
  margin-bottom: 8px;
`;
const to = $e.span`
  margin: 0 8px;
  cursor: pointer;
  color: ${I};

  &:hover {
    color: ${k};
  }
`;
function no(e2, o2) {
  const t2 = C(), { currentUser: n2, isCreating: a2 } = f((e3) => ({ currentUser: e3.ui.users.user, isCreating: e3.ui.application.loadingStatus.isApplicationCreating })), i2 = f(D), l2 = oo[e2].name;
  return [je(() => {
    if (a2)
      return;
    const l3 = i2.filter((o3) => !e2 || e2 === o3.applicationType).map((e3) => e3.name), s2 = $(((e3, o3 = T.Application) => o3 === T.NavLayout ? r("home.newNavLayout", { userName: e3, name: Ne.toLower(oo[o3].name) }) : r("home.newApp", { userName: e3, name: Ne.toLower(oo[o3].name) }))(n2.username, e2), l3);
    let d2 = {};
    e2 === T.Module ? d2 = { ui: { compType: "module", comp: {} } } : e2 === T.NavLayout && (d2 = { ui: { compType: "nav", comp: {} } }), t2(N({ applicationType: e2 || T.Application, applicationName: s2, orgId: n2.currentOrgId, dsl: d2, onSuccess: o2 || Se.noop }));
  }, [i2, n2.currentOrgId, n2.username, t2, a2, o2, e2]), a2, l2];
}
function ro(e2) {
  const { type: o2, onSuccess: t2 } = e2, [n2, a2, i2] = no(o2, t2);
  return Te(to, { onClick: n2, children: a2 ? r("createAppButton.creating") : r("createAppButton.created", { name: i2 }) });
}
const ao = $e.div`
  display: flex;
  flex-direction: row;
  &:last-child {
    margin-bottom: 0;
  }
  .module-container {
      display: flex;
      width: 195px;
  }
  .module-icon {
    margin-right: 4px;
      width:19px;
      height: 19px;
  }
  .module-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    overflow: hidden;
  }
  .module-name {
    //flex-grow: 1;
    //margin-right: 8px;
    line-height: 1.5;
    font-size: 13px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
`;
function io(e2) {
  const o2 = "module", { meta: t2, isOverlay: n2, selectedID: a2, setSelectedID: i2, selectedType: l2, setSelectedType: s2, resComp: d2, id: c2, $level: p2 } = e2, u2 = C(), g2 = d2.isFolder, x2 = d2.name, [y2, b2] = ve(void 0), [w2, j2] = ve(false), T2 = f(E), I2 = g2 === l2 && c2 === a2;
  return Te(ao, { draggable: true, onDragStart: (n3) => {
    n3.stopPropagation(), n3.dataTransfer.setData("compType", o2), n3.dataTransfer.setDragImage(m, 0, 0), h.setData("compType", o2), h.setData("compLayout", t2.containerSize ? { w: t2.containerSize.width, h: t2.containerSize.height } : void 0), h.setData("compInitialValue", { appId: e2.meta.applicationId }), e2.onDrag(o2);
  }, children: ke("div", { className: "module-container", children: [Te(v, { className: "module-icon" }), ke("div", { style: { flexGrow: 1, maxWidth: 174 - 10 * p2 }, children: [Te(M, { style: { width: "100%" }, text: t2.name, forceClickIcon: false, disabled: !I2 || T2 || n2, onFinish: (e3) => {
    if ("" !== e3) {
      let o3 = false, t3 = x2;
      if (d2.rename ? (t3 = d2.rename(e3), o3 = !!t3) : (t3 = x2, o3 = true), o3) {
        i2(t3), s2(g2), b2(void 0);
        try {
          u2(G({ applicationId: a2, name: e3 }));
        } catch (e4) {
          throw e4;
        }
      }
      b2(void 0);
    }
    b2(void 0);
  }, onChange: (e3) => {
    b2("" === e3 ? "Cannot Be Empty" : void 0);
  }, onEditStateChange: (e3) => j2(e3) }), Te(z, { editorFocus: !!y2 && w2, title: y2 ? r("error") : "", content: y2, hasError: !!y2 })] })] }) });
}
const lo = $e.div`
  max-width: 100%;
  flex: 1;
  display: flex;
  padding-left: ${(e2) => 10 * e2.$level + (e2.$foldable ? 0 : 14)}px;
  border-radius: 4px;
  border: 1px solid ${(e2) => e2.$active ? S : "transparent"};
  align-items: center;
  justify-content: space-between;
`, so = $e.div`
  width: 100%;
  height: 25px;
  display: flex;
  user-select: none;
  padding-left: 2px;
  padding-right: 15px;
  background-color: ${(e2) => e2.$isOverlay ? "rgba(255, 255, 255, 0.11)" : ""};

  &&& {
    background-color: ${(e2) => e2.$color && !e2.$isOverlay ? "#f2f7fc" : null};
  }

  &:hover {
    background-color: #f2f7fc80;
    cursor: pointer;
  }

  .taco-edit-text-wrapper {
    width: 100%;
    height: 21px;
    line-height: 21px;
    color: #222222;
    margin-left: 0;
    font-size: 13px;
    padding-left: 0;

    &:hover {
      background-color: transparent;
    }
  }

  .taco-edit-text-input {
    width: 100%;
    height: 21px;
    line-height: 21px;
    color: #222222;
    margin-left: 0;
    font-size: 13px;
    background-color: #fdfdfd;
    border: 1px solid #3377ff;
    border-radius: 2px;

    &:focus {
      border-color: #3377ff;
      box-shadow: 0 0 0 2px #d6e4ff;
    }
  }
`, co = $e.div`
  width: 12px;
  height: 12px;
  display: flex;
  margin-right: 2px;
`, po = $e(K)`
  width: 16px;
  height: 16px;
  cursor: pointer;
  flex-shrink: 0;
  color: ${P};

  &:hover {
    color: #315efb;
  }
`;
function mo(e2) {
  const o2 = C(), { id: t2, resComp: n2, isOver: a2, isOverlay: i2, path: l2, isFolded: s2, selectedID: d2, setSelectedID: c2, selectedType: p2, setSelectedType: m2, onDelete: h2, onCopy: u2, onSelect: g2, onToggleFold: x2 } = e2, { onDrag: y2 } = xe(Me), [v2, b2] = ve(void 0), [w2, T2] = ve(false), I2 = f(E), k2 = l2.length - 1, D2 = n2.isFolder, $2 = n2.name, N2 = D2 === p2 && t2 === d2, S2 = D2;
  return Te(so, { onClick: () => {
    S2 && x2(), g2();
  }, $color: N2, $isOverlay: i2, children: ke(lo, { $active: a2 && S2, $level: k2, $foldable: S2, children: [S2 && Te(co, { children: Te(s2 ? O : F, {}) }), S2 ? ke(Ie, { children: [Te(A, { style: { marginRight: "4px" } }), ke("div", { style: { flexGrow: 1, marginRight: "8px", width: "calc(100% - 62px)" }, children: [Te(M, { text: $2, forceClickIcon: S2, disabled: !N2 || I2 || i2, onFinish: (e3) => {
    if ("" !== e3) {
      let r2 = false, a3 = $2;
      if (n2.rename ? (a3 = n2.rename(e3), r2 = !!a3) : (a3 = $2, r2 = true), r2) {
        c2(a3), m2(D2), b2(void 0);
        try {
          o2((t3 = { id: d2, name: e3 }, { type: j.UPDATE_FOLDER_INIT, payload: t3 }));
        } catch (e4) {
          throw e4;
        }
      }
      b2(void 0);
    }
    var t3;
  }, onChange: (e3) => {
    b2("" === e3 ? "Cannot Be Empty" : void 0);
  }, onEditStateChange: (e3) => T2(e3) }), Te(z, { editorFocus: !!v2 && w2, title: v2 ? r("error") : "", content: v2, hasError: !!v2 })] })] }) : Te(io, { onDrag: y2, meta: n2.module, isOverlay: i2, selectedID: d2, setSelectedID: c2, selectedType: p2, setSelectedType: m2, resComp: n2, id: t2, $level: k2 }, t2), !I2 && !i2 && Te(_, { del: () => h2(), children: Te(po, { tabIndex: -1 }) })] }) });
}
function ho() {
  const e2 = C();
  let o2 = f(Le);
  const t2 = f(L), { searchValue: a2 } = xe(Me), [i2, l2] = ve(""), [s2, d2] = ve(false);
  let c2 = "", p2 = "", m2 = "";
  const h2 = be(() => function(e3) {
    const o3 = e3[""] || [], t3 = {};
    let n2 = { name: "root", id: "", isFolder: true, children: [], rename: (e4) => n2.name = e4, checkName: (e4) => e4 };
    for (const e4 of o3)
      if (e4.folder) {
        t3[e4.folderId] = { name: e4.name, id: e4.folderId, isFolder: true, children: [], rename: (o4) => t3[e4.folderId].name = o4, checkName: (e5) => e5 };
        for (const o4 of e4.subApplications || [])
          if (o4 && o4.applicationType === T.Module) {
            const n3 = { name: o4.name, id: o4.applicationId, containerSize: o4.containerSize, isFolder: false, children: [], module: o4, rename: (e5) => n3.name = e5, checkName: (e5) => e5 };
            t3[e4.folderId].children.push(n3);
          }
      } else
        e4.applicationType === T.Module && (t3[e4.applicationId] = { name: e4.name, containerSize: e4.containerSize, id: e4.applicationId, isFolder: false, children: [], module: e4, rename: (o4) => t3[e4.applicationId].name = o4, checkName: (e5) => e5 });
    for (const e4 of o3)
      if (e4.folder) {
        const o4 = e4.parentFolderId;
        o4 && t3[o4] ? t3[o4].children.push(t3[e4.folderId]) : n2.children.push(t3[e4.folderId]);
      } else
        t3[e4.applicationId] && n2.children.push(t3[e4.applicationId]);
    return n2.children.sort((e4, o4) => e4.isFolder && !o4.isFolder ? -1 : !e4.isFolder && o4.isFolder ? 1 : 0), n2;
  }(o2), [o2]), u2 = je((e3) => v2(h2, e3), [h2]);
  const [g2, x2] = ve(a2);
  we(() => {
    const e3 = setTimeout(() => {
      x2(a2);
    }, 500);
    return () => clearTimeout(e3);
  }, [a2]), we(() => {
    var o3;
    t2 || e2((o3 = { name: g2, pageNum: 1, pageSize: 200 }, { type: j.FETCH_FOLDER_ELEMENTS_INIT, payload: o3 }));
  }, [e2, t2, g2]);
  const y2 = () => {
    try {
      "" !== p2 && e2((o3 = { sourceFolderId: c2, sourceId: p2, folderId: m2, moveFlag: true }, t3 = () => {
      }, n2 = () => {
      }, { type: j.MOVE_TO_FOLDER_INIT, payload: o3, onSuccessCallback: t3, onErrorCallback: n2 }));
    } catch (e3) {
      throw e3;
    } finally {
      m2 = "", p2 = "", c2 = "";
    }
    var o3, t3, n2;
  }, v2 = (e3, o3) => {
    if (e3) {
      if (e3.id === o3)
        return e3;
      for (const t3 of e3.children) {
        const e4 = v2(t3, o3);
        if (e4)
          return e4;
      }
    }
  }, b2 = (e3) => {
    const o3 = u2(e3.id), t3 = o3 == null ? void 0 : o3.isFolder, n2 = e3.children.map((e4) => b2(e4)).filter((e4) => !!e4), r2 = { id: o3 == null ? void 0 : o3.id, canDropBefore: (e4) => t3 ? e4 == null ? void 0 : e4.isFolder : !(e4 == null ? void 0 : e4.isFolder), canDropAfter: (e4) => !(!t3 && (e4 == null ? void 0 : e4.isFolder)), canDropIn: (e4) => !!t3 && (!e4 || !e4.isFolder), items: n2, data: o3, addSubItem(e4) {
      m2 = r2.id, y2();
    }, deleteItem(e4) {
      c2 = r2.id, p2 = r2.items[e4].id;
    }, addItem(e4) {
      m2 = r2.id, y2();
    }, moveItem(e4, o4) {
    } };
    return r2;
  }, w2 = be(() => b2(h2), [h2, u2, g2]);
  function I2(o3, t3, n2) {
    if (o3)
      if (n2.children.length)
        B.error(r("module.folderNotEmpty"));
      else
        try {
          e2((a3 = { folderId: t3, parentFolderId: "" }, i3 = () => {
            B.success(r("home.deleteSuccessMsg"));
          }, l3 = () => {
            B.error(r("error"));
          }, { type: j.DELETE_FOLDER_INIT, payload: a3, onSuccessCallback: i3, onErrorCallback: l3 }));
        } catch (e3) {
          throw e3;
        }
    else
      try {
        V.confirm({ title: r("home.moveToTrash"), content: U("home.moveToTrashSubTitle", { type: "", name: "This file" }), onConfirm: () => {
          e2(R({ applicationId: t3, folderId: "" }, () => {
            B.success(r("success"));
          }, () => {
            B.error(r("error"));
          }));
        }, confirmBtnType: "delete", okText: r("home.moveToTrash"), onCancel: () => {
        } });
      } catch (e3) {
        throw e3;
      }
    var a3, i3, l3;
  }
  return ke(Ie, { children: [Te(Re, { children: r("rightPanel.moduleListTitle") }), (w2 == null ? void 0 : w2.items.length) ? Te(Ee, { node: w2, disable: !!a2, unfoldAll: !!a2, showSubInDragOverlay: false, showDropInPositionLine: false, showPositionLineDot: true, positionLineDotDiameter: 4, positionLineHeight: 1, itemHeight: 25, positionLineIndent: (e3, o3) => {
    const t3 = 2 + 30 * (e3.length - 1);
    return o3 ? t3 + 12 : t3;
  }, renderItemContent: (e3) => {
    const { node: o3, onToggleFold: t3, onDelete: n2, ...r2 } = e3, a3 = o3.data;
    if (!a3)
      return null;
    const c3 = a3.id, p3 = a3.isFolder;
    return Te(mo, { id: c3, node: o3, resComp: a3, onToggleFold: t3, onCopy: () => {
    }, onSelect: () => function(e4, o4) {
      l2(o4), d2(e4);
    }(p3, c3), selectedID: i2, setSelectedID: l2, selectedType: s2, setSelectedType: d2, onDelete: () => {
      I2(p3, c3, a3);
    }, ...r2 }, c3);
  } }) : Te(n, { text: ke(Ie, { children: [Te("p", { children: r("rightPanel.emptyModules") }), !t2 && Te(ro, { type: T.Module, onSuccess: (e3) => {
    const o3 = e3.applicationInfoView.applicationId, t3 = H(o3, "edit");
    window.open(t3);
  } })] }) })] });
}
const uo = $e.div`
  display: flex;
  flex-direction: row;
  margin-bottom: 12px;
  &:last-child {
    margin-bottom: 0;
  }
  &:hover {
    cursor: grab;
    .module-icon {
      box-shadow: 0 0 5px 0 rgba(49, 94, 251, 0.15);
      border-color: ${q};
      transform: scale(1.2);
    }
    .module-name {
      color: ${k};
    }
  }
  .module-icon {
    transition: all 200ms linear;
    margin-right: 8px;
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid ${Q};
    border-radius: 4px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .module-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    overflow: hidden;
  }
  .module-name {
    line-height: 1.5;
    font-size: 13px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .module-desc {
    line-height: 1.5;
    font-size: 12px;
    color: ${W};
  }
`;
function go(e2) {
  const o2 = Y(), { packageName: t2, packageVersion: n2, compName: r2, compMeta: a2, onDrag: i2 } = e2, l2 = J("npm", t2, n2, r2), s2 = `${X}/${o2}/${t2}@${n2}/${a2.icon}`;
  return ke(uo, { draggable: true, onDragStart: (e3) => {
    e3.dataTransfer.setData("compType", l2), e3.dataTransfer.setDragImage(m, 0, 0), h.setData("compType", l2), h.setData("compLayout", a2.layoutInfo), i2(l2);
  }, children: [Te("div", { className: "module-icon", children: a2.icon ? Te("img", { alt: a2.name, src: s2 }) : Te(v, { width: "19px" }) }), ke("div", { className: "module-content", children: [Te("div", { className: "module-name", children: a2.name }), ke("div", { className: "module-desc", children: [a2.description || "No description.", " ", ke("span", { children: ["v", n2 || ""] })] })] })] });
}
const fo = $e.div`
  margin-bottom: 12px;
  .remove-btn {
    display: none;
  }
  &:hover {
    .remove-btn {
      display: block;
    }
  }
`, xo = $e.div`
  height: 22px;
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: 2px;
`, yo = $e.div`
  flex: 1;
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #b8b9bf;
`, vo = $e.div`
  padding-top: 4px;
  margin-bottom: 12px;
`;
function bo(e2) {
  var _a, _b;
  const { name: o2, onRemove: t2 } = e2, a2 = C(), i2 = Y(), { onDrag: l2, searchValue: s2 } = xe(Me), [d2, c2] = ve(false), p2 = Z((e3) => e3.npmPlugin.packageMeta[o2]), m2 = f((e3) => e3.npmPlugin.packageVersion[o2]), h2 = be(() => (p2 == null ? void 0 : p2.versions) || {}, [p2 == null ? void 0 : p2.versions]), u2 = ((_b = (_a = h2[m2]) == null ? void 0 : _a.lowcoder) == null ? void 0 : _b.comps) || {}, g2 = Object.keys(u2);
  we(() => {
    c2(true), Fe.get(`${ee}/${i2 || "none"}/${o2}`).then((e3) => {
      var t3, n2;
      e3.status >= 400 || (c2(false), a2((t3 = o2, n2 = e3.data, { type: j.PACKAGE_META_READY, payload: { [t3]: n2 } })));
    });
  }, [a2, o2]);
  const x2 = g2.filter((e3) => !s2 || -1 !== e3.toLowerCase().indexOf(s2.toLowerCase())), y2 = x2.length > 0;
  return ke(fo, { children: [ke(xo, { children: [Te(yo, { children: o2 }), Te(oe, { onClick: t2, className: "remove-btn", text: r("npm.removePluginBtnText") })] }), ke(vo, { children: [!y2 && Te(n, { text: d2 ? "Loading..." : "No components found." }), y2 && x2.map((e3) => Te(go, { onDrag: l2, compName: e3, compMeta: u2[e3], packageName: o2, packageVersion: m2 }, e3))] })] });
}
const wo = $e.div`
  display: flex;
  justify-content: center;
  margin-top: 24px;
  margin-bottom: 24px;
`;
function jo() {
  const e2 = C(), [o2, t2] = ve(false), [a2, i2] = ve(""), l2 = f(te), s2 = f(ne), d2 = f(L), c2 = be(() => ((s2 == null ? void 0 : s2.npmPlugins) || []).map((e3) => ({ name: re(e3), raw: e3 })), [s2 == null ? void 0 : s2.npmPlugins]), p2 = (o3) => {
    var t3;
    e2((t3 = { orgId: l2.currentOrgId, isPublicApp: d2, data: { key: "npmPlugins", value: o3 } }, { type: j.SET_COMMON_SETTING, payload: t3 }));
  }, m2 = () => {
    var _a;
    if (!a2)
      return;
    if (!de(a2))
      return void B.error(r("npm.invalidNpmPackageName"));
    if ((_a = s2.npmPlugins) == null ? void 0 : _a.find((e4) => re(e4) === re(a2)))
      return void B.error(r("npm.pluginExisted"));
    const e3 = ((s2 == null ? void 0 : s2.npmPlugins) || []).concat(a2);
    p2(e3), i2(""), t2(false);
  }, h2 = c2.map((e3) => Te(bo, { name: e3.name, onRemove: () => ((e4) => {
    var _a;
    const o3 = ((_a = s2 == null ? void 0 : s2.npmPlugins) == null ? void 0 : _a.filter((o4) => o4 !== e4)) || [];
    p2(o3);
  })(e3.raw) }, e3.name)), u2 = Te(n, { style: { marginBottom: 8 }, text: r("rightPanel.emptyPlugins") });
  return ke(Ie, { children: [Te(Re, { children: r("rightPanel.pluginListTitle") }), Te(Ve, { children: h2.length > 0 ? h2 : u2 }), Te(wo, { children: Te(ae, { icon: Te(ie, {}), buttonType: "blue", onClick: () => t2(true), children: r("npm.addPluginBtnText") }) }), ke(V, { centered: true, showOkButton: true, showCancelButton: true, title: r("npm.addPluginModalTitle"), open: o2, onOk: m2, onCancel: () => t2(false), children: [Te("span", { style: { display: "block", marginBottom: "4px" }, children: r("npm.pluginNameLabel") }), Te(le, { autoFocus: true, onPressEnter: () => {
    m2();
  }, onChange: (e3) => {
    i2(e3.target.value);
  }, value: a2 }), Te(se, { style: { marginTop: 8 }, href: r("docUrls.devNpmPlugin"), children: r("docUrls.devNpmPluginText") })] })] });
}
function To() {
  return ke(Be, { children: [Te(ho, {}), Te(jo, {})] });
}
const Io = $e.div`
  display: flex;
  flex-direction: column;
  height: 100%;
`, ko = $e.div`
  flex: 1;
  overflow: hidden;
`, Co = $e.div`
  padding: 0 16px;
  padding-bottom: 12px;
  .comp-panel-tab {
    margin-top: 16px;
  }
`, Do = [{ value: "ui", label: r("rightPanel.uiComponentTab") }, { value: "extension", label: r("rightPanel.extensionTab") }];
function $o(e2) {
  const { onCompDrag: o2 } = e2, [t2, n2] = ve(""), [i2, l2] = ve("ui");
  return ke(Io, { children: [ke(Co, { children: [Te(ce, { placeholder: r("rightPanel.searchPlaceHolder"), value: t2, onChange: (e3) => n2(e3.target.value), allowClear: true }), Te(Ce, { block: true, options: Do, value: i2, className: "comp-panel-tab", onChange: (e3) => l2(e3) })] }), Te(Me.Provider, { value: { searchValue: t2, onDrag: o2 }, children: Te(ko, { children: ke(a, { children: ["ui" === i2 && Te(Ze, {}), "extension" === i2 && Te(To, {})] }) }) })] });
}
const No = fe.memo(function(e2) {
  const { onTabChange: o2, showPropertyPane: t2, uiComp: n2 } = e2, a2 = n2 && n2.children.compType.getView(), i2 = a2 && ge(a2), [l2, s2] = ve("insert"), d2 = [{ key: "property", title: r("rightPanel.propertyTab"), icon: Te(pe, {}), content: Te(Ae, { uiComp: n2 }) }];
  return i2 || d2.push({ key: "insert", title: r("rightPanel.createTab"), icon: Te(me, {}), content: Te($o, { onCompDrag: e2.onCompDrag }) }), we(() => {
    const e3 = i2 || t2 ? "property" : "insert";
    e3 !== l2 && s2(e3);
  }, [t2, i2, l2]), Te(he, { className: "cypress-right-content", children: Te(ue, { onChange: (e3) => {
    o2(e3);
  }, tabsConfig: d2, activeKey: l2 }) });
});
export {
  No as default
};
