@h-k-dev/angular-email-editor 0.0.0-stage → 0.0.1

package/fesm2022/h-k-dev-angular-email-editor-focus.mjs

@@ -0,0 +1,68 @@
+import * as i0 from '@angular/core';
+import { input, booleanAttribute, inject, ElementRef, Directive } from '@angular/core';
+
+/** Where a press may still take focus by default: real text entry. A field
+    inside a toolbar has to be typed in; everything else there is a tool. */
+const KEEP_FOCUS_EXCEPT = 'input, textarea, select, [contenteditable]:not([contenteditable="false"])';
+/**
+ * A press on this element never takes focus from wherever it is — the
+ * editor keeps its caret and its selection while a toolbar button, a menu
+ * row or a swatch is clicked, and whatever depends on the editor's focus (a
+ * bubble menu, a suggestion list) stays open through the click.
+ *
+ * Behaviour only: it renders nothing and sets no attribute, so it goes on a
+ * host's own elements — a Material button, an Aria toolbar, a CDK overlay's
+ * panel — or into a host's own component through `hostDirectives`:
+ *
+ *     <div role="toolbar" emailKeepFocus> … <button mat-icon-button>…</button> … </div>
+ *
+ *     @Component({ …, hostDirectives: [KeepFocus] })
+ *
+ * One on a container covers everything in it: the press bubbles. Only the
+ * pointer is kept out — Tab and the arrow keys still reach the tools, which
+ * is what makes them usable from the keyboard — and only the press: the
+ * click that follows runs as ever.
+ *
+ * It needs no editor: what keeps focus is whichever element has it, so the
+ * same directive serves a composer's address rows.
+ */
+class KeepFocus {
+    /** Off with `[emailKeepFocus]="false"`; on by its presence. */
+    enabled = input(true, { ...(ngDevMode ? { debugName: "enabled" } : /* istanbul ignore next */ {}), alias: 'emailKeepFocus', transform: booleanAttribute });
+    /** What inside this element may still take focus on a press — a selector.
+        Text entry by default ({@link KEEP_FOCUS_EXCEPT}); `''` for nothing. */
+    except = input(KEEP_FOCUS_EXCEPT, { ...(ngDevMode ? { debugName: "except" } : /* istanbul ignore next */ {}), alias: 'emailKeepFocusExcept' });
+    #host = inject(ElementRef).nativeElement;
+    onMousedown(event) {
+        if (!this.enabled())
+            return;
+        const except = this.except();
+        const target = event.target;
+        // An exception counts inside this element only: standing in an editor's
+        // contenteditable must not make every press here an exception.
+        const excepted = except ? target?.closest?.(except) : null;
+        if (excepted && this.#host.contains(excepted))
+            return;
+        event.preventDefault();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: KeepFocus, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.6", type: KeepFocus, isStandalone: true, selector: "[emailKeepFocus]", inputs: { enabled: { classPropertyName: "enabled", publicName: "emailKeepFocus", isSignal: true, isRequired: false, transformFunction: null }, except: { classPropertyName: "except", publicName: "emailKeepFocusExcept", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "mousedown": "onMousedown($event)" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: KeepFocus, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[emailKeepFocus]',
+                    host: { '(mousedown)': 'onMousedown($event)' },
+                }]
+        }], propDecorators: { enabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "emailKeepFocus", required: false }] }], except: [{ type: i0.Input, args: [{ isSignal: true, alias: "emailKeepFocusExcept", required: false }] }] } });
+
+/*
+ * Public API Surface of @h-k-dev/angular-email-editor/focus
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { KEEP_FOCUS_EXCEPT, KeepFocus };
+//# sourceMappingURL=h-k-dev-angular-email-editor-focus.mjs.map

package/fesm2022/h-k-dev-angular-email-editor-focus.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"h-k-dev-angular-email-editor-focus.mjs","sources":["../../../projects/angular-email-editor/focus/keep-focus.ts","../../../projects/angular-email-editor/focus/public-api.ts","../../../projects/angular-email-editor/focus/h-k-dev-angular-email-editor-focus.ts"],"sourcesContent":["import { Directive, ElementRef, booleanAttribute, inject, input } from '@angular/core';\n\n/** Where a press may still take focus by default: real text entry. A field\n    inside a toolbar has to be typed in; everything else there is a tool. */\nexport const KEEP_FOCUS_EXCEPT =\n  'input, textarea, select, [contenteditable]:not([contenteditable=\"false\"])';\n\n/**\n * A press on this element never takes focus from wherever it is — the\n * editor keeps its caret and its selection while a toolbar button, a menu\n * row or a swatch is clicked, and whatever depends on the editor's focus (a\n * bubble menu, a suggestion list) stays open through the click.\n *\n * Behaviour only: it renders nothing and sets no attribute, so it goes on a\n * host's own elements — a Material button, an Aria toolbar, a CDK overlay's\n * panel — or into a host's own component through `hostDirectives`:\n *\n *     <div role=\"toolbar\" emailKeepFocus> … <button mat-icon-button>…</button> … </div>\n *\n *     @Component({ …, hostDirectives: [KeepFocus] })\n *\n * One on a container covers everything in it: the press bubbles. Only the\n * pointer is kept out — Tab and the arrow keys still reach the tools, which\n * is what makes them usable from the keyboard — and only the press: the\n * click that follows runs as ever.\n *\n * It needs no editor: what keeps focus is whichever element has it, so the\n * same directive serves a composer's address rows.\n */\n@Directive({\n  selector: '[emailKeepFocus]',\n  host: { '(mousedown)': 'onMousedown($event)' },\n})\nexport class KeepFocus {\n  /** Off with `[emailKeepFocus]=\"false\"`; on by its presence. */\n  readonly enabled = input(true, { alias: 'emailKeepFocus', transform: booleanAttribute });\n\n  /** What inside this element may still take focus on a press — a selector.\n      Text entry by default ({@link KEEP_FOCUS_EXCEPT}); `''` for nothing. */\n  readonly except = input(KEEP_FOCUS_EXCEPT, { alias: 'emailKeepFocusExcept' });\n\n  readonly #host = inject<ElementRef<HTMLElement>>(ElementRef).nativeElement;\n\n  protected onMousedown(event: MouseEvent): void {\n    if (!this.enabled()) return;\n    const except = this.except();\n    const target = event.target as Element | null;\n    // An exception counts inside this element only: standing in an editor's\n    // contenteditable must not make every press here an exception.\n    const excepted = except ? target?.closest?.(except) : null;\n    if (excepted && this.#host.contains(excepted)) return;\n    event.preventDefault();\n  }\n}\n","/*\n * Public API Surface of @h-k-dev/angular-email-editor/focus\n */\n\nexport * from './keep-focus';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;AAEA;AAC4E;AACrE,MAAM,iBAAiB,GAC5B;AAEF;;;;;;;;;;;;;;;;;;;;;AAqBG;MAKU,SAAS,CAAA;;AAEX,IAAA,OAAO,GAAG,KAAK,CAAC,IAAI,EAAA,EAAA,IAAA,SAAA,GAAA,EAAA,SAAA,EAAA,SAAA,EAAA,8BAAA,EAAA,CAAA,EAAI,KAAK,EAAE,gBAAgB,EAAE,SAAS,EAAE,gBAAgB,GAAG;AAExF;AAC2E;IAClE,MAAM,GAAG,KAAK,CAAC,iBAAiB,8EAAI,KAAK,EAAE,sBAAsB,EAAA,CAAG;AAEpE,IAAA,KAAK,GAAG,MAAM,CAA0B,UAAU,CAAC,CAAC,aAAa;AAEhE,IAAA,WAAW,CAAC,KAAiB,EAAA;AACrC,QAAA,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE;YAAE;AACrB,QAAA,MAAM,MAAM,GAAG,IAAI,CAAC,MAAM,EAAE;AAC5B,QAAA,MAAM,MAAM,GAAG,KAAK,CAAC,MAAwB;;;AAG7C,QAAA,MAAM,QAAQ,GAAG,MAAM,GAAG,MAAM,EAAE,OAAO,GAAG,MAAM,CAAC,GAAG,IAAI;QAC1D,IAAI,QAAQ,IAAI,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,QAAQ,CAAC;YAAE;QAC/C,KAAK,CAAC,cAAc,EAAE;IACxB;uGAnBW,SAAS,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;2FAAT,SAAS,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,kBAAA,EAAA,MAAA,EAAA,EAAA,OAAA,EAAA,EAAA,iBAAA,EAAA,SAAA,EAAA,UAAA,EAAA,gBAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,MAAA,EAAA,EAAA,iBAAA,EAAA,QAAA,EAAA,UAAA,EAAA,sBAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,IAAA,EAAA,EAAA,SAAA,EAAA,EAAA,WAAA,EAAA,qBAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA;;2FAAT,SAAS,EAAA,UAAA,EAAA,CAAA;kBAJrB,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,kBAAkB;AAC5B,oBAAA,IAAI,EAAE,EAAE,aAAa,EAAE,qBAAqB,EAAE;AAC/C,iBAAA;;;AChCD;;AAEG;;ACFH;;AAEG;;;;"}

package/fesm2022/h-k-dev-angular-email-editor-image.mjs

@@ -0,0 +1,132 @@
+import * as i0 from '@angular/core';
+import { input, booleanAttribute, output, inject, ElementRef, computed, linkedSignal, afterNextRender, Directive } from '@angular/core';
+import { selectedImage, selectedImageAlt } from '@h-k-dev/angular-email-editor';
+import { editorState } from '@h-k-dev/angular-email-editor/actions';
+
+/**
+ * Makes the host's own text field the alt text of the editor's selected
+ * image — the image a click selected, or a drag over it alone
+ * (`selectedImage`). Everything but the field and its words is done:
+ *
+ *     <input dir="auto" [emailImageAlt]="editor" #alt="emailImageAlt"
+ *            (emailImageAltClosed)="open.set(false)" />
+ *     <button (click)="alt.apply()">Apply</button>
+ *
+ * - the field shows the image's alt, and again whenever another image is
+ *   selected; it is focused and selected as it appears, so typing replaces
+ *   it (`[emailImageAltAutoSelect]="false"` for a field that is always
+ *   there, a side panel's);
+ * - Enter applies — trimmed, and an emptied field takes the alt off — and
+ *   Escape puts the alt back as it was; both hand the caret back to the
+ *   editor (`[emailImageAltFocus]="false"` keeps it) and say so through
+ *   `emailImageAltClosed`: `true` applied, `false` not — the host's cue to
+ *   close its popover. Neither fires mid-composition: an IME's own Enter
+ *   and Escape stay the IME's;
+ * - `apply()` and `cancel()` are there for the host's buttons, `value()`
+ *   and `active()` for its bindings (an Apply that waits for a change).
+ *
+ * The field's words and direction are the host's: its label, its
+ * placeholder, and `dir="auto"` so an alt in a right-to-left script reads
+ * the right way round. The image stays selected throughout — the editor
+ * keeps its selection while the field has focus — so the popover can sit
+ * where the host likes.
+ */
+class ImageAlt {
+    /** The editor whose selected image this field describes. */
+    editor = input.required({ ...(ngDevMode ? { debugName: "editor" } : /* istanbul ignore next */ {}), alias: 'emailImageAlt' });
+    /** Whether the field takes focus, its text selected, as it appears. */
+    autoSelect = input(true, { ...(ngDevMode ? { debugName: "autoSelect" } : /* istanbul ignore next */ {}), alias: 'emailImageAltAutoSelect',
+        transform: booleanAttribute });
+    /** Whether the caret returns to the editor after an apply or a cancel. */
+    returnFocus = input(true, { ...(ngDevMode ? { debugName: "returnFocus" } : /* istanbul ignore next */ {}), alias: 'emailImageAltFocus', transform: booleanAttribute });
+    /** Done with the field: `true` when the alt was applied, `false` when
+        not — cancelled, or no image to apply it to. */
+    closed = output({ alias: 'emailImageAltClosed' });
+    #element = inject(ElementRef)
+        .nativeElement;
+    #state = editorState(() => this.editor());
+    /** The selected image — where it is and what its alt says — or null. */
+    #image = computed(() => {
+        const state = this.#state();
+        const image = state && selectedImage(state);
+        return image ? { pos: image.pos, alt: selectedImageAlt(state) ?? '' } : null;
+    }, { ...(ngDevMode ? { debugName: "#image" } : /* istanbul ignore next */ {}), equal: (a, b) => a?.pos === b?.pos && a?.alt === b?.alt });
+    /** Whether an image is selected at all — there is nothing to describe
+        otherwise, and `apply()` does nothing. */
+    active = computed(() => this.#image() !== null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
+    /**
+     * What the field says: the selected image's alt, until typing changes it
+     * — the draft. It starts over from the image whenever another one is
+     * selected or its alt changes elsewhere; typing changes no editor state,
+     * so it is never written over. Deliberately no write-back setter: the
+     * draft reaches the document once, on `apply()`, as one undo step — not
+     * a transaction per keystroke.
+     */
+    value = linkedSignal(() => this.#image()?.alt ?? '', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    constructor() {
+        // Focus is a DOM write, after the render that put the field (and its
+        // bound value) on the page.
+        afterNextRender({
+            write: () => {
+                if (!this.autoSelect())
+                    return;
+                this.#element.focus();
+                this.#element.select();
+            },
+        });
+    }
+    /** Writes the draft to the selected image's alt. False when no image is
+        selected. */
+    apply() {
+        const applied = !!this.editor()?.commands['setImageAlt']?.(this.value());
+        this.#done(applied);
+        return applied;
+    }
+    /** Leaves the alt as it was, and the field with it. */
+    cancel() {
+        this.value.set(this.#image()?.alt ?? '');
+        this.#done(false);
+    }
+    onKey(event, apply) {
+        if (event.isComposing)
+            return;
+        event.preventDefault();
+        if (apply)
+            this.apply();
+        else
+            this.cancel();
+    }
+    #done(applied) {
+        if (this.returnFocus())
+            this.editor()?.focus();
+        this.closed.emit(applied);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: ImageAlt, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.6", type: ImageAlt, isStandalone: true, selector: "input[emailImageAlt], textarea[emailImageAlt]", inputs: { editor: { classPropertyName: "editor", publicName: "emailImageAlt", isSignal: true, isRequired: true, transformFunction: null }, autoSelect: { classPropertyName: "autoSelect", publicName: "emailImageAltAutoSelect", isSignal: true, isRequired: false, transformFunction: null }, returnFocus: { classPropertyName: "returnFocus", publicName: "emailImageAltFocus", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "emailImageAltClosed" }, host: { listeners: { "input": "value.set($any($event.target).value)", "keydown.enter": "onKey($event, true)", "keydown.escape": "onKey($event, false)" }, properties: { "value": "value()" } }, exportAs: ["emailImageAlt"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: ImageAlt, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'input[emailImageAlt], textarea[emailImageAlt]',
+                    exportAs: 'emailImageAlt',
+                    host: {
+                        '[value]': 'value()',
+                        '(input)': 'value.set($any($event.target).value)',
+                        '(keydown.enter)': 'onKey($event, true)',
+                        '(keydown.escape)': 'onKey($event, false)',
+                    },
+                }]
+        }], ctorParameters: () => [], propDecorators: { editor: [{ type: i0.Input, args: [{ isSignal: true, alias: "emailImageAlt", required: true }] }], autoSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "emailImageAltAutoSelect", required: false }] }], returnFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "emailImageAltFocus", required: false }] }], closed: [{ type: i0.Output, args: ["emailImageAltClosed"] }] } });
+
+/*
+ * Public API Surface of @h-k-dev/angular-email-editor/image
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ImageAlt };
+//# sourceMappingURL=h-k-dev-angular-email-editor-image.mjs.map

package/fesm2022/h-k-dev-angular-email-editor-image.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"h-k-dev-angular-email-editor-image.mjs","sources":["../../../projects/angular-email-editor/image/image-alt.ts","../../../projects/angular-email-editor/image/public-api.ts","../../../projects/angular-email-editor/image/h-k-dev-angular-email-editor-image.ts"],"sourcesContent":["import {\n  Directive,\n  ElementRef,\n  afterNextRender,\n  booleanAttribute,\n  computed,\n  inject,\n  input,\n  linkedSignal,\n  output,\n} from '@angular/core';\nimport { Editor, selectedImage, selectedImageAlt } from '@h-k-dev/angular-email-editor';\nimport { editorState } from '@h-k-dev/angular-email-editor/actions';\n\n/**\n * Makes the host's own text field the alt text of the editor's selected\n * image — the image a click selected, or a drag over it alone\n * (`selectedImage`). Everything but the field and its words is done:\n *\n *     <input dir=\"auto\" [emailImageAlt]=\"editor\" #alt=\"emailImageAlt\"\n *            (emailImageAltClosed)=\"open.set(false)\" />\n *     <button (click)=\"alt.apply()\">Apply</button>\n *\n * - the field shows the image's alt, and again whenever another image is\n *   selected; it is focused and selected as it appears, so typing replaces\n *   it (`[emailImageAltAutoSelect]=\"false\"` for a field that is always\n *   there, a side panel's);\n * - Enter applies — trimmed, and an emptied field takes the alt off — and\n *   Escape puts the alt back as it was; both hand the caret back to the\n *   editor (`[emailImageAltFocus]=\"false\"` keeps it) and say so through\n *   `emailImageAltClosed`: `true` applied, `false` not — the host's cue to\n *   close its popover. Neither fires mid-composition: an IME's own Enter\n *   and Escape stay the IME's;\n * - `apply()` and `cancel()` are there for the host's buttons, `value()`\n *   and `active()` for its bindings (an Apply that waits for a change).\n *\n * The field's words and direction are the host's: its label, its\n * placeholder, and `dir=\"auto\"` so an alt in a right-to-left script reads\n * the right way round. The image stays selected throughout — the editor\n * keeps its selection while the field has focus — so the popover can sit\n * where the host likes.\n */\n@Directive({\n  selector: 'input[emailImageAlt], textarea[emailImageAlt]',\n  exportAs: 'emailImageAlt',\n  host: {\n    '[value]': 'value()',\n    '(input)': 'value.set($any($event.target).value)',\n    '(keydown.enter)': 'onKey($event, true)',\n    '(keydown.escape)': 'onKey($event, false)',\n  },\n})\nexport class ImageAlt {\n  /** The editor whose selected image this field describes. */\n  readonly editor = input.required<Editor | undefined>({ alias: 'emailImageAlt' });\n\n  /** Whether the field takes focus, its text selected, as it appears. */\n  readonly autoSelect = input(true, {\n    alias: 'emailImageAltAutoSelect',\n    transform: booleanAttribute,\n  });\n\n  /** Whether the caret returns to the editor after an apply or a cancel. */\n  readonly returnFocus = input(true, { alias: 'emailImageAltFocus', transform: booleanAttribute });\n\n  /** Done with the field: `true` when the alt was applied, `false` when\n      not — cancelled, or no image to apply it to. */\n  readonly closed = output<boolean>({ alias: 'emailImageAltClosed' });\n\n  readonly #element = inject<ElementRef<HTMLInputElement | HTMLTextAreaElement>>(ElementRef)\n    .nativeElement;\n\n  readonly #state = editorState(() => this.editor());\n\n  /** The selected image — where it is and what its alt says — or null. */\n  readonly #image = computed(\n    () => {\n      const state = this.#state();\n      const image = state && selectedImage(state);\n      return image ? { pos: image.pos, alt: selectedImageAlt(state) ?? '' } : null;\n    },\n    { equal: (a, b) => a?.pos === b?.pos && a?.alt === b?.alt },\n  );\n\n  /** Whether an image is selected at all — there is nothing to describe\n      otherwise, and `apply()` does nothing. */\n  readonly active = computed(() => this.#image() !== null);\n\n  /**\n   * What the field says: the selected image's alt, until typing changes it\n   * — the draft. It starts over from the image whenever another one is\n   * selected or its alt changes elsewhere; typing changes no editor state,\n   * so it is never written over. Deliberately no write-back setter: the\n   * draft reaches the document once, on `apply()`, as one undo step — not\n   * a transaction per keystroke.\n   */\n  readonly value = linkedSignal(() => this.#image()?.alt ?? '');\n\n  constructor() {\n    // Focus is a DOM write, after the render that put the field (and its\n    // bound value) on the page.\n    afterNextRender({\n      write: () => {\n        if (!this.autoSelect()) return;\n        this.#element.focus();\n        this.#element.select();\n      },\n    });\n  }\n\n  /** Writes the draft to the selected image's alt. False when no image is\n      selected. */\n  apply(): boolean {\n    const applied = !!this.editor()?.commands['setImageAlt']?.(this.value());\n    this.#done(applied);\n    return applied;\n  }\n\n  /** Leaves the alt as it was, and the field with it. */\n  cancel(): void {\n    this.value.set(this.#image()?.alt ?? '');\n    this.#done(false);\n  }\n\n  protected onKey(event: Event, apply: boolean): void {\n    if ((event as KeyboardEvent).isComposing) return;\n    event.preventDefault();\n    if (apply) this.apply();\n    else this.cancel();\n  }\n\n  #done(applied: boolean): void {\n    if (this.returnFocus()) this.editor()?.focus();\n    this.closed.emit(applied);\n  }\n}\n","/*\n * Public API Surface of @h-k-dev/angular-email-editor/image\n */\n\nexport * from './image-alt';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/fesm2022/h-k-dev-angular-email-editor-material.mjs

@@ -0,0 +1,124 @@
+import * as i0 from '@angular/core';
+import { inject, effect, DestroyRef, Directive } from '@angular/core';
+import { MatFormFieldControl } from '@angular/material/form-field';
+import { Subject } from 'rxjs';
+import { AddressInput } from '@h-k-dev/angular-email-editor/address-input';
+
+/**
+ * Makes an address input the control of an Angular Material form field —
+ * opt in per field, with the attribute:
+ *
+ * ```html
+ * <mat-form-field>
+ *   <mat-label>To</mat-label>
+ *   <div email-address-input emailMatFormField [formField]="envelope.to"></div>
+ *   <mat-hint>Separate addresses with a comma</mat-hint>
+ *   <mat-error>{{ envelope.to().errors()[0]?.message }}</mat-error>
+ * </mat-form-field>
+ * ```
+ *
+ * The directive is its own object, provided as the field's
+ * `MatFormFieldControl` — so the input's `value`, `disabled` and `required`
+ * stay the signal-forms contract they are, and nothing of Material reaches
+ * the input itself. What the field asks, it reads off the input:
+ *
+ * - **Label** — `for` the input's text field (`id`); it floats while the
+ *   field is focused or not `empty`: no chips *and* nothing typed.
+ * - **Errors** — `errorState` is invalid *and* touched: `mat-error` shows at
+ *   the moment the input starts flagging itself, never before.
+ * - **Hints and errors are read out** — their ids join the text field's
+ *   `aria-describedby`, beside any the host set itself.
+ * - **A click on the field** — anywhere in its box — puts the caret in.
+ *
+ * No `NgControl`: signal forms bind through `[formField]`, which the field
+ * does not need to know.
+ *
+ * The field's value is the input's — one header-form entry per recipient.
+ * A backend that keeps the header as one string gets it with
+ * `joinAddresses(list)` and hands it back through `splitAddresses(text)`
+ * (`@h-k-dev/angular-email-editor/address`); the pair round-trips entry for entry.
+ */
+class AddressFormField {
+    #input = inject(AddressInput);
+    /** Tells the field to look again — whenever anything it reads moves. */
+    stateChanges = new Subject();
+    controlType = 'email-address-input';
+    ngControl = null;
+    constructor() {
+        effect(() => {
+            // Everything the field reads, tracked: a change of any is news.
+            this.#input.value();
+            this.#input.text();
+            this.#input.focused();
+            this.#input.placeholder();
+            this.#input.required();
+            this.#input.disabled();
+            this.#input.invalid();
+            this.#input.touched();
+            this.stateChanges.next();
+        });
+        inject(DestroyRef).onDestroy(() => this.stateChanges.complete());
+    }
+    get value() {
+        return this.#input.value();
+    }
+    set value(value) {
+        this.#input.value.set(value ?? []);
+    }
+    get id() {
+        return this.#input.id;
+    }
+    get placeholder() {
+        return this.#input.placeholder();
+    }
+    get focused() {
+        return this.#input.focused();
+    }
+    get empty() {
+        return !this.#input.value().length && !this.#input.text();
+    }
+    get shouldLabelFloat() {
+        return this.focused || !this.empty;
+    }
+    get required() {
+        return this.#input.required();
+    }
+    get disabled() {
+        return this.#input.disabled();
+    }
+    get errorState() {
+        return this.#input.invalid() && this.#input.touched();
+    }
+    /** The host's own `aria-describedby`, which the field keeps in its list. */
+    get userAriaDescribedBy() {
+        return this.#input.ariaDescribedby() ?? undefined;
+    }
+    describedByIds = [];
+    setDescribedByIds(ids) {
+        this.describedByIds = ids;
+        this.#input.describe(ids);
+    }
+    onContainerClick() {
+        this.#input.focus();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AddressFormField, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.6", type: AddressFormField, isStandalone: true, selector: "[email-address-input][emailMatFormField]", providers: [{ provide: MatFormFieldControl, useExisting: AddressFormField }], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AddressFormField, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[email-address-input][emailMatFormField]',
+                    providers: [{ provide: MatFormFieldControl, useExisting: AddressFormField }],
+                }]
+        }], ctorParameters: () => [] });
+
+/*
+ * Public API Surface of @h-k-dev/angular-email-editor/material
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AddressFormField };
+//# sourceMappingURL=h-k-dev-angular-email-editor-material.mjs.map

package/fesm2022/h-k-dev-angular-email-editor-material.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"h-k-dev-angular-email-editor-material.mjs","sources":["../../../projects/angular-email-editor/material/address-form-field.ts","../../../projects/angular-email-editor/material/public-api.ts","../../../projects/angular-email-editor/material/h-k-dev-angular-email-editor-material.ts"],"sourcesContent":["import { DestroyRef, Directive, effect, inject } from '@angular/core';\nimport { MatFormFieldControl } from '@angular/material/form-field';\nimport { Subject } from 'rxjs';\nimport { AddressInput } from '@h-k-dev/angular-email-editor/address-input';\n\n/**\n * Makes an address input the control of an Angular Material form field —\n * opt in per field, with the attribute:\n *\n * ```html\n * <mat-form-field>\n *   <mat-label>To</mat-label>\n *   <div email-address-input emailMatFormField [formField]=\"envelope.to\"></div>\n *   <mat-hint>Separate addresses with a comma</mat-hint>\n *   <mat-error>{{ envelope.to().errors()[0]?.message }}</mat-error>\n * </mat-form-field>\n * ```\n *\n * The directive is its own object, provided as the field's\n * `MatFormFieldControl` — so the input's `value`, `disabled` and `required`\n * stay the signal-forms contract they are, and nothing of Material reaches\n * the input itself. What the field asks, it reads off the input:\n *\n * - **Label** — `for` the input's text field (`id`); it floats while the\n *   field is focused or not `empty`: no chips *and* nothing typed.\n * - **Errors** — `errorState` is invalid *and* touched: `mat-error` shows at\n *   the moment the input starts flagging itself, never before.\n * - **Hints and errors are read out** — their ids join the text field's\n *   `aria-describedby`, beside any the host set itself.\n * - **A click on the field** — anywhere in its box — puts the caret in.\n *\n * No `NgControl`: signal forms bind through `[formField]`, which the field\n * does not need to know.\n *\n * The field's value is the input's — one header-form entry per recipient.\n * A backend that keeps the header as one string gets it with\n * `joinAddresses(list)` and hands it back through `splitAddresses(text)`\n * (`@h-k-dev/angular-email-editor/address`); the pair round-trips entry for entry.\n */\n@Directive({\n  selector: '[email-address-input][emailMatFormField]',\n  providers: [{ provide: MatFormFieldControl, useExisting: AddressFormField }],\n})\nexport class AddressFormField implements MatFormFieldControl<string[]> {\n  readonly #input = inject(AddressInput);\n\n  /** Tells the field to look again — whenever anything it reads moves. */\n  readonly stateChanges = new Subject<void>();\n\n  readonly controlType = 'email-address-input';\n  readonly ngControl = null;\n\n  constructor() {\n    effect(() => {\n      // Everything the field reads, tracked: a change of any is news.\n      this.#input.value();\n      this.#input.text();\n      this.#input.focused();\n      this.#input.placeholder();\n      this.#input.required();\n      this.#input.disabled();\n      this.#input.invalid();\n      this.#input.touched();\n      this.stateChanges.next();\n    });\n    inject(DestroyRef).onDestroy(() => this.stateChanges.complete());\n  }\n\n  get value(): string[] {\n    return this.#input.value();\n  }\n\n  set value(value: string[] | null) {\n    this.#input.value.set(value ?? []);\n  }\n\n  get id(): string {\n    return this.#input.id;\n  }\n\n  get placeholder(): string {\n    return this.#input.placeholder();\n  }\n\n  get focused(): boolean {\n    return this.#input.focused();\n  }\n\n  get empty(): boolean {\n    return !this.#input.value().length && !this.#input.text();\n  }\n\n  get shouldLabelFloat(): boolean {\n    return this.focused || !this.empty;\n  }\n\n  get required(): boolean {\n    return this.#input.required();\n  }\n\n  get disabled(): boolean {\n    return this.#input.disabled();\n  }\n\n  get errorState(): boolean {\n    return this.#input.invalid() && this.#input.touched();\n  }\n\n  /** The host's own `aria-describedby`, which the field keeps in its list. */\n  get userAriaDescribedBy(): string | undefined {\n    return this.#input.ariaDescribedby() ?? undefined;\n  }\n\n  describedByIds: string[] = [];\n\n  setDescribedByIds(ids: string[]): void {\n    this.describedByIds = ids;\n    this.#input.describe(ids);\n  }\n\n  onContainerClick(): void {\n    this.#input.focus();\n  }\n}\n","/*\n * Public API Surface of @h-k-dev/angular-email-editor/material\n */\n\nexport * from './address-form-field';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;;AAKA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiCG;MAKU,gBAAgB,CAAA;AAClB,IAAA,MAAM,GAAG,MAAM,CAAC,YAAY,CAAC;;AAG7B,IAAA,YAAY,GAAG,IAAI,OAAO,EAAQ;IAElC,WAAW,GAAG,qBAAqB;IACnC,SAAS,GAAG,IAAI;AAEzB,IAAA,WAAA,GAAA;QACE,MAAM,CAAC,MAAK;;AAEV,YAAA,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE;AACnB,YAAA,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE;AAClB,YAAA,IAAI,CAAC,MAAM,CAAC,OAAO,EAAE;AACrB,YAAA,IAAI,CAAC,MAAM,CAAC,WAAW,EAAE;AACzB,YAAA,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE;AACtB,YAAA,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE;AACtB,YAAA,IAAI,CAAC,MAAM,CAAC,OAAO,EAAE;AACrB,YAAA,IAAI,CAAC,MAAM,CAAC,OAAO,EAAE;AACrB,YAAA,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE;AAC1B,QAAA,CAAC,CAAC;AACF,QAAA,MAAM,CAAC,UAAU,CAAC,CAAC,SAAS,CAAC,MAAM,IAAI,CAAC,YAAY,CAAC,QAAQ,EAAE,CAAC;IAClE;AAEA,IAAA,IAAI,KAAK,GAAA;AACP,QAAA,OAAO,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE;IAC5B;IAEA,IAAI,KAAK,CAAC,KAAsB,EAAA;QAC9B,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,GAAG,CAAC,KAAK,IAAI,EAAE,CAAC;IACpC;AAEA,IAAA,IAAI,EAAE,GAAA;AACJ,QAAA,OAAO,IAAI,CAAC,MAAM,CAAC,EAAE;IACvB;AAEA,IAAA,IAAI,WAAW,GAAA;AACb,QAAA,OAAO,IAAI,CAAC,MAAM,CAAC,WAAW,EAAE;IAClC;AAEA,IAAA,IAAI,OAAO,GAAA;AACT,QAAA,OAAO,IAAI,CAAC,MAAM,CAAC,OAAO,EAAE;IAC9B;AAEA,IAAA,IAAI,KAAK,GAAA;AACP,QAAA,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,MAAM,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE;IAC3D;AAEA,IAAA,IAAI,gBAAgB,GAAA;QAClB,OAAO,IAAI,CAAC,OAAO,IAAI,CAAC,IAAI,CAAC,KAAK;IACpC;AAEA,IAAA,IAAI,QAAQ,GAAA;AACV,QAAA,OAAO,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE;IAC/B;AAEA,IAAA,IAAI,QAAQ,GAAA;AACV,QAAA,OAAO,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE;IAC/B;AAEA,IAAA,IAAI,UAAU,GAAA;AACZ,QAAA,OAAO,IAAI,CAAC,MAAM,CAAC,OAAO,EAAE,IAAI,IAAI,CAAC,MAAM,CAAC,OAAO,EAAE;IACvD;;AAGA,IAAA,IAAI,mBAAmB,GAAA;QACrB,OAAO,IAAI,CAAC,MAAM,CAAC,eAAe,EAAE,IAAI,SAAS;IACnD;IAEA,cAAc,GAAa,EAAE;AAE7B,IAAA,iBAAiB,CAAC,GAAa,EAAA;AAC7B,QAAA,IAAI,CAAC,cAAc,GAAG,GAAG;AACzB,QAAA,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,GAAG,CAAC;IAC3B;IAEA,gBAAgB,GAAA;AACd,QAAA,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE;IACrB;uGA/EW,gBAAgB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;2FAAhB,gBAAgB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,0CAAA,EAAA,SAAA,EAFhB,CAAC,EAAE,OAAO,EAAE,mBAAmB,EAAE,WAAW,EAAE,gBAAgB,EAAE,CAAC,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA;;2FAEjE,gBAAgB,EAAA,UAAA,EAAA,CAAA;kBAJ5B,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,0CAA0C;oBACpD,SAAS,EAAE,CAAC,EAAE,OAAO,EAAE,mBAAmB,EAAE,WAAW,EAAA,gBAAkB,EAAE,CAAC;AAC7E,iBAAA;;;AC1CD;;AAEG;;ACFH;;AAEG;;;;"}

package/fesm2022/h-k-dev-angular-email-editor-metrics.mjs

@@ -0,0 +1,243 @@
+import { layout, prepare } from '@chenglou/pretext';
+import { measureRichInlineStats, prepareRichInline } from '@chenglou/pretext/rich-inline';
+import { Plugin, PluginKey } from 'prosemirror-state';
+import { defineExtension } from '@h-k-dev/angular-email-editor';
+
+/** Browser default h1-h6 sizes; the editor stylesheet doesn't restyle them. */
+const HEADING_SCALE = [2, 1.5, 1.17, 1, 0.83, 0.67];
+const cssPx = (style, property, fallback) => {
+    const value = parseFloat(style.getPropertyValue(property));
+    return Number.isFinite(value) ? value : fallback;
+};
+/**
+ * Reads the typography pretext needs from the editor's computed style. One
+ * DOM read at startup (and again once webfonts settle) — never per keystroke.
+ */
+function readTypography(dom) {
+    const style = getComputedStyle(dom);
+    const fontSize = parseFloat(style.fontSize) || 16;
+    // `line-height: normal` parses as NaN; browsers render it at roughly 1.2.
+    const lineHeight = parseFloat(style.lineHeight) || fontSize * 1.2;
+    const innerSpacing = cssPx(style, '--mat-sys-inner-spacing', 16);
+    return {
+        // Pretext refuses a font string the canvas would ignore: an editor with
+        // no family in its computed style (detached, unstyled) measures in the
+        // browser's sans-serif rather than not at all.
+        fontFamily: style.fontFamily.trim() || 'sans-serif',
+        fontSize,
+        fontWeight: parseInt(style.fontWeight, 10) || 400,
+        fontStyle: style.fontStyle || 'normal',
+        lineHeight,
+        blockGap: cssPx(style, '--prose-gap', fontSize),
+        headingScale: HEADING_SCALE,
+        indents: {
+            blockquote: innerSpacing + 3, // padding-inline-start + border
+            list: 1.5 * fontSize, // ul/ol padding-inline-start
+            listItemGap: 0.25 * fontSize, // li + li margin-block-start
+        },
+    };
+}
+const createBlockMeasureCache = () => new WeakMap();
+/**
+ * Measures the whole document at the given content width. Pure arithmetic
+ * over cached glyph widths — no DOM access.
+ */
+function measureDoc(doc, contentWidth, typography, cache) {
+    const metrics = { words: 0, characters: 0, lines: 0, estimatedHeight: 0 };
+    const width = Math.max(contentWidth, 1);
+    const visitChildren = (parent, availableWidth, gap) => {
+        let index = 0;
+        parent.forEach((child) => {
+            if (index++ > 0)
+                metrics.estimatedHeight += gap;
+            visit(child, availableWidth);
+        });
+    };
+    const visit = (node, availableWidth) => {
+        if (node.isTextblock) {
+            const measured = measureTextblock(node, availableWidth, typography, cache);
+            metrics.words += measured.words;
+            metrics.characters += measured.characters;
+            metrics.lines += measured.lastLines;
+            metrics.estimatedHeight += measured.lastLines * measured.lineHeight;
+            return;
+        }
+        switch (node.type.name) {
+            case 'blockquote':
+                visitChildren(node, availableWidth - typography.indents.blockquote, 0);
+                break;
+            case 'bulletList':
+            case 'orderedList':
+                visitChildren(node, availableWidth - typography.indents.list, typography.indents.listItemGap);
+                break;
+            default:
+                // List items and future wrappers: measure content at full width.
+                if (node.childCount)
+                    visitChildren(node, availableWidth, 0);
+                break;
+        }
+    };
+    visitChildren(doc, width, typography.blockGap);
+    metrics.estimatedHeight = Math.round(metrics.estimatedHeight);
+    return metrics;
+}
+function measureTextblock(node, width, typography, cache) {
+    const maxWidth = Math.max(width, 1);
+    let cached = cache.get(node);
+    if (!cached) {
+        cached = prepareBlock(node, typography);
+        cache.set(node, cached);
+    }
+    if (cached.lastWidth !== maxWidth) {
+        cached.lastLines = countLines(cached.block, maxWidth, cached.lineHeight);
+        cached.lastWidth = maxWidth;
+    }
+    return cached;
+}
+function countLines(block, maxWidth, lineHeight) {
+    if (block.kind === 'plain') {
+        // Browsers size an empty block to one line-height; pretext reports 0.
+        return Math.max(1, layout(block.prepared, maxWidth, lineHeight).lineCount);
+    }
+    return block.segments.reduce((lines, segment) => lines + Math.max(1, measureRichInlineStats(segment, maxWidth).lineCount), 0);
+}
+function blockFontFor(node, t) {
+    if (node.type.name === 'heading') {
+        const level = node.attrs['level'] ?? 1;
+        const size = t.fontSize * (t.headingScale[level - 1] ?? 1);
+        return {
+            size,
+            weight: 700,
+            style: t.fontStyle,
+            lineHeight: size * (t.lineHeight / t.fontSize),
+        };
+    }
+    return { size: t.fontSize, weight: t.fontWeight, style: t.fontStyle, lineHeight: t.lineHeight };
+}
+/** Canvas `font` shorthand, the format pretext's `prepare()` expects. */
+const fontShorthand = (style, weight, size, family) => `${style === 'normal' ? '' : `${style} `}${weight} ${size}px ${family}`;
+function prepareBlock(node, typography) {
+    const base = blockFontFor(node, typography);
+    const baseFont = fontShorthand(base.style, base.weight, base.size, typography.fontFamily);
+    // Inline runs split on hard breaks; each segment lays out as its own line(s).
+    const segments = [[]];
+    let words = 0;
+    let characters = 0;
+    let mixedFonts = false;
+    node.forEach((child) => {
+        if (child.type.name === 'hardBreak') {
+            segments.push([]);
+            return;
+        }
+        if (!child.isText || !child.text)
+            return;
+        const bold = child.marks.some((mark) => mark.type.name === 'bold');
+        const italic = child.marks.some((mark) => mark.type.name === 'italic');
+        const font = bold || italic
+            ? fontShorthand(italic ? 'italic' : base.style, bold ? 700 : base.weight, base.size, typography.fontFamily)
+            : baseFont;
+        if (font !== baseFont)
+            mixedFonts = true;
+        segments[segments.length - 1].push({ text: child.text, font });
+        words += child.text.split(/\s+/).filter(Boolean).length;
+        characters += child.text.length;
+    });
+    const block = mixedFonts
+        ? {
+            kind: 'rich',
+            segments: segments.map((runs) => prepareRichInline(runs, { whiteSpace: 'pre-wrap' })),
+        }
+        : {
+            // Single font: `prepare()` with pre-wrap mirrors the editor CSS
+            // exactly, and hard breaks fold into the text as `\n`.
+            kind: 'plain',
+            prepared: prepare(segments.map((runs) => runs.map((run) => run.text).join('')).join('\n'), baseFont, { whiteSpace: 'pre-wrap' }),
+        };
+    return { block, lineHeight: base.lineHeight, words, characters, lastWidth: -1, lastLines: 0 };
+}
+
+/**
+ * Live document metrics (words, lines, estimated height) computed with
+ * `@chenglou/pretext` — pure arithmetic over cached glyph widths, no DOM
+ * measurement on the keystroke path. Unchanged blocks are never re-measured:
+ * the cache keys on ProseMirror's immutable nodes.
+ *
+ * Metrics are an extra, never a dependency of the editor: a measurement
+ * that throws is reported through `onError` and skipped, and without a
+ * `ResizeObserver` the width read at mount stands.
+ */
+const createTextMetrics = (options) => defineExtension({
+    name: 'textMetrics',
+    plugins: () => [
+        new Plugin({
+            key: new PluginKey('textMetrics'),
+            view: (view) => createTextMetricsView(view, options),
+        }),
+    ],
+});
+function createTextMetricsView(view, { onMetrics, onError }) {
+    let typography = readTypography(view.dom);
+    let cache = createBlockMeasureCache();
+    // One startup read; afterwards the observer reports widths, so resizes
+    // and keystrokes alike never force a layout reflow.
+    let width = view.dom.clientWidth;
+    let destroyed = false;
+    const measure = (currentView = view) => {
+        let metrics;
+        try {
+            metrics = measureDoc(currentView.state.doc, width, typography, cache);
+        }
+        catch (error) {
+            onError?.(error);
+            return;
+        }
+        onMetrics(metrics);
+    };
+    const observer = typeof ResizeObserver === 'undefined'
+        ? null
+        : new ResizeObserver((entries) => {
+            const next = entries[entries.length - 1].contentRect.width;
+            if (next === width || next === 0)
+                return;
+            width = next;
+            // Prepared glyph widths survive a resize; only the line arithmetic reruns.
+            measure();
+        });
+    observer?.observe(view.dom);
+    // Canvas measurements taken before webfonts finish loading are off;
+    // re-prepare everything once the real fonts are in.
+    document.fonts?.ready.then(() => {
+        if (destroyed)
+            return;
+        typography = readTypography(view.dom);
+        cache = createBlockMeasureCache();
+        measure();
+    });
+    measure();
+    return {
+        update(currentView, prevState) {
+            if (prevState && prevState.doc.eq(currentView.state.doc))
+                return;
+            measure(currentView);
+        },
+        destroy() {
+            destroyed = true;
+            observer?.disconnect();
+        },
+    };
+}
+
+/*
+ * Public API Surface of @h-k-dev/angular-email-editor/metrics
+ *
+ * Its own entry because it is the only part of the library that needs
+ * `@chenglou/pretext` — an optional peer: a host without word counts never
+ * installs it.
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { createBlockMeasureCache, createTextMetrics, measureDoc, readTypography };
+//# sourceMappingURL=h-k-dev-angular-email-editor-metrics.mjs.map