@campxdev/pdfme 1.1.0 → 1.2.1

package/dist/esm/schemas.js

@@ -1,9 +1,9 @@
-import { m as propPanel$1, p as pdfRender$2, u as uiRender$2, c as createSvgStr, d as convertForPdfLayoutProps, i as isEditable, a as addAlphaToHex, k as createErrorElm, D as DEFAULT_OPACITY, H as HEX_COLOR_PATTERN, n as getBodyWithRange, o as createSingleTable, q as getBody, f as getDefaultCellStyles, t as getColumnStylesPropPanelSchema, v as getCellPropPanelSchema, w as DEFAULT_FONT_COLOR, x as DEFAULT_CHARACTER_SPACING, y as DEFAULT_FONT_SIZE, z as DEFAULT_ALIGNMENT, A as getExtraFormatterSchema, F as Formatter, B as DEFAULT_LINE_HEIGHT, V as VERTICAL_ALIGN_MIDDLE, C as mapVerticalAlignToFlex } from './chunks/index-CwqHuiCe.js';
-export { b as builtInPlugins, g as getDynamicHeightsForTable, s as multiVariableText } from './chunks/index-CwqHuiCe.js';
-import { c as validateBarcodeInput, f as createBarCode, D as DEFAULT_BARCODE_COLOR, g as DEFAULT_BARCODE_BG_COLOR, h as DEFAULT_BARCODE_INCLUDETEXT, B as BARCODE_TYPES, r as rectangle, j as cellSchema } from './chunks/index-Rwcd_Vzj.js';
-export { d as dynamicBarcode, a as dynamicQrCode, b as dynamicTable, e as ellipse, i as image, l as line, s as signature, v as variableBarcodes } from './chunks/index-Rwcd_Vzj.js';
+import { m as propPanel$1, p as pdfRender$2, u as uiRender$2, c as createSvgStr, d as convertForPdfLayoutProps, i as isEditable, a as addAlphaToHex, k as createErrorElm, D as DEFAULT_OPACITY, H as HEX_COLOR_PATTERN, n as getBodyWithRange, o as createSingleTable, q as getBody, f as getDefaultCellStyles, t as getColumnStylesPropPanelSchema, v as getCellPropPanelSchema, w as DEFAULT_FONT_COLOR, x as DEFAULT_CHARACTER_SPACING, y as DEFAULT_FONT_SIZE, z as DEFAULT_ALIGNMENT, A as getExtraFormatterSchema, F as Formatter, B as DEFAULT_LINE_HEIGHT, V as VERTICAL_ALIGN_MIDDLE, C as mapVerticalAlignToFlex } from './chunks/index-qTsnfbi7.js';
+export { b as builtInPlugins, g as getDynamicHeightsForTable, s as multiVariableText } from './chunks/index-qTsnfbi7.js';
+import { c as validateBarcodeInput, f as createBarCode, D as DEFAULT_BARCODE_COLOR, g as DEFAULT_BARCODE_BG_COLOR, h as DEFAULT_BARCODE_INCLUDETEXT, B as BARCODE_TYPES, r as rectangle, j as cellSchema } from './chunks/index-pDt5vVVj.js';
+export { d as dynamicBarcode, a as dynamicQrCode, b as dynamicTable, e as ellipse, i as image, l as line, s as signature, v as variableBarcodes } from './chunks/index-pDt5vVVj.js';
 import { TextCursorInput, Route, QrCode, Barcode, Table, CalendarClock, Calendar, Clock, ChevronDown, CircleDot, Circle, SquareCheck, Square } from 'lucide';
-import { x as px2mm, Z as ZOOM, q as getFallbackFontName, D as DEFAULT_FONT_NAME } from './chunks/helper-C8LqGaF4.js';
+import { x as px2mm, Z as ZOOM, q as getFallbackFontName, D as DEFAULT_FONT_NAME } from './chunks/helper-D7XF1bxK.js';
 import AirDatepicker from 'air-datepicker';
 import localeAr from 'air-datepicker/locale/ar';
 import localeBg from 'air-datepicker/locale/bg';

package/dist/esm/ui.js

