@rt-tools/ui-kit-v2 0.29.0 → 0.30.0

package/fesm2022/rt-tools-ui-kit-v2-dynamic-selector.mjs

@@ -1,9 +1,9 @@
 import * as i0 from "@angular/core";
-import { ChangeDetectionStrategy, Component, DestroyRef, Directive, ElementRef, Injector, TemplateRef, ViewEncapsulation, afterNextRender, booleanAttribute, computed, contentChild, forwardRef, inject, input, model, output, signal, viewChild, viewChildren } from "@angular/core";
+import { ChangeDetectionStrategy, Component, DestroyRef, Directive, ElementRef, Injectable, Injector, TemplateRef, ViewEncapsulation, afterNextRender, booleanAttribute, computed, contentChild, forwardRef, inject, input, model, output, signal, viewChild, viewChildren } from "@angular/core";
 import * as i1 from "@angular/forms";
 import { FormsModule } from "@angular/forms";
 import { BlockDirective, ElemDirective, ModDirective } from "@rt-tools/core";
-import { BreakpointsService, RtInfiniteScrollDirective, rtKitDefault, rtKitLabel } from "@rt-tools/ui-kit-v2/core";
+import { BreakpointsService, RtInfiniteScrollDirective, RtOptionList, rtKitDefault, rtKitLabel, rtMatchParts, rtSearchMatches } from "@rt-tools/ui-kit-v2/core";
 import { RtButtonDirective } from "@rt-tools/ui-kit-v2/button";
 import { RtEmptyStateComponent } from "@rt-tools/ui-kit-v2/empty-state";
 import { RtFormControlBase } from "@rt-tools/ui-kit-v2/form-control";
@@ -22,10 +22,54 @@ import { RtRadioButtonComponent } from "@rt-tools/ui-kit-v2/radio-button";
 import { RtSpinnerComponent } from "@rt-tools/ui-kit-v2/spinner";
 import { RtToggleSwitchComponent } from "@rt-tools/ui-kit-v2/toggle-switch";
 import { RtPopoverDirective } from "@rt-tools/ui-kit-v2/popover";
