ecabs-components 1.1.65 → 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 {
@@ -8932,9 +8942,11 @@ class EcabsChipAutocompleteComponent extends EcabsElementBaseComponent {
     visibleOptions = 8.5;
     autoActiveFirstOption = true;
     noResultsText = 'No results found';
+    loadingText = 'Loading...';
     compareFn = Object.is;
     avatarTemplate;
     truncateAt = 18;
+    suppressNextTermOnRefocus = false;
     set options(value) {
         this._options.set(value);
     }
@@ -8942,14 +8954,16 @@ class EcabsChipAutocompleteComponent extends EcabsElementBaseComponent {
     termChange = new EventEmitter();
     inputControl = new FormControl('');
     normalizedTerm$ = this.inputControl.valueChanges.pipe(startWith(''), map((value) => value ?? ''), distinctUntilChanged());
+    _loading = signal(false);
     _options = signal([]);
     _values = signal([]);
+    _suppressNextTermOnRefocus = signal(false);
     _term = toSignal(this.normalizedTerm$, { initialValue: '' });
     destroyRef = inject(DestroyRef);
     overlayPanelClass = 'ecabs-chip-autocomplete-overlay-panel';
     selectedOptions = computed(() => this.setValidSelectedOptions(this._values(), this._options()));
-    filteredOptions = computed(() => this.setFilteredOptions(this._term(), this._values(), this._options()));
-    noMatchResult = computed(() => !!this._term().trim().length && !this.filteredOptions().length);
+    filteredOptions = computed(() => this._loading() ? [] : this.setFilteredOptions(this._term(), this._values(), this._options()));
+    noMatchResult = computed(() => !this._loading() && !!this._term().trim().length && !this.filteredOptions().length);
     get options() {
         return this._options();
     }
@@ -8959,9 +8973,20 @@ class EcabsChipAutocompleteComponent extends EcabsElementBaseComponent {
         this.normalizedTerm$
             .pipe(takeUntilDestroyed(this.destroyRef))
             .subscribe((value) => {
+            if (this.suppressNextTermOnRefocus && this._suppressNextTermOnRefocus() && value === '') {
+                this._suppressNextTermOnRefocus.set(false);
+                return;
+            }
             this.termChange.emit(value);
+            this._suppressNextTermOnRefocus.set(false);
         });
     }
+    ngOnChanges(changes) {
+        const { loading } = changes ?? {};
+        if (loading) {
+            this._loading.set(this.loading);
+        }
+    }
     setOverlayHeight() {
         const panel = this.document.querySelector(`.${this.overlayPanelClass}`);
         if (!panel) {
@@ -9015,14 +9040,19 @@ class EcabsChipAutocompleteComponent extends EcabsElementBaseComponent {
     blur() {
         this.onTouched();
     }
-    onChange = () => { };
-    onTouched = () => { };
+    onChange = () => {
+    };
+    onTouched = () => {
+    };
     updateValues(values) {
         this._values.set(values);
         this.onChange(values);
         this.selectionChange.emit(values);
     }
     clearAndRefocusInput() {
+        if (this.suppressNextTermOnRefocus) {
+            this._suppressNextTermOnRefocus.set(true);
+        }
         this.inputControl.setValue('');
         this.inputRef?.nativeElement?.focus();
     }
@@ -9047,13 +9077,13 @@ class EcabsChipAutocompleteComponent extends EcabsElementBaseComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsChipAutocompleteComponent, deps: [{ token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EcabsChipAutocompleteComponent, isStandalone: true, selector: "ecabs-chip-autocomplete", inputs: { visibleOptions: "visibleOptions", autoActiveFirstOption: "autoActiveFirstOption", noResultsText: "noResultsText", compareFn: "compareFn", avatarTemplate: "avatarTemplate", truncateAt: "truncateAt", options: "options" }, outputs: { selectionChange: "selectionChange", termChange: "termChange" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EcabsChipAutocompleteComponent, isStandalone: true, selector: "ecabs-chip-autocomplete", inputs: { visibleOptions: "visibleOptions", autoActiveFirstOption: "autoActiveFirstOption", noResultsText: "noResultsText", loadingText: "loadingText", compareFn: "compareFn", avatarTemplate: "avatarTemplate", truncateAt: "truncateAt", suppressNextTermOnRefocus: "suppressNextTermOnRefocus", options: "options" }, outputs: { selectionChange: "selectionChange", termChange: "termChange" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => EcabsChipAutocompleteComponent),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputElem"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ecabs-element-wrapper [data]=\"getData()\">\r\n  <div class=\"form-field__input--wrapper\">\r\n    <input matInput\r\n           [id]=\"label\"\r\n           [name]=\"label\"\r\n           class=\"form-field__input\"\r\n           [ngClass]=\"disabled ? 'form-field__input--disabled' : null\"\r\n           #inputElem\r\n           [matChipInputFor]=\"chipGrid\"\r\n           [matAutocomplete]=\"auto\"\r\n           [formControl]=\"inputControl\"\r\n           [disabled]=\"disabled\"\r\n           [placeholder]=\"placeholder\"\r\n           (blur)=\"blur()\"/>\r\n  </div>\r\n</ecabs-element-wrapper>\r\n\r\n<mat-autocomplete #auto=\"matAutocomplete\"\r\n                  [autoActiveFirstOption]=\"autoActiveFirstOption\"\r\n                  (optionSelected)=\"setSelection($event)\"\r\n                  (opened)=\"setOverlayHeight()\"\r\n                  [class]=\"overlayPanelClass\">\r\n  <mat-option *ngFor=\"let option of filteredOptions(); trackBy: trackByFn\"\r\n              [value]=\"option\"\r\n              [disabled]=\"option.disabled ?? false\">\r\n    <ng-container [ngTemplateOutlet]=\"avatarContext\"\r\n                  [ngTemplateOutletContext]=\"{ $implicit: option}\">\r\n    </ng-container>\r\n    {{ option.label }}\r\n  </mat-option>\r\n\r\n  <mat-option disabled *ngIf=\"noMatchResult()\">\r\n    {{ noResultsText }}\r\n  </mat-option>\r\n</mat-autocomplete>\r\n\r\n<mat-chip-grid #chipGrid\r\n               [disabled]=\"disabled\"\r\n               [class.mt-4]=\"selectedOptions().length > 0\">\r\n  <mat-chip-row *ngFor=\"let option of selectedOptions(); trackBy: trackByFn\"\r\n                [disabled]=\"disabled || option.disabled\"\r\n                (removed)=\"removeSelection(option)\">\r\n    <ng-container [ngTemplateOutlet]=\"avatarContext\"\r\n                  [ngTemplateOutletContext]=\"{ $implicit: option}\">\r\n    </ng-container>\r\n\r\n    <ng-container *ngIf=\"option?.label as label\">\r\n      <span [matTooltip]=\"label\"\r\n            [matTooltipDisabled]=\"label.length <= truncateAt\">\r\n        {{ label | truncate: truncateAt }}\r\n      </span>\r\n    </ng-container>\r\n    <mat-icon matChipRemove\r\n              svgIcon=\"ph-light:x\">\r\n    </mat-icon>\r\n  </mat-chip-row>\r\n</mat-chip-grid>\r\n\r\n<ng-template #avatarContext let-option>\r\n  <ng-container *ngIf=\"avatarTemplate\">\r\n    <ng-container [ngTemplateOutlet]=\"avatarTemplate\"\r\n                  [ngTemplateOutletContext]=\"{ $implicit: option}\">\r\n    </ng-container>\r\n  </ng-container>\r\n</ng-template>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: EcabsInputModule }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i2$3.MatChipGrid, selector: "mat-chip-grid", inputs: ["tabIndex", "disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i2$3.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i2$3.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i2$3.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["color", "disabled", "disableRipple", "tabIndex", "editable"], outputs: ["edited"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i4$6.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple", "hideSingleSelectionIndicator"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i4$2.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i4$6.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { 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.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i6$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "ngmodule", type: ElementWrapperModule }, { kind: "component", type: EcabsElementWrapperComponent, selector: "ecabs-element-wrapper", inputs: ["data", "showCloseIcon", "focusedFlag", "showPassword", "control"], outputs: ["showHidePassword", "clear", "increase", "decrease"] }, { kind: "ngmodule", type: NgxPhosphorIconsLightFileModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i1$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "ngmodule", type: EcabsPipesModule }, { kind: "pipe", type: EcabsTruncatePipe, name: "truncate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputElem"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ecabs-element-wrapper [data]=\"getData()\">\r\n  <div class=\"form-field__input--wrapper\">\r\n    <input matInput\r\n           [id]=\"label\"\r\n           [name]=\"label\"\r\n           class=\"form-field__input\"\r\n           [ngClass]=\"disabled ? 'form-field__input--disabled' : null\"\r\n           #inputElem\r\n           [matChipInputFor]=\"chipGrid\"\r\n           [matAutocomplete]=\"auto\"\r\n           [formControl]=\"inputControl\"\r\n           [disabled]=\"disabled\"\r\n           [placeholder]=\"placeholder\"\r\n           (blur)=\"blur()\"/>\r\n  </div>\r\n</ecabs-element-wrapper>\r\n\r\n<mat-autocomplete #auto=\"matAutocomplete\"\r\n                  [autoActiveFirstOption]=\"autoActiveFirstOption\"\r\n                  (optionSelected)=\"setSelection($event)\"\r\n                  (opened)=\"setOverlayHeight()\"\r\n                  [class]=\"overlayPanelClass\">\r\n  <mat-option *ngFor=\"let option of filteredOptions(); trackBy: trackByFn\"\r\n              [value]=\"option\"\r\n              [disabled]=\"option.disabled ?? false\">\r\n    <ng-container [ngTemplateOutlet]=\"avatarContext\"\r\n                  [ngTemplateOutletContext]=\"{ $implicit: option}\">\r\n    </ng-container>\r\n    {{ option.label }}\r\n  </mat-option>\r\n\r\n  <mat-option *ngIf=\"loading\" disabled>\r\n    <div class=\"flex items-center\">\r\n      <div class=\"mr-2\">{{ loadingText }}</div>\r\n      <ecabs-loading-spinner size=\"tiny\"></ecabs-loading-spinner>\r\n    </div>\r\n  </mat-option>\r\n\r\n  <mat-option disabled *ngIf=\"noMatchResult()\">\r\n    {{ noResultsText }}\r\n  </mat-option>\r\n</mat-autocomplete>\r\n\r\n<mat-chip-grid #chipGrid\r\n               [disabled]=\"disabled\"\r\n               [class.mt-4]=\"selectedOptions().length > 0\">\r\n  <mat-chip-row *ngFor=\"let option of selectedOptions(); trackBy: trackByFn\"\r\n                [disabled]=\"disabled || option.disabled\"\r\n                (removed)=\"removeSelection(option)\">\r\n    <ng-container [ngTemplateOutlet]=\"avatarContext\"\r\n                  [ngTemplateOutletContext]=\"{ $implicit: option}\">\r\n    </ng-container>\r\n\r\n    <ng-container *ngIf=\"option?.label as label\">\r\n      <span [matTooltip]=\"label\"\r\n            [matTooltipDisabled]=\"label.length <= truncateAt\">\r\n        {{ label | truncate: truncateAt }}\r\n      </span>\r\n    </ng-container>\r\n    <mat-icon matChipRemove\r\n              svgIcon=\"ph-light:x\">\r\n    </mat-icon>\r\n  </mat-chip-row>\r\n</mat-chip-grid>\r\n\r\n<ng-template #avatarContext let-option>\r\n  <ng-container *ngIf=\"avatarTemplate\">\r\n    <ng-container [ngTemplateOutlet]=\"avatarTemplate\"\r\n                  [ngTemplateOutletContext]=\"{ $implicit: option}\">\r\n    </ng-container>\r\n  </ng-container>\r\n</ng-template>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: EcabsInputModule }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i2$3.MatChipGrid, selector: "mat-chip-grid", inputs: ["tabIndex", "disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i2$3.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i2$3.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i2$3.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["color", "disabled", "disableRipple", "tabIndex", "editable"], outputs: ["edited"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i4$6.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple", "hideSingleSelectionIndicator"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i4$2.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i4$6.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { 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.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i6$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "ngmodule", type: ElementWrapperModule }, { kind: "component", type: EcabsElementWrapperComponent, selector: "ecabs-element-wrapper", inputs: ["data", "showCloseIcon", "focusedFlag", "showPassword", "control"], outputs: ["showHidePassword", "clear", "increase", "decrease"] }, { kind: "ngmodule", type: NgxPhosphorIconsLightFileModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i1$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "ngmodule", type: EcabsPipesModule }, { kind: "pipe", type: EcabsTruncatePipe, name: "truncate" }, { kind: "ngmodule", type: EcabsLoadingModule }, { kind: "component", type: EcabsSpinnerComponent, selector: "ecabs-loading-spinner", inputs: ["size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsChipAutocompleteComponent, decorators: [{
             type: Component,
@@ -9069,13 +9099,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         NgxPhosphorIconsLightFileModule,
                         MatTooltipModule,
                         EcabsPipesModule,
+                        EcabsLoadingModule,
                     ], providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => EcabsChipAutocompleteComponent),
                             multi: true,
                         },
-                    ], template: "<ecabs-element-wrapper [data]=\"getData()\">\r\n  <div class=\"form-field__input--wrapper\">\r\n    <input matInput\r\n           [id]=\"label\"\r\n           [name]=\"label\"\r\n           class=\"form-field__input\"\r\n           [ngClass]=\"disabled ? 'form-field__input--disabled' : null\"\r\n           #inputElem\r\n           [matChipInputFor]=\"chipGrid\"\r\n           [matAutocomplete]=\"auto\"\r\n           [formControl]=\"inputControl\"\r\n           [disabled]=\"disabled\"\r\n           [placeholder]=\"placeholder\"\r\n           (blur)=\"blur()\"/>\r\n  </div>\r\n</ecabs-element-wrapper>\r\n\r\n<mat-autocomplete #auto=\"matAutocomplete\"\r\n                  [autoActiveFirstOption]=\"autoActiveFirstOption\"\r\n                  (optionSelected)=\"setSelection($event)\"\r\n                  (opened)=\"setOverlayHeight()\"\r\n                  [class]=\"overlayPanelClass\">\r\n  <mat-option *ngFor=\"let option of filteredOptions(); trackBy: trackByFn\"\r\n              [value]=\"option\"\r\n              [disabled]=\"option.disabled ?? false\">\r\n    <ng-container [ngTemplateOutlet]=\"avatarContext\"\r\n                  [ngTemplateOutletContext]=\"{ $implicit: option}\">\r\n    </ng-container>\r\n    {{ option.label }}\r\n  </mat-option>\r\n\r\n  <mat-option disabled *ngIf=\"noMatchResult()\">\r\n    {{ noResultsText }}\r\n  </mat-option>\r\n</mat-autocomplete>\r\n\r\n<mat-chip-grid #chipGrid\r\n               [disabled]=\"disabled\"\r\n               [class.mt-4]=\"selectedOptions().length > 0\">\r\n  <mat-chip-row *ngFor=\"let option of selectedOptions(); trackBy: trackByFn\"\r\n                [disabled]=\"disabled || option.disabled\"\r\n                (removed)=\"removeSelection(option)\">\r\n    <ng-container [ngTemplateOutlet]=\"avatarContext\"\r\n                  [ngTemplateOutletContext]=\"{ $implicit: option}\">\r\n    </ng-container>\r\n\r\n    <ng-container *ngIf=\"option?.label as label\">\r\n      <span [matTooltip]=\"label\"\r\n            [matTooltipDisabled]=\"label.length <= truncateAt\">\r\n        {{ label | truncate: truncateAt }}\r\n      </span>\r\n    </ng-container>\r\n    <mat-icon matChipRemove\r\n              svgIcon=\"ph-light:x\">\r\n    </mat-icon>\r\n  </mat-chip-row>\r\n</mat-chip-grid>\r\n\r\n<ng-template #avatarContext let-option>\r\n  <ng-container *ngIf=\"avatarTemplate\">\r\n    <ng-container [ngTemplateOutlet]=\"avatarTemplate\"\r\n                  [ngTemplateOutletContext]=\"{ $implicit: option}\">\r\n    </ng-container>\r\n  </ng-container>\r\n</ng-template>\r\n" }]
+                    ], template: "<ecabs-element-wrapper [data]=\"getData()\">\r\n  <div class=\"form-field__input--wrapper\">\r\n    <input matInput\r\n           [id]=\"label\"\r\n           [name]=\"label\"\r\n           class=\"form-field__input\"\r\n           [ngClass]=\"disabled ? 'form-field__input--disabled' : null\"\r\n           #inputElem\r\n           [matChipInputFor]=\"chipGrid\"\r\n           [matAutocomplete]=\"auto\"\r\n           [formControl]=\"inputControl\"\r\n           [disabled]=\"disabled\"\r\n           [placeholder]=\"placeholder\"\r\n           (blur)=\"blur()\"/>\r\n  </div>\r\n</ecabs-element-wrapper>\r\n\r\n<mat-autocomplete #auto=\"matAutocomplete\"\r\n                  [autoActiveFirstOption]=\"autoActiveFirstOption\"\r\n                  (optionSelected)=\"setSelection($event)\"\r\n                  (opened)=\"setOverlayHeight()\"\r\n                  [class]=\"overlayPanelClass\">\r\n  <mat-option *ngFor=\"let option of filteredOptions(); trackBy: trackByFn\"\r\n              [value]=\"option\"\r\n              [disabled]=\"option.disabled ?? false\">\r\n    <ng-container [ngTemplateOutlet]=\"avatarContext\"\r\n                  [ngTemplateOutletContext]=\"{ $implicit: option}\">\r\n    </ng-container>\r\n    {{ option.label }}\r\n  </mat-option>\r\n\r\n  <mat-option *ngIf=\"loading\" disabled>\r\n    <div class=\"flex items-center\">\r\n      <div class=\"mr-2\">{{ loadingText }}</div>\r\n      <ecabs-loading-spinner size=\"tiny\"></ecabs-loading-spinner>\r\n    </div>\r\n  </mat-option>\r\n\r\n  <mat-option disabled *ngIf=\"noMatchResult()\">\r\n    {{ noResultsText }}\r\n  </mat-option>\r\n</mat-autocomplete>\r\n\r\n<mat-chip-grid #chipGrid\r\n               [disabled]=\"disabled\"\r\n               [class.mt-4]=\"selectedOptions().length > 0\">\r\n  <mat-chip-row *ngFor=\"let option of selectedOptions(); trackBy: trackByFn\"\r\n                [disabled]=\"disabled || option.disabled\"\r\n                (removed)=\"removeSelection(option)\">\r\n    <ng-container [ngTemplateOutlet]=\"avatarContext\"\r\n                  [ngTemplateOutletContext]=\"{ $implicit: option}\">\r\n    </ng-container>\r\n\r\n    <ng-container *ngIf=\"option?.label as label\">\r\n      <span [matTooltip]=\"label\"\r\n            [matTooltipDisabled]=\"label.length <= truncateAt\">\r\n        {{ label | truncate: truncateAt }}\r\n      </span>\r\n    </ng-container>\r\n    <mat-icon matChipRemove\r\n              svgIcon=\"ph-light:x\">\r\n    </mat-icon>\r\n  </mat-chip-row>\r\n</mat-chip-grid>\r\n\r\n<ng-template #avatarContext let-option>\r\n  <ng-container *ngIf=\"avatarTemplate\">\r\n    <ng-container [ngTemplateOutlet]=\"avatarTemplate\"\r\n                  [ngTemplateOutletContext]=\"{ $implicit: option}\">\r\n    </ng-container>\r\n  </ng-container>\r\n</ng-template>\r\n" }]
         }], ctorParameters: function () { return [{ type: Document, decorators: [{
                     type: Inject,
                     args: [DOCUMENT]
@@ -9088,12 +9119,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], noResultsText: [{
                 type: Input
+            }], loadingText: [{
+                type: Input
             }], compareFn: [{
                 type: Input
             }], avatarTemplate: [{
                 type: Input
             }], truncateAt: [{
                 type: Input
+            }], suppressNextTermOnRefocus: [{
+                type: Input
             }], options: [{
                 type: Input,
                 args: [{ required: true }]
@@ -9122,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;
@@ -9135,6 +9170,7 @@ class EcabsDateRangePickerComponentV2 extends EcabsElementBaseComponent {
     excludeWeekends;
     specificDates;
     holidayOptions;
+    dateToOptional = false;
     onblur = new EventEmitter();
     val;
     pickerTo;
@@ -9169,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;
@@ -9206,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());
@@ -9217,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) {
@@ -9286,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: [{
@@ -9327,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
@@ -9353,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: [{