@datarailsshared/datarailsshared 1.4.112 → 1.4.114

package/bundles/datarailsshared-datarailsshared.umd.js

@@ -589,7 +589,7 @@
             monthYearA11yLabel: 'MMMM YYYY'
         },
     };
-    var ɵ0$7 = MONTH_FORMATS;
+    var ɵ0$8 = MONTH_FORMATS;
     var MonthTagComponent = /** @class */ (function (_super) {
         __extends(MonthTagComponent, _super);
         function MonthTagComponent() {
@@ -651,7 +651,7 @@
                             useClass: materialMomentAdapter.MomentDateAdapter,
                             deps: [core.MAT_DATE_LOCALE, materialMomentAdapter.MAT_MOMENT_DATE_ADAPTER_OPTIONS],
                         },
-                        { provide: core.MAT_DATE_FORMATS, useValue: ɵ0$7 },
+                        { provide: core.MAT_DATE_FORMATS, useValue: ɵ0$8 },
                     ]
                 },] }
     ];
@@ -787,7 +787,7 @@
             monthYearA11yLabel: 'MMMM YYYY'
         },
     };
-    var ɵ0$6 = WEEK_FORMATS;
+    var ɵ0$7 = WEEK_FORMATS;
     var WeekTagComponent = /** @class */ (function (_super) {
         __extends(WeekTagComponent, _super);
         function WeekTagComponent() {
@@ -887,7 +887,7 @@
                             useClass: materialMomentAdapter.MomentDateAdapter,
                             deps: [core.MAT_DATE_LOCALE, materialMomentAdapter.MAT_MOMENT_DATE_ADAPTER_OPTIONS],
                         },
-                        { provide: core.MAT_DATE_FORMATS, useValue: ɵ0$6 },
+                        { provide: core.MAT_DATE_FORMATS, useValue: ɵ0$7 },
                     ]
                 },] }
     ];
@@ -909,7 +909,7 @@
             monthYearA11yLabel: 'MMMM YYYY'
         },
     };
-    var ɵ0$5 = YEAR_FORMATS;
+    var ɵ0$6 = YEAR_FORMATS;
     var YearTagComponent = /** @class */ (function (_super) {
         __extends(YearTagComponent, _super);
         function YearTagComponent() {
@@ -977,7 +977,7 @@
                             useClass: materialMomentAdapter.MomentDateAdapter,
                             deps: [core.MAT_DATE_LOCALE, materialMomentAdapter.MAT_MOMENT_DATE_ADAPTER_OPTIONS],
                         },
-                        { provide: core.MAT_DATE_FORMATS, useValue: ɵ0$5 },
+                        { provide: core.MAT_DATE_FORMATS, useValue: ɵ0$6 },
                     ]
                 },] }
     ];
@@ -1093,7 +1093,7 @@
             monthYearA11yLabel: 'MMMM YYYY'
         },
     };
-    var ɵ0$4 = DAY_FORMATS;
+    var ɵ0$5 = DAY_FORMATS;
     var DayTagComponent = /** @class */ (function (_super) {
         __extends(DayTagComponent, _super);
         function DayTagComponent() {
@@ -1147,7 +1147,7 @@
                             useClass: materialMomentAdapter.MomentDateAdapter,
                             deps: [core.MAT_DATE_LOCALE, materialMomentAdapter.MAT_MOMENT_DATE_ADAPTER_OPTIONS],
                         },
-                        { provide: core.MAT_DATE_FORMATS, useValue: ɵ0$4 },
+                        { provide: core.MAT_DATE_FORMATS, useValue: ɵ0$5 },
                     ]
                 },] }
     ];
@@ -2005,27 +2005,42 @@
         unsetMouseOn: [{ type: i0.HostListener, args: ['mouseleave',] }]
     };
 