+var RtDynamicSelectorPartsService = class RtDynamicSelectorPartsService {
+	#popup = null;
+	#list = null;
+	get popup() {
+		if (this.#popup === null) throw new Error("rt-dynamic-selector-popup стоит вне корня: источник окна не привязан");
+		return this.#popup;
+	}
+	get list() {
+		if (this.#list === null) throw new Error("rt-dynamic-selector-list стоит вне корня: источник списка не привязан");
+		return this.#list;
+	}
+	bindPopup(source) {
+		this.#popup = source;
+	}
+	bindList(source) {
+		this.#list = source;
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: RtDynamicSelectorPartsService,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Injectable
+		});
+	}
+	static {
+		this.ɵprov = i0.ɵɵngDeclareInjectable({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: RtDynamicSelectorPartsService
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RtDynamicSelectorPartsService,
+	decorators: [{ type: Injectable }]
+});
 const BEM_BLOCK$3 = "rt-dynamic-selector-list";
 var RtDynamicSelectorListComponent = class RtDynamicSelectorListComponent {
 	constructor() {
 		this.#breakpoints = inject(BreakpointsService);
+		this.#source = inject(RtDynamicSelectorPartsService).list;
 		this.isNarrow = this.#breakpoints.viewportNarrow;
 		this.dragLabel = rtKitLabel("dynamicSelectorDrag");
 		this.removeLabel = rtKitLabel("dynamicSelectorRemove");
@@ -36,70 +80,39 @@ var RtDynamicSelectorListComponent = class RtDynamicSelectorListComponent {
 		this.clearLabel = rtKitLabel("dynamicSelectorClear");
 		this.editedIndex = signal(null, ...ngDevMode ? [{ debugName: "editedIndex" }] : /* istanbul ignore next */ []);
 		this.draft = signal("", ...ngDevMode ? [{ debugName: "draft" }] : /* istanbul ignore next */ []);
-		this.rows = input([], ...ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []);
-		this.draggable = input(false, {
-			...ngDevMode ? { debugName: "draggable" } : /* istanbul ignore next */ {},
-			transform: booleanAttribute
-		});
-		this.editable = input(false, {
-			...ngDevMode ? { debugName: "editable" } : /* istanbul ignore next */ {},
-			transform: booleanAttribute
-		});
-		this.disabled = input(false, {
-			...ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {},
-			transform: booleanAttribute
-		});
-		this.actionsShown = input(true, {
-			...ngDevMode ? { debugName: "actionsShown" } : /* istanbul ignore next */ {},
-			transform: booleanAttribute
-		});
-		this.resetClearShown = input(true, {
-			...ngDevMode ? { debugName: "resetClearShown" } : /* istanbul ignore next */ {},
-			transform: booleanAttribute
-		});
-		this.removeShown = input(true, {
-			...ngDevMode ? { debugName: "removeShown" } : /* istanbul ignore next */ {},
-			transform: booleanAttribute
-		});
-		this.resetDisabled = input(true, {
-			...ngDevMode ? { debugName: "resetDisabled" } : /* istanbul ignore next */ {},
-			transform: booleanAttribute
-		});
-		this.clearDisabled = input(true, {
-			...ngDevMode ? { debugName: "clearDisabled" } : /* istanbul ignore next */ {},
-			transform: booleanAttribute
-		});
-		this.buttonRadius = input("full", ...ngDevMode ? [{ debugName: "buttonRadius" }] : /* istanbul ignore next */ []);
-		this.clearIcon = input("close", ...ngDevMode ? [{ debugName: "clearIcon" }] : /* istanbul ignore next */ []);
-		this.titleWrap = input(true, {
-			...ngDevMode ? { debugName: "titleWrap" } : /* istanbul ignore next */ {},
-			transform: booleanAttribute
-		});
-		this.titleTpl = input(null, ...ngDevMode ? [{ debugName: "titleTpl" }] : /* istanbul ignore next */ []);
-		this.controlsTpl = input(null, ...ngDevMode ? [{ debugName: "controlsTpl" }] : /* istanbul ignore next */ []);
-		this.removed = output();
-		this.moved = output();
-		this.edited = output();
-		this.resetClicked = output();
-		this.cleared = output();
+		this.rows = this.#source.rows;
+		this.draggable = this.#source.draggable;
+		this.editable = this.#source.editable;
+		this.disabled = this.#source.disabled;
+		this.actionsShown = this.#source.actionsShown;
+		this.resetClearShown = this.#source.resetClearShown;
+		this.removeShown = this.#source.removeShown;
+		this.resetDisabled = this.#source.resetDisabled;
+		this.clearDisabled = this.#source.clearDisabled;
+		this.buttonRadius = this.#source.buttonRadius;
+		this.clearIcon = this.#source.clearIcon;
+		this.titleWrap = this.#source.titleWrap;
+		this.titleTpl = this.#source.titleTpl;
+		this.controlsTpl = this.#source.controlsTpl;
 	}
 	#breakpoints;
+	#source;
 	onDrop(event) {
 		if (event.previousContainer !== event.container || event.previousIndex === event.currentIndex) return;
-		this.moved.emit({
+		this.#source.move({
 			from: event.previousIndex,
 			to: event.currentIndex
 		});
 	}
 	onRemove(row) {
-		if (!row.locked && !this.disabled()) this.removed.emit(row.key);
+		if (!row.locked && !this.disabled()) this.#source.remove(row.key);
 	}
 	onEditStart(index, row) {
 		this.draft.set(row.label);
 		this.editedIndex.set(index);
 	}
 	onEditApply(row) {
-		this.edited.emit({
+		this.#source.edit({
 			previous: row.label,
 			next: this.draft()
 		});
@@ -108,6 +121,12 @@ var RtDynamicSelectorListComponent = class RtDynamicSelectorListComponent {
 	onEditCancel() {
 		this.editedIndex.set(null);
 	}
+	onReset() {
+		this.#source.reset();
+	}
+	onClear() {
+		this.#source.clear();
+	}
 	static {
 		this.ɵfac = i0.ɵɵngDeclareFactory({
 			minVersion: "12.0.0",
@@ -125,116 +144,9 @@ var RtDynamicSelectorListComponent = class RtDynamicSelectorListComponent {
 			type: RtDynamicSelectorListComponent,
 			isStandalone: true,
 			selector: "rt-dynamic-selector-list",
-			inputs: {
-				rows: {
-					classPropertyName: "rows",
-					publicName: "rows",
-					isSignal: true,
-					isRequired: false,
-					transformFunction: null
-				},
-				draggable: {
-					classPropertyName: "draggable",
-					publicName: "draggable",
-					isSignal: true,
-					isRequired: false,
-					transformFunction: null
-				},
-				editable: {
-					classPropertyName: "editable",
-					publicName: "editable",
-					isSignal: true,
-					isRequired: false,
-					transformFunction: null
-				},
-				disabled: {
-					classPropertyName: "disabled",
-					publicName: "disabled",
-					isSignal: true,
-					isRequired: false,
-					transformFunction: null
-				},
-				actionsShown: {
-					classPropertyName: "actionsShown",
-					publicName: "actionsShown",
-					isSignal: true,
-					isRequired: false,
-					transformFunction: null
-				},
-				resetClearShown: {
-					classPropertyName: "resetClearShown",
-					publicName: "resetClearShown",
-					isSignal: true,
-					isRequired: false,
-					transformFunction: null
-				},
-				removeShown: {
-					classPropertyName: "removeShown",
-					publicName: "removeShown",
-					isSignal: true,
-					isRequired: false,
-					transformFunction: null
-				},
-				resetDisabled: {
-					classPropertyName: "resetDisabled",
-					publicName: "resetDisabled",
-					isSignal: true,
-					isRequired: false,
-					transformFunction: null
-				},
-				clearDisabled: {
-					classPropertyName: "clearDisabled",
-					publicName: "clearDisabled",
-					isSignal: true,
-					isRequired: false,
-					transformFunction: null
-				},
-				buttonRadius: {
-					classPropertyName: "buttonRadius",
-					publicName: "buttonRadius",
-					isSignal: true,
-					isRequired: false,
-					transformFunction: null
-				},
-				clearIcon: {
-					classPropertyName: "clearIcon",
-					publicName: "clearIcon",
-					isSignal: true,
-					isRequired: false,
-					transformFunction: null
-				},
-				titleWrap: {
-					classPropertyName: "titleWrap",
-					publicName: "titleWrap",
-					isSignal: true,
-					isRequired: false,
-					transformFunction: null
-				},
-				titleTpl: {
-					classPropertyName: "titleTpl",
-					publicName: "titleTpl",
-					isSignal: true,
-					isRequired: false,
-					transformFunction: null
-				},
-				controlsTpl: {
-					classPropertyName: "controlsTpl",
-					publicName: "controlsTpl",
-					isSignal: true,
-					isRequired: false,
-					transformFunction: null
-				}
-			},
-			outputs: {
-				removed: "removed",
-				moved: "moved",
-				edited: "edited",
-				resetClicked: "resetClicked",
-				cleared: "cleared"
-			},
 			host: { classAttribute: "rt-dynamic-selector-list" },
 			ngImport: i0,
-			template: "<ng-container rtBlock=\"rt-dynamic-selector-list\">\n    @if (rows().length > 0) {\n        <div rtElem=\"rows\" cdkDropList qa-dataid=\"dynamic-selector-rows\" (cdkDropListDropped)=\"onDrop($event)\">\n            @for (row of rows(); track row.key; let index = $index) {\n                <div\n                    rtElem=\"row\"\n                    cdkDrag\n                    qa-dataid=\"dynamic-selector-row\"\n                    [rtMod]=\"{ locked: row.locked }\"\n                    [cdkDragDisabled]=\"!draggable() || disabled()\">\n                    @if (draggable()) {\n                        <span rtElem=\"handle\">\n                            <rt-icon-button\n                                cdkDragHandle\n                                qa-dataid=\"dynamic-selector-drag\"\n                                icon=\"arrows\"\n                                size=\"sm\"\n                                [radius]=\"buttonRadius()\"\n                                [ariaLabel]=\"dragLabel()\"\n                                [tooltip]=\"isNarrow() ? '' : dragLabel()\"\n                                [disabled]=\"disabled()\" />\n                        </span>\n                    }\n\n                    @if (editedIndex() === index) {\n                        <rt-input\n                            rtElem=\"field\"\n                            qa-dataid=\"dynamic-selector-edit-field\"\n                            [ngModel]=\"draft()\"\n                            (ngModelChange)=\"draft.set($event ?? '')\"\n                            (keydown.enter)=\"onEditApply(row)\" />\n                    } @else if (titleTpl(); as tpl) {\n                        <div rtElem=\"title\">\n                            <ng-container [ngTemplateOutlet]=\"tpl\" [ngTemplateOutletContext]=\"{ $implicit: row.item }\" />\n                        </div>\n                    } @else {\n                        <span\n                            rtElem=\"title\"\n                            rtTooltipWhenTruncated\n                            [rtMod]=\"{ nowrap: !titleWrap() }\"\n                            [rtTooltip]=\"titleWrap() ? '' : row.label\">\n                            {{ row.label }}\n                        </span>\n                    }\n\n                    <div rtElem=\"controls\">\n                        @if (controlsTpl(); as tpl) {\n                            <ng-container [ngTemplateOutlet]=\"tpl\" [ngTemplateOutletContext]=\"{ $implicit: row.item }\" />\n                        }\n\n                        @if (editable()) {\n                            @if (editedIndex() === index) {\n                                <rt-icon-button\n                                    qa-dataid=\"dynamic-selector-edit-cancel\"\n                                    icon=\"undo\"\n                                    size=\"sm\"\n                                    [radius]=\"buttonRadius()\"\n                                    [ariaLabel]=\"cancelLabel()\"\n                                    [tooltip]=\"isNarrow() ? '' : cancelLabel()\"\n                                    (clicked)=\"onEditCancel()\" />\n                                <rt-icon-button\n                                    qa-dataid=\"dynamic-selector-edit-apply\"\n                                    icon=\"check\"\n                                    size=\"sm\"\n                                    [radius]=\"buttonRadius()\"\n                                    [ariaLabel]=\"applyLabel()\"\n                                    [tooltip]=\"isNarrow() ? '' : applyLabel()\"\n                                    (clicked)=\"onEditApply(row)\" />\n                            } @else {\n                                <rt-icon-button\n                                    qa-dataid=\"dynamic-selector-edit\"\n                                    icon=\"pencil\"\n                                    size=\"sm\"\n                                    [radius]=\"buttonRadius()\"\n                                    [ariaLabel]=\"editLabel()\"\n                                    [tooltip]=\"isNarrow() ? '' : editLabel()\"\n                                    [disabled]=\"disabled()\"\n                                    (clicked)=\"onEditStart(index, row)\" />\n                            }\n                        }\n\n                        @if (removeShown()) {\n                            <rt-icon-button\n                                qa-dataid=\"dynamic-selector-remove\"\n                                icon=\"trash\"\n                                size=\"sm\"\n                                [radius]=\"buttonRadius()\"\n                                [iconColor]=\"row.locked || disabled() ? 'muted' : 'danger'\"\n                                [ariaLabel]=\"removeLabel()\"\n                                [tooltip]=\"isNarrow() ? '' : removeLabel()\"\n                                [disabled]=\"row.locked || disabled()\"\n                                (clicked)=\"onRemove(row)\" />\n                        }\n                    </div>\n                </div>\n            }\n        </div>\n    }\n\n    @if (actionsShown()) {\n        <div rtElem=\"actions\">\n            <div rtElem=\"add\">\n                <ng-content />\n            </div>\n\n            @if (resetClearShown()) {\n                <rt-icon-button\n                    rtElem=\"reset\"\n                    qa-dataid=\"dynamic-selector-reset\"\n                    icon=\"refresh\"\n                    size=\"sm\"\n                    [radius]=\"buttonRadius()\"\n                    [iconColor]=\"resetDisabled() || disabled() ? 'muted' : 'current'\"\n                    [ariaLabel]=\"resetLabel()\"\n                    [tooltip]=\"isNarrow() ? '' : resetLabel()\"\n                    [disabled]=\"resetDisabled() || disabled()\"\n                    (clicked)=\"resetClicked.emit()\" />\n                <rt-icon-button\n                    rtElem=\"clear\"\n                    qa-dataid=\"dynamic-selector-clear\"\n                    size=\"sm\"\n                    [icon]=\"clearIcon()\"\n                    [radius]=\"buttonRadius()\"\n                    [iconColor]=\"clearDisabled() || disabled() ? 'muted' : 'danger'\"\n                    [ariaLabel]=\"clearLabel()\"\n                    [tooltip]=\"isNarrow() ? '' : clearLabel()\"\n                    [disabled]=\"clearDisabled() || disabled()\"\n                    (clicked)=\"cleared.emit()\" />\n            }\n        </div>\n    }\n</ng-container>\n",
+			template: "<ng-container rtBlock=\"rt-dynamic-selector-list\">\n    @if (rows().length > 0) {\n        <div rtElem=\"rows\" cdkDropList qa-dataid=\"dynamic-selector-rows\" (cdkDropListDropped)=\"onDrop($event)\">\n            @for (row of rows(); track row.key; let index = $index) {\n                <div\n                    rtElem=\"row\"\n                    cdkDrag\n                    qa-dataid=\"dynamic-selector-row\"\n                    [rtMod]=\"{ locked: row.locked }\"\n                    [cdkDragDisabled]=\"!draggable() || disabled()\">\n                    @if (draggable()) {\n                        <span rtElem=\"handle\">\n                            <rt-icon-button\n                                cdkDragHandle\n                                qa-dataid=\"dynamic-selector-drag\"\n                                icon=\"arrows\"\n                                size=\"sm\"\n                                [radius]=\"buttonRadius()\"\n                                [ariaLabel]=\"dragLabel()\"\n                                [tooltip]=\"isNarrow() ? '' : dragLabel()\"\n                                [disabled]=\"disabled()\" />\n                        </span>\n                    }\n\n                    @if (editedIndex() === index) {\n                        <rt-input\n                            rtElem=\"field\"\n                            qa-dataid=\"dynamic-selector-edit-field\"\n                            [ngModel]=\"draft()\"\n                            (ngModelChange)=\"draft.set($event ?? '')\"\n                            (keydown.enter)=\"onEditApply(row)\" />\n                    } @else if (titleTpl(); as tpl) {\n                        <div rtElem=\"title\">\n                            <ng-container [ngTemplateOutlet]=\"tpl\" [ngTemplateOutletContext]=\"{ $implicit: row.item }\" />\n                        </div>\n                    } @else {\n                        <span\n                            rtElem=\"title\"\n                            rtTooltipWhenTruncated\n                            [rtMod]=\"{ nowrap: !titleWrap() }\"\n                            [rtTooltip]=\"titleWrap() ? '' : row.label\">\n                            {{ row.label }}\n                        </span>\n                    }\n\n                    <div rtElem=\"controls\">\n                        @if (controlsTpl(); as tpl) {\n                            <ng-container [ngTemplateOutlet]=\"tpl\" [ngTemplateOutletContext]=\"{ $implicit: row.item }\" />\n                        }\n\n                        @if (editable()) {\n                            @if (editedIndex() === index) {\n                                <rt-icon-button\n                                    qa-dataid=\"dynamic-selector-edit-cancel\"\n                                    icon=\"undo\"\n                                    size=\"sm\"\n                                    [radius]=\"buttonRadius()\"\n                                    [ariaLabel]=\"cancelLabel()\"\n                                    [tooltip]=\"isNarrow() ? '' : cancelLabel()\"\n                                    (clicked)=\"onEditCancel()\" />\n                                <rt-icon-button\n                                    qa-dataid=\"dynamic-selector-edit-apply\"\n                                    icon=\"check\"\n                                    size=\"sm\"\n                                    [radius]=\"buttonRadius()\"\n                                    [ariaLabel]=\"applyLabel()\"\n                                    [tooltip]=\"isNarrow() ? '' : applyLabel()\"\n                                    (clicked)=\"onEditApply(row)\" />\n                            } @else {\n                                <rt-icon-button\n                                    qa-dataid=\"dynamic-selector-edit\"\n                                    icon=\"pencil\"\n                                    size=\"sm\"\n                                    [radius]=\"buttonRadius()\"\n                                    [ariaLabel]=\"editLabel()\"\n                                    [tooltip]=\"isNarrow() ? '' : editLabel()\"\n                                    [disabled]=\"disabled()\"\n                                    (clicked)=\"onEditStart(index, row)\" />\n                            }\n                        }\n\n                        @if (removeShown()) {\n                            <rt-icon-button\n                                qa-dataid=\"dynamic-selector-remove\"\n                                icon=\"trash\"\n                                size=\"sm\"\n                                [radius]=\"buttonRadius()\"\n                                [iconColor]=\"row.locked || disabled() ? 'muted' : 'danger'\"\n                                [ariaLabel]=\"removeLabel()\"\n                                [tooltip]=\"isNarrow() ? '' : removeLabel()\"\n                                [disabled]=\"row.locked || disabled()\"\n                                (clicked)=\"onRemove(row)\" />\n                        }\n                    </div>\n                </div>\n            }\n        </div>\n    }\n\n    @if (actionsShown()) {\n        <div rtElem=\"actions\">\n            <div rtElem=\"add\">\n                <ng-content />\n            </div>\n\n            @if (resetClearShown()) {\n                <rt-icon-button\n                    rtElem=\"reset\"\n                    qa-dataid=\"dynamic-selector-reset\"\n                    icon=\"refresh\"\n                    size=\"sm\"\n                    [radius]=\"buttonRadius()\"\n                    [iconColor]=\"resetDisabled() || disabled() ? 'muted' : 'current'\"\n                    [ariaLabel]=\"resetLabel()\"\n                    [tooltip]=\"isNarrow() ? '' : resetLabel()\"\n                    [disabled]=\"resetDisabled() || disabled()\"\n                    (clicked)=\"onReset()\" />\n                <rt-icon-button\n                    rtElem=\"clear\"\n                    qa-dataid=\"dynamic-selector-clear\"\n                    size=\"sm\"\n                    [icon]=\"clearIcon()\"\n                    [radius]=\"buttonRadius()\"\n                    [iconColor]=\"clearDisabled() || disabled() ? 'muted' : 'danger'\"\n                    [ariaLabel]=\"clearLabel()\"\n                    [tooltip]=\"isNarrow() ? '' : clearLabel()\"\n                    [disabled]=\"clearDisabled() || disabled()\"\n                    (clicked)=\"onClear()\" />\n            }\n        </div>\n    }\n</ng-container>\n",
 			styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-dynamic-selector-list{--rt-dynamic-selector-list-row-bg: var(--rt-color-action-primary-subtle);--rt-dynamic-selector-list-row-radius: var(--rt-radius-sm);--rt-dynamic-selector-list-divider-width: var(--rt-border-width-thin);--rt-dynamic-selector-list-drag-shadow: var(--rt-shadow-md);--rt-dynamic-selector-list-drag-duration: var(--rt-duration-base);--rt-dynamic-selector-list-row-padding-x: var(--rt-space-sm);--rt-dynamic-selector-list-add-font-weight: var(--rt-font-weight-medium);--rt-dynamic-selector-list-add-indent: 0;--rt-dynamic-selector-list-reset-color: var(--rt-color-text-primary);--rt-dynamic-selector-list-actions-gap-default: var(--rt-space-2xs);--rt-dynamic-selector-list-controls-gap-default: var(--rt-space-2xs);--rt-dynamic-selector-list-controls-divider-width-default: 0;--rt-dynamic-selector-list-controls-divider-color-default: var(--rt-color-border-default);--rt-dynamic-selector-list-row-padding-end-default: var(--rt-space-2xs);--rt-dynamic-selector-list-actions-offset-default: var(--rt-space-2xs);--rt-dynamic-selector-list-actions-padding-end-default: 0;--rt-dynamic-selector-list-handle-padding-start-default: 0;--rt-dynamic-selector-list-handle-padding-end-default: var(--rt-space-2xs);--rt-dynamic-selector-list-title-gap-default: var(--rt-space-sm);display:flex;flex-direction:column;gap:var(--rt-dynamic-selector-list-actions-offset, var(--rt-dynamic-selector-list-actions-offset-default))}.rt-dynamic-selector-list__rows{display:flex;flex-direction:column;gap:var(--rt-space-sm)}.rt-dynamic-selector-list__row{display:flex;min-height:var(--rt-control-height-lg);box-sizing:border-box;align-items:center;padding:var(--rt-space-2xs) var(--rt-dynamic-selector-list-row-padding-end, var(--rt-dynamic-selector-list-row-padding-end-default)) var(--rt-space-2xs) var(--rt-dynamic-selector-list-row-padding-x);border-radius:var(--rt-dynamic-selector-list-row-radius);background:var(--rt-dynamic-selector-list-row-bg);color:var(--rt-color-text-primary);gap:var(--rt-space-sm)}.rt-dynamic-selector-list__handle{border-right:var(--rt-dynamic-selector-list-divider-width) solid var(--rt-color-border-default);cursor:grab;margin-inline-end:calc(var(--rt-dynamic-selector-list-title-gap, var(--rt-dynamic-selector-list-title-gap-default)) - var(--rt-space-sm));padding-inline:var(--rt-dynamic-selector-list-handle-padding-start, var(--rt-dynamic-selector-list-handle-padding-start-default)) var(--rt-dynamic-selector-list-handle-padding-end, var(--rt-dynamic-selector-list-handle-padding-end-default))}.rt-dynamic-selector-list__title{min-width:0;flex:1 1 auto;font-size:var(--rt-text-md);overflow-wrap:anywhere}.rt-dynamic-selector-list__title--nowrap{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rt-dynamic-selector-list__field{min-width:0;flex:1 1 auto}.rt-dynamic-selector-list__controls{display:flex;flex:0 0 auto;align-items:center;gap:var(--rt-dynamic-selector-list-controls-gap, var(--rt-dynamic-selector-list-controls-gap-default))}.rt-dynamic-selector-list__controls>:not(:last-child){border-inline-end:var(--rt-dynamic-selector-list-controls-divider-width, var(--rt-dynamic-selector-list-controls-divider-width-default)) solid var(--rt-dynamic-selector-list-controls-divider-color, var(--rt-dynamic-selector-list-controls-divider-color-default))}.rt-dynamic-selector-list__actions{display:flex;align-items:center;gap:var(--rt-dynamic-selector-list-actions-gap, var(--rt-dynamic-selector-list-actions-gap-default));padding-inline-end:var(--rt-dynamic-selector-list-actions-padding-end, var(--rt-dynamic-selector-list-actions-padding-end-default))}.rt-dynamic-selector-list__add{display:flex;min-width:0;flex:1 1 auto;align-items:center;padding-inline-start:var(--rt-dynamic-selector-list-add-indent)}.rt-dynamic-selector-list__add .rt-button{color:var(--rt-dynamic-selector-list-add-color, var(--rt-btn-color));font-weight:var(--rt-dynamic-selector-list-add-font-weight)}.rt-dynamic-selector-list__reset.rt-icon-button{--rt-icon-button-color: var(--rt-dynamic-selector-list-reset-color)}.rt-dynamic-selector-list__clear{flex:none}.rt-dynamic-selector-list__row.cdk-drag-preview{--rt-dynamic-selector-list-row-bg: var(--rt-color-action-primary-subtle);--rt-dynamic-selector-list-row-radius: var(--rt-radius-sm);--rt-dynamic-selector-list-divider-width: var(--rt-border-width-thin);--rt-dynamic-selector-list-drag-shadow: var(--rt-shadow-md);--rt-dynamic-selector-list-actions-gap-default: var(--rt-space-2xs);--rt-dynamic-selector-list-controls-gap-default: var(--rt-space-2xs);--rt-dynamic-selector-list-controls-divider-width-default: 0;--rt-dynamic-selector-list-controls-divider-color-default: var(--rt-color-border-default);--rt-dynamic-selector-list-row-padding-end-default: var(--rt-space-2xs);--rt-dynamic-selector-list-actions-offset-default: var(--rt-space-2xs);--rt-dynamic-selector-list-actions-padding-end-default: 0;--rt-dynamic-selector-list-handle-padding-start-default: 0;--rt-dynamic-selector-list-handle-padding-end-default: var(--rt-space-2xs);--rt-dynamic-selector-list-title-gap-default: var(--rt-space-sm);box-shadow:var(--rt-dynamic-selector-list-drag-shadow)}.rt-dynamic-selector-list__row.cdk-drag-placeholder{opacity:0}.rt-dynamic-selector-list__row.cdk-drag-animating,.rt-dynamic-selector-list__rows.cdk-drop-list-dragging .rt-dynamic-selector-list__row:not(.cdk-drag-placeholder){transition:transform var(--rt-dynamic-selector-list-drag-duration) ease-out}}.rt-dynamic-selector-list__row.cdk-drag-preview{padding:var(--rt-space-2xs) var(--rt-dynamic-selector-list-row-padding-end, var(--rt-space-2xs)) var(--rt-space-2xs) var(--rt-space-sm);background-color:var(--rt-color-bg-surface);background-image:linear-gradient(var(--rt-dynamic-selector-list-row-bg),var(--rt-dynamic-selector-list-row-bg));color:var(--rt-color-text-primary)}\n"],
 			dependencies: [
 				{
@@ -429,144 +341,10 @@ i0.ɵɵngDeclareClassMetadata({
 				RtTooltipDirective
 			],
 			host: { class: BEM_BLOCK$3 },
-			template: "<ng-container rtBlock=\"rt-dynamic-selector-list\">\n    @if (rows().length > 0) {\n        <div rtElem=\"rows\" cdkDropList qa-dataid=\"dynamic-selector-rows\" (cdkDropListDropped)=\"onDrop($event)\">\n            @for (row of rows(); track row.key; let index = $index) {\n                <div\n                    rtElem=\"row\"\n                    cdkDrag\n                    qa-dataid=\"dynamic-selector-row\"\n                    [rtMod]=\"{ locked: row.locked }\"\n                    [cdkDragDisabled]=\"!draggable() || disabled()\">\n                    @if (draggable()) {\n                        <span rtElem=\"handle\">\n                            <rt-icon-button\n                                cdkDragHandle\n                                qa-dataid=\"dynamic-selector-drag\"\n                                icon=\"arrows\"\n                                size=\"sm\"\n                                [radius]=\"buttonRadius()\"\n                                [ariaLabel]=\"dragLabel()\"\n                                [tooltip]=\"isNarrow() ? '' : dragLabel()\"\n                                [disabled]=\"disabled()\" />\n                        </span>\n                    }\n\n                    @if (editedIndex() === index) {\n                        <rt-input\n                            rtElem=\"field\"\n                            qa-dataid=\"dynamic-selector-edit-field\"\n                            [ngModel]=\"draft()\"\n                            (ngModelChange)=\"draft.set($event ?? '')\"\n                            (keydown.enter)=\"onEditApply(row)\" />\n                    } @else if (titleTpl(); as tpl) {\n                        <div rtElem=\"title\">\n                            <ng-container [ngTemplateOutlet]=\"tpl\" [ngTemplateOutletContext]=\"{ $implicit: row.item }\" />\n                        </div>\n                    } @else {\n                        <span\n                            rtElem=\"title\"\n                            rtTooltipWhenTruncated\n                            [rtMod]=\"{ nowrap: !titleWrap() }\"\n                            [rtTooltip]=\"titleWrap() ? '' : row.label\">\n                            {{ row.label }}\n                        </span>\n                    }\n\n                    <div rtElem=\"controls\">\n                        @if (controlsTpl(); as tpl) {\n                            <ng-container [ngTemplateOutlet]=\"tpl\" [ngTemplateOutletContext]=\"{ $implicit: row.item }\" />\n                        }\n\n                        @if (editable()) {\n                            @if (editedIndex() === index) {\n                                <rt-icon-button\n                                    qa-dataid=\"dynamic-selector-edit-cancel\"\n                                    icon=\"undo\"\n                                    size=\"sm\"\n                                    [radius]=\"buttonRadius()\"\n                                    [ariaLabel]=\"cancelLabel()\"\n                                    [tooltip]=\"isNarrow() ? '' : cancelLabel()\"\n                                    (clicked)=\"onEditCancel()\" />\n                                <rt-icon-button\n                                    qa-dataid=\"dynamic-selector-edit-apply\"\n                                    icon=\"check\"\n                                    size=\"sm\"\n                                    [radius]=\"buttonRadius()\"\n                                    [ariaLabel]=\"applyLabel()\"\n                                    [tooltip]=\"isNarrow() ? '' : applyLabel()\"\n                                    (clicked)=\"onEditApply(row)\" />\n                            } @else {\n                                <rt-icon-button\n                                    qa-dataid=\"dynamic-selector-edit\"\n                                    icon=\"pencil\"\n                                    size=\"sm\"\n                                    [radius]=\"buttonRadius()\"\n                                    [ariaLabel]=\"editLabel()\"\n                                    [tooltip]=\"isNarrow() ? '' : editLabel()\"\n                                    [disabled]=\"disabled()\"\n                                    (clicked)=\"onEditStart(index, row)\" />\n                            }\n                        }\n\n                        @if (removeShown()) {\n                            <rt-icon-button\n                                qa-dataid=\"dynamic-selector-remove\"\n                                icon=\"trash\"\n                                size=\"sm\"\n                                [radius]=\"buttonRadius()\"\n                                [iconColor]=\"row.locked || disabled() ? 'muted' : 'danger'\"\n                                [ariaLabel]=\"removeLabel()\"\n                                [tooltip]=\"isNarrow() ? '' : removeLabel()\"\n                                [disabled]=\"row.locked || disabled()\"\n                                (clicked)=\"onRemove(row)\" />\n                        }\n                    </div>\n                </div>\n            }\n        </div>\n    }\n\n    @if (actionsShown()) {\n        <div rtElem=\"actions\">\n            <div rtElem=\"add\">\n                <ng-content />\n            </div>\n\n            @if (resetClearShown()) {\n                <rt-icon-button\n                    rtElem=\"reset\"\n                    qa-dataid=\"dynamic-selector-reset\"\n                    icon=\"refresh\"\n                    size=\"sm\"\n                    [radius]=\"buttonRadius()\"\n                    [iconColor]=\"resetDisabled() || disabled() ? 'muted' : 'current'\"\n                    [ariaLabel]=\"resetLabel()\"\n                    [tooltip]=\"isNarrow() ? '' : resetLabel()\"\n                    [disabled]=\"resetDisabled() || disabled()\"\n                    (clicked)=\"resetClicked.emit()\" />\n                <rt-icon-button\n                    rtElem=\"clear\"\n                    qa-dataid=\"dynamic-selector-clear\"\n                    size=\"sm\"\n                    [icon]=\"clearIcon()\"\n                    [radius]=\"buttonRadius()\"\n                    [iconColor]=\"clearDisabled() || disabled() ? 'muted' : 'danger'\"\n                    [ariaLabel]=\"clearLabel()\"\n                    [tooltip]=\"isNarrow() ? '' : clearLabel()\"\n                    [disabled]=\"clearDisabled() || disabled()\"\n                    (clicked)=\"cleared.emit()\" />\n            }\n        </div>\n    }\n</ng-container>\n",
+			template: "<ng-container rtBlock=\"rt-dynamic-selector-list\">\n    @if (rows().length > 0) {\n        <div rtElem=\"rows\" cdkDropList qa-dataid=\"dynamic-selector-rows\" (cdkDropListDropped)=\"onDrop($event)\">\n            @for (row of rows(); track row.key; let index = $index) {\n                <div\n                    rtElem=\"row\"\n                    cdkDrag\n                    qa-dataid=\"dynamic-selector-row\"\n                    [rtMod]=\"{ locked: row.locked }\"\n                    [cdkDragDisabled]=\"!draggable() || disabled()\">\n                    @if (draggable()) {\n                        <span rtElem=\"handle\">\n                            <rt-icon-button\n                                cdkDragHandle\n                                qa-dataid=\"dynamic-selector-drag\"\n                                icon=\"arrows\"\n                                size=\"sm\"\n                                [radius]=\"buttonRadius()\"\n                                [ariaLabel]=\"dragLabel()\"\n                                [tooltip]=\"isNarrow() ? '' : dragLabel()\"\n                                [disabled]=\"disabled()\" />\n                        </span>\n                    }\n\n                    @if (editedIndex() === index) {\n                        <rt-input\n                            rtElem=\"field\"\n                            qa-dataid=\"dynamic-selector-edit-field\"\n                            [ngModel]=\"draft()\"\n                            (ngModelChange)=\"draft.set($event ?? '')\"\n                            (keydown.enter)=\"onEditApply(row)\" />\n                    } @else if (titleTpl(); as tpl) {\n                        <div rtElem=\"title\">\n                            <ng-container [ngTemplateOutlet]=\"tpl\" [ngTemplateOutletContext]=\"{ $implicit: row.item }\" />\n                        </div>\n                    } @else {\n                        <span\n                            rtElem=\"title\"\n                            rtTooltipWhenTruncated\n                            [rtMod]=\"{ nowrap: !titleWrap() }\"\n                            [rtTooltip]=\"titleWrap() ? '' : row.label\">\n                            {{ row.label }}\n                        </span>\n                    }\n\n                    <div rtElem=\"controls\">\n                        @if (controlsTpl(); as tpl) {\n                            <ng-container [ngTemplateOutlet]=\"tpl\" [ngTemplateOutletContext]=\"{ $implicit: row.item }\" />\n                        }\n\n                        @if (editable()) {\n                            @if (editedIndex() === index) {\n                                <rt-icon-button\n                                    qa-dataid=\"dynamic-selector-edit-cancel\"\n                                    icon=\"undo\"\n                                    size=\"sm\"\n                                    [radius]=\"buttonRadius()\"\n                                    [ariaLabel]=\"cancelLabel()\"\n                                    [tooltip]=\"isNarrow() ? '' : cancelLabel()\"\n                                    (clicked)=\"onEditCancel()\" />\n                                <rt-icon-button\n                                    qa-dataid=\"dynamic-selector-edit-apply\"\n                                    icon=\"check\"\n                                    size=\"sm\"\n                                    [radius]=\"buttonRadius()\"\n                                    [ariaLabel]=\"applyLabel()\"\n                                    [tooltip]=\"isNarrow() ? '' : applyLabel()\"\n                                    (clicked)=\"onEditApply(row)\" />\n                            } @else {\n                                <rt-icon-button\n                                    qa-dataid=\"dynamic-selector-edit\"\n                                    icon=\"pencil\"\n                                    size=\"sm\"\n                                    [radius]=\"buttonRadius()\"\n                                    [ariaLabel]=\"editLabel()\"\n                                    [tooltip]=\"isNarrow() ? '' : editLabel()\"\n                                    [disabled]=\"disabled()\"\n                                    (clicked)=\"onEditStart(index, row)\" />\n                            }\n                        }\n\n                        @if (removeShown()) {\n                            <rt-icon-button\n                                qa-dataid=\"dynamic-selector-remove\"\n                                icon=\"trash\"\n                                size=\"sm\"\n                                [radius]=\"buttonRadius()\"\n                                [iconColor]=\"row.locked || disabled() ? 'muted' : 'danger'\"\n                                [ariaLabel]=\"removeLabel()\"\n                                [tooltip]=\"isNarrow() ? '' : removeLabel()\"\n                                [disabled]=\"row.locked || disabled()\"\n                                (clicked)=\"onRemove(row)\" />\n                        }\n                    </div>\n                </div>\n            }\n        </div>\n    }\n\n    @if (actionsShown()) {\n        <div rtElem=\"actions\">\n            <div rtElem=\"add\">\n                <ng-content />\n            </div>\n\n            @if (resetClearShown()) {\n                <rt-icon-button\n                    rtElem=\"reset\"\n                    qa-dataid=\"dynamic-selector-reset\"\n                    icon=\"refresh\"\n                    size=\"sm\"\n                    [radius]=\"buttonRadius()\"\n                    [iconColor]=\"resetDisabled() || disabled() ? 'muted' : 'current'\"\n                    [ariaLabel]=\"resetLabel()\"\n                    [tooltip]=\"isNarrow() ? '' : resetLabel()\"\n                    [disabled]=\"resetDisabled() || disabled()\"\n                    (clicked)=\"onReset()\" />\n                <rt-icon-button\n                    rtElem=\"clear\"\n                    qa-dataid=\"dynamic-selector-clear\"\n                    size=\"sm\"\n                    [icon]=\"clearIcon()\"\n                    [radius]=\"buttonRadius()\"\n                    [iconColor]=\"clearDisabled() || disabled() ? 'muted' : 'danger'\"\n                    [ariaLabel]=\"clearLabel()\"\n                    [tooltip]=\"isNarrow() ? '' : clearLabel()\"\n                    [disabled]=\"clearDisabled() || disabled()\"\n                    (clicked)=\"onClear()\" />\n            }\n        </div>\n    }\n</ng-container>\n",
 			styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-dynamic-selector-list{--rt-dynamic-selector-list-row-bg: var(--rt-color-action-primary-subtle);--rt-dynamic-selector-list-row-radius: var(--rt-radius-sm);--rt-dynamic-selector-list-divider-width: var(--rt-border-width-thin);--rt-dynamic-selector-list-drag-shadow: var(--rt-shadow-md);--rt-dynamic-selector-list-drag-duration: var(--rt-duration-base);--rt-dynamic-selector-list-row-padding-x: var(--rt-space-sm);--rt-dynamic-selector-list-add-font-weight: var(--rt-font-weight-medium);--rt-dynamic-selector-list-add-indent: 0;--rt-dynamic-selector-list-reset-color: var(--rt-color-text-primary);--rt-dynamic-selector-list-actions-gap-default: var(--rt-space-2xs);--rt-dynamic-selector-list-controls-gap-default: var(--rt-space-2xs);--rt-dynamic-selector-list-controls-divider-width-default: 0;--rt-dynamic-selector-list-controls-divider-color-default: var(--rt-color-border-default);--rt-dynamic-selector-list-row-padding-end-default: var(--rt-space-2xs);--rt-dynamic-selector-list-actions-offset-default: var(--rt-space-2xs);--rt-dynamic-selector-list-actions-padding-end-default: 0;--rt-dynamic-selector-list-handle-padding-start-default: 0;--rt-dynamic-selector-list-handle-padding-end-default: var(--rt-space-2xs);--rt-dynamic-selector-list-title-gap-default: var(--rt-space-sm);display:flex;flex-direction:column;gap:var(--rt-dynamic-selector-list-actions-offset, var(--rt-dynamic-selector-list-actions-offset-default))}.rt-dynamic-selector-list__rows{display:flex;flex-direction:column;gap:var(--rt-space-sm)}.rt-dynamic-selector-list__row{display:flex;min-height:var(--rt-control-height-lg);box-sizing:border-box;align-items:center;padding:var(--rt-space-2xs) var(--rt-dynamic-selector-list-row-padding-end, var(--rt-dynamic-selector-list-row-padding-end-default)) var(--rt-space-2xs) var(--rt-dynamic-selector-list-row-padding-x);border-radius:var(--rt-dynamic-selector-list-row-radius);background:var(--rt-dynamic-selector-list-row-bg);color:var(--rt-color-text-primary);gap:var(--rt-space-sm)}.rt-dynamic-selector-list__handle{border-right:var(--rt-dynamic-selector-list-divider-width) solid var(--rt-color-border-default);cursor:grab;margin-inline-end:calc(var(--rt-dynamic-selector-list-title-gap, var(--rt-dynamic-selector-list-title-gap-default)) - var(--rt-space-sm));padding-inline:var(--rt-dynamic-selector-list-handle-padding-start, var(--rt-dynamic-selector-list-handle-padding-start-default)) var(--rt-dynamic-selector-list-handle-padding-end, var(--rt-dynamic-selector-list-handle-padding-end-default))}.rt-dynamic-selector-list__title{min-width:0;flex:1 1 auto;font-size:var(--rt-text-md);overflow-wrap:anywhere}.rt-dynamic-selector-list__title--nowrap{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rt-dynamic-selector-list__field{min-width:0;flex:1 1 auto}.rt-dynamic-selector-list__controls{display:flex;flex:0 0 auto;align-items:center;gap:var(--rt-dynamic-selector-list-controls-gap, var(--rt-dynamic-selector-list-controls-gap-default))}.rt-dynamic-selector-list__controls>:not(:last-child){border-inline-end:var(--rt-dynamic-selector-list-controls-divider-width, var(--rt-dynamic-selector-list-controls-divider-width-default)) solid var(--rt-dynamic-selector-list-controls-divider-color, var(--rt-dynamic-selector-list-controls-divider-color-default))}.rt-dynamic-selector-list__actions{display:flex;align-items:center;gap:var(--rt-dynamic-selector-list-actions-gap, var(--rt-dynamic-selector-list-actions-gap-default));padding-inline-end:var(--rt-dynamic-selector-list-actions-padding-end, var(--rt-dynamic-selector-list-actions-padding-end-default))}.rt-dynamic-selector-list__add{display:flex;min-width:0;flex:1 1 auto;align-items:center;padding-inline-start:var(--rt-dynamic-selector-list-add-indent)}.rt-dynamic-selector-list__add .rt-button{color:var(--rt-dynamic-selector-list-add-color, var(--rt-btn-color));font-weight:var(--rt-dynamic-selector-list-add-font-weight)}.rt-dynamic-selector-list__reset.rt-icon-button{--rt-icon-button-color: var(--rt-dynamic-selector-list-reset-color)}.rt-dynamic-selector-list__clear{flex:none}.rt-dynamic-selector-list__row.cdk-drag-preview{--rt-dynamic-selector-list-row-bg: var(--rt-color-action-primary-subtle);--rt-dynamic-selector-list-row-radius: var(--rt-radius-sm);--rt-dynamic-selector-list-divider-width: var(--rt-border-width-thin);--rt-dynamic-selector-list-drag-shadow: var(--rt-shadow-md);--rt-dynamic-selector-list-actions-gap-default: var(--rt-space-2xs);--rt-dynamic-selector-list-controls-gap-default: var(--rt-space-2xs);--rt-dynamic-selector-list-controls-divider-width-default: 0;--rt-dynamic-selector-list-controls-divider-color-default: var(--rt-color-border-default);--rt-dynamic-selector-list-row-padding-end-default: var(--rt-space-2xs);--rt-dynamic-selector-list-actions-offset-default: var(--rt-space-2xs);--rt-dynamic-selector-list-actions-padding-end-default: 0;--rt-dynamic-selector-list-handle-padding-start-default: 0;--rt-dynamic-selector-list-handle-padding-end-default: var(--rt-space-2xs);--rt-dynamic-selector-list-title-gap-default: var(--rt-space-sm);box-shadow:var(--rt-dynamic-selector-list-drag-shadow)}.rt-dynamic-selector-list__row.cdk-drag-placeholder{opacity:0}.rt-dynamic-selector-list__row.cdk-drag-animating,.rt-dynamic-selector-list__rows.cdk-drop-list-dragging .rt-dynamic-selector-list__row:not(.cdk-drag-placeholder){transition:transform var(--rt-dynamic-selector-list-drag-duration) ease-out}}.rt-dynamic-selector-list__row.cdk-drag-preview{padding:var(--rt-space-2xs) var(--rt-dynamic-selector-list-row-padding-end, var(--rt-space-2xs)) var(--rt-space-2xs) var(--rt-space-sm);background-color:var(--rt-color-bg-surface);background-image:linear-gradient(var(--rt-dynamic-selector-list-row-bg),var(--rt-dynamic-selector-list-row-bg));color:var(--rt-color-text-primary)}\n"]
 		}]
-	}],
-	propDecorators: {
-		rows: [{
-			type: i0.Input,
-			args: [{
-				isSignal: true,
-				alias: "rows",
-				required: false
-			}]
-		}],
-		draggable: [{
-			type: i0.Input,
-			args: [{
-				isSignal: true,
-				alias: "draggable",
-				required: false
-			}]
-		}],
-		editable: [{
-			type: i0.Input,
-			args: [{
-				isSignal: true,
-				alias: "editable",
-				required: false
-			}]
-		}],
-		disabled: [{
-			type: i0.Input,
-			args: [{
-				isSignal: true,
-				alias: "disabled",
-				required: false
-			}]
-		}],
-		actionsShown: [{
-			type: i0.Input,
-			args: [{
-				isSignal: true,
-				alias: "actionsShown",
-				required: false
-			}]
-		}],
-		resetClearShown: [{
-			type: i0.Input,
-			args: [{
-				isSignal: true,
-				alias: "resetClearShown",
-				required: false
-			}]
-		}],
-		removeShown: [{
-			type: i0.Input,
-			args: [{
-				isSignal: true,
-				alias: "removeShown",
-				required: false
-			}]
-		}],
-		resetDisabled: [{
-			type: i0.Input,
-			args: [{
-				isSignal: true,
-				alias: "resetDisabled",
-				required: false
-			}]
-		}],
-		clearDisabled: [{
-			type: i0.Input,
-			args: [{
-				isSignal: true,
-				alias: "clearDisabled",
-				required: false
-			}]
-		}],
-		buttonRadius: [{
-			type: i0.Input,
-			args: [{
-				isSignal: true,
-				alias: "buttonRadius",
-				required: false
-			}]
-		}],
-		clearIcon: [{
-			type: i0.Input,
-			args: [{
-				isSignal: true,
-				alias: "clearIcon",
-				required: false
-			}]
-		}],
-		titleWrap: [{
-			type: i0.Input,
-			args: [{
-				isSignal: true,
-				alias: "titleWrap",
-				required: false
-			}]
-		}],
-		titleTpl: [{
-			type: i0.Input,
-			args: [{
-				isSignal: true,
-				alias: "titleTpl",
-				required: false
-			}]
-		}],
-		controlsTpl: [{
-			type: i0.Input,
-			args: [{
-				isSignal: true,
-				alias: "controlsTpl",
-				required: false
-			}]
-		}],
-		removed: [{
-			type: i0.Output,
-			args: ["removed"]
-		}],
-		moved: [{
-			type: i0.Output,
-			args: ["moved"]
-		}],
-		edited: [{
-			type: i0.Output,
-			args: ["edited"]
-		}],
-		resetClicked: [{
-			type: i0.Output,
-			args: ["resetClicked"]
-		}],
-		cleared: [{
-			type: i0.Output,
-			args: ["cleared"]
-		}]
-	}
+	}]
 });
 var RtDynamicSelectorRowControlsDirective = class RtDynamicSelectorRowControlsDirective {
 	constructor() {
@@ -642,42 +420,11 @@ function dynamicSelectorLabel(item, labelOf) {
 	const label = labelOf(item);
 	return typeof label === "string" || typeof label === "number" ? String(label) : null;
 }
-function dynamicSelectorMatches(label, query) {
-	const words = query.toLowerCase().trim().split(/\s+/).filter(Boolean);
-	const text = label.toLowerCase();
-	return words.every((word) => text.includes(word));
-}
-function dynamicMatchParts(label, query) {
-	const words = query.toLowerCase().trim().split(/\s+/).filter(Boolean);
-	const text = label.toLowerCase();
-	if (words.length === 0 || label === "" || text.length !== label.length) return [{
-		text: label,
-		matched: false
-	}];
-	const marks = Array.from({ length: label.length }, () => false);
-	for (const word of words) {
-		let from = text.indexOf(word);
-		while (from !== -1) {
-			marks.fill(true, from, from + word.length);
-			from = text.indexOf(word, from + 1);
-		}
-	}
-	const parts = [];
-	let start = 0;
-	for (let index = 1; index <= label.length; index++) if (index === label.length || marks[index] !== marks[start]) {
-		parts.push({
-			text: label.slice(start, index),
-			matched: marks[start]
-		});
-		start = index;
-	}
-	return parts;
-}
 function selectableDynamicItems(items, chosenKeys, keyOf, labelOf, query, sortFn) {
 	const chosen = new Set(chosenKeys);
 	return items.filter((item) => {
 		const label = dynamicSelectorLabel(item, labelOf);
-		return label !== null && !chosen.has(keyOf(item)) && dynamicSelectorMatches(label, query);
+		return label !== null && !chosen.has(keyOf(item)) && rtSearchMatches(label, query);
 	}).sort(sortFn ?? ((a, b) => (dynamicSelectorLabel(a, labelOf) ?? "").localeCompare(dynamicSelectorLabel(b, labelOf) ?? "")));
 }
 function toggleDynamicKey(keys, key, checked) {
@@ -744,9 +491,17 @@ function dynamicLabelCase(label, labelCase) {
 }
 const BEM_BLOCK$2 = "rt-dynamic-input";
 var RtDynamicInputComponent = class RtDynamicInputComponent extends RtFormControlBase {
+	#injector;
+	#parts;
+	#initial;
+	#invitationButtonIconDefault;
+	#invitationButtonAppearanceDefault;
+	#clearIconDefault;
+	#titleWrapDefault;
 	constructor() {
-		super(...arguments);
+		super();
 		this.#injector = inject(Injector);
+		this.#parts = inject(RtDynamicSelectorPartsService);
 		this.#initial = signal([], ...ngDevMode ? [{ debugName: "#initial" }] : /* istanbul ignore next */ []);
 		this.#invitationButtonIconDefault = rtKitDefault("dynamicSelector", (it) => it.invitationButtonIcon, null);
 		this.#invitationButtonAppearanceDefault = rtKitDefault("dynamicSelector", (it) => it.invitationButtonAppearance, "outlined");
@@ -823,14 +578,29 @@ var RtDynamicInputComponent = class RtDynamicInputComponent extends RtFormContro
 		});
 		this.listReset = output();
 		this.listCleared = output();
-		this.displayText = computed(() => this.value().join(", "), ...ngDevMode ? [{ debugName: "displayText" }] : /* istanbul ignore next */ []);
-	}
-	#injector;
-	#initial;
-	#invitationButtonIconDefault;
-	#invitationButtonAppearanceDefault;
-	#clearIconDefault;
-	#titleWrapDefault;
+		this.displayText = computed(() => this.value().join(", "), ...ngDevMode ? [{ debugName: "displayText" }] : /* istanbul ignore next */ []);
+		this.#parts.bindList({
+			rows: this.rows,
+			draggable: this.draggable,
+			editable: this.editable,
+			disabled: this.isDisabled,
+			actionsShown: computed(() => !this.isInvitationShown()),
+			resetClearShown: this.listActionsShown,
+			removeShown: this.removeShown,
+			resetDisabled: this.isResetDisabled,
+			clearDisabled: this.isClearDisabled,
+			buttonRadius: this.buttonRadius,
+			clearIcon: this.clearIcon,
+			titleWrap: this.titleWrap,
+			titleTpl: signal(null),
+			controlsTpl: this.controlsTpl,
+			remove: (key) => this.onRemoved(key),
+			move: (move) => this.onMoved(move),
+			edit: (edit) => this.onEdited(edit),
+			reset: () => this.onReset(),
+			clear: () => this.onCleared()
+		});
+	}
 	writeValue(value) {
 		super.writeValue(value === null ? null : [...value]);
 		this.#initial.set([...this.value()]);
@@ -885,7 +655,7 @@ var RtDynamicInputComponent = class RtDynamicInputComponent extends RtFormContro
 			version: "22.2.2",
 			ngImport: i0,
 			type: RtDynamicInputComponent,
-			deps: null,
+			deps: [],
 			target: i0.ɵɵFactoryTarget.Component
 		});
 	}
@@ -1039,7 +809,7 @@ var RtDynamicInputComponent = class RtDynamicInputComponent extends RtFormContro
 			providers: [{
 				provide: RtFormControlBase,
 				useExisting: forwardRef(() => RtDynamicInputComponent)
-			}],
+			}, RtDynamicSelectorPartsService],
 			queries: [{
 				propertyName: "rowControls",
 				first: true,
@@ -1057,7 +827,7 @@ var RtDynamicInputComponent = class RtDynamicInputComponent extends RtFormContro
 			}],
 			usesInheritance: true,
 			ngImport: i0,
