@datarailsshared/datarailsshared 1.4.117 → 1.4.118

package/bundles/datarailsshared-datarailsshared.umd.js

@@ -415,7 +415,7 @@
     }
 
     // @ts-ignore
-    var moment$8 = require('moment');
+    var moment$9 = require('moment');
     var ForecastTagComponent = /** @class */ (function (_super) {
         __extends(ForecastTagComponent, _super);
         function ForecastTagComponent() {
@@ -437,10 +437,10 @@
                 { value: 11, label: '11+1' }
             ];
             _this.dateFilter = function (date) {
-                var forecastDate = moment$8.unix(date);
+                var forecastDate = moment$9.unix(date);
                 var status = true;
                 _this.lockedDate.forEach(function (timestamp) {
-                    var locked = moment$8.unix(timestamp);
+                    var locked = moment$9.unix(timestamp);
                     return status = !(locked.month() === forecastDate.month() && locked.year() === forecastDate.year());
                 });
                 return status;
@@ -457,7 +457,7 @@
             this.forecastValue = this.getFiscalMonthFromDate(dateVal, fiscal_year_starts_from) - 1;
             var 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();
         };
         ForecastTagComponent.prototype.updateLockedDate = function () {
@@ -466,7 +466,7 @@
             var _loop_1 = function (forecastTag) {
                 forecastTag.disable = false;
                 this_1.lockedDate.forEach(function (timestamp) {
-                    var locked = moment$8.unix(timestamp);
+                    var locked = moment$9.unix(timestamp);
                     if (locked.month() - 1 === forecastTag.value && +locked.year() + 1 === +_this.dateObj.date) {
                         forecastTag.disable = true;
                     }
@@ -577,7 +577,7 @@
     };
 
     // @ts-ignore
-    var moment$7 = require('moment');
+    var moment$8 = require('moment');
     var MONTH_FORMATS = {
         parse: {
             dateInput: 'DD-MM-YYYY',
@@ -595,12 +595,12 @@
         function MonthTagComponent() {
             var _this = _super.call(this) || this;
             _this.lockedDate = [];
-            _this.date = new forms.FormControl(moment$7());
+            _this.date = new forms.FormControl(moment$8());
             _this.dateFilter = function (date) {
-                var calendarDate = moment$7(date);
+                var calendarDate = moment$8(date);
                 var status = true;
                 _this.lockedDate.forEach(function (timestamp) {
-                    var lockDate = moment$7.unix(timestamp);
+                    var lockDate = moment$8.unix(timestamp);
                     return status = !(lockDate.year() === calendarDate.year() && lockDate.month() === calendarDate.month());
                 });
                 return status;
@@ -609,11 +609,11 @@
         }
         MonthTagComponent.prototype.initDate = function () {
             if (this.defaultValue) {
-                this.dateObj.date = moment$7(this.defaultValue * 1000).utc().format('YYYY-MM');
-                this.date = new forms.FormControl(moment$7(this.defaultValue * 1000));
+                this.dateObj.date = moment$8(this.defaultValue * 1000).utc().format('YYYY-MM');
+                this.date = new forms.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');
             }
         };
         MonthTagComponent.prototype.initName = function () {
@@ -622,7 +622,7 @@
             }
         };
         MonthTagComponent.prototype.chosenTagHandler = function (value) {
-            var resultDate = moment$7.utc(value);
+            var resultDate = moment$8.utc(value);
             resultDate.hour(12);
             var resultTag = {
                 name: this.name,
@@ -661,7 +661,7 @@
     };
 
     // @ts-ignore
-    var moment$6 = require('moment');
+    var moment$7 = require('moment');
     var QuarterTagComponent = /** @class */ (function (_super) {
         __extends(QuarterTagComponent, _super);
         function QuarterTagComponent() {
@@ -672,8 +672,8 @@
             _this.dateFilter = function (date) {
                 var status = true;
                 _this.lockedDate.forEach(function (timestamp) {
-                    var lockDate = moment$6.unix(timestamp);
-                    var quarterDate = moment$6.unix(date.value);
+                    var lockDate = moment$7.unix(timestamp);
+                    var quarterDate = moment$7.unix(date.value);
                     if (lockDate.year() === quarterDate.year() && lockDate.month() === quarterDate.month()) {
                         date.disable = true;
                         status = false;
@@ -716,7 +716,7 @@
         };
         QuarterTagComponent.prototype.chosenTagHandler = function (value) {
             var date = new Date(value * 1000);
-            var resultDate = moment$6.utc(date);
+            var resultDate = moment$7.utc(date);
             var resultTag = {
                 name: this.name,
                 value: parseInt(resultDate.format('X'), 10),
@@ -775,7 +775,7 @@
     };
 
     // @ts-ignore
-    var moment$5 = require('moment');
+    var moment$6 = require('moment');
     var WEEK_FORMATS = {
         parse: {
             dateInput: 'WW-YYYY',
@@ -793,13 +793,13 @@
         function WeekTagComponent() {
             var _this = _super.call(this) || this;
             _this.lockedDate = [];
-            _this.date = new forms.FormControl(moment$5());
+            _this.date = new forms.FormControl(moment$6());
             _this.selectedValue = '';
             _this.dateFilter = function (date) {
-                var calendarDate = moment$5(date);
+                var calendarDate = moment$6(date);
                 var status = true;
                 _this.lockedDate.forEach(function (timestamp) {
-                    var lockDate = moment$5.unix(timestamp);
+                    var lockDate = moment$6.unix(timestamp);
                     return status = !(lockDate.week() === calendarDate.week() && lockDate.year() === calendarDate.year());
                 });
                 return status;
@@ -830,7 +830,7 @@
             }
         };
         WeekTagComponent.prototype.chosenDateHandler = function (normalizedDay) {
-            var date = moment$5(normalizedDay).unix();
+            var date = moment$6(normalizedDay).unix();
             this.chosenTagHandler(date);
         };
         WeekTagComponent.prototype.chosenTagHandler = function (value) {
@@ -842,7 +842,7 @@
             else {
                 date = new Date(value * 1000);
             }
-            var resultDate = moment$5(date);
+            var resultDate = moment$6(date);
             var resultTag = {
                 name: this.name,
                 value: parseInt(resultDate.format('X'), 10),
@@ -853,8 +853,8 @@
             this.dateChange.emit(resultTag);
         };
         WeekTagComponent.prototype.getWeekLabel = function (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();
         };
         WeekTagComponent.prototype.getUTCTimestamp = function (date) {
             return Date.UTC(date.getFullYear(), date.getMonth(), date.getDate(), 12, 0, 0, 0);
@@ -867,7 +867,7 @@
             return date;
         };
         WeekTagComponent.prototype.getWeekNumberByDate = function (date) {
-            return this.pad(moment$5(date).isoWeek(), 2);
+            return this.pad(moment$6(date).isoWeek(), 2);
         };
         WeekTagComponent.prototype.pad = function (n, width, z) {
             if (z === void 0) { z = '0'; }
@@ -897,7 +897,7 @@
     };
 
     // @ts-ignore
-    var moment$4 = require('moment');
+    var moment$5 = require('moment');
     var YEAR_FORMATS = {
         parse: {
             dateInput: 'YYYY',
@@ -915,12 +915,12 @@
         function YearTagComponent() {
             var _this = _super.call(this) || this;
             _this.lockedDate = [];
-            _this.date = new forms.FormControl(moment$4());
+            _this.date = new forms.FormControl(moment$5());
             _this.dateFilter = function (date) {
-                var calendarDateYear = moment$4(date).year();
+                var calendarDateYear = moment$5(date).year();
                 var status = true;
                 _this.lockedDate.forEach(function (timestamp) {
-                    var lockDate = moment$4.unix(timestamp);
+                    var lockDate = moment$5.unix(timestamp);
                     return status = !(lockDate.year() === calendarDateYear);
                 });
                 return status;
@@ -929,11 +929,11 @@
         }
         YearTagComponent.prototype.initDate = function () {
             if (this.defaultValue) {
-                this.dateObj.date = moment$4(new Date(this.defaultValue * 1000)).utc().format('YYYY');
-                this.date = new forms.FormControl(moment$4(this.defaultValue * 1000));
+                this.dateObj.date = moment$5(new Date(this.defaultValue * 1000)).utc().format('YYYY');
+                this.date = new forms.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');
             }
         };
         YearTagComponent.prototype.initName = function () {
@@ -943,10 +943,10 @@
         };
         YearTagComponent.prototype.chosenTagHandler = function (value) {
             var date = new Date();
-            var year = moment$4(value).year();
+            var year = moment$5(value).year();
             date.setTime(0);
             date.setFullYear(year, 0, 1);
-            var resultDate = moment$4.utc(date);
+            var resultDate = moment$5.utc(date);
             resultDate.hour(12);
             var resultTag = {
                 name: this.name,
@@ -1040,7 +1040,7 @@
         tagChange: [{ type: i0.Output }]
     };
 
-    var moment$3 = momentImported__namespace;
+    var moment$4 = momentImported__namespace;
     var ListTagComponent = /** @class */ (function () {
         function ListTagComponent() {
             this.defaultValue = '';
@@ -1081,7 +1081,7 @@
     };
 
     // @ts-ignore
-    var moment$2 = require('moment');
+    var moment$3 = require('moment');
     var DAY_FORMATS = {
         parse: {
             dateInput: 'DD-MM-YYYY',
@@ -1099,9 +1099,9 @@
         function DayTagComponent() {
             var _this = _super.call(this) || this;
             _this.lockedDate = [];
-            _this.date = new forms.FormControl(moment$2());
+            _this.date = new forms.FormControl(moment$3());
             _this.dateFilter = function (date) {
-                var calendarDate = moment$2(date).unix();
+                var calendarDate = moment$3(date).unix();
                 var status = true;
                 _this.lockedDate.forEach(function (timestamp) { return status = !(timestamp === calendarDate); });
                 return status;
@@ -1109,10 +1109,10 @@
             return _this;
         }
         DayTagComponent.prototype.initDate = function () {
-            var utcOffsetInMilliseconds = moment$2().utcOffset() * 60 * 1000;
-            this.dateObj.date = moment$2(moment$2().valueOf() + utcOffsetInMilliseconds);
+            var 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);
             }
         };
@@ -1122,11 +1122,11 @@
             }
         };
         DayTagComponent.prototype.chosenTagHandler = function (value) {
-            var date = moment$2(value).unix();
+            var date = moment$3(value).unix();
             var 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);
@@ -1872,6 +1872,88 @@
                 },] }
     ];
 
+    exports.DateFromats = void 0;
+    (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";
+    })(exports.DateFromats || (exports.DateFromats = {}));
+    var CustomDateFormat = /** @class */ (function () {
+        function CustomDateFormat() {
+            this._parse = {
+                dateInput: exports.DateFromats.DATE_INPUT_FORMAT,
+            };
+            this._display = {
+                dateInput: exports.DateFromats.DATE_INPUT_FORMAT,
+                monthYearLabel: 'MMM YYYY',
+                dateA11yLabel: 'LL',
+                monthYearA11yLabel: 'MMM YYYY',
+                quarterYearLabel: 'Q/YYYY',
+                yearLabel: 'YYYY'
+            };
+        }
+        Object.defineProperty(CustomDateFormat.prototype, "parse", {
+            get: function () {
+                return this._parse;
+            },
+            set: function (parse) {
+                this._parse = Object.assign({}, this._parse, parse);
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(CustomDateFormat.prototype, "display", {
+            get: function () {
+                return this._display;
+            },
+            set: function (display) {
+                this._display = Object.assign({}, this._display, display);
+            },
+            enumerable: false,
+            configurable: true
+        });
+        CustomDateFormat.prototype.updateDateFormat = function (parse, display) {
+            this.parse = parse;
+            if (!display) {
+                display = parse;
+            }
+            this.display = display;
+        };
+        return CustomDateFormat;
+    }());
+    exports.DatePickerPeriodPosition = void 0;
+    (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";
+    })(exports.DatePickerPeriodPosition || (exports.DatePickerPeriodPosition = {}));
+    exports.TimeframeOption = void 0;
+    (function (TimeframeOption) {
+        TimeframeOption["DAY"] = "day";
+        TimeframeOption["MONTH"] = "month";
+        TimeframeOption["QUARTER"] = "quarter";
+        TimeframeOption["WEEK"] = "week";
+        TimeframeOption["YEAR"] = "year";
+    })(exports.TimeframeOption || (exports.TimeframeOption = {}));
+    exports.CalendarView = void 0;
+    (function (CalendarView) {
+        CalendarView["FOR_DAYS"] = "month";
+        CalendarView["FOR_MONTHS"] = "year";
+        CalendarView["FOR_QUARTERS"] = "none";
+        CalendarView["FOR_YEARS"] = "multi-year";
+    })(exports.CalendarView || (exports.CalendarView = {}));
+    exports.DateTags = void 0;
+    (function (DateTags) {
+        DateTags["TODAY"] = "today";
+        DateTags["YESTERDAY"] = "yesterday";
+        DateTags["THIS_MONTH"] = "this_month";
+        DateTags["PREV_MONTH"] = "prev_month";
+    })(exports.DateTags || (exports.DateTags = {}));
+
     var POPUP_POSITIONS = {
         top: {
             originX: 'center',
@@ -1967,6 +2049,12 @@
             animations.animate(150, animations.style({ opacity: 0 })),
         ]),
     ];
+    var PRESET_TAGS_LIST = [
+        { key: exports.DateTags.TODAY, label: 'Today' },
+        { key: exports.DateTags.YESTERDAY, label: 'Yesterday' },
+        { key: exports.DateTags.THIS_MONTH, label: 'This month' },
+        { key: exports.DateTags.PREV_MONTH, label: 'Prev month' }
+    ];
 
     var TooltipComponent = /** @class */ (function () {
         function TooltipComponent() {
@@ -3902,81 +3990,6 @@
         ngModelDebounceChange: [{ type: i0.Output }]
     };
 
-    exports.DateFromats = void 0;
-    (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";
-    })(exports.DateFromats || (exports.DateFromats = {}));
-    var CustomDateFormat = /** @class */ (function () {
-        function CustomDateFormat() {
-            this._parse = {
-                dateInput: exports.DateFromats.DATE_INPUT_FORMAT,
-            };
-            this._display = {
-                dateInput: exports.DateFromats.DATE_INPUT_FORMAT,
-                monthYearLabel: 'MMM YYYY',
-                dateA11yLabel: 'LL',
-                monthYearA11yLabel: 'MMM YYYY',
-                quarterYearLabel: 'Q/YYYY',
-                yearLabel: 'YYYY'
-            };
-        }
-        Object.defineProperty(CustomDateFormat.prototype, "parse", {
-            get: function () {
-                return this._parse;
-            },
-            set: function (parse) {
-                this._parse = Object.assign({}, this._parse, parse);
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(CustomDateFormat.prototype, "display", {
-            get: function () {
-                return this._display;
-            },
-            set: function (display) {
-                this._display = Object.assign({}, this._display, display);
-            },
-            enumerable: false,
-            configurable: true
-        });
-        CustomDateFormat.prototype.updateDateFormat = function (parse, display) {
-            this.parse = parse;
-            if (!display) {
-                display = parse;
-            }
-            this.display = display;
-        };
-        return CustomDateFormat;
-    }());
-    exports.DatePickerPeriodPosition = void 0;
-    (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";
-    })(exports.DatePickerPeriodPosition || (exports.DatePickerPeriodPosition = {}));
-    exports.TimeframeOption = void 0;
-    (function (TimeframeOption) {
-        TimeframeOption["DAY"] = "day";
-        TimeframeOption["MONTH"] = "month";
-        TimeframeOption["QUARTER"] = "quarter";
-        TimeframeOption["WEEK"] = "week";
-        TimeframeOption["YEAR"] = "year";
-    })(exports.TimeframeOption || (exports.TimeframeOption = {}));
-    exports.CalendarView = void 0;
-    (function (CalendarView) {
-        CalendarView["FOR_DAYS"] = "month";
-        CalendarView["FOR_MONTHS"] = "year";
-        CalendarView["FOR_QUARTERS"] = "none";
-        CalendarView["FOR_YEARS"] = "multi-year";
-    })(exports.CalendarView || (exports.CalendarView = {}));
-
     var IMAGE_TYPES = ['image/png', 'image/jpeg', 'image/gif'];
     exports.CHAT_MESSAGE_TYPE = void 0;
     (function (CHAT_MESSAGE_TYPE) {
@@ -4120,15 +4133,38 @@
                     return defaultFrame;
             }
         };
+        DrSharedUtils.getDateByTag = function (tag) {
+            var todayDate = momentImported__namespace().utc();
+            switch (tag) {
+                case exports.DateTags.TODAY:
+                    return todayDate;
+                case exports.DateTags.YESTERDAY:
+                    todayDate.subtract(1, 'days');
+                    return todayDate;
+                case exports.DateTags.THIS_MONTH:
+                    todayDate.month();
+                    return todayDate;
+                case exports.DateTags.PREV_MONTH:
+                    todayDate.month();
+                    todayDate.subtract(1, 'months');
+                    return todayDate;
+            }
+        };
         return DrSharedUtils;
     }());
 
+    var moment$2 = require('moment');
     var DrDatePickerService = /** @class */ (function () {
         function DrDatePickerService() {
             this.isTimeframeSelectionEnabled = false;
             this.timeframe = exports.TimeframeOption.DAY;
             this.format$ = new rxjs.BehaviorSubject(exports.DateFromats.MAT_DEFAULT_DATE_FORMAT);
             this.updatedQuarter$ = new rxjs.Subject();
+            this.updatedDateAndClose$ = new rxjs.Subject();
+            this.presetTag$ = new rxjs.BehaviorSubject('');
+            this.onSameDaySelectedInCalendar$ = new rxjs.Subject();
+            this.keepPresetTag = false;
+            this.isValueUpdating = false;
             this.availableTimeframes = [
                 exports.TimeframeOption.DAY,
                 exports.TimeframeOption.WEEK,
@@ -4258,6 +4294,47 @@
             if (isSubtract === void 0) { isSubtract = false; }
             return date ? ___namespace.cloneDeep(date)[isSubtract ? 'subtract' : 'add'](this.fiscalYearMonthsModifier, 'month') : date;
         };
+        DrDatePickerService.prototype.updateDatePickerByPreset = function (tag, calender) {
+            this.keepPresetTag = true;
+            var date = null;
+            if (tag) {
+                date = DrSharedUtils.getDateByTag(tag);
+                switch (tag) {
+                    case exports.DateTags.TODAY:
+                        this.updateTimeframeAndFormat(exports.DateFromats.MAT_DEFAULT_DATE_FORMAT);
+                        break;
+                    case exports.DateTags.YESTERDAY:
+                        this.updateTimeframeAndFormat(exports.DateFromats.MAT_DEFAULT_DATE_FORMAT);
+                        break;
+                    case exports.DateTags.THIS_MONTH:
+                        this.updateTimeframeAndFormat(exports.DateFromats.MONTH_YEAR_FORMAT);
+                        this.selectDateInCalendarMonthView(date, calender);
+                        break;
+                    case exports.DateTags.PREV_MONTH:
+                        this.updateTimeframeAndFormat(exports.DateFromats.MONTH_YEAR_FORMAT);
+                        this.selectDateInCalendarMonthView(date, calender);
+                        break;
+                }
+            }
+            this.presetTag$.next(tag);
+            this.updatedDateAndClose$.next(date);
+        };
+        DrDatePickerService.prototype.selectDateInCalendarMonthView = function (date, calender) {
+            setTimeout(function () {
+                var monthView = calender.monthView;
+                monthView._activeDate = date;
+                monthView._selected = date;
+                monthView._init();
+            });
+        };
+        DrDatePickerService.prototype.resetPresetTag = function () {
+            if (!this.keepPresetTag) {
+                this.presetTag$.next(null);
+            }
+            else {
+                this.keepPresetTag = false;
+            }
+        };
         return DrDatePickerService;
     }());
     DrDatePickerService.decorators = [
@@ -4322,6 +4399,7 @@
             this.timeframeSelection = false;
             this.periodMonthLabel = '';
             this.periodYearLabel = '';
+            this.presetTagList = PRESET_TAGS_LIST;
             this.calendarView = exports.CalendarView;
             _calendar.stateChanges.pipe(operators.takeUntil(this._destroyed)).subscribe(function () { return _this.setPeriodLabels(); });
             this.datePickerService.format$.pipe(operators.takeUntil(this._destroyed)).subscribe(function (value) {
@@ -4338,8 +4416,21 @@
                     _this.transformDateInMultiyearViewAccordingToFY();
                 }
             });
+            _calendar._userSelection.subscribe(function (date) {
+                if (!_this.datePickerService.isValueUpdating) {
+                    _this.datePickerService.onSameDaySelectedInCalendar$.next(date.value);
+                }
+            });
             this.datePickerService.calendarInstance = _calendar;
         }
+        Object.defineProperty(DrDatePickerCustomHeaderComponent.prototype, "selectedPresetTag", {
+            get: function () {
+                return this.datePickerService.presetTag$.getValue();
+            },
+            enumerable: false,
+            configurable: true
+        });
+        ;
         DrDatePickerCustomHeaderComponent.prototype.ngOnInit = function () {
             var _this = this;
             setTimeout(function () {
@@ -4366,8 +4457,12 @@
             }
             this.cdr.markForCheck();
         };
-        DrDatePickerCustomHeaderComponent.prototype.setTimeframe = function () {
+        DrDatePickerCustomHeaderComponent.prototype.setTimeframe = function (value) {
             var _this = this;
+            if (value !== this.selectedTimeframe) {
+                this.datePickerService.resetPresetTag();
+            }
+            this.selectedTimeframe = value;
             this.timeframeSelection = false;
             this._calendar.currentView = this.selectedTimeframe;
             var chosenTimeframeOption = this.timeframeOptions.filter(function (option) { return option.value === _this.selectedTimeframe; })[0];
@@ -4407,14 +4502,23 @@
             multuYearView._selectedYear = multuYearView._activeDate.year();
             multuYearView._init();
         };
+        DrDatePickerCustomHeaderComponent.prototype.onSelectPresetTag = function (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);
+        };
         return DrDatePickerCustomHeaderComponent;
     }());
     DrDatePickerCustomHeaderComponent.decorators = [
         { type: i0.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: i0.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 = function () { return [
@@ -4596,8 +4700,16 @@
          * @param timestamp
          */
         DrDatePickerComponent.prototype.setValue = function (timestamp) {
+            var _this = this;
+            // 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(function () {
+                _this.datePickerService.isValueUpdating = false;
+            });
         };
         return DrDatePickerComponent;
     }());
@@ -4640,6 +4752,7 @@
             _this.canSelectTimeframe = true;
             // eslint-disable-next-line
             _this.onChangeFormat = new i0.EventEmitter();
+            _this.onChangePresetTag = new i0.EventEmitter();
             _this.pagingSetup = (_c = {},
                 _c[exports.TimeframeOption.YEAR] = function (forward) { return _this.getNextDate('addCalendarYears', 1, forward); },
                 _c[exports.TimeframeOption.QUARTER] = function (forward) { return _this.getNextDate('addCalendarMonths', 3, forward); },
@@ -4654,6 +4767,23 @@
             datePickerService.format$.pipe(operators.takeUntil(_this.destroyed$)).subscribe(function (value) {
                 _this.onChangeFormat.emit(datePickerService.normalizeValue(value));
             });
+            datePickerService.presetTag$.pipe(operators.takeUntil(_this.destroyed$)).subscribe(function (value) {
+                var tagObj = PRESET_TAGS_LIST.find(function (val) { return (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(operators.takeUntil(_this.destroyed$)).subscribe(function (value) {
+                _this.setValueFromMoment(value);
+            });
+            datePickerService.updatedDateAndClose$.pipe(operators.takeUntil(_this.destroyed$)).subscribe(function (value) {
+                if (value) {
+                    _this.setValueFromMoment(value);
+                }
+                else {
+                    _this.onChangeCallback(_this.innerValue.unix());
+                }
+                _this.datePicker.close();
+            });
             return _this;
         }
         Object.defineProperty(DrDatePickerWithTimeframeComponent.prototype, "isDashboardClassDisplayed", {
@@ -4683,6 +4813,31 @@
             enumerable: false,
             configurable: true
         });
+        Object.defineProperty(DrDatePickerWithTimeframeComponent.prototype, "isUsingDateTagPresets", {
+            set: function (flag) {
+                this.datePickerService.isUsingDateTagPresets = flag;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(DrDatePickerWithTimeframeComponent.prototype, "presetTag", {
+            set: function (tag) {
+                this.datePickerService.presetTag$.next(tag);
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(DrDatePickerWithTimeframeComponent.prototype, "value", {
+            get: function () {
+                return this.innerValue;
+            },
+            set: function (v) {
+                this.setValueFromMoment(v);
+                this.cdr.markForCheck();
+            },
+            enumerable: false,
+            configurable: true
+        });
         Object.defineProperty(DrDatePickerWithTimeframeComponent.prototype, "displayedFormattedValue", {
             get: function () {
                 if (!this.value) {
@@ -4720,6 +4875,7 @@
                 // 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();
                 var timestamp = newValue.unix();
                 this.writeValue(timestamp);
                 this.onChangeDebounced$.next(this.innerValue.unix());
@@ -4728,6 +4884,15 @@
                 this.setValueFromMoment(newValue);
             }
         };
+        /**
+        * Set inner value from timestamp and propagate
+        *
+        * @param timestamp
+        */
+        DrDatePickerWithTimeframeComponent.prototype.setValue = function (timestamp) {
+            this.datePickerService.resetPresetTag();
+            _super.prototype.setValue.call(this, timestamp);
+        };
         DrDatePickerWithTimeframeComponent.prototype.writeValue = function (value) {
             _super.prototype.writeValue.call(this, value);
             if (!value)
@@ -4751,13 +4916,13 @@
     DrDatePickerWithTimeframeComponent.decorators = [
         { type: i0.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: i0.ChangeDetectionStrategy.OnPush,
                     providers: [
                         { provide: forms.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 = function () { return [
@@ -4772,7 +4937,10 @@
         canSelectTimeframe: [{ type: i0.Input }],
         availableTimeframes: [{ type: i0.Input }],
         paginationDebounce: [{ type: i0.Input }],
-        onChangeFormat: [{ type: i0.Output }]
+        isUsingDateTagPresets: [{ type: i0.Input }],
+        presetTag: [{ type: i0.Input }],
+        onChangeFormat: [{ type: i0.Output }],
+        onChangePresetTag: [{ type: i0.Output }]
     };
 
     var DrDatePickerFormatDirective = /** @class */ (function () {
@@ -4836,47 +5004,6 @@
                 },] }
     ];
 
-    // !!! Please do not use such approach in other places
-    // Hard fix for 'none' calendar view selection
-    datepicker.MatCalendar.prototype.focusActiveCell = function () {
-        var _a;
-        (_a = this._getCurrentViewComponent()) === null || _a === void 0 ? void 0 : _a._focusActiveCell(false);
-    };
-    var components$2 = [
-        DrButtonComponent,
-        RadioButtonComponent,
-        RadioGroupComponent,
-        CheckboxComponent,
-        DrInputComponent,
-        DrSelectComponent,
-        DrToggleComponent,
-        DrToggleButtonComponent,
-        DrDatePickerComponent,
-        DrDatePickerWithTimeframeComponent,
-        DrDatePickerFormatDirective,
-        DrDatePickerCustomHeaderComponent,
-        DrModelDebounceChangeDirective,
-        DrShowTimeframePipe
-    ];
-    var DrInputsModule = /** @class */ (function () {
-        function DrInputsModule() {
-        }
-        return DrInputsModule;
-    }());
-    DrInputsModule.decorators = [
-        { type: i0.NgModule, args: [{
-                    declarations: components$2,
-                    exports: components$2,
-                    imports: [
-                        forms.FormsModule,
-                        forms.ReactiveFormsModule,
-                        common.CommonModule,
-                        ngSelect.NgSelectModule,
-                        datepicker.MatDatepickerModule
-                    ]
-                },] }
-    ];
-
     var TooltipInfoComponent = /** @class */ (function () {
         function TooltipInfoComponent() {
         }
@@ -4980,6 +5107,49 @@
                 },] }
     ];
 
+    // !!! Please do not use such approach in other places
+    // Hard fix for 'none' calendar view selection
+    datepicker.MatCalendar.prototype.focusActiveCell = function () {
+        var _a;
+        (_a = this._getCurrentViewComponent()) === null || _a === void 0 ? void 0 : _a._focusActiveCell(false);
+    };
+    var components$2 = [
+        DrButtonComponent,
+        RadioButtonComponent,
+        RadioGroupComponent,
+        CheckboxComponent,
+        DrInputComponent,
+        DrSelectComponent,
+        DrToggleComponent,
+        DrToggleButtonComponent,
+        DrDatePickerComponent,
+        DrDatePickerWithTimeframeComponent,
+        DrDatePickerFormatDirective,
+        DrDatePickerCustomHeaderComponent,
+        DrModelDebounceChangeDirective,
+        DrShowTimeframePipe
+    ];
+    var DrInputsModule = /** @class */ (function () {
+        function DrInputsModule() {
+        }
+        return DrInputsModule;
+    }());
+    DrInputsModule.decorators = [
+        { type: i0.NgModule, args: [{
+                    declarations: components$2,
+                    exports: components$2,
+                    imports: [
+                        forms.FormsModule,
+                        forms.ReactiveFormsModule,
+                        common.CommonModule,
+                        ngSelect.NgSelectModule,
+                        datepicker.MatDatepickerModule,
+                        tooltip.MatTooltipModule,
+                        DrTooltipModule
+                    ]
+                },] }
+    ];
+
     var DrAvatarModule = /** @class */ (function () {
         function DrAvatarModule() {
         }