+    var getOverlayPosition = function (position) { return (Object.assign({}, POPUP_POSITIONS[position])); };
+    var ɵ0$4 = getOverlayPosition;
     var DrTooltipDirective = /** @class */ (function () {
         function DrTooltipDirective(overlay, overlayPositionBuilder, elementRef) {
             this.overlay = overlay;
             this.overlayPositionBuilder = overlayPositionBuilder;
             this.elementRef = elementRef;
             this.contentContext = {};
-            this.position = 'top';
+            this._position = 'top';
             this.class = '';
             // is used for preserve tooltip from being hidden for N milliseconds
             this.drTooltipMousleaveTimeout = 0;
+            this.overlayPosition = getOverlayPosition(this.position);
         }
+        Object.defineProperty(DrTooltipDirective.prototype, "position", {
+            get: function () {
+                return this._position;
+            },
+            set: function (value) {
+                this._position = value;
+                this.overlayPosition = getOverlayPosition(value);
+            },
+            enumerable: false,
+            configurable: true
+        });
         Object.defineProperty(DrTooltipDirective.prototype, "drTooltipOptions", {
             set: function (options) {
                 if (options === null || options === void 0 ? void 0 : options.indent) {
-                    var position = POPUP_POSITIONS[this.position];
-                    if (position.offsetY) {
+                    var position = getOverlayPosition(this.position);
+                    if (position === null || position === void 0 ? void 0 : position.offsetY) {
                         position.offsetY = position.offsetY < 0 ? -options.indent : options.indent;
                     }
-                    if (position.offsetX) {
+                    if (position === null || position === void 0 ? void 0 : position.offsetX) {
                         position.offsetX = position.offsetX < 0 ? -options.indent : options.indent;
                     }
+                    this.overlayPosition = position;
                 }
                 this.options = options;
             },
@@ -2088,7 +2103,7 @@
             }
         };
         DrTooltipDirective.prototype.createOverlay = function () {
-            var positionStrategy = this.overlayPositionBuilder.flexibleConnectedTo(this.elementRef).withPositions([POPUP_POSITIONS[this.position]]);
+            var positionStrategy = this.overlayPositionBuilder.flexibleConnectedTo(this.elementRef).withPositions([this.overlayPosition]);
             this.overlayRef = this.overlay.create({ positionStrategy: positionStrategy });
         };
         DrTooltipDirective.prototype.renderTooltip = function () {
@@ -2424,7 +2439,7 @@
     DrButtonComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'dr-button',
-                    template: "<button (click)=\"onClick($event)\" [disabled]=\"_disabled\" [attr.is-loading]=\"_isLoading\" [attr.bold]=\"isBold\"\n        [attr.icon]=\"!!icon\" [attr.iconAfterLabel]=\"!!iconAfterLabel\" [attr.theme]=\"theme\">\n    <ng-container *ngIf=\"!_isLoading\">\n        <i *ngIf=\"icon\" class=\"dr\" [class]=\"icon\" [style.color]=\"iconColor || 'inherit'\"></i>\n        <ng-content></ng-content>\n        <i *ngIf=\"theme === 'dropdown'\" class=\"dr-icon-arrow-down\"></i>\n        <i *ngIf=\"iconAfterLabel\" class=\"dr dr-last\" [class]=\"iconAfterLabel\"\n           [style.color]=\"iconColor || 'inherit'\"></i>\n    </ng-container>\n    <i *ngIf=\"_isLoading\" class=\"dr dr-spinner dr-icon-load\"></i>\n</button>\n",
+                    template: "<button (click)=\"onClick($event)\" [disabled]=\"_disabled\" [attr.is-loading]=\"_isLoading\" [attr.bold]=\"isBold\"\n        [attr.icon]=\"!!icon\" [attr.iconAfterLabel]=\"!!iconAfterLabel\" [attr.theme]=\"theme\">\n    <ng-container *ngIf=\"!_isLoading\">\n        <i *ngIf=\"icon\" class=\"dr\" [class]=\"icon\" [style.font-size]=\"iconSize || '24px'\" [style.color]=\"iconColor || 'inherit'\"></i>\n        <ng-content></ng-content>\n        <i *ngIf=\"theme === 'dropdown'\" class=\"dr-icon-arrow-down\"></i>\n        <i *ngIf=\"iconAfterLabel\" class=\"dr dr-last\" [class]=\"iconAfterLabel\"\n           [style.color]=\"iconColor || 'inherit'\"></i>\n    </ng-container>\n    <i *ngIf=\"_isLoading\" class=\"dr dr-spinner dr-icon-load\"></i>\n</button>\n",
                     styles: [":host{display:inline-block}:host.disabled,:host.loading{pointer-events:none}:host button[theme]{cursor:pointer;border-radius:16px;padding:5px 16px;font-family:\"Poppins\";font-style:normal;font-weight:400;font-size:14px;line-height:22px;color:#4e566c;border:1px solid #7f7fdd;display:flex;justify-content:space-between;align-items:center;height:32px}:host button[theme] .dr{padding:0;margin-left:5.35px;margin-right:8.64px}:host button[theme] .dr-spinner{animation-name:rotate;animation-iteration-count:infinite;animation-duration:1s}@keyframes rotate{0%{transform:rotate()}to{transform:rotate(360deg)}}:host button[theme][theme~=split-secondary-first],:host button[theme][theme~=split-secondary-last],:host button[theme][theme~=secondary]{padding:5px 16px;background:#ffffff;border-radius:16px;min-width:90px}:host button[theme][theme~=split-secondary-first]:hover:not([disabled]),:host button[theme][theme~=split-secondary-last]:hover:not([disabled]),:host button[theme][theme~=secondary]:hover:not([disabled]){color:#4e566c;transition:.2ms ease-in all;background:#f2f2fb;box-shadow:0 4px 14px #0000001a;border:1px solid #4646ce}:host button[theme][theme~=split-secondary-first]:active,:host button[theme][theme~=split-secondary-last]:active,:host button[theme][theme~=secondary]:active{box-shadow:none;background:#f2f2fb}:host button[theme][theme~=split-secondary-first][disabled],:host button[theme][theme~=split-secondary-last][disabled],:host button[theme][theme~=secondary][disabled]{background:#f0f1f4;color:#727583;border:none;cursor:default;pointer-events:none}:host button[theme][theme~=split-secondary-first][is-loading=true],:host button[theme][theme~=split-secondary-last][is-loading=true],:host button[theme][theme~=secondary][is-loading=true]{justify-content:center;padding:5px 16px;pointer-events:none}:host button[theme][theme~=split-primary-first],:host button[theme][theme~=split-primary-last],:host button[theme][theme~=primary]{background:#4646ce;color:#fff;border:none;min-width:90px}:host button[theme][theme~=split-primary-first]:hover:not([disabled]),:host button[theme][theme~=split-primary-last]:hover:not([disabled]),:host button[theme][theme~=primary]:hover:not([disabled]){transition:.2ms ease-in all;background:linear-gradient(96.89deg,#25258c 0%,#4646ce 100%);box-shadow:0 4px 14px #0000001a;border:none}:host button[theme][theme~=split-primary-first]:active,:host button[theme][theme~=split-primary-last]:active,:host button[theme][theme~=primary]:active{background:#25258c}:host button[theme][theme~=split-primary-first][disabled],:host button[theme][theme~=split-primary-last][disabled],:host button[theme][theme~=primary][disabled]{background:#f0f1f4;color:#727583;border:none;cursor:default;pointer-events:none}:host button[theme][theme~=split-primary-first][is-loading=true],:host button[theme][theme~=split-primary-last][is-loading=true],:host button[theme][theme~=primary][is-loading=true]{justify-content:center;padding:5px 16px;pointer-events:none}:host button[theme][theme~=split-primary-first] .dr,:host button[theme][theme~=split-primary-last] .dr,:host button[theme][theme~=primary] .dr{margin:0}:host button[theme][theme~=split-secondary-first],:host button[theme][theme~=split-secondary-first]:hover,:host button[theme][theme~=split-primary-first],:host button[theme][theme~=split-primary-first]:hover{min-width:unset;border-bottom-right-radius:0;border-top-right-radius:0}:host button[theme][theme~=split-secondary-first][icon=true],:host button[theme][theme~=split-secondary-first]:hover[icon=true],:host button[theme][theme~=split-primary-first][icon=true],:host button[theme][theme~=split-primary-first]:hover[icon=true]{padding-left:6px;padding-right:2px}:host button[theme][theme~=split-secondary-first],:host button[theme][theme~=split-secondary-first]:hover{padding-left:10px;padding-right:8px}:host button[theme][theme~=split-secondary-first][icon=true]{padding-left:6px;padding-right:2px}:host button[theme][theme~=split-primary-first],:host button[theme][theme~=split-primary-first]:hover{padding-left:12px;padding-right:9px}:host button[theme][theme~=split-primary-first],:host button[theme][theme~=split-primary-first]:hover{border-right:1px solid #fff!important}:host button[theme][theme~=split-secondary-first],:host button[theme][theme~=split-secondary-first]:hover{border-right:none!important}:host button[theme][theme~=split-secondary-last],:host button[theme][theme~=split-secondary-last]:hover,:host button[theme][theme~=split-primary-last],:host button[theme][theme~=split-primary-last]:hover{min-width:unset;border-bottom-left-radius:0;border-top-left-radius:0}:host button[theme][theme~=split-secondary-last] .dr,:host button[theme][theme~=split-secondary-last]:hover .dr,:host button[theme][theme~=split-primary-last] .dr,:host button[theme][theme~=split-primary-last]:hover .dr{margin:0}:host button[theme][theme~=split-secondary-last],:host button[theme][theme~=split-secondary-last]:hover{padding-left:8px;padding-right:10px}:host button[theme][theme~=split-secondary-last][icon=true],:host button[theme][theme~=split-secondary-last]:hover[icon=true]{padding-left:2px;padding-right:6px}:host button[theme][theme~=split-primary-last]{padding-left:9px;padding-right:12px}:host button[theme][theme~=split-primary-last][icon=true]{padding-left:1px!important;padding-right:6px}:host button[theme][theme~=split-primary-last]:hover{padding-left:9px;padding-right:12px}:host button[theme][theme~=split-primary-last]:hover[icon=true]{padding-left:1px!important;padding-right:6px}:host button[theme][theme~=split-secondary-last],:host button[theme][theme~=split-secondary-last]:hover{margin-left:-1px}:host button[theme][theme~=danger]{background:#bf1d30;color:#fff;border:none;min-width:90px}:host button[theme][theme~=danger]:hover:not([disabled]){transition:.2ms ease-in all;background:linear-gradient(96.89deg,#740e1a 0%,#bf1d30 100%);box-shadow:0 4px 14px #0000001a;border-radius:16px;border:none}:host button[theme][theme~=danger]:active{background:#740e1a}:host button[theme][theme~=danger][disabled]{background:#f0f1f4;color:#727583;border:none;cursor:default;pointer-events:none}:host button[theme][theme~=danger][is-loading=true]{justify-content:center;padding:5px 16px;pointer-events:none}:host button[theme][theme~=ghost]{background:none;border:none;color:#151b3f;padding:4px 8px}:host button[theme][theme~=ghost] .dr{margin-left:4.5px;margin-right:12.5px}:host button[theme][theme~=ghost]:hover:not([disabled]){color:#4646ce;background:#f2f2fb;border-radius:4px}:host button[theme][theme~=ghost][disabled]{color:#727583;cursor:default;pointer-events:none}:host button[theme][theme~=text-link]{background:none;border:none;color:#0b5af9}:host button[theme][theme~=text-link][disabled]{color:#727583;pointer-events:none}:host button[theme][theme~=primary-icon]{padding:8px;width:28px;height:28px;justify-content:center;color:#fff;background:#4646ce;border:none}:host button[theme][theme~=primary-icon]:hover,:host button[theme][theme~=primary-icon]:active{background:linear-gradient(96.89deg,#131318 0%,#4646ce 100%)}:host button[theme][theme~=primary-icon][disabled]{color:#bcbcbc;background:#e5e6ea;cursor:default;pointer-events:none}:host button[theme][theme~=primary-icon] .dr{margin:0}:host button[theme][theme~=secondary-icon]{background:white;padding:8px;width:28px;height:28px;justify-content:center;color:#4e566c;border:1px solid #7f7fdd}:host button[theme][theme~=secondary-icon]:hover,:host button[theme][theme~=secondary-icon]:active{color:#4646ce;background:#f2f2fb}:host button[theme][theme~=secondary-icon][disabled]{color:#bcbcbc;background:#e5e6ea;border:none;cursor:default;pointer-events:none}:host button[theme][theme~=secondary-icon] .dr{margin:0}:host button[theme][theme~=simple-text]{color:#0c142b;border:none;background:none}:host button[theme][theme~=simple-text] .dr{margin:0 8px 0 0}:host button[theme][theme~=icon]{background:none;padding:8px;width:28px;height:28px;justify-content:center;color:#4e566c;border:none}:host button[theme][theme~=icon]:hover,:host button[theme][theme~=icon]:active{background:#f0f3fc;color:#4646ce}:host button[theme][theme~=icon][disabled]{color:#bcbcbc;border:none;cursor:default;pointer-events:none}:host button[theme][theme~=icon][disabled]:hover,:host button[theme][theme~=icon][disabled]:active{background:none}:host button[theme][theme~=icon] .dr{margin:0}:host button[theme][theme~=dropdown],:host button[theme][theme~=primary-square]{background:#ffffff;border-radius:6px;border:1px solid #c3c4ce;box-shadow:none;min-width:unset}:host button[theme][theme~=dropdown]:hover,:host button[theme][theme~=primary-square]:hover{border-color:#85889c}:host button[theme][theme~=dropdown]:active,:host button[theme][theme~=primary-square]:active{border-color:#4646ce}:host button[theme][theme~=dropdown] i:first-child,:host button[theme][theme~=primary-square] i:first-child{margin-right:3px}:host button[theme][theme~=dropdown] i:last-child,:host button[theme][theme~=primary-square] i:last-child{margin-left:3px}:host button[theme][theme~=dropdown]{padding:0 8px}:host button[theme][theme~=primary-square]{padding:0;-webkit-user-select:none;user-select:none}:host button[theme][theme~=primary-square]:hover{background-color:#f9f7ff;border:1px solid #7e828e}:host button[theme][theme~=primary-square]:active{background-color:#f2f2fb;border:1px solid #4646ce}:host button[theme][theme~=primary-square][disabled]{opacity:.6;pointer-events:none}:host button[theme][theme~=link-btn]{padding:5px 8px;border:none;background:none;border-radius:5px;color:#0c142b}:host button[theme][theme~=link-btn] .dr{margin:0 4px 0 0}:host button[theme][theme~=link-btn] .dr-last{margin-right:0;margin-left:4px}:host button[theme][theme~=link-btn]:hover{background:#f2f2fb;color:#4646ce}:host button[theme][theme~=link-btn]:active{background:#f2f2fb;color:#25258c}:host button[theme][theme~=link-btn]:disabled{background:none;color:#727583}:host button[theme][theme~=link-btn]:disabled .dr{color:#bcbcbc}:host button[theme][bold=true]{font-weight:600}:host button[theme][icon=true]:not([theme~=\"primary-square\"]){padding-left:8px}:host button[theme][icon=false]{justify-content:center}:host.dr-button-selected button[theme][theme~=primary-square],:host.dr-button-selected button[theme][theme~=secondary-icon]{background-color:#f2f2fb;border:1px solid #4646ce}\n"]
                 },] }
     ];
@@ -2436,6 +2451,7 @@
         iconAfterLabel: [{ type: i0.Input }],
         isBold: [{ type: i0.Input }],
         iconColor: [{ type: i0.Input }],
+        iconSize: [{ type: i0.Input }],
         disabled: [{ type: i0.Input }],
         isLoading: [{ type: i0.Input }],
         click: [{ type: i0.Output }],
@@ -3522,10 +3538,12 @@
     DrLayoutBodyComponent.ctorParameters = function () { return []; };
 
     var DrErrorComponent = /** @class */ (function () {
-        function DrErrorComponent(cdr) {
+        function DrErrorComponent(cdr, formGroupDirective) {
             this.cdr = cdr;
+            this.formGroupDirective = formGroupDirective;
             this.destroyed$ = new rxjs.Subject();
             this.label = 'Field error';
+            this.noIcon = false;
         }
         Object.defineProperty(DrErrorComponent.prototype, "control", {
             set: function (value) {
@@ -3541,6 +3559,18 @@
             enumerable: false,
             configurable: true
         });
+        Object.defineProperty(DrErrorComponent.prototype, "controlName", {
+            set: function (value) {
+                if (!value || typeof value !== 'string')
+                    return;
+                if (!this.formGroupDirective) {
+                    throw new Error('You must provide a formGroupDirective to use this input');
+                }
+                this.control = this.formGroupDirective.control.get(value);
+            },
+            enumerable: false,
+            configurable: true
+        });
         Object.defineProperty(DrErrorComponent.prototype, "errorString", {
             get: function () {
                 var _a;
@@ -3568,18 +3598,21 @@
     }());
     DrErrorComponent.decorators = [
         { type: i0.Component, args: [{
-                    template: "<div *ngIf=\"_control.status === 'INVALID' && !_control.pristine\"\n     [drTooltip]=\"errorString\"\n     class=\"error-container\"\n     [class.warning]=\"isWarning\">\n    <i class=\"dr-icon-status-error\"></i>\n    <span>{{label}}</span>\n</div>\n",
+                    template: "<div *ngIf=\"_control.status === 'INVALID' && !_control.pristine\"\n     [drTooltip]=\"errorString\"\n     class=\"error-container\"\n     [class.warning]=\"isWarning\">\n    <i *ngIf=\"!noIcon\" class=\"dr-icon-status-error\"></i>\n    <span>{{label}}</span>\n</div>\n",
                     selector: 'dr-error',
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    styles: [":host{display:flex;margin-top:8px}:host:empty{display:none}:host .error-container{display:flex;align-items:center;cursor:pointer;width:auto;color:#bf1d30}:host .error-container i{font-size:16px;margin-right:2px}:host .error-container span{font-family:\"Poppins\",sans-serif;font-style:normal;font-weight:400;font-size:11px;line-height:20px}:host .error-container.warning{color:#ffb800}:host .error-container.warning span{color:#9e5f00}\n"]
+                    styles: [":host{display:flex;margin-top:8px}:host:empty{display:none}:host .error-container{display:flex;align-items:center;cursor:pointer;width:auto;color:#bf1d30}:host .error-container i{font-size:16px;margin-right:2px}:host .error-container span{font-family:\"Poppins\",sans-serif;font-style:normal;font-weight:400;font-size:11px;line-height:20px}:host .error-container.warning{color:#ffb800}:host .error-container.warning span{color:#9e5f00}:host.no-icon{margin-top:2px}:host.no-icon .error-container span{font-size:12px}\n"]
                 },] }
     ];
     DrErrorComponent.ctorParameters = function () { return [
-        { type: i0.ChangeDetectorRef }
+        { type: i0.ChangeDetectorRef },
+        { type: forms.FormGroupDirective, decorators: [{ type: i0.Optional }] }
     ]; };
     DrErrorComponent.propDecorators = {
         control: [{ type: i0.Input }],
-        label: [{ type: i0.Input }]
+        controlName: [{ type: i0.Input }],
+        label: [{ type: i0.Input }],
+        noIcon: [{ type: i0.Input }, { type: i0.HostBinding, args: ['class.no-icon',] }]
     };
 
     var DialogWrapperComponent = /** @class */ (function () {
@@ -3652,7 +3685,7 @@
         { type: i0.Component, args: [{
                     selector: 'dr-dialog-wrapper',
                     template: "<div class=\"dialog-wrapper\"\n     [class.dialog-wrapper--confirmation-no-title]=\"dialogData.theme?.isConfirmation && !dialogData.title\">\n    <i class=\"dr-icon-exit\" data-test=\"close_btn\" (click)=\"closeDialog()\" *ngIf=\"!dialogData?.hideCloseBtn\"></i>\n\n    <div header class=\"dialog-wrapper__header\" *ngIf=\"dialogData.title\">\n        <h1 class=\"dialog-wrapper__header__title\" data-test=\"dialogTitle\">{{ dialogData.title }}</h1>\n        <h1 class=\"dialog-wrapper__header__subtitle\" data-test=\"dialogSubtitle\"\n            *ngIf=\"dialogData.subtitle\">{{ dialogData.subtitle }}</h1>\n    </div>\n    <div class=\"dialog-wrapper__content\"\n         [class.dialog-wrapper__content--no-padding]=\"dialogData.theme?.contentNoPadding\"\n         [ngClass]=\"{ 'flex-position': dialogData.contentIcon?.class && !childComponent }\">\n        <span *ngIf=\"dialogData.contentIcon?.class\" class=\"dialog-wrapper__content__icon\">\n            <i [ngClass]=\"dialogData.contentIcon.class\" [style.color]=\"dialogData.contentIcon?.color || 'inherit'\"></i>\n        </span>\n        <span [innerHTML]=\"dialogData.content\"></span>\n        <span #content class=\"dialog-wrapper__content__anchor\"> </span>\n    </div>\n    <div footer class=\"dialog-wrapper__footer\" *ngIf=\"dialogData.cancelButton || dialogData.acceptButton\">\n        <div class=\"dialog-wrapper__footer__buttons\">\n            <span *ngIf=\"dialogData.customButton\"\n                  class=\"dialog-wrapper__footer__button-wrapper\"\n                  [drTooltip]=\"dialogData.customButton.isDisabled && dialogData.tooltips?.customDisabled\">\n                <dr-button (click)=\"onDecline()\"\n                           [theme]=\"'secondary'\"\n                           [isLoading]=\"isLoading\"\n                           data-test=\"declineBtn\"\n                           [disabled]=\"dialogData.customButton.isDisabled\"\n                           [drTooltip]=\"dialogData.tooltips?.custom\">{{ dialogData.customButton.label }}</dr-button>\n            </span>\n            <span *ngIf=\"dialogData.cancelButton\"\n                  class=\"dialog-wrapper__footer__button-wrapper\"\n                  [drTooltip]=\"dialogData.cancelButton.isDisabled && dialogData.tooltips?.cancelDisabled\">\n                <dr-button (click)=\"closeDialog()\"\n                           [theme]=\"'secondary'\"\n                           data-test=\"closeBtn\"\n                           [disabled]=\"dialogData.cancelButton.isDisabled\"\n                           [drTooltip]=\"dialogData.tooltips?.cancel\">{{ dialogData.cancelButton.label }}</dr-button>\n            </span>\n            <span *ngIf=\"dialogData.acceptButton\"\n                  class=\"dialog-wrapper__footer__button-wrapper\"\n                  [drTooltip]=\"dialogData.acceptButton.isDisabled && dialogData.tooltips?.acceptDisabled\">\n                <dr-button (click)=\"onAcceptDialog()\"\n                           [theme]=\"dialogData.acceptButton?.theme || 'primary'\"\n                           [isLoading]=\"isLoading\"\n                           data-test=\"acceptBtn\"\n                           [disabled]=\"dialogData.acceptButton.isDisabled\"\n                           [drTooltip]=\"dialogData.tooltips?.accept\">{{ dialogData.acceptButton.label }}</dr-button>\n            </span>\n        </div>\n    </div>\n</div>\n",
-                    styles: [":host.small-modal{min-height:188px;max-height:467px;min-width:400px;max-width:400px}:host.medium-modal{min-height:188px;max-height:467px;min-width:632px;max-width:632px}:host.large-modal{min-width:750px;max-width:750px}:host.medium-large-modal{min-width:669px;max-width:669px}:host.xl-modal{min-height:188px;max-height:800px;min-width:1100px;max-width:1100px}:host.xl-custom-modal{min-height:188px;max-height:800px;min-width:1100px;max-width:100%}::ng-deep .dialog-wrapper{display:flex;justify-content:space-between;flex-direction:column;position:relative}::ng-deep .dialog-wrapper>.dr-icon-exit{z-index:1;position:absolute;right:32px;top:20px;color:#51566f;cursor:pointer}::ng-deep .dialog-wrapper__header{display:flex;flex-direction:column;padding:8px 52px 8px 32px;border-bottom:1px solid #e5e6ea}::ng-deep .dialog-wrapper__header__title{color:#151b3f;position:static;font-weight:600;font-size:18px;line-height:24px}::ng-deep .dialog-wrapper__header__subtitle{font-size:14px;line-height:20px;margin:0}::ng-deep .dialog-wrapper--confirmation-no-title{padding-top:16px;height:100%}::ng-deep .dialog-wrapper__content{overflow-y:inherit;font-size:14px;font-weight:400;line-height:22px;padding:24px 32px 32px}::ng-deep .dialog-wrapper__content__anchor{display:none}::ng-deep .dialog-wrapper__content--no-padding{padding:0}::ng-deep .dialog-wrapper__content__icon{margin-right:10px;top:5px;position:relative}::ng-deep .dialog-wrapper__content.flex-position{display:flex}::ng-deep .dialog-wrapper__footer{border-top:1px solid #e5e6ea}::ng-deep .dialog-wrapper__footer__buttons{display:flex;justify-content:flex-end;padding-top:10px;padding-right:32px;padding-bottom:11px}::ng-deep .dialog-wrapper__footer__buttons>dr-button:nth-child(n+2){margin-left:12px}::ng-deep .dialog-wrapper__footer__button-wrapper:nth-child(n+2){margin-left:12px}\n"]
+                    styles: [":host.small-modal{min-height:188px;max-height:467px;min-width:400px;max-width:400px}:host.medium-modal{min-height:188px;max-height:467px;min-width:632px;max-width:632px}:host.large-modal{min-width:750px;max-width:750px}:host.medium-large-modal{min-width:669px;max-width:669px}:host.xl-modal{min-height:188px;max-height:800px;min-width:1100px;max-width:1100px}:host.xl-custom-modal{min-height:188px;max-height:800px;min-width:1100px;max-width:100%}::ng-deep .dialog-wrapper{display:flex;justify-content:space-between;flex-direction:column;position:relative}::ng-deep .dialog-wrapper>.dr-icon-exit{z-index:1;position:absolute;right:32px;top:20px;color:#51566f;cursor:pointer}::ng-deep .dialog-wrapper__header{display:flex;flex-direction:column;padding:8px 52px 8px 32px;border-bottom:1px solid #e5e6ea}::ng-deep .dialog-wrapper__header__title{color:#151b3f;position:static;font-weight:600;font-size:18px;line-height:24px}::ng-deep .dialog-wrapper__header__subtitle{font-size:14px;line-height:20px;margin:0}::ng-deep .dialog-wrapper--confirmation-no-title{padding-top:16px;height:100%}::ng-deep .dialog-wrapper__content{overflow-y:inherit;font-size:14px;font-weight:400;line-height:22px;padding:24px 32px 32px}::ng-deep .dialog-wrapper__content__anchor{display:none}::ng-deep .dialog-wrapper__content--no-padding{padding:0}::ng-deep .dialog-wrapper__content__icon{margin-right:10px;top:5px;position:relative}::ng-deep .dialog-wrapper__content.flex-position{display:flex}::ng-deep .dialog-wrapper__footer{border-top:1px solid #e5e6ea}::ng-deep .dialog-wrapper__footer__buttons{display:flex;justify-content:flex-end;padding:11px 32px}::ng-deep .dialog-wrapper__footer__buttons>dr-button:nth-child(n+2){margin-left:12px}::ng-deep .dialog-wrapper__footer__button-wrapper:nth-child(n+2){margin-left:12px}\n"]
                 },] }
     ];
     DialogWrapperComponent.ctorParameters = function () { return [
@@ -3742,8 +3775,8 @@
     DialogModalWrapperComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'dr-dialog-modal-wrapper',
-                    template: "<div header class=\"header-dialog\">\n    <h1 class=\"title-dialog\" data-test=\"modalTitle\">{{ dialogData.title }}</h1>\n    <i mat-icon-button *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=\"dr-smart-form_wrapper\">\n        <div *ngFor=\"let field of dialogData.fields\" class=\"dr-smart-form_group\"\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                           [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-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 *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{min-height:188px;max-height:467px;min-width:400px;max-width:400px}:host.medium-modal{min-height:188px;max-height:467px;min-width:632px;max-width:632px}.header-dialog{display:flex;flex-direction:row;justify-content:space-between;align-items:center;padding:8px 39px 8px 32px;border-bottom:1px solid #e5e6ea}.title-dialog{color:#151b3f;position:static;font-weight:bold;font-size:18px;line-height:24px}.content-dialog{font-weight:400;font-size:14px;padding:16px 32px 5px}.icon-close{color:#51566f;cursor:pointer}.dr-smart-from{font-size:14px;font-weight:500;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 #e5e6ea}.buttons-wrapper{display:flex;justify-content:flex-end;padding-top:10px;padding-right:32px;padding-bottom:11px}.buttons-wrapper dr-button:nth-of-type(2){margin-left:12px}.form-error-alert{position:absolute;margin-top:5px;font-size:12px;color:red}.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"]
+                    template: "<div header class=\"header-dialog\">\n    <h1 class=\"title-dialog\" data-test=\"modalTitle\">{{ dialogData.title }}</h1>\n    <i mat-icon-button *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=\"dr-smart-form_wrapper\">\n        <div *ngFor=\"let field of dialogData.fields\" class=\"dr-smart-form_group\"\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                           [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 *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{min-height:188px;max-height:467px;min-width:400px;max-width:400px}:host.medium-modal{min-height:188px;max-height:467px;min-width:632px;max-width:632px}.header-dialog{display:flex;flex-direction:row;justify-content:space-between;align-items:center;padding:8px 39px 8px 32px;border-bottom:1px solid #e5e6ea}.title-dialog{color:#151b3f;position:static;font-weight:bold;font-size:18px;line-height:24px}.content-dialog{font-weight:400;font-size:14px;padding:16px 32px 5px}.icon-close{color:#51566f;cursor:pointer}.dr-smart-from{font-size:14px;font-weight:500;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 #e5e6ea}.buttons-wrapper{display:flex;justify-content:flex-end;padding-top:10px;padding-right:32px;padding-bottom:11px}.buttons-wrapper dr-button:nth-of-type(2){margin-left:12px}.form-field-error-alert{font-size:12px;color:#bf1d30;line-height:20px}.form-error-alert{position:absolute;margin-top:5px;font-size:12px;color:red}.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"]
                 },] }
     ];
     DialogModalWrapperComponent.ctorParameters = function () { return [
@@ -4598,7 +4631,7 @@
     var DrDatePickerWithTimeframeComponent = /** @class */ (function (_super) {
         __extends(DrDatePickerWithTimeframeComponent, _super);
         function DrDatePickerWithTimeframeComponent(cdr, dateAdapter, datePickerService) {
-            var _a;
+            var _c;
             var _this = _super.call(this, cdr, dateAdapter, datePickerService) || this;
             _this.cdr = cdr;
             _this.dateAdapter = dateAdapter;
@@ -4607,13 +4640,15 @@
             _this.canSelectTimeframe = true;
             // eslint-disable-next-line
             _this.onChangeFormat = new i0.EventEmitter();
-            _this.pagingSetup = (_a = {},
-                _a[exports.TimeframeOption.YEAR] = function (forward) { return _this.pagingDateChange('addCalendarYears', 1, forward); },
-                _a[exports.TimeframeOption.QUARTER] = function (forward) { return _this.pagingDateChange('addCalendarMonths', 3, forward); },
-                _a[exports.TimeframeOption.MONTH] = function (forward) { return _this.pagingDateChange('addCalendarMonths', 1, forward); },
-                _a[exports.TimeframeOption.DAY] = function (forward) { return _this.pagingDateChange('addCalendarDays', 1, forward); },
-                _a[exports.TimeframeOption.WEEK] = function (forward) { return _this.pagingDateChange('addCalendarDays', 7, forward); },
-                _a);
+            _this.pagingSetup = (_c = {},
+                _c[exports.TimeframeOption.YEAR] = function (forward) { return _this.getNextDate('addCalendarYears', 1, forward); },
+                _c[exports.TimeframeOption.QUARTER] = function (forward) { return _this.getNextDate('addCalendarMonths', 3, forward); },
+                _c[exports.TimeframeOption.MONTH] = function (forward) { return _this.getNextDate('addCalendarMonths', 1, forward); },
+                _c[exports.TimeframeOption.DAY] = function (forward) { return _this.getNextDate('addCalendarDays', 1, forward); },
+                _c[exports.TimeframeOption.WEEK] = function (forward) { return _this.getNextDate('addCalendarDays', 7, forward); },
+                _c);
+            _this.isNextDateDisabled = false;
+            _this.isPrevDateDisabled = false;
             _this.onChangeDebounced$ = new rxjs.Subject();
             datePickerService.isTimeframeSelectionEnabled = true;
             datePickerService.format$.pipe(operators.takeUntil(_this.destroyed$)).subscribe(function (value) {
@@ -4675,12 +4710,12 @@
         };
         DrDatePickerWithTimeframeComponent.prototype.pagingClicked = function (forward) {
             if (this.pagingSetup[this.datePickerService.timeframe]) {
-                this.pagingSetup[this.datePickerService.timeframe](forward);
+                var nextValue = this.pagingSetup[this.datePickerService.timeframe](forward);
+                this.pagingDateChange(nextValue);
             }
             this.datePicker.close();
         };
-        DrDatePickerWithTimeframeComponent.prototype.pagingDateChange = function (actionCall, amount, forward) {
-            var newValue = this.dateAdapter[actionCall](this.innerValue, forward ? amount : -amount);
+        DrDatePickerWithTimeframeComponent.prototype.pagingDateChange = function (newValue) {
             if (this.paginationDebounce) {
                 // this is required for not sending extra requests when user quickly clicking on pagination
                 // here we do the same as in setValueFromMoment(newValue) with difference
@@ -4693,12 +4728,30 @@
                 this.setValueFromMoment(newValue);
             }
         };
+        DrDatePickerWithTimeframeComponent.prototype.writeValue = function (value) {
+            _super.prototype.writeValue.call(this, value);
+            if (!value)
+                return;
+            this.restrictPagination();
+        };
+        DrDatePickerWithTimeframeComponent.prototype.getNextDate = function (actionCall, amount, forward) {
+            var _a, _b;
+            return (_b = (_a = this.dateAdapter)[actionCall]) === null || _b === void 0 ? void 0 : _b.call(_a, this.innerValue, forward ? amount : -amount);
+        };
+        DrDatePickerWithTimeframeComponent.prototype.restrictPagination = function () {
+            if (!this._min && !this._max)
+                return;
+            var nextValue = this.pagingSetup[this.datePickerService.timeframe](true);
+            var prevValue = this.pagingSetup[this.datePickerService.timeframe](false);
+            this.isNextDateDisabled = this._max && nextValue && nextValue.unix() > this._max.unix();
+            this.isPrevDateDisabled = this._min && prevValue && prevValue.unix() < this._min.unix();
+        };
         return DrDatePickerWithTimeframeComponent;
     }(DrDatePickerComponent));
     DrDatePickerWithTimeframeComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'dr-date-picker-with-timeframe',
-                    template: "<dr-button 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    <div\n            class=\"dr-datepicker-input-container__formatted-value-display\"\n            (click)=\"datepickerInput.click()\"\n    >\n        {{ displayedFormattedValue }}\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 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</mat-datepicker>\n",
+                    template: "<dr-button [disabled]=\"isPrevDateDisabled\" 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    <div\n            class=\"dr-datepicker-input-container__formatted-value-display\"\n            (click)=\"datepickerInput.click()\"\n    >\n        {{ displayedFormattedValue }}\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\" 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</mat-datepicker>\n",
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     providers: [
                         { provide: forms.NG_VALUE_ACCESSOR, useExisting: DrDatePickerWithTimeframeComponent, multi: true },