npm - @datarailsshared/datarailsshared - Versions diffs - 1.5.260 → 1.5.263 - Mend

@datarailsshared/datarailsshared 1.5.260 → 1.5.263

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.

Files changed (18) hide show

package/fesm2022/datarailsshared-datarailsshared.mjs CHANGED Viewed

@@ -8,7 +8,7 @@ import { MAT_DATE_FORMATS, DateAdapter, MAT_DATE_LOCALE, MatNativeDateModule } f
 import moment from 'moment';
 import * as i1$2 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, FormGroup, FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { BehaviorSubject, Subject, noop as noop$1, from, merge as merge$1, fromEvent, throwError } from 'rxjs';
+import { BehaviorSubject, Subject, noop as noop$2, from, merge as merge$1, fromEvent, throwError } from 'rxjs';
 import * as _ from 'lodash';
 import { find, reduce, isObject, isNil, map, isNumber, merge, forEach, some, orderBy, cloneDeep, filter as filter$1, includes, indexOf, pull, concat, isString, isBoolean } from 'lodash';
 import { skip, takeUntil, debounceTime, filter, distinctUntilChanged, startWith, switchMap, first, catchError, tap, finalize } from 'rxjs/operators';
@@ -1146,14 +1146,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 args: ['drDatePickerFormat']
             }] } });
