@rt-tools/ui-kit 0.0.13 → 0.0.15

package/fesm2022/rt-tools-ui-kit.mjs

@@ -12,8 +12,8 @@ import * as i3 from '@angular/material/input';
 import { MatInputModule, MatInput, MatFormField as MatFormField$1, MatLabel } from '@angular/material/input';
 import * as i4 from '@angular/material/select';
 import { MatSelectModule, MatSelect } from '@angular/material/select';
-import { BlockDirective, ElemDirective, IDBStorageService, ModDirective } from '@rt-tools/core';
-import { checkIsMatchingValues, SanitizePipe, RtIconOutlinedDirective, RtHideTooltipDirective, transformArrayInput, RtScrollToElementDirective, RtNavigationDirective, isString, WINDOW, isNumber, areArraysEqual, EmptyToDashPipe, LIST_SORT_ORDER_ENUM, FILTER_OPERATOR_TYPE_ENUM, FILTER_OPERATORS, isDate, PlatformService, transformStringInput, BreakpointService, DeviceDetectorService, OSTypes, RtScrollDirective, BreakStringPipe, EntityToStringPipe, OVERLAY_POSITIONS, areArraysEqualUnordered, checkIsEntityInArrayByKey, sortByAlphabet, RtEscapeKeyDirective, POSITION_ENUM } from '@rt-tools/utils';
+import { BlockDirective, ElemDirective, WINDOW, IDBStorageService, ModDirective, PlatformService } from '@rt-tools/core';
+import { checkIsMatchingValues, SanitizePipe, RtIconOutlinedDirective, RtHideTooltipDirective, transformArrayInput, RtScrollToElementDirective, RtNavigationDirective, isString, isNumber, areArraysEqual, EmptyToDashPipe, LIST_SORT_ORDER_ENUM, FILTER_OPERATOR_TYPE_ENUM, FILTER_OPERATORS, isDate, transformStringInput, BreakpointService, DeviceDetectorService, OSTypes, RtScrollDirective, BreakStringPipe, EntityToStringPipe, OVERLAY_POSITIONS, areArraysEqualUnordered, checkIsEntityInArrayByKey, sortByAlphabet, RtEscapeKeyDirective, POSITION_ENUM } from '@rt-tools/utils';
 import { ReplaySubject, share, Subject, merge, of, noop } from 'rxjs';
 import { filter, map, delay, tap, take, switchMap, debounceTime, distinctUntilChanged } from 'rxjs/operators';
 import { MatListItem, MatNavList, MatListItemIcon, MatListItemTitle } from '@angular/material/list';
@@ -2676,6 +2676,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
                     selector: '[rtuiDynamicSelectorItemAdditionalControlDirective]',
                 }]
         }] });
