@unlev/exeq 0.2.0 → 0.2.1

package/dist/index.d.mts

@@ -1,7 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
 declare function generateId(): string;
-type FieldType = 'text' | 'signature' | 'signed-date' | 'checkbox' | 'initials' | 'blackout' | 'whiteout';
+type FieldType = 'text' | 'dropdown' | 'signature' | 'signed-date' | 'checkbox' | 'initials' | 'blackout' | 'whiteout';
 type TextSubtype = 'freeform' | 'number' | 'date' | 'email' | 'phone';
 interface FormField {
     id: string;

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
 declare function generateId(): string;
-type FieldType = 'text' | 'signature' | 'signed-date' | 'checkbox' | 'initials' | 'blackout' | 'whiteout';
+type FieldType = 'text' | 'dropdown' | 'signature' | 'signed-date' | 'checkbox' | 'initials' | 'blackout' | 'whiteout';
 type TextSubtype = 'freeform' | 'number' | 'date' | 'email' | 'phone';
 interface FormField {
     id: string;

package/dist/index.js

@@ -95,6 +95,12 @@ var FIELD_DEFAULTS = {
     placeholder: "Enter text",
     textSubtype: "freeform"
   },
+  dropdown: {
+    width: 20,
+    height: 3,
+    fontSize: 12,
+    placeholder: "Select..."
+  },
   signature: {
     width: 20,
     height: 6,
@@ -134,6 +140,7 @@ var FIELD_DEFAULTS = {
 };
 var TYPE_LABELS = {
   text: "Text Field",
+  dropdown: "Dropdown",
   signature: "Signature",
   "signed-date": "Signed Date",
   checkbox: "Checkbox",
@@ -407,8 +414,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] = (0, import_react2.useState)("");
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "field-property-panel", children: [
     /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "panel-header", children: [
@@ -435,6 +442,7 @@ function FieldPropertyPanel({ field, signerRoles, onUpdate, onDelete }) {
           onChange: (e) => onUpdate(field.id, { type: e.target.value }),
           children: [
             /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("option", { value: "text", children: "Text" }),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("option", { value: "dropdown", children: "Dropdown" }),
             /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("option", { value: "signature", children: "Signature" }),
             /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("option", { value: "signed-date", children: "Signed Date" }),
             /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("option", { value: "checkbox", children: "Checkbox" }),
@@ -586,8 +594,8 @@ function FieldPropertyPanel({ field, signerRoles, onUpdate, onDelete }) {
         c.value
       )) })
     ] }),
-    field.type === "text" && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "panel-field", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("label", { children: "Predefined Options" }),
+    (field.type === "text" || field.type === "dropdown") && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "panel-field", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("label", { children: field.type === "dropdown" ? "Options" : "Predefined Options" }),
       /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "panel-options-list", children: [
         (field.options || []).map((opt, i) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "panel-option-item", children: [
           /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: opt }),
@@ -633,7 +641,8 @@ function FieldPropertyPanel({ field, signerRoles, onUpdate, onDelete }) {
           )
         ] })
       ] }),
-      (field.options?.length ?? 0) > 0 && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "panel-hint", children: "Signer will choose from these options via dropdown" })
+      field.type === "dropdown" && (field.options?.length ?? 0) === 0 && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "panel-hint", style: { color: "#c44" }, children: "Add at least one option" }),
+      field.type === "text" && (field.options?.length ?? 0) > 0 && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "panel-hint", children: "Signer will choose from these options via dropdown" })
     ] })
   ] });
 }
@@ -782,6 +791,7 @@ function isValidApiKey(key) {
 var import_jsx_runtime4 = require("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" },
@@ -1061,15 +1071,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__ */ (0, import_jsx_runtime4.jsx)(
       "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__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("label", { className: "header-btn header-btn-outline", children: [
       "Change PDF",
@@ -1850,9 +1867,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__ */ (0, import_jsx_runtime6.jsxs)(
         "select",
         {
@@ -1864,7 +1882,7 @@ function SignerView({
           style: fontStyle,
           children: [
             /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("option", { value: "", children: field.placeholder || "Select..." }),
-            field.options.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("option", { value: opt, children: opt }, opt))
+            (field.options || []).map((opt) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("option", { value: opt, children: opt }, opt))
           ]
         }
       );
@@ -1944,8 +1962,8 @@ function SignerView({
                 initialValue: selectedField.value
               }
             ),
-            selectedField.type === "text" && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
-              selectedField.options && selectedField.options.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+            (selectedField.type === "text" || selectedField.type === "dropdown") && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
+              selectedField.type === "dropdown" || selectedField.options && selectedField.options.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
                 "select",
                 {
                   value: selectedField.value,
@@ -1953,7 +1971,7 @@ function SignerView({
                   className: "signer-text-input",
                   children: [
                     /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("option", { value: "", children: selectedField.placeholder || "Select..." }),
-                    selectedField.options.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("option", { value: opt, children: opt }, opt))
+                    (selectedField.options || []).map((opt) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("option", { value: opt, children: opt }, opt))
                   ]
                 }
               ) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(