@rt-tools/ui-kit 0.0.16 → 0.0.20

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

@@ -12,10 +12,10 @@ import * as i3 from '@angular/material/input';
 import { MatInputModule, MatInput, MatFormField as MatFormField$1, MatLabel } from '@angular/material/input';
 import * as i4 from '@angular/material/select';
 import { MatSelectModule, MatSelect } from '@angular/material/select';
-import { BlockDirective, ElemDirective, WINDOW, IDBStorageService, ModDirective, PlatformService } from '@rt-tools/core';
+import { BlockDirective, ElemDirective, ModDirective, WINDOW, IDBStorageService, PlatformService, LOCAL_STORAGE } from '@rt-tools/core';
 import { checkIsMatchingValues, SanitizePipe, RtIconOutlinedDirective, RtHideTooltipDirective, transformArrayInput, RtScrollToElementDirective, RtNavigationDirective, isString, isNumber, areArraysEqual, EmptyToDashPipe, LIST_SORT_ORDER_ENUM, FILTER_OPERATOR_TYPE_ENUM, FILTER_OPERATORS, isDate, transformStringInput, BreakpointService, DeviceDetectorService, OSTypes, RtScrollDirective, BreakStringPipe, EntityToStringPipe, OVERLAY_POSITIONS, areArraysEqualUnordered, checkIsEntityInArrayByKey, sortByAlphabet, RtEscapeKeyDirective, POSITION_ENUM } from '@rt-tools/utils';
 import { ReplaySubject, share, Subject, merge, of, noop } from 'rxjs';
-import { filter, map, delay, tap, take, switchMap, debounceTime, distinctUntilChanged } from 'rxjs/operators';
+import { filter, map, delay, take, tap, switchMap, debounceTime, distinctUntilChanged } 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';
@@ -80,7 +80,7 @@ class RtuiModalComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtuiModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", 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: [":host{--rt-modal-title-font-size: 1.25rem;--rt-modal-title-color: var(--clr-txt);--rt-modal-title-font-weight: 400;--rt-modal-content-padding: 1rem 1.5rem;--rt-modal-content-color: var(--clr-black-80);--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(--clr-black-100);--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(--clr-red-100)}:host ::ng-deep .--highlighted{display:inline;font-weight:var(--rt-modal-text-highlited-font-weight);color:var(--rt-modal-text-highlited-color)}:host ::ng-deep .--warn{display:inline;font-size:var(--rt-modal-text-warn-font-size);font-weight:var(--rt-modal-text-warn-font-weight);color:var(--rt-modal-text-warn-color)}:host .rtui-modal__title h1{font-size:var(--rt-modal-title-font-size);color:var(--rt-modal-title-color);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);text-align:var(--rt-modal-content-text-align);word-wrap:var(--rt-modal-content-word-wrap)}: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])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[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: "21.0.1", 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])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[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
@@ -103,7 +103,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", 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: [":host{--rt-modal-title-font-size: 1.25rem;--rt-modal-title-color: var(--clr-txt);--rt-modal-title-font-weight: 400;--rt-modal-content-padding: 1rem 1.5rem;--rt-modal-content-color: var(--clr-black-80);--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(--clr-black-100);--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(--clr-red-100)}:host ::ng-deep .--highlighted{display:inline;font-weight:var(--rt-modal-text-highlited-font-weight);color:var(--rt-modal-text-highlited-color)}:host ::ng-deep .--warn{display:inline;font-size:var(--rt-modal-text-warn-font-size);font-weight:var(--rt-modal-text-warn-font-weight);color:var(--rt-modal-text-warn-color)}:host .rtui-modal__title h1{font-size:var(--rt-modal-title-font-size);color:var(--rt-modal-title-color);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);text-align:var(--rt-modal-content-text-align);word-wrap:var(--rt-modal-content-word-wrap)}:host mat-dialog-content mat-form-field{width:100%}:host mat-dialog-content mat-form-field textarea{resize:none}\n"] }]
+                    ], 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"] }]
         }], propDecorators: { hostClasses: [{
                 type: HostBinding,
                 args: ['class']
@@ -194,11 +194,11 @@ class RtuiScrollableContainerComponent {
         this.footerTpl = contentChild(RtuiScrollableContainerFooterDirective, { ...(ngDevMode ? { debugName: "footerTpl" } : {}), read: TemplateRef });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtuiScrollableContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", 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: [":host{height:var(--rt-scrollable-host-height);width:var(--rt-scrollable-host-width);display:var(--rt-scrollable-host-display);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(--clr-white-100);--rt-scrollable-header-padding: .5rem 1rem;--rt-scrollable-header-background-color: var(--clr-white-100);--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(--clr-white-100);--rt-scrollable-footer-padding: 1rem;--rt-scrollable-footer-background-color: var(--clr-white-100)}: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);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);overflow:auto}: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: "21.0.1", 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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", 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: [":host{height:var(--rt-scrollable-host-height);width:var(--rt-scrollable-host-width);display:var(--rt-scrollable-host-display);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(--clr-white-100);--rt-scrollable-header-padding: .5rem 1rem;--rt-scrollable-header-background-color: var(--clr-white-100);--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(--clr-white-100);--rt-scrollable-footer-padding: 1rem;--rt-scrollable-footer-background-color: var(--clr-white-100)}: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);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);overflow:auto}:host .rtui-scrollable__footer{padding:var(--rt-scrollable-footer-padding);background-color:var(--rt-scrollable-footer-background-color)}\n"] }]
+            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"] }]
         }], propDecorators: { headerTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => RtuiScrollableContainerHeaderDirective), { ...{
                             read: TemplateRef,
                         }, isSignal: true }] }], contentTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => RtuiScrollableContainerContentDirective), { ...{
@@ -233,9 +233,9 @@ class RtuiSideMenuSubItemComponent {
                     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 1.5rem}:host::ng-deep .mat-expansion-panel-body{padding:0 0 0 1rem}: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;justify-content:space-between;align-items:center}:host .rtui-side-menu-sub-item .rtui-side-menu-sub-item-title__text{font-size:var(--rt-side-menu-sub-menu-item-title-font-size);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}:host .rtui-side-menu-sub-item .rtui-side-menu-sub-item-title .rtui-side-menu-sub-item-title-button{display:flex;justify-content:center;align-items:center;padding:.1rem;margin-left:.5rem;border-radius:50%;cursor:pointer;border:1.5px solid transparent}: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:1.25rem}:host .rtui-side-menu-sub-item .rtui-side-menu-sub-item-title .rtui-side-menu-sub-item-title-button:hover{border-color:var(--clr-black-60)}:host .rtui-side-menu-expand-sub-item{padding:0;box-shadow:none;border-radius:1.35rem}: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{margin-inline-start:var(--mat-list-list-item-leading-icon-start-space);margin-inline-end:var(--mat-list-list-item-leading-icon-end-space);color:var(--mdc-list-list-item-leading-icon-color)}: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() || 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: 
                 // directives
