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

package/dist/annotation/index.d.ts

@@ -11,7 +11,7 @@ import * as i0 from '@angular/core';
 import { Signal, TemplateRef, Injector } from '@angular/core';
 import { Observable } from 'rxjs';
 import * as _embedpdf_web from '@embedpdf/web';
-import { FramePixels, PictureOrPainting, TextBoxStyle } from '@embedpdf/web';
+import { FramePixels, PictureOrPainting, OwnTextBox } from '@embedpdf/web';
 import { AnchoredPlacement, EpdfAnchor } from '@embedpdf/angular/anchored';
 
 /** `annotation.selection`: what is selected, the verbs that change it as one, and its style panel. */
@@ -487,16 +487,19 @@ declare class EpdfAnnotationLayer {
 
 /**
  * Your own element as the editor of a text box you draw yourself, in a look
- * (`<ng-template [epdfAnnotation]="isTextBox" let-annotation>`):
+ * (`<ng-template [epdfAnnotation]="isTextBox" let-annotation>`), inside the element that draws
+ * the box's frame:
  *
- *   <div [epdfRichTextEditor]="annotation" #editor="epdfRichTextEditor"
- *        class="text-box" [class.editing]="editor.editing()"></div>
+ *   <div class="text-box" [class.editing]="editor.editing()">
+ *     <div [epdfRichTextEditor]="annotation" #editor="epdfRichTextEditor"></div>
+ *   </div>
  *
  * It draws the runs, turns typing back into runs, keeps the caret when the style changes, and
  * handles pasting, input methods and the format shortcuts; `text.toggleFormat()` and
  * `selection.update()` work on it as on the layer's own box. It gives the element the box's
- * body style (font, size, color and alignment), and while someone types it takes the pointer.
- * Leave the element empty: the editor fills it.
+ * body style (font, size, color and alignment), filling its parent at a legible size
+ * (`ownTextBoxOf`), so draw the box's fill, border and padding on the parent; while someone
+ * types it takes the pointer. Leave the element empty: the editor fills it.
  */
 declare class EpdfRichTextEditor {
     /** The free text annotation this element edits: the template's `let-annotation`. */
@@ -506,12 +509,12 @@ declare class EpdfRichTextEditor {
     private readonly lookScale;
     private readonly view;
     private readonly pixels;
-    /** The annotation's text box on the page, or null while there is none. */
+    /** The annotation's text box, saved and idle too (this element draws its text), or null. */
     private readonly item;
     /** Pixels per point where the element is: in a scaled look, at the annotation's 100% size. */
     private readonly scale;
-    /** The box's body style: font, size, color and alignment, or null while there is no box. */
-    protected readonly look: Signal<TextBoxStyle | null>;
+    /** The element's style and the scale its text is laid out at, or null while there is no box. */
+    protected readonly own: Signal<OwnTextBox | null>;
     /** True while someone types in the box. */
     readonly editing: Signal<boolean>;
     constructor();

package/dist/attachment/index.d.ts

@@ -0,0 +1,29 @@
+import * as _embedpdf_plugin_attachment from '@embedpdf/plugin-attachment';
+export * from '@embedpdf/plugin-attachment';
+import * as _embedpdf_angular_runtime from '@embedpdf/angular/runtime';
+import { EmbedPdfFeature } from '@embedpdf/angular/runtime';
+import * as _embedpdf_core from '@embedpdf/core';
+import * as i0 from '@angular/core';
+
+declare const EpdfAttachment_base: _embedpdf_angular_runtime.PluginServiceClass<_embedpdf_plugin_attachment.AttachmentCapability, {
+    files: readonly _embedpdf_plugin_attachment.AttachedFile[];
+    selected: readonly _embedpdf_plugin_attachment.AttachedFile[];
+    status: _embedpdf_core.ResourceStatus;
+    canAdd: boolean;
+    canDownload: boolean;
+}, "add" | "download" | "select" | "get" | "isPending" | "refresh" | "ensureLoaded" | "canRemove" | "remove" | "reveal", "onResynced" | "onChanged">;
+/**
+ * The files of the document in scope (`[epdfDocumentScope]`), else the active one: the State
+ * table as signals (`files()`, `selected()`, `status()`, `canAdd()`, `canDownload()`), the
+ * reads that take a file (`get()`, `isPending()`, `canRemove()`), the calls that select, add,
+ * remove, save and go to files, and the streams `changed$` and `resynced$`. Reading it reads the attachments. With no
+ * document the signals read empty, and every call refuses with `not-ready`.
+ */
+declare class EpdfAttachment extends EpdfAttachment_base {
+    static ɵfac: i0.ɵɵFactoryDeclaration<EpdfAttachment, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<EpdfAttachment>;
+}
+/** The attachments, for `provideEmbedPdf()`. */
+declare function withAttachment(): EmbedPdfFeature;
+
+export { EpdfAttachment, withAttachment };

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

@@ -1,10 +1,10 @@
 import { AnnotationToken, annotationState, annotationPlugin, ANNOTATION_DEFAULTS } from '@embedpdf/plugin-annotation';
 export * from '@embedpdf/plugin-annotation';
 import * as i0 from '@angular/core';
-import { computed, Injectable, inject, DestroyRef, input, ChangeDetectionStrategy, Component, Directive, booleanAttribute, TemplateRef, InjectionToken, effect, untracked, ElementRef, Injector, contentChildren, contentChild, signal, PLATFORM_ID } from '@angular/core';
+import { computed, Injectable, inject, DestroyRef, input, ChangeDetectionStrategy, Component, Directive, booleanAttribute, TemplateRef, InjectionToken, afterRenderEffect, untracked, ElementRef, Injector, contentChildren, contentChild, signal, PLATFORM_ID, effect } from '@angular/core';
 import { EpdfPluginService, injectDocumentScope, pluginService, CapabilityBinding, injectKernelHost, devWarn, injectPage, EpdfSvgShapes, paintsPagePart, outsideStageError } from '@embedpdf/angular/runtime';
 import { AnnotationToken as AnnotationToken$1, previewBucket } from '@embedpdf/plugin-annotation/contract/host';
-import { enrichCommentThreads, sameAnnotationAnchor, pickRequestedFile, annotationChromePaint, chromeInPixels, sceneViewBox, svgShapesOf, ghostOpacity, rasterInFrame, createTextBoxEditorFollower, textPlateInPixels, textBoxStyleOf, textBoxEditorScaleOf, createShownUrls, editingTextKeyOf, frameInPixels, bakedAppearanceOf, pictureOrPainting, shownAppearance, annotationDrawingOf, lookFrameOf, layerTextBoxesOf, rectInPixels, registerRendererBehaviors, loadAppearanceUrls, loadObjectUrl, sameSelectionAnchor, sameCreationDraftAnchor, sameRotationAnchor, paintDefault, paint } from '@embedpdf/web';
+import { enrichCommentThreads, sameAnnotationAnchor, pickRequestedFile, annotationChromePaint, chromeInPixels, sceneViewBox, svgShapesOf, ghostOpacity, rasterInFrame, createTextBoxEditorFollower, freeTextBoxOf, textBoxEditorScaleOf, ownTextBoxOf, createShownUrls, editingTextKeyOf, frameInPixels, bakedAppearanceOf, pictureOrPainting, shownAppearance, annotationDrawingOf, lookFrameOf, layerTextBoxesOf, rectInPixels, registerRendererBehaviors, loadAppearanceUrls, loadObjectUrl, sameSelectionAnchor, sameCreationDraftAnchor, sameRotationAnchor, paintDefault, paint } from '@embedpdf/web';
 import { annotationKey } from '@embedpdf/core';
 import { NgTemplateOutlet, isPlatformBrowser } from '@angular/common';
 import { scene, MITER_LIMIT, hasLiveDrawing } from '@embedpdf/core-annotation';
@@ -1128,21 +1128,27 @@ const EPDF_LOOK_SCALE = new InjectionToken('EPDF_LOOK_SCALE');
  * Make `element` the editor of the text box `item()` reads, at `scale()` pixels per point: the
  * binding attaches when the plugin is there (again for another document), and redraws only
  * when the text differs. Call it in an injection context; it lets go when the caller goes.
+ *
+ * It follows after the render, not before: when typing starts, the look's frame around the
+ * element stops being inert in that same render, and an element inside an inert one can't take
+ * focus (the editor's `focus()` would do nothing, and the keys would go to the page).
  */
 function bindTextBoxEditor(element, annotation, item, scale) {
     const follower = createTextBoxEditorFollower();
-    effect(() => {
-        const host = annotation();
-        const next = item();
-        const at = scale();
-        untracked(() => follower.follow(element, host, next, at));
+    afterRenderEffect({
+        write: () => {
+            const host = annotation();
+            const next = item();
+            const at = scale();
+            untracked(() => follower.follow(element, host, next, at));
+        },
     });
     inject(DestroyRef).onDestroy(() => follower.detach());
 }
 /**
  * The layer's own text box for one free text: the engine's text plate (the box inset by its
- * padding), styled like the box's body, with no padding of its own so its edge is the plate's.
- * The box's fill and border are the vector scene's, under it. It takes the pointer only while
+ * padding), styled like the box's body and laid out at a legible size (`freeTextBoxOf`). The
+ * box's fill and border are the vector scene's, under it. It takes the pointer only while
  * someone types in it; otherwise clicks fall through to the shapes (select, move, resize).
  */
 class EpdfFreeTextBox {
@@ -1152,56 +1158,37 @@ class EpdfFreeTextBox {
     outline = input.required(...(ngDevMode ? [{ debugName: "outline" }] : []));
     page = injectPage('[epdfFreeTextBox]');
     pixels = pagePixelsOf(this.page);
-    plate = computed(() => textPlateInPixels(this.item(), this.pixels()), ...(ngDevMode ? [{ debugName: "plate" }] : []));
-    look = computed(() => textBoxStyleOf(this.item().css, this.plate().scale), ...(ngDevMode ? [{ debugName: "look" }] : []));
+    box = computed(() => freeTextBoxOf(this.item(), this.pixels(), this.outline()), ...(ngDevMode ? [{ debugName: "box" }] : []));
     constructor() {
         const annotation = annotationHostOf(this.page, '[epdfFreeTextBox]').capability;
-        bindTextBoxEditor(inject(ElementRef).nativeElement, annotation, this.item, computed(() => this.plate().scale));
+        bindTextBoxEditor(inject(ElementRef).nativeElement, annotation, this.item, computed(() => this.box().scale));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: EpdfFreeTextBox, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.2.4", type: EpdfFreeTextBox, isStandalone: true, selector: "[epdfFreeTextBox]", inputs: { item: { classPropertyName: "item", publicName: "epdfFreeTextBox", isSignal: true, isRequired: true, transformFunction: null }, outline: { classPropertyName: "outline", publicName: "outline", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "style.left.px": "plate().left", "style.top.px": "plate().top", "style.width.px": "plate().width", "style.height.px": "plate().height", "style.font-family": "look().fontFamily", "style.font-size": "look().fontSize", "style.color": "look().color", "style.font-weight": "look().fontWeight", "style.font-style": "look().fontStyle", "style.text-decoration": "look().textDecoration", "style.text-align": "look().textAlign", "style.overflow-y": "item().editing ? 'auto' : 'hidden'", "style.outline": "item().editing ? '1px solid ' + outline() : 'none'", "style.cursor": "item().editing ? 'text' : 'default'", "style.transform": "item().rot ? 'rotate(' + item().rot + 'deg)' : null", "style.pointer-events": "item().editing ? 'auto' : 'none'" }, styleAttribute: "position: absolute; box-sizing: border-box; background: transparent; white-space: pre-wrap; overflow-wrap: break-word; overflow-x: hidden; transform-origin: center" }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.2.4", type: EpdfFreeTextBox, isStandalone: true, selector: "[epdfFreeTextBox]", inputs: { item: { classPropertyName: "item", publicName: "epdfFreeTextBox", isSignal: true, isRequired: true, transformFunction: null }, outline: { classPropertyName: "outline", publicName: "outline", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "style": "box().style" } }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: EpdfFreeTextBox, decorators: [{
             type: Directive,
             args: [{
                     selector: '[epdfFreeTextBox]',
-                    host: {
-                        style: 'position: absolute; box-sizing: border-box; background: transparent; ' +
-                            'white-space: pre-wrap; overflow-wrap: break-word; overflow-x: hidden; transform-origin: center',
-                        '[style.left.px]': 'plate().left',
-                        '[style.top.px]': 'plate().top',
-                        '[style.width.px]': 'plate().width',
-                        // Fixed to the plate: the box never grows with its text; it scrolls while typing and clips
-                        // otherwise, where the baked appearance clips.
-                        '[style.height.px]': 'plate().height',
-                        '[style.font-family]': 'look().fontFamily',
-                        '[style.font-size]': 'look().fontSize',
-                        '[style.color]': 'look().color',
-                        '[style.font-weight]': 'look().fontWeight',
-                        '[style.font-style]': 'look().fontStyle',
-                        '[style.text-decoration]': 'look().textDecoration',
-                        '[style.text-align]': 'look().textAlign',
-                        '[style.overflow-y]': "item().editing ? 'auto' : 'hidden'",
-                        '[style.outline]': "item().editing ? '1px solid ' + outline() : 'none'",
-                        '[style.cursor]': "item().editing ? 'text' : 'default'",
-                        // A plain text box turns about its centre, as the baked appearance does.
-                        '[style.transform]': "item().rot ? 'rotate(' + item().rot + 'deg)' : null",
-                        '[style.pointer-events]': "item().editing ? 'auto' : 'none'",
-                    },
+                    // Property by property: the editor's own line height on the element stays.
+                    host: { '[style]': 'box().style' },
                 }]
         }], ctorParameters: () => [] });
 /**
  * Your own element as the editor of a text box you draw yourself, in a look
- * (`<ng-template [epdfAnnotation]="isTextBox" let-annotation>`):
+ * (`<ng-template [epdfAnnotation]="isTextBox" let-annotation>`), inside the element that draws
+ * the box's frame:
  *
- *   <div [epdfRichTextEditor]="annotation" #editor="epdfRichTextEditor"
- *        class="text-box" [class.editing]="editor.editing()"></div>
+ *   <div class="text-box" [class.editing]="editor.editing()">
+ *     <div [epdfRichTextEditor]="annotation" #editor="epdfRichTextEditor"></div>
+ *   </div>
  *
  * It draws the runs, turns typing back into runs, keeps the caret when the style changes, and
  * handles pasting, input methods and the format shortcuts; `text.toggleFormat()` and
  * `selection.update()` work on it as on the layer's own box. It gives the element the box's
- * body style (font, size, color and alignment), and while someone types it takes the pointer.
- * Leave the element empty: the editor fills it.
+ * body style (font, size, color and alignment), filling its parent at a legible size
+ * (`ownTextBoxOf`), so draw the box's fill, border and padding on the parent; while someone
+ * types it takes the pointer. Leave the element empty: the editor fills it.
  */
 class EpdfRichTextEditor {
     /** The free text annotation this element edits: the template's `let-annotation`. */
@@ -1211,44 +1198,30 @@ class EpdfRichTextEditor {
     lookScale = inject(EPDF_LOOK_SCALE, { optional: true });
     view = pageViewOf(this.page);
     pixels = pagePixelsOf(this.page);
-    /** The annotation's text box on the page, or null while there is none. */
-    item = this.host.select((annotation) => {
-        const key = annotationKey(this.annotation().ref);
-        return (annotation
-            .listTextItems(this.page.ref, this.view())
-            .find((text) => text.ref !== null && annotationKey(text.ref) === key) ?? null);
-    }, null);
+    /** The annotation's text box, saved and idle too (this element draws its text), or null. */
+    item = this.host.select((annotation) => annotation.getTextItem(this.annotation().ref, this.view()), null);
     /** Pixels per point where the element is: in a scaled look, at the annotation's 100% size. */
     scale = computed(() => textBoxEditorScaleOf(this.item(), this.pixels(), this.lookScale?.() ?? 1), ...(ngDevMode ? [{ debugName: "scale" }] : []));
-    /** The box's body style: font, size, color and alignment, or null while there is no box. */
-    look = computed(() => {
+    /** The element's style and the scale its text is laid out at, or null while there is no box. */
+    own = computed(() => {
         const item = this.item();
-        return item ? textBoxStyleOf(item.css, this.scale()) : null;
-    }, ...(ngDevMode ? [{ debugName: "look" }] : []));
+        return item ? ownTextBoxOf(item, this.scale()) : null;
+    }, ...(ngDevMode ? [{ debugName: "own" }] : []));
     /** True while someone types in the box. */
     editing = computed(() => this.item()?.editing ?? false, ...(ngDevMode ? [{ debugName: "editing" }] : []));
     constructor() {
-        bindTextBoxEditor(inject(ElementRef).nativeElement, this.host.capability, this.item, this.scale);
+        bindTextBoxEditor(inject(ElementRef).nativeElement, this.host.capability, this.item, computed(() => this.own()?.scale ?? this.scale()));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: EpdfRichTextEditor, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.2.4", type: EpdfRichTextEditor, isStandalone: true, selector: "[epdfRichTextEditor]", inputs: { annotation: { classPropertyName: "annotation", publicName: "epdfRichTextEditor", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "style.font-family": "look()?.fontFamily ?? null", "style.font-size": "look()?.fontSize ?? null", "style.color": "look()?.color ?? null", "style.font-weight": "look()?.fontWeight ?? null", "style.font-style": "look()?.fontStyle ?? null", "style.text-decoration": "look()?.textDecoration ?? null", "style.text-align": "look()?.textAlign ?? null", "style.pointer-events": "editing() ? 'auto' : null" } }, exportAs: ["epdfRichTextEditor"], ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.2.4", type: EpdfRichTextEditor, isStandalone: true, selector: "[epdfRichTextEditor]", inputs: { annotation: { classPropertyName: "annotation", publicName: "epdfRichTextEditor", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "style": "own()?.style ?? null" } }, exportAs: ["epdfRichTextEditor"], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: EpdfRichTextEditor, decorators: [{
             type: Directive,
             args: [{
                     selector: '[epdfRichTextEditor]',
                     exportAs: 'epdfRichTextEditor',
-                    host: {
-                        '[style.font-family]': 'look()?.fontFamily ?? null',
-                        '[style.font-size]': 'look()?.fontSize ?? null',
-                        '[style.color]': 'look()?.color ?? null',
-                        '[style.font-weight]': 'look()?.fontWeight ?? null',
-                        '[style.font-style]': 'look()?.fontStyle ?? null',
-                        '[style.text-decoration]': 'look()?.textDecoration ?? null',
-                        '[style.text-align]': 'look()?.textAlign ?? null',
-                        // While typing, the element takes the pointer (the caret, a drag over words).
-                        '[style.pointer-events]': "editing() ? 'auto' : null",
-                    },
+                    // Property by property: the editor's own line height on the element stays.
+                    host: { '[style]': 'own()?.style ?? null' },
                 }]
         }], ctorParameters: () => [] });