@kuzntsv/uikit 0.0.20 → 0.0.22

package/base/base-toolbar/components/base-toolbar.component.d.ts

@@ -48,7 +48,7 @@ export declare class BaseToolbarComponent implements OnDestroy {
     clickedClearBtn: EventEmitter<any>;
     protected authService: AuthService;
     userRoles: string[];
-    subscription: Subscription | undefined;
+    subscription: Subscription;
     constructor();
     ngOnDestroy(): void;
     isShow(roles: string[]): boolean;

package/fesm2022/kuzntsv-uikit.mjs

@@ -833,12 +833,13 @@ class BaseToolbarComponent {
     // DI
     authService = inject(AuthService);
     userRoles = [];
-    subscription;
+    subscription = new Subscription();
     constructor() {
         // получить права пользователя
-        this.subscription = this.authService.roles$.subscribe((userRoles) => {
+        const subs = this.authService.roles$.subscribe((userRoles) => {
             this.userRoles = userRoles;
         });
+        this.subscription.add(subs);
     }
     ngOnDestroy() {
         if (this.subscription)
@@ -983,9 +984,8 @@ class BaseEditClass {
     form;
     dialogRef;
     /** Объект для отписки (вызывается метод unsubscribe при уничтожннии компонента). */
-    subscription;
+    subscription = new Subscription();
     constructor() {
-        this.subscription = new Subscription();
     }
     ngOnDestroy() {
         this.subscription.unsubscribe();
@@ -1031,9 +1031,8 @@ class BaseFilterClass {
     // eslint-disable-next-line no-magic-numbers
     defaultDebounceTime = 500;
     /** Объект для отписки (вызывается метод unsubscribe при уничтожннии компонента). */
-    subscription;
+    subscription = new Subscription();
     constructor() {
-        this.subscription = new Subscription();
     }
     ngOnDestroy() {
         this.subscription.unsubscribe();
@@ -1275,7 +1274,7 @@ class BasePageClass {
     router = inject(Router);
     localStorage = inject(LocalStorageService);
     /** Объект для отписки (вызывается метод unsubscribe при уничтожннии компонента). */
-    subscription;
+    subscription = new Subscription();
     constructor() {
         this.tableState = {
             sortActive: this.localStorage.getData(this.constructor.name + 'SortActive') || '',
@@ -1283,7 +1282,6 @@ class BasePageClass {
             pageIndex: Number(this.localStorage.getData(this.constructor.name + 'PageIndex')) || this.defaultPageIndex,
             pageSize: Number(this.localStorage.getData(this.constructor.name + 'PageSize')) || this.defaultPageSize
         };
-        this.subscription = new Subscription();
     }
     ngOnDestroy() {
         this.subscription.unsubscribe();
@@ -1359,17 +1357,17 @@ class BasePageClass {
                             this.alertService?.error('Произошла ошибка при добавлении записи: ' + error, 0);
                         }
                     });
-                    this.subscription?.add(subs);
+                    this.subscription.add(subs);
                 }
             });
-            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);
+            this.subscription.add(subs2);
         }
         else {
             this.alertService?.warning('Действие не доступно.');
@@ -1414,17 +1412,17 @@ class BasePageClass {
                                 this.alertService?.error('Произошла ошибка при изменении записи: ' + error, 0);
                             }
                         });
-                        this.subscription?.add(subs);
+                        this.subscription.add(subs);
                     }
                 });
-                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);
+                this.subscription.add(subs2);
             }
             else {
                 this.alertService?.warning('Действие не доступно.');
@@ -1454,17 +1452,17 @@ class BasePageClass {
                                 this.alertService?.error('Произошла ошибка при удалении записи: ' + error, 0);
                             }
                         });
-                        this.subscription?.add(subs);
+                        this.subscription.add(subs);
                     }
                 });
-                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);
+                this.subscription.add(subs2);
             }
         }
     }
