@unlev/exeq 0.2.0 → 0.2.1

package/dist/index.mjs

@@ -38,6 +38,12 @@ var FIELD_DEFAULTS = {
     placeholder: "Enter text",
     textSubtype: "freeform"
   },
+  dropdown: {
+    width: 20,
+    height: 3,
+    fontSize: 12,
+    placeholder: "Select..."
+  },
   signature: {
     width: 20,
     height: 6,
@@ -77,6 +83,7 @@ var FIELD_DEFAULTS = {
 };
 var TYPE_LABELS = {
   text: "Text Field",
+  dropdown: "Dropdown",
   signature: "Signature",
   "signed-date": "Signed Date",
   checkbox: "Checkbox",
@@ -350,8 +357,8 @@ var INK_COLORS = [
 function FieldPropertyPanel({ field, signerRoles, onUpdate, onDelete }) {
   const color = getSignerColor(field.assignee);
   const isRedactField = field.type === "blackout" || field.type === "whiteout";
-  const isTextField = field.type === "text" || field.type === "signed-date";
-  const showInkColor = field.type === "text" || field.type === "signature" || field.type === "initials" || field.type === "signed-date";
+  const isTextField = field.type === "text" || field.type === "signed-date" || field.type === "dropdown";
+  const showInkColor = field.type === "text" || field.type === "dropdown" || field.type === "signature" || field.type === "initials" || field.type === "signed-date";
   const [newOption, setNewOption] = useState("");
   return /* @__PURE__ */ jsxs2("div", { className: "field-property-panel", children: [
     /* @__PURE__ */ jsxs2("div", { className: "panel-header", children: [
@@ -378,6 +385,7 @@ function FieldPropertyPanel({ field, signerRoles, onUpdate, onDelete }) {
           onChange: (e) => onUpdate(field.id, { type: e.target.value }),
           children: [
             /* @__PURE__ */ jsx2("option", { value: "text", children: "Text" }),
+            /* @__PURE__ */ jsx2("option", { value: "dropdown", children: "Dropdown" }),
             /* @__PURE__ */ jsx2("option", { value: "signature", children: "Signature" }),
             /* @__PURE__ */ jsx2("option", { value: "signed-date", children: "Signed Date" }),
             /* @__PURE__ */ jsx2("option", { value: "checkbox", children: "Checkbox" }),
@@ -529,8 +537,8 @@ function FieldPropertyPanel({ field, signerRoles, onUpdate, onDelete }) {
         c.value
       )) })
     ] }),
-    field.type === "text" && /* @__PURE__ */ jsxs2("div", { className: "panel-field", children: [
-      /* @__PURE__ */ jsx2("label", { children: "Predefined Options" }),
+    (field.type === "text" || field.type === "dropdown") && /* @__PURE__ */ jsxs2("div", { className: "panel-field", children: [
+      /* @__PURE__ */ jsx2("label", { children: field.type === "dropdown" ? "Options" : "Predefined Options" }),
       /* @__PURE__ */ jsxs2("div", { className: "panel-options-list", children: [
         (field.options || []).map((opt, i) => /* @__PURE__ */ jsxs2("div", { className: "panel-option-item", children: [
           /* @__PURE__ */ jsx2("span", { children: opt }),
@@ -576,7 +584,8 @@ function FieldPropertyPanel({ field, signerRoles, onUpdate, onDelete }) {
           )
         ] })
       ] }),
-      (field.options?.length ?? 0) > 0 && /* @__PURE__ */ jsx2("span", { className: "panel-hint", children: "Signer will choose from these options via dropdown" })
+      field.type === "dropdown" && (field.options?.length ?? 0) === 0 && /* @__PURE__ */ jsx2("span", { className: "panel-hint", style: { color: "#c44" }, children: "Add at least one option" }),
+      field.type === "text" && (field.options?.length ?? 0) > 0 && /* @__PURE__ */ jsx2("span", { className: "panel-hint", children: "Signer will choose from these options via dropdown" })
     ] })
   ] });
 }
@@ -725,6 +734,7 @@ function isValidApiKey(key) {
 import { Fragment, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
 var FIELD_TYPE_META = [
   { type: "text", label: "Text", icon: "T" },
+  { type: "dropdown", label: "Dropdown", icon: "\u25BE" },
   { type: "signature", label: "Signature", icon: "\u270D" },
   { type: "signed-date", label: "Date", icon: "\u{1F4C5}" },
   { type: "checkbox", label: "Checkbox", icon: "\u2611" },
@@ -1004,15 +1014,22 @@ function DesignerView({
       }
     }
     const inkColor = field.inkColor || "#000000";
+    const cssFontFamily = field.fontFamily === "Courier" ? '"Courier New", Courier, monospace' : field.fontFamily === "TimesRoman" ? '"Times New Roman", Times, serif' : field.fontFamily === "Helvetica" ? "Helvetica, Arial, sans-serif" : void 0;
     return /* @__PURE__ */ jsx4(
       "div",
       {
         className: "field-overlay-placeholder",
-        style: { color: field.value ? inkColor : void 0, fontSize: `${field.fontSize * 0.6}px` },
+        style: {
+          color: field.value ? inkColor : void 0,
+          fontSize: `${field.fontSize * 0.6}px`,
+          fontFamily: cssFontFamily,
+          letterSpacing: field.letterSpacing ? `${field.letterSpacing * 0.6}px` : void 0,
+          lineHeight: field.lineHeight ? `${field.lineHeight}` : void 0
+        },
         children: field.value || field.placeholder
       }
     );
-  }, []);
+  }, [fields]);
   const headerButtons = pages.length > 0 ? /* @__PURE__ */ jsxs4(Fragment, { children: [
     /* @__PURE__ */ jsxs4("label", { className: "header-btn header-btn-outline", children: [
       "Change PDF",
@@ -1793,9 +1810,10 @@ function SignerView({
     const fontStyle = {
       fontSize: `${field.fontSize * 0.6}px`,
       letterSpacing: field.letterSpacing ? `${field.letterSpacing * 0.6}px` : void 0,
-      fontFamily: field.fontFamily === "Courier" ? "monospace" : field.fontFamily === "TimesRoman" ? "serif" : void 0
+      lineHeight: field.lineHeight ? `${field.lineHeight}` : void 0,
+      fontFamily: field.fontFamily === "Courier" ? '"Courier New", Courier, monospace' : field.fontFamily === "TimesRoman" ? '"Times New Roman", Times, serif' : field.fontFamily === "Helvetica" ? "Helvetica, Arial, sans-serif" : void 0
     };
-    if (field.options && field.options.length > 0) {
+    if (field.type === "dropdown" || field.options && field.options.length > 0) {
       return /* @__PURE__ */ jsxs6(
         "select",
         {
@@ -1807,7 +1825,7 @@ function SignerView({
           style: fontStyle,
           children: [
             /* @__PURE__ */ jsx6("option", { value: "", children: field.placeholder || "Select..." }),
-            field.options.map((opt) => /* @__PURE__ */ jsx6("option", { value: opt, children: opt }, opt))
+            (field.options || []).map((opt) => /* @__PURE__ */ jsx6("option", { value: opt, children: opt }, opt))
           ]
         }
       );
@@ -1887,8 +1905,8 @@ function SignerView({
                 initialValue: selectedField.value
               }
             ),
-            selectedField.type === "text" && /* @__PURE__ */ jsxs6(Fragment2, { children: [
-              selectedField.options && selectedField.options.length > 0 ? /* @__PURE__ */ jsxs6(
+            (selectedField.type === "text" || selectedField.type === "dropdown") && /* @__PURE__ */ jsxs6(Fragment2, { children: [
+              selectedField.type === "dropdown" || selectedField.options && selectedField.options.length > 0 ? /* @__PURE__ */ jsxs6(
                 "select",
                 {
                   value: selectedField.value,
@@ -1896,7 +1914,7 @@ function SignerView({
                   className: "signer-text-input",
                   children: [
                     /* @__PURE__ */ jsx6("option", { value: "", children: selectedField.placeholder || "Select..." }),
-                    selectedField.options.map((opt) => /* @__PURE__ */ jsx6("option", { value: opt, children: opt }, opt))
+                    (selectedField.options || []).map((opt) => /* @__PURE__ */ jsx6("option", { value: opt, children: opt }, opt))
                   ]
                 }
               ) : /* @__PURE__ */ jsx6(