@embedpdf/plugin-form 2.10.0

package/dist/svelte/index.js

@@ -0,0 +1,1567 @@
+import { createPluginPackage } from "@embedpdf/core";
+import { initialDocumentState, FormPlugin, FormPluginPackage as FormPluginPackage$1 } from "@embedpdf/plugin-form";
+export * from "@embedpdf/plugin-form";
+import "svelte/internal/disclose-version";
+import "svelte/internal/flags/legacy";
+import * as $ from "svelte/internal/client";
+import { onMount } from "svelte";
+import { useIOSZoomPrevention, createRenderer, getRendererRegistry } from "@embedpdf/plugin-annotation/svelte";
+import { PDF_FORM_FIELD_TYPE, PDF_FORM_FIELD_FLAG, standardFontCssProperties, isWidgetChecked, ignore, PdfErrorCode, PdfAnnotationSubtype } from "@embedpdf/models";
+import { deepToRaw } from "@embedpdf/utils/svelte";
+import { useCapability, usePlugin } from "@embedpdf/core/svelte";
+var root_2$1 = $.from_html(`<span> </span>`);
+var root_1$7 = $.from_html(`<div style="position: relative; width: 100%; height: 100%;"></div>`);
+var root_3$1 = $.from_html(`<span> </span>`);
+var root$f = $.from_html(`<div><!></div>`);
+function FormTextField($$anchor, $$props) {
+  $.push($$props, true);
+  let isHovered = $.state(false);
+  const object = $.derived(() => $$props.currentObject);
+  const field = $.derived(() => $.get(object).field);
+  const isTextField = $.derived(() => $.get(field).type === PDF_FORM_FIELD_TYPE.TEXTFIELD);
+  const value = $.derived(() => $.get(isTextField) ? $.get(field).value : "");
+  const isComb = $.derived(() => $.get(isTextField) && !!($.get(field).flag & PDF_FORM_FIELD_FLAG.TEXT_COMB) && !!$.get(field).maxLen);
+  const isMultiline = $.derived(() => $.get(isTextField) && !!($.get(field).flag & PDF_FORM_FIELD_FLAG.TEXT_MULTIPLINE));
+  const maxLen = $.derived(() => $.get(isTextField) ? $.get(field).maxLen : void 0);
+  const borderWidth = $.derived(() => ($.get(object).strokeWidth ?? 1) * $$props.scale);
+  const fontCss = $.derived(() => standardFontCssProperties($.get(object).fontFamily));
+  const fontSize = $.derived(() => ($.get(object).fontSize ?? 12) * $$props.scale);
+  const fontColor = $.derived(() => $.get(object).fontColor ?? "#000000");
+  const cellWidth = $.derived(() => $.get(isComb) && $.get(maxLen) ? $.get(object).rect.size.width * $$props.scale / $.get(maxLen) : 0);
+  const chars = $.derived(() => ($.get(value) ?? "").split(""));
+  var div = root$f();
+  div.__pointerdown = (e) => {
+    var _a;
+    if (!$$props.isSelected) (_a = $$props.onClick) == null ? void 0 : _a.call($$props, e);
+  };
+  let styles;
+  var node = $.child(div);
+  {
+    var consequent = ($$anchor2) => {
+      var div_1 = root_1$7();
+      $.each(div_1, 21, () => Array.from({ length: $.get(maxLen) }), $.index, ($$anchor3, _, i) => {
+        var span = root_2$1();
+        let styles_1;
+        var text = $.child(span, true);
+        $.reset(span);
+        $.template_effect(() => {
+          styles_1 = $.set_style(span, "", styles_1, {
+            position: "absolute",
+            top: "0",
+            left: `${i * $.get(cellWidth)}px`,
+            width: `${$.get(cellWidth) ?? ""}px`,
+            height: "100%",
+            display: "flex",
+            "align-items": "center",
+            "justify-content": "center",
+            "border-right": i < $.get(maxLen) - 1 ? `1px solid ${$.get(object).strokeColor ?? "rgba(0, 0, 0, 0.2)"}` : "none",
+            "box-sizing": "border-box",
+            "font-size": `${$.get(fontSize) ?? ""}px`,
+            "font-family": $.get(fontCss).fontFamily,
+            "font-weight": $.get(fontCss).fontWeight,
+            "font-style": $.get(fontCss).fontStyle,
+            color: $.get(fontColor),
+            "line-height": "1.2"
+          });
+          $.set_text(text, $.get(chars)[i] || "");
+        });
+        $.append($$anchor3, span);
+      });
+      $.reset(div_1);
+      $.append($$anchor2, div_1);
+    };
+    var alternate = ($$anchor2) => {
+      var span_1 = root_3$1();
+      let styles_2;
+      var text_1 = $.child(span_1, true);
+      $.reset(span_1);
+      $.template_effect(() => {
+        styles_2 = $.set_style(span_1, "", styles_2, {
+          "font-size": `${$.get(fontSize) ?? ""}px`,
+          "font-family": $.get(fontCss).fontFamily,
+          "font-weight": $.get(fontCss).fontWeight,
+          "font-style": $.get(fontCss).fontStyle,
+          color: $.get(fontColor),
+          "line-height": "1.2",
+          display: "block",
+          width: "100%",
+          "white-space": $.get(isMultiline) ? "pre-wrap" : "nowrap",
+          "word-break": $.get(isMultiline) ? "break-word" : "normal",
+          "overflow-wrap": $.get(isMultiline) ? "break-word" : "normal",
+          overflow: "hidden",
+          "text-overflow": $.get(isMultiline) ? "clip" : "ellipsis"
+        });
+        $.set_text(text_1, $.get(value));
+      });
+      $.append($$anchor2, span_1);
+    };
+    $.if(node, ($$render) => {
+      if ($.get(isComb) && $.get(maxLen)) $$render(consequent);
+      else $$render(alternate, false);
+    });
+  }
+  $.reset(div);
+  $.template_effect(() => styles = $.set_style(div, "", styles, {
+    position: "absolute",
+    inset: "0",
+    background: $.get(object).color ?? "rgba(255, 255, 255, 0.9)",
+    border: `${$.get(borderWidth) ?? ""}px solid ${$.get(object).strokeColor ?? "rgba(0, 0, 0, 0.2)" ?? ""}`,
+    outline: $.get(isHovered) || $$props.isSelected ? "1px solid rgba(66, 133, 244, 0.5)" : "none",
+    "outline-offset": "-1px",
+    "box-sizing": "border-box",
+    "pointer-events": "auto",
+    cursor: $$props.isSelected ? "move" : "pointer",
+    display: "flex",
+    "align-items": $.get(isMultiline) ? "flex-start" : "center",
+    overflow: "hidden",
+    padding: !$.get(isComb) ? `${$.get(borderWidth)}px ${$.get(borderWidth)}px` : void 0
+  }));
+  $.event("mouseenter", div, () => $.set(isHovered, true));
+  $.event("mouseleave", div, () => $.set(isHovered, false));
+  $.append($$anchor, div);
+  $.pop();
+}
+$.delegate(["pointerdown"]);
+var root_1$6 = $.from_svg(`<svg viewBox="0 0 100 100" style="width: 100%; height: 100%;"><path d="M28 48C27.45 50.21 29.45 63.13 30 67C30.55 69.21 34.58 72 39 72C44.52 71.45 76.55 32.55 76 32C77.1 31.45 76 25 76 25C74.34 22.24 68 25.45 68 26C68 26 43.55 53 43 53C41.34 53 40.55 41.1 40 40C33.37 36.69 29.1 45.79 28 48Z" fill="#000000"></path></svg>`);
+var root$e = $.from_html(`<div><!></div>`);
+function FormCheckbox($$anchor, $$props) {
+  $.push($$props, true);
+  let isHovered = $.state(false);
+  const object = $.derived(() => $$props.currentObject);
+  const isChecked = $.derived(() => isWidgetChecked($.get(object)));
+  const borderWidth = $.derived(() => ($.get(object).strokeWidth ?? 1) * $$props.scale);
+  var div = root$e();
+  div.__pointerdown = (e) => {
+    var _a;
+    if (!$$props.isSelected) (_a = $$props.onClick) == null ? void 0 : _a.call($$props, e);
+  };
+  let styles;
+  var node = $.child(div);
+  {
+    var consequent = ($$anchor2) => {
+      var svg = root_1$6();
+      $.append($$anchor2, svg);
+    };
+    $.if(node, ($$render) => {
+      if ($.get(isChecked)) $$render(consequent);
+    });
+  }
+  $.reset(div);
+  $.template_effect(() => styles = $.set_style(div, "", styles, {
+    position: "absolute",
+    inset: "0",
+    background: $.get(object).color ?? "#FFFFFF",
+    border: `${$.get(borderWidth) ?? ""}px solid ${$.get(object).strokeColor ?? "#000000" ?? ""}`,
+    outline: $.get(isHovered) || $$props.isSelected ? "1px solid rgba(66, 133, 244, 0.5)" : "none",
+    "outline-offset": "-1px",
+    "box-sizing": "border-box",
+    "pointer-events": "auto",
+    cursor: $$props.isSelected ? "move" : "pointer",
+    display: "flex",
+    "align-items": "center",
+    "justify-content": "center"
+  }));
+  $.event("mouseenter", div, () => $.set(isHovered, true));
+  $.event("mouseleave", div, () => $.set(isHovered, false));
+  $.append($$anchor, div);
+  $.pop();
+}
+$.delegate(["pointerdown"]);
+var root_1$5 = $.from_html(`<div></div>`);
+var root$d = $.from_html(`<div><!></div>`);
+function FormRadioButton($$anchor, $$props) {
+  $.push($$props, true);
+  let isHovered = $.state(false);
+  const object = $.derived(() => $$props.currentObject);
+  const isChecked = $.derived(() => isWidgetChecked($.get(object)));
+  const borderWidth = $.derived(() => ($.get(object).strokeWidth ?? 1) * $$props.scale);
+  var div = root$d();
+  div.__pointerdown = (e) => {
+    var _a;
+    if (!$$props.isSelected) (_a = $$props.onClick) == null ? void 0 : _a.call($$props, e);
+  };
+  let styles;
+  var node = $.child(div);
+  {
+    var consequent = ($$anchor2) => {
+      var div_1 = root_1$5();
+      $.set_style(div_1, "", {}, {
+        width: "50%",
+        height: "50%",
+        "border-radius": "50%",
+        background: "#000000"
+      });
+      $.append($$anchor2, div_1);
+    };
+    $.if(node, ($$render) => {
+      if ($.get(isChecked)) $$render(consequent);
+    });
+  }
+  $.reset(div);
+  $.template_effect(() => styles = $.set_style(div, "", styles, {
+    position: "absolute",
+    inset: "0",
+    background: $.get(object).color ?? "#FFFFFF",
+    border: `${$.get(borderWidth) ?? ""}px solid ${$.get(object).strokeColor ?? "#000000" ?? ""}`,
+    "border-radius": "50%",
+    outline: $.get(isHovered) || $$props.isSelected ? "1px solid rgba(66, 133, 244, 0.5)" : "none",
+    "outline-offset": "-1px",
+    "box-sizing": "border-box",
+    "pointer-events": "auto",
+    cursor: $$props.isSelected ? "move" : "pointer",
+    display: "flex",
+    "align-items": "center",
+    "justify-content": "center"
+  }));
+  $.event("mouseenter", div, () => $.set(isHovered, true));
+  $.event("mouseleave", div, () => $.set(isHovered, false));
+  $.append($$anchor, div);
+  $.pop();
+}
+$.delegate(["pointerdown"]);
+var root$c = $.from_html(`<div><span> </span> <div><svg viewBox="0 0 10 6" fill="currentColor"><path d="M0 0 L5 6 L10 0 Z"></path></svg></div></div>`);
+function FormCombobox($$anchor, $$props) {
+  $.push($$props, true);
+  let isHovered = $.state(false);
+  const object = $.derived(() => $$props.currentObject);
+  const field = $.derived(() => $.get(object).field);
+  const options = $.derived(() => $.get(field).type === PDF_FORM_FIELD_TYPE.COMBOBOX ? $.get(field).options : []);
+  const selectedLabel = $.derived(() => {
+    var _a;
+    return ((_a = $.get(options).find((o) => o.isSelected)) == null ? void 0 : _a.label) ?? "";
+  });
+  const borderWidth = $.derived(() => ($.get(object).strokeWidth ?? 1) * $$props.scale);
+  const fontSize = $.derived(() => ($.get(object).fontSize ?? 12) * $$props.scale);
+  const fontCss = $.derived(() => standardFontCssProperties($.get(object).fontFamily));
+  var div = root$c();
+  div.__pointerdown = (e) => {
+    var _a;
+    if (!$$props.isSelected) (_a = $$props.onClick) == null ? void 0 : _a.call($$props, e);
+  };
+  let styles;
+  var span = $.child(div);
+  let styles_1;
+  var text = $.child(span, true);
+  $.reset(span);
+  var div_1 = $.sibling(span, 2);
+  let styles_2;
+  var svg = $.child(div_1);
+  $.reset(div_1);
+  $.reset(div);
+  $.template_effect(() => {
+    styles = $.set_style(div, "", styles, {
+      position: "absolute",
+      inset: "0",
+      background: $.get(object).color ?? "#FFFFFF",
+      border: `${$.get(borderWidth) ?? ""}px solid ${$.get(object).strokeColor ?? "#000000" ?? ""}`,
+      outline: $.get(isHovered) || $$props.isSelected ? "1px solid rgba(66, 133, 244, 0.5)" : "none",
+      "outline-offset": "-1px",
+      "box-sizing": "border-box",
+      "pointer-events": "auto",
+      cursor: $$props.isSelected ? "move" : "pointer",
+      display: "flex",
+      "align-items": "center",
+      overflow: "hidden"
+    });
+    styles_1 = $.set_style(span, "", styles_1, {
+      flex: "1",
+      padding: `0 ${4 * $$props.scale}px`,
+      "font-size": `${$.get(fontSize) ?? ""}px`,
+      "font-family": $.get(fontCss).fontFamily,
+      "font-weight": $.get(fontCss).fontWeight,
+      "font-style": $.get(fontCss).fontStyle,
+      color: $.get(object).fontColor ?? "#000000",
+      "white-space": "nowrap",
+      overflow: "hidden",
+      "text-overflow": "ellipsis"
+    });
+    $.set_text(text, $.get(selectedLabel));
+    styles_2 = $.set_style(div_1, "", styles_2, {
+      width: `${13 * $$props.scale}px`,
+      "min-width": `${13 * $$props.scale}px`,
+      height: "100%",
+      display: "flex",
+      "align-items": "center",
+      "justify-content": "center",
+      "border-left": `1px solid ${$.get(object).strokeColor ?? "#000000" ?? ""}`
+    });
+    $.set_style(svg, `width: ${8 * $$props.scale}px; height: ${5 * $$props.scale}px;`);
+  });
+  $.event("mouseenter", div, () => $.set(isHovered, true));
+  $.event("mouseleave", div, () => $.set(isHovered, false));
+  $.append($$anchor, div);
+  $.pop();
+}
+$.delegate(["pointerdown"]);
+var root_1$4 = $.from_html(`<div> </div>`);
+var root$b = $.from_html(`<div></div>`);
+function FormListbox($$anchor, $$props) {
+  $.push($$props, true);
+  let isHovered = $.state(false);
+  const object = $.derived(() => $$props.currentObject);
+  const field = $.derived(() => $.get(object).field);
+  const options = $.derived(() => $.get(field).type === PDF_FORM_FIELD_TYPE.LISTBOX ? $.get(field).options : []);
+  const borderWidth = $.derived(() => ($.get(object).strokeWidth ?? 1) * $$props.scale);
+  const fontSize = $.derived(() => ($.get(object).fontSize ?? 12) * $$props.scale);
+  const lineHeight = $.derived(() => $.get(fontSize) * 1.2);
+  const fontCss = $.derived(() => standardFontCssProperties($.get(object).fontFamily));
+  var div = root$b();
+  div.__pointerdown = (e) => {
+    var _a;
+    if (!$$props.isSelected) (_a = $$props.onClick) == null ? void 0 : _a.call($$props, e);
+  };
+  let styles;
+  $.each(div, 21, () => $.get(options), $.index, ($$anchor2, opt) => {
+    var div_1 = root_1$4();
+    let styles_1;
+    var text = $.child(div_1, true);
+    $.reset(div_1);
+    $.template_effect(() => {
+      styles_1 = $.set_style(div_1, "", styles_1, {
+        padding: `0 ${4 * $$props.scale}px`,
+        "font-size": `${$.get(fontSize) ?? ""}px`,
+        "line-height": `${$.get(lineHeight) ?? ""}px`,
+        "font-family": $.get(fontCss).fontFamily,
+        "font-weight": $.get(fontCss).fontWeight,
+        "font-style": $.get(fontCss).fontStyle,
+        color: $.get(opt).isSelected ? "#FFFFFF" : $.get(object).fontColor ?? "#000000",
+        background: $.get(opt).isSelected ? "rgba(0, 51, 113, 1)" : "transparent",
+        "white-space": "nowrap",
+        overflow: "hidden",
+        "text-overflow": "ellipsis"
+      });
+      $.set_text(text, $.get(opt).label);
+    });
+    $.append($$anchor2, div_1);
+  });
+  $.reset(div);
+  $.template_effect(() => styles = $.set_style(div, "", styles, {
+    position: "absolute",
+    inset: "0",
+    background: $.get(object).color ?? "#FFFFFF",
+    border: `${$.get(borderWidth) ?? ""}px solid ${$.get(object).strokeColor ?? "#000000" ?? ""}`,
+    outline: $.get(isHovered) || $$props.isSelected ? "1px solid rgba(66, 133, 244, 0.5)" : "none",
+    "outline-offset": "-1px",
+    "box-sizing": "border-box",
+    "pointer-events": "auto",
+    cursor: $$props.isSelected ? "move" : "pointer",
+    overflow: "hidden",
+    display: "flex",
+    "flex-direction": "column"
+  }));
+  $.event("mouseenter", div, () => $.set(isHovered, true));
+  $.event("mouseleave", div, () => $.set(isHovered, false));
+  $.append($$anchor, div);
+  $.pop();
+}
+$.delegate(["pointerdown"]);
+const useFormPlugin = () => usePlugin(FormPlugin.id);
+const useFormCapability = () => useCapability(FormPlugin.id);
+const useFormDocumentState = (getDocumentId) => {
+  const formCapability = useFormCapability();
+  let state = $.state($.proxy({ ...initialDocumentState }));
+  const documentId = $.derived(getDocumentId);
+  $.user_effect(() => {
+    if (!formCapability.provides || !$.get(documentId)) {
+      $.set(state, { ...initialDocumentState }, true);
+      return;
+    }
+    const scope = formCapability.provides.forDocument($.get(documentId));
+    $.set(state, scope.getState(), true);
+    return scope.onStateChange((newState) => {
+      $.set(state, newState, true);
+    });
+  });
+  return {
+    get state() {
+      return $.get(state);
+    }
+  };
+};
+function useFormWidgetState(props) {
+  const formCapability = useFormCapability();
+  let renderKey = $.state(0);
+  const scope = $.derived(() => {
+    var _a;
+    return ((_a = formCapability.provides) == null ? void 0 : _a.forDocument(props.documentId)) ?? null;
+  });
+  const annotation = $.derived(() => props.currentObject);
+  const field = $.derived(() => $.get(annotation).field);
+  const scale = $.derived(() => props.scale);
+  const pageIndex = $.derived(() => props.pageIndex);
+  const isReadOnly = $.derived(() => !!($.get(field).flag & PDF_FORM_FIELD_FLAG.READONLY));
+  $.user_effect(() => {
+    if (!$.get(scope)) return;
+    const id = $.get(annotation).id;
+    return $.get(scope).onFieldValueChange((event) => {
+      if (event.annotationId === id) {
+        $.update(renderKey);
+      }
+    });
+  });
+  function handleChangeField(newField) {
+    if (!$.get(scope)) return;
+    $.get(scope).setFormFieldValues($.get(pageIndex), deepToRaw($.get(annotation)), deepToRaw(newField));
+  }
+  return {
+    get annotation() {
+      return $.get(annotation);
+    },
+    get field() {
+      return $.get(field);
+    },
+    get scale() {
+      return $.get(scale);
+    },
+    get pageIndex() {
+      return $.get(pageIndex);
+    },
+    get scope() {
+      return $.get(scope);
+    },
+    handleChangeField,
+    get renderKey() {
+      return $.get(renderKey);
+    },
+    get isReadOnly() {
+      return $.get(isReadOnly);
+    }
+  };
+}
+var root_1$3 = $.from_html(`<img alt=""/>`);
+function RenderWidget($$anchor, $$props) {
+  $.push($$props, true);
+  let scaleFactor = $.prop($$props, "scaleFactor", 3, 1), renderKey = $.prop($$props, "renderKey", 3, 0), style = $.prop($$props, "style", 3, "");
+  const formCapability = useFormCapability();
+  let imageUrl = $.state(null);
+  let prevUrl = null;
+  $.user_effect(() => {
+    if (!formCapability.provides) return;
+    const { width, height } = $$props.annotation.rect.size;
+    $$props.annotation.id;
+    const sf = scaleFactor();
+    renderKey();
+    const pi = $$props.pageIndex;
+    const task = formCapability.provides.renderWidget({
+      pageIndex: pi,
+      annotation: deepToRaw($$props.annotation),
+      options: { scaleFactor: sf, dpr: window.devicePixelRatio }
+    });
+    task.wait(
+      (blob) => {
+        const url = URL.createObjectURL(blob);
+        if (prevUrl) {
+          URL.revokeObjectURL(prevUrl);
+        }
+        prevUrl = url;
+        $.set(imageUrl, url, true);
+      },
+      ignore
+    );
+    return () => {
+      task.abort({
+        code: PdfErrorCode.Cancelled,
+        message: "canceled render task"
+      });
+      if (prevUrl) {
+        URL.revokeObjectURL(prevUrl);
+        prevUrl = null;
+      }
+    };
+  });
+  var fragment = $.comment();
+  var node = $.first_child(fragment);
+  {
+    var consequent = ($$anchor2) => {
+      var img = root_1$3();
+      $.template_effect(() => {
+        $.set_attribute(img, "src", $.get(imageUrl));
+        $.set_style(img, `width: 100%; height: 100%; display: block; ${style() ?? ""}`);
+      });
+      $.append($$anchor2, img);
+    };
+    $.if(node, ($$render) => {
+      if ($.get(imageUrl)) $$render(consequent);
+    });
+  }
+  $.append($$anchor, fragment);
+  $.pop();
+}
+var root_2 = $.from_html(`<span> </span>`);
+var root_3 = $.from_html(`<span></span>`);
+var root_1$2 = $.from_html(`<div><input/> <!> <!></div>`);
+var root_4 = $.from_html(`<textarea></textarea>`);
+var root_5 = $.from_html(`<input/>`);
+var root_7 = $.from_html(`<div><!></div>`);
+var root_11 = $.from_html(`<div><!></div>`);
+var root_14 = $.from_html(`<div><!></div>`);
+function TextField($$anchor, $$props) {
+  $.push($$props, true);
+  const combContent = ($$anchor2) => {
+    var div = root_1$2();
+    let styles;
+    var input = $.child(div);
+    $.remove_input_defaults(input);
+    input.__input = changeValue;
+    $.set_style(input, "", {}, {
+      position: "absolute",
+      top: "0",
+      left: "0",
+      width: "100%",
+      height: "100%",
+      opacity: "0",
+      padding: "0",
+      margin: "0",
+      border: "none",
+      "z-index": "1"
+    });
+    $.action(input, ($$node) => refAction == null ? void 0 : refAction($$node));
+    var node_1 = $.sibling(input, 2);
+    $.each(node_1, 17, () => Array.from({ length: $.get(maxLen) }), $.index, ($$anchor3, _, i) => {
+      var span = root_2();
+      let styles_1;
+      var text = $.child(span, true);
+      $.reset(span);
+      $.template_effect(() => {
+        styles_1 = $.set_style(span, "", styles_1, {
+          position: "absolute",
+          top: "0",
+          height: "100%",
+          display: "flex",
+          "align-items": "center",
+          "justify-content": "center",
+          "pointer-events": "none",
+          left: `${i * $.get(cellWidth)}px`,
+          width: `${$.get(cellWidth) ?? ""}px`,
+          color: $$props.annotation.fontColor,
+          "font-family": $.get(fontCss).fontFamily,
+          "font-weight": $.get(fontCss).fontWeight,
+          "font-style": $.get(fontCss).fontStyle,
+          "font-size": `${ios.adjustedFontPx ?? ""}px`
+        });
+        $.set_text(text, $.get(chars)[i] || "");
+      });
+      $.append($$anchor3, span);
+    });
+    var node_2 = $.sibling(node_1, 2);
+    {
+      var consequent = ($$anchor3) => {
+        var span_1 = root_3();
+        let styles_2;
+        $.template_effect(() => styles_2 = $.set_style(span_1, "", styles_2, {
+          position: "absolute",
+          top: "15%",
+          height: "70%",
+          width: "1px",
+          "background-color": "black",
+          "pointer-events": "none",
+          left: `${$.get(caretIndex) * $.get(cellWidth) + $.get(cellWidth) / 2}px`,
+          opacity: $.get(caretVisible) ? 1 : 0
+        }));
+        $.append($$anchor3, span_1);
+      };
+      $.if(node_2, ($$render) => {
+        if ($.get(caretIndex) < $.get(maxLen)) $$render(consequent);
+      });
+    }
+    $.reset(div);
+    $.template_effect(() => {
+      styles = $.set_style(div, "", styles, {
+        position: "relative",
+        width: "100%",
+        height: "100%",
+        "border-radius": "0",
+        "box-sizing": "border-box",
+        "border-style": "solid",
+        "background-color": $$props.annotation.color ?? "transparent",
+        "border-color": $$props.annotation.strokeColor ?? "transparent",
+        "border-width": `${$.get(bw) ?? ""}px`
+      });
+      input.required = $.get(isRequired);
+      input.disabled = $.get(isDisabled);
+      $.set_attribute(input, "type", $.get(isPassword) ? "password" : "text");
+      $.set_attribute(input, "name", $.get(name));
+      $.set_attribute(input, "aria-label", $.get(name));
+      $.set_value(input, $.get(localValue));
+      $.set_attribute(input, "maxlength", $.get(maxLen));
+    });
+    $.event("focus", input, function(...$$args) {
+      var _a;
+      (_a = $$props.onFocus) == null ? void 0 : _a.apply(this, $$args);
+    });
+    $.event("blur", input, function(...$$args) {
+      var _a;
+      (_a = $$props.onBlur) == null ? void 0 : _a.apply(this, $$args);
+    });
+    $.append($$anchor2, div);
+  };
+  const textareaContent = ($$anchor2) => {
+    var textarea = root_4();
+    $.remove_textarea_child(textarea);
+    textarea.__input = changeValue;
+    let styles_3;
+    $.action(textarea, ($$node) => refAction == null ? void 0 : refAction($$node));
+    $.template_effect(() => {
+      textarea.required = $.get(isRequired);
+      textarea.disabled = $.get(isDisabled);
+      $.set_attribute(textarea, "name", $.get(name));
+      $.set_attribute(textarea, "aria-label", $.get(name));
+      $.set_value(textarea, $.get(localValue));
+      $.set_attribute(textarea, "maxlength", $.get(maxLen));
+      styles_3 = $.set_style(textarea, "", styles_3, {
+        "background-color": $$props.annotation.color ?? "transparent",
+        "border-color": $$props.annotation.strokeColor ?? "transparent",
+        "border-width": `${$.get(bw) ?? ""}px`,
+        color: $$props.annotation.fontColor,
+        "font-family": $.get(fontCss).fontFamily,
+        "font-weight": $.get(fontCss).fontWeight,
+        "font-style": $.get(fontCss).fontStyle,
+        "font-size": `${ios.adjustedFontPx ?? ""}px`,
+        padding: `${$.get(bw) ?? ""}px`,
+        position: "absolute",
+        top: "0",
+        left: "0",
+        width: "100%",
+        height: "100%",
+        margin: "0",
+        "border-radius": "0",
+        outline: "none",
+        "box-sizing": "border-box",
+        "border-style": "solid",
+        resize: "none",
+        "line-height": "1.14"
+      });
+    });
+    $.event("focus", textarea, function(...$$args) {
+      var _a;
+      (_a = $$props.onFocus) == null ? void 0 : _a.apply(this, $$args);
+    });
+    $.event("blur", textarea, function(...$$args) {
+      var _a;
+      (_a = $$props.onBlur) == null ? void 0 : _a.apply(this, $$args);
+    });
+    $.append($$anchor2, textarea);
+  };
+  const inputContent = ($$anchor2) => {
+    var input_1 = root_5();
+    $.remove_input_defaults(input_1);
+    input_1.__input = changeValue;
+    let styles_4;
+    $.action(input_1, ($$node) => refAction == null ? void 0 : refAction($$node));
+    $.template_effect(() => {
+      input_1.required = $.get(isRequired);
+      input_1.disabled = $.get(isDisabled);
+      $.set_attribute(input_1, "type", $.get(isPassword) ? "password" : "text");
+      $.set_attribute(input_1, "name", $.get(name));
+      $.set_attribute(input_1, "aria-label", $.get(name));
+      $.set_value(input_1, $.get(localValue));
+      $.set_attribute(input_1, "maxlength", $.get(maxLen));
+      styles_4 = $.set_style(input_1, "", styles_4, {
+        "background-color": $$props.annotation.color ?? "transparent",
+        "border-color": $$props.annotation.strokeColor ?? "transparent",
+        "border-width": `${$.get(bw) ?? ""}px`,
+        color: $$props.annotation.fontColor,
+        "font-family": $.get(fontCss).fontFamily,
+        "font-weight": $.get(fontCss).fontWeight,
+        "font-style": $.get(fontCss).fontStyle,
+        "font-size": `${ios.adjustedFontPx ?? ""}px`,
+        padding: `${$.get(bw) ?? ""}px`,
+        position: "absolute",
+        top: "0",
+        left: "0",
+        width: "100%",
+        height: "100%",
+        margin: "0",
+        "border-radius": "0",
+        outline: "none",
+        "box-sizing": "border-box",
+        "border-style": "solid"
+      });
+    });
+    $.event("focus", input_1, function(...$$args) {
+      var _a;
+      (_a = $$props.onFocus) == null ? void 0 : _a.apply(this, $$args);
+    });
+    $.event("blur", input_1, function(...$$args) {
+      var _a;
+      (_a = $$props.onBlur) == null ? void 0 : _a.apply(this, $$args);
+    });
+    $.append($$anchor2, input_1);
+  };
+  let syncExternalValue = $.prop($$props, "syncExternalValue", 3, true);
+  const field = $.derived(() => $$props.annotation.field);
+  const flag = $.derived(() => $.get(field).flag);
+  const name = $.derived(() => $.get(field).name);
+  const value = $.derived(() => $.get(field).value);
+  let localValue = $.state($.proxy($.get(value)));
+  $.user_effect(() => {
+    if (!syncExternalValue()) return;
+    $.set(localValue, $.get(value), true);
+  });
+  function changeValue(evt) {
+    var _a;
+    const newValue = evt.target.value;
+    $.set(localValue, newValue, true);
+    (_a = $$props.onChangeField) == null ? void 0 : _a.call($$props, { ...$.get(field), value: newValue });
+  }
+  const bw = $.derived(() => ($$props.annotation.strokeWidth ?? 0) * $$props.scale);
+  const fontCss = $.derived(() => standardFontCssProperties($$props.annotation.fontFamily));
+  const computedFontPx = $.derived(() => $$props.annotation.fontSize * $$props.scale);
+  const ios = useIOSZoomPrevention(() => $.get(computedFontPx), () => true);
+  const isDisabled = $.derived(() => !$$props.isEditable || !!($.get(flag) & PDF_FORM_FIELD_FLAG.READONLY));
+  const isRequired = $.derived(() => !!($.get(flag) & PDF_FORM_FIELD_FLAG.REQUIRED));
+  const isPassword = $.derived(() => !!($.get(flag) & PDF_FORM_FIELD_FLAG.TEXT_PASSWORD));
+  const isMultipleLine = $.derived(() => !!($.get(flag) & PDF_FORM_FIELD_FLAG.TEXT_MULTIPLINE));
+  const isComb = $.derived(() => !!($.get(flag) & PDF_FORM_FIELD_FLAG.TEXT_COMB));
+  const maxLen = $.derived(() => $.get(field).maxLen);
+  const cellWidth = $.derived(() => $.get(isComb) && $.get(maxLen) ? $$props.annotation.rect.size.width * $$props.scale / $.get(maxLen) : 0);
+  const chars = $.derived(() => ($.get(localValue) || "").split(""));
+  const caretIndex = $.derived(() => $.get(chars).length);
+  let caretVisible = $.state(true);
+  let caretInterval;
+  $.user_effect(() => {
+    $.get(caretIndex);
+    $.set(caretVisible, true);
+    clearInterval(caretInterval);
+    caretInterval = setInterval(
+      () => {
+        $.set(caretVisible, !$.get(caretVisible));
+      },
+      530
+    );
+    return () => clearInterval(caretInterval);
+  });
+  function refAction(node) {
+    var _a;
+    (_a = $$props.inputRef) == null ? void 0 : _a.call($$props, node);
+    return { destroy: () => {
+      var _a2;
+      return (_a2 = $$props.inputRef) == null ? void 0 : _a2.call($$props, null);
+    } };
+  }
+  var fragment = $.comment();
+  var node_3 = $.first_child(fragment);
+  {
+    var consequent_2 = ($$anchor2) => {
+      var fragment_1 = $.comment();
+      var node_4 = $.first_child(fragment_1);
+      {
+        var consequent_1 = ($$anchor3) => {
+          var div_1 = root_7();
+          var node_5 = $.child(div_1);
+          combContent(node_5);
+          $.reset(div_1);
+          $.template_effect(() => $.set_style(div_1, ios.wrapperStyle));
+          $.append($$anchor3, div_1);
+        };
+        var alternate = ($$anchor3) => {
+          combContent($$anchor3);
+        };
+        $.if(node_4, ($$render) => {
+          if (ios.wrapperStyle) $$render(consequent_1);
+          else $$render(alternate, false);
+        });
+      }
+      $.append($$anchor2, fragment_1);
+    };
+    var alternate_4 = ($$anchor2) => {
+      var fragment_3 = $.comment();
+      var node_6 = $.first_child(fragment_3);
+      {
+        var consequent_4 = ($$anchor3) => {
+          var fragment_4 = $.comment();
+          var node_7 = $.first_child(fragment_4);
+          {
+            var consequent_3 = ($$anchor4) => {
+              var div_2 = root_11();
+              var node_8 = $.child(div_2);
+              textareaContent(node_8);
+              $.reset(div_2);
+              $.template_effect(() => $.set_style(div_2, ios.wrapperStyle));
+              $.append($$anchor4, div_2);
+            };
+            var alternate_1 = ($$anchor4) => {
+              textareaContent($$anchor4);
+            };
+            $.if(node_7, ($$render) => {
+              if (ios.wrapperStyle) $$render(consequent_3);
+              else $$render(alternate_1, false);
+            });
+          }
+          $.append($$anchor3, fragment_4);
+        };
+        var alternate_3 = ($$anchor3) => {
+          var fragment_6 = $.comment();
+          var node_9 = $.first_child(fragment_6);
+          {
+            var consequent_5 = ($$anchor4) => {
+              var div_3 = root_14();
+              var node_10 = $.child(div_3);
+              inputContent(node_10);
+              $.reset(div_3);
+              $.template_effect(() => $.set_style(div_3, ios.wrapperStyle));
+              $.append($$anchor4, div_3);
+            };
+            var alternate_2 = ($$anchor4) => {
+              inputContent($$anchor4);
+            };
+            $.if(
+              node_9,
+              ($$render) => {
+                if (ios.wrapperStyle) $$render(consequent_5);
+                else $$render(alternate_2, false);
+              },
+              true
+            );
+          }
+          $.append($$anchor3, fragment_6);
+        };
+        $.if(
+          node_6,
+          ($$render) => {
+            if ($.get(isMultipleLine)) $$render(consequent_4);
+            else $$render(alternate_3, false);
+          },
+          true
+        );
+      }
+      $.append($$anchor2, fragment_3);
+    };
+    $.if(node_3, ($$render) => {
+      if ($.get(isComb) && $.get(maxLen)) $$render(consequent_2);
+      else $$render(alternate_4, false);
+    });
+  }
+  $.append($$anchor, fragment);
+  $.pop();
+}
+$.delegate(["input"]);
+var root$a = $.from_html(`<div style="width: 100%; height: 100%; overflow: hidden; position: relative; pointer-events: auto; outline: none;"><!> <div><!></div></div>`);
+function TextFillMode($$anchor, $$props) {
+  $.push($$props, true);
+  let props = $.rest_props($$props, ["$$slots", "$$events", "$$legacy"]);
+  const widgetState = useFormWidgetState(props);
+  const formDocState = useFormDocumentState(() => $$props.documentId);
+  let editing = $.state(false);
+  let inputEl = null;
+  const isFocused = $.derived(() => formDocState.state.selectedFieldId === widgetState.annotation.id);
+  $.user_effect(() => {
+    if ($.get(isFocused) && inputEl && document.activeElement !== inputEl) {
+      inputEl.focus();
+    }
+  });
+  function handleFocus() {
+    var _a;
+    if (widgetState.isReadOnly) return;
+    (_a = widgetState.scope) == null ? void 0 : _a.selectField(widgetState.annotation.id);
+    $.set(editing, true);
+  }
+  function handleBlur() {
+    var _a, _b;
+    $.set(editing, false);
+    if (((_a = widgetState.scope) == null ? void 0 : _a.getSelectedFieldId()) === widgetState.annotation.id) {
+      (_b = widgetState.scope) == null ? void 0 : _b.deselectField();
+    }
+  }
+  function handleInputRef(el) {
+    inputEl = el;
+  }
+  var div = root$a();
+  var node = $.child(div);
+  {
+    let $0 = $.derived(() => $.get(editing) ? "hidden" : "visible");
+    RenderWidget(node, {
+      get pageIndex() {
+        return widgetState.pageIndex;
+      },
+      get annotation() {
+        return widgetState.annotation;
+      },
+      get scaleFactor() {
+        return widgetState.scale;
+      },
+      get renderKey() {
+        return widgetState.renderKey;
+      },
+      get style() {
+        return `position: absolute; inset: 0; pointer-events: none; visibility: ${$.get($0) ?? ""};`;
+      }
+    });
+  }
+  var div_1 = $.sibling(node, 2);
+  var node_1 = $.child(div_1);
+  {
+    let $0 = $.derived(() => !$.get(editing));
+    TextField(node_1, {
+      get annotation() {
+        return widgetState.annotation;
+      },
+      get scale() {
+        return widgetState.scale;
+      },
+      get pageIndex() {
+        return widgetState.pageIndex;
+      },
+      isEditable: true,
+      get onChangeField() {
+        return widgetState.handleChangeField;
+      },
+      get syncExternalValue() {
+        return $.get($0);
+      },
+      onFocus: handleFocus,
+      onBlur: handleBlur,
+      inputRef: handleInputRef
+    });
+  }
+  $.reset(div_1);
+  $.reset(div);
+  $.template_effect(() => $.set_style(div_1, `position: absolute; inset: 0; z-index: 1; opacity: ${$.get(editing) ? 1 : 0};`));
+  $.append($$anchor, div);
+  $.pop();
+}
+var root$9 = $.from_html(`<div><!></div>`);
+function ToggleFillMode($$anchor, $$props) {
+  $.push($$props, true);
+  let props = $.rest_props($$props, ["$$slots", "$$events", "$$legacy"]);
+  const widgetState = useFormWidgetState(props);
+  const formDocState = useFormDocumentState(() => $$props.documentId);
+  let wrapperEl;
+  const isFocused = $.derived(() => formDocState.state.selectedFieldId === widgetState.annotation.id);
+  $.user_effect(() => {
+    if ($.get(isFocused) && wrapperEl && document.activeElement !== wrapperEl) {
+      wrapperEl.focus();
+    }
+  });
+  function toggle() {
+    if (widgetState.isReadOnly) return;
+    const checked = isWidgetChecked(widgetState.annotation);
+    const newValue = checked ? "Off" : widgetState.annotation.exportValue ?? "Yes";
+    widgetState.handleChangeField({ ...widgetState.field, value: newValue });
+  }
+  function handleClick() {
+    var _a;
+    if (widgetState.isReadOnly) return;
+    (_a = widgetState.scope) == null ? void 0 : _a.selectField(widgetState.annotation.id);
+    toggle();
+  }
+  function handleFocus() {
+    var _a;
+    if (widgetState.isReadOnly) return;
+    (_a = widgetState.scope) == null ? void 0 : _a.selectField(widgetState.annotation.id);
+  }
+  function handleBlur() {
+    var _a, _b;
+    if (((_a = widgetState.scope) == null ? void 0 : _a.getSelectedFieldId()) === widgetState.annotation.id) {
+      (_b = widgetState.scope) == null ? void 0 : _b.deselectField();
+    }
+  }
+  function handleKeyDown(e) {
+    if (e.key === " " || e.key === "Enter") {
+      e.preventDefault();
+      toggle();
+    }
+  }
+  var div = root$9();
+  div.__click = handleClick;
+  div.__keydown = handleKeyDown;
+  var node = $.child(div);
+  RenderWidget(node, {
+    get pageIndex() {
+      return widgetState.pageIndex;
+    },
+    get annotation() {
+      return widgetState.annotation;
+    },
+    get scaleFactor() {
+      return widgetState.scale;
+    },
+    get renderKey() {
+      return widgetState.renderKey;
+    },
+    style: "pointer-events: none;"
+  });
+  $.reset(div);
+  $.bind_this(div, ($$value) => wrapperEl = $$value, () => wrapperEl);
+  $.template_effect(() => {
+    $.set_attribute(div, "tabindex", widgetState.isReadOnly ? -1 : 0);
+    $.set_style(div, `width: 100%; height: 100%; overflow: hidden; cursor: ${widgetState.isReadOnly ? "default" : "pointer"}; pointer-events: auto; outline: ${$.get(isFocused) ? "2px solid rgba(66, 133, 244, 0.8)" : "none"}; outline-offset: -2px;`);
+  });
+  $.event("focus", div, handleFocus);
+  $.event("blur", div, handleBlur);
+  $.append($$anchor, div);
+  $.pop();
+}
+$.delegate(["click", "keydown"]);
+var root$8 = $.from_html(`<div><!></div>`);
+function RadioButtonFillMode($$anchor, $$props) {
+  $.push($$props, true);
+  let props = $.rest_props($$props, ["$$slots", "$$events", "$$legacy"]);
+  const widgetState = useFormWidgetState(props);
+  const formDocState = useFormDocumentState(() => $$props.documentId);
+  let wrapperEl;
+  const isFocused = $.derived(() => formDocState.state.selectedFieldId === widgetState.annotation.id);
+  $.user_effect(() => {
+    if ($.get(isFocused) && wrapperEl && document.activeElement !== wrapperEl) {
+      wrapperEl.focus();
+    }
+  });
+  function selectRadio() {
+    if (widgetState.isReadOnly) return;
+    if (!isWidgetChecked(widgetState.annotation) && widgetState.annotation.exportValue) {
+      widgetState.handleChangeField({
+        ...widgetState.field,
+        value: widgetState.annotation.exportValue
+      });
+    }
+  }
+  function handleClick() {
+    var _a;
+    if (widgetState.isReadOnly) return;
+    (_a = widgetState.scope) == null ? void 0 : _a.selectField(widgetState.annotation.id);
+    selectRadio();
+  }
+  function handleFocus() {
+    var _a;
+    if (widgetState.isReadOnly) return;
+    (_a = widgetState.scope) == null ? void 0 : _a.selectField(widgetState.annotation.id);
+  }
+  function handleBlur() {
+    var _a, _b;
+    if (((_a = widgetState.scope) == null ? void 0 : _a.getSelectedFieldId()) === widgetState.annotation.id) {
+      (_b = widgetState.scope) == null ? void 0 : _b.deselectField();
+    }
+  }
+  function handleKeyDown(e) {
+    if (e.key === " " || e.key === "Enter") {
+      e.preventDefault();
+      selectRadio();
+    }
+  }
+  var div = root$8();
+  div.__click = handleClick;
+  div.__keydown = handleKeyDown;
+  var node = $.child(div);
+  RenderWidget(node, {
+    get pageIndex() {
+      return widgetState.pageIndex;
+    },
+    get annotation() {
+      return widgetState.annotation;
+    },
+    get scaleFactor() {
+      return widgetState.scale;
+    },
+    get renderKey() {
+      return widgetState.renderKey;
+    },
+    style: "pointer-events: none;"
+  });
+  $.reset(div);
+  $.bind_this(div, ($$value) => wrapperEl = $$value, () => wrapperEl);
+  $.template_effect(() => {
+    $.set_attribute(div, "tabindex", widgetState.isReadOnly ? -1 : 0);
+    $.set_style(div, `width: 100%; height: 100%; overflow: hidden; cursor: ${widgetState.isReadOnly ? "default" : "pointer"}; pointer-events: auto; outline: ${$.get(isFocused) ? "2px solid rgba(66, 133, 244, 0.8)" : "none"}; outline-offset: -2px;`);
+  });
+  $.event("focus", div, handleFocus);
+  $.event("blur", div, handleBlur);
+  $.append($$anchor, div);
+  $.pop();
+}
+$.delegate(["click", "keydown"]);
+var root_1$1 = $.from_html(`<option> </option>`);
+var root$7 = $.from_html(`<select></select>`);
+function ComboboxField($$anchor, $$props) {
+  $.push($$props, true);
+  const field = $.derived(() => $$props.annotation.field);
+  const flag = $.derived(() => $.get(field).flag);
+  const options = $.derived(() => $.get(field).options);
+  const name = $.derived(() => $.get(field).alternateName || $.get(field).name);
+  const isDisabled = $.derived(() => !$$props.isEditable || !!($.get(flag) & PDF_FORM_FIELD_FLAG.READONLY));
+  const isRequired = $.derived(() => !!($.get(flag) & PDF_FORM_FIELD_FLAG.REQUIRED));
+  const selectedValue = $.derived(() => {
+    var _a;
+    return ((_a = $.get(options).find((o) => o.isSelected)) == null ? void 0 : _a.label) ?? "";
+  });
+  function handleChange(evt) {
+    var _a;
+    const select = evt.target;
+    const updatedOptions = $.get(options).map((opt, i) => ({ ...opt, isSelected: i === select.selectedIndex }));
+    (_a = $$props.onChangeField) == null ? void 0 : _a.call($$props, { ...$.get(field), options: updatedOptions });
+  }
+  function refAction(node) {
+    var _a;
+    (_a = $$props.inputRef) == null ? void 0 : _a.call($$props, node);
+    return { destroy: () => {
+      var _a2;
+      return (_a2 = $$props.inputRef) == null ? void 0 : _a2.call($$props, null);
+    } };
+  }
+  var select_1 = root$7();
+  select_1.__change = handleChange;
+  $.set_style(select_1, "", {}, {
+    position: "absolute",
+    inset: "0",
+    display: "block",
+    "z-index": "1",
+    width: "100%",
+    height: "100%",
+    "min-width": "100%",
+    "min-height": "100%",
+    padding: "0",
+    margin: "0",
+    border: "0",
+    "border-radius": "0",
+    background: "transparent",
+    outline: "none",
+    "box-sizing": "border-box",
+    appearance: "none",
+    "-webkit-appearance": "none",
+    "pointer-events": "auto",
+    cursor: "inherit",
+    opacity: "0"
+  });
+  $.each(select_1, 21, () => $.get(options), $.index, ($$anchor2, option) => {
+    var option_1 = root_1$1();
+    var text = $.child(option_1, true);
+    $.reset(option_1);
+    var option_1_value = {};
+    $.template_effect(() => {
+      $.set_text(text, $.get(option).label);
+      if (option_1_value !== (option_1_value = $.get(option).label)) {
+        option_1.value = (option_1.__value = $.get(option).label) ?? "";
+      }
+    });
+    $.append($$anchor2, option_1);
+  });
+  $.reset(select_1);
+  $.action(select_1, ($$node) => refAction == null ? void 0 : refAction($$node));
+  var select_1_value;
+  $.init_select(select_1);
+  $.template_effect(() => {
+    select_1.required = $.get(isRequired);
+    select_1.disabled = $.get(isDisabled);
+    $.set_attribute(select_1, "name", $.get(name));
+    $.set_attribute(select_1, "aria-label", $.get(name));
+    if (select_1_value !== (select_1_value = $.get(selectedValue))) {
+      select_1.value = (select_1.__value = $.get(selectedValue)) ?? "", $.select_option(select_1, $.get(selectedValue));
+    }
+  });
+  $.event("focus", select_1, function(...$$args) {
+    var _a;
+    (_a = $$props.onFocus) == null ? void 0 : _a.apply(this, $$args);
+  });
+  $.event("blur", select_1, function(...$$args) {
+    var _a;
+    (_a = $$props.onBlur) == null ? void 0 : _a.apply(this, $$args);
+  });
+  $.append($$anchor, select_1);
+  $.pop();
+}
+$.delegate(["change"]);
+var root$6 = $.from_html(`<div><!> <!></div>`);
+function ComboboxFillMode($$anchor, $$props) {
+  $.push($$props, true);
+  let props = $.rest_props($$props, ["$$slots", "$$events", "$$legacy"]);
+  const widgetState = useFormWidgetState(props);
+  const formDocState = useFormDocumentState(() => $$props.documentId);
+  const comboboxAnnotation = $.derived(() => widgetState.annotation);
+  let wrapperEl;
+  let selectEl = null;
+  const isFocused = $.derived(() => formDocState.state.selectedFieldId === widgetState.annotation.id);
+  $.user_effect(() => {
+    if ($.get(isFocused) && selectEl && document.activeElement !== selectEl) {
+      selectEl.focus();
+    }
+  });
+  function handleFocus() {
+    var _a;
+    if (widgetState.isReadOnly) return;
+    (_a = widgetState.scope) == null ? void 0 : _a.selectField(widgetState.annotation.id);
+  }
+  function handleBlur() {
+    requestAnimationFrame(() => {
+      var _a, _b;
+      if (wrapperEl == null ? void 0 : wrapperEl.contains(document.activeElement)) return;
+      if (((_a = widgetState.scope) == null ? void 0 : _a.getSelectedFieldId()) === widgetState.annotation.id) {
+        (_b = widgetState.scope) == null ? void 0 : _b.deselectField();
+      }
+    });
+  }
+  function selectInputRef(el) {
+    selectEl = el;
+  }
+  var div = root$6();
+  var node = $.child(div);
+  RenderWidget(node, {
+    get pageIndex() {
+      return widgetState.pageIndex;
+    },
+    get annotation() {
+      return widgetState.annotation;
+    },
+    get scaleFactor() {
+      return widgetState.scale;
+    },
+    get renderKey() {
+      return widgetState.renderKey;
+    },
+    style: "position: absolute; inset: 0; pointer-events: none;"
+  });
+  var node_1 = $.sibling(node, 2);
+  ComboboxField(node_1, {
+    get annotation() {
+      return $.get(comboboxAnnotation);
+    },
+    get scale() {
+      return widgetState.scale;
+    },
+    get pageIndex() {
+      return widgetState.pageIndex;
+    },
+    isEditable: true,
+    get onChangeField() {
+      return widgetState.handleChangeField;
+    },
+    onFocus: handleFocus,
+    onBlur: handleBlur,
+    inputRef: selectInputRef
+  });
+  $.reset(div);
+  $.bind_this(div, ($$value) => wrapperEl = $$value, () => wrapperEl);
+  $.template_effect(() => $.set_style(div, `width: 100%; height: 100%; overflow: hidden; position: relative; cursor: ${widgetState.isReadOnly ? "default" : "pointer"}; pointer-events: auto; outline: ${$.get(isFocused) ? "2px solid rgba(66, 133, 244, 0.8)" : "none"}; outline-offset: -2px;`));
+  $.append($$anchor, div);
+  $.pop();
+}
+var root_1 = $.from_html(`<div role="option"> </div>`);
+var root$5 = $.from_html(`<div></div>`);
+function ListboxField($$anchor, $$props) {
+  $.push($$props, true);
+  const field = $.derived(() => $$props.annotation.field);
+  const flag = $.derived(() => $.get(field).flag);
+  const options = $.derived(() => $.get(field).options);
+  const isDisabled = $.derived(() => !$$props.isEditable || !!($.get(flag) & PDF_FORM_FIELD_FLAG.READONLY));
+  const isMultipleChoice = $.derived(() => !!($.get(flag) & PDF_FORM_FIELD_FLAG.CHOICE_MULTL_SELECT));
+  const bw = $.derived(() => ($$props.annotation.strokeWidth ?? 0) * $$props.scale);
+  const fontSize = $.derived(() => ($$props.annotation.fontSize ?? 12) * $$props.scale);
+  const lineHeight = $.derived(() => $.get(fontSize) * 1.2);
+  const fontCss = $.derived(() => standardFontCssProperties($$props.annotation.fontFamily));
+  function handleOptionClick(clickedIndex) {
+    var _a;
+    if ($.get(isDisabled)) return;
+    const updatedOptions = $.get(options).map((opt, i) => ({
+      ...opt,
+      isSelected: $.get(isMultipleChoice) ? i === clickedIndex ? !opt.isSelected : opt.isSelected : i === clickedIndex
+    }));
+    (_a = $$props.onChangeField) == null ? void 0 : _a.call($$props, { ...$.get(field), options: updatedOptions });
+  }
+  function refAction(node) {
+    var _a;
+    (_a = $$props.inputRef) == null ? void 0 : _a.call($$props, node);
+    return { destroy: () => {
+      var _a2;
+      return (_a2 = $$props.inputRef) == null ? void 0 : _a2.call($$props, null);
+    } };
+  }
+  var div = root$5();
+  let styles;
+  $.each(div, 21, () => $.get(options), $.index, ($$anchor2, opt, i) => {
+    var div_1 = root_1();
+    div_1.__click = () => handleOptionClick(i);
+    let styles_1;
+    var text = $.child(div_1, true);
+    $.reset(div_1);
+    $.template_effect(() => {
+      $.set_attribute(div_1, "aria-selected", $.get(opt).isSelected);
+      styles_1 = $.set_style(div_1, "", styles_1, {
+        padding: `0 ${4 * $$props.scale}px`,
+        "font-size": `${$.get(fontSize) ?? ""}px`,
+        "line-height": `${$.get(lineHeight) ?? ""}px`,
+        "font-family": $.get(fontCss).fontFamily,
+        "font-weight": $.get(fontCss).fontWeight,
+        "font-style": $.get(fontCss).fontStyle,
+        color: $.get(opt).isSelected ? "#FFFFFF" : $$props.annotation.fontColor ?? "#000000",
+        background: $.get(opt).isSelected ? "rgba(0, 51, 113, 1)" : "transparent",
+        "white-space": "nowrap",
+        overflow: "hidden",
+        "text-overflow": "ellipsis",
+        cursor: $.get(isDisabled) ? "default" : "pointer"
+      });
+      $.set_text(text, $.get(opt).label);
+    });
+    $.append($$anchor2, div_1);
+  });
+  $.reset(div);
+  $.action(div, ($$node) => refAction == null ? void 0 : refAction($$node));
+  $.template_effect(() => styles = $.set_style(div, "", styles, {
+    position: "absolute",
+    top: "0",
+    left: "0",
+    width: "100%",
+    height: "100%",
+    background: $$props.annotation.color ?? "#FFFFFF",
+    "border-style": "solid",
+    "border-color": $$props.annotation.strokeColor ?? "#000000",
+    "border-width": `${$.get(bw) ?? ""}px`,
+    "box-sizing": "border-box",
+    overflow: "auto",
+    display: "flex",
+    "flex-direction": "column",
+    outline: "none"
+  }));
+  $.event("blur", div, function(...$$args) {
+    var _a;
+    (_a = $$props.onBlur) == null ? void 0 : _a.apply(this, $$args);
+  });
+  $.append($$anchor, div);
+  $.pop();
+}
+$.delegate(["click"]);
+var root$4 = $.from_html(`<div><!> <!></div>`);
+function ListboxFillMode($$anchor, $$props) {
+  $.push($$props, true);
+  let props = $.rest_props($$props, ["$$slots", "$$events", "$$legacy"]);
+  const widgetState = useFormWidgetState(props);
+  const formDocState = useFormDocumentState(() => $$props.documentId);
+  let editing = $.state(false);
+  let wrapperEl;
+  const isFocused = $.derived(() => formDocState.state.selectedFieldId === widgetState.annotation.id);
+  $.user_effect(() => {
+    if ($.get(isFocused) && wrapperEl && !wrapperEl.contains(document.activeElement)) {
+      wrapperEl.focus();
+    }
+  });
+  function handleFocus() {
+    var _a;
+    if (widgetState.isReadOnly) return;
+    (_a = widgetState.scope) == null ? void 0 : _a.selectField(widgetState.annotation.id);
+    $.set(editing, true);
+  }
+  function handleBlur() {
+    requestAnimationFrame(() => {
+      var _a, _b;
+      if (wrapperEl == null ? void 0 : wrapperEl.contains(document.activeElement)) return;
+      $.set(editing, false);
+      if (((_a = widgetState.scope) == null ? void 0 : _a.getSelectedFieldId()) === widgetState.annotation.id) {
+        (_b = widgetState.scope) == null ? void 0 : _b.deselectField();
+      }
+    });
+  }
+  var div = root$4();
+  var node = $.child(div);
+  ListboxField(node, {
+    get annotation() {
+      return widgetState.annotation;
+    },
+    get scale() {
+      return widgetState.scale;
+    },
+    get pageIndex() {
+      return widgetState.pageIndex;
+    },
+    isEditable: true,
+    get onChangeField() {
+      return widgetState.handleChangeField;
+    }
+  });
+  var node_1 = $.sibling(node, 2);
+  {
+    var consequent = ($$anchor2) => {
+      RenderWidget($$anchor2, {
+        get pageIndex() {
+          return widgetState.pageIndex;
+        },
+        get annotation() {
+          return widgetState.annotation;
+        },
+        get scaleFactor() {
+          return widgetState.scale;
+        },
+        get renderKey() {
+          return widgetState.renderKey;
+        },
+        style: "pointer-events: none;"
+      });
+    };
+    $.if(node_1, ($$render) => {
+      if (!$.get(editing)) $$render(consequent);
+    });
+  }
+  $.reset(div);
+  $.bind_this(div, ($$value) => wrapperEl = $$value, () => wrapperEl);
+  $.template_effect(() => {
+    $.set_attribute(div, "tabindex", widgetState.isReadOnly ? -1 : 0);
+    $.set_style(div, `width: 100%; height: 100%; overflow: hidden; cursor: ${widgetState.isReadOnly ? "default" : "pointer"}; pointer-events: auto; outline: ${$.get(isFocused) && !$.get(editing) ? "2px solid rgba(66, 133, 244, 0.8)" : "none"}; outline-offset: -2px;`);
+  });
+  $.event("focus", div, handleFocus);
+  $.event("blur", div, handleBlur);
+  $.append($$anchor, div);
+  $.pop();
+}
+var root$3 = $.from_html(`<div></div>`);
+function TextFieldPreview($$anchor, $$props) {
+  $.push($$props, true);
+  var div = root$3();
+  let styles;
+  $.template_effect(() => styles = $.set_style(div, "", styles, {
+    position: "absolute",
+    left: "0",
+    top: "0",
+    width: `${$$props.bounds.size.width * $$props.scale}px`,
+    height: `${$$props.bounds.size.height * $$props.scale}px`,
+    border: "1px dashed rgba(66, 133, 244, 0.6)",
+    "background-color": "rgba(255, 255, 255, 0.9)",
+    "box-sizing": "border-box",
+    display: "flex",
+    "align-items": "center",
+    padding: `0 ${2 * $$props.scale}px`,
+    overflow: "hidden"
+  }));
+  $.append($$anchor, div);
+  $.pop();
+}
+var root$2 = $.from_html(`<div></div>`);
+function CheckboxPreview($$anchor, $$props) {
+  $.push($$props, true);
+  var div = root$2();
+  let styles;
+  $.template_effect(() => styles = $.set_style(div, "", styles, {
+    position: "absolute",
+    left: "0",
+    top: "0",
+    width: `${$$props.bounds.size.width * $$props.scale}px`,
+    height: `${$$props.bounds.size.height * $$props.scale}px`,
+    border: "1px dashed rgba(66, 133, 244, 0.6)",
+    "background-color": "rgba(255, 255, 255, 0.9)",
+    "box-sizing": "border-box",
+    display: "flex",
+    "align-items": "center",
+    "justify-content": "center"
+  }));
+  $.append($$anchor, div);
+  $.pop();
+}
+var root$1 = $.from_html(`<div></div>`);
+function RadioButtonPreview($$anchor, $$props) {
+  $.push($$props, true);
+  var div = root$1();
+  let styles;
+  $.template_effect(() => styles = $.set_style(div, "", styles, {
+    position: "absolute",
+    left: "0",
+    top: "0",
+    width: `${$$props.bounds.size.width * $$props.scale}px`,
+    height: `${$$props.bounds.size.height * $$props.scale}px`,
+    border: "1px dashed rgba(66, 133, 244, 0.6)",
+    "background-color": "rgba(255, 255, 255, 0.9)",
+    "border-radius": "50%",
+    "box-sizing": "border-box",
+    display: "flex",
+    "align-items": "center",
+    "justify-content": "center"
+  }));
+  $.append($$anchor, div);
+  $.pop();
+}
+var root = $.from_html(`<div></div>`);
+function ListboxPreview($$anchor, $$props) {
+  $.push($$props, true);
+  var div = root();
+  let styles;
+  $.template_effect(() => styles = $.set_style(div, "", styles, {
+    position: "absolute",
+    left: "0",
+    top: "0",
+    width: `${$$props.bounds.size.width * $$props.scale}px`,
+    height: `${$$props.bounds.size.height * $$props.scale}px`,
+    border: "1px dashed rgba(66, 133, 244, 0.6)",
+    "background-color": "rgba(255, 255, 255, 0.9)",
+    "box-sizing": "border-box",
+    display: "flex",
+    "flex-direction": "column",
+    overflow: "hidden"
+  }));
+  $.append($$anchor, div);
+  $.pop();
+}
+const formRenderers = [
+  createRenderer({
+    id: "formTextField",
+    matches: (a) => {
+      var _a;
+      return a.type === PdfAnnotationSubtype.WIDGET && ((_a = a.field) == null ? void 0 : _a.type) === PDF_FORM_FIELD_TYPE.TEXTFIELD;
+    },
+    component: FormTextField,
+    renderPreview: TextFieldPreview,
+    interactionDefaults: { isDraggable: false, isResizable: true, isRotatable: false },
+    useAppearanceStream: false,
+    renderLocked: TextFillMode
+  }),
+  createRenderer({
+    id: "formCheckbox",
+    matches: (a) => {
+      var _a;
+      return a.type === PdfAnnotationSubtype.WIDGET && ((_a = a.field) == null ? void 0 : _a.type) === PDF_FORM_FIELD_TYPE.CHECKBOX;
+    },
+    component: FormCheckbox,
+    renderPreview: CheckboxPreview,
+    interactionDefaults: { isDraggable: false, isResizable: true, isRotatable: false },
+    useAppearanceStream: false,
+    renderLocked: ToggleFillMode
+  }),
+  createRenderer({
+    id: "formRadioButton",
+    matches: (a) => {
+      var _a;
+      return a.type === PdfAnnotationSubtype.WIDGET && ((_a = a.field) == null ? void 0 : _a.type) === PDF_FORM_FIELD_TYPE.RADIOBUTTON;
+    },
+    component: FormRadioButton,
+    renderPreview: RadioButtonPreview,
+    interactionDefaults: { isDraggable: false, isResizable: true, isRotatable: false },
+    useAppearanceStream: false,
+    renderLocked: RadioButtonFillMode
+  }),
+  createRenderer({
+    id: "formCombobox",
+    matches: (a) => {
+      var _a;
+      return a.type === PdfAnnotationSubtype.WIDGET && ((_a = a.field) == null ? void 0 : _a.type) === PDF_FORM_FIELD_TYPE.COMBOBOX;
+    },
+    component: FormCombobox,
+    renderPreview: TextFieldPreview,
+    interactionDefaults: { isDraggable: false, isResizable: true, isRotatable: false },
+    useAppearanceStream: false,
+    renderLocked: ComboboxFillMode
+  }),
+  createRenderer({
+    id: "formListbox",
+    matches: (a) => {
+      var _a;
+      return a.type === PdfAnnotationSubtype.WIDGET && ((_a = a.field) == null ? void 0 : _a.type) === PDF_FORM_FIELD_TYPE.LISTBOX;
+    },
+    component: FormListbox,
+    renderPreview: ListboxPreview,
+    interactionDefaults: { isDraggable: false, isResizable: true, isRotatable: false },
+    useAppearanceStream: false,
+    renderLocked: ListboxFillMode
+  })
+];
+function FormRendererRegistration($$anchor, $$props) {
+  $.push($$props, false);
+  const registry = getRendererRegistry();
+  onMount(() => {
+    if (!registry) return;
+    return registry.register(formRenderers);
+  });
+  $.init();
+  $.pop();
+}
+const FormPluginPackage = createPluginPackage(FormPluginPackage$1).addUtility(FormRendererRegistration).build();
+export {
+  FormPluginPackage,
+  useFormCapability,
+  useFormDocumentState,
+  useFormPlugin,
+  useFormWidgetState
+};
+//# sourceMappingURL=index.js.map