@datarailsshared/datarailsshared 1.4.112 → 1.4.113

package/fesm2015/datarailsshared-datarailsshared.js

@@ -1,6 +1,6 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, Component, ViewEncapsulation, Input, Output, ChangeDetectionStrategy, ChangeDetectorRef, forwardRef, ElementRef, Inject, PLATFORM_ID, ContentChildren, Renderer2, HostBinding, ContentChild, Pipe, TemplateRef, HostListener, Directive, ComponentFactoryResolver, ViewContainerRef, ViewChild, Injector, Injectable, Host, NgModule, Optional } from '@angular/core';
-import { FormControl, NG_VALUE_ACCESSOR, FormGroup, NgModel, FormsModule, ReactiveFormsModule, NgControl } from '@angular/forms';
+import { EventEmitter, Component, ViewEncapsulation, Input, Output, ChangeDetectionStrategy, ChangeDetectorRef, forwardRef, ElementRef, Inject, PLATFORM_ID, ContentChildren, Renderer2, HostBinding, ContentChild, Pipe, TemplateRef, HostListener, Directive, ComponentFactoryResolver, ViewContainerRef, ViewChild, Injector, Injectable, Host, Optional, NgModule } from '@angular/core';
+import { FormControl, NG_VALUE_ACCESSOR, FormGroupDirective, FormGroup, NgModel, FormsModule, ReactiveFormsModule, NgControl } from '@angular/forms';
 import { DateAdapter, MAT_DATE_LOCALE, MAT_DATE_FORMATS, MatNativeDateModule } from '@angular/material/core';
 import { MomentDateAdapter, MAT_MOMENT_DATE_ADAPTER_OPTIONS, MatMomentDateModule } from '@angular/material-moment-adapter';
 import * as momentImported from 'moment';
@@ -251,7 +251,7 @@ const MONTH_FORMATS = {
         monthYearA11yLabel: 'MMMM YYYY'
     },
 };
-const ɵ0$7 = MONTH_FORMATS;
+const ɵ0$8 = MONTH_FORMATS;
 class MonthTagComponent extends AnyTagComponent {
     constructor() {
         super();
@@ -310,7 +310,7 @@ MonthTagComponent.decorators = [
                         useClass: MomentDateAdapter,
                         deps: [MAT_DATE_LOCALE, MAT_MOMENT_DATE_ADAPTER_OPTIONS],
                     },
-                    { provide: MAT_DATE_FORMATS, useValue: ɵ0$7 },
+                    { provide: MAT_DATE_FORMATS, useValue: ɵ0$8 },
                 ]
             },] }
 ];
@@ -432,7 +432,7 @@ const WEEK_FORMATS = {
         monthYearA11yLabel: 'MMMM YYYY'
     },
 };
-const ɵ0$6 = WEEK_FORMATS;
+const ɵ0$7 = WEEK_FORMATS;
 class WeekTagComponent extends AnyTagComponent {
     constructor() {
         super();
@@ -528,7 +528,7 @@ WeekTagComponent.decorators = [
                         useClass: MomentDateAdapter,
                         deps: [MAT_DATE_LOCALE, MAT_MOMENT_DATE_ADAPTER_OPTIONS],
                     },
-                    { provide: MAT_DATE_FORMATS, useValue: ɵ0$6 },
+                    { provide: MAT_DATE_FORMATS, useValue: ɵ0$7 },
                 ]
             },] }
 ];
@@ -550,7 +550,7 @@ const YEAR_FORMATS = {
         monthYearA11yLabel: 'MMMM YYYY'
     },
 };
-const ɵ0$5 = YEAR_FORMATS;
+const ɵ0$6 = YEAR_FORMATS;
 class YearTagComponent extends AnyTagComponent {
     constructor() {
         super();
@@ -615,7 +615,7 @@ YearTagComponent.decorators = [
                         useClass: MomentDateAdapter,
                         deps: [MAT_DATE_LOCALE, MAT_MOMENT_DATE_ADAPTER_OPTIONS],
                     },
-                    { provide: MAT_DATE_FORMATS, useValue: ɵ0$5 },
+                    { provide: MAT_DATE_FORMATS, useValue: ɵ0$6 },
                 ]
             },] }
 ];
@@ -729,7 +729,7 @@ const DAY_FORMATS = {
         monthYearA11yLabel: 'MMMM YYYY'
     },
 };
-const ɵ0$4 = DAY_FORMATS;
+const ɵ0$5 = DAY_FORMATS;
 class DayTagComponent extends AnyTagComponent {
     constructor() {
         super();
@@ -780,7 +780,7 @@ DayTagComponent.decorators = [
                         useClass: MomentDateAdapter,
                         deps: [MAT_DATE_LOCALE, MAT_MOMENT_DATE_ADAPTER_OPTIONS],
                     },
-                    { provide: MAT_DATE_FORMATS, useValue: ɵ0$4 },
+                    { provide: MAT_DATE_FORMATS, useValue: ɵ0$5 },
                 ]
             },] }
 ];
@@ -1553,26 +1553,37 @@ TooltipComponent.propDecorators = {
     unsetMouseOn: [{ type: HostListener, args: ['mouseleave',] }]
 };
 