+/** Directive for custom item title template */
+class RtuiDynamicSelectorItemTitleDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtuiDynamicSelectorItemTitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.1", type: RtuiDynamicSelectorItemTitleDirective, isStandalone: true, selector: "[rtuiDynamicSelectorItemTitleDirective]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtuiDynamicSelectorItemTitleDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rtuiDynamicSelectorItemTitleDirective]',
+                }]
+        }] });
 class RtuiDynamicSelectorSelectedListComponent {
     constructor() {
         this.editedItemIndex = signal(null, { ...(ngDevMode ? { debugName: "editedItemIndex" } : {}) });
@@ -2707,6 +2718,8 @@ class RtuiDynamicSelectorSelectedListComponent {
         this.changeValueAction = output();
         /** Additional control for entity */
         this.additionalControlTpl = contentChild(RtuiDynamicSelectorItemAdditionalControlDirective, { ...(ngDevMode ? { debugName: "additionalControlTpl" } : {}), read: TemplateRef });
+        /** Custom item title template */
+        this.itemTitleTpl = contentChild(RtuiDynamicSelectorItemTitleDirective, { ...(ngDevMode ? { debugName: "itemTitleTpl" } : {}), read: TemplateRef });
     }
     onDelete(value) {
         this.deleteFromSelectedAction.emit(value);
@@ -2724,7 +2737,7 @@ class RtuiDynamicSelectorSelectedListComponent {
         this.editedItemIndex.set(index);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtuiDynamicSelectorSelectedListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: RtuiDynamicSelectorSelectedListComponent, isStandalone: true, selector: "rtui-dynamic-selector-selected-list", inputs: { isMobile: { classPropertyName: "isMobile", publicName: "isMobile", isSignal: true, isRequired: true, transformFunction: null }, keyExp: { classPropertyName: "keyExp", publicName: "keyExp", isSignal: true, isRequired: true, transformFunction: null }, displayExp: { classPropertyName: "displayExp", publicName: "displayExp", isSignal: true, isRequired: true, transformFunction: null }, selectedEntities: { classPropertyName: "selectedEntities", publicName: "selectedEntities", isSignal: true, isRequired: true, transformFunction: null }, readonlyEntitiesKeys: { classPropertyName: "readonlyEntitiesKeys", publicName: "readonlyEntitiesKeys", isSignal: true, isRequired: false, transformFunction: null }, isListDraggable: { classPropertyName: "isListDraggable", publicName: "isListDraggable", isSignal: true, isRequired: false, transformFunction: null }, useNameBreaking: { classPropertyName: "useNameBreaking", publicName: "useNameBreaking", isSignal: true, isRequired: false, transformFunction: null }, useTitleCase: { classPropertyName: "useTitleCase", publicName: "useTitleCase", isSignal: true, isRequired: false, transformFunction: null }, isDeleteButtonShown: { classPropertyName: "isDeleteButtonShown", publicName: "isDeleteButtonShown", isSignal: true, isRequired: false, transformFunction: null }, isItemsEditable: { classPropertyName: "isItemsEditable", publicName: "isItemsEditable", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { deleteFromSelectedAction: "deleteFromSelectedAction", dropAction: "dropAction", changeValueAction: "changeValueAction" }, queries: [{ propertyName: "additionalControlTpl", first: true, predicate: RtuiDynamicSelectorItemAdditionalControlDirective, descendants: true, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "inputRef", first: true, predicate: MatInput, descendants: true, isSignal: true }], ngImport: i0, template: "<ng-container rtBlock=\"rtui-dynamic-selector\">\n    <div rtElem=\"list\" cdkDropList (cdkDropListDropped)=\"onDrop($event)\">\n        @for (entity of selectedEntities(); track entity[displayExp()]; let i = $index) {\n            <div cdkDrag rtElem=\"item\" [rtMod]=\"{ draggable: isListDraggable() }\" [cdkDragDisabled]=\"!isListDraggable()\">\n                @if (isListDraggable()) {\n                    <div rtElem=\"item-mover\">\n                        <div rtElem=\"item-control\">\n                            <button\n                                cdkDragHandle\n                                mat-icon-button\n                                type=\"button\"\n                                rtElem=\"item-control-button\"\n                                rtMod=\"draggable\"\n                                matTooltip=\"Hold button to drag\"\n                                matTooltipPosition=\"right\"\n                                [matTooltipDisabled]=\"isMobile()\">\n                                <mat-icon [rtIconOutlined]=\"true\">open_with</mat-icon>\n                            </button>\n                        </div>\n                    </div>\n                }\n\n                @if (editedItemIndex() === i) {\n                    <mat-form-field rtElem=\"item-input\" subscriptSizing=\"dynamic\" [appearance]=\"appearance()\">\n                        <input matInput type=\"text\" [value]=\"entity[displayExp()]\" (keydown.enter)=\"changeValue(entity[displayExp()])\" />\n                    </mat-form-field>\n                } @else {\n                    <span\n                        #titleTpl\n                        rtElem=\"item-title\"\n                        matTooltipPosition=\"above\"\n                        [rtHideTooltipDirective]=\"titleTpl\"\n                        [isTooltipShown]=\"!isMobile()\"\n                        [matTooltip]=\"\n                            useNameBreaking()\n                                ? (entity[displayExp()] | entityToString | breakString)\n                                : (entity[displayExp()] | entityToString)\n                        \"\n                        [matTooltipDisabled]=\"isMobile()\">\n                        @if (useNameBreaking()) {\n                            {{\n                                useTitleCase()\n                                    ? (entity[displayExp()] | entityToString | breakString | titlecase)\n                                    : (entity[displayExp()] | entityToString | breakString)\n                            }}\n                        } @else {\n                            {{ useTitleCase() ? (entity[displayExp()] | entityToString | titlecase) : entity[displayExp()] }}\n                        }\n                    </span>\n                }\n\n                <div rtElem=\"item-controls\">\n                    @if (additionalControlTpl()) {\n                        <ng-container *ngTemplateOutlet=\"additionalControlTpl() || null; context: { $implicit: entity }\" />\n                    }\n\n                    @if (isItemsEditable()) {\n                        @if (editedItemIndex() === i) {\n                            <div rtElem=\"item-control\">\n                                <button\n                                    mat-icon-button\n                                    type=\"button\"\n                                    rtElem=\"item-control-button\"\n                                    matTooltipPosition=\"left\"\n                                    matTooltip=\"Reset\"\n                                    [matTooltipDisabled]=\"isMobile()\"\n                                    (click)=\"setEditModState(null)\">\n                                    <mat-icon [rtIconOutlined]=\"true\">refresh</mat-icon>\n                                </button>\n                            </div>\n                        }\n\n                        <div rtElem=\"item-control\">\n                            <button\n                                mat-icon-button\n                                type=\"button\"\n                                rtElem=\"item-control-button\"\n                                matTooltipPosition=\"right\"\n                                [matTooltip]=\"editedItemIndex() === i ? 'Apply' : 'Edit item'\"\n                                [matTooltipDisabled]=\"isMobile()\"\n                                (click)=\"editedItemIndex() === i ? changeValue(entity[displayExp()]) : setEditModState(i)\">\n                                <mat-icon [rtIconOutlined]=\"true\">{{ editedItemIndex() === i ? 'done' : 'edit' }}</mat-icon>\n                            </button>\n                        </div>\n                    }\n\n                    @if (isDeleteButtonShown()) {\n                        <div rtElem=\"item-control\">\n                            <button\n                                mat-icon-button\n                                type=\"button\"\n                                rtElem=\"item-control-button\"\n                                matTooltip=\"Remove the Item from the List\"\n                                matTooltipPosition=\"left\"\n                                [rtMod]=\"{ active: !readonlyEntitiesKeys().includes(entity[keyExp()]) }\"\n                                [matTooltipDisabled]=\"isMobile()\"\n                                [disabled]=\"readonlyEntitiesKeys().includes(entity[keyExp()])\"\n                                (click)=\"onDelete(entity[keyExp()])\">\n                                <mat-icon [rtIconOutlined]=\"true\">delete</mat-icon>\n                            </button>\n                        </div>\n                    }\n                </div>\n            </div>\n        }\n    </div>\n</ng-container>\n", styles: [":host::ng-deep .mat-mdc-form-field-flex{height:100%}:host::ng-deep .mat-mdc-form-field-infix{display:flex;height:100%;min-height:100%;align-items:center;padding:0}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.rtui-dynamic-selector__list.cdk-drop-list-dragging .rtui-dynamic-selector__item:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.cdk-drag-preview{border:none;box-sizing:border-box;border-radius:var(--rt-dynamic-selector-item-border-radius);box-shadow:var(--rt-dynamic-selector-item-drag-preview-box-shadow);background:var(--mat-option-selected-state-layer-color)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: 
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: RtuiDynamicSelectorSelectedListComponent, isStandalone: true, selector: "rtui-dynamic-selector-selected-list", inputs: { isMobile: { classPropertyName: "isMobile", publicName: "isMobile", isSignal: true, isRequired: true, transformFunction: null }, keyExp: { classPropertyName: "keyExp", publicName: "keyExp", isSignal: true, isRequired: true, transformFunction: null }, displayExp: { classPropertyName: "displayExp", publicName: "displayExp", isSignal: true, isRequired: true, transformFunction: null }, selectedEntities: { classPropertyName: "selectedEntities", publicName: "selectedEntities", isSignal: true, isRequired: true, transformFunction: null }, readonlyEntitiesKeys: { classPropertyName: "readonlyEntitiesKeys", publicName: "readonlyEntitiesKeys", isSignal: true, isRequired: false, transformFunction: null }, isListDraggable: { classPropertyName: "isListDraggable", publicName: "isListDraggable", isSignal: true, isRequired: false, transformFunction: null }, useNameBreaking: { classPropertyName: "useNameBreaking", publicName: "useNameBreaking", isSignal: true, isRequired: false, transformFunction: null }, useTitleCase: { classPropertyName: "useTitleCase", publicName: "useTitleCase", isSignal: true, isRequired: false, transformFunction: null }, isDeleteButtonShown: { classPropertyName: "isDeleteButtonShown", publicName: "isDeleteButtonShown", isSignal: true, isRequired: false, transformFunction: null }, isItemsEditable: { classPropertyName: "isItemsEditable", publicName: "isItemsEditable", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { deleteFromSelectedAction: "deleteFromSelectedAction", dropAction: "dropAction", changeValueAction: "changeValueAction" }, queries: [{ propertyName: "additionalControlTpl", first: true, predicate: RtuiDynamicSelectorItemAdditionalControlDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "itemTitleTpl", first: true, predicate: RtuiDynamicSelectorItemTitleDirective, descendants: true, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "inputRef", first: true, predicate: MatInput, descendants: true, isSignal: true }], ngImport: i0, template: "<ng-container rtBlock=\"rtui-dynamic-selector\">\n    <div rtElem=\"list\" cdkDropList (cdkDropListDropped)=\"onDrop($event)\">\n        @for (entity of selectedEntities(); track entity[displayExp()]; let i = $index) {\n            <div cdkDrag rtElem=\"item\" [rtMod]=\"{ draggable: isListDraggable() }\" [cdkDragDisabled]=\"!isListDraggable()\">\n                @if (isListDraggable()) {\n                    <div rtElem=\"item-mover\">\n                        <div rtElem=\"item-control\">\n                            <button\n                                cdkDragHandle\n                                mat-icon-button\n                                type=\"button\"\n                                rtElem=\"item-control-button\"\n                                rtMod=\"draggable\"\n                                matTooltip=\"Hold button to drag\"\n                                matTooltipPosition=\"right\"\n                                [matTooltipDisabled]=\"isMobile()\">\n                                <mat-icon [rtIconOutlined]=\"true\">open_with</mat-icon>\n                            </button>\n                        </div>\n                    </div>\n                }\n\n                @if (editedItemIndex() === i) {\n                    <mat-form-field rtElem=\"item-input\" subscriptSizing=\"dynamic\" [appearance]=\"appearance()\">\n                        <input matInput type=\"text\" [value]=\"entity[displayExp()]\" (keydown.enter)=\"changeValue(entity[displayExp()])\" />\n                    </mat-form-field>\n                } @else if (itemTitleTpl()) {\n                    <ng-container *ngTemplateOutlet=\"itemTitleTpl() || null; context: { $implicit: entity }\" />\n                } @else {\n                    <span\n                        #titleTpl\n                        rtElem=\"item-title\"\n                        matTooltipPosition=\"above\"\n                        [rtHideTooltipDirective]=\"titleTpl\"\n                        [isTooltipShown]=\"!isMobile()\"\n                        [matTooltip]=\"\n                            useNameBreaking()\n                                ? (entity[displayExp()] | entityToString | breakString)\n                                : (entity[displayExp()] | entityToString)\n                        \"\n                        [matTooltipDisabled]=\"isMobile()\">\n                        @if (useNameBreaking()) {\n                            {{\n                                useTitleCase()\n                                    ? (entity[displayExp()] | entityToString | breakString | titlecase)\n                                    : (entity[displayExp()] | entityToString | breakString)\n                            }}\n                        } @else {\n                            {{ useTitleCase() ? (entity[displayExp()] | entityToString | titlecase) : entity[displayExp()] }}\n                        }\n                    </span>\n                }\n\n                <div rtElem=\"item-controls\">\n                    @if (additionalControlTpl()) {\n                        <ng-container *ngTemplateOutlet=\"additionalControlTpl() || null; context: { $implicit: entity }\" />\n                    }\n\n                    @if (isItemsEditable()) {\n                        @if (editedItemIndex() === i) {\n                            <div rtElem=\"item-control\">\n                                <button\n                                    mat-icon-button\n                                    type=\"button\"\n                                    rtElem=\"item-control-button\"\n                                    matTooltipPosition=\"left\"\n                                    matTooltip=\"Reset\"\n                                    [matTooltipDisabled]=\"isMobile()\"\n                                    (click)=\"setEditModState(null)\">\n                                    <mat-icon [rtIconOutlined]=\"true\">refresh</mat-icon>\n                                </button>\n                            </div>\n                        }\n\n                        <div rtElem=\"item-control\">\n                            <button\n                                mat-icon-button\n                                type=\"button\"\n                                rtElem=\"item-control-button\"\n                                matTooltipPosition=\"right\"\n                                [matTooltip]=\"editedItemIndex() === i ? 'Apply' : 'Edit item'\"\n                                [matTooltipDisabled]=\"isMobile()\"\n                                (click)=\"editedItemIndex() === i ? changeValue(entity[displayExp()]) : setEditModState(i)\">\n                                <mat-icon [rtIconOutlined]=\"true\">{{ editedItemIndex() === i ? 'done' : 'edit' }}</mat-icon>\n                            </button>\n                        </div>\n                    }\n\n                    @if (isDeleteButtonShown()) {\n                        <div rtElem=\"item-control\">\n                            <button\n                                mat-icon-button\n                                type=\"button\"\n                                rtElem=\"item-control-button\"\n                                matTooltip=\"Remove the Item from the List\"\n                                matTooltipPosition=\"left\"\n                                [rtMod]=\"{ active: !readonlyEntitiesKeys().includes(entity[keyExp()]) }\"\n                                [matTooltipDisabled]=\"isMobile()\"\n                                [disabled]=\"readonlyEntitiesKeys().includes(entity[keyExp()])\"\n                                (click)=\"onDelete(entity[keyExp()])\">\n                                <mat-icon [rtIconOutlined]=\"true\">delete</mat-icon>\n                            </button>\n                        </div>\n                    }\n                </div>\n            </div>\n        }\n    </div>\n</ng-container>\n", styles: [":host::ng-deep .mat-mdc-form-field-flex{height:100%}:host::ng-deep .mat-mdc-form-field-infix{display:flex;height:100%;min-height:100%;align-items:center;padding:0}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.rtui-dynamic-selector__list.cdk-drop-list-dragging .rtui-dynamic-selector__item:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.cdk-drag-preview{border:none;box-sizing:border-box;border-radius:var(--rt-dynamic-selector-item-border-radius);box-shadow:var(--rt-dynamic-selector-item-drag-preview-box-shadow);background:var(--mat-option-selected-state-layer-color)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: 
                 // material
                 MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: MatFormField$1, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: 
                 // drag and drop
@@ -2759,9 +2772,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
                         EntityToStringPipe,
                         BreakStringPipe,
                         TitleCasePipe,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container rtBlock=\"rtui-dynamic-selector\">\n    <div rtElem=\"list\" cdkDropList (cdkDropListDropped)=\"onDrop($event)\">\n        @for (entity of selectedEntities(); track entity[displayExp()]; let i = $index) {\n            <div cdkDrag rtElem=\"item\" [rtMod]=\"{ draggable: isListDraggable() }\" [cdkDragDisabled]=\"!isListDraggable()\">\n                @if (isListDraggable()) {\n                    <div rtElem=\"item-mover\">\n                        <div rtElem=\"item-control\">\n                            <button\n                                cdkDragHandle\n                                mat-icon-button\n                                type=\"button\"\n                                rtElem=\"item-control-button\"\n                                rtMod=\"draggable\"\n                                matTooltip=\"Hold button to drag\"\n                                matTooltipPosition=\"right\"\n                                [matTooltipDisabled]=\"isMobile()\">\n                                <mat-icon [rtIconOutlined]=\"true\">open_with</mat-icon>\n                            </button>\n                        </div>\n                    </div>\n                }\n\n                @if (editedItemIndex() === i) {\n                    <mat-form-field rtElem=\"item-input\" subscriptSizing=\"dynamic\" [appearance]=\"appearance()\">\n                        <input matInput type=\"text\" [value]=\"entity[displayExp()]\" (keydown.enter)=\"changeValue(entity[displayExp()])\" />\n                    </mat-form-field>\n                } @else {\n                    <span\n                        #titleTpl\n                        rtElem=\"item-title\"\n                        matTooltipPosition=\"above\"\n                        [rtHideTooltipDirective]=\"titleTpl\"\n                        [isTooltipShown]=\"!isMobile()\"\n                        [matTooltip]=\"\n                            useNameBreaking()\n                                ? (entity[displayExp()] | entityToString | breakString)\n                                : (entity[displayExp()] | entityToString)\n                        \"\n                        [matTooltipDisabled]=\"isMobile()\">\n                        @if (useNameBreaking()) {\n                            {{\n                                useTitleCase()\n                                    ? (entity[displayExp()] | entityToString | breakString | titlecase)\n                                    : (entity[displayExp()] | entityToString | breakString)\n                            }}\n                        } @else {\n                            {{ useTitleCase() ? (entity[displayExp()] | entityToString | titlecase) : entity[displayExp()] }}\n                        }\n                    </span>\n                }\n\n                <div rtElem=\"item-controls\">\n                    @if (additionalControlTpl()) {\n                        <ng-container *ngTemplateOutlet=\"additionalControlTpl() || null; context: { $implicit: entity }\" />\n                    }\n\n                    @if (isItemsEditable()) {\n                        @if (editedItemIndex() === i) {\n                            <div rtElem=\"item-control\">\n                                <button\n                                    mat-icon-button\n                                    type=\"button\"\n                                    rtElem=\"item-control-button\"\n                                    matTooltipPosition=\"left\"\n                                    matTooltip=\"Reset\"\n                                    [matTooltipDisabled]=\"isMobile()\"\n                                    (click)=\"setEditModState(null)\">\n                                    <mat-icon [rtIconOutlined]=\"true\">refresh</mat-icon>\n                                </button>\n                            </div>\n                        }\n\n                        <div rtElem=\"item-control\">\n                            <button\n                                mat-icon-button\n                                type=\"button\"\n                                rtElem=\"item-control-button\"\n                                matTooltipPosition=\"right\"\n                                [matTooltip]=\"editedItemIndex() === i ? 'Apply' : 'Edit item'\"\n                                [matTooltipDisabled]=\"isMobile()\"\n                                (click)=\"editedItemIndex() === i ? changeValue(entity[displayExp()]) : setEditModState(i)\">\n                                <mat-icon [rtIconOutlined]=\"true\">{{ editedItemIndex() === i ? 'done' : 'edit' }}</mat-icon>\n                            </button>\n                        </div>\n                    }\n\n                    @if (isDeleteButtonShown()) {\n                        <div rtElem=\"item-control\">\n                            <button\n                                mat-icon-button\n                                type=\"button\"\n                                rtElem=\"item-control-button\"\n                                matTooltip=\"Remove the Item from the List\"\n                                matTooltipPosition=\"left\"\n                                [rtMod]=\"{ active: !readonlyEntitiesKeys().includes(entity[keyExp()]) }\"\n                                [matTooltipDisabled]=\"isMobile()\"\n                                [disabled]=\"readonlyEntitiesKeys().includes(entity[keyExp()])\"\n                                (click)=\"onDelete(entity[keyExp()])\">\n                                <mat-icon [rtIconOutlined]=\"true\">delete</mat-icon>\n                            </button>\n                        </div>\n                    }\n                </div>\n            </div>\n        }\n    </div>\n</ng-container>\n", styles: [":host::ng-deep .mat-mdc-form-field-flex{height:100%}:host::ng-deep .mat-mdc-form-field-infix{display:flex;height:100%;min-height:100%;align-items:center;padding:0}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.rtui-dynamic-selector__list.cdk-drop-list-dragging .rtui-dynamic-selector__item:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.cdk-drag-preview{border:none;box-sizing:border-box;border-radius:var(--rt-dynamic-selector-item-border-radius);box-shadow:var(--rt-dynamic-selector-item-drag-preview-box-shadow);background:var(--mat-option-selected-state-layer-color)}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container rtBlock=\"rtui-dynamic-selector\">\n    <div rtElem=\"list\" cdkDropList (cdkDropListDropped)=\"onDrop($event)\">\n        @for (entity of selectedEntities(); track entity[displayExp()]; let i = $index) {\n            <div cdkDrag rtElem=\"item\" [rtMod]=\"{ draggable: isListDraggable() }\" [cdkDragDisabled]=\"!isListDraggable()\">\n                @if (isListDraggable()) {\n                    <div rtElem=\"item-mover\">\n                        <div rtElem=\"item-control\">\n                            <button\n                                cdkDragHandle\n                                mat-icon-button\n                                type=\"button\"\n                                rtElem=\"item-control-button\"\n                                rtMod=\"draggable\"\n                                matTooltip=\"Hold button to drag\"\n                                matTooltipPosition=\"right\"\n                                [matTooltipDisabled]=\"isMobile()\">\n                                <mat-icon [rtIconOutlined]=\"true\">open_with</mat-icon>\n                            </button>\n                        </div>\n                    </div>\n                }\n\n                @if (editedItemIndex() === i) {\n                    <mat-form-field rtElem=\"item-input\" subscriptSizing=\"dynamic\" [appearance]=\"appearance()\">\n                        <input matInput type=\"text\" [value]=\"entity[displayExp()]\" (keydown.enter)=\"changeValue(entity[displayExp()])\" />\n                    </mat-form-field>\n                } @else if (itemTitleTpl()) {\n                    <ng-container *ngTemplateOutlet=\"itemTitleTpl() || null; context: { $implicit: entity }\" />\n                } @else {\n                    <span\n                        #titleTpl\n                        rtElem=\"item-title\"\n                        matTooltipPosition=\"above\"\n                        [rtHideTooltipDirective]=\"titleTpl\"\n                        [isTooltipShown]=\"!isMobile()\"\n                        [matTooltip]=\"\n                            useNameBreaking()\n                                ? (entity[displayExp()] | entityToString | breakString)\n                                : (entity[displayExp()] | entityToString)\n                        \"\n                        [matTooltipDisabled]=\"isMobile()\">\n                        @if (useNameBreaking()) {\n                            {{\n                                useTitleCase()\n                                    ? (entity[displayExp()] | entityToString | breakString | titlecase)\n                                    : (entity[displayExp()] | entityToString | breakString)\n                            }}\n                        } @else {\n                            {{ useTitleCase() ? (entity[displayExp()] | entityToString | titlecase) : entity[displayExp()] }}\n                        }\n                    </span>\n                }\n\n                <div rtElem=\"item-controls\">\n                    @if (additionalControlTpl()) {\n                        <ng-container *ngTemplateOutlet=\"additionalControlTpl() || null; context: { $implicit: entity }\" />\n                    }\n\n                    @if (isItemsEditable()) {\n                        @if (editedItemIndex() === i) {\n                            <div rtElem=\"item-control\">\n                                <button\n                                    mat-icon-button\n                                    type=\"button\"\n                                    rtElem=\"item-control-button\"\n                                    matTooltipPosition=\"left\"\n                                    matTooltip=\"Reset\"\n                                    [matTooltipDisabled]=\"isMobile()\"\n                                    (click)=\"setEditModState(null)\">\n                                    <mat-icon [rtIconOutlined]=\"true\">refresh</mat-icon>\n                                </button>\n                            </div>\n                        }\n\n                        <div rtElem=\"item-control\">\n                            <button\n                                mat-icon-button\n                                type=\"button\"\n                                rtElem=\"item-control-button\"\n                                matTooltipPosition=\"right\"\n                                [matTooltip]=\"editedItemIndex() === i ? 'Apply' : 'Edit item'\"\n                                [matTooltipDisabled]=\"isMobile()\"\n                                (click)=\"editedItemIndex() === i ? changeValue(entity[displayExp()]) : setEditModState(i)\">\n                                <mat-icon [rtIconOutlined]=\"true\">{{ editedItemIndex() === i ? 'done' : 'edit' }}</mat-icon>\n                            </button>\n                        </div>\n                    }\n\n                    @if (isDeleteButtonShown()) {\n                        <div rtElem=\"item-control\">\n                            <button\n                                mat-icon-button\n                                type=\"button\"\n                                rtElem=\"item-control-button\"\n                                matTooltip=\"Remove the Item from the List\"\n                                matTooltipPosition=\"left\"\n                                [rtMod]=\"{ active: !readonlyEntitiesKeys().includes(entity[keyExp()]) }\"\n                                [matTooltipDisabled]=\"isMobile()\"\n                                [disabled]=\"readonlyEntitiesKeys().includes(entity[keyExp()])\"\n                                (click)=\"onDelete(entity[keyExp()])\">\n                                <mat-icon [rtIconOutlined]=\"true\">delete</mat-icon>\n                            </button>\n                        </div>\n                    }\n                </div>\n            </div>\n        }\n    </div>\n</ng-container>\n", styles: [":host::ng-deep .mat-mdc-form-field-flex{height:100%}:host::ng-deep .mat-mdc-form-field-infix{display:flex;height:100%;min-height:100%;align-items:center;padding:0}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.rtui-dynamic-selector__list.cdk-drop-list-dragging .rtui-dynamic-selector__item:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.cdk-drag-preview{border:none;box-sizing:border-box;border-radius:var(--rt-dynamic-selector-item-border-radius);box-shadow:var(--rt-dynamic-selector-item-drag-preview-box-shadow);background:var(--mat-option-selected-state-layer-color)}\n"] }]
         }], propDecorators: { inputRef: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MatInput), { isSignal: true }] }], isMobile: [{ type: i0.Input, args: [{ isSignal: true, alias: "isMobile", required: true }] }], keyExp: [{ type: i0.Input, args: [{ isSignal: true, alias: "keyExp", required: true }] }], displayExp: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayExp", required: true }] }], selectedEntities: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedEntities", required: true }] }], readonlyEntitiesKeys: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonlyEntitiesKeys", required: false }] }], isListDraggable: [{ type: i0.Input, args: [{ isSignal: true, alias: "isListDraggable", required: false }] }], useNameBreaking: [{ type: i0.Input, args: [{ isSignal: true, alias: "useNameBreaking", required: false }] }], useTitleCase: [{ type: i0.Input, args: [{ isSignal: true, alias: "useTitleCase", required: false }] }], isDeleteButtonShown: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDeleteButtonShown", required: false }] }], isItemsEditable: [{ type: i0.Input, args: [{ isSignal: true, alias: "isItemsEditable", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], deleteFromSelectedAction: [{ type: i0.Output, args: ["deleteFromSelectedAction"] }], dropAction: [{ type: i0.Output, args: ["dropAction"] }], changeValueAction: [{ type: i0.Output, args: ["changeValueAction"] }], additionalControlTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => RtuiDynamicSelectorItemAdditionalControlDirective), { ...{
                             read: TemplateRef,
+                        }, isSignal: true }] }], itemTitleTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => RtuiDynamicSelectorItemTitleDirective), { ...{
+                            read: TemplateRef,
                         }, isSignal: true }] }] } });
 
 /** Directive for row actions located outside a row menu button */
