@datarailsshared/datarailsshared 1.6.165 → 1.6.167

package/fesm2022/datarailsshared-datarailsshared.mjs

@@ -1850,110 +1850,75 @@ class DrShowTimeframePipe {
 
 const _c0$I = ["class", "component"];
 const _c1$i = function (a0) { return { "dr-datepicker-preset-date__tags__tag--selected": a0 }; };
-function DrDatePickerCustomHeaderComponent_div_0_div_1_div_2_div_2_Template(rf, ctx) { if (rf & 1) {
-    const _r8 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 16);
-    i0.ɵɵlistener("click", function DrDatePickerCustomHeaderComponent_div_0_div_1_div_2_div_2_Template_div_click_0_listener() { const restoredCtx = i0.ɵɵrestoreView(_r8); const tag_r6 = restoredCtx.$implicit; const ctx_r7 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r7.onSelectPresetTag(tag_r6)); });
+function DrDatePickerCustomHeaderComponent_div_0_div_1_div_2_Template(rf, ctx) { if (rf & 1) {
+    const _r7 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 14);
+    i0.ɵɵlistener("click", function DrDatePickerCustomHeaderComponent_div_0_div_1_div_2_Template_div_click_0_listener() { const restoredCtx = i0.ɵɵrestoreView(_r7); const tag_r5 = restoredCtx.$implicit; const ctx_r6 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r6.onSelectPresetTag(tag_r5)); });
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const tag_r6 = ctx.$implicit;
-    const ctx_r5 = i0.ɵɵnextContext(4);
-    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(4, _c1$i, tag_r6.key === ctx_r5.selectedPresetTag))("drTooltip", ctx_r5.selectedPresetTag === tag_r6.key ? "Unselect preset" : "")("drTooltipPosition", "top");
+    const tag_r5 = ctx.$implicit;
+    const ctx_r4 = i0.ɵɵnextContext(3);
+    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(4, _c1$i, tag_r5.key === ctx_r4.selectedPresetTag))("drTooltip", ctx_r4.selectedPresetTag === tag_r5.key ? "Unselect preset" : "")("drTooltipPosition", "top");
     i0.ɵɵadvance(1);
-    i0.ɵɵtextInterpolate1(" ", tag_r6.label, " ");
+    i0.ɵɵtextInterpolate1(" ", tag_r5.label, " ");
 } }
-function DrDatePickerCustomHeaderComponent_div_0_div_1_div_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 14);
-    i0.ɵɵtext(1, " Preset dates ");
-    i0.ɵɵtemplate(2, DrDatePickerCustomHeaderComponent_div_0_div_1_div_2_div_2_Template, 2, 6, "div", 15);
-    i0.ɵɵelementEnd();
+const _c2$a = function (a0) { return { "dr-datepicker-preset-date__tags--solo": a0 }; };
+function DrDatePickerCustomHeaderComponent_div_0_div_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 11)(1, "div", 12);
+    i0.ɵɵtemplate(2, DrDatePickerCustomHeaderComponent_div_0_div_1_div_2_Template, 2, 6, "div", 13);
+    i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const ctx_r3 = i0.ɵɵnextContext(3);
-    i0.ɵɵadvance(2);
-    i0.ɵɵproperty("ngForOf", ctx_r3.datePickerService.availableDateTagPresets);
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(1);
+    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(2, _c2$a, !ctx_r2.datePickerService.isUsingTimeFrameSelect));
+    i0.ɵɵadvance(1);
+    i0.ɵɵproperty("ngForOf", ctx_r2.datePickerService.availableDateTagPresets);
 } }
-function DrDatePickerCustomHeaderComponent_div_0_div_1_dr_select_3_Template(rf, ctx) { if (rf & 1) {
-    const _r10 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "dr-select", 17);
-    i0.ɵɵlistener("ngModelChange", function DrDatePickerCustomHeaderComponent_div_0_div_1_dr_select_3_Template_dr_select_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r10); const ctx_r9 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r9.setTimeframe($event)); });
+function DrDatePickerCustomHeaderComponent_div_0_dr_select_2_Template(rf, ctx) { if (rf & 1) {
+    const _r9 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "dr-select", 15);
+    i0.ɵɵlistener("ngModelChange", function DrDatePickerCustomHeaderComponent_div_0_dr_select_2_Template_dr_select_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r9); const ctx_r8 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r8.setTimeframe($event)); });
     i0.ɵɵpipe(1, "drShowTimeframePipe");
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r4 = i0.ɵɵnextContext(3);
-    i0.ɵɵproperty("ngModel", ctx_r4.selectedTimeframe)("items", i0.ɵɵpipeBind2(1, 2, ctx_r4.timeframeOptions, ctx_r4.datePickerService.availableTimeframes));
+    const ctx_r3 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("ngModel", ctx_r3.selectedTimeframe)("items", i0.ɵɵpipeBind2(1, 2, ctx_r3.timeframeOptions, ctx_r3.datePickerService.availableTimeframes));
 } }
-const _c2$a = function (a0) { return { "dr-datepicker-preset-date__tags--solo": a0 }; };
-function DrDatePickerCustomHeaderComponent_div_0_div_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 10)(1, "div", 11);
-    i0.ɵɵtemplate(2, DrDatePickerCustomHeaderComponent_div_0_div_1_div_2_Template, 3, 1, "div", 12);
-    i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(3, DrDatePickerCustomHeaderComponent_div_0_div_1_dr_select_3_Template, 2, 5, "dr-select", 13);
+function DrDatePickerCustomHeaderComponent_div_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 8);
+    i0.ɵɵtemplate(1, DrDatePickerCustomHeaderComponent_div_0_div_1_Template, 3, 4, "div", 9);
+    i0.ɵɵtemplate(2, DrDatePickerCustomHeaderComponent_div_0_dr_select_2_Template, 2, 5, "dr-select", 10);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(2);
-    i0.ɵɵadvance(1);
-    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(3, _c2$a, ctx_r1.datePickerService.isUsingTimeFrameSelect));
+    const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵadvance(1);
-    i0.ɵɵproperty("ngIf", ctx_r1.datePickerService.availableDateTagPresets.length > 0);
+    i0.ɵɵproperty("ngIf", ctx_r0.datePickerService.isUsingDateTagPresets);
     i0.ɵɵadvance(1);
-    i0.ɵɵproperty("ngIf", ctx_r1.datePickerService.isUsingTimeFrameSelect);
+    i0.ɵɵproperty("ngIf", ctx_r0.datePickerService.isUsingTimeFrameSelect);
 } }
