@datarailsshared/datarailsshared 1.6.161 → 1.6.163

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;
@@ -252,6 +349,7 @@ class DrDatePickerService {
         this.onSameDaySelectedInCalendar$ = new Subject();
         this.keepPresetTag = false;
         this.isValueUpdating = false;
+        this.availableDateTagPresets = PRESET_TAGS_LIST;
         this.availableTimeframes = [
             TimeframeOption.DAY,
             TimeframeOption.WEEK,
@@ -454,103 +552,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);
@@ -1849,17 +1850,17 @@ 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();
+    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(_r6); const tag_r4 = restoredCtx.$implicit; const ctx_r5 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r5.onSelectPresetTag(tag_r4)); });
+    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_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_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_r4.label, " ");
+    i0.ɵɵtextInterpolate1(" ", tag_r5.label, " ");
 } }
 function DrDatePickerCustomHeaderComponent_div_0_div_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 11)(1, "div", 12);
@@ -1868,40 +1869,47 @@ function DrDatePickerCustomHeaderComponent_div_0_div_1_Template(rf, ctx) { if (r
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("ngForOf", ctx_r2.presetTagList);
+    i0.ɵɵproperty("ngForOf", ctx_r2.datePickerService.availableDateTagPresets);
+} }
+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_r3 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("ngModel", ctx_r3.selectedTimeframe)("items", i0.ɵɵpipeBind2(1, 2, ctx_r3.timeframeOptions, ctx_r3.datePickerService.availableTimeframes));
 } }
 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()();
+    i0.ɵɵtemplate(2, DrDatePickerCustomHeaderComponent_div_0_dr_select_2_Template, 2, 5, "dr-select", 10);
+    i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵadvance(1);
     i0.ɵɵproperty("ngIf", ctx_r0.datePickerService.isUsingDateTagPresets);
     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_r0.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)); });
+    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_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_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_r11, " ");
+    i0.ɵɵtextInterpolate1(" Q", quarter_r12, " ");
 } }
 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);
+    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_r1 = i0.ɵɵnextContext();
@@ -1974,7 +1982,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,8 +2129,8 @@ 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);
+    /** @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"], ["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);
@@ -2153,7 +2160,7 @@ class DrDatePickerCustomHeaderComponent {
 }
 (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            <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__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]
@@ -4920,17 +4927,17 @@ 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();
+    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(_r6); const tag_r4 = restoredCtx.$implicit; const ctx_r5 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r5.onSelectPresetTag(tag_r4)); });
+    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_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_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_r4.label, " ");
+    i0.ɵɵtextInterpolate1(" ", tag_r5.label, " ");
 } }
 function DrFiscalMonthCalendarHeaderComponent_div_0_div_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 11)(1, "div", 12);
@@ -4939,40 +4946,47 @@ function DrFiscalMonthCalendarHeaderComponent_div_0_div_1_Template(rf, ctx) { if
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("ngForOf", ctx_r2.presetTagList);
+    i0.ɵɵproperty("ngForOf", ctx_r2.datePickerService.availableDateTagPresets);
+} }
+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_r3 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("ngModel", ctx_r3.selectedTimeframe)("items", i0.ɵɵpipeBind2(1, 2, ctx_r3.timeframeOptions, ctx_r3.datePickerService.availableTimeframes));
 } }
 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()();
+    i0.ɵɵtemplate(2, DrFiscalMonthCalendarHeaderComponent_div_0_dr_select_2_Template, 2, 5, "dr-select", 10);
+    i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵadvance(1);
     i0.ɵɵproperty("ngIf", ctx_r0.datePickerService.isUsingDateTagPresets);
     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_r0.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)); });
+    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_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_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_r11, " ");
+    i0.ɵɵtextInterpolate1(" Q", quarter_r12, " ");
 } }
 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);
+    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_r1 = i0.ɵɵnextContext();
@@ -5010,8 +5024,8 @@ 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);
+    /** @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"], ["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);
@@ -5041,7 +5055,7 @@ class DrFiscalMonthCalendarHeaderComponent extends DrDatePickerCustomHeaderCompo
 }
 (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            <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__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 +5272,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 +5413,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 +5466,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: [{