@pdfme/ui 5.5.2-dev.1 → 5.5.2-dev.3

package/dist/index.es.js

@@ -12197,7 +12197,7 @@ const expressionCache = /* @__PURE__ */ new Map(), parseDataCache = /* @__PURE__
     const [, c] = this.findWithLabelByType(s);
     return c;
   }
-}), DEFAULT_LANG = "en", DESTROYED_ERR_MSG = "[@pdfme/ui] this instance is already destroyed", SELECTABLE_CLASSNAME = "selectable", RULER_HEIGHT = 30, PAGE_GAP = 10, LEFT_SIDEBAR_WIDTH = 45, RIGHT_SIDEBAR_WIDTH = 400, BACKGROUND_COLOR = "rgb(74, 74, 74)", DEFAULT_MAX_ZOOM = 2, isff = typeof navigator < "u" ? navigator.userAgent.toLowerCase().indexOf("firefox") > 0 : !1;
+}), DEFAULT_LANG = "en", DESTROYED_ERR_MSG = "[@pdfme/ui] this instance is already destroyed", SELECTABLE_CLASSNAME = "selectable", RULER_HEIGHT = 30, PAGE_GAP = 10, LEFT_SIDEBAR_WIDTH = 45, RIGHT_SIDEBAR_WIDTH = 400, BACKGROUND_COLOR = "rgb(74, 74, 74)", DEFAULT_MAX_ZOOM = 2, DESIGNER_CLASSNAME = "pdfme-designer-", UI_CLASSNAME = "pdfme-ui-", isff = typeof navigator < "u" ? navigator.userAgent.toLowerCase().indexOf("firefox") > 0 : !1;
 function addEvent$1(a, s, c, u) {
   a.addEventListener ? a.addEventListener(s, c, u) : a.attachEvent && a.attachEvent("on".concat(s), c);
 }
@@ -130650,7 +130650,7 @@ const SVGIcon = ({ svgString: a, size: s, styles: c, label: u }) => {
     m(s.map(($) => $.name).join(`
 `)), y(!0);
   };
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: DESIGNER_CLASSNAME + "list-view", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { height: headHeight, display: "flex", alignItems: "center" }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Text$3, { strong: !0, style: { textAlign: "center", width: "100%" }, children: g("fieldsList") }) }),
     /* @__PURE__ */ jsxRuntimeExports.jsx(Divider, { style: { marginTop: x.marginXS, marginBottom: x.marginXS } }),
     /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: { height: E - headHeight }, children: [
@@ -130687,16 +130687,16 @@ const SVGIcon = ({ svgString: a, size: s, styles: c, label: u }) => {
             justifyContent: "flex-end"
           },
           children: b ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx(Button$1, { size: "small", type: "text", onClick: w, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("u", { children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx(Button$1, { className: DESIGNER_CLASSNAME + "bulk-commit", size: "small", type: "text", onClick: w, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("u", { children: [
               " ",
               g("commitBulkUpdateFieldName")
             ] }) }),
             /* @__PURE__ */ jsxRuntimeExports.jsx("span", { style: { margin: "0 1rem" }, children: "/" }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx(Button$1, { size: "small", type: "text", onClick: () => y(!1), children: /* @__PURE__ */ jsxRuntimeExports.jsxs("u", { children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx(Button$1, { className: DESIGNER_CLASSNAME + "bulk-cancel", size: "small", type: "text", onClick: () => y(!1), children: /* @__PURE__ */ jsxRuntimeExports.jsxs("u", { children: [
               " ",
               g("cancel")
             ] }) })
-          ] }) : /* @__PURE__ */ jsxRuntimeExports.jsx(Button$1, { size: "small", type: "text", onClick: S, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("u", { children: [
+          ] }) : /* @__PURE__ */ jsxRuntimeExports.jsx(Button$1, { className: DESIGNER_CLASSNAME + "bulk-update", size: "small", type: "text", onClick: S, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("u", { children: [
             " ",
             g("bulkUpdateFieldName")
           ] }) })
@@ -146308,6 +146308,7 @@ const FormRenderComponent = withProvider(FormCore, defaultWidgets), AlignWidget
   return /* @__PURE__ */ jsxRuntimeExports.jsx(Form$1.Item, { label: p.title, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Space.Compact, { children: x.map((g) => /* @__PURE__ */ jsxRuntimeExports.jsx(
     Button$1,
     {
+      className: DESIGNER_CLASSNAME + "align-" + g.id,
       style: { padding: 7 },
       disabled: s.length <= 2 && ["vertical", "horizontal"].includes(g.id),
       ...g
@@ -146603,11 +146604,12 @@ const FormRenderComponent = withProvider(FormCore, defaultWidgets), AlignWidget
       ...N
     };
   }
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: DESIGNER_CLASSNAME + "detail-view", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: { height: 40, display: "flex", alignItems: "center" }, children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(
         Button$1,
         {
+          className: DESIGNER_CLASSNAME + "back-button",
           style: {
             position: "absolute",
             zIndex: 100,
@@ -146651,6 +146653,7 @@ const FormRenderComponent = withProvider(FormCore, defaultWidgets), AlignWidget
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     "div",
     {
+      className: DESIGNER_CLASSNAME + "right-sidebar",
       style: {
         position: "absolute",
         right: 0,
@@ -146662,6 +146665,7 @@ const FormRenderComponent = withProvider(FormCore, defaultWidgets), AlignWidget
         /* @__PURE__ */ jsxRuntimeExports.jsx(
           Button$1,
           {
+            className: DESIGNER_CLASSNAME + "sidebar-toggle",
             style: {
               position: "absolute",
               display: "flex",
@@ -146822,6 +146826,7 @@ Check this document: https://pdfme.com/docs/custom-schemas`), /* @__PURE__ */ js
   }, [p]), /* @__PURE__ */ jsxRuntimeExports.jsx(
     "div",
     {
+      className: DESIGNER_CLASSNAME + "left-sidebar",
       style: {
         left: 0,
         right: 0,
@@ -146833,14 +146838,19 @@ Check this document: https://pdfme.com/docs/custom-schemas`), /* @__PURE__ */ js
         textAlign: "center",
         overflow: p ? "visible" : "auto"
       },
-      children: d.entries().map(([A, x]) => x?.propPanel.defaultSchema ? /* @__PURE__ */ jsxRuntimeExports.jsx(Draggable$1, { scale: s, basePdf: c, plugin: x, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-        Button$1,
-        {
-          onMouseDown: () => v(!0),
-          style: { width: 35, height: 35, marginTop: "0.25rem", padding: "0.25rem" },
-          children: /* @__PURE__ */ jsxRuntimeExports.jsx(PluginIcon, { plugin: x, label: A })
-        }
-      ) }, A) : null)
+      children: d.entries().map(([A, x]) => {
+        if (!x?.propPanel.defaultSchema) return null;
+        const g = x.propPanel.defaultSchema.type;
+        return /* @__PURE__ */ jsxRuntimeExports.jsx(Draggable$1, { scale: s, basePdf: c, plugin: x, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+          Button$1,
+          {
+            className: DESIGNER_CLASSNAME + "plugin-" + g,
+            onMouseDown: () => v(!0),
+            style: { width: 35, height: 35, marginTop: "0.25rem", padding: "0.25rem" },
+            children: /* @__PURE__ */ jsxRuntimeExports.jsx(PluginIcon, { plugin: x, label: A })
+          }
+        ) }, A);
+      })
     }
   );
 }, Paper = (a) => {
@@ -158236,6 +158246,7 @@ const guideStyle = (a, s, c, u) => ({
     Button$1,
     {
       id: DELETE_BTN_ID,
+      className: DESIGNER_CLASSNAME + "delete-button",
       style: {
         position: "absolute",
         zIndex: 1,
@@ -158366,6 +158377,7 @@ const guideStyle = (a, s, c, u) => ({
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(
     "div",
     {
+      className: DESIGNER_CLASSNAME + "canvas",
       style: {
         position: "relative",
         overflow: "auto",
@@ -158541,7 +158553,7 @@ const guideStyle = (a, s, c, u) => ({
         x.status === "fulfilled" && document.fonts.add(x.value);
       });
     });
-  }, [d]), /* @__PURE__ */ jsxRuntimeExports.jsx("div", { ref: u, style: { position: "relative", background: BACKGROUND_COLOR, ...a }, children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { margin: "0 auto", ...a }, children: s === 0 ? /* @__PURE__ */ jsxRuntimeExports.jsx(Spinner, {}) : c }) });
+  }, [d]), /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: DESIGNER_CLASSNAME + "root", ref: u, style: { position: "relative", background: BACKGROUND_COLOR, ...a }, children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: DESIGNER_CLASSNAME + "background", style: { margin: "0 auto", ...a }, children: s === 0 ? /* @__PURE__ */ jsxRuntimeExports.jsx(Spinner, {}) : c }) });
 }, Root$1 = reactExports.forwardRef(Root), ErrorScreen = ({ size: a, error: s }) => {
   const c = reactExports.useContext(I18nContext), { token: u } = theme.useToken();
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -158571,6 +158583,7 @@ const guideStyle = (a, s, c, u) => ({
     /* @__PURE__ */ jsxRuntimeExports.jsx(
       Button$1,
       {
+        className: UI_CLASSNAME + "zoom-out",
         type: "text",
         disabled: p >= v,
         onClick: () => s(v),
@@ -158584,6 +158597,7 @@ const guideStyle = (a, s, c, u) => ({
     /* @__PURE__ */ jsxRuntimeExports.jsx(
       Button$1,
       {
+        className: UI_CLASSNAME + "zoom-in",
         type: "text",
         disabled: d < A,
         onClick: () => s(A),
@@ -158592,7 +158606,7 @@ const guideStyle = (a, s, c, u) => ({
     )
   ] });
 }, Pager = ({ pageCursor: a, pageNum: s, setPageCursor: c, style: u }) => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: { display: "flex", alignItems: "center" }, children: [
-  /* @__PURE__ */ jsxRuntimeExports.jsx(Button$1, { type: "text", disabled: a <= 0, onClick: () => c(a - 1), children: /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronLeft, { size: 16, color: u.textStyle.color }) }),
+  /* @__PURE__ */ jsxRuntimeExports.jsx(Button$1, { className: UI_CLASSNAME + "page-prev", type: "text", disabled: a <= 0, onClick: () => c(a - 1), children: /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronLeft, { size: 16, color: u.textStyle.color }) }),
   /* @__PURE__ */ jsxRuntimeExports.jsxs(Text$1, { strong: !0, style: u.textStyle, children: [
     a + 1,
     "/",
@@ -158601,13 +158615,14 @@ const guideStyle = (a, s, c, u) => ({
   /* @__PURE__ */ jsxRuntimeExports.jsx(
     Button$1,
     {
+      className: UI_CLASSNAME + "page-next",
       type: "text",
       disabled: a + 1 >= s,
       onClick: () => c(a + 1),
       children: /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronRight, { size: 16, color: u.textStyle.color })
     }
   )
-] }), ContextMenu = ({ items: a, style: s }) => /* @__PURE__ */ jsxRuntimeExports.jsx(Dropdown, { menu: { items: a }, placement: "top", arrow: !0, trigger: ["click"], children: /* @__PURE__ */ jsxRuntimeExports.jsx(Button$1, { type: "text", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Ellipsis, { size: 16, color: s.textStyle.color }) }) }), CtlBar = (a) => {
+] }), ContextMenu = ({ items: a, style: s }) => /* @__PURE__ */ jsxRuntimeExports.jsx(Dropdown, { menu: { items: a }, placement: "top", arrow: !0, trigger: ["click"], children: /* @__PURE__ */ jsxRuntimeExports.jsx(Button$1, { className: UI_CLASSNAME + "context-menu", type: "text", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Ellipsis, { size: 16, color: s.textStyle.color }) }) }), CtlBar = (a) => {
   const { token: s } = theme.useToken(), c = reactExports.useContext(I18nContext), {
     size: u,
     pageCursor: d,
@@ -158633,6 +158648,7 @@ const guideStyle = (a, s, c, u) => ({
   return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { position: "absolute", top: "auto", bottom: "6%", width: u.width }, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
     "div",
     {
+      className: UI_CLASSNAME + "control-bar",
       style: {
         display: "flex",
         alignItems: "center",
@@ -158648,7 +158664,7 @@ const guideStyle = (a, s, c, u) => ({
         backgroundColor: s.colorBgMask
       },
       children: [
-        p > 1 && /* @__PURE__ */ jsxRuntimeExports.jsx(
+        p > 1 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: UI_CLASSNAME + "pager", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
           Pager,
           {
             style: { textStyle: w },
@@ -158656,8 +158672,8 @@ const guideStyle = (a, s, c, u) => ({
             pageNum: p,
             setPageCursor: v
           }
-        ),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(Zoom, { style: { textStyle: w }, zoomLevel: A, setZoomLevel: x }),
+        ) }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: UI_CLASSNAME + "zoom", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Zoom, { style: { textStyle: w }, zoomLevel: A, setZoomLevel: x }) }),
         y.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(ContextMenu, { items: y, style: { textStyle: w } })
       ]
     }