-function DrDatePickerCustomHeaderComponent_div_0_div_12_div_2_Template(rf, ctx) { if (rf & 1) {
-    const _r15 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 21);
-    i0.ɵɵlistener("click", function DrDatePickerCustomHeaderComponent_div_0_div_12_div_2_Template_div_click_0_listener() { const restoredCtx = i0.ɵɵrestoreView(_r15); const quarter_r13 = restoredCtx.$implicit; const ctx_r14 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r14.onSelectQuarter(quarter_r13)); });
+function DrDatePickerCustomHeaderComponent_div_11_div_2_Template(rf, ctx) { if (rf & 1) {
+    const _r14 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 19);
+    i0.ɵɵlistener("click", function DrDatePickerCustomHeaderComponent_div_11_div_2_Template_div_click_0_listener() { const restoredCtx = i0.ɵɵrestoreView(_r14); const quarter_r12 = restoredCtx.$implicit; const ctx_r13 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r13.onSelectQuarter(quarter_r12)); });
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const quarter_r13 = ctx.$implicit;
-    const ctx_r12 = i0.ɵɵnextContext(3);
-    i0.ɵɵclassMap(quarter_r13 === ctx_r12.selectedQuarter ? "selected" : "");
-    i0.ɵɵclassProp("quarter-selector--disabled", ctx_r12.isQuarterDisabled(quarter_r13));
+    const quarter_r12 = ctx.$implicit;
+    const ctx_r11 = i0.ɵɵnextContext(2);
+    i0.ɵɵclassMap(quarter_r12 === ctx_r11.selectedQuarter ? "selected" : "");
+    i0.ɵɵclassProp("quarter-selector--disabled", ctx_r11.isQuarterDisabled(quarter_r12));
     i0.ɵɵadvance(1);
-    i0.ɵɵtextInterpolate1(" Q", quarter_r13, " ");
+    i0.ɵɵtextInterpolate1(" Q", quarter_r12, " ");
 } }
