@datarailsshared/datarailsshared 1.4.111 → 1.4.113

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 () {
@@ -3522,10 +3537,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 +3558,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 +3597,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 +3684,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__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 [
@@ -4598,7 +4630,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 +4639,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 +4709,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 +4727,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 },