@rt-tools/ui-kit-v2 0.17.0 → 0.18.0

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

@@ -0,0 +1,937 @@
+import * as i0 from '@angular/core';
+import { inject, signal, input, booleanAttribute, output, ViewEncapsulation, ChangeDetectionStrategy, Component, TemplateRef, Directive, Injector, viewChild, ElementRef, contentChild, computed, afterNextRender, forwardRef, DestroyRef, viewChildren, model } from '@angular/core';
+import * as i1 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+import { BlockDirective, ElemDirective, ModDirective } from '@rt-tools/core';
+import { BreakpointsService, rtKitLabel, RtInfiniteScrollDirective } 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';
+import { RtInputComponent } from '@rt-tools/ui-kit-v2/input';
+import { CdkDrag, CdkDragHandle, CdkDropList } from '@angular/cdk/drag-drop';
+import { NgTemplateOutlet } from '@angular/common';
+import { RtIconButtonComponent } from '@rt-tools/ui-kit-v2/icon-button';
+import { RtTooltipDirective } from '@rt-tools/ui-kit-v2/tooltip';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { RouterLink } from '@angular/router';
+import { Subject, debounceTime } from 'rxjs';
+import { RtCheckboxComponent } from '@rt-tools/ui-kit-v2/checkbox';
+import { RtIconComponent } from '@rt-tools/ui-kit-v2/icon';
+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';
+
+const BEM_BLOCK$3 = 'rt-dynamic-selector-list';
+/**
+ * Список выбранного семьи динамических селекторов: строки с удалением, ручкой перетаскивания и
+ * правкой, под ними полоса с кнопкой добавления вызывающего, сбросом и очисткой. Значения список
+ * не держит: он сообщает, что человек сделал, а селектор и поле списка строк решают, что из этого
+ * выходит.
+ */
+class RtDynamicSelectorListComponent {
+    constructor() {
+        this.#breakpoints = inject(BreakpointsService);
+        /** На узком экране подсказки кнопок не показываются: наведения там нет. */
+        this.isNarrow = this.#breakpoints.narrow;
+        this.dragLabel = rtKitLabel('dynamicSelectorDrag');
+        this.removeLabel = rtKitLabel('dynamicSelectorRemove');
+        this.editLabel = rtKitLabel('dynamicSelectorEdit');
+        this.applyLabel = rtKitLabel('dynamicSelectorApply');
+        this.cancelLabel = rtKitLabel('uiCancel');
+        this.resetLabel = rtKitLabel('dynamicSelectorReset');
+        this.clearLabel = rtKitLabel('dynamicSelectorClear');
+        /** Строка, открытая для правки, и текст в её поле. */
+        this.editedIndex = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "editedIndex" }] : /* istanbul ignore next */ []));
+        this.draft = signal('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "draft" }] : /* istanbul ignore next */ []));
+        this.rows = input([], /* @ts-ignore */
+        ...(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', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "buttonRadius" }] : /* istanbul ignore next */ []));
+        this.titleTpl = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "titleTpl" }] : /* istanbul ignore next */ []));
+        this.controlsTpl = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "controlsTpl" }] : /* istanbul ignore next */ []));
+        this.removed = output();
+        this.moved = output();
+        this.edited = output();
+        this.resetClicked = output();
+        this.cleared = output();
+    }
+    #breakpoints;
+    /** Строка, взятая из чужого списка, ничего не меняет; брошенная на своё место — тоже. */
+    onDrop(event) {
+        if (event.previousContainer !== event.container || event.previousIndex === event.currentIndex) {
+            return;
+        }
+        this.moved.emit({ from: event.previousIndex, to: event.currentIndex });
+    }
+    onRemove(row) {
+        if (!row.locked && !this.disabled()) {
+            this.removed.emit(row.key);
+        }
+    }
+    onEditStart(index, row) {
+        this.draft.set(row.label);
+        this.editedIndex.set(index);
+    }
+    onEditApply(row) {
+        this.edited.emit({ previous: row.label, next: this.draft() });
+        this.editedIndex.set(null);
+    }
+    onEditCancel() {
+        this.editedIndex.set(null);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtDynamicSelectorListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", 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 }, 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 rtElem=\"title\">{{ row.label }}</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                    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                    qa-dataid=\"dynamic-selector-clear\"\n                    icon=\"close\"\n                    size=\"sm\"\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", 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);display:flex;flex-direction:column;gap:var(--rt-space-2xs)}.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-space-2xs) var(--rt-space-2xs) var(--rt-space-sm);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;padding-inline-end:var(--rt-space-2xs)}.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__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-space-2xs)}.rt-dynamic-selector-list__actions{display:flex;align-items:center;gap:var(--rt-space-2xs)}.rt-dynamic-selector-list__add{display:flex;min-width:0;flex:1 1 auto;align-items:center}.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);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-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: [{ kind: "ngmodule", type: 
+                // Angular
+                FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: 
+                // CDK
+                CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: 
+                // standalone components / directives
+                BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }, { kind: "directive", type: ModDirective, selector: "[rtMod]" }, { kind: "component", type: RtIconButtonComponent, selector: "rt-icon-button", inputs: ["icon", "glyph", "ariaLabel", "variant", "iconColor", "iconFill", "size", "iconSize", "type", "tooltip", "tabIndex", "loading", "disabled", "active", "indicator"], outputs: ["clicked"] }, { kind: "component", type: RtInputComponent, selector: "rt-input", inputs: ["appearance", "type", "placeholder", "iconLeft", "iconRight", "passwordToggle", "autocomplete"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtDynamicSelectorListComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rt-dynamic-selector-list', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [
+                        // Angular
+                        FormsModule,
+                        NgTemplateOutlet,
+                        // CDK
+                        CdkDrag,
+                        CdkDragHandle,
+                        CdkDropList,
+                        // standalone components / directives
+                        BlockDirective,
+                        ElemDirective,
+                        ModDirective,
+                        RtIconButtonComponent,
+                        RtInputComponent,
+                        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 rtElem=\"title\">{{ row.label }}</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                    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                    qa-dataid=\"dynamic-selector-clear\"\n                    icon=\"close\"\n                    size=\"sm\"\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", 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);display:flex;flex-direction:column;gap:var(--rt-space-2xs)}.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-space-2xs) var(--rt-space-2xs) var(--rt-space-sm);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;padding-inline-end:var(--rt-space-2xs)}.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__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-space-2xs)}.rt-dynamic-selector-list__actions{display:flex;align-items:center;gap:var(--rt-space-2xs)}.rt-dynamic-selector-list__add{display:flex;min-width:0;flex:1 1 auto;align-items:center}.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);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-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 }] }], 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"] }] } });
+
+/**
+ * Маркеры частей строки списка выбранного — своим файлом, как у соседних семей.
+ *
+ * Маркер держит свой шаблон и о списке не знает ничего: селектор и поле списка строк читают его
+ * среди своего содержимого и отдают шаблон списку. Удаление и ручка перетаскивания остаются
+ * за китом.
+ */
+/**
+ * Свои кнопки у каждой строки: стоят перед кнопкой удаления.
+ *
+ * @example
+ * ```html
+ * <rt-dynamic-selector keyExp="id" displayExp="name" [entities]="people()">
+ *     <ng-template rtDynamicSelectorRowControls let-person>
+ *         <rt-icon-button icon="info" ariaLabel="About" (clicked)="open(person)" />
+ *     </ng-template>
+ * </rt-dynamic-selector>
+ * ```
+ */
+class RtDynamicSelectorRowControlsDirective {
+    constructor() {
+        this.templateRef = inject(TemplateRef);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtDynamicSelectorRowControlsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.6", type: RtDynamicSelectorRowControlsDirective, isStandalone: true, selector: "[rtDynamicSelectorRowControls]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtDynamicSelectorRowControlsDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rtDynamicSelectorRowControls]',
+                }]
+        }] });
+/** Своё название строки вместо подписи из поля записи. */
+class RtDynamicSelectorRowTitleDirective {
+    constructor() {
+        this.templateRef = inject(TemplateRef);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtDynamicSelectorRowTitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.6", type: RtDynamicSelectorRowTitleDirective, isStandalone: true, selector: "[rtDynamicSelectorRowTitle]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtDynamicSelectorRowTitleDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rtDynamicSelectorRowTitle]',
+                }]
+        }] });
+
+/** Подпись пункта строкой: число приводится, всё прочее подписью не считается. */
+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 selectableDynamicItems(items, chosenKeys, keyOf, labelOf, query, sortFn) {
+    const chosen = new Set(chosenKeys);
+    const found = items.filter((item) => {
+        const label = dynamicSelectorLabel(item, labelOf);
+        return label !== null && !chosen.has(keyOf(item)) && dynamicSelectorMatches(label, query);
+    });
+    return found.sort(sortFn ?? ((a, b) => (dynamicSelectorLabel(a, labelOf) ?? '').localeCompare(dynamicSelectorLabel(b, labelOf) ?? '')));
+}
+/** Ключ добавлен или снят. Повторно добавленный ключ не удваивается. */
+function toggleDynamicKey(keys, key, checked) {
+    if (checked) {
+        return keys.includes(key) ? [...keys] : [...keys, key];
+    }
+    return keys.filter((item) => item !== key);
+}
+/** Состояние флажка «Выбрать всё» по видимым пунктам. */
+function dynamicSelectAllState(visibleKeys, pickedKeys) {
+    const picked = visibleKeys.filter((key) => pickedKeys.includes(key)).length;
+    if (picked === 0) {
+        return 'none';
+    }
+    return picked === visibleKeys.length ? 'all' : 'some';
+}
+/**
+ * «Выбрать всё» добавляет к отмеченному все видимые пункты, снятие — убирает видимые и оставляет
+ * отмеченное вне запроса.
+ */
+function selectAllDynamicKeys(visibleKeys, pickedKeys, checked) {
+    if (!checked) {
+        return pickedKeys.filter((key) => !visibleKeys.includes(key));
+    }
+    return [...pickedKeys, ...visibleKeys.filter((key) => !pickedKeys.includes(key))];
+}
+/** «Очистить» оставляет только ключи только для чтения, в их прежнем порядке. */
+function clearDynamicKeys(keys, readonlyKeys) {
+    return keys.filter((key) => readonlyKeys.includes(key));
+}
+/** Строка перетащена на новое место. Индексы вне списка приводятся к его краям. */
+function moveDynamicKey(keys, from, to) {
+    const list = [...keys];
+    const last = list.length - 1;
+    if (from < 0 || from > last) {
+        return list;
+    }
+    const moved = list.splice(from, 1);
+    list.splice(Math.min(Math.max(to, 0), last), 0, ...moved);
+    return list;
+}
+/** Совпадают ли два набора ключей с учётом порядка: так «Сбросить» узнаёт, что сбрасывать нечего. */
+function sameDynamicKeys(a, b) {
+    return a.length === b.length && a.every((key, index) => key === b[index]);
+}
+/** Совпадают ли два набора ключей без учёта порядка: так «Очистить» узнаёт, что чистить нечего. */
+function sameDynamicKeySet(a, b) {
+    const set = new Set(b);
+    return a.length === set.size && a.every((key) => set.has(key));
+}
+/** Строка поля списка строк: пустая и повторная не добавляются, пробелы по краям срезаются. */
+function addDynamicText(values, raw) {
+    const text = (raw ?? '').trim();
+    return text === '' || values.includes(text) ? [...values] : [...values, text];
+}
+/**
+ * Строка поля списка строк исправлена на месте. Пустая правка и правка в уже существующую строку
+ * список не меняют: иначе строка пропала бы или удвоилась.
+ */
+function renameDynamicText(values, previous, next) {
+    const text = (next ?? '').trim();
+    if (text === '' || text === previous || values.includes(text)) {
+        return [...values];
+    }
+    return values.map((value) => (value === previous ? text : value));
+}
+/** Ключ последней видимой закреплённой строки: под ней стоит разделитель. Порядок строк не меняется. */
+function lastPinnedDynamicKey(rows, pinnedKeys, keyOf) {
+    for (let index = rows.length - 1; index >= 0; index -= 1) {
+        const key = keyOf(rows[index]);
+        if (pinnedKeys.includes(key)) {
+            return key;
+        }
+    }
+    return null;
+}
+/**
+ * Строки всплывающего выбора во время поиска: отмеченные раньше стоят над найденными и не пропадают
+ * оттого, что запрос перестал с ними совпадать. Без запроса отмеченные остаются на своих местах.
+ */
+function dynamicPopupRows(offered, found, ticked, keyOf, query) {
+    if (query.trim() === '') {
+        return { ticked: [], found: [...found] };
+    }
+    const tickedRows = ticked
+        .map((key) => offered.find((item) => keyOf(item) === key))
+        .filter((item) => item !== undefined);
+    return { ticked: tickedRows, found: found.filter((item) => !ticked.includes(keyOf(item))) };
+}
+
+const BEM_BLOCK$2 = 'rt-dynamic-input';
+/**
+ * Поле списка строк: строки человек набирает сам. Значение — массив строк в порядке списка.
+ * Enter или уход из поля добавляют срезанный по краям текст в конец; пустой и повторный не
+ * добавляются. Сброс, очистка, удаление строки и перетаскивание — те же, что у селектора.
+ *
+ * @example
+ * ```html
+ * <rt-dynamic-input editable [formControl]="tags" />
+ * ```
+ */
+class RtDynamicInputComponent extends RtFormControlBase {
+    constructor() {
+        super(...arguments);
+        this.#injector = inject(Injector);
+        /** Последнее значение, записанное формой: к нему возвращает сброс. */
+        this.#initial = signal([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#initial" }] : /* istanbul ignore next */ []));
+        this.addLabel = rtKitLabel('dynamicSelectorAdd');
+        this.placeholderLabel = rtKitLabel('dynamicInputPlaceholder');
+        this.field = viewChild('field', { ...(ngDevMode ? { debugName: "field" } : /* istanbul ignore next */ {}), read: ElementRef });
+        this.rowControls = contentChild(RtDynamicSelectorRowControlsDirective, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "rowControls" }] : /* istanbul ignore next */ []));
+        this.controlsTpl = computed(() => this.rowControls()?.templateRef ?? null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "controlsTpl" }] : /* istanbul ignore next */ []));
+        /** Поле набора открыто, и в нём текст. */
+        this.isFieldShown = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isFieldShown" }] : /* istanbul ignore next */ []));
+        this.draft = signal('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "draft" }] : /* istanbul ignore next */ []));
+        /** Приглашение снимается нажатием его кнопки и до новой записи формы не возвращается. */
+        this.isInvitationDismissed = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isInvitationDismissed" }] : /* istanbul ignore next */ []));
+        this.rows = computed(() => {
+            const locked = this.readonlyKeys();
+            return this.value().map((text) => ({
+                item: text,
+                key: text,
+                label: text,
+                locked: locked.includes(text),
+            }));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []));
+        this.isInvitationShown = computed(() => this.invitation() && !this.isInvitationDismissed(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isInvitationShown" }] : /* istanbul ignore next */ []));
+        this.isAddShown = computed(() => !this.isFieldShown(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isAddShown" }] : /* istanbul ignore next */ []));
+        this.isKeysReset = computed(() => sameDynamicKeys(this.value(), this.#initial()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isKeysReset" }] : /* istanbul ignore next */ []));
+        this.isKeysClear = computed(() => clearDynamicKeys(this.value(), this.readonlyKeys()).length === this.value().length, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isKeysClear" }] : /* istanbul ignore next */ []));
+        /** Правки в шаблоне строки держат сброс и очистку включёнными, даже когда строки не менялись. */
+        this.isResetDisabled = computed(() => !this.extraChanged() && this.isKeysReset(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isResetDisabled" }] : /* istanbul ignore next */ []));
+        this.isClearDisabled = computed(() => !this.extraChanged() && this.isKeysClear(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isClearDisabled" }] : /* istanbul ignore next */ []));
+        this.addTitle = computed(() => this.buttonTitle() || this.addLabel(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "addTitle" }] : /* istanbul ignore next */ []));
+        this.fieldPlaceholder = computed(() => this.placeholder() || this.placeholderLabel(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "fieldPlaceholder" }] : /* istanbul ignore next */ []));
+        this.hasValue = computed(() => this.value().length > 0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hasValue" }] : /* istanbul ignore next */ []));
+        this.buttonTitle = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "buttonTitle" }] : /* istanbul ignore next */ []));
+        this.placeholder = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+        /** Строки, которые нельзя убрать из списка. */
+        this.readonlyKeys = input([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "readonlyKeys" }] : /* istanbul ignore next */ []));
+        this.draggable = input(false, { ...(ngDevMode ? { debugName: "draggable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** Шаг скругления кнопок-иконок списка; по умолчанию они круглые. */
+        this.buttonRadius = input('full', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "buttonRadius" }] : /* istanbul ignore next */ []));
+        this.editable = input(false, { ...(ngDevMode ? { debugName: "editable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.invitation = input(false, { ...(ngDevMode ? { debugName: "invitation" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.invitationIcon = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "invitationIcon" }] : /* istanbul ignore next */ []));
+        this.invitationDescription = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "invitationDescription" }] : /* istanbul ignore next */ []));
+        /** Корзина строк; без неё строки убирает только очистка или сам вызывающий. */
+        this.removeShown = input(true, { ...(ngDevMode ? { debugName: "removeShown" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** Сброс и очистка под списком: `false` их убирает, кнопка добавления остаётся. */
+        this.listActionsShown = input(true, { ...(ngDevMode ? { debugName: "listActionsShown" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /**
+         * Строки правлены в шаблоне вызывающего: сброс и очистка включены и тогда, когда строки прежние.
+         * Сброс сообщает `listReset`, очистка — `listCleared`, и вызывающий снимает свои правки.
+         */
+        this.extraChanged = input(false, { ...(ngDevMode ? { debugName: "extraChanged" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.listReset = output();
+        this.listCleared = output();
+        this.displayText = computed(() => this.value().join(', '), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "displayText" }] : /* istanbul ignore next */ []));
+    }
+    #injector;
+    /** Последнее значение, записанное формой: к нему возвращает сброс. */
+    #initial;
+    /** Записанное формой становится и списком, и значением для сброса; пустой массив список опустошает. */
+    writeValue(value) {
+        super.writeValue(value === null ? null : [...value]);
+        this.#initial.set([...this.value()]);
+        this.isInvitationDismissed.set(false);
+    }
+    onAdd() {
+        if (this.isDisabled()) {
+            return;
+        }
+        this.isInvitationDismissed.set(true);
+        this.draft.set('');
+        this.isFieldShown.set(true);
+        afterNextRender(() => this.field()?.nativeElement.querySelector('input')?.focus(), { injector: this.#injector });
+    }
+    /** Enter или уход из поля: пустой текст поле не закрывает, повторный закрывает без изменений. */
+    onCommit() {
+        if (!this.isFieldShown() || this.draft().trim() === '') {
+            return;
+        }
+        const next = addDynamicText(this.value(), this.draft());
+        this.draft.set('');
+        this.isFieldShown.set(false);
+        this.markTouched();
+        if (next.length !== this.value().length) {
+            this.#change(next);
+        }
+    }
+    onRemoved(key) {
+        if (!this.isDisabled() && typeof key === 'string' && !this.readonlyKeys().includes(key)) {
+            this.#change(this.value().filter((text) => text !== key));
+        }
+    }
+    onMoved(move) {
+        if (!this.isDisabled()) {
+            this.#change(moveDynamicKey(this.value(), move.from, move.to));
+        }
+    }
+    onEdited(edit) {
+        const next = renameDynamicText(this.value(), edit.previous, edit.next);
+        if (!this.isDisabled() && !sameDynamicKeys(next, this.value())) {
+            this.#change(next);
+        }
+    }
+    onReset() {
+        if (this.isDisabled() || this.isResetDisabled()) {
+            return;
+        }
+        // Строки прежние, а правки только в шаблоне: значение не трогаем, сообщаем о сбросе.
+        if (!this.isKeysReset()) {
+            this.#change([...this.#initial()]);
+        }
+        this.listReset.emit();
+    }
+    onCleared() {
+        if (this.isDisabled() || this.isClearDisabled()) {
+            return;
+        }
+        if (!this.isKeysClear()) {
+            this.#change(clearDynamicKeys(this.value(), this.readonlyKeys()));
+        }
+        this.listCleared.emit();
+    }
+    getEmptyValue() {
+        return [];
+    }
+    focusAfterClear() {
+        // Очистка крестиком у поля не ставится: фокус остаётся там, где был.
+    }
+    #change(values) {
+        this.value.set(values);
+        this.emitChange(values);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtDynamicInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: RtDynamicInputComponent, isStandalone: true, selector: "rt-dynamic-input", inputs: { buttonTitle: { classPropertyName: "buttonTitle", publicName: "buttonTitle", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, readonlyKeys: { classPropertyName: "readonlyKeys", publicName: "readonlyKeys", isSignal: true, isRequired: false, transformFunction: null }, draggable: { classPropertyName: "draggable", publicName: "draggable", isSignal: true, isRequired: false, transformFunction: null }, buttonRadius: { classPropertyName: "buttonRadius", publicName: "buttonRadius", isSignal: true, isRequired: false, transformFunction: null }, editable: { classPropertyName: "editable", publicName: "editable", isSignal: true, isRequired: false, transformFunction: null }, invitation: { classPropertyName: "invitation", publicName: "invitation", isSignal: true, isRequired: false, transformFunction: null }, invitationIcon: { classPropertyName: "invitationIcon", publicName: "invitationIcon", isSignal: true, isRequired: false, transformFunction: null }, invitationDescription: { classPropertyName: "invitationDescription", publicName: "invitationDescription", isSignal: true, isRequired: false, transformFunction: null }, removeShown: { classPropertyName: "removeShown", publicName: "removeShown", isSignal: true, isRequired: false, transformFunction: null }, listActionsShown: { classPropertyName: "listActionsShown", publicName: "listActionsShown", isSignal: true, isRequired: false, transformFunction: null }, extraChanged: { classPropertyName: "extraChanged", publicName: "extraChanged", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { listReset: "listReset", listCleared: "listCleared" }, host: { classAttribute: "rt-dynamic-input" }, providers: [
+            // Алиас базового токена — для contentChild(RtFormControlBase) в rt-field.
+            { provide: RtFormControlBase, useExisting: forwardRef(() => RtDynamicInputComponent) },
+        ], queries: [{ propertyName: "rowControls", first: true, predicate: RtDynamicSelectorRowControlsDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "field", first: true, predicate: ["field"], descendants: true, read: ElementRef, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ng-container rtBlock=\"rt-dynamic-input\">\n    <rt-dynamic-selector-list\n        [rows]=\"rows()\"\n        [draggable]=\"draggable()\"\n        [buttonRadius]=\"buttonRadius()\"\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    @if (isFieldShown()) {\n        <rt-input\n            #field\n            rtElem=\"field\"\n            qa-dataid=\"dynamic-input-field\"\n            [placeholder]=\"fieldPlaceholder()\"\n            [ngModel]=\"draft()\"\n            (ngModelChange)=\"draft.set($event ?? '')\"\n            (keydown.enter)=\"onCommit()\"\n            (focusout)=\"onCommit()\" />\n    }\n\n    @if (isInvitationShown()) {\n        <rt-empty-state\n            rtElem=\"invitation\"\n            qa-dataid=\"dynamic-input-invitation\"\n            [icon]=\"invitationIcon()\"\n            [description]=\"invitationDescription()\">\n            <button\n                rtButton\n                appearance=\"outlined\"\n                type=\"button\"\n                qa-dataid=\"dynamic-input-invitation-add\"\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{display:block}}\n"], dependencies: [{ kind: "ngmodule", type: 
+                // Angular
+                FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: 
+                // standalone components / directives
+                BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }, { kind: "directive", type: RtButtonDirective, selector: "button[rtButton], a[rtButton]", inputs: ["label", "icon", "iconPos", "theme", "appearance", "size", "loading", "loadingIcon", "loadingLabel", "pressed"] }, { kind: "component", type: RtDynamicSelectorListComponent, selector: "rt-dynamic-selector-list", inputs: ["rows", "draggable", "editable", "disabled", "actionsShown", "resetClearShown", "removeShown", "resetDisabled", "clearDisabled", "buttonRadius", "titleTpl", "controlsTpl"], outputs: ["removed", "moved", "edited", "resetClicked", "cleared"] }, { kind: "component", type: RtEmptyStateComponent, selector: "rt-empty-state", inputs: ["icon", "glyph", "title", "description", "framed"] }, { kind: "component", type: RtInputComponent, selector: "rt-input", inputs: ["appearance", "type", "placeholder", "iconLeft", "iconRight", "passwordToggle", "autocomplete"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtDynamicInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rt-dynamic-input', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [
+                        // Angular
+                        FormsModule,
+                        // standalone components / directives
+                        BlockDirective,
+                        ElemDirective,
+                        RtButtonDirective,
+                        RtDynamicSelectorListComponent,
+                        RtEmptyStateComponent,
+                        RtInputComponent,
+                    ], providers: [
+                        // Алиас базового токена — для contentChild(RtFormControlBase) в rt-field.
+                        { provide: RtFormControlBase, useExisting: forwardRef(() => RtDynamicInputComponent) },
+                    ], host: { class: BEM_BLOCK$2 }, template: "<ng-container rtBlock=\"rt-dynamic-input\">\n    <rt-dynamic-selector-list\n        [rows]=\"rows()\"\n        [draggable]=\"draggable()\"\n        [buttonRadius]=\"buttonRadius()\"\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    @if (isFieldShown()) {\n        <rt-input\n            #field\n            rtElem=\"field\"\n            qa-dataid=\"dynamic-input-field\"\n            [placeholder]=\"fieldPlaceholder()\"\n            [ngModel]=\"draft()\"\n            (ngModelChange)=\"draft.set($event ?? '')\"\n            (keydown.enter)=\"onCommit()\"\n            (focusout)=\"onCommit()\" />\n    }\n\n    @if (isInvitationShown()) {\n        <rt-empty-state\n            rtElem=\"invitation\"\n            qa-dataid=\"dynamic-input-invitation\"\n            [icon]=\"invitationIcon()\"\n            [description]=\"invitationDescription()\">\n            <button\n                rtButton\n                appearance=\"outlined\"\n                type=\"button\"\n                qa-dataid=\"dynamic-input-invitation-add\"\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{display:block}}\n"] }]
+        }], propDecorators: { field: [{ type: i0.ViewChild, args: ['field', { ...{ read: ElementRef }, isSignal: true }] }], rowControls: [{ type: i0.ContentChild, args: [i0.forwardRef(() => RtDynamicSelectorRowControlsDirective), { isSignal: true }] }], buttonTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonTitle", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], readonlyKeys: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonlyKeys", required: false }] }], draggable: [{ type: i0.Input, args: [{ isSignal: true, alias: "draggable", required: false }] }], buttonRadius: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonRadius", required: false }] }], editable: [{ type: i0.Input, args: [{ isSignal: true, alias: "editable", required: false }] }], invitation: [{ type: i0.Input, args: [{ isSignal: true, alias: "invitation", required: false }] }], invitationIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "invitationIcon", required: false }] }], invitationDescription: [{ type: i0.Input, args: [{ isSignal: true, alias: "invitationDescription", required: false }] }], removeShown: [{ type: i0.Input, args: [{ isSignal: true, alias: "removeShown", required: false }] }], listActionsShown: [{ type: i0.Input, args: [{ isSignal: true, alias: "listActionsShown", required: false }] }], extraChanged: [{ type: i0.Input, args: [{ isSignal: true, alias: "extraChanged", required: false }] }], listReset: [{ type: i0.Output, args: ["listReset"] }], listCleared: [{ type: i0.Output, args: ["listCleared"] }] } });
+
+const BEM_BLOCK$1 = 'rt-dynamic-selector-popup';
+/** Сколько ждёт поиск на сервере после последней нажатой клавиши. */
+const RT_DYNAMIC_SELECTOR_SEARCH_DEBOUNCE = 500;
+/**
+ * Всплывающий выбор динамического селектора: поиск, флажки или переключатели, «Выбрать всё»,
+ * догрузка при прокрутке, «Отмена» и «Применить». Отметки живут в самом окне и уходят наружу
+ * только по «Применить»: окно создаётся заново при каждом открытии, и закрытие их сбрасывает.
+ */
+class RtDynamicSelectorPopupComponent {
+    constructor() {
+        this.#destroyRef = inject(DestroyRef);
+        this.#searchSource = new Subject();
+        this.searchLabel = rtKitLabel('dynamicSelectorSearch');
+        this.selectAllLabel = rtKitLabel('uiSelectAll');
+        this.multiLabel = rtKitLabel('dynamicSelectorMulti');
+        this.multiHintLabel = rtKitLabel('dynamicSelectorMultiHint');
+        this.noResultsLabel = rtKitLabel('dynamicSelectorNoResults');
+        this.cancelLabel = rtKitLabel('uiCancel');
+        this.applyLabel = rtKitLabel('dynamicSelectorApply');
+        /** Отмеченные ключи — ещё не применённые. */
+        this.ticked = signal([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "ticked" }] : /* istanbul ignore next */ []));
+        this.query = signal('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "query" }] : /* istanbul ignore next */ []));
+        /** Выбор нескольких включён: без него простое нажатие оставляет одну отметку. */
+        this.isMultiOn = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isMultiOn" }] : /* istanbul ignore next */ []));
+        /** Найденные строки: местный поиск отбирает сам, серверный отдаёт запрос наружу. */
+        this.found = computed(() => {
+            const query = this.query();
+            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);
+            });
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "found" }] : /* istanbul ignore next */ []));
+        this.rows = computed(() => dynamicPopupRows(this.entities(), this.found(), this.ticked(), (item) => this.#keyOf(item), this.query()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []));
+        this.visibleKeys = computed(() => [...this.rows().ticked, ...this.rows().found].map((item) => this.#keyOf(item)), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "visibleKeys" }] : /* istanbul ignore next */ []));
+        /** Строки для разметки: отмеченные раньше над разделителем, найденные — под ним. */
+        this.rowItems = computed(() => {
+            const ticked = this.ticked();
+            const lastPinned = this.lastPinnedKey();
+            const { ticked: above, found } = this.rows();
+            const toRow = (item, separated) => ({
+                entity: item,
+                key: this.#keyOf(item),
+                label: dynamicSelectorLabel(item, (entity) => this.#labelOf(entity)) ?? '',
+                ticked: ticked.includes(this.#keyOf(item)),
+                separated,
+            });
+            return [
+                ...above.map((item, index) => toRow(item, index === above.length - 1)),
+                ...found.map((item) => toRow(item, lastPinned !== null && this.#keyOf(item) === lastPinned)),
+            ];
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "rowItems" }] : /* istanbul ignore next */ []));
+        this.hasRows = computed(() => this.visibleKeys().length > 0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hasRows" }] : /* istanbul ignore next */ []));
+        this.selectAllState = computed(() => dynamicSelectAllState(this.visibleKeys(), this.ticked()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selectAllState" }] : /* istanbul ignore next */ []));
+        this.isSingle = computed(() => this.mode() === 'single', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isSingle" }] : /* istanbul ignore next */ []));
+        this.isSelectAllShown = computed(() => !this.isSingle() && this.selectAllShown() && this.visibleKeys().length > 1 && !this.loading(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isSelectAllShown" }] : /* istanbul ignore next */ []));
+        this.isMultiToggleVisible = computed(() => !this.isSingle() && this.multiToggleShown() && this.visibleKeys().length > 1 && !this.loading(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isMultiToggleVisible" }] : /* istanbul ignore next */ []));
+        this.lastPinnedKey = computed(() => lastPinnedDynamicKey(this.rows().found, this.pinnedKeys(), (item) => this.#keyOf(item)), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "lastPinnedKey" }] : /* istanbul ignore next */ []));
+        this.isApplyDisabled = computed(() => this.ticked().length === 0 || this.loading(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isApplyDisabled" }] : /* istanbul ignore next */ []));
+        this.isNavShown = computed(() => !!this.navigateTitle() && !!this.navigateLink(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isNavShown" }] : /* istanbul ignore next */ []));
+        /** Предлагаемые записи: ещё не выбранные, отсортированные селектором. */
+        this.entities = input([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "entities" }] : /* istanbul ignore next */ []));
+        this.keyExp = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "keyExp" }] : /* istanbul ignore next */ []));
+        this.displayExp = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "displayExp" }] : /* istanbul ignore next */ []));
+        this.mode = input('multi', /* @ts-ignore */
+        ...(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([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "pinnedKeys" }] : /* istanbul ignore next */ []));
+        this.navigateTitle = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "navigateTitle" }] : /* istanbul ignore next */ []));
+        this.navigateLink = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "navigateLink" }] : /* istanbul ignore next */ []));
+        /** Запрос, с которым выбор открывается; событием поиска он не уходит — вызывающий его знает. */
+        this.searchTerm = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "searchTerm" }] : /* istanbul ignore next */ []));
+        /** Применённые ключи в порядке отметок. */
+        this.applied = output();
+        this.cancelled = output();
+        /** Запрос для поиска на сервере: через паузу после последней клавиши, стёртый — пустой строкой. */
+        this.searchChange = output();
+        this.loadMore = output();
+        /** Отмеченные записи: пустой список при открытии и текущие отметки после каждого поиска. */
+        this.temporaryChoiceChange = output();
+    }
+    #destroyRef;
+    #searchSource;
+    ngOnInit() {
+        // Выбор живёт в шаблоне и создаётся заново при каждом открытии: запрос начинается с входа.
+        this.query.set(this.searchTerm());
+        this.temporaryChoiceChange.emit([]);
+        this.#searchSource
+            .pipe(debounceTime(RT_DYNAMIC_SELECTOR_SEARCH_DEBOUNCE), takeUntilDestroyed(this.#destroyRef))
+            .subscribe((query) => this.searchChange.emit(query));
+    }
+    onQueryChange(value) {
+        const query = value ?? '';
+        this.query.set(query);
+        this.temporaryChoiceChange.emit(this.#tickedEntities());
+        if (!this.localSearch()) {
+            this.#searchSource.next(query);
+        }
+    }
+    /** Нажатие строки флажков: при выключенном выборе нескольких без Ctrl или Cmd остаётся одна отметка. */
+    onRowClick(event, item) {
+        const key = this.#keyOf(item);
+        const checked = !this.ticked().includes(key);
+        const addsToTicks = !this.multiToggleShown() || this.isMultiOn() || event.ctrlKey || event.metaKey;
+        this.ticked.update((keys) => toggleDynamicKey(addsToTicks ? keys : [], key, checked));
+    }
+    onRadioChange(item) {
+        this.ticked.set([this.#keyOf(item)]);
+    }
+    onSelectAll(checked) {
+        this.ticked.update((keys) => selectAllDynamicKeys(this.visibleKeys(), keys, checked));
+    }
+    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 !== undefined);
+    }
+    /** Ключ записи — по имени поля, которое назвал вызывающий. */
+    #keyOf(item) {
+        return item[this.keyExp()];
+    }
+    /** Подпись записи — по имени поля, которое назвал вызывающий. */
+    #labelOf(item) {
+        return item[this.displayExp()];
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtDynamicSelectorPopupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", 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 }, 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 } }, outputs: { applied: "applied", cancelled: "cancelled", searchChange: "searchChange", loadMore: "loadMore", temporaryChoiceChange: "temporaryChoiceChange" }, host: { classAttribute: "rt-dynamic-selector-popup" }, ngImport: i0, template: "<ng-container rtBlock=\"rt-dynamic-selector-popup\">\n    <div rtElem=\"head\">\n        <rt-input\n            rtElem=\"search\"\n            qa-dataid=\"dynamic-selector-search\"\n            iconLeft=\"search\"\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 }\">\n                    @if (isSingle()) {\n                        <rt-radio-button\n                            rtElem=\"option\"\n                            qa-dataid=\"dynamic-selector-option\"\n                            [value]=\"row.key\"\n                            [checked]=\"row.ticked\"\n                            [label]=\"row.label\"\n                            (checkedChange)=\"onRadioChange(row.entity)\" />\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                            {{ row.label }}\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]=\"noResultsLabel()\" />\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]=\"applyLabel()\"\n                [attr.aria-label]=\"applyLabel()\"\n                [disabled]=\"isApplyDisabled()\"\n                (click)=\"onApply()\"></button>\n        </div>\n    </div>\n</ng-container>\n", styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-dynamic-selector-popup{--rt-dynamic-selector-popup-width: calc(var(--rt-size-40) * 2);--rt-dynamic-selector-popup-max-height: calc(var(--rt-size-100) + var(--rt-size-20));--rt-dynamic-selector-popup-radius: var(--rt-radius-md);--rt-dynamic-selector-popup-border-width: var(--rt-border-width-thin);--rt-dynamic-selector-popup-shadow: var(--rt-shadow-lg);display:flex;width:var(--rt-dynamic-selector-popup-width);max-width:calc(100vw - var(--rt-space-md) * 2);max-height:var(--rt-dynamic-selector-popup-max-height);box-sizing:border-box;flex-direction:column;border:var(--rt-dynamic-selector-popup-border-width) solid var(--rt-color-border-subtle);border-radius:var(--rt-dynamic-selector-popup-radius);background:var(--rt-color-bg-surface);box-shadow:var(--rt-dynamic-selector-popup-shadow);color:var(--rt-color-text-primary);gap:var(--rt-space-sm);padding-block:var(--rt-space-md)}.rt-dynamic-selector-popup__head{display:flex;flex-direction:column;gap:var(--rt-space-sm);padding-inline:var(--rt-space-md)}.rt-dynamic-selector-popup__search{display:block}.rt-dynamic-selector-popup__controls{display:flex;flex-direction:column;border-bottom:var(--rt-dynamic-selector-popup-border-width) 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-hint-icon{display:none}}.rt-dynamic-selector-popup__select-all{display:block}.rt-dynamic-selector-popup__state{display:flex;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-space-md)}.rt-dynamic-selector-popup__row{display:block;padding-block:var(--rt-space-sm)}.rt-dynamic-selector-popup__row--separated{border-bottom:var(--rt-dynamic-selector-popup-border-width) 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__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{display:block;padding-inline:var(--rt-space-md)}.rt-dynamic-selector-popup__foot{display:flex;align-items:center;justify-content:flex-end;border-top:var(--rt-dynamic-selector-popup-border-width) solid var(--rt-color-border-subtle);gap:var(--rt-space-sm);padding-block-start:var(--rt-space-sm);padding-inline:var(--rt-space-md)}.rt-dynamic-selector-popup__foot--nav{justify-content:space-between}.rt-dynamic-selector-popup__nav{overflow:hidden;min-width:0;color:var(--rt-color-text-link);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)}}\n"], dependencies: [{ kind: "ngmodule", type: 
+                // Angular
+                FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "directive", type: 
+                // standalone components / directives
+                BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }, { kind: "directive", type: ModDirective, selector: "[rtMod]" }, { kind: "directive", type: RtButtonDirective, selector: "button[rtButton], a[rtButton]", inputs: ["label", "icon", "iconPos", "theme", "appearance", "size", "loading", "loadingIcon", "loadingLabel", "pressed"] }, { kind: "component", type: RtCheckboxComponent, selector: "rt-checkbox", inputs: ["inputId", "ariaLabel", "disabled", "indeterminate"] }, { kind: "component", type: RtEmptyStateComponent, selector: "rt-empty-state", inputs: ["icon", "glyph", "title", "description", "framed"] }, { kind: "component", type: RtIconComponent, selector: "rt-icon", inputs: ["name", "glyph", "size", "color", "fill", "spin", "rotate"] }, { kind: "directive", type: RtInfiniteScrollDirective, selector: "[rtInfiniteScroll]", inputs: ["disabled", "rootMargin"], outputs: ["loadMore"] }, { kind: "component", type: RtInputComponent, selector: "rt-input", inputs: ["appearance", "type", "placeholder", "iconLeft", "iconRight", "passwordToggle", "autocomplete"] }, { kind: "component", type: RtRadioButtonComponent, selector: "rt-radio-button", inputs: ["value", "checked", "disabled", "card", "label", "description", "ariaLabel"], outputs: ["clickAction", "checkedChange"] }, { kind: "component", type: RtSpinnerComponent, selector: "rt-spinner", inputs: ["diameter", "color", "appearance", "overlay", "backdrop", "plate"] }, { kind: "component", type: RtToggleSwitchComponent, selector: "rt-toggle-switch", inputs: ["inputId", "ariaLabel", "label", "size", "iconOff", "iconOn", "disabled"] }, { kind: "directive", type: RtTooltipDirective, selector: "[rtTooltip]", inputs: ["rtTooltip", "rtTooltipPlacement", "rtTooltipWhenTruncated"], exportAs: ["rtTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtDynamicSelectorPopupComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rt-dynamic-selector-popup', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [
+                        // Angular
+                        FormsModule,
+                        RouterLink,
+                        // standalone components / directives
+                        BlockDirective,
+                        ElemDirective,
+                        ModDirective,
+                        RtButtonDirective,
+                        RtCheckboxComponent,
+                        RtEmptyStateComponent,
+                        RtIconComponent,
+                        RtInfiniteScrollDirective,
+                        RtInputComponent,
+                        RtRadioButtonComponent,
+                        RtSpinnerComponent,
+                        RtToggleSwitchComponent,
+                        RtTooltipDirective,
+                    ], host: { class: BEM_BLOCK$1 }, template: "<ng-container rtBlock=\"rt-dynamic-selector-popup\">\n    <div rtElem=\"head\">\n        <rt-input\n            rtElem=\"search\"\n            qa-dataid=\"dynamic-selector-search\"\n            iconLeft=\"search\"\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 }\">\n                    @if (isSingle()) {\n                        <rt-radio-button\n                            rtElem=\"option\"\n                            qa-dataid=\"dynamic-selector-option\"\n                            [value]=\"row.key\"\n                            [checked]=\"row.ticked\"\n                            [label]=\"row.label\"\n                            (checkedChange)=\"onRadioChange(row.entity)\" />\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                            {{ row.label }}\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]=\"noResultsLabel()\" />\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]=\"applyLabel()\"\n                [attr.aria-label]=\"applyLabel()\"\n                [disabled]=\"isApplyDisabled()\"\n                (click)=\"onApply()\"></button>\n        </div>\n    </div>\n</ng-container>\n", styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-dynamic-selector-popup{--rt-dynamic-selector-popup-width: calc(var(--rt-size-40) * 2);--rt-dynamic-selector-popup-max-height: calc(var(--rt-size-100) + var(--rt-size-20));--rt-dynamic-selector-popup-radius: var(--rt-radius-md);--rt-dynamic-selector-popup-border-width: var(--rt-border-width-thin);--rt-dynamic-selector-popup-shadow: var(--rt-shadow-lg);display:flex;width:var(--rt-dynamic-selector-popup-width);max-width:calc(100vw - var(--rt-space-md) * 2);max-height:var(--rt-dynamic-selector-popup-max-height);box-sizing:border-box;flex-direction:column;border:var(--rt-dynamic-selector-popup-border-width) solid var(--rt-color-border-subtle);border-radius:var(--rt-dynamic-selector-popup-radius);background:var(--rt-color-bg-surface);box-shadow:var(--rt-dynamic-selector-popup-shadow);color:var(--rt-color-text-primary);gap:var(--rt-space-sm);padding-block:var(--rt-space-md)}.rt-dynamic-selector-popup__head{display:flex;flex-direction:column;gap:var(--rt-space-sm);padding-inline:var(--rt-space-md)}.rt-dynamic-selector-popup__search{display:block}.rt-dynamic-selector-popup__controls{display:flex;flex-direction:column;border-bottom:var(--rt-dynamic-selector-popup-border-width) 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-hint-icon{display:none}}.rt-dynamic-selector-popup__select-all{display:block}.rt-dynamic-selector-popup__state{display:flex;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-space-md)}.rt-dynamic-selector-popup__row{display:block;padding-block:var(--rt-space-sm)}.rt-dynamic-selector-popup__row--separated{border-bottom:var(--rt-dynamic-selector-popup-border-width) 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__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{display:block;padding-inline:var(--rt-space-md)}.rt-dynamic-selector-popup__foot{display:flex;align-items:center;justify-content:flex-end;border-top:var(--rt-dynamic-selector-popup-border-width) solid var(--rt-color-border-subtle);gap:var(--rt-space-sm);padding-block-start:var(--rt-space-sm);padding-inline:var(--rt-space-md)}.rt-dynamic-selector-popup__foot--nav{justify-content:space-between}.rt-dynamic-selector-popup__nav{overflow:hidden;min-width:0;color:var(--rt-color-text-link);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)}}\n"] }]
+        }], propDecorators: { 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 }] }], 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 }] }], 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"] }] } });
+
+const BEM_BLOCK = 'rt-dynamic-selector';
+/**
+ * Динамический селектор: поле формы со списком выбранных записей. Значение — массив ключей в
+ * порядке списка. Записи добавляются всплывающим выбором, убираются корзиной строки, список
+ * возвращается к записанному формой сбросом и пустеет очисткой — кроме строк только для чтения.
+ *
+ * @example
+ * ```html
+ * <rt-dynamic-selector keyExp="id" displayExp="name" [entities]="people()" [formControl]="team" />
+ * ```
+ */
+class RtDynamicSelectorComponent extends RtFormControlBase {
+    constructor() {
+        super(...arguments);
+        /** Последнее значение, записанное формой: к нему возвращает сброс. */
+        this.#initial = signal([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#initial" }] : /* istanbul ignore next */ []));
+        this.addLabel = rtKitLabel('dynamicSelectorAdd');
+        this.nothingToChooseLabel = rtKitLabel('dynamicSelectorNothingToChoose');
+        /** Всплывающий выбор открывается от нажатой кнопки добавления: у полосы и у приглашения — свой. */
+        this.popovers = viewChildren(RtPopoverDirective, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "popovers" }] : /* istanbul ignore next */ []));
+        this.rowTitle = contentChild(RtDynamicSelectorRowTitleDirective, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "rowTitle" }] : /* istanbul ignore next */ []));
+        this.rowControls = contentChild(RtDynamicSelectorRowControlsDirective, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "rowControls" }] : /* istanbul ignore next */ []));
+        this.titleTpl = computed(() => this.rowTitle()?.templateRef ?? null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "titleTpl" }] : /* istanbul ignore next */ []));
+        this.controlsTpl = computed(() => this.rowControls()?.templateRef ?? null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "controlsTpl" }] : /* istanbul ignore next */ []));
+        /** Выбранные записи в порядке значения; ключ, которого нет среди записей, строки не рисует. */
+        this.chosen = computed(() => this.#entitiesOf(this.value()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "chosen" }] : /* istanbul ignore next */ []));
+        this.rows = computed(() => {
+            const locked = this.readonlyKeys();
+            return this.chosen().map((item) => ({
+                item,
+                key: this.#keyOf(item),
+                label: dynamicSelectorLabel(item, (entity) => this.#labelOf(entity)) ?? '',
+                locked: locked.includes(this.#keyOf(item)),
+            }));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []));
+        /** Что предлагает всплывающий выбор: ещё не выбранное, в порядке вызывающего или по алфавиту. */
+        this.offered = computed(() => selectableDynamicItems(this.entities(), this.value(), (item) => this.#keyOf(item), (item) => this.#labelOf(item), '', this.sortFn()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "offered" }] : /* istanbul ignore next */ []));
+        this.hasOffer = computed(() => this.offered().length > 0 || !this.localSearch(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hasOffer" }] : /* istanbul ignore next */ []));
+        this.isNothingToChoose = computed(() => this.value().length === 0 && !this.hasOffer(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isNothingToChoose" }] : /* istanbul ignore next */ []));
+        this.isAddShown = computed(() => this.addShown() && this.hasOffer(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isAddShown" }] : /* istanbul ignore next */ []));
+        this.isKeysReset = computed(() => sameDynamicKeys(this.value(), this.#initial()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isKeysReset" }] : /* istanbul ignore next */ []));
+        this.isKeysClear = computed(() => clearDynamicKeys(this.value(), this.readonlyKeys()).length === this.value().length, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isKeysClear" }] : /* istanbul ignore next */ []));
+        /** Правки в шаблоне строки держат сброс и очистку включёнными, даже когда ключи не менялись. */
+        this.isResetDisabled = computed(() => !this.extraChanged() && this.isKeysReset(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isResetDisabled" }] : /* istanbul ignore next */ []));
+        this.isClearDisabled = computed(() => !this.extraChanged() && this.isKeysClear(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isClearDisabled" }] : /* istanbul ignore next */ []));
+        this.addTitle = computed(() => this.buttonTitle() || this.addLabel(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "addTitle" }] : /* istanbul ignore next */ []));
+        this.hasValue = computed(() => this.value().length > 0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hasValue" }] : /* istanbul ignore next */ []));
+        /** Записи, из которых выбирают; у каждой есть поле ключа и поле подписи. */
+        this.entities = input([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "entities" }] : /* istanbul ignore next */ []));
+        this.keyExp = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "keyExp" }] : /* istanbul ignore next */ []));
+        this.displayExp = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "displayExp" }] : /* istanbul ignore next */ []));
+        this.mode = input('multi', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
+        /** Название кнопки добавления; пустое — «Add» из словаря кита. */
+        this.buttonTitle = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "buttonTitle" }] : /* istanbul ignore next */ []));
+        this.addShown = input(true, { ...(ngDevMode ? { debugName: "addShown" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** Корзина строк; без неё записи убирает только очистка или сам вызывающий. */
+        this.removeShown = input(true, { ...(ngDevMode ? { debugName: "removeShown" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** Сброс и очистка под списком: `false` их убирает, кнопка добавления остаётся. */
+        this.listActionsShown = input(true, { ...(ngDevMode ? { debugName: "listActionsShown" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /**
+         * Строки правлены в шаблоне вызывающего: сброс и очистка включены и тогда, когда ключи прежние.
+         * Сброс сообщает `listReset`, очистка — `listCleared`, и вызывающий снимает свои правки.
+         */
+        this.extraChanged = input(false, { ...(ngDevMode ? { debugName: "extraChanged" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** Запрос, с которым открывается всплывающий выбор; событием поиска он не уходит. */
+        this.searchTerm = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "searchTerm" }] : /* istanbul ignore next */ []));
+        /** Ключи, которые нельзя убрать из списка. */
+        this.readonlyKeys = input([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "readonlyKeys" }] : /* istanbul ignore next */ []));
+        /** Ключи строк всплывающего выбора, под последней из которых стоит разделитель. */
+        this.pinnedKeys = input([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "pinnedKeys" }] : /* istanbul ignore next */ []));
+        this.draggable = input(false, { ...(ngDevMode ? { debugName: "draggable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** Шаг скругления кнопок-иконок списка; по умолчанию они круглые. */
+        this.buttonRadius = input('full', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "buttonRadius" }] : /* istanbul ignore next */ []));
+        /** Приглашение вместо полосы кнопок: значок, описание и кнопка добавления. */
+        this.invitation = input(false, { ...(ngDevMode ? { debugName: "invitation" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.invitationIcon = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "invitationIcon" }] : /* istanbul ignore next */ []));
+        this.invitationDescription = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "invitationDescription" }] : /* 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.navigateTitle = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "navigateTitle" }] : /* istanbul ignore next */ []));
+        this.navigateLink = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "navigateLink" }] : /* istanbul ignore next */ []));
+        this.sortFn = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "sortFn" }] : /* istanbul ignore next */ []));
+        /** Выбранные записи: те же, что уходят событием изменения выбора. */
+        this.chosenEntities = model([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "chosenEntities" }] : /* istanbul ignore next */ []));
+        this.selectionChange = output();
+        this.listReset = output();
+        this.listCleared = output();
+        /** Всплывающий выбор открылся или закрылся. */
+        this.popupOpenChange = output();
+        this.searchChange = output();
+        this.loadMore = output();
+        this.temporaryChoiceChange = output();
+        /** Открыт ли всплывающий выбор — от кнопки полосы или от кнопки приглашения. */
+        this.popupOpen = computed(() => this.popovers().some((popover) => popover.isOpen()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "popupOpen" }] : /* istanbul ignore next */ []));
+        this.displayText = computed(() => this.rows()
+            .map((row) => row.label)
+            .join(', '), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "displayText" }] : /* istanbul ignore next */ []));
+    }
+    /** Последнее значение, записанное формой: к нему возвращает сброс. */
+    #initial;
+    /** Записанное формой становится и списком, и значением для сброса; пустой массив список опустошает. */
+    writeValue(value) {
+        super.writeValue(value === null ? null : [...value]);
+        this.#initial.set([...this.value()]);
+    }
+    onAdd(popover) {
+        if (!this.isDisabled()) {
+            popover.open();
+        }
+    }
+    onApplied(keys) {
+        this.#closePopup();
+        this.#change(this.mode() === 'single'
+            ? keys.slice(0, 1)
+            : [...this.value(), ...keys.filter((key) => !this.value().includes(key))]);
+    }
+    onCancelled() {
+        this.#closePopup();
+    }
+    onRemoved(key) {
+        if (!this.isDisabled() && !this.readonlyKeys().includes(key)) {
+            this.#change(this.value().filter((item) => item !== key));
+        }
+    }
+    onMoved(move) {
+        if (!this.isDisabled()) {
+            this.#change(moveDynamicKey(this.value(), move.from, move.to));
+        }
+    }
+    onReset() {
+        if (this.isDisabled() || this.isResetDisabled()) {
+            return;
+        }
+        // Ключи прежние, а правки только в строках: значение не трогаем, сообщаем о сбросе.
+        if (!this.isKeysReset()) {
+            this.#change([...this.#initial()]);
+        }
+        this.listReset.emit();
+    }
+    onCleared() {
+        if (this.isDisabled() || this.isClearDisabled()) {
+            return;
+        }
+        if (!this.isKeysClear()) {
+            this.#change(clearDynamicKeys(this.value(), this.readonlyKeys()));
+        }
+        this.listCleared.emit();
+    }
+    onOpened() {
+        this.popupOpenChange.emit(true);
+    }
+    onClosed() {
+        this.markTouched();
+        this.popupOpenChange.emit(false);
+    }
+    #closePopup() {
+        for (const popover of this.popovers()) {
+            popover.close();
+        }
+    }
+    getEmptyValue() {
+        return [];
+    }
+    focusAfterClear() {
+        // Очистка крестиком у поля не ставится: фокус остаётся там, где был.
+    }
+    #change(keys) {
+        const entities = this.#entitiesOf(keys);
+        this.value.set(keys);
+        this.emitChange(keys);
+        this.chosenEntities.set(entities);
+        this.selectionChange.emit(entities);
+    }
+    #entitiesOf(keys) {
+        return keys
+            .map((key) => this.entities().find((item) => this.#keyOf(item) === key))
+            .filter((item) => item !== undefined);
+    }
+    /** Ключ записи — по имени поля, которое назвал вызывающий. */
+    #keyOf(item) {
+        return item[this.keyExp()];
+    }
+    /** Подпись записи — по имени поля, которое назвал вызывающий. */
+    #labelOf(item) {
+        return item[this.displayExp()];
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtDynamicSelectorComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: RtDynamicSelectorComponent, isStandalone: true, selector: "rt-dynamic-selector", 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 }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, buttonTitle: { classPropertyName: "buttonTitle", publicName: "buttonTitle", isSignal: true, isRequired: false, transformFunction: null }, addShown: { classPropertyName: "addShown", publicName: "addShown", isSignal: true, isRequired: false, transformFunction: null }, removeShown: { classPropertyName: "removeShown", publicName: "removeShown", isSignal: true, isRequired: false, transformFunction: null }, listActionsShown: { classPropertyName: "listActionsShown", publicName: "listActionsShown", isSignal: true, isRequired: false, transformFunction: null }, extraChanged: { classPropertyName: "extraChanged", publicName: "extraChanged", isSignal: true, isRequired: false, transformFunction: null }, searchTerm: { classPropertyName: "searchTerm", publicName: "searchTerm", isSignal: true, isRequired: false, transformFunction: null }, readonlyKeys: { classPropertyName: "readonlyKeys", publicName: "readonlyKeys", isSignal: true, isRequired: false, transformFunction: null }, pinnedKeys: { classPropertyName: "pinnedKeys", publicName: "pinnedKeys", isSignal: true, isRequired: false, transformFunction: null }, draggable: { classPropertyName: "draggable", publicName: "draggable", isSignal: true, isRequired: false, transformFunction: null }, buttonRadius: { classPropertyName: "buttonRadius", publicName: "buttonRadius", isSignal: true, isRequired: false, transformFunction: null }, invitation: { classPropertyName: "invitation", publicName: "invitation", isSignal: true, isRequired: false, transformFunction: null }, invitationIcon: { classPropertyName: "invitationIcon", publicName: "invitationIcon", isSignal: true, isRequired: false, transformFunction: null }, invitationDescription: { classPropertyName: "invitationDescription", publicName: "invitationDescription", 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 }, navigateTitle: { classPropertyName: "navigateTitle", publicName: "navigateTitle", isSignal: true, isRequired: false, transformFunction: null }, navigateLink: { classPropertyName: "navigateLink", publicName: "navigateLink", isSignal: true, isRequired: false, transformFunction: null }, sortFn: { classPropertyName: "sortFn", publicName: "sortFn", isSignal: true, isRequired: false, transformFunction: null }, chosenEntities: { classPropertyName: "chosenEntities", publicName: "chosenEntities", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { chosenEntities: "chosenEntitiesChange", selectionChange: "selectionChange", listReset: "listReset", listCleared: "listCleared", popupOpenChange: "popupOpenChange", searchChange: "searchChange", loadMore: "loadMore", temporaryChoiceChange: "temporaryChoiceChange" }, host: { classAttribute: "rt-dynamic-selector" }, providers: [
+            // Алиас базового токена — для contentChild(RtFormControlBase) в rt-field.
+            { provide: RtFormControlBase, useExisting: forwardRef(() => RtDynamicSelectorComponent) },
+        ], queries: [{ propertyName: "rowTitle", first: true, predicate: RtDynamicSelectorRowTitleDirective, descendants: true, isSignal: true }, { propertyName: "rowControls", first: true, predicate: RtDynamicSelectorRowControlsDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "popovers", predicate: RtPopoverDirective, descendants: true, isSignal: true }], 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            <rt-dynamic-selector-list\n                [rows]=\"rows()\"\n                [draggable]=\"draggable()\"\n                [buttonRadius]=\"buttonRadius()\"\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            @if (invitation()) {\n                <rt-empty-state\n                    rtElem=\"invitation\"\n                    qa-dataid=\"dynamic-selector-invitation\"\n                    [icon]=\"invitationIcon()\"\n                    [description]=\"invitationDescription()\">\n                    @if (hasOffer()) {\n                        <button\n                            rtButton\n                            appearance=\"outlined\"\n                            type=\"button\"\n                            qa-dataid=\"dynamic-selector-invitation-add\"\n                            rtPopoverTrigger=\"manual\"\n                            #invitationPopover=\"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(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            [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            (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", 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{display:block}}\n"], dependencies: [{ kind: "directive", type: 
+                // standalone components / directives
+                BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }, { kind: "directive", type: RtButtonDirective, selector: "button[rtButton], a[rtButton]", inputs: ["label", "icon", "iconPos", "theme", "appearance", "size", "loading", "loadingIcon", "loadingLabel", "pressed"] }, { kind: "component", type: RtDynamicSelectorListComponent, selector: "rt-dynamic-selector-list", inputs: ["rows", "draggable", "editable", "disabled", "actionsShown", "resetClearShown", "removeShown", "resetDisabled", "clearDisabled", "buttonRadius", "titleTpl", "controlsTpl"], outputs: ["removed", "moved", "edited", "resetClicked", "cleared"] }, { kind: "component", type: RtDynamicSelectorPopupComponent, selector: "rt-dynamic-selector-popup", inputs: ["entities", "keyExp", "displayExp", "mode", "multiToggleShown", "selectAllShown", "localSearch", "lazyLoad", "loading", "fetching", "pinnedKeys", "navigateTitle", "navigateLink", "searchTerm"], outputs: ["applied", "cancelled", "searchChange", "loadMore", "temporaryChoiceChange"] }, { kind: "component", type: RtEmptyStateComponent, selector: "rt-empty-state", inputs: ["icon", "glyph", "title", "description", "framed"] }, { kind: "directive", type: RtPopoverDirective, selector: "[rtPopover]", inputs: ["rtPopover", "rtPopoverTrigger", "rtPopoverWidth", "rtPopoverAlign", "rtPopoverFitViewport", "rtPopoverContext", "rtPopoverPanelClass", "rtPopoverDisabled", "rtPopoverOffsetY", "rtPopoverOffsetX"], outputs: ["rtPopoverOpened", "rtPopoverClosed"], exportAs: ["rtPopover"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtDynamicSelectorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rt-dynamic-selector', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [
+                        // standalone components / directives
+                        BlockDirective,
+                        ElemDirective,
+                        RtButtonDirective,
+                        RtDynamicSelectorListComponent,
+                        RtDynamicSelectorPopupComponent,
+                        RtEmptyStateComponent,
+                        RtPopoverDirective,
+                    ], providers: [
+                        // Алиас базового токена — для contentChild(RtFormControlBase) в rt-field.
+                        { provide: RtFormControlBase, useExisting: forwardRef(() => RtDynamicSelectorComponent) },
+                    ], 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            <rt-dynamic-selector-list\n                [rows]=\"rows()\"\n                [draggable]=\"draggable()\"\n                [buttonRadius]=\"buttonRadius()\"\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            @if (invitation()) {\n                <rt-empty-state\n                    rtElem=\"invitation\"\n                    qa-dataid=\"dynamic-selector-invitation\"\n                    [icon]=\"invitationIcon()\"\n                    [description]=\"invitationDescription()\">\n                    @if (hasOffer()) {\n                        <button\n                            rtButton\n                            appearance=\"outlined\"\n                            type=\"button\"\n                            qa-dataid=\"dynamic-selector-invitation-add\"\n                            rtPopoverTrigger=\"manual\"\n                            #invitationPopover=\"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(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            [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            (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", 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{display:block}}\n"] }]
+        }], propDecorators: { popovers: [{ type: i0.ViewChildren, args: [i0.forwardRef(() => RtPopoverDirective), { isSignal: true }] }], rowTitle: [{ type: i0.ContentChild, args: [i0.forwardRef(() => RtDynamicSelectorRowTitleDirective), { isSignal: true }] }], rowControls: [{ type: i0.ContentChild, args: [i0.forwardRef(() => RtDynamicSelectorRowControlsDirective), { 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 }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], buttonTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonTitle", required: false }] }], addShown: [{ type: i0.Input, args: [{ isSignal: true, alias: "addShown", required: false }] }], removeShown: [{ type: i0.Input, args: [{ isSignal: true, alias: "removeShown", required: false }] }], listActionsShown: [{ type: i0.Input, args: [{ isSignal: true, alias: "listActionsShown", required: false }] }], extraChanged: [{ type: i0.Input, args: [{ isSignal: true, alias: "extraChanged", required: false }] }], searchTerm: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchTerm", required: false }] }], readonlyKeys: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonlyKeys", required: false }] }], pinnedKeys: [{ type: i0.Input, args: [{ isSignal: true, alias: "pinnedKeys", required: false }] }], draggable: [{ type: i0.Input, args: [{ isSignal: true, alias: "draggable", required: false }] }], buttonRadius: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonRadius", required: false }] }], invitation: [{ type: i0.Input, args: [{ isSignal: true, alias: "invitation", required: false }] }], invitationIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "invitationIcon", required: false }] }], invitationDescription: [{ type: i0.Input, args: [{ isSignal: true, alias: "invitationDescription", 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 }] }], navigateTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "navigateTitle", required: false }] }], navigateLink: [{ type: i0.Input, args: [{ isSignal: true, alias: "navigateLink", required: false }] }], sortFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortFn", required: false }] }], chosenEntities: [{ type: i0.Input, args: [{ isSignal: true, alias: "chosenEntities", required: false }] }, { type: i0.Output, args: ["chosenEntitiesChange"] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], listReset: [{ type: i0.Output, args: ["listReset"] }], listCleared: [{ type: i0.Output, args: ["listCleared"] }], popupOpenChange: [{ type: i0.Output, args: ["popupOpenChange"] }], searchChange: [{ type: i0.Output, args: ["searchChange"] }], loadMore: [{ type: i0.Output, args: ["loadMore"] }], temporaryChoiceChange: [{ type: i0.Output, args: ["temporaryChoiceChange"] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { RT_DYNAMIC_SELECTOR_SEARCH_DEBOUNCE, RtDynamicInputComponent, RtDynamicSelectorComponent, RtDynamicSelectorListComponent, RtDynamicSelectorPopupComponent, RtDynamicSelectorRowControlsDirective, RtDynamicSelectorRowTitleDirective };
+//# sourceMappingURL=rt-tools-ui-kit-v2-dynamic-selector.mjs.map