@datarailsshared/datarailsshared 1.6.161 → 1.6.165

package/fesm2022/datarailsshared-datarailsshared.mjs

@@ -12,10 +12,10 @@ import { NG_VALUE_ACCESSOR, FormBuilder, FormsModule, ReactiveFormsModule, FormG
 import { Observable, BehaviorSubject, distinctUntilChanged, Subject, startWith, takeUntil, noop as noop$3, combineLatest, from, merge as merge$1, fromEvent, map as map$2, filter as filter$1, switchMap as switchMap$1, observeOn, asyncScheduler, withLatestFrom, first as first$1, interval, throwError, finalize as finalize$1, tap as tap$1, defer, firstValueFrom, throttleTime } from 'rxjs';
 import * as _ from 'lodash';
 import { isNil, isObject, cloneDeep, find, indexOf, reduce, map as map$1, isNumber, merge, forEach, some, isEqual, orderBy, filter as filter$2, includes, pull, concat, isString, isBoolean, keys } from 'lodash';
+import { transition, style, animate, trigger, state } from '@angular/animations';
 import { skip, debounceTime, filter, distinctUntilChanged as distinctUntilChanged$1, takeUntil as takeUntil$1, startWith as startWith$1, map, tap, shareReplay, switchMap, first, catchError, finalize, take } from 'rxjs/operators';
 import * as i6 from '@angular/material/datepicker';
 import { MatCalendar, DateRange, MAT_DATE_RANGE_SELECTION_STRATEGY, MatDatepickerModule } from '@angular/material/datepicker';
-import { transition, style, animate, trigger, state } from '@angular/animations';
 import * as i1$1 from '@angular/cdk/overlay';
 import { OverlayConfig } from '@angular/cdk/overlay';
 import * as i4 from '@angular/cdk/portal';
@@ -236,6 +236,103 @@ class DrSharedUtils {
     }; }
 }
 
+const POPUP_POSITIONS = {
+    top: {
+        originX: 'center',
+        originY: 'top',
+        overlayX: 'center',
+        overlayY: 'bottom',
+        offsetY: -8,
+    },
+    'top-left': {
+        originX: 'start',
+        originY: 'top',
+        overlayX: 'start',
+        overlayY: 'bottom',
+        offsetY: -8,
+    },
+    'top-right': {
+        originX: 'end',
+        originY: 'top',
+        overlayX: 'end',
+        overlayY: 'bottom',
+        offsetY: -8,
+    },
+    bottom: {
+        originX: 'center',
+        originY: 'bottom',
+        overlayX: 'center',
+        overlayY: 'top',
+        offsetY: 7,
+    },
+    'bottom-left': {
+        originX: 'start',
+        originY: 'bottom',
+        overlayX: 'start',
+        overlayY: 'top',
+        offsetY: 7,
+    },
+    'bottom-right': {
+        originX: 'end',
+        originY: 'bottom',
+        overlayX: 'end',
+        overlayY: 'top',
+        offsetY: 7,
+    },
+    left: {
+        originX: 'start',
+        originY: 'center',
+        overlayX: 'end',
+        overlayY: 'center',
+        offsetX: -8,
+    },
+    'left-top': {
+        originX: 'start',
+        originY: 'top',
+        overlayX: 'end',
+        overlayY: 'top',
+        offsetX: -8,
+    },
+    'left-bottom': {
+        originX: 'start',
+        originY: 'bottom',
+        overlayX: 'end',
+        overlayY: 'bottom',
+        offsetX: -8,
+    },
+    right: {
+        originX: 'end',
+        originY: 'center',
+        overlayX: 'start',
+        overlayY: 'center',
+        offsetX: 8,
+    },
+    'right-top': {
+        originX: 'end',
+        originY: 'top',
+        overlayX: 'start',
+        overlayY: 'top',
+        offsetX: 8,
+    },
+    'right-bottom': {
+        originX: 'end',
+        originY: 'bottom',
+        overlayX: 'start',
+        overlayY: 'bottom',
+        offsetX: 8,
+    },
+};
+const POPUP_ANIMATION = [
+    transition(':enter', [style({ opacity: 0 }), animate(150, style({ opacity: 1 }))]),
+    transition(':leave', [animate(150, style({ opacity: 0 }))]),
+];
+const PRESET_TAGS_LIST = [
+    { key: DateTags.TODAY, label: 'Today' },
+    { key: DateTags.YESTERDAY, label: 'Yesterday' },
+    { key: DateTags.THIS_MONTH, label: 'This month' },
+    { key: DateTags.PREV_MONTH, label: 'Prev month' },
+];
+
 class DrDatePickerService {
     constructor() {
         this.isTimeframeSelectionEnabled = false;
@@ -248,10 +345,12 @@ class DrDatePickerService {
         this.updatedQuarter$ = new Subject();
         this.weekSelectionChange$ = new Subject();
         this.updatedDateAndClose$ = new Subject();
+        this.isUsingTimeFrameSelect = true;
         this.presetTag$ = new BehaviorSubject('');
         this.onSameDaySelectedInCalendar$ = new Subject();
         this.keepPresetTag = false;
         this.isValueUpdating = false;
+        this.availableDateTagPresets = PRESET_TAGS_LIST;
         this.availableTimeframes = [
             TimeframeOption.DAY,
             TimeframeOption.WEEK,
@@ -454,103 +553,6 @@ class DrDatePickerService {
         type: Injectable
     }], null, null); })();
 
