@pdfme/ui 4.0.2-dev.1 → 4.0.2-dev.2

package/dist/index.es.js

@@ -9290,6 +9290,7 @@ z.object({
   "schemas.text.max": z.string(),
   "schemas.text.fit": z.string(),
   "schemas.text.dynamicFontSize": z.string(),
+  "schemas.text.format": z.string(),
   "schemas.barcodes.barColor": z.string(),
   "schemas.barcodes.includetext": z.string(),
   "schemas.table.alternateBackgroundColor": z.string(),
@@ -81654,17 +81655,37 @@ const convertForPdfLayoutProps = ({ schema: a, pageHeight: s, applyRotateTransla
   }
   const It = { x: bt + vt / 2, y: ct - mm2pt(nt.position.y) - At / 2 };
   wt.forEach((yt, Rt) => {
-    const kt = widthOfTextAtSize(yt, lt, it, gt), jt = dt * it * Rt;
-    let Ht = bt;
-    ft === "center" ? Ht += (vt - kt) / 2 : ft === "right" && (Ht += vt - kt);
-    let Ft = ct - mm2pt(nt.position.y) - Ct - jt;
+    const kt = widthOfTextAtSize(yt, lt, it, gt), jt = heightOfFontAtSize(lt, it), Ht = dt * it * Rt;
+    let Ft = bt;
+    ft === "center" ? Ft += (vt - kt) / 2 : ft === "right" && (Ft += vt - kt);
+    let _t = ct - mm2pt(nt.position.y) - Ct - Ht;
+    if (nt.strikethrough && kt > 0) {
+      const Nt = Ft + kt + 1, Mt = _t + jt / 3;
+      _e.drawLine({
+        start: rotatePoint({ x: Ft, y: Mt }, It, xt.angle),
+        end: rotatePoint({ x: Nt, y: Mt }, It, xt.angle),
+        thickness: 1 / 12 * it,
+        color: ut,
+        opacity: St
+      });
+    }
+    if (nt.underline && kt > 0) {
+      const Nt = Ft + kt + 1, Mt = _t - jt / 12;
+      _e.drawLine({
+        start: rotatePoint({ x: Ft, y: Mt }, It, xt.angle),
+        end: rotatePoint({ x: Nt, y: Mt }, It, xt.angle),
+        thickness: 1 / 12 * it,
+        color: ut,
+        opacity: St
+      });
+    }
     if (xt.angle !== 0) {
-      const _t = rotatePoint({ x: Ht, y: Ft }, It, xt.angle);
-      Ht = _t.x, Ft = _t.y;
+      const Nt = rotatePoint({ x: Ft, y: _t }, It, xt.angle);
+      Ft = Nt.x, _t = Nt.y;
     }
     _e.drawText(yt, {
-      x: Ht,
-      y: Ft,
+      x: Ft,
+      y: _t,
       rotate: xt,
       size: it,
       color: ut,
@@ -81673,7 +81694,45 @@ const convertForPdfLayoutProps = ({ schema: a, pageHeight: s, applyRotateTransla
       opacity: St
     });
   });
-}, DEFAULT_OPACITY = 1, HEX_COLOR_PATTERN = "^#(?:[A-Fa-f0-9]{3,4}|[A-Fa-f0-9]{6}|[A-Fa-f0-9]{8})$", UseDynamicFontSize = (a) => {
+}, DEFAULT_OPACITY = 1, HEX_COLOR_PATTERN = "^#(?:[A-Fa-f0-9]{3,4}|[A-Fa-f0-9]{6}|[A-Fa-f0-9]{8})$", TextStrikethroughIcon = '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><path d="M6.85 7.08C6.85 4.37 9.45 3 12.24 3c1.64 0 3 .49 3.9 1.28c.77.65 1.46 1.73 1.46 3.24h-3.01c0-.31-.05-.59-.15-.85c-.29-.86-1.2-1.28-2.25-1.28c-1.86 0-2.34 1.02-2.34 1.7c0 .48.25.88.74 1.21c.38.25.77.48 1.41.7H7.39c-.21-.34-.54-.89-.54-1.92zM21 12v-2H3v2h9.62c1.15.45 1.96.75 1.96 1.97c0 1-.81 1.67-2.28 1.67c-1.54 0-2.93-.54-2.93-2.51H6.4c0 .55.08 1.13.24 1.58c.81 2.29 3.29 3.3 5.67 3.3c2.27 0 5.3-.89 5.3-4.05c0-.3-.01-1.16-.48-1.94H21V12z" fill="currentColor"></path></svg>', TextUnderlineIcon = '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><path d="M12 17c3.31 0 6-2.69 6-6V3h-2.5v8c0 1.93-1.57 3.5-3.5 3.5S8.5 12.93 8.5 11V3H6v8c0 3.31 2.69 6 6 6zm-7 2v2h14v-2H5z" fill="currentColor"></path></svg>', TextAlignLeftIcon = '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><path d="M15 15H3v2h12v-2zm0-8H3v2h12V7zM3 13h18v-2H3v2zm0 8h18v-2H3v2zM3 3v2h18V3H3z" fill="currentColor"></path></svg>', TextAlignCenterIcon = '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><path d="M7 15v2h10v-2H7zm-4 6h18v-2H3v2zm0-8h18v-2H3v2zm4-6v2h10V7H7zM3 3v2h18V3H3z" fill="currentColor"></path></svg>', TextAlignRightIcon = '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><path d="M3 21h18v-2H3v2zm6-4h12v-2H9v2zm-6-4h18v-2H3v2zm6-4h12V7H9v2zM3 3v2h18V3H3z" fill="currentColor"></path></svg>', TextVerticalAlignTopIcon = '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><path d="M8 11h3v10h2V11h3l-4-4l-4 4zM4 3v2h16V3H4z" fill="currentColor"></path></svg>', TextVerticalAlignMiddleIcon = '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><path d="M8 19h3v4h2v-4h3l-4-4l-4 4zm8-14h-3V1h-2v4H8l4 4l4-4zM4 11v2h16v-2H4z" fill="currentColor"></path></svg>', TextVerticalAlignBottomIcon = '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><path d="M16 13h-3V3h-2v10H8l4 4l4-4zM4 19v2h16v-2H4z" fill="currentColor"></path></svg>';
+var Formatter;
+(function(a) {
+  a.STRIKETHROUGH = "strikethrough", a.UNDERLINE = "underline", a.ALIGNMENT = "alignment", a.VERTICAL_ALIGNMENT = "verticalAlignment";
+})(Formatter || (Formatter = {}));
+function getExtraFormatterSchema(a) {
+  const s = [
+    { key: Formatter.STRIKETHROUGH, icon: TextStrikethroughIcon, type: "boolean" },
+    { key: Formatter.UNDERLINE, icon: TextUnderlineIcon, type: "boolean" },
+    { key: Formatter.ALIGNMENT, icon: TextAlignLeftIcon, type: "select", value: DEFAULT_ALIGNMENT },
+    { key: Formatter.ALIGNMENT, icon: TextAlignCenterIcon, type: "select", value: ALIGN_CENTER },
+    { key: Formatter.ALIGNMENT, icon: TextAlignRightIcon, type: "select", value: ALIGN_RIGHT },
+    {
+      key: Formatter.VERTICAL_ALIGNMENT,
+      icon: TextVerticalAlignTopIcon,
+      type: "select",
+      value: DEFAULT_VERTICAL_ALIGNMENT
+    },
+    {
+      key: Formatter.VERTICAL_ALIGNMENT,
+      icon: TextVerticalAlignMiddleIcon,
+      type: "select",
+      value: VERTICAL_ALIGN_MIDDLE
+    },
+    {
+      key: Formatter.VERTICAL_ALIGNMENT,
+      icon: TextVerticalAlignBottomIcon,
+      type: "select",
+      value: VERTICAL_ALIGN_BOTTOM
+    }
+  ];
+  return {
+    title: a("schemas.text.format"),
+    widget: "ButtonGroup",
+    buttons: s,
+    span: 16
+  };
+}
+const UseDynamicFontSize = (a) => {
   const { rootElement: s, changeSchemas: $, activeSchema: _, i18n: _e } = a, tt = document.createElement("input");
   tt.type = "checkbox", tt.checked = !!(_ != null && _.dynamicFontSize), tt.onchange = (at) => {
     const ot = at.target.checked ? {
@@ -81712,32 +81771,7 @@ const convertForPdfLayoutProps = ({ schema: a, pageHeight: s, applyRotateTransla
         span: 6,
         props: { min: 0 }
       },
-      alignment: {
-        title: $("schemas.text.textAlign"),
-        type: "string",
-        widget: "select",
-        props: {
-          options: [
-            { label: $("schemas.left"), value: DEFAULT_ALIGNMENT },
-            { label: $("schemas.center"), value: ALIGN_CENTER },
-            { label: $("schemas.right"), value: ALIGN_RIGHT }
-          ]
-        },
-        span: 8
-      },
-      verticalAlignment: {
-        title: $("schemas.text.verticalAlign"),
-        type: "string",
-        widget: "select",
-        props: {
-          options: [
-            { label: $("schemas.top"), value: VERTICAL_ALIGN_TOP },
-            { label: $("schemas.middle"), value: VERTICAL_ALIGN_MIDDLE },
-            { label: $("schemas.bottom"), value: VERTICAL_ALIGN_BOTTOM }
-          ]
-        },
-        span: 8
-      },
+      formatter: getExtraFormatterSchema($),
       lineHeight: {
         title: $("schemas.text.lineHeight"),
         type: "number",
@@ -81823,7 +81857,9 @@ const convertForPdfLayoutProps = ({ schema: a, pageHeight: s, applyRotateTransla
     fontColor: DEFAULT_FONT_COLOR,
     fontName: void 0,
     backgroundColor: "",
-    opacity: DEFAULT_OPACITY
+    opacity: DEFAULT_OPACITY,
+    strikethrough: !1,
+    underline: !1
   }
 }, mapVerticalAlignToFlex = (a) => {
   switch (a) {
@@ -81838,10 +81874,10 @@ const convertForPdfLayoutProps = ({ schema: a, pageHeight: s, applyRotateTransla
 }, getBackgroundColor = (a, s) => !a || !s.backgroundColor ? "transparent" : s.backgroundColor, uiRender = async (a) => {
   const { value: s, schema: $, rootElement: _, mode: _e, onChange: tt, stopEditing: nt, tabIndex: at, placeholder: ot, options: rt, _cache: st } = a, lt = (rt == null ? void 0 : rt.font) || getDefaultFont();
   let et;
-  const it = (At) => ({
+  const it = (xt) => ({
     textSchema: $,
     font: lt,
-    value: At,
+    value: xt,
     startingFontSize: et,
     _cache: st
   });
@@ -81859,7 +81895,9 @@ const convertForPdfLayoutProps = ({ schema: a, pageHeight: s, applyRotateTransla
     cursor: isEditable(_e, $) ? "text" : "default"
   };
   Object.assign(pt.style, mt), _.innerHTML = "", _.appendChild(pt);
-  const ct = {
+  const ct = [];
+  $.strikethrough && ct.push("line-through"), $.underline && ct.push("underline");
+  const vt = {
     // Font formatting styles
     fontFamily: $.fontName ? `'${$.fontName}'` : "inherit",
     color: $.fontColor ? $.fontColor : DEFAULT_FONT_COLOR,
@@ -81875,44 +81913,45 @@ const convertForPdfLayoutProps = ({ schema: a, pageHeight: s, applyRotateTransla
     outline: "none",
     marginBottom: `${gt}px`,
     paddingTop: `${dt}px`,
-    backgroundColor: "transparent"
-  }, vt = document.createElement("div");
-  if (Object.assign(vt.style, ct), isEditable(_e, $)) {
-    if (isFirefox() ? (vt.contentEditable = "true", vt.addEventListener("keydown", (At) => {
-      At.key === "Enter" && !At.shiftKey && (At.preventDefault(), document.execCommand("insertLineBreak", !1, void 0));
-    }), vt.addEventListener("paste", (At) => {
-      var Et;
-      At.preventDefault();
-      const xt = (Et = At.clipboardData) == null ? void 0 : Et.getData("text"), bt = window.getSelection();
-      bt != null && bt.rangeCount && (bt.deleteFromDocument(), bt.getRangeAt(0).insertNode(document.createTextNode(xt || "")), bt.collapseToEnd());
-    })) : vt.contentEditable = "plaintext-only", vt.tabIndex = at || 0, vt.innerText = s, vt.addEventListener("blur", (At) => {
-      tt && tt({ key: "content", value: At.target.innerText }), nt && nt();
-    }), $.dynamicFontSize && vt.addEventListener("keyup", () => {
+    backgroundColor: "transparent",
+    textDecoration: ct.join(" ")
+  }, At = document.createElement("div");
+  if (Object.assign(At.style, vt), isEditable(_e, $)) {
+    if (isFirefox() ? (At.contentEditable = "true", At.addEventListener("keydown", (xt) => {
+      xt.key === "Enter" && !xt.shiftKey && (xt.preventDefault(), document.execCommand("insertLineBreak", !1, void 0));
+    }), At.addEventListener("paste", (xt) => {
+      var St;
+      xt.preventDefault();
+      const bt = (St = xt.clipboardData) == null ? void 0 : St.getData("text"), Et = window.getSelection();
+      Et != null && Et.rangeCount && (Et.deleteFromDocument(), Et.getRangeAt(0).insertNode(document.createTextNode(bt || "")), Et.collapseToEnd());
+    })) : At.contentEditable = "plaintext-only", At.tabIndex = at || 0, At.innerText = s, At.addEventListener("blur", (xt) => {
+      tt && tt({ key: "content", value: xt.target.innerText }), nt && nt();
+    }), $.dynamicFontSize && At.addEventListener("keyup", () => {
       setTimeout(() => {
         (async () => {
-          if (!vt.textContent)
+          if (!At.textContent)
             return;
-          et = await calculateDynamicFontSize(it(vt.textContent)), vt.style.fontSize = `${et}pt`;
-          const { topAdj: At, bottomAdj: xt } = getBrowserVerticalFontAdjustments(ut, et ?? $.fontSize ?? DEFAULT_FONT_SIZE, $.lineHeight ?? DEFAULT_LINE_HEIGHT, $.verticalAlignment ?? DEFAULT_VERTICAL_ALIGNMENT);
-          vt.style.paddingTop = `${At}px`, vt.style.marginBottom = `${xt}px`;
+          et = await calculateDynamicFontSize(it(At.textContent)), At.style.fontSize = `${et}pt`;
+          const { topAdj: xt, bottomAdj: bt } = getBrowserVerticalFontAdjustments(ut, et ?? $.fontSize ?? DEFAULT_FONT_SIZE, $.lineHeight ?? DEFAULT_LINE_HEIGHT, $.verticalAlignment ?? DEFAULT_VERTICAL_ALIGNMENT);
+          At.style.paddingTop = `${xt}px`, At.style.marginBottom = `${bt}px`;
         })();
       }, 0);
     }), ot && !s) {
-      if (vt.innerText = ot, vt.style.color = PLACEHOLDER_FONT_COLOR, $.dynamicFontSize) {
-        const At = await calculateDynamicFontSize(it(ot));
-        vt.style.fontSize = `${At}pt`;
+      if (At.innerText = ot, At.style.color = PLACEHOLDER_FONT_COLOR, $.dynamicFontSize) {
+        const xt = await calculateDynamicFontSize(it(ot));
+        At.style.fontSize = `${xt}pt`;
       }
-      vt.addEventListener("focus", () => {
-        vt.innerText === ot && (vt.innerText = "", vt.style.color = $.fontColor ?? DEFAULT_FONT_COLOR);
+      At.addEventListener("focus", () => {
+        At.innerText === ot && (At.innerText = "", At.style.color = $.fontColor ?? DEFAULT_FONT_COLOR);
       });
     }
-    pt.appendChild(vt), _e === "designer" && setTimeout(() => {
-      vt.focus();
-      const At = window.getSelection(), xt = document.createRange();
-      xt.selectNodeContents(vt), xt.collapse(!1), At == null || At.removeAllRanges(), At == null || At.addRange(xt);
+    pt.appendChild(At), _e === "designer" && setTimeout(() => {
+      At.focus();
+      const xt = window.getSelection(), bt = document.createRange();
+      bt.selectNodeContents(At), bt.collapse(!1), xt == null || xt.removeAllRanges(), xt == null || xt.addRange(bt);
     });
   } else
-    vt.innerHTML = s.split("").map((At, xt) => `<span style="letter-spacing:${String(s).length === xt + 1 ? 0 : "inherit"};">${At}</span>`).join(""), pt.appendChild(vt);
+    At.innerHTML = s.split("").map((xt, bt) => `<span style="letter-spacing:${String(s).length === bt + 1 ? 0 : "inherit"};">${xt}</span>`).join(""), pt.appendChild(At);
 }, textSchema = { pdf: pdfRender, ui: uiRender, propPanel }, text = textSchema;
 textSchema.pdf, textSchema.ui, {
   ...textSchema.propPanel,
@@ -135120,6 +135159,7 @@ const MinusOutlined$1 = /* @__PURE__ */ reactExports.forwardRef(MinusOutlined),
   "schemas.text.max": "Max",
   "schemas.text.fit": "Fit",
   "schemas.text.dynamicFontSize": "Dynamic Font Size",
+  "schemas.text.format": "Format",
   "schemas.barcodes.barColor": "Bar Color",
   "schemas.barcodes.includetext": "Include Text",
   "schemas.table.alternateBackgroundColor": "Alternate Background Color",
@@ -135177,6 +135217,7 @@ const MinusOutlined$1 = /* @__PURE__ */ reactExports.forwardRef(MinusOutlined),
   "schemas.text.max": "最大",
   "schemas.text.fit": "适应",
   "schemas.text.dynamicFontSize": "动态字体大小",
+  "schemas.text.format": "格式",
   "schemas.barcodes.barColor": "条码颜色",
   "schemas.barcodes.includetext": "包括文本",
   "schemas.table.alternateBackgroundColor": "交替背景颜色",
@@ -135234,6 +135275,7 @@ const MinusOutlined$1 = /* @__PURE__ */ reactExports.forwardRef(MinusOutlined),
   "schemas.text.max": "最大",
   "schemas.text.fit": "フィット",
   "schemas.text.dynamicFontSize": "動的フォントサイズ",
+  "schemas.text.format": "書式",
   "schemas.barcodes.barColor": "バーの色",
   "schemas.barcodes.includetext": "テキストを含める",
   "schemas.table.alternateBackgroundColor": "交互の背景色",
@@ -135291,6 +135333,7 @@ const MinusOutlined$1 = /* @__PURE__ */ reactExports.forwardRef(MinusOutlined),
   "schemas.text.max": "최대",
   "schemas.text.fit": "맞춤",
   "schemas.text.dynamicFontSize": "동적 폰트 크기",
+  "schemas.text.format": "형식",
   "schemas.barcodes.barColor": "바코드 색상",
   "schemas.barcodes.includetext": "텍스트 포함",
   "schemas.table.alternateBackgroundColor": "대체 배경색",
@@ -135348,6 +135391,7 @@ const MinusOutlined$1 = /* @__PURE__ */ reactExports.forwardRef(MinusOutlined),
   "schemas.text.max": "الحد الأقصى",
   "schemas.text.fit": "ملاءمة",
   "schemas.text.dynamicFontSize": "حجم الخط الديناميكي",
+  "schemas.text.format": "تنسيق",
   "schemas.barcodes.barColor": "لون الشريط",
   "schemas.barcodes.includetext": "تضمين النص",
   "schemas.table.alternateBackgroundColor": "لون الخلفية البديل",
@@ -135405,6 +135449,7 @@ const MinusOutlined$1 = /* @__PURE__ */ reactExports.forwardRef(MinusOutlined),
   "schemas.text.max": "สูงสุด",
   "schemas.text.fit": "พอดี",
   "schemas.text.dynamicFontSize": "ขนาดตัวอักษรแบบไดนามิก",
+  "schemas.text.format": "รูปแบบ",
   "schemas.barcodes.barColor": "สีบาร์",
   "schemas.barcodes.includetext": "รวมข้อความ",
   "schemas.table.alternateBackgroundColor": "สีพื้นหลังสลับกัน",
@@ -135462,6 +135507,7 @@ const MinusOutlined$1 = /* @__PURE__ */ reactExports.forwardRef(MinusOutlined),
   "schemas.text.max": "Massimo",
   "schemas.text.fit": "Adatta",
   "schemas.text.dynamicFontSize": "Dimensione font dinamica",
+  "schemas.text.format": "Formato",
   "schemas.barcodes.barColor": "Colore barra",
   "schemas.barcodes.includetext": "Includi testo",
   "schemas.table.alternateBackgroundColor": "Colore di Sfondo Alternato",
@@ -135519,6 +135565,7 @@ const MinusOutlined$1 = /* @__PURE__ */ reactExports.forwardRef(MinusOutlined),
   "schemas.text.max": "Maksimum",
   "schemas.text.fit": "Dopasowanie",
   "schemas.text.dynamicFontSize": "Dynamiczny rozmiar czcionki",
+  "schemas.text.format": "Format",
   "schemas.barcodes.barColor": "Kolor paska",
   "schemas.barcodes.includetext": "Dołącz tekst",
   "schemas.table.alternateBackgroundColor": "Alternatywny kolor tła",
@@ -135576,6 +135623,7 @@ const MinusOutlined$1 = /* @__PURE__ */ reactExports.forwardRef(MinusOutlined),
   "schemas.text.max": "Max",
   "schemas.text.fit": "Anpassen",
   "schemas.text.dynamicFontSize": "Dynamische Schriftgröße",
+  "schemas.text.format": "Format",
   "schemas.barcodes.barColor": "Strichcodefarbe",
   "schemas.barcodes.includetext": "Text anzeigen",
   "schemas.table.alternateBackgroundColor": "Wechselnde Hintergrundfarbe",
@@ -135633,6 +135681,7 @@ const MinusOutlined$1 = /* @__PURE__ */ reactExports.forwardRef(MinusOutlined),
   "schemas.text.max": "Máx",
   "schemas.text.fit": "Ajustar",
   "schemas.text.dynamicFontSize": "Tamaño de fuente dinámico",
+  "schemas.text.format": "Formato",
   "schemas.barcodes.barColor": "Color de la barra",
   "schemas.barcodes.includetext": "Incluir texto",
   "schemas.table.alternateBackgroundColor": "Color de fondo alternativo",
@@ -135657,7 +135706,7 @@ const MinusOutlined$1 = /* @__PURE__ */ reactExports.forwardRef(MinusOutlined),
   fieldsList: "Liste des champs",
   editField: "Éditer le champ",
   type: "Type",
-  errorOccurred: " Une erreur est survenue",
+  errorOccurred: "Une erreur est survenue",
   errorBulkUpdateFieldName: "Impossible de confirmer le changement car le nombre d'éléments a changé.",
   commitBulkUpdateFieldName: "Confirmer les changements",
   bulkUpdateFieldName: "Modifier les noms de champs en masse",
@@ -135690,6 +135739,7 @@ const MinusOutlined$1 = /* @__PURE__ */ reactExports.forwardRef(MinusOutlined),
   "schemas.text.max": "Max",
   "schemas.text.fit": "Ajustement",
   "schemas.text.dynamicFontSize": "Taille de police dynamique",
+  "schemas.text.format": "Format",
   "schemas.barcodes.barColor": "Couleur de la barre",
   "schemas.barcodes.includetext": "Inclure le texte",
   "schemas.table.alternateBackgroundColor": "Couleur de fond alternative",
@@ -151721,12 +151771,50 @@ const FormRender = withProvider(FormCore, defaultWidgets), svgBaseProp = {
   return reactExports.useEffect(() => (_.current && (_.current.innerHTML = "", s({ ...$, rootElement: _.current })), () => {
     _.current && (_.current.innerHTML = "");
   }), [a.activeSchema]), /* @__PURE__ */ jsxRuntimeExports.jsx("div", { ref: _ });
-}, WidgetRenderer$1 = WidgetRenderer, { Text: Text$2 } = Typography$1, DetailView = (a) => {
+}, WidgetRenderer$1 = WidgetRenderer, ButtonGroupWidget = (a) => {
+  const { activeElements: s, changeSchemas: $, schemas: _, schema: _e } = a, tt = (ot) => {
+    const rt = ot.key, st = ot.type, lt = s.map((it) => it.id), et = _.filter((it) => lt.includes(it.id));
+    $(
+      et.map((it) => {
+        const ut = it[rt] ?? !1, ft = st === "boolean" ? !ut : ot.value;
+        return { key: rt, value: ft, schemaId: it.id };
+      })
+    );
+  }, nt = (ot) => {
+    const rt = ot.key, st = ot.type;
+    let lt = !1;
+    const et = s.map((ut) => ut.id);
+    return _.filter((ut) => et.includes(ut.id)).forEach((ut) => {
+      lt = st === "boolean" ? ut[rt] ?? !1 : ut[rt] === ot.value;
+    }), lt;
+  }, at = (ot) => {
+    const rt = `data:image/svg+xml;utf8,${encodeURIComponent(ot)}`;
+    return /* @__PURE__ */ jsxRuntimeExports.jsx("img", { width: 17, height: 17, src: rt });
+  };
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(Form$3.Item, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(Button$2.Group, { children: _e.buttons.map((ot, rt) => {
+    const st = nt(ot);
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(
+      Button$2,
+      {
+        type: st ? "primary" : void 0,
+        ghost: st,
+        onClick: () => tt(ot),
+        style: {
+          padding: 7,
+          zIndex: st ? 2 : 0
+        },
+        icon: at(ot.icon)
+      },
+      rt
+    );
+  }) }) });
+}, ButtonGroupWidget$1 = ButtonGroupWidget, { Text: Text$2 } = Typography$1, DetailView = (a) => {
   const { token: s } = theme.useToken(), { size: $, changeSchemas: _, deselectSchema: _e, activeSchema: tt, activeElements: nt } = a, at = useForm(), ot = reactExports.useContext(I18nContext), rt = reactExports.useContext(PluginsRegistry), st = reactExports.useContext(OptionsContext), [lt, et] = reactExports.useState({});
   reactExports.useEffect(() => {
     const pt = {
       AlignWidget: (mt) => /* @__PURE__ */ jsxRuntimeExports.jsx(AlignWidget$1, { ...mt, ...a, options: st }),
-      Divider: () => /* @__PURE__ */ jsxRuntimeExports.jsx(Divider$1, { style: { marginTop: s.marginXS, marginBottom: s.marginXS } })
+      Divider: () => /* @__PURE__ */ jsxRuntimeExports.jsx(Divider$1, { style: { marginTop: s.marginXS, marginBottom: s.marginXS } }),
+      ButtonGroup: (mt) => /* @__PURE__ */ jsxRuntimeExports.jsx(ButtonGroupWidget$1, { ...mt, ...a, options: st })
     };
     for (const mt of Object.values(rt)) {
       const ct = (mt == null ? void 0 : mt.propPanel.widgets) || {};