@datarailsshared/datarailsshared 1.4.25-tigers → 1.4.26-tigers

package/bundles/datarailsshared-datarailsshared.umd.js

@@ -426,7 +426,7 @@
     }
 
     // @ts-ignore
-    var moment$9 = require("moment");
+    var moment$8 = require("moment");
     var ForecastTagComponent = /** @class */ (function (_super) {
         __extends(ForecastTagComponent, _super);
         function ForecastTagComponent() {
@@ -448,10 +448,10 @@
                 { "value": 11, "label": "11+1" }
             ];
             _this.dateFilter = function (date) {
-                var forecastDate = moment$9.unix(date);
+                var forecastDate = moment$8.unix(date);
                 var status = true;
                 _this.lockedDate.forEach(function (timestamp) {
-                    var locked = moment$9.unix(timestamp);
+                    var locked = moment$8.unix(timestamp);
                     return status = !(locked.month() === forecastDate.month() && locked.year() === forecastDate.year());
                 });
                 return status;
@@ -468,7 +468,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$9(new Date(fiscal_year, 0, 1)).format("YYYY");
+            this.dateObj.date = moment$8(new Date(fiscal_year, 0, 1)).format("YYYY");
             this.updateLockedDate();
         };
         ForecastTagComponent.prototype.updateLockedDate = function () {
@@ -477,7 +477,7 @@
             var _loop_1 = function (forecastTag) {
                 forecastTag.disable = false;
                 this_1.lockedDate.forEach(function (timestamp) {
-                    var locked = moment$9.unix(timestamp);
+                    var locked = moment$8.unix(timestamp);
                     if (locked.month() - 1 === forecastTag.value && +locked.year() + 1 === +_this.dateObj.date) {
                         forecastTag.disable = true;
                     }
@@ -586,7 +586,7 @@
     };
 
     // @ts-ignore
-    var moment$8 = require("moment");
+    var moment$7 = require("moment");
     var MONTH_FORMATS = {
         parse: {
             dateInput: "DD-MM-YYYY",
@@ -604,12 +604,12 @@
         function MonthTagComponent() {
             var _this = _super.call(this) || this;
             _this.lockedDate = [];
-            _this.date = new forms.FormControl(moment$8());
+            _this.date = new forms.FormControl(moment$7());
             _this.dateFilter = function (date) {
-                var calendarDate = moment$8(date);
+                var calendarDate = moment$7(date);
                 var status = true;
                 _this.lockedDate.forEach(function (timestamp) {
-                    var lockDate = moment$8.unix(timestamp);
+                    var lockDate = moment$7.unix(timestamp);
                     return status = !(lockDate.year() === calendarDate.year() && lockDate.month() === calendarDate.month());
                 });
                 return status;
@@ -618,11 +618,11 @@
         }
         MonthTagComponent.prototype.initDate = function () {
             if (this.defaultValue) {
-                this.dateObj.date = moment$8(this.defaultValue * 1000).utc().format("YYYY-MM");
-                this.date = new forms.FormControl(moment$8(this.defaultValue * 1000));
+                this.dateObj.date = moment$7(this.defaultValue * 1000).utc().format("YYYY-MM");
+                this.date = new forms.FormControl(moment$7(this.defaultValue * 1000));
             }
             else {
-                this.dateObj.date = moment$8(new Date()).format("YYYY-MM");
+                this.dateObj.date = moment$7(new Date()).format("YYYY-MM");
             }
         };
         MonthTagComponent.prototype.initName = function () {
@@ -631,7 +631,7 @@
             }
         };
         MonthTagComponent.prototype.chosenTagHandler = function (value) {
-            var resultDate = moment$8.utc(value);
+            var resultDate = moment$7.utc(value);
             resultDate.hour(12);
             var resultTag = {
                 name: this.name,
@@ -670,7 +670,7 @@
     };
 
     // @ts-ignore
-    var moment$7 = require("moment");
+    var moment$6 = require("moment");
     var QuarterTagComponent = /** @class */ (function (_super) {
         __extends(QuarterTagComponent, _super);
         function QuarterTagComponent() {
@@ -681,8 +681,8 @@
             _this.dateFilter = function (date) {
                 var status = true;
                 _this.lockedDate.forEach(function (timestamp) {
-                    var lockDate = moment$7.unix(timestamp);
-                    var quarterDate = moment$7.unix(date.value);
+                    var lockDate = moment$6.unix(timestamp);
+                    var quarterDate = moment$6.unix(date.value);
                     if (lockDate.year() === quarterDate.year() && lockDate.month() === quarterDate.month()) {
                         date.disable = true;
                         status = false;
@@ -725,7 +725,7 @@
         };
         QuarterTagComponent.prototype.chosenTagHandler = function (value) {
             var date = new Date(value * 1000);
-            var resultDate = moment$7.utc(date);
+            var resultDate = moment$6.utc(date);
             var resultTag = {
                 name: this.name,
                 value: parseInt(resultDate.format("X"), 10),
@@ -783,7 +783,7 @@
     };
 
     // @ts-ignore
-    var moment$6 = require("moment");
+    var moment$5 = require("moment");
     var WEEK_FORMATS = {
         parse: {
             dateInput: "WW-YYYY",
@@ -801,13 +801,13 @@
         function WeekTagComponent() {
             var _this = _super.call(this) || this;
             _this.lockedDate = [];
-            _this.date = new forms.FormControl(moment$6());
+            _this.date = new forms.FormControl(moment$5());
             _this.selectedValue = "";
             _this.dateFilter = function (date) {
-                var calendarDate = moment$6(date);
+                var calendarDate = moment$5(date);
                 var status = true;
                 _this.lockedDate.forEach(function (timestamp) {
-                    var lockDate = moment$6.unix(timestamp);
+                    var lockDate = moment$5.unix(timestamp);
                     return status = !(lockDate.week() === calendarDate.week() && lockDate.year() === calendarDate.year());
                 });
                 return status;
@@ -838,7 +838,7 @@
             }
         };
         WeekTagComponent.prototype.chosenDateHandler = function (normalizedDay) {
-            var date = moment$6(normalizedDay).unix();
+            var date = moment$5(normalizedDay).unix();
             this.chosenTagHandler(date);
         };
         WeekTagComponent.prototype.chosenTagHandler = function (value) {
@@ -850,7 +850,7 @@
             else {
                 date = new Date(value * 1000);
             }
-            var resultDate = moment$6(date);
+            var resultDate = moment$5(date);
             var resultTag = {
                 name: this.name,
                 value: parseInt(resultDate.format("X"), 10),
@@ -861,8 +861,8 @@
             this.dateChange.emit(resultTag);
         };
         WeekTagComponent.prototype.getWeekLabel = function (date) {
-            return "W" + this.pad(moment$6(date).isoWeek(), 2) +
-                " " + moment$6(date).year();
+            return "W" + this.pad(moment$5(date).isoWeek(), 2) +
+                " " + moment$5(date).year();
         };
         WeekTagComponent.prototype.getUTCTimestamp = function (date) {
             return Date.UTC(date.getFullYear(), date.getMonth(), date.getDate(), 12, 0, 0, 0);
@@ -875,7 +875,7 @@
             return date;
         };
         WeekTagComponent.prototype.getWeekNumberByDate = function (date) {
-            return this.pad(moment$6(date).isoWeek(), 2);
+            return this.pad(moment$5(date).isoWeek(), 2);
         };
         WeekTagComponent.prototype.pad = function (n, width, z) {
             if (z === void 0) { z = "0"; }
@@ -905,7 +905,7 @@
     };
 
     // @ts-ignore
-    var moment$5 = require("moment");
+    var moment$4 = require("moment");
     var YEAR_FORMATS = {
         parse: {
             dateInput: "YYYY",
@@ -923,12 +923,12 @@
         function YearTagComponent() {
             var _this = _super.call(this) || this;
             _this.lockedDate = [];
-            _this.date = new forms.FormControl(moment$5());
+            _this.date = new forms.FormControl(moment$4());
             _this.dateFilter = function (date) {
-                var calendarDateYear = moment$5(date).year();
+                var calendarDateYear = moment$4(date).year();
                 var status = true;
                 _this.lockedDate.forEach(function (timestamp) {
-                    var lockDate = moment$5.unix(timestamp);
+                    var lockDate = moment$4.unix(timestamp);
                     return status = !(lockDate.year() === calendarDateYear);
                 });
                 return status;
@@ -937,11 +937,11 @@
         }
         YearTagComponent.prototype.initDate = function () {
             if (this.defaultValue) {
-                this.dateObj.date = moment$5(new Date(this.defaultValue * 1000)).utc().format("YYYY");
-                this.date = new forms.FormControl(moment$5(this.defaultValue * 1000));
+                this.dateObj.date = moment$4(new Date(this.defaultValue * 1000)).utc().format("YYYY");
+                this.date = new forms.FormControl(moment$4(this.defaultValue * 1000));
             }
             else {
-                this.dateObj.date = moment$5(new Date()).format("YYYY");
+                this.dateObj.date = moment$4(new Date()).format("YYYY");
             }
         };
         YearTagComponent.prototype.initName = function () {
@@ -951,10 +951,10 @@
         };
         YearTagComponent.prototype.chosenTagHandler = function (value) {
             var date = new Date();
-            var year = moment$5(value).year();
+            var year = moment$4(value).year();
             date.setTime(0);
             date.setFullYear(year, 0, 1);
-            var resultDate = moment$5.utc(date);
+            var resultDate = moment$4.utc(date);
             resultDate.hour(12);
             var resultTag = {
                 name: this.name,
@@ -1048,7 +1048,7 @@
         tagChange: [{ type: i0.Output }]
     };
 
-    var moment$4 = momentImported__namespace;
+    var moment$3 = momentImported__namespace;
     var ListTagComponent = /** @class */ (function () {
         function ListTagComponent() {
             this.defaultValue = "";
@@ -1089,7 +1089,7 @@
     };
 
     // @ts-ignore
-    var moment$3 = require("moment");
+    var moment$2 = require("moment");
     var DAY_FORMATS = {
         parse: {
             dateInput: "DD-MM-YYYY",
@@ -1107,9 +1107,9 @@
         function DayTagComponent() {
             var _this = _super.call(this) || this;
             _this.lockedDate = [];
-            _this.date = new forms.FormControl(moment$3());
+            _this.date = new forms.FormControl(moment$2());
             _this.dateFilter = function (date) {
-                var calendarDate = moment$3(date).unix();
+                var calendarDate = moment$2(date).unix();
                 var status = true;
                 _this.lockedDate.forEach(function (timestamp) {
                     return status = !(timestamp === calendarDate);
@@ -1119,10 +1119,10 @@
             return _this;
         }
         DayTagComponent.prototype.initDate = function () {
-            var utcOffsetInMilliseconds = moment$3().utcOffset() * 60 * 1000;
-            this.dateObj.date = moment$3(moment$3().valueOf() + utcOffsetInMilliseconds);
+            var utcOffsetInMilliseconds = moment$2().utcOffset() * 60 * 1000;
+            this.dateObj.date = moment$2(moment$2().valueOf() + utcOffsetInMilliseconds);
             if (this.defaultValue) {
-                this.dateObj.date = moment$3(new Date(this.defaultValue * 1000)).utc();
+                this.dateObj.date = moment$2(new Date(this.defaultValue * 1000)).utc();
                 this.date.setValue(this.dateObj.date);
             }
         };
@@ -1132,11 +1132,11 @@
             }
         };
         DayTagComponent.prototype.chosenTagHandler = function (value) {
-            var date = moment$3(value).unix();
+            var date = moment$2(value).unix();
             var resultTag = {
                 name: this.name,
                 value: date,
-                label: moment$3.unix(date).format("MM/DD/YYYY"),
+                label: moment$2.unix(date).format("MM/DD/YYYY"),
                 locked: !this.dateFilter(value)
             };
             console.log("resultTag", resultTag);
@@ -3455,18 +3455,21 @@
         ngModelDebounceChange: [{ type: i0.Output }]
     };
 
-    var MAT_DEFAULT_DATE_FORMAT = 'MM/DD/yyyy';
-    var DATE_INPUT_FORMAT = 'YYYY/MM/DD';
-    var YEAR_FORMAT = 'yyyy';
-    var MONTH_YEAR_FORMAT = 'MM/yyyy';
-    var QUARTER_FORMAT = 'Q/yyyy';
+    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";
+    })(exports.DateFromats || (exports.DateFromats = {}));
     var CustomDateFormat = /** @class */ (function () {
         function CustomDateFormat() {
             this._parse = {
-                dateInput: DATE_INPUT_FORMAT
+                dateInput: exports.DateFromats.DATE_INPUT_FORMAT,
             };
             this._display = {
-                dateInput: DATE_INPUT_FORMAT,
+                dateInput: exports.DateFromats.DATE_INPUT_FORMAT,
                 monthYearLabel: 'MMM YYYY',
                 dateA11yLabel: 'LL',
                 monthYearA11yLabel: 'MMM YYYY',
@@ -3510,6 +3513,20 @@
         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["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 components$2 = [DateTagComponent,
         DayTagComponent,
@@ -3591,38 +3608,37 @@
                 },] }
     ];
 
-    var moment$2 = require('moment');
     var DrDatePickerService = /** @class */ (function () {
         function DrDatePickerService() {
             this.isTimeframeSelectionEnabled = false;
-            this.timeframe = 'day';
-            this.format$ = new rxjs.BehaviorSubject(MAT_DEFAULT_DATE_FORMAT);
+            this.timeframe = exports.TimeframeOption.DAY;
+            this.format$ = new rxjs.BehaviorSubject(exports.DateFromats.MAT_DEFAULT_DATE_FORMAT);
             this.updatedQuarter$ = new rxjs.Subject();
             this.formatConfig = {
-                day: MAT_DEFAULT_DATE_FORMAT,
-                month: MONTH_YEAR_FORMAT,
-                year: YEAR_FORMAT,
-                quarter: QUARTER_FORMAT,
+                day: exports.DateFromats.MAT_DEFAULT_DATE_FORMAT,
+                month: exports.DateFromats.MONTH_YEAR_FORMAT,
+                year: exports.DateFromats.YEAR_FORMAT,
+                quarter: exports.DateFromats.QUARTER_FORMAT,
             };
         }
         DrDatePickerService.prototype.getQuarterDisplay = function (value) {
-            return 'Q' + moment$2(value).quarter() + this.format$.getValue().charAt(1) + moment$2(value).year();
+            return 'Q' + value.quarter() + this.format$.getValue().charAt(1) + value.year();
         };
         DrDatePickerService.prototype.getTimeframe = function (format) {
-            var defaultFrame = 'day';
+            var defaultFrame = exports.TimeframeOption.DAY;
             if (!format) {
                 return defaultFrame;
             }
             var lowerCaseFormat = format.toLowerCase();
             switch (true) {
                 case lowerCaseFormat.includes('q'):
-                    return 'quarter';
+                    return exports.TimeframeOption.QUARTER;
                 case lowerCaseFormat.includes('d'):
-                    return 'day';
+                    return exports.TimeframeOption.DAY;
                 case lowerCaseFormat.includes('m'):
-                    return 'month';
+                    return exports.TimeframeOption.MONTH;
                 case lowerCaseFormat.includes('y'):
-                    return 'year';
+                    return exports.TimeframeOption.YEAR;
                 default:
                     return defaultFrame;
             }
@@ -3647,6 +3663,7 @@
     var moment$1 = require('moment');
     var DrDatePickerCustomHeaderComponent = /** @class */ (function () {
         function DrDatePickerCustomHeaderComponent(_calendar, _dateAdapter, _dateFormats, cdr, datePickerService) {
+            var _a;
             var _this = this;
             this._calendar = _calendar;
             this._dateAdapter = _dateAdapter;
@@ -3658,24 +3675,24 @@
             this.selectedQuarter = 1;
             this.timeframeOptions = [{
                     title: 'Day',
-                    value: 'month',
+                    value: exports.CalendarView.FOR_DAYS,
                     format: this.datePickerService.formatConfig.day,
                     periodLabel: function () { return _this._dateAdapter
                         .format(_this._calendar.activeDate, _this._dateFormats.display.monthYearLabel)
                         .toLocaleUpperCase(); }
                 }, {
                     title: 'Month',
-                    value: 'year',
+                    value: exports.CalendarView.FOR_MONTHS,
                     format: this.datePickerService.formatConfig.month,
                     periodLabel: function () { return String(moment$1(_this._calendar.activeDate).year()); }
                 }, {
                     title: 'Quarter',
-                    value: 'none',
+                    value: exports.CalendarView.FOR_QUARTERS,
                     format: this.datePickerService.formatConfig.quarter,
                     periodLabel: function () { return String(moment$1(_this._calendar.activeDate).year()); }
                 }, {
                     title: 'Year',
-                    value: 'multi-year',
+                    value: exports.CalendarView.FOR_YEARS,
                     format: this.datePickerService.formatConfig.year,
                     periodLabel: function () {
                         var currentYear = moment$1(_this._calendar.activeDate).year();
@@ -3683,16 +3700,17 @@
                         return startPeriod + '-' + (startPeriod + 23);
                     }
                 }];
-            this.pagingSetup = {
-                'year': function (forward) { return _this.pagingDateChange('addCalendarYears', 1, forward); },
-                'none': function (forward) { return _this.pagingDateChange('addCalendarYears', 1, forward); },
-                'month': function (forward) { return _this.pagingDateChange('addCalendarMonths', 1, forward); },
-                'multi-year': function (forward) { return _this.pagingDateChange('addCalendarYears', 24, forward); }
-            };
-            this.selectedTimeframe = 'month';
+            this.pagingSetup = (_a = {},
+                _a[exports.CalendarView.FOR_MONTHS] = function (forward) { return _this.pagingDateChange('addCalendarYears', 1, forward); },
+                _a[exports.CalendarView.FOR_QUARTERS] = function (forward) { return _this.pagingDateChange('addCalendarYears', 1, forward); },
+                _a[exports.CalendarView.FOR_DAYS] = function (forward) { return _this.pagingDateChange('addCalendarMonths', 1, forward); },
+                _a[exports.CalendarView.FOR_YEARS] = function (forward) { return _this.pagingDateChange('addCalendarYears', 24, forward); },
+                _a);
+            this.selectedTimeframe = exports.CalendarView.FOR_DAYS;
             this.timeframeSelection = false;
             this.periodMonthLabel = '';
             this.periodYearLabel = '';
+            this.calendarView = exports.CalendarView;
             _calendar.stateChanges.pipe(operators.takeUntil(this._destroyed)).subscribe(function () { return _this.setPeriodLabels(); });
             this.datePickerService.format$
                 .pipe(operators.take(1))
@@ -3726,13 +3744,13 @@
             this._calendar.currentView = this.selectedTimeframe;
             var chosenTimeframeOption = this.timeframeOptions.filter(function (option) { return option.value === _this.selectedTimeframe; })[0];
             this.datePickerService.updateTimeframeAndFormat(chosenTimeframeOption.format);
-            if (this.selectedTimeframe == 'none') {
+            if (this.selectedTimeframe === exports.CalendarView.FOR_QUARTERS) {
                 this.selectedQuarter = moment$1(this._calendar.activeDate).quarter();
             }
         };
         Object.defineProperty(DrDatePickerCustomHeaderComponent.prototype, "currentViewIsQuarter", {
             get: function () {
-                return !['month', 'year', 'multi-year'].includes(this._calendar.currentView);
+                return ![exports.CalendarView.FOR_DAYS, exports.CalendarView.FOR_MONTHS, exports.CalendarView.FOR_YEARS].includes(this._calendar.currentView);
             },
             enumerable: false,
             configurable: true
@@ -3760,7 +3778,7 @@
     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\"\n        bindLabel=\"title\"\n        bindValue=\"value\"\n        (ngModelChange)=\"setTimeframe()\">\n    </dr-select>\n</div>\n\n<div class=\"dr-date-paging\">\n    <div class=\"dr-date-paging flip-page-button\"\n        (click)=\"pagingClicked(false)\">\n            <i class=\"dr-icon-arrow-left presentation_buttons-navigate_input\"></i>\n    </div>\n    <span class=\"example-header-label\">\n        <span (click)=\"switchViewOnClickOnPeriodLabel('year')\">{{periodMonthLabel + ' '}}</span>\n        <span (click)=\"switchViewOnClickOnPeriodLabel('multi-year')\">{{periodYearLabel}}</span>\n    </span>\n    <div class=\"dr-date-paging flip-page-button\"\n        (click)=\"pagingClicked(true)\">\n            <i class=\"dr-icon-arrow-right presentation_buttons-navigate_input\"></i>\n    </div>\n</div>\n<div #quarterlyDatePicker class=\"dr-quarterly-datepicker\" *ngIf=\"currentViewIsQuarter\">\n    <div *ngFor=\"let quarter of quarters\"\n        class=\"quarter-selector\" (click)=\"onSelectQuarter(quarter)\"\n        [class]=\"quarter == selectedQuarter ? 'selected' : ''\"\n        >Q{{quarter}}</div>\n</div>\n\n",
+                    template: "<div *ngIf=\"datePickerService.isTimeframeSelectionEnabled\" class=\"dr-datepicker__timeframe-select__wrapper\">\n    <dr-select\n        class=\"dr-datepicker__timeframe-select\"\n        [(ngModel)]=\"selectedTimeframe\"\n        [items]=\"timeframeOptions\"\n        bindLabel=\"title\"\n        bindValue=\"value\"\n        (ngModelChange)=\"setTimeframe()\">\n    </dr-select>\n</div>\n\n<div class=\"dr-date-paging\">\n    <div class=\"dr-date-paging flip-page-button\"\n        (click)=\"pagingClicked(false)\">\n            <i class=\"dr-icon-arrow-left presentation_buttons-navigate_input\"></i>\n    </div>\n    <span class=\"example-header-label\">\n        <span (click)=\"switchViewOnClickOnPeriodLabel(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"]
                 },] }
@@ -3793,6 +3811,7 @@
             };
             this.customHeader = DrDatePickerCustomHeaderComponent;
             this.readonly = true;
+            this.timeframeOption = exports.TimeframeOption;
             this.innerValue = null;
             this.destroyed$ = new rxjs.Subject();
             this.onTouchedCallback = noop;
@@ -3838,8 +3857,8 @@
             configurable: true
         });
         DrDatePickerComponent.prototype.ngAfterViewInit = function () {
-            this.datePickerService.calendarInstance = this.dp;
-            this.dp.startView = this.calendarViewsTimeframeMapping[this.datePickerService.timeframe];
+            this.datePickerService.calendarInstance = this.datePicker;
+            this.datePicker.startView = this.calendarViewsTimeframeMapping[this.datePickerService.timeframe];
         };
         DrDatePickerComponent.prototype.ngOnDestroy = function () {
             this.destroyed$.next();
@@ -3872,7 +3891,7 @@
         DrDatePickerComponent.prototype.chosenPeriodHandler = function (chosenDate, timeframe) {
             if (this.datePickerService.timeframe === timeframe) {
                 this.setValueFromMoment(chosenDate);
-                this.dp.close();
+                this.datePicker.close();
             }
         };
         /**
@@ -3911,7 +3930,7 @@
     DrDatePickerComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'dr-date-picker',
-                    template: "<i class=\"dr-icon-schedule\"></i>\n<input [(ngModel)]=\"value\"\n    (click)=\"datePicker.open()\"\n    [matDatepicker]=\"datePicker\"\n    [placeholder]=\"placeholder\"\n    [drDatePickerFormat]=\"datePickerService.format$ | async\"\n    [readonly]=\"readonly\"\n    [min]=\"_min\"\n    [max]=\"_max\"/>\n<mat-datepicker #datePicker\n    [calendarHeaderComponent]=\"customHeader\"\n    (yearSelected)=\"chosenPeriodHandler($event, 'year')\"\n    (monthSelected)=\"chosenPeriodHandler($event, 'month')\">\n</mat-datepicker>\n",
+                    template: "<i class=\"dr-icon-schedule\"></i>\n<input [(ngModel)]=\"value\"\n    (click)=\"datePicker.open()\"\n    [matDatepicker]=\"datePicker\"\n    [placeholder]=\"placeholder\"\n    [drDatePickerFormat]=\"datePickerService.format$ | async\"\n    [readonly]=\"readonly\"\n    [min]=\"_min\"\n    [max]=\"_max\"/>\n<mat-datepicker #datePicker\n    [calendarHeaderComponent]=\"customHeader\"\n    (yearSelected)=\"chosenPeriodHandler($event, timeframeOption.YEAR)\"\n    (monthSelected)=\"chosenPeriodHandler($event, timeframeOption.MONTH)\">\n</mat-datepicker>\n",
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     providers: [
                         { provide: forms.NG_VALUE_ACCESSOR, useExisting: DrDatePickerComponent, multi: true },
@@ -3931,24 +3950,25 @@
         max: [{ type: i0.Input }],
         periodPosition: [{ type: i0.Input }],
         placeholder: [{ type: i0.Input }],
-        dp: [{ type: i0.ViewChild, args: ['datePicker',] }]
+        datePicker: [{ type: i0.ViewChild, args: ['datePicker',] }]
     };
 
     var DrDatePickerWithTimeframeComponent = /** @class */ (function (_super) {
         __extends(DrDatePickerWithTimeframeComponent, _super);
         function DrDatePickerWithTimeframeComponent(cdr, dateAdapter, datePickerService) {
+            var _b;
             var _this = _super.call(this, cdr, dateAdapter, datePickerService) || this;
             _this.cdr = cdr;
             _this.dateAdapter = dateAdapter;
             _this.datePickerService = datePickerService;
             _this.isDashboardDatepicker = false;
             _this.onChangeFormat = new i0.EventEmitter();
-            _this.pagingSetup = {
-                'year': function (forward) { return _this.pagingDateChange('addCalendarYears', 1, forward); },
-                'quarter': function (forward) { return _this.pagingDateChange('addCalendarMonths', 3, forward); },
-                'month': function (forward) { return _this.pagingDateChange('addCalendarMonths', 1, forward); },
-                'day': function (forward) { return _this.pagingDateChange('addCalendarDays', 1, forward); }
-            };
+            _this.pagingSetup = (_b = {},
+                _b[exports.TimeframeOption.YEAR] = function (forward) { return _this.pagingDateChange('addCalendarYears', 1, forward); },
+                _b[exports.TimeframeOption.QUARTER] = function (forward) { return _this.pagingDateChange('addCalendarMonths', 3, forward); },
+                _b[exports.TimeframeOption.MONTH] = function (forward) { return _this.pagingDateChange('addCalendarMonths', 1, forward); },
+                _b[exports.TimeframeOption.DAY] = function (forward) { return _this.pagingDateChange('addCalendarDays', 1, forward); },
+                _b);
             datePickerService.isTimeframeSelectionEnabled = true;
             datePickerService.format$
                 .pipe(operators.takeUntil(_this.destroyed$))
@@ -3965,9 +3985,15 @@
             configurable: true
         });
         ;
-        Object.defineProperty(DrDatePickerWithTimeframeComponent.prototype, "quarterDisplay", {
+        Object.defineProperty(DrDatePickerWithTimeframeComponent.prototype, "displayedFormattedValue", {
             get: function () {
-                return this.datePickerService.getQuarterDisplay(this.value);
+                var _a;
+                if (!this.value) {
+                    return this.placeholder;
+                }
+                return ((_a = this.datePickerService.format$.getValue()) === null || _a === void 0 ? void 0 : _a.includes('Q'))
+                    ? this.datePickerService.getQuarterDisplay(this.value)
+                    : this.value.format(this.datePickerService.format$.getValue());
             },
             enumerable: false,
             configurable: true
@@ -3979,7 +4005,7 @@
         };
         DrDatePickerWithTimeframeComponent.prototype.pagingClicked = function (forward) {
             this.pagingSetup[this.datePickerService.timeframe] && this.pagingSetup[this.datePickerService.timeframe](forward);
-            this.dp.close();
+            this.datePicker.close();
         };
         DrDatePickerWithTimeframeComponent.prototype.pagingDateChange = function (actionCall, amount, forward) {
             var newValue = this.dateAdapter[actionCall](this.innerValue, forward ? amount : -amount);
@@ -3990,13 +4016,13 @@
     DrDatePickerWithTimeframeComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'dr-date-picker-with-timeframe',
-                    template: "<div class=\"dr-input-date-paging__flip-page-button\"\n    (click)=\"pagingClicked(false)\"\n>\n    <i class=\"dr-icon-arrow-left presentation_buttons-navigate_input\"></i>\n</div>\n<div class=\"dr-datepicker__input-container\">\n    <i *ngIf=\"isDashboardDatepicker\" class=\"dr-icon-date\"></i>\n    <div\n        class=\"dr-input-date-paging__formatted-value-display\"\n        (click)=\"datepickerInput.click()\"\n    >\n        {{\n          !value\n            ? placeholder\n            : (datePickerService.format$.getValue()?.includes('Q') ? quarterDisplay : value.format(datePickerService.format$.getValue()))\n        }}\n    </div>\n    <input\n        #datepickerInput\n        [(ngModel)]=\"value\"\n        (click)=\"datePicker.open()\"\n        [matDatepicker]=\"datePicker\"\n        [readonly]=\"readonly\"\n        [min]=\"_min\"\n        [max]=\"_max\"\n    />\n</div>\n<div class=\"dr-input-date-paging__flip-page-button\"\n    (click)=\"pagingClicked(true)\">\n    <i class=\"dr-icon-arrow-right presentation_buttons-navigate_input\"></i>\n</div>\n<mat-datepicker #datePicker\n    class=\"dr-timeframe-datepicker\"\n    [calendarHeaderComponent]=\"customHeader\"\n    (yearSelected)=\"chosenPeriodHandler($event, 'year')\"\n    (monthSelected)=\"chosenPeriodHandler($event, 'month')\">\n</mat-datepicker>\n",
+                    template: "<dr-button theme=\"icon\" icon=\"dr-icon-arrow-left\" (click)=\"pagingClicked(false)\"></dr-button>\n<div class=\"dr-datepicker-input-container\">\n    <i *ngIf=\"isDashboardDatepicker\" class=\"dr-icon-date\"></i>\n    <div\n        class=\"dr-datepicker-input-container__formatted-value-display\"\n        (click)=\"datepickerInput.click()\"\n    >\n        {{ displayedFormattedValue }}\n    </div>\n    <input\n        #datepickerInput\n        [(ngModel)]=\"value\"\n        (click)=\"datePicker.open()\"\n        [matDatepicker]=\"datePicker\"\n        [readonly]=\"readonly\"\n        [min]=\"_min\"\n        [max]=\"_max\"\n    />\n</div>\n<dr-button theme=\"icon\" icon=\"dr-icon-arrow-right\" (click)=\"pagingClicked(true)\"></dr-button>\n<mat-datepicker #datePicker\n    class=\"dr-timeframe-datepicker\"\n    [calendarHeaderComponent]=\"customHeader\"\n    (yearSelected)=\"chosenPeriodHandler($event, timeframeOption.YEAR)\"\n    (monthSelected)=\"chosenPeriodHandler($event, timeframeOption.MONTH)\">\n</mat-datepicker>\n",
                     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 .dr-datepicker__input-container{display:flex;flex-direction:row;justify-content:center;align-items:center;margin-left:-10px}:host.dr-date-picker-on-dashboard .dr-datepicker__input-container .dr-input-date-paging__formatted-value-display{font-weight:600;width:auto;margin-left:5px}:host.dr-date-picker-on-dashboard .dr-datepicker__input-container .dr-icon-date{display:block;position:relative;top:0;margin-right:8px;color:#4e566c}:host .dr-input-date-paging__flip-page-button{width:25px;height:25px;border-radius:16px;padding:0;background-color:#fff}:host .dr-input-date-paging__flip-page-button i{position:relative;color:#0c142b;top:unset;left:unset}:host .dr-input-date-paging__flip-page-button:hover{background-color:#f2f2fb;color:#4646ce}:host input{visibility:hidden;position:absolute;width:100%}:host .dr-input-date-paging__formatted-value-display{width:90px;height:22px;padding-left:0;text-align:center;line-height:22px;color:#0c142b;-webkit-text-decoration-line:underline;text-decoration-line:underline}:host .dr-input-date-paging__formatted-value-display:hover{background-color:#f2f2fb;border-radius:5px;cursor:pointer;-webkit-text-decoration-line:underline;text-decoration-line:underline;color:#4646ce}\n"]
+                    styles: [":host{position:relative;width:100%;display:flex;flex-direction:row;min-height:32px;height:32px;font-size:14px;font-family:\"Poppins\",sans-serif;background-color:#fff;border:1px solid #C3C4CE;border-radius:6px;color:#85889c;overflow:hidden;outline:none;cursor:pointer}:host:hover{border-color:#85889c}:host:focus-within{border-color:#21b8f1!important;color:#151b3f}:host.disabled{pointer-events:none;border:none;color:#85889c;background:#E5E6EA}:host.ng-valid.ng-dirty{border-color:#03a678}:host.ng-invalid.ng-dirty:not(:focus-within){border-color:#de2833!important}:host.ng-untouched.ng-valid{border-color:#c3c4ce}:host:after,:host:before{position:absolute;display:flex;border-color:#999999 transparent transparent;color:#999}:host:after{content:\"\";height:0;width:0;border-style:solid;border-width:5px 5px 2.5px;right:11px;top:13px}:host i{position:absolute;color:#999;left:8px;top:3px}:host input{display:flex;flex-grow:1;height:100%;border:none;text-align:left;padding-left:35px;padding-right:25px;cursor:pointer!important;outline:none}:host input.when-quarter{position:absolute;visibility:hidden}:host input:disabled{border:none;color:#85889c;background:transparent}:host input::-webkit-search-decoration,:host input::-webkit-search-cancel-button,:host input::-webkit-search-results-button,:host input::-webkit-search-results-decoration{-webkit-appearance:none}::ng-deep .mat-datepicker-content{margin:7px 0;box-shadow:0 4px 8px 1px #00000040;border-radius:12px!important}::ng-deep .mat-datepicker-content button[disabled]{border:inherit;color:inherit;background-color:inherit}::ng-deep .mat-datepicker-content button[disabled]:hover{border:inherit}::ng-deep .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){background:#F2F2FB;color:#4646ce;font-weight:600}::ng-deep .mat-calendar-body-selected{background-color:#4646ce;color:#f2f2fb;font-weight:600}::ng-deep .mat-calendar-body-today.mat-calendar-body-selected{box-shadow:none}::ng-deep .mat-button-focus-overlay{background:#F3F7FF}::ng-deep .mat-calendar-controls .mat-icon-button:hover .mat-button-focus-overlay{opacity:1!important;background:#F3F7FF;transition:opacity .2s cubic-bezier(.35,0,.25,1)}::ng-deep .mat-calendar-controls .mat-calendar-period-button:hover{background:#F3F7FF;transition:background .2s cubic-bezier(.35,0,.25,1)}::ng-deep .mat-calendar-table-header th{font-size:14px;font-weight:600;color:#19181a}::ng-deep .mat-calendar-table-header-divider{display:none}::ng-deep .mat-calendar-body-label{color:#fff;padding:0}:host{border:none;display:flex;align-items:center}:host.dr-date-picker-on-dashboard{width:180px;justify-content:space-between}:host.dr-date-picker-on-dashboard mat-datepicker{position:absolute}:host.dr-date-picker-on-dashboard .dr-datepicker-input-container{display:flex;flex-direction:row;justify-content:center;align-items:center;margin-left:-10px}:host.dr-date-picker-on-dashboard .dr-datepicker-input-container__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"]
                 },] }
     ];
     DrDatePickerWithTimeframeComponent.ctorParameters = function () { return [
@@ -4266,7 +4292,6 @@
     exports.AnyTagComponent = AnyTagComponent;
     exports.CheckboxComponent = CheckboxComponent;
     exports.CustomDateFormat = CustomDateFormat;
-    exports.DATE_INPUT_FORMAT = DATE_INPUT_FORMAT;
     exports.DateTagComponent = DateTagComponent;
     exports.DateTagModule = DateTagModule;
     exports.DayTagComponent = DayTagComponent;
@@ -4309,16 +4334,12 @@
     exports.ForecastTagComponent = ForecastTagComponent;
     exports.ListTagComponent = ListTagComponent;
     exports.ListTagModule = ListTagModule;
-    exports.MAT_DEFAULT_DATE_FORMAT = MAT_DEFAULT_DATE_FORMAT;
-    exports.MONTH_YEAR_FORMAT = MONTH_YEAR_FORMAT;
     exports.MonthTagComponent = MonthTagComponent;
-    exports.QUARTER_FORMAT = QUARTER_FORMAT;
     exports.QuarterTagComponent = QuarterTagComponent;
     exports.RadioButtonComponent = RadioButtonComponent;
     exports.RadioGroupComponent = RadioGroupComponent;
     exports.TooltipComponent = TooltipComponent;
     exports.WeekTagComponent = WeekTagComponent;
-    exports.YEAR_FORMAT = YEAR_FORMAT;
     exports.YearTagComponent = YearTagComponent;
     exports["ɵa"] = components$2;
     exports["ɵb"] = POPUP_ANIMATION;