-                BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }, { kind: "directive", type: RtIconOutlinedDirective, selector: "mat-icon[rtIconOutlined]", inputs: ["rtIconOutlined"] }, { kind: "directive", type: RtHideTooltipDirective, selector: "[rtHideTooltipDirective]", inputs: ["rtHideTooltipDirective", "isTooltipShown"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+                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: "21.0.1", ngImport: i0, type: RtuiSideMenuSubItemComponent, decorators: [{
             type: Component,
@@ -251,6 +251,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
                         // directives
                         BlockDirective,
                         ElemDirective,
+                        ModDirective,
                         RtIconOutlinedDirective,
                         RtHideTooltipDirective,
                     ], providers: [
@@ -260,7 +261,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
                                 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 1.5rem}:host::ng-deep .mat-expansion-panel-body{padding:0 0 0 1rem}: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;justify-content:space-between;align-items:center}:host .rtui-side-menu-sub-item .rtui-side-menu-sub-item-title__text{font-size:var(--rt-side-menu-sub-menu-item-title-font-size);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}:host .rtui-side-menu-sub-item .rtui-side-menu-sub-item-title .rtui-side-menu-sub-item-title-button{display:flex;justify-content:center;align-items:center;padding:.1rem;margin-left:.5rem;border-radius:50%;cursor:pointer;border:1.5px solid transparent}: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:1.25rem}:host .rtui-side-menu-sub-item .rtui-side-menu-sub-item-title .rtui-side-menu-sub-item-title-button:hover{border-color:var(--clr-black-60)}:host .rtui-side-menu-expand-sub-item{padding:0;box-shadow:none;border-radius:1.35rem}: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{margin-inline-start:var(--mat-list-list-item-leading-icon-start-space);margin-inline-end:var(--mat-list-list-item-leading-icon-end-space);color:var(--mdc-list-list-item-leading-icon-color)}: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() || 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"] }]
         }], 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 {
@@ -359,9 +360,9 @@ class RtuiSideMenuComponent {
         this.subMenuRef()?.open().then();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtuiSideMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", 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: [":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;flex-direction:column;width:100%}: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{opacity:0;animation:fadeInAnimation .15s ease-in-out .15s forwards}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list .rtui-mobile-side-menu-list-main{opacity:0;animation:fadeInAnimation .15s ease-in-out .15s forwards}: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;justify-content:space-between;align-items:center}: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{font-size:.75rem;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}: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;justify-content:center;align-items:center;margin-left:.5rem;border-radius:50%}: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:.5rem}:host .rtui-side-menu{width:var(--rt-side-menu-base-width)}:host .rtui-side-menu__list{display:flex;flex-direction:column;align-items:center;width:100%}:host .rtui-side-menu__list .rtui-side-menu-item{display:flex;flex-direction:column;justify-content:center;align-items:center;cursor:pointer;width:100%}:host .rtui-side-menu__list .rtui-side-menu-item .rtui-side-menu-item-button{padding:0;display:flex;justify-content:center;align-items:center;height:var(--rt-side-menu-item-height);width:var(--rt-side-menu-item-width)}:host .rtui-side-menu__list .rtui-side-menu-item .rtui-side-menu-item-button__icon{display:flex;justify-content:center;align-items:center}:host .rtui-side-menu__list .rtui-side-menu-item__title{font-size:var(--rt-side-menu-item-font-size);text-align:var(--rt-side-menu-item-text-align);line-height:var(--rt-side-menu-item-line-height)}: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{width:var(--rt-side-menu-sub-menu-width);height:100%;border-left:1px solid var(--clr-black-20);box-shadow:14px 0 28px #00000040,10px 0 10px #00000038}:host .rtui-sub-side-menu .rtui-sub-side-menu-content__list{width:100%;opacity:0;animation:fadeInAnimation .15s ease-in-out .15s forwards}:host .rtui-sub-side-menu .rtui-sub-side-menu-content__list--scrollable{min-width:fit-content}@keyframes fadeInAnimation{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: "21.0.1", 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: 
                 // directives
-                BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["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: 
+                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
                 RtuiScrollableContainerComponent, selector: "rtui-scrollable" }, { kind: "component", type: RtuiSideMenuSubItemComponent, selector: "rtui-side-menu-sub-item", inputs: ["item", "isMobile", "isSubMenuXScrollEnabled", "isSubMenuIconsOutlined", "isSubMenuButtonIconsOutlined", "isSubMenuTooltipsShown"], outputs: ["clickSubMenuAction", "clickSubMenuAdditionalAction"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
@@ -377,6 +378,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
                         // directives
                         BlockDirective,
                         ElemDirective,
+                        ModDirective,
                         RtuiScrollableContainerHeaderDirective,
                         RtuiScrollableContainerContentDirective,
                         RtuiScrollableContainerFooterDirective,
@@ -386,7 +388,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", 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: [":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;flex-direction:column;width:100%}: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{opacity:0;animation:fadeInAnimation .15s ease-in-out .15s forwards}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list .rtui-mobile-side-menu-list-main{opacity:0;animation:fadeInAnimation .15s ease-in-out .15s forwards}: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;justify-content:space-between;align-items:center}: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{font-size:.75rem;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}: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;justify-content:center;align-items:center;margin-left:.5rem;border-radius:50%}: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:.5rem}:host .rtui-side-menu{width:var(--rt-side-menu-base-width)}:host .rtui-side-menu__list{display:flex;flex-direction:column;align-items:center;width:100%}:host .rtui-side-menu__list .rtui-side-menu-item{display:flex;flex-direction:column;justify-content:center;align-items:center;cursor:pointer;width:100%}:host .rtui-side-menu__list .rtui-side-menu-item .rtui-side-menu-item-button{padding:0;display:flex;justify-content:center;align-items:center;height:var(--rt-side-menu-item-height);width:var(--rt-side-menu-item-width)}:host .rtui-side-menu__list .rtui-side-menu-item .rtui-side-menu-item-button__icon{display:flex;justify-content:center;align-items:center}:host .rtui-side-menu__list .rtui-side-menu-item__title{font-size:var(--rt-side-menu-item-font-size);text-align:var(--rt-side-menu-item-text-align);line-height:var(--rt-side-menu-item-line-height)}: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{width:var(--rt-side-menu-sub-menu-width);height:100%;border-left:1px solid var(--clr-black-20);box-shadow:14px 0 28px #00000040,10px 0 10px #00000038}:host .rtui-sub-side-menu .rtui-sub-side-menu-content__list{width:100%;opacity:0;animation:fadeInAnimation .15s ease-in-out .15s forwards}:host .rtui-sub-side-menu .rtui-sub-side-menu-content__list--scrollable{min-width:fit-content}@keyframes fadeInAnimation{to{opacity:1}}\n"] }]
+                    ], 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"] }]
         }], propDecorators: { headerTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => RtuiSideMenuHeaderDirective), { ...{
                             read: TemplateRef,
                         }, isSignal: true }] }], footerTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => RtuiSideMenuFooterDirective), { ...{
@@ -400,11 +402,11 @@ class RtuiSpinnerComponent {
         this.showBackground = input(false, { ...(ngDevMode ? { debugName: "showBackground" } : {}), transform: booleanAttribute });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtuiSpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.1", 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{z-index:10000;position:absolute;width:100%;height:100%;display:flex;justify-content:center;align-items:center}:host .c-spinner__container{width:100%;height:100%;display:flex;align-items:center;justify-content:center}:host .c-spinner__container--bgr-color{background-color:#f5f6f8d9}:host .c-spinner__wrapper{display:flex;align-items:center;justify-content:center}:host .c-spinner__wrapper mat-spinner ::ng-deep circle{stroke:var(--clr-base-accent)}:host .c-spinner__wrapper--bgr-color{width:3rem;height:3rem;background:var(--clr-white-100);border-radius:50%;box-shadow:0 1px 3px #0000001f,0 1px 2px #0000003d}\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: "21.0.1", 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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", 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{z-index:10000;position:absolute;width:100%;height:100%;display:flex;justify-content:center;align-items:center}:host .c-spinner__container{width:100%;height:100%;display:flex;align-items:center;justify-content:center}:host .c-spinner__container--bgr-color{background-color:#f5f6f8d9}:host .c-spinner__wrapper{display:flex;align-items:center;justify-content:center}:host .c-spinner__wrapper mat-spinner ::ng-deep circle{stroke:var(--clr-base-accent)}:host .c-spinner__wrapper--bgr-color{width:3rem;height:3rem;background:var(--clr-white-100);border-radius:50%;box-shadow:0 1px 3px #0000001f,0 1px 2px #0000003d}\n"] }]
+            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"] }]
         }], 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 {
@@ -465,7 +467,7 @@ class RtuiAsidePanelComponent {
         return new ComponentPortal(asideRef.component, null, injector);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtuiAsidePanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.1", 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: [":root{--rt-aside-host-width: 33.75rem;--rt-aside-host-box-shadow: 0 0 1rem 0 rgba(0, 0, 0, .1);--rt-aside-host-background-color: var(--clr-white-100);--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(--clr-black-60);--rt-aside-header-addition-font-size: 1rem;--rt-aside-header-addition-margin-top: .25rem;--rt-aside-header-addition-color: var(--clr-black-60);--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-betwen-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(--clr-red-60);--rt-aside-error-box-border-radius: .375rem;--rt-aside-error-box-title-font-size: 1rem;--rt-aside-error-box-title-font-color: var(--clr-red-60);--rt-aside-error-box-button-font-size: 1rem;--rt-aside-error-box-button-font-color: var(--clr-black-100);--rt-aside-tab-indicator-width: 6rem;--rt-aside-tab-badge-color: var(--mdc-filled-button-container-color);--rt-aside-tab-badge-incorrect-color: var(--clr-red-100)}.cdk-overlay-container,.cdk-overlay-pane{z-index:9999}.mat-mdc-tab-group{width:100%}.icon-badge{position:absolute!important}.title-badge{margin-left:.25rem;top:-.5rem}.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;height:100vh;max-height:100vh;width:var(--rt-aside-host-width);box-shadow:var(--rt-aside-host-box-shadow);background-color:var(--rt-aside-host-background-color)}.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{height:100%;width:100%;display:flex;flex-direction:column;justify-content:center;align-items:flex-start}.c-aside-header .c-aside-title__descr{margin-bottom:var(--rt-aside-header-description-margin-bottom);font-size:var(--rt-aside-header-description-font-size);color:var(--rt-aside-header-description-color)}.c-aside-header .c-aside-title__txt{font-size:var(--rt-aside-header-title-font-size);line-height:var(--rt-aside-header-title-line-height);font-weight:var(--rt-aside-header-title-font-weight)}.c-aside-header .c-aside-title__addition{margin-top:var(--rt-aside-header-addition-margin-top);font-size:var(--rt-aside-header-addition-font-size);color:var(--rt-aside-header-addition-color)}.c-aside-header .c-aside-title__descr,.c-aside-header .c-aside-title__txt,.c-aside-header .c-aside-title__addition{width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.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{height:100%;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:var(--rt-aside-content-padding)}.c-aside-content .mat-mdc-tab-header{top:0;z-index:1000;position:sticky;background:var(--clr-white-100)}@media screen and (max-width:599px){.c-aside-content{padding:var(--rt-aside-content-mobile-padding)}}.c-aside-footer{display:flex;justify-content:flex-end;align-items:center;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-betwen-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: "21.0.1", 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: [
             trigger('aside', [
                 state('enter-left', style({ transform: 'none' })),
                 transition('* => enter-left', [
@@ -499,7 +501,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", 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: [":root{--rt-aside-host-width: 33.75rem;--rt-aside-host-box-shadow: 0 0 1rem 0 rgba(0, 0, 0, .1);--rt-aside-host-background-color: var(--clr-white-100);--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(--clr-black-60);--rt-aside-header-addition-font-size: 1rem;--rt-aside-header-addition-margin-top: .25rem;--rt-aside-header-addition-color: var(--clr-black-60);--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-betwen-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(--clr-red-60);--rt-aside-error-box-border-radius: .375rem;--rt-aside-error-box-title-font-size: 1rem;--rt-aside-error-box-title-font-color: var(--clr-red-60);--rt-aside-error-box-button-font-size: 1rem;--rt-aside-error-box-button-font-color: var(--clr-black-100);--rt-aside-tab-indicator-width: 6rem;--rt-aside-tab-badge-color: var(--mdc-filled-button-container-color);--rt-aside-tab-badge-incorrect-color: var(--clr-red-100)}.cdk-overlay-container,.cdk-overlay-pane{z-index:9999}.mat-mdc-tab-group{width:100%}.icon-badge{position:absolute!important}.title-badge{margin-left:.25rem;top:-.5rem}.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;height:100vh;max-height:100vh;width:var(--rt-aside-host-width);box-shadow:var(--rt-aside-host-box-shadow);background-color:var(--rt-aside-host-background-color)}.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{height:100%;width:100%;display:flex;flex-direction:column;justify-content:center;align-items:flex-start}.c-aside-header .c-aside-title__descr{margin-bottom:var(--rt-aside-header-description-margin-bottom);font-size:var(--rt-aside-header-description-font-size);color:var(--rt-aside-header-description-color)}.c-aside-header .c-aside-title__txt{font-size:var(--rt-aside-header-title-font-size);line-height:var(--rt-aside-header-title-line-height);font-weight:var(--rt-aside-header-title-font-weight)}.c-aside-header .c-aside-title__addition{margin-top:var(--rt-aside-header-addition-margin-top);font-size:var(--rt-aside-header-addition-font-size);color:var(--rt-aside-header-addition-color)}.c-aside-header .c-aside-title__descr,.c-aside-header .c-aside-title__txt,.c-aside-header .c-aside-title__addition{width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.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{height:100%;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:var(--rt-aside-content-padding)}.c-aside-content .mat-mdc-tab-header{top:0;z-index:1000;position:sticky;background:var(--clr-white-100)}@media screen and (max-width:599px){.c-aside-content{padding:var(--rt-aside-content-mobile-padding)}}.c-aside-footer{display:flex;justify-content:flex-end;align-items:center;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-betwen-buttons)}@media screen and (max-width:599px){.c-aside-footer{padding:var(--rt-aside-footer-mobile-padding)}}\n"] }]
+                    ], 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"] }]
         }], propDecorators: { _state: [{
                 type: HostBinding,
                 args: ['@aside']
@@ -528,7 +530,10 @@ class RtAsideService {
         const portal = this.#createPortal(asideRef);
         const componentRef = overlayRef.attach(portal);
         merge(overlayRef.backdropClick(), overlayRef.keydownEvents().pipe(filter((keyEvent) => keyEvent.key === 'Escape')), this.#router.events.pipe(filter((e) => e instanceof NavigationEnd)), answer.pipe(delay(10)))
-            .pipe(tap(() => {
+            .pipe(
+        // The aside closes on the first of these events — terminate so the merged
+        // hot sources (router/backdrop/keydown) don't keep the subscription alive.
+        take(1), tap(() => {
             componentRef.instance.startExitAnimation();
             overlayRef.detach();
             answer.complete();
@@ -638,11 +643,11 @@ class RtuiToolbarComponent {
         this.sticky = input(false, { ...(ngDevMode ? { debugName: "sticky" } : {}), transform: booleanAttribute });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtuiToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", 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: [":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(--clr-black-20);--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);min-height:var(--rt-toolbar-body-mobile-height);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%;background-color:var(--rt-toolbar-body-background-color);border-bottom-style:var(--rt-toolbar-bars-border-bottom-style);border-bottom-width:var(--rt-toolbar-bars-border-bottom-width);border-bottom-color:var(--rt-toolbar-bars-border-bottom-color)}:host .toolbar .bars__bar--left{width:var(--rt-toolbar-bars-left-width)}:host .toolbar .bars__bar--center{width:var(--rt-toolbar-bars-center-width);overflow:hidden}: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{height:100%;display:flex;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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", 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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtuiToolbarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rtui-toolbar', changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatToolbar, NgTemplateOutlet, BlockDirective, ElemDirective], 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: [":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(--clr-black-20);--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);min-height:var(--rt-toolbar-body-mobile-height);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%;background-color:var(--rt-toolbar-body-background-color);border-bottom-style:var(--rt-toolbar-bars-border-bottom-style);border-bottom-width:var(--rt-toolbar-bars-border-bottom-width);border-bottom-color:var(--rt-toolbar-bars-border-bottom-color)}:host .toolbar .bars__bar--left{width:var(--rt-toolbar-bars-left-width)}:host .toolbar .bars__bar--center{width:var(--rt-toolbar-bars-center-width);overflow:hidden}: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{height:100%;display:flex;align-items:center}\n"] }]
+            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"] }]
         }], 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), { ...{
@@ -665,7 +670,7 @@ class AsideErrorBoxComponent {
         setTimeout(() => this.isErrorCopied.set(false), 1000);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: AsideErrorBoxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", 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;justify-content:space-between;align-items:center;width:100%;height:var(--rt-aside-error-box-height);padding:var(--rt-aside-error-box-padding);margin:var(--rt-aside-error-box-margin);border:var(--rt-aside-error-box-border);border-radius:var(--rt-aside-error-box-border-radius)}:host .aside-error-box__title{font-size:var(--rt-aside-error-box-title-font-size);color:var(--rt-aside-error-box-title-font-color)}:host .aside-error-box .aside-error-box-button__icon{margin-right:.5rem}:host .aside-error-box .aside-error-box-button__title{font-size:var(--rt-aside-error-box-button-font-size);color:var(--rt-aside-error-box-button-font-color)}: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: "21.0.1", 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: 
                 // bem
                 BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
@@ -677,7 +682,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
                         // 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;justify-content:space-between;align-items:center;width:100%;height:var(--rt-aside-error-box-height);padding:var(--rt-aside-error-box-padding);margin:var(--rt-aside-error-box-margin);border:var(--rt-aside-error-box-border);border-radius:var(--rt-aside-error-box-border-radius)}:host .aside-error-box__title{font-size:var(--rt-aside-error-box-title-font-size);color:var(--rt-aside-error-box-title-font-color)}:host .aside-error-box .aside-error-box-button__icon{margin-right:.5rem}:host .aside-error-box .aside-error-box-button__title{font-size:var(--rt-aside-error-box-button-font-size);color:var(--rt-aside-error-box-button-font-color)}:host .aside-error-box .aside-error-box-button.--complete{background-color:transparent;cursor:not-allowed}\n"] }]
+                    ], 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"] }]
         }], propDecorators: { error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: true }] }] } });
 
 class RtuiAsideContainerHeaderDirective {
@@ -766,7 +771,7 @@ class RtuiRoundIconButtonComponent {
         this.icon = input.required({ ...(ngDevMode ? { debugName: "icon" } : {}) });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtuiRoundIconButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.1", type: RtuiRoundIconButtonComponent, isStandalone: true, selector: "rtui-round-icon-button", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div rtBlock=\"round-icon-button\">\n    <mat-icon rtElem=\"icon\">{{ icon() }}</mat-icon>\n</div>\n", styles: [":host{--rt-round-icon-button-host-size: 1.5rem;--rt-round-icon-button-host-padding: .25rem;--rt-round-icon-button-host-z-index: 1;--rt-round-icon-button-host-background-color: var(--mat-list-active-indicator-color);--rt-round-icon-button-icon-size: 1.25rem}:host .round-icon-button{display:flex;justify-content:center;align-items:center;width:var(--rt-round-icon-button-host-size);height:var(--rt-round-icon-button-host-size);padding:var(--rt-round-icon-button-host-padding);z-index:var(--rt-round-icon-button-host-z-index);border-radius:50%;cursor:pointer}:host .round-icon-button__icon{width:var(--rt-round-icon-button-icon-size);height:var(--rt-round-icon-button-icon-size);font-size:var(--rt-round-icon-button-icon-size)}:host .round-icon-button:hover{background-color:var(--rt-round-icon-button-host-background-color);box-shadow:var(--rt-button-box-shadow)}\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.1.0", version: "21.0.1", type: RtuiRoundIconButtonComponent, isStandalone: true, selector: "rtui-round-icon-button", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div rtBlock=\"round-icon-button\">\n    <mat-icon rtElem=\"icon\">{{ icon() }}</mat-icon>\n</div>\n", styles: ["@charset \"UTF-8\";:host{--rt-round-icon-button-host-size: 1.5rem;--rt-round-icon-button-host-padding: .25rem;--rt-round-icon-button-host-z-index: 1;--rt-round-icon-button-host-background-color: var(--mat-list-active-indicator-color);--rt-round-icon-button-icon-size: 1.25rem}:host .round-icon-button{z-index:var(--rt-round-icon-button-host-z-index);display:flex;width:var(--rt-round-icon-button-host-size);height:var(--rt-round-icon-button-host-size);align-items:center;justify-content:center;padding:var(--rt-round-icon-button-host-padding);border-radius:var(--rt-radius-full);cursor:pointer}:host .round-icon-button__icon{width:var(--rt-round-icon-button-icon-size);height:var(--rt-round-icon-button-icon-size);font-size:var(--rt-round-icon-button-icon-size)}:host .round-icon-button:hover{background-color:var(--rt-round-icon-button-host-background-color);box-shadow:var(--rt-button-box-shadow)}\n"], dependencies: [{ 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 }); }
 }
@@ -777,7 +782,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
                         // bem
                         BlockDirective,
                         ElemDirective,
-                    ], template: "<div rtBlock=\"round-icon-button\">\n    <mat-icon rtElem=\"icon\">{{ icon() }}</mat-icon>\n</div>\n", styles: [":host{--rt-round-icon-button-host-size: 1.5rem;--rt-round-icon-button-host-padding: .25rem;--rt-round-icon-button-host-z-index: 1;--rt-round-icon-button-host-background-color: var(--mat-list-active-indicator-color);--rt-round-icon-button-icon-size: 1.25rem}:host .round-icon-button{display:flex;justify-content:center;align-items:center;width:var(--rt-round-icon-button-host-size);height:var(--rt-round-icon-button-host-size);padding:var(--rt-round-icon-button-host-padding);z-index:var(--rt-round-icon-button-host-z-index);border-radius:50%;cursor:pointer}:host .round-icon-button__icon{width:var(--rt-round-icon-button-icon-size);height:var(--rt-round-icon-button-icon-size);font-size:var(--rt-round-icon-button-icon-size)}:host .round-icon-button:hover{background-color:var(--rt-round-icon-button-host-background-color);box-shadow:var(--rt-button-box-shadow)}\n"] }]
+                    ], template: "<div rtBlock=\"round-icon-button\">\n    <mat-icon rtElem=\"icon\">{{ icon() }}</mat-icon>\n</div>\n", styles: ["@charset \"UTF-8\";:host{--rt-round-icon-button-host-size: 1.5rem;--rt-round-icon-button-host-padding: .25rem;--rt-round-icon-button-host-z-index: 1;--rt-round-icon-button-host-background-color: var(--mat-list-active-indicator-color);--rt-round-icon-button-icon-size: 1.25rem}:host .round-icon-button{z-index:var(--rt-round-icon-button-host-z-index);display:flex;width:var(--rt-round-icon-button-host-size);height:var(--rt-round-icon-button-host-size);align-items:center;justify-content:center;padding:var(--rt-round-icon-button-host-padding);border-radius:var(--rt-radius-full);cursor:pointer}:host .round-icon-button__icon{width:var(--rt-round-icon-button-icon-size);height:var(--rt-round-icon-button-icon-size);font-size:var(--rt-round-icon-button-icon-size)}:host .round-icon-button:hover{background-color:var(--rt-round-icon-button-host-background-color);box-shadow:var(--rt-button-box-shadow)}\n"] }]
         }], propDecorators: { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: true }] }] } });
 
 var BUTTON_SIZE;
