@rt-tools/ui-kit 0.0.25 → 0.0.27

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

@@ -80,14 +80,14 @@ class RtuiModalComponent {
             message: Boolean(this.control) ? this.control?.value : null,
         });
     }
-    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: ["@charset \"UTF-8\";:host{--rt-modal-title-font-size: 1.25rem;--rt-modal-title-color: var(--rt-text-base-primary);--rt-modal-title-font-weight: 400;--rt-modal-content-padding: 1rem 1.5rem;--rt-modal-content-color: var(--rt-text-base-soft);--rt-modal-content-font-size: .8rem;--rt-modal-content-text-align: center;--rt-modal-content-word-wrap: break-word;--rt-modal-input-margin-top: 1.5rem;--rt-modal-input-font-weight: 600;--rt-modal-input-text-align: left;--rt-modal-textarea-margin-top: 1.5rem;--rt-modal-select-margin-top: 1.5rem;--rt-modal-text-highlited-font-weight: 600;--rt-modal-text-highlited-color: var(--rt-text-base-strong);--rt-modal-text-warn-display: inline;--rt-modal-text-warn-font-size: 1rem;--rt-modal-text-warn-font-weight: 600;--rt-modal-text-warn-color: var(--rt-text-accent-danger)}:host ::ng-deep .--highlighted{display:inline;color:var(--rt-modal-text-highlited-color);font-weight:var(--rt-modal-text-highlited-font-weight)}:host ::ng-deep .--warn{display:inline;color:var(--rt-modal-text-warn-color);font-size:var(--rt-modal-text-warn-font-size);font-weight:var(--rt-modal-text-warn-font-weight)}:host .rtui-modal__title h1{color:var(--rt-modal-title-color);font-size:var(--rt-modal-title-font-size);font-weight:var(--rt-modal-title-font-weight)}:host .rtui-modal__title h1,:host .rtui-modal__title h2{text-align:center}:host .rtui-modal__input{margin-top:var(--rt-modal-input-margin-top);font-weight:var(--rt-modal-input-font-weight);text-align:var(--rt-modal-input-text-align)}:host .rtui-modal__textarea{margin-top:var(--rt-modal-textarea-margin-top)}:host .rtui-modal__select{margin-top:var(--rt-modal-select-margin-top)}:host .mat-icon{width:auto;height:auto}:host .mdc-dialog__title:before{height:100%}:host mat-dialog-content{padding:var(--rt-modal-content-padding);color:var(--rt-modal-content-color);font-size:var(--rt-modal-content-font-size);overflow-wrap:var(--rt-modal-content-word-wrap);text-align:var(--rt-modal-content-text-align)}:host mat-dialog-content mat-form-field{width:100%}:host mat-dialog-content mat-form-field textarea{resize:none}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: 
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: RtuiModalComponent, isStandalone: true, selector: "rtui-modal", host: { properties: { "class": "this.hostClasses" }, classAttribute: "rtui-modal" }, ngImport: i0, template: "<ng-container rtBlock=\"rtui-modal\">\n    @if (data.title) {\n        <div rtElem=\"title\" mat-dialog-title>\n            @if (data.icon) {\n                <h2>\n                    <mat-icon [ngStyle]=\"data.icon.style\">\n                        {{ data.icon.value }}\n                    </mat-icon>\n                </h2>\n            }\n\n            <h1>{{ data.title }}</h1>\n        </div>\n    }\n\n    <mat-dialog-content>\n        @if (data.text) {\n            <div rtElem=\"text\" [innerHTML]=\"data.text | sanitize\"></div>\n        }\n\n        @if (data.confirmation) {\n            <div rtElem=\"confirmation\" [innerHTML]=\"data.confirmation | sanitize\"></div>\n        }\n\n        @if (data.input) {\n            <div rtElem=\"input\">{{ data.input.label }}</div>\n\n            <mat-form-field [appearance]=\"'outline'\">\n                <input matInput type=\"text\" autocomplete=\"off\" [formControl]=\"control!\" />\n            </mat-form-field>\n        }\n\n        @if (data.textArea) {\n            <mat-form-field rtElem=\"textarea\">\n                <textarea matInput [formControl]=\"control!\" [placeholder]=\"data.textArea.placeholder\"></textarea>\n            </mat-form-field>\n        }\n\n        @if (data.select) {\n            <mat-form-field rtElem=\"select\">\n                @if (data.select.label) {\n                    <mat-label>{{ data.select.label }}</mat-label>\n                }\n\n                <mat-select required [formControl]=\"selectControl!\">\n                    <mat-option>--</mat-option>\n                    @for (option of data.select.value; track option?.name ?? option) {\n                        <mat-option [value]=\"option?.value\">\n                            {{ option?.name }}\n                        </mat-option>\n                    }\n                </mat-select>\n\n                @if (data.select.hint && selectControl?.hasError('required')) {\n                    <mat-error>{{ data.select.hint }}</mat-error>\n                }\n            </mat-form-field>\n        }\n\n        @if (data?.component) {\n            <ng-container *ngComponentOutlet=\"data!.component!\" />\n        }\n    </mat-dialog-content>\n\n    <mat-dialog-actions [attr.align]=\"data.buttonsAlign\">\n        @for (button of data.buttons; track button.text) {\n            @switch (button.appearance) {\n                @case ('raised') {\n                    <button\n                        mat-flat-button\n                        type=\"button\"\n                        [ngClass]=\"button.className\"\n                        [color]=\"button.color\"\n                        [disabled]=\"button.validateSelect && (selectControl?.invalid || control?.invalid)\"\n                        [ngStyle]=\"button.style\"\n                        (click)=\"onClose(button)\">\n                        {{ button.text }}\n                    </button>\n                }\n\n                @case ('flat') {\n                    <button\n                        mat-flat-button\n                        type=\"button\"\n                        [color]=\"button.color\"\n                        [disabled]=\"button.validateSelect && (selectControl?.invalid || control?.invalid)\"\n                        [ngStyle]=\"button.style\"\n                        (click)=\"onClose(button)\">\n                        {{ button.text }}\n                    </button>\n                }\n\n                @case ('stroked') {\n                    <button\n                        mat-stroked-button\n                        type=\"button\"\n                        [color]=\"button.color\"\n                        [disabled]=\"button.validateSelect && (selectControl?.invalid || control?.invalid)\"\n                        [ngStyle]=\"button.style\"\n                        (click)=\"onClose(button)\">\n                        {{ button.text }}\n                    </button>\n                }\n\n                @case ('fab') {\n                    <button\n                        mat-fab\n                        type=\"button\"\n                        [color]=\"button.color\"\n                        [disabled]=\"button.validateSelect && (selectControl?.invalid || control?.invalid)\"\n                        [ngStyle]=\"button.style\"\n                        (click)=\"onClose(button)\">\n                        {{ button.text }}\n                    </button>\n                }\n\n                @case ('mini-fab') {\n                    <button\n                        mat-mini-fab\n                        type=\"button\"\n                        [color]=\"button.color\"\n                        [disabled]=\"button.validateSelect && (selectControl?.invalid || control?.invalid)\"\n                        [ngStyle]=\"button.style\"\n                        (click)=\"onClose(button)\">\n                        {{ button.text }}\n                    </button>\n                }\n\n                @default {\n                    <button\n                        mat-button\n                        type=\"button\"\n                        [color]=\"button.color\"\n                        [disabled]=\"button.validateSelect && (selectControl?.invalid || control?.invalid)\"\n                        [ngStyle]=\"button.style\"\n                        (click)=\"onClose(button)\">\n                        {{ button.text }}\n                    </button>\n                }\n            }\n        }\n    </mat-dialog-actions>\n</ng-container>\n", styles: ["@charset \"UTF-8\";:host{--rt-modal-title-font-size: 1.25rem;--rt-modal-title-color: var(--rt-text-base-primary);--rt-modal-title-font-weight: 400;--rt-modal-content-padding: 1rem 1.5rem;--rt-modal-content-color: var(--rt-text-base-soft);--rt-modal-content-font-size: .8rem;--rt-modal-content-text-align: center;--rt-modal-content-word-wrap: break-word;--rt-modal-input-margin-top: 1.5rem;--rt-modal-input-font-weight: 600;--rt-modal-input-text-align: left;--rt-modal-textarea-margin-top: 1.5rem;--rt-modal-select-margin-top: 1.5rem;--rt-modal-text-highlited-font-weight: 600;--rt-modal-text-highlited-color: var(--rt-text-base-strong);--rt-modal-text-warn-display: inline;--rt-modal-text-warn-font-size: 1rem;--rt-modal-text-warn-font-weight: 600;--rt-modal-text-warn-color: var(--rt-text-accent-danger)}:host ::ng-deep .--highlighted{display:inline;color:var(--rt-modal-text-highlited-color);font-weight:var(--rt-modal-text-highlited-font-weight)}:host ::ng-deep .--warn{display:inline;color:var(--rt-modal-text-warn-color);font-size:var(--rt-modal-text-warn-font-size);font-weight:var(--rt-modal-text-warn-font-weight)}:host .rtui-modal__title h1{color:var(--rt-modal-title-color);font-size:var(--rt-modal-title-font-size);font-weight:var(--rt-modal-title-font-weight)}:host .rtui-modal__title h1,:host .rtui-modal__title h2{text-align:center}:host .rtui-modal__input{margin-top:var(--rt-modal-input-margin-top);font-weight:var(--rt-modal-input-font-weight);text-align:var(--rt-modal-input-text-align)}:host .rtui-modal__textarea{margin-top:var(--rt-modal-textarea-margin-top)}:host .rtui-modal__select{margin-top:var(--rt-modal-select-margin-top)}:host .mat-icon{width:auto;height:auto}:host .mdc-dialog__title:before{height:100%}:host mat-dialog-content{padding:var(--rt-modal-content-padding);color:var(--rt-modal-content-color);font-size:var(--rt-modal-content-font-size);overflow-wrap:var(--rt-modal-content-word-wrap);text-align:var(--rt-modal-content-text-align)}:host mat-dialog-content mat-form-field{width:100%}:host mat-dialog-content mat-form-field textarea{resize:none}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: 
                 // material
                 MatDialogModule }, { kind: "directive", type: i2.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i2.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i4.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i4.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i5.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i5.MatMiniFabButton, selector: "button[mat-mini-fab], a[mat-mini-fab], button[matMiniFab], a[matMiniFab]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i5.MatFabButton, selector: "button[mat-fab], a[mat-fab], button[matFab], a[matFab]", inputs: ["extended"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: 
                 // BEM
                 BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }, { kind: "pipe", type: SanitizePipe, name: "sanitize" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtuiModalComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiModalComponent, decorators: [{
             type: Component,
             args: [{ selector: 'rtui-modal', changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'rtui-modal' }, imports: [
                         NgStyle,
@@ -151,38 +151,38 @@ class RtModalService {
             on: (predicate) => result$.pipe(filter((answer) => predicate(answer))),
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtModalService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtModalService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtModalService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtModalService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtModalService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtModalService, decorators: [{
             type: Injectable
         }] });
 
 class RtuiScrollableContainerHeaderDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtuiScrollableContainerHeaderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.1", type: RtuiScrollableContainerHeaderDirective, isStandalone: true, selector: "[rtuiScrollableHeader]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiScrollableContainerHeaderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: RtuiScrollableContainerHeaderDirective, isStandalone: true, selector: "[rtuiScrollableHeader]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtuiScrollableContainerHeaderDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiScrollableContainerHeaderDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rtuiScrollableHeader]',
                 }]
         }] });
 class RtuiScrollableContainerContentDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtuiScrollableContainerContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.1", type: RtuiScrollableContainerContentDirective, isStandalone: true, selector: "[rtuiScrollableContent]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiScrollableContainerContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: RtuiScrollableContainerContentDirective, isStandalone: true, selector: "[rtuiScrollableContent]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtuiScrollableContainerContentDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiScrollableContainerContentDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rtuiScrollableContent]',
                 }]
         }] });
 class RtuiScrollableContainerFooterDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtuiScrollableContainerFooterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.1", type: RtuiScrollableContainerFooterDirective, isStandalone: true, selector: "[rtuiScrollableFooter]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiScrollableContainerFooterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: RtuiScrollableContainerFooterDirective, isStandalone: true, selector: "[rtuiScrollableFooter]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtuiScrollableContainerFooterDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiScrollableContainerFooterDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rtuiScrollableFooter]',
@@ -190,14 +190,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
         }] });
 class RtuiScrollableContainerComponent {
     constructor() {
-        this.headerTpl = contentChild(RtuiScrollableContainerHeaderDirective, { ...(ngDevMode ? { debugName: "headerTpl" } : {}), read: TemplateRef });
-        this.contentTpl = contentChild(RtuiScrollableContainerContentDirective, { ...(ngDevMode ? { debugName: "contentTpl" } : {}), read: TemplateRef });
-        this.footerTpl = contentChild(RtuiScrollableContainerFooterDirective, { ...(ngDevMode ? { debugName: "footerTpl" } : {}), read: TemplateRef });
+        this.headerTpl = contentChild(RtuiScrollableContainerHeaderDirective, { ...(ngDevMode ? { debugName: "headerTpl" } : /* istanbul ignore next */ {}), read: TemplateRef });
+        this.contentTpl = contentChild(RtuiScrollableContainerContentDirective, { ...(ngDevMode ? { debugName: "contentTpl" } : /* istanbul ignore next */ {}), read: TemplateRef });
+        this.footerTpl = contentChild(RtuiScrollableContainerFooterDirective, { ...(ngDevMode ? { debugName: "footerTpl" } : /* istanbul ignore next */ {}), 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: ["@charset \"UTF-8\";:host{display:var(--rt-scrollable-host-display);width:var(--rt-scrollable-host-width);height:var(--rt-scrollable-host-height);flex-direction:var(--rt-scrollable-host-flex-direction);background-color:var(--rt-scrollable-host-background-color);--rt-scrollable-host-height: 100%;--rt-scrollable-host-width: 100%;--rt-scrollable-host-display: flex;--rt-scrollable-host-flex-direction: column;--rt-scrollable-host-background-color: var(--rt-bg-base-base);--rt-scrollable-header-padding: .5rem 1rem;--rt-scrollable-header-background-color: var(--rt-bg-base-base);--rt-scrollable-content-display: flex;--rt-scrollable-content-flex-direction: column;--rt-scrollable-content-flex-grow: 1;--rt-scrollable-content-padding: 1rem;--rt-scrollable-content-background-color: var(--rt-bg-base-base);--rt-scrollable-footer-padding: 1rem;--rt-scrollable-footer-background-color: var(--rt-bg-base-base)}:host .rtui-scrollable__header{padding:var(--rt-scrollable-header-padding);background-color:var(--rt-scrollable-header-background-color)}:host .rtui-scrollable__content{display:var(--rt-scrollable-content-display);overflow:auto;flex-direction:var(--rt-scrollable-content-flex-direction);flex-grow:var(--rt-scrollable-content-flex-grow);padding:var(--rt-scrollable-content-padding);background-color:var(--rt-scrollable-content-background-color)}:host .rtui-scrollable__footer{padding:var(--rt-scrollable-footer-padding);background-color:var(--rt-scrollable-footer-background-color)}\n"], dependencies: [{ kind: "directive", type: BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiScrollableContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: RtuiScrollableContainerComponent, isStandalone: true, selector: "rtui-scrollable", queries: [{ propertyName: "headerTpl", first: true, predicate: RtuiScrollableContainerHeaderDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "contentTpl", first: true, predicate: RtuiScrollableContainerContentDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "footerTpl", first: true, predicate: RtuiScrollableContainerFooterDirective, descendants: true, read: TemplateRef, isSignal: true }], ngImport: i0, template: "<ng-container rtBlock=\"rtui-scrollable\">\n    @if (headerTpl()) {\n        <div rtElem=\"header\">\n            <ng-container *ngTemplateOutlet=\"headerTpl() ?? null\" />\n        </div>\n    }\n\n    @if (contentTpl()) {\n        <div rtElem=\"content\">\n            <ng-container *ngTemplateOutlet=\"contentTpl() ?? null\" />\n        </div>\n    }\n\n    @if (footerTpl()) {\n        <div rtElem=\"footer\">\n            <ng-container *ngTemplateOutlet=\"footerTpl() ?? null\" />\n        </div>\n    }\n</ng-container>\n", styles: ["@charset \"UTF-8\";:host{display:var(--rt-scrollable-host-display);width:var(--rt-scrollable-host-width);height:var(--rt-scrollable-host-height);flex-direction:var(--rt-scrollable-host-flex-direction);background-color:var(--rt-scrollable-host-background-color);--rt-scrollable-host-height: 100%;--rt-scrollable-host-width: 100%;--rt-scrollable-host-display: flex;--rt-scrollable-host-flex-direction: column;--rt-scrollable-host-background-color: var(--rt-bg-base-base);--rt-scrollable-header-padding: .5rem 1rem;--rt-scrollable-header-background-color: var(--rt-bg-base-base);--rt-scrollable-content-display: flex;--rt-scrollable-content-flex-direction: column;--rt-scrollable-content-flex-grow: 1;--rt-scrollable-content-padding: 1rem;--rt-scrollable-content-background-color: var(--rt-bg-base-base);--rt-scrollable-footer-padding: 1rem;--rt-scrollable-footer-background-color: var(--rt-bg-base-base)}:host .rtui-scrollable__header{padding:var(--rt-scrollable-header-padding);background-color:var(--rt-scrollable-header-background-color)}:host .rtui-scrollable__content{display:var(--rt-scrollable-content-display);overflow:auto;flex-direction:var(--rt-scrollable-content-flex-direction);flex-grow:var(--rt-scrollable-content-flex-grow);padding:var(--rt-scrollable-content-padding);background-color:var(--rt-scrollable-content-background-color)}:host .rtui-scrollable__footer{padding:var(--rt-scrollable-footer-padding);background-color:var(--rt-scrollable-footer-background-color)}\n"], dependencies: [{ kind: "directive", type: BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtuiScrollableContainerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiScrollableContainerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'rtui-scrollable', changeDetection: ChangeDetectionStrategy.OnPush, imports: [BlockDirective, ElemDirective, NgTemplateOutlet], template: "<ng-container rtBlock=\"rtui-scrollable\">\n    @if (headerTpl()) {\n        <div rtElem=\"header\">\n            <ng-container *ngTemplateOutlet=\"headerTpl() ?? null\" />\n        </div>\n    }\n\n    @if (contentTpl()) {\n        <div rtElem=\"content\">\n            <ng-container *ngTemplateOutlet=\"contentTpl() ?? null\" />\n        </div>\n    }\n\n    @if (footerTpl()) {\n        <div rtElem=\"footer\">\n            <ng-container *ngTemplateOutlet=\"footerTpl() ?? null\" />\n        </div>\n    }\n</ng-container>\n", styles: ["@charset \"UTF-8\";:host{display:var(--rt-scrollable-host-display);width:var(--rt-scrollable-host-width);height:var(--rt-scrollable-host-height);flex-direction:var(--rt-scrollable-host-flex-direction);background-color:var(--rt-scrollable-host-background-color);--rt-scrollable-host-height: 100%;--rt-scrollable-host-width: 100%;--rt-scrollable-host-display: flex;--rt-scrollable-host-flex-direction: column;--rt-scrollable-host-background-color: var(--rt-bg-base-base);--rt-scrollable-header-padding: .5rem 1rem;--rt-scrollable-header-background-color: var(--rt-bg-base-base);--rt-scrollable-content-display: flex;--rt-scrollable-content-flex-direction: column;--rt-scrollable-content-flex-grow: 1;--rt-scrollable-content-padding: 1rem;--rt-scrollable-content-background-color: var(--rt-bg-base-base);--rt-scrollable-footer-padding: 1rem;--rt-scrollable-footer-background-color: var(--rt-bg-base-base)}:host .rtui-scrollable__header{padding:var(--rt-scrollable-header-padding);background-color:var(--rt-scrollable-header-background-color)}:host .rtui-scrollable__content{display:var(--rt-scrollable-content-display);overflow:auto;flex-direction:var(--rt-scrollable-content-flex-direction);flex-grow:var(--rt-scrollable-content-flex-grow);padding:var(--rt-scrollable-content-padding);background-color:var(--rt-scrollable-content-background-color)}:host .rtui-scrollable__footer{padding:var(--rt-scrollable-footer-padding);background-color:var(--rt-scrollable-footer-background-color)}\n"] }]
         }], propDecorators: { headerTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => RtuiScrollableContainerHeaderDirective), { ...{
@@ -211,12 +211,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
 class RtuiSideMenuSubItemComponent {
     constructor() {
         this.menuRef = inject(RtuiSideMenuComponent);
-        this.item = input.required({ ...(ngDevMode ? { debugName: "item" } : {}) });
-        this.isMobile = input(false, { ...(ngDevMode ? { debugName: "isMobile" } : {}), transform: booleanAttribute });
-        this.isSubMenuXScrollEnabled = input(false, { ...(ngDevMode ? { debugName: "isSubMenuXScrollEnabled" } : {}), transform: booleanAttribute });
-        this.isSubMenuIconsOutlined = input(false, { ...(ngDevMode ? { debugName: "isSubMenuIconsOutlined" } : {}), transform: booleanAttribute });
-        this.isSubMenuButtonIconsOutlined = input(false, { ...(ngDevMode ? { debugName: "isSubMenuButtonIconsOutlined" } : {}), transform: booleanAttribute });
-        this.isSubMenuTooltipsShown = input(false, { ...(ngDevMode ? { debugName: "isSubMenuTooltipsShown" } : {}), transform: booleanAttribute });
+        this.item = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "item" }] : /* istanbul ignore next */ []));
+        this.isMobile = input(false, { ...(ngDevMode ? { debugName: "isMobile" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.isSubMenuXScrollEnabled = input(false, { ...(ngDevMode ? { debugName: "isSubMenuXScrollEnabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.isSubMenuIconsOutlined = input(false, { ...(ngDevMode ? { debugName: "isSubMenuIconsOutlined" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.isSubMenuButtonIconsOutlined = input(false, { ...(ngDevMode ? { debugName: "isSubMenuButtonIconsOutlined" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.isSubMenuTooltipsShown = input(false, { ...(ngDevMode ? { debugName: "isSubMenuTooltipsShown" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         this.clickSubMenuAction = output();
         this.clickSubMenuAdditionalAction = output();
     }
@@ -226,8 +227,8 @@ class RtuiSideMenuSubItemComponent {
     onClickSubMenuAdditional(data, event) {
         this.clickSubMenuAdditionalAction.emit({ data, event });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtuiSideMenuSubItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: RtuiSideMenuSubItemComponent, isStandalone: true, selector: "rtui-side-menu-sub-item", inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null }, isMobile: { classPropertyName: "isMobile", publicName: "isMobile", isSignal: true, isRequired: false, transformFunction: null }, isSubMenuXScrollEnabled: { classPropertyName: "isSubMenuXScrollEnabled", publicName: "isSubMenuXScrollEnabled", isSignal: true, isRequired: false, transformFunction: null }, isSubMenuIconsOutlined: { classPropertyName: "isSubMenuIconsOutlined", publicName: "isSubMenuIconsOutlined", isSignal: true, isRequired: false, transformFunction: null }, isSubMenuButtonIconsOutlined: { classPropertyName: "isSubMenuButtonIconsOutlined", publicName: "isSubMenuButtonIconsOutlined", isSignal: true, isRequired: false, transformFunction: null }, isSubMenuTooltipsShown: { classPropertyName: "isSubMenuTooltipsShown", publicName: "isSubMenuTooltipsShown", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clickSubMenuAction: "clickSubMenuAction", clickSubMenuAdditionalAction: "clickSubMenuAdditionalAction" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiSideMenuSubItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: RtuiSideMenuSubItemComponent, isStandalone: true, selector: "rtui-side-menu-sub-item", inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null }, isMobile: { classPropertyName: "isMobile", publicName: "isMobile", isSignal: true, isRequired: false, transformFunction: null }, isSubMenuXScrollEnabled: { classPropertyName: "isSubMenuXScrollEnabled", publicName: "isSubMenuXScrollEnabled", isSignal: true, isRequired: false, transformFunction: null }, isSubMenuIconsOutlined: { classPropertyName: "isSubMenuIconsOutlined", publicName: "isSubMenuIconsOutlined", isSignal: true, isRequired: false, transformFunction: null }, isSubMenuButtonIconsOutlined: { classPropertyName: "isSubMenuButtonIconsOutlined", publicName: "isSubMenuButtonIconsOutlined", isSignal: true, isRequired: false, transformFunction: null }, isSubMenuTooltipsShown: { classPropertyName: "isSubMenuTooltipsShown", publicName: "isSubMenuTooltipsShown", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clickSubMenuAction: "clickSubMenuAction", clickSubMenuAdditionalAction: "clickSubMenuAdditionalAction" }, providers: [
             {
                 provide: MAT_TOOLTIP_DEFAULT_OPTIONS,
                 useValue: {
@@ -238,7 +239,7 @@ class RtuiSideMenuSubItemComponent {
                 // directives
                 BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }, { kind: "directive", type: ModDirective, selector: "[rtMod]" }, { kind: "directive", type: RtIconOutlinedDirective, selector: "mat-icon[rtIconOutlined]", inputs: ["rtIconOutlined"] }, { kind: "directive", type: RtHideTooltipDirective, selector: "[rtHideTooltipDirective]", inputs: ["rtHideTooltipDirective", "isTooltipShown"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtuiSideMenuSubItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiSideMenuSubItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'rtui-side-menu-sub-item', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         NgTemplateOutlet,
@@ -266,20 +267,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
         }], 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 {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtuiSideMenuHeaderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.1", type: RtuiSideMenuHeaderDirective, isStandalone: true, selector: "[rtuiSideMenuHeader]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiSideMenuHeaderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: RtuiSideMenuHeaderDirective, isStandalone: true, selector: "[rtuiSideMenuHeader]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtuiSideMenuHeaderDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiSideMenuHeaderDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rtuiSideMenuHeader]',
                 }]
         }] });
 class RtuiSideMenuFooterDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtuiSideMenuFooterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.1", type: RtuiSideMenuFooterDirective, isStandalone: true, selector: "[rtuiSideMenuFooter]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiSideMenuFooterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: RtuiSideMenuFooterDirective, isStandalone: true, selector: "[rtuiSideMenuFooter]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtuiSideMenuFooterDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiSideMenuFooterDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rtuiSideMenuFooter]',
@@ -287,23 +288,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
         }] });
 class RtuiSideMenuComponent {
     constructor() {
-        this.headerTpl = contentChild(RtuiSideMenuHeaderDirective, { ...(ngDevMode ? { debugName: "headerTpl" } : {}), read: TemplateRef });
-        this.footerTpl = contentChild(RtuiSideMenuFooterDirective, { ...(ngDevMode ? { debugName: "footerTpl" } : {}), read: TemplateRef });
-        this.subMenuRef = viewChild(MatDrawer, { ...(ngDevMode ? { debugName: "subMenuRef" } : {}) });
-        this.backToMainMenuButton = signal({ id: 0, icon: 'arrow_back', name: 'Main Menu', link: ' ' }, { ...(ngDevMode ? { debugName: "backToMainMenuButton" } : {}) });
-        this.selectedItem = signal(null, { ...(ngDevMode ? { debugName: "selectedItem" } : {}) });
-        this.selectedSubMenu = signal(null, { ...(ngDevMode ? { debugName: "selectedSubMenu" } : {}) });
-        this.activeMenuIds = input.required({ ...(ngDevMode ? { debugName: "activeMenuIds" } : {}) });
-        this.menuItems = input([], { ...(ngDevMode ? { debugName: "menuItems" } : {}), transform: (value) => transformArrayInput(value) });
-        this.isMobile = input(false, { ...(ngDevMode ? { debugName: "isMobile" } : {}), transform: booleanAttribute });
-        this.isSubMenuXScrollEnabled = input(true, { ...(ngDevMode ? { debugName: "isSubMenuXScrollEnabled" } : {}), transform: booleanAttribute });
-        this.isMainMenuIconsOutlined = input(false, { ...(ngDevMode ? { debugName: "isMainMenuIconsOutlined" } : {}), transform: booleanAttribute });
-        this.isSubMenuIconsOutlined = input(false, { ...(ngDevMode ? { debugName: "isSubMenuIconsOutlined" } : {}), transform: booleanAttribute });
-        this.isSubMenuButtonIconsOutlined = input(false, { ...(ngDevMode ? { debugName: "isSubMenuButtonIconsOutlined" } : {}), transform: booleanAttribute });
-        this.isSubMenuTooltipsShown = input(false, { ...(ngDevMode ? { debugName: "isSubMenuTooltipsShown" } : {}), transform: booleanAttribute });
+        this.headerTpl = contentChild(RtuiSideMenuHeaderDirective, { ...(ngDevMode ? { debugName: "headerTpl" } : /* istanbul ignore next */ {}), read: TemplateRef });
+        this.footerTpl = contentChild(RtuiSideMenuFooterDirective, { ...(ngDevMode ? { debugName: "footerTpl" } : /* istanbul ignore next */ {}), read: TemplateRef });
+        this.subMenuRef = viewChild(MatDrawer, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "subMenuRef" }] : /* istanbul ignore next */ []));
+        this.backToMainMenuButton = signal({ id: 0, icon: 'arrow_back', name: 'Main Menu', link: ' ' }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "backToMainMenuButton" }] : /* istanbul ignore next */ []));
+        this.selectedItem = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selectedItem" }] : /* istanbul ignore next */ []));
+        this.selectedSubMenu = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selectedSubMenu" }] : /* istanbul ignore next */ []));
+        this.activeMenuIds = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "activeMenuIds" }] : /* istanbul ignore next */ []));
+        this.menuItems = input([], { ...(ngDevMode ? { debugName: "menuItems" } : /* istanbul ignore next */ {}), transform: (value) => transformArrayInput(value) });
+        this.isMobile = input(false, { ...(ngDevMode ? { debugName: "isMobile" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.isSubMenuXScrollEnabled = input(true, { ...(ngDevMode ? { debugName: "isSubMenuXScrollEnabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.isMainMenuIconsOutlined = input(false, { ...(ngDevMode ? { debugName: "isMainMenuIconsOutlined" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.isSubMenuIconsOutlined = input(false, { ...(ngDevMode ? { debugName: "isSubMenuIconsOutlined" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.isSubMenuButtonIconsOutlined = input(false, { ...(ngDevMode ? { debugName: "isSubMenuButtonIconsOutlined" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.isSubMenuTooltipsShown = input(false, { ...(ngDevMode ? { debugName: "isSubMenuTooltipsShown" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         this.activeMenuId = computed(() => {
             return this.activeMenuIds()?.length ? this.activeMenuIds()[this.activeMenuIds()?.length - 1] : '';
-        }, { ...(ngDevMode ? { debugName: "activeMenuId" } : {}) });
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "activeMenuId" }] : /* istanbul ignore next */ []));
         this.closeMobileMenuAction = output();
         this.clickSubMenuAction = output();
         this.clickSubMenuAdditionalAction = output();
@@ -360,14 +367,14 @@ class RtuiSideMenuComponent {
     #openSubMenu() {
         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: ["@charset \"UTF-8\";:host{--rt-side-menu-base-width: 5.5rem;--rt-side-menu-base-margin-top-between-items: .75rem;--rt-side-menu-item-width: 3.5rem;--rt-side-menu-item-height: 2rem;--rt-side-menu-item-font-size: .75rem;--rt-side-menu-item-text-align: center;--rt-side-menu-item-line-height: 1.1;--rt-side-menu-mobile-item-icon-size: 1.5rem;--rt-side-menu-mobile-item-title-font-size: .75rem;--rt-side-menu-mobile-item-additional-icon-size: 1rem;--rt-side-menu-sub-menu-width: 15rem;--rt-side-menu-sub-menu-item-width: 13.75rem;--rt-side-menu-sub-menu-item-title-font-size: .85rem;--mat-sidenav-scrim-color: transparent}:host .rtui-mobile-side-menu{width:var(--rt-side-menu-sub-menu-width)}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list{display:flex;width:100%;flex-direction:column}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list--scrollable{width:fit-content}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list__sub{animation:fade-in-animation .15s ease-in-out .15s forwards;opacity:0}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list .rtui-mobile-side-menu-list-main{animation:fade-in-animation .15s ease-in-out .15s forwards;opacity:0}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list .rtui-mobile-side-menu-list-main .rtui-mobile-side-menu-item__icon{width:var(--rt-side-menu-mobile-item-icon-size);height:var(--rt-side-menu-mobile-item-icon-size);font-size:var(--rt-side-menu-mobile-item-icon-size)}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list .rtui-mobile-side-menu-list-main .rtui-mobile-side-menu-item .rtui-mobile-side-menu-item-title{display:flex;align-items:center;justify-content:space-between}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list .rtui-mobile-side-menu-list-main .rtui-mobile-side-menu-item .rtui-mobile-side-menu-item-title__text{overflow:hidden;font-size:var(--rt-font-size-xs);text-overflow:ellipsis;white-space:nowrap}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list .rtui-mobile-side-menu-list-main .rtui-mobile-side-menu-item .rtui-mobile-side-menu-item-title .rtui-mobile-side-menu-item-title-button{display:flex;align-items:center;justify-content:center;border-radius:var(--rt-radius-full);margin-left:var(--rt-spacing-8)}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list .rtui-mobile-side-menu-list-main .rtui-mobile-side-menu-item .rtui-mobile-side-menu-item-title .rtui-mobile-side-menu-item-title-button__icon{width:var(--rt-side-menu-mobile-item-additional-icon-size);height:var(--rt-side-menu-mobile-item-additional-icon-size);font-size:var(--rt-side-menu-mobile-item-additional-icon-size)}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list .rtui-mobile-side-menu-list-main .rtui-mobile-side-menu-item+.rtui-mobile-side-menu-item{margin-top:var(--rt-spacing-8)}:host .rtui-side-menu{width:var(--rt-side-menu-base-width)}:host .rtui-side-menu__list{display:flex;width:100%;flex-direction:column;align-items:center}:host .rtui-side-menu__list .rtui-side-menu-item{display:flex;width:100%;flex-direction:column;align-items:center;justify-content:center;cursor:pointer}:host .rtui-side-menu__list .rtui-side-menu-item .rtui-side-menu-item-button{display:flex;width:var(--rt-side-menu-item-width);height:var(--rt-side-menu-item-height);align-items:center;justify-content:center;padding:0}:host .rtui-side-menu__list .rtui-side-menu-item .rtui-side-menu-item-button__icon{display:flex;align-items:center;justify-content:center}:host .rtui-side-menu__list .rtui-side-menu-item__title{font-size:var(--rt-side-menu-item-font-size);line-height:var(--rt-side-menu-item-line-height);text-align:var(--rt-side-menu-item-text-align)}:host .rtui-side-menu__list .rtui-side-menu-item+.rtui-side-menu-item{margin-top:var(--rt-side-menu-base-margin-top-between-items)}:host .rtui-sub-side-menu{position:fixed;top:0;left:var(--rt-side-menu-base-width);width:0;height:100%;background-color:transparent}:host .rtui-sub-side-menu--opened{width:100%}:host .rtui-sub-side-menu .rtui-sub-side-menu-content{--rt-side-menu-sub-content-shadow: 14px 0 28px rgb(0 0 0 / 25%), 10px 0 10px rgb(0 0 0 / 22%);width:var(--rt-side-menu-sub-menu-width);height:100%;border-left:1px solid var(--rt-border-neutral-default);box-shadow:var(--rt-side-menu-sub-content-shadow)}:host .rtui-sub-side-menu .rtui-sub-side-menu-content__list{width:100%;animation:fade-in-animation .15s ease-in-out .15s forwards;opacity:0}:host .rtui-sub-side-menu .rtui-sub-side-menu-content__list--scrollable{min-width:fit-content}@keyframes fade-in-animation{to{opacity:1}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatSidenavModule }, { kind: "component", type: i1$2.MatDrawer, selector: "mat-drawer", inputs: ["position", "mode", "disableClose", "autoFocus", "opened"], outputs: ["openedChange", "opened", "openedStart", "closed", "closedStart", "positionChanged"], exportAs: ["matDrawer"] }, { kind: "component", type: i1$2.MatDrawerContainer, selector: "mat-drawer-container", inputs: ["autosize", "hasBackdrop"], outputs: ["backdropClick"], exportAs: ["matDrawerContainer"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "component", type: MatNavList, selector: "mat-nav-list", exportAs: ["matNavList"] }, { kind: "directive", type: MatListItemIcon, selector: "[matListItemIcon]" }, { kind: "directive", type: 
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiSideMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: RtuiSideMenuComponent, isStandalone: true, selector: "rtui-side-menu", inputs: { activeMenuIds: { classPropertyName: "activeMenuIds", publicName: "activeMenuIds", isSignal: true, isRequired: true, transformFunction: null }, menuItems: { classPropertyName: "menuItems", publicName: "menuItems", isSignal: true, isRequired: false, transformFunction: null }, isMobile: { classPropertyName: "isMobile", publicName: "isMobile", isSignal: true, isRequired: false, transformFunction: null }, isSubMenuXScrollEnabled: { classPropertyName: "isSubMenuXScrollEnabled", publicName: "isSubMenuXScrollEnabled", isSignal: true, isRequired: false, transformFunction: null }, isMainMenuIconsOutlined: { classPropertyName: "isMainMenuIconsOutlined", publicName: "isMainMenuIconsOutlined", isSignal: true, isRequired: false, transformFunction: null }, isSubMenuIconsOutlined: { classPropertyName: "isSubMenuIconsOutlined", publicName: "isSubMenuIconsOutlined", isSignal: true, isRequired: false, transformFunction: null }, isSubMenuButtonIconsOutlined: { classPropertyName: "isSubMenuButtonIconsOutlined", publicName: "isSubMenuButtonIconsOutlined", isSignal: true, isRequired: false, transformFunction: null }, isSubMenuTooltipsShown: { classPropertyName: "isSubMenuTooltipsShown", publicName: "isSubMenuTooltipsShown", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closeMobileMenuAction: "closeMobileMenuAction", clickSubMenuAction: "clickSubMenuAction", clickSubMenuAdditionalAction: "clickSubMenuAdditionalAction" }, queries: [{ propertyName: "headerTpl", first: true, predicate: RtuiSideMenuHeaderDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "footerTpl", first: true, predicate: RtuiSideMenuFooterDirective, descendants: true, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "subMenuRef", first: true, predicate: MatDrawer, descendants: true, isSignal: true }], ngImport: i0, template: "@if (isMobile()) {\n    <rtui-scrollable rtBlock=\"rtui-mobile-side-menu\">\n        @if (headerTpl()) {\n            <ng-container *rtuiScrollableHeader>\n                <ng-container *ngTemplateOutlet=\"headerTpl() ?? null\" />\n            </ng-container>\n        }\n\n        @if (menuItems().length) {\n            <ng-container *rtuiScrollableContent>\n                <mat-nav-list\n                    rtBlock=\"rtui-mobile-side-menu-list\"\n                    [rtMod]=\"{ scrollable: selectedSubMenu()?.length && isSubMenuXScrollEnabled() }\">\n                    @if (selectedSubMenu()?.length) {\n                        <div rtElem=\"sub\" [rtScrollToElement]=\"activeMenuId()\" [elements]=\"selectedSubMenu() ?? []\">\n                            <rtui-side-menu-sub-item\n                                [item]=\"backToMainMenuButton()\"\n                                [isMobile]=\"isMobile()\"\n                                (clickSubMenuAction)=\"onBackToMainMenu()\" />\n\n                            @for (item of selectedSubMenu(); track i; let i = $index) {\n                                <rtui-side-menu-sub-item\n                                    [item]=\"item\"\n                                    [isMobile]=\"isMobile()\"\n                                    [isSubMenuXScrollEnabled]=\"isSubMenuXScrollEnabled()\"\n                                    [isSubMenuIconsOutlined]=\"isSubMenuIconsOutlined()\"\n                                    [isSubMenuButtonIconsOutlined]=\"isSubMenuButtonIconsOutlined()\"\n                                    [isSubMenuTooltipsShown]=\"isSubMenuTooltipsShown()\"\n                                    (clickSubMenuAction)=\"onClickSubMenu($event)\"\n                                    (clickSubMenuAdditionalAction)=\"clickSubMenuAdditional($event)\" />\n                            }\n                        </div>\n                    } @else {\n                        <div rtBlock=\"rtui-mobile-side-menu-list-main\">\n                            @for (item of menuItems(); track i; let i = $index) {\n                                <mat-list-item\n                                    rtBlock=\"rtui-mobile-side-menu-item\"\n                                    [rtNavigationDirective]=\"item?.link\"\n                                    [activated]=\"selectedItem() === item || (!selectedItem() && activeMenuIds().includes(item.id))\"\n                                    (click)=\"onClickMenu(item)\">\n                                    @if (item?.icon) {\n                                        <mat-icon matListItemIcon rtElem=\"icon\" [rtIconOutlined]=\"isMainMenuIconsOutlined()\">\n                                            {{ item.icon }}\n                                        </mat-icon>\n                                    }\n\n                                    @if (item?.name) {\n                                        <div rtBlock=\"rtui-mobile-side-menu-item-title\">\n                                            <div rtElem=\"text\">{{ item.name }}</div>\n\n                                            @if (item?.iconButton?.icon) {\n                                                <div rtBlock=\"rtui-mobile-side-menu-item-title-button\">\n                                                    <mat-icon rtElem=\"icon\">{{ item.iconButton?.icon }}</mat-icon>\n                                                </div>\n                                            }\n                                        </div>\n                                    }\n                                </mat-list-item>\n                            }\n                        </div>\n                    }\n                </mat-nav-list>\n            </ng-container>\n        }\n\n        @if (footerTpl()) {\n            <ng-container *rtuiScrollableFooter>\n                <ng-container *ngTemplateOutlet=\"footerTpl() ?? null\" />\n            </ng-container>\n        }\n    </rtui-scrollable>\n} @else {\n    <rtui-scrollable rtBlock=\"rtui-side-menu\">\n        @if (headerTpl()) {\n            <ng-container *rtuiScrollableHeader>\n                <ng-container *ngTemplateOutlet=\"headerTpl() ?? null\" />\n            </ng-container>\n        }\n\n        @if (menuItems().length) {\n            <ng-container *rtuiScrollableContent>\n                <mat-nav-list rtElem=\"list\">\n                    @for (item of menuItems(); track i; let i = $index) {\n                        <a\n                            rtBlock=\"rtui-side-menu-item\"\n                            [rtNavigationDirective]=\"item?.link\"\n                            (mouseenter)=\"toggleSubMenu(item)\"\n                            (click)=\"onClickMenu(item)\">\n                            @if (item?.icon) {\n                                <mat-list-item\n                                    rtBlock=\"rtui-side-menu-item-button\"\n                                    [activated]=\"selectedItem() === item || (!selectedItem() && activeMenuIds().includes(item.id))\">\n                                    <div rtElem=\"icon\">\n                                        <mat-icon [rtIconOutlined]=\"isMainMenuIconsOutlined()\">{{ item.icon }}</mat-icon>\n                                    </div>\n                                </mat-list-item>\n                            }\n\n                            @if (item?.name) {\n                                <div rtElem=\"title\">{{ item.name }}</div>\n                            }\n                        </a>\n                    }\n                </mat-nav-list>\n            </ng-container>\n        }\n\n        @if (footerTpl()) {\n            <ng-container *rtuiScrollableFooter>\n                <ng-container *ngTemplateOutlet=\"footerTpl() ?? null\" />\n            </ng-container>\n        }\n    </rtui-scrollable>\n\n    <mat-drawer-container\n        rtBlock=\"rtui-sub-side-menu\"\n        [rtMod]=\"{ opened: subMenuRef()?.opened }\"\n        [hasBackdrop]=\"true\"\n        (backdropClick)=\"closeSubMenu()\">\n        <mat-drawer rtBlock=\"rtui-sub-side-menu-content\" mode=\"side\" position=\"start\" (mouseleave)=\"toggleSubMenu()\">\n            <rtui-scrollable>\n                <ng-container *rtuiScrollableContent>\n                    @if (subMenuRef()?.opened && selectedSubMenu()?.length) {\n                        <mat-nav-list\n                            rtElem=\"list\"\n                            [rtMod]=\"{ scrollable: isSubMenuXScrollEnabled() }\"\n                            [rtScrollToElement]=\"activeMenuId()\"\n                            [elements]=\"selectedSubMenu() ?? []\">\n                            @for (item of selectedSubMenu(); track i; let i = $index) {\n                                <rtui-side-menu-sub-item\n                                    [item]=\"item\"\n                                    [isMobile]=\"isMobile()\"\n                                    [isSubMenuXScrollEnabled]=\"isSubMenuXScrollEnabled()\"\n                                    [isSubMenuIconsOutlined]=\"isSubMenuIconsOutlined()\"\n                                    [isSubMenuButtonIconsOutlined]=\"isSubMenuButtonIconsOutlined()\"\n                                    [isSubMenuTooltipsShown]=\"isSubMenuTooltipsShown()\"\n                                    (clickSubMenuAction)=\"onClickSubMenu($event)\"\n                                    (clickSubMenuAdditionalAction)=\"clickSubMenuAdditional($event)\" />\n                            }\n                        </mat-nav-list>\n                    }\n                </ng-container>\n            </rtui-scrollable>\n        </mat-drawer>\n    </mat-drawer-container>\n}\n", styles: ["@charset \"UTF-8\";:host{--rt-side-menu-base-width: 5.5rem;--rt-side-menu-base-margin-top-between-items: .75rem;--rt-side-menu-item-width: 3.5rem;--rt-side-menu-item-height: 2rem;--rt-side-menu-item-font-size: .75rem;--rt-side-menu-item-text-align: center;--rt-side-menu-item-line-height: 1.1;--rt-side-menu-mobile-item-icon-size: 1.5rem;--rt-side-menu-mobile-item-title-font-size: .75rem;--rt-side-menu-mobile-item-additional-icon-size: 1rem;--rt-side-menu-sub-menu-width: 15rem;--rt-side-menu-sub-menu-item-width: 13.75rem;--rt-side-menu-sub-menu-item-title-font-size: .85rem;--mat-sidenav-scrim-color: transparent}:host .rtui-mobile-side-menu{width:var(--rt-side-menu-sub-menu-width)}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list{display:flex;width:100%;flex-direction:column}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list--scrollable{width:fit-content}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list__sub{animation:fade-in-animation .15s ease-in-out .15s forwards;opacity:0}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list .rtui-mobile-side-menu-list-main{animation:fade-in-animation .15s ease-in-out .15s forwards;opacity:0}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list .rtui-mobile-side-menu-list-main .rtui-mobile-side-menu-item__icon{width:var(--rt-side-menu-mobile-item-icon-size);height:var(--rt-side-menu-mobile-item-icon-size);font-size:var(--rt-side-menu-mobile-item-icon-size)}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list .rtui-mobile-side-menu-list-main .rtui-mobile-side-menu-item .rtui-mobile-side-menu-item-title{display:flex;align-items:center;justify-content:space-between}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list .rtui-mobile-side-menu-list-main .rtui-mobile-side-menu-item .rtui-mobile-side-menu-item-title__text{overflow:hidden;font-size:var(--rt-font-size-xs);text-overflow:ellipsis;white-space:nowrap}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list .rtui-mobile-side-menu-list-main .rtui-mobile-side-menu-item .rtui-mobile-side-menu-item-title .rtui-mobile-side-menu-item-title-button{display:flex;align-items:center;justify-content:center;border-radius:var(--rt-radius-full);margin-left:var(--rt-spacing-8)}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list .rtui-mobile-side-menu-list-main .rtui-mobile-side-menu-item .rtui-mobile-side-menu-item-title .rtui-mobile-side-menu-item-title-button__icon{width:var(--rt-side-menu-mobile-item-additional-icon-size);height:var(--rt-side-menu-mobile-item-additional-icon-size);font-size:var(--rt-side-menu-mobile-item-additional-icon-size)}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list .rtui-mobile-side-menu-list-main .rtui-mobile-side-menu-item+.rtui-mobile-side-menu-item{margin-top:var(--rt-spacing-8)}:host .rtui-side-menu{width:var(--rt-side-menu-base-width)}:host .rtui-side-menu__list{display:flex;width:100%;flex-direction:column;align-items:center}:host .rtui-side-menu__list .rtui-side-menu-item{display:flex;width:100%;flex-direction:column;align-items:center;justify-content:center;cursor:pointer}:host .rtui-side-menu__list .rtui-side-menu-item .rtui-side-menu-item-button{display:flex;width:var(--rt-side-menu-item-width);height:var(--rt-side-menu-item-height);align-items:center;justify-content:center;padding:0}:host .rtui-side-menu__list .rtui-side-menu-item .rtui-side-menu-item-button__icon{display:flex;align-items:center;justify-content:center}:host .rtui-side-menu__list .rtui-side-menu-item__title{font-size:var(--rt-side-menu-item-font-size);line-height:var(--rt-side-menu-item-line-height);text-align:var(--rt-side-menu-item-text-align)}:host .rtui-side-menu__list .rtui-side-menu-item+.rtui-side-menu-item{margin-top:var(--rt-side-menu-base-margin-top-between-items)}:host .rtui-sub-side-menu{position:fixed;top:0;left:var(--rt-side-menu-base-width);width:0;height:100%;background-color:transparent}:host .rtui-sub-side-menu--opened{width:100%}:host .rtui-sub-side-menu .rtui-sub-side-menu-content{--rt-side-menu-sub-content-shadow: 14px 0 28px rgb(0 0 0 / 25%), 10px 0 10px rgb(0 0 0 / 22%);width:var(--rt-side-menu-sub-menu-width);height:100%;border-left:1px solid var(--rt-border-neutral-default);box-shadow:var(--rt-side-menu-sub-content-shadow)}:host .rtui-sub-side-menu .rtui-sub-side-menu-content__list{width:100%;animation:fade-in-animation .15s ease-in-out .15s forwards;opacity:0}:host .rtui-sub-side-menu .rtui-sub-side-menu-content__list--scrollable{min-width:fit-content}@keyframes fade-in-animation{to{opacity:1}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatSidenavModule }, { kind: "component", type: i1$2.MatDrawer, selector: "mat-drawer", inputs: ["position", "mode", "disableClose", "autoFocus", "opened"], outputs: ["openedChange", "opened", "openedStart", "closed", "closedStart", "positionChanged"], exportAs: ["matDrawer"] }, { kind: "component", type: i1$2.MatDrawerContainer, selector: "mat-drawer-container", inputs: ["autosize", "hasBackdrop"], outputs: ["backdropClick"], exportAs: ["matDrawerContainer"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "component", type: MatNavList, selector: "mat-nav-list", exportAs: ["matNavList"] }, { kind: "directive", type: MatListItemIcon, selector: "[matListItemIcon]" }, { kind: "directive", type: 
                 // directives
                 BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }, { kind: "directive", type: ModDirective, selector: "[rtMod]" }, { kind: "directive", type: RtuiScrollableContainerHeaderDirective, selector: "[rtuiScrollableHeader]" }, { kind: "directive", type: RtuiScrollableContainerContentDirective, selector: "[rtuiScrollableContent]" }, { kind: "directive", type: RtuiScrollableContainerFooterDirective, selector: "[rtuiScrollableFooter]" }, { kind: "directive", type: RtScrollToElementDirective, selector: "[rtScrollToElement]", inputs: ["rtScrollToElement", "elements"] }, { kind: "directive", type: RtIconOutlinedDirective, selector: "mat-icon[rtIconOutlined]", inputs: ["rtIconOutlined"] }, { kind: "directive", type: RtNavigationDirective, selector: "[rtNavigationDirective]", inputs: ["rtNavigationDirective"] }, { kind: "component", type: 
                 // components
                 RtuiScrollableContainerComponent, selector: "rtui-scrollable" }, { kind: "component", type: RtuiSideMenuSubItemComponent, selector: "rtui-side-menu-sub-item", inputs: ["item", "isMobile", "isSubMenuXScrollEnabled", "isSubMenuIconsOutlined", "isSubMenuButtonIconsOutlined", "isSubMenuTooltipsShown"], outputs: ["clickSubMenuAction", "clickSubMenuAdditionalAction"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtuiSideMenuComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiSideMenuComponent, decorators: [{
             type: Component,
             args: [{ selector: 'rtui-side-menu', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         NgTemplateOutlet,
@@ -398,14 +405,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
 
 class RtuiSpinnerComponent {
     constructor() {
-        this.diameter = input(32, { ...(ngDevMode ? { debugName: "diameter" } : {}), transform: numberAttribute });
-        this.showBox = input(true, { ...(ngDevMode ? { debugName: "showBox" } : {}), transform: booleanAttribute });
-        this.showBackground = input(false, { ...(ngDevMode ? { debugName: "showBackground" } : {}), transform: booleanAttribute });
+        this.diameter = input(32, { ...(ngDevMode ? { debugName: "diameter" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+        this.showBox = input(true, { ...(ngDevMode ? { debugName: "showBox" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.showBackground = input(false, { ...(ngDevMode ? { debugName: "showBackground" } : /* istanbul ignore next */ {}), 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{position:absolute;z-index:10000;display:flex;width:100%;height:100%;align-items:center;justify-content:center}:host .c-spinner__container{display:flex;width:100%;height:100%;align-items:center;justify-content:center}:host .c-spinner__container--bgr-color{background-color:color-mix(in srgb,var(--rt-bg-base-subtle) 85%,transparent)}:host .c-spinner__wrapper{display:flex;align-items:center;justify-content:center}:host .c-spinner__wrapper mat-spinner ::ng-deep circle{stroke:var(--rt-icon-accent-brand)}:host .c-spinner__wrapper--bgr-color{--rt-spinner-backdrop-shadow: 0 1px 3px rgb(0 0 0 / 12%), 0 1px 2px rgb(0 0 0 / 24%);width:3rem;height:3rem;border-radius:var(--rt-radius-full);background:var(--rt-bg-base-base);box-shadow:var(--rt-spinner-backdrop-shadow)}\n"], dependencies: [{ kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i1$3.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiSpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.5", type: RtuiSpinnerComponent, isStandalone: true, selector: "rtui-spinner", inputs: { diameter: { classPropertyName: "diameter", publicName: "diameter", isSignal: true, isRequired: false, transformFunction: null }, showBox: { classPropertyName: "showBox", publicName: "showBox", isSignal: true, isRequired: false, transformFunction: null }, showBackground: { classPropertyName: "showBackground", publicName: "showBackground", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"c-spinner c-spinner__container\" [class.c-spinner__container--bgr-color]=\"showBackground()\">\n    <div class=\"c-spinner__wrapper\" [class.c-spinner__wrapper--bgr-color]=\"showBox()\">\n        <mat-spinner [diameter]=\"diameter()\" />\n    </div>\n</div>\n", styles: [":host{position:absolute;z-index:10000;display:flex;width:100%;height:100%;align-items:center;justify-content:center}:host .c-spinner__container{display:flex;width:100%;height:100%;align-items:center;justify-content:center}:host .c-spinner__container--bgr-color{background-color:color-mix(in srgb,var(--rt-bg-base-subtle) 85%,transparent)}:host .c-spinner__wrapper{display:flex;align-items:center;justify-content:center}:host .c-spinner__wrapper mat-spinner ::ng-deep circle{stroke:var(--rt-icon-accent-brand)}:host .c-spinner__wrapper--bgr-color{--rt-spinner-backdrop-shadow: 0 1px 3px rgb(0 0 0 / 12%), 0 1px 2px rgb(0 0 0 / 24%);width:3rem;height:3rem;border-radius:var(--rt-radius-full);background:var(--rt-bg-base-base);box-shadow:var(--rt-spinner-backdrop-shadow)}\n"], dependencies: [{ kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i1$3.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtuiSpinnerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiSpinnerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'rtui-spinner', imports: [MatProgressSpinnerModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"c-spinner c-spinner__container\" [class.c-spinner__container--bgr-color]=\"showBackground()\">\n    <div class=\"c-spinner__wrapper\" [class.c-spinner__wrapper--bgr-color]=\"showBox()\">\n        <mat-spinner [diameter]=\"diameter()\" />\n    </div>\n</div>\n", styles: [":host{position:absolute;z-index:10000;display:flex;width:100%;height:100%;align-items:center;justify-content:center}:host .c-spinner__container{display:flex;width:100%;height:100%;align-items:center;justify-content:center}:host .c-spinner__container--bgr-color{background-color:color-mix(in srgb,var(--rt-bg-base-subtle) 85%,transparent)}:host .c-spinner__wrapper{display:flex;align-items:center;justify-content:center}:host .c-spinner__wrapper mat-spinner ::ng-deep circle{stroke:var(--rt-icon-accent-brand)}:host .c-spinner__wrapper--bgr-color{--rt-spinner-backdrop-shadow: 0 1px 3px rgb(0 0 0 / 12%), 0 1px 2px rgb(0 0 0 / 24%);width:3rem;height:3rem;border-radius:var(--rt-radius-full);background:var(--rt-bg-base-base);box-shadow:var(--rt-spinner-backdrop-shadow)}\n"] }]
         }], 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 }] }] } });
@@ -467,8 +474,8 @@ 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: ["@charset \"UTF-8\";:root{--rt-aside-host-width: 33.75rem;--rt-aside-host-box-shadow: 0 0 1rem 0 var(--rt-color-dark-a10);--rt-aside-host-background-color: var(--rt-bg-base-base);--rt-aside-header-padding: 2rem;--rt-aside-header-mobile-padding: 1rem;--rt-aside-header-back-button-margin-right: 1rem;--rt-aside-header-title-font-size: 1.5rem;--rt-aside-header-title-line-height: 1.1;--rt-aside-header-title-font-weight: 600;--rt-aside-header-description-font-size: 1rem;--rt-aside-header-description-margin-bottom: .25rem;--rt-aside-header-description-color: var(--rt-text-base-secondary);--rt-aside-header-addition-font-size: 1rem;--rt-aside-header-addition-margin-top: .25rem;--rt-aside-header-addition-color: var(--rt-text-base-secondary);--rt-aside-header-actions-margin-left: 1rem;--rt-aside-header-action-button-margin-left: .75rem;--rt-aside-content-padding: 0 2rem;--rt-aside-content-mobile-padding: 0 1rem;--rt-aside-footer-padding: 2rem;--rt-aside-footer-margin-left-between-buttons: 1rem;--rt-aside-footer-mobile-padding: 1rem;--rt-aside-error-box-height: 2rem;--rt-aside-error-box-padding: .5rem;--rt-aside-error-box-margin: 2rem 0 2rem 0;--rt-aside-error-box-border: 1px solid var(--rt-border-accent-danger-soft);--rt-aside-error-box-border-radius: .375rem;--rt-aside-error-box-title-font-size: 1rem;--rt-aside-error-box-title-font-color: var(--rt-text-accent-danger-soft);--rt-aside-error-box-button-font-size: 1rem;--rt-aside-error-box-button-font-color: var(--rt-text-base-strong);--rt-aside-tab-indicator-width: 6rem;--rt-aside-tab-badge-color: var(--mdc-filled-button-container-color);--rt-aside-tab-badge-incorrect-color: var(--rt-text-accent-danger);--rt-aside-footer-margin-left-betwen-buttons: var(--rt-aside-footer-margin-left-between-buttons)}.icon-badge{position:absolute!important}.title-badge{top:-.5rem;margin-left:var(--rt-spacing-4)}.icon-badge .mat-badge-content,.title-badge .mat-badge-content{background-color:var(--rt-aside-tab-badge-color)}.icon-badge.--incorrect .mat-badge-content,.title-badge.--incorrect .mat-badge-content{background-color:var(--rt-aside-tab-badge-incorrect-color)}.c-aside{position:relative;width:var(--rt-aside-host-width);height:100vh;max-height:100vh;background-color:var(--rt-aside-host-background-color);box-shadow:var(--rt-aside-host-box-shadow)}.c-aside .mdc-tab-indicator__content.mdc-tab-indicator__content--underline{width:var(--rt-aside-tab-indicator-width)}@media screen and (max-width:599px){.c-aside{width:100vw}}.c-aside-header{padding:var(--rt-aside-header-padding)}.c-aside-header .back-button{margin-right:var(--rt-aside-header-back-button-margin-right)}.c-aside-header .c-aside-title{display:flex;width:100%;height:100%;flex-direction:column;align-items:flex-start;justify-content:center}.c-aside-header .c-aside-title__descr{margin-bottom:var(--rt-aside-header-description-margin-bottom);color:var(--rt-aside-header-description-color);font-size:var(--rt-aside-header-description-font-size)}.c-aside-header .c-aside-title__txt{font-size:var(--rt-aside-header-title-font-size);font-weight:var(--rt-aside-header-title-font-weight);line-height:var(--rt-aside-header-title-line-height)}.c-aside-header .c-aside-title__addition{margin-top:var(--rt-aside-header-addition-margin-top);color:var(--rt-aside-header-addition-color);font-size:var(--rt-aside-header-addition-font-size)}.c-aside-header .c-aside-title__descr,.c-aside-header .c-aside-title__txt,.c-aside-header .c-aside-title__addition{overflow:hidden;width:100%;text-overflow:ellipsis;white-space:nowrap}.c-aside-header .c-aside-actions{margin-left:var(--rt-aside-header-actions-margin-left)}.c-aside-header .c-aside-actions__action{margin-left:var(--rt-aside-header-action-button-margin-left)}@media screen and (max-width:599px){.c-aside-header{padding:var(--rt-aside-header-mobile-padding)}}.c-aside-content{display:flex;width:100%;height:100%;flex-direction:column;align-items:center;justify-content:flex-start;padding:var(--rt-aside-content-padding)}.c-aside-content .mat-mdc-tab-header{position:sticky;z-index:1000;top:0;background:var(--rt-bg-base-base)}@media screen and (max-width:599px){.c-aside-content{padding:var(--rt-aside-content-mobile-padding)}}.c-aside-footer{display:flex;align-items:center;justify-content:flex-end;padding:var(--rt-aside-footer-padding)}.c-aside-footer .c-aside-footer-btn__title{text-transform:uppercase}.c-aside-footer .c-aside-footer-btn+.c-aside-footer-btn{margin-left:var(--rt-aside-footer-margin-left-between-buttons)}@media screen and (max-width:599px){.c-aside-footer{padding:var(--rt-aside-footer-mobile-padding)}}\n"], dependencies: [{ kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i1$4.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], animations: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiAsidePanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.5", type: RtuiAsidePanelComponent, isStandalone: true, selector: "rtui-aside-panel", host: { properties: { "@aside": "this._state" } }, ngImport: i0, template: "<div\n    class=\"c-aside\"\n    [class.position-left]=\"position === 'left'\"\n    [class.position-right]=\"position === 'right'\"\n    [class.full-screen]=\"isSmall$ | async\">\n    <ng-container *cdkPortalOutlet=\"portal\" />\n</div>\n", styles: ["@charset \"UTF-8\";:root{--rt-aside-host-width: 33.75rem;--rt-aside-host-box-shadow: 0 0 1rem 0 var(--rt-color-dark-a10);--rt-aside-host-background-color: var(--rt-bg-base-base);--rt-aside-header-padding: 2rem;--rt-aside-header-mobile-padding: 1rem;--rt-aside-header-back-button-margin-right: 1rem;--rt-aside-header-title-font-size: 1.5rem;--rt-aside-header-title-line-height: 1.1;--rt-aside-header-title-font-weight: 600;--rt-aside-header-description-font-size: 1rem;--rt-aside-header-description-margin-bottom: .25rem;--rt-aside-header-description-color: var(--rt-text-base-secondary);--rt-aside-header-addition-font-size: 1rem;--rt-aside-header-addition-margin-top: .25rem;--rt-aside-header-addition-color: var(--rt-text-base-secondary);--rt-aside-header-actions-margin-left: 1rem;--rt-aside-header-action-button-margin-left: .75rem;--rt-aside-content-padding: 0 2rem;--rt-aside-content-mobile-padding: 0 1rem;--rt-aside-footer-padding: 2rem;--rt-aside-footer-margin-left-between-buttons: 1rem;--rt-aside-footer-mobile-padding: 1rem;--rt-aside-error-box-height: 2rem;--rt-aside-error-box-padding: .5rem;--rt-aside-error-box-margin: 2rem 0 2rem 0;--rt-aside-error-box-border: 1px solid var(--rt-border-accent-danger-soft);--rt-aside-error-box-border-radius: .375rem;--rt-aside-error-box-title-font-size: 1rem;--rt-aside-error-box-title-font-color: var(--rt-text-accent-danger-soft);--rt-aside-error-box-button-font-size: 1rem;--rt-aside-error-box-button-font-color: var(--rt-text-base-strong);--rt-aside-tab-indicator-width: 6rem;--rt-aside-tab-badge-color: var(--mdc-filled-button-container-color);--rt-aside-tab-badge-incorrect-color: var(--rt-text-accent-danger);--rt-aside-footer-margin-left-betwen-buttons: var(--rt-aside-footer-margin-left-between-buttons)}.icon-badge{position:absolute!important}.title-badge{top:-.5rem;margin-left:var(--rt-spacing-4)}.icon-badge .mat-badge-content,.title-badge .mat-badge-content{background-color:var(--rt-aside-tab-badge-color)}.icon-badge.--incorrect .mat-badge-content,.title-badge.--incorrect .mat-badge-content{background-color:var(--rt-aside-tab-badge-incorrect-color)}.c-aside{position:relative;width:var(--rt-aside-host-width);height:100vh;max-height:100vh;background-color:var(--rt-aside-host-background-color);box-shadow:var(--rt-aside-host-box-shadow)}.c-aside .mdc-tab-indicator__content.mdc-tab-indicator__content--underline{width:var(--rt-aside-tab-indicator-width)}@media screen and (max-width:599px){.c-aside{width:100vw}}.c-aside-header{padding:var(--rt-aside-header-padding)}.c-aside-header .back-button{margin-right:var(--rt-aside-header-back-button-margin-right)}.c-aside-header .c-aside-title{display:flex;width:100%;height:100%;flex-direction:column;align-items:flex-start;justify-content:center}.c-aside-header .c-aside-title__descr{margin-bottom:var(--rt-aside-header-description-margin-bottom);color:var(--rt-aside-header-description-color);font-size:var(--rt-aside-header-description-font-size)}.c-aside-header .c-aside-title__txt{font-size:var(--rt-aside-header-title-font-size);font-weight:var(--rt-aside-header-title-font-weight);line-height:var(--rt-aside-header-title-line-height)}.c-aside-header .c-aside-title__addition{margin-top:var(--rt-aside-header-addition-margin-top);color:var(--rt-aside-header-addition-color);font-size:var(--rt-aside-header-addition-font-size)}.c-aside-header .c-aside-title__descr,.c-aside-header .c-aside-title__txt,.c-aside-header .c-aside-title__addition{overflow:hidden;width:100%;text-overflow:ellipsis;white-space:nowrap}.c-aside-header .c-aside-actions{margin-left:var(--rt-aside-header-actions-margin-left)}.c-aside-header .c-aside-actions__action{margin-left:var(--rt-aside-header-action-button-margin-left)}@media screen and (max-width:599px){.c-aside-header{padding:var(--rt-aside-header-mobile-padding)}}.c-aside-content{display:flex;width:100%;height:100%;flex-direction:column;align-items:center;justify-content:flex-start;padding:var(--rt-aside-content-padding)}.c-aside-content .mat-mdc-tab-header{position:sticky;z-index:1000;top:0;background:var(--rt-bg-base-base)}@media screen and (max-width:599px){.c-aside-content{padding:var(--rt-aside-content-mobile-padding)}}.c-aside-footer{display:flex;align-items:center;justify-content:flex-end;padding:var(--rt-aside-footer-padding)}.c-aside-footer .c-aside-footer-btn__title{text-transform:uppercase}.c-aside-footer .c-aside-footer-btn+.c-aside-footer-btn{margin-left:var(--rt-aside-footer-margin-left-between-buttons)}@media screen and (max-width:599px){.c-aside-footer{padding:var(--rt-aside-footer-mobile-padding)}}\n"], dependencies: [{ kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i1$4.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], animations: [
             trigger('aside', [
                 state('enter-left', style({ transform: 'none' })),
                 transition('* => enter-left', [
@@ -483,11 +490,11 @@ class RtuiAsidePanelComponent {
                 ]),
                 transition('enter-right => *', animate('200ms ease-in', style({ transform: 'translateX(100%)' }))),
             ]),
-        ], encapsulation: i0.ViewEncapsulation.None }); }
+        ], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtuiAsidePanelComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiAsidePanelComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rtui-aside-panel', encapsulation: ViewEncapsulation.None, imports: [AsyncPipe, PortalModule], animations: [
+            args: [{ selector: 'rtui-aside-panel', encapsulation: ViewEncapsulation.None, imports: [AsyncPipe, PortalModule], changeDetection: ChangeDetectionStrategy.Eager, animations: [
                         trigger('aside', [
                             state('enter-left', style({ transform: 'none' })),
                             transition('* => enter-left', [
@@ -598,38 +605,38 @@ class RtAsideService {
         });
         return new ComponentPortal(RtuiAsidePanelComponent, null, injector);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtAsideService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtAsideService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtAsideService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtAsideService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtAsideService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtAsideService, decorators: [{
             type: Injectable
         }] });
 
 class RtuiToolbarLeftDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtuiToolbarLeftDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.1", type: RtuiToolbarLeftDirective, isStandalone: true, selector: "[rtuiToolbarLeft]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiToolbarLeftDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: RtuiToolbarLeftDirective, isStandalone: true, selector: "[rtuiToolbarLeft]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtuiToolbarLeftDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiToolbarLeftDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rtuiToolbarLeft]',
                 }]
         }] });
 class RtuiToolbarCenterDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtuiToolbarCenterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.1", type: RtuiToolbarCenterDirective, isStandalone: true, selector: "[rtuiToolbarCenter]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiToolbarCenterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: RtuiToolbarCenterDirective, isStandalone: true, selector: "[rtuiToolbarCenter]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtuiToolbarCenterDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiToolbarCenterDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rtuiToolbarCenter]',
                 }]
         }] });
 class RtuiToolbarRightDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtuiToolbarRightDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.1", type: RtuiToolbarRightDirective, isStandalone: true, selector: "[rtuiToolbarRight]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiToolbarRightDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: RtuiToolbarRightDirective, isStandalone: true, selector: "[rtuiToolbarRight]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtuiToolbarRightDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiToolbarRightDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rtuiToolbarRight]',
@@ -637,16 +644,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
         }] });
 class RtuiToolbarComponent {
     constructor() {
-        this.isVisibleToolbar = input(true, { ...(ngDevMode ? { debugName: "isVisibleToolbar" } : {}) });
-        this.leftToolTpl = contentChild(RtuiToolbarLeftDirective, { ...(ngDevMode ? { debugName: "leftToolTpl" } : {}), read: TemplateRef });
-        this.centerToolTpl = contentChild(RtuiToolbarCenterDirective, { ...(ngDevMode ? { debugName: "centerToolTpl" } : {}), read: TemplateRef });
-        this.rightToolTpl = contentChild(RtuiToolbarRightDirective, { ...(ngDevMode ? { debugName: "rightToolTpl" } : {}), read: TemplateRef });
-        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: ["@charset \"UTF-8\";:host{--rt-toolbar-body-height: 3rem;--rt-toolbar-body-padding: 0 1rem;--rt-toolbar-body-background-color: transparent;--rt-toolbar-body-mobile-height: 3rem;--rt-toolbar-bars-border-bottom-style: solid;--rt-toolbar-bars-border-bottom-width: 1px;--rt-toolbar-bars-border-bottom-color: var(--rt-border-neutral-default);--rt-toolbar-bars-left-width: fit-content;--rt-toolbar-bars-center-width: 100%;--rt-toolbar-bars-right-width: fit-content;--mat-tab-header-divider-height: 0}:host .toolbar{--mat-toolbar-standard-height: var(--rt-toolbar-body-mobile-height);--mdc-secondary-navigation-tab-container-height: var(--rt-toolbar-body-mobile-height);height:var(--rt-toolbar-body-mobile-height);min-height:var(--rt-toolbar-body-mobile-height);padding:var(--rt-toolbar-body-padding);background-color:transparent}:host .toolbar--sticky{position:sticky;top:0}@media screen and (min-width:720px){:host .toolbar{--mat-toolbar-standard-height: var(--rt-toolbar-body-height);--mdc-secondary-navigation-tab-container-height: var(--rt-toolbar-body-height);height:var(--rt-toolbar-body-height);min-height:var(--rt-toolbar-body-height)}}:host .toolbar .bars{position:relative;display:flex;width:100%;height:100%;border-bottom:var(--rt-toolbar-bars-border-bottom-width) var(--rt-toolbar-bars-border-bottom-style) var(--rt-toolbar-bars-border-bottom-color);background-color:var(--rt-toolbar-body-background-color)}:host .toolbar .bars__bar--left{width:var(--rt-toolbar-bars-left-width)}:host .toolbar .bars__bar--center{overflow:hidden;width:var(--rt-toolbar-bars-center-width)}:host .toolbar .bars__bar--right{width:var(--rt-toolbar-bars-right-width)}:host .toolbar .bars__bar--left,:host .toolbar .bars__bar--center,:host .toolbar .bars__bar--right{display:flex;height:100%;align-items:center}\n"], dependencies: [{ kind: "component", type: MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }, { kind: "directive", type: ModDirective, selector: "[rtMod]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        this.isVisibleToolbar = input(true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isVisibleToolbar" }] : /* istanbul ignore next */ []));
+        this.leftToolTpl = contentChild(RtuiToolbarLeftDirective, { ...(ngDevMode ? { debugName: "leftToolTpl" } : /* istanbul ignore next */ {}), read: TemplateRef });
+        this.centerToolTpl = contentChild(RtuiToolbarCenterDirective, { ...(ngDevMode ? { debugName: "centerToolTpl" } : /* istanbul ignore next */ {}), read: TemplateRef });
+        this.rightToolTpl = contentChild(RtuiToolbarRightDirective, { ...(ngDevMode ? { debugName: "rightToolTpl" } : /* istanbul ignore next */ {}), read: TemplateRef });
+        this.sticky = input(false, { ...(ngDevMode ? { debugName: "sticky" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: RtuiToolbarComponent, isStandalone: true, selector: "rtui-toolbar", inputs: { isVisibleToolbar: { classPropertyName: "isVisibleToolbar", publicName: "isVisibleToolbar", isSignal: true, isRequired: false, transformFunction: null }, sticky: { classPropertyName: "sticky", publicName: "sticky", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "leftToolTpl", first: true, predicate: RtuiToolbarLeftDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "centerToolTpl", first: true, predicate: RtuiToolbarCenterDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "rightToolTpl", first: true, predicate: RtuiToolbarRightDirective, descendants: true, read: TemplateRef, isSignal: true }], ngImport: i0, template: "@if ((leftToolTpl() || centerToolTpl() || rightToolTpl()) && isVisibleToolbar()) {\n    <mat-toolbar rtBlock=\"toolbar\" [rtMod]=\"{ sticky: sticky() }\">\n        <div rtBlock=\"bars\">\n            @if (leftToolTpl()) {\n                <div rtElem=\"bar\" rtMod=\"left\">\n                    <ng-template *ngTemplateOutlet=\"leftToolTpl() ?? null\" />\n                </div>\n            }\n\n            <div rtElem=\"bar\" rtMod=\"center\">\n                <ng-template *ngTemplateOutlet=\"centerToolTpl() ?? null\" />\n            </div>\n\n            @if (rightToolTpl()) {\n                <div rtElem=\"bar\" rtMod=\"right\">\n                    <ng-template *ngTemplateOutlet=\"rightToolTpl() ?? null\" />\n                </div>\n            }\n        </div>\n    </mat-toolbar>\n}\n", styles: ["@charset \"UTF-8\";:host{--rt-toolbar-body-height: 3rem;--rt-toolbar-body-padding: 0 1rem;--rt-toolbar-body-background-color: transparent;--rt-toolbar-body-mobile-height: 3rem;--rt-toolbar-bars-border-bottom-style: solid;--rt-toolbar-bars-border-bottom-width: 1px;--rt-toolbar-bars-border-bottom-color: var(--rt-border-neutral-default);--rt-toolbar-bars-left-width: fit-content;--rt-toolbar-bars-center-width: 100%;--rt-toolbar-bars-right-width: fit-content;--mat-tab-header-divider-height: 0}:host .toolbar{--mat-toolbar-standard-height: var(--rt-toolbar-body-mobile-height);--mdc-secondary-navigation-tab-container-height: var(--rt-toolbar-body-mobile-height);height:var(--rt-toolbar-body-mobile-height);min-height:var(--rt-toolbar-body-mobile-height);padding:var(--rt-toolbar-body-padding);background-color:transparent}:host .toolbar--sticky{position:sticky;top:0}@media screen and (min-width:720px){:host .toolbar{--mat-toolbar-standard-height: var(--rt-toolbar-body-height);--mdc-secondary-navigation-tab-container-height: var(--rt-toolbar-body-height);height:var(--rt-toolbar-body-height);min-height:var(--rt-toolbar-body-height)}}:host .toolbar .bars{position:relative;display:flex;width:100%;height:100%;border-bottom:var(--rt-toolbar-bars-border-bottom-width) var(--rt-toolbar-bars-border-bottom-style) var(--rt-toolbar-bars-border-bottom-color);background-color:var(--rt-toolbar-body-background-color)}:host .toolbar .bars__bar--left{width:var(--rt-toolbar-bars-left-width)}:host .toolbar .bars__bar--center{overflow:hidden;width:var(--rt-toolbar-bars-center-width)}:host .toolbar .bars__bar--right{width:var(--rt-toolbar-bars-right-width)}:host .toolbar .bars__bar--left,:host .toolbar .bars__bar--center,:host .toolbar .bars__bar--right{display:flex;height:100%;align-items:center}\n"], dependencies: [{ kind: "component", type: MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }, { kind: "directive", type: ModDirective, selector: "[rtMod]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtuiToolbarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiToolbarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'rtui-toolbar', changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatToolbar, NgTemplateOutlet, BlockDirective, ElemDirective, ModDirective], template: "@if ((leftToolTpl() || centerToolTpl() || rightToolTpl()) && isVisibleToolbar()) {\n    <mat-toolbar rtBlock=\"toolbar\" [rtMod]=\"{ sticky: sticky() }\">\n        <div rtBlock=\"bars\">\n            @if (leftToolTpl()) {\n                <div rtElem=\"bar\" rtMod=\"left\">\n                    <ng-template *ngTemplateOutlet=\"leftToolTpl() ?? null\" />\n                </div>\n            }\n\n            <div rtElem=\"bar\" rtMod=\"center\">\n                <ng-template *ngTemplateOutlet=\"centerToolTpl() ?? null\" />\n            </div>\n\n            @if (rightToolTpl()) {\n                <div rtElem=\"bar\" rtMod=\"right\">\n                    <ng-template *ngTemplateOutlet=\"rightToolTpl() ?? null\" />\n                </div>\n            }\n        </div>\n    </mat-toolbar>\n}\n", styles: ["@charset \"UTF-8\";:host{--rt-toolbar-body-height: 3rem;--rt-toolbar-body-padding: 0 1rem;--rt-toolbar-body-background-color: transparent;--rt-toolbar-body-mobile-height: 3rem;--rt-toolbar-bars-border-bottom-style: solid;--rt-toolbar-bars-border-bottom-width: 1px;--rt-toolbar-bars-border-bottom-color: var(--rt-border-neutral-default);--rt-toolbar-bars-left-width: fit-content;--rt-toolbar-bars-center-width: 100%;--rt-toolbar-bars-right-width: fit-content;--mat-tab-header-divider-height: 0}:host .toolbar{--mat-toolbar-standard-height: var(--rt-toolbar-body-mobile-height);--mdc-secondary-navigation-tab-container-height: var(--rt-toolbar-body-mobile-height);height:var(--rt-toolbar-body-mobile-height);min-height:var(--rt-toolbar-body-mobile-height);padding:var(--rt-toolbar-body-padding);background-color:transparent}:host .toolbar--sticky{position:sticky;top:0}@media screen and (min-width:720px){:host .toolbar{--mat-toolbar-standard-height: var(--rt-toolbar-body-height);--mdc-secondary-navigation-tab-container-height: var(--rt-toolbar-body-height);height:var(--rt-toolbar-body-height);min-height:var(--rt-toolbar-body-height)}}:host .toolbar .bars{position:relative;display:flex;width:100%;height:100%;border-bottom:var(--rt-toolbar-bars-border-bottom-width) var(--rt-toolbar-bars-border-bottom-style) var(--rt-toolbar-bars-border-bottom-color);background-color:var(--rt-toolbar-body-background-color)}:host .toolbar .bars__bar--left{width:var(--rt-toolbar-bars-left-width)}:host .toolbar .bars__bar--center{overflow:hidden;width:var(--rt-toolbar-bars-center-width)}:host .toolbar .bars__bar--right{width:var(--rt-toolbar-bars-right-width)}:host .toolbar .bars__bar--left,:host .toolbar .bars__bar--center,:host .toolbar .bars__bar--right{display:flex;height:100%;align-items:center}\n"] }]
         }], propDecorators: { isVisibleToolbar: [{ type: i0.Input, args: [{ isSignal: true, alias: "isVisibleToolbar", required: false }] }], leftToolTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => RtuiToolbarLeftDirective), { ...{
@@ -660,8 +668,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
 class AsideErrorBoxComponent {
     constructor() {
         this.#clipboard = inject(Clipboard);
-        this.error = input.required({ ...(ngDevMode ? { debugName: "error" } : {}) });
-        this.isErrorCopied = signal(false, { ...(ngDevMode ? { debugName: "isErrorCopied" } : {}) });
+        this.error = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
+        this.isErrorCopied = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isErrorCopied" }] : /* istanbul ignore next */ []));
     }
     #clipboard;
     onCopyToClipboard() {
@@ -670,12 +680,12 @@ class AsideErrorBoxComponent {
         this.isErrorCopied.set(true);
         setTimeout(() => this.isErrorCopied.set(false), 1000);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: AsideErrorBoxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: AsideErrorBoxComponent, isStandalone: true, selector: "rtui-aside-error-box", inputs: { error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div rtBlock=\"aside-error-box\">\n    <div rtElem=\"title\">Request Error</div>\n\n    <button\n        type=\"button\"\n        rtBlock=\"aside-error-box-button\"\n        class=\"c-button c-button--txt-base--size-sm\"\n        [class.--complete]=\"isErrorCopied()\"\n        (click)=\"onCopyToClipboard()\">\n        @if (isErrorCopied()) {\n            <mat-icon rtElem=\"icon\">done</mat-icon>\n        }\n\n        <div rtElem=\"title\">{{ isErrorCopied() ? 'Copied' : 'Copy error info' }}</div>\n    </button>\n</div>\n", styles: [":host{display:flex;width:100%}:host .aside-error-box{display:flex;width:100%;height:var(--rt-aside-error-box-height);align-items:center;justify-content:space-between;padding:var(--rt-aside-error-box-padding);border:var(--rt-aside-error-box-border);border-radius:var(--rt-aside-error-box-border-radius);margin:var(--rt-aside-error-box-margin)}:host .aside-error-box__title{color:var(--rt-aside-error-box-title-font-color);font-size:var(--rt-aside-error-box-title-font-size)}:host .aside-error-box .aside-error-box-button__icon{margin-right:var(--rt-spacing-8)}:host .aside-error-box .aside-error-box-button__title{color:var(--rt-aside-error-box-button-font-color);font-size:var(--rt-aside-error-box-button-font-size)}:host .aside-error-box .aside-error-box-button.--complete{background-color:transparent;cursor:not-allowed}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: 
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: AsideErrorBoxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: AsideErrorBoxComponent, isStandalone: true, selector: "rtui-aside-error-box", inputs: { error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div rtBlock=\"aside-error-box\">\n    <div rtElem=\"title\">Request Error</div>\n\n    <button\n        type=\"button\"\n        rtBlock=\"aside-error-box-button\"\n        class=\"c-button c-button--txt-base--size-sm\"\n        [class.--complete]=\"isErrorCopied()\"\n        (click)=\"onCopyToClipboard()\">\n        @if (isErrorCopied()) {\n            <mat-icon rtElem=\"icon\">done</mat-icon>\n        }\n\n        <div rtElem=\"title\">{{ isErrorCopied() ? 'Copied' : 'Copy error info' }}</div>\n    </button>\n</div>\n", styles: [":host{display:flex;width:100%}:host .aside-error-box{display:flex;width:100%;height:var(--rt-aside-error-box-height);align-items:center;justify-content:space-between;padding:var(--rt-aside-error-box-padding);border:var(--rt-aside-error-box-border);border-radius:var(--rt-aside-error-box-border-radius);margin:var(--rt-aside-error-box-margin)}:host .aside-error-box__title{color:var(--rt-aside-error-box-title-font-color);font-size:var(--rt-aside-error-box-title-font-size)}:host .aside-error-box .aside-error-box-button__icon{margin-right:var(--rt-spacing-8)}:host .aside-error-box .aside-error-box-button__title{color:var(--rt-aside-error-box-button-font-color);font-size:var(--rt-aside-error-box-button-font-size)}:host .aside-error-box .aside-error-box-button.--complete{background-color:transparent;cursor:not-allowed}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: 
                 // bem
                 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: AsideErrorBoxComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: AsideErrorBoxComponent, decorators: [{
             type: Component,
             args: [{ selector: 'rtui-aside-error-box', imports: [
                         MatIcon,
@@ -687,10 +697,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
         }], propDecorators: { error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: true }] }] } });
 
 class RtuiAsideContainerHeaderDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtuiAsideContainerHeaderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.1", type: RtuiAsideContainerHeaderDirective, isStandalone: true, selector: "[rtuiAsideHeader]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiAsideContainerHeaderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: RtuiAsideContainerHeaderDirective, isStandalone: true, selector: "[rtuiAsideHeader]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtuiAsideContainerHeaderDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiAsideContainerHeaderDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rtuiAsideHeader]',
@@ -698,21 +708,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
         }] });
 class RtuiAsideContainerComponent {
     constructor() {
-        this.title = input(null, { ...(ngDevMode ? { debugName: "title" } : {}) });
-        this.isMobile = input.required({ ...(ngDevMode ? { debugName: "isMobile" } : {}), transform: booleanAttribute });
-        this.isSubmitButtonDisabled = input.required({ ...(ngDevMode ? { debugName: "isSubmitButtonDisabled" } : {}), transform: booleanAttribute });
-        this.isFooterShown = input(true, { ...(ngDevMode ? { debugName: "isFooterShown" } : {}), transform: booleanAttribute });
-        this.pending = input(false, { ...(ngDevMode ? { debugName: "pending" } : {}), transform: booleanAttribute });
-        this.isRequestErrorShown = input(false, { ...(ngDevMode ? { debugName: "isRequestErrorShown" } : {}), transform: booleanAttribute });
-        this.headerActionsButtons = input([], { ...(ngDevMode ? { debugName: "headerActionsButtons" } : {}), transform: (value) => transformArrayInput(value) });
-        this.requestError = input(null, { ...(ngDevMode ? { debugName: "requestError" } : {}) });
-        this.submitButtonTitle = input('Save', { ...(ngDevMode ? { debugName: "submitButtonTitle" } : {}) });
-        this.cancelButtonTitle = input('Discard Changes', { ...(ngDevMode ? { debugName: "cancelButtonTitle" } : {}) });
-        this.submitButtonTooltip = input('', { ...(ngDevMode ? { debugName: "submitButtonTooltip" } : {}) });
+        this.title = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+        this.isMobile = input.required({ ...(ngDevMode ? { debugName: "isMobile" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.isSubmitButtonDisabled = input.required({ ...(ngDevMode ? { debugName: "isSubmitButtonDisabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.isFooterShown = input(true, { ...(ngDevMode ? { debugName: "isFooterShown" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.pending = input(false, { ...(ngDevMode ? { debugName: "pending" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.isRequestErrorShown = input(false, { ...(ngDevMode ? { debugName: "isRequestErrorShown" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.headerActionsButtons = input([], { ...(ngDevMode ? { debugName: "headerActionsButtons" } : /* istanbul ignore next */ {}), transform: (value) => transformArrayInput(value) });
+        this.requestError = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "requestError" }] : /* istanbul ignore next */ []));
+        this.submitButtonTitle = input('Save', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "submitButtonTitle" }] : /* istanbul ignore next */ []));
+        this.cancelButtonTitle = input('Discard Changes', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "cancelButtonTitle" }] : /* istanbul ignore next */ []));
+        this.submitButtonTooltip = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "submitButtonTooltip" }] : /* istanbul ignore next */ []));
         this.submitAction = output();
         this.cancelAction = output();
         this.headerAction = output();
-        this.headerTpl = contentChild(RtuiAsideContainerHeaderDirective, { ...(ngDevMode ? { debugName: "headerTpl" } : {}), read: TemplateRef });
+        this.headerTpl = contentChild(RtuiAsideContainerHeaderDirective, { ...(ngDevMode ? { debugName: "headerTpl" } : /* istanbul ignore next */ {}), read: TemplateRef });
     }
     onSubmit() {
         this.submitAction.emit();
@@ -723,8 +738,8 @@ class RtuiAsideContainerComponent {
     onHeaderActionClick(buttonName) {
         this.headerAction.emit(buttonName);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtuiAsideContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: RtuiAsideContainerComponent, isStandalone: true, selector: "rtui-aside-container", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, isMobile: { classPropertyName: "isMobile", publicName: "isMobile", isSignal: true, isRequired: true, transformFunction: null }, isSubmitButtonDisabled: { classPropertyName: "isSubmitButtonDisabled", publicName: "isSubmitButtonDisabled", isSignal: true, isRequired: true, transformFunction: null }, isFooterShown: { classPropertyName: "isFooterShown", publicName: "isFooterShown", isSignal: true, isRequired: false, transformFunction: null }, pending: { classPropertyName: "pending", publicName: "pending", isSignal: true, isRequired: false, transformFunction: null }, isRequestErrorShown: { classPropertyName: "isRequestErrorShown", publicName: "isRequestErrorShown", isSignal: true, isRequired: false, transformFunction: null }, headerActionsButtons: { classPropertyName: "headerActionsButtons", publicName: "headerActionsButtons", isSignal: true, isRequired: false, transformFunction: null }, requestError: { classPropertyName: "requestError", publicName: "requestError", isSignal: true, isRequired: false, transformFunction: null }, submitButtonTitle: { classPropertyName: "submitButtonTitle", publicName: "submitButtonTitle", isSignal: true, isRequired: false, transformFunction: null }, cancelButtonTitle: { classPropertyName: "cancelButtonTitle", publicName: "cancelButtonTitle", isSignal: true, isRequired: false, transformFunction: null }, submitButtonTooltip: { classPropertyName: "submitButtonTooltip", publicName: "submitButtonTooltip", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { submitAction: "submitAction", cancelAction: "cancelAction", headerAction: "headerAction" }, host: { classAttribute: "c-aside" }, queries: [{ propertyName: "headerTpl", first: true, predicate: RtuiAsideContainerHeaderDirective, descendants: true, read: TemplateRef, isSignal: true }], ngImport: i0, template: "@if (pending()) {\n    <rtui-spinner [showBackground]=\"true\" />\n}\n\n<rtui-scrollable cdkTrapFocus [cdkTrapFocusAutoCapture]=\"true\">\n    <ng-container *rtuiScrollableHeader>\n        <div rtBlock=\"c-aside-header\">\n            <rtui-toolbar>\n                <ng-container *rtuiToolbarLeft>\n                    <button\n                        rtBlock=\"back-button\"\n                        aria-label=\"Icon-button\"\n                        mat-icon-button\n                        matTooltip=\"Go back\"\n                        matTooltipClass=\"custom-tooltip\"\n                        matTooltipPosition=\"below\"\n                        [matTooltipDisabled]=\"isMobile()\"\n                        [disableRipple]=\"true\"\n                        (click)=\"onCancel()\">\n                        <mat-icon>arrow_back</mat-icon>\n                    </button>\n                </ng-container>\n\n                <ng-container *rtuiToolbarCenter>\n                    <div rtBlock=\"c-aside-title\">\n                        @if (headerTpl()) {\n                            <ng-container *ngTemplateOutlet=\"headerTpl() ?? null\" />\n                        } @else {\n                            {{ title() }}\n                        }\n                    </div>\n                </ng-container>\n\n                <ng-container *rtuiToolbarRight>\n                    <div rtBlock=\"c-aside-actions\">\n                        @if (headerActionsButtons()?.length) {\n                            @for (button of headerActionsButtons(); track button) {\n                                <button\n                                    rtElem=\"action\"\n                                    aria-label=\"Icon-button\"\n                                    mat-icon-button\n                                    matTooltipClass=\"custom-tooltip\"\n                                    matTooltipPosition=\"left\"\n                                    [matTooltip]=\"button.tooltip\"\n                                    [matTooltipDisabled]=\"isMobile()\"\n                                    [disableRipple]=\"true\"\n                                    [disabled]=\"button?.disabled\"\n                                    (click)=\"onHeaderActionClick(button.name)\">\n                                    <mat-icon [style.color]=\"button.color\">{{ button.icon }}</mat-icon>\n                                </button>\n                            }\n                        }\n                    </div>\n                </ng-container>\n            </rtui-toolbar>\n\n            @if (isRequestErrorShown()) {\n                <rtui-aside-error-box [error]=\"requestError()\" />\n            }\n        </div>\n    </ng-container>\n\n    <ng-container *rtuiScrollableContent>\n        <div rtBlock=\"c-aside-content\">\n            <ng-content />\n        </div>\n    </ng-container>\n\n    @if (isFooterShown()) {\n        <ng-container *rtuiScrollableFooter>\n            <div rtBlock=\"c-aside-footer\">\n                <div rtBlock=\"c-aside-footer-btn\">\n                    <button cdkFocusInitial mat-button type=\"button\" (click)=\"onCancel()\">\n                        {{ cancelButtonTitle() }}\n                    </button>\n                </div>\n\n                <div rtBlock=\"c-aside-footer-btn\">\n                    <button\n                        mat-flat-button\n                        type=\"button\"\n                        matTooltipClass=\"custom-tooltip\"\n                        matTooltipPosition=\"left\"\n                        [matTooltip]=\"submitButtonTooltip()\"\n                        [matTooltipDisabled]=\"!isSubmitButtonDisabled() || isMobile()\"\n                        [disabled]=\"isSubmitButtonDisabled()\"\n                        (click)=\"onSubmit()\">\n                        <div rtElem=\"title\">{{ submitButtonTitle() }}</div>\n                    </button>\n                </div>\n            </div>\n        </ng-container>\n    }\n</rtui-scrollable>\n", styles: [":host rtui-scrollable{--rt-scrollable-header-padding: 0;--rt-scrollable-content-padding: 0;--rt-scrollable-footer-padding: 0;--rt-scrollable-content-flex-direction: row}@supports (height: 100dvh){:host rtui-scrollable{--rt-scrollable-host-height: 100dvh}}:host rtui-toolbar{--rt-toolbar-body-height: 6rem;--rt-toolbar-body-mobile-height: 6rem;--rt-toolbar-body-padding: 0;--rt-toolbar-bars-border-bottom-width: 0}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: 
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiAsideContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: RtuiAsideContainerComponent, isStandalone: true, selector: "rtui-aside-container", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, isMobile: { classPropertyName: "isMobile", publicName: "isMobile", isSignal: true, isRequired: true, transformFunction: null }, isSubmitButtonDisabled: { classPropertyName: "isSubmitButtonDisabled", publicName: "isSubmitButtonDisabled", isSignal: true, isRequired: true, transformFunction: null }, isFooterShown: { classPropertyName: "isFooterShown", publicName: "isFooterShown", isSignal: true, isRequired: false, transformFunction: null }, pending: { classPropertyName: "pending", publicName: "pending", isSignal: true, isRequired: false, transformFunction: null }, isRequestErrorShown: { classPropertyName: "isRequestErrorShown", publicName: "isRequestErrorShown", isSignal: true, isRequired: false, transformFunction: null }, headerActionsButtons: { classPropertyName: "headerActionsButtons", publicName: "headerActionsButtons", isSignal: true, isRequired: false, transformFunction: null }, requestError: { classPropertyName: "requestError", publicName: "requestError", isSignal: true, isRequired: false, transformFunction: null }, submitButtonTitle: { classPropertyName: "submitButtonTitle", publicName: "submitButtonTitle", isSignal: true, isRequired: false, transformFunction: null }, cancelButtonTitle: { classPropertyName: "cancelButtonTitle", publicName: "cancelButtonTitle", isSignal: true, isRequired: false, transformFunction: null }, submitButtonTooltip: { classPropertyName: "submitButtonTooltip", publicName: "submitButtonTooltip", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { submitAction: "submitAction", cancelAction: "cancelAction", headerAction: "headerAction" }, host: { classAttribute: "c-aside" }, queries: [{ propertyName: "headerTpl", first: true, predicate: RtuiAsideContainerHeaderDirective, descendants: true, read: TemplateRef, isSignal: true }], ngImport: i0, template: "@if (pending()) {\n    <rtui-spinner [showBackground]=\"true\" />\n}\n\n<rtui-scrollable cdkTrapFocus [cdkTrapFocusAutoCapture]=\"true\">\n    <ng-container *rtuiScrollableHeader>\n        <div rtBlock=\"c-aside-header\">\n            <rtui-toolbar>\n                <ng-container *rtuiToolbarLeft>\n                    <button\n                        rtBlock=\"back-button\"\n                        aria-label=\"Icon-button\"\n                        mat-icon-button\n                        matTooltip=\"Go back\"\n                        matTooltipClass=\"custom-tooltip\"\n                        matTooltipPosition=\"below\"\n                        [matTooltipDisabled]=\"isMobile()\"\n                        [disableRipple]=\"true\"\n                        (click)=\"onCancel()\">\n                        <mat-icon>arrow_back</mat-icon>\n                    </button>\n                </ng-container>\n\n                <ng-container *rtuiToolbarCenter>\n                    <div rtBlock=\"c-aside-title\">\n                        @if (headerTpl()) {\n                            <ng-container *ngTemplateOutlet=\"headerTpl() ?? null\" />\n                        } @else {\n                            {{ title() }}\n                        }\n                    </div>\n                </ng-container>\n\n                <ng-container *rtuiToolbarRight>\n                    <div rtBlock=\"c-aside-actions\">\n                        @if (headerActionsButtons()?.length) {\n                            @for (button of headerActionsButtons(); track button) {\n                                <button\n                                    rtElem=\"action\"\n                                    aria-label=\"Icon-button\"\n                                    mat-icon-button\n                                    matTooltipClass=\"custom-tooltip\"\n                                    matTooltipPosition=\"left\"\n                                    [matTooltip]=\"button.tooltip\"\n                                    [matTooltipDisabled]=\"isMobile()\"\n                                    [disableRipple]=\"true\"\n                                    [disabled]=\"button?.disabled\"\n                                    (click)=\"onHeaderActionClick(button.name)\">\n                                    <mat-icon [style.color]=\"button.color\">{{ button.icon }}</mat-icon>\n                                </button>\n                            }\n                        }\n                    </div>\n                </ng-container>\n            </rtui-toolbar>\n\n            @if (isRequestErrorShown()) {\n                <rtui-aside-error-box [error]=\"requestError()\" />\n            }\n        </div>\n    </ng-container>\n\n    <ng-container *rtuiScrollableContent>\n        <div rtBlock=\"c-aside-content\">\n            <ng-content />\n        </div>\n    </ng-container>\n\n    @if (isFooterShown()) {\n        <ng-container *rtuiScrollableFooter>\n            <div rtBlock=\"c-aside-footer\">\n                <div rtBlock=\"c-aside-footer-btn\">\n                    <button cdkFocusInitial mat-button type=\"button\" (click)=\"onCancel()\">\n                        {{ cancelButtonTitle() }}\n                    </button>\n                </div>\n\n                <div rtBlock=\"c-aside-footer-btn\">\n                    <button\n                        mat-flat-button\n                        type=\"button\"\n                        matTooltipClass=\"custom-tooltip\"\n                        matTooltipPosition=\"left\"\n                        [matTooltip]=\"submitButtonTooltip()\"\n                        [matTooltipDisabled]=\"!isSubmitButtonDisabled() || isMobile()\"\n                        [disabled]=\"isSubmitButtonDisabled()\"\n                        (click)=\"onSubmit()\">\n                        <div rtElem=\"title\">{{ submitButtonTitle() }}</div>\n                    </button>\n                </div>\n            </div>\n        </ng-container>\n    }\n</rtui-scrollable>\n", styles: [":host rtui-scrollable{--rt-scrollable-header-padding: 0;--rt-scrollable-content-padding: 0;--rt-scrollable-footer-padding: 0;--rt-scrollable-content-flex-direction: row}@supports (height: 100dvh){:host rtui-scrollable{--rt-scrollable-host-height: 100dvh}}:host rtui-toolbar{--rt-toolbar-body-height: 6rem;--rt-toolbar-body-mobile-height: 6rem;--rt-toolbar-body-padding: 0;--rt-toolbar-bars-border-bottom-width: 0}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: 
                 // material
                 MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: 
                 // standalone components
@@ -734,7 +749,7 @@ class RtuiAsideContainerComponent {
                 // bem
                 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: RtuiAsideContainerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiAsideContainerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'rtui-aside-container', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         RouterLink,
@@ -796,7 +811,8 @@ const RT_UI_CONFIG = new InjectionToken('RT_UI_CONFIG', {
 });
 
 const MATERIAL_SYMBOLS_FONT = 'Material Symbols Outlined';
-const fontLoaded = signal(false, { ...(ngDevMode ? { debugName: "fontLoaded" } : {}) });
+const fontLoaded = signal(false, /* @ts-ignore */
+...(ngDevMode ? [{ debugName: "fontLoaded" }] : /* istanbul ignore next */ []));
 class RtuiIconComponent {
     #document;
     constructor() {
@@ -811,12 +827,15 @@ class RtuiIconComponent {
                 classes.push('rtui-icon--loading');
             }
             return classes.join(' ');
-        }, { ...(ngDevMode ? { debugName: "hostClasses" } : {}) });
-        this.size = input('md', { ...(ngDevMode ? { debugName: "size" } : {}) });
-        this.theme = input('inherit', { ...(ngDevMode ? { debugName: "theme" } : {}) });
-        this.glyph = input('', { ...(ngDevMode ? { debugName: "glyph" } : {}), transform: transformStringInput });
-        this.outlined = input(true, { ...(ngDevMode ? { debugName: "outlined" } : {}), transform: booleanAttribute });
-        this.rotate = input(false, { ...(ngDevMode ? { debugName: "rotate" } : {}), transform: booleanAttribute });
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
+        this.size = input('md', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+        this.theme = input('inherit', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "theme" }] : /* istanbul ignore next */ []));
+        this.glyph = input('', { ...(ngDevMode ? { debugName: "glyph" } : /* istanbul ignore next */ {}), transform: transformStringInput });
+        this.outlined = input(true, { ...(ngDevMode ? { debugName: "outlined" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.rotate = input(false, { ...(ngDevMode ? { debugName: "rotate" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         if (!fontLoaded()) {
             this.#checkFontLoaded();
         }
@@ -831,14 +850,14 @@ class RtuiIconComponent {
             fontLoaded.set(true);
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtuiIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: RtuiIconComponent, isStandalone: true, selector: "rtui-icon", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, theme: { classPropertyName: "theme", publicName: "theme", isSignal: true, isRequired: false, transformFunction: null }, glyph: { classPropertyName: "glyph", publicName: "glyph", isSignal: true, isRequired: false, transformFunction: null }, outlined: { classPropertyName: "outlined", publicName: "outlined", isSignal: true, isRequired: false, transformFunction: null }, rotate: { classPropertyName: "rotate", publicName: "rotate", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()" }, classAttribute: "rtui-icon" }, hostDirectives: [{ directive: i1$5.MatTooltip, inputs: ["matTooltip", "tooltip", "matTooltipPosition", "tooltipPosition", "matTooltipDisabled", "tooltipDisabled"] }], ngImport: i0, template: "<mat-icon [rtIconOutlined]=\"outlined()\">\n    @if (glyph()) {\n        {{ glyph() }}\n    } @else {\n        <ng-content />\n    }\n</mat-icon>\n", styles: [".rtui-icon{display:inline-flex;align-items:center;justify-content:center}.rtui-icon--loading{visibility:hidden}.rtui-icon--rotate{animation:rt-icon-rotation 1s linear infinite}.rtui-icon .mat-icon{width:inherit;height:inherit;color:inherit;font-size:inherit}.rtui-icon--size-xs{width:.875rem;height:.875rem;font-size:.875rem}.rtui-icon--size-sm{width:1rem;height:1rem;font-size:1rem}.rtui-icon--size-md{width:1.5rem;height:1.5rem;font-size:1.5rem}.rtui-icon--size-lg{width:2rem;height:2rem;font-size:2rem}.rtui-icon--size-xl{width:2.5rem;height:2.5rem;font-size:2.5rem}.rtui-icon--size-xxl{width:3rem;height:3rem;font-size:3rem}.rtui-icon--size-3xl{width:3.5rem;height:3.5rem;font-size:3.5rem}.rtui-icon--theme-inherit{color:inherit}.rtui-icon--theme-primary,.rtui-icon--theme-primary-strong{color:var(--rt-icon-accent-primary)}.rtui-icon--theme-neutral{color:var(--rt-icon-neutral-soft)}.rtui-icon--theme-disabled{color:var(--rt-icon-neutral-disabled)}.rtui-icon--theme-muted{color:var(--rt-icon-neutral-soft)}.rtui-icon--theme-white{color:var(--rt-icon-static-light)}.rtui-icon--theme-danger{color:var(--rt-icon-accent-danger)}.rtui-icon--theme-success{color:var(--rt-icon-accent-success)}.rtui-button--appearance-text .rtui-icon{width:1.375rem;height:1.375rem;font-size:1.375rem}\n"], dependencies: [{ kind: "component", type: 
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: RtuiIconComponent, isStandalone: true, selector: "rtui-icon", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, theme: { classPropertyName: "theme", publicName: "theme", isSignal: true, isRequired: false, transformFunction: null }, glyph: { classPropertyName: "glyph", publicName: "glyph", isSignal: true, isRequired: false, transformFunction: null }, outlined: { classPropertyName: "outlined", publicName: "outlined", isSignal: true, isRequired: false, transformFunction: null }, rotate: { classPropertyName: "rotate", publicName: "rotate", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()" }, classAttribute: "rtui-icon" }, hostDirectives: [{ directive: i1$5.MatTooltip, inputs: ["matTooltip", "tooltip", "matTooltipPosition", "tooltipPosition", "matTooltipDisabled", "tooltipDisabled"] }], ngImport: i0, template: "<mat-icon [rtIconOutlined]=\"outlined()\">\n    @if (glyph()) {\n        {{ glyph() }}\n    } @else {\n        <ng-content />\n    }\n</mat-icon>\n", styles: [".rtui-icon{display:inline-flex;align-items:center;justify-content:center}.rtui-icon--loading{visibility:hidden}.rtui-icon--rotate{animation:rt-icon-rotation 1s linear infinite}.rtui-icon .mat-icon{width:inherit;height:inherit;color:inherit;font-size:inherit}.rtui-icon--size-xs{width:.875rem;height:.875rem;font-size:.875rem}.rtui-icon--size-sm{width:1rem;height:1rem;font-size:1rem}.rtui-icon--size-md{width:1.5rem;height:1.5rem;font-size:1.5rem}.rtui-icon--size-lg{width:2rem;height:2rem;font-size:2rem}.rtui-icon--size-xl{width:2.5rem;height:2.5rem;font-size:2.5rem}.rtui-icon--size-xxl{width:3rem;height:3rem;font-size:3rem}.rtui-icon--size-3xl{width:3.5rem;height:3.5rem;font-size:3.5rem}.rtui-icon--theme-inherit{color:inherit}.rtui-icon--theme-primary,.rtui-icon--theme-primary-strong{color:var(--rt-icon-accent-primary)}.rtui-icon--theme-neutral{color:var(--rt-icon-neutral-soft)}.rtui-icon--theme-disabled{color:var(--rt-icon-neutral-disabled)}.rtui-icon--theme-muted{color:var(--rt-icon-neutral-soft)}.rtui-icon--theme-white{color:var(--rt-icon-static-light)}.rtui-icon--theme-danger{color:var(--rt-icon-accent-danger)}.rtui-icon--theme-success{color:var(--rt-icon-accent-success)}.rtui-button--appearance-text .rtui-icon{width:1.375rem;height:1.375rem;font-size:1.375rem}\n"], dependencies: [{ kind: "component", type: 
                 // material
                 MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: 
                 // directives
                 RtIconOutlinedDirective, selector: "mat-icon[rtIconOutlined]", inputs: ["rtIconOutlined"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtuiIconComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiIconComponent, decorators: [{
             type: Component,
             args: [{ selector: 'rtui-icon', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [
                         // material
@@ -862,10 +881,14 @@ class RtuiButtonComponent {
         this.#config = inject(RT_UI_CONFIG);
         this.#buttonConfig = this.#config.components?.button;
         /** Design system the button renders with — see {@link RtUiDesign}. */
-        this.resolvedDesign = computed(() => this.design() ?? this.#buttonConfig?.design ?? this.#config.global?.design ?? 'custom', { ...(ngDevMode ? { debugName: "resolvedDesign" } : {}) });
-        this.resolvedSize = computed(() => this.size() ?? this.#buttonConfig?.size ?? 'md', { ...(ngDevMode ? { debugName: "resolvedSize" } : {}) });
-        this.resolvedRadius = computed(() => this.radius() ?? this.#buttonConfig?.radius ?? 'full', { ...(ngDevMode ? { debugName: "resolvedRadius" } : {}) });
-        this.resolvedAppearance = computed(() => this.appearance() ?? this.#buttonConfig?.appearance, { ...(ngDevMode ? { debugName: "resolvedAppearance" } : {}) });
+        this.resolvedDesign = computed(() => this.design() ?? this.#buttonConfig?.design ?? this.#config.global?.design ?? 'custom', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "resolvedDesign" }] : /* istanbul ignore next */ []));
+        this.resolvedSize = computed(() => this.size() ?? this.#buttonConfig?.size ?? 'md', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "resolvedSize" }] : /* istanbul ignore next */ []));
+        this.resolvedRadius = computed(() => this.radius() ?? this.#buttonConfig?.radius ?? 'full', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "resolvedRadius" }] : /* istanbul ignore next */ []));
+        this.resolvedAppearance = computed(() => this.appearance() ?? this.#buttonConfig?.appearance, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "resolvedAppearance" }] : /* istanbul ignore next */ []));
         /** Native Material button appearance the pill renders with under `design: 'material'`. */
         this.materialAppearance = computed(() => {
             const appearanceMap = {
@@ -875,7 +898,8 @@ class RtuiButtonComponent {
                 text: 'text',
             };
             return appearanceMap[this.resolvedAppearance() ?? 'solid'];
-        }, { ...(ngDevMode ? { debugName: "materialAppearance" } : {}) });
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "materialAppearance" }] : /* istanbul ignore next */ []));
         this.resolvedIconSize = computed(() => {
             const iconSize = this.iconSize();
             if (iconSize) {
@@ -888,7 +912,8 @@ class RtuiButtonComponent {
                 lg: 'md',
             };
             return sizeMap[this.resolvedSize()];
-        }, { ...(ngDevMode ? { debugName: "resolvedIconSize" } : {}) });
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "resolvedIconSize" }] : /* istanbul ignore next */ []));
         this.spinnerSize = computed(() => {
             const sizeMap = {
                 xs: 12,
@@ -897,7 +922,8 @@ class RtuiButtonComponent {
                 lg: 24,
             };
             return this.spinnerDiameter() ?? sizeMap[this.resolvedSize()];
-        }, { ...(ngDevMode ? { debugName: "spinnerSize" } : {}) });
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "spinnerSize" }] : /* istanbul ignore next */ []));
         this.modifiers = computed(() => ({
             [`type-${this.type()}`]: true,
             [`design-${this.resolvedDesign()}`]: true,
@@ -907,22 +933,32 @@ class RtuiButtonComponent {
             [`appearance-${this.resolvedAppearance()}`]: !!this.resolvedAppearance(),
             loading: this.loading(),
             disabled: this.disabled(),
-        }), { ...(ngDevMode ? { debugName: "modifiers" } : {}) });
-        this.type = input('icon', { ...(ngDevMode ? { debugName: "type" } : {}) });
-        this.design = input(undefined, { ...(ngDevMode ? { debugName: "design" } : {}) });
-        this.variant = input('default', { ...(ngDevMode ? { debugName: "variant" } : {}) });
-        this.appearance = input(undefined, { ...(ngDevMode ? { debugName: "appearance" } : {}) });
-        this.size = input(undefined, { ...(ngDevMode ? { debugName: "size" } : {}) });
-        this.radius = input(undefined, { ...(ngDevMode ? { debugName: "radius" } : {}) });
-        this.icon = input('', { ...(ngDevMode ? { debugName: "icon" } : {}), transform: transformStringInput });
-        this.iconPosition = input('start', { ...(ngDevMode ? { debugName: "iconPosition" } : {}) });
-        this.iconSize = input(undefined, { ...(ngDevMode ? { debugName: "iconSize" } : {}) });
-        this.text = input('', { ...(ngDevMode ? { debugName: "text" } : {}), transform: transformStringInput });
-        this.loading = input(false, { ...(ngDevMode ? { debugName: "loading" } : {}), transform: booleanAttribute });
-        this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : {}), transform: booleanAttribute });
-        this.outlined = input(true, { ...(ngDevMode ? { debugName: "outlined" } : {}), transform: booleanAttribute });
-        this.fullWidth = input(false, { ...(ngDevMode ? { debugName: "fullWidth" } : {}), transform: booleanAttribute });
-        this.spinnerDiameter = input(undefined, { ...(ngDevMode ? { debugName: "spinnerDiameter" } : {}) });
+        }), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "modifiers" }] : /* istanbul ignore next */ []));
+        this.type = input('icon', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
+        this.design = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "design" }] : /* istanbul ignore next */ []));
+        this.variant = input('default', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+        this.appearance = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "appearance" }] : /* istanbul ignore next */ []));
+        this.size = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "size" }] : /* istanbul ignore next */ []));
+        this.radius = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "radius" }] : /* istanbul ignore next */ []));
+        this.icon = input('', { ...(ngDevMode ? { debugName: "icon" } : /* istanbul ignore next */ {}), transform: transformStringInput });
+        this.iconPosition = input('start', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "iconPosition" }] : /* istanbul ignore next */ []));
+        this.iconSize = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "iconSize" }] : /* istanbul ignore next */ []));
+        this.text = input('', { ...(ngDevMode ? { debugName: "text" } : /* istanbul ignore next */ {}), transform: transformStringInput });
+        this.loading = input(false, { ...(ngDevMode ? { debugName: "loading" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.outlined = input(true, { ...(ngDevMode ? { debugName: "outlined" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.fullWidth = input(false, { ...(ngDevMode ? { debugName: "fullWidth" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.spinnerDiameter = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "spinnerDiameter" }] : /* istanbul ignore next */ []));
         this.clicked = output();
     }
     /** App-wide defaults; the resolution order is: instance input → `components.button` → `global` → library default. */
@@ -933,8 +969,10 @@ class RtuiButtonComponent {
             this.clicked.emit();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtuiButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: RtuiButtonComponent, isStandalone: true, selector: "rtui-button", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, design: { classPropertyName: "design", publicName: "design", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, radius: { classPropertyName: "radius", publicName: "radius", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconPosition: { classPropertyName: "iconPosition", publicName: "iconPosition", isSignal: true, isRequired: false, transformFunction: null }, iconSize: { classPropertyName: "iconSize", publicName: "iconSize", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, outlined: { classPropertyName: "outlined", publicName: "outlined", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, spinnerDiameter: { classPropertyName: "spinnerDiameter", publicName: "spinnerDiameter", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, host: { properties: { "class.rtui-button-full": "fullWidth()" } }, hostDirectives: [{ directive: i1$5.MatTooltip, inputs: ["matTooltip", "tooltip", "matTooltipPosition", "tooltipPosition", "matTooltipDisabled", "tooltipDisabled", "matTooltipClass", "tooltipClass"] }], ngImport: i0, template: "@switch (type()) {\n    @case ('pill') {\n        @if (resolvedDesign() === 'material') {\n            <!-- design: material \u2014 a native Material button; its look is owned by the Material theme -->\n            <button\n                type=\"button\"\n                class=\"rtui-button-material\"\n                [matButton]=\"materialAppearance()\"\n                [class.rtui-button-material--danger]=\"variant() === 'danger'\"\n                [disabled]=\"disabled() || loading()\"\n                (click)=\"onClick()\">\n                @if (loading()) {\n                    <rtui-spinner [diameter]=\"spinnerSize()\" [showBox]=\"false\" />\n                } @else {\n                    @if (icon() && iconPosition() === 'start') {\n                        <rtui-icon matButtonIcon [glyph]=\"icon()\" [size]=\"resolvedIconSize()\" [outlined]=\"outlined()\" />\n                    }\n                    @if (text()) {\n                        <span>{{ text() }}</span>\n                    }\n                    <ng-content />\n                    @if (icon() && iconPosition() === 'end') {\n                        <rtui-icon matButtonIcon iconPositionEnd [glyph]=\"icon()\" [size]=\"resolvedIconSize()\" [outlined]=\"outlined()\" />\n                    }\n                }\n            </button>\n        } @else {\n            <button\n                type=\"button\"\n                rtBlock=\"rtui-button\"\n                matRipple\n                [rtMod]=\"modifiers()\"\n                [matRippleDisabled]=\"disabled() || loading()\"\n                [disabled]=\"disabled() || loading()\"\n                (click)=\"onClick()\">\n                @if (loading()) {\n                    <rtui-spinner rtElem=\"spinner\" [diameter]=\"spinnerSize()\" [showBox]=\"false\" />\n                } @else {\n                    @if (icon() && iconPosition() === 'start') {\n                        <rtui-icon rtElem=\"icon\" [glyph]=\"icon()\" [size]=\"resolvedIconSize()\" [outlined]=\"outlined()\" />\n                    }\n                    @if (text()) {\n                        <span rtElem=\"text\">{{ text() }}</span>\n                    }\n                    <ng-content />\n                    @if (icon() && iconPosition() === 'end') {\n                        <rtui-icon rtElem=\"icon\" [glyph]=\"icon()\" [size]=\"resolvedIconSize()\" [outlined]=\"outlined()\" />\n                    }\n                }\n            </button>\n        }\n    }\n    @default {\n        <button\n            type=\"button\"\n            rtBlock=\"rtui-button\"\n            matRipple\n            [rtMod]=\"modifiers()\"\n            [matRippleDisabled]=\"disabled() || loading()\"\n            [disabled]=\"disabled() || loading()\"\n            (click)=\"onClick()\">\n            @if (loading()) {\n                <rtui-spinner rtElem=\"spinner\" [diameter]=\"spinnerSize()\" [showBox]=\"false\" />\n            } @else {\n                <rtui-icon rtElem=\"icon\" [glyph]=\"icon()\" [size]=\"resolvedIconSize()\" [outlined]=\"outlined()\" />\n            }\n        </button>\n    }\n}\n", styles: ["@charset \"UTF-8\";:host{display:inline-block}:host(.rtui-button-full){display:block;width:100%}:host(.rtui-button-full) .rtui-button,:host(.rtui-button-full) .rtui-button-material{width:100%}.rtui-button{position:relative;display:inline-flex;overflow:hidden;align-items:center;justify-content:center;border:0;background-color:transparent;color:var(--mat-sys-on-surface-variant);cursor:pointer;line-height:1;transition:background-color .15s ease,color .15s ease,opacity .15s ease}.rtui-button rtui-icon{color:inherit}.rtui-button rtui-spinner{display:flex;align-items:center;justify-content:center}.rtui-button:disabled{cursor:not-allowed;opacity:.38}.rtui-button--loading{cursor:wait}.rtui-button--type-icon,.rtui-button--type-fab{border-radius:1.5rem}.rtui-button--type-icon:hover:not(:disabled),.rtui-button--type-fab:hover:not(:disabled){background-color:var(--rt-bg-base-hover)}.rtui-button--type-icon.rtui-button--size-xs,.rtui-button--type-fab.rtui-button--size-xs{padding:.25rem}.rtui-button--type-icon.rtui-button--size-sm,.rtui-button--type-fab.rtui-button--size-sm{padding:.375rem}.rtui-button--type-icon.rtui-button--size-md,.rtui-button--type-fab.rtui-button--size-md{padding:.5rem}.rtui-button--type-icon.rtui-button--size-lg,.rtui-button--type-fab.rtui-button--size-lg{padding:.625rem}.rtui-button--type-icon.rtui-button--variant-primary,.rtui-button--type-fab.rtui-button--variant-primary{color:var(--rt-icon-accent-primary)}.rtui-button--type-icon.rtui-button--variant-danger,.rtui-button--type-fab.rtui-button--variant-danger{color:var(--rt-icon-accent-danger)}.rtui-button--type-icon.rtui-button--variant-success,.rtui-button--type-fab.rtui-button--variant-success{color:var(--rt-icon-accent-success)}.rtui-button--type-icon.rtui-button--variant-warning,.rtui-button--type-fab.rtui-button--variant-warning{color:var(--rt-icon-accent-warning)}.rtui-button--type-icon.rtui-button--variant-accent,.rtui-button--type-fab.rtui-button--variant-accent{color:var(--rt-icon-accent-info)}.rtui-button--type-pill{border-radius:1.5rem;background-color:var(--mat-sys-surface-container-high);color:var(--mat-sys-on-surface-variant);font-weight:500;gap:.375rem}.rtui-button--type-pill:hover:not(:disabled){background-color:var(--mat-sys-surface-container-highest)}.rtui-button--type-pill:active:not(:disabled){background-color:var(--mat-sys-surface-dim)}.rtui-button--type-pill.rtui-button--size-xs{padding:.25rem .5rem;font-size:.6875rem}.rtui-button--type-pill.rtui-button--size-sm{padding:.375rem .625rem;font-size:.75rem}.rtui-button--type-pill.rtui-button--size-md{padding:.5rem .875rem;font-size:.8125rem}.rtui-button--type-pill.rtui-button--size-lg{padding:.625rem 1rem;font-size:.875rem}.rtui-button--type-pill.rtui-button--radius-none{border-radius:0}.rtui-button--type-pill.rtui-button--radius-sm{border-radius:.25rem}.rtui-button--type-pill.rtui-button--radius-md{border-radius:.5rem}.rtui-button--type-pill.rtui-button--radius-lg{border-radius:.75rem}.rtui-button--type-pill.rtui-button--radius-full{border-radius:1.5rem}.rtui-button--type-pill.rtui-button--variant-primary{background-color:var(--rt-bg-accent-primary-subtle);color:var(--rt-text-accent-primary)}.rtui-button--type-pill.rtui-button--variant-primary:hover:not(:disabled){background-color:color-mix(in srgb,var(--rt-bg-accent-primary-subtle) 92%,var(--rt-color-neutral-100))}.rtui-button--type-pill.rtui-button--variant-primary:active:not(:disabled){background-color:color-mix(in srgb,var(--rt-bg-accent-primary-subtle) 84%,var(--rt-color-neutral-100))}.rtui-button--type-pill.rtui-button--variant-danger{background-color:var(--rt-bg-accent-danger-subtle);color:var(--rt-text-accent-danger)}.rtui-button--type-pill.rtui-button--variant-danger:hover:not(:disabled){background-color:color-mix(in srgb,var(--rt-bg-accent-danger-subtle) 92%,var(--rt-color-neutral-100))}.rtui-button--type-pill.rtui-button--variant-danger:active:not(:disabled){background-color:color-mix(in srgb,var(--rt-bg-accent-danger-subtle) 84%,var(--rt-color-neutral-100))}.rtui-button--type-pill.rtui-button--variant-success{background-color:var(--rt-bg-accent-success-subtle);color:var(--rt-text-accent-success)}.rtui-button--type-pill.rtui-button--variant-success:hover:not(:disabled){background-color:color-mix(in srgb,var(--rt-bg-accent-success-subtle) 92%,var(--rt-color-neutral-100))}.rtui-button--type-pill.rtui-button--variant-success:active:not(:disabled){background-color:color-mix(in srgb,var(--rt-bg-accent-success-subtle) 84%,var(--rt-color-neutral-100))}.rtui-button--type-pill.rtui-button--variant-warning{background-color:var(--rt-bg-accent-warning-subtle);color:var(--rt-text-accent-warning)}.rtui-button--type-pill.rtui-button--variant-warning:hover:not(:disabled){background-color:color-mix(in srgb,var(--rt-bg-accent-warning-subtle) 92%,var(--rt-color-neutral-100))}.rtui-button--type-pill.rtui-button--variant-warning:active:not(:disabled){background-color:color-mix(in srgb,var(--rt-bg-accent-warning-subtle) 84%,var(--rt-color-neutral-100))}.rtui-button--type-pill.rtui-button--variant-accent{background-color:var(--rt-bg-accent-info-subtle);color:var(--rt-text-accent-info)}.rtui-button--type-pill.rtui-button--variant-accent:hover:not(:disabled){background-color:color-mix(in srgb,var(--rt-bg-accent-info-subtle) 92%,var(--rt-color-neutral-100))}.rtui-button--type-pill.rtui-button--variant-accent:active:not(:disabled){background-color:color-mix(in srgb,var(--rt-bg-accent-info-subtle) 84%,var(--rt-color-neutral-100))}.rtui-button--type-pill.rtui-button--appearance-text{min-height:1.875rem;padding:0 .625rem;background-color:transparent;color:var(--mat-sys-on-surface-variant);font-size:1rem;font-weight:400}.rtui-button--type-pill.rtui-button--appearance-text:hover:not(:disabled){background-color:var(--rt-bg-base-hover)}.rtui-button--type-pill.rtui-button--appearance-text:active:not(:disabled){background-color:var(--rt-bg-base-hover)}.rtui-button-material rtui-spinner{display:flex;align-items:center;justify-content:center}.rtui-button-material--danger{--mat-button-filled-container-color: var(--mat-sys-error);--mat-button-filled-label-text-color: var(--mat-sys-on-error);--mat-button-filled-state-layer-color: var(--mat-sys-on-error);--mat-button-filled-ripple-color: color-mix(in srgb, var(--mat-sys-on-error) 12%, transparent);--mat-button-outlined-label-text-color: var(--mat-sys-error);--mat-button-outlined-outline-color: var(--mat-sys-error);--mat-button-outlined-state-layer-color: var(--mat-sys-error);--mat-button-outlined-ripple-color: color-mix(in srgb, var(--mat-sys-error) 12%, transparent);--mat-button-text-label-text-color: var(--mat-sys-error);--mat-button-text-state-layer-color: var(--mat-sys-error);--mat-button-text-ripple-color: color-mix(in srgb, var(--mat-sys-error) 12%, transparent);--mat-button-tonal-container-color: var(--mat-sys-error-container);--mat-button-tonal-label-text-color: var(--mat-sys-on-error-container);--mat-button-tonal-state-layer-color: var(--mat-sys-on-error-container);--mat-button-tonal-ripple-color: color-mix(in srgb, var(--mat-sys-on-error-container) 12%, transparent)}\n"], dependencies: [{ kind: "directive", type: 
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: RtuiButtonComponent, isStandalone: true, selector: "rtui-button", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, design: { classPropertyName: "design", publicName: "design", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, radius: { classPropertyName: "radius", publicName: "radius", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconPosition: { classPropertyName: "iconPosition", publicName: "iconPosition", isSignal: true, isRequired: false, transformFunction: null }, iconSize: { classPropertyName: "iconSize", publicName: "iconSize", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, outlined: { classPropertyName: "outlined", publicName: "outlined", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, spinnerDiameter: { classPropertyName: "spinnerDiameter", publicName: "spinnerDiameter", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, host: { properties: { "class.rtui-button-full": "fullWidth()" } }, hostDirectives: [{ directive: i1$5.MatTooltip, inputs: ["matTooltip", "tooltip", "matTooltipPosition", "tooltipPosition", "matTooltipDisabled", "tooltipDisabled", "matTooltipClass", "tooltipClass"] }], ngImport: i0, template: "<!-- Projected content is declared once and outlet-rendered per design branch: duplicating\n     <ng-content /> across @if branches assigns the projected nodes to the first slot only. -->\n<ng-template #projectedContent>\n    <ng-content />\n</ng-template>\n\n@switch (type()) {\n    @case ('pill') {\n        @if (resolvedDesign() === 'material') {\n            <!-- design: material \u2014 a native Material button; its look is owned by the Material theme -->\n            <button\n                type=\"button\"\n                class=\"rtui-button-material\"\n                [matButton]=\"materialAppearance()\"\n                [class.rtui-button-material--danger]=\"variant() === 'danger'\"\n                [disabled]=\"disabled() || loading()\"\n                (click)=\"onClick()\">\n                @if (loading()) {\n                    <rtui-spinner [diameter]=\"spinnerSize()\" [showBox]=\"false\" />\n                } @else {\n                    @if (icon() && iconPosition() === 'start') {\n                        <rtui-icon matButtonIcon [glyph]=\"icon()\" [size]=\"resolvedIconSize()\" [outlined]=\"outlined()\" />\n                    }\n                    @if (text()) {\n                        <span>{{ text() }}</span>\n                    }\n                    <ng-container [ngTemplateOutlet]=\"projectedContent\" />\n                    @if (icon() && iconPosition() === 'end') {\n                        <rtui-icon matButtonIcon iconPositionEnd [glyph]=\"icon()\" [size]=\"resolvedIconSize()\" [outlined]=\"outlined()\" />\n                    }\n                }\n            </button>\n        } @else {\n            <button\n                type=\"button\"\n                rtBlock=\"rtui-button\"\n                matRipple\n                [rtMod]=\"modifiers()\"\n                [matRippleDisabled]=\"disabled() || loading()\"\n                [disabled]=\"disabled() || loading()\"\n                (click)=\"onClick()\">\n                @if (loading()) {\n                    <rtui-spinner rtElem=\"spinner\" [diameter]=\"spinnerSize()\" [showBox]=\"false\" />\n                } @else {\n                    @if (icon() && iconPosition() === 'start') {\n                        <rtui-icon rtElem=\"icon\" [glyph]=\"icon()\" [size]=\"resolvedIconSize()\" [outlined]=\"outlined()\" />\n                    }\n                    @if (text()) {\n                        <span rtElem=\"text\">{{ text() }}</span>\n                    }\n                    <ng-container [ngTemplateOutlet]=\"projectedContent\" />\n                    @if (icon() && iconPosition() === 'end') {\n                        <rtui-icon rtElem=\"icon\" [glyph]=\"icon()\" [size]=\"resolvedIconSize()\" [outlined]=\"outlined()\" />\n                    }\n                }\n            </button>\n        }\n    }\n    @default {\n        <button\n            type=\"button\"\n            rtBlock=\"rtui-button\"\n            matRipple\n            [rtMod]=\"modifiers()\"\n            [matRippleDisabled]=\"disabled() || loading()\"\n            [disabled]=\"disabled() || loading()\"\n            (click)=\"onClick()\">\n            @if (loading()) {\n                <rtui-spinner rtElem=\"spinner\" [diameter]=\"spinnerSize()\" [showBox]=\"false\" />\n            } @else {\n                <rtui-icon rtElem=\"icon\" [glyph]=\"icon()\" [size]=\"resolvedIconSize()\" [outlined]=\"outlined()\" />\n            }\n        </button>\n    }\n}\n", styles: ["@charset \"UTF-8\";:host{display:inline-block}:host(.rtui-button-full){display:block;width:100%}:host(.rtui-button-full) .rtui-button,:host(.rtui-button-full) .rtui-button-material{width:100%}.rtui-button{position:relative;display:inline-flex;overflow:hidden;align-items:center;justify-content:center;border:0;background-color:transparent;color:var(--mat-sys-on-surface-variant);cursor:pointer;line-height:1;transition:background-color .15s ease,color .15s ease,opacity .15s ease}.rtui-button rtui-icon{color:inherit}.rtui-button rtui-spinner{display:flex;align-items:center;justify-content:center}.rtui-button:disabled{cursor:not-allowed;opacity:.38}.rtui-button--loading{cursor:wait}.rtui-button--type-icon,.rtui-button--type-fab{border-radius:1.5rem}.rtui-button--type-icon:hover:not(:disabled),.rtui-button--type-fab:hover:not(:disabled){background-color:var(--rt-bg-base-hover)}.rtui-button--type-icon.rtui-button--size-xs,.rtui-button--type-fab.rtui-button--size-xs{padding:.25rem}.rtui-button--type-icon.rtui-button--size-sm,.rtui-button--type-fab.rtui-button--size-sm{padding:.375rem}.rtui-button--type-icon.rtui-button--size-md,.rtui-button--type-fab.rtui-button--size-md{padding:.5rem}.rtui-button--type-icon.rtui-button--size-lg,.rtui-button--type-fab.rtui-button--size-lg{padding:.625rem}.rtui-button--type-icon.rtui-button--variant-primary,.rtui-button--type-fab.rtui-button--variant-primary{color:var(--rt-icon-accent-primary)}.rtui-button--type-icon.rtui-button--variant-danger,.rtui-button--type-fab.rtui-button--variant-danger{color:var(--rt-icon-accent-danger)}.rtui-button--type-icon.rtui-button--variant-success,.rtui-button--type-fab.rtui-button--variant-success{color:var(--rt-icon-accent-success)}.rtui-button--type-icon.rtui-button--variant-warning,.rtui-button--type-fab.rtui-button--variant-warning{color:var(--rt-icon-accent-warning)}.rtui-button--type-icon.rtui-button--variant-accent,.rtui-button--type-fab.rtui-button--variant-accent{color:var(--rt-icon-accent-info)}.rtui-button--type-pill{border-radius:1.5rem;background-color:var(--mat-sys-surface-container-high);color:var(--mat-sys-on-surface-variant);font-weight:500;gap:.375rem}.rtui-button--type-pill:hover:not(:disabled){background-color:var(--mat-sys-surface-container-highest)}.rtui-button--type-pill:active:not(:disabled){background-color:var(--mat-sys-surface-dim)}.rtui-button--type-pill.rtui-button--size-xs{padding:.25rem .5rem;font-size:.6875rem}.rtui-button--type-pill.rtui-button--size-sm{padding:.375rem .625rem;font-size:.75rem}.rtui-button--type-pill.rtui-button--size-md{padding:.5rem .875rem;font-size:.8125rem}.rtui-button--type-pill.rtui-button--size-lg{padding:.625rem 1rem;font-size:.875rem}.rtui-button--type-pill.rtui-button--radius-none{border-radius:0}.rtui-button--type-pill.rtui-button--radius-sm{border-radius:.25rem}.rtui-button--type-pill.rtui-button--radius-md{border-radius:.5rem}.rtui-button--type-pill.rtui-button--radius-lg{border-radius:.75rem}.rtui-button--type-pill.rtui-button--radius-full{border-radius:1.5rem}.rtui-button--type-pill.rtui-button--variant-primary{background-color:var(--rt-bg-accent-primary-subtle);color:var(--rt-text-accent-primary)}.rtui-button--type-pill.rtui-button--variant-primary:hover:not(:disabled){background-color:color-mix(in srgb,var(--rt-bg-accent-primary-subtle) 92%,var(--rt-color-neutral-100))}.rtui-button--type-pill.rtui-button--variant-primary:active:not(:disabled){background-color:color-mix(in srgb,var(--rt-bg-accent-primary-subtle) 84%,var(--rt-color-neutral-100))}.rtui-button--type-pill.rtui-button--variant-danger{background-color:var(--rt-bg-accent-danger-subtle);color:var(--rt-text-accent-danger)}.rtui-button--type-pill.rtui-button--variant-danger:hover:not(:disabled){background-color:color-mix(in srgb,var(--rt-bg-accent-danger-subtle) 92%,var(--rt-color-neutral-100))}.rtui-button--type-pill.rtui-button--variant-danger:active:not(:disabled){background-color:color-mix(in srgb,var(--rt-bg-accent-danger-subtle) 84%,var(--rt-color-neutral-100))}.rtui-button--type-pill.rtui-button--variant-success{background-color:var(--rt-bg-accent-success-subtle);color:var(--rt-text-accent-success)}.rtui-button--type-pill.rtui-button--variant-success:hover:not(:disabled){background-color:color-mix(in srgb,var(--rt-bg-accent-success-subtle) 92%,var(--rt-color-neutral-100))}.rtui-button--type-pill.rtui-button--variant-success:active:not(:disabled){background-color:color-mix(in srgb,var(--rt-bg-accent-success-subtle) 84%,var(--rt-color-neutral-100))}.rtui-button--type-pill.rtui-button--variant-warning{background-color:var(--rt-bg-accent-warning-subtle);color:var(--rt-text-accent-warning)}.rtui-button--type-pill.rtui-button--variant-warning:hover:not(:disabled){background-color:color-mix(in srgb,var(--rt-bg-accent-warning-subtle) 92%,var(--rt-color-neutral-100))}.rtui-button--type-pill.rtui-button--variant-warning:active:not(:disabled){background-color:color-mix(in srgb,var(--rt-bg-accent-warning-subtle) 84%,var(--rt-color-neutral-100))}.rtui-button--type-pill.rtui-button--variant-accent{background-color:var(--rt-bg-accent-info-subtle);color:var(--rt-text-accent-info)}.rtui-button--type-pill.rtui-button--variant-accent:hover:not(:disabled){background-color:color-mix(in srgb,var(--rt-bg-accent-info-subtle) 92%,var(--rt-color-neutral-100))}.rtui-button--type-pill.rtui-button--variant-accent:active:not(:disabled){background-color:color-mix(in srgb,var(--rt-bg-accent-info-subtle) 84%,var(--rt-color-neutral-100))}.rtui-button--type-pill.rtui-button--appearance-text{min-height:1.875rem;padding:0 .625rem;background-color:transparent;color:var(--mat-sys-on-surface-variant);font-size:1rem;font-weight:400}.rtui-button--type-pill.rtui-button--appearance-text:hover:not(:disabled){background-color:var(--rt-bg-base-hover)}.rtui-button--type-pill.rtui-button--appearance-text:active:not(:disabled){background-color:var(--rt-bg-base-hover)}.rtui-button-material rtui-spinner{display:flex;align-items:center;justify-content:center}.rtui-button-material--danger{--mat-button-filled-container-color: var(--mat-sys-error);--mat-button-filled-label-text-color: var(--mat-sys-on-error);--mat-button-filled-state-layer-color: var(--mat-sys-on-error);--mat-button-filled-ripple-color: color-mix(in srgb, var(--mat-sys-on-error) 12%, transparent);--mat-button-outlined-label-text-color: var(--mat-sys-error);--mat-button-outlined-outline-color: var(--mat-sys-error);--mat-button-outlined-state-layer-color: var(--mat-sys-error);--mat-button-outlined-ripple-color: color-mix(in srgb, var(--mat-sys-error) 12%, transparent);--mat-button-text-label-text-color: var(--mat-sys-error);--mat-button-text-state-layer-color: var(--mat-sys-error);--mat-button-text-ripple-color: color-mix(in srgb, var(--mat-sys-error) 12%, transparent);--mat-button-tonal-container-color: var(--mat-sys-error-container);--mat-button-tonal-label-text-color: var(--mat-sys-on-error-container);--mat-button-tonal-state-layer-color: var(--mat-sys-on-error-container);--mat-button-tonal-ripple-color: color-mix(in srgb, var(--mat-sys-on-error-container) 12%, transparent)}\n"], dependencies: [{ kind: "directive", type: 
+                // angular
+                NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: 
                 // rt-tools
                 BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }, { kind: "directive", type: ModDirective, selector: "[rtMod]" }, { kind: "component", type: RtuiSpinnerComponent, selector: "rtui-spinner", inputs: ["diameter", "showBox", "showBackground"] }, { kind: "component", type: 
                 // components
@@ -942,9 +980,11 @@ class RtuiButtonComponent {
                 // 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: MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtuiButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiButtonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'rtui-button', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        // angular
+                        NgTemplateOutlet,
                         // rt-tools
                         BlockDirective,
                         ElemDirective,
@@ -967,13 +1007,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
                         },
                     ], host: {
                         '[class.rtui-button-full]': 'fullWidth()',
-                    }, template: "@switch (type()) {\n    @case ('pill') {\n        @if (resolvedDesign() === 'material') {\n            <!-- design: material \u2014 a native Material button; its look is owned by the Material theme -->\n            <button\n                type=\"button\"\n                class=\"rtui-button-material\"\n                [matButton]=\"materialAppearance()\"\n                [class.rtui-button-material--danger]=\"variant() === 'danger'\"\n                [disabled]=\"disabled() || loading()\"\n                (click)=\"onClick()\">\n                @if (loading()) {\n                    <rtui-spinner [diameter]=\"spinnerSize()\" [showBox]=\"false\" />\n                } @else {\n                    @if (icon() && iconPosition() === 'start') {\n                        <rtui-icon matButtonIcon [glyph]=\"icon()\" [size]=\"resolvedIconSize()\" [outlined]=\"outlined()\" />\n                    }\n                    @if (text()) {\n                        <span>{{ text() }}</span>\n                    }\n                    <ng-content />\n                    @if (icon() && iconPosition() === 'end') {\n                        <rtui-icon matButtonIcon iconPositionEnd [glyph]=\"icon()\" [size]=\"resolvedIconSize()\" [outlined]=\"outlined()\" />\n                    }\n                }\n            </button>\n        } @else {\n            <button\n                type=\"button\"\n                rtBlock=\"rtui-button\"\n                matRipple\n                [rtMod]=\"modifiers()\"\n                [matRippleDisabled]=\"disabled() || loading()\"\n                [disabled]=\"disabled() || loading()\"\n                (click)=\"onClick()\">\n                @if (loading()) {\n                    <rtui-spinner rtElem=\"spinner\" [diameter]=\"spinnerSize()\" [showBox]=\"false\" />\n                } @else {\n                    @if (icon() && iconPosition() === 'start') {\n                        <rtui-icon rtElem=\"icon\" [glyph]=\"icon()\" [size]=\"resolvedIconSize()\" [outlined]=\"outlined()\" />\n                    }\n                    @if (text()) {\n                        <span rtElem=\"text\">{{ text() }}</span>\n                    }\n                    <ng-content />\n                    @if (icon() && iconPosition() === 'end') {\n                        <rtui-icon rtElem=\"icon\" [glyph]=\"icon()\" [size]=\"resolvedIconSize()\" [outlined]=\"outlined()\" />\n                    }\n                }\n            </button>\n        }\n    }\n    @default {\n        <button\n            type=\"button\"\n            rtBlock=\"rtui-button\"\n            matRipple\n            [rtMod]=\"modifiers()\"\n            [matRippleDisabled]=\"disabled() || loading()\"\n            [disabled]=\"disabled() || loading()\"\n            (click)=\"onClick()\">\n            @if (loading()) {\n                <rtui-spinner rtElem=\"spinner\" [diameter]=\"spinnerSize()\" [showBox]=\"false\" />\n            } @else {\n                <rtui-icon rtElem=\"icon\" [glyph]=\"icon()\" [size]=\"resolvedIconSize()\" [outlined]=\"outlined()\" />\n            }\n        </button>\n    }\n}\n", styles: ["@charset \"UTF-8\";:host{display:inline-block}:host(.rtui-button-full){display:block;width:100%}:host(.rtui-button-full) .rtui-button,:host(.rtui-button-full) .rtui-button-material{width:100%}.rtui-button{position:relative;display:inline-flex;overflow:hidden;align-items:center;justify-content:center;border:0;background-color:transparent;color:var(--mat-sys-on-surface-variant);cursor:pointer;line-height:1;transition:background-color .15s ease,color .15s ease,opacity .15s ease}.rtui-button rtui-icon{color:inherit}.rtui-button rtui-spinner{display:flex;align-items:center;justify-content:center}.rtui-button:disabled{cursor:not-allowed;opacity:.38}.rtui-button--loading{cursor:wait}.rtui-button--type-icon,.rtui-button--type-fab{border-radius:1.5rem}.rtui-button--type-icon:hover:not(:disabled),.rtui-button--type-fab:hover:not(:disabled){background-color:var(--rt-bg-base-hover)}.rtui-button--type-icon.rtui-button--size-xs,.rtui-button--type-fab.rtui-button--size-xs{padding:.25rem}.rtui-button--type-icon.rtui-button--size-sm,.rtui-button--type-fab.rtui-button--size-sm{padding:.375rem}.rtui-button--type-icon.rtui-button--size-md,.rtui-button--type-fab.rtui-button--size-md{padding:.5rem}.rtui-button--type-icon.rtui-button--size-lg,.rtui-button--type-fab.rtui-button--size-lg{padding:.625rem}.rtui-button--type-icon.rtui-button--variant-primary,.rtui-button--type-fab.rtui-button--variant-primary{color:var(--rt-icon-accent-primary)}.rtui-button--type-icon.rtui-button--variant-danger,.rtui-button--type-fab.rtui-button--variant-danger{color:var(--rt-icon-accent-danger)}.rtui-button--type-icon.rtui-button--variant-success,.rtui-button--type-fab.rtui-button--variant-success{color:var(--rt-icon-accent-success)}.rtui-button--type-icon.rtui-button--variant-warning,.rtui-button--type-fab.rtui-button--variant-warning{color:var(--rt-icon-accent-warning)}.rtui-button--type-icon.rtui-button--variant-accent,.rtui-button--type-fab.rtui-button--variant-accent{color:var(--rt-icon-accent-info)}.rtui-button--type-pill{border-radius:1.5rem;background-color:var(--mat-sys-surface-container-high);color:var(--mat-sys-on-surface-variant);font-weight:500;gap:.375rem}.rtui-button--type-pill:hover:not(:disabled){background-color:var(--mat-sys-surface-container-highest)}.rtui-button--type-pill:active:not(:disabled){background-color:var(--mat-sys-surface-dim)}.rtui-button--type-pill.rtui-button--size-xs{padding:.25rem .5rem;font-size:.6875rem}.rtui-button--type-pill.rtui-button--size-sm{padding:.375rem .625rem;font-size:.75rem}.rtui-button--type-pill.rtui-button--size-md{padding:.5rem .875rem;font-size:.8125rem}.rtui-button--type-pill.rtui-button--size-lg{padding:.625rem 1rem;font-size:.875rem}.rtui-button--type-pill.rtui-button--radius-none{border-radius:0}.rtui-button--type-pill.rtui-button--radius-sm{border-radius:.25rem}.rtui-button--type-pill.rtui-button--radius-md{border-radius:.5rem}.rtui-button--type-pill.rtui-button--radius-lg{border-radius:.75rem}.rtui-button--type-pill.rtui-button--radius-full{border-radius:1.5rem}.rtui-button--type-pill.rtui-button--variant-primary{background-color:var(--rt-bg-accent-primary-subtle);color:var(--rt-text-accent-primary)}.rtui-button--type-pill.rtui-button--variant-primary:hover:not(:disabled){background-color:color-mix(in srgb,var(--rt-bg-accent-primary-subtle) 92%,var(--rt-color-neutral-100))}.rtui-button--type-pill.rtui-button--variant-primary:active:not(:disabled){background-color:color-mix(in srgb,var(--rt-bg-accent-primary-subtle) 84%,var(--rt-color-neutral-100))}.rtui-button--type-pill.rtui-button--variant-danger{background-color:var(--rt-bg-accent-danger-subtle);color:var(--rt-text-accent-danger)}.rtui-button--type-pill.rtui-button--variant-danger:hover:not(:disabled){background-color:color-mix(in srgb,var(--rt-bg-accent-danger-subtle) 92%,var(--rt-color-neutral-100))}.rtui-button--type-pill.rtui-button--variant-danger:active:not(:disabled){background-color:color-mix(in srgb,var(--rt-bg-accent-danger-subtle) 84%,var(--rt-color-neutral-100))}.rtui-button--type-pill.rtui-button--variant-success{background-color:var(--rt-bg-accent-success-subtle);color:var(--rt-text-accent-success)}.rtui-button--type-pill.rtui-button--variant-success:hover:not(:disabled){background-color:color-mix(in srgb,var(--rt-bg-accent-success-subtle) 92%,var(--rt-color-neutral-100))}.rtui-button--type-pill.rtui-button--variant-success:active:not(:disabled){background-color:color-mix(in srgb,var(--rt-bg-accent-success-subtle) 84%,var(--rt-color-neutral-100))}.rtui-button--type-pill.rtui-button--variant-warning{background-color:var(--rt-bg-accent-warning-subtle);color:var(--rt-text-accent-warning)}.rtui-button--type-pill.rtui-button--variant-warning:hover:not(:disabled){background-color:color-mix(in srgb,var(--rt-bg-accent-warning-subtle) 92%,var(--rt-color-neutral-100))}.rtui-button--type-pill.rtui-button--variant-warning:active:not(:disabled){background-color:color-mix(in srgb,var(--rt-bg-accent-warning-subtle) 84%,var(--rt-color-neutral-100))}.rtui-button--type-pill.rtui-button--variant-accent{background-color:var(--rt-bg-accent-info-subtle);color:var(--rt-text-accent-info)}.rtui-button--type-pill.rtui-button--variant-accent:hover:not(:disabled){background-color:color-mix(in srgb,var(--rt-bg-accent-info-subtle) 92%,var(--rt-color-neutral-100))}.rtui-button--type-pill.rtui-button--variant-accent:active:not(:disabled){background-color:color-mix(in srgb,var(--rt-bg-accent-info-subtle) 84%,var(--rt-color-neutral-100))}.rtui-button--type-pill.rtui-button--appearance-text{min-height:1.875rem;padding:0 .625rem;background-color:transparent;color:var(--mat-sys-on-surface-variant);font-size:1rem;font-weight:400}.rtui-button--type-pill.rtui-button--appearance-text:hover:not(:disabled){background-color:var(--rt-bg-base-hover)}.rtui-button--type-pill.rtui-button--appearance-text:active:not(:disabled){background-color:var(--rt-bg-base-hover)}.rtui-button-material rtui-spinner{display:flex;align-items:center;justify-content:center}.rtui-button-material--danger{--mat-button-filled-container-color: var(--mat-sys-error);--mat-button-filled-label-text-color: var(--mat-sys-on-error);--mat-button-filled-state-layer-color: var(--mat-sys-on-error);--mat-button-filled-ripple-color: color-mix(in srgb, var(--mat-sys-on-error) 12%, transparent);--mat-button-outlined-label-text-color: var(--mat-sys-error);--mat-button-outlined-outline-color: var(--mat-sys-error);--mat-button-outlined-state-layer-color: var(--mat-sys-error);--mat-button-outlined-ripple-color: color-mix(in srgb, var(--mat-sys-error) 12%, transparent);--mat-button-text-label-text-color: var(--mat-sys-error);--mat-button-text-state-layer-color: var(--mat-sys-error);--mat-button-text-ripple-color: color-mix(in srgb, var(--mat-sys-error) 12%, transparent);--mat-button-tonal-container-color: var(--mat-sys-error-container);--mat-button-tonal-label-text-color: var(--mat-sys-on-error-container);--mat-button-tonal-state-layer-color: var(--mat-sys-on-error-container);--mat-button-tonal-ripple-color: color-mix(in srgb, var(--mat-sys-on-error-container) 12%, transparent)}\n"] }]
+                    }, template: "<!-- Projected content is declared once and outlet-rendered per design branch: duplicating\n     <ng-content /> across @if branches assigns the projected nodes to the first slot only. -->\n<ng-template #projectedContent>\n    <ng-content />\n</ng-template>\n\n@switch (type()) {\n    @case ('pill') {\n        @if (resolvedDesign() === 'material') {\n            <!-- design: material \u2014 a native Material button; its look is owned by the Material theme -->\n            <button\n                type=\"button\"\n                class=\"rtui-button-material\"\n                [matButton]=\"materialAppearance()\"\n                [class.rtui-button-material--danger]=\"variant() === 'danger'\"\n                [disabled]=\"disabled() || loading()\"\n                (click)=\"onClick()\">\n                @if (loading()) {\n                    <rtui-spinner [diameter]=\"spinnerSize()\" [showBox]=\"false\" />\n                } @else {\n                    @if (icon() && iconPosition() === 'start') {\n                        <rtui-icon matButtonIcon [glyph]=\"icon()\" [size]=\"resolvedIconSize()\" [outlined]=\"outlined()\" />\n                    }\n                    @if (text()) {\n                        <span>{{ text() }}</span>\n                    }\n                    <ng-container [ngTemplateOutlet]=\"projectedContent\" />\n                    @if (icon() && iconPosition() === 'end') {\n                        <rtui-icon matButtonIcon iconPositionEnd [glyph]=\"icon()\" [size]=\"resolvedIconSize()\" [outlined]=\"outlined()\" />\n                    }\n                }\n            </button>\n        } @else {\n            <button\n                type=\"button\"\n                rtBlock=\"rtui-button\"\n                matRipple\n                [rtMod]=\"modifiers()\"\n                [matRippleDisabled]=\"disabled() || loading()\"\n                [disabled]=\"disabled() || loading()\"\n                (click)=\"onClick()\">\n                @if (loading()) {\n                    <rtui-spinner rtElem=\"spinner\" [diameter]=\"spinnerSize()\" [showBox]=\"false\" />\n                } @else {\n                    @if (icon() && iconPosition() === 'start') {\n                        <rtui-icon rtElem=\"icon\" [glyph]=\"icon()\" [size]=\"resolvedIconSize()\" [outlined]=\"outlined()\" />\n                    }\n                    @if (text()) {\n                        <span rtElem=\"text\">{{ text() }}</span>\n                    }\n                    <ng-container [ngTemplateOutlet]=\"projectedContent\" />\n                    @if (icon() && iconPosition() === 'end') {\n                        <rtui-icon rtElem=\"icon\" [glyph]=\"icon()\" [size]=\"resolvedIconSize()\" [outlined]=\"outlined()\" />\n                    }\n                }\n            </button>\n        }\n    }\n    @default {\n        <button\n            type=\"button\"\n            rtBlock=\"rtui-button\"\n            matRipple\n            [rtMod]=\"modifiers()\"\n            [matRippleDisabled]=\"disabled() || loading()\"\n            [disabled]=\"disabled() || loading()\"\n            (click)=\"onClick()\">\n            @if (loading()) {\n                <rtui-spinner rtElem=\"spinner\" [diameter]=\"spinnerSize()\" [showBox]=\"false\" />\n            } @else {\n                <rtui-icon rtElem=\"icon\" [glyph]=\"icon()\" [size]=\"resolvedIconSize()\" [outlined]=\"outlined()\" />\n            }\n        </button>\n    }\n}\n", styles: ["@charset \"UTF-8\";:host{display:inline-block}:host(.rtui-button-full){display:block;width:100%}:host(.rtui-button-full) .rtui-button,:host(.rtui-button-full) .rtui-button-material{width:100%}.rtui-button{position:relative;display:inline-flex;overflow:hidden;align-items:center;justify-content:center;border:0;background-color:transparent;color:var(--mat-sys-on-surface-variant);cursor:pointer;line-height:1;transition:background-color .15s ease,color .15s ease,opacity .15s ease}.rtui-button rtui-icon{color:inherit}.rtui-button rtui-spinner{display:flex;align-items:center;justify-content:center}.rtui-button:disabled{cursor:not-allowed;opacity:.38}.rtui-button--loading{cursor:wait}.rtui-button--type-icon,.rtui-button--type-fab{border-radius:1.5rem}.rtui-button--type-icon:hover:not(:disabled),.rtui-button--type-fab:hover:not(:disabled){background-color:var(--rt-bg-base-hover)}.rtui-button--type-icon.rtui-button--size-xs,.rtui-button--type-fab.rtui-button--size-xs{padding:.25rem}.rtui-button--type-icon.rtui-button--size-sm,.rtui-button--type-fab.rtui-button--size-sm{padding:.375rem}.rtui-button--type-icon.rtui-button--size-md,.rtui-button--type-fab.rtui-button--size-md{padding:.5rem}.rtui-button--type-icon.rtui-button--size-lg,.rtui-button--type-fab.rtui-button--size-lg{padding:.625rem}.rtui-button--type-icon.rtui-button--variant-primary,.rtui-button--type-fab.rtui-button--variant-primary{color:var(--rt-icon-accent-primary)}.rtui-button--type-icon.rtui-button--variant-danger,.rtui-button--type-fab.rtui-button--variant-danger{color:var(--rt-icon-accent-danger)}.rtui-button--type-icon.rtui-button--variant-success,.rtui-button--type-fab.rtui-button--variant-success{color:var(--rt-icon-accent-success)}.rtui-button--type-icon.rtui-button--variant-warning,.rtui-button--type-fab.rtui-button--variant-warning{color:var(--rt-icon-accent-warning)}.rtui-button--type-icon.rtui-button--variant-accent,.rtui-button--type-fab.rtui-button--variant-accent{color:var(--rt-icon-accent-info)}.rtui-button--type-pill{border-radius:1.5rem;background-color:var(--mat-sys-surface-container-high);color:var(--mat-sys-on-surface-variant);font-weight:500;gap:.375rem}.rtui-button--type-pill:hover:not(:disabled){background-color:var(--mat-sys-surface-container-highest)}.rtui-button--type-pill:active:not(:disabled){background-color:var(--mat-sys-surface-dim)}.rtui-button--type-pill.rtui-button--size-xs{padding:.25rem .5rem;font-size:.6875rem}.rtui-button--type-pill.rtui-button--size-sm{padding:.375rem .625rem;font-size:.75rem}.rtui-button--type-pill.rtui-button--size-md{padding:.5rem .875rem;font-size:.8125rem}.rtui-button--type-pill.rtui-button--size-lg{padding:.625rem 1rem;font-size:.875rem}.rtui-button--type-pill.rtui-button--radius-none{border-radius:0}.rtui-button--type-pill.rtui-button--radius-sm{border-radius:.25rem}.rtui-button--type-pill.rtui-button--radius-md{border-radius:.5rem}.rtui-button--type-pill.rtui-button--radius-lg{border-radius:.75rem}.rtui-button--type-pill.rtui-button--radius-full{border-radius:1.5rem}.rtui-button--type-pill.rtui-button--variant-primary{background-color:var(--rt-bg-accent-primary-subtle);color:var(--rt-text-accent-primary)}.rtui-button--type-pill.rtui-button--variant-primary:hover:not(:disabled){background-color:color-mix(in srgb,var(--rt-bg-accent-primary-subtle) 92%,var(--rt-color-neutral-100))}.rtui-button--type-pill.rtui-button--variant-primary:active:not(:disabled){background-color:color-mix(in srgb,var(--rt-bg-accent-primary-subtle) 84%,var(--rt-color-neutral-100))}.rtui-button--type-pill.rtui-button--variant-danger{background-color:var(--rt-bg-accent-danger-subtle);color:var(--rt-text-accent-danger)}.rtui-button--type-pill.rtui-button--variant-danger:hover:not(:disabled){background-color:color-mix(in srgb,var(--rt-bg-accent-danger-subtle) 92%,var(--rt-color-neutral-100))}.rtui-button--type-pill.rtui-button--variant-danger:active:not(:disabled){background-color:color-mix(in srgb,var(--rt-bg-accent-danger-subtle) 84%,var(--rt-color-neutral-100))}.rtui-button--type-pill.rtui-button--variant-success{background-color:var(--rt-bg-accent-success-subtle);color:var(--rt-text-accent-success)}.rtui-button--type-pill.rtui-button--variant-success:hover:not(:disabled){background-color:color-mix(in srgb,var(--rt-bg-accent-success-subtle) 92%,var(--rt-color-neutral-100))}.rtui-button--type-pill.rtui-button--variant-success:active:not(:disabled){background-color:color-mix(in srgb,var(--rt-bg-accent-success-subtle) 84%,var(--rt-color-neutral-100))}.rtui-button--type-pill.rtui-button--variant-warning{background-color:var(--rt-bg-accent-warning-subtle);color:var(--rt-text-accent-warning)}.rtui-button--type-pill.rtui-button--variant-warning:hover:not(:disabled){background-color:color-mix(in srgb,var(--rt-bg-accent-warning-subtle) 92%,var(--rt-color-neutral-100))}.rtui-button--type-pill.rtui-button--variant-warning:active:not(:disabled){background-color:color-mix(in srgb,var(--rt-bg-accent-warning-subtle) 84%,var(--rt-color-neutral-100))}.rtui-button--type-pill.rtui-button--variant-accent{background-color:var(--rt-bg-accent-info-subtle);color:var(--rt-text-accent-info)}.rtui-button--type-pill.rtui-button--variant-accent:hover:not(:disabled){background-color:color-mix(in srgb,var(--rt-bg-accent-info-subtle) 92%,var(--rt-color-neutral-100))}.rtui-button--type-pill.rtui-button--variant-accent:active:not(:disabled){background-color:color-mix(in srgb,var(--rt-bg-accent-info-subtle) 84%,var(--rt-color-neutral-100))}.rtui-button--type-pill.rtui-button--appearance-text{min-height:1.875rem;padding:0 .625rem;background-color:transparent;color:var(--mat-sys-on-surface-variant);font-size:1rem;font-weight:400}.rtui-button--type-pill.rtui-button--appearance-text:hover:not(:disabled){background-color:var(--rt-bg-base-hover)}.rtui-button--type-pill.rtui-button--appearance-text:active:not(:disabled){background-color:var(--rt-bg-base-hover)}.rtui-button-material rtui-spinner{display:flex;align-items:center;justify-content:center}.rtui-button-material--danger{--mat-button-filled-container-color: var(--mat-sys-error);--mat-button-filled-label-text-color: var(--mat-sys-on-error);--mat-button-filled-state-layer-color: var(--mat-sys-on-error);--mat-button-filled-ripple-color: color-mix(in srgb, var(--mat-sys-on-error) 12%, transparent);--mat-button-outlined-label-text-color: var(--mat-sys-error);--mat-button-outlined-outline-color: var(--mat-sys-error);--mat-button-outlined-state-layer-color: var(--mat-sys-error);--mat-button-outlined-ripple-color: color-mix(in srgb, var(--mat-sys-error) 12%, transparent);--mat-button-text-label-text-color: var(--mat-sys-error);--mat-button-text-state-layer-color: var(--mat-sys-error);--mat-button-text-ripple-color: color-mix(in srgb, var(--mat-sys-error) 12%, transparent);--mat-button-tonal-container-color: var(--mat-sys-error-container);--mat-button-tonal-label-text-color: var(--mat-sys-on-error-container);--mat-button-tonal-state-layer-color: var(--mat-sys-on-error-container);--mat-button-tonal-ripple-color: color-mix(in srgb, var(--mat-sys-on-error-container) 12%, transparent)}\n"] }]
         }], propDecorators: { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], design: [{ type: i0.Input, args: [{ isSignal: true, alias: "design", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], radius: [{ type: i0.Input, args: [{ isSignal: true, alias: "radius", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], iconPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconPosition", required: false }] }], iconSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconSize", required: false }] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], outlined: [{ type: i0.Input, args: [{ isSignal: true, alias: "outlined", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], spinnerDiameter: [{ type: i0.Input, args: [{ isSignal: true, alias: "spinnerDiameter", required: false }] }], clicked: [{ type: i0.Output, args: ["clicked"] }] } });
 
 class RtuiMultiButtonComponent {
     constructor() {
-        this.actions = input([], { ...(ngDevMode ? { debugName: "actions" } : {}), transform: (value) => transformArrayInput(value) });
-        this.activeAction = model('', { ...(ngDevMode ? { debugName: "activeAction" } : {}) });
+        this.actions = input([], { ...(ngDevMode ? { debugName: "actions" } : /* istanbul ignore next */ {}), transform: (value) => transformArrayInput(value) });
+        this.activeAction = model('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "activeAction" }] : /* istanbul ignore next */ []));
         this.changeActiveAction = output();
     }
     onSetActiveAction(action) {
@@ -982,14 +1023,14 @@ class RtuiMultiButtonComponent {
             this.changeActiveAction.emit(this.activeAction());
         }
     }
-    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: ["@charset \"UTF-8\";:host{--rt-rtui-multibutton-base-display: inline-flex;--rt-rtui-multibutton-base-flex-flow: row wrap;--rt-rtui-multibutton-base-radius: 8px;--rt-rtui-multibutton-base-padding: 4px;--rt-rtui-multibutton-base-background-color: var(--rt-bg-base-hover);--rt-rtui-multibutton-action-base-padding: 4px 8px;--rt-rtui-multibutton-action-base-radius: 8px;--rt-rtui-multibutton-action-base-border: 0;--rt-rtui-multibutton-action-base-font-size: 12px;--rt-rtui-multibutton-action-base-font-weight: 600;--rt-rtui-multibutton-action-base-color: var(--rt-text-base-secondary);--rt-rtui-multibutton-action-base-background-color: transparent;--rt-rtui-multibutton-action-base-transition: background-color .15s, color .15s;--rt-rtui-multibutton-action-base-cursor: pointer;--rt-rtui-multibutton-action-hover-color: var(--rt-text-base-soft);--rt-rtui-multibutton-action-active-color: var(--rt-text-base-soft);--rt-rtui-multibutton-action-active-background-color: var(--rt-bg-base-strong);--rt-rtui-multibutton-action-active-cursor: default;--rt-rtui-multibutton-action-focus-visible-outline: 2px dashed var(--rt-border-focus);--rt-rtui-multibutton-action-focus-visible-outline-offset: -2px;--rt-rtui-multibutton-action-disabled-pointer-events: none;--rt-rtui-multibutton-action-disabled-cursor: default;--rt-rtui-multibutton-action-disabled-opacity: .75}:host .rtui-multibutton-actions{display:var(--rt-rtui-multibutton-base-display);flex-flow:var(--rt-rtui-multibutton-base-flex-flow);padding:var(--rt-rtui-multibutton-base-padding);border-radius:var(--rt-rtui-multibutton-base-radius);background-color:var(--rt-rtui-multibutton-base-background-color)}:host .rtui-multibutton-actions__action{padding:var(--rt-rtui-multibutton-action-base-padding);border:var(--rt-rtui-multibutton-action-base-border);border-radius:var(--rt-rtui-multibutton-action-base-radius);background-color:var(--rt-rtui-multibutton-action-base-background-color);color:var(--rt-rtui-multibutton-action-base-color);cursor:var(--rt-rtui-multibutton-action-base-cursor);font-size:var(--rt-rtui-multibutton-action-base-font-size);font-weight:var(--rt-rtui-multibutton-action-base-font-weight);transition:var(--rt-rtui-multibutton-action-base-transition)}:host .rtui-multibutton-actions__action--active{background-color:var(--rt-rtui-multibutton-action-active-background-color);color:var(--rt-rtui-multibutton-action-active-color);cursor:var(--rt-rtui-multibutton-action-active-cursor)}:host .rtui-multibutton-actions__action:not(:host .rtui-multibutton-actions__action--active):hover{color:var(--rt-rtui-multibutton-action-hover-color)}:host .rtui-multibutton-actions__action:focus{outline:none}:host .rtui-multibutton-actions__action:focus-visible{outline:var(--rt-rtui-multibutton-action-focus-visible-outline);outline-offset:var(--rt-rtui-multibutton-action-focus-visible-outline-offset)}:host .rtui-multibutton-actions__action:disabled{cursor:var(--rt-rtui-multibutton-action-disabled-cursor);opacity:var(--rt-rtui-multibutton-action-disabled-opacity);pointer-events:var(--rt-rtui-multibutton-action-disabled-pointer-events)}\n"], dependencies: [{ kind: "directive", type: 
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiMultiButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: RtuiMultiButtonComponent, isStandalone: true, selector: "rtui-multi-button", inputs: { actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, activeAction: { classPropertyName: "activeAction", publicName: "activeAction", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeAction: "activeActionChange", changeActiveAction: "changeActiveAction" }, ngImport: i0, template: "@if (actions()?.length) {\n    <div rtBlock=\"rtui-multibutton-actions\">\n        @for (action of actions(); track action) {\n            <button rtElem=\"action\" type=\"button\" [rtMod]=\"{ active: action === activeAction() }\" (click)=\"onSetActiveAction(action)\">\n                {{ action | titlecase }}\n            </button>\n        }\n    </div>\n}\n", styles: ["@charset \"UTF-8\";:host{--rt-rtui-multibutton-base-display: inline-flex;--rt-rtui-multibutton-base-flex-flow: row wrap;--rt-rtui-multibutton-base-radius: 8px;--rt-rtui-multibutton-base-padding: 4px;--rt-rtui-multibutton-base-background-color: var(--rt-bg-base-hover);--rt-rtui-multibutton-action-base-padding: 4px 8px;--rt-rtui-multibutton-action-base-radius: 8px;--rt-rtui-multibutton-action-base-border: 0;--rt-rtui-multibutton-action-base-font-size: 12px;--rt-rtui-multibutton-action-base-font-weight: 600;--rt-rtui-multibutton-action-base-color: var(--rt-text-base-secondary);--rt-rtui-multibutton-action-base-background-color: transparent;--rt-rtui-multibutton-action-base-transition: background-color .15s, color .15s;--rt-rtui-multibutton-action-base-cursor: pointer;--rt-rtui-multibutton-action-hover-color: var(--rt-text-base-soft);--rt-rtui-multibutton-action-active-color: var(--rt-text-base-soft);--rt-rtui-multibutton-action-active-background-color: var(--rt-bg-base-strong);--rt-rtui-multibutton-action-active-cursor: default;--rt-rtui-multibutton-action-focus-visible-outline: 2px dashed var(--rt-border-focus);--rt-rtui-multibutton-action-focus-visible-outline-offset: -2px;--rt-rtui-multibutton-action-disabled-pointer-events: none;--rt-rtui-multibutton-action-disabled-cursor: default;--rt-rtui-multibutton-action-disabled-opacity: .75}:host .rtui-multibutton-actions{display:var(--rt-rtui-multibutton-base-display);flex-flow:var(--rt-rtui-multibutton-base-flex-flow);padding:var(--rt-rtui-multibutton-base-padding);border-radius:var(--rt-rtui-multibutton-base-radius);background-color:var(--rt-rtui-multibutton-base-background-color)}:host .rtui-multibutton-actions__action{padding:var(--rt-rtui-multibutton-action-base-padding);border:var(--rt-rtui-multibutton-action-base-border);border-radius:var(--rt-rtui-multibutton-action-base-radius);background-color:var(--rt-rtui-multibutton-action-base-background-color);color:var(--rt-rtui-multibutton-action-base-color);cursor:var(--rt-rtui-multibutton-action-base-cursor);font-size:var(--rt-rtui-multibutton-action-base-font-size);font-weight:var(--rt-rtui-multibutton-action-base-font-weight);transition:var(--rt-rtui-multibutton-action-base-transition)}:host .rtui-multibutton-actions__action--active{background-color:var(--rt-rtui-multibutton-action-active-background-color);color:var(--rt-rtui-multibutton-action-active-color);cursor:var(--rt-rtui-multibutton-action-active-cursor)}:host .rtui-multibutton-actions__action:not(:host .rtui-multibutton-actions__action--active):hover{color:var(--rt-rtui-multibutton-action-hover-color)}:host .rtui-multibutton-actions__action:focus{outline:none}:host .rtui-multibutton-actions__action:focus-visible{outline:var(--rt-rtui-multibutton-action-focus-visible-outline);outline-offset:var(--rt-rtui-multibutton-action-focus-visible-outline-offset)}:host .rtui-multibutton-actions__action:disabled{cursor:var(--rt-rtui-multibutton-action-disabled-cursor);opacity:var(--rt-rtui-multibutton-action-disabled-opacity);pointer-events:var(--rt-rtui-multibutton-action-disabled-pointer-events)}\n"], dependencies: [{ kind: "directive", type: 
                 // rt-tools
                 BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }, { kind: "directive", type: ModDirective, selector: "[rtMod]" }, { kind: "pipe", type: 
                 // pipes
                 TitleCasePipe, name: "titlecase" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtuiMultiButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiMultiButtonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'rtui-multi-button', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         // pipes
@@ -1002,30 +1043,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
         }], 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 {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtuiHeaderLeftDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.1", type: RtuiHeaderLeftDirective, isStandalone: true, selector: "[rtuiHeaderLeft]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiHeaderLeftDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: RtuiHeaderLeftDirective, isStandalone: true, selector: "[rtuiHeaderLeft]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtuiHeaderLeftDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiHeaderLeftDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rtuiHeaderLeft]',
                 }]
         }] });
 class RtuiHeaderCenterDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtuiHeaderCenterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.1", type: RtuiHeaderCenterDirective, isStandalone: true, selector: "[rtuiHeaderCenter]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiHeaderCenterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: RtuiHeaderCenterDirective, isStandalone: true, selector: "[rtuiHeaderCenter]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtuiHeaderCenterDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiHeaderCenterDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rtuiHeaderCenter]',
                 }]
         }] });
 class RtuiHeaderRightDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtuiHeaderRightDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.1", type: RtuiHeaderRightDirective, isStandalone: true, selector: "[rtuiHeaderRight]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiHeaderRightDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: RtuiHeaderRightDirective, isStandalone: true, selector: "[rtuiHeaderRight]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtuiHeaderRightDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiHeaderRightDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rtuiHeaderRight]',
@@ -1033,11 +1074,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
         }] });
 class RtuiHeaderComponent {
     constructor() {
-        this.isMobile = input(false, { ...(ngDevMode ? { debugName: "isMobile" } : {}), transform: booleanAttribute });
-        this.isMobileMenuButtonShown = input(true, { ...(ngDevMode ? { debugName: "isMobileMenuButtonShown" } : {}), transform: booleanAttribute });
-        this.leftHeaderTpl = contentChild(RtuiHeaderLeftDirective, { ...(ngDevMode ? { debugName: "leftHeaderTpl" } : {}), read: TemplateRef });
-        this.centerHeaderTpl = contentChild(RtuiHeaderCenterDirective, { ...(ngDevMode ? { debugName: "centerHeaderTpl" } : {}), read: TemplateRef });
-        this.rightHeaderTpl = contentChild(RtuiHeaderRightDirective, { ...(ngDevMode ? { debugName: "rightHeaderTpl" } : {}), read: TemplateRef });
+        this.isMobile = input(false, { ...(ngDevMode ? { debugName: "isMobile" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.isMobileMenuButtonShown = input(true, { ...(ngDevMode ? { debugName: "isMobileMenuButtonShown" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.leftHeaderTpl = contentChild(RtuiHeaderLeftDirective, { ...(ngDevMode ? { debugName: "leftHeaderTpl" } : /* istanbul ignore next */ {}), read: TemplateRef });
+        this.centerHeaderTpl = contentChild(RtuiHeaderCenterDirective, { ...(ngDevMode ? { debugName: "centerHeaderTpl" } : /* istanbul ignore next */ {}), read: TemplateRef });
+        this.rightHeaderTpl = contentChild(RtuiHeaderRightDirective, { ...(ngDevMode ? { debugName: "rightHeaderTpl" } : /* istanbul ignore next */ {}), read: TemplateRef });
         this.openMobileMenuAction = output();
     }
     openSideMenu() {
@@ -1045,14 +1086,14 @@ class RtuiHeaderComponent {
             this.openMobileMenuAction.emit();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtuiHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: RtuiHeaderComponent, isStandalone: true, selector: "rtui-header", inputs: { isMobile: { classPropertyName: "isMobile", publicName: "isMobile", isSignal: true, isRequired: false, transformFunction: null }, isMobileMenuButtonShown: { classPropertyName: "isMobileMenuButtonShown", publicName: "isMobileMenuButtonShown", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { openMobileMenuAction: "openMobileMenuAction" }, queries: [{ propertyName: "leftHeaderTpl", first: true, predicate: RtuiHeaderLeftDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "centerHeaderTpl", first: true, predicate: RtuiHeaderCenterDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "rightHeaderTpl", first: true, predicate: RtuiHeaderRightDirective, descendants: true, read: TemplateRef, isSignal: true }], ngImport: i0, template: "<rtui-toolbar>\n    <ng-container *rtuiToolbarLeft>\n        @if (isMobile() && isMobileMenuButtonShown()) {\n            <button mat-icon-button rtBlock=\"mobile-menu-button\" (click)=\"openSideMenu()\">\n                <mat-icon>menu</mat-icon>\n            </button>\n        }\n\n        @if (leftHeaderTpl()) {\n            <ng-template *ngTemplateOutlet=\"leftHeaderTpl() ?? null\" />\n        }\n    </ng-container>\n\n    @if (centerHeaderTpl()) {\n        <ng-container *rtuiToolbarCenter>\n            <ng-template *ngTemplateOutlet=\"centerHeaderTpl() ?? null\" />\n        </ng-container>\n    }\n\n    @if (rightHeaderTpl()) {\n        <ng-container *rtuiToolbarRight>\n            <ng-template *ngTemplateOutlet=\"rightHeaderTpl() ?? null\" />\n        </ng-container>\n    }\n</rtui-toolbar>\n", styles: [""], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: 
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: RtuiHeaderComponent, isStandalone: true, selector: "rtui-header", inputs: { isMobile: { classPropertyName: "isMobile", publicName: "isMobile", isSignal: true, isRequired: false, transformFunction: null }, isMobileMenuButtonShown: { classPropertyName: "isMobileMenuButtonShown", publicName: "isMobileMenuButtonShown", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { openMobileMenuAction: "openMobileMenuAction" }, queries: [{ propertyName: "leftHeaderTpl", first: true, predicate: RtuiHeaderLeftDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "centerHeaderTpl", first: true, predicate: RtuiHeaderCenterDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "rightHeaderTpl", first: true, predicate: RtuiHeaderRightDirective, descendants: true, read: TemplateRef, isSignal: true }], ngImport: i0, template: "<rtui-toolbar>\n    <ng-container *rtuiToolbarLeft>\n        @if (isMobile() && isMobileMenuButtonShown()) {\n            <button mat-icon-button rtBlock=\"mobile-menu-button\" (click)=\"openSideMenu()\">\n                <mat-icon>menu</mat-icon>\n            </button>\n        }\n\n        @if (leftHeaderTpl()) {\n            <ng-template *ngTemplateOutlet=\"leftHeaderTpl() ?? null\" />\n        }\n    </ng-container>\n\n    @if (centerHeaderTpl()) {\n        <ng-container *rtuiToolbarCenter>\n            <ng-template *ngTemplateOutlet=\"centerHeaderTpl() ?? null\" />\n        </ng-container>\n    }\n\n    @if (rightHeaderTpl()) {\n        <ng-container *rtuiToolbarRight>\n            <ng-template *ngTemplateOutlet=\"rightHeaderTpl() ?? null\" />\n        </ng-container>\n    }\n</rtui-toolbar>\n", styles: [""], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: 
                 // BEM
                 BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "component", type: 
                 // Ui-kit
                 RtuiToolbarComponent, selector: "rtui-toolbar", inputs: ["isVisibleToolbar", "sticky"] }, { kind: "directive", type: RtuiToolbarLeftDirective, selector: "[rtuiToolbarLeft]" }, { kind: "directive", type: RtuiToolbarCenterDirective, selector: "[rtuiToolbarCenter]" }, { kind: "directive", type: RtuiToolbarRightDirective, selector: "[rtuiToolbarRight]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtuiHeaderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiHeaderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'rtui-header', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         NgTemplateOutlet,
@@ -1080,10 +1121,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
 class RtuiClearButtonComponent {
     constructor() {
         this.#defaultTooltipPosition = 'above';
-        this.isMobile = input(false, { ...(ngDevMode ? { debugName: "isMobile" } : {}), transform: booleanAttribute });
-        this.isButtonShown = input(true, { ...(ngDevMode ? { debugName: "isButtonShown" } : {}), transform: booleanAttribute });
-        this.tooltip = input(null, { ...(ngDevMode ? { debugName: "tooltip" } : {}), transform: (value) => (isString(value) ? value.trim() : '') });
-        this.tooltipPosition = input(this.#defaultTooltipPosition, { ...(ngDevMode ? { debugName: "tooltipPosition" } : {}) });
+        this.isMobile = input(false, { ...(ngDevMode ? { debugName: "isMobile" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.isButtonShown = input(true, { ...(ngDevMode ? { debugName: "isButtonShown" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.tooltip = input(null, { ...(ngDevMode ? { debugName: "tooltip" } : /* istanbul ignore next */ {}), transform: (value) => (isString(value) ? value.trim() : '') });
+        this.tooltipPosition = input(this.#defaultTooltipPosition, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "tooltipPosition" }] : /* istanbul ignore next */ []));
         this.keydownAction = output();
         this.clickAction = output();
     }
@@ -1094,14 +1136,14 @@ class RtuiClearButtonComponent {
     onClick() {
         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: ["@charset \"UTF-8\";:host{--rt-clear-button-host-margin: 0 .5rem 0 0;--rt-clear-button-host-padding: .1rem;--rt-clear-button-host-background-color: var(--rt-bg-base-strong);--rt-clear-button-icon-size: 1rem;--rt-clear-button-icon-color: var(--rt-text-base-secondary);--rt-clear-button-icon-hover-color: var(--rt-text-base-strong)}:host .rtui-clear-button{display:flex;align-items:center;justify-content:center;padding:var(--rt-clear-button-host-padding);border:none;border-radius:var(--rt-radius-full);margin:var(--rt-clear-button-host-margin);background-color:var(--rt-clear-button-host-background-color)}:host .rtui-clear-button--invisible{position:absolute;overflow:hidden;width:1px;height:1px;padding:0;border:0;margin:-1px;clip:rect(0 0 0 0);clip-path:inset(100%);pointer-events:none;white-space:nowrap}:host .rtui-clear-button__icon{width:var(--rt-clear-button-icon-size);height:var(--rt-clear-button-icon-size);color:var(--rt-clear-button-icon-color);font-size:var(--rt-clear-button-icon-size)}:host .rtui-clear-button__icon:hover{color:var(--rt-clear-button-icon-hover-color)}\n"], dependencies: [{ kind: "component", type: 
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiClearButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.5", type: RtuiClearButtonComponent, isStandalone: true, selector: "rtui-clear-button", inputs: { isMobile: { classPropertyName: "isMobile", publicName: "isMobile", isSignal: true, isRequired: false, transformFunction: null }, isButtonShown: { classPropertyName: "isButtonShown", publicName: "isButtonShown", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null }, tooltipPosition: { classPropertyName: "tooltipPosition", publicName: "tooltipPosition", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { keydownAction: "keydownAction", clickAction: "clickAction" }, ngImport: i0, template: "<button\n    rtBlock=\"rtui-clear-button\"\n    [rtMod]=\"{ invisible: !isButtonShown() }\"\n    [matTooltip]=\"tooltip() ?? ''\"\n    [matTooltipPosition]=\"tooltipPosition()\"\n    [matTooltipDisabled]=\"isMobile()\"\n    (keydown)=\"onKeydown()\"\n    (click)=\"onClick()\">\n    <mat-icon rtElem=\"icon\">close</mat-icon>\n</button>\n", styles: ["@charset \"UTF-8\";:host{--rt-clear-button-host-margin: 0 .5rem 0 0;--rt-clear-button-host-padding: .1rem;--rt-clear-button-host-background-color: var(--rt-bg-base-strong);--rt-clear-button-icon-size: 1rem;--rt-clear-button-icon-color: var(--rt-text-base-secondary);--rt-clear-button-icon-hover-color: var(--rt-text-base-strong)}:host .rtui-clear-button{display:flex;align-items:center;justify-content:center;padding:var(--rt-clear-button-host-padding);border:none;border-radius:var(--rt-radius-full);margin:var(--rt-clear-button-host-margin);background-color:var(--rt-clear-button-host-background-color)}:host .rtui-clear-button--invisible{position:absolute;overflow:hidden;width:1px;height:1px;padding:0;border:0;margin:-1px;clip:rect(0 0 0 0);clip-path:inset(100%);pointer-events:none;white-space:nowrap}:host .rtui-clear-button__icon{width:var(--rt-clear-button-icon-size);height:var(--rt-clear-button-icon-size);color:var(--rt-clear-button-icon-color);font-size:var(--rt-clear-button-icon-size)}:host .rtui-clear-button__icon:hover{color:var(--rt-clear-button-icon-hover-color)}\n"], dependencies: [{ kind: "component", type: 
                 // Material
                 MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: 
                 // BEM
                 BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }, { kind: "directive", type: ModDirective, selector: "[rtMod]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtuiClearButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiClearButtonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'rtui-clear-button', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         // Material
@@ -1131,28 +1173,36 @@ class RtuiPaginationComponent {
         this.#fb = inject(FormBuilder);
         this.#windowRef = inject(WINDOW);
         /** Current Page Model */
-        this.currentPageModel = input.required({ ...(ngDevMode ? { debugName: "currentPageModel" } : {}) });
+        this.currentPageModel = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "currentPageModel" }] : /* istanbul ignore next */ []));
         /** Indicates is mobile view */
-        this.isMobile = input.required({ ...(ngDevMode ? { debugName: "isMobile" } : {}), transform: booleanAttribute });
+        this.isMobile = input.required({ ...(ngDevMode ? { debugName: "isMobile" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /** Output action when Page Model changed */
         this.pageModelChange = output();
         /** Form control for selected page size */
         this.control = this.#fb.nonNullable.control(DEFAULT_PAGE_SIZE);
-        this.divider = signal('...', { ...(ngDevMode ? { debugName: "divider" } : {}) });
+        this.divider = signal('...', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "divider" }] : /* istanbul ignore next */ []));
         /** Page size options */
         this.pageSizes = computed(() => {
             return [10, 20, 40, 50].filter((el) => el / 2 <= this.currentPageModel()?.totalCount || el === this.currentPageModel()?.pageSize);
-        }, { ...(ngDevMode ? { debugName: "pageSizes" } : {}) });
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "pageSizes" }] : /* istanbul ignore next */ []));
         /** Array of current page numbers */
-        this.numbers = signal([], { ...(ngDevMode ? { debugName: "numbers" } : {}) });
+        this.numbers = signal([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "numbers" }] : /* istanbul ignore next */ []));
         /** Page Model for compare */
-        this.previousPageModel = signal(null, { ...(ngDevMode ? { debugName: "previousPageModel" } : {}) });
+        this.previousPageModel = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "previousPageModel" }] : /* istanbul ignore next */ []));
         /** Value of full content width */
-        this.minContentFitWidth = signal(0, { ...(ngDevMode ? { debugName: "minContentFitWidth" } : {}) });
+        this.minContentFitWidth = signal(0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "minContentFitWidth" }] : /* istanbul ignore next */ []));
         /** Indicates is content clipped */
-        this.isContentClipped = signal(false, { ...(ngDevMode ? { debugName: "isContentClipped" } : {}) });
+        this.isContentClipped = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isContentClipped" }] : /* istanbul ignore next */ []));
         /** Container template ref */
-        this.containerRef = viewChild('containerRef', { ...(ngDevMode ? { debugName: "containerRef" } : {}) });
+        this.containerRef = viewChild('containerRef', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "containerRef" }] : /* istanbul ignore next */ []));
     }
     #injector;
     #destroyRef;
@@ -1251,10 +1301,10 @@ class RtuiPaginationComponent {
             this.minContentFitWidth.set(currentContainerWidth);
         }
     }
-    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: ["@charset \"UTF-8\";:host{display:flex;width:fit-content;height:100%;--rt-table-pagination-container-gap: 2rem;--rt-table-pagination-container-margin: .5rem 0;--rt-table-pagination-container-color: var(--rt-text-base-secondary);--rt-table-pagination-container-font-size: .875rem;--rt-table-pagination-container-font-weight: 400;--rt-table-pagination-container-line-height: 1rem;--rt-table-pagination-container-mobile-gap: 1rem;--rt-table-pagination-paging-gap: .5rem;--rt-table-pagination-paging-mobile-margin: .5rem 0 0 0;--rt-table-pagination-paging-item-padding: .5rem;--rt-table-pagination-paging-item-border: 1px solid var(--rt-border-neutral-medium);--rt-table-pagination-paging-item-border-radius: .75rem;--rt-table-pagination-paging-item-hover-color: var(--rt-text-static-light);--rt-table-pagination-paging-item-hover-background-color: var(--rt-bg-base-emphasis);--rt-table-pagination-paging-item-active-color: var(--rt-text-static-light);--rt-table-pagination-paging-item-active-background-color: var(--rt-bg-base-emphasis);--rt-table-pagination-paging-item-disabled-svg-opacity: .3;--rt-table-pagination-size-toggle-gap: .75rem;--rt-table-pagination-size-toggle-selector-min-width: 3rem;--rt-table-pagination-size-toggle-selector-height: 2rem;--rt-table-pagination-size-toggle-selector-mobile-margin: 0 0 .5rem 0}:host .pagination-container{position:relative;display:flex;align-items:center;justify-content:flex-start;color:var(--rt-table-pagination-container-color);font-size:var(--rt-table-pagination-container-font-size);font-weight:var(--rt-table-pagination-container-font-weight);gap:var(--rt-table-pagination-container-gap);line-height:var(--rt-table-pagination-container-line-height)}:host .pagination-container--clipped{flex-direction:column;align-items:flex-start;justify-content:center;gap:var(--rt-table-pagination-container-mobile-gap)}:host .pagination-container--mobile{width:100%;justify-content:space-between}:host .pagination-container .paging{display:flex;align-items:center;justify-content:center;margin:var(--rt-table-pagination-container-margin);gap:var(--rt-table-pagination-paging-gap)}:host .pagination-container .paging--clipped{margin:var(--rt-table-pagination-paging-mobile-margin)}:host .pagination-container .paging__item{position:relative;display:flex;align-items:center;justify-content:center;padding:var(--rt-table-pagination-paging-item-padding);border:var(--rt-table-pagination-paging-item-border);border-radius:var(--rt-table-pagination-paging-item-border-radius);background-color:transparent;cursor:default;pointer-events:none}:host .pagination-container .paging__item-label{min-width:1rem;text-align:center}:host .pagination-container .paging__item svg{fill-opacity:var(--rt-table-pagination-paging-item-disabled-svg-opacity)}:host .pagination-container .paging__item:hover:not(.divider){background-color:var(--rt-table-pagination-paging-item-hover-background-color);color:var(--rt-table-pagination-paging-item-hover-color)}:host .pagination-container .paging__item--active{background-color:var(--rt-table-pagination-paging-item-active-background-color);color:var(--rt-table-pagination-paging-item-active-color)}:host .pagination-container .paging__item--enabled{cursor:pointer;pointer-events:auto}:host .pagination-container .paging__item--enabled svg{fill-opacity:1}:host .pagination-container .paging__item--divider{border:none;cursor:default;pointer-events:none}:host .pagination-container .page-size-toggle{display:flex;flex-direction:row;align-items:center;justify-content:center;margin:var(--rt-table-pagination-container-margin);gap:var(--rt-table-pagination-size-toggle-gap)}:host .pagination-container .page-size-toggle--clipped{margin:var(--rt-table-pagination-size-toggle-selector-mobile-margin)}:host .pagination-container .page-size-toggle__title{white-space:nowrap}:host .pagination-container .page-size-toggle__selector{width:auto;min-width:var(--rt-table-pagination-size-toggle-selector-min-width);height:var(--rt-table-pagination-size-toggle-selector-height);border:var(--rt-table-pagination-paging-item-border);border-radius:var(--rt-table-pagination-paging-item-border-radius);background-color:transparent;color:var(--rt-table-pagination-container-color);cursor:pointer;font-size:var(--rt-table-pagination-container-font-size);font-weight:var(--rt-table-pagination-container-font-weight);line-height:var(--rt-table-pagination-container-line-height)}@media screen and (max-width:599px){:host{width:100%}:host .pagination-container{width:100%;justify-content:space-between}}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }, { kind: "directive", type: ModDirective, selector: "[rtMod]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiPaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: RtuiPaginationComponent, isStandalone: true, selector: "rtui-pagination", inputs: { currentPageModel: { classPropertyName: "currentPageModel", publicName: "currentPageModel", isSignal: true, isRequired: true, transformFunction: null }, isMobile: { classPropertyName: "isMobile", publicName: "isMobile", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { pageModelChange: "pageModelChange" }, host: { listeners: { "window:resize": "onResize()" } }, viewQueries: [{ propertyName: "containerRef", first: true, predicate: ["containerRef"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (currentPageModel().totalCount > pageSizes()[0]) {\n    <div #containerRef rtBlock=\"pagination-container\" [rtMod]=\"{ clipped: isContentClipped() && !isMobile() }\">\n        <div rtBlock=\"paging\" [rtMod]=\"{ clipped: isContentClipped() && !isMobile() }\">\n            <div\n                rtElem=\"item\"\n                role=\"button\"\n                tabindex=\"0\"\n                [rtMod]=\"{ enabled: currentPageModel()?.hasPrev }\"\n                [class.c-pagination__paging-item--disabled]=\"!currentPageModel().hasPrev\"\n                (click)=\"onChangePageNumber(currentPageModel().pageNumber - 1)\"\n                (keydown)=\"onChangePageNumber(currentPageModel().pageNumber - 1)\">\n                <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                    <path d=\"M15.5 8.5H0.5\" stroke=\"currentColor\" stroke-miterlimit=\"10\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                    <path\n                        d=\"M5.5 3.5L0.5 8.5L5.5 13.5\"\n                        stroke=\"currentColor\"\n                        stroke-miterlimit=\"10\"\n                        stroke-linecap=\"round\"\n                        stroke-linejoin=\"round\" />\n                </svg>\n            </div>\n\n            @if (isMobile()) {\n                <div rtElem=\"item\" rtMod=\"active\" role=\"button\" tabindex=\"1\">\n                    <span rtElem=\"item-label\">{{ currentPageModel().pageNumber }}</span>\n                </div>\n            } @else {\n                @for (number of numbers(); track $index) {\n                    <div\n                        rtElem=\"item\"\n                        role=\"button\"\n                        tabindex=\"1\"\n                        [rtMod]=\"{\n                            active: currentPageModel().pageNumber === number,\n                            divider: number === divider(),\n                            enabled: number !== divider() && currentPageModel().pageNumber !== number,\n                        }\"\n                        (click)=\"onChangePageNumber(number)\"\n                        (keydown)=\"onChangePageNumber(number)\">\n                        <span rtElem=\"item-label\">{{ number }}</span>\n                    </div>\n                }\n            }\n\n            <div\n                rtElem=\"item\"\n                role=\"button\"\n                tabindex=\"3\"\n                [rtMod]=\"{ enabled: currentPageModel()?.hasNext }\"\n                (click)=\"onChangePageNumber(currentPageModel().pageNumber + 1)\"\n                (keydown)=\"onChangePageNumber(currentPageModel().pageNumber + 1)\">\n                <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                    <path d=\"M0.5 8.5H15.5\" stroke=\"currentColor\" stroke-miterlimit=\"10\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                    <path\n                        d=\"M10.5 3.5L15.5 8.5L10.5 13.5\"\n                        stroke=\"currentColor\"\n                        stroke-miterlimit=\"10\"\n                        stroke-linecap=\"round\"\n                        stroke-linejoin=\"round\" />\n                </svg>\n            </div>\n        </div>\n\n        <div rtBlock=\"page-size-toggle\" [rtMod]=\"{ clipped: isContentClipped() && !isMobile() }\">\n            @if (!isMobile()) {\n                <div rtElem=\"title\">Items per page:</div>\n            }\n\n            <select rtElem=\"selector\" [formControl]=\"control\">\n                @for (size of pageSizes(); track $index) {\n                    <option [value]=\"size\">{{ size }}</option>\n                }\n            </select>\n        </div>\n    </div>\n}\n", styles: ["@charset \"UTF-8\";:host{display:flex;width:fit-content;height:100%;--rt-table-pagination-container-gap: 2rem;--rt-table-pagination-container-margin: .5rem 0;--rt-table-pagination-container-color: var(--rt-text-base-secondary);--rt-table-pagination-container-font-size: .875rem;--rt-table-pagination-container-font-weight: 400;--rt-table-pagination-container-line-height: 1rem;--rt-table-pagination-container-mobile-gap: 1rem;--rt-table-pagination-paging-gap: .5rem;--rt-table-pagination-paging-mobile-margin: .5rem 0 0 0;--rt-table-pagination-paging-item-padding: .5rem;--rt-table-pagination-paging-item-border: 1px solid var(--rt-border-neutral-medium);--rt-table-pagination-paging-item-border-radius: .75rem;--rt-table-pagination-paging-item-hover-color: var(--rt-text-static-light);--rt-table-pagination-paging-item-hover-background-color: var(--rt-bg-base-emphasis);--rt-table-pagination-paging-item-active-color: var(--rt-text-static-light);--rt-table-pagination-paging-item-active-background-color: var(--rt-bg-base-emphasis);--rt-table-pagination-paging-item-disabled-svg-opacity: .3;--rt-table-pagination-size-toggle-gap: .75rem;--rt-table-pagination-size-toggle-selector-min-width: 3rem;--rt-table-pagination-size-toggle-selector-height: 2rem;--rt-table-pagination-size-toggle-selector-mobile-margin: 0 0 .5rem 0}:host .pagination-container{position:relative;display:flex;align-items:center;justify-content:flex-start;color:var(--rt-table-pagination-container-color);font-size:var(--rt-table-pagination-container-font-size);font-weight:var(--rt-table-pagination-container-font-weight);gap:var(--rt-table-pagination-container-gap);line-height:var(--rt-table-pagination-container-line-height)}:host .pagination-container--clipped{flex-direction:column;align-items:flex-start;justify-content:center;gap:var(--rt-table-pagination-container-mobile-gap)}:host .pagination-container--mobile{width:100%;justify-content:space-between}:host .pagination-container .paging{display:flex;align-items:center;justify-content:center;margin:var(--rt-table-pagination-container-margin);gap:var(--rt-table-pagination-paging-gap)}:host .pagination-container .paging--clipped{margin:var(--rt-table-pagination-paging-mobile-margin)}:host .pagination-container .paging__item{position:relative;display:flex;align-items:center;justify-content:center;padding:var(--rt-table-pagination-paging-item-padding);border:var(--rt-table-pagination-paging-item-border);border-radius:var(--rt-table-pagination-paging-item-border-radius);background-color:transparent;cursor:default;pointer-events:none}:host .pagination-container .paging__item-label{min-width:1rem;text-align:center}:host .pagination-container .paging__item svg{fill-opacity:var(--rt-table-pagination-paging-item-disabled-svg-opacity)}:host .pagination-container .paging__item:hover:not(.divider){background-color:var(--rt-table-pagination-paging-item-hover-background-color);color:var(--rt-table-pagination-paging-item-hover-color)}:host .pagination-container .paging__item--active{background-color:var(--rt-table-pagination-paging-item-active-background-color);color:var(--rt-table-pagination-paging-item-active-color)}:host .pagination-container .paging__item--enabled{cursor:pointer;pointer-events:auto}:host .pagination-container .paging__item--enabled svg{fill-opacity:1}:host .pagination-container .paging__item--divider{border:none;cursor:default;pointer-events:none}:host .pagination-container .page-size-toggle{display:flex;flex-direction:row;align-items:center;justify-content:center;margin:var(--rt-table-pagination-container-margin);gap:var(--rt-table-pagination-size-toggle-gap)}:host .pagination-container .page-size-toggle--clipped{margin:var(--rt-table-pagination-size-toggle-selector-mobile-margin)}:host .pagination-container .page-size-toggle__title{white-space:nowrap}:host .pagination-container .page-size-toggle__selector{width:auto;min-width:var(--rt-table-pagination-size-toggle-selector-min-width);height:var(--rt-table-pagination-size-toggle-selector-height);border:var(--rt-table-pagination-paging-item-border);border-radius:var(--rt-table-pagination-paging-item-border-radius);background-color:transparent;color:var(--rt-table-pagination-container-color);cursor:pointer;font-size:var(--rt-table-pagination-container-font-size);font-weight:var(--rt-table-pagination-container-font-weight);line-height:var(--rt-table-pagination-container-line-height)}@media screen and (max-width:599px){:host{width:100%}:host .pagination-container{width:100%;justify-content:space-between}}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple]):not([ngNoCva])[formControlName],select:not([multiple]):not([ngNoCva])[formControl],select:not([multiple]):not([ngNoCva])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }, { kind: "directive", type: ModDirective, selector: "[rtMod]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtuiPaginationComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiPaginationComponent, decorators: [{
             type: Component,
             args: [{ selector: 'rtui-pagination', changeDetection: ChangeDetectionStrategy.OnPush, imports: [ReactiveFormsModule, BlockDirective, ElemDirective, ModDirective], template: "@if (currentPageModel().totalCount > pageSizes()[0]) {\n    <div #containerRef rtBlock=\"pagination-container\" [rtMod]=\"{ clipped: isContentClipped() && !isMobile() }\">\n        <div rtBlock=\"paging\" [rtMod]=\"{ clipped: isContentClipped() && !isMobile() }\">\n            <div\n                rtElem=\"item\"\n                role=\"button\"\n                tabindex=\"0\"\n                [rtMod]=\"{ enabled: currentPageModel()?.hasPrev }\"\n                [class.c-pagination__paging-item--disabled]=\"!currentPageModel().hasPrev\"\n                (click)=\"onChangePageNumber(currentPageModel().pageNumber - 1)\"\n                (keydown)=\"onChangePageNumber(currentPageModel().pageNumber - 1)\">\n                <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                    <path d=\"M15.5 8.5H0.5\" stroke=\"currentColor\" stroke-miterlimit=\"10\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                    <path\n                        d=\"M5.5 3.5L0.5 8.5L5.5 13.5\"\n                        stroke=\"currentColor\"\n                        stroke-miterlimit=\"10\"\n                        stroke-linecap=\"round\"\n                        stroke-linejoin=\"round\" />\n                </svg>\n            </div>\n\n            @if (isMobile()) {\n                <div rtElem=\"item\" rtMod=\"active\" role=\"button\" tabindex=\"1\">\n                    <span rtElem=\"item-label\">{{ currentPageModel().pageNumber }}</span>\n                </div>\n            } @else {\n                @for (number of numbers(); track $index) {\n                    <div\n                        rtElem=\"item\"\n                        role=\"button\"\n                        tabindex=\"1\"\n                        [rtMod]=\"{\n                            active: currentPageModel().pageNumber === number,\n                            divider: number === divider(),\n                            enabled: number !== divider() && currentPageModel().pageNumber !== number,\n                        }\"\n                        (click)=\"onChangePageNumber(number)\"\n                        (keydown)=\"onChangePageNumber(number)\">\n                        <span rtElem=\"item-label\">{{ number }}</span>\n                    </div>\n                }\n            }\n\n            <div\n                rtElem=\"item\"\n                role=\"button\"\n                tabindex=\"3\"\n                [rtMod]=\"{ enabled: currentPageModel()?.hasNext }\"\n                (click)=\"onChangePageNumber(currentPageModel().pageNumber + 1)\"\n                (keydown)=\"onChangePageNumber(currentPageModel().pageNumber + 1)\">\n                <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                    <path d=\"M0.5 8.5H15.5\" stroke=\"currentColor\" stroke-miterlimit=\"10\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                    <path\n                        d=\"M10.5 3.5L15.5 8.5L10.5 13.5\"\n                        stroke=\"currentColor\"\n                        stroke-miterlimit=\"10\"\n                        stroke-linecap=\"round\"\n                        stroke-linejoin=\"round\" />\n                </svg>\n            </div>\n        </div>\n\n        <div rtBlock=\"page-size-toggle\" [rtMod]=\"{ clipped: isContentClipped() && !isMobile() }\">\n            @if (!isMobile()) {\n                <div rtElem=\"title\">Items per page:</div>\n            }\n\n            <select rtElem=\"selector\" [formControl]=\"control\">\n                @for (size of pageSizes(); track $index) {\n                    <option [value]=\"size\">{{ size }}</option>\n                }\n            </select>\n        </div>\n    </div>\n}\n", styles: ["@charset \"UTF-8\";:host{display:flex;width:fit-content;height:100%;--rt-table-pagination-container-gap: 2rem;--rt-table-pagination-container-margin: .5rem 0;--rt-table-pagination-container-color: var(--rt-text-base-secondary);--rt-table-pagination-container-font-size: .875rem;--rt-table-pagination-container-font-weight: 400;--rt-table-pagination-container-line-height: 1rem;--rt-table-pagination-container-mobile-gap: 1rem;--rt-table-pagination-paging-gap: .5rem;--rt-table-pagination-paging-mobile-margin: .5rem 0 0 0;--rt-table-pagination-paging-item-padding: .5rem;--rt-table-pagination-paging-item-border: 1px solid var(--rt-border-neutral-medium);--rt-table-pagination-paging-item-border-radius: .75rem;--rt-table-pagination-paging-item-hover-color: var(--rt-text-static-light);--rt-table-pagination-paging-item-hover-background-color: var(--rt-bg-base-emphasis);--rt-table-pagination-paging-item-active-color: var(--rt-text-static-light);--rt-table-pagination-paging-item-active-background-color: var(--rt-bg-base-emphasis);--rt-table-pagination-paging-item-disabled-svg-opacity: .3;--rt-table-pagination-size-toggle-gap: .75rem;--rt-table-pagination-size-toggle-selector-min-width: 3rem;--rt-table-pagination-size-toggle-selector-height: 2rem;--rt-table-pagination-size-toggle-selector-mobile-margin: 0 0 .5rem 0}:host .pagination-container{position:relative;display:flex;align-items:center;justify-content:flex-start;color:var(--rt-table-pagination-container-color);font-size:var(--rt-table-pagination-container-font-size);font-weight:var(--rt-table-pagination-container-font-weight);gap:var(--rt-table-pagination-container-gap);line-height:var(--rt-table-pagination-container-line-height)}:host .pagination-container--clipped{flex-direction:column;align-items:flex-start;justify-content:center;gap:var(--rt-table-pagination-container-mobile-gap)}:host .pagination-container--mobile{width:100%;justify-content:space-between}:host .pagination-container .paging{display:flex;align-items:center;justify-content:center;margin:var(--rt-table-pagination-container-margin);gap:var(--rt-table-pagination-paging-gap)}:host .pagination-container .paging--clipped{margin:var(--rt-table-pagination-paging-mobile-margin)}:host .pagination-container .paging__item{position:relative;display:flex;align-items:center;justify-content:center;padding:var(--rt-table-pagination-paging-item-padding);border:var(--rt-table-pagination-paging-item-border);border-radius:var(--rt-table-pagination-paging-item-border-radius);background-color:transparent;cursor:default;pointer-events:none}:host .pagination-container .paging__item-label{min-width:1rem;text-align:center}:host .pagination-container .paging__item svg{fill-opacity:var(--rt-table-pagination-paging-item-disabled-svg-opacity)}:host .pagination-container .paging__item:hover:not(.divider){background-color:var(--rt-table-pagination-paging-item-hover-background-color);color:var(--rt-table-pagination-paging-item-hover-color)}:host .pagination-container .paging__item--active{background-color:var(--rt-table-pagination-paging-item-active-background-color);color:var(--rt-table-pagination-paging-item-active-color)}:host .pagination-container .paging__item--enabled{cursor:pointer;pointer-events:auto}:host .pagination-container .paging__item--enabled svg{fill-opacity:1}:host .pagination-container .paging__item--divider{border:none;cursor:default;pointer-events:none}:host .pagination-container .page-size-toggle{display:flex;flex-direction:row;align-items:center;justify-content:center;margin:var(--rt-table-pagination-container-margin);gap:var(--rt-table-pagination-size-toggle-gap)}:host .pagination-container .page-size-toggle--clipped{margin:var(--rt-table-pagination-size-toggle-selector-mobile-margin)}:host .pagination-container .page-size-toggle__title{white-space:nowrap}:host .pagination-container .page-size-toggle__selector{width:auto;min-width:var(--rt-table-pagination-size-toggle-selector-min-width);height:var(--rt-table-pagination-size-toggle-selector-height);border:var(--rt-table-pagination-paging-item-border);border-radius:var(--rt-table-pagination-paging-item-border-radius);background-color:transparent;color:var(--rt-table-pagination-container-color);cursor:pointer;font-size:var(--rt-table-pagination-container-font-size);font-weight:var(--rt-table-pagination-container-font-weight);line-height:var(--rt-table-pagination-container-line-height)}@media screen and (max-width:599px){:host{width:100%}:host .pagination-container{width:100%;justify-content:space-between}}\n"] }]
         }], propDecorators: { currentPageModel: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentPageModel", required: true }] }], isMobile: [{ type: i0.Input, args: [{ isSignal: true, alias: "isMobile", required: true }] }], pageModelChange: [{ type: i0.Output, args: ["pageModelChange"] }], containerRef: [{ type: i0.ViewChild, args: ['containerRef', { isSignal: true }] }], onResize: [{
@@ -1300,7 +1350,8 @@ class RtTableConfigService {
             isVerticalScrollbarShown: false,
             isHorizontalScrollbarShown: false,
             columns: [],
-        }, { ...(ngDevMode ? { debugName: "#tableConfig" } : {}) });
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#tableConfig" }] : /* istanbul ignore next */ []));
         this.tableConfig = this.#tableConfig.asReadonly();
     }
     #destroyRef;
@@ -1367,27 +1418,29 @@ class RtTableConfigService {
             defaultConfig.length === savedConfig.length &&
             areArraysEqual(defaultConfig.map((el) => el.propName).sort(), savedConfig.map((el) => el.propName).sort()));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtTableConfigService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtTableConfigService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtTableConfigService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtTableConfigService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtTableConfigService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtTableConfigService, decorators: [{
             type: Injectable
         }] });
 
 class RtCommonSelectorsDirective {
     constructor() {
         /** Indicates is multiselect available */
-        this.isMultiSelect = input(true, { ...(ngDevMode ? { debugName: "isMultiSelect" } : {}), transform: booleanAttribute });
+        this.isMultiSelect = input(true, { ...(ngDevMode ? { debugName: "isMultiSelect" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /** Indicates is 'Select all' checkbox shown  */
-        this.isSelectorColumnShown = input(false, { ...(ngDevMode ? { debugName: "isSelectorColumnShown" } : {}), transform: booleanAttribute });
+        this.isSelectorColumnShown = input(false, { ...(ngDevMode ? { debugName: "isSelectorColumnShown" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /** Indicates is selectors column disabled */
-        this.isSelectorsColumnDisabled = input(false, { ...(ngDevMode ? { debugName: "isSelectorsColumnDisabled" } : {}), transform: booleanAttribute });
+        this.isSelectorsColumnDisabled = input(false, { ...(ngDevMode ? { debugName: "isSelectorsColumnDisabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /** Selected entities Ids on init */
-        this.selectedEntitiesKeys = input([], { ...(ngDevMode ? { debugName: "selectedEntitiesKeys" } : {}), transform: (value) => transformArrayInput(value) });
+        this.selectedEntitiesKeys = input([], { ...(ngDevMode ? { debugName: "selectedEntitiesKeys" } : /* istanbul ignore next */ {}), transform: (value) => transformArrayInput(value) });
         /** Key of ENTITY_TYPE for compare entities */
-        this.keyExp = signal('id', { ...(ngDevMode ? { debugName: "keyExp" } : {}) });
+        this.keyExp = signal('id', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "keyExp" }] : /* istanbul ignore next */ []));
         /** Current list of entities */
-        this.entities = signal([], { ...(ngDevMode ? { debugName: "entities" } : {}) });
+        this.entities = signal([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "entities" }] : /* istanbul ignore next */ []));
     }
     /** Add page entities to list exclude duplicates */
     addPageEntitiesToListExcludeDuplicates(list) {
@@ -1408,10 +1461,10 @@ class RtCommonSelectorsDirective {
     isAllExistOnPage(selectedEntitiesIds) {
         return !this.entities().find((el) => !selectedEntitiesIds.includes(el[this.keyExp()]));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtCommonSelectorsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.1", type: RtCommonSelectorsDirective, isStandalone: true, inputs: { isMultiSelect: { classPropertyName: "isMultiSelect", publicName: "isMultiSelect", isSignal: true, isRequired: false, transformFunction: null }, isSelectorColumnShown: { classPropertyName: "isSelectorColumnShown", publicName: "isSelectorColumnShown", isSignal: true, isRequired: false, transformFunction: null }, isSelectorsColumnDisabled: { classPropertyName: "isSelectorsColumnDisabled", publicName: "isSelectorsColumnDisabled", isSignal: true, isRequired: false, transformFunction: null }, selectedEntitiesKeys: { classPropertyName: "selectedEntitiesKeys", publicName: "selectedEntitiesKeys", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtCommonSelectorsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.5", type: RtCommonSelectorsDirective, isStandalone: true, inputs: { isMultiSelect: { classPropertyName: "isMultiSelect", publicName: "isMultiSelect", isSignal: true, isRequired: false, transformFunction: null }, isSelectorColumnShown: { classPropertyName: "isSelectorColumnShown", publicName: "isSelectorColumnShown", isSignal: true, isRequired: false, transformFunction: null }, isSelectorsColumnDisabled: { classPropertyName: "isSelectorsColumnDisabled", publicName: "isSelectorsColumnDisabled", isSignal: true, isRequired: false, transformFunction: null }, selectedEntitiesKeys: { classPropertyName: "selectedEntitiesKeys", publicName: "selectedEntitiesKeys", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtCommonSelectorsDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtCommonSelectorsDirective, decorators: [{
             type: Directive
         }], propDecorators: { isMultiSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "isMultiSelect", required: false }] }], isSelectorColumnShown: [{ type: i0.Input, args: [{ isSignal: true, alias: "isSelectorColumnShown", required: false }] }], isSelectorsColumnDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "isSelectorsColumnDisabled", required: false }] }], selectedEntitiesKeys: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedEntitiesKeys", required: false }] }] } });
 
@@ -1422,21 +1475,27 @@ class RtDynamicListSelectorsDirective extends RtCommonSelectorsDirective {
         this.#injector = inject(Injector);
         this.#dynamicListRef = inject(RtuiDynamicListComponent);
         /** Indicates is multiselect extended mod available (use selected and excluded lists) */
-        this.isMultiSelectExtendedMod = input(true, { ...(ngDevMode ? { debugName: "isMultiSelectExtendedMod" } : {}), transform: booleanAttribute });
+        this.isMultiSelectExtendedMod = input(true, { ...(ngDevMode ? { debugName: "isMultiSelectExtendedMod" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /** Indicates is 'Select all' checkbox shown  */
-        this.isSelectAllSelectorShown = input(true, { ...(ngDevMode ? { debugName: "isSelectAllSelectorShown" } : {}), transform: booleanAttribute });
+        this.isSelectAllSelectorShown = input(true, { ...(ngDevMode ? { debugName: "isSelectAllSelectorShown" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /** List of selected entities for processing */
-        this.#selectedEntities = signal([], { ...(ngDevMode ? { debugName: "#selectedEntities" } : {}) });
+        this.#selectedEntities = signal([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#selectedEntities" }] : /* istanbul ignore next */ []));
         /** List of excluded entities for processing */
-        this.#excludedEntities = signal([], { ...(ngDevMode ? { debugName: "#excludedEntities" } : {}) });
+        this.#excludedEntities = signal([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#excludedEntities" }] : /* istanbul ignore next */ []));
         /** Indicates is 'Select all' checkbox selected  for processing */
-        this.#isAllEntitiesSelected = signal(false, { ...(ngDevMode ? { debugName: "#isAllEntitiesSelected" } : {}) });
+        this.#isAllEntitiesSelected = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#isAllEntitiesSelected" }] : /* istanbul ignore next */ []));
         /** Indicates is all page entities checkbox selected  for processing */
-        this.#isPageEntitiesSelected = signal(false, { ...(ngDevMode ? { debugName: "#isPageEntitiesSelected" } : {}) });
+        this.#isPageEntitiesSelected = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#isPageEntitiesSelected" }] : /* istanbul ignore next */ []));
         /** Indicates is page entities checkbox indeterminate  for processing */
-        this.#isPageEntitiesIndeterminate = signal(false, { ...(ngDevMode ? { debugName: "#isPageEntitiesIndeterminate" } : {}) });
+        this.#isPageEntitiesIndeterminate = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#isPageEntitiesIndeterminate" }] : /* istanbul ignore next */ []));
         /** Indicates is multi select extended mod enabled  for processing */
-        this.#isMultiSelectExtendedModEnabled = signal(false, { ...(ngDevMode ? { debugName: "#isMultiSelectExtendedModEnabled" } : {}) });
+        this.#isMultiSelectExtendedModEnabled = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#isMultiSelectExtendedModEnabled" }] : /* istanbul ignore next */ []));
         /** List of selected entities */
         this.selectedEntities = this.#selectedEntities.asReadonly();
         /** List of excluded entities */
@@ -1444,11 +1503,13 @@ class RtDynamicListSelectorsDirective extends RtCommonSelectorsDirective {
         /** List of selected entities ids */
         this.selectedEntitiesIds = computed(() => {
             return this.selectedEntities().map((el) => el[this.keyExp()]);
-        }, { ...(ngDevMode ? { debugName: "selectedEntitiesIds" } : {}) });
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selectedEntitiesIds" }] : /* istanbul ignore next */ []));
         /** List of excluded entities ids */
         this.excludedEntitiesIds = computed(() => {
             return this.excludedEntities().map((el) => el[this.keyExp()]);
-        }, { ...(ngDevMode ? { debugName: "excludedEntitiesIds" } : {}) });
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "excludedEntitiesIds" }] : /* istanbul ignore next */ []));
         /** Indicates is 'Select All' checkbox selected */
         this.isAllEntitiesSelected = this.#isAllEntitiesSelected.asReadonly();
         /** Indicates is all page entities checkbox selected */
@@ -1671,10 +1732,10 @@ class RtDynamicListSelectorsDirective extends RtCommonSelectorsDirective {
         this.#isPageEntitiesSelected.set(this.isAllExistOnPage(this.selectedEntitiesIds()));
         this.#isPageEntitiesIndeterminate.set(this.isOneExistOnPage(this.selectedEntitiesIds()));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtDynamicListSelectorsDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.1", type: RtDynamicListSelectorsDirective, isStandalone: true, selector: "rtui-dynamic-list[rtDynamicListSelectorsDirective]", inputs: { isMultiSelectExtendedMod: { classPropertyName: "isMultiSelectExtendedMod", publicName: "isMultiSelectExtendedMod", isSignal: true, isRequired: false, transformFunction: null }, isSelectAllSelectorShown: { classPropertyName: "isSelectAllSelectorShown", publicName: "isSelectAllSelectorShown", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtDynamicListSelectorsDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.5", type: RtDynamicListSelectorsDirective, isStandalone: true, selector: "rtui-dynamic-list[rtDynamicListSelectorsDirective]", inputs: { isMultiSelectExtendedMod: { classPropertyName: "isMultiSelectExtendedMod", publicName: "isMultiSelectExtendedMod", isSignal: true, isRequired: false, transformFunction: null }, isSelectAllSelectorShown: { classPropertyName: "isSelectAllSelectorShown", publicName: "isSelectAllSelectorShown", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtDynamicListSelectorsDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtDynamicListSelectorsDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'rtui-dynamic-list[rtDynamicListSelectorsDirective]',
@@ -1688,18 +1749,22 @@ class RtTableSelectorsDirective extends RtCommonSelectorsDirective {
         this.#injector = inject(Injector);
         this.#tableRef = inject(RtuiTableComponent);
         /** List of selected entities for processing */
-        this.#selectedEntities = signal([], { ...(ngDevMode ? { debugName: "#selectedEntities" } : {}) });
+        this.#selectedEntities = signal([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#selectedEntities" }] : /* istanbul ignore next */ []));
         /** List of excluded entities for processing */
         /** Indicates is all page entities checkbox selected  for processing */
-        this.#isPageEntitiesSelected = signal(false, { ...(ngDevMode ? { debugName: "#isPageEntitiesSelected" } : {}) });
+        this.#isPageEntitiesSelected = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#isPageEntitiesSelected" }] : /* istanbul ignore next */ []));
         /** Indicates is page entities checkbox indeterminate  for processing */
-        this.#isPageEntitiesIndeterminate = signal(false, { ...(ngDevMode ? { debugName: "#isPageEntitiesIndeterminate" } : {}) });
+        this.#isPageEntitiesIndeterminate = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#isPageEntitiesIndeterminate" }] : /* istanbul ignore next */ []));
         /** List of selected entities */
         this.selectedEntities = this.#selectedEntities.asReadonly();
         /** List of selected entities ids */
         this.selectedEntitiesIds = computed(() => {
             return this.selectedEntities().map((el) => el[this.keyExp()]);
-        }, { ...(ngDevMode ? { debugName: "selectedEntitiesIds" } : {}) });
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selectedEntitiesIds" }] : /* istanbul ignore next */ []));
         /** Indicates is all page entities checkbox selected */
         this.isPageEntitiesSelected = this.#isPageEntitiesSelected.asReadonly();
         /** Indicates is page entities checkbox indeterminate */
@@ -1818,10 +1883,10 @@ class RtTableSelectorsDirective extends RtCommonSelectorsDirective {
         this.#isPageEntitiesSelected.set(this.isAllExistOnPage(this.selectedEntitiesIds()));
         this.#isPageEntitiesIndeterminate.set(this.isOneExistOnPage(this.selectedEntitiesIds()));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtTableSelectorsDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.1", type: RtTableSelectorsDirective, isStandalone: true, selector: "rtui-table[rtTableSelectorsDirective]", usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtTableSelectorsDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: RtTableSelectorsDirective, isStandalone: true, selector: "rtui-table[rtTableSelectorsDirective]", usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtTableSelectorsDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtTableSelectorsDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'rtui-table[rtTableSelectorsDirective]',
@@ -1837,17 +1902,24 @@ class TableBaseCellComponent {
         this.cellValue = computed(() => {
             const transformFn = this.column()?.transform;
             return transformFn ? transformFn(this.row()[this.column().propName]) : this.row()[this.column().propName];
-        }, { ...(ngDevMode ? { debugName: "cellValue" } : {}) });
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "cellValue" }] : /* istanbul ignore next */ []));
         this.cellIconStyle = computed(() => {
             const transformFn = this.column()?.iconTransform;
             return transformFn ? this.#sanitizer.bypassSecurityTrustStyle(transformFn(this.row()[this.column().propName])) : undefined;
-        }, { ...(ngDevMode ? { debugName: "cellIconStyle" } : {}) });
-        this.tooltipValue = computed(() => this.#covertCellValueToString(this.cellValue()), { ...(ngDevMode ? { debugName: "tooltipValue" } : {}) });
-        this.isMouseOver = signal(false, { ...(ngDevMode ? { debugName: "isMouseOver" } : {}) });
-        this.isCopied = signal(false, { ...(ngDevMode ? { debugName: "isCopied" } : {}) });
-        this.row = input.required({ ...(ngDevMode ? { debugName: "row" } : {}) });
-        this.column = input.required({ ...(ngDevMode ? { debugName: "column" } : {}) });
-        this.isMobile = input(false, { ...(ngDevMode ? { debugName: "isMobile" } : {}), transform: booleanAttribute });
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "cellIconStyle" }] : /* istanbul ignore next */ []));
+        this.tooltipValue = computed(() => this.#covertCellValueToString(this.cellValue()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "tooltipValue" }] : /* istanbul ignore next */ []));
+        this.isMouseOver = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isMouseOver" }] : /* istanbul ignore next */ []));
+        this.isCopied = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isCopied" }] : /* istanbul ignore next */ []));
+        this.row = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "row" }] : /* istanbul ignore next */ []));
+        this.column = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "column" }] : /* istanbul ignore next */ []));
+        this.isMobile = input(false, { ...(ngDevMode ? { debugName: "isMobile" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     }
     #clipboard;
     #sanitizer;
@@ -1889,8 +1961,8 @@ class TableBaseCellComponent {
             return JSON.stringify(value);
         }
     }
-    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: ["@charset \"UTF-8\";:host{position:relative;display:flex;width:100%;height:100%;align-items:center;gap:var(--rt-table-base-cell-host-gap);--rt-table-base-cell-host-gap: .5rem;--rt-table-base-cell-prefix-icon-size: 1.5rem;--rt-table-base-cell-suffix-icon-size: 1.5rem;--rt-table-base-cell-title-padding: .5rem .5rem .5rem 0;--rt-table-base-cell-copy-button-position-right: .25rem;--rt-table-base-cell-copy-button-position-left: .25rem;--rt-table-base-cell-copy-button-padding: .25rem;--rt-table-base-cell-copy-button-background-color: var(--mat-fab-small-container-color);--rt-table-base-cell-copy-button-icon-size: 1rem;--rt-table-base-cell-copy-button-complete-color: var(--rt-text-base-strong)}:host .base-cell__prefix{width:var(--rt-table-base-cell-prefix-icon-size);height:var(--rt-table-base-cell-prefix-icon-size);font-size:var(--rt-table-base-cell-prefix-icon-size)}:host .base-cell__title{display:table;width:100%;table-layout:fixed}:host .base-cell__title-text{overflow:hidden;width:100%;padding:var(--rt-table-base-cell-title-padding);text-overflow:ellipsis;white-space:nowrap}:host .base-cell__title--align--left{text-align:left}:host .base-cell__title--align--center{text-align:center}:host .base-cell__title--align--right{text-align:right}:host .base-cell__suffix{width:var(--rt-table-base-cell-suffix-icon-size);height:var(--rt-table-base-cell-suffix-icon-size);font-size:var(--rt-table-base-cell-suffix-icon-size)}:host .base-cell__prefix,:host .base-cell__suffix{width:fit-content;min-width:fit-content}:host .base-cell__copy-button{position:absolute;padding:var(--rt-table-base-cell-copy-button-padding);background-color:var(--rt-table-base-cell-copy-button-background-color);visibility:hidden}:host .base-cell__copy-button--position--left{left:var(--rt-table-base-cell-copy-button-position-left)}:host .base-cell__copy-button--position--right{right:var(--rt-table-base-cell-copy-button-position-right)}:host .base-cell__copy-button:hover,:host .base-cell__copy-button:focus,:host .base-cell__copy-button:active{background-color:var(--rt-table-base-cell-copy-button-background-color)}:host .base-cell__copy-button--complete{cursor:not-allowed}:host .base-cell__copy-button--complete:hover,:host .base-cell__copy-button--complete:focus,:host .base-cell__copy-button--complete:active{color:var(--rt-table-base-cell-copy-button-complete-color)}:host .base-cell__copy-button--visible{visibility:visible}:host .base-cell__copy-icon{width:var(--rt-table-base-cell-copy-button-icon-size);height:var(--rt-table-base-cell-copy-button-icon-size);font-size:var(--rt-table-base-cell-copy-button-icon-size)}\n"], dependencies: [{ kind: "component", type: 
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: TableBaseCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: TableBaseCellComponent, isStandalone: true, selector: "rtui-table-base-cell", inputs: { row: { classPropertyName: "row", publicName: "row", isSignal: true, isRequired: true, transformFunction: null }, column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: true, transformFunction: null }, isMobile: { classPropertyName: "isMobile", publicName: "isMobile", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "mouseover": "onMouseOver()", "mouseout": "onMouseOut()" }, properties: { "style": "this.style" } }, ngImport: i0, template: "<ng-container rtBlock=\"base-cell\">\n    @if (column()?.icon?.placement === 'left') {\n        <mat-icon rtElem=\"prefix\" [rtIconOutlined]=\"!!column().icon?.outlined\" [style]=\"cellIconStyle()\">\n            {{ column().icon?.glyph }}\n        </mat-icon>\n    }\n\n    <div rtElem=\"title\" [rtMod]=\"{ align: column().align }\">\n        <div\n            #titleTpl\n            rtElem=\"title-text\"\n            matTooltipClass=\"custom-tooltip\"\n            matTooltipPosition=\"above\"\n            [rtHideTooltipDirective]=\"titleTpl\"\n            [isTooltipShown]=\"!isMobile()\"\n            [matTooltip]=\"column()?.tooltip ?? tooltipValue()\"\n            [matTooltipDisabled]=\"isMobile()\">\n            {{ cellValue() | emptyToDash }}\n        </div>\n    </div>\n\n    @if (column()?.icon?.placement === 'right') {\n        <mat-icon rtElem=\"suffix\" [rtIconOutlined]=\"!!column().icon?.outlined\" [style]=\"cellIconStyle()\">\n            {{ column().icon?.glyph }}\n        </mat-icon>\n    }\n\n    @if (column()?.copyable) {\n        <button\n            type=\"button\"\n            rtBlock=\"base-cell\"\n            rtElem=\"copy-button\"\n            class=\"c-button c-button--txt-base\"\n            matTooltipPosition=\"above\"\n            [rtMod]=\"{\n                position: copyBtnPosition,\n                complete: isCopied(),\n                visible: isMobile() || isMouseOver(),\n            }\"\n            [matTooltip]=\"isCopied() ? 'Copied!' : 'Copy'\"\n            [matTooltipDisabled]=\"isMobile()\"\n            (mousedown)=\"onCopyToClipboard(); $event.stopPropagation()\">\n            <mat-icon rtElem=\"copy-icon\" [rtIconOutlined]=\"true\">{{ isCopied() ? 'done' : 'content_copy' }}</mat-icon>\n        </button>\n    }\n</ng-container>\n", styles: ["@charset \"UTF-8\";:host{position:relative;display:flex;width:100%;height:100%;align-items:center;gap:var(--rt-table-base-cell-host-gap);--rt-table-base-cell-host-gap: .5rem;--rt-table-base-cell-prefix-icon-size: 1.5rem;--rt-table-base-cell-suffix-icon-size: 1.5rem;--rt-table-base-cell-title-padding: .5rem .5rem .5rem 0;--rt-table-base-cell-copy-button-position-right: .25rem;--rt-table-base-cell-copy-button-position-left: .25rem;--rt-table-base-cell-copy-button-padding: .25rem;--rt-table-base-cell-copy-button-background-color: var(--mat-fab-small-container-color);--rt-table-base-cell-copy-button-icon-size: 1rem;--rt-table-base-cell-copy-button-complete-color: var(--rt-text-base-strong)}:host .base-cell__prefix{width:var(--rt-table-base-cell-prefix-icon-size);height:var(--rt-table-base-cell-prefix-icon-size);font-size:var(--rt-table-base-cell-prefix-icon-size)}:host .base-cell__title{display:table;width:100%;table-layout:fixed}:host .base-cell__title-text{overflow:hidden;width:100%;padding:var(--rt-table-base-cell-title-padding);text-overflow:ellipsis;white-space:nowrap}:host .base-cell__title--align--left{text-align:left}:host .base-cell__title--align--center{text-align:center}:host .base-cell__title--align--right{text-align:right}:host .base-cell__suffix{width:var(--rt-table-base-cell-suffix-icon-size);height:var(--rt-table-base-cell-suffix-icon-size);font-size:var(--rt-table-base-cell-suffix-icon-size)}:host .base-cell__prefix,:host .base-cell__suffix{width:fit-content;min-width:fit-content}:host .base-cell__copy-button{position:absolute;padding:var(--rt-table-base-cell-copy-button-padding);background-color:var(--rt-table-base-cell-copy-button-background-color);visibility:hidden}:host .base-cell__copy-button--position--left{left:var(--rt-table-base-cell-copy-button-position-left)}:host .base-cell__copy-button--position--right{right:var(--rt-table-base-cell-copy-button-position-right)}:host .base-cell__copy-button:hover,:host .base-cell__copy-button:focus,:host .base-cell__copy-button:active{background-color:var(--rt-table-base-cell-copy-button-background-color)}:host .base-cell__copy-button--complete{cursor:not-allowed}:host .base-cell__copy-button--complete:hover,:host .base-cell__copy-button--complete:focus,:host .base-cell__copy-button--complete:active{color:var(--rt-table-base-cell-copy-button-complete-color)}:host .base-cell__copy-button--visible{visibility:visible}:host .base-cell__copy-icon{width:var(--rt-table-base-cell-copy-button-icon-size);height:var(--rt-table-base-cell-copy-button-icon-size);font-size:var(--rt-table-base-cell-copy-button-icon-size)}\n"], dependencies: [{ kind: "component", type: 
                 // 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
@@ -1898,7 +1970,7 @@ class TableBaseCellComponent {
                 // pipes
                 EmptyToDashPipe, name: "emptyToDash" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: TableBaseCellComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: TableBaseCellComponent, decorators: [{
             type: Component,
             args: [{ selector: 'rtui-table-base-cell', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         // material
@@ -1928,16 +2000,20 @@ class RtuiTableHeaderCellComponent {
     constructor() {
         this.#sanitizer = inject(DomSanitizer);
         this.sortOrderTypes = LIST_SORT_ORDER_ENUM;
-        this.headerModel = input.required({ ...(ngDevMode ? { debugName: "headerModel" } : {}) });
-        this.sortModel = input.required({ ...(ngDevMode ? { debugName: "sortModel" } : {}) });
-        this.currentSortModel = input.required({ ...(ngDevMode ? { debugName: "currentSortModel" } : {}) });
-        this.headerDataEllipsisMaxLines = input(1, { ...(ngDevMode ? { debugName: "headerDataEllipsisMaxLines" } : {}), transform: numberAttribute });
+        this.headerModel = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "headerModel" }] : /* istanbul ignore next */ []));
+        this.sortModel = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "sortModel" }] : /* istanbul ignore next */ []));
+        this.currentSortModel = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "currentSortModel" }] : /* istanbul ignore next */ []));
+        this.headerDataEllipsisMaxLines = input(1, { ...(ngDevMode ? { debugName: "headerDataEllipsisMaxLines" } : /* istanbul ignore next */ {}), transform: numberAttribute });
         this.sortChange = output();
         this.active = computed(() => {
             return (!!this.currentSortModel()?.propertyName &&
                 !!this.sortModel()?.propertyName &&
                 this.currentSortModel()?.propertyName === this.sortModel()?.propertyName);
-        }, { ...(ngDevMode ? { debugName: "active" } : {}) });
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
     }
     #sanitizer;
     get style() {
@@ -1958,8 +2034,8 @@ 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: ["@charset \"UTF-8\";:host{display:flex;align-items:center;justify-content:space-between;cursor:pointer;--rt-table-header-cell-label-gap: .5rem;--rt-table-header-cell-prefix-icon-size: 1.5rem;--rt-table-header-cell-suffix-icon-size: 1.5rem;--rt-table-header-cell-icon-margin: 0 0 0 1rem;--rt-table-header-cell-icon-color: var(--rt-text-base-disabled);--rt-table-header-cell-icon-active-color: var(--rt-text-base-strong)}:host:hover .header-cell-icons{visibility:visible}:host .header-cell-label{display:flex;flex-grow:1;align-items:center;gap:var(--rt-table-header-cell-label-gap)}:host .header-cell-label--align--left{justify-content:flex-start}:host .header-cell-label--align--center{justify-content:center}:host .header-cell-label--align--right{justify-content:flex-end}:host .header-cell-label__prefix{width:var(--rt-table-header-cell-prefix-icon-size);height:var(--rt-table-header-cell-prefix-icon-size);font-size:var(--rt-table-header-cell-prefix-icon-size)}:host .header-cell-label__text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .header-cell-label__suffix{width:var(--rt-table-header-cell-suffix-icon-size);height:var(--rt-table-header-cell-suffix-icon-size);font-size:var(--rt-table-header-cell-suffix-icon-size)}:host .header-cell-label__prefix,:host .header-cell-label__suffix{width:fit-content;min-width:fit-content}:host .header-cell-icons{display:flex;flex-direction:column;align-items:center;justify-content:center;margin:var(--rt-table-header-cell-icon-margin);visibility:hidden}:host .header-cell-icons--active{visibility:visible}:host .header-cell-icons__icon{width:0;height:0;border-right:3px solid transparent;border-bottom:5.2px solid var(--rt-table-header-cell-icon-color);border-left:3px solid transparent}:host .header-cell-icons__icon--second{margin-top:var(--rt-spacing-2);transform:scaleY(-1)}:host .header-cell-icons__icon--active{border-bottom-color:var(--rt-table-header-cell-icon-active-color)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: 
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiTableHeaderCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: RtuiTableHeaderCellComponent, isStandalone: true, selector: "rtui-table-header-cell", inputs: { headerModel: { classPropertyName: "headerModel", publicName: "headerModel", isSignal: true, isRequired: true, transformFunction: null }, sortModel: { classPropertyName: "sortModel", publicName: "sortModel", isSignal: true, isRequired: true, transformFunction: null }, currentSortModel: { classPropertyName: "currentSortModel", publicName: "currentSortModel", isSignal: true, isRequired: true, transformFunction: null }, headerDataEllipsisMaxLines: { classPropertyName: "headerDataEllipsisMaxLines", publicName: "headerDataEllipsisMaxLines", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sortChange: "sortChange" }, host: { listeners: { "click": "handleClick()" }, properties: { "style": "this.style" } }, ngImport: i0, template: "<div rtBlock=\"header-cell-label\" [rtMod]=\"{ align: headerModel().align }\">\n    @if (headerModel()?.icon?.placement === 'left') {\n        <mat-icon rtElem=\"prefix\" [rtIconOutlined]=\"!!headerModel().icon?.outlined\" [style.color]=\"headerModel().icon?.color\">\n            {{ headerModel().icon?.glyph }}\n        </mat-icon>\n    }\n\n    <div rtElem=\"text\" [matTooltip]=\"headerModel()?.tooltip ?? ''\" [ngClass]=\"headerModel()?.className\">\n        {{ headerModel().label }}\n    </div>\n\n    @if (headerModel()?.icon?.placement === 'right') {\n        <mat-icon rtElem=\"suffix\" [rtIconOutlined]=\"!!headerModel().icon?.outlined\" [style.color]=\"headerModel().icon?.color\">\n            {{ headerModel().icon?.glyph }}\n        </mat-icon>\n    }\n</div>\n\n@if (sortModel()) {\n    <div rtBlock=\"header-cell-icons\" [rtMod]=\"{ active: active() }\">\n        <div\n            rtElem=\"icon\"\n            [rtMod]=\"{\n                active: active() && currentSortModel()?.sortDirection?.toLowerCase() === sortOrderTypes.DESC,\n                first: true,\n            }\"></div>\n\n        <div\n            rtElem=\"icon\"\n            [rtMod]=\"{\n                active: active() && currentSortModel()?.sortDirection?.toLowerCase() === sortOrderTypes.ASC,\n                second: true,\n            }\"></div>\n    </div>\n}\n", styles: ["@charset \"UTF-8\";:host{display:flex;align-items:center;justify-content:space-between;cursor:pointer;--rt-table-header-cell-label-gap: .5rem;--rt-table-header-cell-prefix-icon-size: 1.5rem;--rt-table-header-cell-suffix-icon-size: 1.5rem;--rt-table-header-cell-icon-margin: 0 0 0 1rem;--rt-table-header-cell-icon-color: var(--rt-text-base-disabled);--rt-table-header-cell-icon-active-color: var(--rt-text-base-strong)}:host:hover .header-cell-icons{visibility:visible}:host .header-cell-label{display:flex;flex-grow:1;align-items:center;gap:var(--rt-table-header-cell-label-gap)}:host .header-cell-label--align--left{justify-content:flex-start}:host .header-cell-label--align--center{justify-content:center}:host .header-cell-label--align--right{justify-content:flex-end}:host .header-cell-label__prefix{width:var(--rt-table-header-cell-prefix-icon-size);height:var(--rt-table-header-cell-prefix-icon-size);font-size:var(--rt-table-header-cell-prefix-icon-size)}:host .header-cell-label__text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .header-cell-label__suffix{width:var(--rt-table-header-cell-suffix-icon-size);height:var(--rt-table-header-cell-suffix-icon-size);font-size:var(--rt-table-header-cell-suffix-icon-size)}:host .header-cell-label__prefix,:host .header-cell-label__suffix{width:fit-content;min-width:fit-content}:host .header-cell-icons{display:flex;flex-direction:column;align-items:center;justify-content:center;margin:var(--rt-table-header-cell-icon-margin);visibility:hidden}:host .header-cell-icons--active{visibility:visible}:host .header-cell-icons__icon{width:0;height:0;border-right:3px solid transparent;border-bottom:5.2px solid var(--rt-table-header-cell-icon-color);border-left:3px solid transparent}:host .header-cell-icons__icon--second{margin-top:var(--rt-spacing-2);transform:scaleY(-1)}:host .header-cell-icons__icon--active{border-bottom-color:var(--rt-table-header-cell-icon-active-color)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: 
                 // 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
@@ -1967,7 +2043,7 @@ class RtuiTableHeaderCellComponent {
                 // Directives
                 RtIconOutlinedDirective, selector: "mat-icon[rtIconOutlined]", inputs: ["rtIconOutlined"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtuiTableHeaderCellComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiTableHeaderCellComponent, decorators: [{
             type: Component,
             args: [{ selector: 'rtui-table-header-cell', imports: [
                         NgClass,
@@ -1998,28 +2074,31 @@ class RtuiTableHeaderFilterCellComponent {
         this.filterTypes = TABLE_COLUMN_FILTER_TYPES_ENUM;
         this.filterOperatorTypes = FILTER_OPERATOR_TYPE_ENUM;
         /** Current elements appearance */
-        this.appearance = input.required({ ...(ngDevMode ? { debugName: "appearance" } : {}) });
+        this.appearance = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []));
         /** Filter property */
-        this.filterProperty = input.required({ ...(ngDevMode ? { debugName: "filterProperty" } : {}), transform: (value) => (isString(value) ? value : value?.toString) });
+        this.filterProperty = input.required({ ...(ngDevMode ? { debugName: "filterProperty" } : /* istanbul ignore next */ {}), transform: (value) => (isString(value) ? value : value?.toString) });
         /** Filter cell type */
-        this.filterType = input.required({ ...(ngDevMode ? { debugName: "filterType" } : {}) });
+        this.filterType = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "filterType" }] : /* istanbul ignore next */ []));
         /** Current filter model from store */
-        this.filterModel = input.required({ ...(ngDevMode ? { debugName: "filterModel" } : {}), transform: (value) => transformArrayInput(value) });
+        this.filterModel = input.required({ ...(ngDevMode ? { debugName: "filterModel" } : /* istanbul ignore next */ {}), transform: (value) => transformArrayInput(value) });
         /** Filter property */
-        this.defaultFilterOperator = input.required({ ...(ngDevMode ? { debugName: "defaultFilterOperator" } : {}), transform: (value) => value && FILTER_OPERATORS.includes(value) ? value : FILTER_OPERATOR_TYPE_ENUM.EQUALS });
+        this.defaultFilterOperator = input.required({ ...(ngDevMode ? { debugName: "defaultFilterOperator" } : /* istanbul ignore next */ {}), transform: (value) => value && FILTER_OPERATORS.includes(value) ? value : FILTER_OPERATOR_TYPE_ENUM.EQUALS });
         /** Available filter operators */
-        this.filterOperators = input([], { ...(ngDevMode ? { debugName: "filterOperators" } : {}), transform: (value) => transformArrayInput(value) });
+        this.filterOperators = input([], { ...(ngDevMode ? { debugName: "filterOperators" } : /* istanbul ignore next */ {}), transform: (value) => transformArrayInput(value) });
         /** List of selected filter models */
-        this.filterSelectOptions = input([], { ...(ngDevMode ? { debugName: "filterSelectOptions" } : {}), transform: (value) => transformArrayInput(value) });
+        this.filterSelectOptions = input([], { ...(ngDevMode ? { debugName: "filterSelectOptions" } : /* istanbul ignore next */ {}), transform: (value) => transformArrayInput(value) });
         /** Indicates is mobile view */
-        this.isMobile = input(false, { ...(ngDevMode ? { debugName: "isMobile" } : {}), transform: booleanAttribute });
+        this.isMobile = input(false, { ...(ngDevMode ? { debugName: "isMobile" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /** Filter change output action */
         this.filterChange = output();
         this.currentFilter = signal({
             propertyName: '',
             operatorType: FILTER_OPERATOR_TYPE_ENUM.EQUALS,
             value: '',
-        }, { ...(ngDevMode ? { debugName: "currentFilter" } : {}) });
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "currentFilter" }] : /* istanbul ignore next */ []));
     }
     #injector;
     #destroyRef;
@@ -2094,8 +2173,8 @@ class RtuiTableHeaderFilterCellComponent {
         }
         this.currentFilter.update((filter) => ({ ...filter, operatorType }));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtuiTableHeaderFilterCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: RtuiTableHeaderFilterCellComponent, isStandalone: true, selector: "rtui-table-header-filter-cell", inputs: { appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: true, transformFunction: null }, filterProperty: { classPropertyName: "filterProperty", publicName: "filterProperty", isSignal: true, isRequired: true, transformFunction: null }, filterType: { classPropertyName: "filterType", publicName: "filterType", isSignal: true, isRequired: true, transformFunction: null }, filterModel: { classPropertyName: "filterModel", publicName: "filterModel", isSignal: true, isRequired: true, transformFunction: null }, defaultFilterOperator: { classPropertyName: "defaultFilterOperator", publicName: "defaultFilterOperator", isSignal: true, isRequired: true, transformFunction: null }, filterOperators: { classPropertyName: "filterOperators", publicName: "filterOperators", isSignal: true, isRequired: false, transformFunction: null }, filterSelectOptions: { classPropertyName: "filterSelectOptions", publicName: "filterSelectOptions", isSignal: true, isRequired: false, transformFunction: null }, isMobile: { classPropertyName: "isMobile", publicName: "isMobile", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { filterChange: "filterChange" }, providers: [provideNativeDateAdapter()], ngImport: i0, template: "@if (filterOperators()?.length) {\n    <button\n        aria-label=\"Icon-button for a context menu\"\n        mat-icon-button\n        matTooltipPosition=\"left\"\n        [matTooltip]=\"currentFilter().operatorType | titlecase\"\n        [matTooltipDisabled]=\"isMobile()\"\n        [matMenuTriggerFor]=\"menuTpl\"\n        (click)=\"$event.stopPropagation()\"\n        (mousedown)=\"$event.stopPropagation()\">\n        <mat-icon [rtIconOutlined]=\"true\">\n            @switch (currentFilter().operatorType) {\n                @case (filterOperatorTypes.EQUALS) {\n                    drag_handle\n                }\n                @case (filterOperatorTypes.NOT_EQUALS) {\n                    block\n                }\n                @case (filterOperatorTypes.CONTAINS) {\n                    more_horiz\n                }\n                @case (filterOperatorTypes.GREATER_THAN) {\n                    chevron_right\n                }\n                @case (filterOperatorTypes.LESS_THAN) {\n                    chevron_left\n                }\n            }\n        </mat-icon>\n    </button>\n\n    <mat-menu #menuTpl=\"matMenu\" xPosition=\"before\">\n        @if (filterOperators().includes(filterOperatorTypes.EQUALS) && currentFilter()?.operatorType !== filterOperatorTypes.EQUALS) {\n            <div mat-menu-item (click)=\"onFilterOperatorChange(filterOperatorTypes.EQUALS)\">\n                <mat-icon class=\"material-icons-outlined\" rtIconOutlined>drag_handle</mat-icon>\n                <span>Equal</span>\n            </div>\n        }\n        @if (\n            filterOperators().includes(filterOperatorTypes.NOT_EQUALS) && currentFilter()?.operatorType !== filterOperatorTypes.NOT_EQUALS\n        ) {\n            <div mat-menu-item (click)=\"onFilterOperatorChange(filterOperatorTypes.NOT_EQUALS)\">\n                <mat-icon [rtIconOutlined]=\"true\">block</mat-icon>\n                <span>Not equal</span>\n            </div>\n        }\n        @if (filterOperators().includes(filterOperatorTypes.CONTAINS) && currentFilter()?.operatorType !== filterOperatorTypes.CONTAINS) {\n            <div mat-menu-item (click)=\"onFilterOperatorChange(filterOperatorTypes.CONTAINS)\">\n                <mat-icon [rtIconOutlined]=\"true\">more_horiz</mat-icon>\n                <span>Contains</span>\n            </div>\n        }\n        @if (\n            filterOperators().includes(filterOperatorTypes.GREATER_THAN) &&\n            currentFilter()?.operatorType !== filterOperatorTypes.GREATER_THAN\n        ) {\n            <div mat-menu-item (click)=\"onFilterOperatorChange(filterOperatorTypes.GREATER_THAN)\">\n                <mat-icon [rtIconOutlined]=\"true\">chevron_right</mat-icon>\n                <span>More than</span>\n            </div>\n        }\n        @if (filterOperators().includes(filterOperatorTypes.LESS_THAN) && currentFilter()?.operatorType !== filterOperatorTypes.LESS_THAN) {\n            <div mat-menu-item (click)=\"onFilterOperatorChange(filterOperatorTypes.LESS_THAN)\">\n                <mat-icon [rtIconOutlined]=\"true\">chevron_left</mat-icon>\n                <span>Less than</span>\n            </div>\n        }\n    </mat-menu>\n}\n\n@switch (filterType()) {\n    @case (filterTypes.TEXT) {\n        <mat-form-field rtBlock=\"table-header-cell-filter-input\" subscriptSizing=\"dynamic\" [appearance]=\"appearance()\">\n            <input\n                #input\n                matInput\n                type=\"text\"\n                placeholder=\"Type in filter value\"\n                [value]=\"currentFilter().value\"\n                (keydown.enter)=\"onFilterValueChange(input.value)\"\n                (focusout)=\"onFilterValueChange(input.value)\" />\n\n            <rtui-clear-button matSuffix [isButtonShown]=\"!!currentFilter().value\" (clickAction)=\"onFilterValueChange('')\" />\n        </mat-form-field>\n    }\n    @case (filterTypes.NUMBER) {\n        <mat-form-field rtBlock=\"table-header-cell-filter-input\" subscriptSizing=\"dynamic\" [appearance]=\"appearance()\">\n            <input\n                #input\n                matInput\n                type=\"number\"\n                placeholder=\"Type in filter value\"\n                [value]=\"currentFilter().value\"\n                (keydown.enter)=\"onFilterValueChange(input.value)\"\n                (focusout)=\"onFilterValueChange(input.value)\" />\n\n            <rtui-clear-button matSuffix [isButtonShown]=\"!!currentFilter().value\" (clickAction)=\"onFilterValueChange('')\" />\n        </mat-form-field>\n    }\n    @case (filterTypes.DATE) {\n        <button\n            aria-label=\"Icon-button for clear filter\"\n            mat-icon-button\n            matTooltipPosition=\"left\"\n            matTooltip=\"Clear filter\"\n            [matTooltipDisabled]=\"isMobile()\"\n            [disabled]=\"!currentFilter().value\"\n            (click)=\"onFilterValueChange('')\">\n            <mat-icon [rtIconOutlined]=\"true\">close</mat-icon>\n        </button>\n\n        <mat-form-field rtBlock=\"table-header-cell-filter-input\" subscriptSizing=\"dynamic\" [appearance]=\"appearance()\">\n            <input\n                matInput\n                placeholder=\"1/1/2025\"\n                [matDatepicker]=\"picker\"\n                [ngModel]=\"currentFilter().value\"\n                (ngModelChange)=\"onFilterValueChange($event)\" />\n            <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n            <mat-datepicker #picker></mat-datepicker>\n        </mat-form-field>\n    }\n    @case (filterTypes.SELECT) {\n        <button\n            aria-label=\"Icon-button for clear filter\"\n            mat-icon-button\n            matTooltipPosition=\"left\"\n            matTooltip=\"Clear filter\"\n            [matTooltipDisabled]=\"isMobile()\"\n            [disabled]=\"!currentFilter().value\"\n            (click)=\"onFilterValueChange('')\">\n            <mat-icon [rtIconOutlined]=\"true\">close</mat-icon>\n        </button>\n\n        <mat-form-field rtBlock=\"table-header-cell-filter-input\" subscriptSizing=\"dynamic\" [appearance]=\"appearance()\">\n            <mat-select placeholder=\"Chose filter\" [value]=\"currentFilter().value\" (selectionChange)=\"onFilterValueChange($event.value)\">\n                @for (item of filterSelectOptions(); track item) {\n                    <mat-option [value]=\"item\">{{ item | titlecase }}</mat-option>\n                } @empty {\n                    <mat-option [value]=\"null\">No options available</mat-option>\n                }\n            </mat-select>\n        </mat-form-field>\n    }\n}\n", styles: [":host{display:flex;width:100%;align-items:center;justify-content:flex-start;gap:var(--rt-spacing-8)}:host .table-header-cell-filter-input{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: 
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiTableHeaderFilterCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: RtuiTableHeaderFilterCellComponent, isStandalone: true, selector: "rtui-table-header-filter-cell", inputs: { appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: true, transformFunction: null }, filterProperty: { classPropertyName: "filterProperty", publicName: "filterProperty", isSignal: true, isRequired: true, transformFunction: null }, filterType: { classPropertyName: "filterType", publicName: "filterType", isSignal: true, isRequired: true, transformFunction: null }, filterModel: { classPropertyName: "filterModel", publicName: "filterModel", isSignal: true, isRequired: true, transformFunction: null }, defaultFilterOperator: { classPropertyName: "defaultFilterOperator", publicName: "defaultFilterOperator", isSignal: true, isRequired: true, transformFunction: null }, filterOperators: { classPropertyName: "filterOperators", publicName: "filterOperators", isSignal: true, isRequired: false, transformFunction: null }, filterSelectOptions: { classPropertyName: "filterSelectOptions", publicName: "filterSelectOptions", isSignal: true, isRequired: false, transformFunction: null }, isMobile: { classPropertyName: "isMobile", publicName: "isMobile", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { filterChange: "filterChange" }, providers: [provideNativeDateAdapter()], ngImport: i0, template: "@if (filterOperators()?.length) {\n    <button\n        aria-label=\"Icon-button for a context menu\"\n        mat-icon-button\n        matTooltipPosition=\"left\"\n        [matTooltip]=\"currentFilter().operatorType | titlecase\"\n        [matTooltipDisabled]=\"isMobile()\"\n        [matMenuTriggerFor]=\"menuTpl\"\n        (click)=\"$event.stopPropagation()\"\n        (mousedown)=\"$event.stopPropagation()\">\n        <mat-icon [rtIconOutlined]=\"true\">\n            @switch (currentFilter().operatorType) {\n                @case (filterOperatorTypes.EQUALS) {\n                    drag_handle\n                }\n                @case (filterOperatorTypes.NOT_EQUALS) {\n                    block\n                }\n                @case (filterOperatorTypes.CONTAINS) {\n                    more_horiz\n                }\n                @case (filterOperatorTypes.GREATER_THAN) {\n                    chevron_right\n                }\n                @case (filterOperatorTypes.LESS_THAN) {\n                    chevron_left\n                }\n            }\n        </mat-icon>\n    </button>\n\n    <mat-menu #menuTpl=\"matMenu\" xPosition=\"before\">\n        @if (filterOperators().includes(filterOperatorTypes.EQUALS) && currentFilter()?.operatorType !== filterOperatorTypes.EQUALS) {\n            <div mat-menu-item (click)=\"onFilterOperatorChange(filterOperatorTypes.EQUALS)\">\n                <mat-icon class=\"material-icons-outlined\" rtIconOutlined>drag_handle</mat-icon>\n                <span>Equal</span>\n            </div>\n        }\n        @if (\n            filterOperators().includes(filterOperatorTypes.NOT_EQUALS) && currentFilter()?.operatorType !== filterOperatorTypes.NOT_EQUALS\n        ) {\n            <div mat-menu-item (click)=\"onFilterOperatorChange(filterOperatorTypes.NOT_EQUALS)\">\n                <mat-icon [rtIconOutlined]=\"true\">block</mat-icon>\n                <span>Not equal</span>\n            </div>\n        }\n        @if (filterOperators().includes(filterOperatorTypes.CONTAINS) && currentFilter()?.operatorType !== filterOperatorTypes.CONTAINS) {\n            <div mat-menu-item (click)=\"onFilterOperatorChange(filterOperatorTypes.CONTAINS)\">\n                <mat-icon [rtIconOutlined]=\"true\">more_horiz</mat-icon>\n                <span>Contains</span>\n            </div>\n        }\n        @if (\n            filterOperators().includes(filterOperatorTypes.GREATER_THAN) &&\n            currentFilter()?.operatorType !== filterOperatorTypes.GREATER_THAN\n        ) {\n            <div mat-menu-item (click)=\"onFilterOperatorChange(filterOperatorTypes.GREATER_THAN)\">\n                <mat-icon [rtIconOutlined]=\"true\">chevron_right</mat-icon>\n                <span>More than</span>\n            </div>\n        }\n        @if (filterOperators().includes(filterOperatorTypes.LESS_THAN) && currentFilter()?.operatorType !== filterOperatorTypes.LESS_THAN) {\n            <div mat-menu-item (click)=\"onFilterOperatorChange(filterOperatorTypes.LESS_THAN)\">\n                <mat-icon [rtIconOutlined]=\"true\">chevron_left</mat-icon>\n                <span>Less than</span>\n            </div>\n        }\n    </mat-menu>\n}\n\n@switch (filterType()) {\n    @case (filterTypes.TEXT) {\n        <mat-form-field rtBlock=\"table-header-cell-filter-input\" subscriptSizing=\"dynamic\" [appearance]=\"appearance()\">\n            <input\n                #input\n                matInput\n                type=\"text\"\n                placeholder=\"Type in filter value\"\n                [value]=\"currentFilter().value\"\n                (keydown.enter)=\"onFilterValueChange(input.value)\"\n                (focusout)=\"onFilterValueChange(input.value)\" />\n\n            <rtui-clear-button matSuffix [isButtonShown]=\"!!currentFilter().value\" (clickAction)=\"onFilterValueChange('')\" />\n        </mat-form-field>\n    }\n    @case (filterTypes.NUMBER) {\n        <mat-form-field rtBlock=\"table-header-cell-filter-input\" subscriptSizing=\"dynamic\" [appearance]=\"appearance()\">\n            <input\n                #input\n                matInput\n                type=\"number\"\n                placeholder=\"Type in filter value\"\n                [value]=\"currentFilter().value\"\n                (keydown.enter)=\"onFilterValueChange(input.value)\"\n                (focusout)=\"onFilterValueChange(input.value)\" />\n\n            <rtui-clear-button matSuffix [isButtonShown]=\"!!currentFilter().value\" (clickAction)=\"onFilterValueChange('')\" />\n        </mat-form-field>\n    }\n    @case (filterTypes.DATE) {\n        <button\n            aria-label=\"Icon-button for clear filter\"\n            mat-icon-button\n            matTooltipPosition=\"left\"\n            matTooltip=\"Clear filter\"\n            [matTooltipDisabled]=\"isMobile()\"\n            [disabled]=\"!currentFilter().value\"\n            (click)=\"onFilterValueChange('')\">\n            <mat-icon [rtIconOutlined]=\"true\">close</mat-icon>\n        </button>\n\n        <mat-form-field rtBlock=\"table-header-cell-filter-input\" subscriptSizing=\"dynamic\" [appearance]=\"appearance()\">\n            <input\n                matInput\n                placeholder=\"1/1/2025\"\n                [matDatepicker]=\"picker\"\n                [ngModel]=\"currentFilter().value\"\n                (ngModelChange)=\"onFilterValueChange($event)\" />\n            <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n            <mat-datepicker #picker></mat-datepicker>\n        </mat-form-field>\n    }\n    @case (filterTypes.SELECT) {\n        <button\n            aria-label=\"Icon-button for clear filter\"\n            mat-icon-button\n            matTooltipPosition=\"left\"\n            matTooltip=\"Clear filter\"\n            [matTooltipDisabled]=\"isMobile()\"\n            [disabled]=\"!currentFilter().value\"\n            (click)=\"onFilterValueChange('')\">\n            <mat-icon [rtIconOutlined]=\"true\">close</mat-icon>\n        </button>\n\n        <mat-form-field rtBlock=\"table-header-cell-filter-input\" subscriptSizing=\"dynamic\" [appearance]=\"appearance()\">\n            <mat-select placeholder=\"Chose filter\" [value]=\"currentFilter().value\" (selectionChange)=\"onFilterValueChange($event.value)\">\n                @for (item of filterSelectOptions(); track item) {\n                    <mat-option [value]=\"item\">{{ item | titlecase }}</mat-option>\n                } @empty {\n                    <mat-option [value]=\"null\">No options available</mat-option>\n                }\n            </mat-select>\n        </mat-form-field>\n    }\n}\n", styles: [":host{display:flex;width:100%;align-items:center;justify-content:flex-start;gap:var(--rt-spacing-8)}:host .table-header-cell-filter-input{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: 
                 // Material
                 MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i2$1.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i2$1.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i2$1.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "directive", type: MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "component", type: MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: 
                 // Directives
@@ -2105,7 +2184,7 @@ class RtuiTableHeaderFilterCellComponent {
                 // Pipes
                 TitleCasePipe, name: "titlecase" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtuiTableHeaderFilterCellComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiTableHeaderFilterCellComponent, decorators: [{
             type: Component,
             args: [{ selector: 'rtui-table-header-filter-cell', changeDetection: ChangeDetectionStrategy.OnPush, providers: [provideNativeDateAdapter()], imports: [
                         FormsModule,
@@ -2143,10 +2222,10 @@ class RtuiStopTableRowClickDirective {
             this.#elementRef.nativeElement.setAttribute(RTUI_TABLE_STOP_ROW_CLICK_ATTRIBUTE, '');
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtuiStopTableRowClickDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.1", type: RtuiStopTableRowClickDirective, isStandalone: true, selector: "[rtStopTableRowClick]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiStopTableRowClickDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: RtuiStopTableRowClickDirective, isStandalone: true, selector: "[rtStopTableRowClick]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtuiStopTableRowClickDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiStopTableRowClickDirective, decorators: [{
             type: Directive,
             args: [{
                     standalone: true,
@@ -2158,9 +2237,9 @@ class RtuiTableRowClickDirective {
     constructor() {
         this.#tableComponent = inject(RTUI_TABLE_COMPONENT_TOKEN);
         /** Row entity */
-        this.entity = input.required({ ...(ngDevMode ? { debugName: "entity" } : {}), alias: 'rtuiTableRowClickDirective' });
+        this.entity = input.required({ ...(ngDevMode ? { debugName: "entity" } : /* istanbul ignore next */ {}), alias: 'rtuiTableRowClickDirective' });
         /** Enabled flag */
-        this.isTableRowClickable = input(true, { ...(ngDevMode ? { debugName: "isTableRowClickable" } : {}), transform: booleanAttribute });
+        this.isTableRowClickable = input(true, { ...(ngDevMode ? { debugName: "isTableRowClickable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     }
     #tableComponent;
     onMouseDown(event) {
@@ -2177,10 +2256,10 @@ class RtuiTableRowClickDirective {
         }
         this.#tableComponent.onRowDoubleClick(this.entity());
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtuiTableRowClickDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.1", type: RtuiTableRowClickDirective, isStandalone: true, selector: "[rtuiTableRowClickDirective]", inputs: { entity: { classPropertyName: "entity", publicName: "rtuiTableRowClickDirective", isSignal: true, isRequired: true, transformFunction: null }, isTableRowClickable: { classPropertyName: "isTableRowClickable", publicName: "isTableRowClickable", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "mousedown": "onMouseDown($event)", "dblclick": "onDoubleClick($event)" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiTableRowClickDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.5", type: RtuiTableRowClickDirective, isStandalone: true, selector: "[rtuiTableRowClickDirective]", inputs: { entity: { classPropertyName: "entity", publicName: "rtuiTableRowClickDirective", isSignal: true, isRequired: true, transformFunction: null }, isTableRowClickable: { classPropertyName: "isTableRowClickable", publicName: "isTableRowClickable", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "mousedown": "onMouseDown($event)", "dblclick": "onDoubleClick($event)" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtuiTableRowClickDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiTableRowClickDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rtuiTableRowClickDirective]',
@@ -2196,15 +2275,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
 /** Directive for custom table cells */
 class RtuiCustomTableCellsDirective {
     constructor() {
-        this.cellsTemplates = input.required({ ...(ngDevMode ? { debugName: "cellsTemplates" } : {}), alias: 'rtuiCustomTableCellsDirective' });
+        this.cellsTemplates = input.required({ ...(ngDevMode ? { debugName: "cellsTemplates" } : /* istanbul ignore next */ {}), alias: 'rtuiCustomTableCellsDirective' });
     }
     getTemplateByPropName(propName) {
         return this.cellsTemplates()[propName];
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtuiCustomTableCellsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.1", type: RtuiCustomTableCellsDirective, isStandalone: true, selector: "[rtuiCustomTableCellsDirective]", inputs: { cellsTemplates: { classPropertyName: "cellsTemplates", publicName: "rtuiCustomTableCellsDirective", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiCustomTableCellsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.5", type: RtuiCustomTableCellsDirective, isStandalone: true, selector: "[rtuiCustomTableCellsDirective]", inputs: { cellsTemplates: { classPropertyName: "cellsTemplates", publicName: "rtuiCustomTableCellsDirective", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtuiCustomTableCellsDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiCustomTableCellsDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rtuiCustomTableCellsDirective]',
@@ -2212,10 +2291,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
         }], propDecorators: { cellsTemplates: [{ type: i0.Input, args: [{ isSignal: true, alias: "rtuiCustomTableCellsDirective", required: true }] }] } });
 /** Directive for row actions located inside a row menu button */
 class RtuiTableRowActionsDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtuiTableRowActionsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.1", type: RtuiTableRowActionsDirective, isStandalone: true, selector: "[rtuiTabletRowActionsDirective]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiTableRowActionsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: RtuiTableRowActionsDirective, isStandalone: true, selector: "[rtuiTabletRowActionsDirective]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtuiTableRowActionsDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiTableRowActionsDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rtuiTabletRowActionsDirective]',
@@ -2223,10 +2302,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
         }] });
 /** Directive for row actions located outside a row menu button */
 class RtuiTableAdditionalRowActionsDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtuiTableAdditionalRowActionsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.1", type: RtuiTableAdditionalRowActionsDirective, isStandalone: true, selector: "[rtuiTableAdditionalRowActionsDirective]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiTableAdditionalRowActionsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: RtuiTableAdditionalRowActionsDirective, isStandalone: true, selector: "[rtuiTableAdditionalRowActionsDirective]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtuiTableAdditionalRowActionsDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiTableAdditionalRowActionsDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rtuiTableAdditionalRowActionsDirective]',
@@ -2234,30 +2313,36 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
         }] });
 class RtuiTableComponent {
     constructor() {
-        this.rowActions = viewChild('rowActions', { ...(ngDevMode ? { debugName: "rowActions" } : {}) });
-        this.rowActionsHeaderPaddingHelper = viewChild('rowActionsHeaderPaddingHelper', { ...(ngDevMode ? { debugName: "rowActionsHeaderPaddingHelper" } : {}) });
-        this.rowActionsPaddingHelper = viewChild('rowActionsRowPaddingHelper', { ...(ngDevMode ? { debugName: "rowActionsPaddingHelper" } : {}) });
+        this.rowActions = viewChild('rowActions', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "rowActions" }] : /* istanbul ignore next */ []));
+        this.rowActionsHeaderPaddingHelper = viewChild('rowActionsHeaderPaddingHelper', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "rowActionsHeaderPaddingHelper" }] : /* istanbul ignore next */ []));
+        this.rowActionsPaddingHelper = viewChild('rowActionsRowPaddingHelper', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "rowActionsPaddingHelper" }] : /* istanbul ignore next */ []));
         this.#tableConfigService = inject(RtTableConfigService);
         this.columnTypes = TABLE_COLUMN_TYPES_ENUM;
         this.filterOperators = FILTER_OPERATOR_TYPE_ENUM;
         /** Indicates is mobile view */
-        this.isMobile = input(false, { ...(ngDevMode ? { debugName: "isMobile" } : {}), transform: booleanAttribute });
+        this.isMobile = input(false, { ...(ngDevMode ? { debugName: "isMobile" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /** Indicates are table rows clickable */
-        this.isTableRowsClickable = input(false, { ...(ngDevMode ? { debugName: "isTableRowsClickable" } : {}), transform: booleanAttribute });
+        this.isTableRowsClickable = input(false, { ...(ngDevMode ? { debugName: "isTableRowsClickable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /** Key of ENTITY_TYPE for compare entities */
-        this.keyExp = input('id', { ...(ngDevMode ? { debugName: "keyExp" } : {}) });
+        this.keyExp = input('id', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "keyExp" }] : /* istanbul ignore next */ []));
         /** List of entities */
-        this.entities = input.required({ ...(ngDevMode ? { debugName: "entities" } : {}), transform: (value) => transformArrayInput(value) });
+        this.entities = input.required({ ...(ngDevMode ? { debugName: "entities" } : /* istanbul ignore next */ {}), transform: (value) => transformArrayInput(value) });
         /** Current page model from store */
-        this.currentSortModel = input.required({ ...(ngDevMode ? { debugName: "currentSortModel" } : {}) });
+        this.currentSortModel = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "currentSortModel" }] : /* istanbul ignore next */ []));
         /** Current elements appearance */
-        this.appearance = input.required({ ...(ngDevMode ? { debugName: "appearance" } : {}), transform: (value) => (value === 'fill' ? 'fill' : 'outline') });
+        this.appearance = input.required({ ...(ngDevMode ? { debugName: "appearance" } : /* istanbul ignore next */ {}), transform: (value) => (value === 'fill' ? 'fill' : 'outline') });
         /** Filter inputs appearance */
-        this.filterAppearance = input('outline', { ...(ngDevMode ? { debugName: "filterAppearance" } : {}) });
+        this.filterAppearance = input('outline', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "filterAppearance" }] : /* istanbul ignore next */ []));
         /** Current filter model from store */
-        this.filterModel = input([], { ...(ngDevMode ? { debugName: "filterModel" } : {}), transform: (value) => transformArrayInput(value) });
+        this.filterModel = input([], { ...(ngDevMode ? { debugName: "filterModel" } : /* istanbul ignore next */ {}), transform: (value) => transformArrayInput(value) });
         /** Indicates is filters shown */
-        this.isFiltersShown = input(false, { ...(ngDevMode ? { debugName: "isFiltersShown" } : {}), transform: booleanAttribute });
+        this.isFiltersShown = input(false, { ...(ngDevMode ? { debugName: "isFiltersShown" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /** Row click output action */
         this.rowClick = output();
         /** Row doubleClick output action */
@@ -2269,28 +2354,37 @@ class RtuiTableComponent {
         /** Columns config for table */
         this.columns = computed(() => {
             return this.#tableConfigService.tableConfig().columns;
-        }, { ...(ngDevMode ? { debugName: "columns" } : {}) });
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []));
         /** Custom cells template */
-        this.customCellsTpl = contentChild(RtuiCustomTableCellsDirective, { ...(ngDevMode ? { debugName: "customCellsTpl" } : {}) });
+        this.customCellsTpl = contentChild(RtuiCustomTableCellsDirective, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "customCellsTpl" }] : /* istanbul ignore next */ []));
         /** Row actions template */
-        this.rowActionsTpl = contentChild(RtuiTableRowActionsDirective, { ...(ngDevMode ? { debugName: "rowActionsTpl" } : {}), read: TemplateRef });
+        this.rowActionsTpl = contentChild(RtuiTableRowActionsDirective, { ...(ngDevMode ? { debugName: "rowActionsTpl" } : /* istanbul ignore next */ {}), read: TemplateRef });
         /** Additional row actions template */
-        this.additionalRowActionsTpl = contentChild(RtuiTableAdditionalRowActionsDirective, { ...(ngDevMode ? { debugName: "additionalRowActionsTpl" } : {}), read: TemplateRef });
+        this.additionalRowActionsTpl = contentChild(RtuiTableAdditionalRowActionsDirective, { ...(ngDevMode ? { debugName: "additionalRowActionsTpl" } : /* istanbul ignore next */ {}), read: TemplateRef });
         /** Fields specified by the directive */
         /** List of selected entities ids */
-        this.selectedEntitiesIds = signal([], { ...(ngDevMode ? { debugName: "selectedEntitiesIds" } : {}) });
+        this.selectedEntitiesIds = signal([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selectedEntitiesIds" }] : /* istanbul ignore next */ []));
         /** Indicates are all page entities selected */
-        this.isPageEntitiesSelected = signal(false, { ...(ngDevMode ? { debugName: "isPageEntitiesSelected" } : {}) });
+        this.isPageEntitiesSelected = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isPageEntitiesSelected" }] : /* istanbul ignore next */ []));
         /** Indicates are some page entities selected */
-        this.isPageEntitiesIndeterminate = signal(false, { ...(ngDevMode ? { debugName: "isPageEntitiesIndeterminate" } : {}) });
+        this.isPageEntitiesIndeterminate = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isPageEntitiesIndeterminate" }] : /* istanbul ignore next */ []));
         /** Indicates is multiselect mod enabled */
-        this.isMultiSelect = signal(true, { ...(ngDevMode ? { debugName: "isMultiSelect" } : {}) });
+        this.isMultiSelect = signal(true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isMultiSelect" }] : /* istanbul ignore next */ []));
         /** Indicates is selectors column shown */
-        this.isSelectorsColumnShown = signal(false, { ...(ngDevMode ? { debugName: "isSelectorsColumnShown" } : {}) });
+        this.isSelectorsColumnShown = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isSelectorsColumnShown" }] : /* istanbul ignore next */ []));
         /** Indicates is selectors column disabled */
-        this.isSelectorsColumnDisabled = signal(false, { ...(ngDevMode ? { debugName: "isSelectorsColumnDisabled" } : {}) });
+        this.isSelectorsColumnDisabled = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isSelectorsColumnDisabled" }] : /* istanbul ignore next */ []));
         /** Current row index */
-        this.activeRowIndex = signal(null, { ...(ngDevMode ? { debugName: "activeRowIndex" } : {}) });
+        this.activeRowIndex = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "activeRowIndex" }] : /* istanbul ignore next */ []));
         /** Empty methods set in selectors directive */
         this.onToggleEntity = () => {
             return;
@@ -2350,8 +2444,8 @@ class RtuiTableComponent {
             }
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtuiTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: RtuiTableComponent, isStandalone: true, selector: "rtui-table", inputs: { isMobile: { classPropertyName: "isMobile", publicName: "isMobile", isSignal: true, isRequired: false, transformFunction: null }, isTableRowsClickable: { classPropertyName: "isTableRowsClickable", publicName: "isTableRowsClickable", isSignal: true, isRequired: false, transformFunction: null }, keyExp: { classPropertyName: "keyExp", publicName: "keyExp", isSignal: true, isRequired: false, transformFunction: null }, entities: { classPropertyName: "entities", publicName: "entities", isSignal: true, isRequired: true, transformFunction: null }, currentSortModel: { classPropertyName: "currentSortModel", publicName: "currentSortModel", isSignal: true, isRequired: true, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: true, transformFunction: null }, filterAppearance: { classPropertyName: "filterAppearance", publicName: "filterAppearance", isSignal: true, isRequired: false, transformFunction: null }, filterModel: { classPropertyName: "filterModel", publicName: "filterModel", isSignal: true, isRequired: false, transformFunction: null }, isFiltersShown: { classPropertyName: "isFiltersShown", publicName: "isFiltersShown", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { rowClick: "rowClick", rowDoubleClick: "rowDoubleClick", sortChange: "sortChange", filterChange: "filterChange" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: RtuiTableComponent, isStandalone: true, selector: "rtui-table", inputs: { isMobile: { classPropertyName: "isMobile", publicName: "isMobile", isSignal: true, isRequired: false, transformFunction: null }, isTableRowsClickable: { classPropertyName: "isTableRowsClickable", publicName: "isTableRowsClickable", isSignal: true, isRequired: false, transformFunction: null }, keyExp: { classPropertyName: "keyExp", publicName: "keyExp", isSignal: true, isRequired: false, transformFunction: null }, entities: { classPropertyName: "entities", publicName: "entities", isSignal: true, isRequired: true, transformFunction: null }, currentSortModel: { classPropertyName: "currentSortModel", publicName: "currentSortModel", isSignal: true, isRequired: true, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: true, transformFunction: null }, filterAppearance: { classPropertyName: "filterAppearance", publicName: "filterAppearance", isSignal: true, isRequired: false, transformFunction: null }, filterModel: { classPropertyName: "filterModel", publicName: "filterModel", isSignal: true, isRequired: false, transformFunction: null }, isFiltersShown: { classPropertyName: "isFiltersShown", publicName: "isFiltersShown", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { rowClick: "rowClick", rowDoubleClick: "rowDoubleClick", sortChange: "sortChange", filterChange: "filterChange" }, providers: [
             {
                 provide: RTUI_TABLE_COMPONENT_TOKEN,
                 useExisting: forwardRef(() => RtuiTableComponent),
@@ -2364,7 +2458,7 @@ class RtuiTableComponent {
                 // components
                 RtuiTableHeaderCellComponent, selector: "rtui-table-header-cell", inputs: ["headerModel", "sortModel", "currentSortModel", "headerDataEllipsisMaxLines"], outputs: ["sortChange"] }, { kind: "component", type: TableBaseCellComponent, selector: "rtui-table-base-cell", inputs: ["row", "column", "isMobile"] }, { kind: "component", type: RtuiTableHeaderFilterCellComponent, selector: "rtui-table-header-filter-cell", inputs: ["appearance", "filterProperty", "filterType", "filterModel", "defaultFilterOperator", "filterOperators", "filterSelectOptions", "isMobile"], outputs: ["filterChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtuiTableComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiTableComponent, decorators: [{
             type: Component,
             args: [{ selector: 'rtui-table', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         NgTemplateOutlet,
@@ -2399,10 +2493,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
 
 class RtuiDynamicSelectorListActionsComponent {
     constructor() {
-        this.isMobile = input.required({ ...(ngDevMode ? { debugName: "isMobile" } : {}), transform: booleanAttribute });
-        this.isResetButtonDisabled = input.required({ ...(ngDevMode ? { debugName: "isResetButtonDisabled" } : {}), transform: booleanAttribute });
-        this.isClearButtonDisabled = input(false, { ...(ngDevMode ? { debugName: "isClearButtonDisabled" } : {}), transform: booleanAttribute });
-        this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : {}), transform: booleanAttribute });
+        this.isMobile = input.required({ ...(ngDevMode ? { debugName: "isMobile" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.isResetButtonDisabled = input.required({ ...(ngDevMode ? { debugName: "isResetButtonDisabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.isClearButtonDisabled = input(false, { ...(ngDevMode ? { debugName: "isClearButtonDisabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         this.resetAction = output();
         this.clearAction = output();
     }
@@ -2412,10 +2506,10 @@ class RtuiDynamicSelectorListActionsComponent {
     onClear() {
         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: ["@charset \"UTF-8\";:host{--rt-dynamic-selector-list-actions-host-padding-right: .25rem;--rt-dynamic-selector-list-actions-control-padding: 0 .25rem 0 .25rem;--rt-dynamic-selector-list-actions-control-border-right: none;--rt-dynamic-selector-list-actions-control-last-child-padding: 0 0 0 .25rem;--rt-dynamic-selector-list-actions-control-last-child-border-right: none;--rt-dynamic-selector-list-actions-item-icon-size: 1.125rem;--rt-dynamic-selector-list-actions-item-active-color: var(--rt-text-accent-danger);display:flex;align-items:center;padding-right:var(--rt-dynamic-selector-list-actions-host-padding-right);margin-left:auto}:host .rtui-dynamic-selector-list-actions{display:flex;align-items:center;padding-right:var(--rt-dynamic-selector-list-actions-padding-right);margin-left:auto}:host .rtui-dynamic-selector-list-actions__control{padding:var(--rt-dynamic-selector-list-actions-control-padding);border-right:var(--rt-dynamic-selector-list-actions-control-border-right)}:host .rtui-dynamic-selector-list-actions__control:last-child{padding:var(--rt-dynamic-selector-item-control-last-child-padding);border-right:var(--rt-dynamic-selector-item-control-last-child-border-right)}:host .rtui-dynamic-selector-list-actions__item--active{color:var(--rt-dynamic-selector-list-actions-item-active-color)}:host .rtui-dynamic-selector-list-actions__item-icon{width:var(--rt-dynamic-selector-list-actions-item-icon-size);height:var(--rt-dynamic-selector-list-actions-item-icon-size);font-size:var(--rt-dynamic-selector-list-actions-item-icon-size)}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: RtIconOutlinedDirective, selector: "mat-icon[rtIconOutlined]", inputs: ["rtIconOutlined"] }, { kind: "directive", type: BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }, { kind: "directive", type: ModDirective, selector: "[rtMod]" }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiDynamicSelectorListActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.5", type: RtuiDynamicSelectorListActionsComponent, isStandalone: true, selector: "rtui-dynamic-selector-list-actions", inputs: { isMobile: { classPropertyName: "isMobile", publicName: "isMobile", isSignal: true, isRequired: true, transformFunction: null }, isResetButtonDisabled: { classPropertyName: "isResetButtonDisabled", publicName: "isResetButtonDisabled", isSignal: true, isRequired: true, transformFunction: null }, isClearButtonDisabled: { classPropertyName: "isClearButtonDisabled", publicName: "isClearButtonDisabled", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { resetAction: "resetAction", clearAction: "clearAction" }, ngImport: i0, template: "<ng-container rtBlock=\"rtui-dynamic-selector-list-actions\">\n    <div rtElem=\"control\">\n        <button\n            mat-icon-button\n            type=\"button\"\n            rtElem=\"item\"\n            matTooltip=\"Reset to initial list\"\n            matTooltipClass=\"custom-tooltip\"\n            matTooltipPosition=\"left\"\n            [rtMod]=\"{ active: !isResetButtonDisabled() && !disabled() }\"\n            [disabled]=\"isResetButtonDisabled() || disabled()\"\n            [matTooltipDisabled]=\"isMobile()\"\n            (click)=\"onReset()\">\n            <mat-icon rtElem=\"item-icon\" [rtIconOutlined]=\"true\">refresh</mat-icon>\n        </button>\n    </div>\n\n    <div rtElem=\"control\">\n        <button\n            mat-icon-button\n            type=\"button\"\n            rtElem=\"item\"\n            matTooltip=\"Clear list\"\n            matTooltipClass=\"custom-tooltip\"\n            matTooltipPosition=\"above\"\n            [rtMod]=\"{ active: !disabled() && !isClearButtonDisabled() }\"\n            [matTooltipDisabled]=\"isMobile()\"\n            [disabled]=\"disabled() || isClearButtonDisabled()\"\n            (click)=\"onClear()\">\n            <mat-icon rtElem=\"item-icon\" [rtIconOutlined]=\"true\">delete_forever</mat-icon>\n        </button>\n    </div>\n</ng-container>\n", styles: ["@charset \"UTF-8\";:host{--rt-dynamic-selector-list-actions-host-padding-right: .25rem;--rt-dynamic-selector-list-actions-control-padding: 0 .25rem 0 .25rem;--rt-dynamic-selector-list-actions-control-border-right: none;--rt-dynamic-selector-list-actions-control-last-child-padding: 0 0 0 .25rem;--rt-dynamic-selector-list-actions-control-last-child-border-right: none;--rt-dynamic-selector-list-actions-item-icon-size: 1.125rem;--rt-dynamic-selector-list-actions-item-active-color: var(--rt-text-accent-danger);display:flex;align-items:center;padding-right:var(--rt-dynamic-selector-list-actions-host-padding-right);margin-left:auto}:host .rtui-dynamic-selector-list-actions{display:flex;align-items:center;padding-right:var(--rt-dynamic-selector-list-actions-padding-right);margin-left:auto}:host .rtui-dynamic-selector-list-actions__control{padding:var(--rt-dynamic-selector-list-actions-control-padding);border-right:var(--rt-dynamic-selector-list-actions-control-border-right)}:host .rtui-dynamic-selector-list-actions__control:last-child{padding:var(--rt-dynamic-selector-item-control-last-child-padding);border-right:var(--rt-dynamic-selector-item-control-last-child-border-right)}:host .rtui-dynamic-selector-list-actions__item--active{color:var(--rt-dynamic-selector-list-actions-item-active-color)}:host .rtui-dynamic-selector-list-actions__item-icon{width:var(--rt-dynamic-selector-list-actions-item-icon-size);height:var(--rt-dynamic-selector-list-actions-item-icon-size);font-size:var(--rt-dynamic-selector-list-actions-item-icon-size)}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: RtIconOutlinedDirective, selector: "mat-icon[rtIconOutlined]", inputs: ["rtIconOutlined"] }, { kind: "directive", type: BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }, { kind: "directive", type: ModDirective, selector: "[rtMod]" }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtuiDynamicSelectorListActionsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiDynamicSelectorListActionsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'rtui-dynamic-selector-list-actions', imports: [MatIcon, MatButton, RtIconOutlinedDirective, BlockDirective, ElemDirective, ModDirective, MatIconButton, MatTooltip], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container rtBlock=\"rtui-dynamic-selector-list-actions\">\n    <div rtElem=\"control\">\n        <button\n            mat-icon-button\n            type=\"button\"\n            rtElem=\"item\"\n            matTooltip=\"Reset to initial list\"\n            matTooltipClass=\"custom-tooltip\"\n            matTooltipPosition=\"left\"\n            [rtMod]=\"{ active: !isResetButtonDisabled() && !disabled() }\"\n            [disabled]=\"isResetButtonDisabled() || disabled()\"\n            [matTooltipDisabled]=\"isMobile()\"\n            (click)=\"onReset()\">\n            <mat-icon rtElem=\"item-icon\" [rtIconOutlined]=\"true\">refresh</mat-icon>\n        </button>\n    </div>\n\n    <div rtElem=\"control\">\n        <button\n            mat-icon-button\n            type=\"button\"\n            rtElem=\"item\"\n            matTooltip=\"Clear list\"\n            matTooltipClass=\"custom-tooltip\"\n            matTooltipPosition=\"above\"\n            [rtMod]=\"{ active: !disabled() && !isClearButtonDisabled() }\"\n            [matTooltipDisabled]=\"isMobile()\"\n            [disabled]=\"disabled() || isClearButtonDisabled()\"\n            (click)=\"onClear()\">\n            <mat-icon rtElem=\"item-icon\" [rtIconOutlined]=\"true\">delete_forever</mat-icon>\n        </button>\n    </div>\n</ng-container>\n", styles: ["@charset \"UTF-8\";:host{--rt-dynamic-selector-list-actions-host-padding-right: .25rem;--rt-dynamic-selector-list-actions-control-padding: 0 .25rem 0 .25rem;--rt-dynamic-selector-list-actions-control-border-right: none;--rt-dynamic-selector-list-actions-control-last-child-padding: 0 0 0 .25rem;--rt-dynamic-selector-list-actions-control-last-child-border-right: none;--rt-dynamic-selector-list-actions-item-icon-size: 1.125rem;--rt-dynamic-selector-list-actions-item-active-color: var(--rt-text-accent-danger);display:flex;align-items:center;padding-right:var(--rt-dynamic-selector-list-actions-host-padding-right);margin-left:auto}:host .rtui-dynamic-selector-list-actions{display:flex;align-items:center;padding-right:var(--rt-dynamic-selector-list-actions-padding-right);margin-left:auto}:host .rtui-dynamic-selector-list-actions__control{padding:var(--rt-dynamic-selector-list-actions-control-padding);border-right:var(--rt-dynamic-selector-list-actions-control-border-right)}:host .rtui-dynamic-selector-list-actions__control:last-child{padding:var(--rt-dynamic-selector-item-control-last-child-padding);border-right:var(--rt-dynamic-selector-item-control-last-child-border-right)}:host .rtui-dynamic-selector-list-actions__item--active{color:var(--rt-dynamic-selector-list-actions-item-active-color)}:host .rtui-dynamic-selector-list-actions__item-icon{width:var(--rt-dynamic-selector-list-actions-item-icon-size);height:var(--rt-dynamic-selector-list-actions-item-icon-size);font-size:var(--rt-dynamic-selector-list-actions-item-icon-size)}\n"] }]
         }], propDecorators: { isMobile: [{ type: i0.Input, args: [{ isSignal: true, alias: "isMobile", required: true }] }], isResetButtonDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "isResetButtonDisabled", required: true }] }], isClearButtonDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "isClearButtonDisabled", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], resetAction: [{ type: i0.Output, args: ["resetAction"] }], clearAction: [{ type: i0.Output, args: ["clearAction"] }] } });
@@ -2423,33 +2517,34 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
 class RtuiDynamicSelectorsDirective {
     constructor() {
         /** Indicates if mobile view */
-        this.isMobile = input.required({ ...(ngDevMode ? { debugName: "isMobile" } : {}), transform: booleanAttribute });
+        this.isMobile = input.required({ ...(ngDevMode ? { debugName: "isMobile" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /** Selections control button title */
-        this.buttonTitle = input('Add', { ...(ngDevMode ? { debugName: "buttonTitle" } : {}), transform: transformStringInput });
+        this.buttonTitle = input('Add', { ...(ngDevMode ? { debugName: "buttonTitle" } : /* istanbul ignore next */ {}), transform: transformStringInput });
         /** Indicates if only one option can be chosen */
-        this.isSingleSelection = input(false, { ...(ngDevMode ? { debugName: "isSingleSelection" } : {}), transform: booleanAttribute });
+        this.isSingleSelection = input(false, { ...(ngDevMode ? { debugName: "isSingleSelection" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /** Indicates is selector disabled */
-        this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : {}), transform: booleanAttribute });
+        this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /** Indicates is break string pipe used */
-        this.useNameBreaking = input(false, { ...(ngDevMode ? { debugName: "useNameBreaking" } : {}), transform: booleanAttribute });
+        this.useNameBreaking = input(false, { ...(ngDevMode ? { debugName: "useNameBreaking" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /** Indicates is title case pipe used */
-        this.useTitleCase = input(false, { ...(ngDevMode ? { debugName: "useTitleCase" } : {}), transform: booleanAttribute });
-        this.isPlaceholderIconOutlined = input(true, { ...(ngDevMode ? { debugName: "isPlaceholderIconOutlined" } : {}), transform: booleanAttribute });
+        this.useTitleCase = input(false, { ...(ngDevMode ? { debugName: "useTitleCase" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.isPlaceholderIconOutlined = input(true, { ...(ngDevMode ? { debugName: "isPlaceholderIconOutlined" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /** Indicates is delete entity button from the selected list shown */
-        this.isDeleteButtonShown = input(true, { ...(ngDevMode ? { debugName: "isDeleteButtonShown" } : {}), transform: booleanAttribute });
+        this.isDeleteButtonShown = input(true, { ...(ngDevMode ? { debugName: "isDeleteButtonShown" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /** Indicates is list of items draggable */
-        this.isListDraggable = input(false, { ...(ngDevMode ? { debugName: "isListDraggable" } : {}), transform: booleanAttribute });
+        this.isListDraggable = input(false, { ...(ngDevMode ? { debugName: "isListDraggable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /** Placeholder icon */
-        this.placeholderIcon = input('', { ...(ngDevMode ? { debugName: "placeholderIcon" } : {}), transform: transformStringInput });
+        this.placeholderIcon = input('', { ...(ngDevMode ? { debugName: "placeholderIcon" } : /* istanbul ignore next */ {}), transform: transformStringInput });
         /** Placeholder description */
-        this.placeholderDescription = input('', { ...(ngDevMode ? { debugName: "placeholderDescription" } : {}), transform: transformStringInput });
+        this.placeholderDescription = input('', { ...(ngDevMode ? { debugName: "placeholderDescription" } : /* istanbul ignore next */ {}), transform: transformStringInput });
         /** Material elements appearance */
-        this.appearance = input('fill', { ...(ngDevMode ? { debugName: "appearance" } : {}) });
+        this.appearance = input('fill', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtuiDynamicSelectorsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.1", type: RtuiDynamicSelectorsDirective, isStandalone: true, inputs: { isMobile: { classPropertyName: "isMobile", publicName: "isMobile", isSignal: true, isRequired: true, transformFunction: null }, buttonTitle: { classPropertyName: "buttonTitle", publicName: "buttonTitle", isSignal: true, isRequired: false, transformFunction: null }, isSingleSelection: { classPropertyName: "isSingleSelection", publicName: "isSingleSelection", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, useNameBreaking: { classPropertyName: "useNameBreaking", publicName: "useNameBreaking", isSignal: true, isRequired: false, transformFunction: null }, useTitleCase: { classPropertyName: "useTitleCase", publicName: "useTitleCase", isSignal: true, isRequired: false, transformFunction: null }, isPlaceholderIconOutlined: { classPropertyName: "isPlaceholderIconOutlined", publicName: "isPlaceholderIconOutlined", isSignal: true, isRequired: false, transformFunction: null }, isDeleteButtonShown: { classPropertyName: "isDeleteButtonShown", publicName: "isDeleteButtonShown", isSignal: true, isRequired: false, transformFunction: null }, isListDraggable: { classPropertyName: "isListDraggable", publicName: "isListDraggable", isSignal: true, isRequired: false, transformFunction: null }, placeholderIcon: { classPropertyName: "placeholderIcon", publicName: "placeholderIcon", isSignal: true, isRequired: false, transformFunction: null }, placeholderDescription: { classPropertyName: "placeholderDescription", publicName: "placeholderDescription", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiDynamicSelectorsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.5", type: RtuiDynamicSelectorsDirective, isStandalone: true, inputs: { isMobile: { classPropertyName: "isMobile", publicName: "isMobile", isSignal: true, isRequired: true, transformFunction: null }, buttonTitle: { classPropertyName: "buttonTitle", publicName: "buttonTitle", isSignal: true, isRequired: false, transformFunction: null }, isSingleSelection: { classPropertyName: "isSingleSelection", publicName: "isSingleSelection", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, useNameBreaking: { classPropertyName: "useNameBreaking", publicName: "useNameBreaking", isSignal: true, isRequired: false, transformFunction: null }, useTitleCase: { classPropertyName: "useTitleCase", publicName: "useTitleCase", isSignal: true, isRequired: false, transformFunction: null }, isPlaceholderIconOutlined: { classPropertyName: "isPlaceholderIconOutlined", publicName: "isPlaceholderIconOutlined", isSignal: true, isRequired: false, transformFunction: null }, isDeleteButtonShown: { classPropertyName: "isDeleteButtonShown", publicName: "isDeleteButtonShown", isSignal: true, isRequired: false, transformFunction: null }, isListDraggable: { classPropertyName: "isListDraggable", publicName: "isListDraggable", isSignal: true, isRequired: false, transformFunction: null }, placeholderIcon: { classPropertyName: "placeholderIcon", publicName: "placeholderIcon", isSignal: true, isRequired: false, transformFunction: null }, placeholderDescription: { classPropertyName: "placeholderDescription", publicName: "placeholderDescription", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtuiDynamicSelectorsDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiDynamicSelectorsDirective, decorators: [{
             type: Directive
         }], propDecorators: { isMobile: [{ type: i0.Input, args: [{ isSignal: true, alias: "isMobile", required: true }] }], buttonTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonTitle", required: false }] }], isSingleSelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "isSingleSelection", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], useNameBreaking: [{ type: i0.Input, args: [{ isSignal: true, alias: "useNameBreaking", required: false }] }], useTitleCase: [{ type: i0.Input, args: [{ isSignal: true, alias: "useTitleCase", required: false }] }], isPlaceholderIconOutlined: [{ type: i0.Input, args: [{ isSignal: true, alias: "isPlaceholderIconOutlined", required: false }] }], isDeleteButtonShown: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDeleteButtonShown", required: false }] }], isListDraggable: [{ type: i0.Input, args: [{ isSignal: true, alias: "isListDraggable", required: false }] }], placeholderIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholderIcon", required: false }] }], placeholderDescription: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholderDescription", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }] } });
 
@@ -2466,12 +2561,16 @@ class RtuiToggleComponent {
         this.#destroyRef = inject(DestroyRef);
         this.#breakpointService = inject(BreakpointService);
         this.formControl = new FormControl(false, { nonNullable: true });
-        this.label = input(undefined, { ...(ngDevMode ? { debugName: "label" } : {}) });
-        this.tooltip = input('', { ...(ngDevMode ? { debugName: "tooltip" } : {}) });
-        this.size = input(TOGGLE_SIZE_TYPE_ENUM.MD, { ...(ngDevMode ? { debugName: "size" } : {}) });
-        this.tooltipPosition = input('above', { ...(ngDevMode ? { debugName: "tooltipPosition" } : {}) });
-        this.isDisabled = input(false, { ...(ngDevMode ? { debugName: "isDisabled" } : {}), transform: booleanAttribute });
-        this.tooltipDisabled = input(false, { ...(ngDevMode ? { debugName: "tooltipDisabled" } : {}), transform: booleanAttribute });
+        this.label = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "label" }] : /* istanbul ignore next */ []));
+        this.tooltip = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "tooltip" }] : /* istanbul ignore next */ []));
+        this.size = input(TOGGLE_SIZE_TYPE_ENUM.MD, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+        this.tooltipPosition = input('above', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "tooltipPosition" }] : /* istanbul ignore next */ []));
+        this.isDisabled = input(false, { ...(ngDevMode ? { debugName: "isDisabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.tooltipDisabled = input(false, { ...(ngDevMode ? { debugName: "tooltipDisabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         this.isMobile = this.#breakpointService.isMobile;
         this.#onTouched = noop;
         this.#onChanged = noop;
@@ -2517,19 +2616,19 @@ class RtuiToggleComponent {
         }
         this.#cdr.markForCheck();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtuiToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: RtuiToggleComponent, isStandalone: true, selector: "rtui-toggle", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, tooltipPosition: { classPropertyName: "tooltipPosition", publicName: "tooltipPosition", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, tooltipDisabled: { classPropertyName: "tooltipDisabled", publicName: "tooltipDisabled", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: RtuiToggleComponent, isStandalone: true, selector: "rtui-toggle", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, tooltipPosition: { classPropertyName: "tooltipPosition", publicName: "tooltipPosition", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, tooltipDisabled: { classPropertyName: "tooltipDisabled", publicName: "tooltipDisabled", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => 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: ["@charset \"UTF-8\";:host{--rt-toggle-container-display: flex;--rt-toggle-container-align-items: center;--rt-toggle-container-justify-content: space-between;--rt-toggle-container-gap: 1rem;--rt-toggle-container-disabled-opacity: .6;--rt-toggle-toggle-border-radius: 6.25rem;--rt-toggle-toggle-background-color: var(--rt-bg-base-subtle);--rt-toggle-toggle-box-shadow: inset 0 0 .125rem .0625rem rgba(0, 0, 0, .05);--rt-toggle-toggle-check-box-shadow: inset 0 0 0 1.25rem var(--rt-control-checked);--rt-toggle-toggle-switch-border-radius: 2.25rem;--rt-toggle-toggle-switch-background-color: var(--rt-control-thumb);--rt-toggle-toggle-switch-box-shadow: 0 .0625rem .125rem rgba(0, 0, 0, .2);--rt-toggle-toggle-track-background-color: var(--rt-control-track);--rt-toggle-toggle-track-border-radius: 2.5rem;--rt-toggle-toggle-track-border: .0625rem solid var(--rt-border-neutral-medium);--rt-toggle-label-color: var(--rt-text-base-secondary);--rt-toggle-label-font-size: .875rem;--rt-toggle-label-active-color: var(--rt-text-base-strong);--rt-toggle-label-hover-color: var(--rt-text-base-strong);--rt-toggle-label-hover-cursor: pointer}:host .rtui-toggle-container{display:var(--rt-toggle-container-display);align-items:var(--rt-toggle-container-align-items);justify-content:var(--rt-toggle-container-justify-content);gap:var(--rt-toggle-container-gap)}:host .rtui-toggle-container--disabled{opacity:var(--rt-toggle-container-disabled-opacity)}:host .rtui-toggle-container--disabled .rtui-toggle,:host .rtui-toggle-container--disabled .rtui-toggle-container__label{pointer-events:none}:host .rtui-toggle-container__label{color:var(--rt-toggle-label-color);font-size:var(--rt-toggle-label-font-size)}:host .rtui-toggle-container__label:hover{color:var(--rt-toggle-label-hover-color);cursor:pointer}:host .rtui-toggle-container__label--active{color:var(--rt-toggle-label-active-color)}:host .rtui-toggle-container .rtui-toggle{position:relative;overflow:hidden;width:3.125rem;min-width:3.125rem;height:1.875rem;border-radius:var(--rt-toggle-toggle-border-radius);background-color:var(--rt-toggle-toggle-background-color);box-shadow:var(--rt-toggle-toggle-box-shadow);cursor:pointer}:host .rtui-toggle-container .rtui-toggle b{display:block}:host .rtui-toggle-container .rtui-toggle__check{display:none}:host .rtui-toggle-container .rtui-toggle__check:checked~.rtui-toggle__track{box-shadow:var(--rt-toggle-toggle-check-box-shadow)}:host .rtui-toggle-container .rtui-toggle__check:checked~.rtui-toggle__switch{right:.125rem;left:1.375rem;transition:.35s cubic-bezier(.785,.135,.15,.86);transition-delay:.05s,0s;transition-property:left,right}:host .rtui-toggle-container .rtui-toggle__switch{position:absolute;z-index:1;border-radius:var(--rt-toggle-toggle-switch-border-radius);background-color:var(--rt-toggle-toggle-switch-background-color);box-shadow:var(--rt-toggle-toggle-switch-box-shadow);inset:.125rem 1.375rem .125rem .125rem;transition:.35s cubic-bezier(.785,.135,.15,.86);transition-delay:0s,.05s;transition-property:left,right}:host .rtui-toggle-container .rtui-toggle__track{position:absolute;border:var(--rt-toggle-toggle-track-border);border-radius:var(--rt-toggle-toggle-track-border-radius);background-color:var(--rt-toggle-toggle-track-background-color);inset:0;transition:.35s cubic-bezier(.785,.135,.15,.86)}:host .rtui-toggle-container .rtui-toggle--md{width:3rem;min-width:3rem;height:1.5rem}:host .rtui-toggle-container .rtui-toggle--md .rtui-toggle__switch{right:1.625rem}:host .rtui-toggle-container .rtui-toggle--md .rtui-toggle__check:checked~.rtui-toggle__switch{right:.125rem;left:1.625rem}:host .rtui-toggle-container .rtui-toggle--sm{width:1.5rem;min-width:1.5rem;height:.875rem}:host .rtui-toggle-container .rtui-toggle--sm .rtui-toggle__switch{right:.75rem}:host .rtui-toggle-container .rtui-toggle--sm .rtui-toggle__check:checked~.rtui-toggle__switch{right:.125rem;left:.75rem}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: 
+        ], ngImport: i0, template: "<label\n    rtBlock=\"rtui-toggle-container\"\n    [rtMod]=\"{ disabled: isDisabled() }\"\n    [matTooltipPosition]=\"tooltipPosition()\"\n    [matTooltip]=\"tooltip()\"\n    [matTooltipDisabled]=\"!tooltip() || isMobile() || tooltipDisabled()\">\n    <div rtBlock=\"rtui-toggle\" rtMod=\"{{ size() }}\">\n        <input type=\"checkbox\" rtElem=\"check\" [formControl]=\"formControl\" />\n\n        <b rtElem=\"switch\"></b>\n\n        <b rtElem=\"track\"></b>\n    </div>\n\n    @if (label()) {\n        <div rtElem=\"label\" [rtMod]=\"{ active: formControl.value }\">{{ label() }}</div>\n    }\n</label>\n", styles: ["@charset \"UTF-8\";:host{--rt-toggle-container-display: flex;--rt-toggle-container-align-items: center;--rt-toggle-container-justify-content: space-between;--rt-toggle-container-gap: 1rem;--rt-toggle-container-disabled-opacity: .6;--rt-toggle-toggle-border-radius: 6.25rem;--rt-toggle-toggle-background-color: var(--rt-bg-base-subtle);--rt-toggle-toggle-box-shadow: inset 0 0 .125rem .0625rem rgba(0, 0, 0, .05);--rt-toggle-toggle-check-box-shadow: inset 0 0 0 1.25rem var(--rt-control-checked);--rt-toggle-toggle-switch-border-radius: 2.25rem;--rt-toggle-toggle-switch-background-color: var(--rt-control-thumb);--rt-toggle-toggle-switch-box-shadow: 0 .0625rem .125rem rgba(0, 0, 0, .2);--rt-toggle-toggle-track-background-color: var(--rt-control-track);--rt-toggle-toggle-track-border-radius: 2.5rem;--rt-toggle-toggle-track-border: .0625rem solid var(--rt-border-neutral-medium);--rt-toggle-label-color: var(--rt-text-base-secondary);--rt-toggle-label-font-size: .875rem;--rt-toggle-label-active-color: var(--rt-text-base-strong);--rt-toggle-label-hover-color: var(--rt-text-base-strong);--rt-toggle-label-hover-cursor: pointer}:host .rtui-toggle-container{display:var(--rt-toggle-container-display);align-items:var(--rt-toggle-container-align-items);justify-content:var(--rt-toggle-container-justify-content);gap:var(--rt-toggle-container-gap)}:host .rtui-toggle-container--disabled{opacity:var(--rt-toggle-container-disabled-opacity)}:host .rtui-toggle-container--disabled .rtui-toggle,:host .rtui-toggle-container--disabled .rtui-toggle-container__label{pointer-events:none}:host .rtui-toggle-container__label{color:var(--rt-toggle-label-color);font-size:var(--rt-toggle-label-font-size)}:host .rtui-toggle-container__label:hover{color:var(--rt-toggle-label-hover-color);cursor:pointer}:host .rtui-toggle-container__label--active{color:var(--rt-toggle-label-active-color)}:host .rtui-toggle-container .rtui-toggle{position:relative;overflow:hidden;width:3.125rem;min-width:3.125rem;height:1.875rem;border-radius:var(--rt-toggle-toggle-border-radius);background-color:var(--rt-toggle-toggle-background-color);box-shadow:var(--rt-toggle-toggle-box-shadow);cursor:pointer}:host .rtui-toggle-container .rtui-toggle b{display:block}:host .rtui-toggle-container .rtui-toggle__check{display:none}:host .rtui-toggle-container .rtui-toggle__check:checked~.rtui-toggle__track{box-shadow:var(--rt-toggle-toggle-check-box-shadow)}:host .rtui-toggle-container .rtui-toggle__check:checked~.rtui-toggle__switch{right:.125rem;left:1.375rem;transition:.35s cubic-bezier(.785,.135,.15,.86);transition-delay:.05s,0s;transition-property:left,right}:host .rtui-toggle-container .rtui-toggle__switch{position:absolute;z-index:1;border-radius:var(--rt-toggle-toggle-switch-border-radius);background-color:var(--rt-toggle-toggle-switch-background-color);box-shadow:var(--rt-toggle-toggle-switch-box-shadow);inset:.125rem 1.375rem .125rem .125rem;transition:.35s cubic-bezier(.785,.135,.15,.86);transition-delay:0s,.05s;transition-property:left,right}:host .rtui-toggle-container .rtui-toggle__track{position:absolute;border:var(--rt-toggle-toggle-track-border);border-radius:var(--rt-toggle-toggle-track-border-radius);background-color:var(--rt-toggle-toggle-track-background-color);inset:0;transition:.35s cubic-bezier(.785,.135,.15,.86)}:host .rtui-toggle-container .rtui-toggle--md{width:3rem;min-width:3rem;height:1.5rem}:host .rtui-toggle-container .rtui-toggle--md .rtui-toggle__switch{right:1.625rem}:host .rtui-toggle-container .rtui-toggle--md .rtui-toggle__check:checked~.rtui-toggle__switch{right:.125rem;left:1.625rem}:host .rtui-toggle-container .rtui-toggle--sm{width:1.5rem;min-width:1.5rem;height:.875rem}:host .rtui-toggle-container .rtui-toggle--sm .rtui-toggle__switch{right:.75rem}:host .rtui-toggle-container .rtui-toggle--sm .rtui-toggle__check:checked~.rtui-toggle__switch{right:.125rem;left:.75rem}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox]:not([ngNoCva])[formControlName],input[type=checkbox]:not([ngNoCva])[formControl],input[type=checkbox]:not([ngNoCva])[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"] }, { kind: "directive", type: ModDirective, selector: "[rtMod]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtuiToggleComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiToggleComponent, decorators: [{
             type: Component,
             args: [{ selector: 'rtui-toggle', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         {
@@ -2555,38 +2654,44 @@ class RtuiMultiSelectorPopupComponent {
         this.#deviceService = inject(DeviceDetectorService);
         this.oSTypes = OSTypes;
         /** Indicates is mobile view */
-        this.isMobile = input.required({ ...(ngDevMode ? { debugName: "isMobile" } : {}), transform: booleanAttribute });
-        this.entitiesToSelect = input.required({ ...(ngDevMode ? { debugName: "entitiesToSelect" } : {}), transform: (value) => transformArrayInput(value) });
+        this.isMobile = input.required({ ...(ngDevMode ? { debugName: "isMobile" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.entitiesToSelect = input.required({ ...(ngDevMode ? { debugName: "entitiesToSelect" } : /* istanbul ignore next */ {}), transform: (value) => transformArrayInput(value) });
         /** Material elements appearance */
-        this.appearance = input.required({ ...(ngDevMode ? { debugName: "appearance" } : {}) });
+        this.appearance = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []));
         /** A model's field which should be used for http-requests */
-        this.keyExp = input.required({ ...(ngDevMode ? { debugName: "keyExp" } : {}) });
+        this.keyExp = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "keyExp" }] : /* istanbul ignore next */ []));
         /** A model's field which should be shown in ui */
-        this.displayExp = input.required({ ...(ngDevMode ? { debugName: "displayExp" } : {}) });
+        this.displayExp = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "displayExp" }] : /* istanbul ignore next */ []));
         /** Init search term value */
-        this.searchTerm = input('', { ...(ngDevMode ? { debugName: "searchTerm" } : {}) });
+        this.searchTerm = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "searchTerm" }] : /* istanbul ignore next */ []));
         /** Navigation button title */
-        this.navigateButtonTitle = input('', { ...(ngDevMode ? { debugName: "navigateButtonTitle" } : {}) });
+        this.navigateButtonTitle = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "navigateButtonTitle" }] : /* istanbul ignore next */ []));
         /** Navigation button link */
-        this.navigateLink = input('', { ...(ngDevMode ? { debugName: "navigateLink" } : {}) });
+        this.navigateLink = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "navigateLink" }] : /* istanbul ignore next */ []));
         /** Indicates if only one option can be chosen */
-        this.isSingleSelection = input(false, { ...(ngDevMode ? { debugName: "isSingleSelection" } : {}), transform: booleanAttribute });
+        this.isSingleSelection = input(false, { ...(ngDevMode ? { debugName: "isSingleSelection" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /** Indicates is change multi select mode toggle shown */
-        this.isMultiToggleShown = input(false, { ...(ngDevMode ? { debugName: "isMultiToggleShown" } : {}), transform: booleanAttribute });
+        this.isMultiToggleShown = input(false, { ...(ngDevMode ? { debugName: "isMultiToggleShown" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /** Indicates is Select all button shown */
-        this.isSelectAllButtonShown = input(true, { ...(ngDevMode ? { debugName: "isSelectAllButtonShown" } : {}), transform: booleanAttribute });
+        this.isSelectAllButtonShown = input(true, { ...(ngDevMode ? { debugName: "isSelectAllButtonShown" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /** Indicates that a list of entities is being loading */
-        this.loading = input(false, { ...(ngDevMode ? { debugName: "loading" } : {}), transform: booleanAttribute });
+        this.loading = input(false, { ...(ngDevMode ? { debugName: "loading" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /** Indicates that a list of entities is being fetching */
-        this.fetching = input(false, { ...(ngDevMode ? { debugName: "fetching" } : {}), transform: booleanAttribute });
+        this.fetching = input(false, { ...(ngDevMode ? { debugName: "fetching" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /** Indicates is BreakStringPipe used */
-        this.useNameBreaking = input(false, { ...(ngDevMode ? { debugName: "useNameBreaking" } : {}), transform: booleanAttribute });
+        this.useNameBreaking = input(false, { ...(ngDevMode ? { debugName: "useNameBreaking" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /** Indicates lazy loading is used */
-        this.isLazyLoad = input(false, { ...(ngDevMode ? { debugName: "isLazyLoad" } : {}), transform: booleanAttribute });
+        this.isLazyLoad = input(false, { ...(ngDevMode ? { debugName: "isLazyLoad" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /** Indicates local search is used */
-        this.isLocalSearch = input(true, { ...(ngDevMode ? { debugName: "isLocalSearch" } : {}), transform: booleanAttribute });
+        this.isLocalSearch = input(true, { ...(ngDevMode ? { debugName: "isLocalSearch" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /** Keys of a pinned group kept at the top of the list — a trailing divider is drawn after the last visible one */
-        this.pinnedKeys = input([], { ...(ngDevMode ? { debugName: "pinnedKeys" } : {}), transform: (value) => transformArrayInput(value) });
+        this.pinnedKeys = input([], { ...(ngDevMode ? { debugName: "pinnedKeys" } : /* istanbul ignore next */ {}), transform: (value) => transformArrayInput(value) });
         /** Send output selected entities ids */
         this.submitAction = output();
         /** Close popup action */
@@ -2598,21 +2703,27 @@ class RtuiMultiSelectorPopupComponent {
         /** Output temporary selection action, needed for store values */
         this.temporarySelectAction = output();
         /** Search input Ref for set focus on init */
-        this.searchInputRef = viewChild('searchInputTpl', { ...(ngDevMode ? { debugName: "searchInputRef" } : {}) });
+        this.searchInputRef = viewChild('searchInputTpl', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "searchInputRef" }] : /* istanbul ignore next */ []));
         /** Form control for search */
         this.searchControl = new FormControl('');
         /** Form control for select */
         this.selectionControl = new FormControl([], { nonNullable: true });
         /** Entities filtered by local search */
-        this.filteredEntities = signal([], { ...(ngDevMode ? { debugName: "filteredEntities" } : {}) });
+        this.filteredEntities = signal([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "filteredEntities" }] : /* istanbul ignore next */ []));
         /** Selected entities */
-        this.selectedEntities = signal([], { ...(ngDevMode ? { debugName: "selectedEntities" } : {}) });
+        this.selectedEntities = signal([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selectedEntities" }] : /* istanbul ignore next */ []));
         /** Indicates is all available entities has been selected */
-        this.isAllSelected = signal(false, { ...(ngDevMode ? { debugName: "isAllSelected" } : {}) });
+        this.isAllSelected = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isAllSelected" }] : /* istanbul ignore next */ []));
         /** Indicates is multi selection mode enabled */
-        this.isMultiSelection = signal(true, { ...(ngDevMode ? { debugName: "isMultiSelection" } : {}) });
+        this.isMultiSelection = signal(true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isMultiSelection" }] : /* istanbul ignore next */ []));
         /** Indicates is macOS used */
-        this.isMacOS = signal(this.#deviceService.getOS() === this.oSTypes.MAC_OS, { ...(ngDevMode ? { debugName: "isMacOS" } : {}) });
+        this.isMacOS = signal(this.#deviceService.getOS() === this.oSTypes.MAC_OS, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isMacOS" }] : /* istanbul ignore next */ []));
         /** Key of the last visible pinned option — its row gets a trailing divider */
         this.lastSeparatedKey = computed(() => {
             const keys = this.pinnedKeys();
@@ -2627,7 +2738,8 @@ class RtuiMultiSelectorPopupComponent {
                 }
             }
             return null;
-        }, { ...(ngDevMode ? { debugName: "lastSeparatedKey" } : {}) });
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "lastSeparatedKey" }] : /* istanbul ignore next */ []));
     }
     #destroyRef;
     #injector;
@@ -2765,16 +2877,16 @@ class RtuiMultiSelectorPopupComponent {
     scroll() {
         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 }, pinnedKeys: { classPropertyName: "pinnedKeys", publicName: "pinnedKeys", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { submitAction: "submitAction", closeAction: "closeAction", searchAction: "searchAction", scrollAction: "scrollAction", temporarySelectAction: "temporarySelectAction" }, providers: [DeviceDetectorService], viewQueries: [{ propertyName: "searchInputRef", first: true, predicate: ["searchInputTpl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n    rtBlock=\"rtui-multi-selector-header\"\n    [rtMod]=\"{ simple: isSingleSelection() || !filteredEntities().length || filteredEntities().length <= 1 }\">\n    <mat-form-field subscriptSizing=\"dynamic\" [appearance]=\"appearance()\">\n        <input #searchInputTpl matInput placeholder=\"Search...\" type=\"text\" [formControl]=\"searchControl\" />\n\n        <mat-icon matPrefix rtIconOutlined>search</mat-icon>\n\n        <rtui-clear-button matSuffix [isButtonShown]=\"!!searchControl.value\" (clickAction)=\"onClearSearch()\" />\n    </mat-form-field>\n\n    @if (!isSingleSelection() && filteredEntities().length > 1 && !loading()) {\n        <div rtElem=\"controls\">\n            @if (isMultiToggleShown()) {\n                <div rtElem=\"controls-item\" rtMod=\"first\">\n                    <rtui-toggle label=\"Multi selection\" [ngModel]=\"this.isMultiSelection()\" (ngModelChange)=\"toggleMultiSelection()\" />\n\n                    @if (!isMobile()) {\n                        <mat-icon\n                            rtElem=\"controls-item-icon\"\n                            matTooltipPosition=\"above\"\n                            [rtIconOutlined]=\"true\"\n                            [matTooltip]=\"\n                                isMacOS() ? 'Also for multi selection use COMMAND button' : 'Also for multi selection use CTRL button'\n                            \">\n                            info\n                        </mat-icon>\n                    }\n\n                    @if (isMobile()) {\n                        <div rtElem=\"controls-item-info\">\n                            {{ isMacOS() ? 'Also for multi selection use COMMAND button' : 'Also for multi selection use CTRL button' }}\n                        </div>\n                    }\n                </div>\n            }\n\n            @if (isSelectAllButtonShown()) {\n                <div rtElem=\"controls-item\" rtMod=\"last\">\n                    <mat-checkbox\n                        [checked]=\"isAllSelected()\"\n                        [indeterminate]=\"!isAllSelected() && selectionControl.value.length > 0\"\n                        (change)=\"toggleSelectAll($event.checked)\">\n                        <div rtElem=\"controls-item-title\">Select all</div>\n                    </mat-checkbox>\n                </div>\n            }\n        </div>\n    }\n</div>\n\n@if ((filteredEntities()?.length || selectedEntities().length) && !loading()) {\n    <div rtBlock=\"rtui-multi-selector-options\" rtScrollDirective [active]=\"!!isLazyLoad() && !fetching()\" (scrollAction)=\"scroll()\">\n        @if (searchControl.value && selectedEntities()) {\n            @for (entity of selectedEntities(); track entity[displayExp()]; let i = $index) {\n                @if (isSingleSelection()) {\n                    <mat-radio-button\n                        rtElem=\"item\"\n                        [rtMod]=\"{ separated: i === selectedEntities().length - 1 }\"\n                        [checked]=\"selectionControl.value.includes(entity[keyExp()])\"\n                        (change)=\"onToggleSingleItem(entity, !selectionControl.value.includes(entity[keyExp()]))\">\n                        <div rtElem=\"item-title\">\n                            @if (useNameBreaking()) {\n                                {{ entity[displayExp()] | entityToString | breakString }}\n                            } @else {\n                                {{ entity[displayExp()] }}\n                            }\n                        </div>\n                    </mat-radio-button>\n                } @else {\n                    <mat-checkbox\n                        rtElem=\"item\"\n                        [rtMod]=\"{ separated: i === selectedEntities().length - 1 }\"\n                        [checked]=\"selectionControl.value.includes(entity[keyExp()])\"\n                        (click)=\"onToggleItem($event, entity, !selectionControl.value.includes(entity[keyExp()]))\">\n                        <div rtElem=\"item-title\">\n                            @if (useNameBreaking()) {\n                                {{ entity[displayExp()] | entityToString | breakString }}\n                            } @else {\n                                {{ entity[displayExp()] }}\n                            }\n                        </div>\n                    </mat-checkbox>\n                }\n            }\n        }\n\n        @if (filteredEntities()) {\n            @for (entity of filteredEntities(); track entity[displayExp()]) {\n                @if (isSingleSelection()) {\n                    <mat-radio-button\n                        rtElem=\"item\"\n                        [rtMod]=\"{ separated: entity[keyExp()] === lastSeparatedKey() }\"\n                        [checked]=\"selectionControl.value.includes(entity[keyExp()])\"\n                        (change)=\"onToggleSingleItem(entity, !selectionControl.value.includes(entity[keyExp()]))\">\n                        <div rtElem=\"item-title\">\n                            @if (useNameBreaking()) {\n                                {{ entity[displayExp()] | entityToString | breakString }}\n                            } @else {\n                                {{ entity[displayExp()] }}\n                            }\n                        </div>\n                    </mat-radio-button>\n                } @else {\n                    <mat-checkbox\n                        rtElem=\"item\"\n                        [rtMod]=\"{ separated: entity[keyExp()] === lastSeparatedKey() }\"\n                        [checked]=\"selectionControl.value.includes(entity[keyExp()])\"\n                        (click)=\"onToggleItem($event, entity, !selectionControl.value.includes(entity[keyExp()]))\">\n                        <div rtElem=\"item-title\">\n                            @if (useNameBreaking()) {\n                                {{ entity[displayExp()] | entityToString | breakString }}\n                            } @else {\n                                {{ entity[displayExp()] }}\n                            }\n                        </div>\n                    </mat-checkbox>\n                }\n            }\n        }\n\n        @if (fetching()) {\n            <div rtElem=\"loader\">\n                <mat-spinner [diameter]=\"20\" />\n            </div>\n        }\n    </div>\n} @else {\n    <div rtBlock=\"rtui-multi-selector-placeholder\">\n        @if (loading()) {\n            <rtui-spinner />\n        } @else {\n            <mat-icon rtElem=\"icon\" rtIconOutlined>search</mat-icon>\n\n            <div rtElem=\"title\">No Results</div>\n        }\n    </div>\n}\n\n<div rtBlock=\"rtui-multi-selector-footer\" [rtMod]=\"{ full: !!navigateLink() && !!navigateButtonTitle() }\">\n    @if (navigateLink() && navigateButtonTitle()) {\n        <a rtElem=\"nav-action\" [routerLink]=\"navigateLink()\">{{ navigateButtonTitle() }}</a>\n    }\n\n    <div rtElem=\"base-actions\">\n        <button mat-button type=\"button\" rtBlock=\"c-button\" (click)=\"onClose()\">Cancel</button>\n\n        <button\n            mat-flat-button\n            type=\"button\"\n            rtBlock=\"c-button\"\n            [disabled]=\"!selectionControl.value?.length || loading()\"\n            (click)=\"onSubmit()\">\n            SUBMIT\n        </button>\n    </div>\n</div>\n", styles: ["@charset \"UTF-8\";:host{--rt-multi-selector-host-width: 20rem;--rt-multi-selector-host-height: 30rem;--rt-multi-selector-host-padding: 1rem 0 1rem 1rem;--rt-multi-selector-host-box-shadow: 0 .5rem 1rem 0 var(--rt-shadow-color);--rt-multi-selector-host-border-radius: .375rem;--rt-multi-selector-host-background-color: var(--rt-bg-base-base);--rt-multi-selector-header-padding: 0 1rem 0 0;--rt-multi-selector-header-simple-padding: 0 1rem 1rem 0;--rt-multi-selector-header-controls-item-icon-margin-left: .5rem;--rt-multi-selector-header-controls-item-icon-color: var(--rt-text-base-disabled);--rt-multi-selector-header-controls-item-info-margin-left: .5rem;--rt-multi-selector-header-controls-item-info-font-size: .875rem;--rt-multi-selector-header-controls-item-info-color: var(--rt-text-base-secondary);--rt-multi-selector-header-controls-item-first-padding: 1rem 0 0 .5rem;--rt-multi-selector-header-controls-item-last-padding: 1rem 0 0 0;--rt-multi-selector-header-controls-item-last-border-bottom: solid 1px var(--rt-border-neutral-divider);--rt-multi-selector-item-label-hover-color: var(--rt-text-base-secondary);--rt-multi-selector-options-item-separated-border-bottom: solid 1px var(--rt-border-neutral-divider);--rt-multi-selector-options-item-title-max-width: 15rem;--rt-multi-selector-placeholder-gap: 1rem;--rt-multi-selector-placeholder-padding-right: 1rem;--rt-multi-selector-placeholder-icon-size: 3rem;--rt-multi-selector-placeholder-icon-color: var(--rt-text-base-secondary);--rt-multi-selector-placeholder-title-font-size: 1.5rem;--rt-multi-selector-placeholder-title-color: var(--rt-text-base-secondary);--rt-multi-selector-footer-padding: 1rem 1.5rem 0 .5rem;--rt-multi-selector-footer-gap: .5rem;--rt-multi-selector-footer-nav-action-font-size: .875rem;--rt-multi-selector-footer-nav-action-color: var(--rt-text-base-secondary);--rt-multi-selector-footer-nav-action-hover-color: var(--rt-text-base-strong);display:flex;width:var(--rt-multi-selector-host-width);height:var(--rt-multi-selector-host-height);flex-direction:column;padding:var(--rt-multi-selector-host-padding);border-radius:var(--rt-multi-selector-host-border-radius);background-color:var(--rt-multi-selector-host-background-color);box-shadow:var(--rt-multi-selector-host-box-shadow)}:host::ng-deep mat-radio-button .mdc-form-field .mdc-label{cursor:pointer}:host::ng-deep mat-radio-button .mdc-form-field:hover .mdc-label{color:var(--rt-multi-selector-item-label-hover-color)}:host::ng-deep mat-checkbox{width:fit-content}:host::ng-deep mat-checkbox .mdc-form-field:hover .mdc-label{color:var(--rt-multi-selector-item-label-hover-color)}:host .rtui-multi-selector-header{display:flex;flex-direction:column;padding:var(--rt-multi-selector-header-padding)}:host .rtui-multi-selector-header--simple{padding:var(--rt-multi-selector-header-simple-padding)}:host .rtui-multi-selector-header__controls{display:flex;flex-direction:column;align-items:flex-start}:host .rtui-multi-selector-header__controls-item--first{display:flex;flex-direction:row;padding:var(--rt-multi-selector-header-controls-item-first-padding)}:host .rtui-multi-selector-header__controls-item--last{width:100%;padding:var(--rt-multi-selector-header-controls-item-last-padding);border-bottom:var(--rt-multi-selector-header-controls-item-last-border-bottom)}:host .rtui-multi-selector-header__controls-item-icon{margin-left:var(--rt-multi-selector-header-controls-item-icon-margin-left);color:var(--rt-multi-selector-header-controls-item-icon-color)}:host .rtui-multi-selector-header__controls-item-info{margin-left:var(--rt-multi-selector-header-controls-item-info-margin-left);color:var(--rt-multi-selector-header-controls-item-info-color);font-size:var(--rt-multi-selector-header-controls-item-info-font-size)}:host .rtui-multi-selector-options{display:flex;width:100%;height:100%;flex:1 1 100%;flex-direction:column;overflow-y:auto}:host .rtui-multi-selector-options__item-title{overflow:hidden;width:100%;max-width:var(--rt-multi-selector-options-item-title-max-width);text-overflow:ellipsis;white-space:nowrap}:host .rtui-multi-selector-options__item--separated{border-bottom:var(--rt-multi-selector-options-item-separated-border-bottom)}:host .rtui-multi-selector-options__loader{display:flex;align-items:center;justify-content:center}:host .rtui-multi-selector-placeholder{display:flex;flex:1 1 100%;flex-direction:column;align-items:center;justify-content:center;padding-right:var(--rt-multi-selector-placeholder-padding-right);gap:var(--rt-multi-selector-placeholder-gap);overflow-y:auto}:host .rtui-multi-selector-placeholder__icon{width:var(--rt-multi-selector-placeholder-icon-size);height:var(--rt-multi-selector-placeholder-icon-size);color:var(--rt-multi-selector-placeholder-icon-color);font-size:var(--rt-multi-selector-placeholder-icon-size)}:host .rtui-multi-selector-placeholder__title{color:var(--rt-multi-selector-placeholder-title-color);font-size:var(--rt-multi-selector-placeholder-title-font-size)}:host .rtui-multi-selector-footer{display:flex;align-items:center;justify-content:flex-end;padding:var(--rt-multi-selector-footer-padding);gap:var(--rt-multi-selector-footer-gap)}:host .rtui-multi-selector-footer--full{justify-content:space-between}:host .rtui-multi-selector-footer__nav-action{color:var(--rt-multi-selector-footer-nav-action-color);font-size:var(--rt-multi-selector-footer-nav-action-font-size);text-decoration:none}:host .rtui-multi-selector-footer__nav-action:hover{color:var(--rt-multi-selector-footer-nav-action-hover-color)}:host .rtui-multi-selector-footer__base-actions{display:flex;gap:var(--rt-multi-selector-footer-gap)}\n"], dependencies: [{ kind: "component", type: 
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiMultiSelectorPopupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: RtuiMultiSelectorPopupComponent, isStandalone: true, selector: "rtui-multi-selector-popup", inputs: { isMobile: { classPropertyName: "isMobile", publicName: "isMobile", isSignal: true, isRequired: true, transformFunction: null }, entitiesToSelect: { classPropertyName: "entitiesToSelect", publicName: "entitiesToSelect", isSignal: true, isRequired: true, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: true, transformFunction: null }, keyExp: { classPropertyName: "keyExp", publicName: "keyExp", isSignal: true, isRequired: true, transformFunction: null }, displayExp: { classPropertyName: "displayExp", publicName: "displayExp", isSignal: true, isRequired: true, transformFunction: null }, searchTerm: { classPropertyName: "searchTerm", publicName: "searchTerm", isSignal: true, isRequired: false, transformFunction: null }, navigateButtonTitle: { classPropertyName: "navigateButtonTitle", publicName: "navigateButtonTitle", isSignal: true, isRequired: false, transformFunction: null }, navigateLink: { classPropertyName: "navigateLink", publicName: "navigateLink", isSignal: true, isRequired: false, transformFunction: null }, isSingleSelection: { classPropertyName: "isSingleSelection", publicName: "isSingleSelection", isSignal: true, isRequired: false, transformFunction: null }, isMultiToggleShown: { classPropertyName: "isMultiToggleShown", publicName: "isMultiToggleShown", isSignal: true, isRequired: false, transformFunction: null }, isSelectAllButtonShown: { classPropertyName: "isSelectAllButtonShown", publicName: "isSelectAllButtonShown", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, fetching: { classPropertyName: "fetching", publicName: "fetching", isSignal: true, isRequired: false, transformFunction: null }, useNameBreaking: { classPropertyName: "useNameBreaking", publicName: "useNameBreaking", isSignal: true, isRequired: false, transformFunction: null }, isLazyLoad: { classPropertyName: "isLazyLoad", publicName: "isLazyLoad", isSignal: true, isRequired: false, transformFunction: null }, isLocalSearch: { classPropertyName: "isLocalSearch", publicName: "isLocalSearch", isSignal: true, isRequired: false, transformFunction: null }, pinnedKeys: { classPropertyName: "pinnedKeys", publicName: "pinnedKeys", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { submitAction: "submitAction", closeAction: "closeAction", searchAction: "searchAction", scrollAction: "scrollAction", temporarySelectAction: "temporarySelectAction" }, providers: [DeviceDetectorService], viewQueries: [{ propertyName: "searchInputRef", first: true, predicate: ["searchInputTpl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n    rtBlock=\"rtui-multi-selector-header\"\n    [rtMod]=\"{ simple: isSingleSelection() || !filteredEntities().length || filteredEntities().length <= 1 }\">\n    <mat-form-field subscriptSizing=\"dynamic\" [appearance]=\"appearance()\">\n        <input #searchInputTpl matInput placeholder=\"Search...\" type=\"text\" [formControl]=\"searchControl\" />\n\n        <mat-icon matPrefix rtIconOutlined>search</mat-icon>\n\n        <rtui-clear-button matSuffix [isButtonShown]=\"!!searchControl.value\" (clickAction)=\"onClearSearch()\" />\n    </mat-form-field>\n\n    @if (!isSingleSelection() && filteredEntities().length > 1 && !loading()) {\n        <div rtElem=\"controls\">\n            @if (isMultiToggleShown()) {\n                <div rtElem=\"controls-item\" rtMod=\"first\">\n                    <rtui-toggle label=\"Multi selection\" [ngModel]=\"this.isMultiSelection()\" (ngModelChange)=\"toggleMultiSelection()\" />\n\n                    @if (!isMobile()) {\n                        <mat-icon\n                            rtElem=\"controls-item-icon\"\n                            matTooltipPosition=\"above\"\n                            [rtIconOutlined]=\"true\"\n                            [matTooltip]=\"\n                                isMacOS() ? 'Also for multi selection use COMMAND button' : 'Also for multi selection use CTRL button'\n                            \">\n                            info\n                        </mat-icon>\n                    }\n\n                    @if (isMobile()) {\n                        <div rtElem=\"controls-item-info\">\n                            {{ isMacOS() ? 'Also for multi selection use COMMAND button' : 'Also for multi selection use CTRL button' }}\n                        </div>\n                    }\n                </div>\n            }\n\n            @if (isSelectAllButtonShown()) {\n                <div rtElem=\"controls-item\" rtMod=\"last\">\n                    <mat-checkbox\n                        [checked]=\"isAllSelected()\"\n                        [indeterminate]=\"!isAllSelected() && selectionControl.value.length > 0\"\n                        (change)=\"toggleSelectAll($event.checked)\">\n                        <div rtElem=\"controls-item-title\">Select all</div>\n                    </mat-checkbox>\n                </div>\n            }\n        </div>\n    }\n</div>\n\n@if ((filteredEntities()?.length || selectedEntities().length) && !loading()) {\n    <div rtBlock=\"rtui-multi-selector-options\" rtScrollDirective [active]=\"!!isLazyLoad() && !fetching()\" (scrollAction)=\"scroll()\">\n        @if (searchControl.value && selectedEntities()) {\n            @for (entity of selectedEntities(); track entity[displayExp()]; let i = $index) {\n                @if (isSingleSelection()) {\n                    <mat-radio-button\n                        rtElem=\"item\"\n                        [rtMod]=\"{ separated: i === selectedEntities().length - 1 }\"\n                        [checked]=\"selectionControl.value.includes(entity[keyExp()])\"\n                        (change)=\"onToggleSingleItem(entity, !selectionControl.value.includes(entity[keyExp()]))\">\n                        <div rtElem=\"item-title\">\n                            @if (useNameBreaking()) {\n                                {{ entity[displayExp()] | entityToString | breakString }}\n                            } @else {\n                                {{ entity[displayExp()] }}\n                            }\n                        </div>\n                    </mat-radio-button>\n                } @else {\n                    <mat-checkbox\n                        rtElem=\"item\"\n                        [rtMod]=\"{ separated: i === selectedEntities().length - 1 }\"\n                        [checked]=\"selectionControl.value.includes(entity[keyExp()])\"\n                        (click)=\"onToggleItem($event, entity, !selectionControl.value.includes(entity[keyExp()]))\">\n                        <div rtElem=\"item-title\">\n                            @if (useNameBreaking()) {\n                                {{ entity[displayExp()] | entityToString | breakString }}\n                            } @else {\n                                {{ entity[displayExp()] }}\n                            }\n                        </div>\n                    </mat-checkbox>\n                }\n            }\n        }\n\n        @if (filteredEntities()) {\n            @for (entity of filteredEntities(); track entity[displayExp()]) {\n                @if (isSingleSelection()) {\n                    <mat-radio-button\n                        rtElem=\"item\"\n                        [rtMod]=\"{ separated: entity[keyExp()] === lastSeparatedKey() }\"\n                        [checked]=\"selectionControl.value.includes(entity[keyExp()])\"\n                        (change)=\"onToggleSingleItem(entity, !selectionControl.value.includes(entity[keyExp()]))\">\n                        <div rtElem=\"item-title\">\n                            @if (useNameBreaking()) {\n                                {{ entity[displayExp()] | entityToString | breakString }}\n                            } @else {\n                                {{ entity[displayExp()] }}\n                            }\n                        </div>\n                    </mat-radio-button>\n                } @else {\n                    <mat-checkbox\n                        rtElem=\"item\"\n                        [rtMod]=\"{ separated: entity[keyExp()] === lastSeparatedKey() }\"\n                        [checked]=\"selectionControl.value.includes(entity[keyExp()])\"\n                        (click)=\"onToggleItem($event, entity, !selectionControl.value.includes(entity[keyExp()]))\">\n                        <div rtElem=\"item-title\">\n                            @if (useNameBreaking()) {\n                                {{ entity[displayExp()] | entityToString | breakString }}\n                            } @else {\n                                {{ entity[displayExp()] }}\n                            }\n                        </div>\n                    </mat-checkbox>\n                }\n            }\n        }\n\n        @if (fetching()) {\n            <div rtElem=\"loader\">\n                <mat-spinner [diameter]=\"20\" />\n            </div>\n        }\n    </div>\n} @else {\n    <div rtBlock=\"rtui-multi-selector-placeholder\">\n        @if (loading()) {\n            <rtui-spinner />\n        } @else {\n            <mat-icon rtElem=\"icon\" rtIconOutlined>search</mat-icon>\n\n            <div rtElem=\"title\">No Results</div>\n        }\n    </div>\n}\n\n<div rtBlock=\"rtui-multi-selector-footer\" [rtMod]=\"{ full: !!navigateLink() && !!navigateButtonTitle() }\">\n    @if (navigateLink() && navigateButtonTitle()) {\n        <a rtElem=\"nav-action\" [routerLink]=\"navigateLink()\">{{ navigateButtonTitle() }}</a>\n    }\n\n    <div rtElem=\"base-actions\">\n        <button mat-button type=\"button\" rtBlock=\"c-button\" (click)=\"onClose()\">Cancel</button>\n\n        <button\n            mat-flat-button\n            type=\"button\"\n            rtBlock=\"c-button\"\n            [disabled]=\"!selectionControl.value?.length || loading()\"\n            (click)=\"onSubmit()\">\n            SUBMIT\n        </button>\n    </div>\n</div>\n", styles: ["@charset \"UTF-8\";:host{--rt-multi-selector-host-width: 20rem;--rt-multi-selector-host-height: 30rem;--rt-multi-selector-host-padding: 1rem 0 1rem 1rem;--rt-multi-selector-host-box-shadow: 0 .5rem 1rem 0 var(--rt-shadow-color);--rt-multi-selector-host-border-radius: .375rem;--rt-multi-selector-host-background-color: var(--rt-bg-base-base);--rt-multi-selector-header-padding: 0 1rem 0 0;--rt-multi-selector-header-simple-padding: 0 1rem 1rem 0;--rt-multi-selector-header-controls-item-icon-margin-left: .5rem;--rt-multi-selector-header-controls-item-icon-color: var(--rt-text-base-disabled);--rt-multi-selector-header-controls-item-info-margin-left: .5rem;--rt-multi-selector-header-controls-item-info-font-size: .875rem;--rt-multi-selector-header-controls-item-info-color: var(--rt-text-base-secondary);--rt-multi-selector-header-controls-item-first-padding: 1rem 0 0 .5rem;--rt-multi-selector-header-controls-item-last-padding: 1rem 0 0 0;--rt-multi-selector-header-controls-item-last-border-bottom: solid 1px var(--rt-border-neutral-divider);--rt-multi-selector-item-label-hover-color: var(--rt-text-base-secondary);--rt-multi-selector-options-item-separated-border-bottom: solid 1px var(--rt-border-neutral-divider);--rt-multi-selector-options-item-title-max-width: 15rem;--rt-multi-selector-placeholder-gap: 1rem;--rt-multi-selector-placeholder-padding-right: 1rem;--rt-multi-selector-placeholder-icon-size: 3rem;--rt-multi-selector-placeholder-icon-color: var(--rt-text-base-secondary);--rt-multi-selector-placeholder-title-font-size: 1.5rem;--rt-multi-selector-placeholder-title-color: var(--rt-text-base-secondary);--rt-multi-selector-footer-padding: 1rem 1.5rem 0 .5rem;--rt-multi-selector-footer-gap: .5rem;--rt-multi-selector-footer-nav-action-font-size: .875rem;--rt-multi-selector-footer-nav-action-color: var(--rt-text-base-secondary);--rt-multi-selector-footer-nav-action-hover-color: var(--rt-text-base-strong);display:flex;width:var(--rt-multi-selector-host-width);height:var(--rt-multi-selector-host-height);flex-direction:column;padding:var(--rt-multi-selector-host-padding);border-radius:var(--rt-multi-selector-host-border-radius);background-color:var(--rt-multi-selector-host-background-color);box-shadow:var(--rt-multi-selector-host-box-shadow)}:host::ng-deep mat-radio-button .mdc-form-field .mdc-label{cursor:pointer}:host::ng-deep mat-radio-button .mdc-form-field:hover .mdc-label{color:var(--rt-multi-selector-item-label-hover-color)}:host::ng-deep mat-checkbox{width:fit-content}:host::ng-deep mat-checkbox .mdc-form-field:hover .mdc-label{color:var(--rt-multi-selector-item-label-hover-color)}:host .rtui-multi-selector-header{display:flex;flex-direction:column;padding:var(--rt-multi-selector-header-padding)}:host .rtui-multi-selector-header--simple{padding:var(--rt-multi-selector-header-simple-padding)}:host .rtui-multi-selector-header__controls{display:flex;flex-direction:column;align-items:flex-start}:host .rtui-multi-selector-header__controls-item--first{display:flex;flex-direction:row;padding:var(--rt-multi-selector-header-controls-item-first-padding)}:host .rtui-multi-selector-header__controls-item--last{width:100%;padding:var(--rt-multi-selector-header-controls-item-last-padding);border-bottom:var(--rt-multi-selector-header-controls-item-last-border-bottom)}:host .rtui-multi-selector-header__controls-item-icon{margin-left:var(--rt-multi-selector-header-controls-item-icon-margin-left);color:var(--rt-multi-selector-header-controls-item-icon-color)}:host .rtui-multi-selector-header__controls-item-info{margin-left:var(--rt-multi-selector-header-controls-item-info-margin-left);color:var(--rt-multi-selector-header-controls-item-info-color);font-size:var(--rt-multi-selector-header-controls-item-info-font-size)}:host .rtui-multi-selector-options{display:flex;width:100%;height:100%;flex:1 1 100%;flex-direction:column;overflow-y:auto}:host .rtui-multi-selector-options__item-title{overflow:hidden;width:100%;max-width:var(--rt-multi-selector-options-item-title-max-width);text-overflow:ellipsis;white-space:nowrap}:host .rtui-multi-selector-options__item--separated{border-bottom:var(--rt-multi-selector-options-item-separated-border-bottom)}:host .rtui-multi-selector-options__loader{display:flex;align-items:center;justify-content:center}:host .rtui-multi-selector-placeholder{display:flex;flex:1 1 100%;flex-direction:column;align-items:center;justify-content:center;padding-right:var(--rt-multi-selector-placeholder-padding-right);gap:var(--rt-multi-selector-placeholder-gap);overflow-y:auto}:host .rtui-multi-selector-placeholder__icon{width:var(--rt-multi-selector-placeholder-icon-size);height:var(--rt-multi-selector-placeholder-icon-size);color:var(--rt-multi-selector-placeholder-icon-color);font-size:var(--rt-multi-selector-placeholder-icon-size)}:host .rtui-multi-selector-placeholder__title{color:var(--rt-multi-selector-placeholder-title-color);font-size:var(--rt-multi-selector-placeholder-title-font-size)}:host .rtui-multi-selector-footer{display:flex;align-items:center;justify-content:flex-end;padding:var(--rt-multi-selector-footer-padding);gap:var(--rt-multi-selector-footer-gap)}:host .rtui-multi-selector-footer--full{justify-content:space-between}:host .rtui-multi-selector-footer__nav-action{color:var(--rt-multi-selector-footer-nav-action-color);font-size:var(--rt-multi-selector-footer-nav-action-font-size);text-decoration:none}:host .rtui-multi-selector-footer__nav-action:hover{color:var(--rt-multi-selector-footer-nav-action-hover-color)}:host .rtui-multi-selector-footer__base-actions{display:flex;gap:var(--rt-multi-selector-footer-gap)}\n"], dependencies: [{ kind: "component", type: 
                 // 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: 
+                MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "component", type: MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: 
                 // directives
                 BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }, { kind: "directive", type: ModDirective, selector: "[rtMod]" }, { kind: "directive", type: RtScrollDirective, selector: "[rtScrollDirective]", inputs: ["active", "multiplier"], outputs: ["scrollAction"] }, { kind: "directive", type: RtIconOutlinedDirective, selector: "mat-icon[rtIconOutlined]", inputs: ["rtIconOutlined"] }, { kind: "component", type: 
                 // components
                 RtuiClearButtonComponent, selector: "rtui-clear-button", inputs: ["isMobile", "isButtonShown", "tooltip", "tooltipPosition"], outputs: ["keydownAction", "clickAction"] }, { kind: "component", type: RtuiToggleComponent, selector: "rtui-toggle", inputs: ["label", "tooltip", "size", "tooltipPosition", "isDisabled", "tooltipDisabled"] }, { kind: "component", type: RtuiSpinnerComponent, selector: "rtui-spinner", inputs: ["diameter", "showBox", "showBackground"] }, { kind: "pipe", type: BreakStringPipe, name: "breakString" }, { kind: "pipe", type: EntityToStringPipe, name: "entityToString" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtuiMultiSelectorPopupComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiMultiSelectorPopupComponent, decorators: [{
             type: Component,
             args: [{ selector: 'rtui-multi-selector-popup', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         // Material
@@ -2808,31 +2920,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
 
 class RtuiDynamicSelectorPlaceholderComponent {
     constructor() {
-        this.icon = input('', { ...(ngDevMode ? { debugName: "icon" } : {}), transform: transformStringInput });
-        this.description = input('', { ...(ngDevMode ? { debugName: "description" } : {}), transform: transformStringInput });
-        this.buttonTitle = input('Add', { ...(ngDevMode ? { debugName: "buttonTitle" } : {}), transform: transformStringInput });
-        this.isButtonShow = input(true, { ...(ngDevMode ? { debugName: "isButtonShow" } : {}), transform: booleanAttribute });
-        this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : {}), transform: booleanAttribute });
-        this.isIconOutlined = input(false, { ...(ngDevMode ? { debugName: "isIconOutlined" } : {}), transform: booleanAttribute });
+        this.icon = input('', { ...(ngDevMode ? { debugName: "icon" } : /* istanbul ignore next */ {}), transform: transformStringInput });
+        this.description = input('', { ...(ngDevMode ? { debugName: "description" } : /* istanbul ignore next */ {}), transform: transformStringInput });
+        this.buttonTitle = input('Add', { ...(ngDevMode ? { debugName: "buttonTitle" } : /* istanbul ignore next */ {}), transform: transformStringInput });
+        this.isButtonShow = input(true, { ...(ngDevMode ? { debugName: "isButtonShow" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.isIconOutlined = input(false, { ...(ngDevMode ? { debugName: "isIconOutlined" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         this.submitAction = output();
     }
     onSubmit(trigger) {
         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: ["@charset \"UTF-8\";:host{--rt-dynamic-selector-placeholder-host-width: 100%;--rt-dynamic-selector-placeholder-host-height: 100%;--rt-dynamic-selector-placeholder-host-min-height: 10rem;--rt-dynamic-selector-placeholder-host-gap: 1rem;--rt-dynamic-selector-placeholder-icon-size: 4rem;--rt-dynamic-selector-placeholder-icon-color: var(--rt-text-base-soft);--rt-dynamic-selector-placeholder-icon-warn-color: var(--rt-icon-accent-warning);--rt-dynamic-selector-placeholder-description-font-size: 1rem;--rt-dynamic-selector-placeholder-description-line-height: 1.25rem;--rt-dynamic-selector-placeholder-description-color: var(--rt-text-base-secondary);display:flex;width:var(--rt-dynamic-selector-placeholder-host-width);height:var(--rt-dynamic-selector-placeholder-host-height);min-height:var(--rt-dynamic-selector-placeholder-host-min-height);flex-direction:column;align-items:center;justify-content:center;gap:var(--rt-dynamic-selector-placeholder-host-gap)}:host .rtui-dynamic-selector-placeholder__icon{width:var(--rt-dynamic-selector-placeholder-icon-size);height:var(--rt-dynamic-selector-placeholder-icon-size);color:var(--rt-dynamic-selector-placeholder-icon-color);font-size:var(--rt-dynamic-selector-placeholder-icon-size)}:host .rtui-dynamic-selector-placeholder__icon--warn{color:var(--rt-dynamic-selector-placeholder-icon-warn-color)}:host .rtui-dynamic-selector-placeholder__description{color:var(--rt-dynamic-selector-placeholder-description-color);font-size:var(--rt-dynamic-selector-placeholder-description-font-size);line-height:var(--rt-dynamic-selector-placeholder-description-line-height)}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: RtIconOutlinedDirective, selector: "mat-icon[rtIconOutlined]", inputs: ["rtIconOutlined"] }, { kind: "directive", type: BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }, { kind: "directive", type: ModDirective, selector: "[rtMod]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiDynamicSelectorPlaceholderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: RtuiDynamicSelectorPlaceholderComponent, isStandalone: true, selector: "rtui-dynamic-selector-placeholder", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, buttonTitle: { classPropertyName: "buttonTitle", publicName: "buttonTitle", isSignal: true, isRequired: false, transformFunction: null }, isButtonShow: { classPropertyName: "isButtonShow", publicName: "isButtonShow", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, isIconOutlined: { classPropertyName: "isIconOutlined", publicName: "isIconOutlined", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { submitAction: "submitAction" }, ngImport: i0, template: "<ng-container rtBlock=\"rtui-dynamic-selector-placeholder\">\n    @if (icon()) {\n        <mat-icon rtElem=\"icon\" [rtMod]=\"{ warn: !isButtonShow() }\" [rtIconOutlined]=\"isIconOutlined()\">{{ icon() }}</mat-icon>\n    }\n\n    @if (description()) {\n        <div rtElem=\"description\">{{ description() }}</div>\n    }\n\n    @if (isButtonShow()) {\n        <button\n            #trigger=\"cdkOverlayOrigin\"\n            cdkOverlayOrigin\n            mat-flat-button\n            type=\"button\"\n            rtBlock=\"c-button\"\n            [disabled]=\"disabled()\"\n            (click)=\"onSubmit(trigger)\">\n            <mat-icon rtIconOutlined>add</mat-icon>\n\n            {{ buttonTitle() }}\n        </button>\n    }\n</ng-container>\n", styles: ["@charset \"UTF-8\";:host{--rt-dynamic-selector-placeholder-host-width: 100%;--rt-dynamic-selector-placeholder-host-height: 100%;--rt-dynamic-selector-placeholder-host-min-height: 10rem;--rt-dynamic-selector-placeholder-host-gap: 1rem;--rt-dynamic-selector-placeholder-icon-size: 4rem;--rt-dynamic-selector-placeholder-icon-color: var(--rt-text-base-soft);--rt-dynamic-selector-placeholder-icon-warn-color: var(--rt-icon-accent-warning);--rt-dynamic-selector-placeholder-description-font-size: 1rem;--rt-dynamic-selector-placeholder-description-line-height: 1.25rem;--rt-dynamic-selector-placeholder-description-color: var(--rt-text-base-secondary);display:flex;width:var(--rt-dynamic-selector-placeholder-host-width);height:var(--rt-dynamic-selector-placeholder-host-height);min-height:var(--rt-dynamic-selector-placeholder-host-min-height);flex-direction:column;align-items:center;justify-content:center;gap:var(--rt-dynamic-selector-placeholder-host-gap)}:host .rtui-dynamic-selector-placeholder__icon{width:var(--rt-dynamic-selector-placeholder-icon-size);height:var(--rt-dynamic-selector-placeholder-icon-size);color:var(--rt-dynamic-selector-placeholder-icon-color);font-size:var(--rt-dynamic-selector-placeholder-icon-size)}:host .rtui-dynamic-selector-placeholder__icon--warn{color:var(--rt-dynamic-selector-placeholder-icon-warn-color)}:host .rtui-dynamic-selector-placeholder__description{color:var(--rt-dynamic-selector-placeholder-description-color);font-size:var(--rt-dynamic-selector-placeholder-description-font-size);line-height:var(--rt-dynamic-selector-placeholder-description-line-height)}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: RtIconOutlinedDirective, selector: "mat-icon[rtIconOutlined]", inputs: ["rtIconOutlined"] }, { kind: "directive", type: BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }, { kind: "directive", type: ModDirective, selector: "[rtMod]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtuiDynamicSelectorPlaceholderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiDynamicSelectorPlaceholderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'rtui-dynamic-selector-placeholder', imports: [MatIcon, MatButton, CdkOverlayOrigin, RtIconOutlinedDirective, BlockDirective, ElemDirective, ModDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container rtBlock=\"rtui-dynamic-selector-placeholder\">\n    @if (icon()) {\n        <mat-icon rtElem=\"icon\" [rtMod]=\"{ warn: !isButtonShow() }\" [rtIconOutlined]=\"isIconOutlined()\">{{ icon() }}</mat-icon>\n    }\n\n    @if (description()) {\n        <div rtElem=\"description\">{{ description() }}</div>\n    }\n\n    @if (isButtonShow()) {\n        <button\n            #trigger=\"cdkOverlayOrigin\"\n            cdkOverlayOrigin\n            mat-flat-button\n            type=\"button\"\n            rtBlock=\"c-button\"\n            [disabled]=\"disabled()\"\n            (click)=\"onSubmit(trigger)\">\n            <mat-icon rtIconOutlined>add</mat-icon>\n\n            {{ buttonTitle() }}\n        </button>\n    }\n</ng-container>\n", styles: ["@charset \"UTF-8\";:host{--rt-dynamic-selector-placeholder-host-width: 100%;--rt-dynamic-selector-placeholder-host-height: 100%;--rt-dynamic-selector-placeholder-host-min-height: 10rem;--rt-dynamic-selector-placeholder-host-gap: 1rem;--rt-dynamic-selector-placeholder-icon-size: 4rem;--rt-dynamic-selector-placeholder-icon-color: var(--rt-text-base-soft);--rt-dynamic-selector-placeholder-icon-warn-color: var(--rt-icon-accent-warning);--rt-dynamic-selector-placeholder-description-font-size: 1rem;--rt-dynamic-selector-placeholder-description-line-height: 1.25rem;--rt-dynamic-selector-placeholder-description-color: var(--rt-text-base-secondary);display:flex;width:var(--rt-dynamic-selector-placeholder-host-width);height:var(--rt-dynamic-selector-placeholder-host-height);min-height:var(--rt-dynamic-selector-placeholder-host-min-height);flex-direction:column;align-items:center;justify-content:center;gap:var(--rt-dynamic-selector-placeholder-host-gap)}:host .rtui-dynamic-selector-placeholder__icon{width:var(--rt-dynamic-selector-placeholder-icon-size);height:var(--rt-dynamic-selector-placeholder-icon-size);color:var(--rt-dynamic-selector-placeholder-icon-color);font-size:var(--rt-dynamic-selector-placeholder-icon-size)}:host .rtui-dynamic-selector-placeholder__icon--warn{color:var(--rt-dynamic-selector-placeholder-icon-warn-color)}:host .rtui-dynamic-selector-placeholder__description{color:var(--rt-dynamic-selector-placeholder-description-color);font-size:var(--rt-dynamic-selector-placeholder-description-font-size);line-height:var(--rt-dynamic-selector-placeholder-description-line-height)}\n"] }]
         }], 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 */
 class RtuiDynamicSelectorItemAdditionalControlDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtuiDynamicSelectorItemAdditionalControlDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.1", type: RtuiDynamicSelectorItemAdditionalControlDirective, isStandalone: true, selector: "[rtuiDynamicSelectorItemAdditionalControlDirective]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiDynamicSelectorItemAdditionalControlDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: RtuiDynamicSelectorItemAdditionalControlDirective, isStandalone: true, selector: "[rtuiDynamicSelectorItemAdditionalControlDirective]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtuiDynamicSelectorItemAdditionalControlDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiDynamicSelectorItemAdditionalControlDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rtuiDynamicSelectorItemAdditionalControlDirective]',
@@ -2840,10 +2952,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
         }] });
 /** Directive for custom item title template */
 class RtuiDynamicSelectorItemTitleDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtuiDynamicSelectorItemTitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.1", type: RtuiDynamicSelectorItemTitleDirective, isStandalone: true, selector: "[rtuiDynamicSelectorItemTitleDirective]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiDynamicSelectorItemTitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: RtuiDynamicSelectorItemTitleDirective, isStandalone: true, selector: "[rtuiDynamicSelectorItemTitleDirective]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtuiDynamicSelectorItemTitleDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiDynamicSelectorItemTitleDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rtuiDynamicSelectorItemTitleDirective]',
@@ -2851,37 +2963,42 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
         }] });
 class RtuiDynamicSelectorSelectedListComponent {
     constructor() {
-        this.editedItemIndex = signal(null, { ...(ngDevMode ? { debugName: "editedItemIndex" } : {}) });
-        this.inputRef = viewChild(MatInput, { ...(ngDevMode ? { debugName: "inputRef" } : {}) });
+        this.editedItemIndex = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "editedItemIndex" }] : /* istanbul ignore next */ []));
+        this.inputRef = viewChild(MatInput, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "inputRef" }] : /* istanbul ignore next */ []));
         /** Indicates if mobile view */
-        this.isMobile = input.required({ ...(ngDevMode ? { debugName: "isMobile" } : {}), transform: booleanAttribute });
+        this.isMobile = input.required({ ...(ngDevMode ? { debugName: "isMobile" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /** A model's field, which should be used for http-requests */
-        this.keyExp = input.required({ ...(ngDevMode ? { debugName: "keyExp" } : {}) });
+        this.keyExp = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "keyExp" }] : /* istanbul ignore next */ []));
         /** A model's field, which should be shown in ui */
-        this.displayExp = input.required({ ...(ngDevMode ? { debugName: "displayExp" } : {}) });
+        this.displayExp = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "displayExp" }] : /* istanbul ignore next */ []));
         /** Array of selected entities */
-        this.selectedEntities = input.required({ ...(ngDevMode ? { debugName: "selectedEntities" } : {}), transform: (value) => transformArrayInput(value) });
+        this.selectedEntities = input.required({ ...(ngDevMode ? { debugName: "selectedEntities" } : /* istanbul ignore next */ {}), transform: (value) => transformArrayInput(value) });
         /** Entity keys that can't be changed */
-        this.readonlyEntitiesKeys = input([], { ...(ngDevMode ? { debugName: "readonlyEntitiesKeys" } : {}), transform: (value) => transformArrayInput(value) });
+        this.readonlyEntitiesKeys = input([], { ...(ngDevMode ? { debugName: "readonlyEntitiesKeys" } : /* istanbul ignore next */ {}), transform: (value) => transformArrayInput(value) });
         /** Indicates is a list of items draggable */
-        this.isListDraggable = input(false, { ...(ngDevMode ? { debugName: "isListDraggable" } : {}), transform: booleanAttribute });
+        this.isListDraggable = input(false, { ...(ngDevMode ? { debugName: "isListDraggable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /** Indicates is break string pipe used */
-        this.useNameBreaking = input(false, { ...(ngDevMode ? { debugName: "useNameBreaking" } : {}), transform: booleanAttribute });
+        this.useNameBreaking = input(false, { ...(ngDevMode ? { debugName: "useNameBreaking" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /** Indicates is title case pipe used */
-        this.useTitleCase = input(false, { ...(ngDevMode ? { debugName: "useTitleCase" } : {}), transform: booleanAttribute });
+        this.useTitleCase = input(false, { ...(ngDevMode ? { debugName: "useTitleCase" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /** Indicates is deleting entity button from the selected list shown */
-        this.isDeleteButtonShown = input(true, { ...(ngDevMode ? { debugName: "isDeleteButtonShown" } : {}), transform: booleanAttribute });
+        this.isDeleteButtonShown = input(true, { ...(ngDevMode ? { debugName: "isDeleteButtonShown" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /** Indicates is items editable */
-        this.isItemsEditable = input(false, { ...(ngDevMode ? { debugName: "isItemsEditable" } : {}), transform: booleanAttribute });
+        this.isItemsEditable = input(false, { ...(ngDevMode ? { debugName: "isItemsEditable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /** Material elements appearance */
-        this.appearance = input('fill', { ...(ngDevMode ? { debugName: "appearance" } : {}) });
+        this.appearance = input('fill', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []));
         this.deleteFromSelectedAction = output();
         this.dropAction = output();
         this.changeValueAction = output();
         /** Additional control for entity */
-        this.additionalControlTpl = contentChild(RtuiDynamicSelectorItemAdditionalControlDirective, { ...(ngDevMode ? { debugName: "additionalControlTpl" } : {}), read: TemplateRef });
+        this.additionalControlTpl = contentChild(RtuiDynamicSelectorItemAdditionalControlDirective, { ...(ngDevMode ? { debugName: "additionalControlTpl" } : /* istanbul ignore next */ {}), read: TemplateRef });
         /** Custom item title template */
-        this.itemTitleTpl = contentChild(RtuiDynamicSelectorItemTitleDirective, { ...(ngDevMode ? { debugName: "itemTitleTpl" } : {}), read: TemplateRef });
+        this.itemTitleTpl = contentChild(RtuiDynamicSelectorItemTitleDirective, { ...(ngDevMode ? { debugName: "itemTitleTpl" } : /* istanbul ignore next */ {}), read: TemplateRef });
     }
     onDelete(value) {
         this.deleteFromSelectedAction.emit(value);
@@ -2898,8 +3015,8 @@ class RtuiDynamicSelectorSelectedListComponent {
     setEditModState(index) {
         this.editedItemIndex.set(index);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtuiDynamicSelectorSelectedListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: RtuiDynamicSelectorSelectedListComponent, isStandalone: true, selector: "rtui-dynamic-selector-selected-list", inputs: { isMobile: { classPropertyName: "isMobile", publicName: "isMobile", isSignal: true, isRequired: true, transformFunction: null }, keyExp: { classPropertyName: "keyExp", publicName: "keyExp", isSignal: true, isRequired: true, transformFunction: null }, displayExp: { classPropertyName: "displayExp", publicName: "displayExp", isSignal: true, isRequired: true, transformFunction: null }, selectedEntities: { classPropertyName: "selectedEntities", publicName: "selectedEntities", isSignal: true, isRequired: true, transformFunction: null }, readonlyEntitiesKeys: { classPropertyName: "readonlyEntitiesKeys", publicName: "readonlyEntitiesKeys", isSignal: true, isRequired: false, transformFunction: null }, isListDraggable: { classPropertyName: "isListDraggable", publicName: "isListDraggable", isSignal: true, isRequired: false, transformFunction: null }, useNameBreaking: { classPropertyName: "useNameBreaking", publicName: "useNameBreaking", isSignal: true, isRequired: false, transformFunction: null }, useTitleCase: { classPropertyName: "useTitleCase", publicName: "useTitleCase", isSignal: true, isRequired: false, transformFunction: null }, isDeleteButtonShown: { classPropertyName: "isDeleteButtonShown", publicName: "isDeleteButtonShown", isSignal: true, isRequired: false, transformFunction: null }, isItemsEditable: { classPropertyName: "isItemsEditable", publicName: "isItemsEditable", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { deleteFromSelectedAction: "deleteFromSelectedAction", dropAction: "dropAction", changeValueAction: "changeValueAction" }, queries: [{ propertyName: "additionalControlTpl", first: true, predicate: RtuiDynamicSelectorItemAdditionalControlDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "itemTitleTpl", first: true, predicate: RtuiDynamicSelectorItemTitleDirective, descendants: true, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "inputRef", first: true, predicate: MatInput, descendants: true, isSignal: true }], ngImport: i0, template: "<ng-container rtBlock=\"rtui-dynamic-selector\">\n    <div rtElem=\"list\" cdkDropList (cdkDropListDropped)=\"onDrop($event)\">\n        @for (entity of selectedEntities(); track entity[displayExp()]; let i = $index) {\n            <div cdkDrag rtElem=\"item\" [rtMod]=\"{ draggable: isListDraggable() }\" [cdkDragDisabled]=\"!isListDraggable()\">\n                @if (isListDraggable()) {\n                    <div rtElem=\"item-mover\">\n                        <div rtElem=\"item-control\">\n                            <button\n                                cdkDragHandle\n                                mat-icon-button\n                                type=\"button\"\n                                rtElem=\"item-control-button\"\n                                rtMod=\"draggable\"\n                                matTooltip=\"Hold button to drag\"\n                                matTooltipPosition=\"right\"\n                                [matTooltipDisabled]=\"isMobile()\">\n                                <mat-icon [rtIconOutlined]=\"true\">open_with</mat-icon>\n                            </button>\n                        </div>\n                    </div>\n                }\n\n                @if (editedItemIndex() === i) {\n                    <mat-form-field rtElem=\"item-input\" subscriptSizing=\"dynamic\" [appearance]=\"appearance()\">\n                        <input matInput type=\"text\" [value]=\"entity[displayExp()]\" (keydown.enter)=\"changeValue(entity[displayExp()])\" />\n                    </mat-form-field>\n                } @else if (itemTitleTpl()) {\n                    <ng-container *ngTemplateOutlet=\"itemTitleTpl() || null; context: { $implicit: entity }\" />\n                } @else {\n                    <span\n                        #titleTpl\n                        rtElem=\"item-title\"\n                        matTooltipPosition=\"above\"\n                        [rtHideTooltipDirective]=\"titleTpl\"\n                        [isTooltipShown]=\"!isMobile()\"\n                        [matTooltip]=\"\n                            useNameBreaking()\n                                ? (entity[displayExp()] | entityToString | breakString)\n                                : (entity[displayExp()] | entityToString)\n                        \"\n                        [matTooltipDisabled]=\"isMobile()\">\n                        @if (useNameBreaking()) {\n                            {{\n                                useTitleCase()\n                                    ? (entity[displayExp()] | entityToString | breakString | titlecase)\n                                    : (entity[displayExp()] | entityToString | breakString)\n                            }}\n                        } @else {\n                            {{ useTitleCase() ? (entity[displayExp()] | entityToString | titlecase) : entity[displayExp()] }}\n                        }\n                    </span>\n                }\n\n                <div rtElem=\"item-controls\">\n                    @if (additionalControlTpl()) {\n                        <ng-container *ngTemplateOutlet=\"additionalControlTpl() || null; context: { $implicit: entity }\" />\n                    }\n\n                    @if (isItemsEditable()) {\n                        @if (editedItemIndex() === i) {\n                            <div rtElem=\"item-control\">\n                                <button\n                                    mat-icon-button\n                                    type=\"button\"\n                                    rtElem=\"item-control-button\"\n                                    matTooltipPosition=\"left\"\n                                    matTooltip=\"Reset\"\n                                    [matTooltipDisabled]=\"isMobile()\"\n                                    (click)=\"setEditModState(null)\">\n                                    <mat-icon [rtIconOutlined]=\"true\">refresh</mat-icon>\n                                </button>\n                            </div>\n                        }\n\n                        <div rtElem=\"item-control\">\n                            <button\n                                mat-icon-button\n                                type=\"button\"\n                                rtElem=\"item-control-button\"\n                                matTooltipPosition=\"right\"\n                                [matTooltip]=\"editedItemIndex() === i ? 'Apply' : 'Edit item'\"\n                                [matTooltipDisabled]=\"isMobile()\"\n                                (click)=\"editedItemIndex() === i ? changeValue(entity[displayExp()]) : setEditModState(i)\">\n                                <mat-icon [rtIconOutlined]=\"true\">{{ editedItemIndex() === i ? 'done' : 'edit' }}</mat-icon>\n                            </button>\n                        </div>\n                    }\n\n                    @if (isDeleteButtonShown()) {\n                        <div rtElem=\"item-control\">\n                            <button\n                                mat-icon-button\n                                type=\"button\"\n                                rtElem=\"item-control-button\"\n                                matTooltip=\"Remove the Item from the List\"\n                                matTooltipPosition=\"left\"\n                                [rtMod]=\"{ active: !readonlyEntitiesKeys().includes(entity[keyExp()]) }\"\n                                [matTooltipDisabled]=\"isMobile()\"\n                                [disabled]=\"readonlyEntitiesKeys().includes(entity[keyExp()])\"\n                                (click)=\"onDelete(entity[keyExp()])\">\n                                <mat-icon [rtIconOutlined]=\"true\">delete</mat-icon>\n                            </button>\n                        </div>\n                    }\n                </div>\n            </div>\n        }\n    </div>\n</ng-container>\n", styles: [":host::ng-deep .mat-mdc-form-field-flex{height:100%}:host::ng-deep .mat-mdc-form-field-infix{display:flex;height:100%;min-height:100%;align-items:center;padding:0}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.rtui-dynamic-selector__list.cdk-drop-list-dragging .rtui-dynamic-selector__item:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.cdk-drag-preview{box-sizing:border-box;border:none;border-radius:var(--rt-dynamic-selector-item-border-radius);background:var(--mat-option-selected-state-layer-color);box-shadow:var(--rt-dynamic-selector-item-drag-preview-box-shadow)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: 
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiDynamicSelectorSelectedListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: RtuiDynamicSelectorSelectedListComponent, isStandalone: true, selector: "rtui-dynamic-selector-selected-list", inputs: { isMobile: { classPropertyName: "isMobile", publicName: "isMobile", isSignal: true, isRequired: true, transformFunction: null }, keyExp: { classPropertyName: "keyExp", publicName: "keyExp", isSignal: true, isRequired: true, transformFunction: null }, displayExp: { classPropertyName: "displayExp", publicName: "displayExp", isSignal: true, isRequired: true, transformFunction: null }, selectedEntities: { classPropertyName: "selectedEntities", publicName: "selectedEntities", isSignal: true, isRequired: true, transformFunction: null }, readonlyEntitiesKeys: { classPropertyName: "readonlyEntitiesKeys", publicName: "readonlyEntitiesKeys", isSignal: true, isRequired: false, transformFunction: null }, isListDraggable: { classPropertyName: "isListDraggable", publicName: "isListDraggable", isSignal: true, isRequired: false, transformFunction: null }, useNameBreaking: { classPropertyName: "useNameBreaking", publicName: "useNameBreaking", isSignal: true, isRequired: false, transformFunction: null }, useTitleCase: { classPropertyName: "useTitleCase", publicName: "useTitleCase", isSignal: true, isRequired: false, transformFunction: null }, isDeleteButtonShown: { classPropertyName: "isDeleteButtonShown", publicName: "isDeleteButtonShown", isSignal: true, isRequired: false, transformFunction: null }, isItemsEditable: { classPropertyName: "isItemsEditable", publicName: "isItemsEditable", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { deleteFromSelectedAction: "deleteFromSelectedAction", dropAction: "dropAction", changeValueAction: "changeValueAction" }, queries: [{ propertyName: "additionalControlTpl", first: true, predicate: RtuiDynamicSelectorItemAdditionalControlDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "itemTitleTpl", first: true, predicate: RtuiDynamicSelectorItemTitleDirective, descendants: true, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "inputRef", first: true, predicate: MatInput, descendants: true, isSignal: true }], ngImport: i0, template: "<ng-container rtBlock=\"rtui-dynamic-selector\">\n    <div rtElem=\"list\" cdkDropList (cdkDropListDropped)=\"onDrop($event)\">\n        @for (entity of selectedEntities(); track entity[displayExp()]; let i = $index) {\n            <div cdkDrag rtElem=\"item\" [rtMod]=\"{ draggable: isListDraggable() }\" [cdkDragDisabled]=\"!isListDraggable()\">\n                @if (isListDraggable()) {\n                    <div rtElem=\"item-mover\">\n                        <div rtElem=\"item-control\">\n                            <button\n                                cdkDragHandle\n                                mat-icon-button\n                                type=\"button\"\n                                rtElem=\"item-control-button\"\n                                rtMod=\"draggable\"\n                                matTooltip=\"Hold button to drag\"\n                                matTooltipPosition=\"right\"\n                                [matTooltipDisabled]=\"isMobile()\">\n                                <mat-icon [rtIconOutlined]=\"true\">open_with</mat-icon>\n                            </button>\n                        </div>\n                    </div>\n                }\n\n                @if (editedItemIndex() === i) {\n                    <mat-form-field rtElem=\"item-input\" subscriptSizing=\"dynamic\" [appearance]=\"appearance()\">\n                        <input matInput type=\"text\" [value]=\"entity[displayExp()]\" (keydown.enter)=\"changeValue(entity[displayExp()])\" />\n                    </mat-form-field>\n                } @else if (itemTitleTpl()) {\n                    <ng-container *ngTemplateOutlet=\"itemTitleTpl() || null; context: { $implicit: entity }\" />\n                } @else {\n                    <span\n                        #titleTpl\n                        rtElem=\"item-title\"\n                        matTooltipPosition=\"above\"\n                        [rtHideTooltipDirective]=\"titleTpl\"\n                        [isTooltipShown]=\"!isMobile()\"\n                        [matTooltip]=\"\n                            useNameBreaking()\n                                ? (entity[displayExp()] | entityToString | breakString)\n                                : (entity[displayExp()] | entityToString)\n                        \"\n                        [matTooltipDisabled]=\"isMobile()\">\n                        @if (useNameBreaking()) {\n                            {{\n                                useTitleCase()\n                                    ? (entity[displayExp()] | entityToString | breakString | titlecase)\n                                    : (entity[displayExp()] | entityToString | breakString)\n                            }}\n                        } @else {\n                            {{ useTitleCase() ? (entity[displayExp()] | entityToString | titlecase) : entity[displayExp()] }}\n                        }\n                    </span>\n                }\n\n                <div rtElem=\"item-controls\">\n                    @if (additionalControlTpl()) {\n                        <ng-container *ngTemplateOutlet=\"additionalControlTpl() || null; context: { $implicit: entity }\" />\n                    }\n\n                    @if (isItemsEditable()) {\n                        @if (editedItemIndex() === i) {\n                            <div rtElem=\"item-control\">\n                                <button\n                                    mat-icon-button\n                                    type=\"button\"\n                                    rtElem=\"item-control-button\"\n                                    matTooltipPosition=\"left\"\n                                    matTooltip=\"Reset\"\n                                    [matTooltipDisabled]=\"isMobile()\"\n                                    (click)=\"setEditModState(null)\">\n                                    <mat-icon [rtIconOutlined]=\"true\">refresh</mat-icon>\n                                </button>\n                            </div>\n                        }\n\n                        <div rtElem=\"item-control\">\n                            <button\n                                mat-icon-button\n                                type=\"button\"\n                                rtElem=\"item-control-button\"\n                                matTooltipPosition=\"right\"\n                                [matTooltip]=\"editedItemIndex() === i ? 'Apply' : 'Edit item'\"\n                                [matTooltipDisabled]=\"isMobile()\"\n                                (click)=\"editedItemIndex() === i ? changeValue(entity[displayExp()]) : setEditModState(i)\">\n                                <mat-icon [rtIconOutlined]=\"true\">{{ editedItemIndex() === i ? 'done' : 'edit' }}</mat-icon>\n                            </button>\n                        </div>\n                    }\n\n                    @if (isDeleteButtonShown()) {\n                        <div rtElem=\"item-control\">\n                            <button\n                                mat-icon-button\n                                type=\"button\"\n                                rtElem=\"item-control-button\"\n                                matTooltip=\"Remove the Item from the List\"\n                                matTooltipPosition=\"left\"\n                                [rtMod]=\"{ active: !readonlyEntitiesKeys().includes(entity[keyExp()]) }\"\n                                [matTooltipDisabled]=\"isMobile()\"\n                                [disabled]=\"readonlyEntitiesKeys().includes(entity[keyExp()])\"\n                                (click)=\"onDelete(entity[keyExp()])\">\n                                <mat-icon [rtIconOutlined]=\"true\">delete</mat-icon>\n                            </button>\n                        </div>\n                    }\n                </div>\n            </div>\n        }\n    </div>\n</ng-container>\n", styles: [":host::ng-deep .mat-mdc-form-field-flex{height:100%}:host::ng-deep .mat-mdc-form-field-infix{display:flex;height:100%;min-height:100%;align-items:center;padding:0}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.rtui-dynamic-selector__list.cdk-drop-list-dragging .rtui-dynamic-selector__item:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.cdk-drag-preview{box-sizing:border-box;border:none;border-radius:var(--rt-dynamic-selector-item-border-radius);background:var(--mat-option-selected-state-layer-color);box-shadow:var(--rt-dynamic-selector-item-drag-preview-box-shadow)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: 
                 // material
                 MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: MatFormField$1, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: 
                 // drag and drop
@@ -2909,7 +3026,7 @@ class RtuiDynamicSelectorSelectedListComponent {
                 // pipes
                 EntityToStringPipe, name: "entityToString" }, { kind: "pipe", type: BreakStringPipe, name: "breakString" }, { kind: "pipe", type: TitleCasePipe, name: "titlecase" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtuiDynamicSelectorSelectedListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiDynamicSelectorSelectedListComponent, decorators: [{
             type: Component,
             args: [{ selector: 'rtui-dynamic-selector-selected-list', imports: [
                         NgTemplateOutlet,
@@ -2944,10 +3061,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
 
 /** Directive for row actions located outside a row menu button */
 class RtuiDynamicSelectorAdditionalControlDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtuiDynamicSelectorAdditionalControlDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.1", type: RtuiDynamicSelectorAdditionalControlDirective, isStandalone: true, selector: "[rtuiDynamicSelectorAdditionalControlDirective]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiDynamicSelectorAdditionalControlDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: RtuiDynamicSelectorAdditionalControlDirective, isStandalone: true, selector: "[rtuiDynamicSelectorAdditionalControlDirective]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtuiDynamicSelectorAdditionalControlDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiDynamicSelectorAdditionalControlDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rtuiDynamicSelectorAdditionalControlDirective]',
@@ -2955,10 +3072,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
         }] });
 /** Directive for custom item title template, projected from rtui-dynamic-selector down to selected-list */
 class RtuiDynamicSelectorItemTitleProjectionDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtuiDynamicSelectorItemTitleProjectionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.1", type: RtuiDynamicSelectorItemTitleProjectionDirective, isStandalone: true, selector: "[rtuiDynamicSelectorItemTitleProjectionDirective]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiDynamicSelectorItemTitleProjectionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: RtuiDynamicSelectorItemTitleProjectionDirective, isStandalone: true, selector: "[rtuiDynamicSelectorItemTitleProjectionDirective]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtuiDynamicSelectorItemTitleProjectionDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiDynamicSelectorItemTitleProjectionDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rtuiDynamicSelectorItemTitleProjectionDirective]',
@@ -2978,45 +3095,53 @@ class RtuiDynamicSelectorComponent extends RtuiDynamicSelectorsDirective {
         /** Target element for overlay selector */
         this.selectedOverlayTrigger = null;
         /** A model's field which should be used for http-requests */
-        this.keyExp = input.required({ ...(ngDevMode ? { debugName: "keyExp" } : {}) });
+        this.keyExp = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "keyExp" }] : /* istanbul ignore next */ []));
         /** A model's field which should be shown in ui */
-        this.displayExp = input.required({ ...(ngDevMode ? { debugName: "displayExp" } : {}) });
+        this.displayExp = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "displayExp" }] : /* istanbul ignore next */ []));
         /** All entities available entities */
-        this.entities = input.required({ ...(ngDevMode ? { debugName: "entities" } : {}), transform: (value) => transformArrayInput(value) });
+        this.entities = input.required({ ...(ngDevMode ? { debugName: "entities" } : /* istanbul ignore next */ {}), transform: (value) => transformArrayInput(value) });
         /** Navigation button title for popup actions */
-        this.navigateButtonTitle = input('', { ...(ngDevMode ? { debugName: "navigateButtonTitle" } : {}) });
+        this.navigateButtonTitle = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "navigateButtonTitle" }] : /* istanbul ignore next */ []));
         /** Navigation button link for popup actions */
-        this.navigateLink = input('', { ...(ngDevMode ? { debugName: "navigateLink" } : {}) });
+        this.navigateLink = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "navigateLink" }] : /* istanbul ignore next */ []));
         /** Entity keys that can't be changed */
-        this.readonlyEntitiesKeys = input([], { ...(ngDevMode ? { debugName: "readonlyEntitiesKeys" } : {}), transform: (value) => transformArrayInput(value) });
+        this.readonlyEntitiesKeys = input([], { ...(ngDevMode ? { debugName: "readonlyEntitiesKeys" } : /* istanbul ignore next */ {}), transform: (value) => transformArrayInput(value) });
         /** Selected entities */
-        this.chosenEntities = model([], { ...(ngDevMode ? { debugName: "chosenEntities" } : {}) });
+        this.chosenEntities = model([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "chosenEntities" }] : /* istanbul ignore next */ []));
         /** Indicates is selection available */
-        this.isSelectionAvailable = input(true, { ...(ngDevMode ? { debugName: "isSelectionAvailable" } : {}), transform: booleanAttribute });
+        this.isSelectionAvailable = input(true, { ...(ngDevMode ? { debugName: "isSelectionAvailable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /** Indicates is placeholder shown */
-        this.isPlaceholderShown = input(false, { ...(ngDevMode ? { debugName: "isPlaceholderShown" } : {}), transform: booleanAttribute });
+        this.isPlaceholderShown = input(false, { ...(ngDevMode ? { debugName: "isPlaceholderShown" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /** Indicates that a list of entities is being loading */
-        this.loading = input(false, { ...(ngDevMode ? { debugName: "loading" } : {}), transform: booleanAttribute });
+        this.loading = input(false, { ...(ngDevMode ? { debugName: "loading" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /** Indicates that a list of entities is being pending */
-        this.pending = input(false, { ...(ngDevMode ? { debugName: "pending" } : {}), transform: booleanAttribute });
+        this.pending = input(false, { ...(ngDevMode ? { debugName: "pending" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /** Indicates that a list of entities is being fetching */
-        this.fetching = input(false, { ...(ngDevMode ? { debugName: "fetching" } : {}), transform: booleanAttribute });
+        this.fetching = input(false, { ...(ngDevMode ? { debugName: "fetching" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /** Indicates lazy loading is used */
-        this.isLazyLoad = input(false, { ...(ngDevMode ? { debugName: "isLazyLoad" } : {}), transform: booleanAttribute });
+        this.isLazyLoad = input(false, { ...(ngDevMode ? { debugName: "isLazyLoad" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /** Indicates local search is used */
-        this.isLocalSearch = input(true, { ...(ngDevMode ? { debugName: "isLocalSearch" } : {}), transform: booleanAttribute });
+        this.isLocalSearch = input(true, { ...(ngDevMode ? { debugName: "isLocalSearch" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /** Indicates is change multi select mode toggle shown */
-        this.isMultiToggleShown = input(false, { ...(ngDevMode ? { debugName: "isMultiToggleShown" } : {}), transform: booleanAttribute });
+        this.isMultiToggleShown = input(false, { ...(ngDevMode ? { debugName: "isMultiToggleShown" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /** Indicates is Select all button shown */
-        this.isSelectAllButtonShown = input(true, { ...(ngDevMode ? { debugName: "isSelectAllButtonShown" } : {}), transform: booleanAttribute });
+        this.isSelectAllButtonShown = input(true, { ...(ngDevMode ? { debugName: "isSelectAllButtonShown" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /** Indicates is Open popup button shown */
-        this.isOpenPopupButtonShown = input(true, { ...(ngDevMode ? { debugName: "isOpenPopupButtonShown" } : {}), transform: booleanAttribute });
+        this.isOpenPopupButtonShown = input(true, { ...(ngDevMode ? { debugName: "isOpenPopupButtonShown" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /** Init search term value */
-        this.searchTerm = input('', { ...(ngDevMode ? { debugName: "searchTerm" } : {}) });
+        this.searchTerm = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "searchTerm" }] : /* istanbul ignore next */ []));
         /** Indicates that an additional control has been changed */
-        this.additionalControlChanged = input(false, { ...(ngDevMode ? { debugName: "additionalControlChanged" } : {}) });
+        this.additionalControlChanged = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "additionalControlChanged" }] : /* istanbul ignore next */ []));
         /** Custom sort function for entities list in popup */
-        this.sortFn = input(null, { ...(ngDevMode ? { debugName: "sortFn" } : {}) });
+        this.sortFn = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "sortFn" }] : /* istanbul ignore next */ []));
         /** Output search action */
         this.searchAction = output();
         /** Output scroll action, needed for lazy loading */
@@ -3028,32 +3153,41 @@ class RtuiDynamicSelectorComponent extends RtuiDynamicSelectorsDirective {
         /** Output selection change action */
         this.selectionChangeAction = output();
         /** List of entities for local processing */
-        this.#entities = signal([], { ...(ngDevMode ? { debugName: "#entities" } : {}) });
-        this.#autocompleteControlValue = signal('', { ...(ngDevMode ? { debugName: "#autocompleteControlValue" } : {}) });
+        this.#entities = signal([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#entities" }] : /* istanbul ignore next */ []));
+        this.#autocompleteControlValue = signal('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#autocompleteControlValue" }] : /* istanbul ignore next */ []));
         /** Initial entities ids */
-        this.#initialEntityIds = signal([], { ...(ngDevMode ? { debugName: "#initialEntityIds" } : {}) });
+        this.#initialEntityIds = signal([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#initialEntityIds" }] : /* istanbul ignore next */ []));
         /** Current selected entities ids */
-        this.#selectedEntityIds = signal([], { ...(ngDevMode ? { debugName: "#selectedEntityIds" } : {}) });
+        this.#selectedEntityIds = signal([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#selectedEntityIds" }] : /* istanbul ignore next */ []));
         /** Current selected entities */
         this.selectedEntities = computed(() => {
             return this.#selectedEntityIds()
                 .map((id) => this.entities().find((el) => id === el[this.keyExp()]))
                 .filter((el) => !!el);
-        }, { ...(ngDevMode ? { debugName: "selectedEntities" } : {}) });
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selectedEntities" }] : /* istanbul ignore next */ []));
         /** Indicates is popup selector visible */
-        this.isSelectionControlShown = signal(false, { ...(ngDevMode ? { debugName: "isSelectionControlShown" } : {}) });
+        this.isSelectionControlShown = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isSelectionControlShown" }] : /* istanbul ignore next */ []));
         /** Indicates is no data */
         this.isNoDataPlaceholderShown = computed(() => {
             return !this.selectedEntities().length && !this.searchTerm() && (!this.entitiesToSelect()?.length || !this.isSelectionAvailable());
-        }, { ...(ngDevMode ? { debugName: "isNoDataPlaceholderShown" } : {}) });
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isNoDataPlaceholderShown" }] : /* istanbul ignore next */ []));
         /** Indicates reset selected button is disabled */
         this.isResetButtonDisabled = computed(() => {
             return areArraysEqual(this.#selectedEntityIds(), this.#initialEntityIds()) && !this.additionalControlChanged();
-        }, { ...(ngDevMode ? { debugName: "isResetButtonDisabled" } : {}) });
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isResetButtonDisabled" }] : /* istanbul ignore next */ []));
         /** Indicates clear selected button is disabled */
         this.isClearButtonDisabled = computed(() => {
             return areArraysEqualUnordered(this.#selectedEntityIds(), this.readonlyEntitiesKeys()) && !this.additionalControlChanged();
-        }, { ...(ngDevMode ? { debugName: "isClearButtonDisabled" } : {}) });
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isClearButtonDisabled" }] : /* istanbul ignore next */ []));
         /** Entities can be chosen, except selected on init */
         this.entitiesToSelect = computed(() => {
             return this.#entities()
@@ -3065,11 +3199,12 @@ class RtuiDynamicSelectorComponent extends RtuiDynamicSelectorsDirective {
                 .sort((a, b) => {
                 return this.sortFn() ? this.sortFn()(a, b) : sortByAlphabet(a, b, this.displayExp());
             });
-        }, { ...(ngDevMode ? { debugName: "entitiesToSelect" } : {}) });
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "entitiesToSelect" }] : /* istanbul ignore next */ []));
         /** Additional control for entity */
-        this.additionalControlTpl = contentChild(RtuiDynamicSelectorAdditionalControlDirective, { ...(ngDevMode ? { debugName: "additionalControlTpl" } : {}), read: TemplateRef });
+        this.additionalControlTpl = contentChild(RtuiDynamicSelectorAdditionalControlDirective, { ...(ngDevMode ? { debugName: "additionalControlTpl" } : /* istanbul ignore next */ {}), read: TemplateRef });
         /** Custom item title template */
-        this.itemTitleTpl = contentChild(RtuiDynamicSelectorItemTitleProjectionDirective, { ...(ngDevMode ? { debugName: "itemTitleTpl" } : {}), read: TemplateRef });
+        this.itemTitleTpl = contentChild(RtuiDynamicSelectorItemTitleProjectionDirective, { ...(ngDevMode ? { debugName: "itemTitleTpl" } : /* istanbul ignore next */ {}), read: TemplateRef });
         /** Selected entities ids for compare */
         this.#selectedEntityIdsForCompare = [];
         /** Indicates is selector init */
@@ -3253,8 +3388,8 @@ class RtuiDynamicSelectorComponent extends RtuiDynamicSelectorsDirective {
             this.#onChanged(selectedEntityIds);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtuiDynamicSelectorComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: RtuiDynamicSelectorComponent, isStandalone: true, selector: "rtui-dynamic-selector", inputs: { keyExp: { classPropertyName: "keyExp", publicName: "keyExp", isSignal: true, isRequired: true, transformFunction: null }, displayExp: { classPropertyName: "displayExp", publicName: "displayExp", isSignal: true, isRequired: true, transformFunction: null }, entities: { classPropertyName: "entities", publicName: "entities", isSignal: true, isRequired: true, transformFunction: null }, navigateButtonTitle: { classPropertyName: "navigateButtonTitle", publicName: "navigateButtonTitle", isSignal: true, isRequired: false, transformFunction: null }, navigateLink: { classPropertyName: "navigateLink", publicName: "navigateLink", isSignal: true, isRequired: false, transformFunction: null }, readonlyEntitiesKeys: { classPropertyName: "readonlyEntitiesKeys", publicName: "readonlyEntitiesKeys", isSignal: true, isRequired: false, transformFunction: null }, chosenEntities: { classPropertyName: "chosenEntities", publicName: "chosenEntities", isSignal: true, isRequired: false, transformFunction: null }, isSelectionAvailable: { classPropertyName: "isSelectionAvailable", publicName: "isSelectionAvailable", isSignal: true, isRequired: false, transformFunction: null }, isPlaceholderShown: { classPropertyName: "isPlaceholderShown", publicName: "isPlaceholderShown", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, pending: { classPropertyName: "pending", publicName: "pending", isSignal: true, isRequired: false, transformFunction: null }, fetching: { classPropertyName: "fetching", publicName: "fetching", isSignal: true, isRequired: false, transformFunction: null }, isLazyLoad: { classPropertyName: "isLazyLoad", publicName: "isLazyLoad", isSignal: true, isRequired: false, transformFunction: null }, isLocalSearch: { classPropertyName: "isLocalSearch", publicName: "isLocalSearch", isSignal: true, isRequired: false, transformFunction: null }, isMultiToggleShown: { classPropertyName: "isMultiToggleShown", publicName: "isMultiToggleShown", isSignal: true, isRequired: false, transformFunction: null }, isSelectAllButtonShown: { classPropertyName: "isSelectAllButtonShown", publicName: "isSelectAllButtonShown", isSignal: true, isRequired: false, transformFunction: null }, isOpenPopupButtonShown: { classPropertyName: "isOpenPopupButtonShown", publicName: "isOpenPopupButtonShown", isSignal: true, isRequired: false, transformFunction: null }, searchTerm: { classPropertyName: "searchTerm", publicName: "searchTerm", isSignal: true, isRequired: false, transformFunction: null }, additionalControlChanged: { classPropertyName: "additionalControlChanged", publicName: "additionalControlChanged", isSignal: true, isRequired: false, transformFunction: null }, sortFn: { classPropertyName: "sortFn", publicName: "sortFn", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { chosenEntities: "chosenEntitiesChange", searchAction: "searchAction", scrollAction: "scrollAction", temporarySelectAction: "temporarySelectAction", resetAction: "resetAction", selectionChangeAction: "selectionChangeAction" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiDynamicSelectorComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: RtuiDynamicSelectorComponent, isStandalone: true, selector: "rtui-dynamic-selector", inputs: { keyExp: { classPropertyName: "keyExp", publicName: "keyExp", isSignal: true, isRequired: true, transformFunction: null }, displayExp: { classPropertyName: "displayExp", publicName: "displayExp", isSignal: true, isRequired: true, transformFunction: null }, entities: { classPropertyName: "entities", publicName: "entities", isSignal: true, isRequired: true, transformFunction: null }, navigateButtonTitle: { classPropertyName: "navigateButtonTitle", publicName: "navigateButtonTitle", isSignal: true, isRequired: false, transformFunction: null }, navigateLink: { classPropertyName: "navigateLink", publicName: "navigateLink", isSignal: true, isRequired: false, transformFunction: null }, readonlyEntitiesKeys: { classPropertyName: "readonlyEntitiesKeys", publicName: "readonlyEntitiesKeys", isSignal: true, isRequired: false, transformFunction: null }, chosenEntities: { classPropertyName: "chosenEntities", publicName: "chosenEntities", isSignal: true, isRequired: false, transformFunction: null }, isSelectionAvailable: { classPropertyName: "isSelectionAvailable", publicName: "isSelectionAvailable", isSignal: true, isRequired: false, transformFunction: null }, isPlaceholderShown: { classPropertyName: "isPlaceholderShown", publicName: "isPlaceholderShown", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, pending: { classPropertyName: "pending", publicName: "pending", isSignal: true, isRequired: false, transformFunction: null }, fetching: { classPropertyName: "fetching", publicName: "fetching", isSignal: true, isRequired: false, transformFunction: null }, isLazyLoad: { classPropertyName: "isLazyLoad", publicName: "isLazyLoad", isSignal: true, isRequired: false, transformFunction: null }, isLocalSearch: { classPropertyName: "isLocalSearch", publicName: "isLocalSearch", isSignal: true, isRequired: false, transformFunction: null }, isMultiToggleShown: { classPropertyName: "isMultiToggleShown", publicName: "isMultiToggleShown", isSignal: true, isRequired: false, transformFunction: null }, isSelectAllButtonShown: { classPropertyName: "isSelectAllButtonShown", publicName: "isSelectAllButtonShown", isSignal: true, isRequired: false, transformFunction: null }, isOpenPopupButtonShown: { classPropertyName: "isOpenPopupButtonShown", publicName: "isOpenPopupButtonShown", isSignal: true, isRequired: false, transformFunction: null }, searchTerm: { classPropertyName: "searchTerm", publicName: "searchTerm", isSignal: true, isRequired: false, transformFunction: null }, additionalControlChanged: { classPropertyName: "additionalControlChanged", publicName: "additionalControlChanged", isSignal: true, isRequired: false, transformFunction: null }, sortFn: { classPropertyName: "sortFn", publicName: "sortFn", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { chosenEntities: "chosenEntitiesChange", searchAction: "searchAction", scrollAction: "scrollAction", temporarySelectAction: "temporarySelectAction", resetAction: "resetAction", selectionChangeAction: "selectionChangeAction" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => RtuiDynamicSelectorComponent),
@@ -3271,7 +3406,7 @@ class RtuiDynamicSelectorComponent extends RtuiDynamicSelectorsDirective {
                 // components
                 RtuiMultiSelectorPopupComponent, selector: "rtui-multi-selector-popup", inputs: ["isMobile", "entitiesToSelect", "appearance", "keyExp", "displayExp", "searchTerm", "navigateButtonTitle", "navigateLink", "isSingleSelection", "isMultiToggleShown", "isSelectAllButtonShown", "loading", "fetching", "useNameBreaking", "isLazyLoad", "isLocalSearch", "pinnedKeys"], outputs: ["submitAction", "closeAction", "searchAction", "scrollAction", "temporarySelectAction"] }, { kind: "component", type: RtuiDynamicSelectorPlaceholderComponent, selector: "rtui-dynamic-selector-placeholder", inputs: ["icon", "description", "buttonTitle", "isButtonShow", "disabled", "isIconOutlined"], outputs: ["submitAction"] }, { kind: "component", type: RtuiDynamicSelectorListActionsComponent, selector: "rtui-dynamic-selector-list-actions", inputs: ["isMobile", "isResetButtonDisabled", "isClearButtonDisabled", "disabled"], outputs: ["resetAction", "clearAction"] }, { kind: "component", type: RtuiDynamicSelectorSelectedListComponent, selector: "rtui-dynamic-selector-selected-list", inputs: ["isMobile", "keyExp", "displayExp", "selectedEntities", "readonlyEntitiesKeys", "isListDraggable", "useNameBreaking", "useTitleCase", "isDeleteButtonShown", "isItemsEditable", "appearance"], outputs: ["deleteFromSelectedAction", "dropAction", "changeValueAction"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtuiDynamicSelectorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiDynamicSelectorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'rtui-dynamic-selector', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         ReactiveFormsModule,
@@ -3309,10 +3444,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
 
 /** Directive for row actions located outside a row menu button */
 class RtuiDynamicInputAdditionalControlDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtuiDynamicInputAdditionalControlDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.1", type: RtuiDynamicInputAdditionalControlDirective, isStandalone: true, selector: "[rtuiDynamicInputAdditionalControlDirective]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiDynamicInputAdditionalControlDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: RtuiDynamicInputAdditionalControlDirective, isStandalone: true, selector: "[rtuiDynamicInputAdditionalControlDirective]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtuiDynamicInputAdditionalControlDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiDynamicInputAdditionalControlDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rtuiDynamicInputAdditionalControlDirective]',
@@ -3328,25 +3463,30 @@ class RtuiDynamicInputComponent extends RtuiDynamicSelectorsDirective {
             controlForUi: this.#fb.control(null), // used only for UI
         });
         /** Indicates is placeholder shown */
-        this.isPlaceholderShown = model(true, { ...(ngDevMode ? { debugName: "isPlaceholderShown" } : {}) });
+        this.isPlaceholderShown = model(true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isPlaceholderShown" }] : /* istanbul ignore next */ []));
         /** Indicates is inputs-editable */
-        this.isInputsEditable = input(false, { ...(ngDevMode ? { debugName: "isInputsEditable" } : {}), transform: booleanAttribute });
+        this.isInputsEditable = input(false, { ...(ngDevMode ? { debugName: "isInputsEditable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /** Input label */
-        this.inputLabel = input('', { ...(ngDevMode ? { debugName: "inputLabel" } : {}), transform: transformStringInput });
+        this.inputLabel = input('', { ...(ngDevMode ? { debugName: "inputLabel" } : /* istanbul ignore next */ {}), transform: transformStringInput });
         /** Input placeholder */
-        this.inputPlaceholder = input('', { ...(ngDevMode ? { debugName: "inputPlaceholder" } : {}), transform: transformStringInput });
+        this.inputPlaceholder = input('', { ...(ngDevMode ? { debugName: "inputPlaceholder" } : /* istanbul ignore next */ {}), transform: transformStringInput });
         /** Entity keys that can't be changed */
-        this.readonlyEntitiesKeys = input([], { ...(ngDevMode ? { debugName: "readonlyEntitiesKeys" } : {}), transform: (value) => transformArrayInput(value) });
+        this.readonlyEntitiesKeys = input([], { ...(ngDevMode ? { debugName: "readonlyEntitiesKeys" } : /* istanbul ignore next */ {}), transform: (value) => transformArrayInput(value) });
         /** Array of selected entities */
-        this.selectedEntities = signal([], { ...(ngDevMode ? { debugName: "selectedEntities" } : {}) });
+        this.selectedEntities = signal([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selectedEntities" }] : /* istanbul ignore next */ []));
         /** Indicates is input control shown */
-        this.isInputControlShown = signal(false, { ...(ngDevMode ? { debugName: "isInputControlShown" } : {}) });
+        this.isInputControlShown = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isInputControlShown" }] : /* istanbul ignore next */ []));
         /** Indicates the reset changes button is disabled */
-        this.isResetButtonDisabled = signal(false, { ...(ngDevMode ? { debugName: "isResetButtonDisabled" } : {}) });
+        this.isResetButtonDisabled = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isResetButtonDisabled" }] : /* istanbul ignore next */ []));
         /** Initial entities */
-        this.#initialEntities = signal([], { ...(ngDevMode ? { debugName: "#initialEntities" } : {}) });
+        this.#initialEntities = signal([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#initialEntities" }] : /* istanbul ignore next */ []));
         /** Additional control for entity */
-        this.additionalControlTpl = contentChild(RtuiDynamicInputAdditionalControlDirective, { ...(ngDevMode ? { debugName: "additionalControlTpl" } : {}), read: TemplateRef });
+        this.additionalControlTpl = contentChild(RtuiDynamicInputAdditionalControlDirective, { ...(ngDevMode ? { debugName: "additionalControlTpl" } : /* istanbul ignore next */ {}), read: TemplateRef });
         this.#onTouched = noop;
         this.#onChanged = noop;
     }
@@ -3458,8 +3598,8 @@ class RtuiDynamicInputComponent extends RtuiDynamicSelectorsDirective {
     #setResetListButtonState(value) {
         this.isResetButtonDisabled.set(areArraysEqual(this.#initialEntities(), value));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtuiDynamicInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: RtuiDynamicInputComponent, isStandalone: true, selector: "rtui-dynamic-input", inputs: { isPlaceholderShown: { classPropertyName: "isPlaceholderShown", publicName: "isPlaceholderShown", isSignal: true, isRequired: false, transformFunction: null }, isInputsEditable: { classPropertyName: "isInputsEditable", publicName: "isInputsEditable", isSignal: true, isRequired: false, transformFunction: null }, inputLabel: { classPropertyName: "inputLabel", publicName: "inputLabel", isSignal: true, isRequired: false, transformFunction: null }, inputPlaceholder: { classPropertyName: "inputPlaceholder", publicName: "inputPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, readonlyEntitiesKeys: { classPropertyName: "readonlyEntitiesKeys", publicName: "readonlyEntitiesKeys", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isPlaceholderShown: "isPlaceholderShownChange" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiDynamicInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: RtuiDynamicInputComponent, isStandalone: true, selector: "rtui-dynamic-input", inputs: { isPlaceholderShown: { classPropertyName: "isPlaceholderShown", publicName: "isPlaceholderShown", isSignal: true, isRequired: false, transformFunction: null }, isInputsEditable: { classPropertyName: "isInputsEditable", publicName: "isInputsEditable", isSignal: true, isRequired: false, transformFunction: null }, inputLabel: { classPropertyName: "inputLabel", publicName: "inputLabel", isSignal: true, isRequired: false, transformFunction: null }, inputPlaceholder: { classPropertyName: "inputPlaceholder", publicName: "inputPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, readonlyEntitiesKeys: { classPropertyName: "readonlyEntitiesKeys", publicName: "readonlyEntitiesKeys", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isPlaceholderShown: "isPlaceholderShownChange" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => RtuiDynamicInputComponent),
@@ -3470,7 +3610,7 @@ class RtuiDynamicInputComponent extends RtuiDynamicSelectorsDirective {
                 useExisting: RtuiDynamicInputComponent,
                 multi: true,
             },
-        ], queries: [{ propertyName: "additionalControlTpl", first: true, predicate: RtuiDynamicInputAdditionalControlDirective, descendants: true, read: TemplateRef, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<form [formGroup]=\"form\">\n    <ng-container rtBlock=\"rtui-dynamic-selector\">\n        @if (isPlaceholderShown()) {\n            <rtui-dynamic-selector-placeholder\n                [icon]=\"placeholderIcon()\"\n                [description]=\"placeholderDescription()\"\n                [buttonTitle]=\"buttonTitle()\"\n                [isIconOutlined]=\"isPlaceholderIconOutlined()\"\n                (submitAction)=\"hidePlaceholder()\" />\n        } @else {\n            <rtui-dynamic-selector-selected-list\n                keyExp=\"id\"\n                displayExp=\"id\"\n                [appearance]=\"appearance()\"\n                [isMobile]=\"isMobile()\"\n                [selectedEntities]=\"selectedEntities()\"\n                [readonlyEntitiesKeys]=\"readonlyEntitiesKeys()\"\n                [isListDraggable]=\"isListDraggable()\"\n                [useNameBreaking]=\"useNameBreaking()\"\n                [isDeleteButtonShown]=\"isDeleteButtonShown()\"\n                [isItemsEditable]=\"isInputsEditable()\"\n                (changeValueAction)=\"changeEntity($event)\"\n                (dropAction)=\"onDrop($event)\"\n                (deleteFromSelectedAction)=\"toggleEntity($event)\">\n                @if (additionalControlTpl()) {\n                    <ng-container *rtuiDynamicSelectorItemAdditionalControlDirective=\"let entity\">\n                        <ng-template *ngTemplateOutlet=\"additionalControlTpl() || null; context: { $implicit: entity }\" />\n                    </ng-container>\n                }\n            </rtui-dynamic-selector-selected-list>\n\n            @if (isInputControlShown()) {\n                <mat-form-field [appearance]=\"appearance()\" [style.width.%]=\"100\">\n                    <mat-label>{{ inputLabel() }}</mat-label>\n\n                    <input\n                        matInput\n                        type=\"text\"\n                        formControlName=\"controlForUi\"\n                        [placeholder]=\"inputPlaceholder()\"\n                        (keydown.enter)=\"onAddEntity()\"\n                        (focusout)=\"onAddEntity()\" />\n                </mat-form-field>\n            }\n\n            <div rtElem=\"actions\">\n                @if (!isInputControlShown() && !isSingleSelection()) {\n                    <button type=\"button\" class=\"c-button c-button--txt-base--size-sm\" (click)=\"showSelectionControl()\">\n                        {{ buttonTitle() }}\n                    </button>\n                }\n\n                <rtui-dynamic-selector-list-actions\n                    [isMobile]=\"isMobile()\"\n                    [isResetButtonDisabled]=\"isResetButtonDisabled()\"\n                    [isClearButtonDisabled]=\"!form.controls.control.value?.length\"\n                    (resetAction)=\"resetList()\"\n                    (clearAction)=\"clearList()\" />\n            </div>\n        }\n    </ng-container>\n</form>\n", styles: [":host{width:100%}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[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.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: 
+        ], queries: [{ propertyName: "additionalControlTpl", first: true, predicate: RtuiDynamicInputAdditionalControlDirective, descendants: true, read: TemplateRef, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<form [formGroup]=\"form\">\n    <ng-container rtBlock=\"rtui-dynamic-selector\">\n        @if (isPlaceholderShown()) {\n            <rtui-dynamic-selector-placeholder\n                [icon]=\"placeholderIcon()\"\n                [description]=\"placeholderDescription()\"\n                [buttonTitle]=\"buttonTitle()\"\n                [isIconOutlined]=\"isPlaceholderIconOutlined()\"\n                (submitAction)=\"hidePlaceholder()\" />\n        } @else {\n            <rtui-dynamic-selector-selected-list\n                keyExp=\"id\"\n                displayExp=\"id\"\n                [appearance]=\"appearance()\"\n                [isMobile]=\"isMobile()\"\n                [selectedEntities]=\"selectedEntities()\"\n                [readonlyEntitiesKeys]=\"readonlyEntitiesKeys()\"\n                [isListDraggable]=\"isListDraggable()\"\n                [useNameBreaking]=\"useNameBreaking()\"\n                [isDeleteButtonShown]=\"isDeleteButtonShown()\"\n                [isItemsEditable]=\"isInputsEditable()\"\n                (changeValueAction)=\"changeEntity($event)\"\n                (dropAction)=\"onDrop($event)\"\n                (deleteFromSelectedAction)=\"toggleEntity($event)\">\n                @if (additionalControlTpl()) {\n                    <ng-container *rtuiDynamicSelectorItemAdditionalControlDirective=\"let entity\">\n                        <ng-template *ngTemplateOutlet=\"additionalControlTpl() || null; context: { $implicit: entity }\" />\n                    </ng-container>\n                }\n            </rtui-dynamic-selector-selected-list>\n\n            @if (isInputControlShown()) {\n                <mat-form-field [appearance]=\"appearance()\" [style.width.%]=\"100\">\n                    <mat-label>{{ inputLabel() }}</mat-label>\n\n                    <input\n                        matInput\n                        type=\"text\"\n                        formControlName=\"controlForUi\"\n                        [placeholder]=\"inputPlaceholder()\"\n                        (keydown.enter)=\"onAddEntity()\"\n                        (focusout)=\"onAddEntity()\" />\n                </mat-form-field>\n            }\n\n            <div rtElem=\"actions\">\n                @if (!isInputControlShown() && !isSingleSelection()) {\n                    <button type=\"button\" class=\"c-button c-button--txt-base--size-sm\" (click)=\"showSelectionControl()\">\n                        {{ buttonTitle() }}\n                    </button>\n                }\n\n                <rtui-dynamic-selector-list-actions\n                    [isMobile]=\"isMobile()\"\n                    [isResetButtonDisabled]=\"isResetButtonDisabled()\"\n                    [isClearButtonDisabled]=\"!form.controls.control.value?.length\"\n                    (resetAction)=\"resetList()\"\n                    (clearAction)=\"clearList()\" />\n            </div>\n        }\n    </ng-container>\n</form>\n", styles: [":host{width:100%}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: 
                 // material
                 MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: 
                 // directives
@@ -3478,7 +3618,7 @@ class RtuiDynamicInputComponent extends RtuiDynamicSelectorsDirective {
                 // components
                 RtuiDynamicSelectorPlaceholderComponent, selector: "rtui-dynamic-selector-placeholder", inputs: ["icon", "description", "buttonTitle", "isButtonShow", "disabled", "isIconOutlined"], outputs: ["submitAction"] }, { kind: "component", type: RtuiDynamicSelectorListActionsComponent, selector: "rtui-dynamic-selector-list-actions", inputs: ["isMobile", "isResetButtonDisabled", "isClearButtonDisabled", "disabled"], outputs: ["resetAction", "clearAction"] }, { kind: "component", type: RtuiDynamicSelectorSelectedListComponent, selector: "rtui-dynamic-selector-selected-list", inputs: ["isMobile", "keyExp", "displayExp", "selectedEntities", "readonlyEntitiesKeys", "isListDraggable", "useNameBreaking", "useTitleCase", "isDeleteButtonShown", "isItemsEditable", "appearance"], outputs: ["deleteFromSelectedAction", "dropAction", "changeValueAction"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtuiDynamicInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiDynamicInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'rtui-dynamic-input', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         NgTemplateOutlet,
@@ -3522,10 +3662,12 @@ class RtTableConfigAsideComponent {
             columns: this.#fb.nonNullable.control([]),
         });
         this.asideRef = inject(ASIDE_REF);
-        this.selectedColumns = signal(this.asideRef.data.columns, { ...(ngDevMode ? { debugName: "selectedColumns" } : {}) });
+        this.selectedColumns = signal(this.asideRef.data.columns, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selectedColumns" }] : /* istanbul ignore next */ []));
         this.isMobile = computed(() => {
             return !!this.#breakpointService.isMobile();
-        }, { ...(ngDevMode ? { debugName: "isMobile" } : {}) });
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isMobile" }] : /* istanbul ignore next */ []));
         this.isVisibilityChanged = computed(() => {
             const initValues = this.asideRef.data.columns
                 .filter((el) => el.hidden)
@@ -3534,12 +3676,14 @@ class RtTableConfigAsideComponent {
                 .filter((el) => el.hidden)
                 .map((el) => el.propName);
             return !areArraysEqual(initValues.sort(), currentValues.sort());
-        }, { ...(ngDevMode ? { debugName: "isVisibilityChanged" } : {}) });
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isVisibilityChanged" }] : /* istanbul ignore next */ []));
         this.isOrderChanged = computed(() => {
             const initValues = this.asideRef.data.columns.map((el) => el.propName);
             const currentValues = this.selectedColumns().map((el) => el.propName);
             return !areArraysEqual(initValues, currentValues);
-        }, { ...(ngDevMode ? { debugName: "isOrderChanged" } : {}) });
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isOrderChanged" }] : /* istanbul ignore next */ []));
     }
     #breakpointService;
     #destroyRef;
@@ -3578,14 +3722,14 @@ class RtTableConfigAsideComponent {
             });
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtTableConfigAsideComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.1", type: RtTableConfigAsideComponent, isStandalone: true, selector: "rtui-test-aside", providers: [BreakpointService], ngImport: i0, template: "<rtui-aside-container\n    [isMobile]=\"isMobile()\"\n    [pending]=\"false\"\n    [isSubmitButtonDisabled]=\"!isVisibilityChanged() && !isOrderChanged() && !form.dirty\"\n    (submitAction)=\"save()\"\n    (cancelAction)=\"cancel()\">\n    <ng-container *rtuiAsideHeader rtBlock=\"c-aside-title\">\n        <div rtElem=\"txt\">Edit table configuration</div>\n        <div rtElem=\"addition\">Change columns visibility and order, show(hide) scrollbar</div>\n    </ng-container>\n    <form rtBlock=\"c-form\" [formGroup]=\"form\">\n        <div rtElem=\"item\">\n            <div rtElem=\"controls\">\n                <!-- Vertical scrollbar -->\n                <div rtElem=\"control-item\">\n                    <rtui-toggle formControlName=\"isVerticalScrollbarShown\" label=\"Vertical scrollbar shown\" />\n                </div>\n            </div>\n\n            <div rtElem=\"controls\">\n                <!-- Horizontal scrollbar -->\n                <div rtElem=\"control-item\">\n                    <rtui-toggle formControlName=\"isHorizontalScrollbarShown\" label=\"Horizontal scrollbar shown\" />\n                </div>\n            </div>\n\n            <div rtElem=\"controls\">\n                <!-- Columns config -->\n                <div rtElem=\"control-item\">\n                    <rtui-dynamic-selector\n                        keyExp=\"propName\"\n                        displayExp=\"displayName\"\n                        formControlName=\"columns\"\n                        [entities]=\"selectedColumns()\"\n                        [isMobile]=\"isMobile()\"\n                        [useNameBreaking]=\"true\"\n                        [useTitleCase]=\"true\"\n                        [isSelectionAvailable]=\"false\"\n                        [isDeleteButtonShown]=\"false\"\n                        [isListDraggable]=\"true\">\n                        <ng-container *rtuiDynamicSelectorAdditionalControlDirective=\"let entity\" rtBlock=\"rtui-dynamic-selector\">\n                            <div rtElem=\"item-control\">\n                                <button\n                                    mat-icon-button\n                                    type=\"button\"\n                                    aria-label=\"Icon-button for visibility indication\"\n                                    rtElem=\"item-control-button\"\n                                    matTooltip=\"{{ entity.hidden ? 'Hidden, click to show' : 'Shown, click to hide' }}\"\n                                    matTooltipPosition=\"left\"\n                                    [matTooltipDisabled]=\"isMobile()\"\n                                    (click)=\"visibilityChange(entity)\">\n                                    <mat-icon [rtIconOutlined]=\"true\">\n                                        {{ entity.hidden ? 'visibility_off' : 'visibility' }}\n                                    </mat-icon>\n                                </button>\n                            </div>\n                        </ng-container>\n                    </rtui-dynamic-selector>\n                </div>\n            </div>\n        </div>\n    </form>\n</rtui-aside-container>\n", styles: [":host{width:100%;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: 
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtTableConfigAsideComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.5", type: RtTableConfigAsideComponent, isStandalone: true, selector: "rtui-test-aside", providers: [BreakpointService], ngImport: i0, template: "<rtui-aside-container\n    [isMobile]=\"isMobile()\"\n    [pending]=\"false\"\n    [isSubmitButtonDisabled]=\"!isVisibilityChanged() && !isOrderChanged() && !form.dirty\"\n    (submitAction)=\"save()\"\n    (cancelAction)=\"cancel()\">\n    <ng-container *rtuiAsideHeader rtBlock=\"c-aside-title\">\n        <div rtElem=\"txt\">Edit table configuration</div>\n        <div rtElem=\"addition\">Change columns visibility and order, show(hide) scrollbar</div>\n    </ng-container>\n    <form rtBlock=\"c-form\" [formGroup]=\"form\">\n        <div rtElem=\"item\">\n            <div rtElem=\"controls\">\n                <!-- Vertical scrollbar -->\n                <div rtElem=\"control-item\">\n                    <rtui-toggle formControlName=\"isVerticalScrollbarShown\" label=\"Vertical scrollbar shown\" />\n                </div>\n            </div>\n\n            <div rtElem=\"controls\">\n                <!-- Horizontal scrollbar -->\n                <div rtElem=\"control-item\">\n                    <rtui-toggle formControlName=\"isHorizontalScrollbarShown\" label=\"Horizontal scrollbar shown\" />\n                </div>\n            </div>\n\n            <div rtElem=\"controls\">\n                <!-- Columns config -->\n                <div rtElem=\"control-item\">\n                    <rtui-dynamic-selector\n                        keyExp=\"propName\"\n                        displayExp=\"displayName\"\n                        formControlName=\"columns\"\n                        [entities]=\"selectedColumns()\"\n                        [isMobile]=\"isMobile()\"\n                        [useNameBreaking]=\"true\"\n                        [useTitleCase]=\"true\"\n                        [isSelectionAvailable]=\"false\"\n                        [isDeleteButtonShown]=\"false\"\n                        [isListDraggable]=\"true\">\n                        <ng-container *rtuiDynamicSelectorAdditionalControlDirective=\"let entity\" rtBlock=\"rtui-dynamic-selector\">\n                            <div rtElem=\"item-control\">\n                                <button\n                                    mat-icon-button\n                                    type=\"button\"\n                                    aria-label=\"Icon-button for visibility indication\"\n                                    rtElem=\"item-control-button\"\n                                    matTooltip=\"{{ entity.hidden ? 'Hidden, click to show' : 'Shown, click to hide' }}\"\n                                    matTooltipPosition=\"left\"\n                                    [matTooltipDisabled]=\"isMobile()\"\n                                    (click)=\"visibilityChange(entity)\">\n                                    <mat-icon [rtIconOutlined]=\"true\">\n                                        {{ entity.hidden ? 'visibility_off' : 'visibility' }}\n                                    </mat-icon>\n                                </button>\n                            </div>\n                        </ng-container>\n                    </rtui-dynamic-selector>\n                </div>\n            </div>\n        </div>\n    </form>\n</rtui-aside-container>\n", styles: [":host{width:100%;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: 
                 // directives
                 BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }, { kind: "directive", type: RtuiAsideContainerHeaderDirective, selector: "[rtuiAsideHeader]" }, { kind: "directive", type: RtuiDynamicSelectorAdditionalControlDirective, selector: "[rtuiDynamicSelectorAdditionalControlDirective]" }, { kind: "directive", type: RtIconOutlinedDirective, selector: "mat-icon[rtIconOutlined]", inputs: ["rtIconOutlined"] }, { kind: "component", type: 
                 // standalone components
                 RtuiAsideContainerComponent, selector: "rtui-aside-container", inputs: ["title", "isMobile", "isSubmitButtonDisabled", "isFooterShown", "pending", "isRequestErrorShown", "headerActionsButtons", "requestError", "submitButtonTitle", "cancelButtonTitle", "submitButtonTooltip"], outputs: ["submitAction", "cancelAction", "headerAction"] }, { kind: "component", type: RtuiDynamicSelectorComponent, selector: "rtui-dynamic-selector", inputs: ["keyExp", "displayExp", "entities", "navigateButtonTitle", "navigateLink", "readonlyEntitiesKeys", "chosenEntities", "isSelectionAvailable", "isPlaceholderShown", "loading", "pending", "fetching", "isLazyLoad", "isLocalSearch", "isMultiToggleShown", "isSelectAllButtonShown", "isOpenPopupButtonShown", "searchTerm", "additionalControlChanged", "sortFn"], outputs: ["chosenEntitiesChange", "searchAction", "scrollAction", "temporarySelectAction", "resetAction", "selectionChangeAction"] }, { kind: "component", type: RtuiToggleComponent, selector: "rtui-toggle", inputs: ["label", "tooltip", "size", "tooltipPosition", "isDisabled", "tooltipDisabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtTableConfigAsideComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtTableConfigAsideComponent, decorators: [{
             type: Component,
             args: [{ selector: 'rtui-test-aside', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         ReactiveFormsModule,
@@ -3606,20 +3750,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
         }] });
 
 class RtuiTableToolbarSelectorsDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtuiTableToolbarSelectorsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.1", type: RtuiTableToolbarSelectorsDirective, isStandalone: true, selector: "[rtuiTableToolbarSelectorsDirective]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiTableToolbarSelectorsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: RtuiTableToolbarSelectorsDirective, isStandalone: true, selector: "[rtuiTableToolbarSelectorsDirective]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtuiTableToolbarSelectorsDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiTableToolbarSelectorsDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rtuiTableToolbarSelectorsDirective]',
                 }]
         }] });
 class RtuiTableToolbarActionsDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtuiTableToolbarActionsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.1", type: RtuiTableToolbarActionsDirective, isStandalone: true, selector: "[rtuiTableToolbarActionsDirective]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiTableToolbarActionsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: RtuiTableToolbarActionsDirective, isStandalone: true, selector: "[rtuiTableToolbarActionsDirective]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtuiTableToolbarActionsDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiTableToolbarActionsDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rtuiTableToolbarActionsDirective]',
@@ -3637,37 +3781,41 @@ class RtuiTableContainerComponent {
         this.#asideService = inject(RtAsideService);
         this.#tableConfigService = inject(RtTableConfigService);
         this.#style = this.#documentRef?.documentElement?.style;
-        this.appearance = input.required({ ...(ngDevMode ? { debugName: "appearance" } : {}) });
+        this.appearance = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []));
         /** Table config storage key */
-        this.tableConfigStorageKey = input.required({ ...(ngDevMode ? { debugName: "tableConfigStorageKey" } : {}), transform: transformStringInput });
+        this.tableConfigStorageKey = input.required({ ...(ngDevMode ? { debugName: "tableConfigStorageKey" } : /* istanbul ignore next */ {}), transform: transformStringInput });
         /** Current page model from store */
-        this.pageModel = input.required({ ...(ngDevMode ? { debugName: "pageModel" } : {}) });
+        this.pageModel = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "pageModel" }] : /* istanbul ignore next */ []));
         /** Indicates is mobile view */
-        this.isMobile = input.required({ ...(ngDevMode ? { debugName: "isMobile" } : {}), transform: booleanAttribute });
+        this.isMobile = input.required({ ...(ngDevMode ? { debugName: "isMobile" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /** Indicates is loading in progress */
-        this.loading = input.required({ ...(ngDevMode ? { debugName: "loading" } : {}), transform: booleanAttribute });
+        this.loading = input.required({ ...(ngDevMode ? { debugName: "loading" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /** Indicates is fetching in progress */
-        this.fetching = input.required({ ...(ngDevMode ? { debugName: "fetching" } : {}), transform: booleanAttribute });
+        this.fetching = input.required({ ...(ngDevMode ? { debugName: "fetching" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /** Indicates is placeholder shown */
-        this.isPlaceholderShown = input.required({ ...(ngDevMode ? { debugName: "isPlaceholderShown" } : {}), transform: booleanAttribute });
+        this.isPlaceholderShown = input.required({ ...(ngDevMode ? { debugName: "isPlaceholderShown" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /** Indicates is pagination shown */
-        this.isPaginationShown = input(true, { ...(ngDevMode ? { debugName: "isPaginationShown" } : {}), transform: booleanAttribute });
+        this.isPaginationShown = input(true, { ...(ngDevMode ? { debugName: "isPaginationShown" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /** Indicates is the refresh button shown */
-        this.isRefreshButtonShown = input(true, { ...(ngDevMode ? { debugName: "isRefreshButtonShown" } : {}), transform: booleanAttribute });
+        this.isRefreshButtonShown = input(true, { ...(ngDevMode ? { debugName: "isRefreshButtonShown" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /** Indicates is a table config button shown */
-        this.isTableConfigButtonShown = input(true, { ...(ngDevMode ? { debugName: "isTableConfigButtonShown" } : {}), transform: booleanAttribute });
+        this.isTableConfigButtonShown = input(true, { ...(ngDevMode ? { debugName: "isTableConfigButtonShown" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /** Indicates is toolbar buttons outlined */
-        this.isToolbarActionsIconsOutlined = input(true, { ...(ngDevMode ? { debugName: "isToolbarActionsIconsOutlined" } : {}), transform: booleanAttribute });
+        this.isToolbarActionsIconsOutlined = input(true, { ...(ngDevMode ? { debugName: "isToolbarActionsIconsOutlined" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /** Indicates is filters shown */
-        this.isFiltersShown = input(false, { ...(ngDevMode ? { debugName: "isFiltersShown" } : {}), transform: booleanAttribute });
+        this.isFiltersShown = input(false, { ...(ngDevMode ? { debugName: "isFiltersShown" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /** Indicates is filters empty */
-        this.isFiltersEmpty = input(false, { ...(ngDevMode ? { debugName: "isFiltersEmpty" } : {}), transform: booleanAttribute });
+        this.isFiltersEmpty = input(false, { ...(ngDevMode ? { debugName: "isFiltersEmpty" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /** Current search term from store */
-        this.searchTerm = input('', { ...(ngDevMode ? { debugName: "searchTerm" } : {}), transform: (value) => (isString(value) ? value.trim() : '') });
+        this.searchTerm = input('', { ...(ngDevMode ? { debugName: "searchTerm" } : /* istanbul ignore next */ {}), transform: (value) => (isString(value) ? value.trim() : '') });
         /** Current placeholder icon */
-        this.placeholderIcon = input('search', { ...(ngDevMode ? { debugName: "placeholderIcon" } : {}) });
+        this.placeholderIcon = input('search', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "placeholderIcon" }] : /* istanbul ignore next */ []));
         /** Current placeholder title */
-        this.placeholderTitle = input('No Data Found', { ...(ngDevMode ? { debugName: "placeholderTitle" } : {}) });
+        this.placeholderTitle = input('No Data Found', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "placeholderTitle" }] : /* istanbul ignore next */ []));
         /** Indicates is a small tablet view */
         this.isSmallTablet = this.#breakpointService.isSmallTablet;
         /** Config for table */
@@ -3681,22 +3829,28 @@ class RtuiTableContainerComponent {
         /** Clear filters output action */
         this.clearFiltersAction = output();
         /** Toolbar selectors template */
-        this.toolbarSelectorsTpl = contentChild(RtuiTableToolbarSelectorsDirective, { ...(ngDevMode ? { debugName: "toolbarSelectorsTpl" } : {}), read: TemplateRef });
+        this.toolbarSelectorsTpl = contentChild(RtuiTableToolbarSelectorsDirective, { ...(ngDevMode ? { debugName: "toolbarSelectorsTpl" } : /* istanbul ignore next */ {}), read: TemplateRef });
         /** Toolbar actions template */
-        this.toolbarActionsTpl = contentChild(RtuiTableToolbarActionsDirective, { ...(ngDevMode ? { debugName: "toolbarActionsTpl" } : {}), read: TemplateRef });
+        this.toolbarActionsTpl = contentChild(RtuiTableToolbarActionsDirective, { ...(ngDevMode ? { debugName: "toolbarActionsTpl" } : /* istanbul ignore next */ {}), read: TemplateRef });
         /** Fields specified by the directive */
         /** Indicates is multiselect mod enabled */
-        this.isMultiSelect = signal(false, { ...(ngDevMode ? { debugName: "isMultiSelect" } : {}) });
+        this.isMultiSelect = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isMultiSelect" }] : /* istanbul ignore next */ []));
         /** Indicates is 'Select All' selector shown */
-        this.isSelectAllSelectorShown = signal(true, { ...(ngDevMode ? { debugName: "isSelectAllSelectorShown" } : {}) });
+        this.isSelectAllSelectorShown = signal(true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isSelectAllSelectorShown" }] : /* istanbul ignore next */ []));
         /** Indicates is 'Select All' selector disabled */
-        this.isSelectAllSelectorDisabled = signal(false, { ...(ngDevMode ? { debugName: "isSelectAllSelectorDisabled" } : {}) });
+        this.isSelectAllSelectorDisabled = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isSelectAllSelectorDisabled" }] : /* istanbul ignore next */ []));
         /** Indicates is all entities selected */
-        this.isAllEntitiesSelected = signal(false, { ...(ngDevMode ? { debugName: "isAllEntitiesSelected" } : {}) });
+        this.isAllEntitiesSelected = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isAllEntitiesSelected" }] : /* istanbul ignore next */ []));
         /** Indicates is all entities indeterminate */
-        this.isAllEntitiesIndeterminate = signal(false, { ...(ngDevMode ? { debugName: "isAllEntitiesIndeterminate" } : {}) });
+        this.isAllEntitiesIndeterminate = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isAllEntitiesIndeterminate" }] : /* istanbul ignore next */ []));
         /** Current selected entities count */
-        this.selectedEntitiesCount = signal(0, { ...(ngDevMode ? { debugName: "selectedEntitiesCount" } : {}) });
+        this.selectedEntitiesCount = signal(0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selectedEntitiesCount" }] : /* istanbul ignore next */ []));
         /** Control for search */
         this.searchControl = new FormControl(null);
         /** Empty method, set in selectors directive */
@@ -3772,8 +3926,8 @@ class RtuiTableContainerComponent {
             this.#style.setProperty('--rt-table-container-content-scrollbar-horizontal-height', safeHorizontalValue);
         }
     }
-    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: ["@charset \"UTF-8\";:host{position:relative;display:flex;overflow:hidden;width:100%}:host ::-webkit-scrollbar-track:hover{border:1px solid var(--rt-border-neutral-subtle)}:host ::-webkit-scrollbar-thumb{border:3px solid transparent;border-radius:var(--rt-radius-sm);background:var(--rt-scrollbar-thumb);background-clip:content-box}:host ::-webkit-scrollbar-thumb:hover{border:2px solid transparent;background:var(--rt-scrollbar-thumb-hover);background-clip:content-box}:host rtui-toolbar{--rt-toolbar-body-padding: 0;--rt-toolbar-bars-border-bottom-width: 0}:host rtui-scrollable{--rt-scrollable-header-padding: 1rem 0 0 0;--rt-scrollable-content-padding: 1rem 0 0 0;--rt-scrollable-host-background-color: transparent;--rt-scrollable-header-background-color: transparent;--rt-scrollable-content-background-color: transparent}:host{--mat-fab-small-container-shape: 50%;--mat-fab-small-hover-state-layer-opacity: 0;--mat-fab-small-pressed-state-layer-opacity: 0;--mat-fab-small-focus-state-layer-opacity: 0;--rt-table-container-selectors-margin: 0 .65rem;--rt-table-container-selector-label-color: var(--rt-text-base-secondary);--rt-table-container-selector-label-hover-color: var(--rt-text-base-strong);--rt-table-container-selector-counter-color: var(--rt-text-base-secondary);--rt-table-container-selector-counter-font-size: .875rem;--rt-table-container-toolbar-mobile-gap: 1rem;--rt-table-container-toolbar-actions-gap: 1rem;--rt-table-container-toolbar-actions-last-child-margin-right: 1rem;--rt-table-container-toolbar-actions-divider-height: 2rem;--rt-table-container-toolbar-actions-divider-border-left: 1px solid var(--rt-border-neutral-divider);--rt-table-container-toolbar-search-width: 22rem;--rt-table-container-content-padding: 0;--rt-table-container-placeholder-width: 100%;--rt-table-container-placeholder-height: 100vh;--rt-table-container-placeholder-gap: 1rem;--rt-table-container-placeholder-icon-size: 3rem;--rt-table-container-placeholder-title-size: 2rem}:host .table-container__selectors{display:flex;width:100%;flex-grow:1;align-items:center;justify-content:flex-start;margin:var(--rt-table-container-selectors-margin);gap:var(--rt-table-container-toolbar-actions-gap)}:host .table-container__selectors-label{color:var(--rt-table-container-selector-label-color)}:host .table-container__selectors-label:hover{color:var(--rt-table-container-selector-label-hover-color)}:host .table-container__selectors-counter{color:var(--rt-table-container-selector-counter-color);font-size:var(--rt-table-container-selector-counter-font-size)}:host .table-container__toolbar{display:flex;width:100%;align-items:center;justify-content:flex-end}:host .table-container__toolbar-actions{display:flex;align-items:center;justify-content:flex-end;gap:var(--rt-table-container-toolbar-actions-gap)}:host .table-container__toolbar-actions>:last-child{margin-right:var(--rt-table-container-toolbar-actions-last-child-margin-right)}:host .table-container__toolbar-actions-divider{height:var(--rt-table-container-toolbar-actions-divider-height);border-left:var(--rt-table-container-toolbar-actions-divider-border-left)}:host .table-container__toolbar-search{width:var(--rt-table-container-toolbar-search-width)}:host .table-container__content{overflow:auto;width:100%;flex-grow:1;padding:var(--rt-table-container-content-padding)}:host .table-container__content::-webkit-scrollbar{width:var(--rt-table-container-content-scrollbar-vertical-width);height:var(--rt-table-container-content-scrollbar-horizontal-height)}:host .table-container__placeholder{display:flex;width:var(--rt-table-container-placeholder-width);height:var(--rt-table-container-placeholder-height);flex-direction:column;align-items:center;justify-content:center;gap:var(--rt-table-container-placeholder-gap)}:host .table-container__placeholder-icon{width:var(--rt-table-container-placeholder-icon-size);height:var(--rt-table-container-placeholder-icon-size);font-size:var(--rt-table-container-placeholder-icon-size)}:host .table-container__placeholder-title{font-size:var(--rt-table-container-placeholder-title-size)}@media screen and (max-width:719px){:host{--rt-table-container-toolbar-actions-last-child-margin-right: 0}:host rtui-toolbar{--rt-toolbar-body-height: 6.5rem;--rt-toolbar-body-mobile-height: 6.5rem;--rt-toolbar-bars-center-width: 0;--rt-toolbar-bars-right-width: 100%}:host .table-container__toolbar{flex-direction:column-reverse;gap:var(--rt-table-container-toolbar-mobile-gap)}:host .table-container__toolbar-actions{width:100%;justify-content:center}:host .table-container__toolbar-actions--end{--rt-table-container-toolbar-actions-last-child-margin-right: 1rem;justify-content:flex-end}:host .table-container__toolbar-search{width:100%;justify-content:center;grid-row:1}}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: 
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiTableContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: RtuiTableContainerComponent, isStandalone: true, selector: "rtui-table-container", inputs: { appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: true, transformFunction: null }, tableConfigStorageKey: { classPropertyName: "tableConfigStorageKey", publicName: "tableConfigStorageKey", isSignal: true, isRequired: true, transformFunction: null }, pageModel: { classPropertyName: "pageModel", publicName: "pageModel", isSignal: true, isRequired: true, transformFunction: null }, isMobile: { classPropertyName: "isMobile", publicName: "isMobile", isSignal: true, isRequired: true, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: true, transformFunction: null }, fetching: { classPropertyName: "fetching", publicName: "fetching", isSignal: true, isRequired: true, transformFunction: null }, isPlaceholderShown: { classPropertyName: "isPlaceholderShown", publicName: "isPlaceholderShown", isSignal: true, isRequired: true, transformFunction: null }, isPaginationShown: { classPropertyName: "isPaginationShown", publicName: "isPaginationShown", isSignal: true, isRequired: false, transformFunction: null }, isRefreshButtonShown: { classPropertyName: "isRefreshButtonShown", publicName: "isRefreshButtonShown", isSignal: true, isRequired: false, transformFunction: null }, isTableConfigButtonShown: { classPropertyName: "isTableConfigButtonShown", publicName: "isTableConfigButtonShown", isSignal: true, isRequired: false, transformFunction: null }, isToolbarActionsIconsOutlined: { classPropertyName: "isToolbarActionsIconsOutlined", publicName: "isToolbarActionsIconsOutlined", isSignal: true, isRequired: false, transformFunction: null }, isFiltersShown: { classPropertyName: "isFiltersShown", publicName: "isFiltersShown", isSignal: true, isRequired: false, transformFunction: null }, isFiltersEmpty: { classPropertyName: "isFiltersEmpty", publicName: "isFiltersEmpty", isSignal: true, isRequired: false, transformFunction: null }, searchTerm: { classPropertyName: "searchTerm", publicName: "searchTerm", isSignal: true, isRequired: false, transformFunction: null }, placeholderIcon: { classPropertyName: "placeholderIcon", publicName: "placeholderIcon", isSignal: true, isRequired: false, transformFunction: null }, placeholderTitle: { classPropertyName: "placeholderTitle", publicName: "placeholderTitle", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pageModelChange: "pageModelChange", searchChange: "searchChange", refreshAction: "refreshAction", clearFiltersAction: "clearFiltersAction" }, providers: [BreakpointService, RtAsideService, PlatformService], queries: [{ propertyName: "toolbarSelectorsTpl", first: true, predicate: RtuiTableToolbarSelectorsDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "toolbarActionsTpl", first: true, predicate: RtuiTableToolbarActionsDirective, descendants: true, read: TemplateRef, isSignal: true }], ngImport: i0, template: "@if (loading()) {\n    <rtui-spinner />\n} @else {\n    @if (fetching()) {\n        <rtui-spinner [showBackground]=\"true\" />\n    }\n    <ng-container rtBlock=\"table-container\">\n        <rtui-scrollable>\n            <ng-container *rtuiScrollableHeader>\n                <rtui-toolbar>\n                    @if (isSmallTablet() && !isPlaceholderShown() && (isMultiSelect() || toolbarSelectorsTpl())) {\n                        <ng-container *rtuiToolbarLeft>\n                            <ng-template *ngTemplateOutlet=\"selectorsTpl\" />\n                        </ng-container>\n                    }\n\n                    <ng-container *rtuiToolbarRight>\n                        <div rtElem=\"toolbar\">\n                            <div rtElem=\"toolbar-actions\" [rtMod]=\"{ end: isMultiSelect() ?? toolbarSelectorsTpl() }\">\n                                @if (!isSmallTablet() && !isPlaceholderShown() && (isMultiSelect() || toolbarSelectorsTpl())) {\n                                    <ng-template *ngTemplateOutlet=\"selectorsTpl\" />\n                                }\n\n                                @if (toolbarActionsTpl()) {\n                                    <ng-template *ngTemplateOutlet=\"toolbarActionsTpl() ?? null\" />\n\n                                    <div rtElem=\"toolbar-actions-divider\"></div>\n                                }\n\n                                @if (isFiltersShown()) {\n                                    <button\n                                        mat-mini-fab\n                                        type=\"button\"\n                                        aria-label=\"Icon-button for clear filters\"\n                                        class=\"c-button c-button--fab\"\n                                        matTooltip=\"Clear filters\"\n                                        matTooltipPosition=\"below\"\n                                        [matTooltipDisabled]=\"isMobile()\"\n                                        [disabled]=\"isFiltersEmpty()\"\n                                        (click)=\"onClearFilters()\">\n                                        <mat-icon [rtIconOutlined]=\"isToolbarActionsIconsOutlined()\">block</mat-icon>\n                                    </button>\n                                }\n\n                                @if (isRefreshButtonShown()) {\n                                    <button\n                                        mat-mini-fab\n                                        type=\"button\"\n                                        aria-label=\"Icon-button for table refresh\"\n                                        class=\"c-button c-button--fab\"\n                                        matTooltip=\"Refresh\"\n                                        matTooltipPosition=\"below\"\n                                        [matTooltipDisabled]=\"isMobile()\"\n                                        (click)=\"onRefresh()\">\n                                        <mat-icon [rtIconOutlined]=\"isToolbarActionsIconsOutlined()\">sync</mat-icon>\n                                    </button>\n                                }\n\n                                @if (isTableConfigButtonShown()) {\n                                    <button\n                                        mat-mini-fab\n                                        type=\"button\"\n                                        aria-label=\"Icon-button for table config\"\n                                        class=\"c-button c-button--fab\"\n                                        matTooltip=\"Table configuration\"\n                                        matTooltipPosition=\"below\"\n                                        [matTooltipDisabled]=\"isMobile()\"\n                                        (click)=\"onOpenConfigAside()\">\n                                        <mat-icon [rtIconOutlined]=\"isToolbarActionsIconsOutlined()\">view_column</mat-icon>\n                                    </button>\n                                }\n                            </div>\n\n                            @if ((isPlaceholderShown() && searchControl.value) || !isPlaceholderShown() || searchControl.dirty) {\n                                <div rtElem=\"toolbar-search\">\n                                    <mat-form-field subscriptSizing=\"dynamic\" [appearance]=\"appearance()\" [style.width.%]=\"100\">\n                                        <input matInput placeholder=\"Search...\" type=\"text\" [formControl]=\"searchControl\" />\n\n                                        <mat-icon matPrefix [rtIconOutlined]=\"true\">search</mat-icon>\n\n                                        <rtui-clear-button\n                                            matSuffix\n                                            [isButtonShown]=\"!!searchControl.value\"\n                                            (clickAction)=\"onClearSearch()\" />\n                                    </mat-form-field>\n                                </div>\n                            }\n                        </div>\n                    </ng-container>\n                </rtui-toolbar>\n            </ng-container>\n\n            <ng-container *rtuiScrollableContent>\n                @if (!isPlaceholderShown() || pageModel()?.totalCount) {\n                    <div rtElem=\"content\">\n                        <ng-content />\n                    </div>\n\n                    @if (isPaginationShown()) {\n                        <div rtElem=\"pagination\">\n                            <rtui-pagination\n                                [isMobile]=\"!!isMobile()\"\n                                [currentPageModel]=\"pageModel()\"\n                                (pageModelChange)=\"onPageModelChange($event)\" />\n                        </div>\n                    }\n                } @else {\n                    <div rtElem=\"placeholder\">\n                        <mat-icon rtElem=\"placeholder-icon\" [rtIconOutlined]=\"true\">{{ placeholderIcon() }}</mat-icon>\n\n                        <div rtElem=\"placeholder-title\">{{ placeholderTitle() }}</div>\n                    </div>\n                }\n            </ng-container>\n        </rtui-scrollable>\n\n        <ng-template #selectorsTpl>\n            <div rtElem=\"selectors\">\n                @if (isMultiSelect()) {\n                    @if (isSelectAllSelectorShown()) {\n                        <mat-checkbox\n                            [checked]=\"isAllEntitiesSelected()\"\n                            [indeterminate]=\"!isAllEntitiesSelected() && isAllEntitiesIndeterminate()\"\n                            [disabled]=\"isSelectAllSelectorDisabled()\"\n                            (click)=\"$event.stopPropagation()\"\n                            (change)=\"onToggleAllEntities($event.checked)\">\n                            <div rtElem=\"selectors-label\">Select all</div>\n                        </mat-checkbox>\n                    } @else {\n                        <div rtElem=\"selectors-counter\">Selected: {{ selectedEntitiesCount() }}</div>\n                    }\n                }\n\n                @if (toolbarSelectorsTpl()) {\n                    <ng-template *ngTemplateOutlet=\"toolbarSelectorsTpl() ?? null\" />\n                }\n            </div>\n        </ng-template>\n    </ng-container>\n}\n", styles: ["@charset \"UTF-8\";:host{position:relative;display:flex;overflow:hidden;width:100%}:host ::-webkit-scrollbar-track:hover{border:1px solid var(--rt-border-neutral-subtle)}:host ::-webkit-scrollbar-thumb{border:3px solid transparent;border-radius:var(--rt-radius-sm);background:var(--rt-scrollbar-thumb);background-clip:content-box}:host ::-webkit-scrollbar-thumb:hover{border:2px solid transparent;background:var(--rt-scrollbar-thumb-hover);background-clip:content-box}:host rtui-toolbar{--rt-toolbar-body-padding: 0;--rt-toolbar-bars-border-bottom-width: 0}:host rtui-scrollable{--rt-scrollable-header-padding: 1rem 0 0 0;--rt-scrollable-content-padding: 1rem 0 0 0;--rt-scrollable-host-background-color: transparent;--rt-scrollable-header-background-color: transparent;--rt-scrollable-content-background-color: transparent}:host{--mat-fab-small-container-shape: 50%;--mat-fab-small-hover-state-layer-opacity: 0;--mat-fab-small-pressed-state-layer-opacity: 0;--mat-fab-small-focus-state-layer-opacity: 0;--rt-table-container-selectors-margin: 0 .65rem;--rt-table-container-selector-label-color: var(--rt-text-base-secondary);--rt-table-container-selector-label-hover-color: var(--rt-text-base-strong);--rt-table-container-selector-counter-color: var(--rt-text-base-secondary);--rt-table-container-selector-counter-font-size: .875rem;--rt-table-container-toolbar-mobile-gap: 1rem;--rt-table-container-toolbar-actions-gap: 1rem;--rt-table-container-toolbar-actions-last-child-margin-right: 1rem;--rt-table-container-toolbar-actions-divider-height: 2rem;--rt-table-container-toolbar-actions-divider-border-left: 1px solid var(--rt-border-neutral-divider);--rt-table-container-toolbar-search-width: 22rem;--rt-table-container-content-padding: 0;--rt-table-container-placeholder-width: 100%;--rt-table-container-placeholder-height: 100vh;--rt-table-container-placeholder-gap: 1rem;--rt-table-container-placeholder-icon-size: 3rem;--rt-table-container-placeholder-title-size: 2rem}:host .table-container__selectors{display:flex;width:100%;flex-grow:1;align-items:center;justify-content:flex-start;margin:var(--rt-table-container-selectors-margin);gap:var(--rt-table-container-toolbar-actions-gap)}:host .table-container__selectors-label{color:var(--rt-table-container-selector-label-color)}:host .table-container__selectors-label:hover{color:var(--rt-table-container-selector-label-hover-color)}:host .table-container__selectors-counter{color:var(--rt-table-container-selector-counter-color);font-size:var(--rt-table-container-selector-counter-font-size)}:host .table-container__toolbar{display:flex;width:100%;align-items:center;justify-content:flex-end}:host .table-container__toolbar-actions{display:flex;align-items:center;justify-content:flex-end;gap:var(--rt-table-container-toolbar-actions-gap)}:host .table-container__toolbar-actions>:last-child{margin-right:var(--rt-table-container-toolbar-actions-last-child-margin-right)}:host .table-container__toolbar-actions-divider{height:var(--rt-table-container-toolbar-actions-divider-height);border-left:var(--rt-table-container-toolbar-actions-divider-border-left)}:host .table-container__toolbar-search{width:var(--rt-table-container-toolbar-search-width)}:host .table-container__content{overflow:auto;width:100%;flex-grow:1;padding:var(--rt-table-container-content-padding)}:host .table-container__content::-webkit-scrollbar{width:var(--rt-table-container-content-scrollbar-vertical-width);height:var(--rt-table-container-content-scrollbar-horizontal-height)}:host .table-container__placeholder{display:flex;width:var(--rt-table-container-placeholder-width);height:var(--rt-table-container-placeholder-height);flex-direction:column;align-items:center;justify-content:center;gap:var(--rt-table-container-placeholder-gap)}:host .table-container__placeholder-icon{width:var(--rt-table-container-placeholder-icon-size);height:var(--rt-table-container-placeholder-icon-size);font-size:var(--rt-table-container-placeholder-icon-size)}:host .table-container__placeholder-title{font-size:var(--rt-table-container-placeholder-title-size)}@media screen and (max-width:719px){:host{--rt-table-container-toolbar-actions-last-child-margin-right: 0}:host rtui-toolbar{--rt-toolbar-body-height: 6.5rem;--rt-toolbar-body-mobile-height: 6.5rem;--rt-toolbar-bars-center-width: 0;--rt-toolbar-bars-right-width: 100%}:host .table-container__toolbar{flex-direction:column-reverse;gap:var(--rt-table-container-toolbar-mobile-gap)}:host .table-container__toolbar-actions{width:100%;justify-content:center}:host .table-container__toolbar-actions--end{--rt-table-container-toolbar-actions-last-child-margin-right: 1rem;justify-content:flex-end}:host .table-container__toolbar-search{width:100%;justify-content:center;grid-row:1}}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: 
                 // 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
@@ -3783,7 +3937,7 @@ class RtuiTableContainerComponent {
                 // Directives
                 RtuiToolbarRightDirective, selector: "[rtuiToolbarRight]" }, { kind: "directive", type: RtuiScrollableContainerContentDirective, selector: "[rtuiScrollableContent]" }, { kind: "directive", type: RtuiScrollableContainerHeaderDirective, selector: "[rtuiScrollableHeader]" }, { kind: "directive", type: RtIconOutlinedDirective, selector: "mat-icon[rtIconOutlined]", inputs: ["rtIconOutlined"] }, { kind: "directive", type: RtuiToolbarLeftDirective, selector: "[rtuiToolbarLeft]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtuiTableContainerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiTableContainerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'rtui-table-container', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         ReactiveFormsModule,
@@ -3823,10 +3977,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
 
 /** Directive for selectors of the toolbar located on the left side */
 class RtuiDynamicListToolbarSelectorsDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtuiDynamicListToolbarSelectorsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.1", type: RtuiDynamicListToolbarSelectorsDirective, isStandalone: true, selector: "[rtuiDynamicListToolbarSelectorsDirective]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiDynamicListToolbarSelectorsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: RtuiDynamicListToolbarSelectorsDirective, isStandalone: true, selector: "[rtuiDynamicListToolbarSelectorsDirective]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtuiDynamicListToolbarSelectorsDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiDynamicListToolbarSelectorsDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rtuiDynamicListToolbarSelectorsDirective]',
@@ -3834,10 +3988,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
         }] });
 /** Directive for actions of the toolbar located on the right side */
 class RtuiDynamicListToolbarActionsDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtuiDynamicListToolbarActionsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.1", type: RtuiDynamicListToolbarActionsDirective, isStandalone: true, selector: "[rtuiDynamicListToolbarActionsDirective]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiDynamicListToolbarActionsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: RtuiDynamicListToolbarActionsDirective, isStandalone: true, selector: "[rtuiDynamicListToolbarActionsDirective]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtuiDynamicListToolbarActionsDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiDynamicListToolbarActionsDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rtuiDynamicListToolbarActionsDirective]',
@@ -3846,12 +4000,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
 /** Directive for custom table cells */
 class RtuiDynamicListCustomTableCellsDirective {
     constructor() {
-        this.cellsTemplates = input.required({ ...(ngDevMode ? { debugName: "cellsTemplates" } : {}), alias: 'rtuiDynamicListCustomTableCellsDirective' });
+        this.cellsTemplates = input.required({ ...(ngDevMode ? { debugName: "cellsTemplates" } : /* istanbul ignore next */ {}), alias: 'rtuiDynamicListCustomTableCellsDirective' });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtuiDynamicListCustomTableCellsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.1", type: RtuiDynamicListCustomTableCellsDirective, isStandalone: true, selector: "[rtuiDynamicListCustomTableCellsDirective]", inputs: { cellsTemplates: { classPropertyName: "cellsTemplates", publicName: "rtuiDynamicListCustomTableCellsDirective", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiDynamicListCustomTableCellsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.5", type: RtuiDynamicListCustomTableCellsDirective, isStandalone: true, selector: "[rtuiDynamicListCustomTableCellsDirective]", inputs: { cellsTemplates: { classPropertyName: "cellsTemplates", publicName: "rtuiDynamicListCustomTableCellsDirective", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtuiDynamicListCustomTableCellsDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiDynamicListCustomTableCellsDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rtuiDynamicListCustomTableCellsDirective]',
@@ -3859,10 +4013,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
         }], propDecorators: { cellsTemplates: [{ type: i0.Input, args: [{ isSignal: true, alias: "rtuiDynamicListCustomTableCellsDirective", required: true }] }] } });
 /** Directive for row actions located inside a row menu button */
 class RtuiDynamicListRowActionsDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtuiDynamicListRowActionsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.1", type: RtuiDynamicListRowActionsDirective, isStandalone: true, selector: "[rtuiDynamicListRowActionsDirective]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiDynamicListRowActionsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: RtuiDynamicListRowActionsDirective, isStandalone: true, selector: "[rtuiDynamicListRowActionsDirective]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtuiDynamicListRowActionsDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiDynamicListRowActionsDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rtuiDynamicListRowActionsDirective]',
@@ -3870,10 +4024,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
         }] });
 /** Directive for row actions located outside a row menu button */
 class RtuiDynamicListRowAdditionalActionsDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtuiDynamicListRowAdditionalActionsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.1", type: RtuiDynamicListRowAdditionalActionsDirective, isStandalone: true, selector: "[rtuiDynamicListRowAdditionalActionsDirective]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiDynamicListRowAdditionalActionsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: RtuiDynamicListRowAdditionalActionsDirective, isStandalone: true, selector: "[rtuiDynamicListRowAdditionalActionsDirective]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtuiDynamicListRowAdditionalActionsDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiDynamicListRowAdditionalActionsDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rtuiDynamicListRowAdditionalActionsDirective]',
@@ -3882,41 +4036,46 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
 class RtuiDynamicListComponent {
     constructor() {
         /** Table config storage key */
-        this.tableConfigStorageKey = input.required({ ...(ngDevMode ? { debugName: "tableConfigStorageKey" } : {}), transform: transformStringInput });
+        this.tableConfigStorageKey = input.required({ ...(ngDevMode ? { debugName: "tableConfigStorageKey" } : /* istanbul ignore next */ {}), transform: transformStringInput });
         /** Indicates is mobile view */
-        this.isMobile = input(false, { ...(ngDevMode ? { debugName: "isMobile" } : {}), transform: booleanAttribute });
+        this.isMobile = input(false, { ...(ngDevMode ? { debugName: "isMobile" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /** Indicates is loading in progress */
-        this.loading = input(false, { ...(ngDevMode ? { debugName: "loading" } : {}), transform: booleanAttribute });
+        this.loading = input(false, { ...(ngDevMode ? { debugName: "loading" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /** Indicates is fetching in progress */
-        this.fetching = input(false, { ...(ngDevMode ? { debugName: "fetching" } : {}), transform: booleanAttribute });
+        this.fetching = input(false, { ...(ngDevMode ? { debugName: "fetching" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /** Indicates are table rows clickable */
-        this.isTableRowsClickable = input(false, { ...(ngDevMode ? { debugName: "isTableRowsClickable" } : {}), transform: booleanAttribute });
+        this.isTableRowsClickable = input(false, { ...(ngDevMode ? { debugName: "isTableRowsClickable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /** Indicates is pagination shown */
-        this.isPaginationShown = input(true, { ...(ngDevMode ? { debugName: "isPaginationShown" } : {}), transform: booleanAttribute });
+        this.isPaginationShown = input(true, { ...(ngDevMode ? { debugName: "isPaginationShown" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /** Indicates is the refresh button shown */
-        this.isRefreshButtonShown = input(true, { ...(ngDevMode ? { debugName: "isRefreshButtonShown" } : {}), transform: booleanAttribute });
+        this.isRefreshButtonShown = input(true, { ...(ngDevMode ? { debugName: "isRefreshButtonShown" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /** Indicates is a table config button shown */
-        this.isTableConfigButtonShown = input(true, { ...(ngDevMode ? { debugName: "isTableConfigButtonShown" } : {}), transform: booleanAttribute });
+        this.isTableConfigButtonShown = input(true, { ...(ngDevMode ? { debugName: "isTableConfigButtonShown" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /** Indicates is toolbar buttons outlined */
-        this.isToolbarActionsIconsOutlined = input(true, { ...(ngDevMode ? { debugName: "isToolbarActionsIconsOutlined" } : {}), transform: booleanAttribute });
+        this.isToolbarActionsIconsOutlined = input(true, { ...(ngDevMode ? { debugName: "isToolbarActionsIconsOutlined" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /** Key of ENTITY_TYPE for compare entities */
-        this.keyExp = input('id', { ...(ngDevMode ? { debugName: "keyExp" } : {}) });
+        this.keyExp = input('id', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "keyExp" }] : /* istanbul ignore next */ []));
         /** List of entities */
-        this.entities = input.required({ ...(ngDevMode ? { debugName: "entities" } : {}), transform: (value) => transformArrayInput(value) });
+        this.entities = input.required({ ...(ngDevMode ? { debugName: "entities" } : /* istanbul ignore next */ {}), transform: (value) => transformArrayInput(value) });
         /** Current page model from store */
-        this.pageModel = input.required({ ...(ngDevMode ? { debugName: "pageModel" } : {}) });
+        this.pageModel = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "pageModel" }] : /* istanbul ignore next */ []));
         /** Current search term from store */
-        this.searchTerm = input.required({ ...(ngDevMode ? { debugName: "searchTerm" } : {}) });
+        this.searchTerm = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "searchTerm" }] : /* istanbul ignore next */ []));
         /** Current sort model from store */
-        this.currentSortModel = input.required({ ...(ngDevMode ? { debugName: "currentSortModel" } : {}) });
+        this.currentSortModel = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "currentSortModel" }] : /* istanbul ignore next */ []));
         /** Inputs appearance */
-        this.appearance = input.required({ ...(ngDevMode ? { debugName: "appearance" } : {}), transform: (value) => (value === 'fill' ? 'fill' : 'outline') });
+        this.appearance = input.required({ ...(ngDevMode ? { debugName: "appearance" } : /* istanbul ignore next */ {}), transform: (value) => (value === 'fill' ? 'fill' : 'outline') });
         /** Filter inputs appearance */
-        this.filterAppearance = input('outline', { ...(ngDevMode ? { debugName: "filterAppearance" } : {}) });
+        this.filterAppearance = input('outline', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "filterAppearance" }] : /* istanbul ignore next */ []));
         /** Current filter model from store */
-        this.filterModel = input([], { ...(ngDevMode ? { debugName: "filterModel" } : {}), transform: (value) => transformArrayInput(value) });
+        this.filterModel = input([], { ...(ngDevMode ? { debugName: "filterModel" } : /* istanbul ignore next */ {}), transform: (value) => transformArrayInput(value) });
         /** Indicates is filters shown */
-        this.isFiltersShown = input(false, { ...(ngDevMode ? { debugName: "isFiltersShown" } : {}), transform: booleanAttribute });
+        this.isFiltersShown = input(false, { ...(ngDevMode ? { debugName: "isFiltersShown" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /** Sort model change output action */
         this.sortChange = output();
         /** Page model change output action */
@@ -3934,19 +4093,22 @@ class RtuiDynamicListComponent {
         /** Filter change output action */
         this.filterChange = output();
         /** Toolbar selectors template */
-        this.toolbarSelectorsTpl = contentChild(RtuiDynamicListToolbarSelectorsDirective, { ...(ngDevMode ? { debugName: "toolbarSelectorsTpl" } : {}), read: TemplateRef });
+        this.toolbarSelectorsTpl = contentChild(RtuiDynamicListToolbarSelectorsDirective, { ...(ngDevMode ? { debugName: "toolbarSelectorsTpl" } : /* istanbul ignore next */ {}), read: TemplateRef });
         /** Toolbar actions template */
-        this.toolbarActionsTpl = contentChild(RtuiDynamicListToolbarActionsDirective, { ...(ngDevMode ? { debugName: "toolbarActionsTpl" } : {}), read: TemplateRef });
+        this.toolbarActionsTpl = contentChild(RtuiDynamicListToolbarActionsDirective, { ...(ngDevMode ? { debugName: "toolbarActionsTpl" } : /* istanbul ignore next */ {}), read: TemplateRef });
         /** Custom cells template */
-        this.customCellsTpl = contentChild(RtuiDynamicListCustomTableCellsDirective, { ...(ngDevMode ? { debugName: "customCellsTpl" } : {}) });
+        this.customCellsTpl = contentChild(RtuiDynamicListCustomTableCellsDirective, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "customCellsTpl" }] : /* istanbul ignore next */ []));
         /** Row actions template */
-        this.rowActionsTpl = contentChild(RtuiDynamicListRowActionsDirective, { ...(ngDevMode ? { debugName: "rowActionsTpl" } : {}), read: TemplateRef });
+        this.rowActionsTpl = contentChild(RtuiDynamicListRowActionsDirective, { ...(ngDevMode ? { debugName: "rowActionsTpl" } : /* istanbul ignore next */ {}), read: TemplateRef });
         /** Additional row actions template */
-        this.additionalRowActionsTpl = contentChild(RtuiDynamicListRowAdditionalActionsDirective, { ...(ngDevMode ? { debugName: "additionalRowActionsTpl" } : {}), read: TemplateRef });
+        this.additionalRowActionsTpl = contentChild(RtuiDynamicListRowAdditionalActionsDirective, { ...(ngDevMode ? { debugName: "additionalRowActionsTpl" } : /* istanbul ignore next */ {}), read: TemplateRef });
         /** Table container for selectors directive usage */
-        this.tableContainerTpl = viewChild(RtuiTableContainerComponent, { ...(ngDevMode ? { debugName: "tableContainerTpl" } : {}) });
+        this.tableContainerTpl = viewChild(RtuiTableContainerComponent, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "tableContainerTpl" }] : /* istanbul ignore next */ []));
         /** Table selector for selectors directive usage */
-        this.tableTpl = viewChild(RtuiTableComponent, { ...(ngDevMode ? { debugName: "tableTpl" } : {}) });
+        this.tableTpl = viewChild(RtuiTableComponent, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "tableTpl" }] : /* istanbul ignore next */ []));
     }
     /** Search change output action */
     onSearchChange(value) {
@@ -3980,14 +4142,14 @@ class RtuiDynamicListComponent {
     onRowDoubleClick(row) {
         this.rowDoubleClick.emit(row);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtuiDynamicListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: RtuiDynamicListComponent, isStandalone: true, selector: "rtui-dynamic-list", inputs: { tableConfigStorageKey: { classPropertyName: "tableConfigStorageKey", publicName: "tableConfigStorageKey", isSignal: true, isRequired: true, transformFunction: null }, isMobile: { classPropertyName: "isMobile", publicName: "isMobile", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, fetching: { classPropertyName: "fetching", publicName: "fetching", isSignal: true, isRequired: false, transformFunction: null }, isTableRowsClickable: { classPropertyName: "isTableRowsClickable", publicName: "isTableRowsClickable", isSignal: true, isRequired: false, transformFunction: null }, isPaginationShown: { classPropertyName: "isPaginationShown", publicName: "isPaginationShown", isSignal: true, isRequired: false, transformFunction: null }, isRefreshButtonShown: { classPropertyName: "isRefreshButtonShown", publicName: "isRefreshButtonShown", isSignal: true, isRequired: false, transformFunction: null }, isTableConfigButtonShown: { classPropertyName: "isTableConfigButtonShown", publicName: "isTableConfigButtonShown", isSignal: true, isRequired: false, transformFunction: null }, isToolbarActionsIconsOutlined: { classPropertyName: "isToolbarActionsIconsOutlined", publicName: "isToolbarActionsIconsOutlined", isSignal: true, isRequired: false, transformFunction: null }, keyExp: { classPropertyName: "keyExp", publicName: "keyExp", isSignal: true, isRequired: false, transformFunction: null }, entities: { classPropertyName: "entities", publicName: "entities", isSignal: true, isRequired: true, transformFunction: null }, pageModel: { classPropertyName: "pageModel", publicName: "pageModel", isSignal: true, isRequired: true, transformFunction: null }, searchTerm: { classPropertyName: "searchTerm", publicName: "searchTerm", isSignal: true, isRequired: true, transformFunction: null }, currentSortModel: { classPropertyName: "currentSortModel", publicName: "currentSortModel", isSignal: true, isRequired: true, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: true, transformFunction: null }, filterAppearance: { classPropertyName: "filterAppearance", publicName: "filterAppearance", isSignal: true, isRequired: false, transformFunction: null }, filterModel: { classPropertyName: "filterModel", publicName: "filterModel", isSignal: true, isRequired: false, transformFunction: null }, isFiltersShown: { classPropertyName: "isFiltersShown", publicName: "isFiltersShown", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sortChange: "sortChange", pageModelChange: "pageModelChange", searchChange: "searchChange", refresh: "refresh", clearFiltersAction: "clearFiltersAction", rowClick: "rowClick", rowDoubleClick: "rowDoubleClick", filterChange: "filterChange" }, queries: [{ propertyName: "toolbarSelectorsTpl", first: true, predicate: RtuiDynamicListToolbarSelectorsDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "toolbarActionsTpl", first: true, predicate: RtuiDynamicListToolbarActionsDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "customCellsTpl", first: true, predicate: RtuiDynamicListCustomTableCellsDirective, descendants: true, isSignal: true }, { propertyName: "rowActionsTpl", first: true, predicate: RtuiDynamicListRowActionsDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "additionalRowActionsTpl", first: true, predicate: RtuiDynamicListRowAdditionalActionsDirective, descendants: true, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "tableContainerTpl", first: true, predicate: RtuiTableContainerComponent, descendants: true, isSignal: true }, { propertyName: "tableTpl", first: true, predicate: RtuiTableComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<rtui-table-container\n    [tableConfigStorageKey]=\"tableConfigStorageKey()\"\n    [loading]=\"loading()\"\n    [fetching]=\"fetching()\"\n    [isMobile]=\"isMobile()\"\n    [pageModel]=\"pageModel()\"\n    [isPlaceholderShown]=\"!entities()?.length && !filterModel()?.length\"\n    [isToolbarActionsIconsOutlined]=\"isToolbarActionsIconsOutlined()\"\n    [isRefreshButtonShown]=\"isRefreshButtonShown()\"\n    [isTableConfigButtonShown]=\"isTableConfigButtonShown()\"\n    [isFiltersShown]=\"isFiltersShown()\"\n    [isFiltersEmpty]=\"!filterModel()?.length\"\n    [appearance]=\"appearance()\"\n    [searchTerm]=\"searchTerm()\"\n    (refreshAction)=\"onRefresh()\"\n    (clearFiltersAction)=\"onClearFilters()\"\n    (pageModelChange)=\"onPageModelChange($event)\"\n    (searchChange)=\"onSearchChange($event)\">\n    @if (toolbarSelectorsTpl()) {\n        <ng-container *rtuiTableToolbarSelectorsDirective>\n            <ng-template *ngTemplateOutlet=\"toolbarSelectorsTpl() || null\" />\n        </ng-container>\n    }\n\n    @if (toolbarActionsTpl()) {\n        <ng-container *rtuiTableToolbarActionsDirective>\n            <ng-template *ngTemplateOutlet=\"toolbarActionsTpl() || null\" />\n        </ng-container>\n    }\n\n    <rtui-table\n        [appearance]=\"appearance()\"\n        [keyExp]=\"keyExp()\"\n        [entities]=\"entities()\"\n        [isMobile]=\"isMobile()\"\n        [filterModel]=\"filterModel()\"\n        [isTableRowsClickable]=\"isTableRowsClickable()\"\n        [currentSortModel]=\"currentSortModel()\"\n        [isFiltersShown]=\"isFiltersShown()\"\n        (filterChange)=\"onFilterChange($event)\"\n        (rowClick)=\"onRowClick($event)\"\n        (rowDoubleClick)=\"onRowDoubleClick($event)\"\n        (sortChange)=\"onSortChange($event)\">\n        @if (customCellsTpl() && customCellsTpl()?.cellsTemplates()) {\n            <ng-container *rtuiCustomTableCellsDirective=\"customCellsTpl()?.cellsTemplates()!\" />\n        }\n\n        @if (additionalRowActionsTpl()) {\n            <ng-container *rtuiTableAdditionalRowActionsDirective=\"let row\">\n                <ng-template *ngTemplateOutlet=\"additionalRowActionsTpl() || null; context: { $implicit: row }\" />\n            </ng-container>\n        }\n\n        @if (rowActionsTpl()) {\n            <ng-container *rtuiTabletRowActionsDirective=\"let row\">\n                <ng-template *ngTemplateOutlet=\"rowActionsTpl() || null; context: { $implicit: row }\" />\n            </ng-container>\n        }\n    </rtui-table>\n</rtui-table-container>\n", styles: [":host{display:flex;overflow:hidden;width:100%;height:100%}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: 
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiDynamicListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: RtuiDynamicListComponent, isStandalone: true, selector: "rtui-dynamic-list", inputs: { tableConfigStorageKey: { classPropertyName: "tableConfigStorageKey", publicName: "tableConfigStorageKey", isSignal: true, isRequired: true, transformFunction: null }, isMobile: { classPropertyName: "isMobile", publicName: "isMobile", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, fetching: { classPropertyName: "fetching", publicName: "fetching", isSignal: true, isRequired: false, transformFunction: null }, isTableRowsClickable: { classPropertyName: "isTableRowsClickable", publicName: "isTableRowsClickable", isSignal: true, isRequired: false, transformFunction: null }, isPaginationShown: { classPropertyName: "isPaginationShown", publicName: "isPaginationShown", isSignal: true, isRequired: false, transformFunction: null }, isRefreshButtonShown: { classPropertyName: "isRefreshButtonShown", publicName: "isRefreshButtonShown", isSignal: true, isRequired: false, transformFunction: null }, isTableConfigButtonShown: { classPropertyName: "isTableConfigButtonShown", publicName: "isTableConfigButtonShown", isSignal: true, isRequired: false, transformFunction: null }, isToolbarActionsIconsOutlined: { classPropertyName: "isToolbarActionsIconsOutlined", publicName: "isToolbarActionsIconsOutlined", isSignal: true, isRequired: false, transformFunction: null }, keyExp: { classPropertyName: "keyExp", publicName: "keyExp", isSignal: true, isRequired: false, transformFunction: null }, entities: { classPropertyName: "entities", publicName: "entities", isSignal: true, isRequired: true, transformFunction: null }, pageModel: { classPropertyName: "pageModel", publicName: "pageModel", isSignal: true, isRequired: true, transformFunction: null }, searchTerm: { classPropertyName: "searchTerm", publicName: "searchTerm", isSignal: true, isRequired: true, transformFunction: null }, currentSortModel: { classPropertyName: "currentSortModel", publicName: "currentSortModel", isSignal: true, isRequired: true, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: true, transformFunction: null }, filterAppearance: { classPropertyName: "filterAppearance", publicName: "filterAppearance", isSignal: true, isRequired: false, transformFunction: null }, filterModel: { classPropertyName: "filterModel", publicName: "filterModel", isSignal: true, isRequired: false, transformFunction: null }, isFiltersShown: { classPropertyName: "isFiltersShown", publicName: "isFiltersShown", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sortChange: "sortChange", pageModelChange: "pageModelChange", searchChange: "searchChange", refresh: "refresh", clearFiltersAction: "clearFiltersAction", rowClick: "rowClick", rowDoubleClick: "rowDoubleClick", filterChange: "filterChange" }, queries: [{ propertyName: "toolbarSelectorsTpl", first: true, predicate: RtuiDynamicListToolbarSelectorsDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "toolbarActionsTpl", first: true, predicate: RtuiDynamicListToolbarActionsDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "customCellsTpl", first: true, predicate: RtuiDynamicListCustomTableCellsDirective, descendants: true, isSignal: true }, { propertyName: "rowActionsTpl", first: true, predicate: RtuiDynamicListRowActionsDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "additionalRowActionsTpl", first: true, predicate: RtuiDynamicListRowAdditionalActionsDirective, descendants: true, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "tableContainerTpl", first: true, predicate: RtuiTableContainerComponent, descendants: true, isSignal: true }, { propertyName: "tableTpl", first: true, predicate: RtuiTableComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<rtui-table-container\n    [tableConfigStorageKey]=\"tableConfigStorageKey()\"\n    [loading]=\"loading()\"\n    [fetching]=\"fetching()\"\n    [isMobile]=\"isMobile()\"\n    [pageModel]=\"pageModel()\"\n    [isPlaceholderShown]=\"!entities()?.length && !filterModel()?.length\"\n    [isToolbarActionsIconsOutlined]=\"isToolbarActionsIconsOutlined()\"\n    [isRefreshButtonShown]=\"isRefreshButtonShown()\"\n    [isTableConfigButtonShown]=\"isTableConfigButtonShown()\"\n    [isFiltersShown]=\"isFiltersShown()\"\n    [isFiltersEmpty]=\"!filterModel()?.length\"\n    [appearance]=\"appearance()\"\n    [searchTerm]=\"searchTerm()\"\n    (refreshAction)=\"onRefresh()\"\n    (clearFiltersAction)=\"onClearFilters()\"\n    (pageModelChange)=\"onPageModelChange($event)\"\n    (searchChange)=\"onSearchChange($event)\">\n    @if (toolbarSelectorsTpl()) {\n        <ng-container *rtuiTableToolbarSelectorsDirective>\n            <ng-template *ngTemplateOutlet=\"toolbarSelectorsTpl() || null\" />\n        </ng-container>\n    }\n\n    @if (toolbarActionsTpl()) {\n        <ng-container *rtuiTableToolbarActionsDirective>\n            <ng-template *ngTemplateOutlet=\"toolbarActionsTpl() || null\" />\n        </ng-container>\n    }\n\n    <rtui-table\n        [appearance]=\"appearance()\"\n        [keyExp]=\"keyExp()\"\n        [entities]=\"entities()\"\n        [isMobile]=\"isMobile()\"\n        [filterModel]=\"filterModel()\"\n        [isTableRowsClickable]=\"isTableRowsClickable()\"\n        [currentSortModel]=\"currentSortModel()\"\n        [isFiltersShown]=\"isFiltersShown()\"\n        (filterChange)=\"onFilterChange($event)\"\n        (rowClick)=\"onRowClick($event)\"\n        (rowDoubleClick)=\"onRowDoubleClick($event)\"\n        (sortChange)=\"onSortChange($event)\">\n        @if (customCellsTpl() && customCellsTpl()?.cellsTemplates()) {\n            <ng-container *rtuiCustomTableCellsDirective=\"customCellsTpl()?.cellsTemplates()!\" />\n        }\n\n        @if (additionalRowActionsTpl()) {\n            <ng-container *rtuiTableAdditionalRowActionsDirective=\"let row\">\n                <ng-template *ngTemplateOutlet=\"additionalRowActionsTpl() || null; context: { $implicit: row }\" />\n            </ng-container>\n        }\n\n        @if (rowActionsTpl()) {\n            <ng-container *rtuiTabletRowActionsDirective=\"let row\">\n                <ng-template *ngTemplateOutlet=\"rowActionsTpl() || null; context: { $implicit: row }\" />\n            </ng-container>\n        }\n    </rtui-table>\n</rtui-table-container>\n", styles: [":host{display:flex;overflow:hidden;width:100%;height:100%}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: 
                 // Directives
                 RtuiTableToolbarActionsDirective, selector: "[rtuiTableToolbarActionsDirective]" }, { kind: "directive", type: RtuiTableRowActionsDirective, selector: "[rtuiTabletRowActionsDirective]" }, { kind: "directive", type: RtuiTableToolbarSelectorsDirective, selector: "[rtuiTableToolbarSelectorsDirective]" }, { kind: "directive", type: RtuiTableAdditionalRowActionsDirective, selector: "[rtuiTableAdditionalRowActionsDirective]" }, { kind: "component", type: 
                 // Ui-kit
                 RtuiTableContainerComponent, selector: "rtui-table-container", inputs: ["appearance", "tableConfigStorageKey", "pageModel", "isMobile", "loading", "fetching", "isPlaceholderShown", "isPaginationShown", "isRefreshButtonShown", "isTableConfigButtonShown", "isToolbarActionsIconsOutlined", "isFiltersShown", "isFiltersEmpty", "searchTerm", "placeholderIcon", "placeholderTitle"], outputs: ["pageModelChange", "searchChange", "refreshAction", "clearFiltersAction"] }, { kind: "component", type: RtuiTableComponent, selector: "rtui-table", inputs: ["isMobile", "isTableRowsClickable", "keyExp", "entities", "currentSortModel", "appearance", "filterAppearance", "filterModel", "isFiltersShown"], outputs: ["rowClick", "rowDoubleClick", "sortChange", "filterChange"] }, { kind: "directive", type: RtuiCustomTableCellsDirective, selector: "[rtuiCustomTableCellsDirective]", inputs: ["rtuiCustomTableCellsDirective"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtuiDynamicListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiDynamicListComponent, decorators: [{
             type: Component,
             args: [{ selector: 'rtui-dynamic-list', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         NgTemplateOutlet,
@@ -4014,17 +4176,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
 class RtuiPopoverContainerComponent {
     constructor() {
         this.#sanitizer = inject(DomSanitizer);
-        this.popoverTemplate = input(undefined, { ...(ngDevMode ? { debugName: "popoverTemplate" } : {}), transform: (value) => value ?? null });
-        this.popoverClass = input(undefined, { ...(ngDevMode ? { debugName: "popoverClass" } : {}), transform: (value) => (isString(value) ? value : undefined) });
+        this.popoverTemplate = input(undefined, { ...(ngDevMode ? { debugName: "popoverTemplate" } : /* istanbul ignore next */ {}), transform: (value) => value ?? null });
+        this.popoverClass = input(undefined, { ...(ngDevMode ? { debugName: "popoverClass" } : /* istanbul ignore next */ {}), transform: (value) => (isString(value) ? value : undefined) });
     }
     #sanitizer;
     get className() {
         return this.#sanitizer.sanitize(1, this.popoverClass());
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtuiPopoverContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.1", type: RtuiPopoverContainerComponent, isStandalone: true, selector: "rtui-popover-container", inputs: { popoverTemplate: { classPropertyName: "popoverTemplate", publicName: "popoverTemplate", isSignal: true, isRequired: false, transformFunction: null }, popoverClass: { classPropertyName: "popoverClass", publicName: "popoverClass", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.className" } }, ngImport: i0, template: "<ng-container *ngTemplateOutlet=\"popoverTemplate() || null\" />\n", styles: [":host{position:absolute;display:block;width:fit-content;padding-top:var(--rt-spacing-20);text-align:left;transition:transform .1s,opacity .5s}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiPopoverContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.5", type: RtuiPopoverContainerComponent, isStandalone: true, selector: "rtui-popover-container", inputs: { popoverTemplate: { classPropertyName: "popoverTemplate", publicName: "popoverTemplate", isSignal: true, isRequired: false, transformFunction: null }, popoverClass: { classPropertyName: "popoverClass", publicName: "popoverClass", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.className" } }, ngImport: i0, template: "<ng-container *ngTemplateOutlet=\"popoverTemplate() || null\" />\n", styles: [":host{position:absolute;display:block;width:fit-content;padding-top:var(--rt-spacing-20);text-align:left;transition:transform .1s,opacity .5s}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtuiPopoverContainerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiPopoverContainerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'rtui-popover-container', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet], template: "<ng-container *ngTemplateOutlet=\"popoverTemplate() || null\" />\n", styles: [":host{position:absolute;display:block;width:fit-content;padding-top:var(--rt-spacing-20);text-align:left;transition:transform .1s,opacity .5s}\n"] }]
         }], propDecorators: { popoverTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "popoverTemplate", required: false }] }], popoverClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "popoverClass", required: false }] }], className: [{
@@ -4042,11 +4204,11 @@ class RtPopoverDirective {
         this.#componentFactoryResolver = inject(ViewContainerRef);
         this.#hasPopoverHover = false;
         this.#hasHostHover = false;
-        this.xOffset = input(0, { ...(ngDevMode ? { debugName: "xOffset" } : {}), transform: numberAttribute });
-        this.yOffset = input(-20, { ...(ngDevMode ? { debugName: "yOffset" } : {}), transform: numberAttribute });
-        this.trigger = input('hover', { ...(ngDevMode ? { debugName: "trigger" } : {}), transform: (value) => (value === 'click' ? 'click' : 'hover') });
-        this.template = input(null, { ...(ngDevMode ? { debugName: "template" } : {}), transform: (value) => value || null });
-        this.isMouseHoverAllowed = input(true, { ...(ngDevMode ? { debugName: "isMouseHoverAllowed" } : {}), transform: booleanAttribute });
+        this.xOffset = input(0, { ...(ngDevMode ? { debugName: "xOffset" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+        this.yOffset = input(-20, { ...(ngDevMode ? { debugName: "yOffset" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+        this.trigger = input('hover', { ...(ngDevMode ? { debugName: "trigger" } : /* istanbul ignore next */ {}), transform: (value) => (value === 'click' ? 'click' : 'hover') });
+        this.template = input(null, { ...(ngDevMode ? { debugName: "template" } : /* istanbul ignore next */ {}), transform: (value) => value || null });
+        this.isMouseHoverAllowed = input(true, { ...(ngDevMode ? { debugName: "isMouseHoverAllowed" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     }
     #windowRef;
     #injector;
@@ -4152,10 +4314,10 @@ class RtPopoverDirective {
             this.#popoverContainerRef = null;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtPopoverDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.1", type: RtPopoverDirective, isStandalone: true, selector: "[rtPopover]", inputs: { xOffset: { classPropertyName: "xOffset", publicName: "xOffset", isSignal: true, isRequired: false, transformFunction: null }, yOffset: { classPropertyName: "yOffset", publicName: "yOffset", isSignal: true, isRequired: false, transformFunction: null }, trigger: { classPropertyName: "trigger", publicName: "trigger", isSignal: true, isRequired: false, transformFunction: null }, template: { classPropertyName: "template", publicName: "template", isSignal: true, isRequired: false, transformFunction: null }, isMouseHoverAllowed: { classPropertyName: "isMouseHoverAllowed", publicName: "isMouseHoverAllowed", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "document:click": "onClick($event.target)", "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()" } }, providers: [PlatformService], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtPopoverDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.5", type: RtPopoverDirective, isStandalone: true, selector: "[rtPopover]", inputs: { xOffset: { classPropertyName: "xOffset", publicName: "xOffset", isSignal: true, isRequired: false, transformFunction: null }, yOffset: { classPropertyName: "yOffset", publicName: "yOffset", isSignal: true, isRequired: false, transformFunction: null }, trigger: { classPropertyName: "trigger", publicName: "trigger", isSignal: true, isRequired: false, transformFunction: null }, template: { classPropertyName: "template", publicName: "template", isSignal: true, isRequired: false, transformFunction: null }, isMouseHoverAllowed: { classPropertyName: "isMouseHoverAllowed", publicName: "isMouseHoverAllowed", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "document:click": "onClick($event.target)", "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()" } }, providers: [PlatformService], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtPopoverDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtPopoverDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rtPopover]',
@@ -4175,9 +4337,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
 class RtuiActionBarComponent {
     constructor() {
         this.#breakpointService = inject(BreakpointService);
-        this.config = input.required({ ...(ngDevMode ? { debugName: "config" } : {}) });
+        this.config = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "config" }] : /* istanbul ignore next */ []));
         this.closeAction = output();
-        this.isTablet = computed(() => !!this.#breakpointService.isTablet(), { ...(ngDevMode ? { debugName: "isTablet" } : {}) });
+        this.isTablet = computed(() => !!this.#breakpointService.isTablet(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isTablet" }] : /* istanbul ignore next */ []));
     }
     #breakpointService;
     onClose() {
@@ -4189,14 +4353,14 @@ class RtuiActionBarComponent {
             this.onClose();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtuiActionBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: RtuiActionBarComponent, isStandalone: true, selector: "rtui-action-bar", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { closeAction: "closeAction" }, providers: [BreakpointService], ngImport: i0, template: "<div rtBlock=\"rtui-action-bar\">\n    <div rtElem=\"counter\">\n        {{ 'Selected: ' + config().selected + ' out of ' + config().total | emptyToDash }}\n    </div>\n\n    @if (config().buttons?.length) {\n        <div rtElem=\"actions\">\n            @for (btn of config().buttons; track i; let i = $index) {\n                @if (btn?.menu) {\n                    @let menu = btn.menu;\n                    <ng-template #actionMenuWrapperTpl>\n                        <ng-container *ngTemplateOutlet=\"actionMenuTpl; context: { $implicit: menu }\" />\n                    </ng-template>\n\n                    <div rtPopover rtElem=\"action\" [trigger]=\"'click'\" [template]=\"actionMenuWrapperTpl\" [ngStyle]=\"btn?.styles\">\n                        <ng-template *ngTemplateOutlet=\"buttonContentTpl; context: { $implicit: btn }\" />\n                    </div>\n                } @else {\n                    <div rtElem=\"action\" [ngStyle]=\"btn?.styles\" (click)=\"onAction(btn)\">\n                        <ng-template *ngTemplateOutlet=\"buttonContentTpl; context: { $implicit: btn }\" />\n                    </div>\n                }\n            }\n        </div>\n    }\n\n    <div rtElem=\"close-button\" (click)=\"onClose()\">\n        <svg width=\"11\" height=\"11\" viewBox=\"0 0 11 11\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path\n                d=\"M10.7071 0.293C10.5196 0.105529 10.2652 0.000213623 10.0001 0.000213623C9.73492 0.000213623 9.48061 0.105529 9.29308 0.293L6.00008 3.586L2.70708 0.293C2.51848 0.110842 2.26588 0.0100477 2.00368 0.0123261C1.74148 0.0146045 1.49067 0.119773 1.30526 0.305182C1.11985 0.49059 1.01469 0.741402 1.01241 1.0036C1.01013 1.2658 1.11092 1.5184 1.29308 1.707L4.58608 5L1.29308 8.293C1.19757 8.38525 1.12139 8.49559 1.06898 8.6176C1.01657 8.7396 0.988985 8.87082 0.987831 9.0036C0.986677 9.13638 1.01198 9.26806 1.06226 9.39095C1.11254 9.51385 1.18679 9.6255 1.28069 9.71939C1.37458 9.81329 1.48623 9.88754 1.60913 9.93782C1.73202 9.9881 1.8637 10.0134 1.99648 10.0123C2.12926 10.0111 2.26048 9.98351 2.38249 9.9311C2.50449 9.87869 2.61483 9.80251 2.70708 9.707L6.00008 6.414L9.29308 9.707C9.48168 9.88916 9.73429 9.98995 9.99648 9.98767C10.2587 9.9854 10.5095 9.88023 10.6949 9.69482C10.8803 9.50941 10.9855 9.2586 10.9878 8.9964C10.99 8.7342 10.8892 8.4816 10.7071 8.293L7.41408 5L10.7071 1.707C10.8946 1.51947 10.9999 1.26516 10.9999 1C10.9999 0.734836 10.8946 0.480528 10.7071 0.293Z\"\n                fill=\"currentColor\" />\n        </svg>\n    </div>\n</div>\n\n<ng-template #actionMenuTpl let-menu>\n    <div rtBlock=\"rtui-action-bar-action-menu\">\n        @for (btn of menu; track i; let i = $index) {\n            <div rtElem=\"action\" (click)=\"onAction(btn)\">\n                <ng-template *ngTemplateOutlet=\"buttonContentTpl; context: { $implicit: btn }\" />\n            </div>\n        }\n    </div>\n</ng-template>\n\n<ng-template #buttonContentTpl let-btn>\n    @if (btn?.icon) {\n        <mat-icon [rtIconOutlined]=\"true\">{{ btn.icon }}</mat-icon>\n    }\n\n    @if (!isTablet() || (isTablet() && !btn?.icon)) {\n        <div>{{ btn.title }}</div>\n    }\n</ng-template>\n", styles: ["@charset \"UTF-8\";.rtui-action-bar{display:flex;width:var(--rt-action-bar-bar-width);align-items:center;padding:var(--rt-action-bar-bar-padding);border-radius:var(--rt-action-bar-bar-border-radius);background-color:var(--rt-action-bar-bar-background-color);box-shadow:var(--rt-action-bar-bar-box-shadow);color:var(--rt-action-bar-bar-color);gap:var(--rt-action-bar-bar-gap)}.rtui-action-bar__counter{font-size:var(--rt-action-bar-counter-font-size);font-weight:var(--rt-action-bar-counter-font-weight)}.rtui-action-bar__actions{display:flex;gap:var(--rt-action-bar-actions-gap)}.rtui-action-bar__action{display:flex;align-items:center;justify-content:center;padding:var(--rt-action-bar-action-padding);border-radius:var(--rt-action-bar-action-border-radius);cursor:pointer;font-size:var(--rt-action-bar-action-font-size);font-weight:var(--rt-action-bar-action-font-weight);gap:var(--rt-action-bar-action-gap)}.rtui-action-bar__action:hover{background-color:var(--rt-action-bar-action-hover-background-color)}.rtui-action-bar__close-button{margin-left:auto;cursor:pointer}.rtui-action-bar__close-button svg{transition:transform .2s ease}.rtui-action-bar__close-button svg:hover{transform:rotate(90deg)}@media screen and (max-width:959px){.rtui-action-bar{padding:var(--rt-action-bar-bar-mobile-padding);gap:var(--rt-action-bar-bar-mobile-gap)}.rtui-action-bar__actions{gap:var(--rt-action-bar-actions-mobile-gap)}.rtui-action-bar__action{padding:var(--rt-action-bar-action-mobile-padding);gap:var(--rt-action-bar-action-mobile-gap)}}.rtui-action-bar-action-menu{display:flex;flex-direction:column;padding:var(--rt-action-bar-action-menu-padding);border-radius:var(--rt-action-bar-action-border-radius);background-color:var(--rt-action-bar-action-menu-background-color);box-shadow:var(--rt-action-bar-action-menu-box-shadow);color:var(--rt-action-bar-action-menu-color);gap:var(--rt-action-bar-action-menu-gap)}.rtui-action-bar-action-menu__action{display:flex;align-items:center;justify-content:center;padding:var(--rt-action-bar-action-menu-action-padding);border-radius:var(--rt-action-bar-action-menu-action-border-radius);cursor:pointer;font-size:var(--rt-action-bar-action-menu-action-font-size);font-weight:var(--rt-action-bar-action-menu-action-font-weight);gap:var(--rt-action-bar-action-menu-action-gap)}.rtui-action-bar-action-menu__action:hover{background-color:var(--rt-action-bar-action-menu-action-hover-background-color)}@media screen and (max-width:959px){.rtui-action-bar-action-menu,.rtui-action-bar-action-menu__action{padding:var(--rt-action-bar-action-menu-action-mobile-padding);gap:var(--rt-action-bar-action-menu-action-mobile-gap)}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: 
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiActionBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: RtuiActionBarComponent, isStandalone: true, selector: "rtui-action-bar", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { closeAction: "closeAction" }, providers: [BreakpointService], ngImport: i0, template: "<div rtBlock=\"rtui-action-bar\">\n    <div rtElem=\"counter\">\n        {{ 'Selected: ' + config().selected + ' out of ' + config().total | emptyToDash }}\n    </div>\n\n    @if (config().buttons?.length) {\n        <div rtElem=\"actions\">\n            @for (btn of config().buttons; track i; let i = $index) {\n                @if (btn?.menu) {\n                    @let menu = btn.menu;\n                    <ng-template #actionMenuWrapperTpl>\n                        <ng-container *ngTemplateOutlet=\"actionMenuTpl; context: { $implicit: menu }\" />\n                    </ng-template>\n\n                    <div rtPopover rtElem=\"action\" [trigger]=\"'click'\" [template]=\"actionMenuWrapperTpl\" [ngStyle]=\"btn?.styles\">\n                        <ng-template *ngTemplateOutlet=\"buttonContentTpl; context: { $implicit: btn }\" />\n                    </div>\n                } @else {\n                    <div rtElem=\"action\" [ngStyle]=\"btn?.styles\" (click)=\"onAction(btn)\">\n                        <ng-template *ngTemplateOutlet=\"buttonContentTpl; context: { $implicit: btn }\" />\n                    </div>\n                }\n            }\n        </div>\n    }\n\n    <div rtElem=\"close-button\" (click)=\"onClose()\">\n        <svg width=\"11\" height=\"11\" viewBox=\"0 0 11 11\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path\n                d=\"M10.7071 0.293C10.5196 0.105529 10.2652 0.000213623 10.0001 0.000213623C9.73492 0.000213623 9.48061 0.105529 9.29308 0.293L6.00008 3.586L2.70708 0.293C2.51848 0.110842 2.26588 0.0100477 2.00368 0.0123261C1.74148 0.0146045 1.49067 0.119773 1.30526 0.305182C1.11985 0.49059 1.01469 0.741402 1.01241 1.0036C1.01013 1.2658 1.11092 1.5184 1.29308 1.707L4.58608 5L1.29308 8.293C1.19757 8.38525 1.12139 8.49559 1.06898 8.6176C1.01657 8.7396 0.988985 8.87082 0.987831 9.0036C0.986677 9.13638 1.01198 9.26806 1.06226 9.39095C1.11254 9.51385 1.18679 9.6255 1.28069 9.71939C1.37458 9.81329 1.48623 9.88754 1.60913 9.93782C1.73202 9.9881 1.8637 10.0134 1.99648 10.0123C2.12926 10.0111 2.26048 9.98351 2.38249 9.9311C2.50449 9.87869 2.61483 9.80251 2.70708 9.707L6.00008 6.414L9.29308 9.707C9.48168 9.88916 9.73429 9.98995 9.99648 9.98767C10.2587 9.9854 10.5095 9.88023 10.6949 9.69482C10.8803 9.50941 10.9855 9.2586 10.9878 8.9964C10.99 8.7342 10.8892 8.4816 10.7071 8.293L7.41408 5L10.7071 1.707C10.8946 1.51947 10.9999 1.26516 10.9999 1C10.9999 0.734836 10.8946 0.480528 10.7071 0.293Z\"\n                fill=\"currentColor\" />\n        </svg>\n    </div>\n</div>\n\n<ng-template #actionMenuTpl let-menu>\n    <div rtBlock=\"rtui-action-bar-action-menu\">\n        @for (btn of menu; track i; let i = $index) {\n            <div rtElem=\"action\" (click)=\"onAction(btn)\">\n                <ng-template *ngTemplateOutlet=\"buttonContentTpl; context: { $implicit: btn }\" />\n            </div>\n        }\n    </div>\n</ng-template>\n\n<ng-template #buttonContentTpl let-btn>\n    @if (btn?.icon) {\n        <mat-icon [rtIconOutlined]=\"true\">{{ btn.icon }}</mat-icon>\n    }\n\n    @if (!isTablet() || (isTablet() && !btn?.icon)) {\n        <div>{{ btn.title }}</div>\n    }\n</ng-template>\n", styles: ["@charset \"UTF-8\";.rtui-action-bar{display:flex;width:var(--rt-action-bar-bar-width);align-items:center;padding:var(--rt-action-bar-bar-padding);border-radius:var(--rt-action-bar-bar-border-radius);background-color:var(--rt-action-bar-bar-background-color);box-shadow:var(--rt-action-bar-bar-box-shadow);color:var(--rt-action-bar-bar-color);gap:var(--rt-action-bar-bar-gap)}.rtui-action-bar__counter{font-size:var(--rt-action-bar-counter-font-size);font-weight:var(--rt-action-bar-counter-font-weight)}.rtui-action-bar__actions{display:flex;gap:var(--rt-action-bar-actions-gap)}.rtui-action-bar__action{display:flex;align-items:center;justify-content:center;padding:var(--rt-action-bar-action-padding);border-radius:var(--rt-action-bar-action-border-radius);cursor:pointer;font-size:var(--rt-action-bar-action-font-size);font-weight:var(--rt-action-bar-action-font-weight);gap:var(--rt-action-bar-action-gap)}.rtui-action-bar__action:hover{background-color:var(--rt-action-bar-action-hover-background-color)}.rtui-action-bar__close-button{margin-left:auto;cursor:pointer}.rtui-action-bar__close-button svg{transition:transform .2s ease}.rtui-action-bar__close-button svg:hover{transform:rotate(90deg)}@media screen and (max-width:959px){.rtui-action-bar{padding:var(--rt-action-bar-bar-mobile-padding);gap:var(--rt-action-bar-bar-mobile-gap)}.rtui-action-bar__actions{gap:var(--rt-action-bar-actions-mobile-gap)}.rtui-action-bar__action{padding:var(--rt-action-bar-action-mobile-padding);gap:var(--rt-action-bar-action-mobile-gap)}}.rtui-action-bar-action-menu{display:flex;flex-direction:column;padding:var(--rt-action-bar-action-menu-padding);border-radius:var(--rt-action-bar-action-border-radius);background-color:var(--rt-action-bar-action-menu-background-color);box-shadow:var(--rt-action-bar-action-menu-box-shadow);color:var(--rt-action-bar-action-menu-color);gap:var(--rt-action-bar-action-menu-gap)}.rtui-action-bar-action-menu__action{display:flex;align-items:center;justify-content:center;padding:var(--rt-action-bar-action-menu-action-padding);border-radius:var(--rt-action-bar-action-menu-action-border-radius);cursor:pointer;font-size:var(--rt-action-bar-action-menu-action-font-size);font-weight:var(--rt-action-bar-action-menu-action-font-weight);gap:var(--rt-action-bar-action-menu-action-gap)}.rtui-action-bar-action-menu__action:hover{background-color:var(--rt-action-bar-action-menu-action-hover-background-color)}@media screen and (max-width:959px){.rtui-action-bar-action-menu,.rtui-action-bar-action-menu__action{padding:var(--rt-action-bar-action-menu-action-mobile-padding);gap:var(--rt-action-bar-action-menu-action-mobile-gap)}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: 
                 // material
                 MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: 
                 // rt-tools
                 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: RtPopoverDirective, selector: "[rtPopover]", inputs: ["xOffset", "yOffset", "trigger", "template", "isMouseHoverAllowed"] }, { kind: "pipe", type: EmptyToDashPipe, name: "emptyToDash" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtuiActionBarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiActionBarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'rtui-action-bar', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         NgTemplateOutlet,
@@ -4214,7 +4378,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
 
 class RtActionBarService {
     constructor() {
-        this.config = signal({ buttons: [] }, { ...(ngDevMode ? { debugName: "config" } : {}) });
+        this.config = signal({ buttons: [] }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "config" }] : /* istanbul ignore next */ []));
     }
     setActions(buttons) {
         this.config.set({ buttons });
@@ -4225,10 +4390,10 @@ class RtActionBarService {
     closeActionBar() {
         this.config.set({ ...this.config(), selected: 0, total: 0 });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtActionBarService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtActionBarService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtActionBarService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtActionBarService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtActionBarService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtActionBarService, decorators: [{
             type: Injectable
         }] });
 
@@ -4241,8 +4406,8 @@ class RtuiActionBarContainerComponent {
     closeBar() {
         this.#actionBarService.closeActionBar();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtuiActionBarContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: RtuiActionBarContainerComponent, isStandalone: true, selector: "rtui-action-bar-container", ngImport: i0, template: "@if (config()?.selected) {\n    <rtui-action-bar [@barState]=\"'opened'\" [config]=\"config()\" (closeAction)=\"closeBar()\" />\n}\n", styles: [":host{position:fixed;z-index:var(--rt-action-bar-container-z-index);display:flex;width:var(--rt-action-bar-container-width);align-items:center;justify-content:center;inset:var(--rt-action-bar-container-top) var(--rt-action-bar-container-right) var(--rt-action-bar-container-bottom) var(--rt-action-bar-container-left)}\n"], dependencies: [{ kind: "component", type: RtuiActionBarComponent, selector: "rtui-action-bar", inputs: ["config"], outputs: ["closeAction"] }], animations: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiActionBarContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: RtuiActionBarContainerComponent, isStandalone: true, selector: "rtui-action-bar-container", ngImport: i0, template: "@if (config()?.selected) {\n    <rtui-action-bar [@barState]=\"'opened'\" [config]=\"config()\" (closeAction)=\"closeBar()\" />\n}\n", styles: [":host{position:fixed;z-index:var(--rt-action-bar-container-z-index);display:flex;width:var(--rt-action-bar-container-width);align-items:center;justify-content:center;inset:var(--rt-action-bar-container-top) var(--rt-action-bar-container-right) var(--rt-action-bar-container-bottom) var(--rt-action-bar-container-left)}\n"], dependencies: [{ kind: "component", type: RtuiActionBarComponent, selector: "rtui-action-bar", inputs: ["config"], outputs: ["closeAction"] }], animations: [
             trigger('barState', [
                 state('opened', style({ transform: 'translateY(0)' })),
                 transition('void => *', [
@@ -4260,11 +4425,11 @@ class RtuiActionBarContainerComponent {
                     ])),
                 ]),
             ]),
-        ] }); }
+        ], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtuiActionBarContainerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiActionBarContainerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rtui-action-bar-container', imports: [RtuiActionBarComponent], animations: [
+            args: [{ selector: 'rtui-action-bar-container', imports: [RtuiActionBarComponent], changeDetection: ChangeDetectionStrategy.Eager, animations: [
                         trigger('barState', [
                             state('opened', style({ transform: 'translateY(0)' })),
                             transition('void => *', [
@@ -4315,7 +4480,8 @@ class RtuiSnackBarComponent {
         this.data = inject(MAT_SNACK_BAR_DATA);
         this.#snackBarRef = inject((MatSnackBarRef));
         this.#animationBuilder = inject(AnimationBuilder);
-        this.progressTplRef = viewChild('progressTpl', { ...(ngDevMode ? { debugName: "progressTplRef" } : {}) });
+        this.progressTplRef = viewChild('progressTpl', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "progressTplRef" }] : /* istanbul ignore next */ []));
         afterNextRender(() => {
             if (this.data.isProgressBarShown && this.data.duration) {
                 this.#startAnimation();
@@ -4352,10 +4518,10 @@ class RtuiSnackBarComponent {
     #resumeAnimation() {
         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: ["@charset \"UTF-8\";:host{display:flex;width:100%;height:100%;align-items:center;justify-content:space-between;--rt-snack-bar-content-gap: 1rem;--rt-snack-bar-icon-size: 2rem;--rt-snack-bar-icon-color: var(--rt-text-base-inverse);--rt-snack-bar-message-line-clamp: 5;--rt-snack-bar-action-padding: .5rem;--rt-snack-bar-action-margin: 0 .25rem;--rt-snack-bar-action-color: var(--rt-text-accent-info-soft);--rt-snack-bar-action-background-color: var(--rt-bg-accent-info-solid);--rt-snack-bar-progress-height: .5rem;--rt-snack-bar-close-button-color: var(--rt-text-base-inverse)}:host .rt-snack-bar__content{position:relative;display:flex;width:100%;height:100%;align-items:center;gap:var(--rt-snack-bar-content-gap)}:host .rt-snack-bar__content-icon-wrapper{margin-bottom:auto;line-height:.5}:host .rt-snack-bar__content-icon{width:var(--rt-snack-bar-icon-size);min-width:var(--rt-snack-bar-icon-size);height:var(--rt-snack-bar-icon-size);color:var(--rt-snack-bar-icon-color);font-size:var(--rt-snack-bar-icon-size)}:host .rt-snack-bar__content-message{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:var(--rt-snack-bar-message-line-clamp);text-overflow:ellipsis}:host .rt-snack-bar__action-button{position:relative;height:100%;padding:var(--rt-snack-bar-action-padding);margin:var(--rt-snack-bar-action-margin);color:var(--rt-snack-bar-action-color)}:host .rt-snack-bar__close-button{margin-bottom:auto}:host .rt-snack-bar__close-button-icon{color:var(--rt-snack-bar-close-button-color)}:host .rt-snack-bar__progress{position:absolute;right:0;bottom:0;left:0;width:100%;height:var(--rt-snack-bar-progress-height);background-color:var(--mat-button-filled-container-color);border-bottom-left-radius:var(--mat-snack-bar-container-shape);border-bottom-right-radius:var(--mat-snack-bar-container-shape)}\n"], dependencies: [{ kind: "component", type: MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }, { kind: "directive", type: BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: RtIconOutlinedDirective, selector: "mat-icon[rtIconOutlined]", inputs: ["rtIconOutlined"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiSnackBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: RtuiSnackBarComponent, isStandalone: true, selector: "rtui-snack-bar", host: { listeners: { "mouseover": "onMouseOver()", "mouseout": "onMouseOut()" } }, viewQueries: [{ propertyName: "progressTplRef", first: true, predicate: ["progressTpl"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-container rtBlock=\"rt-snack-bar\">\n    <div rtElem=\"content\">\n        @if (data.icon) {\n            <div rtElem=\"content-icon-wrapper\">\n                <mat-icon rtElem=\"content-icon\" rtIconOutlined>{{ data.icon }}</mat-icon>\n            </div>\n        }\n\n        <div rtElem=\"content-message\">{{ data.message }}</div>\n    </div>\n\n    @if (data.action) {\n        <button rtElem=\"action-button\" mat-button (click)=\"dismiss()\">{{ data.action }}</button>\n    }\n\n    <button rtElem=\"close-button\" color=\"accent\" mat-icon-button type=\"button\" (click)=\"close()\">\n        <mat-icon rtElem=\"close-button-icon\">close</mat-icon>\n    </button>\n\n    @if (data.isProgressBarShown && data.duration) {\n        <div #progressTpl rtElem=\"progress\"></div>\n    }\n</ng-container>\n", styles: ["@charset \"UTF-8\";:host{display:flex;width:100%;height:100%;align-items:center;justify-content:space-between;--rt-snack-bar-content-gap: 1rem;--rt-snack-bar-icon-size: 2rem;--rt-snack-bar-icon-color: var(--rt-text-base-inverse);--rt-snack-bar-message-line-clamp: 5;--rt-snack-bar-action-padding: .5rem;--rt-snack-bar-action-margin: 0 .25rem;--rt-snack-bar-action-color: var(--rt-text-accent-info-soft);--rt-snack-bar-action-background-color: var(--rt-bg-accent-info-solid);--rt-snack-bar-progress-height: .5rem;--rt-snack-bar-close-button-color: var(--rt-text-base-inverse)}:host .rt-snack-bar__content{position:relative;display:flex;width:100%;height:100%;align-items:center;gap:var(--rt-snack-bar-content-gap)}:host .rt-snack-bar__content-icon-wrapper{margin-bottom:auto;line-height:.5}:host .rt-snack-bar__content-icon{width:var(--rt-snack-bar-icon-size);min-width:var(--rt-snack-bar-icon-size);height:var(--rt-snack-bar-icon-size);color:var(--rt-snack-bar-icon-color);font-size:var(--rt-snack-bar-icon-size)}:host .rt-snack-bar__content-message{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:var(--rt-snack-bar-message-line-clamp);text-overflow:ellipsis}:host .rt-snack-bar__action-button{position:relative;height:100%;padding:var(--rt-snack-bar-action-padding);margin:var(--rt-snack-bar-action-margin);color:var(--rt-snack-bar-action-color)}:host .rt-snack-bar__close-button{margin-bottom:auto}:host .rt-snack-bar__close-button-icon{color:var(--rt-snack-bar-close-button-color)}:host .rt-snack-bar__progress{position:absolute;right:0;bottom:0;left:0;width:100%;height:var(--rt-snack-bar-progress-height);background-color:var(--mat-button-filled-container-color);border-bottom-left-radius:var(--mat-snack-bar-container-shape);border-bottom-right-radius:var(--mat-snack-bar-container-shape)}\n"], dependencies: [{ kind: "component", type: MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }, { kind: "directive", type: BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: RtIconOutlinedDirective, selector: "mat-icon[rtIconOutlined]", inputs: ["rtIconOutlined"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtuiSnackBarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiSnackBarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'rtui-snack-bar', changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatButton, MatIconButton, MatIcon, ElemDirective, BlockDirective, RtIconOutlinedDirective], template: "<ng-container rtBlock=\"rt-snack-bar\">\n    <div rtElem=\"content\">\n        @if (data.icon) {\n            <div rtElem=\"content-icon-wrapper\">\n                <mat-icon rtElem=\"content-icon\" rtIconOutlined>{{ data.icon }}</mat-icon>\n            </div>\n        }\n\n        <div rtElem=\"content-message\">{{ data.message }}</div>\n    </div>\n\n    @if (data.action) {\n        <button rtElem=\"action-button\" mat-button (click)=\"dismiss()\">{{ data.action }}</button>\n    }\n\n    <button rtElem=\"close-button\" color=\"accent\" mat-icon-button type=\"button\" (click)=\"close()\">\n        <mat-icon rtElem=\"close-button-icon\">close</mat-icon>\n    </button>\n\n    @if (data.isProgressBarShown && data.duration) {\n        <div #progressTpl rtElem=\"progress\"></div>\n    }\n</ng-container>\n", styles: ["@charset \"UTF-8\";:host{display:flex;width:100%;height:100%;align-items:center;justify-content:space-between;--rt-snack-bar-content-gap: 1rem;--rt-snack-bar-icon-size: 2rem;--rt-snack-bar-icon-color: var(--rt-text-base-inverse);--rt-snack-bar-message-line-clamp: 5;--rt-snack-bar-action-padding: .5rem;--rt-snack-bar-action-margin: 0 .25rem;--rt-snack-bar-action-color: var(--rt-text-accent-info-soft);--rt-snack-bar-action-background-color: var(--rt-bg-accent-info-solid);--rt-snack-bar-progress-height: .5rem;--rt-snack-bar-close-button-color: var(--rt-text-base-inverse)}:host .rt-snack-bar__content{position:relative;display:flex;width:100%;height:100%;align-items:center;gap:var(--rt-snack-bar-content-gap)}:host .rt-snack-bar__content-icon-wrapper{margin-bottom:auto;line-height:.5}:host .rt-snack-bar__content-icon{width:var(--rt-snack-bar-icon-size);min-width:var(--rt-snack-bar-icon-size);height:var(--rt-snack-bar-icon-size);color:var(--rt-snack-bar-icon-color);font-size:var(--rt-snack-bar-icon-size)}:host .rt-snack-bar__content-message{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:var(--rt-snack-bar-message-line-clamp);text-overflow:ellipsis}:host .rt-snack-bar__action-button{position:relative;height:100%;padding:var(--rt-snack-bar-action-padding);margin:var(--rt-snack-bar-action-margin);color:var(--rt-snack-bar-action-color)}:host .rt-snack-bar__close-button{margin-bottom:auto}:host .rt-snack-bar__close-button-icon{color:var(--rt-snack-bar-close-button-color)}:host .rt-snack-bar__progress{position:absolute;right:0;bottom:0;left:0;width:100%;height:var(--rt-snack-bar-progress-height);background-color:var(--mat-button-filled-container-color);border-bottom-left-radius:var(--mat-snack-bar-container-shape);border-bottom-right-radius:var(--mat-snack-bar-container-shape)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { progressTplRef: [{ type: i0.ViewChild, args: ['progressTpl', { isSignal: true }] }], onMouseOver: [{
@@ -4412,10 +4578,10 @@ class RtSnackBarService {
     dismiss() {
         this.#snackBar.dismiss();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtSnackBarService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtSnackBarService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtSnackBarService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtSnackBarService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtSnackBarService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtSnackBarService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -4499,14 +4665,21 @@ function getColorBasedOnBackground(backgroundColor) {
 
 class RtuiInfoBadgeComponent {
     constructor() {
-        this.size = input.required({ ...(ngDevMode ? { debugName: "size" } : {}) });
-        this.text = input.required({ ...(ngDevMode ? { debugName: "text" } : {}) });
-        this.glyph = input('', { ...(ngDevMode ? { debugName: "glyph" } : {}) });
-        this.iconSide = input(POSITION_ENUM.RIGHT, { ...(ngDevMode ? { debugName: "iconSide" } : {}) });
-        this.isFontBold = input(false, { ...(ngDevMode ? { debugName: "isFontBold" } : {}) });
-        this.isMobile = input.required({ ...(ngDevMode ? { debugName: "isMobile" } : {}), transform: booleanAttribute });
-        this.isTitleCollapsed = signal(false, { ...(ngDevMode ? { debugName: "isTitleCollapsed" } : {}) });
-        this.contentRef = viewChild('content', { ...(ngDevMode ? { debugName: "contentRef" } : {}) });
+        this.size = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+        this.text = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []));
+        this.glyph = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "glyph" }] : /* istanbul ignore next */ []));
+        this.iconSide = input(POSITION_ENUM.RIGHT, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "iconSide" }] : /* istanbul ignore next */ []));
+        this.isFontBold = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isFontBold" }] : /* istanbul ignore next */ []));
+        this.isMobile = input.required({ ...(ngDevMode ? { debugName: "isMobile" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.isTitleCollapsed = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isTitleCollapsed" }] : /* istanbul ignore next */ []));
+        this.contentRef = viewChild('content', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "contentRef" }] : /* istanbul ignore next */ []));
     }
     get badgeClass() {
         return {
@@ -4535,10 +4708,10 @@ class RtuiInfoBadgeComponent {
             }
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtuiInfoBadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: RtuiInfoBadgeComponent, isStandalone: true, selector: "rtui-info-badge", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: true, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: true, transformFunction: null }, glyph: { classPropertyName: "glyph", publicName: "glyph", isSignal: true, isRequired: false, transformFunction: null }, iconSide: { classPropertyName: "iconSide", publicName: "iconSide", isSignal: true, isRequired: false, transformFunction: null }, isFontBold: { classPropertyName: "isFontBold", publicName: "isFontBold", isSignal: true, isRequired: false, transformFunction: null }, isMobile: { classPropertyName: "isMobile", publicName: "isMobile", isSignal: true, isRequired: true, transformFunction: null } }, viewQueries: [{ propertyName: "contentRef", first: true, predicate: ["content"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n    rtBlock=\"c-info-badge\"\n    matTooltipClass=\"custom-tooltip\"\n    matTooltipPosition=\"above\"\n    [matTooltip]=\"text()\"\n    [ngClass]=\"badgeClass\"\n    [matTooltipDisabled]=\"!isTitleCollapsed() || isMobile()\">\n    <div rtElem=\"content\" #content>{{ text() }}</div>\n    @if (glyph()) {\n        <mat-icon [ngStyle]=\"iconStyles\">{{ glyph() }}</mat-icon>\n    }\n</div>\n", styles: [":host{display:block;max-width:fit-content;border-radius:var(--rt-radius-full);background-color:var(--rt-info-badge-background-color, #005cbb);color:var(--rt-info-badge-color, var(--rt-text-static-light));line-height:normal}:host .c-info-badge{display:flex;box-sizing:border-box;align-items:center;justify-content:center;gap:var(--rt-spacing-2);line-height:normal}:host .c-info-badge__content{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .size-l{padding:var(--rt-spacing-4) var(--rt-spacing-12);font-size:var(--rt-font-size-md)}:host .size-l .mat-icon{font-size:var(--rt-font-size-xl)}:host .size-m{padding:var(--rt-spacing-4) var(--rt-spacing-12);font-size:var(--rt-font-size-sm)}:host .size-m .mat-icon{font-size:var(--rt-font-size-md)}:host .size-s{padding:var(--rt-spacing-4) var(--rt-spacing-12);font-size:var(--rt-font-size-xs);letter-spacing:.025rem}:host .size-s .mat-icon{font-size:var(--rt-font-size-xs)}:host .mat-icon{width:unset;height:unset}:host .bold{font-weight:var(--rt-font-weight-bold)}\n"], dependencies: [{ kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiInfoBadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: RtuiInfoBadgeComponent, isStandalone: true, selector: "rtui-info-badge", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: true, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: true, transformFunction: null }, glyph: { classPropertyName: "glyph", publicName: "glyph", isSignal: true, isRequired: false, transformFunction: null }, iconSide: { classPropertyName: "iconSide", publicName: "iconSide", isSignal: true, isRequired: false, transformFunction: null }, isFontBold: { classPropertyName: "isFontBold", publicName: "isFontBold", isSignal: true, isRequired: false, transformFunction: null }, isMobile: { classPropertyName: "isMobile", publicName: "isMobile", isSignal: true, isRequired: true, transformFunction: null } }, viewQueries: [{ propertyName: "contentRef", first: true, predicate: ["content"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n    rtBlock=\"c-info-badge\"\n    matTooltipClass=\"custom-tooltip\"\n    matTooltipPosition=\"above\"\n    [matTooltip]=\"text()\"\n    [ngClass]=\"badgeClass\"\n    [matTooltipDisabled]=\"!isTitleCollapsed() || isMobile()\">\n    <div rtElem=\"content\" #content>{{ text() }}</div>\n    @if (glyph()) {\n        <mat-icon [ngStyle]=\"iconStyles\">{{ glyph() }}</mat-icon>\n    }\n</div>\n", styles: [":host{display:block;max-width:fit-content;border-radius:var(--rt-radius-full);background-color:var(--rt-info-badge-background-color, #005cbb);color:var(--rt-info-badge-color, var(--rt-text-static-light));line-height:normal}:host .c-info-badge{display:flex;box-sizing:border-box;align-items:center;justify-content:center;gap:var(--rt-spacing-2);line-height:normal}:host .c-info-badge__content{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .size-l{padding:var(--rt-spacing-4) var(--rt-spacing-12);font-size:var(--rt-font-size-md)}:host .size-l .mat-icon{font-size:var(--rt-font-size-xl)}:host .size-m{padding:var(--rt-spacing-4) var(--rt-spacing-12);font-size:var(--rt-font-size-sm)}:host .size-m .mat-icon{font-size:var(--rt-font-size-md)}:host .size-s{padding:var(--rt-spacing-4) var(--rt-spacing-12);font-size:var(--rt-font-size-xs);letter-spacing:.025rem}:host .size-s .mat-icon{font-size:var(--rt-font-size-xs)}:host .mat-icon{width:unset;height:unset}:host .bold{font-weight:var(--rt-font-weight-bold)}\n"], dependencies: [{ kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtuiInfoBadgeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiInfoBadgeComponent, decorators: [{
             type: Component,
             args: [{ selector: 'rtui-info-badge', changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatTooltip, NgClass, MatIcon, NgStyle, BlockDirective, ElemDirective], template: "<div\n    rtBlock=\"c-info-badge\"\n    matTooltipClass=\"custom-tooltip\"\n    matTooltipPosition=\"above\"\n    [matTooltip]=\"text()\"\n    [ngClass]=\"badgeClass\"\n    [matTooltipDisabled]=\"!isTitleCollapsed() || isMobile()\">\n    <div rtElem=\"content\" #content>{{ text() }}</div>\n    @if (glyph()) {\n        <mat-icon [ngStyle]=\"iconStyles\">{{ glyph() }}</mat-icon>\n    }\n</div>\n", styles: [":host{display:block;max-width:fit-content;border-radius:var(--rt-radius-full);background-color:var(--rt-info-badge-background-color, #005cbb);color:var(--rt-info-badge-color, var(--rt-text-static-light));line-height:normal}:host .c-info-badge{display:flex;box-sizing:border-box;align-items:center;justify-content:center;gap:var(--rt-spacing-2);line-height:normal}:host .c-info-badge__content{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .size-l{padding:var(--rt-spacing-4) var(--rt-spacing-12);font-size:var(--rt-font-size-md)}:host .size-l .mat-icon{font-size:var(--rt-font-size-xl)}:host .size-m{padding:var(--rt-spacing-4) var(--rt-spacing-12);font-size:var(--rt-font-size-sm)}:host .size-m .mat-icon{font-size:var(--rt-font-size-md)}:host .size-s{padding:var(--rt-spacing-4) var(--rt-spacing-12);font-size:var(--rt-font-size-xs);letter-spacing:.025rem}:host .size-s .mat-icon{font-size:var(--rt-font-size-xs)}:host .mat-icon{width:unset;height:unset}:host .bold{font-weight:var(--rt-font-weight-bold)}\n"] }]
         }], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: true }] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: true }] }], glyph: [{ type: i0.Input, args: [{ isSignal: true, alias: "glyph", required: false }] }], iconSide: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconSide", required: false }] }], isFontBold: [{ type: i0.Input, args: [{ isSignal: true, alias: "isFontBold", required: false }] }], isMobile: [{ type: i0.Input, args: [{ isSignal: true, alias: "isMobile", required: true }] }], contentRef: [{ type: i0.ViewChild, args: ['content', { isSignal: true }] }] } });
@@ -4554,9 +4727,11 @@ var INFO_BADGE_TYPE_ENUM;
 
 class RtuiFileUploadComponent {
     constructor() {
-        this.isIconOutlined = input(true, { ...(ngDevMode ? { debugName: "isIconOutlined" } : {}) });
+        this.isIconOutlined = input(true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isIconOutlined" }] : /* istanbul ignore next */ []));
         this.uploadFile = output();
-        this.isDragOver = signal(false, { ...(ngDevMode ? { debugName: "isDragOver" } : {}) });
+        this.isDragOver = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isDragOver" }] : /* istanbul ignore next */ []));
     }
     onDragOver(event) {
         event?.preventDefault();
@@ -4579,12 +4754,12 @@ class RtuiFileUploadComponent {
             this.uploadFile.emit(input.files[0]);
         }
     }
-    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: ["@charset \"UTF-8\";:host{--rt-file-upload-host-width: 100%;--rt-file-upload-host-max-width: 20rem;--rt-file-upload-host-height: 100%;--rt-file-upload-host-max-height: 20rem;--rt-file-upload-host-display: flex;--rt-file-upload-host-flex-direction: column;--rt-file-upload-host-justify-content: center;--rt-file-upload-host-align-items: center;--rt-file-upload-host-gap: 1rem;--rt-file-upload-host-padding: 1rem;--rt-file-upload-host-border: 2px dashed var(--rt-border-neutral-default);--rt-file-upload-host-border-radius: 1rem;--rt-file-upload-host-dragged-border-color: var(--mat-button-text-label-text-color);--rt-file-upload-icon-size: 2rem;--rt-file-upload-icon-color: var(--rt-text-base-strong);--rt-file-upload-title-font-size: 1rem;--rt-file-upload-title-color: var(--rt-text-base-primary);display:var(--rt-file-upload-host-display);width:var(--rt-file-upload-host-width);max-width:var(--rt-file-upload-host-max-width);height:var(--rt-file-upload-host-height);max-height:var(--rt-file-upload-host-max-height);flex-direction:var(--rt-file-upload-host-flex-direction);align-items:var(--rt-file-upload-host-align-items);justify-content:var(--rt-file-upload-host-justify-content);padding:var(--rt-file-upload-host-padding);border:var(--rt-file-upload-host-border);border-radius:var(--rt-file-upload-host-border-radius);gap:var(--rt-file-upload-host-gap);transition:border-color .3s ease-in-out}:host.--dragged{border-color:var(--rt-file-upload-host-dragged-border-color)}:host .file-upload__icon{width:var(--rt-file-upload-icon-size);height:var(--rt-file-upload-icon-size);color:var(--rt-file-upload-icon-color);font-size:var(--rt-file-upload-icon-size)}:host .file-upload__title{color:var(--rt-file-upload-title-color);font-size:var(--rt-file-upload-title-font-size)}\n"], dependencies: [{ kind: "component", type: MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: 
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiFileUploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.5", type: RtuiFileUploadComponent, isStandalone: true, selector: "rtui-file-upload", inputs: { isIconOutlined: { classPropertyName: "isIconOutlined", publicName: "isIconOutlined", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { uploadFile: "uploadFile" }, host: { listeners: { "dragover": "onDragOver($event)", "dragleave": "onDragLeave($event)", "drop": "onDrop($event)" }, properties: { "class.--dragged": "isDragOver()" } }, ngImport: i0, template: "<ng-container rtBlock=\"file-upload\">\n    <mat-icon rtElem=\"icon\" [rtIconOutlined]=\"isIconOutlined()\">backup</mat-icon>\n\n    <div rtElem=\"title\">Drag and drop your file here or</div>\n\n    <input #uploadInput hidden type=\"file\" (change)=\"onFileSelect($event)\" />\n\n    <button rtBlock=\"c-button\" mat-button color=\"accent\" (click)=\"uploadInput.click()\">Choose file</button>\n</ng-container>\n", styles: ["@charset \"UTF-8\";:host{--rt-file-upload-host-width: 100%;--rt-file-upload-host-max-width: 20rem;--rt-file-upload-host-height: 100%;--rt-file-upload-host-max-height: 20rem;--rt-file-upload-host-display: flex;--rt-file-upload-host-flex-direction: column;--rt-file-upload-host-justify-content: center;--rt-file-upload-host-align-items: center;--rt-file-upload-host-gap: 1rem;--rt-file-upload-host-padding: 1rem;--rt-file-upload-host-border: 2px dashed var(--rt-border-neutral-default);--rt-file-upload-host-border-radius: 1rem;--rt-file-upload-host-dragged-border-color: var(--mat-button-text-label-text-color);--rt-file-upload-icon-size: 2rem;--rt-file-upload-icon-color: var(--rt-text-base-strong);--rt-file-upload-title-font-size: 1rem;--rt-file-upload-title-color: var(--rt-text-base-primary);display:var(--rt-file-upload-host-display);width:var(--rt-file-upload-host-width);max-width:var(--rt-file-upload-host-max-width);height:var(--rt-file-upload-host-height);max-height:var(--rt-file-upload-host-max-height);flex-direction:var(--rt-file-upload-host-flex-direction);align-items:var(--rt-file-upload-host-align-items);justify-content:var(--rt-file-upload-host-justify-content);padding:var(--rt-file-upload-host-padding);border:var(--rt-file-upload-host-border);border-radius:var(--rt-file-upload-host-border-radius);gap:var(--rt-file-upload-host-gap);transition:border-color .3s ease-in-out}:host.--dragged{border-color:var(--rt-file-upload-host-dragged-border-color)}:host .file-upload__icon{width:var(--rt-file-upload-icon-size);height:var(--rt-file-upload-icon-size);color:var(--rt-file-upload-icon-color);font-size:var(--rt-file-upload-icon-size)}:host .file-upload__title{color:var(--rt-file-upload-title-color);font-size:var(--rt-file-upload-title-font-size)}\n"], dependencies: [{ kind: "component", type: MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: 
                 // 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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtuiFileUploadComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiFileUploadComponent, decorators: [{
             type: Component,
             args: [{ selector: 'rtui-file-upload', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         MatButton,
@@ -4610,26 +4785,35 @@ class RtuiImageUploadComponent {
             ['jpeg']: 'jpeg',
             ['webp']: 'webp',
         };
-        this.#originalMimeType = signal(null, { ...(ngDevMode ? { debugName: "#originalMimeType" } : {}) });
+        this.#originalMimeType = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#originalMimeType" }] : /* istanbul ignore next */ []));
         this.imageFormat = computed(() => {
             const type = this.#originalMimeType();
             return this.#formats[type?.toLowerCase() || ''] || 'png';
-        }, { ...(ngDevMode ? { debugName: "imageFormat" } : {}) });
-        this.imageUrl = model.required({ ...(ngDevMode ? { debugName: "imageUrl" } : {}) });
-        this.isMobile = input.required({ ...(ngDevMode ? { debugName: "isMobile" } : {}), transform: booleanAttribute });
-        this.fileName = input('image', { ...(ngDevMode ? { debugName: "fileName" } : {}), transform: transformStringInput });
-        this.isActive = input(true, { ...(ngDevMode ? { debugName: "isActive" } : {}), transform: booleanAttribute });
-        this.isSaveButtonShown = input(true, { ...(ngDevMode ? { debugName: "isSaveButtonShown" } : {}), transform: booleanAttribute });
-        this.isDownloadButtonEnabled = input(true, { ...(ngDevMode ? { debugName: "isDownloadButtonEnabled" } : {}), transform: booleanAttribute });
-        this.isTooltipDisabled = input(false, { ...(ngDevMode ? { debugName: "isTooltipDisabled" } : {}), transform: booleanAttribute });
-        this.isActionsShown = input(true, { ...(ngDevMode ? { debugName: "isActionsShown" } : {}), transform: booleanAttribute });
-        this.loading = input(false, { ...(ngDevMode ? { debugName: "loading" } : {}), transform: booleanAttribute });
-        this.tooltip = input('', { ...(ngDevMode ? { debugName: "tooltip" } : {}) });
-        this.tooltipPosition = input('above', { ...(ngDevMode ? { debugName: "tooltipPosition" } : {}) });
-        this.imageQuality = input(92, { ...(ngDevMode ? { debugName: "imageQuality" } : {}) });
-        this.originalImage = signal(undefined, { ...(ngDevMode ? { debugName: "originalImage" } : {}) });
-        this.croppedImage = signal(null, { ...(ngDevMode ? { debugName: "croppedImage" } : {}) });
-        this.tempImage = signal(null, { ...(ngDevMode ? { debugName: "tempImage" } : {}) });
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "imageFormat" }] : /* istanbul ignore next */ []));
+        this.imageUrl = model.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "imageUrl" }] : /* istanbul ignore next */ []));
+        this.isMobile = input.required({ ...(ngDevMode ? { debugName: "isMobile" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.fileName = input('image', { ...(ngDevMode ? { debugName: "fileName" } : /* istanbul ignore next */ {}), transform: transformStringInput });
+        this.isActive = input(true, { ...(ngDevMode ? { debugName: "isActive" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.isSaveButtonShown = input(true, { ...(ngDevMode ? { debugName: "isSaveButtonShown" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.isDownloadButtonEnabled = input(true, { ...(ngDevMode ? { debugName: "isDownloadButtonEnabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.isTooltipDisabled = input(false, { ...(ngDevMode ? { debugName: "isTooltipDisabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.isActionsShown = input(true, { ...(ngDevMode ? { debugName: "isActionsShown" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.loading = input(false, { ...(ngDevMode ? { debugName: "loading" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.tooltip = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "tooltip" }] : /* istanbul ignore next */ []));
+        this.tooltipPosition = input('above', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "tooltipPosition" }] : /* istanbul ignore next */ []));
+        this.imageQuality = input(92, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "imageQuality" }] : /* istanbul ignore next */ []));
+        this.originalImage = signal(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "originalImage" }] : /* istanbul ignore next */ []));
+        this.croppedImage = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "croppedImage" }] : /* istanbul ignore next */ []));
+        this.tempImage = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "tempImage" }] : /* istanbul ignore next */ []));
         this.imageChanged = output();
         this.save = output();
     }
@@ -4684,8 +4868,8 @@ class RtuiImageUploadComponent {
         }
         this.save.emit();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtuiImageUploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: RtuiImageUploadComponent, isStandalone: true, selector: "rtui-image-upload", inputs: { imageUrl: { classPropertyName: "imageUrl", publicName: "imageUrl", isSignal: true, isRequired: true, transformFunction: null }, isMobile: { classPropertyName: "isMobile", publicName: "isMobile", isSignal: true, isRequired: true, transformFunction: null }, fileName: { classPropertyName: "fileName", publicName: "fileName", isSignal: true, isRequired: false, transformFunction: null }, isActive: { classPropertyName: "isActive", publicName: "isActive", isSignal: true, isRequired: false, transformFunction: null }, isSaveButtonShown: { classPropertyName: "isSaveButtonShown", publicName: "isSaveButtonShown", isSignal: true, isRequired: false, transformFunction: null }, isDownloadButtonEnabled: { classPropertyName: "isDownloadButtonEnabled", publicName: "isDownloadButtonEnabled", isSignal: true, isRequired: false, transformFunction: null }, isTooltipDisabled: { classPropertyName: "isTooltipDisabled", publicName: "isTooltipDisabled", isSignal: true, isRequired: false, transformFunction: null }, isActionsShown: { classPropertyName: "isActionsShown", publicName: "isActionsShown", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null }, tooltipPosition: { classPropertyName: "tooltipPosition", publicName: "tooltipPosition", isSignal: true, isRequired: false, transformFunction: null }, imageQuality: { classPropertyName: "imageQuality", publicName: "imageQuality", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { imageUrl: "imageUrlChange", imageChanged: "imageChanged", save: "save" }, ngImport: i0, template: "@if (loading()) {\n    <rtui-spinner />\n} @else if (originalImage()) {\n    <div rtBlock=\"rtui-image-cropper\">\n        <image-cropper\n            alignImage=\"center\"\n            [format]=\"imageFormat()\"\n            [imageQuality]=\"imageQuality()\"\n            [allowMoveImage]=\"true\"\n            [maintainAspectRatio]=\"false\"\n            [imageFile]=\"originalImage()\"\n            (imageCropped)=\"onImageCropped($event)\" />\n\n        @if (isActionsShown()) {\n            <div rtElem=\"actions\">\n                <button rtBlock=\"c-button\" mat-button color=\"accent\" (click)=\"onCancel()\">Cancel</button>\n                <button mat-flat-button (click)=\"onApply()\">Apply</button>\n            </div>\n        }\n    </div>\n} @else {\n    <input #uploadInput hidden type=\"file\" accept=\".jpg,.jpeg,.png,.webp\" (change)=\"onFileSelect($event)\" />\n\n    @if (imageUrl()) {\n        <div rtBlock=\"rtui-image-container\">\n            <img\n                rtElem=\"image\"\n                role=\"button\"\n                tabindex=\"0\"\n                alt=\"img\"\n                matTooltipClass=\"custom-tooltip\"\n                [matTooltip]=\"tooltip()\"\n                [matTooltipPosition]=\"tooltipPosition()\"\n                [matTooltipDisabled]=\"isMobile() || !tooltip() || !isActive() || isTooltipDisabled()\"\n                [rtMod]=\"{ active: isActive() }\"\n                [src]=\"imageUrl()\"\n                (click)=\"uploadInput.click()\"\n                (keydown.enter)=\"uploadInput.click()\" />\n\n            @if (isSaveButtonShown()) {\n                <button\n                    rtElem=\"action\"\n                    mat-icon-button\n                    aria-label=\"Download image\"\n                    matTooltip=\"Download image\"\n                    matTooltipPosition=\"above\"\n                    [matTooltipDisabled]=\"isMobile()\"\n                    (click)=\"onDownloadImage()\">\n                    <mat-icon rtIconOutlined>download</mat-icon>\n                </button>\n            }\n        </div>\n    } @else {\n        <rtui-file-upload (uploadFile)=\"onFileUpload($event)\" />\n    }\n}\n", styles: ["@charset \"UTF-8\";:host{--rt-image-upload-host-width: 100%;--rt-image-upload-host-min-width: 100%;--rt-image-upload-host-max-width: 100%;--rt-image-upload-host-height: 100%;--rt-image-upload-host-min-height: 15rem;--rt-image-upload-host-max-height: 100%;--rt-image-upload-host-display: flex;--rt-image-upload-host-justify-content: center;--rt-image-upload-host-align-items: center;--rt-image-upload-image-cropper-padding: .25rem;--rt-image-upload-image-cropper-actions-display: flex;--rt-image-upload-image-cropper-actions-justify-content: flex-end;--rt-image-upload-image-cropper-actions-gap: .5rem;--rt-image-upload-image-cropper-actions-margin-top: .5rem;--rt-image-upload-image-container-position: relative;--rt-image-upload-image-container-padding: .5rem;--rt-image-upload-image-container-image-position: relative;--rt-image-upload-image-container-image-height: 100%;--rt-image-upload-image-container-image-max-height: 15rem;--rt-image-upload-image-container-image-object-fit: contain;display:var(--rt-image-upload-host-display);width:var(--rt-image-upload-host-width);min-width:var(--rt-image-upload-host-min-height);max-width:var(--rt-image-upload-host-max-width);height:var(--rt-image-upload-host-height);min-height:var(--rt-image-upload-host-min-height);max-height:var(--rt-image-upload-host-max-height);align-items:var(--rt-image-upload-host-align-items);justify-content:var(--rt-image-upload-host-justify-content)}:host .rtui-image-cropper{padding:var(--rt-image-upload-image-cropper-padding)}:host .rtui-image-cropper__actions{display:var(--rt-image-upload-image-cropper-actions-display);justify-content:var(--rt-image-upload-image-cropper-actions-justify-content);margin-top:var(--rt-image-upload-image-cropper-actions-justify-margin-top);gap:var(--rt-image-upload-image-cropper-actions-gap)}:host .rtui-image-container{position:var(--rt-image-upload-image-container-position);padding:var(--rt-image-upload-image-container-padding)}:host .rtui-image-container__image{position:var(--rt-image-upload-image-container-image-position);height:var(--rt-image-upload-image-container-image-height);max-height:var(--rt-image-upload-image-container-image-max-height);object-fit:var(--rt-image-upload-image-container-image-object-fit);pointer-events:none}:host .rtui-image-container__image--active{cursor:pointer;pointer-events:initial}:host .rtui-image-container__image--active:hover{opacity:.6}:host .rtui-image-container__action{position:absolute;z-index:999;top:0;right:0;backdrop-filter:blur(1.25rem)}\n"], dependencies: [{ kind: "component", type: 
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiImageUploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: RtuiImageUploadComponent, isStandalone: true, selector: "rtui-image-upload", inputs: { imageUrl: { classPropertyName: "imageUrl", publicName: "imageUrl", isSignal: true, isRequired: true, transformFunction: null }, isMobile: { classPropertyName: "isMobile", publicName: "isMobile", isSignal: true, isRequired: true, transformFunction: null }, fileName: { classPropertyName: "fileName", publicName: "fileName", isSignal: true, isRequired: false, transformFunction: null }, isActive: { classPropertyName: "isActive", publicName: "isActive", isSignal: true, isRequired: false, transformFunction: null }, isSaveButtonShown: { classPropertyName: "isSaveButtonShown", publicName: "isSaveButtonShown", isSignal: true, isRequired: false, transformFunction: null }, isDownloadButtonEnabled: { classPropertyName: "isDownloadButtonEnabled", publicName: "isDownloadButtonEnabled", isSignal: true, isRequired: false, transformFunction: null }, isTooltipDisabled: { classPropertyName: "isTooltipDisabled", publicName: "isTooltipDisabled", isSignal: true, isRequired: false, transformFunction: null }, isActionsShown: { classPropertyName: "isActionsShown", publicName: "isActionsShown", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null }, tooltipPosition: { classPropertyName: "tooltipPosition", publicName: "tooltipPosition", isSignal: true, isRequired: false, transformFunction: null }, imageQuality: { classPropertyName: "imageQuality", publicName: "imageQuality", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { imageUrl: "imageUrlChange", imageChanged: "imageChanged", save: "save" }, ngImport: i0, template: "@if (loading()) {\n    <rtui-spinner />\n} @else if (originalImage()) {\n    <div rtBlock=\"rtui-image-cropper\">\n        <image-cropper\n            alignImage=\"center\"\n            [format]=\"imageFormat()\"\n            [imageQuality]=\"imageQuality()\"\n            [allowMoveImage]=\"true\"\n            [maintainAspectRatio]=\"false\"\n            [imageFile]=\"originalImage()\"\n            (imageCropped)=\"onImageCropped($event)\" />\n\n        @if (isActionsShown()) {\n            <div rtElem=\"actions\">\n                <button rtBlock=\"c-button\" mat-button color=\"accent\" (click)=\"onCancel()\">Cancel</button>\n                <button mat-flat-button (click)=\"onApply()\">Apply</button>\n            </div>\n        }\n    </div>\n} @else {\n    <input #uploadInput hidden type=\"file\" accept=\".jpg,.jpeg,.png,.webp\" (change)=\"onFileSelect($event)\" />\n\n    @if (imageUrl()) {\n        <div rtBlock=\"rtui-image-container\">\n            <img\n                rtElem=\"image\"\n                role=\"button\"\n                tabindex=\"0\"\n                alt=\"img\"\n                matTooltipClass=\"custom-tooltip\"\n                [matTooltip]=\"tooltip()\"\n                [matTooltipPosition]=\"tooltipPosition()\"\n                [matTooltipDisabled]=\"isMobile() || !tooltip() || !isActive() || isTooltipDisabled()\"\n                [rtMod]=\"{ active: isActive() }\"\n                [src]=\"imageUrl()\"\n                (click)=\"uploadInput.click()\"\n                (keydown.enter)=\"uploadInput.click()\" />\n\n            @if (isSaveButtonShown()) {\n                <button\n                    rtElem=\"action\"\n                    mat-icon-button\n                    aria-label=\"Download image\"\n                    matTooltip=\"Download image\"\n                    matTooltipPosition=\"above\"\n                    [matTooltipDisabled]=\"isMobile()\"\n                    (click)=\"onDownloadImage()\">\n                    <mat-icon rtIconOutlined>download</mat-icon>\n                </button>\n            }\n        </div>\n    } @else {\n        <rtui-file-upload (uploadFile)=\"onFileUpload($event)\" />\n    }\n}\n", styles: ["@charset \"UTF-8\";:host{--rt-image-upload-host-width: 100%;--rt-image-upload-host-min-width: 100%;--rt-image-upload-host-max-width: 100%;--rt-image-upload-host-height: 100%;--rt-image-upload-host-min-height: 15rem;--rt-image-upload-host-max-height: 100%;--rt-image-upload-host-display: flex;--rt-image-upload-host-justify-content: center;--rt-image-upload-host-align-items: center;--rt-image-upload-image-cropper-padding: .25rem;--rt-image-upload-image-cropper-actions-display: flex;--rt-image-upload-image-cropper-actions-justify-content: flex-end;--rt-image-upload-image-cropper-actions-gap: .5rem;--rt-image-upload-image-cropper-actions-margin-top: .5rem;--rt-image-upload-image-container-position: relative;--rt-image-upload-image-container-padding: .5rem;--rt-image-upload-image-container-image-position: relative;--rt-image-upload-image-container-image-height: 100%;--rt-image-upload-image-container-image-max-height: 15rem;--rt-image-upload-image-container-image-object-fit: contain;display:var(--rt-image-upload-host-display);width:var(--rt-image-upload-host-width);min-width:var(--rt-image-upload-host-min-height);max-width:var(--rt-image-upload-host-max-width);height:var(--rt-image-upload-host-height);min-height:var(--rt-image-upload-host-min-height);max-height:var(--rt-image-upload-host-max-height);align-items:var(--rt-image-upload-host-align-items);justify-content:var(--rt-image-upload-host-justify-content)}:host .rtui-image-cropper{padding:var(--rt-image-upload-image-cropper-padding)}:host .rtui-image-cropper__actions{display:var(--rt-image-upload-image-cropper-actions-display);justify-content:var(--rt-image-upload-image-cropper-actions-justify-content);margin-top:var(--rt-image-upload-image-cropper-actions-justify-margin-top);gap:var(--rt-image-upload-image-cropper-actions-gap)}:host .rtui-image-container{position:var(--rt-image-upload-image-container-position);padding:var(--rt-image-upload-image-container-padding)}:host .rtui-image-container__image{position:var(--rt-image-upload-image-container-image-position);height:var(--rt-image-upload-image-container-image-height);max-height:var(--rt-image-upload-image-container-image-max-height);object-fit:var(--rt-image-upload-image-container-image-object-fit);pointer-events:none}:host .rtui-image-container__image--active{cursor:pointer;pointer-events:initial}:host .rtui-image-container__image--active:hover{opacity:.6}:host .rtui-image-container__action{position:absolute;z-index:999;top:0;right:0;backdrop-filter:blur(1.25rem)}\n"], dependencies: [{ kind: "component", type: 
                 // material
                 MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: 
                 // cropper
@@ -4693,7 +4877,7 @@ class RtuiImageUploadComponent {
                 // rt-tools
                 ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }, { kind: "directive", type: ModDirective, selector: "[rtMod]" }, { kind: "directive", type: BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "component", type: RtuiSpinnerComponent, selector: "rtui-spinner", inputs: ["diameter", "showBox", "showBackground"] }, { kind: "component", type: RtuiFileUploadComponent, selector: "rtui-file-upload", inputs: ["isIconOutlined"], outputs: ["uploadFile"] }, { kind: "directive", type: RtIconOutlinedDirective, selector: "mat-icon[rtIconOutlined]", inputs: ["rtIconOutlined"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtuiImageUploadComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiImageUploadComponent, decorators: [{
             type: Component,
             args: [{ selector: 'rtui-image-upload', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         // material
@@ -4772,8 +4956,10 @@ class RtThemeService {
         this.#storage = inject(LOCAL_STORAGE, { optional: true }) ?? this.#document.defaultView?.localStorage ?? null;
         // app-wide defaults (provideRtUi(config)); a persisted user choice always wins over them
         this.#config = inject(RT_UI_CONFIG);
-        this.#theme = signal(this.#restore(), { ...(ngDevMode ? { debugName: "#theme" } : {}) });
-        this.#colorScheme = signal(this.#restoreScheme(), { ...(ngDevMode ? { debugName: "#colorScheme" } : {}) });
+        this.#theme = signal(this.#restore(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#theme" }] : /* istanbul ignore next */ []));
+        this.#colorScheme = signal(this.#restoreScheme(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#colorScheme" }] : /* istanbul ignore next */ []));
         this.theme = this.#theme.asReadonly();
         this.colorScheme = this.#colorScheme.asReadonly();
         effect(() => {
@@ -4902,10 +5088,10 @@ class RtThemeService {
         }
         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' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtThemeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtThemeService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtThemeService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtThemeService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });
@@ -4926,12 +5112,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
  */
 class RtThemeDirective {
     constructor() {
-        this.rtTheme = input('', { ...(ngDevMode ? { debugName: "rtTheme" } : {}) });
+        this.rtTheme = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "rtTheme" }] : /* istanbul ignore next */ []));
     }
-    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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtThemeDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.5", 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtThemeDirective, decorators: [{
             type: Directive,
             args: [{
                     standalone: true,