-			template: "<ng-container rtBlock=\"rt-dynamic-input\">\n    <!-- Под приглашением пустой список не рисуется: узел нулевой высоты сдвигал бы приглашение зазором. -->\n    @if (rows().length > 0 || !isInvitationShown()) {\n        <rt-dynamic-selector-list\n            [rows]=\"rows()\"\n            [draggable]=\"draggable()\"\n            [buttonRadius]=\"buttonRadius()\"\n            [clearIcon]=\"clearIcon()\"\n            [titleWrap]=\"titleWrap()\"\n            [editable]=\"editable()\"\n            [disabled]=\"isDisabled()\"\n            [actionsShown]=\"!isInvitationShown()\"\n            [resetClearShown]=\"listActionsShown()\"\n            [removeShown]=\"removeShown()\"\n            [resetDisabled]=\"isResetDisabled()\"\n            [clearDisabled]=\"isClearDisabled()\"\n            [controlsTpl]=\"controlsTpl()\"\n            (removed)=\"onRemoved($event)\"\n            (moved)=\"onMoved($event)\"\n            (edited)=\"onEdited($event)\"\n            (resetClicked)=\"onReset()\"\n            (cleared)=\"onCleared()\">\n            @if (isAddShown()) {\n                <button\n                    rtButton\n                    appearance=\"text\"\n                    type=\"button\"\n                    qa-dataid=\"dynamic-input-add\"\n                    [label]=\"addTitle()\"\n                    [attr.aria-label]=\"addTitle()\"\n                    [disabled]=\"isDisabled()\"\n                    (click)=\"onAdd()\"></button>\n            }\n        </rt-dynamic-selector-list>\n    }\n\n    @if (isFieldShown()) {\n        <!-- Подпись поля рисует rt-field: у rt-input своей нет. Обёртка стоит только при подписи —\n             пустая добавила бы зазор под полем и сдвинула прежний вид. -->\n        @if (fieldLabel(); as label) {\n            <rt-field qa-dataid=\"dynamic-input-field-label\" [label]=\"label\">\n                <rt-input\n                    #field\n                    rtElem=\"field\"\n                    qa-dataid=\"dynamic-input-field\"\n                    [appearance]=\"fieldAppearance()\"\n                    [controlId]=\"effectiveControlId()\"\n                    [placeholder]=\"fieldPlaceholder()\"\n                    [ngModel]=\"draft()\"\n                    (ngModelChange)=\"draft.set($event ?? '')\"\n                    (keydown.enter)=\"onCommit()\"\n                    (focusout)=\"onCommit()\" />\n            </rt-field>\n        } @else {\n            <rt-input\n                #field\n                rtElem=\"field\"\n                qa-dataid=\"dynamic-input-field\"\n                [appearance]=\"fieldAppearance()\"\n                [controlId]=\"effectiveControlId()\"\n                [placeholder]=\"fieldPlaceholder()\"\n                [ngModel]=\"draft()\"\n                (ngModelChange)=\"draft.set($event ?? '')\"\n                (keydown.enter)=\"onCommit()\"\n                (focusout)=\"onCommit()\" />\n        }\n    }\n\n    @if (isInvitationShown()) {\n        <rt-empty-state\n            rtElem=\"invitation\"\n            qa-dataid=\"dynamic-input-invitation\"\n            [icon]=\"invitationIcon()\"\n            [glyph]=\"invitationGlyph()\"\n            [description]=\"invitationDescription()\">\n            <button\n                rtButton\n                type=\"button\"\n                qa-dataid=\"dynamic-input-invitation-add\"\n                [appearance]=\"invitationButtonAppearance()\"\n                [icon]=\"invitationButtonIcon()\"\n                [label]=\"addTitle()\"\n                [attr.aria-label]=\"addTitle()\"\n                [disabled]=\"isDisabled()\"\n                (click)=\"onAdd()\"></button>\n        </rt-empty-state>\n    }\n</ng-container>\n",
+			template: "<ng-container rtBlock=\"rt-dynamic-input\">\n    <!-- Под приглашением пустой список не рисуется: узел нулевой высоты сдвигал бы приглашение зазором. -->\n    @if (rows().length > 0 || !isInvitationShown()) {\n        <rt-dynamic-selector-list>\n            @if (isAddShown()) {\n                <button\n                    rtButton\n                    appearance=\"text\"\n                    type=\"button\"\n                    qa-dataid=\"dynamic-input-add\"\n                    [label]=\"addTitle()\"\n                    [attr.aria-label]=\"addTitle()\"\n                    [disabled]=\"isDisabled()\"\n                    (click)=\"onAdd()\"></button>\n            }\n        </rt-dynamic-selector-list>\n    }\n\n    @if (isFieldShown()) {\n        <!-- Подпись поля рисует rt-field: у rt-input своей нет. Обёртка стоит только при подписи —\n             пустая добавила бы зазор под полем и сдвинула прежний вид. -->\n        @if (fieldLabel(); as label) {\n            <rt-field qa-dataid=\"dynamic-input-field-label\" [label]=\"label\">\n                <rt-input\n                    #field\n                    rtElem=\"field\"\n                    qa-dataid=\"dynamic-input-field\"\n                    [appearance]=\"fieldAppearance()\"\n                    [controlId]=\"effectiveControlId()\"\n                    [placeholder]=\"fieldPlaceholder()\"\n                    [ngModel]=\"draft()\"\n                    (ngModelChange)=\"draft.set($event ?? '')\"\n                    (keydown.enter)=\"onCommit()\"\n                    (focusout)=\"onCommit()\" />\n            </rt-field>\n        } @else {\n            <rt-input\n                #field\n                rtElem=\"field\"\n                qa-dataid=\"dynamic-input-field\"\n                [appearance]=\"fieldAppearance()\"\n                [controlId]=\"effectiveControlId()\"\n                [placeholder]=\"fieldPlaceholder()\"\n                [ngModel]=\"draft()\"\n                (ngModelChange)=\"draft.set($event ?? '')\"\n                (keydown.enter)=\"onCommit()\"\n                (focusout)=\"onCommit()\" />\n        }\n    }\n\n    @if (isInvitationShown()) {\n        <rt-empty-state\n            rtElem=\"invitation\"\n            qa-dataid=\"dynamic-input-invitation\"\n            [icon]=\"invitationIcon()\"\n            [glyph]=\"invitationGlyph()\"\n            [description]=\"invitationDescription()\">\n            <button\n                rtButton\n                type=\"button\"\n                qa-dataid=\"dynamic-input-invitation-add\"\n                [appearance]=\"invitationButtonAppearance()\"\n                [icon]=\"invitationButtonIcon()\"\n                [label]=\"addTitle()\"\n                [attr.aria-label]=\"addTitle()\"\n                [disabled]=\"isDisabled()\"\n                (click)=\"onAdd()\"></button>\n        </rt-empty-state>\n    }\n</ng-container>\n",
 			styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-dynamic-input{display:flex;width:100%;flex-direction:column;gap:var(--rt-space-sm)}.rt-dynamic-input__field,.rt-dynamic-input__invitation{min-width:0}}\n"],
 			dependencies: [
 				{
@@ -1114,30 +884,7 @@ var RtDynamicInputComponent = class RtDynamicInputComponent extends RtFormContro
 				{
 					kind: "component",
 					type: RtDynamicSelectorListComponent,
-					selector: "rt-dynamic-selector-list",
-					inputs: [
-						"rows",
-						"draggable",
-						"editable",
-						"disabled",
-						"actionsShown",
-						"resetClearShown",
-						"removeShown",
-						"resetDisabled",
-						"clearDisabled",
-						"buttonRadius",
-						"clearIcon",
-						"titleWrap",
-						"titleTpl",
-						"controlsTpl"
-					],
-					outputs: [
-						"removed",
-						"moved",
-						"edited",
-						"resetClicked",
-						"cleared"
-					]
+					selector: "rt-dynamic-selector-list"
 				},
 				{
 					kind: "component",
@@ -1211,12 +958,13 @@ i0.ɵɵngDeclareClassMetadata({
 			providers: [{
 				provide: RtFormControlBase,
 				useExisting: forwardRef(() => RtDynamicInputComponent)
-			}],
+			}, RtDynamicSelectorPartsService],
 			host: { class: BEM_BLOCK$2 },
-			template: "<ng-container rtBlock=\"rt-dynamic-input\">\n    <!-- Под приглашением пустой список не рисуется: узел нулевой высоты сдвигал бы приглашение зазором. -->\n    @if (rows().length > 0 || !isInvitationShown()) {\n        <rt-dynamic-selector-list\n            [rows]=\"rows()\"\n            [draggable]=\"draggable()\"\n            [buttonRadius]=\"buttonRadius()\"\n            [clearIcon]=\"clearIcon()\"\n            [titleWrap]=\"titleWrap()\"\n            [editable]=\"editable()\"\n            [disabled]=\"isDisabled()\"\n            [actionsShown]=\"!isInvitationShown()\"\n            [resetClearShown]=\"listActionsShown()\"\n            [removeShown]=\"removeShown()\"\n            [resetDisabled]=\"isResetDisabled()\"\n            [clearDisabled]=\"isClearDisabled()\"\n            [controlsTpl]=\"controlsTpl()\"\n            (removed)=\"onRemoved($event)\"\n            (moved)=\"onMoved($event)\"\n            (edited)=\"onEdited($event)\"\n            (resetClicked)=\"onReset()\"\n            (cleared)=\"onCleared()\">\n            @if (isAddShown()) {\n                <button\n                    rtButton\n                    appearance=\"text\"\n                    type=\"button\"\n                    qa-dataid=\"dynamic-input-add\"\n                    [label]=\"addTitle()\"\n                    [attr.aria-label]=\"addTitle()\"\n                    [disabled]=\"isDisabled()\"\n                    (click)=\"onAdd()\"></button>\n            }\n        </rt-dynamic-selector-list>\n    }\n\n    @if (isFieldShown()) {\n        <!-- Подпись поля рисует rt-field: у rt-input своей нет. Обёртка стоит только при подписи —\n             пустая добавила бы зазор под полем и сдвинула прежний вид. -->\n        @if (fieldLabel(); as label) {\n            <rt-field qa-dataid=\"dynamic-input-field-label\" [label]=\"label\">\n                <rt-input\n                    #field\n                    rtElem=\"field\"\n                    qa-dataid=\"dynamic-input-field\"\n                    [appearance]=\"fieldAppearance()\"\n                    [controlId]=\"effectiveControlId()\"\n                    [placeholder]=\"fieldPlaceholder()\"\n                    [ngModel]=\"draft()\"\n                    (ngModelChange)=\"draft.set($event ?? '')\"\n                    (keydown.enter)=\"onCommit()\"\n                    (focusout)=\"onCommit()\" />\n            </rt-field>\n        } @else {\n            <rt-input\n                #field\n                rtElem=\"field\"\n                qa-dataid=\"dynamic-input-field\"\n                [appearance]=\"fieldAppearance()\"\n                [controlId]=\"effectiveControlId()\"\n                [placeholder]=\"fieldPlaceholder()\"\n                [ngModel]=\"draft()\"\n                (ngModelChange)=\"draft.set($event ?? '')\"\n                (keydown.enter)=\"onCommit()\"\n                (focusout)=\"onCommit()\" />\n        }\n    }\n\n    @if (isInvitationShown()) {\n        <rt-empty-state\n            rtElem=\"invitation\"\n            qa-dataid=\"dynamic-input-invitation\"\n            [icon]=\"invitationIcon()\"\n            [glyph]=\"invitationGlyph()\"\n            [description]=\"invitationDescription()\">\n            <button\n                rtButton\n                type=\"button\"\n                qa-dataid=\"dynamic-input-invitation-add\"\n                [appearance]=\"invitationButtonAppearance()\"\n                [icon]=\"invitationButtonIcon()\"\n                [label]=\"addTitle()\"\n                [attr.aria-label]=\"addTitle()\"\n                [disabled]=\"isDisabled()\"\n                (click)=\"onAdd()\"></button>\n        </rt-empty-state>\n    }\n</ng-container>\n",
+			template: "<ng-container rtBlock=\"rt-dynamic-input\">\n    <!-- Под приглашением пустой список не рисуется: узел нулевой высоты сдвигал бы приглашение зазором. -->\n    @if (rows().length > 0 || !isInvitationShown()) {\n        <rt-dynamic-selector-list>\n            @if (isAddShown()) {\n                <button\n                    rtButton\n                    appearance=\"text\"\n                    type=\"button\"\n                    qa-dataid=\"dynamic-input-add\"\n                    [label]=\"addTitle()\"\n                    [attr.aria-label]=\"addTitle()\"\n                    [disabled]=\"isDisabled()\"\n                    (click)=\"onAdd()\"></button>\n            }\n        </rt-dynamic-selector-list>\n    }\n\n    @if (isFieldShown()) {\n        <!-- Подпись поля рисует rt-field: у rt-input своей нет. Обёртка стоит только при подписи —\n             пустая добавила бы зазор под полем и сдвинула прежний вид. -->\n        @if (fieldLabel(); as label) {\n            <rt-field qa-dataid=\"dynamic-input-field-label\" [label]=\"label\">\n                <rt-input\n                    #field\n                    rtElem=\"field\"\n                    qa-dataid=\"dynamic-input-field\"\n                    [appearance]=\"fieldAppearance()\"\n                    [controlId]=\"effectiveControlId()\"\n                    [placeholder]=\"fieldPlaceholder()\"\n                    [ngModel]=\"draft()\"\n                    (ngModelChange)=\"draft.set($event ?? '')\"\n                    (keydown.enter)=\"onCommit()\"\n                    (focusout)=\"onCommit()\" />\n            </rt-field>\n        } @else {\n            <rt-input\n                #field\n                rtElem=\"field\"\n                qa-dataid=\"dynamic-input-field\"\n                [appearance]=\"fieldAppearance()\"\n                [controlId]=\"effectiveControlId()\"\n                [placeholder]=\"fieldPlaceholder()\"\n                [ngModel]=\"draft()\"\n                (ngModelChange)=\"draft.set($event ?? '')\"\n                (keydown.enter)=\"onCommit()\"\n                (focusout)=\"onCommit()\" />\n        }\n    }\n\n    @if (isInvitationShown()) {\n        <rt-empty-state\n            rtElem=\"invitation\"\n            qa-dataid=\"dynamic-input-invitation\"\n            [icon]=\"invitationIcon()\"\n            [glyph]=\"invitationGlyph()\"\n            [description]=\"invitationDescription()\">\n            <button\n                rtButton\n                type=\"button\"\n                qa-dataid=\"dynamic-input-invitation-add\"\n                [appearance]=\"invitationButtonAppearance()\"\n                [icon]=\"invitationButtonIcon()\"\n                [label]=\"addTitle()\"\n                [attr.aria-label]=\"addTitle()\"\n                [disabled]=\"isDisabled()\"\n                (click)=\"onAdd()\"></button>\n        </rt-empty-state>\n    }\n</ng-container>\n",
 			styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-dynamic-input{display:flex;width:100%;flex-direction:column;gap:var(--rt-space-sm)}.rt-dynamic-input__field,.rt-dynamic-input__invitation{min-width:0}}\n"]
 		}]
 	}],