@@ -2775,6 +2790,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
                     selector: '[rtuiDynamicSelectorAdditionalControlDirective]',
                 }]
         }] });
+/** Directive for custom item title template, projected from rtui-dynamic-selector down to selected-list */
+class RtuiDynamicSelectorItemTitleProjectionDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtuiDynamicSelectorItemTitleProjectionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.1", type: RtuiDynamicSelectorItemTitleProjectionDirective, isStandalone: true, selector: "[rtuiDynamicSelectorItemTitleProjectionDirective]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtuiDynamicSelectorItemTitleProjectionDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rtuiDynamicSelectorItemTitleProjectionDirective]',
+                }]
+        }] });
 class RtuiDynamicSelectorComponent extends RtuiDynamicSelectorsDirective {
     constructor() {
         super(...arguments);
@@ -2879,6 +2905,8 @@ class RtuiDynamicSelectorComponent extends RtuiDynamicSelectorsDirective {
         }, { ...(ngDevMode ? { debugName: "entitiesToSelect" } : {}) });
         /** Additional control for entity */
         this.additionalControlTpl = contentChild(RtuiDynamicSelectorAdditionalControlDirective, { ...(ngDevMode ? { debugName: "additionalControlTpl" } : {}), read: TemplateRef });
+        /** Custom item title template */
+        this.itemTitleTpl = contentChild(RtuiDynamicSelectorItemTitleProjectionDirective, { ...(ngDevMode ? { debugName: "itemTitleTpl" } : {}), read: TemplateRef });
         /** Selected entities ids for compare */
         this.#selectedEntityIdsForCompare = [];
         /** Indicates is selector init */
@@ -3074,9 +3102,9 @@ class RtuiDynamicSelectorComponent extends RtuiDynamicSelectorsDirective {
                 useExisting: RtuiDynamicSelectorComponent,
                 multi: true,
             },
-        ], queries: [{ propertyName: "additionalControlTpl", first: true, predicate: RtuiDynamicSelectorAdditionalControlDirective, descendants: true, read: TemplateRef, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<form [formGroup]=\"form\">\n    <ng-container rtBlock=\"rtui-dynamic-selector\">\n        @if (isNoDataPlaceholderShown()) {\n            <rtui-dynamic-selector-placeholder\n                description=\"There are no available items to choose\"\n                icon=\"warning\"\n                [isButtonShow]=\"false\"\n                [isIconOutlined]=\"true\" />\n        } @else {\n            <rtui-dynamic-selector-selected-list\n                [isMobile]=\"isMobile()\"\n                [keyExp]=\"keyExp()\"\n                [displayExp]=\"displayExp()\"\n                [selectedEntities]=\"selectedEntities()\"\n                [readonlyEntitiesKeys]=\"readonlyEntitiesKeys()\"\n                [isListDraggable]=\"isListDraggable()\"\n                [useNameBreaking]=\"useNameBreaking()\"\n                [useTitleCase]=\"useTitleCase()\"\n                [isDeleteButtonShown]=\"isDeleteButtonShown()\"\n                (dropAction)=\"onDrop($event)\"\n                (deleteFromSelectedAction)=\"toggleEntity($event)\">\n                @if (additionalControlTpl()) {\n                    <ng-container *rtuiDynamicSelectorItemAdditionalControlDirective=\"let entity\">\n                        <ng-template *ngTemplateOutlet=\"additionalControlTpl() || null; context: { $implicit: entity }\" />\n                    </ng-container>\n                }\n            </rtui-dynamic-selector-selected-list>\n\n            @if ((entitiesToSelect()?.length || !isLocalSearch()) && isSelectionAvailable()) {\n                @if (isPlaceholderShown()) {\n                    <rtui-dynamic-selector-placeholder\n                        [icon]=\"placeholderIcon()\"\n                        [description]=\"placeholderDescription()\"\n                        [buttonTitle]=\"buttonTitle()\"\n                        [disabled]=\"disabled()\"\n                        [isIconOutlined]=\"isPlaceholderIconOutlined()\"\n                        (submitAction)=\"showSelectionControl($event)\" />\n                } @else {\n                    <div rtElem=\"actions\">\n                        @if (isOpenPopupButtonShown() && this.entitiesToSelect()?.length) {\n                            <button\n                                #trigger=\"cdkOverlayOrigin\"\n                                cdkOverlayOrigin\n                                type=\"button\"\n                                class=\"c-button c-button--txt-base--size-sm\"\n                                [class.--disabled]=\"disabled()\"\n                                [disabled]=\"disabled()\"\n                                (click)=\"showSelectionControl(trigger)\">\n                                {{ buttonTitle() }}\n                            </button>\n                        }\n\n                        <ng-template [ngTemplateOutlet]=\"listActionsTpl\" />\n                    </div>\n                }\n\n                @if (selectedOverlayTrigger) {\n                    <ng-template\n                        rtEscapeKey\n                        cdkConnectedOverlay\n                        cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n                        [cdkConnectedOverlayHasBackdrop]=\"true\"\n                        [cdkConnectedOverlayOpen]=\"isSelectionControlShown()\"\n                        [cdkConnectedOverlayDisableClose]=\"true\"\n                        [cdkConnectedOverlayOrigin]=\"selectedOverlayTrigger\"\n                        [cdkConnectedOverlayPositions]=\"connectedOverlayPositions\"\n                        (backdropClick)=\"hideSelectionControl()\"\n                        (escapeKeyAction)=\"hideSelectionControl()\">\n                        <rtui-multi-selector-popup\n                            [navigateButtonTitle]=\"navigateButtonTitle()\"\n                            [navigateLink]=\"navigateLink()\"\n                            [entitiesToSelect]=\"entitiesToSelect()\"\n                            [appearance]=\"appearance()\"\n                            [keyExp]=\"keyExp()\"\n                            [displayExp]=\"displayExp()\"\n                            [isMobile]=\"isMobile()\"\n                            [isSingleSelection]=\"isSingleSelection()\"\n                            [isSelectAllButtonShown]=\"isSelectAllButtonShown()\"\n                            [loading]=\"loading()\"\n                            [fetching]=\"fetching()\"\n                            [useNameBreaking]=\"useNameBreaking()\"\n                            [searchTerm]=\"searchTerm()\"\n                            [isLazyLoad]=\"isLazyLoad()\"\n                            [isLocalSearch]=\"isLocalSearch()\"\n                            [isMultiToggleShown]=\"isMultiToggleShown()\"\n                            (searchAction)=\"search($event)\"\n                            (scrollAction)=\"scroll()\"\n                            (temporarySelectAction)=\"setTemporarySelection($event)\"\n                            (closeAction)=\"hideSelectionControl()\"\n                            (submitAction)=\"select($event)\" />\n                    </ng-template>\n                }\n            } @else if (isSelectionAvailable()) {\n                <div rtElem=\"actions\">\n                    <ng-template [ngTemplateOutlet]=\"listActionsTpl\" />\n                </div>\n            }\n        }\n    </ng-container>\n</form>\n\n<ng-template #listActionsTpl>\n    <rtui-dynamic-selector-list-actions\n        [isMobile]=\"isMobile()\"\n        [disabled]=\"disabled()\"\n        [isResetButtonDisabled]=\"isResetButtonDisabled()\"\n        [isClearButtonDisabled]=\"isClearButtonDisabled()\"\n        (resetAction)=\"resetList()\"\n        (clearAction)=\"clearList()\" />\n</ng-template>\n", styles: [":host{height:100%;width:100%;display:flex;flex-direction:column;overflow:hidden}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: 
+        ], queries: [{ propertyName: "additionalControlTpl", first: true, predicate: RtuiDynamicSelectorAdditionalControlDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "itemTitleTpl", first: true, predicate: RtuiDynamicSelectorItemTitleProjectionDirective, descendants: true, read: TemplateRef, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<form [formGroup]=\"form\">\n    <ng-container rtBlock=\"rtui-dynamic-selector\">\n        @if (isNoDataPlaceholderShown()) {\n            <rtui-dynamic-selector-placeholder\n                description=\"There are no available items to choose\"\n                icon=\"warning\"\n                [isButtonShow]=\"false\"\n                [isIconOutlined]=\"true\" />\n        } @else {\n            <rtui-dynamic-selector-selected-list\n                [isMobile]=\"isMobile()\"\n                [keyExp]=\"keyExp()\"\n                [displayExp]=\"displayExp()\"\n                [selectedEntities]=\"selectedEntities()\"\n                [readonlyEntitiesKeys]=\"readonlyEntitiesKeys()\"\n                [isListDraggable]=\"isListDraggable()\"\n                [useNameBreaking]=\"useNameBreaking()\"\n                [useTitleCase]=\"useTitleCase()\"\n                [isDeleteButtonShown]=\"isDeleteButtonShown()\"\n                (dropAction)=\"onDrop($event)\"\n                (deleteFromSelectedAction)=\"toggleEntity($event)\">\n                @if (additionalControlTpl()) {\n                    <ng-container *rtuiDynamicSelectorItemAdditionalControlDirective=\"let entity\">\n                        <ng-template *ngTemplateOutlet=\"additionalControlTpl() || null; context: { $implicit: entity }\" />\n                    </ng-container>\n                }\n\n                @if (itemTitleTpl()) {\n                    <ng-container *rtuiDynamicSelectorItemTitleDirective=\"let entity\">\n                        <ng-template *ngTemplateOutlet=\"itemTitleTpl() || null; context: { $implicit: entity }\" />\n                    </ng-container>\n                }\n            </rtui-dynamic-selector-selected-list>\n\n            @if ((entitiesToSelect()?.length || !isLocalSearch()) && isSelectionAvailable()) {\n                @if (isPlaceholderShown()) {\n                    <rtui-dynamic-selector-placeholder\n                        [icon]=\"placeholderIcon()\"\n                        [description]=\"placeholderDescription()\"\n                        [buttonTitle]=\"buttonTitle()\"\n                        [disabled]=\"disabled()\"\n                        [isIconOutlined]=\"isPlaceholderIconOutlined()\"\n                        (submitAction)=\"showSelectionControl($event)\" />\n                } @else {\n                    <div rtElem=\"actions\">\n                        @if (isOpenPopupButtonShown() && this.entitiesToSelect()?.length) {\n                            <button\n                                #trigger=\"cdkOverlayOrigin\"\n                                cdkOverlayOrigin\n                                type=\"button\"\n                                class=\"c-button c-button--txt-base--size-sm\"\n                                [class.--disabled]=\"disabled()\"\n                                [disabled]=\"disabled()\"\n                                (click)=\"showSelectionControl(trigger)\">\n                                {{ buttonTitle() }}\n                            </button>\n                        }\n\n                        <ng-template [ngTemplateOutlet]=\"listActionsTpl\" />\n                    </div>\n                }\n\n                @if (selectedOverlayTrigger) {\n                    <ng-template\n                        rtEscapeKey\n                        cdkConnectedOverlay\n                        cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n                        [cdkConnectedOverlayHasBackdrop]=\"true\"\n                        [cdkConnectedOverlayOpen]=\"isSelectionControlShown()\"\n                        [cdkConnectedOverlayDisableClose]=\"true\"\n                        [cdkConnectedOverlayOrigin]=\"selectedOverlayTrigger\"\n                        [cdkConnectedOverlayPositions]=\"connectedOverlayPositions\"\n                        (backdropClick)=\"hideSelectionControl()\"\n                        (escapeKeyAction)=\"hideSelectionControl()\">\n                        <rtui-multi-selector-popup\n                            [navigateButtonTitle]=\"navigateButtonTitle()\"\n                            [navigateLink]=\"navigateLink()\"\n                            [entitiesToSelect]=\"entitiesToSelect()\"\n                            [appearance]=\"appearance()\"\n                            [keyExp]=\"keyExp()\"\n                            [displayExp]=\"displayExp()\"\n                            [isMobile]=\"isMobile()\"\n                            [isSingleSelection]=\"isSingleSelection()\"\n                            [isSelectAllButtonShown]=\"isSelectAllButtonShown()\"\n                            [loading]=\"loading()\"\n                            [fetching]=\"fetching()\"\n                            [useNameBreaking]=\"useNameBreaking()\"\n                            [searchTerm]=\"searchTerm()\"\n                            [isLazyLoad]=\"isLazyLoad()\"\n                            [isLocalSearch]=\"isLocalSearch()\"\n                            [isMultiToggleShown]=\"isMultiToggleShown()\"\n                            (searchAction)=\"search($event)\"\n                            (scrollAction)=\"scroll()\"\n                            (temporarySelectAction)=\"setTemporarySelection($event)\"\n                            (closeAction)=\"hideSelectionControl()\"\n                            (submitAction)=\"select($event)\" />\n                    </ng-template>\n                }\n            } @else if (isSelectionAvailable()) {\n                <div rtElem=\"actions\">\n                    <ng-template [ngTemplateOutlet]=\"listActionsTpl\" />\n                </div>\n            }\n        }\n    </ng-container>\n</form>\n\n<ng-template #listActionsTpl>\n    <rtui-dynamic-selector-list-actions\n        [isMobile]=\"isMobile()\"\n        [disabled]=\"disabled()\"\n        [isResetButtonDisabled]=\"isResetButtonDisabled()\"\n        [isClearButtonDisabled]=\"isClearButtonDisabled()\"\n        (resetAction)=\"resetList()\"\n        (clearAction)=\"clearList()\" />\n</ng-template>\n", styles: [":host{height:100%;width:100%;display:flex;flex-direction:column;overflow:hidden}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: 
                 // directives
-                BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }, { kind: "directive", type: RtEscapeKeyDirective, selector: "[rtEscapeKey]", outputs: ["escapeKeyAction"] }, { kind: "directive", type: RtuiDynamicSelectorItemAdditionalControlDirective, selector: "[rtuiDynamicSelectorItemAdditionalControlDirective]" }, { kind: "component", type: 
+                BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }, { kind: "directive", type: RtEscapeKeyDirective, selector: "[rtEscapeKey]", outputs: ["escapeKeyAction"] }, { kind: "directive", type: RtuiDynamicSelectorItemAdditionalControlDirective, selector: "[rtuiDynamicSelectorItemAdditionalControlDirective]" }, { kind: "directive", type: RtuiDynamicSelectorItemTitleDirective, selector: "[rtuiDynamicSelectorItemTitleDirective]" }, { kind: "component", type: 
                 // components
                 RtuiMultiSelectorPopupComponent, selector: "rtui-multi-selector-popup", inputs: ["isMobile", "entitiesToSelect", "appearance", "keyExp", "displayExp", "searchTerm", "navigateButtonTitle", "navigateLink", "isSingleSelection", "isMultiToggleShown", "isSelectAllButtonShown", "loading", "fetching", "useNameBreaking", "isLazyLoad", "isLocalSearch"], outputs: ["submitAction", "closeAction", "searchAction", "scrollAction", "temporarySelectAction"] }, { kind: "component", type: RtuiDynamicSelectorPlaceholderComponent, selector: "rtui-dynamic-selector-placeholder", inputs: ["icon", "description", "buttonTitle", "isButtonShow", "disabled", "isIconOutlined"], outputs: ["submitAction"] }, { kind: "component", type: RtuiDynamicSelectorListActionsComponent, selector: "rtui-dynamic-selector-list-actions", inputs: ["isMobile", "isResetButtonDisabled", "isClearButtonDisabled", "disabled"], outputs: ["resetAction", "clearAction"] }, { kind: "component", type: RtuiDynamicSelectorSelectedListComponent, selector: "rtui-dynamic-selector-selected-list", inputs: ["isMobile", "keyExp", "displayExp", "selectedEntities", "readonlyEntitiesKeys", "isListDraggable", "useNameBreaking", "useTitleCase", "isDeleteButtonShown", "isItemsEditable", "appearance"], outputs: ["deleteFromSelectedAction", "dropAction", "changeValueAction"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
@@ -3092,6 +3120,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
                         ElemDirective,
                         RtEscapeKeyDirective,
                         RtuiDynamicSelectorItemAdditionalControlDirective,
+                        RtuiDynamicSelectorItemTitleDirective,
                         // components
                         RtuiMultiSelectorPopupComponent,
                         RtuiDynamicSelectorPlaceholderComponent,
@@ -3108,9 +3137,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
                             useExisting: RtuiDynamicSelectorComponent,
                             multi: true,
                         },
-                    ], template: "<form [formGroup]=\"form\">\n    <ng-container rtBlock=\"rtui-dynamic-selector\">\n        @if (isNoDataPlaceholderShown()) {\n            <rtui-dynamic-selector-placeholder\n                description=\"There are no available items to choose\"\n                icon=\"warning\"\n                [isButtonShow]=\"false\"\n                [isIconOutlined]=\"true\" />\n        } @else {\n            <rtui-dynamic-selector-selected-list\n                [isMobile]=\"isMobile()\"\n                [keyExp]=\"keyExp()\"\n                [displayExp]=\"displayExp()\"\n                [selectedEntities]=\"selectedEntities()\"\n                [readonlyEntitiesKeys]=\"readonlyEntitiesKeys()\"\n                [isListDraggable]=\"isListDraggable()\"\n                [useNameBreaking]=\"useNameBreaking()\"\n                [useTitleCase]=\"useTitleCase()\"\n                [isDeleteButtonShown]=\"isDeleteButtonShown()\"\n                (dropAction)=\"onDrop($event)\"\n                (deleteFromSelectedAction)=\"toggleEntity($event)\">\n                @if (additionalControlTpl()) {\n                    <ng-container *rtuiDynamicSelectorItemAdditionalControlDirective=\"let entity\">\n                        <ng-template *ngTemplateOutlet=\"additionalControlTpl() || null; context: { $implicit: entity }\" />\n                    </ng-container>\n                }\n            </rtui-dynamic-selector-selected-list>\n\n            @if ((entitiesToSelect()?.length || !isLocalSearch()) && isSelectionAvailable()) {\n                @if (isPlaceholderShown()) {\n                    <rtui-dynamic-selector-placeholder\n                        [icon]=\"placeholderIcon()\"\n                        [description]=\"placeholderDescription()\"\n                        [buttonTitle]=\"buttonTitle()\"\n                        [disabled]=\"disabled()\"\n                        [isIconOutlined]=\"isPlaceholderIconOutlined()\"\n                        (submitAction)=\"showSelectionControl($event)\" />\n                } @else {\n                    <div rtElem=\"actions\">\n                        @if (isOpenPopupButtonShown() && this.entitiesToSelect()?.length) {\n                            <button\n                                #trigger=\"cdkOverlayOrigin\"\n                                cdkOverlayOrigin\n                                type=\"button\"\n                                class=\"c-button c-button--txt-base--size-sm\"\n                                [class.--disabled]=\"disabled()\"\n                                [disabled]=\"disabled()\"\n                                (click)=\"showSelectionControl(trigger)\">\n                                {{ buttonTitle() }}\n                            </button>\n                        }\n\n                        <ng-template [ngTemplateOutlet]=\"listActionsTpl\" />\n                    </div>\n                }\n\n                @if (selectedOverlayTrigger) {\n                    <ng-template\n                        rtEscapeKey\n                        cdkConnectedOverlay\n                        cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n                        [cdkConnectedOverlayHasBackdrop]=\"true\"\n                        [cdkConnectedOverlayOpen]=\"isSelectionControlShown()\"\n                        [cdkConnectedOverlayDisableClose]=\"true\"\n                        [cdkConnectedOverlayOrigin]=\"selectedOverlayTrigger\"\n                        [cdkConnectedOverlayPositions]=\"connectedOverlayPositions\"\n                        (backdropClick)=\"hideSelectionControl()\"\n                        (escapeKeyAction)=\"hideSelectionControl()\">\n                        <rtui-multi-selector-popup\n                            [navigateButtonTitle]=\"navigateButtonTitle()\"\n                            [navigateLink]=\"navigateLink()\"\n                            [entitiesToSelect]=\"entitiesToSelect()\"\n                            [appearance]=\"appearance()\"\n                            [keyExp]=\"keyExp()\"\n                            [displayExp]=\"displayExp()\"\n                            [isMobile]=\"isMobile()\"\n                            [isSingleSelection]=\"isSingleSelection()\"\n                            [isSelectAllButtonShown]=\"isSelectAllButtonShown()\"\n                            [loading]=\"loading()\"\n                            [fetching]=\"fetching()\"\n                            [useNameBreaking]=\"useNameBreaking()\"\n                            [searchTerm]=\"searchTerm()\"\n                            [isLazyLoad]=\"isLazyLoad()\"\n                            [isLocalSearch]=\"isLocalSearch()\"\n                            [isMultiToggleShown]=\"isMultiToggleShown()\"\n                            (searchAction)=\"search($event)\"\n                            (scrollAction)=\"scroll()\"\n                            (temporarySelectAction)=\"setTemporarySelection($event)\"\n                            (closeAction)=\"hideSelectionControl()\"\n                            (submitAction)=\"select($event)\" />\n                    </ng-template>\n                }\n            } @else if (isSelectionAvailable()) {\n                <div rtElem=\"actions\">\n                    <ng-template [ngTemplateOutlet]=\"listActionsTpl\" />\n                </div>\n            }\n        }\n    </ng-container>\n</form>\n\n<ng-template #listActionsTpl>\n    <rtui-dynamic-selector-list-actions\n        [isMobile]=\"isMobile()\"\n        [disabled]=\"disabled()\"\n        [isResetButtonDisabled]=\"isResetButtonDisabled()\"\n        [isClearButtonDisabled]=\"isClearButtonDisabled()\"\n        (resetAction)=\"resetList()\"\n        (clearAction)=\"clearList()\" />\n</ng-template>\n", styles: [":host{height:100%;width:100%;display:flex;flex-direction:column;overflow:hidden}\n"] }]
+                    ], template: "<form [formGroup]=\"form\">\n    <ng-container rtBlock=\"rtui-dynamic-selector\">\n        @if (isNoDataPlaceholderShown()) {\n            <rtui-dynamic-selector-placeholder\n                description=\"There are no available items to choose\"\n                icon=\"warning\"\n                [isButtonShow]=\"false\"\n                [isIconOutlined]=\"true\" />\n        } @else {\n            <rtui-dynamic-selector-selected-list\n                [isMobile]=\"isMobile()\"\n                [keyExp]=\"keyExp()\"\n                [displayExp]=\"displayExp()\"\n                [selectedEntities]=\"selectedEntities()\"\n                [readonlyEntitiesKeys]=\"readonlyEntitiesKeys()\"\n                [isListDraggable]=\"isListDraggable()\"\n                [useNameBreaking]=\"useNameBreaking()\"\n                [useTitleCase]=\"useTitleCase()\"\n                [isDeleteButtonShown]=\"isDeleteButtonShown()\"\n                (dropAction)=\"onDrop($event)\"\n                (deleteFromSelectedAction)=\"toggleEntity($event)\">\n                @if (additionalControlTpl()) {\n                    <ng-container *rtuiDynamicSelectorItemAdditionalControlDirective=\"let entity\">\n                        <ng-template *ngTemplateOutlet=\"additionalControlTpl() || null; context: { $implicit: entity }\" />\n                    </ng-container>\n                }\n\n                @if (itemTitleTpl()) {\n                    <ng-container *rtuiDynamicSelectorItemTitleDirective=\"let entity\">\n                        <ng-template *ngTemplateOutlet=\"itemTitleTpl() || null; context: { $implicit: entity }\" />\n                    </ng-container>\n                }\n            </rtui-dynamic-selector-selected-list>\n\n            @if ((entitiesToSelect()?.length || !isLocalSearch()) && isSelectionAvailable()) {\n                @if (isPlaceholderShown()) {\n                    <rtui-dynamic-selector-placeholder\n                        [icon]=\"placeholderIcon()\"\n                        [description]=\"placeholderDescription()\"\n                        [buttonTitle]=\"buttonTitle()\"\n                        [disabled]=\"disabled()\"\n                        [isIconOutlined]=\"isPlaceholderIconOutlined()\"\n                        (submitAction)=\"showSelectionControl($event)\" />\n                } @else {\n                    <div rtElem=\"actions\">\n                        @if (isOpenPopupButtonShown() && this.entitiesToSelect()?.length) {\n                            <button\n                                #trigger=\"cdkOverlayOrigin\"\n                                cdkOverlayOrigin\n                                type=\"button\"\n                                class=\"c-button c-button--txt-base--size-sm\"\n                                [class.--disabled]=\"disabled()\"\n                                [disabled]=\"disabled()\"\n                                (click)=\"showSelectionControl(trigger)\">\n                                {{ buttonTitle() }}\n                            </button>\n                        }\n\n                        <ng-template [ngTemplateOutlet]=\"listActionsTpl\" />\n                    </div>\n                }\n\n                @if (selectedOverlayTrigger) {\n                    <ng-template\n                        rtEscapeKey\n                        cdkConnectedOverlay\n                        cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n                        [cdkConnectedOverlayHasBackdrop]=\"true\"\n                        [cdkConnectedOverlayOpen]=\"isSelectionControlShown()\"\n                        [cdkConnectedOverlayDisableClose]=\"true\"\n                        [cdkConnectedOverlayOrigin]=\"selectedOverlayTrigger\"\n                        [cdkConnectedOverlayPositions]=\"connectedOverlayPositions\"\n                        (backdropClick)=\"hideSelectionControl()\"\n                        (escapeKeyAction)=\"hideSelectionControl()\">\n                        <rtui-multi-selector-popup\n                            [navigateButtonTitle]=\"navigateButtonTitle()\"\n                            [navigateLink]=\"navigateLink()\"\n                            [entitiesToSelect]=\"entitiesToSelect()\"\n                            [appearance]=\"appearance()\"\n                            [keyExp]=\"keyExp()\"\n                            [displayExp]=\"displayExp()\"\n                            [isMobile]=\"isMobile()\"\n                            [isSingleSelection]=\"isSingleSelection()\"\n                            [isSelectAllButtonShown]=\"isSelectAllButtonShown()\"\n                            [loading]=\"loading()\"\n                            [fetching]=\"fetching()\"\n                            [useNameBreaking]=\"useNameBreaking()\"\n                            [searchTerm]=\"searchTerm()\"\n                            [isLazyLoad]=\"isLazyLoad()\"\n                            [isLocalSearch]=\"isLocalSearch()\"\n                            [isMultiToggleShown]=\"isMultiToggleShown()\"\n                            (searchAction)=\"search($event)\"\n                            (scrollAction)=\"scroll()\"\n                            (temporarySelectAction)=\"setTemporarySelection($event)\"\n                            (closeAction)=\"hideSelectionControl()\"\n                            (submitAction)=\"select($event)\" />\n                    </ng-template>\n                }\n            } @else if (isSelectionAvailable()) {\n                <div rtElem=\"actions\">\n                    <ng-template [ngTemplateOutlet]=\"listActionsTpl\" />\n                </div>\n            }\n        }\n    </ng-container>\n</form>\n\n<ng-template #listActionsTpl>\n    <rtui-dynamic-selector-list-actions\n        [isMobile]=\"isMobile()\"\n        [disabled]=\"disabled()\"\n        [isResetButtonDisabled]=\"isResetButtonDisabled()\"\n        [isClearButtonDisabled]=\"isClearButtonDisabled()\"\n        (resetAction)=\"resetList()\"\n        (clearAction)=\"clearList()\" />\n</ng-template>\n", styles: [":host{height:100%;width:100%;display:flex;flex-direction:column;overflow:hidden}\n"] }]
         }], propDecorators: { keyExp: [{ type: i0.Input, args: [{ isSignal: true, alias: "keyExp", required: true }] }], displayExp: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayExp", required: true }] }], entities: [{ type: i0.Input, args: [{ isSignal: true, alias: "entities", required: true }] }], navigateButtonTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "navigateButtonTitle", required: false }] }], navigateLink: [{ type: i0.Input, args: [{ isSignal: true, alias: "navigateLink", required: false }] }], readonlyEntitiesKeys: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonlyEntitiesKeys", required: false }] }], chosenEntities: [{ type: i0.Input, args: [{ isSignal: true, alias: "chosenEntities", required: false }] }, { type: i0.Output, args: ["chosenEntitiesChange"] }], isSelectionAvailable: [{ type: i0.Input, args: [{ isSignal: true, alias: "isSelectionAvailable", required: false }] }], isPlaceholderShown: [{ type: i0.Input, args: [{ isSignal: true, alias: "isPlaceholderShown", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], pending: [{ type: i0.Input, args: [{ isSignal: true, alias: "pending", required: false }] }], fetching: [{ type: i0.Input, args: [{ isSignal: true, alias: "fetching", required: false }] }], isLazyLoad: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLazyLoad", required: false }] }], isLocalSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLocalSearch", required: false }] }], isMultiToggleShown: [{ type: i0.Input, args: [{ isSignal: true, alias: "isMultiToggleShown", required: false }] }], isSelectAllButtonShown: [{ type: i0.Input, args: [{ isSignal: true, alias: "isSelectAllButtonShown", required: false }] }], isOpenPopupButtonShown: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOpenPopupButtonShown", required: false }] }], searchTerm: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchTerm", required: false }] }], additionalControlChanged: [{ type: i0.Input, args: [{ isSignal: true, alias: "additionalControlChanged", required: false }] }], sortFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortFn", required: false }] }], searchAction: [{ type: i0.Output, args: ["searchAction"] }], scrollAction: [{ type: i0.Output, args: ["scrollAction"] }], temporarySelectAction: [{ type: i0.Output, args: ["temporarySelectAction"] }], resetAction: [{ type: i0.Output, args: ["resetAction"] }], selectionChangeAction: [{ type: i0.Output, args: ["selectionChangeAction"] }], additionalControlTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => RtuiDynamicSelectorAdditionalControlDirective), { ...{
                             read: TemplateRef,