-const POPUP_POSITIONS = {
-    top: {
-        originX: 'center',
-        originY: 'top',
-        overlayX: 'center',
-        overlayY: 'bottom',
-        offsetY: -8,
-    },
-    'top-left': {
-        originX: 'start',
-        originY: 'top',
-        overlayX: 'start',
-        overlayY: 'bottom',
-        offsetY: -8,
-    },
-    'top-right': {
-        originX: 'end',
-        originY: 'top',
-        overlayX: 'end',
-        overlayY: 'bottom',
-        offsetY: -8,
-    },
-    bottom: {
-        originX: 'center',
-        originY: 'bottom',
-        overlayX: 'center',
-        overlayY: 'top',
-        offsetY: 7,
-    },
-    'bottom-left': {
-        originX: 'start',
-        originY: 'bottom',
-        overlayX: 'start',
-        overlayY: 'top',
-        offsetY: 7,
-    },
-    'bottom-right': {
-        originX: 'end',
-        originY: 'bottom',
-        overlayX: 'end',
-        overlayY: 'top',
-        offsetY: 7,
-    },
-    left: {
-        originX: 'start',
-        originY: 'center',
-        overlayX: 'end',
-        overlayY: 'center',
-        offsetX: -8,
-    },
-    'left-top': {
-        originX: 'start',
-        originY: 'top',
-        overlayX: 'end',
-        overlayY: 'top',
-        offsetX: -8,
-    },
-    'left-bottom': {
-        originX: 'start',
-        originY: 'bottom',
-        overlayX: 'end',
-        overlayY: 'bottom',
-        offsetX: -8,
-    },
-    right: {
-        originX: 'end',
-        originY: 'center',
-        overlayX: 'start',
-        overlayY: 'center',
-        offsetX: 8,
-    },
-    'right-top': {
-        originX: 'end',
-        originY: 'top',
-        overlayX: 'start',
-        overlayY: 'top',
-        offsetX: 8,
-    },
-    'right-bottom': {
-        originX: 'end',
-        originY: 'bottom',
-        overlayX: 'start',
-        overlayY: 'bottom',
-        offsetX: 8,
-    },
-};
-const POPUP_ANIMATION = [
-    transition(':enter', [style({ opacity: 0 }), animate(150, style({ opacity: 1 }))]),
-    transition(':leave', [animate(150, style({ opacity: 0 }))]),
-];
-const PRESET_TAGS_LIST = [
-    { key: DateTags.TODAY, label: 'Today' },
-    { key: DateTags.YESTERDAY, label: 'Yesterday' },
-    { key: DateTags.THIS_MONTH, label: 'This month' },
-    { key: DateTags.PREV_MONTH, label: 'Prev month' },
-];
-
 function WeekSelectorComponent_div_4_Template(rf, ctx) { if (rf & 1) {
     const _r3 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "div", 5);
@@ -1063,7 +1065,7 @@ class DrModelDebounceChangeDirective {
 
 const _c0$K = ["prefix"];
 const _c1$k = ["suffix"];
-const _c2$a = ["inputRef"];
+const _c2$c = ["inputRef"];
 function DrInputComponent_ng_container_1_Template(rf, ctx) { if (rf & 1) {
     const _r8 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementContainerStart(0);
@@ -1281,7 +1283,7 @@ class DrInputComponent {
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.prefixIcon = _t.first);
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.suffixIcon = _t.first);
         } }, viewQuery: function DrInputComponent_Query(rf, ctx) { if (rf & 1) {
-            i0.ɵɵviewQuery(_c2$a, 5);
+            i0.ɵɵviewQuery(_c2$c, 5);
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.inputElement = _t.first);
@@ -1400,7 +1402,7 @@ class DrInputComponent {
 
 const _c0$J = ["labelTemplate"];
 const _c1$j = ["multiLabelTemplate"];
-const _c2$9 = ["optionTemplate"];
+const _c2$b = ["optionTemplate"];
 const _c3$6 = ["optionHeaderTemplate"];
 const _c4$4 = ["optionFooterTemplate"];
 const _c5$3 = function (a0) { return { item: a0 }; };
@@ -1648,7 +1650,7 @@ class DrSelectComponent {
     /** @nocollapse */ static { this.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: DrSelectComponent, selectors: [["dr-select"]], contentQueries: function DrSelectComponent_ContentQueries(rf, ctx, dirIndex) { if (rf & 1) {
             i0.ɵɵcontentQuery(dirIndex, _c0$J, 5);
             i0.ɵɵcontentQuery(dirIndex, _c1$j, 5);
-            i0.ɵɵcontentQuery(dirIndex, _c2$9, 5);
+            i0.ɵɵcontentQuery(dirIndex, _c2$b, 5);
             i0.ɵɵcontentQuery(dirIndex, _c3$6, 5);
             i0.ɵɵcontentQuery(dirIndex, _c4$4, 5);
         } if (rf & 2) {
@@ -1848,65 +1850,110 @@ 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_Template(rf, ctx) { if (rf & 1) {
-    const _r6 = 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(_r6); const tag_r4 = restoredCtx.$implicit; const ctx_r5 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r5.onSelectPresetTag(tag_r4)); });
+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)); });
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const tag_r4 = ctx.$implicit;
-    const ctx_r3 = i0.ɵɵnextContext(3);
-    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(4, _c1$i, tag_r4.key === ctx_r3.selectedPresetTag))("drTooltip", ctx_r3.selectedPresetTag === tag_r4.key ? "Unselect preset" : "")("drTooltipPosition", "top");
+    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");
     i0.ɵɵadvance(1);
-    i0.ɵɵtextInterpolate1(" ", tag_r4.label, " ");
+    i0.ɵɵtextInterpolate1(" ", tag_r6.label, " ");
 } }
