@h-k-dev/angular-email-editor 0.0.1 → 0.0.2

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

@@ -1,10 +1,38 @@
 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 { Directive, inject, TemplateRef, model, input, signal, computed, numberAttribute, booleanAttribute, output, contentChild, viewChild, ElementRef, Injector, viewChildren, afterNextRender, 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 { AddressChipRemove, AddressChip, ADDRESS_DRAG_TYPE } from '@h-k-dev/angular-email-editor/address-chip';
 import { NgTemplateOutlet } from '@angular/common';
 import { validate } from '@angular/forms/signals';
 
+/**
+ * Scopes chip drag and drop to the address inputs inside it: they trade
+ * chips with each other and refuse anyone else's — a writer's From, To, Cc
+ * and Bcc, and not the rows of another writer on the same page. Put it on
+ * whatever holds the rows:
+ *
+ *     <form emailAddressDragGroup [formRoot]="envelope">
+ *       <div email-address-input [formField]="envelope.from" limit="1"></div>
+ *       <div email-address-input [formField]="envelope.to"></div>
+ *       …
+ *     </form>
+ *
+ * The nearest group around an input is its group. Inputs in no group make
+ * up one group of their own, so a page with a single writer needs none.
+ * Behaviour only: it renders nothing and sets no attribute.
+ *
+ * A chip lands in an address input or nowhere — it carries no plain text,
+ * so a subject line, an editor or any other field leaves it alone.
+ */
+class AddressDragGroup {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AddressDragGroup, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.6", type: AddressDragGroup, isStandalone: true, selector: "[emailAddressDragGroup]", exportAs: ["emailAddressDragGroup"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AddressDragGroup, decorators: [{
+            type: Directive,
+            args: [{ selector: '[emailAddressDragGroup]', exportAs: 'emailAddressDragGroup' }]
+        }] });
+
 /**
  * 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
@@ -32,6 +60,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
         }] });
 
 let nextId = 0;
+/** The chip drag in flight from an address input on this page: where it
+    came from, and whether an address input took it as a move. The drag
+    data can't be read until the drop, and `dropEffect` at the drag's end is
+    not to be trusted (WebKit reports `all`): this is how a target refuses
+    a duplicate before the drop and how the source learns to let go. */
+let drag = null;
+/** The entry a chip on this page last put on the clipboard — by a hold, by
+    Ctrl+C or by Ctrl+X. A hold writes plain text only (the async clipboard
+    takes no type of ours), so a paste of exactly this text is known to be a
+    chip's, and comes back as one. */
+let clipboardEntry = null;
 /**
  * An address field the way Gmail's works: committed addresses as chips,
  * free typing after them. Enter, comma, semicolon or a paste commits what
@@ -68,7 +107,9 @@ let nextId = 0;
  * 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,
+ * any chip — edits it, Alt+← and Alt+→ move it a place along the list,
+ * Ctrl+C (Cmd+C) copies it, as a hold does, and Ctrl+X cuts it — unless
+ * text is selected in the input, which copies as ever —
  * 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,
@@ -120,6 +161,32 @@ let nextId = 0;
  * the input, and the selection with it — focus leaving the control clears
  * the selection.
  *
+ * **Chips move between inputs by drag and drop.** A chip of an editable
+ * input can be dragged to another — To into Cc, as Gmail and Outlook do —
+ * and leaves its own list when the other takes it. The other commits it
+ * as it was, flagged or pending alike. A chip whose address the other
+ * already holds is absorbed, as Gmail does: it leaves its list and the
+ * other keeps its own entry. A full list (From holds one) refuses the
+ * drop, and the chip stays. Dropped in its own list, a chip is reordered:
+ * it moves to the line; the line is not drawn where the chip already is. Alt (Option), or Ctrl, makes
+ * it a copy — onto a duplicate, a copy is nothing, so refused. Nothing
+ * moves while a drag is over a target: a thin line between its chips
+ * (`drop-marker`) shows where the chip will land, before or after the chip
+ * under the pointer, and the drop puts it there; the host carries
+ * `data-dropping` meanwhile. Only chips are places: a draft — typed in the
+ * input, or left at the end of the list when the row lost focus — is not,
+ * and a drop lands before it.
+ * A drop counts as working both fields: each is touched.
+ * A chip lands in an address input or nowhere: it carries no plain text,
+ * so a subject line or an editor can't take it. `emailAddressDragGroup` on
+ * the element around a writer's rows keeps its chips among them. Plain text
+ * dropped from elsewhere is a paste — the addresses become chips, the rest
+ * is left typed.
+ * `moveTo()` is the same move for the keyboard — a host's "Move to Cc" —
+ * and the moved chip says so (`movedLabel`). A touch is never a drag: on
+ * a phone the press is the chip's hold-to-copy. `allowDrag` turns it off;
+ * a disabled or read-only input is neither source nor target.
+ *
  * **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.
@@ -174,6 +241,14 @@ class AddressInput {
     /** 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 */ []));
