@recursyve/nice-ui-kit.v2 14.0.0-beta.122 → 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 +32 -11
- package/fesm2015/recursyve-nice-ui-kit.v2.mjs +31 -11
- package/fesm2015/recursyve-nice-ui-kit.v2.mjs.map +1 -1
- package/fesm2020/recursyve-nice-ui-kit.v2.mjs +31 -11
- 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
|
@@ -1,7 +1,9 @@
|
|
|
1
|
-
import { Component, forwardRef, Input,
|
|
1
|
+
import { Component, forwardRef, Input, ViewEncapsulation } from "@angular/core";
|
|
2
2
|
import { FormControl, FormGroup, NG_VALUE_ACCESSOR } from "@angular/forms";
|
|
3
|
-
import {
|
|
3
|
+
import { isSameDay } from "date-fns";
|
|
4
4
|
import subDays from "date-fns/subDays";
|
|
5
|
+
import { pairwise, startWith } from "rxjs";
|
|
6
|
+
import { filter } from "rxjs/operators";
|
|
5
7
|
import { HeaderComponent } from "./components/header/header.component";
|
|
6
8
|
import * as i0 from "@angular/core";
|
|
7
9
|
import * as i1 from "@angular/common";
|
|
@@ -28,9 +30,31 @@ export class NiceDateRangePickerComponent {
|
|
|
28
30
|
to: this.max
|
|
29
31
|
};
|
|
30
32
|
this.formGroup.patchValue(this.value);
|
|
31
|
-
this.formGroup.valueChanges.
|
|
33
|
+
this.formGroup.valueChanges.pipe(startWith(this.value), pairwise(), filter(([before, after]) => {
|
|
34
|
+
/**
|
|
35
|
+
* We filter out the value changes to only emit when the selection is completed/
|
|
36
|
+
*/
|
|
37
|
+
if (!after.from && !after.to) {
|
|
38
|
+
return true;
|
|
39
|
+
}
|
|
40
|
+
// This is the middle of the selection
|
|
41
|
+
if (after.from && !after.to) {
|
|
42
|
+
return false;
|
|
43
|
+
}
|
|
44
|
+
// This means that the selection is done
|
|
45
|
+
if (!before.to && after.to) {
|
|
46
|
+
return true;
|
|
47
|
+
}
|
|
48
|
+
// This is an edge case when we select a new range with an active range selected.
|
|
49
|
+
// The after.to will be at null after the after.from is emitted
|
|
50
|
+
if (!isSameDay(before.from, after.from) && isSameDay(before.to, after.to)) {
|
|
51
|
+
return false;
|
|
52
|
+
}
|
|
53
|
+
// Skip if noting has changed
|
|
54
|
+
return !(isSameDay(before.from, after.from) && !isSameDay(before.to, after.to));
|
|
55
|
+
})).subscribe((_) => {
|
|
32
56
|
this.value = this.formGroup.getRawValue();
|
|
33
|
-
this.
|
|
57
|
+
this.propagate?.(this.value);
|
|
34
58
|
});
|
|
35
59
|
}
|
|
36
60
|
writeValue(value) {
|
|
@@ -38,7 +62,7 @@ export class NiceDateRangePickerComponent {
|
|
|
38
62
|
this.formGroup.patchValue(this.value);
|
|
39
63
|
}
|
|
40
64
|
registerOnChange(fn) {
|
|
41
|
-
this.
|
|
65
|
+
this.propagate = fn;
|
|
42
66
|
}
|
|
43
67
|
registerOnTouched(fn) { }
|
|
44
68
|
}
|
|
@@ -49,7 +73,7 @@ NiceDateRangePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14
|
|
|
49
73
|
useExisting: forwardRef(() => NiceDateRangePickerComponent),
|
|
50
74
|
multi: true
|
|
51
75
|
}
|
|
52
|
-
],
|
|
76
|
+
], 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: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i2.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i2.MatStartDate, selector: "input[matStartDate]", inputs: ["errorStateMatcher"], outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i2.MatEndDate, selector: "input[matEndDate]", inputs: ["errorStateMatcher"], outputs: ["dateChange", "dateInput"] }, { kind: "component", type: i2.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix]" }, { kind: "directive", type: i4.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: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "pipe", type: i5.LocalizedDatePipe, name: "localizedDate" }], encapsulation: i0.ViewEncapsulation.None });
|
|
53
77
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: NiceDateRangePickerComponent, decorators: [{
|
|
54
78
|
type: Component,
|
|
55
79
|
args: [{ selector: "nice-date-range-picker", encapsulation: ViewEncapsulation.None, providers: [
|
|
@@ -59,10 +83,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.3", ngImpor
|
|
|
59
83
|
multi: true
|
|
60
84
|
}
|
|
61
85
|
], 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"] }]
|
|
62
|
-
}], propDecorators: {
|
|
63
|
-
type: ViewChild,
|
|
64
|
-
args: [MatDateRangePicker]
|
|
65
|
-
}], min: [{
|
|
86
|
+
}], propDecorators: { min: [{
|
|
66
87
|
type: Input
|
|
67
88
|
}], max: [{
|
|
68
89
|
type: Input
|
|
@@ -71,4 +92,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.3", ngImpor
|
|
|
71
92
|
}], allowClear: [{
|
|
72
93
|
type: Input
|
|
73
94
|
}] } });
|
|
74
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
95
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGF0ZS1yYW5nZS1waWNrZXIuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmljZS11aS1raXQtdjIvc3JjL2xpYi9jb21wb25lbnRzL2RhdGUtcmFuZ2UtcGlja2VyL2RhdGUtcmFuZ2UtcGlja2VyLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL25pY2UtdWkta2l0LXYyL3NyYy9saWIvY29tcG9uZW50cy9kYXRlLXJhbmdlLXBpY2tlci9kYXRlLXJhbmdlLXBpY2tlci50ZW1wbGF0ZS5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsVUFBVSxFQUFFLEtBQUssRUFBVSxpQkFBaUIsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUN4RixPQUFPLEVBQXdCLFdBQVcsRUFBRSxTQUFTLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSxnQkFBZ0IsQ0FBQztBQUNqRyxPQUFPLEVBQUUsU0FBUyxFQUFFLE1BQU0sVUFBVSxDQUFDO0FBRXJDLE9BQU8sT0FBTyxNQUFNLGtCQUFrQixDQUFDO0FBQ3ZDLE9BQU8sRUFBRSxRQUFRLEVBQUUsU0FBUyxFQUFFLE1BQU0sTUFBTSxDQUFDO0FBQzNDLE9BQU8sRUFBRSxNQUFNLEVBQUUsTUFBTSxnQkFBZ0IsQ0FBQztBQUN4QyxPQUFPLEVBQUUsZUFBZSxFQUFFLE1BQU0sc0NBQXNDLENBQUM7Ozs7Ozs7QUFvQnZFLE1BQU0sT0FBTyw0QkFBNEI7SUFiekM7UUFjb0Isb0JBQWUsR0FBRyxlQUFlLENBQUM7UUFHM0MsUUFBRyxHQUFHLE9BQU8sQ0FBQyxJQUFJLElBQUksRUFBRSxFQUFFLENBQUMsQ0FBQyxDQUFDO1FBRzdCLFFBQUcsR0FBRyxJQUFJLElBQUksRUFBRSxDQUFDO1FBR2pCLGFBQVEsR0FBRyxJQUFJLENBQUM7UUFHaEIsZUFBVSxHQUFHLElBQUksQ0FBQztRQUVsQixjQUFT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QUcsRUFBRSw2QkFBNkIsQ0FBQzs0QkFDM0QsS0FBSyxFQUFFLElBQUk7eUJBQ2Q7cUJBQ0o7OEJBTU0sR0FBRztzQkFEVCxLQUFLO2dCQUlDLEdBQUc7c0JBRFQsS0FBSztnQkFJQyxRQUFRO3NCQURkLEtBQUs7Z0JBSUMsVUFBVTtzQkFEaEIsS0FBSyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgZm9yd2FyZFJlZiwgSW5wdXQsIE9uSW5pdCwgVmlld0VuY2Fwc3VsYXRpb24gfSBmcm9tIFwiQGFuZ3VsYXIvY29yZVwiO1xuaW1wb3J0IHsgQ29udHJvbFZhbHVlQWNjZXNzb3IsIEZvcm1Db250cm9sLCBGb3JtR3JvdXAsIE5HX1ZBTFVFX0FDQ0VTU09SIH0gZnJvbSBcIkBhbmd1bGFyL2Zvcm1zXCI7XG5pbXBvcnQgeyBpc1NhbWVEYXkgfSBmcm9tIFwiZGF0ZS1mbnNcIjtcbmltcG9ydCB7IHRoIH0gZnJvbSBcImRhdGUtZm5zL2xvY2FsZVwiO1xuaW1wb3J0IHN1YkRheXMgZnJvbSBcImRhdGUtZm5zL3N1YkRheXNcIjtcbmltcG9ydCB7IHBhaXJ3aXNlLCBzdGFydFdpdGggfSBmcm9tIFwicnhqc1wiO1xuaW1wb3J0IHsgZmlsdGVyIH0gZnJvbSBcInJ4anMvb3BlcmF0b3JzXCI7XG5pbXBvcnQgeyBIZWFkZXJDb21wb25lbnQgfSBmcm9tIFwiLi9jb21wb25lbnRzL2hlYWRlci9oZWFkZXIuY29tcG9uZW50XCI7XG5cbmV4cG9ydCBpbnRlcmZhY2UgTmljZURhdGVSYW5nZVBpY2tlclZhbHVlIHtcbiAgICBmcm9tOiBEYXRlO1xuICAgIHRvOiBEYXRlO1xufVxuXG5AQ29tcG9uZW50KHtcbiAgICBzZWxlY3RvcjogXCJuaWNlLWRhdGUtcmFuZ2UtcGlja2VyXCIsXG4gICAgdGVtcGxhdGVVcmw6IFwiZGF0ZS1yYW5nZS1waWNrZXIudGVtcGxhdGUuaHRtbFwiLFxuICAgIHN0eWxlVXJsczogW1wiZGF0ZS1yYW5nZS1waWNrZXIuc3R5bGUuc2Nzc1wiXSxcbiAgICBlbmNhcHN1bGF0aW9uOiBWaWV3RW5jYXBzdWxhdGlvbi5Ob25lLFxuICAgIHByb3ZpZGVyczogW1xuICAgICAgICB7XG4gICAgICAgICAgICBwcm92aWRlOiBOR19WQUxVRV9BQ0NFU1NPUixcbiAgICAgICAgICAgIHVzZUV4aXN0aW5nOiBmb3J3YXJkUmVmKCgpID0+IE5pY2VEYXRlUmFuZ2VQaWNrZXJDb21wb25lbnQpLFxuICAgICAgICAgICAgbXVsdGk6IHRydWVcbiAgICAgICAgfVxuICAgIF1cbn0pXG5leHBvcnQgY2xhc3MgTmljZURhdGVSYW5nZVBpY2tlckNvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCwgQ29udHJvbFZhbHVlQWNjZXNzb3Ige1xuICAgIHB1YmxpYyByZWFkb25seSBIZWFkZXJDb21wb25lbnQgPSBIZWFkZXJDb21wb25lbnQ7XG5cbiAgICBASW5wdXQoKVxuICAgIHB1YmxpYyBtaW4gPSBzdWJEYXlzKG5ldyBEYXRlKCksIDMpO1xuXG4gICAgQElucHV0KClcbiAgICBwdWJsaWMgbWF4ID0gbmV3IERhdGUoKTtcblxuICAgIEBJbnB1dCgpXG4gICAgcHVibGljIG5vd0lzTWF4ID0gdHJ1ZTtcblxuICAgIEBJbnB1dCgpXG4gICAgcHVibGljIGFsbG93Q2xlYXIgPSB0cnVlO1xuXG4gICAgcHVibGljIGZvcm1Hcm91cCA9IG5ldyBGb3JtR3JvdXAoe1xuICAgICAgICBmcm9tOiBuZXcgRm9ybUNvbnRyb2woKSxcbiAgICAgICAgdG86IG5ldyBGb3JtQ29udHJvbCgpXG4gICAgfSk7XG4gICAgcHVibGljIG5vdyA9IG5ldyBEYXRlKCk7XG4gICAgcHVibGljIHZhbHVlOiBOaWNlRGF0ZVJhbmdlUGlja2VyVmFsdWU7XG5cbiAgICBwcml2YXRlIHByb3BhZ2F0ZTogKHZhbHVlOiBOaWNlRGF0ZVJhbmdlUGlja2VyVmFsdWUpID0+IHZvaWQ7XG5cbiAgICBwdWJsaWMgbmdPbkluaXQoKTogdm9pZCB7XG4gICAgICAgIHRoaXMudmFsdWUgPSB7XG4gICAgICAgICAgICBmcm9tOiB0aGlzLm1pbixcbiAgICAgICAgICAgIHRvOiB0aGlzLm1heFxuICAgICAgICB9O1xuICAgICAgICB0aGlzLmZvcm1Hcm91cC5wYXRjaFZhbHVlKHRoaXMudmFsdWUpO1xuXG4gICAgICAgIHRoaXMuZm9ybUdyb3VwLnZhbHVlQ2hhbmdlcy5waXBlKFxuICAgICAgICAgICAgc3RhcnRXaXRoKHRoaXMudmFsdWUpLFxuICAgICAgICAgICAgcGFpcndpc2UoKSxcbiAgICAgICAgICAgIGZpbHRlcigoW2JlZm9yZSwgYWZ0ZXJdKSA9PiB7XG4gICAgICAgICAgICAgICAgLyoqXG4gICAgICAgICAgICAgICAgICogV2UgZmlsdGVyIG91dCB0aGUgdmFsdWUgY2hhbmdlcyB0byBvbmx5IGVtaXQgd2hlbiB0aGUgc2VsZWN0aW9uIGlzIGNvbXBsZXRlZC9cbiAgICAgICAgICAgICAgICAgKi9cblxuICAgICAgICAgICAgICAgIGlmICghYWZ0ZXIuZnJvbSAmJiAhYWZ0ZXIudG8pIHtcbiAgICAgICAgICAgICAgICAgICAgcmV0dXJuIHRydWU7XG4gICAgICAgICAgICAgICAgfVxuXG4gICAgICAgICAgICAgICAgLy8gVGhpcyBpcyB0aGUgbWlkZGxlIG9mIHRoZSBzZWxlY3Rpb25cbiAgICAgICAgICAgICAgICBpZiAoYWZ0ZXIuZnJvbSAmJiAhYWZ0ZXIudG8pIHtcbiAgICAgICAgICAgICAgICAgICAgcmV0dXJuIGZhbHNlO1xuICAgICAgICAgICAgICAgIH1cblxuICAgICAgICAgICAgICAgIC8vIFRoaXMgbWVhbnMgdGhhdCB0aGUgc2VsZWN0aW9uIGlzIGRvbmVcbiAgICAgICAgICAgICAgICBpZiAoIWJlZm9yZS50byAmJiBhZnRlci50bykge1xuICAgICAgICAgICAgICAgICAgICByZXR1cm4gdHJ1ZTtcbiAgICAgICAgICAgICAgICB9XG5cbiAgICAgICAgICAgICAgICAvLyBUaGlzIGlzIGFuIGVkZ2UgY2FzZSB3aGVuIHdlIHNlbGVjdCBhIG5ldyByYW5nZSB3aXRoIGFuIGFjdGl2ZSByYW5nZSBzZWxlY3RlZC5cbiAgICAgICAgICAgICAgICAvLyBUaGUgYWZ0ZXIudG8gd2lsbCBiZSBhdCBudWxsIGFmdGVyIHRoZSBhZnRlci5mcm9tIGlzIGVtaXR0ZWRcbiAgICAgICAgICAgICAgICBpZiAoIWlzU2FtZURheShiZWZvcmUuZnJvbSwgYWZ0ZXIuZnJvbSkgJiYgaXNTYW1lRGF5KGJlZm9yZS50bywgYWZ0ZXIudG8pKSB7XG4gICAgICAgICAgICAgICAgICAgIHJldHVybiBmYWxzZTtcbiAgICAgICAgICAgICAgICB9XG5cbiAgICAgICAgICAgICAgICAvLyBTa2lwIGlmIG5vdGluZyBoYXMgY2hhbmdlZFxuICAgICAgICAgICAgICAgIHJldHVybiAhKGlzU2FtZURheShiZWZvcmUuZnJvbSwgYWZ0ZXIuZnJvbSkgJiYgIWlzU2FtZURheShiZWZvcmUudG8sIGFmdGVyLnRvKSk7XG4gICAgICAgICAgICB9KSxcbiAgICAgICAgKS5zdWJzY3JpYmUoKF8pID0+IHtcbiAgICAgICAgICAgIHRoaXMudmFsdWUgPSB0aGlzLmZvcm1Hcm91cC5nZXRSYXdWYWx1ZSgpO1xuICAgICAgICAgICAgdGhpcy5wcm9wYWdhdGU/Lih0aGlzLnZhbHVlKTtcbiAgICAgICAgfSk7XG4gICAgfVxuXG4gICAgcHVibGljIHdyaXRlVmFsdWUodmFsdWU6IE5pY2VEYXRlUmFuZ2VQaWNrZXJWYWx1ZSk6IHZvaWQge1xuICAgICAgICB0aGlzLnZhbHVlID0gdmFsdWU7XG4gICAgICAgIHRoaXMuZm9ybUdyb3VwLnBhdGNoVmFsdWUodGhpcy52YWx1ZSk7XG4gICAgfVxuXG4gICAgcHVibGljIHJlZ2lzdGVyT25DaGFuZ2UoZm46ICh2YWx1ZTogTmljZURhdGVSYW5nZVBpY2tlclZhbHVlKSA9PiB2b2lkKTogdm9pZCB7XG4gICAgICAgIHRoaXMucHJvcGFnYXRlID0gZm47XG4gICAgfVxuXG4gICAgcHVibGljIHJlZ2lzdGVyT25Ub3VjaGVkKGZuOiBhbnkpOiB2b2lkIHt9XG59XG4iLCI8ZGl2IGNsYXNzPVwibmljZS1kYXRlLXBpY2tlci1jb250YWluZXJcIj5cbiAgICA8ZGl2IGNsYXNzPVwibmljZS1kYXRlLXBpY2tlci1oZWFkZXJcIj5cbiAgICAgICAgPGRpdiBjbGFzcz1cImZyb20tdG9cIj5cbiAgICAgICAgICAgIDxuZy1jb250YWluZXIgKm5nSWY9XCJ2YWx1ZT8uZnJvbVwiPlxuICAgICAgICAgICAgICAgIHt7IHZhbHVlLmZyb20gfCBsb2NhbGl6ZWREYXRlOiBcImxvbmdEYXRlXCIgfX1cbiAgICAgICAgICAgIDwvbmctY29udGFpbmVyPlxuICAgICAgICAgICAgPG5nLWNvbnRhaW5lciAqbmdJZj1cInZhbHVlPy50b1wiPlxuICAgICAgICAgICAgICAgIDxkaXYgY2xhc3M9XCJzZXBhcmF0b3JcIj4tPC9kaXY+XG4gICAgICAgICAgICAgICAge3sgdmFsdWUudG8gfCBsb2NhbGl6ZWREYXRlOiBcImxvbmdEYXRlXCIgfX1cbiAgICAgICAgICAgIDwvbmctY29udGFpbmVyPlxuICAgICAgICA8L2Rpdj5cbiAgICA8L2Rpdj5cblxuICAgIDxtYXQtZGF0ZS1yYW5nZS1pbnB1dCBbZm9ybUdyb3VwXT1cImZvcm1Hcm91cFwiIFttYXhdPVwibm93SXNNYXggPyBub3cgOiBudWxsXCIgW3JhbmdlUGlja2VyXT1cInBpY2tlclwiPlxuICAgICAgICA8aW5wdXQgZm9ybUNvbnRyb2xOYW1lPVwiZnJvbVwiIGNsYXNzPVwiaGlkZGVuLWlucHV0XCIgbWF0U3RhcnREYXRlIHBsYWNlaG9sZGVyPVwiU3RhcnQgZGF0ZVwiPlxuICAgICAgICA8aW5wdXQgZm9ybUNvbnRyb2xOYW1lPVwidG9cIiBjbGFzcz1cImhpZGRlbi1pbnB1dFwiIG1hdEVuZERhdGUgcGxhY2Vob2xkZXI9XCJFbmQgZGF0ZVwiPlxuICAgIDwvbWF0LWRhdGUtcmFuZ2UtaW5wdXQ+XG5cbiAgICA8bWF0LWRhdGVwaWNrZXItdG9nZ2xlIG1hdFN1ZmZpeCBbZm9yXT1cInBpY2tlclwiPjwvbWF0LWRhdGVwaWNrZXItdG9nZ2xlPlxuXG4gICAgPG1hdC1kYXRlLXJhbmdlLXBpY2tlclxuICAgICAgICAgICAgW2NhbGVuZGFySGVhZGVyQ29tcG9uZW50XT1cIkhlYWRlckNvbXBvbmVudFwiXG4gICAgICAgICAgICAjcGlja2VyXG4gICAgPjwvbWF0LWRhdGUtcmFuZ2UtcGlja2VyPlxuPC9kaXY+XG4iXX0=
|
|
@@ -6,7 +6,7 @@ import { Injectable, NgModule, EventEmitter, Component, ViewEncapsulation, Chang
|
|
|
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
8
|
import { __rest, __awaiter } from 'tslib';
|
|
9
|
-
import { catchError, ReplaySubject, Subject, BehaviorSubject, mergeMap, from, isObservable, firstValueFrom, debounceTime, distinctUntilChanged, startWith, tap as tap$1, Observable, combineLatest, of, fromEvent, merge as merge$1
|
|
9
|
+
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';
|
|
10
10
|
import { coerceBooleanProperty } from '@angular/cdk/coercion';
|
|
11
11
|
import * as i2 from '@angular/common';
|
|
12
12
|
import { CommonModule, DatePipe, CurrencyPipe, DOCUMENT, isPlatformServer, NgForOf, NgIf, AsyncPipe, UpperCasePipe } from '@angular/common';
|
|
@@ -43,9 +43,10 @@ import * as i1$6 from '@angular/cdk/overlay';
|
|
|
43
43
|
import { OverlayContainer, Overlay } from '@angular/cdk/overlay';
|
|
44
44
|
import * as i5 from '@angular/material/card';
|
|
45
45
|
import { MatCardModule } from '@angular/material/card';
|
|
46
|
-
import
|
|
47
|
-
import { MatDateRangePicker, MatDatepickerModule } from '@angular/material/datepicker';
|
|
46
|
+
import { isSameDay } from 'date-fns';
|
|
48
47
|
import subDays from 'date-fns/subDays';
|
|
48
|
+
import * as i2$3 from '@angular/material/datepicker';
|
|
49
|
+
import { MatDatepickerModule } from '@angular/material/datepicker';
|
|
49
50
|
import * as i1$7 from 'ngx-mask';
|
|
50
51
|
import * as i1$8 from '@angular/platform-browser';
|
|
51
52
|
import { merge } from 'lodash-es';
|
|
@@ -3902,10 +3903,32 @@ class NiceDateRangePickerComponent {
|
|
|
3902
3903
|
to: this.max
|
|
3903
3904
|
};
|
|
3904
3905
|
this.formGroup.patchValue(this.value);
|
|
3905
|
-
this.formGroup.valueChanges.
|
|
3906
|
+
this.formGroup.valueChanges.pipe(startWith(this.value), pairwise(), filter(([before, after]) => {
|
|
3907
|
+
/**
|
|
3908
|
+
* We filter out the value changes to only emit when the selection is completed/
|
|
3909
|
+
*/
|
|
3910
|
+
if (!after.from && !after.to) {
|
|
3911
|
+
return true;
|
|
3912
|
+
}
|
|
3913
|
+
// This is the middle of the selection
|
|
3914
|
+
if (after.from && !after.to) {
|
|
3915
|
+
return false;
|
|
3916
|
+
}
|
|
3917
|
+
// This means that the selection is done
|
|
3918
|
+
if (!before.to && after.to) {
|
|
3919
|
+
return true;
|
|
3920
|
+
}
|
|
3921
|
+
// This is an edge case when we select a new range with an active range selected.
|
|
3922
|
+
// The after.to will be at null after the after.from is emitted
|
|
3923
|
+
if (!isSameDay(before.from, after.from) && isSameDay(before.to, after.to)) {
|
|
3924
|
+
return false;
|
|
3925
|
+
}
|
|
3926
|
+
// Skip if noting has changed
|
|
3927
|
+
return !(isSameDay(before.from, after.from) && !isSameDay(before.to, after.to));
|
|
3928
|
+
})).subscribe((_) => {
|
|
3906
3929
|
var _a;
|
|
3907
3930
|
this.value = this.formGroup.getRawValue();
|
|
3908
|
-
(_a = this.
|
|
3931
|
+
(_a = this.propagate) === null || _a === void 0 ? void 0 : _a.call(this, this.value);
|
|
3909
3932
|
});
|
|
3910
3933
|
}
|
|
3911
3934
|
writeValue(value) {
|
|
@@ -3913,7 +3936,7 @@ class NiceDateRangePickerComponent {
|
|
|
3913
3936
|
this.formGroup.patchValue(this.value);
|
|
3914
3937
|
}
|
|
3915
3938
|
registerOnChange(fn) {
|
|
3916
|
-
this.
|
|
3939
|
+
this.propagate = fn;
|
|
3917
3940
|
}
|
|
3918
3941
|
registerOnTouched(fn) { }
|
|
3919
3942
|
}
|
|
@@ -3924,7 +3947,7 @@ NiceDateRangePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14
|
|
|
3924
3947
|
useExisting: forwardRef(() => NiceDateRangePickerComponent),
|
|
3925
3948
|
multi: true
|
|
3926
3949
|
}
|
|
3927
|
-
],
|
|
3950
|
+
], 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 });
|
|
3928
3951
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: NiceDateRangePickerComponent, decorators: [{
|
|
3929
3952
|
type: Component,
|
|
3930
3953
|
args: [{ selector: "nice-date-range-picker", encapsulation: ViewEncapsulation.None, providers: [
|
|
@@ -3934,10 +3957,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.3", ngImpor
|
|
|
3934
3957
|
multi: true
|
|
3935
3958
|
}
|
|
3936
3959
|
], 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"] }]
|
|
3937
|
-
}], propDecorators: {
|
|
3938
|
-
type: ViewChild,
|
|
3939
|
-
args: [MatDateRangePicker]
|
|
3940
|
-
}], min: [{
|
|
3960
|
+
}], propDecorators: { min: [{
|
|
3941
3961
|
type: Input
|
|
3942
3962
|
}], max: [{
|
|
3943
3963
|
type: Input
|