@kuzntsv/uikit 0.21.37 → 1.0.1

package/fesm2022/kuzntsv-uikit-ui.mjs

@@ -0,0 +1,1810 @@
+import * as i0 from '@angular/core';
+import { input, output, effect, Component, viewChild, HostListener, inject, Injectable, Directive, signal, Pipe, ChangeDetectorRef, ChangeDetectionStrategy, linkedSignal, NgZone, ElementRef } from '@angular/core';
+import { Router, RouterLink, ActivatedRoute } from '@angular/router';
+import { AuthService, RoleService, NotificationService, UIKIT_NOTIFICATION_TOKEN } from '@kuzntsv/uikit';
+import * as i1 from '@angular/forms';
+import { FormGroup, FormControl, Validators, FormsModule, ReactiveFormsModule, NgControl } from '@angular/forms';
+import { MatButton, MatIconButton, MatAnchor } from '@angular/material/button';
+import { MatCard, MatCardHeader, MatCardTitle, MatCardContent } from '@angular/material/card';
+import { MatFormField, MatLabel, MatError, MatSuffix, MatHint } from '@angular/material/form-field';
+import { MatIcon } from '@angular/material/icon';
+import { MatInput } from '@angular/material/input';
+import { HttpClient, HttpParams } from '@angular/common/http';
+import { Overlay } from '@angular/cdk/overlay';
+import { ComponentPortal } from '@angular/cdk/portal';
+import { ENTER, COMMA } from '@angular/cdk/keycodes';
+import { AsyncPipe } from '@angular/common';
+import * as i2 from '@angular/material/autocomplete';
+import { MatAutocompleteModule, MatOption } from '@angular/material/autocomplete';
+import * as i3 from '@angular/material/chips';
+import { MatChipsModule } from '@angular/material/chips';
+import { startWith, Subscription, Subject, tap, switchMap, map as map$1, forkJoin, ReplaySubject } from 'rxjs';
+import { map, debounceTime, distinctUntilChanged, startWith as startWith$1 } from 'rxjs/operators';
+import { MAT_DATE_LOCALE, MAT_DATE_FORMATS, MatOption as MatOption$1, MatOptgroup } from '@angular/material/core';
+import { MatDateRangeInput, MatStartDate, MatEndDate, MatDatepickerToggle, MatDateRangePicker } from '@angular/material/datepicker';
+import 'moment/locale/ru';
+import moment from 'moment';
+import { MAT_DIALOG_DATA, MatDialogRef, MatDialogTitle, MatDialogContent, MatDialogActions, MatDialogClose, MatDialog, MatDialogConfig } from '@angular/material/dialog';
+import * as i1$1 from '@angular/material/tooltip';
+import { MatTooltip, MatTooltipModule } from '@angular/material/tooltip';
+import { MatDivider } from '@angular/material/divider';
+import { MatMenu, MatMenuTrigger, MatMenuItem, MatMenuContent } from '@angular/material/menu';
+import { MatToolbar } from '@angular/material/toolbar';
+import { DomSanitizer } from '@angular/platform-browser';
+import { MatProgressSpinner } from '@angular/material/progress-spinner';
+import * as i3$1 from '@angular/cdk/scrolling';
+import { ScrollingModule } from '@angular/cdk/scrolling';
+import { MatSelect, MatFormField as MatFormField$1, MatLabel as MatLabel$1 } from '@angular/material/select';
+import { SelectionModel } from '@angular/cdk/collections';
+import { MatCheckbox } from '@angular/material/checkbox';
+import { MatPaginator } from '@angular/material/paginator';
+import { MatSort, MatSortHeader } from '@angular/material/sort';
+import { MatTableDataSource, MatTable, MatColumnDef, MatHeaderCellDef, MatHeaderCell, MatCellDef, MatCell, MatNoDataRow, MatHeaderRowDef, MatHeaderRow, MatRowDef, MatRow, MatFooterRowDef, MatFooterRow, MatFooterCellDef, MatFooterCell, MatTableModule } from '@angular/material/table';
+
+class LoginFormComponent {
+    pending = input(false, ...(ngDevMode ? [{ debugName: "pending" }] : []));
+    errorMessage = input('', ...(ngDevMode ? [{ debugName: "errorMessage" }] : []));
+    submitted = output();
+    hide = true;
+    form = new FormGroup({
+        username: new FormControl('', [Validators.required]),
+        password: new FormControl('', [Validators.required]),
+    });
+    constructor() {
+        effect(() => {
+            if (this.pending()) {
+                this.form.disable();
+            }
+            else {
+                this.form.enable();
+            }
+        });
+    }
+    submit() {
+        if (this.form.valid) {
+            this.submitted.emit(this.form.value);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: LoginFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: LoginFormComponent, isStandalone: true, selector: "ngx-uik-login-form", inputs: { pending: { classPropertyName: "pending", publicName: "pending", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { submitted: "submitted" }, ngImport: i0, template: "<mat-card appearance=\"outlined\">\r\n  <mat-card-header>\r\n    <mat-card-title>\r\n      \u0410\u0432\u0442\u043E\u0440\u0438\u0437\u0430\u0446\u0438\u044F\r\n    </mat-card-title>\r\n  </mat-card-header>\r\n  <mat-card-content>\r\n    <form [formGroup]=\"form\" (ngSubmit)=\"submit()\">\r\n      <p>\r\n        <mat-form-field>\r\n          <mat-label>\u0418\u043C\u044F \u043F\u043E\u043B\u044C\u0437\u043E\u0432\u0430\u0442\u0435\u043B\u044F</mat-label>\r\n          <input type=\"text\" pattern=\"[A-Za-z]{1,}.[A-Za-z]{1,}.[A-Za-z]*\"\r\n            matInput\r\n            autocomplete=\"on\"\r\n            name=\"login-form-username\"\r\n            placeholder=\"\u0418\u043C\u044F \u043F\u043E\u043B\u044C\u0437\u043E\u0432\u0430\u0442\u0435\u043B\u044F\"\r\n            formControlName=\"username\">\r\n            @if (form.controls['username'].hasError('pattern')) {\r\n              <mat-error>\r\n                \u041F\u043E\u0436\u0430\u043B\u0443\u0439\u0441\u0442\u0430, \u0438\u0441\u043F\u043E\u043B\u044C\u0437\u0443\u0439\u0442\u0435 \u0442\u0440\u0435\u0431\u0443\u0435\u043C\u044B\u0439 \u0444\u043E\u0440\u043C\u0430\u0442 (\u041F\u0440\u0438\u043C\u0435\u0440: a.p.petrov)\r\n              </mat-error>\r\n            }\r\n            @if (form.controls['username'].hasError('required')) {\r\n              <mat-error>\r\n                \u041F\u043E\u0436\u0430\u043B\u0443\u0439\u0441\u0442\u0430, \u0437\u0430\u043F\u043E\u043B\u043D\u0438\u0442\u0435 \u044D\u0442\u043E \u043F\u043E\u043B\u0435\r\n              </mat-error>\r\n            }\r\n          </mat-form-field>\r\n        </p>\r\n\r\n        <p>\r\n          <mat-form-field>\r\n            <mat-label>\u041F\u0430\u0440\u043E\u043B\u044C</mat-label>\r\n            <input [type]=\"hide ? 'password' : 'text'\" matInput placeholder=\"\u041F\u0430\u0440\u043E\u043B\u044C\" formControlName=\"password\">\r\n            <mat-icon class=\"watcher\" matSuffix (mousedown)=\"hide=false\" (mouseup)=\"hide=true\"\r\n            >{{ hide ? 'visibility_off' : 'visibility'}}</mat-icon>\r\n            @if (form.controls['password'].hasError('required')) {\r\n              <mat-error>\r\n                \u041F\u043E\u0436\u0430\u043B\u0443\u0439\u0441\u0442\u0430, \u0437\u0430\u043F\u043E\u043B\u043D\u0438\u0442\u0435 \u044D\u0442\u043E \u043F\u043E\u043B\u0435\r\n              </mat-error>\r\n            }\r\n          </mat-form-field>\r\n        </p>\r\n\r\n        @if (errorMessage()) {\r\n          <p class=\"loginError\">\r\n            {{ errorMessage() }}\r\n          </p>\r\n        }\r\n\r\n        <p class=\"loginButtons\">\r\n          <button type=\"submit\" mat-button mat-stroked-button color=\"primary\" [disabled]=\"pending()\">\u0412\u043E\u0439\u0442\u0438</button>\r\n        </p>\r\n\r\n      </form>\r\n    </mat-card-content>\r\n  </mat-card>\r\n", styles: [":host{display:flex;justify-content:center;margin:32px 0}.mat-mdc-form-field{width:100%;min-width:300px}mat-card-header{justify-content:center}mat-card-content{font-size:16px}.loginError{padding:16px;width:300px;color:#fff;background-color:red}.loginButtons{display:flex;flex-direction:row;justify-content:flex-end}.watcher{cursor:default}\n"], dependencies: [{ kind: "component", type: MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "component", type: MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "directive", type: MatCardContent, selector: "mat-card-content" }, { kind: "ngmodule", type: FormsModule }, { 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.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { 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: 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: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { 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"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: LoginFormComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngx-uik-login-form', imports: [MatCard, MatCardHeader, MatCardTitle, MatCardContent, FormsModule, ReactiveFormsModule, MatFormField,
+                        MatLabel, MatInput, MatError, MatIcon, MatSuffix, MatButton], template: "<mat-card appearance=\"outlined\">\r\n  <mat-card-header>\r\n    <mat-card-title>\r\n      \u0410\u0432\u0442\u043E\u0440\u0438\u0437\u0430\u0446\u0438\u044F\r\n    </mat-card-title>\r\n  </mat-card-header>\r\n  <mat-card-content>\r\n    <form [formGroup]=\"form\" (ngSubmit)=\"submit()\">\r\n      <p>\r\n        <mat-form-field>\r\n          <mat-label>\u0418\u043C\u044F \u043F\u043E\u043B\u044C\u0437\u043E\u0432\u0430\u0442\u0435\u043B\u044F</mat-label>\r\n          <input type=\"text\" pattern=\"[A-Za-z]{1,}.[A-Za-z]{1,}.[A-Za-z]*\"\r\n            matInput\r\n            autocomplete=\"on\"\r\n            name=\"login-form-username\"\r\n            placeholder=\"\u0418\u043C\u044F \u043F\u043E\u043B\u044C\u0437\u043E\u0432\u0430\u0442\u0435\u043B\u044F\"\r\n            formControlName=\"username\">\r\n            @if (form.controls['username'].hasError('pattern')) {\r\n              <mat-error>\r\n                \u041F\u043E\u0436\u0430\u043B\u0443\u0439\u0441\u0442\u0430, \u0438\u0441\u043F\u043E\u043B\u044C\u0437\u0443\u0439\u0442\u0435 \u0442\u0440\u0435\u0431\u0443\u0435\u043C\u044B\u0439 \u0444\u043E\u0440\u043C\u0430\u0442 (\u041F\u0440\u0438\u043C\u0435\u0440: a.p.petrov)\r\n              </mat-error>\r\n            }\r\n            @if (form.controls['username'].hasError('required')) {\r\n              <mat-error>\r\n                \u041F\u043E\u0436\u0430\u043B\u0443\u0439\u0441\u0442\u0430, \u0437\u0430\u043F\u043E\u043B\u043D\u0438\u0442\u0435 \u044D\u0442\u043E \u043F\u043E\u043B\u0435\r\n              </mat-error>\r\n            }\r\n          </mat-form-field>\r\n        </p>\r\n\r\n        <p>\r\n          <mat-form-field>\r\n            <mat-label>\u041F\u0430\u0440\u043E\u043B\u044C</mat-label>\r\n            <input [type]=\"hide ? 'password' : 'text'\" matInput placeholder=\"\u041F\u0430\u0440\u043E\u043B\u044C\" formControlName=\"password\">\r\n            <mat-icon class=\"watcher\" matSuffix (mousedown)=\"hide=false\" (mouseup)=\"hide=true\"\r\n            >{{ hide ? 'visibility_off' : 'visibility'}}</mat-icon>\r\n            @if (form.controls['password'].hasError('required')) {\r\n              <mat-error>\r\n                \u041F\u043E\u0436\u0430\u043B\u0443\u0439\u0441\u0442\u0430, \u0437\u0430\u043F\u043E\u043B\u043D\u0438\u0442\u0435 \u044D\u0442\u043E \u043F\u043E\u043B\u0435\r\n              </mat-error>\r\n            }\r\n          </mat-form-field>\r\n        </p>\r\n\r\n        @if (errorMessage()) {\r\n          <p class=\"loginError\">\r\n            {{ errorMessage() }}\r\n          </p>\r\n        }\r\n\r\n        <p class=\"loginButtons\">\r\n          <button type=\"submit\" mat-button mat-stroked-button color=\"primary\" [disabled]=\"pending()\">\u0412\u043E\u0439\u0442\u0438</button>\r\n        </p>\r\n\r\n      </form>\r\n    </mat-card-content>\r\n  </mat-card>\r\n", styles: [":host{display:flex;justify-content:center;margin:32px 0}.mat-mdc-form-field{width:100%;min-width:300px}mat-card-header{justify-content:center}mat-card-content{font-size:16px}.loginError{padding:16px;width:300px;color:#fff;background-color:red}.loginButtons{display:flex;flex-direction:row;justify-content:flex-end}.watcher{cursor:default}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { pending: [{ type: i0.Input, args: [{ isSignal: true, alias: "pending", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], submitted: [{ type: i0.Output, args: ["submitted"] }] } });
+
+class PermitFormComponent {
+    hidy = viewChild('hidy', ...(ngDevMode ? [{ debugName: "hidy" }] : []));
+    submitted = output();
+    mouseHandling(event) {
+        this.hidy()?.nativeElement.focus();
+    }
+    ngOnInit() {
+        // Обнуляем значение Input
+        const hidy = this.hidy();
+        if (hidy) {
+            hidy.nativeElement.value = null;
+            hidy.nativeElement.focus();
+        }
+    }
+    /**
+     * Поле ввода
+     *
+     * @param событие нажатия на клавишу
+     */
+    onKeydown(event) {
+        if (event.key === 'Enter') {
+            const permit = this.hidy()?.nativeElement.value;
+            if (permit) {
+                this.submitted.emit(permit);
+            }
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: PermitFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.1.0", type: PermitFormComponent, isStandalone: true, selector: "ngx-uik-permit-form", outputs: { submitted: "submitted" }, host: { listeners: { "document:mouseup": "mouseHandling($event)" } }, viewQueries: [{ propertyName: "hidy", first: true, predicate: ["hidy"], descendants: true, isSignal: true }], ngImport: i0, template: "<mat-card appearance=\"outlined\">\r\n    <mat-card-header>\r\n        <mat-card-title>\r\n        \u041F\u0440\u0438\u043B\u043E\u0436\u0438\u0442\u0435 \u043F\u0440\u043E\u043F\u0443\u0441\u043A\r\n        </mat-card-title>\r\n    </mat-card-header>\r\n    <mat-card-content>\r\n        <div class=\"permit\"></div>\r\n    </mat-card-content>\r\n</mat-card>\r\n<input #hidy class=\"hidy\" type=\"text\" (keydown)=\"onKeydown($event)\"/>", styles: [":host{display:flex;justify-content:center;margin:32px 0}.mat-mdc-form-field{width:100%;min-width:300px}mat-card-title,mat-card-content{display:flex;justify-content:center}mat-card-content{font-size:16px}div.permit{border:none;width:300px;background-size:300px;height:180px}div.permit button div{margin-bottom:200px;color:#000;font-size:34px}input.hidy{opacity:0;position:absolute;left:-200px;top:-200px}\n"], dependencies: [{ kind: "component", type: MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "component", type: MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "directive", type: MatCardContent, selector: "mat-card-content" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: PermitFormComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngx-uik-permit-form', imports: [MatCard, MatCardHeader, MatCardTitle, MatCardContent], template: "<mat-card appearance=\"outlined\">\r\n    <mat-card-header>\r\n        <mat-card-title>\r\n        \u041F\u0440\u0438\u043B\u043E\u0436\u0438\u0442\u0435 \u043F\u0440\u043E\u043F\u0443\u0441\u043A\r\n        </mat-card-title>\r\n    </mat-card-header>\r\n    <mat-card-content>\r\n        <div class=\"permit\"></div>\r\n    </mat-card-content>\r\n</mat-card>\r\n<input #hidy class=\"hidy\" type=\"text\" (keydown)=\"onKeydown($event)\"/>", styles: [":host{display:flex;justify-content:center;margin:32px 0}.mat-mdc-form-field{width:100%;min-width:300px}mat-card-title,mat-card-content{display:flex;justify-content:center}mat-card-content{font-size:16px}div.permit{border:none;width:300px;background-size:300px;height:180px}div.permit button div{margin-bottom:200px;color:#000;font-size:34px}input.hidy{opacity:0;position:absolute;left:-200px;top:-200px}\n"] }]
+        }], propDecorators: { hidy: [{ type: i0.ViewChild, args: ['hidy', { isSignal: true }] }], submitted: [{ type: i0.Output, args: ["submitted"] }], mouseHandling: [{
+                type: HostListener,
+                args: ['document:mouseup', ['$event']]
+            }] } });
+
+class AvatarService {
+    baseRoute = 'common/human/';
+    http = inject(HttpClient);
+    getAvatarById(idHuman) {
+        return this.http.get(this.baseRoute + idHuman + '/avatar', { responseType: 'arraybuffer' });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: AvatarService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: AvatarService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: AvatarService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
+class BaseMatChipComponent {
+    // Все элементы
+    items = input([], ...(ngDevMode ? [{ debugName: "items" }] : []));
+    // Выбранные элементы, ключи (ChipItem.value)
+    selectedItemsInput = input([], ...(ngDevMode ? [{ debugName: "selectedItemsInput" }] : []));
+    // Заголовок
+    title = input('', ...(ngDevMode ? [{ debugName: "title" }] : []));
+    // Событие изменения выбранных элементов
+    selectedItemsChange = output();
+    input = viewChild('input', ...(ngDevMode ? [{ debugName: "input" }] : []));
+    separatorKeysCodes = [ENTER, COMMA];
+    inputCtrl = new FormControl();
+    filteredItems$;
+    selectedItems = [];
+    constructor() {
+        effect(() => {
+            if (this.items().length > 0) {
+                this.filteredItems$ = this.inputCtrl.valueChanges.pipe(startWith(null), map(item => (item ? this._filter(item) : this.items().slice())));
+            }
+        });
+        effect(() => {
+            if (this.selectedItemsInput())
+                this.selectedItems = this.items().filter(s => this.selectedItemsInput().includes(s.value));
+        });
+    }
+    remove(value) {
+        this.selectedItems = [...this.selectedItems];
+        const index = this.selectedItems.map(i => i.value).indexOf(value);
+        if (index >= 0) {
+            this.selectedItems.splice(index, 1);
+            this.selectedItemsChange.emit(this.selectedItems.map(i => i.value));
+        }
+    }
+    selected(event) {
+        this.selectedItems = [...this.selectedItems];
+        const item = this.items().find(s => s.value == event.option.value);
+        if (item) {
+            this.selectedItems.push(item);
+        }
+        this.selectedItemsChange.emit(this.selectedItems.map(i => i.value));
+        const inputValue = this.input();
+        if (inputValue)
+            inputValue.nativeElement.value = '';
+        this.inputCtrl.setValue(null);
+    }
+    _filter(value) {
+        const filterValue = value.toLowerCase();
+        return this.items().filter(item => item.viewValue.toLowerCase().includes(filterValue));
+    }
+    onCloseClick($event) {
+        $event.stopPropagation();
+        this.selectedItemsChange.emit([]);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: BaseMatChipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: BaseMatChipComponent, isStandalone: true, selector: "ngx-uik-chip-input-autocomplete", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, selectedItemsInput: { classPropertyName: "selectedItemsInput", publicName: "selectedItemsInput", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedItemsChange: "selectedItemsChange" }, viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true, isSignal: true }], ngImport: i0, template: "<mat-form-field class=\"chip-list\" appearance=\"fill\">\r\n  <mat-label>{{ title() }}</mat-label>\r\n  <mat-chip-grid #chipList aria-label=\"'\u0412\u044B\u0431\u043E\u0440 '+title()\">\r\n    @for (item of selectedItems; track item) {\r\n      <mat-chip-row color=\"primary\"\r\n        (removed)=\"remove(item.value)\">\r\n        {{ item.viewValue }}\r\n        <button matChipRemove>\r\n          <mat-icon>cancel</mat-icon>\r\n        </button>\r\n      </mat-chip-row>\r\n    }\r\n  </mat-chip-grid>\r\n  <input\r\n    #input\r\n    [placeholder]=\"'\u0412\u0432\u0435\u0434\u0438\u0442\u0435 '+title()+'...'\"\r\n    [formControl]=\"inputCtrl\"\r\n    [matAutocomplete]=\"auto\"\r\n    [matChipInputFor]=\"chipList\"\r\n    [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\r\n    >\r\n  <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"selected($event)\">\r\n    @for (item of filteredItems$ | async; track item) {\r\n      <mat-option [value]=\"item.value\"\r\n        [disabled]=\"selectedItemsInput()?.includes(item.value)\">\r\n        {{ item.viewValue }}\r\n      </mat-option>\r\n    }\r\n  </mat-autocomplete>\r\n  @if (selectedItems.length > 0) {\r\n    <button matSuffix mat-icon-button aria-label=\"Clear\" (click)=\"onCloseClick($event)\">\r\n      <mat-icon>close</mat-icon>\r\n    </button>\r\n  }\r\n</mat-form-field>\r\n", styles: [".chip-list{width:100%}\n"], dependencies: [{ kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { 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: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i2.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i2.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i3.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i3.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled", "readonly", "matChipInputDisabledInteractive"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i3.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i3.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "pipe", type: AsyncPipe, name: "async" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: BaseMatChipComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngx-uik-chip-input-autocomplete', imports: [MatFormField, AsyncPipe, FormsModule, ReactiveFormsModule, MatAutocompleteModule, MatIcon, MatOption,
+                        MatChipsModule, MatLabel], template: "<mat-form-field class=\"chip-list\" appearance=\"fill\">\r\n  <mat-label>{{ title() }}</mat-label>\r\n  <mat-chip-grid #chipList aria-label=\"'\u0412\u044B\u0431\u043E\u0440 '+title()\">\r\n    @for (item of selectedItems; track item) {\r\n      <mat-chip-row color=\"primary\"\r\n        (removed)=\"remove(item.value)\">\r\n        {{ item.viewValue }}\r\n        <button matChipRemove>\r\n          <mat-icon>cancel</mat-icon>\r\n        </button>\r\n      </mat-chip-row>\r\n    }\r\n  </mat-chip-grid>\r\n  <input\r\n    #input\r\n    [placeholder]=\"'\u0412\u0432\u0435\u0434\u0438\u0442\u0435 '+title()+'...'\"\r\n    [formControl]=\"inputCtrl\"\r\n    [matAutocomplete]=\"auto\"\r\n    [matChipInputFor]=\"chipList\"\r\n    [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\r\n    >\r\n  <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"selected($event)\">\r\n    @for (item of filteredItems$ | async; track item) {\r\n      <mat-option [value]=\"item.value\"\r\n        [disabled]=\"selectedItemsInput()?.includes(item.value)\">\r\n        {{ item.viewValue }}\r\n      </mat-option>\r\n    }\r\n  </mat-autocomplete>\r\n  @if (selectedItems.length > 0) {\r\n    <button matSuffix mat-icon-button aria-label=\"Clear\" (click)=\"onCloseClick($event)\">\r\n      <mat-icon>close</mat-icon>\r\n    </button>\r\n  }\r\n</mat-form-field>\r\n", styles: [".chip-list{width:100%}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], selectedItemsInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedItemsInput", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], selectedItemsChange: [{ type: i0.Output, args: ["selectedItemsChange"] }], input: [{ type: i0.ViewChild, args: ['input', { isSignal: true }] }] } });
+
+function dateFormat(date) {
+    if (date)
+        return moment(date).format("YYYY-MM-DD");
+    else
+        return '';
+}
+
+// See the Moment.js docs for the meaning of these formats:
+// https://momentjs.com/docs/#/displaying/format/
+const MY_FORMATS = {
+    parse: {
+        dateInput: 'DD.MM.YYYY',
+    },
+    display: {
+        dateInput: 'DD.MM.YYYY',
+        monthYearLabel: 'MMM YYYY',
+        dateA11yLabel: 'LL',
+        monthYearA11yLabel: 'MMMM YYYY',
+    },
+};
+
+class DateRangeInputComponent {
+    label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
+    dateRange = input({ begin: '', end: '' }, ...(ngDevMode ? [{ debugName: "dateRange" }] : []));
+    // eslint-disable-next-line no-magic-numbers
+    minDate = input(new Date(2020, 0, 1), ...(ngDevMode ? [{ debugName: "minDate" }] : []));
+    clearInput = input(null, ...(ngDevMode ? [{ debugName: "clearInput" }] : []));
+    required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : []));
+    dateRangeChange = output();
+    form = new FormGroup({
+        begin: new FormControl(),
+        end: new FormControl(),
+    });
+    subscription = new Subscription();
+    constructor() {
+        effect(() => {
+            if (this.clearInput())
+                this.form.reset();
+        });
+        effect(() => {
+            const value = this.dateRange();
+            if (this.form) {
+                this.form.controls['begin'].setValue(value.begin ? new Date(value.begin) : null);
+                this.form.controls['end'].setValue(value.end ? new Date(value.begin) : null);
+            }
+            this.dateRangeChange.emit(this.rangeToDateDateRange(this.form.value));
+        });
+    }
+    ngOnInit() {
+        if (this.required()) {
+            this.form.controls['begin'].addValidators(Validators.required);
+            this.form.controls['end'].addValidators(Validators.required);
+        }
+        // подписка на изменение периода
+        this.form.valueChanges
+            .pipe(
+        // eslint-disable-next-line no-magic-numbers
+        debounceTime(500), distinctUntilChanged())
+            .subscribe({
+            next: range => {
+                if (this.required()) {
+                    if (range.begin && range.end) {
+                        this.dateRangeChange.emit(this.rangeToDateDateRange(range));
+                    }
+                }
+                else {
+                    this.dateRangeChange.emit(this.rangeToDateDateRange(range));
+                }
+            }
+        });
+    }
+    ngOnDestroy() {
+        if (this.subscription)
+            this.subscription.unsubscribe();
+    }
+    rangeToDateDateRange(range) {
+        return {
+            begin: range.begin ? dateFormat(range.begin) : '',
+            end: range.end ? dateFormat(range.end) : ''
+        };
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: DateRangeInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.0", type: DateRangeInputComponent, isStandalone: true, selector: "ngx-uik-date-range-input", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, dateRange: { classPropertyName: "dateRange", publicName: "dateRange", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, clearInput: { classPropertyName: "clearInput", publicName: "clearInput", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dateRangeChange: "dateRangeChange" }, providers: [
+            { provide: MAT_DATE_LOCALE, useValue: 'ru' },
+            { provide: MAT_DATE_FORMATS, useValue: MY_FORMATS },
+        ], ngImport: i0, template: "<mat-form-field appearance=\"fill\">\r\n  <mat-label>{{label()}}</mat-label>\r\n  <mat-date-range-input\r\n    [rangePicker]=\"picker\"\r\n    [formGroup]=\"form\"\r\n    [min]=\"minDate()\">\r\n    <input matStartDate formControlName=\"begin\" placeholder=\"\u0414\u0430\u0442\u0430 \u043D\u0430\u0447\u0430\u043B\u0430\">\r\n    <input matEndDate formControlName=\"end\" placeholder=\"\u0414\u0430\u0442\u0430 \u043E\u043A\u043E\u043D\u0447\u0430\u043D\u0438\u044F\">\r\n  </mat-date-range-input>\r\n  <mat-datepicker-toggle matIconSuffix [for]=\"picker\"></mat-datepicker-toggle>\r\n  <mat-date-range-picker #picker></mat-date-range-picker>\r\n  <mat-error>\u0423\u043A\u0430\u0436\u0438\u0442\u0435 \u043F\u0435\u0440\u0438\u043E\u0434</mat-error>\r\n</mat-form-field>\r\n\r\n", styles: ["mat-form-field{margin-right:16px}\n"], dependencies: [{ kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "component", type: MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { 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.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { 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: MatStartDate, selector: "input[matStartDate]", outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: MatEndDate, selector: "input[matEndDate]", outputs: ["dateChange", "dateInput"] }, { kind: "component", type: MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: DateRangeInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngx-uik-date-range-input', imports: [MatFormField, MatLabel, MatDateRangeInput, FormsModule, ReactiveFormsModule, MatStartDate, MatEndDate,
+                        MatDatepickerToggle, MatSuffix, MatDateRangePicker, MatError], providers: [
+                        { provide: MAT_DATE_LOCALE, useValue: 'ru' },
+                        { provide: MAT_DATE_FORMATS, useValue: MY_FORMATS },
+                    ], template: "<mat-form-field appearance=\"fill\">\r\n  <mat-label>{{label()}}</mat-label>\r\n  <mat-date-range-input\r\n    [rangePicker]=\"picker\"\r\n    [formGroup]=\"form\"\r\n    [min]=\"minDate()\">\r\n    <input matStartDate formControlName=\"begin\" placeholder=\"\u0414\u0430\u0442\u0430 \u043D\u0430\u0447\u0430\u043B\u0430\">\r\n    <input matEndDate formControlName=\"end\" placeholder=\"\u0414\u0430\u0442\u0430 \u043E\u043A\u043E\u043D\u0447\u0430\u043D\u0438\u044F\">\r\n  </mat-date-range-input>\r\n  <mat-datepicker-toggle matIconSuffix [for]=\"picker\"></mat-datepicker-toggle>\r\n  <mat-date-range-picker #picker></mat-date-range-picker>\r\n  <mat-error>\u0423\u043A\u0430\u0436\u0438\u0442\u0435 \u043F\u0435\u0440\u0438\u043E\u0434</mat-error>\r\n</mat-form-field>\r\n\r\n", styles: ["mat-form-field{margin-right:16px}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], dateRange: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateRange", required: false }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], clearInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearInput", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], dateRangeChange: [{ type: i0.Output, args: ["dateRangeChange"] }] } });
+
+class DialogComponent {
+    data = inject(MAT_DIALOG_DATA);
+    dialogRef = inject((MatDialogRef));
+    constructor() {
+        if (!this.data.title) {
+            this.data.title = 'Подтверждение';
+        }
+        if (!this.data.btnNoTitle) {
+            this.data.btnNoTitle = 'Нет';
+        }
+        if (!this.data.btnYesTitle) {
+            this.data.btnYesTitle = 'Да';
+        }
+    }
+    onNoClick() {
+        this.dialogRef.close();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: DialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.0", type: DialogComponent, isStandalone: true, selector: "ngx-uik-dialog", ngImport: i0, template: "<h1 mat-dialog-title>{{ data.title }}</h1>\r\n<div mat-dialog-content>\r\n  <div style=\"white-space: pre-line\">{{ data.message }}</div>\r\n</div>\r\n<div mat-dialog-actions align=\"end\">\r\n  <button mat-raised-button (click)=\"onNoClick()\" cdkFocusInitial>{{ data.btnNoTitle }}</button>\r\n  <button mat-raised-button color=\"warn\" [mat-dialog-close]=\"data.id\">{{ data.btnYesTitle }}</button>\r\n</div>\r\n\r\n", styles: [""], dependencies: [{ kind: "directive", type: MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { 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: MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: DialogComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngx-uik-dialog', imports: [MatDialogTitle, MatDialogContent, MatDialogActions, MatButton, MatDialogClose], template: "<h1 mat-dialog-title>{{ data.title }}</h1>\r\n<div mat-dialog-content>\r\n  <div style=\"white-space: pre-line\">{{ data.message }}</div>\r\n</div>\r\n<div mat-dialog-actions align=\"end\">\r\n  <button mat-raised-button (click)=\"onNoClick()\" cdkFocusInitial>{{ data.btnNoTitle }}</button>\r\n  <button mat-raised-button color=\"warn\" [mat-dialog-close]=\"data.id\">{{ data.btnYesTitle }}</button>\r\n</div>\r\n\r\n" }]
+        }], ctorParameters: () => [] });
+
+var DialogAction;
+(function (DialogAction) {
+    DialogAction["Add"] = "\u0414\u043E\u0431\u0430\u0432\u0438\u0442\u044C";
+    DialogAction["Edit"] = "\u0418\u0437\u043C\u0435\u043D\u0438\u0442\u044C";
+    DialogAction["Delete"] = "\u0423\u0434\u0430\u043B\u0438\u0442\u044C";
+    DialogAction["None"] = "";
+})(DialogAction || (DialogAction = {}));
+
+class EmptyComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: EmptyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.0", type: EmptyComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: '' // пустой шаблон, так как гуард сразу уводит пользователя со страницы
+        , isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: EmptyComponent, decorators: [{
+            type: Component,
+            args: [{
+                    standalone: true,
+                    template: '' // пустой шаблон, так как гуард сразу уводит пользователя со страницы
+                }]
+        }] });
+
+class BaseToolbarComponent {
+    // Роли для кнопок
+    rolesNewBtn = input([], ...(ngDevMode ? [{ debugName: "rolesNewBtn" }] : []));
+    rolesEditBtn = input([], ...(ngDevMode ? [{ debugName: "rolesEditBtn" }] : []));
+    rolesRemoveBtn = input([], ...(ngDevMode ? [{ debugName: "rolesRemoveBtn" }] : []));
+    rolesCopyBtn = input([], ...(ngDevMode ? [{ debugName: "rolesCopyBtn" }] : []));
+    rolesExcelBtn = input([], ...(ngDevMode ? [{ debugName: "rolesExcelBtn" }] : []));
+    rolesCsvBtn = input([], ...(ngDevMode ? [{ debugName: "rolesCsvBtn" }] : []));
+    rolesPdfBtn = input([], ...(ngDevMode ? [{ debugName: "rolesPdfBtn" }] : []));
+    rolesPrintBtn = input([], ...(ngDevMode ? [{ debugName: "rolesPrintBtn" }] : []));
+    rolesRefreshBtn = input([], ...(ngDevMode ? [{ debugName: "rolesRefreshBtn" }] : []));
+    rolesClearBtn = input([], ...(ngDevMode ? [{ debugName: "rolesClearBtn" }] : []));
+    // Состояния блокировки
+    newBtnDisabled = input(false, ...(ngDevMode ? [{ debugName: "newBtnDisabled" }] : []));
+    editBtnDisabled = input(false, ...(ngDevMode ? [{ debugName: "editBtnDisabled" }] : []));
+    removeBtnDisabled = input(false, ...(ngDevMode ? [{ debugName: "removeBtnDisabled" }] : []));
+    copyBtnDisabled = input(false, ...(ngDevMode ? [{ debugName: "copyBtnDisabled" }] : []));
+    excelBtnDisabled = input(false, ...(ngDevMode ? [{ debugName: "excelBtnDisabled" }] : []));
+    csvBtnDisabled = input(false, ...(ngDevMode ? [{ debugName: "csvBtnDisabled" }] : []));
+    pdfBtnDisabled = input(false, ...(ngDevMode ? [{ debugName: "pdfBtnDisabled" }] : []));
+    printBtnDisabled = input(false, ...(ngDevMode ? [{ debugName: "printBtnDisabled" }] : []));
+    refreshBtnDisabled = input(false, ...(ngDevMode ? [{ debugName: "refreshBtnDisabled" }] : []));
+    clearBtnDisabled = input(false, ...(ngDevMode ? [{ debugName: "clearBtnDisabled" }] : []));
+    // Тултипы
+    newBtnTooltip = input('Добавить', ...(ngDevMode ? [{ debugName: "newBtnTooltip" }] : []));
+    editBtnTooltip = input('Изменить', ...(ngDevMode ? [{ debugName: "editBtnTooltip" }] : []));
+    removeBtnTooltip = input('Удалить', ...(ngDevMode ? [{ debugName: "removeBtnTooltip" }] : []));
+    copyBtnTooltip = input('Скопировать', ...(ngDevMode ? [{ debugName: "copyBtnTooltip" }] : []));
+    excelBtnTooltip = input('Экспортировать в Excel', ...(ngDevMode ? [{ debugName: "excelBtnTooltip" }] : []));
+    csvBtnTooltip = input('Экспортировать в Csv', ...(ngDevMode ? [{ debugName: "csvBtnTooltip" }] : []));
+    pdfBtnTooltip = input('Экспортировать в Pdf', ...(ngDevMode ? [{ debugName: "pdfBtnTooltip" }] : []));
+    printBtnTooltip = input('Печатать', ...(ngDevMode ? [{ debugName: "printBtnTooltip" }] : []));
+    refreshBtnTooltip = input('Обновить данные', ...(ngDevMode ? [{ debugName: "refreshBtnTooltip" }] : []));
+    clearBtnTooltip = input('Очистить фильтр', ...(ngDevMode ? [{ debugName: "clearBtnTooltip" }] : []));
+    /** Список элементов контекстного меню. */
+    newBtnOpt = input([], ...(ngDevMode ? [{ debugName: "newBtnOpt" }] : []));
+    // События
+    clickedNewBtn = output();
+    clickedEditBtn = output();
+    clickedRemoveBtn = output();
+    clickedCopyBtn = output();
+    clickedExcelBtn = output();
+    clickedCsvBtn = output();
+    clickedPdfBtn = output();
+    clickedPrintBtn = output();
+    clickedRefreshBtn = output();
+    clickedClearBtn = output();
+    // DI
+    authService = inject(AuthService);
+    roleService = inject(RoleService);
+    isShow(roles) {
+        return !this.roleService.isHideElement(roles, this.authService.roles());
+    }
+    onNewClick() {
+        this.clickedNewBtn.emit();
+    }
+    onEditClick() {
+        this.clickedEditBtn.emit();
+    }
+    onRemoveClick() {
+        this.clickedRemoveBtn.emit();
+    }
+    onCopyClick() {
+        this.clickedCopyBtn.emit();
+    }
+    onExcelClick() {
+        this.clickedExcelBtn.emit();
+    }
+    onCsvClick() {
+        this.clickedCsvBtn.emit();
+    }
+    onPdfClick() {
+        this.clickedPdfBtn.emit();
+    }
+    onPrintClick() {
+        this.clickedPrintBtn.emit();
+    }
+    onRefreshGridClick() {
+        this.clickedRefreshBtn.emit();
+    }
+    onClearClick() {
+        this.clickedClearBtn.emit();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: BaseToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: BaseToolbarComponent, isStandalone: true, selector: "ngx-uik-base-toolbar", inputs: { rolesNewBtn: { classPropertyName: "rolesNewBtn", publicName: "rolesNewBtn", isSignal: true, isRequired: false, transformFunction: null }, rolesEditBtn: { classPropertyName: "rolesEditBtn", publicName: "rolesEditBtn", isSignal: true, isRequired: false, transformFunction: null }, rolesRemoveBtn: { classPropertyName: "rolesRemoveBtn", publicName: "rolesRemoveBtn", isSignal: true, isRequired: false, transformFunction: null }, rolesCopyBtn: { classPropertyName: "rolesCopyBtn", publicName: "rolesCopyBtn", isSignal: true, isRequired: false, transformFunction: null }, rolesExcelBtn: { classPropertyName: "rolesExcelBtn", publicName: "rolesExcelBtn", isSignal: true, isRequired: false, transformFunction: null }, rolesCsvBtn: { classPropertyName: "rolesCsvBtn", publicName: "rolesCsvBtn", isSignal: true, isRequired: false, transformFunction: null }, rolesPdfBtn: { classPropertyName: "rolesPdfBtn", publicName: "rolesPdfBtn", isSignal: true, isRequired: false, transformFunction: null }, rolesPrintBtn: { classPropertyName: "rolesPrintBtn", publicName: "rolesPrintBtn", isSignal: true, isRequired: false, transformFunction: null }, rolesRefreshBtn: { classPropertyName: "rolesRefreshBtn", publicName: "rolesRefreshBtn", isSignal: true, isRequired: false, transformFunction: null }, rolesClearBtn: { classPropertyName: "rolesClearBtn", publicName: "rolesClearBtn", isSignal: true, isRequired: false, transformFunction: null }, newBtnDisabled: { classPropertyName: "newBtnDisabled", publicName: "newBtnDisabled", isSignal: true, isRequired: false, transformFunction: null }, editBtnDisabled: { classPropertyName: "editBtnDisabled", publicName: "editBtnDisabled", isSignal: true, isRequired: false, transformFunction: null }, removeBtnDisabled: { classPropertyName: "removeBtnDisabled", publicName: "removeBtnDisabled", isSignal: true, isRequired: false, transformFunction: null }, copyBtnDisabled: { classPropertyName: "copyBtnDisabled", publicName: "copyBtnDisabled", isSignal: true, isRequired: false, transformFunction: null }, excelBtnDisabled: { classPropertyName: "excelBtnDisabled", publicName: "excelBtnDisabled", isSignal: true, isRequired: false, transformFunction: null }, csvBtnDisabled: { classPropertyName: "csvBtnDisabled", publicName: "csvBtnDisabled", isSignal: true, isRequired: false, transformFunction: null }, pdfBtnDisabled: { classPropertyName: "pdfBtnDisabled", publicName: "pdfBtnDisabled", isSignal: true, isRequired: false, transformFunction: null }, printBtnDisabled: { classPropertyName: "printBtnDisabled", publicName: "printBtnDisabled", isSignal: true, isRequired: false, transformFunction: null }, refreshBtnDisabled: { classPropertyName: "refreshBtnDisabled", publicName: "refreshBtnDisabled", isSignal: true, isRequired: false, transformFunction: null }, clearBtnDisabled: { classPropertyName: "clearBtnDisabled", publicName: "clearBtnDisabled", isSignal: true, isRequired: false, transformFunction: null }, newBtnTooltip: { classPropertyName: "newBtnTooltip", publicName: "newBtnTooltip", isSignal: true, isRequired: false, transformFunction: null }, editBtnTooltip: { classPropertyName: "editBtnTooltip", publicName: "editBtnTooltip", isSignal: true, isRequired: false, transformFunction: null }, removeBtnTooltip: { classPropertyName: "removeBtnTooltip", publicName: "removeBtnTooltip", isSignal: true, isRequired: false, transformFunction: null }, copyBtnTooltip: { classPropertyName: "copyBtnTooltip", publicName: "copyBtnTooltip", isSignal: true, isRequired: false, transformFunction: null }, excelBtnTooltip: { classPropertyName: "excelBtnTooltip", publicName: "excelBtnTooltip", isSignal: true, isRequired: false, transformFunction: null }, csvBtnTooltip: { classPropertyName: "csvBtnTooltip", publicName: "csvBtnTooltip", isSignal: true, isRequired: false, transformFunction: null }, pdfBtnTooltip: { classPropertyName: "pdfBtnTooltip", publicName: "pdfBtnTooltip", isSignal: true, isRequired: false, transformFunction: null }, printBtnTooltip: { classPropertyName: "printBtnTooltip", publicName: "printBtnTooltip", isSignal: true, isRequired: false, transformFunction: null }, refreshBtnTooltip: { classPropertyName: "refreshBtnTooltip", publicName: "refreshBtnTooltip", isSignal: true, isRequired: false, transformFunction: null }, clearBtnTooltip: { classPropertyName: "clearBtnTooltip", publicName: "clearBtnTooltip", isSignal: true, isRequired: false, transformFunction: null }, newBtnOpt: { classPropertyName: "newBtnOpt", publicName: "newBtnOpt", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clickedNewBtn: "clickedNewBtn", clickedEditBtn: "clickedEditBtn", clickedRemoveBtn: "clickedRemoveBtn", clickedCopyBtn: "clickedCopyBtn", clickedExcelBtn: "clickedExcelBtn", clickedCsvBtn: "clickedCsvBtn", clickedPdfBtn: "clickedPdfBtn", clickedPrintBtn: "clickedPrintBtn", clickedRefreshBtn: "clickedRefreshBtn", clickedClearBtn: "clickedClearBtn" }, ngImport: i0, template: "<mat-toolbar>\r\n  @if (isShow(rolesNewBtn())) {\r\n    @if (newBtnOpt() && newBtnOpt().length > 0) {\r\n      <button [disabled]=\"newBtnDisabled()\" [matMenuTriggerFor]=\"menuNewBtn\"\r\n      mat-icon-button [matTooltip]=\"newBtnTooltip()\">\r\n      <mat-icon>add</mat-icon>\r\n      </button>\r\n      <mat-menu #menuNewBtn=\"matMenu\">\r\n        @for (menuItem of newBtnOpt(); track menuItem) {\r\n          @if (menuItem.title === '-' && !(menuItem.hideFn ? menuItem.hideFn(\"\") : menuItem.hide)) {\r\n            <mat-divider></mat-divider>\r\n          }\r\n          @if (menuItem.title !== '-' && !(menuItem.hideFn ? menuItem.hideFn(\"\") : menuItem.hide)) {\r\n            <button mat-menu-item\r\n              (click)=\"menuItem.onClickFn ? menuItem.onClickFn('') : ''\"\r\n              [disabled]=\"menuItem.disabledFn ? menuItem.disabledFn('') : menuItem.disabled\">\r\n              @if (menuItem.icon) {\r\n                <mat-icon>{{menuItem.icon}}</mat-icon>\r\n              }\r\n              {{ menuItem.title }}\r\n            </button>\r\n          }\r\n        }\r\n      </mat-menu>\r\n    } \r\n    @else {\r\n      <button [disabled]=\"newBtnDisabled()\" (click)=\"onNewClick()\"\r\n              mat-icon-button routerLink=\"new\" routerLinkActive=\"active\" [matTooltip]=\"newBtnTooltip()\">\r\n        <mat-icon>add</mat-icon>\r\n      </button>\r\n    }\r\n  }\r\n\r\n  @if (isShow(rolesEditBtn())) {\r\n    <button [disabled]=\"editBtnDisabled()\" (click)=\"onEditClick()\"\r\n            mat-icon-button routerLink=\"edit\" color=\"primary\" routerLinkActive=\"active\" [matTooltip]=\"editBtnTooltip()\">\r\n      <mat-icon>edit</mat-icon>\r\n    </button>\r\n  }\r\n  @if (isShow(rolesRemoveBtn())) {\r\n    <button [disabled]=\"removeBtnDisabled()\" (click)=\"onRemoveClick()\"\r\n            mat-icon-button routerLink=\"delete\" color=\"warn\" routerLinkActive=\"active\" [matTooltip]=\"removeBtnTooltip()\">\r\n      <mat-icon>remove</mat-icon>\r\n    </button>\r\n  }\r\n  @if (isShow(rolesCopyBtn())) {\r\n    <button [disabled]=\"copyBtnDisabled()\" (click)=\"onCopyClick()\"\r\n            mat-icon-button routerLink=\"delete\" routerLinkActive=\"active\" [matTooltip]=\"copyBtnTooltip()\">\r\n      <mat-icon>content_copy</mat-icon>\r\n    </button>\r\n  }\r\n  @if (isShow(rolesExcelBtn())) {\r\n    <button [disabled]=\"excelBtnDisabled()\" (click)=\"onExcelClick()\"\r\n            mat-icon-button routerLink=\"excel\" routerLinkActive=\"active\" [matTooltip]=\"excelBtnTooltip()\">\r\n      <mat-icon class=\"material-icons-outlined\">explicit</mat-icon>\r\n    </button>\r\n  }\r\n  @if (isShow(rolesCsvBtn())) {\r\n    <button [disabled]=\"csvBtnDisabled()\" (click)=\"onCsvClick()\"\r\n            mat-icon-button routerLink=\"csv\" routerLinkActive=\"active\" [matTooltip]=\"csvBtnTooltip()\">\r\n      <mat-icon class=\"material-icons-outlined\">download</mat-icon>\r\n    </button>\r\n  }\r\n  @if (isShow(rolesPdfBtn())) {\r\n    <button [disabled]=\"pdfBtnDisabled()\" (click)=\"onPdfClick()\"\r\n            mat-icon-button routerLink=\"pdf\" routerLinkActive=\"active\" [matTooltip]=\"pdfBtnTooltip()\">\r\n      <mat-icon class=\"material-icons-outlined\">picture_as_pdf</mat-icon>\r\n    </button>\r\n  }\r\n  @if (isShow(rolesPrintBtn())) {\r\n    <button [disabled]=\"printBtnDisabled()\" (click)=\"onPrintClick()\"\r\n            mat-icon-button routerLink=\"print\" routerLinkActive=\"active\" [matTooltip]=\"printBtnTooltip()\">\r\n      <mat-icon class=\"material-icons-outlined\">print_outline</mat-icon>\r\n    </button>\r\n  }\r\n  @if (isShow(rolesRefreshBtn())) {\r\n    <button  [disabled]=\"refreshBtnDisabled()\" (click)=\"onRefreshGridClick()\"\r\n            mat-icon-button routerLink=\"refresh\" routerLinkActive=\"active\" [matTooltip]=\"refreshBtnTooltip()\">\r\n      <mat-icon>refresh</mat-icon>\r\n    </button>\r\n  }\r\n  @if (isShow(rolesClearBtn())) {\r\n    <button [disabled]=\"clearBtnDisabled()\" (click)=\"onClearClick()\"\r\n            mat-icon-button routerLink=\"clear\" routerLinkActive=\"active\" [matTooltip]=\"clearBtnTooltip()\">\r\n      <mat-icon>clear</mat-icon>\r\n    </button>\r\n  }\r\n</mat-toolbar>\r\n", styles: [""], dependencies: [{ kind: "component", type: MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { 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: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { 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"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: BaseToolbarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngx-uik-base-toolbar', imports: [
+                        MatToolbar,
+                        MatIconButton,
+                        MatTooltip,
+                        MatIcon,
+                        MatMenu,
+                        MatDivider,
+                        MatMenuTrigger,
+                        MatMenuItem,
+                    ], template: "<mat-toolbar>\r\n  @if (isShow(rolesNewBtn())) {\r\n    @if (newBtnOpt() && newBtnOpt().length > 0) {\r\n      <button [disabled]=\"newBtnDisabled()\" [matMenuTriggerFor]=\"menuNewBtn\"\r\n      mat-icon-button [matTooltip]=\"newBtnTooltip()\">\r\n      <mat-icon>add</mat-icon>\r\n      </button>\r\n      <mat-menu #menuNewBtn=\"matMenu\">\r\n        @for (menuItem of newBtnOpt(); track menuItem) {\r\n          @if (menuItem.title === '-' && !(menuItem.hideFn ? menuItem.hideFn(\"\") : menuItem.hide)) {\r\n            <mat-divider></mat-divider>\r\n          }\r\n          @if (menuItem.title !== '-' && !(menuItem.hideFn ? menuItem.hideFn(\"\") : menuItem.hide)) {\r\n            <button mat-menu-item\r\n              (click)=\"menuItem.onClickFn ? menuItem.onClickFn('') : ''\"\r\n              [disabled]=\"menuItem.disabledFn ? menuItem.disabledFn('') : menuItem.disabled\">\r\n              @if (menuItem.icon) {\r\n                <mat-icon>{{menuItem.icon}}</mat-icon>\r\n              }\r\n              {{ menuItem.title }}\r\n            </button>\r\n          }\r\n        }\r\n      </mat-menu>\r\n    } \r\n    @else {\r\n      <button [disabled]=\"newBtnDisabled()\" (click)=\"onNewClick()\"\r\n              mat-icon-button routerLink=\"new\" routerLinkActive=\"active\" [matTooltip]=\"newBtnTooltip()\">\r\n        <mat-icon>add</mat-icon>\r\n      </button>\r\n    }\r\n  }\r\n\r\n  @if (isShow(rolesEditBtn())) {\r\n    <button [disabled]=\"editBtnDisabled()\" (click)=\"onEditClick()\"\r\n            mat-icon-button routerLink=\"edit\" color=\"primary\" routerLinkActive=\"active\" [matTooltip]=\"editBtnTooltip()\">\r\n      <mat-icon>edit</mat-icon>\r\n    </button>\r\n  }\r\n  @if (isShow(rolesRemoveBtn())) {\r\n    <button [disabled]=\"removeBtnDisabled()\" (click)=\"onRemoveClick()\"\r\n            mat-icon-button routerLink=\"delete\" color=\"warn\" routerLinkActive=\"active\" [matTooltip]=\"removeBtnTooltip()\">\r\n      <mat-icon>remove</mat-icon>\r\n    </button>\r\n  }\r\n  @if (isShow(rolesCopyBtn())) {\r\n    <button [disabled]=\"copyBtnDisabled()\" (click)=\"onCopyClick()\"\r\n            mat-icon-button routerLink=\"delete\" routerLinkActive=\"active\" [matTooltip]=\"copyBtnTooltip()\">\r\n      <mat-icon>content_copy</mat-icon>\r\n    </button>\r\n  }\r\n  @if (isShow(rolesExcelBtn())) {\r\n    <button [disabled]=\"excelBtnDisabled()\" (click)=\"onExcelClick()\"\r\n            mat-icon-button routerLink=\"excel\" routerLinkActive=\"active\" [matTooltip]=\"excelBtnTooltip()\">\r\n      <mat-icon class=\"material-icons-outlined\">explicit</mat-icon>\r\n    </button>\r\n  }\r\n  @if (isShow(rolesCsvBtn())) {\r\n    <button [disabled]=\"csvBtnDisabled()\" (click)=\"onCsvClick()\"\r\n            mat-icon-button routerLink=\"csv\" routerLinkActive=\"active\" [matTooltip]=\"csvBtnTooltip()\">\r\n      <mat-icon class=\"material-icons-outlined\">download</mat-icon>\r\n    </button>\r\n  }\r\n  @if (isShow(rolesPdfBtn())) {\r\n    <button [disabled]=\"pdfBtnDisabled()\" (click)=\"onPdfClick()\"\r\n            mat-icon-button routerLink=\"pdf\" routerLinkActive=\"active\" [matTooltip]=\"pdfBtnTooltip()\">\r\n      <mat-icon class=\"material-icons-outlined\">picture_as_pdf</mat-icon>\r\n    </button>\r\n  }\r\n  @if (isShow(rolesPrintBtn())) {\r\n    <button [disabled]=\"printBtnDisabled()\" (click)=\"onPrintClick()\"\r\n            mat-icon-button routerLink=\"print\" routerLinkActive=\"active\" [matTooltip]=\"printBtnTooltip()\">\r\n      <mat-icon class=\"material-icons-outlined\">print_outline</mat-icon>\r\n    </button>\r\n  }\r\n  @if (isShow(rolesRefreshBtn())) {\r\n    <button  [disabled]=\"refreshBtnDisabled()\" (click)=\"onRefreshGridClick()\"\r\n            mat-icon-button routerLink=\"refresh\" routerLinkActive=\"active\" [matTooltip]=\"refreshBtnTooltip()\">\r\n      <mat-icon>refresh</mat-icon>\r\n    </button>\r\n  }\r\n  @if (isShow(rolesClearBtn())) {\r\n    <button [disabled]=\"clearBtnDisabled()\" (click)=\"onClearClick()\"\r\n            mat-icon-button routerLink=\"clear\" routerLinkActive=\"active\" [matTooltip]=\"clearBtnTooltip()\">\r\n      <mat-icon>clear</mat-icon>\r\n    </button>\r\n  }\r\n</mat-toolbar>\r\n" }]
+        }], propDecorators: { rolesNewBtn: [{ type: i0.Input, args: [{ isSignal: true, alias: "rolesNewBtn", required: false }] }], rolesEditBtn: [{ type: i0.Input, args: [{ isSignal: true, alias: "rolesEditBtn", required: false }] }], rolesRemoveBtn: [{ type: i0.Input, args: [{ isSignal: true, alias: "rolesRemoveBtn", required: false }] }], rolesCopyBtn: [{ type: i0.Input, args: [{ isSignal: true, alias: "rolesCopyBtn", required: false }] }], rolesExcelBtn: [{ type: i0.Input, args: [{ isSignal: true, alias: "rolesExcelBtn", required: false }] }], rolesCsvBtn: [{ type: i0.Input, args: [{ isSignal: true, alias: "rolesCsvBtn", required: false }] }], rolesPdfBtn: [{ type: i0.Input, args: [{ isSignal: true, alias: "rolesPdfBtn", required: false }] }], rolesPrintBtn: [{ type: i0.Input, args: [{ isSignal: true, alias: "rolesPrintBtn", required: false }] }], rolesRefreshBtn: [{ type: i0.Input, args: [{ isSignal: true, alias: "rolesRefreshBtn", required: false }] }], rolesClearBtn: [{ type: i0.Input, args: [{ isSignal: true, alias: "rolesClearBtn", required: false }] }], newBtnDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "newBtnDisabled", required: false }] }], editBtnDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "editBtnDisabled", required: false }] }], removeBtnDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "removeBtnDisabled", required: false }] }], copyBtnDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "copyBtnDisabled", required: false }] }], excelBtnDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "excelBtnDisabled", required: false }] }], csvBtnDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "csvBtnDisabled", required: false }] }], pdfBtnDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "pdfBtnDisabled", required: false }] }], printBtnDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "printBtnDisabled", required: false }] }], refreshBtnDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "refreshBtnDisabled", required: false }] }], clearBtnDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearBtnDisabled", required: false }] }], newBtnTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "newBtnTooltip", required: false }] }], editBtnTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "editBtnTooltip", required: false }] }], removeBtnTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "removeBtnTooltip", required: false }] }], copyBtnTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "copyBtnTooltip", required: false }] }], excelBtnTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "excelBtnTooltip", required: false }] }], csvBtnTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "csvBtnTooltip", required: false }] }], pdfBtnTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "pdfBtnTooltip", required: false }] }], printBtnTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "printBtnTooltip", required: false }] }], refreshBtnTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "refreshBtnTooltip", required: false }] }], clearBtnTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearBtnTooltip", required: false }] }], newBtnOpt: [{ type: i0.Input, args: [{ isSignal: true, alias: "newBtnOpt", required: false }] }], clickedNewBtn: [{ type: i0.Output, args: ["clickedNewBtn"] }], clickedEditBtn: [{ type: i0.Output, args: ["clickedEditBtn"] }], clickedRemoveBtn: [{ type: i0.Output, args: ["clickedRemoveBtn"] }], clickedCopyBtn: [{ type: i0.Output, args: ["clickedCopyBtn"] }], clickedExcelBtn: [{ type: i0.Output, args: ["clickedExcelBtn"] }], clickedCsvBtn: [{ type: i0.Output, args: ["clickedCsvBtn"] }], clickedPdfBtn: [{ type: i0.Output, args: ["clickedPdfBtn"] }], clickedPrintBtn: [{ type: i0.Output, args: ["clickedPrintBtn"] }], clickedRefreshBtn: [{ type: i0.Output, args: ["clickedRefreshBtn"] }], clickedClearBtn: [{ type: i0.Output, args: ["clickedClearBtn"] }] } });
+
+var Action;
+(function (Action) {
+    Action["Add"] = "\u0414\u043E\u0431\u0430\u0432\u043B\u0435\u043D\u0438\u0435";
+    Action["Edit"] = "\u0418\u0437\u043C\u0435\u043D\u0435\u043D\u0438\u0435";
+})(Action || (Action = {}));
+
+class BaseEditClass {
+    /** Сервис индикатор загрузки. */
+    loaderService = inject(LoaderService);
+    /** Сервис уведомлений. */
+    notificationService = inject(NotificationService);
+    /** Объект для отписки (вызывается метод unsubscribe при уничтожении компонента). */
+    subscription = new Subscription();
+    ngOnDestroy() {
+        this.subscription.unsubscribe();
+    }
+    onNoClick(event) {
+        this.dialogRef?.close(null);
+        event.preventDefault(); // иначе сработает onSubmit
+    }
+    onSubmit() {
+        if (this.form) {
+            if (this.form.valid) {
+                if (this.dialogData)
+                    Object.keys(this.form.controls).forEach(controlName => this.dialogData.entity[controlName] = this.form?.controls[controlName].value);
+                this.dialogRef?.close(this.dialogData);
+            }
+            else {
+                Object.keys(this.form.controls).forEach(controlName => this.form?.controls[controlName].markAsTouched());
+            }
+        }
+    }
+    formActionIsAdd() {
+        return this.dialogData?.action === Action.Add;
+    }
+    formActionIsEdit() {
+        return this.dialogData?.action === Action.Edit;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: BaseEditClass, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.0", type: BaseEditClass, isStandalone: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: BaseEditClass, decorators: [{
+            type: Directive
+        }] });
+
+var EntityAction;
+(function (EntityAction) {
+    EntityAction["Init"] = "\u0418\u043D\u0438\u0446\u0438\u0430\u043B\u0438\u0437\u0430\u0446\u0438\u044F";
+    EntityAction["Add"] = "\u0414\u043E\u0431\u0430\u0432\u043B\u0435\u043D\u0438\u0435";
+    EntityAction["Edit"] = "\u0418\u0437\u043C\u0435\u043D\u0435\u043D\u0438\u0435";
+    EntityAction["Delete"] = "\u0423\u0434\u0430\u043B\u0435\u043D\u0438\u0435";
+})(EntityAction || (EntityAction = {}));
+
+class BaseFilterClass {
+    /** Сервис для работы с LocalStorage. */
+    localStorageService = inject(LocalStorageService);
+    /** Сервис индикатор загрузки. */
+    loaderService = inject(LoaderService);
+    /** Сервис уведомлений. */
+    notificationService = inject(NotificationService);
+    // eslint-disable-next-line no-magic-numbers
+    defaultDebounceTime = 500;
+    /** Объект для отписки (вызывается метод unsubscribe при уничтожении компонента). */
+    subscription = new Subscription();
+    constructor() {
+    }
+    ngOnDestroy() {
+        this.subscription.unsubscribe();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: BaseFilterClass, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.0", type: BaseFilterClass, isStandalone: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: BaseFilterClass, decorators: [{
+            type: Directive
+        }], ctorParameters: () => [] });
+
+class BaseNavBarMenuClass {
+    subscription = new Subscription();
+    router = inject(Router);
+    ngOnDestroy() {
+        if (this.subscription)
+            this.subscription.unsubscribe();
+    }
+    /** Нажата средняя кнопка (открыть ссылку в новой вкладке). */
+    onMiddleClick(event, baseUrl, menu) {
+        // 1 -	Auxiliary button pressed (usually the middle button)
+        if (event.button === 1) {
+            // event.preventDefault();
+            menu.closeMenu();
+            const urlTree = this.router.serializeUrl(this.router.createUrlTree([baseUrl]));
+            window.open(urlTree, '_blank');
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: BaseNavBarMenuClass, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.0", type: BaseNavBarMenuClass, isStandalone: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: BaseNavBarMenuClass, decorators: [{
+            type: Directive
+        }] });
+
+class LocalStorageService {
+    constructor() { }
+    saveData(key, value) {
+        localStorage.setItem(key, value);
+    }
+    getData(key) {
+        return localStorage.getItem(key);
+    }
+    removeData(key) {
+        localStorage.removeItem(key);
+    }
+    clearData() {
+        localStorage.clear();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: LocalStorageService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: LocalStorageService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: LocalStorageService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [] });
+
+class BasePageClass {
+    dialog = inject(MatDialog);
+    /** Данные для табличного компонента. */
+    data = signal([], ...(ngDevMode ? [{ debugName: "data" }] : []));
+    /** Количество записей по фильтру. */
+    length = signal(0, ...(ngDevMode ? [{ debugName: "length" }] : []));
+    entityService;
+    entityType;
+    entityEditComponent;
+    extraData;
+    // eslint-disable-next-line no-magic-numbers
+    defaultPageIndex = 0;
+    // eslint-disable-next-line no-magic-numbers
+    defaultPageSize = 10;
+    dialogEditWidth = 'auto';
+    dialogRemoveWidth = '400px';
+    routeAddress = '';
+    /** Сообщение при удалении записи(й). */
+    removalMessage = '';
+    /** Заголовок страницы. */
+    pageTitle = '';
+    /**
+     * Создание записи: вызывается перед открытием диалога.
+     */
+    beforeOpenDialogOnNewEvent;
+    /**
+     * Редактирование записи: вызывается перед открытием диалога.
+     */
+    beforeOpenDialogOnEditEvent;
+    /**
+     * Создание записи: вызывается перед сохранением объекта.
+     */
+    beforeSaveOnNewEvent;
+    /**
+     * Редактирование записи: вызывается перед сохранением объекта.
+     */
+    beforeSaveOnEditEvent;
+    /**
+     * Создание записи: вызывается после сохранения объекта.
+     */
+    afterSaveOnNewEvent;
+    /**
+     * Редактирование записи: вызывается после сохранения объекта.
+     */
+    afterSaveOnEditEvent;
+    editorRoles = [];
+    executeRoles = [];
+    /** Список ролей, для которых скрыть элемент. */
+    hideRoles = ['HIDE'];
+    /** Загрузка данных. */
+    loadData$ = new Subject();
+    /** Загрузка количества записей. */
+    loadLength$ = new Subject();
+    /** Очистка фильтра. */
+    clearFilter$ = new Subject();
+    /** Очистка фильтра (для очистки присвоить пустой объект '{}'). */
+    clearFilter = null;
+    /** Разрешен выбор нескольких строк. */
+    allowMultiSelect = false;
+    /** Выбранные строки в таблице. */
+    selected = [];
+    /** Состояние сортировки, пагинации. */
+    tableState;
+    /** Доступность кнопки "Изменить". */
+    editBtnDisabled = true;
+    /** Доступность кнопки "Удалить". */
+    removeBtnDisabled = true;
+    /** Разрешено ли отправлять событие rowDoubleClicked при двойном щелчке мышью. */
+    dblClickedEventEnable = true;
+    // Список элементов контекстного меню.
+    opt = [];
+    // DI
+    router = inject(Router);
+    /** Сервис для работы с LocalStorage. */
+    localStorageService = inject(LocalStorageService);
+    /** Сервис индикатор загрузки. */
+    loaderService = inject(LoaderService);
+    /** Сервис уведомлений. */
+    notificationService = inject(UIKIT_NOTIFICATION_TOKEN);
+    /** Объект для отписки (вызывается метод unsubscribe при уничтожении компонента). */
+    subscription = new Subscription();
+    constructor() {
+        this.tableState = {
+            sortActive: this.localStorageService.getData(this.constructor.name + 'SortActive') || '',
+            sortDirection: (this.localStorageService.getData(this.constructor.name + 'SortDirection') || ''),
+            pageIndex: Number(this.localStorageService.getData(this.constructor.name + 'PageIndex')) || this.defaultPageIndex,
+            pageSize: Number(this.localStorageService.getData(this.constructor.name + 'PageSize')) || this.defaultPageSize
+        };
+    }
+    ngOnDestroy() {
+        this.subscription.unsubscribe();
+    }
+    subscribeToLoadData(fnGetData, fnGetCount, fnMapEntity) {
+        // отменять стримы, созданные ранее
+        const subs = this.loadData$
+            .pipe(tap(() => this.loaderService.show()), switchMap(() => fnGetData()), map$1(v => fnMapEntity ? v.map(fnMapEntity()) : v))
+            .subscribe({
+            next: (response) => {
+                this.data.set(response);
+                this.loaderService.hide();
+            },
+            error: (error) => {
+                this.loaderService.hide();
+                console.log(error);
+                this.notificationService?.error('Произошла ошибка: ' + error, 0);
+            }
+        });
+        this.subscription?.add(subs);
+        const subs2 = this.loadLength$
+            .pipe(switchMap(() => fnGetCount()))
+            .subscribe({
+            next: (response) => {
+                this.length.set(response);
+            },
+            error: (error) => {
+                console.log(error);
+                this.notificationService.error('Произошла ошибка: ' + error, 0);
+            }
+        });
+        this.subscription?.add(subs2);
+        // загрузить данные и количество записей
+        this.loadData$.next(null);
+        this.loadLength$.next(null);
+    }
+    onPageChange(pageState) {
+        this.tableState.pageIndex = pageState.pageIndex;
+        this.tableState.pageSize = pageState.pageSize;
+        this.localStorageService.saveData(this.constructor.name + 'PageIndex', pageState.pageIndex.toString());
+        this.localStorageService.saveData(this.constructor.name + 'PageSize', pageState.pageSize.toString());
+        this.loadData$.next(null);
+        this.loadLength$.next(null);
+    }
+    onSortChange(sortState) {
+        this.tableState.sortActive = sortState.sortActive;
+        this.tableState.sortDirection = sortState.sortDirection;
+        this.localStorageService.saveData(this.constructor.name + 'SortActive', sortState.sortActive);
+        this.localStorageService.saveData(this.constructor.name + 'SortDirection', sortState.sortDirection);
+        this.loadData$.next(null);
+        this.loadLength$.next(null);
+    }
+    entityFactory(type) {
+        return new type();
+    }
+    /** Событие изменение выбранных записей. */
+    onSelectionChange(selected) {
+        this.selected = selected;
+        this.editBtnDisabledUpdate(this.selected);
+        this.removeBtnDisabledUpdate(this.selected);
+    }
+    /** Обновление доступности кнопки "Изменить" - вызывается при изменении выбранных записей. */
+    editBtnDisabledUpdate(selected) {
+        this.editBtnDisabled = !(selected && selected.length === 1);
+    }
+    /** Обновление доступности кнопки "Удалить" - вызывается при изменении выбранных записей. */
+    removeBtnDisabledUpdate(selected) {
+        this.removeBtnDisabled = !(selected && selected.length > 0);
+    }
+    /** Событие двойной клик. */
+    onRowDoubleClicked() {
+        this.editEvent();
+    }
+    /** Событие создание. */
+    newEvent() {
+        if (this.entityEditComponent) {
+            const data = { action: Action.Add, entity: new this.entityType(null) };
+            // Назначить значения полей объекта перед открытием диалога.
+            if (this.beforeOpenDialogOnNewEvent) {
+                this.beforeOpenDialogOnNewEvent(data.entity, data.extraData);
+            }
+            // Открытие окна
+            const dialogRef = this.openDialog(this.entityEditComponent, data, this.dialog);
+            // Обработка закрытия окна
+            const subs = dialogRef.afterClosed().subscribe((result) => {
+                // Проверка результата
+                if (result && result.entity && (Object.keys(result.entity).length !== 0)) {
+                    // Дополнительные действия перед сохранением объекта.
+                    if (this.beforeSaveOnNewEvent)
+                        this.beforeSaveOnNewEvent(result.entity, result.extraData);
+                    const subs = this.entityService.newObject(result.entity)
+                        .subscribe({
+                        next: (obj) => {
+                            // Дополнительные действия после сохранения объекта.
+                            if (this.afterSaveOnNewEvent) {
+                                const callback = () => {
+                                    this.refreshEvent();
+                                    this.notificationService.success('Запись добавлена.');
+                                };
+                                this.afterSaveOnNewEvent(callback.bind(this), obj, result.extraData);
+                            }
+                            else {
+                                this.refreshEvent();
+                                this.notificationService?.success('Запись добавлена.');
+                            }
+                        },
+                        error: (error) => {
+                            console.log('error', error);
+                            this.notificationService.error('Произошла ошибка при добавлении записи: ' + error, 0);
+                        }
+                    });
+                    this.subscription.add(subs);
+                }
+            });
+            this.subscription.add(subs);
+            // Закрытие окна по нажатию Escape
+            const subs2 = dialogRef.keydownEvents().subscribe((event) => {
+                if (event.key === 'Escape') {
+                    dialogRef.close(null);
+                }
+            });
+            this.subscription.add(subs2);
+        }
+        else {
+            this.notificationService.warning('Действие не доступно.');
+        }
+    }
+    /** Событие редактирование. */
+    editEvent() {
+        if (this.selected && this.selected.length === 1) {
+            if (this.entityEditComponent) {
+                const data = { action: Action.Edit, entity: this.selected[0] };
+                // Назначить значения полей объекта перед открытием диалога.
+                if (this.beforeOpenDialogOnEditEvent) {
+                    this.beforeOpenDialogOnEditEvent(data.entity, data.extraData);
+                }
+                // Открытие окна
+                const dialogRef = this.openDialog(this.entityEditComponent, data, this.dialog);
+                // Обработка закрытия окна
+                const subs = dialogRef.afterClosed().subscribe((result) => {
+                    // Проверка результата
+                    if (result && result.entity && (Object.keys(result.entity).length !== 0)) {
+                        // Дополнительные действия перед сохранением объекта.
+                        if (this.beforeSaveOnEditEvent)
+                            this.beforeSaveOnEditEvent(result.entity, result.extraData);
+                        const subs = this.entityService.editObject(result.entity)
+                            .subscribe({
+                            next: () => {
+                                // Дополнительные действия после сохранения объекта.
+                                if (this.afterSaveOnEditEvent) {
+                                    const callback = () => {
+                                        this.refreshEvent();
+                                        this.notificationService.success('Запись изменена.');
+                                    };
+                                    this.afterSaveOnEditEvent(callback.bind(this), result.entity, result.extraData);
+                                }
+                                else {
+                                    this.refreshEvent();
+                                    this.notificationService.success('Запись изменена.');
+                                }
+                            },
+                            error: (error) => {
+                                console.log('error', error);
+                                this.notificationService.error('Произошла ошибка при изменении записи: ' + error, 0);
+                            }
+                        });
+                        this.subscription.add(subs);
+                    }
+                });
+                this.subscription.add(subs);
+                // Закрытие окна по нажатию Escape
+                const subs2 = dialogRef.keydownEvents().subscribe((event) => {
+                    if (event.key === 'Escape') {
+                        dialogRef.close(null);
+                    }
+                });
+                this.subscription.add(subs2);
+            }
+            else {
+                this.notificationService.warning('Действие не доступно.');
+            }
+        }
+    }
+    /** Событие удаление. */
+    removeEvent() {
+        // если выбрана запись(и)
+        if (this.selected && this.selected.length > 0) {
+            const dialogRef = this.openDialogRemoveConfirm(this.removalMessage);
+            if (dialogRef) {
+                const subs = dialogRef.afterClosed().subscribe((result) => {
+                    // при подтверждении возвращается 'delete'
+                    if (result === 'delete') {
+                        // готовим объект с запросами на удаление
+                        const sourcesObject = {};
+                        this.selected.forEach((item, index) => sourcesObject['obj' + index] = this.entityService.deleteObject(item));
+                        // ждем, когда выполнятся все запросы
+                        const subs = forkJoin(sourcesObject)
+                            .subscribe({
+                            next: () => {
+                                this.refreshEvent();
+                                this.notificationService.success('Выбранные записи удалены.');
+                            },
+                            error: (error) => {
+                                console.log('error', error);
+                                this.notificationService?.error('Произошла ошибка при удалении записи: ' + error, 0);
+                            }
+                        });
+                        this.subscription.add(subs);
+                    }
+                });
+                this.subscription.add(subs);
+                // Закрытие окна по нажатию Escape
+                const subs2 = dialogRef.keydownEvents().subscribe((event) => {
+                    if (event.key === 'Escape') {
+                        dialogRef.close(null);
+                    }
+                });
+                this.subscription.add(subs2);
+            }
+        }
+    }
+    /** Событие обновления данных. */
+    refreshEvent() {
+        this.loadData$.next(null);
+        this.loadLength$.next(null);
+    }
+    /** Событие очистки фильтра. */
+    clearEvent() {
+        this.clearFilter$.next(null);
+        this.clearFilter = {};
+    }
+    /** Изменение сообщения об удалении. */
+    onRemovalMessageChange(message) {
+        this.removalMessage = message;
+    }
+    /** Изменение заголовка страницы. */
+    onPageTitleChange(title) {
+        this.pageTitle = title;
+    }
+    openDialog(entityComponent, data, dialog) {
+        // create dialog config
+        const dialogConfig = new MatDialogConfig();
+        dialogConfig.disableClose = true;
+        dialogConfig.autoFocus = true;
+        dialogConfig.width = this.dialogEditWidth;
+        dialogConfig.data = data;
+        dialogConfig.panelClass = this.entityType.name + '-edit-dialog';
+        // return dialog
+        return dialog.open(entityComponent, dialogConfig);
+    }
+    openDialogRemoveConfirm(removalMessage) {
+        let message = 'Вы хотите удалить ';
+        message += removalMessage ?
+            removalMessage :
+            this.allowMultiSelect ? `выбранные записи (${this.selected.length})?` : 'выбранную запись?';
+        return this.dialog.open(DialogComponent, {
+            width: this.dialogRemoveWidth,
+            data: {
+                id: 'delete',
+                title: 'Подтверждение',
+                message: message,
+                btnNoTitle: 'Отмена',
+                btnYesTitle: 'Удалить'
+            }
+        });
+    }
+    // contextMenu: При щелчке ПКМ открыть в новой вкладке.
+    onMiddleButton(baseUrl, queryParamName, queryParamValue) {
+        return ($event, item, contextMenu) => {
+            // Нажата средняя кнопка (в новой вкладке).
+            // 1 -	Auxiliary button pressed (usually the middle button)
+            if ($event.button === 1) {
+                //$event.preventDefault();
+                contextMenu.closeMenu();
+                // Converts the route into a string that can be used
+                // with the window.open() function
+                const url = this.router.serializeUrl(queryParamName && queryParamValue ?
+                    this.router.createUrlTree([baseUrl], { queryParams: { [queryParamName]: item[queryParamValue] } })
+                    : this.router.createUrlTree([baseUrl]));
+                window.open(url, '_blank');
+            }
+        };
+    }
+    // Action в таблице: При щелчке ПКМ открыть в новой вкладке.
+    onActionMiddleButton(baseUrl, queryParamName, queryParamValue) {
+        return ($event, item) => {
+            // Нажата средняя кнопка (в новой вкладке).
+            // 1 -	Auxiliary button pressed (usually the middle button)
+            if ($event.button === 1) {
+                //$event.preventDefault();
+                // Converts the route into a string that can be used
+                // with the window.open() function
+                const url = this.router.serializeUrl(queryParamName && queryParamValue ?
+                    this.router.createUrlTree([baseUrl], { queryParams: { [queryParamName]: item[queryParamValue] } })
+                    : this.router.createUrlTree([baseUrl]));
+                window.open(url, '_blank');
+            }
+        };
+    }
+    dateToString(date) {
+        return date ? (new Date(date)).toLocaleString('ru-RU', { timeZone: 'Europe/Samara' }) : null; // MSK+01
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: BasePageClass, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.0", type: BasePageClass, isStandalone: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: BasePageClass, decorators: [{
+            type: Directive
+        }], ctorParameters: () => [] });
+
+class BaseServiceClass {
+    countRoute = 'count';
+    pageIndexParam = 'page';
+    pageSizeParam = 'limit';
+    sortColumnParam = 'column';
+    directionParam = 'direction';
+    http = inject(HttpClient);
+    getObjects() {
+        return this.http.get(this.baseRoute)
+            .pipe(map(data => data.map(item => new this.entityType(item).deserialize(item))));
+    }
+    getObject(id) {
+        return this.http.get(this.baseRoute + id)
+            .pipe(map(data => new this.entityType(data).deserialize(data)));
+    }
+    getCount() {
+        return this.http.get(this.baseRoute + this.countRoute);
+    }
+    getObjectsByPaging(pageIndex, pageSize, sortColumn, direction) {
+        const params = this.getParams(pageIndex, pageSize, sortColumn, direction);
+        return this.http.get(this.baseRoute, { params })
+            .pipe(map(data => data.map(item => new this.entityType(item).deserialize(item))));
+    }
+    newObject(entity) {
+        return this.http.post(this.baseRoute, entity);
+    }
+    editObject(entity) {
+        return this.http.put(this.baseRoute + entity.id, entity);
+    }
+    deleteObject(entity) {
+        return this.http.delete(this.baseRoute + entity.id);
+    }
+    getParams(pageIndex, pageSize, sortColumn, direction) {
+        let params = new HttpParams();
+        if (pageIndex + 1)
+            // переход от индекса к номеру страницы
+            params = params.append(this.pageIndexParam, pageIndex + 1);
+        if (pageSize)
+            params = params.append(this.pageSizeParam, pageSize);
+        if (sortColumn)
+            params = params.append(this.sortColumnParam, sortColumn);
+        if (direction)
+            params = params.append(this.directionParam, direction);
+        return params;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: BaseServiceClass, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: BaseServiceClass, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: BaseServiceClass, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
+class SafePipe {
+    sanitizer = inject(DomSanitizer);
+    transform(url) {
+        return this.sanitizer.bypassSecurityTrustResourceUrl(url);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: SafePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.1.0", ngImport: i0, type: SafePipe, isStandalone: true, name: "safe" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: SafePipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'safe'
+                }]
+        }] });
+
+class TimePipe {
+    transform(value) {
+        // const hour = Math.abs(value) >= 60 ? Math.round(value / 60) + 'ч.' : '';
+        // const minute = ' ' + Math.abs(value % 60) + 'м.';
+        // return value === 0 ? '0' : hour + ' ' + minute;
+        const hour = Math.abs(value) >= 60 ? Math.floor(Math.abs(value) / 60).toString().padStart(2, '0') : '00';
+        const minute = Math.abs(value % 60).toString().padStart(2, '0');
+        const time = hour + ':' + minute;
+        return value < 0 ? '-' + time : time;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TimePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.1.0", ngImport: i0, type: TimePipe, isStandalone: true, name: "time" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TimePipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'time'
+                }]
+        }] });
+
+class TruncatePipe {
+    // Usage:
+    //   {{ str | truncate:[20] }} // or
+    //   {{ str | truncate:[20, '...'] }} // or|
+    transform(value, args) {
+        const limit = args.length > 0 ? parseInt(args[0], 10) : 20;
+        const trail = args.length > 1 ? args[1] : '...';
+        return value.length > limit ? value.substring(0, limit) + trail : value;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TruncatePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.1.0", ngImport: i0, type: TruncatePipe, isStandalone: true, name: "truncate" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TruncatePipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'truncate'
+                }]
+        }] });
+
+class NavBarComponent extends BaseNavBarMenuClass {
+    /** Видимость панели, когда loggedIn === false. */
+    visibleOnLogout = input(false, ...(ngDevMode ? [{ debugName: "visibleOnLogout" }] : []));
+    /** Видимость аватара. */
+    visibleAvatar = input(true, ...(ngDevMode ? [{ debugName: "visibleAvatar" }] : []));
+    /** Видимость кнопки "Выйти". */
+    visibleLogoutBtn = input(true, ...(ngDevMode ? [{ debugName: "visibleLogoutBtn" }] : []));
+    /** Признак, что пользователь авторизован. */
+    loggedIn = input(false, ...(ngDevMode ? [{ debugName: "loggedIn" }] : []));
+    /** ФИО пользователя. */
+    fioUser = input('', ...(ngDevMode ? [{ debugName: "fioUser" }] : []));
+    /** Всплывающая подсказка о пользователе. */
+    userTooltip = input('', ...(ngDevMode ? [{ debugName: "userTooltip" }] : []));
+    /** URL аватара */
+    avatarURL = input('', ...(ngDevMode ? [{ debugName: "avatarURL" }] : []));
+    /** Нажата кнопка "Выйти". */
+    logout = output();
+    dialog = inject(MatDialog);
+    constructor() {
+        super();
+    }
+    onLogout() {
+        this.logout.emit(this.router.url);
+    }
+    openDialog() {
+        const dialogRef = this.dialog.open(DialogComponent, {
+            width: '400px',
+            data: {
+                id: 'logout',
+                title: 'Подтверждение',
+                message: 'Вы хотите выйти?',
+                btnNoTitle: 'Отмена',
+                btnYesTitle: 'Выйти'
+            }
+        });
+        const subs = dialogRef.afterClosed().subscribe((id) => {
+            if (id) {
+                this.onLogout();
+            }
+        });
+        this.subscription.add(subs);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: NavBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: NavBarComponent, isStandalone: true, selector: "ngx-uik-navbar", inputs: { visibleOnLogout: { classPropertyName: "visibleOnLogout", publicName: "visibleOnLogout", isSignal: true, isRequired: false, transformFunction: null }, visibleAvatar: { classPropertyName: "visibleAvatar", publicName: "visibleAvatar", isSignal: true, isRequired: false, transformFunction: null }, visibleLogoutBtn: { classPropertyName: "visibleLogoutBtn", publicName: "visibleLogoutBtn", isSignal: true, isRequired: false, transformFunction: null }, loggedIn: { classPropertyName: "loggedIn", publicName: "loggedIn", isSignal: true, isRequired: false, transformFunction: null }, fioUser: { classPropertyName: "fioUser", publicName: "fioUser", isSignal: true, isRequired: false, transformFunction: null }, userTooltip: { classPropertyName: "userTooltip", publicName: "userTooltip", isSignal: true, isRequired: false, transformFunction: null }, avatarURL: { classPropertyName: "avatarURL", publicName: "avatarURL", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { logout: "logout" }, usesInheritance: true, ngImport: i0, template: "@if (visibleOnLogout() || loggedIn()) {\r\n  <nav class=\"ngx-uik-navbar-header\">\r\n    \r\n    <ng-content></ng-content>\r\n\r\n    <div class=\"flex-spacer\"></div>\r\n    \r\n    @if (visibleAvatar() && (loggedIn() === false || !avatarURL)) {\r\n      <mat-icon [matTooltip]=\"userTooltip()\">account_circle</mat-icon>\r\n    }\r\n    @if (visibleAvatar() && loggedIn() && avatarURL()) {\r\n      <img\r\n        class=\"user-photo\"\r\n        [src]=\"avatarURL() | safe\"\r\n        loading=\"lazy\"\r\n        [alt]=\"fioUser()\"\r\n        [matTooltip]=\"userTooltip()\">\r\n    }\r\n\r\n    <span class = \"user-name\" [matTooltip]=\"userTooltip()\">\r\n      {{ fioUser() }}\r\n    </span>\r\n\r\n    @if (visibleLogoutBtn()) {\r\n      <a mat-button class=\"pm-button\" (click)=\"openDialog()\">\u0412\u044B\u0439\u0442\u0438 <mat-icon>logout</mat-icon></a>\r\n    }\r\n  </nav>\r\n}", styles: [".ngx-uik-navbar-header{display:flex;flex-wrap:wrap;align-items:center;padding:8px 16px}.flex-spacer{flex-grow:1}.user-name{margin-left:8px;line-height:1rem;white-space:normal}.user-photo{border-radius:50%;width:32px;height:32px;margin-right:10px}.mat-mdc-button{color:#fff!important;padding-left:16px!important;padding-right:16px!important}.mdc-button{letter-spacing:normal}\n"], dependencies: [{ kind: "component", type: MatAnchor, 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: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: SafePipe, name: "safe" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: NavBarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngx-uik-navbar', imports: [MatAnchor, MatIcon, MatTooltip, SafePipe], template: "@if (visibleOnLogout() || loggedIn()) {\r\n  <nav class=\"ngx-uik-navbar-header\">\r\n    \r\n    <ng-content></ng-content>\r\n\r\n    <div class=\"flex-spacer\"></div>\r\n    \r\n    @if (visibleAvatar() && (loggedIn() === false || !avatarURL)) {\r\n      <mat-icon [matTooltip]=\"userTooltip()\">account_circle</mat-icon>\r\n    }\r\n    @if (visibleAvatar() && loggedIn() && avatarURL()) {\r\n      <img\r\n        class=\"user-photo\"\r\n        [src]=\"avatarURL() | safe\"\r\n        loading=\"lazy\"\r\n        [alt]=\"fioUser()\"\r\n        [matTooltip]=\"userTooltip()\">\r\n    }\r\n\r\n    <span class = \"user-name\" [matTooltip]=\"userTooltip()\">\r\n      {{ fioUser() }}\r\n    </span>\r\n\r\n    @if (visibleLogoutBtn()) {\r\n      <a mat-button class=\"pm-button\" (click)=\"openDialog()\">\u0412\u044B\u0439\u0442\u0438 <mat-icon>logout</mat-icon></a>\r\n    }\r\n  </nav>\r\n}", styles: [".ngx-uik-navbar-header{display:flex;flex-wrap:wrap;align-items:center;padding:8px 16px}.flex-spacer{flex-grow:1}.user-name{margin-left:8px;line-height:1rem;white-space:normal}.user-photo{border-radius:50%;width:32px;height:32px;margin-right:10px}.mat-mdc-button{color:#fff!important;padding-left:16px!important;padding-right:16px!important}.mdc-button{letter-spacing:normal}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { visibleOnLogout: [{ type: i0.Input, args: [{ isSignal: true, alias: "visibleOnLogout", required: false }] }], visibleAvatar: [{ type: i0.Input, args: [{ isSignal: true, alias: "visibleAvatar", required: false }] }], visibleLogoutBtn: [{ type: i0.Input, args: [{ isSignal: true, alias: "visibleLogoutBtn", required: false }] }], loggedIn: [{ type: i0.Input, args: [{ isSignal: true, alias: "loggedIn", required: false }] }], fioUser: [{ type: i0.Input, args: [{ isSignal: true, alias: "fioUser", required: false }] }], userTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "userTooltip", required: false }] }], avatarURL: [{ type: i0.Input, args: [{ isSignal: true, alias: "avatarURL", required: false }] }], logout: [{ type: i0.Output, args: ["logout"] }] } });
+
+class NotFoundComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: NotFoundComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.0", type: NotFoundComponent, isStandalone: true, selector: "ngx-uik-not-found", ngImport: i0, template: "<div class=\"center\">\r\n  <h3 class=\"mat-display-1\">\u0421\u0442\u0440\u0430\u043D\u0438\u0446\u0430 \u043D\u0435 \u043D\u0430\u0439\u0434\u0435\u043D\u0430</h3>\r\n</div>\r\n", styles: [".center{display:flex;justify-content:center;margin:3rem}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: NotFoundComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngx-uik-not-found', standalone: true, template: "<div class=\"center\">\r\n  <h3 class=\"mat-display-1\">\u0421\u0442\u0440\u0430\u043D\u0438\u0446\u0430 \u043D\u0435 \u043D\u0430\u0439\u0434\u0435\u043D\u0430</h3>\r\n</div>\r\n", styles: [".center{display:flex;justify-content:center;margin:3rem}\n"] }]
+        }] });
+
+class ProgressSpinnerComponent {
+    cdRef = inject(ChangeDetectorRef);
+    ngAfterViewInit() {
+        this.cdRef.detectChanges();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ProgressSpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.0", type: ProgressSpinnerComponent, isStandalone: true, selector: "ngx-uik-loader", ngImport: i0, template: `
+    <div class="loading-indicator" mat-dialog-content>
+      <mat-progress-spinner mode="indeterminate">
+      </mat-progress-spinner>
+    </div>
+  `, isInline: true, styles: [".loading-indicator{position:fixed;z-index:999;height:2em;width:2em;overflow:initial;margin:auto;inset:0}.loading-indicator:before{content:\"\";display:block;position:fixed;top:0;left:0;width:100%;height:100%;background-color:#0000004d}\n"], dependencies: [{ kind: "component", type: 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.1.0", ngImport: i0, type: ProgressSpinnerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngx-uik-loader', template: `
+    <div class="loading-indicator" mat-dialog-content>
+      <mat-progress-spinner mode="indeterminate">
+      </mat-progress-spinner>
+    </div>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatProgressSpinner], styles: [".loading-indicator{position:fixed;z-index:999;height:2em;width:2em;overflow:initial;margin:auto;inset:0}.loading-indicator:before{content:\"\";display:block;position:fixed;top:0;left:0;width:100%;height:100%;background-color:#0000004d}\n"] }]
+        }] });
+
+class BaseSelectAutocompleteWithVsComponent {
+    // https://stackblitz.com/edit/autocomplete-with-virtual-scroll-dc9u2g
+    // Все элементы
+    items = input([], ...(ngDevMode ? [{ debugName: "items" }] : []));
+    // Выбранный элемент (входной параметр)
+    selectedItemInput = input(undefined, ...(ngDevMode ? [{ debugName: "selectedItemInput" }] : []));
+    // Заголовок
+    title = input('', ...(ngDevMode ? [{ debugName: "title" }] : []));
+    // Видимость
+    isVisible = input(true, ...(ngDevMode ? [{ debugName: "isVisible" }] : []));
+    // Обязательность
+    isRequired = input(false, ...(ngDevMode ? [{ debugName: "isRequired" }] : []));
+    // Доступность
+    isDisabled = input(false, ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
+    // Доступность
+    width = input('200', ...(ngDevMode ? [{ debugName: "width" }] : []));
+    // Выбранный элемент
+    selectedItem = linkedSignal(() => this.selectedItemInput(), ...(ngDevMode ? [{ debugName: "selectedItem" }] : []));
+    // Событие изменения выбранного элемента
+    selectedItemChange = output();
+    height = '200px';
+    // input элемент
+    inputCtrl = new FormControl();
+    // отфильтрованные (отображаемые) элементы
+    filteredItems = [];
+    subscription = new Subscription();
+    constructor() {
+        effect(() => {
+            console.log('ITEMS =', this.items());
+            //this.filteredItems = this.items();
+            console.log('selectedItem =', this.selectedItemInput());
+            if (this.items().length > 0) {
+                console.log('filteredItems SET');
+                this.setFileredItems(this.items());
+                this.inputCtrl.setValue(this.selectedItemInput());
+            }
+        });
+    }
+    ngOnInit() {
+        // Listen for changes to the input
+        const subs = this.inputCtrl.valueChanges
+            .pipe(startWith$1(''), 
+        // eslint-disable-next-line no-magic-numbers
+        debounceTime(500), distinctUntilChanged(), 
+        // Note: If the option value is bound to object, after selecting the option
+        // Note: the value will change from string to {}. We want to perform search
+        // Note: only when the type is string (no match)
+        //filter(q => typeof q === 'string'),
+        //tap((v) => console.log('v=', v)),
+        map((value) => {
+            // Filter the options
+            console.log('typeof value =', typeof value);
+            if (typeof value === 'undefined') {
+                this.setFileredItems(this.items());
+            }
+            else {
+                if (typeof value !== 'object') {
+                    console.log('v1=', value);
+                    this.setFileredItems(this.items()
+                        .filter(option => option.viewValue.toLowerCase().includes(value.toLowerCase())));
+                }
+                else {
+                    // typeof value === 'object'
+                    console.log('v2=', value);
+                    if (value) {
+                        // this.predmet = value;
+                        this.setFileredItems(this.items()
+                            .filter((option) => option.viewValue.toLowerCase().includes(value.viewValue.toLowerCase())));
+                        console.log('v3=', value);
+                    }
+                    else {
+                        this.setFileredItems(this.items());
+                        console.log('v4=', value);
+                    }
+                }
+            }
+        }))
+            .subscribe();
+        this.subscription.add(subs);
+        if (this.isDisabled()) {
+            this.inputCtrl.disable();
+        }
+        else {
+            this.inputCtrl.enable();
+        }
+    }
+    ngOnDestroy() {
+        if (this.subscription)
+            this.subscription.unsubscribe();
+    }
+    onSelectedItemChange(item) {
+        console.log("onSelectedItemChange, item=", item);
+        this.selectedItem.set(item);
+        this.selectedItemChange.emit(item);
+    }
+    onClearClick($event) {
+        $event.stopPropagation();
+        this.inputCtrl.setValue('');
+    }
+    displayWithFn(lookup) {
+        return lookup ? lookup.viewValue : null;
+    }
+    setFileredItems(items) {
+        this.filteredItems = items;
+        // Recompute how big the viewport should be.
+        // eslint-disable-next-line no-magic-numbers
+        if (items.length < 4) {
+            // eslint-disable-next-line no-magic-numbers
+            this.height = items.length * 50 + 'px';
+        }
+        else {
+            this.height = '200px';
+        }
+        console.log('update filteredItems =', this.filteredItems);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: BaseSelectAutocompleteWithVsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: BaseSelectAutocompleteWithVsComponent, isStandalone: true, selector: "ngx-uik-select-autocomplete-with-vs", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, selectedItemInput: { classPropertyName: "selectedItemInput", publicName: "selectedItemInput", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, isVisible: { classPropertyName: "isVisible", publicName: "isVisible", isSignal: true, isRequired: false, transformFunction: null }, isRequired: { classPropertyName: "isRequired", publicName: "isRequired", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedItemChange: "selectedItemChange" }, ngImport: i0, template: "@if (isVisible()) {\r\n  <mat-form-field [style.width.px]=\"width()\">\r\n    <mat-label>{{ title() }}</mat-label>\r\n    <input type=\"text\"\r\n          [placeholder]=title()\r\n          aria-label=\"Number\"\r\n          matInput\r\n          (ngModelChange)=\"onSelectedItemChange($event)\"\r\n          [formControl]=\"inputCtrl\"\r\n          [matAutocomplete]=\"auto\"\r\n          [required]=\"isRequired() ? 'required' : ''\"\r\n    >\r\n    @if (!isDisabled && selectedItem()) {\r\n      <button mat-button matSuffix mat-icon-button aria-label=\"Clear\" (click)=\"onClearClick($event)\">\r\n        <mat-icon>close</mat-icon>\r\n      </button>\r\n    }\r\n    <mat-autocomplete #auto=\"matAutocomplete\" [displayWith]=\"displayWithFn\" showPanel=\"true\">\r\n      <cdk-virtual-scroll-viewport class=\"autocomplete-test-viewport\" [style.height]=\"height\" itemSize=\"25\">\r\n        <mat-option *cdkVirtualFor=\"let option of filteredItems\" [value]=\"option\" class=\"autocomplete-item\">\r\n          {{option.viewValue}}\r\n        </mat-option>\r\n      </cdk-virtual-scroll-viewport>\r\n    </mat-autocomplete>\r\n    @if (inputCtrl.invalid) {\r\n    <mat-error>\u0412\u0432\u0435\u0434\u0438\u0442\u0435 {{title()}}</mat-error>\r\n    }\r\n    @if (!inputCtrl.value) {\r\n    <mat-hint>\u041D\u0430\u0447\u043D\u0438\u0442\u0435 \u0432\u0432\u043E\u0434\u0438\u0442\u044C ...</mat-hint>\r\n    }\r\n  </mat-form-field>\r\n}", styles: ["mat-form-field{margin-right:12px}.autocomplete-item{height:50px}\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.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i2.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i2.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: 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: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i3$1.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i3$1.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i3$1.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { 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: MatLabel, selector: "mat-label" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: BaseSelectAutocompleteWithVsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngx-uik-select-autocomplete-with-vs', imports: [FormsModule, ReactiveFormsModule, MatAutocompleteModule, MatHint, MatError, MatOption, MatIcon,
+                        MatFormField, ScrollingModule, MatInput, MatLabel], template: "@if (isVisible()) {\r\n  <mat-form-field [style.width.px]=\"width()\">\r\n    <mat-label>{{ title() }}</mat-label>\r\n    <input type=\"text\"\r\n          [placeholder]=title()\r\n          aria-label=\"Number\"\r\n          matInput\r\n          (ngModelChange)=\"onSelectedItemChange($event)\"\r\n          [formControl]=\"inputCtrl\"\r\n          [matAutocomplete]=\"auto\"\r\n          [required]=\"isRequired() ? 'required' : ''\"\r\n    >\r\n    @if (!isDisabled && selectedItem()) {\r\n      <button mat-button matSuffix mat-icon-button aria-label=\"Clear\" (click)=\"onClearClick($event)\">\r\n        <mat-icon>close</mat-icon>\r\n      </button>\r\n    }\r\n    <mat-autocomplete #auto=\"matAutocomplete\" [displayWith]=\"displayWithFn\" showPanel=\"true\">\r\n      <cdk-virtual-scroll-viewport class=\"autocomplete-test-viewport\" [style.height]=\"height\" itemSize=\"25\">\r\n        <mat-option *cdkVirtualFor=\"let option of filteredItems\" [value]=\"option\" class=\"autocomplete-item\">\r\n          {{option.viewValue}}\r\n        </mat-option>\r\n      </cdk-virtual-scroll-viewport>\r\n    </mat-autocomplete>\r\n    @if (inputCtrl.invalid) {\r\n    <mat-error>\u0412\u0432\u0435\u0434\u0438\u0442\u0435 {{title()}}</mat-error>\r\n    }\r\n    @if (!inputCtrl.value) {\r\n    <mat-hint>\u041D\u0430\u0447\u043D\u0438\u0442\u0435 \u0432\u0432\u043E\u0434\u0438\u0442\u044C ...</mat-hint>\r\n    }\r\n  </mat-form-field>\r\n}", styles: ["mat-form-field{margin-right:12px}.autocomplete-item{height:50px}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], selectedItemInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedItemInput", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], isVisible: [{ type: i0.Input, args: [{ isSignal: true, alias: "isVisible", required: false }] }], isRequired: [{ type: i0.Input, args: [{ isSignal: true, alias: "isRequired", required: false }] }], isDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDisabled", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], selectedItemChange: [{ type: i0.Output, args: ["selectedItemChange"] }] } });
+
+class BaseSelectWithGroupComponent {
+    // Все группы
+    groups = input([], ...(ngDevMode ? [{ debugName: "groups" }] : []));
+    // Выбранные элементы, ключи (BaseSelectItem.value)
+    selectedItems = input([], ...(ngDevMode ? [{ debugName: "selectedItems" }] : []));
+    // Заголовок
+    title = input('', ...(ngDevMode ? [{ debugName: "title" }] : []));
+    // Событие изменения выбранных элементов
+    selectedItemsChange = output();
+    separatorKeysCodes = [ENTER, COMMA];
+    control = new FormControl([]);
+    constructor() {
+        effect(() => {
+            if (this.groups().length > 0) {
+                this.control.setValue(this.selectedItems().map(i => Number(i)));
+            }
+        });
+    }
+    selectionChange($event) {
+        this.selectedItemsChange.emit($event.value.map((i) => i.toString()));
+    }
+    onClearClick($event) {
+        $event.stopPropagation();
+        // this.control.setValue('');
+        this.selectedItemsChange.emit([]);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: BaseSelectWithGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: BaseSelectWithGroupComponent, isStandalone: true, selector: "ngx-uik-select-with-group", inputs: { groups: { classPropertyName: "groups", publicName: "groups", isSignal: true, isRequired: false, transformFunction: null }, selectedItems: { classPropertyName: "selectedItems", publicName: "selectedItems", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedItemsChange: "selectedItemsChange" }, ngImport: i0, template: "<mat-form-field class=\"select-with-group\" appearance=\"fill\">\r\n  <mat-label>{{ title() }}</mat-label>\r\n  <mat-select [formControl]=\"control\" (selectionChange)=\"selectionChange($event)\" multiple>\r\n    @for (group of groups(); track group) {\r\n      <mat-optgroup [label]=\"group.name\">\r\n        @for (item of group.items; track item) {\r\n          <mat-option [value]=\"item.value\" >\r\n            {{item.viewValue}}\r\n          </mat-option>\r\n        }\r\n      </mat-optgroup>\r\n    }\r\n\r\n  </mat-select>\r\n  @if (control.value && control.value!.length > 0) {\r\n    <button matSuffix mat-icon-button aria-label=\"Clear\" (click)=\"onClearClick($event)\">\r\n      <mat-icon>close</mat-icon>\r\n    </button>\r\n  }\r\n</mat-form-field>\r\n", styles: [".select-with-group{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatOption$1, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: MatOptgroup, selector: "mat-optgroup", inputs: ["label", "disabled"], exportAs: ["matOptgroup"] }, { 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: MatFormField$1, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel$1, selector: "mat-label" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: BaseSelectWithGroupComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngx-uik-select-with-group', imports: [FormsModule, ReactiveFormsModule, MatIcon, MatOption$1, MatOptgroup, MatSelect, MatFormField$1, MatLabel$1], template: "<mat-form-field class=\"select-with-group\" appearance=\"fill\">\r\n  <mat-label>{{ title() }}</mat-label>\r\n  <mat-select [formControl]=\"control\" (selectionChange)=\"selectionChange($event)\" multiple>\r\n    @for (group of groups(); track group) {\r\n      <mat-optgroup [label]=\"group.name\">\r\n        @for (item of group.items; track item) {\r\n          <mat-option [value]=\"item.value\" >\r\n            {{item.viewValue}}\r\n          </mat-option>\r\n        }\r\n      </mat-optgroup>\r\n    }\r\n\r\n  </mat-select>\r\n  @if (control.value && control.value!.length > 0) {\r\n    <button matSuffix mat-icon-button aria-label=\"Clear\" (click)=\"onClearClick($event)\">\r\n      <mat-icon>close</mat-icon>\r\n    </button>\r\n  }\r\n</mat-form-field>\r\n", styles: [".select-with-group{width:100%}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { groups: [{ type: i0.Input, args: [{ isSignal: true, alias: "groups", required: false }] }], selectedItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedItems", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], selectedItemsChange: [{ type: i0.Output, args: ["selectedItemsChange"] }] } });
+
+class TableComponent {
+    /** Отображаемые данные. */
+    data = input([], ...(ngDevMode ? [{ debugName: "data" }] : []));
+    /** Количество записей. */
+    length = input(0, ...(ngDevMode ? [{ debugName: "length" }] : []));
+    /** Настройки колонок. */
+    columnOptions = input([], ...(ngDevMode ? [{ debugName: "columnOptions" }] : []));
+    /** Состояние сортировки, пагинации. */
+    tableState = input.required(...(ngDevMode ? [{ debugName: "tableState" }] : []));
+    /** Разрешен выбор нескольких строк. */
+    allowMultiSelect = input(false, ...(ngDevMode ? [{ debugName: "allowMultiSelect" }] : []));
+    /** Список элементов контекстного меню. */
+    opt = input([], ...(ngDevMode ? [{ debugName: "opt" }] : []));
+    /** Отправка события rowDoubleClicked (при двойном щелчке мышью) отключена. */
+    rowDblClickedDisable = input(false, ...(ngDevMode ? [{ debugName: "rowDblClickedDisable" }] : []));
+    /** Отображать строку с итогом. */
+    footer = input(false, ...(ngDevMode ? [{ debugName: "footer" }] : []));
+    /** Изменение страницы. */
+    pageStateChange = output();
+    /** Изменение сортировки. */
+    sortStateChange = output();
+    /** Изменение выбранных записей. */
+    selectionChange = output();
+    /** Двойной щелчек ЛКМ*/
+    rowDoubleClicked = output();
+    sort = viewChild(MatSort, ...(ngDevMode ? [{ debugName: "sort" }] : []));
+    paginator = viewChild(MatPaginator, ...(ngDevMode ? [{ debugName: "paginator" }] : []));
+    contextMenu = viewChild(MatMenuTrigger, ...(ngDevMode ? [{ debugName: "contextMenu" }] : []));
+    pageState = linkedSignal(() => {
+        return { pageIndex: this.tableState().pageIndex, pageSize: this.tableState().pageSize };
+    }, ...(ngDevMode ? [{ debugName: "pageState" }] : []));
+    sortState = linkedSignal(() => {
+        return { sortActive: this.tableState().sortActive, sortDirection: this.tableState().sortDirection };
+    }, ...(ngDevMode ? [{ debugName: "sortState" }] : []));
+    /** Выбранная строка, для которого будет показываться меню при нажатии правой кнопки мыши. */
+    itemForMenu;
+    /** Позиция в которой отображается контекстное меню. */
+    contextMenuPosition = { x: '0px', y: '0px' };
+    // eslint-disable-next-line no-magic-numbers
+    defaultPageIndex = 0;
+    // eslint-disable-next-line no-magic-numbers
+    defaultPageSize = 10;
+    /** Источник данных для отображения. */
+    dataSource = new MatTableDataSource();
+    /** Выбранные записи. */
+    selection = new SelectionModel();
+    /** Список отображаемых колонок (формируется из @columnOptions). */
+    displayedColumns;
+    subscription = new Subscription();
+    constructor() {
+        effect(() => {
+            this.dataSource.data = this.data();
+            // сохранить выделенные строки, если они все еще есть в данных
+            const selected = this.selection.selected;
+            this.selection.clear();
+            this.data().filter(v => selected.map(s => JSON.stringify(s)).includes(JSON.stringify(v))).map(d => {
+                this.selection.select(d);
+            });
+        });
+    }
+    ngOnInit() {
+        this.displayedColumns = ['select'].concat(this.columnOptions()?.filter(c => !c.hide).map((item) => item.name) || []);
+        // пересоздаем, т.к. параметр allowMultiSelect появляется только сейчас
+        this.selection = new SelectionModel(this.allowMultiSelect());
+    }
+    ngOnDestroy() {
+        if (this.subscription)
+            this.subscription.unsubscribe();
+    }
+    ngAfterViewInit() {
+        // подписи элементов управления пагинатора (MatPaginatorIntl)
+        const paginator = this.paginator();
+        if (paginator) {
+            paginator._intl.itemsPerPageLabel = 'Записей на странице';
+            paginator._intl.firstPageLabel = 'Первая страница';
+            paginator._intl.previousPageLabel = 'Предыдущая страница';
+            paginator._intl.nextPageLabel = 'Следующая страница';
+            paginator._intl.lastPageLabel = 'Последняя страница';
+            // изменение пагинации
+            const subs = paginator.page.subscribe(page => {
+                const pageState = {
+                    pageIndex: page.pageIndex,
+                    pageSize: page.pageSize
+                };
+                this.pageState.set(pageState);
+                this.pageStateChange.emit(pageState);
+            });
+            this.subscription.add(subs);
+        }
+        // изменение сортировки
+        const sortValue = this.sort();
+        if (sortValue) {
+            const subs = sortValue.sortChange
+                .subscribe(sort => {
+                const sortState = {
+                    sortActive: sort.active,
+                    sortDirection: sort.direction
+                };
+                this.sortState.set(sortState);
+                this.sortStateChange.emit(sortState);
+            });
+            this.subscription.add(subs);
+        }
+        // изменение выбранных записей
+        if (this.selection) {
+            const subs = this.selection.changed.subscribe(change => {
+                this.selectionChange.emit(change.source.selected);
+            });
+            this.subscription.add(subs);
+        }
+    }
+    /** Whether the number of selected elements matches the total number of rows. */
+    isAllSelected() {
+        const numSelected = this.selection.selected.length;
+        const numRows = this.dataSource.data.length;
+        return numSelected === numRows;
+    }
+    /** Selects all rows if they are not all selected; otherwise clear selection. */
+    masterToggle() {
+        console.log(this.selection.isMultipleSelection());
+        if (this.isAllSelected()) {
+            this.selection.clear();
+        }
+        else {
+            this.dataSource.data.forEach(row => this.selection.select(row));
+        }
+    }
+    /** При щелчке по строке. */
+    onRowClicked(row) {
+        // выделение строки при щелчке по строке
+        if (this.selection.isSelected(row)) {
+            this.selection.deselect(row);
+        }
+        else {
+            this.selection.select(row);
+        }
+    }
+    /** При двойном щелчке по строке. */
+    onRowDblClicked(row) {
+        // выделение строки при двойном щелчке по строке
+        this.selection.clear();
+        this.selection.select(row);
+        if (!this.rowDblClickedDisable())
+            this.rowDoubleClicked.emit(row);
+    }
+    /** При вызове контекстного меню. */
+    onContextMenu(event, itemForMenu) {
+        if (this.opt() && this.opt().length === 0) {
+            // если нет пунктов меню, то не показываем меню
+            return;
+        }
+        event.preventDefault();
+        this.itemForMenu = itemForMenu;
+        this.contextMenuPosition.x = event.clientX + 'px';
+        this.contextMenuPosition.y = event.clientY + 'px';
+        // как это (menuData) использовать в шаблоне не понятно, поэтому использую this.itemForMenu
+        // https://www.concretepage.com/angular-material/passing-data-to-mat-menu-angular-material
+        const contextMenu = this.contextMenu();
+        if (contextMenu) {
+            contextMenu.menuData = { itemForMenu };
+            contextMenu.menu?.focusFirstItem('mouse');
+            contextMenu.openMenu();
+        }
+    }
+    getTotal(columnName) {
+        const arr = this.dataSource.data
+            .filter(t => typeof t[columnName] === 'number')
+            .map(t => t[columnName]);
+        if (arr.length === 0)
+            return '';
+        else
+            return arr.reduce((acc, value) => acc + value, 0);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: TableComponent, isStandalone: true, selector: "ngx-uik-table", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, length: { classPropertyName: "length", publicName: "length", isSignal: true, isRequired: false, transformFunction: null }, columnOptions: { classPropertyName: "columnOptions", publicName: "columnOptions", isSignal: true, isRequired: false, transformFunction: null }, tableState: { classPropertyName: "tableState", publicName: "tableState", isSignal: true, isRequired: true, transformFunction: null }, allowMultiSelect: { classPropertyName: "allowMultiSelect", publicName: "allowMultiSelect", isSignal: true, isRequired: false, transformFunction: null }, opt: { classPropertyName: "opt", publicName: "opt", isSignal: true, isRequired: false, transformFunction: null }, rowDblClickedDisable: { classPropertyName: "rowDblClickedDisable", publicName: "rowDblClickedDisable", isSignal: true, isRequired: false, transformFunction: null }, footer: { classPropertyName: "footer", publicName: "footer", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pageStateChange: "pageStateChange", sortStateChange: "sortStateChange", selectionChange: "selectionChange", rowDoubleClicked: "rowDoubleClicked" }, viewQueries: [{ propertyName: "sort", first: true, predicate: MatSort, descendants: true, isSignal: true }, { propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true, isSignal: true }, { propertyName: "contextMenu", first: true, predicate: MatMenuTrigger, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"component-container\">\r\n  <div class=\"table-container\">\r\n    <table mat-table [dataSource]=\"dataSource\"\r\n      matSort\r\n      [matSortActive]=\"sortState().sortActive || ''\"\r\n      [matSortDirection]=\"sortState().sortDirection\"\r\n      matSortDisableClear>\r\n\r\n      <!-- \u0412\u044B\u0431\u043E\u0440 \u0441\u0442\u0440\u043E\u043A\u0438 Column -->\r\n      <ng-container matColumnDef=\"select\">\r\n        <th mat-header-cell *matHeaderCellDef>\r\n          @if (allowMultiSelect()) {\r\n            <mat-checkbox (change)=\"$event ? masterToggle() : null\" [checked]=\"selection.hasValue() && isAllSelected()\"\r\n              [indeterminate]=\"selection.hasValue() && !isAllSelected()\">\r\n            </mat-checkbox>\r\n          }\r\n        </th>\r\n        <td mat-cell *matCellDef=\"let row\">\r\n          <mat-checkbox (click)=\"$event.stopPropagation()\" (change)=\"$event ? selection.toggle(row) : null\"\r\n            [checked]=\"selection.isSelected(row)\">\r\n          </mat-checkbox>\r\n        </td>\r\n        @if (footer()) {\r\n          <td mat-footer-cell *matFooterCellDef></td>\r\n        }\r\n      </ng-container>\r\n\r\n      @for (item of columnOptions(); track item) {\r\n        <ng-container matColumnDef={{item.name}}>\r\n          <th mat-header-cell *matHeaderCellDef mat-sort-header [disabled]=\"item.titleSortDisable\">{{item.title}}</th>\r\n          @if (!item.format) {\r\n            <td mat-cell *matCellDef=\"let element\" (contextmenu)=\"onContextMenu($event, element)\" [matTooltip]=\"item.tooltip ?? ''\">\r\n              {{element[item.name]}}\r\n            </td>\r\n            @if (footer()) {\r\n              <td mat-footer-cell *matFooterCellDef>\r\n                @if (item.footer) {\r\n                  <strong>{{ getTotal(item.name) }}</strong>\r\n                }\r\n                @if (item.footerTitle) {\r\n                  <strong>{{ item.footerTitle }}</strong>\r\n                }\r\n              </td>\r\n            }            \r\n          }\r\n          @if (item.format === 'pre-wrap') {\r\n            <td mat-cell *matCellDef=\"let element\" (contextmenu)=\"onContextMenu($event, element)\" class=\"pre-wrap\" [matTooltip]=\"item.tooltip ?? ''\">\r\n              {{element[item.name]}}\r\n            </td>\r\n            @if (footer()) {\r\n              <td mat-footer-cell *matFooterCellDef>\r\n                @if (item.footerTitle) {\r\n                  <strong>{{ item.footerTitle }}</strong>\r\n                }\r\n              </td>\r\n            }\r\n          }\r\n          @if (item.format === 'link') {\r\n            <td mat-cell *matCellDef=\"let element\"  (contextmenu)=\"onContextMenu($event, element)\" [matTooltip]=\"item.tooltip ?? ''\">\r\n              <a [href]=\"element[item.name]\" target=\"_blank\">{{element[item.name]}}</a>\r\n            </td>\r\n            @if (footer()) {\r\n              <td mat-footer-cell *matFooterCellDef>\r\n                @if (item.footerTitle) {\r\n                  <strong>{{ item.footerTitle }}</strong>\r\n                }\r\n              </td>\r\n            }\r\n          }\r\n          @if (item.format === 'linkIcon') {\r\n            <td mat-cell *matCellDef=\"let element\"  (contextmenu)=\"onContextMenu($event, element)\" [matTooltip]=\"item.tooltip ?? ''\">\r\n              @if (element[item.name]) {\r\n                <a  [href]=\"element[item.name]\" target=\"_blank\">\r\n                  @if (item.icon) {\r\n                    <mat-icon [class]=\"item.classList ? item.classList : ''\" >{{item.icon}}</mat-icon>\r\n                  } \r\n                  @if (item.symbol) {\r\n                    <span [class]=\"item.classList ? item.classList : ''\" >{{item.symbol}}</span>\r\n                  }\r\n                </a>\r\n              }\r\n            </td>\r\n            @if (footer()) {\r\n              <td mat-footer-cell *matFooterCellDef>\r\n                @if (item.footerTitle) {\r\n                  <strong>{{ item.footerTitle }}</strong>\r\n                }\r\n              </td>\r\n            }\r\n          }\r\n          @if (item.format === 'routerLink') {\r\n            <td mat-cell *matCellDef=\"let element\" (contextmenu)=\"onContextMenu($event, element)\" [matTooltip]=\"item.tooltip ?? ''\">\r\n              <a [routerLink]=\"[element[item.name]]\">{{element[item.name]}}</a>\r\n            </td>\r\n            @if (footer()) {\r\n              <td mat-footer-cell *matFooterCellDef>\r\n                @if (item.footerTitle) {\r\n                  <strong>{{ item.footerTitle }}</strong>\r\n                }\r\n              </td>\r\n            }\r\n          }\r\n          @if (item.format === 'routerLinkIcon') {\r\n            <td mat-cell *matCellDef=\"let element\" (contextmenu)=\"onContextMenu($event, element)\" [matTooltip]=\"item.tooltip ?? ''\">\r\n              @if (element[item.name]) {\r\n                <a [routerLink]=\"[element[item.name]]\">\r\n                  @if (item.icon) {\r\n                    <mat-icon [class]=\"item.classList ? item.classList : ''\" >{{item.icon}}</mat-icon>\r\n                  } \r\n                  @if (item.symbol) {\r\n                    <span [class]=\"item.classList ? item.classList : ''\" >{{item.symbol}}</span>\r\n                  }\r\n                </a>\r\n              }\r\n            </td>\r\n            @if (footer()) {\r\n              <td mat-footer-cell *matFooterCellDef>\r\n                @if (item.footerTitle) {\r\n                  <strong>{{ item.footerTitle }}</strong>\r\n                }\r\n              </td>\r\n            }\r\n          }\r\n          @if (item.format === 'checkbox') {\r\n            <td mat-cell *matCellDef=\"let element\"  (contextmenu)=\"onContextMenu($event, element)\" [matTooltip]=\"item.tooltip ?? ''\">\r\n              <mat-checkbox [checked]=\"element[item.name] === 1\" [disabled]=\"true\"></mat-checkbox>\r\n            </td>\r\n            @if (footer()) {\r\n              <td mat-footer-cell *matFooterCellDef>\r\n                @if (item.footerTitle) {\r\n                  <strong>{{ item.footerTitle }}</strong>\r\n                }\r\n              </td>\r\n            }\r\n          }\r\n          @if (item.format === 'icon') {\r\n            <td mat-cell *matCellDef=\"let element\"  (contextmenu)=\"onContextMenu($event, element)\" [matTooltip]=\"item.tooltip ?? ''\">\r\n              @if (item.icon) {\r\n                <mat-icon [class]=\"item.classList ? item.classList : ''\" >{{item.icon}}</mat-icon>\r\n              } \r\n              @if (item.symbol) {\r\n                <span [class]=\"item.classList ? item.classList : ''\" >{{item.symbol}}</span>\r\n              }\r\n            </td>\r\n            @if (footer()) {\r\n              <td mat-footer-cell *matFooterCellDef>\r\n                @if (item.footerTitle) {\r\n                  <strong>{{ item.footerTitle }}</strong>\r\n                }\r\n              </td>\r\n            }\r\n          }\r\n          @if (item.format === 'icons') {\r\n            <td mat-cell *matCellDef=\"let element\"  (contextmenu)=\"onContextMenu($event, element)\">\r\n              @if (item.icons) {\r\n                <mat-icon [class]=\"item.classList ? item.classList[element[item.name]] : ''\" \r\n                [matTooltip]=\"item.tooltips ? item.tooltips[element[item.name]] : ''\">{{item.icons[element[item.name]]}}</mat-icon>\r\n              } \r\n              @if (item.symbols) {\r\n                <span [class]=\"item.classList ? item.classList[element[item.name]] : ''\" >{{item.symbols[element[item.name]]}}</span>\r\n              }\r\n            </td>\r\n            @if (footer()) {\r\n              <td mat-footer-cell *matFooterCellDef>\r\n                @if (item.footerTitle) {\r\n                  <strong>{{ item.footerTitle }}</strong>\r\n                }\r\n              </td>\r\n            }\r\n          }\r\n          @if (item.format === 'actions') {\r\n            <td mat-cell *matCellDef=\"let element\"  (contextmenu)=\"onContextMenu($event, element)\">\r\n              @if (item.actions) {\r\n                <div class=\"actions-container\">\r\n                  @for (action of item.actions; track action) {\r\n                    @if (!(action.hideFn ? action.hideFn(element) : action.hide)) {\r\n                      <button mat-icon-button\r\n                        (click)=\"action.onClickFn ? action.onClickFn(element) : ''\"\r\n                        (mousedown)=\"action.onClickMiddleFn ? action.onClickMiddleFn($event, element) : ''\"\r\n                        [disabled]=\"action.disabledFn ? action.disabledFn(element) : action.disabled\"\r\n                        [matTooltip]=\"action.tooltip ? action.tooltip : ''\" >\r\n                        @if (action.icon) {\r\n                          <mat-icon [class]=\"action.classList ? action.classList : ''\" >{{action.icon}}</mat-icon>\r\n                        }\r\n                        @if (action.symbol) {\r\n                          <span [class]=\"action.classList ? action.classList : ''\" >{{action.symbol}}</span>\r\n                        }\r\n                        {{ action.title }}\r\n                      </button>\r\n                    }\r\n                  }\r\n                </div>\r\n              }  \r\n            </td>\r\n            @if (footer()) {\r\n              <td mat-footer-cell *matFooterCellDef>\r\n                @if (item.footerTitle) {\r\n                  <strong>{{ item.footerTitle }}</strong>\r\n                }\r\n              </td>\r\n            }\r\n          }\r\n          @if (item.format === 'image') {\r\n            <td mat-cell *matCellDef=\"let element\"  (contextmenu)=\"onContextMenu($event, element)\" [matTooltip]=\"item.tooltip ?? ''\">\r\n              @if (element[item.name]) {\r\n                <img\r\n                  [src]=\"element[item.name]\"\r\n                  [alt]=\"item.imageAlt && element[item.imageAlt] ? element[item.imageAlt] : ''\"\r\n                  [class]=\"item.classList ? item.classList : ''\"\r\n                />\r\n              } \r\n            </td>\r\n            @if (footer()) {\r\n              <td mat-footer-cell *matFooterCellDef>\r\n                @if (item.footerTitle) {\r\n                  <strong>{{ item.footerTitle }}</strong>\r\n                }\r\n              </td>\r\n            }\r\n          }\r\n      </ng-container>\r\n    }\r\n\r\n    <tr class=\"mat-row\" *matNoDataRow>\r\n      <td class=\"mat-cell\" colspan=\"9999\">\r\n        \u041D\u0435\u0442 \u0434\u0430\u043D\u043D\u044B\u0445 \u0434\u043B\u044F \u043E\u0442\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u044F\r\n      </td>\r\n    </tr>\r\n\r\n    <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></tr>\r\n    <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\" \r\n      (click)=\"onRowClicked(row)\" (dblclick)=\"onRowDblClicked(row)\" \r\n      class=\"element-row\" [class.selected-row]=\"selection.isSelected(row)\">\r\n    </tr>\r\n    @if (footer()) {\r\n      <tr mat-footer-row *matFooterRowDef=\"displayedColumns; sticky: true\"></tr>\r\n    }\r\n  </table>\r\n  <div style=\"visibility: hidden; position: fixed\"\r\n    [style.left]=\"contextMenuPosition.x\"\r\n    [style.top]=\"contextMenuPosition.y\"\r\n    [matMenuTriggerFor]=\"contextMenu\" #menuTrigger=\"matMenuTrigger\">\r\n  </div>\r\n  <mat-menu #contextMenu=\"matMenu\">\r\n    <ng-template matMenuContent let-id=\"id\">\r\n      @for (menuItem of opt(); track menuItem) {\r\n        @if (menuItem.title === '-' && !(menuItem.hideFn ? menuItem.hideFn(itemForMenu) : menuItem.hide)) {\r\n          <mat-divider></mat-divider>\r\n        }\r\n        @if (menuItem.title !== '-' && !(menuItem.hideFn ? menuItem.hideFn(itemForMenu) : menuItem.hide)) {\r\n          <button mat-menu-item\r\n            (click)=\"menuItem.onClickFn ? menuItem.onClickFn(itemForMenu) : ''\"\r\n            (mousedown)=\"menuItem.onClickMiddleFn ? menuItem.onClickMiddleFn($event, itemForMenu, menuTrigger) : ''\"\r\n            [disabled]=\"menuItem.disabledFn ? menuItem.disabledFn(itemForMenu) : menuItem.disabled\">\r\n            @if (menuItem.icon) {\r\n              <mat-icon [class]=\"menuItem.classList ? menuItem.classList : ''\">{{menuItem.icon}}</mat-icon>\r\n            }\r\n            @if (menuItem.symbol) {\r\n              <span [class]=\"menuItem.classList ? menuItem.classList : ''\">{{menuItem.symbol}}</span>\r\n            }\r\n            {{ menuItem.title }}\r\n          </button>\r\n        }\r\n      }\r\n    </ng-template>\r\n  </mat-menu>\r\n</div>\r\n\r\n\r\n<mat-paginator [length]=\"length()\"\r\n  [pageIndex]=\"pageState().pageIndex || defaultPageIndex\"\r\n  [pageSizeOptions]=\"[5, 10, 20, 50, 100]\"\r\n  [pageSize]=\"pageState().pageSize || defaultPageSize\"\r\n  showFirstLastButtons\r\n  itemsPerPageLabel=\"\"\r\n></mat-paginator>\r\n</div>\r\n", styles: [".component-container{display:flex;flex-direction:column;height:100%}.table-container{display:flex;flex-direction:column;justify-content:space-between;flex:auto;margin:0 20px;overflow:auto;height:400px}.center{position:absolute;inset:0 0 56px;background:#00000026;z-index:1;display:flex;align-items:center;justify-content:center}.mat-column-select{overflow:initial}tr.mat-footer-row{font-weight:700;height:56px}.mat-table{overflow-x:scroll}.mat-cell,.mat-header-cell{word-wrap:initial;display:table-cell;padding:0 10px;line-break:unset;white-space:nowrap;overflow:hidden;vertical-align:middle}.mat-row,.mat-header-row{display:table-row}tr.element-row:not(.selected-row):hover{background:#f5f5f5}tr.element-row:not(.selected-row):active{background:#efefef}.selected-row{background-color:#eee}.fact-done-row{background-color:#eefdec}a,a:visited,a:hover,a:active{color:inherit}.pre-wrap{white-space:pre-wrap}.actions-container{display:flex;column-gap:5px}\n"], dependencies: [{ kind: "component", type: MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "directive", type: MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { 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: "directive", type: MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: MatNoDataRow, selector: "ng-template[matNoDataRow]" }, { kind: "directive", type: MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "component", type: MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "directive", type: MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "component", type: MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { 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: 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: MatMenuContent, selector: "ng-template[matMenuContent]" }, { kind: "component", type: MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "component", type: MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "directive", type: MatFooterRowDef, selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { kind: "component", type: MatFooterRow, selector: "mat-footer-row, tr[mat-footer-row]", exportAs: ["matFooterRow"] }, { kind: "directive", type: MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "ngmodule", type: MatTableModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i1$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TableComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngx-uik-table', imports: [MatTable, MatSort, MatColumnDef, MatHeaderCellDef, MatHeaderCell, MatCheckbox, MatCellDef, MatCell,
+                        MatSortHeader, MatIcon, RouterLink, MatNoDataRow, MatHeaderRowDef, MatHeaderRow, MatRowDef, MatRow,
+                        MatMenuTrigger, MatMenu, MatMenuContent, MatDivider, MatMenuItem, MatPaginator, MatFooterRowDef, MatFooterRow,
+                        MatFooterCellDef, MatFooterCell, MatTableModule, MatTooltipModule, MatIconButton], template: "<div class=\"component-container\">\r\n  <div class=\"table-container\">\r\n    <table mat-table [dataSource]=\"dataSource\"\r\n      matSort\r\n      [matSortActive]=\"sortState().sortActive || ''\"\r\n      [matSortDirection]=\"sortState().sortDirection\"\r\n      matSortDisableClear>\r\n\r\n      <!-- \u0412\u044B\u0431\u043E\u0440 \u0441\u0442\u0440\u043E\u043A\u0438 Column -->\r\n      <ng-container matColumnDef=\"select\">\r\n        <th mat-header-cell *matHeaderCellDef>\r\n          @if (allowMultiSelect()) {\r\n            <mat-checkbox (change)=\"$event ? masterToggle() : null\" [checked]=\"selection.hasValue() && isAllSelected()\"\r\n              [indeterminate]=\"selection.hasValue() && !isAllSelected()\">\r\n            </mat-checkbox>\r\n          }\r\n        </th>\r\n        <td mat-cell *matCellDef=\"let row\">\r\n          <mat-checkbox (click)=\"$event.stopPropagation()\" (change)=\"$event ? selection.toggle(row) : null\"\r\n            [checked]=\"selection.isSelected(row)\">\r\n          </mat-checkbox>\r\n        </td>\r\n        @if (footer()) {\r\n          <td mat-footer-cell *matFooterCellDef></td>\r\n        }\r\n      </ng-container>\r\n\r\n      @for (item of columnOptions(); track item) {\r\n        <ng-container matColumnDef={{item.name}}>\r\n          <th mat-header-cell *matHeaderCellDef mat-sort-header [disabled]=\"item.titleSortDisable\">{{item.title}}</th>\r\n          @if (!item.format) {\r\n            <td mat-cell *matCellDef=\"let element\" (contextmenu)=\"onContextMenu($event, element)\" [matTooltip]=\"item.tooltip ?? ''\">\r\n              {{element[item.name]}}\r\n            </td>\r\n            @if (footer()) {\r\n              <td mat-footer-cell *matFooterCellDef>\r\n                @if (item.footer) {\r\n                  <strong>{{ getTotal(item.name) }}</strong>\r\n                }\r\n                @if (item.footerTitle) {\r\n                  <strong>{{ item.footerTitle }}</strong>\r\n                }\r\n              </td>\r\n            }            \r\n          }\r\n          @if (item.format === 'pre-wrap') {\r\n            <td mat-cell *matCellDef=\"let element\" (contextmenu)=\"onContextMenu($event, element)\" class=\"pre-wrap\" [matTooltip]=\"item.tooltip ?? ''\">\r\n              {{element[item.name]}}\r\n            </td>\r\n            @if (footer()) {\r\n              <td mat-footer-cell *matFooterCellDef>\r\n                @if (item.footerTitle) {\r\n                  <strong>{{ item.footerTitle }}</strong>\r\n                }\r\n              </td>\r\n            }\r\n          }\r\n          @if (item.format === 'link') {\r\n            <td mat-cell *matCellDef=\"let element\"  (contextmenu)=\"onContextMenu($event, element)\" [matTooltip]=\"item.tooltip ?? ''\">\r\n              <a [href]=\"element[item.name]\" target=\"_blank\">{{element[item.name]}}</a>\r\n            </td>\r\n            @if (footer()) {\r\n              <td mat-footer-cell *matFooterCellDef>\r\n                @if (item.footerTitle) {\r\n                  <strong>{{ item.footerTitle }}</strong>\r\n                }\r\n              </td>\r\n            }\r\n          }\r\n          @if (item.format === 'linkIcon') {\r\n            <td mat-cell *matCellDef=\"let element\"  (contextmenu)=\"onContextMenu($event, element)\" [matTooltip]=\"item.tooltip ?? ''\">\r\n              @if (element[item.name]) {\r\n                <a  [href]=\"element[item.name]\" target=\"_blank\">\r\n                  @if (item.icon) {\r\n                    <mat-icon [class]=\"item.classList ? item.classList : ''\" >{{item.icon}}</mat-icon>\r\n                  } \r\n                  @if (item.symbol) {\r\n                    <span [class]=\"item.classList ? item.classList : ''\" >{{item.symbol}}</span>\r\n                  }\r\n                </a>\r\n              }\r\n            </td>\r\n            @if (footer()) {\r\n              <td mat-footer-cell *matFooterCellDef>\r\n                @if (item.footerTitle) {\r\n                  <strong>{{ item.footerTitle }}</strong>\r\n                }\r\n              </td>\r\n            }\r\n          }\r\n          @if (item.format === 'routerLink') {\r\n            <td mat-cell *matCellDef=\"let element\" (contextmenu)=\"onContextMenu($event, element)\" [matTooltip]=\"item.tooltip ?? ''\">\r\n              <a [routerLink]=\"[element[item.name]]\">{{element[item.name]}}</a>\r\n            </td>\r\n            @if (footer()) {\r\n              <td mat-footer-cell *matFooterCellDef>\r\n                @if (item.footerTitle) {\r\n                  <strong>{{ item.footerTitle }}</strong>\r\n                }\r\n              </td>\r\n            }\r\n          }\r\n          @if (item.format === 'routerLinkIcon') {\r\n            <td mat-cell *matCellDef=\"let element\" (contextmenu)=\"onContextMenu($event, element)\" [matTooltip]=\"item.tooltip ?? ''\">\r\n              @if (element[item.name]) {\r\n                <a [routerLink]=\"[element[item.name]]\">\r\n                  @if (item.icon) {\r\n                    <mat-icon [class]=\"item.classList ? item.classList : ''\" >{{item.icon}}</mat-icon>\r\n                  } \r\n                  @if (item.symbol) {\r\n                    <span [class]=\"item.classList ? item.classList : ''\" >{{item.symbol}}</span>\r\n                  }\r\n                </a>\r\n              }\r\n            </td>\r\n            @if (footer()) {\r\n              <td mat-footer-cell *matFooterCellDef>\r\n                @if (item.footerTitle) {\r\n                  <strong>{{ item.footerTitle }}</strong>\r\n                }\r\n              </td>\r\n            }\r\n          }\r\n          @if (item.format === 'checkbox') {\r\n            <td mat-cell *matCellDef=\"let element\"  (contextmenu)=\"onContextMenu($event, element)\" [matTooltip]=\"item.tooltip ?? ''\">\r\n              <mat-checkbox [checked]=\"element[item.name] === 1\" [disabled]=\"true\"></mat-checkbox>\r\n            </td>\r\n            @if (footer()) {\r\n              <td mat-footer-cell *matFooterCellDef>\r\n                @if (item.footerTitle) {\r\n                  <strong>{{ item.footerTitle }}</strong>\r\n                }\r\n              </td>\r\n            }\r\n          }\r\n          @if (item.format === 'icon') {\r\n            <td mat-cell *matCellDef=\"let element\"  (contextmenu)=\"onContextMenu($event, element)\" [matTooltip]=\"item.tooltip ?? ''\">\r\n              @if (item.icon) {\r\n                <mat-icon [class]=\"item.classList ? item.classList : ''\" >{{item.icon}}</mat-icon>\r\n              } \r\n              @if (item.symbol) {\r\n                <span [class]=\"item.classList ? item.classList : ''\" >{{item.symbol}}</span>\r\n              }\r\n            </td>\r\n            @if (footer()) {\r\n              <td mat-footer-cell *matFooterCellDef>\r\n                @if (item.footerTitle) {\r\n                  <strong>{{ item.footerTitle }}</strong>\r\n                }\r\n              </td>\r\n            }\r\n          }\r\n          @if (item.format === 'icons') {\r\n            <td mat-cell *matCellDef=\"let element\"  (contextmenu)=\"onContextMenu($event, element)\">\r\n              @if (item.icons) {\r\n                <mat-icon [class]=\"item.classList ? item.classList[element[item.name]] : ''\" \r\n                [matTooltip]=\"item.tooltips ? item.tooltips[element[item.name]] : ''\">{{item.icons[element[item.name]]}}</mat-icon>\r\n              } \r\n              @if (item.symbols) {\r\n                <span [class]=\"item.classList ? item.classList[element[item.name]] : ''\" >{{item.symbols[element[item.name]]}}</span>\r\n              }\r\n            </td>\r\n            @if (footer()) {\r\n              <td mat-footer-cell *matFooterCellDef>\r\n                @if (item.footerTitle) {\r\n                  <strong>{{ item.footerTitle }}</strong>\r\n                }\r\n              </td>\r\n            }\r\n          }\r\n          @if (item.format === 'actions') {\r\n            <td mat-cell *matCellDef=\"let element\"  (contextmenu)=\"onContextMenu($event, element)\">\r\n              @if (item.actions) {\r\n                <div class=\"actions-container\">\r\n                  @for (action of item.actions; track action) {\r\n                    @if (!(action.hideFn ? action.hideFn(element) : action.hide)) {\r\n                      <button mat-icon-button\r\n                        (click)=\"action.onClickFn ? action.onClickFn(element) : ''\"\r\n                        (mousedown)=\"action.onClickMiddleFn ? action.onClickMiddleFn($event, element) : ''\"\r\n                        [disabled]=\"action.disabledFn ? action.disabledFn(element) : action.disabled\"\r\n                        [matTooltip]=\"action.tooltip ? action.tooltip : ''\" >\r\n                        @if (action.icon) {\r\n                          <mat-icon [class]=\"action.classList ? action.classList : ''\" >{{action.icon}}</mat-icon>\r\n                        }\r\n                        @if (action.symbol) {\r\n                          <span [class]=\"action.classList ? action.classList : ''\" >{{action.symbol}}</span>\r\n                        }\r\n                        {{ action.title }}\r\n                      </button>\r\n                    }\r\n                  }\r\n                </div>\r\n              }  \r\n            </td>\r\n            @if (footer()) {\r\n              <td mat-footer-cell *matFooterCellDef>\r\n                @if (item.footerTitle) {\r\n                  <strong>{{ item.footerTitle }}</strong>\r\n                }\r\n              </td>\r\n            }\r\n          }\r\n          @if (item.format === 'image') {\r\n            <td mat-cell *matCellDef=\"let element\"  (contextmenu)=\"onContextMenu($event, element)\" [matTooltip]=\"item.tooltip ?? ''\">\r\n              @if (element[item.name]) {\r\n                <img\r\n                  [src]=\"element[item.name]\"\r\n                  [alt]=\"item.imageAlt && element[item.imageAlt] ? element[item.imageAlt] : ''\"\r\n                  [class]=\"item.classList ? item.classList : ''\"\r\n                />\r\n              } \r\n            </td>\r\n            @if (footer()) {\r\n              <td mat-footer-cell *matFooterCellDef>\r\n                @if (item.footerTitle) {\r\n                  <strong>{{ item.footerTitle }}</strong>\r\n                }\r\n              </td>\r\n            }\r\n          }\r\n      </ng-container>\r\n    }\r\n\r\n    <tr class=\"mat-row\" *matNoDataRow>\r\n      <td class=\"mat-cell\" colspan=\"9999\">\r\n        \u041D\u0435\u0442 \u0434\u0430\u043D\u043D\u044B\u0445 \u0434\u043B\u044F \u043E\u0442\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u044F\r\n      </td>\r\n    </tr>\r\n\r\n    <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></tr>\r\n    <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\" \r\n      (click)=\"onRowClicked(row)\" (dblclick)=\"onRowDblClicked(row)\" \r\n      class=\"element-row\" [class.selected-row]=\"selection.isSelected(row)\">\r\n    </tr>\r\n    @if (footer()) {\r\n      <tr mat-footer-row *matFooterRowDef=\"displayedColumns; sticky: true\"></tr>\r\n    }\r\n  </table>\r\n  <div style=\"visibility: hidden; position: fixed\"\r\n    [style.left]=\"contextMenuPosition.x\"\r\n    [style.top]=\"contextMenuPosition.y\"\r\n    [matMenuTriggerFor]=\"contextMenu\" #menuTrigger=\"matMenuTrigger\">\r\n  </div>\r\n  <mat-menu #contextMenu=\"matMenu\">\r\n    <ng-template matMenuContent let-id=\"id\">\r\n      @for (menuItem of opt(); track menuItem) {\r\n        @if (menuItem.title === '-' && !(menuItem.hideFn ? menuItem.hideFn(itemForMenu) : menuItem.hide)) {\r\n          <mat-divider></mat-divider>\r\n        }\r\n        @if (menuItem.title !== '-' && !(menuItem.hideFn ? menuItem.hideFn(itemForMenu) : menuItem.hide)) {\r\n          <button mat-menu-item\r\n            (click)=\"menuItem.onClickFn ? menuItem.onClickFn(itemForMenu) : ''\"\r\n            (mousedown)=\"menuItem.onClickMiddleFn ? menuItem.onClickMiddleFn($event, itemForMenu, menuTrigger) : ''\"\r\n            [disabled]=\"menuItem.disabledFn ? menuItem.disabledFn(itemForMenu) : menuItem.disabled\">\r\n            @if (menuItem.icon) {\r\n              <mat-icon [class]=\"menuItem.classList ? menuItem.classList : ''\">{{menuItem.icon}}</mat-icon>\r\n            }\r\n            @if (menuItem.symbol) {\r\n              <span [class]=\"menuItem.classList ? menuItem.classList : ''\">{{menuItem.symbol}}</span>\r\n            }\r\n            {{ menuItem.title }}\r\n          </button>\r\n        }\r\n      }\r\n    </ng-template>\r\n  </mat-menu>\r\n</div>\r\n\r\n\r\n<mat-paginator [length]=\"length()\"\r\n  [pageIndex]=\"pageState().pageIndex || defaultPageIndex\"\r\n  [pageSizeOptions]=\"[5, 10, 20, 50, 100]\"\r\n  [pageSize]=\"pageState().pageSize || defaultPageSize\"\r\n  showFirstLastButtons\r\n  itemsPerPageLabel=\"\"\r\n></mat-paginator>\r\n</div>\r\n", styles: [".component-container{display:flex;flex-direction:column;height:100%}.table-container{display:flex;flex-direction:column;justify-content:space-between;flex:auto;margin:0 20px;overflow:auto;height:400px}.center{position:absolute;inset:0 0 56px;background:#00000026;z-index:1;display:flex;align-items:center;justify-content:center}.mat-column-select{overflow:initial}tr.mat-footer-row{font-weight:700;height:56px}.mat-table{overflow-x:scroll}.mat-cell,.mat-header-cell{word-wrap:initial;display:table-cell;padding:0 10px;line-break:unset;white-space:nowrap;overflow:hidden;vertical-align:middle}.mat-row,.mat-header-row{display:table-row}tr.element-row:not(.selected-row):hover{background:#f5f5f5}tr.element-row:not(.selected-row):active{background:#efefef}.selected-row{background-color:#eee}.fact-done-row{background-color:#eefdec}a,a:visited,a:hover,a:active{color:inherit}.pre-wrap{white-space:pre-wrap}.actions-container{display:flex;column-gap:5px}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], length: [{ type: i0.Input, args: [{ isSignal: true, alias: "length", required: false }] }], columnOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnOptions", required: false }] }], tableState: [{ type: i0.Input, args: [{ isSignal: true, alias: "tableState", required: true }] }], allowMultiSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowMultiSelect", required: false }] }], opt: [{ type: i0.Input, args: [{ isSignal: true, alias: "opt", required: false }] }], rowDblClickedDisable: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowDblClickedDisable", required: false }] }], footer: [{ type: i0.Input, args: [{ isSignal: true, alias: "footer", required: false }] }], pageStateChange: [{ type: i0.Output, args: ["pageStateChange"] }], sortStateChange: [{ type: i0.Output, args: ["sortStateChange"] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], rowDoubleClicked: [{ type: i0.Output, args: ["rowDoubleClicked"] }], sort: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MatSort), { isSignal: true }] }], paginator: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MatPaginator), { isSignal: true }] }], contextMenu: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MatMenuTrigger), { isSignal: true }] }] } });
+
+class LoaderService {
+    overlayRef = null;
+    overlay = inject(Overlay);
+    show() {
+        if (!this.overlayRef) {
+            this.overlayRef = this.overlay.create();
+        }
+        const spinnerOverlayPortal = new ComponentPortal(ProgressSpinnerComponent);
+        // Исправление ошибки Expression has changed after it was checked
+        setTimeout(() => {
+            if (!this.overlayRef?.hasAttached()) {
+                this.overlayRef?.attach(spinnerOverlayPortal);
+            }
+        });
+    }
+    hide() {
+        if (this.overlayRef) {
+            this.overlayRef.detach();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: LoaderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: LoaderService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: LoaderService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
+class ExportService {
+    // Экспорт в CSV
+    exportCSV(data, filename = 'data', arrHeader, newHeaders) {
+        const csvData = this.convertToCSV(data, arrHeader, newHeaders);
+        console.log(csvData);
+        const blob = new Blob(['\ufeff' + csvData], { type: 'text/csv;charset=utf-8;' });
+        const dwldLink = document.createElement('a');
+        const url = URL.createObjectURL(blob);
+        const isSafariBrowser = navigator.userAgent.indexOf('Safari') !== -1 && navigator.userAgent.indexOf('Chrome') === -1;
+        if (isSafariBrowser) { //if Safari open in new window to save file with random filename.
+            dwldLink.setAttribute('target', '_blank');
+        }
+        dwldLink.setAttribute('href', url);
+        dwldLink.setAttribute('download', filename + '.csv');
+        dwldLink.style.visibility = 'hidden';
+        document.body.appendChild(dwldLink);
+        dwldLink.click();
+        document.body.removeChild(dwldLink);
+    }
+    convertToCSV(objArray, headerList, newHeaders) {
+        const array = typeof objArray != 'object' ? JSON.parse(objArray) : objArray;
+        let str = '';
+        let row = 'S.No,';
+        for (const index in newHeaders) {
+            if (Object.prototype.hasOwnProperty.call(newHeaders, index)) {
+                row += newHeaders[index] + ',';
+            }
+        }
+        row = row.slice(0, -1);
+        str += row + '\r\n';
+        for (let i = 0; i < array.length; i++) {
+            let line = (i + 1) + '';
+            for (const index in headerList) {
+                if (Object.prototype.hasOwnProperty.call(newHeaders, index)) {
+                    const head = headerList[index];
+                    line += ',' + array[i][head];
+                }
+            }
+            str += line + '\r\n';
+        }
+        return str;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ExportService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ExportService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ExportService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
+class SseService {
+    zone = inject(NgZone);
+    eventSource = null;
+    isConnected = false;
+    constructor() { }
+    createSseEventSource(baseUrl, user, topic) {
+        const subject = new ReplaySubject(1);
+        // Close any existing connection
+        this.closeSseEventSource();
+        const topicUri = topic.getTopic(baseUrl, user);
+        // environment.sse_url
+        this.eventSource = new EventSource(topicUri
+        //, {withCredentials: true}
+        );
+        if (this.eventSource) {
+            this.isConnected = true;
+            // Listen for messages
+            this.eventSource.onmessage = (event) => {
+                console.log(event);
+                const messageData = JSON.parse(event.data);
+                this.zone.run(() => {
+                    subject.next(messageData);
+                });
+            };
+            this.eventSource.onopen = () => {
+                console.log('SSE connection opened.');
+            };
+            // Process error
+            this.eventSource.onerror = (error) => {
+                console.error('SSE error:', error);
+                this.reconnectOnError(baseUrl, user, topic, subject);
+            };
+        }
+        return subject.asObservable();
+    }
+    reconnectOnError(baseUrl, user, topic, subject) {
+        this.closeSseEventSource();
+        if (this.isConnected)
+            return; // Prevent duplicate connections
+        console.log('Reconnecting to SSE in 1 second...');
+        setTimeout(() => {
+            this.zone.run(() => {
+                this.createSseEventSource(baseUrl, user, topic).subscribe(subject);
+            });
+        }, 1000);
+    }
+    closeSseEventSource() {
+        if (this.eventSource) {
+            this.eventSource.close();
+            this.eventSource = null;
+            this.isConnected = false;
+            console.log('SSE Connection closed');
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: SseService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: SseService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: SseService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [] });
+
+class LoginPageComponent {
+    pending = false;
+    error = '';
+    isKiosk = false;
+    /** Идентификатор АС */
+    idCas = 0;
+    /** Подписка на Идентификатор АС */
+    sub;
+    authService = inject(AuthService);
+    route = inject(ActivatedRoute);
+    loaderService = inject(LoaderService);
+    constructor() {
+        this.sub = this.route.data.subscribe(data => {
+            this.idCas = data['idCas'];
+        });
+    }
+    ngOnInit() {
+        if (localStorage.getItem('id_human') || localStorage.getItem('kiosk-keyboard-layout')) {
+            // this.isKiosk = true;
+        }
+    }
+    ngOnDestroy() {
+        this.sub.unsubscribe();
+    }
+    onSubmitError() {
+        return () => {
+            this.pending = false;
+            this.loaderService.hide();
+        };
+    }
+    onSubmit($event) {
+        this.loaderService.show();
+        this.pending = true;
+        this.authService.login($event.username, $event.password, this.idCas, this.onSubmitError());
+    }
+    onSubmitPermit($event) {
+        const permit = $event;
+        this.authService.loginByPermit(permit, this.idCas);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: LoginPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: LoginPageComponent, isStandalone: true, selector: "ngx-uik-login-page", ngImport: i0, template: "@if (!isKiosk) {\r\n    <ngx-uik-login-form\r\n      (submitted)=\"onSubmit($event)\"\r\n      [pending]=\"pending\"\r\n      [errorMessage]=\"error\">\r\n    </ngx-uik-login-form>\r\n  }\r\n  @if (isKiosk) {\r\n    <ngx-uik-permit-form\r\n      (submitted)=\"onSubmitPermit($event)\"\r\n      >\r\n    </ngx-uik-permit-form>\r\n  }", styles: [""], dependencies: [{ kind: "component", type: LoginFormComponent, selector: "ngx-uik-login-form", inputs: ["pending", "errorMessage"], outputs: ["submitted"] }, { kind: "component", type: PermitFormComponent, selector: "ngx-uik-permit-form", outputs: ["submitted"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: LoginPageComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngx-uik-login-page', imports: [LoginFormComponent, PermitFormComponent], template: "@if (!isKiosk) {\r\n    <ngx-uik-login-form\r\n      (submitted)=\"onSubmit($event)\"\r\n      [pending]=\"pending\"\r\n      [errorMessage]=\"error\">\r\n    </ngx-uik-login-form>\r\n  }\r\n  @if (isKiosk) {\r\n    <ngx-uik-permit-form\r\n      (submitted)=\"onSubmitPermit($event)\"\r\n      >\r\n    </ngx-uik-permit-form>\r\n  }" }]
+        }], ctorParameters: () => [] });
+
+class DisableIfRoleDirective {
+    roles = input([], { ...(ngDevMode ? { debugName: "roles" } : {}), alias: 'ngxUikDisableIfRole' });
+    el = inject(ElementRef);
+    authService = inject(AuthService);
+    roleService = inject(RoleService);
+    constructor() {
+        effect(() => {
+            const hasRequiredRole = this.roleService.hasRoles(this.authService.roles(), this.roles());
+            // Блокируем, если ролей НЕТ
+            const shouldDisable = !hasRequiredRole;
+            // 2. Безопасное управление атрибутом для любых элементов
+            const nativeEl = this.el.nativeElement;
+            if ('disabled' in nativeEl) {
+                nativeEl.disabled = shouldDisable;
+            }
+            else {
+                // Для элементов вроде <a>, у которых нет свойства disabled в DOM API
+                if (shouldDisable) {
+                    nativeEl.setAttribute('disabled', 'true');
+                }
+                else {
+                    nativeEl.removeAttribute('disabled');
+                }
+            }
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: DisableIfRoleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.0", type: DisableIfRoleDirective, isStandalone: true, selector: "[ngxUikDisableIfRole]", inputs: { roles: { classPropertyName: "roles", publicName: "ngxUikDisableIfRole", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: DisableIfRoleDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngxUikDisableIfRole]',
+                    standalone: true
+                }]
+        }], ctorParameters: () => [], propDecorators: { roles: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngxUikDisableIfRole", required: false }] }] } });
+
+class HideIfRoleNotDirective {
+    roles = input([], { ...(ngDevMode ? { debugName: "roles" } : {}), alias: 'ngxUikHideIfRoleNot' });
+    el = inject(ElementRef);
+    authService = inject(AuthService);
+    roleService = inject(RoleService);
+    constructor() {
+        effect(() => {
+            // Элемент скрывается, если у пользователя нет ни одной роли из перереданных в "roles"
+            // или в списке "roles" есть роль "hideRole".
+            const isHide = this.roleService.isHideElement(this.roles(), this.authService.roles());
+            // Управляем отображением. Пустая строка возвращает дефолтный CSS-стиль элемента.
+            this.el.nativeElement.style.display = isHide ? 'none' : '';
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: HideIfRoleNotDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.0", type: HideIfRoleNotDirective, isStandalone: true, selector: "[ngxUikHideIfRoleNot]", inputs: { roles: { classPropertyName: "roles", publicName: "ngxUikHideIfRoleNot", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: HideIfRoleNotDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngxUikHideIfRoleNot]',
+                    standalone: true
+                }]
+        }], ctorParameters: () => [], propDecorators: { roles: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngxUikHideIfRoleNot", required: false }] }] } });
+
+class SetValueDirective {
+    value = input(undefined, { ...(ngDevMode ? { debugName: "value" } : {}), alias: 'setValue' });
+    // 3. Используем опциональный inject, чтобы директива не падала, если формы нет
+    ngControl = inject(NgControl, { optional: true });
+    constructor() {
+        effect(() => {
+            // Эффект автоматически отслеживает изменение входного значения
+            const val = this.value();
+            if (this.ngControl?.control) {
+                this.ngControl.control.setValue(val, { emitEvent: false });
+            }
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: SetValueDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.0", type: SetValueDirective, isStandalone: true, selector: "[setValue]", inputs: { value: { classPropertyName: "value", publicName: "setValue", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: SetValueDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[setValue]',
+                    standalone: true,
+                }]
+        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "setValue", required: false }] }] } });
+
+const authGuard = (allowedRoles) => {
+    return (route, state) => {
+        const authService = inject(AuthService);
+        const router = inject(Router);
+        const isLogin = authService.loggedIn();
+        if (!isLogin) {
+            console.log('state.url =', state.url);
+            // Если не зарегистрирован вернуть в форму авторизации
+            return router.createUrlTree(['/login'], { queryParams: { returnUrl: state.url } });
+        }
+        return isLogin;
+    };
+};
+
+const redirectGuard = (route) => {
+    const externalUrl = route.data?.['externalUrl'];
+    if (externalUrl) {
+        window.location.href = externalUrl;
+    }
+    return true;
+};
+
+const roleGuard = (allowedRoles) => {
+    return (route, state) => {
+        const authService = inject(AuthService);
+        const roleService = inject(RoleService);
+        // Читаем роли из Сигнала
+        const userRoles = authService.roles();
+        // Проверяем доступ на основе аргумента allowedRoles
+        return roleService.hasRoles(userRoles, allowedRoles);
+    };
+};
+
+/*
+ * Public API Surface of uikit
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { Action, AvatarService, BaseEditClass, BaseFilterClass, BaseMatChipComponent, BaseNavBarMenuClass, BasePageClass, BaseSelectAutocompleteWithVsComponent, BaseSelectWithGroupComponent, BaseServiceClass, BaseToolbarComponent, DateRangeInputComponent, DialogAction, DialogComponent, DisableIfRoleDirective, EmptyComponent, EntityAction, ExportService, HideIfRoleNotDirective, LoaderService, LocalStorageService, LoginPageComponent, MY_FORMATS, NavBarComponent, NotFoundComponent, ProgressSpinnerComponent, SafePipe, SetValueDirective, SseService, TableComponent, TimePipe, TruncatePipe, authGuard, dateFormat, redirectGuard, roleGuard };
+//# sourceMappingURL=kuzntsv-uikit-ui.mjs.map