@@ -853,9 +858,9 @@ class RtuiMultiButtonComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtuiMultiButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", 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: [":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(--clr-black-10);--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(--clr-black-60);--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(--clr-black-80);--rt-rtui-multibutton-action-active-color: var(--clr-black-80);--rt-rtui-multibutton-action-active-background-color: var(--clr-black-20);--rt-rtui-multibutton-action-active-cursor: default;--rt-rtui-multibutton-action-focus-visible-outline: 2px dashed var(--clr-blue-40);--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);border-radius:var(--rt-rtui-multibutton-base-radius);padding:var(--rt-rtui-multibutton-base-padding);background-color:var(--rt-rtui-multibutton-base-background-color)}:host .rtui-multibutton-actions__action{padding:var(--rt-rtui-multibutton-action-base-padding);border-radius:var(--rt-rtui-multibutton-action-base-radius);border:var(--rt-rtui-multibutton-action-base-border);font-size:var(--rt-rtui-multibutton-action-base-font-size);font-weight:var(--rt-rtui-multibutton-action-base-font-weight);color:var(--rt-rtui-multibutton-action-base-color);background-color:var(--rt-rtui-multibutton-action-base-background-color);transition:var(--rt-rtui-multibutton-action-base-transition);cursor:var(--rt-rtui-multibutton-action-base-cursor)}:host .rtui-multibutton-actions__action--active{color:var(--rt-rtui-multibutton-action-active-color);background-color:var(--rt-rtui-multibutton-action-active-background-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{pointer-events:var(--rt-rtui-multibutton-action-disabled-pointer-events);cursor:var(--rt-rtui-multibutton-action-disabled-cursor);opacity:var(--rt-rtui-multibutton-action-disabled-opacity)}\n"], dependencies: [{ kind: "directive", type: 
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", 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: 
                 // rt-tools
-                BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }, { kind: "pipe", type: 
+                BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }, { kind: "directive", type: ModDirective, selector: "[rtMod]" }, { kind: "pipe", type: 
                 // pipes
                 TitleCasePipe, name: "titlecase" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
@@ -867,7 +872,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
                         // rt-tools
                         BlockDirective,
                         ElemDirective,
-                    ], 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: [":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(--clr-black-10);--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(--clr-black-60);--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(--clr-black-80);--rt-rtui-multibutton-action-active-color: var(--clr-black-80);--rt-rtui-multibutton-action-active-background-color: var(--clr-black-20);--rt-rtui-multibutton-action-active-cursor: default;--rt-rtui-multibutton-action-focus-visible-outline: 2px dashed var(--clr-blue-40);--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);border-radius:var(--rt-rtui-multibutton-base-radius);padding:var(--rt-rtui-multibutton-base-padding);background-color:var(--rt-rtui-multibutton-base-background-color)}:host .rtui-multibutton-actions__action{padding:var(--rt-rtui-multibutton-action-base-padding);border-radius:var(--rt-rtui-multibutton-action-base-radius);border:var(--rt-rtui-multibutton-action-base-border);font-size:var(--rt-rtui-multibutton-action-base-font-size);font-weight:var(--rt-rtui-multibutton-action-base-font-weight);color:var(--rt-rtui-multibutton-action-base-color);background-color:var(--rt-rtui-multibutton-action-base-background-color);transition:var(--rt-rtui-multibutton-action-base-transition);cursor:var(--rt-rtui-multibutton-action-base-cursor)}:host .rtui-multibutton-actions__action--active{color:var(--rt-rtui-multibutton-action-active-color);background-color:var(--rt-rtui-multibutton-action-active-background-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{pointer-events:var(--rt-rtui-multibutton-action-disabled-pointer-events);cursor:var(--rt-rtui-multibutton-action-disabled-cursor);opacity:var(--rt-rtui-multibutton-action-disabled-opacity)}\n"] }]
+                        ModDirective,
+                    ], 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"] }]
         }], propDecorators: { actions: [{ type: i0.Input, args: [{ isSignal: true, alias: "actions", required: false }] }], activeAction: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeAction", required: false }] }, { type: i0.Output, args: ["activeActionChange"] }], changeActiveAction: [{ type: i0.Output, args: ["changeActiveAction"] }] } });
 
 class RtuiHeaderLeftDirective {
@@ -964,11 +970,11 @@ class RtuiClearButtonComponent {
         this.clickAction.emit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtuiClearButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.1", 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: [":host{--rt-clear-button-host-margin: 0 .5rem 0 0;--rt-clear-button-host-padding: .1rem;--rt-clear-button-host-background-color: var(--clr-black-20);--rt-clear-button-icon-size: 1rem;--rt-clear-button-icon-color: var(--clr-black-60);--rt-clear-button-icon-hover-color: var(--clr-black-100)}:host .rtui-clear-button{display:flex;justify-content:center;align-items:center;border:none;border-radius:50%;margin:var(--rt-clear-button-host-margin);padding:var(--rt-clear-button-host-padding);background-color:var(--rt-clear-button-host-background-color)}:host .rtui-clear-button--invisible{position:absolute;width:1px;height:1px;margin:-1px;border:0;padding:0;white-space:nowrap;clip-path:inset(100%);clip:rect(0 0 0 0);overflow:hidden;pointer-events:none}:host .rtui-clear-button__icon{width:var(--rt-clear-button-icon-size);height:var(--rt-clear-button-icon-size);font-size:var(--rt-clear-button-icon-size);color:var(--rt-clear-button-icon-color)}: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: "21.0.1", 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: 
                 // 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+                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: "21.0.1", ngImport: i0, type: RtuiClearButtonComponent, decorators: [{
             type: Component,
@@ -980,7 +986,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
                         // BEM
                         BlockDirective,
                         ElemDirective,
-                    ], 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: [":host{--rt-clear-button-host-margin: 0 .5rem 0 0;--rt-clear-button-host-padding: .1rem;--rt-clear-button-host-background-color: var(--clr-black-20);--rt-clear-button-icon-size: 1rem;--rt-clear-button-icon-color: var(--clr-black-60);--rt-clear-button-icon-hover-color: var(--clr-black-100)}:host .rtui-clear-button{display:flex;justify-content:center;align-items:center;border:none;border-radius:50%;margin:var(--rt-clear-button-host-margin);padding:var(--rt-clear-button-host-padding);background-color:var(--rt-clear-button-host-background-color)}:host .rtui-clear-button--invisible{position:absolute;width:1px;height:1px;margin:-1px;border:0;padding:0;white-space:nowrap;clip-path:inset(100%);clip:rect(0 0 0 0);overflow:hidden;pointer-events:none}:host .rtui-clear-button__icon{width:var(--rt-clear-button-icon-size);height:var(--rt-clear-button-icon-size);font-size:var(--rt-clear-button-icon-size);color:var(--rt-clear-button-icon-color)}:host .rtui-clear-button__icon:hover{color:var(--rt-clear-button-icon-hover-color)}\n"] }]
+                        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"] }]
         }], 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;
@@ -1120,11 +1127,11 @@ class RtuiPaginationComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtuiPaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", 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: [":host{width:fit-content;height:100%;display:flex;--rt-table-pagination-container-gap: 2rem;--rt-table-pagination-container-margin: .5rem 0;--rt-table-pagination-container-color: var(--clr-black-60);--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(--clr-gray-15);--rt-table-pagination-paging-item-border-radius: .75rem;--rt-table-pagination-paging-item-hover-color: var(--clr-white-100);--rt-table-pagination-paging-item-hover-background-color: var(--clr-black-60);--rt-table-pagination-paging-item-active-color: var(--clr-white-100);--rt-table-pagination-paging-item-active-background-color: var(--clr-black-60);--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;justify-content:flex-start;align-items:center;gap:var(--rt-table-pagination-container-gap);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);line-height:var(--rt-table-pagination-container-line-height)}:host .pagination-container--clipped{flex-direction:column;justify-content:center;align-items:flex-start;gap:var(--rt-table-pagination-container-mobile-gap)}:host .pagination-container--mobile{width:100%;justify-content:space-between}:host .pagination-container .paging{display:flex;justify-content:center;align-items:center;gap:var(--rt-table-pagination-paging-gap);margin:var(--rt-table-pagination-container-margin)}:host .pagination-container .paging--clipped{margin:var(--rt-table-pagination-paging-mobile-margin)}:host .pagination-container .paging__item{display:flex;justify-content:center;align-items:center;position:relative;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){color:var(--rt-table-pagination-paging-item-hover-color);background-color:var(--rt-table-pagination-paging-item-hover-background-color)}:host .pagination-container .paging__item--active{color:var(--rt-table-pagination-paging-item-active-color);background-color:var(--rt-table-pagination-paging-item-active-background-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{cursor:default;pointer-events:none;border:none}:host .pagination-container .page-size-toggle{display:flex;flex-direction:row;justify-content:center;align-items:center;gap:var(--rt-table-pagination-size-toggle-gap);margin:var(--rt-table-pagination-container-margin)}: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;cursor:pointer;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);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])[formControlName],select:not([multiple])[formControl],select:not([multiple])[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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", 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])[formControlName],select:not([multiple])[formControl],select:not([multiple])[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: "21.0.1", ngImport: i0, type: RtuiPaginationComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rtui-pagination', changeDetection: ChangeDetectionStrategy.OnPush, imports: [ReactiveFormsModule, BlockDirective, ElemDirective], 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: [":host{width:fit-content;height:100%;display:flex;--rt-table-pagination-container-gap: 2rem;--rt-table-pagination-container-margin: .5rem 0;--rt-table-pagination-container-color: var(--clr-black-60);--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(--clr-gray-15);--rt-table-pagination-paging-item-border-radius: .75rem;--rt-table-pagination-paging-item-hover-color: var(--clr-white-100);--rt-table-pagination-paging-item-hover-background-color: var(--clr-black-60);--rt-table-pagination-paging-item-active-color: var(--clr-white-100);--rt-table-pagination-paging-item-active-background-color: var(--clr-black-60);--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;justify-content:flex-start;align-items:center;gap:var(--rt-table-pagination-container-gap);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);line-height:var(--rt-table-pagination-container-line-height)}:host .pagination-container--clipped{flex-direction:column;justify-content:center;align-items:flex-start;gap:var(--rt-table-pagination-container-mobile-gap)}:host .pagination-container--mobile{width:100%;justify-content:space-between}:host .pagination-container .paging{display:flex;justify-content:center;align-items:center;gap:var(--rt-table-pagination-paging-gap);margin:var(--rt-table-pagination-container-margin)}:host .pagination-container .paging--clipped{margin:var(--rt-table-pagination-paging-mobile-margin)}:host .pagination-container .paging__item{display:flex;justify-content:center;align-items:center;position:relative;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){color:var(--rt-table-pagination-paging-item-hover-color);background-color:var(--rt-table-pagination-paging-item-hover-background-color)}:host .pagination-container .paging__item--active{color:var(--rt-table-pagination-paging-item-active-color);background-color:var(--rt-table-pagination-paging-item-active-background-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{cursor:default;pointer-events:none;border:none}:host .pagination-container .page-size-toggle{display:flex;flex-direction:row;justify-content:center;align-items:center;gap:var(--rt-table-pagination-size-toggle-gap);margin:var(--rt-table-pagination-container-margin)}: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;cursor:pointer;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);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"] }]
+            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: [{
                 type: HostListener,
                 args: ['window:resize']
@@ -1758,7 +1765,7 @@ class TableBaseCellComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: TableBaseCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", 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: [":host{height:100%;width:100%;display:flex;align-items:center;gap:var(--rt-table-base-cell-host-gap);position:relative;--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(--clr-black-100)}: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{width:100%;display:table;table-layout:fixed}:host .base-cell__title-text{width:100%;padding:var(--rt-table-base-cell-title-padding);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}: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;visibility:hidden;padding:var(--rt-table-base-cell-copy-button-padding);background-color:var(--rt-table-base-cell-copy-button-background-color)}: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: "21.0.1", 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: 
                 // 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
@@ -1780,7 +1787,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
                         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: [":host{height:100%;width:100%;display:flex;align-items:center;gap:var(--rt-table-base-cell-host-gap);position:relative;--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(--clr-black-100)}: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{width:100%;display:table;table-layout:fixed}:host .base-cell__title-text{width:100%;padding:var(--rt-table-base-cell-title-padding);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}: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;visibility:hidden;padding:var(--rt-table-base-cell-copy-button-padding);background-color:var(--rt-table-base-cell-copy-button-background-color)}: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]=\"!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"] }]
         }], 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']
@@ -1827,7 +1834,7 @@ class RtuiTableHeaderCellComponent {
         return LIST_SORT_ORDER_ENUM.ASC;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtuiTableHeaderCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", 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: [":host{display:flex;justify-content:space-between;align-items:center;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(--clr-black-40);--rt-table-header-cell-icon-active-color: var(--clr-black-100)}:host:hover .header-cell-icons{visibility:visible}:host .header-cell-label{flex-grow:1;display:flex;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{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}: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;justify-content:center;align-items: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-left:3px solid transparent;border-right:3px solid transparent;border-bottom:5.2px solid var(--rt-table-header-cell-icon-color)}:host .header-cell-icons__icon--second{margin-top:2px;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: "21.0.1", 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: 
                 // 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
@@ -1850,7 +1857,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
                         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: [":host{display:flex;justify-content:space-between;align-items:center;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(--clr-black-40);--rt-table-header-cell-icon-active-color: var(--clr-black-100)}:host:hover .header-cell-icons{visibility:visible}:host .header-cell-label{flex-grow:1;display:flex;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{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}: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;justify-content:center;align-items: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-left:3px solid transparent;border-right:3px solid transparent;border-bottom:5.2px solid var(--rt-table-header-cell-icon-color)}:host .header-cell-icons__icon--second{margin-top:2px;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 ?? ''\" [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"] }]
         }], 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']
