i-tech-shared-components 1.4.53 → 1.4.55-alpha.1770751873536

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';
@@ -678,14 +678,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
678
678
  }] } });
679
679
 
680
680
  class AutocompleteSelectComponent {
681
- /**
682
- * See AutocompleteConfigsInterface for available configurations.
683
- */
684
681
  set configs(data) {
685
- this.selectConfig = data;
686
682
  if (!data) {
683
+ this.selectConfig = data;
687
684
  return;
688
685
  }
686
+ // Generate a signature that works with functions
687
+ const signature = JSON.stringify(data, (key, value) => {
688
+ // Replace functions with a stable placeholder
689
+ return typeof value === 'function' ? '[Function]' : value;
690
+ });
691
+ // Stop if config hasn't actually changed
692
+ if (this._lastConfigSignature === signature) {
693
+ this.selectConfig = data; // Update reference but skip initialization
694
+ return;
695
+ }
696
+ // Config changed - proceed with initialization
697
+ this._lastConfigSignature = signature;
698
+ this.selectConfig = data;
689
699
  // Set default search strategy to 'backend' if not specified
690
700
  if (!this.selectConfig.searchStrategy) {
691
701
  this.selectConfig.searchStrategy = 'backend';
@@ -720,6 +730,7 @@ class AutocompleteSelectComponent {
720
730
  }
721
731
  constructor(inputService) {
722
732
  this.inputService = inputService;
733
+ this._lastConfigSignature = '';
723
734
  this.selectionChange = new EventEmitter();
724
735
  this.multiSelectSelectionChange = new EventEmitter();
725
736
  this.emitAction = new EventEmitter();
@@ -785,6 +796,9 @@ class AutocompleteSelectComponent {
785
796
  resetVariables() {
786
797
  this.defaultValueForFirst = '';
787
798
  this.showingValue = null;
799
+ this.accessToNextRequest = true;
800
+ this.pending = false;
801
+ this.requestLoading = false;
788
802
  this.defaultValue = null;
789
803
  if (this.searchInput?.nativeElement) {
790
804
  this.searchInput.nativeElement.value = '';
@@ -1465,10 +1479,14 @@ class DateRangeDatepickerComponent {
1465
1479
  this.hintText = 'MM/DD/YYYY - MM/DD/YYYY';
1466
1480
  this.testId = '';
1467
1481
  this.panelClass = '';
1482
+ this.presetActions = [];
1483
+ this.activePreset = '';
1468
1484
  this.resetForm = new EventEmitter();
1469
1485
  this.selectionChange = new EventEmitter();
1486
+ this.presetActionClick = new EventEmitter();
1470
1487
  this.isOpen = false;
1471
1488
  this.isSelectingRange = false;
1489
+ this.ButtonType = ButtonType;
1472
1490
  this.dateRangeForm = new UntypedFormGroup({
1473
1491
  startDate: new UntypedFormControl('', [Validators.maxLength(10)]),
1474
1492
  endDate: new UntypedFormControl('', [Validators.maxLength(10)]),
@@ -1539,8 +1557,37 @@ class DateRangeDatepickerComponent {
1539
1557
  this.setDate(value, element);
1540
1558
  }
1541
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
+ this.selectionSub = this.picker._model?.selectionChanged?.subscribe(() => {
1569
+ const selection = this.picker._model?.selection;
1570
+ if (selection?.start && selection?.end) {
1571
+ setTimeout(() => {
1572
+ const applyBtn = document.querySelector('.hidden-apply-btn');
1573
+ if (applyBtn) {
1574
+ applyBtn.click();
1575
+ }
1576
+ });
1577
+ }
1578
+ });
1579
+ }
1580
+ }
1581
+ onPickerClosed() {
1582
+ this.isOpen = false;
1583
+ this.selectionSub?.unsubscribe();
1584
+ this.clickForFocusOut();
1585
+ }
1586
+ ngOnDestroy() {
1587
+ this.selectionSub?.unsubscribe();
1588
+ }
1542
1589
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DateRangeDatepickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
1543
- 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"] }] }); }
1590
+ 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"] }] }); }
1544
1591
  }
1545
1592
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DateRangeDatepickerComponent, decorators: [{
1546
1593
  type: Component,
@@ -1548,10 +1595,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
1548
1595
  MatFormFieldModule,
1549
1596
  ReactiveFormsModule,
1550
1597
  MatDatepickerModule,
1551
- NgClass, NgIf,
1598
+ NgClass, NgIf, NgForOf,
1552
1599
  TranslateModule,
1553
- IconButtonComponent, DateMaskDirective
1554
- ], 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" }]
1600
+ IconButtonComponent, DateMaskDirective,
1601
+ MatButtonModule,
1602
+ ButtonComponent
1603
+ ], 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"] }]
1555
1604
  }], propDecorators: { label: [{
1556
1605
  type: Input
1557
1606
  }], placeholder: [{
@@ -1576,10 +1625,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
1576
1625
  type: Input
1577
1626
  }], panelClass: [{
1578
1627
  type: Input
1628
+ }], presetActions: [{
1629
+ type: Input
1630
+ }], activePreset: [{
1631
+ type: Input
1579
1632
  }], resetForm: [{
1580
1633
  type: Output
1581
1634
  }], selectionChange: [{
1582
1635
  type: Output
1636
+ }], presetActionClick: [{
1637
+ type: Output
1583
1638
  }], picker: [{
1584
1639
  type: ViewChild,
1585
1640
  args: ['picker']
@@ -2515,7 +2570,7 @@ class DateRangeSelectionComponent {
2515
2570
  this.rangePicker.picker.close();
2516
2571
  }
2517
2572
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DateRangeSelectionComponent, deps: [{ token: ParseDateService }], target: i0.ɵɵFactoryTarget.Component }); }
2518
- 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"] }] }); }
2573
+ 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"] }] }); }
2519
2574
  }
2520
2575
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DateRangeSelectionComponent, decorators: [{
2521
2576
  type: Component,