@rt-tools/ui-kit 0.0.16 → 0.0.19

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

@@ -12,7 +12,7 @@ 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, WINDOW, IDBStorageService, ModDirective, 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';
@@ -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: [":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;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: 
                 // 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: [":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;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"] }]
         }], 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: [":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(--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);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 }); }
 }
 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: [":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(--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);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"] }]
         }], propDecorators: { headerTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => RtuiScrollableContainerHeaderDirective), { ...{
                             read: TemplateRef,
                         }, isSignal: true }] }], contentTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => RtuiScrollableContainerContentDirective), { ...{
@@ -233,7 +233,7 @@ 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 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(--rt-border-neutral-emphasis)}: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: 
                 // 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 }); }
 }
@@ -260,7 +260,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 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(--rt-border-neutral-emphasis)}: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"] }]
         }], 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,7 +359,7 @@ 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: [":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(--rt-border-neutral-default);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: 
                 // 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: 
                 // components
@@ -386,7 +386,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: [":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(--rt-border-neutral-default);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"] }]
         }], propDecorators: { headerTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => RtuiSideMenuHeaderDirective), { ...{
                             read: TemplateRef,
                         }, isSignal: true }] }], footerTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => RtuiSideMenuFooterDirective), { ...{
@@ -400,11 +400,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{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(--rt-icon-accent-brand)}:host .c-spinner__wrapper--bgr-color{width:3rem;height:3rem;background:var(--rt-bg-base-base);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 }); }
 }
 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{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(--rt-icon-accent-brand)}:host .c-spinner__wrapper--bgr-color{width:3rem;height:3rem;background:var(--rt-bg-base-base);border-radius:50%;box-shadow:0 1px 3px #0000001f,0 1px 2px #0000003d}\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 +465,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: [":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(--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-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(--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)}.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(--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;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: [
             trigger('aside', [
                 state('enter-left', style({ transform: 'none' })),
                 transition('* => enter-left', [
@@ -499,7 +499,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: [":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(--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-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(--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)}.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(--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;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"] }]
         }], propDecorators: { _state: [{
                 type: HostBinding,
                 args: ['@aside']
@@ -638,11 +638,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: [":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);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 }); }
 }
 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], 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(--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);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"] }]
         }], 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), { ...{
@@ -853,7 +853,7 @@ 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: [":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);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: 
                 // rt-tools
                 BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }, { kind: "pipe", type: 
                 // pipes
@@ -867,7 +867,7 @@ 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"] }]
+                    ], 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(--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);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"] }]
         }], 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,7 +964,7 @@ 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: [":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;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: 
                 // 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
@@ -980,7 +980,7 @@ 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"] }]
+                    ], 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(--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;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"] }]
         }], 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 +1120,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: [":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(--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;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 }); }
 }
 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], 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(--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;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"] }]
         }], 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 +1758,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: [":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(--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{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: 
                 // 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 +1780,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: [":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(--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{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"] }]
         }], 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 +1827,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: [":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(--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{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: 
                 // 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 +1850,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: [":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(--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{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"] }]
         }], 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']
@@ -2280,11 +2280,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: [":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;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 }); }
 }
 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, 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(--rt-text-accent-danger);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"] }]
         }], 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,7 +2392,7 @@ 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: [":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;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: 
                 // directives
                 BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
@@ -2411,7 +2411,7 @@ 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"] }]
+                    ], 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(--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;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"] }]
         }], 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,7 +2615,7 @@ 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: [":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;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: 
                 // 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
@@ -2651,7 +2651,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: [":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;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"] }]
         }], 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 +2668,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: [":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);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 }); }
 }
 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], 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(--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);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"] }]
         }], 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 */
@@ -3620,7 +3620,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: [":host{width:100%;position:relative;display:flex;overflow:hidden}:host ::-webkit-scrollbar-track:hover{border:1px solid var(--rt-border-neutral-subtle)}:host ::-webkit-scrollbar-thumb{background:var(--rt-scrollbar-thumb);border:3px solid transparent;border-radius:6px;background-clip:content-box}:host ::-webkit-scrollbar-thumb:hover{background:var(--rt-scrollbar-thumb-hover);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(--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;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: 
                 // 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 +3661,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: [":host{width:100%;position:relative;display:flex;overflow:hidden}:host ::-webkit-scrollbar-track:hover{border:1px solid var(--rt-border-neutral-subtle)}:host ::-webkit-scrollbar-thumb{background:var(--rt-scrollbar-thumb);border:3px solid transparent;border-radius:6px;background-clip:content-box}:host ::-webkit-scrollbar-thumb:hover{background:var(--rt-scrollbar-thumb-hover);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(--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;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"] }]
         }], 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), { ...{
@@ -4194,11 +4194,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: [":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(--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{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 }); }
 }
 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: [":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(--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{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"] }]
         }], ctorParameters: () => [], propDecorators: { progressTplRef: [{ type: i0.ViewChild, args: ['progressTpl', { isSignal: true }] }], onMouseOver: [{
                 type: HostListener,
                 args: ['mouseover']
@@ -4421,7 +4421,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: [":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);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: 
                 // 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 +4439,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: [":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);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"] }]
         }], propDecorators: { isIconOutlined: [{ type: i0.Input, args: [{ isSignal: true, alias: "isIconOutlined", required: false }] }], uploadFile: [{ type: i0.Output, args: ["uploadFile"] }] } });
 
 class RtuiImageUploadComponent {
@@ -4553,6 +4553,116 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
                     ], 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"] }]
         }], 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';
+
+/**
+ * Global theme switcher for the rt-tools design tokens.
+ *
+ * Applies `.rt-dark` / `.rt-theme-auto` to `<html>`; all semantic tokens
+ * (`--rt-*`) adapt through `color-scheme` + `light-dark()`.
+ * The chosen theme is persisted to localStorage (`rt-theme` key).
+ *
+ * `auto` follows the OS preference (`prefers-color-scheme`).
+ */
+class RtThemeService {
+    #document;
+    #platformService;
+    // falls back to the native localStorage when the app does not call provideRtStorage()
+    #storage;
+    #theme;
+    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.theme = this.#theme.asReadonly();
+        effect(() => {
+            this.#apply(this.#theme());
+        });
+    }
+    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);
+    }
+    #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;
+    }
+    #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);
+    }
+    #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 +4672,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_DARK_CLASS, 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