@@ -1963,7 +1970,7 @@ class RtuiTableHeaderFilterCellComponent {
         this.currentFilter.update((filter) => ({ ...filter, operatorType }));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtuiTableHeaderFilterCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", 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{width:100%;display:flex;justify-content:flex-start;align-items:center;gap:.5rem}:host .table-header-cell-filter-input{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[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: "21.0.1", 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])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[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
@@ -2000,7 +2007,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", 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{width:100%;display:flex;justify-content:flex-start;align-items:center;gap:.5rem}: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]=\"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"] }]
         }], 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 {
@@ -2228,7 +2235,7 @@ class RtuiTableComponent {
                 // 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
-                BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }, { kind: "directive", type: RtIconOutlinedDirective, selector: "mat-icon[rtIconOutlined]", inputs: ["rtIconOutlined"] }, { kind: "directive", type: RtuiTableRowClickDirective, selector: "[rtuiTableRowClickDirective]", inputs: ["rtuiTableRowClickDirective", "isTableRowClickable"] }, { kind: "component", type: 
+                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: RtuiTableRowClickDirective, selector: "[rtuiTableRowClickDirective]", inputs: ["rtuiTableRowClickDirective", "isTableRowClickable"] }, { kind: "component", type: 
                 // components
                 RtuiTableHeaderCellComponent, selector: "rtui-table-header-cell", inputs: ["headerModel", "sortModel", "currentSortModel", "headerDataEllipsisMaxLines"], outputs: ["sortChange"] }, { kind: "component", type: TableBaseCellComponent, selector: "rtui-table-base-cell", inputs: ["row", "column", "isMobile"] }, { kind: "component", type: RtuiTableHeaderFilterCellComponent, selector: "rtui-table-header-filter-cell", inputs: ["appearance", "filterProperty", "filterType", "filterModel", "defaultFilterOperator", "filterOperators", "filterSelectOptions", "isMobile"], outputs: ["filterChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
@@ -2246,6 +2253,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
                         // directives
                         BlockDirective,
                         ElemDirective,
+                        ModDirective,
                         RtIconOutlinedDirective,
                         RtuiTableRowClickDirective,
                         // components
@@ -2280,11 +2288,11 @@ class RtuiDynamicSelectorListActionsComponent {
         this.clearAction.emit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtuiDynamicSelectorListActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.1", 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: [":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(--clr-red-100);display:flex;align-items:center;margin-left:auto;padding-right:var(--rt-dynamic-selector-list-actions-host-padding-right)}:host .rtui-dynamic-selector-list-actions{display:flex;align-items:center;margin-left:auto;padding-right:var(--rt-dynamic-selector-list-actions-padding-right)}: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: "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: "21.0.1", 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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtuiDynamicSelectorListActionsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rtui-dynamic-selector-list-actions', imports: [MatIcon, MatButton, RtIconOutlinedDirective, BlockDirective, ElemDirective, 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: [":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(--clr-red-100);display:flex;align-items:center;margin-left:auto;padding-right:var(--rt-dynamic-selector-list-actions-host-padding-right)}:host .rtui-dynamic-selector-list-actions{display:flex;align-items:center;margin-left:auto;padding-right:var(--rt-dynamic-selector-list-actions-padding-right)}: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"] }]
+            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"] }] } });
 
 class RtuiDynamicSelectorsDirective {
@@ -2392,9 +2400,9 @@ class RtuiToggleComponent {
                 multi: true,
             },
             BreakpointService,
-        ], ngImport: i0, 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: [":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(--clr-gray-5);--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(--clr-black-80);--rt-toggle-toggle-switch-border-radius: 2.25rem;--rt-toggle-toggle-switch-background-color: var(--clr-white-100);--rt-toggle-toggle-switch-box-shadow: 0 .0625rem .125rem rgba(0, 0, 0, .2);--rt-toggle-toggle-track-background-color: var(--clr-gray-10);--rt-toggle-toggle-track-border-radius: 2.5rem;--rt-toggle-toggle-track-border: .0625rem solid var(--clr-gray-15);--rt-toggle-label-color: var(--clr-black-60);--rt-toggle-label-font-size: .875rem;--rt-toggle-label-active-color: var(--clr-black-100);--rt-toggle-label-hover-color: var(--clr-black-100);--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;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);overflow:hidden;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-property:left,right;transition-delay:.05s,0s}:host .rtui-toggle-container .rtui-toggle__switch{position:absolute;inset:.125rem 1.375rem .125rem .125rem;background-color:var(--rt-toggle-toggle-switch-background-color);border-radius:var(--rt-toggle-toggle-switch-border-radius);z-index:1;transition:.35s cubic-bezier(.785,.135,.15,.86);transition-property:left,right;transition-delay:0s,.05s;box-shadow:var(--rt-toggle-toggle-switch-box-shadow)}:host .rtui-toggle-container .rtui-toggle__track{position:absolute;inset:0;transition:.35s cubic-bezier(.785,.135,.15,.86);background-color:var(--rt-toggle-toggle-track-background-color);border-radius:var(--rt-toggle-toggle-track-border-radius);border:var(--rt-toggle-toggle-track-border)}: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{left:1.625rem;right:.125rem}: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{left:.75rem;right:.125rem}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { 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: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: 
+        ], ngImport: i0, 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"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { 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: 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+                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: "21.0.1", ngImport: i0, type: RtuiToggleComponent, decorators: [{
             type: Component,
@@ -2411,7 +2419,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
                         // directives
                         BlockDirective,
                         ElemDirective,
-                    ], 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: [":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(--clr-gray-5);--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(--clr-black-80);--rt-toggle-toggle-switch-border-radius: 2.25rem;--rt-toggle-toggle-switch-background-color: var(--clr-white-100);--rt-toggle-toggle-switch-box-shadow: 0 .0625rem .125rem rgba(0, 0, 0, .2);--rt-toggle-toggle-track-background-color: var(--clr-gray-10);--rt-toggle-toggle-track-border-radius: 2.5rem;--rt-toggle-toggle-track-border: .0625rem solid var(--clr-gray-15);--rt-toggle-label-color: var(--clr-black-60);--rt-toggle-label-font-size: .875rem;--rt-toggle-label-active-color: var(--clr-black-100);--rt-toggle-label-hover-color: var(--clr-black-100);--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;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);overflow:hidden;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-property:left,right;transition-delay:.05s,0s}:host .rtui-toggle-container .rtui-toggle__switch{position:absolute;inset:.125rem 1.375rem .125rem .125rem;background-color:var(--rt-toggle-toggle-switch-background-color);border-radius:var(--rt-toggle-toggle-switch-border-radius);z-index:1;transition:.35s cubic-bezier(.785,.135,.15,.86);transition-property:left,right;transition-delay:0s,.05s;box-shadow:var(--rt-toggle-toggle-switch-box-shadow)}:host .rtui-toggle-container .rtui-toggle__track{position:absolute;inset:0;transition:.35s cubic-bezier(.785,.135,.15,.86);background-color:var(--rt-toggle-toggle-track-background-color);border-radius:var(--rt-toggle-toggle-track-border-radius);border:var(--rt-toggle-toggle-track-border)}: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{left:1.625rem;right:.125rem}: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{left:.75rem;right:.125rem}\n"] }]
+                        ModDirective,
+                    ], 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 }] }] } });
 
 class RtuiMultiSelectorPopupComponent {
@@ -2615,11 +2624,11 @@ class RtuiMultiSelectorPopupComponent {
         this.scrollAction.emit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtuiMultiSelectorPopupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", 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 } }, 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                        [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                        [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: [":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(--clr-black-60);--rt-multi-selector-host-border-radius: .375rem;--rt-multi-selector-host-background-color: var(--clr-white-100);--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(--clr-black-40);--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(--clr-black-60);--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(--clr-gray-20);--rt-multi-selector-item-label-hover-color: var(--clr-black-60);--rt-multi-selector-options-item-separated-border-bottom: solid 1px var(--clr-gray-20);--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(--clr-black-60);--rt-multi-selector-placeholder-title-font-size: 1.5rem;--rt-multi-selector-placeholder-title-color: var(--clr-black-60);--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(--clr-black-60);--rt-multi-selector-footer-nav-action-hover-color: var(--clr-black-100);display:flex;flex-direction:column;width:var(--rt-multi-selector-host-width);height:var(--rt-multi-selector-host-height);padding:var(--rt-multi-selector-host-padding);box-shadow:var(--rt-multi-selector-host-box-shadow);border-radius:var(--rt-multi-selector-host-border-radius);background-color:var(--rt-multi-selector-host-background-color)}: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);font-size:var(--rt-multi-selector-header-controls-item-info-font-size);color:var(--rt-multi-selector-header-controls-item-info-color)}:host .rtui-multi-selector-options{display:flex;flex-direction:column;flex:1 1 100%;height:100%;width:100%;overflow-y:auto}:host .rtui-multi-selector-options__item-title{width:100%;max-width:var(--rt-multi-selector-options-item-title-max-width);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}: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;justify-content:center;align-items:center}:host .rtui-multi-selector-placeholder{display:flex;flex-direction:column;justify-content:center;align-items:center;flex:1 1 100%;gap:var(--rt-multi-selector-placeholder-gap);padding-right:var(--rt-multi-selector-placeholder-padding-right);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);font-size:var(--rt-multi-selector-placeholder-icon-size);color:var(--rt-multi-selector-placeholder-icon-color)}:host .rtui-multi-selector-placeholder__title{font-size:var(--rt-multi-selector-placeholder-title-font-size);color:var(--rt-multi-selector-placeholder-title-color)}:host .rtui-multi-selector-footer{display:flex;justify-content:flex-end;align-items:center;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{text-decoration:none;font-size:var(--rt-multi-selector-footer-nav-action-font-size);color:var(--rt-multi-selector-footer-nav-action-color)}: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: "21.0.1", 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 } }, 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                        [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                        [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: 
                 // 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])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[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", "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
-                BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }, { kind: "directive", type: RtScrollDirective, selector: "[rtScrollDirective]", inputs: ["active", "multiplier"], outputs: ["scrollAction"] }, { kind: "directive", type: RtIconOutlinedDirective, selector: "mat-icon[rtIconOutlined]", inputs: ["rtIconOutlined"] }, { kind: "component", type: 
+                BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }, { kind: "directive", type: ModDirective, selector: "[rtMod]" }, { kind: "directive", type: RtScrollDirective, selector: "[rtScrollDirective]", inputs: ["active", "multiplier"], outputs: ["scrollAction"] }, { kind: "directive", type: RtIconOutlinedDirective, selector: "mat-icon[rtIconOutlined]", inputs: ["rtIconOutlined"] }, { kind: "component", type: 
                 // components
                 RtuiClearButtonComponent, selector: "rtui-clear-button", inputs: ["isMobile", "isButtonShown", "tooltip", "tooltipPosition"], outputs: ["keydownAction", "clickAction"] }, { kind: "component", type: RtuiToggleComponent, selector: "rtui-toggle", inputs: ["label", "tooltip", "size", "tooltipPosition", "isDisabled", "tooltipDisabled"] }, { kind: "component", type: RtuiSpinnerComponent, selector: "rtui-spinner", inputs: ["diameter", "showBox", "showBackground"] }, { kind: "pipe", type: BreakStringPipe, name: "breakString" }, { kind: "pipe", type: EntityToStringPipe, name: "entityToString" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
@@ -2644,6 +2653,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
                         // directives
                         BlockDirective,
                         ElemDirective,
+                        ModDirective,
                         RtScrollDirective,
                         RtIconOutlinedDirective,
                         // components
@@ -2651,7 +2661,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", 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                        [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                        [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: [":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(--clr-black-60);--rt-multi-selector-host-border-radius: .375rem;--rt-multi-selector-host-background-color: var(--clr-white-100);--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(--clr-black-40);--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(--clr-black-60);--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(--clr-gray-20);--rt-multi-selector-item-label-hover-color: var(--clr-black-60);--rt-multi-selector-options-item-separated-border-bottom: solid 1px var(--clr-gray-20);--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(--clr-black-60);--rt-multi-selector-placeholder-title-font-size: 1.5rem;--rt-multi-selector-placeholder-title-color: var(--clr-black-60);--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(--clr-black-60);--rt-multi-selector-footer-nav-action-hover-color: var(--clr-black-100);display:flex;flex-direction:column;width:var(--rt-multi-selector-host-width);height:var(--rt-multi-selector-host-height);padding:var(--rt-multi-selector-host-padding);box-shadow:var(--rt-multi-selector-host-box-shadow);border-radius:var(--rt-multi-selector-host-border-radius);background-color:var(--rt-multi-selector-host-background-color)}: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);font-size:var(--rt-multi-selector-header-controls-item-info-font-size);color:var(--rt-multi-selector-header-controls-item-info-color)}:host .rtui-multi-selector-options{display:flex;flex-direction:column;flex:1 1 100%;height:100%;width:100%;overflow-y:auto}:host .rtui-multi-selector-options__item-title{width:100%;max-width:var(--rt-multi-selector-options-item-title-max-width);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}: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;justify-content:center;align-items:center}:host .rtui-multi-selector-placeholder{display:flex;flex-direction:column;justify-content:center;align-items:center;flex:1 1 100%;gap:var(--rt-multi-selector-placeholder-gap);padding-right:var(--rt-multi-selector-placeholder-padding-right);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);font-size:var(--rt-multi-selector-placeholder-icon-size);color:var(--rt-multi-selector-placeholder-icon-color)}:host .rtui-multi-selector-placeholder__title{font-size:var(--rt-multi-selector-placeholder-title-font-size);color:var(--rt-multi-selector-placeholder-title-color)}:host .rtui-multi-selector-footer{display:flex;justify-content:flex-end;align-items:center;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{text-decoration:none;font-size:var(--rt-multi-selector-footer-nav-action-font-size);color:var(--rt-multi-selector-footer-nav-action-color)}: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"] }]
+                    ], 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                        [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                        [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 }] }], 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 }] }] } });
 
 class RtuiDynamicSelectorPlaceholderComponent {
@@ -2668,11 +2678,11 @@ class RtuiDynamicSelectorPlaceholderComponent {
         this.submitAction.emit(trigger);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtuiDynamicSelectorPlaceholderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", 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: [":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(--clr-black-80);--rt-dynamic-selector-placeholder-icon-warn-color: var(--clr-orange-70);--rt-dynamic-selector-placeholder-description-font-size: 1rem;--rt-dynamic-selector-placeholder-description-line-height: 1.25rem;--rt-dynamic-selector-placeholder-description-color: var(--clr-black-60);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);display:flex;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);font-size:var(--rt-dynamic-selector-placeholder-icon-size);color:var(--rt-dynamic-selector-placeholder-icon-color)}:host .rtui-dynamic-selector-placeholder__icon--warn{color:var(--rt-dynamic-selector-placeholder-icon-warn-color)}:host .rtui-dynamic-selector-placeholder__description{font-size:var(--rt-dynamic-selector-placeholder-description-font-size);line-height:var(--rt-dynamic-selector-placeholder-description-line-height);color:var(--rt-dynamic-selector-placeholder-description-color)}\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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", 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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtuiDynamicSelectorPlaceholderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rtui-dynamic-selector-placeholder', imports: [MatIcon, MatButton, CdkOverlayOrigin, RtIconOutlinedDirective, BlockDirective, ElemDirective], 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: [":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(--clr-black-80);--rt-dynamic-selector-placeholder-icon-warn-color: var(--clr-orange-70);--rt-dynamic-selector-placeholder-description-font-size: 1rem;--rt-dynamic-selector-placeholder-description-line-height: 1.25rem;--rt-dynamic-selector-placeholder-description-color: var(--clr-black-60);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);display:flex;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);font-size:var(--rt-dynamic-selector-placeholder-icon-size);color:var(--rt-dynamic-selector-placeholder-icon-color)}:host .rtui-dynamic-selector-placeholder__icon--warn{color:var(--rt-dynamic-selector-placeholder-icon-warn-color)}:host .rtui-dynamic-selector-placeholder__description{font-size:var(--rt-dynamic-selector-placeholder-description-font-size);line-height:var(--rt-dynamic-selector-placeholder-description-line-height);color:var(--rt-dynamic-selector-placeholder-description-color)}\n"] }]
+            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"] }]
         }], 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 */
