@kuzntsv/uikit 0.0.11 → 0.0.13

package/base/base-classes/base-page-class.d.ts

@@ -65,6 +65,8 @@ export declare class BasePageClass<T> implements OnDestroy {
     loadLength$: Subject<null>;
     /** Очистка фильтра. */
     clearFilter$: Subject<null>;
+    /** Очистка фильтра (для очистки присвоить пустой объект '{}'). */
+    clearFilter: any;
     /** Разрешен выбор нескольких строк. */
     allowMultiSelect: 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 } 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';
@@ -1255,6 +1255,8 @@ class BasePageClass {
     loadLength$ = new Subject();
     /** Очистка фильтра. */
     clearFilter$ = new Subject();
+    /** Очистка фильтра (для очистки присвоить пустой объект '{}'). */
+    clearFilter = null;
     /** Разрешен выбор нескольких строк. */
     allowMultiSelect = false;
     /** Выбранные строки в таблице. */
@@ -1474,6 +1476,7 @@ class BasePageClass {
     /** Cобытие очистки фильтра. */
     clearEvent() {
         this.clearFilter$.next(null);
+        this.clearFilter = {};
     }
     /** Изменение сообщения об удалении. */
     onRemovalMessageChange(message) {
@@ -1879,14 +1882,14 @@ const MY_FORMATS = {
     },
 };
 
-class DateRangeFilterComponent {
-    label = '';
-    dateRange$ = new BehaviorSubject({ begin: '', end: '' });
+class DateRangeInputComponent {
+    label = input('');
+    dateRange = input({ begin: '', end: '' });
     // eslint-disable-next-line no-magic-numbers
-    minDate = new Date(2020, 0, 1);
-    clearFilter$ = new Subject();
-    required = false;
-    dateRangeChange = new EventEmitter();
+    minDate = input(new Date(2020, 0, 1));
+    clearInput = input(null);
+    required = input(false);
+    dateRangeChange = output();
     form;
     subscription;
     constructor() {
@@ -1894,17 +1897,21 @@ class DateRangeFilterComponent {
             begin: new FormControl(),
             end: new FormControl(),
         });
-    }
-    ngOnInit() {
-        this.subscription = this.dateRange$.subscribe((value) => {
-            console.log(value);
+        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));
         });
-        if (this.required) {
+    }
+    ngOnInit() {
+        if (this.required()) {
             this.form.controls['begin'].addValidators(Validators.required);
             this.form.controls['end'].addValidators(Validators.required);
         }
@@ -1915,7 +1922,7 @@ class DateRangeFilterComponent {
         debounceTime(500), distinctUntilChanged())
             .subscribe({
             next: range => {
-                if (this.required) {
+                if (this.required()) {
                     if (range.begin && range.end) {
                         this.dateRangeChange.emit(this.rangeToDateDateRange(range));
                     }
@@ -1925,10 +1932,6 @@ class DateRangeFilterComponent {
                 }
             }
         });
-        const subs = this.clearFilter$.subscribe(() => {
-            this.form.reset();
-        });
-        this.subscription?.add(subs);
     }
     ngOnDestroy() {
         if (this.subscription)
@@ -1940,32 +1943,20 @@ class DateRangeFilterComponent {
             end: range.end ? dateFormat(range.end) : ''
         };
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: DateRangeFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.2", type: DateRangeFilterComponent, isStandalone: true, selector: "ngx-uik-date-range-filter", inputs: { label: "label", dateRange$: "dateRange$", minDate: "minDate", clearFilter$: "clearFilter$", required: "required" }, outputs: { dateRangeChange: "dateRangeChange" }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: DateRangeInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.2", 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\">\n  <mat-label>{{label}}</mat-label>\n  <mat-date-range-input\n    [rangePicker]=\"picker\"\n    [formGroup]=\"form\"\n    [min]=\"minDate\">\n    <input matStartDate formControlName=\"begin\" placeholder=\"\u0414\u0430\u0442\u0430 \u043D\u0430\u0447\u0430\u043B\u0430\">\n    <input matEndDate formControlName=\"end\" placeholder=\"\u0414\u0430\u0442\u0430 \u043E\u043A\u043E\u043D\u0447\u0430\u043D\u0438\u044F\">\n  </mat-date-range-input>\n  <mat-datepicker-toggle matIconSuffix [for]=\"picker\"></mat-datepicker-toggle>\n  <mat-date-range-picker #picker></mat-date-range-picker>\n  <mat-error>\u0423\u043A\u0430\u0436\u0438\u0442\u0435 \u043F\u0435\u0440\u0438\u043E\u0434</mat-error>\n</mat-form-field>\n\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],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"] }] });
+        ], ngImport: i0, template: "<mat-form-field appearance=\"fill\">\n  <mat-label>{{label()}}</mat-label>\n  <mat-date-range-input\n    [rangePicker]=\"picker\"\n    [formGroup]=\"form\"\n    [min]=\"minDate()\">\n    <input matStartDate formControlName=\"begin\" placeholder=\"\u0414\u0430\u0442\u0430 \u043D\u0430\u0447\u0430\u043B\u0430\">\n    <input matEndDate formControlName=\"end\" placeholder=\"\u0414\u0430\u0442\u0430 \u043E\u043A\u043E\u043D\u0447\u0430\u043D\u0438\u044F\">\n  </mat-date-range-input>\n  <mat-datepicker-toggle matIconSuffix [for]=\"picker\"></mat-datepicker-toggle>\n  <mat-date-range-picker #picker></mat-date-range-picker>\n  <mat-error>\u0423\u043A\u0430\u0436\u0438\u0442\u0435 \u043F\u0435\u0440\u0438\u043E\u0434</mat-error>\n</mat-form-field>\n\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],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: "19.2.2", ngImport: i0, type: DateRangeFilterComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: DateRangeInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ngx-uik-date-range-filter', imports: [MatFormField, MatLabel, MatDateRangeInput, FormsModule, ReactiveFormsModule, MatStartDate, MatEndDate,
+            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\">\n  <mat-label>{{label}}</mat-label>\n  <mat-date-range-input\n    [rangePicker]=\"picker\"\n    [formGroup]=\"form\"\n    [min]=\"minDate\">\n    <input matStartDate formControlName=\"begin\" placeholder=\"\u0414\u0430\u0442\u0430 \u043D\u0430\u0447\u0430\u043B\u0430\">\n    <input matEndDate formControlName=\"end\" placeholder=\"\u0414\u0430\u0442\u0430 \u043E\u043A\u043E\u043D\u0447\u0430\u043D\u0438\u044F\">\n  </mat-date-range-input>\n  <mat-datepicker-toggle matIconSuffix [for]=\"picker\"></mat-datepicker-toggle>\n  <mat-date-range-picker #picker></mat-date-range-picker>\n  <mat-error>\u0423\u043A\u0430\u0436\u0438\u0442\u0435 \u043F\u0435\u0440\u0438\u043E\u0434</mat-error>\n</mat-form-field>\n\n", styles: ["mat-form-field{margin-right:16px}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { label: [{
-                type: Input
-            }], dateRange$: [{
-                type: Input
-            }], minDate: [{
-                type: Input
-            }], clearFilter$: [{
-                type: Input
-            }], required: [{
-                type: Input
-            }], dateRangeChange: [{
-                type: Output
-            }] } });
+                    ], template: "<mat-form-field appearance=\"fill\">\n  <mat-label>{{label()}}</mat-label>\n  <mat-date-range-input\n    [rangePicker]=\"picker\"\n    [formGroup]=\"form\"\n    [min]=\"minDate()\">\n    <input matStartDate formControlName=\"begin\" placeholder=\"\u0414\u0430\u0442\u0430 \u043D\u0430\u0447\u0430\u043B\u0430\">\n    <input matEndDate formControlName=\"end\" placeholder=\"\u0414\u0430\u0442\u0430 \u043E\u043A\u043E\u043D\u0447\u0430\u043D\u0438\u044F\">\n  </mat-date-range-input>\n  <mat-datepicker-toggle matIconSuffix [for]=\"picker\"></mat-datepicker-toggle>\n  <mat-date-range-picker #picker></mat-date-range-picker>\n  <mat-error>\u0423\u043A\u0430\u0436\u0438\u0442\u0435 \u043F\u0435\u0440\u0438\u043E\u0434</mat-error>\n</mat-form-field>\n\n", styles: ["mat-form-field{margin-right:16px}\n"] }]
+        }], ctorParameters: () => [] });
 
 var DialogAction;
 (function (DialogAction) {
@@ -2475,5 +2466,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, DateRangeFilterComponent, 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, 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 };
 //# sourceMappingURL=kuzntsv-uikit.mjs.map