@datarailsshared/datarailsshared 1.4.98 → 1.4.100

package/fesm2015/datarailsshared-datarailsshared.js

@@ -3501,6 +3501,7 @@ class DrDatePickerService {
             quarter: DateFromats.QUARTER_FORMAT,
             week: DateFromats.WEEK_FORMAT
         };
+        this.fiscalYearMonthsModifier = 0;
     }
     getDisplayPrefix() {
         const formatCached = this.format$.getValue();
@@ -3527,6 +3528,93 @@ class DrDatePickerService {
     normalizeValue(value) {
         return value.replace(/d/g, 'D');
     }
+    /**
+     * Get quarter number for date according to fiscal year
+     *
+     * @param date
+     */
+    getQuarterAccordingToFiscalYear(date) {
+        let fiscalMonth = this.fiscalYearMonthsModifier;
+        const dateMonth = date.month();
+        if (dateMonth < fiscalMonth) {
+            fiscalMonth -= 12;
+        }
+        return Math.trunc((date.month() - fiscalMonth) / 3) + 1;
+    }
+    /**
+     * Sets date to end of quarter in FY by passed quarter number
+     *
+     * @param date
+     * @param quarterNumber
+     */
+    setEndOfQuarter(date, quarterNumber) {
+        date
+            .subtract(this.fiscalYearMonthsModifier, 'M')
+            .startOf('year')
+            .add(this.fiscalYearMonthsModifier + quarterNumber * 3 - 1, 'M')
+            .endOf('month');
+    }
+    /**
+     * Sets date to start of quarter in FY by passed quarter number
+     *
+     * @param date
+     * @param quarterNumber
+     */
+    setStartOfQuarter(date, quarterNumber) {
+        date
+            .subtract(this.fiscalYearMonthsModifier, 'M')
+            .startOf('year')
+            .add(this.fiscalYearMonthsModifier + (quarterNumber - 1) * 3, 'M');
+    }
+    /**
+     * Sets date to end of current quarter (in which date is located) according to FY
+     *
+     * @param date
+     */
+    setEndOfCurrentQuarter(date) {
+        this.setEndOfQuarter(date, this.getQuarterAccordingToFiscalYear(date));
+    }
+    /**
+     * Sets date to start of current quarter (in which date is located) according to FY
+     *
+     * @param date
+     */
+    setStartOfCurrentQuarter(date) {
+        this.setStartOfQuarter(date, this.getQuarterAccordingToFiscalYear(date));
+    }
+    /**
+     * If date selection on this timeframe depends on Fiscal Year
+     *
+     * @param timeframe
+     */
+    isTimeframeDependingOnFY(timeframe) {
+        return _.includes([TimeframeOption.QUARTER, TimeframeOption.YEAR], timeframe);
+    }
+    /**
+     * Subtract from date fiscal year shift months count
+     *
+     * @param date
+     */
+    subtractFiscalYearMonthsFromDate(date) {
+        return this.getDateModifiedByFiscalMonths(date, true);
+    }
+    /**
+     * Add to date fiscal year shift months count
+     *
+     * @param date
+     */
+    addFiscalYearMonthsToDate(date) {
+        return this.getDateModifiedByFiscalMonths(date);
+    }
+    /**
+     * Add or subtract depending on isRevert paremeter Fiscal year month shift
+     *
+     * @param date
+     * @param isSubtract
+     */
+    getDateModifiedByFiscalMonths(date, isSubtract = false) {
+        return date ? _.cloneDeep(date)[isSubtract ? 'subtract' : 'add'](this.fiscalYearMonthsModifier, 'month') : date;
+    }
 }
 DrDatePickerService.decorators = [
     { type: Injectable }
@@ -3560,20 +3648,20 @@ class DrDatePickerCustomHeaderComponent {
                 title: 'Month',
                 value: CalendarView.FOR_MONTHS,
                 format: this.datePickerService.formatConfig.month,
-                periodLabel: () => String(moment$1(this._calendar.activeDate).year())
+                periodLabel: () => String(moment$1(this._calendar.activeDate).utc().year())
             }, {
                 timeframe: TimeframeOption.QUARTER,
                 title: 'Quarter',
                 value: CalendarView.FOR_QUARTERS,
                 format: this.datePickerService.formatConfig.quarter,
-                periodLabel: () => String(moment$1(this._calendar.activeDate).year())
+                periodLabel: () => String(moment$1(this.datePickerService.subtractFiscalYearMonthsFromDate(this._calendar.activeDate)).utc().year())
             }, {
                 timeframe: TimeframeOption.YEAR,
                 title: 'Year',
                 value: CalendarView.FOR_YEARS,
                 format: this.datePickerService.formatConfig.year,
                 periodLabel: () => {
-                    const currentYear = moment$1(this._calendar.activeDate).year();
+                    const currentYear = moment$1(this.datePickerService.subtractFiscalYearMonthsFromDate(this._calendar.activeDate)).utc().year();
                     const startPeriod = Math.floor(currentYear / 24) * 24;
                     return startPeriod + '-' + (startPeriod + 23);
                 }
@@ -3595,12 +3683,24 @@ class DrDatePickerCustomHeaderComponent {
             _calendar.currentView = this.selectedTimeframe;
             this.setPeriodLabels();
             if (this.selectedTimeframe === CalendarView.FOR_QUARTERS) {
-                this.selectedQuarter = moment$1(this._calendar.activeDate).quarter();
+                this.selectedQuarter = this.datePickerService.getQuarterAccordingToFiscalYear(this._calendar.activeDate);
+            }
+        });
+        _calendar.viewChanged.pipe(takeUntil(this._destroyed)).subscribe(() => {
+            this.setPeriodLabels();
+            if (_calendar.multiYearView) {
+                this.transformDateInMultiyearViewAccordingToFY();
             }
         });
-        _calendar.viewChanged.pipe(takeUntil(this._destroyed)).subscribe(() => this.setPeriodLabels());
         this.datePickerService.calendarInstance = _calendar;
     }
+    ngOnInit() {
+        setTimeout(() => {
+            if (this._calendar.multiYearView) {
+                this.transformDateInMultiyearViewAccordingToFY();
+            }
+        });
+    }
     ngOnDestroy() {
         this._destroyed.next();
         this._destroyed.complete();
@@ -3624,7 +3724,7 @@ class DrDatePickerCustomHeaderComponent {
         const chosenTimeframeOption = this.timeframeOptions.filter(option => option.value === this.selectedTimeframe)[0];
         this.datePickerService.updateTimeframeAndFormat(chosenTimeframeOption.format);
         if (this.selectedTimeframe === CalendarView.FOR_QUARTERS) {
-            this.selectedQuarter = moment$1(this._calendar.activeDate).quarter();
+            this.selectedQuarter = this.datePickerService.getQuarterAccordingToFiscalYear(this._calendar.activeDate);
         }
     }
     get currentViewIsQuarter() {
@@ -3634,11 +3734,9 @@ class DrDatePickerCustomHeaderComponent {
         this._calendar.currentView = view;
     }
     onSelectQuarter(quarterNumber) {
-        const monthsInQuarter = 3;
-        this.selectedQuarter = moment$1(this._calendar.activeDate).quarter();
-        const unadaptedDate = this._dateAdapter.addCalendarMonths(this._calendar.activeDate, monthsInQuarter * (quarterNumber - this.selectedQuarter));
-        this._calendar.activeDate = unadaptedDate;
-        this.datePickerService.updatedQuarter$.next(moment$1(unadaptedDate));
+        this.selectedQuarter = quarterNumber;
+        this.datePickerService.setEndOfQuarter(this._calendar.activeDate, quarterNumber);
+        this.datePickerService.updatedQuarter$.next(this._calendar.activeDate);
         this.datePickerService.datePickerInstance.close();
     }
     pagingClicked(forward) {
@@ -3650,11 +3748,17 @@ class DrDatePickerCustomHeaderComponent {
         this._calendar.activeDate = this._dateAdapter[actionCall](this._calendar.activeDate, forward ? amount : -amount);
         this.setPeriodLabels();
     }
+    transformDateInMultiyearViewAccordingToFY() {
+        const multuYearView = this._calendar.multiYearView;
+        multuYearView._activeDate = this.datePickerService.subtractFiscalYearMonthsFromDate(multuYearView._activeDate);
+        multuYearView._selectedYear = multuYearView._activeDate.year();
+        multuYearView._init();
+    }
 }
 DrDatePickerCustomHeaderComponent.decorators = [
     { type: Component, args: [{
                 selector: 'dr-date-picker_custom-header.component',
-                template: "<div *ngIf=\"datePickerService.isTimeframeSelectionEnabled\" class=\"dr-datepicker__timeframe-select__wrapper\">\n    <dr-select\n            class=\"dr-datepicker__timeframe-select\"\n            [(ngModel)]=\"selectedTimeframe\"\n            [items]=\"timeframeOptions | drShowTimeframePipe: datePickerService.availableTimeframes\"\n            bindLabel=\"title\"\n            bindValue=\"value\"\n            (ngModelChange)=\"setTimeframe()\">\n    </dr-select>\n</div>\n\n<div class=\"dr-date-paging\">\n    <div class=\"dr-date-paging flip-page-button\"\n         (click)=\"pagingClicked(false)\">\n        <i class=\"dr-icon-arrow-left presentation_buttons-navigate_input\"></i>\n    </div>\n    <span class=\"example-header-label\">\n        <span (click)=\"switchViewOnClickOnPeriodLabel(calendarView.FOR_MONTHS)\">{{periodMonthLabel + ' '}}</span>\n        <span (click)=\"switchViewOnClickOnPeriodLabel(calendarView.FOR_YEARS)\">{{periodYearLabel}}</span>\n    </span>\n    <div class=\"dr-date-paging flip-page-button\"\n         (click)=\"pagingClicked(true)\">\n        <i class=\"dr-icon-arrow-right presentation_buttons-navigate_input\"></i>\n    </div>\n</div>\n<div #quarterlyDatePicker class=\"dr-quarterly-datepicker\" *ngIf=\"currentViewIsQuarter\">\n    <div *ngFor=\"let quarter of quarters\"\n         class=\"quarter-selector\" (click)=\"onSelectQuarter(quarter)\"\n         [class]=\"quarter === selectedQuarter ? 'selected' : ''\"\n    >Q{{quarter}}</div>\n</div>\n\n",
+                template: "<div *ngIf=\"datePickerService.isTimeframeSelectionEnabled\" class=\"dr-datepicker__timeframe-select__wrapper\">\n    <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",
                 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"]
             },] }
@@ -3679,6 +3783,7 @@ class DrDatePickerComponent {
         // Whether to transform date, taking end, start, middle of preiod (i.e. set middle of month if timeframe='month')
         this.periodPosition = DatePickerPeriodPosition.DEFAULT;
         this.placeholder = 'Select';
+        this.fiscalYearMonthsModifier = 0;
         this.calendarViewsTimeframeMapping = {
             year: 'multi-year',
             month: 'year',
@@ -3715,6 +3820,7 @@ class DrDatePickerComponent {
         this.cdr.markForCheck();
     }
     ngAfterViewInit() {
+        this.datePickerService.fiscalYearMonthsModifier = this.fiscalYearMonthsModifier;
         this.datePickerService.datePickerInstance = this.datePicker;
         this.datePicker.startView = this.calendarViewsTimeframeMapping[this.datePickerService.timeframe];
     }
@@ -3730,14 +3836,43 @@ class DrDatePickerComponent {
         const timeframe = this.datePickerService.timeframe;
         switch (this.periodPosition) {
             case DatePickerPeriodPosition.START_OF_PERIOD:
-                this.innerValue.startOf(timeframe);
+                if (this.datePickerService.timeframe === TimeframeOption.QUARTER) {
+                    this.datePickerService.setStartOfCurrentQuarter(this.innerValue);
+                }
+                else if (this.datePickerService.timeframe === TimeframeOption.YEAR) {
+                    this.datePickerService.setStartOfQuarter(this.innerValue, 1);
+                }
+                else {
+                    this.innerValue.startOf(timeframe);
+                }
                 break;
             case DatePickerPeriodPosition.END_OF_PERIOD:
-                this.innerValue.endOf(timeframe);
+                if (this.datePickerService.timeframe === TimeframeOption.QUARTER) {
+                    this.datePickerService.setEndOfCurrentQuarter(this.innerValue);
+                }
+                else if (this.datePickerService.timeframe === TimeframeOption.YEAR) {
+                    this.datePickerService.setEndOfQuarter(this.innerValue, 4);
+                }
+                else {
+                    this.innerValue.endOf(timeframe);
+                }
                 break;
             case DatePickerPeriodPosition.MIDDLE_OF_PERIOD:
-                this.innerValue.startOf(timeframe);
-                const endOfPeriod = this.innerValue.clone().endOf(timeframe);
+                let endOfPeriod;
+                if (this.datePickerService.timeframe === TimeframeOption.QUARTER) {
+                    endOfPeriod = this.innerValue.clone();
+                    this.datePickerService.setStartOfCurrentQuarter(this.innerValue);
+                    this.datePickerService.setEndOfCurrentQuarter(endOfPeriod);
+                }
+                else if (this.datePickerService.timeframe === TimeframeOption.YEAR) {
+                    endOfPeriod = this.innerValue.clone();
+                    this.datePickerService.setStartOfQuarter(this.innerValue, 1);
+                    this.datePickerService.setEndOfQuarter(endOfPeriod, 4);
+                }
+                else {
+                    this.innerValue.startOf(timeframe);
+                    endOfPeriod = this.innerValue.clone().endOf(timeframe);
+                }
                 const diff = endOfPeriod.diff(this.innerValue, 'seconds');
                 this.innerValue.add(diff / 2 + 1, 'seconds');
                 break;
@@ -3747,6 +3882,9 @@ class DrDatePickerComponent {
         }
     }
     chosenPeriodHandler(chosenDate, timeframe) {
+        if (timeframe === TimeframeOption.YEAR) {
+            chosenDate = this.datePickerService.addFiscalYearMonthsToDate(chosenDate);
+        }
         if (this.datePickerService.timeframe === TimeframeOption.QUARTER && timeframe === TimeframeOption.YEAR) {
             this.datePickerService.calendarInstance.currentView = CalendarView.FOR_QUARTERS;
             this.datePickerService.calendarInstance.activeDate = chosenDate;
@@ -3814,6 +3952,7 @@ DrDatePickerComponent.propDecorators = {
     max: [{ type: Input }],
     periodPosition: [{ type: Input }],
     placeholder: [{ type: Input }],
+    fiscalYearMonthsModifier: [{ type: Input }],
     datePicker: [{ type: ViewChild, args: ['datePicker',] }]
 };
 
@@ -3858,8 +3997,12 @@ class DrDatePickerWithTimeframeComponent extends DrDatePickerComponent {
         if (!this.value) {
             return this.placeholder;
         }
+        let displayValue = _.cloneDeep(this.value);
+        if (this.datePickerService.isTimeframeDependingOnFY(this.datePickerService.timeframe)) {
+            displayValue = this.datePickerService.subtractFiscalYearMonthsFromDate(displayValue);
+        }
         const formatCached = this.datePickerService.format$.getValue();
-        return this.datePickerService.getDisplayPrefix() + this.value.format(formatCached);
+        return this.datePickerService.getDisplayPrefix() + displayValue.format(formatCached);
     }
     ngOnInit() {
         this.datePickerService.isTimeframeSelectionEnabled = this.canSelectTimeframe;