ecabs-components 1.1.66 → 1.1.67

package/fesm2022/ecabs-components.mjs

@@ -8688,6 +8688,7 @@ class EcabsTimeRangeInputV2Component extends EcabsElementBaseComponent {
     separatorLabel = 'to';
     startTimePlaceholder;
     endTimePlaceholder;
+    allowCrossMidnight = false;
     val;
     _timeFrom;
     _timeTo;
@@ -8736,6 +8737,9 @@ class EcabsTimeRangeInputV2Component extends EcabsElementBaseComponent {
             this.control.valueChanges
                 .pipe(takeUntilDestroyed(this.destroyRef))
                 .subscribe(() => this.timeRangeValidator(this.control));
+            setTimeout(() => {
+                this.timeRangeValidator(this.control);
+            });
         }
     }
     onChange = () => { };
@@ -8763,31 +8767,35 @@ class EcabsTimeRangeInputV2Component extends EcabsElementBaseComponent {
     }
     timeRangeValidator(control) {
         const required = control.hasValidator(Validators.required);
-        if (control.value) {
-            const { timeFrom, timeTo } = control.value;
-            control.setErrors(null);
-            if (required &&
-                (!timeFrom || timeFrom?.length === 0) &&
-                (!timeTo || timeTo?.length === 0)) {
-                control.setErrors({ required: true });
-                return;
-            }
-            if (!timeFrom && timeTo) {
-                control.setErrors({ timeFromRangeRequired: true });
-                return;
-            }
-            if (timeFrom && !timeTo) {
-                control.setErrors({ timeToRangeRequired: true });
-                return;
-            }
-            if (timeFrom > timeTo) {
-                control.setErrors({ timeFromMoreThanTimeTo: true });
-                return;
-            }
+        if (!control.value && !required) {
+            return;
+        }
+        if (!control.value) {
+            control.setErrors({ required: true });
+            return;
+        }
+        const { timeFrom, timeTo } = control.value;
+        control.setErrors(null);
+        if (required &&
+            (!timeFrom || timeFrom?.length === 0) &&
+            (!timeTo || timeTo?.length === 0)) {
+            control.setErrors({ required: true });
+        }
+        else if (!timeFrom && timeTo) {
+            control.setErrors({ rangeFrom: true });
+        }
+        else if (timeFrom && !timeTo) {
+            control.setErrors({ rangeTo: true });
+        }
+        else if (timeFrom &&
+            timeTo &&
+            timeFrom > timeTo &&
+            !this.allowCrossMidnight) {
+            control.setErrors({ rangeOrder: true });
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsTimeRangeInputV2Component, deps: [{ token: i0.Injector }, { token: i0.DestroyRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EcabsTimeRangeInputV2Component, selector: "ecabs-time-range-input-v2", inputs: { showCloseIcon: "showCloseIcon", listPlacement: "listPlacement", appendTo: "appendTo", min: "min", max: "max", showDayStart: "showDayStart", showDayEnd: "showDayEnd", addSecond: "addSecond", dayStartLabel: "dayStartLabel", dayEndLabel: "dayEndLabel", separatorLabel: "separatorLabel", startTimePlaceholder: "startTimePlaceholder", endTimePlaceholder: "endTimePlaceholder" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EcabsTimeRangeInputV2Component, selector: "ecabs-time-range-input-v2", inputs: { showCloseIcon: "showCloseIcon", listPlacement: "listPlacement", appendTo: "appendTo", min: "min", max: "max", showDayStart: "showDayStart", showDayEnd: "showDayEnd", addSecond: "addSecond", dayStartLabel: "dayStartLabel", dayEndLabel: "dayEndLabel", separatorLabel: "separatorLabel", startTimePlaceholder: "startTimePlaceholder", endTimePlaceholder: "endTimePlaceholder", allowCrossMidnight: "allowCrossMidnight" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => EcabsTimeRangeInputV2Component),
@@ -8830,6 +8838,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], endTimePlaceholder: [{
                 type: Input
+            }], allowCrossMidnight: [{
+                type: Input
             }] } });
 
 class EcabsTimeRangeInputV2Module {
@@ -9147,7 +9157,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 class EcabsDateRangePickerComponentV2 extends EcabsElementBaseComponent {
     injector;
     ecabsDatePickerHeaderService;
-    unsubscribeService;
+    destroyRef;
     minDate;
     maxDate;
     touchUi = false;
@@ -9160,6 +9170,7 @@ class EcabsDateRangePickerComponentV2 extends EcabsElementBaseComponent {
     excludeWeekends;
     specificDates;
     holidayOptions;
+    dateToOptional = false;
     onblur = new EventEmitter();
     val;
     pickerTo;
@@ -9194,28 +9205,42 @@ class EcabsDateRangePickerComponentV2 extends EcabsElementBaseComponent {
     }
     //eslint-disable-next-line
     set dateFrom(val) {
-        if (this._dateFrom !== val && isValid(new Date(val))) {
+        if (this._dateFrom === val) {
+            return;
+        }
+        if (val && isValid(new Date(val))) {
             this._dateFrom = val;
             this.minDateTo = new Date(val);
-            if (!this.dateTo) {
+            if (!this.dateTo && !this.dateToOptional) {
                 this.pickerTo?.open();
             }
-            this.onApply();
         }
+        else if (!val) {
+            this._dateFrom = val;
+            this.minDateTo = this.minDate;
+        }
+        this.onApply();
     }
     //eslint-disable-next-line
     set dateTo(val) {
-        if (this._dateTo !== val && isValid(new Date(val))) {
+        if (this._dateTo === val) {
+            return;
+        }
+        if (val && isValid(new Date(val))) {
             this._dateTo = val;
             this.maxDateFrom = new Date(val);
-            this.onApply();
         }
+        else if (!val) {
+            this._dateTo = val;
+            this.maxDateFrom = this.maxDate;
+        }
+        this.onApply();
     }
-    constructor(injector, ecabsDatePickerHeaderService, unsubscribeService) {
+    constructor(injector, ecabsDatePickerHeaderService, destroyRef) {
         super();
         this.injector = injector;
         this.ecabsDatePickerHeaderService = ecabsDatePickerHeaderService;
-        this.unsubscribeService = unsubscribeService;
+        this.destroyRef = destroyRef;
     }
     ngOnChanges(changes) {
         const { minDate, maxDate } = changes;
@@ -9231,7 +9256,7 @@ class EcabsDateRangePickerComponentV2 extends EcabsElementBaseComponent {
     ngOnInit() {
         this.ecabsDatePickerHeaderService
             .getConfig()
-            .pipe(takeUntil(this.unsubscribeService.subscription()))
+            .pipe(takeUntilDestroyed(this.destroyRef))
             .subscribe((config) => (this.translationConfig = config));
         if (this.holidayOptions?.countryCode) {
             this.holidayInstance = new Holidays(this.holidayOptions.countryCode.toUpperCase());
@@ -9242,17 +9267,15 @@ class EcabsDateRangePickerComponentV2 extends EcabsElementBaseComponent {
         if (ngControl) {
             this.control = ngControl.control;
             this.control.valueChanges
-                .pipe(takeUntil(this.unsubscribeService.subscription()))
+                .pipe(takeUntilDestroyed(this.destroyRef))
                 .subscribe(() => this.dateRangeValidator(this.control));
             setTimeout(() => {
                 this.dateFrom = this.value.dateFrom;
                 this.dateTo = this.value.dateTo;
+                this.dateRangeValidator(this.control);
             });
         }
     }
-    ngOnDestroy() {
-        this.unsubscribeService.destroy();
-    }
     onChange = () => { };
     onTouch = () => { };
     writeValue(value) {
@@ -9311,37 +9334,36 @@ class EcabsDateRangePickerComponentV2 extends EcabsElementBaseComponent {
     }
     dateRangeValidator(control) {
         const required = control?.hasValidator(Validators.required);
-        if (control.value) {
-            const { dateFrom, dateTo } = control.value;
-            control.setErrors(null);
-            if (required &&
-                (!dateFrom || dateFrom?.length === 0) &&
-                (!dateTo || dateTo?.length === 0)) {
+        if (!control.value) {
+            if (required) {
                 control.setErrors({ required: true });
-                return;
-            }
-            if (!dateFrom && dateTo) {
-                control.setErrors({ dateFromRangeRequired: true });
-                return;
-            }
-            if (dateFrom && !dateTo) {
-                control.setErrors({ dateToRangeRequired: true });
-                return;
-            }
-            if (new Date(dateFrom) > new Date(dateTo)) {
-                control.setErrors({ dateFromMoreThanDateTo: true });
-                return;
             }
+            return;
+        }
+        const { dateFrom, dateTo } = control.value;
+        control.setErrors(null);
+        if (required &&
+            (!dateFrom || dateFrom?.length === 0) &&
+            (!dateTo || dateTo?.length === 0)) {
+            control.setErrors({ required: true });
+        }
+        else if (!dateFrom && dateTo) {
+            control.setErrors({ rangeFrom: true });
+        }
+        else if (dateFrom && !dateTo && !this.dateToOptional) {
+            control.setErrors({ rangeTo: true });
+        }
+        else if (dateFrom && dateTo && new Date(dateFrom) > new Date(dateTo)) {
+            control.setErrors({ rangeOrder: true });
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsDateRangePickerComponentV2, deps: [{ token: i0.Injector }, { token: EcabsDatePickerHeaderService }, { token: UnsubscribeService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EcabsDateRangePickerComponentV2, selector: "ecabs-date-range-picker-v2", inputs: { minDate: "minDate", maxDate: "maxDate", touchUi: "touchUi", cancelLabel: "cancelLabel", applyLabel: "applyLabel", startDatePlaceholder: "startDatePlaceholder", endDatePlaceholder: "endDatePlaceholder", separatorLabel: "separatorLabel", excludeHolidays: "excludeHolidays", excludeWeekends: "excludeWeekends", specificDates: "specificDates", holidayOptions: "holidayOptions" }, outputs: { onblur: "onblur" }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsDateRangePickerComponentV2, deps: [{ token: i0.Injector }, { token: EcabsDatePickerHeaderService }, { token: i0.DestroyRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EcabsDateRangePickerComponentV2, selector: "ecabs-date-range-picker-v2", inputs: { minDate: "minDate", maxDate: "maxDate", touchUi: "touchUi", cancelLabel: "cancelLabel", applyLabel: "applyLabel", startDatePlaceholder: "startDatePlaceholder", endDatePlaceholder: "endDatePlaceholder", separatorLabel: "separatorLabel", excludeHolidays: "excludeHolidays", excludeWeekends: "excludeWeekends", specificDates: "specificDates", holidayOptions: "holidayOptions", dateToOptional: "dateToOptional" }, outputs: { onblur: "onblur" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: EcabsDateRangePickerComponentV2,
                 multi: true,
             },
-            UnsubscribeService,
         ], viewQueries: [{ propertyName: "pickerTo", first: true, predicate: ["pickerTo"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ecabs-element-wrapper [data]=\"getData()\">\r\n  <div class=\"form-field__range--wrapper\">\r\n    <div class=\"form-field__range\">\r\n      <input\r\n        class=\"border-none w-full\"\r\n        id=\"{{ name + 'dateFrom' }}\"\r\n        [(ngModel)]=\"dateFrom\"\r\n        [placeholder]=\"startDatePlaceholder ?? translationConfig?.startDatePlaceholder\"\r\n        [disabled]=\"disabled\"\r\n        [matDatepicker]=\"pickerFrom\"\r\n        [min]=\"minDateFrom\"\r\n        [max]=\"maxDateFrom\"\r\n        [matDatepickerFilter]=\"filterDateRange\"\r\n        ecabsMaskDate\r\n        (blur)=\"onTouch()\"\r\n        (click)=\"pickerFrom.open()\"\r\n      />\r\n      <mat-datepicker #pickerFrom\r\n                      [panelClass]=\"panelClass\"\r\n                      [calendarHeaderComponent]=\"header\"\r\n                      [touchUi]=\"touchUi\">\r\n      </mat-datepicker>\r\n    </div>\r\n\r\n    <span class=\"text-gray-400 px-3 text-sm\">{{ separatorLabel }}</span>\r\n    <div class=\"form-field__range\">\r\n      <input\r\n        class=\"border-none w-full\"\r\n        id=\"{{ name + 'dateTo' }}\"\r\n        [(ngModel)]=\"dateTo\"\r\n        [placeholder]=\"endDatePlaceholder ?? translationConfig?.endDatePlaceholder\"\r\n        [disabled]=\"disabled\"\r\n        [matDatepicker]=\"pickerTo\"\r\n        [min]=\"minDateTo\"\r\n        [max]=\"maxDateTo\"\r\n        [matDatepickerFilter]=\"filterDateRange\"\r\n        ecabsMaskDate\r\n        (blur)=\"onTouch()\"\r\n        (click)=\"pickerTo.open()\"\r\n      />\r\n      <mat-datepicker #pickerTo\r\n                      [panelClass]=\"panelClass\"\r\n                      [calendarHeaderComponent]=\"header\"\r\n                      [touchUi]=\"touchUi\">\r\n      </mat-datepicker>\r\n    </div>\r\n  </div>\r\n</ecabs-element-wrapper>\r\n", styles: [""], dependencies: [{ kind: "component", type: EcabsElementWrapperComponent, selector: "ecabs-element-wrapper", inputs: ["data", "showCloseIcon", "focusedFlag", "showPassword", "control"], outputs: ["showHidePassword", "clear", "increase", "decrease"] }, { kind: "component", type: i6.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i6.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: EcabsMaskDateDirective, selector: "[ecabsMaskDate]", inputs: ["isDateTimeMask", "considerSeconds"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsDateRangePickerComponentV2, decorators: [{
@@ -9352,9 +9374,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                             useExisting: EcabsDateRangePickerComponentV2,
                             multi: true,
                         },
-                        UnsubscribeService,
                     ], template: "<ecabs-element-wrapper [data]=\"getData()\">\r\n  <div class=\"form-field__range--wrapper\">\r\n    <div class=\"form-field__range\">\r\n      <input\r\n        class=\"border-none w-full\"\r\n        id=\"{{ name + 'dateFrom' }}\"\r\n        [(ngModel)]=\"dateFrom\"\r\n        [placeholder]=\"startDatePlaceholder ?? translationConfig?.startDatePlaceholder\"\r\n        [disabled]=\"disabled\"\r\n        [matDatepicker]=\"pickerFrom\"\r\n        [min]=\"minDateFrom\"\r\n        [max]=\"maxDateFrom\"\r\n        [matDatepickerFilter]=\"filterDateRange\"\r\n        ecabsMaskDate\r\n        (blur)=\"onTouch()\"\r\n        (click)=\"pickerFrom.open()\"\r\n      />\r\n      <mat-datepicker #pickerFrom\r\n                      [panelClass]=\"panelClass\"\r\n                      [calendarHeaderComponent]=\"header\"\r\n                      [touchUi]=\"touchUi\">\r\n      </mat-datepicker>\r\n    </div>\r\n\r\n    <span class=\"text-gray-400 px-3 text-sm\">{{ separatorLabel }}</span>\r\n    <div class=\"form-field__range\">\r\n      <input\r\n        class=\"border-none w-full\"\r\n        id=\"{{ name + 'dateTo' }}\"\r\n        [(ngModel)]=\"dateTo\"\r\n        [placeholder]=\"endDatePlaceholder ?? translationConfig?.endDatePlaceholder\"\r\n        [disabled]=\"disabled\"\r\n        [matDatepicker]=\"pickerTo\"\r\n        [min]=\"minDateTo\"\r\n        [max]=\"maxDateTo\"\r\n        [matDatepickerFilter]=\"filterDateRange\"\r\n        ecabsMaskDate\r\n        (blur)=\"onTouch()\"\r\n        (click)=\"pickerTo.open()\"\r\n      />\r\n      <mat-datepicker #pickerTo\r\n                      [panelClass]=\"panelClass\"\r\n                      [calendarHeaderComponent]=\"header\"\r\n                      [touchUi]=\"touchUi\">\r\n      </mat-datepicker>\r\n    </div>\r\n  </div>\r\n</ecabs-element-wrapper>\r\n" }]
-        }], ctorParameters: function () { return [{ type: i0.Injector }, { type: EcabsDatePickerHeaderService }, { type: UnsubscribeService }]; }, propDecorators: { minDate: [{
+        }], ctorParameters: function () { return [{ type: i0.Injector }, { type: EcabsDatePickerHeaderService }, { type: i0.DestroyRef }]; }, propDecorators: { minDate: [{
                 type: Input
             }], maxDate: [{
                 type: Input
@@ -9378,6 +9399,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], holidayOptions: [{
                 type: Input
+            }], dateToOptional: [{
+                type: Input
             }], onblur: [{
                 type: Output
             }], pickerTo: [{