@datarailsshared/datarailsshared 1.6.159 → 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]
@@ -4558,7 +4565,7 @@ class RadioButtonComponent {
             i0.ɵɵadvance(1);
             i0.ɵɵproperty("name", ctx.name)("value", ctx.value)("ngModel", ctx.modelValue)("disabled", ctx.disabled);
             i0.ɵɵattribute("id", ctx.id);
-        } }, dependencies: [i1$2.DefaultValueAccessor, i1$2.RadioControlValueAccessor, i1$2.NgControlStatus, i1$2.NgModel], styles: ["[_nghost-%COMP%]{display:flex;line-height:22px;font-size:14px;font-family:Poppins,sans-serif}label[_ngcontent-%COMP%]   input[type=radio].radiobox[_ngcontent-%COMP%] + span[_ngcontent-%COMP%]{vertical-align:middle;line-height:20px}input[_ngcontent-%COMP%] + span[_ngcontent-%COMP%], input[_ngcontent-%COMP%] + span[_ngcontent-%COMP%]:after, input[_ngcontent-%COMP%] + span[_ngcontent-%COMP%]:before{box-sizing:content-box!important;-webkit-box-sizing:content-box!important;-moz-box-sizing:content-box!important}input[_ngcontent-%COMP%]{visibility:hidden;position:absolute;width:18px;height:18px}label[_ngcontent-%COMP%]   input[_ngcontent-%COMP%] + span[_ngcontent-%COMP%]{position:relative;z-index:19;display:inline-block;margin:0 5px 0 0;line-height:17px;min-height:14px;min-width:14px}label[_ngcontent-%COMP%]   input[_ngcontent-%COMP%] + span[_ngcontent-%COMP%]:hover{cursor:pointer}label[_ngcontent-%COMP%]   input[_ngcontent-%COMP%] + span[_ngcontent-%COMP%]:before{content:\"\";font-size:14px;border-radius:0;display:inline-block;text-align:center;vertical-align:middle;padding:1px;height:12px;line-height:13px;width:12px;margin-right:5px;border:1px solid #8f929e;background-color:#fff;font-weight:400;margin-top:-1px}label[_ngcontent-%COMP%]   input[_ngcontent-%COMP%] + span[_ngcontent-%COMP%]:before{border-radius:50%;-moz-border-radius:50%;-webkit-border-radius:50%}label[_ngcontent-%COMP%]   input[_ngcontent-%COMP%]:checked + span[_ngcontent-%COMP%]:before, label[_ngcontent-%COMP%]:hover   input[_ngcontent-%COMP%]:checked + span[_ngcontent-%COMP%]:before{font-family:DataRails!important;background-image:url('data:image/svg+xml; utf8, <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><circle cx=\"5\" cy=\"5\" r=\"4.5\" fill=\"%234646CE\"/></svg> ');background-repeat:no-repeat;background-position:center;border-color:#4646ce;color:#4646ce}label[_ngcontent-%COMP%]   input[_ngcontent-%COMP%]:disabled + span[_ngcontent-%COMP%]:before{border-color:#8f929e}label[_ngcontent-%COMP%]   input[disabled][_ngcontent-%COMP%]:checked + span[_ngcontent-%COMP%]:before{background-image:url('data:image/svg+xml; utf8, <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><circle cx=\"5\" cy=\"5\" r=\"4.5\" fill=\"%238F929E\"/></svg> ');background-repeat:no-repeat;background-position:center;border-color:#8f929e!important;color:#8f929e}label[_ngcontent-%COMP%]   span[_ngcontent-%COMP%]:hover:before{border-color:#4e566c}"], changeDetection: 0 }); }
+        } }, dependencies: [i1$2.DefaultValueAccessor, i1$2.RadioControlValueAccessor, i1$2.NgControlStatus, i1$2.NgModel], styles: ["[_nghost-%COMP%]{display:flex;line-height:22px;font-size:14px;font-family:Poppins,sans-serif}[_nghost-%COMP%] > label[_ngcontent-%COMP%] > span[_ngcontent-%COMP%]{display:inline-flex;align-items:center;gap:8px;vertical-align:middle;line-height:22px;position:relative;z-index:19;margin:0 4px 0 0;min-height:16px;min-width:16px;cursor:pointer}[_nghost-%COMP%] > label[_ngcontent-%COMP%] > span[_ngcontent-%COMP%]:before{content:\"\";border-radius:50%;display:inline-block;text-align:center;vertical-align:middle;height:16px;width:16px;border:1px solid #9ea1aa;background-color:#fff}[_nghost-%COMP%] > label[_ngcontent-%COMP%] > span[_ngcontent-%COMP%]:hover:before{border-color:#6d6e6f}[_nghost-%COMP%] > label[_ngcontent-%COMP%] > input[_ngcontent-%COMP%]{visibility:hidden;position:absolute;width:0!important;height:0!important;margin:0}[_nghost-%COMP%] > label[_ngcontent-%COMP%] > input[_ngcontent-%COMP%]:checked + span[_ngcontent-%COMP%]:before, [_nghost-%COMP%] > label[_ngcontent-%COMP%] > input[_ngcontent-%COMP%]:checked + span[_ngcontent-%COMP%]:hover:before{background-image:url('data:image/svg+xml; utf8, <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><circle cx=\"5\" cy=\"5\" r=\"4.5\" fill=\"%234646CE\"/></svg> ');background-repeat:no-repeat;background-position:center;border-color:#4646ce}[_nghost-%COMP%] > label[_ngcontent-%COMP%] > input[disabled][_ngcontent-%COMP%] + span[_ngcontent-%COMP%], [_nghost-%COMP%] > label[_ngcontent-%COMP%] > input[_ngcontent-%COMP%]:disabled + span[_ngcontent-%COMP%]{cursor:default}[_nghost-%COMP%] > label[_ngcontent-%COMP%] > input[disabled][_ngcontent-%COMP%] + span[_ngcontent-%COMP%]:before, [_nghost-%COMP%] > label[_ngcontent-%COMP%] > input[_ngcontent-%COMP%]:disabled + span[_ngcontent-%COMP%]:before{border-color:#dfe0e3}[_nghost-%COMP%] > label[_ngcontent-%COMP%] > input[disabled][_ngcontent-%COMP%]:checked + span[_ngcontent-%COMP%]:before, [_nghost-%COMP%] > label[_ngcontent-%COMP%] > input[disabled][_ngcontent-%COMP%]:checked + span[_ngcontent-%COMP%]:hover:before, [_nghost-%COMP%] > label[_ngcontent-%COMP%] > input[_ngcontent-%COMP%]:disabled:checked + span[_ngcontent-%COMP%]:before, [_nghost-%COMP%] > label[_ngcontent-%COMP%] > input[_ngcontent-%COMP%]:disabled:checked + span[_ngcontent-%COMP%]:hover:before{background-image:url('data:image/svg+xml; utf8, <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><circle cx=\"5\" cy=\"5\" r=\"4.5\" fill=\"%23AEABAC\"/></svg> ');background-repeat:no-repeat;background-position:center;border-color:#aeabac!important}"], changeDetection: 0 }); }
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(RadioButtonComponent, [{
         type: Component,
@@ -4568,7 +4575,7 @@ class RadioButtonComponent {
                         useExisting: RadioButtonComponent,
                         multi: true,
                     },
-                ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<label>\n    <input\n        [attr.id]=\"id\"\n        type=\"radio\"\n        [name]=\"name\"\n        [value]=\"value\"\n        (change)=\"valueChanged(value)\"\n        [(ngModel)]=\"modelValue\"\n        [disabled]=\"disabled\"\n        (click)=\"toggleChange($event)\" />\n    <span>\n        <ng-content></ng-content>\n    </span>\n</label>\n", styles: [":host{display:flex;line-height:22px;font-size:14px;font-family:Poppins,sans-serif}label input[type=radio].radiobox+span{vertical-align:middle;line-height:20px}input+span,input+span:after,input+span:before{box-sizing:content-box!important;-webkit-box-sizing:content-box!important;-moz-box-sizing:content-box!important}input{visibility:hidden;position:absolute;width:18px;height:18px}label input+span{position:relative;z-index:19;display:inline-block;margin:0 5px 0 0;line-height:17px;min-height:14px;min-width:14px}label input+span:hover{cursor:pointer}label input+span:before{content:\"\";font-size:14px;border-radius:0;display:inline-block;text-align:center;vertical-align:middle;padding:1px;height:12px;line-height:13px;width:12px;margin-right:5px;border:1px solid #8f929e;background-color:#fff;font-weight:400;margin-top:-1px}label input+span:before{border-radius:50%;-moz-border-radius:50%;-webkit-border-radius:50%}label input:checked+span:before,label:hover input:checked+span:before{font-family:DataRails!important;background-image:url('data:image/svg+xml; utf8, <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><circle cx=\"5\" cy=\"5\" r=\"4.5\" fill=\"%234646CE\"/></svg> ');background-repeat:no-repeat;background-position:center;border-color:#4646ce;color:#4646ce}label input:disabled+span:before{border-color:#8f929e}label input[disabled]:checked+span:before{background-image:url('data:image/svg+xml; utf8, <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><circle cx=\"5\" cy=\"5\" r=\"4.5\" fill=\"%238F929E\"/></svg> ');background-repeat:no-repeat;background-position:center;border-color:#8f929e!important;color:#8f929e}label span:hover:before{border-color:#4e566c}\n"] }]
+                ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<label>\n    <input\n        [attr.id]=\"id\"\n        type=\"radio\"\n        [name]=\"name\"\n        [value]=\"value\"\n        (change)=\"valueChanged(value)\"\n        [(ngModel)]=\"modelValue\"\n        [disabled]=\"disabled\"\n        (click)=\"toggleChange($event)\" />\n    <span>\n        <ng-content></ng-content>\n    </span>\n</label>\n", styles: [":host{display:flex;line-height:22px;font-size:14px;font-family:Poppins,sans-serif}:host>label>span{display:inline-flex;align-items:center;gap:8px;vertical-align:middle;line-height:22px;position:relative;z-index:19;margin:0 4px 0 0;min-height:16px;min-width:16px;cursor:pointer}:host>label>span:before{content:\"\";border-radius:50%;display:inline-block;text-align:center;vertical-align:middle;height:16px;width:16px;border:1px solid #9ea1aa;background-color:#fff}:host>label>span:hover:before{border-color:#6d6e6f}:host>label>input{visibility:hidden;position:absolute;width:0!important;height:0!important;margin:0}:host>label>input:checked+span:before,:host>label>input:checked+span:hover:before{background-image:url('data:image/svg+xml; utf8, <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><circle cx=\"5\" cy=\"5\" r=\"4.5\" fill=\"%234646CE\"/></svg> ');background-repeat:no-repeat;background-position:center;border-color:#4646ce}:host>label>input[disabled]+span,:host>label>input:disabled+span{cursor:default}:host>label>input[disabled]+span:before,:host>label>input:disabled+span:before{border-color:#dfe0e3}:host>label>input[disabled]:checked+span:before,:host>label>input[disabled]:checked+span:hover:before,:host>label>input:disabled:checked+span:before,:host>label>input:disabled:checked+span:hover:before{background-image:url('data:image/svg+xml; utf8, <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><circle cx=\"5\" cy=\"5\" r=\"4.5\" fill=\"%23AEABAC\"/></svg> ');background-repeat:no-repeat;background-position:center;border-color:#aeabac!important}\n"] }]
     }], function () { return [{ type: i0.ChangeDetectorRef }]; }, { id: [{
             type: Input
         }], hostId: [{
@@ -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: [{