@@ -2747,13 +2757,13 @@ class RtuiDynamicSelectorSelectedListComponent {
         this.editedItemIndex.set(index);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtuiDynamicSelectorSelectedListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: RtuiDynamicSelectorSelectedListComponent, isStandalone: true, selector: "rtui-dynamic-selector-selected-list", inputs: { isMobile: { classPropertyName: "isMobile", publicName: "isMobile", isSignal: true, isRequired: true, transformFunction: null }, keyExp: { classPropertyName: "keyExp", publicName: "keyExp", isSignal: true, isRequired: true, transformFunction: null }, displayExp: { classPropertyName: "displayExp", publicName: "displayExp", isSignal: true, isRequired: true, transformFunction: null }, selectedEntities: { classPropertyName: "selectedEntities", publicName: "selectedEntities", isSignal: true, isRequired: true, transformFunction: null }, readonlyEntitiesKeys: { classPropertyName: "readonlyEntitiesKeys", publicName: "readonlyEntitiesKeys", isSignal: true, isRequired: false, transformFunction: null }, isListDraggable: { classPropertyName: "isListDraggable", publicName: "isListDraggable", isSignal: true, isRequired: false, transformFunction: null }, useNameBreaking: { classPropertyName: "useNameBreaking", publicName: "useNameBreaking", isSignal: true, isRequired: false, transformFunction: null }, useTitleCase: { classPropertyName: "useTitleCase", publicName: "useTitleCase", isSignal: true, isRequired: false, transformFunction: null }, isDeleteButtonShown: { classPropertyName: "isDeleteButtonShown", publicName: "isDeleteButtonShown", isSignal: true, isRequired: false, transformFunction: null }, isItemsEditable: { classPropertyName: "isItemsEditable", publicName: "isItemsEditable", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { deleteFromSelectedAction: "deleteFromSelectedAction", dropAction: "dropAction", changeValueAction: "changeValueAction" }, queries: [{ propertyName: "additionalControlTpl", first: true, predicate: RtuiDynamicSelectorItemAdditionalControlDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "itemTitleTpl", first: true, predicate: RtuiDynamicSelectorItemTitleDirective, descendants: true, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "inputRef", first: true, predicate: MatInput, descendants: true, isSignal: true }], ngImport: i0, template: "<ng-container rtBlock=\"rtui-dynamic-selector\">\n    <div rtElem=\"list\" cdkDropList (cdkDropListDropped)=\"onDrop($event)\">\n        @for (entity of selectedEntities(); track entity[displayExp()]; let i = $index) {\n            <div cdkDrag rtElem=\"item\" [rtMod]=\"{ draggable: isListDraggable() }\" [cdkDragDisabled]=\"!isListDraggable()\">\n                @if (isListDraggable()) {\n                    <div rtElem=\"item-mover\">\n                        <div rtElem=\"item-control\">\n                            <button\n                                cdkDragHandle\n                                mat-icon-button\n                                type=\"button\"\n                                rtElem=\"item-control-button\"\n                                rtMod=\"draggable\"\n                                matTooltip=\"Hold button to drag\"\n                                matTooltipPosition=\"right\"\n                                [matTooltipDisabled]=\"isMobile()\">\n                                <mat-icon [rtIconOutlined]=\"true\">open_with</mat-icon>\n                            </button>\n                        </div>\n                    </div>\n                }\n\n                @if (editedItemIndex() === i) {\n                    <mat-form-field rtElem=\"item-input\" subscriptSizing=\"dynamic\" [appearance]=\"appearance()\">\n                        <input matInput type=\"text\" [value]=\"entity[displayExp()]\" (keydown.enter)=\"changeValue(entity[displayExp()])\" />\n                    </mat-form-field>\n                } @else if (itemTitleTpl()) {\n                    <ng-container *ngTemplateOutlet=\"itemTitleTpl() || null; context: { $implicit: entity }\" />\n                } @else {\n                    <span\n                        #titleTpl\n                        rtElem=\"item-title\"\n                        matTooltipPosition=\"above\"\n                        [rtHideTooltipDirective]=\"titleTpl\"\n                        [isTooltipShown]=\"!isMobile()\"\n                        [matTooltip]=\"\n                            useNameBreaking()\n                                ? (entity[displayExp()] | entityToString | breakString)\n                                : (entity[displayExp()] | entityToString)\n                        \"\n                        [matTooltipDisabled]=\"isMobile()\">\n                        @if (useNameBreaking()) {\n                            {{\n                                useTitleCase()\n                                    ? (entity[displayExp()] | entityToString | breakString | titlecase)\n                                    : (entity[displayExp()] | entityToString | breakString)\n                            }}\n                        } @else {\n                            {{ useTitleCase() ? (entity[displayExp()] | entityToString | titlecase) : entity[displayExp()] }}\n                        }\n                    </span>\n                }\n\n                <div rtElem=\"item-controls\">\n                    @if (additionalControlTpl()) {\n                        <ng-container *ngTemplateOutlet=\"additionalControlTpl() || null; context: { $implicit: entity }\" />\n                    }\n\n                    @if (isItemsEditable()) {\n                        @if (editedItemIndex() === i) {\n                            <div rtElem=\"item-control\">\n                                <button\n                                    mat-icon-button\n                                    type=\"button\"\n                                    rtElem=\"item-control-button\"\n                                    matTooltipPosition=\"left\"\n                                    matTooltip=\"Reset\"\n                                    [matTooltipDisabled]=\"isMobile()\"\n                                    (click)=\"setEditModState(null)\">\n                                    <mat-icon [rtIconOutlined]=\"true\">refresh</mat-icon>\n                                </button>\n                            </div>\n                        }\n\n                        <div rtElem=\"item-control\">\n                            <button\n                                mat-icon-button\n                                type=\"button\"\n                                rtElem=\"item-control-button\"\n                                matTooltipPosition=\"right\"\n                                [matTooltip]=\"editedItemIndex() === i ? 'Apply' : 'Edit item'\"\n                                [matTooltipDisabled]=\"isMobile()\"\n                                (click)=\"editedItemIndex() === i ? changeValue(entity[displayExp()]) : setEditModState(i)\">\n                                <mat-icon [rtIconOutlined]=\"true\">{{ editedItemIndex() === i ? 'done' : 'edit' }}</mat-icon>\n                            </button>\n                        </div>\n                    }\n\n                    @if (isDeleteButtonShown()) {\n                        <div rtElem=\"item-control\">\n                            <button\n                                mat-icon-button\n                                type=\"button\"\n                                rtElem=\"item-control-button\"\n                                matTooltip=\"Remove the Item from the List\"\n                                matTooltipPosition=\"left\"\n                                [rtMod]=\"{ active: !readonlyEntitiesKeys().includes(entity[keyExp()]) }\"\n                                [matTooltipDisabled]=\"isMobile()\"\n                                [disabled]=\"readonlyEntitiesKeys().includes(entity[keyExp()])\"\n                                (click)=\"onDelete(entity[keyExp()])\">\n                                <mat-icon [rtIconOutlined]=\"true\">delete</mat-icon>\n                            </button>\n                        </div>\n                    }\n                </div>\n            </div>\n        }\n    </div>\n</ng-container>\n", styles: [":host::ng-deep .mat-mdc-form-field-flex{height:100%}:host::ng-deep .mat-mdc-form-field-infix{display:flex;height:100%;min-height:100%;align-items:center;padding:0}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.rtui-dynamic-selector__list.cdk-drop-list-dragging .rtui-dynamic-selector__item:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.cdk-drag-preview{border:none;box-sizing:border-box;border-radius:var(--rt-dynamic-selector-item-border-radius);box-shadow:var(--rt-dynamic-selector-item-drag-preview-box-shadow);background:var(--mat-option-selected-state-layer-color)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: 
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: RtuiDynamicSelectorSelectedListComponent, isStandalone: true, selector: "rtui-dynamic-selector-selected-list", inputs: { isMobile: { classPropertyName: "isMobile", publicName: "isMobile", isSignal: true, isRequired: true, transformFunction: null }, keyExp: { classPropertyName: "keyExp", publicName: "keyExp", isSignal: true, isRequired: true, transformFunction: null }, displayExp: { classPropertyName: "displayExp", publicName: "displayExp", isSignal: true, isRequired: true, transformFunction: null }, selectedEntities: { classPropertyName: "selectedEntities", publicName: "selectedEntities", isSignal: true, isRequired: true, transformFunction: null }, readonlyEntitiesKeys: { classPropertyName: "readonlyEntitiesKeys", publicName: "readonlyEntitiesKeys", isSignal: true, isRequired: false, transformFunction: null }, isListDraggable: { classPropertyName: "isListDraggable", publicName: "isListDraggable", isSignal: true, isRequired: false, transformFunction: null }, useNameBreaking: { classPropertyName: "useNameBreaking", publicName: "useNameBreaking", isSignal: true, isRequired: false, transformFunction: null }, useTitleCase: { classPropertyName: "useTitleCase", publicName: "useTitleCase", isSignal: true, isRequired: false, transformFunction: null }, isDeleteButtonShown: { classPropertyName: "isDeleteButtonShown", publicName: "isDeleteButtonShown", isSignal: true, isRequired: false, transformFunction: null }, isItemsEditable: { classPropertyName: "isItemsEditable", publicName: "isItemsEditable", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { deleteFromSelectedAction: "deleteFromSelectedAction", dropAction: "dropAction", changeValueAction: "changeValueAction" }, queries: [{ propertyName: "additionalControlTpl", first: true, predicate: RtuiDynamicSelectorItemAdditionalControlDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "itemTitleTpl", first: true, predicate: RtuiDynamicSelectorItemTitleDirective, descendants: true, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "inputRef", first: true, predicate: MatInput, descendants: true, isSignal: true }], ngImport: i0, template: "<ng-container rtBlock=\"rtui-dynamic-selector\">\n    <div rtElem=\"list\" cdkDropList (cdkDropListDropped)=\"onDrop($event)\">\n        @for (entity of selectedEntities(); track entity[displayExp()]; let i = $index) {\n            <div cdkDrag rtElem=\"item\" [rtMod]=\"{ draggable: isListDraggable() }\" [cdkDragDisabled]=\"!isListDraggable()\">\n                @if (isListDraggable()) {\n                    <div rtElem=\"item-mover\">\n                        <div rtElem=\"item-control\">\n                            <button\n                                cdkDragHandle\n                                mat-icon-button\n                                type=\"button\"\n                                rtElem=\"item-control-button\"\n                                rtMod=\"draggable\"\n                                matTooltip=\"Hold button to drag\"\n                                matTooltipPosition=\"right\"\n                                [matTooltipDisabled]=\"isMobile()\">\n                                <mat-icon [rtIconOutlined]=\"true\">open_with</mat-icon>\n                            </button>\n                        </div>\n                    </div>\n                }\n\n                @if (editedItemIndex() === i) {\n                    <mat-form-field rtElem=\"item-input\" subscriptSizing=\"dynamic\" [appearance]=\"appearance()\">\n                        <input matInput type=\"text\" [value]=\"entity[displayExp()]\" (keydown.enter)=\"changeValue(entity[displayExp()])\" />\n                    </mat-form-field>\n                } @else if (itemTitleTpl()) {\n                    <ng-container *ngTemplateOutlet=\"itemTitleTpl() || null; context: { $implicit: entity }\" />\n                } @else {\n                    <span\n                        #titleTpl\n                        rtElem=\"item-title\"\n                        matTooltipPosition=\"above\"\n                        [rtHideTooltipDirective]=\"titleTpl\"\n                        [isTooltipShown]=\"!isMobile()\"\n                        [matTooltip]=\"\n                            useNameBreaking()\n                                ? (entity[displayExp()] | entityToString | breakString)\n                                : (entity[displayExp()] | entityToString)\n                        \"\n                        [matTooltipDisabled]=\"isMobile()\">\n                        @if (useNameBreaking()) {\n                            {{\n                                useTitleCase()\n                                    ? (entity[displayExp()] | entityToString | breakString | titlecase)\n                                    : (entity[displayExp()] | entityToString | breakString)\n                            }}\n                        } @else {\n                            {{ useTitleCase() ? (entity[displayExp()] | entityToString | titlecase) : entity[displayExp()] }}\n                        }\n                    </span>\n                }\n\n                <div rtElem=\"item-controls\">\n                    @if (additionalControlTpl()) {\n                        <ng-container *ngTemplateOutlet=\"additionalControlTpl() || null; context: { $implicit: entity }\" />\n                    }\n\n                    @if (isItemsEditable()) {\n                        @if (editedItemIndex() === i) {\n                            <div rtElem=\"item-control\">\n                                <button\n                                    mat-icon-button\n                                    type=\"button\"\n                                    rtElem=\"item-control-button\"\n                                    matTooltipPosition=\"left\"\n                                    matTooltip=\"Reset\"\n                                    [matTooltipDisabled]=\"isMobile()\"\n                                    (click)=\"setEditModState(null)\">\n                                    <mat-icon [rtIconOutlined]=\"true\">refresh</mat-icon>\n                                </button>\n                            </div>\n                        }\n\n                        <div rtElem=\"item-control\">\n                            <button\n                                mat-icon-button\n                                type=\"button\"\n                                rtElem=\"item-control-button\"\n                                matTooltipPosition=\"right\"\n                                [matTooltip]=\"editedItemIndex() === i ? 'Apply' : 'Edit item'\"\n                                [matTooltipDisabled]=\"isMobile()\"\n                                (click)=\"editedItemIndex() === i ? changeValue(entity[displayExp()]) : setEditModState(i)\">\n                                <mat-icon [rtIconOutlined]=\"true\">{{ editedItemIndex() === i ? 'done' : 'edit' }}</mat-icon>\n                            </button>\n                        </div>\n                    }\n\n                    @if (isDeleteButtonShown()) {\n                        <div rtElem=\"item-control\">\n                            <button\n                                mat-icon-button\n                                type=\"button\"\n                                rtElem=\"item-control-button\"\n                                matTooltip=\"Remove the Item from the List\"\n                                matTooltipPosition=\"left\"\n                                [rtMod]=\"{ active: !readonlyEntitiesKeys().includes(entity[keyExp()]) }\"\n                                [matTooltipDisabled]=\"isMobile()\"\n                                [disabled]=\"readonlyEntitiesKeys().includes(entity[keyExp()])\"\n                                (click)=\"onDelete(entity[keyExp()])\">\n                                <mat-icon [rtIconOutlined]=\"true\">delete</mat-icon>\n                            </button>\n                        </div>\n                    }\n                </div>\n            </div>\n        }\n    </div>\n</ng-container>\n", styles: [":host::ng-deep .mat-mdc-form-field-flex{height:100%}:host::ng-deep .mat-mdc-form-field-infix{display:flex;height:100%;min-height:100%;align-items:center;padding:0}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.rtui-dynamic-selector__list.cdk-drop-list-dragging .rtui-dynamic-selector__item:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.cdk-drag-preview{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
                 CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: 
                 // directives
-                RtIconOutlinedDirective, selector: "mat-icon[rtIconOutlined]", inputs: ["rtIconOutlined"] }, { kind: "directive", type: RtHideTooltipDirective, selector: "[rtHideTooltipDirective]", inputs: ["rtHideTooltipDirective", "isTooltipShown"] }, { kind: "directive", type: BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }, { kind: "pipe", type: 
+                RtIconOutlinedDirective, selector: "mat-icon[rtIconOutlined]", inputs: ["rtIconOutlined"] }, { kind: "directive", type: RtHideTooltipDirective, selector: "[rtHideTooltipDirective]", inputs: ["rtHideTooltipDirective", "isTooltipShown"] }, { kind: "directive", type: BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }, { kind: "directive", type: ModDirective, selector: "[rtMod]" }, { kind: "pipe", type: 
                 // pipes
                 EntityToStringPipe, name: "entityToString" }, { kind: "pipe", type: BreakStringPipe, name: "breakString" }, { kind: "pipe", type: TitleCasePipe, name: "titlecase" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
@@ -2778,11 +2788,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
                         RtHideTooltipDirective,
                         BlockDirective,
                         ElemDirective,
+                        ModDirective,
                         // pipes
                         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{border:none;box-sizing:border-box;border-radius:var(--rt-dynamic-selector-item-border-radius);box-shadow:var(--rt-dynamic-selector-item-drag-preview-box-shadow);background:var(--mat-option-selected-state-layer-color)}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container rtBlock=\"rtui-dynamic-selector\">\n    <div rtElem=\"list\" cdkDropList (cdkDropListDropped)=\"onDrop($event)\">\n        @for (entity of selectedEntities(); track entity[displayExp()]; let i = $index) {\n            <div cdkDrag rtElem=\"item\" [rtMod]=\"{ draggable: isListDraggable() }\" [cdkDragDisabled]=\"!isListDraggable()\">\n                @if (isListDraggable()) {\n                    <div rtElem=\"item-mover\">\n                        <div rtElem=\"item-control\">\n                            <button\n                                cdkDragHandle\n                                mat-icon-button\n                                type=\"button\"\n                                rtElem=\"item-control-button\"\n                                rtMod=\"draggable\"\n                                matTooltip=\"Hold button to drag\"\n                                matTooltipPosition=\"right\"\n                                [matTooltipDisabled]=\"isMobile()\">\n                                <mat-icon [rtIconOutlined]=\"true\">open_with</mat-icon>\n                            </button>\n                        </div>\n                    </div>\n                }\n\n                @if (editedItemIndex() === i) {\n                    <mat-form-field rtElem=\"item-input\" subscriptSizing=\"dynamic\" [appearance]=\"appearance()\">\n                        <input matInput type=\"text\" [value]=\"entity[displayExp()]\" (keydown.enter)=\"changeValue(entity[displayExp()])\" />\n                    </mat-form-field>\n                } @else if (itemTitleTpl()) {\n                    <ng-container *ngTemplateOutlet=\"itemTitleTpl() || null; context: { $implicit: entity }\" />\n                } @else {\n                    <span\n                        #titleTpl\n                        rtElem=\"item-title\"\n                        matTooltipPosition=\"above\"\n                        [rtHideTooltipDirective]=\"titleTpl\"\n                        [isTooltipShown]=\"!isMobile()\"\n                        [matTooltip]=\"\n                            useNameBreaking()\n                                ? (entity[displayExp()] | entityToString | breakString)\n                                : (entity[displayExp()] | entityToString)\n                        \"\n                        [matTooltipDisabled]=\"isMobile()\">\n                        @if (useNameBreaking()) {\n                            {{\n                                useTitleCase()\n                                    ? (entity[displayExp()] | entityToString | breakString | titlecase)\n                                    : (entity[displayExp()] | entityToString | breakString)\n                            }}\n                        } @else {\n                            {{ useTitleCase() ? (entity[displayExp()] | entityToString | titlecase) : entity[displayExp()] }}\n                        }\n                    </span>\n                }\n\n                <div rtElem=\"item-controls\">\n                    @if (additionalControlTpl()) {\n                        <ng-container *ngTemplateOutlet=\"additionalControlTpl() || null; context: { $implicit: entity }\" />\n                    }\n\n                    @if (isItemsEditable()) {\n                        @if (editedItemIndex() === i) {\n                            <div rtElem=\"item-control\">\n                                <button\n                                    mat-icon-button\n                                    type=\"button\"\n                                    rtElem=\"item-control-button\"\n                                    matTooltipPosition=\"left\"\n                                    matTooltip=\"Reset\"\n                                    [matTooltipDisabled]=\"isMobile()\"\n                                    (click)=\"setEditModState(null)\">\n                                    <mat-icon [rtIconOutlined]=\"true\">refresh</mat-icon>\n                                </button>\n                            </div>\n                        }\n\n                        <div rtElem=\"item-control\">\n                            <button\n                                mat-icon-button\n                                type=\"button\"\n                                rtElem=\"item-control-button\"\n                                matTooltipPosition=\"right\"\n                                [matTooltip]=\"editedItemIndex() === i ? 'Apply' : 'Edit item'\"\n                                [matTooltipDisabled]=\"isMobile()\"\n                                (click)=\"editedItemIndex() === i ? changeValue(entity[displayExp()]) : setEditModState(i)\">\n                                <mat-icon [rtIconOutlined]=\"true\">{{ editedItemIndex() === i ? 'done' : 'edit' }}</mat-icon>\n                            </button>\n                        </div>\n                    }\n\n                    @if (isDeleteButtonShown()) {\n                        <div rtElem=\"item-control\">\n                            <button\n                                mat-icon-button\n                                type=\"button\"\n                                rtElem=\"item-control-button\"\n                                matTooltip=\"Remove the Item from the List\"\n                                matTooltipPosition=\"left\"\n                                [rtMod]=\"{ active: !readonlyEntitiesKeys().includes(entity[keyExp()]) }\"\n                                [matTooltipDisabled]=\"isMobile()\"\n                                [disabled]=\"readonlyEntitiesKeys().includes(entity[keyExp()])\"\n                                (click)=\"onDelete(entity[keyExp()])\">\n                                <mat-icon [rtIconOutlined]=\"true\">delete</mat-icon>\n                            </button>\n                        </div>\n                    }\n                </div>\n            </div>\n        }\n    </div>\n</ng-container>\n", styles: [":host::ng-deep .mat-mdc-form-field-flex{height:100%}:host::ng-deep .mat-mdc-form-field-infix{display:flex;height:100%;min-height:100%;align-items:center;padding:0}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.rtui-dynamic-selector__list.cdk-drop-list-dragging .rtui-dynamic-selector__item:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.cdk-drag-preview{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), { ...{
                             read: TemplateRef,
                         }, isSignal: true }] }], itemTitleTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => RtuiDynamicSelectorItemTitleDirective), { ...{
@@ -3112,7 +3123,7 @@ 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{height:100%;width:100%;display:flex;flex-direction:column;overflow:hidden}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: 
+        ], queries: [{ propertyName: "additionalControlTpl", first: true, predicate: RtuiDynamicSelectorAdditionalControlDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "itemTitleTpl", first: true, predicate: RtuiDynamicSelectorItemTitleProjectionDirective, descendants: true, read: TemplateRef, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<form [formGroup]=\"form\">\n    <ng-container rtBlock=\"rtui-dynamic-selector\">\n        @if (isNoDataPlaceholderShown()) {\n            <rtui-dynamic-selector-placeholder\n                description=\"There are no available items to choose\"\n                icon=\"warning\"\n                [isButtonShow]=\"false\"\n                [isIconOutlined]=\"true\" />\n        } @else {\n            <rtui-dynamic-selector-selected-list\n                [isMobile]=\"isMobile()\"\n                [keyExp]=\"keyExp()\"\n                [displayExp]=\"displayExp()\"\n                [selectedEntities]=\"selectedEntities()\"\n                [readonlyEntitiesKeys]=\"readonlyEntitiesKeys()\"\n                [isListDraggable]=\"isListDraggable()\"\n                [useNameBreaking]=\"useNameBreaking()\"\n                [useTitleCase]=\"useTitleCase()\"\n                [isDeleteButtonShown]=\"isDeleteButtonShown()\"\n                (dropAction)=\"onDrop($event)\"\n                (deleteFromSelectedAction)=\"toggleEntity($event)\">\n                @if (additionalControlTpl()) {\n                    <ng-container *rtuiDynamicSelectorItemAdditionalControlDirective=\"let entity\">\n                        <ng-template *ngTemplateOutlet=\"additionalControlTpl() || null; context: { $implicit: entity }\" />\n                    </ng-container>\n                }\n\n                @if (itemTitleTpl()) {\n                    <ng-container *rtuiDynamicSelectorItemTitleDirective=\"let entity\">\n                        <ng-template *ngTemplateOutlet=\"itemTitleTpl() || null; context: { $implicit: entity }\" />\n                    </ng-container>\n                }\n            </rtui-dynamic-selector-selected-list>\n\n            @if ((entitiesToSelect()?.length || !isLocalSearch()) && isSelectionAvailable()) {\n                @if (isPlaceholderShown()) {\n                    <rtui-dynamic-selector-placeholder\n                        [icon]=\"placeholderIcon()\"\n                        [description]=\"placeholderDescription()\"\n                        [buttonTitle]=\"buttonTitle()\"\n                        [disabled]=\"disabled()\"\n                        [isIconOutlined]=\"isPlaceholderIconOutlined()\"\n                        (submitAction)=\"showSelectionControl($event)\" />\n                } @else {\n                    <div rtElem=\"actions\">\n                        @if (isOpenPopupButtonShown() && this.entitiesToSelect()?.length) {\n                            <button\n                                #trigger=\"cdkOverlayOrigin\"\n                                cdkOverlayOrigin\n                                type=\"button\"\n                                class=\"c-button c-button--txt-base--size-sm\"\n                                [class.--disabled]=\"disabled()\"\n                                [disabled]=\"disabled()\"\n                                (click)=\"showSelectionControl(trigger)\">\n                                {{ buttonTitle() }}\n                            </button>\n                        }\n\n                        <ng-template [ngTemplateOutlet]=\"listActionsTpl\" />\n                    </div>\n                }\n\n                @if (selectedOverlayTrigger) {\n                    <ng-template\n                        rtEscapeKey\n                        cdkConnectedOverlay\n                        cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n                        [cdkConnectedOverlayHasBackdrop]=\"true\"\n                        [cdkConnectedOverlayOpen]=\"isSelectionControlShown()\"\n                        [cdkConnectedOverlayDisableClose]=\"true\"\n                        [cdkConnectedOverlayOrigin]=\"selectedOverlayTrigger\"\n                        [cdkConnectedOverlayPositions]=\"connectedOverlayPositions\"\n                        (backdropClick)=\"hideSelectionControl()\"\n                        (escapeKeyAction)=\"hideSelectionControl()\">\n                        <rtui-multi-selector-popup\n                            [navigateButtonTitle]=\"navigateButtonTitle()\"\n                            [navigateLink]=\"navigateLink()\"\n                            [entitiesToSelect]=\"entitiesToSelect()\"\n                            [appearance]=\"appearance()\"\n                            [keyExp]=\"keyExp()\"\n                            [displayExp]=\"displayExp()\"\n                            [isMobile]=\"isMobile()\"\n                            [isSingleSelection]=\"isSingleSelection()\"\n                            [isSelectAllButtonShown]=\"isSelectAllButtonShown()\"\n                            [loading]=\"loading()\"\n                            [fetching]=\"fetching()\"\n                            [useNameBreaking]=\"useNameBreaking()\"\n                            [searchTerm]=\"searchTerm()\"\n                            [isLazyLoad]=\"isLazyLoad()\"\n                            [isLocalSearch]=\"isLocalSearch()\"\n                            [isMultiToggleShown]=\"isMultiToggleShown()\"\n                            (searchAction)=\"search($event)\"\n                            (scrollAction)=\"scroll()\"\n                            (temporarySelectAction)=\"setTemporarySelection($event)\"\n                            (closeAction)=\"hideSelectionControl()\"\n                            (submitAction)=\"select($event)\" />\n                    </ng-template>\n                }\n            } @else if (isSelectionAvailable()) {\n                <div rtElem=\"actions\">\n                    <ng-template [ngTemplateOutlet]=\"listActionsTpl\" />\n                </div>\n            }\n        }\n    </ng-container>\n</form>\n\n<ng-template #listActionsTpl>\n    <rtui-dynamic-selector-list-actions\n        [isMobile]=\"isMobile()\"\n        [disabled]=\"disabled()\"\n        [isResetButtonDisabled]=\"isResetButtonDisabled()\"\n        [isClearButtonDisabled]=\"isClearButtonDisabled()\"\n        (resetAction)=\"resetList()\"\n        (clearAction)=\"clearList()\" />\n</ng-template>\n", styles: [":host{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
@@ -3147,7 +3158,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
                             useExisting: RtuiDynamicSelectorComponent,
                             multi: true,
                         },
-                    ], template: "<form [formGroup]=\"form\">\n    <ng-container rtBlock=\"rtui-dynamic-selector\">\n        @if (isNoDataPlaceholderShown()) {\n            <rtui-dynamic-selector-placeholder\n                description=\"There are no available items to choose\"\n                icon=\"warning\"\n                [isButtonShow]=\"false\"\n                [isIconOutlined]=\"true\" />\n        } @else {\n            <rtui-dynamic-selector-selected-list\n                [isMobile]=\"isMobile()\"\n                [keyExp]=\"keyExp()\"\n                [displayExp]=\"displayExp()\"\n                [selectedEntities]=\"selectedEntities()\"\n                [readonlyEntitiesKeys]=\"readonlyEntitiesKeys()\"\n                [isListDraggable]=\"isListDraggable()\"\n                [useNameBreaking]=\"useNameBreaking()\"\n                [useTitleCase]=\"useTitleCase()\"\n                [isDeleteButtonShown]=\"isDeleteButtonShown()\"\n                (dropAction)=\"onDrop($event)\"\n                (deleteFromSelectedAction)=\"toggleEntity($event)\">\n                @if (additionalControlTpl()) {\n                    <ng-container *rtuiDynamicSelectorItemAdditionalControlDirective=\"let entity\">\n                        <ng-template *ngTemplateOutlet=\"additionalControlTpl() || null; context: { $implicit: entity }\" />\n                    </ng-container>\n                }\n\n                @if (itemTitleTpl()) {\n                    <ng-container *rtuiDynamicSelectorItemTitleDirective=\"let entity\">\n                        <ng-template *ngTemplateOutlet=\"itemTitleTpl() || null; context: { $implicit: entity }\" />\n                    </ng-container>\n                }\n            </rtui-dynamic-selector-selected-list>\n\n            @if ((entitiesToSelect()?.length || !isLocalSearch()) && isSelectionAvailable()) {\n                @if (isPlaceholderShown()) {\n                    <rtui-dynamic-selector-placeholder\n                        [icon]=\"placeholderIcon()\"\n                        [description]=\"placeholderDescription()\"\n                        [buttonTitle]=\"buttonTitle()\"\n                        [disabled]=\"disabled()\"\n                        [isIconOutlined]=\"isPlaceholderIconOutlined()\"\n                        (submitAction)=\"showSelectionControl($event)\" />\n                } @else {\n                    <div rtElem=\"actions\">\n                        @if (isOpenPopupButtonShown() && this.entitiesToSelect()?.length) {\n                            <button\n                                #trigger=\"cdkOverlayOrigin\"\n                                cdkOverlayOrigin\n                                type=\"button\"\n                                class=\"c-button c-button--txt-base--size-sm\"\n                                [class.--disabled]=\"disabled()\"\n                                [disabled]=\"disabled()\"\n                                (click)=\"showSelectionControl(trigger)\">\n                                {{ buttonTitle() }}\n                            </button>\n                        }\n\n                        <ng-template [ngTemplateOutlet]=\"listActionsTpl\" />\n                    </div>\n                }\n\n                @if (selectedOverlayTrigger) {\n                    <ng-template\n                        rtEscapeKey\n                        cdkConnectedOverlay\n                        cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n                        [cdkConnectedOverlayHasBackdrop]=\"true\"\n                        [cdkConnectedOverlayOpen]=\"isSelectionControlShown()\"\n                        [cdkConnectedOverlayDisableClose]=\"true\"\n                        [cdkConnectedOverlayOrigin]=\"selectedOverlayTrigger\"\n                        [cdkConnectedOverlayPositions]=\"connectedOverlayPositions\"\n                        (backdropClick)=\"hideSelectionControl()\"\n                        (escapeKeyAction)=\"hideSelectionControl()\">\n                        <rtui-multi-selector-popup\n                            [navigateButtonTitle]=\"navigateButtonTitle()\"\n                            [navigateLink]=\"navigateLink()\"\n                            [entitiesToSelect]=\"entitiesToSelect()\"\n                            [appearance]=\"appearance()\"\n                            [keyExp]=\"keyExp()\"\n                            [displayExp]=\"displayExp()\"\n                            [isMobile]=\"isMobile()\"\n                            [isSingleSelection]=\"isSingleSelection()\"\n                            [isSelectAllButtonShown]=\"isSelectAllButtonShown()\"\n                            [loading]=\"loading()\"\n                            [fetching]=\"fetching()\"\n                            [useNameBreaking]=\"useNameBreaking()\"\n                            [searchTerm]=\"searchTerm()\"\n                            [isLazyLoad]=\"isLazyLoad()\"\n                            [isLocalSearch]=\"isLocalSearch()\"\n                            [isMultiToggleShown]=\"isMultiToggleShown()\"\n                            (searchAction)=\"search($event)\"\n                            (scrollAction)=\"scroll()\"\n                            (temporarySelectAction)=\"setTemporarySelection($event)\"\n                            (closeAction)=\"hideSelectionControl()\"\n                            (submitAction)=\"select($event)\" />\n                    </ng-template>\n                }\n            } @else if (isSelectionAvailable()) {\n                <div rtElem=\"actions\">\n                    <ng-template [ngTemplateOutlet]=\"listActionsTpl\" />\n                </div>\n            }\n        }\n    </ng-container>\n</form>\n\n<ng-template #listActionsTpl>\n    <rtui-dynamic-selector-list-actions\n        [isMobile]=\"isMobile()\"\n        [disabled]=\"disabled()\"\n        [isResetButtonDisabled]=\"isResetButtonDisabled()\"\n        [isClearButtonDisabled]=\"isClearButtonDisabled()\"\n        (resetAction)=\"resetList()\"\n        (clearAction)=\"clearList()\" />\n</ng-template>\n", styles: [":host{height:100%;width:100%;display:flex;flex-direction:column;overflow:hidden}\n"] }]
+                    ], 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"] }]
         }], 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), { ...{
@@ -3426,7 +3437,7 @@ class RtTableConfigAsideComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtTableConfigAsideComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.1", 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{height:100%;width: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: "21.0.1", 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: 
                 // 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
@@ -3449,7 +3460,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", 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{height:100%;width:100%}\n"] }]
+                    ], 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"] }]
         }] });
 
 class RtuiTableToolbarSelectorsDirective {
@@ -3620,7 +3631,7 @@ class RtuiTableContainerComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtuiTableContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", 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: [":host{width:100%;position:relative;display:flex;overflow:hidden}:host ::-webkit-scrollbar-track:hover{border:1px solid var(--clr-gray-10)}:host ::-webkit-scrollbar-thumb{background:var(--clr-gray-20);border:3px solid transparent;border-radius:6px;background-clip:content-box}:host ::-webkit-scrollbar-thumb:hover{background:var(--clr-black-40);border:2px solid transparent;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(--clr-black-60);--rt-table-container-selector-label-hover-color: var(--clr-black-100);--rt-table-container-selector-counter-color: var(--clr-black-60);--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(--clr-gray-20);--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;justify-content:flex-start;align-items:center;flex-grow:1;width:100%;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{font-size:var(--rt-table-container-selector-counter-font-size);color:var(--rt-table-container-selector-counter-color)}:host .table-container__toolbar{width:100%;display:flex;justify-content:flex-end;align-items:center}: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{width:100%;flex-grow:1;overflow:auto;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{width:var(--rt-table-container-placeholder-width);height:var(--rt-table-container-placeholder-height);display:flex;flex-direction:column;justify-content:center;align-items: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%;grid-row:1;justify-content:center}}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[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: "21.0.1", 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])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[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
@@ -3661,7 +3672,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", 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: [":host{width:100%;position:relative;display:flex;overflow:hidden}:host ::-webkit-scrollbar-track:hover{border:1px solid var(--clr-gray-10)}:host ::-webkit-scrollbar-thumb{background:var(--clr-gray-20);border:3px solid transparent;border-radius:6px;background-clip:content-box}:host ::-webkit-scrollbar-thumb:hover{background:var(--clr-black-40);border:2px solid transparent;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(--clr-black-60);--rt-table-container-selector-label-hover-color: var(--clr-black-100);--rt-table-container-selector-counter-color: var(--clr-black-60);--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(--clr-gray-20);--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;justify-content:flex-start;align-items:center;flex-grow:1;width:100%;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{font-size:var(--rt-table-container-selector-counter-font-size);color:var(--rt-table-container-selector-counter-color)}:host .table-container__toolbar{width:100%;display:flex;justify-content:flex-end;align-items:center}: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{width:100%;flex-grow:1;overflow:auto;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{width:var(--rt-table-container-placeholder-width);height:var(--rt-table-container-placeholder-height);display:flex;flex-direction:column;justify-content:center;align-items: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%;grid-row:1;justify-content:center}}\n"] }]
+                    ], 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), { ...{
                             read: TemplateRef,
                         }, isSignal: true }] }], toolbarActionsTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => RtuiTableToolbarActionsDirective), { ...{
@@ -3828,7 +3839,7 @@ class RtuiDynamicListComponent {
         this.rowDoubleClick.emit(row);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtuiDynamicListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", 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{width:100%;height:100%;display:flex;overflow:hidden}\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: "21.0.1", 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: 
                 // 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
@@ -3847,7 +3858,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", 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{width:100%;height:100%;display:flex;overflow:hidden}\n"] }]
+                    ], 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"] }]
         }], 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), { ...{
@@ -3869,11 +3880,11 @@ class RtuiPopoverContainerComponent {
         return this.#sanitizer.sanitize(1, this.popoverClass());
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtuiPopoverContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.1", 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;width:fit-content;display:block;padding-top:20px;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: "21.0.1", 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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", 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;width:fit-content;display:block;padding-top:20px;text-align:left;transition:transform .1s,opacity .5s}\n"] }]
+            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"] }]
         }], 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']
