@recursyve/nice-ui-kit.v2 14.0.0-beta.121 → 14.0.0-beta.123
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2020/lib/components/date-range-picker/date-range-picker.component.mjs +33 -12
- package/fesm2015/recursyve-nice-ui-kit.v2.mjs +32 -12
- package/fesm2015/recursyve-nice-ui-kit.v2.mjs.map +1 -1
- package/fesm2020/recursyve-nice-ui-kit.v2.mjs +32 -12
- package/fesm2020/recursyve-nice-ui-kit.v2.mjs.map +1 -1
- package/lib/components/date-range-picker/date-range-picker.component.d.ts +1 -2
- package/package.json +1 -1
|
@@ -5,7 +5,7 @@ import * as i0 from '@angular/core';
|
|
|
5
5
|
import { Injectable, NgModule, EventEmitter, Component, ViewEncapsulation, ChangeDetectionStrategy, Input, Output, HostBinding, InjectionToken, Directive, HostListener, forwardRef, TemplateRef, Optional, Inject, ViewChild, ContentChild, ViewChildren, Self, Pipe, ElementRef, PLATFORM_ID, ContentChildren, SimpleChange, SkipSelf } from '@angular/core';
|
|
6
6
|
import { plainToInstance } from 'class-transformer';
|
|
7
7
|
import { map, filter, takeUntil, tap, take, debounceTime as debounceTime$1, delay, switchMap } from 'rxjs/operators';
|
|
8
|
-
import { catchError, ReplaySubject, Subject, BehaviorSubject, mergeMap, from, isObservable, firstValueFrom, debounceTime, distinctUntilChanged, startWith, tap as tap$1, Observable, combineLatest, of, fromEvent, merge as merge$1
|
|
8
|
+
import { catchError, ReplaySubject, Subject, BehaviorSubject, mergeMap, from, isObservable, firstValueFrom, debounceTime, distinctUntilChanged, startWith, pairwise, tap as tap$1, Observable, combineLatest, of, fromEvent, merge as merge$1 } from 'rxjs';
|
|
9
9
|
import { coerceBooleanProperty } from '@angular/cdk/coercion';
|
|
10
10
|
import * as i2 from '@angular/common';
|
|
11
11
|
import { CommonModule, DatePipe, CurrencyPipe, DOCUMENT, isPlatformServer, NgForOf, NgIf, AsyncPipe, UpperCasePipe } from '@angular/common';
|
|
@@ -42,9 +42,10 @@ import { OverlayContainer, Overlay } from '@angular/cdk/overlay';
|
|
|
42
42
|
import { ComponentPortal } from '@angular/cdk/portal';
|
|
43
43
|
import * as i5 from '@angular/material/card';
|
|
44
44
|
import { MatCardModule } from '@angular/material/card';
|
|
45
|
-
import
|
|
46
|
-
import { MatDateRangePicker, MatDatepickerModule } from '@angular/material/datepicker';
|
|
45
|
+
import { isSameDay } from 'date-fns';
|
|
47
46
|
import subDays from 'date-fns/subDays';
|
|
47
|
+
import * as i2$3 from '@angular/material/datepicker';
|
|
48
|
+
import { MatDatepickerModule } from '@angular/material/datepicker';
|
|
48
49
|
import * as i1$7 from 'ngx-mask';
|
|
49
50
|
import * as i1$8 from '@angular/platform-browser';
|
|
50
51
|
import { merge } from 'lodash-es';
|
|
@@ -3911,9 +3912,31 @@ class NiceDateRangePickerComponent {
|
|
|
3911
3912
|
to: this.max
|
|
3912
3913
|
};
|
|
3913
3914
|
this.formGroup.patchValue(this.value);
|
|
3914
|
-
this.formGroup.valueChanges.
|
|
3915
|
+
this.formGroup.valueChanges.pipe(startWith(this.value), pairwise(), filter(([before, after]) => {
|
|
3916
|
+
/**
|
|
3917
|
+
* We filter out the value changes to only emit when the selection is completed/
|
|
3918
|
+
*/
|
|
3919
|
+
if (!after.from && !after.to) {
|
|
3920
|
+
return true;
|
|
3921
|
+
}
|
|
3922
|
+
// This is the middle of the selection
|
|
3923
|
+
if (after.from && !after.to) {
|
|
3924
|
+
return false;
|
|
3925
|
+
}
|
|
3926
|
+
// This means that the selection is done
|
|
3927
|
+
if (!before.to && after.to) {
|
|
3928
|
+
return true;
|
|
3929
|
+
}
|
|
3930
|
+
// This is an edge case when we select a new range with an active range selected.
|
|
3931
|
+
// The after.to will be at null after the after.from is emitted
|
|
3932
|
+
if (!isSameDay(before.from, after.from) && isSameDay(before.to, after.to)) {
|
|
3933
|
+
return false;
|
|
3934
|
+
}
|
|
3935
|
+
// Skip if noting has changed
|
|
3936
|
+
return !(isSameDay(before.from, after.from) && !isSameDay(before.to, after.to));
|
|
3937
|
+
})).subscribe((_) => {
|
|
3915
3938
|
this.value = this.formGroup.getRawValue();
|
|
3916
|
-
this.
|
|
3939
|
+
this.propagate?.(this.value);
|
|
3917
3940
|
});
|
|
3918
3941
|
}
|
|
3919
3942
|
writeValue(value) {
|
|
@@ -3921,7 +3944,7 @@ class NiceDateRangePickerComponent {
|
|
|
3921
3944
|
this.formGroup.patchValue(this.value);
|
|
3922
3945
|
}
|
|
3923
3946
|
registerOnChange(fn) {
|
|
3924
|
-
this.
|
|
3947
|
+
this.propagate = fn;
|
|
3925
3948
|
}
|
|
3926
3949
|
registerOnTouched(fn) { }
|
|
3927
3950
|
}
|
|
@@ -3932,7 +3955,7 @@ NiceDateRangePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14
|
|
|
3932
3955
|
useExisting: forwardRef(() => NiceDateRangePickerComponent),
|
|
3933
3956
|
multi: true
|
|
3934
3957
|
}
|
|
3935
|
-
],
|
|
3958
|
+
], ngImport: i0, template: "<div class=\"nice-date-picker-container\">\n <div class=\"nice-date-picker-header\">\n <div class=\"from-to\">\n <ng-container *ngIf=\"value?.from\">\n {{ value.from | localizedDate: \"longDate\" }}\n </ng-container>\n <ng-container *ngIf=\"value?.to\">\n <div class=\"separator\">-</div>\n {{ value.to | localizedDate: \"longDate\" }}\n </ng-container>\n </div>\n </div>\n\n <mat-date-range-input [formGroup]=\"formGroup\" [max]=\"nowIsMax ? now : null\" [rangePicker]=\"picker\">\n <input formControlName=\"from\" class=\"hidden-input\" matStartDate placeholder=\"Start date\">\n <input formControlName=\"to\" class=\"hidden-input\" matEndDate placeholder=\"End date\">\n </mat-date-range-input>\n\n <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n\n <mat-date-range-picker\n [calendarHeaderComponent]=\"HeaderComponent\"\n #picker\n ></mat-date-range-picker>\n</div>\n", styles: ["nice-date-range-picker .mat-date-range-input{width:0;height:0;padding:0;margin:0;border:none;visibility:hidden}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$3.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i2$3.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i2$3.MatStartDate, selector: "input[matStartDate]", inputs: ["errorStateMatcher"], outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i2$3.MatEndDate, selector: "input[matEndDate]", inputs: ["errorStateMatcher"], outputs: ["dateChange", "dateInput"] }, { kind: "component", type: i2$3.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }, { kind: "directive", type: i1$3.MatSuffix, selector: "[matSuffix]" }, { kind: "directive", type: i1$2.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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "pipe", type: LocalizedDatePipe, name: "localizedDate" }], encapsulation: i0.ViewEncapsulation.None });
|
|
3936
3959
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: NiceDateRangePickerComponent, decorators: [{
|
|
3937
3960
|
type: Component,
|
|
3938
3961
|
args: [{ selector: "nice-date-range-picker", encapsulation: ViewEncapsulation.None, providers: [
|
|
@@ -3941,11 +3964,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.3", ngImpor
|
|
|
3941
3964
|
useExisting: forwardRef(() => NiceDateRangePickerComponent),
|
|
3942
3965
|
multi: true
|
|
3943
3966
|
}
|
|
3944
|
-
], template: "<div class=\"nice-date-picker-container\">\n <div class=\"nice-date-picker-header\">\n <div class=\"from-to\">\n <ng-container *ngIf=\"value
|
|
3945
|
-
}], propDecorators: {
|
|
3946
|
-
type: ViewChild,
|
|
3947
|
-
args: [MatDateRangePicker]
|
|
3948
|
-
}], min: [{
|
|
3967
|
+
], template: "<div class=\"nice-date-picker-container\">\n <div class=\"nice-date-picker-header\">\n <div class=\"from-to\">\n <ng-container *ngIf=\"value?.from\">\n {{ value.from | localizedDate: \"longDate\" }}\n </ng-container>\n <ng-container *ngIf=\"value?.to\">\n <div class=\"separator\">-</div>\n {{ value.to | localizedDate: \"longDate\" }}\n </ng-container>\n </div>\n </div>\n\n <mat-date-range-input [formGroup]=\"formGroup\" [max]=\"nowIsMax ? now : null\" [rangePicker]=\"picker\">\n <input formControlName=\"from\" class=\"hidden-input\" matStartDate placeholder=\"Start date\">\n <input formControlName=\"to\" class=\"hidden-input\" matEndDate placeholder=\"End date\">\n </mat-date-range-input>\n\n <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n\n <mat-date-range-picker\n [calendarHeaderComponent]=\"HeaderComponent\"\n #picker\n ></mat-date-range-picker>\n</div>\n", styles: ["nice-date-range-picker .mat-date-range-input{width:0;height:0;padding:0;margin:0;border:none;visibility:hidden}\n"] }]
|
|
3968
|
+
}], propDecorators: { min: [{
|
|
3949
3969
|
type: Input
|
|
3950
3970
|
}], max: [{
|
|
3951
3971
|
type: Input
|