@kuzntsv/uikit 0.0.21 → 0.0.23

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, HostListener, Output, ViewChild, Component, Input, Injectable, ChangeDetectionStrategy, Directive, inject, Inject, Pipe, input, output, effect, signal } from '@angular/core';
+import { EventEmitter, HostListener, Output, ViewChild, Component, Input, Injectable, ChangeDetectionStrategy, Directive, inject, Inject, Pipe, input, output, effect } from '@angular/core';
 import { MatCard, MatCardHeader, MatCardTitle, MatCardContent } from '@angular/material/card';
 import * as i1 from '@angular/forms';
 import { FormGroup, FormControl, Validators, FormsModule, ReactiveFormsModule } from '@angular/forms';
@@ -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();
@@ -1793,9 +1791,8 @@ class BaseMatChipComponent {
     selectedItems = [];
     // Все элементы
     items = [];
-    subscription;
+    subscription = new Subscription();
     constructor() {
-        this.subscription = new Subscription();
     }
     ngOnInit() {
         const subs = this.items$.subscribe(data => {
@@ -1893,7 +1890,7 @@ class DateRangeInputComponent {
     required = input(false);
     dateRangeChange = output();
     form;
-    subscription;
+    subscription = new Subscription();
     constructor() {
         this.form = new FormGroup({
             begin: new FormControl(),
@@ -1977,7 +1974,7 @@ class NavBarComponent {
     roles$;
     fioUser = '';
     photoURL = '';
-    subscription;
+    subscription = new Subscription();
     constructor(authService, userService, avatarService, dialog, router) {
         this.authService = authService;
         this.avatarService = avatarService;
@@ -1986,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) {
@@ -2008,6 +2005,7 @@ class NavBarComponent {
                 }
             }
         });
+        this.subscription.add(subs);
     }
     ngOnDestroy() {
         if (this.subscription)
@@ -2076,29 +2074,22 @@ class BaseSelectAutocompleteWithVsComponent {
     // input элемент
     inputCtrl = new FormControl();
     // отфильтрованные (отображаемые) элементы
-    filteredItems = signal([]);
-    subscription;
+    filteredItems = [];
+    subscription = new Subscription();
     constructor() {
-        this.subscription = new Subscription();
-        effect(() => {
-            this.inputCtrl.setValue(this.selectedItem());
-        });
         effect(() => {
-            console.log('ITEMS$ data', this.items());
-            console.log('onLoad: this.selectedItem$.value =', this.selectedItem());
-            this.filteredItems.set(this.items());
+            console.log('selectedItem =', this.selectedItem());
             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())),
-            //   );
+        });
+        effect(() => {
+            console.log('ITEMS =', this.items());
+            this.filteredItems = this.items();
         });
     }
     ngOnInit() {
         // Listen for changes to the input
-        const subs3 = this.inputCtrl.valueChanges
+        const subs = this.inputCtrl.valueChanges
             .pipe(startWith$1(''), 
         // eslint-disable-next-line no-magic-numbers
         debounceTime(500), distinctUntilChanged(), 
@@ -2110,42 +2101,40 @@ class BaseSelectAutocompleteWithVsComponent {
         map((value) => {
             // Filter the options
             if (typeof value === 'undefined') {
-                this.filteredItems.set(this.items());
+                this.filteredItems = this.items();
             }
             else {
                 if (typeof value !== 'object') {
                     console.log('v1=', value);
-                    this.filteredItems.set(this.items().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.set(this.items().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.set(this.items());
+                        this.filteredItems = this.items();
                     }
                 }
             }
             // Recompute how big the viewport should be.
             // eslint-disable-next-line no-magic-numbers
-            if (this.filteredItems().length < 4) {
+            if (this.filteredItems.length < 4) {
                 // eslint-disable-next-line no-magic-numbers
-                this.height = this.filteredItems().length * 50 + 'px';
+                this.height = this.filteredItems.length * 50 + 'px';
             }
             else {
                 this.height = '200px';
             }
-            console.log('update filteredItems$.value=', this.filteredItems());
+            console.log('update filteredItems$.value=', this.filteredItems);
         }))
             .subscribe();
-        this.subscription.add(subs3);
+        this.subscription.add(subs);
         if (this.isDisabled()) {
             this.inputCtrl.disable();
         }
@@ -2164,20 +2153,18 @@ class BaseSelectAutocompleteWithVsComponent {
     }
     onClearClick($event) {
         $event.stopPropagation();
-        this.inputCtrl.setValue("");
+        this.inputCtrl.setValue('');
     }
     displayWithFn(lookup) {
-        return lookup
-            ? lookup.viewValue
-            : null;
+        return lookup ? lookup.viewValue : null;
     }
     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" }] });
+    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: 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"] }]
+                        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 {
@@ -2191,9 +2178,8 @@ class BaseSelectWithGroupComponent {
     selectedItemsChange = new EventEmitter();
     separatorKeysCodes = [ENTER, COMMA];
     control = new FormControl([]);
-    subscription;
+    subscription = new Subscription();
     constructor() {
-        this.subscription = new Subscription();
     }
     ngOnInit() {
         this.groups$.subscribe(data => {
@@ -2282,12 +2268,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) || []);