@datarailsshared/datarailsshared 1.4.19-tigers → 1.4.21-tigers

package/fesm2015/datarailsshared-datarailsshared.js

@@ -1,17 +1,17 @@
 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, Directive, HostListener, ComponentFactoryResolver, ViewContainerRef, ViewChild, Injectable, Optional, Injector, Host, NgModule } from '@angular/core';
-import { FormControl, NG_VALUE_ACCESSOR, NgControl, NgModel, FormsModule, ReactiveFormsModule } 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, NgModule, Optional } from '@angular/core';
+import { FormControl, NG_VALUE_ACCESSOR, 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';
 import { isPlatformBrowser, DOCUMENT, CommonModule } from '@angular/common';
 import { Subject, from, merge, fromEvent, noop as noop$1, BehaviorSubject } from 'rxjs';
-import { startWith, switchMap, takeUntil, filter, take, first, skip, debounceTime, distinctUntilChanged } from 'rxjs/operators';
+import { startWith, switchMap, takeUntil, filter, skip, first, debounceTime, distinctUntilChanged, take } from 'rxjs/operators';
 import { transition, style, animate, trigger, state } from '@angular/animations';
 import * as i1 from '@angular/cdk/overlay';
 import { Overlay, OverlayPositionBuilder, OverlayConfig } from '@angular/cdk/overlay';
 import { ComponentPortal } from '@angular/cdk/portal';
-import { MatCalendar, MatDatepickerModule } from '@angular/material/datepicker';
+import { MatDatepickerModule, MatCalendar } from '@angular/material/datepicker';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
 import { MatSelectModule } from '@angular/material/select';
@@ -1335,6 +1335,7 @@ DrSelectComponent.propDecorators = {
 class DrAvatarComponent {
     constructor() {
         this.warning = false;
+        this.showUnassigned = false;
         this.userClicked = new EventEmitter();
         this.parsedUsers = [];
     }
@@ -1361,22 +1362,24 @@ class DrAvatarComponent {
 DrAvatarComponent.decorators = [
     { type: Component, args: [{
                 selector: 'dr-avatar',
-                template: "<div class=\"users-section\">\n    <div *ngIf=\"!parsedUsers.length\"\n         class=\"users-section__default\">\n    </div>\n\n    <div *ngFor=\"let user of getFirstUsers()\"\n         class=\"users-section__user\"\n         [class]=\"'icon-' + user.colorNumber + ' ' + user.status\"\n         (click)=\"userClicked.emit()\"\n         [matTooltip]=\"user | drAvatar\"\n         [matTooltipPosition]=\"'below'\">\n        {{user | drAvatar: 'initials'}}\n    </div>\n\n    <div *ngIf=\"parsedUsers.length > 2\"\n         class=\"users-section__user icon-2\"\n         [drTooltip]=\"usersTemplate\"\n         [drTooltipPosition]=\"'bottom'\">\n        {{getLastUsers().length}}\n    </div>\n</div>\n\n<ng-template #usersTemplate>\n    <div *ngFor=\"let user of getLastUsers()\" class=\"users-popover-item\">\n        <div class=\"users-section__user\"\n             (click)=\"userClicked.emit()\"\n             [class]=\"user.class\">\n            {{user | drAvatar: 'initials'}}\n        </div>\n        <span class=\"username\">\n               {{user | drAvatar}}\n        </span>\n    </div>\n</ng-template>\n",
+                template: "<div class=\"users-section\">\n    <div *ngIf=\"!parsedUsers.length\"\n         class=\"users-section__default\">\n    </div>\n\n    <div *ngFor=\"let user of getFirstUsers()\"\n         class=\"users-section__user\"\n         [class]=\"'icon-' + user.colorNumber + ' ' + user.status\"\n         [ngClass]=\"{ 'users-section__default': showUnassigned && !user.email }\"\n         (click)=\"userClicked.emit()\"\n         [matTooltip]=\"user | drAvatar\"\n         [matTooltipPosition]=\"'below'\">\n        {{user | drAvatar: 'initials'}}\n    </div>\n\n    <div *ngIf=\"parsedUsers.length > 2\"\n         class=\"users-section__user icon-2\"\n         [drTooltip]=\"usersTemplate\"\n         [drTooltipPosition]=\"'bottom'\">\n        {{getLastUsers().length}}\n    </div>\n</div>\n\n<ng-template #usersTemplate>\n    <div *ngFor=\"let user of getLastUsers()\" class=\"users-popover-item\">\n        <div class=\"users-section__user\"\n             (click)=\"userClicked.emit()\"\n             [class]=\"user.class\">\n            {{user | drAvatar: 'initials'}}\n        </div>\n        <span class=\"username\">\n               {{user | drAvatar}}\n        </span>\n    </div>\n</ng-template>\n",
                 changeDetection: ChangeDetectionStrategy.OnPush,
-                styles: [":host{width:auto}.users-section{display:flex;height:28px}.users-section__default{display:flex;height:28px;width:28px;border-radius:14px;background:url(\"data:image/svg+xml,%3Csvg width%3D%2224%22 height%3D%2224%22 viewBox%3D%220 0 24 24%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Crect width%3D%2224%22 height%3D%2224%22 rx%3D%2212%22 fill%3D%22%23E5E6EA%22%2F%3E%3Cpath fill-rule%3D%22evenodd%22 clip-rule%3D%22evenodd%22 d%3D%22M15 9.75C15 11.4069 13.6569 12.75 12 12.75C10.3431 12.75 9 11.4069 9 9.75C9 8.09315 10.3431 6.75 12 6.75C13.6569 6.75 15 8.09315 15 9.75ZM13.875 9.75C13.875 10.7855 13.0355 11.625 12 11.625C10.9645 11.625 10.125 10.7855 10.125 9.75C10.125 8.71447 10.9645 7.875 12 7.875C13.0355 7.875 13.875 8.71447 13.875 9.75Z%22 fill%3D%22%2351566F%22%2F%3E%3Cpath d%3D%22M15.9968 16.7631C15.5425 15.3973 14.0368 14.25 12 14.25C9.9632 14.25 8.45748 15.3973 8.00319 16.7631C7.91242 17.0359 7.67416 17.25 7.38657 17.25C7.04536 17.25 6.77507 16.9539 6.86275 16.6241C7.39546 14.6206 9.49327 13.125 12 13.125C14.5067 13.125 16.6045 14.6206 17.1373 16.6241C17.2249 16.9539 16.9546 17.25 16.6134 17.25C16.3259 17.25 16.0876 17.0359 15.9968 16.7631Z%22 fill%3D%22%2351566F%22%2F%3E%3C%2Fsvg%3E\") no-repeat;background-size:cover}.users-popover-item{display:flex;align-items:center;margin:12px}.users-popover-item .username{color:#51566f;font-size:14px}.users-popover-item .users-section__user{margin-right:8px}.users-section__user{position:relative;display:flex;justify-content:center;align-items:center;height:28px;width:28px;border-radius:14px;background:red;color:#fff;font-size:12px}.users-section__user.icon-0{background-color:#7b61ff}.users-section__user.icon-1{background-color:#21b8f1}.users-section__user.icon-2{background-color:#2969b0}.users-section__user.icon-3{background-color:#51566f}.users-section__user.icon-4{background-color:#0061ff}.users-section__user:hover{cursor:pointer}.users-section__user:not(:first-child){margin-left:4px}.users-section__user.online:after,.users-section__user.offline:after,.users-section__user.warning:after{content:\"\";display:flex;width:8px;height:8px;position:absolute;border-radius:4px;top:-2px;right:0}.users-section__user.online:after{background:#03A678}.users-section__user.offline:after{background:#DE2833}.users-section__user.warning:after{background:#FDA014}\n"]
+                styles: [":host{width:auto}.users-section{display:flex;height:28px}.users-section__default{display:flex;height:28px;width:28px;border-radius:14px;background:url(\"data:image/svg+xml,%3Csvg width%3D%2224%22 height%3D%2224%22 viewBox%3D%220 0 24 24%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Crect width%3D%2224%22 height%3D%2224%22 rx%3D%2212%22 fill%3D%22%23E5E6EA%22%2F%3E%3Cpath fill-rule%3D%22evenodd%22 clip-rule%3D%22evenodd%22 d%3D%22M15 9.75C15 11.4069 13.6569 12.75 12 12.75C10.3431 12.75 9 11.4069 9 9.75C9 8.09315 10.3431 6.75 12 6.75C13.6569 6.75 15 8.09315 15 9.75ZM13.875 9.75C13.875 10.7855 13.0355 11.625 12 11.625C10.9645 11.625 10.125 10.7855 10.125 9.75C10.125 8.71447 10.9645 7.875 12 7.875C13.0355 7.875 13.875 8.71447 13.875 9.75Z%22 fill%3D%22%2351566F%22%2F%3E%3Cpath d%3D%22M15.9968 16.7631C15.5425 15.3973 14.0368 14.25 12 14.25C9.9632 14.25 8.45748 15.3973 8.00319 16.7631C7.91242 17.0359 7.67416 17.25 7.38657 17.25C7.04536 17.25 6.77507 16.9539 6.86275 16.6241C7.39546 14.6206 9.49327 13.125 12 13.125C14.5067 13.125 16.6045 14.6206 17.1373 16.6241C17.2249 16.9539 16.9546 17.25 16.6134 17.25C16.3259 17.25 16.0876 17.0359 15.9968 16.7631Z%22 fill%3D%22%2351566F%22%2F%3E%3C%2Fsvg%3E\") no-repeat!important;background-size:cover}.users-popover-item{display:flex;align-items:center;margin:12px}.users-popover-item .username{color:#51566f;font-size:14px}.users-popover-item .users-section__user{margin-right:8px}.users-section__user{position:relative;display:flex;justify-content:center;align-items:center;height:28px;width:28px;border-radius:14px;background:red;color:#fff;font-size:12px}.users-section__user.icon-0{background-color:#7b61ff}.users-section__user.icon-1{background-color:#21b8f1}.users-section__user.icon-2{background-color:#2969b0}.users-section__user.icon-3{background-color:#51566f}.users-section__user.icon-4{background-color:#0061ff}.users-section__user:hover{cursor:pointer}.users-section__user:not(:first-child){margin-left:4px}.users-section__user.online:after,.users-section__user.offline:after,.users-section__user.warning:after{content:\"\";display:flex;width:8px;height:8px;position:absolute;border-radius:4px;top:-2px;right:0}.users-section__user.online:after{background:#03A678}.users-section__user.offline:after{background:#DE2833}.users-section__user.warning:after{background:#FDA014}\n"]
             },] }
 ];
 DrAvatarComponent.ctorParameters = () => [];
 DrAvatarComponent.propDecorators = {
     users: [{ type: Input }],
     warning: [{ type: Input }],
+    showUnassigned: [{ type: Input }],
     userClicked: [{ type: Output }]
 };
 
 class DrAvatarPipe {
     transform(item, type = 'full') {
         if (type === 'initials') {
-            return (item.first_name && item.last_name ? (item.first_name[0] + item.last_name[0]) : item.email[0]).toUpperCase();
+            const email = item.email ? item.email[0] : '';
+            return (item.first_name && item.last_name ? (item.first_name[0] + item.last_name[0]) : email).toUpperCase();
         }
         return item.first_name && item.last_name ? (item.first_name + ' ' + item.last_name) : item.email;
     }
@@ -1486,10 +1489,17 @@ const POPUP_ANIMATION = [
 class TooltipComponent {
     constructor() {
         this.isContentTemplate = false;
+        this.isMouseOn$ = new BehaviorSubject(false);
     }
     ngOnInit() {
         this.isContentTemplate = this.content instanceof TemplateRef;
     }
+    setMouseOn() {
+        this.isMouseOn$.next(true);
+    }
+    unsetMouseOn() {
+        this.isMouseOn$.next(false);
+    }
 }
 TooltipComponent.decorators = [
     { type: Component, args: [{
@@ -1507,7 +1517,9 @@ TooltipComponent.propDecorators = {
     contentContext: [{ type: Input }],
     position: [{ type: Input }],
     options: [{ type: Input }],
-    class: [{ type: Input }]
+    class: [{ type: Input }],
+    setMouseOn: [{ type: HostListener, args: ['mouseenter',] }],
+    unsetMouseOn: [{ type: HostListener, args: ['mouseleave',] }]
 };
 
 class DrTooltipDirective {
@@ -1518,6 +1530,8 @@ class DrTooltipDirective {
         this.contentContext = {};
         this.position = 'top';
         this.class = '';
+        // is used for preserve tooltip from being hidden for N milliseconds
+        this.drTooltipMousleaveTimeout = 0;
     }
     set drTooltipOptions(options) {
         if (options === null || options === void 0 ? void 0 : options.indent) {
@@ -1550,16 +1564,36 @@ class DrTooltipDirective {
         if (this.overlayRef) {
             this.overlayRef.dispose();
         }
+        if (this.tooltipMouseOnSubscription) {
+            this.tooltipMouseOnSubscription.unsubscribe();
+        }
     }
     show() {
-        if (this.manualHandling)
+        if (this.manualHandling || this.overlayRef)
             return;
         this.renderTooltip();
     }
     hide() {
-        if (this.manualHandling)
+        var _a;
+        if (this.manualHandling || !this.tooltipRef || ((_a = this.tooltipRef) === null || _a === void 0 ? void 0 : _a.instance.isMouseOn$.getValue()))
             return;
-        this.destroyTooltip();
+        // if this timeout value is set - then preserve
+        // tooltip from being hidden N milliseconds and not hiding it
+        // in case mouse is pointed on tooltip
+        if (this.drTooltipMousleaveTimeout) {
+            if (this.mouseleaveTimer) {
+                clearTimeout(this.mouseleaveTimer);
+            }
+            this.mouseleaveTimer = setTimeout(() => {
+                var _a;
+                if (this.tooltipRef && !((_a = this.tooltipRef) === null || _a === void 0 ? void 0 : _a.instance.isMouseOn$.getValue())) {
+                    this.destroyTooltip();
+                }
+            }, this.drTooltipMousleaveTimeout);
+        }
+        else {
+            this.destroyTooltip();
+        }
     }
     createOverlay() {
         const positionStrategy = this.overlayPositionBuilder
@@ -1571,12 +1605,17 @@ class DrTooltipDirective {
         var _a;
         this.createOverlay();
         if (!((_a = this.overlayRef) === null || _a === void 0 ? void 0 : _a.hasAttached()) && this.content) {
-            const tooltipRef = this.overlayRef.attach(new ComponentPortal(TooltipComponent));
-            tooltipRef.instance.content = this.content;
-            tooltipRef.instance.contentContext = this.contentContext;
-            tooltipRef.instance.position = this.position;
-            tooltipRef.instance.options = this.options;
-            tooltipRef.instance.class = this.class + ' ' + this.position;
+            this.tooltipRef = this.overlayRef.attach(new ComponentPortal(TooltipComponent));
+            this.tooltipRef.instance.content = this.content;
+            this.tooltipRef.instance.contentContext = this.contentContext;
+            this.tooltipRef.instance.position = this.position;
+            this.tooltipRef.instance.options = this.options;
+            this.tooltipRef.instance.class = this.class + ' ' + this.position;
+            this.tooltipMouseOnSubscription = this.tooltipRef.instance.isMouseOn$.pipe(skip(1)).subscribe((isMouseOn) => {
+                if (!isMouseOn) {
+                    this.destroyTooltip();
+                }
+            });
         }
     }
     destroyTooltip() {
@@ -1584,6 +1623,10 @@ class DrTooltipDirective {
             this.overlayRef.dispose();
         }
         this.overlayRef = null;
+        this.tooltipRef = null;
+        if (this.tooltipMouseOnSubscription) {
+            this.tooltipMouseOnSubscription.unsubscribe();
+        }
     }
 }
 DrTooltipDirective.decorators = [
@@ -1601,6 +1644,7 @@ DrTooltipDirective.propDecorators = {
     contentContext: [{ type: Input, args: ['drTooltipContext',] }],
     position: [{ type: Input, args: ['drTooltipPosition',] }],
     class: [{ type: Input, args: ['drTooltipClass',] }],
+    drTooltipMousleaveTimeout: [{ type: Input }],
     drTooltipOptions: [{ type: Input }],
     showTooltip: [{ type: Input, args: ['drTooltipShow',] }],
     show: [{ type: HostListener, args: ['mouseenter',] }],
@@ -1880,521 +1924,106 @@ DrButtonComponent.propDecorators = {
 <dr-button [isDisabled]="false" [theme]="'text-link'">Text Link</dr-button>
 */
 
-const MAT_DEFAULT_DATE_FORMAT = 'MM/DD/yyyy';
-const DATE_INPUT_FORMAT = 'YYYY/MM/DD';
-const YEAR_FORMAT = 'yyyy';
-const MONTH_YEAR_FORMAT = 'MM/yyyy';
-const QUARTER_FORMAT = 'Q/yyyy';
-class CustomDateFormat {
-    constructor() {
-        this._parse = {
-            dateInput: DATE_INPUT_FORMAT
-        };
-        this._display = {
-            dateInput: DATE_INPUT_FORMAT,
-            monthYearLabel: 'MMM YYYY',
-            dateA11yLabel: 'LL',
-            monthYearA11yLabel: 'MMM YYYY',
-            quarterYearLabel: 'Q/YYYY',
-            yearLabel: 'YYYY'
-        };
-    }
-    set parse(parse) {
-        this._parse = Object.assign({}, this._parse, parse);
-    }
-    get parse() {
-        return this._parse;
-    }
-    set display(display) {
-        this._display = Object.assign({}, this._display, display);
-    }
-    get display() {
-        return this._display;
+class DrPopoverRef {
+    constructor(overlayRef) {
+        this.overlayRef = overlayRef;
+        this.onClose$ = new Subject();
+        // FIXME: this decision was made because of the incompatible rxjs version
+        /**
+         * Correct type is @type {Observable<any>}
+         */
+        this.onClose = this.onClose$.asObservable();
+        this.onBackdropClick = this.overlayRef.backdropClick();
     }
-    updateDateFormat(parse, display) {
-        this.parse = parse;
-        if (!display) {
-            display = parse;
-        }
-        this.display = display;
+    close(res) {
+        this.overlayRef.detach();
+        this.overlayRef.dispose();
+        this.onClose$.next(res);
+        this.onClose$.complete();
     }
 }
 
-const moment$2 = require('moment');
-class DrDatePickerService {
-    constructor() {
-        this.timeframe = 'day';
-        this.format = new BehaviorSubject(MAT_DEFAULT_DATE_FORMAT);
-        this.updatedQuater = new Subject();
-    }
-    getQuarterDisplay(value, format) {
-        return 'Q' + moment$2(value).quarter() + format.charAt(1) + moment$2(value).year();
-    }
-    setTimeframe(format) {
-        const lowerCaseFormat = format.toLowerCase();
-        switch (true) {
-            case lowerCaseFormat.includes('q'):
-                this.timeframe = 'quarter';
-                break;
-            case lowerCaseFormat.includes('d'):
-                this.timeframe = 'day';
-                break;
-            case lowerCaseFormat.includes('m'):
-                this.timeframe = 'month';
-                break;
-            case lowerCaseFormat.includes('y'):
-                this.timeframe = 'year';
-                break;
-            default:
-                this.timeframe = 'day';
-        }
+var DrPopoverAlignmentDimension;
+(function (DrPopoverAlignmentDimension) {
+    DrPopoverAlignmentDimension["Width"] = "width";
+    DrPopoverAlignmentDimension["Height"] = "height";
+})(DrPopoverAlignmentDimension || (DrPopoverAlignmentDimension = {}));
+const DEFAULT_CONFIG = {
+    hasBackdrop: false,
+    closeOnBackdropClick: false,
+    backdropClass: 'dr-popover-transparent-backdrop',
+};
+const DEFAULT_MODEL = {
+    position: 'bottom',
+    class: '',
+    overlayConfig: {},
+    manualClosing: { enabled: false },
+};
+function getAlignmentDimension(position) {
+    if (!POPUP_POSITIONS[position])
+        return DrPopoverAlignmentDimension.Width;
+    if ((position === null || position === void 0 ? void 0 : position.includes('left')) || (position === null || position === void 0 ? void 0 : position.includes('right'))) {
+        return DrPopoverAlignmentDimension.Height;
     }
+    return DrPopoverAlignmentDimension.Width;
 }
-DrDatePickerService.ɵprov = i0.ɵɵdefineInjectable({ factory: function DrDatePickerService_Factory() { return new DrDatePickerService(); }, token: DrDatePickerService, providedIn: "root" });
-DrDatePickerService.decorators = [
-    { type: Injectable, args: [{
-                providedIn: 'root',
-            },] }
-];
 
-const moment$1 = require('moment');
-class DrDatePickerCustomHeaderComponent {
-    constructor(_calendar, _dateAdapter, _dateFormats, cdr, datePickerService) {
-        this._calendar = _calendar;
-        this._dateAdapter = _dateAdapter;
-        this._dateFormats = _dateFormats;
+class DrPopoverComponent {
+    constructor(cdr, componentFactoryResolver, viewContainerRef, elementRef, popoverRef) {
         this.cdr = cdr;
-        this.datePickerService = datePickerService;
-        this._destroyed = new Subject();
-        this.quarters = [1, 2, 3, 4];
-        this.selectedQuarter = 1;
-        this.timeframeOptions = [{
-                title: 'Day',
-                value: 'month',
-                format: MAT_DEFAULT_DATE_FORMAT,
-                periodLabel: () => this._dateAdapter
-                    .format(this._calendar.activeDate, this._dateFormats.display.monthYearLabel)
-                    .toLocaleUpperCase()
-            }, {
-                title: 'Month',
-                value: 'year',
-                format: MONTH_YEAR_FORMAT,
-                periodLabel: () => String(moment$1(this._calendar.activeDate).year())
-            }, {
-                title: 'Quarter',
-                value: 'none',
-                format: QUARTER_FORMAT,
-                periodLabel: () => String(moment$1(this._calendar.activeDate).year())
-            }, {
-                title: 'Year',
-                value: 'multi-year',
-                format: YEAR_FORMAT,
-                periodLabel: () => {
-                    const currentYear = moment$1(this._calendar.activeDate).year();
-                    const startPeriod = Math.floor(currentYear / 24) * 24;
-                    return startPeriod + '-' + (startPeriod + 23);
-                }
-            }];
-        this.pagingSetup = {
-            'year': (forward) => this.pagingDateChange('addCalendarYears', 1, forward),
-            'none': (forward) => this.pagingDateChange('addCalendarYears', 1, forward),
-            'month': (forward) => this.pagingDateChange('addCalendarMonths', 1, forward),
-            'multi-year': (forward) => this.pagingDateChange('addCalendarYears', 24, forward)
-        };
-        this.selectedTimeframe = 'month';
-        this.timeframeSelection = false;
-        this.periodMonthLabel = '';
-        this.periodYearLabel = '';
-        _calendar.stateChanges.pipe(takeUntil(this._destroyed)).subscribe(() => this.setPeriodLabels());
-        this.datePickerService.format
-            .pipe(take(1))
-            .subscribe(value => {
-            this.selectedTimeframe = this.timeframeOptions.filter(option => option.format == value)[0].value;
-            this.setPeriodLabels();
-        });
-        _calendar.viewChanged.pipe(takeUntil(this._destroyed)).subscribe(() => this.setPeriodLabels());
-    }
-    ngOnDestroy() {
-        this._destroyed.next();
-        this._destroyed.complete();
+        this.componentFactoryResolver = componentFactoryResolver;
+        this.viewContainerRef = viewContainerRef;
+        this.elementRef = elementRef;
+        this.popoverRef = popoverRef;
+        this.class = '';
+        this.isContentTemplate = false;
+        this.popover = true;
     }
-    setPeriodLabels() {
-        const currentTimeframeOption = this.timeframeOptions.filter(option => option.value === this._calendar.currentView)[0];
-        const fullPeriodLabel = currentTimeframeOption.periodLabel();
-        if (this._calendar.currentView === 'month') {
-            this.periodMonthLabel = fullPeriodLabel.slice(0, 3);
-            this.periodYearLabel = fullPeriodLabel.slice(4);
-        }
-        else {
-            this.periodMonthLabel = '';
-            this.periodYearLabel = fullPeriodLabel;
+    clickOutside(e) {
+        const isTargetHost = this.hostRef instanceof ElementRef && (this.hostRef.nativeElement === e.target || this.hostRef.nativeElement.contains(e.target));
+        const isTargetInPopover = this.elementRef.nativeElement.contains(e.target);
+        const isTargetInDatepicker = e.target.closest('mat-datepicker-popup');
+        const isTargetInSelect = e.target.closest('ng-dropdown-panel');
+        const isTargetInDatepickerContent = e.target.closest('mat-datepicker-content');
+        if (!isTargetHost
+            && !isTargetInPopover
+            && !isTargetInDatepicker
+            && !isTargetInSelect
+            && !isTargetInDatepickerContent
+            && !this.manualClosing.enabled) {
+            this.popoverRef.close();
         }
-        this.cdr.markForCheck();
     }
-    setTimeframe() {
-        this.timeframeSelection = false;
-        this._calendar.currentView = this.selectedTimeframe;
-        const chosenTimeframeOption = this.timeframeOptions.filter(option => option.value === this.selectedTimeframe)[0];
-        this.datePickerService.format.next(chosenTimeframeOption.format);
-        this.datePickerService.setTimeframe(chosenTimeframeOption.format);
-        if (this.selectedTimeframe == 'none') {
-            this.selectedQuarter = moment$1(this._calendar.activeDate).quarter();
+    ngOnInit() {
+        this.isContentTemplate = this.content instanceof TemplateRef;
+        if (!this.isContentTemplate) {
+            this.componentRef = this.viewContainerRef.createComponent(this.componentFactoryResolver.resolveComponentFactory(this.content));
+            Object.assign(this.componentRef.instance, this.contentContext);
+            this.popoverContainer.nativeElement.appendChild(this.componentRef.location.nativeElement);
         }
-    }
-    get currentViewIsQuater() {
-        return !['month', 'year', 'multi-year'].includes(this._calendar.currentView);
-    }
-    switchViewOnClickOnPeriodLabel(view) {
-        this._calendar.currentView = view;
-    }
-    onSelectQuater(quarterNumber) {
-        const monthsInQuarter = 3;
-        this.selectedQuarter = moment$1(this._calendar.activeDate).quarter();
-        const unadaptedDate = this._dateAdapter.addCalendarMonths(this._calendar.activeDate, monthsInQuarter * (quarterNumber - this.selectedQuarter));
-        this._calendar.activeDate = unadaptedDate;
-        this.datePickerService.updatedQuater.next(moment$1(unadaptedDate));
-        this.datePickerService.calendarInstance.close();
-    }
-    pagingClicked(forward) {
-        this.pagingSetup[this._calendar.currentView] && this.pagingSetup[this._calendar.currentView](forward);
-    }
-    pagingDateChange(actionCall, amount, forward) {
-        this._calendar.activeDate = this._dateAdapter[actionCall](this._calendar.activeDate, forward ? amount : -amount);
-        this.setPeriodLabels();
+        if (this.alignment === 'host') {
+            this[getAlignmentDimension(this.position)] = '100%';
+        }
+        this.cdr.detectChanges();
     }
 }
-DrDatePickerCustomHeaderComponent.decorators = [
+DrPopoverComponent.decorators = [
     { type: Component, args: [{
-                selector: 'dr-date-picker_custom-header.component',
-                template: "<div class=\"dr-datepicker__timeframe-select__wrapper\">\n    <dr-select \n        class=\"dr-datepicker__timeframe-select\"\n        [(ngModel)]=\"selectedTimeframe\"\n        [items]=\"timeframeOptions\"\n        bindLabel=\"title\"\n        bindValue=\"value\"\n        (ngModelChange)=\"setTimeframe()\">\n    </dr-select>\n</div>\n\n<div class=\"dr-date-paging\">\n    <div class=\"dr-date-paging flip-page-button\"\n        (click)=\"pagingClicked(false)\">\n            <i class=\"dr-icon-arrow-left presentation_buttons-navigate_input\"></i>    \n    </div>\n    <span class=\"example-header-label\">\n        <span (click)=\"switchViewOnClickOnPeriodLabel('year')\">{{periodMonthLabel + ' '}}</span> \n        <span (click)=\"switchViewOnClickOnPeriodLabel('multi-year')\">{{periodYearLabel}}</span>\n    </span>\n    <div class=\"dr-date-paging flip-page-button\"\n        (click)=\"pagingClicked(true)\">\n            <i class=\"dr-icon-arrow-right presentation_buttons-navigate_input\"></i>\n    </div>\n</div>\n<div #quarterlyDatePicker class=\"dr-quarterly-datepicker\" *ngIf=\"currentViewIsQuater\">\n    <div *ngFor=\"let quarter of quarters\" \n        class=\"quarter-selector\" (click)=\"onSelectQuater(quarter)\"\n        [class]=\"quarter == selectedQuarter ? 'selected' : ''\"\n        >Q{{quarter}}</div>\n</div>\n\n",
+                selector: 'dr-popover',
+                template: "<div class=\"dr-popover\" [class]=\"class\" #popoverContainer>\n    <ng-container *ngIf=\"isContentTemplate\">\n        <ng-container *ngTemplateOutlet=\"content; context: contentContext\"></ng-container>\n    </ng-container>\n</div>\n",
+                animations: [
+                    trigger('popover', POPUP_ANIMATION),
+                ],
                 changeDetection: ChangeDetectionStrategy.OnPush,
-                styles: [":host{height:54px;align-items:center;font-family:\"Poppins\";font-style:normal;font-weight:600;font-size:14px;line-height:22px}.dr-datepicker__timeframe-select__wrapper{background-color:#f9faff;padding:16px 32px;border-radius:18px 18px 0 0}.dr-date-paging{display:flex;flex-direction:row;justify-content:space-between;align-items:center;padding:16px 8px;grid-gap:4px;gap:4px}.dr-date-paging.flip-page-button{width:20px;height:20px;padding:0;color:#4e566c}.dr-date-paging.flip-page-button:hover{border-radius:50%;background:#F2F2FB;color:#4646ce}.example-header-label{cursor:pointer}.dr-quarterly-datepicker{display:flex;justify-content:space-between;padding:10px}.dr-quarterly-datepicker .quarter-selector{display:block;width:74px;height:40px;text-align:center;border-radius:40px;font-weight:400;padding-top:9px}.dr-quarterly-datepicker .quarter-selector:hover{background:#F2F2FB;color:#4646ce;font-weight:600;cursor:pointer}.dr-quarterly-datepicker .quarter-selector.selected{background-color:#4646ce;color:#f3f7ff;font-weight:600}\n"]
+                styles: [".dr-popover{display:flex;background:#fff;border:1px solid #E5E5E5;border-radius:5px;box-sizing:border-box;box-shadow:0 4px 14px #0003;font-size:12px;color:#545a6b;max-height:100vh;max-width:100vw;overflow:auto}::ng-deep .dr-popover-transparent-backdrop{background-color:transparent}\n"]
             },] }
 ];
-DrDatePickerCustomHeaderComponent.ctorParameters = () => [
-    { type: MatCalendar },
-    { type: DateAdapter },
-    { type: CustomDateFormat, decorators: [{ type: Inject, args: [MAT_DATE_FORMATS,] }] },
+DrPopoverComponent.ctorParameters = () => [
     { type: ChangeDetectorRef },
-    { type: DrDatePickerService }
-];
-
-const moment = require('moment');
-const noop = () => { };
-const ɵ0$1 = noop;
-class DrDatePickerComponent {
-    constructor(cdr, _dateAdapter, datePickerService) {
-        this.cdr = cdr;
-        this._dateAdapter = _dateAdapter;
-        this.datePickerService = datePickerService;
-        this._destroyed = new Subject();
-        this.readonly = true;
-        this._format = MAT_DEFAULT_DATE_FORMAT;
-        this.customHeader = DrDatePickerCustomHeaderComponent;
-        this.onChangeFormat = new EventEmitter();
-        this.timeframeSelection = false;
-        this.takeEndOfPeriod = false;
-        this.placeholder = 'Select';
-        this.min = null;
-        this.max = null;
-        this.calendarViewSetup = {
-            'year': (calendar) => calendar.currentView = 'multi-year',
-            'month': (calendar) => calendar.currentView = 'year',
-            'quarter': (calendar) => calendar.currentView = 'none',
-            'day': (calendar) => calendar.currentView = 'month'
-        };
-        this.pagingSetup = {
-            'year': (forward) => this.pagingDateChange('addCalendarYears', 1, forward),
-            'quarter': (forward) => this.pagingDateChange('addCalendarMonths', 3, forward),
-            'month': (forward) => this.pagingDateChange('addCalendarMonths', 1, forward),
-            'day': (forward) => this.pagingDateChange('addCalendarDays', 1, forward)
-        };
-        this.innerValue = null;
-        this.onTouchedCallback = noop;
-        this.onChangeCallback = noop;
-        datePickerService.format
-            .pipe(takeUntil(this._destroyed))
-            .subscribe((value) => {
-            this._format = value;
-            this.onChangeFormat.emit(this.normalizeValue(value));
-            cdr.markForCheck();
-        });
-        datePickerService.updatedQuater
-            .pipe(takeUntil(this._destroyed))
-            .subscribe((value) => {
-            this.tryToNormalaizeTimeframe(value, 'quarter');
-            this.writeValue(value);
-            this.onChangeCallback(value);
-        });
-    }
-    set format(value) {
-        if (value) {
-            value = this.normalizeValue(value);
-            this._format = value;
-            this.datePickerService.format.next(value);
-            this.datePickerService.setTimeframe(value);
-            this.cdr.markForCheck();
-        }
-    }
-    ngAfterViewInit() {
-        this.datePickerService.calendarInstance = this.dp;
-        if (this._format === MAT_DEFAULT_DATE_FORMAT) {
-            return;
-        }
-        setTimeout(() => {
-            const popupInstance = this.dp._popupComponentRef.instance;
-            const calenderInstance = popupInstance._calendar._calendarHeaderPortal._attachedHost._attachedRef.instance;
-            calenderInstance.currentPeriodClicked = function () {
-                this.calendarViewSetup[this.datePickerService.timeframe] && this.calendarViewSetup[this.datePickerService.timeframe](this.calendar);
-            };
-        }, 1000);
-    }
-    tryToNormalaizeTimeframe(normalizedRef, timeframe) {
-        if (this.takeEndOfPeriod) {
-            normalizedRef.endOf(timeframe);
-        }
-        normalizedRef.set('hour', 12);
-    }
-    get value() {
-        return this.innerValue;
-    }
-    set value(v) {
-        if (v !== this.innerValue) {
-            this.innerValue = v;
-            this.onChangeCallback(v);
-        }
-        this.cdr.markForCheck();
-    }
-    registerOnChange(fn) {
-        this.onChangeCallback = fn;
-    }
-    registerOnTouched(fn) {
-        this.onTouchedCallback = fn;
-    }
-    writeValue(value) {
-        if (value !== this.innerValue) {
-            if (value && typeof value === 'number') {
-                this.innerValue = moment.unix(value);
-            }
-            else {
-                this.innerValue = value;
-            }
-            this.tryToNormalaizeTimeframe(this.innerValue, this.datePickerService.timeframe);
-            this.cdr.markForCheck();
-        }
-    }
-    get quarterDisplay() {
-        return this.datePickerService.getQuarterDisplay(this.value, this._format);
-    }
-    normalizeValue(value) {
-        if (value.includes('d')) {
-            value = value.replace(/d/g, 'D');
-        }
-        else if (value.includes('D')) {
-            value = value.replace(/D/g, 'd');
-        }
-        return value;
-    }
-    chosenMonthHandler(normalizedMonth, datepicker) {
-        if (this.datePickerService.timeframe === 'month') {
-            this.tryToNormalaizeTimeframe(normalizedMonth, 'month');
-            this.writeValue(normalizedMonth);
-            this.onChangeCallback(normalizedMonth);
-            datepicker.close();
-        }
-    }
-    chosenYearHandler(normalizedYear, datepicker) {
-        if (this.datePickerService.timeframe === 'year') {
-            this.tryToNormalaizeTimeframe(normalizedYear, 'year');
-            this.writeValue(normalizedYear);
-            this.onChangeCallback(normalizedYear);
-            datepicker.close();
-        }
-    }
-    pagingClicked(forward) {
-        this.pagingSetup[this.datePickerService.timeframe] && this.pagingSetup[this.datePickerService.timeframe](forward);
-        this.datePickerService.calendarInstance.close();
-    }
-    pagingDateChange(actionCall, amount, forward) {
-        const newValue = this._dateAdapter[actionCall](this.innerValue, forward ? amount : -amount);
-        this.writeValue(newValue);
-        this.onChangeCallback(newValue);
-    }
-    ngOnDestroy() {
-        this._destroyed.next();
-        this._destroyed.complete();
-    }
-}
-DrDatePickerComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'dr-date-picker',
-                template: "<div class=\"dr-datepicker__with-timeframe-selection\"\n    *ngIf=\"timeframeSelection;else noTimeframeSelection\">\n    <div class=\"dr-input-date-paging__flip-page-button\"\n        (click)=\"pagingClicked(false)\"\n    >\n        <i class=\"dr-icon-arrow-left presentation_buttons-navigate_input\"></i>    \n    </div>\n        <div class=\"dr-input-date-paging__quarter-display\"\n            *ngIf=\"_format.includes('Q')\"\n            (click)=\"datePicker.open()\"\n        >{{quarterDisplay}}</div>\n            <input [(ngModel)]=\"value\"\n                (click)=\"datePicker.open()\"\n                [matDatepicker]=\"datePicker\"\n                [placeholder]=\"placeholder\"\n                [drDatePickerFormat]=\"_format\"\n                [readonly]=\"readonly\"\n                [class]=\"_format.includes('Q') ? 'when-quarter' : ''\"\n                [min]=\"min\"\n                [max]=\"max\"/>\n    <div class=\"dr-input-date-paging__flip-page-button\"\n        (click)=\"pagingClicked(true)\">\n        <i class=\"dr-icon-arrow-right presentation_buttons-navigate_input\"></i>\n    </div>\n    <mat-datepicker #datePicker\n        class=\"dr-timeframe-datepicker\"\n        [calendarHeaderComponent]=\"customHeader\"\n        (yearSelected)=\"chosenYearHandler($event, datePicker)\"\n        (monthSelected)=\"chosenMonthHandler($event, datePicker)\">\n    </mat-datepicker>\n</div>\n\n<ng-template class=\"dr-datepicker__no-timeframe-selection\"\n    #noTimeframeSelection>\n    <i class=\"dr-icon-schedule\"></i>\n    <input [(ngModel)]=\"value\"\n        (click)=\"datePicker.open()\"\n        [matDatepicker]=\"datePicker\"\n        [placeholder]=\"placeholder\"\n        [drDatePickerFormat]=\"_format\"\n        [readonly]=\"readonly\"\n        [min]=\"min\"\n        [max]=\"max\"/>\n    <mat-datepicker #datePicker\n        (yearSelected)=\"chosenYearHandler($event, datePicker)\"\n        (monthSelected)=\"chosenMonthHandler($event, datePicker)\">\n    </mat-datepicker>\n</ng-template>\n\n",
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                providers: [
-                    { provide: NG_VALUE_ACCESSOR, useExisting: DrDatePickerComponent, multi: true }
-                ],
-                styles: [":host{position:relative;width:100%;display:flex;flex-direction:row;min-height:32px;height:32px;font-size:14px;font-family:\"Poppins\",sans-serif;background-color:#fff;border:1px solid #C3C4CE;border-radius:6px;color:#85889c;overflow:hidden;outline:none;cursor:pointer}:host.period-datepicker{border:none}:host:hover{border-color:#85889c}:host:focus-within{border-color:#21b8f1!important;color:#151b3f}:host.disabled{pointer-events:none;border:none;color:#85889c;background:#E5E6EA}:host.ng-valid.ng-dirty{border-color:#03a678}:host.ng-invalid.ng-dirty:not(:focus-within){border-color:#de2833!important}:host.ng-untouched.ng-valid{border-color:#c3c4ce}:host:after,:host:before{position:absolute;display:flex;border-color:#999999 transparent transparent;color:#999}:host:after{content:\"\";height:0;width:0;border-style:solid;border-width:5px 5px 2.5px;right:11px;top:13px}:host i{position:absolute;color:#999;left:8px;top:3px}:host input{display:flex;flex-grow:1;height:100%;border:none;text-align:left;padding-left:35px;padding-right:25px;cursor:pointer!important;outline:none}:host input.when-quarter{position:absolute;visibility:hidden}:host input:disabled{border:none;color:#85889c;background:transparent}:host input::-webkit-search-decoration,:host input::-webkit-search-cancel-button,:host input::-webkit-search-results-button,:host input::-webkit-search-results-decoration{-webkit-appearance:none}:host .dr-datepicker__with-timeframe-selection{display:flex;align-items:center}:host .dr-datepicker__with-timeframe-selection .dr-input-date-paging__flip-page-button{width:25px;height:25px;border-radius:16px;padding:0;background-color:#fff}:host .dr-datepicker__with-timeframe-selection .dr-input-date-paging__flip-page-button i{position:relative;color:#0c142b;top:unset;left:unset}:host .dr-datepicker__with-timeframe-selection .dr-input-date-paging__flip-page-button:hover{background-color:#f2f2fb;color:#4646ce}:host .dr-datepicker__with-timeframe-selection input{width:90px;padding:0;border-radius:5px;text-decoration:underline;text-align:center}:host .dr-datepicker__with-timeframe-selection input:hover{background-color:#f2f2fb;color:#4646ce}:host .dr-input-date-paging__quarter-display{width:90px;height:22px;padding-left:0;text-align:center;line-height:22px;color:#0c142b;-webkit-text-decoration-line:underline;text-decoration-line:underline}:host .dr-input-date-paging__quarter-display:hover{background-color:#f2f2fb;border-radius:5px;cursor:pointer;-webkit-text-decoration-line:underline;text-decoration-line:underline;color:#4646ce}::ng-deep .mat-datepicker-content{margin:7px 0;box-shadow:0 4px 8px 1px #00000040;border-radius:12px!important}::ng-deep .mat-datepicker-content button[disabled]{border:inherit;color:inherit;background-color:inherit}::ng-deep .mat-datepicker-content button[disabled]:hover{border:inherit}::ng-deep .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){background:#F2F2FB;color:#4646ce;font-weight:600}::ng-deep .mat-calendar-body-selected{background-color:#4646ce;color:#f2f2fb;font-weight:600}::ng-deep .mat-calendar-body-today.mat-calendar-body-selected{box-shadow:none}::ng-deep .mat-button-focus-overlay{background:#F3F7FF}::ng-deep .mat-calendar-controls .mat-icon-button:hover .mat-button-focus-overlay{opacity:1!important;background:#F3F7FF;transition:opacity .2s cubic-bezier(.35,0,.25,1)}::ng-deep .mat-calendar-controls .mat-calendar-period-button:hover{background:#F3F7FF;transition:background .2s cubic-bezier(.35,0,.25,1)}::ng-deep .mat-calendar-table-header th{font-size:14px;font-weight:600;color:#19181a}::ng-deep .mat-calendar-table-header-divider{display:none}::ng-deep .mat-calendar-body-label{color:#fff;padding:0}\n"]
-            },] }
-];
-DrDatePickerComponent.ctorParameters = () => [
-    { type: ChangeDetectorRef },
-    { type: DateAdapter },
-    { type: DrDatePickerService }
-];
-DrDatePickerComponent.propDecorators = {
-    _format: [{ type: Input }],
-    onChangeFormat: [{ type: Output }],
-    format: [{ type: Input }],
-    timeframeSelection: [{ type: Input }],
-    takeEndOfPeriod: [{ type: Input }],
-    placeholder: [{ type: Input }],
-    min: [{ type: Input }],
-    max: [{ type: Input }],
-    dp: [{ type: ViewChild, args: ['datePicker',] }]
-};
-
-class DrDatePickerFormatDirective {
-    constructor(matDateFormat, ngControl) {
-        this.matDateFormat = matDateFormat;
-        this.ngControl = ngControl;
-    }
-    set datePickerFormat(format) {
-        var _a;
-        if (this.configDateParse) {
-            this.matDateFormat.updateDateFormat(this.configDateParse, this.configDateDisplay);
-        }
-        else {
-            this.matDateFormat.updateDateFormat({ dateInput: format });
-        }
-        const value = this.ngControl.value;
-        (_a = this.ngControl.valueAccessor) === null || _a === void 0 ? void 0 : _a.writeValue(value);
-    }
-}
-DrDatePickerFormatDirective.decorators = [
-    { type: Directive, args: [{
-                selector: '[drDatePickerFormat]',
-                providers: [
-                    {
-                        provide: DateAdapter,
-                        useClass: MomentDateAdapter
-                    },
-                    {
-                        provide: MAT_DATE_FORMATS,
-                        useClass: CustomDateFormat
-                    }
-                ]
-            },] }
-];
-DrDatePickerFormatDirective.ctorParameters = () => [
-    { type: CustomDateFormat, decorators: [{ type: Inject, args: [MAT_DATE_FORMATS,] }] },
-    { type: NgControl, decorators: [{ type: Optional }] }
-];
-DrDatePickerFormatDirective.propDecorators = {
-    configDateParse: [{ type: Input }],
-    configDateDisplay: [{ type: Input }],
-    datePickerFormat: [{ type: Input, args: ['drDatePickerFormat',] }]
-};
-
-class DrPopoverRef {
-    constructor(overlayRef) {
-        this.overlayRef = overlayRef;
-        this.onClose$ = new Subject();
-        // FIXME: this decision was made because of the incompatible rxjs version
-        /**
-         * Correct type is @type {Observable<any>}
-         */
-        this.onClose = this.onClose$.asObservable();
-        this.onBackdropClick = this.overlayRef.backdropClick();
-    }
-    close(res) {
-        this.overlayRef.detach();
-        this.overlayRef.dispose();
-        this.onClose$.next(res);
-        this.onClose$.complete();
-    }
-}
-
-var DrPopoverAlignmentDimension;
-(function (DrPopoverAlignmentDimension) {
-    DrPopoverAlignmentDimension["Width"] = "width";
-    DrPopoverAlignmentDimension["Height"] = "height";
-})(DrPopoverAlignmentDimension || (DrPopoverAlignmentDimension = {}));
-const DEFAULT_CONFIG = {
-    hasBackdrop: false,
-    closeOnBackdropClick: false,
-    backdropClass: 'dr-popover-transparent-backdrop',
-};
-const DEFAULT_MODEL = {
-    position: 'bottom',
-    class: '',
-    overlayConfig: {},
-    manualClosing: { enabled: false },
-};
-function getAlignmentDimension(position) {
-    if (!POPUP_POSITIONS[position])
-        return DrPopoverAlignmentDimension.Width;
-    if ((position === null || position === void 0 ? void 0 : position.includes('left')) || (position === null || position === void 0 ? void 0 : position.includes('right'))) {
-        return DrPopoverAlignmentDimension.Height;
-    }
-    return DrPopoverAlignmentDimension.Width;
-}
-
-class DrPopoverComponent {
-    constructor(cdr, componentFactoryResolver, viewContainerRef, elementRef, popoverRef) {
-        this.cdr = cdr;
-        this.componentFactoryResolver = componentFactoryResolver;
-        this.viewContainerRef = viewContainerRef;
-        this.elementRef = elementRef;
-        this.popoverRef = popoverRef;
-        this.class = '';
-        this.isContentTemplate = false;
-        this.popover = true;
-    }
-    clickOutside(e) {
-        const isTargetHost = this.hostRef instanceof ElementRef && (this.hostRef.nativeElement === e.target || this.hostRef.nativeElement.contains(e.target));
-        const isTargetInPopover = this.elementRef.nativeElement.contains(e.target);
-        const isTargetInDatepicker = e.target.closest('mat-datepicker-popup');
-        const isTargetInSelect = e.target.closest('ng-dropdown-panel');
-        const isTargetInDatepickerContent = e.target.closest('mat-datepicker-content');
-        if (!isTargetHost
-            && !isTargetInPopover
-            && !isTargetInDatepicker
-            && !isTargetInSelect
-            && !isTargetInDatepickerContent
-            && !this.manualClosing.enabled) {
-            this.popoverRef.close();
-        }
-    }
-    ngOnInit() {
-        this.isContentTemplate = this.content instanceof TemplateRef;
-        if (!this.isContentTemplate) {
-            this.componentRef = this.viewContainerRef.createComponent(this.componentFactoryResolver.resolveComponentFactory(this.content));
-            Object.assign(this.componentRef.instance, this.contentContext);
-            this.popoverContainer.nativeElement.appendChild(this.componentRef.location.nativeElement);
-        }
-        if (this.alignment === 'host') {
-            this[getAlignmentDimension(this.position)] = '100%';
-        }
-        this.cdr.detectChanges();
-    }
-}
-DrPopoverComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'dr-popover',
-                template: "<div class=\"dr-popover\" [class]=\"class\" #popoverContainer>\n    <ng-container *ngIf=\"isContentTemplate\">\n        <ng-container *ngTemplateOutlet=\"content; context: contentContext\"></ng-container>\n    </ng-container>\n</div>\n",
-                animations: [
-                    trigger('popover', POPUP_ANIMATION),
-                ],
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                styles: [".dr-popover{display:flex;background:#fff;border:1px solid #E5E5E5;border-radius:5px;box-sizing:border-box;box-shadow:0 4px 14px #0003;font-size:12px;color:#545a6b;max-height:100vh;max-width:100vw;overflow:auto}::ng-deep .dr-popover-transparent-backdrop{background-color:transparent}\n"]
-            },] }
-];
-DrPopoverComponent.ctorParameters = () => [
-    { type: ChangeDetectorRef },
-    { type: ComponentFactoryResolver },
-    { type: ViewContainerRef },
-    { type: ElementRef },
-    { type: DrPopoverRef }
+    { type: ComponentFactoryResolver },
+    { type: ViewContainerRef },
+    { type: ElementRef },
+    { type: DrPopoverRef }
 ];
 DrPopoverComponent.propDecorators = {
     content: [{ type: Input }],
@@ -3260,15 +2889,62 @@ DrModelDebounceChangeDirective.propDecorators = {
     ngModelDebounceChange: [{ type: Output }]
 };
 
-const components$2 = [DateTagComponent,
-    DayTagComponent,
-    WeekTagComponent,
-    MonthTagComponent,
-    QuarterTagComponent,
-    AnyTagComponent,
-    YearTagComponent,
+const MAT_DEFAULT_DATE_FORMAT = 'MM/DD/yyyy';
+const DATE_INPUT_FORMAT = 'YYYY/MM/DD';
+const YEAR_FORMAT = 'yyyy';
+const MONTH_YEAR_FORMAT = 'MM/yyyy';
+const QUARTER_FORMAT = 'Q/yyyy';
+class CustomDateFormat {
+    constructor() {
+        this._parse = {
+            dateInput: DATE_INPUT_FORMAT
+        };
+        this._display = {
+            dateInput: DATE_INPUT_FORMAT,
+            monthYearLabel: 'MMM YYYY',
+            dateA11yLabel: 'LL',
+            monthYearA11yLabel: 'MMM YYYY',
+            quarterYearLabel: 'Q/YYYY',
+            yearLabel: 'YYYY'
+        };
+    }
+    set parse(parse) {
+        this._parse = Object.assign({}, this._parse, parse);
+    }
+    get parse() {
+        return this._parse;
+    }
+    set display(display) {
+        this._display = Object.assign({}, this._display, display);
+    }
+    get display() {
+        return this._display;
+    }
+    updateDateFormat(parse, display) {
+        this.parse = parse;
+        if (!display) {
+            display = parse;
+        }
+        this.display = display;
+    }
+}
+var DatePickerPeriodPosition;
+(function (DatePickerPeriodPosition) {
+    DatePickerPeriodPosition[DatePickerPeriodPosition["END_OF_PERIOD"] = 0] = "END_OF_PERIOD";
+    DatePickerPeriodPosition[DatePickerPeriodPosition["MIDDLE_OF_PERIOD"] = 1] = "MIDDLE_OF_PERIOD";
+    DatePickerPeriodPosition[DatePickerPeriodPosition["START_OF_PERIOD"] = 2] = "START_OF_PERIOD";
+    DatePickerPeriodPosition[DatePickerPeriodPosition["DEFAULT"] = 3] = "DEFAULT";
+})(DatePickerPeriodPosition || (DatePickerPeriodPosition = {}));
+
+const components$2 = [DateTagComponent,
+    DayTagComponent,
+    WeekTagComponent,
+    MonthTagComponent,
+    QuarterTagComponent,
+    AnyTagComponent,
+    YearTagComponent,
     ForecastTagComponent];
-const ɵ0 = { useUtc: true };
+const ɵ0$1 = { useUtc: true };
 class DateTagModule {
 }
 DateTagModule.decorators = [
@@ -3286,7 +2962,7 @@ DateTagModule.decorators = [
                 ],
                 exports: components$2,
                 providers: [
-                    { provide: MAT_MOMENT_DATE_ADAPTER_OPTIONS, useValue: ɵ0 }
+                    { provide: MAT_MOMENT_DATE_ADAPTER_OPTIONS, useValue: ɵ0$1 }
                 ],
                 declarations: components$2,
             },] }
@@ -3331,6 +3007,436 @@ DrTagModule.decorators = [
             },] }
 ];
 
+const moment$2 = require('moment');
+class DrDatePickerService {
+    constructor() {
+        this.isTimeframeSelectionEnabled = false;
+        this.timeframe = 'day';
+        this.format$ = new BehaviorSubject(MAT_DEFAULT_DATE_FORMAT);
+        this.updatedQuarter$ = new Subject();
+        this.formatConfig = {
+            day: MAT_DEFAULT_DATE_FORMAT,
+            month: MONTH_YEAR_FORMAT,
+            year: YEAR_FORMAT,
+            quarter: QUARTER_FORMAT,
+        };
+    }
+    getQuarterDisplay(value) {
+        return 'Q' + moment$2(value).quarter() + this.format$.getValue().charAt(1) + moment$2(value).year();
+    }
+    getTimeframe(format) {
+        const defaultFrame = 'day';
+        if (!format) {
+            return defaultFrame;
+        }
+        const lowerCaseFormat = format.toLowerCase();
+        switch (true) {
+            case lowerCaseFormat.includes('q'):
+                return 'quarter';
+            case lowerCaseFormat.includes('d'):
+                return 'day';
+            case lowerCaseFormat.includes('m'):
+                return 'month';
+            case lowerCaseFormat.includes('y'):
+                return 'year';
+            default:
+                return defaultFrame;
+        }
+    }
+    getConfiguredFormat(timeframe) {
+        return this.formatConfig[timeframe];
+    }
+    updateTimeframeAndFormat(format) {
+        const normalizedFormat = this.normalizeValue(format || this.format$.getValue());
+        this.timeframe = this.getTimeframe(normalizedFormat);
+        this.format$.next(this.getConfiguredFormat(this.timeframe));
+    }
+    normalizeValue(value) {
+        return value.replace(/d/g, 'D');
+    }
+}
+DrDatePickerService.decorators = [
+    { type: Injectable }
+];
+
+const moment$1 = require('moment');
+class DrDatePickerCustomHeaderComponent {
+    constructor(_calendar, _dateAdapter, _dateFormats, cdr, datePickerService) {
+        this._calendar = _calendar;
+        this._dateAdapter = _dateAdapter;
+        this._dateFormats = _dateFormats;
+        this.cdr = cdr;
+        this.datePickerService = datePickerService;
+        this._destroyed = new Subject();
+        this.quarters = [1, 2, 3, 4];
+        this.selectedQuarter = 1;
+        this.timeframeOptions = [{
+                title: 'Day',
+                value: 'month',
+                format: this.datePickerService.formatConfig.day,
+                periodLabel: () => this._dateAdapter
+                    .format(this._calendar.activeDate, this._dateFormats.display.monthYearLabel)
+                    .toLocaleUpperCase()
+            }, {
+                title: 'Month',
+                value: 'year',
+                format: this.datePickerService.formatConfig.month,
+                periodLabel: () => String(moment$1(this._calendar.activeDate).year())
+            }, {
+                title: 'Quarter',
+                value: 'none',
+                format: this.datePickerService.formatConfig.quarter,
+                periodLabel: () => String(moment$1(this._calendar.activeDate).year())
+            }, {
+                title: 'Year',
+                value: 'multi-year',
+                format: this.datePickerService.formatConfig.year,
+                periodLabel: () => {
+                    const currentYear = moment$1(this._calendar.activeDate).year();
+                    const startPeriod = Math.floor(currentYear / 24) * 24;
+                    return startPeriod + '-' + (startPeriod + 23);
+                }
+            }];
+        this.pagingSetup = {
+            'year': (forward) => this.pagingDateChange('addCalendarYears', 1, forward),
+            'none': (forward) => this.pagingDateChange('addCalendarYears', 1, forward),
+            'month': (forward) => this.pagingDateChange('addCalendarMonths', 1, forward),
+            'multi-year': (forward) => this.pagingDateChange('addCalendarYears', 24, forward)
+        };
+        this.selectedTimeframe = 'month';
+        this.timeframeSelection = false;
+        this.periodMonthLabel = '';
+        this.periodYearLabel = '';
+        _calendar.stateChanges.pipe(takeUntil(this._destroyed)).subscribe(() => this.setPeriodLabels());
+        this.datePickerService.format$
+            .pipe(take(1))
+            .subscribe(value => {
+            this.selectedTimeframe = this.timeframeOptions.filter(option => option.format == value)[0].value;
+            this.setPeriodLabels();
+        });
+        _calendar.viewChanged.pipe(takeUntil(this._destroyed)).subscribe(() => this.setPeriodLabels());
+    }
+    ngOnDestroy() {
+        this._destroyed.next();
+        this._destroyed.complete();
+    }
+    setPeriodLabels() {
+        const currentTimeframeOption = this.timeframeOptions.filter(option => option.value === this._calendar.currentView)[0];
+        const fullPeriodLabel = currentTimeframeOption.periodLabel();
+        if (this._calendar.currentView === 'month') {
+            this.periodMonthLabel = fullPeriodLabel.slice(0, 3);
+            this.periodYearLabel = fullPeriodLabel.slice(4);
+        }
+        else {
+            this.periodMonthLabel = '';
+            this.periodYearLabel = fullPeriodLabel;
+        }
+        this.cdr.markForCheck();
+    }
+    setTimeframe() {
+        this.timeframeSelection = false;
+        this._calendar.currentView = this.selectedTimeframe;
+        const chosenTimeframeOption = this.timeframeOptions.filter(option => option.value === this.selectedTimeframe)[0];
+        this.datePickerService.updateTimeframeAndFormat(chosenTimeframeOption.format);
+        if (this.selectedTimeframe == 'none') {
+            this.selectedQuarter = moment$1(this._calendar.activeDate).quarter();
+        }
+    }
+    get currentViewIsQuarter() {
+        return !['month', 'year', 'multi-year'].includes(this._calendar.currentView);
+    }
+    switchViewOnClickOnPeriodLabel(view) {
+        this._calendar.currentView = view;
+    }
+    onSelectQuarter(quarterNumber) {
+        const monthsInQuarter = 3;
+        this.selectedQuarter = moment$1(this._calendar.activeDate).quarter();
+        const unadaptedDate = this._dateAdapter.addCalendarMonths(this._calendar.activeDate, monthsInQuarter * (quarterNumber - this.selectedQuarter));
+        this._calendar.activeDate = unadaptedDate;
+        this.datePickerService.updatedQuarter$.next(moment$1(unadaptedDate));
+        this.datePickerService.calendarInstance.close();
+    }
+    pagingClicked(forward) {
+        this.pagingSetup[this._calendar.currentView] && this.pagingSetup[this._calendar.currentView](forward);
+    }
+    pagingDateChange(actionCall, amount, forward) {
+        this._calendar.activeDate = this._dateAdapter[actionCall](this._calendar.activeDate, forward ? amount : -amount);
+        this.setPeriodLabels();
+    }
+}
+DrDatePickerCustomHeaderComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'dr-date-picker_custom-header.component',
+                template: "<div *ngIf=\"datePickerService.isTimeframeSelectionEnabled\" class=\"dr-datepicker__timeframe-select__wrapper\">\n    <dr-select\n        class=\"dr-datepicker__timeframe-select\"\n        [(ngModel)]=\"selectedTimeframe\"\n        [items]=\"timeframeOptions\"\n        bindLabel=\"title\"\n        bindValue=\"value\"\n        (ngModelChange)=\"setTimeframe()\">\n    </dr-select>\n</div>\n\n<div class=\"dr-date-paging\">\n    <div class=\"dr-date-paging flip-page-button\"\n        (click)=\"pagingClicked(false)\">\n            <i class=\"dr-icon-arrow-left presentation_buttons-navigate_input\"></i>\n    </div>\n    <span class=\"example-header-label\">\n        <span (click)=\"switchViewOnClickOnPeriodLabel('year')\">{{periodMonthLabel + ' '}}</span>\n        <span (click)=\"switchViewOnClickOnPeriodLabel('multi-year')\">{{periodYearLabel}}</span>\n    </span>\n    <div class=\"dr-date-paging flip-page-button\"\n        (click)=\"pagingClicked(true)\">\n            <i class=\"dr-icon-arrow-right presentation_buttons-navigate_input\"></i>\n    </div>\n</div>\n<div #quarterlyDatePicker class=\"dr-quarterly-datepicker\" *ngIf=\"currentViewIsQuarter\">\n    <div *ngFor=\"let quarter of quarters\"\n        class=\"quarter-selector\" (click)=\"onSelectQuarter(quarter)\"\n        [class]=\"quarter == selectedQuarter ? 'selected' : ''\"\n        >Q{{quarter}}</div>\n</div>\n\n",
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                styles: [":host{height:54px;align-items:center;font-family:\"Poppins\";font-style:normal;font-weight:600;font-size:14px;line-height:22px}.dr-datepicker__timeframe-select__wrapper{background-color:#f9faff;padding:16px 32px;border-radius:18px 18px 0 0}.dr-date-paging{display:flex;flex-direction:row;justify-content:space-between;align-items:center;padding:16px 8px;grid-gap:4px;gap:4px}.dr-date-paging.flip-page-button{width:20px;height:20px;padding:0;color:#4e566c}.dr-date-paging.flip-page-button:hover{border-radius:50%;background:#F2F2FB;color:#4646ce}.example-header-label{cursor:pointer}.dr-quarterly-datepicker{display:flex;justify-content:space-between;padding:10px}.dr-quarterly-datepicker .quarter-selector{display:block;width:74px;height:40px;text-align:center;border-radius:40px;font-weight:400;padding-top:9px}.dr-quarterly-datepicker .quarter-selector:hover{background:#F2F2FB;color:#4646ce;font-weight:600;cursor:pointer}.dr-quarterly-datepicker .quarter-selector.selected{background-color:#4646ce;color:#f3f7ff;font-weight:600}\n"]
+            },] }
+];
+DrDatePickerCustomHeaderComponent.ctorParameters = () => [
+    { type: MatCalendar },
+    { type: DateAdapter },
+    { type: CustomDateFormat, decorators: [{ type: Inject, args: [MAT_DATE_FORMATS,] }] },
+    { type: ChangeDetectorRef },
+    { type: DrDatePickerService }
+];
+
+const moment = require('moment');
+const noop = () => { };
+const ɵ0 = noop;
+class DrDatePickerComponent {
+    constructor(cdr, dateAdapter, datePickerService) {
+        this.cdr = cdr;
+        this.dateAdapter = dateAdapter;
+        this.datePickerService = datePickerService;
+        // Whether to transform date, taking end, start, middle of preiod (i.e. set middle of month if timeframe='month')
+        this.periodPosition = DatePickerPeriodPosition.DEFAULT;
+        this.placeholder = 'Select';
+        this.calendarViewsTimeframeMapping = {
+            year: 'multi-year',
+            month: 'year',
+            quarter: 'none',
+            day: 'month',
+        };
+        this.customHeader = DrDatePickerCustomHeaderComponent;
+        this.readonly = true;
+        this.innerValue = null;
+        this.destroyed$ = new Subject();
+        this.onTouchedCallback = noop;
+        this.onChangeCallback = noop;
+        datePickerService.updatedQuarter$
+            .pipe(takeUntil(this.destroyed$))
+            .subscribe((value) => {
+            this.setValueFromMoment(value);
+        });
+    }
+    set format(value) {
+        this.datePickerService.updateTimeframeAndFormat(value);
+    }
+    set min(minDate) {
+        this._min = moment.unix(minDate);
+    }
+    set max(maxDate) {
+        this._max = moment.unix(maxDate);
+    }
+    get value() {
+        return this.innerValue;
+    }
+    set value(v) {
+        if (v !== this.innerValue) {
+            this.setValueFromMoment(v);
+        }
+        this.cdr.markForCheck();
+    }
+    ngAfterViewInit() {
+        this.datePickerService.calendarInstance = this.dp;
+        this.dp.startView = this.calendarViewsTimeframeMapping[this.datePickerService.timeframe];
+    }
+    ngOnDestroy() {
+        this.destroyed$.next();
+        this.destroyed$.complete();
+    }
+    /**
+     * Updating component inner value according to datepicker timeframe (day, month etc.)
+     * and date position in period (start, end, middle)
+     */
+    tryToNormalaizeTimeframe() {
+        const timeframe = this.datePickerService.timeframe;
+        switch (this.periodPosition) {
+            case DatePickerPeriodPosition.START_OF_PERIOD:
+                this.innerValue.startOf(timeframe);
+                break;
+            case DatePickerPeriodPosition.END_OF_PERIOD:
+                this.innerValue.endOf(timeframe);
+                break;
+            case DatePickerPeriodPosition.MIDDLE_OF_PERIOD:
+                this.innerValue.startOf(timeframe);
+                const endOfPeriod = this.innerValue.clone().endOf(timeframe);
+                const diff = endOfPeriod.diff(this.innerValue, 'seconds');
+                this.innerValue.add(diff / 2 + 1, 'seconds');
+                break;
+            default:
+                this.innerValue.startOf(timeframe);
+                break;
+        }
+    }
+    chosenPeriodHandler(chosenDate, timeframe) {
+        if (this.datePickerService.timeframe === timeframe) {
+            this.setValueFromMoment(chosenDate);
+            this.dp.close();
+        }
+    }
+    /**
+     * Setting value from outside of component via ngModel or formControl updates
+     */
+    writeValue(value) {
+        this.innerValue = value ? moment.unix(value) : value;
+        if (this.innerValue) {
+            this.tryToNormalaizeTimeframe();
+        }
+        this.cdr.markForCheck();
+    }
+    registerOnChange(fn) {
+        this.onChangeCallback = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouchedCallback = fn;
+    }
+    /**
+     * Set inner value from Moment and propagate
+     * @param momentDate
+     */
+    setValueFromMoment(momentDate) {
+        this.setValue(momentDate.unix());
+    }
+    /**
+     * Set inner value from timestamp and propagate
+     * @param timestamp
+     */
+    setValue(timestamp) {
+        this.writeValue(timestamp);
+        this.onChangeCallback(this.innerValue.unix());
+    }
+}
+DrDatePickerComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'dr-date-picker',
+                template: "<i class=\"dr-icon-schedule\"></i>\n<input [(ngModel)]=\"value\"\n    (click)=\"datePicker.open()\"\n    [matDatepicker]=\"datePicker\"\n    [placeholder]=\"placeholder\"\n    [drDatePickerFormat]=\"datePickerService.format$ | async\"\n    [readonly]=\"readonly\"\n    [min]=\"_min\"\n    [max]=\"_max\"/>\n<mat-datepicker #datePicker\n    [calendarHeaderComponent]=\"customHeader\"\n    (yearSelected)=\"chosenPeriodHandler($event, 'year')\"\n    (monthSelected)=\"chosenPeriodHandler($event, 'month')\">\n</mat-datepicker>\n",
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                providers: [
+                    { provide: NG_VALUE_ACCESSOR, useExisting: DrDatePickerComponent, multi: true },
+                    { provide: DrDatePickerService }
+                ],
+                styles: [":host{position:relative;width:100%;display:flex;flex-direction:row;min-height:32px;height:32px;font-size:14px;font-family:\"Poppins\",sans-serif;background-color:#fff;border:1px solid #C3C4CE;border-radius:6px;color:#85889c;overflow:hidden;outline:none;cursor:pointer}:host:hover{border-color:#85889c}:host:focus-within{border-color:#21b8f1!important;color:#151b3f}:host.disabled{pointer-events:none;border:none;color:#85889c;background:#E5E6EA}:host.ng-valid.ng-dirty{border-color:#03a678}:host.ng-invalid.ng-dirty:not(:focus-within){border-color:#de2833!important}:host.ng-untouched.ng-valid{border-color:#c3c4ce}:host:after,:host:before{position:absolute;display:flex;border-color:#999999 transparent transparent;color:#999}:host:after{content:\"\";height:0;width:0;border-style:solid;border-width:5px 5px 2.5px;right:11px;top:13px}:host i{position:absolute;color:#999;left:8px;top:3px}:host input{display:flex;flex-grow:1;height:100%;border:none;text-align:left;padding-left:35px;padding-right:25px;cursor:pointer!important;outline:none}:host input.when-quarter{position:absolute;visibility:hidden}:host input:disabled{border:none;color:#85889c;background:transparent}:host input::-webkit-search-decoration,:host input::-webkit-search-cancel-button,:host input::-webkit-search-results-button,:host input::-webkit-search-results-decoration{-webkit-appearance:none}::ng-deep .mat-datepicker-content{margin:7px 0;box-shadow:0 4px 8px 1px #00000040;border-radius:12px!important}::ng-deep .mat-datepicker-content button[disabled]{border:inherit;color:inherit;background-color:inherit}::ng-deep .mat-datepicker-content button[disabled]:hover{border:inherit}::ng-deep .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){background:#F2F2FB;color:#4646ce;font-weight:600}::ng-deep .mat-calendar-body-selected{background-color:#4646ce;color:#f2f2fb;font-weight:600}::ng-deep .mat-calendar-body-today.mat-calendar-body-selected{box-shadow:none}::ng-deep .mat-button-focus-overlay{background:#F3F7FF}::ng-deep .mat-calendar-controls .mat-icon-button:hover .mat-button-focus-overlay{opacity:1!important;background:#F3F7FF;transition:opacity .2s cubic-bezier(.35,0,.25,1)}::ng-deep .mat-calendar-controls .mat-calendar-period-button:hover{background:#F3F7FF;transition:background .2s cubic-bezier(.35,0,.25,1)}::ng-deep .mat-calendar-table-header th{font-size:14px;font-weight:600;color:#19181a}::ng-deep .mat-calendar-table-header-divider{display:none}::ng-deep .mat-calendar-body-label{color:#fff;padding:0}\n"]
+            },] }
+];
+DrDatePickerComponent.ctorParameters = () => [
+    { type: ChangeDetectorRef },
+    { type: DateAdapter },
+    { type: DrDatePickerService }
+];
+DrDatePickerComponent.propDecorators = {
+    format: [{ type: Input }],
+    min: [{ type: Input }],
+    max: [{ type: Input }],
+    periodPosition: [{ type: Input }],
+    placeholder: [{ type: Input }],
+    dp: [{ type: ViewChild, args: ['datePicker',] }]
+};
+
+class DrDatePickerWithTimeframeComponent extends DrDatePickerComponent {
+    constructor(cdr, dateAdapter, datePickerService) {
+        super(cdr, dateAdapter, datePickerService);
+        this.cdr = cdr;
+        this.dateAdapter = dateAdapter;
+        this.datePickerService = datePickerService;
+        this.isDashboardDatepicker = false;
+        this.onChangeFormat = new EventEmitter();
+        this.pagingSetup = {
+            'year': (forward) => this.pagingDateChange('addCalendarYears', 1, forward),
+            'quarter': (forward) => this.pagingDateChange('addCalendarMonths', 3, forward),
+            'month': (forward) => this.pagingDateChange('addCalendarMonths', 1, forward),
+            'day': (forward) => this.pagingDateChange('addCalendarDays', 1, forward)
+        };
+        datePickerService.isTimeframeSelectionEnabled = true;
+        datePickerService.format$
+            .pipe(takeUntil(this.destroyed$))
+            .subscribe((value) => {
+            this.onChangeFormat.emit(datePickerService.normalizeValue(value));
+        });
+    }
+    get isDashboardClassDisplayed() {
+        return this.isDashboardDatepicker;
+    }
+    ;
+    get quarterDisplay() {
+        return this.datePickerService.getQuarterDisplay(this.value);
+    }
+    ngOnInit() {
+        if (this.dateFormatConfig) {
+            this.datePickerService.formatConfig = Object.assign(Object.assign({}, this.datePickerService.formatConfig), this.dateFormatConfig);
+        }
+    }
+    pagingClicked(forward) {
+        this.pagingSetup[this.datePickerService.timeframe] && this.pagingSetup[this.datePickerService.timeframe](forward);
+        this.dp.close();
+    }
+    pagingDateChange(actionCall, amount, forward) {
+        const newValue = this.dateAdapter[actionCall](this.innerValue, forward ? amount : -amount);
+        this.setValueFromMoment(newValue);
+    }
+}
+DrDatePickerWithTimeframeComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'dr-date-picker-with-timeframe',
+                template: "<div class=\"dr-input-date-paging__flip-page-button\"\n    (click)=\"pagingClicked(false)\"\n>\n    <i class=\"dr-icon-arrow-left presentation_buttons-navigate_input\"></i>\n</div>\n<div class=\"dr-datepicker__input-container\">\n    <i *ngIf=\"isDashboardDatepicker\" class=\"dr-icon-date\"></i>\n    <div\n        class=\"dr-input-date-paging__formatted-value-display\"\n        (click)=\"datepickerInput.click()\"\n    >\n        {{\n          !value\n            ? placeholder\n            : (datePickerService.format$.getValue()?.includes('Q') ? quarterDisplay : value.format(datePickerService.format$.getValue()))\n        }}\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<div class=\"dr-input-date-paging__flip-page-button\"\n    (click)=\"pagingClicked(true)\">\n    <i class=\"dr-icon-arrow-right presentation_buttons-navigate_input\"></i>\n</div>\n<mat-datepicker #datePicker\n    class=\"dr-timeframe-datepicker\"\n    [calendarHeaderComponent]=\"customHeader\"\n    (yearSelected)=\"chosenPeriodHandler($event, 'year')\"\n    (monthSelected)=\"chosenPeriodHandler($event, 'month')\">\n</mat-datepicker>\n",
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                providers: [
+                    { provide: NG_VALUE_ACCESSOR, useExisting: DrDatePickerWithTimeframeComponent, multi: true },
+                    { provide: DrDatePickerService }
+                ],
+                styles: [":host{position:relative;width:100%;display:flex;flex-direction:row;min-height:32px;height:32px;font-size:14px;font-family:\"Poppins\",sans-serif;background-color:#fff;border:1px solid #C3C4CE;border-radius:6px;color:#85889c;overflow:hidden;outline:none;cursor:pointer}:host:hover{border-color:#85889c}:host:focus-within{border-color:#21b8f1!important;color:#151b3f}:host.disabled{pointer-events:none;border:none;color:#85889c;background:#E5E6EA}:host.ng-valid.ng-dirty{border-color:#03a678}:host.ng-invalid.ng-dirty:not(:focus-within){border-color:#de2833!important}:host.ng-untouched.ng-valid{border-color:#c3c4ce}:host:after,:host:before{position:absolute;display:flex;border-color:#999999 transparent transparent;color:#999}:host:after{content:\"\";height:0;width:0;border-style:solid;border-width:5px 5px 2.5px;right:11px;top:13px}:host i{position:absolute;color:#999;left:8px;top:3px}:host input{display:flex;flex-grow:1;height:100%;border:none;text-align:left;padding-left:35px;padding-right:25px;cursor:pointer!important;outline:none}:host input.when-quarter{position:absolute;visibility:hidden}:host input:disabled{border:none;color:#85889c;background:transparent}:host input::-webkit-search-decoration,:host input::-webkit-search-cancel-button,:host input::-webkit-search-results-button,:host input::-webkit-search-results-decoration{-webkit-appearance:none}::ng-deep .mat-datepicker-content{margin:7px 0;box-shadow:0 4px 8px 1px #00000040;border-radius:12px!important}::ng-deep .mat-datepicker-content button[disabled]{border:inherit;color:inherit;background-color:inherit}::ng-deep .mat-datepicker-content button[disabled]:hover{border:inherit}::ng-deep .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){background:#F2F2FB;color:#4646ce;font-weight:600}::ng-deep .mat-calendar-body-selected{background-color:#4646ce;color:#f2f2fb;font-weight:600}::ng-deep .mat-calendar-body-today.mat-calendar-body-selected{box-shadow:none}::ng-deep .mat-button-focus-overlay{background:#F3F7FF}::ng-deep .mat-calendar-controls .mat-icon-button:hover .mat-button-focus-overlay{opacity:1!important;background:#F3F7FF;transition:opacity .2s cubic-bezier(.35,0,.25,1)}::ng-deep .mat-calendar-controls .mat-calendar-period-button:hover{background:#F3F7FF;transition:background .2s cubic-bezier(.35,0,.25,1)}::ng-deep .mat-calendar-table-header th{font-size:14px;font-weight:600;color:#19181a}::ng-deep .mat-calendar-table-header-divider{display:none}::ng-deep .mat-calendar-body-label{color:#fff;padding:0}:host{border:none;display:flex;align-items:center}:host.dr-date-picker-on-dashboard{width:180px;justify-content:space-between}:host.dr-date-picker-on-dashboard mat-datepicker{position:absolute}:host.dr-date-picker-on-dashboard .dr-datepicker__input-container{display:flex;flex-direction:row;justify-content:center;align-items:center;margin-left:-10px}:host.dr-date-picker-on-dashboard .dr-datepicker__input-container .dr-input-date-paging__formatted-value-display{font-weight:600;width:auto;margin-left:5px}:host.dr-date-picker-on-dashboard .dr-datepicker__input-container .dr-icon-date{display:block;position:relative;top:0;margin-right:8px;color:#4e566c}:host .dr-input-date-paging__flip-page-button{width:25px;height:25px;border-radius:16px;padding:0;background-color:#fff}:host .dr-input-date-paging__flip-page-button i{position:relative;color:#0c142b;top:unset;left:unset}:host .dr-input-date-paging__flip-page-button:hover{background-color:#f2f2fb;color:#4646ce}:host input{visibility:hidden;position:absolute;width:100%}:host .dr-input-date-paging__formatted-value-display{width:90px;height:22px;padding-left:0;text-align:center;line-height:22px;color:#0c142b;-webkit-text-decoration-line:underline;text-decoration-line:underline}:host .dr-input-date-paging__formatted-value-display:hover{background-color:#f2f2fb;border-radius:5px;cursor:pointer;-webkit-text-decoration-line:underline;text-decoration-line:underline;color:#4646ce}\n"]
+            },] }
+];
+DrDatePickerWithTimeframeComponent.ctorParameters = () => [
+    { type: ChangeDetectorRef },
+    { type: DateAdapter },
+    { type: DrDatePickerService }
+];
+DrDatePickerWithTimeframeComponent.propDecorators = {
+    isDashboardClassDisplayed: [{ type: HostBinding, args: ['class.dr-date-picker-on-dashboard',] }],
+    isDashboardDatepicker: [{ type: Input }],
+    dateFormatConfig: [{ type: Input }],
+    onChangeFormat: [{ type: Output }]
+};
+
+class DrDatePickerFormatDirective {
+    constructor(matDateFormat, ngControl) {
+        this.matDateFormat = matDateFormat;
+        this.ngControl = ngControl;
+    }
+    set datePickerFormat(format) {
+        var _a;
+        if (this.configDateParse) {
+            this.matDateFormat.updateDateFormat(this.configDateParse, this.configDateDisplay);
+        }
+        else {
+            this.matDateFormat.updateDateFormat({ dateInput: format });
+        }
+        const value = this.ngControl.value;
+        (_a = this.ngControl.valueAccessor) === null || _a === void 0 ? void 0 : _a.writeValue(value);
+    }
+}
+DrDatePickerFormatDirective.decorators = [
+    { type: Directive, args: [{
+                selector: '[drDatePickerFormat]',
+                providers: [
+                    {
+                        provide: DateAdapter,
+                        useClass: MomentDateAdapter
+                    },
+                    {
+                        provide: MAT_DATE_FORMATS,
+                        useClass: CustomDateFormat
+                    }
+                ]
+            },] }
+];
+DrDatePickerFormatDirective.ctorParameters = () => [
+    { type: CustomDateFormat, decorators: [{ type: Inject, args: [MAT_DATE_FORMATS,] }] },
+    { type: NgControl, decorators: [{ type: Optional }] }
+];
+DrDatePickerFormatDirective.propDecorators = {
+    configDateParse: [{ type: Input }],
+    configDateDisplay: [{ type: Input }],
+    datePickerFormat: [{ type: Input, args: ['drDatePickerFormat',] }]
+};
+
+// !!! Please do not use such approach in other places
+// Hard fix for 'none' calendar view selection
+MatCalendar.prototype.focusActiveCell = function () {
+    var _a;
+    (_a = this._getCurrentViewComponent()) === null || _a === void 0 ? void 0 : _a._focusActiveCell(false);
+};
 const components$1 = [
     DrButtonComponent,
     RadioButtonComponent,
@@ -3341,6 +3447,7 @@ const components$1 = [
     DrToggleComponent,
     DrToggleButtonComponent,
     DrDatePickerComponent,
+    DrDatePickerWithTimeframeComponent,
     DrDatePickerFormatDirective,
     DrDatePickerCustomHeaderComponent,
     DrModelDebounceChangeDirective
@@ -3357,9 +3464,6 @@ DrInputsModule.decorators = [
                     CommonModule,
                     NgSelectModule,
                     MatDatepickerModule
-                ],
-                providers: [
-                    DrDatePickerService
                 ]
             },] }
 ];
@@ -3508,5 +3612,5 @@ DrAccordionModule.decorators = [
  * Generated bundle index. Do not edit.
  */
 
-export { AnyTagComponent, CheckboxComponent, DateTagComponent, DateTagModule, DayTagComponent, DrAccordionComponent, DrAccordionItemBodyComponent, DrAccordionItemComponent, DrAccordionItemHeaderComponent, DrAccordionModule, DrAvatarComponent, DrAvatarModule, DrAvatarPipe, DrButtonComponent, DrDatePickerComponent, DrDatePickerFormatDirective, DrDropdownComponent, DrDropdownDirective, DrDropdownItemShowPipe, DrDropdownModule, DrDropdownPositionDirective, DrDropdownService, DrInputComponent, DrInputsModule, DrModelDebounceChangeDirective, DrPopoverAlignmentDimension, DrPopoverComponent, DrPopoverDirective, DrPopoverModule, DrPopoverRef, DrPopoverService, DrSelectComponent, DrSpinnerComponent, DrSpinnerDirective, DrSpinnerModule, DrTabComponent, DrTabsComponent, DrTabsModule, DrTagComponent, DrTagModule, DrToggleButtonComponent, DrToggleComponent, DrTooltipDirective, DrTooltipModule, ForecastTagComponent, ISpinnerOptions, ListTagComponent, ListTagModule, MonthTagComponent, QuarterTagComponent, RadioButtonComponent, RadioGroupComponent, TooltipComponent, WeekTagComponent, YearTagComponent, components$2 as ɵa, POPUP_ANIMATION as ɵb, DrDatePickerService as ɵc, CustomDateFormat as ɵd, DrDatePickerCustomHeaderComponent as ɵe };
+export { AnyTagComponent, CheckboxComponent, CustomDateFormat, DATE_INPUT_FORMAT, DatePickerPeriodPosition, DateTagComponent, DateTagModule, DayTagComponent, DrAccordionComponent, DrAccordionItemBodyComponent, DrAccordionItemComponent, DrAccordionItemHeaderComponent, DrAccordionModule, DrAvatarComponent, DrAvatarModule, DrAvatarPipe, DrButtonComponent, DrDropdownComponent, DrDropdownDirective, DrDropdownItemShowPipe, DrDropdownModule, DrDropdownPositionDirective, DrDropdownService, DrInputComponent, DrInputsModule, DrModelDebounceChangeDirective, DrPopoverAlignmentDimension, DrPopoverComponent, DrPopoverDirective, DrPopoverModule, DrPopoverRef, DrPopoverService, DrSelectComponent, DrSpinnerComponent, DrSpinnerDirective, DrSpinnerModule, DrTabComponent, DrTabsComponent, DrTabsModule, DrTagComponent, DrTagModule, DrToggleButtonComponent, DrToggleComponent, DrTooltipDirective, DrTooltipModule, ForecastTagComponent, ISpinnerOptions, ListTagComponent, ListTagModule, MAT_DEFAULT_DATE_FORMAT, MONTH_YEAR_FORMAT, MonthTagComponent, QUARTER_FORMAT, QuarterTagComponent, RadioButtonComponent, RadioGroupComponent, TooltipComponent, WeekTagComponent, YEAR_FORMAT, YearTagComponent, components$2 as ɵa, POPUP_ANIMATION as ɵb, DrDatePickerComponent as ɵc, DrDatePickerService as ɵd, DrDatePickerWithTimeframeComponent as ɵe, DrDatePickerFormatDirective as ɵf, DrDatePickerCustomHeaderComponent as ɵg };
 //# sourceMappingURL=datarailsshared-datarailsshared.js.map