i-tech-shared-components 1.4.54 → 1.4.55-alpha.1770754485701

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.
@@ -6,7 +6,7 @@ import * as i3 from '@angular/forms';
6
6
  import { NgControl, FormControlName, ReactiveFormsModule, UntypedFormGroup, UntypedFormControl, Validators, FormsModule } from '@angular/forms';
7
7
  import moment from 'moment';
8
8
  import * as momentTimezone from 'moment-timezone';
9
- import { MatIconButton, MatFabButton, MatButton } from '@angular/material/button';
9
+ import { MatIconButton, MatFabButton, MatButton, MatButtonModule } from '@angular/material/button';
10
10
  import * as i2$1 from '@angular/common';
11
11
  import { NgClass, NgIf, NgOptimizedImage, NgFor, NgForOf, UpperCasePipe, SlicePipe, LowerCasePipe, CommonModule } from '@angular/common';
12
12
  import * as i1$2 from '@angular/material/tooltip';
@@ -1479,10 +1479,14 @@ class DateRangeDatepickerComponent {
1479
1479
  this.hintText = 'MM/DD/YYYY - MM/DD/YYYY';
1480
1480
  this.testId = '';
1481
1481
  this.panelClass = '';
1482
+ this.presetActions = [];
1483
+ this.activePreset = '';
1482
1484
  this.resetForm = new EventEmitter();
1483
1485
  this.selectionChange = new EventEmitter();
1486
+ this.presetActionClick = new EventEmitter();
1484
1487
  this.isOpen = false;
1485
1488
  this.isSelectingRange = false;
1489
+ this.ButtonType = ButtonType;
1486
1490
  this.dateRangeForm = new UntypedFormGroup({
1487
1491
  startDate: new UntypedFormControl('', [Validators.maxLength(10)]),
1488
1492
  endDate: new UntypedFormControl('', [Validators.maxLength(10)]),
@@ -1553,8 +1557,45 @@ class DateRangeDatepickerComponent {
1553
1557
  this.setDate(value, element);
1554
1558
  }
1555
1559
  }
1560
+ onPresetAction(action) {
1561
+ this.presetActionClick.emit({ label: action.label });
1562
+ this.picker.close();
1563
+ }
1564
+ onPickerOpened() {
1565
+ this.isOpen = true;
1566
+ if (this.presetActions?.length) {
1567
+ this.selectionSub?.unsubscribe();
1568
+ // Wait for picker content to render, then subscribe to calendar user selections
1569
+ setTimeout(() => {
1570
+ const content = this.picker._componentRef?.instance;
1571
+ const calendar = content?._calendar;
1572
+ if (calendar) {
1573
+ this.selectionSub = calendar._userSelection.subscribe(() => {
1574
+ // After each click, check if both start and end are selected
1575
+ setTimeout(() => {
1576
+ const selection = this.picker._model?.selection;
1577
+ if (selection?.start && selection?.end) {
1578
+ const applyBtn = document.querySelector('.hidden-apply-btn');
1579
+ if (applyBtn) {
1580
+ applyBtn.click();
1581
+ }
1582
+ }
1583
+ }, 50);
1584
+ });
1585
+ }
1586
+ }, 200);
1587
+ }
1588
+ }
1589
+ onPickerClosed() {
1590
+ this.isOpen = false;
1591
+ this.selectionSub?.unsubscribe();
1592
+ this.clickForFocusOut();
1593
+ }
1594
+ ngOnDestroy() {
1595
+ this.selectionSub?.unsubscribe();
1596
+ }
1556
1597
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DateRangeDatepickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
1557
- 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" }, outputs: { resetForm: "resetForm", selectionChange: "selectionChange" }, 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)=\"isOpen = false;clickForFocusOut()\"\n (opened)=\"isOpen = true\"\n ></mat-date-range-picker>\n <mat-hint *ngIf=\"hintText && !errorMessage\">{{ hintText }}</mat-hint>\n </mat-form-field>\n</div>\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: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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"] }] }); }
1598
+ 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-button *ngFor=\"let action of presetActions\"\n [text]=\"action.translateKey || action.label\"\n [type]=\"action.label === activePreset ? ButtonType.FILLED : ButtonType.OUTLINE\"\n customClass=\"preset-action-btn\"\n (buttonClick)=\"onPresetAction(action)\">\n </i-tech-button>\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:8px 16px 16px;width:100%}.preset-actions-container .preset-action-btn{width:100%;margin-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: ButtonComponent, selector: "i-tech-button", inputs: ["text", "testId", "fontIcon", "svgIcon", "type", "customClass", "submit", "disabled", "activated", "color"], outputs: ["buttonClick"] }] }); }
1558
1599
  }