-function DrDatePickerCustomHeaderComponent_div_0_div_12_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 18, 19);
-    i0.ɵɵtemplate(2, DrDatePickerCustomHeaderComponent_div_0_div_12_div_2_Template, 2, 5, "div", 20);
+function DrDatePickerCustomHeaderComponent_div_11_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 16, 17);
+    i0.ɵɵtemplate(2, DrDatePickerCustomHeaderComponent_div_11_div_2_Template, 2, 5, "div", 18);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext(2);
-    i0.ɵɵadvance(2);
-    i0.ɵɵproperty("ngForOf", ctx_r2.quarters);
-} }
-function DrDatePickerCustomHeaderComponent_div_0_Template(rf, ctx) { if (rf & 1) {
-    const _r17 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 1);
-    i0.ɵɵtemplate(1, DrDatePickerCustomHeaderComponent_div_0_div_1_Template, 4, 5, "div", 2);
-    i0.ɵɵelementStart(2, "div", 3)(3, "div", 4);
-    i0.ɵɵlistener("click", function DrDatePickerCustomHeaderComponent_div_0_Template_div_click_3_listener() { i0.ɵɵrestoreView(_r17); const ctx_r16 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r16.pagingClicked(false)); });
-    i0.ɵɵelement(4, "i", 5);
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "span", 6)(6, "span", 7);
-    i0.ɵɵlistener("click", function DrDatePickerCustomHeaderComponent_div_0_Template_span_click_6_listener() { i0.ɵɵrestoreView(_r17); const ctx_r18 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r18.switchViewOnClickOnPeriodLabel(ctx_r18.calendarView.FOR_MONTHS)); });
-    i0.ɵɵtext(7);
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(8, "span", 7);
-    i0.ɵɵlistener("click", function DrDatePickerCustomHeaderComponent_div_0_Template_span_click_8_listener() { i0.ɵɵrestoreView(_r17); const ctx_r19 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r19.switchViewOnClickOnPeriodLabel(ctx_r19.calendarView.FOR_YEARS)); });
-    i0.ɵɵtext(9);
-    i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(10, "div", 4);
-    i0.ɵɵlistener("click", function DrDatePickerCustomHeaderComponent_div_0_Template_div_click_10_listener() { i0.ɵɵrestoreView(_r17); const ctx_r20 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r20.pagingClicked(true)); });
-    i0.ɵɵelement(11, "i", 8);
-    i0.ɵɵelementEnd()();
-    i0.ɵɵtemplate(12, DrDatePickerCustomHeaderComponent_div_0_div_12_Template, 3, 1, "div", 9);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext();
-    i0.ɵɵadvance(1);
-    i0.ɵɵproperty("ngIf", ctx_r0.datePickerService.isUsingDateTagPresets);
-    i0.ɵɵadvance(6);
-    i0.ɵɵtextInterpolate(ctx_r0.periodMonthLabel + " ");
+    const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(ctx_r0.periodYearLabel);
-    i0.ɵɵadvance(3);
-    i0.ɵɵproperty("ngIf", ctx_r0.currentViewIsQuarter);
+    i0.ɵɵproperty("ngForOf", ctx_r1.quarters);
 } }
 class DrDatePickerCustomHeaderComponent {
     get selectedPresetTag() {
@@ -2168,15 +2133,38 @@ class DrDatePickerCustomHeaderComponent {
         calendar.insertBefore(selector.location.nativeElement, calendar.firstChild);
     }
     /** @nocollapse */ static { this.ɵfac = function DrDatePickerCustomHeaderComponent_Factory(t) { return new (t || DrDatePickerCustomHeaderComponent)(i0.ɵɵdirectiveInject(i6.MatCalendar), i0.ɵɵdirectiveInject(i1$4.DateAdapter), i0.ɵɵdirectiveInject(MAT_DATE_FORMATS), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(DrDatePickerService)); }; }
-    /** @nocollapse */ static { this.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: DrDatePickerCustomHeaderComponent, selectors: [["dr-date-picker_custom-header", 8, "component"]], attrs: _c0$I, decls: 1, vars: 1, consts: [["class", "dr-datepicker__timeframe-select__wrapper", 4, "ngIf"], [1, "dr-datepicker__timeframe-select__wrapper"], ["class", "dr-datepicker-preset-date", 4, "ngIf"], [1, "dr-date-paging"], [1, "dr-date-paging", "flip-page-button", 3, "click"], [1, "dr-icon-arrow-left", "presentation_buttons-navigate_input"], [1, "example-header-label"], [3, "click"], [1, "dr-icon-arrow-right", "presentation_buttons-navigate_input"], ["class", "dr-quarterly-datepicker", 4, "ngIf"], [1, "dr-datepicker-preset-date"], [1, "dr-datepicker-preset-date__tags", 3, "ngClass"], ["class", "dr-datepicker-preset-date__tags__title", 4, "ngIf"], ["class", "dr-datepicker__timeframe-select", "bindLabel", "title", "bindValue", "value", 3, "ngModel", "items", "ngModelChange", 4, "ngIf"], [1, "dr-datepicker-preset-date__tags__title"], ["id", "preset_tag", "class", "dr-datepicker-preset-date__tags__tag", 3, "ngClass", "drTooltip", "drTooltipPosition", "click", 4, "ngFor", "ngForOf"], ["id", "preset_tag", 1, "dr-datepicker-preset-date__tags__tag", 3, "ngClass", "drTooltip", "drTooltipPosition", "click"], ["bindLabel", "title", "bindValue", "value", 1, "dr-datepicker__timeframe-select", 3, "ngModel", "items", "ngModelChange"], [1, "dr-quarterly-datepicker"], ["quarterlyDatePicker", ""], ["class", "quarter-selector", 3, "class", "quarter-selector--disabled", "click", 4, "ngFor", "ngForOf"], [1, "quarter-selector", 3, "click"]], template: function DrDatePickerCustomHeaderComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵtemplate(0, DrDatePickerCustomHeaderComponent_div_0_Template, 13, 4, "div", 0);
+    /** @nocollapse */ static { this.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: DrDatePickerCustomHeaderComponent, selectors: [["dr-date-picker_custom-header", 8, "component"]], attrs: _c0$I, decls: 12, vars: 4, consts: [["class", "dr-datepicker__timeframe-select__wrapper", 4, "ngIf"], [1, "dr-date-paging"], [1, "dr-date-paging", "flip-page-button", 3, "click"], [1, "dr-icon-arrow-left", "presentation_buttons-navigate_input"], [1, "example-header-label"], [3, "click"], [1, "dr-icon-arrow-right", "presentation_buttons-navigate_input"], ["class", "dr-quarterly-datepicker", 4, "ngIf"], [1, "dr-datepicker__timeframe-select__wrapper"], ["class", "dr-datepicker-preset-date", 4, "ngIf"], ["class", "dr-datepicker__timeframe-select", "bindLabel", "title", "bindValue", "value", 3, "ngModel", "items", "ngModelChange", 4, "ngIf"], [1, "dr-datepicker-preset-date"], [1, "dr-datepicker-preset-date__tags", 3, "ngClass"], ["id", "preset_tag", "class", "dr-datepicker-preset-date__tags__tag", 3, "ngClass", "drTooltip", "drTooltipPosition", "click", 4, "ngFor", "ngForOf"], ["id", "preset_tag", 1, "dr-datepicker-preset-date__tags__tag", 3, "ngClass", "drTooltip", "drTooltipPosition", "click"], ["bindLabel", "title", "bindValue", "value", 1, "dr-datepicker__timeframe-select", 3, "ngModel", "items", "ngModelChange"], [1, "dr-quarterly-datepicker"], ["quarterlyDatePicker", ""], ["class", "quarter-selector", 3, "class", "quarter-selector--disabled", "click", 4, "ngFor", "ngForOf"], [1, "quarter-selector", 3, "click"]], template: function DrDatePickerCustomHeaderComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵtemplate(0, DrDatePickerCustomHeaderComponent_div_0_Template, 3, 2, "div", 0);
+            i0.ɵɵelementStart(1, "div", 1)(2, "div", 2);
+            i0.ɵɵlistener("click", function DrDatePickerCustomHeaderComponent_Template_div_click_2_listener() { return ctx.pagingClicked(false); });
+            i0.ɵɵelement(3, "i", 3);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(4, "span", 4)(5, "span", 5);
+            i0.ɵɵlistener("click", function DrDatePickerCustomHeaderComponent_Template_span_click_5_listener() { return ctx.switchViewOnClickOnPeriodLabel(ctx.calendarView.FOR_MONTHS); });
+            i0.ɵɵtext(6);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(7, "span", 5);
+            i0.ɵɵlistener("click", function DrDatePickerCustomHeaderComponent_Template_span_click_7_listener() { return ctx.switchViewOnClickOnPeriodLabel(ctx.calendarView.FOR_YEARS); });
+            i0.ɵɵtext(8);
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(9, "div", 2);
+            i0.ɵɵlistener("click", function DrDatePickerCustomHeaderComponent_Template_div_click_9_listener() { return ctx.pagingClicked(true); });
+            i0.ɵɵelement(10, "i", 6);
+            i0.ɵɵelementEnd()();
+            i0.ɵɵtemplate(11, DrDatePickerCustomHeaderComponent_div_11_Template, 3, 1, "div", 7);
         } if (rf & 2) {
             i0.ɵɵproperty("ngIf", ctx.datePickerService.isTimeframeSelectionEnabled);
+            i0.ɵɵadvance(6);
+            i0.ɵɵtextInterpolate(ctx.periodMonthLabel + " ");
+            i0.ɵɵadvance(2);
+            i0.ɵɵtextInterpolate(ctx.periodYearLabel);
+            i0.ɵɵadvance(3);
+            i0.ɵɵproperty("ngIf", ctx.currentViewIsQuarter);
         } }, dependencies: [i1$2.NgControlStatus, i1$2.NgModel, i1.NgClass, i1.NgForOf, i1.NgIf, DrTooltipDirective, DrSelectComponent, DrShowTimeframePipe], styles: ["[_nghost-%COMP%]{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[_ngcontent-%COMP%]{background-color:#f9faff;padding:16px 32px;border-radius:18px 18px 0 0}.dr-datepicker-preset-date[_ngcontent-%COMP%]{display:flex;flex-direction:column}.dr-datepicker-preset-date__tags[_ngcontent-%COMP%]{display:flex;padding-bottom:21px;padding-top:10px;font-size:12px}.dr-datepicker-preset-date__tags--solo[_ngcontent-%COMP%]{padding:16px 32px;gap:16px;justify-content:center}.dr-datepicker-preset-date__tags--solo[_ngcontent-%COMP%]   .dr-datepicker-preset-date__tags__tag[_ngcontent-%COMP%]{padding:4px 8px;justify-content:center;display:flex;flex:1 0 0}.dr-datepicker-preset-date__tags__tag[_ngcontent-%COMP%]{cursor:pointer;font-weight:400;line-height:20px!important;padding:2px 8px;border:1px solid #9ea1aa;border-radius:18px;background:#fff;margin-right:4px}.dr-datepicker-preset-date__tags__tag--selected[_ngcontent-%COMP%]{color:#4646ce;background:#f2f2fb;border:1px solid #4646ce}.dr-date-paging[_ngcontent-%COMP%]{display:flex;flex-direction:row;justify-content:space-between;align-items:center;padding:16px 32px 32px;gap:4px}.dr-date-paging.flip-page-button[_ngcontent-%COMP%]{width:20px;height:20px;padding:0;color:#4e566c}.dr-date-paging.flip-page-button[_ngcontent-%COMP%]:hover{border-radius:50%;background:#f2f2fb;color:#4646ce}.example-header-label[_ngcontent-%COMP%]{cursor:pointer}.dr-quarterly-datepicker[_ngcontent-%COMP%]{display:flex;justify-content:space-between;padding:10px}.dr-quarterly-datepicker[_ngcontent-%COMP%]   .quarter-selector[_ngcontent-%COMP%]{display:block;width:74px;height:40px;text-align:center;border-radius:40px;font-weight:400;padding-top:9px}.dr-quarterly-datepicker[_ngcontent-%COMP%]   .quarter-selector[_ngcontent-%COMP%]:hover{background:#f2f2fb;color:#4646ce;font-weight:600;cursor:pointer}.dr-quarterly-datepicker[_ngcontent-%COMP%]   .quarter-selector.selected[_ngcontent-%COMP%]{background-color:#4646ce;color:#f3f7ff;font-weight:600}.dr-quarterly-datepicker[_ngcontent-%COMP%]   .quarter-selector--disabled[_ngcontent-%COMP%], .dr-quarterly-datepicker[_ngcontent-%COMP%]   .quarter-selector--disabled.selected[_ngcontent-%COMP%]{pointer-events:none;background-color:transparent;color:#aeabac;font-weight:400}"], changeDetection: 0 }); }
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DrDatePickerCustomHeaderComponent, [{
         type: Component,
-        args: [{ selector: 'dr-date-picker_custom-header.component', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div *ngIf=\"datePickerService.isTimeframeSelectionEnabled\" class=\"dr-datepicker__timeframe-select__wrapper\">\n    <div *ngIf=\"datePickerService.isUsingDateTagPresets\" class=\"dr-datepicker-preset-date\">\n        <div class=\"dr-datepicker-preset-date__tags\"\n             [ngClass]=\"{ 'dr-datepicker-preset-date__tags--solo': datePickerService.isUsingTimeFrameSelect }\">\n            <div\n                *ngIf=\"datePickerService.availableDateTagPresets.length > 0\"\n                class=\"dr-datepicker-preset-date__tags__title\">\n                Preset dates\n            <div\n                *ngFor=\"let tag of datePickerService.availableDateTagPresets\"\n                id=\"preset_tag\"\n                class=\"dr-datepicker-preset-date__tags__tag\"\n                (click)=\"onSelectPresetTag(tag)\"\n                [ngClass]=\"{ 'dr-datepicker-preset-date__tags__tag--selected': tag.key === selectedPresetTag }\"\n                [drTooltip]=\"selectedPresetTag === tag.key ? 'Unselect preset' : ''\"\n                [drTooltipPosition]=\"'top'\">\n                {{ tag.label }}\n            </div>\n        </div>\n    </div>\n    <dr-select\n        *ngIf=\"datePickerService.isUsingTimeFrameSelect\"\n        class=\"dr-datepicker__timeframe-select\"\n        [ngModel]=\"selectedTimeframe\"\n        [items]=\"timeframeOptions | drShowTimeframePipe: datePickerService.availableTimeframes\"\n        bindLabel=\"title\"\n        bindValue=\"value\"\n        (ngModelChange)=\"setTimeframe($event)\">\n    </dr-select>\n</div>\n\n<div class=\"dr-date-paging\">\n    <div class=\"dr-date-paging flip-page-button\" (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\" (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\n        *ngFor=\"let quarter of quarters\"\n        class=\"quarter-selector\"\n        (click)=\"onSelectQuarter(quarter)\"\n        [class]=\"quarter === selectedQuarter ? 'selected' : ''\"\n        [class.quarter-selector--disabled]=\"isQuarterDisabled(quarter)\">\n        Q{{ quarter }}\n    </div>\n</div>\n", styles: [":host{height:54px;align-items:center;font-family:Poppins;font-style:normal;font-weight:600;font-size:14px;line-height:22px}.dr-datepicker__timeframe-select__wrapper{background-color:#f9faff;padding:16px 32px;border-radius:18px 18px 0 0}.dr-datepicker-preset-date{display:flex;flex-direction:column}.dr-datepicker-preset-date__tags{display:flex;padding-bottom:21px;padding-top:10px;font-size:12px}.dr-datepicker-preset-date__tags--solo{padding:16px 32px;gap:16px;justify-content:center}.dr-datepicker-preset-date__tags--solo .dr-datepicker-preset-date__tags__tag{padding:4px 8px;justify-content:center;display:flex;flex:1 0 0}.dr-datepicker-preset-date__tags__tag{cursor:pointer;font-weight:400;line-height:20px!important;padding:2px 8px;border:1px solid #9ea1aa;border-radius:18px;background:#fff;margin-right:4px}.dr-datepicker-preset-date__tags__tag--selected{color:#4646ce;background:#f2f2fb;border:1px solid #4646ce}.dr-date-paging{display:flex;flex-direction:row;justify-content:space-between;align-items:center;padding:16px 32px 32px;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}.dr-quarterly-datepicker .quarter-selector--disabled,.dr-quarterly-datepicker .quarter-selector--disabled.selected{pointer-events:none;background-color:transparent;color:#aeabac;font-weight:400}\n"] }]
+        args: [{ selector: 'dr-date-picker_custom-header.component', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div *ngIf=\"datePickerService.isTimeframeSelectionEnabled\" class=\"dr-datepicker__timeframe-select__wrapper\">\n    <div *ngIf=\"datePickerService.isUsingDateTagPresets\" class=\"dr-datepicker-preset-date\">\n        <div class=\"dr-datepicker-preset-date__tags\"\n             [ngClass]=\"{ 'dr-datepicker-preset-date__tags--solo': !datePickerService.isUsingTimeFrameSelect }\">\n            <div\n                *ngFor=\"let tag of datePickerService.availableDateTagPresets\"\n                id=\"preset_tag\"\n                class=\"dr-datepicker-preset-date__tags__tag\"\n                (click)=\"onSelectPresetTag(tag)\"\n                [ngClass]=\"{ 'dr-datepicker-preset-date__tags__tag--selected': tag.key === selectedPresetTag }\"\n                [drTooltip]=\"selectedPresetTag === tag.key ? 'Unselect preset' : ''\"\n                [drTooltipPosition]=\"'top'\">\n                {{ tag.label }}\n            </div>\n        </div>\n    </div>\n    <dr-select\n        *ngIf=\"datePickerService.isUsingTimeFrameSelect\"\n        class=\"dr-datepicker__timeframe-select\"\n        [ngModel]=\"selectedTimeframe\"\n        [items]=\"timeframeOptions | drShowTimeframePipe: datePickerService.availableTimeframes\"\n        bindLabel=\"title\"\n        bindValue=\"value\"\n        (ngModelChange)=\"setTimeframe($event)\">\n    </dr-select>\n</div>\n\n<div class=\"dr-date-paging\">\n    <div class=\"dr-date-paging flip-page-button\" (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\" (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\n        *ngFor=\"let quarter of quarters\"\n        class=\"quarter-selector\"\n        (click)=\"onSelectQuarter(quarter)\"\n        [class]=\"quarter === selectedQuarter ? 'selected' : ''\"\n        [class.quarter-selector--disabled]=\"isQuarterDisabled(quarter)\">\n        Q{{ quarter }}\n    </div>\n</div>\n", styles: [":host{height:54px;align-items:center;font-family:Poppins;font-style:normal;font-weight:600;font-size:14px;line-height:22px}.dr-datepicker__timeframe-select__wrapper{background-color:#f9faff;padding:16px 32px;border-radius:18px 18px 0 0}.dr-datepicker-preset-date{display:flex;flex-direction:column}.dr-datepicker-preset-date__tags{display:flex;padding-bottom:21px;padding-top:10px;font-size:12px}.dr-datepicker-preset-date__tags--solo{padding:16px 32px;gap:16px;justify-content:center}.dr-datepicker-preset-date__tags--solo .dr-datepicker-preset-date__tags__tag{padding:4px 8px;justify-content:center;display:flex;flex:1 0 0}.dr-datepicker-preset-date__tags__tag{cursor:pointer;font-weight:400;line-height:20px!important;padding:2px 8px;border:1px solid #9ea1aa;border-radius:18px;background:#fff;margin-right:4px}.dr-datepicker-preset-date__tags__tag--selected{color:#4646ce;background:#f2f2fb;border:1px solid #4646ce}.dr-date-paging{display:flex;flex-direction:row;justify-content:space-between;align-items:center;padding:16px 32px 32px;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}.dr-quarterly-datepicker .quarter-selector--disabled,.dr-quarterly-datepicker .quarter-selector--disabled.selected{pointer-events:none;background-color:transparent;color:#aeabac;font-weight:400}\n"] }]
     }], function () { return [{ type: i6.MatCalendar }, { type: i1$4.DateAdapter }, { type: CustomDateFormat, decorators: [{
                 type: Inject,
                 args: [MAT_DATE_FORMATS]
@@ -4942,110 +4930,75 @@ class DrLinkComponent {
 
 const _c0$A = ["class", "component"];
 const _c1$f = function (a0) { return { "dr-datepicker-preset-date__tags__tag--selected": a0 }; };
-function DrFiscalMonthCalendarHeaderComponent_div_0_div_1_div_2_div_2_Template(rf, ctx) { if (rf & 1) {
-    const _r8 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 16);
-    i0.ɵɵlistener("click", function DrFiscalMonthCalendarHeaderComponent_div_0_div_1_div_2_div_2_Template_div_click_0_listener() { const restoredCtx = i0.ɵɵrestoreView(_r8); const tag_r6 = restoredCtx.$implicit; const ctx_r7 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r7.onSelectPresetTag(tag_r6)); });
+function DrFiscalMonthCalendarHeaderComponent_div_0_div_1_div_2_Template(rf, ctx) { if (rf & 1) {
+    const _r7 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 14);
+    i0.ɵɵlistener("click", function DrFiscalMonthCalendarHeaderComponent_div_0_div_1_div_2_Template_div_click_0_listener() { const restoredCtx = i0.ɵɵrestoreView(_r7); const tag_r5 = restoredCtx.$implicit; const ctx_r6 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r6.onSelectPresetTag(tag_r5)); });
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const tag_r6 = ctx.$implicit;
-    const ctx_r5 = i0.ɵɵnextContext(4);
-    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(4, _c1$f, tag_r6.key === ctx_r5.selectedPresetTag))("drTooltip", ctx_r5.selectedPresetTag === tag_r6.key ? "Unselect preset" : "")("drTooltipPosition", "top");
+    const tag_r5 = ctx.$implicit;
+    const ctx_r4 = i0.ɵɵnextContext(3);
+    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(4, _c1$f, tag_r5.key === ctx_r4.selectedPresetTag))("drTooltip", ctx_r4.selectedPresetTag === tag_r5.key ? "Unselect preset" : "")("drTooltipPosition", "top");
     i0.ɵɵadvance(1);
-    i0.ɵɵtextInterpolate1(" ", tag_r6.label, " ");
+    i0.ɵɵtextInterpolate1(" ", tag_r5.label, " ");
 } }
-function DrFiscalMonthCalendarHeaderComponent_div_0_div_1_div_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 14);
-    i0.ɵɵtext(1, " Preset dates ");
-    i0.ɵɵtemplate(2, DrFiscalMonthCalendarHeaderComponent_div_0_div_1_div_2_div_2_Template, 2, 6, "div", 15);
-    i0.ɵɵelementEnd();
+const _c2$9 = function (a0) { return { "dr-datepicker-preset-date__tags--solo": a0 }; };
+function DrFiscalMonthCalendarHeaderComponent_div_0_div_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 11)(1, "div", 12);
+    i0.ɵɵtemplate(2, DrFiscalMonthCalendarHeaderComponent_div_0_div_1_div_2_Template, 2, 6, "div", 13);
+    i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const ctx_r3 = i0.ɵɵnextContext(3);
-    i0.ɵɵadvance(2);
-    i0.ɵɵproperty("ngForOf", ctx_r3.datePickerService.availableDateTagPresets);
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(1);
+    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(2, _c2$9, !ctx_r2.datePickerService.isUsingTimeFrameSelect));
+    i0.ɵɵadvance(1);
+    i0.ɵɵproperty("ngForOf", ctx_r2.datePickerService.availableDateTagPresets);
 } }
