@datarailsshared/datarailsshared 1.4.116 → 1.4.118

package/fesm2015/datarailsshared-datarailsshared.js

@@ -96,7 +96,7 @@ AnyTagComponent.propDecorators = {
 };
 
 // @ts-ignore
-const moment$8 = require('moment');
+const moment$9 = require('moment');
 class ForecastTagComponent extends AnyTagComponent {
     constructor() {
         super();
@@ -117,10 +117,10 @@ class ForecastTagComponent extends AnyTagComponent {
             { value: 11, label: '11+1' }
         ];
         this.dateFilter = (date) => {
-            const forecastDate = moment$8.unix(date);
+            const forecastDate = moment$9.unix(date);
             let status = true;
             this.lockedDate.forEach(timestamp => {
-                const locked = moment$8.unix(timestamp);
+                const locked = moment$9.unix(timestamp);
                 return status = !(locked.month() === forecastDate.month() && locked.year() === forecastDate.year());
             });
             return status;
@@ -136,14 +136,14 @@ class ForecastTagComponent extends AnyTagComponent {
         this.forecastValue = this.getFiscalMonthFromDate(dateVal, fiscal_year_starts_from) - 1;
         const fiscal_year = this.getFiscalYearFromDate(dateVal, fiscal_year_starts_from, fiscal_year_back);
         console.log('test', dateVal, fiscal_year_starts_from, this.forecastValue, fiscal_year);
-        this.dateObj.date = moment$8(new Date(fiscal_year, 0, 1)).format('YYYY');
+        this.dateObj.date = moment$9(new Date(fiscal_year, 0, 1)).format('YYYY');
         this.updateLockedDate();
     }
     updateLockedDate() {
         for (const forecastTag of this.forecastTags) {
             forecastTag.disable = false;
             this.lockedDate.forEach(timestamp => {
-                const locked = moment$8.unix(timestamp);
+                const locked = moment$9.unix(timestamp);
                 if (locked.month() - 1 === forecastTag.value && +locked.year() + 1 === +this.dateObj.date) {
                     forecastTag.disable = true;
                 }
@@ -239,7 +239,7 @@ ForecastTagComponent.propDecorators = {
 };
 
 // @ts-ignore
-const moment$7 = require('moment');
+const moment$8 = require('moment');
 const MONTH_FORMATS = {
     parse: {
         dateInput: 'DD-MM-YYYY',
@@ -256,12 +256,12 @@ class MonthTagComponent extends AnyTagComponent {
     constructor() {
         super();
         this.lockedDate = [];
-        this.date = new FormControl(moment$7());
+        this.date = new FormControl(moment$8());
         this.dateFilter = (date) => {
-            const calendarDate = moment$7(date);
+            const calendarDate = moment$8(date);
             let status = true;
             this.lockedDate.forEach(timestamp => {
-                const lockDate = moment$7.unix(timestamp);
+                const lockDate = moment$8.unix(timestamp);
                 return status = !(lockDate.year() === calendarDate.year() && lockDate.month() === calendarDate.month());
             });
             return status;
@@ -269,11 +269,11 @@ class MonthTagComponent extends AnyTagComponent {
     }
     initDate() {
         if (this.defaultValue) {
-            this.dateObj.date = moment$7(this.defaultValue * 1000).utc().format('YYYY-MM');
-            this.date = new FormControl(moment$7(this.defaultValue * 1000));
+            this.dateObj.date = moment$8(this.defaultValue * 1000).utc().format('YYYY-MM');
+            this.date = new FormControl(moment$8(this.defaultValue * 1000));
         }
         else {
-            this.dateObj.date = moment$7(new Date()).format('YYYY-MM');
+            this.dateObj.date = moment$8(new Date()).format('YYYY-MM');
         }
     }
     initName() {
@@ -282,7 +282,7 @@ class MonthTagComponent extends AnyTagComponent {
         }
     }
     chosenTagHandler(value) {
-        const resultDate = moment$7.utc(value);
+        const resultDate = moment$8.utc(value);
         resultDate.hour(12);
         const resultTag = {
             name: this.name,
@@ -320,7 +320,7 @@ MonthTagComponent.propDecorators = {
 };
 
 // @ts-ignore
-const moment$6 = require('moment');
+const moment$7 = require('moment');
 class QuarterTagComponent extends AnyTagComponent {
     constructor() {
         super();
@@ -330,8 +330,8 @@ class QuarterTagComponent extends AnyTagComponent {
         this.dateFilter = (date) => {
             let status = true;
             this.lockedDate.forEach(timestamp => {
-                const lockDate = moment$6.unix(timestamp);
-                const quarterDate = moment$6.unix(date.value);
+                const lockDate = moment$7.unix(timestamp);
+                const quarterDate = moment$7.unix(date.value);
                 if (lockDate.year() === quarterDate.year() && lockDate.month() === quarterDate.month()) {
                     date.disable = true;
                     status = false;
@@ -362,7 +362,7 @@ class QuarterTagComponent extends AnyTagComponent {
     }
     chosenTagHandler(value) {
         const date = new Date(value * 1000);
-        const resultDate = moment$6.utc(date);
+        const resultDate = moment$7.utc(date);
         const resultTag = {
             name: this.name,
             value: parseInt(resultDate.format('X'), 10),
@@ -420,7 +420,7 @@ QuarterTagComponent.propDecorators = {
 };
 
 // @ts-ignore
-const moment$5 = require('moment');
+const moment$6 = require('moment');
 const WEEK_FORMATS = {
     parse: {
         dateInput: 'WW-YYYY',
@@ -437,13 +437,13 @@ class WeekTagComponent extends AnyTagComponent {
     constructor() {
         super();
         this.lockedDate = [];
-        this.date = new FormControl(moment$5());
+        this.date = new FormControl(moment$6());
         this.selectedValue = '';
         this.dateFilter = (date) => {
-            const calendarDate = moment$5(date);
+            const calendarDate = moment$6(date);
             let status = true;
             this.lockedDate.forEach(timestamp => {
-                const lockDate = moment$5.unix(timestamp);
+                const lockDate = moment$6.unix(timestamp);
                 return status = !(lockDate.week() === calendarDate.week() && lockDate.year() === calendarDate.year());
             });
             return status;
@@ -473,7 +473,7 @@ class WeekTagComponent extends AnyTagComponent {
         }
     }
     chosenDateHandler(normalizedDay) {
-        const date = moment$5(normalizedDay).unix();
+        const date = moment$6(normalizedDay).unix();
         this.chosenTagHandler(date);
     }
     chosenTagHandler(value) {
@@ -485,7 +485,7 @@ class WeekTagComponent extends AnyTagComponent {
         else {
             date = new Date(value * 1000);
         }
-        const resultDate = moment$5(date);
+        const resultDate = moment$6(date);
         const resultTag = {
             name: this.name,
             value: parseInt(resultDate.format('X'), 10),
@@ -496,8 +496,8 @@ class WeekTagComponent extends AnyTagComponent {
         this.dateChange.emit(resultTag);
     }
     getWeekLabel(date) {
-        return 'W' + this.pad(moment$5(date).isoWeek(), 2) +
-            ' ' + moment$5(date).year();
+        return 'W' + this.pad(moment$6(date).isoWeek(), 2) +
+            ' ' + moment$6(date).year();
     }
     getUTCTimestamp(date) {
         return Date.UTC(date.getFullYear(), date.getMonth(), date.getDate(), 12, 0, 0, 0);
@@ -510,7 +510,7 @@ class WeekTagComponent extends AnyTagComponent {
         return date;
     }
     getWeekNumberByDate(date) {
-        return this.pad(moment$5(date).isoWeek(), 2);
+        return this.pad(moment$6(date).isoWeek(), 2);
     }
     pad(n, width, z = '0') {
         z = z || '0';
@@ -538,7 +538,7 @@ WeekTagComponent.propDecorators = {
 };
 
 // @ts-ignore
-const moment$4 = require('moment');
+const moment$5 = require('moment');
 const YEAR_FORMATS = {
     parse: {
         dateInput: 'YYYY',
@@ -555,12 +555,12 @@ class YearTagComponent extends AnyTagComponent {
     constructor() {
         super();
         this.lockedDate = [];
-        this.date = new FormControl(moment$4());
+        this.date = new FormControl(moment$5());
         this.dateFilter = (date) => {
-            const calendarDateYear = moment$4(date).year();
+            const calendarDateYear = moment$5(date).year();
             let status = true;
             this.lockedDate.forEach(timestamp => {
-                const lockDate = moment$4.unix(timestamp);
+                const lockDate = moment$5.unix(timestamp);
                 return status = !(lockDate.year() === calendarDateYear);
             });
             return status;
@@ -568,11 +568,11 @@ class YearTagComponent extends AnyTagComponent {
     }
     initDate() {
         if (this.defaultValue) {
-            this.dateObj.date = moment$4(new Date(this.defaultValue * 1000)).utc().format('YYYY');
-            this.date = new FormControl(moment$4(this.defaultValue * 1000));
+            this.dateObj.date = moment$5(new Date(this.defaultValue * 1000)).utc().format('YYYY');
+            this.date = new FormControl(moment$5(this.defaultValue * 1000));
         }
         else {
-            this.dateObj.date = moment$4(new Date()).format('YYYY');
+            this.dateObj.date = moment$5(new Date()).format('YYYY');
         }
     }
     initName() {
@@ -582,10 +582,10 @@ class YearTagComponent extends AnyTagComponent {
     }
     chosenTagHandler(value) {
         const date = new Date();
-        const year = moment$4(value).year();
+        const year = moment$5(value).year();
         date.setTime(0);
         date.setFullYear(year, 0, 1);
-        const resultDate = moment$4.utc(date);
+        const resultDate = moment$5.utc(date);
         resultDate.hour(12);
         const resultTag = {
             name: this.name,
@@ -677,7 +677,7 @@ DrTagComponent.propDecorators = {
     tagChange: [{ type: Output }]
 };
 
-const moment$3 = momentImported;
+const moment$4 = momentImported;
 class ListTagComponent {
     constructor() {
         this.defaultValue = '';
@@ -717,7 +717,7 @@ ListTagComponent.propDecorators = {
 };
 
 // @ts-ignore
-const moment$2 = require('moment');
+const moment$3 = require('moment');
 const DAY_FORMATS = {
     parse: {
         dateInput: 'DD-MM-YYYY',
@@ -734,19 +734,19 @@ class DayTagComponent extends AnyTagComponent {
     constructor() {
         super();
         this.lockedDate = [];
-        this.date = new FormControl(moment$2());
+        this.date = new FormControl(moment$3());
         this.dateFilter = (date) => {
-            const calendarDate = moment$2(date).unix();
+            const calendarDate = moment$3(date).unix();
             let status = true;
             this.lockedDate.forEach(timestamp => status = !(timestamp === calendarDate));
             return status;
         };
     }
     initDate() {
-        const utcOffsetInMilliseconds = moment$2().utcOffset() * 60 * 1000;
-        this.dateObj.date = moment$2(moment$2().valueOf() + utcOffsetInMilliseconds);
+        const utcOffsetInMilliseconds = moment$3().utcOffset() * 60 * 1000;
+        this.dateObj.date = moment$3(moment$3().valueOf() + utcOffsetInMilliseconds);
         if (this.defaultValue) {
-            this.dateObj.date = moment$2(new Date(this.defaultValue * 1000)).utc();
+            this.dateObj.date = moment$3(new Date(this.defaultValue * 1000)).utc();
             this.date.setValue(this.dateObj.date);
         }
     }
@@ -756,11 +756,11 @@ class DayTagComponent extends AnyTagComponent {
         }
     }
     chosenTagHandler(value) {
-        const date = moment$2(value).unix();
+        const date = moment$3(value).unix();
         const resultTag = {
             name: this.name,
             value: date,
-            label: moment$2.unix(date).format('MM/DD/YYYY'),
+            label: moment$3.unix(date).format('MM/DD/YYYY'),
             locked: !this.dateFilter(value)
         };
         console.log('resultTag', resultTag);
@@ -1421,6 +1421,79 @@ DrAvatarPipe.decorators = [
             },] }
 ];
 
+var DateFromats;
+(function (DateFromats) {
+    DateFromats["MAT_DEFAULT_DATE_FORMAT"] = "MM/DD/yyyy";
+    DateFromats["DATE_INPUT_FORMAT"] = "YYYY/MM/DD";
+    DateFromats["YEAR_FORMAT"] = "yyyy";
+    DateFromats["MONTH_YEAR_FORMAT"] = "MM/yyyy";
+    DateFromats["QUARTER_FORMAT"] = "Q/yyyy";
+    DateFromats["WEEK_FORMAT"] = "W/yyyy";
+})(DateFromats || (DateFromats = {}));
+class CustomDateFormat {
+    constructor() {
+        this._parse = {
+            dateInput: DateFromats.DATE_INPUT_FORMAT,
+        };
+        this._display = {
+            dateInput: DateFromats.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 = {}));
+var TimeframeOption;
+(function (TimeframeOption) {
+    TimeframeOption["DAY"] = "day";
+    TimeframeOption["MONTH"] = "month";
+    TimeframeOption["QUARTER"] = "quarter";
+    TimeframeOption["WEEK"] = "week";
+    TimeframeOption["YEAR"] = "year";
+})(TimeframeOption || (TimeframeOption = {}));
+var CalendarView;
+(function (CalendarView) {
+    CalendarView["FOR_DAYS"] = "month";
+    CalendarView["FOR_MONTHS"] = "year";
+    CalendarView["FOR_QUARTERS"] = "none";
+    CalendarView["FOR_YEARS"] = "multi-year";
+})(CalendarView || (CalendarView = {}));
+var DateTags;
+(function (DateTags) {
+    DateTags["TODAY"] = "today";
+    DateTags["YESTERDAY"] = "yesterday";
+    DateTags["THIS_MONTH"] = "this_month";
+    DateTags["PREV_MONTH"] = "prev_month";
+})(DateTags || (DateTags = {}));
+
 const POPUP_POSITIONS = {
     top: {
         originX: 'center',
@@ -1516,6 +1589,12 @@ const POPUP_ANIMATION = [
         animate(150, style({ opacity: 0 })),
     ]),
 ];
+const PRESET_TAGS_LIST = [
+    { key: DateTags.TODAY, label: 'Today' },
+    { key: DateTags.YESTERDAY, label: 'Yesterday' },
+    { key: DateTags.THIS_MONTH, label: 'This month' },
+    { key: DateTags.PREV_MONTH, label: 'Prev month' }
+];
 
 class TooltipComponent {
     constructor() {
@@ -3323,72 +3402,6 @@ DrModelDebounceChangeDirective.propDecorators = {
     ngModelDebounceChange: [{ type: Output }]
 };
 
-var DateFromats;
-(function (DateFromats) {
-    DateFromats["MAT_DEFAULT_DATE_FORMAT"] = "MM/DD/yyyy";
-    DateFromats["DATE_INPUT_FORMAT"] = "YYYY/MM/DD";
-    DateFromats["YEAR_FORMAT"] = "yyyy";
-    DateFromats["MONTH_YEAR_FORMAT"] = "MM/yyyy";
-    DateFromats["QUARTER_FORMAT"] = "Q/yyyy";
-    DateFromats["WEEK_FORMAT"] = "W/yyyy";
-})(DateFromats || (DateFromats = {}));
-class CustomDateFormat {
-    constructor() {
-        this._parse = {
-            dateInput: DateFromats.DATE_INPUT_FORMAT,
-        };
-        this._display = {
-            dateInput: DateFromats.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 = {}));
-var TimeframeOption;
-(function (TimeframeOption) {
-    TimeframeOption["DAY"] = "day";
-    TimeframeOption["MONTH"] = "month";
-    TimeframeOption["QUARTER"] = "quarter";
-    TimeframeOption["WEEK"] = "week";
-    TimeframeOption["YEAR"] = "year";
-})(TimeframeOption || (TimeframeOption = {}));
-var CalendarView;
-(function (CalendarView) {
-    CalendarView["FOR_DAYS"] = "month";
-    CalendarView["FOR_MONTHS"] = "year";
-    CalendarView["FOR_QUARTERS"] = "none";
-    CalendarView["FOR_YEARS"] = "multi-year";
-})(CalendarView || (CalendarView = {}));
-
 const IMAGE_TYPES = ['image/png', 'image/jpeg', 'image/gif'];
 var CHAT_MESSAGE_TYPE;
 (function (CHAT_MESSAGE_TYPE) {
@@ -3520,14 +3533,37 @@ class DrSharedUtils {
                 return defaultFrame;
         }
     }
+    static getDateByTag(tag) {
+        const todayDate = momentImported().utc();
+        switch (tag) {
+            case DateTags.TODAY:
+                return todayDate;
+            case DateTags.YESTERDAY:
+                todayDate.subtract(1, 'days');
+                return todayDate;
+            case DateTags.THIS_MONTH:
+                todayDate.month();
+                return todayDate;
+            case DateTags.PREV_MONTH:
+                todayDate.month();
+                todayDate.subtract(1, 'months');
+                return todayDate;
+        }
+    }
 }
 
+const moment$2 = require('moment');
 class DrDatePickerService {
     constructor() {
         this.isTimeframeSelectionEnabled = false;
         this.timeframe = TimeframeOption.DAY;
         this.format$ = new BehaviorSubject(DateFromats.MAT_DEFAULT_DATE_FORMAT);
         this.updatedQuarter$ = new Subject();
+        this.updatedDateAndClose$ = new Subject();
+        this.presetTag$ = new BehaviorSubject('');
+        this.onSameDaySelectedInCalendar$ = new Subject();
+        this.keepPresetTag = false;
+        this.isValueUpdating = false;
         this.availableTimeframes = [
             TimeframeOption.DAY,
             TimeframeOption.WEEK,
@@ -3656,6 +3692,47 @@ class DrDatePickerService {
     getDateModifiedByFiscalMonths(date, isSubtract = false) {
         return date ? _.cloneDeep(date)[isSubtract ? 'subtract' : 'add'](this.fiscalYearMonthsModifier, 'month') : date;
     }
+    updateDatePickerByPreset(tag, calender) {
+        this.keepPresetTag = true;
+        let date = null;
+        if (tag) {
+            date = DrSharedUtils.getDateByTag(tag);
+            switch (tag) {
+                case DateTags.TODAY:
+                    this.updateTimeframeAndFormat(DateFromats.MAT_DEFAULT_DATE_FORMAT);
+                    break;
+                case DateTags.YESTERDAY:
+                    this.updateTimeframeAndFormat(DateFromats.MAT_DEFAULT_DATE_FORMAT);
+                    break;
+                case DateTags.THIS_MONTH:
+                    this.updateTimeframeAndFormat(DateFromats.MONTH_YEAR_FORMAT);
+                    this.selectDateInCalendarMonthView(date, calender);
+                    break;
+                case DateTags.PREV_MONTH:
+                    this.updateTimeframeAndFormat(DateFromats.MONTH_YEAR_FORMAT);
+                    this.selectDateInCalendarMonthView(date, calender);
+                    break;
+            }
+        }
+        this.presetTag$.next(tag);
+        this.updatedDateAndClose$.next(date);
+    }
+    selectDateInCalendarMonthView(date, calender) {
+        setTimeout(() => {
+            const monthView = calender.monthView;
+            monthView._activeDate = date;
+            monthView._selected = date;
+            monthView._init();
+        });
+    }
+    resetPresetTag() {
+        if (!this.keepPresetTag) {
+            this.presetTag$.next(null);
+        }
+        else {
+            this.keepPresetTag = false;
+        }
+    }
 }
 DrDatePickerService.decorators = [
     { type: Injectable }
@@ -3717,6 +3794,7 @@ class DrDatePickerCustomHeaderComponent {
         this.timeframeSelection = false;
         this.periodMonthLabel = '';
         this.periodYearLabel = '';
+        this.presetTagList = PRESET_TAGS_LIST;
         this.calendarView = CalendarView;
         _calendar.stateChanges.pipe(takeUntil(this._destroyed)).subscribe(() => this.setPeriodLabels());
         this.datePickerService.format$.pipe(takeUntil(this._destroyed)).subscribe(value => {
@@ -3733,8 +3811,17 @@ class DrDatePickerCustomHeaderComponent {
                 this.transformDateInMultiyearViewAccordingToFY();
             }
         });
+        _calendar._userSelection.subscribe(date => {
+            if (!this.datePickerService.isValueUpdating) {
+                this.datePickerService.onSameDaySelectedInCalendar$.next(date.value);
+            }
+        });
         this.datePickerService.calendarInstance = _calendar;
     }
+    get selectedPresetTag() {
+        return this.datePickerService.presetTag$.getValue();
+    }
+    ;
     ngOnInit() {
         setTimeout(() => {
             if (this._calendar.multiYearView) {
@@ -3759,7 +3846,11 @@ class DrDatePickerCustomHeaderComponent {
         }
         this.cdr.markForCheck();
     }
-    setTimeframe() {
+    setTimeframe(value) {
+        if (value !== this.selectedTimeframe) {
+            this.datePickerService.resetPresetTag();
+        }
+        this.selectedTimeframe = value;
         this.timeframeSelection = false;
         this._calendar.currentView = this.selectedTimeframe;
         const chosenTimeframeOption = this.timeframeOptions.filter(option => option.value === this.selectedTimeframe)[0];
@@ -3795,13 +3886,22 @@ class DrDatePickerCustomHeaderComponent {
         multuYearView._selectedYear = multuYearView._activeDate.year();
         multuYearView._init();
     }
+    onSelectPresetTag(tag) {
+        if (tag.key === this.selectedPresetTag) {
+            this.datePickerService.presetTag$.next(null);
+        }
+        else {
+            this.datePickerService.presetTag$.next(tag.key);
+        }
+        this.datePickerService.updateDatePickerByPreset(this.selectedPresetTag, this._calendar);
+    }
 }
 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 | drShowTimeframePipe: datePickerService.availableTimeframes\"\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(calendarView.FOR_MONTHS)\">{{ periodMonthLabel + ' ' }}</span>\n        <span (click)=\"switchViewOnClickOnPeriodLabel(calendarView.FOR_YEARS)\">{{ 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",
+                template: "<div *ngIf=\"datePickerService.isTimeframeSelectionEnabled\" class=\"dr-datepicker__timeframe-select__wrapper\">\n\n    <div *ngIf=\"datePickerService.isUsingDateTagPresets\" class=\"dr-datepicker-preset-date\">\n        <div class=\"dr-datepicker-preset-date__tags\">\n            <div *ngFor=\"let tag of presetTagList\" \n                id=\"preset_tag\" \n                class=\"dr-datepicker-preset-date__tags__tag\" \n                (click)=\"onSelectPresetTag(tag)\" \n                [ngClass]=\"{'dr-datepicker-preset-date__tags__tag--selected': tag.key === selectedPresetTag}\"\n                [drTooltip]=\"selectedPresetTag === tag.key? 'Unselect preset' : ''\"\n                [drTooltipPosition]=\"'top'\"\n                [drTooltipOptions]=\"{ withoutArrow: true }\"\n            >\n                {{ tag.label }}\n            </div>\n        </div>\n    </div>\n    <dr-select\n            class=\"dr-datepicker__timeframe-select\"\n            [ngModel]=\"selectedTimeframe\"\n            [items]=\"timeframeOptions | drShowTimeframePipe: datePickerService.availableTimeframes\"\n            bindLabel=\"title\"\n            bindValue=\"value\"\n            (ngModelChange)=\"setTimeframe($event)\">\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(calendarView.FOR_MONTHS)\">{{ periodMonthLabel + ' ' }}</span>\n        <span (click)=\"switchViewOnClickOnPeriodLabel(calendarView.FOR_YEARS)\">{{ 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"]
+                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-datepicker-preset-date{display:flex;flex-direction:column}.dr-datepicker-preset-date__tags{display:flex;padding-bottom:21px;padding-top:10px;font-size:12px}.dr-datepicker-preset-date__tags__tag{cursor:pointer;font-weight:400;line-height:20px!important;padding:2px 8px;border:1px solid #9EA1AA;border-radius:18px;background:#FFFFFF;margin-right:4px}.dr-datepicker-preset-date__tags__tag--selected{color:#4646ce;background:#F2F2FB;border:1px solid #4646CE}.dr-date-paging{display:flex;flex-direction:row;justify-content:space-between;align-items:center;padding:16px 32px;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 = () => [
@@ -3966,8 +4066,15 @@ class DrDatePickerComponent {
      * @param timestamp
      */
     setValue(timestamp) {
+        // isValueUpdating is required for manage clicks on same dates: if isValueUpdating - true then
+        // days are different and subscription on calendar day click action won't trigger Accessor ngModel update
+        // one more time
+        this.datePickerService.isValueUpdating = true;
         this.writeValue(timestamp);
         this.onChangeCallback(this.innerValue.unix());
+        setTimeout(() => {
+            this.datePickerService.isValueUpdating = false;
+        });
     }
 }
 DrDatePickerComponent.decorators = [
@@ -4007,6 +4114,7 @@ class DrDatePickerWithTimeframeComponent extends DrDatePickerComponent {
         this.canSelectTimeframe = true;
         // eslint-disable-next-line
         this.onChangeFormat = new EventEmitter();
+        this.onChangePresetTag = new EventEmitter();
         this.pagingSetup = {
             [TimeframeOption.YEAR]: (forward) => this.getNextDate('addCalendarYears', 1, forward),
             [TimeframeOption.QUARTER]: (forward) => this.getNextDate('addCalendarMonths', 3, forward),
@@ -4021,6 +4129,23 @@ class DrDatePickerWithTimeframeComponent extends DrDatePickerComponent {
         datePickerService.format$.pipe(takeUntil(this.destroyed$)).subscribe((value) => {
             this.onChangeFormat.emit(datePickerService.normalizeValue(value));
         });
+        datePickerService.presetTag$.pipe(takeUntil(this.destroyed$)).subscribe((value) => {
+            let tagObj = PRESET_TAGS_LIST.find((val) => (val === null || val === void 0 ? void 0 : val.key) === value);
+            this.presetTagSelected = tagObj === null || tagObj === void 0 ? void 0 : tagObj.label;
+            this.onChangePresetTag.emit(value);
+        });
+        this.datePickerService.onSameDaySelectedInCalendar$.pipe(takeUntil(this.destroyed$)).subscribe((value) => {
+            this.setValueFromMoment(value);
+        });
+        datePickerService.updatedDateAndClose$.pipe(takeUntil(this.destroyed$)).subscribe((value) => {
+            if (value) {
+                this.setValueFromMoment(value);
+            }
+            else {
+                this.onChangeCallback(this.innerValue.unix());
+            }
+            this.datePicker.close();
+        });
     }
     get isDashboardClassDisplayed() {
         return this.isDashboardDatepicker;
@@ -4037,6 +4162,19 @@ class DrDatePickerWithTimeframeComponent extends DrDatePickerComponent {
             this.datePickerService.availableTimeframes = value;
         }
     }
+    set isUsingDateTagPresets(flag) {
+        this.datePickerService.isUsingDateTagPresets = flag;
+    }
+    set presetTag(tag) {
+        this.datePickerService.presetTag$.next(tag);
+    }
+    get value() {
+        return this.innerValue;
+    }
+    set value(v) {
+        this.setValueFromMoment(v);
+        this.cdr.markForCheck();
+    }
     get displayedFormattedValue() {
         if (!this.value) {
             return this.placeholder;
@@ -4069,6 +4207,7 @@ class DrDatePickerWithTimeframeComponent extends DrDatePickerComponent {
             // 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
             // that updating of ngModel/formControl is debounced
+            this.datePickerService.resetPresetTag();
             const timestamp = newValue.unix();
             this.writeValue(timestamp);
             this.onChangeDebounced$.next(this.innerValue.unix());
@@ -4077,6 +4216,15 @@ class DrDatePickerWithTimeframeComponent extends DrDatePickerComponent {
             this.setValueFromMoment(newValue);
         }
     }
+    /**
+    * Set inner value from timestamp and propagate
+    *
+    * @param timestamp
+    */
+    setValue(timestamp) {
+        this.datePickerService.resetPresetTag();
+        super.setValue(timestamp);
+    }
     writeValue(value) {
         super.writeValue(value);
         if (!value)
@@ -4099,13 +4247,13 @@ class DrDatePickerWithTimeframeComponent extends DrDatePickerComponent {
 DrDatePickerWithTimeframeComponent.decorators = [
     { type: Component, args: [{
                 selector: 'dr-date-picker-with-timeframe',
-                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",
+                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    \n    <div class=\"dr-datepicker-input-container__formatted-value-display\" (click)=\"datepickerInput.click()\">\n        <span *ngIf=\"presetTagSelected\"> {{ presetTagSelected }} </span>\n        <span>{{ presetTagSelected ? '(' + displayedFormattedValue + ')' : displayedFormattedValue }}</span>\n    </div>\n    <input\n            #datepickerInput\n            [(ngModel)]=\"value\"\n            (click)=\"datePicker.open()\"\n            [matDatepicker]=\"datePicker\"\n            [readonly]=\"readonly\"\n            [min]=\"_min\"\n            [max]=\"_max\"\n    />\n</div>\n<dr-button [disabled]=\"isNextDateDisabled\" theme=\"icon\" icon=\"dr-icon-arrow-right\" (click)=\"pagingClicked(true)\"></dr-button>\n<mat-datepicker #datePicker\n                class=\"dr-timeframe-datepicker\"\n                [calendarHeaderComponent]=\"customHeader\"\n                (yearSelected)=\"chosenPeriodHandler($event, timeframeOption.YEAR)\"\n                (monthSelected)=\"chosenPeriodHandler($event, timeframeOption.MONTH)\"\n                panelClass=\"date-picker-preset-tag\"\n                >\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:after{visibility:hidden}:host.dr-date-picker-on-dashboard .dr-datepicker-input-container{display:flex;flex-direction:row;justify-content:center;align-items:center;margin-left:-10px}:host.dr-date-picker-on-dashboard .dr-datepicker-input-container__formatted-value-display{font-weight:600;width:auto;margin-left:5px}:host.dr-date-picker-on-dashboard .dr-datepicker-input-container .dr-icon-date{display:block;position:relative;top:0;margin-right:8px;color:#4e566c}:host .dr-datepicker-input-container input{visibility:hidden;position:absolute;width:100%}:host .dr-datepicker-input-container__formatted-value-display{width:90px;height:22px;padding-left:0;text-align:center;line-height:22px;color:#0c142b;-webkit-text-decoration-line:underline;text-decoration-line:underline}:host .dr-datepicker-input-container__formatted-value-display:hover{background-color:#f2f2fb;border-radius:5px;cursor:pointer;-webkit-text-decoration-line:underline;text-decoration-line:underline;color:#4646ce}\n"]
+                styles: [":host{position:relative;width:100%;display:flex;flex-direction:row;min-height:32px;height:32px;font-size:14px;font-family:\"Poppins\",sans-serif;background-color:#fff;border:1px solid #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:-moz-fit-content;width:fit-content;justify-content:space-between}:host.dr-date-picker-on-dashboard mat-datepicker{position:absolute}:host.dr-date-picker-on-dashboard:after{visibility:hidden}:host.dr-date-picker-on-dashboard .dr-datepicker-input-container{display:flex;flex-direction:row;justify-content:center;align-items:center;margin-left:-10px}:host.dr-date-picker-on-dashboard .dr-datepicker-input-container__formatted-value-display{font-weight:600;width:auto;margin-left:5px}:host.dr-date-picker-on-dashboard .dr-datepicker-input-container .dr-icon-date{display:block;position:relative;top:0;margin-right:8px;color:#4e566c}:host .dr-datepicker-input-container input{visibility:hidden;position:absolute;width:100%}:host .dr-datepicker-input-container__formatted-value-display{width:90px;height:22px;padding-left:0;text-align:center;line-height:22px;color:#0c142b;-webkit-text-decoration-line:underline;text-decoration-line:underline}:host .dr-datepicker-input-container__formatted-value-display:hover{background-color:#f2f2fb;border-radius:5px;cursor:pointer;-webkit-text-decoration-line:underline;text-decoration-line:underline;color:#4646ce}::ng-deep .date-picker-preset-tag{width:386px!important}::ng-deep .date-picker-preset-tag .mat-calendar-content{padding-left:32px!important;padding-right:32px!important}\n"]
             },] }
 ];
 DrDatePickerWithTimeframeComponent.ctorParameters = () => [
@@ -4120,7 +4268,10 @@ DrDatePickerWithTimeframeComponent.propDecorators = {
     canSelectTimeframe: [{ type: Input }],
     availableTimeframes: [{ type: Input }],
     paginationDebounce: [{ type: Input }],
-    onChangeFormat: [{ type: Output }]
+    isUsingDateTagPresets: [{ type: Input }],
+    presetTag: [{ type: Input }],
+    onChangeFormat: [{ type: Output }],
+    onChangePresetTag: [{ type: Output }]
 };
 
 class DrDatePickerFormatDirective {
@@ -4176,44 +4327,6 @@ DrShowTimeframePipe.decorators = [
             },] }
 ];
 
-// !!! 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$2 = [
-    DrButtonComponent,
-    RadioButtonComponent,
-    RadioGroupComponent,
-    CheckboxComponent,
-    DrInputComponent,
-    DrSelectComponent,
-    DrToggleComponent,
-    DrToggleButtonComponent,
-    DrDatePickerComponent,
-    DrDatePickerWithTimeframeComponent,
-    DrDatePickerFormatDirective,
-    DrDatePickerCustomHeaderComponent,
-    DrModelDebounceChangeDirective,
-    DrShowTimeframePipe
-];
-class DrInputsModule {
-}
-DrInputsModule.decorators = [
-    { type: NgModule, args: [{
-                declarations: components$2,
-                exports: components$2,
-                imports: [
-                    FormsModule,
-                    ReactiveFormsModule,
-                    CommonModule,
-                    NgSelectModule,
-                    MatDatepickerModule
-                ]
-            },] }
-];
-
 class TooltipInfoComponent {
     constructor() {
     }
@@ -4328,6 +4441,46 @@ DrTooltipModule.decorators = [
             },] }
 ];
 
+// !!! 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$2 = [
+    DrButtonComponent,
+    RadioButtonComponent,
+    RadioGroupComponent,
+    CheckboxComponent,
+    DrInputComponent,
+    DrSelectComponent,
+    DrToggleComponent,
+    DrToggleButtonComponent,
+    DrDatePickerComponent,
+    DrDatePickerWithTimeframeComponent,
+    DrDatePickerFormatDirective,
+    DrDatePickerCustomHeaderComponent,
+    DrModelDebounceChangeDirective,
+    DrShowTimeframePipe
+];
+class DrInputsModule {
+}
+DrInputsModule.decorators = [
+    { type: NgModule, args: [{
+                declarations: components$2,
+                exports: components$2,
+                imports: [
+                    FormsModule,
+                    ReactiveFormsModule,
+                    CommonModule,
+                    NgSelectModule,
+                    MatDatepickerModule,
+                    MatTooltipModule,
+                    DrTooltipModule
+                ]
+            },] }
+];
+
 class DrAvatarModule {
 }
 DrAvatarModule.decorators = [
@@ -5008,5 +5161,5 @@ DrChatModule.decorators = [
  * Generated bundle index. Do not edit.
  */
 
-export { AnyTagComponent, CHAT_MESSAGE_TYPE, CalendarView, ChatMessage, ChatRole, CheckboxComponent, CustomDateFormat, DIALOG_BUTTON_LABEL, DIALOG_FIELD_TYPE, DIALOG_SIZE, DateFromats, DatePickerPeriodPosition, DateTagComponent, DateTagModule, DayTagComponent, DialogService, DrAccordionComponent, DrAccordionItemBodyComponent, DrAccordionItemComponent, DrAccordionItemHeaderComponent, DrAccordionModule, DrAvatarComponent, DrAvatarModule, DrAvatarPipe, DrButtonComponent, DrChatModule, DrDialogModule, DrDropdownComponent, DrDropdownDirective, DrDropdownItemShowPipe, DrDropdownModule, DrDropdownPositionDirective, DrDropdownService, DrErrorComponent, DrErrorModule, DrInputComponent, DrInputsModule, DrLayoutBodyComponent, DrLayoutComponent, DrLayoutHeaderComponent, DrLayoutModule, DrModelDebounceChangeDirective, DrPopoverAlignmentDimension, DrPopoverComponent, DrPopoverDirective, DrPopoverModule, DrPopoverRef, DrPopoverService, DrSelectComponent, DrSharedUtils, DrSpinnerComponent, DrSpinnerDirective, DrSpinnerModule, DrStepperModule, DrTabComponent, DrTabsComponent, DrTabsModule, DrTagComponent, DrTagModule, DrToggleButtonComponent, DrToggleComponent, DrTooltipDirective, DrTooltipModule, ForecastTagComponent, IMAGE_TYPES, ListTagComponent, ListTagModule, MonthTagComponent, QuarterTagComponent, RadioButtonComponent, RadioGroupComponent, SpinnerSize, SpinnerType, TimeframeOption, TooltipComponent, TooltipPosition, WeekTagComponent, YearTagComponent, components$3 as ɵa, POPUP_ANIMATION as ɵb, DrDatePickerComponent as ɵc, DrDatePickerService as ɵd, DrDatePickerWithTimeframeComponent as ɵe, DrDatePickerFormatDirective as ɵf, DrDatePickerCustomHeaderComponent as ɵg, DrShowTimeframePipe as ɵh, TooltipInfoComponent as ɵi, TooltipInfoSimpleComponent as ɵj, TooltipNoBodyComponent as ɵk, TooltipProcessDefaultComponent as ɵl, StepperComponent as ɵm, DialogWrapperComponent as ɵn, DialogModalWrapperComponent as ɵo, DrChatComponent as ɵp, DrChatCustomMessageService as ɵq, DrChatMessageComponent as ɵr, DrChatFormComponent as ɵs, DrChatMessageTextComponent as ɵt, DrChatMessageFileComponent as ɵu, DrChatCustomMessageDirective as ɵv };
+export { AnyTagComponent, CHAT_MESSAGE_TYPE, CalendarView, ChatMessage, ChatRole, CheckboxComponent, CustomDateFormat, DIALOG_BUTTON_LABEL, DIALOG_FIELD_TYPE, DIALOG_SIZE, DateFromats, DatePickerPeriodPosition, DateTagComponent, DateTagModule, DateTags, DayTagComponent, DialogService, DrAccordionComponent, DrAccordionItemBodyComponent, DrAccordionItemComponent, DrAccordionItemHeaderComponent, DrAccordionModule, DrAvatarComponent, DrAvatarModule, DrAvatarPipe, DrButtonComponent, DrChatModule, DrDialogModule, DrDropdownComponent, DrDropdownDirective, DrDropdownItemShowPipe, DrDropdownModule, DrDropdownPositionDirective, DrDropdownService, DrErrorComponent, DrErrorModule, DrInputComponent, DrInputsModule, DrLayoutBodyComponent, DrLayoutComponent, DrLayoutHeaderComponent, DrLayoutModule, DrModelDebounceChangeDirective, DrPopoverAlignmentDimension, DrPopoverComponent, DrPopoverDirective, DrPopoverModule, DrPopoverRef, DrPopoverService, DrSelectComponent, DrSharedUtils, DrSpinnerComponent, DrSpinnerDirective, DrSpinnerModule, DrStepperModule, DrTabComponent, DrTabsComponent, DrTabsModule, DrTagComponent, DrTagModule, DrToggleButtonComponent, DrToggleComponent, DrTooltipDirective, DrTooltipModule, ForecastTagComponent, IMAGE_TYPES, ListTagComponent, ListTagModule, MonthTagComponent, QuarterTagComponent, RadioButtonComponent, RadioGroupComponent, SpinnerSize, SpinnerType, TimeframeOption, TooltipComponent, TooltipPosition, WeekTagComponent, YearTagComponent, components$3 as ɵa, POPUP_ANIMATION as ɵb, DrDatePickerComponent as ɵc, DrDatePickerService as ɵd, DrDatePickerWithTimeframeComponent as ɵe, DrDatePickerFormatDirective as ɵf, DrDatePickerCustomHeaderComponent as ɵg, DrShowTimeframePipe as ɵh, TooltipInfoComponent as ɵi, TooltipInfoSimpleComponent as ɵj, TooltipNoBodyComponent as ɵk, TooltipProcessDefaultComponent as ɵl, StepperComponent as ɵm, DialogWrapperComponent as ɵn, DialogModalWrapperComponent as ɵo, DrChatComponent as ɵp, DrChatCustomMessageService as ɵq, DrChatMessageComponent as ɵr, DrChatFormComponent as ɵs, DrChatMessageTextComponent as ɵt, DrChatMessageFileComponent as ɵu, DrChatCustomMessageDirective as ɵv };
 //# sourceMappingURL=datarailsshared-datarailsshared.js.map