i-tech-shared-components 1.4.63 → 1.4.64-alpha.1771524181070

package/fesm2022/i-tech-shared-components.mjs

@@ -1551,7 +1551,8 @@ class DateRangeDatepickerComponent {
         });
         this.customErrorStateMatcher = {
             isErrorState: (control, form) => {
-                return !!(control && control.invalid && this.submit);
+                const hasInvalidRange = control?.hasError('invalidRange');
+                return !!(control && control.invalid && (this.submit || hasInvalidRange));
             }
         };
     }
@@ -1581,6 +1582,7 @@ class DateRangeDatepickerComponent {
                     startDate: new Date(this.value[0] || ''),
                     endDate: new Date(this.value[1] || '')
                 });
+                this.dateRangeForm.get('endDate')?.setErrors(null);
             }
         }, 10);
     }
@@ -1597,7 +1599,10 @@ class DateRangeDatepickerComponent {
         if (element === this.min?.nativeElement) {
             // We're starting a new selection process
             this.isSelectingRange = true;
-            // Don't emit any event yet
+            // Validate if both dates exist (user changed start after end was set)
+            if (startDate && endDate) {
+                this.validateRange();
+            }
         }
         // If this is the end date being selected (matEndDate input)
         else if (element === this.max?.nativeElement) {
@@ -1609,11 +1614,26 @@ class DateRangeDatepickerComponent {
                 this.selectionChange.emit(value);
             }
             else if (startDate && endDate) {
-                this.selectionChange.emit(value);
+                if (this.validateRange()) {
+                    this.selectionChange.emit(value);
+                }
             }
         }
         element.blur();
     }
