@rt-tools/ui-kit 0.3.1 → 0.4.0

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

@@ -1,6 +1,6 @@
-import { NgStyle, NgClass, NgComponentOutlet, NgTemplateOutlet, AsyncPipe, DOCUMENT, TitleCasePipe } from '@angular/common';
+import { NgStyle, NgComponentOutlet, NgTemplateOutlet, DOCUMENT, TitleCasePipe, NgClass } from '@angular/common';
 import * as i0 from '@angular/core';
-import { inject, HostBinding, ChangeDetectionStrategy, Component, Injectable, Directive, contentChild, TemplateRef, input, booleanAttribute, effect, output, viewChild, signal, computed, numberAttribute, InjectionToken, Injector, ViewEncapsulation, model, DestroyRef, HostListener, ElementRef, forwardRef, ChangeDetectorRef, untracked, ViewContainerRef, afterNextRender } from '@angular/core';
+import { inject, HostBinding, ChangeDetectionStrategy, Component, Injectable, Directive, contentChild, TemplateRef, input, booleanAttribute, effect, computed, output, viewChild, signal, numberAttribute, InjectionToken, ChangeDetectorRef, Injector, ViewEncapsulation, model, DestroyRef, HostListener, ElementRef, forwardRef, untracked, ViewContainerRef, afterNextRender } from '@angular/core';
 import * as i1 from '@angular/forms';
 import { FormControl, Validators, ReactiveFormsModule, FormBuilder, FormsModule, NG_VALUE_ACCESSOR, NG_VALIDATORS } from '@angular/forms';
 import * as i5 from '@angular/material/button';
@@ -12,9 +12,9 @@ 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 { checkIsMatchingValues, BlockDirective, ElemDirective, SanitizePipe, ModDirective, RtIconOutlinedDirective, RtScrollToElementDirective, RtNavigationDirective, WINDOW, IDBStorageService, EmptyToDashPipe, PlatformService, BreakpointService, DeviceDetectorService, OSTypes, RtScrollDirective, BreakStringPipe, EntityToStringPipe, OVERLAY_POSITIONS, RtEscapeKeyDirective, POSITION_ENUM, LOCAL_STORAGE } from '@rt-tools/core';
+import { checkIsMatchingValues, BlockDirective, ElemDirective, SanitizePipe, ConcatClassesPipe, BreakpointService, ModDirective, RtIconOutlinedDirective, RtScrollToElementDirective, RtNavigationDirective, WINDOW, IDBStorageService, EmptyToDashPipe, PlatformService, DeviceDetectorService, OSTypes, RtScrollDirective, BreakStringPipe, EntityToStringPipe, OVERLAY_POSITIONS, RtEscapeKeyDirective, POSITION_ENUM, LOCAL_STORAGE } from '@rt-tools/core';
 import { ReplaySubject, share, Subject, merge, of, noop } from 'rxjs';
-import { filter, map, delay, take, tap, switchMap, debounceTime, distinctUntilChanged } from 'rxjs/operators';
+import { filter, delay, take, tap, switchMap, debounceTime, distinctUntilChanged, map } from 'rxjs/operators';
 import { MatListItem, MatNavList, MatListItemIcon, MatListItemTitle } from '@angular/material/list';
 import * as i1$2 from '@angular/material/sidenav';
 import { MatDrawer, MatSidenavModule } from '@angular/material/sidenav';
@@ -30,7 +30,6 @@ import * as i1$4 from '@angular/cdk/portal';
 import { ComponentPortal, PortalModule } from '@angular/cdk/portal';
 import { Router, NavigationEnd, RouterLink } from '@angular/router';
 import { trigger, state, style, transition, animate, keyframes, AnimationBuilder } from '@angular/animations';
-import { BreakpointObserver } from '@angular/cdk/layout';
 import { CdkTrapFocus } from '@angular/cdk/a11y';
 import { MatToolbar } from '@angular/material/toolbar';
 import { Clipboard } from '@angular/cdk/clipboard';
@@ -48,6 +47,7 @@ import { computePosition, offset, flip, shift } from '@floating-ui/dom';
 import { MAT_SNACK_BAR_DATA, MatSnackBarRef, MatSnackBar } from '@angular/material/snack-bar';
 import { ImageCropperComponent } from 'ngx-image-cropper';
 
+const BEM_BLOCK$z = 'rtui-modal';
 class RtuiModalComponent {
     constructor() {
         this.data = inject(MAT_DIALOG_DATA);
@@ -81,17 +81,16 @@ class RtuiModalComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: RtuiModalComponent, isStandalone: true, selector: "rtui-modal", host: { properties: { "class": "this.hostClasses" }, classAttribute: "rtui-modal" }, ngImport: i0, template: "<ng-container rtBlock=\"rtui-modal\">\n    @if (data.title) {\n        <div rtElem=\"title\" mat-dialog-title>\n            @if (data.icon) {\n                <h2>\n                    <mat-icon [ngStyle]=\"data.icon.style\">\n                        {{ data.icon.value }}\n                    </mat-icon>\n                </h2>\n            }\n\n            <h1>{{ data.title }}</h1>\n        </div>\n    }\n\n    <mat-dialog-content>\n        @if (data.text) {\n            <div rtElem=\"text\" [innerHTML]=\"data.text | sanitize\"></div>\n        }\n\n        @if (data.confirmation) {\n            <div rtElem=\"confirmation\" [innerHTML]=\"data.confirmation | sanitize\"></div>\n        }\n\n        @if (data.input) {\n            <div rtElem=\"input\">{{ data.input.label }}</div>\n\n            <mat-form-field [appearance]=\"'outline'\">\n                <input matInput type=\"text\" autocomplete=\"off\" [formControl]=\"control!\" />\n            </mat-form-field>\n        }\n\n        @if (data.textArea) {\n            <mat-form-field rtElem=\"textarea\">\n                <textarea matInput [formControl]=\"control!\" [placeholder]=\"data.textArea.placeholder\"></textarea>\n            </mat-form-field>\n        }\n\n        @if (data.select) {\n            <mat-form-field rtElem=\"select\">\n                @if (data.select.label) {\n                    <mat-label>{{ data.select.label }}</mat-label>\n                }\n\n                <mat-select required [formControl]=\"selectControl!\">\n                    <mat-option>--</mat-option>\n                    @for (option of data.select.value; track option?.name ?? option) {\n                        <mat-option [value]=\"option?.value\">\n                            {{ option?.name }}\n                        </mat-option>\n                    }\n                </mat-select>\n\n                @if (data.select.hint && selectControl?.hasError('required')) {\n                    <mat-error>{{ data.select.hint }}</mat-error>\n                }\n            </mat-form-field>\n        }\n\n        @if (data?.component) {\n            <ng-container *ngComponentOutlet=\"data!.component!\" />\n        }\n    </mat-dialog-content>\n\n    <mat-dialog-actions [attr.align]=\"data.buttonsAlign\">\n        @for (button of data.buttons; track button.text) {\n            @switch (button.appearance) {\n                @case ('raised') {\n                    <button\n                        mat-flat-button\n                        type=\"button\"\n                        [ngClass]=\"button.className\"\n                        [color]=\"button.color\"\n                        [disabled]=\"button.validateSelect && (selectControl?.invalid || control?.invalid)\"\n                        [ngStyle]=\"button.style\"\n                        (click)=\"onClose(button)\">\n                        {{ button.text }}\n                    </button>\n                }\n\n                @case ('flat') {\n                    <button\n                        mat-flat-button\n                        type=\"button\"\n                        [color]=\"button.color\"\n                        [disabled]=\"button.validateSelect && (selectControl?.invalid || control?.invalid)\"\n                        [ngStyle]=\"button.style\"\n                        (click)=\"onClose(button)\">\n                        {{ button.text }}\n                    </button>\n                }\n\n                @case ('stroked') {\n                    <button\n                        mat-stroked-button\n                        type=\"button\"\n                        [color]=\"button.color\"\n                        [disabled]=\"button.validateSelect && (selectControl?.invalid || control?.invalid)\"\n                        [ngStyle]=\"button.style\"\n                        (click)=\"onClose(button)\">\n                        {{ button.text }}\n                    </button>\n                }\n\n                @case ('fab') {\n                    <button\n                        mat-fab\n                        type=\"button\"\n                        [color]=\"button.color\"\n                        [disabled]=\"button.validateSelect && (selectControl?.invalid || control?.invalid)\"\n                        [ngStyle]=\"button.style\"\n                        (click)=\"onClose(button)\">\n                        {{ button.text }}\n                    </button>\n                }\n\n                @case ('mini-fab') {\n                    <button\n                        mat-mini-fab\n                        type=\"button\"\n                        [color]=\"button.color\"\n                        [disabled]=\"button.validateSelect && (selectControl?.invalid || control?.invalid)\"\n                        [ngStyle]=\"button.style\"\n                        (click)=\"onClose(button)\">\n                        {{ button.text }}\n                    </button>\n                }\n\n                @default {\n                    <button\n                        mat-button\n                        type=\"button\"\n                        [color]=\"button.color\"\n                        [disabled]=\"button.validateSelect && (selectControl?.invalid || control?.invalid)\"\n                        [ngStyle]=\"button.style\"\n                        (click)=\"onClose(button)\">\n                        {{ button.text }}\n                    </button>\n                }\n            }\n        }\n    </mat-dialog-actions>\n</ng-container>\n", styles: ["@charset \"UTF-8\";:host{--rt-modal-title-font-size: 1.25rem;--rt-modal-title-color: var(--rt-text-base-primary);--rt-modal-title-font-weight: 400;--rt-modal-content-padding: 1rem 1.5rem;--rt-modal-content-color: var(--rt-text-base-soft);--rt-modal-content-font-size: .8rem;--rt-modal-content-text-align: center;--rt-modal-content-word-wrap: break-word;--rt-modal-input-margin-top: 1.5rem;--rt-modal-input-font-weight: 600;--rt-modal-input-text-align: left;--rt-modal-textarea-margin-top: 1.5rem;--rt-modal-select-margin-top: 1.5rem;--rt-modal-text-highlited-font-weight: 600;--rt-modal-text-highlited-color: var(--rt-text-base-strong);--rt-modal-text-warn-display: inline;--rt-modal-text-warn-font-size: 1rem;--rt-modal-text-warn-font-weight: 600;--rt-modal-text-warn-color: var(--rt-text-accent-danger)}:host ::ng-deep .--highlighted{display:inline;color:var(--rt-modal-text-highlited-color);font-weight:var(--rt-modal-text-highlited-font-weight)}:host ::ng-deep .--warn{display:inline;color:var(--rt-modal-text-warn-color);font-size:var(--rt-modal-text-warn-font-size);font-weight:var(--rt-modal-text-warn-font-weight)}:host .rtui-modal__title h1{color:var(--rt-modal-title-color);font-size:var(--rt-modal-title-font-size);font-weight:var(--rt-modal-title-font-weight)}:host .rtui-modal__title h1,:host .rtui-modal__title h2{text-align:center}:host .rtui-modal__input{margin-top:var(--rt-modal-input-margin-top);font-weight:var(--rt-modal-input-font-weight);text-align:var(--rt-modal-input-text-align)}:host .rtui-modal__textarea{margin-top:var(--rt-modal-textarea-margin-top)}:host .rtui-modal__select{margin-top:var(--rt-modal-select-margin-top)}:host .mat-icon{width:auto;height:auto}:host .mdc-dialog__title:before{height:100%}:host mat-dialog-content{padding:var(--rt-modal-content-padding);color:var(--rt-modal-content-color);font-size:var(--rt-modal-content-font-size);overflow-wrap:var(--rt-modal-content-word-wrap);text-align:var(--rt-modal-content-text-align)}:host mat-dialog-content mat-form-field{width:100%}:host mat-dialog-content mat-form-field textarea{resize:none}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: 
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: RtuiModalComponent, isStandalone: true, selector: "rtui-modal", host: { properties: { "class": "this.hostClasses" }, classAttribute: "rtui-modal" }, ngImport: i0, template: "<ng-container rtBlock=\"rtui-modal\">\n    @if (data.title) {\n        <div rtElem=\"title\" mat-dialog-title>\n            @if (data.icon) {\n                <h2>\n                    <mat-icon [ngStyle]=\"data.icon.style\">\n                        {{ data.icon.value }}\n                    </mat-icon>\n                </h2>\n            }\n\n            <h1>{{ data.title }}</h1>\n        </div>\n    }\n\n    <mat-dialog-content>\n        @if (data.text) {\n            <div rtElem=\"text\" [innerHTML]=\"data.text | sanitize\"></div>\n        }\n\n        @if (data.confirmation) {\n            <div rtElem=\"confirmation\" [innerHTML]=\"data.confirmation | sanitize\"></div>\n        }\n\n        @if (data.input) {\n            <div rtElem=\"input\">{{ data.input.label }}</div>\n\n            <mat-form-field [appearance]=\"'outline'\">\n                <input matInput type=\"text\" autocomplete=\"off\" [formControl]=\"control!\" />\n            </mat-form-field>\n        }\n\n        @if (data.textArea) {\n            <mat-form-field rtElem=\"textarea\">\n                <textarea matInput [formControl]=\"control!\" [placeholder]=\"data.textArea.placeholder\"></textarea>\n            </mat-form-field>\n        }\n\n        @if (data.select) {\n            <mat-form-field rtElem=\"select\">\n                @if (data.select.label) {\n                    <mat-label>{{ data.select.label }}</mat-label>\n                }\n\n                <mat-select required [formControl]=\"selectControl!\">\n                    <mat-option>--</mat-option>\n                    @for (option of data.select.value; track option?.name ?? option) {\n                        <mat-option [value]=\"option?.value\">\n                            {{ option?.name }}\n                        </mat-option>\n                    }\n                </mat-select>\n\n                @if (data.select.hint && selectControl?.hasError('required')) {\n                    <mat-error>{{ data.select.hint }}</mat-error>\n                }\n            </mat-form-field>\n        }\n\n        @if (data?.component) {\n            <ng-container *ngComponentOutlet=\"data!.component!\" />\n        }\n    </mat-dialog-content>\n\n    <mat-dialog-actions [attr.align]=\"data.buttonsAlign\">\n        @for (button of data.buttons; track button.text) {\n            @switch (button.appearance) {\n                @case ('raised') {\n                    <button\n                        mat-flat-button\n                        type=\"button\"\n                        [class]=\"[button.className] | concatClasses\"\n                        [color]=\"button.color\"\n                        [disabled]=\"button.validateSelect && (selectControl?.invalid || control?.invalid)\"\n                        [ngStyle]=\"button.style\"\n                        (click)=\"onClose(button)\">\n                        {{ button.text }}\n                    </button>\n                }\n\n                @case ('flat') {\n                    <button\n                        mat-flat-button\n                        type=\"button\"\n                        [color]=\"button.color\"\n                        [disabled]=\"button.validateSelect && (selectControl?.invalid || control?.invalid)\"\n                        [ngStyle]=\"button.style\"\n                        (click)=\"onClose(button)\">\n                        {{ button.text }}\n                    </button>\n                }\n\n                @case ('stroked') {\n                    <button\n                        mat-stroked-button\n                        type=\"button\"\n                        [color]=\"button.color\"\n                        [disabled]=\"button.validateSelect && (selectControl?.invalid || control?.invalid)\"\n                        [ngStyle]=\"button.style\"\n                        (click)=\"onClose(button)\">\n                        {{ button.text }}\n                    </button>\n                }\n\n                @case ('fab') {\n                    <button\n                        mat-fab\n                        type=\"button\"\n                        [color]=\"button.color\"\n                        [disabled]=\"button.validateSelect && (selectControl?.invalid || control?.invalid)\"\n                        [ngStyle]=\"button.style\"\n                        (click)=\"onClose(button)\">\n                        {{ button.text }}\n                    </button>\n                }\n\n                @case ('mini-fab') {\n                    <button\n                        mat-mini-fab\n                        type=\"button\"\n                        [color]=\"button.color\"\n                        [disabled]=\"button.validateSelect && (selectControl?.invalid || control?.invalid)\"\n                        [ngStyle]=\"button.style\"\n                        (click)=\"onClose(button)\">\n                        {{ button.text }}\n                    </button>\n                }\n\n                @default {\n                    <button\n                        mat-button\n                        type=\"button\"\n                        [color]=\"button.color\"\n                        [disabled]=\"button.validateSelect && (selectControl?.invalid || control?.invalid)\"\n                        [ngStyle]=\"button.style\"\n                        (click)=\"onClose(button)\">\n                        {{ button.text }}\n                    </button>\n                }\n            }\n        }\n    </mat-dialog-actions>\n</ng-container>\n", styles: ["@charset \"UTF-8\";:host{--rt-modal-title-font-size: 1.25rem;--rt-modal-title-color: var(--rt-text-base-primary);--rt-modal-title-font-weight: 400;--rt-modal-content-padding: 1rem 1.5rem;--rt-modal-content-color: var(--rt-text-base-soft);--rt-modal-content-font-size: .8rem;--rt-modal-content-text-align: center;--rt-modal-content-word-wrap: break-word;--rt-modal-input-margin-top: 1.5rem;--rt-modal-input-font-weight: 600;--rt-modal-input-text-align: left;--rt-modal-textarea-margin-top: 1.5rem;--rt-modal-select-margin-top: 1.5rem;--rt-modal-text-highlited-font-weight: 600;--rt-modal-text-highlited-color: var(--rt-text-base-strong);--rt-modal-text-warn-display: inline;--rt-modal-text-warn-font-size: 1rem;--rt-modal-text-warn-font-weight: 600;--rt-modal-text-warn-color: var(--rt-text-accent-danger)}:host ::ng-deep .--highlighted{display:inline;color:var(--rt-modal-text-highlited-color);font-weight:var(--rt-modal-text-highlited-font-weight)}:host ::ng-deep .--warn{display:inline;color:var(--rt-modal-text-warn-color);font-size:var(--rt-modal-text-warn-font-size);font-weight:var(--rt-modal-text-warn-font-weight)}:host .rtui-modal__title h1{color:var(--rt-modal-title-color);font-size:var(--rt-modal-title-font-size);font-weight:var(--rt-modal-title-font-weight)}:host .rtui-modal__title h1,:host .rtui-modal__title h2{text-align:center}:host .rtui-modal__input{margin-top:var(--rt-modal-input-margin-top);font-weight:var(--rt-modal-input-font-weight);text-align:var(--rt-modal-input-text-align)}:host .rtui-modal__textarea{margin-top:var(--rt-modal-textarea-margin-top)}:host .rtui-modal__select{margin-top:var(--rt-modal-select-margin-top)}:host .mat-icon{width:auto;height:auto}:host .mdc-dialog__title:before{height:100%}:host mat-dialog-content{padding:var(--rt-modal-content-padding);color:var(--rt-modal-content-color);font-size:var(--rt-modal-content-font-size);overflow-wrap:var(--rt-modal-content-word-wrap);text-align:var(--rt-modal-content-text-align)}:host mat-dialog-content mat-form-field{width:100%}:host mat-dialog-content mat-form-field textarea{resize:none}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: 
                 // material
                 MatDialogModule }, { kind: "directive", type: i2.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i2.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.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: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i4.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i4.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i5.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i5.MatMiniFabButton, selector: "button[mat-mini-fab], a[mat-mini-fab], button[matMiniFab], a[matMiniFab]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i5.MatFabButton, selector: "button[mat-fab], a[mat-fab], button[matFab], a[matFab]", inputs: ["extended"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: 
                 // BEM
-                BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }, { kind: "pipe", type: SanitizePipe, name: "sanitize" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+                BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }, { kind: "pipe", type: SanitizePipe, name: "sanitize" }, { kind: "pipe", type: ConcatClassesPipe, name: "concatClasses" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiModalComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rtui-modal', changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'rtui-modal' }, imports: [
+            args: [{ selector: 'rtui-modal', changeDetection: ChangeDetectionStrategy.OnPush, host: { class: BEM_BLOCK$z }, imports: [
                         NgStyle,
-                        NgClass,
                         NgComponentOutlet,
                         ReactiveFormsModule,
                         SanitizePipe,
@@ -104,7 +103,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                         // BEM
                         BlockDirective,
                         ElemDirective,
-                    ], template: "<ng-container rtBlock=\"rtui-modal\">\n    @if (data.title) {\n        <div rtElem=\"title\" mat-dialog-title>\n            @if (data.icon) {\n                <h2>\n                    <mat-icon [ngStyle]=\"data.icon.style\">\n                        {{ data.icon.value }}\n                    </mat-icon>\n                </h2>\n            }\n\n            <h1>{{ data.title }}</h1>\n        </div>\n    }\n\n    <mat-dialog-content>\n        @if (data.text) {\n            <div rtElem=\"text\" [innerHTML]=\"data.text | sanitize\"></div>\n        }\n\n        @if (data.confirmation) {\n            <div rtElem=\"confirmation\" [innerHTML]=\"data.confirmation | sanitize\"></div>\n        }\n\n        @if (data.input) {\n            <div rtElem=\"input\">{{ data.input.label }}</div>\n\n            <mat-form-field [appearance]=\"'outline'\">\n                <input matInput type=\"text\" autocomplete=\"off\" [formControl]=\"control!\" />\n            </mat-form-field>\n        }\n\n        @if (data.textArea) {\n            <mat-form-field rtElem=\"textarea\">\n                <textarea matInput [formControl]=\"control!\" [placeholder]=\"data.textArea.placeholder\"></textarea>\n            </mat-form-field>\n        }\n\n        @if (data.select) {\n            <mat-form-field rtElem=\"select\">\n                @if (data.select.label) {\n                    <mat-label>{{ data.select.label }}</mat-label>\n                }\n\n                <mat-select required [formControl]=\"selectControl!\">\n                    <mat-option>--</mat-option>\n                    @for (option of data.select.value; track option?.name ?? option) {\n                        <mat-option [value]=\"option?.value\">\n                            {{ option?.name }}\n                        </mat-option>\n                    }\n                </mat-select>\n\n                @if (data.select.hint && selectControl?.hasError('required')) {\n                    <mat-error>{{ data.select.hint }}</mat-error>\n                }\n            </mat-form-field>\n        }\n\n        @if (data?.component) {\n            <ng-container *ngComponentOutlet=\"data!.component!\" />\n        }\n    </mat-dialog-content>\n\n    <mat-dialog-actions [attr.align]=\"data.buttonsAlign\">\n        @for (button of data.buttons; track button.text) {\n            @switch (button.appearance) {\n                @case ('raised') {\n                    <button\n                        mat-flat-button\n                        type=\"button\"\n                        [ngClass]=\"button.className\"\n                        [color]=\"button.color\"\n                        [disabled]=\"button.validateSelect && (selectControl?.invalid || control?.invalid)\"\n                        [ngStyle]=\"button.style\"\n                        (click)=\"onClose(button)\">\n                        {{ button.text }}\n                    </button>\n                }\n\n                @case ('flat') {\n                    <button\n                        mat-flat-button\n                        type=\"button\"\n                        [color]=\"button.color\"\n                        [disabled]=\"button.validateSelect && (selectControl?.invalid || control?.invalid)\"\n                        [ngStyle]=\"button.style\"\n                        (click)=\"onClose(button)\">\n                        {{ button.text }}\n                    </button>\n                }\n\n                @case ('stroked') {\n                    <button\n                        mat-stroked-button\n                        type=\"button\"\n                        [color]=\"button.color\"\n                        [disabled]=\"button.validateSelect && (selectControl?.invalid || control?.invalid)\"\n                        [ngStyle]=\"button.style\"\n                        (click)=\"onClose(button)\">\n                        {{ button.text }}\n                    </button>\n                }\n\n                @case ('fab') {\n                    <button\n                        mat-fab\n                        type=\"button\"\n                        [color]=\"button.color\"\n                        [disabled]=\"button.validateSelect && (selectControl?.invalid || control?.invalid)\"\n                        [ngStyle]=\"button.style\"\n                        (click)=\"onClose(button)\">\n                        {{ button.text }}\n                    </button>\n                }\n\n                @case ('mini-fab') {\n                    <button\n                        mat-mini-fab\n                        type=\"button\"\n                        [color]=\"button.color\"\n                        [disabled]=\"button.validateSelect && (selectControl?.invalid || control?.invalid)\"\n                        [ngStyle]=\"button.style\"\n                        (click)=\"onClose(button)\">\n                        {{ button.text }}\n                    </button>\n                }\n\n                @default {\n                    <button\n                        mat-button\n                        type=\"button\"\n                        [color]=\"button.color\"\n                        [disabled]=\"button.validateSelect && (selectControl?.invalid || control?.invalid)\"\n                        [ngStyle]=\"button.style\"\n                        (click)=\"onClose(button)\">\n                        {{ button.text }}\n                    </button>\n                }\n            }\n        }\n    </mat-dialog-actions>\n</ng-container>\n", styles: ["@charset \"UTF-8\";:host{--rt-modal-title-font-size: 1.25rem;--rt-modal-title-color: var(--rt-text-base-primary);--rt-modal-title-font-weight: 400;--rt-modal-content-padding: 1rem 1.5rem;--rt-modal-content-color: var(--rt-text-base-soft);--rt-modal-content-font-size: .8rem;--rt-modal-content-text-align: center;--rt-modal-content-word-wrap: break-word;--rt-modal-input-margin-top: 1.5rem;--rt-modal-input-font-weight: 600;--rt-modal-input-text-align: left;--rt-modal-textarea-margin-top: 1.5rem;--rt-modal-select-margin-top: 1.5rem;--rt-modal-text-highlited-font-weight: 600;--rt-modal-text-highlited-color: var(--rt-text-base-strong);--rt-modal-text-warn-display: inline;--rt-modal-text-warn-font-size: 1rem;--rt-modal-text-warn-font-weight: 600;--rt-modal-text-warn-color: var(--rt-text-accent-danger)}:host ::ng-deep .--highlighted{display:inline;color:var(--rt-modal-text-highlited-color);font-weight:var(--rt-modal-text-highlited-font-weight)}:host ::ng-deep .--warn{display:inline;color:var(--rt-modal-text-warn-color);font-size:var(--rt-modal-text-warn-font-size);font-weight:var(--rt-modal-text-warn-font-weight)}:host .rtui-modal__title h1{color:var(--rt-modal-title-color);font-size:var(--rt-modal-title-font-size);font-weight:var(--rt-modal-title-font-weight)}:host .rtui-modal__title h1,:host .rtui-modal__title h2{text-align:center}:host .rtui-modal__input{margin-top:var(--rt-modal-input-margin-top);font-weight:var(--rt-modal-input-font-weight);text-align:var(--rt-modal-input-text-align)}:host .rtui-modal__textarea{margin-top:var(--rt-modal-textarea-margin-top)}:host .rtui-modal__select{margin-top:var(--rt-modal-select-margin-top)}:host .mat-icon{width:auto;height:auto}:host .mdc-dialog__title:before{height:100%}:host mat-dialog-content{padding:var(--rt-modal-content-padding);color:var(--rt-modal-content-color);font-size:var(--rt-modal-content-font-size);overflow-wrap:var(--rt-modal-content-word-wrap);text-align:var(--rt-modal-content-text-align)}:host mat-dialog-content mat-form-field{width:100%}:host mat-dialog-content mat-form-field textarea{resize:none}\n"] }]
+                        ConcatClassesPipe,
+                    ], template: "<ng-container rtBlock=\"rtui-modal\">\n    @if (data.title) {\n        <div rtElem=\"title\" mat-dialog-title>\n            @if (data.icon) {\n                <h2>\n                    <mat-icon [ngStyle]=\"data.icon.style\">\n                        {{ data.icon.value }}\n                    </mat-icon>\n                </h2>\n            }\n\n            <h1>{{ data.title }}</h1>\n        </div>\n    }\n\n    <mat-dialog-content>\n        @if (data.text) {\n            <div rtElem=\"text\" [innerHTML]=\"data.text | sanitize\"></div>\n        }\n\n        @if (data.confirmation) {\n            <div rtElem=\"confirmation\" [innerHTML]=\"data.confirmation | sanitize\"></div>\n        }\n\n        @if (data.input) {\n            <div rtElem=\"input\">{{ data.input.label }}</div>\n\n            <mat-form-field [appearance]=\"'outline'\">\n                <input matInput type=\"text\" autocomplete=\"off\" [formControl]=\"control!\" />\n            </mat-form-field>\n        }\n\n        @if (data.textArea) {\n            <mat-form-field rtElem=\"textarea\">\n                <textarea matInput [formControl]=\"control!\" [placeholder]=\"data.textArea.placeholder\"></textarea>\n            </mat-form-field>\n        }\n\n        @if (data.select) {\n            <mat-form-field rtElem=\"select\">\n                @if (data.select.label) {\n                    <mat-label>{{ data.select.label }}</mat-label>\n                }\n\n                <mat-select required [formControl]=\"selectControl!\">\n                    <mat-option>--</mat-option>\n                    @for (option of data.select.value; track option?.name ?? option) {\n                        <mat-option [value]=\"option?.value\">\n                            {{ option?.name }}\n                        </mat-option>\n                    }\n                </mat-select>\n\n                @if (data.select.hint && selectControl?.hasError('required')) {\n                    <mat-error>{{ data.select.hint }}</mat-error>\n                }\n            </mat-form-field>\n        }\n\n        @if (data?.component) {\n            <ng-container *ngComponentOutlet=\"data!.component!\" />\n        }\n    </mat-dialog-content>\n\n    <mat-dialog-actions [attr.align]=\"data.buttonsAlign\">\n        @for (button of data.buttons; track button.text) {\n            @switch (button.appearance) {\n                @case ('raised') {\n                    <button\n                        mat-flat-button\n                        type=\"button\"\n                        [class]=\"[button.className] | concatClasses\"\n                        [color]=\"button.color\"\n                        [disabled]=\"button.validateSelect && (selectControl?.invalid || control?.invalid)\"\n                        [ngStyle]=\"button.style\"\n                        (click)=\"onClose(button)\">\n                        {{ button.text }}\n                    </button>\n                }\n\n                @case ('flat') {\n                    <button\n                        mat-flat-button\n                        type=\"button\"\n                        [color]=\"button.color\"\n                        [disabled]=\"button.validateSelect && (selectControl?.invalid || control?.invalid)\"\n                        [ngStyle]=\"button.style\"\n                        (click)=\"onClose(button)\">\n                        {{ button.text }}\n                    </button>\n                }\n\n                @case ('stroked') {\n                    <button\n                        mat-stroked-button\n                        type=\"button\"\n                        [color]=\"button.color\"\n                        [disabled]=\"button.validateSelect && (selectControl?.invalid || control?.invalid)\"\n                        [ngStyle]=\"button.style\"\n                        (click)=\"onClose(button)\">\n                        {{ button.text }}\n                    </button>\n                }\n\n                @case ('fab') {\n                    <button\n                        mat-fab\n                        type=\"button\"\n                        [color]=\"button.color\"\n                        [disabled]=\"button.validateSelect && (selectControl?.invalid || control?.invalid)\"\n                        [ngStyle]=\"button.style\"\n                        (click)=\"onClose(button)\">\n                        {{ button.text }}\n                    </button>\n                }\n\n                @case ('mini-fab') {\n                    <button\n                        mat-mini-fab\n                        type=\"button\"\n                        [color]=\"button.color\"\n                        [disabled]=\"button.validateSelect && (selectControl?.invalid || control?.invalid)\"\n                        [ngStyle]=\"button.style\"\n                        (click)=\"onClose(button)\">\n                        {{ button.text }}\n                    </button>\n                }\n\n                @default {\n                    <button\n                        mat-button\n                        type=\"button\"\n                        [color]=\"button.color\"\n                        [disabled]=\"button.validateSelect && (selectControl?.invalid || control?.invalid)\"\n                        [ngStyle]=\"button.style\"\n                        (click)=\"onClose(button)\">\n                        {{ button.text }}\n                    </button>\n                }\n            }\n        }\n    </mat-dialog-actions>\n</ng-container>\n", styles: ["@charset \"UTF-8\";:host{--rt-modal-title-font-size: 1.25rem;--rt-modal-title-color: var(--rt-text-base-primary);--rt-modal-title-font-weight: 400;--rt-modal-content-padding: 1rem 1.5rem;--rt-modal-content-color: var(--rt-text-base-soft);--rt-modal-content-font-size: .8rem;--rt-modal-content-text-align: center;--rt-modal-content-word-wrap: break-word;--rt-modal-input-margin-top: 1.5rem;--rt-modal-input-font-weight: 600;--rt-modal-input-text-align: left;--rt-modal-textarea-margin-top: 1.5rem;--rt-modal-select-margin-top: 1.5rem;--rt-modal-text-highlited-font-weight: 600;--rt-modal-text-highlited-color: var(--rt-text-base-strong);--rt-modal-text-warn-display: inline;--rt-modal-text-warn-font-size: 1rem;--rt-modal-text-warn-font-weight: 600;--rt-modal-text-warn-color: var(--rt-text-accent-danger)}:host ::ng-deep .--highlighted{display:inline;color:var(--rt-modal-text-highlited-color);font-weight:var(--rt-modal-text-highlited-font-weight)}:host ::ng-deep .--warn{display:inline;color:var(--rt-modal-text-warn-color);font-size:var(--rt-modal-text-warn-font-size);font-weight:var(--rt-modal-text-warn-font-weight)}:host .rtui-modal__title h1{color:var(--rt-modal-title-color);font-size:var(--rt-modal-title-font-size);font-weight:var(--rt-modal-title-font-weight)}:host .rtui-modal__title h1,:host .rtui-modal__title h2{text-align:center}:host .rtui-modal__input{margin-top:var(--rt-modal-input-margin-top);font-weight:var(--rt-modal-input-font-weight);text-align:var(--rt-modal-input-text-align)}:host .rtui-modal__textarea{margin-top:var(--rt-modal-textarea-margin-top)}:host .rtui-modal__select{margin-top:var(--rt-modal-select-margin-top)}:host .mat-icon{width:auto;height:auto}:host .mdc-dialog__title:before{height:100%}:host mat-dialog-content{padding:var(--rt-modal-content-padding);color:var(--rt-modal-content-color);font-size:var(--rt-modal-content-font-size);overflow-wrap:var(--rt-modal-content-word-wrap);text-align:var(--rt-modal-content-text-align)}:host mat-dialog-content mat-form-field{width:100%}:host mat-dialog-content mat-form-field textarea{resize:none}\n"] }]
         }], propDecorators: { hostClasses: [{
                 type: HostBinding,
                 args: ['class']
@@ -188,6 +188,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                     selector: '[rtuiScrollableFooter]',
                 }]
         }] });
+const BEM_BLOCK$y = 'rtui-scrollable';
 class RtuiScrollableContainerComponent {
     constructor() {
         this.headerTpl = contentChild(RtuiScrollableContainerHeaderDirective, { ...(ngDevMode ? { debugName: "headerTpl" } : /* istanbul ignore next */ {}), read: TemplateRef });
@@ -195,11 +196,11 @@ class RtuiScrollableContainerComponent {
         this.footerTpl = contentChild(RtuiScrollableContainerFooterDirective, { ...(ngDevMode ? { debugName: "footerTpl" } : /* istanbul ignore next */ {}), read: TemplateRef });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiScrollableContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: RtuiScrollableContainerComponent, isStandalone: true, selector: "rtui-scrollable", queries: [{ propertyName: "headerTpl", first: true, predicate: RtuiScrollableContainerHeaderDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "contentTpl", first: true, predicate: RtuiScrollableContainerContentDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "footerTpl", first: true, predicate: RtuiScrollableContainerFooterDirective, descendants: true, read: TemplateRef, isSignal: true }], ngImport: i0, template: "<ng-container rtBlock=\"rtui-scrollable\">\n    @if (headerTpl()) {\n        <div rtElem=\"header\">\n            <ng-container *ngTemplateOutlet=\"headerTpl() ?? null\" />\n        </div>\n    }\n\n    @if (contentTpl()) {\n        <div rtElem=\"content\">\n            <ng-container *ngTemplateOutlet=\"contentTpl() ?? null\" />\n        </div>\n    }\n\n    @if (footerTpl()) {\n        <div rtElem=\"footer\">\n            <ng-container *ngTemplateOutlet=\"footerTpl() ?? null\" />\n        </div>\n    }\n</ng-container>\n", styles: ["@charset \"UTF-8\";:host{display:var(--rt-scrollable-host-display);width:var(--rt-scrollable-host-width);height:var(--rt-scrollable-host-height);flex-direction:var(--rt-scrollable-host-flex-direction);background-color:var(--rt-scrollable-host-background-color);--rt-scrollable-host-height: 100%;--rt-scrollable-host-width: 100%;--rt-scrollable-host-display: flex;--rt-scrollable-host-flex-direction: column;--rt-scrollable-host-background-color: var(--rt-bg-base-base);--rt-scrollable-header-padding: .5rem 1rem;--rt-scrollable-header-background-color: var(--rt-bg-base-base);--rt-scrollable-content-display: flex;--rt-scrollable-content-flex-direction: column;--rt-scrollable-content-flex-grow: 1;--rt-scrollable-content-padding: 1rem;--rt-scrollable-content-background-color: var(--rt-bg-base-base);--rt-scrollable-footer-padding: 1rem;--rt-scrollable-footer-background-color: var(--rt-bg-base-base)}:host .rtui-scrollable__header{padding:var(--rt-scrollable-header-padding);background-color:var(--rt-scrollable-header-background-color)}:host .rtui-scrollable__content{display:var(--rt-scrollable-content-display);overflow:auto;flex-direction:var(--rt-scrollable-content-flex-direction);flex-grow:var(--rt-scrollable-content-flex-grow);padding:var(--rt-scrollable-content-padding);background-color:var(--rt-scrollable-content-background-color)}:host .rtui-scrollable__footer{padding:var(--rt-scrollable-footer-padding);background-color:var(--rt-scrollable-footer-background-color)}\n"], dependencies: [{ kind: "directive", type: BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: RtuiScrollableContainerComponent, isStandalone: true, selector: "rtui-scrollable", host: { classAttribute: "rtui-scrollable" }, queries: [{ propertyName: "headerTpl", first: true, predicate: RtuiScrollableContainerHeaderDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "contentTpl", first: true, predicate: RtuiScrollableContainerContentDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "footerTpl", first: true, predicate: RtuiScrollableContainerFooterDirective, descendants: true, read: TemplateRef, isSignal: true }], ngImport: i0, template: "<ng-container rtBlock=\"rtui-scrollable\">\n    @if (headerTpl()) {\n        <div rtElem=\"header\">\n            <ng-container *ngTemplateOutlet=\"headerTpl() ?? null\" />\n        </div>\n    }\n\n    @if (contentTpl()) {\n        <div rtElem=\"content\">\n            <ng-container *ngTemplateOutlet=\"contentTpl() ?? null\" />\n        </div>\n    }\n\n    @if (footerTpl()) {\n        <div rtElem=\"footer\">\n            <ng-container *ngTemplateOutlet=\"footerTpl() ?? null\" />\n        </div>\n    }\n</ng-container>\n", styles: ["@charset \"UTF-8\";:host{display:var(--rt-scrollable-host-display);width:var(--rt-scrollable-host-width);height:var(--rt-scrollable-host-height);flex-direction:var(--rt-scrollable-host-flex-direction);background-color:var(--rt-scrollable-host-background-color);--rt-scrollable-host-height: 100%;--rt-scrollable-host-width: 100%;--rt-scrollable-host-display: flex;--rt-scrollable-host-flex-direction: column;--rt-scrollable-host-background-color: var(--rt-bg-base-base);--rt-scrollable-header-padding: .5rem 1rem;--rt-scrollable-header-background-color: var(--rt-bg-base-base);--rt-scrollable-content-display: flex;--rt-scrollable-content-flex-direction: column;--rt-scrollable-content-flex-grow: 1;--rt-scrollable-content-padding: 1rem;--rt-scrollable-content-background-color: var(--rt-bg-base-base);--rt-scrollable-footer-padding: 1rem;--rt-scrollable-footer-background-color: var(--rt-bg-base-base)}:host .rtui-scrollable__header{padding:var(--rt-scrollable-header-padding);background-color:var(--rt-scrollable-header-background-color)}:host .rtui-scrollable__content{display:var(--rt-scrollable-content-display);overflow:auto;flex-direction:var(--rt-scrollable-content-flex-direction);flex-grow:var(--rt-scrollable-content-flex-grow);padding:var(--rt-scrollable-content-padding);background-color:var(--rt-scrollable-content-background-color)}:host .rtui-scrollable__footer{padding:var(--rt-scrollable-footer-padding);background-color:var(--rt-scrollable-footer-background-color)}\n"], dependencies: [{ kind: "directive", type: BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiScrollableContainerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rtui-scrollable', changeDetection: ChangeDetectionStrategy.OnPush, imports: [BlockDirective, ElemDirective, NgTemplateOutlet], template: "<ng-container rtBlock=\"rtui-scrollable\">\n    @if (headerTpl()) {\n        <div rtElem=\"header\">\n            <ng-container *ngTemplateOutlet=\"headerTpl() ?? null\" />\n        </div>\n    }\n\n    @if (contentTpl()) {\n        <div rtElem=\"content\">\n            <ng-container *ngTemplateOutlet=\"contentTpl() ?? null\" />\n        </div>\n    }\n\n    @if (footerTpl()) {\n        <div rtElem=\"footer\">\n            <ng-container *ngTemplateOutlet=\"footerTpl() ?? null\" />\n        </div>\n    }\n</ng-container>\n", styles: ["@charset \"UTF-8\";:host{display:var(--rt-scrollable-host-display);width:var(--rt-scrollable-host-width);height:var(--rt-scrollable-host-height);flex-direction:var(--rt-scrollable-host-flex-direction);background-color:var(--rt-scrollable-host-background-color);--rt-scrollable-host-height: 100%;--rt-scrollable-host-width: 100%;--rt-scrollable-host-display: flex;--rt-scrollable-host-flex-direction: column;--rt-scrollable-host-background-color: var(--rt-bg-base-base);--rt-scrollable-header-padding: .5rem 1rem;--rt-scrollable-header-background-color: var(--rt-bg-base-base);--rt-scrollable-content-display: flex;--rt-scrollable-content-flex-direction: column;--rt-scrollable-content-flex-grow: 1;--rt-scrollable-content-padding: 1rem;--rt-scrollable-content-background-color: var(--rt-bg-base-base);--rt-scrollable-footer-padding: 1rem;--rt-scrollable-footer-background-color: var(--rt-bg-base-base)}:host .rtui-scrollable__header{padding:var(--rt-scrollable-header-padding);background-color:var(--rt-scrollable-header-background-color)}:host .rtui-scrollable__content{display:var(--rt-scrollable-content-display);overflow:auto;flex-direction:var(--rt-scrollable-content-flex-direction);flex-grow:var(--rt-scrollable-content-flex-grow);padding:var(--rt-scrollable-content-padding);background-color:var(--rt-scrollable-content-background-color)}:host .rtui-scrollable__footer{padding:var(--rt-scrollable-footer-padding);background-color:var(--rt-scrollable-footer-background-color)}\n"] }]
+            args: [{ selector: 'rtui-scrollable', host: { class: BEM_BLOCK$y }, changeDetection: ChangeDetectionStrategy.OnPush, imports: [BlockDirective, ElemDirective, NgTemplateOutlet], template: "<ng-container rtBlock=\"rtui-scrollable\">\n    @if (headerTpl()) {\n        <div rtElem=\"header\">\n            <ng-container *ngTemplateOutlet=\"headerTpl() ?? null\" />\n        </div>\n    }\n\n    @if (contentTpl()) {\n        <div rtElem=\"content\">\n            <ng-container *ngTemplateOutlet=\"contentTpl() ?? null\" />\n        </div>\n    }\n\n    @if (footerTpl()) {\n        <div rtElem=\"footer\">\n            <ng-container *ngTemplateOutlet=\"footerTpl() ?? null\" />\n        </div>\n    }\n</ng-container>\n", styles: ["@charset \"UTF-8\";:host{display:var(--rt-scrollable-host-display);width:var(--rt-scrollable-host-width);height:var(--rt-scrollable-host-height);flex-direction:var(--rt-scrollable-host-flex-direction);background-color:var(--rt-scrollable-host-background-color);--rt-scrollable-host-height: 100%;--rt-scrollable-host-width: 100%;--rt-scrollable-host-display: flex;--rt-scrollable-host-flex-direction: column;--rt-scrollable-host-background-color: var(--rt-bg-base-base);--rt-scrollable-header-padding: .5rem 1rem;--rt-scrollable-header-background-color: var(--rt-bg-base-base);--rt-scrollable-content-display: flex;--rt-scrollable-content-flex-direction: column;--rt-scrollable-content-flex-grow: 1;--rt-scrollable-content-padding: 1rem;--rt-scrollable-content-background-color: var(--rt-bg-base-base);--rt-scrollable-footer-padding: 1rem;--rt-scrollable-footer-background-color: var(--rt-bg-base-base)}:host .rtui-scrollable__header{padding:var(--rt-scrollable-header-padding);background-color:var(--rt-scrollable-header-background-color)}:host .rtui-scrollable__content{display:var(--rt-scrollable-content-display);overflow:auto;flex-direction:var(--rt-scrollable-content-flex-direction);flex-grow:var(--rt-scrollable-content-flex-grow);padding:var(--rt-scrollable-content-padding);background-color:var(--rt-scrollable-content-background-color)}:host .rtui-scrollable__footer{padding:var(--rt-scrollable-footer-padding);background-color:var(--rt-scrollable-footer-background-color)}\n"] }]
         }], propDecorators: { headerTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => RtuiScrollableContainerHeaderDirective), { ...{
                             read: TemplateRef,
                         }, isSignal: true }] }], contentTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => RtuiScrollableContainerContentDirective), { ...{
@@ -259,12 +260,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                 }]
         }], ctorParameters: () => [], propDecorators: { element: [{ type: i0.Input, args: [{ isSignal: true, alias: "rtHideTooltipDirective", required: true }] }], isTooltipShown: [{ type: i0.Input, args: [{ isSignal: true, alias: "isTooltipShown", required: true }] }] } });
 
+const BEM_BLOCK$x = 'rtui-side-menu-sub-item';
 class RtuiSideMenuSubItemComponent {
     constructor() {
+        this.#breakpoints = inject(BreakpointService);
+        /** Экран узкий: значение входа, если приложение его дало, иначе замер кита. */
+        this.narrow = computed(() => this.isMobile() ?? !!this.#breakpoints.isMobile(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "narrow" }] : /* istanbul ignore next */ []));
         this.menuRef = inject(RtuiSideMenuComponent);
         this.item = input.required(/* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "item" }] : /* istanbul ignore next */ []));
-        this.isMobile = input(false, { ...(ngDevMode ? { debugName: "isMobile" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /**
+         * Признак узкого экрана.
+         *
+         * @deprecated Кит определяет его сам — `BreakpointService` из `@rt-tools/core`. Вход
+         * оставлен ради приложений, которые уже его передают, и уйдёт в следующем крупном выпуске.
+         */
+        this.isMobile = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isMobile" }] : /* istanbul ignore next */ []));
         this.isSubMenuXScrollEnabled = input(false, { ...(ngDevMode ? { debugName: "isSubMenuXScrollEnabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         this.isSubMenuIconsOutlined = input(false, { ...(ngDevMode ? { debugName: "isSubMenuIconsOutlined" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         this.isSubMenuButtonIconsOutlined = input(false, { ...(ngDevMode ? { debugName: "isSubMenuButtonIconsOutlined" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
@@ -272,6 +285,7 @@ class RtuiSideMenuSubItemComponent {
         this.clickSubMenuAction = output();
         this.clickSubMenuAdditionalAction = output();
     }
+    #breakpoints;
     onClickSubMenu(item, event) {
         this.clickSubMenuAction.emit({ item, event });
     }
@@ -279,20 +293,21 @@ class RtuiSideMenuSubItemComponent {
         this.clickSubMenuAdditionalAction.emit({ data, event });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiSideMenuSubItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: RtuiSideMenuSubItemComponent, isStandalone: true, selector: "rtui-side-menu-sub-item", inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null }, isMobile: { classPropertyName: "isMobile", publicName: "isMobile", isSignal: true, isRequired: false, transformFunction: null }, isSubMenuXScrollEnabled: { classPropertyName: "isSubMenuXScrollEnabled", publicName: "isSubMenuXScrollEnabled", isSignal: true, isRequired: false, transformFunction: null }, isSubMenuIconsOutlined: { classPropertyName: "isSubMenuIconsOutlined", publicName: "isSubMenuIconsOutlined", isSignal: true, isRequired: false, transformFunction: null }, isSubMenuButtonIconsOutlined: { classPropertyName: "isSubMenuButtonIconsOutlined", publicName: "isSubMenuButtonIconsOutlined", isSignal: true, isRequired: false, transformFunction: null }, isSubMenuTooltipsShown: { classPropertyName: "isSubMenuTooltipsShown", publicName: "isSubMenuTooltipsShown", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clickSubMenuAction: "clickSubMenuAction", clickSubMenuAdditionalAction: "clickSubMenuAdditionalAction" }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: RtuiSideMenuSubItemComponent, isStandalone: true, selector: "rtui-side-menu-sub-item", inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null }, isMobile: { classPropertyName: "isMobile", publicName: "isMobile", isSignal: true, isRequired: false, transformFunction: null }, isSubMenuXScrollEnabled: { classPropertyName: "isSubMenuXScrollEnabled", publicName: "isSubMenuXScrollEnabled", isSignal: true, isRequired: false, transformFunction: null }, isSubMenuIconsOutlined: { classPropertyName: "isSubMenuIconsOutlined", publicName: "isSubMenuIconsOutlined", isSignal: true, isRequired: false, transformFunction: null }, isSubMenuButtonIconsOutlined: { classPropertyName: "isSubMenuButtonIconsOutlined", publicName: "isSubMenuButtonIconsOutlined", isSignal: true, isRequired: false, transformFunction: null }, isSubMenuTooltipsShown: { classPropertyName: "isSubMenuTooltipsShown", publicName: "isSubMenuTooltipsShown", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clickSubMenuAction: "clickSubMenuAction", clickSubMenuAdditionalAction: "clickSubMenuAdditionalAction" }, host: { classAttribute: "rtui-side-menu-sub-item" }, providers: [
+            BreakpointService,
             {
                 provide: MAT_TOOLTIP_DEFAULT_OPTIONS,
                 useValue: {
                     disableTooltipInteractivity: true,
                 },
             },
-        ], ngImport: i0, template: "@if (item()) {\n    <ng-container *ngTemplateOutlet=\"listElemTpl; context: { $implicit: item() }\" />\n}\n\n<ng-template #listElemTpl let-item>\n    @if (item?.link) {\n        <mat-list-item\n            rtBlock=\"rtui-side-menu-sub-item\"\n            [rtMod]=\"{ fixed: isSubMenuXScrollEnabled() }\"\n            [id]=\"item.id\"\n            [activated]=\"menuRef.activeMenuIds().includes(item.id)\"\n            (click)=\"onClickSubMenu(item, $event)\">\n            @if (item?.icon) {\n                <mat-icon matListItemIcon rtElem=\"icon\" [rtIconOutlined]=\"isSubMenuIconsOutlined()\">{{ item.icon }}</mat-icon>\n            }\n\n            @if (item?.name) {\n                <div rtBlock=\"rtui-side-menu-sub-item-title\">\n                    <div\n                        #titleTpl\n                        rtElem=\"text\"\n                        matTooltipPosition=\"above\"\n                        [matTooltip]=\"item.name\"\n                        [matTooltipDisabled]=\"!isSubMenuTooltipsShown() || isMobile()\"\n                        [rtHideTooltipDirective]=\"titleTpl\"\n                        [isTooltipShown]=\"isSubMenuTooltipsShown() && !isMobile()\">\n                        {{ item.name }}\n                    </div>\n\n                    @if (item?.iconButton?.icon) {\n                        <div rtBlock=\"rtui-side-menu-sub-item-title-button\">\n                            <mat-icon\n                                rtElem=\"icon\"\n                                [rtIconOutlined]=\"isSubMenuButtonIconsOutlined()\"\n                                (click)=\"onClickSubMenuAdditional(item.iconButton?.data, $event); $event.stopPropagation()\">\n                                {{ item.iconButton.icon }}\n                            </mat-icon>\n                        </div>\n                    }\n                </div>\n            }\n        </mat-list-item>\n    } @else if (item?.submenu?.length) {\n        <mat-expansion-panel\n            #panel\n            rtBlock=\"rtui-side-menu-expand-sub-item\"\n            [rtMod]=\"{ fixed: isSubMenuXScrollEnabled() }\"\n            [expanded]=\"menuRef.activeMenuIds().includes(item.id)\">\n            <mat-expansion-panel-header\n                rtBlock=\"rtui-side-menu-expand-sub-item-header\"\n                [rtMod]=\"{ activated: menuRef.activeMenuIds().includes(item.id) }\">\n                @if (item?.icon) {\n                    <mat-icon matListItemIcon rtElem=\"icon\" [rtIconOutlined]=\"isSubMenuIconsOutlined()\">{{ item.icon }}</mat-icon>\n                }\n\n                @if (item?.name) {\n                    <div\n                        #headerTitleTpl\n                        matListItemTitle\n                        rtElem=\"title\"\n                        matTooltipPosition=\"above\"\n                        [matTooltip]=\"item.name\"\n                        [matTooltipDisabled]=\"!isSubMenuTooltipsShown() || isMobile()\"\n                        [rtHideTooltipDirective]=\"headerTitleTpl\"\n                        [isTooltipShown]=\"isSubMenuTooltipsShown() && !isMobile()\">\n                        {{ item.name }}\n                    </div>\n                }\n            </mat-expansion-panel-header>\n\n            @if (panel?.expanded) {\n                <mat-nav-list>\n                    @for (item of item?.submenu; track i; let i = $index) {\n                        <ng-container *ngTemplateOutlet=\"listElemTpl; context: { $implicit: item }\" />\n                    }\n                </mat-nav-list>\n            }\n        </mat-expansion-panel>\n    }\n</ng-template>\n", styles: [":host::ng-deep .mat-expansion-indicator{padding:0 var(--rt-spacing-24)}:host::ng-deep .mat-expansion-panel-body{padding:0 0 0 var(--rt-spacing-16)}:host::ng-deep{--mat-expansion-container-background-color: transparent;--mat-expansion-header-expanded-state-height: var(--mat-expansion-header-collapsed-state-height)}:host .rtui-side-menu-sub-item{max-width:var(--rt-side-menu-sub-menu-item-width)}:host .rtui-side-menu-sub-item--fixed{min-width:var(--rt-side-menu-sub-menu-item-width)}:host .rtui-side-menu-sub-item .rtui-side-menu-sub-item-title{display:flex;align-items:center;justify-content:space-between}:host .rtui-side-menu-sub-item .rtui-side-menu-sub-item-title__text{overflow:hidden;font-size:var(--rt-side-menu-sub-menu-item-title-font-size);text-overflow:ellipsis;white-space:nowrap}:host .rtui-side-menu-sub-item .rtui-side-menu-sub-item-title .rtui-side-menu-sub-item-title-button{display:flex;align-items:center;justify-content:center;padding:var(--rt-spacing-2);border:1.5px solid transparent;border-radius:var(--rt-radius-full);margin-left:var(--rt-spacing-8);cursor:pointer}:host .rtui-side-menu-sub-item .rtui-side-menu-sub-item-title .rtui-side-menu-sub-item-title-button__icon{width:1.25rem;height:1.25rem;font-size:var(--rt-font-size-lg)}:host .rtui-side-menu-sub-item .rtui-side-menu-sub-item-title .rtui-side-menu-sub-item-title-button:hover{border-color:var(--rt-border-neutral-emphasis)}:host .rtui-side-menu-expand-sub-item{padding:0;border-radius:var(--rt-radius-xl);box-shadow:none}:host .rtui-side-menu-expand-sub-item--fixed{min-width:var(--rt-side-menu-sub-menu-item-width)}:host .rtui-side-menu-expand-sub-item .rtui-side-menu-expand-sub-item-header{max-width:var(--rt-side-menu-sub-menu-item-width);padding:0}:host .rtui-side-menu-expand-sub-item .rtui-side-menu-expand-sub-item-header--activated{background-color:var(--mat-list-active-indicator-color)}:host .rtui-side-menu-expand-sub-item .rtui-side-menu-expand-sub-item-header__icon{color:var(--mdc-list-list-item-leading-icon-color);margin-inline:var(--mat-list-list-item-leading-icon-start-space) var(--mat-list-list-item-leading-icon-end-space)}:host .rtui-side-menu-expand-sub-item .rtui-side-menu-expand-sub-item-header__title{font-size:var(--rt-side-menu-sub-menu-item-title-font-size)}:host .rtui-side-menu-expand-sub-item .rtui-side-menu-expand-sub-item-header:hover .rtui-side-menu-expand-sub-item-header__icon{color:var(--mdc-list-list-item-hover-leading-icon-color)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "component", type: MatNavList, selector: "mat-nav-list", exportAs: ["matNavList"] }, { kind: "directive", type: MatListItemIcon, selector: "[matListItemIcon]" }, { kind: "directive", type: MatListItemTitle, selector: "[matListItemTitle]" }, { kind: "ngmodule", type: MatExpansionModule }, { kind: "component", type: i1$1.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i1$1.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: 
+        ], ngImport: i0, template: "@if (item()) {\n    <ng-container *ngTemplateOutlet=\"listElemTpl; context: { $implicit: item() }\" />\n}\n\n<ng-template #listElemTpl let-item>\n    @if (item?.link) {\n        <mat-list-item\n            rtBlock=\"rtui-side-menu-sub-item\"\n            [rtMod]=\"{ fixed: isSubMenuXScrollEnabled() }\"\n            [id]=\"item.id\"\n            [activated]=\"menuRef.activeMenuIds().includes(item.id)\"\n            (click)=\"onClickSubMenu(item, $event)\">\n            @if (item?.icon) {\n                <mat-icon matListItemIcon rtElem=\"icon\" [rtIconOutlined]=\"isSubMenuIconsOutlined()\">{{ item.icon }}</mat-icon>\n            }\n\n            @if (item?.name) {\n                <div rtBlock=\"rtui-side-menu-sub-item-title\">\n                    <div\n                        #titleTpl\n                        rtElem=\"text\"\n                        matTooltipPosition=\"above\"\n                        [matTooltip]=\"item.name\"\n                        [matTooltipDisabled]=\"!isSubMenuTooltipsShown() || narrow()\"\n                        [rtHideTooltipDirective]=\"titleTpl\"\n                        [isTooltipShown]=\"isSubMenuTooltipsShown() && !narrow()\">\n                        {{ item.name }}\n                    </div>\n\n                    @if (item?.iconButton?.icon) {\n                        <div rtBlock=\"rtui-side-menu-sub-item-title-button\">\n                            <mat-icon\n                                rtElem=\"icon\"\n                                [rtIconOutlined]=\"isSubMenuButtonIconsOutlined()\"\n                                (click)=\"onClickSubMenuAdditional(item.iconButton?.data, $event); $event.stopPropagation()\">\n                                {{ item.iconButton.icon }}\n                            </mat-icon>\n                        </div>\n                    }\n                </div>\n            }\n        </mat-list-item>\n    } @else if (item?.submenu?.length) {\n        <mat-expansion-panel\n            #panel\n            rtBlock=\"rtui-side-menu-expand-sub-item\"\n            [rtMod]=\"{ fixed: isSubMenuXScrollEnabled() }\"\n            [expanded]=\"menuRef.activeMenuIds().includes(item.id)\">\n            <mat-expansion-panel-header\n                rtBlock=\"rtui-side-menu-expand-sub-item-header\"\n                [rtMod]=\"{ activated: menuRef.activeMenuIds().includes(item.id) }\">\n                @if (item?.icon) {\n                    <mat-icon matListItemIcon rtElem=\"icon\" [rtIconOutlined]=\"isSubMenuIconsOutlined()\">{{ item.icon }}</mat-icon>\n                }\n\n                @if (item?.name) {\n                    <div\n                        #headerTitleTpl\n                        matListItemTitle\n                        rtElem=\"title\"\n                        matTooltipPosition=\"above\"\n                        [matTooltip]=\"item.name\"\n                        [matTooltipDisabled]=\"!isSubMenuTooltipsShown() || narrow()\"\n                        [rtHideTooltipDirective]=\"headerTitleTpl\"\n                        [isTooltipShown]=\"isSubMenuTooltipsShown() && !narrow()\">\n                        {{ item.name }}\n                    </div>\n                }\n            </mat-expansion-panel-header>\n\n            @if (panel?.expanded) {\n                <mat-nav-list>\n                    @for (item of item?.submenu; track i; let i = $index) {\n                        <ng-container *ngTemplateOutlet=\"listElemTpl; context: { $implicit: item }\" />\n                    }\n                </mat-nav-list>\n            }\n        </mat-expansion-panel>\n    }\n</ng-template>\n", styles: [":host::ng-deep .mat-expansion-indicator{padding:0 var(--rt-spacing-24)}:host::ng-deep .mat-expansion-panel-body{padding:0 0 0 var(--rt-spacing-16)}:host::ng-deep{--mat-expansion-container-background-color: transparent;--mat-expansion-header-expanded-state-height: var(--mat-expansion-header-collapsed-state-height)}:host .rtui-side-menu-sub-item{max-width:var(--rt-side-menu-sub-menu-item-width)}:host .rtui-side-menu-sub-item--fixed{min-width:var(--rt-side-menu-sub-menu-item-width)}:host .rtui-side-menu-sub-item .rtui-side-menu-sub-item-title{display:flex;align-items:center;justify-content:space-between}:host .rtui-side-menu-sub-item .rtui-side-menu-sub-item-title__text{overflow:hidden;font-size:var(--rt-side-menu-sub-menu-item-title-font-size);text-overflow:ellipsis;white-space:nowrap}:host .rtui-side-menu-sub-item .rtui-side-menu-sub-item-title .rtui-side-menu-sub-item-title-button{display:flex;align-items:center;justify-content:center;padding:var(--rt-spacing-2);border:1.5px solid transparent;border-radius:var(--rt-radius-full);margin-left:var(--rt-spacing-8);cursor:pointer}:host .rtui-side-menu-sub-item .rtui-side-menu-sub-item-title .rtui-side-menu-sub-item-title-button__icon{width:1.25rem;height:1.25rem;font-size:var(--rt-font-size-lg)}:host .rtui-side-menu-sub-item .rtui-side-menu-sub-item-title .rtui-side-menu-sub-item-title-button:hover{border-color:var(--rt-border-neutral-emphasis)}:host .rtui-side-menu-expand-sub-item{padding:0;border-radius:var(--rt-radius-xl);box-shadow:none}:host .rtui-side-menu-expand-sub-item--fixed{min-width:var(--rt-side-menu-sub-menu-item-width)}:host .rtui-side-menu-expand-sub-item .rtui-side-menu-expand-sub-item-header{max-width:var(--rt-side-menu-sub-menu-item-width);padding:0}:host .rtui-side-menu-expand-sub-item .rtui-side-menu-expand-sub-item-header--activated{background-color:var(--mat-list-active-indicator-color)}:host .rtui-side-menu-expand-sub-item .rtui-side-menu-expand-sub-item-header__icon{color:var(--mdc-list-list-item-leading-icon-color);margin-inline:var(--mat-list-list-item-leading-icon-start-space) var(--mat-list-list-item-leading-icon-end-space)}:host .rtui-side-menu-expand-sub-item .rtui-side-menu-expand-sub-item-header__title{font-size:var(--rt-side-menu-sub-menu-item-title-font-size)}:host .rtui-side-menu-expand-sub-item .rtui-side-menu-expand-sub-item-header:hover .rtui-side-menu-expand-sub-item-header__icon{color:var(--mdc-list-list-item-hover-leading-icon-color)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "component", type: MatNavList, selector: "mat-nav-list", exportAs: ["matNavList"] }, { kind: "directive", type: MatListItemIcon, selector: "[matListItemIcon]" }, { kind: "directive", type: MatListItemTitle, selector: "[matListItemTitle]" }, { kind: "ngmodule", type: MatExpansionModule }, { kind: "component", type: i1$1.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i1$1.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: 
                 // directives
                 BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }, { kind: "directive", type: ModDirective, selector: "[rtMod]" }, { kind: "directive", type: RtIconOutlinedDirective, selector: "mat-icon[rtIconOutlined]", inputs: ["rtIconOutlined"] }, { kind: "directive", type: RtHideTooltipDirective, selector: "[rtHideTooltipDirective]", inputs: ["rtHideTooltipDirective", "isTooltipShown"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiSideMenuSubItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rtui-side-menu-sub-item', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+            args: [{ selector: 'rtui-side-menu-sub-item', host: { class: BEM_BLOCK$x }, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         NgTemplateOutlet,
                         MatIcon,
                         MatListItem,
@@ -308,13 +323,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                         RtIconOutlinedDirective,
                         RtHideTooltipDirective,
                     ], providers: [
+                        BreakpointService,
                         {
                             provide: MAT_TOOLTIP_DEFAULT_OPTIONS,
                             useValue: {
                                 disableTooltipInteractivity: true,
                             },
                         },
-                    ], template: "@if (item()) {\n    <ng-container *ngTemplateOutlet=\"listElemTpl; context: { $implicit: item() }\" />\n}\n\n<ng-template #listElemTpl let-item>\n    @if (item?.link) {\n        <mat-list-item\n            rtBlock=\"rtui-side-menu-sub-item\"\n            [rtMod]=\"{ fixed: isSubMenuXScrollEnabled() }\"\n            [id]=\"item.id\"\n            [activated]=\"menuRef.activeMenuIds().includes(item.id)\"\n            (click)=\"onClickSubMenu(item, $event)\">\n            @if (item?.icon) {\n                <mat-icon matListItemIcon rtElem=\"icon\" [rtIconOutlined]=\"isSubMenuIconsOutlined()\">{{ item.icon }}</mat-icon>\n            }\n\n            @if (item?.name) {\n                <div rtBlock=\"rtui-side-menu-sub-item-title\">\n                    <div\n                        #titleTpl\n                        rtElem=\"text\"\n                        matTooltipPosition=\"above\"\n                        [matTooltip]=\"item.name\"\n                        [matTooltipDisabled]=\"!isSubMenuTooltipsShown() || isMobile()\"\n                        [rtHideTooltipDirective]=\"titleTpl\"\n                        [isTooltipShown]=\"isSubMenuTooltipsShown() && !isMobile()\">\n                        {{ item.name }}\n                    </div>\n\n                    @if (item?.iconButton?.icon) {\n                        <div rtBlock=\"rtui-side-menu-sub-item-title-button\">\n                            <mat-icon\n                                rtElem=\"icon\"\n                                [rtIconOutlined]=\"isSubMenuButtonIconsOutlined()\"\n                                (click)=\"onClickSubMenuAdditional(item.iconButton?.data, $event); $event.stopPropagation()\">\n                                {{ item.iconButton.icon }}\n                            </mat-icon>\n                        </div>\n                    }\n                </div>\n            }\n        </mat-list-item>\n    } @else if (item?.submenu?.length) {\n        <mat-expansion-panel\n            #panel\n            rtBlock=\"rtui-side-menu-expand-sub-item\"\n            [rtMod]=\"{ fixed: isSubMenuXScrollEnabled() }\"\n            [expanded]=\"menuRef.activeMenuIds().includes(item.id)\">\n            <mat-expansion-panel-header\n                rtBlock=\"rtui-side-menu-expand-sub-item-header\"\n                [rtMod]=\"{ activated: menuRef.activeMenuIds().includes(item.id) }\">\n                @if (item?.icon) {\n                    <mat-icon matListItemIcon rtElem=\"icon\" [rtIconOutlined]=\"isSubMenuIconsOutlined()\">{{ item.icon }}</mat-icon>\n                }\n\n                @if (item?.name) {\n                    <div\n                        #headerTitleTpl\n                        matListItemTitle\n                        rtElem=\"title\"\n                        matTooltipPosition=\"above\"\n                        [matTooltip]=\"item.name\"\n                        [matTooltipDisabled]=\"!isSubMenuTooltipsShown() || isMobile()\"\n                        [rtHideTooltipDirective]=\"headerTitleTpl\"\n                        [isTooltipShown]=\"isSubMenuTooltipsShown() && !isMobile()\">\n                        {{ item.name }}\n                    </div>\n                }\n            </mat-expansion-panel-header>\n\n            @if (panel?.expanded) {\n                <mat-nav-list>\n                    @for (item of item?.submenu; track i; let i = $index) {\n                        <ng-container *ngTemplateOutlet=\"listElemTpl; context: { $implicit: item }\" />\n                    }\n                </mat-nav-list>\n            }\n        </mat-expansion-panel>\n    }\n</ng-template>\n", styles: [":host::ng-deep .mat-expansion-indicator{padding:0 var(--rt-spacing-24)}:host::ng-deep .mat-expansion-panel-body{padding:0 0 0 var(--rt-spacing-16)}:host::ng-deep{--mat-expansion-container-background-color: transparent;--mat-expansion-header-expanded-state-height: var(--mat-expansion-header-collapsed-state-height)}:host .rtui-side-menu-sub-item{max-width:var(--rt-side-menu-sub-menu-item-width)}:host .rtui-side-menu-sub-item--fixed{min-width:var(--rt-side-menu-sub-menu-item-width)}:host .rtui-side-menu-sub-item .rtui-side-menu-sub-item-title{display:flex;align-items:center;justify-content:space-between}:host .rtui-side-menu-sub-item .rtui-side-menu-sub-item-title__text{overflow:hidden;font-size:var(--rt-side-menu-sub-menu-item-title-font-size);text-overflow:ellipsis;white-space:nowrap}:host .rtui-side-menu-sub-item .rtui-side-menu-sub-item-title .rtui-side-menu-sub-item-title-button{display:flex;align-items:center;justify-content:center;padding:var(--rt-spacing-2);border:1.5px solid transparent;border-radius:var(--rt-radius-full);margin-left:var(--rt-spacing-8);cursor:pointer}:host .rtui-side-menu-sub-item .rtui-side-menu-sub-item-title .rtui-side-menu-sub-item-title-button__icon{width:1.25rem;height:1.25rem;font-size:var(--rt-font-size-lg)}:host .rtui-side-menu-sub-item .rtui-side-menu-sub-item-title .rtui-side-menu-sub-item-title-button:hover{border-color:var(--rt-border-neutral-emphasis)}:host .rtui-side-menu-expand-sub-item{padding:0;border-radius:var(--rt-radius-xl);box-shadow:none}:host .rtui-side-menu-expand-sub-item--fixed{min-width:var(--rt-side-menu-sub-menu-item-width)}:host .rtui-side-menu-expand-sub-item .rtui-side-menu-expand-sub-item-header{max-width:var(--rt-side-menu-sub-menu-item-width);padding:0}:host .rtui-side-menu-expand-sub-item .rtui-side-menu-expand-sub-item-header--activated{background-color:var(--mat-list-active-indicator-color)}:host .rtui-side-menu-expand-sub-item .rtui-side-menu-expand-sub-item-header__icon{color:var(--mdc-list-list-item-leading-icon-color);margin-inline:var(--mat-list-list-item-leading-icon-start-space) var(--mat-list-list-item-leading-icon-end-space)}:host .rtui-side-menu-expand-sub-item .rtui-side-menu-expand-sub-item-header__title{font-size:var(--rt-side-menu-sub-menu-item-title-font-size)}:host .rtui-side-menu-expand-sub-item .rtui-side-menu-expand-sub-item-header:hover .rtui-side-menu-expand-sub-item-header__icon{color:var(--mdc-list-list-item-hover-leading-icon-color)}\n"] }]
+                    ], template: "@if (item()) {\n    <ng-container *ngTemplateOutlet=\"listElemTpl; context: { $implicit: item() }\" />\n}\n\n<ng-template #listElemTpl let-item>\n    @if (item?.link) {\n        <mat-list-item\n            rtBlock=\"rtui-side-menu-sub-item\"\n            [rtMod]=\"{ fixed: isSubMenuXScrollEnabled() }\"\n            [id]=\"item.id\"\n            [activated]=\"menuRef.activeMenuIds().includes(item.id)\"\n            (click)=\"onClickSubMenu(item, $event)\">\n            @if (item?.icon) {\n                <mat-icon matListItemIcon rtElem=\"icon\" [rtIconOutlined]=\"isSubMenuIconsOutlined()\">{{ item.icon }}</mat-icon>\n            }\n\n            @if (item?.name) {\n                <div rtBlock=\"rtui-side-menu-sub-item-title\">\n                    <div\n                        #titleTpl\n                        rtElem=\"text\"\n                        matTooltipPosition=\"above\"\n                        [matTooltip]=\"item.name\"\n                        [matTooltipDisabled]=\"!isSubMenuTooltipsShown() || narrow()\"\n                        [rtHideTooltipDirective]=\"titleTpl\"\n                        [isTooltipShown]=\"isSubMenuTooltipsShown() && !narrow()\">\n                        {{ item.name }}\n                    </div>\n\n                    @if (item?.iconButton?.icon) {\n                        <div rtBlock=\"rtui-side-menu-sub-item-title-button\">\n                            <mat-icon\n                                rtElem=\"icon\"\n                                [rtIconOutlined]=\"isSubMenuButtonIconsOutlined()\"\n                                (click)=\"onClickSubMenuAdditional(item.iconButton?.data, $event); $event.stopPropagation()\">\n                                {{ item.iconButton.icon }}\n                            </mat-icon>\n                        </div>\n                    }\n                </div>\n            }\n        </mat-list-item>\n    } @else if (item?.submenu?.length) {\n        <mat-expansion-panel\n            #panel\n            rtBlock=\"rtui-side-menu-expand-sub-item\"\n            [rtMod]=\"{ fixed: isSubMenuXScrollEnabled() }\"\n            [expanded]=\"menuRef.activeMenuIds().includes(item.id)\">\n            <mat-expansion-panel-header\n                rtBlock=\"rtui-side-menu-expand-sub-item-header\"\n                [rtMod]=\"{ activated: menuRef.activeMenuIds().includes(item.id) }\">\n                @if (item?.icon) {\n                    <mat-icon matListItemIcon rtElem=\"icon\" [rtIconOutlined]=\"isSubMenuIconsOutlined()\">{{ item.icon }}</mat-icon>\n                }\n\n                @if (item?.name) {\n                    <div\n                        #headerTitleTpl\n                        matListItemTitle\n                        rtElem=\"title\"\n                        matTooltipPosition=\"above\"\n                        [matTooltip]=\"item.name\"\n                        [matTooltipDisabled]=\"!isSubMenuTooltipsShown() || narrow()\"\n                        [rtHideTooltipDirective]=\"headerTitleTpl\"\n                        [isTooltipShown]=\"isSubMenuTooltipsShown() && !narrow()\">\n                        {{ item.name }}\n                    </div>\n                }\n            </mat-expansion-panel-header>\n\n            @if (panel?.expanded) {\n                <mat-nav-list>\n                    @for (item of item?.submenu; track i; let i = $index) {\n                        <ng-container *ngTemplateOutlet=\"listElemTpl; context: { $implicit: item }\" />\n                    }\n                </mat-nav-list>\n            }\n        </mat-expansion-panel>\n    }\n</ng-template>\n", styles: [":host::ng-deep .mat-expansion-indicator{padding:0 var(--rt-spacing-24)}:host::ng-deep .mat-expansion-panel-body{padding:0 0 0 var(--rt-spacing-16)}:host::ng-deep{--mat-expansion-container-background-color: transparent;--mat-expansion-header-expanded-state-height: var(--mat-expansion-header-collapsed-state-height)}:host .rtui-side-menu-sub-item{max-width:var(--rt-side-menu-sub-menu-item-width)}:host .rtui-side-menu-sub-item--fixed{min-width:var(--rt-side-menu-sub-menu-item-width)}:host .rtui-side-menu-sub-item .rtui-side-menu-sub-item-title{display:flex;align-items:center;justify-content:space-between}:host .rtui-side-menu-sub-item .rtui-side-menu-sub-item-title__text{overflow:hidden;font-size:var(--rt-side-menu-sub-menu-item-title-font-size);text-overflow:ellipsis;white-space:nowrap}:host .rtui-side-menu-sub-item .rtui-side-menu-sub-item-title .rtui-side-menu-sub-item-title-button{display:flex;align-items:center;justify-content:center;padding:var(--rt-spacing-2);border:1.5px solid transparent;border-radius:var(--rt-radius-full);margin-left:var(--rt-spacing-8);cursor:pointer}:host .rtui-side-menu-sub-item .rtui-side-menu-sub-item-title .rtui-side-menu-sub-item-title-button__icon{width:1.25rem;height:1.25rem;font-size:var(--rt-font-size-lg)}:host .rtui-side-menu-sub-item .rtui-side-menu-sub-item-title .rtui-side-menu-sub-item-title-button:hover{border-color:var(--rt-border-neutral-emphasis)}:host .rtui-side-menu-expand-sub-item{padding:0;border-radius:var(--rt-radius-xl);box-shadow:none}:host .rtui-side-menu-expand-sub-item--fixed{min-width:var(--rt-side-menu-sub-menu-item-width)}:host .rtui-side-menu-expand-sub-item .rtui-side-menu-expand-sub-item-header{max-width:var(--rt-side-menu-sub-menu-item-width);padding:0}:host .rtui-side-menu-expand-sub-item .rtui-side-menu-expand-sub-item-header--activated{background-color:var(--mat-list-active-indicator-color)}:host .rtui-side-menu-expand-sub-item .rtui-side-menu-expand-sub-item-header__icon{color:var(--mdc-list-list-item-leading-icon-color);margin-inline:var(--mat-list-list-item-leading-icon-start-space) var(--mat-list-list-item-leading-icon-end-space)}:host .rtui-side-menu-expand-sub-item .rtui-side-menu-expand-sub-item-header__title{font-size:var(--rt-side-menu-sub-menu-item-title-font-size)}:host .rtui-side-menu-expand-sub-item .rtui-side-menu-expand-sub-item-header:hover .rtui-side-menu-expand-sub-item-header__icon{color:var(--mdc-list-list-item-hover-leading-icon-color)}\n"] }]
         }], propDecorators: { item: [{ type: i0.Input, args: [{ isSignal: true, alias: "item", required: true }] }], isMobile: [{ type: i0.Input, args: [{ isSignal: true, alias: "isMobile", required: false }] }], isSubMenuXScrollEnabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "isSubMenuXScrollEnabled", required: false }] }], isSubMenuIconsOutlined: [{ type: i0.Input, args: [{ isSignal: true, alias: "isSubMenuIconsOutlined", required: false }] }], isSubMenuButtonIconsOutlined: [{ type: i0.Input, args: [{ isSignal: true, alias: "isSubMenuButtonIconsOutlined", required: false }] }], isSubMenuTooltipsShown: [{ type: i0.Input, args: [{ isSignal: true, alias: "isSubMenuTooltipsShown", required: false }] }], clickSubMenuAction: [{ type: i0.Output, args: ["clickSubMenuAction"] }], clickSubMenuAdditionalAction: [{ type: i0.Output, args: ["clickSubMenuAdditionalAction"] }] } });
 
 class RtuiSideMenuHeaderDirective {
@@ -337,8 +353,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                     selector: '[rtuiSideMenuFooter]',
                 }]
         }] });
+const BEM_BLOCK$w = 'rtui-side-menu';
 class RtuiSideMenuComponent {
     constructor() {
+        this.#breakpoints = inject(BreakpointService);
+        /** Экран узкий: значение входа, если приложение его дало, иначе замер кита. */
+        this.narrow = computed(() => this.isMobile() ?? !!this.#breakpoints.isMobile(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "narrow" }] : /* istanbul ignore next */ []));
         this.headerTpl = contentChild(RtuiSideMenuHeaderDirective, { ...(ngDevMode ? { debugName: "headerTpl" } : /* istanbul ignore next */ {}), read: TemplateRef });
         this.footerTpl = contentChild(RtuiSideMenuFooterDirective, { ...(ngDevMode ? { debugName: "footerTpl" } : /* istanbul ignore next */ {}), read: TemplateRef });
         this.subMenuRef = viewChild(MatDrawer, /* @ts-ignore */
@@ -352,7 +373,14 @@ class RtuiSideMenuComponent {
         this.activeMenuIds = input.required(/* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "activeMenuIds" }] : /* istanbul ignore next */ []));
         this.menuItems = input([], { ...(ngDevMode ? { debugName: "menuItems" } : /* istanbul ignore next */ {}), transform: (value) => transformArrayInput(value) });
-        this.isMobile = input(false, { ...(ngDevMode ? { debugName: "isMobile" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /**
+         * Признак узкого экрана.
+         *
+         * @deprecated Кит определяет его сам — `BreakpointService` из `@rt-tools/core`. Вход
+         * оставлен ради приложений, которые уже его передают, и уйдёт в следующем крупном выпуске.
+         */
+        this.isMobile = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isMobile" }] : /* istanbul ignore next */ []));
         this.isSubMenuXScrollEnabled = input(true, { ...(ngDevMode ? { debugName: "isSubMenuXScrollEnabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         this.isMainMenuIconsOutlined = input(false, { ...(ngDevMode ? { debugName: "isMainMenuIconsOutlined" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         this.isSubMenuIconsOutlined = input(false, { ...(ngDevMode ? { debugName: "isSubMenuIconsOutlined" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
@@ -366,6 +394,7 @@ class RtuiSideMenuComponent {
         this.clickSubMenuAction = output();
         this.clickSubMenuAdditionalAction = output();
     }
+    #breakpoints;
     onClickMenu(item) {
         this.selectedItem.set(item);
         if (item?.submenu) {
@@ -419,7 +448,7 @@ class RtuiSideMenuComponent {
         this.subMenuRef()?.open().then();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiSideMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: RtuiSideMenuComponent, isStandalone: true, selector: "rtui-side-menu", inputs: { activeMenuIds: { classPropertyName: "activeMenuIds", publicName: "activeMenuIds", isSignal: true, isRequired: true, transformFunction: null }, menuItems: { classPropertyName: "menuItems", publicName: "menuItems", isSignal: true, isRequired: false, transformFunction: null }, isMobile: { classPropertyName: "isMobile", publicName: "isMobile", isSignal: true, isRequired: false, transformFunction: null }, isSubMenuXScrollEnabled: { classPropertyName: "isSubMenuXScrollEnabled", publicName: "isSubMenuXScrollEnabled", isSignal: true, isRequired: false, transformFunction: null }, isMainMenuIconsOutlined: { classPropertyName: "isMainMenuIconsOutlined", publicName: "isMainMenuIconsOutlined", isSignal: true, isRequired: false, transformFunction: null }, isSubMenuIconsOutlined: { classPropertyName: "isSubMenuIconsOutlined", publicName: "isSubMenuIconsOutlined", isSignal: true, isRequired: false, transformFunction: null }, isSubMenuButtonIconsOutlined: { classPropertyName: "isSubMenuButtonIconsOutlined", publicName: "isSubMenuButtonIconsOutlined", isSignal: true, isRequired: false, transformFunction: null }, isSubMenuTooltipsShown: { classPropertyName: "isSubMenuTooltipsShown", publicName: "isSubMenuTooltipsShown", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closeMobileMenuAction: "closeMobileMenuAction", clickSubMenuAction: "clickSubMenuAction", clickSubMenuAdditionalAction: "clickSubMenuAdditionalAction" }, queries: [{ propertyName: "headerTpl", first: true, predicate: RtuiSideMenuHeaderDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "footerTpl", first: true, predicate: RtuiSideMenuFooterDirective, descendants: true, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "subMenuRef", first: true, predicate: MatDrawer, descendants: true, isSignal: true }], ngImport: i0, template: "@if (isMobile()) {\n    <rtui-scrollable rtBlock=\"rtui-mobile-side-menu\">\n        @if (headerTpl()) {\n            <ng-container *rtuiScrollableHeader>\n                <ng-container *ngTemplateOutlet=\"headerTpl() ?? null\" />\n            </ng-container>\n        }\n\n        @if (menuItems().length) {\n            <ng-container *rtuiScrollableContent>\n                <mat-nav-list\n                    rtBlock=\"rtui-mobile-side-menu-list\"\n                    [rtMod]=\"{ scrollable: selectedSubMenu()?.length && isSubMenuXScrollEnabled() }\">\n                    @if (selectedSubMenu()?.length) {\n                        <div rtElem=\"sub\" [rtScrollToElement]=\"activeMenuId()\" [elements]=\"selectedSubMenu() ?? []\">\n                            <rtui-side-menu-sub-item\n                                [item]=\"backToMainMenuButton()\"\n                                [isMobile]=\"isMobile()\"\n                                (clickSubMenuAction)=\"onBackToMainMenu()\" />\n\n                            @for (item of selectedSubMenu(); track i; let i = $index) {\n                                <rtui-side-menu-sub-item\n                                    [item]=\"item\"\n                                    [isMobile]=\"isMobile()\"\n                                    [isSubMenuXScrollEnabled]=\"isSubMenuXScrollEnabled()\"\n                                    [isSubMenuIconsOutlined]=\"isSubMenuIconsOutlined()\"\n                                    [isSubMenuButtonIconsOutlined]=\"isSubMenuButtonIconsOutlined()\"\n                                    [isSubMenuTooltipsShown]=\"isSubMenuTooltipsShown()\"\n                                    (clickSubMenuAction)=\"onClickSubMenu($event)\"\n                                    (clickSubMenuAdditionalAction)=\"clickSubMenuAdditional($event)\" />\n                            }\n                        </div>\n                    } @else {\n                        <div rtBlock=\"rtui-mobile-side-menu-list-main\">\n                            @for (item of menuItems(); track i; let i = $index) {\n                                <mat-list-item\n                                    rtBlock=\"rtui-mobile-side-menu-item\"\n                                    [rtNavigationDirective]=\"item?.link\"\n                                    [activated]=\"selectedItem() === item || (!selectedItem() && activeMenuIds().includes(item.id))\"\n                                    (click)=\"onClickMenu(item)\">\n                                    @if (item?.icon) {\n                                        <mat-icon matListItemIcon rtElem=\"icon\" [rtIconOutlined]=\"isMainMenuIconsOutlined()\">\n                                            {{ item.icon }}\n                                        </mat-icon>\n                                    }\n\n                                    @if (item?.name) {\n                                        <div rtBlock=\"rtui-mobile-side-menu-item-title\">\n                                            <div rtElem=\"text\">{{ item.name }}</div>\n\n                                            @if (item?.iconButton?.icon) {\n                                                <div rtBlock=\"rtui-mobile-side-menu-item-title-button\">\n                                                    <mat-icon rtElem=\"icon\">{{ item.iconButton?.icon }}</mat-icon>\n                                                </div>\n                                            }\n                                        </div>\n                                    }\n                                </mat-list-item>\n                            }\n                        </div>\n                    }\n                </mat-nav-list>\n            </ng-container>\n        }\n\n        @if (footerTpl()) {\n            <ng-container *rtuiScrollableFooter>\n                <ng-container *ngTemplateOutlet=\"footerTpl() ?? null\" />\n            </ng-container>\n        }\n    </rtui-scrollable>\n} @else {\n    <rtui-scrollable rtBlock=\"rtui-side-menu\">\n        @if (headerTpl()) {\n            <ng-container *rtuiScrollableHeader>\n                <ng-container *ngTemplateOutlet=\"headerTpl() ?? null\" />\n            </ng-container>\n        }\n\n        @if (menuItems().length) {\n            <ng-container *rtuiScrollableContent>\n                <mat-nav-list rtElem=\"list\">\n                    @for (item of menuItems(); track i; let i = $index) {\n                        <a\n                            rtBlock=\"rtui-side-menu-item\"\n                            [rtNavigationDirective]=\"item?.link\"\n                            (mouseenter)=\"toggleSubMenu(item)\"\n                            (click)=\"onClickMenu(item)\">\n                            @if (item?.icon) {\n                                <mat-list-item\n                                    rtBlock=\"rtui-side-menu-item-button\"\n                                    [activated]=\"selectedItem() === item || (!selectedItem() && activeMenuIds().includes(item.id))\">\n                                    <div rtElem=\"icon\">\n                                        <mat-icon [rtIconOutlined]=\"isMainMenuIconsOutlined()\">{{ item.icon }}</mat-icon>\n                                    </div>\n                                </mat-list-item>\n                            }\n\n                            @if (item?.name) {\n                                <div rtElem=\"title\">{{ item.name }}</div>\n                            }\n                        </a>\n                    }\n                </mat-nav-list>\n            </ng-container>\n        }\n\n        @if (footerTpl()) {\n            <ng-container *rtuiScrollableFooter>\n                <ng-container *ngTemplateOutlet=\"footerTpl() ?? null\" />\n            </ng-container>\n        }\n    </rtui-scrollable>\n\n    <mat-drawer-container\n        rtBlock=\"rtui-sub-side-menu\"\n        [rtMod]=\"{ opened: subMenuRef()?.opened }\"\n        [hasBackdrop]=\"true\"\n        (backdropClick)=\"closeSubMenu()\">\n        <mat-drawer rtBlock=\"rtui-sub-side-menu-content\" mode=\"side\" position=\"start\" (mouseleave)=\"toggleSubMenu()\">\n            <rtui-scrollable>\n                <ng-container *rtuiScrollableContent>\n                    @if (subMenuRef()?.opened && selectedSubMenu()?.length) {\n                        <mat-nav-list\n                            rtElem=\"list\"\n                            [rtMod]=\"{ scrollable: isSubMenuXScrollEnabled() }\"\n                            [rtScrollToElement]=\"activeMenuId()\"\n                            [elements]=\"selectedSubMenu() ?? []\">\n                            @for (item of selectedSubMenu(); track i; let i = $index) {\n                                <rtui-side-menu-sub-item\n                                    [item]=\"item\"\n                                    [isMobile]=\"isMobile()\"\n                                    [isSubMenuXScrollEnabled]=\"isSubMenuXScrollEnabled()\"\n                                    [isSubMenuIconsOutlined]=\"isSubMenuIconsOutlined()\"\n                                    [isSubMenuButtonIconsOutlined]=\"isSubMenuButtonIconsOutlined()\"\n                                    [isSubMenuTooltipsShown]=\"isSubMenuTooltipsShown()\"\n                                    (clickSubMenuAction)=\"onClickSubMenu($event)\"\n                                    (clickSubMenuAdditionalAction)=\"clickSubMenuAdditional($event)\" />\n                            }\n                        </mat-nav-list>\n                    }\n                </ng-container>\n            </rtui-scrollable>\n        </mat-drawer>\n    </mat-drawer-container>\n}\n", styles: ["@charset \"UTF-8\";:host{--rt-side-menu-base-width: 5.5rem;--rt-side-menu-base-margin-top-between-items: .75rem;--rt-side-menu-item-width: 3.5rem;--rt-side-menu-item-height: 2rem;--rt-side-menu-item-font-size: .75rem;--rt-side-menu-item-text-align: center;--rt-side-menu-item-line-height: 1.1;--rt-side-menu-mobile-item-icon-size: 1.5rem;--rt-side-menu-mobile-item-title-font-size: .75rem;--rt-side-menu-mobile-item-additional-icon-size: 1rem;--rt-side-menu-sub-menu-width: 15rem;--rt-side-menu-sub-menu-item-width: 13.75rem;--rt-side-menu-sub-menu-item-title-font-size: .85rem;--mat-sidenav-scrim-color: transparent}:host .rtui-mobile-side-menu{width:var(--rt-side-menu-sub-menu-width)}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list{display:flex;width:100%;flex-direction:column}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list--scrollable{width:fit-content}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list__sub{animation:fade-in-animation .15s ease-in-out .15s forwards;opacity:0}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list .rtui-mobile-side-menu-list-main{animation:fade-in-animation .15s ease-in-out .15s forwards;opacity:0}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list .rtui-mobile-side-menu-list-main .rtui-mobile-side-menu-item__icon{width:var(--rt-side-menu-mobile-item-icon-size);height:var(--rt-side-menu-mobile-item-icon-size);font-size:var(--rt-side-menu-mobile-item-icon-size)}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list .rtui-mobile-side-menu-list-main .rtui-mobile-side-menu-item .rtui-mobile-side-menu-item-title{display:flex;align-items:center;justify-content:space-between}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list .rtui-mobile-side-menu-list-main .rtui-mobile-side-menu-item .rtui-mobile-side-menu-item-title__text{overflow:hidden;font-size:var(--rt-font-size-xs);text-overflow:ellipsis;white-space:nowrap}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list .rtui-mobile-side-menu-list-main .rtui-mobile-side-menu-item .rtui-mobile-side-menu-item-title .rtui-mobile-side-menu-item-title-button{display:flex;align-items:center;justify-content:center;border-radius:var(--rt-radius-full);margin-left:var(--rt-spacing-8)}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list .rtui-mobile-side-menu-list-main .rtui-mobile-side-menu-item .rtui-mobile-side-menu-item-title .rtui-mobile-side-menu-item-title-button__icon{width:var(--rt-side-menu-mobile-item-additional-icon-size);height:var(--rt-side-menu-mobile-item-additional-icon-size);font-size:var(--rt-side-menu-mobile-item-additional-icon-size)}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list .rtui-mobile-side-menu-list-main .rtui-mobile-side-menu-item+.rtui-mobile-side-menu-item{margin-top:var(--rt-spacing-8)}:host .rtui-side-menu{width:var(--rt-side-menu-base-width)}:host .rtui-side-menu__list{display:flex;width:100%;flex-direction:column;align-items:center}:host .rtui-side-menu__list .rtui-side-menu-item{display:flex;width:100%;flex-direction:column;align-items:center;justify-content:center;cursor:pointer}:host .rtui-side-menu__list .rtui-side-menu-item .rtui-side-menu-item-button{display:flex;width:var(--rt-side-menu-item-width);height:var(--rt-side-menu-item-height);align-items:center;justify-content:center;padding:0}:host .rtui-side-menu__list .rtui-side-menu-item .rtui-side-menu-item-button__icon{display:flex;align-items:center;justify-content:center}:host .rtui-side-menu__list .rtui-side-menu-item__title{font-size:var(--rt-side-menu-item-font-size);line-height:var(--rt-side-menu-item-line-height);text-align:var(--rt-side-menu-item-text-align)}:host .rtui-side-menu__list .rtui-side-menu-item+.rtui-side-menu-item{margin-top:var(--rt-side-menu-base-margin-top-between-items)}:host .rtui-sub-side-menu{position:fixed;top:0;left:var(--rt-side-menu-base-width);width:0;height:100%;background-color:transparent}:host .rtui-sub-side-menu--opened{width:100%}:host .rtui-sub-side-menu .rtui-sub-side-menu-content{--rt-side-menu-sub-content-shadow: 14px 0 28px rgb(0 0 0 / 25%), 10px 0 10px rgb(0 0 0 / 22%);width:var(--rt-side-menu-sub-menu-width);height:100%;border-left:1px solid var(--rt-border-neutral-default);box-shadow:var(--rt-side-menu-sub-content-shadow)}:host .rtui-sub-side-menu .rtui-sub-side-menu-content__list{width:100%;animation:fade-in-animation .15s ease-in-out .15s forwards;opacity:0}:host .rtui-sub-side-menu .rtui-sub-side-menu-content__list--scrollable{min-width:fit-content}@keyframes fade-in-animation{to{opacity:1}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatSidenavModule }, { kind: "component", type: i1$2.MatDrawer, selector: "mat-drawer", inputs: ["position", "mode", "disableClose", "autoFocus", "opened"], outputs: ["openedChange", "opened", "openedStart", "closed", "closedStart", "positionChanged"], exportAs: ["matDrawer"] }, { kind: "component", type: i1$2.MatDrawerContainer, selector: "mat-drawer-container", inputs: ["autosize", "hasBackdrop"], outputs: ["backdropClick"], exportAs: ["matDrawerContainer"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "component", type: MatNavList, selector: "mat-nav-list", exportAs: ["matNavList"] }, { kind: "directive", type: MatListItemIcon, selector: "[matListItemIcon]" }, { kind: "directive", type: 
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: RtuiSideMenuComponent, isStandalone: true, selector: "rtui-side-menu", inputs: { activeMenuIds: { classPropertyName: "activeMenuIds", publicName: "activeMenuIds", isSignal: true, isRequired: true, transformFunction: null }, menuItems: { classPropertyName: "menuItems", publicName: "menuItems", isSignal: true, isRequired: false, transformFunction: null }, isMobile: { classPropertyName: "isMobile", publicName: "isMobile", isSignal: true, isRequired: false, transformFunction: null }, isSubMenuXScrollEnabled: { classPropertyName: "isSubMenuXScrollEnabled", publicName: "isSubMenuXScrollEnabled", isSignal: true, isRequired: false, transformFunction: null }, isMainMenuIconsOutlined: { classPropertyName: "isMainMenuIconsOutlined", publicName: "isMainMenuIconsOutlined", isSignal: true, isRequired: false, transformFunction: null }, isSubMenuIconsOutlined: { classPropertyName: "isSubMenuIconsOutlined", publicName: "isSubMenuIconsOutlined", isSignal: true, isRequired: false, transformFunction: null }, isSubMenuButtonIconsOutlined: { classPropertyName: "isSubMenuButtonIconsOutlined", publicName: "isSubMenuButtonIconsOutlined", isSignal: true, isRequired: false, transformFunction: null }, isSubMenuTooltipsShown: { classPropertyName: "isSubMenuTooltipsShown", publicName: "isSubMenuTooltipsShown", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closeMobileMenuAction: "closeMobileMenuAction", clickSubMenuAction: "clickSubMenuAction", clickSubMenuAdditionalAction: "clickSubMenuAdditionalAction" }, host: { classAttribute: "rtui-side-menu" }, providers: [BreakpointService], queries: [{ propertyName: "headerTpl", first: true, predicate: RtuiSideMenuHeaderDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "footerTpl", first: true, predicate: RtuiSideMenuFooterDirective, descendants: true, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "subMenuRef", first: true, predicate: MatDrawer, descendants: true, isSignal: true }], ngImport: i0, template: "@if (narrow()) {\n    <rtui-scrollable rtBlock=\"rtui-mobile-side-menu\">\n        @if (headerTpl()) {\n            <ng-container *rtuiScrollableHeader>\n                <ng-container *ngTemplateOutlet=\"headerTpl() ?? null\" />\n            </ng-container>\n        }\n\n        @if (menuItems().length) {\n            <ng-container *rtuiScrollableContent>\n                <mat-nav-list\n                    rtBlock=\"rtui-mobile-side-menu-list\"\n                    [rtMod]=\"{ scrollable: selectedSubMenu()?.length && isSubMenuXScrollEnabled() }\">\n                    @if (selectedSubMenu()?.length) {\n                        <div rtElem=\"sub\" [rtScrollToElement]=\"activeMenuId()\" [elements]=\"selectedSubMenu() ?? []\">\n                            <rtui-side-menu-sub-item [item]=\"backToMainMenuButton()\" (clickSubMenuAction)=\"onBackToMainMenu()\" />\n\n                            @for (item of selectedSubMenu(); track i; let i = $index) {\n                                <rtui-side-menu-sub-item\n                                    [item]=\"item\"\n                                    [isSubMenuXScrollEnabled]=\"isSubMenuXScrollEnabled()\"\n                                    [isSubMenuIconsOutlined]=\"isSubMenuIconsOutlined()\"\n                                    [isSubMenuButtonIconsOutlined]=\"isSubMenuButtonIconsOutlined()\"\n                                    [isSubMenuTooltipsShown]=\"isSubMenuTooltipsShown()\"\n                                    (clickSubMenuAction)=\"onClickSubMenu($event)\"\n                                    (clickSubMenuAdditionalAction)=\"clickSubMenuAdditional($event)\" />\n                            }\n                        </div>\n                    } @else {\n                        <div rtBlock=\"rtui-mobile-side-menu-list-main\">\n                            @for (item of menuItems(); track i; let i = $index) {\n                                <mat-list-item\n                                    rtBlock=\"rtui-mobile-side-menu-item\"\n                                    [rtNavigationDirective]=\"item?.link\"\n                                    [activated]=\"selectedItem() === item || (!selectedItem() && activeMenuIds().includes(item.id))\"\n                                    (click)=\"onClickMenu(item)\">\n                                    @if (item?.icon) {\n                                        <mat-icon matListItemIcon rtElem=\"icon\" [rtIconOutlined]=\"isMainMenuIconsOutlined()\">\n                                            {{ item.icon }}\n                                        </mat-icon>\n                                    }\n\n                                    @if (item?.name) {\n                                        <div rtBlock=\"rtui-mobile-side-menu-item-title\">\n                                            <div rtElem=\"text\">{{ item.name }}</div>\n\n                                            @if (item?.iconButton?.icon) {\n                                                <div rtBlock=\"rtui-mobile-side-menu-item-title-button\">\n                                                    <mat-icon rtElem=\"icon\">{{ item.iconButton?.icon }}</mat-icon>\n                                                </div>\n                                            }\n                                        </div>\n                                    }\n                                </mat-list-item>\n                            }\n                        </div>\n                    }\n                </mat-nav-list>\n            </ng-container>\n        }\n\n        @if (footerTpl()) {\n            <ng-container *rtuiScrollableFooter>\n                <ng-container *ngTemplateOutlet=\"footerTpl() ?? null\" />\n            </ng-container>\n        }\n    </rtui-scrollable>\n} @else {\n    <rtui-scrollable rtBlock=\"rtui-side-menu\">\n        @if (headerTpl()) {\n            <ng-container *rtuiScrollableHeader>\n                <ng-container *ngTemplateOutlet=\"headerTpl() ?? null\" />\n            </ng-container>\n        }\n\n        @if (menuItems().length) {\n            <ng-container *rtuiScrollableContent>\n                <mat-nav-list rtElem=\"list\">\n                    @for (item of menuItems(); track i; let i = $index) {\n                        <a\n                            rtBlock=\"rtui-side-menu-item\"\n                            tabindex=\"0\"\n                            [rtNavigationDirective]=\"item?.link\"\n                            (mouseenter)=\"toggleSubMenu(item)\"\n                            (click)=\"onClickMenu(item)\"\n                            (keydown.enter)=\"onClickMenu(item)\">\n                            @if (item?.icon) {\n                                <mat-list-item\n                                    rtBlock=\"rtui-side-menu-item-button\"\n                                    [activated]=\"selectedItem() === item || (!selectedItem() && activeMenuIds().includes(item.id))\">\n                                    <div rtElem=\"icon\">\n                                        <mat-icon [rtIconOutlined]=\"isMainMenuIconsOutlined()\">{{ item.icon }}</mat-icon>\n                                    </div>\n                                </mat-list-item>\n                            }\n\n                            @if (item?.name) {\n                                <div rtElem=\"title\">{{ item.name }}</div>\n                            }\n                        </a>\n                    }\n                </mat-nav-list>\n            </ng-container>\n        }\n\n        @if (footerTpl()) {\n            <ng-container *rtuiScrollableFooter>\n                <ng-container *ngTemplateOutlet=\"footerTpl() ?? null\" />\n            </ng-container>\n        }\n    </rtui-scrollable>\n\n    <mat-drawer-container\n        rtBlock=\"rtui-sub-side-menu\"\n        [rtMod]=\"{ opened: subMenuRef()?.opened }\"\n        [hasBackdrop]=\"true\"\n        (backdropClick)=\"closeSubMenu()\">\n        <mat-drawer rtBlock=\"rtui-sub-side-menu-content\" mode=\"side\" position=\"start\" (mouseleave)=\"toggleSubMenu()\">\n            <rtui-scrollable>\n                <ng-container *rtuiScrollableContent>\n                    @if (subMenuRef()?.opened && selectedSubMenu()?.length) {\n                        <mat-nav-list\n                            rtElem=\"list\"\n                            [rtMod]=\"{ scrollable: isSubMenuXScrollEnabled() }\"\n                            [rtScrollToElement]=\"activeMenuId()\"\n                            [elements]=\"selectedSubMenu() ?? []\">\n                            @for (item of selectedSubMenu(); track i; let i = $index) {\n                                <rtui-side-menu-sub-item\n                                    [item]=\"item\"\n                                    [isSubMenuXScrollEnabled]=\"isSubMenuXScrollEnabled()\"\n                                    [isSubMenuIconsOutlined]=\"isSubMenuIconsOutlined()\"\n                                    [isSubMenuButtonIconsOutlined]=\"isSubMenuButtonIconsOutlined()\"\n                                    [isSubMenuTooltipsShown]=\"isSubMenuTooltipsShown()\"\n                                    (clickSubMenuAction)=\"onClickSubMenu($event)\"\n                                    (clickSubMenuAdditionalAction)=\"clickSubMenuAdditional($event)\" />\n                            }\n                        </mat-nav-list>\n                    }\n                </ng-container>\n            </rtui-scrollable>\n        </mat-drawer>\n    </mat-drawer-container>\n}\n", styles: ["@charset \"UTF-8\";:host{--rt-side-menu-base-width: 5.5rem;--rt-side-menu-base-margin-top-between-items: .75rem;--rt-side-menu-item-width: 3.5rem;--rt-side-menu-item-height: 2rem;--rt-side-menu-item-font-size: .75rem;--rt-side-menu-item-text-align: center;--rt-side-menu-item-line-height: 1.1;--rt-side-menu-mobile-item-icon-size: 1.5rem;--rt-side-menu-mobile-item-title-font-size: .75rem;--rt-side-menu-mobile-item-additional-icon-size: 1rem;--rt-side-menu-sub-menu-width: 15rem;--rt-side-menu-sub-menu-item-width: 13.75rem;--rt-side-menu-sub-menu-item-title-font-size: .85rem;--mat-sidenav-scrim-color: transparent}:host .rtui-mobile-side-menu{width:var(--rt-side-menu-sub-menu-width)}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list{display:flex;width:100%;flex-direction:column}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list--scrollable{width:fit-content}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list__sub{animation:fade-in-animation .15s ease-in-out .15s forwards;opacity:0}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list .rtui-mobile-side-menu-list-main{animation:fade-in-animation .15s ease-in-out .15s forwards;opacity:0}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list .rtui-mobile-side-menu-list-main .rtui-mobile-side-menu-item__icon{width:var(--rt-side-menu-mobile-item-icon-size);height:var(--rt-side-menu-mobile-item-icon-size);font-size:var(--rt-side-menu-mobile-item-icon-size)}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list .rtui-mobile-side-menu-list-main .rtui-mobile-side-menu-item .rtui-mobile-side-menu-item-title{display:flex;align-items:center;justify-content:space-between}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list .rtui-mobile-side-menu-list-main .rtui-mobile-side-menu-item .rtui-mobile-side-menu-item-title__text{overflow:hidden;font-size:var(--rt-font-size-xs);text-overflow:ellipsis;white-space:nowrap}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list .rtui-mobile-side-menu-list-main .rtui-mobile-side-menu-item .rtui-mobile-side-menu-item-title .rtui-mobile-side-menu-item-title-button{display:flex;align-items:center;justify-content:center;border-radius:var(--rt-radius-full);margin-left:var(--rt-spacing-8)}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list .rtui-mobile-side-menu-list-main .rtui-mobile-side-menu-item .rtui-mobile-side-menu-item-title .rtui-mobile-side-menu-item-title-button__icon{width:var(--rt-side-menu-mobile-item-additional-icon-size);height:var(--rt-side-menu-mobile-item-additional-icon-size);font-size:var(--rt-side-menu-mobile-item-additional-icon-size)}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list .rtui-mobile-side-menu-list-main .rtui-mobile-side-menu-item+.rtui-mobile-side-menu-item{margin-top:var(--rt-spacing-8)}:host .rtui-side-menu{width:var(--rt-side-menu-base-width)}:host .rtui-side-menu__list{display:flex;width:100%;flex-direction:column;align-items:center}:host .rtui-side-menu__list .rtui-side-menu-item{display:flex;width:100%;flex-direction:column;align-items:center;justify-content:center;cursor:pointer}:host .rtui-side-menu__list .rtui-side-menu-item .rtui-side-menu-item-button{display:flex;width:var(--rt-side-menu-item-width);height:var(--rt-side-menu-item-height);align-items:center;justify-content:center;padding:0}:host .rtui-side-menu__list .rtui-side-menu-item .rtui-side-menu-item-button__icon{display:flex;align-items:center;justify-content:center}:host .rtui-side-menu__list .rtui-side-menu-item__title{font-size:var(--rt-side-menu-item-font-size);line-height:var(--rt-side-menu-item-line-height);text-align:var(--rt-side-menu-item-text-align)}:host .rtui-side-menu__list .rtui-side-menu-item+.rtui-side-menu-item{margin-top:var(--rt-side-menu-base-margin-top-between-items)}:host .rtui-sub-side-menu{position:fixed;top:0;left:var(--rt-side-menu-base-width);width:0;height:100%;background-color:transparent}:host .rtui-sub-side-menu--opened{width:100%}:host .rtui-sub-side-menu .rtui-sub-side-menu-content{--rt-side-menu-sub-content-shadow: 14px 0 28px rgb(0 0 0 / 25%), 10px 0 10px rgb(0 0 0 / 22%);width:var(--rt-side-menu-sub-menu-width);height:100%;border-left:1px solid var(--rt-border-neutral-default);box-shadow:var(--rt-side-menu-sub-content-shadow)}:host .rtui-sub-side-menu .rtui-sub-side-menu-content__list{width:100%;animation:fade-in-animation .15s ease-in-out .15s forwards;opacity:0}:host .rtui-sub-side-menu .rtui-sub-side-menu-content__list--scrollable{min-width:fit-content}@keyframes fade-in-animation{to{opacity:1}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatSidenavModule }, { kind: "component", type: i1$2.MatDrawer, selector: "mat-drawer", inputs: ["position", "mode", "disableClose", "autoFocus", "opened"], outputs: ["openedChange", "opened", "openedStart", "closed", "closedStart", "positionChanged"], exportAs: ["matDrawer"] }, { kind: "component", type: i1$2.MatDrawerContainer, selector: "mat-drawer-container", inputs: ["autosize", "hasBackdrop"], outputs: ["backdropClick"], exportAs: ["matDrawerContainer"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "component", type: MatNavList, selector: "mat-nav-list", exportAs: ["matNavList"] }, { kind: "directive", type: MatListItemIcon, selector: "[matListItemIcon]" }, { kind: "directive", type: 
                 // directives
                 BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }, { kind: "directive", type: ModDirective, selector: "[rtMod]" }, { kind: "directive", type: RtuiScrollableContainerHeaderDirective, selector: "[rtuiScrollableHeader]" }, { kind: "directive", type: RtuiScrollableContainerContentDirective, selector: "[rtuiScrollableContent]" }, { kind: "directive", type: RtuiScrollableContainerFooterDirective, selector: "[rtuiScrollableFooter]" }, { kind: "directive", type: RtScrollToElementDirective, selector: "[rtScrollToElement]", inputs: ["rtScrollToElement", "elements"] }, { kind: "directive", type: RtIconOutlinedDirective, selector: "mat-icon[rtIconOutlined]", inputs: ["rtIconOutlined"] }, { kind: "directive", type: RtNavigationDirective, selector: "[rtNavigationDirective]", inputs: ["rtNavigationDirective"] }, { kind: "component", type: 
                 // components
@@ -427,7 +456,7 @@ class RtuiSideMenuComponent {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiSideMenuComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rtui-side-menu', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+            args: [{ selector: 'rtui-side-menu', host: { class: BEM_BLOCK$w }, providers: [BreakpointService], changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         NgTemplateOutlet,
                         MatSidenavModule,
                         MatIcon,
@@ -447,13 +476,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                         // components
                         RtuiScrollableContainerComponent,
                         RtuiSideMenuSubItemComponent,
-                    ], template: "@if (isMobile()) {\n    <rtui-scrollable rtBlock=\"rtui-mobile-side-menu\">\n        @if (headerTpl()) {\n            <ng-container *rtuiScrollableHeader>\n                <ng-container *ngTemplateOutlet=\"headerTpl() ?? null\" />\n            </ng-container>\n        }\n\n        @if (menuItems().length) {\n            <ng-container *rtuiScrollableContent>\n                <mat-nav-list\n                    rtBlock=\"rtui-mobile-side-menu-list\"\n                    [rtMod]=\"{ scrollable: selectedSubMenu()?.length && isSubMenuXScrollEnabled() }\">\n                    @if (selectedSubMenu()?.length) {\n                        <div rtElem=\"sub\" [rtScrollToElement]=\"activeMenuId()\" [elements]=\"selectedSubMenu() ?? []\">\n                            <rtui-side-menu-sub-item\n                                [item]=\"backToMainMenuButton()\"\n                                [isMobile]=\"isMobile()\"\n                                (clickSubMenuAction)=\"onBackToMainMenu()\" />\n\n                            @for (item of selectedSubMenu(); track i; let i = $index) {\n                                <rtui-side-menu-sub-item\n                                    [item]=\"item\"\n                                    [isMobile]=\"isMobile()\"\n                                    [isSubMenuXScrollEnabled]=\"isSubMenuXScrollEnabled()\"\n                                    [isSubMenuIconsOutlined]=\"isSubMenuIconsOutlined()\"\n                                    [isSubMenuButtonIconsOutlined]=\"isSubMenuButtonIconsOutlined()\"\n                                    [isSubMenuTooltipsShown]=\"isSubMenuTooltipsShown()\"\n                                    (clickSubMenuAction)=\"onClickSubMenu($event)\"\n                                    (clickSubMenuAdditionalAction)=\"clickSubMenuAdditional($event)\" />\n                            }\n                        </div>\n                    } @else {\n                        <div rtBlock=\"rtui-mobile-side-menu-list-main\">\n                            @for (item of menuItems(); track i; let i = $index) {\n                                <mat-list-item\n                                    rtBlock=\"rtui-mobile-side-menu-item\"\n                                    [rtNavigationDirective]=\"item?.link\"\n                                    [activated]=\"selectedItem() === item || (!selectedItem() && activeMenuIds().includes(item.id))\"\n                                    (click)=\"onClickMenu(item)\">\n                                    @if (item?.icon) {\n                                        <mat-icon matListItemIcon rtElem=\"icon\" [rtIconOutlined]=\"isMainMenuIconsOutlined()\">\n                                            {{ item.icon }}\n                                        </mat-icon>\n                                    }\n\n                                    @if (item?.name) {\n                                        <div rtBlock=\"rtui-mobile-side-menu-item-title\">\n                                            <div rtElem=\"text\">{{ item.name }}</div>\n\n                                            @if (item?.iconButton?.icon) {\n                                                <div rtBlock=\"rtui-mobile-side-menu-item-title-button\">\n                                                    <mat-icon rtElem=\"icon\">{{ item.iconButton?.icon }}</mat-icon>\n                                                </div>\n                                            }\n                                        </div>\n                                    }\n                                </mat-list-item>\n                            }\n                        </div>\n                    }\n                </mat-nav-list>\n            </ng-container>\n        }\n\n        @if (footerTpl()) {\n            <ng-container *rtuiScrollableFooter>\n                <ng-container *ngTemplateOutlet=\"footerTpl() ?? null\" />\n            </ng-container>\n        }\n    </rtui-scrollable>\n} @else {\n    <rtui-scrollable rtBlock=\"rtui-side-menu\">\n        @if (headerTpl()) {\n            <ng-container *rtuiScrollableHeader>\n                <ng-container *ngTemplateOutlet=\"headerTpl() ?? null\" />\n            </ng-container>\n        }\n\n        @if (menuItems().length) {\n            <ng-container *rtuiScrollableContent>\n                <mat-nav-list rtElem=\"list\">\n                    @for (item of menuItems(); track i; let i = $index) {\n                        <a\n                            rtBlock=\"rtui-side-menu-item\"\n                            [rtNavigationDirective]=\"item?.link\"\n                            (mouseenter)=\"toggleSubMenu(item)\"\n                            (click)=\"onClickMenu(item)\">\n                            @if (item?.icon) {\n                                <mat-list-item\n                                    rtBlock=\"rtui-side-menu-item-button\"\n                                    [activated]=\"selectedItem() === item || (!selectedItem() && activeMenuIds().includes(item.id))\">\n                                    <div rtElem=\"icon\">\n                                        <mat-icon [rtIconOutlined]=\"isMainMenuIconsOutlined()\">{{ item.icon }}</mat-icon>\n                                    </div>\n                                </mat-list-item>\n                            }\n\n                            @if (item?.name) {\n                                <div rtElem=\"title\">{{ item.name }}</div>\n                            }\n                        </a>\n                    }\n                </mat-nav-list>\n            </ng-container>\n        }\n\n        @if (footerTpl()) {\n            <ng-container *rtuiScrollableFooter>\n                <ng-container *ngTemplateOutlet=\"footerTpl() ?? null\" />\n            </ng-container>\n        }\n    </rtui-scrollable>\n\n    <mat-drawer-container\n        rtBlock=\"rtui-sub-side-menu\"\n        [rtMod]=\"{ opened: subMenuRef()?.opened }\"\n        [hasBackdrop]=\"true\"\n        (backdropClick)=\"closeSubMenu()\">\n        <mat-drawer rtBlock=\"rtui-sub-side-menu-content\" mode=\"side\" position=\"start\" (mouseleave)=\"toggleSubMenu()\">\n            <rtui-scrollable>\n                <ng-container *rtuiScrollableContent>\n                    @if (subMenuRef()?.opened && selectedSubMenu()?.length) {\n                        <mat-nav-list\n                            rtElem=\"list\"\n                            [rtMod]=\"{ scrollable: isSubMenuXScrollEnabled() }\"\n                            [rtScrollToElement]=\"activeMenuId()\"\n                            [elements]=\"selectedSubMenu() ?? []\">\n                            @for (item of selectedSubMenu(); track i; let i = $index) {\n                                <rtui-side-menu-sub-item\n                                    [item]=\"item\"\n                                    [isMobile]=\"isMobile()\"\n                                    [isSubMenuXScrollEnabled]=\"isSubMenuXScrollEnabled()\"\n                                    [isSubMenuIconsOutlined]=\"isSubMenuIconsOutlined()\"\n                                    [isSubMenuButtonIconsOutlined]=\"isSubMenuButtonIconsOutlined()\"\n                                    [isSubMenuTooltipsShown]=\"isSubMenuTooltipsShown()\"\n                                    (clickSubMenuAction)=\"onClickSubMenu($event)\"\n                                    (clickSubMenuAdditionalAction)=\"clickSubMenuAdditional($event)\" />\n                            }\n                        </mat-nav-list>\n                    }\n                </ng-container>\n            </rtui-scrollable>\n        </mat-drawer>\n    </mat-drawer-container>\n}\n", styles: ["@charset \"UTF-8\";:host{--rt-side-menu-base-width: 5.5rem;--rt-side-menu-base-margin-top-between-items: .75rem;--rt-side-menu-item-width: 3.5rem;--rt-side-menu-item-height: 2rem;--rt-side-menu-item-font-size: .75rem;--rt-side-menu-item-text-align: center;--rt-side-menu-item-line-height: 1.1;--rt-side-menu-mobile-item-icon-size: 1.5rem;--rt-side-menu-mobile-item-title-font-size: .75rem;--rt-side-menu-mobile-item-additional-icon-size: 1rem;--rt-side-menu-sub-menu-width: 15rem;--rt-side-menu-sub-menu-item-width: 13.75rem;--rt-side-menu-sub-menu-item-title-font-size: .85rem;--mat-sidenav-scrim-color: transparent}:host .rtui-mobile-side-menu{width:var(--rt-side-menu-sub-menu-width)}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list{display:flex;width:100%;flex-direction:column}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list--scrollable{width:fit-content}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list__sub{animation:fade-in-animation .15s ease-in-out .15s forwards;opacity:0}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list .rtui-mobile-side-menu-list-main{animation:fade-in-animation .15s ease-in-out .15s forwards;opacity:0}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list .rtui-mobile-side-menu-list-main .rtui-mobile-side-menu-item__icon{width:var(--rt-side-menu-mobile-item-icon-size);height:var(--rt-side-menu-mobile-item-icon-size);font-size:var(--rt-side-menu-mobile-item-icon-size)}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list .rtui-mobile-side-menu-list-main .rtui-mobile-side-menu-item .rtui-mobile-side-menu-item-title{display:flex;align-items:center;justify-content:space-between}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list .rtui-mobile-side-menu-list-main .rtui-mobile-side-menu-item .rtui-mobile-side-menu-item-title__text{overflow:hidden;font-size:var(--rt-font-size-xs);text-overflow:ellipsis;white-space:nowrap}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list .rtui-mobile-side-menu-list-main .rtui-mobile-side-menu-item .rtui-mobile-side-menu-item-title .rtui-mobile-side-menu-item-title-button{display:flex;align-items:center;justify-content:center;border-radius:var(--rt-radius-full);margin-left:var(--rt-spacing-8)}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list .rtui-mobile-side-menu-list-main .rtui-mobile-side-menu-item .rtui-mobile-side-menu-item-title .rtui-mobile-side-menu-item-title-button__icon{width:var(--rt-side-menu-mobile-item-additional-icon-size);height:var(--rt-side-menu-mobile-item-additional-icon-size);font-size:var(--rt-side-menu-mobile-item-additional-icon-size)}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list .rtui-mobile-side-menu-list-main .rtui-mobile-side-menu-item+.rtui-mobile-side-menu-item{margin-top:var(--rt-spacing-8)}:host .rtui-side-menu{width:var(--rt-side-menu-base-width)}:host .rtui-side-menu__list{display:flex;width:100%;flex-direction:column;align-items:center}:host .rtui-side-menu__list .rtui-side-menu-item{display:flex;width:100%;flex-direction:column;align-items:center;justify-content:center;cursor:pointer}:host .rtui-side-menu__list .rtui-side-menu-item .rtui-side-menu-item-button{display:flex;width:var(--rt-side-menu-item-width);height:var(--rt-side-menu-item-height);align-items:center;justify-content:center;padding:0}:host .rtui-side-menu__list .rtui-side-menu-item .rtui-side-menu-item-button__icon{display:flex;align-items:center;justify-content:center}:host .rtui-side-menu__list .rtui-side-menu-item__title{font-size:var(--rt-side-menu-item-font-size);line-height:var(--rt-side-menu-item-line-height);text-align:var(--rt-side-menu-item-text-align)}:host .rtui-side-menu__list .rtui-side-menu-item+.rtui-side-menu-item{margin-top:var(--rt-side-menu-base-margin-top-between-items)}:host .rtui-sub-side-menu{position:fixed;top:0;left:var(--rt-side-menu-base-width);width:0;height:100%;background-color:transparent}:host .rtui-sub-side-menu--opened{width:100%}:host .rtui-sub-side-menu .rtui-sub-side-menu-content{--rt-side-menu-sub-content-shadow: 14px 0 28px rgb(0 0 0 / 25%), 10px 0 10px rgb(0 0 0 / 22%);width:var(--rt-side-menu-sub-menu-width);height:100%;border-left:1px solid var(--rt-border-neutral-default);box-shadow:var(--rt-side-menu-sub-content-shadow)}:host .rtui-sub-side-menu .rtui-sub-side-menu-content__list{width:100%;animation:fade-in-animation .15s ease-in-out .15s forwards;opacity:0}:host .rtui-sub-side-menu .rtui-sub-side-menu-content__list--scrollable{min-width:fit-content}@keyframes fade-in-animation{to{opacity:1}}\n"] }]
+                    ], template: "@if (narrow()) {\n    <rtui-scrollable rtBlock=\"rtui-mobile-side-menu\">\n        @if (headerTpl()) {\n            <ng-container *rtuiScrollableHeader>\n                <ng-container *ngTemplateOutlet=\"headerTpl() ?? null\" />\n            </ng-container>\n        }\n\n        @if (menuItems().length) {\n            <ng-container *rtuiScrollableContent>\n                <mat-nav-list\n                    rtBlock=\"rtui-mobile-side-menu-list\"\n                    [rtMod]=\"{ scrollable: selectedSubMenu()?.length && isSubMenuXScrollEnabled() }\">\n                    @if (selectedSubMenu()?.length) {\n                        <div rtElem=\"sub\" [rtScrollToElement]=\"activeMenuId()\" [elements]=\"selectedSubMenu() ?? []\">\n                            <rtui-side-menu-sub-item [item]=\"backToMainMenuButton()\" (clickSubMenuAction)=\"onBackToMainMenu()\" />\n\n                            @for (item of selectedSubMenu(); track i; let i = $index) {\n                                <rtui-side-menu-sub-item\n                                    [item]=\"item\"\n                                    [isSubMenuXScrollEnabled]=\"isSubMenuXScrollEnabled()\"\n                                    [isSubMenuIconsOutlined]=\"isSubMenuIconsOutlined()\"\n                                    [isSubMenuButtonIconsOutlined]=\"isSubMenuButtonIconsOutlined()\"\n                                    [isSubMenuTooltipsShown]=\"isSubMenuTooltipsShown()\"\n                                    (clickSubMenuAction)=\"onClickSubMenu($event)\"\n                                    (clickSubMenuAdditionalAction)=\"clickSubMenuAdditional($event)\" />\n                            }\n                        </div>\n                    } @else {\n                        <div rtBlock=\"rtui-mobile-side-menu-list-main\">\n                            @for (item of menuItems(); track i; let i = $index) {\n                                <mat-list-item\n                                    rtBlock=\"rtui-mobile-side-menu-item\"\n                                    [rtNavigationDirective]=\"item?.link\"\n                                    [activated]=\"selectedItem() === item || (!selectedItem() && activeMenuIds().includes(item.id))\"\n                                    (click)=\"onClickMenu(item)\">\n                                    @if (item?.icon) {\n                                        <mat-icon matListItemIcon rtElem=\"icon\" [rtIconOutlined]=\"isMainMenuIconsOutlined()\">\n                                            {{ item.icon }}\n                                        </mat-icon>\n                                    }\n\n                                    @if (item?.name) {\n                                        <div rtBlock=\"rtui-mobile-side-menu-item-title\">\n                                            <div rtElem=\"text\">{{ item.name }}</div>\n\n                                            @if (item?.iconButton?.icon) {\n                                                <div rtBlock=\"rtui-mobile-side-menu-item-title-button\">\n                                                    <mat-icon rtElem=\"icon\">{{ item.iconButton?.icon }}</mat-icon>\n                                                </div>\n                                            }\n                                        </div>\n                                    }\n                                </mat-list-item>\n                            }\n                        </div>\n                    }\n                </mat-nav-list>\n            </ng-container>\n        }\n\n        @if (footerTpl()) {\n            <ng-container *rtuiScrollableFooter>\n                <ng-container *ngTemplateOutlet=\"footerTpl() ?? null\" />\n            </ng-container>\n        }\n    </rtui-scrollable>\n} @else {\n    <rtui-scrollable rtBlock=\"rtui-side-menu\">\n        @if (headerTpl()) {\n            <ng-container *rtuiScrollableHeader>\n                <ng-container *ngTemplateOutlet=\"headerTpl() ?? null\" />\n            </ng-container>\n        }\n\n        @if (menuItems().length) {\n            <ng-container *rtuiScrollableContent>\n                <mat-nav-list rtElem=\"list\">\n                    @for (item of menuItems(); track i; let i = $index) {\n                        <a\n                            rtBlock=\"rtui-side-menu-item\"\n                            tabindex=\"0\"\n                            [rtNavigationDirective]=\"item?.link\"\n                            (mouseenter)=\"toggleSubMenu(item)\"\n                            (click)=\"onClickMenu(item)\"\n                            (keydown.enter)=\"onClickMenu(item)\">\n                            @if (item?.icon) {\n                                <mat-list-item\n                                    rtBlock=\"rtui-side-menu-item-button\"\n                                    [activated]=\"selectedItem() === item || (!selectedItem() && activeMenuIds().includes(item.id))\">\n                                    <div rtElem=\"icon\">\n                                        <mat-icon [rtIconOutlined]=\"isMainMenuIconsOutlined()\">{{ item.icon }}</mat-icon>\n                                    </div>\n                                </mat-list-item>\n                            }\n\n                            @if (item?.name) {\n                                <div rtElem=\"title\">{{ item.name }}</div>\n                            }\n                        </a>\n                    }\n                </mat-nav-list>\n            </ng-container>\n        }\n\n        @if (footerTpl()) {\n            <ng-container *rtuiScrollableFooter>\n                <ng-container *ngTemplateOutlet=\"footerTpl() ?? null\" />\n            </ng-container>\n        }\n    </rtui-scrollable>\n\n    <mat-drawer-container\n        rtBlock=\"rtui-sub-side-menu\"\n        [rtMod]=\"{ opened: subMenuRef()?.opened }\"\n        [hasBackdrop]=\"true\"\n        (backdropClick)=\"closeSubMenu()\">\n        <mat-drawer rtBlock=\"rtui-sub-side-menu-content\" mode=\"side\" position=\"start\" (mouseleave)=\"toggleSubMenu()\">\n            <rtui-scrollable>\n                <ng-container *rtuiScrollableContent>\n                    @if (subMenuRef()?.opened && selectedSubMenu()?.length) {\n                        <mat-nav-list\n                            rtElem=\"list\"\n                            [rtMod]=\"{ scrollable: isSubMenuXScrollEnabled() }\"\n                            [rtScrollToElement]=\"activeMenuId()\"\n                            [elements]=\"selectedSubMenu() ?? []\">\n                            @for (item of selectedSubMenu(); track i; let i = $index) {\n                                <rtui-side-menu-sub-item\n                                    [item]=\"item\"\n                                    [isSubMenuXScrollEnabled]=\"isSubMenuXScrollEnabled()\"\n                                    [isSubMenuIconsOutlined]=\"isSubMenuIconsOutlined()\"\n                                    [isSubMenuButtonIconsOutlined]=\"isSubMenuButtonIconsOutlined()\"\n                                    [isSubMenuTooltipsShown]=\"isSubMenuTooltipsShown()\"\n                                    (clickSubMenuAction)=\"onClickSubMenu($event)\"\n                                    (clickSubMenuAdditionalAction)=\"clickSubMenuAdditional($event)\" />\n                            }\n                        </mat-nav-list>\n                    }\n                </ng-container>\n            </rtui-scrollable>\n        </mat-drawer>\n    </mat-drawer-container>\n}\n", styles: ["@charset \"UTF-8\";:host{--rt-side-menu-base-width: 5.5rem;--rt-side-menu-base-margin-top-between-items: .75rem;--rt-side-menu-item-width: 3.5rem;--rt-side-menu-item-height: 2rem;--rt-side-menu-item-font-size: .75rem;--rt-side-menu-item-text-align: center;--rt-side-menu-item-line-height: 1.1;--rt-side-menu-mobile-item-icon-size: 1.5rem;--rt-side-menu-mobile-item-title-font-size: .75rem;--rt-side-menu-mobile-item-additional-icon-size: 1rem;--rt-side-menu-sub-menu-width: 15rem;--rt-side-menu-sub-menu-item-width: 13.75rem;--rt-side-menu-sub-menu-item-title-font-size: .85rem;--mat-sidenav-scrim-color: transparent}:host .rtui-mobile-side-menu{width:var(--rt-side-menu-sub-menu-width)}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list{display:flex;width:100%;flex-direction:column}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list--scrollable{width:fit-content}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list__sub{animation:fade-in-animation .15s ease-in-out .15s forwards;opacity:0}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list .rtui-mobile-side-menu-list-main{animation:fade-in-animation .15s ease-in-out .15s forwards;opacity:0}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list .rtui-mobile-side-menu-list-main .rtui-mobile-side-menu-item__icon{width:var(--rt-side-menu-mobile-item-icon-size);height:var(--rt-side-menu-mobile-item-icon-size);font-size:var(--rt-side-menu-mobile-item-icon-size)}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list .rtui-mobile-side-menu-list-main .rtui-mobile-side-menu-item .rtui-mobile-side-menu-item-title{display:flex;align-items:center;justify-content:space-between}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list .rtui-mobile-side-menu-list-main .rtui-mobile-side-menu-item .rtui-mobile-side-menu-item-title__text{overflow:hidden;font-size:var(--rt-font-size-xs);text-overflow:ellipsis;white-space:nowrap}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list .rtui-mobile-side-menu-list-main .rtui-mobile-side-menu-item .rtui-mobile-side-menu-item-title .rtui-mobile-side-menu-item-title-button{display:flex;align-items:center;justify-content:center;border-radius:var(--rt-radius-full);margin-left:var(--rt-spacing-8)}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list .rtui-mobile-side-menu-list-main .rtui-mobile-side-menu-item .rtui-mobile-side-menu-item-title .rtui-mobile-side-menu-item-title-button__icon{width:var(--rt-side-menu-mobile-item-additional-icon-size);height:var(--rt-side-menu-mobile-item-additional-icon-size);font-size:var(--rt-side-menu-mobile-item-additional-icon-size)}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list .rtui-mobile-side-menu-list-main .rtui-mobile-side-menu-item+.rtui-mobile-side-menu-item{margin-top:var(--rt-spacing-8)}:host .rtui-side-menu{width:var(--rt-side-menu-base-width)}:host .rtui-side-menu__list{display:flex;width:100%;flex-direction:column;align-items:center}:host .rtui-side-menu__list .rtui-side-menu-item{display:flex;width:100%;flex-direction:column;align-items:center;justify-content:center;cursor:pointer}:host .rtui-side-menu__list .rtui-side-menu-item .rtui-side-menu-item-button{display:flex;width:var(--rt-side-menu-item-width);height:var(--rt-side-menu-item-height);align-items:center;justify-content:center;padding:0}:host .rtui-side-menu__list .rtui-side-menu-item .rtui-side-menu-item-button__icon{display:flex;align-items:center;justify-content:center}:host .rtui-side-menu__list .rtui-side-menu-item__title{font-size:var(--rt-side-menu-item-font-size);line-height:var(--rt-side-menu-item-line-height);text-align:var(--rt-side-menu-item-text-align)}:host .rtui-side-menu__list .rtui-side-menu-item+.rtui-side-menu-item{margin-top:var(--rt-side-menu-base-margin-top-between-items)}:host .rtui-sub-side-menu{position:fixed;top:0;left:var(--rt-side-menu-base-width);width:0;height:100%;background-color:transparent}:host .rtui-sub-side-menu--opened{width:100%}:host .rtui-sub-side-menu .rtui-sub-side-menu-content{--rt-side-menu-sub-content-shadow: 14px 0 28px rgb(0 0 0 / 25%), 10px 0 10px rgb(0 0 0 / 22%);width:var(--rt-side-menu-sub-menu-width);height:100%;border-left:1px solid var(--rt-border-neutral-default);box-shadow:var(--rt-side-menu-sub-content-shadow)}:host .rtui-sub-side-menu .rtui-sub-side-menu-content__list{width:100%;animation:fade-in-animation .15s ease-in-out .15s forwards;opacity:0}:host .rtui-sub-side-menu .rtui-sub-side-menu-content__list--scrollable{min-width:fit-content}@keyframes fade-in-animation{to{opacity:1}}\n"] }]
         }], propDecorators: { headerTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => RtuiSideMenuHeaderDirective), { ...{
                             read: TemplateRef,
                         }, isSignal: true }] }], footerTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => RtuiSideMenuFooterDirective), { ...{
                             read: TemplateRef,
                         }, isSignal: true }] }], subMenuRef: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MatDrawer), { isSignal: true }] }], activeMenuIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeMenuIds", required: true }] }], menuItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "menuItems", required: false }] }], isMobile: [{ type: i0.Input, args: [{ isSignal: true, alias: "isMobile", required: false }] }], isSubMenuXScrollEnabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "isSubMenuXScrollEnabled", required: false }] }], isMainMenuIconsOutlined: [{ type: i0.Input, args: [{ isSignal: true, alias: "isMainMenuIconsOutlined", required: false }] }], isSubMenuIconsOutlined: [{ type: i0.Input, args: [{ isSignal: true, alias: "isSubMenuIconsOutlined", required: false }] }], isSubMenuButtonIconsOutlined: [{ type: i0.Input, args: [{ isSignal: true, alias: "isSubMenuButtonIconsOutlined", required: false }] }], isSubMenuTooltipsShown: [{ type: i0.Input, args: [{ isSignal: true, alias: "isSubMenuTooltipsShown", required: false }] }], closeMobileMenuAction: [{ type: i0.Output, args: ["closeMobileMenuAction"] }], clickSubMenuAction: [{ type: i0.Output, args: ["clickSubMenuAction"] }], clickSubMenuAdditionalAction: [{ type: i0.Output, args: ["clickSubMenuAdditionalAction"] }] } });
 
+const BEM_BLOCK$v = 'rtui-spinner';
 class RtuiSpinnerComponent {
     constructor() {
         this.diameter = input(32, { ...(ngDevMode ? { debugName: "diameter" } : /* istanbul ignore next */ {}), transform: numberAttribute });
@@ -461,11 +491,11 @@ class RtuiSpinnerComponent {
         this.showBackground = input(false, { ...(ngDevMode ? { debugName: "showBackground" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiSpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.5", type: RtuiSpinnerComponent, isStandalone: true, selector: "rtui-spinner", inputs: { diameter: { classPropertyName: "diameter", publicName: "diameter", isSignal: true, isRequired: false, transformFunction: null }, showBox: { classPropertyName: "showBox", publicName: "showBox", isSignal: true, isRequired: false, transformFunction: null }, showBackground: { classPropertyName: "showBackground", publicName: "showBackground", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"c-spinner c-spinner__container\" [class.c-spinner__container--bgr-color]=\"showBackground()\">\n    <div class=\"c-spinner__wrapper\" [class.c-spinner__wrapper--bgr-color]=\"showBox()\">\n        <mat-spinner [diameter]=\"diameter()\" />\n    </div>\n</div>\n", styles: [":host{position:absolute;z-index:10000;display:flex;width:100%;height:100%;align-items:center;justify-content:center}:host .c-spinner__container{display:flex;width:100%;height:100%;align-items:center;justify-content:center}:host .c-spinner__container--bgr-color{background-color:color-mix(in srgb,var(--rt-bg-base-subtle) 85%,transparent)}:host .c-spinner__wrapper{display:flex;align-items:center;justify-content:center}:host .c-spinner__wrapper mat-spinner ::ng-deep circle{stroke:var(--rt-icon-accent-brand)}:host .c-spinner__wrapper--bgr-color{--rt-spinner-backdrop-shadow: 0 1px 3px rgb(0 0 0 / 12%), 0 1px 2px rgb(0 0 0 / 24%);width:3rem;height:3rem;border-radius:var(--rt-radius-full);background:var(--rt-bg-base-base);box-shadow:var(--rt-spinner-backdrop-shadow)}\n"], dependencies: [{ kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i1$3.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.5", type: RtuiSpinnerComponent, isStandalone: true, selector: "rtui-spinner", inputs: { diameter: { classPropertyName: "diameter", publicName: "diameter", isSignal: true, isRequired: false, transformFunction: null }, showBox: { classPropertyName: "showBox", publicName: "showBox", isSignal: true, isRequired: false, transformFunction: null }, showBackground: { classPropertyName: "showBackground", publicName: "showBackground", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "rtui-spinner" }, ngImport: i0, template: "<ng-container rtBlock=\"rtui-spinner\">\n    <div rtElem=\"container\" [rtMod]=\"{ 'bgr-color': showBackground() }\">\n        <div rtElem=\"wrapper\" [rtMod]=\"{ 'bgr-color': showBox() }\">\n            <mat-spinner [diameter]=\"diameter()\" />\n        </div>\n    </div>\n</ng-container>\n", styles: [":host{position:absolute;z-index:10000;display:flex;width:100%;height:100%;align-items:center;justify-content:center}:host .rtui-spinner__container{display:flex;width:100%;height:100%;align-items:center;justify-content:center}:host .rtui-spinner__container--bgr-color{background-color:color-mix(in srgb,var(--rt-bg-base-subtle) 85%,transparent)}:host .rtui-spinner__wrapper{display:flex;align-items:center;justify-content:center}:host .rtui-spinner__wrapper mat-spinner ::ng-deep circle{stroke:var(--rt-icon-accent-brand)}:host .rtui-spinner__wrapper--bgr-color{--rt-spinner-backdrop-shadow: 0 1px 3px rgb(0 0 0 / 12%), 0 1px 2px rgb(0 0 0 / 24%);width:3rem;height:3rem;border-radius:var(--rt-radius-full);background:var(--rt-bg-base-base);box-shadow:var(--rt-spinner-backdrop-shadow)}\n"], dependencies: [{ kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i1$3.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }, { kind: "directive", type: ModDirective, selector: "[rtMod]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiSpinnerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rtui-spinner', imports: [MatProgressSpinnerModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"c-spinner c-spinner__container\" [class.c-spinner__container--bgr-color]=\"showBackground()\">\n    <div class=\"c-spinner__wrapper\" [class.c-spinner__wrapper--bgr-color]=\"showBox()\">\n        <mat-spinner [diameter]=\"diameter()\" />\n    </div>\n</div>\n", styles: [":host{position:absolute;z-index:10000;display:flex;width:100%;height:100%;align-items:center;justify-content:center}:host .c-spinner__container{display:flex;width:100%;height:100%;align-items:center;justify-content:center}:host .c-spinner__container--bgr-color{background-color:color-mix(in srgb,var(--rt-bg-base-subtle) 85%,transparent)}:host .c-spinner__wrapper{display:flex;align-items:center;justify-content:center}:host .c-spinner__wrapper mat-spinner ::ng-deep circle{stroke:var(--rt-icon-accent-brand)}:host .c-spinner__wrapper--bgr-color{--rt-spinner-backdrop-shadow: 0 1px 3px rgb(0 0 0 / 12%), 0 1px 2px rgb(0 0 0 / 24%);width:3rem;height:3rem;border-radius:var(--rt-radius-full);background:var(--rt-bg-base-base);box-shadow:var(--rt-spinner-backdrop-shadow)}\n"] }]
+            args: [{ selector: 'rtui-spinner', imports: [MatProgressSpinnerModule, BlockDirective, ElemDirective, ModDirective], host: { class: BEM_BLOCK$v }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container rtBlock=\"rtui-spinner\">\n    <div rtElem=\"container\" [rtMod]=\"{ 'bgr-color': showBackground() }\">\n        <div rtElem=\"wrapper\" [rtMod]=\"{ 'bgr-color': showBox() }\">\n            <mat-spinner [diameter]=\"diameter()\" />\n        </div>\n    </div>\n</ng-container>\n", styles: [":host{position:absolute;z-index:10000;display:flex;width:100%;height:100%;align-items:center;justify-content:center}:host .rtui-spinner__container{display:flex;width:100%;height:100%;align-items:center;justify-content:center}:host .rtui-spinner__container--bgr-color{background-color:color-mix(in srgb,var(--rt-bg-base-subtle) 85%,transparent)}:host .rtui-spinner__wrapper{display:flex;align-items:center;justify-content:center}:host .rtui-spinner__wrapper mat-spinner ::ng-deep circle{stroke:var(--rt-icon-accent-brand)}:host .rtui-spinner__wrapper--bgr-color{--rt-spinner-backdrop-shadow: 0 1px 3px rgb(0 0 0 / 12%), 0 1px 2px rgb(0 0 0 / 24%);width:3rem;height:3rem;border-radius:var(--rt-radius-full);background:var(--rt-bg-base-base);box-shadow:var(--rt-spinner-backdrop-shadow)}\n"] }]
         }], propDecorators: { diameter: [{ type: i0.Input, args: [{ isSignal: true, alias: "diameter", required: false }] }], showBox: [{ type: i0.Input, args: [{ isSignal: true, alias: "showBox", required: false }] }], showBackground: [{ type: i0.Input, args: [{ isSignal: true, alias: "showBackground", required: false }] }] } });
 
 class AsideRef {
@@ -495,24 +525,23 @@ var ASIDE_BUTTONS_ENUM;
     ASIDE_BUTTONS_ENUM["RESET"] = "Reset";
 })(ASIDE_BUTTONS_ENUM || (ASIDE_BUTTONS_ENUM = {}));
 
+const BEM_BLOCK$u = 'rtui-aside-panel';
 class RtuiAsidePanelComponent {
     constructor() {
         this.#asideRef = inject(ASIDE_REF);
-        this.#breakpointObserver = inject(BreakpointObserver);
+        this.#changeDetectorRef = inject(ChangeDetectorRef);
         this._state = `enter-${this.#asideRef.position}`;
         this.portal = this.#createPortal(this.#asideRef);
         this.position = this.#asideRef.position;
-        this.isSmall$ = this.#breakpointObserver
-            .observe(['(max-width: 1023px)'])
-            .pipe(map((result) => result.matches));
     }
     #asideRef;
-    #breakpointObserver;
+    #changeDetectorRef;
     close() {
         this.#asideRef.close();
     }
     startExitAnimation() {
         this._state = `exit-${this.#asideRef.position}`;
+        this.#changeDetectorRef.markForCheck();
     }
     #createPortal(asideRef) {
         const injector = Injector.create({
@@ -526,7 +555,7 @@ class RtuiAsidePanelComponent {
         return new ComponentPortal(asideRef.component, null, injector);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiAsidePanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.5", type: RtuiAsidePanelComponent, isStandalone: true, selector: "rtui-aside-panel", host: { properties: { "@aside": "this._state" } }, ngImport: i0, template: "<div\n    class=\"c-aside\"\n    [class.position-left]=\"position === 'left'\"\n    [class.position-right]=\"position === 'right'\"\n    [class.full-screen]=\"isSmall$ | async\">\n    <ng-container *cdkPortalOutlet=\"portal\" />\n</div>\n", styles: ["@charset \"UTF-8\";:root{--rt-aside-host-width: 33.75rem;--rt-aside-host-box-shadow: 0 0 1rem 0 var(--rt-color-dark-a10);--rt-aside-host-background-color: var(--rt-bg-base-base);--rt-aside-header-padding: 2rem;--rt-aside-header-mobile-padding: 1rem;--rt-aside-header-back-button-margin-right: 1rem;--rt-aside-header-title-font-size: 1.5rem;--rt-aside-header-title-line-height: 1.1;--rt-aside-header-title-font-weight: 600;--rt-aside-header-description-font-size: 1rem;--rt-aside-header-description-margin-bottom: .25rem;--rt-aside-header-description-color: var(--rt-text-base-secondary);--rt-aside-header-addition-font-size: 1rem;--rt-aside-header-addition-margin-top: .25rem;--rt-aside-header-addition-color: var(--rt-text-base-secondary);--rt-aside-header-actions-margin-left: 1rem;--rt-aside-header-action-button-margin-left: .75rem;--rt-aside-content-padding: 0 2rem;--rt-aside-content-mobile-padding: 0 1rem;--rt-aside-footer-padding: 2rem;--rt-aside-footer-margin-left-between-buttons: 1rem;--rt-aside-footer-mobile-padding: 1rem;--rt-aside-error-box-height: 2rem;--rt-aside-error-box-padding: .5rem;--rt-aside-error-box-margin: 2rem 0 2rem 0;--rt-aside-error-box-border: 1px solid var(--rt-border-accent-danger-soft);--rt-aside-error-box-border-radius: .375rem;--rt-aside-error-box-title-font-size: 1rem;--rt-aside-error-box-title-font-color: var(--rt-text-accent-danger-soft);--rt-aside-error-box-button-font-size: 1rem;--rt-aside-error-box-button-font-color: var(--rt-text-base-strong);--rt-aside-tab-indicator-width: 6rem;--rt-aside-tab-badge-color: var(--mdc-filled-button-container-color);--rt-aside-tab-badge-incorrect-color: var(--rt-text-accent-danger);--rt-aside-footer-margin-left-betwen-buttons: var(--rt-aside-footer-margin-left-between-buttons)}.icon-badge{position:absolute!important}.title-badge{top:-.5rem;margin-left:var(--rt-spacing-4)}.icon-badge .mat-badge-content,.title-badge .mat-badge-content{background-color:var(--rt-aside-tab-badge-color)}.icon-badge.--incorrect .mat-badge-content,.title-badge.--incorrect .mat-badge-content{background-color:var(--rt-aside-tab-badge-incorrect-color)}.c-aside{position:relative;width:var(--rt-aside-host-width);height:100vh;max-height:100vh;background-color:var(--rt-aside-host-background-color);box-shadow:var(--rt-aside-host-box-shadow)}.c-aside .mdc-tab-indicator__content.mdc-tab-indicator__content--underline{width:var(--rt-aside-tab-indicator-width)}@media screen and (max-width:599px){.c-aside{width:100vw}}.c-aside-header{padding:var(--rt-aside-header-padding)}.c-aside-header .back-button{margin-right:var(--rt-aside-header-back-button-margin-right)}.c-aside-header .c-aside-title{display:flex;width:100%;height:100%;flex-direction:column;align-items:flex-start;justify-content:center}.c-aside-header .c-aside-title__descr{margin-bottom:var(--rt-aside-header-description-margin-bottom);color:var(--rt-aside-header-description-color);font-size:var(--rt-aside-header-description-font-size)}.c-aside-header .c-aside-title__txt{font-size:var(--rt-aside-header-title-font-size);font-weight:var(--rt-aside-header-title-font-weight);line-height:var(--rt-aside-header-title-line-height)}.c-aside-header .c-aside-title__addition{margin-top:var(--rt-aside-header-addition-margin-top);color:var(--rt-aside-header-addition-color);font-size:var(--rt-aside-header-addition-font-size)}.c-aside-header .c-aside-title__descr,.c-aside-header .c-aside-title__txt,.c-aside-header .c-aside-title__addition{overflow:hidden;width:100%;text-overflow:ellipsis;white-space:nowrap}.c-aside-header .c-aside-actions{margin-left:var(--rt-aside-header-actions-margin-left)}.c-aside-header .c-aside-actions__action{margin-left:var(--rt-aside-header-action-button-margin-left)}@media screen and (max-width:599px){.c-aside-header{padding:var(--rt-aside-header-mobile-padding)}}.c-aside-content{display:flex;width:100%;height:100%;flex-direction:column;align-items:center;justify-content:flex-start;padding:var(--rt-aside-content-padding)}.c-aside-content .mat-mdc-tab-header{position:sticky;z-index:1000;top:0;background:var(--rt-bg-base-base)}@media screen and (max-width:599px){.c-aside-content{padding:var(--rt-aside-content-mobile-padding)}}.c-aside-footer{display:flex;align-items:center;justify-content:flex-end;padding:var(--rt-aside-footer-padding)}.c-aside-footer .c-aside-footer-btn__title{text-transform:uppercase}.c-aside-footer .c-aside-footer-btn+.c-aside-footer-btn{margin-left:var(--rt-aside-footer-margin-left-between-buttons)}@media screen and (max-width:599px){.c-aside-footer{padding:var(--rt-aside-footer-mobile-padding)}}\n"], dependencies: [{ kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i1$4.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], animations: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.5", type: RtuiAsidePanelComponent, isStandalone: true, selector: "rtui-aside-panel", host: { properties: { "@aside": "this._state" }, classAttribute: "rtui-aside-panel" }, ngImport: i0, template: "<div rtBlock=\"c-aside\">\n    <ng-container *cdkPortalOutlet=\"portal\" />\n</div>\n", styles: ["@charset \"UTF-8\";:root{--rt-aside-host-width: 33.75rem;--rt-aside-host-box-shadow: 0 0 1rem 0 var(--rt-color-dark-a10);--rt-aside-host-background-color: var(--rt-bg-base-base);--rt-aside-header-padding: 2rem;--rt-aside-header-mobile-padding: 1rem;--rt-aside-header-back-button-margin-right: 1rem;--rt-aside-header-title-font-size: 1.5rem;--rt-aside-header-title-line-height: 1.1;--rt-aside-header-title-font-weight: 600;--rt-aside-header-description-font-size: 1rem;--rt-aside-header-description-margin-bottom: .25rem;--rt-aside-header-description-color: var(--rt-text-base-secondary);--rt-aside-header-addition-font-size: 1rem;--rt-aside-header-addition-margin-top: .25rem;--rt-aside-header-addition-color: var(--rt-text-base-secondary);--rt-aside-header-actions-margin-left: 1rem;--rt-aside-header-action-button-margin-left: .75rem;--rt-aside-content-padding: 0 2rem;--rt-aside-content-mobile-padding: 0 1rem;--rt-aside-footer-padding: 2rem;--rt-aside-footer-margin-left-between-buttons: 1rem;--rt-aside-footer-mobile-padding: 1rem;--rt-aside-error-box-height: 2rem;--rt-aside-error-box-padding: .5rem;--rt-aside-error-box-margin: 2rem 0 2rem 0;--rt-aside-error-box-border: 1px solid var(--rt-border-accent-danger-soft);--rt-aside-error-box-border-radius: .375rem;--rt-aside-error-box-title-font-size: 1rem;--rt-aside-error-box-title-font-color: var(--rt-text-accent-danger-soft);--rt-aside-error-box-button-font-size: 1rem;--rt-aside-error-box-button-font-color: var(--rt-text-base-strong);--rt-aside-tab-indicator-width: 6rem;--rt-aside-tab-badge-color: var(--mdc-filled-button-container-color);--rt-aside-tab-badge-incorrect-color: var(--rt-text-accent-danger);--rt-aside-footer-margin-left-betwen-buttons: var(--rt-aside-footer-margin-left-between-buttons)}.icon-badge{position:absolute!important}.title-badge{top:-.5rem;margin-left:var(--rt-spacing-4)}.icon-badge .mat-badge-content,.title-badge .mat-badge-content{background-color:var(--rt-aside-tab-badge-color)}.icon-badge.--incorrect .mat-badge-content,.title-badge.--incorrect .mat-badge-content{background-color:var(--rt-aside-tab-badge-incorrect-color)}.c-aside{position:relative;width:var(--rt-aside-host-width);height:100vh;max-height:100vh;background-color:var(--rt-aside-host-background-color);box-shadow:var(--rt-aside-host-box-shadow)}.c-aside .mdc-tab-indicator__content.mdc-tab-indicator__content--underline{width:var(--rt-aside-tab-indicator-width)}@media screen and (max-width:599px){.c-aside{width:100vw}}.c-aside-header{padding:var(--rt-aside-header-padding)}.c-aside-header .back-button{margin-right:var(--rt-aside-header-back-button-margin-right)}.c-aside-header .c-aside-title{display:flex;width:100%;height:100%;flex-direction:column;align-items:flex-start;justify-content:center}.c-aside-header .c-aside-title__descr{margin-bottom:var(--rt-aside-header-description-margin-bottom);color:var(--rt-aside-header-description-color);font-size:var(--rt-aside-header-description-font-size)}.c-aside-header .c-aside-title__txt{font-size:var(--rt-aside-header-title-font-size);font-weight:var(--rt-aside-header-title-font-weight);line-height:var(--rt-aside-header-title-line-height)}.c-aside-header .c-aside-title__addition{margin-top:var(--rt-aside-header-addition-margin-top);color:var(--rt-aside-header-addition-color);font-size:var(--rt-aside-header-addition-font-size)}.c-aside-header .c-aside-title__descr,.c-aside-header .c-aside-title__txt,.c-aside-header .c-aside-title__addition{overflow:hidden;width:100%;text-overflow:ellipsis;white-space:nowrap}.c-aside-header .c-aside-actions{margin-left:var(--rt-aside-header-actions-margin-left)}.c-aside-header .c-aside-actions__action{margin-left:var(--rt-aside-header-action-button-margin-left)}@media screen and (max-width:599px){.c-aside-header{padding:var(--rt-aside-header-mobile-padding)}}.c-aside-content{display:flex;width:100%;height:100%;flex-direction:column;align-items:center;justify-content:flex-start;padding:var(--rt-aside-content-padding)}.c-aside-content .mat-mdc-tab-header{position:sticky;z-index:1000;top:0;background:var(--rt-bg-base-base)}@media screen and (max-width:599px){.c-aside-content{padding:var(--rt-aside-content-mobile-padding)}}.c-aside-footer{display:flex;align-items:center;justify-content:flex-end;padding:var(--rt-aside-footer-padding)}.c-aside-footer .c-aside-footer-btn__title{text-transform:uppercase}.c-aside-footer .c-aside-footer-btn+.c-aside-footer-btn{margin-left:var(--rt-aside-footer-margin-left-between-buttons)}@media screen and (max-width:599px){.c-aside-footer{padding:var(--rt-aside-footer-mobile-padding)}}\n"], dependencies: [{ kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i1$4.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "directive", type: BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }], animations: [
             trigger('aside', [
                 state('enter-left', style({ transform: 'none' })),
                 transition('* => enter-left', [
@@ -541,11 +570,11 @@ class RtuiAsidePanelComponent {
                 ]),
                 transition('enter-right => *', animate('200ms ease-in', style({ transform: 'translateX(100%)' }))),
             ]),
-        ], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None }); }
+        ], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiAsidePanelComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rtui-aside-panel', encapsulation: ViewEncapsulation.None, imports: [AsyncPipe, PortalModule], changeDetection: ChangeDetectionStrategy.Eager, animations: [
+            args: [{ selector: 'rtui-aside-panel', host: { class: BEM_BLOCK$u }, encapsulation: ViewEncapsulation.None, imports: [PortalModule, BlockDirective], changeDetection: ChangeDetectionStrategy.OnPush, animations: [
                         trigger('aside', [
                             state('enter-left', style({ transform: 'none' })),
                             transition('* => enter-left', [
@@ -560,7 +589,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                             ]),
                             transition('enter-right => *', animate('200ms ease-in', style({ transform: 'translateX(100%)' }))),
                         ]),
-                    ], template: "<div\n    class=\"c-aside\"\n    [class.position-left]=\"position === 'left'\"\n    [class.position-right]=\"position === 'right'\"\n    [class.full-screen]=\"isSmall$ | async\">\n    <ng-container *cdkPortalOutlet=\"portal\" />\n</div>\n", styles: ["@charset \"UTF-8\";:root{--rt-aside-host-width: 33.75rem;--rt-aside-host-box-shadow: 0 0 1rem 0 var(--rt-color-dark-a10);--rt-aside-host-background-color: var(--rt-bg-base-base);--rt-aside-header-padding: 2rem;--rt-aside-header-mobile-padding: 1rem;--rt-aside-header-back-button-margin-right: 1rem;--rt-aside-header-title-font-size: 1.5rem;--rt-aside-header-title-line-height: 1.1;--rt-aside-header-title-font-weight: 600;--rt-aside-header-description-font-size: 1rem;--rt-aside-header-description-margin-bottom: .25rem;--rt-aside-header-description-color: var(--rt-text-base-secondary);--rt-aside-header-addition-font-size: 1rem;--rt-aside-header-addition-margin-top: .25rem;--rt-aside-header-addition-color: var(--rt-text-base-secondary);--rt-aside-header-actions-margin-left: 1rem;--rt-aside-header-action-button-margin-left: .75rem;--rt-aside-content-padding: 0 2rem;--rt-aside-content-mobile-padding: 0 1rem;--rt-aside-footer-padding: 2rem;--rt-aside-footer-margin-left-between-buttons: 1rem;--rt-aside-footer-mobile-padding: 1rem;--rt-aside-error-box-height: 2rem;--rt-aside-error-box-padding: .5rem;--rt-aside-error-box-margin: 2rem 0 2rem 0;--rt-aside-error-box-border: 1px solid var(--rt-border-accent-danger-soft);--rt-aside-error-box-border-radius: .375rem;--rt-aside-error-box-title-font-size: 1rem;--rt-aside-error-box-title-font-color: var(--rt-text-accent-danger-soft);--rt-aside-error-box-button-font-size: 1rem;--rt-aside-error-box-button-font-color: var(--rt-text-base-strong);--rt-aside-tab-indicator-width: 6rem;--rt-aside-tab-badge-color: var(--mdc-filled-button-container-color);--rt-aside-tab-badge-incorrect-color: var(--rt-text-accent-danger);--rt-aside-footer-margin-left-betwen-buttons: var(--rt-aside-footer-margin-left-between-buttons)}.icon-badge{position:absolute!important}.title-badge{top:-.5rem;margin-left:var(--rt-spacing-4)}.icon-badge .mat-badge-content,.title-badge .mat-badge-content{background-color:var(--rt-aside-tab-badge-color)}.icon-badge.--incorrect .mat-badge-content,.title-badge.--incorrect .mat-badge-content{background-color:var(--rt-aside-tab-badge-incorrect-color)}.c-aside{position:relative;width:var(--rt-aside-host-width);height:100vh;max-height:100vh;background-color:var(--rt-aside-host-background-color);box-shadow:var(--rt-aside-host-box-shadow)}.c-aside .mdc-tab-indicator__content.mdc-tab-indicator__content--underline{width:var(--rt-aside-tab-indicator-width)}@media screen and (max-width:599px){.c-aside{width:100vw}}.c-aside-header{padding:var(--rt-aside-header-padding)}.c-aside-header .back-button{margin-right:var(--rt-aside-header-back-button-margin-right)}.c-aside-header .c-aside-title{display:flex;width:100%;height:100%;flex-direction:column;align-items:flex-start;justify-content:center}.c-aside-header .c-aside-title__descr{margin-bottom:var(--rt-aside-header-description-margin-bottom);color:var(--rt-aside-header-description-color);font-size:var(--rt-aside-header-description-font-size)}.c-aside-header .c-aside-title__txt{font-size:var(--rt-aside-header-title-font-size);font-weight:var(--rt-aside-header-title-font-weight);line-height:var(--rt-aside-header-title-line-height)}.c-aside-header .c-aside-title__addition{margin-top:var(--rt-aside-header-addition-margin-top);color:var(--rt-aside-header-addition-color);font-size:var(--rt-aside-header-addition-font-size)}.c-aside-header .c-aside-title__descr,.c-aside-header .c-aside-title__txt,.c-aside-header .c-aside-title__addition{overflow:hidden;width:100%;text-overflow:ellipsis;white-space:nowrap}.c-aside-header .c-aside-actions{margin-left:var(--rt-aside-header-actions-margin-left)}.c-aside-header .c-aside-actions__action{margin-left:var(--rt-aside-header-action-button-margin-left)}@media screen and (max-width:599px){.c-aside-header{padding:var(--rt-aside-header-mobile-padding)}}.c-aside-content{display:flex;width:100%;height:100%;flex-direction:column;align-items:center;justify-content:flex-start;padding:var(--rt-aside-content-padding)}.c-aside-content .mat-mdc-tab-header{position:sticky;z-index:1000;top:0;background:var(--rt-bg-base-base)}@media screen and (max-width:599px){.c-aside-content{padding:var(--rt-aside-content-mobile-padding)}}.c-aside-footer{display:flex;align-items:center;justify-content:flex-end;padding:var(--rt-aside-footer-padding)}.c-aside-footer .c-aside-footer-btn__title{text-transform:uppercase}.c-aside-footer .c-aside-footer-btn+.c-aside-footer-btn{margin-left:var(--rt-aside-footer-margin-left-between-buttons)}@media screen and (max-width:599px){.c-aside-footer{padding:var(--rt-aside-footer-mobile-padding)}}\n"] }]
+                    ], template: "<div rtBlock=\"c-aside\">\n    <ng-container *cdkPortalOutlet=\"portal\" />\n</div>\n", styles: ["@charset \"UTF-8\";:root{--rt-aside-host-width: 33.75rem;--rt-aside-host-box-shadow: 0 0 1rem 0 var(--rt-color-dark-a10);--rt-aside-host-background-color: var(--rt-bg-base-base);--rt-aside-header-padding: 2rem;--rt-aside-header-mobile-padding: 1rem;--rt-aside-header-back-button-margin-right: 1rem;--rt-aside-header-title-font-size: 1.5rem;--rt-aside-header-title-line-height: 1.1;--rt-aside-header-title-font-weight: 600;--rt-aside-header-description-font-size: 1rem;--rt-aside-header-description-margin-bottom: .25rem;--rt-aside-header-description-color: var(--rt-text-base-secondary);--rt-aside-header-addition-font-size: 1rem;--rt-aside-header-addition-margin-top: .25rem;--rt-aside-header-addition-color: var(--rt-text-base-secondary);--rt-aside-header-actions-margin-left: 1rem;--rt-aside-header-action-button-margin-left: .75rem;--rt-aside-content-padding: 0 2rem;--rt-aside-content-mobile-padding: 0 1rem;--rt-aside-footer-padding: 2rem;--rt-aside-footer-margin-left-between-buttons: 1rem;--rt-aside-footer-mobile-padding: 1rem;--rt-aside-error-box-height: 2rem;--rt-aside-error-box-padding: .5rem;--rt-aside-error-box-margin: 2rem 0 2rem 0;--rt-aside-error-box-border: 1px solid var(--rt-border-accent-danger-soft);--rt-aside-error-box-border-radius: .375rem;--rt-aside-error-box-title-font-size: 1rem;--rt-aside-error-box-title-font-color: var(--rt-text-accent-danger-soft);--rt-aside-error-box-button-font-size: 1rem;--rt-aside-error-box-button-font-color: var(--rt-text-base-strong);--rt-aside-tab-indicator-width: 6rem;--rt-aside-tab-badge-color: var(--mdc-filled-button-container-color);--rt-aside-tab-badge-incorrect-color: var(--rt-text-accent-danger);--rt-aside-footer-margin-left-betwen-buttons: var(--rt-aside-footer-margin-left-between-buttons)}.icon-badge{position:absolute!important}.title-badge{top:-.5rem;margin-left:var(--rt-spacing-4)}.icon-badge .mat-badge-content,.title-badge .mat-badge-content{background-color:var(--rt-aside-tab-badge-color)}.icon-badge.--incorrect .mat-badge-content,.title-badge.--incorrect .mat-badge-content{background-color:var(--rt-aside-tab-badge-incorrect-color)}.c-aside{position:relative;width:var(--rt-aside-host-width);height:100vh;max-height:100vh;background-color:var(--rt-aside-host-background-color);box-shadow:var(--rt-aside-host-box-shadow)}.c-aside .mdc-tab-indicator__content.mdc-tab-indicator__content--underline{width:var(--rt-aside-tab-indicator-width)}@media screen and (max-width:599px){.c-aside{width:100vw}}.c-aside-header{padding:var(--rt-aside-header-padding)}.c-aside-header .back-button{margin-right:var(--rt-aside-header-back-button-margin-right)}.c-aside-header .c-aside-title{display:flex;width:100%;height:100%;flex-direction:column;align-items:flex-start;justify-content:center}.c-aside-header .c-aside-title__descr{margin-bottom:var(--rt-aside-header-description-margin-bottom);color:var(--rt-aside-header-description-color);font-size:var(--rt-aside-header-description-font-size)}.c-aside-header .c-aside-title__txt{font-size:var(--rt-aside-header-title-font-size);font-weight:var(--rt-aside-header-title-font-weight);line-height:var(--rt-aside-header-title-line-height)}.c-aside-header .c-aside-title__addition{margin-top:var(--rt-aside-header-addition-margin-top);color:var(--rt-aside-header-addition-color);font-size:var(--rt-aside-header-addition-font-size)}.c-aside-header .c-aside-title__descr,.c-aside-header .c-aside-title__txt,.c-aside-header .c-aside-title__addition{overflow:hidden;width:100%;text-overflow:ellipsis;white-space:nowrap}.c-aside-header .c-aside-actions{margin-left:var(--rt-aside-header-actions-margin-left)}.c-aside-header .c-aside-actions__action{margin-left:var(--rt-aside-header-action-button-margin-left)}@media screen and (max-width:599px){.c-aside-header{padding:var(--rt-aside-header-mobile-padding)}}.c-aside-content{display:flex;width:100%;height:100%;flex-direction:column;align-items:center;justify-content:flex-start;padding:var(--rt-aside-content-padding)}.c-aside-content .mat-mdc-tab-header{position:sticky;z-index:1000;top:0;background:var(--rt-bg-base-base)}@media screen and (max-width:599px){.c-aside-content{padding:var(--rt-aside-content-mobile-padding)}}.c-aside-footer{display:flex;align-items:center;justify-content:flex-end;padding:var(--rt-aside-footer-padding)}.c-aside-footer .c-aside-footer-btn__title{text-transform:uppercase}.c-aside-footer .c-aside-footer-btn+.c-aside-footer-btn{margin-left:var(--rt-aside-footer-margin-left-between-buttons)}@media screen and (max-width:599px){.c-aside-footer{padding:var(--rt-aside-footer-mobile-padding)}}\n"] }]
         }], propDecorators: { _state: [{
                 type: HostBinding,
                 args: ['@aside']
@@ -693,6 +722,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                     selector: '[rtuiToolbarRight]',
                 }]
         }] });
+const BEM_BLOCK$t = 'rtui-toolbar';
 class RtuiToolbarComponent {
     constructor() {
         this.isVisibleToolbar = input(true, /* @ts-ignore */
@@ -703,11 +733,11 @@ class RtuiToolbarComponent {
         this.sticky = input(false, { ...(ngDevMode ? { debugName: "sticky" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: RtuiToolbarComponent, isStandalone: true, selector: "rtui-toolbar", inputs: { isVisibleToolbar: { classPropertyName: "isVisibleToolbar", publicName: "isVisibleToolbar", isSignal: true, isRequired: false, transformFunction: null }, sticky: { classPropertyName: "sticky", publicName: "sticky", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "leftToolTpl", first: true, predicate: RtuiToolbarLeftDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "centerToolTpl", first: true, predicate: RtuiToolbarCenterDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "rightToolTpl", first: true, predicate: RtuiToolbarRightDirective, descendants: true, read: TemplateRef, isSignal: true }], ngImport: i0, template: "@if ((leftToolTpl() || centerToolTpl() || rightToolTpl()) && isVisibleToolbar()) {\n    <mat-toolbar rtBlock=\"toolbar\" [rtMod]=\"{ sticky: sticky() }\">\n        <div rtBlock=\"bars\">\n            @if (leftToolTpl()) {\n                <div rtElem=\"bar\" rtMod=\"left\">\n                    <ng-template *ngTemplateOutlet=\"leftToolTpl() ?? null\" />\n                </div>\n            }\n\n            <div rtElem=\"bar\" rtMod=\"center\">\n                <ng-template *ngTemplateOutlet=\"centerToolTpl() ?? null\" />\n            </div>\n\n            @if (rightToolTpl()) {\n                <div rtElem=\"bar\" rtMod=\"right\">\n                    <ng-template *ngTemplateOutlet=\"rightToolTpl() ?? null\" />\n                </div>\n            }\n        </div>\n    </mat-toolbar>\n}\n", styles: ["@charset \"UTF-8\";:host{--rt-toolbar-body-height: 3rem;--rt-toolbar-body-padding: 0 1rem;--rt-toolbar-body-background-color: transparent;--rt-toolbar-body-mobile-height: 3rem;--rt-toolbar-bars-border-bottom-style: solid;--rt-toolbar-bars-border-bottom-width: 1px;--rt-toolbar-bars-border-bottom-color: var(--rt-border-neutral-default);--rt-toolbar-bars-left-width: fit-content;--rt-toolbar-bars-center-width: 100%;--rt-toolbar-bars-right-width: fit-content;--mat-tab-header-divider-height: 0}:host .toolbar{--mat-toolbar-standard-height: var(--rt-toolbar-body-mobile-height);--mdc-secondary-navigation-tab-container-height: var(--rt-toolbar-body-mobile-height);height:var(--rt-toolbar-body-mobile-height);min-height:var(--rt-toolbar-body-mobile-height);padding:var(--rt-toolbar-body-padding);background-color:transparent}:host .toolbar--sticky{position:sticky;top:0}@media screen and (min-width:720px){:host .toolbar{--mat-toolbar-standard-height: var(--rt-toolbar-body-height);--mdc-secondary-navigation-tab-container-height: var(--rt-toolbar-body-height);height:var(--rt-toolbar-body-height);min-height:var(--rt-toolbar-body-height)}}:host .toolbar .bars{position:relative;display:flex;width:100%;height:100%;border-bottom:var(--rt-toolbar-bars-border-bottom-width) var(--rt-toolbar-bars-border-bottom-style) var(--rt-toolbar-bars-border-bottom-color);background-color:var(--rt-toolbar-body-background-color)}:host .toolbar .bars__bar--left{width:var(--rt-toolbar-bars-left-width)}:host .toolbar .bars__bar--center{overflow:hidden;width:var(--rt-toolbar-bars-center-width)}:host .toolbar .bars__bar--right{width:var(--rt-toolbar-bars-right-width)}:host .toolbar .bars__bar--left,:host .toolbar .bars__bar--center,:host .toolbar .bars__bar--right{display:flex;height:100%;align-items:center}\n"], dependencies: [{ kind: "component", type: MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }, { kind: "directive", type: ModDirective, selector: "[rtMod]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: RtuiToolbarComponent, isStandalone: true, selector: "rtui-toolbar", inputs: { isVisibleToolbar: { classPropertyName: "isVisibleToolbar", publicName: "isVisibleToolbar", isSignal: true, isRequired: false, transformFunction: null }, sticky: { classPropertyName: "sticky", publicName: "sticky", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "rtui-toolbar" }, queries: [{ propertyName: "leftToolTpl", first: true, predicate: RtuiToolbarLeftDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "centerToolTpl", first: true, predicate: RtuiToolbarCenterDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "rightToolTpl", first: true, predicate: RtuiToolbarRightDirective, descendants: true, read: TemplateRef, isSignal: true }], ngImport: i0, template: "@if ((leftToolTpl() || centerToolTpl() || rightToolTpl()) && isVisibleToolbar()) {\n    <mat-toolbar rtBlock=\"toolbar\" [rtMod]=\"{ sticky: sticky() }\">\n        <div rtBlock=\"bars\">\n            @if (leftToolTpl()) {\n                <div rtElem=\"bar\" rtMod=\"left\">\n                    <ng-template *ngTemplateOutlet=\"leftToolTpl() ?? null\" />\n                </div>\n            }\n\n            <div rtElem=\"bar\" rtMod=\"center\">\n                <ng-template *ngTemplateOutlet=\"centerToolTpl() ?? null\" />\n            </div>\n\n            @if (rightToolTpl()) {\n                <div rtElem=\"bar\" rtMod=\"right\">\n                    <ng-template *ngTemplateOutlet=\"rightToolTpl() ?? null\" />\n                </div>\n            }\n        </div>\n    </mat-toolbar>\n}\n", styles: ["@charset \"UTF-8\";:host{--rt-toolbar-body-height: 3rem;--rt-toolbar-body-padding: 0 1rem;--rt-toolbar-body-background-color: transparent;--rt-toolbar-body-mobile-height: 3rem;--rt-toolbar-bars-border-bottom-style: solid;--rt-toolbar-bars-border-bottom-width: 1px;--rt-toolbar-bars-border-bottom-color: var(--rt-border-neutral-default);--rt-toolbar-bars-left-width: fit-content;--rt-toolbar-bars-center-width: 100%;--rt-toolbar-bars-right-width: fit-content;--mat-tab-header-divider-height: 0}:host .toolbar{--mat-toolbar-standard-height: var(--rt-toolbar-body-mobile-height);--mdc-secondary-navigation-tab-container-height: var(--rt-toolbar-body-mobile-height);height:var(--rt-toolbar-body-mobile-height);min-height:var(--rt-toolbar-body-mobile-height);padding:var(--rt-toolbar-body-padding);background-color:transparent}:host .toolbar--sticky{position:sticky;top:0}@media screen and (min-width:720px){:host .toolbar{--mat-toolbar-standard-height: var(--rt-toolbar-body-height);--mdc-secondary-navigation-tab-container-height: var(--rt-toolbar-body-height);height:var(--rt-toolbar-body-height);min-height:var(--rt-toolbar-body-height)}}:host .toolbar .bars{position:relative;display:flex;width:100%;height:100%;border-bottom:var(--rt-toolbar-bars-border-bottom-width) var(--rt-toolbar-bars-border-bottom-style) var(--rt-toolbar-bars-border-bottom-color);background-color:var(--rt-toolbar-body-background-color)}:host .toolbar .bars__bar--left{width:var(--rt-toolbar-bars-left-width)}:host .toolbar .bars__bar--center{overflow:hidden;width:var(--rt-toolbar-bars-center-width)}:host .toolbar .bars__bar--right{width:var(--rt-toolbar-bars-right-width)}:host .toolbar .bars__bar--left,:host .toolbar .bars__bar--center,:host .toolbar .bars__bar--right{display:flex;height:100%;align-items:center}\n"], dependencies: [{ kind: "component", type: MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }, { kind: "directive", type: ModDirective, selector: "[rtMod]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiToolbarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rtui-toolbar', changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatToolbar, NgTemplateOutlet, BlockDirective, ElemDirective, ModDirective], template: "@if ((leftToolTpl() || centerToolTpl() || rightToolTpl()) && isVisibleToolbar()) {\n    <mat-toolbar rtBlock=\"toolbar\" [rtMod]=\"{ sticky: sticky() }\">\n        <div rtBlock=\"bars\">\n            @if (leftToolTpl()) {\n                <div rtElem=\"bar\" rtMod=\"left\">\n                    <ng-template *ngTemplateOutlet=\"leftToolTpl() ?? null\" />\n                </div>\n            }\n\n            <div rtElem=\"bar\" rtMod=\"center\">\n                <ng-template *ngTemplateOutlet=\"centerToolTpl() ?? null\" />\n            </div>\n\n            @if (rightToolTpl()) {\n                <div rtElem=\"bar\" rtMod=\"right\">\n                    <ng-template *ngTemplateOutlet=\"rightToolTpl() ?? null\" />\n                </div>\n            }\n        </div>\n    </mat-toolbar>\n}\n", styles: ["@charset \"UTF-8\";:host{--rt-toolbar-body-height: 3rem;--rt-toolbar-body-padding: 0 1rem;--rt-toolbar-body-background-color: transparent;--rt-toolbar-body-mobile-height: 3rem;--rt-toolbar-bars-border-bottom-style: solid;--rt-toolbar-bars-border-bottom-width: 1px;--rt-toolbar-bars-border-bottom-color: var(--rt-border-neutral-default);--rt-toolbar-bars-left-width: fit-content;--rt-toolbar-bars-center-width: 100%;--rt-toolbar-bars-right-width: fit-content;--mat-tab-header-divider-height: 0}:host .toolbar{--mat-toolbar-standard-height: var(--rt-toolbar-body-mobile-height);--mdc-secondary-navigation-tab-container-height: var(--rt-toolbar-body-mobile-height);height:var(--rt-toolbar-body-mobile-height);min-height:var(--rt-toolbar-body-mobile-height);padding:var(--rt-toolbar-body-padding);background-color:transparent}:host .toolbar--sticky{position:sticky;top:0}@media screen and (min-width:720px){:host .toolbar{--mat-toolbar-standard-height: var(--rt-toolbar-body-height);--mdc-secondary-navigation-tab-container-height: var(--rt-toolbar-body-height);height:var(--rt-toolbar-body-height);min-height:var(--rt-toolbar-body-height)}}:host .toolbar .bars{position:relative;display:flex;width:100%;height:100%;border-bottom:var(--rt-toolbar-bars-border-bottom-width) var(--rt-toolbar-bars-border-bottom-style) var(--rt-toolbar-bars-border-bottom-color);background-color:var(--rt-toolbar-body-background-color)}:host .toolbar .bars__bar--left{width:var(--rt-toolbar-bars-left-width)}:host .toolbar .bars__bar--center{overflow:hidden;width:var(--rt-toolbar-bars-center-width)}:host .toolbar .bars__bar--right{width:var(--rt-toolbar-bars-right-width)}:host .toolbar .bars__bar--left,:host .toolbar .bars__bar--center,:host .toolbar .bars__bar--right{display:flex;height:100%;align-items:center}\n"] }]
+            args: [{ selector: 'rtui-toolbar', host: { class: BEM_BLOCK$t }, changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatToolbar, NgTemplateOutlet, BlockDirective, ElemDirective, ModDirective], template: "@if ((leftToolTpl() || centerToolTpl() || rightToolTpl()) && isVisibleToolbar()) {\n    <mat-toolbar rtBlock=\"toolbar\" [rtMod]=\"{ sticky: sticky() }\">\n        <div rtBlock=\"bars\">\n            @if (leftToolTpl()) {\n                <div rtElem=\"bar\" rtMod=\"left\">\n                    <ng-template *ngTemplateOutlet=\"leftToolTpl() ?? null\" />\n                </div>\n            }\n\n            <div rtElem=\"bar\" rtMod=\"center\">\n                <ng-template *ngTemplateOutlet=\"centerToolTpl() ?? null\" />\n            </div>\n\n            @if (rightToolTpl()) {\n                <div rtElem=\"bar\" rtMod=\"right\">\n                    <ng-template *ngTemplateOutlet=\"rightToolTpl() ?? null\" />\n                </div>\n            }\n        </div>\n    </mat-toolbar>\n}\n", styles: ["@charset \"UTF-8\";:host{--rt-toolbar-body-height: 3rem;--rt-toolbar-body-padding: 0 1rem;--rt-toolbar-body-background-color: transparent;--rt-toolbar-body-mobile-height: 3rem;--rt-toolbar-bars-border-bottom-style: solid;--rt-toolbar-bars-border-bottom-width: 1px;--rt-toolbar-bars-border-bottom-color: var(--rt-border-neutral-default);--rt-toolbar-bars-left-width: fit-content;--rt-toolbar-bars-center-width: 100%;--rt-toolbar-bars-right-width: fit-content;--mat-tab-header-divider-height: 0}:host .toolbar{--mat-toolbar-standard-height: var(--rt-toolbar-body-mobile-height);--mdc-secondary-navigation-tab-container-height: var(--rt-toolbar-body-mobile-height);height:var(--rt-toolbar-body-mobile-height);min-height:var(--rt-toolbar-body-mobile-height);padding:var(--rt-toolbar-body-padding);background-color:transparent}:host .toolbar--sticky{position:sticky;top:0}@media screen and (min-width:720px){:host .toolbar{--mat-toolbar-standard-height: var(--rt-toolbar-body-height);--mdc-secondary-navigation-tab-container-height: var(--rt-toolbar-body-height);height:var(--rt-toolbar-body-height);min-height:var(--rt-toolbar-body-height)}}:host .toolbar .bars{position:relative;display:flex;width:100%;height:100%;border-bottom:var(--rt-toolbar-bars-border-bottom-width) var(--rt-toolbar-bars-border-bottom-style) var(--rt-toolbar-bars-border-bottom-color);background-color:var(--rt-toolbar-body-background-color)}:host .toolbar .bars__bar--left{width:var(--rt-toolbar-bars-left-width)}:host .toolbar .bars__bar--center{overflow:hidden;width:var(--rt-toolbar-bars-center-width)}:host .toolbar .bars__bar--right{width:var(--rt-toolbar-bars-right-width)}:host .toolbar .bars__bar--left,:host .toolbar .bars__bar--center,:host .toolbar .bars__bar--right{display:flex;height:100%;align-items:center}\n"] }]
         }], propDecorators: { isVisibleToolbar: [{ type: i0.Input, args: [{ isSignal: true, alias: "isVisibleToolbar", required: false }] }], leftToolTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => RtuiToolbarLeftDirective), { ...{
                             read: TemplateRef,
                         }, isSignal: true }] }], centerToolTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => RtuiToolbarCenterDirective), { ...{
@@ -716,6 +746,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                             read: TemplateRef,
                         }, isSignal: true }] }], sticky: [{ type: i0.Input, args: [{ isSignal: true, alias: "sticky", required: false }] }] } });
 
+const BEM_BLOCK$s = 'rtui-aside-error-box';
 class AsideErrorBoxComponent {
     constructor() {
         this.#clipboard = inject(Clipboard);
@@ -732,19 +763,21 @@ class AsideErrorBoxComponent {
         setTimeout(() => this.isErrorCopied.set(false), 1000);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: AsideErrorBoxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: AsideErrorBoxComponent, isStandalone: true, selector: "rtui-aside-error-box", inputs: { error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div rtBlock=\"aside-error-box\">\n    <div rtElem=\"title\">Request Error</div>\n\n    <button\n        type=\"button\"\n        rtBlock=\"aside-error-box-button\"\n        class=\"c-button c-button--txt-base--size-sm\"\n        [class.--complete]=\"isErrorCopied()\"\n        (click)=\"onCopyToClipboard()\">\n        @if (isErrorCopied()) {\n            <mat-icon rtElem=\"icon\">done</mat-icon>\n        }\n\n        <div rtElem=\"title\">{{ isErrorCopied() ? 'Copied' : 'Copy error info' }}</div>\n    </button>\n</div>\n", styles: [":host{display:flex;width:100%}:host .aside-error-box{display:flex;width:100%;height:var(--rt-aside-error-box-height);align-items:center;justify-content:space-between;padding:var(--rt-aside-error-box-padding);border:var(--rt-aside-error-box-border);border-radius:var(--rt-aside-error-box-border-radius);margin:var(--rt-aside-error-box-margin)}:host .aside-error-box__title{color:var(--rt-aside-error-box-title-font-color);font-size:var(--rt-aside-error-box-title-font-size)}:host .aside-error-box .aside-error-box-button__icon{margin-right:var(--rt-spacing-8)}:host .aside-error-box .aside-error-box-button__title{color:var(--rt-aside-error-box-button-font-color);font-size:var(--rt-aside-error-box-button-font-size)}:host .aside-error-box .aside-error-box-button.--complete{background-color:transparent;cursor:not-allowed}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: 
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: AsideErrorBoxComponent, isStandalone: true, selector: "rtui-aside-error-box", inputs: { error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: true, transformFunction: null } }, host: { classAttribute: "rtui-aside-error-box" }, ngImport: i0, template: "<div rtBlock=\"aside-error-box\">\n    <div rtElem=\"title\">Request Error</div>\n\n    <button\n        type=\"button\"\n        rtBlock=\"aside-error-box-button\"\n        [class]=\"['rtui-btn', 'rtui-btn-secondary-text'] | concatClasses\"\n        [rtMod]=\"{ complete: isErrorCopied() }\"\n        (click)=\"onCopyToClipboard()\">\n        @if (isErrorCopied()) {\n            <mat-icon rtElem=\"icon\">done</mat-icon>\n        }\n\n        <div rtElem=\"title\">{{ isErrorCopied() ? 'Copied' : 'Copy error info' }}</div>\n    </button>\n</div>\n", styles: [":host{display:flex;width:100%}:host .aside-error-box{display:flex;width:100%;height:var(--rt-aside-error-box-height);align-items:center;justify-content:space-between;padding:var(--rt-aside-error-box-padding);border:var(--rt-aside-error-box-border);border-radius:var(--rt-aside-error-box-border-radius);margin:var(--rt-aside-error-box-margin)}:host .aside-error-box__title{color:var(--rt-aside-error-box-title-font-color);font-size:var(--rt-aside-error-box-title-font-size)}:host .aside-error-box .aside-error-box-button__icon{margin-right:var(--rt-spacing-8)}:host .aside-error-box .aside-error-box-button__title{color:var(--rt-aside-error-box-button-font-color);font-size:var(--rt-aside-error-box-button-font-size)}:host .aside-error-box .aside-error-box-button--complete{background-color:transparent;cursor:not-allowed}\n"], dependencies: [{ kind: "directive", type: ModDirective, selector: "[rtMod]" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: 
                 // bem
-                BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+                BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }, { kind: "pipe", type: ConcatClassesPipe, name: "concatClasses" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: AsideErrorBoxComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rtui-aside-error-box', imports: [
+            args: [{ selector: 'rtui-aside-error-box', host: { class: BEM_BLOCK$s }, imports: [
+                        ModDirective,
                         MatIcon,
                         MatButton,
                         // bem
                         BlockDirective,
                         ElemDirective,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div rtBlock=\"aside-error-box\">\n    <div rtElem=\"title\">Request Error</div>\n\n    <button\n        type=\"button\"\n        rtBlock=\"aside-error-box-button\"\n        class=\"c-button c-button--txt-base--size-sm\"\n        [class.--complete]=\"isErrorCopied()\"\n        (click)=\"onCopyToClipboard()\">\n        @if (isErrorCopied()) {\n            <mat-icon rtElem=\"icon\">done</mat-icon>\n        }\n\n        <div rtElem=\"title\">{{ isErrorCopied() ? 'Copied' : 'Copy error info' }}</div>\n    </button>\n</div>\n", styles: [":host{display:flex;width:100%}:host .aside-error-box{display:flex;width:100%;height:var(--rt-aside-error-box-height);align-items:center;justify-content:space-between;padding:var(--rt-aside-error-box-padding);border:var(--rt-aside-error-box-border);border-radius:var(--rt-aside-error-box-border-radius);margin:var(--rt-aside-error-box-margin)}:host .aside-error-box__title{color:var(--rt-aside-error-box-title-font-color);font-size:var(--rt-aside-error-box-title-font-size)}:host .aside-error-box .aside-error-box-button__icon{margin-right:var(--rt-spacing-8)}:host .aside-error-box .aside-error-box-button__title{color:var(--rt-aside-error-box-button-font-color);font-size:var(--rt-aside-error-box-button-font-size)}:host .aside-error-box .aside-error-box-button.--complete{background-color:transparent;cursor:not-allowed}\n"] }]
+                        ConcatClassesPipe,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div rtBlock=\"aside-error-box\">\n    <div rtElem=\"title\">Request Error</div>\n\n    <button\n        type=\"button\"\n        rtBlock=\"aside-error-box-button\"\n        [class]=\"['rtui-btn', 'rtui-btn-secondary-text'] | concatClasses\"\n        [rtMod]=\"{ complete: isErrorCopied() }\"\n        (click)=\"onCopyToClipboard()\">\n        @if (isErrorCopied()) {\n            <mat-icon rtElem=\"icon\">done</mat-icon>\n        }\n\n        <div rtElem=\"title\">{{ isErrorCopied() ? 'Copied' : 'Copy error info' }}</div>\n    </button>\n</div>\n", styles: [":host{display:flex;width:100%}:host .aside-error-box{display:flex;width:100%;height:var(--rt-aside-error-box-height);align-items:center;justify-content:space-between;padding:var(--rt-aside-error-box-padding);border:var(--rt-aside-error-box-border);border-radius:var(--rt-aside-error-box-border-radius);margin:var(--rt-aside-error-box-margin)}:host .aside-error-box__title{color:var(--rt-aside-error-box-title-font-color);font-size:var(--rt-aside-error-box-title-font-size)}:host .aside-error-box .aside-error-box-button__icon{margin-right:var(--rt-spacing-8)}:host .aside-error-box .aside-error-box-button__title{color:var(--rt-aside-error-box-button-font-color);font-size:var(--rt-aside-error-box-button-font-size)}:host .aside-error-box .aside-error-box-button--complete{background-color:transparent;cursor:not-allowed}\n"] }]
         }], propDecorators: { error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: true }] }] } });
 
 class RtuiAsideContainerHeaderDirective {
@@ -757,11 +790,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                     selector: '[rtuiAsideHeader]',
                 }]
         }] });
+const BEM_BLOCK$r = 'c-aside';
 class RtuiAsideContainerComponent {
     constructor() {
+        this.#breakpoints = inject(BreakpointService);
+        /** Экран узкий: значение входа, если приложение его дало, иначе замер кита. */
+        this.narrow = computed(() => this.isMobile() ?? !!this.#breakpoints.isMobile(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "narrow" }] : /* istanbul ignore next */ []));
         this.title = input(null, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
-        this.isMobile = input.required({ ...(ngDevMode ? { debugName: "isMobile" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /**
+         * Признак узкого экрана.
+         *
+         * @deprecated Кит определяет его сам — `RtuiBreakpointsService`. Вход оставлен ради
+         * приложений, которые уже его передают, и уйдёт в следующем крупном выпуске.
+         */
+        this.isMobile = input(null, { ...(ngDevMode ? { debugName: "isMobile" } : /* istanbul ignore next */ {}), transform: (value) => (value === null || value === undefined ? null : booleanAttribute(value)) });
         this.isSubmitButtonDisabled = input.required({ ...(ngDevMode ? { debugName: "isSubmitButtonDisabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         this.isFooterShown = input(true, { ...(ngDevMode ? { debugName: "isFooterShown" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         this.pending = input(false, { ...(ngDevMode ? { debugName: "pending" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
@@ -780,6 +824,7 @@ class RtuiAsideContainerComponent {
         this.headerAction = output();
         this.headerTpl = contentChild(RtuiAsideContainerHeaderDirective, { ...(ngDevMode ? { debugName: "headerTpl" } : /* istanbul ignore next */ {}), read: TemplateRef });
     }
+    #breakpoints;
     onSubmit() {
         this.submitAction.emit();
     }
@@ -790,7 +835,7 @@ class RtuiAsideContainerComponent {
         this.headerAction.emit(buttonName);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiAsideContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: RtuiAsideContainerComponent, isStandalone: true, selector: "rtui-aside-container", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, isMobile: { classPropertyName: "isMobile", publicName: "isMobile", isSignal: true, isRequired: true, transformFunction: null }, isSubmitButtonDisabled: { classPropertyName: "isSubmitButtonDisabled", publicName: "isSubmitButtonDisabled", isSignal: true, isRequired: true, transformFunction: null }, isFooterShown: { classPropertyName: "isFooterShown", publicName: "isFooterShown", isSignal: true, isRequired: false, transformFunction: null }, pending: { classPropertyName: "pending", publicName: "pending", isSignal: true, isRequired: false, transformFunction: null }, isRequestErrorShown: { classPropertyName: "isRequestErrorShown", publicName: "isRequestErrorShown", isSignal: true, isRequired: false, transformFunction: null }, headerActionsButtons: { classPropertyName: "headerActionsButtons", publicName: "headerActionsButtons", isSignal: true, isRequired: false, transformFunction: null }, requestError: { classPropertyName: "requestError", publicName: "requestError", isSignal: true, isRequired: false, transformFunction: null }, submitButtonTitle: { classPropertyName: "submitButtonTitle", publicName: "submitButtonTitle", isSignal: true, isRequired: false, transformFunction: null }, cancelButtonTitle: { classPropertyName: "cancelButtonTitle", publicName: "cancelButtonTitle", isSignal: true, isRequired: false, transformFunction: null }, submitButtonTooltip: { classPropertyName: "submitButtonTooltip", publicName: "submitButtonTooltip", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { submitAction: "submitAction", cancelAction: "cancelAction", headerAction: "headerAction" }, host: { classAttribute: "c-aside" }, queries: [{ propertyName: "headerTpl", first: true, predicate: RtuiAsideContainerHeaderDirective, descendants: true, read: TemplateRef, isSignal: true }], ngImport: i0, template: "@if (pending()) {\n    <rtui-spinner [showBackground]=\"true\" />\n}\n\n<rtui-scrollable cdkTrapFocus [cdkTrapFocusAutoCapture]=\"true\">\n    <ng-container *rtuiScrollableHeader>\n        <div rtBlock=\"c-aside-header\">\n            <rtui-toolbar>\n                <ng-container *rtuiToolbarLeft>\n                    <button\n                        rtBlock=\"back-button\"\n                        aria-label=\"Icon-button\"\n                        mat-icon-button\n                        matTooltip=\"Go back\"\n                        matTooltipClass=\"custom-tooltip\"\n                        matTooltipPosition=\"below\"\n                        [matTooltipDisabled]=\"isMobile()\"\n                        [disableRipple]=\"true\"\n                        (click)=\"onCancel()\">\n                        <mat-icon>arrow_back</mat-icon>\n                    </button>\n                </ng-container>\n\n                <ng-container *rtuiToolbarCenter>\n                    <div rtBlock=\"c-aside-title\">\n                        @if (headerTpl()) {\n                            <ng-container *ngTemplateOutlet=\"headerTpl() ?? null\" />\n                        } @else {\n                            {{ title() }}\n                        }\n                    </div>\n                </ng-container>\n\n                <ng-container *rtuiToolbarRight>\n                    <div rtBlock=\"c-aside-actions\">\n                        @if (headerActionsButtons()?.length) {\n                            @for (button of headerActionsButtons(); track button) {\n                                <button\n                                    rtElem=\"action\"\n                                    aria-label=\"Icon-button\"\n                                    mat-icon-button\n                                    matTooltipClass=\"custom-tooltip\"\n                                    matTooltipPosition=\"left\"\n                                    [matTooltip]=\"button.tooltip\"\n                                    [matTooltipDisabled]=\"isMobile()\"\n                                    [disableRipple]=\"true\"\n                                    [disabled]=\"button?.disabled\"\n                                    (click)=\"onHeaderActionClick(button.name)\">\n                                    <mat-icon [style.color]=\"button.color\">{{ button.icon }}</mat-icon>\n                                </button>\n                            }\n                        }\n                    </div>\n                </ng-container>\n            </rtui-toolbar>\n\n            @if (isRequestErrorShown()) {\n                <rtui-aside-error-box [error]=\"requestError()\" />\n            }\n        </div>\n    </ng-container>\n\n    <ng-container *rtuiScrollableContent>\n        <div rtBlock=\"c-aside-content\">\n            <ng-content />\n        </div>\n    </ng-container>\n\n    @if (isFooterShown()) {\n        <ng-container *rtuiScrollableFooter>\n            <div rtBlock=\"c-aside-footer\">\n                <div rtBlock=\"c-aside-footer-btn\">\n                    <button cdkFocusInitial mat-button type=\"button\" (click)=\"onCancel()\">\n                        {{ cancelButtonTitle() }}\n                    </button>\n                </div>\n\n                <div rtBlock=\"c-aside-footer-btn\">\n                    <button\n                        mat-flat-button\n                        type=\"button\"\n                        matTooltipClass=\"custom-tooltip\"\n                        matTooltipPosition=\"left\"\n                        [matTooltip]=\"submitButtonTooltip()\"\n                        [matTooltipDisabled]=\"!isSubmitButtonDisabled() || isMobile()\"\n                        [disabled]=\"isSubmitButtonDisabled()\"\n                        (click)=\"onSubmit()\">\n                        <div rtElem=\"title\">{{ submitButtonTitle() }}</div>\n                    </button>\n                </div>\n            </div>\n        </ng-container>\n    }\n</rtui-scrollable>\n", styles: [":host rtui-scrollable{--rt-scrollable-header-padding: 0;--rt-scrollable-content-padding: 0;--rt-scrollable-footer-padding: 0;--rt-scrollable-content-flex-direction: row}@supports (height: 100dvh){:host rtui-scrollable{--rt-scrollable-host-height: 100dvh}}:host rtui-toolbar{--rt-toolbar-body-height: 6rem;--rt-toolbar-body-mobile-height: 6rem;--rt-toolbar-body-padding: 0;--rt-toolbar-bars-border-bottom-width: 0}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: 
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: RtuiAsideContainerComponent, isStandalone: true, selector: "rtui-aside-container", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, isMobile: { classPropertyName: "isMobile", publicName: "isMobile", isSignal: true, isRequired: false, transformFunction: null }, isSubmitButtonDisabled: { classPropertyName: "isSubmitButtonDisabled", publicName: "isSubmitButtonDisabled", isSignal: true, isRequired: true, transformFunction: null }, isFooterShown: { classPropertyName: "isFooterShown", publicName: "isFooterShown", isSignal: true, isRequired: false, transformFunction: null }, pending: { classPropertyName: "pending", publicName: "pending", isSignal: true, isRequired: false, transformFunction: null }, isRequestErrorShown: { classPropertyName: "isRequestErrorShown", publicName: "isRequestErrorShown", isSignal: true, isRequired: false, transformFunction: null }, headerActionsButtons: { classPropertyName: "headerActionsButtons", publicName: "headerActionsButtons", isSignal: true, isRequired: false, transformFunction: null }, requestError: { classPropertyName: "requestError", publicName: "requestError", isSignal: true, isRequired: false, transformFunction: null }, submitButtonTitle: { classPropertyName: "submitButtonTitle", publicName: "submitButtonTitle", isSignal: true, isRequired: false, transformFunction: null }, cancelButtonTitle: { classPropertyName: "cancelButtonTitle", publicName: "cancelButtonTitle", isSignal: true, isRequired: false, transformFunction: null }, submitButtonTooltip: { classPropertyName: "submitButtonTooltip", publicName: "submitButtonTooltip", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { submitAction: "submitAction", cancelAction: "cancelAction", headerAction: "headerAction" }, host: { classAttribute: "c-aside" }, providers: [BreakpointService], queries: [{ propertyName: "headerTpl", first: true, predicate: RtuiAsideContainerHeaderDirective, descendants: true, read: TemplateRef, isSignal: true }], ngImport: i0, template: "@if (pending()) {\n    <rtui-spinner [showBackground]=\"true\" />\n}\n\n<rtui-scrollable cdkTrapFocus [cdkTrapFocusAutoCapture]=\"true\">\n    <ng-container *rtuiScrollableHeader>\n        <div rtBlock=\"c-aside-header\">\n            <rtui-toolbar>\n                <ng-container *rtuiToolbarLeft>\n                    <button\n                        rtBlock=\"back-button\"\n                        aria-label=\"Icon-button\"\n                        mat-icon-button\n                        matTooltip=\"Go back\"\n                        matTooltipClass=\"custom-tooltip\"\n                        matTooltipPosition=\"below\"\n                        [matTooltipDisabled]=\"narrow()\"\n                        [disableRipple]=\"true\"\n                        (click)=\"onCancel()\">\n                        <mat-icon>arrow_back</mat-icon>\n                    </button>\n                </ng-container>\n\n                <ng-container *rtuiToolbarCenter>\n                    <div rtBlock=\"c-aside-title\">\n                        @if (headerTpl()) {\n                            <ng-container *ngTemplateOutlet=\"headerTpl() ?? null\" />\n                        } @else {\n                            {{ title() }}\n                        }\n                    </div>\n                </ng-container>\n\n                <ng-container *rtuiToolbarRight>\n                    <div rtBlock=\"c-aside-actions\">\n                        @if (headerActionsButtons()?.length) {\n                            @for (button of headerActionsButtons(); track button) {\n                                <button\n                                    rtElem=\"action\"\n                                    aria-label=\"Icon-button\"\n                                    mat-icon-button\n                                    matTooltipClass=\"custom-tooltip\"\n                                    matTooltipPosition=\"left\"\n                                    [matTooltip]=\"button.tooltip\"\n                                    [matTooltipDisabled]=\"narrow()\"\n                                    [disableRipple]=\"true\"\n                                    [disabled]=\"button?.disabled\"\n                                    (click)=\"onHeaderActionClick(button.name)\">\n                                    <mat-icon [style.color]=\"button.color\">{{ button.icon }}</mat-icon>\n                                </button>\n                            }\n                        }\n                    </div>\n                </ng-container>\n            </rtui-toolbar>\n\n            @if (isRequestErrorShown()) {\n                <rtui-aside-error-box [error]=\"requestError()\" />\n            }\n        </div>\n    </ng-container>\n\n    <ng-container *rtuiScrollableContent>\n        <div rtBlock=\"c-aside-content\">\n            <ng-content />\n        </div>\n    </ng-container>\n\n    @if (isFooterShown()) {\n        <ng-container *rtuiScrollableFooter>\n            <div rtBlock=\"c-aside-footer\">\n                <div rtBlock=\"c-aside-footer-btn\">\n                    <button cdkFocusInitial mat-button type=\"button\" (click)=\"onCancel()\">\n                        {{ cancelButtonTitle() }}\n                    </button>\n                </div>\n\n                <div rtBlock=\"c-aside-footer-btn\">\n                    <button\n                        mat-flat-button\n                        type=\"button\"\n                        matTooltipClass=\"custom-tooltip\"\n                        matTooltipPosition=\"left\"\n                        [matTooltip]=\"submitButtonTooltip()\"\n                        [matTooltipDisabled]=\"!isSubmitButtonDisabled() || narrow()\"\n                        [disabled]=\"isSubmitButtonDisabled()\"\n                        (click)=\"onSubmit()\">\n                        <div rtElem=\"title\">{{ submitButtonTitle() }}</div>\n                    </button>\n                </div>\n            </div>\n        </ng-container>\n    }\n</rtui-scrollable>\n", styles: [":host rtui-scrollable{--rt-scrollable-header-padding: 0;--rt-scrollable-content-padding: 0;--rt-scrollable-footer-padding: 0;--rt-scrollable-content-flex-direction: row}@supports (height: 100dvh){:host rtui-scrollable{--rt-scrollable-host-height: 100dvh}}:host rtui-toolbar{--rt-toolbar-body-height: 6rem;--rt-toolbar-body-mobile-height: 6rem;--rt-toolbar-body-padding: 0;--rt-toolbar-bars-border-bottom-width: 0}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: 
                 // material
                 MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: 
                 // standalone components
@@ -802,7 +847,7 @@ class RtuiAsideContainerComponent {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiAsideContainerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rtui-aside-container', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+            args: [{ selector: 'rtui-aside-container', providers: [BreakpointService], changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         RouterLink,
                         NgTemplateOutlet,
                         // material
@@ -827,9 +872,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                         BlockDirective,
                         ElemDirective,
                     ], host: {
-                        class: 'c-aside',
-                    }, template: "@if (pending()) {\n    <rtui-spinner [showBackground]=\"true\" />\n}\n\n<rtui-scrollable cdkTrapFocus [cdkTrapFocusAutoCapture]=\"true\">\n    <ng-container *rtuiScrollableHeader>\n        <div rtBlock=\"c-aside-header\">\n            <rtui-toolbar>\n                <ng-container *rtuiToolbarLeft>\n                    <button\n                        rtBlock=\"back-button\"\n                        aria-label=\"Icon-button\"\n                        mat-icon-button\n                        matTooltip=\"Go back\"\n                        matTooltipClass=\"custom-tooltip\"\n                        matTooltipPosition=\"below\"\n                        [matTooltipDisabled]=\"isMobile()\"\n                        [disableRipple]=\"true\"\n                        (click)=\"onCancel()\">\n                        <mat-icon>arrow_back</mat-icon>\n                    </button>\n                </ng-container>\n\n                <ng-container *rtuiToolbarCenter>\n                    <div rtBlock=\"c-aside-title\">\n                        @if (headerTpl()) {\n                            <ng-container *ngTemplateOutlet=\"headerTpl() ?? null\" />\n                        } @else {\n                            {{ title() }}\n                        }\n                    </div>\n                </ng-container>\n\n                <ng-container *rtuiToolbarRight>\n                    <div rtBlock=\"c-aside-actions\">\n                        @if (headerActionsButtons()?.length) {\n                            @for (button of headerActionsButtons(); track button) {\n                                <button\n                                    rtElem=\"action\"\n                                    aria-label=\"Icon-button\"\n                                    mat-icon-button\n                                    matTooltipClass=\"custom-tooltip\"\n                                    matTooltipPosition=\"left\"\n                                    [matTooltip]=\"button.tooltip\"\n                                    [matTooltipDisabled]=\"isMobile()\"\n                                    [disableRipple]=\"true\"\n                                    [disabled]=\"button?.disabled\"\n                                    (click)=\"onHeaderActionClick(button.name)\">\n                                    <mat-icon [style.color]=\"button.color\">{{ button.icon }}</mat-icon>\n                                </button>\n                            }\n                        }\n                    </div>\n                </ng-container>\n            </rtui-toolbar>\n\n            @if (isRequestErrorShown()) {\n                <rtui-aside-error-box [error]=\"requestError()\" />\n            }\n        </div>\n    </ng-container>\n\n    <ng-container *rtuiScrollableContent>\n        <div rtBlock=\"c-aside-content\">\n            <ng-content />\n        </div>\n    </ng-container>\n\n    @if (isFooterShown()) {\n        <ng-container *rtuiScrollableFooter>\n            <div rtBlock=\"c-aside-footer\">\n                <div rtBlock=\"c-aside-footer-btn\">\n                    <button cdkFocusInitial mat-button type=\"button\" (click)=\"onCancel()\">\n                        {{ cancelButtonTitle() }}\n                    </button>\n                </div>\n\n                <div rtBlock=\"c-aside-footer-btn\">\n                    <button\n                        mat-flat-button\n                        type=\"button\"\n                        matTooltipClass=\"custom-tooltip\"\n                        matTooltipPosition=\"left\"\n                        [matTooltip]=\"submitButtonTooltip()\"\n                        [matTooltipDisabled]=\"!isSubmitButtonDisabled() || isMobile()\"\n                        [disabled]=\"isSubmitButtonDisabled()\"\n                        (click)=\"onSubmit()\">\n                        <div rtElem=\"title\">{{ submitButtonTitle() }}</div>\n                    </button>\n                </div>\n            </div>\n        </ng-container>\n    }\n</rtui-scrollable>\n", styles: [":host rtui-scrollable{--rt-scrollable-header-padding: 0;--rt-scrollable-content-padding: 0;--rt-scrollable-footer-padding: 0;--rt-scrollable-content-flex-direction: row}@supports (height: 100dvh){:host rtui-scrollable{--rt-scrollable-host-height: 100dvh}}:host rtui-toolbar{--rt-toolbar-body-height: 6rem;--rt-toolbar-body-mobile-height: 6rem;--rt-toolbar-body-padding: 0;--rt-toolbar-bars-border-bottom-width: 0}\n"] }]
-        }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], isMobile: [{ type: i0.Input, args: [{ isSignal: true, alias: "isMobile", required: true }] }], isSubmitButtonDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "isSubmitButtonDisabled", required: true }] }], isFooterShown: [{ type: i0.Input, args: [{ isSignal: true, alias: "isFooterShown", required: false }] }], pending: [{ type: i0.Input, args: [{ isSignal: true, alias: "pending", required: false }] }], isRequestErrorShown: [{ type: i0.Input, args: [{ isSignal: true, alias: "isRequestErrorShown", required: false }] }], headerActionsButtons: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerActionsButtons", required: false }] }], requestError: [{ type: i0.Input, args: [{ isSignal: true, alias: "requestError", required: false }] }], submitButtonTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "submitButtonTitle", required: false }] }], cancelButtonTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "cancelButtonTitle", required: false }] }], submitButtonTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "submitButtonTooltip", required: false }] }], submitAction: [{ type: i0.Output, args: ["submitAction"] }], cancelAction: [{ type: i0.Output, args: ["cancelAction"] }], headerAction: [{ type: i0.Output, args: ["headerAction"] }], headerTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => RtuiAsideContainerHeaderDirective), { ...{
+                        class: BEM_BLOCK$r,
+                    }, template: "@if (pending()) {\n    <rtui-spinner [showBackground]=\"true\" />\n}\n\n<rtui-scrollable cdkTrapFocus [cdkTrapFocusAutoCapture]=\"true\">\n    <ng-container *rtuiScrollableHeader>\n        <div rtBlock=\"c-aside-header\">\n            <rtui-toolbar>\n                <ng-container *rtuiToolbarLeft>\n                    <button\n                        rtBlock=\"back-button\"\n                        aria-label=\"Icon-button\"\n                        mat-icon-button\n                        matTooltip=\"Go back\"\n                        matTooltipClass=\"custom-tooltip\"\n                        matTooltipPosition=\"below\"\n                        [matTooltipDisabled]=\"narrow()\"\n                        [disableRipple]=\"true\"\n                        (click)=\"onCancel()\">\n                        <mat-icon>arrow_back</mat-icon>\n                    </button>\n                </ng-container>\n\n                <ng-container *rtuiToolbarCenter>\n                    <div rtBlock=\"c-aside-title\">\n                        @if (headerTpl()) {\n                            <ng-container *ngTemplateOutlet=\"headerTpl() ?? null\" />\n                        } @else {\n                            {{ title() }}\n                        }\n                    </div>\n                </ng-container>\n\n                <ng-container *rtuiToolbarRight>\n                    <div rtBlock=\"c-aside-actions\">\n                        @if (headerActionsButtons()?.length) {\n                            @for (button of headerActionsButtons(); track button) {\n                                <button\n                                    rtElem=\"action\"\n                                    aria-label=\"Icon-button\"\n                                    mat-icon-button\n                                    matTooltipClass=\"custom-tooltip\"\n                                    matTooltipPosition=\"left\"\n                                    [matTooltip]=\"button.tooltip\"\n                                    [matTooltipDisabled]=\"narrow()\"\n                                    [disableRipple]=\"true\"\n                                    [disabled]=\"button?.disabled\"\n                                    (click)=\"onHeaderActionClick(button.name)\">\n                                    <mat-icon [style.color]=\"button.color\">{{ button.icon }}</mat-icon>\n                                </button>\n                            }\n                        }\n                    </div>\n                </ng-container>\n            </rtui-toolbar>\n\n            @if (isRequestErrorShown()) {\n                <rtui-aside-error-box [error]=\"requestError()\" />\n            }\n        </div>\n    </ng-container>\n\n    <ng-container *rtuiScrollableContent>\n        <div rtBlock=\"c-aside-content\">\n            <ng-content />\n        </div>\n    </ng-container>\n\n    @if (isFooterShown()) {\n        <ng-container *rtuiScrollableFooter>\n            <div rtBlock=\"c-aside-footer\">\n                <div rtBlock=\"c-aside-footer-btn\">\n                    <button cdkFocusInitial mat-button type=\"button\" (click)=\"onCancel()\">\n                        {{ cancelButtonTitle() }}\n                    </button>\n                </div>\n\n                <div rtBlock=\"c-aside-footer-btn\">\n                    <button\n                        mat-flat-button\n                        type=\"button\"\n                        matTooltipClass=\"custom-tooltip\"\n                        matTooltipPosition=\"left\"\n                        [matTooltip]=\"submitButtonTooltip()\"\n                        [matTooltipDisabled]=\"!isSubmitButtonDisabled() || narrow()\"\n                        [disabled]=\"isSubmitButtonDisabled()\"\n                        (click)=\"onSubmit()\">\n                        <div rtElem=\"title\">{{ submitButtonTitle() }}</div>\n                    </button>\n                </div>\n            </div>\n        </ng-container>\n    }\n</rtui-scrollable>\n", styles: [":host rtui-scrollable{--rt-scrollable-header-padding: 0;--rt-scrollable-content-padding: 0;--rt-scrollable-footer-padding: 0;--rt-scrollable-content-flex-direction: row}@supports (height: 100dvh){:host rtui-scrollable{--rt-scrollable-host-height: 100dvh}}:host rtui-toolbar{--rt-toolbar-body-height: 6rem;--rt-toolbar-body-mobile-height: 6rem;--rt-toolbar-body-padding: 0;--rt-toolbar-bars-border-bottom-width: 0}\n"] }]
+        }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], isMobile: [{ type: i0.Input, args: [{ isSignal: true, alias: "isMobile", required: false }] }], isSubmitButtonDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "isSubmitButtonDisabled", required: true }] }], isFooterShown: [{ type: i0.Input, args: [{ isSignal: true, alias: "isFooterShown", required: false }] }], pending: [{ type: i0.Input, args: [{ isSignal: true, alias: "pending", required: false }] }], isRequestErrorShown: [{ type: i0.Input, args: [{ isSignal: true, alias: "isRequestErrorShown", required: false }] }], headerActionsButtons: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerActionsButtons", required: false }] }], requestError: [{ type: i0.Input, args: [{ isSignal: true, alias: "requestError", required: false }] }], submitButtonTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "submitButtonTitle", required: false }] }], cancelButtonTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "cancelButtonTitle", required: false }] }], submitButtonTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "submitButtonTooltip", required: false }] }], submitAction: [{ type: i0.Output, args: ["submitAction"] }], cancelAction: [{ type: i0.Output, args: ["cancelAction"] }], headerAction: [{ type: i0.Output, args: ["headerAction"] }], headerTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => RtuiAsideContainerHeaderDirective), { ...{
                             read: TemplateRef,
                         }, isSignal: true }] }] } });
 
@@ -861,6 +906,7 @@ const RT_UI_CONFIG = new InjectionToken('RT_UI_CONFIG', {
     factory: () => ({}),
 });
 
+const BEM_BLOCK$q = 'rtui-icon';
 const MATERIAL_SYMBOLS_FONT = 'Material Symbols Outlined';
 const fontLoaded = signal(false, /* @ts-ignore */
 ...(ngDevMode ? [{ debugName: "fontLoaded" }] : /* istanbul ignore next */ []));
@@ -902,7 +948,7 @@ class RtuiIconComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: RtuiIconComponent, isStandalone: true, selector: "rtui-icon", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, theme: { classPropertyName: "theme", publicName: "theme", isSignal: true, isRequired: false, transformFunction: null }, glyph: { classPropertyName: "glyph", publicName: "glyph", isSignal: true, isRequired: false, transformFunction: null }, outlined: { classPropertyName: "outlined", publicName: "outlined", isSignal: true, isRequired: false, transformFunction: null }, rotate: { classPropertyName: "rotate", publicName: "rotate", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()" }, classAttribute: "rtui-icon" }, hostDirectives: [{ directive: i1$5.MatTooltip, inputs: ["matTooltip", "tooltip", "matTooltipPosition", "tooltipPosition", "matTooltipDisabled", "tooltipDisabled"] }], ngImport: i0, template: "<mat-icon [rtIconOutlined]=\"outlined()\">\n    @if (glyph()) {\n        {{ glyph() }}\n    } @else {\n        <ng-content />\n    }\n</mat-icon>\n", styles: [".rtui-icon{display:inline-flex;align-items:center;justify-content:center}.rtui-icon--loading{visibility:hidden}.rtui-icon--rotate{animation:rt-icon-rotation 1s linear infinite}.rtui-icon .mat-icon{width:inherit;height:inherit;color:inherit;font-size:inherit}.rtui-icon--size-xs{width:.875rem;height:.875rem;font-size:.875rem}.rtui-icon--size-sm{width:1rem;height:1rem;font-size:1rem}.rtui-icon--size-md{width:1.5rem;height:1.5rem;font-size:1.5rem}.rtui-icon--size-lg{width:2rem;height:2rem;font-size:2rem}.rtui-icon--size-xl{width:2.5rem;height:2.5rem;font-size:2.5rem}.rtui-icon--size-xxl{width:3rem;height:3rem;font-size:3rem}.rtui-icon--size-3xl{width:3.5rem;height:3.5rem;font-size:3.5rem}.rtui-icon--theme-inherit{color:inherit}.rtui-icon--theme-primary,.rtui-icon--theme-primary-strong{color:var(--rt-icon-accent-primary)}.rtui-icon--theme-neutral{color:var(--rt-icon-neutral-soft)}.rtui-icon--theme-disabled{color:var(--rt-icon-neutral-disabled)}.rtui-icon--theme-muted{color:var(--rt-icon-neutral-soft)}.rtui-icon--theme-white{color:var(--rt-icon-static-light)}.rtui-icon--theme-danger{color:var(--rt-icon-accent-danger)}.rtui-icon--theme-success{color:var(--rt-icon-accent-success)}.rtui-button--appearance-text .rtui-icon{width:1.375rem;height:1.375rem;font-size:1.375rem}\n"], dependencies: [{ kind: "component", type: 
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: RtuiIconComponent, isStandalone: true, selector: "rtui-icon", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, theme: { classPropertyName: "theme", publicName: "theme", isSignal: true, isRequired: false, transformFunction: null }, glyph: { classPropertyName: "glyph", publicName: "glyph", isSignal: true, isRequired: false, transformFunction: null }, outlined: { classPropertyName: "outlined", publicName: "outlined", isSignal: true, isRequired: false, transformFunction: null }, rotate: { classPropertyName: "rotate", publicName: "rotate", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()" }, classAttribute: "rtui-icon" }, hostDirectives: [{ directive: i1$5.MatTooltip, inputs: ["matTooltip", "tooltip", "matTooltipPosition", "tooltipPosition", "matTooltipDisabled", "tooltipDisabled"] }], ngImport: i0, template: "<mat-icon [rtIconOutlined]=\"outlined()\">\n    @if (glyph()) {\n        {{ glyph() }}\n    } @else {\n        <ng-content />\n    }\n</mat-icon>\n", styles: ["@charset \"UTF-8\";:root{--rt-icon-text-button-size: 1.375rem}.rtui-icon{display:inline-flex;align-items:center;justify-content:center}.rtui-icon--loading{visibility:hidden}.rtui-icon--rotate{animation:rt-icon-rotation 1s linear infinite}.rtui-icon .mat-icon{width:inherit;height:inherit;color:inherit;font-size:inherit}.rtui-icon--size-xs{width:var(--rt-icon-size-xs);height:var(--rt-icon-size-xs);font-size:var(--rt-icon-size-xs)}.rtui-icon--size-sm{width:var(--rt-icon-size-sm);height:var(--rt-icon-size-sm);font-size:var(--rt-icon-size-sm)}.rtui-icon--size-md{width:var(--rt-icon-size-md);height:var(--rt-icon-size-md);font-size:var(--rt-icon-size-md)}.rtui-icon--size-lg{width:var(--rt-icon-size-lg);height:var(--rt-icon-size-lg);font-size:var(--rt-icon-size-lg)}.rtui-icon--size-xl{width:var(--rt-icon-size-xl);height:var(--rt-icon-size-xl);font-size:var(--rt-icon-size-xl)}.rtui-icon--size-xxl{width:var(--rt-icon-size-xxl);height:var(--rt-icon-size-xxl);font-size:var(--rt-icon-size-xxl)}.rtui-icon--size-3xl{width:var(--rt-icon-size-3xl);height:var(--rt-icon-size-3xl);font-size:var(--rt-icon-size-3xl)}.rtui-icon--theme-inherit{color:inherit}.rtui-icon--theme-primary,.rtui-icon--theme-primary-strong{color:var(--rt-icon-accent-primary)}.rtui-icon--theme-neutral{color:var(--rt-icon-neutral-soft)}.rtui-icon--theme-disabled{color:var(--rt-icon-neutral-disabled)}.rtui-icon--theme-muted{color:var(--rt-icon-neutral-soft)}.rtui-icon--theme-white{color:var(--rt-icon-static-light)}.rtui-icon--theme-danger{color:var(--rt-icon-accent-danger)}.rtui-icon--theme-success{color:var(--rt-icon-accent-success)}.rtui-button--appearance-text .rtui-icon{width:var(--rt-icon-text-button-size);height:var(--rt-icon-text-button-size);font-size:var(--rt-icon-text-button-size)}\n"], dependencies: [{ kind: "component", type: 
                 // material
                 MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: 
                 // directives
@@ -921,11 +967,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                             inputs: ['matTooltip: tooltip', 'matTooltipPosition: tooltipPosition', 'matTooltipDisabled: tooltipDisabled'],
                         },
                     ], host: {
-                        class: 'rtui-icon',
+                        class: BEM_BLOCK$q,
                         '[class]': 'hostClasses()',
-                    }, template: "<mat-icon [rtIconOutlined]=\"outlined()\">\n    @if (glyph()) {\n        {{ glyph() }}\n    } @else {\n        <ng-content />\n    }\n</mat-icon>\n", styles: [".rtui-icon{display:inline-flex;align-items:center;justify-content:center}.rtui-icon--loading{visibility:hidden}.rtui-icon--rotate{animation:rt-icon-rotation 1s linear infinite}.rtui-icon .mat-icon{width:inherit;height:inherit;color:inherit;font-size:inherit}.rtui-icon--size-xs{width:.875rem;height:.875rem;font-size:.875rem}.rtui-icon--size-sm{width:1rem;height:1rem;font-size:1rem}.rtui-icon--size-md{width:1.5rem;height:1.5rem;font-size:1.5rem}.rtui-icon--size-lg{width:2rem;height:2rem;font-size:2rem}.rtui-icon--size-xl{width:2.5rem;height:2.5rem;font-size:2.5rem}.rtui-icon--size-xxl{width:3rem;height:3rem;font-size:3rem}.rtui-icon--size-3xl{width:3.5rem;height:3.5rem;font-size:3.5rem}.rtui-icon--theme-inherit{color:inherit}.rtui-icon--theme-primary,.rtui-icon--theme-primary-strong{color:var(--rt-icon-accent-primary)}.rtui-icon--theme-neutral{color:var(--rt-icon-neutral-soft)}.rtui-icon--theme-disabled{color:var(--rt-icon-neutral-disabled)}.rtui-icon--theme-muted{color:var(--rt-icon-neutral-soft)}.rtui-icon--theme-white{color:var(--rt-icon-static-light)}.rtui-icon--theme-danger{color:var(--rt-icon-accent-danger)}.rtui-icon--theme-success{color:var(--rt-icon-accent-success)}.rtui-button--appearance-text .rtui-icon{width:1.375rem;height:1.375rem;font-size:1.375rem}\n"] }]
+                    }, template: "<mat-icon [rtIconOutlined]=\"outlined()\">\n    @if (glyph()) {\n        {{ glyph() }}\n    } @else {\n        <ng-content />\n    }\n</mat-icon>\n", styles: ["@charset \"UTF-8\";:root{--rt-icon-text-button-size: 1.375rem}.rtui-icon{display:inline-flex;align-items:center;justify-content:center}.rtui-icon--loading{visibility:hidden}.rtui-icon--rotate{animation:rt-icon-rotation 1s linear infinite}.rtui-icon .mat-icon{width:inherit;height:inherit;color:inherit;font-size:inherit}.rtui-icon--size-xs{width:var(--rt-icon-size-xs);height:var(--rt-icon-size-xs);font-size:var(--rt-icon-size-xs)}.rtui-icon--size-sm{width:var(--rt-icon-size-sm);height:var(--rt-icon-size-sm);font-size:var(--rt-icon-size-sm)}.rtui-icon--size-md{width:var(--rt-icon-size-md);height:var(--rt-icon-size-md);font-size:var(--rt-icon-size-md)}.rtui-icon--size-lg{width:var(--rt-icon-size-lg);height:var(--rt-icon-size-lg);font-size:var(--rt-icon-size-lg)}.rtui-icon--size-xl{width:var(--rt-icon-size-xl);height:var(--rt-icon-size-xl);font-size:var(--rt-icon-size-xl)}.rtui-icon--size-xxl{width:var(--rt-icon-size-xxl);height:var(--rt-icon-size-xxl);font-size:var(--rt-icon-size-xxl)}.rtui-icon--size-3xl{width:var(--rt-icon-size-3xl);height:var(--rt-icon-size-3xl);font-size:var(--rt-icon-size-3xl)}.rtui-icon--theme-inherit{color:inherit}.rtui-icon--theme-primary,.rtui-icon--theme-primary-strong{color:var(--rt-icon-accent-primary)}.rtui-icon--theme-neutral{color:var(--rt-icon-neutral-soft)}.rtui-icon--theme-disabled{color:var(--rt-icon-neutral-disabled)}.rtui-icon--theme-muted{color:var(--rt-icon-neutral-soft)}.rtui-icon--theme-white{color:var(--rt-icon-static-light)}.rtui-icon--theme-danger{color:var(--rt-icon-accent-danger)}.rtui-icon--theme-success{color:var(--rt-icon-accent-success)}.rtui-button--appearance-text .rtui-icon{width:var(--rt-icon-text-button-size);height:var(--rt-icon-text-button-size);font-size:var(--rt-icon-text-button-size)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], theme: [{ type: i0.Input, args: [{ isSignal: true, alias: "theme", required: false }] }], glyph: [{ type: i0.Input, args: [{ isSignal: true, alias: "glyph", required: false }] }], outlined: [{ type: i0.Input, args: [{ isSignal: true, alias: "outlined", required: false }] }], rotate: [{ type: i0.Input, args: [{ isSignal: true, alias: "rotate", required: false }] }] } });
 
+const BEM_BLOCK$p = 'rtui-button';
 class RtuiButtonComponent {
     constructor() {
         /** App-wide defaults; the resolution order is: instance input → `components.button` → `global` → library default. */
@@ -986,6 +1033,15 @@ class RtuiButtonComponent {
             disabled: this.disabled(),
         }), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "modifiers" }] : /* istanbul ignore next */ []));
+        /**
+         * Те же модификаторы строкой — они висят на хосте, потому что описывают блок целиком.
+         * Директива модификатора сюда не дотянется: хост объявлен декоратором, а не разметкой.
+         */
+        this.hostModifiers = computed(() => Object.entries(this.modifiers())
+            .filter(([, isOn]) => isOn)
+            .map(([name]) => `${BEM_BLOCK$p}--${name}`)
+            .join(' '), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hostModifiers" }] : /* istanbul ignore next */ []));
         this.type = input('icon', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
         this.design = input(/* @ts-ignore */
@@ -1021,7 +1077,7 @@ class RtuiButtonComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: RtuiButtonComponent, isStandalone: true, selector: "rtui-button", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, design: { classPropertyName: "design", publicName: "design", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, radius: { classPropertyName: "radius", publicName: "radius", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconPosition: { classPropertyName: "iconPosition", publicName: "iconPosition", isSignal: true, isRequired: false, transformFunction: null }, iconSize: { classPropertyName: "iconSize", publicName: "iconSize", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, outlined: { classPropertyName: "outlined", publicName: "outlined", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, spinnerDiameter: { classPropertyName: "spinnerDiameter", publicName: "spinnerDiameter", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, host: { properties: { "class.rtui-button-full": "fullWidth()" } }, hostDirectives: [{ directive: i1$5.MatTooltip, inputs: ["matTooltip", "tooltip", "matTooltipPosition", "tooltipPosition", "matTooltipDisabled", "tooltipDisabled", "matTooltipClass", "tooltipClass"] }], ngImport: i0, template: "<!-- Projected content is declared once and outlet-rendered per design branch: duplicating\n     <ng-content /> across @if branches assigns the projected nodes to the first slot only. -->\n<ng-template #projectedContent>\n    <ng-content />\n</ng-template>\n\n@switch (type()) {\n    @case ('pill') {\n        @if (resolvedDesign() === 'material') {\n            <!-- design: material \u2014 a native Material button; its look is owned by the Material theme -->\n            <button\n                type=\"button\"\n                class=\"rtui-button-material\"\n                [matButton]=\"materialAppearance()\"\n                [class.rtui-button-material--danger]=\"variant() === 'danger'\"\n                [disabled]=\"disabled() || loading()\"\n                (click)=\"onClick()\">\n                @if (loading()) {\n                    <rtui-spinner [diameter]=\"spinnerSize()\" [showBox]=\"false\" />\n                } @else {\n                    @if (icon() && iconPosition() === 'start') {\n                        <rtui-icon matButtonIcon [glyph]=\"icon()\" [size]=\"resolvedIconSize()\" [outlined]=\"outlined()\" />\n                    }\n                    @if (text()) {\n                        <span>{{ text() }}</span>\n                    }\n                    <ng-container [ngTemplateOutlet]=\"projectedContent\" />\n                    @if (icon() && iconPosition() === 'end') {\n                        <rtui-icon matButtonIcon iconPositionEnd [glyph]=\"icon()\" [size]=\"resolvedIconSize()\" [outlined]=\"outlined()\" />\n                    }\n                }\n            </button>\n        } @else {\n            <button\n                type=\"button\"\n                rtBlock=\"rtui-button\"\n                matRipple\n                [rtMod]=\"modifiers()\"\n                [matRippleDisabled]=\"disabled() || loading()\"\n                [disabled]=\"disabled() || loading()\"\n                (click)=\"onClick()\">\n                @if (loading()) {\n                    <rtui-spinner rtElem=\"spinner\" [diameter]=\"spinnerSize()\" [showBox]=\"false\" />\n                } @else {\n                    @if (icon() && iconPosition() === 'start') {\n                        <rtui-icon rtElem=\"icon\" [glyph]=\"icon()\" [size]=\"resolvedIconSize()\" [outlined]=\"outlined()\" />\n                    }\n                    @if (text()) {\n                        <span rtElem=\"text\">{{ text() }}</span>\n                    }\n                    <ng-container [ngTemplateOutlet]=\"projectedContent\" />\n                    @if (icon() && iconPosition() === 'end') {\n                        <rtui-icon rtElem=\"icon\" [glyph]=\"icon()\" [size]=\"resolvedIconSize()\" [outlined]=\"outlined()\" />\n                    }\n                }\n            </button>\n        }\n    }\n    @default {\n        <button\n            type=\"button\"\n            rtBlock=\"rtui-button\"\n            matRipple\n            [rtMod]=\"modifiers()\"\n            [matRippleDisabled]=\"disabled() || loading()\"\n            [disabled]=\"disabled() || loading()\"\n            (click)=\"onClick()\">\n            @if (loading()) {\n                <rtui-spinner rtElem=\"spinner\" [diameter]=\"spinnerSize()\" [showBox]=\"false\" />\n            } @else {\n                <rtui-icon rtElem=\"icon\" [glyph]=\"icon()\" [size]=\"resolvedIconSize()\" [outlined]=\"outlined()\" />\n            }\n        </button>\n    }\n}\n", styles: ["@charset \"UTF-8\";:host{display:inline-block}:host(.rtui-button-full){display:block;width:100%}:host(.rtui-button-full) .rtui-button,:host(.rtui-button-full) .rtui-button-material{width:100%}.rtui-button{position:relative;display:inline-flex;overflow:hidden;align-items:center;justify-content:center;border:0;background-color:transparent;color:var(--mat-sys-on-surface-variant);cursor:pointer;line-height:1;transition:background-color .15s ease,color .15s ease,opacity .15s ease}.rtui-button rtui-icon{color:inherit}.rtui-button rtui-spinner{display:flex;align-items:center;justify-content:center}.rtui-button:disabled{cursor:not-allowed;opacity:.38}.rtui-button--loading{cursor:wait}.rtui-button--type-icon,.rtui-button--type-fab{border-radius:1.5rem}.rtui-button--type-icon:hover:not(:disabled),.rtui-button--type-fab:hover:not(:disabled){background-color:var(--rt-bg-base-hover)}.rtui-button--type-icon.rtui-button--size-xs,.rtui-button--type-fab.rtui-button--size-xs{padding:.25rem}.rtui-button--type-icon.rtui-button--size-sm,.rtui-button--type-fab.rtui-button--size-sm{padding:.375rem}.rtui-button--type-icon.rtui-button--size-md,.rtui-button--type-fab.rtui-button--size-md{padding:.5rem}.rtui-button--type-icon.rtui-button--size-lg,.rtui-button--type-fab.rtui-button--size-lg{padding:.625rem}.rtui-button--type-icon.rtui-button--variant-primary,.rtui-button--type-fab.rtui-button--variant-primary{color:var(--rt-icon-accent-primary)}.rtui-button--type-icon.rtui-button--variant-danger,.rtui-button--type-fab.rtui-button--variant-danger{color:var(--rt-icon-accent-danger)}.rtui-button--type-icon.rtui-button--variant-success,.rtui-button--type-fab.rtui-button--variant-success{color:var(--rt-icon-accent-success)}.rtui-button--type-icon.rtui-button--variant-warning,.rtui-button--type-fab.rtui-button--variant-warning{color:var(--rt-icon-accent-warning)}.rtui-button--type-icon.rtui-button--variant-accent,.rtui-button--type-fab.rtui-button--variant-accent{color:var(--rt-icon-accent-info)}.rtui-button--type-pill{border-radius:1.5rem;background-color:var(--mat-sys-surface-container-high);color:var(--mat-sys-on-surface-variant);font-weight:500;gap:.375rem}.rtui-button--type-pill:hover:not(:disabled){background-color:var(--mat-sys-surface-container-highest)}.rtui-button--type-pill:active:not(:disabled){background-color:var(--mat-sys-surface-dim)}.rtui-button--type-pill.rtui-button--size-xs{padding:.25rem .5rem;font-size:.6875rem}.rtui-button--type-pill.rtui-button--size-sm{padding:.375rem .625rem;font-size:.75rem}.rtui-button--type-pill.rtui-button--size-md{padding:.5rem .875rem;font-size:.8125rem}.rtui-button--type-pill.rtui-button--size-lg{padding:.625rem 1rem;font-size:.875rem}.rtui-button--type-pill.rtui-button--radius-none{border-radius:0}.rtui-button--type-pill.rtui-button--radius-sm{border-radius:.25rem}.rtui-button--type-pill.rtui-button--radius-md{border-radius:.5rem}.rtui-button--type-pill.rtui-button--radius-lg{border-radius:.75rem}.rtui-button--type-pill.rtui-button--radius-full{border-radius:1.5rem}.rtui-button--type-pill.rtui-button--variant-primary{background-color:var(--rt-bg-accent-primary-subtle);color:var(--rt-text-accent-primary)}.rtui-button--type-pill.rtui-button--variant-primary:hover:not(:disabled){background-color:color-mix(in srgb,var(--rt-bg-accent-primary-subtle) 92%,var(--rt-color-neutral-100))}.rtui-button--type-pill.rtui-button--variant-primary:active:not(:disabled){background-color:color-mix(in srgb,var(--rt-bg-accent-primary-subtle) 84%,var(--rt-color-neutral-100))}.rtui-button--type-pill.rtui-button--variant-danger{background-color:var(--rt-bg-accent-danger-subtle);color:var(--rt-text-accent-danger)}.rtui-button--type-pill.rtui-button--variant-danger:hover:not(:disabled){background-color:color-mix(in srgb,var(--rt-bg-accent-danger-subtle) 92%,var(--rt-color-neutral-100))}.rtui-button--type-pill.rtui-button--variant-danger:active:not(:disabled){background-color:color-mix(in srgb,var(--rt-bg-accent-danger-subtle) 84%,var(--rt-color-neutral-100))}.rtui-button--type-pill.rtui-button--variant-success{background-color:var(--rt-bg-accent-success-subtle);color:var(--rt-text-accent-success)}.rtui-button--type-pill.rtui-button--variant-success:hover:not(:disabled){background-color:color-mix(in srgb,var(--rt-bg-accent-success-subtle) 92%,var(--rt-color-neutral-100))}.rtui-button--type-pill.rtui-button--variant-success:active:not(:disabled){background-color:color-mix(in srgb,var(--rt-bg-accent-success-subtle) 84%,var(--rt-color-neutral-100))}.rtui-button--type-pill.rtui-button--variant-warning{background-color:var(--rt-bg-accent-warning-subtle);color:var(--rt-text-accent-warning)}.rtui-button--type-pill.rtui-button--variant-warning:hover:not(:disabled){background-color:color-mix(in srgb,var(--rt-bg-accent-warning-subtle) 92%,var(--rt-color-neutral-100))}.rtui-button--type-pill.rtui-button--variant-warning:active:not(:disabled){background-color:color-mix(in srgb,var(--rt-bg-accent-warning-subtle) 84%,var(--rt-color-neutral-100))}.rtui-button--type-pill.rtui-button--variant-accent{background-color:var(--rt-bg-accent-info-subtle);color:var(--rt-text-accent-info)}.rtui-button--type-pill.rtui-button--variant-accent:hover:not(:disabled){background-color:color-mix(in srgb,var(--rt-bg-accent-info-subtle) 92%,var(--rt-color-neutral-100))}.rtui-button--type-pill.rtui-button--variant-accent:active:not(:disabled){background-color:color-mix(in srgb,var(--rt-bg-accent-info-subtle) 84%,var(--rt-color-neutral-100))}.rtui-button--type-pill.rtui-button--appearance-text{min-height:1.875rem;padding:0 .625rem;background-color:transparent;color:var(--mat-sys-on-surface-variant);font-size:1rem;font-weight:400}.rtui-button--type-pill.rtui-button--appearance-text:hover:not(:disabled){background-color:var(--rt-bg-base-hover)}.rtui-button--type-pill.rtui-button--appearance-text:active:not(:disabled){background-color:var(--rt-bg-base-hover)}.rtui-button-material rtui-spinner{display:flex;align-items:center;justify-content:center}.rtui-button-material--danger{--mat-button-filled-container-color: var(--mat-sys-error);--mat-button-filled-label-text-color: var(--mat-sys-on-error);--mat-button-filled-state-layer-color: var(--mat-sys-on-error);--mat-button-filled-ripple-color: color-mix(in srgb, var(--mat-sys-on-error) 12%, transparent);--mat-button-outlined-label-text-color: var(--mat-sys-error);--mat-button-outlined-outline-color: var(--mat-sys-error);--mat-button-outlined-state-layer-color: var(--mat-sys-error);--mat-button-outlined-ripple-color: color-mix(in srgb, var(--mat-sys-error) 12%, transparent);--mat-button-text-label-text-color: var(--mat-sys-error);--mat-button-text-state-layer-color: var(--mat-sys-error);--mat-button-text-ripple-color: color-mix(in srgb, var(--mat-sys-error) 12%, transparent);--mat-button-tonal-container-color: var(--mat-sys-error-container);--mat-button-tonal-label-text-color: var(--mat-sys-on-error-container);--mat-button-tonal-state-layer-color: var(--mat-sys-on-error-container);--mat-button-tonal-ripple-color: color-mix(in srgb, var(--mat-sys-on-error-container) 12%, transparent)}\n"], dependencies: [{ kind: "directive", type: 
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: RtuiButtonComponent, isStandalone: true, selector: "rtui-button", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, design: { classPropertyName: "design", publicName: "design", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, radius: { classPropertyName: "radius", publicName: "radius", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconPosition: { classPropertyName: "iconPosition", publicName: "iconPosition", isSignal: true, isRequired: false, transformFunction: null }, iconSize: { classPropertyName: "iconSize", publicName: "iconSize", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, outlined: { classPropertyName: "outlined", publicName: "outlined", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, spinnerDiameter: { classPropertyName: "spinnerDiameter", publicName: "spinnerDiameter", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, host: { properties: { "class": "hostModifiers()", "class.rtui-button-full": "fullWidth()" }, classAttribute: "rtui-button" }, hostDirectives: [{ directive: i1$5.MatTooltip, inputs: ["matTooltip", "tooltip", "matTooltipPosition", "tooltipPosition", "matTooltipDisabled", "tooltipDisabled", "matTooltipClass", "tooltipClass"] }], ngImport: i0, template: "<!-- Projected content is declared once and outlet-rendered per design branch: duplicating\n     <ng-content /> across @if branches assigns the projected nodes to the first slot only. -->\n<ng-template #projectedContent>\n    <ng-content />\n</ng-template>\n\n<!-- \u0411\u043B\u043E\u043A \u043E\u0431\u044A\u044F\u0432\u043B\u0435\u043D \u043A\u043E\u043D\u0442\u0435\u0439\u043D\u0435\u0440\u043E\u043C: \u043A\u043B\u0430\u0441\u0441 \u043E\u043D \u043D\u0435 \u0441\u0442\u0430\u0432\u0438\u0442 (\u0443\u0437\u0435\u043B \u043A\u043E\u043C\u043C\u0435\u043D\u0442\u0430\u0440\u0438\u044F), \u0430 \u0442\u043E\u043B\u044C\u043A\u043E \u0434\u0430\u0451\u0442 \u0438\u043C\u044F\n     \u043F\u043E\u0442\u043E\u043C\u043A\u0430\u043C. \u0421\u0430\u043C \u043A\u043B\u0430\u0441\u0441 \u0431\u043B\u043E\u043A\u0430 \u0438 \u0435\u0433\u043E \u043C\u043E\u0434\u0438\u0444\u0438\u043A\u0430\u0442\u043E\u0440\u044B \u0432\u0438\u0441\u044F\u0442 \u043D\u0430 \u0445\u043E\u0441\u0442\u0435 \u2014 \u0441\u043C. `host` \u0432 \u043A\u043E\u043C\u043F\u043E\u043D\u0435\u043D\u0442\u0435. -->\n<ng-container rtBlock=\"rtui-button\">\n    @switch (type()) {\n        @case ('pill') {\n            @if (resolvedDesign() === 'material') {\n                <!-- design: material \u2014 a native Material button; its look is owned by the Material theme -->\n                <button\n                    type=\"button\"\n                    rtElem=\"material\"\n                    [matButton]=\"materialAppearance()\"\n                    [rtMod]=\"{ danger: variant() === 'danger' }\"\n                    [disabled]=\"disabled() || loading()\"\n                    (click)=\"onClick()\">\n                    @if (loading()) {\n                        <rtui-spinner [diameter]=\"spinnerSize()\" [showBox]=\"false\" />\n                    } @else {\n                        @if (icon() && iconPosition() === 'start') {\n                            <rtui-icon matButtonIcon [glyph]=\"icon()\" [size]=\"resolvedIconSize()\" [outlined]=\"outlined()\" />\n                        }\n                        @if (text()) {\n                            <span>{{ text() }}</span>\n                        }\n                        <ng-container [ngTemplateOutlet]=\"projectedContent\" />\n                        @if (icon() && iconPosition() === 'end') {\n                            <rtui-icon matButtonIcon iconPositionEnd [glyph]=\"icon()\" [size]=\"resolvedIconSize()\" [outlined]=\"outlined()\" />\n                        }\n                    }\n                </button>\n            } @else {\n                <button\n                    type=\"button\"\n                    rtElem=\"control\"\n                    matRipple\n                    [matRippleDisabled]=\"disabled() || loading()\"\n                    [disabled]=\"disabled() || loading()\"\n                    (click)=\"onClick()\">\n                    @if (loading()) {\n                        <rtui-spinner rtElem=\"spinner\" [diameter]=\"spinnerSize()\" [showBox]=\"false\" />\n                    } @else {\n                        @if (icon() && iconPosition() === 'start') {\n                            <rtui-icon rtElem=\"icon\" [glyph]=\"icon()\" [size]=\"resolvedIconSize()\" [outlined]=\"outlined()\" />\n                        }\n                        @if (text()) {\n                            <span rtElem=\"text\">{{ text() }}</span>\n                        }\n                        <ng-container [ngTemplateOutlet]=\"projectedContent\" />\n                        @if (icon() && iconPosition() === 'end') {\n                            <rtui-icon rtElem=\"icon\" [glyph]=\"icon()\" [size]=\"resolvedIconSize()\" [outlined]=\"outlined()\" />\n                        }\n                    }\n                </button>\n            }\n        }\n        @default {\n            <button\n                type=\"button\"\n                rtElem=\"control\"\n                matRipple\n                [matRippleDisabled]=\"disabled() || loading()\"\n                [disabled]=\"disabled() || loading()\"\n                (click)=\"onClick()\">\n                @if (loading()) {\n                    <rtui-spinner rtElem=\"spinner\" [diameter]=\"spinnerSize()\" [showBox]=\"false\" />\n                } @else {\n                    <rtui-icon rtElem=\"icon\" [glyph]=\"icon()\" [size]=\"resolvedIconSize()\" [outlined]=\"outlined()\" />\n                }\n            </button>\n        }\n    }\n</ng-container>\n", styles: ["@charset \"UTF-8\";:host{display:inline-block}:host(.rtui-button-full){display:block;width:100%}:host(.rtui-button-full) .rtui-button__control,:host(.rtui-button-full) .rtui-button__material{width:100%}.rtui-button__control{position:relative;display:inline-flex;overflow:hidden;align-items:center;justify-content:center;border:0;background-color:transparent;color:var(--mat-sys-on-surface-variant);cursor:pointer;line-height:1;transition:background-color .15s ease,color .15s ease,opacity .15s ease}.rtui-button__control rtui-icon{color:inherit}.rtui-button__control rtui-spinner{display:flex;align-items:center;justify-content:center}.rtui-button__control:disabled{cursor:not-allowed;opacity:.38}.rtui-button__material rtui-spinner{display:flex;align-items:center;justify-content:center}.rtui-button__material--danger{--mat-button-filled-container-color: var(--mat-sys-error);--mat-button-filled-label-text-color: var(--mat-sys-on-error);--mat-button-filled-state-layer-color: var(--mat-sys-on-error);--mat-button-filled-ripple-color: color-mix(in srgb, var(--mat-sys-on-error) 12%, transparent);--mat-button-outlined-label-text-color: var(--mat-sys-error);--mat-button-outlined-outline-color: var(--mat-sys-error);--mat-button-outlined-state-layer-color: var(--mat-sys-error);--mat-button-outlined-ripple-color: color-mix(in srgb, var(--mat-sys-error) 12%, transparent);--mat-button-text-label-text-color: var(--mat-sys-error);--mat-button-text-state-layer-color: var(--mat-sys-error);--mat-button-text-ripple-color: color-mix(in srgb, var(--mat-sys-error) 12%, transparent);--mat-button-tonal-container-color: var(--mat-sys-error-container);--mat-button-tonal-label-text-color: var(--mat-sys-on-error-container);--mat-button-tonal-state-layer-color: var(--mat-sys-on-error-container);--mat-button-tonal-ripple-color: color-mix(in srgb, var(--mat-sys-on-error-container) 12%, transparent)}:host(.rtui-button--loading) .rtui-button__control{cursor:wait}:host(.rtui-button--type-icon) .rtui-button__control,:host(.rtui-button--type-fab) .rtui-button__control{border-radius:var(--rt-radius-xl)}:host(.rtui-button--type-icon) .rtui-button__control:hover:not(:disabled),:host(.rtui-button--type-fab) .rtui-button__control:hover:not(:disabled){background-color:var(--rt-bg-base-hover)}:host(.rtui-button--type-icon.rtui-button--size-xs) .rtui-button__control,:host(.rtui-button--type-fab.rtui-button--size-xs) .rtui-button__control{padding:var(--rt-spacing-4)}:host(.rtui-button--type-icon.rtui-button--size-sm) .rtui-button__control,:host(.rtui-button--type-fab.rtui-button--size-sm) .rtui-button__control{padding:var(--rt-spacing-6)}:host(.rtui-button--type-icon.rtui-button--size-md) .rtui-button__control,:host(.rtui-button--type-fab.rtui-button--size-md) .rtui-button__control{padding:var(--rt-spacing-8)}:host(.rtui-button--type-icon.rtui-button--size-lg) .rtui-button__control,:host(.rtui-button--type-fab.rtui-button--size-lg) .rtui-button__control{padding:var(--rt-spacing-10)}:host(.rtui-button--type-icon.rtui-button--variant-primary) .rtui-button__control,:host(.rtui-button--type-fab.rtui-button--variant-primary) .rtui-button__control{color:var(--rt-icon-accent-primary)}:host(.rtui-button--type-icon.rtui-button--variant-danger) .rtui-button__control,:host(.rtui-button--type-fab.rtui-button--variant-danger) .rtui-button__control{color:var(--rt-icon-accent-danger)}:host(.rtui-button--type-icon.rtui-button--variant-success) .rtui-button__control,:host(.rtui-button--type-fab.rtui-button--variant-success) .rtui-button__control{color:var(--rt-icon-accent-success)}:host(.rtui-button--type-icon.rtui-button--variant-warning) .rtui-button__control,:host(.rtui-button--type-fab.rtui-button--variant-warning) .rtui-button__control{color:var(--rt-icon-accent-warning)}:host(.rtui-button--type-icon.rtui-button--variant-accent) .rtui-button__control,:host(.rtui-button--type-fab.rtui-button--variant-accent) .rtui-button__control{color:var(--rt-icon-accent-info)}:host(.rtui-button--type-pill) .rtui-button__control{border-radius:var(--rt-radius-xl);background-color:var(--mat-sys-surface-container-high);color:var(--mat-sys-on-surface-variant);font-weight:var(--rt-font-weight-medium);gap:var(--rt-spacing-6)}:host(.rtui-button--type-pill) .rtui-button__control:hover:not(:disabled){background-color:var(--mat-sys-surface-container-highest)}:host(.rtui-button--type-pill) .rtui-button__control:active:not(:disabled){background-color:var(--mat-sys-surface-dim)}:host(.rtui-button--type-pill.rtui-button--size-xs) .rtui-button__control{padding:var(--rt-spacing-4) var(--rt-spacing-8);font-size:var(--rt-font-size-xs)}:host(.rtui-button--type-pill.rtui-button--size-sm) .rtui-button__control{padding:var(--rt-spacing-6) var(--rt-spacing-10);font-size:var(--rt-font-size-xs)}:host(.rtui-button--type-pill.rtui-button--size-md) .rtui-button__control{padding:var(--rt-spacing-8) var(--rt-spacing-14);font-size:var(--rt-font-size-sm)}:host(.rtui-button--type-pill.rtui-button--size-lg) .rtui-button__control{padding:var(--rt-spacing-10) var(--rt-spacing-16);font-size:var(--rt-font-size-sm)}:host(.rtui-button--type-pill.rtui-button--radius-none) .rtui-button__control{border-radius:0}:host(.rtui-button--type-pill.rtui-button--radius-sm) .rtui-button__control{border-radius:var(--rt-radius-xs)}:host(.rtui-button--type-pill.rtui-button--radius-md) .rtui-button__control{border-radius:var(--rt-radius-sm)}:host(.rtui-button--type-pill.rtui-button--radius-lg) .rtui-button__control{border-radius:var(--rt-radius-md)}:host(.rtui-button--type-pill.rtui-button--radius-full) .rtui-button__control{border-radius:var(--rt-radius-xl)}:host(.rtui-button--type-pill.rtui-button--variant-primary) .rtui-button__control{background-color:var(--rt-bg-accent-primary-subtle);color:var(--rt-text-accent-primary)}:host(.rtui-button--type-pill.rtui-button--variant-primary) .rtui-button__control:hover:not(:disabled){background-color:color-mix(in srgb,var(--rt-bg-accent-primary-subtle) 92%,var(--rt-color-neutral-100))}:host(.rtui-button--type-pill.rtui-button--variant-primary) .rtui-button__control:active:not(:disabled){background-color:color-mix(in srgb,var(--rt-bg-accent-primary-subtle) 84%,var(--rt-color-neutral-100))}:host(.rtui-button--type-pill.rtui-button--variant-danger) .rtui-button__control{background-color:var(--rt-bg-accent-danger-subtle);color:var(--rt-text-accent-danger)}:host(.rtui-button--type-pill.rtui-button--variant-danger) .rtui-button__control:hover:not(:disabled){background-color:color-mix(in srgb,var(--rt-bg-accent-danger-subtle) 92%,var(--rt-color-neutral-100))}:host(.rtui-button--type-pill.rtui-button--variant-danger) .rtui-button__control:active:not(:disabled){background-color:color-mix(in srgb,var(--rt-bg-accent-danger-subtle) 84%,var(--rt-color-neutral-100))}:host(.rtui-button--type-pill.rtui-button--variant-success) .rtui-button__control{background-color:var(--rt-bg-accent-success-subtle);color:var(--rt-text-accent-success)}:host(.rtui-button--type-pill.rtui-button--variant-success) .rtui-button__control:hover:not(:disabled){background-color:color-mix(in srgb,var(--rt-bg-accent-success-subtle) 92%,var(--rt-color-neutral-100))}:host(.rtui-button--type-pill.rtui-button--variant-success) .rtui-button__control:active:not(:disabled){background-color:color-mix(in srgb,var(--rt-bg-accent-success-subtle) 84%,var(--rt-color-neutral-100))}:host(.rtui-button--type-pill.rtui-button--variant-warning) .rtui-button__control{background-color:var(--rt-bg-accent-warning-subtle);color:var(--rt-text-accent-warning)}:host(.rtui-button--type-pill.rtui-button--variant-warning) .rtui-button__control:hover:not(:disabled){background-color:color-mix(in srgb,var(--rt-bg-accent-warning-subtle) 92%,var(--rt-color-neutral-100))}:host(.rtui-button--type-pill.rtui-button--variant-warning) .rtui-button__control:active:not(:disabled){background-color:color-mix(in srgb,var(--rt-bg-accent-warning-subtle) 84%,var(--rt-color-neutral-100))}:host(.rtui-button--type-pill.rtui-button--variant-accent) .rtui-button__control{background-color:var(--rt-bg-accent-info-subtle);color:var(--rt-text-accent-info)}:host(.rtui-button--type-pill.rtui-button--variant-accent) .rtui-button__control:hover:not(:disabled){background-color:color-mix(in srgb,var(--rt-bg-accent-info-subtle) 92%,var(--rt-color-neutral-100))}:host(.rtui-button--type-pill.rtui-button--variant-accent) .rtui-button__control:active:not(:disabled){background-color:color-mix(in srgb,var(--rt-bg-accent-info-subtle) 84%,var(--rt-color-neutral-100))}:host(.rtui-button--type-pill.rtui-button--appearance-text) .rtui-button__control{min-height:1.875rem;padding:0 var(--rt-spacing-10);background-color:transparent;color:var(--mat-sys-on-surface-variant);font-size:var(--rt-font-size-md);font-weight:var(--rt-font-weight-regular)}:host(.rtui-button--type-pill.rtui-button--appearance-text) .rtui-button__control:hover:not(:disabled){background-color:var(--rt-bg-base-hover)}:host(.rtui-button--type-pill.rtui-button--appearance-text) .rtui-button__control:active:not(:disabled){background-color:var(--rt-bg-base-hover)}\n"], dependencies: [{ kind: "directive", type: 
                 // angular
                 NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: 
                 // rt-tools
@@ -1057,10 +1113,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                             ],
                         },
                     ], host: {
+                        class: BEM_BLOCK$p,
+                        '[class]': 'hostModifiers()',
                         '[class.rtui-button-full]': 'fullWidth()',
-                    }, template: "<!-- Projected content is declared once and outlet-rendered per design branch: duplicating\n     <ng-content /> across @if branches assigns the projected nodes to the first slot only. -->\n<ng-template #projectedContent>\n    <ng-content />\n</ng-template>\n\n@switch (type()) {\n    @case ('pill') {\n        @if (resolvedDesign() === 'material') {\n            <!-- design: material \u2014 a native Material button; its look is owned by the Material theme -->\n            <button\n                type=\"button\"\n                class=\"rtui-button-material\"\n                [matButton]=\"materialAppearance()\"\n                [class.rtui-button-material--danger]=\"variant() === 'danger'\"\n                [disabled]=\"disabled() || loading()\"\n                (click)=\"onClick()\">\n                @if (loading()) {\n                    <rtui-spinner [diameter]=\"spinnerSize()\" [showBox]=\"false\" />\n                } @else {\n                    @if (icon() && iconPosition() === 'start') {\n                        <rtui-icon matButtonIcon [glyph]=\"icon()\" [size]=\"resolvedIconSize()\" [outlined]=\"outlined()\" />\n                    }\n                    @if (text()) {\n                        <span>{{ text() }}</span>\n                    }\n                    <ng-container [ngTemplateOutlet]=\"projectedContent\" />\n                    @if (icon() && iconPosition() === 'end') {\n                        <rtui-icon matButtonIcon iconPositionEnd [glyph]=\"icon()\" [size]=\"resolvedIconSize()\" [outlined]=\"outlined()\" />\n                    }\n                }\n            </button>\n        } @else {\n            <button\n                type=\"button\"\n                rtBlock=\"rtui-button\"\n                matRipple\n                [rtMod]=\"modifiers()\"\n                [matRippleDisabled]=\"disabled() || loading()\"\n                [disabled]=\"disabled() || loading()\"\n                (click)=\"onClick()\">\n                @if (loading()) {\n                    <rtui-spinner rtElem=\"spinner\" [diameter]=\"spinnerSize()\" [showBox]=\"false\" />\n                } @else {\n                    @if (icon() && iconPosition() === 'start') {\n                        <rtui-icon rtElem=\"icon\" [glyph]=\"icon()\" [size]=\"resolvedIconSize()\" [outlined]=\"outlined()\" />\n                    }\n                    @if (text()) {\n                        <span rtElem=\"text\">{{ text() }}</span>\n                    }\n                    <ng-container [ngTemplateOutlet]=\"projectedContent\" />\n                    @if (icon() && iconPosition() === 'end') {\n                        <rtui-icon rtElem=\"icon\" [glyph]=\"icon()\" [size]=\"resolvedIconSize()\" [outlined]=\"outlined()\" />\n                    }\n                }\n            </button>\n        }\n    }\n    @default {\n        <button\n            type=\"button\"\n            rtBlock=\"rtui-button\"\n            matRipple\n            [rtMod]=\"modifiers()\"\n            [matRippleDisabled]=\"disabled() || loading()\"\n            [disabled]=\"disabled() || loading()\"\n            (click)=\"onClick()\">\n            @if (loading()) {\n                <rtui-spinner rtElem=\"spinner\" [diameter]=\"spinnerSize()\" [showBox]=\"false\" />\n            } @else {\n                <rtui-icon rtElem=\"icon\" [glyph]=\"icon()\" [size]=\"resolvedIconSize()\" [outlined]=\"outlined()\" />\n            }\n        </button>\n    }\n}\n", styles: ["@charset \"UTF-8\";:host{display:inline-block}:host(.rtui-button-full){display:block;width:100%}:host(.rtui-button-full) .rtui-button,:host(.rtui-button-full) .rtui-button-material{width:100%}.rtui-button{position:relative;display:inline-flex;overflow:hidden;align-items:center;justify-content:center;border:0;background-color:transparent;color:var(--mat-sys-on-surface-variant);cursor:pointer;line-height:1;transition:background-color .15s ease,color .15s ease,opacity .15s ease}.rtui-button rtui-icon{color:inherit}.rtui-button rtui-spinner{display:flex;align-items:center;justify-content:center}.rtui-button:disabled{cursor:not-allowed;opacity:.38}.rtui-button--loading{cursor:wait}.rtui-button--type-icon,.rtui-button--type-fab{border-radius:1.5rem}.rtui-button--type-icon:hover:not(:disabled),.rtui-button--type-fab:hover:not(:disabled){background-color:var(--rt-bg-base-hover)}.rtui-button--type-icon.rtui-button--size-xs,.rtui-button--type-fab.rtui-button--size-xs{padding:.25rem}.rtui-button--type-icon.rtui-button--size-sm,.rtui-button--type-fab.rtui-button--size-sm{padding:.375rem}.rtui-button--type-icon.rtui-button--size-md,.rtui-button--type-fab.rtui-button--size-md{padding:.5rem}.rtui-button--type-icon.rtui-button--size-lg,.rtui-button--type-fab.rtui-button--size-lg{padding:.625rem}.rtui-button--type-icon.rtui-button--variant-primary,.rtui-button--type-fab.rtui-button--variant-primary{color:var(--rt-icon-accent-primary)}.rtui-button--type-icon.rtui-button--variant-danger,.rtui-button--type-fab.rtui-button--variant-danger{color:var(--rt-icon-accent-danger)}.rtui-button--type-icon.rtui-button--variant-success,.rtui-button--type-fab.rtui-button--variant-success{color:var(--rt-icon-accent-success)}.rtui-button--type-icon.rtui-button--variant-warning,.rtui-button--type-fab.rtui-button--variant-warning{color:var(--rt-icon-accent-warning)}.rtui-button--type-icon.rtui-button--variant-accent,.rtui-button--type-fab.rtui-button--variant-accent{color:var(--rt-icon-accent-info)}.rtui-button--type-pill{border-radius:1.5rem;background-color:var(--mat-sys-surface-container-high);color:var(--mat-sys-on-surface-variant);font-weight:500;gap:.375rem}.rtui-button--type-pill:hover:not(:disabled){background-color:var(--mat-sys-surface-container-highest)}.rtui-button--type-pill:active:not(:disabled){background-color:var(--mat-sys-surface-dim)}.rtui-button--type-pill.rtui-button--size-xs{padding:.25rem .5rem;font-size:.6875rem}.rtui-button--type-pill.rtui-button--size-sm{padding:.375rem .625rem;font-size:.75rem}.rtui-button--type-pill.rtui-button--size-md{padding:.5rem .875rem;font-size:.8125rem}.rtui-button--type-pill.rtui-button--size-lg{padding:.625rem 1rem;font-size:.875rem}.rtui-button--type-pill.rtui-button--radius-none{border-radius:0}.rtui-button--type-pill.rtui-button--radius-sm{border-radius:.25rem}.rtui-button--type-pill.rtui-button--radius-md{border-radius:.5rem}.rtui-button--type-pill.rtui-button--radius-lg{border-radius:.75rem}.rtui-button--type-pill.rtui-button--radius-full{border-radius:1.5rem}.rtui-button--type-pill.rtui-button--variant-primary{background-color:var(--rt-bg-accent-primary-subtle);color:var(--rt-text-accent-primary)}.rtui-button--type-pill.rtui-button--variant-primary:hover:not(:disabled){background-color:color-mix(in srgb,var(--rt-bg-accent-primary-subtle) 92%,var(--rt-color-neutral-100))}.rtui-button--type-pill.rtui-button--variant-primary:active:not(:disabled){background-color:color-mix(in srgb,var(--rt-bg-accent-primary-subtle) 84%,var(--rt-color-neutral-100))}.rtui-button--type-pill.rtui-button--variant-danger{background-color:var(--rt-bg-accent-danger-subtle);color:var(--rt-text-accent-danger)}.rtui-button--type-pill.rtui-button--variant-danger:hover:not(:disabled){background-color:color-mix(in srgb,var(--rt-bg-accent-danger-subtle) 92%,var(--rt-color-neutral-100))}.rtui-button--type-pill.rtui-button--variant-danger:active:not(:disabled){background-color:color-mix(in srgb,var(--rt-bg-accent-danger-subtle) 84%,var(--rt-color-neutral-100))}.rtui-button--type-pill.rtui-button--variant-success{background-color:var(--rt-bg-accent-success-subtle);color:var(--rt-text-accent-success)}.rtui-button--type-pill.rtui-button--variant-success:hover:not(:disabled){background-color:color-mix(in srgb,var(--rt-bg-accent-success-subtle) 92%,var(--rt-color-neutral-100))}.rtui-button--type-pill.rtui-button--variant-success:active:not(:disabled){background-color:color-mix(in srgb,var(--rt-bg-accent-success-subtle) 84%,var(--rt-color-neutral-100))}.rtui-button--type-pill.rtui-button--variant-warning{background-color:var(--rt-bg-accent-warning-subtle);color:var(--rt-text-accent-warning)}.rtui-button--type-pill.rtui-button--variant-warning:hover:not(:disabled){background-color:color-mix(in srgb,var(--rt-bg-accent-warning-subtle) 92%,var(--rt-color-neutral-100))}.rtui-button--type-pill.rtui-button--variant-warning:active:not(:disabled){background-color:color-mix(in srgb,var(--rt-bg-accent-warning-subtle) 84%,var(--rt-color-neutral-100))}.rtui-button--type-pill.rtui-button--variant-accent{background-color:var(--rt-bg-accent-info-subtle);color:var(--rt-text-accent-info)}.rtui-button--type-pill.rtui-button--variant-accent:hover:not(:disabled){background-color:color-mix(in srgb,var(--rt-bg-accent-info-subtle) 92%,var(--rt-color-neutral-100))}.rtui-button--type-pill.rtui-button--variant-accent:active:not(:disabled){background-color:color-mix(in srgb,var(--rt-bg-accent-info-subtle) 84%,var(--rt-color-neutral-100))}.rtui-button--type-pill.rtui-button--appearance-text{min-height:1.875rem;padding:0 .625rem;background-color:transparent;color:var(--mat-sys-on-surface-variant);font-size:1rem;font-weight:400}.rtui-button--type-pill.rtui-button--appearance-text:hover:not(:disabled){background-color:var(--rt-bg-base-hover)}.rtui-button--type-pill.rtui-button--appearance-text:active:not(:disabled){background-color:var(--rt-bg-base-hover)}.rtui-button-material rtui-spinner{display:flex;align-items:center;justify-content:center}.rtui-button-material--danger{--mat-button-filled-container-color: var(--mat-sys-error);--mat-button-filled-label-text-color: var(--mat-sys-on-error);--mat-button-filled-state-layer-color: var(--mat-sys-on-error);--mat-button-filled-ripple-color: color-mix(in srgb, var(--mat-sys-on-error) 12%, transparent);--mat-button-outlined-label-text-color: var(--mat-sys-error);--mat-button-outlined-outline-color: var(--mat-sys-error);--mat-button-outlined-state-layer-color: var(--mat-sys-error);--mat-button-outlined-ripple-color: color-mix(in srgb, var(--mat-sys-error) 12%, transparent);--mat-button-text-label-text-color: var(--mat-sys-error);--mat-button-text-state-layer-color: var(--mat-sys-error);--mat-button-text-ripple-color: color-mix(in srgb, var(--mat-sys-error) 12%, transparent);--mat-button-tonal-container-color: var(--mat-sys-error-container);--mat-button-tonal-label-text-color: var(--mat-sys-on-error-container);--mat-button-tonal-state-layer-color: var(--mat-sys-on-error-container);--mat-button-tonal-ripple-color: color-mix(in srgb, var(--mat-sys-on-error-container) 12%, transparent)}\n"] }]
+                    }, template: "<!-- Projected content is declared once and outlet-rendered per design branch: duplicating\n     <ng-content /> across @if branches assigns the projected nodes to the first slot only. -->\n<ng-template #projectedContent>\n    <ng-content />\n</ng-template>\n\n<!-- \u0411\u043B\u043E\u043A \u043E\u0431\u044A\u044F\u0432\u043B\u0435\u043D \u043A\u043E\u043D\u0442\u0435\u0439\u043D\u0435\u0440\u043E\u043C: \u043A\u043B\u0430\u0441\u0441 \u043E\u043D \u043D\u0435 \u0441\u0442\u0430\u0432\u0438\u0442 (\u0443\u0437\u0435\u043B \u043A\u043E\u043C\u043C\u0435\u043D\u0442\u0430\u0440\u0438\u044F), \u0430 \u0442\u043E\u043B\u044C\u043A\u043E \u0434\u0430\u0451\u0442 \u0438\u043C\u044F\n     \u043F\u043E\u0442\u043E\u043C\u043A\u0430\u043C. \u0421\u0430\u043C \u043A\u043B\u0430\u0441\u0441 \u0431\u043B\u043E\u043A\u0430 \u0438 \u0435\u0433\u043E \u043C\u043E\u0434\u0438\u0444\u0438\u043A\u0430\u0442\u043E\u0440\u044B \u0432\u0438\u0441\u044F\u0442 \u043D\u0430 \u0445\u043E\u0441\u0442\u0435 \u2014 \u0441\u043C. `host` \u0432 \u043A\u043E\u043C\u043F\u043E\u043D\u0435\u043D\u0442\u0435. -->\n<ng-container rtBlock=\"rtui-button\">\n    @switch (type()) {\n        @case ('pill') {\n            @if (resolvedDesign() === 'material') {\n                <!-- design: material \u2014 a native Material button; its look is owned by the Material theme -->\n                <button\n                    type=\"button\"\n                    rtElem=\"material\"\n                    [matButton]=\"materialAppearance()\"\n                    [rtMod]=\"{ danger: variant() === 'danger' }\"\n                    [disabled]=\"disabled() || loading()\"\n                    (click)=\"onClick()\">\n                    @if (loading()) {\n                        <rtui-spinner [diameter]=\"spinnerSize()\" [showBox]=\"false\" />\n                    } @else {\n                        @if (icon() && iconPosition() === 'start') {\n                            <rtui-icon matButtonIcon [glyph]=\"icon()\" [size]=\"resolvedIconSize()\" [outlined]=\"outlined()\" />\n                        }\n                        @if (text()) {\n                            <span>{{ text() }}</span>\n                        }\n                        <ng-container [ngTemplateOutlet]=\"projectedContent\" />\n                        @if (icon() && iconPosition() === 'end') {\n                            <rtui-icon matButtonIcon iconPositionEnd [glyph]=\"icon()\" [size]=\"resolvedIconSize()\" [outlined]=\"outlined()\" />\n                        }\n                    }\n                </button>\n            } @else {\n                <button\n                    type=\"button\"\n                    rtElem=\"control\"\n                    matRipple\n                    [matRippleDisabled]=\"disabled() || loading()\"\n                    [disabled]=\"disabled() || loading()\"\n                    (click)=\"onClick()\">\n                    @if (loading()) {\n                        <rtui-spinner rtElem=\"spinner\" [diameter]=\"spinnerSize()\" [showBox]=\"false\" />\n                    } @else {\n                        @if (icon() && iconPosition() === 'start') {\n                            <rtui-icon rtElem=\"icon\" [glyph]=\"icon()\" [size]=\"resolvedIconSize()\" [outlined]=\"outlined()\" />\n                        }\n                        @if (text()) {\n                            <span rtElem=\"text\">{{ text() }}</span>\n                        }\n                        <ng-container [ngTemplateOutlet]=\"projectedContent\" />\n                        @if (icon() && iconPosition() === 'end') {\n                            <rtui-icon rtElem=\"icon\" [glyph]=\"icon()\" [size]=\"resolvedIconSize()\" [outlined]=\"outlined()\" />\n                        }\n                    }\n                </button>\n            }\n        }\n        @default {\n            <button\n                type=\"button\"\n                rtElem=\"control\"\n                matRipple\n                [matRippleDisabled]=\"disabled() || loading()\"\n                [disabled]=\"disabled() || loading()\"\n                (click)=\"onClick()\">\n                @if (loading()) {\n                    <rtui-spinner rtElem=\"spinner\" [diameter]=\"spinnerSize()\" [showBox]=\"false\" />\n                } @else {\n                    <rtui-icon rtElem=\"icon\" [glyph]=\"icon()\" [size]=\"resolvedIconSize()\" [outlined]=\"outlined()\" />\n                }\n            </button>\n        }\n    }\n</ng-container>\n", styles: ["@charset \"UTF-8\";:host{display:inline-block}:host(.rtui-button-full){display:block;width:100%}:host(.rtui-button-full) .rtui-button__control,:host(.rtui-button-full) .rtui-button__material{width:100%}.rtui-button__control{position:relative;display:inline-flex;overflow:hidden;align-items:center;justify-content:center;border:0;background-color:transparent;color:var(--mat-sys-on-surface-variant);cursor:pointer;line-height:1;transition:background-color .15s ease,color .15s ease,opacity .15s ease}.rtui-button__control rtui-icon{color:inherit}.rtui-button__control rtui-spinner{display:flex;align-items:center;justify-content:center}.rtui-button__control:disabled{cursor:not-allowed;opacity:.38}.rtui-button__material rtui-spinner{display:flex;align-items:center;justify-content:center}.rtui-button__material--danger{--mat-button-filled-container-color: var(--mat-sys-error);--mat-button-filled-label-text-color: var(--mat-sys-on-error);--mat-button-filled-state-layer-color: var(--mat-sys-on-error);--mat-button-filled-ripple-color: color-mix(in srgb, var(--mat-sys-on-error) 12%, transparent);--mat-button-outlined-label-text-color: var(--mat-sys-error);--mat-button-outlined-outline-color: var(--mat-sys-error);--mat-button-outlined-state-layer-color: var(--mat-sys-error);--mat-button-outlined-ripple-color: color-mix(in srgb, var(--mat-sys-error) 12%, transparent);--mat-button-text-label-text-color: var(--mat-sys-error);--mat-button-text-state-layer-color: var(--mat-sys-error);--mat-button-text-ripple-color: color-mix(in srgb, var(--mat-sys-error) 12%, transparent);--mat-button-tonal-container-color: var(--mat-sys-error-container);--mat-button-tonal-label-text-color: var(--mat-sys-on-error-container);--mat-button-tonal-state-layer-color: var(--mat-sys-on-error-container);--mat-button-tonal-ripple-color: color-mix(in srgb, var(--mat-sys-on-error-container) 12%, transparent)}:host(.rtui-button--loading) .rtui-button__control{cursor:wait}:host(.rtui-button--type-icon) .rtui-button__control,:host(.rtui-button--type-fab) .rtui-button__control{border-radius:var(--rt-radius-xl)}:host(.rtui-button--type-icon) .rtui-button__control:hover:not(:disabled),:host(.rtui-button--type-fab) .rtui-button__control:hover:not(:disabled){background-color:var(--rt-bg-base-hover)}:host(.rtui-button--type-icon.rtui-button--size-xs) .rtui-button__control,:host(.rtui-button--type-fab.rtui-button--size-xs) .rtui-button__control{padding:var(--rt-spacing-4)}:host(.rtui-button--type-icon.rtui-button--size-sm) .rtui-button__control,:host(.rtui-button--type-fab.rtui-button--size-sm) .rtui-button__control{padding:var(--rt-spacing-6)}:host(.rtui-button--type-icon.rtui-button--size-md) .rtui-button__control,:host(.rtui-button--type-fab.rtui-button--size-md) .rtui-button__control{padding:var(--rt-spacing-8)}:host(.rtui-button--type-icon.rtui-button--size-lg) .rtui-button__control,:host(.rtui-button--type-fab.rtui-button--size-lg) .rtui-button__control{padding:var(--rt-spacing-10)}:host(.rtui-button--type-icon.rtui-button--variant-primary) .rtui-button__control,:host(.rtui-button--type-fab.rtui-button--variant-primary) .rtui-button__control{color:var(--rt-icon-accent-primary)}:host(.rtui-button--type-icon.rtui-button--variant-danger) .rtui-button__control,:host(.rtui-button--type-fab.rtui-button--variant-danger) .rtui-button__control{color:var(--rt-icon-accent-danger)}:host(.rtui-button--type-icon.rtui-button--variant-success) .rtui-button__control,:host(.rtui-button--type-fab.rtui-button--variant-success) .rtui-button__control{color:var(--rt-icon-accent-success)}:host(.rtui-button--type-icon.rtui-button--variant-warning) .rtui-button__control,:host(.rtui-button--type-fab.rtui-button--variant-warning) .rtui-button__control{color:var(--rt-icon-accent-warning)}:host(.rtui-button--type-icon.rtui-button--variant-accent) .rtui-button__control,:host(.rtui-button--type-fab.rtui-button--variant-accent) .rtui-button__control{color:var(--rt-icon-accent-info)}:host(.rtui-button--type-pill) .rtui-button__control{border-radius:var(--rt-radius-xl);background-color:var(--mat-sys-surface-container-high);color:var(--mat-sys-on-surface-variant);font-weight:var(--rt-font-weight-medium);gap:var(--rt-spacing-6)}:host(.rtui-button--type-pill) .rtui-button__control:hover:not(:disabled){background-color:var(--mat-sys-surface-container-highest)}:host(.rtui-button--type-pill) .rtui-button__control:active:not(:disabled){background-color:var(--mat-sys-surface-dim)}:host(.rtui-button--type-pill.rtui-button--size-xs) .rtui-button__control{padding:var(--rt-spacing-4) var(--rt-spacing-8);font-size:var(--rt-font-size-xs)}:host(.rtui-button--type-pill.rtui-button--size-sm) .rtui-button__control{padding:var(--rt-spacing-6) var(--rt-spacing-10);font-size:var(--rt-font-size-xs)}:host(.rtui-button--type-pill.rtui-button--size-md) .rtui-button__control{padding:var(--rt-spacing-8) var(--rt-spacing-14);font-size:var(--rt-font-size-sm)}:host(.rtui-button--type-pill.rtui-button--size-lg) .rtui-button__control{padding:var(--rt-spacing-10) var(--rt-spacing-16);font-size:var(--rt-font-size-sm)}:host(.rtui-button--type-pill.rtui-button--radius-none) .rtui-button__control{border-radius:0}:host(.rtui-button--type-pill.rtui-button--radius-sm) .rtui-button__control{border-radius:var(--rt-radius-xs)}:host(.rtui-button--type-pill.rtui-button--radius-md) .rtui-button__control{border-radius:var(--rt-radius-sm)}:host(.rtui-button--type-pill.rtui-button--radius-lg) .rtui-button__control{border-radius:var(--rt-radius-md)}:host(.rtui-button--type-pill.rtui-button--radius-full) .rtui-button__control{border-radius:var(--rt-radius-xl)}:host(.rtui-button--type-pill.rtui-button--variant-primary) .rtui-button__control{background-color:var(--rt-bg-accent-primary-subtle);color:var(--rt-text-accent-primary)}:host(.rtui-button--type-pill.rtui-button--variant-primary) .rtui-button__control:hover:not(:disabled){background-color:color-mix(in srgb,var(--rt-bg-accent-primary-subtle) 92%,var(--rt-color-neutral-100))}:host(.rtui-button--type-pill.rtui-button--variant-primary) .rtui-button__control:active:not(:disabled){background-color:color-mix(in srgb,var(--rt-bg-accent-primary-subtle) 84%,var(--rt-color-neutral-100))}:host(.rtui-button--type-pill.rtui-button--variant-danger) .rtui-button__control{background-color:var(--rt-bg-accent-danger-subtle);color:var(--rt-text-accent-danger)}:host(.rtui-button--type-pill.rtui-button--variant-danger) .rtui-button__control:hover:not(:disabled){background-color:color-mix(in srgb,var(--rt-bg-accent-danger-subtle) 92%,var(--rt-color-neutral-100))}:host(.rtui-button--type-pill.rtui-button--variant-danger) .rtui-button__control:active:not(:disabled){background-color:color-mix(in srgb,var(--rt-bg-accent-danger-subtle) 84%,var(--rt-color-neutral-100))}:host(.rtui-button--type-pill.rtui-button--variant-success) .rtui-button__control{background-color:var(--rt-bg-accent-success-subtle);color:var(--rt-text-accent-success)}:host(.rtui-button--type-pill.rtui-button--variant-success) .rtui-button__control:hover:not(:disabled){background-color:color-mix(in srgb,var(--rt-bg-accent-success-subtle) 92%,var(--rt-color-neutral-100))}:host(.rtui-button--type-pill.rtui-button--variant-success) .rtui-button__control:active:not(:disabled){background-color:color-mix(in srgb,var(--rt-bg-accent-success-subtle) 84%,var(--rt-color-neutral-100))}:host(.rtui-button--type-pill.rtui-button--variant-warning) .rtui-button__control{background-color:var(--rt-bg-accent-warning-subtle);color:var(--rt-text-accent-warning)}:host(.rtui-button--type-pill.rtui-button--variant-warning) .rtui-button__control:hover:not(:disabled){background-color:color-mix(in srgb,var(--rt-bg-accent-warning-subtle) 92%,var(--rt-color-neutral-100))}:host(.rtui-button--type-pill.rtui-button--variant-warning) .rtui-button__control:active:not(:disabled){background-color:color-mix(in srgb,var(--rt-bg-accent-warning-subtle) 84%,var(--rt-color-neutral-100))}:host(.rtui-button--type-pill.rtui-button--variant-accent) .rtui-button__control{background-color:var(--rt-bg-accent-info-subtle);color:var(--rt-text-accent-info)}:host(.rtui-button--type-pill.rtui-button--variant-accent) .rtui-button__control:hover:not(:disabled){background-color:color-mix(in srgb,var(--rt-bg-accent-info-subtle) 92%,var(--rt-color-neutral-100))}:host(.rtui-button--type-pill.rtui-button--variant-accent) .rtui-button__control:active:not(:disabled){background-color:color-mix(in srgb,var(--rt-bg-accent-info-subtle) 84%,var(--rt-color-neutral-100))}:host(.rtui-button--type-pill.rtui-button--appearance-text) .rtui-button__control{min-height:1.875rem;padding:0 var(--rt-spacing-10);background-color:transparent;color:var(--mat-sys-on-surface-variant);font-size:var(--rt-font-size-md);font-weight:var(--rt-font-weight-regular)}:host(.rtui-button--type-pill.rtui-button--appearance-text) .rtui-button__control:hover:not(:disabled){background-color:var(--rt-bg-base-hover)}:host(.rtui-button--type-pill.rtui-button--appearance-text) .rtui-button__control:active:not(:disabled){background-color:var(--rt-bg-base-hover)}\n"] }]
         }], propDecorators: { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], design: [{ type: i0.Input, args: [{ isSignal: true, alias: "design", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], radius: [{ type: i0.Input, args: [{ isSignal: true, alias: "radius", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], iconPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconPosition", required: false }] }], iconSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconSize", required: false }] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], outlined: [{ type: i0.Input, args: [{ isSignal: true, alias: "outlined", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], spinnerDiameter: [{ type: i0.Input, args: [{ isSignal: true, alias: "spinnerDiameter", required: false }] }], clicked: [{ type: i0.Output, args: ["clicked"] }] } });
 
+const BEM_BLOCK$o = 'rtui-multi-button';
 class RtuiMultiButtonComponent {
     constructor() {
         this.actions = input([], { ...(ngDevMode ? { debugName: "actions" } : /* istanbul ignore next */ {}), transform: (value) => transformArrayInput(value) });
@@ -1075,7 +1134,7 @@ class RtuiMultiButtonComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiMultiButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: RtuiMultiButtonComponent, isStandalone: true, selector: "rtui-multi-button", inputs: { actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, activeAction: { classPropertyName: "activeAction", publicName: "activeAction", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeAction: "activeActionChange", changeActiveAction: "changeActiveAction" }, ngImport: i0, template: "@if (actions()?.length) {\n    <div rtBlock=\"rtui-multibutton-actions\">\n        @for (action of actions(); track action) {\n            <button rtElem=\"action\" type=\"button\" [rtMod]=\"{ active: action === activeAction() }\" (click)=\"onSetActiveAction(action)\">\n                {{ action | titlecase }}\n            </button>\n        }\n    </div>\n}\n", styles: ["@charset \"UTF-8\";:host{--rt-rtui-multibutton-base-display: inline-flex;--rt-rtui-multibutton-base-flex-flow: row wrap;--rt-rtui-multibutton-base-radius: 8px;--rt-rtui-multibutton-base-padding: 4px;--rt-rtui-multibutton-base-background-color: var(--rt-bg-base-hover);--rt-rtui-multibutton-action-base-padding: 4px 8px;--rt-rtui-multibutton-action-base-radius: 8px;--rt-rtui-multibutton-action-base-border: 0;--rt-rtui-multibutton-action-base-font-size: 12px;--rt-rtui-multibutton-action-base-font-weight: 600;--rt-rtui-multibutton-action-base-color: var(--rt-text-base-secondary);--rt-rtui-multibutton-action-base-background-color: transparent;--rt-rtui-multibutton-action-base-transition: background-color .15s, color .15s;--rt-rtui-multibutton-action-base-cursor: pointer;--rt-rtui-multibutton-action-hover-color: var(--rt-text-base-soft);--rt-rtui-multibutton-action-active-color: var(--rt-text-base-soft);--rt-rtui-multibutton-action-active-background-color: var(--rt-bg-base-strong);--rt-rtui-multibutton-action-active-cursor: default;--rt-rtui-multibutton-action-focus-visible-outline: 2px dashed var(--rt-border-focus);--rt-rtui-multibutton-action-focus-visible-outline-offset: -2px;--rt-rtui-multibutton-action-disabled-pointer-events: none;--rt-rtui-multibutton-action-disabled-cursor: default;--rt-rtui-multibutton-action-disabled-opacity: .75}:host .rtui-multibutton-actions{display:var(--rt-rtui-multibutton-base-display);flex-flow:var(--rt-rtui-multibutton-base-flex-flow);padding:var(--rt-rtui-multibutton-base-padding);border-radius:var(--rt-rtui-multibutton-base-radius);background-color:var(--rt-rtui-multibutton-base-background-color)}:host .rtui-multibutton-actions__action{padding:var(--rt-rtui-multibutton-action-base-padding);border:var(--rt-rtui-multibutton-action-base-border);border-radius:var(--rt-rtui-multibutton-action-base-radius);background-color:var(--rt-rtui-multibutton-action-base-background-color);color:var(--rt-rtui-multibutton-action-base-color);cursor:var(--rt-rtui-multibutton-action-base-cursor);font-size:var(--rt-rtui-multibutton-action-base-font-size);font-weight:var(--rt-rtui-multibutton-action-base-font-weight);transition:var(--rt-rtui-multibutton-action-base-transition)}:host .rtui-multibutton-actions__action--active{background-color:var(--rt-rtui-multibutton-action-active-background-color);color:var(--rt-rtui-multibutton-action-active-color);cursor:var(--rt-rtui-multibutton-action-active-cursor)}:host .rtui-multibutton-actions__action:not(:host .rtui-multibutton-actions__action--active):hover{color:var(--rt-rtui-multibutton-action-hover-color)}:host .rtui-multibutton-actions__action:focus{outline:none}:host .rtui-multibutton-actions__action:focus-visible{outline:var(--rt-rtui-multibutton-action-focus-visible-outline);outline-offset:var(--rt-rtui-multibutton-action-focus-visible-outline-offset)}:host .rtui-multibutton-actions__action:disabled{cursor:var(--rt-rtui-multibutton-action-disabled-cursor);opacity:var(--rt-rtui-multibutton-action-disabled-opacity);pointer-events:var(--rt-rtui-multibutton-action-disabled-pointer-events)}\n"], dependencies: [{ kind: "directive", type: 
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: RtuiMultiButtonComponent, isStandalone: true, selector: "rtui-multi-button", inputs: { actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, activeAction: { classPropertyName: "activeAction", publicName: "activeAction", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeAction: "activeActionChange", changeActiveAction: "changeActiveAction" }, host: { classAttribute: "rtui-multi-button" }, ngImport: i0, template: "@if (actions()?.length) {\n    <div rtBlock=\"rtui-multibutton-actions\">\n        @for (action of actions(); track action) {\n            <button rtElem=\"action\" type=\"button\" [rtMod]=\"{ active: action === activeAction() }\" (click)=\"onSetActiveAction(action)\">\n                {{ action | titlecase }}\n            </button>\n        }\n    </div>\n}\n", styles: ["@charset \"UTF-8\";:host{--rt-rtui-multibutton-base-display: inline-flex;--rt-rtui-multibutton-base-flex-flow: row wrap;--rt-rtui-multibutton-base-radius: 8px;--rt-rtui-multibutton-base-padding: 4px;--rt-rtui-multibutton-base-background-color: var(--rt-bg-base-hover);--rt-rtui-multibutton-action-base-padding: 4px 8px;--rt-rtui-multibutton-action-base-radius: 8px;--rt-rtui-multibutton-action-base-border: 0;--rt-rtui-multibutton-action-base-font-size: 12px;--rt-rtui-multibutton-action-base-font-weight: 600;--rt-rtui-multibutton-action-base-color: var(--rt-text-base-secondary);--rt-rtui-multibutton-action-base-background-color: transparent;--rt-rtui-multibutton-action-base-transition: background-color .15s, color .15s;--rt-rtui-multibutton-action-base-cursor: pointer;--rt-rtui-multibutton-action-hover-color: var(--rt-text-base-soft);--rt-rtui-multibutton-action-active-color: var(--rt-text-base-soft);--rt-rtui-multibutton-action-active-background-color: var(--rt-bg-base-strong);--rt-rtui-multibutton-action-active-cursor: default;--rt-rtui-multibutton-action-focus-visible-outline: 2px dashed var(--rt-border-focus);--rt-rtui-multibutton-action-focus-visible-outline-offset: -2px;--rt-rtui-multibutton-action-disabled-pointer-events: none;--rt-rtui-multibutton-action-disabled-cursor: default;--rt-rtui-multibutton-action-disabled-opacity: .75}:host .rtui-multibutton-actions{display:var(--rt-rtui-multibutton-base-display);flex-flow:var(--rt-rtui-multibutton-base-flex-flow);padding:var(--rt-rtui-multibutton-base-padding);border-radius:var(--rt-rtui-multibutton-base-radius);background-color:var(--rt-rtui-multibutton-base-background-color)}:host .rtui-multibutton-actions__action{padding:var(--rt-rtui-multibutton-action-base-padding);border:var(--rt-rtui-multibutton-action-base-border);border-radius:var(--rt-rtui-multibutton-action-base-radius);background-color:var(--rt-rtui-multibutton-action-base-background-color);color:var(--rt-rtui-multibutton-action-base-color);cursor:var(--rt-rtui-multibutton-action-base-cursor);font-size:var(--rt-rtui-multibutton-action-base-font-size);font-weight:var(--rt-rtui-multibutton-action-base-font-weight);transition:var(--rt-rtui-multibutton-action-base-transition)}:host .rtui-multibutton-actions__action--active{background-color:var(--rt-rtui-multibutton-action-active-background-color);color:var(--rt-rtui-multibutton-action-active-color);cursor:var(--rt-rtui-multibutton-action-active-cursor)}:host .rtui-multibutton-actions__action:not(:host .rtui-multibutton-actions__action--active):hover{color:var(--rt-rtui-multibutton-action-hover-color)}:host .rtui-multibutton-actions__action:focus{outline:none}:host .rtui-multibutton-actions__action:focus-visible{outline:var(--rt-rtui-multibutton-action-focus-visible-outline);outline-offset:var(--rt-rtui-multibutton-action-focus-visible-outline-offset)}:host .rtui-multibutton-actions__action:disabled{cursor:var(--rt-rtui-multibutton-action-disabled-cursor);opacity:var(--rt-rtui-multibutton-action-disabled-opacity);pointer-events:var(--rt-rtui-multibutton-action-disabled-pointer-events)}\n"], dependencies: [{ kind: "directive", type: 
                 // rt-tools
                 BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }, { kind: "directive", type: ModDirective, selector: "[rtMod]" }, { kind: "pipe", type: 
                 // pipes
@@ -1083,7 +1142,7 @@ class RtuiMultiButtonComponent {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiMultiButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rtui-multi-button', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+            args: [{ selector: 'rtui-multi-button', host: { class: BEM_BLOCK$o }, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         // pipes
                         TitleCasePipe,
                         // rt-tools
@@ -1123,22 +1182,35 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                     selector: '[rtuiHeaderRight]',
                 }]
         }] });
+const BEM_BLOCK$n = 'rtui-header';
 class RtuiHeaderComponent {
     constructor() {
-        this.isMobile = input(false, { ...(ngDevMode ? { debugName: "isMobile" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.#breakpoints = inject(BreakpointService);
+        /** Экран узкий: значение входа, если приложение его дало, иначе замер кита. */
+        this.narrow = computed(() => this.isMobile() ?? !!this.#breakpoints.isMobile(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "narrow" }] : /* istanbul ignore next */ []));
+        /**
+         * Признак узкого экрана.
+         *
+         * @deprecated Кит определяет его сам — `BreakpointService` из `@rt-tools/core`. Вход
+         * оставлен ради приложений, которые уже его передают, и уйдёт в следующем крупном выпуске.
+         */
+        this.isMobile = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isMobile" }] : /* istanbul ignore next */ []));
         this.isMobileMenuButtonShown = input(true, { ...(ngDevMode ? { debugName: "isMobileMenuButtonShown" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         this.leftHeaderTpl = contentChild(RtuiHeaderLeftDirective, { ...(ngDevMode ? { debugName: "leftHeaderTpl" } : /* istanbul ignore next */ {}), read: TemplateRef });
         this.centerHeaderTpl = contentChild(RtuiHeaderCenterDirective, { ...(ngDevMode ? { debugName: "centerHeaderTpl" } : /* istanbul ignore next */ {}), read: TemplateRef });
         this.rightHeaderTpl = contentChild(RtuiHeaderRightDirective, { ...(ngDevMode ? { debugName: "rightHeaderTpl" } : /* istanbul ignore next */ {}), read: TemplateRef });
         this.openMobileMenuAction = output();
     }
+    #breakpoints;
     openSideMenu() {
         if (this.isMobile() && this.isMobileMenuButtonShown()) {
             this.openMobileMenuAction.emit();
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: RtuiHeaderComponent, isStandalone: true, selector: "rtui-header", inputs: { isMobile: { classPropertyName: "isMobile", publicName: "isMobile", isSignal: true, isRequired: false, transformFunction: null }, isMobileMenuButtonShown: { classPropertyName: "isMobileMenuButtonShown", publicName: "isMobileMenuButtonShown", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { openMobileMenuAction: "openMobileMenuAction" }, queries: [{ propertyName: "leftHeaderTpl", first: true, predicate: RtuiHeaderLeftDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "centerHeaderTpl", first: true, predicate: RtuiHeaderCenterDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "rightHeaderTpl", first: true, predicate: RtuiHeaderRightDirective, descendants: true, read: TemplateRef, isSignal: true }], ngImport: i0, template: "<rtui-toolbar>\n    <ng-container *rtuiToolbarLeft>\n        @if (isMobile() && isMobileMenuButtonShown()) {\n            <button mat-icon-button rtBlock=\"mobile-menu-button\" (click)=\"openSideMenu()\">\n                <mat-icon>menu</mat-icon>\n            </button>\n        }\n\n        @if (leftHeaderTpl()) {\n            <ng-template *ngTemplateOutlet=\"leftHeaderTpl() ?? null\" />\n        }\n    </ng-container>\n\n    @if (centerHeaderTpl()) {\n        <ng-container *rtuiToolbarCenter>\n            <ng-template *ngTemplateOutlet=\"centerHeaderTpl() ?? null\" />\n        </ng-container>\n    }\n\n    @if (rightHeaderTpl()) {\n        <ng-container *rtuiToolbarRight>\n            <ng-template *ngTemplateOutlet=\"rightHeaderTpl() ?? null\" />\n        </ng-container>\n    }\n</rtui-toolbar>\n", styles: [""], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: 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: 
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: RtuiHeaderComponent, isStandalone: true, selector: "rtui-header", inputs: { isMobile: { classPropertyName: "isMobile", publicName: "isMobile", isSignal: true, isRequired: false, transformFunction: null }, isMobileMenuButtonShown: { classPropertyName: "isMobileMenuButtonShown", publicName: "isMobileMenuButtonShown", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { openMobileMenuAction: "openMobileMenuAction" }, host: { classAttribute: "rtui-header" }, providers: [BreakpointService], queries: [{ propertyName: "leftHeaderTpl", first: true, predicate: RtuiHeaderLeftDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "centerHeaderTpl", first: true, predicate: RtuiHeaderCenterDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "rightHeaderTpl", first: true, predicate: RtuiHeaderRightDirective, descendants: true, read: TemplateRef, isSignal: true }], ngImport: i0, template: "<rtui-toolbar>\n    <ng-container *rtuiToolbarLeft>\n        @if (narrow() && isMobileMenuButtonShown()) {\n            <button mat-icon-button rtBlock=\"mobile-menu-button\" (click)=\"openSideMenu()\">\n                <mat-icon>menu</mat-icon>\n            </button>\n        }\n\n        @if (leftHeaderTpl()) {\n            <ng-template *ngTemplateOutlet=\"leftHeaderTpl() ?? null\" />\n        }\n    </ng-container>\n\n    @if (centerHeaderTpl()) {\n        <ng-container *rtuiToolbarCenter>\n            <ng-template *ngTemplateOutlet=\"centerHeaderTpl() ?? null\" />\n        </ng-container>\n    }\n\n    @if (rightHeaderTpl()) {\n        <ng-container *rtuiToolbarRight>\n            <ng-template *ngTemplateOutlet=\"rightHeaderTpl() ?? null\" />\n        </ng-container>\n    }\n</rtui-toolbar>\n", styles: [""], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: 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: 
                 // BEM
                 BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "component", type: 
                 // Ui-kit
@@ -1146,7 +1218,7 @@ class RtuiHeaderComponent {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiHeaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rtui-header', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+            args: [{ selector: 'rtui-header', host: { class: BEM_BLOCK$n }, providers: [BreakpointService], changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         NgTemplateOutlet,
                         // Material
                         MatToolbar,
@@ -1160,7 +1232,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                         RtuiToolbarLeftDirective,
                         RtuiToolbarCenterDirective,
                         RtuiToolbarRightDirective,
-                    ], template: "<rtui-toolbar>\n    <ng-container *rtuiToolbarLeft>\n        @if (isMobile() && isMobileMenuButtonShown()) {\n            <button mat-icon-button rtBlock=\"mobile-menu-button\" (click)=\"openSideMenu()\">\n                <mat-icon>menu</mat-icon>\n            </button>\n        }\n\n        @if (leftHeaderTpl()) {\n            <ng-template *ngTemplateOutlet=\"leftHeaderTpl() ?? null\" />\n        }\n    </ng-container>\n\n    @if (centerHeaderTpl()) {\n        <ng-container *rtuiToolbarCenter>\n            <ng-template *ngTemplateOutlet=\"centerHeaderTpl() ?? null\" />\n        </ng-container>\n    }\n\n    @if (rightHeaderTpl()) {\n        <ng-container *rtuiToolbarRight>\n            <ng-template *ngTemplateOutlet=\"rightHeaderTpl() ?? null\" />\n        </ng-container>\n    }\n</rtui-toolbar>\n" }]
+                    ], template: "<rtui-toolbar>\n    <ng-container *rtuiToolbarLeft>\n        @if (narrow() && isMobileMenuButtonShown()) {\n            <button mat-icon-button rtBlock=\"mobile-menu-button\" (click)=\"openSideMenu()\">\n                <mat-icon>menu</mat-icon>\n            </button>\n        }\n\n        @if (leftHeaderTpl()) {\n            <ng-template *ngTemplateOutlet=\"leftHeaderTpl() ?? null\" />\n        }\n    </ng-container>\n\n    @if (centerHeaderTpl()) {\n        <ng-container *rtuiToolbarCenter>\n            <ng-template *ngTemplateOutlet=\"centerHeaderTpl() ?? null\" />\n        </ng-container>\n    }\n\n    @if (rightHeaderTpl()) {\n        <ng-container *rtuiToolbarRight>\n            <ng-template *ngTemplateOutlet=\"rightHeaderTpl() ?? null\" />\n        </ng-container>\n    }\n</rtui-toolbar>\n" }]
         }], propDecorators: { isMobile: [{ type: i0.Input, args: [{ isSignal: true, alias: "isMobile", required: false }] }], isMobileMenuButtonShown: [{ type: i0.Input, args: [{ isSignal: true, alias: "isMobileMenuButtonShown", required: false }] }], leftHeaderTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => RtuiHeaderLeftDirective), { ...{
                             read: TemplateRef,
                         }, isSignal: true }] }], centerHeaderTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => RtuiHeaderCenterDirective), { ...{
@@ -1169,10 +1241,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                             read: TemplateRef,
                         }, isSignal: true }] }], openMobileMenuAction: [{ type: i0.Output, args: ["openMobileMenuAction"] }] } });
 
+const BEM_BLOCK$m = 'rtui-clear-button';
 class RtuiClearButtonComponent {
     constructor() {
+        this.#breakpoints = inject(BreakpointService);
+        /** Экран узкий: значение входа, если приложение его дало, иначе замер кита. */
+        this.narrow = computed(() => this.isMobile() ?? !!this.#breakpoints.isMobile(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "narrow" }] : /* istanbul ignore next */ []));
         this.#defaultTooltipPosition = 'above';
-        this.isMobile = input(false, { ...(ngDevMode ? { debugName: "isMobile" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /**
+         * Признак узкого экрана.
+         *
+         * @deprecated Кит определяет его сам — `BreakpointService` из `@rt-tools/core`. Вход
+         * оставлен ради приложений, которые уже его передают, и уйдёт в следующем крупном выпуске.
+         */
+        this.isMobile = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isMobile" }] : /* istanbul ignore next */ []));
         this.isButtonShown = input(true, { ...(ngDevMode ? { debugName: "isButtonShown" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         this.tooltip = input(null, { ...(ngDevMode ? { debugName: "tooltip" } : /* istanbul ignore next */ {}), transform: (value) => (isString(value) ? value.trim() : '') });
         this.tooltipPosition = input(this.#defaultTooltipPosition, /* @ts-ignore */
@@ -1180,6 +1264,7 @@ class RtuiClearButtonComponent {
         this.keydownAction = output();
         this.clickAction = output();
     }
+    #breakpoints;
     #defaultTooltipPosition;
     onKeydown() {
         this.keydownAction.emit();
@@ -1188,7 +1273,7 @@ class RtuiClearButtonComponent {
         this.clickAction.emit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiClearButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.5", type: RtuiClearButtonComponent, isStandalone: true, selector: "rtui-clear-button", inputs: { isMobile: { classPropertyName: "isMobile", publicName: "isMobile", isSignal: true, isRequired: false, transformFunction: null }, isButtonShown: { classPropertyName: "isButtonShown", publicName: "isButtonShown", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null }, tooltipPosition: { classPropertyName: "tooltipPosition", publicName: "tooltipPosition", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { keydownAction: "keydownAction", clickAction: "clickAction" }, ngImport: i0, template: "<button\n    rtBlock=\"rtui-clear-button\"\n    [rtMod]=\"{ invisible: !isButtonShown() }\"\n    [matTooltip]=\"tooltip() ?? ''\"\n    [matTooltipPosition]=\"tooltipPosition()\"\n    [matTooltipDisabled]=\"isMobile()\"\n    (keydown)=\"onKeydown()\"\n    (click)=\"onClick()\">\n    <mat-icon rtElem=\"icon\">close</mat-icon>\n</button>\n", styles: ["@charset \"UTF-8\";:host{--rt-clear-button-host-margin: 0 .5rem 0 0;--rt-clear-button-host-padding: .1rem;--rt-clear-button-host-background-color: var(--rt-bg-base-strong);--rt-clear-button-icon-size: 1rem;--rt-clear-button-icon-color: var(--rt-text-base-secondary);--rt-clear-button-icon-hover-color: var(--rt-text-base-strong)}:host .rtui-clear-button{display:flex;align-items:center;justify-content:center;padding:var(--rt-clear-button-host-padding);border:none;border-radius:var(--rt-radius-full);margin:var(--rt-clear-button-host-margin);background-color:var(--rt-clear-button-host-background-color)}:host .rtui-clear-button--invisible{position:absolute;overflow:hidden;width:1px;height:1px;padding:0;border:0;margin:-1px;clip:rect(0 0 0 0);clip-path:inset(100%);pointer-events:none;white-space:nowrap}:host .rtui-clear-button__icon{width:var(--rt-clear-button-icon-size);height:var(--rt-clear-button-icon-size);color:var(--rt-clear-button-icon-color);font-size:var(--rt-clear-button-icon-size)}:host .rtui-clear-button__icon:hover{color:var(--rt-clear-button-icon-hover-color)}\n"], dependencies: [{ kind: "component", type: 
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.5", type: RtuiClearButtonComponent, isStandalone: true, selector: "rtui-clear-button", inputs: { isMobile: { classPropertyName: "isMobile", publicName: "isMobile", isSignal: true, isRequired: false, transformFunction: null }, isButtonShown: { classPropertyName: "isButtonShown", publicName: "isButtonShown", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null }, tooltipPosition: { classPropertyName: "tooltipPosition", publicName: "tooltipPosition", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { keydownAction: "keydownAction", clickAction: "clickAction" }, host: { classAttribute: "rtui-clear-button" }, providers: [BreakpointService], ngImport: i0, template: "<button\n    rtBlock=\"rtui-clear-button\"\n    [rtMod]=\"{ invisible: !isButtonShown() }\"\n    [matTooltip]=\"tooltip() ?? ''\"\n    [matTooltipPosition]=\"tooltipPosition()\"\n    [matTooltipDisabled]=\"narrow()\"\n    (keydown)=\"onKeydown()\"\n    (click)=\"onClick()\">\n    <mat-icon rtElem=\"icon\">close</mat-icon>\n</button>\n", styles: ["@charset \"UTF-8\";:host{--rt-clear-button-host-margin: 0 .5rem 0 0;--rt-clear-button-host-padding: .1rem;--rt-clear-button-host-background-color: var(--rt-bg-base-strong);--rt-clear-button-icon-size: 1rem;--rt-clear-button-icon-color: var(--rt-text-base-secondary);--rt-clear-button-icon-hover-color: var(--rt-text-base-strong)}:host .rtui-clear-button{display:flex;align-items:center;justify-content:center;padding:var(--rt-clear-button-host-padding);border:none;border-radius:var(--rt-radius-full);margin:var(--rt-clear-button-host-margin);background-color:var(--rt-clear-button-host-background-color)}:host .rtui-clear-button--invisible{position:absolute;overflow:hidden;width:1px;height:1px;padding:0;border:0;margin:-1px;clip:rect(0 0 0 0);clip-path:inset(100%);pointer-events:none;white-space:nowrap}:host .rtui-clear-button__icon{width:var(--rt-clear-button-icon-size);height:var(--rt-clear-button-icon-size);color:var(--rt-clear-button-icon-color);font-size:var(--rt-clear-button-icon-size)}:host .rtui-clear-button__icon:hover{color:var(--rt-clear-button-icon-hover-color)}\n"], dependencies: [{ kind: "component", type: 
                 // Material
                 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: 
                 // BEM
@@ -1196,7 +1281,7 @@ class RtuiClearButtonComponent {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiClearButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rtui-clear-button', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+            args: [{ selector: 'rtui-clear-button', host: { class: BEM_BLOCK$m }, providers: [BreakpointService], changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         // Material
                         MatIcon,
                         MatIconButton,
@@ -1205,7 +1290,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                         BlockDirective,
                         ElemDirective,
                         ModDirective,
-                    ], template: "<button\n    rtBlock=\"rtui-clear-button\"\n    [rtMod]=\"{ invisible: !isButtonShown() }\"\n    [matTooltip]=\"tooltip() ?? ''\"\n    [matTooltipPosition]=\"tooltipPosition()\"\n    [matTooltipDisabled]=\"isMobile()\"\n    (keydown)=\"onKeydown()\"\n    (click)=\"onClick()\">\n    <mat-icon rtElem=\"icon\">close</mat-icon>\n</button>\n", styles: ["@charset \"UTF-8\";:host{--rt-clear-button-host-margin: 0 .5rem 0 0;--rt-clear-button-host-padding: .1rem;--rt-clear-button-host-background-color: var(--rt-bg-base-strong);--rt-clear-button-icon-size: 1rem;--rt-clear-button-icon-color: var(--rt-text-base-secondary);--rt-clear-button-icon-hover-color: var(--rt-text-base-strong)}:host .rtui-clear-button{display:flex;align-items:center;justify-content:center;padding:var(--rt-clear-button-host-padding);border:none;border-radius:var(--rt-radius-full);margin:var(--rt-clear-button-host-margin);background-color:var(--rt-clear-button-host-background-color)}:host .rtui-clear-button--invisible{position:absolute;overflow:hidden;width:1px;height:1px;padding:0;border:0;margin:-1px;clip:rect(0 0 0 0);clip-path:inset(100%);pointer-events:none;white-space:nowrap}:host .rtui-clear-button__icon{width:var(--rt-clear-button-icon-size);height:var(--rt-clear-button-icon-size);color:var(--rt-clear-button-icon-color);font-size:var(--rt-clear-button-icon-size)}:host .rtui-clear-button__icon:hover{color:var(--rt-clear-button-icon-hover-color)}\n"] }]
+                    ], template: "<button\n    rtBlock=\"rtui-clear-button\"\n    [rtMod]=\"{ invisible: !isButtonShown() }\"\n    [matTooltip]=\"tooltip() ?? ''\"\n    [matTooltipPosition]=\"tooltipPosition()\"\n    [matTooltipDisabled]=\"narrow()\"\n    (keydown)=\"onKeydown()\"\n    (click)=\"onClick()\">\n    <mat-icon rtElem=\"icon\">close</mat-icon>\n</button>\n", styles: ["@charset \"UTF-8\";:host{--rt-clear-button-host-margin: 0 .5rem 0 0;--rt-clear-button-host-padding: .1rem;--rt-clear-button-host-background-color: var(--rt-bg-base-strong);--rt-clear-button-icon-size: 1rem;--rt-clear-button-icon-color: var(--rt-text-base-secondary);--rt-clear-button-icon-hover-color: var(--rt-text-base-strong)}:host .rtui-clear-button{display:flex;align-items:center;justify-content:center;padding:var(--rt-clear-button-host-padding);border:none;border-radius:var(--rt-radius-full);margin:var(--rt-clear-button-host-margin);background-color:var(--rt-clear-button-host-background-color)}:host .rtui-clear-button--invisible{position:absolute;overflow:hidden;width:1px;height:1px;padding:0;border:0;margin:-1px;clip:rect(0 0 0 0);clip-path:inset(100%);pointer-events:none;white-space:nowrap}:host .rtui-clear-button__icon{width:var(--rt-clear-button-icon-size);height:var(--rt-clear-button-icon-size);color:var(--rt-clear-button-icon-color);font-size:var(--rt-clear-button-icon-size)}:host .rtui-clear-button__icon:hover{color:var(--rt-clear-button-icon-hover-color)}\n"] }]
         }], propDecorators: { isMobile: [{ type: i0.Input, args: [{ isSignal: true, alias: "isMobile", required: false }] }], isButtonShown: [{ type: i0.Input, args: [{ isSignal: true, alias: "isButtonShown", required: false }] }], tooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip", required: false }] }], tooltipPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipPosition", required: false }] }], keydownAction: [{ type: i0.Output, args: ["keydownAction"] }], clickAction: [{ type: i0.Output, args: ["clickAction"] }] } });
 
 const DEFAULT_PAGE_SIZE = 20;
@@ -1217,17 +1302,27 @@ const DEFAULT_PAGE_MODEL = Object.freeze({
     hasPrev: false,
 });
 
+const BEM_BLOCK$l = 'rtui-pagination';
 class RtuiPaginationComponent {
     constructor() {
         this.#injector = inject(Injector);
         this.#destroyRef = inject(DestroyRef);
+        this.#breakpoints = inject(BreakpointService);
         this.#fb = inject(FormBuilder);
         this.#windowRef = inject(WINDOW);
+        /** Экран узкий: значение входа, если приложение его дало, иначе замер кита. */
+        this.narrow = computed(() => this.isMobile() ?? !!this.#breakpoints.isMobile(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "narrow" }] : /* istanbul ignore next */ []));
         /** Current Page Model */
         this.currentPageModel = input.required(/* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "currentPageModel" }] : /* istanbul ignore next */ []));
-        /** Indicates is mobile view */
-        this.isMobile = input.required({ ...(ngDevMode ? { debugName: "isMobile" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /**
+         * Признак узкого экрана.
+         *
+         * @deprecated Кит определяет его сам — `RtuiBreakpointsService`. Вход оставлен ради
+         * приложений, которые уже его передают, и уйдёт в следующем крупном выпуске.
+         */
+        this.isMobile = input(null, { ...(ngDevMode ? { debugName: "isMobile" } : /* istanbul ignore next */ {}), transform: (value) => (value === null || value === undefined ? null : booleanAttribute(value)) });
         /** Output action when Page Model changed */
         this.pageModelChange = output();
         /** Form control for selected page size */
@@ -1257,6 +1352,7 @@ class RtuiPaginationComponent {
     }
     #injector;
     #destroyRef;
+    #breakpoints;
     #fb;
     #windowRef;
     /** Set 'isContentClipped' when widow resize */
@@ -1353,12 +1449,12 @@ class RtuiPaginationComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiPaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: RtuiPaginationComponent, isStandalone: true, selector: "rtui-pagination", inputs: { currentPageModel: { classPropertyName: "currentPageModel", publicName: "currentPageModel", isSignal: true, isRequired: true, transformFunction: null }, isMobile: { classPropertyName: "isMobile", publicName: "isMobile", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { pageModelChange: "pageModelChange" }, host: { listeners: { "window:resize": "onResize()" } }, viewQueries: [{ propertyName: "containerRef", first: true, predicate: ["containerRef"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (currentPageModel().totalCount > pageSizes()[0]) {\n    <div #containerRef rtBlock=\"pagination-container\" [rtMod]=\"{ clipped: isContentClipped() && !isMobile() }\">\n        <div rtBlock=\"paging\" [rtMod]=\"{ clipped: isContentClipped() && !isMobile() }\">\n            <div\n                rtElem=\"item\"\n                role=\"button\"\n                tabindex=\"0\"\n                [rtMod]=\"{ enabled: currentPageModel()?.hasPrev }\"\n                [class.c-pagination__paging-item--disabled]=\"!currentPageModel().hasPrev\"\n                (click)=\"onChangePageNumber(currentPageModel().pageNumber - 1)\"\n                (keydown)=\"onChangePageNumber(currentPageModel().pageNumber - 1)\">\n                <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                    <path d=\"M15.5 8.5H0.5\" stroke=\"currentColor\" stroke-miterlimit=\"10\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                    <path\n                        d=\"M5.5 3.5L0.5 8.5L5.5 13.5\"\n                        stroke=\"currentColor\"\n                        stroke-miterlimit=\"10\"\n                        stroke-linecap=\"round\"\n                        stroke-linejoin=\"round\" />\n                </svg>\n            </div>\n\n            @if (isMobile()) {\n                <div rtElem=\"item\" rtMod=\"active\" role=\"button\" tabindex=\"1\">\n                    <span rtElem=\"item-label\">{{ currentPageModel().pageNumber }}</span>\n                </div>\n            } @else {\n                @for (number of numbers(); track $index) {\n                    <div\n                        rtElem=\"item\"\n                        role=\"button\"\n                        tabindex=\"1\"\n                        [rtMod]=\"{\n                            active: currentPageModel().pageNumber === number,\n                            divider: number === divider(),\n                            enabled: number !== divider() && currentPageModel().pageNumber !== number,\n                        }\"\n                        (click)=\"onChangePageNumber(number)\"\n                        (keydown)=\"onChangePageNumber(number)\">\n                        <span rtElem=\"item-label\">{{ number }}</span>\n                    </div>\n                }\n            }\n\n            <div\n                rtElem=\"item\"\n                role=\"button\"\n                tabindex=\"3\"\n                [rtMod]=\"{ enabled: currentPageModel()?.hasNext }\"\n                (click)=\"onChangePageNumber(currentPageModel().pageNumber + 1)\"\n                (keydown)=\"onChangePageNumber(currentPageModel().pageNumber + 1)\">\n                <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                    <path d=\"M0.5 8.5H15.5\" stroke=\"currentColor\" stroke-miterlimit=\"10\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                    <path\n                        d=\"M10.5 3.5L15.5 8.5L10.5 13.5\"\n                        stroke=\"currentColor\"\n                        stroke-miterlimit=\"10\"\n                        stroke-linecap=\"round\"\n                        stroke-linejoin=\"round\" />\n                </svg>\n            </div>\n        </div>\n\n        <div rtBlock=\"page-size-toggle\" [rtMod]=\"{ clipped: isContentClipped() && !isMobile() }\">\n            @if (!isMobile()) {\n                <div rtElem=\"title\">Items per page:</div>\n            }\n\n            <select rtElem=\"selector\" [formControl]=\"control\">\n                @for (size of pageSizes(); track $index) {\n                    <option [value]=\"size\">{{ size }}</option>\n                }\n            </select>\n        </div>\n    </div>\n}\n", styles: ["@charset \"UTF-8\";:host{display:flex;width:fit-content;height:100%;--rt-table-pagination-container-gap: 2rem;--rt-table-pagination-container-margin: .5rem 0;--rt-table-pagination-container-color: var(--rt-text-base-secondary);--rt-table-pagination-container-font-size: .875rem;--rt-table-pagination-container-font-weight: 400;--rt-table-pagination-container-line-height: 1rem;--rt-table-pagination-container-mobile-gap: 1rem;--rt-table-pagination-paging-gap: .5rem;--rt-table-pagination-paging-mobile-margin: .5rem 0 0 0;--rt-table-pagination-paging-item-padding: .5rem;--rt-table-pagination-paging-item-border: 1px solid var(--rt-border-neutral-medium);--rt-table-pagination-paging-item-border-radius: .75rem;--rt-table-pagination-paging-item-hover-color: var(--rt-text-static-light);--rt-table-pagination-paging-item-hover-background-color: var(--rt-bg-base-emphasis);--rt-table-pagination-paging-item-active-color: var(--rt-text-static-light);--rt-table-pagination-paging-item-active-background-color: var(--rt-bg-base-emphasis);--rt-table-pagination-paging-item-disabled-svg-opacity: .3;--rt-table-pagination-size-toggle-gap: .75rem;--rt-table-pagination-size-toggle-selector-min-width: 3rem;--rt-table-pagination-size-toggle-selector-height: 2rem;--rt-table-pagination-size-toggle-selector-mobile-margin: 0 0 .5rem 0}:host .pagination-container{position:relative;display:flex;align-items:center;justify-content:flex-start;color:var(--rt-table-pagination-container-color);font-size:var(--rt-table-pagination-container-font-size);font-weight:var(--rt-table-pagination-container-font-weight);gap:var(--rt-table-pagination-container-gap);line-height:var(--rt-table-pagination-container-line-height)}:host .pagination-container--clipped{flex-direction:column;align-items:flex-start;justify-content:center;gap:var(--rt-table-pagination-container-mobile-gap)}:host .pagination-container--mobile{width:100%;justify-content:space-between}:host .pagination-container .paging{display:flex;align-items:center;justify-content:center;margin:var(--rt-table-pagination-container-margin);gap:var(--rt-table-pagination-paging-gap)}:host .pagination-container .paging--clipped{margin:var(--rt-table-pagination-paging-mobile-margin)}:host .pagination-container .paging__item{position:relative;display:flex;align-items:center;justify-content:center;padding:var(--rt-table-pagination-paging-item-padding);border:var(--rt-table-pagination-paging-item-border);border-radius:var(--rt-table-pagination-paging-item-border-radius);background-color:transparent;cursor:default;pointer-events:none}:host .pagination-container .paging__item-label{min-width:1rem;text-align:center}:host .pagination-container .paging__item svg{fill-opacity:var(--rt-table-pagination-paging-item-disabled-svg-opacity)}:host .pagination-container .paging__item:hover:not(.divider){background-color:var(--rt-table-pagination-paging-item-hover-background-color);color:var(--rt-table-pagination-paging-item-hover-color)}:host .pagination-container .paging__item--active{background-color:var(--rt-table-pagination-paging-item-active-background-color);color:var(--rt-table-pagination-paging-item-active-color)}:host .pagination-container .paging__item--enabled{cursor:pointer;pointer-events:auto}:host .pagination-container .paging__item--enabled svg{fill-opacity:1}:host .pagination-container .paging__item--divider{border:none;cursor:default;pointer-events:none}:host .pagination-container .page-size-toggle{display:flex;flex-direction:row;align-items:center;justify-content:center;margin:var(--rt-table-pagination-container-margin);gap:var(--rt-table-pagination-size-toggle-gap)}:host .pagination-container .page-size-toggle--clipped{margin:var(--rt-table-pagination-size-toggle-selector-mobile-margin)}:host .pagination-container .page-size-toggle__title{white-space:nowrap}:host .pagination-container .page-size-toggle__selector{width:auto;min-width:var(--rt-table-pagination-size-toggle-selector-min-width);height:var(--rt-table-pagination-size-toggle-selector-height);border:var(--rt-table-pagination-paging-item-border);border-radius:var(--rt-table-pagination-paging-item-border-radius);background-color:transparent;color:var(--rt-table-pagination-container-color);cursor:pointer;font-size:var(--rt-table-pagination-container-font-size);font-weight:var(--rt-table-pagination-container-font-weight);line-height:var(--rt-table-pagination-container-line-height)}@media screen and (max-width:599px){:host{width:100%}:host .pagination-container{width:100%;justify-content:space-between}}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple]):not([ngNoCva])[formControlName],select:not([multiple]):not([ngNoCva])[formControl],select:not([multiple]):not([ngNoCva])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }, { kind: "directive", type: ModDirective, selector: "[rtMod]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: RtuiPaginationComponent, isStandalone: true, selector: "rtui-pagination", inputs: { currentPageModel: { classPropertyName: "currentPageModel", publicName: "currentPageModel", isSignal: true, isRequired: true, transformFunction: null }, isMobile: { classPropertyName: "isMobile", publicName: "isMobile", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pageModelChange: "pageModelChange" }, host: { listeners: { "window:resize": "onResize()" }, classAttribute: "rtui-pagination" }, providers: [BreakpointService], viewQueries: [{ propertyName: "containerRef", first: true, predicate: ["containerRef"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (currentPageModel().totalCount > pageSizes()[0]) {\n    <div #containerRef rtBlock=\"pagination-container\" [rtMod]=\"{ clipped: isContentClipped() }\">\n        <div rtBlock=\"paging\" [rtMod]=\"{ clipped: isContentClipped() }\">\n            <div\n                rtElem=\"item\"\n                role=\"button\"\n                tabindex=\"0\"\n                [rtMod]=\"{ enabled: currentPageModel()?.hasPrev }\"\n                (click)=\"onChangePageNumber(currentPageModel().pageNumber - 1)\"\n                (keydown)=\"onChangePageNumber(currentPageModel().pageNumber - 1)\">\n                <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                    <path d=\"M15.5 8.5H0.5\" stroke=\"currentColor\" stroke-miterlimit=\"10\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                    <path\n                        d=\"M5.5 3.5L0.5 8.5L5.5 13.5\"\n                        stroke=\"currentColor\"\n                        stroke-miterlimit=\"10\"\n                        stroke-linecap=\"round\"\n                        stroke-linejoin=\"round\" />\n                </svg>\n            </div>\n\n            @if (narrow()) {\n                <div rtElem=\"item\" rtMod=\"active\" role=\"button\" tabindex=\"1\">\n                    <span rtElem=\"item-label\">{{ currentPageModel().pageNumber }}</span>\n                </div>\n            } @else {\n                @for (number of numbers(); track $index) {\n                    <div\n                        rtElem=\"item\"\n                        role=\"button\"\n                        tabindex=\"1\"\n                        [rtMod]=\"{\n                            active: currentPageModel().pageNumber === number,\n                            divider: number === divider(),\n                            enabled: number !== divider() && currentPageModel().pageNumber !== number,\n                        }\"\n                        (click)=\"onChangePageNumber(number)\"\n                        (keydown)=\"onChangePageNumber(number)\">\n                        <span rtElem=\"item-label\">{{ number }}</span>\n                    </div>\n                }\n            }\n\n            <div\n                rtElem=\"item\"\n                role=\"button\"\n                tabindex=\"3\"\n                [rtMod]=\"{ enabled: currentPageModel()?.hasNext }\"\n                (click)=\"onChangePageNumber(currentPageModel().pageNumber + 1)\"\n                (keydown)=\"onChangePageNumber(currentPageModel().pageNumber + 1)\">\n                <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                    <path d=\"M0.5 8.5H15.5\" stroke=\"currentColor\" stroke-miterlimit=\"10\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                    <path\n                        d=\"M10.5 3.5L15.5 8.5L10.5 13.5\"\n                        stroke=\"currentColor\"\n                        stroke-miterlimit=\"10\"\n                        stroke-linecap=\"round\"\n                        stroke-linejoin=\"round\" />\n                </svg>\n            </div>\n        </div>\n\n        <div rtBlock=\"page-size-toggle\" [rtMod]=\"{ clipped: isContentClipped() }\">\n            @if (!narrow()) {\n                <div rtElem=\"title\">Items per page:</div>\n            }\n\n            <select rtElem=\"selector\" [formControl]=\"control\">\n                @for (size of pageSizes(); track $index) {\n                    <option [value]=\"size\">{{ size }}</option>\n                }\n            </select>\n        </div>\n    </div>\n}\n", styles: ["@charset \"UTF-8\";:host{display:flex;width:fit-content;height:100%;--rt-table-pagination-container-gap: 2rem;--rt-table-pagination-container-margin: .5rem 0;--rt-table-pagination-container-color: var(--rt-text-base-secondary);--rt-table-pagination-container-font-size: .875rem;--rt-table-pagination-container-font-weight: 400;--rt-table-pagination-container-line-height: 1rem;--rt-table-pagination-container-clipped-gap: 1rem;--rt-table-pagination-paging-gap: .5rem;--rt-table-pagination-paging-clipped-margin: .5rem 0 0 0;--rt-table-pagination-paging-item-padding: .5rem;--rt-table-pagination-paging-item-border: 1px solid var(--rt-border-neutral-medium);--rt-table-pagination-paging-item-border-radius: .75rem;--rt-table-pagination-paging-item-hover-color: var(--rt-text-static-light);--rt-table-pagination-paging-item-hover-background-color: var(--rt-bg-base-emphasis);--rt-table-pagination-paging-item-active-color: var(--rt-text-static-light);--rt-table-pagination-paging-item-active-background-color: var(--rt-bg-base-emphasis);--rt-table-pagination-paging-item-disabled-svg-opacity: .3;--rt-table-pagination-size-toggle-gap: .75rem;--rt-table-pagination-size-toggle-selector-min-width: 3rem;--rt-table-pagination-size-toggle-selector-height: 2rem;--rt-table-pagination-size-toggle-selector-clipped-margin: 0 0 .5rem 0}:host .pagination-container{position:relative;display:flex;align-items:center;justify-content:flex-start;color:var(--rt-table-pagination-container-color);font-size:var(--rt-table-pagination-container-font-size);font-weight:var(--rt-table-pagination-container-font-weight);gap:var(--rt-table-pagination-container-gap);line-height:var(--rt-table-pagination-container-line-height)}@media screen and (min-width:600px){:host .pagination-container--clipped{flex-direction:column;align-items:flex-start;justify-content:center;gap:var(--rt-table-pagination-container-clipped-gap)}}:host .pagination-container .paging{display:flex;align-items:center;justify-content:center;margin:var(--rt-table-pagination-container-margin);gap:var(--rt-table-pagination-paging-gap)}@media screen and (min-width:600px){:host .pagination-container .paging--clipped{margin:var(--rt-table-pagination-paging-clipped-margin)}}:host .pagination-container .paging__item{position:relative;display:flex;align-items:center;justify-content:center;padding:var(--rt-table-pagination-paging-item-padding);border:var(--rt-table-pagination-paging-item-border);border-radius:var(--rt-table-pagination-paging-item-border-radius);background-color:transparent;cursor:default;pointer-events:none}:host .pagination-container .paging__item-label{min-width:1rem;text-align:center}:host .pagination-container .paging__item svg{fill-opacity:var(--rt-table-pagination-paging-item-disabled-svg-opacity)}:host .pagination-container .paging__item:hover:not(.divider){background-color:var(--rt-table-pagination-paging-item-hover-background-color);color:var(--rt-table-pagination-paging-item-hover-color)}:host .pagination-container .paging__item--active{background-color:var(--rt-table-pagination-paging-item-active-background-color);color:var(--rt-table-pagination-paging-item-active-color)}:host .pagination-container .paging__item--enabled{cursor:pointer;pointer-events:auto}:host .pagination-container .paging__item--enabled svg{fill-opacity:1}:host .pagination-container .paging__item--divider{border:none;cursor:default;pointer-events:none}:host .pagination-container .page-size-toggle{display:flex;flex-direction:row;align-items:center;justify-content:center;margin:var(--rt-table-pagination-container-margin);gap:var(--rt-table-pagination-size-toggle-gap)}@media screen and (min-width:600px){:host .pagination-container .page-size-toggle--clipped{margin:var(--rt-table-pagination-size-toggle-selector-clipped-margin)}}:host .pagination-container .page-size-toggle__title{white-space:nowrap}:host .pagination-container .page-size-toggle__selector{width:auto;min-width:var(--rt-table-pagination-size-toggle-selector-min-width);height:var(--rt-table-pagination-size-toggle-selector-height);border:var(--rt-table-pagination-paging-item-border);border-radius:var(--rt-table-pagination-paging-item-border-radius);background-color:transparent;color:var(--rt-table-pagination-container-color);cursor:pointer;font-size:var(--rt-table-pagination-container-font-size);font-weight:var(--rt-table-pagination-container-font-weight);line-height:var(--rt-table-pagination-container-line-height)}@media screen and (max-width:599px){:host{width:100%}:host .pagination-container{width:100%;justify-content:space-between}}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple]):not([ngNoCva])[formControlName],select:not([multiple]):not([ngNoCva])[formControl],select:not([multiple]):not([ngNoCva])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }, { kind: "directive", type: ModDirective, selector: "[rtMod]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiPaginationComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rtui-pagination', changeDetection: ChangeDetectionStrategy.OnPush, imports: [ReactiveFormsModule, BlockDirective, ElemDirective, ModDirective], template: "@if (currentPageModel().totalCount > pageSizes()[0]) {\n    <div #containerRef rtBlock=\"pagination-container\" [rtMod]=\"{ clipped: isContentClipped() && !isMobile() }\">\n        <div rtBlock=\"paging\" [rtMod]=\"{ clipped: isContentClipped() && !isMobile() }\">\n            <div\n                rtElem=\"item\"\n                role=\"button\"\n                tabindex=\"0\"\n                [rtMod]=\"{ enabled: currentPageModel()?.hasPrev }\"\n                [class.c-pagination__paging-item--disabled]=\"!currentPageModel().hasPrev\"\n                (click)=\"onChangePageNumber(currentPageModel().pageNumber - 1)\"\n                (keydown)=\"onChangePageNumber(currentPageModel().pageNumber - 1)\">\n                <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                    <path d=\"M15.5 8.5H0.5\" stroke=\"currentColor\" stroke-miterlimit=\"10\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                    <path\n                        d=\"M5.5 3.5L0.5 8.5L5.5 13.5\"\n                        stroke=\"currentColor\"\n                        stroke-miterlimit=\"10\"\n                        stroke-linecap=\"round\"\n                        stroke-linejoin=\"round\" />\n                </svg>\n            </div>\n\n            @if (isMobile()) {\n                <div rtElem=\"item\" rtMod=\"active\" role=\"button\" tabindex=\"1\">\n                    <span rtElem=\"item-label\">{{ currentPageModel().pageNumber }}</span>\n                </div>\n            } @else {\n                @for (number of numbers(); track $index) {\n                    <div\n                        rtElem=\"item\"\n                        role=\"button\"\n                        tabindex=\"1\"\n                        [rtMod]=\"{\n                            active: currentPageModel().pageNumber === number,\n                            divider: number === divider(),\n                            enabled: number !== divider() && currentPageModel().pageNumber !== number,\n                        }\"\n                        (click)=\"onChangePageNumber(number)\"\n                        (keydown)=\"onChangePageNumber(number)\">\n                        <span rtElem=\"item-label\">{{ number }}</span>\n                    </div>\n                }\n            }\n\n            <div\n                rtElem=\"item\"\n                role=\"button\"\n                tabindex=\"3\"\n                [rtMod]=\"{ enabled: currentPageModel()?.hasNext }\"\n                (click)=\"onChangePageNumber(currentPageModel().pageNumber + 1)\"\n                (keydown)=\"onChangePageNumber(currentPageModel().pageNumber + 1)\">\n                <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                    <path d=\"M0.5 8.5H15.5\" stroke=\"currentColor\" stroke-miterlimit=\"10\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                    <path\n                        d=\"M10.5 3.5L15.5 8.5L10.5 13.5\"\n                        stroke=\"currentColor\"\n                        stroke-miterlimit=\"10\"\n                        stroke-linecap=\"round\"\n                        stroke-linejoin=\"round\" />\n                </svg>\n            </div>\n        </div>\n\n        <div rtBlock=\"page-size-toggle\" [rtMod]=\"{ clipped: isContentClipped() && !isMobile() }\">\n            @if (!isMobile()) {\n                <div rtElem=\"title\">Items per page:</div>\n            }\n\n            <select rtElem=\"selector\" [formControl]=\"control\">\n                @for (size of pageSizes(); track $index) {\n                    <option [value]=\"size\">{{ size }}</option>\n                }\n            </select>\n        </div>\n    </div>\n}\n", styles: ["@charset \"UTF-8\";:host{display:flex;width:fit-content;height:100%;--rt-table-pagination-container-gap: 2rem;--rt-table-pagination-container-margin: .5rem 0;--rt-table-pagination-container-color: var(--rt-text-base-secondary);--rt-table-pagination-container-font-size: .875rem;--rt-table-pagination-container-font-weight: 400;--rt-table-pagination-container-line-height: 1rem;--rt-table-pagination-container-mobile-gap: 1rem;--rt-table-pagination-paging-gap: .5rem;--rt-table-pagination-paging-mobile-margin: .5rem 0 0 0;--rt-table-pagination-paging-item-padding: .5rem;--rt-table-pagination-paging-item-border: 1px solid var(--rt-border-neutral-medium);--rt-table-pagination-paging-item-border-radius: .75rem;--rt-table-pagination-paging-item-hover-color: var(--rt-text-static-light);--rt-table-pagination-paging-item-hover-background-color: var(--rt-bg-base-emphasis);--rt-table-pagination-paging-item-active-color: var(--rt-text-static-light);--rt-table-pagination-paging-item-active-background-color: var(--rt-bg-base-emphasis);--rt-table-pagination-paging-item-disabled-svg-opacity: .3;--rt-table-pagination-size-toggle-gap: .75rem;--rt-table-pagination-size-toggle-selector-min-width: 3rem;--rt-table-pagination-size-toggle-selector-height: 2rem;--rt-table-pagination-size-toggle-selector-mobile-margin: 0 0 .5rem 0}:host .pagination-container{position:relative;display:flex;align-items:center;justify-content:flex-start;color:var(--rt-table-pagination-container-color);font-size:var(--rt-table-pagination-container-font-size);font-weight:var(--rt-table-pagination-container-font-weight);gap:var(--rt-table-pagination-container-gap);line-height:var(--rt-table-pagination-container-line-height)}:host .pagination-container--clipped{flex-direction:column;align-items:flex-start;justify-content:center;gap:var(--rt-table-pagination-container-mobile-gap)}:host .pagination-container--mobile{width:100%;justify-content:space-between}:host .pagination-container .paging{display:flex;align-items:center;justify-content:center;margin:var(--rt-table-pagination-container-margin);gap:var(--rt-table-pagination-paging-gap)}:host .pagination-container .paging--clipped{margin:var(--rt-table-pagination-paging-mobile-margin)}:host .pagination-container .paging__item{position:relative;display:flex;align-items:center;justify-content:center;padding:var(--rt-table-pagination-paging-item-padding);border:var(--rt-table-pagination-paging-item-border);border-radius:var(--rt-table-pagination-paging-item-border-radius);background-color:transparent;cursor:default;pointer-events:none}:host .pagination-container .paging__item-label{min-width:1rem;text-align:center}:host .pagination-container .paging__item svg{fill-opacity:var(--rt-table-pagination-paging-item-disabled-svg-opacity)}:host .pagination-container .paging__item:hover:not(.divider){background-color:var(--rt-table-pagination-paging-item-hover-background-color);color:var(--rt-table-pagination-paging-item-hover-color)}:host .pagination-container .paging__item--active{background-color:var(--rt-table-pagination-paging-item-active-background-color);color:var(--rt-table-pagination-paging-item-active-color)}:host .pagination-container .paging__item--enabled{cursor:pointer;pointer-events:auto}:host .pagination-container .paging__item--enabled svg{fill-opacity:1}:host .pagination-container .paging__item--divider{border:none;cursor:default;pointer-events:none}:host .pagination-container .page-size-toggle{display:flex;flex-direction:row;align-items:center;justify-content:center;margin:var(--rt-table-pagination-container-margin);gap:var(--rt-table-pagination-size-toggle-gap)}:host .pagination-container .page-size-toggle--clipped{margin:var(--rt-table-pagination-size-toggle-selector-mobile-margin)}:host .pagination-container .page-size-toggle__title{white-space:nowrap}:host .pagination-container .page-size-toggle__selector{width:auto;min-width:var(--rt-table-pagination-size-toggle-selector-min-width);height:var(--rt-table-pagination-size-toggle-selector-height);border:var(--rt-table-pagination-paging-item-border);border-radius:var(--rt-table-pagination-paging-item-border-radius);background-color:transparent;color:var(--rt-table-pagination-container-color);cursor:pointer;font-size:var(--rt-table-pagination-container-font-size);font-weight:var(--rt-table-pagination-container-font-weight);line-height:var(--rt-table-pagination-container-line-height)}@media screen and (max-width:599px){:host{width:100%}:host .pagination-container{width:100%;justify-content:space-between}}\n"] }]
-        }], propDecorators: { currentPageModel: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentPageModel", required: true }] }], isMobile: [{ type: i0.Input, args: [{ isSignal: true, alias: "isMobile", required: true }] }], pageModelChange: [{ type: i0.Output, args: ["pageModelChange"] }], containerRef: [{ type: i0.ViewChild, args: ['containerRef', { isSignal: true }] }], onResize: [{
+            args: [{ selector: 'rtui-pagination', host: { class: BEM_BLOCK$l }, providers: [BreakpointService], changeDetection: ChangeDetectionStrategy.OnPush, imports: [ReactiveFormsModule, BlockDirective, ElemDirective, ModDirective], template: "@if (currentPageModel().totalCount > pageSizes()[0]) {\n    <div #containerRef rtBlock=\"pagination-container\" [rtMod]=\"{ clipped: isContentClipped() }\">\n        <div rtBlock=\"paging\" [rtMod]=\"{ clipped: isContentClipped() }\">\n            <div\n                rtElem=\"item\"\n                role=\"button\"\n                tabindex=\"0\"\n                [rtMod]=\"{ enabled: currentPageModel()?.hasPrev }\"\n                (click)=\"onChangePageNumber(currentPageModel().pageNumber - 1)\"\n                (keydown)=\"onChangePageNumber(currentPageModel().pageNumber - 1)\">\n                <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                    <path d=\"M15.5 8.5H0.5\" stroke=\"currentColor\" stroke-miterlimit=\"10\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                    <path\n                        d=\"M5.5 3.5L0.5 8.5L5.5 13.5\"\n                        stroke=\"currentColor\"\n                        stroke-miterlimit=\"10\"\n                        stroke-linecap=\"round\"\n                        stroke-linejoin=\"round\" />\n                </svg>\n            </div>\n\n            @if (narrow()) {\n                <div rtElem=\"item\" rtMod=\"active\" role=\"button\" tabindex=\"1\">\n                    <span rtElem=\"item-label\">{{ currentPageModel().pageNumber }}</span>\n                </div>\n            } @else {\n                @for (number of numbers(); track $index) {\n                    <div\n                        rtElem=\"item\"\n                        role=\"button\"\n                        tabindex=\"1\"\n                        [rtMod]=\"{\n                            active: currentPageModel().pageNumber === number,\n                            divider: number === divider(),\n                            enabled: number !== divider() && currentPageModel().pageNumber !== number,\n                        }\"\n                        (click)=\"onChangePageNumber(number)\"\n                        (keydown)=\"onChangePageNumber(number)\">\n                        <span rtElem=\"item-label\">{{ number }}</span>\n                    </div>\n                }\n            }\n\n            <div\n                rtElem=\"item\"\n                role=\"button\"\n                tabindex=\"3\"\n                [rtMod]=\"{ enabled: currentPageModel()?.hasNext }\"\n                (click)=\"onChangePageNumber(currentPageModel().pageNumber + 1)\"\n                (keydown)=\"onChangePageNumber(currentPageModel().pageNumber + 1)\">\n                <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                    <path d=\"M0.5 8.5H15.5\" stroke=\"currentColor\" stroke-miterlimit=\"10\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                    <path\n                        d=\"M10.5 3.5L15.5 8.5L10.5 13.5\"\n                        stroke=\"currentColor\"\n                        stroke-miterlimit=\"10\"\n                        stroke-linecap=\"round\"\n                        stroke-linejoin=\"round\" />\n                </svg>\n            </div>\n        </div>\n\n        <div rtBlock=\"page-size-toggle\" [rtMod]=\"{ clipped: isContentClipped() }\">\n            @if (!narrow()) {\n                <div rtElem=\"title\">Items per page:</div>\n            }\n\n            <select rtElem=\"selector\" [formControl]=\"control\">\n                @for (size of pageSizes(); track $index) {\n                    <option [value]=\"size\">{{ size }}</option>\n                }\n            </select>\n        </div>\n    </div>\n}\n", styles: ["@charset \"UTF-8\";:host{display:flex;width:fit-content;height:100%;--rt-table-pagination-container-gap: 2rem;--rt-table-pagination-container-margin: .5rem 0;--rt-table-pagination-container-color: var(--rt-text-base-secondary);--rt-table-pagination-container-font-size: .875rem;--rt-table-pagination-container-font-weight: 400;--rt-table-pagination-container-line-height: 1rem;--rt-table-pagination-container-clipped-gap: 1rem;--rt-table-pagination-paging-gap: .5rem;--rt-table-pagination-paging-clipped-margin: .5rem 0 0 0;--rt-table-pagination-paging-item-padding: .5rem;--rt-table-pagination-paging-item-border: 1px solid var(--rt-border-neutral-medium);--rt-table-pagination-paging-item-border-radius: .75rem;--rt-table-pagination-paging-item-hover-color: var(--rt-text-static-light);--rt-table-pagination-paging-item-hover-background-color: var(--rt-bg-base-emphasis);--rt-table-pagination-paging-item-active-color: var(--rt-text-static-light);--rt-table-pagination-paging-item-active-background-color: var(--rt-bg-base-emphasis);--rt-table-pagination-paging-item-disabled-svg-opacity: .3;--rt-table-pagination-size-toggle-gap: .75rem;--rt-table-pagination-size-toggle-selector-min-width: 3rem;--rt-table-pagination-size-toggle-selector-height: 2rem;--rt-table-pagination-size-toggle-selector-clipped-margin: 0 0 .5rem 0}:host .pagination-container{position:relative;display:flex;align-items:center;justify-content:flex-start;color:var(--rt-table-pagination-container-color);font-size:var(--rt-table-pagination-container-font-size);font-weight:var(--rt-table-pagination-container-font-weight);gap:var(--rt-table-pagination-container-gap);line-height:var(--rt-table-pagination-container-line-height)}@media screen and (min-width:600px){:host .pagination-container--clipped{flex-direction:column;align-items:flex-start;justify-content:center;gap:var(--rt-table-pagination-container-clipped-gap)}}:host .pagination-container .paging{display:flex;align-items:center;justify-content:center;margin:var(--rt-table-pagination-container-margin);gap:var(--rt-table-pagination-paging-gap)}@media screen and (min-width:600px){:host .pagination-container .paging--clipped{margin:var(--rt-table-pagination-paging-clipped-margin)}}:host .pagination-container .paging__item{position:relative;display:flex;align-items:center;justify-content:center;padding:var(--rt-table-pagination-paging-item-padding);border:var(--rt-table-pagination-paging-item-border);border-radius:var(--rt-table-pagination-paging-item-border-radius);background-color:transparent;cursor:default;pointer-events:none}:host .pagination-container .paging__item-label{min-width:1rem;text-align:center}:host .pagination-container .paging__item svg{fill-opacity:var(--rt-table-pagination-paging-item-disabled-svg-opacity)}:host .pagination-container .paging__item:hover:not(.divider){background-color:var(--rt-table-pagination-paging-item-hover-background-color);color:var(--rt-table-pagination-paging-item-hover-color)}:host .pagination-container .paging__item--active{background-color:var(--rt-table-pagination-paging-item-active-background-color);color:var(--rt-table-pagination-paging-item-active-color)}:host .pagination-container .paging__item--enabled{cursor:pointer;pointer-events:auto}:host .pagination-container .paging__item--enabled svg{fill-opacity:1}:host .pagination-container .paging__item--divider{border:none;cursor:default;pointer-events:none}:host .pagination-container .page-size-toggle{display:flex;flex-direction:row;align-items:center;justify-content:center;margin:var(--rt-table-pagination-container-margin);gap:var(--rt-table-pagination-size-toggle-gap)}@media screen and (min-width:600px){:host .pagination-container .page-size-toggle--clipped{margin:var(--rt-table-pagination-size-toggle-selector-clipped-margin)}}:host .pagination-container .page-size-toggle__title{white-space:nowrap}:host .pagination-container .page-size-toggle__selector{width:auto;min-width:var(--rt-table-pagination-size-toggle-selector-min-width);height:var(--rt-table-pagination-size-toggle-selector-height);border:var(--rt-table-pagination-paging-item-border);border-radius:var(--rt-table-pagination-paging-item-border-radius);background-color:transparent;color:var(--rt-table-pagination-container-color);cursor:pointer;font-size:var(--rt-table-pagination-container-font-size);font-weight:var(--rt-table-pagination-container-font-weight);line-height:var(--rt-table-pagination-container-line-height)}@media screen and (max-width:599px){:host{width:100%}:host .pagination-container{width:100%;justify-content:space-between}}\n"] }]
+        }], propDecorators: { currentPageModel: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentPageModel", required: true }] }], isMobile: [{ type: i0.Input, args: [{ isSignal: true, alias: "isMobile", required: false }] }], pageModelChange: [{ type: i0.Output, args: ["pageModelChange"] }], containerRef: [{ type: i0.ViewChild, args: ['containerRef', { isSignal: true }] }], onResize: [{
                 type: HostListener,
                 args: ['window:resize']
             }] } });
@@ -1946,10 +2042,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
 
 // const
 
+const BEM_BLOCK$k = 'rtui-table-base-cell';
 class TableBaseCellComponent {
     constructor() {
+        this.#breakpoints = inject(BreakpointService);
         this.#clipboard = inject(Clipboard);
         this.#sanitizer = inject(DomSanitizer);
+        /** Экран узкий: значение входа, если приложение его дало, иначе замер кита. */
+        this.narrow = computed(() => this.isMobile() ?? !!this.#breakpoints.isMobile(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "narrow" }] : /* istanbul ignore next */ []));
         this.cellValue = computed(() => {
             const transformFn = this.column()?.transform;
             return transformFn ? transformFn(this.row()[this.column().propName]) : this.row()[this.column().propName];
@@ -1970,8 +2071,16 @@ class TableBaseCellComponent {
         ...(ngDevMode ? [{ debugName: "row" }] : /* istanbul ignore next */ []));
         this.column = input.required(/* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "column" }] : /* istanbul ignore next */ []));
-        this.isMobile = input(false, { ...(ngDevMode ? { debugName: "isMobile" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /**
+         * Признак узкого экрана.
+         *
+         * @deprecated Кит определяет его сам — `BreakpointService` из `@rt-tools/core`. Вход
+         * оставлен ради приложений, которые уже его передают, и уйдёт в следующем крупном выпуске.
+         */
+        this.isMobile = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isMobile" }] : /* istanbul ignore next */ []));
     }
+    #breakpoints;
     #clipboard;
     #sanitizer;
     get style() {
@@ -2013,7 +2122,7 @@ class TableBaseCellComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: TableBaseCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: TableBaseCellComponent, isStandalone: true, selector: "rtui-table-base-cell", inputs: { row: { classPropertyName: "row", publicName: "row", isSignal: true, isRequired: true, transformFunction: null }, column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: true, transformFunction: null }, isMobile: { classPropertyName: "isMobile", publicName: "isMobile", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "mouseover": "onMouseOver()", "mouseout": "onMouseOut()" }, properties: { "style": "this.style" } }, ngImport: i0, template: "<ng-container rtBlock=\"base-cell\">\n    @if (column()?.icon?.placement === 'left') {\n        <mat-icon rtElem=\"prefix\" [rtIconOutlined]=\"!!column().icon?.outlined\" [style]=\"cellIconStyle()\">\n            {{ column().icon?.glyph }}\n        </mat-icon>\n    }\n\n    <div rtElem=\"title\" [rtMod]=\"{ align: column().align }\">\n        <div\n            #titleTpl\n            rtElem=\"title-text\"\n            matTooltipClass=\"custom-tooltip\"\n            matTooltipPosition=\"above\"\n            [rtHideTooltipDirective]=\"titleTpl\"\n            [isTooltipShown]=\"!isMobile()\"\n            [matTooltip]=\"column()?.tooltip ?? tooltipValue()\"\n            [matTooltipDisabled]=\"isMobile()\">\n            {{ cellValue() | emptyToDash }}\n        </div>\n    </div>\n\n    @if (column()?.icon?.placement === 'right') {\n        <mat-icon rtElem=\"suffix\" [rtIconOutlined]=\"!!column().icon?.outlined\" [style]=\"cellIconStyle()\">\n            {{ column().icon?.glyph }}\n        </mat-icon>\n    }\n\n    @if (column()?.copyable) {\n        <button\n            type=\"button\"\n            rtBlock=\"base-cell\"\n            rtElem=\"copy-button\"\n            class=\"c-button c-button--txt-base\"\n            matTooltipPosition=\"above\"\n            [rtMod]=\"{\n                position: copyBtnPosition,\n                complete: isCopied(),\n                visible: isMobile() || isMouseOver(),\n            }\"\n            [matTooltip]=\"isCopied() ? 'Copied!' : 'Copy'\"\n            [matTooltipDisabled]=\"isMobile()\"\n            (mousedown)=\"onCopyToClipboard(); $event.stopPropagation()\">\n            <mat-icon rtElem=\"copy-icon\" [rtIconOutlined]=\"true\">{{ isCopied() ? 'done' : 'content_copy' }}</mat-icon>\n        </button>\n    }\n</ng-container>\n", styles: ["@charset \"UTF-8\";:host{position:relative;display:flex;width:100%;height:100%;align-items:center;gap:var(--rt-table-base-cell-host-gap);--rt-table-base-cell-host-gap: .5rem;--rt-table-base-cell-prefix-icon-size: 1.5rem;--rt-table-base-cell-suffix-icon-size: 1.5rem;--rt-table-base-cell-title-padding: .5rem .5rem .5rem 0;--rt-table-base-cell-copy-button-position-right: .25rem;--rt-table-base-cell-copy-button-position-left: .25rem;--rt-table-base-cell-copy-button-padding: .25rem;--rt-table-base-cell-copy-button-background-color: var(--mat-fab-small-container-color);--rt-table-base-cell-copy-button-icon-size: 1rem;--rt-table-base-cell-copy-button-complete-color: var(--rt-text-base-strong)}:host .base-cell__prefix{width:var(--rt-table-base-cell-prefix-icon-size);height:var(--rt-table-base-cell-prefix-icon-size);font-size:var(--rt-table-base-cell-prefix-icon-size)}:host .base-cell__title{display:table;width:100%;table-layout:fixed}:host .base-cell__title-text{overflow:hidden;width:100%;padding:var(--rt-table-base-cell-title-padding);text-overflow:ellipsis;white-space:nowrap}:host .base-cell__title--align--left{text-align:left}:host .base-cell__title--align--center{text-align:center}:host .base-cell__title--align--right{text-align:right}:host .base-cell__suffix{width:var(--rt-table-base-cell-suffix-icon-size);height:var(--rt-table-base-cell-suffix-icon-size);font-size:var(--rt-table-base-cell-suffix-icon-size)}:host .base-cell__prefix,:host .base-cell__suffix{width:fit-content;min-width:fit-content}:host .base-cell__copy-button{position:absolute;padding:var(--rt-table-base-cell-copy-button-padding);background-color:var(--rt-table-base-cell-copy-button-background-color);visibility:hidden}:host .base-cell__copy-button--position--left{left:var(--rt-table-base-cell-copy-button-position-left)}:host .base-cell__copy-button--position--right{right:var(--rt-table-base-cell-copy-button-position-right)}:host .base-cell__copy-button:hover,:host .base-cell__copy-button:focus,:host .base-cell__copy-button:active{background-color:var(--rt-table-base-cell-copy-button-background-color)}:host .base-cell__copy-button--complete{cursor:not-allowed}:host .base-cell__copy-button--complete:hover,:host .base-cell__copy-button--complete:focus,:host .base-cell__copy-button--complete:active{color:var(--rt-table-base-cell-copy-button-complete-color)}:host .base-cell__copy-button--visible{visibility:visible}:host .base-cell__copy-icon{width:var(--rt-table-base-cell-copy-button-icon-size);height:var(--rt-table-base-cell-copy-button-icon-size);font-size:var(--rt-table-base-cell-copy-button-icon-size)}\n"], dependencies: [{ kind: "component", type: 
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: TableBaseCellComponent, isStandalone: true, selector: "rtui-table-base-cell", inputs: { row: { classPropertyName: "row", publicName: "row", isSignal: true, isRequired: true, transformFunction: null }, column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: true, transformFunction: null }, isMobile: { classPropertyName: "isMobile", publicName: "isMobile", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "mouseover": "onMouseOver()", "mouseout": "onMouseOut()" }, properties: { "style": "this.style" }, classAttribute: "rtui-table-base-cell" }, providers: [BreakpointService], ngImport: i0, template: "<ng-container rtBlock=\"base-cell\">\n    @if (column()?.icon?.placement === 'left') {\n        <mat-icon rtElem=\"prefix\" [rtIconOutlined]=\"!!column().icon?.outlined\" [style]=\"cellIconStyle()\">\n            {{ column().icon?.glyph }}\n        </mat-icon>\n    }\n\n    <div rtElem=\"title\" [rtMod]=\"{ align: column().align }\">\n        <div\n            #titleTpl\n            rtElem=\"title-text\"\n            matTooltipClass=\"custom-tooltip\"\n            matTooltipPosition=\"above\"\n            [rtHideTooltipDirective]=\"titleTpl\"\n            [isTooltipShown]=\"!narrow()\"\n            [matTooltip]=\"column()?.tooltip ?? tooltipValue()\"\n            [matTooltipDisabled]=\"narrow()\">\n            {{ cellValue() | emptyToDash }}\n        </div>\n    </div>\n\n    @if (column()?.icon?.placement === 'right') {\n        <mat-icon rtElem=\"suffix\" [rtIconOutlined]=\"!!column().icon?.outlined\" [style]=\"cellIconStyle()\">\n            {{ column().icon?.glyph }}\n        </mat-icon>\n    }\n\n    @if (column()?.copyable) {\n        <button\n            type=\"button\"\n            rtBlock=\"base-cell\"\n            rtElem=\"copy-button\"\n            matTooltipPosition=\"above\"\n            [rtMod]=\"{\n                position: copyBtnPosition,\n                complete: isCopied(),\n                visible: isMouseOver(),\n            }\"\n            [matTooltip]=\"isCopied() ? 'Copied!' : 'Copy'\"\n            [matTooltipDisabled]=\"narrow()\"\n            (mousedown)=\"onCopyToClipboard(); $event.stopPropagation()\">\n            <mat-icon rtElem=\"copy-icon\" [rtIconOutlined]=\"true\">{{ isCopied() ? 'done' : 'content_copy' }}</mat-icon>\n        </button>\n    }\n</ng-container>\n", styles: ["@charset \"UTF-8\";:host{position:relative;display:flex;width:100%;height:100%;align-items:center;gap:var(--rt-table-base-cell-host-gap);--rt-table-base-cell-host-gap: .5rem;--rt-table-base-cell-prefix-icon-size: 1.5rem;--rt-table-base-cell-suffix-icon-size: 1.5rem;--rt-table-base-cell-title-padding: .5rem .5rem .5rem 0;--rt-table-base-cell-copy-button-position-right: .25rem;--rt-table-base-cell-copy-button-position-left: .25rem;--rt-table-base-cell-copy-button-padding: .25rem;--rt-table-base-cell-copy-button-background-color: var(--mat-fab-small-container-color);--rt-table-base-cell-copy-button-border-radius: 5px;--rt-table-base-cell-copy-button-color: var(--rt-color-neutral-60);--rt-table-base-cell-copy-button-icon-size: 1rem;--rt-table-base-cell-copy-button-hover-color: var(--rt-color-neutral-100);--rt-table-base-cell-copy-button-complete-color: var(--rt-text-base-strong)}:host .base-cell__prefix{width:var(--rt-table-base-cell-prefix-icon-size);height:var(--rt-table-base-cell-prefix-icon-size);font-size:var(--rt-table-base-cell-prefix-icon-size)}:host .base-cell__title{display:table;width:100%;table-layout:fixed}:host .base-cell__title-text{overflow:hidden;width:100%;padding:var(--rt-table-base-cell-title-padding);text-overflow:ellipsis;white-space:nowrap}:host .base-cell__title--align--left{text-align:left}:host .base-cell__title--align--center{text-align:center}:host .base-cell__title--align--right{text-align:right}:host .base-cell__suffix{width:var(--rt-table-base-cell-suffix-icon-size);height:var(--rt-table-base-cell-suffix-icon-size);font-size:var(--rt-table-base-cell-suffix-icon-size)}:host .base-cell__prefix,:host .base-cell__suffix{width:fit-content;min-width:fit-content}:host .base-cell__copy-button{position:absolute;display:inline-flex;align-items:center;justify-content:center;padding:var(--rt-table-base-cell-copy-button-padding);border:0;border-radius:var(--rt-table-base-cell-copy-button-border-radius);background-color:var(--rt-table-base-cell-copy-button-background-color);color:var(--rt-table-base-cell-copy-button-color);line-height:1;transition:all .15s linear;visibility:hidden}@media screen and (max-width:599px){:host .base-cell__copy-button{visibility:visible}}:host .base-cell__copy-button--position--left{left:var(--rt-table-base-cell-copy-button-position-left)}:host .base-cell__copy-button--position--right{right:var(--rt-table-base-cell-copy-button-position-right)}:host .base-cell__copy-button:hover,:host .base-cell__copy-button:focus,:host .base-cell__copy-button:active{background-color:var(--rt-table-base-cell-copy-button-background-color);color:var(--rt-table-base-cell-copy-button-hover-color)}:host .base-cell__copy-button--complete{cursor:not-allowed}:host .base-cell__copy-button--complete:hover,:host .base-cell__copy-button--complete:focus,:host .base-cell__copy-button--complete:active{color:var(--rt-table-base-cell-copy-button-complete-color)}:host .base-cell__copy-button--visible{visibility:visible}:host .base-cell__copy-icon{width:var(--rt-table-base-cell-copy-button-icon-size);height:var(--rt-table-base-cell-copy-button-icon-size);font-size:var(--rt-table-base-cell-copy-button-icon-size)}\n"], dependencies: [{ kind: "component", type: 
                 // material
                 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: 
                 // directives
@@ -2023,19 +2132,20 @@ class TableBaseCellComponent {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: TableBaseCellComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rtui-table-base-cell', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+            args: [{ selector: 'rtui-table-base-cell', host: { class: BEM_BLOCK$k }, providers: [BreakpointService], changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         // material
                         MatIcon,
                         MatTooltip,
                         // directives
                         BlockDirective,
                         ElemDirective,
+                        ConcatClassesPipe,
                         ModDirective,
                         RtIconOutlinedDirective,
                         RtHideTooltipDirective,
                         // pipes
                         EmptyToDashPipe,
-                    ], template: "<ng-container rtBlock=\"base-cell\">\n    @if (column()?.icon?.placement === 'left') {\n        <mat-icon rtElem=\"prefix\" [rtIconOutlined]=\"!!column().icon?.outlined\" [style]=\"cellIconStyle()\">\n            {{ column().icon?.glyph }}\n        </mat-icon>\n    }\n\n    <div rtElem=\"title\" [rtMod]=\"{ align: column().align }\">\n        <div\n            #titleTpl\n            rtElem=\"title-text\"\n            matTooltipClass=\"custom-tooltip\"\n            matTooltipPosition=\"above\"\n            [rtHideTooltipDirective]=\"titleTpl\"\n            [isTooltipShown]=\"!isMobile()\"\n            [matTooltip]=\"column()?.tooltip ?? tooltipValue()\"\n            [matTooltipDisabled]=\"isMobile()\">\n            {{ cellValue() | emptyToDash }}\n        </div>\n    </div>\n\n    @if (column()?.icon?.placement === 'right') {\n        <mat-icon rtElem=\"suffix\" [rtIconOutlined]=\"!!column().icon?.outlined\" [style]=\"cellIconStyle()\">\n            {{ column().icon?.glyph }}\n        </mat-icon>\n    }\n\n    @if (column()?.copyable) {\n        <button\n            type=\"button\"\n            rtBlock=\"base-cell\"\n            rtElem=\"copy-button\"\n            class=\"c-button c-button--txt-base\"\n            matTooltipPosition=\"above\"\n            [rtMod]=\"{\n                position: copyBtnPosition,\n                complete: isCopied(),\n                visible: isMobile() || isMouseOver(),\n            }\"\n            [matTooltip]=\"isCopied() ? 'Copied!' : 'Copy'\"\n            [matTooltipDisabled]=\"isMobile()\"\n            (mousedown)=\"onCopyToClipboard(); $event.stopPropagation()\">\n            <mat-icon rtElem=\"copy-icon\" [rtIconOutlined]=\"true\">{{ isCopied() ? 'done' : 'content_copy' }}</mat-icon>\n        </button>\n    }\n</ng-container>\n", styles: ["@charset \"UTF-8\";:host{position:relative;display:flex;width:100%;height:100%;align-items:center;gap:var(--rt-table-base-cell-host-gap);--rt-table-base-cell-host-gap: .5rem;--rt-table-base-cell-prefix-icon-size: 1.5rem;--rt-table-base-cell-suffix-icon-size: 1.5rem;--rt-table-base-cell-title-padding: .5rem .5rem .5rem 0;--rt-table-base-cell-copy-button-position-right: .25rem;--rt-table-base-cell-copy-button-position-left: .25rem;--rt-table-base-cell-copy-button-padding: .25rem;--rt-table-base-cell-copy-button-background-color: var(--mat-fab-small-container-color);--rt-table-base-cell-copy-button-icon-size: 1rem;--rt-table-base-cell-copy-button-complete-color: var(--rt-text-base-strong)}:host .base-cell__prefix{width:var(--rt-table-base-cell-prefix-icon-size);height:var(--rt-table-base-cell-prefix-icon-size);font-size:var(--rt-table-base-cell-prefix-icon-size)}:host .base-cell__title{display:table;width:100%;table-layout:fixed}:host .base-cell__title-text{overflow:hidden;width:100%;padding:var(--rt-table-base-cell-title-padding);text-overflow:ellipsis;white-space:nowrap}:host .base-cell__title--align--left{text-align:left}:host .base-cell__title--align--center{text-align:center}:host .base-cell__title--align--right{text-align:right}:host .base-cell__suffix{width:var(--rt-table-base-cell-suffix-icon-size);height:var(--rt-table-base-cell-suffix-icon-size);font-size:var(--rt-table-base-cell-suffix-icon-size)}:host .base-cell__prefix,:host .base-cell__suffix{width:fit-content;min-width:fit-content}:host .base-cell__copy-button{position:absolute;padding:var(--rt-table-base-cell-copy-button-padding);background-color:var(--rt-table-base-cell-copy-button-background-color);visibility:hidden}:host .base-cell__copy-button--position--left{left:var(--rt-table-base-cell-copy-button-position-left)}:host .base-cell__copy-button--position--right{right:var(--rt-table-base-cell-copy-button-position-right)}:host .base-cell__copy-button:hover,:host .base-cell__copy-button:focus,:host .base-cell__copy-button:active{background-color:var(--rt-table-base-cell-copy-button-background-color)}:host .base-cell__copy-button--complete{cursor:not-allowed}:host .base-cell__copy-button--complete:hover,:host .base-cell__copy-button--complete:focus,:host .base-cell__copy-button--complete:active{color:var(--rt-table-base-cell-copy-button-complete-color)}:host .base-cell__copy-button--visible{visibility:visible}:host .base-cell__copy-icon{width:var(--rt-table-base-cell-copy-button-icon-size);height:var(--rt-table-base-cell-copy-button-icon-size);font-size:var(--rt-table-base-cell-copy-button-icon-size)}\n"] }]
+                    ], template: "<ng-container rtBlock=\"base-cell\">\n    @if (column()?.icon?.placement === 'left') {\n        <mat-icon rtElem=\"prefix\" [rtIconOutlined]=\"!!column().icon?.outlined\" [style]=\"cellIconStyle()\">\n            {{ column().icon?.glyph }}\n        </mat-icon>\n    }\n\n    <div rtElem=\"title\" [rtMod]=\"{ align: column().align }\">\n        <div\n            #titleTpl\n            rtElem=\"title-text\"\n            matTooltipClass=\"custom-tooltip\"\n            matTooltipPosition=\"above\"\n            [rtHideTooltipDirective]=\"titleTpl\"\n            [isTooltipShown]=\"!narrow()\"\n            [matTooltip]=\"column()?.tooltip ?? tooltipValue()\"\n            [matTooltipDisabled]=\"narrow()\">\n            {{ cellValue() | emptyToDash }}\n        </div>\n    </div>\n\n    @if (column()?.icon?.placement === 'right') {\n        <mat-icon rtElem=\"suffix\" [rtIconOutlined]=\"!!column().icon?.outlined\" [style]=\"cellIconStyle()\">\n            {{ column().icon?.glyph }}\n        </mat-icon>\n    }\n\n    @if (column()?.copyable) {\n        <button\n            type=\"button\"\n            rtBlock=\"base-cell\"\n            rtElem=\"copy-button\"\n            matTooltipPosition=\"above\"\n            [rtMod]=\"{\n                position: copyBtnPosition,\n                complete: isCopied(),\n                visible: isMouseOver(),\n            }\"\n            [matTooltip]=\"isCopied() ? 'Copied!' : 'Copy'\"\n            [matTooltipDisabled]=\"narrow()\"\n            (mousedown)=\"onCopyToClipboard(); $event.stopPropagation()\">\n            <mat-icon rtElem=\"copy-icon\" [rtIconOutlined]=\"true\">{{ isCopied() ? 'done' : 'content_copy' }}</mat-icon>\n        </button>\n    }\n</ng-container>\n", styles: ["@charset \"UTF-8\";:host{position:relative;display:flex;width:100%;height:100%;align-items:center;gap:var(--rt-table-base-cell-host-gap);--rt-table-base-cell-host-gap: .5rem;--rt-table-base-cell-prefix-icon-size: 1.5rem;--rt-table-base-cell-suffix-icon-size: 1.5rem;--rt-table-base-cell-title-padding: .5rem .5rem .5rem 0;--rt-table-base-cell-copy-button-position-right: .25rem;--rt-table-base-cell-copy-button-position-left: .25rem;--rt-table-base-cell-copy-button-padding: .25rem;--rt-table-base-cell-copy-button-background-color: var(--mat-fab-small-container-color);--rt-table-base-cell-copy-button-border-radius: 5px;--rt-table-base-cell-copy-button-color: var(--rt-color-neutral-60);--rt-table-base-cell-copy-button-icon-size: 1rem;--rt-table-base-cell-copy-button-hover-color: var(--rt-color-neutral-100);--rt-table-base-cell-copy-button-complete-color: var(--rt-text-base-strong)}:host .base-cell__prefix{width:var(--rt-table-base-cell-prefix-icon-size);height:var(--rt-table-base-cell-prefix-icon-size);font-size:var(--rt-table-base-cell-prefix-icon-size)}:host .base-cell__title{display:table;width:100%;table-layout:fixed}:host .base-cell__title-text{overflow:hidden;width:100%;padding:var(--rt-table-base-cell-title-padding);text-overflow:ellipsis;white-space:nowrap}:host .base-cell__title--align--left{text-align:left}:host .base-cell__title--align--center{text-align:center}:host .base-cell__title--align--right{text-align:right}:host .base-cell__suffix{width:var(--rt-table-base-cell-suffix-icon-size);height:var(--rt-table-base-cell-suffix-icon-size);font-size:var(--rt-table-base-cell-suffix-icon-size)}:host .base-cell__prefix,:host .base-cell__suffix{width:fit-content;min-width:fit-content}:host .base-cell__copy-button{position:absolute;display:inline-flex;align-items:center;justify-content:center;padding:var(--rt-table-base-cell-copy-button-padding);border:0;border-radius:var(--rt-table-base-cell-copy-button-border-radius);background-color:var(--rt-table-base-cell-copy-button-background-color);color:var(--rt-table-base-cell-copy-button-color);line-height:1;transition:all .15s linear;visibility:hidden}@media screen and (max-width:599px){:host .base-cell__copy-button{visibility:visible}}:host .base-cell__copy-button--position--left{left:var(--rt-table-base-cell-copy-button-position-left)}:host .base-cell__copy-button--position--right{right:var(--rt-table-base-cell-copy-button-position-right)}:host .base-cell__copy-button:hover,:host .base-cell__copy-button:focus,:host .base-cell__copy-button:active{background-color:var(--rt-table-base-cell-copy-button-background-color);color:var(--rt-table-base-cell-copy-button-hover-color)}:host .base-cell__copy-button--complete{cursor:not-allowed}:host .base-cell__copy-button--complete:hover,:host .base-cell__copy-button--complete:focus,:host .base-cell__copy-button--complete:active{color:var(--rt-table-base-cell-copy-button-complete-color)}:host .base-cell__copy-button--visible{visibility:visible}:host .base-cell__copy-icon{width:var(--rt-table-base-cell-copy-button-icon-size);height:var(--rt-table-base-cell-copy-button-icon-size);font-size:var(--rt-table-base-cell-copy-button-icon-size)}\n"] }]
         }], propDecorators: { row: [{ type: i0.Input, args: [{ isSignal: true, alias: "row", required: true }] }], column: [{ type: i0.Input, args: [{ isSignal: true, alias: "column", required: true }] }], isMobile: [{ type: i0.Input, args: [{ isSignal: true, alias: "isMobile", required: false }] }], style: [{
                 type: HostBinding,
                 args: ['style']
@@ -2047,6 +2157,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                 args: ['mouseout']
             }] } });
 
+const BEM_BLOCK$j = 'rtui-table-header-cell';
 class RtuiTableHeaderCellComponent {
     constructor() {
         this.#sanitizer = inject(DomSanitizer);
@@ -2086,17 +2197,17 @@ class RtuiTableHeaderCellComponent {
         return LIST_SORT_ORDER_ENUM.ASC;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiTableHeaderCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: RtuiTableHeaderCellComponent, isStandalone: true, selector: "rtui-table-header-cell", inputs: { headerModel: { classPropertyName: "headerModel", publicName: "headerModel", isSignal: true, isRequired: true, transformFunction: null }, sortModel: { classPropertyName: "sortModel", publicName: "sortModel", isSignal: true, isRequired: true, transformFunction: null }, currentSortModel: { classPropertyName: "currentSortModel", publicName: "currentSortModel", isSignal: true, isRequired: true, transformFunction: null }, headerDataEllipsisMaxLines: { classPropertyName: "headerDataEllipsisMaxLines", publicName: "headerDataEllipsisMaxLines", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sortChange: "sortChange" }, host: { listeners: { "click": "handleClick()" }, properties: { "style": "this.style" } }, ngImport: i0, template: "<div rtBlock=\"header-cell-label\" [rtMod]=\"{ align: headerModel().align }\">\n    @if (headerModel()?.icon?.placement === 'left') {\n        <mat-icon rtElem=\"prefix\" [rtIconOutlined]=\"!!headerModel().icon?.outlined\" [style.color]=\"headerModel().icon?.color\">\n            {{ headerModel().icon?.glyph }}\n        </mat-icon>\n    }\n\n    <div rtElem=\"text\" [matTooltip]=\"headerModel()?.tooltip ?? ''\" [ngClass]=\"headerModel()?.className\">\n        {{ headerModel().label }}\n    </div>\n\n    @if (headerModel()?.icon?.placement === 'right') {\n        <mat-icon rtElem=\"suffix\" [rtIconOutlined]=\"!!headerModel().icon?.outlined\" [style.color]=\"headerModel().icon?.color\">\n            {{ headerModel().icon?.glyph }}\n        </mat-icon>\n    }\n</div>\n\n@if (sortModel()) {\n    <div rtBlock=\"header-cell-icons\" [rtMod]=\"{ active: active() }\">\n        <div\n            rtElem=\"icon\"\n            [rtMod]=\"{\n                active: active() && currentSortModel()?.sortDirection?.toLowerCase() === sortOrderTypes.DESC,\n                first: true,\n            }\"></div>\n\n        <div\n            rtElem=\"icon\"\n            [rtMod]=\"{\n                active: active() && currentSortModel()?.sortDirection?.toLowerCase() === sortOrderTypes.ASC,\n                second: true,\n            }\"></div>\n    </div>\n}\n", styles: ["@charset \"UTF-8\";:host{display:flex;align-items:center;justify-content:space-between;cursor:pointer;--rt-table-header-cell-label-gap: .5rem;--rt-table-header-cell-prefix-icon-size: 1.5rem;--rt-table-header-cell-suffix-icon-size: 1.5rem;--rt-table-header-cell-icon-margin: 0 0 0 1rem;--rt-table-header-cell-icon-color: var(--rt-text-base-disabled);--rt-table-header-cell-icon-active-color: var(--rt-text-base-strong)}:host:hover .header-cell-icons{visibility:visible}:host .header-cell-label{display:flex;flex-grow:1;align-items:center;gap:var(--rt-table-header-cell-label-gap)}:host .header-cell-label--align--left{justify-content:flex-start}:host .header-cell-label--align--center{justify-content:center}:host .header-cell-label--align--right{justify-content:flex-end}:host .header-cell-label__prefix{width:var(--rt-table-header-cell-prefix-icon-size);height:var(--rt-table-header-cell-prefix-icon-size);font-size:var(--rt-table-header-cell-prefix-icon-size)}:host .header-cell-label__text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .header-cell-label__suffix{width:var(--rt-table-header-cell-suffix-icon-size);height:var(--rt-table-header-cell-suffix-icon-size);font-size:var(--rt-table-header-cell-suffix-icon-size)}:host .header-cell-label__prefix,:host .header-cell-label__suffix{width:fit-content;min-width:fit-content}:host .header-cell-icons{display:flex;flex-direction:column;align-items:center;justify-content:center;margin:var(--rt-table-header-cell-icon-margin);visibility:hidden}:host .header-cell-icons--active{visibility:visible}:host .header-cell-icons__icon{width:0;height:0;border-right:3px solid transparent;border-bottom:5.2px solid var(--rt-table-header-cell-icon-color);border-left:3px solid transparent}:host .header-cell-icons__icon--second{margin-top:var(--rt-spacing-2);transform:scaleY(-1)}:host .header-cell-icons__icon--active{border-bottom-color:var(--rt-table-header-cell-icon-active-color)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: 
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: RtuiTableHeaderCellComponent, isStandalone: true, selector: "rtui-table-header-cell", inputs: { headerModel: { classPropertyName: "headerModel", publicName: "headerModel", isSignal: true, isRequired: true, transformFunction: null }, sortModel: { classPropertyName: "sortModel", publicName: "sortModel", isSignal: true, isRequired: true, transformFunction: null }, currentSortModel: { classPropertyName: "currentSortModel", publicName: "currentSortModel", isSignal: true, isRequired: true, transformFunction: null }, headerDataEllipsisMaxLines: { classPropertyName: "headerDataEllipsisMaxLines", publicName: "headerDataEllipsisMaxLines", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sortChange: "sortChange" }, host: { listeners: { "click": "handleClick()" }, properties: { "style": "this.style" }, classAttribute: "rtui-table-header-cell" }, ngImport: i0, template: "<div rtBlock=\"header-cell-label\" [rtMod]=\"{ align: headerModel().align }\">\n    @if (headerModel()?.icon?.placement === 'left') {\n        <mat-icon rtElem=\"prefix\" [rtIconOutlined]=\"!!headerModel().icon?.outlined\" [style.color]=\"headerModel().icon?.color\">\n            {{ headerModel().icon?.glyph }}\n        </mat-icon>\n    }\n\n    <div rtElem=\"text\" [matTooltip]=\"headerModel()?.tooltip ?? ''\" [class]=\"[headerModel()?.className] | concatClasses\">\n        {{ headerModel().label }}\n    </div>\n\n    @if (headerModel()?.icon?.placement === 'right') {\n        <mat-icon rtElem=\"suffix\" [rtIconOutlined]=\"!!headerModel().icon?.outlined\" [style.color]=\"headerModel().icon?.color\">\n            {{ headerModel().icon?.glyph }}\n        </mat-icon>\n    }\n</div>\n\n@if (sortModel()) {\n    <div rtBlock=\"header-cell-icons\" [rtMod]=\"{ active: active() }\">\n        <div\n            rtElem=\"icon\"\n            [rtMod]=\"{\n                active: active() && currentSortModel()?.sortDirection?.toLowerCase() === sortOrderTypes.DESC,\n                first: true,\n            }\"></div>\n\n        <div\n            rtElem=\"icon\"\n            [rtMod]=\"{\n                active: active() && currentSortModel()?.sortDirection?.toLowerCase() === sortOrderTypes.ASC,\n                second: true,\n            }\"></div>\n    </div>\n}\n", styles: ["@charset \"UTF-8\";:host{display:flex;align-items:center;justify-content:space-between;cursor:pointer;--rt-table-header-cell-label-gap: .5rem;--rt-table-header-cell-prefix-icon-size: 1.5rem;--rt-table-header-cell-suffix-icon-size: 1.5rem;--rt-table-header-cell-icon-margin: 0 0 0 1rem;--rt-table-header-cell-icon-color: var(--rt-text-base-disabled);--rt-table-header-cell-icon-active-color: var(--rt-text-base-strong)}:host:hover .header-cell-icons{visibility:visible}:host .header-cell-label{display:flex;flex-grow:1;align-items:center;gap:var(--rt-table-header-cell-label-gap)}:host .header-cell-label--align--left{justify-content:flex-start}:host .header-cell-label--align--center{justify-content:center}:host .header-cell-label--align--right{justify-content:flex-end}:host .header-cell-label__prefix{width:var(--rt-table-header-cell-prefix-icon-size);height:var(--rt-table-header-cell-prefix-icon-size);font-size:var(--rt-table-header-cell-prefix-icon-size)}:host .header-cell-label__text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .header-cell-label__suffix{width:var(--rt-table-header-cell-suffix-icon-size);height:var(--rt-table-header-cell-suffix-icon-size);font-size:var(--rt-table-header-cell-suffix-icon-size)}:host .header-cell-label__prefix,:host .header-cell-label__suffix{width:fit-content;min-width:fit-content}:host .header-cell-icons{display:flex;flex-direction:column;align-items:center;justify-content:center;margin:var(--rt-table-header-cell-icon-margin);visibility:hidden}:host .header-cell-icons--active{visibility:visible}:host .header-cell-icons__icon{width:0;height:0;border-right:3px solid transparent;border-bottom:5.2px solid var(--rt-table-header-cell-icon-color);border-left:3px solid transparent}:host .header-cell-icons__icon--second{margin-top:var(--rt-spacing-2);transform:scaleY(-1)}:host .header-cell-icons__icon--active{border-bottom-color:var(--rt-table-header-cell-icon-active-color)}\n"], dependencies: [{ kind: "component", type: 
                 // Material
                 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: 
                 // Bem
                 BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }, { kind: "directive", type: ModDirective, selector: "[rtMod]" }, { kind: "directive", type: 
                 // Directives
-                RtIconOutlinedDirective, selector: "mat-icon[rtIconOutlined]", inputs: ["rtIconOutlined"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+                RtIconOutlinedDirective, selector: "mat-icon[rtIconOutlined]", inputs: ["rtIconOutlined"] }, { kind: "pipe", type: ConcatClassesPipe, name: "concatClasses" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiTableHeaderCellComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rtui-table-header-cell', imports: [
+            args: [{ selector: 'rtui-table-header-cell', host: { class: BEM_BLOCK$j }, imports: [
                         NgClass,
                         // Material
                         MatIcon,
@@ -2106,10 +2217,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                         // Bem
                         BlockDirective,
                         ElemDirective,
+                        ConcatClassesPipe,
                         ModDirective,
                         // Directives
                         RtIconOutlinedDirective,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div rtBlock=\"header-cell-label\" [rtMod]=\"{ align: headerModel().align }\">\n    @if (headerModel()?.icon?.placement === 'left') {\n        <mat-icon rtElem=\"prefix\" [rtIconOutlined]=\"!!headerModel().icon?.outlined\" [style.color]=\"headerModel().icon?.color\">\n            {{ headerModel().icon?.glyph }}\n        </mat-icon>\n    }\n\n    <div rtElem=\"text\" [matTooltip]=\"headerModel()?.tooltip ?? ''\" [ngClass]=\"headerModel()?.className\">\n        {{ headerModel().label }}\n    </div>\n\n    @if (headerModel()?.icon?.placement === 'right') {\n        <mat-icon rtElem=\"suffix\" [rtIconOutlined]=\"!!headerModel().icon?.outlined\" [style.color]=\"headerModel().icon?.color\">\n            {{ headerModel().icon?.glyph }}\n        </mat-icon>\n    }\n</div>\n\n@if (sortModel()) {\n    <div rtBlock=\"header-cell-icons\" [rtMod]=\"{ active: active() }\">\n        <div\n            rtElem=\"icon\"\n            [rtMod]=\"{\n                active: active() && currentSortModel()?.sortDirection?.toLowerCase() === sortOrderTypes.DESC,\n                first: true,\n            }\"></div>\n\n        <div\n            rtElem=\"icon\"\n            [rtMod]=\"{\n                active: active() && currentSortModel()?.sortDirection?.toLowerCase() === sortOrderTypes.ASC,\n                second: true,\n            }\"></div>\n    </div>\n}\n", styles: ["@charset \"UTF-8\";:host{display:flex;align-items:center;justify-content:space-between;cursor:pointer;--rt-table-header-cell-label-gap: .5rem;--rt-table-header-cell-prefix-icon-size: 1.5rem;--rt-table-header-cell-suffix-icon-size: 1.5rem;--rt-table-header-cell-icon-margin: 0 0 0 1rem;--rt-table-header-cell-icon-color: var(--rt-text-base-disabled);--rt-table-header-cell-icon-active-color: var(--rt-text-base-strong)}:host:hover .header-cell-icons{visibility:visible}:host .header-cell-label{display:flex;flex-grow:1;align-items:center;gap:var(--rt-table-header-cell-label-gap)}:host .header-cell-label--align--left{justify-content:flex-start}:host .header-cell-label--align--center{justify-content:center}:host .header-cell-label--align--right{justify-content:flex-end}:host .header-cell-label__prefix{width:var(--rt-table-header-cell-prefix-icon-size);height:var(--rt-table-header-cell-prefix-icon-size);font-size:var(--rt-table-header-cell-prefix-icon-size)}:host .header-cell-label__text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .header-cell-label__suffix{width:var(--rt-table-header-cell-suffix-icon-size);height:var(--rt-table-header-cell-suffix-icon-size);font-size:var(--rt-table-header-cell-suffix-icon-size)}:host .header-cell-label__prefix,:host .header-cell-label__suffix{width:fit-content;min-width:fit-content}:host .header-cell-icons{display:flex;flex-direction:column;align-items:center;justify-content:center;margin:var(--rt-table-header-cell-icon-margin);visibility:hidden}:host .header-cell-icons--active{visibility:visible}:host .header-cell-icons__icon{width:0;height:0;border-right:3px solid transparent;border-bottom:5.2px solid var(--rt-table-header-cell-icon-color);border-left:3px solid transparent}:host .header-cell-icons__icon--second{margin-top:var(--rt-spacing-2);transform:scaleY(-1)}:host .header-cell-icons__icon--active{border-bottom-color:var(--rt-table-header-cell-icon-active-color)}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div rtBlock=\"header-cell-label\" [rtMod]=\"{ align: headerModel().align }\">\n    @if (headerModel()?.icon?.placement === 'left') {\n        <mat-icon rtElem=\"prefix\" [rtIconOutlined]=\"!!headerModel().icon?.outlined\" [style.color]=\"headerModel().icon?.color\">\n            {{ headerModel().icon?.glyph }}\n        </mat-icon>\n    }\n\n    <div rtElem=\"text\" [matTooltip]=\"headerModel()?.tooltip ?? ''\" [class]=\"[headerModel()?.className] | concatClasses\">\n        {{ headerModel().label }}\n    </div>\n\n    @if (headerModel()?.icon?.placement === 'right') {\n        <mat-icon rtElem=\"suffix\" [rtIconOutlined]=\"!!headerModel().icon?.outlined\" [style.color]=\"headerModel().icon?.color\">\n            {{ headerModel().icon?.glyph }}\n        </mat-icon>\n    }\n</div>\n\n@if (sortModel()) {\n    <div rtBlock=\"header-cell-icons\" [rtMod]=\"{ active: active() }\">\n        <div\n            rtElem=\"icon\"\n            [rtMod]=\"{\n                active: active() && currentSortModel()?.sortDirection?.toLowerCase() === sortOrderTypes.DESC,\n                first: true,\n            }\"></div>\n\n        <div\n            rtElem=\"icon\"\n            [rtMod]=\"{\n                active: active() && currentSortModel()?.sortDirection?.toLowerCase() === sortOrderTypes.ASC,\n                second: true,\n            }\"></div>\n    </div>\n}\n", styles: ["@charset \"UTF-8\";:host{display:flex;align-items:center;justify-content:space-between;cursor:pointer;--rt-table-header-cell-label-gap: .5rem;--rt-table-header-cell-prefix-icon-size: 1.5rem;--rt-table-header-cell-suffix-icon-size: 1.5rem;--rt-table-header-cell-icon-margin: 0 0 0 1rem;--rt-table-header-cell-icon-color: var(--rt-text-base-disabled);--rt-table-header-cell-icon-active-color: var(--rt-text-base-strong)}:host:hover .header-cell-icons{visibility:visible}:host .header-cell-label{display:flex;flex-grow:1;align-items:center;gap:var(--rt-table-header-cell-label-gap)}:host .header-cell-label--align--left{justify-content:flex-start}:host .header-cell-label--align--center{justify-content:center}:host .header-cell-label--align--right{justify-content:flex-end}:host .header-cell-label__prefix{width:var(--rt-table-header-cell-prefix-icon-size);height:var(--rt-table-header-cell-prefix-icon-size);font-size:var(--rt-table-header-cell-prefix-icon-size)}:host .header-cell-label__text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .header-cell-label__suffix{width:var(--rt-table-header-cell-suffix-icon-size);height:var(--rt-table-header-cell-suffix-icon-size);font-size:var(--rt-table-header-cell-suffix-icon-size)}:host .header-cell-label__prefix,:host .header-cell-label__suffix{width:fit-content;min-width:fit-content}:host .header-cell-icons{display:flex;flex-direction:column;align-items:center;justify-content:center;margin:var(--rt-table-header-cell-icon-margin);visibility:hidden}:host .header-cell-icons--active{visibility:visible}:host .header-cell-icons__icon{width:0;height:0;border-right:3px solid transparent;border-bottom:5.2px solid var(--rt-table-header-cell-icon-color);border-left:3px solid transparent}:host .header-cell-icons__icon--second{margin-top:var(--rt-spacing-2);transform:scaleY(-1)}:host .header-cell-icons__icon--active{border-bottom-color:var(--rt-table-header-cell-icon-active-color)}\n"] }]
         }], propDecorators: { headerModel: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerModel", required: true }] }], sortModel: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortModel", required: true }] }], currentSortModel: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentSortModel", required: true }] }], headerDataEllipsisMaxLines: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerDataEllipsisMaxLines", required: false }] }], sortChange: [{ type: i0.Output, args: ["sortChange"] }], style: [{
                 type: HostBinding,
                 args: ['style']
@@ -2118,10 +2230,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                 args: ['click']
             }] } });
 
+const BEM_BLOCK$i = 'rtui-table-header-filter-cell';
 class RtuiTableHeaderFilterCellComponent {
     constructor() {
+        this.#breakpoints = inject(BreakpointService);
         this.#injector = inject(Injector);
         this.#destroyRef = inject(DestroyRef);
+        /** Экран узкий: значение входа, если приложение его дало, иначе замер кита. */
+        this.narrow = computed(() => this.isMobile() ?? !!this.#breakpoints.isMobile(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "narrow" }] : /* istanbul ignore next */ []));
         this.filterTypes = TABLE_COLUMN_FILTER_TYPES_ENUM;
         this.filterOperatorTypes = FILTER_OPERATOR_TYPE_ENUM;
         /** Current elements appearance */
@@ -2140,8 +2257,14 @@ class RtuiTableHeaderFilterCellComponent {
         this.filterOperators = input([], { ...(ngDevMode ? { debugName: "filterOperators" } : /* istanbul ignore next */ {}), transform: (value) => transformArrayInput(value) });
         /** List of selected filter models */
         this.filterSelectOptions = input([], { ...(ngDevMode ? { debugName: "filterSelectOptions" } : /* istanbul ignore next */ {}), transform: (value) => transformArrayInput(value) });
-        /** Indicates is mobile view */
-        this.isMobile = input(false, { ...(ngDevMode ? { debugName: "isMobile" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /**
+         * Признак узкого экрана.
+         *
+         * @deprecated Кит определяет его сам — `BreakpointService` из `@rt-tools/core`. Вход
+         * оставлен ради приложений, которые уже его передают, и уйдёт в следующем крупном выпуске.
+         */
+        this.isMobile = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isMobile" }] : /* istanbul ignore next */ []));
         /** Filter change output action */
         this.filterChange = output();
         this.currentFilter = signal({
@@ -2151,6 +2274,7 @@ class RtuiTableHeaderFilterCellComponent {
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "currentFilter" }] : /* istanbul ignore next */ []));
     }
+    #breakpoints;
     #injector;
     #destroyRef;
     ngOnInit() {
@@ -2225,19 +2349,20 @@ class RtuiTableHeaderFilterCellComponent {
         this.currentFilter.update((filter) => ({ ...filter, operatorType }));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiTableHeaderFilterCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: RtuiTableHeaderFilterCellComponent, isStandalone: true, selector: "rtui-table-header-filter-cell", inputs: { appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: true, transformFunction: null }, filterProperty: { classPropertyName: "filterProperty", publicName: "filterProperty", isSignal: true, isRequired: true, transformFunction: null }, filterType: { classPropertyName: "filterType", publicName: "filterType", isSignal: true, isRequired: true, transformFunction: null }, filterModel: { classPropertyName: "filterModel", publicName: "filterModel", isSignal: true, isRequired: true, transformFunction: null }, defaultFilterOperator: { classPropertyName: "defaultFilterOperator", publicName: "defaultFilterOperator", isSignal: true, isRequired: true, transformFunction: null }, filterOperators: { classPropertyName: "filterOperators", publicName: "filterOperators", isSignal: true, isRequired: false, transformFunction: null }, filterSelectOptions: { classPropertyName: "filterSelectOptions", publicName: "filterSelectOptions", isSignal: true, isRequired: false, transformFunction: null }, isMobile: { classPropertyName: "isMobile", publicName: "isMobile", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { filterChange: "filterChange" }, providers: [provideNativeDateAdapter()], ngImport: i0, template: "@if (filterOperators()?.length) {\n    <button\n        aria-label=\"Icon-button for a context menu\"\n        mat-icon-button\n        matTooltipPosition=\"left\"\n        [matTooltip]=\"currentFilter().operatorType | titlecase\"\n        [matTooltipDisabled]=\"isMobile()\"\n        [matMenuTriggerFor]=\"menuTpl\"\n        (click)=\"$event.stopPropagation()\"\n        (mousedown)=\"$event.stopPropagation()\">\n        <mat-icon [rtIconOutlined]=\"true\">\n            @switch (currentFilter().operatorType) {\n                @case (filterOperatorTypes.EQUALS) {\n                    drag_handle\n                }\n                @case (filterOperatorTypes.NOT_EQUALS) {\n                    block\n                }\n                @case (filterOperatorTypes.CONTAINS) {\n                    more_horiz\n                }\n                @case (filterOperatorTypes.GREATER_THAN) {\n                    chevron_right\n                }\n                @case (filterOperatorTypes.LESS_THAN) {\n                    chevron_left\n                }\n            }\n        </mat-icon>\n    </button>\n\n    <mat-menu #menuTpl=\"matMenu\" xPosition=\"before\">\n        @if (filterOperators().includes(filterOperatorTypes.EQUALS) && currentFilter()?.operatorType !== filterOperatorTypes.EQUALS) {\n            <div mat-menu-item (click)=\"onFilterOperatorChange(filterOperatorTypes.EQUALS)\">\n                <mat-icon class=\"material-icons-outlined\" rtIconOutlined>drag_handle</mat-icon>\n                <span>Equal</span>\n            </div>\n        }\n        @if (\n            filterOperators().includes(filterOperatorTypes.NOT_EQUALS) && currentFilter()?.operatorType !== filterOperatorTypes.NOT_EQUALS\n        ) {\n            <div mat-menu-item (click)=\"onFilterOperatorChange(filterOperatorTypes.NOT_EQUALS)\">\n                <mat-icon [rtIconOutlined]=\"true\">block</mat-icon>\n                <span>Not equal</span>\n            </div>\n        }\n        @if (filterOperators().includes(filterOperatorTypes.CONTAINS) && currentFilter()?.operatorType !== filterOperatorTypes.CONTAINS) {\n            <div mat-menu-item (click)=\"onFilterOperatorChange(filterOperatorTypes.CONTAINS)\">\n                <mat-icon [rtIconOutlined]=\"true\">more_horiz</mat-icon>\n                <span>Contains</span>\n            </div>\n        }\n        @if (\n            filterOperators().includes(filterOperatorTypes.GREATER_THAN) &&\n            currentFilter()?.operatorType !== filterOperatorTypes.GREATER_THAN\n        ) {\n            <div mat-menu-item (click)=\"onFilterOperatorChange(filterOperatorTypes.GREATER_THAN)\">\n                <mat-icon [rtIconOutlined]=\"true\">chevron_right</mat-icon>\n                <span>More than</span>\n            </div>\n        }\n        @if (filterOperators().includes(filterOperatorTypes.LESS_THAN) && currentFilter()?.operatorType !== filterOperatorTypes.LESS_THAN) {\n            <div mat-menu-item (click)=\"onFilterOperatorChange(filterOperatorTypes.LESS_THAN)\">\n                <mat-icon [rtIconOutlined]=\"true\">chevron_left</mat-icon>\n                <span>Less than</span>\n            </div>\n        }\n    </mat-menu>\n}\n\n@switch (filterType()) {\n    @case (filterTypes.TEXT) {\n        <mat-form-field rtBlock=\"table-header-cell-filter-input\" subscriptSizing=\"dynamic\" [appearance]=\"appearance()\">\n            <input\n                #input\n                matInput\n                type=\"text\"\n                placeholder=\"Type in filter value\"\n                [value]=\"currentFilter().value\"\n                (keydown.enter)=\"onFilterValueChange(input.value)\"\n                (focusout)=\"onFilterValueChange(input.value)\" />\n\n            <rtui-clear-button matSuffix [isButtonShown]=\"!!currentFilter().value\" (clickAction)=\"onFilterValueChange('')\" />\n        </mat-form-field>\n    }\n    @case (filterTypes.NUMBER) {\n        <mat-form-field rtBlock=\"table-header-cell-filter-input\" subscriptSizing=\"dynamic\" [appearance]=\"appearance()\">\n            <input\n                #input\n                matInput\n                type=\"number\"\n                placeholder=\"Type in filter value\"\n                [value]=\"currentFilter().value\"\n                (keydown.enter)=\"onFilterValueChange(input.value)\"\n                (focusout)=\"onFilterValueChange(input.value)\" />\n\n            <rtui-clear-button matSuffix [isButtonShown]=\"!!currentFilter().value\" (clickAction)=\"onFilterValueChange('')\" />\n        </mat-form-field>\n    }\n    @case (filterTypes.DATE) {\n        <button\n            aria-label=\"Icon-button for clear filter\"\n            mat-icon-button\n            matTooltipPosition=\"left\"\n            matTooltip=\"Clear filter\"\n            [matTooltipDisabled]=\"isMobile()\"\n            [disabled]=\"!currentFilter().value\"\n            (click)=\"onFilterValueChange('')\">\n            <mat-icon [rtIconOutlined]=\"true\">close</mat-icon>\n        </button>\n\n        <mat-form-field rtBlock=\"table-header-cell-filter-input\" subscriptSizing=\"dynamic\" [appearance]=\"appearance()\">\n            <input\n                matInput\n                placeholder=\"1/1/2025\"\n                [matDatepicker]=\"picker\"\n                [ngModel]=\"currentFilter().value\"\n                (ngModelChange)=\"onFilterValueChange($event)\" />\n            <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n            <mat-datepicker #picker></mat-datepicker>\n        </mat-form-field>\n    }\n    @case (filterTypes.SELECT) {\n        <button\n            aria-label=\"Icon-button for clear filter\"\n            mat-icon-button\n            matTooltipPosition=\"left\"\n            matTooltip=\"Clear filter\"\n            [matTooltipDisabled]=\"isMobile()\"\n            [disabled]=\"!currentFilter().value\"\n            (click)=\"onFilterValueChange('')\">\n            <mat-icon [rtIconOutlined]=\"true\">close</mat-icon>\n        </button>\n\n        <mat-form-field rtBlock=\"table-header-cell-filter-input\" subscriptSizing=\"dynamic\" [appearance]=\"appearance()\">\n            <mat-select placeholder=\"Chose filter\" [value]=\"currentFilter().value\" (selectionChange)=\"onFilterValueChange($event.value)\">\n                @for (item of filterSelectOptions(); track item) {\n                    <mat-option [value]=\"item\">{{ item | titlecase }}</mat-option>\n                } @empty {\n                    <mat-option [value]=\"null\">No options available</mat-option>\n                }\n            </mat-select>\n        </mat-form-field>\n    }\n}\n", styles: [":host{display:flex;width:100%;align-items:center;justify-content:flex-start;gap:var(--rt-spacing-8)}:host .table-header-cell-filter-input{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { 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: "component", type: 
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: RtuiTableHeaderFilterCellComponent, isStandalone: true, selector: "rtui-table-header-filter-cell", inputs: { appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: true, transformFunction: null }, filterProperty: { classPropertyName: "filterProperty", publicName: "filterProperty", isSignal: true, isRequired: true, transformFunction: null }, filterType: { classPropertyName: "filterType", publicName: "filterType", isSignal: true, isRequired: true, transformFunction: null }, filterModel: { classPropertyName: "filterModel", publicName: "filterModel", isSignal: true, isRequired: true, transformFunction: null }, defaultFilterOperator: { classPropertyName: "defaultFilterOperator", publicName: "defaultFilterOperator", isSignal: true, isRequired: true, transformFunction: null }, filterOperators: { classPropertyName: "filterOperators", publicName: "filterOperators", isSignal: true, isRequired: false, transformFunction: null }, filterSelectOptions: { classPropertyName: "filterSelectOptions", publicName: "filterSelectOptions", isSignal: true, isRequired: false, transformFunction: null }, isMobile: { classPropertyName: "isMobile", publicName: "isMobile", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { filterChange: "filterChange" }, host: { classAttribute: "rtui-table-header-filter-cell" }, providers: [BreakpointService, provideNativeDateAdapter()], ngImport: i0, template: "@if (filterOperators()?.length) {\n    <button\n        aria-label=\"Icon-button for a context menu\"\n        mat-icon-button\n        matTooltipPosition=\"left\"\n        [matTooltip]=\"currentFilter().operatorType | titlecase\"\n        [matTooltipDisabled]=\"narrow()\"\n        [matMenuTriggerFor]=\"menuTpl\"\n        (click)=\"$event.stopPropagation()\"\n        (mousedown)=\"$event.stopPropagation()\">\n        <mat-icon [rtIconOutlined]=\"true\">\n            @switch (currentFilter().operatorType) {\n                @case (filterOperatorTypes.EQUALS) {\n                    drag_handle\n                }\n                @case (filterOperatorTypes.NOT_EQUALS) {\n                    block\n                }\n                @case (filterOperatorTypes.CONTAINS) {\n                    more_horiz\n                }\n                @case (filterOperatorTypes.GREATER_THAN) {\n                    chevron_right\n                }\n                @case (filterOperatorTypes.LESS_THAN) {\n                    chevron_left\n                }\n            }\n        </mat-icon>\n    </button>\n\n    <mat-menu #menuTpl=\"matMenu\" xPosition=\"before\">\n        @if (filterOperators().includes(filterOperatorTypes.EQUALS) && currentFilter()?.operatorType !== filterOperatorTypes.EQUALS) {\n            <button type=\"button\" mat-menu-item (click)=\"onFilterOperatorChange(filterOperatorTypes.EQUALS)\">\n                <mat-icon rtIconOutlined [class]=\"['material-icons-outlined'] | concatClasses\">drag_handle</mat-icon>\n                <span>Equal</span>\n            </button>\n        }\n        @if (\n            filterOperators().includes(filterOperatorTypes.NOT_EQUALS) && currentFilter()?.operatorType !== filterOperatorTypes.NOT_EQUALS\n        ) {\n            <button type=\"button\" mat-menu-item (click)=\"onFilterOperatorChange(filterOperatorTypes.NOT_EQUALS)\">\n                <mat-icon [rtIconOutlined]=\"true\">block</mat-icon>\n                <span>Not equal</span>\n            </button>\n        }\n        @if (filterOperators().includes(filterOperatorTypes.CONTAINS) && currentFilter()?.operatorType !== filterOperatorTypes.CONTAINS) {\n            <button type=\"button\" mat-menu-item (click)=\"onFilterOperatorChange(filterOperatorTypes.CONTAINS)\">\n                <mat-icon [rtIconOutlined]=\"true\">more_horiz</mat-icon>\n                <span>Contains</span>\n            </button>\n        }\n        @if (\n            filterOperators().includes(filterOperatorTypes.GREATER_THAN) &&\n            currentFilter()?.operatorType !== filterOperatorTypes.GREATER_THAN\n        ) {\n            <button type=\"button\" mat-menu-item (click)=\"onFilterOperatorChange(filterOperatorTypes.GREATER_THAN)\">\n                <mat-icon [rtIconOutlined]=\"true\">chevron_right</mat-icon>\n                <span>More than</span>\n            </button>\n        }\n        @if (filterOperators().includes(filterOperatorTypes.LESS_THAN) && currentFilter()?.operatorType !== filterOperatorTypes.LESS_THAN) {\n            <button type=\"button\" mat-menu-item (click)=\"onFilterOperatorChange(filterOperatorTypes.LESS_THAN)\">\n                <mat-icon [rtIconOutlined]=\"true\">chevron_left</mat-icon>\n                <span>Less than</span>\n            </button>\n        }\n    </mat-menu>\n}\n\n@switch (filterType()) {\n    @case (filterTypes.TEXT) {\n        <mat-form-field rtBlock=\"table-header-cell-filter-input\" subscriptSizing=\"dynamic\" [appearance]=\"appearance()\">\n            <input\n                #input\n                matInput\n                type=\"text\"\n                placeholder=\"Type in filter value\"\n                [value]=\"currentFilter().value\"\n                (keydown.enter)=\"onFilterValueChange(input.value)\"\n                (focusout)=\"onFilterValueChange(input.value)\" />\n\n            <rtui-clear-button matSuffix [isButtonShown]=\"!!currentFilter().value\" (clickAction)=\"onFilterValueChange('')\" />\n        </mat-form-field>\n    }\n    @case (filterTypes.NUMBER) {\n        <mat-form-field rtBlock=\"table-header-cell-filter-input\" subscriptSizing=\"dynamic\" [appearance]=\"appearance()\">\n            <input\n                #input\n                matInput\n                type=\"number\"\n                placeholder=\"Type in filter value\"\n                [value]=\"currentFilter().value\"\n                (keydown.enter)=\"onFilterValueChange(input.value)\"\n                (focusout)=\"onFilterValueChange(input.value)\" />\n\n            <rtui-clear-button matSuffix [isButtonShown]=\"!!currentFilter().value\" (clickAction)=\"onFilterValueChange('')\" />\n        </mat-form-field>\n    }\n    @case (filterTypes.DATE) {\n        <button\n            aria-label=\"Icon-button for clear filter\"\n            mat-icon-button\n            matTooltipPosition=\"left\"\n            matTooltip=\"Clear filter\"\n            [matTooltipDisabled]=\"narrow()\"\n            [disabled]=\"!currentFilter().value\"\n            (click)=\"onFilterValueChange('')\">\n            <mat-icon [rtIconOutlined]=\"true\">close</mat-icon>\n        </button>\n\n        <mat-form-field rtBlock=\"table-header-cell-filter-input\" subscriptSizing=\"dynamic\" [appearance]=\"appearance()\">\n            <input\n                matInput\n                placeholder=\"1/1/2025\"\n                [matDatepicker]=\"picker\"\n                [ngModel]=\"currentFilter().value\"\n                (ngModelChange)=\"onFilterValueChange($event)\" />\n            <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n            <mat-datepicker #picker></mat-datepicker>\n        </mat-form-field>\n    }\n    @case (filterTypes.SELECT) {\n        <button\n            aria-label=\"Icon-button for clear filter\"\n            mat-icon-button\n            matTooltipPosition=\"left\"\n            matTooltip=\"Clear filter\"\n            [matTooltipDisabled]=\"narrow()\"\n            [disabled]=\"!currentFilter().value\"\n            (click)=\"onFilterValueChange('')\">\n            <mat-icon [rtIconOutlined]=\"true\">close</mat-icon>\n        </button>\n\n        <mat-form-field rtBlock=\"table-header-cell-filter-input\" subscriptSizing=\"dynamic\" [appearance]=\"appearance()\">\n            <mat-select placeholder=\"Chose filter\" [value]=\"currentFilter().value\" (selectionChange)=\"onFilterValueChange($event.value)\">\n                @for (item of filterSelectOptions(); track item) {\n                    <mat-option [value]=\"item\">{{ item | titlecase }}</mat-option>\n                } @empty {\n                    <mat-option [value]=\"null\">No options available</mat-option>\n                }\n            </mat-select>\n        </mat-form-field>\n    }\n}\n", styles: [":host{display:flex;width:100%;align-items:center;justify-content:flex-start;gap:var(--rt-spacing-8)}:host .table-header-cell-filter-input{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { 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: "component", type: 
                 // Material
                 MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i2$1.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i2$1.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i2$1.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { 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: MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "directive", type: MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "component", type: MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: 
                 // Directives
                 RtIconOutlinedDirective, selector: "mat-icon[rtIconOutlined]", inputs: ["rtIconOutlined"] }, { kind: "directive", type: BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "component", type: 
                 // Components
-                RtuiClearButtonComponent, selector: "rtui-clear-button", inputs: ["isMobile", "isButtonShown", "tooltip", "tooltipPosition"], outputs: ["keydownAction", "clickAction"] }, { kind: "pipe", type: 
+                RtuiClearButtonComponent, selector: "rtui-clear-button", inputs: ["isMobile", "isButtonShown", "tooltip", "tooltipPosition"], outputs: ["keydownAction", "clickAction"] }, { kind: "pipe", type: ConcatClassesPipe, name: "concatClasses" }, { kind: "pipe", type: 
                 // Pipes
                 TitleCasePipe, name: "titlecase" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiTableHeaderFilterCellComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rtui-table-header-filter-cell', changeDetection: ChangeDetectionStrategy.OnPush, providers: [provideNativeDateAdapter()], imports: [
+            args: [{ selector: 'rtui-table-header-filter-cell', host: { class: BEM_BLOCK$i }, changeDetection: ChangeDetectionStrategy.OnPush, providers: [BreakpointService, provideNativeDateAdapter()], imports: [
+                        ConcatClassesPipe,
                         FormsModule,
                         // Material
                         MatIcon,
@@ -2262,7 +2387,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                         BlockDirective,
                         // Components
                         RtuiClearButtonComponent,
-                    ], template: "@if (filterOperators()?.length) {\n    <button\n        aria-label=\"Icon-button for a context menu\"\n        mat-icon-button\n        matTooltipPosition=\"left\"\n        [matTooltip]=\"currentFilter().operatorType | titlecase\"\n        [matTooltipDisabled]=\"isMobile()\"\n        [matMenuTriggerFor]=\"menuTpl\"\n        (click)=\"$event.stopPropagation()\"\n        (mousedown)=\"$event.stopPropagation()\">\n        <mat-icon [rtIconOutlined]=\"true\">\n            @switch (currentFilter().operatorType) {\n                @case (filterOperatorTypes.EQUALS) {\n                    drag_handle\n                }\n                @case (filterOperatorTypes.NOT_EQUALS) {\n                    block\n                }\n                @case (filterOperatorTypes.CONTAINS) {\n                    more_horiz\n                }\n                @case (filterOperatorTypes.GREATER_THAN) {\n                    chevron_right\n                }\n                @case (filterOperatorTypes.LESS_THAN) {\n                    chevron_left\n                }\n            }\n        </mat-icon>\n    </button>\n\n    <mat-menu #menuTpl=\"matMenu\" xPosition=\"before\">\n        @if (filterOperators().includes(filterOperatorTypes.EQUALS) && currentFilter()?.operatorType !== filterOperatorTypes.EQUALS) {\n            <div mat-menu-item (click)=\"onFilterOperatorChange(filterOperatorTypes.EQUALS)\">\n                <mat-icon class=\"material-icons-outlined\" rtIconOutlined>drag_handle</mat-icon>\n                <span>Equal</span>\n            </div>\n        }\n        @if (\n            filterOperators().includes(filterOperatorTypes.NOT_EQUALS) && currentFilter()?.operatorType !== filterOperatorTypes.NOT_EQUALS\n        ) {\n            <div mat-menu-item (click)=\"onFilterOperatorChange(filterOperatorTypes.NOT_EQUALS)\">\n                <mat-icon [rtIconOutlined]=\"true\">block</mat-icon>\n                <span>Not equal</span>\n            </div>\n        }\n        @if (filterOperators().includes(filterOperatorTypes.CONTAINS) && currentFilter()?.operatorType !== filterOperatorTypes.CONTAINS) {\n            <div mat-menu-item (click)=\"onFilterOperatorChange(filterOperatorTypes.CONTAINS)\">\n                <mat-icon [rtIconOutlined]=\"true\">more_horiz</mat-icon>\n                <span>Contains</span>\n            </div>\n        }\n        @if (\n            filterOperators().includes(filterOperatorTypes.GREATER_THAN) &&\n            currentFilter()?.operatorType !== filterOperatorTypes.GREATER_THAN\n        ) {\n            <div mat-menu-item (click)=\"onFilterOperatorChange(filterOperatorTypes.GREATER_THAN)\">\n                <mat-icon [rtIconOutlined]=\"true\">chevron_right</mat-icon>\n                <span>More than</span>\n            </div>\n        }\n        @if (filterOperators().includes(filterOperatorTypes.LESS_THAN) && currentFilter()?.operatorType !== filterOperatorTypes.LESS_THAN) {\n            <div mat-menu-item (click)=\"onFilterOperatorChange(filterOperatorTypes.LESS_THAN)\">\n                <mat-icon [rtIconOutlined]=\"true\">chevron_left</mat-icon>\n                <span>Less than</span>\n            </div>\n        }\n    </mat-menu>\n}\n\n@switch (filterType()) {\n    @case (filterTypes.TEXT) {\n        <mat-form-field rtBlock=\"table-header-cell-filter-input\" subscriptSizing=\"dynamic\" [appearance]=\"appearance()\">\n            <input\n                #input\n                matInput\n                type=\"text\"\n                placeholder=\"Type in filter value\"\n                [value]=\"currentFilter().value\"\n                (keydown.enter)=\"onFilterValueChange(input.value)\"\n                (focusout)=\"onFilterValueChange(input.value)\" />\n\n            <rtui-clear-button matSuffix [isButtonShown]=\"!!currentFilter().value\" (clickAction)=\"onFilterValueChange('')\" />\n        </mat-form-field>\n    }\n    @case (filterTypes.NUMBER) {\n        <mat-form-field rtBlock=\"table-header-cell-filter-input\" subscriptSizing=\"dynamic\" [appearance]=\"appearance()\">\n            <input\n                #input\n                matInput\n                type=\"number\"\n                placeholder=\"Type in filter value\"\n                [value]=\"currentFilter().value\"\n                (keydown.enter)=\"onFilterValueChange(input.value)\"\n                (focusout)=\"onFilterValueChange(input.value)\" />\n\n            <rtui-clear-button matSuffix [isButtonShown]=\"!!currentFilter().value\" (clickAction)=\"onFilterValueChange('')\" />\n        </mat-form-field>\n    }\n    @case (filterTypes.DATE) {\n        <button\n            aria-label=\"Icon-button for clear filter\"\n            mat-icon-button\n            matTooltipPosition=\"left\"\n            matTooltip=\"Clear filter\"\n            [matTooltipDisabled]=\"isMobile()\"\n            [disabled]=\"!currentFilter().value\"\n            (click)=\"onFilterValueChange('')\">\n            <mat-icon [rtIconOutlined]=\"true\">close</mat-icon>\n        </button>\n\n        <mat-form-field rtBlock=\"table-header-cell-filter-input\" subscriptSizing=\"dynamic\" [appearance]=\"appearance()\">\n            <input\n                matInput\n                placeholder=\"1/1/2025\"\n                [matDatepicker]=\"picker\"\n                [ngModel]=\"currentFilter().value\"\n                (ngModelChange)=\"onFilterValueChange($event)\" />\n            <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n            <mat-datepicker #picker></mat-datepicker>\n        </mat-form-field>\n    }\n    @case (filterTypes.SELECT) {\n        <button\n            aria-label=\"Icon-button for clear filter\"\n            mat-icon-button\n            matTooltipPosition=\"left\"\n            matTooltip=\"Clear filter\"\n            [matTooltipDisabled]=\"isMobile()\"\n            [disabled]=\"!currentFilter().value\"\n            (click)=\"onFilterValueChange('')\">\n            <mat-icon [rtIconOutlined]=\"true\">close</mat-icon>\n        </button>\n\n        <mat-form-field rtBlock=\"table-header-cell-filter-input\" subscriptSizing=\"dynamic\" [appearance]=\"appearance()\">\n            <mat-select placeholder=\"Chose filter\" [value]=\"currentFilter().value\" (selectionChange)=\"onFilterValueChange($event.value)\">\n                @for (item of filterSelectOptions(); track item) {\n                    <mat-option [value]=\"item\">{{ item | titlecase }}</mat-option>\n                } @empty {\n                    <mat-option [value]=\"null\">No options available</mat-option>\n                }\n            </mat-select>\n        </mat-form-field>\n    }\n}\n", styles: [":host{display:flex;width:100%;align-items:center;justify-content:flex-start;gap:var(--rt-spacing-8)}:host .table-header-cell-filter-input{width:100%}\n"] }]
+                    ], template: "@if (filterOperators()?.length) {\n    <button\n        aria-label=\"Icon-button for a context menu\"\n        mat-icon-button\n        matTooltipPosition=\"left\"\n        [matTooltip]=\"currentFilter().operatorType | titlecase\"\n        [matTooltipDisabled]=\"narrow()\"\n        [matMenuTriggerFor]=\"menuTpl\"\n        (click)=\"$event.stopPropagation()\"\n        (mousedown)=\"$event.stopPropagation()\">\n        <mat-icon [rtIconOutlined]=\"true\">\n            @switch (currentFilter().operatorType) {\n                @case (filterOperatorTypes.EQUALS) {\n                    drag_handle\n                }\n                @case (filterOperatorTypes.NOT_EQUALS) {\n                    block\n                }\n                @case (filterOperatorTypes.CONTAINS) {\n                    more_horiz\n                }\n                @case (filterOperatorTypes.GREATER_THAN) {\n                    chevron_right\n                }\n                @case (filterOperatorTypes.LESS_THAN) {\n                    chevron_left\n                }\n            }\n        </mat-icon>\n    </button>\n\n    <mat-menu #menuTpl=\"matMenu\" xPosition=\"before\">\n        @if (filterOperators().includes(filterOperatorTypes.EQUALS) && currentFilter()?.operatorType !== filterOperatorTypes.EQUALS) {\n            <button type=\"button\" mat-menu-item (click)=\"onFilterOperatorChange(filterOperatorTypes.EQUALS)\">\n                <mat-icon rtIconOutlined [class]=\"['material-icons-outlined'] | concatClasses\">drag_handle</mat-icon>\n                <span>Equal</span>\n            </button>\n        }\n        @if (\n            filterOperators().includes(filterOperatorTypes.NOT_EQUALS) && currentFilter()?.operatorType !== filterOperatorTypes.NOT_EQUALS\n        ) {\n            <button type=\"button\" mat-menu-item (click)=\"onFilterOperatorChange(filterOperatorTypes.NOT_EQUALS)\">\n                <mat-icon [rtIconOutlined]=\"true\">block</mat-icon>\n                <span>Not equal</span>\n            </button>\n        }\n        @if (filterOperators().includes(filterOperatorTypes.CONTAINS) && currentFilter()?.operatorType !== filterOperatorTypes.CONTAINS) {\n            <button type=\"button\" mat-menu-item (click)=\"onFilterOperatorChange(filterOperatorTypes.CONTAINS)\">\n                <mat-icon [rtIconOutlined]=\"true\">more_horiz</mat-icon>\n                <span>Contains</span>\n            </button>\n        }\n        @if (\n            filterOperators().includes(filterOperatorTypes.GREATER_THAN) &&\n            currentFilter()?.operatorType !== filterOperatorTypes.GREATER_THAN\n        ) {\n            <button type=\"button\" mat-menu-item (click)=\"onFilterOperatorChange(filterOperatorTypes.GREATER_THAN)\">\n                <mat-icon [rtIconOutlined]=\"true\">chevron_right</mat-icon>\n                <span>More than</span>\n            </button>\n        }\n        @if (filterOperators().includes(filterOperatorTypes.LESS_THAN) && currentFilter()?.operatorType !== filterOperatorTypes.LESS_THAN) {\n            <button type=\"button\" mat-menu-item (click)=\"onFilterOperatorChange(filterOperatorTypes.LESS_THAN)\">\n                <mat-icon [rtIconOutlined]=\"true\">chevron_left</mat-icon>\n                <span>Less than</span>\n            </button>\n        }\n    </mat-menu>\n}\n\n@switch (filterType()) {\n    @case (filterTypes.TEXT) {\n        <mat-form-field rtBlock=\"table-header-cell-filter-input\" subscriptSizing=\"dynamic\" [appearance]=\"appearance()\">\n            <input\n                #input\n                matInput\n                type=\"text\"\n                placeholder=\"Type in filter value\"\n                [value]=\"currentFilter().value\"\n                (keydown.enter)=\"onFilterValueChange(input.value)\"\n                (focusout)=\"onFilterValueChange(input.value)\" />\n\n            <rtui-clear-button matSuffix [isButtonShown]=\"!!currentFilter().value\" (clickAction)=\"onFilterValueChange('')\" />\n        </mat-form-field>\n    }\n    @case (filterTypes.NUMBER) {\n        <mat-form-field rtBlock=\"table-header-cell-filter-input\" subscriptSizing=\"dynamic\" [appearance]=\"appearance()\">\n            <input\n                #input\n                matInput\n                type=\"number\"\n                placeholder=\"Type in filter value\"\n                [value]=\"currentFilter().value\"\n                (keydown.enter)=\"onFilterValueChange(input.value)\"\n                (focusout)=\"onFilterValueChange(input.value)\" />\n\n            <rtui-clear-button matSuffix [isButtonShown]=\"!!currentFilter().value\" (clickAction)=\"onFilterValueChange('')\" />\n        </mat-form-field>\n    }\n    @case (filterTypes.DATE) {\n        <button\n            aria-label=\"Icon-button for clear filter\"\n            mat-icon-button\n            matTooltipPosition=\"left\"\n            matTooltip=\"Clear filter\"\n            [matTooltipDisabled]=\"narrow()\"\n            [disabled]=\"!currentFilter().value\"\n            (click)=\"onFilterValueChange('')\">\n            <mat-icon [rtIconOutlined]=\"true\">close</mat-icon>\n        </button>\n\n        <mat-form-field rtBlock=\"table-header-cell-filter-input\" subscriptSizing=\"dynamic\" [appearance]=\"appearance()\">\n            <input\n                matInput\n                placeholder=\"1/1/2025\"\n                [matDatepicker]=\"picker\"\n                [ngModel]=\"currentFilter().value\"\n                (ngModelChange)=\"onFilterValueChange($event)\" />\n            <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n            <mat-datepicker #picker></mat-datepicker>\n        </mat-form-field>\n    }\n    @case (filterTypes.SELECT) {\n        <button\n            aria-label=\"Icon-button for clear filter\"\n            mat-icon-button\n            matTooltipPosition=\"left\"\n            matTooltip=\"Clear filter\"\n            [matTooltipDisabled]=\"narrow()\"\n            [disabled]=\"!currentFilter().value\"\n            (click)=\"onFilterValueChange('')\">\n            <mat-icon [rtIconOutlined]=\"true\">close</mat-icon>\n        </button>\n\n        <mat-form-field rtBlock=\"table-header-cell-filter-input\" subscriptSizing=\"dynamic\" [appearance]=\"appearance()\">\n            <mat-select placeholder=\"Chose filter\" [value]=\"currentFilter().value\" (selectionChange)=\"onFilterValueChange($event.value)\">\n                @for (item of filterSelectOptions(); track item) {\n                    <mat-option [value]=\"item\">{{ item | titlecase }}</mat-option>\n                } @empty {\n                    <mat-option [value]=\"null\">No options available</mat-option>\n                }\n            </mat-select>\n        </mat-form-field>\n    }\n}\n", styles: [":host{display:flex;width:100%;align-items:center;justify-content:flex-start;gap:var(--rt-spacing-8)}:host .table-header-cell-filter-input{width:100%}\n"] }]
         }], propDecorators: { appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: true }] }], filterProperty: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterProperty", required: true }] }], filterType: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterType", required: true }] }], filterModel: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterModel", required: true }] }], defaultFilterOperator: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultFilterOperator", required: true }] }], filterOperators: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterOperators", required: false }] }], filterSelectOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterSelectOptions", required: false }] }], isMobile: [{ type: i0.Input, args: [{ isSignal: true, alias: "isMobile", required: false }] }], filterChange: [{ type: i0.Output, args: ["filterChange"] }] } });
 
 class RtuiStopTableRowClickDirective {
@@ -2362,6 +2487,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                     selector: '[rtuiTableAdditionalRowActionsDirective]',
                 }]
         }] });
+const BEM_BLOCK$h = 'rtui-table';
 class RtuiTableComponent {
     constructor() {
         this.rowActions = viewChild('rowActions', /* @ts-ignore */
@@ -2370,11 +2496,22 @@ class RtuiTableComponent {
         ...(ngDevMode ? [{ debugName: "rowActionsHeaderPaddingHelper" }] : /* istanbul ignore next */ []));
         this.rowActionsPaddingHelper = viewChild('rowActionsRowPaddingHelper', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "rowActionsPaddingHelper" }] : /* istanbul ignore next */ []));
+        this.#breakpoints = inject(BreakpointService);
         this.#tableConfigService = inject(RtTableConfigService);
         this.columnTypes = TABLE_COLUMN_TYPES_ENUM;
         this.filterOperators = FILTER_OPERATOR_TYPE_ENUM;
         /** Indicates is mobile view */
-        this.isMobile = input(false, { ...(ngDevMode ? { debugName: "isMobile" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /**
+         * Признак узкого экрана.
+         *
+         * @deprecated Кит определяет его сам — `BreakpointService` из `@rt-tools/core`. Вход
+         * оставлен ради приложений, которые уже его передают, и уйдёт в следующем крупном выпуске.
+         */
+        this.isMobile = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isMobile" }] : /* istanbul ignore next */ []));
+        /** Экран узкий: значение входа, если приложение его дало, иначе замер кита. */
+        this.narrow = computed(() => this.isMobile() ?? !!this.#breakpoints.isMobile(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "narrow" }] : /* istanbul ignore next */ []));
         /** Indicates are table rows clickable */
         this.isTableRowsClickable = input(false, { ...(ngDevMode ? { debugName: "isTableRowsClickable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /** Key of ENTITY_TYPE for compare entities */
@@ -2444,6 +2581,7 @@ class RtuiTableComponent {
             return;
         };
     }
+    #breakpoints;
     #tableConfigService;
     ngAfterViewChecked() {
         this.#setPaddingHelperWidth();
@@ -2496,12 +2634,13 @@ class RtuiTableComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: RtuiTableComponent, isStandalone: true, selector: "rtui-table", inputs: { isMobile: { classPropertyName: "isMobile", publicName: "isMobile", isSignal: true, isRequired: false, transformFunction: null }, isTableRowsClickable: { classPropertyName: "isTableRowsClickable", publicName: "isTableRowsClickable", isSignal: true, isRequired: false, transformFunction: null }, keyExp: { classPropertyName: "keyExp", publicName: "keyExp", isSignal: true, isRequired: false, transformFunction: null }, entities: { classPropertyName: "entities", publicName: "entities", isSignal: true, isRequired: true, transformFunction: null }, currentSortModel: { classPropertyName: "currentSortModel", publicName: "currentSortModel", isSignal: true, isRequired: true, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: true, transformFunction: null }, filterAppearance: { classPropertyName: "filterAppearance", publicName: "filterAppearance", isSignal: true, isRequired: false, transformFunction: null }, filterModel: { classPropertyName: "filterModel", publicName: "filterModel", isSignal: true, isRequired: false, transformFunction: null }, isFiltersShown: { classPropertyName: "isFiltersShown", publicName: "isFiltersShown", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { rowClick: "rowClick", rowDoubleClick: "rowDoubleClick", sortChange: "sortChange", filterChange: "filterChange" }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: RtuiTableComponent, isStandalone: true, selector: "rtui-table", inputs: { isMobile: { classPropertyName: "isMobile", publicName: "isMobile", isSignal: true, isRequired: false, transformFunction: null }, isTableRowsClickable: { classPropertyName: "isTableRowsClickable", publicName: "isTableRowsClickable", isSignal: true, isRequired: false, transformFunction: null }, keyExp: { classPropertyName: "keyExp", publicName: "keyExp", isSignal: true, isRequired: false, transformFunction: null }, entities: { classPropertyName: "entities", publicName: "entities", isSignal: true, isRequired: true, transformFunction: null }, currentSortModel: { classPropertyName: "currentSortModel", publicName: "currentSortModel", isSignal: true, isRequired: true, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: true, transformFunction: null }, filterAppearance: { classPropertyName: "filterAppearance", publicName: "filterAppearance", isSignal: true, isRequired: false, transformFunction: null }, filterModel: { classPropertyName: "filterModel", publicName: "filterModel", isSignal: true, isRequired: false, transformFunction: null }, isFiltersShown: { classPropertyName: "isFiltersShown", publicName: "isFiltersShown", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { rowClick: "rowClick", rowDoubleClick: "rowDoubleClick", sortChange: "sortChange", filterChange: "filterChange" }, host: { classAttribute: "rtui-table" }, providers: [
+            BreakpointService,
             {
                 provide: RTUI_TABLE_COMPONENT_TOKEN,
                 useExisting: forwardRef(() => RtuiTableComponent),
             },
-        ], queries: [{ propertyName: "customCellsTpl", first: true, predicate: RtuiCustomTableCellsDirective, descendants: true, isSignal: true }, { propertyName: "rowActionsTpl", first: true, predicate: RtuiTableRowActionsDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "additionalRowActionsTpl", first: true, predicate: RtuiTableAdditionalRowActionsDirective, descendants: true, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "rowActions", first: true, predicate: ["rowActions"], descendants: true, isSignal: true }, { propertyName: "rowActionsHeaderPaddingHelper", first: true, predicate: ["rowActionsHeaderPaddingHelper"], descendants: true, isSignal: true }, { propertyName: "rowActionsPaddingHelper", first: true, predicate: ["rowActionsRowPaddingHelper"], descendants: true, isSignal: true }], ngImport: i0, template: "<table rtBlock=\"c-table\">\n    <thead>\n        <tr>\n            @if (isSelectorsColumnShown()) {\n                <th\n                    rtElem=\"cell\"\n                    rtMod=\"selectable\"\n                    (mousedown)=\"$event.stopPropagation()\"\n                    (click)=\"$event.stopPropagation()\"\n                    (dblclick)=\"$event.stopPropagation()\">\n                    @if (isMultiSelect()) {\n                        <mat-checkbox\n                            [disabled]=\"isSelectorsColumnDisabled()\"\n                            [checked]=\"isPageEntitiesSelected()\"\n                            [indeterminate]=\"isPageEntitiesIndeterminate() && !isPageEntitiesSelected()\"\n                            (change)=\"onTogglePageEntities($event.checked)\" />\n                    }\n                </th>\n            }\n\n            @for (column of columns(); track column.propName) {\n                @if (!column?.hidden) {\n                    <th\n                        rtElem=\"cell\"\n                        [rtMod]=\"{ sortable: column?.sorting }\"\n                        (mousedown)=\"$event.stopPropagation()\"\n                        (click)=\"$event.stopPropagation()\"\n                        (dblclick)=\"$event.stopPropagation()\">\n                        <rtui-table-header-cell\n                            [headerModel]=\"column.header\"\n                            [sortModel]=\"column?.sorting\"\n                            [currentSortModel]=\"currentSortModel()\"\n                            (sortChange)=\"onSortChange($event)\" />\n                    </th>\n                }\n            }\n\n            @if (rowActionsTpl() || additionalRowActionsTpl()) {\n                <th\n                    #rowActionsHeaderPaddingHelper\n                    rtElem=\"cell\"\n                    (mousedown)=\"$event.stopPropagation()\"\n                    (click)=\"$event.stopPropagation()\"\n                    (dblclick)=\"$event.stopPropagation()\">\n                    Actions\n                </th>\n            }\n        </tr>\n\n        @if (isFiltersShown()) {\n            <tr>\n                @if (isSelectorsColumnShown()) {\n                    <th rtElem=\"cell\" rtMod=\"filterable, empty\"></th>\n                }\n\n                @for (column of columns(); track column.propName) {\n                    @if (!column?.hidden && column.filterType) {\n                        <th rtElem=\"cell\" rtMod=\"filterable\">\n                            <rtui-table-header-filter-cell\n                                [appearance]=\"filterAppearance()\"\n                                [filterProperty]=\"column.propName\"\n                                [filterType]=\"column.filterType\"\n                                [defaultFilterOperator]=\"column?.defaultFilterOperator || filterOperators.EQUALS\"\n                                [filterOperators]=\"column.filterOperators || []\"\n                                [filterSelectOptions]=\"column.filterSelectOptions || []\"\n                                [filterModel]=\"filterModel()\"\n                                (filterChange)=\"onFilterChange($event)\" />\n                        </th>\n                    } @else if (!column?.hidden) {\n                        <th rtElem=\"cell\" rtMod=\"filterable\"></th>\n                    }\n                }\n\n                @if (rowActionsTpl() || additionalRowActionsTpl()) {\n                    <th rtElem=\"cell\" rtMod=\"filterable\"></th>\n                }\n            </tr>\n        }\n    </thead>\n\n    <tbody>\n        @for (row of entities(); track i; let i = $index) {\n            <tr\n                rtElem=\"row\"\n                [rtuiTableRowClickDirective]=\"row\"\n                [isTableRowClickable]=\"isTableRowsClickable()\"\n                [rtMod]=\"{\n                    clickable: isTableRowsClickable(),\n                    active: activeRowIndex() === i,\n                }\">\n                @if (isSelectorsColumnShown()) {\n                    <td\n                        rtElem=\"cell\"\n                        (click)=\"$event.stopPropagation()\"\n                        (mousedown)=\"$event.stopPropagation()\"\n                        (dblclick)=\"$event.stopPropagation()\">\n                        @if (isMultiSelect()) {\n                            <mat-checkbox\n                                [disabled]=\"isSelectorsColumnDisabled()\"\n                                [checked]=\"selectedEntitiesIds().includes(row[keyExp()])\"\n                                (change)=\"onToggleEntity(row, $event.checked)\" />\n                        } @else {\n                            <mat-radio-button\n                                [disabled]=\"isSelectorsColumnDisabled()\"\n                                [checked]=\"selectedEntitiesIds().includes(row[keyExp()])\"\n                                (change)=\"onToggleEntity(row, true)\" />\n                        }\n                    </td>\n                }\n\n                @for (column of columns(); track column.propName) {\n                    @if (!column?.hidden) {\n                        <td rtElem=\"cell\" [rtMod]=\"{ copyable: column?.copyable }\">\n                            @switch (column?.type) {\n                                @case (columnTypes.CUSTOM) {\n                                    @if (customCellsTpl() && customCellsTpl()?.getTemplateByPropName(column.propName)) {\n                                        <ng-template\n                                            *ngTemplateOutlet=\"\n                                                customCellsTpl()?.getTemplateByPropName(column.propName) || null;\n                                                context: { $implicit: row }\n                                            \" />\n                                    }\n                                }\n                                @default {\n                                    <rtui-table-base-cell [row]=\"row\" [column]=\"column\" [isMobile]=\"isMobile()\" />\n                                }\n                            }\n                        </td>\n                    }\n                }\n\n                @if (rowActionsTpl() || additionalRowActionsTpl()) {\n                    <div rtBlock=\"c-table-actions\" [rtMod]=\"{ hidden: activeRowIndex() !== i }\">\n                        <div rtElem=\"container\" #rowActions>\n                            @if (additionalRowActionsTpl()) {\n                                <ng-template *ngTemplateOutlet=\"additionalRowActionsTpl() || null; context: { $implicit: row }\" />\n                            }\n\n                            @if (rowActionsTpl()) {\n                                <button\n                                    rtElem=\"action\"\n                                    aria-label=\"Icon-button for a context menu\"\n                                    mat-icon-button\n                                    [disableRipple]=\"true\"\n                                    [matMenuTriggerFor]=\"menuTpl\"\n                                    (menuOpened)=\"onMenuOpen(i)\"\n                                    (menuClosed)=\"onMenuClose()\"\n                                    (click)=\"$event.stopPropagation()\"\n                                    (mousedown)=\"$event.stopPropagation()\">\n                                    <mat-icon [rtIconOutlined]=\"true\">more_vert</mat-icon>\n                                </button>\n\n                                <mat-menu #menuTpl=\"matMenu\" xPosition=\"before\">\n                                    <ng-template *ngTemplateOutlet=\"rowActionsTpl() || null; context: { $implicit: row }\" />\n                                </mat-menu>\n                            }\n                        </div>\n                    </div>\n\n                    <div #rowActionsRowPaddingHelper></div>\n                }\n            </tr>\n        }\n    </tbody>\n</table>\n", styles: [":host{width:100%;height:100%}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: 
+        ], queries: [{ propertyName: "customCellsTpl", first: true, predicate: RtuiCustomTableCellsDirective, descendants: true, isSignal: true }, { propertyName: "rowActionsTpl", first: true, predicate: RtuiTableRowActionsDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "additionalRowActionsTpl", first: true, predicate: RtuiTableAdditionalRowActionsDirective, descendants: true, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "rowActions", first: true, predicate: ["rowActions"], descendants: true, isSignal: true }, { propertyName: "rowActionsHeaderPaddingHelper", first: true, predicate: ["rowActionsHeaderPaddingHelper"], descendants: true, isSignal: true }, { propertyName: "rowActionsPaddingHelper", first: true, predicate: ["rowActionsRowPaddingHelper"], descendants: true, isSignal: true }], ngImport: i0, template: "<table rtBlock=\"c-table\">\n    <thead>\n        <tr>\n            @if (isSelectorsColumnShown()) {\n                <th\n                    rtElem=\"cell\"\n                    rtMod=\"selectable\"\n                    (mousedown)=\"$event.stopPropagation()\"\n                    (click)=\"$event.stopPropagation()\"\n                    (dblclick)=\"$event.stopPropagation()\">\n                    @if (isMultiSelect()) {\n                        <mat-checkbox\n                            [disabled]=\"isSelectorsColumnDisabled()\"\n                            [checked]=\"isPageEntitiesSelected()\"\n                            [indeterminate]=\"isPageEntitiesIndeterminate() && !isPageEntitiesSelected()\"\n                            (change)=\"onTogglePageEntities($event.checked)\" />\n                    }\n                </th>\n            }\n\n            @for (column of columns(); track column.propName) {\n                @if (!column?.hidden) {\n                    <th\n                        rtElem=\"cell\"\n                        [rtMod]=\"{ sortable: column?.sorting }\"\n                        (mousedown)=\"$event.stopPropagation()\"\n                        (click)=\"$event.stopPropagation()\"\n                        (dblclick)=\"$event.stopPropagation()\">\n                        <rtui-table-header-cell\n                            [headerModel]=\"column.header\"\n                            [sortModel]=\"column?.sorting\"\n                            [currentSortModel]=\"currentSortModel()\"\n                            (sortChange)=\"onSortChange($event)\" />\n                    </th>\n                }\n            }\n\n            @if (rowActionsTpl() || additionalRowActionsTpl()) {\n                <th\n                    #rowActionsHeaderPaddingHelper\n                    rtElem=\"cell\"\n                    (mousedown)=\"$event.stopPropagation()\"\n                    (click)=\"$event.stopPropagation()\"\n                    (dblclick)=\"$event.stopPropagation()\">\n                    Actions\n                </th>\n            }\n        </tr>\n\n        @if (isFiltersShown()) {\n            <tr>\n                @if (isSelectorsColumnShown()) {\n                    <th rtElem=\"cell\" rtMod=\"filterable, empty\"></th>\n                }\n\n                @for (column of columns(); track column.propName) {\n                    @if (!column?.hidden && column.filterType) {\n                        <th rtElem=\"cell\" rtMod=\"filterable\">\n                            <rtui-table-header-filter-cell\n                                [appearance]=\"filterAppearance()\"\n                                [filterProperty]=\"column.propName\"\n                                [filterType]=\"column.filterType\"\n                                [defaultFilterOperator]=\"column?.defaultFilterOperator || filterOperators.EQUALS\"\n                                [filterOperators]=\"column.filterOperators || []\"\n                                [filterSelectOptions]=\"column.filterSelectOptions || []\"\n                                [filterModel]=\"filterModel()\"\n                                (filterChange)=\"onFilterChange($event)\" />\n                        </th>\n                    } @else if (!column?.hidden) {\n                        <th rtElem=\"cell\" rtMod=\"filterable\"></th>\n                    }\n                }\n\n                @if (rowActionsTpl() || additionalRowActionsTpl()) {\n                    <th rtElem=\"cell\" rtMod=\"filterable\"></th>\n                }\n            </tr>\n        }\n    </thead>\n\n    <tbody>\n        @for (row of entities(); track i; let i = $index) {\n            <tr\n                rtElem=\"row\"\n                [rtuiTableRowClickDirective]=\"row\"\n                [isTableRowClickable]=\"isTableRowsClickable()\"\n                [rtMod]=\"{\n                    clickable: isTableRowsClickable(),\n                    active: activeRowIndex() === i,\n                }\">\n                @if (isSelectorsColumnShown()) {\n                    <td\n                        rtElem=\"cell\"\n                        (click)=\"$event.stopPropagation()\"\n                        (mousedown)=\"$event.stopPropagation()\"\n                        (dblclick)=\"$event.stopPropagation()\">\n                        @if (isMultiSelect()) {\n                            <mat-checkbox\n                                [disabled]=\"isSelectorsColumnDisabled()\"\n                                [checked]=\"selectedEntitiesIds().includes(row[keyExp()])\"\n                                (change)=\"onToggleEntity(row, $event.checked)\" />\n                        } @else {\n                            <mat-radio-button\n                                [disabled]=\"isSelectorsColumnDisabled()\"\n                                [checked]=\"selectedEntitiesIds().includes(row[keyExp()])\"\n                                (change)=\"onToggleEntity(row, true)\" />\n                        }\n                    </td>\n                }\n\n                @for (column of columns(); track column.propName) {\n                    @if (!column?.hidden) {\n                        <td rtElem=\"cell\" [rtMod]=\"{ copyable: column?.copyable }\">\n                            @switch (column?.type) {\n                                @case (columnTypes.CUSTOM) {\n                                    @if (customCellsTpl() && customCellsTpl()?.getTemplateByPropName(column.propName)) {\n                                        <ng-template\n                                            *ngTemplateOutlet=\"\n                                                customCellsTpl()?.getTemplateByPropName(column.propName) || null;\n                                                context: { $implicit: row }\n                                            \" />\n                                    }\n                                }\n                                @default {\n                                    <rtui-table-base-cell [row]=\"row\" [column]=\"column\" />\n                                }\n                            }\n                        </td>\n                    }\n                }\n\n                @if (rowActionsTpl() || additionalRowActionsTpl()) {\n                    <div rtBlock=\"c-table-actions\" [rtMod]=\"{ hidden: activeRowIndex() !== i }\">\n                        <div rtElem=\"container\" #rowActions>\n                            @if (additionalRowActionsTpl()) {\n                                <ng-template *ngTemplateOutlet=\"additionalRowActionsTpl() || null; context: { $implicit: row }\" />\n                            }\n\n                            @if (rowActionsTpl()) {\n                                <button\n                                    rtElem=\"action\"\n                                    aria-label=\"Icon-button for a context menu\"\n                                    mat-icon-button\n                                    [disableRipple]=\"true\"\n                                    [matMenuTriggerFor]=\"menuTpl\"\n                                    (menuOpened)=\"onMenuOpen(i)\"\n                                    (menuClosed)=\"onMenuClose()\"\n                                    (click)=\"$event.stopPropagation()\"\n                                    (mousedown)=\"$event.stopPropagation()\">\n                                    <mat-icon [rtIconOutlined]=\"true\">more_vert</mat-icon>\n                                </button>\n\n                                <mat-menu #menuTpl=\"matMenu\" xPosition=\"before\">\n                                    <ng-template *ngTemplateOutlet=\"rowActionsTpl() || null; context: { $implicit: row }\" />\n                                </mat-menu>\n                            }\n                        </div>\n                    </div>\n\n                    <div #rowActionsRowPaddingHelper></div>\n                }\n            </tr>\n        }\n    </tbody>\n</table>\n", styles: [":host{width:100%;height:100%}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: 
                 // material
                 MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "directive", type: 
                 // directives
@@ -2511,7 +2650,7 @@ class RtuiTableComponent {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiTableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rtui-table', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+            args: [{ selector: 'rtui-table', host: { class: BEM_BLOCK$h }, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         NgTemplateOutlet,
                         // material
                         MatIconButton,
@@ -2531,26 +2670,39 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                         TableBaseCellComponent,
                         RtuiTableHeaderFilterCellComponent,
                     ], providers: [
+                        BreakpointService,
                         {
                             provide: RTUI_TABLE_COMPONENT_TOKEN,
                             useExisting: forwardRef(() => RtuiTableComponent),
                         },
-                    ], template: "<table rtBlock=\"c-table\">\n    <thead>\n        <tr>\n            @if (isSelectorsColumnShown()) {\n                <th\n                    rtElem=\"cell\"\n                    rtMod=\"selectable\"\n                    (mousedown)=\"$event.stopPropagation()\"\n                    (click)=\"$event.stopPropagation()\"\n                    (dblclick)=\"$event.stopPropagation()\">\n                    @if (isMultiSelect()) {\n                        <mat-checkbox\n                            [disabled]=\"isSelectorsColumnDisabled()\"\n                            [checked]=\"isPageEntitiesSelected()\"\n                            [indeterminate]=\"isPageEntitiesIndeterminate() && !isPageEntitiesSelected()\"\n                            (change)=\"onTogglePageEntities($event.checked)\" />\n                    }\n                </th>\n            }\n\n            @for (column of columns(); track column.propName) {\n                @if (!column?.hidden) {\n                    <th\n                        rtElem=\"cell\"\n                        [rtMod]=\"{ sortable: column?.sorting }\"\n                        (mousedown)=\"$event.stopPropagation()\"\n                        (click)=\"$event.stopPropagation()\"\n                        (dblclick)=\"$event.stopPropagation()\">\n                        <rtui-table-header-cell\n                            [headerModel]=\"column.header\"\n                            [sortModel]=\"column?.sorting\"\n                            [currentSortModel]=\"currentSortModel()\"\n                            (sortChange)=\"onSortChange($event)\" />\n                    </th>\n                }\n            }\n\n            @if (rowActionsTpl() || additionalRowActionsTpl()) {\n                <th\n                    #rowActionsHeaderPaddingHelper\n                    rtElem=\"cell\"\n                    (mousedown)=\"$event.stopPropagation()\"\n                    (click)=\"$event.stopPropagation()\"\n                    (dblclick)=\"$event.stopPropagation()\">\n                    Actions\n                </th>\n            }\n        </tr>\n\n        @if (isFiltersShown()) {\n            <tr>\n                @if (isSelectorsColumnShown()) {\n                    <th rtElem=\"cell\" rtMod=\"filterable, empty\"></th>\n                }\n\n                @for (column of columns(); track column.propName) {\n                    @if (!column?.hidden && column.filterType) {\n                        <th rtElem=\"cell\" rtMod=\"filterable\">\n                            <rtui-table-header-filter-cell\n                                [appearance]=\"filterAppearance()\"\n                                [filterProperty]=\"column.propName\"\n                                [filterType]=\"column.filterType\"\n                                [defaultFilterOperator]=\"column?.defaultFilterOperator || filterOperators.EQUALS\"\n                                [filterOperators]=\"column.filterOperators || []\"\n                                [filterSelectOptions]=\"column.filterSelectOptions || []\"\n                                [filterModel]=\"filterModel()\"\n                                (filterChange)=\"onFilterChange($event)\" />\n                        </th>\n                    } @else if (!column?.hidden) {\n                        <th rtElem=\"cell\" rtMod=\"filterable\"></th>\n                    }\n                }\n\n                @if (rowActionsTpl() || additionalRowActionsTpl()) {\n                    <th rtElem=\"cell\" rtMod=\"filterable\"></th>\n                }\n            </tr>\n        }\n    </thead>\n\n    <tbody>\n        @for (row of entities(); track i; let i = $index) {\n            <tr\n                rtElem=\"row\"\n                [rtuiTableRowClickDirective]=\"row\"\n                [isTableRowClickable]=\"isTableRowsClickable()\"\n                [rtMod]=\"{\n                    clickable: isTableRowsClickable(),\n                    active: activeRowIndex() === i,\n                }\">\n                @if (isSelectorsColumnShown()) {\n                    <td\n                        rtElem=\"cell\"\n                        (click)=\"$event.stopPropagation()\"\n                        (mousedown)=\"$event.stopPropagation()\"\n                        (dblclick)=\"$event.stopPropagation()\">\n                        @if (isMultiSelect()) {\n                            <mat-checkbox\n                                [disabled]=\"isSelectorsColumnDisabled()\"\n                                [checked]=\"selectedEntitiesIds().includes(row[keyExp()])\"\n                                (change)=\"onToggleEntity(row, $event.checked)\" />\n                        } @else {\n                            <mat-radio-button\n                                [disabled]=\"isSelectorsColumnDisabled()\"\n                                [checked]=\"selectedEntitiesIds().includes(row[keyExp()])\"\n                                (change)=\"onToggleEntity(row, true)\" />\n                        }\n                    </td>\n                }\n\n                @for (column of columns(); track column.propName) {\n                    @if (!column?.hidden) {\n                        <td rtElem=\"cell\" [rtMod]=\"{ copyable: column?.copyable }\">\n                            @switch (column?.type) {\n                                @case (columnTypes.CUSTOM) {\n                                    @if (customCellsTpl() && customCellsTpl()?.getTemplateByPropName(column.propName)) {\n                                        <ng-template\n                                            *ngTemplateOutlet=\"\n                                                customCellsTpl()?.getTemplateByPropName(column.propName) || null;\n                                                context: { $implicit: row }\n                                            \" />\n                                    }\n                                }\n                                @default {\n                                    <rtui-table-base-cell [row]=\"row\" [column]=\"column\" [isMobile]=\"isMobile()\" />\n                                }\n                            }\n                        </td>\n                    }\n                }\n\n                @if (rowActionsTpl() || additionalRowActionsTpl()) {\n                    <div rtBlock=\"c-table-actions\" [rtMod]=\"{ hidden: activeRowIndex() !== i }\">\n                        <div rtElem=\"container\" #rowActions>\n                            @if (additionalRowActionsTpl()) {\n                                <ng-template *ngTemplateOutlet=\"additionalRowActionsTpl() || null; context: { $implicit: row }\" />\n                            }\n\n                            @if (rowActionsTpl()) {\n                                <button\n                                    rtElem=\"action\"\n                                    aria-label=\"Icon-button for a context menu\"\n                                    mat-icon-button\n                                    [disableRipple]=\"true\"\n                                    [matMenuTriggerFor]=\"menuTpl\"\n                                    (menuOpened)=\"onMenuOpen(i)\"\n                                    (menuClosed)=\"onMenuClose()\"\n                                    (click)=\"$event.stopPropagation()\"\n                                    (mousedown)=\"$event.stopPropagation()\">\n                                    <mat-icon [rtIconOutlined]=\"true\">more_vert</mat-icon>\n                                </button>\n\n                                <mat-menu #menuTpl=\"matMenu\" xPosition=\"before\">\n                                    <ng-template *ngTemplateOutlet=\"rowActionsTpl() || null; context: { $implicit: row }\" />\n                                </mat-menu>\n                            }\n                        </div>\n                    </div>\n\n                    <div #rowActionsRowPaddingHelper></div>\n                }\n            </tr>\n        }\n    </tbody>\n</table>\n", styles: [":host{width:100%;height:100%}\n"] }]
+                    ], template: "<table rtBlock=\"c-table\">\n    <thead>\n        <tr>\n            @if (isSelectorsColumnShown()) {\n                <th\n                    rtElem=\"cell\"\n                    rtMod=\"selectable\"\n                    (mousedown)=\"$event.stopPropagation()\"\n                    (click)=\"$event.stopPropagation()\"\n                    (dblclick)=\"$event.stopPropagation()\">\n                    @if (isMultiSelect()) {\n                        <mat-checkbox\n                            [disabled]=\"isSelectorsColumnDisabled()\"\n                            [checked]=\"isPageEntitiesSelected()\"\n                            [indeterminate]=\"isPageEntitiesIndeterminate() && !isPageEntitiesSelected()\"\n                            (change)=\"onTogglePageEntities($event.checked)\" />\n                    }\n                </th>\n            }\n\n            @for (column of columns(); track column.propName) {\n                @if (!column?.hidden) {\n                    <th\n                        rtElem=\"cell\"\n                        [rtMod]=\"{ sortable: column?.sorting }\"\n                        (mousedown)=\"$event.stopPropagation()\"\n                        (click)=\"$event.stopPropagation()\"\n                        (dblclick)=\"$event.stopPropagation()\">\n                        <rtui-table-header-cell\n                            [headerModel]=\"column.header\"\n                            [sortModel]=\"column?.sorting\"\n                            [currentSortModel]=\"currentSortModel()\"\n                            (sortChange)=\"onSortChange($event)\" />\n                    </th>\n                }\n            }\n\n            @if (rowActionsTpl() || additionalRowActionsTpl()) {\n                <th\n                    #rowActionsHeaderPaddingHelper\n                    rtElem=\"cell\"\n                    (mousedown)=\"$event.stopPropagation()\"\n                    (click)=\"$event.stopPropagation()\"\n                    (dblclick)=\"$event.stopPropagation()\">\n                    Actions\n                </th>\n            }\n        </tr>\n\n        @if (isFiltersShown()) {\n            <tr>\n                @if (isSelectorsColumnShown()) {\n                    <th rtElem=\"cell\" rtMod=\"filterable, empty\"></th>\n                }\n\n                @for (column of columns(); track column.propName) {\n                    @if (!column?.hidden && column.filterType) {\n                        <th rtElem=\"cell\" rtMod=\"filterable\">\n                            <rtui-table-header-filter-cell\n                                [appearance]=\"filterAppearance()\"\n                                [filterProperty]=\"column.propName\"\n                                [filterType]=\"column.filterType\"\n                                [defaultFilterOperator]=\"column?.defaultFilterOperator || filterOperators.EQUALS\"\n                                [filterOperators]=\"column.filterOperators || []\"\n                                [filterSelectOptions]=\"column.filterSelectOptions || []\"\n                                [filterModel]=\"filterModel()\"\n                                (filterChange)=\"onFilterChange($event)\" />\n                        </th>\n                    } @else if (!column?.hidden) {\n                        <th rtElem=\"cell\" rtMod=\"filterable\"></th>\n                    }\n                }\n\n                @if (rowActionsTpl() || additionalRowActionsTpl()) {\n                    <th rtElem=\"cell\" rtMod=\"filterable\"></th>\n                }\n            </tr>\n        }\n    </thead>\n\n    <tbody>\n        @for (row of entities(); track i; let i = $index) {\n            <tr\n                rtElem=\"row\"\n                [rtuiTableRowClickDirective]=\"row\"\n                [isTableRowClickable]=\"isTableRowsClickable()\"\n                [rtMod]=\"{\n                    clickable: isTableRowsClickable(),\n                    active: activeRowIndex() === i,\n                }\">\n                @if (isSelectorsColumnShown()) {\n                    <td\n                        rtElem=\"cell\"\n                        (click)=\"$event.stopPropagation()\"\n                        (mousedown)=\"$event.stopPropagation()\"\n                        (dblclick)=\"$event.stopPropagation()\">\n                        @if (isMultiSelect()) {\n                            <mat-checkbox\n                                [disabled]=\"isSelectorsColumnDisabled()\"\n                                [checked]=\"selectedEntitiesIds().includes(row[keyExp()])\"\n                                (change)=\"onToggleEntity(row, $event.checked)\" />\n                        } @else {\n                            <mat-radio-button\n                                [disabled]=\"isSelectorsColumnDisabled()\"\n                                [checked]=\"selectedEntitiesIds().includes(row[keyExp()])\"\n                                (change)=\"onToggleEntity(row, true)\" />\n                        }\n                    </td>\n                }\n\n                @for (column of columns(); track column.propName) {\n                    @if (!column?.hidden) {\n                        <td rtElem=\"cell\" [rtMod]=\"{ copyable: column?.copyable }\">\n                            @switch (column?.type) {\n                                @case (columnTypes.CUSTOM) {\n                                    @if (customCellsTpl() && customCellsTpl()?.getTemplateByPropName(column.propName)) {\n                                        <ng-template\n                                            *ngTemplateOutlet=\"\n                                                customCellsTpl()?.getTemplateByPropName(column.propName) || null;\n                                                context: { $implicit: row }\n                                            \" />\n                                    }\n                                }\n                                @default {\n                                    <rtui-table-base-cell [row]=\"row\" [column]=\"column\" />\n                                }\n                            }\n                        </td>\n                    }\n                }\n\n                @if (rowActionsTpl() || additionalRowActionsTpl()) {\n                    <div rtBlock=\"c-table-actions\" [rtMod]=\"{ hidden: activeRowIndex() !== i }\">\n                        <div rtElem=\"container\" #rowActions>\n                            @if (additionalRowActionsTpl()) {\n                                <ng-template *ngTemplateOutlet=\"additionalRowActionsTpl() || null; context: { $implicit: row }\" />\n                            }\n\n                            @if (rowActionsTpl()) {\n                                <button\n                                    rtElem=\"action\"\n                                    aria-label=\"Icon-button for a context menu\"\n                                    mat-icon-button\n                                    [disableRipple]=\"true\"\n                                    [matMenuTriggerFor]=\"menuTpl\"\n                                    (menuOpened)=\"onMenuOpen(i)\"\n                                    (menuClosed)=\"onMenuClose()\"\n                                    (click)=\"$event.stopPropagation()\"\n                                    (mousedown)=\"$event.stopPropagation()\">\n                                    <mat-icon [rtIconOutlined]=\"true\">more_vert</mat-icon>\n                                </button>\n\n                                <mat-menu #menuTpl=\"matMenu\" xPosition=\"before\">\n                                    <ng-template *ngTemplateOutlet=\"rowActionsTpl() || null; context: { $implicit: row }\" />\n                                </mat-menu>\n                            }\n                        </div>\n                    </div>\n\n                    <div #rowActionsRowPaddingHelper></div>\n                }\n            </tr>\n        }\n    </tbody>\n</table>\n", styles: [":host{width:100%;height:100%}\n"] }]
         }], propDecorators: { rowActions: [{ type: i0.ViewChild, args: ['rowActions', { isSignal: true }] }], rowActionsHeaderPaddingHelper: [{ type: i0.ViewChild, args: ['rowActionsHeaderPaddingHelper', { isSignal: true }] }], rowActionsPaddingHelper: [{ type: i0.ViewChild, args: ['rowActionsRowPaddingHelper', { isSignal: true }] }], isMobile: [{ type: i0.Input, args: [{ isSignal: true, alias: "isMobile", required: false }] }], isTableRowsClickable: [{ type: i0.Input, args: [{ isSignal: true, alias: "isTableRowsClickable", required: false }] }], keyExp: [{ type: i0.Input, args: [{ isSignal: true, alias: "keyExp", required: false }] }], entities: [{ type: i0.Input, args: [{ isSignal: true, alias: "entities", required: true }] }], currentSortModel: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentSortModel", required: true }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: true }] }], filterAppearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterAppearance", required: false }] }], filterModel: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterModel", required: false }] }], isFiltersShown: [{ type: i0.Input, args: [{ isSignal: true, alias: "isFiltersShown", required: false }] }], rowClick: [{ type: i0.Output, args: ["rowClick"] }], rowDoubleClick: [{ type: i0.Output, args: ["rowDoubleClick"] }], sortChange: [{ type: i0.Output, args: ["sortChange"] }], filterChange: [{ type: i0.Output, args: ["filterChange"] }], customCellsTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => RtuiCustomTableCellsDirective), { isSignal: true }] }], rowActionsTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => RtuiTableRowActionsDirective), { ...{
                             read: TemplateRef,
                         }, isSignal: true }] }], additionalRowActionsTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => RtuiTableAdditionalRowActionsDirective), { ...{
                             read: TemplateRef,
                         }, isSignal: true }] }] } });
 
+const BEM_BLOCK$g = 'rtui-dynamic-selector-list-actions';
 class RtuiDynamicSelectorListActionsComponent {
     constructor() {
-        this.isMobile = input.required({ ...(ngDevMode ? { debugName: "isMobile" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.#breakpoints = inject(BreakpointService);
+        /** Экран узкий: значение входа, если приложение его дало, иначе замер кита. */
+        this.narrow = computed(() => this.isMobile() ?? !!this.#breakpoints.isMobile(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "narrow" }] : /* istanbul ignore next */ []));
+        /**
+         * Признак узкого экрана.
+         *
+         * @deprecated Кит определяет его сам — `RtuiBreakpointsService`. Вход оставлен ради
+         * приложений, которые уже его передают, и уйдёт в следующем крупном выпуске.
+         */
+        this.isMobile = input(null, { ...(ngDevMode ? { debugName: "isMobile" } : /* istanbul ignore next */ {}), transform: (value) => (value === null || value === undefined ? null : booleanAttribute(value)) });
         this.isResetButtonDisabled = input.required({ ...(ngDevMode ? { debugName: "isResetButtonDisabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         this.isClearButtonDisabled = input(false, { ...(ngDevMode ? { debugName: "isClearButtonDisabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         this.resetAction = output();
         this.clearAction = output();
     }
+    #breakpoints;
     onReset() {
         this.resetAction.emit();
     }
@@ -2558,17 +2710,26 @@ class RtuiDynamicSelectorListActionsComponent {
         this.clearAction.emit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiDynamicSelectorListActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.5", type: RtuiDynamicSelectorListActionsComponent, isStandalone: true, selector: "rtui-dynamic-selector-list-actions", inputs: { isMobile: { classPropertyName: "isMobile", publicName: "isMobile", isSignal: true, isRequired: true, transformFunction: null }, isResetButtonDisabled: { classPropertyName: "isResetButtonDisabled", publicName: "isResetButtonDisabled", isSignal: true, isRequired: true, transformFunction: null }, isClearButtonDisabled: { classPropertyName: "isClearButtonDisabled", publicName: "isClearButtonDisabled", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { resetAction: "resetAction", clearAction: "clearAction" }, ngImport: i0, template: "<ng-container rtBlock=\"rtui-dynamic-selector-list-actions\">\n    <div rtElem=\"control\">\n        <button\n            mat-icon-button\n            type=\"button\"\n            rtElem=\"item\"\n            matTooltip=\"Reset to initial list\"\n            matTooltipClass=\"custom-tooltip\"\n            matTooltipPosition=\"left\"\n            [rtMod]=\"{ active: !isResetButtonDisabled() && !disabled() }\"\n            [disabled]=\"isResetButtonDisabled() || disabled()\"\n            [matTooltipDisabled]=\"isMobile()\"\n            (click)=\"onReset()\">\n            <mat-icon rtElem=\"item-icon\" [rtIconOutlined]=\"true\">refresh</mat-icon>\n        </button>\n    </div>\n\n    <div rtElem=\"control\">\n        <button\n            mat-icon-button\n            type=\"button\"\n            rtElem=\"item\"\n            matTooltip=\"Clear list\"\n            matTooltipClass=\"custom-tooltip\"\n            matTooltipPosition=\"above\"\n            [rtMod]=\"{ active: !disabled() && !isClearButtonDisabled() }\"\n            [matTooltipDisabled]=\"isMobile()\"\n            [disabled]=\"disabled() || isClearButtonDisabled()\"\n            (click)=\"onClear()\">\n            <mat-icon rtElem=\"item-icon\" [rtIconOutlined]=\"true\">delete_forever</mat-icon>\n        </button>\n    </div>\n</ng-container>\n", styles: ["@charset \"UTF-8\";:host{--rt-dynamic-selector-list-actions-host-padding-right: .25rem;--rt-dynamic-selector-list-actions-control-padding: 0 .25rem 0 .25rem;--rt-dynamic-selector-list-actions-control-border-right: none;--rt-dynamic-selector-list-actions-control-last-child-padding: 0 0 0 .25rem;--rt-dynamic-selector-list-actions-control-last-child-border-right: none;--rt-dynamic-selector-list-actions-item-icon-size: 1.125rem;--rt-dynamic-selector-list-actions-item-active-color: var(--rt-text-accent-danger);display:flex;align-items:center;padding-right:var(--rt-dynamic-selector-list-actions-host-padding-right);margin-left:auto}:host .rtui-dynamic-selector-list-actions{display:flex;align-items:center;padding-right:var(--rt-dynamic-selector-list-actions-padding-right);margin-left:auto}:host .rtui-dynamic-selector-list-actions__control{padding:var(--rt-dynamic-selector-list-actions-control-padding);border-right:var(--rt-dynamic-selector-list-actions-control-border-right)}:host .rtui-dynamic-selector-list-actions__control:last-child{padding:var(--rt-dynamic-selector-item-control-last-child-padding);border-right:var(--rt-dynamic-selector-item-control-last-child-border-right)}:host .rtui-dynamic-selector-list-actions__item--active{color:var(--rt-dynamic-selector-list-actions-item-active-color)}:host .rtui-dynamic-selector-list-actions__item-icon{width:var(--rt-dynamic-selector-list-actions-item-icon-size);height:var(--rt-dynamic-selector-list-actions-item-icon-size);font-size:var(--rt-dynamic-selector-list-actions-item-icon-size)}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: RtIconOutlinedDirective, selector: "mat-icon[rtIconOutlined]", inputs: ["rtIconOutlined"] }, { kind: "directive", type: BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }, { kind: "directive", type: ModDirective, selector: "[rtMod]" }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.5", type: RtuiDynamicSelectorListActionsComponent, isStandalone: true, selector: "rtui-dynamic-selector-list-actions", inputs: { isMobile: { classPropertyName: "isMobile", publicName: "isMobile", isSignal: true, isRequired: false, transformFunction: null }, isResetButtonDisabled: { classPropertyName: "isResetButtonDisabled", publicName: "isResetButtonDisabled", isSignal: true, isRequired: true, transformFunction: null }, isClearButtonDisabled: { classPropertyName: "isClearButtonDisabled", publicName: "isClearButtonDisabled", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { resetAction: "resetAction", clearAction: "clearAction" }, host: { classAttribute: "rtui-dynamic-selector-list-actions" }, providers: [BreakpointService], ngImport: i0, template: "<ng-container rtBlock=\"rtui-dynamic-selector-list-actions\">\n    <div rtElem=\"control\">\n        <button\n            mat-icon-button\n            type=\"button\"\n            rtElem=\"item\"\n            matTooltip=\"Reset to initial list\"\n            matTooltipClass=\"custom-tooltip\"\n            matTooltipPosition=\"left\"\n            [rtMod]=\"{ active: !isResetButtonDisabled() && !disabled() }\"\n            [disabled]=\"isResetButtonDisabled() || disabled()\"\n            [matTooltipDisabled]=\"narrow()\"\n            (click)=\"onReset()\">\n            <mat-icon rtElem=\"item-icon\" [rtIconOutlined]=\"true\">refresh</mat-icon>\n        </button>\n    </div>\n\n    <div rtElem=\"control\">\n        <button\n            mat-icon-button\n            type=\"button\"\n            rtElem=\"item\"\n            matTooltip=\"Clear list\"\n            matTooltipClass=\"custom-tooltip\"\n            matTooltipPosition=\"above\"\n            [rtMod]=\"{ active: !disabled() && !isClearButtonDisabled() }\"\n            [matTooltipDisabled]=\"narrow()\"\n            [disabled]=\"disabled() || isClearButtonDisabled()\"\n            (click)=\"onClear()\">\n            <mat-icon rtElem=\"item-icon\" [rtIconOutlined]=\"true\">delete_forever</mat-icon>\n        </button>\n    </div>\n</ng-container>\n", styles: ["@charset \"UTF-8\";:host{--rt-dynamic-selector-list-actions-host-padding-right: .25rem;--rt-dynamic-selector-list-actions-control-padding: 0 .25rem 0 .25rem;--rt-dynamic-selector-list-actions-control-border-right: none;--rt-dynamic-selector-list-actions-control-last-child-padding: 0 0 0 .25rem;--rt-dynamic-selector-list-actions-control-last-child-border-right: none;--rt-dynamic-selector-list-actions-item-icon-size: 1.125rem;--rt-dynamic-selector-list-actions-item-active-color: var(--rt-text-accent-danger);display:flex;align-items:center;padding-right:var(--rt-dynamic-selector-list-actions-host-padding-right);margin-left:auto}:host .rtui-dynamic-selector-list-actions{display:flex;align-items:center;padding-right:var(--rt-dynamic-selector-list-actions-padding-right);margin-left:auto}:host .rtui-dynamic-selector-list-actions__control{padding:var(--rt-dynamic-selector-list-actions-control-padding);border-right:var(--rt-dynamic-selector-list-actions-control-border-right)}:host .rtui-dynamic-selector-list-actions__control:last-child{padding:var(--rt-dynamic-selector-item-control-last-child-padding);border-right:var(--rt-dynamic-selector-item-control-last-child-border-right)}:host .rtui-dynamic-selector-list-actions__item--active{color:var(--rt-dynamic-selector-list-actions-item-active-color)}:host .rtui-dynamic-selector-list-actions__item-icon{width:var(--rt-dynamic-selector-list-actions-item-icon-size);height:var(--rt-dynamic-selector-list-actions-item-icon-size);font-size:var(--rt-dynamic-selector-list-actions-item-icon-size)}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: RtIconOutlinedDirective, selector: "mat-icon[rtIconOutlined]", inputs: ["rtIconOutlined"] }, { kind: "directive", type: BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }, { kind: "directive", type: ModDirective, selector: "[rtMod]" }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiDynamicSelectorListActionsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rtui-dynamic-selector-list-actions', imports: [MatIcon, MatButton, RtIconOutlinedDirective, BlockDirective, ElemDirective, ModDirective, MatIconButton, MatTooltip], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container rtBlock=\"rtui-dynamic-selector-list-actions\">\n    <div rtElem=\"control\">\n        <button\n            mat-icon-button\n            type=\"button\"\n            rtElem=\"item\"\n            matTooltip=\"Reset to initial list\"\n            matTooltipClass=\"custom-tooltip\"\n            matTooltipPosition=\"left\"\n            [rtMod]=\"{ active: !isResetButtonDisabled() && !disabled() }\"\n            [disabled]=\"isResetButtonDisabled() || disabled()\"\n            [matTooltipDisabled]=\"isMobile()\"\n            (click)=\"onReset()\">\n            <mat-icon rtElem=\"item-icon\" [rtIconOutlined]=\"true\">refresh</mat-icon>\n        </button>\n    </div>\n\n    <div rtElem=\"control\">\n        <button\n            mat-icon-button\n            type=\"button\"\n            rtElem=\"item\"\n            matTooltip=\"Clear list\"\n            matTooltipClass=\"custom-tooltip\"\n            matTooltipPosition=\"above\"\n            [rtMod]=\"{ active: !disabled() && !isClearButtonDisabled() }\"\n            [matTooltipDisabled]=\"isMobile()\"\n            [disabled]=\"disabled() || isClearButtonDisabled()\"\n            (click)=\"onClear()\">\n            <mat-icon rtElem=\"item-icon\" [rtIconOutlined]=\"true\">delete_forever</mat-icon>\n        </button>\n    </div>\n</ng-container>\n", styles: ["@charset \"UTF-8\";:host{--rt-dynamic-selector-list-actions-host-padding-right: .25rem;--rt-dynamic-selector-list-actions-control-padding: 0 .25rem 0 .25rem;--rt-dynamic-selector-list-actions-control-border-right: none;--rt-dynamic-selector-list-actions-control-last-child-padding: 0 0 0 .25rem;--rt-dynamic-selector-list-actions-control-last-child-border-right: none;--rt-dynamic-selector-list-actions-item-icon-size: 1.125rem;--rt-dynamic-selector-list-actions-item-active-color: var(--rt-text-accent-danger);display:flex;align-items:center;padding-right:var(--rt-dynamic-selector-list-actions-host-padding-right);margin-left:auto}:host .rtui-dynamic-selector-list-actions{display:flex;align-items:center;padding-right:var(--rt-dynamic-selector-list-actions-padding-right);margin-left:auto}:host .rtui-dynamic-selector-list-actions__control{padding:var(--rt-dynamic-selector-list-actions-control-padding);border-right:var(--rt-dynamic-selector-list-actions-control-border-right)}:host .rtui-dynamic-selector-list-actions__control:last-child{padding:var(--rt-dynamic-selector-item-control-last-child-padding);border-right:var(--rt-dynamic-selector-item-control-last-child-border-right)}:host .rtui-dynamic-selector-list-actions__item--active{color:var(--rt-dynamic-selector-list-actions-item-active-color)}:host .rtui-dynamic-selector-list-actions__item-icon{width:var(--rt-dynamic-selector-list-actions-item-icon-size);height:var(--rt-dynamic-selector-list-actions-item-icon-size);font-size:var(--rt-dynamic-selector-list-actions-item-icon-size)}\n"] }]
-        }], propDecorators: { isMobile: [{ type: i0.Input, args: [{ isSignal: true, alias: "isMobile", required: true }] }], isResetButtonDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "isResetButtonDisabled", required: true }] }], isClearButtonDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "isClearButtonDisabled", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], resetAction: [{ type: i0.Output, args: ["resetAction"] }], clearAction: [{ type: i0.Output, args: ["clearAction"] }] } });
+            args: [{ selector: 'rtui-dynamic-selector-list-actions', host: { class: BEM_BLOCK$g }, imports: [MatIcon, MatButton, RtIconOutlinedDirective, BlockDirective, ElemDirective, ModDirective, MatIconButton, MatTooltip], providers: [BreakpointService], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container rtBlock=\"rtui-dynamic-selector-list-actions\">\n    <div rtElem=\"control\">\n        <button\n            mat-icon-button\n            type=\"button\"\n            rtElem=\"item\"\n            matTooltip=\"Reset to initial list\"\n            matTooltipClass=\"custom-tooltip\"\n            matTooltipPosition=\"left\"\n            [rtMod]=\"{ active: !isResetButtonDisabled() && !disabled() }\"\n            [disabled]=\"isResetButtonDisabled() || disabled()\"\n            [matTooltipDisabled]=\"narrow()\"\n            (click)=\"onReset()\">\n            <mat-icon rtElem=\"item-icon\" [rtIconOutlined]=\"true\">refresh</mat-icon>\n        </button>\n    </div>\n\n    <div rtElem=\"control\">\n        <button\n            mat-icon-button\n            type=\"button\"\n            rtElem=\"item\"\n            matTooltip=\"Clear list\"\n            matTooltipClass=\"custom-tooltip\"\n            matTooltipPosition=\"above\"\n            [rtMod]=\"{ active: !disabled() && !isClearButtonDisabled() }\"\n            [matTooltipDisabled]=\"narrow()\"\n            [disabled]=\"disabled() || isClearButtonDisabled()\"\n            (click)=\"onClear()\">\n            <mat-icon rtElem=\"item-icon\" [rtIconOutlined]=\"true\">delete_forever</mat-icon>\n        </button>\n    </div>\n</ng-container>\n", styles: ["@charset \"UTF-8\";:host{--rt-dynamic-selector-list-actions-host-padding-right: .25rem;--rt-dynamic-selector-list-actions-control-padding: 0 .25rem 0 .25rem;--rt-dynamic-selector-list-actions-control-border-right: none;--rt-dynamic-selector-list-actions-control-last-child-padding: 0 0 0 .25rem;--rt-dynamic-selector-list-actions-control-last-child-border-right: none;--rt-dynamic-selector-list-actions-item-icon-size: 1.125rem;--rt-dynamic-selector-list-actions-item-active-color: var(--rt-text-accent-danger);display:flex;align-items:center;padding-right:var(--rt-dynamic-selector-list-actions-host-padding-right);margin-left:auto}:host .rtui-dynamic-selector-list-actions{display:flex;align-items:center;padding-right:var(--rt-dynamic-selector-list-actions-padding-right);margin-left:auto}:host .rtui-dynamic-selector-list-actions__control{padding:var(--rt-dynamic-selector-list-actions-control-padding);border-right:var(--rt-dynamic-selector-list-actions-control-border-right)}:host .rtui-dynamic-selector-list-actions__control:last-child{padding:var(--rt-dynamic-selector-item-control-last-child-padding);border-right:var(--rt-dynamic-selector-item-control-last-child-border-right)}:host .rtui-dynamic-selector-list-actions__item--active{color:var(--rt-dynamic-selector-list-actions-item-active-color)}:host .rtui-dynamic-selector-list-actions__item-icon{width:var(--rt-dynamic-selector-list-actions-item-icon-size);height:var(--rt-dynamic-selector-list-actions-item-icon-size);font-size:var(--rt-dynamic-selector-list-actions-item-icon-size)}\n"] }]
+        }], propDecorators: { isMobile: [{ type: i0.Input, args: [{ isSignal: true, alias: "isMobile", required: false }] }], isResetButtonDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "isResetButtonDisabled", required: true }] }], isClearButtonDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "isClearButtonDisabled", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], resetAction: [{ type: i0.Output, args: ["resetAction"] }], clearAction: [{ type: i0.Output, args: ["clearAction"] }] } });
 
 class RtuiDynamicSelectorsDirective {
     constructor() {
-        /** Indicates if mobile view */
-        this.isMobile = input.required({ ...(ngDevMode ? { debugName: "isMobile" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.#breakpoints = inject(BreakpointService);
+        /** Экран узкий: значение входа, если приложение его дало, иначе замер кита. */
+        this.narrow = computed(() => this.isMobile() ?? !!this.#breakpoints.isMobile(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "narrow" }] : /* istanbul ignore next */ []));
+        /**
+         * Признак узкого экрана.
+         *
+         * @deprecated Кит определяет его сам — `RtuiBreakpointsService`. Вход оставлен ради
+         * приложений, которые уже его передают, и уйдёт в следующем крупном выпуске.
+         */
+        this.isMobile = input(null, { ...(ngDevMode ? { debugName: "isMobile" } : /* istanbul ignore next */ {}), transform: (value) => (value === null || value === undefined ? null : booleanAttribute(value)) });
         /** Selections control button title */
         this.buttonTitle = input('Add', { ...(ngDevMode ? { debugName: "buttonTitle" } : /* istanbul ignore next */ {}), transform: transformStringInput });
         /** Indicates if only one option can be chosen */
@@ -2592,12 +2753,13 @@ class RtuiDynamicSelectorsDirective {
         this.appearance = input('fill', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []));
     }
+    #breakpoints;
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiDynamicSelectorsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.5", type: RtuiDynamicSelectorsDirective, isStandalone: true, inputs: { isMobile: { classPropertyName: "isMobile", publicName: "isMobile", isSignal: true, isRequired: true, transformFunction: null }, buttonTitle: { classPropertyName: "buttonTitle", publicName: "buttonTitle", isSignal: true, isRequired: false, transformFunction: null }, isSingleSelection: { classPropertyName: "isSingleSelection", publicName: "isSingleSelection", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", 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 }, isPlaceholderIconOutlined: { classPropertyName: "isPlaceholderIconOutlined", publicName: "isPlaceholderIconOutlined", isSignal: true, isRequired: false, transformFunction: null }, isDeleteButtonShown: { classPropertyName: "isDeleteButtonShown", publicName: "isDeleteButtonShown", isSignal: true, isRequired: false, transformFunction: null }, isListDraggable: { classPropertyName: "isListDraggable", publicName: "isListDraggable", isSignal: true, isRequired: false, transformFunction: null }, placeholderIcon: { classPropertyName: "placeholderIcon", publicName: "placeholderIcon", isSignal: true, isRequired: false, transformFunction: null }, placeholderDescription: { classPropertyName: "placeholderDescription", publicName: "placeholderDescription", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.5", type: RtuiDynamicSelectorsDirective, isStandalone: true, inputs: { isMobile: { classPropertyName: "isMobile", publicName: "isMobile", isSignal: true, isRequired: false, transformFunction: null }, buttonTitle: { classPropertyName: "buttonTitle", publicName: "buttonTitle", isSignal: true, isRequired: false, transformFunction: null }, isSingleSelection: { classPropertyName: "isSingleSelection", publicName: "isSingleSelection", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", 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 }, isPlaceholderIconOutlined: { classPropertyName: "isPlaceholderIconOutlined", publicName: "isPlaceholderIconOutlined", isSignal: true, isRequired: false, transformFunction: null }, isDeleteButtonShown: { classPropertyName: "isDeleteButtonShown", publicName: "isDeleteButtonShown", isSignal: true, isRequired: false, transformFunction: null }, isListDraggable: { classPropertyName: "isListDraggable", publicName: "isListDraggable", isSignal: true, isRequired: false, transformFunction: null }, placeholderIcon: { classPropertyName: "placeholderIcon", publicName: "placeholderIcon", isSignal: true, isRequired: false, transformFunction: null }, placeholderDescription: { classPropertyName: "placeholderDescription", publicName: "placeholderDescription", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiDynamicSelectorsDirective, decorators: [{
             type: Directive
-        }], propDecorators: { isMobile: [{ type: i0.Input, args: [{ isSignal: true, alias: "isMobile", required: true }] }], buttonTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonTitle", required: false }] }], isSingleSelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "isSingleSelection", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], useNameBreaking: [{ type: i0.Input, args: [{ isSignal: true, alias: "useNameBreaking", required: false }] }], useTitleCase: [{ type: i0.Input, args: [{ isSignal: true, alias: "useTitleCase", required: false }] }], isPlaceholderIconOutlined: [{ type: i0.Input, args: [{ isSignal: true, alias: "isPlaceholderIconOutlined", required: false }] }], isDeleteButtonShown: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDeleteButtonShown", required: false }] }], isListDraggable: [{ type: i0.Input, args: [{ isSignal: true, alias: "isListDraggable", required: false }] }], placeholderIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholderIcon", required: false }] }], placeholderDescription: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholderDescription", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }] } });
+        }], propDecorators: { isMobile: [{ type: i0.Input, args: [{ isSignal: true, alias: "isMobile", required: false }] }], buttonTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonTitle", required: false }] }], isSingleSelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "isSingleSelection", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], useNameBreaking: [{ type: i0.Input, args: [{ isSignal: true, alias: "useNameBreaking", required: false }] }], useTitleCase: [{ type: i0.Input, args: [{ isSignal: true, alias: "useTitleCase", required: false }] }], isPlaceholderIconOutlined: [{ type: i0.Input, args: [{ isSignal: true, alias: "isPlaceholderIconOutlined", required: false }] }], isDeleteButtonShown: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDeleteButtonShown", required: false }] }], isListDraggable: [{ type: i0.Input, args: [{ isSignal: true, alias: "isListDraggable", required: false }] }], placeholderIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholderIcon", required: false }] }], placeholderDescription: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholderDescription", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }] } });
 
 var TOGGLE_SIZE_TYPE_ENUM;
 (function (TOGGLE_SIZE_TYPE_ENUM) {
@@ -2605,6 +2767,7 @@ var TOGGLE_SIZE_TYPE_ENUM;
     TOGGLE_SIZE_TYPE_ENUM["MD"] = "md";
 })(TOGGLE_SIZE_TYPE_ENUM || (TOGGLE_SIZE_TYPE_ENUM = {}));
 
+const BEM_BLOCK$f = 'rtui-toggle';
 class RtuiToggleComponent {
     constructor() {
         this.#injector = inject(Injector);
@@ -2668,7 +2831,7 @@ class RtuiToggleComponent {
         this.#cdr.markForCheck();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: RtuiToggleComponent, isStandalone: true, selector: "rtui-toggle", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, tooltipPosition: { classPropertyName: "tooltipPosition", publicName: "tooltipPosition", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, tooltipDisabled: { classPropertyName: "tooltipDisabled", publicName: "tooltipDisabled", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: RtuiToggleComponent, isStandalone: true, selector: "rtui-toggle", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, tooltipPosition: { classPropertyName: "tooltipPosition", publicName: "tooltipPosition", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, tooltipDisabled: { classPropertyName: "tooltipDisabled", publicName: "tooltipDisabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "rtui-toggle" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => RtuiToggleComponent),
@@ -2681,7 +2844,7 @@ class RtuiToggleComponent {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiToggleComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rtui-toggle', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+            args: [{ selector: 'rtui-toggle', host: { class: BEM_BLOCK$f }, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => RtuiToggleComponent),
@@ -2698,14 +2861,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                     ], template: "<label\n    rtBlock=\"rtui-toggle-container\"\n    [rtMod]=\"{ disabled: isDisabled() }\"\n    [matTooltipPosition]=\"tooltipPosition()\"\n    [matTooltip]=\"tooltip()\"\n    [matTooltipDisabled]=\"!tooltip() || isMobile() || tooltipDisabled()\">\n    <div rtBlock=\"rtui-toggle\" rtMod=\"{{ size() }}\">\n        <input type=\"checkbox\" rtElem=\"check\" [formControl]=\"formControl\" />\n\n        <b rtElem=\"switch\"></b>\n\n        <b rtElem=\"track\"></b>\n    </div>\n\n    @if (label()) {\n        <div rtElem=\"label\" [rtMod]=\"{ active: formControl.value }\">{{ label() }}</div>\n    }\n</label>\n", styles: ["@charset \"UTF-8\";:host{--rt-toggle-container-display: flex;--rt-toggle-container-align-items: center;--rt-toggle-container-justify-content: space-between;--rt-toggle-container-gap: 1rem;--rt-toggle-container-disabled-opacity: .6;--rt-toggle-toggle-border-radius: 6.25rem;--rt-toggle-toggle-background-color: var(--rt-bg-base-subtle);--rt-toggle-toggle-box-shadow: inset 0 0 .125rem .0625rem rgba(0, 0, 0, .05);--rt-toggle-toggle-check-box-shadow: inset 0 0 0 1.25rem var(--rt-control-checked);--rt-toggle-toggle-switch-border-radius: 2.25rem;--rt-toggle-toggle-switch-background-color: var(--rt-control-thumb);--rt-toggle-toggle-switch-box-shadow: 0 .0625rem .125rem rgba(0, 0, 0, .2);--rt-toggle-toggle-track-background-color: var(--rt-control-track);--rt-toggle-toggle-track-border-radius: 2.5rem;--rt-toggle-toggle-track-border: .0625rem solid var(--rt-border-neutral-medium);--rt-toggle-label-color: var(--rt-text-base-secondary);--rt-toggle-label-font-size: .875rem;--rt-toggle-label-active-color: var(--rt-text-base-strong);--rt-toggle-label-hover-color: var(--rt-text-base-strong);--rt-toggle-label-hover-cursor: pointer}:host .rtui-toggle-container{display:var(--rt-toggle-container-display);align-items:var(--rt-toggle-container-align-items);justify-content:var(--rt-toggle-container-justify-content);gap:var(--rt-toggle-container-gap)}:host .rtui-toggle-container--disabled{opacity:var(--rt-toggle-container-disabled-opacity)}:host .rtui-toggle-container--disabled .rtui-toggle,:host .rtui-toggle-container--disabled .rtui-toggle-container__label{pointer-events:none}:host .rtui-toggle-container__label{color:var(--rt-toggle-label-color);font-size:var(--rt-toggle-label-font-size)}:host .rtui-toggle-container__label:hover{color:var(--rt-toggle-label-hover-color);cursor:pointer}:host .rtui-toggle-container__label--active{color:var(--rt-toggle-label-active-color)}:host .rtui-toggle-container .rtui-toggle{position:relative;overflow:hidden;width:3.125rem;min-width:3.125rem;height:1.875rem;border-radius:var(--rt-toggle-toggle-border-radius);background-color:var(--rt-toggle-toggle-background-color);box-shadow:var(--rt-toggle-toggle-box-shadow);cursor:pointer}:host .rtui-toggle-container .rtui-toggle b{display:block}:host .rtui-toggle-container .rtui-toggle__check{display:none}:host .rtui-toggle-container .rtui-toggle__check:checked~.rtui-toggle__track{box-shadow:var(--rt-toggle-toggle-check-box-shadow)}:host .rtui-toggle-container .rtui-toggle__check:checked~.rtui-toggle__switch{right:.125rem;left:1.375rem;transition:.35s cubic-bezier(.785,.135,.15,.86);transition-delay:.05s,0s;transition-property:left,right}:host .rtui-toggle-container .rtui-toggle__switch{position:absolute;z-index:1;border-radius:var(--rt-toggle-toggle-switch-border-radius);background-color:var(--rt-toggle-toggle-switch-background-color);box-shadow:var(--rt-toggle-toggle-switch-box-shadow);inset:.125rem 1.375rem .125rem .125rem;transition:.35s cubic-bezier(.785,.135,.15,.86);transition-delay:0s,.05s;transition-property:left,right}:host .rtui-toggle-container .rtui-toggle__track{position:absolute;border:var(--rt-toggle-toggle-track-border);border-radius:var(--rt-toggle-toggle-track-border-radius);background-color:var(--rt-toggle-toggle-track-background-color);inset:0;transition:.35s cubic-bezier(.785,.135,.15,.86)}:host .rtui-toggle-container .rtui-toggle--md{width:3rem;min-width:3rem;height:1.5rem}:host .rtui-toggle-container .rtui-toggle--md .rtui-toggle__switch{right:1.625rem}:host .rtui-toggle-container .rtui-toggle--md .rtui-toggle__check:checked~.rtui-toggle__switch{right:.125rem;left:1.625rem}:host .rtui-toggle-container .rtui-toggle--sm{width:1.5rem;min-width:1.5rem;height:.875rem}:host .rtui-toggle-container .rtui-toggle--sm .rtui-toggle__switch{right:.75rem}:host .rtui-toggle-container .rtui-toggle--sm .rtui-toggle__check:checked~.rtui-toggle__switch{right:.125rem;left:.75rem}\n"] }]
         }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], tooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], tooltipPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipPosition", required: false }] }], isDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDisabled", required: false }] }], tooltipDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipDisabled", required: false }] }] } });
 
+const BEM_BLOCK$e = 'rtui-multi-selector-popup';
 class RtuiMultiSelectorPopupComponent {
     constructor() {
+        this.#breakpoints = inject(BreakpointService);
         this.#destroyRef = inject(DestroyRef);
         this.#injector = inject(Injector);
+        /** Экран узкий: значение входа, если приложение его дало, иначе замер кита. */
+        this.narrow = computed(() => this.isMobile() ?? !!this.#breakpoints.isMobile(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "narrow" }] : /* istanbul ignore next */ []));
         this.#deviceService = inject(DeviceDetectorService);
         this.oSTypes = OSTypes;
-        /** Indicates is mobile view */
-        this.isMobile = input.required({ ...(ngDevMode ? { debugName: "isMobile" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /**
+         * Признак узкого экрана.
+         *
+         * @deprecated Кит определяет его сам — `RtuiBreakpointsService`. Вход оставлен ради
+         * приложений, которые уже его передают, и уйдёт в следующем крупном выпуске.
+         */
+        this.isMobile = input(null, { ...(ngDevMode ? { debugName: "isMobile" } : /* istanbul ignore next */ {}), transform: (value) => (value === null || value === undefined ? null : booleanAttribute(value)) });
         this.entitiesToSelect = input.required({ ...(ngDevMode ? { debugName: "entitiesToSelect" } : /* istanbul ignore next */ {}), transform: (value) => transformArrayInput(value) });
         /** Material elements appearance */
         this.appearance = input.required(/* @ts-ignore */
@@ -2792,6 +2965,7 @@ class RtuiMultiSelectorPopupComponent {
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "lastSeparatedKey" }] : /* istanbul ignore next */ []));
     }
+    #breakpoints;
     #destroyRef;
     #injector;
     #deviceService;
@@ -2929,7 +3103,7 @@ class RtuiMultiSelectorPopupComponent {
         this.scrollAction.emit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiMultiSelectorPopupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: RtuiMultiSelectorPopupComponent, isStandalone: true, selector: "rtui-multi-selector-popup", inputs: { isMobile: { classPropertyName: "isMobile", publicName: "isMobile", isSignal: true, isRequired: true, transformFunction: null }, entitiesToSelect: { classPropertyName: "entitiesToSelect", publicName: "entitiesToSelect", isSignal: true, isRequired: true, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", 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 }, searchTerm: { classPropertyName: "searchTerm", publicName: "searchTerm", isSignal: true, isRequired: false, transformFunction: null }, navigateButtonTitle: { classPropertyName: "navigateButtonTitle", publicName: "navigateButtonTitle", isSignal: true, isRequired: false, transformFunction: null }, navigateLink: { classPropertyName: "navigateLink", publicName: "navigateLink", isSignal: true, isRequired: false, transformFunction: null }, isSingleSelection: { classPropertyName: "isSingleSelection", publicName: "isSingleSelection", isSignal: true, isRequired: false, transformFunction: null }, isMultiToggleShown: { classPropertyName: "isMultiToggleShown", publicName: "isMultiToggleShown", isSignal: true, isRequired: false, transformFunction: null }, isSelectAllButtonShown: { classPropertyName: "isSelectAllButtonShown", publicName: "isSelectAllButtonShown", 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 }, useNameBreaking: { classPropertyName: "useNameBreaking", publicName: "useNameBreaking", isSignal: true, isRequired: false, transformFunction: null }, isLazyLoad: { classPropertyName: "isLazyLoad", publicName: "isLazyLoad", isSignal: true, isRequired: false, transformFunction: null }, isLocalSearch: { classPropertyName: "isLocalSearch", publicName: "isLocalSearch", isSignal: true, isRequired: false, transformFunction: null }, pinnedKeys: { classPropertyName: "pinnedKeys", publicName: "pinnedKeys", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { submitAction: "submitAction", closeAction: "closeAction", searchAction: "searchAction", scrollAction: "scrollAction", temporarySelectAction: "temporarySelectAction" }, providers: [DeviceDetectorService], viewQueries: [{ propertyName: "searchInputRef", first: true, predicate: ["searchInputTpl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n    rtBlock=\"rtui-multi-selector-header\"\n    [rtMod]=\"{ simple: isSingleSelection() || !filteredEntities().length || filteredEntities().length <= 1 }\">\n    <mat-form-field subscriptSizing=\"dynamic\" [appearance]=\"appearance()\">\n        <input #searchInputTpl matInput placeholder=\"Search...\" type=\"text\" [formControl]=\"searchControl\" />\n\n        <mat-icon matPrefix rtIconOutlined>search</mat-icon>\n\n        <rtui-clear-button matSuffix [isButtonShown]=\"!!searchControl.value\" (clickAction)=\"onClearSearch()\" />\n    </mat-form-field>\n\n    @if (!isSingleSelection() && filteredEntities().length > 1 && !loading()) {\n        <div rtElem=\"controls\">\n            @if (isMultiToggleShown()) {\n                <div rtElem=\"controls-item\" rtMod=\"first\">\n                    <rtui-toggle label=\"Multi selection\" [ngModel]=\"this.isMultiSelection()\" (ngModelChange)=\"toggleMultiSelection()\" />\n\n                    @if (!isMobile()) {\n                        <mat-icon\n                            rtElem=\"controls-item-icon\"\n                            matTooltipPosition=\"above\"\n                            [rtIconOutlined]=\"true\"\n                            [matTooltip]=\"\n                                isMacOS() ? 'Also for multi selection use COMMAND button' : 'Also for multi selection use CTRL button'\n                            \">\n                            info\n                        </mat-icon>\n                    }\n\n                    @if (isMobile()) {\n                        <div rtElem=\"controls-item-info\">\n                            {{ isMacOS() ? 'Also for multi selection use COMMAND button' : 'Also for multi selection use CTRL button' }}\n                        </div>\n                    }\n                </div>\n            }\n\n            @if (isSelectAllButtonShown()) {\n                <div rtElem=\"controls-item\" rtMod=\"last\">\n                    <mat-checkbox\n                        [checked]=\"isAllSelected()\"\n                        [indeterminate]=\"!isAllSelected() && selectionControl.value.length > 0\"\n                        (change)=\"toggleSelectAll($event.checked)\">\n                        <div rtElem=\"controls-item-title\">Select all</div>\n                    </mat-checkbox>\n                </div>\n            }\n        </div>\n    }\n</div>\n\n@if ((filteredEntities()?.length || selectedEntities().length) && !loading()) {\n    <div rtBlock=\"rtui-multi-selector-options\" rtScrollDirective [active]=\"!!isLazyLoad() && !fetching()\" (scrollAction)=\"scroll()\">\n        @if (searchControl.value && selectedEntities()) {\n            @for (entity of selectedEntities(); track entity[displayExp()]; let i = $index) {\n                @if (isSingleSelection()) {\n                    <mat-radio-button\n                        rtElem=\"item\"\n                        [rtMod]=\"{ separated: i === selectedEntities().length - 1 }\"\n                        [checked]=\"selectionControl.value.includes(entity[keyExp()])\"\n                        (change)=\"onToggleSingleItem(entity, !selectionControl.value.includes(entity[keyExp()]))\">\n                        <div rtElem=\"item-title\">\n                            @if (useNameBreaking()) {\n                                {{ entity[displayExp()] | entityToString | breakString }}\n                            } @else {\n                                {{ entity[displayExp()] }}\n                            }\n                        </div>\n                    </mat-radio-button>\n                } @else {\n                    <mat-checkbox\n                        rtElem=\"item\"\n                        [rtMod]=\"{ separated: i === selectedEntities().length - 1 }\"\n                        [checked]=\"selectionControl.value.includes(entity[keyExp()])\"\n                        (click)=\"onToggleItem($event, entity, !selectionControl.value.includes(entity[keyExp()]))\">\n                        <div rtElem=\"item-title\">\n                            @if (useNameBreaking()) {\n                                {{ entity[displayExp()] | entityToString | breakString }}\n                            } @else {\n                                {{ entity[displayExp()] }}\n                            }\n                        </div>\n                    </mat-checkbox>\n                }\n            }\n        }\n\n        @if (filteredEntities()) {\n            @for (entity of filteredEntities(); track entity[displayExp()]) {\n                @if (isSingleSelection()) {\n                    <mat-radio-button\n                        rtElem=\"item\"\n                        [rtMod]=\"{ separated: entity[keyExp()] === lastSeparatedKey() }\"\n                        [checked]=\"selectionControl.value.includes(entity[keyExp()])\"\n                        (change)=\"onToggleSingleItem(entity, !selectionControl.value.includes(entity[keyExp()]))\">\n                        <div rtElem=\"item-title\">\n                            @if (useNameBreaking()) {\n                                {{ entity[displayExp()] | entityToString | breakString }}\n                            } @else {\n                                {{ entity[displayExp()] }}\n                            }\n                        </div>\n                    </mat-radio-button>\n                } @else {\n                    <mat-checkbox\n                        rtElem=\"item\"\n                        [rtMod]=\"{ separated: entity[keyExp()] === lastSeparatedKey() }\"\n                        [checked]=\"selectionControl.value.includes(entity[keyExp()])\"\n                        (click)=\"onToggleItem($event, entity, !selectionControl.value.includes(entity[keyExp()]))\">\n                        <div rtElem=\"item-title\">\n                            @if (useNameBreaking()) {\n                                {{ entity[displayExp()] | entityToString | breakString }}\n                            } @else {\n                                {{ entity[displayExp()] }}\n                            }\n                        </div>\n                    </mat-checkbox>\n                }\n            }\n        }\n\n        @if (fetching()) {\n            <div rtElem=\"loader\">\n                <mat-spinner [diameter]=\"20\" />\n            </div>\n        }\n    </div>\n} @else {\n    <div rtBlock=\"rtui-multi-selector-placeholder\">\n        @if (loading()) {\n            <rtui-spinner />\n        } @else {\n            <mat-icon rtElem=\"icon\" rtIconOutlined>search</mat-icon>\n\n            <div rtElem=\"title\">No Results</div>\n        }\n    </div>\n}\n\n<div rtBlock=\"rtui-multi-selector-footer\" [rtMod]=\"{ full: !!navigateLink() && !!navigateButtonTitle() }\">\n    @if (navigateLink() && navigateButtonTitle()) {\n        <a rtElem=\"nav-action\" [routerLink]=\"navigateLink()\">{{ navigateButtonTitle() }}</a>\n    }\n\n    <div rtElem=\"base-actions\">\n        <button mat-button type=\"button\" rtBlock=\"c-button\" (click)=\"onClose()\">Cancel</button>\n\n        <button\n            mat-flat-button\n            type=\"button\"\n            rtBlock=\"c-button\"\n            [disabled]=\"!selectionControl.value?.length || loading()\"\n            (click)=\"onSubmit()\">\n            SUBMIT\n        </button>\n    </div>\n</div>\n", styles: ["@charset \"UTF-8\";:host{--rt-multi-selector-host-width: 20rem;--rt-multi-selector-host-height: 30rem;--rt-multi-selector-host-padding: 1rem 0 1rem 1rem;--rt-multi-selector-host-box-shadow: 0 .5rem 1rem 0 var(--rt-shadow-color);--rt-multi-selector-host-border-radius: .375rem;--rt-multi-selector-host-background-color: var(--rt-bg-base-base);--rt-multi-selector-header-padding: 0 1rem 0 0;--rt-multi-selector-header-simple-padding: 0 1rem 1rem 0;--rt-multi-selector-header-controls-item-icon-margin-left: .5rem;--rt-multi-selector-header-controls-item-icon-color: var(--rt-text-base-disabled);--rt-multi-selector-header-controls-item-info-margin-left: .5rem;--rt-multi-selector-header-controls-item-info-font-size: .875rem;--rt-multi-selector-header-controls-item-info-color: var(--rt-text-base-secondary);--rt-multi-selector-header-controls-item-first-padding: 1rem 0 0 .5rem;--rt-multi-selector-header-controls-item-last-padding: 1rem 0 0 0;--rt-multi-selector-header-controls-item-last-border-bottom: solid 1px var(--rt-border-neutral-divider);--rt-multi-selector-item-label-hover-color: var(--rt-text-base-secondary);--rt-multi-selector-options-item-separated-border-bottom: solid 1px var(--rt-border-neutral-divider);--rt-multi-selector-options-item-title-max-width: 15rem;--rt-multi-selector-placeholder-gap: 1rem;--rt-multi-selector-placeholder-padding-right: 1rem;--rt-multi-selector-placeholder-icon-size: 3rem;--rt-multi-selector-placeholder-icon-color: var(--rt-text-base-secondary);--rt-multi-selector-placeholder-title-font-size: 1.5rem;--rt-multi-selector-placeholder-title-color: var(--rt-text-base-secondary);--rt-multi-selector-footer-padding: 1rem 1.5rem 0 .5rem;--rt-multi-selector-footer-gap: .5rem;--rt-multi-selector-footer-nav-action-font-size: .875rem;--rt-multi-selector-footer-nav-action-color: var(--rt-text-base-secondary);--rt-multi-selector-footer-nav-action-hover-color: var(--rt-text-base-strong);display:flex;width:var(--rt-multi-selector-host-width);height:var(--rt-multi-selector-host-height);flex-direction:column;padding:var(--rt-multi-selector-host-padding);border-radius:var(--rt-multi-selector-host-border-radius);background-color:var(--rt-multi-selector-host-background-color);box-shadow:var(--rt-multi-selector-host-box-shadow)}:host::ng-deep mat-radio-button .mdc-form-field .mdc-label{cursor:pointer}:host::ng-deep mat-radio-button .mdc-form-field:hover .mdc-label{color:var(--rt-multi-selector-item-label-hover-color)}:host::ng-deep mat-checkbox{width:fit-content}:host::ng-deep mat-checkbox .mdc-form-field:hover .mdc-label{color:var(--rt-multi-selector-item-label-hover-color)}:host .rtui-multi-selector-header{display:flex;flex-direction:column;padding:var(--rt-multi-selector-header-padding)}:host .rtui-multi-selector-header--simple{padding:var(--rt-multi-selector-header-simple-padding)}:host .rtui-multi-selector-header__controls{display:flex;flex-direction:column;align-items:flex-start}:host .rtui-multi-selector-header__controls-item--first{display:flex;flex-direction:row;padding:var(--rt-multi-selector-header-controls-item-first-padding)}:host .rtui-multi-selector-header__controls-item--last{width:100%;padding:var(--rt-multi-selector-header-controls-item-last-padding);border-bottom:var(--rt-multi-selector-header-controls-item-last-border-bottom)}:host .rtui-multi-selector-header__controls-item-icon{margin-left:var(--rt-multi-selector-header-controls-item-icon-margin-left);color:var(--rt-multi-selector-header-controls-item-icon-color)}:host .rtui-multi-selector-header__controls-item-info{margin-left:var(--rt-multi-selector-header-controls-item-info-margin-left);color:var(--rt-multi-selector-header-controls-item-info-color);font-size:var(--rt-multi-selector-header-controls-item-info-font-size)}:host .rtui-multi-selector-options{display:flex;width:100%;height:100%;flex:1 1 100%;flex-direction:column;overflow-y:auto}:host .rtui-multi-selector-options__item-title{overflow:hidden;width:100%;max-width:var(--rt-multi-selector-options-item-title-max-width);text-overflow:ellipsis;white-space:nowrap}:host .rtui-multi-selector-options__item--separated{border-bottom:var(--rt-multi-selector-options-item-separated-border-bottom)}:host .rtui-multi-selector-options__loader{display:flex;align-items:center;justify-content:center}:host .rtui-multi-selector-placeholder{display:flex;flex:1 1 100%;flex-direction:column;align-items:center;justify-content:center;padding-right:var(--rt-multi-selector-placeholder-padding-right);gap:var(--rt-multi-selector-placeholder-gap);overflow-y:auto}:host .rtui-multi-selector-placeholder__icon{width:var(--rt-multi-selector-placeholder-icon-size);height:var(--rt-multi-selector-placeholder-icon-size);color:var(--rt-multi-selector-placeholder-icon-color);font-size:var(--rt-multi-selector-placeholder-icon-size)}:host .rtui-multi-selector-placeholder__title{color:var(--rt-multi-selector-placeholder-title-color);font-size:var(--rt-multi-selector-placeholder-title-font-size)}:host .rtui-multi-selector-footer{display:flex;align-items:center;justify-content:flex-end;padding:var(--rt-multi-selector-footer-padding);gap:var(--rt-multi-selector-footer-gap)}:host .rtui-multi-selector-footer--full{justify-content:space-between}:host .rtui-multi-selector-footer__nav-action{color:var(--rt-multi-selector-footer-nav-action-color);font-size:var(--rt-multi-selector-footer-nav-action-font-size);text-decoration:none}:host .rtui-multi-selector-footer__nav-action:hover{color:var(--rt-multi-selector-footer-nav-action-hover-color)}:host .rtui-multi-selector-footer__base-actions{display:flex;gap:var(--rt-multi-selector-footer-gap)}\n"], dependencies: [{ kind: "component", type: 
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: RtuiMultiSelectorPopupComponent, isStandalone: true, selector: "rtui-multi-selector-popup", inputs: { isMobile: { classPropertyName: "isMobile", publicName: "isMobile", isSignal: true, isRequired: false, transformFunction: null }, entitiesToSelect: { classPropertyName: "entitiesToSelect", publicName: "entitiesToSelect", isSignal: true, isRequired: true, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", 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 }, searchTerm: { classPropertyName: "searchTerm", publicName: "searchTerm", isSignal: true, isRequired: false, transformFunction: null }, navigateButtonTitle: { classPropertyName: "navigateButtonTitle", publicName: "navigateButtonTitle", isSignal: true, isRequired: false, transformFunction: null }, navigateLink: { classPropertyName: "navigateLink", publicName: "navigateLink", isSignal: true, isRequired: false, transformFunction: null }, isSingleSelection: { classPropertyName: "isSingleSelection", publicName: "isSingleSelection", isSignal: true, isRequired: false, transformFunction: null }, isMultiToggleShown: { classPropertyName: "isMultiToggleShown", publicName: "isMultiToggleShown", isSignal: true, isRequired: false, transformFunction: null }, isSelectAllButtonShown: { classPropertyName: "isSelectAllButtonShown", publicName: "isSelectAllButtonShown", 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 }, useNameBreaking: { classPropertyName: "useNameBreaking", publicName: "useNameBreaking", isSignal: true, isRequired: false, transformFunction: null }, isLazyLoad: { classPropertyName: "isLazyLoad", publicName: "isLazyLoad", isSignal: true, isRequired: false, transformFunction: null }, isLocalSearch: { classPropertyName: "isLocalSearch", publicName: "isLocalSearch", isSignal: true, isRequired: false, transformFunction: null }, pinnedKeys: { classPropertyName: "pinnedKeys", publicName: "pinnedKeys", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { submitAction: "submitAction", closeAction: "closeAction", searchAction: "searchAction", scrollAction: "scrollAction", temporarySelectAction: "temporarySelectAction" }, host: { classAttribute: "rtui-multi-selector-popup" }, providers: [BreakpointService, DeviceDetectorService], viewQueries: [{ propertyName: "searchInputRef", first: true, predicate: ["searchInputTpl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n    rtBlock=\"rtui-multi-selector-header\"\n    [rtMod]=\"{ simple: isSingleSelection() || !filteredEntities().length || filteredEntities().length <= 1 }\">\n    <mat-form-field subscriptSizing=\"dynamic\" [appearance]=\"appearance()\">\n        <input #searchInputTpl matInput placeholder=\"Search...\" type=\"text\" [formControl]=\"searchControl\" />\n\n        <mat-icon matPrefix rtIconOutlined>search</mat-icon>\n\n        <rtui-clear-button matSuffix [isButtonShown]=\"!!searchControl.value\" (clickAction)=\"onClearSearch()\" />\n    </mat-form-field>\n\n    @if (!isSingleSelection() && filteredEntities().length > 1 && !loading()) {\n        <div rtElem=\"controls\">\n            @if (isMultiToggleShown()) {\n                <div rtElem=\"controls-item\" rtMod=\"first\">\n                    <rtui-toggle label=\"Multi selection\" [ngModel]=\"this.isMultiSelection()\" (ngModelChange)=\"toggleMultiSelection()\" />\n\n                    @if (!narrow()) {\n                        <mat-icon\n                            rtElem=\"controls-item-icon\"\n                            matTooltipPosition=\"above\"\n                            [rtIconOutlined]=\"true\"\n                            [matTooltip]=\"\n                                isMacOS() ? 'Also for multi selection use COMMAND button' : 'Also for multi selection use CTRL button'\n                            \">\n                            info\n                        </mat-icon>\n                    }\n\n                    @if (narrow()) {\n                        <div rtElem=\"controls-item-info\">\n                            {{ isMacOS() ? 'Also for multi selection use COMMAND button' : 'Also for multi selection use CTRL button' }}\n                        </div>\n                    }\n                </div>\n            }\n\n            @if (isSelectAllButtonShown()) {\n                <div rtElem=\"controls-item\" rtMod=\"last\">\n                    <mat-checkbox\n                        [checked]=\"isAllSelected()\"\n                        [indeterminate]=\"!isAllSelected() && selectionControl.value.length > 0\"\n                        (change)=\"toggleSelectAll($event.checked)\">\n                        <div rtElem=\"controls-item-title\">Select all</div>\n                    </mat-checkbox>\n                </div>\n            }\n        </div>\n    }\n</div>\n\n@if ((filteredEntities()?.length || selectedEntities().length) && !loading()) {\n    <div rtBlock=\"rtui-multi-selector-options\" rtScrollDirective [active]=\"!!isLazyLoad() && !fetching()\" (scrollAction)=\"scroll()\">\n        @if (searchControl.value && selectedEntities()) {\n            @for (entity of selectedEntities(); track entity[displayExp()]; let i = $index) {\n                @if (isSingleSelection()) {\n                    <mat-radio-button\n                        rtElem=\"item\"\n                        [rtMod]=\"{ separated: i === selectedEntities().length - 1 }\"\n                        [checked]=\"selectionControl.value.includes(entity[keyExp()])\"\n                        (change)=\"onToggleSingleItem(entity, !selectionControl.value.includes(entity[keyExp()]))\">\n                        <div rtElem=\"item-title\">\n                            @if (useNameBreaking()) {\n                                {{ entity[displayExp()] | entityToString | breakString }}\n                            } @else {\n                                {{ entity[displayExp()] }}\n                            }\n                        </div>\n                    </mat-radio-button>\n                } @else {\n                    <mat-checkbox\n                        rtElem=\"item\"\n                        [rtMod]=\"{ separated: i === selectedEntities().length - 1 }\"\n                        [checked]=\"selectionControl.value.includes(entity[keyExp()])\"\n                        (click)=\"onToggleItem($event, entity, !selectionControl.value.includes(entity[keyExp()]))\">\n                        <div rtElem=\"item-title\">\n                            @if (useNameBreaking()) {\n                                {{ entity[displayExp()] | entityToString | breakString }}\n                            } @else {\n                                {{ entity[displayExp()] }}\n                            }\n                        </div>\n                    </mat-checkbox>\n                }\n            }\n        }\n\n        @if (filteredEntities()) {\n            @for (entity of filteredEntities(); track entity[displayExp()]) {\n                @if (isSingleSelection()) {\n                    <mat-radio-button\n                        rtElem=\"item\"\n                        [rtMod]=\"{ separated: entity[keyExp()] === lastSeparatedKey() }\"\n                        [checked]=\"selectionControl.value.includes(entity[keyExp()])\"\n                        (change)=\"onToggleSingleItem(entity, !selectionControl.value.includes(entity[keyExp()]))\">\n                        <div rtElem=\"item-title\">\n                            @if (useNameBreaking()) {\n                                {{ entity[displayExp()] | entityToString | breakString }}\n                            } @else {\n                                {{ entity[displayExp()] }}\n                            }\n                        </div>\n                    </mat-radio-button>\n                } @else {\n                    <mat-checkbox\n                        rtElem=\"item\"\n                        [rtMod]=\"{ separated: entity[keyExp()] === lastSeparatedKey() }\"\n                        [checked]=\"selectionControl.value.includes(entity[keyExp()])\"\n                        (click)=\"onToggleItem($event, entity, !selectionControl.value.includes(entity[keyExp()]))\">\n                        <div rtElem=\"item-title\">\n                            @if (useNameBreaking()) {\n                                {{ entity[displayExp()] | entityToString | breakString }}\n                            } @else {\n                                {{ entity[displayExp()] }}\n                            }\n                        </div>\n                    </mat-checkbox>\n                }\n            }\n        }\n\n        @if (fetching()) {\n            <div rtElem=\"loader\">\n                <mat-spinner [diameter]=\"20\" />\n            </div>\n        }\n    </div>\n} @else {\n    <div rtBlock=\"rtui-multi-selector-placeholder\">\n        @if (loading()) {\n            <rtui-spinner />\n        } @else {\n            <mat-icon rtElem=\"icon\" rtIconOutlined>search</mat-icon>\n\n            <div rtElem=\"title\">No Results</div>\n        }\n    </div>\n}\n\n<div rtBlock=\"rtui-multi-selector-footer\" [rtMod]=\"{ full: !!navigateLink() && !!navigateButtonTitle() }\">\n    @if (navigateLink() && navigateButtonTitle()) {\n        <a rtElem=\"nav-action\" [routerLink]=\"navigateLink()\">{{ navigateButtonTitle() }}</a>\n    }\n\n    <div rtElem=\"base-actions\">\n        <button mat-button type=\"button\" (click)=\"onClose()\">Cancel</button>\n\n        <button mat-flat-button type=\"button\" [disabled]=\"!selectionControl.value?.length || loading()\" (click)=\"onSubmit()\">SUBMIT</button>\n    </div>\n</div>\n", styles: ["@charset \"UTF-8\";:host{--rt-multi-selector-host-width: 20rem;--rt-multi-selector-host-height: 30rem;--rt-multi-selector-host-padding: 1rem 0 1rem 1rem;--rt-multi-selector-host-box-shadow: 0 .5rem 1rem 0 var(--rt-shadow-color);--rt-multi-selector-host-border-radius: .375rem;--rt-multi-selector-host-background-color: var(--rt-bg-base-base);--rt-multi-selector-header-padding: 0 1rem 0 0;--rt-multi-selector-header-simple-padding: 0 1rem 1rem 0;--rt-multi-selector-header-controls-item-icon-margin-left: .5rem;--rt-multi-selector-header-controls-item-icon-color: var(--rt-text-base-disabled);--rt-multi-selector-header-controls-item-info-margin-left: .5rem;--rt-multi-selector-header-controls-item-info-font-size: .875rem;--rt-multi-selector-header-controls-item-info-color: var(--rt-text-base-secondary);--rt-multi-selector-header-controls-item-first-padding: 1rem 0 0 .5rem;--rt-multi-selector-header-controls-item-last-padding: 1rem 0 0 0;--rt-multi-selector-header-controls-item-last-border-bottom: solid 1px var(--rt-border-neutral-divider);--rt-multi-selector-item-label-hover-color: var(--rt-text-base-secondary);--rt-multi-selector-options-item-separated-border-bottom: solid 1px var(--rt-border-neutral-divider);--rt-multi-selector-options-item-title-max-width: 15rem;--rt-multi-selector-placeholder-gap: 1rem;--rt-multi-selector-placeholder-padding-right: 1rem;--rt-multi-selector-placeholder-icon-size: 3rem;--rt-multi-selector-placeholder-icon-color: var(--rt-text-base-secondary);--rt-multi-selector-placeholder-title-font-size: 1.5rem;--rt-multi-selector-placeholder-title-color: var(--rt-text-base-secondary);--rt-multi-selector-footer-padding: 1rem 1.5rem 0 .5rem;--rt-multi-selector-footer-gap: .5rem;--rt-multi-selector-footer-nav-action-font-size: .875rem;--rt-multi-selector-footer-nav-action-color: var(--rt-text-base-secondary);--rt-multi-selector-footer-nav-action-hover-color: var(--rt-text-base-strong);display:flex;width:var(--rt-multi-selector-host-width);height:var(--rt-multi-selector-host-height);flex-direction:column;padding:var(--rt-multi-selector-host-padding);border-radius:var(--rt-multi-selector-host-border-radius);background-color:var(--rt-multi-selector-host-background-color);box-shadow:var(--rt-multi-selector-host-box-shadow)}:host::ng-deep mat-radio-button .mdc-form-field .mdc-label{cursor:pointer}:host::ng-deep mat-radio-button .mdc-form-field:hover .mdc-label{color:var(--rt-multi-selector-item-label-hover-color)}:host::ng-deep mat-checkbox{width:fit-content}:host::ng-deep mat-checkbox .mdc-form-field:hover .mdc-label{color:var(--rt-multi-selector-item-label-hover-color)}:host .rtui-multi-selector-header{display:flex;flex-direction:column;padding:var(--rt-multi-selector-header-padding)}:host .rtui-multi-selector-header--simple{padding:var(--rt-multi-selector-header-simple-padding)}:host .rtui-multi-selector-header__controls{display:flex;flex-direction:column;align-items:flex-start}:host .rtui-multi-selector-header__controls-item--first{display:flex;flex-direction:row;padding:var(--rt-multi-selector-header-controls-item-first-padding)}:host .rtui-multi-selector-header__controls-item--last{width:100%;padding:var(--rt-multi-selector-header-controls-item-last-padding);border-bottom:var(--rt-multi-selector-header-controls-item-last-border-bottom)}:host .rtui-multi-selector-header__controls-item-icon{margin-left:var(--rt-multi-selector-header-controls-item-icon-margin-left);color:var(--rt-multi-selector-header-controls-item-icon-color)}:host .rtui-multi-selector-header__controls-item-info{margin-left:var(--rt-multi-selector-header-controls-item-info-margin-left);color:var(--rt-multi-selector-header-controls-item-info-color);font-size:var(--rt-multi-selector-header-controls-item-info-font-size)}:host .rtui-multi-selector-options{display:flex;width:100%;height:100%;flex:1 1 100%;flex-direction:column;overflow-y:auto}:host .rtui-multi-selector-options__item-title{overflow:hidden;width:100%;max-width:var(--rt-multi-selector-options-item-title-max-width);text-overflow:ellipsis;white-space:nowrap}:host .rtui-multi-selector-options__item--separated{border-bottom:var(--rt-multi-selector-options-item-separated-border-bottom)}:host .rtui-multi-selector-options__loader{display:flex;align-items:center;justify-content:center}:host .rtui-multi-selector-placeholder{display:flex;flex:1 1 100%;flex-direction:column;align-items:center;justify-content:center;padding-right:var(--rt-multi-selector-placeholder-padding-right);gap:var(--rt-multi-selector-placeholder-gap);overflow-y:auto}:host .rtui-multi-selector-placeholder__icon{width:var(--rt-multi-selector-placeholder-icon-size);height:var(--rt-multi-selector-placeholder-icon-size);color:var(--rt-multi-selector-placeholder-icon-color);font-size:var(--rt-multi-selector-placeholder-icon-size)}:host .rtui-multi-selector-placeholder__title{color:var(--rt-multi-selector-placeholder-title-color);font-size:var(--rt-multi-selector-placeholder-title-font-size)}:host .rtui-multi-selector-footer{display:flex;align-items:center;justify-content:flex-end;padding:var(--rt-multi-selector-footer-padding);gap:var(--rt-multi-selector-footer-gap)}:host .rtui-multi-selector-footer--full{justify-content:space-between}:host .rtui-multi-selector-footer__nav-action{color:var(--rt-multi-selector-footer-nav-action-color);font-size:var(--rt-multi-selector-footer-nav-action-font-size);text-decoration:none}:host .rtui-multi-selector-footer__nav-action:hover{color:var(--rt-multi-selector-footer-nav-action-hover-color)}:host .rtui-multi-selector-footer__base-actions{display:flex;gap:var(--rt-multi-selector-footer-gap)}\n"], dependencies: [{ kind: "component", type: 
                 // Material
                 MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { 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: "directive", type: MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "component", type: MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: 
                 // directives
@@ -2939,7 +3113,7 @@ class RtuiMultiSelectorPopupComponent {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiMultiSelectorPopupComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rtui-multi-selector-popup', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+            args: [{ selector: 'rtui-multi-selector-popup', host: { class: BEM_BLOCK$e }, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         // Material
                         MatButton,
                         MatTooltip,
@@ -2966,9 +3140,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                         RtuiToggleComponent,
                         RtuiSpinnerComponent,
                         EntityToStringPipe,
-                    ], providers: [DeviceDetectorService], template: "<div\n    rtBlock=\"rtui-multi-selector-header\"\n    [rtMod]=\"{ simple: isSingleSelection() || !filteredEntities().length || filteredEntities().length <= 1 }\">\n    <mat-form-field subscriptSizing=\"dynamic\" [appearance]=\"appearance()\">\n        <input #searchInputTpl matInput placeholder=\"Search...\" type=\"text\" [formControl]=\"searchControl\" />\n\n        <mat-icon matPrefix rtIconOutlined>search</mat-icon>\n\n        <rtui-clear-button matSuffix [isButtonShown]=\"!!searchControl.value\" (clickAction)=\"onClearSearch()\" />\n    </mat-form-field>\n\n    @if (!isSingleSelection() && filteredEntities().length > 1 && !loading()) {\n        <div rtElem=\"controls\">\n            @if (isMultiToggleShown()) {\n                <div rtElem=\"controls-item\" rtMod=\"first\">\n                    <rtui-toggle label=\"Multi selection\" [ngModel]=\"this.isMultiSelection()\" (ngModelChange)=\"toggleMultiSelection()\" />\n\n                    @if (!isMobile()) {\n                        <mat-icon\n                            rtElem=\"controls-item-icon\"\n                            matTooltipPosition=\"above\"\n                            [rtIconOutlined]=\"true\"\n                            [matTooltip]=\"\n                                isMacOS() ? 'Also for multi selection use COMMAND button' : 'Also for multi selection use CTRL button'\n                            \">\n                            info\n                        </mat-icon>\n                    }\n\n                    @if (isMobile()) {\n                        <div rtElem=\"controls-item-info\">\n                            {{ isMacOS() ? 'Also for multi selection use COMMAND button' : 'Also for multi selection use CTRL button' }}\n                        </div>\n                    }\n                </div>\n            }\n\n            @if (isSelectAllButtonShown()) {\n                <div rtElem=\"controls-item\" rtMod=\"last\">\n                    <mat-checkbox\n                        [checked]=\"isAllSelected()\"\n                        [indeterminate]=\"!isAllSelected() && selectionControl.value.length > 0\"\n                        (change)=\"toggleSelectAll($event.checked)\">\n                        <div rtElem=\"controls-item-title\">Select all</div>\n                    </mat-checkbox>\n                </div>\n            }\n        </div>\n    }\n</div>\n\n@if ((filteredEntities()?.length || selectedEntities().length) && !loading()) {\n    <div rtBlock=\"rtui-multi-selector-options\" rtScrollDirective [active]=\"!!isLazyLoad() && !fetching()\" (scrollAction)=\"scroll()\">\n        @if (searchControl.value && selectedEntities()) {\n            @for (entity of selectedEntities(); track entity[displayExp()]; let i = $index) {\n                @if (isSingleSelection()) {\n                    <mat-radio-button\n                        rtElem=\"item\"\n                        [rtMod]=\"{ separated: i === selectedEntities().length - 1 }\"\n                        [checked]=\"selectionControl.value.includes(entity[keyExp()])\"\n                        (change)=\"onToggleSingleItem(entity, !selectionControl.value.includes(entity[keyExp()]))\">\n                        <div rtElem=\"item-title\">\n                            @if (useNameBreaking()) {\n                                {{ entity[displayExp()] | entityToString | breakString }}\n                            } @else {\n                                {{ entity[displayExp()] }}\n                            }\n                        </div>\n                    </mat-radio-button>\n                } @else {\n                    <mat-checkbox\n                        rtElem=\"item\"\n                        [rtMod]=\"{ separated: i === selectedEntities().length - 1 }\"\n                        [checked]=\"selectionControl.value.includes(entity[keyExp()])\"\n                        (click)=\"onToggleItem($event, entity, !selectionControl.value.includes(entity[keyExp()]))\">\n                        <div rtElem=\"item-title\">\n                            @if (useNameBreaking()) {\n                                {{ entity[displayExp()] | entityToString | breakString }}\n                            } @else {\n                                {{ entity[displayExp()] }}\n                            }\n                        </div>\n                    </mat-checkbox>\n                }\n            }\n        }\n\n        @if (filteredEntities()) {\n            @for (entity of filteredEntities(); track entity[displayExp()]) {\n                @if (isSingleSelection()) {\n                    <mat-radio-button\n                        rtElem=\"item\"\n                        [rtMod]=\"{ separated: entity[keyExp()] === lastSeparatedKey() }\"\n                        [checked]=\"selectionControl.value.includes(entity[keyExp()])\"\n                        (change)=\"onToggleSingleItem(entity, !selectionControl.value.includes(entity[keyExp()]))\">\n                        <div rtElem=\"item-title\">\n                            @if (useNameBreaking()) {\n                                {{ entity[displayExp()] | entityToString | breakString }}\n                            } @else {\n                                {{ entity[displayExp()] }}\n                            }\n                        </div>\n                    </mat-radio-button>\n                } @else {\n                    <mat-checkbox\n                        rtElem=\"item\"\n                        [rtMod]=\"{ separated: entity[keyExp()] === lastSeparatedKey() }\"\n                        [checked]=\"selectionControl.value.includes(entity[keyExp()])\"\n                        (click)=\"onToggleItem($event, entity, !selectionControl.value.includes(entity[keyExp()]))\">\n                        <div rtElem=\"item-title\">\n                            @if (useNameBreaking()) {\n                                {{ entity[displayExp()] | entityToString | breakString }}\n                            } @else {\n                                {{ entity[displayExp()] }}\n                            }\n                        </div>\n                    </mat-checkbox>\n                }\n            }\n        }\n\n        @if (fetching()) {\n            <div rtElem=\"loader\">\n                <mat-spinner [diameter]=\"20\" />\n            </div>\n        }\n    </div>\n} @else {\n    <div rtBlock=\"rtui-multi-selector-placeholder\">\n        @if (loading()) {\n            <rtui-spinner />\n        } @else {\n            <mat-icon rtElem=\"icon\" rtIconOutlined>search</mat-icon>\n\n            <div rtElem=\"title\">No Results</div>\n        }\n    </div>\n}\n\n<div rtBlock=\"rtui-multi-selector-footer\" [rtMod]=\"{ full: !!navigateLink() && !!navigateButtonTitle() }\">\n    @if (navigateLink() && navigateButtonTitle()) {\n        <a rtElem=\"nav-action\" [routerLink]=\"navigateLink()\">{{ navigateButtonTitle() }}</a>\n    }\n\n    <div rtElem=\"base-actions\">\n        <button mat-button type=\"button\" rtBlock=\"c-button\" (click)=\"onClose()\">Cancel</button>\n\n        <button\n            mat-flat-button\n            type=\"button\"\n            rtBlock=\"c-button\"\n            [disabled]=\"!selectionControl.value?.length || loading()\"\n            (click)=\"onSubmit()\">\n            SUBMIT\n        </button>\n    </div>\n</div>\n", styles: ["@charset \"UTF-8\";:host{--rt-multi-selector-host-width: 20rem;--rt-multi-selector-host-height: 30rem;--rt-multi-selector-host-padding: 1rem 0 1rem 1rem;--rt-multi-selector-host-box-shadow: 0 .5rem 1rem 0 var(--rt-shadow-color);--rt-multi-selector-host-border-radius: .375rem;--rt-multi-selector-host-background-color: var(--rt-bg-base-base);--rt-multi-selector-header-padding: 0 1rem 0 0;--rt-multi-selector-header-simple-padding: 0 1rem 1rem 0;--rt-multi-selector-header-controls-item-icon-margin-left: .5rem;--rt-multi-selector-header-controls-item-icon-color: var(--rt-text-base-disabled);--rt-multi-selector-header-controls-item-info-margin-left: .5rem;--rt-multi-selector-header-controls-item-info-font-size: .875rem;--rt-multi-selector-header-controls-item-info-color: var(--rt-text-base-secondary);--rt-multi-selector-header-controls-item-first-padding: 1rem 0 0 .5rem;--rt-multi-selector-header-controls-item-last-padding: 1rem 0 0 0;--rt-multi-selector-header-controls-item-last-border-bottom: solid 1px var(--rt-border-neutral-divider);--rt-multi-selector-item-label-hover-color: var(--rt-text-base-secondary);--rt-multi-selector-options-item-separated-border-bottom: solid 1px var(--rt-border-neutral-divider);--rt-multi-selector-options-item-title-max-width: 15rem;--rt-multi-selector-placeholder-gap: 1rem;--rt-multi-selector-placeholder-padding-right: 1rem;--rt-multi-selector-placeholder-icon-size: 3rem;--rt-multi-selector-placeholder-icon-color: var(--rt-text-base-secondary);--rt-multi-selector-placeholder-title-font-size: 1.5rem;--rt-multi-selector-placeholder-title-color: var(--rt-text-base-secondary);--rt-multi-selector-footer-padding: 1rem 1.5rem 0 .5rem;--rt-multi-selector-footer-gap: .5rem;--rt-multi-selector-footer-nav-action-font-size: .875rem;--rt-multi-selector-footer-nav-action-color: var(--rt-text-base-secondary);--rt-multi-selector-footer-nav-action-hover-color: var(--rt-text-base-strong);display:flex;width:var(--rt-multi-selector-host-width);height:var(--rt-multi-selector-host-height);flex-direction:column;padding:var(--rt-multi-selector-host-padding);border-radius:var(--rt-multi-selector-host-border-radius);background-color:var(--rt-multi-selector-host-background-color);box-shadow:var(--rt-multi-selector-host-box-shadow)}:host::ng-deep mat-radio-button .mdc-form-field .mdc-label{cursor:pointer}:host::ng-deep mat-radio-button .mdc-form-field:hover .mdc-label{color:var(--rt-multi-selector-item-label-hover-color)}:host::ng-deep mat-checkbox{width:fit-content}:host::ng-deep mat-checkbox .mdc-form-field:hover .mdc-label{color:var(--rt-multi-selector-item-label-hover-color)}:host .rtui-multi-selector-header{display:flex;flex-direction:column;padding:var(--rt-multi-selector-header-padding)}:host .rtui-multi-selector-header--simple{padding:var(--rt-multi-selector-header-simple-padding)}:host .rtui-multi-selector-header__controls{display:flex;flex-direction:column;align-items:flex-start}:host .rtui-multi-selector-header__controls-item--first{display:flex;flex-direction:row;padding:var(--rt-multi-selector-header-controls-item-first-padding)}:host .rtui-multi-selector-header__controls-item--last{width:100%;padding:var(--rt-multi-selector-header-controls-item-last-padding);border-bottom:var(--rt-multi-selector-header-controls-item-last-border-bottom)}:host .rtui-multi-selector-header__controls-item-icon{margin-left:var(--rt-multi-selector-header-controls-item-icon-margin-left);color:var(--rt-multi-selector-header-controls-item-icon-color)}:host .rtui-multi-selector-header__controls-item-info{margin-left:var(--rt-multi-selector-header-controls-item-info-margin-left);color:var(--rt-multi-selector-header-controls-item-info-color);font-size:var(--rt-multi-selector-header-controls-item-info-font-size)}:host .rtui-multi-selector-options{display:flex;width:100%;height:100%;flex:1 1 100%;flex-direction:column;overflow-y:auto}:host .rtui-multi-selector-options__item-title{overflow:hidden;width:100%;max-width:var(--rt-multi-selector-options-item-title-max-width);text-overflow:ellipsis;white-space:nowrap}:host .rtui-multi-selector-options__item--separated{border-bottom:var(--rt-multi-selector-options-item-separated-border-bottom)}:host .rtui-multi-selector-options__loader{display:flex;align-items:center;justify-content:center}:host .rtui-multi-selector-placeholder{display:flex;flex:1 1 100%;flex-direction:column;align-items:center;justify-content:center;padding-right:var(--rt-multi-selector-placeholder-padding-right);gap:var(--rt-multi-selector-placeholder-gap);overflow-y:auto}:host .rtui-multi-selector-placeholder__icon{width:var(--rt-multi-selector-placeholder-icon-size);height:var(--rt-multi-selector-placeholder-icon-size);color:var(--rt-multi-selector-placeholder-icon-color);font-size:var(--rt-multi-selector-placeholder-icon-size)}:host .rtui-multi-selector-placeholder__title{color:var(--rt-multi-selector-placeholder-title-color);font-size:var(--rt-multi-selector-placeholder-title-font-size)}:host .rtui-multi-selector-footer{display:flex;align-items:center;justify-content:flex-end;padding:var(--rt-multi-selector-footer-padding);gap:var(--rt-multi-selector-footer-gap)}:host .rtui-multi-selector-footer--full{justify-content:space-between}:host .rtui-multi-selector-footer__nav-action{color:var(--rt-multi-selector-footer-nav-action-color);font-size:var(--rt-multi-selector-footer-nav-action-font-size);text-decoration:none}:host .rtui-multi-selector-footer__nav-action:hover{color:var(--rt-multi-selector-footer-nav-action-hover-color)}:host .rtui-multi-selector-footer__base-actions{display:flex;gap:var(--rt-multi-selector-footer-gap)}\n"] }]
-        }], propDecorators: { isMobile: [{ type: i0.Input, args: [{ isSignal: true, alias: "isMobile", required: true }] }], entitiesToSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "entitiesToSelect", required: true }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: true }] }], keyExp: [{ type: i0.Input, args: [{ isSignal: true, alias: "keyExp", required: true }] }], displayExp: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayExp", required: true }] }], searchTerm: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchTerm", required: false }] }], navigateButtonTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "navigateButtonTitle", required: false }] }], navigateLink: [{ type: i0.Input, args: [{ isSignal: true, alias: "navigateLink", required: false }] }], isSingleSelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "isSingleSelection", required: false }] }], isMultiToggleShown: [{ type: i0.Input, args: [{ isSignal: true, alias: "isMultiToggleShown", required: false }] }], isSelectAllButtonShown: [{ type: i0.Input, args: [{ isSignal: true, alias: "isSelectAllButtonShown", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], fetching: [{ type: i0.Input, args: [{ isSignal: true, alias: "fetching", required: false }] }], useNameBreaking: [{ type: i0.Input, args: [{ isSignal: true, alias: "useNameBreaking", required: false }] }], isLazyLoad: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLazyLoad", required: false }] }], isLocalSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLocalSearch", required: false }] }], pinnedKeys: [{ type: i0.Input, args: [{ isSignal: true, alias: "pinnedKeys", required: false }] }], submitAction: [{ type: i0.Output, args: ["submitAction"] }], closeAction: [{ type: i0.Output, args: ["closeAction"] }], searchAction: [{ type: i0.Output, args: ["searchAction"] }], scrollAction: [{ type: i0.Output, args: ["scrollAction"] }], temporarySelectAction: [{ type: i0.Output, args: ["temporarySelectAction"] }], searchInputRef: [{ type: i0.ViewChild, args: ['searchInputTpl', { isSignal: true }] }] } });
+                    ], providers: [BreakpointService, DeviceDetectorService], template: "<div\n    rtBlock=\"rtui-multi-selector-header\"\n    [rtMod]=\"{ simple: isSingleSelection() || !filteredEntities().length || filteredEntities().length <= 1 }\">\n    <mat-form-field subscriptSizing=\"dynamic\" [appearance]=\"appearance()\">\n        <input #searchInputTpl matInput placeholder=\"Search...\" type=\"text\" [formControl]=\"searchControl\" />\n\n        <mat-icon matPrefix rtIconOutlined>search</mat-icon>\n\n        <rtui-clear-button matSuffix [isButtonShown]=\"!!searchControl.value\" (clickAction)=\"onClearSearch()\" />\n    </mat-form-field>\n\n    @if (!isSingleSelection() && filteredEntities().length > 1 && !loading()) {\n        <div rtElem=\"controls\">\n            @if (isMultiToggleShown()) {\n                <div rtElem=\"controls-item\" rtMod=\"first\">\n                    <rtui-toggle label=\"Multi selection\" [ngModel]=\"this.isMultiSelection()\" (ngModelChange)=\"toggleMultiSelection()\" />\n\n                    @if (!narrow()) {\n                        <mat-icon\n                            rtElem=\"controls-item-icon\"\n                            matTooltipPosition=\"above\"\n                            [rtIconOutlined]=\"true\"\n                            [matTooltip]=\"\n                                isMacOS() ? 'Also for multi selection use COMMAND button' : 'Also for multi selection use CTRL button'\n                            \">\n                            info\n                        </mat-icon>\n                    }\n\n                    @if (narrow()) {\n                        <div rtElem=\"controls-item-info\">\n                            {{ isMacOS() ? 'Also for multi selection use COMMAND button' : 'Also for multi selection use CTRL button' }}\n                        </div>\n                    }\n                </div>\n            }\n\n            @if (isSelectAllButtonShown()) {\n                <div rtElem=\"controls-item\" rtMod=\"last\">\n                    <mat-checkbox\n                        [checked]=\"isAllSelected()\"\n                        [indeterminate]=\"!isAllSelected() && selectionControl.value.length > 0\"\n                        (change)=\"toggleSelectAll($event.checked)\">\n                        <div rtElem=\"controls-item-title\">Select all</div>\n                    </mat-checkbox>\n                </div>\n            }\n        </div>\n    }\n</div>\n\n@if ((filteredEntities()?.length || selectedEntities().length) && !loading()) {\n    <div rtBlock=\"rtui-multi-selector-options\" rtScrollDirective [active]=\"!!isLazyLoad() && !fetching()\" (scrollAction)=\"scroll()\">\n        @if (searchControl.value && selectedEntities()) {\n            @for (entity of selectedEntities(); track entity[displayExp()]; let i = $index) {\n                @if (isSingleSelection()) {\n                    <mat-radio-button\n                        rtElem=\"item\"\n                        [rtMod]=\"{ separated: i === selectedEntities().length - 1 }\"\n                        [checked]=\"selectionControl.value.includes(entity[keyExp()])\"\n                        (change)=\"onToggleSingleItem(entity, !selectionControl.value.includes(entity[keyExp()]))\">\n                        <div rtElem=\"item-title\">\n                            @if (useNameBreaking()) {\n                                {{ entity[displayExp()] | entityToString | breakString }}\n                            } @else {\n                                {{ entity[displayExp()] }}\n                            }\n                        </div>\n                    </mat-radio-button>\n                } @else {\n                    <mat-checkbox\n                        rtElem=\"item\"\n                        [rtMod]=\"{ separated: i === selectedEntities().length - 1 }\"\n                        [checked]=\"selectionControl.value.includes(entity[keyExp()])\"\n                        (click)=\"onToggleItem($event, entity, !selectionControl.value.includes(entity[keyExp()]))\">\n                        <div rtElem=\"item-title\">\n                            @if (useNameBreaking()) {\n                                {{ entity[displayExp()] | entityToString | breakString }}\n                            } @else {\n                                {{ entity[displayExp()] }}\n                            }\n                        </div>\n                    </mat-checkbox>\n                }\n            }\n        }\n\n        @if (filteredEntities()) {\n            @for (entity of filteredEntities(); track entity[displayExp()]) {\n                @if (isSingleSelection()) {\n                    <mat-radio-button\n                        rtElem=\"item\"\n                        [rtMod]=\"{ separated: entity[keyExp()] === lastSeparatedKey() }\"\n                        [checked]=\"selectionControl.value.includes(entity[keyExp()])\"\n                        (change)=\"onToggleSingleItem(entity, !selectionControl.value.includes(entity[keyExp()]))\">\n                        <div rtElem=\"item-title\">\n                            @if (useNameBreaking()) {\n                                {{ entity[displayExp()] | entityToString | breakString }}\n                            } @else {\n                                {{ entity[displayExp()] }}\n                            }\n                        </div>\n                    </mat-radio-button>\n                } @else {\n                    <mat-checkbox\n                        rtElem=\"item\"\n                        [rtMod]=\"{ separated: entity[keyExp()] === lastSeparatedKey() }\"\n                        [checked]=\"selectionControl.value.includes(entity[keyExp()])\"\n                        (click)=\"onToggleItem($event, entity, !selectionControl.value.includes(entity[keyExp()]))\">\n                        <div rtElem=\"item-title\">\n                            @if (useNameBreaking()) {\n                                {{ entity[displayExp()] | entityToString | breakString }}\n                            } @else {\n                                {{ entity[displayExp()] }}\n                            }\n                        </div>\n                    </mat-checkbox>\n                }\n            }\n        }\n\n        @if (fetching()) {\n            <div rtElem=\"loader\">\n                <mat-spinner [diameter]=\"20\" />\n            </div>\n        }\n    </div>\n} @else {\n    <div rtBlock=\"rtui-multi-selector-placeholder\">\n        @if (loading()) {\n            <rtui-spinner />\n        } @else {\n            <mat-icon rtElem=\"icon\" rtIconOutlined>search</mat-icon>\n\n            <div rtElem=\"title\">No Results</div>\n        }\n    </div>\n}\n\n<div rtBlock=\"rtui-multi-selector-footer\" [rtMod]=\"{ full: !!navigateLink() && !!navigateButtonTitle() }\">\n    @if (navigateLink() && navigateButtonTitle()) {\n        <a rtElem=\"nav-action\" [routerLink]=\"navigateLink()\">{{ navigateButtonTitle() }}</a>\n    }\n\n    <div rtElem=\"base-actions\">\n        <button mat-button type=\"button\" (click)=\"onClose()\">Cancel</button>\n\n        <button mat-flat-button type=\"button\" [disabled]=\"!selectionControl.value?.length || loading()\" (click)=\"onSubmit()\">SUBMIT</button>\n    </div>\n</div>\n", styles: ["@charset \"UTF-8\";:host{--rt-multi-selector-host-width: 20rem;--rt-multi-selector-host-height: 30rem;--rt-multi-selector-host-padding: 1rem 0 1rem 1rem;--rt-multi-selector-host-box-shadow: 0 .5rem 1rem 0 var(--rt-shadow-color);--rt-multi-selector-host-border-radius: .375rem;--rt-multi-selector-host-background-color: var(--rt-bg-base-base);--rt-multi-selector-header-padding: 0 1rem 0 0;--rt-multi-selector-header-simple-padding: 0 1rem 1rem 0;--rt-multi-selector-header-controls-item-icon-margin-left: .5rem;--rt-multi-selector-header-controls-item-icon-color: var(--rt-text-base-disabled);--rt-multi-selector-header-controls-item-info-margin-left: .5rem;--rt-multi-selector-header-controls-item-info-font-size: .875rem;--rt-multi-selector-header-controls-item-info-color: var(--rt-text-base-secondary);--rt-multi-selector-header-controls-item-first-padding: 1rem 0 0 .5rem;--rt-multi-selector-header-controls-item-last-padding: 1rem 0 0 0;--rt-multi-selector-header-controls-item-last-border-bottom: solid 1px var(--rt-border-neutral-divider);--rt-multi-selector-item-label-hover-color: var(--rt-text-base-secondary);--rt-multi-selector-options-item-separated-border-bottom: solid 1px var(--rt-border-neutral-divider);--rt-multi-selector-options-item-title-max-width: 15rem;--rt-multi-selector-placeholder-gap: 1rem;--rt-multi-selector-placeholder-padding-right: 1rem;--rt-multi-selector-placeholder-icon-size: 3rem;--rt-multi-selector-placeholder-icon-color: var(--rt-text-base-secondary);--rt-multi-selector-placeholder-title-font-size: 1.5rem;--rt-multi-selector-placeholder-title-color: var(--rt-text-base-secondary);--rt-multi-selector-footer-padding: 1rem 1.5rem 0 .5rem;--rt-multi-selector-footer-gap: .5rem;--rt-multi-selector-footer-nav-action-font-size: .875rem;--rt-multi-selector-footer-nav-action-color: var(--rt-text-base-secondary);--rt-multi-selector-footer-nav-action-hover-color: var(--rt-text-base-strong);display:flex;width:var(--rt-multi-selector-host-width);height:var(--rt-multi-selector-host-height);flex-direction:column;padding:var(--rt-multi-selector-host-padding);border-radius:var(--rt-multi-selector-host-border-radius);background-color:var(--rt-multi-selector-host-background-color);box-shadow:var(--rt-multi-selector-host-box-shadow)}:host::ng-deep mat-radio-button .mdc-form-field .mdc-label{cursor:pointer}:host::ng-deep mat-radio-button .mdc-form-field:hover .mdc-label{color:var(--rt-multi-selector-item-label-hover-color)}:host::ng-deep mat-checkbox{width:fit-content}:host::ng-deep mat-checkbox .mdc-form-field:hover .mdc-label{color:var(--rt-multi-selector-item-label-hover-color)}:host .rtui-multi-selector-header{display:flex;flex-direction:column;padding:var(--rt-multi-selector-header-padding)}:host .rtui-multi-selector-header--simple{padding:var(--rt-multi-selector-header-simple-padding)}:host .rtui-multi-selector-header__controls{display:flex;flex-direction:column;align-items:flex-start}:host .rtui-multi-selector-header__controls-item--first{display:flex;flex-direction:row;padding:var(--rt-multi-selector-header-controls-item-first-padding)}:host .rtui-multi-selector-header__controls-item--last{width:100%;padding:var(--rt-multi-selector-header-controls-item-last-padding);border-bottom:var(--rt-multi-selector-header-controls-item-last-border-bottom)}:host .rtui-multi-selector-header__controls-item-icon{margin-left:var(--rt-multi-selector-header-controls-item-icon-margin-left);color:var(--rt-multi-selector-header-controls-item-icon-color)}:host .rtui-multi-selector-header__controls-item-info{margin-left:var(--rt-multi-selector-header-controls-item-info-margin-left);color:var(--rt-multi-selector-header-controls-item-info-color);font-size:var(--rt-multi-selector-header-controls-item-info-font-size)}:host .rtui-multi-selector-options{display:flex;width:100%;height:100%;flex:1 1 100%;flex-direction:column;overflow-y:auto}:host .rtui-multi-selector-options__item-title{overflow:hidden;width:100%;max-width:var(--rt-multi-selector-options-item-title-max-width);text-overflow:ellipsis;white-space:nowrap}:host .rtui-multi-selector-options__item--separated{border-bottom:var(--rt-multi-selector-options-item-separated-border-bottom)}:host .rtui-multi-selector-options__loader{display:flex;align-items:center;justify-content:center}:host .rtui-multi-selector-placeholder{display:flex;flex:1 1 100%;flex-direction:column;align-items:center;justify-content:center;padding-right:var(--rt-multi-selector-placeholder-padding-right);gap:var(--rt-multi-selector-placeholder-gap);overflow-y:auto}:host .rtui-multi-selector-placeholder__icon{width:var(--rt-multi-selector-placeholder-icon-size);height:var(--rt-multi-selector-placeholder-icon-size);color:var(--rt-multi-selector-placeholder-icon-color);font-size:var(--rt-multi-selector-placeholder-icon-size)}:host .rtui-multi-selector-placeholder__title{color:var(--rt-multi-selector-placeholder-title-color);font-size:var(--rt-multi-selector-placeholder-title-font-size)}:host .rtui-multi-selector-footer{display:flex;align-items:center;justify-content:flex-end;padding:var(--rt-multi-selector-footer-padding);gap:var(--rt-multi-selector-footer-gap)}:host .rtui-multi-selector-footer--full{justify-content:space-between}:host .rtui-multi-selector-footer__nav-action{color:var(--rt-multi-selector-footer-nav-action-color);font-size:var(--rt-multi-selector-footer-nav-action-font-size);text-decoration:none}:host .rtui-multi-selector-footer__nav-action:hover{color:var(--rt-multi-selector-footer-nav-action-hover-color)}:host .rtui-multi-selector-footer__base-actions{display:flex;gap:var(--rt-multi-selector-footer-gap)}\n"] }]
+        }], propDecorators: { isMobile: [{ type: i0.Input, args: [{ isSignal: true, alias: "isMobile", required: false }] }], entitiesToSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "entitiesToSelect", required: true }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: true }] }], keyExp: [{ type: i0.Input, args: [{ isSignal: true, alias: "keyExp", required: true }] }], displayExp: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayExp", required: true }] }], searchTerm: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchTerm", required: false }] }], navigateButtonTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "navigateButtonTitle", required: false }] }], navigateLink: [{ type: i0.Input, args: [{ isSignal: true, alias: "navigateLink", required: false }] }], isSingleSelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "isSingleSelection", required: false }] }], isMultiToggleShown: [{ type: i0.Input, args: [{ isSignal: true, alias: "isMultiToggleShown", required: false }] }], isSelectAllButtonShown: [{ type: i0.Input, args: [{ isSignal: true, alias: "isSelectAllButtonShown", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], fetching: [{ type: i0.Input, args: [{ isSignal: true, alias: "fetching", required: false }] }], useNameBreaking: [{ type: i0.Input, args: [{ isSignal: true, alias: "useNameBreaking", required: false }] }], isLazyLoad: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLazyLoad", required: false }] }], isLocalSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLocalSearch", required: false }] }], pinnedKeys: [{ type: i0.Input, args: [{ isSignal: true, alias: "pinnedKeys", required: false }] }], submitAction: [{ type: i0.Output, args: ["submitAction"] }], closeAction: [{ type: i0.Output, args: ["closeAction"] }], searchAction: [{ type: i0.Output, args: ["searchAction"] }], scrollAction: [{ type: i0.Output, args: ["scrollAction"] }], temporarySelectAction: [{ type: i0.Output, args: ["temporarySelectAction"] }], searchInputRef: [{ type: i0.ViewChild, args: ['searchInputTpl', { isSignal: true }] }] } });
 
+const BEM_BLOCK$d = 'rtui-dynamic-selector-placeholder';
 class RtuiDynamicSelectorPlaceholderComponent {
     constructor() {
         this.icon = input('', { ...(ngDevMode ? { debugName: "icon" } : /* istanbul ignore next */ {}), transform: transformStringInput });
@@ -2983,11 +3158,11 @@ class RtuiDynamicSelectorPlaceholderComponent {
         this.submitAction.emit(trigger);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiDynamicSelectorPlaceholderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: RtuiDynamicSelectorPlaceholderComponent, isStandalone: true, selector: "rtui-dynamic-selector-placeholder", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, buttonTitle: { classPropertyName: "buttonTitle", publicName: "buttonTitle", isSignal: true, isRequired: false, transformFunction: null }, isButtonShow: { classPropertyName: "isButtonShow", publicName: "isButtonShow", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, isIconOutlined: { classPropertyName: "isIconOutlined", publicName: "isIconOutlined", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { submitAction: "submitAction" }, ngImport: i0, template: "<ng-container rtBlock=\"rtui-dynamic-selector-placeholder\">\n    @if (icon()) {\n        <mat-icon rtElem=\"icon\" [rtMod]=\"{ warn: !isButtonShow() }\" [rtIconOutlined]=\"isIconOutlined()\">{{ icon() }}</mat-icon>\n    }\n\n    @if (description()) {\n        <div rtElem=\"description\">{{ description() }}</div>\n    }\n\n    @if (isButtonShow()) {\n        <button\n            #trigger=\"cdkOverlayOrigin\"\n            cdkOverlayOrigin\n            mat-flat-button\n            type=\"button\"\n            rtBlock=\"c-button\"\n            [disabled]=\"disabled()\"\n            (click)=\"onSubmit(trigger)\">\n            <mat-icon rtIconOutlined>add</mat-icon>\n\n            {{ buttonTitle() }}\n        </button>\n    }\n</ng-container>\n", styles: ["@charset \"UTF-8\";:host{--rt-dynamic-selector-placeholder-host-width: 100%;--rt-dynamic-selector-placeholder-host-height: 100%;--rt-dynamic-selector-placeholder-host-min-height: 10rem;--rt-dynamic-selector-placeholder-host-gap: 1rem;--rt-dynamic-selector-placeholder-icon-size: 4rem;--rt-dynamic-selector-placeholder-icon-color: var(--rt-text-base-soft);--rt-dynamic-selector-placeholder-icon-warn-color: var(--rt-icon-accent-warning);--rt-dynamic-selector-placeholder-description-font-size: 1rem;--rt-dynamic-selector-placeholder-description-line-height: 1.25rem;--rt-dynamic-selector-placeholder-description-color: var(--rt-text-base-secondary);display:flex;width:var(--rt-dynamic-selector-placeholder-host-width);height:var(--rt-dynamic-selector-placeholder-host-height);min-height:var(--rt-dynamic-selector-placeholder-host-min-height);flex-direction:column;align-items:center;justify-content:center;gap:var(--rt-dynamic-selector-placeholder-host-gap)}:host .rtui-dynamic-selector-placeholder__icon{width:var(--rt-dynamic-selector-placeholder-icon-size);height:var(--rt-dynamic-selector-placeholder-icon-size);color:var(--rt-dynamic-selector-placeholder-icon-color);font-size:var(--rt-dynamic-selector-placeholder-icon-size)}:host .rtui-dynamic-selector-placeholder__icon--warn{color:var(--rt-dynamic-selector-placeholder-icon-warn-color)}:host .rtui-dynamic-selector-placeholder__description{color:var(--rt-dynamic-selector-placeholder-description-color);font-size:var(--rt-dynamic-selector-placeholder-description-font-size);line-height:var(--rt-dynamic-selector-placeholder-description-line-height)}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: RtIconOutlinedDirective, selector: "mat-icon[rtIconOutlined]", inputs: ["rtIconOutlined"] }, { kind: "directive", type: BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }, { kind: "directive", type: ModDirective, selector: "[rtMod]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: RtuiDynamicSelectorPlaceholderComponent, isStandalone: true, selector: "rtui-dynamic-selector-placeholder", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, buttonTitle: { classPropertyName: "buttonTitle", publicName: "buttonTitle", isSignal: true, isRequired: false, transformFunction: null }, isButtonShow: { classPropertyName: "isButtonShow", publicName: "isButtonShow", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, isIconOutlined: { classPropertyName: "isIconOutlined", publicName: "isIconOutlined", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { submitAction: "submitAction" }, host: { classAttribute: "rtui-dynamic-selector-placeholder" }, ngImport: i0, template: "<ng-container rtBlock=\"rtui-dynamic-selector-placeholder\">\n    @if (icon()) {\n        <mat-icon rtElem=\"icon\" [rtMod]=\"{ warn: !isButtonShow() }\" [rtIconOutlined]=\"isIconOutlined()\">{{ icon() }}</mat-icon>\n    }\n\n    @if (description()) {\n        <div rtElem=\"description\">{{ description() }}</div>\n    }\n\n    @if (isButtonShow()) {\n        <button\n            #trigger=\"cdkOverlayOrigin\"\n            cdkOverlayOrigin\n            mat-flat-button\n            type=\"button\"\n            [disabled]=\"disabled()\"\n            (click)=\"onSubmit(trigger)\">\n            <mat-icon rtIconOutlined>add</mat-icon>\n\n            {{ buttonTitle() }}\n        </button>\n    }\n</ng-container>\n", styles: ["@charset \"UTF-8\";:host{--rt-dynamic-selector-placeholder-host-width: 100%;--rt-dynamic-selector-placeholder-host-height: 100%;--rt-dynamic-selector-placeholder-host-min-height: 10rem;--rt-dynamic-selector-placeholder-host-gap: 1rem;--rt-dynamic-selector-placeholder-icon-size: 4rem;--rt-dynamic-selector-placeholder-icon-color: var(--rt-text-base-soft);--rt-dynamic-selector-placeholder-icon-warn-color: var(--rt-icon-accent-warning);--rt-dynamic-selector-placeholder-description-font-size: 1rem;--rt-dynamic-selector-placeholder-description-line-height: 1.25rem;--rt-dynamic-selector-placeholder-description-color: var(--rt-text-base-secondary);display:flex;width:var(--rt-dynamic-selector-placeholder-host-width);height:var(--rt-dynamic-selector-placeholder-host-height);min-height:var(--rt-dynamic-selector-placeholder-host-min-height);flex-direction:column;align-items:center;justify-content:center;gap:var(--rt-dynamic-selector-placeholder-host-gap)}:host .rtui-dynamic-selector-placeholder__icon{width:var(--rt-dynamic-selector-placeholder-icon-size);height:var(--rt-dynamic-selector-placeholder-icon-size);color:var(--rt-dynamic-selector-placeholder-icon-color);font-size:var(--rt-dynamic-selector-placeholder-icon-size)}:host .rtui-dynamic-selector-placeholder__icon--warn{color:var(--rt-dynamic-selector-placeholder-icon-warn-color)}:host .rtui-dynamic-selector-placeholder__description{color:var(--rt-dynamic-selector-placeholder-description-color);font-size:var(--rt-dynamic-selector-placeholder-description-font-size);line-height:var(--rt-dynamic-selector-placeholder-description-line-height)}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: RtIconOutlinedDirective, selector: "mat-icon[rtIconOutlined]", inputs: ["rtIconOutlined"] }, { kind: "directive", type: BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }, { kind: "directive", type: ModDirective, selector: "[rtMod]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiDynamicSelectorPlaceholderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rtui-dynamic-selector-placeholder', imports: [MatIcon, MatButton, CdkOverlayOrigin, RtIconOutlinedDirective, BlockDirective, ElemDirective, ModDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container rtBlock=\"rtui-dynamic-selector-placeholder\">\n    @if (icon()) {\n        <mat-icon rtElem=\"icon\" [rtMod]=\"{ warn: !isButtonShow() }\" [rtIconOutlined]=\"isIconOutlined()\">{{ icon() }}</mat-icon>\n    }\n\n    @if (description()) {\n        <div rtElem=\"description\">{{ description() }}</div>\n    }\n\n    @if (isButtonShow()) {\n        <button\n            #trigger=\"cdkOverlayOrigin\"\n            cdkOverlayOrigin\n            mat-flat-button\n            type=\"button\"\n            rtBlock=\"c-button\"\n            [disabled]=\"disabled()\"\n            (click)=\"onSubmit(trigger)\">\n            <mat-icon rtIconOutlined>add</mat-icon>\n\n            {{ buttonTitle() }}\n        </button>\n    }\n</ng-container>\n", styles: ["@charset \"UTF-8\";:host{--rt-dynamic-selector-placeholder-host-width: 100%;--rt-dynamic-selector-placeholder-host-height: 100%;--rt-dynamic-selector-placeholder-host-min-height: 10rem;--rt-dynamic-selector-placeholder-host-gap: 1rem;--rt-dynamic-selector-placeholder-icon-size: 4rem;--rt-dynamic-selector-placeholder-icon-color: var(--rt-text-base-soft);--rt-dynamic-selector-placeholder-icon-warn-color: var(--rt-icon-accent-warning);--rt-dynamic-selector-placeholder-description-font-size: 1rem;--rt-dynamic-selector-placeholder-description-line-height: 1.25rem;--rt-dynamic-selector-placeholder-description-color: var(--rt-text-base-secondary);display:flex;width:var(--rt-dynamic-selector-placeholder-host-width);height:var(--rt-dynamic-selector-placeholder-host-height);min-height:var(--rt-dynamic-selector-placeholder-host-min-height);flex-direction:column;align-items:center;justify-content:center;gap:var(--rt-dynamic-selector-placeholder-host-gap)}:host .rtui-dynamic-selector-placeholder__icon{width:var(--rt-dynamic-selector-placeholder-icon-size);height:var(--rt-dynamic-selector-placeholder-icon-size);color:var(--rt-dynamic-selector-placeholder-icon-color);font-size:var(--rt-dynamic-selector-placeholder-icon-size)}:host .rtui-dynamic-selector-placeholder__icon--warn{color:var(--rt-dynamic-selector-placeholder-icon-warn-color)}:host .rtui-dynamic-selector-placeholder__description{color:var(--rt-dynamic-selector-placeholder-description-color);font-size:var(--rt-dynamic-selector-placeholder-description-font-size);line-height:var(--rt-dynamic-selector-placeholder-description-line-height)}\n"] }]
+            args: [{ selector: 'rtui-dynamic-selector-placeholder', host: { class: BEM_BLOCK$d }, imports: [MatIcon, MatButton, CdkOverlayOrigin, RtIconOutlinedDirective, BlockDirective, ElemDirective, ModDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container rtBlock=\"rtui-dynamic-selector-placeholder\">\n    @if (icon()) {\n        <mat-icon rtElem=\"icon\" [rtMod]=\"{ warn: !isButtonShow() }\" [rtIconOutlined]=\"isIconOutlined()\">{{ icon() }}</mat-icon>\n    }\n\n    @if (description()) {\n        <div rtElem=\"description\">{{ description() }}</div>\n    }\n\n    @if (isButtonShow()) {\n        <button\n            #trigger=\"cdkOverlayOrigin\"\n            cdkOverlayOrigin\n            mat-flat-button\n            type=\"button\"\n            [disabled]=\"disabled()\"\n            (click)=\"onSubmit(trigger)\">\n            <mat-icon rtIconOutlined>add</mat-icon>\n\n            {{ buttonTitle() }}\n        </button>\n    }\n</ng-container>\n", styles: ["@charset \"UTF-8\";:host{--rt-dynamic-selector-placeholder-host-width: 100%;--rt-dynamic-selector-placeholder-host-height: 100%;--rt-dynamic-selector-placeholder-host-min-height: 10rem;--rt-dynamic-selector-placeholder-host-gap: 1rem;--rt-dynamic-selector-placeholder-icon-size: 4rem;--rt-dynamic-selector-placeholder-icon-color: var(--rt-text-base-soft);--rt-dynamic-selector-placeholder-icon-warn-color: var(--rt-icon-accent-warning);--rt-dynamic-selector-placeholder-description-font-size: 1rem;--rt-dynamic-selector-placeholder-description-line-height: 1.25rem;--rt-dynamic-selector-placeholder-description-color: var(--rt-text-base-secondary);display:flex;width:var(--rt-dynamic-selector-placeholder-host-width);height:var(--rt-dynamic-selector-placeholder-host-height);min-height:var(--rt-dynamic-selector-placeholder-host-min-height);flex-direction:column;align-items:center;justify-content:center;gap:var(--rt-dynamic-selector-placeholder-host-gap)}:host .rtui-dynamic-selector-placeholder__icon{width:var(--rt-dynamic-selector-placeholder-icon-size);height:var(--rt-dynamic-selector-placeholder-icon-size);color:var(--rt-dynamic-selector-placeholder-icon-color);font-size:var(--rt-dynamic-selector-placeholder-icon-size)}:host .rtui-dynamic-selector-placeholder__icon--warn{color:var(--rt-dynamic-selector-placeholder-icon-warn-color)}:host .rtui-dynamic-selector-placeholder__description{color:var(--rt-dynamic-selector-placeholder-description-color);font-size:var(--rt-dynamic-selector-placeholder-description-font-size);line-height:var(--rt-dynamic-selector-placeholder-description-line-height)}\n"] }]
         }], propDecorators: { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], buttonTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonTitle", required: false }] }], isButtonShow: [{ type: i0.Input, args: [{ isSignal: true, alias: "isButtonShow", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], isIconOutlined: [{ type: i0.Input, args: [{ isSignal: true, alias: "isIconOutlined", required: false }] }], submitAction: [{ type: i0.Output, args: ["submitAction"] }] } });
 
 /** Directive for row actions located outside a row menu button */
@@ -3012,14 +3187,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                     selector: '[rtuiDynamicSelectorItemTitleDirective]',
                 }]
         }] });
+const BEM_BLOCK$c = 'rtui-dynamic-selector-selected-list';
 class RtuiDynamicSelectorSelectedListComponent {
     constructor() {
+        this.#breakpoints = inject(BreakpointService);
+        /** Экран узкий: значение входа, если приложение его дало, иначе замер кита. */
+        this.narrow = computed(() => this.isMobile() ?? !!this.#breakpoints.isMobile(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "narrow" }] : /* istanbul ignore next */ []));
         this.editedItemIndex = signal(null, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "editedItemIndex" }] : /* istanbul ignore next */ []));
         this.inputRef = viewChild(MatInput, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "inputRef" }] : /* istanbul ignore next */ []));
-        /** Indicates if mobile view */
-        this.isMobile = input.required({ ...(ngDevMode ? { debugName: "isMobile" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /**
+         * Признак узкого экрана.
+         *
+         * @deprecated Кит определяет его сам — `RtuiBreakpointsService`. Вход оставлен ради
+         * приложений, которые уже его передают, и уйдёт в следующем крупном выпуске.
+         */
+        this.isMobile = input(null, { ...(ngDevMode ? { debugName: "isMobile" } : /* istanbul ignore next */ {}), transform: (value) => (value === null || value === undefined ? null : booleanAttribute(value)) });
         /** A model's field, which should be used for http-requests */
         this.keyExp = input.required(/* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "keyExp" }] : /* istanbul ignore next */ []));
@@ -3051,6 +3236,7 @@ class RtuiDynamicSelectorSelectedListComponent {
         /** Custom item title template */
         this.itemTitleTpl = contentChild(RtuiDynamicSelectorItemTitleDirective, { ...(ngDevMode ? { debugName: "itemTitleTpl" } : /* istanbul ignore next */ {}), read: TemplateRef });
     }
+    #breakpoints;
     onDelete(value) {
         this.deleteFromSelectedAction.emit(value);
     }
@@ -3067,7 +3253,7 @@ class RtuiDynamicSelectorSelectedListComponent {
         this.editedItemIndex.set(index);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiDynamicSelectorSelectedListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", 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{box-sizing:border-box;border:none;border-radius:var(--rt-dynamic-selector-item-border-radius);background:var(--mat-option-selected-state-layer-color);box-shadow:var(--rt-dynamic-selector-item-drag-preview-box-shadow)}\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: "22.0.5", type: RtuiDynamicSelectorSelectedListComponent, isStandalone: true, selector: "rtui-dynamic-selector-selected-list", inputs: { isMobile: { classPropertyName: "isMobile", publicName: "isMobile", 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 }, 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" }, host: { classAttribute: "rtui-dynamic-selector-selected-list" }, providers: [BreakpointService], 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]=\"narrow()\">\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]=\"!narrow()\"\n                        [matTooltip]=\"\n                            useNameBreaking()\n                                ? (entity[displayExp()] | entityToString | breakString)\n                                : (entity[displayExp()] | entityToString)\n                        \"\n                        [matTooltipDisabled]=\"narrow()\">\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]=\"narrow()\"\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]=\"narrow()\"\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]=\"narrow()\"\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{box-sizing:border-box;border:none;border-radius:var(--rt-dynamic-selector-item-border-radius);background:var(--mat-option-selected-state-layer-color);box-shadow:var(--rt-dynamic-selector-item-drag-preview-box-shadow)}\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
@@ -3079,7 +3265,7 @@ class RtuiDynamicSelectorSelectedListComponent {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiDynamicSelectorSelectedListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rtui-dynamic-selector-selected-list', imports: [
+            args: [{ selector: 'rtui-dynamic-selector-selected-list', host: { class: BEM_BLOCK$c }, imports: [
                         NgTemplateOutlet,
                         FormsModule,
                         ReactiveFormsModule,
@@ -3103,8 +3289,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", 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 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{box-sizing:border-box;border:none;border-radius:var(--rt-dynamic-selector-item-border-radius);background:var(--mat-option-selected-state-layer-color);box-shadow:var(--rt-dynamic-selector-item-drag-preview-box-shadow)}\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), { ...{
+                    ], providers: [BreakpointService], 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]=\"narrow()\">\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]=\"!narrow()\"\n                        [matTooltip]=\"\n                            useNameBreaking()\n                                ? (entity[displayExp()] | entityToString | breakString)\n                                : (entity[displayExp()] | entityToString)\n                        \"\n                        [matTooltipDisabled]=\"narrow()\">\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]=\"narrow()\"\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]=\"narrow()\"\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]=\"narrow()\"\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{box-sizing:border-box;border:none;border-radius:var(--rt-dynamic-selector-item-border-radius);background:var(--mat-option-selected-state-layer-color);box-shadow:var(--rt-dynamic-selector-item-drag-preview-box-shadow)}\n"] }]
+        }], propDecorators: { inputRef: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MatInput), { isSignal: true }] }], isMobile: [{ type: i0.Input, args: [{ isSignal: true, alias: "isMobile", required: false }] }], 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,
@@ -3132,6 +3318,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                     selector: '[rtuiDynamicSelectorItemTitleProjectionDirective]',
                 }]
         }] });
+const BEM_BLOCK$b = 'rtui-dynamic-selector';
 class RtuiDynamicSelectorComponent extends RtuiDynamicSelectorsDirective {
     constructor() {
         super(...arguments);
@@ -3440,7 +3627,8 @@ class RtuiDynamicSelectorComponent extends RtuiDynamicSelectorsDirective {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiDynamicSelectorComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: RtuiDynamicSelectorComponent, isStandalone: true, selector: "rtui-dynamic-selector", inputs: { keyExp: { classPropertyName: "keyExp", publicName: "keyExp", isSignal: true, isRequired: true, transformFunction: null }, displayExp: { classPropertyName: "displayExp", publicName: "displayExp", isSignal: true, isRequired: true, transformFunction: null }, entities: { classPropertyName: "entities", publicName: "entities", isSignal: true, isRequired: true, transformFunction: null }, navigateButtonTitle: { classPropertyName: "navigateButtonTitle", publicName: "navigateButtonTitle", isSignal: true, isRequired: false, transformFunction: null }, navigateLink: { classPropertyName: "navigateLink", publicName: "navigateLink", isSignal: true, isRequired: false, transformFunction: null }, readonlyEntitiesKeys: { classPropertyName: "readonlyEntitiesKeys", publicName: "readonlyEntitiesKeys", isSignal: true, isRequired: false, transformFunction: null }, chosenEntities: { classPropertyName: "chosenEntities", publicName: "chosenEntities", isSignal: true, isRequired: false, transformFunction: null }, isSelectionAvailable: { classPropertyName: "isSelectionAvailable", publicName: "isSelectionAvailable", isSignal: true, isRequired: false, transformFunction: null }, isPlaceholderShown: { classPropertyName: "isPlaceholderShown", publicName: "isPlaceholderShown", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, pending: { classPropertyName: "pending", publicName: "pending", isSignal: true, isRequired: false, transformFunction: null }, fetching: { classPropertyName: "fetching", publicName: "fetching", isSignal: true, isRequired: false, transformFunction: null }, isLazyLoad: { classPropertyName: "isLazyLoad", publicName: "isLazyLoad", isSignal: true, isRequired: false, transformFunction: null }, isLocalSearch: { classPropertyName: "isLocalSearch", publicName: "isLocalSearch", isSignal: true, isRequired: false, transformFunction: null }, isMultiToggleShown: { classPropertyName: "isMultiToggleShown", publicName: "isMultiToggleShown", isSignal: true, isRequired: false, transformFunction: null }, isSelectAllButtonShown: { classPropertyName: "isSelectAllButtonShown", publicName: "isSelectAllButtonShown", isSignal: true, isRequired: false, transformFunction: null }, isOpenPopupButtonShown: { classPropertyName: "isOpenPopupButtonShown", publicName: "isOpenPopupButtonShown", isSignal: true, isRequired: false, transformFunction: null }, searchTerm: { classPropertyName: "searchTerm", publicName: "searchTerm", isSignal: true, isRequired: false, transformFunction: null }, additionalControlChanged: { classPropertyName: "additionalControlChanged", publicName: "additionalControlChanged", isSignal: true, isRequired: false, transformFunction: null }, sortFn: { classPropertyName: "sortFn", publicName: "sortFn", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { chosenEntities: "chosenEntitiesChange", searchAction: "searchAction", scrollAction: "scrollAction", temporarySelectAction: "temporarySelectAction", resetAction: "resetAction", selectionChangeAction: "selectionChangeAction" }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: RtuiDynamicSelectorComponent, isStandalone: true, selector: "rtui-dynamic-selector", inputs: { keyExp: { classPropertyName: "keyExp", publicName: "keyExp", isSignal: true, isRequired: true, transformFunction: null }, displayExp: { classPropertyName: "displayExp", publicName: "displayExp", isSignal: true, isRequired: true, transformFunction: null }, entities: { classPropertyName: "entities", publicName: "entities", isSignal: true, isRequired: true, transformFunction: null }, navigateButtonTitle: { classPropertyName: "navigateButtonTitle", publicName: "navigateButtonTitle", isSignal: true, isRequired: false, transformFunction: null }, navigateLink: { classPropertyName: "navigateLink", publicName: "navigateLink", isSignal: true, isRequired: false, transformFunction: null }, readonlyEntitiesKeys: { classPropertyName: "readonlyEntitiesKeys", publicName: "readonlyEntitiesKeys", isSignal: true, isRequired: false, transformFunction: null }, chosenEntities: { classPropertyName: "chosenEntities", publicName: "chosenEntities", isSignal: true, isRequired: false, transformFunction: null }, isSelectionAvailable: { classPropertyName: "isSelectionAvailable", publicName: "isSelectionAvailable", isSignal: true, isRequired: false, transformFunction: null }, isPlaceholderShown: { classPropertyName: "isPlaceholderShown", publicName: "isPlaceholderShown", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, pending: { classPropertyName: "pending", publicName: "pending", isSignal: true, isRequired: false, transformFunction: null }, fetching: { classPropertyName: "fetching", publicName: "fetching", isSignal: true, isRequired: false, transformFunction: null }, isLazyLoad: { classPropertyName: "isLazyLoad", publicName: "isLazyLoad", isSignal: true, isRequired: false, transformFunction: null }, isLocalSearch: { classPropertyName: "isLocalSearch", publicName: "isLocalSearch", isSignal: true, isRequired: false, transformFunction: null }, isMultiToggleShown: { classPropertyName: "isMultiToggleShown", publicName: "isMultiToggleShown", isSignal: true, isRequired: false, transformFunction: null }, isSelectAllButtonShown: { classPropertyName: "isSelectAllButtonShown", publicName: "isSelectAllButtonShown", isSignal: true, isRequired: false, transformFunction: null }, isOpenPopupButtonShown: { classPropertyName: "isOpenPopupButtonShown", publicName: "isOpenPopupButtonShown", isSignal: true, isRequired: false, transformFunction: null }, searchTerm: { classPropertyName: "searchTerm", publicName: "searchTerm", isSignal: true, isRequired: false, transformFunction: null }, additionalControlChanged: { classPropertyName: "additionalControlChanged", publicName: "additionalControlChanged", isSignal: true, isRequired: false, transformFunction: null }, sortFn: { classPropertyName: "sortFn", publicName: "sortFn", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { chosenEntities: "chosenEntitiesChange", searchAction: "searchAction", scrollAction: "scrollAction", temporarySelectAction: "temporarySelectAction", resetAction: "resetAction", selectionChangeAction: "selectionChangeAction" }, host: { classAttribute: "rtui-dynamic-selector" }, providers: [
+            BreakpointService,
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => RtuiDynamicSelectorComponent),
@@ -3451,15 +3639,16 @@ class RtuiDynamicSelectorComponent extends RtuiDynamicSelectorsDirective {
                 useExisting: RtuiDynamicSelectorComponent,
                 multi: true,
             },
-        ], 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{display:flex;overflow:hidden;width:100%;height:100%;flex-direction:column}\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                [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]=\"['rtui-btn', 'rtui-btn-secondary-text'] | concatClasses\"\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                            [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        [disabled]=\"disabled()\"\n        [isResetButtonDisabled]=\"isResetButtonDisabled()\"\n        [isClearButtonDisabled]=\"isClearButtonDisabled()\"\n        (resetAction)=\"resetList()\"\n        (clearAction)=\"clearList()\" />\n</ng-template>\n", styles: [":host{display:flex;overflow:hidden;width:100%;height:100%;flex-direction:column}\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: "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", "pinnedKeys"], 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 }); }
+                RtuiMultiSelectorPopupComponent, selector: "rtui-multi-selector-popup", inputs: ["isMobile", "entitiesToSelect", "appearance", "keyExp", "displayExp", "searchTerm", "navigateButtonTitle", "navigateLink", "isSingleSelection", "isMultiToggleShown", "isSelectAllButtonShown", "loading", "fetching", "useNameBreaking", "isLazyLoad", "isLocalSearch", "pinnedKeys"], 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"] }, { kind: "pipe", type: ConcatClassesPipe, name: "concatClasses" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiDynamicSelectorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rtui-dynamic-selector', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+            args: [{ selector: 'rtui-dynamic-selector', host: { class: BEM_BLOCK$b }, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        ConcatClassesPipe,
                         ReactiveFormsModule,
                         NgTemplateOutlet,
                         CdkOverlayOrigin,
@@ -3476,6 +3665,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                         RtuiDynamicSelectorListActionsComponent,
                         RtuiDynamicSelectorSelectedListComponent,
                     ], providers: [
+                        BreakpointService,
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => RtuiDynamicSelectorComponent),
@@ -3486,7 +3676,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", 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\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{display:flex;overflow:hidden;width:100%;height:100%;flex-direction:column}\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                [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]=\"['rtui-btn', 'rtui-btn-secondary-text'] | concatClasses\"\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                            [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        [disabled]=\"disabled()\"\n        [isResetButtonDisabled]=\"isResetButtonDisabled()\"\n        [isClearButtonDisabled]=\"isClearButtonDisabled()\"\n        (resetAction)=\"resetList()\"\n        (clearAction)=\"clearList()\" />\n</ng-template>\n", styles: [":host{display:flex;overflow:hidden;width:100%;height:100%;flex-direction:column}\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), { ...{
@@ -3504,6 +3694,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                     selector: '[rtuiDynamicInputAdditionalControlDirective]',
                 }]
         }] });
+const BEM_BLOCK$a = 'rtui-dynamic-input';
 class RtuiDynamicInputComponent extends RtuiDynamicSelectorsDirective {
     constructor() {
         super(...arguments);
@@ -3650,7 +3841,8 @@ class RtuiDynamicInputComponent extends RtuiDynamicSelectorsDirective {
         this.isResetButtonDisabled.set(areArraysEqual(this.#initialEntities(), value));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiDynamicInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: RtuiDynamicInputComponent, isStandalone: true, selector: "rtui-dynamic-input", inputs: { isPlaceholderShown: { classPropertyName: "isPlaceholderShown", publicName: "isPlaceholderShown", isSignal: true, isRequired: false, transformFunction: null }, isInputsEditable: { classPropertyName: "isInputsEditable", publicName: "isInputsEditable", isSignal: true, isRequired: false, transformFunction: null }, inputLabel: { classPropertyName: "inputLabel", publicName: "inputLabel", isSignal: true, isRequired: false, transformFunction: null }, inputPlaceholder: { classPropertyName: "inputPlaceholder", publicName: "inputPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, readonlyEntitiesKeys: { classPropertyName: "readonlyEntitiesKeys", publicName: "readonlyEntitiesKeys", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isPlaceholderShown: "isPlaceholderShownChange" }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: RtuiDynamicInputComponent, isStandalone: true, selector: "rtui-dynamic-input", inputs: { isPlaceholderShown: { classPropertyName: "isPlaceholderShown", publicName: "isPlaceholderShown", isSignal: true, isRequired: false, transformFunction: null }, isInputsEditable: { classPropertyName: "isInputsEditable", publicName: "isInputsEditable", isSignal: true, isRequired: false, transformFunction: null }, inputLabel: { classPropertyName: "inputLabel", publicName: "inputLabel", isSignal: true, isRequired: false, transformFunction: null }, inputPlaceholder: { classPropertyName: "inputPlaceholder", publicName: "inputPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, readonlyEntitiesKeys: { classPropertyName: "readonlyEntitiesKeys", publicName: "readonlyEntitiesKeys", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isPlaceholderShown: "isPlaceholderShownChange" }, host: { classAttribute: "rtui-dynamic-input" }, providers: [
+            BreakpointService,
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => RtuiDynamicInputComponent),
@@ -3661,17 +3853,18 @@ class RtuiDynamicInputComponent extends RtuiDynamicSelectorsDirective {
                 useExisting: RtuiDynamicInputComponent,
                 multi: true,
             },
-        ], queries: [{ propertyName: "additionalControlTpl", first: true, predicate: RtuiDynamicInputAdditionalControlDirective, descendants: true, read: TemplateRef, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<form [formGroup]=\"form\">\n    <ng-container rtBlock=\"rtui-dynamic-selector\">\n        @if (isPlaceholderShown()) {\n            <rtui-dynamic-selector-placeholder\n                [icon]=\"placeholderIcon()\"\n                [description]=\"placeholderDescription()\"\n                [buttonTitle]=\"buttonTitle()\"\n                [isIconOutlined]=\"isPlaceholderIconOutlined()\"\n                (submitAction)=\"hidePlaceholder()\" />\n        } @else {\n            <rtui-dynamic-selector-selected-list\n                keyExp=\"id\"\n                displayExp=\"id\"\n                [appearance]=\"appearance()\"\n                [isMobile]=\"isMobile()\"\n                [selectedEntities]=\"selectedEntities()\"\n                [readonlyEntitiesKeys]=\"readonlyEntitiesKeys()\"\n                [isListDraggable]=\"isListDraggable()\"\n                [useNameBreaking]=\"useNameBreaking()\"\n                [isDeleteButtonShown]=\"isDeleteButtonShown()\"\n                [isItemsEditable]=\"isInputsEditable()\"\n                (changeValueAction)=\"changeEntity($event)\"\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 (isInputControlShown()) {\n                <mat-form-field [appearance]=\"appearance()\" [style.width.%]=\"100\">\n                    <mat-label>{{ inputLabel() }}</mat-label>\n\n                    <input\n                        matInput\n                        type=\"text\"\n                        formControlName=\"controlForUi\"\n                        [placeholder]=\"inputPlaceholder()\"\n                        (keydown.enter)=\"onAddEntity()\"\n                        (focusout)=\"onAddEntity()\" />\n                </mat-form-field>\n            }\n\n            <div rtElem=\"actions\">\n                @if (!isInputControlShown() && !isSingleSelection()) {\n                    <button type=\"button\" class=\"c-button c-button--txt-base--size-sm\" (click)=\"showSelectionControl()\">\n                        {{ buttonTitle() }}\n                    </button>\n                }\n\n                <rtui-dynamic-selector-list-actions\n                    [isMobile]=\"isMobile()\"\n                    [isResetButtonDisabled]=\"isResetButtonDisabled()\"\n                    [isClearButtonDisabled]=\"!form.controls.control.value?.length\"\n                    (resetAction)=\"resetList()\"\n                    (clearAction)=\"clearList()\" />\n            </div>\n        }\n    </ng-container>\n</form>\n", styles: [":host{width:100%}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { 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: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: 
+        ], queries: [{ propertyName: "additionalControlTpl", first: true, predicate: RtuiDynamicInputAdditionalControlDirective, descendants: true, read: TemplateRef, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<form [formGroup]=\"form\">\n    <ng-container rtBlock=\"rtui-dynamic-selector\">\n        @if (isPlaceholderShown()) {\n            <rtui-dynamic-selector-placeholder\n                [icon]=\"placeholderIcon()\"\n                [description]=\"placeholderDescription()\"\n                [buttonTitle]=\"buttonTitle()\"\n                [isIconOutlined]=\"isPlaceholderIconOutlined()\"\n                (submitAction)=\"hidePlaceholder()\" />\n        } @else {\n            <rtui-dynamic-selector-selected-list\n                keyExp=\"id\"\n                displayExp=\"id\"\n                [appearance]=\"appearance()\"\n                [selectedEntities]=\"selectedEntities()\"\n                [readonlyEntitiesKeys]=\"readonlyEntitiesKeys()\"\n                [isListDraggable]=\"isListDraggable()\"\n                [useNameBreaking]=\"useNameBreaking()\"\n                [isDeleteButtonShown]=\"isDeleteButtonShown()\"\n                [isItemsEditable]=\"isInputsEditable()\"\n                (changeValueAction)=\"changeEntity($event)\"\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 (isInputControlShown()) {\n                <mat-form-field [appearance]=\"appearance()\" [style.width.%]=\"100\">\n                    <mat-label>{{ inputLabel() }}</mat-label>\n\n                    <input\n                        matInput\n                        type=\"text\"\n                        formControlName=\"controlForUi\"\n                        [placeholder]=\"inputPlaceholder()\"\n                        (keydown.enter)=\"onAddEntity()\"\n                        (focusout)=\"onAddEntity()\" />\n                </mat-form-field>\n            }\n\n            <div rtElem=\"actions\">\n                @if (!isInputControlShown() && !isSingleSelection()) {\n                    <button\n                        type=\"button\"\n                        [class]=\"['rtui-btn', 'rtui-btn-secondary-text'] | concatClasses\"\n                        (click)=\"showSelectionControl()\">\n                        {{ buttonTitle() }}\n                    </button>\n                }\n\n                <rtui-dynamic-selector-list-actions\n                    [isResetButtonDisabled]=\"isResetButtonDisabled()\"\n                    [isClearButtonDisabled]=\"!form.controls.control.value?.length\"\n                    (resetAction)=\"resetList()\"\n                    (clearAction)=\"clearList()\" />\n            </div>\n        }\n    </ng-container>\n</form>\n", styles: [":host{width:100%}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { 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: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: 
                 // material
                 MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { 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: "directive", type: 
                 // directives
                 BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }, { kind: "directive", type: RtuiDynamicSelectorItemAdditionalControlDirective, selector: "[rtuiDynamicSelectorItemAdditionalControlDirective]" }, { kind: "component", type: 
                 // components
-                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 }); }
+                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"] }, { kind: "pipe", type: ConcatClassesPipe, name: "concatClasses" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiDynamicInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rtui-dynamic-input', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+            args: [{ selector: 'rtui-dynamic-input', host: { class: BEM_BLOCK$a }, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        ConcatClassesPipe,
                         NgTemplateOutlet,
                         ReactiveFormsModule,
                         // material
@@ -3687,6 +3880,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                         RtuiDynamicSelectorListActionsComponent,
                         RtuiDynamicSelectorSelectedListComponent,
                     ], providers: [
+                        BreakpointService,
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => RtuiDynamicInputComponent),
@@ -3697,11 +3891,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                             useExisting: RtuiDynamicInputComponent,
                             multi: true,
                         },
-                    ], template: "<form [formGroup]=\"form\">\n    <ng-container rtBlock=\"rtui-dynamic-selector\">\n        @if (isPlaceholderShown()) {\n            <rtui-dynamic-selector-placeholder\n                [icon]=\"placeholderIcon()\"\n                [description]=\"placeholderDescription()\"\n                [buttonTitle]=\"buttonTitle()\"\n                [isIconOutlined]=\"isPlaceholderIconOutlined()\"\n                (submitAction)=\"hidePlaceholder()\" />\n        } @else {\n            <rtui-dynamic-selector-selected-list\n                keyExp=\"id\"\n                displayExp=\"id\"\n                [appearance]=\"appearance()\"\n                [isMobile]=\"isMobile()\"\n                [selectedEntities]=\"selectedEntities()\"\n                [readonlyEntitiesKeys]=\"readonlyEntitiesKeys()\"\n                [isListDraggable]=\"isListDraggable()\"\n                [useNameBreaking]=\"useNameBreaking()\"\n                [isDeleteButtonShown]=\"isDeleteButtonShown()\"\n                [isItemsEditable]=\"isInputsEditable()\"\n                (changeValueAction)=\"changeEntity($event)\"\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 (isInputControlShown()) {\n                <mat-form-field [appearance]=\"appearance()\" [style.width.%]=\"100\">\n                    <mat-label>{{ inputLabel() }}</mat-label>\n\n                    <input\n                        matInput\n                        type=\"text\"\n                        formControlName=\"controlForUi\"\n                        [placeholder]=\"inputPlaceholder()\"\n                        (keydown.enter)=\"onAddEntity()\"\n                        (focusout)=\"onAddEntity()\" />\n                </mat-form-field>\n            }\n\n            <div rtElem=\"actions\">\n                @if (!isInputControlShown() && !isSingleSelection()) {\n                    <button type=\"button\" class=\"c-button c-button--txt-base--size-sm\" (click)=\"showSelectionControl()\">\n                        {{ buttonTitle() }}\n                    </button>\n                }\n\n                <rtui-dynamic-selector-list-actions\n                    [isMobile]=\"isMobile()\"\n                    [isResetButtonDisabled]=\"isResetButtonDisabled()\"\n                    [isClearButtonDisabled]=\"!form.controls.control.value?.length\"\n                    (resetAction)=\"resetList()\"\n                    (clearAction)=\"clearList()\" />\n            </div>\n        }\n    </ng-container>\n</form>\n", styles: [":host{width:100%}\n"] }]
+                    ], template: "<form [formGroup]=\"form\">\n    <ng-container rtBlock=\"rtui-dynamic-selector\">\n        @if (isPlaceholderShown()) {\n            <rtui-dynamic-selector-placeholder\n                [icon]=\"placeholderIcon()\"\n                [description]=\"placeholderDescription()\"\n                [buttonTitle]=\"buttonTitle()\"\n                [isIconOutlined]=\"isPlaceholderIconOutlined()\"\n                (submitAction)=\"hidePlaceholder()\" />\n        } @else {\n            <rtui-dynamic-selector-selected-list\n                keyExp=\"id\"\n                displayExp=\"id\"\n                [appearance]=\"appearance()\"\n                [selectedEntities]=\"selectedEntities()\"\n                [readonlyEntitiesKeys]=\"readonlyEntitiesKeys()\"\n                [isListDraggable]=\"isListDraggable()\"\n                [useNameBreaking]=\"useNameBreaking()\"\n                [isDeleteButtonShown]=\"isDeleteButtonShown()\"\n                [isItemsEditable]=\"isInputsEditable()\"\n                (changeValueAction)=\"changeEntity($event)\"\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 (isInputControlShown()) {\n                <mat-form-field [appearance]=\"appearance()\" [style.width.%]=\"100\">\n                    <mat-label>{{ inputLabel() }}</mat-label>\n\n                    <input\n                        matInput\n                        type=\"text\"\n                        formControlName=\"controlForUi\"\n                        [placeholder]=\"inputPlaceholder()\"\n                        (keydown.enter)=\"onAddEntity()\"\n                        (focusout)=\"onAddEntity()\" />\n                </mat-form-field>\n            }\n\n            <div rtElem=\"actions\">\n                @if (!isInputControlShown() && !isSingleSelection()) {\n                    <button\n                        type=\"button\"\n                        [class]=\"['rtui-btn', 'rtui-btn-secondary-text'] | concatClasses\"\n                        (click)=\"showSelectionControl()\">\n                        {{ buttonTitle() }}\n                    </button>\n                }\n\n                <rtui-dynamic-selector-list-actions\n                    [isResetButtonDisabled]=\"isResetButtonDisabled()\"\n                    [isClearButtonDisabled]=\"!form.controls.control.value?.length\"\n                    (resetAction)=\"resetList()\"\n                    (clearAction)=\"clearList()\" />\n            </div>\n        }\n    </ng-container>\n</form>\n", styles: [":host{width:100%}\n"] }]
         }], propDecorators: { isPlaceholderShown: [{ type: i0.Input, args: [{ isSignal: true, alias: "isPlaceholderShown", required: false }] }, { type: i0.Output, args: ["isPlaceholderShownChange"] }], isInputsEditable: [{ type: i0.Input, args: [{ isSignal: true, alias: "isInputsEditable", required: false }] }], inputLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputLabel", required: false }] }], inputPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputPlaceholder", required: false }] }], readonlyEntitiesKeys: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonlyEntitiesKeys", required: false }] }], additionalControlTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => RtuiDynamicInputAdditionalControlDirective), { ...{
                             read: TemplateRef,
                         }, isSignal: true }] }] } });
 
+const BEM_BLOCK$9 = 'rtui-test-aside';
 class RtTableConfigAsideComponent {
     constructor() {
         this.#breakpointService = inject(BreakpointService);
@@ -3774,7 +3969,7 @@ class RtTableConfigAsideComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtTableConfigAsideComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.5", type: RtTableConfigAsideComponent, isStandalone: true, selector: "rtui-test-aside", providers: [BreakpointService], ngImport: i0, template: "<rtui-aside-container\n    [isMobile]=\"isMobile()\"\n    [pending]=\"false\"\n    [isSubmitButtonDisabled]=\"!isVisibilityChanged() && !isOrderChanged() && !form.dirty\"\n    (submitAction)=\"save()\"\n    (cancelAction)=\"cancel()\">\n    <ng-container *rtuiAsideHeader rtBlock=\"c-aside-title\">\n        <div rtElem=\"txt\">Edit table configuration</div>\n        <div rtElem=\"addition\">Change columns visibility and order, show(hide) scrollbar</div>\n    </ng-container>\n    <form rtBlock=\"c-form\" [formGroup]=\"form\">\n        <div rtElem=\"item\">\n            <div rtElem=\"controls\">\n                <!-- Vertical scrollbar -->\n                <div rtElem=\"control-item\">\n                    <rtui-toggle formControlName=\"isVerticalScrollbarShown\" label=\"Vertical scrollbar shown\" />\n                </div>\n            </div>\n\n            <div rtElem=\"controls\">\n                <!-- Horizontal scrollbar -->\n                <div rtElem=\"control-item\">\n                    <rtui-toggle formControlName=\"isHorizontalScrollbarShown\" label=\"Horizontal scrollbar shown\" />\n                </div>\n            </div>\n\n            <div rtElem=\"controls\">\n                <!-- Columns config -->\n                <div rtElem=\"control-item\">\n                    <rtui-dynamic-selector\n                        keyExp=\"propName\"\n                        displayExp=\"displayName\"\n                        formControlName=\"columns\"\n                        [entities]=\"selectedColumns()\"\n                        [isMobile]=\"isMobile()\"\n                        [useNameBreaking]=\"true\"\n                        [useTitleCase]=\"true\"\n                        [isSelectionAvailable]=\"false\"\n                        [isDeleteButtonShown]=\"false\"\n                        [isListDraggable]=\"true\">\n                        <ng-container *rtuiDynamicSelectorAdditionalControlDirective=\"let entity\" rtBlock=\"rtui-dynamic-selector\">\n                            <div rtElem=\"item-control\">\n                                <button\n                                    mat-icon-button\n                                    type=\"button\"\n                                    aria-label=\"Icon-button for visibility indication\"\n                                    rtElem=\"item-control-button\"\n                                    matTooltip=\"{{ entity.hidden ? 'Hidden, click to show' : 'Shown, click to hide' }}\"\n                                    matTooltipPosition=\"left\"\n                                    [matTooltipDisabled]=\"isMobile()\"\n                                    (click)=\"visibilityChange(entity)\">\n                                    <mat-icon [rtIconOutlined]=\"true\">\n                                        {{ entity.hidden ? 'visibility_off' : 'visibility' }}\n                                    </mat-icon>\n                                </button>\n                            </div>\n                        </ng-container>\n                    </rtui-dynamic-selector>\n                </div>\n            </div>\n        </div>\n    </form>\n</rtui-aside-container>\n", styles: [":host{width:100%;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { 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: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: 
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.5", type: RtTableConfigAsideComponent, isStandalone: true, selector: "rtui-test-aside", host: { classAttribute: "rtui-test-aside" }, providers: [BreakpointService], ngImport: i0, template: "<rtui-aside-container\n    [pending]=\"false\"\n    [isSubmitButtonDisabled]=\"!isVisibilityChanged() && !isOrderChanged() && !form.dirty\"\n    (submitAction)=\"save()\"\n    (cancelAction)=\"cancel()\">\n    <ng-container *rtuiAsideHeader rtBlock=\"c-aside-title\">\n        <div rtElem=\"txt\">Edit table configuration</div>\n        <div rtElem=\"addition\">Change columns visibility and order, show(hide) scrollbar</div>\n    </ng-container>\n    <form rtBlock=\"c-form\" [formGroup]=\"form\">\n        <div rtElem=\"item\">\n            <div rtElem=\"controls\">\n                <!-- Vertical scrollbar -->\n                <div rtElem=\"control-item\">\n                    <rtui-toggle formControlName=\"isVerticalScrollbarShown\" label=\"Vertical scrollbar shown\" />\n                </div>\n            </div>\n\n            <div rtElem=\"controls\">\n                <!-- Horizontal scrollbar -->\n                <div rtElem=\"control-item\">\n                    <rtui-toggle formControlName=\"isHorizontalScrollbarShown\" label=\"Horizontal scrollbar shown\" />\n                </div>\n            </div>\n\n            <div rtElem=\"controls\">\n                <!-- Columns config -->\n                <div rtElem=\"control-item\">\n                    <rtui-dynamic-selector\n                        keyExp=\"propName\"\n                        displayExp=\"displayName\"\n                        formControlName=\"columns\"\n                        [entities]=\"selectedColumns()\"\n                        [useNameBreaking]=\"true\"\n                        [useTitleCase]=\"true\"\n                        [isSelectionAvailable]=\"false\"\n                        [isDeleteButtonShown]=\"false\"\n                        [isListDraggable]=\"true\">\n                        <ng-container *rtuiDynamicSelectorAdditionalControlDirective=\"let entity\" rtBlock=\"rtui-dynamic-selector\">\n                            <div rtElem=\"item-control\">\n                                <button\n                                    mat-icon-button\n                                    type=\"button\"\n                                    aria-label=\"Icon-button for visibility indication\"\n                                    rtElem=\"item-control-button\"\n                                    matTooltip=\"{{ entity.hidden ? 'Hidden, click to show' : 'Shown, click to hide' }}\"\n                                    matTooltipPosition=\"left\"\n                                    [matTooltipDisabled]=\"isMobile()\"\n                                    (click)=\"visibilityChange(entity)\">\n                                    <mat-icon [rtIconOutlined]=\"true\">\n                                        {{ entity.hidden ? 'visibility_off' : 'visibility' }}\n                                    </mat-icon>\n                                </button>\n                            </div>\n                        </ng-container>\n                    </rtui-dynamic-selector>\n                </div>\n            </div>\n        </div>\n    </form>\n</rtui-aside-container>\n", styles: [":host{width:100%;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { 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: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: 
                 // directives
                 BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }, { kind: "directive", type: RtuiAsideContainerHeaderDirective, selector: "[rtuiAsideHeader]" }, { kind: "directive", type: RtuiDynamicSelectorAdditionalControlDirective, selector: "[rtuiDynamicSelectorAdditionalControlDirective]" }, { kind: "directive", type: RtIconOutlinedDirective, selector: "mat-icon[rtIconOutlined]", inputs: ["rtIconOutlined"] }, { kind: "component", type: 
                 // standalone components
@@ -3782,7 +3977,7 @@ class RtTableConfigAsideComponent {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtTableConfigAsideComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rtui-test-aside', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+            args: [{ selector: 'rtui-test-aside', host: { class: BEM_BLOCK$9 }, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         ReactiveFormsModule,
                         MatTooltip,
                         MatIcon,
@@ -3797,7 +3992,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                         RtuiAsideContainerComponent,
                         RtuiDynamicSelectorComponent,
                         RtuiToggleComponent,
-                    ], providers: [BreakpointService], template: "<rtui-aside-container\n    [isMobile]=\"isMobile()\"\n    [pending]=\"false\"\n    [isSubmitButtonDisabled]=\"!isVisibilityChanged() && !isOrderChanged() && !form.dirty\"\n    (submitAction)=\"save()\"\n    (cancelAction)=\"cancel()\">\n    <ng-container *rtuiAsideHeader rtBlock=\"c-aside-title\">\n        <div rtElem=\"txt\">Edit table configuration</div>\n        <div rtElem=\"addition\">Change columns visibility and order, show(hide) scrollbar</div>\n    </ng-container>\n    <form rtBlock=\"c-form\" [formGroup]=\"form\">\n        <div rtElem=\"item\">\n            <div rtElem=\"controls\">\n                <!-- Vertical scrollbar -->\n                <div rtElem=\"control-item\">\n                    <rtui-toggle formControlName=\"isVerticalScrollbarShown\" label=\"Vertical scrollbar shown\" />\n                </div>\n            </div>\n\n            <div rtElem=\"controls\">\n                <!-- Horizontal scrollbar -->\n                <div rtElem=\"control-item\">\n                    <rtui-toggle formControlName=\"isHorizontalScrollbarShown\" label=\"Horizontal scrollbar shown\" />\n                </div>\n            </div>\n\n            <div rtElem=\"controls\">\n                <!-- Columns config -->\n                <div rtElem=\"control-item\">\n                    <rtui-dynamic-selector\n                        keyExp=\"propName\"\n                        displayExp=\"displayName\"\n                        formControlName=\"columns\"\n                        [entities]=\"selectedColumns()\"\n                        [isMobile]=\"isMobile()\"\n                        [useNameBreaking]=\"true\"\n                        [useTitleCase]=\"true\"\n                        [isSelectionAvailable]=\"false\"\n                        [isDeleteButtonShown]=\"false\"\n                        [isListDraggable]=\"true\">\n                        <ng-container *rtuiDynamicSelectorAdditionalControlDirective=\"let entity\" rtBlock=\"rtui-dynamic-selector\">\n                            <div rtElem=\"item-control\">\n                                <button\n                                    mat-icon-button\n                                    type=\"button\"\n                                    aria-label=\"Icon-button for visibility indication\"\n                                    rtElem=\"item-control-button\"\n                                    matTooltip=\"{{ entity.hidden ? 'Hidden, click to show' : 'Shown, click to hide' }}\"\n                                    matTooltipPosition=\"left\"\n                                    [matTooltipDisabled]=\"isMobile()\"\n                                    (click)=\"visibilityChange(entity)\">\n                                    <mat-icon [rtIconOutlined]=\"true\">\n                                        {{ entity.hidden ? 'visibility_off' : 'visibility' }}\n                                    </mat-icon>\n                                </button>\n                            </div>\n                        </ng-container>\n                    </rtui-dynamic-selector>\n                </div>\n            </div>\n        </div>\n    </form>\n</rtui-aside-container>\n", styles: [":host{width:100%;height:100%}\n"] }]
+                    ], providers: [BreakpointService], template: "<rtui-aside-container\n    [pending]=\"false\"\n    [isSubmitButtonDisabled]=\"!isVisibilityChanged() && !isOrderChanged() && !form.dirty\"\n    (submitAction)=\"save()\"\n    (cancelAction)=\"cancel()\">\n    <ng-container *rtuiAsideHeader rtBlock=\"c-aside-title\">\n        <div rtElem=\"txt\">Edit table configuration</div>\n        <div rtElem=\"addition\">Change columns visibility and order, show(hide) scrollbar</div>\n    </ng-container>\n    <form rtBlock=\"c-form\" [formGroup]=\"form\">\n        <div rtElem=\"item\">\n            <div rtElem=\"controls\">\n                <!-- Vertical scrollbar -->\n                <div rtElem=\"control-item\">\n                    <rtui-toggle formControlName=\"isVerticalScrollbarShown\" label=\"Vertical scrollbar shown\" />\n                </div>\n            </div>\n\n            <div rtElem=\"controls\">\n                <!-- Horizontal scrollbar -->\n                <div rtElem=\"control-item\">\n                    <rtui-toggle formControlName=\"isHorizontalScrollbarShown\" label=\"Horizontal scrollbar shown\" />\n                </div>\n            </div>\n\n            <div rtElem=\"controls\">\n                <!-- Columns config -->\n                <div rtElem=\"control-item\">\n                    <rtui-dynamic-selector\n                        keyExp=\"propName\"\n                        displayExp=\"displayName\"\n                        formControlName=\"columns\"\n                        [entities]=\"selectedColumns()\"\n                        [useNameBreaking]=\"true\"\n                        [useTitleCase]=\"true\"\n                        [isSelectionAvailable]=\"false\"\n                        [isDeleteButtonShown]=\"false\"\n                        [isListDraggable]=\"true\">\n                        <ng-container *rtuiDynamicSelectorAdditionalControlDirective=\"let entity\" rtBlock=\"rtui-dynamic-selector\">\n                            <div rtElem=\"item-control\">\n                                <button\n                                    mat-icon-button\n                                    type=\"button\"\n                                    aria-label=\"Icon-button for visibility indication\"\n                                    rtElem=\"item-control-button\"\n                                    matTooltip=\"{{ entity.hidden ? 'Hidden, click to show' : 'Shown, click to hide' }}\"\n                                    matTooltipPosition=\"left\"\n                                    [matTooltipDisabled]=\"isMobile()\"\n                                    (click)=\"visibilityChange(entity)\">\n                                    <mat-icon [rtIconOutlined]=\"true\">\n                                        {{ entity.hidden ? 'visibility_off' : 'visibility' }}\n                                    </mat-icon>\n                                </button>\n                            </div>\n                        </ng-container>\n                    </rtui-dynamic-selector>\n                </div>\n            </div>\n        </div>\n    </form>\n</rtui-aside-container>\n", styles: [":host{width:100%;height:100%}\n"] }]
         }] });
 
 class RtuiTableToolbarSelectorsDirective {
@@ -3820,8 +4015,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                     selector: '[rtuiTableToolbarActionsDirective]',
                 }]
         }] });
+const BEM_BLOCK$8 = 'rtui-table-container';
 class RtuiTableContainerComponent {
     constructor() {
+        this.#breakpoints = inject(BreakpointService);
         this.#documentRef = inject(DOCUMENT);
         this.#windowRef = inject(WINDOW);
         this.#platformService = inject(PlatformService);
@@ -3832,6 +4029,9 @@ class RtuiTableContainerComponent {
         this.#asideService = inject(RtAsideService);
         this.#tableConfigService = inject(RtTableConfigService);
         this.#style = this.#documentRef?.documentElement?.style;
+        /** Экран узкий: значение входа, если приложение его дало, иначе замер кита. */
+        this.narrow = computed(() => this.isMobile() ?? !!this.#breakpoints.isMobile(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "narrow" }] : /* istanbul ignore next */ []));
         this.appearance = input.required(/* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []));
         /** Table config storage key */
@@ -3839,8 +4039,13 @@ class RtuiTableContainerComponent {
         /** Current page model from store */
         this.pageModel = input.required(/* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "pageModel" }] : /* istanbul ignore next */ []));
-        /** Indicates is mobile view */
-        this.isMobile = input.required({ ...(ngDevMode ? { debugName: "isMobile" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /**
+         * Признак узкого экрана.
+         *
+         * @deprecated Кит определяет его сам — `RtuiBreakpointsService`. Вход оставлен ради
+         * приложений, которые уже его передают, и уйдёт в следующем крупном выпуске.
+         */
+        this.isMobile = input(null, { ...(ngDevMode ? { debugName: "isMobile" } : /* istanbul ignore next */ {}), transform: (value) => (value === null || value === undefined ? null : booleanAttribute(value)) });
         /** Indicates is loading in progress */
         this.loading = input.required({ ...(ngDevMode ? { debugName: "loading" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /** Indicates is fetching in progress */
@@ -3909,6 +4114,7 @@ class RtuiTableContainerComponent {
             return;
         };
     }
+    #breakpoints;
     #documentRef;
     #windowRef;
     #platformService;
@@ -3978,7 +4184,7 @@ class RtuiTableContainerComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiTableContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: RtuiTableContainerComponent, isStandalone: true, selector: "rtui-table-container", inputs: { appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: true, transformFunction: null }, tableConfigStorageKey: { classPropertyName: "tableConfigStorageKey", publicName: "tableConfigStorageKey", isSignal: true, isRequired: true, transformFunction: null }, pageModel: { classPropertyName: "pageModel", publicName: "pageModel", isSignal: true, isRequired: true, transformFunction: null }, isMobile: { classPropertyName: "isMobile", publicName: "isMobile", isSignal: true, isRequired: true, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: true, transformFunction: null }, fetching: { classPropertyName: "fetching", publicName: "fetching", isSignal: true, isRequired: true, transformFunction: null }, isPlaceholderShown: { classPropertyName: "isPlaceholderShown", publicName: "isPlaceholderShown", isSignal: true, isRequired: true, transformFunction: null }, isPaginationShown: { classPropertyName: "isPaginationShown", publicName: "isPaginationShown", isSignal: true, isRequired: false, transformFunction: null }, isRefreshButtonShown: { classPropertyName: "isRefreshButtonShown", publicName: "isRefreshButtonShown", isSignal: true, isRequired: false, transformFunction: null }, isTableConfigButtonShown: { classPropertyName: "isTableConfigButtonShown", publicName: "isTableConfigButtonShown", isSignal: true, isRequired: false, transformFunction: null }, isToolbarActionsIconsOutlined: { classPropertyName: "isToolbarActionsIconsOutlined", publicName: "isToolbarActionsIconsOutlined", isSignal: true, isRequired: false, transformFunction: null }, isFiltersShown: { classPropertyName: "isFiltersShown", publicName: "isFiltersShown", isSignal: true, isRequired: false, transformFunction: null }, isFiltersEmpty: { classPropertyName: "isFiltersEmpty", publicName: "isFiltersEmpty", isSignal: true, isRequired: false, transformFunction: null }, searchTerm: { classPropertyName: "searchTerm", publicName: "searchTerm", isSignal: true, isRequired: false, transformFunction: null }, placeholderIcon: { classPropertyName: "placeholderIcon", publicName: "placeholderIcon", isSignal: true, isRequired: false, transformFunction: null }, placeholderTitle: { classPropertyName: "placeholderTitle", publicName: "placeholderTitle", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pageModelChange: "pageModelChange", searchChange: "searchChange", refreshAction: "refreshAction", clearFiltersAction: "clearFiltersAction" }, providers: [BreakpointService, RtAsideService, PlatformService], queries: [{ propertyName: "toolbarSelectorsTpl", first: true, predicate: RtuiTableToolbarSelectorsDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "toolbarActionsTpl", first: true, predicate: RtuiTableToolbarActionsDirective, descendants: true, read: TemplateRef, isSignal: true }], ngImport: i0, template: "@if (loading()) {\n    <rtui-spinner />\n} @else {\n    @if (fetching()) {\n        <rtui-spinner [showBackground]=\"true\" />\n    }\n    <ng-container rtBlock=\"table-container\">\n        <rtui-scrollable>\n            <ng-container *rtuiScrollableHeader>\n                <rtui-toolbar>\n                    @if (isSmallTablet() && !isPlaceholderShown() && (isMultiSelect() || toolbarSelectorsTpl())) {\n                        <ng-container *rtuiToolbarLeft>\n                            <ng-template *ngTemplateOutlet=\"selectorsTpl\" />\n                        </ng-container>\n                    }\n\n                    <ng-container *rtuiToolbarRight>\n                        <div rtElem=\"toolbar\">\n                            <div rtElem=\"toolbar-actions\" [rtMod]=\"{ end: isMultiSelect() ?? toolbarSelectorsTpl() }\">\n                                @if (!isSmallTablet() && !isPlaceholderShown() && (isMultiSelect() || toolbarSelectorsTpl())) {\n                                    <ng-template *ngTemplateOutlet=\"selectorsTpl\" />\n                                }\n\n                                @if (toolbarActionsTpl()) {\n                                    <ng-template *ngTemplateOutlet=\"toolbarActionsTpl() ?? null\" />\n\n                                    <div rtElem=\"toolbar-actions-divider\"></div>\n                                }\n\n                                @if (isFiltersShown()) {\n                                    <button\n                                        mat-mini-fab\n                                        type=\"button\"\n                                        aria-label=\"Icon-button for clear filters\"\n                                        class=\"c-button c-button--fab\"\n                                        matTooltip=\"Clear filters\"\n                                        matTooltipPosition=\"below\"\n                                        [matTooltipDisabled]=\"isMobile()\"\n                                        [disabled]=\"isFiltersEmpty()\"\n                                        (click)=\"onClearFilters()\">\n                                        <mat-icon [rtIconOutlined]=\"isToolbarActionsIconsOutlined()\">block</mat-icon>\n                                    </button>\n                                }\n\n                                @if (isRefreshButtonShown()) {\n                                    <button\n                                        mat-mini-fab\n                                        type=\"button\"\n                                        aria-label=\"Icon-button for table refresh\"\n                                        class=\"c-button c-button--fab\"\n                                        matTooltip=\"Refresh\"\n                                        matTooltipPosition=\"below\"\n                                        [matTooltipDisabled]=\"isMobile()\"\n                                        (click)=\"onRefresh()\">\n                                        <mat-icon [rtIconOutlined]=\"isToolbarActionsIconsOutlined()\">sync</mat-icon>\n                                    </button>\n                                }\n\n                                @if (isTableConfigButtonShown()) {\n                                    <button\n                                        mat-mini-fab\n                                        type=\"button\"\n                                        aria-label=\"Icon-button for table config\"\n                                        class=\"c-button c-button--fab\"\n                                        matTooltip=\"Table configuration\"\n                                        matTooltipPosition=\"below\"\n                                        [matTooltipDisabled]=\"isMobile()\"\n                                        (click)=\"onOpenConfigAside()\">\n                                        <mat-icon [rtIconOutlined]=\"isToolbarActionsIconsOutlined()\">view_column</mat-icon>\n                                    </button>\n                                }\n                            </div>\n\n                            @if ((isPlaceholderShown() && searchControl.value) || !isPlaceholderShown() || searchControl.dirty) {\n                                <div rtElem=\"toolbar-search\">\n                                    <mat-form-field subscriptSizing=\"dynamic\" [appearance]=\"appearance()\" [style.width.%]=\"100\">\n                                        <input matInput placeholder=\"Search...\" type=\"text\" [formControl]=\"searchControl\" />\n\n                                        <mat-icon matPrefix [rtIconOutlined]=\"true\">search</mat-icon>\n\n                                        <rtui-clear-button\n                                            matSuffix\n                                            [isButtonShown]=\"!!searchControl.value\"\n                                            (clickAction)=\"onClearSearch()\" />\n                                    </mat-form-field>\n                                </div>\n                            }\n                        </div>\n                    </ng-container>\n                </rtui-toolbar>\n            </ng-container>\n\n            <ng-container *rtuiScrollableContent>\n                @if (!isPlaceholderShown() || pageModel()?.totalCount) {\n                    <div rtElem=\"content\">\n                        <ng-content />\n                    </div>\n\n                    @if (isPaginationShown()) {\n                        <div rtElem=\"pagination\">\n                            <rtui-pagination\n                                [isMobile]=\"!!isMobile()\"\n                                [currentPageModel]=\"pageModel()\"\n                                (pageModelChange)=\"onPageModelChange($event)\" />\n                        </div>\n                    }\n                } @else {\n                    <div rtElem=\"placeholder\">\n                        <mat-icon rtElem=\"placeholder-icon\" [rtIconOutlined]=\"true\">{{ placeholderIcon() }}</mat-icon>\n\n                        <div rtElem=\"placeholder-title\">{{ placeholderTitle() }}</div>\n                    </div>\n                }\n            </ng-container>\n        </rtui-scrollable>\n\n        <ng-template #selectorsTpl>\n            <div rtElem=\"selectors\">\n                @if (isMultiSelect()) {\n                    @if (isSelectAllSelectorShown()) {\n                        <mat-checkbox\n                            [checked]=\"isAllEntitiesSelected()\"\n                            [indeterminate]=\"!isAllEntitiesSelected() && isAllEntitiesIndeterminate()\"\n                            [disabled]=\"isSelectAllSelectorDisabled()\"\n                            (click)=\"$event.stopPropagation()\"\n                            (change)=\"onToggleAllEntities($event.checked)\">\n                            <div rtElem=\"selectors-label\">Select all</div>\n                        </mat-checkbox>\n                    } @else {\n                        <div rtElem=\"selectors-counter\">Selected: {{ selectedEntitiesCount() }}</div>\n                    }\n                }\n\n                @if (toolbarSelectorsTpl()) {\n                    <ng-template *ngTemplateOutlet=\"toolbarSelectorsTpl() ?? null\" />\n                }\n            </div>\n        </ng-template>\n    </ng-container>\n}\n", styles: ["@charset \"UTF-8\";:host{position:relative;display:flex;overflow:hidden;width:100%}:host ::-webkit-scrollbar-track:hover{border:1px solid var(--rt-border-neutral-subtle)}:host ::-webkit-scrollbar-thumb{border:3px solid transparent;border-radius:var(--rt-radius-sm);background:var(--rt-scrollbar-thumb);background-clip:content-box}:host ::-webkit-scrollbar-thumb:hover{border:2px solid transparent;background:var(--rt-scrollbar-thumb-hover);background-clip:content-box}:host rtui-toolbar{--rt-toolbar-body-padding: 0;--rt-toolbar-bars-border-bottom-width: 0}:host rtui-scrollable{--rt-scrollable-header-padding: 1rem 0 0 0;--rt-scrollable-content-padding: 1rem 0 0 0;--rt-scrollable-host-background-color: transparent;--rt-scrollable-header-background-color: transparent;--rt-scrollable-content-background-color: transparent}:host{--mat-fab-small-container-shape: 50%;--mat-fab-small-hover-state-layer-opacity: 0;--mat-fab-small-pressed-state-layer-opacity: 0;--mat-fab-small-focus-state-layer-opacity: 0;--rt-table-container-selectors-margin: 0 .65rem;--rt-table-container-selector-label-color: var(--rt-text-base-secondary);--rt-table-container-selector-label-hover-color: var(--rt-text-base-strong);--rt-table-container-selector-counter-color: var(--rt-text-base-secondary);--rt-table-container-selector-counter-font-size: .875rem;--rt-table-container-toolbar-mobile-gap: 1rem;--rt-table-container-toolbar-actions-gap: 1rem;--rt-table-container-toolbar-actions-last-child-margin-right: 1rem;--rt-table-container-toolbar-actions-divider-height: 2rem;--rt-table-container-toolbar-actions-divider-border-left: 1px solid var(--rt-border-neutral-divider);--rt-table-container-toolbar-search-width: 22rem;--rt-table-container-content-padding: 0;--rt-table-container-placeholder-width: 100%;--rt-table-container-placeholder-height: 100vh;--rt-table-container-placeholder-gap: 1rem;--rt-table-container-placeholder-icon-size: 3rem;--rt-table-container-placeholder-title-size: 2rem}:host .table-container__selectors{display:flex;width:100%;flex-grow:1;align-items:center;justify-content:flex-start;margin:var(--rt-table-container-selectors-margin);gap:var(--rt-table-container-toolbar-actions-gap)}:host .table-container__selectors-label{color:var(--rt-table-container-selector-label-color)}:host .table-container__selectors-label:hover{color:var(--rt-table-container-selector-label-hover-color)}:host .table-container__selectors-counter{color:var(--rt-table-container-selector-counter-color);font-size:var(--rt-table-container-selector-counter-font-size)}:host .table-container__toolbar{display:flex;width:100%;align-items:center;justify-content:flex-end}:host .table-container__toolbar-actions{display:flex;align-items:center;justify-content:flex-end;gap:var(--rt-table-container-toolbar-actions-gap)}:host .table-container__toolbar-actions>:last-child{margin-right:var(--rt-table-container-toolbar-actions-last-child-margin-right)}:host .table-container__toolbar-actions-divider{height:var(--rt-table-container-toolbar-actions-divider-height);border-left:var(--rt-table-container-toolbar-actions-divider-border-left)}:host .table-container__toolbar-search{width:var(--rt-table-container-toolbar-search-width)}:host .table-container__content{overflow:auto;width:100%;flex-grow:1;padding:var(--rt-table-container-content-padding)}:host .table-container__content::-webkit-scrollbar{width:var(--rt-table-container-content-scrollbar-vertical-width);height:var(--rt-table-container-content-scrollbar-horizontal-height)}:host .table-container__placeholder{display:flex;width:var(--rt-table-container-placeholder-width);height:var(--rt-table-container-placeholder-height);flex-direction:column;align-items:center;justify-content:center;gap:var(--rt-table-container-placeholder-gap)}:host .table-container__placeholder-icon{width:var(--rt-table-container-placeholder-icon-size);height:var(--rt-table-container-placeholder-icon-size);font-size:var(--rt-table-container-placeholder-icon-size)}:host .table-container__placeholder-title{font-size:var(--rt-table-container-placeholder-title-size)}@media screen and (max-width:719px){:host{--rt-table-container-toolbar-actions-last-child-margin-right: 0}:host rtui-toolbar{--rt-toolbar-body-height: 6.5rem;--rt-toolbar-body-mobile-height: 6.5rem;--rt-toolbar-bars-center-width: 0;--rt-toolbar-bars-right-width: 100%}:host .table-container__toolbar{flex-direction:column-reverse;gap:var(--rt-table-container-toolbar-mobile-gap)}:host .table-container__toolbar-actions{width:100%;justify-content:center}:host .table-container__toolbar-actions--end{--rt-table-container-toolbar-actions-last-child-margin-right: 1rem;justify-content:flex-end}:host .table-container__toolbar-search{width:100%;justify-content:center;grid-row:1}}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: 
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: RtuiTableContainerComponent, isStandalone: true, selector: "rtui-table-container", inputs: { appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: true, transformFunction: null }, tableConfigStorageKey: { classPropertyName: "tableConfigStorageKey", publicName: "tableConfigStorageKey", isSignal: true, isRequired: true, transformFunction: null }, pageModel: { classPropertyName: "pageModel", publicName: "pageModel", isSignal: true, isRequired: true, transformFunction: null }, isMobile: { classPropertyName: "isMobile", publicName: "isMobile", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: true, transformFunction: null }, fetching: { classPropertyName: "fetching", publicName: "fetching", isSignal: true, isRequired: true, transformFunction: null }, isPlaceholderShown: { classPropertyName: "isPlaceholderShown", publicName: "isPlaceholderShown", isSignal: true, isRequired: true, transformFunction: null }, isPaginationShown: { classPropertyName: "isPaginationShown", publicName: "isPaginationShown", isSignal: true, isRequired: false, transformFunction: null }, isRefreshButtonShown: { classPropertyName: "isRefreshButtonShown", publicName: "isRefreshButtonShown", isSignal: true, isRequired: false, transformFunction: null }, isTableConfigButtonShown: { classPropertyName: "isTableConfigButtonShown", publicName: "isTableConfigButtonShown", isSignal: true, isRequired: false, transformFunction: null }, isToolbarActionsIconsOutlined: { classPropertyName: "isToolbarActionsIconsOutlined", publicName: "isToolbarActionsIconsOutlined", isSignal: true, isRequired: false, transformFunction: null }, isFiltersShown: { classPropertyName: "isFiltersShown", publicName: "isFiltersShown", isSignal: true, isRequired: false, transformFunction: null }, isFiltersEmpty: { classPropertyName: "isFiltersEmpty", publicName: "isFiltersEmpty", isSignal: true, isRequired: false, transformFunction: null }, searchTerm: { classPropertyName: "searchTerm", publicName: "searchTerm", isSignal: true, isRequired: false, transformFunction: null }, placeholderIcon: { classPropertyName: "placeholderIcon", publicName: "placeholderIcon", isSignal: true, isRequired: false, transformFunction: null }, placeholderTitle: { classPropertyName: "placeholderTitle", publicName: "placeholderTitle", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pageModelChange: "pageModelChange", searchChange: "searchChange", refreshAction: "refreshAction", clearFiltersAction: "clearFiltersAction" }, host: { classAttribute: "rtui-table-container" }, providers: [BreakpointService, RtAsideService, PlatformService], queries: [{ propertyName: "toolbarSelectorsTpl", first: true, predicate: RtuiTableToolbarSelectorsDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "toolbarActionsTpl", first: true, predicate: RtuiTableToolbarActionsDirective, descendants: true, read: TemplateRef, isSignal: true }], ngImport: i0, template: "@if (loading()) {\n    <rtui-spinner />\n} @else {\n    @if (fetching()) {\n        <rtui-spinner [showBackground]=\"true\" />\n    }\n    <ng-container rtBlock=\"table-container\">\n        <rtui-scrollable>\n            <ng-container *rtuiScrollableHeader>\n                <rtui-toolbar>\n                    @if (isSmallTablet() && !isPlaceholderShown() && (isMultiSelect() || toolbarSelectorsTpl())) {\n                        <ng-container *rtuiToolbarLeft>\n                            <ng-template *ngTemplateOutlet=\"selectorsTpl\" />\n                        </ng-container>\n                    }\n\n                    <ng-container *rtuiToolbarRight>\n                        <div rtElem=\"toolbar\">\n                            <div rtElem=\"toolbar-actions\" [rtMod]=\"{ end: isMultiSelect() ?? toolbarSelectorsTpl() }\">\n                                @if (!isSmallTablet() && !isPlaceholderShown() && (isMultiSelect() || toolbarSelectorsTpl())) {\n                                    <ng-template *ngTemplateOutlet=\"selectorsTpl\" />\n                                }\n\n                                @if (toolbarActionsTpl()) {\n                                    <ng-template *ngTemplateOutlet=\"toolbarActionsTpl() ?? null\" />\n\n                                    <div rtElem=\"toolbar-actions-divider\"></div>\n                                }\n\n                                @if (isFiltersShown()) {\n                                    <button\n                                        mat-mini-fab\n                                        type=\"button\"\n                                        aria-label=\"Icon-button for clear filters\"\n                                        matTooltip=\"Clear filters\"\n                                        matTooltipPosition=\"below\"\n                                        rtElem=\"toolbar-action\"\n                                        [matTooltipDisabled]=\"narrow()\"\n                                        [disabled]=\"isFiltersEmpty()\"\n                                        (click)=\"onClearFilters()\">\n                                        <mat-icon [rtIconOutlined]=\"isToolbarActionsIconsOutlined()\">block</mat-icon>\n                                    </button>\n                                }\n\n                                @if (isRefreshButtonShown()) {\n                                    <button\n                                        mat-mini-fab\n                                        type=\"button\"\n                                        aria-label=\"Icon-button for table refresh\"\n                                        matTooltip=\"Refresh\"\n                                        matTooltipPosition=\"below\"\n                                        rtElem=\"toolbar-action\"\n                                        [matTooltipDisabled]=\"narrow()\"\n                                        (click)=\"onRefresh()\">\n                                        <mat-icon [rtIconOutlined]=\"isToolbarActionsIconsOutlined()\">sync</mat-icon>\n                                    </button>\n                                }\n\n                                @if (isTableConfigButtonShown()) {\n                                    <button\n                                        mat-mini-fab\n                                        type=\"button\"\n                                        aria-label=\"Icon-button for table config\"\n                                        matTooltip=\"Table configuration\"\n                                        matTooltipPosition=\"below\"\n                                        rtElem=\"toolbar-action\"\n                                        [matTooltipDisabled]=\"narrow()\"\n                                        (click)=\"onOpenConfigAside()\">\n                                        <mat-icon [rtIconOutlined]=\"isToolbarActionsIconsOutlined()\">view_column</mat-icon>\n                                    </button>\n                                }\n                            </div>\n\n                            @if ((isPlaceholderShown() && searchControl.value) || !isPlaceholderShown() || searchControl.dirty) {\n                                <div rtElem=\"toolbar-search\">\n                                    <mat-form-field subscriptSizing=\"dynamic\" [appearance]=\"appearance()\" [style.width.%]=\"100\">\n                                        <input matInput placeholder=\"Search...\" type=\"text\" [formControl]=\"searchControl\" />\n\n                                        <mat-icon matPrefix [rtIconOutlined]=\"true\">search</mat-icon>\n\n                                        <rtui-clear-button\n                                            matSuffix\n                                            [isButtonShown]=\"!!searchControl.value\"\n                                            (clickAction)=\"onClearSearch()\" />\n                                    </mat-form-field>\n                                </div>\n                            }\n                        </div>\n                    </ng-container>\n                </rtui-toolbar>\n            </ng-container>\n\n            <ng-container *rtuiScrollableContent>\n                @if (!isPlaceholderShown() || pageModel()?.totalCount) {\n                    <div rtElem=\"content\">\n                        <ng-content />\n                    </div>\n\n                    @if (isPaginationShown()) {\n                        <div rtElem=\"pagination\">\n                            <rtui-pagination [currentPageModel]=\"pageModel()\" (pageModelChange)=\"onPageModelChange($event)\" />\n                        </div>\n                    }\n                } @else {\n                    <div rtElem=\"placeholder\">\n                        <mat-icon rtElem=\"placeholder-icon\" [rtIconOutlined]=\"true\">{{ placeholderIcon() }}</mat-icon>\n\n                        <div rtElem=\"placeholder-title\">{{ placeholderTitle() }}</div>\n                    </div>\n                }\n            </ng-container>\n        </rtui-scrollable>\n\n        <ng-template #selectorsTpl>\n            <div rtElem=\"selectors\">\n                @if (isMultiSelect()) {\n                    @if (isSelectAllSelectorShown()) {\n                        <mat-checkbox\n                            [checked]=\"isAllEntitiesSelected()\"\n                            [indeterminate]=\"!isAllEntitiesSelected() && isAllEntitiesIndeterminate()\"\n                            [disabled]=\"isSelectAllSelectorDisabled()\"\n                            (click)=\"$event.stopPropagation()\"\n                            (change)=\"onToggleAllEntities($event.checked)\">\n                            <div rtElem=\"selectors-label\">Select all</div>\n                        </mat-checkbox>\n                    } @else {\n                        <div rtElem=\"selectors-counter\">Selected: {{ selectedEntitiesCount() }}</div>\n                    }\n                }\n\n                @if (toolbarSelectorsTpl()) {\n                    <ng-template *ngTemplateOutlet=\"toolbarSelectorsTpl() ?? null\" />\n                }\n            </div>\n        </ng-template>\n    </ng-container>\n}\n", styles: ["@charset \"UTF-8\";:host{position:relative;display:flex;overflow:hidden;width:100%}:host ::-webkit-scrollbar-track:hover{border:1px solid var(--rt-border-neutral-subtle)}:host ::-webkit-scrollbar-thumb{border:3px solid transparent;border-radius:var(--rt-radius-sm);background:var(--rt-scrollbar-thumb);background-clip:content-box}:host ::-webkit-scrollbar-thumb:hover{border:2px solid transparent;background:var(--rt-scrollbar-thumb-hover);background-clip:content-box}:host rtui-toolbar{--rt-toolbar-body-padding: 0;--rt-toolbar-bars-border-bottom-width: 0}:host rtui-scrollable{--rt-scrollable-header-padding: 1rem 0 0 0;--rt-scrollable-content-padding: 1rem 0 0 0;--rt-scrollable-host-background-color: transparent;--rt-scrollable-header-background-color: transparent;--rt-scrollable-content-background-color: transparent}:host{--mat-fab-small-container-shape: 50%;--mat-fab-small-hover-state-layer-opacity: 0;--mat-fab-small-pressed-state-layer-opacity: 0;--mat-fab-small-focus-state-layer-opacity: 0;--rt-table-container-selectors-margin: 0 .65rem;--rt-table-container-selector-label-color: var(--rt-text-base-secondary);--rt-table-container-selector-label-hover-color: var(--rt-text-base-strong);--rt-table-container-selector-counter-color: var(--rt-text-base-secondary);--rt-table-container-selector-counter-font-size: .875rem;--rt-table-container-toolbar-mobile-gap: 1rem;--rt-table-container-toolbar-actions-gap: 1rem;--rt-table-container-toolbar-actions-last-child-margin-right: 1rem;--rt-table-container-toolbar-actions-divider-height: 2rem;--rt-table-container-toolbar-actions-divider-border-left: 1px solid var(--rt-border-neutral-divider);--rt-table-container-toolbar-action-color: var(--rt-color-neutral-60);--rt-table-container-toolbar-action-hover-color: var(--rt-color-neutral-100);--rt-table-container-toolbar-search-width: 22rem;--rt-table-container-content-padding: 0;--rt-table-container-placeholder-width: 100%;--rt-table-container-placeholder-height: 100vh;--rt-table-container-placeholder-gap: 1rem;--rt-table-container-placeholder-icon-size: 3rem;--rt-table-container-placeholder-title-size: 2rem}:host .table-container__selectors{display:flex;width:100%;flex-grow:1;align-items:center;justify-content:flex-start;margin:var(--rt-table-container-selectors-margin);gap:var(--rt-table-container-toolbar-actions-gap)}:host .table-container__selectors-label{color:var(--rt-table-container-selector-label-color)}:host .table-container__selectors-label:hover{color:var(--rt-table-container-selector-label-hover-color)}:host .table-container__selectors-counter{color:var(--rt-table-container-selector-counter-color);font-size:var(--rt-table-container-selector-counter-font-size)}:host .table-container__toolbar{display:flex;width:100%;align-items:center;justify-content:flex-end}:host .table-container__toolbar-actions{display:flex;align-items:center;justify-content:flex-end;gap:var(--rt-table-container-toolbar-actions-gap)}:host .table-container__toolbar-actions>:last-child{margin-right:var(--rt-table-container-toolbar-actions-last-child-margin-right)}:host .table-container__toolbar-actions-divider{height:var(--rt-table-container-toolbar-actions-divider-height);border-left:var(--rt-table-container-toolbar-actions-divider-border-left)}:host .table-container__toolbar-action{position:relative;display:inline-flex;align-items:center;justify-content:center;border:0;background-color:transparent;color:var(--rt-table-container-toolbar-action-color);line-height:1;transition:all .15s linear}:host .table-container__toolbar-action:hover{color:var(--rt-table-container-toolbar-action-hover-color)}:host .table-container__toolbar-action:hover svg g{fill:var(--rt-table-container-toolbar-action-hover-color)}:host .table-container__toolbar-search{width:var(--rt-table-container-toolbar-search-width)}:host .table-container__content{overflow:auto;width:100%;flex-grow:1;padding:var(--rt-table-container-content-padding)}:host .table-container__content::-webkit-scrollbar{width:var(--rt-table-container-content-scrollbar-vertical-width);height:var(--rt-table-container-content-scrollbar-horizontal-height)}:host .table-container__placeholder{display:flex;width:var(--rt-table-container-placeholder-width);height:var(--rt-table-container-placeholder-height);flex-direction:column;align-items:center;justify-content:center;gap:var(--rt-table-container-placeholder-gap)}:host .table-container__placeholder-icon{width:var(--rt-table-container-placeholder-icon-size);height:var(--rt-table-container-placeholder-icon-size);font-size:var(--rt-table-container-placeholder-icon-size)}:host .table-container__placeholder-title{font-size:var(--rt-table-container-placeholder-title-size)}@media screen and (max-width:719px){:host{--rt-table-container-toolbar-actions-last-child-margin-right: 0}:host rtui-toolbar{--rt-toolbar-body-height: 6.5rem;--rt-toolbar-body-mobile-height: 6.5rem;--rt-toolbar-bars-center-width: 0;--rt-toolbar-bars-right-width: 100%}:host .table-container__toolbar{flex-direction:column-reverse;gap:var(--rt-table-container-toolbar-mobile-gap)}:host .table-container__toolbar-actions{width:100%;justify-content:center}:host .table-container__toolbar-actions--end{--rt-table-container-toolbar-actions-last-child-margin-right: 1rem;justify-content:flex-end}:host .table-container__toolbar-search{width:100%;justify-content:center;grid-row:1}}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: 
                 // Material
                 MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { 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: "directive", type: MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: MatMiniFabButton, selector: "button[mat-mini-fab], a[mat-mini-fab], button[matMiniFab], a[matMiniFab]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: 
                 // Standalone components
@@ -3990,7 +4196,8 @@ class RtuiTableContainerComponent {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiTableContainerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rtui-table-container', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+            args: [{ selector: 'rtui-table-container', host: { class: BEM_BLOCK$8 }, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        ConcatClassesPipe,
                         ReactiveFormsModule,
                         NgTemplateOutlet,
                         // Material
@@ -4019,8 +4226,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                         RtuiScrollableContainerHeaderDirective,
                         RtIconOutlinedDirective,
                         RtuiToolbarLeftDirective,
-                    ], providers: [BreakpointService, RtAsideService, PlatformService], template: "@if (loading()) {\n    <rtui-spinner />\n} @else {\n    @if (fetching()) {\n        <rtui-spinner [showBackground]=\"true\" />\n    }\n    <ng-container rtBlock=\"table-container\">\n        <rtui-scrollable>\n            <ng-container *rtuiScrollableHeader>\n                <rtui-toolbar>\n                    @if (isSmallTablet() && !isPlaceholderShown() && (isMultiSelect() || toolbarSelectorsTpl())) {\n                        <ng-container *rtuiToolbarLeft>\n                            <ng-template *ngTemplateOutlet=\"selectorsTpl\" />\n                        </ng-container>\n                    }\n\n                    <ng-container *rtuiToolbarRight>\n                        <div rtElem=\"toolbar\">\n                            <div rtElem=\"toolbar-actions\" [rtMod]=\"{ end: isMultiSelect() ?? toolbarSelectorsTpl() }\">\n                                @if (!isSmallTablet() && !isPlaceholderShown() && (isMultiSelect() || toolbarSelectorsTpl())) {\n                                    <ng-template *ngTemplateOutlet=\"selectorsTpl\" />\n                                }\n\n                                @if (toolbarActionsTpl()) {\n                                    <ng-template *ngTemplateOutlet=\"toolbarActionsTpl() ?? null\" />\n\n                                    <div rtElem=\"toolbar-actions-divider\"></div>\n                                }\n\n                                @if (isFiltersShown()) {\n                                    <button\n                                        mat-mini-fab\n                                        type=\"button\"\n                                        aria-label=\"Icon-button for clear filters\"\n                                        class=\"c-button c-button--fab\"\n                                        matTooltip=\"Clear filters\"\n                                        matTooltipPosition=\"below\"\n                                        [matTooltipDisabled]=\"isMobile()\"\n                                        [disabled]=\"isFiltersEmpty()\"\n                                        (click)=\"onClearFilters()\">\n                                        <mat-icon [rtIconOutlined]=\"isToolbarActionsIconsOutlined()\">block</mat-icon>\n                                    </button>\n                                }\n\n                                @if (isRefreshButtonShown()) {\n                                    <button\n                                        mat-mini-fab\n                                        type=\"button\"\n                                        aria-label=\"Icon-button for table refresh\"\n                                        class=\"c-button c-button--fab\"\n                                        matTooltip=\"Refresh\"\n                                        matTooltipPosition=\"below\"\n                                        [matTooltipDisabled]=\"isMobile()\"\n                                        (click)=\"onRefresh()\">\n                                        <mat-icon [rtIconOutlined]=\"isToolbarActionsIconsOutlined()\">sync</mat-icon>\n                                    </button>\n                                }\n\n                                @if (isTableConfigButtonShown()) {\n                                    <button\n                                        mat-mini-fab\n                                        type=\"button\"\n                                        aria-label=\"Icon-button for table config\"\n                                        class=\"c-button c-button--fab\"\n                                        matTooltip=\"Table configuration\"\n                                        matTooltipPosition=\"below\"\n                                        [matTooltipDisabled]=\"isMobile()\"\n                                        (click)=\"onOpenConfigAside()\">\n                                        <mat-icon [rtIconOutlined]=\"isToolbarActionsIconsOutlined()\">view_column</mat-icon>\n                                    </button>\n                                }\n                            </div>\n\n                            @if ((isPlaceholderShown() && searchControl.value) || !isPlaceholderShown() || searchControl.dirty) {\n                                <div rtElem=\"toolbar-search\">\n                                    <mat-form-field subscriptSizing=\"dynamic\" [appearance]=\"appearance()\" [style.width.%]=\"100\">\n                                        <input matInput placeholder=\"Search...\" type=\"text\" [formControl]=\"searchControl\" />\n\n                                        <mat-icon matPrefix [rtIconOutlined]=\"true\">search</mat-icon>\n\n                                        <rtui-clear-button\n                                            matSuffix\n                                            [isButtonShown]=\"!!searchControl.value\"\n                                            (clickAction)=\"onClearSearch()\" />\n                                    </mat-form-field>\n                                </div>\n                            }\n                        </div>\n                    </ng-container>\n                </rtui-toolbar>\n            </ng-container>\n\n            <ng-container *rtuiScrollableContent>\n                @if (!isPlaceholderShown() || pageModel()?.totalCount) {\n                    <div rtElem=\"content\">\n                        <ng-content />\n                    </div>\n\n                    @if (isPaginationShown()) {\n                        <div rtElem=\"pagination\">\n                            <rtui-pagination\n                                [isMobile]=\"!!isMobile()\"\n                                [currentPageModel]=\"pageModel()\"\n                                (pageModelChange)=\"onPageModelChange($event)\" />\n                        </div>\n                    }\n                } @else {\n                    <div rtElem=\"placeholder\">\n                        <mat-icon rtElem=\"placeholder-icon\" [rtIconOutlined]=\"true\">{{ placeholderIcon() }}</mat-icon>\n\n                        <div rtElem=\"placeholder-title\">{{ placeholderTitle() }}</div>\n                    </div>\n                }\n            </ng-container>\n        </rtui-scrollable>\n\n        <ng-template #selectorsTpl>\n            <div rtElem=\"selectors\">\n                @if (isMultiSelect()) {\n                    @if (isSelectAllSelectorShown()) {\n                        <mat-checkbox\n                            [checked]=\"isAllEntitiesSelected()\"\n                            [indeterminate]=\"!isAllEntitiesSelected() && isAllEntitiesIndeterminate()\"\n                            [disabled]=\"isSelectAllSelectorDisabled()\"\n                            (click)=\"$event.stopPropagation()\"\n                            (change)=\"onToggleAllEntities($event.checked)\">\n                            <div rtElem=\"selectors-label\">Select all</div>\n                        </mat-checkbox>\n                    } @else {\n                        <div rtElem=\"selectors-counter\">Selected: {{ selectedEntitiesCount() }}</div>\n                    }\n                }\n\n                @if (toolbarSelectorsTpl()) {\n                    <ng-template *ngTemplateOutlet=\"toolbarSelectorsTpl() ?? null\" />\n                }\n            </div>\n        </ng-template>\n    </ng-container>\n}\n", styles: ["@charset \"UTF-8\";:host{position:relative;display:flex;overflow:hidden;width:100%}:host ::-webkit-scrollbar-track:hover{border:1px solid var(--rt-border-neutral-subtle)}:host ::-webkit-scrollbar-thumb{border:3px solid transparent;border-radius:var(--rt-radius-sm);background:var(--rt-scrollbar-thumb);background-clip:content-box}:host ::-webkit-scrollbar-thumb:hover{border:2px solid transparent;background:var(--rt-scrollbar-thumb-hover);background-clip:content-box}:host rtui-toolbar{--rt-toolbar-body-padding: 0;--rt-toolbar-bars-border-bottom-width: 0}:host rtui-scrollable{--rt-scrollable-header-padding: 1rem 0 0 0;--rt-scrollable-content-padding: 1rem 0 0 0;--rt-scrollable-host-background-color: transparent;--rt-scrollable-header-background-color: transparent;--rt-scrollable-content-background-color: transparent}:host{--mat-fab-small-container-shape: 50%;--mat-fab-small-hover-state-layer-opacity: 0;--mat-fab-small-pressed-state-layer-opacity: 0;--mat-fab-small-focus-state-layer-opacity: 0;--rt-table-container-selectors-margin: 0 .65rem;--rt-table-container-selector-label-color: var(--rt-text-base-secondary);--rt-table-container-selector-label-hover-color: var(--rt-text-base-strong);--rt-table-container-selector-counter-color: var(--rt-text-base-secondary);--rt-table-container-selector-counter-font-size: .875rem;--rt-table-container-toolbar-mobile-gap: 1rem;--rt-table-container-toolbar-actions-gap: 1rem;--rt-table-container-toolbar-actions-last-child-margin-right: 1rem;--rt-table-container-toolbar-actions-divider-height: 2rem;--rt-table-container-toolbar-actions-divider-border-left: 1px solid var(--rt-border-neutral-divider);--rt-table-container-toolbar-search-width: 22rem;--rt-table-container-content-padding: 0;--rt-table-container-placeholder-width: 100%;--rt-table-container-placeholder-height: 100vh;--rt-table-container-placeholder-gap: 1rem;--rt-table-container-placeholder-icon-size: 3rem;--rt-table-container-placeholder-title-size: 2rem}:host .table-container__selectors{display:flex;width:100%;flex-grow:1;align-items:center;justify-content:flex-start;margin:var(--rt-table-container-selectors-margin);gap:var(--rt-table-container-toolbar-actions-gap)}:host .table-container__selectors-label{color:var(--rt-table-container-selector-label-color)}:host .table-container__selectors-label:hover{color:var(--rt-table-container-selector-label-hover-color)}:host .table-container__selectors-counter{color:var(--rt-table-container-selector-counter-color);font-size:var(--rt-table-container-selector-counter-font-size)}:host .table-container__toolbar{display:flex;width:100%;align-items:center;justify-content:flex-end}:host .table-container__toolbar-actions{display:flex;align-items:center;justify-content:flex-end;gap:var(--rt-table-container-toolbar-actions-gap)}:host .table-container__toolbar-actions>:last-child{margin-right:var(--rt-table-container-toolbar-actions-last-child-margin-right)}:host .table-container__toolbar-actions-divider{height:var(--rt-table-container-toolbar-actions-divider-height);border-left:var(--rt-table-container-toolbar-actions-divider-border-left)}:host .table-container__toolbar-search{width:var(--rt-table-container-toolbar-search-width)}:host .table-container__content{overflow:auto;width:100%;flex-grow:1;padding:var(--rt-table-container-content-padding)}:host .table-container__content::-webkit-scrollbar{width:var(--rt-table-container-content-scrollbar-vertical-width);height:var(--rt-table-container-content-scrollbar-horizontal-height)}:host .table-container__placeholder{display:flex;width:var(--rt-table-container-placeholder-width);height:var(--rt-table-container-placeholder-height);flex-direction:column;align-items:center;justify-content:center;gap:var(--rt-table-container-placeholder-gap)}:host .table-container__placeholder-icon{width:var(--rt-table-container-placeholder-icon-size);height:var(--rt-table-container-placeholder-icon-size);font-size:var(--rt-table-container-placeholder-icon-size)}:host .table-container__placeholder-title{font-size:var(--rt-table-container-placeholder-title-size)}@media screen and (max-width:719px){:host{--rt-table-container-toolbar-actions-last-child-margin-right: 0}:host rtui-toolbar{--rt-toolbar-body-height: 6.5rem;--rt-toolbar-body-mobile-height: 6.5rem;--rt-toolbar-bars-center-width: 0;--rt-toolbar-bars-right-width: 100%}:host .table-container__toolbar{flex-direction:column-reverse;gap:var(--rt-table-container-toolbar-mobile-gap)}:host .table-container__toolbar-actions{width:100%;justify-content:center}:host .table-container__toolbar-actions--end{--rt-table-container-toolbar-actions-last-child-margin-right: 1rem;justify-content:flex-end}:host .table-container__toolbar-search{width:100%;justify-content:center;grid-row:1}}\n"] }]
-        }], propDecorators: { appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: true }] }], tableConfigStorageKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "tableConfigStorageKey", required: true }] }], pageModel: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageModel", required: true }] }], isMobile: [{ type: i0.Input, args: [{ isSignal: true, alias: "isMobile", required: true }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: true }] }], fetching: [{ type: i0.Input, args: [{ isSignal: true, alias: "fetching", required: true }] }], isPlaceholderShown: [{ type: i0.Input, args: [{ isSignal: true, alias: "isPlaceholderShown", required: true }] }], isPaginationShown: [{ type: i0.Input, args: [{ isSignal: true, alias: "isPaginationShown", required: false }] }], isRefreshButtonShown: [{ type: i0.Input, args: [{ isSignal: true, alias: "isRefreshButtonShown", required: false }] }], isTableConfigButtonShown: [{ type: i0.Input, args: [{ isSignal: true, alias: "isTableConfigButtonShown", required: false }] }], isToolbarActionsIconsOutlined: [{ type: i0.Input, args: [{ isSignal: true, alias: "isToolbarActionsIconsOutlined", required: false }] }], isFiltersShown: [{ type: i0.Input, args: [{ isSignal: true, alias: "isFiltersShown", required: false }] }], isFiltersEmpty: [{ type: i0.Input, args: [{ isSignal: true, alias: "isFiltersEmpty", required: false }] }], searchTerm: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchTerm", required: false }] }], placeholderIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholderIcon", required: false }] }], placeholderTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholderTitle", required: false }] }], pageModelChange: [{ type: i0.Output, args: ["pageModelChange"] }], searchChange: [{ type: i0.Output, args: ["searchChange"] }], refreshAction: [{ type: i0.Output, args: ["refreshAction"] }], clearFiltersAction: [{ type: i0.Output, args: ["clearFiltersAction"] }], toolbarSelectorsTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => RtuiTableToolbarSelectorsDirective), { ...{
+                    ], providers: [BreakpointService, RtAsideService, PlatformService], template: "@if (loading()) {\n    <rtui-spinner />\n} @else {\n    @if (fetching()) {\n        <rtui-spinner [showBackground]=\"true\" />\n    }\n    <ng-container rtBlock=\"table-container\">\n        <rtui-scrollable>\n            <ng-container *rtuiScrollableHeader>\n                <rtui-toolbar>\n                    @if (isSmallTablet() && !isPlaceholderShown() && (isMultiSelect() || toolbarSelectorsTpl())) {\n                        <ng-container *rtuiToolbarLeft>\n                            <ng-template *ngTemplateOutlet=\"selectorsTpl\" />\n                        </ng-container>\n                    }\n\n                    <ng-container *rtuiToolbarRight>\n                        <div rtElem=\"toolbar\">\n                            <div rtElem=\"toolbar-actions\" [rtMod]=\"{ end: isMultiSelect() ?? toolbarSelectorsTpl() }\">\n                                @if (!isSmallTablet() && !isPlaceholderShown() && (isMultiSelect() || toolbarSelectorsTpl())) {\n                                    <ng-template *ngTemplateOutlet=\"selectorsTpl\" />\n                                }\n\n                                @if (toolbarActionsTpl()) {\n                                    <ng-template *ngTemplateOutlet=\"toolbarActionsTpl() ?? null\" />\n\n                                    <div rtElem=\"toolbar-actions-divider\"></div>\n                                }\n\n                                @if (isFiltersShown()) {\n                                    <button\n                                        mat-mini-fab\n                                        type=\"button\"\n                                        aria-label=\"Icon-button for clear filters\"\n                                        matTooltip=\"Clear filters\"\n                                        matTooltipPosition=\"below\"\n                                        rtElem=\"toolbar-action\"\n                                        [matTooltipDisabled]=\"narrow()\"\n                                        [disabled]=\"isFiltersEmpty()\"\n                                        (click)=\"onClearFilters()\">\n                                        <mat-icon [rtIconOutlined]=\"isToolbarActionsIconsOutlined()\">block</mat-icon>\n                                    </button>\n                                }\n\n                                @if (isRefreshButtonShown()) {\n                                    <button\n                                        mat-mini-fab\n                                        type=\"button\"\n                                        aria-label=\"Icon-button for table refresh\"\n                                        matTooltip=\"Refresh\"\n                                        matTooltipPosition=\"below\"\n                                        rtElem=\"toolbar-action\"\n                                        [matTooltipDisabled]=\"narrow()\"\n                                        (click)=\"onRefresh()\">\n                                        <mat-icon [rtIconOutlined]=\"isToolbarActionsIconsOutlined()\">sync</mat-icon>\n                                    </button>\n                                }\n\n                                @if (isTableConfigButtonShown()) {\n                                    <button\n                                        mat-mini-fab\n                                        type=\"button\"\n                                        aria-label=\"Icon-button for table config\"\n                                        matTooltip=\"Table configuration\"\n                                        matTooltipPosition=\"below\"\n                                        rtElem=\"toolbar-action\"\n                                        [matTooltipDisabled]=\"narrow()\"\n                                        (click)=\"onOpenConfigAside()\">\n                                        <mat-icon [rtIconOutlined]=\"isToolbarActionsIconsOutlined()\">view_column</mat-icon>\n                                    </button>\n                                }\n                            </div>\n\n                            @if ((isPlaceholderShown() && searchControl.value) || !isPlaceholderShown() || searchControl.dirty) {\n                                <div rtElem=\"toolbar-search\">\n                                    <mat-form-field subscriptSizing=\"dynamic\" [appearance]=\"appearance()\" [style.width.%]=\"100\">\n                                        <input matInput placeholder=\"Search...\" type=\"text\" [formControl]=\"searchControl\" />\n\n                                        <mat-icon matPrefix [rtIconOutlined]=\"true\">search</mat-icon>\n\n                                        <rtui-clear-button\n                                            matSuffix\n                                            [isButtonShown]=\"!!searchControl.value\"\n                                            (clickAction)=\"onClearSearch()\" />\n                                    </mat-form-field>\n                                </div>\n                            }\n                        </div>\n                    </ng-container>\n                </rtui-toolbar>\n            </ng-container>\n\n            <ng-container *rtuiScrollableContent>\n                @if (!isPlaceholderShown() || pageModel()?.totalCount) {\n                    <div rtElem=\"content\">\n                        <ng-content />\n                    </div>\n\n                    @if (isPaginationShown()) {\n                        <div rtElem=\"pagination\">\n                            <rtui-pagination [currentPageModel]=\"pageModel()\" (pageModelChange)=\"onPageModelChange($event)\" />\n                        </div>\n                    }\n                } @else {\n                    <div rtElem=\"placeholder\">\n                        <mat-icon rtElem=\"placeholder-icon\" [rtIconOutlined]=\"true\">{{ placeholderIcon() }}</mat-icon>\n\n                        <div rtElem=\"placeholder-title\">{{ placeholderTitle() }}</div>\n                    </div>\n                }\n            </ng-container>\n        </rtui-scrollable>\n\n        <ng-template #selectorsTpl>\n            <div rtElem=\"selectors\">\n                @if (isMultiSelect()) {\n                    @if (isSelectAllSelectorShown()) {\n                        <mat-checkbox\n                            [checked]=\"isAllEntitiesSelected()\"\n                            [indeterminate]=\"!isAllEntitiesSelected() && isAllEntitiesIndeterminate()\"\n                            [disabled]=\"isSelectAllSelectorDisabled()\"\n                            (click)=\"$event.stopPropagation()\"\n                            (change)=\"onToggleAllEntities($event.checked)\">\n                            <div rtElem=\"selectors-label\">Select all</div>\n                        </mat-checkbox>\n                    } @else {\n                        <div rtElem=\"selectors-counter\">Selected: {{ selectedEntitiesCount() }}</div>\n                    }\n                }\n\n                @if (toolbarSelectorsTpl()) {\n                    <ng-template *ngTemplateOutlet=\"toolbarSelectorsTpl() ?? null\" />\n                }\n            </div>\n        </ng-template>\n    </ng-container>\n}\n", styles: ["@charset \"UTF-8\";:host{position:relative;display:flex;overflow:hidden;width:100%}:host ::-webkit-scrollbar-track:hover{border:1px solid var(--rt-border-neutral-subtle)}:host ::-webkit-scrollbar-thumb{border:3px solid transparent;border-radius:var(--rt-radius-sm);background:var(--rt-scrollbar-thumb);background-clip:content-box}:host ::-webkit-scrollbar-thumb:hover{border:2px solid transparent;background:var(--rt-scrollbar-thumb-hover);background-clip:content-box}:host rtui-toolbar{--rt-toolbar-body-padding: 0;--rt-toolbar-bars-border-bottom-width: 0}:host rtui-scrollable{--rt-scrollable-header-padding: 1rem 0 0 0;--rt-scrollable-content-padding: 1rem 0 0 0;--rt-scrollable-host-background-color: transparent;--rt-scrollable-header-background-color: transparent;--rt-scrollable-content-background-color: transparent}:host{--mat-fab-small-container-shape: 50%;--mat-fab-small-hover-state-layer-opacity: 0;--mat-fab-small-pressed-state-layer-opacity: 0;--mat-fab-small-focus-state-layer-opacity: 0;--rt-table-container-selectors-margin: 0 .65rem;--rt-table-container-selector-label-color: var(--rt-text-base-secondary);--rt-table-container-selector-label-hover-color: var(--rt-text-base-strong);--rt-table-container-selector-counter-color: var(--rt-text-base-secondary);--rt-table-container-selector-counter-font-size: .875rem;--rt-table-container-toolbar-mobile-gap: 1rem;--rt-table-container-toolbar-actions-gap: 1rem;--rt-table-container-toolbar-actions-last-child-margin-right: 1rem;--rt-table-container-toolbar-actions-divider-height: 2rem;--rt-table-container-toolbar-actions-divider-border-left: 1px solid var(--rt-border-neutral-divider);--rt-table-container-toolbar-action-color: var(--rt-color-neutral-60);--rt-table-container-toolbar-action-hover-color: var(--rt-color-neutral-100);--rt-table-container-toolbar-search-width: 22rem;--rt-table-container-content-padding: 0;--rt-table-container-placeholder-width: 100%;--rt-table-container-placeholder-height: 100vh;--rt-table-container-placeholder-gap: 1rem;--rt-table-container-placeholder-icon-size: 3rem;--rt-table-container-placeholder-title-size: 2rem}:host .table-container__selectors{display:flex;width:100%;flex-grow:1;align-items:center;justify-content:flex-start;margin:var(--rt-table-container-selectors-margin);gap:var(--rt-table-container-toolbar-actions-gap)}:host .table-container__selectors-label{color:var(--rt-table-container-selector-label-color)}:host .table-container__selectors-label:hover{color:var(--rt-table-container-selector-label-hover-color)}:host .table-container__selectors-counter{color:var(--rt-table-container-selector-counter-color);font-size:var(--rt-table-container-selector-counter-font-size)}:host .table-container__toolbar{display:flex;width:100%;align-items:center;justify-content:flex-end}:host .table-container__toolbar-actions{display:flex;align-items:center;justify-content:flex-end;gap:var(--rt-table-container-toolbar-actions-gap)}:host .table-container__toolbar-actions>:last-child{margin-right:var(--rt-table-container-toolbar-actions-last-child-margin-right)}:host .table-container__toolbar-actions-divider{height:var(--rt-table-container-toolbar-actions-divider-height);border-left:var(--rt-table-container-toolbar-actions-divider-border-left)}:host .table-container__toolbar-action{position:relative;display:inline-flex;align-items:center;justify-content:center;border:0;background-color:transparent;color:var(--rt-table-container-toolbar-action-color);line-height:1;transition:all .15s linear}:host .table-container__toolbar-action:hover{color:var(--rt-table-container-toolbar-action-hover-color)}:host .table-container__toolbar-action:hover svg g{fill:var(--rt-table-container-toolbar-action-hover-color)}:host .table-container__toolbar-search{width:var(--rt-table-container-toolbar-search-width)}:host .table-container__content{overflow:auto;width:100%;flex-grow:1;padding:var(--rt-table-container-content-padding)}:host .table-container__content::-webkit-scrollbar{width:var(--rt-table-container-content-scrollbar-vertical-width);height:var(--rt-table-container-content-scrollbar-horizontal-height)}:host .table-container__placeholder{display:flex;width:var(--rt-table-container-placeholder-width);height:var(--rt-table-container-placeholder-height);flex-direction:column;align-items:center;justify-content:center;gap:var(--rt-table-container-placeholder-gap)}:host .table-container__placeholder-icon{width:var(--rt-table-container-placeholder-icon-size);height:var(--rt-table-container-placeholder-icon-size);font-size:var(--rt-table-container-placeholder-icon-size)}:host .table-container__placeholder-title{font-size:var(--rt-table-container-placeholder-title-size)}@media screen and (max-width:719px){:host{--rt-table-container-toolbar-actions-last-child-margin-right: 0}:host rtui-toolbar{--rt-toolbar-body-height: 6.5rem;--rt-toolbar-body-mobile-height: 6.5rem;--rt-toolbar-bars-center-width: 0;--rt-toolbar-bars-right-width: 100%}:host .table-container__toolbar{flex-direction:column-reverse;gap:var(--rt-table-container-toolbar-mobile-gap)}:host .table-container__toolbar-actions{width:100%;justify-content:center}:host .table-container__toolbar-actions--end{--rt-table-container-toolbar-actions-last-child-margin-right: 1rem;justify-content:flex-end}:host .table-container__toolbar-search{width:100%;justify-content:center;grid-row:1}}\n"] }]
+        }], propDecorators: { appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: true }] }], tableConfigStorageKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "tableConfigStorageKey", required: true }] }], pageModel: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageModel", required: true }] }], isMobile: [{ type: i0.Input, args: [{ isSignal: true, alias: "isMobile", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: true }] }], fetching: [{ type: i0.Input, args: [{ isSignal: true, alias: "fetching", required: true }] }], isPlaceholderShown: [{ type: i0.Input, args: [{ isSignal: true, alias: "isPlaceholderShown", required: true }] }], isPaginationShown: [{ type: i0.Input, args: [{ isSignal: true, alias: "isPaginationShown", required: false }] }], isRefreshButtonShown: [{ type: i0.Input, args: [{ isSignal: true, alias: "isRefreshButtonShown", required: false }] }], isTableConfigButtonShown: [{ type: i0.Input, args: [{ isSignal: true, alias: "isTableConfigButtonShown", required: false }] }], isToolbarActionsIconsOutlined: [{ type: i0.Input, args: [{ isSignal: true, alias: "isToolbarActionsIconsOutlined", required: false }] }], isFiltersShown: [{ type: i0.Input, args: [{ isSignal: true, alias: "isFiltersShown", required: false }] }], isFiltersEmpty: [{ type: i0.Input, args: [{ isSignal: true, alias: "isFiltersEmpty", required: false }] }], searchTerm: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchTerm", required: false }] }], placeholderIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholderIcon", required: false }] }], placeholderTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholderTitle", required: false }] }], pageModelChange: [{ type: i0.Output, args: ["pageModelChange"] }], searchChange: [{ type: i0.Output, args: ["searchChange"] }], refreshAction: [{ type: i0.Output, args: ["refreshAction"] }], clearFiltersAction: [{ type: i0.Output, args: ["clearFiltersAction"] }], toolbarSelectorsTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => RtuiTableToolbarSelectorsDirective), { ...{
                             read: TemplateRef,
                         }, isSignal: true }] }], toolbarActionsTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => RtuiTableToolbarActionsDirective), { ...{
                             read: TemplateRef,
@@ -4084,12 +4291,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                     selector: '[rtuiDynamicListRowAdditionalActionsDirective]',
                 }]
         }] });
+const BEM_BLOCK$7 = 'rtui-dynamic-list';
 class RtuiDynamicListComponent {
     constructor() {
+        this.#breakpoints = inject(BreakpointService);
         /** Table config storage key */
         this.tableConfigStorageKey = input.required({ ...(ngDevMode ? { debugName: "tableConfigStorageKey" } : /* istanbul ignore next */ {}), transform: transformStringInput });
-        /** Indicates is mobile view */
-        this.isMobile = input(false, { ...(ngDevMode ? { debugName: "isMobile" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /**
+         * Признак узкого экрана.
+         *
+         * @deprecated Кит определяет его сам — `BreakpointService` из `@rt-tools/core`. Вход
+         * оставлен ради приложений, которые уже его передают, и уйдёт в следующем крупном выпуске.
+         */
+        this.isMobile = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isMobile" }] : /* istanbul ignore next */ []));
+        /** Экран узкий: значение входа, если приложение его дало, иначе замер кита. */
+        this.narrow = computed(() => this.isMobile() ?? !!this.#breakpoints.isMobile(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "narrow" }] : /* istanbul ignore next */ []));
         /** Indicates is loading in progress */
         this.loading = input(false, { ...(ngDevMode ? { debugName: "loading" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /** Indicates is fetching in progress */
@@ -4161,6 +4379,7 @@ class RtuiDynamicListComponent {
         this.tableTpl = viewChild(RtuiTableComponent, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "tableTpl" }] : /* istanbul ignore next */ []));
     }
+    #breakpoints;
     /** Search change output action */
     onSearchChange(value) {
         this.searchChange.emit(value);
@@ -4194,7 +4413,7 @@ class RtuiDynamicListComponent {
         this.rowDoubleClick.emit(row);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiDynamicListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: RtuiDynamicListComponent, isStandalone: true, selector: "rtui-dynamic-list", inputs: { tableConfigStorageKey: { classPropertyName: "tableConfigStorageKey", publicName: "tableConfigStorageKey", isSignal: true, isRequired: true, transformFunction: null }, isMobile: { classPropertyName: "isMobile", publicName: "isMobile", 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 }, isTableRowsClickable: { classPropertyName: "isTableRowsClickable", publicName: "isTableRowsClickable", isSignal: true, isRequired: false, transformFunction: null }, isPaginationShown: { classPropertyName: "isPaginationShown", publicName: "isPaginationShown", isSignal: true, isRequired: false, transformFunction: null }, isRefreshButtonShown: { classPropertyName: "isRefreshButtonShown", publicName: "isRefreshButtonShown", isSignal: true, isRequired: false, transformFunction: null }, isTableConfigButtonShown: { classPropertyName: "isTableConfigButtonShown", publicName: "isTableConfigButtonShown", isSignal: true, isRequired: false, transformFunction: null }, isToolbarActionsIconsOutlined: { classPropertyName: "isToolbarActionsIconsOutlined", publicName: "isToolbarActionsIconsOutlined", isSignal: true, isRequired: false, transformFunction: null }, keyExp: { classPropertyName: "keyExp", publicName: "keyExp", isSignal: true, isRequired: false, transformFunction: null }, entities: { classPropertyName: "entities", publicName: "entities", isSignal: true, isRequired: true, transformFunction: null }, pageModel: { classPropertyName: "pageModel", publicName: "pageModel", isSignal: true, isRequired: true, transformFunction: null }, searchTerm: { classPropertyName: "searchTerm", publicName: "searchTerm", isSignal: true, isRequired: true, transformFunction: null }, currentSortModel: { classPropertyName: "currentSortModel", publicName: "currentSortModel", isSignal: true, isRequired: true, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: true, transformFunction: null }, filterAppearance: { classPropertyName: "filterAppearance", publicName: "filterAppearance", isSignal: true, isRequired: false, transformFunction: null }, filterModel: { classPropertyName: "filterModel", publicName: "filterModel", isSignal: true, isRequired: false, transformFunction: null }, isFiltersShown: { classPropertyName: "isFiltersShown", publicName: "isFiltersShown", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sortChange: "sortChange", pageModelChange: "pageModelChange", searchChange: "searchChange", refresh: "refresh", clearFiltersAction: "clearFiltersAction", rowClick: "rowClick", rowDoubleClick: "rowDoubleClick", filterChange: "filterChange" }, queries: [{ propertyName: "toolbarSelectorsTpl", first: true, predicate: RtuiDynamicListToolbarSelectorsDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "toolbarActionsTpl", first: true, predicate: RtuiDynamicListToolbarActionsDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "customCellsTpl", first: true, predicate: RtuiDynamicListCustomTableCellsDirective, descendants: true, isSignal: true }, { propertyName: "rowActionsTpl", first: true, predicate: RtuiDynamicListRowActionsDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "additionalRowActionsTpl", first: true, predicate: RtuiDynamicListRowAdditionalActionsDirective, descendants: true, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "tableContainerTpl", first: true, predicate: RtuiTableContainerComponent, descendants: true, isSignal: true }, { propertyName: "tableTpl", first: true, predicate: RtuiTableComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<rtui-table-container\n    [tableConfigStorageKey]=\"tableConfigStorageKey()\"\n    [loading]=\"loading()\"\n    [fetching]=\"fetching()\"\n    [isMobile]=\"isMobile()\"\n    [pageModel]=\"pageModel()\"\n    [isPlaceholderShown]=\"!entities()?.length && !filterModel()?.length\"\n    [isToolbarActionsIconsOutlined]=\"isToolbarActionsIconsOutlined()\"\n    [isRefreshButtonShown]=\"isRefreshButtonShown()\"\n    [isTableConfigButtonShown]=\"isTableConfigButtonShown()\"\n    [isFiltersShown]=\"isFiltersShown()\"\n    [isFiltersEmpty]=\"!filterModel()?.length\"\n    [appearance]=\"appearance()\"\n    [searchTerm]=\"searchTerm()\"\n    (refreshAction)=\"onRefresh()\"\n    (clearFiltersAction)=\"onClearFilters()\"\n    (pageModelChange)=\"onPageModelChange($event)\"\n    (searchChange)=\"onSearchChange($event)\">\n    @if (toolbarSelectorsTpl()) {\n        <ng-container *rtuiTableToolbarSelectorsDirective>\n            <ng-template *ngTemplateOutlet=\"toolbarSelectorsTpl() || null\" />\n        </ng-container>\n    }\n\n    @if (toolbarActionsTpl()) {\n        <ng-container *rtuiTableToolbarActionsDirective>\n            <ng-template *ngTemplateOutlet=\"toolbarActionsTpl() || null\" />\n        </ng-container>\n    }\n\n    <rtui-table\n        [appearance]=\"appearance()\"\n        [keyExp]=\"keyExp()\"\n        [entities]=\"entities()\"\n        [isMobile]=\"isMobile()\"\n        [filterModel]=\"filterModel()\"\n        [isTableRowsClickable]=\"isTableRowsClickable()\"\n        [currentSortModel]=\"currentSortModel()\"\n        [isFiltersShown]=\"isFiltersShown()\"\n        (filterChange)=\"onFilterChange($event)\"\n        (rowClick)=\"onRowClick($event)\"\n        (rowDoubleClick)=\"onRowDoubleClick($event)\"\n        (sortChange)=\"onSortChange($event)\">\n        @if (customCellsTpl() && customCellsTpl()?.cellsTemplates()) {\n            <ng-container *rtuiCustomTableCellsDirective=\"customCellsTpl()?.cellsTemplates()!\" />\n        }\n\n        @if (additionalRowActionsTpl()) {\n            <ng-container *rtuiTableAdditionalRowActionsDirective=\"let row\">\n                <ng-template *ngTemplateOutlet=\"additionalRowActionsTpl() || null; context: { $implicit: row }\" />\n            </ng-container>\n        }\n\n        @if (rowActionsTpl()) {\n            <ng-container *rtuiTabletRowActionsDirective=\"let row\">\n                <ng-template *ngTemplateOutlet=\"rowActionsTpl() || null; context: { $implicit: row }\" />\n            </ng-container>\n        }\n    </rtui-table>\n</rtui-table-container>\n", styles: [":host{display:flex;overflow:hidden;width:100%;height:100%}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: 
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: RtuiDynamicListComponent, isStandalone: true, selector: "rtui-dynamic-list", inputs: { tableConfigStorageKey: { classPropertyName: "tableConfigStorageKey", publicName: "tableConfigStorageKey", isSignal: true, isRequired: true, transformFunction: null }, isMobile: { classPropertyName: "isMobile", publicName: "isMobile", 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 }, isTableRowsClickable: { classPropertyName: "isTableRowsClickable", publicName: "isTableRowsClickable", isSignal: true, isRequired: false, transformFunction: null }, isPaginationShown: { classPropertyName: "isPaginationShown", publicName: "isPaginationShown", isSignal: true, isRequired: false, transformFunction: null }, isRefreshButtonShown: { classPropertyName: "isRefreshButtonShown", publicName: "isRefreshButtonShown", isSignal: true, isRequired: false, transformFunction: null }, isTableConfigButtonShown: { classPropertyName: "isTableConfigButtonShown", publicName: "isTableConfigButtonShown", isSignal: true, isRequired: false, transformFunction: null }, isToolbarActionsIconsOutlined: { classPropertyName: "isToolbarActionsIconsOutlined", publicName: "isToolbarActionsIconsOutlined", isSignal: true, isRequired: false, transformFunction: null }, keyExp: { classPropertyName: "keyExp", publicName: "keyExp", isSignal: true, isRequired: false, transformFunction: null }, entities: { classPropertyName: "entities", publicName: "entities", isSignal: true, isRequired: true, transformFunction: null }, pageModel: { classPropertyName: "pageModel", publicName: "pageModel", isSignal: true, isRequired: true, transformFunction: null }, searchTerm: { classPropertyName: "searchTerm", publicName: "searchTerm", isSignal: true, isRequired: true, transformFunction: null }, currentSortModel: { classPropertyName: "currentSortModel", publicName: "currentSortModel", isSignal: true, isRequired: true, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: true, transformFunction: null }, filterAppearance: { classPropertyName: "filterAppearance", publicName: "filterAppearance", isSignal: true, isRequired: false, transformFunction: null }, filterModel: { classPropertyName: "filterModel", publicName: "filterModel", isSignal: true, isRequired: false, transformFunction: null }, isFiltersShown: { classPropertyName: "isFiltersShown", publicName: "isFiltersShown", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sortChange: "sortChange", pageModelChange: "pageModelChange", searchChange: "searchChange", refresh: "refresh", clearFiltersAction: "clearFiltersAction", rowClick: "rowClick", rowDoubleClick: "rowDoubleClick", filterChange: "filterChange" }, host: { classAttribute: "rtui-dynamic-list" }, providers: [BreakpointService], queries: [{ propertyName: "toolbarSelectorsTpl", first: true, predicate: RtuiDynamicListToolbarSelectorsDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "toolbarActionsTpl", first: true, predicate: RtuiDynamicListToolbarActionsDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "customCellsTpl", first: true, predicate: RtuiDynamicListCustomTableCellsDirective, descendants: true, isSignal: true }, { propertyName: "rowActionsTpl", first: true, predicate: RtuiDynamicListRowActionsDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "additionalRowActionsTpl", first: true, predicate: RtuiDynamicListRowAdditionalActionsDirective, descendants: true, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "tableContainerTpl", first: true, predicate: RtuiTableContainerComponent, descendants: true, isSignal: true }, { propertyName: "tableTpl", first: true, predicate: RtuiTableComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<rtui-table-container\n    [tableConfigStorageKey]=\"tableConfigStorageKey()\"\n    [loading]=\"loading()\"\n    [fetching]=\"fetching()\"\n    [pageModel]=\"pageModel()\"\n    [isPlaceholderShown]=\"!entities()?.length && !filterModel()?.length\"\n    [isToolbarActionsIconsOutlined]=\"isToolbarActionsIconsOutlined()\"\n    [isRefreshButtonShown]=\"isRefreshButtonShown()\"\n    [isTableConfigButtonShown]=\"isTableConfigButtonShown()\"\n    [isFiltersShown]=\"isFiltersShown()\"\n    [isFiltersEmpty]=\"!filterModel()?.length\"\n    [appearance]=\"appearance()\"\n    [searchTerm]=\"searchTerm()\"\n    (refreshAction)=\"onRefresh()\"\n    (clearFiltersAction)=\"onClearFilters()\"\n    (pageModelChange)=\"onPageModelChange($event)\"\n    (searchChange)=\"onSearchChange($event)\">\n    @if (toolbarSelectorsTpl()) {\n        <ng-container *rtuiTableToolbarSelectorsDirective>\n            <ng-template *ngTemplateOutlet=\"toolbarSelectorsTpl() || null\" />\n        </ng-container>\n    }\n\n    @if (toolbarActionsTpl()) {\n        <ng-container *rtuiTableToolbarActionsDirective>\n            <ng-template *ngTemplateOutlet=\"toolbarActionsTpl() || null\" />\n        </ng-container>\n    }\n\n    <rtui-table\n        [appearance]=\"appearance()\"\n        [keyExp]=\"keyExp()\"\n        [entities]=\"entities()\"\n        [filterModel]=\"filterModel()\"\n        [isTableRowsClickable]=\"isTableRowsClickable()\"\n        [currentSortModel]=\"currentSortModel()\"\n        [isFiltersShown]=\"isFiltersShown()\"\n        (filterChange)=\"onFilterChange($event)\"\n        (rowClick)=\"onRowClick($event)\"\n        (rowDoubleClick)=\"onRowDoubleClick($event)\"\n        (sortChange)=\"onSortChange($event)\">\n        @if (customCellsTpl() && customCellsTpl()?.cellsTemplates()) {\n            <ng-container *rtuiCustomTableCellsDirective=\"customCellsTpl()?.cellsTemplates()!\" />\n        }\n\n        @if (additionalRowActionsTpl()) {\n            <ng-container *rtuiTableAdditionalRowActionsDirective=\"let row\">\n                <ng-template *ngTemplateOutlet=\"additionalRowActionsTpl() || null; context: { $implicit: row }\" />\n            </ng-container>\n        }\n\n        @if (rowActionsTpl()) {\n            <ng-container *rtuiTabletRowActionsDirective=\"let row\">\n                <ng-template *ngTemplateOutlet=\"rowActionsTpl() || null; context: { $implicit: row }\" />\n            </ng-container>\n        }\n    </rtui-table>\n</rtui-table-container>\n", styles: [":host{display:flex;overflow:hidden;width:100%;height:100%}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: 
                 // Directives
                 RtuiTableToolbarActionsDirective, selector: "[rtuiTableToolbarActionsDirective]" }, { kind: "directive", type: RtuiTableRowActionsDirective, selector: "[rtuiTabletRowActionsDirective]" }, { kind: "directive", type: RtuiTableToolbarSelectorsDirective, selector: "[rtuiTableToolbarSelectorsDirective]" }, { kind: "directive", type: RtuiTableAdditionalRowActionsDirective, selector: "[rtuiTableAdditionalRowActionsDirective]" }, { kind: "component", type: 
                 // Ui-kit
@@ -4202,7 +4421,7 @@ class RtuiDynamicListComponent {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiDynamicListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rtui-dynamic-list', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+            args: [{ selector: 'rtui-dynamic-list', host: { class: BEM_BLOCK$7 }, providers: [BreakpointService], changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         NgTemplateOutlet,
                         // Directives
                         RtuiTableToolbarActionsDirective,
@@ -4213,7 +4432,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                         RtuiTableContainerComponent,
                         RtuiTableComponent,
                         RtuiCustomTableCellsDirective,
-                    ], template: "<rtui-table-container\n    [tableConfigStorageKey]=\"tableConfigStorageKey()\"\n    [loading]=\"loading()\"\n    [fetching]=\"fetching()\"\n    [isMobile]=\"isMobile()\"\n    [pageModel]=\"pageModel()\"\n    [isPlaceholderShown]=\"!entities()?.length && !filterModel()?.length\"\n    [isToolbarActionsIconsOutlined]=\"isToolbarActionsIconsOutlined()\"\n    [isRefreshButtonShown]=\"isRefreshButtonShown()\"\n    [isTableConfigButtonShown]=\"isTableConfigButtonShown()\"\n    [isFiltersShown]=\"isFiltersShown()\"\n    [isFiltersEmpty]=\"!filterModel()?.length\"\n    [appearance]=\"appearance()\"\n    [searchTerm]=\"searchTerm()\"\n    (refreshAction)=\"onRefresh()\"\n    (clearFiltersAction)=\"onClearFilters()\"\n    (pageModelChange)=\"onPageModelChange($event)\"\n    (searchChange)=\"onSearchChange($event)\">\n    @if (toolbarSelectorsTpl()) {\n        <ng-container *rtuiTableToolbarSelectorsDirective>\n            <ng-template *ngTemplateOutlet=\"toolbarSelectorsTpl() || null\" />\n        </ng-container>\n    }\n\n    @if (toolbarActionsTpl()) {\n        <ng-container *rtuiTableToolbarActionsDirective>\n            <ng-template *ngTemplateOutlet=\"toolbarActionsTpl() || null\" />\n        </ng-container>\n    }\n\n    <rtui-table\n        [appearance]=\"appearance()\"\n        [keyExp]=\"keyExp()\"\n        [entities]=\"entities()\"\n        [isMobile]=\"isMobile()\"\n        [filterModel]=\"filterModel()\"\n        [isTableRowsClickable]=\"isTableRowsClickable()\"\n        [currentSortModel]=\"currentSortModel()\"\n        [isFiltersShown]=\"isFiltersShown()\"\n        (filterChange)=\"onFilterChange($event)\"\n        (rowClick)=\"onRowClick($event)\"\n        (rowDoubleClick)=\"onRowDoubleClick($event)\"\n        (sortChange)=\"onSortChange($event)\">\n        @if (customCellsTpl() && customCellsTpl()?.cellsTemplates()) {\n            <ng-container *rtuiCustomTableCellsDirective=\"customCellsTpl()?.cellsTemplates()!\" />\n        }\n\n        @if (additionalRowActionsTpl()) {\n            <ng-container *rtuiTableAdditionalRowActionsDirective=\"let row\">\n                <ng-template *ngTemplateOutlet=\"additionalRowActionsTpl() || null; context: { $implicit: row }\" />\n            </ng-container>\n        }\n\n        @if (rowActionsTpl()) {\n            <ng-container *rtuiTabletRowActionsDirective=\"let row\">\n                <ng-template *ngTemplateOutlet=\"rowActionsTpl() || null; context: { $implicit: row }\" />\n            </ng-container>\n        }\n    </rtui-table>\n</rtui-table-container>\n", styles: [":host{display:flex;overflow:hidden;width:100%;height:100%}\n"] }]
+                    ], template: "<rtui-table-container\n    [tableConfigStorageKey]=\"tableConfigStorageKey()\"\n    [loading]=\"loading()\"\n    [fetching]=\"fetching()\"\n    [pageModel]=\"pageModel()\"\n    [isPlaceholderShown]=\"!entities()?.length && !filterModel()?.length\"\n    [isToolbarActionsIconsOutlined]=\"isToolbarActionsIconsOutlined()\"\n    [isRefreshButtonShown]=\"isRefreshButtonShown()\"\n    [isTableConfigButtonShown]=\"isTableConfigButtonShown()\"\n    [isFiltersShown]=\"isFiltersShown()\"\n    [isFiltersEmpty]=\"!filterModel()?.length\"\n    [appearance]=\"appearance()\"\n    [searchTerm]=\"searchTerm()\"\n    (refreshAction)=\"onRefresh()\"\n    (clearFiltersAction)=\"onClearFilters()\"\n    (pageModelChange)=\"onPageModelChange($event)\"\n    (searchChange)=\"onSearchChange($event)\">\n    @if (toolbarSelectorsTpl()) {\n        <ng-container *rtuiTableToolbarSelectorsDirective>\n            <ng-template *ngTemplateOutlet=\"toolbarSelectorsTpl() || null\" />\n        </ng-container>\n    }\n\n    @if (toolbarActionsTpl()) {\n        <ng-container *rtuiTableToolbarActionsDirective>\n            <ng-template *ngTemplateOutlet=\"toolbarActionsTpl() || null\" />\n        </ng-container>\n    }\n\n    <rtui-table\n        [appearance]=\"appearance()\"\n        [keyExp]=\"keyExp()\"\n        [entities]=\"entities()\"\n        [filterModel]=\"filterModel()\"\n        [isTableRowsClickable]=\"isTableRowsClickable()\"\n        [currentSortModel]=\"currentSortModel()\"\n        [isFiltersShown]=\"isFiltersShown()\"\n        (filterChange)=\"onFilterChange($event)\"\n        (rowClick)=\"onRowClick($event)\"\n        (rowDoubleClick)=\"onRowDoubleClick($event)\"\n        (sortChange)=\"onSortChange($event)\">\n        @if (customCellsTpl() && customCellsTpl()?.cellsTemplates()) {\n            <ng-container *rtuiCustomTableCellsDirective=\"customCellsTpl()?.cellsTemplates()!\" />\n        }\n\n        @if (additionalRowActionsTpl()) {\n            <ng-container *rtuiTableAdditionalRowActionsDirective=\"let row\">\n                <ng-template *ngTemplateOutlet=\"additionalRowActionsTpl() || null; context: { $implicit: row }\" />\n            </ng-container>\n        }\n\n        @if (rowActionsTpl()) {\n            <ng-container *rtuiTabletRowActionsDirective=\"let row\">\n                <ng-template *ngTemplateOutlet=\"rowActionsTpl() || null; context: { $implicit: row }\" />\n            </ng-container>\n        }\n    </rtui-table>\n</rtui-table-container>\n", styles: [":host{display:flex;overflow:hidden;width:100%;height:100%}\n"] }]
         }], propDecorators: { tableConfigStorageKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "tableConfigStorageKey", required: true }] }], isMobile: [{ type: i0.Input, args: [{ isSignal: true, alias: "isMobile", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], fetching: [{ type: i0.Input, args: [{ isSignal: true, alias: "fetching", required: false }] }], isTableRowsClickable: [{ type: i0.Input, args: [{ isSignal: true, alias: "isTableRowsClickable", required: false }] }], isPaginationShown: [{ type: i0.Input, args: [{ isSignal: true, alias: "isPaginationShown", required: false }] }], isRefreshButtonShown: [{ type: i0.Input, args: [{ isSignal: true, alias: "isRefreshButtonShown", required: false }] }], isTableConfigButtonShown: [{ type: i0.Input, args: [{ isSignal: true, alias: "isTableConfigButtonShown", required: false }] }], isToolbarActionsIconsOutlined: [{ type: i0.Input, args: [{ isSignal: true, alias: "isToolbarActionsIconsOutlined", required: false }] }], keyExp: [{ type: i0.Input, args: [{ isSignal: true, alias: "keyExp", required: false }] }], entities: [{ type: i0.Input, args: [{ isSignal: true, alias: "entities", required: true }] }], pageModel: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageModel", required: true }] }], searchTerm: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchTerm", required: true }] }], currentSortModel: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentSortModel", required: true }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: true }] }], filterAppearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterAppearance", required: false }] }], filterModel: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterModel", required: false }] }], isFiltersShown: [{ type: i0.Input, args: [{ isSignal: true, alias: "isFiltersShown", required: false }] }], sortChange: [{ type: i0.Output, args: ["sortChange"] }], pageModelChange: [{ type: i0.Output, args: ["pageModelChange"] }], searchChange: [{ type: i0.Output, args: ["searchChange"] }], refresh: [{ type: i0.Output, args: ["refresh"] }], clearFiltersAction: [{ type: i0.Output, args: ["clearFiltersAction"] }], rowClick: [{ type: i0.Output, args: ["rowClick"] }], rowDoubleClick: [{ type: i0.Output, args: ["rowDoubleClick"] }], filterChange: [{ type: i0.Output, args: ["filterChange"] }], toolbarSelectorsTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => RtuiDynamicListToolbarSelectorsDirective), { ...{
                             read: TemplateRef,
                         }, isSignal: true }] }], toolbarActionsTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => RtuiDynamicListToolbarActionsDirective), { ...{
@@ -4224,6 +4443,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                             read: TemplateRef,
                         }, isSignal: true }] }], tableContainerTpl: [{ type: i0.ViewChild, args: [i0.forwardRef(() => RtuiTableContainerComponent), { isSignal: true }] }], tableTpl: [{ type: i0.ViewChild, args: [i0.forwardRef(() => RtuiTableComponent), { isSignal: true }] }] } });
 
+const BEM_BLOCK$6 = 'rtui-popover-container';
 class RtuiPopoverContainerComponent {
     constructor() {
         this.#sanitizer = inject(DomSanitizer);
@@ -4235,11 +4455,11 @@ class RtuiPopoverContainerComponent {
         return this.#sanitizer.sanitize(1, this.popoverClass());
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiPopoverContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.5", type: RtuiPopoverContainerComponent, isStandalone: true, selector: "rtui-popover-container", inputs: { popoverTemplate: { classPropertyName: "popoverTemplate", publicName: "popoverTemplate", isSignal: true, isRequired: false, transformFunction: null }, popoverClass: { classPropertyName: "popoverClass", publicName: "popoverClass", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.className" } }, ngImport: i0, template: "<ng-container *ngTemplateOutlet=\"popoverTemplate() || null\" />\n", styles: [":host{position:absolute;display:block;width:fit-content;padding-top:var(--rt-spacing-20);text-align:left;transition:transform .1s,opacity .5s}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.5", type: RtuiPopoverContainerComponent, isStandalone: true, selector: "rtui-popover-container", inputs: { popoverTemplate: { classPropertyName: "popoverTemplate", publicName: "popoverTemplate", isSignal: true, isRequired: false, transformFunction: null }, popoverClass: { classPropertyName: "popoverClass", publicName: "popoverClass", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.className" }, classAttribute: "rtui-popover-container" }, ngImport: i0, template: "<ng-container *ngTemplateOutlet=\"popoverTemplate() || null\" />\n", styles: [":host{position:absolute;display:block;width:fit-content;padding-top:var(--rt-spacing-20);text-align:left;transition:transform .1s,opacity .5s}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiPopoverContainerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rtui-popover-container', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet], template: "<ng-container *ngTemplateOutlet=\"popoverTemplate() || null\" />\n", styles: [":host{position:absolute;display:block;width:fit-content;padding-top:var(--rt-spacing-20);text-align:left;transition:transform .1s,opacity .5s}\n"] }]
+            args: [{ selector: 'rtui-popover-container', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet], host: { class: BEM_BLOCK$6 }, template: "<ng-container *ngTemplateOutlet=\"popoverTemplate() || null\" />\n", styles: [":host{position:absolute;display:block;width:fit-content;padding-top:var(--rt-spacing-20);text-align:left;transition:transform .1s,opacity .5s}\n"] }]
         }], propDecorators: { popoverTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "popoverTemplate", required: false }] }], popoverClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "popoverClass", required: false }] }], className: [{
                 type: HostBinding,
                 args: ['class']
@@ -4385,6 +4605,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                 args: ['mouseleave']
             }] } });
 
+const BEM_BLOCK$5 = 'rtui-action-bar';
 class RtuiActionBarComponent {
     constructor() {
         this.#breakpointService = inject(BreakpointService);
@@ -4405,7 +4626,7 @@ class RtuiActionBarComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiActionBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: RtuiActionBarComponent, isStandalone: true, selector: "rtui-action-bar", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { closeAction: "closeAction" }, providers: [BreakpointService], ngImport: i0, template: "<div rtBlock=\"rtui-action-bar\">\n    <div rtElem=\"counter\">\n        {{ 'Selected: ' + config().selected + ' out of ' + config().total | emptyToDash }}\n    </div>\n\n    @if (config().buttons?.length) {\n        <div rtElem=\"actions\">\n            @for (btn of config().buttons; track i; let i = $index) {\n                @if (btn?.menu) {\n                    @let menu = btn.menu;\n                    <ng-template #actionMenuWrapperTpl>\n                        <ng-container *ngTemplateOutlet=\"actionMenuTpl; context: { $implicit: menu }\" />\n                    </ng-template>\n\n                    <div rtPopover rtElem=\"action\" [trigger]=\"'click'\" [template]=\"actionMenuWrapperTpl\" [ngStyle]=\"btn?.styles\">\n                        <ng-template *ngTemplateOutlet=\"buttonContentTpl; context: { $implicit: btn }\" />\n                    </div>\n                } @else {\n                    <div rtElem=\"action\" [ngStyle]=\"btn?.styles\" (click)=\"onAction(btn)\">\n                        <ng-template *ngTemplateOutlet=\"buttonContentTpl; context: { $implicit: btn }\" />\n                    </div>\n                }\n            }\n        </div>\n    }\n\n    <div rtElem=\"close-button\" (click)=\"onClose()\">\n        <svg width=\"11\" height=\"11\" viewBox=\"0 0 11 11\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path\n                d=\"M10.7071 0.293C10.5196 0.105529 10.2652 0.000213623 10.0001 0.000213623C9.73492 0.000213623 9.48061 0.105529 9.29308 0.293L6.00008 3.586L2.70708 0.293C2.51848 0.110842 2.26588 0.0100477 2.00368 0.0123261C1.74148 0.0146045 1.49067 0.119773 1.30526 0.305182C1.11985 0.49059 1.01469 0.741402 1.01241 1.0036C1.01013 1.2658 1.11092 1.5184 1.29308 1.707L4.58608 5L1.29308 8.293C1.19757 8.38525 1.12139 8.49559 1.06898 8.6176C1.01657 8.7396 0.988985 8.87082 0.987831 9.0036C0.986677 9.13638 1.01198 9.26806 1.06226 9.39095C1.11254 9.51385 1.18679 9.6255 1.28069 9.71939C1.37458 9.81329 1.48623 9.88754 1.60913 9.93782C1.73202 9.9881 1.8637 10.0134 1.99648 10.0123C2.12926 10.0111 2.26048 9.98351 2.38249 9.9311C2.50449 9.87869 2.61483 9.80251 2.70708 9.707L6.00008 6.414L9.29308 9.707C9.48168 9.88916 9.73429 9.98995 9.99648 9.98767C10.2587 9.9854 10.5095 9.88023 10.6949 9.69482C10.8803 9.50941 10.9855 9.2586 10.9878 8.9964C10.99 8.7342 10.8892 8.4816 10.7071 8.293L7.41408 5L10.7071 1.707C10.8946 1.51947 10.9999 1.26516 10.9999 1C10.9999 0.734836 10.8946 0.480528 10.7071 0.293Z\"\n                fill=\"currentColor\" />\n        </svg>\n    </div>\n</div>\n\n<ng-template #actionMenuTpl let-menu>\n    <div rtBlock=\"rtui-action-bar-action-menu\">\n        @for (btn of menu; track i; let i = $index) {\n            <div rtElem=\"action\" (click)=\"onAction(btn)\">\n                <ng-template *ngTemplateOutlet=\"buttonContentTpl; context: { $implicit: btn }\" />\n            </div>\n        }\n    </div>\n</ng-template>\n\n<ng-template #buttonContentTpl let-btn>\n    @if (btn?.icon) {\n        <mat-icon [rtIconOutlined]=\"true\">{{ btn.icon }}</mat-icon>\n    }\n\n    @if (!isTablet() || (isTablet() && !btn?.icon)) {\n        <div>{{ btn.title }}</div>\n    }\n</ng-template>\n", styles: ["@charset \"UTF-8\";.rtui-action-bar{display:flex;width:var(--rt-action-bar-bar-width);align-items:center;padding:var(--rt-action-bar-bar-padding);border-radius:var(--rt-action-bar-bar-border-radius);background-color:var(--rt-action-bar-bar-background-color);box-shadow:var(--rt-action-bar-bar-box-shadow);color:var(--rt-action-bar-bar-color);gap:var(--rt-action-bar-bar-gap)}.rtui-action-bar__counter{font-size:var(--rt-action-bar-counter-font-size);font-weight:var(--rt-action-bar-counter-font-weight)}.rtui-action-bar__actions{display:flex;gap:var(--rt-action-bar-actions-gap)}.rtui-action-bar__action{display:flex;align-items:center;justify-content:center;padding:var(--rt-action-bar-action-padding);border-radius:var(--rt-action-bar-action-border-radius);cursor:pointer;font-size:var(--rt-action-bar-action-font-size);font-weight:var(--rt-action-bar-action-font-weight);gap:var(--rt-action-bar-action-gap)}.rtui-action-bar__action:hover{background-color:var(--rt-action-bar-action-hover-background-color)}.rtui-action-bar__close-button{margin-left:auto;cursor:pointer}.rtui-action-bar__close-button svg{transition:transform .2s ease}.rtui-action-bar__close-button svg:hover{transform:rotate(90deg)}@media screen and (max-width:959px){.rtui-action-bar{padding:var(--rt-action-bar-bar-mobile-padding);gap:var(--rt-action-bar-bar-mobile-gap)}.rtui-action-bar__actions{gap:var(--rt-action-bar-actions-mobile-gap)}.rtui-action-bar__action{padding:var(--rt-action-bar-action-mobile-padding);gap:var(--rt-action-bar-action-mobile-gap)}}.rtui-action-bar-action-menu{display:flex;flex-direction:column;padding:var(--rt-action-bar-action-menu-padding);border-radius:var(--rt-action-bar-action-border-radius);background-color:var(--rt-action-bar-action-menu-background-color);box-shadow:var(--rt-action-bar-action-menu-box-shadow);color:var(--rt-action-bar-action-menu-color);gap:var(--rt-action-bar-action-menu-gap)}.rtui-action-bar-action-menu__action{display:flex;align-items:center;justify-content:center;padding:var(--rt-action-bar-action-menu-action-padding);border-radius:var(--rt-action-bar-action-menu-action-border-radius);cursor:pointer;font-size:var(--rt-action-bar-action-menu-action-font-size);font-weight:var(--rt-action-bar-action-menu-action-font-weight);gap:var(--rt-action-bar-action-menu-action-gap)}.rtui-action-bar-action-menu__action:hover{background-color:var(--rt-action-bar-action-menu-action-hover-background-color)}@media screen and (max-width:959px){.rtui-action-bar-action-menu,.rtui-action-bar-action-menu__action{padding:var(--rt-action-bar-action-menu-action-mobile-padding);gap:var(--rt-action-bar-action-menu-action-mobile-gap)}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: 
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: RtuiActionBarComponent, isStandalone: true, selector: "rtui-action-bar", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { closeAction: "closeAction" }, host: { classAttribute: "rtui-action-bar" }, providers: [BreakpointService], ngImport: i0, template: "<div rtBlock=\"rtui-action-bar\">\n    <div rtElem=\"counter\">\n        {{ 'Selected: ' + config().selected + ' out of ' + config().total | emptyToDash }}\n    </div>\n\n    @if (config().buttons?.length) {\n        <div rtElem=\"actions\">\n            @for (btn of config().buttons; track i; let i = $index) {\n                @if (btn?.menu) {\n                    @let menu = btn.menu;\n                    <ng-template #actionMenuWrapperTpl>\n                        <ng-container *ngTemplateOutlet=\"actionMenuTpl; context: { $implicit: menu }\" />\n                    </ng-template>\n\n                    <div rtPopover rtElem=\"action\" [trigger]=\"'click'\" [template]=\"actionMenuWrapperTpl\" [ngStyle]=\"btn?.styles\">\n                        <ng-template *ngTemplateOutlet=\"buttonContentTpl; context: { $implicit: btn }\" />\n                    </div>\n                } @else {\n                    <button type=\"button\" rtElem=\"action\" [ngStyle]=\"btn?.styles\" (click)=\"onAction(btn)\">\n                        <ng-template *ngTemplateOutlet=\"buttonContentTpl; context: { $implicit: btn }\" />\n                    </button>\n                }\n            }\n        </div>\n    }\n\n    <button type=\"button\" rtElem=\"close-button\" (click)=\"onClose()\">\n        <svg width=\"11\" height=\"11\" viewBox=\"0 0 11 11\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path\n                d=\"M10.7071 0.293C10.5196 0.105529 10.2652 0.000213623 10.0001 0.000213623C9.73492 0.000213623 9.48061 0.105529 9.29308 0.293L6.00008 3.586L2.70708 0.293C2.51848 0.110842 2.26588 0.0100477 2.00368 0.0123261C1.74148 0.0146045 1.49067 0.119773 1.30526 0.305182C1.11985 0.49059 1.01469 0.741402 1.01241 1.0036C1.01013 1.2658 1.11092 1.5184 1.29308 1.707L4.58608 5L1.29308 8.293C1.19757 8.38525 1.12139 8.49559 1.06898 8.6176C1.01657 8.7396 0.988985 8.87082 0.987831 9.0036C0.986677 9.13638 1.01198 9.26806 1.06226 9.39095C1.11254 9.51385 1.18679 9.6255 1.28069 9.71939C1.37458 9.81329 1.48623 9.88754 1.60913 9.93782C1.73202 9.9881 1.8637 10.0134 1.99648 10.0123C2.12926 10.0111 2.26048 9.98351 2.38249 9.9311C2.50449 9.87869 2.61483 9.80251 2.70708 9.707L6.00008 6.414L9.29308 9.707C9.48168 9.88916 9.73429 9.98995 9.99648 9.98767C10.2587 9.9854 10.5095 9.88023 10.6949 9.69482C10.8803 9.50941 10.9855 9.2586 10.9878 8.9964C10.99 8.7342 10.8892 8.4816 10.7071 8.293L7.41408 5L10.7071 1.707C10.8946 1.51947 10.9999 1.26516 10.9999 1C10.9999 0.734836 10.8946 0.480528 10.7071 0.293Z\"\n                fill=\"currentColor\" />\n        </svg>\n    </button>\n</div>\n\n<ng-template #actionMenuTpl let-menu>\n    <div rtBlock=\"rtui-action-bar-action-menu\">\n        @for (btn of menu; track i; let i = $index) {\n            <button type=\"button\" rtElem=\"action\" (click)=\"onAction(btn)\">\n                <ng-template *ngTemplateOutlet=\"buttonContentTpl; context: { $implicit: btn }\" />\n            </button>\n        }\n    </div>\n</ng-template>\n\n<ng-template #buttonContentTpl let-btn>\n    @if (btn?.icon) {\n        <mat-icon [rtIconOutlined]=\"true\">{{ btn.icon }}</mat-icon>\n    }\n\n    @if (!isTablet() || (isTablet() && !btn?.icon)) {\n        <div>{{ btn.title }}</div>\n    }\n</ng-template>\n", styles: ["@charset \"UTF-8\";.rtui-action-bar{display:flex;width:var(--rt-action-bar-bar-width);align-items:center;padding:var(--rt-action-bar-bar-padding);border-radius:var(--rt-action-bar-bar-border-radius);background-color:var(--rt-action-bar-bar-background-color);box-shadow:var(--rt-action-bar-bar-box-shadow);color:var(--rt-action-bar-bar-color);gap:var(--rt-action-bar-bar-gap)}.rtui-action-bar__counter{font-size:var(--rt-action-bar-counter-font-size);font-weight:var(--rt-action-bar-counter-font-weight)}.rtui-action-bar__actions{display:flex;gap:var(--rt-action-bar-actions-gap)}.rtui-action-bar__action{display:flex;align-items:center;justify-content:center;padding:var(--rt-action-bar-action-padding);border:0;border-radius:var(--rt-action-bar-action-border-radius);background-color:transparent;color:inherit;cursor:pointer;font-family:inherit;font-size:var(--rt-action-bar-action-font-size);font-weight:var(--rt-action-bar-action-font-weight);gap:var(--rt-action-bar-action-gap)}.rtui-action-bar__action:hover{background-color:var(--rt-action-bar-action-hover-background-color)}.rtui-action-bar__close-button{display:flex;align-items:center;padding:0;border:0;margin-left:auto;background-color:transparent;color:inherit;cursor:pointer}.rtui-action-bar__close-button svg{transition:transform .2s ease}.rtui-action-bar__close-button svg:hover{transform:rotate(90deg)}@media screen and (max-width:959px){.rtui-action-bar{padding:var(--rt-action-bar-bar-mobile-padding);gap:var(--rt-action-bar-bar-mobile-gap)}.rtui-action-bar__actions{gap:var(--rt-action-bar-actions-mobile-gap)}.rtui-action-bar__action{padding:var(--rt-action-bar-action-mobile-padding);gap:var(--rt-action-bar-action-mobile-gap)}}.rtui-action-bar-action-menu{display:flex;flex-direction:column;padding:var(--rt-action-bar-action-menu-padding);border-radius:var(--rt-action-bar-action-border-radius);background-color:var(--rt-action-bar-action-menu-background-color);box-shadow:var(--rt-action-bar-action-menu-box-shadow);color:var(--rt-action-bar-action-menu-color);gap:var(--rt-action-bar-action-menu-gap)}.rtui-action-bar-action-menu__action{display:flex;align-items:center;justify-content:center;padding:var(--rt-action-bar-action-menu-action-padding);border:0;border-radius:var(--rt-action-bar-action-menu-action-border-radius);background-color:transparent;color:inherit;cursor:pointer;font-family:inherit;font-size:var(--rt-action-bar-action-menu-action-font-size);font-weight:var(--rt-action-bar-action-menu-action-font-weight);gap:var(--rt-action-bar-action-menu-action-gap)}.rtui-action-bar-action-menu__action:hover{background-color:var(--rt-action-bar-action-menu-action-hover-background-color)}@media screen and (max-width:959px){.rtui-action-bar-action-menu,.rtui-action-bar-action-menu__action{padding:var(--rt-action-bar-action-menu-action-mobile-padding);gap:var(--rt-action-bar-action-menu-action-mobile-gap)}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: 
                 // material
                 MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: 
                 // rt-tools
@@ -4413,7 +4634,7 @@ class RtuiActionBarComponent {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiActionBarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rtui-action-bar', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+            args: [{ selector: 'rtui-action-bar', host: { class: BEM_BLOCK$5 }, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         NgTemplateOutlet,
                         NgStyle,
                         // material
@@ -4424,7 +4645,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                         EmptyToDashPipe,
                         RtIconOutlinedDirective,
                         RtPopoverDirective,
-                    ], providers: [BreakpointService], template: "<div rtBlock=\"rtui-action-bar\">\n    <div rtElem=\"counter\">\n        {{ 'Selected: ' + config().selected + ' out of ' + config().total | emptyToDash }}\n    </div>\n\n    @if (config().buttons?.length) {\n        <div rtElem=\"actions\">\n            @for (btn of config().buttons; track i; let i = $index) {\n                @if (btn?.menu) {\n                    @let menu = btn.menu;\n                    <ng-template #actionMenuWrapperTpl>\n                        <ng-container *ngTemplateOutlet=\"actionMenuTpl; context: { $implicit: menu }\" />\n                    </ng-template>\n\n                    <div rtPopover rtElem=\"action\" [trigger]=\"'click'\" [template]=\"actionMenuWrapperTpl\" [ngStyle]=\"btn?.styles\">\n                        <ng-template *ngTemplateOutlet=\"buttonContentTpl; context: { $implicit: btn }\" />\n                    </div>\n                } @else {\n                    <div rtElem=\"action\" [ngStyle]=\"btn?.styles\" (click)=\"onAction(btn)\">\n                        <ng-template *ngTemplateOutlet=\"buttonContentTpl; context: { $implicit: btn }\" />\n                    </div>\n                }\n            }\n        </div>\n    }\n\n    <div rtElem=\"close-button\" (click)=\"onClose()\">\n        <svg width=\"11\" height=\"11\" viewBox=\"0 0 11 11\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path\n                d=\"M10.7071 0.293C10.5196 0.105529 10.2652 0.000213623 10.0001 0.000213623C9.73492 0.000213623 9.48061 0.105529 9.29308 0.293L6.00008 3.586L2.70708 0.293C2.51848 0.110842 2.26588 0.0100477 2.00368 0.0123261C1.74148 0.0146045 1.49067 0.119773 1.30526 0.305182C1.11985 0.49059 1.01469 0.741402 1.01241 1.0036C1.01013 1.2658 1.11092 1.5184 1.29308 1.707L4.58608 5L1.29308 8.293C1.19757 8.38525 1.12139 8.49559 1.06898 8.6176C1.01657 8.7396 0.988985 8.87082 0.987831 9.0036C0.986677 9.13638 1.01198 9.26806 1.06226 9.39095C1.11254 9.51385 1.18679 9.6255 1.28069 9.71939C1.37458 9.81329 1.48623 9.88754 1.60913 9.93782C1.73202 9.9881 1.8637 10.0134 1.99648 10.0123C2.12926 10.0111 2.26048 9.98351 2.38249 9.9311C2.50449 9.87869 2.61483 9.80251 2.70708 9.707L6.00008 6.414L9.29308 9.707C9.48168 9.88916 9.73429 9.98995 9.99648 9.98767C10.2587 9.9854 10.5095 9.88023 10.6949 9.69482C10.8803 9.50941 10.9855 9.2586 10.9878 8.9964C10.99 8.7342 10.8892 8.4816 10.7071 8.293L7.41408 5L10.7071 1.707C10.8946 1.51947 10.9999 1.26516 10.9999 1C10.9999 0.734836 10.8946 0.480528 10.7071 0.293Z\"\n                fill=\"currentColor\" />\n        </svg>\n    </div>\n</div>\n\n<ng-template #actionMenuTpl let-menu>\n    <div rtBlock=\"rtui-action-bar-action-menu\">\n        @for (btn of menu; track i; let i = $index) {\n            <div rtElem=\"action\" (click)=\"onAction(btn)\">\n                <ng-template *ngTemplateOutlet=\"buttonContentTpl; context: { $implicit: btn }\" />\n            </div>\n        }\n    </div>\n</ng-template>\n\n<ng-template #buttonContentTpl let-btn>\n    @if (btn?.icon) {\n        <mat-icon [rtIconOutlined]=\"true\">{{ btn.icon }}</mat-icon>\n    }\n\n    @if (!isTablet() || (isTablet() && !btn?.icon)) {\n        <div>{{ btn.title }}</div>\n    }\n</ng-template>\n", styles: ["@charset \"UTF-8\";.rtui-action-bar{display:flex;width:var(--rt-action-bar-bar-width);align-items:center;padding:var(--rt-action-bar-bar-padding);border-radius:var(--rt-action-bar-bar-border-radius);background-color:var(--rt-action-bar-bar-background-color);box-shadow:var(--rt-action-bar-bar-box-shadow);color:var(--rt-action-bar-bar-color);gap:var(--rt-action-bar-bar-gap)}.rtui-action-bar__counter{font-size:var(--rt-action-bar-counter-font-size);font-weight:var(--rt-action-bar-counter-font-weight)}.rtui-action-bar__actions{display:flex;gap:var(--rt-action-bar-actions-gap)}.rtui-action-bar__action{display:flex;align-items:center;justify-content:center;padding:var(--rt-action-bar-action-padding);border-radius:var(--rt-action-bar-action-border-radius);cursor:pointer;font-size:var(--rt-action-bar-action-font-size);font-weight:var(--rt-action-bar-action-font-weight);gap:var(--rt-action-bar-action-gap)}.rtui-action-bar__action:hover{background-color:var(--rt-action-bar-action-hover-background-color)}.rtui-action-bar__close-button{margin-left:auto;cursor:pointer}.rtui-action-bar__close-button svg{transition:transform .2s ease}.rtui-action-bar__close-button svg:hover{transform:rotate(90deg)}@media screen and (max-width:959px){.rtui-action-bar{padding:var(--rt-action-bar-bar-mobile-padding);gap:var(--rt-action-bar-bar-mobile-gap)}.rtui-action-bar__actions{gap:var(--rt-action-bar-actions-mobile-gap)}.rtui-action-bar__action{padding:var(--rt-action-bar-action-mobile-padding);gap:var(--rt-action-bar-action-mobile-gap)}}.rtui-action-bar-action-menu{display:flex;flex-direction:column;padding:var(--rt-action-bar-action-menu-padding);border-radius:var(--rt-action-bar-action-border-radius);background-color:var(--rt-action-bar-action-menu-background-color);box-shadow:var(--rt-action-bar-action-menu-box-shadow);color:var(--rt-action-bar-action-menu-color);gap:var(--rt-action-bar-action-menu-gap)}.rtui-action-bar-action-menu__action{display:flex;align-items:center;justify-content:center;padding:var(--rt-action-bar-action-menu-action-padding);border-radius:var(--rt-action-bar-action-menu-action-border-radius);cursor:pointer;font-size:var(--rt-action-bar-action-menu-action-font-size);font-weight:var(--rt-action-bar-action-menu-action-font-weight);gap:var(--rt-action-bar-action-menu-action-gap)}.rtui-action-bar-action-menu__action:hover{background-color:var(--rt-action-bar-action-menu-action-hover-background-color)}@media screen and (max-width:959px){.rtui-action-bar-action-menu,.rtui-action-bar-action-menu__action{padding:var(--rt-action-bar-action-menu-action-mobile-padding);gap:var(--rt-action-bar-action-menu-action-mobile-gap)}}\n"] }]
+                    ], providers: [BreakpointService], template: "<div rtBlock=\"rtui-action-bar\">\n    <div rtElem=\"counter\">\n        {{ 'Selected: ' + config().selected + ' out of ' + config().total | emptyToDash }}\n    </div>\n\n    @if (config().buttons?.length) {\n        <div rtElem=\"actions\">\n            @for (btn of config().buttons; track i; let i = $index) {\n                @if (btn?.menu) {\n                    @let menu = btn.menu;\n                    <ng-template #actionMenuWrapperTpl>\n                        <ng-container *ngTemplateOutlet=\"actionMenuTpl; context: { $implicit: menu }\" />\n                    </ng-template>\n\n                    <div rtPopover rtElem=\"action\" [trigger]=\"'click'\" [template]=\"actionMenuWrapperTpl\" [ngStyle]=\"btn?.styles\">\n                        <ng-template *ngTemplateOutlet=\"buttonContentTpl; context: { $implicit: btn }\" />\n                    </div>\n                } @else {\n                    <button type=\"button\" rtElem=\"action\" [ngStyle]=\"btn?.styles\" (click)=\"onAction(btn)\">\n                        <ng-template *ngTemplateOutlet=\"buttonContentTpl; context: { $implicit: btn }\" />\n                    </button>\n                }\n            }\n        </div>\n    }\n\n    <button type=\"button\" rtElem=\"close-button\" (click)=\"onClose()\">\n        <svg width=\"11\" height=\"11\" viewBox=\"0 0 11 11\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path\n                d=\"M10.7071 0.293C10.5196 0.105529 10.2652 0.000213623 10.0001 0.000213623C9.73492 0.000213623 9.48061 0.105529 9.29308 0.293L6.00008 3.586L2.70708 0.293C2.51848 0.110842 2.26588 0.0100477 2.00368 0.0123261C1.74148 0.0146045 1.49067 0.119773 1.30526 0.305182C1.11985 0.49059 1.01469 0.741402 1.01241 1.0036C1.01013 1.2658 1.11092 1.5184 1.29308 1.707L4.58608 5L1.29308 8.293C1.19757 8.38525 1.12139 8.49559 1.06898 8.6176C1.01657 8.7396 0.988985 8.87082 0.987831 9.0036C0.986677 9.13638 1.01198 9.26806 1.06226 9.39095C1.11254 9.51385 1.18679 9.6255 1.28069 9.71939C1.37458 9.81329 1.48623 9.88754 1.60913 9.93782C1.73202 9.9881 1.8637 10.0134 1.99648 10.0123C2.12926 10.0111 2.26048 9.98351 2.38249 9.9311C2.50449 9.87869 2.61483 9.80251 2.70708 9.707L6.00008 6.414L9.29308 9.707C9.48168 9.88916 9.73429 9.98995 9.99648 9.98767C10.2587 9.9854 10.5095 9.88023 10.6949 9.69482C10.8803 9.50941 10.9855 9.2586 10.9878 8.9964C10.99 8.7342 10.8892 8.4816 10.7071 8.293L7.41408 5L10.7071 1.707C10.8946 1.51947 10.9999 1.26516 10.9999 1C10.9999 0.734836 10.8946 0.480528 10.7071 0.293Z\"\n                fill=\"currentColor\" />\n        </svg>\n    </button>\n</div>\n\n<ng-template #actionMenuTpl let-menu>\n    <div rtBlock=\"rtui-action-bar-action-menu\">\n        @for (btn of menu; track i; let i = $index) {\n            <button type=\"button\" rtElem=\"action\" (click)=\"onAction(btn)\">\n                <ng-template *ngTemplateOutlet=\"buttonContentTpl; context: { $implicit: btn }\" />\n            </button>\n        }\n    </div>\n</ng-template>\n\n<ng-template #buttonContentTpl let-btn>\n    @if (btn?.icon) {\n        <mat-icon [rtIconOutlined]=\"true\">{{ btn.icon }}</mat-icon>\n    }\n\n    @if (!isTablet() || (isTablet() && !btn?.icon)) {\n        <div>{{ btn.title }}</div>\n    }\n</ng-template>\n", styles: ["@charset \"UTF-8\";.rtui-action-bar{display:flex;width:var(--rt-action-bar-bar-width);align-items:center;padding:var(--rt-action-bar-bar-padding);border-radius:var(--rt-action-bar-bar-border-radius);background-color:var(--rt-action-bar-bar-background-color);box-shadow:var(--rt-action-bar-bar-box-shadow);color:var(--rt-action-bar-bar-color);gap:var(--rt-action-bar-bar-gap)}.rtui-action-bar__counter{font-size:var(--rt-action-bar-counter-font-size);font-weight:var(--rt-action-bar-counter-font-weight)}.rtui-action-bar__actions{display:flex;gap:var(--rt-action-bar-actions-gap)}.rtui-action-bar__action{display:flex;align-items:center;justify-content:center;padding:var(--rt-action-bar-action-padding);border:0;border-radius:var(--rt-action-bar-action-border-radius);background-color:transparent;color:inherit;cursor:pointer;font-family:inherit;font-size:var(--rt-action-bar-action-font-size);font-weight:var(--rt-action-bar-action-font-weight);gap:var(--rt-action-bar-action-gap)}.rtui-action-bar__action:hover{background-color:var(--rt-action-bar-action-hover-background-color)}.rtui-action-bar__close-button{display:flex;align-items:center;padding:0;border:0;margin-left:auto;background-color:transparent;color:inherit;cursor:pointer}.rtui-action-bar__close-button svg{transition:transform .2s ease}.rtui-action-bar__close-button svg:hover{transform:rotate(90deg)}@media screen and (max-width:959px){.rtui-action-bar{padding:var(--rt-action-bar-bar-mobile-padding);gap:var(--rt-action-bar-bar-mobile-gap)}.rtui-action-bar__actions{gap:var(--rt-action-bar-actions-mobile-gap)}.rtui-action-bar__action{padding:var(--rt-action-bar-action-mobile-padding);gap:var(--rt-action-bar-action-mobile-gap)}}.rtui-action-bar-action-menu{display:flex;flex-direction:column;padding:var(--rt-action-bar-action-menu-padding);border-radius:var(--rt-action-bar-action-border-radius);background-color:var(--rt-action-bar-action-menu-background-color);box-shadow:var(--rt-action-bar-action-menu-box-shadow);color:var(--rt-action-bar-action-menu-color);gap:var(--rt-action-bar-action-menu-gap)}.rtui-action-bar-action-menu__action{display:flex;align-items:center;justify-content:center;padding:var(--rt-action-bar-action-menu-action-padding);border:0;border-radius:var(--rt-action-bar-action-menu-action-border-radius);background-color:transparent;color:inherit;cursor:pointer;font-family:inherit;font-size:var(--rt-action-bar-action-menu-action-font-size);font-weight:var(--rt-action-bar-action-menu-action-font-weight);gap:var(--rt-action-bar-action-menu-action-gap)}.rtui-action-bar-action-menu__action:hover{background-color:var(--rt-action-bar-action-menu-action-hover-background-color)}@media screen and (max-width:959px){.rtui-action-bar-action-menu,.rtui-action-bar-action-menu__action{padding:var(--rt-action-bar-action-menu-action-mobile-padding);gap:var(--rt-action-bar-action-menu-action-mobile-gap)}}\n"] }]
         }], propDecorators: { config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: true }] }], closeAction: [{ type: i0.Output, args: ["closeAction"] }] } });
 
 class RtActionBarService {
@@ -4448,6 +4669,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
             type: Injectable
         }] });
 
+const BEM_BLOCK$4 = 'rtui-action-bar-container';
 class RtuiActionBarContainerComponent {
     constructor() {
         this.#actionBarService = inject(RtActionBarService);
@@ -4458,7 +4680,7 @@ class RtuiActionBarContainerComponent {
         this.#actionBarService.closeActionBar();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiActionBarContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: RtuiActionBarContainerComponent, isStandalone: true, selector: "rtui-action-bar-container", ngImport: i0, template: "@if (config()?.selected) {\n    <rtui-action-bar [@barState]=\"'opened'\" [config]=\"config()\" (closeAction)=\"closeBar()\" />\n}\n", styles: [":host{position:fixed;z-index:var(--rt-action-bar-container-z-index);display:flex;width:var(--rt-action-bar-container-width);align-items:center;justify-content:center;inset:var(--rt-action-bar-container-top) var(--rt-action-bar-container-right) var(--rt-action-bar-container-bottom) var(--rt-action-bar-container-left)}\n"], dependencies: [{ kind: "component", type: RtuiActionBarComponent, selector: "rtui-action-bar", inputs: ["config"], outputs: ["closeAction"] }], animations: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: RtuiActionBarContainerComponent, isStandalone: true, selector: "rtui-action-bar-container", host: { classAttribute: "rtui-action-bar-container" }, ngImport: i0, template: "@if (config()?.selected) {\n    <rtui-action-bar [@barState]=\"'opened'\" [config]=\"config()\" (closeAction)=\"closeBar()\" />\n}\n", styles: [":host{position:fixed;z-index:var(--rt-action-bar-container-z-index);display:flex;width:var(--rt-action-bar-container-width);align-items:center;justify-content:center;inset:var(--rt-action-bar-container-top) var(--rt-action-bar-container-right) var(--rt-action-bar-container-bottom) var(--rt-action-bar-container-left)}\n"], dependencies: [{ kind: "component", type: RtuiActionBarComponent, selector: "rtui-action-bar", inputs: ["config"], outputs: ["closeAction"] }], animations: [
             trigger('barState', [
                 state('opened', style({ transform: 'translateY(0)' })),
                 transition('void => *', [
@@ -4476,11 +4698,11 @@ class RtuiActionBarContainerComponent {
                     ])),
                 ]),
             ]),
-        ], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
+        ], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiActionBarContainerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rtui-action-bar-container', imports: [RtuiActionBarComponent], changeDetection: ChangeDetectionStrategy.Eager, animations: [
+            args: [{ selector: 'rtui-action-bar-container', host: { class: BEM_BLOCK$4 }, imports: [RtuiActionBarComponent], changeDetection: ChangeDetectionStrategy.OnPush, animations: [
                         trigger('barState', [
                             state('opened', style({ transform: 'translateY(0)' })),
                             transition('void => *', [
@@ -4524,6 +4746,7 @@ function provideRtUi(config) {
     return [RtAsideService, RtActionBarService, { provide: RT_UI_CONFIG, useValue: config ?? {} }];
 }
 
+const BEM_BLOCK$3 = 'rtui-snack-bar';
 class RtuiSnackBarComponent {
     #snackBarRef;
     #animationBuilder;
@@ -4570,11 +4793,11 @@ class RtuiSnackBarComponent {
         this.player?.play();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiSnackBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: RtuiSnackBarComponent, isStandalone: true, selector: "rtui-snack-bar", host: { listeners: { "mouseover": "onMouseOver()", "mouseout": "onMouseOut()" } }, viewQueries: [{ propertyName: "progressTplRef", first: true, predicate: ["progressTpl"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-container rtBlock=\"rt-snack-bar\">\n    <div rtElem=\"content\">\n        @if (data.icon) {\n            <div rtElem=\"content-icon-wrapper\">\n                <mat-icon rtElem=\"content-icon\" rtIconOutlined>{{ data.icon }}</mat-icon>\n            </div>\n        }\n\n        <div rtElem=\"content-message\">{{ data.message }}</div>\n    </div>\n\n    @if (data.action) {\n        <button rtElem=\"action-button\" mat-button (click)=\"dismiss()\">{{ data.action }}</button>\n    }\n\n    <button rtElem=\"close-button\" color=\"accent\" mat-icon-button type=\"button\" (click)=\"close()\">\n        <mat-icon rtElem=\"close-button-icon\">close</mat-icon>\n    </button>\n\n    @if (data.isProgressBarShown && data.duration) {\n        <div #progressTpl rtElem=\"progress\"></div>\n    }\n</ng-container>\n", styles: ["@charset \"UTF-8\";:host{display:flex;width:100%;height:100%;align-items:center;justify-content:space-between;--rt-snack-bar-content-gap: 1rem;--rt-snack-bar-icon-size: 2rem;--rt-snack-bar-icon-color: var(--rt-text-base-inverse);--rt-snack-bar-message-line-clamp: 5;--rt-snack-bar-action-padding: .5rem;--rt-snack-bar-action-margin: 0 .25rem;--rt-snack-bar-action-color: var(--rt-text-accent-info-soft);--rt-snack-bar-action-background-color: var(--rt-bg-accent-info-solid);--rt-snack-bar-progress-height: .5rem;--rt-snack-bar-close-button-color: var(--rt-text-base-inverse)}:host .rt-snack-bar__content{position:relative;display:flex;width:100%;height:100%;align-items:center;gap:var(--rt-snack-bar-content-gap)}:host .rt-snack-bar__content-icon-wrapper{margin-bottom:auto;line-height:.5}:host .rt-snack-bar__content-icon{width:var(--rt-snack-bar-icon-size);min-width:var(--rt-snack-bar-icon-size);height:var(--rt-snack-bar-icon-size);color:var(--rt-snack-bar-icon-color);font-size:var(--rt-snack-bar-icon-size)}:host .rt-snack-bar__content-message{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:var(--rt-snack-bar-message-line-clamp);text-overflow:ellipsis}:host .rt-snack-bar__action-button{position:relative;height:100%;padding:var(--rt-snack-bar-action-padding);margin:var(--rt-snack-bar-action-margin);color:var(--rt-snack-bar-action-color)}:host .rt-snack-bar__close-button{margin-bottom:auto}:host .rt-snack-bar__close-button-icon{color:var(--rt-snack-bar-close-button-color)}:host .rt-snack-bar__progress{position:absolute;right:0;bottom:0;left:0;width:100%;height:var(--rt-snack-bar-progress-height);background-color:var(--mat-button-filled-container-color);border-bottom-left-radius:var(--mat-snack-bar-container-shape);border-bottom-right-radius:var(--mat-snack-bar-container-shape)}\n"], dependencies: [{ kind: "component", type: MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: 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: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }, { kind: "directive", type: BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: RtIconOutlinedDirective, selector: "mat-icon[rtIconOutlined]", inputs: ["rtIconOutlined"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: RtuiSnackBarComponent, isStandalone: true, selector: "rtui-snack-bar", host: { listeners: { "mouseover": "onMouseOver()", "mouseout": "onMouseOut()" }, classAttribute: "rtui-snack-bar" }, viewQueries: [{ propertyName: "progressTplRef", first: true, predicate: ["progressTpl"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-container rtBlock=\"rt-snack-bar\">\n    <div rtElem=\"content\">\n        @if (data.icon) {\n            <div rtElem=\"content-icon-wrapper\">\n                <mat-icon rtElem=\"content-icon\" rtIconOutlined>{{ data.icon }}</mat-icon>\n            </div>\n        }\n\n        <div rtElem=\"content-message\">{{ data.message }}</div>\n    </div>\n\n    @if (data.action) {\n        <button rtElem=\"action-button\" mat-button (click)=\"dismiss()\">{{ data.action }}</button>\n    }\n\n    <button rtElem=\"close-button\" color=\"accent\" mat-icon-button type=\"button\" (click)=\"close()\">\n        <mat-icon rtElem=\"close-button-icon\">close</mat-icon>\n    </button>\n\n    @if (data.isProgressBarShown && data.duration) {\n        <div #progressTpl rtElem=\"progress\"></div>\n    }\n</ng-container>\n", styles: ["@charset \"UTF-8\";:host{display:flex;width:100%;height:100%;align-items:center;justify-content:space-between;--rt-snack-bar-content-gap: 1rem;--rt-snack-bar-icon-size: 2rem;--rt-snack-bar-icon-color: var(--rt-text-base-inverse);--rt-snack-bar-message-line-clamp: 5;--rt-snack-bar-action-padding: .5rem;--rt-snack-bar-action-margin: 0 .25rem;--rt-snack-bar-action-color: var(--rt-text-accent-info-soft);--rt-snack-bar-action-background-color: var(--rt-bg-accent-info-solid);--rt-snack-bar-progress-height: .5rem;--rt-snack-bar-close-button-color: var(--rt-text-base-inverse)}:host .rt-snack-bar__content{position:relative;display:flex;width:100%;height:100%;align-items:center;gap:var(--rt-snack-bar-content-gap)}:host .rt-snack-bar__content-icon-wrapper{margin-bottom:auto;line-height:.5}:host .rt-snack-bar__content-icon{width:var(--rt-snack-bar-icon-size);min-width:var(--rt-snack-bar-icon-size);height:var(--rt-snack-bar-icon-size);color:var(--rt-snack-bar-icon-color);font-size:var(--rt-snack-bar-icon-size)}:host .rt-snack-bar__content-message{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:var(--rt-snack-bar-message-line-clamp);text-overflow:ellipsis}:host .rt-snack-bar__action-button{position:relative;height:100%;padding:var(--rt-snack-bar-action-padding);margin:var(--rt-snack-bar-action-margin);color:var(--rt-snack-bar-action-color)}:host .rt-snack-bar__close-button{margin-bottom:auto}:host .rt-snack-bar__close-button-icon{color:var(--rt-snack-bar-close-button-color)}:host .rt-snack-bar__progress{position:absolute;right:0;bottom:0;left:0;width:100%;height:var(--rt-snack-bar-progress-height);background-color:var(--mat-button-filled-container-color);border-bottom-left-radius:var(--mat-snack-bar-container-shape);border-bottom-right-radius:var(--mat-snack-bar-container-shape)}\n"], dependencies: [{ kind: "component", type: MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: 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: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }, { kind: "directive", type: BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: RtIconOutlinedDirective, selector: "mat-icon[rtIconOutlined]", inputs: ["rtIconOutlined"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiSnackBarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rtui-snack-bar', changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatButton, MatIconButton, MatIcon, ElemDirective, BlockDirective, RtIconOutlinedDirective], template: "<ng-container rtBlock=\"rt-snack-bar\">\n    <div rtElem=\"content\">\n        @if (data.icon) {\n            <div rtElem=\"content-icon-wrapper\">\n                <mat-icon rtElem=\"content-icon\" rtIconOutlined>{{ data.icon }}</mat-icon>\n            </div>\n        }\n\n        <div rtElem=\"content-message\">{{ data.message }}</div>\n    </div>\n\n    @if (data.action) {\n        <button rtElem=\"action-button\" mat-button (click)=\"dismiss()\">{{ data.action }}</button>\n    }\n\n    <button rtElem=\"close-button\" color=\"accent\" mat-icon-button type=\"button\" (click)=\"close()\">\n        <mat-icon rtElem=\"close-button-icon\">close</mat-icon>\n    </button>\n\n    @if (data.isProgressBarShown && data.duration) {\n        <div #progressTpl rtElem=\"progress\"></div>\n    }\n</ng-container>\n", styles: ["@charset \"UTF-8\";:host{display:flex;width:100%;height:100%;align-items:center;justify-content:space-between;--rt-snack-bar-content-gap: 1rem;--rt-snack-bar-icon-size: 2rem;--rt-snack-bar-icon-color: var(--rt-text-base-inverse);--rt-snack-bar-message-line-clamp: 5;--rt-snack-bar-action-padding: .5rem;--rt-snack-bar-action-margin: 0 .25rem;--rt-snack-bar-action-color: var(--rt-text-accent-info-soft);--rt-snack-bar-action-background-color: var(--rt-bg-accent-info-solid);--rt-snack-bar-progress-height: .5rem;--rt-snack-bar-close-button-color: var(--rt-text-base-inverse)}:host .rt-snack-bar__content{position:relative;display:flex;width:100%;height:100%;align-items:center;gap:var(--rt-snack-bar-content-gap)}:host .rt-snack-bar__content-icon-wrapper{margin-bottom:auto;line-height:.5}:host .rt-snack-bar__content-icon{width:var(--rt-snack-bar-icon-size);min-width:var(--rt-snack-bar-icon-size);height:var(--rt-snack-bar-icon-size);color:var(--rt-snack-bar-icon-color);font-size:var(--rt-snack-bar-icon-size)}:host .rt-snack-bar__content-message{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:var(--rt-snack-bar-message-line-clamp);text-overflow:ellipsis}:host .rt-snack-bar__action-button{position:relative;height:100%;padding:var(--rt-snack-bar-action-padding);margin:var(--rt-snack-bar-action-margin);color:var(--rt-snack-bar-action-color)}:host .rt-snack-bar__close-button{margin-bottom:auto}:host .rt-snack-bar__close-button-icon{color:var(--rt-snack-bar-close-button-color)}:host .rt-snack-bar__progress{position:absolute;right:0;bottom:0;left:0;width:100%;height:var(--rt-snack-bar-progress-height);background-color:var(--mat-button-filled-container-color);border-bottom-left-radius:var(--mat-snack-bar-container-shape);border-bottom-right-radius:var(--mat-snack-bar-container-shape)}\n"] }]
+            args: [{ selector: 'rtui-snack-bar', host: { class: BEM_BLOCK$3 }, changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatButton, MatIconButton, MatIcon, ElemDirective, BlockDirective, RtIconOutlinedDirective], template: "<ng-container rtBlock=\"rt-snack-bar\">\n    <div rtElem=\"content\">\n        @if (data.icon) {\n            <div rtElem=\"content-icon-wrapper\">\n                <mat-icon rtElem=\"content-icon\" rtIconOutlined>{{ data.icon }}</mat-icon>\n            </div>\n        }\n\n        <div rtElem=\"content-message\">{{ data.message }}</div>\n    </div>\n\n    @if (data.action) {\n        <button rtElem=\"action-button\" mat-button (click)=\"dismiss()\">{{ data.action }}</button>\n    }\n\n    <button rtElem=\"close-button\" color=\"accent\" mat-icon-button type=\"button\" (click)=\"close()\">\n        <mat-icon rtElem=\"close-button-icon\">close</mat-icon>\n    </button>\n\n    @if (data.isProgressBarShown && data.duration) {\n        <div #progressTpl rtElem=\"progress\"></div>\n    }\n</ng-container>\n", styles: ["@charset \"UTF-8\";:host{display:flex;width:100%;height:100%;align-items:center;justify-content:space-between;--rt-snack-bar-content-gap: 1rem;--rt-snack-bar-icon-size: 2rem;--rt-snack-bar-icon-color: var(--rt-text-base-inverse);--rt-snack-bar-message-line-clamp: 5;--rt-snack-bar-action-padding: .5rem;--rt-snack-bar-action-margin: 0 .25rem;--rt-snack-bar-action-color: var(--rt-text-accent-info-soft);--rt-snack-bar-action-background-color: var(--rt-bg-accent-info-solid);--rt-snack-bar-progress-height: .5rem;--rt-snack-bar-close-button-color: var(--rt-text-base-inverse)}:host .rt-snack-bar__content{position:relative;display:flex;width:100%;height:100%;align-items:center;gap:var(--rt-snack-bar-content-gap)}:host .rt-snack-bar__content-icon-wrapper{margin-bottom:auto;line-height:.5}:host .rt-snack-bar__content-icon{width:var(--rt-snack-bar-icon-size);min-width:var(--rt-snack-bar-icon-size);height:var(--rt-snack-bar-icon-size);color:var(--rt-snack-bar-icon-color);font-size:var(--rt-snack-bar-icon-size)}:host .rt-snack-bar__content-message{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:var(--rt-snack-bar-message-line-clamp);text-overflow:ellipsis}:host .rt-snack-bar__action-button{position:relative;height:100%;padding:var(--rt-snack-bar-action-padding);margin:var(--rt-snack-bar-action-margin);color:var(--rt-snack-bar-action-color)}:host .rt-snack-bar__close-button{margin-bottom:auto}:host .rt-snack-bar__close-button-icon{color:var(--rt-snack-bar-close-button-color)}:host .rt-snack-bar__progress{position:absolute;right:0;bottom:0;left:0;width:100%;height:var(--rt-snack-bar-progress-height);background-color:var(--mat-button-filled-container-color);border-bottom-left-radius:var(--mat-snack-bar-container-shape);border-bottom-right-radius:var(--mat-snack-bar-container-shape)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { progressTplRef: [{ type: i0.ViewChild, args: ['progressTpl', { isSignal: true }] }], onMouseOver: [{
                 type: HostListener,
                 args: ['mouseover']
@@ -4714,8 +4937,13 @@ function getColorBasedOnBackground(backgroundColor) {
     return '#fff';
 }
 
+const BEM_BLOCK$2 = 'rtui-info-badge';
 class RtuiInfoBadgeComponent {
     constructor() {
+        this.#breakpoints = inject(BreakpointService);
+        /** Экран узкий: значение входа, если приложение его дало, иначе замер кита. */
+        this.narrow = computed(() => this.isMobile() ?? !!this.#breakpoints.isMobile(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "narrow" }] : /* istanbul ignore next */ []));
         this.size = input.required(/* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
         this.text = input.required(/* @ts-ignore */
@@ -4726,20 +4954,27 @@ class RtuiInfoBadgeComponent {
         ...(ngDevMode ? [{ debugName: "iconSide" }] : /* istanbul ignore next */ []));
         this.isFontBold = input(false, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "isFontBold" }] : /* istanbul ignore next */ []));
-        this.isMobile = input.required({ ...(ngDevMode ? { debugName: "isMobile" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /**
+         * Признак узкого экрана.
+         *
+         * @deprecated Кит определяет его сам — `RtuiBreakpointsService`. Вход оставлен ради
+         * приложений, которые уже его передают, и уйдёт в следующем крупном выпуске.
+         */
+        this.isMobile = input(null, { ...(ngDevMode ? { debugName: "isMobile" } : /* istanbul ignore next */ {}), transform: (value) => (value === null || value === undefined ? null : booleanAttribute(value)) });
         this.isTitleCollapsed = signal(false, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "isTitleCollapsed" }] : /* istanbul ignore next */ []));
         this.contentRef = viewChild('content', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "contentRef" }] : /* istanbul ignore next */ []));
-    }
-    get badgeClass() {
-        return {
+        /** Модификаторы блока значка: ставятся директивой, а не строкой в атрибуте. */
+        this.badgeModifiers = computed(() => ({
             'size-l': this.size() === INFO_BADGE_SIZE_ENUM.LARGE,
             'size-m': this.size() === INFO_BADGE_SIZE_ENUM.MEDIUM,
             'size-s': this.size() === INFO_BADGE_SIZE_ENUM.SMALL,
             bold: this.isFontBold(),
-        };
+        }), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "badgeModifiers" }] : /* istanbul ignore next */ []));
     }
+    #breakpoints;
     get iconStyles() {
         return {
             order: this.iconSide() === POSITION_ENUM.LEFT ? '-1' : '0',
@@ -4760,12 +4995,12 @@ class RtuiInfoBadgeComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiInfoBadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: RtuiInfoBadgeComponent, isStandalone: true, selector: "rtui-info-badge", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: true, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: true, transformFunction: null }, glyph: { classPropertyName: "glyph", publicName: "glyph", isSignal: true, isRequired: false, transformFunction: null }, iconSide: { classPropertyName: "iconSide", publicName: "iconSide", isSignal: true, isRequired: false, transformFunction: null }, isFontBold: { classPropertyName: "isFontBold", publicName: "isFontBold", isSignal: true, isRequired: false, transformFunction: null }, isMobile: { classPropertyName: "isMobile", publicName: "isMobile", isSignal: true, isRequired: true, transformFunction: null } }, viewQueries: [{ propertyName: "contentRef", first: true, predicate: ["content"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n    rtBlock=\"c-info-badge\"\n    matTooltipClass=\"custom-tooltip\"\n    matTooltipPosition=\"above\"\n    [matTooltip]=\"text()\"\n    [ngClass]=\"badgeClass\"\n    [matTooltipDisabled]=\"!isTitleCollapsed() || isMobile()\">\n    <div rtElem=\"content\" #content>{{ text() }}</div>\n    @if (glyph()) {\n        <mat-icon [ngStyle]=\"iconStyles\">{{ glyph() }}</mat-icon>\n    }\n</div>\n", styles: [":host{display:block;max-width:fit-content;border-radius:var(--rt-radius-full);background-color:var(--rt-info-badge-background-color, #005cbb);color:var(--rt-info-badge-color, var(--rt-text-static-light));line-height:normal}:host .c-info-badge{display:flex;box-sizing:border-box;align-items:center;justify-content:center;gap:var(--rt-spacing-2);line-height:normal}:host .c-info-badge__content{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .size-l{padding:var(--rt-spacing-4) var(--rt-spacing-12);font-size:var(--rt-font-size-md)}:host .size-l .mat-icon{font-size:var(--rt-font-size-xl)}:host .size-m{padding:var(--rt-spacing-4) var(--rt-spacing-12);font-size:var(--rt-font-size-sm)}:host .size-m .mat-icon{font-size:var(--rt-font-size-md)}:host .size-s{padding:var(--rt-spacing-4) var(--rt-spacing-12);font-size:var(--rt-font-size-xs);letter-spacing:.025rem}:host .size-s .mat-icon{font-size:var(--rt-font-size-xs)}:host .mat-icon{width:unset;height:unset}:host .bold{font-weight:var(--rt-font-weight-bold)}\n"], dependencies: [{ kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: RtuiInfoBadgeComponent, isStandalone: true, selector: "rtui-info-badge", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: true, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: true, transformFunction: null }, glyph: { classPropertyName: "glyph", publicName: "glyph", isSignal: true, isRequired: false, transformFunction: null }, iconSide: { classPropertyName: "iconSide", publicName: "iconSide", isSignal: true, isRequired: false, transformFunction: null }, isFontBold: { classPropertyName: "isFontBold", publicName: "isFontBold", isSignal: true, isRequired: false, transformFunction: null }, isMobile: { classPropertyName: "isMobile", publicName: "isMobile", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "rtui-info-badge" }, providers: [BreakpointService], viewQueries: [{ propertyName: "contentRef", first: true, predicate: ["content"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n    rtBlock=\"c-info-badge\"\n    matTooltipClass=\"custom-tooltip\"\n    matTooltipPosition=\"above\"\n    [matTooltip]=\"text()\"\n    [rtMod]=\"badgeModifiers()\"\n    [matTooltipDisabled]=\"!isTitleCollapsed() || narrow()\">\n    <div rtElem=\"content\" #content>{{ text() }}</div>\n    @if (glyph()) {\n        <mat-icon [ngStyle]=\"iconStyles\">{{ glyph() }}</mat-icon>\n    }\n</div>\n", styles: [":host{display:block;max-width:fit-content;border-radius:var(--rt-radius-full);background-color:var(--rt-info-badge-background-color, #005cbb);color:var(--rt-info-badge-color, var(--rt-text-static-light));line-height:normal}:host .c-info-badge{display:flex;box-sizing:border-box;align-items:center;justify-content:center;gap:var(--rt-spacing-2);line-height:normal}:host .c-info-badge__content{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .c-info-badge--size-l{padding:var(--rt-spacing-4) var(--rt-spacing-12);font-size:var(--rt-font-size-md)}:host .c-info-badge--size-l .mat-icon{font-size:var(--rt-font-size-xl)}:host .c-info-badge--size-m{padding:var(--rt-spacing-4) var(--rt-spacing-12);font-size:var(--rt-font-size-sm)}:host .c-info-badge--size-m .mat-icon{font-size:var(--rt-font-size-md)}:host .c-info-badge--size-s{padding:var(--rt-spacing-4) var(--rt-spacing-12);font-size:var(--rt-font-size-xs);letter-spacing:.025rem}:host .c-info-badge--size-s .mat-icon{font-size:var(--rt-font-size-xs)}:host .c-info-badge--bold{font-weight:var(--rt-font-weight-bold)}:host .mat-icon{width:unset;height:unset}\n"], dependencies: [{ kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }, { kind: "directive", type: ModDirective, selector: "[rtMod]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiInfoBadgeComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rtui-info-badge', changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatTooltip, NgClass, MatIcon, NgStyle, BlockDirective, ElemDirective], template: "<div\n    rtBlock=\"c-info-badge\"\n    matTooltipClass=\"custom-tooltip\"\n    matTooltipPosition=\"above\"\n    [matTooltip]=\"text()\"\n    [ngClass]=\"badgeClass\"\n    [matTooltipDisabled]=\"!isTitleCollapsed() || isMobile()\">\n    <div rtElem=\"content\" #content>{{ text() }}</div>\n    @if (glyph()) {\n        <mat-icon [ngStyle]=\"iconStyles\">{{ glyph() }}</mat-icon>\n    }\n</div>\n", styles: [":host{display:block;max-width:fit-content;border-radius:var(--rt-radius-full);background-color:var(--rt-info-badge-background-color, #005cbb);color:var(--rt-info-badge-color, var(--rt-text-static-light));line-height:normal}:host .c-info-badge{display:flex;box-sizing:border-box;align-items:center;justify-content:center;gap:var(--rt-spacing-2);line-height:normal}:host .c-info-badge__content{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .size-l{padding:var(--rt-spacing-4) var(--rt-spacing-12);font-size:var(--rt-font-size-md)}:host .size-l .mat-icon{font-size:var(--rt-font-size-xl)}:host .size-m{padding:var(--rt-spacing-4) var(--rt-spacing-12);font-size:var(--rt-font-size-sm)}:host .size-m .mat-icon{font-size:var(--rt-font-size-md)}:host .size-s{padding:var(--rt-spacing-4) var(--rt-spacing-12);font-size:var(--rt-font-size-xs);letter-spacing:.025rem}:host .size-s .mat-icon{font-size:var(--rt-font-size-xs)}:host .mat-icon{width:unset;height:unset}:host .bold{font-weight:var(--rt-font-weight-bold)}\n"] }]
-        }], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: true }] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: true }] }], glyph: [{ type: i0.Input, args: [{ isSignal: true, alias: "glyph", required: false }] }], iconSide: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconSide", required: false }] }], isFontBold: [{ type: i0.Input, args: [{ isSignal: true, alias: "isFontBold", required: false }] }], isMobile: [{ type: i0.Input, args: [{ isSignal: true, alias: "isMobile", required: true }] }], contentRef: [{ type: i0.ViewChild, args: ['content', { isSignal: true }] }] } });
+            args: [{ selector: 'rtui-info-badge', host: { class: BEM_BLOCK$2 }, providers: [BreakpointService], changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatTooltip, MatIcon, NgStyle, BlockDirective, ElemDirective, ModDirective], template: "<div\n    rtBlock=\"c-info-badge\"\n    matTooltipClass=\"custom-tooltip\"\n    matTooltipPosition=\"above\"\n    [matTooltip]=\"text()\"\n    [rtMod]=\"badgeModifiers()\"\n    [matTooltipDisabled]=\"!isTitleCollapsed() || narrow()\">\n    <div rtElem=\"content\" #content>{{ text() }}</div>\n    @if (glyph()) {\n        <mat-icon [ngStyle]=\"iconStyles\">{{ glyph() }}</mat-icon>\n    }\n</div>\n", styles: [":host{display:block;max-width:fit-content;border-radius:var(--rt-radius-full);background-color:var(--rt-info-badge-background-color, #005cbb);color:var(--rt-info-badge-color, var(--rt-text-static-light));line-height:normal}:host .c-info-badge{display:flex;box-sizing:border-box;align-items:center;justify-content:center;gap:var(--rt-spacing-2);line-height:normal}:host .c-info-badge__content{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .c-info-badge--size-l{padding:var(--rt-spacing-4) var(--rt-spacing-12);font-size:var(--rt-font-size-md)}:host .c-info-badge--size-l .mat-icon{font-size:var(--rt-font-size-xl)}:host .c-info-badge--size-m{padding:var(--rt-spacing-4) var(--rt-spacing-12);font-size:var(--rt-font-size-sm)}:host .c-info-badge--size-m .mat-icon{font-size:var(--rt-font-size-md)}:host .c-info-badge--size-s{padding:var(--rt-spacing-4) var(--rt-spacing-12);font-size:var(--rt-font-size-xs);letter-spacing:.025rem}:host .c-info-badge--size-s .mat-icon{font-size:var(--rt-font-size-xs)}:host .c-info-badge--bold{font-weight:var(--rt-font-weight-bold)}:host .mat-icon{width:unset;height:unset}\n"] }]
+        }], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: true }] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: true }] }], glyph: [{ type: i0.Input, args: [{ isSignal: true, alias: "glyph", required: false }] }], iconSide: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconSide", required: false }] }], isFontBold: [{ type: i0.Input, args: [{ isSignal: true, alias: "isFontBold", required: false }] }], isMobile: [{ type: i0.Input, args: [{ isSignal: true, alias: "isMobile", required: false }] }], contentRef: [{ type: i0.ViewChild, args: ['content', { isSignal: true }] }] } });
 
 var INFO_BADGE_TYPE_ENUM;
 (function (INFO_BADGE_TYPE_ENUM) {
@@ -4776,6 +5011,7 @@ var INFO_BADGE_TYPE_ENUM;
     INFO_BADGE_TYPE_ENUM["DISABLED"] = "disabled";
 })(INFO_BADGE_TYPE_ENUM || (INFO_BADGE_TYPE_ENUM = {}));
 
+const BEM_BLOCK$1 = 'rtui-file-upload';
 class RtuiFileUploadComponent {
     constructor() {
         this.isIconOutlined = input(true, /* @ts-ignore */
@@ -4806,7 +5042,7 @@ class RtuiFileUploadComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiFileUploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.5", type: RtuiFileUploadComponent, isStandalone: true, selector: "rtui-file-upload", inputs: { isIconOutlined: { classPropertyName: "isIconOutlined", publicName: "isIconOutlined", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { uploadFile: "uploadFile" }, host: { listeners: { "dragover": "onDragOver($event)", "dragleave": "onDragLeave($event)", "drop": "onDrop($event)" }, properties: { "class.--dragged": "isDragOver()" } }, ngImport: i0, template: "<ng-container rtBlock=\"file-upload\">\n    <mat-icon rtElem=\"icon\" [rtIconOutlined]=\"isIconOutlined()\">backup</mat-icon>\n\n    <div rtElem=\"title\">Drag and drop your file here or</div>\n\n    <input #uploadInput hidden type=\"file\" (change)=\"onFileSelect($event)\" />\n\n    <button rtBlock=\"c-button\" mat-button color=\"accent\" (click)=\"uploadInput.click()\">Choose file</button>\n</ng-container>\n", styles: ["@charset \"UTF-8\";:host{--rt-file-upload-host-width: 100%;--rt-file-upload-host-max-width: 20rem;--rt-file-upload-host-height: 100%;--rt-file-upload-host-max-height: 20rem;--rt-file-upload-host-display: flex;--rt-file-upload-host-flex-direction: column;--rt-file-upload-host-justify-content: center;--rt-file-upload-host-align-items: center;--rt-file-upload-host-gap: 1rem;--rt-file-upload-host-padding: 1rem;--rt-file-upload-host-border: 2px dashed var(--rt-border-neutral-default);--rt-file-upload-host-border-radius: 1rem;--rt-file-upload-host-dragged-border-color: var(--mat-button-text-label-text-color);--rt-file-upload-icon-size: 2rem;--rt-file-upload-icon-color: var(--rt-text-base-strong);--rt-file-upload-title-font-size: 1rem;--rt-file-upload-title-color: var(--rt-text-base-primary);display:var(--rt-file-upload-host-display);width:var(--rt-file-upload-host-width);max-width:var(--rt-file-upload-host-max-width);height:var(--rt-file-upload-host-height);max-height:var(--rt-file-upload-host-max-height);flex-direction:var(--rt-file-upload-host-flex-direction);align-items:var(--rt-file-upload-host-align-items);justify-content:var(--rt-file-upload-host-justify-content);padding:var(--rt-file-upload-host-padding);border:var(--rt-file-upload-host-border);border-radius:var(--rt-file-upload-host-border-radius);gap:var(--rt-file-upload-host-gap);transition:border-color .3s ease-in-out}:host.--dragged{border-color:var(--rt-file-upload-host-dragged-border-color)}:host .file-upload__icon{width:var(--rt-file-upload-icon-size);height:var(--rt-file-upload-icon-size);color:var(--rt-file-upload-icon-color);font-size:var(--rt-file-upload-icon-size)}:host .file-upload__title{color:var(--rt-file-upload-title-color);font-size:var(--rt-file-upload-title-font-size)}\n"], dependencies: [{ kind: "component", type: MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: 
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.5", type: RtuiFileUploadComponent, isStandalone: true, selector: "rtui-file-upload", inputs: { isIconOutlined: { classPropertyName: "isIconOutlined", publicName: "isIconOutlined", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { uploadFile: "uploadFile" }, host: { listeners: { "dragover": "onDragOver($event)", "dragleave": "onDragLeave($event)", "drop": "onDrop($event)" }, properties: { "class.--dragged": "isDragOver()" }, classAttribute: "rtui-file-upload" }, ngImport: i0, template: "<ng-container rtBlock=\"file-upload\">\n    <mat-icon rtElem=\"icon\" [rtIconOutlined]=\"isIconOutlined()\">backup</mat-icon>\n\n    <div rtElem=\"title\">Drag and drop your file here or</div>\n\n    <input #uploadInput hidden type=\"file\" (change)=\"onFileSelect($event)\" />\n\n    <button mat-button color=\"accent\" (click)=\"uploadInput.click()\">Choose file</button>\n</ng-container>\n", styles: ["@charset \"UTF-8\";:host{--rt-file-upload-host-width: 100%;--rt-file-upload-host-max-width: 20rem;--rt-file-upload-host-height: 100%;--rt-file-upload-host-max-height: 20rem;--rt-file-upload-host-display: flex;--rt-file-upload-host-flex-direction: column;--rt-file-upload-host-justify-content: center;--rt-file-upload-host-align-items: center;--rt-file-upload-host-gap: 1rem;--rt-file-upload-host-padding: 1rem;--rt-file-upload-host-border: 2px dashed var(--rt-border-neutral-default);--rt-file-upload-host-border-radius: 1rem;--rt-file-upload-host-dragged-border-color: var(--mat-button-text-label-text-color);--rt-file-upload-icon-size: 2rem;--rt-file-upload-icon-color: var(--rt-text-base-strong);--rt-file-upload-title-font-size: 1rem;--rt-file-upload-title-color: var(--rt-text-base-primary);display:var(--rt-file-upload-host-display);width:var(--rt-file-upload-host-width);max-width:var(--rt-file-upload-host-max-width);height:var(--rt-file-upload-host-height);max-height:var(--rt-file-upload-host-max-height);flex-direction:var(--rt-file-upload-host-flex-direction);align-items:var(--rt-file-upload-host-align-items);justify-content:var(--rt-file-upload-host-justify-content);padding:var(--rt-file-upload-host-padding);border:var(--rt-file-upload-host-border);border-radius:var(--rt-file-upload-host-border-radius);gap:var(--rt-file-upload-host-gap);transition:border-color .3s ease-in-out}:host.--dragged{border-color:var(--rt-file-upload-host-dragged-border-color)}:host .file-upload__icon{width:var(--rt-file-upload-icon-size);height:var(--rt-file-upload-icon-size);color:var(--rt-file-upload-icon-color);font-size:var(--rt-file-upload-icon-size)}:host .file-upload__title{color:var(--rt-file-upload-title-color);font-size:var(--rt-file-upload-title-font-size)}\n"], dependencies: [{ kind: "component", type: MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: 
                 // directives
                 ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }, { kind: "directive", type: BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: RtIconOutlinedDirective, selector: "mat-icon[rtIconOutlined]", inputs: ["rtIconOutlined"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
@@ -4820,15 +5056,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                         BlockDirective,
                         RtIconOutlinedDirective,
                     ], host: {
+                        class: BEM_BLOCK$1,
                         '[class.--dragged]': 'isDragOver()',
                         '(dragover)': 'onDragOver($event)',
                         '(dragleave)': 'onDragLeave($event)',
                         '(drop)': 'onDrop($event)',
-                    }, template: "<ng-container rtBlock=\"file-upload\">\n    <mat-icon rtElem=\"icon\" [rtIconOutlined]=\"isIconOutlined()\">backup</mat-icon>\n\n    <div rtElem=\"title\">Drag and drop your file here or</div>\n\n    <input #uploadInput hidden type=\"file\" (change)=\"onFileSelect($event)\" />\n\n    <button rtBlock=\"c-button\" mat-button color=\"accent\" (click)=\"uploadInput.click()\">Choose file</button>\n</ng-container>\n", styles: ["@charset \"UTF-8\";:host{--rt-file-upload-host-width: 100%;--rt-file-upload-host-max-width: 20rem;--rt-file-upload-host-height: 100%;--rt-file-upload-host-max-height: 20rem;--rt-file-upload-host-display: flex;--rt-file-upload-host-flex-direction: column;--rt-file-upload-host-justify-content: center;--rt-file-upload-host-align-items: center;--rt-file-upload-host-gap: 1rem;--rt-file-upload-host-padding: 1rem;--rt-file-upload-host-border: 2px dashed var(--rt-border-neutral-default);--rt-file-upload-host-border-radius: 1rem;--rt-file-upload-host-dragged-border-color: var(--mat-button-text-label-text-color);--rt-file-upload-icon-size: 2rem;--rt-file-upload-icon-color: var(--rt-text-base-strong);--rt-file-upload-title-font-size: 1rem;--rt-file-upload-title-color: var(--rt-text-base-primary);display:var(--rt-file-upload-host-display);width:var(--rt-file-upload-host-width);max-width:var(--rt-file-upload-host-max-width);height:var(--rt-file-upload-host-height);max-height:var(--rt-file-upload-host-max-height);flex-direction:var(--rt-file-upload-host-flex-direction);align-items:var(--rt-file-upload-host-align-items);justify-content:var(--rt-file-upload-host-justify-content);padding:var(--rt-file-upload-host-padding);border:var(--rt-file-upload-host-border);border-radius:var(--rt-file-upload-host-border-radius);gap:var(--rt-file-upload-host-gap);transition:border-color .3s ease-in-out}:host.--dragged{border-color:var(--rt-file-upload-host-dragged-border-color)}:host .file-upload__icon{width:var(--rt-file-upload-icon-size);height:var(--rt-file-upload-icon-size);color:var(--rt-file-upload-icon-color);font-size:var(--rt-file-upload-icon-size)}:host .file-upload__title{color:var(--rt-file-upload-title-color);font-size:var(--rt-file-upload-title-font-size)}\n"] }]
+                    }, template: "<ng-container rtBlock=\"file-upload\">\n    <mat-icon rtElem=\"icon\" [rtIconOutlined]=\"isIconOutlined()\">backup</mat-icon>\n\n    <div rtElem=\"title\">Drag and drop your file here or</div>\n\n    <input #uploadInput hidden type=\"file\" (change)=\"onFileSelect($event)\" />\n\n    <button mat-button color=\"accent\" (click)=\"uploadInput.click()\">Choose file</button>\n</ng-container>\n", styles: ["@charset \"UTF-8\";:host{--rt-file-upload-host-width: 100%;--rt-file-upload-host-max-width: 20rem;--rt-file-upload-host-height: 100%;--rt-file-upload-host-max-height: 20rem;--rt-file-upload-host-display: flex;--rt-file-upload-host-flex-direction: column;--rt-file-upload-host-justify-content: center;--rt-file-upload-host-align-items: center;--rt-file-upload-host-gap: 1rem;--rt-file-upload-host-padding: 1rem;--rt-file-upload-host-border: 2px dashed var(--rt-border-neutral-default);--rt-file-upload-host-border-radius: 1rem;--rt-file-upload-host-dragged-border-color: var(--mat-button-text-label-text-color);--rt-file-upload-icon-size: 2rem;--rt-file-upload-icon-color: var(--rt-text-base-strong);--rt-file-upload-title-font-size: 1rem;--rt-file-upload-title-color: var(--rt-text-base-primary);display:var(--rt-file-upload-host-display);width:var(--rt-file-upload-host-width);max-width:var(--rt-file-upload-host-max-width);height:var(--rt-file-upload-host-height);max-height:var(--rt-file-upload-host-max-height);flex-direction:var(--rt-file-upload-host-flex-direction);align-items:var(--rt-file-upload-host-align-items);justify-content:var(--rt-file-upload-host-justify-content);padding:var(--rt-file-upload-host-padding);border:var(--rt-file-upload-host-border);border-radius:var(--rt-file-upload-host-border-radius);gap:var(--rt-file-upload-host-gap);transition:border-color .3s ease-in-out}:host.--dragged{border-color:var(--rt-file-upload-host-dragged-border-color)}:host .file-upload__icon{width:var(--rt-file-upload-icon-size);height:var(--rt-file-upload-icon-size);color:var(--rt-file-upload-icon-color);font-size:var(--rt-file-upload-icon-size)}:host .file-upload__title{color:var(--rt-file-upload-title-color);font-size:var(--rt-file-upload-title-font-size)}\n"] }]
         }], propDecorators: { isIconOutlined: [{ type: i0.Input, args: [{ isSignal: true, alias: "isIconOutlined", required: false }] }], uploadFile: [{ type: i0.Output, args: ["uploadFile"] }] } });
 
+const BEM_BLOCK = 'rtui-image-upload';
 class RtuiImageUploadComponent {
     constructor() {
+        this.#breakpoints = inject(BreakpointService);
         this.#documentRef = inject(DOCUMENT);
         this.#formats = {
             ['png']: 'png',
@@ -4838,6 +5077,9 @@ class RtuiImageUploadComponent {
         };
         this.#originalMimeType = signal(null, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "#originalMimeType" }] : /* istanbul ignore next */ []));
+        /** Экран узкий: значение входа, если приложение его дало, иначе замер кита. */
+        this.narrow = computed(() => this.isMobile() ?? !!this.#breakpoints.isMobile(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "narrow" }] : /* istanbul ignore next */ []));
         this.imageFormat = computed(() => {
             const type = this.#originalMimeType();
             return this.#formats[type?.toLowerCase() || ''] || 'png';
@@ -4845,7 +5087,13 @@ class RtuiImageUploadComponent {
         ...(ngDevMode ? [{ debugName: "imageFormat" }] : /* istanbul ignore next */ []));
         this.imageUrl = model.required(/* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "imageUrl" }] : /* istanbul ignore next */ []));
-        this.isMobile = input.required({ ...(ngDevMode ? { debugName: "isMobile" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /**
+         * Признак узкого экрана.
+         *
+         * @deprecated Кит определяет его сам — `RtuiBreakpointsService`. Вход оставлен ради
+         * приложений, которые уже его передают, и уйдёт в следующем крупном выпуске.
+         */
+        this.isMobile = input(null, { ...(ngDevMode ? { debugName: "isMobile" } : /* istanbul ignore next */ {}), transform: (value) => (value === null || value === undefined ? null : booleanAttribute(value)) });
         this.fileName = input('image', { ...(ngDevMode ? { debugName: "fileName" } : /* istanbul ignore next */ {}), transform: transformStringInput });
         this.isActive = input(true, { ...(ngDevMode ? { debugName: "isActive" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         this.isSaveButtonShown = input(true, { ...(ngDevMode ? { debugName: "isSaveButtonShown" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
@@ -4868,6 +5116,7 @@ class RtuiImageUploadComponent {
         this.imageChanged = output();
         this.save = output();
     }
+    #breakpoints;
     #documentRef;
     #formats;
     #originalMimeType;
@@ -4920,7 +5169,7 @@ class RtuiImageUploadComponent {
         this.save.emit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiImageUploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: RtuiImageUploadComponent, isStandalone: true, selector: "rtui-image-upload", inputs: { imageUrl: { classPropertyName: "imageUrl", publicName: "imageUrl", isSignal: true, isRequired: true, transformFunction: null }, isMobile: { classPropertyName: "isMobile", publicName: "isMobile", isSignal: true, isRequired: true, transformFunction: null }, fileName: { classPropertyName: "fileName", publicName: "fileName", isSignal: true, isRequired: false, transformFunction: null }, isActive: { classPropertyName: "isActive", publicName: "isActive", isSignal: true, isRequired: false, transformFunction: null }, isSaveButtonShown: { classPropertyName: "isSaveButtonShown", publicName: "isSaveButtonShown", isSignal: true, isRequired: false, transformFunction: null }, isDownloadButtonEnabled: { classPropertyName: "isDownloadButtonEnabled", publicName: "isDownloadButtonEnabled", isSignal: true, isRequired: false, transformFunction: null }, isTooltipDisabled: { classPropertyName: "isTooltipDisabled", publicName: "isTooltipDisabled", isSignal: true, isRequired: false, transformFunction: null }, isActionsShown: { classPropertyName: "isActionsShown", publicName: "isActionsShown", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null }, tooltipPosition: { classPropertyName: "tooltipPosition", publicName: "tooltipPosition", isSignal: true, isRequired: false, transformFunction: null }, imageQuality: { classPropertyName: "imageQuality", publicName: "imageQuality", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { imageUrl: "imageUrlChange", imageChanged: "imageChanged", save: "save" }, ngImport: i0, template: "@if (loading()) {\n    <rtui-spinner />\n} @else if (originalImage()) {\n    <div rtBlock=\"rtui-image-cropper\">\n        <image-cropper\n            alignImage=\"center\"\n            [format]=\"imageFormat()\"\n            [imageQuality]=\"imageQuality()\"\n            [allowMoveImage]=\"true\"\n            [maintainAspectRatio]=\"false\"\n            [imageFile]=\"originalImage()\"\n            (imageCropped)=\"onImageCropped($event)\" />\n\n        @if (isActionsShown()) {\n            <div rtElem=\"actions\">\n                <button rtBlock=\"c-button\" mat-button color=\"accent\" (click)=\"onCancel()\">Cancel</button>\n                <button mat-flat-button (click)=\"onApply()\">Apply</button>\n            </div>\n        }\n    </div>\n} @else {\n    <input #uploadInput hidden type=\"file\" accept=\".jpg,.jpeg,.png,.webp\" (change)=\"onFileSelect($event)\" />\n\n    @if (imageUrl()) {\n        <div rtBlock=\"rtui-image-container\">\n            <img\n                rtElem=\"image\"\n                role=\"button\"\n                tabindex=\"0\"\n                alt=\"img\"\n                matTooltipClass=\"custom-tooltip\"\n                [matTooltip]=\"tooltip()\"\n                [matTooltipPosition]=\"tooltipPosition()\"\n                [matTooltipDisabled]=\"isMobile() || !tooltip() || !isActive() || isTooltipDisabled()\"\n                [rtMod]=\"{ active: isActive() }\"\n                [src]=\"imageUrl()\"\n                (click)=\"uploadInput.click()\"\n                (keydown.enter)=\"uploadInput.click()\" />\n\n            @if (isSaveButtonShown()) {\n                <button\n                    rtElem=\"action\"\n                    mat-icon-button\n                    aria-label=\"Download image\"\n                    matTooltip=\"Download image\"\n                    matTooltipPosition=\"above\"\n                    [matTooltipDisabled]=\"isMobile()\"\n                    (click)=\"onDownloadImage()\">\n                    <mat-icon rtIconOutlined>download</mat-icon>\n                </button>\n            }\n        </div>\n    } @else {\n        <rtui-file-upload (uploadFile)=\"onFileUpload($event)\" />\n    }\n}\n", styles: ["@charset \"UTF-8\";:host{--rt-image-upload-host-width: 100%;--rt-image-upload-host-min-width: 100%;--rt-image-upload-host-max-width: 100%;--rt-image-upload-host-height: 100%;--rt-image-upload-host-min-height: 15rem;--rt-image-upload-host-max-height: 100%;--rt-image-upload-host-display: flex;--rt-image-upload-host-justify-content: center;--rt-image-upload-host-align-items: center;--rt-image-upload-image-cropper-padding: .25rem;--rt-image-upload-image-cropper-actions-display: flex;--rt-image-upload-image-cropper-actions-justify-content: flex-end;--rt-image-upload-image-cropper-actions-gap: .5rem;--rt-image-upload-image-cropper-actions-margin-top: .5rem;--rt-image-upload-image-container-position: relative;--rt-image-upload-image-container-padding: .5rem;--rt-image-upload-image-container-image-position: relative;--rt-image-upload-image-container-image-height: 100%;--rt-image-upload-image-container-image-max-height: 15rem;--rt-image-upload-image-container-image-object-fit: contain;display:var(--rt-image-upload-host-display);width:var(--rt-image-upload-host-width);min-width:var(--rt-image-upload-host-min-height);max-width:var(--rt-image-upload-host-max-width);height:var(--rt-image-upload-host-height);min-height:var(--rt-image-upload-host-min-height);max-height:var(--rt-image-upload-host-max-height);align-items:var(--rt-image-upload-host-align-items);justify-content:var(--rt-image-upload-host-justify-content)}:host .rtui-image-cropper{padding:var(--rt-image-upload-image-cropper-padding)}:host .rtui-image-cropper__actions{display:var(--rt-image-upload-image-cropper-actions-display);justify-content:var(--rt-image-upload-image-cropper-actions-justify-content);margin-top:var(--rt-image-upload-image-cropper-actions-justify-margin-top);gap:var(--rt-image-upload-image-cropper-actions-gap)}:host .rtui-image-container{position:var(--rt-image-upload-image-container-position);padding:var(--rt-image-upload-image-container-padding)}:host .rtui-image-container__image{position:var(--rt-image-upload-image-container-image-position);height:var(--rt-image-upload-image-container-image-height);max-height:var(--rt-image-upload-image-container-image-max-height);object-fit:var(--rt-image-upload-image-container-image-object-fit);pointer-events:none}:host .rtui-image-container__image--active{cursor:pointer;pointer-events:initial}:host .rtui-image-container__image--active:hover{opacity:.6}:host .rtui-image-container__action{position:absolute;z-index:999;top:0;right:0;backdrop-filter:blur(1.25rem)}\n"], dependencies: [{ kind: "component", type: 
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: RtuiImageUploadComponent, isStandalone: true, selector: "rtui-image-upload", inputs: { imageUrl: { classPropertyName: "imageUrl", publicName: "imageUrl", isSignal: true, isRequired: true, transformFunction: null }, isMobile: { classPropertyName: "isMobile", publicName: "isMobile", isSignal: true, isRequired: false, transformFunction: null }, fileName: { classPropertyName: "fileName", publicName: "fileName", isSignal: true, isRequired: false, transformFunction: null }, isActive: { classPropertyName: "isActive", publicName: "isActive", isSignal: true, isRequired: false, transformFunction: null }, isSaveButtonShown: { classPropertyName: "isSaveButtonShown", publicName: "isSaveButtonShown", isSignal: true, isRequired: false, transformFunction: null }, isDownloadButtonEnabled: { classPropertyName: "isDownloadButtonEnabled", publicName: "isDownloadButtonEnabled", isSignal: true, isRequired: false, transformFunction: null }, isTooltipDisabled: { classPropertyName: "isTooltipDisabled", publicName: "isTooltipDisabled", isSignal: true, isRequired: false, transformFunction: null }, isActionsShown: { classPropertyName: "isActionsShown", publicName: "isActionsShown", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null }, tooltipPosition: { classPropertyName: "tooltipPosition", publicName: "tooltipPosition", isSignal: true, isRequired: false, transformFunction: null }, imageQuality: { classPropertyName: "imageQuality", publicName: "imageQuality", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { imageUrl: "imageUrlChange", imageChanged: "imageChanged", save: "save" }, host: { classAttribute: "rtui-image-upload" }, providers: [BreakpointService], ngImport: i0, template: "@if (loading()) {\n    <rtui-spinner />\n} @else if (originalImage()) {\n    <div rtBlock=\"rtui-image-cropper\">\n        <image-cropper\n            alignImage=\"center\"\n            [format]=\"imageFormat()\"\n            [imageQuality]=\"imageQuality()\"\n            [allowMoveImage]=\"true\"\n            [maintainAspectRatio]=\"false\"\n            [imageFile]=\"originalImage()\"\n            (imageCropped)=\"onImageCropped($event)\" />\n\n        @if (isActionsShown()) {\n            <div rtElem=\"actions\">\n                <button mat-button color=\"accent\" (click)=\"onCancel()\">Cancel</button>\n                <button mat-flat-button (click)=\"onApply()\">Apply</button>\n            </div>\n        }\n    </div>\n} @else {\n    <input #uploadInput hidden type=\"file\" accept=\".jpg,.jpeg,.png,.webp\" (change)=\"onFileSelect($event)\" />\n\n    @if (imageUrl()) {\n        <div rtBlock=\"rtui-image-container\">\n            <img\n                rtElem=\"image\"\n                role=\"button\"\n                tabindex=\"0\"\n                alt=\"img\"\n                matTooltipClass=\"custom-tooltip\"\n                [matTooltip]=\"tooltip()\"\n                [matTooltipPosition]=\"tooltipPosition()\"\n                [matTooltipDisabled]=\"narrow() || !tooltip() || !isActive() || isTooltipDisabled()\"\n                [rtMod]=\"{ active: isActive() }\"\n                [src]=\"imageUrl()\"\n                (click)=\"uploadInput.click()\"\n                (keydown.enter)=\"uploadInput.click()\" />\n\n            @if (isSaveButtonShown()) {\n                <button\n                    rtElem=\"action\"\n                    mat-icon-button\n                    aria-label=\"Download image\"\n                    matTooltip=\"Download image\"\n                    matTooltipPosition=\"above\"\n                    [matTooltipDisabled]=\"narrow()\"\n                    (click)=\"onDownloadImage()\">\n                    <mat-icon rtIconOutlined>download</mat-icon>\n                </button>\n            }\n        </div>\n    } @else {\n        <rtui-file-upload (uploadFile)=\"onFileUpload($event)\" />\n    }\n}\n", styles: ["@charset \"UTF-8\";:host{--rt-image-upload-host-width: 100%;--rt-image-upload-host-min-width: 100%;--rt-image-upload-host-max-width: 100%;--rt-image-upload-host-height: 100%;--rt-image-upload-host-min-height: 15rem;--rt-image-upload-host-max-height: 100%;--rt-image-upload-host-display: flex;--rt-image-upload-host-justify-content: center;--rt-image-upload-host-align-items: center;--rt-image-upload-image-cropper-padding: .25rem;--rt-image-upload-image-cropper-actions-display: flex;--rt-image-upload-image-cropper-actions-justify-content: flex-end;--rt-image-upload-image-cropper-actions-gap: .5rem;--rt-image-upload-image-cropper-actions-margin-top: .5rem;--rt-image-upload-image-container-position: relative;--rt-image-upload-image-container-padding: .5rem;--rt-image-upload-image-container-image-position: relative;--rt-image-upload-image-container-image-height: 100%;--rt-image-upload-image-container-image-max-height: 15rem;--rt-image-upload-image-container-image-object-fit: contain;display:var(--rt-image-upload-host-display);width:var(--rt-image-upload-host-width);min-width:var(--rt-image-upload-host-min-height);max-width:var(--rt-image-upload-host-max-width);height:var(--rt-image-upload-host-height);min-height:var(--rt-image-upload-host-min-height);max-height:var(--rt-image-upload-host-max-height);align-items:var(--rt-image-upload-host-align-items);justify-content:var(--rt-image-upload-host-justify-content)}:host .rtui-image-cropper{padding:var(--rt-image-upload-image-cropper-padding)}:host .rtui-image-cropper__actions{display:var(--rt-image-upload-image-cropper-actions-display);justify-content:var(--rt-image-upload-image-cropper-actions-justify-content);margin-top:var(--rt-image-upload-image-cropper-actions-justify-margin-top);gap:var(--rt-image-upload-image-cropper-actions-gap)}:host .rtui-image-container{position:var(--rt-image-upload-image-container-position);padding:var(--rt-image-upload-image-container-padding)}:host .rtui-image-container__image{position:var(--rt-image-upload-image-container-image-position);height:var(--rt-image-upload-image-container-image-height);max-height:var(--rt-image-upload-image-container-image-max-height);object-fit:var(--rt-image-upload-image-container-image-object-fit);pointer-events:none}:host .rtui-image-container__image--active{cursor:pointer;pointer-events:initial}:host .rtui-image-container__image--active:hover{opacity:.6}:host .rtui-image-container__action{position:absolute;z-index:999;top:0;right:0;backdrop-filter:blur(1.25rem)}\n"], dependencies: [{ kind: "component", type: 
                 // material
                 MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: 
                 // cropper
@@ -4930,7 +5179,7 @@ class RtuiImageUploadComponent {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiImageUploadComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rtui-image-upload', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+            args: [{ selector: 'rtui-image-upload', host: { class: BEM_BLOCK }, providers: [BreakpointService], changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         // material
                         MatIcon,
                         MatButton,
@@ -4945,8 +5194,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                         RtuiSpinnerComponent,
                         RtuiFileUploadComponent,
                         RtIconOutlinedDirective,
-                    ], template: "@if (loading()) {\n    <rtui-spinner />\n} @else if (originalImage()) {\n    <div rtBlock=\"rtui-image-cropper\">\n        <image-cropper\n            alignImage=\"center\"\n            [format]=\"imageFormat()\"\n            [imageQuality]=\"imageQuality()\"\n            [allowMoveImage]=\"true\"\n            [maintainAspectRatio]=\"false\"\n            [imageFile]=\"originalImage()\"\n            (imageCropped)=\"onImageCropped($event)\" />\n\n        @if (isActionsShown()) {\n            <div rtElem=\"actions\">\n                <button rtBlock=\"c-button\" mat-button color=\"accent\" (click)=\"onCancel()\">Cancel</button>\n                <button mat-flat-button (click)=\"onApply()\">Apply</button>\n            </div>\n        }\n    </div>\n} @else {\n    <input #uploadInput hidden type=\"file\" accept=\".jpg,.jpeg,.png,.webp\" (change)=\"onFileSelect($event)\" />\n\n    @if (imageUrl()) {\n        <div rtBlock=\"rtui-image-container\">\n            <img\n                rtElem=\"image\"\n                role=\"button\"\n                tabindex=\"0\"\n                alt=\"img\"\n                matTooltipClass=\"custom-tooltip\"\n                [matTooltip]=\"tooltip()\"\n                [matTooltipPosition]=\"tooltipPosition()\"\n                [matTooltipDisabled]=\"isMobile() || !tooltip() || !isActive() || isTooltipDisabled()\"\n                [rtMod]=\"{ active: isActive() }\"\n                [src]=\"imageUrl()\"\n                (click)=\"uploadInput.click()\"\n                (keydown.enter)=\"uploadInput.click()\" />\n\n            @if (isSaveButtonShown()) {\n                <button\n                    rtElem=\"action\"\n                    mat-icon-button\n                    aria-label=\"Download image\"\n                    matTooltip=\"Download image\"\n                    matTooltipPosition=\"above\"\n                    [matTooltipDisabled]=\"isMobile()\"\n                    (click)=\"onDownloadImage()\">\n                    <mat-icon rtIconOutlined>download</mat-icon>\n                </button>\n            }\n        </div>\n    } @else {\n        <rtui-file-upload (uploadFile)=\"onFileUpload($event)\" />\n    }\n}\n", styles: ["@charset \"UTF-8\";:host{--rt-image-upload-host-width: 100%;--rt-image-upload-host-min-width: 100%;--rt-image-upload-host-max-width: 100%;--rt-image-upload-host-height: 100%;--rt-image-upload-host-min-height: 15rem;--rt-image-upload-host-max-height: 100%;--rt-image-upload-host-display: flex;--rt-image-upload-host-justify-content: center;--rt-image-upload-host-align-items: center;--rt-image-upload-image-cropper-padding: .25rem;--rt-image-upload-image-cropper-actions-display: flex;--rt-image-upload-image-cropper-actions-justify-content: flex-end;--rt-image-upload-image-cropper-actions-gap: .5rem;--rt-image-upload-image-cropper-actions-margin-top: .5rem;--rt-image-upload-image-container-position: relative;--rt-image-upload-image-container-padding: .5rem;--rt-image-upload-image-container-image-position: relative;--rt-image-upload-image-container-image-height: 100%;--rt-image-upload-image-container-image-max-height: 15rem;--rt-image-upload-image-container-image-object-fit: contain;display:var(--rt-image-upload-host-display);width:var(--rt-image-upload-host-width);min-width:var(--rt-image-upload-host-min-height);max-width:var(--rt-image-upload-host-max-width);height:var(--rt-image-upload-host-height);min-height:var(--rt-image-upload-host-min-height);max-height:var(--rt-image-upload-host-max-height);align-items:var(--rt-image-upload-host-align-items);justify-content:var(--rt-image-upload-host-justify-content)}:host .rtui-image-cropper{padding:var(--rt-image-upload-image-cropper-padding)}:host .rtui-image-cropper__actions{display:var(--rt-image-upload-image-cropper-actions-display);justify-content:var(--rt-image-upload-image-cropper-actions-justify-content);margin-top:var(--rt-image-upload-image-cropper-actions-justify-margin-top);gap:var(--rt-image-upload-image-cropper-actions-gap)}:host .rtui-image-container{position:var(--rt-image-upload-image-container-position);padding:var(--rt-image-upload-image-container-padding)}:host .rtui-image-container__image{position:var(--rt-image-upload-image-container-image-position);height:var(--rt-image-upload-image-container-image-height);max-height:var(--rt-image-upload-image-container-image-max-height);object-fit:var(--rt-image-upload-image-container-image-object-fit);pointer-events:none}:host .rtui-image-container__image--active{cursor:pointer;pointer-events:initial}:host .rtui-image-container__image--active:hover{opacity:.6}:host .rtui-image-container__action{position:absolute;z-index:999;top:0;right:0;backdrop-filter:blur(1.25rem)}\n"] }]
-        }], propDecorators: { imageUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "imageUrl", required: true }] }, { type: i0.Output, args: ["imageUrlChange"] }], isMobile: [{ type: i0.Input, args: [{ isSignal: true, alias: "isMobile", required: true }] }], fileName: [{ type: i0.Input, args: [{ isSignal: true, alias: "fileName", required: false }] }], isActive: [{ type: i0.Input, args: [{ isSignal: true, alias: "isActive", required: false }] }], isSaveButtonShown: [{ type: i0.Input, args: [{ isSignal: true, alias: "isSaveButtonShown", required: false }] }], isDownloadButtonEnabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDownloadButtonEnabled", required: false }] }], isTooltipDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "isTooltipDisabled", required: false }] }], isActionsShown: [{ type: i0.Input, args: [{ isSignal: true, alias: "isActionsShown", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], tooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip", required: false }] }], tooltipPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipPosition", required: false }] }], imageQuality: [{ type: i0.Input, args: [{ isSignal: true, alias: "imageQuality", required: false }] }], imageChanged: [{ type: i0.Output, args: ["imageChanged"] }], save: [{ type: i0.Output, args: ["save"] }] } });
+                    ], template: "@if (loading()) {\n    <rtui-spinner />\n} @else if (originalImage()) {\n    <div rtBlock=\"rtui-image-cropper\">\n        <image-cropper\n            alignImage=\"center\"\n            [format]=\"imageFormat()\"\n            [imageQuality]=\"imageQuality()\"\n            [allowMoveImage]=\"true\"\n            [maintainAspectRatio]=\"false\"\n            [imageFile]=\"originalImage()\"\n            (imageCropped)=\"onImageCropped($event)\" />\n\n        @if (isActionsShown()) {\n            <div rtElem=\"actions\">\n                <button mat-button color=\"accent\" (click)=\"onCancel()\">Cancel</button>\n                <button mat-flat-button (click)=\"onApply()\">Apply</button>\n            </div>\n        }\n    </div>\n} @else {\n    <input #uploadInput hidden type=\"file\" accept=\".jpg,.jpeg,.png,.webp\" (change)=\"onFileSelect($event)\" />\n\n    @if (imageUrl()) {\n        <div rtBlock=\"rtui-image-container\">\n            <img\n                rtElem=\"image\"\n                role=\"button\"\n                tabindex=\"0\"\n                alt=\"img\"\n                matTooltipClass=\"custom-tooltip\"\n                [matTooltip]=\"tooltip()\"\n                [matTooltipPosition]=\"tooltipPosition()\"\n                [matTooltipDisabled]=\"narrow() || !tooltip() || !isActive() || isTooltipDisabled()\"\n                [rtMod]=\"{ active: isActive() }\"\n                [src]=\"imageUrl()\"\n                (click)=\"uploadInput.click()\"\n                (keydown.enter)=\"uploadInput.click()\" />\n\n            @if (isSaveButtonShown()) {\n                <button\n                    rtElem=\"action\"\n                    mat-icon-button\n                    aria-label=\"Download image\"\n                    matTooltip=\"Download image\"\n                    matTooltipPosition=\"above\"\n                    [matTooltipDisabled]=\"narrow()\"\n                    (click)=\"onDownloadImage()\">\n                    <mat-icon rtIconOutlined>download</mat-icon>\n                </button>\n            }\n        </div>\n    } @else {\n        <rtui-file-upload (uploadFile)=\"onFileUpload($event)\" />\n    }\n}\n", styles: ["@charset \"UTF-8\";:host{--rt-image-upload-host-width: 100%;--rt-image-upload-host-min-width: 100%;--rt-image-upload-host-max-width: 100%;--rt-image-upload-host-height: 100%;--rt-image-upload-host-min-height: 15rem;--rt-image-upload-host-max-height: 100%;--rt-image-upload-host-display: flex;--rt-image-upload-host-justify-content: center;--rt-image-upload-host-align-items: center;--rt-image-upload-image-cropper-padding: .25rem;--rt-image-upload-image-cropper-actions-display: flex;--rt-image-upload-image-cropper-actions-justify-content: flex-end;--rt-image-upload-image-cropper-actions-gap: .5rem;--rt-image-upload-image-cropper-actions-margin-top: .5rem;--rt-image-upload-image-container-position: relative;--rt-image-upload-image-container-padding: .5rem;--rt-image-upload-image-container-image-position: relative;--rt-image-upload-image-container-image-height: 100%;--rt-image-upload-image-container-image-max-height: 15rem;--rt-image-upload-image-container-image-object-fit: contain;display:var(--rt-image-upload-host-display);width:var(--rt-image-upload-host-width);min-width:var(--rt-image-upload-host-min-height);max-width:var(--rt-image-upload-host-max-width);height:var(--rt-image-upload-host-height);min-height:var(--rt-image-upload-host-min-height);max-height:var(--rt-image-upload-host-max-height);align-items:var(--rt-image-upload-host-align-items);justify-content:var(--rt-image-upload-host-justify-content)}:host .rtui-image-cropper{padding:var(--rt-image-upload-image-cropper-padding)}:host .rtui-image-cropper__actions{display:var(--rt-image-upload-image-cropper-actions-display);justify-content:var(--rt-image-upload-image-cropper-actions-justify-content);margin-top:var(--rt-image-upload-image-cropper-actions-justify-margin-top);gap:var(--rt-image-upload-image-cropper-actions-gap)}:host .rtui-image-container{position:var(--rt-image-upload-image-container-position);padding:var(--rt-image-upload-image-container-padding)}:host .rtui-image-container__image{position:var(--rt-image-upload-image-container-image-position);height:var(--rt-image-upload-image-container-image-height);max-height:var(--rt-image-upload-image-container-image-max-height);object-fit:var(--rt-image-upload-image-container-image-object-fit);pointer-events:none}:host .rtui-image-container__image--active{cursor:pointer;pointer-events:initial}:host .rtui-image-container__image--active:hover{opacity:.6}:host .rtui-image-container__action{position:absolute;z-index:999;top:0;right:0;backdrop-filter:blur(1.25rem)}\n"] }]
+        }], propDecorators: { imageUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "imageUrl", required: true }] }, { type: i0.Output, args: ["imageUrlChange"] }], isMobile: [{ type: i0.Input, args: [{ isSignal: true, alias: "isMobile", required: false }] }], fileName: [{ type: i0.Input, args: [{ isSignal: true, alias: "fileName", required: false }] }], isActive: [{ type: i0.Input, args: [{ isSignal: true, alias: "isActive", required: false }] }], isSaveButtonShown: [{ type: i0.Input, args: [{ isSignal: true, alias: "isSaveButtonShown", required: false }] }], isDownloadButtonEnabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDownloadButtonEnabled", required: false }] }], isTooltipDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "isTooltipDisabled", required: false }] }], isActionsShown: [{ type: i0.Input, args: [{ isSignal: true, alias: "isActionsShown", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], tooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip", required: false }] }], tooltipPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipPosition", required: false }] }], imageQuality: [{ type: i0.Input, args: [{ isSignal: true, alias: "imageQuality", required: false }] }], imageChanged: [{ type: i0.Output, args: ["imageChanged"] }], save: [{ type: i0.Output, args: ["save"] }] } });
 
 var RT_THEME_ENUM;
 (function (RT_THEME_ENUM) {