+	ctorParameters: () => [],
 	propDecorators: {
 		field: [{
 			type: i0.ViewChild,
@@ -1392,12 +1140,23 @@ i0.ɵɵngDeclareClassMetadata({
 	}
 });
 const BEM_BLOCK$1 = "rt-dynamic-selector-popup";
+const ROW_CONTROL = `.${BEM_BLOCK$1}__row [role="checkbox"], .${BEM_BLOCK$1}__row [role="radio"]`;
 const RT_DYNAMIC_SELECTOR_SEARCH_DEBOUNCE = 500;
 var RtDynamicSelectorPopupComponent = class RtDynamicSelectorPopupComponent {
 	constructor() {
 		this.#destroyRef = inject(DestroyRef);
+		this.#host = inject(ElementRef);
 		this.#injector = inject(Injector);
 		this.#searchSource = new Subject();
+		this.#source = inject(RtDynamicSelectorPartsService).popup;
+		this.optionList = new RtOptionList({
+			panelId: () => BEM_BLOCK$1,
+			isOpen: () => false,
+			count: () => this.rowItems().length,
+			chooseKeys: /* @__PURE__ */ new Set(),
+			sideKeys: false,
+			edgeKeys: true
+		});
 		this.searchLabel = rtKitLabel("dynamicSelectorSearch");
 		this.searchField = viewChild("searchField", {
 			...ngDevMode ? { debugName: "searchField" } : /* istanbul ignore next */ {},
@@ -1420,7 +1179,7 @@ var RtDynamicSelectorPopupComponent = class RtDynamicSelectorPopupComponent {
 			if (!this.localSearch() || query.trim() === "") return [...this.entities()];
 			return this.entities().filter((item) => {
 				const label = dynamicSelectorLabel(item, (entity) => this.#labelOf(entity));
-				return label !== null && dynamicSelectorMatches(label, query);
+				return label !== null && rtSearchMatches(label, query);
 			});
 		}, ...ngDevMode ? [{ debugName: "found" }] : /* istanbul ignore next */ []);
 		this.rows = computed(() => dynamicPopupRows(this.entities(), this.found(), this.raised(), (item) => this.#keyOf(item), this.query()), ...ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []);
@@ -1436,7 +1195,7 @@ var RtDynamicSelectorPopupComponent = class RtDynamicSelectorPopupComponent {
 				entity: item,
 				key: this.#keyOf(item),
 				label: labelOf(item),
-				parts: highlight ? dynamicMatchParts(labelOf(item), query) : [{
+				parts: highlight ? rtMatchParts(labelOf(item), query) : [{
 					text: labelOf(item),
 					matched: false
 				}],
@@ -1454,76 +1213,46 @@ var RtDynamicSelectorPopupComponent = class RtDynamicSelectorPopupComponent {
 		this.lastPinnedKey = computed(() => lastPinnedDynamicKey(this.rows().found, this.pinnedKeys(), (item) => this.#keyOf(item)), ...ngDevMode ? [{ debugName: "lastPinnedKey" }] : /* istanbul ignore next */ []);
 		this.isApplyDisabled = computed(() => this.ticked().length === 0 || this.loading(), ...ngDevMode ? [{ debugName: "isApplyDisabled" }] : /* istanbul ignore next */ []);
 		this.isNavShown = computed(() => !!this.navigateTitle() && !!this.navigateLink(), ...ngDevMode ? [{ debugName: "isNavShown" }] : /* istanbul ignore next */ []);
-		this.entities = input([], ...ngDevMode ? [{ debugName: "entities" }] : /* istanbul ignore next */ []);
-		this.keyExp = input.required(...ngDevMode ? [{ debugName: "keyExp" }] : /* istanbul ignore next */ []);
-		this.displayExp = input.required(...ngDevMode ? [{ debugName: "displayExp" }] : /* istanbul ignore next */ []);
-		this.displayWith = input(null, ...ngDevMode ? [{ debugName: "displayWith" }] : /* istanbul ignore next */ []);
-		this.mode = input("multi", ...ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []);
-		this.multiToggleShown = input(false, {
-			...ngDevMode ? { debugName: "multiToggleShown" } : /* istanbul ignore next */ {},
-			transform: booleanAttribute
-		});
-		this.selectAllShown = input(true, {
-			...ngDevMode ? { debugName: "selectAllShown" } : /* istanbul ignore next */ {},
-			transform: booleanAttribute
-		});
-		this.localSearch = input(true, {
-			...ngDevMode ? { debugName: "localSearch" } : /* istanbul ignore next */ {},
-			transform: booleanAttribute
-		});
-		this.lazyLoad = input(false, {
-			...ngDevMode ? { debugName: "lazyLoad" } : /* istanbul ignore next */ {},
-			transform: booleanAttribute
-		});
-		this.loading = input(false, {
-			...ngDevMode ? { debugName: "loading" } : /* istanbul ignore next */ {},
-			transform: booleanAttribute
-		});
-		this.fetching = input(false, {
-			...ngDevMode ? { debugName: "fetching" } : /* istanbul ignore next */ {},
-			transform: booleanAttribute
-		});
-		this.pinnedKeys = input([], ...ngDevMode ? [{ debugName: "pinnedKeys" }] : /* istanbul ignore next */ []);
-		this.navigateTitle = input("", ...ngDevMode ? [{ debugName: "navigateTitle" }] : /* istanbul ignore next */ []);
-		this.navigateLink = input("", ...ngDevMode ? [{ debugName: "navigateLink" }] : /* istanbul ignore next */ []);
-		this.searchTerm = input("", ...ngDevMode ? [{ debugName: "searchTerm" }] : /* istanbul ignore next */ []);
-		this.searchAppearance = input("outline", ...ngDevMode ? [{ debugName: "searchAppearance" }] : /* istanbul ignore next */ []);
-		this.searchRadius = input(null, ...ngDevMode ? [{ debugName: "searchRadius" }] : /* istanbul ignore next */ []);
-		this.emptyResultsText = input("", ...ngDevMode ? [{ debugName: "emptyResultsText" }] : /* istanbul ignore next */ []);
-		this.applyLabel = input("", ...ngDevMode ? [{ debugName: "applyLabel" }] : /* istanbul ignore next */ []);
-		this.applyLabelCase = input("none", ...ngDevMode ? [{ debugName: "applyLabelCase" }] : /* istanbul ignore next */ []);
-		this.autofocusSearch = input(false, {
-			...ngDevMode ? { debugName: "autofocusSearch" } : /* istanbul ignore next */ {},
-			transform: booleanAttribute
-		});
-		this.titleWrap = input(true, {
-			...ngDevMode ? { debugName: "titleWrap" } : /* istanbul ignore next */ {},
-			transform: booleanAttribute
-		});
-		this.highlightSearch = input(false, {
-			...ngDevMode ? { debugName: "highlightSearch" } : /* istanbul ignore next */ {},
-			transform: booleanAttribute
-		});
-		this.applied = output();
-		this.cancelled = output();
-		this.searchChange = output();
-		this.loadMore = output();
-		this.temporaryChoiceChange = output();
+		this.entities = this.#source.entities;
+		this.keyExp = this.#source.settings.keyExp;
+		this.displayExp = this.#source.settings.displayExp;
+		this.displayWith = this.#source.settings.displayWith;
+		this.mode = this.#source.settings.mode;
+		this.multiToggleShown = this.#source.settings.multiToggleShown;
+		this.selectAllShown = this.#source.settings.selectAllShown;
+		this.localSearch = this.#source.settings.localSearch;
+		this.lazyLoad = this.#source.settings.lazyLoad;
+		this.loading = this.#source.settings.loading;
+		this.fetching = this.#source.settings.fetching;
+		this.pinnedKeys = this.#source.settings.pinnedKeys;
+		this.navigateTitle = this.#source.settings.navigateTitle;
+		this.navigateLink = this.#source.settings.navigateLink;
+		this.searchTerm = this.#source.settings.searchTerm;
+		this.searchAppearance = this.#source.settings.searchAppearance;
+		this.searchRadius = this.#source.settings.searchRadius;
+		this.emptyResultsText = this.#source.settings.emptyResultsText;
+		this.applyLabel = this.#source.settings.applyLabel;
+		this.applyLabelCase = this.#source.settings.applyLabelCase;
+		this.autofocusSearch = this.#source.settings.autofocusSearch;
+		this.titleWrap = this.#source.settings.titleWrap;
+		this.highlightSearch = this.#source.settings.highlightSearch;
 	}
 	#destroyRef;
+	#host;
 	#injector;
 	#searchSource;
+	#source;
 	ngOnInit() {
 		this.query.set(this.searchTerm());
-		this.temporaryChoiceChange.emit([]);
-		this.#searchSource.pipe(debounceTime(500), takeUntilDestroyed(this.#destroyRef)).subscribe((query) => this.searchChange.emit(query));
+		this.#source.temporaryChoice([]);
+		this.#searchSource.pipe(debounceTime(500), takeUntilDestroyed(this.#destroyRef)).subscribe((query) => this.#source.search(query));
 		if (this.autofocusSearch()) afterNextRender(() => this.searchField()?.nativeElement.querySelector("input")?.focus({ preventScroll: true }), { injector: this.#injector });
 	}
 	onQueryChange(value) {
 		const query = value ?? "";
 		this.raised.set([...this.ticked()]);
 		this.query.set(query);
-		this.temporaryChoiceChange.emit(this.#tickedEntities());
+		this.#source.temporaryChoice(this.#tickedEntities());
 		if (!this.localSearch()) this.#searchSource.next(query);
 	}
 	onRowClick(event, item) {
@@ -1541,210 +1270,77 @@ var RtDynamicSelectorPopupComponent = class RtDynamicSelectorPopupComponent {
 	onMultiToggle(value) {
 		this.isMultiOn.set(value);
 	}
-	onApply() {
-		if (!this.isApplyDisabled()) this.applied.emit([...this.ticked()]);
-	}
-	onCancel() {
-		this.cancelled.emit();
-	}
-	#tickedEntities() {
-		return this.ticked().map((key) => this.entities().find((item) => this.#keyOf(item) === key)).filter((item) => item !== void 0);
-	}
-	#keyOf(item) {
-		return item[this.keyExp()];
-	}
-	#labelOf(item) {
-		const displayWith = this.displayWith();
-		return displayWith === null ? item[this.displayExp()] : displayWith(item);
-	}
-	static {
-		this.ɵfac = i0.ɵɵngDeclareFactory({
-			minVersion: "12.0.0",
-			version: "22.2.2",
-			ngImport: i0,
-			type: RtDynamicSelectorPopupComponent,
-			deps: [],
-			target: i0.ɵɵFactoryTarget.Component
-		});
-	}
-	static {
-		this.ɵcmp = i0.ɵɵngDeclareComponent({
-			minVersion: "17.0.0",
-			version: "22.2.2",
-			type: RtDynamicSelectorPopupComponent,
-			isStandalone: true,
-			selector: "rt-dynamic-selector-popup",
-			inputs: {
-				entities: {
-					classPropertyName: "entities",
-					publicName: "entities",
-					isSignal: true,
-					isRequired: false,
-					transformFunction: null
-				},
-				keyExp: {
-					classPropertyName: "keyExp",
-					publicName: "keyExp",
-					isSignal: true,
-					isRequired: true,
-					transformFunction: null
-				},
-				displayExp: {
-					classPropertyName: "displayExp",
-					publicName: "displayExp",
-					isSignal: true,
-					isRequired: true,
-					transformFunction: null
-				},
-				displayWith: {
-					classPropertyName: "displayWith",
-					publicName: "displayWith",
-					isSignal: true,
-					isRequired: false,
-					transformFunction: null
-				},
-				mode: {
-					classPropertyName: "mode",
-					publicName: "mode",
-					isSignal: true,
-					isRequired: false,
-					transformFunction: null
-				},
-				multiToggleShown: {
-					classPropertyName: "multiToggleShown",
-					publicName: "multiToggleShown",
-					isSignal: true,
-					isRequired: false,
-					transformFunction: null
-				},
-				selectAllShown: {
-					classPropertyName: "selectAllShown",
-					publicName: "selectAllShown",
-					isSignal: true,
-					isRequired: false,
-					transformFunction: null
-				},
-				localSearch: {
-					classPropertyName: "localSearch",
-					publicName: "localSearch",
-					isSignal: true,
-					isRequired: false,
-					transformFunction: null
-				},
-				lazyLoad: {
-					classPropertyName: "lazyLoad",
-					publicName: "lazyLoad",
-					isSignal: true,
-					isRequired: false,
-					transformFunction: null
-				},
-				loading: {
-					classPropertyName: "loading",
-					publicName: "loading",
-					isSignal: true,
-					isRequired: false,
-					transformFunction: null
-				},
-				fetching: {
-					classPropertyName: "fetching",
-					publicName: "fetching",
-					isSignal: true,
-					isRequired: false,
-					transformFunction: null
-				},
-				pinnedKeys: {
-					classPropertyName: "pinnedKeys",
-					publicName: "pinnedKeys",
-					isSignal: true,
-					isRequired: false,
-					transformFunction: null
-				},
-				navigateTitle: {
-					classPropertyName: "navigateTitle",
-					publicName: "navigateTitle",
-					isSignal: true,
-					isRequired: false,
-					transformFunction: null
-				},
-				navigateLink: {
-					classPropertyName: "navigateLink",
-					publicName: "navigateLink",
-					isSignal: true,
-					isRequired: false,
-					transformFunction: null
-				},
-				searchTerm: {
-					classPropertyName: "searchTerm",
-					publicName: "searchTerm",
-					isSignal: true,
-					isRequired: false,
-					transformFunction: null
-				},
-				searchAppearance: {
-					classPropertyName: "searchAppearance",
-					publicName: "searchAppearance",
-					isSignal: true,
-					isRequired: false,
-					transformFunction: null
-				},
-				searchRadius: {
-					classPropertyName: "searchRadius",
-					publicName: "searchRadius",
-					isSignal: true,
-					isRequired: false,
-					transformFunction: null
-				},
-				emptyResultsText: {
-					classPropertyName: "emptyResultsText",
-					publicName: "emptyResultsText",
-					isSignal: true,
-					isRequired: false,
-					transformFunction: null
-				},
-				applyLabel: {
-					classPropertyName: "applyLabel",
-					publicName: "applyLabel",
-					isSignal: true,
-					isRequired: false,
-					transformFunction: null
-				},
-				applyLabelCase: {
-					classPropertyName: "applyLabelCase",
-					publicName: "applyLabelCase",
-					isSignal: true,
-					isRequired: false,
-					transformFunction: null
-				},
-				autofocusSearch: {
-					classPropertyName: "autofocusSearch",
-					publicName: "autofocusSearch",
-					isSignal: true,
-					isRequired: false,
-					transformFunction: null
-				},
-				titleWrap: {
-					classPropertyName: "titleWrap",
-					publicName: "titleWrap",
-					isSignal: true,
-					isRequired: false,
-					transformFunction: null
-				},
-				highlightSearch: {
-					classPropertyName: "highlightSearch",
-					publicName: "highlightSearch",
-					isSignal: true,
-					isRequired: false,
-					transformFunction: null
-				}
-			},
-			outputs: {
-				applied: "applied",
-				cancelled: "cancelled",
-				searchChange: "searchChange",
-				loadMore: "loadMore",
-				temporaryChoiceChange: "temporaryChoiceChange"
+	onApply() {
+		if (!this.isApplyDisabled()) this.#source.apply([...this.ticked()]);
+	}
+	onCancel() {
+		this.#source.cancel();
+	}
+	onLoadMore() {
+		this.#source.loadMore();
+	}
+	onKeydown(event) {
+		const target = event.target;
+		if (!(target instanceof Node)) return;
+		const controls = Array.from(this.#host.nativeElement.querySelectorAll(ROW_CONTROL));
+		const index = controls.findIndex((control) => control.contains(target));
+		const inSearch = this.searchField()?.nativeElement.contains(target) ?? false;
+		if (controls.length === 0 || index < 0 && !inSearch) return;
+		this.optionList.activeIndex.set(index);
+		if (this.#moveBy(this.optionList.actionOf(event.key), inSearch)) {
+			event.preventDefault();
+			controls[this.optionList.activeIndex()]?.focus();
+		}
+	}
+	#moveBy(action, inSearch) {
+		switch (action) {
+			case "next":
+				this.optionList.move(1);
+				return true;
+			case "previous":
+				if (inSearch) this.optionList.last();
+				else this.optionList.move(-1);
+				return true;
+			case "first":
+			case "last":
+				if (inSearch) return false;
+				if (action === "first") this.optionList.first();
+				else this.optionList.last();
+				return true;
+			default: return false;
+		}
+	}
+	#tickedEntities() {
+		return this.ticked().map((key) => this.entities().find((item) => this.#keyOf(item) === key)).filter((item) => item !== void 0);
+	}
+	#keyOf(item) {
+		return item[this.keyExp()];
+	}
+	#labelOf(item) {
+		const displayWith = this.displayWith();
+		return displayWith === null ? item[this.displayExp()] : displayWith(item);
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: RtDynamicSelectorPopupComponent,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Component
+		});
+	}
+	static {
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "17.0.0",
+			version: "22.2.2",
+			type: RtDynamicSelectorPopupComponent,
+			isStandalone: true,
+			selector: "rt-dynamic-selector-popup",
+			host: {
+				listeners: { "keydown": "onKeydown($event)" },
+				classAttribute: "rt-dynamic-selector-popup"
 			},
-			host: { classAttribute: "rt-dynamic-selector-popup" },
 			viewQueries: [{
 				propertyName: "searchField",
 				first: true,
@@ -1754,7 +1350,7 @@ var RtDynamicSelectorPopupComponent = class RtDynamicSelectorPopupComponent {
 				isSignal: true
 			}],
 			ngImport: i0,
-			template: "<ng-container rtBlock=\"rt-dynamic-selector-popup\">\n    <div rtElem=\"head\">\n        <rt-input\n            #searchField\n            rtElem=\"search\"\n            qa-dataid=\"dynamic-selector-search\"\n            iconLeft=\"search\"\n            [appearance]=\"searchAppearance()\"\n            [radius]=\"searchRadius()\"\n            [placeholder]=\"searchLabel()\"\n            [ngModel]=\"query()\"\n            (ngModelChange)=\"onQueryChange($event)\" />\n\n        @if (isMultiToggleVisible() || isSelectAllShown()) {\n            <div rtElem=\"controls\">\n                @if (isMultiToggleVisible()) {\n                    <div rtElem=\"multi\">\n                        <rt-toggle-switch\n                            qa-dataid=\"dynamic-selector-multi\"\n                            [ariaLabel]=\"multiLabel()\"\n                            [ngModel]=\"isMultiOn()\"\n                            [ngModelOptions]=\"{ standalone: true }\"\n                            (ngModelChange)=\"onMultiToggle($event)\" />\n                        <span rtElem=\"multi-label\">{{ multiLabel() }}</span>\n                        <rt-icon rtElem=\"multi-hint-icon\" name=\"info-circle\" size=\"sm\" [rtTooltip]=\"multiHintLabel()\" />\n                        <span rtElem=\"multi-hint\">{{ multiHintLabel() }}</span>\n                    </div>\n                }\n\n                @if (isSelectAllShown()) {\n                    <rt-checkbox\n                        rtElem=\"select-all\"\n                        qa-dataid=\"dynamic-selector-select-all\"\n                        [indeterminate]=\"selectAllState() === 'some'\"\n                        [ngModel]=\"selectAllState() === 'all'\"\n                        [ngModelOptions]=\"{ standalone: true }\"\n                        (ngModelChange)=\"onSelectAll($event)\">\n                        {{ selectAllLabel() }}\n                    </rt-checkbox>\n                }\n            </div>\n        }\n    </div>\n\n    @if (loading()) {\n        <div rtElem=\"state\" qa-dataid=\"dynamic-selector-loading\">\n            <rt-spinner [diameter]=\"24\" />\n        </div>\n    } @else if (hasRows()) {\n        <div rtElem=\"list\" qa-dataid=\"dynamic-selector-options\">\n            @for (row of rowItems(); track row.key) {\n                <div rtElem=\"row\" [rtMod]=\"{ separated: row.separated, nowrap: !titleWrap(), own: isSingle() && ownLabel() }\">\n                    @if (isSingle()) {\n                        <!-- Без переноса и при подсветке поиска подпись рисует окно рядом с кнопкой: подсказка\n                             меряет обрезку своего узла, а подпись внутри кнопки окну недоступна. -->\n                        <rt-radio-button\n                            rtElem=\"option\"\n                            qa-dataid=\"dynamic-selector-option\"\n                            [value]=\"row.key\"\n                            [checked]=\"row.ticked\"\n                            [label]=\"ownLabel() ? '' : row.label\"\n                            [ariaLabel]=\"ownLabel() ? row.label : null\"\n                            [rtMod]=\"{ fixed: ownLabel() }\"\n                            (checkedChange)=\"onRadioChange(row.entity)\" />\n                        @if (ownLabel()) {\n                            <!-- Фокус и клавиатура остаются на кнопке: она названа этой же подписью, а подпись даёт нажать мышью, как label. -->\n                            <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\n                            <span\n                                rtElem=\"option-label\"\n                                qa-dataid=\"dynamic-selector-option-label\"\n                                rtTooltipWhenTruncated\n                                [rtTooltip]=\"titleWrap() ? '' : row.label\"\n                                (click)=\"onRadioChange(row.entity)\">\n                                <ng-container *ngTemplateOutlet=\"labelParts; context: { $implicit: row.parts }\" />\n                            </span>\n                        }\n                    } @else {\n                        <rt-checkbox\n                            rtElem=\"option\"\n                            qa-dataid=\"dynamic-selector-option\"\n                            [ngModel]=\"row.ticked\"\n                            [ngModelOptions]=\"{ standalone: true }\"\n                            (click)=\"onRowClick($event, row.entity)\">\n                            <span\n                                rtElem=\"option-label\"\n                                qa-dataid=\"dynamic-selector-option-label\"\n                                rtTooltipWhenTruncated\n                                [rtTooltip]=\"titleWrap() ? '' : row.label\">\n                                <ng-container *ngTemplateOutlet=\"labelParts; context: { $implicit: row.parts }\" />\n                            </span>\n                        </rt-checkbox>\n                    }\n                </div>\n            }\n\n            <div rtElem=\"sentinel\" rtInfiniteScroll [disabled]=\"!lazyLoad() || fetching()\" (loadMore)=\"loadMore.emit()\"></div>\n\n            @if (fetching()) {\n                <div rtElem=\"fetching\" qa-dataid=\"dynamic-selector-fetching\">\n                    <rt-spinner [diameter]=\"20\" />\n                </div>\n            }\n        </div>\n    } @else {\n        <rt-empty-state rtElem=\"empty\" qa-dataid=\"dynamic-selector-no-results\" icon=\"search\" [title]=\"emptyText()\" />\n    }\n\n    <div rtElem=\"foot\" [rtMod]=\"{ nav: isNavShown() }\">\n        @if (isNavShown()) {\n            <a rtElem=\"nav\" qa-dataid=\"dynamic-selector-nav\" [routerLink]=\"navigateLink()\" [rtTooltip]=\"navigateTitle()\">\n                {{ navigateTitle() }}\n            </a>\n        }\n\n        <div rtElem=\"actions\">\n            <button\n                rtButton\n                appearance=\"text\"\n                type=\"button\"\n                qa-dataid=\"dynamic-selector-cancel\"\n                [label]=\"cancelLabel()\"\n                [attr.aria-label]=\"cancelLabel()\"\n                (click)=\"onCancel()\"></button>\n            <button\n                rtButton\n                type=\"button\"\n                qa-dataid=\"dynamic-selector-apply\"\n                [label]=\"applyText()\"\n                [attr.aria-label]=\"applyText()\"\n                [disabled]=\"isApplyDisabled()\"\n                (click)=\"onApply()\"></button>\n        </div>\n    </div>\n\n    <!-- Куски подписи стоят без пробелов между собой: пробел в разметке разорвал бы слово на подсвеченной границе. -->\n    <!-- prettier-ignore -->\n    <ng-template #labelParts let-parts>@for (part of parts; track $index) {@if (part.matched) {<mark rtElem=\"match\">{{ part.text }}</mark>} @else {{{ part.text }}}}</ng-template>\n</ng-container>\n",
+			template: "<ng-container rtBlock=\"rt-dynamic-selector-popup\">\n    <div rtElem=\"head\">\n        <rt-input\n            #searchField\n            rtElem=\"search\"\n            qa-dataid=\"dynamic-selector-search\"\n            iconLeft=\"search\"\n            [appearance]=\"searchAppearance()\"\n            [radius]=\"searchRadius()\"\n            [placeholder]=\"searchLabel()\"\n            [ngModel]=\"query()\"\n            (ngModelChange)=\"onQueryChange($event)\" />\n\n        @if (isMultiToggleVisible() || isSelectAllShown()) {\n            <div rtElem=\"controls\">\n                @if (isMultiToggleVisible()) {\n                    <div rtElem=\"multi\">\n                        <rt-toggle-switch\n                            qa-dataid=\"dynamic-selector-multi\"\n                            [ariaLabel]=\"multiLabel()\"\n                            [ngModel]=\"isMultiOn()\"\n                            [ngModelOptions]=\"{ standalone: true }\"\n                            (ngModelChange)=\"onMultiToggle($event)\" />\n                        <span rtElem=\"multi-label\">{{ multiLabel() }}</span>\n                        <rt-icon rtElem=\"multi-hint-icon\" name=\"info-circle\" size=\"sm\" [rtTooltip]=\"multiHintLabel()\" />\n                        <span rtElem=\"multi-hint\">{{ multiHintLabel() }}</span>\n                    </div>\n                }\n\n                @if (isSelectAllShown()) {\n                    <rt-checkbox\n                        rtElem=\"select-all\"\n                        qa-dataid=\"dynamic-selector-select-all\"\n                        [indeterminate]=\"selectAllState() === 'some'\"\n                        [ngModel]=\"selectAllState() === 'all'\"\n                        [ngModelOptions]=\"{ standalone: true }\"\n                        (ngModelChange)=\"onSelectAll($event)\">\n                        {{ selectAllLabel() }}\n                    </rt-checkbox>\n                }\n            </div>\n        }\n    </div>\n\n    @if (loading()) {\n        <div rtElem=\"state\" qa-dataid=\"dynamic-selector-loading\">\n            <rt-spinner [diameter]=\"24\" />\n        </div>\n    } @else if (hasRows()) {\n        <div rtElem=\"list\" qa-dataid=\"dynamic-selector-options\">\n            @for (row of rowItems(); track row.key) {\n                <div rtElem=\"row\" [rtMod]=\"{ separated: row.separated, nowrap: !titleWrap(), own: isSingle() && ownLabel() }\">\n                    @if (isSingle()) {\n                        <!-- Без переноса и при подсветке поиска подпись рисует окно рядом с кнопкой: подсказка\n                             меряет обрезку своего узла, а подпись внутри кнопки окну недоступна. -->\n                        <rt-radio-button\n                            rtElem=\"option\"\n                            qa-dataid=\"dynamic-selector-option\"\n                            [value]=\"row.key\"\n                            [checked]=\"row.ticked\"\n                            [label]=\"ownLabel() ? '' : row.label\"\n                            [ariaLabel]=\"ownLabel() ? row.label : null\"\n                            [rtMod]=\"{ fixed: ownLabel() }\"\n                            (checkedChange)=\"onRadioChange(row.entity)\" />\n                        @if (ownLabel()) {\n                            <!-- Фокус и клавиатура остаются на кнопке: она названа этой же подписью, а подпись даёт нажать мышью, как label. -->\n                            <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\n                            <span\n                                rtElem=\"option-label\"\n                                qa-dataid=\"dynamic-selector-option-label\"\n                                rtTooltipWhenTruncated\n                                [rtTooltip]=\"titleWrap() ? '' : row.label\"\n                                (click)=\"onRadioChange(row.entity)\">\n                                <ng-container *ngTemplateOutlet=\"labelParts; context: { $implicit: row.parts }\" />\n                            </span>\n                        }\n                    } @else {\n                        <rt-checkbox\n                            rtElem=\"option\"\n                            qa-dataid=\"dynamic-selector-option\"\n                            [ngModel]=\"row.ticked\"\n                            [ngModelOptions]=\"{ standalone: true }\"\n                            (click)=\"onRowClick($event, row.entity)\">\n                            <span\n                                rtElem=\"option-label\"\n                                qa-dataid=\"dynamic-selector-option-label\"\n                                rtTooltipWhenTruncated\n                                [rtTooltip]=\"titleWrap() ? '' : row.label\">\n                                <ng-container *ngTemplateOutlet=\"labelParts; context: { $implicit: row.parts }\" />\n                            </span>\n                        </rt-checkbox>\n                    }\n                </div>\n            }\n\n            <div rtElem=\"sentinel\" rtInfiniteScroll [disabled]=\"!lazyLoad() || fetching()\" (loadMore)=\"onLoadMore()\"></div>\n\n            @if (fetching()) {\n                <div rtElem=\"fetching\" qa-dataid=\"dynamic-selector-fetching\">\n                    <rt-spinner [diameter]=\"20\" />\n                </div>\n            }\n        </div>\n    } @else {\n        <rt-empty-state rtElem=\"empty\" qa-dataid=\"dynamic-selector-no-results\" icon=\"search\" [title]=\"emptyText()\" />\n    }\n\n    <div rtElem=\"foot\" [rtMod]=\"{ nav: isNavShown() }\">\n        @if (isNavShown()) {\n            <a rtElem=\"nav\" qa-dataid=\"dynamic-selector-nav\" [routerLink]=\"navigateLink()\" [rtTooltip]=\"navigateTitle()\">\n                {{ navigateTitle() }}\n            </a>\n        }\n\n        <div rtElem=\"actions\">\n            <button\n                rtButton\n                appearance=\"text\"\n                type=\"button\"\n                qa-dataid=\"dynamic-selector-cancel\"\n                [label]=\"cancelLabel()\"\n                [attr.aria-label]=\"cancelLabel()\"\n                (click)=\"onCancel()\"></button>\n            <button\n                rtButton\n                type=\"button\"\n                qa-dataid=\"dynamic-selector-apply\"\n                [label]=\"applyText()\"\n                [attr.aria-label]=\"applyText()\"\n                [disabled]=\"isApplyDisabled()\"\n                (click)=\"onApply()\"></button>\n        </div>\n    </div>\n\n    <!-- Куски подписи стоят без пробелов между собой: пробел в разметке разорвал бы слово на подсвеченной границе. -->\n    <!-- prettier-ignore -->\n    <ng-template #labelParts let-parts>@for (part of parts; track $index) {@if (part.matched) {<mark rtElem=\"match\">{{ part.text }}</mark>} @else {{{ part.text }}}}</ng-template>\n</ng-container>\n",
 			styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-dynamic-selector-popup{--rt-dynamic-selector-popup-width-default: calc(var(--rt-size-40) * 2);--rt-dynamic-selector-popup-max-height-default: calc(var(--rt-size-100) + var(--rt-size-20));--rt-dynamic-selector-popup-radius-default: var(--rt-radius-md);--rt-dynamic-selector-popup-border-width-default: var(--rt-border-width-thin);--rt-dynamic-selector-popup-shadow-default: var(--rt-shadow-lg);--rt-dynamic-selector-popup-bg-default: var(--rt-color-bg-surface);--rt-dynamic-selector-popup-min-height-default: 0;--rt-dynamic-selector-popup-padding-default: var(--rt-space-md);--rt-dynamic-selector-popup-foot-border-width-default: var( --rt-dynamic-selector-popup-border-width, var(--rt-dynamic-selector-popup-border-width-default) );--rt-dynamic-selector-popup-nav-color-default: var(--rt-color-text-link);--rt-dynamic-selector-popup-button-height-default: var(--rt-control-height-md);--rt-dynamic-selector-popup-button-font-size-default: .95rem;--rt-dynamic-selector-popup-empty-icon-size-default: var(--rt-size-8);--rt-dynamic-selector-popup-empty-icon-wrap-bg-default: var(--rt-color-bg-subtle);--rt-dynamic-selector-popup-empty-text-size-default: var(--rt-text-md);--rt-dynamic-selector-popup-empty-text-weight-default: var(--rt-font-weight-medium);--rt-dynamic-selector-popup-empty-text-color-default: var(--rt-color-text-primary);--rt-dynamic-selector-popup-highlight-color-default: var(--rt-color-text-primary);--rt-dynamic-selector-popup-highlight-weight-default: var(--rt-font-weight-semibold);--rt-dynamic-selector-popup-highlight-bg-default: transparent;--rt-dynamic-selector-popup-highlight-radius-default: 0;--rt-dynamic-selector-popup-option-line-height-default: normal;--rt-dynamic-selector-popup-option-min-height-default: 0;--rt-dynamic-selector-popup-empty-gap-default: calc(var(--rt-space-xs) + var(--rt-space-sm));--rt-dynamic-selector-popup-foot-padding-default: var(--rt-space-sm) var(--rt-dynamic-selector-popup-padding, var(--rt-dynamic-selector-popup-padding-default)) 0;display:flex;width:var(--rt-dynamic-selector-popup-width, var(--rt-dynamic-selector-popup-width-default));max-width:calc(100vw - var(--rt-space-md) * 2);min-height:var(--rt-dynamic-selector-popup-min-height, var(--rt-dynamic-selector-popup-min-height-default));max-height:var(--rt-dynamic-selector-popup-max-height, var(--rt-dynamic-selector-popup-max-height-default));box-sizing:border-box;flex-direction:column;border:var(--rt-dynamic-selector-popup-border-width, var(--rt-dynamic-selector-popup-border-width-default)) solid var(--rt-color-border-subtle);border-radius:var(--rt-dynamic-selector-popup-radius, var(--rt-dynamic-selector-popup-radius-default));background:var(--rt-dynamic-selector-popup-bg, var(--rt-dynamic-selector-popup-bg-default));box-shadow:var(--rt-dynamic-selector-popup-shadow, var(--rt-dynamic-selector-popup-shadow-default));color:var(--rt-color-text-primary);gap:var(--rt-space-sm);padding-block:var(--rt-dynamic-selector-popup-padding, var(--rt-dynamic-selector-popup-padding-default))}.rt-dynamic-selector-popup__head{display:flex;flex-direction:column;gap:var(--rt-space-sm);padding-inline:var(--rt-dynamic-selector-popup-padding, var(--rt-dynamic-selector-popup-padding-default))}.rt-dynamic-selector-popup__controls{display:flex;flex-direction:column;border-bottom:var(--rt-dynamic-selector-popup-border-width, var(--rt-dynamic-selector-popup-border-width-default)) solid var(--rt-color-border-subtle);gap:var(--rt-space-sm);padding-block-end:var(--rt-space-sm)}.rt-dynamic-selector-popup__multi{display:flex;flex-wrap:wrap;align-items:center;gap:var(--rt-space-2xs) var(--rt-space-sm)}.rt-dynamic-selector-popup__multi-label{font-size:var(--rt-text-sm)}.rt-dynamic-selector-popup__multi-hint-icon{color:var(--rt-color-text-muted)}.rt-dynamic-selector-popup__multi-hint{display:none;flex-basis:100%;color:var(--rt-color-text-muted);font-size:var(--rt-text-xs)}@media(width<=1080px){.rt-dynamic-selector-popup__multi-hint{display:block}.rt-dynamic-selector-popup__multi .rt-dynamic-selector-popup__multi-hint-icon{display:none}}.rt-dynamic-selector-popup__select-all{min-width:0}.rt-dynamic-selector-popup__state{display:flex;flex:1 1 auto;align-items:center;justify-content:center;padding:var(--rt-space-md)}.rt-dynamic-selector-popup__list{display:flex;min-height:0;flex:1 1 auto;flex-direction:column;overflow-y:auto;padding-inline:var(--rt-dynamic-selector-popup-padding, var(--rt-dynamic-selector-popup-padding-default))}.rt-dynamic-selector-popup__sentinel{min-height:var(--rt-size-1)}.rt-dynamic-selector-popup__fetching{display:flex;justify-content:center;padding-block:var(--rt-space-sm)}.rt-dynamic-selector-popup__empty{flex:1 1 auto;padding-inline:var(--rt-dynamic-selector-popup-padding, var(--rt-dynamic-selector-popup-padding-default))}.rt-dynamic-selector-popup__empty .rt-empty-state__icon-wrap{margin-bottom:calc(var(--rt-dynamic-selector-popup-empty-gap, var(--rt-dynamic-selector-popup-empty-gap-default)) - var(--rt-space-sm))}.rt-dynamic-selector-popup__empty.rt-empty-state{--rt-empty-state-icon-size: var( --rt-dynamic-selector-popup-empty-icon-size, var(--rt-dynamic-selector-popup-empty-icon-size-default) );--rt-empty-state-icon-wrap-bg: var( --rt-dynamic-selector-popup-empty-icon-wrap-bg, var(--rt-dynamic-selector-popup-empty-icon-wrap-bg-default) );--rt-empty-state-title-size: var( --rt-dynamic-selector-popup-empty-text-size, var(--rt-dynamic-selector-popup-empty-text-size-default) );--rt-empty-state-title-weight: var( --rt-dynamic-selector-popup-empty-text-weight, var(--rt-dynamic-selector-popup-empty-text-weight-default) );--rt-empty-state-title-color: var( --rt-dynamic-selector-popup-empty-text-color, var(--rt-dynamic-selector-popup-empty-text-color-default) )}.rt-dynamic-selector-popup__foot{display:flex;align-items:center;justify-content:flex-end;padding:var(--rt-dynamic-selector-popup-foot-padding, var(--rt-dynamic-selector-popup-foot-padding-default));border-top:var(--rt-dynamic-selector-popup-foot-border-width, var(--rt-dynamic-selector-popup-foot-border-width-default)) solid var(--rt-color-border-subtle);gap:var(--rt-space-sm)}.rt-dynamic-selector-popup__foot--nav{justify-content:space-between}.rt-dynamic-selector-popup__nav{overflow:hidden;min-width:0;color:var(--rt-dynamic-selector-popup-nav-color, var(--rt-dynamic-selector-popup-nav-color-default));font-size:var(--rt-text-sm);text-overflow:ellipsis;white-space:nowrap}.rt-dynamic-selector-popup__nav:hover{color:var(--rt-color-text-link-hover)}.rt-dynamic-selector-popup__actions{display:flex;flex:0 0 auto;gap:var(--rt-space-sm)}.rt-dynamic-selector-popup__actions .rt-button{--rt-btn-height: var(--rt-dynamic-selector-popup-button-height, var(--rt-dynamic-selector-popup-button-height-default));--rt-btn-font-size: var( --rt-dynamic-selector-popup-button-font-size, var(--rt-dynamic-selector-popup-button-font-size-default) )}}\n", "@charset \"UTF-8\";@layer rt-kit.components{.rt-dynamic-selector-popup__row{display:flex;min-height:var(--rt-dynamic-selector-popup-option-min-height, var(--rt-dynamic-selector-popup-option-min-height-default));box-sizing:border-box;flex-direction:column;justify-content:center;padding-block:var(--rt-space-sm)}.rt-dynamic-selector-popup__row--separated{border-bottom:var(--rt-dynamic-selector-popup-border-width, var(--rt-dynamic-selector-popup-border-width-default)) solid var(--rt-color-border-subtle);margin-block-end:var(--rt-space-2xs);padding-block-end:var(--rt-space-sm)}.rt-dynamic-selector-popup__option{display:block;overflow-wrap:anywhere}.rt-dynamic-selector-popup__option-label{overflow-wrap:anywhere}.rt-dynamic-selector-popup__option-label,.rt-dynamic-selector-popup__option .rt-checkbox__label,.rt-dynamic-selector-popup__option .rt-radio-button__label{line-height:var(--rt-dynamic-selector-popup-option-line-height, var(--rt-dynamic-selector-popup-option-line-height-default))}.rt-dynamic-selector-popup__row--nowrap{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:var(--rt-space-sm)}.rt-dynamic-selector-popup__row--nowrap .rt-dynamic-selector-popup__option{min-width:0;max-width:100%}.rt-dynamic-selector-popup__row--own{display:flex;flex-direction:row;align-items:flex-start;justify-content:flex-start;gap:var(--rt-space-sm)}.rt-dynamic-selector-popup__option--fixed{flex:0 0 auto}.rt-dynamic-selector-popup__row--own .rt-dynamic-selector-popup__option-label{min-width:0;flex:1 1 auto;color:var(--rt-color-text-primary);cursor:pointer;font-size:var(--rt-text-sm);-webkit-user-select:none;user-select:none}.rt-dynamic-selector-popup__match{border-radius:var(--rt-dynamic-selector-popup-highlight-radius, var(--rt-dynamic-selector-popup-highlight-radius-default));background:var(--rt-dynamic-selector-popup-highlight-bg, var(--rt-dynamic-selector-popup-highlight-bg-default));color:var(--rt-dynamic-selector-popup-highlight-color, var(--rt-dynamic-selector-popup-highlight-color-default));font-weight:var(--rt-dynamic-selector-popup-highlight-weight, var(--rt-dynamic-selector-popup-highlight-weight-default))}.rt-dynamic-selector-popup__row--nowrap .rt-dynamic-selector-popup__option .rt-checkbox{max-width:100%}.rt-dynamic-selector-popup__row--nowrap .rt-dynamic-selector-popup__option .rt-checkbox__label{overflow:hidden;min-width:0}.rt-dynamic-selector-popup__row--nowrap .rt-dynamic-selector-popup__option-label{display:block;overflow:hidden;min-width:0;flex:1 1 auto;font-size:var(--rt-text-sm);text-overflow:ellipsis;white-space:nowrap}}\n"],
 			dependencies: [
 				{
@@ -1990,228 +1586,26 @@ i0.ɵɵngDeclareClassMetadata({
 				RtToggleSwitchComponent,
 				RtTooltipDirective
 			],
-			host: { class: BEM_BLOCK$1 },
-			template: "<ng-container rtBlock=\"rt-dynamic-selector-popup\">\n    <div rtElem=\"head\">\n        <rt-input\n            #searchField\n            rtElem=\"search\"\n            qa-dataid=\"dynamic-selector-search\"\n            iconLeft=\"search\"\n            [appearance]=\"searchAppearance()\"\n            [radius]=\"searchRadius()\"\n            [placeholder]=\"searchLabel()\"\n            [ngModel]=\"query()\"\n            (ngModelChange)=\"onQueryChange($event)\" />\n\n        @if (isMultiToggleVisible() || isSelectAllShown()) {\n            <div rtElem=\"controls\">\n                @if (isMultiToggleVisible()) {\n                    <div rtElem=\"multi\">\n                        <rt-toggle-switch\n                            qa-dataid=\"dynamic-selector-multi\"\n                            [ariaLabel]=\"multiLabel()\"\n                            [ngModel]=\"isMultiOn()\"\n                            [ngModelOptions]=\"{ standalone: true }\"\n                            (ngModelChange)=\"onMultiToggle($event)\" />\n                        <span rtElem=\"multi-label\">{{ multiLabel() }}</span>\n                        <rt-icon rtElem=\"multi-hint-icon\" name=\"info-circle\" size=\"sm\" [rtTooltip]=\"multiHintLabel()\" />\n                        <span rtElem=\"multi-hint\">{{ multiHintLabel() }}</span>\n                    </div>\n                }\n\n                @if (isSelectAllShown()) {\n                    <rt-checkbox\n                        rtElem=\"select-all\"\n                        qa-dataid=\"dynamic-selector-select-all\"\n                        [indeterminate]=\"selectAllState() === 'some'\"\n                        [ngModel]=\"selectAllState() === 'all'\"\n                        [ngModelOptions]=\"{ standalone: true }\"\n                        (ngModelChange)=\"onSelectAll($event)\">\n                        {{ selectAllLabel() }}\n                    </rt-checkbox>\n                }\n            </div>\n        }\n    </div>\n\n    @if (loading()) {\n        <div rtElem=\"state\" qa-dataid=\"dynamic-selector-loading\">\n            <rt-spinner [diameter]=\"24\" />\n        </div>\n    } @else if (hasRows()) {\n        <div rtElem=\"list\" qa-dataid=\"dynamic-selector-options\">\n            @for (row of rowItems(); track row.key) {\n                <div rtElem=\"row\" [rtMod]=\"{ separated: row.separated, nowrap: !titleWrap(), own: isSingle() && ownLabel() }\">\n                    @if (isSingle()) {\n                        <!-- Без переноса и при подсветке поиска подпись рисует окно рядом с кнопкой: подсказка\n                             меряет обрезку своего узла, а подпись внутри кнопки окну недоступна. -->\n                        <rt-radio-button\n                            rtElem=\"option\"\n                            qa-dataid=\"dynamic-selector-option\"\n                            [value]=\"row.key\"\n                            [checked]=\"row.ticked\"\n                            [label]=\"ownLabel() ? '' : row.label\"\n                            [ariaLabel]=\"ownLabel() ? row.label : null\"\n                            [rtMod]=\"{ fixed: ownLabel() }\"\n                            (checkedChange)=\"onRadioChange(row.entity)\" />\n                        @if (ownLabel()) {\n                            <!-- Фокус и клавиатура остаются на кнопке: она названа этой же подписью, а подпись даёт нажать мышью, как label. -->\n                            <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\n                            <span\n                                rtElem=\"option-label\"\n                                qa-dataid=\"dynamic-selector-option-label\"\n                                rtTooltipWhenTruncated\n                                [rtTooltip]=\"titleWrap() ? '' : row.label\"\n                                (click)=\"onRadioChange(row.entity)\">\n                                <ng-container *ngTemplateOutlet=\"labelParts; context: { $implicit: row.parts }\" />\n                            </span>\n                        }\n                    } @else {\n                        <rt-checkbox\n                            rtElem=\"option\"\n                            qa-dataid=\"dynamic-selector-option\"\n                            [ngModel]=\"row.ticked\"\n                            [ngModelOptions]=\"{ standalone: true }\"\n                            (click)=\"onRowClick($event, row.entity)\">\n                            <span\n                                rtElem=\"option-label\"\n                                qa-dataid=\"dynamic-selector-option-label\"\n                                rtTooltipWhenTruncated\n                                [rtTooltip]=\"titleWrap() ? '' : row.label\">\n                                <ng-container *ngTemplateOutlet=\"labelParts; context: { $implicit: row.parts }\" />\n                            </span>\n                        </rt-checkbox>\n                    }\n                </div>\n            }\n\n            <div rtElem=\"sentinel\" rtInfiniteScroll [disabled]=\"!lazyLoad() || fetching()\" (loadMore)=\"loadMore.emit()\"></div>\n\n            @if (fetching()) {\n                <div rtElem=\"fetching\" qa-dataid=\"dynamic-selector-fetching\">\n                    <rt-spinner [diameter]=\"20\" />\n                </div>\n            }\n        </div>\n    } @else {\n        <rt-empty-state rtElem=\"empty\" qa-dataid=\"dynamic-selector-no-results\" icon=\"search\" [title]=\"emptyText()\" />\n    }\n\n    <div rtElem=\"foot\" [rtMod]=\"{ nav: isNavShown() }\">\n        @if (isNavShown()) {\n            <a rtElem=\"nav\" qa-dataid=\"dynamic-selector-nav\" [routerLink]=\"navigateLink()\" [rtTooltip]=\"navigateTitle()\">\n                {{ navigateTitle() }}\n            </a>\n        }\n\n        <div rtElem=\"actions\">\n            <button\n                rtButton\n                appearance=\"text\"\n                type=\"button\"\n                qa-dataid=\"dynamic-selector-cancel\"\n                [label]=\"cancelLabel()\"\n                [attr.aria-label]=\"cancelLabel()\"\n                (click)=\"onCancel()\"></button>\n            <button\n                rtButton\n                type=\"button\"\n                qa-dataid=\"dynamic-selector-apply\"\n                [label]=\"applyText()\"\n                [attr.aria-label]=\"applyText()\"\n                [disabled]=\"isApplyDisabled()\"\n                (click)=\"onApply()\"></button>\n        </div>\n    </div>\n\n    <!-- Куски подписи стоят без пробелов между собой: пробел в разметке разорвал бы слово на подсвеченной границе. -->\n    <!-- prettier-ignore -->\n    <ng-template #labelParts let-parts>@for (part of parts; track $index) {@if (part.matched) {<mark rtElem=\"match\">{{ part.text }}</mark>} @else {{{ part.text }}}}</ng-template>\n</ng-container>\n",
+			host: {
+				class: BEM_BLOCK$1,
+				"(keydown)": "onKeydown($event)"
+			},
+			template: "<ng-container rtBlock=\"rt-dynamic-selector-popup\">\n    <div rtElem=\"head\">\n        <rt-input\n            #searchField\n            rtElem=\"search\"\n            qa-dataid=\"dynamic-selector-search\"\n            iconLeft=\"search\"\n            [appearance]=\"searchAppearance()\"\n            [radius]=\"searchRadius()\"\n            [placeholder]=\"searchLabel()\"\n            [ngModel]=\"query()\"\n            (ngModelChange)=\"onQueryChange($event)\" />\n\n        @if (isMultiToggleVisible() || isSelectAllShown()) {\n            <div rtElem=\"controls\">\n                @if (isMultiToggleVisible()) {\n                    <div rtElem=\"multi\">\n                        <rt-toggle-switch\n                            qa-dataid=\"dynamic-selector-multi\"\n                            [ariaLabel]=\"multiLabel()\"\n                            [ngModel]=\"isMultiOn()\"\n                            [ngModelOptions]=\"{ standalone: true }\"\n                            (ngModelChange)=\"onMultiToggle($event)\" />\n                        <span rtElem=\"multi-label\">{{ multiLabel() }}</span>\n                        <rt-icon rtElem=\"multi-hint-icon\" name=\"info-circle\" size=\"sm\" [rtTooltip]=\"multiHintLabel()\" />\n                        <span rtElem=\"multi-hint\">{{ multiHintLabel() }}</span>\n                    </div>\n                }\n\n                @if (isSelectAllShown()) {\n                    <rt-checkbox\n                        rtElem=\"select-all\"\n                        qa-dataid=\"dynamic-selector-select-all\"\n                        [indeterminate]=\"selectAllState() === 'some'\"\n                        [ngModel]=\"selectAllState() === 'all'\"\n                        [ngModelOptions]=\"{ standalone: true }\"\n                        (ngModelChange)=\"onSelectAll($event)\">\n                        {{ selectAllLabel() }}\n                    </rt-checkbox>\n                }\n            </div>\n        }\n    </div>\n\n    @if (loading()) {\n        <div rtElem=\"state\" qa-dataid=\"dynamic-selector-loading\">\n            <rt-spinner [diameter]=\"24\" />\n        </div>\n    } @else if (hasRows()) {\n        <div rtElem=\"list\" qa-dataid=\"dynamic-selector-options\">\n            @for (row of rowItems(); track row.key) {\n                <div rtElem=\"row\" [rtMod]=\"{ separated: row.separated, nowrap: !titleWrap(), own: isSingle() && ownLabel() }\">\n                    @if (isSingle()) {\n                        <!-- Без переноса и при подсветке поиска подпись рисует окно рядом с кнопкой: подсказка\n                             меряет обрезку своего узла, а подпись внутри кнопки окну недоступна. -->\n                        <rt-radio-button\n                            rtElem=\"option\"\n                            qa-dataid=\"dynamic-selector-option\"\n                            [value]=\"row.key\"\n                            [checked]=\"row.ticked\"\n                            [label]=\"ownLabel() ? '' : row.label\"\n                            [ariaLabel]=\"ownLabel() ? row.label : null\"\n                            [rtMod]=\"{ fixed: ownLabel() }\"\n                            (checkedChange)=\"onRadioChange(row.entity)\" />\n                        @if (ownLabel()) {\n                            <!-- Фокус и клавиатура остаются на кнопке: она названа этой же подписью, а подпись даёт нажать мышью, как label. -->\n                            <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\n                            <span\n                                rtElem=\"option-label\"\n                                qa-dataid=\"dynamic-selector-option-label\"\n                                rtTooltipWhenTruncated\n                                [rtTooltip]=\"titleWrap() ? '' : row.label\"\n                                (click)=\"onRadioChange(row.entity)\">\n                                <ng-container *ngTemplateOutlet=\"labelParts; context: { $implicit: row.parts }\" />\n                            </span>\n                        }\n                    } @else {\n                        <rt-checkbox\n                            rtElem=\"option\"\n                            qa-dataid=\"dynamic-selector-option\"\n                            [ngModel]=\"row.ticked\"\n                            [ngModelOptions]=\"{ standalone: true }\"\n                            (click)=\"onRowClick($event, row.entity)\">\n                            <span\n                                rtElem=\"option-label\"\n                                qa-dataid=\"dynamic-selector-option-label\"\n                                rtTooltipWhenTruncated\n                                [rtTooltip]=\"titleWrap() ? '' : row.label\">\n                                <ng-container *ngTemplateOutlet=\"labelParts; context: { $implicit: row.parts }\" />\n                            </span>\n                        </rt-checkbox>\n                    }\n                </div>\n            }\n\n            <div rtElem=\"sentinel\" rtInfiniteScroll [disabled]=\"!lazyLoad() || fetching()\" (loadMore)=\"onLoadMore()\"></div>\n\n            @if (fetching()) {\n                <div rtElem=\"fetching\" qa-dataid=\"dynamic-selector-fetching\">\n                    <rt-spinner [diameter]=\"20\" />\n                </div>\n            }\n        </div>\n    } @else {\n        <rt-empty-state rtElem=\"empty\" qa-dataid=\"dynamic-selector-no-results\" icon=\"search\" [title]=\"emptyText()\" />\n    }\n\n    <div rtElem=\"foot\" [rtMod]=\"{ nav: isNavShown() }\">\n        @if (isNavShown()) {\n            <a rtElem=\"nav\" qa-dataid=\"dynamic-selector-nav\" [routerLink]=\"navigateLink()\" [rtTooltip]=\"navigateTitle()\">\n                {{ navigateTitle() }}\n            </a>\n        }\n\n        <div rtElem=\"actions\">\n            <button\n                rtButton\n                appearance=\"text\"\n                type=\"button\"\n                qa-dataid=\"dynamic-selector-cancel\"\n                [label]=\"cancelLabel()\"\n                [attr.aria-label]=\"cancelLabel()\"\n                (click)=\"onCancel()\"></button>\n            <button\n                rtButton\n                type=\"button\"\n                qa-dataid=\"dynamic-selector-apply\"\n                [label]=\"applyText()\"\n                [attr.aria-label]=\"applyText()\"\n                [disabled]=\"isApplyDisabled()\"\n                (click)=\"onApply()\"></button>\n        </div>\n    </div>\n\n    <!-- Куски подписи стоят без пробелов между собой: пробел в разметке разорвал бы слово на подсвеченной границе. -->\n    <!-- prettier-ignore -->\n    <ng-template #labelParts let-parts>@for (part of parts; track $index) {@if (part.matched) {<mark rtElem=\"match\">{{ part.text }}</mark>} @else {{{ part.text }}}}</ng-template>\n</ng-container>\n",
 			styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-dynamic-selector-popup{--rt-dynamic-selector-popup-width-default: calc(var(--rt-size-40) * 2);--rt-dynamic-selector-popup-max-height-default: calc(var(--rt-size-100) + var(--rt-size-20));--rt-dynamic-selector-popup-radius-default: var(--rt-radius-md);--rt-dynamic-selector-popup-border-width-default: var(--rt-border-width-thin);--rt-dynamic-selector-popup-shadow-default: var(--rt-shadow-lg);--rt-dynamic-selector-popup-bg-default: var(--rt-color-bg-surface);--rt-dynamic-selector-popup-min-height-default: 0;--rt-dynamic-selector-popup-padding-default: var(--rt-space-md);--rt-dynamic-selector-popup-foot-border-width-default: var( --rt-dynamic-selector-popup-border-width, var(--rt-dynamic-selector-popup-border-width-default) );--rt-dynamic-selector-popup-nav-color-default: var(--rt-color-text-link);--rt-dynamic-selector-popup-button-height-default: var(--rt-control-height-md);--rt-dynamic-selector-popup-button-font-size-default: .95rem;--rt-dynamic-selector-popup-empty-icon-size-default: var(--rt-size-8);--rt-dynamic-selector-popup-empty-icon-wrap-bg-default: var(--rt-color-bg-subtle);--rt-dynamic-selector-popup-empty-text-size-default: var(--rt-text-md);--rt-dynamic-selector-popup-empty-text-weight-default: var(--rt-font-weight-medium);--rt-dynamic-selector-popup-empty-text-color-default: var(--rt-color-text-primary);--rt-dynamic-selector-popup-highlight-color-default: var(--rt-color-text-primary);--rt-dynamic-selector-popup-highlight-weight-default: var(--rt-font-weight-semibold);--rt-dynamic-selector-popup-highlight-bg-default: transparent;--rt-dynamic-selector-popup-highlight-radius-default: 0;--rt-dynamic-selector-popup-option-line-height-default: normal;--rt-dynamic-selector-popup-option-min-height-default: 0;--rt-dynamic-selector-popup-empty-gap-default: calc(var(--rt-space-xs) + var(--rt-space-sm));--rt-dynamic-selector-popup-foot-padding-default: var(--rt-space-sm) var(--rt-dynamic-selector-popup-padding, var(--rt-dynamic-selector-popup-padding-default)) 0;display:flex;width:var(--rt-dynamic-selector-popup-width, var(--rt-dynamic-selector-popup-width-default));max-width:calc(100vw - var(--rt-space-md) * 2);min-height:var(--rt-dynamic-selector-popup-min-height, var(--rt-dynamic-selector-popup-min-height-default));max-height:var(--rt-dynamic-selector-popup-max-height, var(--rt-dynamic-selector-popup-max-height-default));box-sizing:border-box;flex-direction:column;border:var(--rt-dynamic-selector-popup-border-width, var(--rt-dynamic-selector-popup-border-width-default)) solid var(--rt-color-border-subtle);border-radius:var(--rt-dynamic-selector-popup-radius, var(--rt-dynamic-selector-popup-radius-default));background:var(--rt-dynamic-selector-popup-bg, var(--rt-dynamic-selector-popup-bg-default));box-shadow:var(--rt-dynamic-selector-popup-shadow, var(--rt-dynamic-selector-popup-shadow-default));color:var(--rt-color-text-primary);gap:var(--rt-space-sm);padding-block:var(--rt-dynamic-selector-popup-padding, var(--rt-dynamic-selector-popup-padding-default))}.rt-dynamic-selector-popup__head{display:flex;flex-direction:column;gap:var(--rt-space-sm);padding-inline:var(--rt-dynamic-selector-popup-padding, var(--rt-dynamic-selector-popup-padding-default))}.rt-dynamic-selector-popup__controls{display:flex;flex-direction:column;border-bottom:var(--rt-dynamic-selector-popup-border-width, var(--rt-dynamic-selector-popup-border-width-default)) solid var(--rt-color-border-subtle);gap:var(--rt-space-sm);padding-block-end:var(--rt-space-sm)}.rt-dynamic-selector-popup__multi{display:flex;flex-wrap:wrap;align-items:center;gap:var(--rt-space-2xs) var(--rt-space-sm)}.rt-dynamic-selector-popup__multi-label{font-size:var(--rt-text-sm)}.rt-dynamic-selector-popup__multi-hint-icon{color:var(--rt-color-text-muted)}.rt-dynamic-selector-popup__multi-hint{display:none;flex-basis:100%;color:var(--rt-color-text-muted);font-size:var(--rt-text-xs)}@media(width<=1080px){.rt-dynamic-selector-popup__multi-hint{display:block}.rt-dynamic-selector-popup__multi .rt-dynamic-selector-popup__multi-hint-icon{display:none}}.rt-dynamic-selector-popup__select-all{min-width:0}.rt-dynamic-selector-popup__state{display:flex;flex:1 1 auto;align-items:center;justify-content:center;padding:var(--rt-space-md)}.rt-dynamic-selector-popup__list{display:flex;min-height:0;flex:1 1 auto;flex-direction:column;overflow-y:auto;padding-inline:var(--rt-dynamic-selector-popup-padding, var(--rt-dynamic-selector-popup-padding-default))}.rt-dynamic-selector-popup__sentinel{min-height:var(--rt-size-1)}.rt-dynamic-selector-popup__fetching{display:flex;justify-content:center;padding-block:var(--rt-space-sm)}.rt-dynamic-selector-popup__empty{flex:1 1 auto;padding-inline:var(--rt-dynamic-selector-popup-padding, var(--rt-dynamic-selector-popup-padding-default))}.rt-dynamic-selector-popup__empty .rt-empty-state__icon-wrap{margin-bottom:calc(var(--rt-dynamic-selector-popup-empty-gap, var(--rt-dynamic-selector-popup-empty-gap-default)) - var(--rt-space-sm))}.rt-dynamic-selector-popup__empty.rt-empty-state{--rt-empty-state-icon-size: var( --rt-dynamic-selector-popup-empty-icon-size, var(--rt-dynamic-selector-popup-empty-icon-size-default) );--rt-empty-state-icon-wrap-bg: var( --rt-dynamic-selector-popup-empty-icon-wrap-bg, var(--rt-dynamic-selector-popup-empty-icon-wrap-bg-default) );--rt-empty-state-title-size: var( --rt-dynamic-selector-popup-empty-text-size, var(--rt-dynamic-selector-popup-empty-text-size-default) );--rt-empty-state-title-weight: var( --rt-dynamic-selector-popup-empty-text-weight, var(--rt-dynamic-selector-popup-empty-text-weight-default) );--rt-empty-state-title-color: var( --rt-dynamic-selector-popup-empty-text-color, var(--rt-dynamic-selector-popup-empty-text-color-default) )}.rt-dynamic-selector-popup__foot{display:flex;align-items:center;justify-content:flex-end;padding:var(--rt-dynamic-selector-popup-foot-padding, var(--rt-dynamic-selector-popup-foot-padding-default));border-top:var(--rt-dynamic-selector-popup-foot-border-width, var(--rt-dynamic-selector-popup-foot-border-width-default)) solid var(--rt-color-border-subtle);gap:var(--rt-space-sm)}.rt-dynamic-selector-popup__foot--nav{justify-content:space-between}.rt-dynamic-selector-popup__nav{overflow:hidden;min-width:0;color:var(--rt-dynamic-selector-popup-nav-color, var(--rt-dynamic-selector-popup-nav-color-default));font-size:var(--rt-text-sm);text-overflow:ellipsis;white-space:nowrap}.rt-dynamic-selector-popup__nav:hover{color:var(--rt-color-text-link-hover)}.rt-dynamic-selector-popup__actions{display:flex;flex:0 0 auto;gap:var(--rt-space-sm)}.rt-dynamic-selector-popup__actions .rt-button{--rt-btn-height: var(--rt-dynamic-selector-popup-button-height, var(--rt-dynamic-selector-popup-button-height-default));--rt-btn-font-size: var( --rt-dynamic-selector-popup-button-font-size, var(--rt-dynamic-selector-popup-button-font-size-default) )}}\n", "@charset \"UTF-8\";@layer rt-kit.components{.rt-dynamic-selector-popup__row{display:flex;min-height:var(--rt-dynamic-selector-popup-option-min-height, var(--rt-dynamic-selector-popup-option-min-height-default));box-sizing:border-box;flex-direction:column;justify-content:center;padding-block:var(--rt-space-sm)}.rt-dynamic-selector-popup__row--separated{border-bottom:var(--rt-dynamic-selector-popup-border-width, var(--rt-dynamic-selector-popup-border-width-default)) solid var(--rt-color-border-subtle);margin-block-end:var(--rt-space-2xs);padding-block-end:var(--rt-space-sm)}.rt-dynamic-selector-popup__option{display:block;overflow-wrap:anywhere}.rt-dynamic-selector-popup__option-label{overflow-wrap:anywhere}.rt-dynamic-selector-popup__option-label,.rt-dynamic-selector-popup__option .rt-checkbox__label,.rt-dynamic-selector-popup__option .rt-radio-button__label{line-height:var(--rt-dynamic-selector-popup-option-line-height, var(--rt-dynamic-selector-popup-option-line-height-default))}.rt-dynamic-selector-popup__row--nowrap{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:var(--rt-space-sm)}.rt-dynamic-selector-popup__row--nowrap .rt-dynamic-selector-popup__option{min-width:0;max-width:100%}.rt-dynamic-selector-popup__row--own{display:flex;flex-direction:row;align-items:flex-start;justify-content:flex-start;gap:var(--rt-space-sm)}.rt-dynamic-selector-popup__option--fixed{flex:0 0 auto}.rt-dynamic-selector-popup__row--own .rt-dynamic-selector-popup__option-label{min-width:0;flex:1 1 auto;color:var(--rt-color-text-primary);cursor:pointer;font-size:var(--rt-text-sm);-webkit-user-select:none;user-select:none}.rt-dynamic-selector-popup__match{border-radius:var(--rt-dynamic-selector-popup-highlight-radius, var(--rt-dynamic-selector-popup-highlight-radius-default));background:var(--rt-dynamic-selector-popup-highlight-bg, var(--rt-dynamic-selector-popup-highlight-bg-default));color:var(--rt-dynamic-selector-popup-highlight-color, var(--rt-dynamic-selector-popup-highlight-color-default));font-weight:var(--rt-dynamic-selector-popup-highlight-weight, var(--rt-dynamic-selector-popup-highlight-weight-default))}.rt-dynamic-selector-popup__row--nowrap .rt-dynamic-selector-popup__option .rt-checkbox{max-width:100%}.rt-dynamic-selector-popup__row--nowrap .rt-dynamic-selector-popup__option .rt-checkbox__label{overflow:hidden;min-width:0}.rt-dynamic-selector-popup__row--nowrap .rt-dynamic-selector-popup__option-label{display:block;overflow:hidden;min-width:0;flex:1 1 auto;font-size:var(--rt-text-sm);text-overflow:ellipsis;white-space:nowrap}}\n"]
 		}]
 	}],
-	propDecorators: {
-		searchField: [{
-			type: i0.ViewChild,
-			args: ["searchField", {
-				read: ElementRef,
-				isSignal: true
-			}]
-		}],
-		entities: [{
-			type: i0.Input,
-			args: [{
-				isSignal: true,
-				alias: "entities",
-				required: false
-			}]
-		}],
-		keyExp: [{
-			type: i0.Input,
-			args: [{
-				isSignal: true,
-				alias: "keyExp",
-				required: true
-			}]
-		}],
-		displayExp: [{
-			type: i0.Input,
-			args: [{
-				isSignal: true,
-				alias: "displayExp",
-				required: true
-			}]
-		}],
-		displayWith: [{
-			type: i0.Input,
-			args: [{
-				isSignal: true,
-				alias: "displayWith",
-				required: false
-			}]
-		}],
-		mode: [{
-			type: i0.Input,
-			args: [{
-				isSignal: true,
-				alias: "mode",
-				required: false
-			}]
-		}],
-		multiToggleShown: [{
-			type: i0.Input,
-			args: [{
-				isSignal: true,
-				alias: "multiToggleShown",
-				required: false
-			}]
-		}],
-		selectAllShown: [{
-			type: i0.Input,
-			args: [{
-				isSignal: true,
-				alias: "selectAllShown",
-				required: false
-			}]
-		}],
-		localSearch: [{
-			type: i0.Input,
-			args: [{
-				isSignal: true,
-				alias: "localSearch",
-				required: false
-			}]
-		}],
-		lazyLoad: [{
-			type: i0.Input,
-			args: [{
-				isSignal: true,
-				alias: "lazyLoad",
-				required: false
-			}]
-		}],
-		loading: [{
-			type: i0.Input,
-			args: [{
-				isSignal: true,
-				alias: "loading",
-				required: false
-			}]
-		}],
-		fetching: [{
-			type: i0.Input,
-			args: [{
-				isSignal: true,
-				alias: "fetching",
-				required: false
-			}]
-		}],
-		pinnedKeys: [{
-			type: i0.Input,
-			args: [{
-				isSignal: true,
-				alias: "pinnedKeys",
-				required: false
-			}]
-		}],
-		navigateTitle: [{
-			type: i0.Input,
-			args: [{
-				isSignal: true,
-				alias: "navigateTitle",
-				required: false
-			}]
-		}],
-		navigateLink: [{
-			type: i0.Input,
-			args: [{
-				isSignal: true,
-				alias: "navigateLink",
-				required: false
-			}]
-		}],
-		searchTerm: [{
-			type: i0.Input,
-			args: [{
-				isSignal: true,
-				alias: "searchTerm",
-				required: false
-			}]
-		}],
-		searchAppearance: [{
-			type: i0.Input,
-			args: [{
-				isSignal: true,
-				alias: "searchAppearance",
-				required: false
-			}]
-		}],
-		searchRadius: [{
-			type: i0.Input,
-			args: [{
-				isSignal: true,
-				alias: "searchRadius",
-				required: false
-			}]
-		}],
-		emptyResultsText: [{
-			type: i0.Input,
-			args: [{
-				isSignal: true,
-				alias: "emptyResultsText",
-				required: false
-			}]
-		}],
-		applyLabel: [{
-			type: i0.Input,
-			args: [{
-				isSignal: true,
-				alias: "applyLabel",
-				required: false
-			}]
-		}],
-		applyLabelCase: [{
-			type: i0.Input,
-			args: [{
-				isSignal: true,
-				alias: "applyLabelCase",
-				required: false
-			}]
-		}],
-		autofocusSearch: [{
-			type: i0.Input,
-			args: [{
-				isSignal: true,
-				alias: "autofocusSearch",
-				required: false
-			}]
-		}],
-		titleWrap: [{
-			type: i0.Input,
-			args: [{
-				isSignal: true,
-				alias: "titleWrap",
-				required: false
-			}]
-		}],
-		highlightSearch: [{
-			type: i0.Input,
-			args: [{
-				isSignal: true,
-				alias: "highlightSearch",
-				required: false
-			}]
-		}],
-		applied: [{
-			type: i0.Output,
-			args: ["applied"]
-		}],
-		cancelled: [{
-			type: i0.Output,
-			args: ["cancelled"]
-		}],
-		searchChange: [{
-			type: i0.Output,
-			args: ["searchChange"]
-		}],
-		loadMore: [{
-			type: i0.Output,
-			args: ["loadMore"]
-		}],
-		temporaryChoiceChange: [{
-			type: i0.Output,
-			args: ["temporaryChoiceChange"]
+	propDecorators: { searchField: [{
+		type: i0.ViewChild,
+		args: ["searchField", {
+			read: ElementRef,
+			isSignal: true
 		}]
-	}
+	}] }
 });
 const BEM_BLOCK = "rt-dynamic-selector";
 var RtDynamicSelectorComponent = class RtDynamicSelectorComponent extends RtFormControlBase {
 	#initial;
+	#parts;
 	#invitationButtonIconDefault;
 	#invitationButtonAppearanceDefault;
 	#clearIconDefault;
@@ -2226,6 +1620,7 @@ var RtDynamicSelectorComponent = class RtDynamicSelectorComponent extends RtForm
 	constructor() {
 		super();
 		this.#initial = signal([], ...ngDevMode ? [{ debugName: "#initial" }] : /* istanbul ignore next */ []);
+		this.#parts = inject(RtDynamicSelectorPartsService);
 		this.#invitationButtonIconDefault = rtKitDefault("dynamicSelector", (it) => it.invitationButtonIcon, null);
 		this.#invitationButtonAppearanceDefault = rtKitDefault("dynamicSelector", (it) => it.invitationButtonAppearance, "outlined");
 		this.#clearIconDefault = rtKitDefault("dynamicSelector", (it) => it.clearIcon, "close");
@@ -2359,6 +1754,7 @@ var RtDynamicSelectorComponent = class RtDynamicSelectorComponent extends RtForm
 		this.popupOpen = computed(() => this.popovers().some((popover) => popover.isOpen()), ...ngDevMode ? [{ debugName: "popupOpen" }] : /* istanbul ignore next */ []);
 		this.displayText = computed(() => this.rows().map((row) => row.label).join(", "), ...ngDevMode ? [{ debugName: "displayText" }] : /* istanbul ignore next */ []);
 		toObservable(this.chosenEntities).pipe(takeUntilDestroyed()).subscribe((list) => this.#takeChosen(list));
+		this.#bindParts();
 	}
 	writeValue(value) {
 		super.writeValue(value === null ? null : [...value]);
@@ -2397,6 +1793,38 @@ var RtDynamicSelectorComponent = class RtDynamicSelectorComponent extends RtForm
 		this.markTouched();
 		this.popupOpenChange.emit(false);
 	}
+	#bindParts() {
+		this.#parts.bindPopup({
+			settings: this,
+			entities: this.offered,
+			apply: (keys) => this.onApplied(keys),
+			cancel: () => this.onCancelled(),
+			search: (query) => this.searchChange.emit(query),
+			loadMore: () => this.loadMore.emit(),
+			temporaryChoice: (entities) => this.temporaryChoiceChange.emit(entities)
+		});
+		this.#parts.bindList({
+			rows: this.rows,
+			draggable: this.draggable,
+			editable: signal(false),
+			disabled: this.isDisabled,
+			actionsShown: computed(() => !this.invitation()),
+			resetClearShown: this.listActionsShown,
+			removeShown: this.removeShown,
+			resetDisabled: this.isResetDisabled,
+			clearDisabled: this.isClearDisabled,
+			buttonRadius: this.buttonRadius,
+			clearIcon: this.clearIcon,
+			titleWrap: this.titleWrap,
+			titleTpl: this.titleTpl,
+			controlsTpl: this.controlsTpl,
+			remove: (key) => this.onRemoved(key),
+			move: (move) => this.onMoved(move),
+			edit: () => void 0,
+			reset: () => this.onReset(),
+			clear: () => this.onCleared()
+		});
+	}
 	#closePopup() {
 		for (const popover of this.popovers()) popover.close();
 	}
@@ -2742,7 +2170,7 @@ var RtDynamicSelectorComponent = class RtDynamicSelectorComponent extends RtForm
 			providers: [{
 				provide: RtFormControlBase,
 				useExisting: forwardRef(() => RtDynamicSelectorComponent)
-			}],
+			}, RtDynamicSelectorPartsService],
 			queries: [{
 				propertyName: "rowTitle",
 				first: true,
@@ -2764,7 +2192,7 @@ var RtDynamicSelectorComponent = class RtDynamicSelectorComponent extends RtForm
 			}],
 			usesInheritance: true,
 			ngImport: i0,
-			template: "<ng-container rtBlock=\"rt-dynamic-selector\">\n    @if (isNothingToChoose()) {\n        <rt-empty-state rtElem=\"nothing\" qa-dataid=\"dynamic-selector-nothing\" icon=\"warning\" [title]=\"nothingToChooseLabel()\" />\n    } @else {\n        <div rtElem=\"content\">\n            <!-- Под приглашением пустой список не рисуется: узел нулевой высоты сдвигал бы приглашение зазором. -->\n            @if (rows().length > 0 || !invitation()) {\n                <rt-dynamic-selector-list\n                    [rows]=\"rows()\"\n                    [draggable]=\"draggable()\"\n                    [buttonRadius]=\"buttonRadius()\"\n                    [clearIcon]=\"clearIcon()\"\n                    [titleWrap]=\"titleWrap()\"\n                    [disabled]=\"isDisabled()\"\n                    [actionsShown]=\"!invitation()\"\n                    [resetClearShown]=\"listActionsShown()\"\n                    [removeShown]=\"removeShown()\"\n                    [resetDisabled]=\"isResetDisabled()\"\n                    [clearDisabled]=\"isClearDisabled()\"\n                    [titleTpl]=\"titleTpl()\"\n                    [controlsTpl]=\"controlsTpl()\"\n                    (removed)=\"onRemoved($event)\"\n                    (moved)=\"onMoved($event)\"\n                    (resetClicked)=\"onReset()\"\n                    (cleared)=\"onCleared()\">\n                    @if (isAddShown()) {\n                        <button\n                            rtButton\n                            theme=\"secondary\"\n                            appearance=\"text\"\n                            type=\"button\"\n                            qa-dataid=\"dynamic-selector-add\"\n                            rtPopoverTrigger=\"manual\"\n                            #addPopover=\"rtPopover\"\n                            [rtPopover]=\"popupTpl\"\n                            [rtPopoverDisabled]=\"isDisabled()\"\n                            [label]=\"addTitle()\"\n                            [attr.aria-label]=\"addTitle()\"\n                            [disabled]=\"isDisabled()\"\n                            (rtPopoverOpened)=\"onOpened()\"\n                            (rtPopoverClosed)=\"onClosed()\"\n                            (click)=\"onAdd(addPopover)\"></button>\n                    }\n                </rt-dynamic-selector-list>\n            }\n\n            @if (invitation()) {\n                <rt-empty-state\n                    rtElem=\"invitation\"\n                    qa-dataid=\"dynamic-selector-invitation\"\n                    [icon]=\"invitationIcon()\"\n                    [glyph]=\"invitationGlyph()\"\n                    [description]=\"invitationDescription()\">\n                    @if (hasOffer()) {\n                        <button\n                            rtButton\n                            type=\"button\"\n                            qa-dataid=\"dynamic-selector-invitation-add\"\n                            rtPopoverTrigger=\"manual\"\n                            #invitationPopover=\"rtPopover\"\n                            [appearance]=\"invitationButtonAppearance()\"\n                            [icon]=\"invitationButtonIcon()\"\n                            [rtPopover]=\"popupTpl\"\n                            [rtPopoverDisabled]=\"isDisabled()\"\n                            [label]=\"addTitle()\"\n                            [attr.aria-label]=\"addTitle()\"\n                            [disabled]=\"isDisabled()\"\n                            (rtPopoverOpened)=\"onOpened()\"\n                            (rtPopoverClosed)=\"onClosed()\"\n                            (click)=\"onAdd(invitationPopover)\"></button>\n                    }\n                </rt-empty-state>\n            }\n        </div>\n    }\n\n    <ng-template #popupTpl>\n        <rt-dynamic-selector-popup\n            [entities]=\"offered()\"\n            [keyExp]=\"keyExp()\"\n            [displayExp]=\"displayExp()\"\n            [displayWith]=\"displayWith()\"\n            [mode]=\"mode()\"\n            [multiToggleShown]=\"multiToggleShown()\"\n            [selectAllShown]=\"selectAllShown()\"\n            [localSearch]=\"localSearch()\"\n            [lazyLoad]=\"lazyLoad()\"\n            [loading]=\"loading()\"\n            [fetching]=\"fetching()\"\n            [pinnedKeys]=\"pinnedKeys()\"\n            [navigateTitle]=\"navigateTitle()\"\n            [navigateLink]=\"navigateLink()\"\n            [searchTerm]=\"searchTerm()\"\n            [searchAppearance]=\"searchAppearance()\"\n            [searchRadius]=\"searchRadius()\"\n            [emptyResultsText]=\"emptyResultsText()\"\n            [titleWrap]=\"titleWrap()\"\n            [highlightSearch]=\"highlightSearch()\"\n            [applyLabel]=\"applyLabel()\"\n            [applyLabelCase]=\"applyLabelCase()\"\n            [autofocusSearch]=\"autofocusSearch()\"\n            (applied)=\"onApplied($event)\"\n            (cancelled)=\"onCancelled()\"\n            (searchChange)=\"searchChange.emit($event)\"\n            (loadMore)=\"loadMore.emit()\"\n            (temporaryChoiceChange)=\"temporaryChoiceChange.emit($event)\" />\n    </ng-template>\n</ng-container>\n",
+			template: "<ng-container rtBlock=\"rt-dynamic-selector\">\n    @if (isNothingToChoose()) {\n        <rt-empty-state rtElem=\"nothing\" qa-dataid=\"dynamic-selector-nothing\" icon=\"warning\" [title]=\"nothingToChooseLabel()\" />\n    } @else {\n        <div rtElem=\"content\">\n            <!-- Под приглашением пустой список не рисуется: узел нулевой высоты сдвигал бы приглашение зазором. -->\n            @if (rows().length > 0 || !invitation()) {\n                <rt-dynamic-selector-list>\n                    @if (isAddShown()) {\n                        <button\n                            rtButton\n                            theme=\"secondary\"\n                            appearance=\"text\"\n                            type=\"button\"\n                            qa-dataid=\"dynamic-selector-add\"\n                            rtPopoverTrigger=\"manual\"\n                            #addPopover=\"rtPopover\"\n                            [rtPopover]=\"popupTpl\"\n                            [rtPopoverDisabled]=\"isDisabled()\"\n                            [label]=\"addTitle()\"\n                            [attr.aria-label]=\"addTitle()\"\n                            [disabled]=\"isDisabled()\"\n                            (rtPopoverOpened)=\"onOpened()\"\n                            (rtPopoverClosed)=\"onClosed()\"\n                            (click)=\"onAdd(addPopover)\"></button>\n                    }\n                </rt-dynamic-selector-list>\n            }\n\n            @if (invitation()) {\n                <rt-empty-state\n                    rtElem=\"invitation\"\n                    qa-dataid=\"dynamic-selector-invitation\"\n                    [icon]=\"invitationIcon()\"\n                    [glyph]=\"invitationGlyph()\"\n                    [description]=\"invitationDescription()\">\n                    @if (hasOffer()) {\n                        <button\n                            rtButton\n                            type=\"button\"\n                            qa-dataid=\"dynamic-selector-invitation-add\"\n                            rtPopoverTrigger=\"manual\"\n                            #invitationPopover=\"rtPopover\"\n                            [appearance]=\"invitationButtonAppearance()\"\n                            [icon]=\"invitationButtonIcon()\"\n                            [rtPopover]=\"popupTpl\"\n                            [rtPopoverDisabled]=\"isDisabled()\"\n                            [label]=\"addTitle()\"\n                            [attr.aria-label]=\"addTitle()\"\n                            [disabled]=\"isDisabled()\"\n                            (rtPopoverOpened)=\"onOpened()\"\n                            (rtPopoverClosed)=\"onClosed()\"\n                            (click)=\"onAdd(invitationPopover)\"></button>\n                    }\n                </rt-empty-state>\n            }\n        </div>\n    }\n\n    <ng-template #popupTpl>\n        <rt-dynamic-selector-popup />\n    </ng-template>\n</ng-container>\n",
 			styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-dynamic-selector{display:block;width:100%}.rt-dynamic-selector__content{display:flex;flex-direction:column;gap:var(--rt-space-sm)}.rt-dynamic-selector__invitation,.rt-dynamic-selector__nothing{min-width:0}}\n"],
 			dependencies: [
 				{
@@ -2799,67 +2227,12 @@ var RtDynamicSelectorComponent = class RtDynamicSelectorComponent extends RtForm
 				{
 					kind: "component",
 					type: RtDynamicSelectorListComponent,
-					selector: "rt-dynamic-selector-list",
-					inputs: [
-						"rows",
-						"draggable",
-						"editable",
-						"disabled",
-						"actionsShown",
-						"resetClearShown",
-						"removeShown",
-						"resetDisabled",
-						"clearDisabled",
-						"buttonRadius",
-						"clearIcon",
-						"titleWrap",
-						"titleTpl",
-						"controlsTpl"
-					],
-					outputs: [
-						"removed",
-						"moved",
-						"edited",
-						"resetClicked",
-						"cleared"
-					]
+					selector: "rt-dynamic-selector-list"
 				},
 				{
 					kind: "component",
 					type: RtDynamicSelectorPopupComponent,
-					selector: "rt-dynamic-selector-popup",
-					inputs: [
-						"entities",
-						"keyExp",
-						"displayExp",
-						"displayWith",
-						"mode",
-						"multiToggleShown",
-						"selectAllShown",
-						"localSearch",
-						"lazyLoad",
-						"loading",
-						"fetching",
-						"pinnedKeys",
-						"navigateTitle",
-						"navigateLink",
-						"searchTerm",
-						"searchAppearance",
-						"searchRadius",
-						"emptyResultsText",
-						"applyLabel",
-						"applyLabelCase",
-						"autofocusSearch",
-						"titleWrap",
-						"highlightSearch"
-					],
-					outputs: [
-						"applied",
-						"cancelled",
-						"searchChange",
-						"loadMore",
-						"temporaryChoiceChange"
-					]
+					selector: "rt-dynamic-selector-popup"
 				},
 				{
 					kind: "component",
@@ -2922,9 +2295,9 @@ i0.ɵɵngDeclareClassMetadata({
 			providers: [{
 				provide: RtFormControlBase,
 				useExisting: forwardRef(() => RtDynamicSelectorComponent)
-			}],
+			}, RtDynamicSelectorPartsService],
 			host: { class: BEM_BLOCK },
-			template: "<ng-container rtBlock=\"rt-dynamic-selector\">\n    @if (isNothingToChoose()) {\n        <rt-empty-state rtElem=\"nothing\" qa-dataid=\"dynamic-selector-nothing\" icon=\"warning\" [title]=\"nothingToChooseLabel()\" />\n    } @else {\n        <div rtElem=\"content\">\n            <!-- Под приглашением пустой список не рисуется: узел нулевой высоты сдвигал бы приглашение зазором. -->\n            @if (rows().length > 0 || !invitation()) {\n                <rt-dynamic-selector-list\n                    [rows]=\"rows()\"\n                    [draggable]=\"draggable()\"\n                    [buttonRadius]=\"buttonRadius()\"\n                    [clearIcon]=\"clearIcon()\"\n                    [titleWrap]=\"titleWrap()\"\n                    [disabled]=\"isDisabled()\"\n                    [actionsShown]=\"!invitation()\"\n                    [resetClearShown]=\"listActionsShown()\"\n                    [removeShown]=\"removeShown()\"\n                    [resetDisabled]=\"isResetDisabled()\"\n                    [clearDisabled]=\"isClearDisabled()\"\n                    [titleTpl]=\"titleTpl()\"\n                    [controlsTpl]=\"controlsTpl()\"\n                    (removed)=\"onRemoved($event)\"\n                    (moved)=\"onMoved($event)\"\n                    (resetClicked)=\"onReset()\"\n                    (cleared)=\"onCleared()\">\n                    @if (isAddShown()) {\n                        <button\n                            rtButton\n                            theme=\"secondary\"\n                            appearance=\"text\"\n                            type=\"button\"\n                            qa-dataid=\"dynamic-selector-add\"\n                            rtPopoverTrigger=\"manual\"\n                            #addPopover=\"rtPopover\"\n                            [rtPopover]=\"popupTpl\"\n                            [rtPopoverDisabled]=\"isDisabled()\"\n                            [label]=\"addTitle()\"\n                            [attr.aria-label]=\"addTitle()\"\n                            [disabled]=\"isDisabled()\"\n                            (rtPopoverOpened)=\"onOpened()\"\n                            (rtPopoverClosed)=\"onClosed()\"\n                            (click)=\"onAdd(addPopover)\"></button>\n                    }\n                </rt-dynamic-selector-list>\n            }\n\n            @if (invitation()) {\n                <rt-empty-state\n                    rtElem=\"invitation\"\n                    qa-dataid=\"dynamic-selector-invitation\"\n                    [icon]=\"invitationIcon()\"\n                    [glyph]=\"invitationGlyph()\"\n                    [description]=\"invitationDescription()\">\n                    @if (hasOffer()) {\n                        <button\n                            rtButton\n                            type=\"button\"\n                            qa-dataid=\"dynamic-selector-invitation-add\"\n                            rtPopoverTrigger=\"manual\"\n                            #invitationPopover=\"rtPopover\"\n                            [appearance]=\"invitationButtonAppearance()\"\n                            [icon]=\"invitationButtonIcon()\"\n                            [rtPopover]=\"popupTpl\"\n                            [rtPopoverDisabled]=\"isDisabled()\"\n                            [label]=\"addTitle()\"\n                            [attr.aria-label]=\"addTitle()\"\n                            [disabled]=\"isDisabled()\"\n                            (rtPopoverOpened)=\"onOpened()\"\n                            (rtPopoverClosed)=\"onClosed()\"\n                            (click)=\"onAdd(invitationPopover)\"></button>\n                    }\n                </rt-empty-state>\n            }\n        </div>\n    }\n\n    <ng-template #popupTpl>\n        <rt-dynamic-selector-popup\n            [entities]=\"offered()\"\n            [keyExp]=\"keyExp()\"\n            [displayExp]=\"displayExp()\"\n            [displayWith]=\"displayWith()\"\n            [mode]=\"mode()\"\n            [multiToggleShown]=\"multiToggleShown()\"\n            [selectAllShown]=\"selectAllShown()\"\n            [localSearch]=\"localSearch()\"\n            [lazyLoad]=\"lazyLoad()\"\n            [loading]=\"loading()\"\n            [fetching]=\"fetching()\"\n            [pinnedKeys]=\"pinnedKeys()\"\n            [navigateTitle]=\"navigateTitle()\"\n            [navigateLink]=\"navigateLink()\"\n            [searchTerm]=\"searchTerm()\"\n            [searchAppearance]=\"searchAppearance()\"\n            [searchRadius]=\"searchRadius()\"\n            [emptyResultsText]=\"emptyResultsText()\"\n            [titleWrap]=\"titleWrap()\"\n            [highlightSearch]=\"highlightSearch()\"\n            [applyLabel]=\"applyLabel()\"\n            [applyLabelCase]=\"applyLabelCase()\"\n            [autofocusSearch]=\"autofocusSearch()\"\n            (applied)=\"onApplied($event)\"\n            (cancelled)=\"onCancelled()\"\n            (searchChange)=\"searchChange.emit($event)\"\n            (loadMore)=\"loadMore.emit()\"\n            (temporaryChoiceChange)=\"temporaryChoiceChange.emit($event)\" />\n    </ng-template>\n</ng-container>\n",
+			template: "<ng-container rtBlock=\"rt-dynamic-selector\">\n    @if (isNothingToChoose()) {\n        <rt-empty-state rtElem=\"nothing\" qa-dataid=\"dynamic-selector-nothing\" icon=\"warning\" [title]=\"nothingToChooseLabel()\" />\n    } @else {\n        <div rtElem=\"content\">\n            <!-- Под приглашением пустой список не рисуется: узел нулевой высоты сдвигал бы приглашение зазором. -->\n            @if (rows().length > 0 || !invitation()) {\n                <rt-dynamic-selector-list>\n                    @if (isAddShown()) {\n                        <button\n                            rtButton\n                            theme=\"secondary\"\n                            appearance=\"text\"\n                            type=\"button\"\n                            qa-dataid=\"dynamic-selector-add\"\n                            rtPopoverTrigger=\"manual\"\n                            #addPopover=\"rtPopover\"\n                            [rtPopover]=\"popupTpl\"\n                            [rtPopoverDisabled]=\"isDisabled()\"\n                            [label]=\"addTitle()\"\n                            [attr.aria-label]=\"addTitle()\"\n                            [disabled]=\"isDisabled()\"\n                            (rtPopoverOpened)=\"onOpened()\"\n                            (rtPopoverClosed)=\"onClosed()\"\n                            (click)=\"onAdd(addPopover)\"></button>\n                    }\n                </rt-dynamic-selector-list>\n            }\n\n            @if (invitation()) {\n                <rt-empty-state\n                    rtElem=\"invitation\"\n                    qa-dataid=\"dynamic-selector-invitation\"\n                    [icon]=\"invitationIcon()\"\n                    [glyph]=\"invitationGlyph()\"\n                    [description]=\"invitationDescription()\">\n                    @if (hasOffer()) {\n                        <button\n                            rtButton\n                            type=\"button\"\n                            qa-dataid=\"dynamic-selector-invitation-add\"\n                            rtPopoverTrigger=\"manual\"\n                            #invitationPopover=\"rtPopover\"\n                            [appearance]=\"invitationButtonAppearance()\"\n                            [icon]=\"invitationButtonIcon()\"\n                            [rtPopover]=\"popupTpl\"\n                            [rtPopoverDisabled]=\"isDisabled()\"\n                            [label]=\"addTitle()\"\n                            [attr.aria-label]=\"addTitle()\"\n                            [disabled]=\"isDisabled()\"\n                            (rtPopoverOpened)=\"onOpened()\"\n                            (rtPopoverClosed)=\"onClosed()\"\n                            (click)=\"onAdd(invitationPopover)\"></button>\n                    }\n                </rt-empty-state>\n            }\n        </div>\n    }\n\n    <ng-template #popupTpl>\n        <rt-dynamic-selector-popup />\n    </ng-template>\n</ng-container>\n",
 			styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-dynamic-selector{display:block;width:100%}.rt-dynamic-selector__content{display:flex;flex-direction:column;gap:var(--rt-space-sm)}.rt-dynamic-selector__invitation,.rt-dynamic-selector__nothing{min-width:0}}\n"]
 		}]
 	}],