-function DrFiscalMonthCalendarHeaderComponent_div_0_div_1_dr_select_3_Template(rf, ctx) { if (rf & 1) {
-    const _r10 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "dr-select", 17);
-    i0.ɵɵlistener("ngModelChange", function DrFiscalMonthCalendarHeaderComponent_div_0_div_1_dr_select_3_Template_dr_select_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r10); const ctx_r9 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r9.setTimeframe($event)); });
+function DrFiscalMonthCalendarHeaderComponent_div_0_dr_select_2_Template(rf, ctx) { if (rf & 1) {
+    const _r9 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "dr-select", 15);
+    i0.ɵɵlistener("ngModelChange", function DrFiscalMonthCalendarHeaderComponent_div_0_dr_select_2_Template_dr_select_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r9); const ctx_r8 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r8.setTimeframe($event)); });
     i0.ɵɵpipe(1, "drShowTimeframePipe");
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r4 = i0.ɵɵnextContext(3);
-    i0.ɵɵproperty("ngModel", ctx_r4.selectedTimeframe)("items", i0.ɵɵpipeBind2(1, 2, ctx_r4.timeframeOptions, ctx_r4.datePickerService.availableTimeframes));
+    const ctx_r3 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("ngModel", ctx_r3.selectedTimeframe)("items", i0.ɵɵpipeBind2(1, 2, ctx_r3.timeframeOptions, ctx_r3.datePickerService.availableTimeframes));
 } }