@@ -73964,6 +73964,15 @@ const getBrowserVerticalFontAdjustments = (a, s, c, u) => {
   v instanceof bufferExports.Buffer ? A = v : A = bufferExports.Buffer.from(v);
   const x = $d636bc798e7178db$export$185802fd694ee1f5(A);
   return c.set(d, x), x;
+}, resolveFontName = (a, s, c, u) => {
+  const d = a || getFallbackFontName(u);
+  if (!s && !c)
+    return d;
+  const p = s && c ? [" Bold Italic", "BoldItalic", "-BoldItalic"] : s ? [" Bold", "Bold", "-Bold"] : [" Italic", "Italic", "-Italic"];
+  for (const v of p)
+    if (u[d + v])
+      return d + v;
+  return d;
 }, calculateDynamicFontSize = ({ textSchema: a, fontKitFont: s, value: c, startingFontSize: u }) => {
   const { fontSize: d, dynamicFontSize: p, characterSpacing: v, width: A, height: x, lineHeight: g = DEFAULT_LINE_HEIGHT } = a, b = u || d || DEFAULT_FONT_SIZE;
   if (!p || p.max < p.min)
@@ -74644,84 +74653,84 @@ const DEFAULT_OPACITY = 1, HEX_COLOR_PATTERN = "^#(?:[A-Fa-f0-9]{6})$", getBody$
   const { value: s, pdfDoc: c, pdfLib: u, page: d, options: p, schema: v, _cache: A } = a;
   if (!s)
     return;
-  const { font: x = getDefaultFont(), colorType: g } = p, [b, y] = await Promise.all([
+  const { font: x = getDefaultFont(), colorType: g } = p, b = resolveFontName(v.fontName, v.bold, v.italic, x), [y, f] = await Promise.all([
     embedAndGetFontObj({
       pdfDoc: c,
       font: x,
       _cache: A
     }),
-    getFontKitFont(v.fontName, x, A)
-  ]), f = getFontProp({ value: s, fontKitFont: y, schema: v, colorType: g }), { fontSize: m, color: E, alignment: w, verticalAlignment: S, lineHeight: $, characterSpacing: R } = f, _ = v.fontName ? v.fontName : getFallbackFontName(x), I = b && b[_], C = d.getHeight(), { width: T, height: B, rotate: N, position: { x: O, y: F }, opacity: k } = convertForPdfLayoutProps({ schema: v, pageHeight: C, applyRotateTranslate: false }), V = { x: O + T / 2, y: C - mm2pt(v.position.y) - B / 2 };
+    getFontKitFont(b, x, A)
+  ]), m = getFontProp({ value: s, fontKitFont: f, schema: v, colorType: g }), { fontSize: E, color: w, alignment: S, verticalAlignment: $, lineHeight: R, characterSpacing: _ } = m, C = y && y[b], T = d.getHeight(), { width: B, height: N, rotate: O, position: { x: F, y: k }, opacity: V } = convertForPdfLayoutProps({ schema: v, pageHeight: T, applyRotateTranslate: false }), z = { x: F + B / 2, y: T - mm2pt(v.position.y) - N / 2 };
   if (v.backgroundColor) {
-    const D = hex2PrintingColor(v.backgroundColor, g);
-    if (N.angle !== 0) {
-      const H = rotatePoint({ x: O, y: F }, V, N.angle);
-      d.drawRectangle({ x: H.x, y: H.y, width: T, height: B, rotate: N, color: D });
+    const H = hex2PrintingColor(v.backgroundColor, g);
+    if (O.angle !== 0) {
+      const U = rotatePoint({ x: F, y: k }, z, O.angle);
+      d.drawRectangle({ x: U.x, y: U.y, width: B, height: N, rotate: O, color: H });
     } else
-      d.drawRectangle({ x: O, y: F, width: T, height: B, rotate: N, color: D });
+      d.drawRectangle({ x: F, y: k, width: B, height: N, rotate: O, color: H });
   }
-  const z = heightOfFontAtSize(y, m), G = getFontDescentInPt(y, m), W = $ === 0 ? 0 : ($ - 1) * m / 2, M = splitTextToSize({
+  const G = heightOfFontAtSize(f, E), W = getFontDescentInPt(f, E), M = R === 0 ? 0 : (R - 1) * E / 2, L = splitTextToSize({
     value: s,
-    characterSpacing: R,
-    fontSize: m,
-    fontKitFont: y,
-    boxWidthInPt: T
+    characterSpacing: _,
+    fontSize: E,
+    fontKitFont: f,
+    boxWidthInPt: B
   });
-  let L = 0;
-  if (S === VERTICAL_ALIGN_TOP)
-    L = z + W;
+  let P = 0;
+  if ($ === VERTICAL_ALIGN_TOP)
+    P = G + M;
   else {
-    const D = $ * m * (M.length - 1);
-    S === VERTICAL_ALIGN_BOTTOM ? L = B - D + G - W : S === VERTICAL_ALIGN_MIDDLE && (L = (B - D - z + G) / 2 + z);
-  }
-  const P = new Intl.Segmenter(void 0, { granularity: "grapheme" });
-  M.forEach((D, H) => {
-    const U = D.replace(`
-`, ""), Y = widthOfTextAtSize(U, y, m, R), ee = heightOfFontAtSize(y, m), Z = $ * m * H;
-    D === "" && (D = `\r
+    const H = R * E * (L.length - 1);
+    $ === VERTICAL_ALIGN_BOTTOM ? P = N - H + W - M : $ === VERTICAL_ALIGN_MIDDLE && (P = (N - H - G + W) / 2 + G);
+  }
+  const D = new Intl.Segmenter(void 0, { granularity: "grapheme" });
+  L.forEach((H, U) => {
+    const Y = H.replace(`
+`, ""), ee = widthOfTextAtSize(Y, f, E, _), Z = heightOfFontAtSize(f, E), re = R * E * U;
+    H === "" && (H = `\r
 `);
-    let re = O;
-    w === "center" ? re += (T - Y) / 2 : w === "right" && (re += T - Y);
-    let K = C - mm2pt(v.position.y) - L - Z;
-    if (v.strikethrough && Y > 0) {
-      const q = re + Y + 1, J = K + ee / 3;
+    let K = F;
+    S === "center" ? K += (B - ee) / 2 : S === "right" && (K += B - ee);
+    let te = T - mm2pt(v.position.y) - P - re;
+    if (v.strikethrough && ee > 0) {
+      const J = K + ee + 1, ne = te + Z / 3;
       d.drawLine({
-        start: rotatePoint({ x: re, y: J }, V, N.angle),
-        end: rotatePoint({ x: q, y: J }, V, N.angle),
-        thickness: 1 / 12 * m,
-        color: E,
-        opacity: k
+        start: rotatePoint({ x: K, y: ne }, z, O.angle),
+        end: rotatePoint({ x: J, y: ne }, z, O.angle),
+        thickness: 1 / 12 * E,
+        color: w,
+        opacity: V
       });
     }
-    if (v.underline && Y > 0) {
-      const q = re + Y + 1, J = K - ee / 12;
+    if (v.underline && ee > 0) {
+      const J = K + ee + 1, ne = te - Z / 12;
       d.drawLine({
-        start: rotatePoint({ x: re, y: J }, V, N.angle),
-        end: rotatePoint({ x: q, y: J }, V, N.angle),
-        thickness: 1 / 12 * m,
-        color: E,
-        opacity: k
+        start: rotatePoint({ x: K, y: ne }, z, O.angle),
+        end: rotatePoint({ x: J, y: ne }, z, O.angle),
+        thickness: 1 / 12 * E,
+        color: w,
+        opacity: V
       });
     }
-    if (N.angle !== 0) {
-      const q = rotatePoint({ x: re, y: K }, V, N.angle);
-      re = q.x, K = q.y;
+    if (O.angle !== 0) {
+      const J = rotatePoint({ x: K, y: te }, z, O.angle);
+      K = J.x, te = J.y;
     }
-    let te = R;
-    if (w === "justify" && D.slice(-1) !== `
+    let q = _;
+    if (S === "justify" && H.slice(-1) !== `
 `) {
-      const q = P.segment(U)[Symbol.iterator](), J = Array.from(q).length;
-      te += (T - Y) / J;
-    }
-    d.pushOperators(u.setCharacterSpacing(te)), d.drawText(U, {
-      x: re,
-      y: K,
-      rotate: N,
-      size: m,
-      color: E,
-      lineHeight: $ * m,
-      font: I,
-      opacity: k
+      const J = D.segment(Y)[Symbol.iterator](), ne = Array.from(J).length;
+      q += (B - ee) / ne;
+    }
+    d.pushOperators(u.setCharacterSpacing(q)), d.drawText(Y, {
+      x: K,
+      y: te,
+      rotate: O,
+      size: E,
+      color: w,
+      lineHeight: R * E,
+      font: C,
+      opacity: V
     });
   });
 }, substituteVariables = (a, s, c) => {
@@ -74780,6 +74789,14 @@ const ArrowUpToLine = [
   ["path", { d: "m18 13-6-6-6 6" }],
   ["path", { d: "M12 7v14" }]
 ];
+const Bold = [
+  ["path", { d: "M6 12h9a4 4 0 0 1 0 8H7a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h7a4 4 0 0 1 0 8" }]
+];
+const Italic = [
+  ["line", { x1: "19", x2: "10", y1: "4", y2: "4" }],
+  ["line", { x1: "14", x2: "5", y1: "20", y2: "20" }],
+  ["line", { x1: "15", x2: "9", y1: "4", y2: "20" }]
+];
 const Strikethrough = [
   ["path", { d: "M16 4H9a3 3 0 0 0-2.83 4" }],
   ["path", { d: "M14 12a4 4 0 0 1 0 8H6" }],
@@ -74813,13 +74830,15 @@ const Type = [
 const Underline = [
   ["path", { d: "M6 4v6a6 6 0 0 0 12 0V4" }],
   ["line", { x1: "4", x2: "20", y1: "20", y2: "20" }]
-], TextStrikethroughIcon = createSvgStr(Strikethrough), TextUnderlineIcon = createSvgStr(Underline), TextAlignLeftIcon = createSvgStr(TextAlignStart), TextAlignCenterIcon = createSvgStr(TextAlignCenter), TextAlignRightIcon = createSvgStr(TextAlignEnd), TextAlignJustifyIcon = createSvgStr(TextAlignJustify), TextVerticalAlignTopIcon = createSvgStr(ArrowUpToLine), 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 = createSvgStr(ArrowDownToLine);
+], TextBoldIcon = createSvgStr(Bold), TextItalicIcon = createSvgStr(Italic), TextStrikethroughIcon = createSvgStr(Strikethrough), TextUnderlineIcon = createSvgStr(Underline), TextAlignLeftIcon = createSvgStr(TextAlignStart), TextAlignCenterIcon = createSvgStr(TextAlignCenter), TextAlignRightIcon = createSvgStr(TextAlignEnd), TextAlignJustifyIcon = createSvgStr(TextAlignJustify), TextVerticalAlignTopIcon = createSvgStr(ArrowUpToLine), 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 = createSvgStr(ArrowDownToLine);
 var Formatter;
 (function(a) {
-  a.STRIKETHROUGH = "strikethrough", a.UNDERLINE = "underline", a.ALIGNMENT = "alignment", a.VERTICAL_ALIGNMENT = "verticalAlignment";
+  a.BOLD = "bold", a.ITALIC = "italic", a.STRIKETHROUGH = "strikethrough", a.UNDERLINE = "underline", a.ALIGNMENT = "alignment", a.VERTICAL_ALIGNMENT = "verticalAlignment";
 })(Formatter || (Formatter = {}));
 function getExtraFormatterSchema(a) {
   const s = [
+    { key: Formatter.BOLD, icon: TextBoldIcon, type: "boolean" },
+    { key: Formatter.ITALIC, icon: TextItalicIcon, type: "boolean" },
     { key: Formatter.STRIKETHROUGH, icon: TextStrikethroughIcon, type: "boolean" },
     { key: Formatter.UNDERLINE, icon: TextUnderlineIcon, type: "boolean" },
     { key: Formatter.ALIGNMENT, icon: TextAlignLeftIcon, type: "select", value: DEFAULT_ALIGNMENT },
@@ -74985,6 +75004,8 @@ const UseDynamicFontSize = (a) => {
     fontName: void 0,
     backgroundColor: "",
     opacity: DEFAULT_OPACITY,
+    bold: false,
+    italic: false,
     strikethrough: false,
     underline: false
   }
@@ -75159,42 +75180,42 @@ const UseDynamicFontSize = (a) => {
   };
   return a.split(/(\r\n|\n|\r)/).map((p) => /\r\n|\n|\r/.test(p) ? p : p.split("").map((v) => /\s/.test(v) || v.charCodeAt(0) < 32 || u(v) ? v : "〿").join("")).join("");
 }, uiRender$1 = async (a) => {
-  const { value: s, schema: c, mode: u, onChange: d, stopEditing: p, tabIndex: v, placeholder: A, options: x, _cache: g } = a, b = isEditable(u, c) && A && !s, y = (S) => {
-    let $ = S.innerText;
-    return $.endsWith(`
-`) && ($ = $.slice(0, -1)), $;
-  }, f = x?.font || getDefaultFont(), m = await getFontKitFont(c.fontName, f, g), E = buildStyledTextContainer(a, m, b ? A : s), w = replaceUnsupportedChars(s, m);
+  const { value: s, schema: c, mode: u, onChange: d, stopEditing: p, tabIndex: v, placeholder: A, options: x, _cache: g } = a, b = isEditable(u, c) && A && !s, y = ($) => {
+    let R = $.innerText;
+    return R.endsWith(`
+`) && (R = R.slice(0, -1)), R;
+  }, f = x?.font || getDefaultFont(), m = resolveFontName(c.fontName, c.bold, c.italic, f), E = await getFontKitFont(m, f, g), w = buildStyledTextContainer(a, E, b ? A : s), S = replaceUnsupportedChars(s, E);
   if (!isEditable(u, c)) {
-    E.innerHTML = w.split("").map((S, $) => `<span style="letter-spacing:${String(s).length === $ + 1 ? 0 : "inherit"};">${S}</span>`).join("");
+    w.innerHTML = S.split("").map(($, R) => `<span style="letter-spacing:${String(s).length === R + 1 ? 0 : "inherit"};">${$}</span>`).join("");
     return;
   }
-  if (makeElementPlainTextContentEditable(E), E.tabIndex = v || 0, E.innerText = u === "designer" ? s : w, E.addEventListener("blur", (S) => {
-    d && d({ key: "content", value: y(S.target) }), p && p();
+  if (makeElementPlainTextContentEditable(w), w.tabIndex = v || 0, w.innerText = u === "designer" ? s : S, w.addEventListener("blur", ($) => {
+    d && d({ key: "content", value: y($.target) }), p && p();
   }), c.dynamicFontSize) {
-    let S;
-    E.addEventListener("keyup", () => {
+    let $;
+    w.addEventListener("keyup", () => {
       setTimeout(() => {
         (() => {
-          if (!E.textContent)
+          if (!w.textContent)
             return;
-          S = calculateDynamicFontSize({
+          $ = calculateDynamicFontSize({
             textSchema: c,
-            fontKitFont: m,
-            value: y(E),
-            startingFontSize: S
-          }), E.style.fontSize = `${S}pt`;
-          const { topAdj: $, bottomAdj: R } = getBrowserVerticalFontAdjustments(m, S ?? c.fontSize ?? DEFAULT_FONT_SIZE, c.lineHeight ?? DEFAULT_LINE_HEIGHT, c.verticalAlignment ?? DEFAULT_VERTICAL_ALIGNMENT);
-          E.style.paddingTop = `${$}px`, E.style.marginBottom = `${R}px`;
+            fontKitFont: E,
+            value: y(w),
+            startingFontSize: $
+          }), w.style.fontSize = `${$}pt`;
+          const { topAdj: R, bottomAdj: _ } = getBrowserVerticalFontAdjustments(E, $ ?? c.fontSize ?? DEFAULT_FONT_SIZE, c.lineHeight ?? DEFAULT_LINE_HEIGHT, c.verticalAlignment ?? DEFAULT_VERTICAL_ALIGNMENT);
+          w.style.paddingTop = `${R}px`, w.style.marginBottom = `${_}px`;
         })();
       }, 0);
     });
   }
-  b && (E.style.color = PLACEHOLDER_FONT_COLOR, E.addEventListener("focus", () => {
-    E.innerText === A && (E.innerText = "", E.style.color = c.fontColor ?? DEFAULT_FONT_COLOR);
+  b && (w.style.color = PLACEHOLDER_FONT_COLOR, w.addEventListener("focus", () => {
+    w.innerText === A && (w.innerText = "", w.style.color = c.fontColor ?? DEFAULT_FONT_COLOR);
   })), u === "designer" && setTimeout(() => {
-    E.focus();
-    const S = window.getSelection(), $ = document.createRange();
-    S && $ && ($.selectNodeContents(E), $.collapse(false), S?.removeAllRanges(), S?.addRange($));
+    w.focus();
+    const $ = window.getSelection(), R = document.createRange();
+    $ && R && (R.selectNodeContents(w), R.collapse(false), $?.removeAllRanges(), $?.addRange(R));
   });
 }, buildStyledTextContainer = (a, s, c) => {
   const { schema: u, rootElement: d, mode: p } = a;
@@ -75223,6 +75244,8 @@ const UseDynamicFontSize = (a) => {
   const E = {
     // Font formatting styles
     fontFamily: u.fontName ? `'${u.fontName}'` : "inherit",
+    fontWeight: u.bold ? "bold" : "normal",
+    fontStyle: u.italic ? "italic" : "normal",
     color: u.fontColor ? u.fontColor : DEFAULT_FONT_COLOR,
     fontSize: `${v ?? u.fontSize ?? DEFAULT_FONT_SIZE}pt`,
     letterSpacing: `${u.characterSpacing ?? DEFAULT_CHARACTER_SPACING}pt`,