+    /** What a chip moved into this input says, before its address — a host
+        with labelled rows says where: "Moved to Cc:". */
+    movedLabel = input('Moved', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "movedLabel" }] : /* istanbul ignore next */ []));
+    /** Chips may be dragged out of this input and dropped into it. Set false
+        for a row that only shows; a disabled or read-only input never takes
+        part either way. */
+    allowDrag = input(true, { ...(ngDevMode ? { debugName: "allowDrag" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     // ── 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 */
@@ -202,7 +277,11 @@ class AddressInput {
     ...(ngDevMode ? [{ debugName: "removeSlot" }] : /* istanbul ignore next */ []));
     field = viewChild.required('field', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "field" }] : /* istanbul ignore next */ []));
+    /** The list of chips, where a press on a draggable chip parks focus. */
+    chipList = viewChild.required('chipList', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "chipList" }] : /* istanbul ignore next */ []));
     #host = inject(ElementRef);
+    #injector = inject(Injector);
     /** 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);
@@ -210,6 +289,15 @@ class AddressInput {
         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);
+    /** The list has this address already — in any case, under any name. */
+    #holds = (raw) => this.#keys().has(this.#key(raw));
+    /** The list's addresses by key, parsed once a change — not on every
+        `dragover`. */
+    #keys = computed(() => new Set(this.value().map(this.#key)), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "#keys" }] : /* istanbul ignore next */ []));
+    /** The chips this input trades with: those of the nearest
+        `emailAddressDragGroup`, or of every input in none. */
+    #group = inject(AddressDragGroup, { optional: true });
     #focused = signal(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "#focused" }] : /* istanbul ignore next */ []));
     /** Focus is somewhere in the control — the input or a chip's remove
@@ -266,6 +354,12 @@ class AddressInput {
         return value.slice(start);
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "#trailingMalformed" }] : /* istanbul ignore next */ []));
+    /** Where the draft starts in the list: the trailing malformed entries are
+        the typing the row was left with — what focus hands back to the input
+        — and no chip is placed among or after them. A drop, or `moveTo()`,
+        lands before. */
+    #draftStart = computed(() => this.value().length - this.#trailingMalformed().length, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "#draftStart" }] : /* 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. */
@@ -275,6 +369,24 @@ class AddressInput {
         button, the input is out of play. */
     locked = computed(() => this.disabled() || this.readonly(), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "locked" }] : /* istanbul ignore next */ []));
+    /** Chips can be dragged out of the list, and dropped into it. */
+    canDrag = computed(() => this.allowDrag() && !this.locked(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "canDrag" }] : /* istanbul ignore next */ []));
+    /** Where a drag over the input would land: the index in the list, and
+        the line drawn there — in the chip list's own coordinates. Null while
+        no drag the input would take is over it. Drawn on top, out of the
+        flow, so nothing moves under the pointer. */
+    dropMarker = signal(null, { ...(ngDevMode ? { debugName: "dropMarker" } : /* istanbul ignore next */ {}), 
+        // A drag sends `dragover` every few dozen milliseconds, moving or not:
+        // the same place again is no change, and renders nothing.
+        equal: (a, b) => a === b ||
+            (!!a && !!b && a.index === b.index && a.x === b.x && a.y === b.y && a.height === b.height) });
+    /** A drag the input would take is over it. */
+    dropping = computed(() => this.dropMarker() !== null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dropping" }] : /* istanbul ignore next */ []));
+    /** The press under way is a mouse's (or a pen's) on a draggable chip:
+        its default has to stay, or the browser never starts the drag. */
+    #dragPress = false;
     /** 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 */ []));