+const getOverlayPosition = (position) => (Object.assign({}, POPUP_POSITIONS[position]));
+const ɵ0$4 = getOverlayPosition;
 class DrTooltipDirective {
     constructor(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);
+    }
+    get position() {
+        return this._position;
+    }
+    set position(value) {
+        this._position = value;
+        this.overlayPosition = getOverlayPosition(value);
     }
     set drTooltipOptions(options) {
         if (options === null || options === void 0 ? void 0 : options.indent) {
-            const position = POPUP_POSITIONS[this.position];
-            if (position.offsetY) {
+            const 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;
     }
@@ -1627,7 +1638,7 @@ class DrTooltipDirective {
         }
     }
     createOverlay() {
-        const positionStrategy = this.overlayPositionBuilder.flexibleConnectedTo(this.elementRef).withPositions([POPUP_POSITIONS[this.position]]);
+        const positionStrategy = this.overlayPositionBuilder.flexibleConnectedTo(this.elementRef).withPositions([this.overlayPosition]);
         this.overlayRef = this.overlay.create({ positionStrategy });
     }
     renderTooltip() {
@@ -2972,10 +2983,12 @@ DrLayoutBodyComponent.decorators = [
 DrLayoutBodyComponent.ctorParameters = () => [];
 
 class DrErrorComponent {
-    constructor(cdr) {
+    constructor(cdr, formGroupDirective) {
         this.cdr = cdr;
+        this.formGroupDirective = formGroupDirective;
         this.destroyed$ = new Subject();
         this.label = 'Field error';
+        this.noIcon = false;
     }
     set control(value) {
         if (value) {
@@ -2986,6 +2999,14 @@ class DrErrorComponent {
             });
         }
     }
+    set controlName(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);
+    }
     get errorString() {
         var _a;
         if (this._control.hasError('required')) {
@@ -3004,18 +3025,21 @@ class DrErrorComponent {
 }
 DrErrorComponent.decorators = [
     { type: 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: 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 = () => [
-    { type: ChangeDetectorRef }
+    { type: ChangeDetectorRef },
+    { type: FormGroupDirective, decorators: [{ type: Optional }] }
 ];
 DrErrorComponent.propDecorators = {
     control: [{ type: Input }],
-    label: [{ type: Input }]
+    controlName: [{ type: Input }],
+    label: [{ type: Input }],
+    noIcon: [{ type: Input }, { type: HostBinding, args: ['class.no-icon',] }]
 };
 
 class DialogWrapperComponent {
@@ -3086,7 +3110,7 @@ DialogWrapperComponent.decorators = [
     { type: 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 = () => [
@@ -3983,12 +4007,14 @@ class DrDatePickerWithTimeframeComponent extends DrDatePickerComponent {
         // eslint-disable-next-line
         this.onChangeFormat = new EventEmitter();
         this.pagingSetup = {
-            [TimeframeOption.YEAR]: (forward) => this.pagingDateChange('addCalendarYears', 1, forward),
-            [TimeframeOption.QUARTER]: (forward) => this.pagingDateChange('addCalendarMonths', 3, forward),
-            [TimeframeOption.MONTH]: (forward) => this.pagingDateChange('addCalendarMonths', 1, forward),
-            [TimeframeOption.DAY]: (forward) => this.pagingDateChange('addCalendarDays', 1, forward),
-            [TimeframeOption.WEEK]: (forward) => this.pagingDateChange('addCalendarDays', 7, forward)
+            [TimeframeOption.YEAR]: (forward) => this.getNextDate('addCalendarYears', 1, forward),
+            [TimeframeOption.QUARTER]: (forward) => this.getNextDate('addCalendarMonths', 3, forward),
+            [TimeframeOption.MONTH]: (forward) => this.getNextDate('addCalendarMonths', 1, forward),
+            [TimeframeOption.DAY]: (forward) => this.getNextDate('addCalendarDays', 1, forward),
+            [TimeframeOption.WEEK]: (forward) => this.getNextDate('addCalendarDays', 7, forward)
         };
+        this.isNextDateDisabled = false;
+        this.isPrevDateDisabled = false;
         this.onChangeDebounced$ = new Subject();
         datePickerService.isTimeframeSelectionEnabled = true;
         datePickerService.format$.pipe(takeUntil(this.destroyed$)).subscribe((value) => {
@@ -4032,12 +4058,12 @@ class DrDatePickerWithTimeframeComponent extends DrDatePickerComponent {
     }
     pagingClicked(forward) {
         if (this.pagingSetup[this.datePickerService.timeframe]) {
-            this.pagingSetup[this.datePickerService.timeframe](forward);
+            const nextValue = this.pagingSetup[this.datePickerService.timeframe](forward);
+            this.pagingDateChange(nextValue);
         }
         this.datePicker.close();
     }
-    pagingDateChange(actionCall, amount, forward) {
-        const newValue = this.dateAdapter[actionCall](this.innerValue, forward ? amount : -amount);
+    pagingDateChange(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
@@ -4050,11 +4076,29 @@ class DrDatePickerWithTimeframeComponent extends DrDatePickerComponent {
             this.setValueFromMoment(newValue);
         }
     }
+    writeValue(value) {
+        super.writeValue(value);
+        if (!value)
+            return;
+        this.restrictPagination();
+    }
+    getNextDate(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);
+    }
+    restrictPagination() {
+        if (!this._min && !this._max)
+            return;
+        const nextValue = this.pagingSetup[this.datePickerService.timeframe](true);
+        const 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();
+    }
 }
 DrDatePickerWithTimeframeComponent.decorators = [
     { type: 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: ChangeDetectionStrategy.OnPush,
                 providers: [
                     { provide: NG_VALUE_ACCESSOR, useExisting: DrDatePickerWithTimeframeComponent, multi: true },