+    validateRange() {
+        const start = this.dateRangeForm.get('startDate')?.value;
+        const end = this.dateRangeForm.get('endDate')?.value;
+        const endControl = this.dateRangeForm.get('endDate');
+        if (start instanceof Date && end instanceof Date && start > end) {
+            endControl?.setErrors({ invalidRange: true });
+            return false;
+        }
+        if (endControl?.hasError('invalidRange')) {
+            endControl.setErrors(null);
+        }
+        return true;
+    }
     keyEventHandler(event, value, element) {
         if (event.code === 'Enter') {
             this.setDate(value, element);
@@ -1658,7 +1678,7 @@ class DateRangeDatepickerComponent {
         this.selectionSub?.unsubscribe();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DateRangeDatepickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: DateRangeDatepickerComponent, isStandalone: true, selector: "i-tech-mat-range-datepicker", inputs: { label: "label", placeholder: "placeholder", value: "value", defaultValue: "defaultValue", key: "key", submit: "submit", clearValue: "clearValue", errorMessage: "errorMessage", onePlaceholder: "onePlaceholder", hintText: "hintText", testId: "testId", panelClass: "panelClass", presetActions: "presetActions", activePreset: "activePreset" }, outputs: { resetForm: "resetForm", selectionChange: "selectionChange", presetActionClick: "presetActionClick" }, viewQueries: [{ propertyName: "picker", first: true, predicate: ["picker"], descendants: true }, { propertyName: "min", first: true, predicate: ["min"], descendants: true }, { propertyName: "max", first: true, predicate: ["max"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"flex_column relative mat-date-range-input\"\n     [formGroup]=\"dateRangeForm\"\n>\n  <div class=\"w-100\" *ngIf=\"label\">\n    <mat-label>\n      {{ (label || '') | translate }}\n    </mat-label>\n  </div>\n  <mat-form-field appearance=\"outline\" [ngClass]=\"{'opened_calendar': isOpen}\">\n    <mat-date-range-input [rangePicker]=\"picker\"\n\n    >\n      <input formControlName=\"startDate\"\n             [attr.data-testId]=\"'date-range-' + testId + '-min-date'\"\n             [placeholder]=\" (placeholder ? placeholder[0] : 'Start Date')\"\n             [title]=\"key ? key.title :  'Date'\"\n             [attr.data-accessKey]=\"key ? key.start : 'minStartDate'\"\n             [attr.data-parentKey]=\"key ? (key.start + '_' + key.end) : 'minStartDate_maxEndDate'\"\n             matStartDate #min\n             dateMask\n             [errorStateMatcher]=\"customErrorStateMatcher\"\n             [rangeFormControl]=\"dateRangeForm.controls['startDate']\"\n             (keydown)=\"keyEventHandler($event,[min.value, max.value || null],min)\"\n             (dateChange)=\"setDate([min.value, max.value || null],min)\">\n      <input formControlName=\"endDate\"\n             [placeholder]=\"(placeholder  ? placeholder[1] : 'End Date')\"\n             [title]=\"key ? key.title :  'Date'\"\n             [attr.data-testId]=\"'date-range-' + testId + '-end-date'\"\n             [attr.data-accessKey]=\"key ? key.end : 'maxEndDate'\"\n             [attr.data-parentKey]=\"key ? (key.start + '_' + key.end) : 'minStartDate_maxEndDate'\"\n             matEndDate #max\n             dateMask\n             [errorStateMatcher]=\"customErrorStateMatcher\"\n             [rangeFormControl]=\"dateRangeForm.controls['endDate']\"\n             (keydown)=\"keyEventHandler($event,[min.value, max.value || null],max)\"\n             (dateChange)=\"setDate([min.value, max.value || null],max)\">\n    </mat-date-range-input>\n    <i-tech-icon-button matSuffix\n                        [iconName]=\"'cancel'\"\n                        (buttonClick)=\"setDate([null,null], max)\"\n                        class=\"default-form-icon-color\"\n                        *ngIf=\"dateRangeForm.get('startDate')?.value && this.dateRangeForm.get('endDate')?.value\"\n    ></i-tech-icon-button>\n    <i-tech-icon-button\n      matSuffix\n      [iconName]=\"'date_range'\"\n      (buttonClick)=\"picker.open()\"\n      class=\"default-form-icon-color\"\n    ></i-tech-icon-button>\n    <mat-date-range-picker\n      [panelClass]=\"panelClass\"\n      #picker\n      (closed)=\"onPickerClosed()\"\n      (opened)=\"onPickerOpened()\"\n    >\n      <mat-datepicker-actions *ngIf=\"presetActions?.length\">\n        <div class=\"preset-actions-container\">\n          <i-tech-label *ngFor=\"let action of presetActions\"\n                        class=\"w-100\"\n                        [customChipClass]=\"'w-100'\"\n                        [text]=\"action.translateKey || action.label\"\n                        [color]=\"action.label === activePreset ? LabelTypeEnum.primary : LabelTypeEnum.white\"\n                        [bordered]=\"true\"\n                        [matChipAction]=\"true\"\n                        [disableRipple]=\"false\"\n                        (click)=\"onPresetAction(action)\">\n          </i-tech-label>\n          <button matDateRangePickerApply class=\"hidden-apply-btn\" style=\"display: none\"></button>\n        </div>\n      </mat-datepicker-actions>\n    </mat-date-range-picker>\n    <mat-hint *ngIf=\"hintText && !errorMessage\">{{ hintText }}</mat-hint>\n  </mat-form-field>\n</div>\n", styles: [".preset-actions-container{display:flex;flex-direction:column;gap:8px;padding:0 0 24px;width:100%}::ng-deep .mdc-text-field--outlined{padding-left:8px!important}::ng-deep .mat-date-range-input-separator{margin:0!important}::ng-deep .mat-mdc-form-field-icon-suffix{padding-left:0!important}\n"], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i4.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { 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.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i3$1.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i3$1.MatStartDate, selector: "input[matStartDate]", outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i3$1.MatEndDate, selector: "input[matEndDate]", outputs: ["dateChange", "dateInput"] }, { kind: "component", type: i3$1.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }, { kind: "component", type: i3$1.MatDatepickerActions, selector: "mat-datepicker-actions, mat-date-range-picker-actions" }, { kind: "directive", type: i3$1.MatDatepickerApply, selector: "[matDatepickerApply], [matDateRangePickerApply]" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "component", type: IconButtonComponent, selector: "i-tech-icon-button", inputs: ["size", "type", "borderColor", "iconSvg", "iconName", "tooltip", "disabled", "testId", "fillColor"], outputs: ["buttonClick"] }, { kind: "directive", type: DateMaskDirective, selector: "[dateMask]", inputs: ["maskType", "matDatepicker", "rangeFormControl"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: LabelComponent, selector: "i-tech-label", inputs: ["color", "text", "innerHtml", "bordered", "tooltip", "size", "iconName", "iconSvg", "disableRipple", "matChipAction", "forTable", "iconConfig", "customChipClass", "customBgColor", "customTextColor"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: DateRangeDatepickerComponent, isStandalone: true, selector: "i-tech-mat-range-datepicker", inputs: { label: "label", placeholder: "placeholder", value: "value", defaultValue: "defaultValue", key: "key", submit: "submit", clearValue: "clearValue", errorMessage: "errorMessage", onePlaceholder: "onePlaceholder", hintText: "hintText", testId: "testId", panelClass: "panelClass", presetActions: "presetActions", activePreset: "activePreset" }, outputs: { resetForm: "resetForm", selectionChange: "selectionChange", presetActionClick: "presetActionClick" }, viewQueries: [{ propertyName: "picker", first: true, predicate: ["picker"], descendants: true }, { propertyName: "min", first: true, predicate: ["min"], descendants: true }, { propertyName: "max", first: true, predicate: ["max"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"flex_column relative mat-date-range-input\"\n     [formGroup]=\"dateRangeForm\"\n>\n  <div class=\"w-100\" *ngIf=\"label\">\n    <mat-label>\n      {{ (label || '') | translate }}\n    </mat-label>\n  </div>\n  <mat-form-field appearance=\"outline\" [ngClass]=\"{'opened_calendar': isOpen}\">\n    <mat-date-range-input [rangePicker]=\"picker\"\n\n    >\n      <input formControlName=\"startDate\"\n             [attr.data-testId]=\"'date-range-' + testId + '-min-date'\"\n             [placeholder]=\" (placeholder ? placeholder[0] : 'Start Date')\"\n             [title]=\"key ? key.title :  'Date'\"\n             [attr.data-accessKey]=\"key ? key.start : 'minStartDate'\"\n             [attr.data-parentKey]=\"key ? (key.start + '_' + key.end) : 'minStartDate_maxEndDate'\"\n             matStartDate #min\n             dateMask\n             [errorStateMatcher]=\"customErrorStateMatcher\"\n             [rangeFormControl]=\"dateRangeForm.controls['startDate']\"\n             (keydown)=\"keyEventHandler($event,[min.value, max.value || null],min)\"\n             (dateChange)=\"setDate([min.value, max.value || null],min)\">\n      <input formControlName=\"endDate\"\n             [placeholder]=\"(placeholder  ? placeholder[1] : 'End Date')\"\n             [title]=\"key ? key.title :  'Date'\"\n             [attr.data-testId]=\"'date-range-' + testId + '-end-date'\"\n             [attr.data-accessKey]=\"key ? key.end : 'maxEndDate'\"\n             [attr.data-parentKey]=\"key ? (key.start + '_' + key.end) : 'minStartDate_maxEndDate'\"\n             matEndDate #max\n             dateMask\n             [errorStateMatcher]=\"customErrorStateMatcher\"\n             [rangeFormControl]=\"dateRangeForm.controls['endDate']\"\n             (keydown)=\"keyEventHandler($event,[min.value, max.value || null],max)\"\n             (dateChange)=\"setDate([min.value, max.value || null],max)\">\n    </mat-date-range-input>\n    <i-tech-icon-button matSuffix\n                        [iconName]=\"'cancel'\"\n                        (buttonClick)=\"setDate([null,null], max)\"\n                        class=\"default-form-icon-color\"\n                        *ngIf=\"dateRangeForm.get('startDate')?.value && this.dateRangeForm.get('endDate')?.value\"\n    ></i-tech-icon-button>\n    <i-tech-icon-button\n      matSuffix\n      [iconName]=\"'date_range'\"\n      (buttonClick)=\"picker.open()\"\n      class=\"default-form-icon-color\"\n    ></i-tech-icon-button>\n    <mat-date-range-picker\n      [panelClass]=\"panelClass\"\n      #picker\n      (closed)=\"onPickerClosed()\"\n      (opened)=\"onPickerOpened()\"\n    >\n      <mat-datepicker-actions *ngIf=\"presetActions?.length\">\n        <div class=\"preset-actions-container\">\n          <i-tech-label *ngFor=\"let action of presetActions\"\n                        class=\"w-100\"\n                        [customChipClass]=\"'w-100'\"\n                        [text]=\"action.translateKey || action.label\"\n                        [color]=\"action.label === activePreset ? LabelTypeEnum.primary : LabelTypeEnum.white\"\n                        [bordered]=\"true\"\n                        [matChipAction]=\"true\"\n                        [disableRipple]=\"false\"\n                        (click)=\"onPresetAction(action)\">\n          </i-tech-label>\n          <button matDateRangePickerApply class=\"hidden-apply-btn\" style=\"display: none\"></button>\n        </div>\n      </mat-datepicker-actions>\n    </mat-date-range-picker>\n    <mat-hint *ngIf=\"hintText && !errorMessage\">{{ hintText }}</mat-hint>\n    <mat-error *ngIf=\"dateRangeForm.get('endDate')?.hasError('invalidRange')\">\n      End date must be after start date\n    </mat-error>\n  </mat-form-field>\n</div>\n", styles: [".preset-actions-container{display:flex;flex-direction:column;gap:8px;padding:0 0 24px;width:100%}::ng-deep .mdc-text-field--outlined{padding-left:8px!important}::ng-deep .mat-date-range-input-separator{margin:0!important}::ng-deep .mat-mdc-form-field-icon-suffix{padding-left:0!important}\n"], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i4.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { 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.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i3$1.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i3$1.MatStartDate, selector: "input[matStartDate]", outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i3$1.MatEndDate, selector: "input[matEndDate]", outputs: ["dateChange", "dateInput"] }, { kind: "component", type: i3$1.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }, { kind: "component", type: i3$1.MatDatepickerActions, selector: "mat-datepicker-actions, mat-date-range-picker-actions" }, { kind: "directive", type: i3$1.MatDatepickerApply, selector: "[matDatepickerApply], [matDateRangePickerApply]" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "component", type: IconButtonComponent, selector: "i-tech-icon-button", inputs: ["size", "type", "borderColor", "iconSvg", "iconName", "tooltip", "disabled", "testId", "fillColor"], outputs: ["buttonClick"] }, { kind: "directive", type: DateMaskDirective, selector: "[dateMask]", inputs: ["maskType", "matDatepicker", "rangeFormControl"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: LabelComponent, selector: "i-tech-label", inputs: ["color", "text", "innerHtml", "bordered", "tooltip", "size", "iconName", "iconSvg", "disableRipple", "matChipAction", "forTable", "iconConfig", "customChipClass", "customBgColor", "customTextColor"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DateRangeDatepickerComponent, decorators: [{
             type: Component,
@@ -1671,7 +1691,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                         IconButtonComponent, DateMaskDirective,
                         MatButtonModule,
                         LabelComponent
-                    ], standalone: true, template: "<div class=\"flex_column relative mat-date-range-input\"\n     [formGroup]=\"dateRangeForm\"\n>\n  <div class=\"w-100\" *ngIf=\"label\">\n    <mat-label>\n      {{ (label || '') | translate }}\n    </mat-label>\n  </div>\n  <mat-form-field appearance=\"outline\" [ngClass]=\"{'opened_calendar': isOpen}\">\n    <mat-date-range-input [rangePicker]=\"picker\"\n\n    >\n      <input formControlName=\"startDate\"\n             [attr.data-testId]=\"'date-range-' + testId + '-min-date'\"\n             [placeholder]=\" (placeholder ? placeholder[0] : 'Start Date')\"\n             [title]=\"key ? key.title :  'Date'\"\n             [attr.data-accessKey]=\"key ? key.start : 'minStartDate'\"\n             [attr.data-parentKey]=\"key ? (key.start + '_' + key.end) : 'minStartDate_maxEndDate'\"\n             matStartDate #min\n             dateMask\n             [errorStateMatcher]=\"customErrorStateMatcher\"\n             [rangeFormControl]=\"dateRangeForm.controls['startDate']\"\n             (keydown)=\"keyEventHandler($event,[min.value, max.value || null],min)\"\n             (dateChange)=\"setDate([min.value, max.value || null],min)\">\n      <input formControlName=\"endDate\"\n             [placeholder]=\"(placeholder  ? placeholder[1] : 'End Date')\"\n             [title]=\"key ? key.title :  'Date'\"\n             [attr.data-testId]=\"'date-range-' + testId + '-end-date'\"\n             [attr.data-accessKey]=\"key ? key.end : 'maxEndDate'\"\n             [attr.data-parentKey]=\"key ? (key.start + '_' + key.end) : 'minStartDate_maxEndDate'\"\n             matEndDate #max\n             dateMask\n             [errorStateMatcher]=\"customErrorStateMatcher\"\n             [rangeFormControl]=\"dateRangeForm.controls['endDate']\"\n             (keydown)=\"keyEventHandler($event,[min.value, max.value || null],max)\"\n             (dateChange)=\"setDate([min.value, max.value || null],max)\">\n    </mat-date-range-input>\n    <i-tech-icon-button matSuffix\n                        [iconName]=\"'cancel'\"\n                        (buttonClick)=\"setDate([null,null], max)\"\n                        class=\"default-form-icon-color\"\n                        *ngIf=\"dateRangeForm.get('startDate')?.value && this.dateRangeForm.get('endDate')?.value\"\n    ></i-tech-icon-button>\n    <i-tech-icon-button\n      matSuffix\n      [iconName]=\"'date_range'\"\n      (buttonClick)=\"picker.open()\"\n      class=\"default-form-icon-color\"\n    ></i-tech-icon-button>\n    <mat-date-range-picker\n      [panelClass]=\"panelClass\"\n      #picker\n      (closed)=\"onPickerClosed()\"\n      (opened)=\"onPickerOpened()\"\n    >\n      <mat-datepicker-actions *ngIf=\"presetActions?.length\">\n        <div class=\"preset-actions-container\">\n          <i-tech-label *ngFor=\"let action of presetActions\"\n                        class=\"w-100\"\n                        [customChipClass]=\"'w-100'\"\n                        [text]=\"action.translateKey || action.label\"\n                        [color]=\"action.label === activePreset ? LabelTypeEnum.primary : LabelTypeEnum.white\"\n                        [bordered]=\"true\"\n                        [matChipAction]=\"true\"\n                        [disableRipple]=\"false\"\n                        (click)=\"onPresetAction(action)\">\n          </i-tech-label>\n          <button matDateRangePickerApply class=\"hidden-apply-btn\" style=\"display: none\"></button>\n        </div>\n      </mat-datepicker-actions>\n    </mat-date-range-picker>\n    <mat-hint *ngIf=\"hintText && !errorMessage\">{{ hintText }}</mat-hint>\n  </mat-form-field>\n</div>\n", styles: [".preset-actions-container{display:flex;flex-direction:column;gap:8px;padding:0 0 24px;width:100%}::ng-deep .mdc-text-field--outlined{padding-left:8px!important}::ng-deep .mat-date-range-input-separator{margin:0!important}::ng-deep .mat-mdc-form-field-icon-suffix{padding-left:0!important}\n"] }]
+                    ], standalone: true, template: "<div class=\"flex_column relative mat-date-range-input\"\n     [formGroup]=\"dateRangeForm\"\n>\n  <div class=\"w-100\" *ngIf=\"label\">\n    <mat-label>\n      {{ (label || '') | translate }}\n    </mat-label>\n  </div>\n  <mat-form-field appearance=\"outline\" [ngClass]=\"{'opened_calendar': isOpen}\">\n    <mat-date-range-input [rangePicker]=\"picker\"\n\n    >\n      <input formControlName=\"startDate\"\n             [attr.data-testId]=\"'date-range-' + testId + '-min-date'\"\n             [placeholder]=\" (placeholder ? placeholder[0] : 'Start Date')\"\n             [title]=\"key ? key.title :  'Date'\"\n             [attr.data-accessKey]=\"key ? key.start : 'minStartDate'\"\n             [attr.data-parentKey]=\"key ? (key.start + '_' + key.end) : 'minStartDate_maxEndDate'\"\n             matStartDate #min\n             dateMask\n             [errorStateMatcher]=\"customErrorStateMatcher\"\n             [rangeFormControl]=\"dateRangeForm.controls['startDate']\"\n             (keydown)=\"keyEventHandler($event,[min.value, max.value || null],min)\"\n             (dateChange)=\"setDate([min.value, max.value || null],min)\">\n      <input formControlName=\"endDate\"\n             [placeholder]=\"(placeholder  ? placeholder[1] : 'End Date')\"\n             [title]=\"key ? key.title :  'Date'\"\n             [attr.data-testId]=\"'date-range-' + testId + '-end-date'\"\n             [attr.data-accessKey]=\"key ? key.end : 'maxEndDate'\"\n             [attr.data-parentKey]=\"key ? (key.start + '_' + key.end) : 'minStartDate_maxEndDate'\"\n             matEndDate #max\n             dateMask\n             [errorStateMatcher]=\"customErrorStateMatcher\"\n             [rangeFormControl]=\"dateRangeForm.controls['endDate']\"\n             (keydown)=\"keyEventHandler($event,[min.value, max.value || null],max)\"\n             (dateChange)=\"setDate([min.value, max.value || null],max)\">\n    </mat-date-range-input>\n    <i-tech-icon-button matSuffix\n                        [iconName]=\"'cancel'\"\n                        (buttonClick)=\"setDate([null,null], max)\"\n                        class=\"default-form-icon-color\"\n                        *ngIf=\"dateRangeForm.get('startDate')?.value && this.dateRangeForm.get('endDate')?.value\"\n    ></i-tech-icon-button>\n    <i-tech-icon-button\n      matSuffix\n      [iconName]=\"'date_range'\"\n      (buttonClick)=\"picker.open()\"\n      class=\"default-form-icon-color\"\n    ></i-tech-icon-button>\n    <mat-date-range-picker\n      [panelClass]=\"panelClass\"\n      #picker\n      (closed)=\"onPickerClosed()\"\n      (opened)=\"onPickerOpened()\"\n    >\n      <mat-datepicker-actions *ngIf=\"presetActions?.length\">\n        <div class=\"preset-actions-container\">\n          <i-tech-label *ngFor=\"let action of presetActions\"\n                        class=\"w-100\"\n                        [customChipClass]=\"'w-100'\"\n                        [text]=\"action.translateKey || action.label\"\n                        [color]=\"action.label === activePreset ? LabelTypeEnum.primary : LabelTypeEnum.white\"\n                        [bordered]=\"true\"\n                        [matChipAction]=\"true\"\n                        [disableRipple]=\"false\"\n                        (click)=\"onPresetAction(action)\">\n          </i-tech-label>\n          <button matDateRangePickerApply class=\"hidden-apply-btn\" style=\"display: none\"></button>\n        </div>\n      </mat-datepicker-actions>\n    </mat-date-range-picker>\n    <mat-hint *ngIf=\"hintText && !errorMessage\">{{ hintText }}</mat-hint>\n    <mat-error *ngIf=\"dateRangeForm.get('endDate')?.hasError('invalidRange')\">\n      End date must be after start date\n    </mat-error>\n  </mat-form-field>\n</div>\n", styles: [".preset-actions-container{display:flex;flex-direction:column;gap:8px;padding:0 0 24px;width:100%}::ng-deep .mdc-text-field--outlined{padding-left:8px!important}::ng-deep .mat-date-range-input-separator{margin:0!important}::ng-deep .mat-mdc-form-field-icon-suffix{padding-left:0!important}\n"] }]
         }], propDecorators: { label: [{
                 type: Input
             }], placeholder: [{