-const _c2$9 = function (a0) { return { "dr-datepicker-preset-date__tags--solo": a0 }; };
-function DrFiscalMonthCalendarHeaderComponent_div_0_div_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 10)(1, "div", 11);
-    i0.ɵɵtemplate(2, DrFiscalMonthCalendarHeaderComponent_div_0_div_1_div_2_Template, 3, 1, "div", 12);
-    i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(3, DrFiscalMonthCalendarHeaderComponent_div_0_div_1_dr_select_3_Template, 2, 5, "dr-select", 13);
+function DrFiscalMonthCalendarHeaderComponent_div_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 8);
+    i0.ɵɵtemplate(1, DrFiscalMonthCalendarHeaderComponent_div_0_div_1_Template, 3, 4, "div", 9);
+    i0.ɵɵtemplate(2, DrFiscalMonthCalendarHeaderComponent_div_0_dr_select_2_Template, 2, 5, "dr-select", 10);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(2);
-    i0.ɵɵadvance(1);
-    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(3, _c2$9, ctx_r1.datePickerService.isUsingTimeFrameSelect));
+    const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵadvance(1);
-    i0.ɵɵproperty("ngIf", ctx_r1.datePickerService.availableDateTagPresets.length > 0);
+    i0.ɵɵproperty("ngIf", ctx_r0.datePickerService.isUsingDateTagPresets);
     i0.ɵɵadvance(1);
-    i0.ɵɵproperty("ngIf", ctx_r1.datePickerService.isUsingTimeFrameSelect);
+    i0.ɵɵproperty("ngIf", ctx_r0.datePickerService.isUsingTimeFrameSelect);
 } }
-function DrFiscalMonthCalendarHeaderComponent_div_0_div_12_div_2_Template(rf, ctx) { if (rf & 1) {
-    const _r15 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 21);
-    i0.ɵɵlistener("click", function DrFiscalMonthCalendarHeaderComponent_div_0_div_12_div_2_Template_div_click_0_listener() { const restoredCtx = i0.ɵɵrestoreView(_r15); const quarter_r13 = restoredCtx.$implicit; const ctx_r14 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r14.onSelectQuarter(quarter_r13)); });
+function DrFiscalMonthCalendarHeaderComponent_div_11_div_2_Template(rf, ctx) { if (rf & 1) {
+    const _r14 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 19);
+    i0.ɵɵlistener("click", function DrFiscalMonthCalendarHeaderComponent_div_11_div_2_Template_div_click_0_listener() { const restoredCtx = i0.ɵɵrestoreView(_r14); const quarter_r12 = restoredCtx.$implicit; const ctx_r13 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r13.onSelectQuarter(quarter_r12)); });
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const quarter_r13 = ctx.$implicit;
-    const ctx_r12 = i0.ɵɵnextContext(3);
-    i0.ɵɵclassMap(quarter_r13 === ctx_r12.selectedQuarter ? "selected" : "");
-    i0.ɵɵclassProp("quarter-selector--disabled", ctx_r12.isQuarterDisabled(quarter_r13));
+    const quarter_r12 = ctx.$implicit;
+    const ctx_r11 = i0.ɵɵnextContext(2);
+    i0.ɵɵclassMap(quarter_r12 === ctx_r11.selectedQuarter ? "selected" : "");
+    i0.ɵɵclassProp("quarter-selector--disabled", ctx_r11.isQuarterDisabled(quarter_r12));
     i0.ɵɵadvance(1);
