@datarailsshared/datarailsshared 1.4.25-tigers → 1.4.26-tigers

package/fesm2015/datarailsshared-datarailsshared.js

@@ -90,7 +90,7 @@ AnyTagComponent.propDecorators = {
 };
 
 // @ts-ignore
-const moment$9 = require("moment");
+const moment$8 = require("moment");
 class ForecastTagComponent extends AnyTagComponent {
     constructor() {
         super();
@@ -111,10 +111,10 @@ class ForecastTagComponent extends AnyTagComponent {
             { "value": 11, "label": "11+1" }
         ];
         this.dateFilter = (date) => {
-            const forecastDate = moment$9.unix(date);
+            const forecastDate = moment$8.unix(date);
             let status = true;
             this.lockedDate.forEach(timestamp => {
-                const locked = moment$9.unix(timestamp);
+                const locked = moment$8.unix(timestamp);
                 return status = !(locked.month() === forecastDate.month() && locked.year() === forecastDate.year());
             });
             return status;
@@ -130,14 +130,14 @@ class ForecastTagComponent extends AnyTagComponent {
         this.forecastValue = this.getFiscalMonthFromDate(dateVal, fiscal_year_starts_from) - 1;
         let 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();
     }
     updateLockedDate() {
         for (let forecastTag of this.forecastTags) {
             forecastTag.disable = false;
             this.lockedDate.forEach(timestamp => {
-                const locked = moment$9.unix(timestamp);
+                const locked = moment$8.unix(timestamp);
                 if (locked.month() - 1 === forecastTag.value && +locked.year() + 1 === +this.dateObj.date) {
                     forecastTag.disable = true;
                 }
@@ -231,7 +231,7 @@ ForecastTagComponent.propDecorators = {
 };
 
 // @ts-ignore
-const moment$8 = require("moment");
+const moment$7 = require("moment");
 const MONTH_FORMATS = {
     parse: {
         dateInput: "DD-MM-YYYY",
@@ -248,12 +248,12 @@ class MonthTagComponent extends AnyTagComponent {
     constructor() {
         super();
         this.lockedDate = [];
-        this.date = new FormControl(moment$8());
+        this.date = new FormControl(moment$7());
         this.dateFilter = (date) => {
-            const calendarDate = moment$8(date);
+            const calendarDate = moment$7(date);
             let status = true;
             this.lockedDate.forEach(timestamp => {
-                const lockDate = moment$8.unix(timestamp);
+                const lockDate = moment$7.unix(timestamp);
                 return status = !(lockDate.year() === calendarDate.year() && lockDate.month() === calendarDate.month());
             });
             return status;
@@ -261,11 +261,11 @@ class MonthTagComponent extends AnyTagComponent {
     }
     initDate() {
         if (this.defaultValue) {
-            this.dateObj.date = moment$8(this.defaultValue * 1000).utc().format("YYYY-MM");
-            this.date = new FormControl(moment$8(this.defaultValue * 1000));
+            this.dateObj.date = moment$7(this.defaultValue * 1000).utc().format("YYYY-MM");
+            this.date = new 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");
         }
     }
     initName() {
@@ -274,7 +274,7 @@ class MonthTagComponent extends AnyTagComponent {
         }
     }
     chosenTagHandler(value) {
-        const resultDate = moment$8.utc(value);
+        const resultDate = moment$7.utc(value);
         resultDate.hour(12);
         const resultTag = {
             name: this.name,
@@ -312,7 +312,7 @@ MonthTagComponent.propDecorators = {
 };
 
 // @ts-ignore
-const moment$7 = require("moment");
+const moment$6 = require("moment");
 class QuarterTagComponent extends AnyTagComponent {
     constructor() {
         super();
@@ -322,8 +322,8 @@ class QuarterTagComponent extends AnyTagComponent {
         this.dateFilter = (date) => {
             let status = true;
             this.lockedDate.forEach(timestamp => {
-                const lockDate = moment$7.unix(timestamp);
-                const quarterDate = moment$7.unix(date.value);
+                const lockDate = moment$6.unix(timestamp);
+                const quarterDate = moment$6.unix(date.value);
                 if (lockDate.year() === quarterDate.year() && lockDate.month() === quarterDate.month()) {
                     date.disable = true;
                     status = false;
@@ -354,7 +354,7 @@ class QuarterTagComponent extends AnyTagComponent {
     }
     chosenTagHandler(value) {
         const date = new Date(value * 1000);
-        const resultDate = moment$7.utc(date);
+        const resultDate = moment$6.utc(date);
         const resultTag = {
             name: this.name,
             value: parseInt(resultDate.format("X"), 10),
@@ -411,7 +411,7 @@ QuarterTagComponent.propDecorators = {
 };
 
 // @ts-ignore
-const moment$6 = require("moment");
+const moment$5 = require("moment");
 const WEEK_FORMATS = {
     parse: {
         dateInput: "WW-YYYY",
@@ -428,13 +428,13 @@ class WeekTagComponent extends AnyTagComponent {
     constructor() {
         super();
         this.lockedDate = [];
-        this.date = new FormControl(moment$6());
+        this.date = new FormControl(moment$5());
         this.selectedValue = "";
         this.dateFilter = (date) => {
-            const calendarDate = moment$6(date);
+            const calendarDate = moment$5(date);
             let status = true;
             this.lockedDate.forEach(timestamp => {
-                const lockDate = moment$6.unix(timestamp);
+                const lockDate = moment$5.unix(timestamp);
                 return status = !(lockDate.week() === calendarDate.week() && lockDate.year() === calendarDate.year());
             });
             return status;
@@ -464,7 +464,7 @@ class WeekTagComponent extends AnyTagComponent {
         }
     }
     chosenDateHandler(normalizedDay) {
-        const date = moment$6(normalizedDay).unix();
+        const date = moment$5(normalizedDay).unix();
         this.chosenTagHandler(date);
     }
     chosenTagHandler(value) {
@@ -476,7 +476,7 @@ class WeekTagComponent extends AnyTagComponent {
         else {
             date = new Date(value * 1000);
         }
-        const resultDate = moment$6(date);
+        const resultDate = moment$5(date);
         const resultTag = {
             name: this.name,
             value: parseInt(resultDate.format("X"), 10),
@@ -487,8 +487,8 @@ class WeekTagComponent extends AnyTagComponent {
         this.dateChange.emit(resultTag);
     }
     getWeekLabel(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();
     }
     getUTCTimestamp(date) {
         return Date.UTC(date.getFullYear(), date.getMonth(), date.getDate(), 12, 0, 0, 0);
@@ -501,7 +501,7 @@ class WeekTagComponent extends AnyTagComponent {
         return date;
     }
     getWeekNumberByDate(date) {
-        return this.pad(moment$6(date).isoWeek(), 2);
+        return this.pad(moment$5(date).isoWeek(), 2);
     }
     pad(n, width, z = "0") {
         z = z || "0";
@@ -529,7 +529,7 @@ WeekTagComponent.propDecorators = {
 };
 
 // @ts-ignore
-const moment$5 = require("moment");
+const moment$4 = require("moment");
 const YEAR_FORMATS = {
     parse: {
         dateInput: "YYYY",
@@ -546,12 +546,12 @@ class YearTagComponent extends AnyTagComponent {
     constructor() {
         super();
         this.lockedDate = [];
-        this.date = new FormControl(moment$5());
+        this.date = new FormControl(moment$4());
         this.dateFilter = (date) => {
-            const calendarDateYear = moment$5(date).year();
+            const calendarDateYear = moment$4(date).year();
             let status = true;
             this.lockedDate.forEach(timestamp => {
-                const lockDate = moment$5.unix(timestamp);
+                const lockDate = moment$4.unix(timestamp);
                 return status = !(lockDate.year() === calendarDateYear);
             });
             return status;
@@ -559,11 +559,11 @@ class YearTagComponent extends AnyTagComponent {
     }
     initDate() {
         if (this.defaultValue) {
-            this.dateObj.date = moment$5(new Date(this.defaultValue * 1000)).utc().format("YYYY");
-            this.date = new FormControl(moment$5(this.defaultValue * 1000));
+            this.dateObj.date = moment$4(new Date(this.defaultValue * 1000)).utc().format("YYYY");
+            this.date = new 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");
         }
     }
     initName() {
@@ -573,10 +573,10 @@ class YearTagComponent extends AnyTagComponent {
     }
     chosenTagHandler(value) {
         const date = new Date();
-        const year = moment$5(value).year();
+        const year = moment$4(value).year();
         date.setTime(0);
         date.setFullYear(year, 0, 1);
-        const resultDate = moment$5.utc(date);
+        const resultDate = moment$4.utc(date);
         resultDate.hour(12);
         const resultTag = {
             name: this.name,
@@ -668,7 +668,7 @@ DrTagComponent.propDecorators = {
     tagChange: [{ type: Output }]
 };
 
-const moment$4 = momentImported;
+const moment$3 = momentImported;
 class ListTagComponent {
     constructor() {
         this.defaultValue = "";
@@ -708,7 +708,7 @@ ListTagComponent.propDecorators = {
 };
 
 // @ts-ignore
-const moment$3 = require("moment");
+const moment$2 = require("moment");
 const DAY_FORMATS = {
     parse: {
         dateInput: "DD-MM-YYYY",
@@ -725,9 +725,9 @@ class DayTagComponent extends AnyTagComponent {
     constructor() {
         super();
         this.lockedDate = [];
-        this.date = new FormControl(moment$3());
+        this.date = new FormControl(moment$2());
         this.dateFilter = (date) => {
-            const calendarDate = moment$3(date).unix();
+            const calendarDate = moment$2(date).unix();
             let status = true;
             this.lockedDate.forEach(timestamp => {
                 return status = !(timestamp === calendarDate);
@@ -736,10 +736,10 @@ class DayTagComponent extends AnyTagComponent {
         };
     }
     initDate() {
-        const utcOffsetInMilliseconds = moment$3().utcOffset() * 60 * 1000;
-        this.dateObj.date = moment$3(moment$3().valueOf() + utcOffsetInMilliseconds);
+        const 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);
         }
     }
@@ -749,11 +749,11 @@ class DayTagComponent extends AnyTagComponent {
         }
     }
     chosenTagHandler(value) {
-        const date = moment$3(value).unix();
+        const date = moment$2(value).unix();
         const 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);
@@ -2894,18 +2894,21 @@ DrModelDebounceChangeDirective.propDecorators = {
     ngModelDebounceChange: [{ type: Output }]
 };
 
-const MAT_DEFAULT_DATE_FORMAT = 'MM/DD/yyyy';
-const DATE_INPUT_FORMAT = 'YYYY/MM/DD';
-const YEAR_FORMAT = 'yyyy';
-const MONTH_YEAR_FORMAT = 'MM/yyyy';
-const QUARTER_FORMAT = 'Q/yyyy';
+var DateFromats;
+(function (DateFromats) {
+    DateFromats["MAT_DEFAULT_DATE_FORMAT"] = "MM/DD/yyyy";
+    DateFromats["DATE_INPUT_FORMAT"] = "YYYY/MM/DD";
+    DateFromats["YEAR_FORMAT"] = "yyyy";
+    DateFromats["MONTH_YEAR_FORMAT"] = "MM/yyyy";
+    DateFromats["QUARTER_FORMAT"] = "Q/yyyy";
+})(DateFromats || (DateFromats = {}));
 class CustomDateFormat {
     constructor() {
         this._parse = {
-            dateInput: DATE_INPUT_FORMAT
+            dateInput: DateFromats.DATE_INPUT_FORMAT,
         };
         this._display = {
-            dateInput: DATE_INPUT_FORMAT,
+            dateInput: DateFromats.DATE_INPUT_FORMAT,
             monthYearLabel: 'MMM YYYY',
             dateA11yLabel: 'LL',
             monthYearA11yLabel: 'MMM YYYY',
@@ -2940,6 +2943,20 @@ var DatePickerPeriodPosition;
     DatePickerPeriodPosition[DatePickerPeriodPosition["START_OF_PERIOD"] = 2] = "START_OF_PERIOD";
     DatePickerPeriodPosition[DatePickerPeriodPosition["DEFAULT"] = 3] = "DEFAULT";
 })(DatePickerPeriodPosition || (DatePickerPeriodPosition = {}));
+var TimeframeOption;
+(function (TimeframeOption) {
+    TimeframeOption["DAY"] = "day";
+    TimeframeOption["MONTH"] = "month";
+    TimeframeOption["QUARTER"] = "quarter";
+    TimeframeOption["YEAR"] = "year";
+})(TimeframeOption || (TimeframeOption = {}));
+var CalendarView;
+(function (CalendarView) {
+    CalendarView["FOR_DAYS"] = "month";
+    CalendarView["FOR_MONTHS"] = "year";
+    CalendarView["FOR_QUARTERS"] = "none";
+    CalendarView["FOR_YEARS"] = "multi-year";
+})(CalendarView || (CalendarView = {}));
 
 const components$2 = [DateTagComponent,
     DayTagComponent,
@@ -3012,38 +3029,37 @@ DrTagModule.decorators = [
             },] }
 ];
 
-const moment$2 = require('moment');
 class DrDatePickerService {
     constructor() {
         this.isTimeframeSelectionEnabled = false;
-        this.timeframe = 'day';
-        this.format$ = new BehaviorSubject(MAT_DEFAULT_DATE_FORMAT);
+        this.timeframe = TimeframeOption.DAY;
+        this.format$ = new BehaviorSubject(DateFromats.MAT_DEFAULT_DATE_FORMAT);
         this.updatedQuarter$ = new Subject();
         this.formatConfig = {
-            day: MAT_DEFAULT_DATE_FORMAT,
-            month: MONTH_YEAR_FORMAT,
-            year: YEAR_FORMAT,
-            quarter: QUARTER_FORMAT,
+            day: DateFromats.MAT_DEFAULT_DATE_FORMAT,
+            month: DateFromats.MONTH_YEAR_FORMAT,
+            year: DateFromats.YEAR_FORMAT,
+            quarter: DateFromats.QUARTER_FORMAT,
         };
     }
     getQuarterDisplay(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();
     }
     getTimeframe(format) {
-        const defaultFrame = 'day';
+        const defaultFrame = TimeframeOption.DAY;
         if (!format) {
             return defaultFrame;
         }
         const lowerCaseFormat = format.toLowerCase();
         switch (true) {
             case lowerCaseFormat.includes('q'):
-                return 'quarter';
+                return TimeframeOption.QUARTER;
             case lowerCaseFormat.includes('d'):
-                return 'day';
+                return TimeframeOption.DAY;
             case lowerCaseFormat.includes('m'):
-                return 'month';
+                return TimeframeOption.MONTH;
             case lowerCaseFormat.includes('y'):
-                return 'year';
+                return TimeframeOption.YEAR;
             default:
                 return defaultFrame;
         }
@@ -3077,24 +3093,24 @@ class DrDatePickerCustomHeaderComponent {
         this.selectedQuarter = 1;
         this.timeframeOptions = [{
                 title: 'Day',
-                value: 'month',
+                value: CalendarView.FOR_DAYS,
                 format: this.datePickerService.formatConfig.day,
                 periodLabel: () => this._dateAdapter
                     .format(this._calendar.activeDate, this._dateFormats.display.monthYearLabel)
                     .toLocaleUpperCase()
             }, {
                 title: 'Month',
-                value: 'year',
+                value: CalendarView.FOR_MONTHS,
                 format: this.datePickerService.formatConfig.month,
                 periodLabel: () => String(moment$1(this._calendar.activeDate).year())
             }, {
                 title: 'Quarter',
-                value: 'none',
+                value: CalendarView.FOR_QUARTERS,
                 format: this.datePickerService.formatConfig.quarter,
                 periodLabel: () => String(moment$1(this._calendar.activeDate).year())
             }, {
                 title: 'Year',
-                value: 'multi-year',
+                value: CalendarView.FOR_YEARS,
                 format: this.datePickerService.formatConfig.year,
                 periodLabel: () => {
                     const currentYear = moment$1(this._calendar.activeDate).year();
@@ -3103,15 +3119,16 @@ class DrDatePickerCustomHeaderComponent {
                 }
             }];
         this.pagingSetup = {
-            'year': (forward) => this.pagingDateChange('addCalendarYears', 1, forward),
-            'none': (forward) => this.pagingDateChange('addCalendarYears', 1, forward),
-            'month': (forward) => this.pagingDateChange('addCalendarMonths', 1, forward),
-            'multi-year': (forward) => this.pagingDateChange('addCalendarYears', 24, forward)
+            [CalendarView.FOR_MONTHS]: (forward) => this.pagingDateChange('addCalendarYears', 1, forward),
+            [CalendarView.FOR_QUARTERS]: (forward) => this.pagingDateChange('addCalendarYears', 1, forward),
+            [CalendarView.FOR_DAYS]: (forward) => this.pagingDateChange('addCalendarMonths', 1, forward),
+            [CalendarView.FOR_YEARS]: (forward) => this.pagingDateChange('addCalendarYears', 24, forward)
         };
-        this.selectedTimeframe = 'month';
+        this.selectedTimeframe = CalendarView.FOR_DAYS;
         this.timeframeSelection = false;
         this.periodMonthLabel = '';
         this.periodYearLabel = '';
+        this.calendarView = CalendarView;
         _calendar.stateChanges.pipe(takeUntil(this._destroyed)).subscribe(() => this.setPeriodLabels());
         this.datePickerService.format$
             .pipe(take(1))
@@ -3143,12 +3160,12 @@ class DrDatePickerCustomHeaderComponent {
         this._calendar.currentView = this.selectedTimeframe;
         const chosenTimeframeOption = this.timeframeOptions.filter(option => option.value === this.selectedTimeframe)[0];
         this.datePickerService.updateTimeframeAndFormat(chosenTimeframeOption.format);
-        if (this.selectedTimeframe == 'none') {
+        if (this.selectedTimeframe === CalendarView.FOR_QUARTERS) {
             this.selectedQuarter = moment$1(this._calendar.activeDate).quarter();
         }
     }
     get currentViewIsQuarter() {
-        return !['month', 'year', 'multi-year'].includes(this._calendar.currentView);
+        return ![CalendarView.FOR_DAYS, CalendarView.FOR_MONTHS, CalendarView.FOR_YEARS].includes(this._calendar.currentView);
     }
     switchViewOnClickOnPeriodLabel(view) {
         this._calendar.currentView = view;
@@ -3172,7 +3189,7 @@ class DrDatePickerCustomHeaderComponent {
 DrDatePickerCustomHeaderComponent.decorators = [
     { type: Component, args: [{
                 selector: 'dr-date-picker_custom-header.component',
-                template: "<div *ngIf=\"datePickerService.isTimeframeSelectionEnabled\" class=\"dr-datepicker__timeframe-select__wrapper\">\n    <dr-select\n        class=\"dr-datepicker__timeframe-select\"\n        [(ngModel)]=\"selectedTimeframe\"\n        [items]=\"timeframeOptions\"\n        bindLabel=\"title\"\n        bindValue=\"value\"\n        (ngModelChange)=\"setTimeframe()\">\n    </dr-select>\n</div>\n\n<div class=\"dr-date-paging\">\n    <div class=\"dr-date-paging flip-page-button\"\n        (click)=\"pagingClicked(false)\">\n            <i class=\"dr-icon-arrow-left presentation_buttons-navigate_input\"></i>\n    </div>\n    <span class=\"example-header-label\">\n        <span (click)=\"switchViewOnClickOnPeriodLabel('year')\">{{periodMonthLabel + ' '}}</span>\n        <span (click)=\"switchViewOnClickOnPeriodLabel('multi-year')\">{{periodYearLabel}}</span>\n    </span>\n    <div class=\"dr-date-paging flip-page-button\"\n        (click)=\"pagingClicked(true)\">\n            <i class=\"dr-icon-arrow-right presentation_buttons-navigate_input\"></i>\n    </div>\n</div>\n<div #quarterlyDatePicker class=\"dr-quarterly-datepicker\" *ngIf=\"currentViewIsQuarter\">\n    <div *ngFor=\"let quarter of quarters\"\n        class=\"quarter-selector\" (click)=\"onSelectQuarter(quarter)\"\n        [class]=\"quarter == selectedQuarter ? 'selected' : ''\"\n        >Q{{quarter}}</div>\n</div>\n\n",
+                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: 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"]
             },] }
@@ -3204,6 +3221,7 @@ class DrDatePickerComponent {
         };
         this.customHeader = DrDatePickerCustomHeaderComponent;
         this.readonly = true;
+        this.timeframeOption = TimeframeOption;
         this.innerValue = null;
         this.destroyed$ = new Subject();
         this.onTouchedCallback = noop;
@@ -3233,8 +3251,8 @@ class DrDatePickerComponent {
         this.cdr.markForCheck();
     }
     ngAfterViewInit() {
-        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];
     }
     ngOnDestroy() {
         this.destroyed$.next();
@@ -3267,7 +3285,7 @@ class DrDatePickerComponent {
     chosenPeriodHandler(chosenDate, timeframe) {
         if (this.datePickerService.timeframe === timeframe) {
             this.setValueFromMoment(chosenDate);
-            this.dp.close();
+            this.datePicker.close();
         }
     }
     /**
@@ -3305,7 +3323,7 @@ class DrDatePickerComponent {
 DrDatePickerComponent.decorators = [
     { type: Component, args: [{
                 selector: 'dr-date-picker',
-                template: "<i class=\"dr-icon-schedule\"></i>\n<input [(ngModel)]=\"value\"\n    (click)=\"datePicker.open()\"\n    [matDatepicker]=\"datePicker\"\n    [placeholder]=\"placeholder\"\n    [drDatePickerFormat]=\"datePickerService.format$ | async\"\n    [readonly]=\"readonly\"\n    [min]=\"_min\"\n    [max]=\"_max\"/>\n<mat-datepicker #datePicker\n    [calendarHeaderComponent]=\"customHeader\"\n    (yearSelected)=\"chosenPeriodHandler($event, 'year')\"\n    (monthSelected)=\"chosenPeriodHandler($event, 'month')\">\n</mat-datepicker>\n",
+                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: ChangeDetectionStrategy.OnPush,
                 providers: [
                     { provide: NG_VALUE_ACCESSOR, useExisting: DrDatePickerComponent, multi: true },
@@ -3325,7 +3343,7 @@ DrDatePickerComponent.propDecorators = {
     max: [{ type: Input }],
     periodPosition: [{ type: Input }],
     placeholder: [{ type: Input }],
-    dp: [{ type: ViewChild, args: ['datePicker',] }]
+    datePicker: [{ type: ViewChild, args: ['datePicker',] }]
 };
 
 class DrDatePickerWithTimeframeComponent extends DrDatePickerComponent {
@@ -3337,10 +3355,10 @@ class DrDatePickerWithTimeframeComponent extends DrDatePickerComponent {
         this.isDashboardDatepicker = false;
         this.onChangeFormat = new EventEmitter();
         this.pagingSetup = {
-            'year': (forward) => this.pagingDateChange('addCalendarYears', 1, forward),
-            'quarter': (forward) => this.pagingDateChange('addCalendarMonths', 3, forward),
-            'month': (forward) => this.pagingDateChange('addCalendarMonths', 1, forward),
-            'day': (forward) => this.pagingDateChange('addCalendarDays', 1, forward)
+            [TimeframeOption.YEAR]: (forward) => this.pagingDateChange('addCalendarYears', 1, forward),
+            [TimeframeOption.QUARTER]: (forward) => this.pagingDateChange('addCalendarMonths', 3, forward),
+            [TimeframeOption.MONTH]: (forward) => this.pagingDateChange('addCalendarMonths', 1, forward),
+            [TimeframeOption.DAY]: (forward) => this.pagingDateChange('addCalendarDays', 1, forward)
         };
         datePickerService.isTimeframeSelectionEnabled = true;
         datePickerService.format$
@@ -3353,8 +3371,14 @@ class DrDatePickerWithTimeframeComponent extends DrDatePickerComponent {
         return this.isDashboardDatepicker;
     }
     ;
-    get quarterDisplay() {
-        return this.datePickerService.getQuarterDisplay(this.value);
+    get displayedFormattedValue() {
+        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());
     }
     ngOnInit() {
         if (this.dateFormatConfig) {
@@ -3363,7 +3387,7 @@ class DrDatePickerWithTimeframeComponent extends DrDatePickerComponent {
     }
     pagingClicked(forward) {
         this.pagingSetup[this.datePickerService.timeframe] && this.pagingSetup[this.datePickerService.timeframe](forward);
-        this.dp.close();
+        this.datePicker.close();
     }
     pagingDateChange(actionCall, amount, forward) {
         const newValue = this.dateAdapter[actionCall](this.innerValue, forward ? amount : -amount);
@@ -3373,13 +3397,13 @@ class DrDatePickerWithTimeframeComponent extends DrDatePickerComponent {
 DrDatePickerWithTimeframeComponent.decorators = [
     { type: Component, args: [{
                 selector: 'dr-date-picker-with-timeframe',
-                template: "<div class=\"dr-input-date-paging__flip-page-button\"\n    (click)=\"pagingClicked(false)\"\n>\n    <i class=\"dr-icon-arrow-left presentation_buttons-navigate_input\"></i>\n</div>\n<div class=\"dr-datepicker__input-container\">\n    <i *ngIf=\"isDashboardDatepicker\" class=\"dr-icon-date\"></i>\n    <div\n        class=\"dr-input-date-paging__formatted-value-display\"\n        (click)=\"datepickerInput.click()\"\n    >\n        {{\n          !value\n            ? placeholder\n            : (datePickerService.format$.getValue()?.includes('Q') ? quarterDisplay : value.format(datePickerService.format$.getValue()))\n        }}\n    </div>\n    <input\n        #datepickerInput\n        [(ngModel)]=\"value\"\n        (click)=\"datePicker.open()\"\n        [matDatepicker]=\"datePicker\"\n        [readonly]=\"readonly\"\n        [min]=\"_min\"\n        [max]=\"_max\"\n    />\n</div>\n<div class=\"dr-input-date-paging__flip-page-button\"\n    (click)=\"pagingClicked(true)\">\n    <i class=\"dr-icon-arrow-right presentation_buttons-navigate_input\"></i>\n</div>\n<mat-datepicker #datePicker\n    class=\"dr-timeframe-datepicker\"\n    [calendarHeaderComponent]=\"customHeader\"\n    (yearSelected)=\"chosenPeriodHandler($event, 'year')\"\n    (monthSelected)=\"chosenPeriodHandler($event, 'month')\">\n</mat-datepicker>\n",
+                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: ChangeDetectionStrategy.OnPush,
                 providers: [
                     { provide: NG_VALUE_ACCESSOR, useExisting: DrDatePickerWithTimeframeComponent, multi: true },
                     { provide: DrDatePickerService }
                 ],
-                styles: [":host{position:relative;width:100%;display:flex;flex-direction:row;min-height:32px;height:32px;font-size:14px;font-family:\"Poppins\",sans-serif;background-color:#fff;border:1px solid #C3C4CE;border-radius:6px;color:#85889c;overflow:hidden;outline:none;cursor:pointer}:host:hover{border-color:#85889c}:host:focus-within{border-color:#21b8f1!important;color:#151b3f}:host.disabled{pointer-events:none;border:none;color:#85889c;background:#E5E6EA}:host.ng-valid.ng-dirty{border-color:#03a678}:host.ng-invalid.ng-dirty:not(:focus-within){border-color:#de2833!important}:host.ng-untouched.ng-valid{border-color:#c3c4ce}:host:after,:host:before{position:absolute;display:flex;border-color:#999999 transparent transparent;color:#999}:host:after{content:\"\";height:0;width:0;border-style:solid;border-width:5px 5px 2.5px;right:11px;top:13px}:host i{position:absolute;color:#999;left:8px;top:3px}:host input{display:flex;flex-grow:1;height:100%;border:none;text-align:left;padding-left:35px;padding-right:25px;cursor:pointer!important;outline:none}:host input.when-quarter{position:absolute;visibility:hidden}:host input:disabled{border:none;color:#85889c;background:transparent}:host input::-webkit-search-decoration,:host input::-webkit-search-cancel-button,:host input::-webkit-search-results-button,:host input::-webkit-search-results-decoration{-webkit-appearance:none}::ng-deep .mat-datepicker-content{margin:7px 0;box-shadow:0 4px 8px 1px #00000040;border-radius:12px!important}::ng-deep .mat-datepicker-content button[disabled]{border:inherit;color:inherit;background-color:inherit}::ng-deep .mat-datepicker-content button[disabled]:hover{border:inherit}::ng-deep .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){background:#F2F2FB;color:#4646ce;font-weight:600}::ng-deep .mat-calendar-body-selected{background-color:#4646ce;color:#f2f2fb;font-weight:600}::ng-deep .mat-calendar-body-today.mat-calendar-body-selected{box-shadow:none}::ng-deep .mat-button-focus-overlay{background:#F3F7FF}::ng-deep .mat-calendar-controls .mat-icon-button:hover .mat-button-focus-overlay{opacity:1!important;background:#F3F7FF;transition:opacity .2s cubic-bezier(.35,0,.25,1)}::ng-deep .mat-calendar-controls .mat-calendar-period-button:hover{background:#F3F7FF;transition:background .2s cubic-bezier(.35,0,.25,1)}::ng-deep .mat-calendar-table-header th{font-size:14px;font-weight:600;color:#19181a}::ng-deep .mat-calendar-table-header-divider{display:none}::ng-deep .mat-calendar-body-label{color:#fff;padding:0}:host{border:none;display:flex;align-items:center}:host.dr-date-picker-on-dashboard{width:180px;justify-content:space-between}:host.dr-date-picker-on-dashboard mat-datepicker{position:absolute}:host.dr-date-picker-on-dashboard .dr-datepicker__input-container{display:flex;flex-direction:row;justify-content:center;align-items:center;margin-left:-10px}:host.dr-date-picker-on-dashboard .dr-datepicker__input-container .dr-input-date-paging__formatted-value-display{font-weight:600;width:auto;margin-left:5px}:host.dr-date-picker-on-dashboard .dr-datepicker__input-container .dr-icon-date{display:block;position:relative;top:0;margin-right:8px;color:#4e566c}:host .dr-input-date-paging__flip-page-button{width:25px;height:25px;border-radius:16px;padding:0;background-color:#fff}:host .dr-input-date-paging__flip-page-button i{position:relative;color:#0c142b;top:unset;left:unset}:host .dr-input-date-paging__flip-page-button:hover{background-color:#f2f2fb;color:#4646ce}:host input{visibility:hidden;position:absolute;width:100%}:host .dr-input-date-paging__formatted-value-display{width:90px;height:22px;padding-left:0;text-align:center;line-height:22px;color:#0c142b;-webkit-text-decoration-line:underline;text-decoration-line:underline}:host .dr-input-date-paging__formatted-value-display:hover{background-color:#f2f2fb;border-radius:5px;cursor:pointer;-webkit-text-decoration-line:underline;text-decoration-line:underline;color:#4646ce}\n"]
+                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 = () => [
@@ -3617,5 +3641,5 @@ DrAccordionModule.decorators = [
  * Generated bundle index. Do not edit.
  */
 
-export { AnyTagComponent, CheckboxComponent, CustomDateFormat, DATE_INPUT_FORMAT, DatePickerPeriodPosition, DateTagComponent, DateTagModule, DayTagComponent, DrAccordionComponent, DrAccordionItemBodyComponent, DrAccordionItemComponent, DrAccordionItemHeaderComponent, DrAccordionModule, DrAvatarComponent, DrAvatarModule, DrAvatarPipe, DrButtonComponent, DrDropdownComponent, DrDropdownDirective, DrDropdownItemShowPipe, DrDropdownModule, DrDropdownPositionDirective, DrDropdownService, DrInputComponent, DrInputsModule, DrModelDebounceChangeDirective, DrPopoverAlignmentDimension, DrPopoverComponent, DrPopoverDirective, DrPopoverModule, DrPopoverRef, DrPopoverService, DrSelectComponent, DrSpinnerComponent, DrSpinnerDirective, DrSpinnerModule, DrTabComponent, DrTabsComponent, DrTabsModule, DrTagComponent, DrTagModule, DrToggleButtonComponent, DrToggleComponent, DrTooltipDirective, DrTooltipModule, ForecastTagComponent, ListTagComponent, ListTagModule, MAT_DEFAULT_DATE_FORMAT, MONTH_YEAR_FORMAT, MonthTagComponent, QUARTER_FORMAT, QuarterTagComponent, RadioButtonComponent, RadioGroupComponent, SpinnerSize, SpinnerType, TooltipComponent, WeekTagComponent, YEAR_FORMAT, YearTagComponent, components$2 as ɵa, POPUP_ANIMATION as ɵb, DrDatePickerComponent as ɵc, DrDatePickerService as ɵd, DrDatePickerWithTimeframeComponent as ɵe, DrDatePickerFormatDirective as ɵf, DrDatePickerCustomHeaderComponent as ɵg };
+export { AnyTagComponent, CalendarView, CheckboxComponent, CustomDateFormat, DateFromats, DatePickerPeriodPosition, DateTagComponent, DateTagModule, DayTagComponent, DrAccordionComponent, DrAccordionItemBodyComponent, DrAccordionItemComponent, DrAccordionItemHeaderComponent, DrAccordionModule, DrAvatarComponent, DrAvatarModule, DrAvatarPipe, DrButtonComponent, DrDropdownComponent, DrDropdownDirective, DrDropdownItemShowPipe, DrDropdownModule, DrDropdownPositionDirective, DrDropdownService, DrInputComponent, DrInputsModule, DrModelDebounceChangeDirective, DrPopoverAlignmentDimension, DrPopoverComponent, DrPopoverDirective, DrPopoverModule, DrPopoverRef, DrPopoverService, DrSelectComponent, DrSpinnerComponent, DrSpinnerDirective, DrSpinnerModule, DrTabComponent, DrTabsComponent, DrTabsModule, DrTagComponent, DrTagModule, DrToggleButtonComponent, DrToggleComponent, DrTooltipDirective, DrTooltipModule, ForecastTagComponent, ListTagComponent, ListTagModule, MonthTagComponent, QuarterTagComponent, RadioButtonComponent, RadioGroupComponent, SpinnerSize, SpinnerType, TimeframeOption, TooltipComponent, WeekTagComponent, YearTagComponent, components$2 as ɵa, POPUP_ANIMATION as ɵb, DrDatePickerComponent as ɵc, DrDatePickerService as ɵd, DrDatePickerWithTimeframeComponent as ɵe, DrDatePickerFormatDirective as ɵf, DrDatePickerCustomHeaderComponent as ɵg };
 //# sourceMappingURL=datarailsshared-datarailsshared.js.map