@@ -4037,7 +4048,7 @@ class RtuiActionBarComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtuiActionBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", 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: [".rtui-action-bar{width:var(--rt-action-bar-bar-width);display:flex;align-items:center;gap:var(--rt-action-bar-bar-gap);padding:var(--rt-action-bar-bar-padding);border-radius:var(--rt-action-bar-bar-border-radius);color:var(--rt-action-bar-bar-color);background-color:var(--rt-action-bar-bar-background-color);box-shadow:var(--rt-action-bar-bar-box-shadow)}.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;justify-content:center;align-items:center;gap:var(--rt-action-bar-action-gap);font-size:var(--rt-action-bar-action-font-size);font-weight:var(--rt-action-bar-action-font-weight);padding:var(--rt-action-bar-action-padding);border-radius:var(--rt-action-bar-action-border-radius);cursor:pointer}.rtui-action-bar__action:hover{background-color:var(--rt-action-bar-action-hover-background-color)}.rtui-action-bar__close-button{cursor:pointer;margin-left:auto}.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{gap:var(--rt-action-bar-bar-mobile-gap);padding:var(--rt-action-bar-bar-mobile-padding)}.rtui-action-bar__actions{gap:var(--rt-action-bar-actions-mobile-gap)}.rtui-action-bar__action{gap:var(--rt-action-bar-action-mobile-gap);padding:var(--rt-action-bar-action-mobile-padding)}}.rtui-action-bar-action-menu{display:flex;flex-direction:column;gap:var(--rt-action-bar-action-menu-gap);padding:var(--rt-action-bar-action-menu-padding);border-radius:var(--rt-action-bar-action-border-radius);color:var(--rt-action-bar-action-menu-color);background-color:var(--rt-action-bar-action-menu-background-color);box-shadow:var(--rt-action-bar-action-menu-box-shadow)}.rtui-action-bar-action-menu__action{display:flex;justify-content:center;align-items:center;gap:var(--rt-action-bar-action-menu-action-gap);padding:var(--rt-action-bar-action-menu-action-padding);font-size:var(--rt-action-bar-action-menu-action-font-size);font-weight:var(--rt-action-bar-action-menu-action-font-weight);border-radius:var(--rt-action-bar-action-menu-action-border-radius);cursor:pointer}.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{gap:var(--rt-action-bar-action-menu-action-mobile-gap);padding:var(--rt-action-bar-action-menu-action-mobile-padding)}}\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: "21.0.1", 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: 
                 // material
                 MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: 
                 // rt-tools