-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()();
+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();
 } if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext(2);
+    const ctx_r3 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("ngForOf", ctx_r2.presetTagList);
+    i0.ɵɵproperty("ngForOf", ctx_r3.datePickerService.availableDateTagPresets);
 } }
-function DrDatePickerCustomHeaderComponent_div_0_Template(rf, ctx) { if (rf & 1) {
-    const _r8 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 8);
-    i0.ɵɵtemplate(1, DrDatePickerCustomHeaderComponent_div_0_div_1_Template, 3, 1, "div", 9);
-    i0.ɵɵelementStart(2, "dr-select", 10);
-    i0.ɵɵlistener("ngModelChange", function DrDatePickerCustomHeaderComponent_div_0_Template_dr_select_ngModelChange_2_listener($event) { i0.ɵɵrestoreView(_r8); const ctx_r7 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r7.setTimeframe($event)); });
-    i0.ɵɵpipe(3, "drShowTimeframePipe");
-    i0.ɵɵelementEnd()();
+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)); });
+    i0.ɵɵpipe(1, "drShowTimeframePipe");
+    i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext();
+    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 _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);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance(1);
-    i0.ɵɵproperty("ngIf", ctx_r0.datePickerService.isUsingDateTagPresets);
+    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(3, _c2$a, ctx_r1.datePickerService.isUsingTimeFrameSelect));
+    i0.ɵɵadvance(1);
+    i0.ɵɵproperty("ngIf", ctx_r1.datePickerService.availableDateTagPresets.length > 0);
     i0.ɵɵadvance(1);
-    i0.ɵɵproperty("ngModel", ctx_r0.selectedTimeframe)("items", i0.ɵɵpipeBind2(3, 3, ctx_r0.timeframeOptions, ctx_r0.datePickerService.availableTimeframes));
+    i0.ɵɵproperty("ngIf", ctx_r1.datePickerService.isUsingTimeFrameSelect);
 } }
