@slotted/angular 0.0.0-stage → 0.1.0-beta.1

package/fesm2022/slotted-angular-transfer.mjs

@@ -0,0 +1,1406 @@
+import { NgTemplateOutlet } from '@angular/common';
+import * as i0 from '@angular/core';
+import { InjectionToken, inject, Injectable, Directive, input, ElementRef, afterNextRender, model, booleanAttribute, numberAttribute, output, DestroyRef, HostAttributeToken, contentChild, TemplateRef, viewChildren, computed, signal, afterEveryRender, forwardRef, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { NG_VALUE_ACCESSOR, NG_VALIDATORS } from '@angular/forms';
+import { injectMessages } from '@slotted/angular/i18n';
+import { SlGlyph, SlIcon } from '@slotted/angular/icon';
+import { SlButton, SlButtonEnd, SlButtonStart } from '@slotted/angular/button';
+import { SlCheckbox } from '@slotted/angular/checkbox';
+import { SlListbox, SlListboxDescription, SlListboxEmpty, SlListboxIndicator, SlListboxLabel, SlListboxLoader, SlListboxOptionContent } from '@slotted/angular/listbox';
+import { SlSegment, SlSegmentedControl } from '@slotted/angular/segmented-control';
+import { SlTextField, SlTextFieldInput, SlTextFieldStart } from '@slotted/angular/text-field';
+import { createFilter } from '@slotted/core/collection';
+import { createDragController } from '@slotted/core/drag';
+import { transferMessages, dragMessages } from '@slotted/core/i18n';
+import { getLiveAnnouncer } from '@slotted/core/live-announcer';
+import { partitionKeys, keysToMove, moveKeys, reorderKeys, toggleVisibleSelection, reorderKeysTo } from '@slotted/core/transfer';
+
+const FALLBACK = {
+    size: 'md',
+    layout: 'auto',
+    searchable: true,
+    selectAll: true,
+    reorderable: false,
+    rows: 8,
+};
+const TRANSFER_DEFAULTS = new InjectionToken('slotted transfer defaults', {
+    providedIn: 'root',
+    factory: () => FALLBACK,
+});
+/**
+ * An application decides once how its transfers look. A transfer that states
+ * any of it itself still wins. The words come from the language in force
+ * (`provideSlotted`).
+ */
+function provideTransferDefaults(defaults) {
+    return {
+        provide: TRANSFER_DEFAULTS,
+        useFactory: () => ({ ...FALLBACK, ...defaults }),
+    };
+}
+function injectTransferDefaults() {
+    return inject(TRANSFER_DEFAULTS);
+}
+class SlTransferIdFactory {
+    count = 0;
+    next() {
+        this.count += 1;
+        return `slotted-transfer-${this.count}`;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTransferIdFactory, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTransferIdFactory, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTransferIdFactory, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+const SIDES = ['source', 'target'];
+const EMPTY = [];
+/** The step one below the family's, for the search field and the buttons. */
+const INNER_SIZE = { sm: 'sm', md: 'sm', lg: 'md' };
+/** A click with no coordinates is a key. */
+function pressReason(event) {
+    return event.detail === 0 ? 'keyboard' : 'pointer';
+}
+function escapeValue(value) {
+    return typeof CSS !== 'undefined' && typeof CSS.escape === 'function'
+        ? CSS.escape(value)
+        : value.replace(/["\\]/g, '\\$&');
+}
+const sameKeys = (a, b) => a.length === b.length && a.every((key, index) => key === b[index]);
+/** A request whose `cancel()` the family reads back after emitting it. */
+function makeRequest(value, previous, reason, source, extra) {
+    let cancelled = false;
+    return {
+        value,
+        previous,
+        reason,
+        source,
+        ...extra,
+        get cancelled() {
+            return cancelled;
+        },
+        cancel() {
+            cancelled = true;
+        },
+    };
+}
+const NO_DRAG = { items: EMPTY, over: null, index: null, from: null };
+/**
+ * The consumer's `<ng-template slTransferItem let-item let-side="side">`: what
+ * one option holds besides its check. The listbox family's label, description
+ * and meta directives are the parts to write it with.
+ */
+class SlTransferItem {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTransferItem, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlTransferItem, isStandalone: true, selector: "ng-template[slTransferItem]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTransferItem, decorators: [{
+            type: Directive,
+            args: [{ selector: 'ng-template[slTransferItem]', standalone: true }]
+        }] });
+/** `<ng-template slTransferFooter let-side>`: content under a pane's list. */
+class SlTransferFooter {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTransferFooter, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlTransferFooter, isStandalone: true, selector: "ng-template[slTransferFooter]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTransferFooter, decorators: [{
+            type: Directive,
+            args: [{ selector: 'ng-template[slTransferFooter]', standalone: true }]
+        }] });
+/**
+ * Writes this family's part name on a button. `slButton` writes
+ * `data-part="root"` as a static host attribute, which erases the part the
+ * template wrote, so it is written back after the first render.
+ */
+class SlTransferPart {
+    part = input.required({ ...(ngDevMode ? { debugName: "part" } : /* istanbul ignore next */ {}), alias: 'slTransferPart' });
+    host = inject(ElementRef);
+    constructor() {
+        afterNextRender(() => this.host.nativeElement.setAttribute('data-part', this.part()));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTransferPart, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.7", type: SlTransferPart, isStandalone: true, selector: "[slTransferPart]", inputs: { part: { classPropertyName: "part", publicName: "slTransferPart", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTransferPart, decorators: [{
+            type: Directive,
+            args: [{ selector: '[slTransferPart]', standalone: true }]
+        }], ctorParameters: () => [], propDecorators: { part: [{ type: i0.Input, args: [{ isSignal: true, alias: "slTransferPart", required: true }] }] } });
+/**
+ * Two lists and the moves between them: available on one side, chosen on the
+ * other, each a listbox with a search, a count and a select-all box, and the
+ * move buttons between them.
+ *
+ * The host is the root. Its value is `targetKeys`, the keys in the chosen
+ * list; a form reads the same array through `ControlValueAccessor`, and a
+ * `required` transfer reports `{ required: true }` while the list is empty.
+ */
+class SlTransfer {
+    /* ── Inputs ───────────────────────────────────────────────────────── */
+    /** The whole collection, both sides. */
+    items = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+    getKey = input((item) => item.key, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "getKey" }] : /* istanbul ignore next */ []));
+    getLabel = input((item) => item.label, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "getLabel" }] : /* istanbul ignore next */ []));
+    getDescription = input((item) => item.description, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "getDescription" }] : /* istanbul ignore next */ []));
+    isItemDisabled = input((item) => item.disabled === true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isItemDisabled" }] : /* istanbul ignore next */ []));
+    /** Whether an item answers a query. Defaults to a locale-aware contains. */
+    filter = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "filter" }] : /* istanbul ignore next */ []));
+    /** The keys in the target; two-way, so a template may bind it directly. */
+    targetKeys = model(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "targetKeys" }] : /* istanbul ignore next */ []));
+    defaultTargetKeys = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "defaultTargetKeys" }] : /* istanbul ignore next */ []));
+    selectedKeys = model(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectedKeys" }] : /* istanbul ignore next */ []));
+    defaultSelectedKeys = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "defaultSelectedKeys" }] : /* istanbul ignore next */ []));
+    sourceQuery = model(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "sourceQuery" }] : /* istanbul ignore next */ []));
+    defaultSourceQuery = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "defaultSourceQuery" }] : /* istanbul ignore next */ []));
+    targetQuery = model(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "targetQuery" }] : /* istanbul ignore next */ []));
+    defaultTargetQuery = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "defaultTargetQuery" }] : /* istanbul ignore next */ []));
+    /** The pane shown in steps. */
+    pane = model(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pane" }] : /* istanbul ignore next */ []));
+    defaultPane = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "defaultPane" }] : /* istanbul ignore next */ []));
+    size = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    layout = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "layout" }] : /* istanbul ignore next */ []));
+    searchable = input(undefined, { ...(ngDevMode ? { debugName: "searchable" } : /* istanbul ignore next */ {}), transform: (value) => (value === undefined ? undefined : booleanAttribute(value)) });
+    selectAll = input(undefined, { ...(ngDevMode ? { debugName: "selectAll" } : /* istanbul ignore next */ {}), transform: (value) => (value === undefined ? undefined : booleanAttribute(value)) });
+    reorderable = input(undefined, { ...(ngDevMode ? { debugName: "reorderable" } : /* istanbul ignore next */ {}), transform: (value) => (value === undefined ? undefined : booleanAttribute(value)) });
+    rows = input(undefined, { ...(ngDevMode ? { debugName: "rows" } : /* istanbul ignore next */ {}), transform: (value) => (value === undefined ? undefined : numberAttribute(value)) });
+    virtual = input(false, { ...(ngDevMode ? { debugName: "virtual" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    itemSize = input(undefined, { ...(ngDevMode ? { debugName: "itemSize" } : /* istanbul ignore next */ {}), transform: (value) => (value === undefined ? undefined : numberAttribute(value)) });
+    /** Options rendered either side of a windowed viewport. */
+    overscan = input(undefined, { ...(ngDevMode ? { debugName: "overscan" } : /* istanbul ignore next */ {}), transform: (value) => (value === undefined ? undefined : numberAttribute(value)) });
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    readOnly = input(false, { ...(ngDevMode ? { debugName: "readOnly" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    required = input(false, { ...(ngDevMode ? { debugName: "required" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    invalid = input(false, { ...(ngDevMode ? { debugName: "invalid" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    loading = input(false, { ...(ngDevMode ? { debugName: "loading" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    hasMore = input(false, { ...(ngDevMode ? { debugName: "hasMore" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Submits one hidden input per target key. */
+    name = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+    /**
+     * Words laid over the catalog of the language in force, key by key: the
+     * panes' names, the controls, the counts and the announcements.
+     */
+    messages = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "messages" }] : /* istanbul ignore next */ []));
+    /* ── Outputs ──────────────────────────────────────────────────────── */
+    /** Before the target moves, with the direction, the keys and the reason. */
+    targetKeysChangeRequest = output();
+    selectedKeysChangeRequest = output();
+    sourceQueryChangeRequest = output();
+    targetQueryChangeRequest = output();
+    paneChangeRequest = output();
+    /** Asked when the source list reaches the end of what has been loaded. */
+    loadMore = output();
+    /* ── State ────────────────────────────────────────────────────────── */
+    defaults = injectTransferDefaults();
+    base = inject(SlTransferIdFactory).next();
+    host = inject(ElementRef);
+    destroyRef = inject(DestroyRef);
+    /** A role the consumer wrote is never replaced by the family's. */
+    writtenRole = inject(new HostAttributeToken('role'), { optional: true });
+    itemTemplate = contentChild(SlTransferItem, { ...(ngDevMode ? { debugName: "itemTemplate" } : /* istanbul ignore next */ {}), read: TemplateRef });
+    footerTemplate = contentChild(SlTransferFooter, { ...(ngDevMode ? { debugName: "footerTemplate" } : /* istanbul ignore next */ {}), read: TemplateRef });
+    listboxes = viewChildren(SlListbox, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "listboxes" }] : /* istanbul ignore next */ []));
+    sides = SIDES;
+    pressReason = pressReason;
+    /** The family's words in the language in force, with this transfer's `messages` laid over them. */
+    t = injectMessages(transferMessages, this.messages);
+    /** What a keyboard drag between the panes says, in the language in force. */
+    dragT = injectMessages(dragMessages);
+    resolvedSize = computed(() => this.size() ?? this.defaults.size, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedSize" }] : /* istanbul ignore next */ []));
+    innerSize = computed(() => INNER_SIZE[this.resolvedSize()], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "innerSize" }] : /* istanbul ignore next */ []));
+    resolvedLayout = computed(() => this.layout() ?? this.defaults.layout, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedLayout" }] : /* istanbul ignore next */ []));
+    resolvedSearchable = computed(() => this.searchable() ?? this.defaults.searchable, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedSearchable" }] : /* istanbul ignore next */ []));
+    resolvedSelectAll = computed(() => this.selectAll() ?? this.defaults.selectAll, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedSelectAll" }] : /* istanbul ignore next */ []));
+    resolvedReorderable = computed(() => this.reorderable() ?? this.defaults.reorderable, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedReorderable" }] : /* istanbul ignore next */ []));
+    resolvedRows = computed(() => this.rows() ?? this.defaults.rows, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedRows" }] : /* istanbul ignore next */ []));
+    formDisabled = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "formDisabled" }] : /* istanbul ignore next */ []));
+    isDisabled = computed(() => this.disabled() || this.formDisabled(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+    isInvalid = computed(() => this.invalid(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isInvalid" }] : /* istanbul ignore next */ []));
+    frozen = computed(() => this.isDisabled() || this.readOnly(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "frozen" }] : /* istanbul ignore next */ []));
+    /** The committed values: the bound one, or the default. */
+    currentTargetKeys = computed(() => this.targetKeys() ?? this.defaultTargetKeys() ?? EMPTY, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "currentTargetKeys" }] : /* istanbul ignore next */ []));
+    currentSelectedKeys = computed(() => this.selectedKeys() ?? this.defaultSelectedKeys() ?? EMPTY, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "currentSelectedKeys" }] : /* istanbul ignore next */ []));
+    currentSourceQuery = computed(() => this.sourceQuery() ?? this.defaultSourceQuery() ?? '', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "currentSourceQuery" }] : /* istanbul ignore next */ []));
+    currentTargetQuery = computed(() => this.targetQuery() ?? this.defaultTargetQuery() ?? '', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "currentTargetQuery" }] : /* istanbul ignore next */ []));
+    currentPane = computed(() => this.pane() ?? this.defaultPane() ?? 'source', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "currentPane" }] : /* istanbul ignore next */ []));
+    byKey = computed(() => new Map(this.items().map((item) => [this.getKey()(item), item])), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "byKey" }] : /* istanbul ignore next */ []));
+    allKeys = computed(() => this.items().map(this.getKey()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "allKeys" }] : /* istanbul ignore next */ []));
+    disabledKeys = computed(() => {
+        const disabled = this.isItemDisabled();
+        const key = this.getKey();
+        return new Set(this.items()
+            .filter((item) => disabled(item))
+            .map(key));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabledKeys" }] : /* istanbul ignore next */ []));
+    partition = computed(() => partitionKeys(this.allKeys(), this.currentTargetKeys(), this.resolvedReorderable()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "partition" }] : /* istanbul ignore next */ []));
+    matcher = createFilter();
+    visible = computed(() => {
+        const partition = this.partition();
+        const byKey = this.byKey();
+        const filter = this.filter();
+        const getLabel = this.getLabel();
+        const getDescription = this.getDescription();
+        const pick = (side, typed) => {
+            const query = typed.trim();
+            if (query === '')
+                return partition[side];
+            return partition[side].filter((key) => {
+                const item = byKey.get(key);
+                if (item === undefined)
+                    return this.matcher.contains(key, query);
+                if (filter)
+                    return filter(item, query, side);
+                return (this.matcher.contains(getLabel(item), query) ||
+                    this.matcher.contains(getDescription(item) ?? '', query));
+            });
+        };
+        return {
+            source: pick('source', this.currentSourceQuery()),
+            target: pick('target', this.currentTargetQuery()),
+        };
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []));
+    entries = computed(() => {
+        const byKey = this.byKey();
+        const visible = this.visible();
+        const build = (side) => visible[side].map((key) => ({ key, item: byKey.get(key) }));
+        return { source: build('source'), target: build('target') };
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "entries" }] : /* istanbul ignore next */ []));
+    entriesOf(side) {
+        return this.entries()[side];
+    }
+    isEmpty(side) {
+        return this.visible()[side].length === 0;
+    }
+    entryKey = (entry) => entry.key;
+    entryLabel = (entry) => this.labelOf(entry.key);
+    entryDisabled = (entry) => entry.item !== undefined && this.isItemDisabled()(entry.item);
+    canReorder = computed(() => this.resolvedReorderable() && this.currentTargetQuery().trim() === '', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "canReorder" }] : /* istanbul ignore next */ []));
+    drag = signal(NO_DRAG, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "drag" }] : /* istanbul ignore next */ []));
+    dragging = computed(() => new Set(this.drag().items), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dragging" }] : /* istanbul ignore next */ []));
+    dropOffset = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dropOffset" }] : /* istanbul ignore next */ []));
+    constructor() {
+        /* The APG keys a dual list adds, taken before the listbox's own. */
+        const onKeyDown = (event) => this.onListKeyDown(event);
+        afterNextRender(() => {
+            this.host.nativeElement.addEventListener('keydown', onKeyDown, true);
+            this.createController();
+        });
+        this.destroyRef.onDestroy(() => {
+            this.host.nativeElement.removeEventListener('keydown', onKeyDown, true);
+            this.teardown?.();
+        });
+        afterEveryRender(() => {
+            this.nameSelectAll();
+            this.syncDraggables();
+            const side = this.pendingFocus;
+            if (side !== null) {
+                this.pendingFocus = null;
+                this.listboxOf(side)?.focus();
+            }
+            this.measureDropLine();
+        });
+    }
+    /* ── Reading ──────────────────────────────────────────────────────── */
+    title(side) {
+        return side === 'target' ? this.t('target') : this.t('source');
+    }
+    titleId(side) {
+        return `${this.base}-${side}-title`;
+    }
+    labelOf(key) {
+        const item = this.byKey().get(key);
+        return item === undefined ? key : this.getLabel()(item);
+    }
+    descriptionOf(item) {
+        return this.getDescription()(item);
+    }
+    queryOf(side) {
+        return side === 'source' ? this.currentSourceQuery() : this.currentTargetQuery();
+    }
+    typed(side) {
+        return this.queryOf(side).trim() !== '';
+    }
+    enabledVisible(side) {
+        const disabled = this.disabledKeys();
+        return this.visible()[side].filter((key) => !disabled.has(key));
+    }
+    selectionFor(side) {
+        const selected = new Set(this.currentSelectedKeys());
+        return this.visible()[side].filter((key) => selected.has(key));
+    }
+    selectedToMove(side) {
+        return keysToMove({
+            visible: this.visible()[side],
+            selected: this.currentSelectedKeys(),
+            disabled: this.disabledKeys(),
+            active: null,
+        });
+    }
+    selectAllState(side) {
+        const reach = this.enabledVisible(side);
+        const selected = new Set(this.currentSelectedKeys());
+        const chosen = reach.filter((key) => selected.has(key)).length;
+        if (chosen === 0)
+            return 'none';
+        return chosen === reach.length ? 'all' : 'some';
+    }
+    countText(side) {
+        const keys = this.partition()[side];
+        if (this.typed(side)) {
+            return this.t('countFiltered', { shown: this.visible()[side].length, total: keys.length });
+        }
+        const selected = new Set(this.currentSelectedKeys());
+        const chosen = keys.filter((key) => selected.has(key)).length;
+        return chosen > 0
+            ? this.t('countSelected', { selected: chosen, total: keys.length })
+            : this.t('count', { total: keys.length });
+    }
+    paneCount(side) {
+        return this.t('paneCount', {
+            pane: this.title(side),
+            total: this.partition()[side].length,
+        });
+    }
+    dropTarget(side) {
+        const drag = this.drag();
+        return drag.over === side && (drag.from !== side || side === 'target');
+    }
+    listboxOf(side) {
+        return this.listboxes()[side === 'source' ? 0 : 1];
+    }
+    listOf(side) {
+        return this.host.nativeElement.querySelector(`[data-part="pane"][data-side="${side}"] > [data-part="list"]`);
+    }
+    /**
+     * The option the keyboard is on: the option holding focus under the roving
+     * model, where Tab lands on the tab stop without the listbox calling it
+     * active, and the listbox's active option under `aria-activedescendant`,
+     * where focus is on the listbox itself.
+     */
+    activeIn(side) {
+        const list = this.listOf(side);
+        const focused = list?.ownerDocument.activeElement;
+        if (list && focused instanceof HTMLElement && list.contains(focused)) {
+            const key = focused.closest('[data-part="option"]')?.dataset['key'];
+            if (key !== undefined)
+                return key;
+        }
+        return this.listboxOf(side)?.getActiveKey() ?? null;
+    }
+    announce(message) {
+        if (message !== '')
+            getLiveAnnouncer(this.host.nativeElement.ownerDocument).announce(message);
+    }
+    /* ── Requests ─────────────────────────────────────────────────────── */
+    pendingFocus = null;
+    /**
+     * Which option the keyboard is on in each list. The family holds it rather
+     * than each listbox, because a move has to say where the keyboard goes next:
+     * the APG example sends it to the first option after the moved ones that is
+     * still in the list, and the listbox cannot know which of its options left
+     * on purpose.
+     */
+    actives = signal({
+        source: null,
+        target: null,
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "actives" }] : /* istanbul ignore next */ []));
+    /* A key that left the list is no tab stop: the list would be unreachable by Tab. */
+    activeOf(side) {
+        const key = this.actives()[side];
+        return key !== null && this.visible()[side].includes(key) ? key : null;
+    }
+    setActive(side, key) {
+        if (this.actives()[side] === key)
+            return;
+        this.actives.update((current) => ({ ...current, [side]: key }));
+    }
+    /* Tab lands on the option holding the tab stop, and the keyboard is on it from then on. */
+    onListFocus(side, event) {
+        const key = event.target?.closest('[data-part="option"]')
+            ?.dataset['key'];
+        if (key !== undefined)
+            this.setActive(side, key);
+    }
+    requestTarget(next, reason, source, extra) {
+        const previous = this.currentTargetKeys();
+        if (sameKeys(previous, next))
+            return false;
+        const request = makeRequest(next, previous, reason, source, extra);
+        this.targetKeysChangeRequest.emit(request);
+        if (request.cancelled)
+            return false;
+        this.targetKeys.set(next);
+        this.onChangeFn(next);
+        this.onTouchedFn();
+        return true;
+    }
+    requestSelected(next, reason, source) {
+        const previous = this.currentSelectedKeys();
+        if (sameKeys(previous, next))
+            return;
+        const request = makeRequest(next, previous, reason, source, {});
+        this.selectedKeysChangeRequest.emit(request);
+        if (!request.cancelled)
+            this.selectedKeys.set(next);
+    }
+    move(keys, to, reason, source, index) {
+        if (this.frozen() || keys.length === 0)
+            return;
+        const from = to === 'target' ? 'source' : 'target';
+        const next = moveKeys({
+            allKeys: this.allKeys(),
+            targetKeys: this.currentTargetKeys(),
+            keys,
+            to,
+            reorderable: this.resolvedReorderable(),
+            index,
+        });
+        const visibleBefore = this.visible()[from];
+        if (!this.requestTarget(next, reason, source, { direction: to, keys }))
+            return;
+        const moving = new Set(keys);
+        this.requestSelected(this.currentSelectedKeys().filter((key) => !moving.has(key)), reason, source);
+        const pane = this.title(to);
+        this.announce(keys.length === 1
+            ? this.t('movedOne', { item: this.labelOf(keys[0]), pane })
+            : this.t('moved', { count: keys.length, pane }));
+        const list = this.listOf(from);
+        if (!list?.contains(list.ownerDocument.activeElement))
+            return;
+        /* The keyboard stays in the list it moved from, on the first option after
+           the moved ones that is still there, then on the last one before them;
+           a list left empty hands it to the other. */
+        const first = visibleBefore.findIndex((key) => moving.has(key));
+        const after = first === -1 ? [] : visibleBefore.slice(first);
+        const before = first === -1 ? visibleBefore : visibleBefore.slice(0, first);
+        const disabled = this.disabledKeys();
+        const stays = (key) => !moving.has(key) && !disabled.has(key);
+        const neighbour = after.find(stays) ?? [...before].reverse().find(stays) ?? null;
+        if (neighbour === null) {
+            this.pendingFocus = to;
+            return;
+        }
+        this.setActive(from, neighbour);
+        this.pendingFocus = from;
+    }
+    reorder(keys, next, reason, source) {
+        if (this.frozen() || keys.length === 0 || sameKeys(next, this.partition().target))
+            return;
+        if (!this.requestTarget(next, reason, source, { direction: 'reorder', keys }))
+            return;
+        this.announce(this.t('reordered', {
+            item: this.labelOf(keys[0]),
+            position: next.indexOf(keys[0]) + 1,
+        }));
+        const list = this.listOf('target');
+        if (!list?.contains(list.ownerDocument.activeElement))
+            return;
+        const held = this.activeIn('target');
+        if (held !== null)
+            this.setActive('target', held);
+        this.pendingFocus = 'target';
+    }
+    shift(delta, reason, source, withActive) {
+        if (!this.canReorder())
+            return;
+        const keys = keysToMove({
+            visible: this.visible().target,
+            selected: this.currentSelectedKeys(),
+            disabled: this.disabledKeys(),
+            active: withActive ? this.activeIn('target') : null,
+        });
+        this.reorder(keys, reorderKeys(this.partition().target, keys, delta), reason, source);
+    }
+    onPaneSelection(side, request) {
+        const value = request.value;
+        const chosen = Array.isArray(value) ? value : value === null ? [] : [value];
+        const shown = new Set(this.visible()[side]);
+        const next = [...this.currentSelectedKeys().filter((key) => !shown.has(key)), ...chosen];
+        const reason = request.reason;
+        const mapped = reason === 'pointer' || reason === 'keyboard' || reason === 'programmatic'
+            ? reason
+            : 'select';
+        this.requestSelected(next, mapped, request.source);
+    }
+    onSelectAll(side, request) {
+        this.requestSelected(toggleVisibleSelection(this.currentSelectedKeys(), this.visible()[side], this.disabledKeys(), request.value), 'select', request.source);
+    }
+    onQuery(side, change) {
+        const reason = change.reason === 'clear' ? 'clear' : 'keyboard';
+        const previous = this.queryOf(side);
+        if (previous === change.value)
+            return;
+        const request = makeRequest(change.value, previous, reason, change.source, {});
+        if (side === 'source')
+            this.sourceQueryChangeRequest.emit(request);
+        else
+            this.targetQueryChangeRequest.emit(request);
+        if (request.cancelled)
+            return;
+        if (side === 'source')
+            this.sourceQuery.set(change.value);
+        else
+            this.targetQuery.set(change.value);
+    }
+    onSwitch(change) {
+        const next = change.value;
+        if (next === undefined || next === this.currentPane())
+            return;
+        const reason = change.reason === 'keyboard' ? 'keyboard' : 'pointer';
+        const request = makeRequest(next, this.currentPane(), reason, change.source, {});
+        this.paneChangeRequest.emit(request);
+        if (!request.cancelled)
+            this.pane.set(next);
+    }
+    onListKeyDown(event) {
+        if (event.defaultPrevented || this.frozen())
+            return;
+        const target = event.target;
+        const list = target?.closest('[data-part="list"][data-side]');
+        if (!list || !this.host.nativeElement.contains(list))
+            return;
+        const side = list.dataset['side'];
+        const other = side === 'source' ? 'target' : 'source';
+        const pick = () => keysToMove({
+            visible: this.visible()[side],
+            selected: this.currentSelectedKeys(),
+            disabled: this.disabledKeys(),
+            active: this.activeIn(side),
+        });
+        const modifier = event.ctrlKey || event.metaKey;
+        const element = this.host.nativeElement;
+        const rtl = element.ownerDocument.defaultView?.getComputedStyle(element).direction === 'rtl';
+        const end = rtl ? 'ArrowLeft' : 'ArrowRight';
+        const start = rtl ? 'ArrowRight' : 'ArrowLeft';
+        if (event.key === 'Enter' && !modifier && !event.altKey && !event.shiftKey) {
+            event.preventDefault();
+            this.move(pick(), other, 'keyboard', event);
+        }
+        else if (side === 'target' && (event.key === 'Delete' || event.key === 'Backspace')) {
+            event.preventDefault();
+            this.move(pick(), 'source', 'keyboard', event);
+        }
+        else if (modifier && !event.altKey && (event.key === end || event.key === start)) {
+            const to = event.key === end ? 'target' : 'source';
+            event.preventDefault();
+            if (to !== side)
+                this.move(pick(), to, 'keyboard', event);
+        }
+        else if (side === 'target' &&
+            event.altKey &&
+            (event.key === 'ArrowUp' || event.key === 'ArrowDown')) {
+            event.preventDefault();
+            this.shift(event.key === 'ArrowUp' ? -1 : 1, 'keyboard', event, true);
+        }
+    }
+    /**
+     * The select-all box is named on its input. The checkbox family takes its
+     * name from its label and has no input for one, and a label holding a
+     * visually hidden sentence would take the box's width and halo with it; the
+     * empty label is the case that family already draws.
+     */
+    nameSelectAll() {
+        for (const side of SIDES) {
+            const control = this.host.nativeElement.querySelector(`[data-part="pane"][data-side="${side}"] [data-part="select-all"] input`);
+            const name = this.t('selectAll', { pane: this.title(side) });
+            if (control && control.getAttribute('aria-label') !== name) {
+                control.setAttribute('aria-label', name);
+            }
+        }
+    }
+    /* ── The handle ───────────────────────────────────────────────────── */
+    /** Moves focus into a pane's list; the source's when no side is named. */
+    focus(side = 'source') {
+        this.listboxOf(side)?.focus();
+    }
+    /** Reveals an item in whichever pane holds it. */
+    scrollToKey(key) {
+        const side = this.partition().target.includes(key) ? 'target' : 'source';
+        this.listboxOf(side)?.scrollToKey(key);
+    }
+    /* ── The drag ─────────────────────────────────────────────────────── */
+    controller = null;
+    teardown = null;
+    draggables = new Map();
+    createController() {
+        const root = this.host.nativeElement;
+        const listboxIn = (side) => root.querySelector(`[data-part="pane"][data-side="${side}"] [data-ui="listbox"]`);
+        const created = createDragController({
+            document: root.ownerDocument,
+            preview: false,
+            restoreFocus: false,
+            autoScroll: { axis: 'y' },
+            t: this.dragT,
+            /* The move says what happened once, in the family's own words. */
+            silent: ['moved', 'dropped'],
+            onDrop: ({ items: carried, source, target, reason, event }) => {
+                const from = source.container;
+                const to = target.container;
+                const why = reason === 'keyboard' ? 'keyboard' : 'pointer';
+                const shown = this.visible().target;
+                const full = this.partition().target;
+                const indexInTarget = () => {
+                    if (target.kind !== 'between')
+                        return full.length;
+                    const anchor = shown[target.index];
+                    if (anchor !== undefined)
+                        return full.indexOf(anchor);
+                    const last = shown[shown.length - 1];
+                    return last === undefined ? full.length : full.indexOf(last) + 1;
+                };
+                if (from !== to) {
+                    this.move(carried, to, why, event, to === 'target' ? indexInTarget() : undefined);
+                }
+                else if (to === 'target') {
+                    this.reorder(carried, reorderKeysTo(full, carried, indexInTarget()), why, event);
+                }
+            },
+        });
+        const unregister = SIDES.map((side) => created.registerContainer({
+            key: side,
+            items: () => this.visible()[side],
+            orientation: 'vertical',
+            element: () => listboxIn(side),
+            itemElement: (key) => listboxIn(side)?.querySelector(`[data-part="option"][data-key="${escapeValue(key)}"]`) ??
+                null,
+            accepts: (state, target) => {
+                if (state.source?.container !== target.container)
+                    return true;
+                return target.container === 'target' && this.canReorder();
+            },
+            disabled: () => this.frozen(),
+            label: () => this.title(side),
+            itemLabel: (key) => this.labelOf(key),
+        }));
+        /* The click the browser fires after a pointer drag is the drag's, not a
+           press on the option: with the pointer captured it lands on the option
+           that was carried and would toggle its selection. */
+        let swallow = false;
+        let wasDragging = null;
+        const onClick = (event) => {
+            if (!swallow)
+                return;
+            swallow = false;
+            event.preventDefault();
+            event.stopPropagation();
+        };
+        root.addEventListener('click', onClick, true);
+        const unsubscribe = created.subscribe((next) => {
+            if (next.status !== 'dragging') {
+                if (wasDragging === 'pointer') {
+                    swallow = true;
+                    window.setTimeout(() => {
+                        swallow = false;
+                    }, 0);
+                }
+                wasDragging = null;
+                this.drag.set(NO_DRAG);
+                return;
+            }
+            wasDragging = next.reason === 'pointer' ? 'pointer' : 'other';
+            const target = next.target;
+            this.drag.set({
+                items: next.items,
+                from: next.source?.container ?? null,
+                over: target && next.valid ? target.container : null,
+                index: target && target.kind === 'between' && next.valid ? target.index : null,
+            });
+        });
+        this.controller = created;
+        this.teardown = () => {
+            root.removeEventListener('click', onClick, true);
+            unsubscribe();
+            for (const off of unregister)
+                off();
+            created.destroy();
+            this.controller = null;
+            for (const detach of this.draggables.values())
+                detach();
+            this.draggables.clear();
+        };
+        this.syncDraggables();
+    }
+    /* Every option is a draggable, and carries its pane's selection when it is in it. */
+    syncDraggables() {
+        const created = this.controller;
+        if (!created)
+            return;
+        const root = this.host.nativeElement;
+        const seen = new Set();
+        for (const side of SIDES) {
+            const nodes = root.querySelectorAll(`[data-part="pane"][data-side="${side}"] [data-part="option"][data-key]`);
+            for (const node of nodes) {
+                seen.add(node);
+                if (this.draggables.has(node))
+                    continue;
+                const key = node.dataset['key'];
+                const detach = created.attachDraggable(node, {
+                    container: side,
+                    key,
+                    items: () => {
+                        const carried = this.selectedToMove(side);
+                        return carried.includes(key) ? carried : [key];
+                    },
+                    disabled: () => this.frozen() || this.disabledKeys().has(key),
+                    distance: 4,
+                });
+                this.draggables.set(node, detach);
+            }
+        }
+        for (const [node, detach] of this.draggables) {
+            if (seen.has(node))
+                continue;
+            detach();
+            this.draggables.delete(node);
+        }
+    }
+    /* The drop line stands between two options, where script alone can measure. */
+    measureDropLine() {
+        const drag = this.drag();
+        const shows = drag.over === 'target' && drag.index !== null && this.resolvedReorderable();
+        if (!shows || drag.index === null) {
+            if (this.dropOffset() !== null)
+                this.dropOffset.set(null);
+            return;
+        }
+        const list = this.listOf('target');
+        const listbox = list?.querySelector('[data-ui="listbox"]');
+        if (!list || !listbox)
+            return;
+        const options = listbox.querySelectorAll('[data-part="option"]');
+        const frame = list.getBoundingClientRect().top;
+        const at = options[drag.index];
+        const last = options[options.length - 1];
+        const edge = at
+            ? at.getBoundingClientRect().top
+            : last
+                ? last.getBoundingClientRect().bottom
+                : listbox.getBoundingClientRect().top;
+        const offset = Math.round(edge - frame);
+        if (this.dropOffset() !== offset)
+            this.dropOffset.set(offset);
+    }
+    /* ── Forms ────────────────────────────────────────────────────────── */
+    onChangeFn = () => { };
+    onTouchedFn = () => { };
+    writeValue(value) {
+        this.targetKeys.set(value ?? EMPTY);
+    }
+    registerOnChange(fn) {
+        this.onChangeFn = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouchedFn = fn;
+    }
+    setDisabledState(disabled) {
+        this.formDisabled.set(disabled);
+    }
+    validate(control) {
+        if (!this.required())
+            return null;
+        const value = control.value;
+        return (value ?? EMPTY).length === 0 ? { required: true } : null;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTransfer, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: SlTransfer, isStandalone: true, selector: "[slTransfer]", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, getKey: { classPropertyName: "getKey", publicName: "getKey", isSignal: true, isRequired: false, transformFunction: null }, getLabel: { classPropertyName: "getLabel", publicName: "getLabel", isSignal: true, isRequired: false, transformFunction: null }, getDescription: { classPropertyName: "getDescription", publicName: "getDescription", isSignal: true, isRequired: false, transformFunction: null }, isItemDisabled: { classPropertyName: "isItemDisabled", publicName: "isItemDisabled", isSignal: true, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null }, targetKeys: { classPropertyName: "targetKeys", publicName: "targetKeys", isSignal: true, isRequired: false, transformFunction: null }, defaultTargetKeys: { classPropertyName: "defaultTargetKeys", publicName: "defaultTargetKeys", isSignal: true, isRequired: false, transformFunction: null }, selectedKeys: { classPropertyName: "selectedKeys", publicName: "selectedKeys", isSignal: true, isRequired: false, transformFunction: null }, defaultSelectedKeys: { classPropertyName: "defaultSelectedKeys", publicName: "defaultSelectedKeys", isSignal: true, isRequired: false, transformFunction: null }, sourceQuery: { classPropertyName: "sourceQuery", publicName: "sourceQuery", isSignal: true, isRequired: false, transformFunction: null }, defaultSourceQuery: { classPropertyName: "defaultSourceQuery", publicName: "defaultSourceQuery", isSignal: true, isRequired: false, transformFunction: null }, targetQuery: { classPropertyName: "targetQuery", publicName: "targetQuery", isSignal: true, isRequired: false, transformFunction: null }, defaultTargetQuery: { classPropertyName: "defaultTargetQuery", publicName: "defaultTargetQuery", isSignal: true, isRequired: false, transformFunction: null }, pane: { classPropertyName: "pane", publicName: "pane", isSignal: true, isRequired: false, transformFunction: null }, defaultPane: { classPropertyName: "defaultPane", publicName: "defaultPane", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, selectAll: { classPropertyName: "selectAll", publicName: "selectAll", isSignal: true, isRequired: false, transformFunction: null }, reorderable: { classPropertyName: "reorderable", publicName: "reorderable", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, virtual: { classPropertyName: "virtual", publicName: "virtual", isSignal: true, isRequired: false, transformFunction: null }, itemSize: { classPropertyName: "itemSize", publicName: "itemSize", isSignal: true, isRequired: false, transformFunction: null }, overscan: { classPropertyName: "overscan", publicName: "overscan", 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 }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, hasMore: { classPropertyName: "hasMore", publicName: "hasMore", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, messages: { classPropertyName: "messages", publicName: "messages", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { targetKeys: "targetKeysChange", selectedKeys: "selectedKeysChange", sourceQuery: "sourceQueryChange", targetQuery: "targetQueryChange", pane: "paneChange", targetKeysChangeRequest: "targetKeysChangeRequest", selectedKeysChangeRequest: "selectedKeysChangeRequest", sourceQueryChangeRequest: "sourceQueryChangeRequest", targetQueryChangeRequest: "targetQueryChangeRequest", paneChangeRequest: "paneChangeRequest", loadMore: "loadMore" }, host: { attributes: { "data-ui": "transfer", "data-part": "root" }, properties: { "attr.role": "writtenRole ?? \"group\"", "attr.data-layout": "resolvedLayout()", "attr.data-size": "resolvedSize()", "attr.data-pane": "currentPane()", "attr.data-disabled": "isDisabled() ? \"\" : null", "attr.aria-disabled": "isDisabled() ? \"true\" : null", "attr.data-readonly": "readOnly() ? \"\" : null", "attr.data-invalid": "isInvalid() ? \"\" : null", "attr.data-required": "required() ? \"\" : null", "attr.data-loading": "loading() ? \"\" : null", "style.--slotted-transfer-rows": "resolvedRows()" } }, providers: [
+            { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SlTransfer), multi: true },
+            { provide: NG_VALIDATORS, useExisting: forwardRef(() => SlTransfer), multi: true },
+        ], queries: [{ propertyName: "itemTemplate", first: true, predicate: SlTransferItem, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "footerTemplate", first: true, predicate: SlTransferFooter, descendants: true, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "listboxes", predicate: SlListbox, descendants: true, isSignal: true }], exportAs: ["slTransfer"], ngImport: i0, template: `
+    <div data-part="switch">
+      <div
+        slSegmentedControl
+        [attr.aria-label]="t('panes')"
+        [disabled]="isDisabled()"
+        [fullWidth]="true"
+        [size]="resolvedSize()"
+        [value]="currentPane()"
+        (valueChange)="onSwitch($event)"
+      >
+        @for (side of sides; track side) {
+          <label slSegment [value]="side">{{ paneCount(side) }}</label>
+        }
+      </div>
+    </div>
+    <div data-part="body">
+      <ng-container
+        [ngTemplateOutlet]="paneTemplate"
+        [ngTemplateOutletContext]="{ $implicit: 'source' }"
+      />
+      <div data-part="actions" role="group" [attr.aria-label]="t('actions')">
+        <button
+          slButton
+          slTransferPart="move-to-target"
+          tone="secondary"
+          variant="outline"
+          aria-keyshortcuts="Enter"
+          [size]="innerSize()"
+          [disabled]="frozen() || selectedToMove('source').length === 0"
+          [focusableWhenDisabled]="!isDisabled()"
+          (click)="move(selectedToMove('source'), 'target', pressReason($event), $event)"
+        >
+          {{ t('moveToTarget')
+          }}<span slButtonEnd aria-hidden="true"
+            ><span slIcon><svg slGlyph name="chevron-right"></svg></span
+          ></span>
+        </button>
+        <button
+          slButton
+          slTransferPart="move-all-to-target"
+          tone="secondary"
+          variant="outline"
+          [size]="innerSize()"
+          [disabled]="frozen() || enabledVisible('source').length === 0"
+          [focusableWhenDisabled]="!isDisabled()"
+          (click)="move(enabledVisible('source'), 'target', pressReason($event), $event)"
+        >
+          {{ t('moveAllToTarget')
+          }}<span slButtonEnd aria-hidden="true"
+            ><span slIcon><svg slGlyph name="chevrons-right"></svg></span
+          ></span>
+        </button>
+        <button
+          slButton
+          slTransferPart="move-to-source"
+          tone="secondary"
+          variant="outline"
+          aria-keyshortcuts="Delete"
+          [size]="innerSize()"
+          [disabled]="frozen() || selectedToMove('target').length === 0"
+          [focusableWhenDisabled]="!isDisabled()"
+          (click)="move(selectedToMove('target'), 'source', pressReason($event), $event)"
+        >
+          <span slButtonStart aria-hidden="true"
+            ><span slIcon><svg slGlyph name="chevron-right"></svg></span></span
+          >{{ t('moveToSource') }}
+        </button>
+        <button
+          slButton
+          slTransferPart="move-all-to-source"
+          tone="secondary"
+          variant="outline"
+          [size]="innerSize()"
+          [disabled]="frozen() || enabledVisible('target').length === 0"
+          [focusableWhenDisabled]="!isDisabled()"
+          (click)="move(enabledVisible('target'), 'source', pressReason($event), $event)"
+        >
+          <span slButtonStart aria-hidden="true"
+            ><span slIcon><svg slGlyph name="chevrons-right"></svg></span></span
+          >{{ t('moveAllToSource') }}
+        </button>
+        @if (resolvedReorderable()) {
+          <div data-part="reorder" role="group" [attr.aria-label]="t('reorder')">
+            <button
+              slButton
+              slTransferPart="move-up"
+              tone="secondary"
+              variant="ghost"
+              aria-keyshortcuts="Alt+ArrowUp"
+              [size]="innerSize()"
+              [disabled]="frozen() || !canReorder() || selectedToMove('target').length === 0"
+              [focusableWhenDisabled]="!isDisabled()"
+              (click)="shift(-1, pressReason($event), $event, false)"
+            >
+              <span slButtonStart aria-hidden="true"
+                ><span slIcon><svg slGlyph name="chevron-down"></svg></span></span
+              >{{ t('moveUp') }}
+            </button>
+            <button
+              slButton
+              slTransferPart="move-down"
+              tone="secondary"
+              variant="ghost"
+              aria-keyshortcuts="Alt+ArrowDown"
+              [size]="innerSize()"
+              [disabled]="frozen() || !canReorder() || selectedToMove('target').length === 0"
+              [focusableWhenDisabled]="!isDisabled()"
+              (click)="shift(1, pressReason($event), $event, false)"
+            >
+              <span slButtonStart aria-hidden="true"
+                ><span slIcon><svg slGlyph name="chevron-down"></svg></span></span
+              >{{ t('moveDown') }}
+            </button>
+          </div>
+        }
+      </div>
+      <ng-container
+        [ngTemplateOutlet]="paneTemplate"
+        [ngTemplateOutletContext]="{ $implicit: 'target' }"
+      />
+    </div>
+    @if (name(); as field) {
+      @for (key of partition().target; track key) {
+        <input type="hidden" [attr.name]="field" [value]="key" />
+      }
+    }
+
+    <ng-template #paneTemplate let-side>
+      <div
+        data-part="pane"
+        role="group"
+        [attr.data-side]="side"
+        [attr.aria-labelledby]="titleId(side)"
+        [attr.data-current]="currentPane() === side ? '' : null"
+        [attr.data-drop-target]="dropTarget(side) ? '' : null"
+      >
+        <div data-part="pane-header">
+          @if (resolvedSelectAll()) {
+            <span data-part="select-all">
+              <div
+                slCheckbox
+                [size]="resolvedSize()"
+                [checked]="selectAllState(side) === 'all'"
+                [indeterminate]="selectAllState(side) === 'some'"
+                [disabled]="isDisabled() || enabledVisible(side).length === 0"
+                (checkedChange)="onSelectAll(side, $event)"
+              ></div>
+            </span>
+          }
+          <span data-part="title" [attr.id]="titleId(side)">{{ title(side) }}</span>
+          <span data-part="count">{{ countText(side) }}</span>
+        </div>
+        @if (resolvedSearchable()) {
+          <div data-part="search">
+            <div slTextField [clearable]="true" [size]="innerSize()">
+              <span slTextFieldStart aria-hidden="true"
+                ><span data-part="search-icon"
+                  ><span slIcon><svg slGlyph name="search"></svg></span></span
+              ></span>
+              <input
+                slTextFieldInput
+                type="search"
+                [disabled]="isDisabled()"
+                [value]="queryOf(side)"
+                [attr.aria-label]="t('search', { pane: title(side) })"
+                [attr.placeholder]="t('search', { pane: title(side) })"
+                (valueChange)="onQuery(side, $event)"
+              />
+            </div>
+          </div>
+        }
+        <div data-part="list" [attr.data-side]="side" (focusin)="onListFocus(side, $event)">
+          <div
+            slListbox
+            variant="plain"
+            selectionMode="multiple"
+            [attr.aria-labelledby]="titleId(side)"
+            [size]="resolvedSize()"
+            [rows]="resolvedRows()"
+            [items]="entriesOf(side)"
+            [getKey]="entryKey"
+            [getLabel]="entryLabel"
+            [isItemDisabled]="entryDisabled"
+            [activeKey]="activeOf(side)"
+            [value]="selectionFor(side)"
+            [disabled]="isDisabled()"
+            [invalid]="isInvalid()"
+            [required]="required()"
+            [virtual]="virtual() && itemSize() !== undefined"
+            [itemSize]="itemSize()"
+            [overscan]="overscan()"
+            [loading]="side === 'source' && loading()"
+            [hasMore]="side === 'source' && hasMore()"
+            (loadMore)="loadMore.emit()"
+            (activeKeyChange)="setActive(side, $event.value)"
+            (valueChange)="onPaneSelection(side, $event)"
+          >
+            <ng-template slListboxOptionContent let-entry>
+              <span
+                slListboxIndicator
+                [attr.data-dragging]="dragging().has(entry.key) ? '' : null"
+                [attr.data-unresolved]="entry.item === undefined ? '' : null"
+              ></span>
+              @if (entry.item === undefined) {
+                <span slListboxLabel>{{ entry.key }}</span>
+              } @else if (itemTemplate(); as template) {
+                <ng-container
+                  [ngTemplateOutlet]="template"
+                  [ngTemplateOutletContext]="{ $implicit: entry.item, side: side }"
+                />
+              } @else {
+                <span slListboxLabel>{{ labelOf(entry.key) }}</span>
+                @if (descriptionOf(entry.item); as description) {
+                  <span slListboxDescription>{{ description }}</span>
+                }
+              }
+            </ng-template>
+            @if (isEmpty(side)) {
+              <div slListboxEmpty>
+                <div data-part="empty" [attr.data-query]="typed(side) ? '' : null">
+                  <span slIcon
+                    ><svg slGlyph [name]="typed(side) ? 'search-x' : 'inbox'"></svg
+                  ></span>
+                  {{ typed(side) ? t('noResults') : t('empty') }}
+                </div>
+              </div>
+            }
+            @if (side === 'source' && hasMore()) {
+              <div slListboxLoader>{{ t('loading') }}</div>
+            }
+          </div>
+          @if (side === 'target' && dropOffset() !== null) {
+            <div
+              data-part="drop-indicator"
+              aria-hidden="true"
+              [style.--_drop-offset]="dropOffset() + 'px'"
+            ></div>
+          }
+        </div>
+        @if (footerTemplate(); as footer) {
+          <div data-part="pane-footer">
+            <ng-container
+              [ngTemplateOutlet]="footer"
+              [ngTemplateOutletContext]="{ $implicit: side }"
+            />
+          </div>
+        }
+      </div>
+    </ng-template>
+  `, isInline: true, styles: ["@layer slotted.components{[data-ui=transfer]{--_text: var(--slotted-text, CanvasText);--_muted: var(--slotted-text-muted, GrayText);--_rule: var(--slotted-border-subtle, ButtonBorder);--_edge: var(--slotted-control-border-color, ButtonBorder);--_surface: var(--slotted-control-surface, Field);--_shadow: var(--slotted-control-shadow, none);--_radius: var(--slotted-radius-md, 6px);--_pane-min: var(--slotted-transfer-pane-min-inline-size, 13rem);--_gap: var(--slotted-space-5, .75rem);--_rows: var(--slotted-transfer-rows, 8);--_duration: var(--slotted-control-transition-duration);--_easing: var(--slotted-control-transition-easing);--_option-height: var(--slotted-control-height-md, 34px);--_option-inset: var(--slotted-control-padding-inline-md, 13px);--_mark: var(--slotted-control-icon-size-md, 16px);--_box: var(--slotted-selection-size-md, 16px);--_font-size: var(--slotted-control-font-size-md, 13px);--_list-inset: var(--slotted-listbox-padding-block, var(--slotted-space-2, .25rem));box-sizing:border-box;color:var(--_text);display:grid;font-family:var(--slotted-font-family-sans, ui-sans-serif, system-ui, sans-serif);font-size:var(--_font-size);line-height:var(--slotted-line-height-md, 1.5);min-inline-size:0;row-gap:var(--_gap);text-align:start;container-name:transfer;container-type:inline-size}[data-ui=transfer][data-size=sm]{--_option-height: var(--slotted-control-height-sm, 30px);--_option-inset: var(--slotted-control-padding-inline-sm, 10px);--_mark: var(--slotted-control-icon-size-sm, 14px);--_box: var(--slotted-selection-size-sm, 14px);--_font-size: var(--slotted-control-font-size-sm, 12px)}[data-ui=transfer][data-size=lg]{--_option-height: var(--slotted-control-height-lg, 38px);--_option-inset: var(--slotted-control-padding-inline-lg, 16px);--_mark: var(--slotted-control-icon-size-lg, 18px);--_box: var(--slotted-selection-size-lg, 18px);--_font-size: var(--slotted-control-font-size-lg, 14px)}[data-ui=transfer]>[data-part=switch]{display:none}[data-ui=transfer]>[data-part=switch]>[data-ui=segmented-control]{inline-size:100%}[data-ui=transfer]>[data-part=body]{align-items:center;column-gap:var(--_gap);display:grid;grid-template-columns:minmax(var(--_pane-min),1fr) max-content minmax(var(--_pane-min),1fr);min-inline-size:0}[data-ui=transfer]>[data-part=body]>[data-part=pane]{align-self:stretch;background:var(--_surface);border:var(--slotted-border-width-thin, 1px) solid var(--_edge);border-radius:var(--_radius);box-shadow:var(--_shadow);box-sizing:border-box;display:grid;grid-template-rows:auto auto minmax(0,1fr) auto;min-inline-size:0;overflow:clip;transition:border-color var(--_duration) var(--_easing),box-shadow var(--_duration) var(--_easing)}[data-ui=transfer]>[data-part=body]>[data-part=pane]>[data-part=pane-header]{align-items:center;column-gap:var(--slotted-space-4, .5rem);display:flex;min-block-size:var(--_option-height);padding-block:var(--slotted-space-3, .375rem);padding-inline-end:calc(var(--_list-inset) + var(--_option-inset));padding-inline-start:calc(var(--_list-inset) + var(--_option-inset) - (var(--_box) - var(--_mark)) / 2)}[data-ui=transfer]>[data-part=body]>[data-part=pane]>[data-part=pane-header]>[data-part=select-all]{display:inline-flex;flex:none}[data-ui=transfer]>[data-part=body]>[data-part=pane]>[data-part=pane-header]>[data-part=select-all]>[data-ui=checkbox]{column-gap:0}[data-ui=transfer]>[data-part=body]>[data-part=pane]>[data-part=pane-header]>[data-part=title]{color:var(--_text);font-weight:var(--slotted-font-weight-semibold, 600);min-inline-size:0;overflow-wrap:anywhere}[data-ui=transfer]>[data-part=body]>[data-part=pane]>[data-part=pane-header]>[data-part=count]{color:var(--_muted);flex:none;font-size:var(--slotted-font-size-xs, .75rem);font-variant-numeric:tabular-nums;line-height:var(--slotted-line-height-xs, 1.4);margin-inline-start:auto;white-space:nowrap}[data-ui=transfer]>[data-part=body]>[data-part=pane]>[data-part=search]{padding-block-end:var(--slotted-space-4, .5rem);padding-inline:var(--slotted-space-4, .5rem)}[data-ui=transfer]>[data-part=body]>[data-part=pane]>[data-part=search]>[data-ui=text-field]{inline-size:100%}[data-ui=transfer]>[data-part=body]>[data-part=pane]>[data-part=search] [data-part=search-icon]{display:inline-flex;flex:none}[data-ui=transfer]>[data-part=body]>[data-part=pane]>[data-part=list]{block-size:calc(var(--_rows) * var(--_option-height) + 2 * var(--_list-inset));border-block-start:var(--slotted-border-width-thin, 1px) solid var(--_rule);box-sizing:content-box;min-block-size:0;position:relative}[data-ui=transfer]>[data-part=body]>[data-part=pane]>[data-part=list]>[data-ui=listbox]{--slotted-listbox-measure: none;block-size:100%;max-block-size:100%}[data-ui=transfer]>[data-part=body]>[data-part=pane]>[data-part=list]>[data-ui=listbox]:has(>[data-part=empty]){align-content:center}[data-ui=transfer]>[data-part=body]>[data-part=pane]>[data-part=list]>[data-ui=listbox]>[data-part=empty]>[data-part=empty]{--slotted-icon-size: var(--_mark);display:grid;justify-items:center;row-gap:var(--slotted-space-3, .375rem)}[data-ui=transfer]>[data-part=body]>[data-part=pane]>[data-part=list]>[data-ui=listbox] [data-part=option]:has(>[data-part=indicator][data-unresolved]){color:var(--_muted);font-family:var(--slotted-font-family-mono, ui-monospace, monospace)}[data-ui=transfer]>[data-part=body]>[data-part=pane]>[data-part=list]>[data-part=drop-indicator]{block-size:0;inset-block-start:var(--_drop-offset, 0);inset-inline:calc(var(--_list-inset) + var(--slotted-space-2, .25rem));pointer-events:none;position:absolute}[data-ui=transfer]>[data-part=body]>[data-part=pane]>[data-part=list]>[data-part=drop-indicator]:before{background-color:var(--slotted-tone-accent-solid);block-size:var(--slotted-border-width-thick, 2px);border-radius:var(--slotted-radius-full, 9999px);content:\"\";inset-block-start:calc(var(--slotted-border-width-thick, 2px) / -2);inset-inline:0;position:absolute}[data-ui=transfer]>[data-part=body]>[data-part=pane]>[data-part=list]>[data-ui=listbox] [data-part=option]:has(>[data-part=indicator][data-dragging]){opacity:.5}[data-ui=transfer]>[data-part=body]>[data-part=pane][data-drop-target]{border-color:var(--slotted-tone-accent-border, Highlight);box-shadow:0 0 0 var(--slotted-border-width-thin, 1px) var(--slotted-tone-accent-border, Highlight)}[data-ui=transfer]>[data-part=body]>[data-part=pane]>[data-part=pane-footer]{border-block-start:var(--slotted-border-width-thin, 1px) solid var(--_rule);color:var(--_muted);font-size:var(--slotted-font-size-xs, .75rem);line-height:var(--slotted-line-height-xs, 1.4);padding-block:var(--slotted-space-4, .5rem);padding-inline:calc(var(--_list-inset) + var(--_option-inset))}[data-ui=transfer][data-invalid]>[data-part=body]>[data-part=pane]{--_edge: var(--slotted-tone-danger-border, Mark);--_invalid-edge-width: var(--slotted-control-invalid-edge-width, 1px);--_shadow: inset 0 0 0 var(--_invalid-edge-width) var(--_edge)}[data-ui=transfer][data-disabled]{--_surface: var(--slotted-disabled-background, Canvas);--_edge: var(--slotted-disabled-border, GrayText);--_text: var(--slotted-disabled-foreground, GrayText);--_muted: var(--slotted-disabled-foreground, GrayText);--_shadow: none}[data-ui=transfer]>[data-part=body]>[data-part=actions]{display:grid;gap:var(--slotted-space-3, .375rem);grid-auto-rows:auto;min-inline-size:0}[data-ui=transfer]>[data-part=body]>[data-part=actions]>[data-part=move-to-source],[data-ui=transfer]>[data-part=body]>[data-part=actions]>[data-part=reorder]{margin-block-start:var(--slotted-space-4, .5rem)}[data-ui=transfer]>[data-part=body]>[data-part=actions]>[data-ui=button]{inline-size:100%}[data-ui=transfer]>[data-part=body]>[data-part=actions]>[data-part=reorder]{display:grid;gap:var(--slotted-space-3, .375rem)}[data-ui=transfer]>[data-part=body]>[data-part=actions]>[data-part=reorder]>[data-ui=button]{inline-size:100%}[data-ui=transfer]>[data-part=body]>[data-part=actions]>:is([data-part=move-to-source],[data-part=move-all-to-source])>[data-part=start]>[data-ui=icon],[data-ui=transfer]:dir(rtl)>[data-part=body]>[data-part=actions]>:is([data-part=move-to-target],[data-part=move-all-to-target])>[data-part=end]>[data-ui=icon]{scale:-1 1}[data-ui=transfer]:dir(rtl)>[data-part=body]>[data-part=actions]>:is([data-part=move-to-source],[data-part=move-all-to-source])>[data-part=start]>[data-ui=icon]{scale:1 1}[data-ui=transfer]>[data-part=body]>[data-part=actions]>[data-part=reorder]>[data-part=move-up]>[data-part=start]>[data-ui=icon]{scale:1 -1}[data-ui=transfer][data-layout=steps]>[data-part=switch]{display:block}[data-ui=transfer][data-layout=steps]>[data-part=body]{grid-template-columns:minmax(0,1fr);row-gap:var(--slotted-space-4, .5rem)}[data-ui=transfer][data-layout=steps]>[data-part=body]>[data-part=pane]:not([data-current]){display:none}[data-ui=transfer][data-layout=steps]>[data-part=body]>[data-part=actions]{grid-template-columns:repeat(2,minmax(0,1fr))}[data-ui=transfer][data-layout=steps]>[data-part=body]>[data-part=actions]>:is([data-part=move-to-source],[data-part=reorder]){margin-block-start:0}[data-ui=transfer][data-layout=steps][data-pane=source]>[data-part=body]>[data-part=actions]>:is([data-part=move-to-source],[data-part=move-all-to-source],[data-part=reorder]),[data-ui=transfer][data-layout=steps][data-pane=target]>[data-part=body]>[data-part=actions]>:is([data-part=move-to-target],[data-part=move-all-to-target]){display:none}[data-ui=transfer][data-layout=steps]>[data-part=body]>[data-part=actions]>[data-part=reorder]{grid-column:1 / -1;grid-template-columns:repeat(2,minmax(0,1fr))}@container transfer (inline-size < 36rem){[data-ui=transfer][data-layout=auto]>[data-part=switch]{display:block}[data-ui=transfer][data-layout=auto]>[data-part=body]{grid-template-columns:minmax(0,1fr);row-gap:var(--slotted-space-4, .5rem)}[data-ui=transfer][data-layout=auto]>[data-part=body]>[data-part=pane]:not([data-current]){display:none}[data-ui=transfer][data-layout=auto]>[data-part=body]>[data-part=actions]{grid-template-columns:repeat(2,minmax(0,1fr))}[data-ui=transfer][data-layout=auto]>[data-part=body]>[data-part=actions]>:is([data-part=move-to-source],[data-part=reorder]){margin-block-start:0}[data-ui=transfer][data-layout=auto][data-pane=source]>[data-part=body]>[data-part=actions]>:is([data-part=move-to-source],[data-part=move-all-to-source],[data-part=reorder]),[data-ui=transfer][data-layout=auto][data-pane=target]>[data-part=body]>[data-part=actions]>:is([data-part=move-to-target],[data-part=move-all-to-target]){display:none}[data-ui=transfer][data-layout=auto]>[data-part=body]>[data-part=actions]>[data-part=reorder]{grid-column:1 / -1;grid-template-columns:repeat(2,minmax(0,1fr))}}@media(forced-colors:active){[data-ui=transfer][data-invalid]>[data-part=body]>[data-part=pane]{outline:var(--_invalid-edge-width) solid CanvasText;outline-offset:calc(-1 * (var(--slotted-border-width-thin, 1px) + var(--_invalid-edge-width)))}}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SlButton, selector: "button[slButton]", inputs: ["disabled", "focusableWhenDisabled", "fullWidth", "loading", "loadingDelay", "messages", "size", "tone", "type", "variant"], exportAs: ["slButton"] }, { kind: "component", type: SlButtonEnd, selector: "[slButtonEnd]", exportAs: ["slButtonEnd"] }, { kind: "component", type: SlButtonStart, selector: "[slButtonStart]", exportAs: ["slButtonStart"] }, { kind: "component", type: SlCheckbox, selector: "[slCheckbox]", inputs: ["checked", "defaultChecked", "indeterminate", "parent", "value", "name", "size", "labelPlacement", "variant", "disabled", "readOnly", "invalid"], outputs: ["checkedChange"], exportAs: ["slCheckbox"] }, { kind: "component", type: SlGlyph, selector: "svg[slGlyph]", inputs: ["name", "solid"] }, { kind: "component", type: SlIcon, selector: "[slIcon]", inputs: ["directional", "label", "size", "tone"], exportAs: ["slIcon"] }, { kind: "component", type: SlListbox, selector: "[slListbox]", inputs: ["value", "defaultValue", "activeKey", "defaultActiveKey", "selectionMode", "selectionBehavior", "size", "variant", "orientation", "focusMode", "indicator", "loop", "typeahead", "selectOnFocus", "navigateDisabled", "disallowEmptySelection", "disallowSelectAll", "rows", "columns", "pageSize", "typeaheadTimeout", "disabled", "readOnly", "required", "invalid", "loading", "items", "sections", "getKey", "getLabel", "isItemDisabled", "totalCount", "virtual", "itemSize", "sectionSize", "overscan", "hasMore", "loadMoreThreshold"], outputs: ["valueChange", "activeKeyChange", "loadMore"], exportAs: ["slListbox"] }, { kind: "directive", type: SlListboxDescription, selector: "[slListboxDescription]" }, { kind: "directive", type: SlListboxEmpty, selector: "[slListboxEmpty]" }, { kind: "component", type: SlListboxIndicator, selector: "[slListboxIndicator]" }, { kind: "directive", type: SlListboxLabel, selector: "[slListboxLabel]" }, { kind: "directive", type: SlListboxLoader, selector: "[slListboxLoader]" }, { kind: "directive", type: SlListboxOptionContent, selector: "[slListboxOptionContent]" }, { kind: "component", type: SlSegment, selector: "[slSegment]", inputs: ["value", "disabled"], exportAs: ["slSegment"] }, { kind: "component", type: SlSegmentedControl, selector: "[slSegmentedControl]", inputs: ["value", "defaultValue", "name", "size", "orientation", "condense", "fullWidth", "disabled", "readOnly", "invalid", "required"], outputs: ["valueChange"], exportAs: ["slSegmentedControl"] }, { kind: "component", type: SlTextField, selector: "[slTextField]", inputs: ["size", "variant", "mono", "clearable", "revealable", "copyable", "messages", "loading"], outputs: ["valueCopy"], exportAs: ["slTextField"] }, { kind: "directive", type: SlTextFieldInput, selector: "input[slTextFieldInput]", inputs: ["value", "defaultValue", "disabled", "readOnly", "invalid", "showCount", "countMax", "revealed", "defaultRevealed", "type"], outputs: ["valueChange", "revealedChange"], exportAs: ["slTextFieldInput"] }, { kind: "directive", type: SlTextFieldStart, selector: "[slTextFieldStart]", exportAs: ["slTextFieldStart"] }, { kind: "directive", type: SlTransferPart, selector: "[slTransferPart]", inputs: ["slTransferPart"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTransfer, decorators: [{
+            type: Component,
+            args: [{ selector: '[slTransfer]', standalone: true, exportAs: 'slTransfer', imports: [
+                        NgTemplateOutlet,
+                        SlButton,
+                        SlButtonEnd,
+                        SlButtonStart,
+                        SlCheckbox,
+                        SlGlyph,
+                        SlIcon,
+                        SlListbox,
+                        SlListboxDescription,
+                        SlListboxEmpty,
+                        SlListboxIndicator,
+                        SlListboxLabel,
+                        SlListboxLoader,
+                        SlListboxOptionContent,
+                        SlSegment,
+                        SlSegmentedControl,
+                        SlTextField,
+                        SlTextFieldInput,
+                        SlTextFieldStart,
+                        SlTransferPart,
+                    ], template: `
+    <div data-part="switch">
+      <div
+        slSegmentedControl
+        [attr.aria-label]="t('panes')"
+        [disabled]="isDisabled()"
+        [fullWidth]="true"
+        [size]="resolvedSize()"
+        [value]="currentPane()"
+        (valueChange)="onSwitch($event)"
+      >
+        @for (side of sides; track side) {
+          <label slSegment [value]="side">{{ paneCount(side) }}</label>
+        }
+      </div>
+    </div>
+    <div data-part="body">
+      <ng-container
+        [ngTemplateOutlet]="paneTemplate"
+        [ngTemplateOutletContext]="{ $implicit: 'source' }"
+      />
+      <div data-part="actions" role="group" [attr.aria-label]="t('actions')">
+        <button
+          slButton
+          slTransferPart="move-to-target"
+          tone="secondary"
+          variant="outline"
+          aria-keyshortcuts="Enter"
+          [size]="innerSize()"
+          [disabled]="frozen() || selectedToMove('source').length === 0"
+          [focusableWhenDisabled]="!isDisabled()"
+          (click)="move(selectedToMove('source'), 'target', pressReason($event), $event)"
+        >
+          {{ t('moveToTarget')
+          }}<span slButtonEnd aria-hidden="true"
+            ><span slIcon><svg slGlyph name="chevron-right"></svg></span
+          ></span>
+        </button>
+        <button
+          slButton
+          slTransferPart="move-all-to-target"
+          tone="secondary"
+          variant="outline"
+          [size]="innerSize()"
+          [disabled]="frozen() || enabledVisible('source').length === 0"
+          [focusableWhenDisabled]="!isDisabled()"
+          (click)="move(enabledVisible('source'), 'target', pressReason($event), $event)"
+        >
+          {{ t('moveAllToTarget')
+          }}<span slButtonEnd aria-hidden="true"
+            ><span slIcon><svg slGlyph name="chevrons-right"></svg></span
+          ></span>
+        </button>
+        <button
+          slButton
+          slTransferPart="move-to-source"
+          tone="secondary"
+          variant="outline"
+          aria-keyshortcuts="Delete"
+          [size]="innerSize()"
+          [disabled]="frozen() || selectedToMove('target').length === 0"
+          [focusableWhenDisabled]="!isDisabled()"
+          (click)="move(selectedToMove('target'), 'source', pressReason($event), $event)"
+        >
+          <span slButtonStart aria-hidden="true"
+            ><span slIcon><svg slGlyph name="chevron-right"></svg></span></span
+          >{{ t('moveToSource') }}
+        </button>
+        <button
+          slButton
+          slTransferPart="move-all-to-source"
+          tone="secondary"
+          variant="outline"
+          [size]="innerSize()"
+          [disabled]="frozen() || enabledVisible('target').length === 0"
+          [focusableWhenDisabled]="!isDisabled()"
+          (click)="move(enabledVisible('target'), 'source', pressReason($event), $event)"
+        >
+          <span slButtonStart aria-hidden="true"
+            ><span slIcon><svg slGlyph name="chevrons-right"></svg></span></span
+          >{{ t('moveAllToSource') }}
+        </button>
+        @if (resolvedReorderable()) {
+          <div data-part="reorder" role="group" [attr.aria-label]="t('reorder')">
+            <button
+              slButton
+              slTransferPart="move-up"
+              tone="secondary"
+              variant="ghost"
+              aria-keyshortcuts="Alt+ArrowUp"
+              [size]="innerSize()"
+              [disabled]="frozen() || !canReorder() || selectedToMove('target').length === 0"
+              [focusableWhenDisabled]="!isDisabled()"
+              (click)="shift(-1, pressReason($event), $event, false)"
+            >
+              <span slButtonStart aria-hidden="true"
+                ><span slIcon><svg slGlyph name="chevron-down"></svg></span></span
+              >{{ t('moveUp') }}
+            </button>
+            <button
+              slButton
+              slTransferPart="move-down"
+              tone="secondary"
+              variant="ghost"
+              aria-keyshortcuts="Alt+ArrowDown"
+              [size]="innerSize()"
+              [disabled]="frozen() || !canReorder() || selectedToMove('target').length === 0"
+              [focusableWhenDisabled]="!isDisabled()"
+              (click)="shift(1, pressReason($event), $event, false)"
+            >
+              <span slButtonStart aria-hidden="true"
+                ><span slIcon><svg slGlyph name="chevron-down"></svg></span></span
+              >{{ t('moveDown') }}
+            </button>
+          </div>
+        }
+      </div>
+      <ng-container
+        [ngTemplateOutlet]="paneTemplate"
+        [ngTemplateOutletContext]="{ $implicit: 'target' }"
+      />
+    </div>
+    @if (name(); as field) {
+      @for (key of partition().target; track key) {
+        <input type="hidden" [attr.name]="field" [value]="key" />
+      }
+    }
+
+    <ng-template #paneTemplate let-side>
+      <div
+        data-part="pane"
+        role="group"
+        [attr.data-side]="side"
+        [attr.aria-labelledby]="titleId(side)"
+        [attr.data-current]="currentPane() === side ? '' : null"
+        [attr.data-drop-target]="dropTarget(side) ? '' : null"
+      >
+        <div data-part="pane-header">
+          @if (resolvedSelectAll()) {
+            <span data-part="select-all">
+              <div
+                slCheckbox
+                [size]="resolvedSize()"
+                [checked]="selectAllState(side) === 'all'"
+                [indeterminate]="selectAllState(side) === 'some'"
+                [disabled]="isDisabled() || enabledVisible(side).length === 0"
+                (checkedChange)="onSelectAll(side, $event)"
+              ></div>
+            </span>
+          }
+          <span data-part="title" [attr.id]="titleId(side)">{{ title(side) }}</span>
+          <span data-part="count">{{ countText(side) }}</span>
+        </div>
+        @if (resolvedSearchable()) {
+          <div data-part="search">
+            <div slTextField [clearable]="true" [size]="innerSize()">
+              <span slTextFieldStart aria-hidden="true"
+                ><span data-part="search-icon"
+                  ><span slIcon><svg slGlyph name="search"></svg></span></span
+              ></span>
+              <input
+                slTextFieldInput
+                type="search"
+                [disabled]="isDisabled()"
+                [value]="queryOf(side)"
+                [attr.aria-label]="t('search', { pane: title(side) })"
+                [attr.placeholder]="t('search', { pane: title(side) })"
+                (valueChange)="onQuery(side, $event)"
+              />
+            </div>
+          </div>
+        }
+        <div data-part="list" [attr.data-side]="side" (focusin)="onListFocus(side, $event)">
+          <div
+            slListbox
+            variant="plain"
+            selectionMode="multiple"
+            [attr.aria-labelledby]="titleId(side)"
+            [size]="resolvedSize()"
+            [rows]="resolvedRows()"
+            [items]="entriesOf(side)"
+            [getKey]="entryKey"
+            [getLabel]="entryLabel"
+            [isItemDisabled]="entryDisabled"
+            [activeKey]="activeOf(side)"
+            [value]="selectionFor(side)"
+            [disabled]="isDisabled()"
+            [invalid]="isInvalid()"
+            [required]="required()"
+            [virtual]="virtual() && itemSize() !== undefined"
+            [itemSize]="itemSize()"
+            [overscan]="overscan()"
+            [loading]="side === 'source' && loading()"
+            [hasMore]="side === 'source' && hasMore()"
+            (loadMore)="loadMore.emit()"
+            (activeKeyChange)="setActive(side, $event.value)"
+            (valueChange)="onPaneSelection(side, $event)"
+          >
+            <ng-template slListboxOptionContent let-entry>
+              <span
+                slListboxIndicator
+                [attr.data-dragging]="dragging().has(entry.key) ? '' : null"
+                [attr.data-unresolved]="entry.item === undefined ? '' : null"
+              ></span>
+              @if (entry.item === undefined) {
+                <span slListboxLabel>{{ entry.key }}</span>
+              } @else if (itemTemplate(); as template) {
+                <ng-container
+                  [ngTemplateOutlet]="template"
+                  [ngTemplateOutletContext]="{ $implicit: entry.item, side: side }"
+                />
+              } @else {
+                <span slListboxLabel>{{ labelOf(entry.key) }}</span>
+                @if (descriptionOf(entry.item); as description) {
+                  <span slListboxDescription>{{ description }}</span>
+                }
+              }
+            </ng-template>
+            @if (isEmpty(side)) {
+              <div slListboxEmpty>
+                <div data-part="empty" [attr.data-query]="typed(side) ? '' : null">
+                  <span slIcon
+                    ><svg slGlyph [name]="typed(side) ? 'search-x' : 'inbox'"></svg
+                  ></span>
+                  {{ typed(side) ? t('noResults') : t('empty') }}
+                </div>
+              </div>
+            }
+            @if (side === 'source' && hasMore()) {
+              <div slListboxLoader>{{ t('loading') }}</div>
+            }
+          </div>
+          @if (side === 'target' && dropOffset() !== null) {
+            <div
+              data-part="drop-indicator"
+              aria-hidden="true"
+              [style.--_drop-offset]="dropOffset() + 'px'"
+            ></div>
+          }
+        </div>
+        @if (footerTemplate(); as footer) {
+          <div data-part="pane-footer">
+            <ng-container
+              [ngTemplateOutlet]="footer"
+              [ngTemplateOutletContext]="{ $implicit: side }"
+            />
+          </div>
+        }
+      </div>
+    </ng-template>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [
+                        { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SlTransfer), multi: true },
+                        { provide: NG_VALIDATORS, useExisting: forwardRef(() => SlTransfer), multi: true },
+                    ], host: {
+                        'data-ui': 'transfer',
+                        'data-part': 'root',
+                        '[attr.role]': 'writtenRole ?? "group"',
+                        '[attr.data-layout]': 'resolvedLayout()',
+                        '[attr.data-size]': 'resolvedSize()',
+                        '[attr.data-pane]': 'currentPane()',
+                        '[attr.data-disabled]': 'isDisabled() ? "" : null',
+                        '[attr.aria-disabled]': 'isDisabled() ? "true" : null',
+                        '[attr.data-readonly]': 'readOnly() ? "" : null',
+                        '[attr.data-invalid]': 'isInvalid() ? "" : null',
+                        '[attr.data-required]': 'required() ? "" : null',
+                        '[attr.data-loading]': 'loading() ? "" : null',
+                        '[style.--slotted-transfer-rows]': 'resolvedRows()',
+                    }, styles: ["@layer slotted.components{[data-ui=transfer]{--_text: var(--slotted-text, CanvasText);--_muted: var(--slotted-text-muted, GrayText);--_rule: var(--slotted-border-subtle, ButtonBorder);--_edge: var(--slotted-control-border-color, ButtonBorder);--_surface: var(--slotted-control-surface, Field);--_shadow: var(--slotted-control-shadow, none);--_radius: var(--slotted-radius-md, 6px);--_pane-min: var(--slotted-transfer-pane-min-inline-size, 13rem);--_gap: var(--slotted-space-5, .75rem);--_rows: var(--slotted-transfer-rows, 8);--_duration: var(--slotted-control-transition-duration);--_easing: var(--slotted-control-transition-easing);--_option-height: var(--slotted-control-height-md, 34px);--_option-inset: var(--slotted-control-padding-inline-md, 13px);--_mark: var(--slotted-control-icon-size-md, 16px);--_box: var(--slotted-selection-size-md, 16px);--_font-size: var(--slotted-control-font-size-md, 13px);--_list-inset: var(--slotted-listbox-padding-block, var(--slotted-space-2, .25rem));box-sizing:border-box;color:var(--_text);display:grid;font-family:var(--slotted-font-family-sans, ui-sans-serif, system-ui, sans-serif);font-size:var(--_font-size);line-height:var(--slotted-line-height-md, 1.5);min-inline-size:0;row-gap:var(--_gap);text-align:start;container-name:transfer;container-type:inline-size}[data-ui=transfer][data-size=sm]{--_option-height: var(--slotted-control-height-sm, 30px);--_option-inset: var(--slotted-control-padding-inline-sm, 10px);--_mark: var(--slotted-control-icon-size-sm, 14px);--_box: var(--slotted-selection-size-sm, 14px);--_font-size: var(--slotted-control-font-size-sm, 12px)}[data-ui=transfer][data-size=lg]{--_option-height: var(--slotted-control-height-lg, 38px);--_option-inset: var(--slotted-control-padding-inline-lg, 16px);--_mark: var(--slotted-control-icon-size-lg, 18px);--_box: var(--slotted-selection-size-lg, 18px);--_font-size: var(--slotted-control-font-size-lg, 14px)}[data-ui=transfer]>[data-part=switch]{display:none}[data-ui=transfer]>[data-part=switch]>[data-ui=segmented-control]{inline-size:100%}[data-ui=transfer]>[data-part=body]{align-items:center;column-gap:var(--_gap);display:grid;grid-template-columns:minmax(var(--_pane-min),1fr) max-content minmax(var(--_pane-min),1fr);min-inline-size:0}[data-ui=transfer]>[data-part=body]>[data-part=pane]{align-self:stretch;background:var(--_surface);border:var(--slotted-border-width-thin, 1px) solid var(--_edge);border-radius:var(--_radius);box-shadow:var(--_shadow);box-sizing:border-box;display:grid;grid-template-rows:auto auto minmax(0,1fr) auto;min-inline-size:0;overflow:clip;transition:border-color var(--_duration) var(--_easing),box-shadow var(--_duration) var(--_easing)}[data-ui=transfer]>[data-part=body]>[data-part=pane]>[data-part=pane-header]{align-items:center;column-gap:var(--slotted-space-4, .5rem);display:flex;min-block-size:var(--_option-height);padding-block:var(--slotted-space-3, .375rem);padding-inline-end:calc(var(--_list-inset) + var(--_option-inset));padding-inline-start:calc(var(--_list-inset) + var(--_option-inset) - (var(--_box) - var(--_mark)) / 2)}[data-ui=transfer]>[data-part=body]>[data-part=pane]>[data-part=pane-header]>[data-part=select-all]{display:inline-flex;flex:none}[data-ui=transfer]>[data-part=body]>[data-part=pane]>[data-part=pane-header]>[data-part=select-all]>[data-ui=checkbox]{column-gap:0}[data-ui=transfer]>[data-part=body]>[data-part=pane]>[data-part=pane-header]>[data-part=title]{color:var(--_text);font-weight:var(--slotted-font-weight-semibold, 600);min-inline-size:0;overflow-wrap:anywhere}[data-ui=transfer]>[data-part=body]>[data-part=pane]>[data-part=pane-header]>[data-part=count]{color:var(--_muted);flex:none;font-size:var(--slotted-font-size-xs, .75rem);font-variant-numeric:tabular-nums;line-height:var(--slotted-line-height-xs, 1.4);margin-inline-start:auto;white-space:nowrap}[data-ui=transfer]>[data-part=body]>[data-part=pane]>[data-part=search]{padding-block-end:var(--slotted-space-4, .5rem);padding-inline:var(--slotted-space-4, .5rem)}[data-ui=transfer]>[data-part=body]>[data-part=pane]>[data-part=search]>[data-ui=text-field]{inline-size:100%}[data-ui=transfer]>[data-part=body]>[data-part=pane]>[data-part=search] [data-part=search-icon]{display:inline-flex;flex:none}[data-ui=transfer]>[data-part=body]>[data-part=pane]>[data-part=list]{block-size:calc(var(--_rows) * var(--_option-height) + 2 * var(--_list-inset));border-block-start:var(--slotted-border-width-thin, 1px) solid var(--_rule);box-sizing:content-box;min-block-size:0;position:relative}[data-ui=transfer]>[data-part=body]>[data-part=pane]>[data-part=list]>[data-ui=listbox]{--slotted-listbox-measure: none;block-size:100%;max-block-size:100%}[data-ui=transfer]>[data-part=body]>[data-part=pane]>[data-part=list]>[data-ui=listbox]:has(>[data-part=empty]){align-content:center}[data-ui=transfer]>[data-part=body]>[data-part=pane]>[data-part=list]>[data-ui=listbox]>[data-part=empty]>[data-part=empty]{--slotted-icon-size: var(--_mark);display:grid;justify-items:center;row-gap:var(--slotted-space-3, .375rem)}[data-ui=transfer]>[data-part=body]>[data-part=pane]>[data-part=list]>[data-ui=listbox] [data-part=option]:has(>[data-part=indicator][data-unresolved]){color:var(--_muted);font-family:var(--slotted-font-family-mono, ui-monospace, monospace)}[data-ui=transfer]>[data-part=body]>[data-part=pane]>[data-part=list]>[data-part=drop-indicator]{block-size:0;inset-block-start:var(--_drop-offset, 0);inset-inline:calc(var(--_list-inset) + var(--slotted-space-2, .25rem));pointer-events:none;position:absolute}[data-ui=transfer]>[data-part=body]>[data-part=pane]>[data-part=list]>[data-part=drop-indicator]:before{background-color:var(--slotted-tone-accent-solid);block-size:var(--slotted-border-width-thick, 2px);border-radius:var(--slotted-radius-full, 9999px);content:\"\";inset-block-start:calc(var(--slotted-border-width-thick, 2px) / -2);inset-inline:0;position:absolute}[data-ui=transfer]>[data-part=body]>[data-part=pane]>[data-part=list]>[data-ui=listbox] [data-part=option]:has(>[data-part=indicator][data-dragging]){opacity:.5}[data-ui=transfer]>[data-part=body]>[data-part=pane][data-drop-target]{border-color:var(--slotted-tone-accent-border, Highlight);box-shadow:0 0 0 var(--slotted-border-width-thin, 1px) var(--slotted-tone-accent-border, Highlight)}[data-ui=transfer]>[data-part=body]>[data-part=pane]>[data-part=pane-footer]{border-block-start:var(--slotted-border-width-thin, 1px) solid var(--_rule);color:var(--_muted);font-size:var(--slotted-font-size-xs, .75rem);line-height:var(--slotted-line-height-xs, 1.4);padding-block:var(--slotted-space-4, .5rem);padding-inline:calc(var(--_list-inset) + var(--_option-inset))}[data-ui=transfer][data-invalid]>[data-part=body]>[data-part=pane]{--_edge: var(--slotted-tone-danger-border, Mark);--_invalid-edge-width: var(--slotted-control-invalid-edge-width, 1px);--_shadow: inset 0 0 0 var(--_invalid-edge-width) var(--_edge)}[data-ui=transfer][data-disabled]{--_surface: var(--slotted-disabled-background, Canvas);--_edge: var(--slotted-disabled-border, GrayText);--_text: var(--slotted-disabled-foreground, GrayText);--_muted: var(--slotted-disabled-foreground, GrayText);--_shadow: none}[data-ui=transfer]>[data-part=body]>[data-part=actions]{display:grid;gap:var(--slotted-space-3, .375rem);grid-auto-rows:auto;min-inline-size:0}[data-ui=transfer]>[data-part=body]>[data-part=actions]>[data-part=move-to-source],[data-ui=transfer]>[data-part=body]>[data-part=actions]>[data-part=reorder]{margin-block-start:var(--slotted-space-4, .5rem)}[data-ui=transfer]>[data-part=body]>[data-part=actions]>[data-ui=button]{inline-size:100%}[data-ui=transfer]>[data-part=body]>[data-part=actions]>[data-part=reorder]{display:grid;gap:var(--slotted-space-3, .375rem)}[data-ui=transfer]>[data-part=body]>[data-part=actions]>[data-part=reorder]>[data-ui=button]{inline-size:100%}[data-ui=transfer]>[data-part=body]>[data-part=actions]>:is([data-part=move-to-source],[data-part=move-all-to-source])>[data-part=start]>[data-ui=icon],[data-ui=transfer]:dir(rtl)>[data-part=body]>[data-part=actions]>:is([data-part=move-to-target],[data-part=move-all-to-target])>[data-part=end]>[data-ui=icon]{scale:-1 1}[data-ui=transfer]:dir(rtl)>[data-part=body]>[data-part=actions]>:is([data-part=move-to-source],[data-part=move-all-to-source])>[data-part=start]>[data-ui=icon]{scale:1 1}[data-ui=transfer]>[data-part=body]>[data-part=actions]>[data-part=reorder]>[data-part=move-up]>[data-part=start]>[data-ui=icon]{scale:1 -1}[data-ui=transfer][data-layout=steps]>[data-part=switch]{display:block}[data-ui=transfer][data-layout=steps]>[data-part=body]{grid-template-columns:minmax(0,1fr);row-gap:var(--slotted-space-4, .5rem)}[data-ui=transfer][data-layout=steps]>[data-part=body]>[data-part=pane]:not([data-current]){display:none}[data-ui=transfer][data-layout=steps]>[data-part=body]>[data-part=actions]{grid-template-columns:repeat(2,minmax(0,1fr))}[data-ui=transfer][data-layout=steps]>[data-part=body]>[data-part=actions]>:is([data-part=move-to-source],[data-part=reorder]){margin-block-start:0}[data-ui=transfer][data-layout=steps][data-pane=source]>[data-part=body]>[data-part=actions]>:is([data-part=move-to-source],[data-part=move-all-to-source],[data-part=reorder]),[data-ui=transfer][data-layout=steps][data-pane=target]>[data-part=body]>[data-part=actions]>:is([data-part=move-to-target],[data-part=move-all-to-target]){display:none}[data-ui=transfer][data-layout=steps]>[data-part=body]>[data-part=actions]>[data-part=reorder]{grid-column:1 / -1;grid-template-columns:repeat(2,minmax(0,1fr))}@container transfer (inline-size < 36rem){[data-ui=transfer][data-layout=auto]>[data-part=switch]{display:block}[data-ui=transfer][data-layout=auto]>[data-part=body]{grid-template-columns:minmax(0,1fr);row-gap:var(--slotted-space-4, .5rem)}[data-ui=transfer][data-layout=auto]>[data-part=body]>[data-part=pane]:not([data-current]){display:none}[data-ui=transfer][data-layout=auto]>[data-part=body]>[data-part=actions]{grid-template-columns:repeat(2,minmax(0,1fr))}[data-ui=transfer][data-layout=auto]>[data-part=body]>[data-part=actions]>:is([data-part=move-to-source],[data-part=reorder]){margin-block-start:0}[data-ui=transfer][data-layout=auto][data-pane=source]>[data-part=body]>[data-part=actions]>:is([data-part=move-to-source],[data-part=move-all-to-source],[data-part=reorder]),[data-ui=transfer][data-layout=auto][data-pane=target]>[data-part=body]>[data-part=actions]>:is([data-part=move-to-target],[data-part=move-all-to-target]){display:none}[data-ui=transfer][data-layout=auto]>[data-part=body]>[data-part=actions]>[data-part=reorder]{grid-column:1 / -1;grid-template-columns:repeat(2,minmax(0,1fr))}}@media(forced-colors:active){[data-ui=transfer][data-invalid]>[data-part=body]>[data-part=pane]{outline:var(--_invalid-edge-width) solid CanvasText;outline-offset:calc(-1 * (var(--slotted-border-width-thin, 1px) + var(--_invalid-edge-width)))}}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }], getKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "getKey", required: false }] }], getLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "getLabel", required: false }] }], getDescription: [{ type: i0.Input, args: [{ isSignal: true, alias: "getDescription", required: false }] }], isItemDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "isItemDisabled", required: false }] }], filter: [{ type: i0.Input, args: [{ isSignal: true, alias: "filter", required: false }] }], targetKeys: [{ type: i0.Input, args: [{ isSignal: true, alias: "targetKeys", required: false }] }, { type: i0.Output, args: ["targetKeysChange"] }], defaultTargetKeys: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultTargetKeys", required: false }] }], selectedKeys: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedKeys", required: false }] }, { type: i0.Output, args: ["selectedKeysChange"] }], defaultSelectedKeys: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultSelectedKeys", required: false }] }], sourceQuery: [{ type: i0.Input, args: [{ isSignal: true, alias: "sourceQuery", required: false }] }, { type: i0.Output, args: ["sourceQueryChange"] }], defaultSourceQuery: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultSourceQuery", required: false }] }], targetQuery: [{ type: i0.Input, args: [{ isSignal: true, alias: "targetQuery", required: false }] }, { type: i0.Output, args: ["targetQueryChange"] }], defaultTargetQuery: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultTargetQuery", required: false }] }], pane: [{ type: i0.Input, args: [{ isSignal: true, alias: "pane", required: false }] }, { type: i0.Output, args: ["paneChange"] }], defaultPane: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultPane", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: false }] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], selectAll: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectAll", required: false }] }], reorderable: [{ type: i0.Input, args: [{ isSignal: true, alias: "reorderable", required: false }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }], virtual: [{ type: i0.Input, args: [{ isSignal: true, alias: "virtual", required: false }] }], itemSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemSize", required: false }] }], overscan: [{ type: i0.Input, args: [{ isSignal: true, alias: "overscan", 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 }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], hasMore: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasMore", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], messages: [{ type: i0.Input, args: [{ isSignal: true, alias: "messages", required: false }] }], targetKeysChangeRequest: [{ type: i0.Output, args: ["targetKeysChangeRequest"] }], selectedKeysChangeRequest: [{ type: i0.Output, args: ["selectedKeysChangeRequest"] }], sourceQueryChangeRequest: [{ type: i0.Output, args: ["sourceQueryChangeRequest"] }], targetQueryChangeRequest: [{ type: i0.Output, args: ["targetQueryChangeRequest"] }], paneChangeRequest: [{ type: i0.Output, args: ["paneChangeRequest"] }], loadMore: [{ type: i0.Output, args: ["loadMore"] }], itemTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SlTransferItem), { ...{ read: TemplateRef }, isSignal: true }] }], footerTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SlTransferFooter), { ...{ read: TemplateRef }, isSignal: true }] }], listboxes: [{ type: i0.ViewChildren, args: [i0.forwardRef(() => SlListbox), { isSignal: true }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SlTransfer, SlTransferFooter, SlTransferIdFactory, SlTransferItem, SlTransferPart, TRANSFER_DEFAULTS, injectTransferDefaults, provideTransferDefaults };
+//# sourceMappingURL=slotted-angular-transfer.mjs.map