+                        }, isSignal: true }] }], itemTitleTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => RtuiDynamicSelectorItemTitleProjectionDirective), { ...{
+                            read: TemplateRef,
                         }, isSignal: true }] }] } });
 
 /** Directive for row actions located outside a row menu button */
@@ -4521,5 +4552,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ASIDE_BUTTONS_ENUM, ASIDE_REF, AsideRef, BUTTON_APPEARANCE, BUTTON_COLOR, BUTTON_SIZE, DEFAULT_PAGE_MODEL, DEFAULT_PAGE_SIZE, INFO_BADGE_SIZE_ENUM, INFO_BADGE_TYPE_ENUM, MODAL_WINDOW_SIZE_ENUM, RTUI_TABLE_COMPONENT_TOKEN, RTUI_TABLE_STOP_ROW_CLICK_ATTRIBUTE, RtActionBarService, RtAsideService, RtDynamicListSelectorsDirective, RtModalService, RtPopoverDirective, RtSnackBarService, RtTableConfigService, RtTableSelectorsDirective, RtuiActionBarComponent, RtuiActionBarContainerComponent, RtuiAsideContainerComponent, RtuiAsideContainerHeaderDirective, RtuiButtonComponent, RtuiClearButtonComponent, RtuiCustomTableCellsDirective, RtuiDynamicInputAdditionalControlDirective, RtuiDynamicInputComponent, RtuiDynamicListComponent, RtuiDynamicListCustomTableCellsDirective, RtuiDynamicListRowActionsDirective, RtuiDynamicListRowAdditionalActionsDirective, RtuiDynamicListToolbarActionsDirective, RtuiDynamicListToolbarSelectorsDirective, RtuiDynamicSelectorAdditionalControlDirective, RtuiDynamicSelectorComponent, RtuiDynamicSelectorItemAdditionalControlDirective, RtuiDynamicSelectorListActionsComponent, RtuiDynamicSelectorPlaceholderComponent, RtuiDynamicSelectorSelectedListComponent, RtuiFileUploadComponent, RtuiHeaderCenterDirective, RtuiHeaderComponent, RtuiHeaderLeftDirective, RtuiHeaderRightDirective, RtuiImageUploadComponent, RtuiInfoBadgeComponent, RtuiModalComponent, RtuiMultiButtonComponent, RtuiMultiSelectorPopupComponent, RtuiPaginationComponent, RtuiRoundIconButtonComponent, RtuiScrollableContainerComponent, RtuiScrollableContainerContentDirective, RtuiScrollableContainerFooterDirective, RtuiScrollableContainerHeaderDirective, RtuiSideMenuComponent, RtuiSideMenuFooterDirective, RtuiSideMenuHeaderDirective, RtuiSnackBarComponent, RtuiSpinnerComponent, RtuiStopTableRowClickDirective, RtuiTableAdditionalRowActionsDirective, RtuiTableComponent, RtuiTableRowActionsDirective, RtuiTableRowClickDirective, RtuiToggleComponent, RtuiToolbarCenterDirective, RtuiToolbarComponent, RtuiToolbarLeftDirective, RtuiToolbarRightDirective, TABLE_COLUMN_FILTER_TYPES_ENUM, TABLE_COLUMN_TYPES_ENUM, TEXT_CELL_COLOR_ENUM, TOGGLE_SIZE_TYPE_ENUM, darkenHexColor, ddServices, getColorBasedOnBackground, progressDecreaseAnimation, progressIncreaseAnimation, provideRtUi };
+export { ASIDE_BUTTONS_ENUM, ASIDE_REF, AsideRef, BUTTON_APPEARANCE, BUTTON_COLOR, BUTTON_SIZE, DEFAULT_PAGE_MODEL, DEFAULT_PAGE_SIZE, INFO_BADGE_SIZE_ENUM, INFO_BADGE_TYPE_ENUM, MODAL_WINDOW_SIZE_ENUM, RTUI_TABLE_COMPONENT_TOKEN, RTUI_TABLE_STOP_ROW_CLICK_ATTRIBUTE, RtActionBarService, RtAsideService, RtDynamicListSelectorsDirective, RtModalService, RtPopoverDirective, RtSnackBarService, RtTableConfigService, RtTableSelectorsDirective, RtuiActionBarComponent, RtuiActionBarContainerComponent, RtuiAsideContainerComponent, RtuiAsideContainerHeaderDirective, RtuiButtonComponent, RtuiClearButtonComponent, RtuiCustomTableCellsDirective, RtuiDynamicInputAdditionalControlDirective, RtuiDynamicInputComponent, RtuiDynamicListComponent, RtuiDynamicListCustomTableCellsDirective, RtuiDynamicListRowActionsDirective, RtuiDynamicListRowAdditionalActionsDirective, RtuiDynamicListToolbarActionsDirective, RtuiDynamicListToolbarSelectorsDirective, RtuiDynamicSelectorAdditionalControlDirective, RtuiDynamicSelectorComponent, RtuiDynamicSelectorItemAdditionalControlDirective, RtuiDynamicSelectorItemTitleDirective, RtuiDynamicSelectorItemTitleProjectionDirective, RtuiDynamicSelectorListActionsComponent, RtuiDynamicSelectorPlaceholderComponent, RtuiDynamicSelectorSelectedListComponent, RtuiFileUploadComponent, RtuiHeaderCenterDirective, RtuiHeaderComponent, RtuiHeaderLeftDirective, RtuiHeaderRightDirective, RtuiImageUploadComponent, RtuiInfoBadgeComponent, RtuiModalComponent, RtuiMultiButtonComponent, RtuiMultiSelectorPopupComponent, RtuiPaginationComponent, RtuiRoundIconButtonComponent, RtuiScrollableContainerComponent, RtuiScrollableContainerContentDirective, RtuiScrollableContainerFooterDirective, RtuiScrollableContainerHeaderDirective, RtuiSideMenuComponent, RtuiSideMenuFooterDirective, RtuiSideMenuHeaderDirective, RtuiSnackBarComponent, RtuiSpinnerComponent, RtuiStopTableRowClickDirective, RtuiTableAdditionalRowActionsDirective, RtuiTableComponent, RtuiTableRowActionsDirective, RtuiTableRowClickDirective, RtuiToggleComponent, RtuiToolbarCenterDirective, RtuiToolbarComponent, RtuiToolbarLeftDirective, RtuiToolbarRightDirective, TABLE_COLUMN_FILTER_TYPES_ENUM, TABLE_COLUMN_TYPES_ENUM, TEXT_CELL_COLOR_ENUM, TOGGLE_SIZE_TYPE_ENUM, darkenHexColor, ddServices, getColorBasedOnBackground, progressDecreaseAnimation, progressIncreaseAnimation, provideRtUi };
 //# sourceMappingURL=rt-tools-ui-kit.mjs.map