-function DrDatePickerCustomHeaderComponent_div_11_div_2_Template(rf, ctx) { if (rf & 1) {
-    const _r13 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 18);
-    i0.ɵɵlistener("click", function DrDatePickerCustomHeaderComponent_div_11_div_2_Template_div_click_0_listener() { const restoredCtx = i0.ɵɵrestoreView(_r13); const quarter_r11 = restoredCtx.$implicit; const ctx_r12 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r12.onSelectQuarter(quarter_r11)); });
+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)); });
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const quarter_r11 = ctx.$implicit;
-    const ctx_r10 = i0.ɵɵnextContext(2);
-    i0.ɵɵclassMap(quarter_r11 === ctx_r10.selectedQuarter ? "selected" : "");
-    i0.ɵɵclassProp("quarter-selector--disabled", ctx_r10.isQuarterDisabled(quarter_r11));
+    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));
     i0.ɵɵadvance(1);
-    i0.ɵɵtextInterpolate1(" Q", quarter_r11, " ");
+    i0.ɵɵtextInterpolate1(" Q", quarter_r13, " ");
 } }
-function DrDatePickerCustomHeaderComponent_div_11_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 15, 16);
-    i0.ɵɵtemplate(2, DrDatePickerCustomHeaderComponent_div_11_div_2_Template, 2, 5, "div", 17);
+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);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext();
+    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 + " ");
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("ngForOf", ctx_r1.quarters);
+    i0.ɵɵtextInterpolate(ctx_r0.periodYearLabel);
+    i0.ɵɵadvance(3);
+    i0.ɵɵproperty("ngIf", ctx_r0.currentViewIsQuarter);
 } }
 class DrDatePickerCustomHeaderComponent {
     get selectedPresetTag() {
@@ -1974,7 +2021,6 @@ class DrDatePickerCustomHeaderComponent {
         this.timeframeSelection = false;
         this.periodMonthLabel = '';
         this.periodYearLabel = '';
-        this.presetTagList = PRESET_TAGS_LIST;
         this.calendarView = CalendarView;
         this.cfr = inject(ComponentFactoryResolver);
         this.injector = inject(Injector);
@@ -2122,38 +2168,15 @@ 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: 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"], ["bindLabel", "title", "bindValue", "value", 1, "dr-datepicker__timeframe-select", 3, "ngModel", "items", "ngModelChange"], [1, "dr-datepicker-preset-date"], [1, "dr-datepicker-preset-date__tags"], ["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"], [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, 4, 6, "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);
+    /** @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);
         } 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__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 }); }
+        } }, 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            <div\n                *ngFor=\"let tag of presetTagList\"\n                id=\"preset_tag\"\n                class=\"dr-datepicker-preset-date__tags__tag\"\n                (click)=\"onSelectPresetTag(tag)\"\n                [ngClass]=\"{ 'dr-datepicker-preset-date__tags__tag--selected': tag.key === selectedPresetTag }\"\n                [drTooltip]=\"selectedPresetTag === tag.key ? 'Unselect preset' : ''\"\n                [drTooltipPosition]=\"'top'\">\n                {{ tag.label }}\n            </div>\n        </div>\n    </div>\n    <dr-select\n        class=\"dr-datepicker__timeframe-select\"\n        [ngModel]=\"selectedTimeframe\"\n        [items]=\"timeframeOptions | drShowTimeframePipe: datePickerService.availableTimeframes\"\n        bindLabel=\"title\"\n        bindValue=\"value\"\n        (ngModelChange)=\"setTimeframe($event)\">\n    </dr-select>\n</div>\n\n<div class=\"dr-date-paging\">\n    <div class=\"dr-date-paging flip-page-button\" (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__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                *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"] }]
     }], function () { return [{ type: i6.MatCalendar }, { type: i1$4.DateAdapter }, { type: CustomDateFormat, decorators: [{
                 type: Inject,
                 args: [MAT_DATE_FORMATS]
@@ -4919,65 +4942,110 @@ 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_Template(rf, ctx) { if (rf & 1) {
-    const _r6 = 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(_r6); const tag_r4 = restoredCtx.$implicit; const ctx_r5 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r5.onSelectPresetTag(tag_r4)); });
+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)); });
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const tag_r4 = ctx.$implicit;
-    const ctx_r3 = i0.ɵɵnextContext(3);
-    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(4, _c1$f, tag_r4.key === ctx_r3.selectedPresetTag))("drTooltip", ctx_r3.selectedPresetTag === tag_r4.key ? "Unselect preset" : "")("drTooltipPosition", "top");
+    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");
     i0.ɵɵadvance(1);
-    i0.ɵɵtextInterpolate1(" ", tag_r4.label, " ");
+    i0.ɵɵtextInterpolate1(" ", tag_r6.label, " ");
 } }
-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()();
+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();
 } if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext(2);
+    const ctx_r3 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("ngForOf", ctx_r2.presetTagList);
+    i0.ɵɵproperty("ngForOf", ctx_r3.datePickerService.availableDateTagPresets);
 } }
-function DrFiscalMonthCalendarHeaderComponent_div_0_Template(rf, ctx) { if (rf & 1) {
-    const _r8 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 8);
-    i0.ɵɵtemplate(1, DrFiscalMonthCalendarHeaderComponent_div_0_div_1_Template, 3, 1, "div", 9);
-    i0.ɵɵelementStart(2, "dr-select", 10);
-    i0.ɵɵlistener("ngModelChange", function DrFiscalMonthCalendarHeaderComponent_div_0_Template_dr_select_ngModelChange_2_listener($event) { i0.ɵɵrestoreView(_r8); const ctx_r7 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r7.setTimeframe($event)); });
-    i0.ɵɵpipe(3, "drShowTimeframePipe");
-    i0.ɵɵelementEnd()();
+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)); });
+    i0.ɵɵpipe(1, "drShowTimeframePipe");
+    i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext();
+    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 _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);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance(1);
-    i0.ɵɵproperty("ngIf", ctx_r0.datePickerService.isUsingDateTagPresets);
+    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(3, _c2$9, ctx_r1.datePickerService.isUsingTimeFrameSelect));
+    i0.ɵɵadvance(1);
+    i0.ɵɵproperty("ngIf", ctx_r1.datePickerService.availableDateTagPresets.length > 0);
     i0.ɵɵadvance(1);
-    i0.ɵɵproperty("ngModel", ctx_r0.selectedTimeframe)("items", i0.ɵɵpipeBind2(3, 3, ctx_r0.timeframeOptions, ctx_r0.datePickerService.availableTimeframes));
+    i0.ɵɵproperty("ngIf", ctx_r1.datePickerService.isUsingTimeFrameSelect);
 } }
-function DrFiscalMonthCalendarHeaderComponent_div_11_div_2_Template(rf, ctx) { if (rf & 1) {
-    const _r13 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 18);
-    i0.ɵɵlistener("click", function DrFiscalMonthCalendarHeaderComponent_div_11_div_2_Template_div_click_0_listener() { const restoredCtx = i0.ɵɵrestoreView(_r13); const quarter_r11 = restoredCtx.$implicit; const ctx_r12 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r12.onSelectQuarter(quarter_r11)); });
+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)); });
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const quarter_r11 = ctx.$implicit;
-    const ctx_r10 = i0.ɵɵnextContext(2);
-    i0.ɵɵclassMap(quarter_r11 === ctx_r10.selectedQuarter ? "selected" : "");
-    i0.ɵɵclassProp("quarter-selector--disabled", ctx_r10.isQuarterDisabled(quarter_r11));
+    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));
     i0.ɵɵadvance(1);
-    i0.ɵɵtextInterpolate1(" Q", quarter_r11, " ");
+    i0.ɵɵtextInterpolate1(" Q", quarter_r13, " ");
 } }
-function DrFiscalMonthCalendarHeaderComponent_div_11_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 15, 16);
-    i0.ɵɵtemplate(2, DrFiscalMonthCalendarHeaderComponent_div_11_div_2_Template, 2, 5, "div", 17);
+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);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext();
+    const ctx_r2 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("ngForOf", ctx_r1.quarters);
+    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 + " ");
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(ctx_r0.periodYearLabel);
+    i0.ɵɵadvance(3);
+    i0.ɵɵproperty("ngIf", ctx_r0.currentViewIsQuarter);
 } }
 class DrFiscalMonthCalendarHeaderComponent extends DrDatePickerCustomHeaderComponent {
     ngOnInit() {
@@ -5010,38 +5078,15 @@ 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: 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"], ["bindLabel", "title", "bindValue", "value", 1, "dr-datepicker__timeframe-select", 3, "ngModel", "items", "ngModelChange"], [1, "dr-datepicker-preset-date"], [1, "dr-datepicker-preset-date__tags"], ["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"], [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, 4, 6, "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);
+    /** @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);
         } 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__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 }); }
+        } }, 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            <div\n                *ngFor=\"let tag of presetTagList\"\n                id=\"preset_tag\"\n                class=\"dr-datepicker-preset-date__tags__tag\"\n                (click)=\"onSelectPresetTag(tag)\"\n                [ngClass]=\"{ 'dr-datepicker-preset-date__tags__tag--selected': tag.key === selectedPresetTag }\"\n                [drTooltip]=\"selectedPresetTag === tag.key ? 'Unselect preset' : ''\"\n                [drTooltipPosition]=\"'top'\">\n                {{ tag.label }}\n            </div>\n        </div>\n    </div>\n    <dr-select\n        class=\"dr-datepicker__timeframe-select\"\n        [ngModel]=\"selectedTimeframe\"\n        [items]=\"timeframeOptions | drShowTimeframePipe: datePickerService.availableTimeframes\"\n        bindLabel=\"title\"\n        bindValue=\"value\"\n        (ngModelChange)=\"setTimeframe($event)\">\n    </dr-select>\n</div>\n\n<div class=\"dr-date-paging\">\n    <div class=\"dr-date-paging flip-page-button\" (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__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                *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"] }]
     }], null, null); })();
 
 function DrFiscalMonthCalendarPickerComponent_i_0_Template(rf, ctx) { if (rf & 1) {
@@ -5258,9 +5303,17 @@ class DrDatePickerWithTimeframeComponent extends DrDatePickerComponent {
             this.datePickerService.availableTimeframes = value;
         }
     }
+    set availableDateTagPresets(value) {
+        if (value && value.length) {
+            this.datePickerService.availableDateTagPresets = value;
+        }
+    }
     set isUsingDateTagPresets(flag) {
         this.datePickerService.isUsingDateTagPresets = flag;
     }
+    set isUsingTimeFrameSelect(flag) {
+        this.datePickerService.isUsingTimeFrameSelect = flag;
+    }
     set presetTag(tag) {
         this.datePickerService.presetTag$.next(tag);
     }
@@ -5391,7 +5444,7 @@ class DrDatePickerWithTimeframeComponent extends DrDatePickerComponent {
         }
     }
     /** @nocollapse */ static { this.ɵfac = function DrDatePickerWithTimeframeComponent_Factory(t) { return new (t || DrDatePickerWithTimeframeComponent)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(i1$4.DateAdapter), i0.ɵɵdirectiveInject(DrDatePickerService)); }; }
-    /** @nocollapse */ static { this.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: DrDatePickerWithTimeframeComponent, selectors: [["dr-date-picker-with-timeframe"]], inputs: { dateFormatConfig: "dateFormatConfig", canSelectTimeframe: "canSelectTimeframe", availableTimeframes: "availableTimeframes", paginationDebounce: "paginationDebounce", isUsingDateTagPresets: "isUsingDateTagPresets", presetTag: "presetTag", datepickerTooltip: "datepickerTooltip", datepickerTooltipPosition: "datepickerTooltipPosition", datepickerTooltipTimeout: "datepickerTooltipTimeout", isOpen: "isOpen" }, outputs: { onChangeFormat: "onChangeFormat", onChangePresetTag: "onChangePresetTag" }, features: [i0.ɵɵProvidersFeature([
+    /** @nocollapse */ static { this.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: DrDatePickerWithTimeframeComponent, selectors: [["dr-date-picker-with-timeframe"]], inputs: { dateFormatConfig: "dateFormatConfig", canSelectTimeframe: "canSelectTimeframe", availableTimeframes: "availableTimeframes", availableDateTagPresets: "availableDateTagPresets", paginationDebounce: "paginationDebounce", isUsingDateTagPresets: "isUsingDateTagPresets", isUsingTimeFrameSelect: "isUsingTimeFrameSelect", presetTag: "presetTag", datepickerTooltip: "datepickerTooltip", datepickerTooltipPosition: "datepickerTooltipPosition", datepickerTooltipTimeout: "datepickerTooltipTimeout", isOpen: "isOpen" }, outputs: { onChangeFormat: "onChangeFormat", onChangePresetTag: "onChangePresetTag" }, features: [i0.ɵɵProvidersFeature([
                 { provide: NG_VALUE_ACCESSOR, useExisting: DrDatePickerWithTimeframeComponent, multi: true },
                 { provide: DateAdapter, useClass: CustomDateAdapter },
                 { provide: DrDatePickerService },
@@ -5444,10 +5497,14 @@ class DrDatePickerWithTimeframeComponent extends DrDatePickerComponent {
             type: Input
         }], availableTimeframes: [{
             type: Input
+        }], availableDateTagPresets: [{
+            type: Input
         }], paginationDebounce: [{
             type: Input
         }], isUsingDateTagPresets: [{
             type: Input
+        }], isUsingTimeFrameSelect: [{
+            type: Input
         }], presetTag: [{
             type: Input
         }], datepickerTooltip: [{