1559
1600
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DateRangeDatepickerComponent, decorators: [{
1560
1601
  type: Component,
@@ -1562,10 +1603,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
1562
1603
  MatFormFieldModule,
1563
1604
  ReactiveFormsModule,
1564
1605
  MatDatepickerModule,
1565
- NgClass, NgIf,
1606
+ NgClass, NgIf, NgForOf,
1566
1607
  TranslateModule,
1567
- IconButtonComponent, DateMaskDirective
1568
- ], 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)=\"isOpen = false;clickForFocusOut()\"\n (opened)=\"isOpen = true\"\n ></mat-date-range-picker>\n <mat-hint *ngIf=\"hintText && !errorMessage\">{{ hintText }}</mat-hint>\n </mat-form-field>\n</div>\n" }]
1608
+ IconButtonComponent, DateMaskDirective,
1609
+ MatButtonModule,
1610
+ ButtonComponent
1611
+ ], 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-button *ngFor=\"let action of presetActions\"\n [text]=\"action.translateKey || action.label\"\n [type]=\"action.label === activePreset ? ButtonType.FILLED : ButtonType.OUTLINE\"\n customClass=\"preset-action-btn\"\n (buttonClick)=\"onPresetAction(action)\">\n </i-tech-button>\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:8px 16px 16px;width:100%}.preset-actions-container .preset-action-btn{width:100%;margin-left:0!important}\n"] }]
1569
1612
  }], propDecorators: { label: [{
1570
1613
  type: Input
1571
1614
  }], placeholder: [{
@@ -1590,10 +1633,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
1590
1633
  type: Input
1591
1634
  }], panelClass: [{
1592
1635
  type: Input
1636
+ }], presetActions: [{
1637
+ type: Input
1638
+ }], activePreset: [{
1639
+ type: Input
1593
1640
  }], resetForm: [{
1594
1641
  type: Output
1595
1642
  }], selectionChange: [{
1596
1643
  type: Output
1644
+ }], presetActionClick: [{
1645
+ type: Output
1597
1646
  }], picker: [{
1598
1647
  type: ViewChild,
1599
1648
  args: ['picker']
@@ -2529,7 +2578,7 @@ class DateRangeSelectionComponent {
2529
2578
  this.rangePicker.picker.close();
2530
2579
  }
2531
2580
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DateRangeSelectionComponent, deps: [{ token: ParseDateService }], target: i0.ɵɵFactoryTarget.Component }); }
2532
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: DateRangeSelectionComponent, isStandalone: true, selector: "i-tech-date-range-selection", providers: [ParseDateService], viewQueries: [{ propertyName: "rangePicker", first: true, predicate: DateRangeDatepickerComponent, descendants: true }], ngImport: i0, template: "<div class=\"ag-date-filter-wrapper\">\n <i-tech-mat-range-datepicker\n [label]=\"''\"\n [panelClass]=\"'ag-filtration-date-range ag-custom-component-popup'\"\n [placeholder]=\"config?.DATE_RANGE?.placeholder || ['From', 'To']\"\n [defaultValue]=\"defaultValueForDates\"\n (selectionChange)=\"onDateChange($event)\"\n >\n </i-tech-mat-range-datepicker>\n</div>\n", styles: [".ag-date-filter-wrapper{border-radius:0}.ag-date-filter-wrapper::ng-deep .mat-mdc-form-field-subscript-wrapper.mat-mdc-form-field-bottom-align{display:none!important}.ag-date-filter-wrapper::ng-deep .mat-mdc-form-field-infix{display:flex;padding-top:0!important;padding-bottom:0!important;align-items:center}.ag-date-filter-wrapper::ng-deep .mdc-notched-outline>*{border-color:transparent!important}.ag-date-filter-wrapper::ng-deep .mat-mdc-form-field{width:296px!important}.ag-date-filter-wrapper::ng-deep .mat-mdc-form-field-infix{width:fit-content}::ng-deep .mat-datepicker-popup:has(.ag-custom-component-popup) .mat-datepicker-content{box-shadow:4px 6px 12px -4px #0000004d;border:unset!important;border-radius:0!important}::ng-deep .mat-datepicker-popup:has(.ag-custom-component-popup) .mat-datepicker-content .mat-calendar{height:auto!important}::ng-deep .mat-datepicker-popup:has(.ag-custom-component-popup) .mat-datepicker-content .mat-calendar-header{padding:0!important}::ng-deep .mat-datepicker-popup:has(.ag-custom-component-popup) .mat-datepicker-content .mat-calendar-header .mat-calendar-controls{margin:5px 0!important}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: DateRangeDatepickerComponent, selector: "i-tech-mat-range-datepicker", inputs: ["label", "placeholder", "value", "defaultValue", "key", "submit", "clearValue", "errorMessage", "onePlaceholder", "hintText", "testId", "panelClass"], outputs: ["resetForm", "selectionChange"] }] }); }
2581
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: DateRangeSelectionComponent, isStandalone: true, selector: "i-tech-date-range-selection", providers: [ParseDateService], viewQueries: [{ propertyName: "rangePicker", first: true, predicate: DateRangeDatepickerComponent, descendants: true }], ngImport: i0, template: "<div class=\"ag-date-filter-wrapper\">\n <i-tech-mat-range-datepicker\n [label]=\"''\"\n [panelClass]=\"'ag-filtration-date-range ag-custom-component-popup'\"\n [placeholder]=\"config?.DATE_RANGE?.placeholder || ['From', 'To']\"\n [defaultValue]=\"defaultValueForDates\"\n (selectionChange)=\"onDateChange($event)\"\n >\n </i-tech-mat-range-datepicker>\n</div>\n", styles: [".ag-date-filter-wrapper{border-radius:0}.ag-date-filter-wrapper::ng-deep .mat-mdc-form-field-subscript-wrapper.mat-mdc-form-field-bottom-align{display:none!important}.ag-date-filter-wrapper::ng-deep .mat-mdc-form-field-infix{display:flex;padding-top:0!important;padding-bottom:0!important;align-items:center}.ag-date-filter-wrapper::ng-deep .mdc-notched-outline>*{border-color:transparent!important}.ag-date-filter-wrapper::ng-deep .mat-mdc-form-field{width:296px!important}.ag-date-filter-wrapper::ng-deep .mat-mdc-form-field-infix{width:fit-content}::ng-deep .mat-datepicker-popup:has(.ag-custom-component-popup) .mat-datepicker-content{box-shadow:4px 6px 12px -4px #0000004d;border:unset!important;border-radius:0!important}::ng-deep .mat-datepicker-popup:has(.ag-custom-component-popup) .mat-datepicker-content .mat-calendar{height:auto!important}::ng-deep .mat-datepicker-popup:has(.ag-custom-component-popup) .mat-datepicker-content .mat-calendar-header{padding:0!important}::ng-deep .mat-datepicker-popup:has(.ag-custom-component-popup) .mat-datepicker-content .mat-calendar-header .mat-calendar-controls{margin:5px 0!important}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: DateRangeDatepickerComponent, selector: "i-tech-mat-range-datepicker", inputs: ["label", "placeholder", "value", "defaultValue", "key", "submit", "clearValue", "errorMessage", "onePlaceholder", "hintText", "testId", "panelClass", "presetActions", "activePreset"], outputs: ["resetForm", "selectionChange", "presetActionClick"] }] }); }
2533
2582
  }
2534
2583
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DateRangeSelectionComponent, decorators: [{
2535
2584
  type: Component,