i-tech-shared-components 1.4.76 → 1.4.77-alpha.1776198550496

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

@@ -1473,6 +1473,7 @@ class LabelComponent {
     constructor() {
         this.color = LabelTypeEnum.primary;
         this.bordered = false;
+        this.selected = false;
         this.dashed = false;
         this.size = 'standard';
         this.iconSvg = '';
@@ -1484,7 +1485,7 @@ class LabelComponent {
         this.cleared = new EventEmitter();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: LabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: LabelComponent, isStandalone: true, selector: "i-tech-label", inputs: { color: "color", text: "text", innerHtml: "innerHtml", bordered: "bordered", dashed: "dashed", tooltip: "tooltip", size: "size", iconName: "iconName", iconSvg: "iconSvg", prefixIconName: "prefixIconName", disableRipple: "disableRipple", matChipAction: "matChipAction", forTable: "forTable", iconConfig: "iconConfig", customChipClass: "customChipClass", customBgColor: "customBgColor", customTextColor: "customTextColor", clearable: "clearable" }, outputs: { cleared: "cleared" }, ngImport: i0, template: "<div\n    [class]=\"{table_row_item: forTable,'trailing-icon' : iconName || iconSvg || clearable}\"\n    style=\"display: flex; align-items: center; height: 100%;\">\n    <mat-chip\n            [class]=\"'label_' + color + (customChipClass ? ' ' + customChipClass : '')\"\n            [ngClass]=\"{ bordered: bordered, dashed: dashed, small: size === 'small', pointer: matChipAction }\"\n            [matTooltip]=\"(tooltip || '') | translate\"\n            [disableRipple]=\"disableRipple\"\n            [style.--mdc-chip-elevated-container-color]=\"customBgColor || null\"\n            [style.--mdc-chip-label-text-color]=\"customTextColor || null\"\n    >\n        <div class=\"flex_align_center flex flex_gap_5\" [ngClass]=\"matChipAction ? 'pointer' : ''\">\n            <mat-icon *ngIf=\"prefixIconName\">{{prefixIconName}}</mat-icon>\n            <span *ngIf=\"!innerHtml\">{{text | translate}}</span>\n            <span *ngIf=\"innerHtml\" [innerHtml]=\"innerHtml | translate\"></span>\n            <mat-icon *ngIf=\"iconName\"\n                      [ngClass]=\"iconConfig?.iconClass\"\n                      [matTooltip]=\"(iconConfig?.tooltip || '') | translate\"\n                      [color]=\"iconConfig?.color\">\n              {{iconName}}\n            </mat-icon>\n            <mat-icon *ngIf=\"iconSvg\"\n                      [svgIcon]=\"iconSvg\"\n                      [ngClass]=\"iconConfig?.iconClass\"\n                      [matTooltip]=\"(iconConfig?.tooltip || '') | translate\"\n                      [color]=\"iconConfig?.color\">\n            </mat-icon>\n            <button *ngIf=\"clearable\" mat-icon-button class=\"small\" (click)=\"$event.stopPropagation(); cleared.emit()\">\n              <mat-icon>close</mat-icon>\n            </button>\n        </div>\n    </mat-chip>\n</div>\n", dependencies: [{ kind: "component", type: MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: LabelComponent, isStandalone: true, selector: "i-tech-label", inputs: { color: "color", text: "text", innerHtml: "innerHtml", bordered: "bordered", selected: "selected", dashed: "dashed", tooltip: "tooltip", size: "size", iconName: "iconName", iconSvg: "iconSvg", prefixIconName: "prefixIconName", disableRipple: "disableRipple", matChipAction: "matChipAction", forTable: "forTable", iconConfig: "iconConfig", customChipClass: "customChipClass", customBgColor: "customBgColor", customTextColor: "customTextColor", clearable: "clearable" }, outputs: { cleared: "cleared" }, ngImport: i0, template: "<div\n    [class]=\"{table_row_item: forTable,'trailing-icon' : iconName || iconSvg || clearable}\"\n    style=\"display: flex; align-items: center; height: 100%;\">\n    <mat-chip\n            [class]=\"'label_' + color + (customChipClass ? ' ' + customChipClass : '')\"\n            [ngClass]=\"{ bordered: bordered, selected: selected, dashed: dashed, small: size === 'small', pointer: matChipAction }\"\n            [matTooltip]=\"(tooltip || '') | translate\"\n            [disableRipple]=\"disableRipple\"\n            [style.--mdc-chip-elevated-container-color]=\"customBgColor || null\"\n            [style.--mdc-chip-label-text-color]=\"customTextColor || null\"\n    >\n        <div class=\"flex_align_center flex flex_gap_5\" [ngClass]=\"matChipAction ? 'pointer' : ''\">\n            <mat-icon *ngIf=\"prefixIconName\">{{prefixIconName}}</mat-icon>\n            <span *ngIf=\"!innerHtml\">{{text | translate}}</span>\n            <span *ngIf=\"innerHtml\" [innerHtml]=\"innerHtml | translate\"></span>\n            <mat-icon *ngIf=\"iconName\"\n                      [ngClass]=\"iconConfig?.iconClass\"\n                      [matTooltip]=\"(iconConfig?.tooltip || '') | translate\"\n                      [color]=\"iconConfig?.color\">\n              {{iconName}}\n            </mat-icon>\n            <mat-icon *ngIf=\"iconSvg\"\n                      [svgIcon]=\"iconSvg\"\n                      [ngClass]=\"iconConfig?.iconClass\"\n                      [matTooltip]=\"(iconConfig?.tooltip || '') | translate\"\n                      [color]=\"iconConfig?.color\">\n            </mat-icon>\n            <button *ngIf=\"clearable\" mat-icon-button class=\"small\" (click)=\"$event.stopPropagation(); cleared.emit()\">\n              <mat-icon>close</mat-icon>\n            </button>\n        </div>\n    </mat-chip>\n</div>\n", dependencies: [{ kind: "component", type: MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: LabelComponent, decorators: [{
             type: Component,
@@ -1496,7 +1497,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                         MatIcon,
                         MatIconButton,
                         NgIf
-                    ], standalone: true, template: "<div\n    [class]=\"{table_row_item: forTable,'trailing-icon' : iconName || iconSvg || clearable}\"\n    style=\"display: flex; align-items: center; height: 100%;\">\n    <mat-chip\n            [class]=\"'label_' + color + (customChipClass ? ' ' + customChipClass : '')\"\n            [ngClass]=\"{ bordered: bordered, dashed: dashed, small: size === 'small', pointer: matChipAction }\"\n            [matTooltip]=\"(tooltip || '') | translate\"\n            [disableRipple]=\"disableRipple\"\n            [style.--mdc-chip-elevated-container-color]=\"customBgColor || null\"\n            [style.--mdc-chip-label-text-color]=\"customTextColor || null\"\n    >\n        <div class=\"flex_align_center flex flex_gap_5\" [ngClass]=\"matChipAction ? 'pointer' : ''\">\n            <mat-icon *ngIf=\"prefixIconName\">{{prefixIconName}}</mat-icon>\n            <span *ngIf=\"!innerHtml\">{{text | translate}}</span>\n            <span *ngIf=\"innerHtml\" [innerHtml]=\"innerHtml | translate\"></span>\n            <mat-icon *ngIf=\"iconName\"\n                      [ngClass]=\"iconConfig?.iconClass\"\n                      [matTooltip]=\"(iconConfig?.tooltip || '') | translate\"\n                      [color]=\"iconConfig?.color\">\n              {{iconName}}\n            </mat-icon>\n            <mat-icon *ngIf=\"iconSvg\"\n                      [svgIcon]=\"iconSvg\"\n                      [ngClass]=\"iconConfig?.iconClass\"\n                      [matTooltip]=\"(iconConfig?.tooltip || '') | translate\"\n                      [color]=\"iconConfig?.color\">\n            </mat-icon>\n            <button *ngIf=\"clearable\" mat-icon-button class=\"small\" (click)=\"$event.stopPropagation(); cleared.emit()\">\n              <mat-icon>close</mat-icon>\n            </button>\n        </div>\n    </mat-chip>\n</div>\n" }]
+                    ], standalone: true, template: "<div\n    [class]=\"{table_row_item: forTable,'trailing-icon' : iconName || iconSvg || clearable}\"\n    style=\"display: flex; align-items: center; height: 100%;\">\n    <mat-chip\n            [class]=\"'label_' + color + (customChipClass ? ' ' + customChipClass : '')\"\n            [ngClass]=\"{ bordered: bordered, selected: selected, dashed: dashed, small: size === 'small', pointer: matChipAction }\"\n            [matTooltip]=\"(tooltip || '') | translate\"\n            [disableRipple]=\"disableRipple\"\n            [style.--mdc-chip-elevated-container-color]=\"customBgColor || null\"\n            [style.--mdc-chip-label-text-color]=\"customTextColor || null\"\n    >\n        <div class=\"flex_align_center flex flex_gap_5\" [ngClass]=\"matChipAction ? 'pointer' : ''\">\n            <mat-icon *ngIf=\"prefixIconName\">{{prefixIconName}}</mat-icon>\n            <span *ngIf=\"!innerHtml\">{{text | translate}}</span>\n            <span *ngIf=\"innerHtml\" [innerHtml]=\"innerHtml | translate\"></span>\n            <mat-icon *ngIf=\"iconName\"\n                      [ngClass]=\"iconConfig?.iconClass\"\n                      [matTooltip]=\"(iconConfig?.tooltip || '') | translate\"\n                      [color]=\"iconConfig?.color\">\n              {{iconName}}\n            </mat-icon>\n            <mat-icon *ngIf=\"iconSvg\"\n                      [svgIcon]=\"iconSvg\"\n                      [ngClass]=\"iconConfig?.iconClass\"\n                      [matTooltip]=\"(iconConfig?.tooltip || '') | translate\"\n                      [color]=\"iconConfig?.color\">\n            </mat-icon>\n            <button *ngIf=\"clearable\" mat-icon-button class=\"small\" (click)=\"$event.stopPropagation(); cleared.emit()\">\n              <mat-icon>close</mat-icon>\n            </button>\n        </div>\n    </mat-chip>\n</div>\n" }]
         }], propDecorators: { color: [{
                 type: Input
             }], text: [{
@@ -1505,6 +1506,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                 type: Input
             }], bordered: [{
                 type: Input
+            }], selected: [{
+                type: Input
             }], dashed: [{
                 type: Input
             }], tooltip: [{
@@ -1662,7 +1665,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             readonly\n             [errorStateMatcher]=\"customErrorStateMatcher\"\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             readonly\n             [errorStateMatcher]=\"customErrorStateMatcher\"\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: "ngmodule", type: MatButtonModule }, { kind: "component", type: LabelComponent, selector: "i-tech-label", inputs: ["color", "text", "innerHtml", "bordered", "dashed", "tooltip", "size", "iconName", "iconSvg", "prefixIconName", "disableRipple", "matChipAction", "forTable", "iconConfig", "customChipClass", "customBgColor", "customTextColor", "clearable"], outputs: ["cleared"] }] }); }
+    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             readonly\n             [errorStateMatcher]=\"customErrorStateMatcher\"\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             readonly\n             [errorStateMatcher]=\"customErrorStateMatcher\"\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                        [selected]=\"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: "ngmodule", type: MatButtonModule }, { kind: "component", type: LabelComponent, selector: "i-tech-label", inputs: ["color", "text", "innerHtml", "bordered", "selected", "dashed", "tooltip", "size", "iconName", "iconSvg", "prefixIconName", "disableRipple", "matChipAction", "forTable", "iconConfig", "customChipClass", "customBgColor", "customTextColor", "clearable"], outputs: ["cleared"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DateRangeDatepickerComponent, decorators: [{
             type: Component,
@@ -1675,7 +1678,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                         IconButtonComponent,
                         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             readonly\n             [errorStateMatcher]=\"customErrorStateMatcher\"\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             readonly\n             [errorStateMatcher]=\"customErrorStateMatcher\"\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             readonly\n             [errorStateMatcher]=\"customErrorStateMatcher\"\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             readonly\n             [errorStateMatcher]=\"customErrorStateMatcher\"\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                        [selected]=\"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"] }]
         }], propDecorators: { label: [{
                 type: Input
             }], placeholder: [{
@@ -2266,7 +2269,7 @@ class ProcessedStatusCellRendererComponent {
     [text]="data?.list[data.status]?.text"
     [matTooltipDisabled]="!data?.tooltipEnabled"
     [matTooltip]="data?.tooltipText"
-  ></i-tech-label>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: LabelComponent, selector: "i-tech-label", inputs: ["color", "text", "innerHtml", "bordered", "dashed", "tooltip", "size", "iconName", "iconSvg", "prefixIconName", "disableRipple", "matChipAction", "forTable", "iconConfig", "customChipClass", "customBgColor", "customTextColor", "clearable"], outputs: ["cleared"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
+  ></i-tech-label>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: LabelComponent, selector: "i-tech-label", inputs: ["color", "text", "innerHtml", "bordered", "selected", "dashed", "tooltip", "size", "iconName", "iconSvg", "prefixIconName", "disableRipple", "matChipAction", "forTable", "iconConfig", "customChipClass", "customBgColor", "customTextColor", "clearable"], outputs: ["cleared"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ProcessedStatusCellRendererComponent, decorators: [{
             type: Component,