-    i0.ɵɵtextInterpolate1(" Q", quarter_r13, " ");
+    i0.ɵɵtextInterpolate1(" Q", quarter_r12, " ");
 } }
-function DrFiscalMonthCalendarHeaderComponent_div_0_div_12_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 18, 19);
-    i0.ɵɵtemplate(2, DrFiscalMonthCalendarHeaderComponent_div_0_div_12_div_2_Template, 2, 5, "div", 20);
+function DrFiscalMonthCalendarHeaderComponent_div_11_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 16, 17);
+    i0.ɵɵtemplate(2, DrFiscalMonthCalendarHeaderComponent_div_11_div_2_Template, 2, 5, "div", 18);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext(2);
-    i0.ɵɵadvance(2);
-    i0.ɵɵproperty("ngForOf", ctx_r2.quarters);
-} }
-function DrFiscalMonthCalendarHeaderComponent_div_0_Template(rf, ctx) { if (rf & 1) {
-    const _r17 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 1);
-    i0.ɵɵtemplate(1, DrFiscalMonthCalendarHeaderComponent_div_0_div_1_Template, 4, 5, "div", 2);
-    i0.ɵɵelementStart(2, "div", 3)(3, "div", 4);
-    i0.ɵɵlistener("click", function DrFiscalMonthCalendarHeaderComponent_div_0_Template_div_click_3_listener() { i0.ɵɵrestoreView(_r17); const ctx_r16 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r16.pagingClicked(false)); });
-    i0.ɵɵelement(4, "i", 5);
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "span", 6)(6, "span", 7);
-    i0.ɵɵlistener("click", function DrFiscalMonthCalendarHeaderComponent_div_0_Template_span_click_6_listener() { i0.ɵɵrestoreView(_r17); const ctx_r18 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r18.switchViewOnClickOnPeriodLabel(ctx_r18.calendarView.FOR_MONTHS)); });
-    i0.ɵɵtext(7);
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(8, "span", 7);
-    i0.ɵɵlistener("click", function DrFiscalMonthCalendarHeaderComponent_div_0_Template_span_click_8_listener() { i0.ɵɵrestoreView(_r17); const ctx_r19 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r19.switchViewOnClickOnPeriodLabel(ctx_r19.calendarView.FOR_YEARS)); });
-    i0.ɵɵtext(9);
-    i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(10, "div", 4);
-    i0.ɵɵlistener("click", function DrFiscalMonthCalendarHeaderComponent_div_0_Template_div_click_10_listener() { i0.ɵɵrestoreView(_r17); const ctx_r20 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r20.pagingClicked(true)); });
-    i0.ɵɵelement(11, "i", 8);
-    i0.ɵɵelementEnd()();
-    i0.ɵɵtemplate(12, DrFiscalMonthCalendarHeaderComponent_div_0_div_12_Template, 3, 1, "div", 9);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext();
-    i0.ɵɵadvance(1);
-    i0.ɵɵproperty("ngIf", ctx_r0.datePickerService.isUsingDateTagPresets);
-    i0.ɵɵadvance(6);
-    i0.ɵɵtextInterpolate(ctx_r0.periodMonthLabel + " ");
+    const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(ctx_r0.periodYearLabel);
-    i0.ɵɵadvance(3);
-    i0.ɵɵproperty("ngIf", ctx_r0.currentViewIsQuarter);
+    i0.ɵɵproperty("ngForOf", ctx_r1.quarters);
 } }
 class DrFiscalMonthCalendarHeaderComponent extends DrDatePickerCustomHeaderComponent {
     ngOnInit() {
@@ -5078,15 +5031,38 @@ class DrFiscalMonthCalendarHeaderComponent extends DrDatePickerCustomHeaderCompo
         });
     }
     /** @nocollapse */ static { this.ɵfac = /** @pureOrBreakMyCode */ function () { let ɵDrFiscalMonthCalendarHeaderComponent_BaseFactory; return function DrFiscalMonthCalendarHeaderComponent_Factory(t) { return (ɵDrFiscalMonthCalendarHeaderComponent_BaseFactory || (ɵDrFiscalMonthCalendarHeaderComponent_BaseFactory = i0.ɵɵgetInheritedFactory(DrFiscalMonthCalendarHeaderComponent)))(t || DrFiscalMonthCalendarHeaderComponent); }; }(); }