@@ -4056,7 +4067,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", 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: [".rtui-action-bar{width:var(--rt-action-bar-bar-width);display:flex;align-items:center;gap:var(--rt-action-bar-bar-gap);padding:var(--rt-action-bar-bar-padding);border-radius:var(--rt-action-bar-bar-border-radius);color:var(--rt-action-bar-bar-color);background-color:var(--rt-action-bar-bar-background-color);box-shadow:var(--rt-action-bar-bar-box-shadow)}.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;justify-content:center;align-items:center;gap:var(--rt-action-bar-action-gap);font-size:var(--rt-action-bar-action-font-size);font-weight:var(--rt-action-bar-action-font-weight);padding:var(--rt-action-bar-action-padding);border-radius:var(--rt-action-bar-action-border-radius);cursor:pointer}.rtui-action-bar__action:hover{background-color:var(--rt-action-bar-action-hover-background-color)}.rtui-action-bar__close-button{cursor:pointer;margin-left:auto}.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{gap:var(--rt-action-bar-bar-mobile-gap);padding:var(--rt-action-bar-bar-mobile-padding)}.rtui-action-bar__actions{gap:var(--rt-action-bar-actions-mobile-gap)}.rtui-action-bar__action{gap:var(--rt-action-bar-action-mobile-gap);padding:var(--rt-action-bar-action-mobile-padding)}}.rtui-action-bar-action-menu{display:flex;flex-direction:column;gap:var(--rt-action-bar-action-menu-gap);padding:var(--rt-action-bar-action-menu-padding);border-radius:var(--rt-action-bar-action-border-radius);color:var(--rt-action-bar-action-menu-color);background-color:var(--rt-action-bar-action-menu-background-color);box-shadow:var(--rt-action-bar-action-menu-box-shadow)}.rtui-action-bar-action-menu__action{display:flex;justify-content:center;align-items:center;gap:var(--rt-action-bar-action-menu-action-gap);padding:var(--rt-action-bar-action-menu-action-padding);font-size:var(--rt-action-bar-action-menu-action-font-size);font-weight:var(--rt-action-bar-action-menu-action-font-weight);border-radius:var(--rt-action-bar-action-menu-action-border-radius);cursor:pointer}.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{gap:var(--rt-action-bar-action-menu-action-mobile-gap);padding:var(--rt-action-bar-action-menu-action-mobile-padding)}}\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                    <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"] }]
         }], propDecorators: { config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: true }] }], closeAction: [{ type: i0.Output, args: ["closeAction"] }] } });
 
 class RtActionBarService {
@@ -4089,7 +4100,7 @@ class RtuiActionBarContainerComponent {
         this.#actionBarService.closeActionBar();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtuiActionBarContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", 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{width:var(--rt-action-bar-container-width);position:fixed;top:var(--rt-action-bar-container-top);bottom:var(--rt-action-bar-container-bottom);left:var(--rt-action-bar-container-left);right:var(--rt-action-bar-container-right);display:flex;justify-content:center;align-items:center;z-index:var(--rt-action-bar-container-z-index)}\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: "21.0.1", 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: [
             trigger('barState', [
                 state('opened', style({ transform: 'translateY(0)' })),
                 transition('void => *', [
@@ -4129,7 +4140,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
                                 ])),
                             ]),
                         ]),
-                    ], template: "@if (config()?.selected) {\n    <rtui-action-bar [@barState]=\"'opened'\" [config]=\"config()\" (closeAction)=\"closeBar()\" />\n}\n", styles: [":host{width:var(--rt-action-bar-container-width);position:fixed;top:var(--rt-action-bar-container-top);bottom:var(--rt-action-bar-container-bottom);left:var(--rt-action-bar-container-left);right:var(--rt-action-bar-container-right);display:flex;justify-content:center;align-items:center;z-index:var(--rt-action-bar-container-z-index)}\n"] }]
+                    ], 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"] }]
         }] });
 
 /**
@@ -4194,11 +4205,11 @@ class RtuiSnackBarComponent {
         this.player?.play();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtuiSnackBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", 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: [":host{height:100%;width:100%;display:flex;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(--clr-white-100);--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(--clr-blue-80);--rt-snack-bar-action-background-color: var(--clr-blue-100);--rt-snack-bar-progress-height: .5rem;--rt-snack-bar-close-button-color: var(--clr-white-100)}:host .rt-snack-bar__content{height:100%;width:100%;position:relative;display:flex;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);font-size:var(--rt-snack-bar-icon-size);color:var(--rt-snack-bar-icon-color)}:host .rt-snack-bar__content-message{display:-webkit-box;overflow:hidden;text-overflow:ellipsis;-webkit-line-clamp:var(--rt-snack-bar-message-line-clamp);-webkit-box-orient:vertical}: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;bottom:0;left:0;right:0;height:var(--rt-snack-bar-progress-height);width:100%;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: "21.0.1", 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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", 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: [":host{height:100%;width:100%;display:flex;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(--clr-white-100);--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(--clr-blue-80);--rt-snack-bar-action-background-color: var(--clr-blue-100);--rt-snack-bar-progress-height: .5rem;--rt-snack-bar-close-button-color: var(--clr-white-100)}:host .rt-snack-bar__content{height:100%;width:100%;position:relative;display:flex;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);font-size:var(--rt-snack-bar-icon-size);color:var(--rt-snack-bar-icon-color)}:host .rt-snack-bar__content-message{display:-webkit-box;overflow:hidden;text-overflow:ellipsis;-webkit-line-clamp:var(--rt-snack-bar-message-line-clamp);-webkit-box-orient:vertical}: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;bottom:0;left:0;right:0;height:var(--rt-snack-bar-progress-height);width:100%;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', 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']
@@ -4377,11 +4388,11 @@ class RtuiInfoBadgeComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtuiInfoBadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", 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{border-radius:9999px;display:block;line-height:normal;max-width:fit-content;background-color:#005cbb;color:#fff}:host .c-info-badge{display:flex;gap:.15rem;align-items:center;justify-content:center;box-sizing:border-box;line-height:normal}:host .c-info-badge__content{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host .size-l{font-size:1.125rem;padding:.3rem .65rem}:host .size-l .mat-icon{font-size:1.5rem}:host .size-m{font-size:.875rem;padding:.22rem .65rem}:host .size-m .mat-icon{font-size:1.05rem}:host .size-s{font-size:.75rem;padding:.2rem .65rem;letter-spacing:.025rem}:host .size-s .mat-icon{font-size:.75rem}:host .mat-icon{height:unset;width:unset}:host .bold{font-weight:700}\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: "21.0.1", 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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", 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{border-radius:9999px;display:block;line-height:normal;max-width:fit-content;background-color:#005cbb;color:#fff}:host .c-info-badge{display:flex;gap:.15rem;align-items:center;justify-content:center;box-sizing:border-box;line-height:normal}:host .c-info-badge__content{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host .size-l{font-size:1.125rem;padding:.3rem .65rem}:host .size-l .mat-icon{font-size:1.5rem}:host .size-m{font-size:.875rem;padding:.22rem .65rem}:host .size-m .mat-icon{font-size:1.05rem}:host .size-s{font-size:.75rem;padding:.2rem .65rem;letter-spacing:.025rem}:host .size-s .mat-icon{font-size:.75rem}:host .mat-icon{height:unset;width:unset}:host .bold{font-weight:700}\n"] }]
+            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 }] }] } });
 
 var INFO_BADGE_TYPE_ENUM;
@@ -4421,7 +4432,7 @@ class RtuiFileUploadComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtuiFileUploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.1", 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: [":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(--clr-black-20);--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(--clr-black-100);--rt-file-upload-title-font-size: 1rem;--rt-file-upload-title-color: var(--clr-text);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);display:var(--rt-file-upload-host-display);flex-direction:var(--rt-file-upload-host-flex-direction);justify-content:var(--rt-file-upload-host-justify-content);align-items:var(--rt-file-upload-host-align-items);gap:var(--rt-file-upload-host-gap);padding:var(--rt-file-upload-host-padding);border:var(--rt-file-upload-host-border);border-radius:var(--rt-file-upload-host-border-radius);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);font-size:var(--rt-file-upload-icon-size);color:var(--rt-file-upload-icon-color)}:host .file-upload__title{font-size:var(--rt-file-upload-title-font-size);color:var(--rt-file-upload-title-color)}\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: "21.0.1", 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: 
                 // 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 }); }
 }
@@ -4439,7 +4450,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
                         '(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: [":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(--clr-black-20);--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(--clr-black-100);--rt-file-upload-title-font-size: 1rem;--rt-file-upload-title-color: var(--clr-text);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);display:var(--rt-file-upload-host-display);flex-direction:var(--rt-file-upload-host-flex-direction);justify-content:var(--rt-file-upload-host-justify-content);align-items:var(--rt-file-upload-host-align-items);gap:var(--rt-file-upload-host-gap);padding:var(--rt-file-upload-host-padding);border:var(--rt-file-upload-host-border);border-radius:var(--rt-file-upload-host-border-radius);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);font-size:var(--rt-file-upload-icon-size);color:var(--rt-file-upload-icon-color)}:host .file-upload__title{font-size:var(--rt-file-upload-title-font-size);color:var(--rt-file-upload-title-color)}\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 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"] }]
         }], propDecorators: { isIconOutlined: [{ type: i0.Input, args: [{ isSignal: true, alias: "isIconOutlined", required: false }] }], uploadFile: [{ type: i0.Output, args: ["uploadFile"] }] } });
 
 class RtuiImageUploadComponent {
@@ -4526,13 +4537,13 @@ class RtuiImageUploadComponent {
         this.save.emit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtuiImageUploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", 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: [":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;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);display:var(--rt-image-upload-host-display);justify-content:var(--rt-image-upload-host-justify-content);align-items:var(--rt-image-upload-host-align-items)}: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);gap:var(--rt-image-upload-image-cropper-actions-gap);margin-top:var(--rt-image-upload-image-cropper-actions-justify-margin-top)}: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{pointer-events:initial;cursor:pointer}:host .rtui-image-container__image--active:hover{opacity:.6}:host .rtui-image-container__action{position:absolute;top:0;right:0;z-index:999;backdrop-filter:blur(1.25rem)}\n"], dependencies: [{ kind: "component", type: 
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", 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: 
                 // 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
                 ImageCropperComponent, selector: "image-cropper", inputs: ["imageChangedEvent", "imageURL", "imageBase64", "imageFile", "imageAltText", "options", "cropperFrameAriaLabel", "output", "format", "autoCrop", "cropper", "transform", "maintainAspectRatio", "aspectRatio", "resetCropOnAspectRatioChange", "resizeToWidth", "resizeToHeight", "cropperMinWidth", "cropperMinHeight", "cropperMaxHeight", "cropperMaxWidth", "cropperStaticWidth", "cropperStaticHeight", "canvasRotation", "initialStepSize", "roundCropper", "onlyScaleDown", "imageQuality", "backgroundColor", "containWithinAspectRatio", "hideResizeSquares", "allowMoveImage", "checkImageType", "alignImage", "disabled", "hidden"], outputs: ["imageCropped", "startCropImage", "imageLoaded", "cropperReady", "loadImageFailed", "transformChange", "cropperChange"] }, { kind: "directive", type: 
                 // rt-tools
-                ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }, { kind: "directive", type: BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "component", type: RtuiSpinnerComponent, selector: "rtui-spinner", inputs: ["diameter", "showBox", "showBackground"] }, { kind: "component", type: RtuiFileUploadComponent, selector: "rtui-file-upload", inputs: ["isIconOutlined"], outputs: ["uploadFile"] }, { kind: "directive", type: RtIconOutlinedDirective, selector: "mat-icon[rtIconOutlined]", inputs: ["rtIconOutlined"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+                ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }, { kind: "directive", type: ModDirective, selector: "[rtMod]" }, { kind: "directive", type: BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "component", type: RtuiSpinnerComponent, selector: "rtui-spinner", inputs: ["diameter", "showBox", "showBackground"] }, { kind: "component", type: RtuiFileUploadComponent, selector: "rtui-file-upload", inputs: ["isIconOutlined"], outputs: ["uploadFile"] }, { kind: "directive", type: RtIconOutlinedDirective, selector: "mat-icon[rtIconOutlined]", inputs: ["rtIconOutlined"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtuiImageUploadComponent, decorators: [{
             type: Component,
@@ -4546,13 +4557,237 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
                         ImageCropperComponent,
                         // rt-tools
                         ElemDirective,
+                        ModDirective,
                         BlockDirective,
                         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: [":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;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);display:var(--rt-image-upload-host-display);justify-content:var(--rt-image-upload-host-justify-content);align-items:var(--rt-image-upload-host-align-items)}: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);gap:var(--rt-image-upload-image-cropper-actions-gap);margin-top:var(--rt-image-upload-image-cropper-actions-justify-margin-top)}: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{pointer-events:initial;cursor:pointer}:host .rtui-image-container__image--active:hover{opacity:.6}:host .rtui-image-container__action{position:absolute;top:0;right:0;z-index:999;backdrop-filter:blur(1.25rem)}\n"] }]
+                    ], 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"] }] } });
 
+var RT_THEME_ENUM;
+(function (RT_THEME_ENUM) {
+    RT_THEME_ENUM["LIGHT"] = "light";
+    RT_THEME_ENUM["DARK"] = "dark";
+    RT_THEME_ENUM["AUTO"] = "auto";
+})(RT_THEME_ENUM || (RT_THEME_ENUM = {}));
+const RT_THEME_STORAGE_KEY = 'rt-theme';
+const RT_DARK_CLASS = 'rt-dark';
+const RT_THEME_AUTO_CLASS = 'rt-theme-auto';
+const RT_THEME_ATTRIBUTE = 'data-rt-theme';
+/**
+ * Accent roles whose `--rt-color-{role}-{0..100}` indirection rows a custom
+ * color scheme may override. The semantic accent tier
+ * (`--rt-bg/text/icon/border-accent-*`) derives entirely from these rows.
+ */
+var RT_ACCENT_ROLE_ENUM;
+(function (RT_ACCENT_ROLE_ENUM) {
+    RT_ACCENT_ROLE_ENUM["PRIMARY"] = "primary";
+    RT_ACCENT_ROLE_ENUM["INFO"] = "info";
+    RT_ACCENT_ROLE_ENUM["SUCCESS"] = "success";
+    RT_ACCENT_ROLE_ENUM["WARNING"] = "warning";
+    RT_ACCENT_ROLE_ENUM["DANGER"] = "danger";
+    RT_ACCENT_ROLE_ENUM["BRAND"] = "brand";
+})(RT_ACCENT_ROLE_ENUM || (RT_ACCENT_ROLE_ENUM = {}));
+/** `'default'`/`null` clears the active scheme (back to the rt-tools palette). */
+const RT_DEFAULT_SCHEME = 'default';
+const RT_COLOR_SCHEME_STORAGE_KEY = 'rt-color-scheme';
+const RT_SCHEME_ATTRIBUTE = 'data-rt-scheme';
+
+/**
+ * Global theme + color-scheme switcher for the rt-tools design tokens.
+ *
+ * **Theme** (`light`/`dark`/`auto`): applies `.rt-dark` / `.rt-theme-auto` to
+ * `<html>`; semantic tokens (`--rt-*`) adapt through `color-scheme` + `light-dark()`.
+ * Persisted to localStorage (`rt-theme`). `auto` follows the OS preference.
+ *
+ * **Color scheme** (brand palette): toggles `data-rt-scheme="<name>"` on `<html>`,
+ * which activates a `[data-rt-scheme]` block (emitted by the `rt.color-scheme` Sass
+ * mixin or injected at runtime via {@link registerColorScheme}). It overrides only
+ * the accent-role rows `--rt-color-{role}-{N}`, so the whole accent layer recolors
+ * while semantic token names stay stable. Orthogonal to light/dark; persisted to
+ * localStorage (`rt-color-scheme`).
+ */
+class RtThemeService {
+    #document;
+    #platformService;
+    // falls back to the native localStorage when the app does not call provideRtStorage()
+    #storage;
+    #theme;
+    #colorScheme;
+    constructor() {
+        this.#document = inject(DOCUMENT);
+        this.#platformService = inject(PlatformService);
+        // falls back to the native localStorage when the app does not call provideRtStorage()
+        this.#storage = inject(LOCAL_STORAGE, { optional: true }) ?? this.#document.defaultView?.localStorage ?? null;
+        this.#theme = signal(this.#restore(), { ...(ngDevMode ? { debugName: "#theme" } : {}) });
+        this.#colorScheme = signal(this.#restoreScheme(), { ...(ngDevMode ? { debugName: "#colorScheme" } : {}) });
+        this.theme = this.#theme.asReadonly();
+        this.colorScheme = this.#colorScheme.asReadonly();
+        effect(() => {
+            this.#apply(this.#theme());
+        });
+        effect(() => {
+            this.#applyScheme(this.#colorScheme());
+        });
+    }
+    setTheme(theme) {
+        this.#theme.set(theme);
+        if (this.#platformService.isPlatformBrowser && this.#storage) {
+            this.#storage.setItem(RT_THEME_STORAGE_KEY, theme);
+        }
+    }
+    /** Toggles between light and dark (auto resolves to its opposite visual state). */
+    toggle() {
+        this.setTheme(this.#isDarkApplied() ? RT_THEME_ENUM.LIGHT : RT_THEME_ENUM.DARK);
+    }
+    /**
+     * Activates a registered color scheme by name, or clears it with `null`/`'default'`.
+     * Orthogonal to the light/dark theme; persisted to localStorage.
+     */
+    setColorScheme(name) {
+        const normalized = !name || name === RT_DEFAULT_SCHEME ? null : name;
+        this.#colorScheme.set(normalized);
+        if (this.#platformService.isPlatformBrowser && this.#storage) {
+            if (normalized) {
+                this.#storage.setItem(RT_COLOR_SCHEME_STORAGE_KEY, normalized);
+            }
+            else {
+                this.#storage.removeItem(RT_COLOR_SCHEME_STORAGE_KEY);
+            }
+        }
+    }
+    /**
+     * Injects (or replaces) a color scheme's `[data-rt-scheme]` block at runtime —
+     * the JS twin of the `rt.color-scheme` Sass mixin. Browser-only (no-op on server;
+     * for SSR/brand-critical schemes prefer the Sass path). Does not activate the
+     * scheme — call {@link setColorScheme} afterwards.
+     */
+    registerColorScheme(name, ramp) {
+        this.#validateRamp(name, ramp);
+        if (!this.#platformService.isPlatformBrowser) {
+            return;
+        }
+        const id = `rt-color-scheme-${name}`;
+        const existing = this.#document.getElementById(id);
+        const style = existing ?? this.#document.createElement('style');
+        style.id = id;
+        style.textContent = this.#buildSchemeCss(name, ramp);
+        if (!existing) {
+            this.#document.head.appendChild(style);
+        }
+    }
+    #restore() {
+        if (!this.#platformService.isPlatformBrowser || !this.#storage) {
+            return RT_THEME_ENUM.LIGHT;
+        }
+        const stored = this.#storage.getItem(RT_THEME_STORAGE_KEY);
+        return Object.values(RT_THEME_ENUM).includes(stored) ? stored : RT_THEME_ENUM.LIGHT;
+    }
+    #restoreScheme() {
+        if (!this.#platformService.isPlatformBrowser || !this.#storage) {
+            return null;
+        }
+        const stored = this.#storage.getItem(RT_COLOR_SCHEME_STORAGE_KEY);
+        return stored && stored !== RT_DEFAULT_SCHEME ? stored : null;
+    }
+    #apply(theme) {
+        if (!this.#platformService.isPlatformBrowser) {
+            return;
+        }
+        const classList = this.#document.documentElement.classList;
+        classList.toggle(RT_DARK_CLASS, theme === RT_THEME_ENUM.DARK);
+        classList.toggle(RT_THEME_AUTO_CLASS, theme === RT_THEME_ENUM.AUTO);
+    }
+    #applyScheme(name) {
+        if (!this.#platformService.isPlatformBrowser) {
+            return;
+        }
+        const root = this.#document.documentElement;
+        if (name) {
+            root.setAttribute(RT_SCHEME_ATTRIBUTE, name);
+        }
+        else {
+            root.removeAttribute(RT_SCHEME_ATTRIBUTE);
+        }
+    }
+    /**
+     * Validates a ramp the same way the `rt.color-scheme` Sass mixin does — unknown
+     * role or out-of-range tone (must be an integer 0–100) throws. Keeps the JS twin
+     * at parity with the build-time generator instead of silently emitting bad rows.
+     */
+    #validateRamp(name, ramp) {
+        if (!name || name === RT_DEFAULT_SCHEME) {
+            throw new Error(`registerColorScheme: name must be a non-empty string other than '${RT_DEFAULT_SCHEME}'.`);
+        }
+        const roles = Object.values(RT_ACCENT_ROLE_ENUM);
+        for (const role of Object.keys(ramp)) {
+            if (!roles.includes(role)) {
+                throw new Error(`registerColorScheme("${name}"): unknown role "${role}". Allowed roles: ${roles.join(', ')}.`);
+            }
+            for (const tone of Object.keys(ramp[role] ?? {})) {
+                const step = Number(tone);
+                if (!Number.isInteger(step) || step < 0 || step > 100) {
+                    throw new Error(`registerColorScheme("${name}"): role "${role}" tone "${tone}" must be an integer 0–100.`);
+                }
+            }
+        }
+    }
+    /** Builds the `:root[data-rt-scheme="<name>"] { --rt-color-{role}-{N}: … }` block (mirrors the Sass mixin). */
+    #buildSchemeCss(name, ramp) {
+        const declarations = Object.entries(ramp)
+            .flatMap(([role, tones]) => Object.entries(tones ?? {}).map(([tone, value]) => `--rt-color-${role}-${tone}:${value};`))
+            .join('');
+        return `:root[${RT_SCHEME_ATTRIBUTE}="${name}"]{${declarations}}`;
+    }
+    #isDarkApplied() {
+        if (this.#theme() === RT_THEME_ENUM.AUTO) {
+            return this.#platformService.isPlatformBrowser && this.#document.defaultView
+                ? this.#document.defaultView.matchMedia('(prefers-color-scheme: dark)').matches
+                : false;
+        }
+        return this.#theme() === RT_THEME_ENUM.DARK;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtThemeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtThemeService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtThemeService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [] });
+
+/**
+ * Local theme context (GMT `data-theme` analogue).
+ *
+ * Sets `data-rt-theme` on the host, re-scoping all adaptive `--rt-*` tokens
+ * inside the subtree through `color-scheme` + `light-dark()`:
+ *
+ * ```html
+ * <!-- dark promo card inside a light page -->
+ * <section [rtTheme]="'dark'">…</section>
+ * ```
+ *
+ * Note: `color` is inherited as a resolved value — re-apply text tokens
+ * on elements inside the context (e.g. `color: var(--rt-text-base-primary)`).
+ */
+class RtThemeDirective {
+    constructor() {
+        this.rtTheme = input('', { ...(ngDevMode ? { debugName: "rtTheme" } : {}) });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtThemeDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.1", type: RtThemeDirective, isStandalone: true, selector: "[rtTheme]", inputs: { rtTheme: { classPropertyName: "rtTheme", publicName: "rtTheme", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-rt-theme": "rtTheme() || null" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtThemeDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    standalone: true,
+                    selector: '[rtTheme]',
+                    host: {
+                        '[attr.data-rt-theme]': 'rtTheme() || null',
+                    },
+                }]
+        }], propDecorators: { rtTheme: [{ type: i0.Input, args: [{ isSignal: true, alias: "rtTheme", required: false }] }] } });
+
 /**
  * Public API Surface of rt-tools
  */