@@ -356,7 +468,13 @@ class AddressInput {
         would move focus off again. */
     onPointerdown(event) {
         const input = this.field().nativeElement;
-        if (event.target === input || this.locked() || this.closed())
+        const target = event.target;
+        this.#dragPress =
+            event.pointerType !== 'touch' &&
+                this.canDrag() &&
+                !!target.closest?.('[email-address-chip]') &&
+                !target.closest('[data-slot=trailing]');
+        if (target === input || this.locked() || this.closed())
             return;
         input.focus();
     }
@@ -364,10 +482,16 @@ class AddressInput {
         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. */
+        reflow: a flash, and a blur that commits and touches for nothing.
+        Except a mouse's press on a draggable chip: no engine starts a drag
+        from a press whose default was declined, so it keeps it, and the
+        press's focus lands on the chip list instead (`tabindex="-1"`) —
+        still inside the control, so nothing commits; the click or the drag's
+        end brings the caret back. */
     keepCaret(event) {
-        if (event.target !== this.field().nativeElement)
-            event.preventDefault();
+        if (event.target === this.field().nativeElement || this.#dragPress)
+            return;
+        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
@@ -392,6 +516,219 @@ class AddressInput {
         const chip = this.chips().find((candidate) => candidate.address() === address);
         return chip ? chip.copy() : false;
     }
+    /** Moves a chip — the picked one by default — to another address input:
+        the keyboard's way to do what a drag does, for a host's own "Move to
+        Cc". The target takes it as it is, to the end of its list — before
+        a draft the row was left with — and it
+        leaves this one; both are touched, and the moved chip says so
+        (`movedLabel`). One the target already holds is absorbed: it leaves
+        here, and the target keeps its own entry. A full target, or either
+        input locked, moves nothing. Returns whether it moved. */
+    moveTo(target, address = this.current()) {
+        if (address === null || target === this || this.locked() || target.locked())
+            return false;
+        if (!this.value().includes(address))
+            return false;
+        if (!target.#holds(address) && !target.#insert([address], target.#draftStart()).length) {
+            return false;
+        }
+        this.remove(address);
+        this.touch.emit();
+        target.touch.emit();
+        target.#announceMoved(address);
+        return true;
+    }
+    /** The chip that arrived by a move — or the entry that absorbed it —
+        says so, once it is drawn. */
+    #announceMoved(address) {
+        const key = this.#key(address);
+        afterNextRender(() => this.chips()
+            .find((chip) => this.#key(chip.address()) === key)
+            ?.announce(`${this.movedLabel()} ${address}`), { injector: this.#injector });
+    }
+    // ── drag and drop ─────────────────────────────────────────────────────
+    /** A chip of this list started a drag: remember it, so a target on the
+        page can judge the drop before it happens and tell this list to let
+        go after. */
+    onChipDragstart(address) {
+        drag = this.canDrag() ? { source: this, group: this.#group, address, moved: false } : null;
+    }
+    /** The drag ended: if an address input took the chip as a move, it
+        leaves — through `remove()`, as the × takes it — and the field is
+        touched. The press parked focus on the list; the caret comes back. */
+    onChipDragend() {
+        const ended = drag;
+        drag = null;
+        if (ended?.source === this && ended.moved) {
+            this.remove(ended.address);
+            this.touch.emit();
+        }
+        if (document.activeElement === this.chipList().nativeElement)
+            this.focus();
+    }
+    /** What a drop here would be: `move` or `copy` for a drag the input
+        takes, `none` for one it refuses — said, so the text input inside
+        can't take the text in its place — and null for a drag that isn't an
+        address (files: the page's drop zone's), left to the page. A chip is
+        taken only from another input of the same group, while this page's
+        drag is in flight — a chip from anywhere else is refused. */
+    #dropEffect(event) {
+        const types = event.dataTransfer?.types ?? [];
+        const chip = types.includes(ADDRESS_DRAG_TYPE);
+        if (!chip && !types.includes('text/plain'))
+            return null;
+        if (!this.canDrag())
+            return chip ? 'none' : null;
+        if (!chip)
+            return this.full() ? 'none' : 'copy';
+        const from = drag;
+        if (!from || from.group !== this.#group)
+            return 'none';
+        const copy = event.altKey || event.ctrlKey;
+        // Its own list: a move is a reorder; a copy would add nothing.
+        if (from.source === this)
+            return copy ? 'none' : 'move';
+        // Held already: a move is absorbed, even into a full list; a copy is
+        // nothing.
+        if (this.#holds(from.address))
+            return copy ? 'none' : 'move';
+        if (this.full())
+            return 'none';
+        return copy ? 'copy' : 'move';
+    }
+    onDragover(event) {
+        const effect = this.#dropEffect(event);
+        if (effect === null)
+            return;
+        event.preventDefault();
+        event.dataTransfer.dropEffect = effect;
+        const marker = effect === 'none' ? null : this.#dropAt(event);
+        this.dropMarker.set(marker && this.#inPlace(marker.index) ? null : marker);
+    }
+    /** A drop at this index would leave the dragged chip where it is: right
+        before or right after itself, in its own list. No line there. */
+    #inPlace(index) {
+        if (drag?.source !== this)
+            return false;
+        const at = this.value().indexOf(drag.address);
+        return index === at || index === at + 1;
+    }
+    /** Moves a chip of the list to stand before the entry at `at` (the end,
+        past the last). True when it moved — not when it would stay put. */
+    #reorder(address, at) {
+        const from = this.value().indexOf(address);
+        if (from < 0 || at < 0 || at > this.value().length || at === from || at === from + 1) {
+            return false;
+        }
+        const to = at > from ? at - 1 : at;
+        this.value.update((current) => {
+            const next = current.filter((held) => held !== address);
+            next.splice(to, 0, address);
+            return next;
+        });
+        return true;
+    }
+    /** Where a drop at the pointer lands, in reading order: before the first
+        entry that starts after the pointer — on a later line, or on its line
+        past the pointer's side of the entry's middle — else at the end. And
+        the line that says so: midway between two entries on one line, or
+        just outside the entry at a line's start or end. */
+    #dropAt(event) {
+        const list = this.chipList().nativeElement;
+        const box = list.getBoundingClientRect();
+        const rtl = getComputedStyle(list).direction === 'rtl';
+        const x = event.clientX ?? 0;
+        const y = event.clientY ?? 0;
+        const chips = [...list.querySelectorAll(':scope > [email-address-chip]')];
+        // Only the chips before the draft are places; the draft is not.
+        const rects = chips.slice(0, this.#draftStart()).map((chip) => chip.getBoundingClientRect());
+        let index = rects.findIndex((r) => y < r.top || (y <= r.bottom && (rtl ? x > r.left + r.width / 2 : x < r.left + r.width / 2)));
+        if (index < 0)
+            index = rects.length;
+        const start = (r) => (rtl ? r.right : r.left);
+        const end = (r) => (rtl ? r.left : r.right);
+        // At a line's start or end the line stands a gap off the entry, as Gmail's does.
+        const out = rtl ? 4 : -4;
+        const at = rects[index];
+        const before = rects[index - 1];
+        let line;
+        if (at && before && Math.abs(before.top - at.top) < 1) {
+            line = { x: (end(before) + start(at)) / 2, top: at.top, height: at.height };
+        }
+        else if (at) {
+            line = { x: start(at) + out, top: at.top, height: at.height };
+        }
+        else if (before) {
+            line = { x: end(before) - out, top: before.top, height: before.height };
+        }
+        else {
+            // No chip yet: at the start — of the draft, if the row was left with one.
+            const first = (chips[0] ?? list.querySelector('[data-slot=entry]')).getBoundingClientRect();
+            line = { x: start(first) + (chips[0] ? out : 0), top: first.top, height: first.height };
+        }
+        return { index, x: line.x - box.left, y: line.top - box.top, height: line.height };
+    }
+    /** Leaving for somewhere outside the control: the drag is no longer over
+        it. (A leave with nowhere named — some engines — ends it too; the
+        next `dragover` inside brings it back.) */
+    onDragleave(event) {
+        const to = event.relatedTarget;
+        if (!to || !this.#host.nativeElement.contains(to))
+            this.dropMarker.set(null);
+    }
+    /** The drop: a chip is committed as it was; plain text from elsewhere is
+        a paste — its addresses become chips, the rest joins the typing. What
+        was typed stays. A chip the list holds already is absorbed by a move:
+        nothing is added, and the source lets it go. Nothing added otherwise
+        (the limit) is no drop: the source keeps its chip. */
+    onDrop(event) {
+        const effect = this.#dropEffect(event);
+        this.dropMarker.set(null);
+        if (effect === null)
+            return;
+        event.preventDefault();
+        const transfer = event.dataTransfer;
+        if (effect === 'none') {
+            transfer.dropEffect = 'none';
+            return;
+        }
+        const entry = transfer.getData(ADDRESS_DRAG_TYPE);
+        const { index } = this.#dropAt(event);
+        let changed;
+        if (entry && drag?.source === this) {
+            // Its own chip: a reorder. The source is this list; nothing leaves.
+            changed = this.#reorder(entry, index);
+            if (changed)
+                this.active.set(null);
+        }
+        else if (entry) {
+            const absorbed = effect === 'move' && this.#holds(entry);
+            changed = absorbed || this.#insert([entry], index).length > 0;
+            if (changed && drag?.address === entry) {
+                drag.moved = effect === 'move';
+                if (drag.moved)
+                    this.#announceMoved(entry);
+            }
+        }
+        else {
+            const tokens = this.#rules.split(transfer.getData('text/plain'));
+            changed =
+                this.#insert(tokens.filter((token) => this.#accepts(token)), index).length > 0;
+            const rest = tokens.filter((token) => !this.#accepts(token));
+            if (rest.length) {
+                const input = this.field().nativeElement;
+                this.#write(input, [input.value, ...rest].filter(Boolean).join(', '));
+                this.refused.set(true);
+                input.focus();
+                changed = true;
+            }
+        }
+        if (!changed) {
+            transfer.dropEffect = 'none';
+            return;
+        }
+        this.touch.emit();
+    }
     /** 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. */
@@ -477,6 +814,20 @@ class AddressInput {
         to the caret. */
     #onActiveKey(event, active, input) {
         const chips = this.value();
+        if (event.altKey && (event.key === 'ArrowLeft' || event.key === 'ArrowRight')) {
+            // Alt+← / Alt+→ move the chip a place — the drag's reorder, by key.
+            // At either end there is nowhere to go, and the key is still the
+            // chip's: it never walks the highlight instead.
+            if (this.locked())
+                return false;
+            const address = chips[active];
+            if (this.#reorder(address, event.key === 'ArrowLeft' ? active - 1 : active + 2)) {
+                this.active.set(this.value().indexOf(address));
+                this.touch.emit();
+            }
+            event.preventDefault();
+            return true;
+        }
         switch (event.key) {
             case 'ArrowLeft':
                 this.active.set(Math.max(0, active - 1));
@@ -511,13 +862,68 @@ class AddressInput {
     }
     /** 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. */
+        input, so a name with spaces can still be edited before it commits —
+        but a chip's own copy (Ctrl+C, Ctrl+X, a hold) comes back as a chip,
+        as it was. With a chip picked, what is pasted goes right after it. */
     onPaste(event, input) {
-        const text = event.clipboardData?.getData('text') ?? '';
-        if (this.#rules.split(text).length < 2)
+        if (this.locked())
+            return;
+        const data = event.clipboardData;
+        const text = data?.getData('text') ?? '';
+        const chip = [...(data?.types ?? [])].includes(ADDRESS_DRAG_TYPE);
+        const entry = (chip && data.getData(ADDRESS_DRAG_TYPE)) || (text === clipboardEntry ? text : '');
+        const active = this.active();
+        const at = active === null ? this.#draftStart() : active + 1;
+        if (entry) {
+            event.preventDefault();
+            this.#insert([entry], at);
+            this.active.set(null);
+            return;
+        }
+        const tokens = this.#rules.split(text);
+        if (tokens.length < 2 && active === null)
             return;
         event.preventDefault();
-        this.#settle(input, `${input.value}, ${text}`);
+        if (active === null) {
+            this.#settle(input, `${input.value}, ${text}`);
+            return;
+        }
+        const addresses = tokens.filter((token) => this.#accepts(token));
+        this.#insert(addresses, at);
+        const rest = tokens.filter((token) => !this.#accepts(token));
+        if (rest.length) {
+            this.#write(input, [input.value, ...rest].filter(Boolean).join(', '));
+            this.refused.set(true);
+        }
+        this.active.set(null);
+    }
+    /** Ctrl+C or Ctrl+X (Cmd on a Mac, or the Edit menu) with a chip picked
+        and no text selected: the chip goes on the clipboard — its header
+        form, as text and as the library's own type, so a paste into an
+        address input brings it back as a chip — and shows and says so, as a
+        hold does. A cut then removes it, as the × would. */
+    onClipboard(event, input, cut) {
+        const address = this.current();
+        const data = event.clipboardData;
+        if (address === null || !data || input.selectionStart !== input.selectionEnd)
+            return;
+        if (cut && this.locked())
+            return;
+        event.preventDefault();
+        data.setData('text/plain', address);
+        data.setData(ADDRESS_DRAG_TYPE, address);
+        clipboardEntry = address;
+        if (cut) {
+            this.remove(address);
+            return;
+        }
+        this.chips()
+            .find((chip) => chip.address() === address)
+            ?.showCopied();
+    }
+    /** A chip's hold copied it: remembered, so a paste of it is a chip. */
+    onChipCopied(address) {
+        clipboardEntry = address;
     }
     /** 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
@@ -539,6 +945,9 @@ class AddressInput {
     onBlur(event, input) {
         if (this.#within(event))
             return;
+        this.#leave(input);
+    }
+    #leave(input) {
         const tokens = this.#rules.split(input.value);
         this.#insert(tokens.filter((token) => this.#accepts(token)));
         this.#insert(tokens.filter((token) => !this.#accepts(token)));
@@ -549,6 +958,10 @@ class AddressInput {
     onFocusout(event) {
         if (this.#within(event))
             return;
+        // Focus parked on the chip list by a press that came to nothing leaves
+        // from there: leaving is leaving, wherever the caret had got to.
+        if (event.target === this.chipList().nativeElement)
+            this.#leave(this.field().nativeElement);
         this.#focused.set(false);
         this.active.set(null);
     }
@@ -559,25 +972,27 @@ class AddressInput {
         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) {
+    /** Adds the new addresses to the list — at the end, or before the entry
+        at `at` (a drop) — up to `limit`, each only if its address is not in
+        the list yet; the entry already there keeps its name. Returns what
+        was added. */
+    #insert(incoming, at = Infinity) {
+        const added = [];
         if (!incoming.length)
-            return;
+            return added;
         this.value.update((current) => {
-            const next = [...current];
-            const seen = new Set(next.map(this.#key));
+            const seen = new Set(current.map(this.#key));
             for (const address of incoming) {
-                if (next.length >= this.limit())
+                if (current.length + added.length >= this.limit())
                     break;
                 if (seen.has(this.#key(address)))
                     continue;
                 seen.add(this.#key(address));
-                next.push(address);
+                added.push(address);
             }
-            return next;
+            return [...current.slice(0, at), ...added, ...current.slice(at)];
         });
+        return added;
     }
     /** Puts text in the input — the one way it is written, so `text` follows. */
     #write(input, text) {
@@ -590,7 +1005,7 @@ class AddressInput {
         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"] }] });
+    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 }, movedLabel: { classPropertyName: "movedLabel", publicName: "movedLabel", isSignal: true, isRequired: false, transformFunction: null }, allowDrag: { classPropertyName: "allowDrag", publicName: "allowDrag", 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)", "dragenter": "onDragover($event)", "dragover": "onDragover($event)", "dragleave": "onDragleave($event)", "drop": "onDrop($event)" }, properties: { "attr.aria-disabled": "disabled() || null", "attr.data-invalid": "flagged() || null", "attr.data-full": "full() || null", "attr.data-focused": "focused() || null", "attr.data-dropping": "dropping() || 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: "chipList", first: true, predicate: ["chipList"], 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<!-- Focusable by script and by a press only (tabindex -1, while chips can\n     be dragged): a press on a draggable chip must keep its default for the\n     drag to start, and its focus lands here \u2014 inside the control. -->\n<ul #chipList data-slot=\"chips\" role=\"list\" [attr.tabindex]=\"canDrag() ? -1 : null\">\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      [draggable]=\"canDrag()\"\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      (copied)=\"onChipCopied($event)\"\n      (click)=\"onChipClick($event, $index, field)\"\n      (dblclick)=\"onChipDblclick($event, address, field)\"\n      (dragstart)=\"onChipDragstart(address)\"\n      (dragend)=\"onChipDragend()\"\n    ></li>\n  }\n  <!-- Where a drag over the control would land: a line between entries,\n     drawn on top and out of the flow \u2014 nothing moves under the pointer. -->\n  @if (dropMarker(); as marker) {\n    <li\n      data-slot=\"drop-marker\"\n      aria-hidden=\"true\"\n      [style.left.px]=\"marker.x\"\n      [style.top.px]=\"marker.y\"\n      [style.height.px]=\"marker.height\"\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      (copy)=\"onClipboard($event, field, false)\"\n      (cut)=\"onClipboard($event, field, true)\"\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]){position:relative;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=chips]):focus{outline:none}:host :where([data-slot=drop-marker]){position:absolute;box-sizing:content-box;margin-top:calc(-1 * var(--email-address-input-drop-overhang, 4px));padding-block:var(--email-address-input-drop-overhang, 4px);width:var(--email-address-input-drop-width, 2px);margin-left:calc(var(--email-address-input-drop-width, 2px) / -2);border-radius:1px;background:var(--email-address-input-drop-color, var(--mat-sys-primary, light-dark(#0b57d0, #a8c7fa)));pointer-events: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", "draggable", "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,
@@ -599,13 +1014,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
                         '[attr.data-invalid]': 'flagged() || null',
                         '[attr.data-full]': 'full() || null',
                         '[attr.data-focused]': 'focused() || null',
+                        '[attr.data-dropping]': 'dropping() || 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 }] }] } });
+                        '(dragenter)': 'onDragover($event)',
+                        '(dragover)': 'onDragover($event)',
+                        '(dragleave)': 'onDragleave($event)',
+                        '(drop)': 'onDrop($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<!-- Focusable by script and by a press only (tabindex -1, while chips can\n     be dragged): a press on a draggable chip must keep its default for the\n     drag to start, and its focus lands here \u2014 inside the control. -->\n<ul #chipList data-slot=\"chips\" role=\"list\" [attr.tabindex]=\"canDrag() ? -1 : null\">\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      [draggable]=\"canDrag()\"\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      (copied)=\"onChipCopied($event)\"\n      (click)=\"onChipClick($event, $index, field)\"\n      (dblclick)=\"onChipDblclick($event, address, field)\"\n      (dragstart)=\"onChipDragstart(address)\"\n      (dragend)=\"onChipDragend()\"\n    ></li>\n  }\n  <!-- Where a drag over the control would land: a line between entries,\n     drawn on top and out of the flow \u2014 nothing moves under the pointer. -->\n  @if (dropMarker(); as marker) {\n    <li\n      data-slot=\"drop-marker\"\n      aria-hidden=\"true\"\n      [style.left.px]=\"marker.x\"\n      [style.top.px]=\"marker.y\"\n      [style.height.px]=\"marker.height\"\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      (copy)=\"onClipboard($event, field, false)\"\n      (cut)=\"onClipboard($event, field, true)\"\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]){position:relative;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=chips]):focus{outline:none}:host :where([data-slot=drop-marker]){position:absolute;box-sizing:content-box;margin-top:calc(-1 * var(--email-address-input-drop-overhang, 4px));padding-block:var(--email-address-input-drop-overhang, 4px);width:var(--email-address-input-drop-width, 2px);margin-left:calc(var(--email-address-input-drop-width, 2px) / -2);border-radius:1px;background:var(--email-address-input-drop-color, var(--mat-sys-primary, light-dark(#0b57d0, #a8c7fa)));pointer-events: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 }] }], movedLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "movedLabel", required: false }] }], allowDrag: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowDrag", 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 }] }], chipList: [{ type: i0.ViewChild, args: ['chipList', { 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';
@@ -682,5 +1102,5 @@ function rulesInForce() {
  * Generated bundle index. Do not edit.
  */
 
-export { ADDRESS_LIST_EMPTY, ADDRESS_LIST_INVALID, ADDRESS_LIST_TOO_MANY, AddressInput, AddressInputLabel, addressList };
+export { ADDRESS_LIST_EMPTY, ADDRESS_LIST_INVALID, ADDRESS_LIST_TOO_MANY, AddressDragGroup, AddressInput, AddressInputLabel, addressList };
 //# sourceMappingURL=h-k-dev-angular-email-editor-address-input.mjs.map