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

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

@@ -0,0 +1,686 @@
+import * as i0 from '@angular/core';
+import { inject, TemplateRef, Directive, model, input, signal, computed, numberAttribute, booleanAttribute, output, contentChild, viewChild, ElementRef, viewChildren, Component } from '@angular/core';
+import { ADDRESS_RULES, isMailbox, isPending, addressKey, separatesAt, defaultAddressRules } from '@h-k-dev/angular-email-editor/address';
+import { AddressChipRemove, AddressChip } from '@h-k-dev/angular-email-editor/address-chip';
+import { NgTemplateOutlet } from '@angular/common';
+import { validate } from '@angular/forms/signals';
+
+/**
+ * The address input's label slot — opt in. By default the control owns no
+ * label: the template that holds the form draws the row and the label beside
+ * it, as it does for a plain `<input>`. A host that wants the label *inside*
+ * the control — at the start of the chips, the chips wrapping under it, the
+ * whole control one box (a Material form field around it, as iusta core
+ * writes its rows) — hands the control a template:
+ *
+ *     <div email-address-input [formField]="envelope.to">
+ *       <ng-template emailAddressLabel>To</ng-template>
+ *     </div>
+ *
+ * The control renders it first in its row, in a box of its own
+ * (`[data-slot=label]`), and names its text input by it — unless the host
+ * named the input itself (`aria-labelledby` / `aria-label`).
+ */
+class AddressInputLabel {
+    template = inject(TemplateRef);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AddressInputLabel, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.6", type: AddressInputLabel, isStandalone: true, selector: "ng-template[emailAddressLabel]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AddressInputLabel, decorators: [{
+            type: Directive,
+            args: [{ selector: 'ng-template[emailAddressLabel]' }]
+        }] });
+
+let nextId = 0;
+/**
+ * An address field the way Gmail's works: committed addresses as chips,
+ * free typing after them. Enter, comma, semicolon or a paste commits what
+ * was typed — a comma or semicolon inside a quoted name or angle brackets is
+ * just typed, and no key commits while an IME is composing; Backspace on the empty input takes the chip before the caret
+ * back for editing; `limit` caps the count (From takes one) and hides the
+ * input once reached.
+ *
+ * **Only an address becomes a chip while typing.** Enter, comma, semicolon,
+ * Tab and a paste commit the addresses in what was typed and leave the rest —
+ * what is not an address yet — in the input, flagged, for the user to
+ * finish. Leaving the field commits everything, so the form sees the typo
+ * and flags it; and focus coming back hands the malformed entries at the
+ * end of the list straight back to the input, as plain typing again.
+ *
+ * **The input is always at the end, and editing happens there.** A chip
+ * taken back for editing — a double click, Enter on a picked chip,
+ * Backspace, `edit()` — leaves its place: its address goes into the input,
+ * after the last chip, exactly like a typo the field handed back — and what
+ * is committed from it joins the end of the list. There is one place where
+ * text is typed, and it never moves.
+ *
+ * **One pending edit at a time.** There is only ever one thing being fixed,
+ * and it is what the caret is on. Starting another edit — `edit()`, Enter
+ * on a picked chip, Backspace taking the chip before the caret back — ends
+ * the one pending: a typo left in the input and any chip that is not an
+ * address go.
+ *
+ * **Chips while focused, a line of text otherwise.** With focus elsewhere
+ * the addresses read as a comma-separated line — no surface, no buttons;
+ * focus in the input turns them into chips.
+ *
+ * **The arrow keys rove the chips; the caret stays in the input.** With
+ * the caret at the start of the typing, ← puts a highlight on the last chip
+ * and walks back along the list; → walks forward, and past the last chip
+ * returns to the caret. Enter or F2 — or a double click on
+ * any chip — edits it,
+ * Backspace or Delete removes it, Escape drops the highlight, and so does
+ * typing. A click on a chip highlights it. Reaching a chip either way is
+ * being done with the typing: an address in the input becomes a chip first,
+ * as Enter would make it. The highlight is
+ * `aria-activedescendant` on the input and `aria-current` on the chip, and the
+ * chips' remove buttons stay out of the tab order — Tab lands on the input —
+ * except when the field is full and has no input to land on.
+ *
+ * A display name is kept — `Ada Lovelace <ada@example.com>` is one chip
+ * that shows "Ada Lovelace" — and the value stays `string[]` in header
+ * form, ready for a `To:` line. Typed bare, `Ada Lovelace ada@example.com`
+ * becomes that same chip. An address is in the list once: another entry
+ * with the same address — in any case, under any name — is dropped.
+ *
+ * **The control, not the row.** By default it owns no label and draws no row: the
+ * template that holds the form puts it in a row of its own making, beside a
+ * label of its own making, exactly as it does for a plain `<input>` — and
+ * names the control through `aria-labelledby` (the label's id) or
+ * `aria-label`, which land on the text input inside, the element assistive
+ * tech reaches. Clicking anywhere on the control puts the caret in; a row
+ * that wants its label to do the same calls `focus()`.
+ *
+ * **A signal-forms control, optionally.** It implements `FormValueControl`
+ * for `string[]`: bind a field with `[formField]="envelope.to"` and the
+ * directive drives `value` both ways, pushes `invalid`, `touched`,
+ * `disabled`, `readonly`, `required` and `name` in, and hears `touch` when
+ * focus leaves the input. Without a form, `[(value)]` alone is the whole
+ * contract; the state inputs are optional and the chips still flag a
+ * malformed address on their own. The rules that go with it — `addressList`
+ * — live beside it, because the built-in `required` and `email` know
+ * nothing of an array of mailboxes.
+ *
+ * **No messages of its own.** The control reflects the field's state —
+ * invalid *and* touched, so nothing shouts before the user has left it —
+ * and a malformed address is flagged on its chip; wording what is wrong is
+ * the job of the component that owns the form, which has the errors.
+ *
+ * **Parts are `data-slot`s** — `chips`, `entry`, `input` — plus the chips'
+ * own; that is how the control is styled from outside: theme it through
+ * the `--email-*` tokens, and reach a part for a structural override with
+ * two attributes.
+ *
+ * **The selection and its commands are public.** A host's own controls —
+ * a bar over the writer, the way a phone's action bar sits over the app
+ * bar — work the picked chip through `current()` and `select()` for the
+ * state and `edit()`, `remove()` and `copy()` for the commands, each on the
+ * current chip unless given another. Such a bar's buttons must decline
+ * their mousedown (`(mousedown)="$event.preventDefault()"`): focus stays in
+ * the input, and the selection with it — focus leaving the control clears
+ * the selection.
+ *
+ * **The chips' remove control is a template slot.** An
+ * `ng-template[emailAddressChipRemove]` in the input's content is handed to
+ * every chip it renders, in place of the default × button.
+ *
+ * **State on the host.** `aria-disabled` while disabled; `data-invalid`
+ * while invalid and touched; `data-full` once `limit` is reached;
+ * `data-focused` while focus is anywhere in the control. The text input
+ * carries `data-refused` while it holds text a commit left behind.
+ *
+ * No Material, no icon font, no headless library. It holds the list it
+ * shows and nothing else: contacts, lookups and sending are the host's.
+ */
+class AddressInput {
+    /** The committed addresses, in header form. Two-way; the form's value. */
+    value = model([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    placeholder = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    /** The id of the row's label, passed through to the text input — the
+        host's label, wherever the host put it. */
+    ariaLabelledby = input(null, { ...(ngDevMode ? { debugName: "ariaLabelledby" } : /* istanbul ignore next */ {}), alias: 'aria-labelledby' });
+    /** A name for the text input when there is no visible label. */
+    ariaLabel = input(null, { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: 'aria-label' });
+    /** The ids of whatever describes the field — a hint, an error line —
+        passed through to the text input, where assistive tech reads them. */
+    ariaDescribedby = input(null, { ...(ngDevMode ? { debugName: "ariaDescribedby" } : /* istanbul ignore next */ {}), alias: 'aria-describedby' });
+    #frameIds = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "#frameIds" }] : /* istanbul ignore next */ []));
+    /** What the text input's `aria-describedby` says: the host's own ids and a
+        frame's, each once. */
+    describedBy = computed(() => {
+        const ids = new Set([...(this.ariaDescribedby()?.split(/\s+/) ?? []), ...this.#frameIds()]);
+        ids.delete('');
+        return ids.size ? [...ids].join(' ') : null;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "describedBy" }] : /* istanbul ignore next */ []));
+    /** Adds the ids of a frame's own lines — a form field's hint and error —
+        to what describes the text input, beside the host's `aria-describedby`;
+        each call replaces the frame's previous ids. */
+    describe(ids) {
+        this.#frameIds.set(ids);
+    }
+    /** Most addresses the field takes; the input hides once reached. Named
+        `limit`, not `max`: the form contract keeps that name for the `max` rule. */
+    limit = input(Infinity, { ...(ngDevMode ? { debugName: "limit" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    /** Prefix for each chip's remove button — "Remove ada@example.com". */
+    removeLabel = input('Remove', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "removeLabel" }] : /* istanbul ignore next */ []));
+    /** What a malformed address is flagged as. */
+    invalidLabel = input('not an email address', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "invalidLabel" }] : /* istanbul ignore next */ []));
+    /** The chips' note on a placeholder a template fills in later. */
+    pendingLabel = input('filled in when sent', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pendingLabel" }] : /* istanbul ignore next */ []));
+    // ── the form contract: pushed in by the field directive ───────────────
+    /** The input's `name` attribute; the directive derives one from the path. */
+    name = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    readonly = input(false, { ...(ngDevMode ? { debugName: "readonly" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    required = input(false, { ...(ngDevMode ? { debugName: "required" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    invalid = input(false, { ...(ngDevMode ? { debugName: "invalid" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    touched = input(false, { ...(ngDevMode ? { debugName: "touched" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Focus left the input. The directive marks the field touched on it. */
+    touch = output();
+    /** The text input's id, for a host label's `for`. */
+    id = `email-address-input-${nextId++}`;
+    /** The host's label template, if it opted into one — rendered first in
+        the row; the text input is named by it. */
+    labelSlot = contentChild(AddressInputLabel, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "labelSlot" }] : /* istanbul ignore next */ []));
+    /** The label box's id, for the text input's `aria-labelledby`. */
+    labelId = `${this.id}-label`;
+    /** What names the text input: the host's own `aria-labelledby`; else the
+        label slot — unless the host gave an `aria-label` instead. */
+    labelledBy = computed(() => this.ariaLabelledby() ?? (this.labelSlot() && !this.ariaLabel() ? this.labelId : null), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "labelledBy" }] : /* istanbul ignore next */ []));
+    /** The host's remove template, passed on to every chip. */
+    removeSlot = contentChild(AddressChipRemove, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "removeSlot" }] : /* istanbul ignore next */ []));
+    field = viewChild.required('field', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "field" }] : /* istanbul ignore next */ []));
+    #host = inject(ElementRef);
+    /** The address rule in force — ours, or the host's (`provideAddressRules`):
+        how typing splits, what is an address, what is one recipient. */
+    #rules = inject(ADDRESS_RULES);
+    /** What becomes a chip: a well-formed mailbox, or a placeholder a
+        template fills in later. Everything else is a typo to hand back. */
+    #accepts = (raw) => isMailbox(raw, this.#rules) || isPending(raw, this.#rules);
+    #key = (raw) => addressKey(raw, this.#rules);
+    #focused = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "#focused" }] : /* istanbul ignore next */ []));
+    /** Focus is somewhere in the control — the input or a chip's remove
+        button. The chips are chips only then. Read-only; for a host's own
+        frame (a form field whose label floats on it). */
+    focused = this.#focused.asReadonly();
+    #text = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "#text" }] : /* istanbul ignore next */ []));
+    /** What is typed in the input and not committed yet — for a host's own
+        frame, where a field with typing in it is not empty. */
+    text = this.#text.asReadonly();
+    /** The input holds text a commit left behind: not an address yet. */
+    refused = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "refused" }] : /* istanbul ignore next */ []));
+    /** The chip the arrow keys or a click picked, by index in the value — the
+        one Enter, Backspace and Delete act on while the caret stays in the
+        input. */
+    active = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
+    /** The picked chip's address — the one the arrow keys or a click reached
+        and the commands act on — or null. Public, for a host's own controls. */
+    current = computed(() => {
+        const index = this.active();
+        return index === null ? null : (this.value()[index] ?? null);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "current" }] : /* istanbul ignore next */ []));
+    /** Picks a chip by address, or none. */
+    select(address) {
+        const index = address === null ? -1 : this.value().indexOf(address);
+        this.active.set(index < 0 ? null : index);
+    }
+    /** The chips as rendered, for the commands that are the chip's own. */
+    chips = viewChildren(AddressChip, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "chips" }] : /* istanbul ignore next */ []));
+    /** The active chip's id, for the input's `aria-activedescendant`. */
+    activeId = computed(() => {
+        const index = this.active();
+        return index !== null && index < this.value().length ? this.chipId(index) : null;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeId" }] : /* istanbul ignore next */ []));
+    chipId(index) {
+        return `${this.id}-chip-${index}`;
+    }
+    /** The cap is reached: a further address is refused. */
+    full = computed(() => this.value().length >= this.limit(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "full" }] : /* istanbul ignore next */ []));
+    /** The malformed addresses at the end of the list — what focus hands back
+        to the input. */
+    #trailingMalformed = computed(() => {
+        const value = this.value();
+        let start = value.length;
+        while (start > 0 && !this.#accepts(value[start - 1]))
+            start--;
+        return value.slice(start);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "#trailingMalformed" }] : /* istanbul ignore next */ []));
+    /** Full, and nothing in it to fix: the input hides — the chips say
+        everything. A full list ending in a typo keeps it, so focus can hand
+        the typo back. */
+    closed = computed(() => this.full() && !this.#trailingMalformed().length, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "closed" }] : /* istanbul ignore next */ []));
+    /** Nothing may change: disabled or read-only. Chips lose their remove
+        button, the input is out of play. */
+    locked = computed(() => this.disabled() || this.readonly(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "locked" }] : /* istanbul ignore next */ []));
+    /** Invalid *and* touched — the moment the state becomes the user's business. */
+    flagged = computed(() => this.invalid() && this.touched(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "flagged" }] : /* istanbul ignore next */ []));
+    /** Splits a run into addresses and adds the new ones to the end of the
+        list, up to `limit`. Duplicates — by address, case-insensitively —
+        are dropped; a malformed one is kept and
+        flagged — this is the host's way in, and the host decides what it
+        holds. */
+    commit(raw) {
+        this.#insert(this.#rules.split(raw));
+    }
+    /** Drops one address — the picked chip's by default. Identity by string:
+        the list never holds the same header form twice, so this takes exactly
+        the chip that asked. */
+    remove(address = this.current()) {
+        if (this.locked() || address === null)
+            return;
+        this.active.set(null);
+        const index = this.value().indexOf(address);
+        if (index < 0)
+            return;
+        this.value.update((current) => current.filter((a) => a !== address));
+    }
+    /** A chip's remove control was used: the address goes, and the caret
+        comes back to the input — the focused button went with its chip, and
+        focus left on nothing would strand a keyboard user and read to a host
+        as the field being left. */
+    removeChip(address) {
+        this.remove(address);
+        this.focus();
+    }
+    /** Takes a chip — the picked one by default — back for editing: it
+        leaves the list and the input, at the end, holds its address, caret at
+        the end. The edit pending until now ends first. A locked list edits
+        nothing. */
+    edit(address = this.current(), input = this.field().nativeElement) {
+        if (this.locked() || address === null)
+            return;
+        this.active.set(null);
+        this.#endPending(input, address);
+        if (!this.value().includes(address))
+            return;
+        this.remove(address);
+        this.#write(input, address);
+        input.focus();
+        input.setSelectionRange(input.value.length, input.value.length);
+    }
+    /** Ends the pending edit so another can start: the addresses typed so far
+        become chips, the rest of the typing goes, and so
+        does every chip that is not an address — but `keep`, the one about to
+        be edited. */
+    #endPending(input, keep) {
+        this.#insert(this.#rules.split(input.value).filter((token) => this.#accepts(token)));
+        this.#write(input, '');
+        this.refused.set(false);
+        const value = this.value();
+        const kept = value.filter((address) => this.#accepts(address) || address === keep);
+        if (kept.length !== value.length)
+            this.value.set(kept);
+    }
+    /** Puts the caret in the input — the whole control is the field, and a
+        host's label row may forward its own clicks here. A full field has no
+        input to put it in: focus goes to the last chip's remove control. */
+    focus() {
+        if (this.locked())
+            return;
+        if (!this.closed()) {
+            this.field().nativeElement.focus();
+            return;
+        }
+        const controls = this.#host.nativeElement.querySelectorAll('[data-slot=trailing] :is(button, [href], input, [tabindex]:not([tabindex="-1"]))');
+        controls[controls.length - 1]?.focus();
+    }
+    /** A press anywhere on the control is the input's from that moment: it
+        takes focus at the press, not at the click after the release — so a
+        chip pressed in a line of text turns the line to chips at once, and a
+        hold on a chip runs with the document focused, which the clipboard
+        insists on. `keepCaret` then declines the press's own default, which
+        would move focus off again. */
+    onPointerdown(event) {
+        const input = this.field().nativeElement;
+        if (event.target === input || this.locked() || this.closed())
+            return;
+        input.focus();
+    }
+    /** A press anywhere on the control but the text input itself — a chip,
+        its button, the gap between — leaves the caret where it is. The
+        browser would otherwise move focus to the body for the press and back
+        on the click, and in that instant the row would drop to text and
+        reflow: a flash, and a blur that commits and touches for nothing. */
+    keepCaret(event) {
+        if (event.target !== this.field().nativeElement)
+            event.preventDefault();
+    }
+    /** A click on a chip — not on its remove control — picks it, and only
+        that: a click on the picked chip picks it again. The caret is in the
+        input either way. */
+    onChipClick(event, index, input) {
+        if (event.target.closest('[data-slot=trailing]') || this.locked())
+            return;
+        this.#pick(index, input);
+        input.focus();
+    }
+    /** A double click on a chip — not on its remove control — takes it back
+        for editing. */
+    onChipDblclick(event, address, input) {
+        if (event.target.closest('[data-slot=trailing]'))
+            return;
+        this.edit(address, input);
+    }
+    /** Copies a chip's address — the picked one by default — to the
+        clipboard, as a hold on the chip does; the chip shows and says so.
+        Resolves to whether the copy went. */
+    async copy(address = this.current()) {
+        const chip = this.chips().find((candidate) => candidate.address() === address);
+        return chip ? chip.copy() : false;
+    }
+    /** Picking a chip is being done with the typing: the addresses in it
+        become chips first, as Enter would make them, and what is not an
+        address stays behind, flagged. */
+    #pick(index, input) {
+        const address = this.value()[index];
+        this.#settle(input, input.value);
+        this.active.set(address === undefined ? null : this.value().indexOf(address));
+    }
+    onFocusin() {
+        this.#focused.set(true);
+    }
+    onInput(input) {
+        this.#text.set(input.value);
+        this.refused.set(false);
+        this.active.set(null);
+    }
+    onKeydown(event, input) {
+        // An IME's own Enter picks its candidate; nothing here may act on it.
+        if (event.isComposing)
+            return;
+        const active = this.active();
+        if (active !== null && this.#onActiveKey(event, active, input))
+            return;
+        switch (event.key) {
+            case 'ArrowLeft': {
+                // From the start of the typing, ← reaches the last chip — the
+                // typing becoming chips first, when it holds an address.
+                if (input.selectionStart !== 0 || input.selectionEnd !== 0 || this.locked())
+                    return;
+                const typed = this.#rules.split(input.value).some((token) => this.#accepts(token));
+                if (typed)
+                    this.#settle(input, input.value);
+                const last = this.value().length - 1;
+                if (typed || last >= 0)
+                    event.preventDefault();
+                if (last >= 0)
+                    this.active.set(last);
+                return;
+            }
+            case ',':
+            case ';':
+                // Inside a quoted name or angle brackets the character is the
+                // mailbox's own: `"Lovelace, Ada"`.
+                if (!separatesAt(input.value, input.selectionStart ?? input.value.length))
+                    return;
+                event.preventDefault();
+                this.#settle(input, input.value);
+                return;
+            case 'Enter':
+                // Swallowed even with nothing typed: Enter in an address row must
+                // never submit the form around it. The subject line is where Enter
+                // sends.
+                event.preventDefault();
+                this.#settle(input, input.value);
+                return;
+            case 'Tab':
+                // Tab on an address commits it and keeps the caret here, ready for
+                // the next one — the list is not left until there is nothing more
+                // to commit. Tab on nothing, on a typo, or backwards leaves the
+                // field as ever, and leaving commits and flags what was typed.
+                if (event.shiftKey || !this.#rules.split(input.value).some((token) => this.#accepts(token))) {
+                    return;
+                }
+                event.preventDefault();
+                this.#settle(input, input.value);
+                return;
+            case 'Backspace': {
+                // On nothing typed, the last chip comes back to be edited — the one
+                // pending edit.
+                if (input.value)
+                    return;
+                const previous = this.value().at(-1);
+                if (previous === undefined || this.locked())
+                    return;
+                event.preventDefault();
+                this.edit(previous, input);
+                return;
+            }
+        }
+    }
+    /** The keys that act on the highlighted chip. True when one did. The
+        arrows walk the chips: ← stops at the first, → past the last returns
+        to the caret. */
+    #onActiveKey(event, active, input) {
+        const chips = this.value();
+        switch (event.key) {
+            case 'ArrowLeft':
+                this.active.set(Math.max(0, active - 1));
+                break;
+            case 'ArrowRight':
+                if (active + 1 < chips.length) {
+                    this.active.set(active + 1);
+                }
+                else {
+                    this.active.set(null);
+                    input.setSelectionRange(0, 0);
+                }
+                break;
+            case 'Escape':
+                this.active.set(null);
+                break;
+            case 'Enter':
+            case 'F2':
+                this.edit(chips[active], input);
+                break;
+            case 'Backspace':
+            case 'Delete':
+                if (this.locked())
+                    return false;
+                this.remove(chips[active]);
+                break;
+            default:
+                return false;
+        }
+        event.preventDefault();
+        return true;
+    }
+    /** A paste of several addresses: the addresses become chips, the rest
+        joins what the input already holds. A single token is left to the
+        input, so a name with spaces can still be edited before it commits. */
+    onPaste(event, input) {
+        const text = event.clipboardData?.getData('text') ?? '';
+        if (this.#rules.split(text).length < 2)
+            return;
+        event.preventDefault();
+        this.#settle(input, `${input.value}, ${text}`);
+    }
+    /** Focus arrived in the input: the typos at the end of the list come back
+        into it, to be fixed — unless the user is already typing there. They
+        come back as plain typing, not flagged: the caret is on them, and the
+        next commit judges them again. */
+    onFocus(input) {
+        const typos = this.#trailingMalformed();
+        if (input.value || !typos.length || this.locked())
+            return;
+        this.value.update((current) => current.slice(0, current.length - typos.length));
+        this.#write(input, typos.join(', '));
+        input.setSelectionRange(input.value.length, input.value.length);
+        this.refused.set(false);
+    }
+    /** Leaving the field commits everything typed — the addresses, then a
+        typo at the end of the list, so the form sees it and the next focus
+        hands it back — and is the touch. Moving to a chip's remove button is
+        not leaving. */
+    onBlur(event, input) {
+        if (this.#within(event))
+            return;
+        const tokens = this.#rules.split(input.value);
+        this.#insert(tokens.filter((token) => this.#accepts(token)));
+        this.#insert(tokens.filter((token) => !this.#accepts(token)));
+        this.#write(input, '');
+        this.refused.set(false);
+        this.touch.emit();
+    }
+    onFocusout(event) {
+        if (this.#within(event))
+            return;
+        this.#focused.set(false);
+        this.active.set(null);
+    }
+    /** Commits the addresses in a run and leaves the rest in the input. */
+    #settle(input, raw) {
+        const tokens = this.#rules.split(raw);
+        this.#insert(tokens.filter((token) => this.#accepts(token)));
+        this.#write(input, tokens.filter((token) => !this.#accepts(token)).join(', '));
+        this.refused.set(!!input.value);
+    }
+    /** Adds the new addresses to the end of the list, up to `limit` — each
+        only if its address is not in the list yet; the entry already there
+        keeps its name. */
+    #insert(incoming) {
+        if (!incoming.length)
+            return;
+        this.value.update((current) => {
+            const next = [...current];
+            const seen = new Set(next.map(this.#key));
+            for (const address of incoming) {
+                if (next.length >= this.limit())
+                    break;
+                if (seen.has(this.#key(address)))
+                    continue;
+                seen.add(this.#key(address));
+                next.push(address);
+            }
+            return next;
+        });
+    }
+    /** Puts text in the input — the one way it is written, so `text` follows. */
+    #write(input, text) {
+        input.value = text;
+        this.#text.set(text);
+    }
+    /** Whether focus is moving to somewhere else inside the control. */
+    #within(event) {
+        const destination = event.relatedTarget;
+        return !!destination && this.#host.nativeElement.contains(destination);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AddressInput, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: AddressInput, isStandalone: true, selector: "[email-address-input]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "aria-labelledby", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedby: { classPropertyName: "ariaDescribedby", publicName: "aria-describedby", isSignal: true, isRequired: false, transformFunction: null }, limit: { classPropertyName: "limit", publicName: "limit", isSignal: true, isRequired: false, transformFunction: null }, removeLabel: { classPropertyName: "removeLabel", publicName: "removeLabel", isSignal: true, isRequired: false, transformFunction: null }, invalidLabel: { classPropertyName: "invalidLabel", publicName: "invalidLabel", isSignal: true, isRequired: false, transformFunction: null }, pendingLabel: { classPropertyName: "pendingLabel", publicName: "pendingLabel", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touch: "touch" }, host: { listeners: { "pointerdown": "onPointerdown($event)", "mousedown": "keepCaret($event)", "click": "focus()", "focusin": "onFocusin()", "focusout": "onFocusout($event)" }, properties: { "attr.aria-disabled": "disabled() || null", "attr.data-invalid": "flagged() || null", "attr.data-full": "full() || null", "attr.data-focused": "focused() || null" } }, queries: [{ propertyName: "labelSlot", first: true, predicate: AddressInputLabel, descendants: true, isSignal: true }, { propertyName: "removeSlot", first: true, predicate: AddressChipRemove, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "field", first: true, predicate: ["field"], descendants: true, isSignal: true }, { propertyName: "chips", predicate: AddressChip, descendants: true, isSignal: true }], ngImport: i0, template: "<!-- No label here: the row around this control names it, through\n     aria-labelledby or aria-label, both passed down to the text input. -->\n<ul data-slot=\"chips\" role=\"list\">\n  <!-- The opt-in label (emailAddressLabel): first in the row, so the chips\n       wrap under it. Hidden from assistive tech as text \u2014 it names the\n       text input instead, through aria-labelledby. -->\n  @if (labelSlot(); as slot) {\n    <li data-slot=\"label\" aria-hidden=\"true\" [id]=\"labelId\">\n      <ng-container [ngTemplateOutlet]=\"slot.template\" />\n    </li>\n  }\n  @for (address of value(); track address) {\n    <li\n      email-address-chip\n      [id]=\"chipId($index)\"\n      [address]=\"address\"\n      [removable]=\"!locked()\"\n      [inline]=\"!focused()\"\n      [aria-current]=\"active() === $index\"\n      [removeTabbable]=\"closed()\"\n      [removeLabel]=\"removeLabel()\"\n      [removeTemplate]=\"removeSlot()?.template ?? null\"\n      [invalidLabel]=\"invalidLabel()\"\n      [pendingLabel]=\"pendingLabel()\"\n      [aria-disabled]=\"disabled()\"\n      (removed)=\"removeChip(address)\"\n      (click)=\"onChipClick($event, $index, field)\"\n      (dblclick)=\"onChipDblclick($event, address, field)\"\n    ></li>\n  }\n  <!-- The entry is a list item too, so the chips and the typing sit in one\n       wrapping row \u2014 always after the last chip. Hidden once the field is full (From takes one address)\n       with nothing to fix: the chips say everything, and a second address\n       would only be refused. -->\n  <li data-slot=\"entry\" [hidden]=\"closed()\">\n    <input\n      #field\n      data-slot=\"input\"\n      type=\"text\"\n      inputmode=\"email\"\n      autocomplete=\"off\"\n      autocapitalize=\"off\"\n      spellcheck=\"false\"\n      [id]=\"id\"\n      [attr.name]=\"name() || null\"\n      [disabled]=\"disabled()\"\n      [readOnly]=\"readonly()\"\n      [placeholder]=\"value().length ? '' : placeholder()\"\n      [attr.aria-labelledby]=\"labelledBy()\"\n      [attr.aria-label]=\"ariaLabel()\"\n      [attr.aria-describedby]=\"describedBy()\"\n      [attr.aria-required]=\"required() || null\"\n      [attr.aria-invalid]=\"flagged() || refused() || null\"\n      [attr.aria-activedescendant]=\"activeId()\"\n      [attr.data-refused]=\"refused() || null\"\n      (keydown)=\"onKeydown($event, field)\"\n      (paste)=\"onPaste($event, field)\"\n      (input)=\"onInput(field)\"\n      (mousedown)=\"active.set(null)\"\n      (focus)=\"onFocus(field)\"\n      (blur)=\"onBlur($event, field)\"\n    />\n  </li>\n</ul>\n", styles: [":host{display:flex;min-width:0;color:var(--email-address-input-color, var(--mat-sys-on-surface, light-dark(#1f1f1f, #e3e3e3)));font-family:var(--email-address-input-font-family, var(--mat-sys-body-medium-font, system-ui, sans-serif));font-size:var(--email-address-input-font-size, var(--mat-sys-body-medium-size, .875rem));font-weight:var(--email-address-input-font-weight, var(--mat-sys-body-medium-weight, 400));line-height:var(--email-address-input-line-height, var(--mat-sys-body-medium-line-height, 1.25rem));letter-spacing:var(--email-address-input-letter-spacing, var(--mat-sys-body-medium-tracking, .016rem));cursor:text}:host([aria-disabled=true]){cursor:default;opacity:.6}:host :where([data-slot=chips]){flex:1 1 0;display:flex;flex-wrap:wrap;align-items:center;gap:var(--email-address-input-row-gap, 8px) var(--email-address-input-column-gap, 4px);min-width:0;margin:0;padding:0;list-style:none}:host :where([data-slot=label]){flex:none;margin-inline-end:var(--email-address-input-label-gap, 4px);color:var(--email-address-input-label-color, var(--mat-sys-on-surface-variant, light-dark(#444746, #c4c7c5)));line-height:var(--email-address-input-label-line-height, 24px);white-space:nowrap}:host(:not([data-focused])) :where([data-slot=chips]){column-gap:var(--email-address-input-inline-gap, .3em)}:host(:not([data-focused])) :where([email-address-chip]:has(+[email-address-chip])):after{content:\",\"}:host :where([data-slot=entry]){flex:1 1 8ch;min-width:8ch;display:flex}:host :where([data-slot=entry][hidden]){display:none}:host(:not([data-focused])) :where([data-slot=entry]){flex-basis:0;min-width:0}:host :where([data-slot=input]){flex:1 1 auto;width:100%;min-width:0;height:var(--email-address-chip-height, 24px);margin:0;padding:0;box-sizing:border-box;border:none;outline:none;background:none;color:inherit;font:inherit;letter-spacing:inherit;line-height:var(--email-address-chip-height, 24px)}:host :where([data-slot=input][data-refused]){color:var(--email-address-chip-invalid-color, var(--mat-sys-error, light-dark(#b3261e, #f2b8b5)))}:host :where([data-slot=input])::placeholder{color:var(--email-address-input-placeholder-color, var(--mat-sys-on-surface-variant, light-dark(#5f6368, #9aa0a6)))}\n"], dependencies: [{ kind: "component", type: AddressChip, selector: "[email-address-chip]", inputs: ["address", "removable", "inline", "aria-current", "removeTabbable", "removeLabel", "invalidLabel", "pendingLabel", "aria-disabled", "holdDelay", "copiedLabel", "removeTemplate"], outputs: ["removed", "copied"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AddressInput, decorators: [{
+            type: Component,
+            args: [{ selector: '[email-address-input]', imports: [AddressChip, NgTemplateOutlet], host: {
+                        '[attr.aria-disabled]': 'disabled() || null',
+                        '[attr.data-invalid]': 'flagged() || null',
+                        '[attr.data-full]': 'full() || null',
+                        '[attr.data-focused]': 'focused() || null',
+                        '(pointerdown)': 'onPointerdown($event)',
+                        '(mousedown)': 'keepCaret($event)',
+                        '(click)': 'focus()',
+                        '(focusin)': 'onFocusin()',
+                        '(focusout)': 'onFocusout($event)',
+                    }, template: "<!-- No label here: the row around this control names it, through\n     aria-labelledby or aria-label, both passed down to the text input. -->\n<ul data-slot=\"chips\" role=\"list\">\n  <!-- The opt-in label (emailAddressLabel): first in the row, so the chips\n       wrap under it. Hidden from assistive tech as text \u2014 it names the\n       text input instead, through aria-labelledby. -->\n  @if (labelSlot(); as slot) {\n    <li data-slot=\"label\" aria-hidden=\"true\" [id]=\"labelId\">\n      <ng-container [ngTemplateOutlet]=\"slot.template\" />\n    </li>\n  }\n  @for (address of value(); track address) {\n    <li\n      email-address-chip\n      [id]=\"chipId($index)\"\n      [address]=\"address\"\n      [removable]=\"!locked()\"\n      [inline]=\"!focused()\"\n      [aria-current]=\"active() === $index\"\n      [removeTabbable]=\"closed()\"\n      [removeLabel]=\"removeLabel()\"\n      [removeTemplate]=\"removeSlot()?.template ?? null\"\n      [invalidLabel]=\"invalidLabel()\"\n      [pendingLabel]=\"pendingLabel()\"\n      [aria-disabled]=\"disabled()\"\n      (removed)=\"removeChip(address)\"\n      (click)=\"onChipClick($event, $index, field)\"\n      (dblclick)=\"onChipDblclick($event, address, field)\"\n    ></li>\n  }\n  <!-- The entry is a list item too, so the chips and the typing sit in one\n       wrapping row \u2014 always after the last chip. Hidden once the field is full (From takes one address)\n       with nothing to fix: the chips say everything, and a second address\n       would only be refused. -->\n  <li data-slot=\"entry\" [hidden]=\"closed()\">\n    <input\n      #field\n      data-slot=\"input\"\n      type=\"text\"\n      inputmode=\"email\"\n      autocomplete=\"off\"\n      autocapitalize=\"off\"\n      spellcheck=\"false\"\n      [id]=\"id\"\n      [attr.name]=\"name() || null\"\n      [disabled]=\"disabled()\"\n      [readOnly]=\"readonly()\"\n      [placeholder]=\"value().length ? '' : placeholder()\"\n      [attr.aria-labelledby]=\"labelledBy()\"\n      [attr.aria-label]=\"ariaLabel()\"\n      [attr.aria-describedby]=\"describedBy()\"\n      [attr.aria-required]=\"required() || null\"\n      [attr.aria-invalid]=\"flagged() || refused() || null\"\n      [attr.aria-activedescendant]=\"activeId()\"\n      [attr.data-refused]=\"refused() || null\"\n      (keydown)=\"onKeydown($event, field)\"\n      (paste)=\"onPaste($event, field)\"\n      (input)=\"onInput(field)\"\n      (mousedown)=\"active.set(null)\"\n      (focus)=\"onFocus(field)\"\n      (blur)=\"onBlur($event, field)\"\n    />\n  </li>\n</ul>\n", styles: [":host{display:flex;min-width:0;color:var(--email-address-input-color, var(--mat-sys-on-surface, light-dark(#1f1f1f, #e3e3e3)));font-family:var(--email-address-input-font-family, var(--mat-sys-body-medium-font, system-ui, sans-serif));font-size:var(--email-address-input-font-size, var(--mat-sys-body-medium-size, .875rem));font-weight:var(--email-address-input-font-weight, var(--mat-sys-body-medium-weight, 400));line-height:var(--email-address-input-line-height, var(--mat-sys-body-medium-line-height, 1.25rem));letter-spacing:var(--email-address-input-letter-spacing, var(--mat-sys-body-medium-tracking, .016rem));cursor:text}:host([aria-disabled=true]){cursor:default;opacity:.6}:host :where([data-slot=chips]){flex:1 1 0;display:flex;flex-wrap:wrap;align-items:center;gap:var(--email-address-input-row-gap, 8px) var(--email-address-input-column-gap, 4px);min-width:0;margin:0;padding:0;list-style:none}:host :where([data-slot=label]){flex:none;margin-inline-end:var(--email-address-input-label-gap, 4px);color:var(--email-address-input-label-color, var(--mat-sys-on-surface-variant, light-dark(#444746, #c4c7c5)));line-height:var(--email-address-input-label-line-height, 24px);white-space:nowrap}:host(:not([data-focused])) :where([data-slot=chips]){column-gap:var(--email-address-input-inline-gap, .3em)}:host(:not([data-focused])) :where([email-address-chip]:has(+[email-address-chip])):after{content:\",\"}:host :where([data-slot=entry]){flex:1 1 8ch;min-width:8ch;display:flex}:host :where([data-slot=entry][hidden]){display:none}:host(:not([data-focused])) :where([data-slot=entry]){flex-basis:0;min-width:0}:host :where([data-slot=input]){flex:1 1 auto;width:100%;min-width:0;height:var(--email-address-chip-height, 24px);margin:0;padding:0;box-sizing:border-box;border:none;outline:none;background:none;color:inherit;font:inherit;letter-spacing:inherit;line-height:var(--email-address-chip-height, 24px)}:host :where([data-slot=input][data-refused]){color:var(--email-address-chip-invalid-color, var(--mat-sys-error, light-dark(#b3261e, #f2b8b5)))}:host :where([data-slot=input])::placeholder{color:var(--email-address-input-placeholder-color, var(--mat-sys-on-surface-variant, light-dark(#5f6368, #9aa0a6)))}\n"] }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], ariaLabelledby: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-labelledby", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], ariaDescribedby: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-describedby", required: false }] }], limit: [{ type: i0.Input, args: [{ isSignal: true, alias: "limit", required: false }] }], removeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "removeLabel", required: false }] }], invalidLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalidLabel", required: false }] }], pendingLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "pendingLabel", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }], touch: [{ type: i0.Output, args: ["touch"] }], labelSlot: [{ type: i0.ContentChild, args: [i0.forwardRef(() => AddressInputLabel), { isSignal: true }] }], removeSlot: [{ type: i0.ContentChild, args: [i0.forwardRef(() => AddressChipRemove), { isSignal: true }] }], field: [{ type: i0.ViewChild, args: ['field', { isSignal: true }] }], chips: [{ type: i0.ViewChildren, args: [i0.forwardRef(() => AddressChip), { isSignal: true }] }] } });
+
+/** The error kinds `addressList` reports, for a host that switches on them. */
+const ADDRESS_LIST_EMPTY = 'addressList.empty';
+const ADDRESS_LIST_INVALID = 'addressList.invalid';
+const ADDRESS_LIST_TOO_MANY = 'addressList.tooMany';
+const MESSAGES = {
+    empty: (min) => (min === 1 ? 'Add at least one address' : `Add at least ${min} addresses`),
+    invalid: (offenders) => {
+        const [first, ...rest] = offenders;
+        if (!rest.length)
+            return `“${first}” is not an email address`;
+        return `“${first}” and ${rest.length} other${rest.length === 1 ? '' : 's'} are not email addresses`;
+    },
+    tooMany: (max) => (max === 1 ? 'Only one address here' : `At most ${max} addresses`),
+};
+/**
+ * The rule an address field needs and the built-ins cannot give it:
+ * `required` takes an empty array for a value, and `email` validates one
+ * string. This validates a `string[]` of mailboxes in header form — the
+ * address input's value — as a list: at least `min` of them (one, unless
+ * told otherwise), at most `max`, and every one a well-formed address, with
+ * the offenders named in the message so a chip can be found and fixed. A
+ * placeholder a template fills in later (`{{contact.email}}`, by the rule's
+ * `isPlaceholder`) is no offender — it counts toward `min` and `max`;
+ * whether it may still be sent unresolved is the host's call.
+ *
+ * ```ts
+ * const envelope = form(model, (p) => {
+ *   addressList(p.from, { max: 1 });
+ *   addressList(p.to);
+ *   addressList(p.cc, { min: 0 });
+ * });
+ * ```
+ *
+ * Errors carry a `kind` from the `ADDRESS_LIST_*` constants and a `message`
+ * the input shows; pass `messages` to word or translate them.
+ */
+function addressList(path, options = {}) {
+    const { min = 1, max = Infinity } = options;
+    const messages = { ...MESSAGES, ...options.messages };
+    const rules = options.rules ?? rulesInForce();
+    validate(path, ({ value }) => {
+        const addresses = value();
+        const errors = [];
+        if (addresses.length < min) {
+            errors.push({ kind: ADDRESS_LIST_EMPTY, message: messages.empty(min) });
+        }
+        const offenders = addresses.filter((address) => !isMailbox(address, rules) && !isPending(address, rules));
+        if (offenders.length) {
+            errors.push({ kind: ADDRESS_LIST_INVALID, message: messages.invalid(offenders) });
+        }
+        if (addresses.length > max) {
+            errors.push({ kind: ADDRESS_LIST_TOO_MANY, message: messages.tooMany(max) });
+        }
+        return errors.length ? errors : null;
+    });
+}
+/** The rule provided where the schema runs — the form's injection context,
+    when it was made in one — or ours. */
+function rulesInForce() {
+    try {
+        return inject(ADDRESS_RULES);
+    }
+    catch {
+        return defaultAddressRules;
+    }
+}
+
+/*
+ * Public API Surface of @h-k-dev/angular-email-editor/address-input
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ADDRESS_LIST_EMPTY, ADDRESS_LIST_INVALID, ADDRESS_LIST_TOO_MANY, AddressInput, AddressInputLabel, addressList };
+//# sourceMappingURL=h-k-dev-angular-email-editor-address-input.mjs.map