@@ -1793,23 +1791,24 @@ class BaseMatChipComponent {
     selectedItems = [];
     // Все элементы
     items = [];
-    subscription;
+    subscription = new Subscription();
     constructor() {
     }
     ngOnInit() {
-        this.subscription = this.items$.subscribe(data => {
+        const subs = this.items$.subscribe(data => {
             // console.log('ITEMS$ data', data);
             this.items = data;
             if (this.items.length > 0) {
                 this.filteredItems$ = this.inputCtrl.valueChanges.pipe(startWith(null), map(item => (item ? this._filter(item) : this.items.slice())));
-                const subs = this.selectedItems$.subscribe(items => {
+                const subs2 = this.selectedItems$.subscribe(items => {
                     // console.log('ITEMS', items);
                     if (items)
                         this.selectedItems = this.items.filter(s => items.includes(s.value));
                 });
-                this.subscription?.add(subs);
+                this.subscription.add(subs2);
             }
         });
+        this.subscription.add(subs);
     }
     ngOnDestroy() {
         if (this.subscription)
@@ -1891,7 +1890,7 @@ class DateRangeInputComponent {
     required = input(false);
     dateRangeChange = output();
     form;
-    subscription;
+    subscription = new Subscription();
     constructor() {
         this.form = new FormGroup({
             begin: new FormControl(),
@@ -1975,7 +1974,7 @@ class NavBarComponent {
     roles$;
     fioUser = '';
     photoURL = '';
-    subscription;
+    subscription = new Subscription();
     constructor(authService, userService, avatarService, dialog, router) {
         this.authService = authService;
         this.avatarService = avatarService;
@@ -1984,7 +1983,7 @@ class NavBarComponent {
         this.loggedIn$ = this.authService.loggedIn$;
         this.roles$ = this.authService.roles$;
         this.fioUser = '';
-        this.subscription = this.loggedIn$.subscribe({
+        const subs = this.loggedIn$.subscribe({
             next: (value) => {
                 if (value) {
                     if (userService.userData) {
@@ -1993,19 +1992,20 @@ class NavBarComponent {
                         }
                         if (userService.userData.idHuman) {
                             // Аватар сотрудника.
-                            const subs = this.avatarService.getAvatarById(Number(userService.userData.idHuman))
+                            const subs2 = this.avatarService.getAvatarById(Number(userService.userData.idHuman))
                                 .subscribe((image) => {
                                 if (image) {
                                     const blob = new Blob([image], { "type": "image/jpeg" });
                                     this.photoURL = URL.createObjectURL(blob);
                                 }
                             });
-                            this.subscription?.add(subs);
+                            this.subscription.add(subs2);
                         }
                     }
                 }
             }
         });
+        this.subscription.add(subs);
     }
     ngOnDestroy() {
         if (this.subscription)
@@ -2030,7 +2030,7 @@ class NavBarComponent {
                 this.logout();
             }
         });
-        this.subscription?.add(subs);
+        this.subscription.add(subs);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NavBarComponent, deps: [{ token: AuthService }, { token: UserService }, { token: AvatarService }, { token: i1$4.MatDialog }, { token: i2.Router }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.2", type: NavBarComponent, isStandalone: true, selector: "ngx-uik-navbar", ngImport: i0, template: "@if (loggedIn$ | async) {\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 ((loggedIn$ | async) === false || !photoURL) {\r\n      <mat-icon [matTooltip]=\"(roles$ | async)?.join(',')||''\">account_circle</mat-icon>\r\n    }\r\n    @if ((loggedIn$ | async) && photoURL) {\r\n      <img\r\n        class=\"user-photo\"\r\n        [src]=\"photoURL | safe\"\r\n        loading=\"lazy\"\r\n        [alt]=\"fioUser\"\r\n        [matTooltip]=\"(roles$ | async)?.join(',')||''\">\r\n    }\r\n\r\n    <span class = \"user-name\" [matTooltip]=\"(roles$ | async)?.join(',') || ''\">\r\n      {{ fioUser }}\r\n    </span>\r\n\r\n    <a mat-button class=\"pm-button\" (click)=\"openDialog()\">\u0412\u044B\u0439\u0442\u0438 <mat-icon>logout</mat-icon></a>\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: "a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button]", 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: AsyncPipe, name: "async" }, { kind: "pipe", type: SafePipe, name: "safe" }] });
@@ -2052,56 +2052,50 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImpor
             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"] }]
         }], ctorParameters: () => [] });
 
-class BaseSelectAutocompleteWithVirtualScrollComponent {
+class BaseSelectAutocompleteWithVsComponent {
     // https://stackblitz.com/edit/autocomplete-with-virtual-scroll-dc9u2g
     // Все элементы
-    items$ = new BehaviorSubject([]);
+    items = input([]);
     // Выбранный элемент
-    selectedItem$ = new BehaviorSubject(undefined);
+    selectedItem = input(undefined);
     // Заголовок
-    title = '';
+    title = input('');
     // Видимость
-    isVisible = true;
+    isVisible = input(true);
     // Обязательность
-    isRequired = false;
+    isRequired = input(false);
     // Доступность
-    isDisabled = false;
+    isDisabled = input(false);
     // Доступность
-    width = '200';
+    width = input('200');
     // Событие изменения выбранного элемента
-    selectedItemChange = new EventEmitter();
+    selectedItemChange = output();
     height = '200px';
     // input элемент
     inputCtrl = new FormControl();
     // отфильтрованные (отображаемые) элементы
-    filteredItems$ = new BehaviorSubject([]);
-    subscription;
+    filteredItems = [];
+    subscription = new Subscription();
     constructor() {
-    }
-    ngOnInit() {
-        //console.log('isVisible = ', this.isVisible);
-        //console.log('isDisabled = ', this.isDisabled);
-        this.subscription = this.items$.subscribe(data => {
-            console.log('ITEMS$ data', data);
-            console.log('onLoad: this.selectedItem$.value =', this.selectedItem$.value);
-            this.filteredItems$.next(data);
-            if (this.selectedItem$.value)
-                this.inputCtrl.setValue(this.selectedItem$.value);
+        effect(() => {
+            this.inputCtrl.setValue(this.selectedItem());
+        });
+        effect(() => {
+            console.log('ITEMS$ data', this.items());
+            console.log('onLoad: this.selectedItem$.value =', this.selectedItem());
+            this.filteredItems = this.items();
+            if (this.selectedItem())
+                this.inputCtrl.setValue(this.selectedItem());
             // if (this.items.length > 0) {
             //   this.filteredItems$ = this.inputCtrl.valueChanges.pipe(
             //     startWith(null),
             //     map(item => (item ? this._filter(item) : this.items.slice())),
             //   );
-            const subs = this.selectedItem$.subscribe(item => {
-                console.log('ITEM =', item);
-                this.inputCtrl.setValue(item);
-                // if (item)
-                //   this.selectedItems = this.items.filter(s => items.includes(s.value));
-            });
-            this.subscription?.add(subs);
         });
+    }
+    ngOnInit() {
         // Listen for changes to the input
-        const subs = this.inputCtrl.valueChanges
+        const subs3 = this.inputCtrl.valueChanges
             .pipe(startWith$1(''), 
         // eslint-disable-next-line no-magic-numbers
         debounceTime(500), distinctUntilChanged(), 
@@ -2113,43 +2107,41 @@ class BaseSelectAutocompleteWithVirtualScrollComponent {
         map((value) => {
             // Filter the options
             if (typeof value === 'undefined') {
-                this.filteredItems$.next(this.items$.value);
+                this.filteredItems = this.items();
             }
             else {
                 if (typeof value !== 'object') {
                     console.log('v1=', value);
-                    this.filteredItems$.next(this.items$.value.filter(option => option.viewValue
-                        .toLowerCase()
-                        .includes(value.toLowerCase())));
+                    this.filteredItems = this.items()
+                        .filter(option => option.viewValue.toLowerCase().includes(value.toLowerCase()));
                 }
                 else {
                     // typeof value === 'object'
                     console.log('v2=', value);
                     if (value) {
                         // this.predmet = value;
-                        this.filteredItems$.next(this.items$.value.filter((option) => (option.viewValue)
-                            .toLowerCase()
-                            .includes(value.viewValue.toLowerCase())));
+                        this.filteredItems = this.items()
+                            .filter((option) => option.viewValue.toLowerCase().includes(value.viewValue.toLowerCase()));
                     }
                     else {
-                        this.filteredItems$.next(this.items$.value);
+                        this.filteredItems = this.items();
                     }
                 }
             }
             // Recompute how big the viewport should be.
             // eslint-disable-next-line no-magic-numbers
-            if (this.filteredItems$.value.length < 4) {
+            if (this.filteredItems.length < 4) {
                 // eslint-disable-next-line no-magic-numbers
-                this.height = this.filteredItems$.value.length * 50 + 'px';
+                this.height = this.filteredItems.length * 50 + 'px';
             }
             else {
                 this.height = '200px';
             }
-            console.log('update filteredItems$.value=', this.filteredItems$.value);
+            console.log('update filteredItems$.value=', this.filteredItems);
         }))
             .subscribe();
-        this.subscription?.add(subs);
-        if (this.isDisabled) {
+        this.subscription.add(subs3);
+        if (this.isDisabled()) {
             this.inputCtrl.disable();
         }
         else {
@@ -2174,30 +2166,14 @@ class BaseSelectAutocompleteWithVirtualScrollComponent {
             ? lookup.viewValue
             : null;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: BaseSelectAutocompleteWithVirtualScrollComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.2", type: BaseSelectAutocompleteWithVirtualScrollComponent, isStandalone: true, selector: "ngx-uik-select-autocomplete-with-virtual-scroll", inputs: { items$: "items$", selectedItem$: "selectedItem$", title: "title", isVisible: "isVisible", isRequired: "isRequired", isDisabled: "isDisabled", width: "width" }, 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$.value) {\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$1.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: i3.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i2$1.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: i4$1.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i4$1.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i4$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" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: BaseSelectAutocompleteWithVsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.2", type: BaseSelectAutocompleteWithVsComponent, isStandalone: true, selector: "ngx-uik-select-autocomplete-with-vs", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, selectedItem: { classPropertyName: "selectedItem", publicName: "selectedItem", 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$1.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: i3.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i2$1.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: i4$1.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i4$1.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i4$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: "19.2.2", ngImport: i0, type: BaseSelectAutocompleteWithVirtualScrollComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: BaseSelectAutocompleteWithVsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ngx-uik-select-autocomplete-with-virtual-scroll', 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$.value) {\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: Input
-            }], selectedItem$: [{
-                type: Input
-            }], title: [{
-                type: Input
-            }], isVisible: [{
-                type: Input
-            }], isRequired: [{
-                type: Input
-            }], isDisabled: [{
-                type: Input
-            }], width: [{
-                type: Input
-            }], selectedItemChange: [{
-                type: Output
-            }] } });
+            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: () => [] });
 
 class BaseSelectWithGroupComponent {
     // Все группы
@@ -2210,15 +2186,16 @@ class BaseSelectWithGroupComponent {
     selectedItemsChange = new EventEmitter();
     separatorKeysCodes = [ENTER, COMMA];
     control = new FormControl([]);
-    subscription;
+    subscription = new Subscription();
     constructor() {
     }
     ngOnInit() {
         this.groups$.subscribe(data => {
             if (data.length > 0) {
-                this.subscription = this.selectedItems$.subscribe(items => {
+                const subs = this.selectedItems$.subscribe(items => {
                     this.control.setValue(items.map(i => Number(i)));
                 });
+                this.subscription.add(subs);
             }
         });
     }
@@ -2299,12 +2276,13 @@ class TableComponent {
     authService = inject(AuthService);
     // Разрешено ли отправлять событие rowDoubleClicked при двойном щелчке мышью.
     dblClickedEventEnable = true;
-    subscription;
+    subscription = new Subscription();
     constructor() {
         // получить права пользователя
-        this.subscription = this.authService.roles$.subscribe((userRoles) => {
+        const subs = this.authService.roles$.subscribe((userRoles) => {
             this.dblClickedEventEnable = !this.authService.isHideElement(this.rolesDblClickedEvent, userRoles);
         });
+        this.subscription.add(subs);
     }
     ngOnInit() {
         this.displayedColumns = ['select'].concat(this.columnOptions?.filter(c => !c.hide).map((item) => item.name) || []);
@@ -2317,7 +2295,7 @@ class TableComponent {
                 this.selection.select(d);
             });
         });
-        this.subscription?.add(subs);
+        this.subscription.add(subs);
         // пересоздаем, т.к. параметр allowMultiSelect появляется только сейчас
         this.selection = new SelectionModel(this.allowMultiSelect);
     }
@@ -2342,7 +2320,7 @@ class TableComponent {
                     pageSize: page.pageSize
                 });
             });
-            this.subscription?.add(subs);
+            this.subscription.add(subs);
         }
         // изменение сортировки
         if (this.sort) {
@@ -2355,14 +2333,14 @@ class TableComponent {
                     sortDirection: sort.direction
                 });
             });
-            this.subscription?.add(subs);
+            this.subscription.add(subs);
         }
         // изменение выбранных записей
         if (this.selection) {
             const subs = this.selection.changed.subscribe(change => {
                 this.selectionChange.emit(change.source.selected);
             });
-            this.subscription?.add(subs);
+            this.subscription.add(subs);
         }
     }
     /** Whether the number of selected elements matches the total number of rows. */
@@ -2480,5 +2458,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { Action, AlertService, AnimationsService, AuthService, AvatarService, BaseEditClass, BaseFilterClass, BaseMatChipComponent, BaseNavBarMenuClass, BasePageClass, BaseSelectAutocompleteWithVirtualScrollComponent, BaseSelectWithGroupComponent, BaseServiceClass, BaseToolbarComponent, DateRangeInputComponent, DialogAction, DialogComponent, DisableIfRoleDirective, DisableIfUnauthorizedDirective, EntityAction, Environment, ExportService, HideIfRoleNotDirective, HideIfUnauthorizedDirective, LoaderService, LocalStorageService, LoginPageComponent, MY_FORMATS, NavBarComponent, NotFoundComponent, ProgressSpinnerComponent, ROUTE_ANIMATIONS_ELEMENTS, RedirectGuard, RoleService, SafePipe, SecUser, TableComponent, TimePipe, TruncatePipe, User, UserService, authGuard, dateFormat, isRouteAnimationsAll, isRouteAnimationsElements, isRouteAnimationsNone, isRouteAnimationsPage, roleGuard, routeAnimations };
+export { Action, AlertService, AnimationsService, AuthService, AvatarService, BaseEditClass, BaseFilterClass, BaseMatChipComponent, BaseNavBarMenuClass, BasePageClass, BaseSelectAutocompleteWithVsComponent, BaseSelectWithGroupComponent, BaseServiceClass, BaseToolbarComponent, DateRangeInputComponent, DialogAction, DialogComponent, DisableIfRoleDirective, DisableIfUnauthorizedDirective, EntityAction, Environment, ExportService, HideIfRoleNotDirective, HideIfUnauthorizedDirective, LoaderService, LocalStorageService, LoginPageComponent, MY_FORMATS, NavBarComponent, NotFoundComponent, ProgressSpinnerComponent, ROUTE_ANIMATIONS_ELEMENTS, RedirectGuard, RoleService, SafePipe, SecUser, TableComponent, TimePipe, TruncatePipe, User, UserService, authGuard, dateFormat, isRouteAnimationsAll, isRouteAnimationsElements, isRouteAnimationsNone, isRouteAnimationsPage, roleGuard, routeAnimations };
 //# sourceMappingURL=kuzntsv-uikit.mjs.map