-    /** @nocollapse */ static { this.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: DrFiscalMonthCalendarHeaderComponent, selectors: [["dr-fiscal-month-calendar-header", 8, "component"]], features: [i0.ɵɵInheritDefinitionFeature], attrs: _c0$A, decls: 1, vars: 1, consts: [["class", "dr-datepicker__timeframe-select__wrapper", 4, "ngIf"], [1, "dr-datepicker__timeframe-select__wrapper"], ["class", "dr-datepicker-preset-date", 4, "ngIf"], [1, "dr-date-paging"], [1, "dr-date-paging", "flip-page-button", 3, "click"], [1, "dr-icon-arrow-left", "presentation_buttons-navigate_input"], [1, "example-header-label"], [3, "click"], [1, "dr-icon-arrow-right", "presentation_buttons-navigate_input"], ["class", "dr-quarterly-datepicker", 4, "ngIf"], [1, "dr-datepicker-preset-date"], [1, "dr-datepicker-preset-date__tags", 3, "ngClass"], ["class", "dr-datepicker-preset-date__tags__title", 4, "ngIf"], ["class", "dr-datepicker__timeframe-select", "bindLabel", "title", "bindValue", "value", 3, "ngModel", "items", "ngModelChange", 4, "ngIf"], [1, "dr-datepicker-preset-date__tags__title"], ["id", "preset_tag", "class", "dr-datepicker-preset-date__tags__tag", 3, "ngClass", "drTooltip", "drTooltipPosition", "click", 4, "ngFor", "ngForOf"], ["id", "preset_tag", 1, "dr-datepicker-preset-date__tags__tag", 3, "ngClass", "drTooltip", "drTooltipPosition", "click"], ["bindLabel", "title", "bindValue", "value", 1, "dr-datepicker__timeframe-select", 3, "ngModel", "items", "ngModelChange"], [1, "dr-quarterly-datepicker"], ["quarterlyDatePicker", ""], ["class", "quarter-selector", 3, "class", "quarter-selector--disabled", "click", 4, "ngFor", "ngForOf"], [1, "quarter-selector", 3, "click"]], template: function DrFiscalMonthCalendarHeaderComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵtemplate(0, DrFiscalMonthCalendarHeaderComponent_div_0_Template, 13, 4, "div", 0);
+    /** @nocollapse */ static { this.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: DrFiscalMonthCalendarHeaderComponent, selectors: [["dr-fiscal-month-calendar-header", 8, "component"]], features: [i0.ɵɵInheritDefinitionFeature], attrs: _c0$A, decls: 12, vars: 4, consts: [["class", "dr-datepicker__timeframe-select__wrapper", 4, "ngIf"], [1, "dr-date-paging"], [1, "dr-date-paging", "flip-page-button", 3, "click"], [1, "dr-icon-arrow-left", "presentation_buttons-navigate_input"], [1, "example-header-label"], [3, "click"], [1, "dr-icon-arrow-right", "presentation_buttons-navigate_input"], ["class", "dr-quarterly-datepicker", 4, "ngIf"], [1, "dr-datepicker__timeframe-select__wrapper"], ["class", "dr-datepicker-preset-date", 4, "ngIf"], ["class", "dr-datepicker__timeframe-select", "bindLabel", "title", "bindValue", "value", 3, "ngModel", "items", "ngModelChange", 4, "ngIf"], [1, "dr-datepicker-preset-date"], [1, "dr-datepicker-preset-date__tags", 3, "ngClass"], ["id", "preset_tag", "class", "dr-datepicker-preset-date__tags__tag", 3, "ngClass", "drTooltip", "drTooltipPosition", "click", 4, "ngFor", "ngForOf"], ["id", "preset_tag", 1, "dr-datepicker-preset-date__tags__tag", 3, "ngClass", "drTooltip", "drTooltipPosition", "click"], ["bindLabel", "title", "bindValue", "value", 1, "dr-datepicker__timeframe-select", 3, "ngModel", "items", "ngModelChange"], [1, "dr-quarterly-datepicker"], ["quarterlyDatePicker", ""], ["class", "quarter-selector", 3, "class", "quarter-selector--disabled", "click", 4, "ngFor", "ngForOf"], [1, "quarter-selector", 3, "click"]], template: function DrFiscalMonthCalendarHeaderComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵtemplate(0, DrFiscalMonthCalendarHeaderComponent_div_0_Template, 3, 2, "div", 0);
+            i0.ɵɵelementStart(1, "div", 1)(2, "div", 2);
+            i0.ɵɵlistener("click", function DrFiscalMonthCalendarHeaderComponent_Template_div_click_2_listener() { return ctx.pagingClicked(false); });
+            i0.ɵɵelement(3, "i", 3);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(4, "span", 4)(5, "span", 5);
+            i0.ɵɵlistener("click", function DrFiscalMonthCalendarHeaderComponent_Template_span_click_5_listener() { return ctx.switchViewOnClickOnPeriodLabel(ctx.calendarView.FOR_MONTHS); });
+            i0.ɵɵtext(6);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(7, "span", 5);
+            i0.ɵɵlistener("click", function DrFiscalMonthCalendarHeaderComponent_Template_span_click_7_listener() { return ctx.switchViewOnClickOnPeriodLabel(ctx.calendarView.FOR_YEARS); });
+            i0.ɵɵtext(8);
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(9, "div", 2);
+            i0.ɵɵlistener("click", function DrFiscalMonthCalendarHeaderComponent_Template_div_click_9_listener() { return ctx.pagingClicked(true); });
+            i0.ɵɵelement(10, "i", 6);
+            i0.ɵɵelementEnd()();
+            i0.ɵɵtemplate(11, DrFiscalMonthCalendarHeaderComponent_div_11_Template, 3, 1, "div", 7);
         } if (rf & 2) {
             i0.ɵɵproperty("ngIf", ctx.datePickerService.isTimeframeSelectionEnabled);
+            i0.ɵɵadvance(6);
+            i0.ɵɵtextInterpolate(ctx.periodMonthLabel + " ");
+            i0.ɵɵadvance(2);
+            i0.ɵɵtextInterpolate(ctx.periodYearLabel);
+            i0.ɵɵadvance(3);
+            i0.ɵɵproperty("ngIf", ctx.currentViewIsQuarter);
         } }, dependencies: [i1$2.NgControlStatus, i1$2.NgModel, i1.NgClass, i1.NgForOf, i1.NgIf, DrTooltipDirective, DrSelectComponent, DrShowTimeframePipe], styles: ["[_nghost-%COMP%]{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[_ngcontent-%COMP%]{background-color:#f9faff;padding:16px 32px;border-radius:18px 18px 0 0}.dr-datepicker-preset-date[_ngcontent-%COMP%]{display:flex;flex-direction:column}.dr-datepicker-preset-date__tags[_ngcontent-%COMP%]{display:flex;padding-bottom:21px;padding-top:10px;font-size:12px}.dr-datepicker-preset-date__tags--solo[_ngcontent-%COMP%]{padding:16px 32px;gap:16px;justify-content:center}.dr-datepicker-preset-date__tags--solo[_ngcontent-%COMP%]   .dr-datepicker-preset-date__tags__tag[_ngcontent-%COMP%]{padding:4px 8px;justify-content:center;display:flex;flex:1 0 0}.dr-datepicker-preset-date__tags__tag[_ngcontent-%COMP%]{cursor:pointer;font-weight:400;line-height:20px!important;padding:2px 8px;border:1px solid #9ea1aa;border-radius:18px;background:#fff;margin-right:4px}.dr-datepicker-preset-date__tags__tag--selected[_ngcontent-%COMP%]{color:#4646ce;background:#f2f2fb;border:1px solid #4646ce}.dr-date-paging[_ngcontent-%COMP%]{display:flex;flex-direction:row;justify-content:space-between;align-items:center;padding:16px 32px 32px;gap:4px}.dr-date-paging.flip-page-button[_ngcontent-%COMP%]{width:20px;height:20px;padding:0;color:#4e566c}.dr-date-paging.flip-page-button[_ngcontent-%COMP%]:hover{border-radius:50%;background:#f2f2fb;color:#4646ce}.example-header-label[_ngcontent-%COMP%]{cursor:pointer}.dr-quarterly-datepicker[_ngcontent-%COMP%]{display:flex;justify-content:space-between;padding:10px}.dr-quarterly-datepicker[_ngcontent-%COMP%]   .quarter-selector[_ngcontent-%COMP%]{display:block;width:74px;height:40px;text-align:center;border-radius:40px;font-weight:400;padding-top:9px}.dr-quarterly-datepicker[_ngcontent-%COMP%]   .quarter-selector[_ngcontent-%COMP%]:hover{background:#f2f2fb;color:#4646ce;font-weight:600;cursor:pointer}.dr-quarterly-datepicker[_ngcontent-%COMP%]   .quarter-selector.selected[_ngcontent-%COMP%]{background-color:#4646ce;color:#f3f7ff;font-weight:600}.dr-quarterly-datepicker[_ngcontent-%COMP%]   .quarter-selector--disabled[_ngcontent-%COMP%], .dr-quarterly-datepicker[_ngcontent-%COMP%]   .quarter-selector--disabled.selected[_ngcontent-%COMP%]{pointer-events:none;background-color:transparent;color:#aeabac;font-weight:400}"], changeDetection: 0 }); }
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DrFiscalMonthCalendarHeaderComponent, [{
         type: Component,
-        args: [{ selector: 'dr-fiscal-month-calendar-header.component', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div *ngIf=\"datePickerService.isTimeframeSelectionEnabled\" class=\"dr-datepicker__timeframe-select__wrapper\">\n    <div *ngIf=\"datePickerService.isUsingDateTagPresets\" class=\"dr-datepicker-preset-date\">\n        <div class=\"dr-datepicker-preset-date__tags\"\n             [ngClass]=\"{ 'dr-datepicker-preset-date__tags--solo': datePickerService.isUsingTimeFrameSelect }\">\n            <div\n                *ngIf=\"datePickerService.availableDateTagPresets.length > 0\"\n                class=\"dr-datepicker-preset-date__tags__title\">\n                Preset dates\n            <div\n                *ngFor=\"let tag of datePickerService.availableDateTagPresets\"\n                id=\"preset_tag\"\n                class=\"dr-datepicker-preset-date__tags__tag\"\n                (click)=\"onSelectPresetTag(tag)\"\n                [ngClass]=\"{ 'dr-datepicker-preset-date__tags__tag--selected': tag.key === selectedPresetTag }\"\n                [drTooltip]=\"selectedPresetTag === tag.key ? 'Unselect preset' : ''\"\n                [drTooltipPosition]=\"'top'\">\n                {{ tag.label }}\n            </div>\n        </div>\n    </div>\n    <dr-select\n        *ngIf=\"datePickerService.isUsingTimeFrameSelect\"\n        class=\"dr-datepicker__timeframe-select\"\n        [ngModel]=\"selectedTimeframe\"\n        [items]=\"timeframeOptions | drShowTimeframePipe: datePickerService.availableTimeframes\"\n        bindLabel=\"title\"\n        bindValue=\"value\"\n        (ngModelChange)=\"setTimeframe($event)\">\n    </dr-select>\n</div>\n\n<div class=\"dr-date-paging\">\n    <div class=\"dr-date-paging flip-page-button\" (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\" (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\n        *ngFor=\"let quarter of quarters\"\n        class=\"quarter-selector\"\n        (click)=\"onSelectQuarter(quarter)\"\n        [class]=\"quarter === selectedQuarter ? 'selected' : ''\"\n        [class.quarter-selector--disabled]=\"isQuarterDisabled(quarter)\">\n        Q{{ quarter }}\n    </div>\n</div>\n", styles: [":host{height:54px;align-items:center;font-family:Poppins;font-style:normal;font-weight:600;font-size:14px;line-height:22px}.dr-datepicker__timeframe-select__wrapper{background-color:#f9faff;padding:16px 32px;border-radius:18px 18px 0 0}.dr-datepicker-preset-date{display:flex;flex-direction:column}.dr-datepicker-preset-date__tags{display:flex;padding-bottom:21px;padding-top:10px;font-size:12px}.dr-datepicker-preset-date__tags--solo{padding:16px 32px;gap:16px;justify-content:center}.dr-datepicker-preset-date__tags--solo .dr-datepicker-preset-date__tags__tag{padding:4px 8px;justify-content:center;display:flex;flex:1 0 0}.dr-datepicker-preset-date__tags__tag{cursor:pointer;font-weight:400;line-height:20px!important;padding:2px 8px;border:1px solid #9ea1aa;border-radius:18px;background:#fff;margin-right:4px}.dr-datepicker-preset-date__tags__tag--selected{color:#4646ce;background:#f2f2fb;border:1px solid #4646ce}.dr-date-paging{display:flex;flex-direction:row;justify-content:space-between;align-items:center;padding:16px 32px 32px;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}.dr-quarterly-datepicker .quarter-selector--disabled,.dr-quarterly-datepicker .quarter-selector--disabled.selected{pointer-events:none;background-color:transparent;color:#aeabac;font-weight:400}\n"] }]
+        args: [{ selector: 'dr-fiscal-month-calendar-header.component', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div *ngIf=\"datePickerService.isTimeframeSelectionEnabled\" class=\"dr-datepicker__timeframe-select__wrapper\">\n    <div *ngIf=\"datePickerService.isUsingDateTagPresets\" class=\"dr-datepicker-preset-date\">\n        <div class=\"dr-datepicker-preset-date__tags\"\n             [ngClass]=\"{ 'dr-datepicker-preset-date__tags--solo': !datePickerService.isUsingTimeFrameSelect }\">\n            <div\n                *ngFor=\"let tag of datePickerService.availableDateTagPresets\"\n                id=\"preset_tag\"\n                class=\"dr-datepicker-preset-date__tags__tag\"\n                (click)=\"onSelectPresetTag(tag)\"\n                [ngClass]=\"{ 'dr-datepicker-preset-date__tags__tag--selected': tag.key === selectedPresetTag }\"\n                [drTooltip]=\"selectedPresetTag === tag.key ? 'Unselect preset' : ''\"\n                [drTooltipPosition]=\"'top'\">\n                {{ tag.label }}\n            </div>\n        </div>\n    </div>\n    <dr-select\n        *ngIf=\"datePickerService.isUsingTimeFrameSelect\"\n        class=\"dr-datepicker__timeframe-select\"\n        [ngModel]=\"selectedTimeframe\"\n        [items]=\"timeframeOptions | drShowTimeframePipe: datePickerService.availableTimeframes\"\n        bindLabel=\"title\"\n        bindValue=\"value\"\n        (ngModelChange)=\"setTimeframe($event)\">\n    </dr-select>\n</div>\n\n<div class=\"dr-date-paging\">\n    <div class=\"dr-date-paging flip-page-button\" (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\" (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\n        *ngFor=\"let quarter of quarters\"\n        class=\"quarter-selector\"\n        (click)=\"onSelectQuarter(quarter)\"\n        [class]=\"quarter === selectedQuarter ? 'selected' : ''\"\n        [class.quarter-selector--disabled]=\"isQuarterDisabled(quarter)\">\n        Q{{ quarter }}\n    </div>\n</div>\n", styles: [":host{height:54px;align-items:center;font-family:Poppins;font-style:normal;font-weight:600;font-size:14px;line-height:22px}.dr-datepicker__timeframe-select__wrapper{background-color:#f9faff;padding:16px 32px;border-radius:18px 18px 0 0}.dr-datepicker-preset-date{display:flex;flex-direction:column}.dr-datepicker-preset-date__tags{display:flex;padding-bottom:21px;padding-top:10px;font-size:12px}.dr-datepicker-preset-date__tags--solo{padding:16px 32px;gap:16px;justify-content:center}.dr-datepicker-preset-date__tags--solo .dr-datepicker-preset-date__tags__tag{padding:4px 8px;justify-content:center;display:flex;flex:1 0 0}.dr-datepicker-preset-date__tags__tag{cursor:pointer;font-weight:400;line-height:20px!important;padding:2px 8px;border:1px solid #9ea1aa;border-radius:18px;background:#fff;margin-right:4px}.dr-datepicker-preset-date__tags__tag--selected{color:#4646ce;background:#f2f2fb;border:1px solid #4646ce}.dr-date-paging{display:flex;flex-direction:row;justify-content:space-between;align-items:center;padding:16px 32px 32px;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}.dr-quarterly-datepicker .quarter-selector--disabled,.dr-quarterly-datepicker .quarter-selector--disabled.selected{pointer-events:none;background-color:transparent;color:#aeabac;font-weight:400}\n"] }]
     }], null, null); })();
 
 function DrFiscalMonthCalendarPickerComponent_i_0_Template(rf, ctx) { if (rf & 1) {