-const noop = () => {
+const noop$1 = () => {
 };
 class DrDatePickerComponent {
     set min(minDate) {
-        this._min = moment.unix(minDate).utc();
+        this._min = minDate ? moment.unix(minDate).utc() : null;
     }
     set max(maxDate) {
-        this._max = moment.unix(maxDate).utc();
+        this._max = maxDate ? moment.unix(maxDate).utc() : null;
     }
     get value() {
         return this.innerValue;
@@ -1183,8 +1183,8 @@ class DrDatePickerComponent {
         this.timeframeOption = TimeframeOption;
         this.innerValue = null;
         this.destroyed$ = new Subject();
-        this.onTouchedCallback = noop;
-        this.onChangeCallback = noop;
+        this.onTouchedCallback = noop$1;
+        this.onChangeCallback = noop$1;
         // Should be as arrow function to avoid lose scope
         this.dateFilter = (moment) => {
             if (this.datepickerFilter && moment) {
@@ -1333,14 +1333,14 @@ class DrDatePickerComponent {
     /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DrDatePickerComponent, selector: "dr-date-picker", inputs: { format: "format", min: "min", max: "max", periodPosition: "periodPosition", placeholder: "placeholder", disabled: "disabled", fiscalYearMonthsModifier: "fiscalYearMonthsModifier", datepickerFilter: "datepickerFilter" }, host: { properties: { "class.disabled": "this.disabled", "class.active": "this.active" } }, providers: [
             { provide: NG_VALUE_ACCESSOR, useExisting: DrDatePickerComponent, multi: true },
             DrDatePickerService
-        ], viewQueries: [{ propertyName: "datePicker", first: true, predicate: ["datePicker"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<i class=\"dr-icon-date\"></i>\n<input [(ngModel)]=\"value\"\n       (click)=\"datePicker.open()\"\n       [matDatepicker]=\"datePicker\"\n       [matDatepickerFilter]=\"dateFilter\"\n       [disabled]=\"disabled\"\n       [placeholder]=\"placeholder\"\n       [drDatePickerFormat]=\"datePickerService.format$ | async\"\n       [readonly]=\"readonly\"\n       [min]=\"_min\"\n       [max]=\"_max\"/>\n<mat-datepicker #datePicker\n                [calendarHeaderComponent]=\"customHeader\"\n                (yearSelected)=\"chosenPeriodHandler($event, timeframeOption.YEAR)\"\n                (monthSelected)=\"chosenPeriodHandler($event, timeframeOption.MONTH)\"\n                (opened)=\"onOpen()\"\n                (closed)=\"onCLose()\">\n</mat-datepicker>\n", styles: [":host{position:relative;width:100%;display:flex;flex-direction:row;min-height:32px;height:32px;font-size:14px;font-family:Poppins,sans-serif;background-color:#fff;border:1px solid #9EA1AA;border-radius:6px;color:#333;overflow:hidden;outline:none;cursor:pointer}:host:hover{border-color:#9ea1aa}:host.active,:host:focus-within{border-color:#4646ce!important;color:#333}:host.disabled{pointer-events:none;border:1px solid #AEABAC;background:#f0f1f4;color:#aeabac}:host.disabled:after{color:#aeabac}:host.ng-valid.ng-dirty{border-color:#037c5a}:host.ng-invalid.ng-dirty:not(:focus-within){border-color:#bf1d30!important}:host.ng-untouched.ng-valid{border-color:#9ea1aa}:host:after,:host:before{position:absolute;display:flex;border-color:#6D6E6F transparent transparent;color:#6d6e6f}:host:after{font-family:DataRails!important;content:\"\\ea13\";font-size:24px;color:#6d6e6f;top:0;bottom:0;right:8px;pointer-events:none;position:absolute;display:flex;align-items:center;justify-content:center}:host i{display:flex;align-items:center;position:absolute;color:#6d6e6f;left:8px;top:0;bottom:0}:host input{display:flex;flex-grow:1;height:100%;border:none;text-align:left;padding-left:35px;padding-right:25px;cursor:pointer!important;outline:none}:host input.when-quarter{position:absolute;visibility:hidden}:host input:disabled{border:none;color:#aeabac;background:transparent}:host input::-webkit-search-decoration,:host input::-webkit-search-cancel-button,:host input::-webkit-search-results-button,:host input::-webkit-search-results-decoration{-webkit-appearance:none}:host input::placeholder{color:#6d6e6f;font-size:14px;line-height:18px}::ng-deep .mat-datepicker-popup .mat-datepicker-content{margin:7px 0;box-shadow:0 4px 8px 1px #00000040;border-radius:12px!important}::ng-deep .mat-datepicker-popup .mat-datepicker-content button[disabled]{border:inherit;color:inherit;background-color:inherit}::ng-deep .mat-datepicker-popup .mat-datepicker-content button[disabled]:hover{border:inherit}::ng-deep .mat-datepicker-popup .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){background:#f2f2fb;color:#4646ce;font-weight:600}::ng-deep .mat-datepicker-popup .mat-calendar-body-selected{background-color:#4646ce;color:#f2f2fb;font-weight:600}::ng-deep .mat-datepicker-popup .mat-calendar-body-today.mat-calendar-body-selected{box-shadow:none}::ng-deep .mat-datepicker-popup .mat-button-focus-overlay{background:#f5f5f5}::ng-deep .mat-datepicker-popup .mat-calendar-controls .mat-icon-button:hover .mat-button-focus-overlay{opacity:1!important;background:#f5f5f5;transition:opacity .2s cubic-bezier(.35,0,.25,1)}::ng-deep .mat-datepicker-popup .mat-calendar-controls .mat-calendar-period-button:hover{background:#f5f5f5;transition:background .2s cubic-bezier(.35,0,.25,1)}::ng-deep .mat-datepicker-popup .mat-calendar-table-header th{font-size:14px;font-weight:600;color:#333}::ng-deep .mat-datepicker-popup .mat-calendar-table-header-divider{display:none}::ng-deep .mat-datepicker-popup .mat-calendar-body-label{color:#fff;padding:0}\n"], dependencies: [{ kind: "directive", type: i1$2.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: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i1$3.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i1$3.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "directive", type: DrDatePickerFormatDirective, selector: "[drDatePickerFormat]", inputs: ["configDateParse", "configDateDisplay", "drDatePickerFormat"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], viewQueries: [{ propertyName: "datePicker", first: true, predicate: ["datePicker"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<i class=\"dr-icon-date\"></i>\n<input [(ngModel)]=\"value\"\n       (click)=\"datePicker.open()\"\n       [matDatepicker]=\"datePicker\"\n       [matDatepickerFilter]=\"dateFilter\"\n       [disabled]=\"disabled\"\n       [placeholder]=\"placeholder\"\n       [drDatePickerFormat]=\"datePickerService.format$ | async\"\n       [readonly]=\"readonly\"\n       [min]=\"_min\"\n       [max]=\"_max\"/>\n<mat-datepicker #datePicker\n                [calendarHeaderComponent]=\"customHeader\"\n                (yearSelected)=\"chosenPeriodHandler($event, timeframeOption.YEAR)\"\n                (monthSelected)=\"chosenPeriodHandler($event, timeframeOption.MONTH)\"\n                (opened)=\"onOpen()\"\n                (closed)=\"onCLose()\">\n</mat-datepicker>\n", styles: [":host{position:relative;width:100%;display:flex;flex-direction:row;min-height:32px;height:32px;font-size:14px;font-family:Poppins,sans-serif;background-color:#fff;border:1px solid #9EA1AA;border-radius:6px;color:#333;overflow:hidden;outline:none;cursor:pointer}:host:hover{border-color:#9ea1aa}:host.active,:host:focus-within{border-color:#4646ce!important;color:#333}:host.disabled{pointer-events:none;border:1px solid #AEABAC;background:#f0f1f4;color:#aeabac}:host.disabled:after{color:#aeabac}:host.ng-valid.ng-dirty{border-color:#037c5a}:host.ng-invalid.ng-dirty:not(:focus-within){border-color:#bf1d30!important}:host.ng-untouched.ng-valid{border-color:#9ea1aa}:host:after,:host:before{position:absolute;display:flex;border-color:#6D6E6F transparent transparent;color:#6d6e6f}:host:after{font-family:DataRails!important;content:\"\\ea13\";font-size:24px;color:#6d6e6f;top:0;bottom:0;right:8px;pointer-events:none;position:absolute;display:flex;align-items:center;justify-content:center}:host i{display:flex;align-items:center;position:absolute;color:#6d6e6f;left:8px;top:0;bottom:0}:host input{display:flex;flex-grow:1;height:100%;border:none;text-align:left;padding-left:35px;padding-right:25px;cursor:pointer!important;outline:none}:host input.when-quarter{position:absolute;visibility:hidden}:host input:disabled{border:none;color:#aeabac;background:transparent}:host input::-webkit-search-decoration,:host input::-webkit-search-cancel-button,:host input::-webkit-search-results-button,:host input::-webkit-search-results-decoration{-webkit-appearance:none}:host input::placeholder{color:#6d6e6f;font-size:14px;line-height:18px}::ng-deep .mat-datepicker-popup .mat-datepicker-content{margin:7px 0;box-shadow:0 4px 8px 1px #00000040;border-radius:12px!important}::ng-deep .mat-datepicker-popup .mat-datepicker-content button[disabled]{border:inherit;color:inherit;background-color:inherit}::ng-deep .mat-datepicker-popup .mat-datepicker-content button[disabled]:hover{border:inherit}::ng-deep .mat-datepicker-popup .cdk-keyboard-focused .mat-calendar-body-active>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical),::ng-deep .mat-datepicker-popup .cdk-program-focused .mat-calendar-body-active>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){background-color:#fff}::ng-deep .mat-datepicker-popup .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){background:#f2f2fb;color:#4646ce;font-weight:600}::ng-deep .mat-datepicker-popup .mat-calendar-body-selected{background-color:#4646ce;color:#f2f2fb;font-weight:600}::ng-deep .mat-datepicker-popup .mat-calendar-body-today.mat-calendar-body-selected{box-shadow:none}::ng-deep .mat-datepicker-popup .mat-button-focus-overlay{background:#f5f5f5}::ng-deep .mat-datepicker-popup .mat-calendar-controls .mat-icon-button:hover .mat-button-focus-overlay{opacity:1!important;background:#f5f5f5;transition:opacity .2s cubic-bezier(.35,0,.25,1)}::ng-deep .mat-datepicker-popup .mat-calendar-controls .mat-calendar-period-button:hover{background:#f5f5f5;transition:background .2s cubic-bezier(.35,0,.25,1)}::ng-deep .mat-datepicker-popup .mat-calendar-table-header th{font-size:14px;font-weight:600;color:#333}::ng-deep .mat-datepicker-popup .mat-calendar-table-header-divider{display:none}::ng-deep .mat-datepicker-popup .mat-calendar-body-label{color:#fff;padding:0}\n"], dependencies: [{ kind: "directive", type: i1$2.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: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i1$3.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i1$3.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "directive", type: DrDatePickerFormatDirective, selector: "[drDatePickerFormat]", inputs: ["configDateParse", "configDateDisplay", "drDatePickerFormat"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DrDatePickerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'dr-date-picker', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         { provide: NG_VALUE_ACCESSOR, useExisting: DrDatePickerComponent, multi: true },
                         DrDatePickerService
-                    ], template: "<i class=\"dr-icon-date\"></i>\n<input [(ngModel)]=\"value\"\n       (click)=\"datePicker.open()\"\n       [matDatepicker]=\"datePicker\"\n       [matDatepickerFilter]=\"dateFilter\"\n       [disabled]=\"disabled\"\n       [placeholder]=\"placeholder\"\n       [drDatePickerFormat]=\"datePickerService.format$ | async\"\n       [readonly]=\"readonly\"\n       [min]=\"_min\"\n       [max]=\"_max\"/>\n<mat-datepicker #datePicker\n                [calendarHeaderComponent]=\"customHeader\"\n                (yearSelected)=\"chosenPeriodHandler($event, timeframeOption.YEAR)\"\n                (monthSelected)=\"chosenPeriodHandler($event, timeframeOption.MONTH)\"\n                (opened)=\"onOpen()\"\n                (closed)=\"onCLose()\">\n</mat-datepicker>\n", styles: [":host{position:relative;width:100%;display:flex;flex-direction:row;min-height:32px;height:32px;font-size:14px;font-family:Poppins,sans-serif;background-color:#fff;border:1px solid #9EA1AA;border-radius:6px;color:#333;overflow:hidden;outline:none;cursor:pointer}:host:hover{border-color:#9ea1aa}:host.active,:host:focus-within{border-color:#4646ce!important;color:#333}:host.disabled{pointer-events:none;border:1px solid #AEABAC;background:#f0f1f4;color:#aeabac}:host.disabled:after{color:#aeabac}:host.ng-valid.ng-dirty{border-color:#037c5a}:host.ng-invalid.ng-dirty:not(:focus-within){border-color:#bf1d30!important}:host.ng-untouched.ng-valid{border-color:#9ea1aa}:host:after,:host:before{position:absolute;display:flex;border-color:#6D6E6F transparent transparent;color:#6d6e6f}:host:after{font-family:DataRails!important;content:\"\\ea13\";font-size:24px;color:#6d6e6f;top:0;bottom:0;right:8px;pointer-events:none;position:absolute;display:flex;align-items:center;justify-content:center}:host i{display:flex;align-items:center;position:absolute;color:#6d6e6f;left:8px;top:0;bottom:0}:host input{display:flex;flex-grow:1;height:100%;border:none;text-align:left;padding-left:35px;padding-right:25px;cursor:pointer!important;outline:none}:host input.when-quarter{position:absolute;visibility:hidden}:host input:disabled{border:none;color:#aeabac;background:transparent}:host input::-webkit-search-decoration,:host input::-webkit-search-cancel-button,:host input::-webkit-search-results-button,:host input::-webkit-search-results-decoration{-webkit-appearance:none}:host input::placeholder{color:#6d6e6f;font-size:14px;line-height:18px}::ng-deep .mat-datepicker-popup .mat-datepicker-content{margin:7px 0;box-shadow:0 4px 8px 1px #00000040;border-radius:12px!important}::ng-deep .mat-datepicker-popup .mat-datepicker-content button[disabled]{border:inherit;color:inherit;background-color:inherit}::ng-deep .mat-datepicker-popup .mat-datepicker-content button[disabled]:hover{border:inherit}::ng-deep .mat-datepicker-popup .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){background:#f2f2fb;color:#4646ce;font-weight:600}::ng-deep .mat-datepicker-popup .mat-calendar-body-selected{background-color:#4646ce;color:#f2f2fb;font-weight:600}::ng-deep .mat-datepicker-popup .mat-calendar-body-today.mat-calendar-body-selected{box-shadow:none}::ng-deep .mat-datepicker-popup .mat-button-focus-overlay{background:#f5f5f5}::ng-deep .mat-datepicker-popup .mat-calendar-controls .mat-icon-button:hover .mat-button-focus-overlay{opacity:1!important;background:#f5f5f5;transition:opacity .2s cubic-bezier(.35,0,.25,1)}::ng-deep .mat-datepicker-popup .mat-calendar-controls .mat-calendar-period-button:hover{background:#f5f5f5;transition:background .2s cubic-bezier(.35,0,.25,1)}::ng-deep .mat-datepicker-popup .mat-calendar-table-header th{font-size:14px;font-weight:600;color:#333}::ng-deep .mat-datepicker-popup .mat-calendar-table-header-divider{display:none}::ng-deep .mat-datepicker-popup .mat-calendar-body-label{color:#fff;padding:0}\n"] }]
+                    ], template: "<i class=\"dr-icon-date\"></i>\n<input [(ngModel)]=\"value\"\n       (click)=\"datePicker.open()\"\n       [matDatepicker]=\"datePicker\"\n       [matDatepickerFilter]=\"dateFilter\"\n       [disabled]=\"disabled\"\n       [placeholder]=\"placeholder\"\n       [drDatePickerFormat]=\"datePickerService.format$ | async\"\n       [readonly]=\"readonly\"\n       [min]=\"_min\"\n       [max]=\"_max\"/>\n<mat-datepicker #datePicker\n                [calendarHeaderComponent]=\"customHeader\"\n                (yearSelected)=\"chosenPeriodHandler($event, timeframeOption.YEAR)\"\n                (monthSelected)=\"chosenPeriodHandler($event, timeframeOption.MONTH)\"\n                (opened)=\"onOpen()\"\n                (closed)=\"onCLose()\">\n</mat-datepicker>\n", styles: [":host{position:relative;width:100%;display:flex;flex-direction:row;min-height:32px;height:32px;font-size:14px;font-family:Poppins,sans-serif;background-color:#fff;border:1px solid #9EA1AA;border-radius:6px;color:#333;overflow:hidden;outline:none;cursor:pointer}:host:hover{border-color:#9ea1aa}:host.active,:host:focus-within{border-color:#4646ce!important;color:#333}:host.disabled{pointer-events:none;border:1px solid #AEABAC;background:#f0f1f4;color:#aeabac}:host.disabled:after{color:#aeabac}:host.ng-valid.ng-dirty{border-color:#037c5a}:host.ng-invalid.ng-dirty:not(:focus-within){border-color:#bf1d30!important}:host.ng-untouched.ng-valid{border-color:#9ea1aa}:host:after,:host:before{position:absolute;display:flex;border-color:#6D6E6F transparent transparent;color:#6d6e6f}:host:after{font-family:DataRails!important;content:\"\\ea13\";font-size:24px;color:#6d6e6f;top:0;bottom:0;right:8px;pointer-events:none;position:absolute;display:flex;align-items:center;justify-content:center}:host i{display:flex;align-items:center;position:absolute;color:#6d6e6f;left:8px;top:0;bottom:0}:host input{display:flex;flex-grow:1;height:100%;border:none;text-align:left;padding-left:35px;padding-right:25px;cursor:pointer!important;outline:none}:host input.when-quarter{position:absolute;visibility:hidden}:host input:disabled{border:none;color:#aeabac;background:transparent}:host input::-webkit-search-decoration,:host input::-webkit-search-cancel-button,:host input::-webkit-search-results-button,:host input::-webkit-search-results-decoration{-webkit-appearance:none}:host input::placeholder{color:#6d6e6f;font-size:14px;line-height:18px}::ng-deep .mat-datepicker-popup .mat-datepicker-content{margin:7px 0;box-shadow:0 4px 8px 1px #00000040;border-radius:12px!important}::ng-deep .mat-datepicker-popup .mat-datepicker-content button[disabled]{border:inherit;color:inherit;background-color:inherit}::ng-deep .mat-datepicker-popup .mat-datepicker-content button[disabled]:hover{border:inherit}::ng-deep .mat-datepicker-popup .cdk-keyboard-focused .mat-calendar-body-active>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical),::ng-deep .mat-datepicker-popup .cdk-program-focused .mat-calendar-body-active>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){background-color:#fff}::ng-deep .mat-datepicker-popup .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){background:#f2f2fb;color:#4646ce;font-weight:600}::ng-deep .mat-datepicker-popup .mat-calendar-body-selected{background-color:#4646ce;color:#f2f2fb;font-weight:600}::ng-deep .mat-datepicker-popup .mat-calendar-body-today.mat-calendar-body-selected{box-shadow:none}::ng-deep .mat-datepicker-popup .mat-button-focus-overlay{background:#f5f5f5}::ng-deep .mat-datepicker-popup .mat-calendar-controls .mat-icon-button:hover .mat-button-focus-overlay{opacity:1!important;background:#f5f5f5;transition:opacity .2s cubic-bezier(.35,0,.25,1)}::ng-deep .mat-datepicker-popup .mat-calendar-controls .mat-calendar-period-button:hover{background:#f5f5f5;transition:background .2s cubic-bezier(.35,0,.25,1)}::ng-deep .mat-datepicker-popup .mat-calendar-table-header th{font-size:14px;font-weight:600;color:#333}::ng-deep .mat-datepicker-popup .mat-calendar-table-header-divider{display:none}::ng-deep .mat-datepicker-popup .mat-calendar-body-label{color:#fff;padding:0}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1$4.DateAdapter }, { type: DrDatePickerService }]; }, propDecorators: { format: [{
                 type: Input
             }], min: [{
@@ -2202,8 +2202,8 @@ class DrInputComponent {
         this.clearHandler = new EventEmitter();
         this.buttonHandler = new EventEmitter();
         this.tabindex = -1;
-        this.onChangeCallback = noop$1;
-        this.onTouchedCallback = noop$1;
+        this.onChangeCallback = noop$2;
+        this.onTouchedCallback = noop$2;
         this.onChange = () => {
         };
         this.onTouched = () => {
@@ -3034,15 +3034,15 @@ class CheckboxComponent {
         this.onTouched();
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CheckboxComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CheckboxComponent, selector: "dr-checkbox", inputs: { checkedStatus: "checkedStatus", disabled: "disabled", icon: "icon", indeterminate: "indeterminate" }, outputs: { checkedChange: "checkedChange" }, providers: [
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CheckboxComponent, selector: "dr-checkbox", inputs: { checkedStatus: "checkedStatus", disabled: "disabled", icon: "icon", indeterminate: "indeterminate", textNowrap: "textNowrap" }, outputs: { checkedChange: "checkedChange" }, host: { properties: { "class.text-nowrap": "this.textNowrap" } }, providers: [
             { provide: NG_VALUE_ACCESSOR, useExisting: CheckboxComponent, multi: true }
-        ], ngImport: i0, template: "<label>\n    <input type=\"checkbox\"\n           [attr.data-test]=\"checkedStatus ? 'checked' : 'unchecked'\"\n           [checked]=\"checkedStatus\"\n           [disabled]=\"disabled\"\n           (change)=\"setValue($event)\"\n           (click)=\"$event.stopPropagation()\">\n    <span [class]=\"icon\" [class.indeterminate]=\"indeterminate\">\n      <ng-content></ng-content>\n  </span>\n</label>\n", styles: ["input+span{vertical-align:middle;line-height:30px}input+span,input+span:before{box-sizing:content-box!important;-webkit-box-sizing:content-box!important;-moz-box-sizing:content-box!important}input{visibility:hidden;position:absolute;width:0}label input+span{position:relative;z-index:19;display:inline-block;margin:0 5px 0 0;line-height:17px;min-height:14px;min-width:14px}label input+span:hover{cursor:pointer}label input+span:before{content:\"\";font-size:14px;border-radius:0;display:inline-block;text-align:center;vertical-align:middle;padding:1px;min-height:12px;line-height:12px;min-width:12px;margin-right:5px;border:1.5px solid #8f929e;background-color:#fff;font-weight:400;margin-top:-1px}label input+span:before,label:hover input+span:before{background-color:#fff;border-color:#8f929e;color:#4646ce;border-radius:2px}label input:checked+span:before,label:hover input:checked+span:before{content:url('data:image/svg+xml; utf8, <svg width=\"12\" height=\"10\" viewBox=\"0 0 12 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"> <path d=\"M1 5L4.5 8.5L11 1.5\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/> </svg>');background:#4646ce;border-color:#4646ce;color:#fff}label input:checked+span.cross:before,label:hover input:checked+span.cross:before{content:url('data:image/svg+xml; utf8, <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.91786 4.99992L9.03356 1.88386C9.11927 1.79808 9.16654 1.68365 9.16668 1.56162C9.16668 1.43952 9.1194 1.32495 9.03356 1.23931L8.7605 0.966323C8.67466 0.880342 8.56026 0.833252 8.43811 0.833252C8.31615 0.833252 8.20169 0.880342 8.11585 0.966323L5.00016 4.08218L1.88431 0.966323C1.79861 0.880342 1.68407 0.833252 1.56199 0.833252C1.44004 0.833252 1.32559 0.880342 1.23988 0.966323L0.966677 1.23931C0.788899 1.4171 0.788899 1.70628 0.966677 1.88386L4.08245 4.99992L0.966677 8.11584C0.880904 8.20175 0.833707 8.31619 0.833707 8.43822C0.833707 8.56025 0.880904 8.67468 0.966677 8.76053L1.23981 9.03351C1.32551 9.11943 1.44003 9.16658 1.56191 9.16658C1.684 9.16658 1.79853 9.11943 1.88424 9.03351L5.00008 5.91759L8.11578 9.03351C8.20162 9.11943 8.31608 9.16658 8.43803 9.16658C8.56005 9.16658 8.67459 9.11943 8.76043 9.03351L9.03349 8.76053C9.11919 8.67475 9.16646 8.56025 9.16646 8.43822C9.16646 8.31619 9.11919 8.20175 9.03349 8.11591L5.91786 4.99992Z\" fill=\"white\"/></svg>')}label input+span.indeterminate:before,label:hover input+span.indeterminate:before{content:url('data:image/svg+xml; utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\" viewBox=\"0 0 10 2\" fill=\"none\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M0.25 1C0.25 0.585786 0.585786 0.25 1 0.25L11 0.250001C11.4142 0.250001 11.75 0.585787 11.75 1C11.75 1.41421 11.4142 1.75 11 1.75L1 1.75C0.585786 1.75 0.25 1.41421 0.25 1Z\" fill=\"white\"/></svg>');background:#4646ce;border-color:#4646ce;color:#fff}label input:disabled+span{color:#8f929e}label input:disabled+span:before{border-color:#dfe0e3;pointer-events:none}label input[disabled]:checked+span:before{background:#8f929e;border-color:#8f929e;pointer-events:none}label input:not([disabled])+span:hover:after{content:\"\";width:28px;height:28px;background:#f2f2fb;border-radius:50%;position:absolute;left:-6px;top:-5px;z-index:-1}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], ngImport: i0, template: "<label>\n    <input type=\"checkbox\"\n           [attr.data-test]=\"checkedStatus ? 'checked' : 'unchecked'\"\n           [checked]=\"checkedStatus\"\n           [disabled]=\"disabled\"\n           (change)=\"setValue($event)\"\n           (click)=\"$event.stopPropagation()\">\n    <span [class]=\"icon\" [class.indeterminate]=\"indeterminate\">\n      <ng-content></ng-content>\n  </span>\n</label>\n", styles: ["input+span{vertical-align:middle;line-height:30px}input+span,input+span:before{box-sizing:content-box!important;-webkit-box-sizing:content-box!important;-moz-box-sizing:content-box!important}input{visibility:hidden;position:absolute;width:0}label input+span{position:relative;z-index:19;display:inline-block;margin:0 5px 0 0;line-height:17px;min-height:14px;min-width:14px}:host.text-nowrap label input+span{white-space:nowrap;overflow:hidden;max-width:100%;text-overflow:ellipsis}label input+span:hover{cursor:pointer}label input+span:before{content:\"\";font-size:14px;border-radius:0;display:inline-block;text-align:center;vertical-align:middle;padding:1px;min-height:12px;line-height:12px;min-width:12px;margin-right:5px;border:1.5px solid #8f929e;background-color:#fff;font-weight:400;margin-top:-1px}label input+span:before,label:hover input+span:before{background-color:#fff;border-color:#8f929e;color:#4646ce;border-radius:2px}label input:checked+span:before,label:hover input:checked+span:before{content:url('data:image/svg+xml; utf8, <svg width=\"12\" height=\"10\" viewBox=\"0 0 12 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"> <path d=\"M1 5L4.5 8.5L11 1.5\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/> </svg>');background:#4646ce;border-color:#4646ce;color:#fff}label input:checked+span.cross:before,label:hover input:checked+span.cross:before{content:url('data:image/svg+xml; utf8, <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.91786 4.99992L9.03356 1.88386C9.11927 1.79808 9.16654 1.68365 9.16668 1.56162C9.16668 1.43952 9.1194 1.32495 9.03356 1.23931L8.7605 0.966323C8.67466 0.880342 8.56026 0.833252 8.43811 0.833252C8.31615 0.833252 8.20169 0.880342 8.11585 0.966323L5.00016 4.08218L1.88431 0.966323C1.79861 0.880342 1.68407 0.833252 1.56199 0.833252C1.44004 0.833252 1.32559 0.880342 1.23988 0.966323L0.966677 1.23931C0.788899 1.4171 0.788899 1.70628 0.966677 1.88386L4.08245 4.99992L0.966677 8.11584C0.880904 8.20175 0.833707 8.31619 0.833707 8.43822C0.833707 8.56025 0.880904 8.67468 0.966677 8.76053L1.23981 9.03351C1.32551 9.11943 1.44003 9.16658 1.56191 9.16658C1.684 9.16658 1.79853 9.11943 1.88424 9.03351L5.00008 5.91759L8.11578 9.03351C8.20162 9.11943 8.31608 9.16658 8.43803 9.16658C8.56005 9.16658 8.67459 9.11943 8.76043 9.03351L9.03349 8.76053C9.11919 8.67475 9.16646 8.56025 9.16646 8.43822C9.16646 8.31619 9.11919 8.20175 9.03349 8.11591L5.91786 4.99992Z\" fill=\"white\"/></svg>')}label input+span.indeterminate:before,label:hover input+span.indeterminate:before{content:url('data:image/svg+xml; utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\" viewBox=\"0 0 10 2\" fill=\"none\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M0.25 1C0.25 0.585786 0.585786 0.25 1 0.25L11 0.250001C11.4142 0.250001 11.75 0.585787 11.75 1C11.75 1.41421 11.4142 1.75 11 1.75L1 1.75C0.585786 1.75 0.25 1.41421 0.25 1Z\" fill=\"white\"/></svg>');background:#4646ce;border-color:#4646ce;color:#fff}label input:disabled+span{color:#8f929e}label input:disabled+span:before{border-color:#dfe0e3;pointer-events:none}label input[disabled]:checked+span:before{background:#8f929e;border-color:#8f929e;pointer-events:none}label input:not([disabled])+span:hover:after{content:\"\";width:28px;height:28px;background:#f2f2fb;border-radius:50%;position:absolute;left:-6px;top:-5px;z-index:-1}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CheckboxComponent, decorators: [{
             type: Component,
             args: [{ selector: 'dr-checkbox', providers: [
                         { provide: NG_VALUE_ACCESSOR, useExisting: CheckboxComponent, multi: true }
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<label>\n    <input type=\"checkbox\"\n           [attr.data-test]=\"checkedStatus ? 'checked' : 'unchecked'\"\n           [checked]=\"checkedStatus\"\n           [disabled]=\"disabled\"\n           (change)=\"setValue($event)\"\n           (click)=\"$event.stopPropagation()\">\n    <span [class]=\"icon\" [class.indeterminate]=\"indeterminate\">\n      <ng-content></ng-content>\n  </span>\n</label>\n", styles: ["input+span{vertical-align:middle;line-height:30px}input+span,input+span:before{box-sizing:content-box!important;-webkit-box-sizing:content-box!important;-moz-box-sizing:content-box!important}input{visibility:hidden;position:absolute;width:0}label input+span{position:relative;z-index:19;display:inline-block;margin:0 5px 0 0;line-height:17px;min-height:14px;min-width:14px}label input+span:hover{cursor:pointer}label input+span:before{content:\"\";font-size:14px;border-radius:0;display:inline-block;text-align:center;vertical-align:middle;padding:1px;min-height:12px;line-height:12px;min-width:12px;margin-right:5px;border:1.5px solid #8f929e;background-color:#fff;font-weight:400;margin-top:-1px}label input+span:before,label:hover input+span:before{background-color:#fff;border-color:#8f929e;color:#4646ce;border-radius:2px}label input:checked+span:before,label:hover input:checked+span:before{content:url('data:image/svg+xml; utf8, <svg width=\"12\" height=\"10\" viewBox=\"0 0 12 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"> <path d=\"M1 5L4.5 8.5L11 1.5\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/> </svg>');background:#4646ce;border-color:#4646ce;color:#fff}label input:checked+span.cross:before,label:hover input:checked+span.cross:before{content:url('data:image/svg+xml; utf8, <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.91786 4.99992L9.03356 1.88386C9.11927 1.79808 9.16654 1.68365 9.16668 1.56162C9.16668 1.43952 9.1194 1.32495 9.03356 1.23931L8.7605 0.966323C8.67466 0.880342 8.56026 0.833252 8.43811 0.833252C8.31615 0.833252 8.20169 0.880342 8.11585 0.966323L5.00016 4.08218L1.88431 0.966323C1.79861 0.880342 1.68407 0.833252 1.56199 0.833252C1.44004 0.833252 1.32559 0.880342 1.23988 0.966323L0.966677 1.23931C0.788899 1.4171 0.788899 1.70628 0.966677 1.88386L4.08245 4.99992L0.966677 8.11584C0.880904 8.20175 0.833707 8.31619 0.833707 8.43822C0.833707 8.56025 0.880904 8.67468 0.966677 8.76053L1.23981 9.03351C1.32551 9.11943 1.44003 9.16658 1.56191 9.16658C1.684 9.16658 1.79853 9.11943 1.88424 9.03351L5.00008 5.91759L8.11578 9.03351C8.20162 9.11943 8.31608 9.16658 8.43803 9.16658C8.56005 9.16658 8.67459 9.11943 8.76043 9.03351L9.03349 8.76053C9.11919 8.67475 9.16646 8.56025 9.16646 8.43822C9.16646 8.31619 9.11919 8.20175 9.03349 8.11591L5.91786 4.99992Z\" fill=\"white\"/></svg>')}label input+span.indeterminate:before,label:hover input+span.indeterminate:before{content:url('data:image/svg+xml; utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\" viewBox=\"0 0 10 2\" fill=\"none\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M0.25 1C0.25 0.585786 0.585786 0.25 1 0.25L11 0.250001C11.4142 0.250001 11.75 0.585787 11.75 1C11.75 1.41421 11.4142 1.75 11 1.75L1 1.75C0.585786 1.75 0.25 1.41421 0.25 1Z\" fill=\"white\"/></svg>');background:#4646ce;border-color:#4646ce;color:#fff}label input:disabled+span{color:#8f929e}label input:disabled+span:before{border-color:#dfe0e3;pointer-events:none}label input[disabled]:checked+span:before{background:#8f929e;border-color:#8f929e;pointer-events:none}label input:not([disabled])+span:hover:after{content:\"\";width:28px;height:28px;background:#f2f2fb;border-radius:50%;position:absolute;left:-6px;top:-5px;z-index:-1}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<label>\n    <input type=\"checkbox\"\n           [attr.data-test]=\"checkedStatus ? 'checked' : 'unchecked'\"\n           [checked]=\"checkedStatus\"\n           [disabled]=\"disabled\"\n           (change)=\"setValue($event)\"\n           (click)=\"$event.stopPropagation()\">\n    <span [class]=\"icon\" [class.indeterminate]=\"indeterminate\">\n      <ng-content></ng-content>\n  </span>\n</label>\n", styles: ["input+span{vertical-align:middle;line-height:30px}input+span,input+span:before{box-sizing:content-box!important;-webkit-box-sizing:content-box!important;-moz-box-sizing:content-box!important}input{visibility:hidden;position:absolute;width:0}label input+span{position:relative;z-index:19;display:inline-block;margin:0 5px 0 0;line-height:17px;min-height:14px;min-width:14px}:host.text-nowrap label input+span{white-space:nowrap;overflow:hidden;max-width:100%;text-overflow:ellipsis}label input+span:hover{cursor:pointer}label input+span:before{content:\"\";font-size:14px;border-radius:0;display:inline-block;text-align:center;vertical-align:middle;padding:1px;min-height:12px;line-height:12px;min-width:12px;margin-right:5px;border:1.5px solid #8f929e;background-color:#fff;font-weight:400;margin-top:-1px}label input+span:before,label:hover input+span:before{background-color:#fff;border-color:#8f929e;color:#4646ce;border-radius:2px}label input:checked+span:before,label:hover input:checked+span:before{content:url('data:image/svg+xml; utf8, <svg width=\"12\" height=\"10\" viewBox=\"0 0 12 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"> <path d=\"M1 5L4.5 8.5L11 1.5\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/> </svg>');background:#4646ce;border-color:#4646ce;color:#fff}label input:checked+span.cross:before,label:hover input:checked+span.cross:before{content:url('data:image/svg+xml; utf8, <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.91786 4.99992L9.03356 1.88386C9.11927 1.79808 9.16654 1.68365 9.16668 1.56162C9.16668 1.43952 9.1194 1.32495 9.03356 1.23931L8.7605 0.966323C8.67466 0.880342 8.56026 0.833252 8.43811 0.833252C8.31615 0.833252 8.20169 0.880342 8.11585 0.966323L5.00016 4.08218L1.88431 0.966323C1.79861 0.880342 1.68407 0.833252 1.56199 0.833252C1.44004 0.833252 1.32559 0.880342 1.23988 0.966323L0.966677 1.23931C0.788899 1.4171 0.788899 1.70628 0.966677 1.88386L4.08245 4.99992L0.966677 8.11584C0.880904 8.20175 0.833707 8.31619 0.833707 8.43822C0.833707 8.56025 0.880904 8.67468 0.966677 8.76053L1.23981 9.03351C1.32551 9.11943 1.44003 9.16658 1.56191 9.16658C1.684 9.16658 1.79853 9.11943 1.88424 9.03351L5.00008 5.91759L8.11578 9.03351C8.20162 9.11943 8.31608 9.16658 8.43803 9.16658C8.56005 9.16658 8.67459 9.11943 8.76043 9.03351L9.03349 8.76053C9.11919 8.67475 9.16646 8.56025 9.16646 8.43822C9.16646 8.31619 9.11919 8.20175 9.03349 8.11591L5.91786 4.99992Z\" fill=\"white\"/></svg>')}label input+span.indeterminate:before,label:hover input+span.indeterminate:before{content:url('data:image/svg+xml; utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\" viewBox=\"0 0 10 2\" fill=\"none\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M0.25 1C0.25 0.585786 0.585786 0.25 1 0.25L11 0.250001C11.4142 0.250001 11.75 0.585787 11.75 1C11.75 1.41421 11.4142 1.75 11 1.75L1 1.75C0.585786 1.75 0.25 1.41421 0.25 1Z\" fill=\"white\"/></svg>');background:#4646ce;border-color:#4646ce;color:#fff}label input:disabled+span{color:#8f929e}label input:disabled+span:before{border-color:#dfe0e3;pointer-events:none}label input[disabled]:checked+span:before{background:#8f929e;border-color:#8f929e;pointer-events:none}label input:not([disabled])+span:hover:after{content:\"\";width:28px;height:28px;background:#f2f2fb;border-radius:50%;position:absolute;left:-6px;top:-5px;z-index:-1}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { checkedStatus: [{
                 type: Input
             }], disabled: [{
@@ -3051,6 +3051,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], indeterminate: [{
                 type: Input
+            }], textNowrap: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ['class.text-nowrap']
             }], checkedChange: [{
                 type: Output
             }] } });
@@ -3197,14 +3202,14 @@ class DrDatePickerWithTimeframeComponent extends DrDatePickerComponent {
     /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DrDatePickerWithTimeframeComponent, selector: "dr-date-picker-with-timeframe", inputs: { isDashboardDatepicker: "isDashboardDatepicker", dateFormatConfig: "dateFormatConfig", canSelectTimeframe: "canSelectTimeframe", availableTimeframes: "availableTimeframes", paginationDebounce: "paginationDebounce", isUsingDateTagPresets: "isUsingDateTagPresets", presetTag: "presetTag" }, outputs: { onChangeFormat: "onChangeFormat", onChangePresetTag: "onChangePresetTag" }, host: { properties: { "class.dr-date-picker-on-dashboard": "this.isDashboardClassDisplayed" } }, providers: [
             { provide: NG_VALUE_ACCESSOR, useExisting: DrDatePickerWithTimeframeComponent, multi: true },
             { provide: DrDatePickerService }
-        ], usesInheritance: true, ngImport: i0, template: "<dr-button [disabled]=\"isPrevDateDisabled\" *ngIf=\"!disabled\" theme=\"icon\" icon=\"dr-icon-arrow-left\" (click)=\"pagingClicked(false)\"></dr-button>\n<div class=\"dr-datepicker-input-container\">\n    <i *ngIf=\"isDashboardDatepicker\" class=\"dr-icon-date\"></i>\n\n    <div class=\"dr-datepicker-input-container__formatted-value-display\" (click)=\"datepickerInput.click()\">\n        <span *ngIf=\"presetTagSelected && datePickerService.isUsingDateTagPresets\"> {{ presetTagSelected }} </span>\n        <span>{{ presetTagSelected && datePickerService.isUsingDateTagPresets ? '(' + displayedFormattedValue + ')' : displayedFormattedValue }}</span>\n    </div>\n    <input\n            #datepickerInput\n            [(ngModel)]=\"value\"\n            (click)=\"datePicker.open()\"\n            [matDatepicker]=\"datePicker\"\n            [readonly]=\"readonly\"\n            [min]=\"_min\"\n            [max]=\"_max\"\n    />\n</div>\n<dr-button [disabled]=\"isNextDateDisabled\" *ngIf=\"!disabled\" theme=\"icon\" icon=\"dr-icon-arrow-right\" (click)=\"pagingClicked(true)\"></dr-button>\n<mat-datepicker #datePicker\n                class=\"dr-timeframe-datepicker\"\n                [calendarHeaderComponent]=\"customHeader\"\n                (yearSelected)=\"chosenPeriodHandler($event, timeframeOption.YEAR)\"\n                (monthSelected)=\"chosenPeriodHandler($event, timeframeOption.MONTH)\"\n                [panelClass]=\"datePickerService.isUsingDateTagPresets ? 'date-picker-preset-tag' : 'dr-timeframe-datepicker'\"\n                >\n</mat-datepicker>\n", styles: [":host{position:relative;width:100%;display:flex;flex-direction:row;min-height:32px;height:32px;font-size:14px;font-family:Poppins,sans-serif;background-color:#fff;border:1px solid #9EA1AA;border-radius:6px;color:#333;overflow:hidden;outline:none;cursor:pointer}:host:hover{border-color:#9ea1aa}:host.active,:host:focus-within{border-color:#4646ce!important;color:#333}:host.disabled{pointer-events:none;border:1px solid #AEABAC;background:#f0f1f4;color:#aeabac}:host.disabled:after{color:#aeabac}:host.ng-valid.ng-dirty{border-color:#037c5a}:host.ng-invalid.ng-dirty:not(:focus-within){border-color:#bf1d30!important}:host.ng-untouched.ng-valid{border-color:#9ea1aa}:host:after,:host:before{position:absolute;display:flex;border-color:#6D6E6F transparent transparent;color:#6d6e6f}:host:after{font-family:DataRails!important;content:\"\\ea13\";font-size:24px;color:#6d6e6f;top:0;bottom:0;right:8px;pointer-events:none;position:absolute;display:flex;align-items:center;justify-content:center}:host i{display:flex;align-items:center;position:absolute;color:#6d6e6f;left:8px;top:0;bottom:0}:host input{display:flex;flex-grow:1;height:100%;border:none;text-align:left;padding-left:35px;padding-right:25px;cursor:pointer!important;outline:none}:host input.when-quarter{position:absolute;visibility:hidden}:host input:disabled{border:none;color:#aeabac;background:transparent}:host input::-webkit-search-decoration,:host input::-webkit-search-cancel-button,:host input::-webkit-search-results-button,:host input::-webkit-search-results-decoration{-webkit-appearance:none}:host input::placeholder{color:#6d6e6f;font-size:14px;line-height:18px}::ng-deep .mat-datepicker-popup .mat-datepicker-content{margin:7px 0;box-shadow:0 4px 8px 1px #00000040;border-radius:12px!important}::ng-deep .mat-datepicker-popup .mat-datepicker-content button[disabled]{border:inherit;color:inherit;background-color:inherit}::ng-deep .mat-datepicker-popup .mat-datepicker-content button[disabled]:hover{border:inherit}::ng-deep .mat-datepicker-popup .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){background:#f2f2fb;color:#4646ce;font-weight:600}::ng-deep .mat-datepicker-popup .mat-calendar-body-selected{background-color:#4646ce;color:#f2f2fb;font-weight:600}::ng-deep .mat-datepicker-popup .mat-calendar-body-today.mat-calendar-body-selected{box-shadow:none}::ng-deep .mat-datepicker-popup .mat-button-focus-overlay{background:#f5f5f5}::ng-deep .mat-datepicker-popup .mat-calendar-controls .mat-icon-button:hover .mat-button-focus-overlay{opacity:1!important;background:#f5f5f5;transition:opacity .2s cubic-bezier(.35,0,.25,1)}::ng-deep .mat-datepicker-popup .mat-calendar-controls .mat-calendar-period-button:hover{background:#f5f5f5;transition:background .2s cubic-bezier(.35,0,.25,1)}::ng-deep .mat-datepicker-popup .mat-calendar-table-header th{font-size:14px;font-weight:600;color:#333}::ng-deep .mat-datepicker-popup .mat-calendar-table-header-divider{display:none}::ng-deep .mat-datepicker-popup .mat-calendar-body-label{color:#fff;padding:0}:host{border:none;display:flex;align-items:center}:host.disabled{background:transparent;color:#aeabac}:host.disabled.dr-date-picker-on-dashboard{border:none;padding:0 8px}:host.disabled.dr-date-picker-on-dashboard .dr-datepicker-input-container__formatted-value-display{text-decoration:none;color:#aeabac;font-weight:400}:host.disabled.dr-date-picker-on-dashboard .dr-datepicker-input-container i{color:#aeabac}:host.dr-date-picker-on-dashboard{width:-moz-fit-content;width:fit-content;justify-content:space-between}:host.dr-date-picker-on-dashboard mat-datepicker{position:absolute}:host.dr-date-picker-on-dashboard:after{visibility:hidden}:host.dr-date-picker-on-dashboard .dr-datepicker-input-container{display:flex;flex-direction:row;justify-content:center;align-items:center;margin-left:-10px}:host.dr-date-picker-on-dashboard .dr-datepicker-input-container__formatted-value-display{font-weight:600;width:auto;margin-left:5px}:host.dr-date-picker-on-dashboard .dr-datepicker-input-container .dr-icon-date{display:block;position:relative;top:0;margin-right:8px;color:#4e566c}:host .dr-datepicker-input-container input{visibility:hidden;position:absolute;width:100%}:host .dr-datepicker-input-container__formatted-value-display{width:90px;height:22px;padding-left:0;text-align:center;line-height:22px;color:#0c142b;text-decoration-line:underline}:host .dr-datepicker-input-container__formatted-value-display:hover{background-color:#f2f2fb;border-radius:5px;cursor:pointer;text-decoration-line:underline;color:#4646ce}::ng-deep .date-picker-preset-tag{width:386px!important}::ng-deep .date-picker-preset-tag .mat-calendar-content{padding-left:32px!important;padding-right:32px!important}\n"], dependencies: [{ kind: "directive", type: i1$2.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: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1$3.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i1$3.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: DrButtonComponent, selector: "dr-button", inputs: ["theme", "icon", "iconColor", "iconSize", "iconAfter", "iconAfterColor", "iconAfterSize", "disabled", "isLoading", "isActive"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], usesInheritance: true, ngImport: i0, template: "<dr-button [disabled]=\"isPrevDateDisabled\" *ngIf=\"!disabled\" theme=\"icon\" icon=\"dr-icon-arrow-left\" (click)=\"pagingClicked(false)\"></dr-button>\n<div class=\"dr-datepicker-input-container\">\n    <i *ngIf=\"isDashboardDatepicker\" class=\"dr-icon-date\"></i>\n\n    <div class=\"dr-datepicker-input-container__formatted-value-display\" (click)=\"datepickerInput.click()\">\n        <span *ngIf=\"presetTagSelected && datePickerService.isUsingDateTagPresets\"> {{ presetTagSelected }} </span>\n        <span>{{ presetTagSelected && datePickerService.isUsingDateTagPresets ? '(' + displayedFormattedValue + ')' : displayedFormattedValue }}</span>\n    </div>\n    <input\n            #datepickerInput\n            [(ngModel)]=\"value\"\n            (click)=\"datePicker.open()\"\n            [matDatepicker]=\"datePicker\"\n            [readonly]=\"readonly\"\n            [min]=\"_min\"\n            [max]=\"_max\"\n    />\n</div>\n<dr-button [disabled]=\"isNextDateDisabled\" *ngIf=\"!disabled\" theme=\"icon\" icon=\"dr-icon-arrow-right\" (click)=\"pagingClicked(true)\"></dr-button>\n<mat-datepicker #datePicker\n                class=\"dr-timeframe-datepicker\"\n                [calendarHeaderComponent]=\"customHeader\"\n                (yearSelected)=\"chosenPeriodHandler($event, timeframeOption.YEAR)\"\n                (monthSelected)=\"chosenPeriodHandler($event, timeframeOption.MONTH)\"\n                [panelClass]=\"datePickerService.isUsingDateTagPresets ? 'date-picker-preset-tag' : 'dr-timeframe-datepicker'\"\n                >\n</mat-datepicker>\n", styles: [":host{position:relative;width:100%;display:flex;flex-direction:row;min-height:32px;height:32px;font-size:14px;font-family:Poppins,sans-serif;background-color:#fff;border:1px solid #9EA1AA;border-radius:6px;color:#333;overflow:hidden;outline:none;cursor:pointer}:host:hover{border-color:#9ea1aa}:host.active,:host:focus-within{border-color:#4646ce!important;color:#333}:host.disabled{pointer-events:none;border:1px solid #AEABAC;background:#f0f1f4;color:#aeabac}:host.disabled:after{color:#aeabac}:host.ng-valid.ng-dirty{border-color:#037c5a}:host.ng-invalid.ng-dirty:not(:focus-within){border-color:#bf1d30!important}:host.ng-untouched.ng-valid{border-color:#9ea1aa}:host:after,:host:before{position:absolute;display:flex;border-color:#6D6E6F transparent transparent;color:#6d6e6f}:host:after{font-family:DataRails!important;content:\"\\ea13\";font-size:24px;color:#6d6e6f;top:0;bottom:0;right:8px;pointer-events:none;position:absolute;display:flex;align-items:center;justify-content:center}:host i{display:flex;align-items:center;position:absolute;color:#6d6e6f;left:8px;top:0;bottom:0}:host input{display:flex;flex-grow:1;height:100%;border:none;text-align:left;padding-left:35px;padding-right:25px;cursor:pointer!important;outline:none}:host input.when-quarter{position:absolute;visibility:hidden}:host input:disabled{border:none;color:#aeabac;background:transparent}:host input::-webkit-search-decoration,:host input::-webkit-search-cancel-button,:host input::-webkit-search-results-button,:host input::-webkit-search-results-decoration{-webkit-appearance:none}:host input::placeholder{color:#6d6e6f;font-size:14px;line-height:18px}::ng-deep .mat-datepicker-popup .mat-datepicker-content{margin:7px 0;box-shadow:0 4px 8px 1px #00000040;border-radius:12px!important}::ng-deep .mat-datepicker-popup .mat-datepicker-content button[disabled]{border:inherit;color:inherit;background-color:inherit}::ng-deep .mat-datepicker-popup .mat-datepicker-content button[disabled]:hover{border:inherit}::ng-deep .mat-datepicker-popup .cdk-keyboard-focused .mat-calendar-body-active>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical),::ng-deep .mat-datepicker-popup .cdk-program-focused .mat-calendar-body-active>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){background-color:#fff}::ng-deep .mat-datepicker-popup .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){background:#f2f2fb;color:#4646ce;font-weight:600}::ng-deep .mat-datepicker-popup .mat-calendar-body-selected{background-color:#4646ce;color:#f2f2fb;font-weight:600}::ng-deep .mat-datepicker-popup .mat-calendar-body-today.mat-calendar-body-selected{box-shadow:none}::ng-deep .mat-datepicker-popup .mat-button-focus-overlay{background:#f5f5f5}::ng-deep .mat-datepicker-popup .mat-calendar-controls .mat-icon-button:hover .mat-button-focus-overlay{opacity:1!important;background:#f5f5f5;transition:opacity .2s cubic-bezier(.35,0,.25,1)}::ng-deep .mat-datepicker-popup .mat-calendar-controls .mat-calendar-period-button:hover{background:#f5f5f5;transition:background .2s cubic-bezier(.35,0,.25,1)}::ng-deep .mat-datepicker-popup .mat-calendar-table-header th{font-size:14px;font-weight:600;color:#333}::ng-deep .mat-datepicker-popup .mat-calendar-table-header-divider{display:none}::ng-deep .mat-datepicker-popup .mat-calendar-body-label{color:#fff;padding:0}:host{border:none;display:flex;align-items:center}:host.disabled{background:transparent;color:#aeabac}:host.disabled.dr-date-picker-on-dashboard{border:none;padding:0 8px}:host.disabled.dr-date-picker-on-dashboard .dr-datepicker-input-container__formatted-value-display{text-decoration:none;color:#aeabac;font-weight:400}:host.disabled.dr-date-picker-on-dashboard .dr-datepicker-input-container i{color:#aeabac}:host.dr-date-picker-on-dashboard{width:-moz-fit-content;width:fit-content;justify-content:space-between}:host.dr-date-picker-on-dashboard mat-datepicker{position:absolute}:host.dr-date-picker-on-dashboard:after{visibility:hidden}:host.dr-date-picker-on-dashboard .dr-datepicker-input-container{display:flex;flex-direction:row;justify-content:center;align-items:center;margin-left:-10px}:host.dr-date-picker-on-dashboard .dr-datepicker-input-container__formatted-value-display{font-weight:600;width:auto;margin-left:5px}:host.dr-date-picker-on-dashboard .dr-datepicker-input-container .dr-icon-date{display:block;position:relative;top:0;margin-right:8px;color:#4e566c}:host .dr-datepicker-input-container input{visibility:hidden;position:absolute;width:100%}:host .dr-datepicker-input-container__formatted-value-display{width:90px;height:22px;padding-left:0;text-align:center;line-height:22px;color:#0c142b;text-decoration-line:underline}:host .dr-datepicker-input-container__formatted-value-display:hover{background-color:#f2f2fb;border-radius:5px;cursor:pointer;text-decoration-line:underline;color:#4646ce}::ng-deep .date-picker-preset-tag{width:386px!important}::ng-deep .date-picker-preset-tag .mat-calendar-content{padding-left:32px!important;padding-right:32px!important}\n"], dependencies: [{ kind: "directive", type: i1$2.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: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1$3.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i1$3.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: DrButtonComponent, selector: "dr-button", inputs: ["theme", "icon", "iconColor", "iconSize", "iconAfter", "iconAfterColor", "iconAfterSize", "disabled", "isLoading", "isActive"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DrDatePickerWithTimeframeComponent, decorators: [{
             type: Component,
             args: [{ selector: 'dr-date-picker-with-timeframe', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         { provide: NG_VALUE_ACCESSOR, useExisting: DrDatePickerWithTimeframeComponent, multi: true },
                         { provide: DrDatePickerService }
-                    ], template: "<dr-button [disabled]=\"isPrevDateDisabled\" *ngIf=\"!disabled\" theme=\"icon\" icon=\"dr-icon-arrow-left\" (click)=\"pagingClicked(false)\"></dr-button>\n<div class=\"dr-datepicker-input-container\">\n    <i *ngIf=\"isDashboardDatepicker\" class=\"dr-icon-date\"></i>\n\n    <div class=\"dr-datepicker-input-container__formatted-value-display\" (click)=\"datepickerInput.click()\">\n        <span *ngIf=\"presetTagSelected && datePickerService.isUsingDateTagPresets\"> {{ presetTagSelected }} </span>\n        <span>{{ presetTagSelected && datePickerService.isUsingDateTagPresets ? '(' + displayedFormattedValue + ')' : displayedFormattedValue }}</span>\n    </div>\n    <input\n            #datepickerInput\n            [(ngModel)]=\"value\"\n            (click)=\"datePicker.open()\"\n            [matDatepicker]=\"datePicker\"\n            [readonly]=\"readonly\"\n            [min]=\"_min\"\n            [max]=\"_max\"\n    />\n</div>\n<dr-button [disabled]=\"isNextDateDisabled\" *ngIf=\"!disabled\" theme=\"icon\" icon=\"dr-icon-arrow-right\" (click)=\"pagingClicked(true)\"></dr-button>\n<mat-datepicker #datePicker\n                class=\"dr-timeframe-datepicker\"\n                [calendarHeaderComponent]=\"customHeader\"\n                (yearSelected)=\"chosenPeriodHandler($event, timeframeOption.YEAR)\"\n                (monthSelected)=\"chosenPeriodHandler($event, timeframeOption.MONTH)\"\n                [panelClass]=\"datePickerService.isUsingDateTagPresets ? 'date-picker-preset-tag' : 'dr-timeframe-datepicker'\"\n                >\n</mat-datepicker>\n", styles: [":host{position:relative;width:100%;display:flex;flex-direction:row;min-height:32px;height:32px;font-size:14px;font-family:Poppins,sans-serif;background-color:#fff;border:1px solid #9EA1AA;border-radius:6px;color:#333;overflow:hidden;outline:none;cursor:pointer}:host:hover{border-color:#9ea1aa}:host.active,:host:focus-within{border-color:#4646ce!important;color:#333}:host.disabled{pointer-events:none;border:1px solid #AEABAC;background:#f0f1f4;color:#aeabac}:host.disabled:after{color:#aeabac}:host.ng-valid.ng-dirty{border-color:#037c5a}:host.ng-invalid.ng-dirty:not(:focus-within){border-color:#bf1d30!important}:host.ng-untouched.ng-valid{border-color:#9ea1aa}:host:after,:host:before{position:absolute;display:flex;border-color:#6D6E6F transparent transparent;color:#6d6e6f}:host:after{font-family:DataRails!important;content:\"\\ea13\";font-size:24px;color:#6d6e6f;top:0;bottom:0;right:8px;pointer-events:none;position:absolute;display:flex;align-items:center;justify-content:center}:host i{display:flex;align-items:center;position:absolute;color:#6d6e6f;left:8px;top:0;bottom:0}:host input{display:flex;flex-grow:1;height:100%;border:none;text-align:left;padding-left:35px;padding-right:25px;cursor:pointer!important;outline:none}:host input.when-quarter{position:absolute;visibility:hidden}:host input:disabled{border:none;color:#aeabac;background:transparent}:host input::-webkit-search-decoration,:host input::-webkit-search-cancel-button,:host input::-webkit-search-results-button,:host input::-webkit-search-results-decoration{-webkit-appearance:none}:host input::placeholder{color:#6d6e6f;font-size:14px;line-height:18px}::ng-deep .mat-datepicker-popup .mat-datepicker-content{margin:7px 0;box-shadow:0 4px 8px 1px #00000040;border-radius:12px!important}::ng-deep .mat-datepicker-popup .mat-datepicker-content button[disabled]{border:inherit;color:inherit;background-color:inherit}::ng-deep .mat-datepicker-popup .mat-datepicker-content button[disabled]:hover{border:inherit}::ng-deep .mat-datepicker-popup .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){background:#f2f2fb;color:#4646ce;font-weight:600}::ng-deep .mat-datepicker-popup .mat-calendar-body-selected{background-color:#4646ce;color:#f2f2fb;font-weight:600}::ng-deep .mat-datepicker-popup .mat-calendar-body-today.mat-calendar-body-selected{box-shadow:none}::ng-deep .mat-datepicker-popup .mat-button-focus-overlay{background:#f5f5f5}::ng-deep .mat-datepicker-popup .mat-calendar-controls .mat-icon-button:hover .mat-button-focus-overlay{opacity:1!important;background:#f5f5f5;transition:opacity .2s cubic-bezier(.35,0,.25,1)}::ng-deep .mat-datepicker-popup .mat-calendar-controls .mat-calendar-period-button:hover{background:#f5f5f5;transition:background .2s cubic-bezier(.35,0,.25,1)}::ng-deep .mat-datepicker-popup .mat-calendar-table-header th{font-size:14px;font-weight:600;color:#333}::ng-deep .mat-datepicker-popup .mat-calendar-table-header-divider{display:none}::ng-deep .mat-datepicker-popup .mat-calendar-body-label{color:#fff;padding:0}:host{border:none;display:flex;align-items:center}:host.disabled{background:transparent;color:#aeabac}:host.disabled.dr-date-picker-on-dashboard{border:none;padding:0 8px}:host.disabled.dr-date-picker-on-dashboard .dr-datepicker-input-container__formatted-value-display{text-decoration:none;color:#aeabac;font-weight:400}:host.disabled.dr-date-picker-on-dashboard .dr-datepicker-input-container i{color:#aeabac}:host.dr-date-picker-on-dashboard{width:-moz-fit-content;width:fit-content;justify-content:space-between}:host.dr-date-picker-on-dashboard mat-datepicker{position:absolute}:host.dr-date-picker-on-dashboard:after{visibility:hidden}:host.dr-date-picker-on-dashboard .dr-datepicker-input-container{display:flex;flex-direction:row;justify-content:center;align-items:center;margin-left:-10px}:host.dr-date-picker-on-dashboard .dr-datepicker-input-container__formatted-value-display{font-weight:600;width:auto;margin-left:5px}:host.dr-date-picker-on-dashboard .dr-datepicker-input-container .dr-icon-date{display:block;position:relative;top:0;margin-right:8px;color:#4e566c}:host .dr-datepicker-input-container input{visibility:hidden;position:absolute;width:100%}:host .dr-datepicker-input-container__formatted-value-display{width:90px;height:22px;padding-left:0;text-align:center;line-height:22px;color:#0c142b;text-decoration-line:underline}:host .dr-datepicker-input-container__formatted-value-display:hover{background-color:#f2f2fb;border-radius:5px;cursor:pointer;text-decoration-line:underline;color:#4646ce}::ng-deep .date-picker-preset-tag{width:386px!important}::ng-deep .date-picker-preset-tag .mat-calendar-content{padding-left:32px!important;padding-right:32px!important}\n"] }]
+                    ], template: "<dr-button [disabled]=\"isPrevDateDisabled\" *ngIf=\"!disabled\" theme=\"icon\" icon=\"dr-icon-arrow-left\" (click)=\"pagingClicked(false)\"></dr-button>\n<div class=\"dr-datepicker-input-container\">\n    <i *ngIf=\"isDashboardDatepicker\" class=\"dr-icon-date\"></i>\n\n    <div class=\"dr-datepicker-input-container__formatted-value-display\" (click)=\"datepickerInput.click()\">\n        <span *ngIf=\"presetTagSelected && datePickerService.isUsingDateTagPresets\"> {{ presetTagSelected }} </span>\n        <span>{{ presetTagSelected && datePickerService.isUsingDateTagPresets ? '(' + displayedFormattedValue + ')' : displayedFormattedValue }}</span>\n    </div>\n    <input\n            #datepickerInput\n            [(ngModel)]=\"value\"\n            (click)=\"datePicker.open()\"\n            [matDatepicker]=\"datePicker\"\n            [readonly]=\"readonly\"\n            [min]=\"_min\"\n            [max]=\"_max\"\n    />\n</div>\n<dr-button [disabled]=\"isNextDateDisabled\" *ngIf=\"!disabled\" theme=\"icon\" icon=\"dr-icon-arrow-right\" (click)=\"pagingClicked(true)\"></dr-button>\n<mat-datepicker #datePicker\n                class=\"dr-timeframe-datepicker\"\n                [calendarHeaderComponent]=\"customHeader\"\n                (yearSelected)=\"chosenPeriodHandler($event, timeframeOption.YEAR)\"\n                (monthSelected)=\"chosenPeriodHandler($event, timeframeOption.MONTH)\"\n                [panelClass]=\"datePickerService.isUsingDateTagPresets ? 'date-picker-preset-tag' : 'dr-timeframe-datepicker'\"\n                >\n</mat-datepicker>\n", styles: [":host{position:relative;width:100%;display:flex;flex-direction:row;min-height:32px;height:32px;font-size:14px;font-family:Poppins,sans-serif;background-color:#fff;border:1px solid #9EA1AA;border-radius:6px;color:#333;overflow:hidden;outline:none;cursor:pointer}:host:hover{border-color:#9ea1aa}:host.active,:host:focus-within{border-color:#4646ce!important;color:#333}:host.disabled{pointer-events:none;border:1px solid #AEABAC;background:#f0f1f4;color:#aeabac}:host.disabled:after{color:#aeabac}:host.ng-valid.ng-dirty{border-color:#037c5a}:host.ng-invalid.ng-dirty:not(:focus-within){border-color:#bf1d30!important}:host.ng-untouched.ng-valid{border-color:#9ea1aa}:host:after,:host:before{position:absolute;display:flex;border-color:#6D6E6F transparent transparent;color:#6d6e6f}:host:after{font-family:DataRails!important;content:\"\\ea13\";font-size:24px;color:#6d6e6f;top:0;bottom:0;right:8px;pointer-events:none;position:absolute;display:flex;align-items:center;justify-content:center}:host i{display:flex;align-items:center;position:absolute;color:#6d6e6f;left:8px;top:0;bottom:0}:host input{display:flex;flex-grow:1;height:100%;border:none;text-align:left;padding-left:35px;padding-right:25px;cursor:pointer!important;outline:none}:host input.when-quarter{position:absolute;visibility:hidden}:host input:disabled{border:none;color:#aeabac;background:transparent}:host input::-webkit-search-decoration,:host input::-webkit-search-cancel-button,:host input::-webkit-search-results-button,:host input::-webkit-search-results-decoration{-webkit-appearance:none}:host input::placeholder{color:#6d6e6f;font-size:14px;line-height:18px}::ng-deep .mat-datepicker-popup .mat-datepicker-content{margin:7px 0;box-shadow:0 4px 8px 1px #00000040;border-radius:12px!important}::ng-deep .mat-datepicker-popup .mat-datepicker-content button[disabled]{border:inherit;color:inherit;background-color:inherit}::ng-deep .mat-datepicker-popup .mat-datepicker-content button[disabled]:hover{border:inherit}::ng-deep .mat-datepicker-popup .cdk-keyboard-focused .mat-calendar-body-active>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical),::ng-deep .mat-datepicker-popup .cdk-program-focused .mat-calendar-body-active>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){background-color:#fff}::ng-deep .mat-datepicker-popup .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){background:#f2f2fb;color:#4646ce;font-weight:600}::ng-deep .mat-datepicker-popup .mat-calendar-body-selected{background-color:#4646ce;color:#f2f2fb;font-weight:600}::ng-deep .mat-datepicker-popup .mat-calendar-body-today.mat-calendar-body-selected{box-shadow:none}::ng-deep .mat-datepicker-popup .mat-button-focus-overlay{background:#f5f5f5}::ng-deep .mat-datepicker-popup .mat-calendar-controls .mat-icon-button:hover .mat-button-focus-overlay{opacity:1!important;background:#f5f5f5;transition:opacity .2s cubic-bezier(.35,0,.25,1)}::ng-deep .mat-datepicker-popup .mat-calendar-controls .mat-calendar-period-button:hover{background:#f5f5f5;transition:background .2s cubic-bezier(.35,0,.25,1)}::ng-deep .mat-datepicker-popup .mat-calendar-table-header th{font-size:14px;font-weight:600;color:#333}::ng-deep .mat-datepicker-popup .mat-calendar-table-header-divider{display:none}::ng-deep .mat-datepicker-popup .mat-calendar-body-label{color:#fff;padding:0}:host{border:none;display:flex;align-items:center}:host.disabled{background:transparent;color:#aeabac}:host.disabled.dr-date-picker-on-dashboard{border:none;padding:0 8px}:host.disabled.dr-date-picker-on-dashboard .dr-datepicker-input-container__formatted-value-display{text-decoration:none;color:#aeabac;font-weight:400}:host.disabled.dr-date-picker-on-dashboard .dr-datepicker-input-container i{color:#aeabac}:host.dr-date-picker-on-dashboard{width:-moz-fit-content;width:fit-content;justify-content:space-between}:host.dr-date-picker-on-dashboard mat-datepicker{position:absolute}:host.dr-date-picker-on-dashboard:after{visibility:hidden}:host.dr-date-picker-on-dashboard .dr-datepicker-input-container{display:flex;flex-direction:row;justify-content:center;align-items:center;margin-left:-10px}:host.dr-date-picker-on-dashboard .dr-datepicker-input-container__formatted-value-display{font-weight:600;width:auto;margin-left:5px}:host.dr-date-picker-on-dashboard .dr-datepicker-input-container .dr-icon-date{display:block;position:relative;top:0;margin-right:8px;color:#4e566c}:host .dr-datepicker-input-container input{visibility:hidden;position:absolute;width:100%}:host .dr-datepicker-input-container__formatted-value-display{width:90px;height:22px;padding-left:0;text-align:center;line-height:22px;color:#0c142b;text-decoration-line:underline}:host .dr-datepicker-input-container__formatted-value-display:hover{background-color:#f2f2fb;border-radius:5px;cursor:pointer;text-decoration-line:underline;color:#4646ce}::ng-deep .date-picker-preset-tag{width:386px!important}::ng-deep .date-picker-preset-tag .mat-calendar-content{padding-left:32px!important;padding-right:32px!important}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1$4.DateAdapter }, { type: DrDatePickerService }]; }, propDecorators: { isDashboardClassDisplayed: [{
                 type: HostBinding,
                 args: ['class.dr-date-picker-on-dashboard']
@@ -3228,6 +3233,120 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Output
             }] } });
+const noop = () => { };
+class DrDatePickerRangeComponent {
+    get defaultValue() {
+        return {
+            from: null,
+            to: null,
+        };
+    }
+    set disabled(val) {
+        this.setDisabledState(val);
+    }
+    get valueFrom() {
+        return this.innerValueFrom;
+    }
+    set valueFrom(v) {
+        if (v !== this.innerValueFrom) {
+            this.innerValueFrom = v;
+            this.innerValue.from = this.innerValueFrom;
+            this.onChangeCallback(this.innerValue);
+            this.cdr.markForCheck();
+        }
+    }
+    get valueTo() {
+        return this.innerValueTo;
+    }
+    set valueTo(v) {
+        if (v !== this.innerValueTo) {
+            this.innerValueTo = v;
+            this.innerValue.to = this.innerValueTo;
+            this.onChangeCallback(this.innerValue);
+            this.cdr.markForCheck();
+        }
+    }
+    constructor(cdr) {
+        this.cdr = cdr;
+        this.periodPositionFrom = DatePickerPeriodPosition.START_OF_PERIOD;
+        this.periodPositionTo = DatePickerPeriodPosition.END_OF_PERIOD;
+        this.labelFrom = 'From';
+        this.labelTo = 'To';
+        this.placeholderFrom = 'Select...';
+        this.placeholderTo = 'Select...';
+        this.onTouchedCallback = noop;
+        this.onChangeCallback = noop;
+        this.innerValue = this.defaultValue;
+        this.innerValueFrom = null;
+        this.innerValueTo = null;
+    }
+    registerOnChange(fn) {
+        this.onChangeCallback = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouchedCallback = fn;
+    }
+    /**
+     * Setting value from outside of component via ngModel or formControl updates
+     */
+    writeValue(value) {
+        if (!value) {
+            this.innerValue = this.defaultValue;
+            this.innerValueFrom = this.innerValue.from;
+            this.innerValueTo = this.innerValue.to;
+            this.cdr.markForCheck();
+        }
+        else if (value.from !== this.innerValue.from || value.to !== this.innerValue.to) {
+            this.innerValueFrom = value.from || null;
+            this.innerValueTo = value.to || null;
+            this.innerValue = {
+                from: this.innerValueFrom,
+                to: this.innerValueTo,
+            };
+            this.cdr.markForCheck();
+        }
+    }
+    setDisabledState(val) {
+        this._disabled = val;
+        this.cdr.markForCheck();
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DrDatePickerRangeComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DrDatePickerRangeComponent, selector: "dr-date-picker-range", inputs: { format: "format", periodPositionFrom: "periodPositionFrom", periodPositionTo: "periodPositionTo", labelFrom: "labelFrom", labelTo: "labelTo", placeholderFrom: "placeholderFrom", placeholderTo: "placeholderTo", disabled: "disabled", disabledFrom: "disabledFrom", disabledTo: "disabledTo", column: "column" }, host: { properties: { "class.column": "this.column" } }, providers: [
+            { provide: NG_VALUE_ACCESSOR, useExisting: DrDatePickerRangeComponent, multi: true }
+        ], ngImport: i0, template: "<div class=\"date-picker-range__from\">\n    <span *ngIf=\"labelFrom\" class=\"date-picker-range__from__label\">{{ labelFrom }}</span>\n    <dr-date-picker [(ngModel)]=\"valueFrom\"\n                    [format]=\"format\"\n                    [periodPosition]=\"periodPositionFrom\"\n                    [placeholder]=\"placeholderFrom\"\n                    [max]=\"valueTo\"\n                    [disabled]=\"_disabled || disabledFrom\">\n    </dr-date-picker>\n</div>\n<div class=\"date-picker-range__to\">\n    <span *ngIf=\"labelTo\" class=\"date-picker-range__to__label\">{{ labelTo }}</span>\n    <dr-date-picker [(ngModel)]=\"valueTo\"\n                    [format]=\"format\"\n                    [periodPosition]=\"periodPositionTo\"\n                    [placeholder]=\"placeholderTo\"\n                    [min]=\"valueFrom\"\n                    [disabled]=\"_disabled || disabledTo\">\n    </dr-date-picker>\n</div>\n", styles: [":host{display:flex;width:100%}:host.column{flex-direction:column}:host.column .date-picker-range__from{margin-right:0}:host .date-picker-range__from,:host .date-picker-range__to{display:flex;flex-direction:column}:host .date-picker-range__from__label,:host .date-picker-range__to__label{font-size:14px;font-weight:400;line-height:22px;margin-bottom:4px}:host .date-picker-range__from{margin-right:24px}\n"], dependencies: [{ kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: DrDatePickerComponent, selector: "dr-date-picker", inputs: ["format", "min", "max", "periodPosition", "placeholder", "disabled", "fiscalYearMonthsModifier", "datepickerFilter"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DrDatePickerRangeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'dr-date-picker-range', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        { provide: NG_VALUE_ACCESSOR, useExisting: DrDatePickerRangeComponent, multi: true }
+                    ], template: "<div class=\"date-picker-range__from\">\n    <span *ngIf=\"labelFrom\" class=\"date-picker-range__from__label\">{{ labelFrom }}</span>\n    <dr-date-picker [(ngModel)]=\"valueFrom\"\n                    [format]=\"format\"\n                    [periodPosition]=\"periodPositionFrom\"\n                    [placeholder]=\"placeholderFrom\"\n                    [max]=\"valueTo\"\n                    [disabled]=\"_disabled || disabledFrom\">\n    </dr-date-picker>\n</div>\n<div class=\"date-picker-range__to\">\n    <span *ngIf=\"labelTo\" class=\"date-picker-range__to__label\">{{ labelTo }}</span>\n    <dr-date-picker [(ngModel)]=\"valueTo\"\n                    [format]=\"format\"\n                    [periodPosition]=\"periodPositionTo\"\n                    [placeholder]=\"placeholderTo\"\n                    [min]=\"valueFrom\"\n                    [disabled]=\"_disabled || disabledTo\">\n    </dr-date-picker>\n</div>\n", styles: [":host{display:flex;width:100%}:host.column{flex-direction:column}:host.column .date-picker-range__from{margin-right:0}:host .date-picker-range__from,:host .date-picker-range__to{display:flex;flex-direction:column}:host .date-picker-range__from__label,:host .date-picker-range__to__label{font-size:14px;font-weight:400;line-height:22px;margin-bottom:4px}:host .date-picker-range__from{margin-right:24px}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { format: [{
+                type: Input
+            }], periodPositionFrom: [{
+                type: Input
+            }], periodPositionTo: [{
+                type: Input
+            }], labelFrom: [{
+                type: Input
+            }], labelTo: [{
+                type: Input
+            }], placeholderFrom: [{
+                type: Input
+            }], placeholderTo: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], disabledFrom: [{
+                type: Input
+            }], disabledTo: [{
+                type: Input
+            }], column: [{
+                type: HostBinding,
+                args: ['class.column']
+            }, {
+                type: Input
+            }] } });
 class TooltipInfoComponent {
     constructor() {
     }
@@ -6279,7 +6398,7 @@ class DialogModalWrapperComponent {
         this.destroy$.complete();
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DialogModalWrapperComponent, deps: [{ token: i1$6.MatLegacyDialogRef }, { token: DialogService }, { token: MAT_LEGACY_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DialogModalWrapperComponent, selector: "dr-dialog-modal-wrapper", host: { properties: { "class": "this.class" } }, ngImport: i0, template: "<div header class=\"header-dialog\">\n    <h1 class=\"title-dialog\" data-test=\"modalTitle\">\n        <i *ngIf=\"dialogData.headerIconClass\"\n           (click)=\"closeDialog()\"\n           class=\"title-dialog__icon\"\n           [class]=\"dialogData.headerIconClass\"\n           data-test=\"dialogTitleIcon\"></i>\n        <span class=\"title-dialog__text\">{{ dialogData.title }}</span>\n    </h1>\n    <i *ngIf=\"!dialogData.hideCloseBtn\" (click)=\"closeDialog()\" class=\"dr-icon-exit icon-close\"\n       data-test=\"xBtn\"></i>\n</div>\n<div *ngIf=\"dialogData.content\" class=\"content-dialog\">\n    <ng-container>{{ dialogData.content }}</ng-container>\n    <span #content class=\"content-anchor\"></span>\n</div>\n<form *ngIf=\"dialogData.fields\" [formGroup]=\"form\" class=\"dr-smart-from\">\n    <div [class]=\"dialogData.formWrapperClass || 'dr-smart-form_wrapper'\">\n        <div *ngFor=\"let field of dialogData.fields\"\n             class=\"dr-smart-form_group\"\n             [class]=\"field.formGroupClass\"\n             [ngStyle]=\"{ display: field.isLabelFullWidth ? 'block' : 'flex' }\">\n            <label *ngIf=\"field.label && field.type !== dialogFieldType.CHECKBOX\"\n                   [ngClass]=\"field.isLabelFullWidth ? 'col-md-12 mb-2' : 'col-md-2'\"\n                   class=\"label p-0 d-flex align-items-center\">{{ field.label }}</label>\n            <div class=\"input-group p-0\"\n                 [ngClass]=\"{ 'col-md-10': field.label && !field.isLabelFullWidth, 'col-md-12': !field.label || field.isLabelFullWidth }\">\n                <dr-select *ngIf=\"field.type === dialogFieldType.SELECT\"\n                           [searchable]=\"dialogData.searchable\"\n                           [clearable]=\"dialogData.clearable\"\n                           [formControlName]=\"field.name\"\n                           [bindLabel]=\"field.bindLabel || null\"\n                           [bindValue]=\"field.bindValue || null\"\n                           [selectedItem]=\"field.default\"\n                           [items]=\"field.items || (field.items$ | async)\"\n                           [loading]=\"fieldsItemsLoading[field.name] | async\"\n                           [required]=\"true\"\n                           [placeholder]=\"field.placeholder\">\n                    <ng-template *ngIf=\"dialogData?.footerTemplateData\" #optionFooterTemplate let-item=\"item\" let-close=\"close\">\n                        <button (click)=\"footerAction(); close();\" class=\"dr-select-footer__btn\">\n                            <i *ngIf=\"dialogData.footerTemplateData.icon\"\n                               class=\"{{ dialogData.footerTemplateData.icon }}\"></i>\n                            {{ dialogData.footerTemplateData.label }}</button>\n                    </ng-template>\n                </dr-select>\n                <dr-input *ngIf=\"field.type === dialogFieldType.INPUT\" data-test=\"modalInput\" class=\"form-control\"\n                          [formControlName]=\"field.name\" [placeholder]=\"field.placeholder\"></dr-input>\n                <dr-date-picker *ngIf=\"field.type === dialogFieldType.DATE_PICKER\"\n                                [formControlName]=\"field.name\"\n                                [format]=\"field.datePickerFormat\"\n                                [placeholder]=\"field.placeholder\"></dr-date-picker>\n                <dr-checkbox *ngIf=\"field.type === dialogFieldType.CHECKBOX\" [formControlName]=\"field.name\">\n                    {{ field.label }}\n                </dr-checkbox>\n                <label class=\"form-field-error-alert\" *ngIf=\"form.invalid && form.controls[field.name]?.dirty && form.controls[field.name]?.errors\">\n                    {{ form.controls[field.name].errors.errorString }}\n                </label>\n                <label class=\"form-error-alert\" *ngIf=\"dialogData.errorMessage && !form.pristine && form.invalid\">\n                    {{ dialogData.errorMessage }}\n                </label>\n                <label class=\"form-error-alert\"\n                       *ngIf=\"form.valid && showServerErrorMessage && dialogData.serverErrorMessage\">\n                    {{ dialogData.serverErrorMessage }}\n                </label>\n            </div>\n        </div>\n    </div>\n</form>\n\n<div footer class=\"footer-dialog\">\n    <div class=\"buttons-wrapper\" *ngIf=\"dialogData.cancelButton || dialogData.acceptButton\">\n        <dr-button (click)=\"onDecline()\"\n                    *ngIf=\"dialogData.customButton\"\n                    [theme]=\"dialogData.customButton?.theme || 'secondary'\"\n                    class=\"buttons-wrapper--custom-btn\"\n                    data-test=\"declineBtn\">{{ dialogData.customButton.label }}</dr-button>\n        <dr-button *ngIf=\"dialogData.cancelButton\" data-test=\"modalCloseBtn\" (click)=\"closeDialog()\"\n                   [theme]=\"'secondary'\">{{ dialogData.cancelButton.label }}</dr-button>\n        <dr-button *ngIf=\"dialogData.acceptButton\" data-test=\"modalAddBtn\" (click)=\"onAccept()\" [theme]=\"'primary'\"\n                   [isLoading]=\"isLoading\" [disabled]=\"form.invalid\">{{ dialogData.acceptButton.label }}</dr-button>\n    </div>\n</div>\n", styles: [":host{display:flex;justify-content:space-between;flex-direction:column}:host.small-modal,:host.small-modal-max-height{min-height:188px;max-height:467px;min-width:400px;max-width:400px}:host.medium-modal,:host.medium-modal-max-height{min-height:188px;max-height:467px;min-width:632px;max-width:632px}:host.medium-small-modal{min-height:188px;max-height:345px;min-width:460px;max-width:460px}:host.medium-modal-max-height,:host.small-modal-max-height{max-height:80vh}.header-dialog{position:relative;display:flex;flex-direction:row;justify-content:space-between;align-items:center;padding:16px 56px 16px 32px;border-bottom:1px solid #DFE0E3}.header-dialog>.icon-close{position:absolute;right:32px;top:16px;cursor:pointer}.title-dialog{display:flex;color:#333;position:static;font-weight:600;font-size:16px;line-height:24px;margin-top:0;margin-bottom:0}.title-dialog__icon{font-size:32px;margin-right:8px;line-height:24px;color:#6d6e6f}.content-dialog{font-weight:400;font-size:14px;padding:16px 32px 5px;white-space:pre-line}.icon-close{color:#6d6e6f;cursor:pointer}.dr-smart-from{font-size:14px;font-weight:400;line-height:22px;padding:16px 32px 22px}.dr-smart-from dr-checkbox{font-weight:400}.content-dialog{padding:16px 32px 0;font-weight:400;font-size:14px;line-height:22px}.content-anchor{display:none}.footer-dialog{border-top:1px solid #DFE0E3}.buttons-wrapper{display:flex;justify-content:flex-end;padding:10px 32px 11px}.buttons-wrapper dr-button:nth-of-type(n+2){margin-left:12px}.buttons-wrapper--custom-btn{margin-right:auto}.form-field-error-alert{font-size:12px;color:#bf1d30;line-height:20px}.form-error-alert{position:absolute;margin-top:5px;font-size:12px;color:#bf1d30}.dr-select-footer__btn{background-color:transparent;display:flex;align-items:center;justify-content:flex-start;cursor:pointer;min-width:15rem;font-style:normal;font-weight:400;font-size:14px;line-height:24px;clear:both;width:100%;white-space:nowrap;padding:0 12px;height:36px;flex-shrink:0}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: DrButtonComponent, selector: "dr-button", inputs: ["theme", "icon", "iconColor", "iconSize", "iconAfter", "iconAfterColor", "iconAfterSize", "disabled", "isLoading", "isActive"] }, { kind: "component", type: CheckboxComponent, selector: "dr-checkbox", inputs: ["checkedStatus", "disabled", "icon", "indeterminate"], outputs: ["checkedChange"] }, { kind: "component", type: DrInputComponent, selector: "dr-input", inputs: ["disabled", "buttonOptions", "type", "name", "placeholder", "readonly", "clearable", "min", "max", "minLength", "maxlength", "step", "searchMini"], outputs: ["blur", "modelDebounceChange", "searchHandler", "clearHandler", "buttonHandler"] }, { kind: "component", type: DrSelectComponent, selector: "dr-select", inputs: ["className", "items", "addTag", "appendTo", "bindLabel", "bindValue", "clearable", "searchable", "searchFn", "multiple", "hideSelected", "placeholder", "loading", "loadingText", "readonly", "disabled", "groupBy", "optionWithDescription", "id", "keyDownFn", "selectedItem", "dropdownClass", "closeOnSelect", "textView", "autofocus", "isOpen"], outputs: ["change", "open", "closeUp"] }, { kind: "component", type: DrDatePickerComponent, selector: "dr-date-picker", inputs: ["format", "min", "max", "periodPosition", "placeholder", "disabled", "fiscalYearMonthsModifier", "datepickerFilter"] }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DialogModalWrapperComponent, selector: "dr-dialog-modal-wrapper", host: { properties: { "class": "this.class" } }, ngImport: i0, template: "<div header class=\"header-dialog\">\n    <h1 class=\"title-dialog\" data-test=\"modalTitle\">\n        <i *ngIf=\"dialogData.headerIconClass\"\n           (click)=\"closeDialog()\"\n           class=\"title-dialog__icon\"\n           [class]=\"dialogData.headerIconClass\"\n           data-test=\"dialogTitleIcon\"></i>\n        <span class=\"title-dialog__text\">{{ dialogData.title }}</span>\n    </h1>\n    <i *ngIf=\"!dialogData.hideCloseBtn\" (click)=\"closeDialog()\" class=\"dr-icon-exit icon-close\"\n       data-test=\"xBtn\"></i>\n</div>\n<div *ngIf=\"dialogData.content\" class=\"content-dialog\">\n    <ng-container>{{ dialogData.content }}</ng-container>\n    <span #content class=\"content-anchor\"></span>\n</div>\n<form *ngIf=\"dialogData.fields\" [formGroup]=\"form\" class=\"dr-smart-from\">\n    <div [class]=\"dialogData.formWrapperClass || 'dr-smart-form_wrapper'\">\n        <div *ngFor=\"let field of dialogData.fields\"\n             class=\"dr-smart-form_group\"\n             [class]=\"field.formGroupClass\"\n             [ngStyle]=\"{ display: field.isLabelFullWidth ? 'block' : 'flex' }\">\n            <label *ngIf=\"field.label && field.type !== dialogFieldType.CHECKBOX\"\n                   [ngClass]=\"field.isLabelFullWidth ? 'col-md-12 mb-2' : 'col-md-2'\"\n                   class=\"label p-0 d-flex align-items-center\">{{ field.label }}</label>\n            <div class=\"input-group p-0\"\n                 [ngClass]=\"{ 'col-md-10': field.label && !field.isLabelFullWidth, 'col-md-12': !field.label || field.isLabelFullWidth }\">\n                <dr-select *ngIf=\"field.type === dialogFieldType.SELECT\"\n                           [searchable]=\"dialogData.searchable\"\n                           [clearable]=\"dialogData.clearable\"\n                           [formControlName]=\"field.name\"\n                           [bindLabel]=\"field.bindLabel || null\"\n                           [bindValue]=\"field.bindValue || null\"\n                           [selectedItem]=\"field.default\"\n                           [items]=\"field.items || (field.items$ | async)\"\n                           [loading]=\"fieldsItemsLoading[field.name] | async\"\n                           [required]=\"true\"\n                           [placeholder]=\"field.placeholder\">\n                    <ng-template *ngIf=\"dialogData?.footerTemplateData\" #optionFooterTemplate let-item=\"item\" let-close=\"close\">\n                        <button (click)=\"footerAction(); close();\" class=\"dr-select-footer__btn\">\n                            <i *ngIf=\"dialogData.footerTemplateData.icon\"\n                               class=\"{{ dialogData.footerTemplateData.icon }}\"></i>\n                            {{ dialogData.footerTemplateData.label }}</button>\n                    </ng-template>\n                </dr-select>\n                <dr-input *ngIf=\"field.type === dialogFieldType.INPUT\" data-test=\"modalInput\" class=\"form-control\"\n                          [formControlName]=\"field.name\" [placeholder]=\"field.placeholder\"></dr-input>\n                <dr-date-picker *ngIf=\"field.type === dialogFieldType.DATE_PICKER\"\n                                [formControlName]=\"field.name\"\n                                [format]=\"field.datePickerFormat\"\n                                [placeholder]=\"field.placeholder\"></dr-date-picker>\n                <dr-checkbox *ngIf=\"field.type === dialogFieldType.CHECKBOX\" [formControlName]=\"field.name\">\n                    {{ field.label }}\n                </dr-checkbox>\n                <label class=\"form-field-error-alert\" *ngIf=\"form.invalid && form.controls[field.name]?.dirty && form.controls[field.name]?.errors\">\n                    {{ form.controls[field.name].errors.errorString }}\n                </label>\n                <label class=\"form-error-alert\" *ngIf=\"dialogData.errorMessage && !form.pristine && form.invalid\">\n                    {{ dialogData.errorMessage }}\n                </label>\n                <label class=\"form-error-alert\"\n                       *ngIf=\"form.valid && showServerErrorMessage && dialogData.serverErrorMessage\">\n                    {{ dialogData.serverErrorMessage }}\n                </label>\n            </div>\n        </div>\n    </div>\n</form>\n\n<div footer class=\"footer-dialog\">\n    <div class=\"buttons-wrapper\" *ngIf=\"dialogData.cancelButton || dialogData.acceptButton\">\n        <dr-button (click)=\"onDecline()\"\n                    *ngIf=\"dialogData.customButton\"\n                    [theme]=\"dialogData.customButton?.theme || 'secondary'\"\n                    class=\"buttons-wrapper--custom-btn\"\n                    data-test=\"declineBtn\">{{ dialogData.customButton.label }}</dr-button>\n        <dr-button *ngIf=\"dialogData.cancelButton\" data-test=\"modalCloseBtn\" (click)=\"closeDialog()\"\n                   [theme]=\"'secondary'\">{{ dialogData.cancelButton.label }}</dr-button>\n        <dr-button *ngIf=\"dialogData.acceptButton\" data-test=\"modalAddBtn\" (click)=\"onAccept()\" [theme]=\"'primary'\"\n                   [isLoading]=\"isLoading\" [disabled]=\"form.invalid\">{{ dialogData.acceptButton.label }}</dr-button>\n    </div>\n</div>\n", styles: [":host{display:flex;justify-content:space-between;flex-direction:column}:host.small-modal,:host.small-modal-max-height{min-height:188px;max-height:467px;min-width:400px;max-width:400px}:host.medium-modal,:host.medium-modal-max-height{min-height:188px;max-height:467px;min-width:632px;max-width:632px}:host.medium-small-modal{min-height:188px;max-height:345px;min-width:460px;max-width:460px}:host.medium-modal-max-height,:host.small-modal-max-height{max-height:80vh}.header-dialog{position:relative;display:flex;flex-direction:row;justify-content:space-between;align-items:center;padding:16px 56px 16px 32px;border-bottom:1px solid #DFE0E3}.header-dialog>.icon-close{position:absolute;right:32px;top:16px;cursor:pointer}.title-dialog{display:flex;color:#333;position:static;font-weight:600;font-size:16px;line-height:24px;margin-top:0;margin-bottom:0}.title-dialog__icon{font-size:32px;margin-right:8px;line-height:24px;color:#6d6e6f}.content-dialog{font-weight:400;font-size:14px;padding:16px 32px 5px;white-space:pre-line}.icon-close{color:#6d6e6f;cursor:pointer}.dr-smart-from{font-size:14px;font-weight:400;line-height:22px;padding:16px 32px 22px}.dr-smart-from dr-checkbox{font-weight:400}.content-dialog{padding:16px 32px 0;font-weight:400;font-size:14px;line-height:22px}.content-anchor{display:none}.footer-dialog{border-top:1px solid #DFE0E3}.buttons-wrapper{display:flex;justify-content:flex-end;padding:10px 32px 11px}.buttons-wrapper dr-button:nth-of-type(n+2){margin-left:12px}.buttons-wrapper--custom-btn{margin-right:auto}.form-field-error-alert{font-size:12px;color:#bf1d30;line-height:20px}.form-error-alert{position:absolute;margin-top:5px;font-size:12px;color:#bf1d30}.dr-select-footer__btn{background-color:transparent;display:flex;align-items:center;justify-content:flex-start;cursor:pointer;min-width:15rem;font-style:normal;font-weight:400;font-size:14px;line-height:24px;clear:both;width:100%;white-space:nowrap;padding:0 12px;height:36px;flex-shrink:0}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: DrButtonComponent, selector: "dr-button", inputs: ["theme", "icon", "iconColor", "iconSize", "iconAfter", "iconAfterColor", "iconAfterSize", "disabled", "isLoading", "isActive"] }, { kind: "component", type: CheckboxComponent, selector: "dr-checkbox", inputs: ["checkedStatus", "disabled", "icon", "indeterminate", "textNowrap"], outputs: ["checkedChange"] }, { kind: "component", type: DrInputComponent, selector: "dr-input", inputs: ["disabled", "buttonOptions", "type", "name", "placeholder", "readonly", "clearable", "min", "max", "minLength", "maxlength", "step", "searchMini"], outputs: ["blur", "modelDebounceChange", "searchHandler", "clearHandler", "buttonHandler"] }, { kind: "component", type: DrSelectComponent, selector: "dr-select", inputs: ["className", "items", "addTag", "appendTo", "bindLabel", "bindValue", "clearable", "searchable", "searchFn", "multiple", "hideSelected", "placeholder", "loading", "loadingText", "readonly", "disabled", "groupBy", "optionWithDescription", "id", "keyDownFn", "selectedItem", "dropdownClass", "closeOnSelect", "textView", "autofocus", "isOpen"], outputs: ["change", "open", "closeUp"] }, { kind: "component", type: DrDatePickerComponent, selector: "dr-date-picker", inputs: ["format", "min", "max", "periodPosition", "placeholder", "disabled", "fiscalYearMonthsModifier", "datepickerFilter"] }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DialogModalWrapperComponent, decorators: [{
             type: Component,
@@ -7308,6 +7427,7 @@ const components$2 = [
     DrDatePickerWithTimeframeComponent,
     DrDatePickerFormatDirective,
     DrDatePickerCustomHeaderComponent,
+    DrDatePickerRangeComponent,
     DrModelDebounceChangeDirective,
     DrShowTimeframePipe,
     DrSelectAddItemComponent
@@ -7326,6 +7446,7 @@ class DrInputsModule {
             DrDatePickerWithTimeframeComponent,
             DrDatePickerFormatDirective,
             DrDatePickerCustomHeaderComponent,
+            DrDatePickerRangeComponent,
             DrModelDebounceChangeDirective,
             DrShowTimeframePipe,
             DrSelectAddItemComponent], imports: [FormsModule,
@@ -7347,6 +7468,7 @@ class DrInputsModule {
             DrDatePickerWithTimeframeComponent,
             DrDatePickerFormatDirective,
             DrDatePickerCustomHeaderComponent,
+            DrDatePickerRangeComponent,
             DrModelDebounceChangeDirective,
             DrShowTimeframePipe,
             DrSelectAddItemComponent] }); }
@@ -8024,5 +8146,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  * Generated bundle index. Do not edit.
  */
-export { AnyTagComponent, BadgeStatus, CHAT_MESSAGE_TYPE, CalendarView, ChatMessage, ChatRole, CheckboxComponent, ClickOutsideDirective, ClickOutsideModule, CustomDateFormat, DIALOG_BUTTON_LABEL, DIALOG_FIELD_TYPE, DIALOG_SIZE, DateFromats, DatePickerPeriodPosition, DateTagComponent, DateTagModule, DateTags, DayTagComponent, DefaultToastrComponent, DefaultTreeviewEventParser, DefaultTreeviewI18n, DialogModalWrapperComponent, DialogService, DialogWrapperComponent, DownlineTreeviewEventParser, DrAccordionComponent, DrAccordionItemBodyComponent, DrAccordionItemComponent, DrAccordionItemHeaderComponent, DrAccordionModule, DrAlertComponent, DrAlertModule, DrAlertTheme, DrAvatarComponent, DrAvatarModule, DrAvatarPipe, DrAvatarService, DrBadgeStatusComponent, DrBadgeStatusModule, DrButtonComponent, DrChatAlertComponent, DrChatComponent, DrChatCustomMessageDirective, DrChatFormComponent, DrChatMessageComponent, DrChatMessageFileComponent, DrChatMessageTextComponent, DrChatModule, DrChatSuggestionsComponent, DrDatePickerComponent, DrDatePickerCustomHeaderComponent, DrDatePickerFormatDirective, DrDatePickerWithTimeframeComponent, DrDetailsListComponent, DrDetailsListModule, DrDialogModule, DrDotFlashingComponent, DrDropdownComponent, DrDropdownDirective, DrDropdownItemShowPipe, DrDropdownModule, DrDropdownPositionDirective, DrDropdownService, DrErrorComponent, DrErrorModule, DrInputComponent, DrInputsModule, DrLayoutBodyComponent, DrLayoutComponent, DrLayoutHeaderComponent, DrLayoutModule, DrModelDebounceChangeDirective, DrPopoverAlignmentDimension, DrPopoverComponent, DrPopoverDirective, DrPopoverModule, DrPopoverRef, DrPopoverService, DrScenarioConfigurationComponent, DrScenarioModule, DrScenarioTagConfigurationComponent, DrSelectAddItemComponent, DrSelectComponent, DrSharedUtils, DrShowTimeframePipe, DrSpinnerComponent, DrSpinnerDirective, DrSpinnerModule, DrStepperModule, DrTabComponent, DrTabsComponent, DrTabsModule, DrTagComponent, DrTagModule, DrTagsConstructorComponent, DrTagsConstructorModule, DrToastrModule, DrToastrService, DrToggleButtonComponent, DrToggleComponent, DrTooltipDirective, DrTooltipModule, FeedbackSentiment, ForecastTagComponent, IMAGE_TYPES, ListTagComponent, ListTagModule, MonthTagComponent, OrderDownlineTreeviewEventParser, QuarterTagComponent, RadioButtonComponent, RadioGroupComponent, Scenario, ScenarioService, StepperComponent, TagTypes, TagsConfigSubType, TagsConstructorService, TimeframeOption, ToastrStatus, ToastrStatusIcon, ToggleButtonMode, TooltipComponent, TooltipInfoComponent, TooltipInfoSimpleComponent, TooltipNoBodyComponent, TooltipPosition, TooltipProcessDefaultComponent, TooltipTheme, TreeviewComponent, TreeviewConfig, TreeviewEventParser, TreeviewHelper, TreeviewI18n, TreeviewItem, TreeviewModule, TreeviewPipe, WeekTagComponent, YearTagComponent };
+export { AnyTagComponent, BadgeStatus, CHAT_MESSAGE_TYPE, CalendarView, ChatMessage, ChatRole, CheckboxComponent, ClickOutsideDirective, ClickOutsideModule, CustomDateFormat, DIALOG_BUTTON_LABEL, DIALOG_FIELD_TYPE, DIALOG_SIZE, DateFromats, DatePickerPeriodPosition, DateTagComponent, DateTagModule, DateTags, DayTagComponent, DefaultToastrComponent, DefaultTreeviewEventParser, DefaultTreeviewI18n, DialogModalWrapperComponent, DialogService, DialogWrapperComponent, DownlineTreeviewEventParser, DrAccordionComponent, DrAccordionItemBodyComponent, DrAccordionItemComponent, DrAccordionItemHeaderComponent, DrAccordionModule, DrAlertComponent, DrAlertModule, DrAlertTheme, DrAvatarComponent, DrAvatarModule, DrAvatarPipe, DrAvatarService, DrBadgeStatusComponent, DrBadgeStatusModule, DrButtonComponent, DrChatAlertComponent, DrChatComponent, DrChatCustomMessageDirective, DrChatFormComponent, DrChatMessageComponent, DrChatMessageFileComponent, DrChatMessageTextComponent, DrChatModule, DrChatSuggestionsComponent, DrDatePickerComponent, DrDatePickerCustomHeaderComponent, DrDatePickerFormatDirective, DrDatePickerRangeComponent, DrDatePickerWithTimeframeComponent, DrDetailsListComponent, DrDetailsListModule, DrDialogModule, DrDotFlashingComponent, DrDropdownComponent, DrDropdownDirective, DrDropdownItemShowPipe, DrDropdownModule, DrDropdownPositionDirective, DrDropdownService, DrErrorComponent, DrErrorModule, DrInputComponent, DrInputsModule, DrLayoutBodyComponent, DrLayoutComponent, DrLayoutHeaderComponent, DrLayoutModule, DrModelDebounceChangeDirective, DrPopoverAlignmentDimension, DrPopoverComponent, DrPopoverDirective, DrPopoverModule, DrPopoverRef, DrPopoverService, DrScenarioConfigurationComponent, DrScenarioModule, DrScenarioTagConfigurationComponent, DrSelectAddItemComponent, DrSelectComponent, DrSharedUtils, DrShowTimeframePipe, DrSpinnerComponent, DrSpinnerDirective, DrSpinnerModule, DrStepperModule, DrTabComponent, DrTabsComponent, DrTabsModule, DrTagComponent, DrTagModule, DrTagsConstructorComponent, DrTagsConstructorModule, DrToastrModule, DrToastrService, DrToggleButtonComponent, DrToggleComponent, DrTooltipDirective, DrTooltipModule, FeedbackSentiment, ForecastTagComponent, IMAGE_TYPES, ListTagComponent, ListTagModule, MonthTagComponent, OrderDownlineTreeviewEventParser, QuarterTagComponent, RadioButtonComponent, RadioGroupComponent, Scenario, ScenarioService, StepperComponent, TagTypes, TagsConfigSubType, TagsConstructorService, TimeframeOption, ToastrStatus, ToastrStatusIcon, ToggleButtonMode, TooltipComponent, TooltipInfoComponent, TooltipInfoSimpleComponent, TooltipNoBodyComponent, TooltipPosition, TooltipProcessDefaultComponent, TooltipTheme, TreeviewComponent, TreeviewConfig, TreeviewEventParser, TreeviewHelper, TreeviewI18n, TreeviewItem, TreeviewModule, TreeviewPipe, WeekTagComponent, YearTagComponent };
 //# sourceMappingURL=datarailsshared-datarailsshared.mjs.map