import { a8 as e, jz as o, fr as t, dM as n, ac as r, dc as a, dG as i, jA as l, jB as s, N as d, eX as c, f6 as p, jC as m, ik as h, jD as u, jE as g, jF as f, jG as x, et as b, jH as y, jI as v, i9 as w, eG as j, jJ as I, hJ as T, dH as C, dI as k, jK as D, jL as N, ix as $, hK as L, hL as P, ej as S, jM as F, el as E, f1 as O, f2 as A, jN as M, es as z, ab as V, fK as B, e0 as _, ev as U, jd as R, je as G, fC as H, eu as K, fL as q, jO as J, jP as W, dR as X, ek as Y, jQ as Q, jR as Z, jS as ee, jT as oe, jU as te, eh as ne, ia as re, ed as ae, ey as ie, hN as le, hp as se, jV as de, ee as ce, dN as pe, jW as me, jX as he, jY as ue, jZ as ge, eV as fe } from "./index-f927b013.js";
import xe, { useContext as be, createContext as ye, useState as ve, useMemo as we, useEffect as je, useCallback as Ie } from "react";
import { lz as Te, lJ as Ce, lI as ke } from "./ant-design-icons-6bfdc7d5.js";
import { o as De } from "./antd-2abdded3.js";
import { u as Ne, a as $e } from "./styled-components-7cfa37e6.js";
import { l as Le, _ as Pe } from "./lodash-b5661970.js";
import "./loglevel-b4003767.js";
import { a as Se } from "./folderSelector-e6108de8.js";
import { D as Fe } from "./DraggableTree-a141a05a.js";
import { a as Ee } from "./axios-04f95181.js";
import "./redux-devtools-8dd21e4f.js";
import "./alasql-f60045ee.js";
import "./fontawesome-3904a214.js";
import "react-dom";
import "./dnd-kit-8227a2db.js";
import "./moment-059406e8.js";
import "./dayjs-2035e031.js";
import "./numbro-47982265.js";
import "./papaparse-07642d76.js";
import "./uuid-bd83cae2.js";
import "./supabase-b2e314d0.js";
import "./fetch-648a91f6.js";
import "./react-draggable-ed505bfc.js";
import "./remark-gfm-18306abe.js";
import "./buffer-d3713d77.js";
import "./rehype-raw-6ebcba88.js";
import "./parse5-f837f753.js";
import "./rehype-sanitize-953d0761.js";
import "./simplebar-react-2133d981.js";
import "./react-best-gradient-color-picker-92c01739.js";
import "./ua-parser-js-c952c07b.js";
import "./clsx-469c2c43.js";
import "./file-saver-55285fc1.js";
import "./codemirror-8412b963.js";
import "./really-relaxed-json-056be70b.js";
import "./immer-c0428a8d.js";
import "./hotkeys-js-699906bc.js";
import "./cnchar-e1339167.js";
import "./react-documents-041601c7.js";
import "./react-sortable-hoc-4fbe0c32.js";
import "./sql-formatter-577b4ab0.js";
import "./rc-trigger-3f038851.js";
import "./react-json-view-5330ce92.js";
import "./qrcode-react-d377d762.js";
const Oe = (e2) => Te(a, { children: Te("div", { style: { paddingBottom: "10px" }, children: e2.children }) });
function Ae(a2) {
  const { uiComp: i2 } = a2, l2 = be(e), s2 = l2.selectedCompNames, d2 = l2.selectedComp(), c2 = i2 == null ? void 0 : i2.getModuleLayoutComp();
  let p2;
  return d2 ? Te(Ce, { 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 = Ne(De)`
  width: 100%;
  height: 28px;
  border-radius: 6px;
  background-color: #efeff1;

  color: #8b8fa3;
  font-size: 12px;

  .ant-segmented-item-selected {
    border-radius: 4px;
    font-weight: 500;
    color: #222222;

    g {
      stroke: #222222;
    }
  }

  .ant-segmented-item-label {
    padding: 0 8px;
    height: 24px;
    min-height: 24px;
    line-height: 24px;
  }

  svg {
    height: 100%;
  }
`;
function ze(e2) {
  return Te(Me, { ...e2 });
}
const Ve = ye({ searchValue: "", onDrag: () => {
} }), Be = $e`
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  perspective: 1000px;
  transform-style: preserve-3d;
`, _e = Ne.div`
  ${Be};
  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 {
    ${Be};
    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 && `
    ${Be};
    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;
  `}
`, Ue = Ne.div`
  padding: 0 16px;
`, Re = Ne.div`
  padding-top: 4px;
  margin-bottom: 12px;
`, Ge = () => {
  const e2 = r("docUrls.aboutUs"), o2 = r("lowcoderUrl.createIssue");
  return Te(n, { text: ke(Ce, { children: [r("rightPanel.searchNotFound"), e2 && ke(Ce, { 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") })] }) });
}, He = Ne.span`
  ${i};
  font-weight: 500;
  font-size: 14px;
  color: #8b8fa3;
  line-height: 22px;
  display: block;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
`, Ke = Ne.div`
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 64px;
  margin-top: 4px;
`, qe = Ne.div`
  ${i};
  line-height: 15px;
  display: table;
  margin: 3px auto 0;
  color: #333333;
  text-align: center;
  word-break: keep-all;
`, Je = Ne.span`
  ${i};
  line-height: 14px;
  font-size: 12px;
  display: table;
  margin: 4px auto auto;
  color: #8b8fa3;
  text-align: center;
  word-spacing: 99px;
`, We = Ne.div`
  display: inline-block;
  border-radius: 4px;

  &:hover + ${qe} {
    color: #315efb;
  }
`, Xe = (e2) => {
  const { Icon: o2 } = e2;
  return Te(_e, { $w: 64, $h: 64, children: Te(o2, {}) });
}, Ye = Ne.div`
  width: 296px;
  display: flex;
  flex-wrap: wrap;
  padding: 4px 0 0 0;
  box-sizing: border-box;
  gap: 8px;
`, Qe = Ne.div`
  .section-header {
    margin-left: 0;
  }
  &:not(:last-child){
    border-bottom: 1px solid #e1e3eb;
  }
`, Ze = "UICompSections", eo = { [Ze]: {} };
Object.keys(s).forEach((e2) => {
  const o2 = s[e2];
  eo[Ze][o2] = o2 === s.dashboards;
});
const oo = () => {
  const { onDrag: e2, searchValue: o2 } = be(Ve), [t2, n2] = ve(eo), [r2, a2] = ve({}), i2 = we(() => {
    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 = we(() => {
    const e3 = o2 ? a2 : n2;
    return { compName: Ze, 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]);
  je(() => {
    o2 || a2({});
  }, [o2]);
  const f2 = we(() => Object.entries(i2).map(([t3, n3], r3) => {
    let a3 = n3;
    if (!Le.isEmpty(o2)) {
      const e3 = o2.trim().toLocaleLowerCase();
      a3 = a3.filter((o3) => o3[1].keywords.toLowerCase().includes(e3.toLowerCase()));
    }
    return Le.isEmpty(a3) ? null : Te(Qe, { children: Te(c, { noMargin: true, width: 288, name: s[t3], children: Te(Ye, { children: a3.map((o3) => ke(Ke, { className: "table" === o3[0] ? p : "", children: [Te(We, { 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(Xe, { Icon: o3[1].icon }) }), Te(qe, { children: o3[1].name }), "en" !== u && Te(Je, { children: o3[1].enName })] }, o3[0])) }) }) }, r3);
  }).filter((e3) => null != e3), [i2, o2, e2]);
  return f2.length ? Te(Ue, { children: Te(g.Provider, { value: l2, children: f2 }) }) : Te(Ue, { children: Te(Ge, {}) });
};
var to = ((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))(to || {});
const no = { [to.All]: { name: r("home.all"), icon: f }, [to.Application]: { name: r("home.app"), icon: x }, [to.Module]: { name: r("home.module"), icon: b }, [to.Navigation]: { name: r("home.navigation"), icon: y }, [to.NavLayout]: { name: r("home.navLayout"), icon: y, desc: r("home.navLayoutDesc") }, [to.Folder]: { name: r("home.folder"), icon: v }, [to.MobileTabLayout]: { name: r("home.mobileTabLayout"), icon: y, desc: r("home.mobileTabLayoutDesc") } }, ro = (e2) => ({ type: w.UPDATE_FOLDER_INIT, payload: e2 }), ao = (e2, o2, t2) => ({ type: w.DELETE_FOLDER_INIT, payload: e2, onSuccessCallback: o2, onErrorCallback: t2 }), io = (e2, o2, t2) => ({ type: w.MOVE_TO_FOLDER_INIT, payload: e2, onSuccessCallback: o2, onErrorCallback: t2 });
Ne.div`
  font-size: 13px;
  color: #333333;
  line-height: 13px;
  margin-bottom: 8px;
`;
const lo = (e2, o2 = j.Application) => o2 === j.NavLayout ? r("home.newNavLayout", { userName: e2, name: Le.toLower(no[o2].name) }) : r("home.newApp", { userName: e2, name: Le.toLower(no[o2].name) }), so = Ne.span`
  margin: 0 8px;
  cursor: pointer;
  color: ${I};

  &:hover {
    color: ${T};
  }
`;
function co(e2) {
  const { type: o2, onSuccess: t2 } = e2, [n2, a2, i2] = function(e3, o3) {
    const t3 = C(), { currentUser: n3, isCreating: r2 } = k((e4) => ({ currentUser: e4.ui.users.user, isCreating: e4.ui.application.loadingStatus.isApplicationCreating })), a3 = k(D), i3 = no[e3].name;
    return [Ie(() => {
      if (r2)
        return;
      const i4 = a3.filter((o4) => !e3 || e3 === o4.applicationType).map((e4) => e4.name), l2 = N(lo(n3.username, e3), i4);
      let s2 = {};
      e3 === j.Module ? s2 = { ui: { compType: "module", comp: {} } } : e3 === j.NavLayout && (s2 = { ui: { compType: "nav", comp: {} } }), t3($({ applicationType: e3 || j.Application, applicationName: l2, orgId: n3.currentOrgId, dsl: s2, onSuccess: o3 || Pe.noop }));
    }, [a3, n3.currentOrgId, n3.username, t3, r2, o3, e3]), r2, i3];
  }(o2, t2);
  return Te(so, { onClick: n2, children: a2 ? r("createAppButton.creating") : r("createAppButton.created", { name: i2 }) });
}
const po = Ne.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 mo(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, f2 = d2.name, [x2, y2] = ve(void 0), [v2, w2] = ve(false), j2 = k(E), I2 = g2 === l2 && c2 === a2;
  return Te(po, { 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(b, { className: "module-icon" }), ke("div", { style: { flexGrow: 1, maxWidth: 174 - 10 * p2 }, children: [Te(z, { style: { width: "100%" }, text: t2.name, forceClickIcon: false, disabled: !I2 || j2 || n2, onFinish: (e3) => {
    if ("" !== e3) {
      let o3 = false, t3 = f2;
      if (d2.rename ? (t3 = d2.rename(e3), o3 = !!t3) : (t3 = f2, o3 = true), o3) {
        i2(t3), s2(g2), y2(void 0);
        try {
          u2(K({ applicationId: a2, name: e3 }));
        } catch (e4) {
          throw e4;
        }
      }
      y2(void 0);
    }
    y2(void 0);
  }, onChange: (e3) => {
    y2("" === e3 ? "Cannot Be Empty" : void 0);
  }, onEditStateChange: (e3) => w2(e3) }), Te(V, { editorFocus: !!x2 && v2, title: x2 ? r("error") : "", content: x2, hasError: !!x2 })] })] }) });
}
const ho = Ne.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 ? L : "transparent"};
  align-items: center;
  justify-content: space-between;
`, uo = Ne.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;
    }
  }
`, go = Ne.div`
  width: 12px;
  height: 12px;
  display: flex;
  margin-right: 2px;
`, fo = Ne(q)`
  width: 16px;
  height: 16px;
  cursor: pointer;
  flex-shrink: 0;
  color: ${P};

  &:hover {
    color: #315efb;
  }
`;
function xo(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: f2 } = e2, { onDrag: x2 } = be(Ve), [b2, y2] = ve(void 0), [v2, w2] = ve(false), j2 = k(E), I2 = l2.length - 1, T2 = n2.isFolder, D2 = n2.name, N2 = T2 === p2 && t2 === d2, $2 = T2;
  return Te(uo, { onClick: () => {
    $2 && f2(), g2();
  }, $color: N2, $isOverlay: i2, children: ke(ho, { $active: a2 && $2, $level: I2, $foldable: $2, children: [$2 && Te(go, { children: Te(s2 ? A : O, {}) }), $2 ? ke(Ce, { children: [Te(M, { style: { marginRight: "4px" } }), ke("div", { style: { flexGrow: 1, marginRight: "8px", width: "calc(100% - 62px)" }, children: [Te(z, { text: D2, forceClickIcon: $2, disabled: !N2 || j2 || i2, onFinish: (e3) => {
    if ("" !== e3) {
      let t3 = false, r2 = D2;
      if (n2.rename ? (r2 = n2.rename(e3), t3 = !!r2) : (r2 = D2, t3 = true), t3) {
        c2(r2), m2(T2), y2(void 0);
        try {
          o2(ro({ id: d2, name: e3 }));
        } catch (e4) {
          throw e4;
        }
      }
      y2(void 0);
    }
  }, onChange: (e3) => {
    y2("" === e3 ? "Cannot Be Empty" : void 0);
  }, onEditStateChange: (e3) => w2(e3) }), Te(V, { editorFocus: !!b2 && v2, title: b2 ? r("error") : "", content: b2, hasError: !!b2 })] })] }) : Te(mo, { onDrag: x2, meta: n2.module, isOverlay: i2, selectedID: d2, setSelectedID: c2, selectedType: p2, setSelectedType: m2, resComp: n2, id: t2, $level: I2 }, t2), !j2 && !i2 && Te(B, { del: () => h2(), children: Te(fo, { tabIndex: -1 }) })] }) });
}
function bo() {
  const e2 = C();
  let o2 = k(Se);
  const t2 = k(S), { searchValue: a2 } = be(Ve), [i2, l2] = ve(""), [s2, d2] = ve(false);
  let c2 = "", p2 = "", m2 = "";
  const h2 = 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 === j.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 === j.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);
  je(() => {
    t2 || e2(F());
  }, [e2, t2]);
  const u2 = () => {
    try {
      "" !== p2 && e2(io({ sourceFolderId: c2, sourceId: p2, folderId: m2, moveFlag: true }, () => {
      }, () => {
      }));
    } catch (e3) {
      throw e3;
    } finally {
      m2 = "", p2 = "", c2 = "";
    }
  }, g2 = (e3, o3) => {
    if (e3) {
      if (e3.id === o3)
        return e3;
      for (const t3 of e3.children) {
        const e4 = g2(t3, o3);
        if (e4)
          return e4;
      }
    }
  }, f2 = (e3) => {
    const o3 = (t3 = e3.id, g2(h2, t3));
    var t3;
    const n2 = o3 == null ? void 0 : o3.isFolder, r2 = e3.children.map((e4) => f2(e4)).filter((e4) => !!e4), i3 = { id: o3 == null ? void 0 : o3.id, canDropBefore: (e4) => n2 ? e4 == null ? void 0 : e4.isFolder : !(e4 == null ? void 0 : e4.isFolder), canDropAfter: (e4) => !(!n2 && (e4 == null ? void 0 : e4.isFolder)), canDropIn: (e4) => !!n2 && (!e4 || !e4.isFolder), items: r2, data: o3, addSubItem(e4) {
      m2 = i3.id, u2();
    }, deleteItem(e4) {
      c2 = i3.id, p2 = i3.items[e4].id;
    }, addItem(e4) {
      m2 = i3.id, u2();
    }, moveItem(e4, o4) {
    } };
    if (!a2 || !o3 || o3.name.toLowerCase().includes(a2.toLowerCase()) || 0 !== r2.length)
      return i3;
  }, x2 = f2(h2);
  return ke(Ce, { children: [Te(He, { children: r("rightPanel.moduleListTitle") }), (x2 == null ? void 0 : x2.items.length) ? Te(Fe, { node: x2, 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: (o3) => {
    const { node: t3, onToggleFold: n2, onDelete: a3, ...c3 } = o3, p3 = t3.data;
    if (!p3)
      return null;
    const m3 = p3.id, h3 = p3.isFolder;
    return Te(xo, { id: m3, node: t3, resComp: p3, onToggleFold: n2, onCopy: () => {
    }, onSelect: () => function(e3, o4, t4) {
      l2(o4), d2(e3);
    }(h3, m3), selectedID: i2, setSelectedID: l2, selectedType: s2, setSelectedType: d2, onDelete: () => {
      !function(o4, t4, n3) {
        if (o4)
          if (n3.children.length)
            _.error(r("module.folderNotEmpty"));
          else
            try {
              e2(ao({ folderId: t4, parentFolderId: "" }, () => {
                _.success(r("home.deleteSuccessMsg"));
              }, () => {
                _.error(r("error"));
              }));
            } catch (e3) {
              throw e3;
            }
        else
          try {
            U.confirm({ title: r("home.moveToTrash"), content: R("home.moveToTrashSubTitle", { type: "", name: "This file" }), onConfirm: () => {
              e2(G({ applicationId: t4, folderId: "" }, () => {
                _.success(r("success"));
              }, () => {
                _.error(r("error"));
              }));
            }, confirmBtnType: "delete", okText: r("home.moveToTrash"), onCancel: () => {
            } });
          } catch (e3) {
            throw e3;
          }
      }(h3, m3, p3);
    }, ...c3 }, m3);
  } }) : Te(n, { text: ke(Ce, { children: [Te("p", { children: r("rightPanel.emptyModules") }), !t2 && Te(co, { type: j.Module, onSuccess: (e3) => {
    const o3 = e3.applicationInfoView.applicationId, t3 = H(o3, "edit");
    window.open(t3);
  } })] }) })] });
}
const yo = (e2, o2) => ({ type: w.PACKAGE_META_READY, payload: { [e2]: o2 } }), vo = Ne.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: ${J};
      transform: scale(1.2);
    }
    .module-name {
      color: ${T};
    }
  }
  .module-icon {
    transition: all 200ms linear;
    margin-right: 8px;
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid ${W};
    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: ${X};
  }
`;
function wo(e2) {
  const o2 = Y(), { packageName: t2, packageVersion: n2, compName: r2, compMeta: a2, onDrag: i2 } = e2, l2 = Q("npm", t2, n2, r2), s2 = `${Z}/${o2}/${t2}@${n2}/${a2.icon}`;
  return ke(vo, { 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(b, { 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 jo = Ne.div`
  margin-bottom: 12px;
  .remove-btn {
    display: none;
  }
  &:hover {
    .remove-btn {
      display: block;
    }
  }
`, Io = Ne.div`
  height: 22px;
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: 2px;
`, To = Ne.div`
  flex: 1;
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #b8b9bf;
`, Co = Ne.div`
  padding-top: 4px;
  margin-bottom: 12px;
`;
function ko(e2) {
  var _a, _b;
  const { name: o2, onRemove: t2 } = e2, a2 = C(), i2 = Y(), { onDrag: l2, searchValue: s2 } = be(Ve), [d2, c2] = ve(false), p2 = ee((e3) => e3.npmPlugin.packageMeta[o2]), m2 = k((e3) => e3.npmPlugin.packageVersion[o2]), h2 = we(() => (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);
  je(() => {
    c2(true), Ee.get(`${oe}/${i2 || "none"}/${o2}`).then((e3) => {
      e3.status >= 400 || (c2(false), a2(yo(o2, e3.data)));
    });
  }, [a2, o2]);
  const f2 = g2.filter((e3) => !s2 || -1 !== e3.toLowerCase().indexOf(s2.toLowerCase())), x2 = f2.length > 0;
  return ke(jo, { children: [ke(Io, { children: [Te(To, { children: o2 }), Te(te, { onClick: t2, className: "remove-btn", text: r("npm.removePluginBtnText") })] }), ke(Co, { children: [!x2 && Te(n, { text: d2 ? "Loading..." : "No components found." }), x2 && f2.map((e3) => Te(wo, { onDrag: l2, compName: e3, compMeta: u2[e3], packageName: o2, packageVersion: m2 }, e3))] })] });
}
const Do = (e2) => ({ type: w.SET_COMMON_SETTING, payload: e2 }), No = Ne.div`
  display: flex;
  justify-content: center;
  margin-top: 24px;
  margin-bottom: 24px;
`;
function $o() {
  const e2 = C(), [o2, t2] = ve(false), [a2, i2] = ve(""), l2 = k(ne), s2 = k(re), d2 = k(S), c2 = we(() => ((s2 == null ? void 0 : s2.npmPlugins) || []).map((e3) => ({ name: ae(e3), raw: e3 })), [s2 == null ? void 0 : s2.npmPlugins]), p2 = (o3) => {
    e2(Do({ orgId: l2.currentOrgId, isPublicApp: d2, data: { key: "npmPlugins", value: o3 } }));
  }, m2 = () => {
    var _a;
    if (!a2)
      return;
    if (!ce(a2))
      return void _.error(r("npm.invalidNpmPackageName"));
    if ((_a = s2.npmPlugins) == null ? void 0 : _a.find((e4) => ae(e4) === ae(a2)))
      return void _.error(r("npm.pluginExisted"));
    const e3 = ((s2 == null ? void 0 : s2.npmPlugins) || []).concat(a2);
    p2(e3), i2(""), t2(false);
  }, h2 = c2.map((e3) => Te(ko, { 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(Ce, { children: [Te(He, { children: r("rightPanel.pluginListTitle") }), Te(Re, { children: h2.length > 0 ? h2 : u2 }), Te(No, { children: Te(ie, { icon: Te(le, {}), buttonType: "blue", onClick: () => t2(true), children: r("npm.addPluginBtnText") }) }), ke(U, { 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(se, { autoFocus: true, onPressEnter: () => {
    m2();
  }, onChange: (e3) => {
    i2(e3.target.value);
  }, value: a2 }), Te(de, { style: { marginTop: 8 }, href: r("docUrls.devNpmPlugin"), children: r("docUrls.devNpmPluginText") })] })] });
}
function Lo() {
  return ke(Ue, { children: [Te(bo, {}), Te($o, {})] });
}
const Po = Ne.div`
  display: flex;
  flex-direction: column;
  height: 100%;
`, So = Ne.div`
  flex: 1;
  overflow: hidden;
`, Fo = Ne.div`
  padding: 0 16px;
  padding-bottom: 12px;
  .comp-panel-tab {
    margin-top: 16px;
  }
`, Eo = [{ value: "ui", label: r("rightPanel.uiComponentTab") }, { value: "extension", label: r("rightPanel.extensionTab") }];
function Oo(e2) {
  const { onCompDrag: o2 } = e2, [t2, n2] = ve(""), [i2, l2] = ve("ui");
  return ke(Po, { children: [ke(Fo, { children: [Te(pe, { placeholder: r("rightPanel.searchPlaceHolder"), value: t2, onChange: (e3) => n2(e3.target.value), allowClear: true }), Te(ze, { block: true, options: Eo, value: i2, className: "comp-panel-tab", onChange: (e3) => l2(e3) })] }), Te(Ve.Provider, { value: { searchValue: t2, onDrag: o2 }, children: Te(So, { children: ke(a, { children: ["ui" === i2 && Te(oo, {}), "extension" === i2 && Te(Lo, {})] }) }) })] });
}
const Ao = xe.memo(function(e2) {
  const { onTabChange: o2, showPropertyPane: t2, uiComp: n2 } = e2, a2 = n2 && n2.children.compType.getView(), i2 = a2 && fe(a2), [l2, s2] = ve("insert"), d2 = [{ key: "property", title: r("rightPanel.propertyTab"), icon: Te(me, {}), content: Te(Ae, { uiComp: n2 }) }];
  return i2 || d2.push({ key: "insert", title: r("rightPanel.createTab"), icon: Te(he, {}), content: Te(Oo, { onCompDrag: e2.onCompDrag }) }), je(() => {
    const e3 = i2 || t2 ? "property" : "insert";
    e3 !== l2 && s2(e3);
  }, [t2, i2, l2]), Te(ue, { className: "cypress-right-content", children: Te(ge, { onChange: (e3) => {
    o2(e3);
  }, tabsConfig: d2, activeKey: l2 }) });
});
export {
  Ao as default
};
