@embedpdf/angular 3.0.0-next.14 → 3.0.0-next.15

package/dist/fesm2022/embedpdf-angular-form.mjs

@@ -0,0 +1,1074 @@
+import { formState, FormToken, formPlugin, FORM_DEFAULTS } from '@embedpdf/plugin-form';
+export * from '@embedpdf/plugin-form';
+import * as i0 from '@angular/core';
+import { assertInInjectionContext, untracked, effect, inject, DestroyRef, Injectable, input, ElementRef, computed, signal, afterRenderEffect, PLATFORM_ID, ChangeDetectionStrategy, Component, Directive, viewChild } from '@angular/core';
+import { FormControl } from '@angular/forms';
+import { pluginService, injectPage, CapabilityBinding, injectKernelHost, EpdfSvgShapes, paintsPagePart } from '@embedpdf/angular/runtime';
+import { FormToken as FormToken$1 } from '@embedpdf/plugin-form/contract/host';
+import { InteractionToken } from '@embedpdf/plugin-interaction/contract/host';
+import { createOptimisticSelection, showSelectedOptions, isolateWheel, rectInPixels, widgetBoxStyleOf, bindWidgetEvents, isolatePointerDown, formFocusRingStyleOf, createTextFieldEditor, textFieldEditorStyleOf, createFontMounts, pressToggle, FORM_CONTROL_FILL, listBoxControlStyleOf, createShownUrls, pictureOrPainting, shownAppearance, svgShapesOf, loadAppearanceUrls, formColorsOf } from '@embedpdf/web';
+import { isPlatformBrowser } from '@angular/common';
+import { SignatureToken } from '@embedpdf/plugin-signature/contract';
+import { annotationKey } from '@embedpdf/core';
+import { MITER_LIMIT } from '@embedpdf/core-annotation';
+import { RenderToken } from '@embedpdf/plugin-render/contract/host';
+
+/**
+ * The form plugin's service and feature:
+ *
+ *   withForm(config)          the plugin, for provideEmbedPdf()
+ *   inject(EpdfForm)          read, fill and build the form: `fields()`, `setValue()`, `create()`,
+ *                             the events as streams (`valueChanged$`), and the settings
+ *   form.valueOf(ref)         one field's value, as a signal
+ *   form.controlOf(ref)       one field as a Reactive Forms `FormControl`, for your own inputs
+ */
+const refGetter = (ref) => typeof ref === 'function' ? ref : () => ref;
+/** Two plain values the same: lists element by element, everything else by value. */
+const samePlain = (left, right) => Array.isArray(left) && Array.isArray(right)
+    ? left.length === right.length && left.every((value, index) => value === right[index])
+    : left === right;
+/**
+ * The form: `fields()`, `status()`, `formKind()` and `selectedField()` as signals; reading,
+ * filling, form data and building as methods (`setValue()`, `importValues()`, `export()`,
+ * `create()`, `update()`, …, the Methods tables of the Filling forms and Building forms pages);
+ * the events as streams (`valueChanged$`, `validationRejected$`, `fieldCreated$`, …); and the
+ * settings. Without a document, `fields()` is empty and a method refuses with `not-ready`.
+ */
+class EpdfForm extends pluginService({
+    name: 'EpdfForm',
+    feature: 'withForm()',
+    token: FormToken,
+    state: formState,
+    methods: [
+        'getSnapshot',
+        'getStatus',
+        'getFormKind',
+        'list',
+        'get',
+        'getFieldForWidget',
+        'getWidget',
+        'getValue',
+        'listWidgets',
+        'getWidgetAt',
+        'getSelectedField',
+        'validate',
+        'exportValues',
+        'setValue',
+        'setValues',
+        'importValues',
+        'reset',
+        'activateWidget',
+        'export',
+        'import',
+        'refresh',
+        'create',
+        'update',
+        'delete',
+        'removeWidget',
+        'deleteWidget',
+        'reorderCalculations',
+        'repair',
+        'canRead',
+        'canFill',
+        'canDesign',
+        'canRestoreAttribution',
+        'canWriteScripts',
+    ],
+    events: [
+        'onValueChanged',
+        'onFieldCreated',
+        'onFieldUpdated',
+        'onFieldDeleted',
+        'onValidationRejected',
+        'onResynced',
+    ],
+}) {
+    /**
+     * One field's value, in the shape `setValue()` takes, as a signal: it changes only when that
+     * field's value does, and is `null` for a field without a value, and without a document. Keep
+     * it in a field (`readonly total = form.valueOf(toFieldRef('total'))`); `ref` may be a
+     * function, such as a signal input, and the value follows it.
+     *
+     * (`override`: every object has a `valueOf()` without arguments, which JavaScript calls to
+     * turn it into a primitive. Called that way, this returns a signal, which isn't one, so
+     * JavaScript goes on to `toString()` as it would without it.)
+     */
+    valueOf(ref) {
+        const refOf = refGetter(ref);
+        // The plugin keeps one value object per field while the field stays the same.
+        return this.binding.select((form) => form.getValue(refOf()), null, Object.is);
+    }
+    /**
+     * One field as a Reactive Forms `FormControl`, for an input of your own:
+     * `<input [formControl]="name" />`. The control holds the field's value as plain data (a text
+     * box's, dropdown's or radio group's text, a checkbox's `true` or `false`, a list's selected
+     * values; `null` for none), and takes every change of it, whoever made it. A change of the
+     * control fills in the field, with the same checks and scripts as typing in the PDF does; a
+     * value the form refuses puts the field's value back in the control. The control is disabled
+     * while the field can't be filled in: no such field (yet), a read-only one, or no
+     * `doc.forms.fill`.
+     *
+     * Call it in an injection context (a constructor or a field initializer): the control follows
+     * the field for as long as the caller lives.
+     */
+    controlOf(ref) {
+        assertInInjectionContext(this.controlOf);
+        const refOf = refGetter(ref);
+        const field = this.binding.select((form) => form.get(refOf()), null, Object.is);
+        // The plain value the plugin exports for the field, so a control reads what
+        // `exportValues()` gives and writes what `importValues()` takes.
+        const value = this.binding.select((form) => {
+            const current = form.get(refOf());
+            return current ? (form.exportValues()[current.name] ?? null) : null;
+        }, null, samePlain);
+        const fillable = this.binding.select((form) => {
+            const current = form.get(refOf());
+            return current !== null && !current.readOnly && form.canFill(current.ref);
+        }, false);
+        const control = new FormControl(untracked(value));
+        const show = (plain) => {
+            if (!samePlain(plain, control.value))
+                control.setValue(plain, { emitEvent: false });
+        };
+        // The field shows a write as soon as it's made, so the control follows the field: a value
+        // the form refuses, or its scripts rewrite, shows as the field has it.
+        effect(() => {
+            const plain = value();
+            untracked(() => show(plain));
+        });
+        effect(() => {
+            const enabled = fillable();
+            untracked(() => enabled ? control.enable({ emitEvent: false }) : control.disable({ emitEvent: false }));
+        });
+        const subscription = control.valueChanges.subscribe((plain) => {
+            const name = untracked(field)?.name;
+            if (name === undefined)
+                return;
+            // By name, through the plugin's own plain-value conversion and its write queue.
+            void Promise.resolve()
+                .then(() => this.importValues({ [name]: plain }))
+                .catch(() => undefined);
+        });
+        inject(DestroyRef).onDestroy(() => subscription.unsubscribe());
+        return control;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: EpdfForm, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: EpdfForm, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: EpdfForm, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+/** The form plugin: fields people fill in on every page with an `<epdf-form-layer>`. */
+function withForm(config) {
+    return { plugins: [formPlugin(config)], services: [EpdfForm] };
+}
+
+/**
+ * A PDF list box as a visible native `<select>`. A list needs one owner for its pixels, its
+ * hit-testing and its scrolling: a baked PDF picture under an invisible select can't give that,
+ * because the browser and the PDF would each keep their own top row. So the select is the list,
+ * and it's never made again while the field is shown: its scroll position is the user's.
+ *
+ * A choice shows at once while its write is on its way, and the engine's selection again if
+ * the write fails (`@embedpdf/web`'s `createOptimisticSelection`). The wheel stays in the list,
+ * so it scrolls instead of the Stage below panning or zooming.
+ */
+class FormListBox {
+    label = input.required(...(ngDevMode ? [{ debugName: "label" }] : []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    /** Whether several rows can be selected. */
+    multi = input(false, ...(ngDevMode ? [{ debugName: "multi" }] : []));
+    options = input.required(...(ngDevMode ? [{ debugName: "options" }] : []));
+    /** The selection the engine has. */
+    selected = input.required(...(ngDevMode ? [{ debugName: "selected" }] : []));
+    /** Writes a choice; a promise that rejects puts the engine's selection back. */
+    write = input.required(...(ngDevMode ? [{ debugName: "write" }] : []));
+    element = inject(ElementRef).nativeElement;
+    /** Every row shows at least two, so a list never looks like a dropdown. */
+    size = computed(() => Math.max(2, this.options().length), ...(ngDevMode ? [{ debugName: "size" }] : []));
+    /**
+     * The optimistic selection, made at the first read (inputs are there by then) from the
+     * engine's selection. It reads no signal, so it's made once.
+     */
+    selection = computed(() => createOptimisticSelection(untracked(this.selected)), ...(ngDevMode ? [{ debugName: "selection" }] : []));
+    /** Goes up whenever the selection shows something new. */
+    changes = signal(0, ...(ngDevMode ? [{ debugName: "changes" }] : []));
+    /** The selection the list shows. */
+    shown = computed(() => {
+        this.changes();
+        return this.selection().get();
+    }, ...(ngDevMode ? [{ debugName: "shown" }] : []));
+    constructor() {
+        effect((onCleanup) => {
+            const selection = this.selection();
+            onCleanup(selection.subscribe(() => this.changes.update((count) => count + 1)));
+        });
+        effect(() => {
+            const selected = this.selected();
+            untracked(() => this.selection().setConfirmed(selected));
+        });
+        // The rows' selected state is written after each render, not bound: a choice that is
+        // refused before the next render leaves the shown selection as it was, and a binding that
+        // didn't change would leave the user's row selected.
+        afterRenderEffect({
+            write: () => {
+                const shown = this.shown();
+                this.options();
+                showSelectedOptions(this.element, shown);
+            },
+        });
+        if (isPlatformBrowser(inject(PLATFORM_ID))) {
+            inject(DestroyRef).onDestroy(isolateWheel(this.element));
+        }
+    }
+    choose() {
+        const values = Array.from(this.element.selectedOptions, (option) => option.value);
+        this.selection().choose(values, (chosen) => this.write()(chosen) ?? undefined);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: FormListBox, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", type: FormListBox, isStandalone: true, selector: "select[epdfFormListBox]", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, multi: { classPropertyName: "multi", publicName: "multi", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: true, transformFunction: null }, write: { classPropertyName: "write", publicName: "write", isSignal: true, isRequired: true, transformFunction: null } }, host: { listeners: { "change": "choose()" }, properties: { "attr.aria-label": "label()", "multiple": "multi()", "attr.size": "size()", "disabled": "disabled()" } }, ngImport: i0, template: `
+    @for (option of options(); track $index) {
+      <option [value]="option.value">{{ option.label }}</option>
+    }
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: FormListBox, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'select[epdfFormListBox]',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        '[attr.aria-label]': 'label()',
+                        '[multiple]': 'multi()',
+                        '[attr.size]': 'size()',
+                        '[disabled]': 'disabled()',
+                        '(change)': 'choose()',
+                    },
+                    template: `
+    @for (option of options(); track $index) {
+      <option [value]="option.value">{{ option.label }}</option>
+    }
+  `,
+                }]
+        }], ctorParameters: () => [] });
+
+/**
+ * What every field control on a page shares: its box. The box is placed over the field's
+ * widget on the page, and is the widget's event surface:
+ *
+ * - it is always there for the pointer, whatever the control inside allows, so a field that
+ *   can't be filled in still runs its PDF actions on enter, exit, press, release, focus and blur
+ *   ("may edit this field" and "may receive PDF action events" are different rights);
+ * - it keeps a press that begins in it from the Stage below (which would start the active
+ *   tool's gesture, or end an edit as a click outside), and still sends it to the field's PDF
+ *   "mouse down" action;
+ * - a field without a border of its own gets an edge in the form settings' color, so people
+ *   see where to fill in (lists and buttons draw their own).
+ *
+ * Each control (`controls.ts`) is a component whose host element is its box: it extends this
+ * class and adds its own control inside. The listeners, the box's style and the colors are
+ * `@embedpdf/web`'s, the same for every framework.
+ */
+class FormWidgetBox {
+    /** The widget: where it is, how it looks, its control and its value. */
+    item = input.required(...(ngDevMode ? [{ debugName: "item" }] : []));
+    /** The colors the viewer draws fields with: the form settings over the accent. */
+    colors = input.required(...(ngDevMode ? [{ debugName: "colors" }] : []));
+    page = injectPage('<epdf-form-layer>');
+    element = inject(ElementRef).nativeElement;
+    /** The form plugin's host side, for the page's own document: writes, drafts, activation. */
+    form = new CapabilityBinding(injectKernelHost('<epdf-form-layer>'), () => FormToken$1, () => this.page.documentId).capability;
+    /** Whether a field without a border of its own gets an edge. A list and a button draw their own. */
+    drawsEdge = true;
+    /** The box in the page layer's pixels: moves with the camera. */
+    frame = computed(() => rectInPixels(this.item().box, this.page.transform()), ...(ngDevMode ? [{ debugName: "frame" }] : []));
+    /** The box's place over the widget, and its edge. */
+    boxStyle = computed(() => widgetBoxStyleOf(this.item(), this.frame(), this.colors(), { edge: this.drawsEdge }), ...(ngDevMode ? [{ debugName: "boxStyle" }] : []));
+    constructor() {
+        if (!isPlatformBrowser(inject(PLATFORM_ID)))
+            return;
+        // Native listeners on the box: the PDF events of the widget, and the press kept from the
+        // Stage. `bindWidgetEvents` sends the press as "mouse down" itself; the press only stops
+        // here, so both run.
+        const detachEvents = bindWidgetEvents(this.element, (kind) => this.notify(kind));
+        const detachPress = isolatePointerDown(this.element);
+        inject(DestroyRef).onDestroy(() => {
+            detachEvents();
+            detachPress();
+        });
+    }
+    /**
+     * Run the widget's own action, as a click on it does. ISO 32000 puts the activate action on
+     * the widget, whatever its field, and many forms ship "buttons" as read-only text fields with
+     * an action that Acrobat runs; a widget without one does nothing.
+     */
+    activate() {
+        const widget = this.item().annotationRef;
+        const form = this.form();
+        if (widget && form)
+            void form.activateWidget(widget);
+    }
+    /** One of the widget's pointer and focus events, for its `/AA` actions. */
+    notify(kind) {
+        const item = this.item();
+        const form = this.form();
+        if (item.annotationRef && form)
+            form.notifyWidgetEvent(item.fieldRef, item.annotationRef, kind);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: FormWidgetBox, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.2.4", type: FormWidgetBox, isStandalone: true, inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null }, colors: { classPropertyName: "colors", publicName: "colors", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "style": "boxStyle()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: FormWidgetBox, decorators: [{
+            type: Directive,
+            args: [{
+                    host: { '[style]': 'boxStyle()' },
+                }]
+        }], ctorParameters: () => [] });
+
+/**
+ * The controls `<epdf-form-layer>` puts over a page's fields, one per widget. Each is a
+ * component whose host element is the widget's box (`widget-box.ts`), with a real HTML control
+ * inside. The field's own picture (the engine's drawing of its value, borders and fonts) is
+ * drawn below, by the form layer's `<epdf-field-pictures>`; the controls add what people work
+ * with on top of it:
+ *
+ *   text       the picture at rest; focus shows an editor in the field's own font (the plugin
+ *              keeps what's typed, so a download writes it); blur or Enter commits, Escape
+ *              puts the value back
+ *   toggle     the picture is the control; a click writes the toggled value
+ *   combo      an invisible native <select> over the picture: the browser owns the dropdown,
+ *              the engine the pixels at rest
+ *   list       a visible native <select> (`list-box.ts`): one surface owns the rows, the
+ *              keyboard and the scrolling
+ *   button     a native click target over the picture, which runs the widget's action
+ *   signature  with the signature plugin, "sign here" on an empty field, and the signature's
+ *              details on a signed one
+ *
+ * The text-editing, toggle and list policies, the field looks, the controls' styles and the
+ * colors are `@embedpdf/web`'s, the same for every framework.
+ */
+/**
+ * The focus ring of a field whose control is see-through or is the box itself: painted above
+ * the field's picture, because an outline on the box would sit under an opaque child, and a
+ * checkbox or a dropdown would look unfocused while it has the focus.
+ */
+class FormFocusRing {
+    /** The ring's CSS color: the form's `focus.color` setting, through its CSS variable. */
+    color = input.required(...(ngDevMode ? [{ debugName: "color" }] : []));
+    ringStyle = computed(() => formFocusRingStyleOf(this.color()), ...(ngDevMode ? [{ debugName: "ringStyle" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: FormFocusRing, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.2.4", type: FormFocusRing, isStandalone: true, selector: "span[epdfFormFocusRing]", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: true, transformFunction: null } }, host: { attributes: { "aria-hidden": "true", "data-embedpdf-form-focus-ring": "" }, properties: { "style": "ringStyle()" } }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: FormFocusRing, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'span[epdfFormFocusRing]',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        'aria-hidden': 'true',
+                        'data-embedpdf-form-focus-ring': '',
+                        '[style]': 'ringStyle()',
+                    },
+                    template: '',
+                }]
+        }] });
+/** A text box: the picture at rest, an editor in the field's own font while focused. */
+class FormTextControl extends FormWidgetBox {
+    /**
+     * The editing policy of this field. The editor is always there, see-through at rest and
+     * shown while focused: the DOM is the focus manager, so Tab reaches every field. A control is
+     * one widget for its whole life (the layer tracks widgets by field and widget), so one
+     * editor per form.
+     */
+    editor = computed(() => {
+        const form = this.form();
+        return form
+            ? untracked(() => createTextFieldEditor(form, this.item().fieldRef, this.item().value))
+            : null;
+    }, ...(ngDevMode ? [{ debugName: "editor" }] : []));
+    state = signal({ focused: false, draft: '' }, ...(ngDevMode ? [{ debugName: "state" }] : []));
+    /** The text being typed, where the engine will draw it, in its face. */
+    layout = computed(() => {
+        const form = this.form();
+        const widget = this.item().annotationRef;
+        return form && widget ? form.getTextEditorLayout(widget, this.state().draft) : null;
+    }, ...(ngDevMode ? [{ debugName: "layout" }] : []));
+    editorStyle = computed(() => textFieldEditorStyleOf(this.item(), this.frame(), this.colors(), this.state().focused, this.layout()), ...(ngDevMode ? [{ debugName: "editorStyle" }] : []));
+    constructor() {
+        super();
+        if (isPlatformBrowser(inject(PLATFORM_ID))) {
+            const mounts = createFontMounts();
+            inject(DestroyRef).onDestroy(() => mounts.release());
+            effect(() => {
+                const layout = this.layout();
+                if (layout)
+                    mounts.mount([layout.program]);
+            });
+        }
+        effect((onCleanup) => {
+            const editor = this.editor();
+            if (!editor)
+                return;
+            untracked(() => this.state.set(editor.getState()));
+            onCleanup(editor.subscribe(() => this.state.set(editor.getState())));
+        });
+        // Take the field's value whenever it changes under us; the editor never takes it mid-edit.
+        effect(() => {
+            const editor = this.editor();
+            const value = this.item().value;
+            if (editor)
+                untracked(() => editor.setValue(value));
+        });
+    }
+    keyDown(event, field) {
+        if (this.editor()?.keyDown(event.key, this.item().multiline))
+            field.blur();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: FormTextControl, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", type: FormTextControl, isStandalone: true, selector: "div[epdfFormText]", host: { listeners: { "click": "activate()" } }, usesInheritance: true, ngImport: i0, template: `
+    @if (item().multiline) {
+      <textarea
+        #field
+        [value]="state().draft"
+        [attr.maxlength]="item().maxLength"
+        [attr.aria-label]="item().label"
+        [disabled]="item().disabled"
+        [style]="editorStyle()"
+        (focus)="editor()?.focus()"
+        (input)="editor()?.input(field.value)"
+        (blur)="editor()?.blur()"
+        (keydown)="keyDown($event, field)"
+      ></textarea>
+    } @else {
+      <input
+        #field
+        [type]="item().password ? 'password' : 'text'"
+        [value]="state().draft"
+        [attr.maxlength]="item().maxLength"
+        [attr.aria-label]="item().label"
+        [disabled]="item().disabled"
+        [style]="editorStyle()"
+        (focus)="editor()?.focus()"
+        (input)="editor()?.input(field.value)"
+        (blur)="editor()?.blur()"
+        (keydown)="keyDown($event, field)"
+      />
+    }
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: FormTextControl, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'div[epdfFormText]',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    // A click runs the widget's action too, as in Acrobat: the editor's focus click bubbles
+                    // here, and a read-only field's lands here directly.
+                    host: { '(click)': 'activate()' },
+                    template: `
+    @if (item().multiline) {
+      <textarea
+        #field
+        [value]="state().draft"
+        [attr.maxlength]="item().maxLength"
+        [attr.aria-label]="item().label"
+        [disabled]="item().disabled"
+        [style]="editorStyle()"
+        (focus)="editor()?.focus()"
+        (input)="editor()?.input(field.value)"
+        (blur)="editor()?.blur()"
+        (keydown)="keyDown($event, field)"
+      ></textarea>
+    } @else {
+      <input
+        #field
+        [type]="item().password ? 'password' : 'text'"
+        [value]="state().draft"
+        [attr.maxlength]="item().maxLength"
+        [attr.aria-label]="item().label"
+        [disabled]="item().disabled"
+        [style]="editorStyle()"
+        (focus)="editor()?.focus()"
+        (input)="editor()?.input(field.value)"
+        (blur)="editor()?.blur()"
+        (keydown)="keyDown($event, field)"
+      />
+    }
+  `,
+                }]
+        }], ctorParameters: () => [] });
+/** A checkbox or a radio button: the picture is the control, a click writes the toggled value. */
+class FormToggleControl extends FormWidgetBox {
+    focused = signal(false, ...(ngDevMode ? [{ debugName: "focused" }] : []));
+    /** The value first, then the widget's action (Acrobat's order), so its script reads the new state. */
+    press() {
+        const form = this.form();
+        if (form)
+            pressToggle(form, this.item(), () => this.activate());
+    }
+    keyDown(event) {
+        if (event.key !== ' ' && event.key !== 'Enter')
+            return;
+        event.preventDefault();
+        this.press();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: FormToggleControl, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", type: FormToggleControl, isStandalone: true, selector: "div[epdfFormToggle]", host: { listeners: { "click": "press()", "keydown": "keyDown($event)", "focus": "focused.set(true)", "blur": "focused.set(false)" }, properties: { "attr.role": "item().kind === 'checkbox' ? 'checkbox' : 'radio'", "attr.aria-checked": "item().checked", "attr.aria-label": "item().label", "attr.tabindex": "item().disabled ? -1 : 0", "style.cursor": "item().disabled ? 'default' : 'pointer'", "style.outline": "'none'" } }, usesInheritance: true, ngImport: i0, template: `
+    @if (focused()) {
+      <span epdfFormFocusRing [color]="colors().focus"></span>
+    }
+  `, isInline: true, dependencies: [{ kind: "component", type: FormFocusRing, selector: "span[epdfFormFocusRing]", inputs: ["color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: FormToggleControl, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'div[epdfFormToggle]',
+                    imports: [FormFocusRing],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        '[attr.role]': "item().kind === 'checkbox' ? 'checkbox' : 'radio'",
+                        '[attr.aria-checked]': 'item().checked',
+                        '[attr.aria-label]': 'item().label',
+                        '[attr.tabindex]': 'item().disabled ? -1 : 0',
+                        '[style.cursor]': "item().disabled ? 'default' : 'pointer'",
+                        '[style.outline]': "'none'",
+                        '(click)': 'press()',
+                        '(keydown)': 'keyDown($event)',
+                        '(focus)': 'focused.set(true)',
+                        '(blur)': 'focused.set(false)',
+                    },
+                    template: `
+    @if (focused()) {
+      <span epdfFormFocusRing [color]="colors().focus"></span>
+    }
+  `,
+                }]
+        }] });
+/** A dropdown: an invisible native select over the field's picture. */
+class FormComboControl extends FormWidgetBox {
+    focused = signal(false, ...(ngDevMode ? [{ debugName: "focused" }] : []));
+    select = viewChild.required('select');
+    /** The field's choice, and its options, by value: what the select is set to show. */
+    choice = computed(() => this.item().selected[0] ?? '', ...(ngDevMode ? [{ debugName: "choice" }] : []));
+    optionValues = computed(() => this.item().options.map((option) => option.value).join('\0'), ...(ngDevMode ? [{ debugName: "optionValues" }] : []));
+    selectStyle = computed(() => {
+        const { disabled } = this.item();
+        return {
+            ...FORM_CONTROL_FILL,
+            opacity: '0',
+            cursor: disabled ? 'default' : 'pointer',
+            'pointer-events': disabled ? 'none' : null,
+        };
+    }, ...(ngDevMode ? [{ debugName: "selectStyle" }] : []));
+    constructor() {
+        super();
+        // The select shows the field's choice whenever that changes, and is the user's otherwise:
+        // a write on its way (which disables the field for a moment) leaves their choice alone.
+        afterRenderEffect({
+            write: () => {
+                const choice = this.choice();
+                this.optionValues();
+                this.select().nativeElement.value = choice;
+            },
+        });
+    }
+    choose(value) {
+        void this.form()?.setValue(this.item().fieldRef, { value: value || null });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: FormComboControl, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", type: FormComboControl, isStandalone: true, selector: "div[epdfFormCombo]", host: { listeners: { "click": "activate()" } }, viewQueries: [{ propertyName: "select", first: true, predicate: ["select"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
+    <select
+      #select
+      [attr.aria-label]="item().label"
+      [disabled]="item().disabled"
+      [style]="selectStyle()"
+      (focus)="focused.set(true)"
+      (blur)="focused.set(false)"
+      (change)="choose(select.value)"
+    >
+      @if (item().selected.length === 0) {
+        <option value=""></option>
+      }
+      @for (option of item().options; track $index) {
+        <option [value]="option.value">{{ option.label }}</option>
+      }
+    </select>
+    @if (focused()) {
+      <span epdfFormFocusRing [color]="colors().focus"></span>
+    }
+  `, isInline: true, dependencies: [{ kind: "component", type: FormFocusRing, selector: "span[epdfFormFocusRing]", inputs: ["color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: FormComboControl, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'div[epdfFormCombo]',
+                    imports: [FormFocusRing],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: { '(click)': 'activate()' },
+                    template: `
+    <select
+      #select
+      [attr.aria-label]="item().label"
+      [disabled]="item().disabled"
+      [style]="selectStyle()"
+      (focus)="focused.set(true)"
+      (blur)="focused.set(false)"
+      (change)="choose(select.value)"
+    >
+      @if (item().selected.length === 0) {
+        <option value=""></option>
+      }
+      @for (option of item().options; track $index) {
+        <option [value]="option.value">{{ option.label }}</option>
+      }
+    </select>
+    @if (focused()) {
+      <span epdfFormFocusRing [color]="colors().focus"></span>
+    }
+  `,
+                }]
+        }], ctorParameters: () => [] });
+/** A list: a visible native select in the field's own look, the settings where it has none. */
+class FormListControl extends FormWidgetBox {
+    drawsEdge = false;
+    focused = signal(false, ...(ngDevMode ? [{ debugName: "focused" }] : []));
+    listStyle = computed(() => listBoxControlStyleOf(this.item(), this.frame(), this.colors()), ...(ngDevMode ? [{ debugName: "listStyle" }] : []));
+    /** The list's write: the selection it shows at once, and the engine's once this resolves. */
+    write = (values) => this.form()?.setValue(this.item().fieldRef, { selectedValues: values });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: FormListControl, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", type: FormListControl, isStandalone: true, selector: "div[epdfFormList]", host: { listeners: { "click": "activate()" } }, usesInheritance: true, ngImport: i0, template: `
+    <select
+      epdfFormListBox
+      [label]="item().label"
+      [disabled]="item().disabled"
+      [multi]="item().multi"
+      [options]="item().options"
+      [selected]="item().selected"
+      [write]="write"
+      [style]="listStyle()"
+      (focus)="focused.set(true)"
+      (blur)="focused.set(false)"
+    ></select>
+    @if (focused()) {
+      <span epdfFormFocusRing [color]="colors().focus"></span>
+    }
+  `, isInline: true, dependencies: [{ kind: "component", type: FormFocusRing, selector: "span[epdfFormFocusRing]", inputs: ["color"] }, { kind: "component", type: FormListBox, selector: "select[epdfFormListBox]", inputs: ["label", "disabled", "multi", "options", "selected", "write"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: FormListControl, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'div[epdfFormList]',
+                    imports: [FormFocusRing, FormListBox],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: { '(click)': 'activate()' },
+                    template: `
+    <select
+      epdfFormListBox
+      [label]="item().label"
+      [disabled]="item().disabled"
+      [multi]="item().multi"
+      [options]="item().options"
+      [selected]="item().selected"
+      [write]="write"
+      [style]="listStyle()"
+      (focus)="focused.set(true)"
+      (blur)="focused.set(false)"
+    ></select>
+    @if (focused()) {
+      <span epdfFormFocusRing [color]="colors().focus"></span>
+    }
+  `,
+                }]
+        }] });
+/** A push button: a native click target over its picture that runs its action. */
+class FormButtonControl extends FormWidgetBox {
+    drawsEdge = false;
+    buttonStyle = computed(() => ({
+        ...FORM_CONTROL_FILL,
+        padding: '0',
+        border: '0',
+        background: 'transparent',
+        cursor: 'inherit',
+        // The box is the event surface; a disabled button must not swallow the pointer.
+        'pointer-events': this.item().disabled ? 'none' : 'auto',
+    }), ...(ngDevMode ? [{ debugName: "buttonStyle" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: FormButtonControl, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.4", type: FormButtonControl, isStandalone: true, selector: "div[epdfFormButton]", host: { properties: { "style.cursor": "item().disabled ? 'default' : 'pointer'" } }, usesInheritance: true, ngImport: i0, template: `
+    <button
+      type="button"
+      [attr.aria-label]="item().label"
+      [disabled]="item().disabled"
+      [style]="buttonStyle()"
+      (click)="activate()"
+    ></button>
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: FormButtonControl, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'div[epdfFormButton]',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: { '[style.cursor]': "item().disabled ? 'default' : 'pointer'" },
+                    template: `
+    <button
+      type="button"
+      [attr.aria-label]="item().label"
+      [disabled]="item().disabled"
+      [style]="buttonStyle()"
+      (click)="activate()"
+    ></button>
+  `,
+                }]
+        }] });
+/**
+ * A signature field: with the signature plugin, an empty field is "sign here" (it becomes the
+ * target the next mark goes to), and a signed one asks your UI to show its details. Without
+ * the plugin, the field is only its picture.
+ */
+class FormSignatureControl extends FormWidgetBox {
+    signature = new CapabilityBinding(injectKernelHost('<epdf-form-layer>'), () => SignatureToken, () => this.page.documentId);
+    signedByPlugin = this.signature.select((signature) => signature.getSignature(this.item().fieldRef)?.signed ?? null, null);
+    /**
+     * Whether the field is signed: the signature plugin knows best (it reads again after every
+     * new version), the field's own value is the fallback.
+     */
+    signed = computed(() => this.signedByPlugin() ?? this.item().signed, ...(ngDevMode ? [{ debugName: "signed" }] : []));
+    actionable = computed(() => this.signature.capability() !== null && (this.signed() || !this.item().disabled), ...(ngDevMode ? [{ debugName: "actionable" }] : []));
+    buttonStyle = {
+        ...FORM_CONTROL_FILL,
+        padding: '0',
+        border: '0',
+        background: 'transparent',
+        cursor: 'inherit',
+    };
+    open() {
+        const signature = this.signature.capability();
+        if (!signature)
+            return;
+        const field = this.item().fieldRef;
+        if (this.signed())
+            signature.requestInspection(field);
+        else
+            signature.setTarget(field);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: FormSignatureControl, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", type: FormSignatureControl, isStandalone: true, selector: "div[epdfFormSignature]", host: { properties: { "style.cursor": "actionable() ? 'pointer' : 'default'" } }, usesInheritance: true, ngImport: i0, template: `
+    @if (actionable()) {
+      <button
+        type="button"
+        [attr.aria-label]="item().label"
+        [attr.data-signed]="signed() ? '' : null"
+        [style]="buttonStyle"
+        (click)="open()"
+      ></button>
+    }
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: FormSignatureControl, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'div[epdfFormSignature]',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: { '[style.cursor]': "actionable() ? 'pointer' : 'default'" },
+                    template: `
+    @if (actionable()) {
+      <button
+        type="button"
+        [attr.aria-label]="item().label"
+        [attr.data-signed]="signed() ? '' : null"
+        [style]="buttonStyle"
+        (click)="open()"
+      ></button>
+    }
+  `,
+                }]
+        }] });
+
+/**
+ * `<epdf-field-pictures>`: the page's fields as they look now, under the form layer's controls.
+ * Each widget shows its picture, as the engine draws it (the form plugin's, every state loaded, so
+ * a check box shows its new state at once), or the painter's drawing while its look is pending or
+ * its picture is of an older version (`pictureOrPainting`): a value, a calculation, a restyle
+ * shows at once. Hidden widgets aren't drawn.
+ */
+const NO_WIDGETS$1 = Object.freeze([]);
+class EpdfFieldPictures {
+    page = injectPage('<epdf-form-layer>');
+    host = injectKernelHost('<epdf-form-layer>');
+    render = new CapabilityBinding(this.host, () => RenderToken, () => this.page.documentId);
+    form = new CapabilityBinding(this.host, () => FormToken$1, () => this.page.documentId);
+    /** The widgets the page shows: the same array while none of them changes. */
+    widgets = this.form.select((form) => form.listShownWidgets(this.page.ref), NO_WIDGETS$1);
+    /** Loaded again when one of the page's widgets is drawn again, and at appearance-scale crossings. */
+    epoch = this.form.select((form) => form.getAppearanceEpoch(this.page.ref), '');
+    scale = this.render.select((render) => render.getAppearanceScale(this.page.transform().renderScale), 0);
+    /** The pictures' URLs, by widget and state; `null` until the page's first ones arrive. */
+    urls = signal(null, ...(ngDevMode ? [{ debugName: "urls" }] : []));
+    /** The pictures shown stay valid until the next ones are shown. */
+    shown = createShownUrls();
+    looks = computed(() => {
+        const urls = this.urls();
+        const transform = this.page.transform();
+        const form = this.form.capability();
+        return this.widgets().flatMap((widget) => {
+            const key = annotationKey(widget.ref);
+            const look = pictureOrPainting({
+                pending: widget.pending,
+                picture: urls && shownAppearance(urls, key, widget.appearanceState),
+                version: widget.pictureVersion,
+                loaded: urls !== null,
+                paint: () => form?.getWidgetPainting(widget.ref) ?? null,
+            });
+            if (!look)
+                return [];
+            if (look.kind === 'picture') {
+                return [
+                    {
+                        kind: 'picture',
+                        key,
+                        url: look.picture.url,
+                        frame: rectInPixels(look.picture.box, transform),
+                    },
+                ];
+            }
+            const { x, y, width, height } = widget.rect;
+            return [
+                {
+                    kind: 'painting',
+                    key,
+                    viewBox: `${x} ${y} ${width} ${height}`,
+                    shapes: svgShapesOf(look.painting.scene, { miterLimit: MITER_LIMIT }),
+                    frame: rectInPixels(widget.rect, transform),
+                },
+            ];
+        });
+    }, ...(ngDevMode ? [{ debugName: "looks" }] : []));
+    constructor() {
+        if (!isPlatformBrowser(inject(PLATFORM_ID)))
+            return;
+        inject(DestroyRef).onDestroy(() => this.shown.release());
+        effect((onCleanup) => {
+            const form = this.form.capability();
+            const scale = this.scale();
+            const ref = this.page.ref;
+            this.epoch();
+            if (!form || !scale)
+                return;
+            onCleanup(untracked(() => loadAppearanceUrls(this.shown, (signal) => form.renderAppearances(ref, scale, signal), annotationKey, (urls) => this.urls.set(urls))));
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: EpdfFieldPictures, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", type: EpdfFieldPictures, isStandalone: true, selector: "epdf-field-pictures", ngImport: i0, template: `
+    @for (look of looks(); track look.key) {
+      @if (look.kind === 'picture') {
+        <img
+          alt=""
+          draggable="false"
+          style="position: absolute; max-width: none; max-height: none; pointer-events: none"
+          [attr.src]="look.url"
+          [style.left.px]="look.frame.left"
+          [style.top.px]="look.frame.top"
+          [style.width.px]="look.frame.width"
+          [style.height.px]="look.frame.height"
+        />
+      } @else {
+        <svg
+          style="position: absolute; overflow: visible; pointer-events: none"
+          [attr.viewBox]="look.viewBox"
+          [style.left.px]="look.frame.left"
+          [style.top.px]="look.frame.top"
+          [style.width.px]="look.frame.width"
+          [style.height.px]="look.frame.height"
+        >
+          <svg:g [epdfSvgShapes]="look.shapes"></svg:g>
+        </svg>
+      }
+    }
+  `, isInline: true, dependencies: [{ kind: "component", type: EpdfSvgShapes, selector: "g[epdfSvgShapes]", inputs: ["epdfSvgShapes"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: EpdfFieldPictures, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'epdf-field-pictures',
+                    imports: [EpdfSvgShapes],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    // A global `img { max-width: 100% }` reset would clamp a picture: the sizes are explicit.
+                    template: `
+    @for (look of looks(); track look.key) {
+      @if (look.kind === 'picture') {
+        <img
+          alt=""
+          draggable="false"
+          style="position: absolute; max-width: none; max-height: none; pointer-events: none"
+          [attr.src]="look.url"
+          [style.left.px]="look.frame.left"
+          [style.top.px]="look.frame.top"
+          [style.width.px]="look.frame.width"
+          [style.height.px]="look.frame.height"
+        />
+      } @else {
+        <svg
+          style="position: absolute; overflow: visible; pointer-events: none"
+          [attr.viewBox]="look.viewBox"
+          [style.left.px]="look.frame.left"
+          [style.top.px]="look.frame.top"
+          [style.width.px]="look.frame.width"
+          [style.height.px]="look.frame.height"
+        >
+          <svg:g [epdfSvgShapes]="look.shapes"></svg:g>
+        </svg>
+      }
+    }
+  `,
+                }]
+        }], ctorParameters: () => [] });
+
+/**
+ * `<epdf-form-layer>`: the form's fields on one page, painted as the engine draws them (their
+ * values, borders and fonts), with the controls people fill them in with. Put it above the
+ * page's picture (`<epdf-render-layer>`, and `<epdf-annotation-layer>` when the annotation
+ * plugin is registered); while it's there, the render layer leaves the fields out of the page's
+ * picture:
+ *
+ *   <ng-template epdfPage>
+ *     <epdf-render-layer />
+ *     <epdf-form-layer />
+ *   </ng-template>
+ *
+ * It works with or without the annotation plugin. The controls show while the active tool fills
+ * forms (the `pointer` and `pan` tools do), and stand down in design mode, where fields are
+ * boxes you select and move. Each field becomes a real HTML control (`controls.ts`), placed and
+ * styled like the field in the PDF, in the colors of the form settings, which the
+ * `--epdf-form-*` CSS variables override.
+ */
+const NO_WIDGETS = Object.freeze([]);
+class EpdfFormLayer {
+    page = injectPage('<epdf-form-layer>');
+    host = injectKernelHost('<epdf-form-layer>');
+    /** A plugin of the page's own document: every plugin below is read for it. */
+    bindTo(token) {
+        return new CapabilityBinding(this.host, () => token, () => this.page.documentId);
+    }
+    form = this.bindTo(FormToken$1);
+    /** Whether the active tool fills forms: the layer draws nothing in design mode. */
+    active = this.bindTo(InteractionToken).select((interaction) => interaction.activeToolEnables('form-fill'), false);
+    /** The page's widgets: the same array while nothing on the page changes. */
+    widgets = this.form.select((form) => form.listWidgets(this.page.ref), NO_WIDGETS);
+    /** The form settings, with or without a document: they belong to the plugin. */
+    settings = this.host.provides(FormToken)
+        ? this.host.settingsOf(FormToken).current
+        : signal(FORM_DEFAULTS).asReadonly();
+    /** The colors the viewer draws fields with: the form settings over the viewer's accent. */
+    colors = computed(() => {
+        const { focus, fields } = this.settings();
+        return formColorsOf({ focus, fields }, this.host.viewerSettings().accent);
+    }, ...(ngDevMode ? [{ debugName: "colors" }] : []));
+    constructor() {
+        // While it's here with the form plugin, the page's picture leaves the fields to it.
+        paintsPagePart(() => (this.form.capability() ? this.page.ref : null), 'formFields');
+        // Read the page's widgets when the layer comes to it: one read for the form.
+        effect(() => {
+            const form = this.form.capability();
+            if (form)
+                untracked(() => void form.ensureLoaded(this.page.ref));
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: EpdfFormLayer, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", type: EpdfFormLayer, isStandalone: true, selector: "epdf-form-layer", ngImport: i0, template: `
+    <div style="position: absolute; inset: 0; pointer-events: none">
+      <epdf-field-pictures />
+      @if (active()) {
+        <!-- One control per widget: a field with several boxes has one per box. -->
+        @for (item of widgets(); track item.key + ':' + item.annotObjectNumber) {
+          @switch (item.control) {
+            @case ('text') {
+              <div epdfFormText [item]="item" [colors]="colors()"></div>
+            }
+            @case ('toggle') {
+              <div epdfFormToggle [item]="item" [colors]="colors()"></div>
+            }
+            @case ('choice') {
+              @if (item.kind === 'list') {
+                <div epdfFormList [item]="item" [colors]="colors()"></div>
+              } @else {
+                <div epdfFormCombo [item]="item" [colors]="colors()"></div>
+              }
+            }
+            @case ('button') {
+              <div epdfFormButton [item]="item" [colors]="colors()"></div>
+            }
+            @case ('signature') {
+              <div epdfFormSignature [item]="item" [colors]="colors()"></div>
+            }
+          }
+        }
+      }
+    </div>
+  `, isInline: true, dependencies: [{ kind: "component", type: EpdfFieldPictures, selector: "epdf-field-pictures" }, { kind: "component", type: FormTextControl, selector: "div[epdfFormText]" }, { kind: "component", type: FormToggleControl, selector: "div[epdfFormToggle]" }, { kind: "component", type: FormComboControl, selector: "div[epdfFormCombo]" }, { kind: "component", type: FormListControl, selector: "div[epdfFormList]" }, { kind: "component", type: FormButtonControl, selector: "div[epdfFormButton]" }, { kind: "component", type: FormSignatureControl, selector: "div[epdfFormSignature]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: EpdfFormLayer, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'epdf-form-layer',
+                    imports: [
+                        EpdfFieldPictures,
+                        FormTextControl,
+                        FormToggleControl,
+                        FormComboControl,
+                        FormListControl,
+                        FormButtonControl,
+                        FormSignatureControl,
+                    ],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: `
+    <div style="position: absolute; inset: 0; pointer-events: none">
+      <epdf-field-pictures />
+      @if (active()) {
+        <!-- One control per widget: a field with several boxes has one per box. -->
+        @for (item of widgets(); track item.key + ':' + item.annotObjectNumber) {
+          @switch (item.control) {
+            @case ('text') {
+              <div epdfFormText [item]="item" [colors]="colors()"></div>
+            }
+            @case ('toggle') {
+              <div epdfFormToggle [item]="item" [colors]="colors()"></div>
+            }
+            @case ('choice') {
+              @if (item.kind === 'list') {
+                <div epdfFormList [item]="item" [colors]="colors()"></div>
+              } @else {
+                <div epdfFormCombo [item]="item" [colors]="colors()"></div>
+              }
+            }
+            @case ('button') {
+              <div epdfFormButton [item]="item" [colors]="colors()"></div>
+            }
+            @case ('signature') {
+              <div epdfFormSignature [item]="item" [colors]="colors()"></div>
+            }
+          }
+        }
+      }
+    </div>
+  `,
+                }]
+        }], ctorParameters: () => [] });
+
+/**
+ * @embedpdf/angular/form: PDF forms people fill in, and that your code reads, fills and builds.
+ *
+ *   withForm(config)          the plugin, for provideEmbedPdf()
+ *   inject(EpdfForm)          the fields, filling, form data and building, as signals, methods
+ *                             and streams
+ *   form.valueOf(ref)         one field's value, as a signal
+ *   form.controlOf(ref)       one field as a Reactive Forms FormControl
+ *   <epdf-form-layer>         the fields on each page, as real HTML controls
+ */
+// The plugin's types and helpers (`toFieldRef`), so app code has one import for the feature.
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { EpdfForm, EpdfFormLayer, withForm };
+//# sourceMappingURL=embedpdf-angular-form.mjs.map