@cdevhub/ngx-tw 0.2.0 → 0.3.0

package/fesm2022/cdevhub-ngx-tw-transfer.mjs

@@ -0,0 +1,1129 @@
+import { NgTemplateOutlet } from '@angular/common';
+import * as i0 from '@angular/core';
+import { inject, TemplateRef, Directive, input, output, contentChild, ElementRef, Injector, DestroyRef, signal, computed, linkedSignal, afterNextRender, isDevMode, forwardRef, ChangeDetectionStrategy, Component } from '@angular/core';
+import { NgControl, NgForm, FormGroupDirective, Validators } from '@angular/forms';
+import { CdkListbox, CdkOption } from '@angular/cdk/listbox';
+import { FocusMonitor, LiveAnnouncer } from '@angular/cdk/a11y';
+import { Platform } from '@angular/cdk/platform';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { merge } from 'rxjs';
+import { tv } from 'tailwind-variants';
+import { TW_ERROR_STATE_MATCHER } from '@cdevhub/ngx-tw/core';
+import { FormFieldControl, TW_FORM_FIELD_CONTROL } from '@cdevhub/ngx-tw/form-field';
+import { CheckboxComponent } from '@cdevhub/ngx-tw/checkbox';
+import { InputDirective } from '@cdevhub/ngx-tw/input';
+
+/*
+ * tw-transfer — dual-listbox shuttle. Two panels (source / target) with a column
+ * of move buttons between them; the user ticks items in a panel and shuttles the
+ * ticked items to the other side. The component's *value* is the set of keys
+ * currently on the target side (`targetKeys`), exposed through
+ * `ControlValueAccessor` + `FormFieldControl` (mirrors `tags-input` / `select`).
+ *
+ * Architecture decisions (verified against @angular/cdk 21.2.x source):
+ *  - Each panel body is one `[cdkListbox]` (multiple) with one `[cdkOption]` per
+ *    VISIBLE item. CDK owns `role="listbox"`/`"option"`, `aria-multiselectable`/
+ *    `aria-selected`, roving-tabindex Arrow/Home/End, Space/Enter toggle, and
+ *    typeahead. We do NOT roll a custom listbox or reuse select's overlay.
+ *  - Option value is the item's KEY `K` (`[cdkOption]="row.key"`), so each panel's
+ *    `cdkListboxValue` is a `readonly K[]` and `compareWith` is key identity.
+ *  - TWO selection layers, kept distinct:
+ *      • `targetKeys` (signal) — persisted membership = the CVA value.
+ *      • per-panel ephemeral "checked" — the CdkListbox value, cleared after moves.
+ *  - The checked binding is CONTROLLED: `[cdkListboxValue]="<panel>Checked()"`,
+ *    writing the user's `cdkListboxValueChange` back into that signal. Programmatic
+ *    writes to `cdkListboxValue` are SILENT in CDK (only user gestures call
+ *    `valueChange.next` — verified: triggerOption/triggerRange), so the loop never
+ *    re-enters → no cycle / freeze.
+ *  - The checked set is a `linkedSignal` whose source is the rendered-key set: on
+ *    every render change it PRUNES keys whose option is no longer present (a filter
+ *    hid it, or a move removed it). Two consequences: (1) the bound value is always
+ *    a subset of the rendered options, so CdkListbox's internal `_invalid` flag —
+ *    which would otherwise collapse the whole selection to `[]` — never trips; and
+ *    (2) a key checked then filtered out is dropped permanently (it does NOT
+ *    re-appear when the filter clears). This matches the requirements doc and side-
+ *    steps a CDK quirk where a controlled value re-surfacing a just-re-rendered
+ *    option is not reliably re-selected. Moves always act on the visible subset.
+ */
+// ── Resolved-default constants ────────────────────────────────────────
+const LABELS_DEFAULTS = {
+    sourceTitle: 'Source',
+    targetTitle: 'Target',
+    searchPlaceholder: 'Search',
+    emptyText: 'No items',
+    selectAllLabel: 'Select all',
+    moveToTargetLabel: 'Move selected to target',
+    moveToSourceLabel: 'Move selected to source',
+    countFormat: '{total} items',
+    moveAnnouncement: '{count} items moved to {target}',
+};
+const DISPLAY_DEFAULTS = {
+    size: 'md',
+    listHeight: 240,
+    showSearch: false,
+    showSelectAll: true,
+};
+/** Replaces `{name}` tokens in a template with values from `vars`. */
+function formatLabel(template, vars) {
+    return template.replace(/\{(\w+)\}/g, (match, key) => key in vars ? String(vars[key]) : match);
+}
+// ── tv() config ───────────────────────────────────────────────────────
+//
+// All class strings are literal so the Tailwind v4 JIT scanner picks them up.
+// Semantic + surface/fg/border tokens only. The selected/checked option styling
+// mirrors `tree`'s selected node (`bg-primary-50 text-primary-700`, no `dark:`
+// overrides — slot tokens own structural light/dark contrast).
+const transferVariants = tv({
+    slots: {
+        // panel · controls · panel. The middle column is auto width; both panels
+        // share the remaining space and clamp to `min-w-0` so rows can truncate.
+        root: 'grid grid-cols-[minmax(0,1fr)_auto_minmax(0,1fr)] gap-3 items-stretch text-fg',
+        panel: 'flex flex-col min-w-0 rounded-lg border border-border bg-surface overflow-hidden',
+        panelHeader: 'flex items-center gap-2 border-b border-border bg-surface-muted',
+        panelTitle: 'text-sm font-semibold text-fg min-w-0 truncate flex-1',
+        panelCount: 'text-xs text-fg-muted shrink-0 tabular-nums',
+        search: 'border-b border-border',
+        // The cdkListbox scroll viewport. `outline-none` because focus rides the
+        // individual options (canonical ring there), not the container.
+        list: 'flex flex-col overflow-y-auto outline-none',
+        // The cdkOption row.
+        option: 'flex items-center gap-2 cursor-pointer select-none text-fg transition-colors duration-200 motion-reduce:transition-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500',
+        // Presentational check glyph (aria-hidden). Always laid out (for alignment);
+        // visibility toggles via opacity off the checked state.
+        optionCheck: 'shrink-0 transition-opacity duration-200 motion-reduce:transition-none',
+        optionLabel: 'min-w-0 truncate flex-1',
+        controls: 'flex flex-col justify-center gap-2',
+        // Plain square move buttons (icon-only). Square-interactive sub-scale per
+        // size; not the [twButton] directive (its size padding would fight a square
+        // override across two class bindings).
+        moveButton: 'inline-flex items-center justify-center shrink-0 rounded-md border border-border bg-surface text-fg-muted cursor-pointer transition-colors duration-200 motion-reduce:transition-none hover:bg-surface-muted hover:text-fg hover:border-border-strong focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 disabled:opacity-50 disabled:pointer-events-none disabled:cursor-not-allowed',
+        moveIcon: 'shrink-0',
+        empty: 'flex items-center justify-center p-4 text-sm text-fg-subtle text-center',
+    },
+    variants: {
+        size: {
+            xs: {
+                panelHeader: 'px-2 py-1',
+                search: 'px-2 py-1',
+                option: 'px-2 py-1 text-xs gap-1.5',
+                optionCheck: 'size-4',
+                moveButton: 'size-6',
+                moveIcon: 'size-4',
+                empty: 'text-xs',
+            },
+            sm: {
+                panelHeader: 'px-3 py-1.5',
+                search: 'px-3 py-1.5',
+                option: 'px-3 py-1.5 text-sm',
+                optionCheck: 'size-4',
+                moveButton: 'size-7',
+                moveIcon: 'size-4',
+            },
+            md: {
+                panelHeader: 'px-4 py-2',
+                search: 'px-3 py-2',
+                option: 'px-3 py-2 text-sm',
+                optionCheck: 'size-5',
+                moveButton: 'size-8',
+                moveIcon: 'size-5',
+            },
+            lg: {
+                panelHeader: 'px-5 py-2.5',
+                search: 'px-4 py-2.5',
+                option: 'px-4 py-2.5 text-base',
+                optionCheck: 'size-5',
+                moveButton: 'size-9',
+                moveIcon: 'size-5',
+            },
+            xl: {
+                panelHeader: 'px-6 py-3',
+                search: 'px-4 py-3',
+                option: 'px-4 py-3 text-base',
+                optionCheck: 'size-5',
+                moveButton: 'size-9',
+                moveIcon: 'size-5',
+            },
+        },
+        checked: {
+            true: {
+                option: 'bg-primary-50 text-primary-700 hover:bg-primary-50',
+                optionCheck: 'opacity-100 text-primary-600',
+            },
+            false: {
+                option: 'hover:bg-surface-muted',
+                optionCheck: 'opacity-0',
+            },
+        },
+        optionDisabled: {
+            true: { option: 'opacity-50 pointer-events-none' },
+            false: {},
+        },
+        disabled: {
+            true: { root: 'opacity-50 pointer-events-none' },
+            false: {},
+        },
+    },
+    defaultVariants: {
+        size: 'md',
+        checked: false,
+        optionDisabled: false,
+        disabled: false,
+    },
+}, { twMerge: true });
+// ── TransferItemDefDirective ──────────────────────────────────────────
+//
+// Pure TemplateRef carrier for the consumer's per-item template. Mirrors tree's
+// `TreeNodeDefDirective` / table's `CellDefDirective`: a typed context +
+// `ngTemplateContextGuard` so `let-item` / `let-checked="checked"` type-check.
+// Optional — when absent each row renders the default check glyph + label.
+/** Structural directive (`*twTransferItem="let item"`) declaring the per-item template. Typed as `TwTransferItemContext<T>`. */
+class TransferItemDefDirective {
+    /** @internal Consumer-projected per-item template. */
+    template = inject((TemplateRef));
+    /** @internal */
+    static ngTemplateContextGuard(_dir, _ctx) {
+        return true;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: TransferItemDefDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: TransferItemDefDirective, isStandalone: true, selector: "[twTransferItem]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: TransferItemDefDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: '[twTransferItem]' }]
+        }] });
+let nextId = 0;
+// ── TransferComponent ─────────────────────────────────────────────────
+/**
+ * A dual-listbox shuttle: two panels (source / target) with a column of move
+ * buttons between them. The user ticks items in a panel and shuttles them across;
+ * an optional per-panel search and a tri-state header select-all accelerate bulk
+ * moves. The component's value is the set of keys on the target side, exposed
+ * through `ControlValueAccessor` + `FormFieldControl` so it works with reactive,
+ * template-driven, and signal forms and integrates with `<tw-form-field>`.
+ *
+ * Each panel composes `@angular/cdk/listbox` (`CdkListbox` / `CdkOption`) for
+ * focus-managed, accessible, keyboard-navigable selection. Consumers supply
+ * `keyFn` (required) and `labelFn` (defaulted to `String(item)`), and may project
+ * a `*twTransferItem` template for rich row content.
+ */
+class TransferComponent extends FormFieldControl {
+    // ── Inputs ──
+    /** All items across both panels. The source/target split derives from the value, not the reverse. Defaults to `[]`. */
+    data = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
+    /** Resolves a stable key for an item — drives membership (the value), checked state, tracking, the cdkOption value, and compareWith. Required. */
+    keyFn = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "keyFn" }] : /* istanbul ignore next */ []));
+    /** Resolves an item's display label — used for the default row render, search filtering, and listbox typeahead. Defaults to `(item) => String(item)`. */
+    labelFn = input((item) => String(item), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "labelFn" }] : /* istanbul ignore next */ []));
+    /** Per-panel text + ARIA labels. Partial; unset keys fall back to the English defaults. */
+    labels = input({}, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "labels" }] : /* istanbul ignore next */ []));
+    /** Visual configuration — size, list viewport height, search / select-all visibility. Partial; unset keys fall back to the defaults. */
+    display = input({}, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "display" }] : /* istanbul ignore next */ []));
+    /** Behavioural configuration — oneWay, custom filterFn, per-item disabledItem predicate. Partial; unset keys fall back to the defaults. */
+    behavior = input({}, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "behavior" }] : /* istanbul ignore next */ []));
+    /** Disables the entire control — panels non-interactive, search + buttons disabled, muted styling. Also driven by Forms `setDisabledState`. Defaults to `false`. */
+    disabledInput = input(false, { ...(ngDevMode ? { debugName: "disabledInput" } : /* istanbul ignore next */ {}), alias: 'disabled' });
+    /** Marks the control as required. Mirrored to `aria-required` chrome via the form-field; also inferred from `Validators.required` on a bound control. Defaults to `false`. */
+    requiredInput = input(false, { ...(ngDevMode ? { debugName: "requiredInput" } : /* istanbul ignore next */ {}), alias: 'required' });
+    /** Reserved for control identification (e.g. analytics, future native-submission parity). The transfer has no single native value element, so it is not currently reflected to the DOM. Defaults to `undefined`. */
+    name = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+    /** Id on the host element. Auto-generated as `tw-transfer-N` when unset. Used by the form-field's `<label for>` association. */
+    idInput = input(undefined, { ...(ngDevMode ? { debugName: "idInput" } : /* istanbul ignore next */ {}), alias: 'id' });
+    /** Accessible name applied to the control when no visible label is wired. Mirrored to `aria-label`. Defaults to `undefined`. */
+    ariaLabel = input(undefined, { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: 'aria-label' });
+    /** ID of an external element that labels the control. Mirrored to `aria-labelledby`. Defaults to `undefined`. */
+    ariaLabelledby = input(undefined, { ...(ngDevMode ? { debugName: "ariaLabelledby" } : /* istanbul ignore next */ {}), alias: 'aria-labelledby' });
+    /** ID of an external element that describes the control. The form-field merges its hint / error ids alongside. Defaults to `undefined`. */
+    ariaDescribedby = input(undefined, { ...(ngDevMode ? { debugName: "ariaDescribedby" } : /* istanbul ignore next */ {}), alias: 'aria-describedby' });
+    /** Per-instance override of the {@link ErrorStateMatcher}. When omitted, uses the `TW_ERROR_STATE_MATCHER` token's value. Defaults to `undefined`. */
+    errorStateMatcher = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "errorStateMatcher" }] : /* istanbul ignore next */ []));
+    // ── Outputs ──
+    /** Fires when items move between panels by user interaction. Payload is the new full target-keys array. Does not fire on `writeValue`. */
+    valueChange = output();
+    /** Fires after each directional move, identifying the moved keys and their direction. Does not fire on `writeValue`. */
+    moved = output();
+    // ── Content query ──
+    /** @internal Consumer-projected per-item template (`*twTransferItem`). */
+    itemTemplate = contentChild((TransferItemDefDirective), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "itemTemplate" }] : /* istanbul ignore next */ []));
+    // ── Injected deps ──
+    elementRef = inject((ElementRef));
+    injector = inject(Injector);
+    destroyRef = inject(DestroyRef);
+    focusMonitor = inject(FocusMonitor);
+    liveAnnouncer = inject(LiveAnnouncer);
+    ngControl = inject(NgControl, { optional: true, self: true });
+    parentForm = inject(NgForm, { optional: true });
+    parentFormGroup = inject(FormGroupDirective, { optional: true });
+    defaultMatcher = inject(TW_ERROR_STATE_MATCHER);
+    platform = inject(Platform);
+    // ── Identity ──
+    uid = nextId++;
+    /** @internal Fallback id used when the consumer does not set `[id]`. */
+    hostId = `tw-transfer-${this.uid}`;
+    sourceTitleId = `${this.hostId}-source-title`;
+    targetTitleId = `${this.hostId}-target-title`;
+    // ── State signals ──
+    /** @internal The value: keys currently on the target side. Source of truth for membership. */
+    targetKeys = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "targetKeys" }] : /* istanbul ignore next */ []));
+    /** @internal Per-panel search queries. */
+    sourceQuery = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "sourceQuery" }] : /* istanbul ignore next */ []));
+    targetQuery = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "targetQuery" }] : /* istanbul ignore next */ []));
+    cvaDisabled = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "cvaDisabled" }] : /* istanbul ignore next */ []));
+    _focused = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_focused" }] : /* istanbul ignore next */ []));
+    _ngControlRev = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_ngControlRev" }] : /* istanbul ignore next */ []));
+    _formSubmitRev = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_formSubmitRev" }] : /* istanbul ignore next */ []));
+    describedByIdsSignal = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "describedByIdsSignal" }] : /* istanbul ignore next */ []));
+    labelledByIdsSignal = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "labelledByIdsSignal" }] : /* istanbul ignore next */ []));
+    onChange = () => { };
+    onTouched = () => { };
+    /** @internal Stable comparator for `[cdkListboxCompareWith]`. Keys are identity-comparable. */
+    compareKeys = (a, b) => Object.is(a, b);
+    // ── Resolved config ──
+    /** @internal */
+    resolvedLabels = computed(() => ({
+        ...LABELS_DEFAULTS,
+        ...this.labels(),
+    }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedLabels" }] : /* istanbul ignore next */ []));
+    resolvedDisplay = computed(() => ({
+        ...DISPLAY_DEFAULTS,
+        ...this.display(),
+    }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedDisplay" }] : /* istanbul ignore next */ []));
+    // Behaviour is resolved inline (not via a `Required<>` const) because `filterFn`
+    // is legitimately optional and both predicates are generic over `T`.
+    resolvedBehavior = computed(() => {
+        const b = this.behavior();
+        return {
+            oneWay: b.oneWay ?? false,
+            filterFn: b.filterFn,
+            disabledItem: b.disabledItem ?? ((_item) => false),
+        };
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedBehavior" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    resolvedSize = computed(() => this.resolvedDisplay().size, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedSize" }] : /* istanbul ignore next */ []));
+    /** @internal Checkbox tops out at `lg` density; map xl → lg. */
+    checkboxSize = computed(() => {
+        const s = this.resolvedSize();
+        return s === 'xl' ? 'lg' : s;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "checkboxSize" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    showSearch = computed(() => this.resolvedDisplay().showSearch, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showSearch" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    showSelectAll = computed(() => this.resolvedDisplay().showSelectAll, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showSelectAll" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    oneWay = computed(() => this.resolvedBehavior().oneWay, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "oneWay" }] : /* istanbul ignore next */ []));
+    /** @internal Fixed list height in px, or `null` when `'auto'`. */
+    listHeightPx = computed(() => {
+        const h = this.resolvedDisplay().listHeight;
+        return h === 'auto' ? null : h;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "listHeightPx" }] : /* istanbul ignore next */ []));
+    // ── Derived membership state ──
+    /** @internal Map from key to item across all data — for orphan-aware target rendering and disabled lookups. */
+    itemByKey = computed(() => {
+        const kf = this.keyFn();
+        const map = new Map();
+        for (const item of this.data())
+            map.set(kf(item), item);
+        return map;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "itemByKey" }] : /* istanbul ignore next */ []));
+    targetKeySet = computed(() => new Set(this.targetKeys()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "targetKeySet" }] : /* istanbul ignore next */ []));
+    /** @internal Items on the source side (in `data` order). */
+    sourceItems = computed(() => {
+        const inTarget = this.targetKeySet();
+        const kf = this.keyFn();
+        return this.data().filter((item) => !inTarget.has(kf(item)));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "sourceItems" }] : /* istanbul ignore next */ []));
+    /** @internal Items on the target side (in `targetKeys` order; orphan keys with no item are skipped). */
+    targetItems = computed(() => {
+        const map = this.itemByKey();
+        const out = [];
+        for (const key of this.targetKeys()) {
+            const item = map.get(key);
+            if (item !== undefined)
+                out.push(item);
+        }
+        return out;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "targetItems" }] : /* istanbul ignore next */ []));
+    // ── Per-panel row pipelines (source) ──
+    // Stage 1 (base) carries no checked flag → renderedKeys / reconciled derive from
+    // it without a cycle. Stage 2 augments with checked state + precomputed classes.
+    sourceRowsBase = computed(() => this.toRowsBase(this.filterItems(this.sourceItems(), this.sourceQuery())), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "sourceRowsBase" }] : /* istanbul ignore next */ []));
+    sourceRenderedKeys = computed(() => new Set(this.sourceRowsBase().map((r) => r.key)), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "sourceRenderedKeys" }] : /* istanbul ignore next */ []));
+    /**
+     * @internal Ephemeral pending-move checked keys for the source panel — the
+     * controlled `[cdkListboxValue]`. A `linkedSignal` over the rendered-key set so
+     * it auto-prunes keys whose option a filter / move removed (kept ⊆ rendered → no
+     * CdkListbox `_invalid`; dropped keys do not re-surface). Cleared after moves.
+     */
+    sourceChecked = linkedSignal({ ...(ngDevMode ? { debugName: "sourceChecked" } : /* istanbul ignore next */ {}), source: this.sourceRenderedKeys,
+        computation: (rendered, prev) => (prev?.value ?? []).filter((k) => rendered.has(k)) });
+    sourceCheckedSet = computed(() => new Set(this.sourceChecked()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "sourceCheckedSet" }] : /* istanbul ignore next */ []));
+    sourceRows = computed(() => this.toRows(this.sourceRowsBase(), this.sourceCheckedSet(), 'source'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "sourceRows" }] : /* istanbul ignore next */ []));
+    // ── Per-panel row pipelines (target) ──
+    targetRowsBase = computed(() => this.toRowsBase(this.filterItems(this.targetItems(), this.targetQuery())), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "targetRowsBase" }] : /* istanbul ignore next */ []));
+    targetRenderedKeys = computed(() => new Set(this.targetRowsBase().map((r) => r.key)), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "targetRenderedKeys" }] : /* istanbul ignore next */ []));
+    /** @internal Ephemeral pending-move checked keys for the target panel — see {@link sourceChecked}. */
+    targetChecked = linkedSignal({ ...(ngDevMode ? { debugName: "targetChecked" } : /* istanbul ignore next */ {}), source: this.targetRenderedKeys,
+        computation: (rendered, prev) => (prev?.value ?? []).filter((k) => rendered.has(k)) });
+    targetCheckedSet = computed(() => new Set(this.targetChecked()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "targetCheckedSet" }] : /* istanbul ignore next */ []));
+    targetRows = computed(() => this.toRows(this.targetRowsBase(), this.targetCheckedSet(), 'target'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "targetRows" }] : /* istanbul ignore next */ []));
+    // ── Movable + select-all derivations ──
+    /** @internal Checked, enabled, visible source keys — what the → button moves. */
+    sourceMovableKeys = computed(() => {
+        const checked = this.sourceCheckedSet();
+        return this.sourceRowsBase()
+            .filter((r) => !r.disabled && checked.has(r.key))
+            .map((r) => r.key);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "sourceMovableKeys" }] : /* istanbul ignore next */ []));
+    /** @internal Checked, enabled, visible target keys — what the ← button moves. */
+    targetMovableKeys = computed(() => {
+        const checked = this.targetCheckedSet();
+        return this.targetRowsBase()
+            .filter((r) => !r.disabled && checked.has(r.key))
+            .map((r) => r.key);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "targetMovableKeys" }] : /* istanbul ignore next */ []));
+    sourceSelectAllKeys = computed(() => this.sourceRowsBase().filter((r) => !r.disabled).map((r) => r.key), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "sourceSelectAllKeys" }] : /* istanbul ignore next */ []));
+    targetSelectAllKeys = computed(() => this.targetRowsBase().filter((r) => !r.disabled).map((r) => r.key), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "targetSelectAllKeys" }] : /* istanbul ignore next */ []));
+    // ── Panel view-models ──
+    /** @internal */
+    sourcePanel = computed(() => this.buildPanel('source', this.sourceTitleId, this.resolvedLabels().sourceTitle, this.sourceRowsBase(), this.sourceRows(), this.sourceCheckedSet(), this.sourceSelectAllKeys(), this.sourceChecked(), this.sourceQuery()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "sourcePanel" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    targetPanel = computed(() => this.buildPanel('target', this.targetTitleId, this.resolvedLabels().targetTitle, this.targetRowsBase(), this.targetRows(), this.targetCheckedSet(), this.targetSelectAllKeys(), this.targetChecked(), this.targetQuery()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "targetPanel" }] : /* istanbul ignore next */ []));
+    // ── tv() class outputs ──
+    variants = computed(() => transferVariants({
+        size: this.resolvedSize(),
+        disabled: this.disabled(),
+    }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "variants" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    rootClasses = computed(() => this.variants().root(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rootClasses" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    panelClasses = computed(() => this.variants().panel(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "panelClasses" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    panelHeaderClasses = computed(() => this.variants().panelHeader(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "panelHeaderClasses" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    panelTitleClasses = computed(() => this.variants().panelTitle(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "panelTitleClasses" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    panelCountClasses = computed(() => this.variants().panelCount(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "panelCountClasses" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    searchClasses = computed(() => this.variants().search(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "searchClasses" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    listClasses = computed(() => this.variants().list(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "listClasses" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    optionLabelClasses = computed(() => this.variants().optionLabel(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "optionLabelClasses" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    controlsClasses = computed(() => this.variants().controls(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "controlsClasses" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    moveButtonClasses = computed(() => this.variants().moveButton(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "moveButtonClasses" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    moveIconClasses = computed(() => this.variants().moveIcon(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "moveIconClasses" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    emptyClasses = computed(() => this.variants().empty(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "emptyClasses" }] : /* istanbul ignore next */ []));
+    constructor() {
+        super();
+        // Runtime CVA wiring — register on any host-level NgControl. The component
+        // injects `NgControl { self }` for TW_ERROR_STATE_MATCHER, so a static
+        // NG_VALUE_ACCESSOR provider would create circular DI on the same instance.
+        if (this.ngControl) {
+            this.ngControl.valueAccessor = this;
+        }
+        afterNextRender(() => {
+            if (isDevMode() && !this.hasAccessibleNameHint()) {
+                console.warn('[tw-transfer] The control has no accessible name. Provide `aria-label` / `aria-labelledby`, or wrap it in a <tw-form-field> with a <label twLabel>.');
+            }
+        });
+    }
+    // ── Public methods ──
+    /** Moves the given items (by key) to the target side; ignores keys already there or whose item is disabled. Clears the source panel's pending checks, emits `valueChange` + `moved`, calls the CVA onChange, and announces the move. No-op when the control is disabled. */
+    moveToTarget(keys) {
+        if (this.disabled())
+            return;
+        const current = this.targetKeys();
+        const existing = new Set(current);
+        const disabledFn = this.resolvedBehavior().disabledItem;
+        const map = this.itemByKey();
+        const moved = [];
+        for (const key of keys) {
+            if (existing.has(key))
+                continue;
+            const item = map.get(key);
+            if (item !== undefined && disabledFn(item))
+                continue;
+            existing.add(key);
+            moved.push(key);
+        }
+        this.sourceChecked.set([]);
+        if (!moved.length)
+            return;
+        // Append moved keys to the existing array — orphan keys (in the value, not in
+        // `data`) are part of `current` and therefore preserved.
+        this.applyValue([...current, ...moved], moved, 'toTarget');
+    }
+    /** Moves the given items (by key) to the source side; ignores keys not on target or whose item is disabled. Clears the target panel's pending checks. No-op when the control is disabled or `behavior.oneWay` is on. Same emissions as {@link moveToTarget}. */
+    moveToSource(keys) {
+        if (this.disabled() || this.resolvedBehavior().oneWay)
+            return;
+        const current = this.targetKeys();
+        const present = new Set(current);
+        const disabledFn = this.resolvedBehavior().disabledItem;
+        const map = this.itemByKey();
+        const remove = new Set();
+        for (const key of keys) {
+            if (!present.has(key))
+                continue;
+            const item = map.get(key);
+            if (item !== undefined && disabledFn(item))
+                continue;
+            remove.add(key);
+        }
+        this.targetChecked.set([]);
+        if (!remove.size)
+            return;
+        // Filter the existing array — unspecified orphan keys are preserved.
+        this.applyValue(current.filter((k) => !remove.has(k)), [...remove], 'toSource');
+    }
+    // ── Template event handlers ──
+    /** @internal */
+    onCheckedChange(side, event) {
+        if (side === 'source')
+            this.sourceChecked.set([...event.value]);
+        else
+            this.targetChecked.set([...event.value]);
+    }
+    /** @internal Select-all toggles the visible, enabled keys for the panel (replace semantics). */
+    onSelectAll(side, checked) {
+        if (side === 'source') {
+            this.sourceChecked.set(checked ? [...this.sourceSelectAllKeys()] : []);
+        }
+        else {
+            this.targetChecked.set(checked ? [...this.targetSelectAllKeys()] : []);
+        }
+    }
+    /** @internal */
+    onSearch(side, event) {
+        const value = event.target.value;
+        if (side === 'source')
+            this.sourceQuery.set(value);
+        else
+            this.targetQuery.set(value);
+    }
+    /** @internal */
+    onMoveToTarget() {
+        this.moveToTarget(this.sourceMovableKeys());
+        // The clicked → button disables itself once its checked set drains; a focused
+        // element that becomes `disabled` drops focus to <body>. Keep the user in the
+        // control by moving focus to the destination listbox (non-empty after a move).
+        this.focusDestination('target');
+    }
+    /** @internal */
+    onMoveToSource() {
+        this.moveToSource(this.targetMovableKeys());
+        this.focusDestination('source');
+    }
+    /**
+     * @internal Focuses the destination panel's listbox after the move re-renders.
+     * Deferred to the next render (the destination listbox may have just mounted
+     * from empty) and matched by its title id rather than DOM order (the *other*
+     * panel may have emptied, removing its listbox).
+     */
+    focusDestination(side) {
+        if (!this.platform.isBrowser)
+            return;
+        const titleId = side === 'source' ? this.sourceTitleId : this.targetTitleId;
+        afterNextRender(() => {
+            const listbox = this.elementRef.nativeElement.querySelector(`[cdklistbox][aria-labelledby="${titleId}"]`);
+            listbox?.focus();
+        }, { injector: this.injector });
+    }
+    // ── Internal helpers ──
+    applyValue(next, moved, direction) {
+        this.targetKeys.set(next);
+        this.onChange(next);
+        this.valueChange.emit(next);
+        this.moved.emit({ keys: moved, direction });
+        const labels = this.resolvedLabels();
+        const dest = direction === 'toTarget' ? labels.targetTitle : labels.sourceTitle;
+        this.liveAnnouncer.announce(formatLabel(labels.moveAnnouncement, { count: moved.length, target: dest }), 'polite');
+    }
+    filterItems(items, query) {
+        const q = query.trim();
+        if (!q)
+            return items;
+        const custom = this.resolvedBehavior().filterFn;
+        if (custom)
+            return items.filter((item) => custom(item, q));
+        const labelFn = this.labelFn();
+        const lower = q.toLowerCase();
+        return items.filter((item) => labelFn(item).toLowerCase().includes(lower));
+    }
+    toRowsBase(items) {
+        const kf = this.keyFn();
+        const labelFn = this.labelFn();
+        const disabledFn = this.resolvedBehavior().disabledItem;
+        return items.map((item) => ({
+            item,
+            key: kf(item),
+            label: labelFn(item),
+            disabled: disabledFn(item),
+        }));
+    }
+    toRows(base, checked, side) {
+        const size = this.resolvedSize();
+        return base.map((b) => {
+            const isChecked = checked.has(b.key);
+            const v = transferVariants({
+                size,
+                checked: isChecked,
+                optionDisabled: b.disabled,
+            });
+            return {
+                ...b,
+                checked: isChecked,
+                optionClass: v.option(),
+                checkClass: v.optionCheck(),
+                context: {
+                    $implicit: b.item,
+                    label: b.label,
+                    checked: isChecked,
+                    disabled: b.disabled,
+                    side,
+                },
+            };
+        });
+    }
+    buildPanel(side, titleId, title, base, rows, checked, selectAllKeys, checkedValue, query) {
+        const labels = this.resolvedLabels();
+        const selectedCount = rows.reduce((n, r) => (r.checked ? n + 1 : n), 0);
+        const state = this.selectAllState(selectAllKeys, checked);
+        return {
+            side,
+            title,
+            titleId,
+            countText: formatLabel(labels.countFormat, {
+                total: base.length,
+                selected: selectedCount,
+            }),
+            emptyText: labels.emptyText,
+            searchPlaceholder: labels.searchPlaceholder,
+            selectAllLabel: labels.selectAllLabel,
+            query,
+            rows,
+            checkedValue,
+            selectAllChecked: state === 'checked',
+            selectAllIndeterminate: state === 'indeterminate',
+        };
+    }
+    selectAllState(enabledKeys, checked) {
+        if (enabledKeys.length === 0)
+            return 'unchecked';
+        let n = 0;
+        for (const key of enabledKeys)
+            if (checked.has(key))
+                n++;
+        if (n === 0)
+            return 'unchecked';
+        if (n === enabledKeys.length)
+            return 'checked';
+        return 'indeterminate';
+    }
+    hasAccessibleNameHint() {
+        return (!!this.ariaLabel() ||
+            !!this.ariaLabelledby() ||
+            this.labelledByIdsSignal().length > 0);
+    }
+    // ── FormFieldControl signals ──
+    /** @internal */
+    id = computed(() => this.idInput() ?? this.hostId, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+    /** The current target-keys array. Doubles as the `FormFieldControl` value member. */
+    value = this.targetKeys.asReadonly();
+    /** @internal */
+    focused = this._focused.asReadonly();
+    /** @internal Empty when nothing is on the target side — drives the form-field floating label. */
+    empty = computed(() => this.targetKeys().length === 0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "empty" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    disabled = computed(() => this.disabledInput() || this.cvaDisabled(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    required = computed(() => {
+        this._ngControlRev();
+        if (this.requiredInput())
+            return true;
+        return !!this.ngControl?.control?.hasValidator(Validators.required);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    errorState = computed(() => {
+        this._ngControlRev();
+        this._formSubmitRev();
+        this._focused();
+        const matcher = this.errorStateMatcher() ?? this.defaultMatcher;
+        const form = this.parentFormGroup ??
+            this.parentForm;
+        return matcher.isErrorState(this.ngControl?.control ?? null, form);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "errorState" }] : /* istanbul ignore next */ []));
+    /** @internal Active validation errors from the bound control, for `[twError match="…"]` filtering. */
+    errors = computed(() => {
+        this._ngControlRev();
+        return this.ngControl?.control?.errors ?? null;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "errors" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    controlType = 'transfer';
+    /** @internal */
+    userAriaDescribedBy = computed(() => this.ariaDescribedby(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "userAriaDescribedBy" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    userAriaLabelledby = computed(() => this.ariaLabelledby(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "userAriaLabelledby" }] : /* istanbul ignore next */ []));
+    /** @internal Merged `aria-describedby` (form-field hint/error ids + consumer-supplied). */
+    resolvedDescribedBy = computed(() => {
+        const pushed = this.describedByIdsSignal();
+        if (pushed.length)
+            return pushed.join(' ');
+        const user = this.ariaDescribedby();
+        if (user)
+            return user.split(/\s+/).filter(Boolean).join(' ');
+        return '';
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedDescribedBy" }] : /* istanbul ignore next */ []));
+    /** @internal Merged `aria-labelledby` (form-field label id + consumer-supplied). */
+    resolvedLabelledBy = computed(() => {
+        const pushed = this.labelledByIdsSignal();
+        if (pushed.length)
+            return pushed.join(' ');
+        const user = this.ariaLabelledby();
+        if (user)
+            return user.split(/\s+/).filter(Boolean).join(' ');
+        return '';
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedLabelledBy" }] : /* istanbul ignore next */ []));
+    // ── ControlValueAccessor ──
+    writeValue(value) {
+        // Orphan keys (present here but absent from `data`) are preserved — they render
+        // nothing but survive the round-trip, so a form value outlives a lagging `data`.
+        this.targetKeys.set(Array.isArray(value) ? [...value] : []);
+        this.sourceChecked.set([]);
+        this.targetChecked.set([]);
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.cvaDisabled.set(isDisabled);
+    }
+    // ── FormFieldControl methods ──
+    /** @internal */
+    setDescribedByIds(ids) {
+        this.describedByIdsSignal.set([...ids]);
+    }
+    /** @internal */
+    setLabelledByIds(ids) {
+        this.labelledByIdsSignal.set([...ids]);
+    }
+    /** @internal Clicking the form-field surface focuses the first listbox. */
+    onContainerClick(event) {
+        if (this.disabled() || event.defaultPrevented)
+            return;
+        const host = this.elementRef.nativeElement;
+        if (event.target !== host && host.contains(event.target))
+            return;
+        const listbox = host.querySelector('[cdklistbox]');
+        listbox?.focus();
+    }
+    // ── Lifecycle ──
+    ngOnInit() {
+        // Host-level focus monitor (checkChildren: true): internal focus moves between
+        // the two listboxes / buttons / search stay "focused"; origin === null fires
+        // only when focus leaves the WHOLE control — the single source for onTouched.
+        this.focusMonitor
+            .monitor(this.elementRef, true)
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe((origin) => {
+            const wasFocused = this._focused();
+            this._focused.set(!!origin);
+            if (wasFocused && !origin) {
+                this.onTouched();
+                this._ngControlRev.update((n) => n + 1);
+            }
+        });
+        this.destroyRef.onDestroy(() => this.focusMonitor.stopMonitoring(this.elementRef));
+        // React to status/value changes on the bound control so errorState recomputes.
+        const ctrl = this.ngControl?.control;
+        if (ctrl) {
+            const streams = [ctrl.statusChanges, ctrl.valueChanges].filter((s) => !!s);
+            if (streams.length) {
+                merge(...streams)
+                    .pipe(takeUntilDestroyed(this.destroyRef))
+                    .subscribe(() => this._ngControlRev.update((n) => n + 1));
+            }
+        }
+        const submit = this.parentFormGroup?.ngSubmit ?? this.parentForm?.ngSubmit;
+        if (submit) {
+            submit
+                .pipe(takeUntilDestroyed(this.destroyRef))
+                .subscribe(() => this._formSubmitRev.update((n) => n + 1));
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: TransferComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: TransferComponent, isStandalone: true, selector: "tw-transfer", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, keyFn: { classPropertyName: "keyFn", publicName: "keyFn", isSignal: true, isRequired: true, transformFunction: null }, labelFn: { classPropertyName: "labelFn", publicName: "labelFn", isSignal: true, isRequired: false, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: false, transformFunction: null }, display: { classPropertyName: "display", publicName: "display", isSignal: true, isRequired: false, transformFunction: null }, behavior: { classPropertyName: "behavior", publicName: "behavior", isSignal: true, isRequired: false, transformFunction: null }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, requiredInput: { classPropertyName: "requiredInput", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, idInput: { classPropertyName: "idInput", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "aria-labelledby", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedby: { classPropertyName: "ariaDescribedby", publicName: "aria-describedby", isSignal: true, isRequired: false, transformFunction: null }, errorStateMatcher: { classPropertyName: "errorStateMatcher", publicName: "errorStateMatcher", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", moved: "moved" }, host: { attributes: { "role": "group" }, properties: { "id": "id()", "class": "rootClasses()", "attr.aria-label": "ariaLabel() || null", "attr.aria-labelledby": "resolvedLabelledBy() || null", "attr.aria-describedby": "resolvedDescribedBy() || null", "attr.aria-disabled": "disabled() || null", "attr.aria-invalid": "errorState() || null", "attr.data-focused": "focused() || null" } }, providers: [
+            {
+                provide: TW_FORM_FIELD_CONTROL,
+                useExisting: forwardRef(() => TransferComponent),
+            },
+        ], queries: [{ propertyName: "itemTemplate", first: true, predicate: (TransferItemDefDirective), descendants: true, isSignal: true }], exportAs: ["twTransfer"], usesInheritance: true, ngImport: i0, template: `
+    <!-- One panel, instantiated twice (source, then target) around the controls. -->
+    <ng-template #panelTpl let-panel>
+      <div [class]="panelClasses()">
+        <div [class]="panelHeaderClasses()">
+          @if (showSelectAll()) {
+            <tw-checkbox
+              [size]="checkboxSize()"
+              [checked]="panel.selectAllChecked"
+              [indeterminate]="panel.selectAllIndeterminate"
+              [disabled]="disabled()"
+              [aria-label]="panel.selectAllLabel"
+              (change)="onSelectAll(panel.side, $event)"
+            />
+          }
+          <span [id]="panel.titleId" [class]="panelTitleClasses()">{{ panel.title }}</span>
+          <span [class]="panelCountClasses()">{{ panel.countText }}</span>
+        </div>
+
+        @if (showSearch()) {
+          <div [class]="searchClasses()">
+            <input
+              twInput
+              type="text"
+              [size]="resolvedSize()"
+              [value]="panel.query"
+              [disabled]="disabled()"
+              [attr.placeholder]="panel.searchPlaceholder"
+              [attr.aria-label]="panel.searchPlaceholder"
+              (input)="onSearch(panel.side, $event)"
+            />
+          </div>
+        }
+
+        <!-- The cdkListbox is rendered only when it has options. An empty
+             role="listbox" violates aria-required-children, so an empty panel
+             shows a plain message region instead. -->
+        @if (panel.rows.length > 0) {
+          <div
+            cdkListbox
+            [cdkListboxMultiple]="true"
+            [cdkListboxValue]="panel.checkedValue"
+            [cdkListboxDisabled]="disabled()"
+            [cdkListboxCompareWith]="compareKeys"
+            [class]="listClasses()"
+            [style.height.px]="listHeightPx()"
+            [attr.aria-labelledby]="panel.titleId"
+            (cdkListboxValueChange)="onCheckedChange(panel.side, $event)"
+          >
+            @for (row of panel.rows; track row.key) {
+              <div
+                [cdkOption]="row.key"
+                [cdkOptionDisabled]="row.disabled"
+                [cdkOptionTypeaheadLabel]="row.label"
+                [class]="row.optionClass"
+              >
+                <svg
+                  viewBox="0 0 20 20"
+                  fill="currentColor"
+                  aria-hidden="true"
+                  [class]="row.checkClass"
+                >
+                  <path
+                    fill-rule="evenodd"
+                    d="M16.704 5.29a1 1 0 0 1 .006 1.414l-7.5 7.6a1 1 0 0 1-1.42.005l-3.5-3.5a1 1 0 1 1 1.414-1.414l2.79 2.79 6.796-6.889a1 1 0 0 1 1.414-.006Z"
+                    clip-rule="evenodd"
+                  />
+                </svg>
+                @if (itemTemplate(); as tpl) {
+                  <ng-container
+                    [ngTemplateOutlet]="tpl.template"
+                    [ngTemplateOutletContext]="row.context"
+                  />
+                } @else {
+                  <span [class]="optionLabelClasses()">{{ row.label }}</span>
+                }
+              </div>
+            }
+          </div>
+        } @else {
+          <div [class]="emptyClasses()" [style.height.px]="listHeightPx()">{{ panel.emptyText }}</div>
+        }
+      </div>
+    </ng-template>
+
+    <ng-container
+      [ngTemplateOutlet]="panelTpl"
+      [ngTemplateOutletContext]="{ $implicit: sourcePanel() }"
+    />
+
+    <div [class]="controlsClasses()">
+      <button
+        type="button"
+        [class]="moveButtonClasses()"
+        [disabled]="disabled() || sourceMovableKeys().length === 0"
+        [attr.aria-label]="resolvedLabels().moveToTargetLabel"
+        (click)="onMoveToTarget()"
+      >
+        <svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" [class]="moveIconClasses()">
+          <path
+            fill-rule="evenodd"
+            d="M7.21 14.77a.75.75 0 0 1 .02-1.06L11.168 10 7.23 6.29a.75.75 0 1 1 1.04-1.08l4.5 4.25a.75.75 0 0 1 0 1.08l-4.5 4.25a.75.75 0 0 1-1.06-.02Z"
+            clip-rule="evenodd"
+          />
+        </svg>
+      </button>
+
+      @if (!oneWay()) {
+        <button
+          type="button"
+          [class]="moveButtonClasses()"
+          [disabled]="disabled() || targetMovableKeys().length === 0"
+          [attr.aria-label]="resolvedLabels().moveToSourceLabel"
+          (click)="onMoveToSource()"
+        >
+          <svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" [class]="moveIconClasses()">
+            <path
+              fill-rule="evenodd"
+              d="M12.79 5.23a.75.75 0 0 1-.02 1.06L8.832 10l3.938 3.71a.75.75 0 1 1-1.04 1.08l-4.5-4.25a.75.75 0 0 1 0-1.08l4.5-4.25a.75.75 0 0 1 1.06.02Z"
+              clip-rule="evenodd"
+            />
+          </svg>
+        </button>
+      }
+    </div>
+
+    <ng-container
+      [ngTemplateOutlet]="panelTpl"
+      [ngTemplateOutletContext]="{ $implicit: targetPanel() }"
+    />
+  `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: CdkListbox, selector: "[cdkListbox]", inputs: ["id", "tabindex", "cdkListboxValue", "cdkListboxMultiple", "cdkListboxDisabled", "cdkListboxUseActiveDescendant", "cdkListboxOrientation", "cdkListboxCompareWith", "cdkListboxNavigationWrapDisabled", "cdkListboxNavigatesDisabledOptions"], outputs: ["cdkListboxValueChange"], exportAs: ["cdkListbox"] }, { kind: "directive", type: CdkOption, selector: "[cdkOption]", inputs: ["id", "cdkOption", "cdkOptionTypeaheadLabel", "cdkOptionDisabled", "tabindex"], exportAs: ["cdkOption"] }, { kind: "component", type: CheckboxComponent, selector: "tw-checkbox", inputs: ["color", "size", "variant", "disabled", "required", "label", "description", "labelPosition", "name", "id", "aria-label", "aria-labelledby", "aria-describedby", "errorStateMatcher", "checked", "indeterminate"], outputs: ["checkedChange", "indeterminateChange", "change"] }, { kind: "directive", type: InputDirective, selector: "input[twInput], textarea[twInput]", inputs: ["id", "type", "size", "disabled", "required", "readonly", "errorStateMatcher", "aria-describedby", "aria-labelledby"], exportAs: ["twInput"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: TransferComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'tw-transfer',
+                    exportAs: 'twTransfer',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [NgTemplateOutlet, CdkListbox, CdkOption, CheckboxComponent, InputDirective],
+                    providers: [
+                        {
+                            provide: TW_FORM_FIELD_CONTROL,
+                            useExisting: forwardRef(() => TransferComponent),
+                        },
+                    ],
+                    host: {
+                        role: 'group',
+                        '[id]': 'id()',
+                        '[class]': 'rootClasses()',
+                        '[attr.aria-label]': 'ariaLabel() || null',
+                        '[attr.aria-labelledby]': 'resolvedLabelledBy() || null',
+                        '[attr.aria-describedby]': 'resolvedDescribedBy() || null',
+                        '[attr.aria-disabled]': 'disabled() || null',
+                        '[attr.aria-invalid]': 'errorState() || null',
+                        '[attr.data-focused]': 'focused() || null',
+                    },
+                    template: `
+    <!-- One panel, instantiated twice (source, then target) around the controls. -->
+    <ng-template #panelTpl let-panel>
+      <div [class]="panelClasses()">
+        <div [class]="panelHeaderClasses()">
+          @if (showSelectAll()) {
+            <tw-checkbox
+              [size]="checkboxSize()"
+              [checked]="panel.selectAllChecked"
+              [indeterminate]="panel.selectAllIndeterminate"
+              [disabled]="disabled()"
+              [aria-label]="panel.selectAllLabel"
+              (change)="onSelectAll(panel.side, $event)"
+            />
+          }
+          <span [id]="panel.titleId" [class]="panelTitleClasses()">{{ panel.title }}</span>
+          <span [class]="panelCountClasses()">{{ panel.countText }}</span>
+        </div>
+
+        @if (showSearch()) {
+          <div [class]="searchClasses()">
+            <input
+              twInput
+              type="text"
+              [size]="resolvedSize()"
+              [value]="panel.query"
+              [disabled]="disabled()"
+              [attr.placeholder]="panel.searchPlaceholder"
+              [attr.aria-label]="panel.searchPlaceholder"
+              (input)="onSearch(panel.side, $event)"
+            />
+          </div>
+        }
+
+        <!-- The cdkListbox is rendered only when it has options. An empty
+             role="listbox" violates aria-required-children, so an empty panel
+             shows a plain message region instead. -->
+        @if (panel.rows.length > 0) {
+          <div
+            cdkListbox
+            [cdkListboxMultiple]="true"
+            [cdkListboxValue]="panel.checkedValue"
+            [cdkListboxDisabled]="disabled()"
+            [cdkListboxCompareWith]="compareKeys"
+            [class]="listClasses()"
+            [style.height.px]="listHeightPx()"
+            [attr.aria-labelledby]="panel.titleId"
+            (cdkListboxValueChange)="onCheckedChange(panel.side, $event)"
+          >
+            @for (row of panel.rows; track row.key) {
+              <div
+                [cdkOption]="row.key"
+                [cdkOptionDisabled]="row.disabled"
+                [cdkOptionTypeaheadLabel]="row.label"
+                [class]="row.optionClass"
+              >
+                <svg
+                  viewBox="0 0 20 20"
+                  fill="currentColor"
+                  aria-hidden="true"
+                  [class]="row.checkClass"
+                >
+                  <path
+                    fill-rule="evenodd"
+                    d="M16.704 5.29a1 1 0 0 1 .006 1.414l-7.5 7.6a1 1 0 0 1-1.42.005l-3.5-3.5a1 1 0 1 1 1.414-1.414l2.79 2.79 6.796-6.889a1 1 0 0 1 1.414-.006Z"
+                    clip-rule="evenodd"
+                  />
+                </svg>
+                @if (itemTemplate(); as tpl) {
+                  <ng-container
+                    [ngTemplateOutlet]="tpl.template"
+                    [ngTemplateOutletContext]="row.context"
+                  />
+                } @else {
+                  <span [class]="optionLabelClasses()">{{ row.label }}</span>
+                }
+              </div>
+            }
+          </div>
+        } @else {
+          <div [class]="emptyClasses()" [style.height.px]="listHeightPx()">{{ panel.emptyText }}</div>
+        }
+      </div>
+    </ng-template>
+
+    <ng-container
+      [ngTemplateOutlet]="panelTpl"
+      [ngTemplateOutletContext]="{ $implicit: sourcePanel() }"
+    />
+
+    <div [class]="controlsClasses()">
+      <button
+        type="button"
+        [class]="moveButtonClasses()"
+        [disabled]="disabled() || sourceMovableKeys().length === 0"
+        [attr.aria-label]="resolvedLabels().moveToTargetLabel"
+        (click)="onMoveToTarget()"
+      >
+        <svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" [class]="moveIconClasses()">
+          <path
+            fill-rule="evenodd"
+            d="M7.21 14.77a.75.75 0 0 1 .02-1.06L11.168 10 7.23 6.29a.75.75 0 1 1 1.04-1.08l4.5 4.25a.75.75 0 0 1 0 1.08l-4.5 4.25a.75.75 0 0 1-1.06-.02Z"
+            clip-rule="evenodd"
+          />
+        </svg>
+      </button>
+
+      @if (!oneWay()) {
+        <button
+          type="button"
+          [class]="moveButtonClasses()"
+          [disabled]="disabled() || targetMovableKeys().length === 0"
+          [attr.aria-label]="resolvedLabels().moveToSourceLabel"
+          (click)="onMoveToSource()"
+        >
+          <svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" [class]="moveIconClasses()">
+            <path
+              fill-rule="evenodd"
+              d="M12.79 5.23a.75.75 0 0 1-.02 1.06L8.832 10l3.938 3.71a.75.75 0 1 1-1.04 1.08l-4.5-4.25a.75.75 0 0 1 0-1.08l4.5-4.25a.75.75 0 0 1 1.06.02Z"
+              clip-rule="evenodd"
+            />
+          </svg>
+        </button>
+      }
+    </div>
+
+    <ng-container
+      [ngTemplateOutlet]="panelTpl"
+      [ngTemplateOutletContext]="{ $implicit: targetPanel() }"
+    />
+  `,
+                }]
+        }], ctorParameters: () => [], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], keyFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "keyFn", required: true }] }], labelFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelFn", required: false }] }], labels: [{ type: i0.Input, args: [{ isSignal: true, alias: "labels", required: false }] }], display: [{ type: i0.Input, args: [{ isSignal: true, alias: "display", required: false }] }], behavior: [{ type: i0.Input, args: [{ isSignal: true, alias: "behavior", required: false }] }], disabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], requiredInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], idInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], ariaLabelledby: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-labelledby", required: false }] }], ariaDescribedby: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-describedby", required: false }] }], errorStateMatcher: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorStateMatcher", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], moved: [{ type: i0.Output, args: ["moved"] }], itemTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => TransferItemDefDirective), { isSignal: true }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { TransferComponent, TransferItemDefDirective };
+//# sourceMappingURL=cdevhub-ngx-tw-transfer.mjs.map