@@ -4562,5 +4797,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ASIDE_BUTTONS_ENUM, ASIDE_REF, AsideRef, BUTTON_APPEARANCE, BUTTON_COLOR, BUTTON_SIZE, DEFAULT_PAGE_MODEL, DEFAULT_PAGE_SIZE, INFO_BADGE_SIZE_ENUM, INFO_BADGE_TYPE_ENUM, MODAL_WINDOW_SIZE_ENUM, RTUI_TABLE_COMPONENT_TOKEN, RTUI_TABLE_STOP_ROW_CLICK_ATTRIBUTE, RtActionBarService, RtAsideService, RtDynamicListSelectorsDirective, RtModalService, RtPopoverDirective, RtSnackBarService, RtTableConfigService, RtTableSelectorsDirective, RtuiActionBarComponent, RtuiActionBarContainerComponent, RtuiAsideContainerComponent, RtuiAsideContainerHeaderDirective, RtuiButtonComponent, RtuiClearButtonComponent, RtuiCustomTableCellsDirective, RtuiDynamicInputAdditionalControlDirective, RtuiDynamicInputComponent, RtuiDynamicListComponent, RtuiDynamicListCustomTableCellsDirective, RtuiDynamicListRowActionsDirective, RtuiDynamicListRowAdditionalActionsDirective, RtuiDynamicListToolbarActionsDirective, RtuiDynamicListToolbarSelectorsDirective, RtuiDynamicSelectorAdditionalControlDirective, RtuiDynamicSelectorComponent, RtuiDynamicSelectorItemAdditionalControlDirective, RtuiDynamicSelectorItemTitleDirective, RtuiDynamicSelectorItemTitleProjectionDirective, RtuiDynamicSelectorListActionsComponent, RtuiDynamicSelectorPlaceholderComponent, RtuiDynamicSelectorSelectedListComponent, RtuiFileUploadComponent, RtuiHeaderCenterDirective, RtuiHeaderComponent, RtuiHeaderLeftDirective, RtuiHeaderRightDirective, RtuiImageUploadComponent, RtuiInfoBadgeComponent, RtuiModalComponent, RtuiMultiButtonComponent, RtuiMultiSelectorPopupComponent, RtuiPaginationComponent, RtuiRoundIconButtonComponent, RtuiScrollableContainerComponent, RtuiScrollableContainerContentDirective, RtuiScrollableContainerFooterDirective, RtuiScrollableContainerHeaderDirective, RtuiSideMenuComponent, RtuiSideMenuFooterDirective, RtuiSideMenuHeaderDirective, RtuiSnackBarComponent, RtuiSpinnerComponent, RtuiStopTableRowClickDirective, RtuiTableAdditionalRowActionsDirective, RtuiTableComponent, RtuiTableRowActionsDirective, RtuiTableRowClickDirective, RtuiToggleComponent, RtuiToolbarCenterDirective, RtuiToolbarComponent, RtuiToolbarLeftDirective, RtuiToolbarRightDirective, TABLE_COLUMN_FILTER_TYPES_ENUM, TABLE_COLUMN_TYPES_ENUM, TEXT_CELL_COLOR_ENUM, TOGGLE_SIZE_TYPE_ENUM, darkenHexColor, ddServices, getColorBasedOnBackground, progressDecreaseAnimation, progressIncreaseAnimation, provideRtUi };
+export { ASIDE_BUTTONS_ENUM, ASIDE_REF, AsideRef, BUTTON_APPEARANCE, BUTTON_COLOR, BUTTON_SIZE, DEFAULT_PAGE_MODEL, DEFAULT_PAGE_SIZE, INFO_BADGE_SIZE_ENUM, INFO_BADGE_TYPE_ENUM, MODAL_WINDOW_SIZE_ENUM, RTUI_TABLE_COMPONENT_TOKEN, RTUI_TABLE_STOP_ROW_CLICK_ATTRIBUTE, RT_ACCENT_ROLE_ENUM, RT_COLOR_SCHEME_STORAGE_KEY, RT_DARK_CLASS, RT_DEFAULT_SCHEME, RT_SCHEME_ATTRIBUTE, RT_THEME_ATTRIBUTE, RT_THEME_AUTO_CLASS, RT_THEME_ENUM, RT_THEME_STORAGE_KEY, RtActionBarService, RtAsideService, RtDynamicListSelectorsDirective, RtModalService, RtPopoverDirective, RtSnackBarService, RtTableConfigService, RtTableSelectorsDirective, RtThemeDirective, RtThemeService, RtuiActionBarComponent, RtuiActionBarContainerComponent, RtuiAsideContainerComponent, RtuiAsideContainerHeaderDirective, RtuiButtonComponent, RtuiClearButtonComponent, RtuiCustomTableCellsDirective, RtuiDynamicInputAdditionalControlDirective, RtuiDynamicInputComponent, RtuiDynamicListComponent, RtuiDynamicListCustomTableCellsDirective, RtuiDynamicListRowActionsDirective, RtuiDynamicListRowAdditionalActionsDirective, RtuiDynamicListToolbarActionsDirective, RtuiDynamicListToolbarSelectorsDirective, RtuiDynamicSelectorAdditionalControlDirective, RtuiDynamicSelectorComponent, RtuiDynamicSelectorItemAdditionalControlDirective, RtuiDynamicSelectorItemTitleDirective, RtuiDynamicSelectorItemTitleProjectionDirective, RtuiDynamicSelectorListActionsComponent, RtuiDynamicSelectorPlaceholderComponent, RtuiDynamicSelectorSelectedListComponent, RtuiFileUploadComponent, RtuiHeaderCenterDirective, RtuiHeaderComponent, RtuiHeaderLeftDirective, RtuiHeaderRightDirective, RtuiImageUploadComponent, RtuiInfoBadgeComponent, RtuiModalComponent, RtuiMultiButtonComponent, RtuiMultiSelectorPopupComponent, RtuiPaginationComponent, RtuiRoundIconButtonComponent, RtuiScrollableContainerComponent, RtuiScrollableContainerContentDirective, RtuiScrollableContainerFooterDirective, RtuiScrollableContainerHeaderDirective, RtuiSideMenuComponent, RtuiSideMenuFooterDirective, RtuiSideMenuHeaderDirective, RtuiSnackBarComponent, RtuiSpinnerComponent, RtuiStopTableRowClickDirective, RtuiTableAdditionalRowActionsDirective, RtuiTableComponent, RtuiTableRowActionsDirective, RtuiTableRowClickDirective, RtuiToggleComponent, RtuiToolbarCenterDirective, RtuiToolbarComponent, RtuiToolbarLeftDirective, RtuiToolbarRightDirective, TABLE_COLUMN_FILTER_TYPES_ENUM, TABLE_COLUMN_TYPES_ENUM, TEXT_CELL_COLOR_ENUM, TOGGLE_SIZE_TYPE_ENUM, darkenHexColor, ddServices, getColorBasedOnBackground, progressDecreaseAnimation, progressIncreaseAnimation, provideRtUi };
 //# sourceMappingURL=rt-tools-ui-kit.mjs.map