@datarailsshared/datarailsshared 1.6.263 → 1.6.267

package/fesm2022/datarailsshared-datarailsshared.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, Component, Output, Input, Injectable, inject, ChangeDetectorRef, DestroyRef, ChangeDetectionStrategy, HostBinding, Injector, EnvironmentInjector, ViewContainerRef, ViewChild, TemplateRef, HostListener, Directive, booleanAttribute, forwardRef, ContentChild, Pipe, ComponentFactoryResolver, Inject, Optional, ViewEncapsulation, PLATFORM_ID, ContentChildren, NgModule, ElementRef, Host, ViewChildren, InjectionToken, SkipSelf, Renderer2, numberAttribute } from '@angular/core';
+import { EventEmitter, Component, Output, Input, Injectable, inject, DestroyRef, signal, ChangeDetectionStrategy, HostBinding, Injector, EnvironmentInjector, ViewContainerRef, ViewChild, TemplateRef, HostListener, Directive, booleanAttribute, forwardRef, ContentChild, Pipe, ComponentFactoryResolver, Inject, Optional, ViewEncapsulation, PLATFORM_ID, ContentChildren, NgModule, ChangeDetectorRef, ElementRef, Host, ViewChildren, InjectionToken, SkipSelf, Renderer2, numberAttribute } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule, isPlatformBrowser, DOCUMENT, NgIf, AsyncPipe, NgTemplateOutlet } from '@angular/common';
 import { MomentDateAdapter, MAT_MOMENT_DATE_ADAPTER_OPTIONS, MatMomentDateModule } from '@angular/material-moment-adapter';
@@ -9,11 +9,12 @@ import * as moment from 'moment';
 import moment__default from 'moment';
 import * as i2 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, FormBuilder, FormsModule, ReactiveFormsModule, FormGroup, FormControl } from '@angular/forms';
-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 { Observable, BehaviorSubject, distinctUntilChanged, Subject, startWith, delay, noop as noop$3, combineLatest, from, merge as merge$1, fromEvent, map as map$2, takeUntil as takeUntil$1, 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, get, has, isArray } 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 { skip, debounceTime, filter, distinctUntilChanged as distinctUntilChanged$1, startWith as startWith$1, map, tap, takeUntil, shareReplay, switchMap, first, catchError, finalize, take } from 'rxjs/operators';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import * as i6 from '@angular/material/datepicker';
 import { MatCalendar, DateRange, MAT_DATE_RANGE_SELECTION_STRATEGY, MatDatepickerModule } from '@angular/material/datepicker';
 import * as i1$1 from '@angular/cdk/overlay';
@@ -609,38 +610,68 @@ class DrDatePickerService {
         type: Injectable
     }], null, null); })();
 
-function WeekSelectorComponent_div_4_Template(rf, ctx) { if (rf & 1) {
-    const _r3 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 5);
-    i0.ɵɵlistener("click", function WeekSelectorComponent_div_4_Template_div_click_0_listener() { const restoredCtx = i0.ɵɵrestoreView(_r3); const week_r1 = restoredCtx.$implicit; const ctx_r2 = i0.ɵɵnextContext(); ctx_r2.service.datePickerInstance.close(); return i0.ɵɵresetView(ctx_r2.service.weekSelectionChange$.next(week_r1)); });
-    i0.ɵɵtext(1);
-    i0.ɵɵelementEnd();
+function WeekSelectorComponent_li_4_Template(rf, ctx) { if (rf & 1) {
+    const _r4 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "li")(1, "button", 5);
+    i0.ɵɵlistener("focus", function WeekSelectorComponent_li_4_Template_button_focus_1_listener($event) { const restoredCtx = i0.ɵɵrestoreView(_r4); const i_r2 = restoredCtx.index; const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.toggleWeekPreview($event, i_r2, true)); })("blur", function WeekSelectorComponent_li_4_Template_button_blur_1_listener($event) { const restoredCtx = i0.ɵɵrestoreView(_r4); const i_r2 = restoredCtx.index; const ctx_r5 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r5.toggleWeekPreview($event, i_r2, false)); })("mouseover", function WeekSelectorComponent_li_4_Template_button_mouseover_1_listener($event) { const restoredCtx = i0.ɵɵrestoreView(_r4); const i_r2 = restoredCtx.index; const ctx_r6 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r6.toggleWeekPreview($event, i_r2, true)); })("mouseleave", function WeekSelectorComponent_li_4_Template_button_mouseleave_1_listener($event) { const restoredCtx = i0.ɵɵrestoreView(_r4); const i_r2 = restoredCtx.index; const ctx_r7 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r7.toggleWeekPreview($event, i_r2, false)); })("click", function WeekSelectorComponent_li_4_Template_button_click_1_listener() { const restoredCtx = i0.ɵɵrestoreView(_r4); const week_r1 = restoredCtx.$implicit; const ctx_r8 = i0.ɵɵnextContext(); ctx_r8.service.datePickerInstance.close(); return i0.ɵɵresetView(ctx_r8.service.weekSelectionChange$.next(week_r1)); });
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const week_r1 = ctx.$implicit;
-    i0.ɵɵclassProp("selected", week_r1.selected);
+    const i_r2 = ctx.index;
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(1);
+    i0.ɵɵclassProp("previewed", i_r2 === ctx_r0.previewedWeek())("selected", week_r1.selected);
+    i0.ɵɵattribute("aria-current", week_r1.selected)("aria-label", "Week " + week_r1.yearWeekNumber);
     i0.ɵɵadvance(1);
     i0.ɵɵtextInterpolate1(" W", week_r1.yearWeekNumber, " ");
 } }
+/**
+ * Provides week-based interaction for Angular Material `MatCalendar`.
+ * The component renders a list of weeks for the currently active month
+ * and keeps it synchronized with the calendar hover (preview) and selection state.
+ *
+ * Key responsibilities:
+ * - Derive logical weeks from the calendar's active month.
+ * - Detect which calendar week is currently previewed/selected and reflect it in the UI.
+ *
+ * ⚠ Stability note:
+ * - `_matCalendarBody` and `previewChange` are **private Angular Material APIs**.
+ * - This component may require adjustments after Angular Material upgrades.
+ * - Related upgrade considerations are documented in `UPGRADE_CHECKLIST.md`.
+ *
+ * If private API is going to change, and we don't have access to with properties,
+ * check the following commit with class and mutation observable implementation:
+ * https://github.com/Datarails/datarailsshared/pull/126/commits/590152cff0448c5f48bff32f9cb165bbf464112b
+ */
 class WeekSelectorComponent {
     constructor() {
         this.service = inject(DrDatePickerService);
         this.calendar = inject(MatCalendar);
-        this.cdr = inject(ChangeDetectorRef);
-        this.destroy$ = new Subject();
-        this.currentMonthWeeks = [];
-        inject(DestroyRef, { skipSelf: true }).onDestroy(() => {
-            this.destroy$.next();
-            this.destroy$.complete();
+        this.destroyRef = inject(DestroyRef);
+        this.calendarBody = null;
+        this.previewedWeek = signal(-1);
+        this.currentMonthWeeks = signal([]);
+        this.calendar.stateChanges.pipe(startWith(null), delay(0), takeUntilDestroyed()).subscribe(() => {
+            const activeDate = moment__default(this.calendar.activeDate);
+            const selectedRange = this.calendar.selected;
+            this.currentMonthWeeks.set(this.getWeeksInMonth(activeDate, selectedRange));
         });
-        this.calendar.stateChanges.pipe(startWith(null), takeUntil(this.destroy$)).subscribe(() => {
-            setTimeout(() => {
-                const activeDate = moment__default(this.calendar.activeDate);
-                const selectedRange = this.calendar.selected;
-                this.currentMonthWeeks = this.getWeeksInMonth(activeDate, selectedRange);
-                this.cdr.detectChanges();
-            });
+    }
+    ngAfterViewInit() {
+        // monthView and _matCalendarBody are ViewChild and can be accessed only in AfterViewInit
+        this.calendarBody = this.calendar.monthView._matCalendarBody;
+        this.calendarBody.previewChange.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((event) => {
+            const value = event.value ? event.value.rawValue : null;
+            this.previewedWeek.set(this.currentMonthWeeks().findIndex((week) => this.isInRange(week.start, value)));
         });
     }
+    toggleWeekPreview(event, weekIndex, value) {
+        if (!this.calendarBody)
+            return;
+        const weekFestDayCell = this.calendarBody.rows[weekIndex][0];
+        this.calendarBody.previewChange.emit({ value: weekFestDayCell?.enabled && value ? weekFestDayCell : null, event });
+    }
     getWeeksInMonth(date, selectedRange) {
         const weeks = [];
         const firstDay = moment__default(date).startOf('month');
@@ -651,12 +682,9 @@ class WeekSelectorComponent {
         let weekNumber = 1;
         while (currentWeekStart.isSameOrBefore(lastWeekEnd)) {
             const weekEnd = moment__default(currentWeekStart).endOf('isoWeek');
-            const days = [];
-            for (let i = 0; i < 7; i++) {
-                days.push(moment__default(currentWeekStart).add(i, 'days'));
-            }
+            const days = this.getWeekDays(currentWeekStart);
             const isPartial = days.some((day) => !day.isSame(date, 'month'));
-            const selected = days.some((day) => day.isSame(selectedRange.start, 'day'));
+            const selected = this.isInRange(currentWeekStart, selectedRange.start, days);
             // isoWeek() returns the ISO week number (1-53)
             const yearWeekNumber = moment__default(currentWeekStart).isoWeek();
             weeks.push({
@@ -673,23 +701,29 @@ class WeekSelectorComponent {
         }
         return weeks;
     }
+    isInRange(weekStart, value, days = this.getWeekDays(weekStart)) {
+        return days.some((day) => day.isSame(value, 'day'));
+    }
+    getWeekDays(weekStart) {
+        return Array.from(Array(7).keys()).map((i) => moment__default(weekStart).add(i, 'days'));
+    }
     /** @nocollapse */ static { this.ɵfac = function WeekSelectorComponent_Factory(t) { return new (t || WeekSelectorComponent)(); }; }
-    /** @nocollapse */ static { this.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: WeekSelectorComponent, selectors: [["dr-week-selector"]], standalone: true, features: [i0.ɵɵStandaloneFeature], decls: 6, vars: 1, consts: [[1, "weeks"], [1, "header"], [1, "weeks__container"], ["class", "btn", 3, "selected", "click", 4, "ngFor", "ngForOf"], [1, "weeks-border"], [1, "btn", 3, "click"]], template: function WeekSelectorComponent_Template(rf, ctx) { if (rf & 1) {
+    /** @nocollapse */ static { this.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: WeekSelectorComponent, selectors: [["dr-week-selector"]], standalone: true, features: [i0.ɵɵStandaloneFeature], decls: 6, vars: 1, consts: [[1, "weeks"], [1, "header"], ["role", "list", "aria-label", "Weeks of the month", 1, "weeks__container"], [4, "ngFor", "ngForOf"], [1, "weeks-border"], [1, "btn", 3, "focus", "blur", "mouseover", "mouseleave", "click"]], template: function WeekSelectorComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 0)(1, "div", 1);
             i0.ɵɵtext(2, "Week");
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(3, "div", 2);
-            i0.ɵɵtemplate(4, WeekSelectorComponent_div_4_Template, 2, 3, "div", 3);
+            i0.ɵɵelementStart(3, "ul", 2);
+            i0.ɵɵtemplate(4, WeekSelectorComponent_li_4_Template, 3, 7, "li", 3);
             i0.ɵɵelementEnd()();
             i0.ɵɵelement(5, "div", 4);
         } if (rf & 2) {
             i0.ɵɵadvance(4);
-            i0.ɵɵproperty("ngForOf", ctx.currentMonthWeeks);
-        } }, dependencies: [CommonModule, i1.NgForOf], styles: ["[_nghost-%COMP%]{font-size:14px;line-height:24px;font-weight:400;text-align:center;color:#333;display:flex}[_nghost-%COMP%]   .weeks[_ngcontent-%COMP%]{height:100%;flex-direction:column;display:flex}[_nghost-%COMP%]   .weeks-border[_ngcontent-%COMP%]{height:100%;width:1px;background-color:#dfe0e3;margin:0 4px}[_nghost-%COMP%]   .weeks__container[_ngcontent-%COMP%]{display:flex;flex-direction:column;justify-content:space-between;height:100%}[_nghost-%COMP%]   .weeks[_ngcontent-%COMP%]   .header[_ngcontent-%COMP%]{font-weight:600;color:#19181a;padding-bottom:8px;line-height:16px}[_nghost-%COMP%]   .weeks[_ngcontent-%COMP%]   .btn[_ngcontent-%COMP%]{padding:9px 16px;border-radius:40px;cursor:pointer}[_nghost-%COMP%]   .weeks[_ngcontent-%COMP%]   .btn[_ngcontent-%COMP%]:hover{font-weight:600;background-color:#f2f2fb;color:#4646ce}[_nghost-%COMP%]   .weeks[_ngcontent-%COMP%]   .btn.selected[_ngcontent-%COMP%]{font-weight:600;background-color:#4646ce;color:#fff}"], changeDetection: 0 }); }
+            i0.ɵɵproperty("ngForOf", ctx.currentMonthWeeks());
+        } }, dependencies: [CommonModule, i1.NgForOf], styles: ["[_nghost-%COMP%]{font-size:14px;line-height:24px;font-weight:400;text-align:center;color:#333;display:flex}[_nghost-%COMP%]   .weeks[_ngcontent-%COMP%]{height:100%;flex-direction:column;display:flex}[_nghost-%COMP%]   .weeks-border[_ngcontent-%COMP%]{height:100%;width:1px;background-color:#dfe0e3;margin:0 4px}[_nghost-%COMP%]   .weeks__container[_ngcontent-%COMP%]{display:flex;flex-direction:column;gap:5px;height:100%;margin:0;padding:0;list-style:none}[_nghost-%COMP%]   .weeks__container[_ngcontent-%COMP%]   li[_ngcontent-%COMP%]{flex:1}[_nghost-%COMP%]   .weeks[_ngcontent-%COMP%]   .header[_ngcontent-%COMP%]{font-weight:600;color:#19181a;padding-bottom:8px;line-height:16px}[_nghost-%COMP%]   .weeks[_ngcontent-%COMP%]   .btn[_ngcontent-%COMP%]{padding:9px 16px;border-radius:40px;cursor:pointer;background-color:transparent;border:none;height:100%}[_nghost-%COMP%]   .weeks[_ngcontent-%COMP%]   .btn.previewed[_ngcontent-%COMP%], [_nghost-%COMP%]   .weeks[_ngcontent-%COMP%]   .btn[_ngcontent-%COMP%]:hover{background-color:#f5f5f5;color:#19181a}[_nghost-%COMP%]   .weeks[_ngcontent-%COMP%]   .btn.selected[_ngcontent-%COMP%]{font-weight:600;background-color:#4646ce;color:#fff}"], changeDetection: 0 }); }
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(WeekSelectorComponent, [{
         type: Component,
-        args: [{ selector: 'dr-week-selector', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"weeks\">\n    <div class=\"header\">Week</div>\n\n    <div class=\"weeks__container\">\n        <div\n            (click)=\"service.datePickerInstance.close(); service.weekSelectionChange$.next(week)\"\n            class=\"btn\"\n            [class.selected]=\"week.selected\"\n            *ngFor=\"let week of currentMonthWeeks\">\n            W{{ week.yearWeekNumber }}\n        </div>\n    </div>\n</div>\n<div class=\"weeks-border\"></div>\n", styles: [":host{font-size:14px;line-height:24px;font-weight:400;text-align:center;color:#333;display:flex}:host .weeks{height:100%;flex-direction:column;display:flex}:host .weeks-border{height:100%;width:1px;background-color:#dfe0e3;margin:0 4px}:host .weeks__container{display:flex;flex-direction:column;justify-content:space-between;height:100%}:host .weeks .header{font-weight:600;color:#19181a;padding-bottom:8px;line-height:16px}:host .weeks .btn{padding:9px 16px;border-radius:40px;cursor:pointer}:host .weeks .btn:hover{font-weight:600;background-color:#f2f2fb;color:#4646ce}:host .weeks .btn.selected{font-weight:600;background-color:#4646ce;color:#fff}\n"] }]
+        args: [{ selector: 'dr-week-selector', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"weeks\">\n    <div class=\"header\">Week</div>\n\n    <ul role=\"list\" class=\"weeks__container\" aria-label=\"Weeks of the month\">\n        <li *ngFor=\"let week of currentMonthWeeks(); let i = index\">\n            <button\n                class=\"btn\"\n                [class.previewed]=\"i === previewedWeek()\"\n                [class.selected]=\"week.selected\"\n                [attr.aria-current]=\"week.selected\"\n                [attr.aria-label]=\"'Week ' + week.yearWeekNumber\"\n                (focus)=\"toggleWeekPreview($event, i, true)\"\n                (blur)=\"toggleWeekPreview($event, i, false)\"\n                (mouseover)=\"toggleWeekPreview($event, i, true)\"\n                (mouseleave)=\"toggleWeekPreview($event, i, false)\"\n                (click)=\"service.datePickerInstance.close(); service.weekSelectionChange$.next(week)\">\n                W{{ week.yearWeekNumber }}\n            </button>\n        </li>\n    </ul>\n</div>\n<div class=\"weeks-border\"></div>\n", styles: [":host{font-size:14px;line-height:24px;font-weight:400;text-align:center;color:#333;display:flex}:host .weeks{height:100%;flex-direction:column;display:flex}:host .weeks-border{height:100%;width:1px;background-color:#dfe0e3;margin:0 4px}:host .weeks__container{display:flex;flex-direction:column;gap:5px;height:100%;margin:0;padding:0;list-style:none}:host .weeks__container li{flex:1}:host .weeks .header{font-weight:600;color:#19181a;padding-bottom:8px;line-height:16px}:host .weeks .btn{padding:9px 16px;border-radius:40px;cursor:pointer;background-color:transparent;border:none;height:100%}:host .weeks .btn.previewed,:host .weeks .btn:hover{background-color:#f5f5f5;color:#19181a}:host .weeks .btn.selected{font-weight:600;background-color:#4646ce;color:#fff}\n"] }]
     }], function () { return []; }, null); })();
 
 var TooltipTheme;
@@ -2093,13 +2127,14 @@ class DrDatePickerCustomHeaderComponent {
     get selectedPresetTag() {
         return this.datePickerService.presetTag$.getValue();
     }
-    constructor(_calendar, _dateAdapter, _dateFormats, cdr, datePickerService) {
+    constructor(_calendar, _dateAdapter, _dateFormats, cdr, appRef, datePickerService) {
         this._calendar = _calendar;
         this._dateAdapter = _dateAdapter;
         this._dateFormats = _dateFormats;
         this.cdr = cdr;
+        this.appRef = appRef;
         this.datePickerService = datePickerService;
-        this._destroyed = new Subject();
+        this.destroyRef = inject(DestroyRef);
         this.quarters = [1, 2, 3, 4];
         this.selectedQuarter = 1;
         this.timeframeOptions = [
@@ -2155,11 +2190,12 @@ class DrDatePickerCustomHeaderComponent {
         this.timeframeSelection = false;
         this.periodMonthLabel = '';
         this.periodYearLabel = '';
+        this.weekSelectorComponentRef = null;
         this.calendarView = CalendarView;
         this.cfr = inject(ComponentFactoryResolver);
         this.injector = inject(Injector);
-        _calendar.stateChanges.pipe(takeUntil$1(this._destroyed)).subscribe(() => this.setPeriodLabels());
-        this.datePickerService.format$.pipe(takeUntil$1(this._destroyed)).subscribe((value) => {
+        _calendar.stateChanges.pipe(takeUntilDestroyed()).subscribe(() => this.setPeriodLabels());
+        this.datePickerService.format$.pipe(takeUntilDestroyed()).subscribe((value) => {
             const timeframe = this.datePickerService.getTimeframe(value);
             this.selectedTimeframe = this.timeframeOptions.filter((option) => option.timeframe === timeframe)[0].value;
             _calendar.currentView = this.selectedTimeframe;
@@ -2176,12 +2212,16 @@ class DrDatePickerCustomHeaderComponent {
             }
         });
         combineLatest([this.datePickerService.timeframe$, this._calendar.viewChanged.pipe(startWith$1(this._calendar.startView))])
-            .pipe(takeUntil$1(this._destroyed))
+            .pipe(takeUntilDestroyed())
             .subscribe(([timeframe, view]) => {
-            const selector = document.querySelector('dr-week-selector');
-            selector?.remove?.();
+            if (this.weekSelectorComponentRef) {
+                this.appRef.detachView(this.weekSelectorComponentRef.hostView);
+                this.weekSelectorComponentRef.destroy();
+                this.weekSelectorComponentRef = null;
+            }
             if (timeframe === TimeframeOption.WEEK && view === 'month') {
-                this.insertWeekSelector();
+                this.weekSelectorComponentRef = this.insertWeekSelector();
+                this.appRef.attachView(this.weekSelectorComponentRef.hostView);
             }
         });
         this.datePickerService.calendarInstance = _calendar;
@@ -2195,8 +2235,10 @@ class DrDatePickerCustomHeaderComponent {
         });
     }
     ngOnDestroy() {
-        this._destroyed.next();
-        this._destroyed.complete();
+        if (this.weekSelectorComponentRef) {
+            this.appRef.detachView(this.weekSelectorComponentRef.hostView);
+            this.weekSelectorComponentRef.destroy();
+        }
     }
     setPeriodLabels() {
         const currentTimeframeOption = this.timeframeOptions.filter((option) => option.value === this._calendar.currentView)[0];
@@ -2291,7 +2333,7 @@ class DrDatePickerCustomHeaderComponent {
         return false;
     }
     listenToCalendarViewChanges() {
-        this._calendar.viewChanged.pipe(takeUntil$1(this._destroyed)).subscribe(() => {
+        this._calendar.viewChanged.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {
             this.setPeriodLabels();
             if (this._calendar.multiYearView) {
                 this.transformDateInMultiyearViewAccordingToFY();
@@ -2302,8 +2344,9 @@ class DrDatePickerCustomHeaderComponent {
         const selector = this.cfr.resolveComponentFactory(WeekSelectorComponent).create(this.injector);
         const calendar = document.querySelector('.mat-calendar-content');
         calendar.insertBefore(selector.location.nativeElement, calendar.firstChild);
+        return selector;
     }
-    /** @nocollapse */ static { this.ɵfac = function DrDatePickerCustomHeaderComponent_Factory(t) { return new (t || DrDatePickerCustomHeaderComponent)(i0.ɵɵdirectiveInject(i6.MatCalendar), i0.ɵɵdirectiveInject(i1$3.DateAdapter), i0.ɵɵdirectiveInject(MAT_DATE_FORMATS), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(DrDatePickerService)); }; }
+    /** @nocollapse */ static { this.ɵfac = function DrDatePickerCustomHeaderComponent_Factory(t) { return new (t || DrDatePickerCustomHeaderComponent)(i0.ɵɵdirectiveInject(i6.MatCalendar), i0.ɵɵdirectiveInject(i1$3.DateAdapter), i0.ɵɵdirectiveInject(MAT_DATE_FORMATS), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(i0.ApplicationRef), i0.ɵɵdirectiveInject(DrDatePickerService)); }; }
     /** @nocollapse */ static { this.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: DrDatePickerCustomHeaderComponent, selectors: [["dr-date-picker_custom-header", 8, "component"]], attrs: _c0$Y, decls: 12, vars: 4, consts: [["class", "dr-datepicker__timeframe-select__wrapper", 4, "ngIf"], [1, "dr-date-paging"], [1, "dr-date-paging", "flip-page-button", 3, "click"], [1, "dr-icon-arrow-left", "presentation_buttons-navigate_input"], [1, "example-header-label"], [3, "click"], [1, "dr-icon-arrow-right", "presentation_buttons-navigate_input"], ["class", "dr-quarterly-datepicker", 4, "ngIf"], [1, "dr-datepicker__timeframe-select__wrapper"], ["class", "dr-datepicker-preset-date", 4, "ngIf"], ["class", "dr-datepicker__timeframe-select", "bindLabel", "title", "bindValue", "value", 3, "ngModel", "items", "ngModelChange", 4, "ngIf"], [1, "dr-datepicker-preset-date"], [1, "dr-datepicker-preset-date__tags", 3, "ngClass"], ["id", "preset_tag", "class", "dr-datepicker-preset-date__tags__tag", 3, "ngClass", "drTooltip", "drTooltipPosition", "click", 4, "ngFor", "ngForOf"], ["id", "preset_tag", 1, "dr-datepicker-preset-date__tags__tag", 3, "ngClass", "drTooltip", "drTooltipPosition", "click"], ["bindLabel", "title", "bindValue", "value", 1, "dr-datepicker__timeframe-select", 3, "ngModel", "items", "ngModelChange"], [1, "dr-quarterly-datepicker"], ["quarterlyDatePicker", ""], ["class", "quarter-selector quarter-selector--select-current-quarter", 3, "class", "quarter-selector--disabled", "click", 4, "ngFor", "ngForOf"], [1, "quarter-selector", "quarter-selector--select-current-quarter", 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);
@@ -2339,7 +2382,7 @@ class DrDatePickerCustomHeaderComponent {
     }], function () { return [{ type: i6.MatCalendar }, { type: i1$3.DateAdapter }, { type: CustomDateFormat, decorators: [{
                 type: Inject,
                 args: [MAT_DATE_FORMATS]
-            }] }, { type: i0.ChangeDetectorRef }, { type: DrDatePickerService }]; }, null); })();
+            }] }, { type: i0.ChangeDetectorRef }, { type: i0.ApplicationRef }, { type: DrDatePickerService }]; }, null); })();
 
 class WeekSelectionStrategy {
     constructor(_dateAdapter) {
@@ -2664,7 +2707,7 @@ class DrDatePickerComponent {
                 this.datePickerService.calendarInstance.activeDate = value;
                 this.datePickerService.calendarInstance.selected = value;
             }
-        }), takeUntil$1(this.destroyed$), shareReplay(1));
+        }), takeUntil(this.destroyed$), shareReplay(1));
         this.opened$ = new BehaviorSubject(false);
         this.fb = inject(FormBuilder);
         this.rangeForm = this.fb.group({
@@ -2680,14 +2723,14 @@ class DrDatePickerComponent {
             }
             return true;
         };
-        datePickerService.updatedQuarter$.pipe(takeUntil$1(this.destroyed$)).subscribe((value) => {
+        datePickerService.updatedQuarter$.pipe(takeUntil(this.destroyed$)).subscribe((value) => {
             this.valueChangedInCalendar(value);
         });
-        datePickerService.weekSelectionChange$.pipe(takeUntil$1(this.destroyed$)).subscribe(({ start, end }) => {
+        datePickerService.weekSelectionChange$.pipe(takeUntil(this.destroyed$)).subscribe(({ start, end }) => {
             this.rangeForm.patchValue({ start, end });
             this.valueChangedInCalendar(start);
         });
-        this.datePickerService.innerValue$.pipe(filter(Boolean), takeUntil$1(this.destroyed$)).subscribe((value) => {
+        this.datePickerService.innerValue$.pipe(filter(Boolean), takeUntil(this.destroyed$)).subscribe((value) => {
             this.rangeForm.patchValue({ start: value.clone().startOf('isoWeek'), end: value.clone().endOf('isoWeek') });
         });
         const dateFormatFn = this.dateAdapter.format;
@@ -2904,10 +2947,10 @@ class DrDatePickerComponent {
         } if (rf & 2) {
             i0.ɵɵproperty("ngIf", !ctx.useButton);
             i0.ɵɵadvance(1);
-            i0.ɵɵproperty("ngIf", i0.ɵɵpipeBind1(2, 3, ctx.datePickerService.timeframe$) === "week");
+            i0.ɵɵproperty("ngIf", i0.ɵɵpipeBind1(2, 3, ctx.datePickerService.timeframe$) === ctx.timeframeOption.WEEK);
             i0.ɵɵadvance(2);
-            i0.ɵɵproperty("ngIf", i0.ɵɵpipeBind1(4, 5, ctx.datePickerService.timeframe$) !== "week");
-        } }, dependencies: [DrButtonComponent, i2.DefaultValueAccessor, i2.NgControlStatus, i2.NgControlStatusGroup, i2.NgModel, i2.FormGroupDirective, i2.FormControlName, i1.NgIf, i6.MatDatepicker, i6.MatDatepickerInput, i6.MatDateRangeInput, i6.MatStartDate, i6.MatEndDate, i6.MatDateRangePicker, DrDatePickerFormatDirective, i1.AsyncPipe], styles: ["[_nghost-%COMP%]{position:relative;width:100%;display:flex;flex-direction:row;min-height:32px;height:32px;font-size:14px;font-family:Poppins,sans-serif;background-color:#fff;border:1px solid #9ea1aa;border-radius:6px;color:#333;overflow:hidden;outline:none;cursor:pointer}.use-button-picker[_nghost-%COMP%]{border:none}[_nghost-%COMP%]:hover{border-color:#9ea1aa}.active[_nghost-%COMP%], [_nghost-%COMP%]:focus-within{border-color:#4646ce!important;color:#333}.disabled[_nghost-%COMP%]{pointer-events:none;border:1px solid #aeabac;background:#f0f1f4;color:#aeabac}.disabled[_nghost-%COMP%]:after{color:#aeabac}.ng-valid.ng-dirty[_nghost-%COMP%]{border-color:#037c5a}.ng-invalid.ng-dirty[_nghost-%COMP%]:not(:focus-within){border-color:#bf1d30!important}.ng-untouched.ng-valid[_nghost-%COMP%]{border-color:#9ea1aa}.use-button-picker[_nghost-%COMP%]:after{display:none}[_nghost-%COMP%]:not(.use-button-picker):after, [_nghost-%COMP%]:not(.use-button-picker):before{position:absolute;display:flex;border-color:#6d6e6f transparent transparent;color:#6d6e6f}[_nghost-%COMP%]:not(.use-button-picker):after{font-family:DataRails!important;content:var(--dr-icon-arrow-down, \"\\ea18\");font-size:24px;color:#6d6e6f;top:0;bottom:0;right:8px;pointer-events:none;position:absolute;display:flex;align-items:center;justify-content:center}[_nghost-%COMP%]   i[_ngcontent-%COMP%]{display:flex;align-items:center;position:absolute;color:#6d6e6f;left:8px;top:0;bottom:0}[_nghost-%COMP%]   input[_ngcontent-%COMP%]{display:flex;flex-grow:1;height:100%;border:none;text-align:left;padding-left:35px;padding-right:25px;cursor:pointer!important;outline:none}[_nghost-%COMP%]   input.when-quarter[_ngcontent-%COMP%]{position:absolute;visibility:hidden}[_nghost-%COMP%]   input[_ngcontent-%COMP%]:disabled{border:none;color:#aeabac;background:transparent}[_nghost-%COMP%]   input[_ngcontent-%COMP%]::-webkit-search-decoration, [_nghost-%COMP%]   input[_ngcontent-%COMP%]::-webkit-search-cancel-button, [_nghost-%COMP%]   input[_ngcontent-%COMP%]::-webkit-search-results-button, [_nghost-%COMP%]   input[_ngcontent-%COMP%]::-webkit-search-results-decoration{-webkit-appearance:none}[_nghost-%COMP%]   input[_ngcontent-%COMP%]::placeholder{color:#6d6e6f;font-size:14px;line-height:18px}[_nghost-%COMP%]   input.hidden-calendar-input[_ngcontent-%COMP%]{width:0;height:0;padding:0}[_nghost-%COMP%]   .datepicker-button[_ngcontent-%COMP%]{width:100%}[_nghost-%COMP%]   .range-input[_ngcontent-%COMP%]{position:absolute;height:0;width:0;bottom:0;left:0;z-index:-1}  .mat-datepicker-popup .dr-week-datepicker{width:386px!important}  .mat-datepicker-popup .dr-week-datepicker .mat-calendar-body-in-range:before{background:initial!important}  .mat-datepicker-popup .dr-week-datepicker .mat-calendar-body-in-range .mat-calendar-body-selected,   .mat-datepicker-popup .dr-week-datepicker .mat-calendar-body-in-range .mat-calendar-body-cell-content{background:#f2f2fb!important;color:#4646ce!important;font-weight:600!important}  .mat-datepicker-popup .mat-datepicker-content{margin:7px 0;box-shadow:0 4px 8px 1px #00000040;border-radius:12px!important}  .mat-datepicker-popup .mat-datepicker-content button[disabled]{border:inherit;color:inherit;background-color:inherit}  .mat-datepicker-popup .mat-datepicker-content button[disabled]:hover{border:inherit}  .mat-datepicker-popup .cdk-keyboard-focused .mat-calendar-body-active>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical),   .mat-datepicker-popup .cdk-program-focused .mat-calendar-body-active>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){background-color:#fff}  .mat-datepicker-popup .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){background:#f2f2fb;color:#4646ce;font-weight:600}  .mat-datepicker-popup .mat-calendar-body-selected{background-color:#4646ce;color:#f2f2fb;font-weight:600}  .mat-datepicker-popup .mat-calendar-body-today.mat-calendar-body-selected{box-shadow:none}  .mat-datepicker-popup .mat-button-focus-overlay{background:#f5f5f5}  .mat-datepicker-popup .mat-calendar-controls .mat-icon-button:hover .mat-button-focus-overlay{opacity:1!important;background:#f5f5f5;transition:opacity .2s cubic-bezier(.35,0,.25,1)}  .mat-datepicker-popup .mat-calendar-controls .mat-calendar-period-button:hover{background:#f5f5f5;transition:background .2s cubic-bezier(.35,0,.25,1)}  .mat-datepicker-popup .mat-calendar-table-header th{font-size:14px;font-weight:600;color:#333}  .mat-datepicker-popup .mat-calendar-table-header-divider{display:none}  .mat-datepicker-popup .mat-calendar-body-label{color:#fff;padding:0}  .mat-datepicker-popup .mat-calendar-body>tr[aria-hidden=true]>.mat-calendar-body-label{display:none}  .mat-datepicker-popup .mat-calendar-content{display:flex}  .mat-datepicker-popup .mat-calendar-content dr-week-selector{flex:0}  .mat-datepicker-popup .mat-calendar-content mat-month-view,   .mat-datepicker-popup .mat-calendar-content mat-multi-year-view,   .mat-datepicker-popup .mat-calendar-content mat-year-view{flex:1}", ".mat-datepicker-popup .dr-datepicker-dark-theme{background-color:#0c142b;color:#fff;border-radius:12px}  .mat-datepicker-popup .dr-datepicker-dark-theme .mat-calendar-body-label{visibility:hidden}  .mat-datepicker-popup .dr-datepicker-dark-theme .mat-calendar-body-cell-content,   .mat-datepicker-popup .dr-datepicker-dark-theme .mat-calendar-table-header th{color:#fff}  .mat-datepicker-popup .dr-datepicker-dark-theme .cdk-keyboard-focused .mat-calendar-body-active>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical),   .mat-datepicker-popup .dr-datepicker-dark-theme .cdk-program-focused .mat-calendar-body-active>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){background-color:#373c4c}  .mat-datepicker-popup .dr-datepicker-dark-theme .mat-calendar-body-today:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){border:none;background-color:#1d1d6d;color:#fff}  .mat-datepicker-popup .dr-datepicker-dark-theme .dr-quarterly-datepicker .quarter-selector:hover{background:#373c4c!important;color:#fff!important}  .mat-datepicker-popup .dr-datepicker-dark-theme .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){background:#373c4c;color:#fff}  .mat-datepicker-popup .dr-datepicker-dark-theme.dr-week-datepicker .weeks__container{color:#fff}  .mat-datepicker-popup .dr-datepicker-dark-theme.dr-week-datepicker .mat-calendar-body-in-range .mat-calendar-body-selected,   .mat-datepicker-popup .dr-datepicker-dark-theme.dr-week-datepicker .mat-calendar-body-in-range .mat-calendar-body-cell-content{background-color:#4646ce!important;color:#fff!important}  .mat-datepicker-popup .dr-datepicker-dark-theme.dr-week-datepicker .weeks .btn:hover{background:#373c4c!important;color:#fff!important}  .mat-datepicker-popup .dr-datepicker-dark-theme .mat-calendar-body-selected{background-color:#4646ce;color:#fff}  .mat-datepicker-popup .dr-datepicker-dark-theme .mat-calendar-body-disabled>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){color:#aeabac}  .mat-datepicker-popup .dr-datepicker-dark-theme dr-date-picker_custom-header .dr-date-paging:hover{background-color:transparent}  .mat-datepicker-popup .dr-datepicker-dark-theme dr-date-picker_custom-header .dr-date-paging>.dr-icon-arrow-right,   .mat-datepicker-popup .dr-datepicker-dark-theme dr-date-picker_custom-header .dr-date-paging>.dr-icon-arrow-left{color:#aeabac}  .mat-datepicker-popup .dr-datepicker-dark-theme dr-date-picker_custom-header .dr-date-paging>.dr-icon-arrow-right:hover,   .mat-datepicker-popup .dr-datepicker-dark-theme dr-date-picker_custom-header .dr-date-paging>.dr-icon-arrow-left:hover{background:#373c4c;border-radius:12px;cursor:pointer}"], changeDetection: 0 }); }
+            i0.ɵɵproperty("ngIf", i0.ɵɵpipeBind1(4, 5, ctx.datePickerService.timeframe$) !== ctx.timeframeOption.WEEK);
+        } }, dependencies: [DrButtonComponent, i2.DefaultValueAccessor, i2.NgControlStatus, i2.NgControlStatusGroup, i2.NgModel, i2.FormGroupDirective, i2.FormControlName, i1.NgIf, i6.MatDatepicker, i6.MatDatepickerInput, i6.MatDateRangeInput, i6.MatStartDate, i6.MatEndDate, i6.MatDateRangePicker, DrDatePickerFormatDirective, i1.AsyncPipe], styles: ["[_nghost-%COMP%]{position:relative;width:100%;display:flex;flex-direction:row;min-height:32px;height:32px;font-size:14px;font-family:Poppins,sans-serif;background-color:#fff;border:1px solid #9ea1aa;border-radius:6px;color:#333;overflow:hidden;outline:none;cursor:pointer}.use-button-picker[_nghost-%COMP%]{border:none}[_nghost-%COMP%]:hover{border-color:#9ea1aa}.active[_nghost-%COMP%], [_nghost-%COMP%]:focus-within{border-color:#4646ce!important;color:#333}.disabled[_nghost-%COMP%]{pointer-events:none;border:1px solid #aeabac;background:#f0f1f4;color:#aeabac}.disabled[_nghost-%COMP%]:after{color:#aeabac}.ng-valid.ng-dirty[_nghost-%COMP%]{border-color:#037c5a}.ng-invalid.ng-dirty[_nghost-%COMP%]:not(:focus-within){border-color:#bf1d30!important}.ng-untouched.ng-valid[_nghost-%COMP%]{border-color:#9ea1aa}.use-button-picker[_nghost-%COMP%]:after{display:none}[_nghost-%COMP%]:not(.use-button-picker):after, [_nghost-%COMP%]:not(.use-button-picker):before{position:absolute;display:flex;border-color:#6d6e6f transparent transparent;color:#6d6e6f}[_nghost-%COMP%]:not(.use-button-picker):after{font-family:DataRails!important;content:var(--dr-icon-arrow-down, \"\\ea18\");font-size:24px;color:#6d6e6f;top:0;bottom:0;right:8px;pointer-events:none;position:absolute;display:flex;align-items:center;justify-content:center}[_nghost-%COMP%]   i[_ngcontent-%COMP%]{display:flex;align-items:center;position:absolute;color:#6d6e6f;left:8px;top:0;bottom:0}[_nghost-%COMP%]   input[_ngcontent-%COMP%]{display:flex;flex-grow:1;height:100%;border:none;text-align:left;padding-left:35px;padding-right:25px;cursor:pointer!important;outline:none}[_nghost-%COMP%]   input.when-quarter[_ngcontent-%COMP%]{position:absolute;visibility:hidden}[_nghost-%COMP%]   input[_ngcontent-%COMP%]:disabled{border:none;color:#aeabac;background:transparent}[_nghost-%COMP%]   input[_ngcontent-%COMP%]::-webkit-search-decoration, [_nghost-%COMP%]   input[_ngcontent-%COMP%]::-webkit-search-cancel-button, [_nghost-%COMP%]   input[_ngcontent-%COMP%]::-webkit-search-results-button, [_nghost-%COMP%]   input[_ngcontent-%COMP%]::-webkit-search-results-decoration{-webkit-appearance:none}[_nghost-%COMP%]   input[_ngcontent-%COMP%]::placeholder{color:#6d6e6f;font-size:14px;line-height:18px}[_nghost-%COMP%]   input.hidden-calendar-input[_ngcontent-%COMP%]{width:0;height:0;padding:0}[_nghost-%COMP%]   .datepicker-button[_ngcontent-%COMP%]{width:100%}[_nghost-%COMP%]   .range-input[_ngcontent-%COMP%]{position:absolute;height:0;width:0;bottom:0;left:0;z-index:-1}  .mat-datepicker-popup .dr-week-datepicker{min-width:min(400px,100vw)!important}  .mat-datepicker-popup .dr-week-datepicker .mat-calendar-body-today{background:#f2f2fb;color:#4646ce;border:none;font-weight:600}  .mat-datepicker-popup .dr-week-datepicker .mat-calendar-body-cell-preview{border:none}  .mat-datepicker-popup .dr-week-datepicker .mat-calendar-body-range-start .mat-calendar-body-cell-preview,   .mat-datepicker-popup .dr-week-datepicker .mat-calendar-body-preview-start .mat-calendar-body-cell-preview{left:5%;width:95%;border-top-left-radius:40px;border-bottom-left-radius:40px}  .mat-datepicker-popup .dr-week-datepicker .mat-calendar-body-range-end .mat-calendar-body-cell-preview,   .mat-datepicker-popup .dr-week-datepicker .mat-calendar-body-preview-end .mat-calendar-body-cell-preview{right:5%;width:95%;border-top-right-radius:40px;border-bottom-right-radius:40px}  .mat-datepicker-popup .dr-week-datepicker .mat-calendar-body-in-preview:not(.mat-calendar-body-in-range) .mat-calendar-body-cell-preview{background-color:#f5f5f5}  .mat-datepicker-popup .dr-week-datepicker .mat-calendar-body-in-preview:not(.mat-calendar-body-in-range)>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){background-color:transparent!important}  .mat-datepicker-popup .dr-week-datepicker .mat-calendar-body-in-preview:not(.mat-calendar-body-in-range)>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical):not(.mat-calendar-body-today){color:#19181a!important;font-weight:400!important}  .mat-datepicker-popup .dr-week-datepicker .mat-calendar-body-in-range .mat-calendar-body-cell-preview{background:#4646ce!important}  .mat-datepicker-popup .dr-week-datepicker .mat-calendar-body-in-range:before{background:initial!important}  .mat-datepicker-popup .dr-week-datepicker .mat-calendar-body-in-range .mat-calendar-body-selected,   .mat-datepicker-popup .dr-week-datepicker .mat-calendar-body-in-range .mat-calendar-body-cell-content{background:transparent!important;color:#f2f2fb!important;font-weight:600!important}  .mat-datepicker-popup .mat-datepicker-content{margin:7px 0;box-shadow:0 4px 8px 1px #00000040;border-radius:12px!important}  .mat-datepicker-popup .mat-datepicker-content button[disabled]{border:inherit;color:inherit;background-color:inherit}  .mat-datepicker-popup .mat-datepicker-content button[disabled]:hover{border:inherit}  .mat-datepicker-popup .cdk-keyboard-focused .mat-calendar-body-active>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical),   .mat-datepicker-popup .cdk-program-focused .mat-calendar-body-active>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){background-color:#fff}  .mat-datepicker-popup .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){background:#f2f2fb;color:#4646ce;font-weight:600}  .mat-datepicker-popup .mat-calendar-body-selected{background-color:#4646ce;color:#f2f2fb;font-weight:600}  .mat-datepicker-popup .mat-calendar-body-today.mat-calendar-body-selected{box-shadow:none}  .mat-datepicker-popup .mat-button-focus-overlay{background:#f5f5f5}  .mat-datepicker-popup .mat-calendar-controls .mat-icon-button:hover .mat-button-focus-overlay{opacity:1!important;background:#f5f5f5;transition:opacity .2s cubic-bezier(.35,0,.25,1)}  .mat-datepicker-popup .mat-calendar-controls .mat-calendar-period-button:hover{background:#f5f5f5;transition:background .2s cubic-bezier(.35,0,.25,1)}  .mat-datepicker-popup .mat-calendar-table-header th{font-size:14px;font-weight:600;color:#333}  .mat-datepicker-popup .mat-calendar-table-header-divider{display:none}  .mat-datepicker-popup .mat-calendar-body-label{color:#fff;padding:0}  .mat-datepicker-popup .mat-calendar-body>tr[aria-hidden=true]>.mat-calendar-body-label{display:none}  .mat-datepicker-popup .mat-calendar-content{display:flex}  .mat-datepicker-popup .mat-calendar-content dr-week-selector{flex:0}  .mat-datepicker-popup .mat-calendar-content mat-month-view,   .mat-datepicker-popup .mat-calendar-content mat-multi-year-view,   .mat-datepicker-popup .mat-calendar-content mat-year-view{flex:1}", ".mat-datepicker-popup .dr-datepicker-dark-theme{background-color:#0c142b;color:#fff;border-radius:12px}  .mat-datepicker-popup .dr-datepicker-dark-theme .mat-calendar-body-label{visibility:hidden}  .mat-datepicker-popup .dr-datepicker-dark-theme .mat-calendar-body-cell-content,   .mat-datepicker-popup .dr-datepicker-dark-theme .mat-calendar-table-header th{color:#fff}  .mat-datepicker-popup .dr-datepicker-dark-theme .cdk-keyboard-focused .mat-calendar-body-active>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical),   .mat-datepicker-popup .dr-datepicker-dark-theme .cdk-program-focused .mat-calendar-body-active>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){background-color:#373c4c}  .mat-datepicker-popup .dr-datepicker-dark-theme .mat-calendar-body-today:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){border:none;background-color:#1d1d6d;color:#fff}  .mat-datepicker-popup .dr-datepicker-dark-theme .dr-quarterly-datepicker .quarter-selector:hover{background:#373c4c!important;color:#fff!important}  .mat-datepicker-popup .dr-datepicker-dark-theme .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){background:#373c4c;color:#fff}  .mat-datepicker-popup .dr-datepicker-dark-theme.dr-week-datepicker .weeks__container{color:#fff}  .mat-datepicker-popup .dr-datepicker-dark-theme.dr-week-datepicker .mat-calendar-body-in-range .mat-calendar-body-selected,   .mat-datepicker-popup .dr-datepicker-dark-theme.dr-week-datepicker .mat-calendar-body-in-range .mat-calendar-body-cell-content{background-color:#4646ce!important;color:#fff!important}  .mat-datepicker-popup .dr-datepicker-dark-theme.dr-week-datepicker .weeks .btn:hover{background:#373c4c!important;color:#fff!important}  .mat-datepicker-popup .dr-datepicker-dark-theme .mat-calendar-body-selected{background-color:#4646ce;color:#fff}  .mat-datepicker-popup .dr-datepicker-dark-theme .mat-calendar-body-disabled>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){color:#aeabac}  .mat-datepicker-popup .dr-datepicker-dark-theme dr-date-picker_custom-header .dr-date-paging:hover{background-color:transparent}  .mat-datepicker-popup .dr-datepicker-dark-theme dr-date-picker_custom-header .dr-date-paging>.dr-icon-arrow-right,   .mat-datepicker-popup .dr-datepicker-dark-theme dr-date-picker_custom-header .dr-date-paging>.dr-icon-arrow-left{color:#aeabac}  .mat-datepicker-popup .dr-datepicker-dark-theme dr-date-picker_custom-header .dr-date-paging>.dr-icon-arrow-right:hover,   .mat-datepicker-popup .dr-datepicker-dark-theme dr-date-picker_custom-header .dr-date-paging>.dr-icon-arrow-left:hover{background:#373c4c;border-radius:12px;cursor:pointer}"], changeDetection: 0 }); }
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DrDatePickerComponent, [{
         type: Component,
@@ -2916,7 +2959,7 @@ class DrDatePickerComponent {
                     { provide: DateAdapter, useClass: CustomDateAdapter },
                     { provide: MAT_DATE_RANGE_SELECTION_STRATEGY, useClass: WeekSelectionStrategy },
                     DrDatePickerService,
-                ], template: "<i *ngIf=\"!useButton\" class=\"dr-icon-date\" (click)=\"datePicker.open()\"></i>\n\n<ng-container *ngIf=\"(datePickerService.timeframe$ | async) === 'week'\">\n    <input\n        [attr.id]=\"id\"\n        [ngModel]=\"input.value\"\n        (click)=\"datePicker.open()\"\n        [disabled]=\"disabled\"\n        [placeholder]=\"placeholder\"\n        [readonly]=\"readonly\"\n        [min]=\"_min\"\n        [max]=\"_max\" />\n\n    <mat-date-range-input [formGroup]=\"rangeForm\" [rangePicker]=\"datePicker\" [dateFilter]=\"dateFilter\" class=\"range-input\">\n        <input\n            matStartDate\n            #input\n            [drDatePickerFormat]=\"datePickerService.format$ | async\"\n            formControlName=\"start\"\n            (dateChange)=\"valueChangedInCalendar(rangeForm.value.start)\" />\n        <input matEndDate [drDatePickerFormat]=\"datePickerService.format$ | async\" formControlName=\"end\" />\n    </mat-date-range-input>\n\n    <mat-date-range-picker\n        #datePicker\n        [startAt]=\"_startAt\"\n        [panelClass]=\"'dr-week-datepicker' + (panelClass ? ' ' + panelClass : '')\"\n        [calendarHeaderComponent]=\"customHeader\"\n        (yearSelected)=\"chosenPeriodHandler($event, timeframeOption.YEAR, datePicker)\"\n        (monthSelected)=\"chosenPeriodHandler($event, timeframeOption.MONTH, datePicker)\"\n        (opened)=\"onOpen()\"\n        (closed)=\"onCLose()\">\n    </mat-date-range-picker>\n</ng-container>\n\n<ng-container *ngIf=\"(datePickerService.timeframe$ | async) !== 'week'\">\n    <input\n        [attr.id]=\"id\"\n        [ngModel]=\"displayValue$ | async\"\n        (ngModelChange)=\"valueChangedInCalendar($event)\"\n        (click)=\"datePicker.open()\"\n        [matDatepicker]=\"datePicker\"\n        [matDatepickerFilter]=\"dateFilter\"\n        [disabled]=\"disabled\"\n        [placeholder]=\"placeholder\"\n        [drDatePickerFormat]=\"datePickerService.format$ | async\"\n        [readonly]=\"readonly\"\n        [min]=\"_min\"\n        [max]=\"_max\"\n        [class.hidden-calendar-input]=\"useButton\" />\n\n    <dr-button\n        *ngIf=\"useButton\"\n        [icon]=\"'dr-icon-date'\"\n        [iconAfter]=\"iconAfterButton\"\n        (click)=\"datePicker.open()\"\n        class=\"datepicker-button\">\n        {{ buttonLabel || 'Select Date' }}\n    </dr-button>\n\n    <mat-datepicker\n        #datePicker\n        [panelClass]=\"panelClass\"\n        [startAt]=\"_startAt\"\n        [calendarHeaderComponent]=\"customHeader\"\n        (yearSelected)=\"chosenPeriodHandler($event, timeframeOption.YEAR, datePicker)\"\n        (monthSelected)=\"chosenPeriodHandler($event, timeframeOption.MONTH, datePicker)\"\n        (opened)=\"onOpen()\"\n        (closed)=\"onCLose()\">\n    </mat-datepicker>\n</ng-container>\n", styles: [":host{position:relative;width:100%;display:flex;flex-direction:row;min-height:32px;height:32px;font-size:14px;font-family:Poppins,sans-serif;background-color:#fff;border:1px solid #9ea1aa;border-radius:6px;color:#333;overflow:hidden;outline:none;cursor:pointer}:host.use-button-picker{border:none}:host:hover{border-color:#9ea1aa}:host.active,:host:focus-within{border-color:#4646ce!important;color:#333}:host.disabled{pointer-events:none;border:1px solid #aeabac;background:#f0f1f4;color:#aeabac}:host.disabled:after{color:#aeabac}:host.ng-valid.ng-dirty{border-color:#037c5a}:host.ng-invalid.ng-dirty:not(:focus-within){border-color:#bf1d30!important}:host.ng-untouched.ng-valid{border-color:#9ea1aa}:host.use-button-picker:after{display:none}:host:not(.use-button-picker):after,:host:not(.use-button-picker):before{position:absolute;display:flex;border-color:#6d6e6f transparent transparent;color:#6d6e6f}:host:not(.use-button-picker):after{font-family:DataRails!important;content:var(--dr-icon-arrow-down, \"\\ea18\");font-size:24px;color:#6d6e6f;top:0;bottom:0;right:8px;pointer-events:none;position:absolute;display:flex;align-items:center;justify-content:center}:host i{display:flex;align-items:center;position:absolute;color:#6d6e6f;left:8px;top:0;bottom:0}:host input{display:flex;flex-grow:1;height:100%;border:none;text-align:left;padding-left:35px;padding-right:25px;cursor:pointer!important;outline:none}:host input.when-quarter{position:absolute;visibility:hidden}:host input:disabled{border:none;color:#aeabac;background:transparent}:host input::-webkit-search-decoration,:host input::-webkit-search-cancel-button,:host input::-webkit-search-results-button,:host input::-webkit-search-results-decoration{-webkit-appearance:none}:host input::placeholder{color:#6d6e6f;font-size:14px;line-height:18px}:host input.hidden-calendar-input{width:0;height:0;padding:0}:host .datepicker-button{width:100%}:host .range-input{position:absolute;height:0;width:0;bottom:0;left:0;z-index:-1}::ng-deep .mat-datepicker-popup .dr-week-datepicker{width:386px!important}::ng-deep .mat-datepicker-popup .dr-week-datepicker .mat-calendar-body-in-range:before{background:initial!important}::ng-deep .mat-datepicker-popup .dr-week-datepicker .mat-calendar-body-in-range .mat-calendar-body-selected,::ng-deep .mat-datepicker-popup .dr-week-datepicker .mat-calendar-body-in-range .mat-calendar-body-cell-content{background:#f2f2fb!important;color:#4646ce!important;font-weight:600!important}::ng-deep .mat-datepicker-popup .mat-datepicker-content{margin:7px 0;box-shadow:0 4px 8px 1px #00000040;border-radius:12px!important}::ng-deep .mat-datepicker-popup .mat-datepicker-content button[disabled]{border:inherit;color:inherit;background-color:inherit}::ng-deep .mat-datepicker-popup .mat-datepicker-content button[disabled]:hover{border:inherit}::ng-deep .mat-datepicker-popup .cdk-keyboard-focused .mat-calendar-body-active>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical),::ng-deep .mat-datepicker-popup .cdk-program-focused .mat-calendar-body-active>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){background-color:#fff}::ng-deep .mat-datepicker-popup .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){background:#f2f2fb;color:#4646ce;font-weight:600}::ng-deep .mat-datepicker-popup .mat-calendar-body-selected{background-color:#4646ce;color:#f2f2fb;font-weight:600}::ng-deep .mat-datepicker-popup .mat-calendar-body-today.mat-calendar-body-selected{box-shadow:none}::ng-deep .mat-datepicker-popup .mat-button-focus-overlay{background:#f5f5f5}::ng-deep .mat-datepicker-popup .mat-calendar-controls .mat-icon-button:hover .mat-button-focus-overlay{opacity:1!important;background:#f5f5f5;transition:opacity .2s cubic-bezier(.35,0,.25,1)}::ng-deep .mat-datepicker-popup .mat-calendar-controls .mat-calendar-period-button:hover{background:#f5f5f5;transition:background .2s cubic-bezier(.35,0,.25,1)}::ng-deep .mat-datepicker-popup .mat-calendar-table-header th{font-size:14px;font-weight:600;color:#333}::ng-deep .mat-datepicker-popup .mat-calendar-table-header-divider{display:none}::ng-deep .mat-datepicker-popup .mat-calendar-body-label{color:#fff;padding:0}::ng-deep .mat-datepicker-popup .mat-calendar-body>tr[aria-hidden=true]>.mat-calendar-body-label{display:none}::ng-deep .mat-datepicker-popup .mat-calendar-content{display:flex}::ng-deep .mat-datepicker-popup .mat-calendar-content dr-week-selector{flex:0}::ng-deep .mat-datepicker-popup .mat-calendar-content mat-month-view,::ng-deep .mat-datepicker-popup .mat-calendar-content mat-multi-year-view,::ng-deep .mat-datepicker-popup .mat-calendar-content mat-year-view{flex:1}\n", "::ng-deep .mat-datepicker-popup .dr-datepicker-dark-theme{background-color:#0c142b;color:#fff;border-radius:12px}::ng-deep .mat-datepicker-popup .dr-datepicker-dark-theme .mat-calendar-body-label{visibility:hidden}::ng-deep .mat-datepicker-popup .dr-datepicker-dark-theme .mat-calendar-body-cell-content,::ng-deep .mat-datepicker-popup .dr-datepicker-dark-theme .mat-calendar-table-header th{color:#fff}::ng-deep .mat-datepicker-popup .dr-datepicker-dark-theme .cdk-keyboard-focused .mat-calendar-body-active>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical),::ng-deep .mat-datepicker-popup .dr-datepicker-dark-theme .cdk-program-focused .mat-calendar-body-active>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){background-color:#373c4c}::ng-deep .mat-datepicker-popup .dr-datepicker-dark-theme .mat-calendar-body-today:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){border:none;background-color:#1d1d6d;color:#fff}::ng-deep .mat-datepicker-popup .dr-datepicker-dark-theme .dr-quarterly-datepicker .quarter-selector:hover{background:#373c4c!important;color:#fff!important}::ng-deep .mat-datepicker-popup .dr-datepicker-dark-theme .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){background:#373c4c;color:#fff}::ng-deep .mat-datepicker-popup .dr-datepicker-dark-theme.dr-week-datepicker .weeks__container{color:#fff}::ng-deep .mat-datepicker-popup .dr-datepicker-dark-theme.dr-week-datepicker .mat-calendar-body-in-range .mat-calendar-body-selected,::ng-deep .mat-datepicker-popup .dr-datepicker-dark-theme.dr-week-datepicker .mat-calendar-body-in-range .mat-calendar-body-cell-content{background-color:#4646ce!important;color:#fff!important}::ng-deep .mat-datepicker-popup .dr-datepicker-dark-theme.dr-week-datepicker .weeks .btn:hover{background:#373c4c!important;color:#fff!important}::ng-deep .mat-datepicker-popup .dr-datepicker-dark-theme .mat-calendar-body-selected{background-color:#4646ce;color:#fff}::ng-deep .mat-datepicker-popup .dr-datepicker-dark-theme .mat-calendar-body-disabled>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){color:#aeabac}::ng-deep .mat-datepicker-popup .dr-datepicker-dark-theme dr-date-picker_custom-header .dr-date-paging:hover{background-color:transparent}::ng-deep .mat-datepicker-popup .dr-datepicker-dark-theme dr-date-picker_custom-header .dr-date-paging>.dr-icon-arrow-right,::ng-deep .mat-datepicker-popup .dr-datepicker-dark-theme dr-date-picker_custom-header .dr-date-paging>.dr-icon-arrow-left{color:#aeabac}::ng-deep .mat-datepicker-popup .dr-datepicker-dark-theme dr-date-picker_custom-header .dr-date-paging>.dr-icon-arrow-right:hover,::ng-deep .mat-datepicker-popup .dr-datepicker-dark-theme dr-date-picker_custom-header .dr-date-paging>.dr-icon-arrow-left:hover{background:#373c4c;border-radius:12px;cursor:pointer}\n"] }]
+                ], template: "<i *ngIf=\"!useButton\" class=\"dr-icon-date\" (click)=\"datePicker.open()\"></i>\n\n<ng-container *ngIf=\"(datePickerService.timeframe$ | async) === timeframeOption.WEEK\">\n    <input\n        [attr.id]=\"id\"\n        [ngModel]=\"input.value\"\n        (click)=\"datePicker.open()\"\n        [disabled]=\"disabled\"\n        [placeholder]=\"placeholder\"\n        [readonly]=\"readonly\"\n        [min]=\"_min\"\n        [max]=\"_max\" />\n\n    <mat-date-range-input [formGroup]=\"rangeForm\" [rangePicker]=\"datePicker\" [dateFilter]=\"dateFilter\" class=\"range-input\">\n        <input\n            matStartDate\n            #input\n            [drDatePickerFormat]=\"datePickerService.format$ | async\"\n            formControlName=\"start\"\n            (dateChange)=\"valueChangedInCalendar(rangeForm.value.start)\" />\n        <input matEndDate [drDatePickerFormat]=\"datePickerService.format$ | async\" formControlName=\"end\" />\n    </mat-date-range-input>\n\n    <mat-date-range-picker\n        #datePicker\n        [startAt]=\"_startAt\"\n        [panelClass]=\"'dr-week-datepicker' + (panelClass ? ' ' + panelClass : '')\"\n        [calendarHeaderComponent]=\"customHeader\"\n        (yearSelected)=\"chosenPeriodHandler($event, timeframeOption.YEAR, datePicker)\"\n        (monthSelected)=\"chosenPeriodHandler($event, timeframeOption.MONTH, datePicker)\"\n        (opened)=\"onOpen()\"\n        (closed)=\"onCLose()\">\n    </mat-date-range-picker>\n</ng-container>\n\n<ng-container *ngIf=\"(datePickerService.timeframe$ | async) !== timeframeOption.WEEK\">\n    <input\n        [attr.id]=\"id\"\n        [ngModel]=\"displayValue$ | async\"\n        (ngModelChange)=\"valueChangedInCalendar($event)\"\n        (click)=\"datePicker.open()\"\n        [matDatepicker]=\"datePicker\"\n        [matDatepickerFilter]=\"dateFilter\"\n        [disabled]=\"disabled\"\n        [placeholder]=\"placeholder\"\n        [drDatePickerFormat]=\"datePickerService.format$ | async\"\n        [readonly]=\"readonly\"\n        [min]=\"_min\"\n        [max]=\"_max\"\n        [class.hidden-calendar-input]=\"useButton\" />\n\n    <dr-button\n        *ngIf=\"useButton\"\n        [icon]=\"'dr-icon-date'\"\n        [iconAfter]=\"iconAfterButton\"\n        (click)=\"datePicker.open()\"\n        class=\"datepicker-button\">\n        {{ buttonLabel || 'Select Date' }}\n    </dr-button>\n\n    <mat-datepicker\n        #datePicker\n        [panelClass]=\"panelClass\"\n        [startAt]=\"_startAt\"\n        [calendarHeaderComponent]=\"customHeader\"\n        (yearSelected)=\"chosenPeriodHandler($event, timeframeOption.YEAR, datePicker)\"\n        (monthSelected)=\"chosenPeriodHandler($event, timeframeOption.MONTH, datePicker)\"\n        (opened)=\"onOpen()\"\n        (closed)=\"onCLose()\">\n    </mat-datepicker>\n</ng-container>\n", styles: [":host{position:relative;width:100%;display:flex;flex-direction:row;min-height:32px;height:32px;font-size:14px;font-family:Poppins,sans-serif;background-color:#fff;border:1px solid #9ea1aa;border-radius:6px;color:#333;overflow:hidden;outline:none;cursor:pointer}:host.use-button-picker{border:none}:host:hover{border-color:#9ea1aa}:host.active,:host:focus-within{border-color:#4646ce!important;color:#333}:host.disabled{pointer-events:none;border:1px solid #aeabac;background:#f0f1f4;color:#aeabac}:host.disabled:after{color:#aeabac}:host.ng-valid.ng-dirty{border-color:#037c5a}:host.ng-invalid.ng-dirty:not(:focus-within){border-color:#bf1d30!important}:host.ng-untouched.ng-valid{border-color:#9ea1aa}:host.use-button-picker:after{display:none}:host:not(.use-button-picker):after,:host:not(.use-button-picker):before{position:absolute;display:flex;border-color:#6d6e6f transparent transparent;color:#6d6e6f}:host:not(.use-button-picker):after{font-family:DataRails!important;content:var(--dr-icon-arrow-down, \"\\ea18\");font-size:24px;color:#6d6e6f;top:0;bottom:0;right:8px;pointer-events:none;position:absolute;display:flex;align-items:center;justify-content:center}:host i{display:flex;align-items:center;position:absolute;color:#6d6e6f;left:8px;top:0;bottom:0}:host input{display:flex;flex-grow:1;height:100%;border:none;text-align:left;padding-left:35px;padding-right:25px;cursor:pointer!important;outline:none}:host input.when-quarter{position:absolute;visibility:hidden}:host input:disabled{border:none;color:#aeabac;background:transparent}:host input::-webkit-search-decoration,:host input::-webkit-search-cancel-button,:host input::-webkit-search-results-button,:host input::-webkit-search-results-decoration{-webkit-appearance:none}:host input::placeholder{color:#6d6e6f;font-size:14px;line-height:18px}:host input.hidden-calendar-input{width:0;height:0;padding:0}:host .datepicker-button{width:100%}:host .range-input{position:absolute;height:0;width:0;bottom:0;left:0;z-index:-1}::ng-deep .mat-datepicker-popup .dr-week-datepicker{min-width:min(400px,100vw)!important}::ng-deep .mat-datepicker-popup .dr-week-datepicker .mat-calendar-body-today{background:#f2f2fb;color:#4646ce;border:none;font-weight:600}::ng-deep .mat-datepicker-popup .dr-week-datepicker .mat-calendar-body-cell-preview{border:none}::ng-deep .mat-datepicker-popup .dr-week-datepicker .mat-calendar-body-range-start .mat-calendar-body-cell-preview,::ng-deep .mat-datepicker-popup .dr-week-datepicker .mat-calendar-body-preview-start .mat-calendar-body-cell-preview{left:5%;width:95%;border-top-left-radius:40px;border-bottom-left-radius:40px}::ng-deep .mat-datepicker-popup .dr-week-datepicker .mat-calendar-body-range-end .mat-calendar-body-cell-preview,::ng-deep .mat-datepicker-popup .dr-week-datepicker .mat-calendar-body-preview-end .mat-calendar-body-cell-preview{right:5%;width:95%;border-top-right-radius:40px;border-bottom-right-radius:40px}::ng-deep .mat-datepicker-popup .dr-week-datepicker .mat-calendar-body-in-preview:not(.mat-calendar-body-in-range) .mat-calendar-body-cell-preview{background-color:#f5f5f5}::ng-deep .mat-datepicker-popup .dr-week-datepicker .mat-calendar-body-in-preview:not(.mat-calendar-body-in-range)>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){background-color:transparent!important}::ng-deep .mat-datepicker-popup .dr-week-datepicker .mat-calendar-body-in-preview:not(.mat-calendar-body-in-range)>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical):not(.mat-calendar-body-today){color:#19181a!important;font-weight:400!important}::ng-deep .mat-datepicker-popup .dr-week-datepicker .mat-calendar-body-in-range .mat-calendar-body-cell-preview{background:#4646ce!important}::ng-deep .mat-datepicker-popup .dr-week-datepicker .mat-calendar-body-in-range:before{background:initial!important}::ng-deep .mat-datepicker-popup .dr-week-datepicker .mat-calendar-body-in-range .mat-calendar-body-selected,::ng-deep .mat-datepicker-popup .dr-week-datepicker .mat-calendar-body-in-range .mat-calendar-body-cell-content{background:transparent!important;color:#f2f2fb!important;font-weight:600!important}::ng-deep .mat-datepicker-popup .mat-datepicker-content{margin:7px 0;box-shadow:0 4px 8px 1px #00000040;border-radius:12px!important}::ng-deep .mat-datepicker-popup .mat-datepicker-content button[disabled]{border:inherit;color:inherit;background-color:inherit}::ng-deep .mat-datepicker-popup .mat-datepicker-content button[disabled]:hover{border:inherit}::ng-deep .mat-datepicker-popup .cdk-keyboard-focused .mat-calendar-body-active>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical),::ng-deep .mat-datepicker-popup .cdk-program-focused .mat-calendar-body-active>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){background-color:#fff}::ng-deep .mat-datepicker-popup .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){background:#f2f2fb;color:#4646ce;font-weight:600}::ng-deep .mat-datepicker-popup .mat-calendar-body-selected{background-color:#4646ce;color:#f2f2fb;font-weight:600}::ng-deep .mat-datepicker-popup .mat-calendar-body-today.mat-calendar-body-selected{box-shadow:none}::ng-deep .mat-datepicker-popup .mat-button-focus-overlay{background:#f5f5f5}::ng-deep .mat-datepicker-popup .mat-calendar-controls .mat-icon-button:hover .mat-button-focus-overlay{opacity:1!important;background:#f5f5f5;transition:opacity .2s cubic-bezier(.35,0,.25,1)}::ng-deep .mat-datepicker-popup .mat-calendar-controls .mat-calendar-period-button:hover{background:#f5f5f5;transition:background .2s cubic-bezier(.35,0,.25,1)}::ng-deep .mat-datepicker-popup .mat-calendar-table-header th{font-size:14px;font-weight:600;color:#333}::ng-deep .mat-datepicker-popup .mat-calendar-table-header-divider{display:none}::ng-deep .mat-datepicker-popup .mat-calendar-body-label{color:#fff;padding:0}::ng-deep .mat-datepicker-popup .mat-calendar-body>tr[aria-hidden=true]>.mat-calendar-body-label{display:none}::ng-deep .mat-datepicker-popup .mat-calendar-content{display:flex}::ng-deep .mat-datepicker-popup .mat-calendar-content dr-week-selector{flex:0}::ng-deep .mat-datepicker-popup .mat-calendar-content mat-month-view,::ng-deep .mat-datepicker-popup .mat-calendar-content mat-multi-year-view,::ng-deep .mat-datepicker-popup .mat-calendar-content mat-year-view{flex:1}\n", "::ng-deep .mat-datepicker-popup .dr-datepicker-dark-theme{background-color:#0c142b;color:#fff;border-radius:12px}::ng-deep .mat-datepicker-popup .dr-datepicker-dark-theme .mat-calendar-body-label{visibility:hidden}::ng-deep .mat-datepicker-popup .dr-datepicker-dark-theme .mat-calendar-body-cell-content,::ng-deep .mat-datepicker-popup .dr-datepicker-dark-theme .mat-calendar-table-header th{color:#fff}::ng-deep .mat-datepicker-popup .dr-datepicker-dark-theme .cdk-keyboard-focused .mat-calendar-body-active>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical),::ng-deep .mat-datepicker-popup .dr-datepicker-dark-theme .cdk-program-focused .mat-calendar-body-active>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){background-color:#373c4c}::ng-deep .mat-datepicker-popup .dr-datepicker-dark-theme .mat-calendar-body-today:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){border:none;background-color:#1d1d6d;color:#fff}::ng-deep .mat-datepicker-popup .dr-datepicker-dark-theme .dr-quarterly-datepicker .quarter-selector:hover{background:#373c4c!important;color:#fff!important}::ng-deep .mat-datepicker-popup .dr-datepicker-dark-theme .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){background:#373c4c;color:#fff}::ng-deep .mat-datepicker-popup .dr-datepicker-dark-theme.dr-week-datepicker .weeks__container{color:#fff}::ng-deep .mat-datepicker-popup .dr-datepicker-dark-theme.dr-week-datepicker .mat-calendar-body-in-range .mat-calendar-body-selected,::ng-deep .mat-datepicker-popup .dr-datepicker-dark-theme.dr-week-datepicker .mat-calendar-body-in-range .mat-calendar-body-cell-content{background-color:#4646ce!important;color:#fff!important}::ng-deep .mat-datepicker-popup .dr-datepicker-dark-theme.dr-week-datepicker .weeks .btn:hover{background:#373c4c!important;color:#fff!important}::ng-deep .mat-datepicker-popup .dr-datepicker-dark-theme .mat-calendar-body-selected{background-color:#4646ce;color:#fff}::ng-deep .mat-datepicker-popup .dr-datepicker-dark-theme .mat-calendar-body-disabled>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){color:#aeabac}::ng-deep .mat-datepicker-popup .dr-datepicker-dark-theme dr-date-picker_custom-header .dr-date-paging:hover{background-color:transparent}::ng-deep .mat-datepicker-popup .dr-datepicker-dark-theme dr-date-picker_custom-header .dr-date-paging>.dr-icon-arrow-right,::ng-deep .mat-datepicker-popup .dr-datepicker-dark-theme dr-date-picker_custom-header .dr-date-paging>.dr-icon-arrow-left{color:#aeabac}::ng-deep .mat-datepicker-popup .dr-datepicker-dark-theme dr-date-picker_custom-header .dr-date-paging>.dr-icon-arrow-right:hover,::ng-deep .mat-datepicker-popup .dr-datepicker-dark-theme dr-date-picker_custom-header .dr-date-paging>.dr-icon-arrow-left:hover{background:#373c4c;border-radius:12px;cursor:pointer}\n"] }]
     }], function () { return [{ type: i0.ChangeDetectorRef }, { type: i1$3.DateAdapter }, { type: DrDatePickerService }]; }, { id: [{
             type: Input
         }], hostId: [{
@@ -4826,7 +4869,7 @@ class RadioGroupComponent {
         // option properties right of since they already was initialized.
         // Instead we schedule microtask to update radios after change detection
         // run is finished and trigger one more change detection run.
-        switchMap((radios) => from(Promise.resolve(radios))), takeUntil$1(this.destroy$))
+        switchMap((radios) => from(Promise.resolve(radios))), takeUntil(this.destroy$))
             .subscribe(() => this.updateAndSubscribeToRadios());
     }
     ngOnDestroy() {
@@ -4873,7 +4916,7 @@ class RadioGroupComponent {
             return;
         }
         merge$1(...this.radios.map((radio) => radio.valueChange))
-            .pipe(takeUntil$1(merge$1(this.radios.changes, this.destroy$)))
+            .pipe(takeUntil(merge$1(this.radios.changes, this.destroy$)))
             .subscribe((value) => {
             this.writeValue(value);
             this.propagateValue(value);
@@ -4890,7 +4933,7 @@ class RadioGroupComponent {
         }
         const hostElement = this.hostElement.nativeElement;
         fromEvent(hostElement, 'focusin')
-            .pipe(filter((event) => hostElement.contains(event.target)), switchMap(() => merge$1(fromEvent(this.document, 'focusin'), fromEvent(this.document, 'click'))), filter((event) => !hostElement.contains(event.target)), takeUntil$1(merge$1(this.radios.changes, this.destroy$)))
+            .pipe(filter((event) => hostElement.contains(event.target)), switchMap(() => merge$1(fromEvent(this.document, 'focusin'), fromEvent(this.document, 'click'))), filter((event) => !hostElement.contains(event.target)), takeUntil(merge$1(this.radios.changes, this.destroy$)))
             .subscribe(() => this.onTouched());
     }
     updateAndMarkForCheckRadios(updateFn) {
@@ -5204,7 +5247,7 @@ class DrFiscalMonthCalendarHeaderComponent extends DrDatePickerCustomHeaderCompo
         }
     }
     listenToCalendarViewChanges() {
-        this._calendar.viewChanged.pipe(takeUntil$1(this._destroyed)).subscribe(() => {
+        this._calendar.viewChanged.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {
             this.setPeriodLabels();
             if (this._calendar.multiYearView) {
                 this.transformDateInMultiyearViewAccordingToFY();
@@ -5392,10 +5435,10 @@ class DrFiscalMonthCalendarPickerComponent extends DrDatePickerComponent {
         } if (rf & 2) {
             i0.ɵɵproperty("ngIf", !ctx.useButton);
             i0.ɵɵadvance(1);
-            i0.ɵɵproperty("ngIf", i0.ɵɵpipeBind1(2, 3, ctx.datePickerService.timeframe$) === "week");
+            i0.ɵɵproperty("ngIf", i0.ɵɵpipeBind1(2, 3, ctx.datePickerService.timeframe$) === ctx.timeframeOption.WEEK);
             i0.ɵɵadvance(2);
-            i0.ɵɵproperty("ngIf", i0.ɵɵpipeBind1(4, 5, ctx.datePickerService.timeframe$) !== "week");
-        } }, dependencies: [DrButtonComponent, i2.DefaultValueAccessor, i2.NgControlStatus, i2.NgControlStatusGroup, i2.NgModel, i2.FormGroupDirective, i2.FormControlName, i1.NgIf, i6.MatDatepicker, i6.MatDatepickerInput, i6.MatDateRangeInput, i6.MatStartDate, i6.MatEndDate, i6.MatDateRangePicker, DrDatePickerFormatDirective, i1.AsyncPipe], styles: ["[_nghost-%COMP%]{position:relative;width:100%;display:flex;flex-direction:row;min-height:32px;height:32px;font-size:14px;font-family:Poppins,sans-serif;background-color:#fff;border:1px solid #9ea1aa;border-radius:6px;color:#333;overflow:hidden;outline:none;cursor:pointer}.use-button-picker[_nghost-%COMP%]{border:none}[_nghost-%COMP%]:hover{border-color:#9ea1aa}.active[_nghost-%COMP%], [_nghost-%COMP%]:focus-within{border-color:#4646ce!important;color:#333}.disabled[_nghost-%COMP%]{pointer-events:none;border:1px solid #aeabac;background:#f0f1f4;color:#aeabac}.disabled[_nghost-%COMP%]:after{color:#aeabac}.ng-valid.ng-dirty[_nghost-%COMP%]{border-color:#037c5a}.ng-invalid.ng-dirty[_nghost-%COMP%]:not(:focus-within){border-color:#bf1d30!important}.ng-untouched.ng-valid[_nghost-%COMP%]{border-color:#9ea1aa}.use-button-picker[_nghost-%COMP%]:after{display:none}[_nghost-%COMP%]:not(.use-button-picker):after, [_nghost-%COMP%]:not(.use-button-picker):before{position:absolute;display:flex;border-color:#6d6e6f transparent transparent;color:#6d6e6f}[_nghost-%COMP%]:not(.use-button-picker):after{font-family:DataRails!important;content:var(--dr-icon-arrow-down, \"\\ea18\");font-size:24px;color:#6d6e6f;top:0;bottom:0;right:8px;pointer-events:none;position:absolute;display:flex;align-items:center;justify-content:center}[_nghost-%COMP%]   i[_ngcontent-%COMP%]{display:flex;align-items:center;position:absolute;color:#6d6e6f;left:8px;top:0;bottom:0}[_nghost-%COMP%]   input[_ngcontent-%COMP%]{display:flex;flex-grow:1;height:100%;border:none;text-align:left;padding-left:35px;padding-right:25px;cursor:pointer!important;outline:none}[_nghost-%COMP%]   input.when-quarter[_ngcontent-%COMP%]{position:absolute;visibility:hidden}[_nghost-%COMP%]   input[_ngcontent-%COMP%]:disabled{border:none;color:#aeabac;background:transparent}[_nghost-%COMP%]   input[_ngcontent-%COMP%]::-webkit-search-decoration, [_nghost-%COMP%]   input[_ngcontent-%COMP%]::-webkit-search-cancel-button, [_nghost-%COMP%]   input[_ngcontent-%COMP%]::-webkit-search-results-button, [_nghost-%COMP%]   input[_ngcontent-%COMP%]::-webkit-search-results-decoration{-webkit-appearance:none}[_nghost-%COMP%]   input[_ngcontent-%COMP%]::placeholder{color:#6d6e6f;font-size:14px;line-height:18px}[_nghost-%COMP%]   input.hidden-calendar-input[_ngcontent-%COMP%]{width:0;height:0;padding:0}[_nghost-%COMP%]   .datepicker-button[_ngcontent-%COMP%]{width:100%}[_nghost-%COMP%]   .range-input[_ngcontent-%COMP%]{position:absolute;height:0;width:0;bottom:0;left:0;z-index:-1}  .mat-datepicker-popup .dr-week-datepicker{width:386px!important}  .mat-datepicker-popup .dr-week-datepicker .mat-calendar-body-in-range:before{background:initial!important}  .mat-datepicker-popup .dr-week-datepicker .mat-calendar-body-in-range .mat-calendar-body-selected,   .mat-datepicker-popup .dr-week-datepicker .mat-calendar-body-in-range .mat-calendar-body-cell-content{background:#f2f2fb!important;color:#4646ce!important;font-weight:600!important}  .mat-datepicker-popup .mat-datepicker-content{margin:7px 0;box-shadow:0 4px 8px 1px #00000040;border-radius:12px!important}  .mat-datepicker-popup .mat-datepicker-content button[disabled]{border:inherit;color:inherit;background-color:inherit}  .mat-datepicker-popup .mat-datepicker-content button[disabled]:hover{border:inherit}  .mat-datepicker-popup .cdk-keyboard-focused .mat-calendar-body-active>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical),   .mat-datepicker-popup .cdk-program-focused .mat-calendar-body-active>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){background-color:#fff}  .mat-datepicker-popup .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){background:#f2f2fb;color:#4646ce;font-weight:600}  .mat-datepicker-popup .mat-calendar-body-selected{background-color:#4646ce;color:#f2f2fb;font-weight:600}  .mat-datepicker-popup .mat-calendar-body-today.mat-calendar-body-selected{box-shadow:none}  .mat-datepicker-popup .mat-button-focus-overlay{background:#f5f5f5}  .mat-datepicker-popup .mat-calendar-controls .mat-icon-button:hover .mat-button-focus-overlay{opacity:1!important;background:#f5f5f5;transition:opacity .2s cubic-bezier(.35,0,.25,1)}  .mat-datepicker-popup .mat-calendar-controls .mat-calendar-period-button:hover{background:#f5f5f5;transition:background .2s cubic-bezier(.35,0,.25,1)}  .mat-datepicker-popup .mat-calendar-table-header th{font-size:14px;font-weight:600;color:#333}  .mat-datepicker-popup .mat-calendar-table-header-divider{display:none}  .mat-datepicker-popup .mat-calendar-body-label{color:#fff;padding:0}  .mat-datepicker-popup .mat-calendar-body>tr[aria-hidden=true]>.mat-calendar-body-label{display:none}  .mat-datepicker-popup .mat-calendar-content{display:flex}  .mat-datepicker-popup .mat-calendar-content dr-week-selector{flex:0}  .mat-datepicker-popup .mat-calendar-content mat-month-view,   .mat-datepicker-popup .mat-calendar-content mat-multi-year-view,   .mat-datepicker-popup .mat-calendar-content mat-year-view{flex:1}"], changeDetection: 0 }); }
+            i0.ɵɵproperty("ngIf", i0.ɵɵpipeBind1(4, 5, ctx.datePickerService.timeframe$) !== ctx.timeframeOption.WEEK);
+        } }, dependencies: [DrButtonComponent, i2.DefaultValueAccessor, i2.NgControlStatus, i2.NgControlStatusGroup, i2.NgModel, i2.FormGroupDirective, i2.FormControlName, i1.NgIf, i6.MatDatepicker, i6.MatDatepickerInput, i6.MatDateRangeInput, i6.MatStartDate, i6.MatEndDate, i6.MatDateRangePicker, DrDatePickerFormatDirective, i1.AsyncPipe], styles: ["[_nghost-%COMP%]{position:relative;width:100%;display:flex;flex-direction:row;min-height:32px;height:32px;font-size:14px;font-family:Poppins,sans-serif;background-color:#fff;border:1px solid #9ea1aa;border-radius:6px;color:#333;overflow:hidden;outline:none;cursor:pointer}.use-button-picker[_nghost-%COMP%]{border:none}[_nghost-%COMP%]:hover{border-color:#9ea1aa}.active[_nghost-%COMP%], [_nghost-%COMP%]:focus-within{border-color:#4646ce!important;color:#333}.disabled[_nghost-%COMP%]{pointer-events:none;border:1px solid #aeabac;background:#f0f1f4;color:#aeabac}.disabled[_nghost-%COMP%]:after{color:#aeabac}.ng-valid.ng-dirty[_nghost-%COMP%]{border-color:#037c5a}.ng-invalid.ng-dirty[_nghost-%COMP%]:not(:focus-within){border-color:#bf1d30!important}.ng-untouched.ng-valid[_nghost-%COMP%]{border-color:#9ea1aa}.use-button-picker[_nghost-%COMP%]:after{display:none}[_nghost-%COMP%]:not(.use-button-picker):after, [_nghost-%COMP%]:not(.use-button-picker):before{position:absolute;display:flex;border-color:#6d6e6f transparent transparent;color:#6d6e6f}[_nghost-%COMP%]:not(.use-button-picker):after{font-family:DataRails!important;content:var(--dr-icon-arrow-down, \"\\ea18\");font-size:24px;color:#6d6e6f;top:0;bottom:0;right:8px;pointer-events:none;position:absolute;display:flex;align-items:center;justify-content:center}[_nghost-%COMP%]   i[_ngcontent-%COMP%]{display:flex;align-items:center;position:absolute;color:#6d6e6f;left:8px;top:0;bottom:0}[_nghost-%COMP%]   input[_ngcontent-%COMP%]{display:flex;flex-grow:1;height:100%;border:none;text-align:left;padding-left:35px;padding-right:25px;cursor:pointer!important;outline:none}[_nghost-%COMP%]   input.when-quarter[_ngcontent-%COMP%]{position:absolute;visibility:hidden}[_nghost-%COMP%]   input[_ngcontent-%COMP%]:disabled{border:none;color:#aeabac;background:transparent}[_nghost-%COMP%]   input[_ngcontent-%COMP%]::-webkit-search-decoration, [_nghost-%COMP%]   input[_ngcontent-%COMP%]::-webkit-search-cancel-button, [_nghost-%COMP%]   input[_ngcontent-%COMP%]::-webkit-search-results-button, [_nghost-%COMP%]   input[_ngcontent-%COMP%]::-webkit-search-results-decoration{-webkit-appearance:none}[_nghost-%COMP%]   input[_ngcontent-%COMP%]::placeholder{color:#6d6e6f;font-size:14px;line-height:18px}[_nghost-%COMP%]   input.hidden-calendar-input[_ngcontent-%COMP%]{width:0;height:0;padding:0}[_nghost-%COMP%]   .datepicker-button[_ngcontent-%COMP%]{width:100%}[_nghost-%COMP%]   .range-input[_ngcontent-%COMP%]{position:absolute;height:0;width:0;bottom:0;left:0;z-index:-1}  .mat-datepicker-popup .dr-week-datepicker{min-width:min(400px,100vw)!important}  .mat-datepicker-popup .dr-week-datepicker .mat-calendar-body-today{background:#f2f2fb;color:#4646ce;border:none;font-weight:600}  .mat-datepicker-popup .dr-week-datepicker .mat-calendar-body-cell-preview{border:none}  .mat-datepicker-popup .dr-week-datepicker .mat-calendar-body-range-start .mat-calendar-body-cell-preview,   .mat-datepicker-popup .dr-week-datepicker .mat-calendar-body-preview-start .mat-calendar-body-cell-preview{left:5%;width:95%;border-top-left-radius:40px;border-bottom-left-radius:40px}  .mat-datepicker-popup .dr-week-datepicker .mat-calendar-body-range-end .mat-calendar-body-cell-preview,   .mat-datepicker-popup .dr-week-datepicker .mat-calendar-body-preview-end .mat-calendar-body-cell-preview{right:5%;width:95%;border-top-right-radius:40px;border-bottom-right-radius:40px}  .mat-datepicker-popup .dr-week-datepicker .mat-calendar-body-in-preview:not(.mat-calendar-body-in-range) .mat-calendar-body-cell-preview{background-color:#f5f5f5}  .mat-datepicker-popup .dr-week-datepicker .mat-calendar-body-in-preview:not(.mat-calendar-body-in-range)>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){background-color:transparent!important}  .mat-datepicker-popup .dr-week-datepicker .mat-calendar-body-in-preview:not(.mat-calendar-body-in-range)>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical):not(.mat-calendar-body-today){color:#19181a!important;font-weight:400!important}  .mat-datepicker-popup .dr-week-datepicker .mat-calendar-body-in-range .mat-calendar-body-cell-preview{background:#4646ce!important}  .mat-datepicker-popup .dr-week-datepicker .mat-calendar-body-in-range:before{background:initial!important}  .mat-datepicker-popup .dr-week-datepicker .mat-calendar-body-in-range .mat-calendar-body-selected,   .mat-datepicker-popup .dr-week-datepicker .mat-calendar-body-in-range .mat-calendar-body-cell-content{background:transparent!important;color:#f2f2fb!important;font-weight:600!important}  .mat-datepicker-popup .mat-datepicker-content{margin:7px 0;box-shadow:0 4px 8px 1px #00000040;border-radius:12px!important}  .mat-datepicker-popup .mat-datepicker-content button[disabled]{border:inherit;color:inherit;background-color:inherit}  .mat-datepicker-popup .mat-datepicker-content button[disabled]:hover{border:inherit}  .mat-datepicker-popup .cdk-keyboard-focused .mat-calendar-body-active>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical),   .mat-datepicker-popup .cdk-program-focused .mat-calendar-body-active>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){background-color:#fff}  .mat-datepicker-popup .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){background:#f2f2fb;color:#4646ce;font-weight:600}  .mat-datepicker-popup .mat-calendar-body-selected{background-color:#4646ce;color:#f2f2fb;font-weight:600}  .mat-datepicker-popup .mat-calendar-body-today.mat-calendar-body-selected{box-shadow:none}  .mat-datepicker-popup .mat-button-focus-overlay{background:#f5f5f5}  .mat-datepicker-popup .mat-calendar-controls .mat-icon-button:hover .mat-button-focus-overlay{opacity:1!important;background:#f5f5f5;transition:opacity .2s cubic-bezier(.35,0,.25,1)}  .mat-datepicker-popup .mat-calendar-controls .mat-calendar-period-button:hover{background:#f5f5f5;transition:background .2s cubic-bezier(.35,0,.25,1)}  .mat-datepicker-popup .mat-calendar-table-header th{font-size:14px;font-weight:600;color:#333}  .mat-datepicker-popup .mat-calendar-table-header-divider{display:none}  .mat-datepicker-popup .mat-calendar-body-label{color:#fff;padding:0}  .mat-datepicker-popup .mat-calendar-body>tr[aria-hidden=true]>.mat-calendar-body-label{display:none}  .mat-datepicker-popup .mat-calendar-content{display:flex}  .mat-datepicker-popup .mat-calendar-content dr-week-selector{flex:0}  .mat-datepicker-popup .mat-calendar-content mat-month-view,   .mat-datepicker-popup .mat-calendar-content mat-multi-year-view,   .mat-datepicker-popup .mat-calendar-content mat-year-view{flex:1}"], changeDetection: 0 }); }
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DrFiscalMonthCalendarPickerComponent, [{
         type: Component,
@@ -5403,7 +5446,7 @@ class DrFiscalMonthCalendarPickerComponent extends DrDatePickerComponent {
                     { provide: NG_VALUE_ACCESSOR, useExisting: DrFiscalMonthCalendarPickerComponent, multi: true },
                     { provide: DateAdapter, useClass: FiscalMonthAdapter },
                     DrDatePickerService,
-                ], template: "<i *ngIf=\"!useButton\" class=\"dr-icon-date\" (click)=\"datePicker.open()\"></i>\n\n<ng-container *ngIf=\"(datePickerService.timeframe$ | async) === 'week'\">\n    <input\n        [attr.id]=\"id\"\n        [ngModel]=\"input.value\"\n        (click)=\"datePicker.open()\"\n        [disabled]=\"disabled\"\n        [placeholder]=\"placeholder\"\n        [readonly]=\"readonly\"\n        [min]=\"_min\"\n        [max]=\"_max\" />\n\n    <mat-date-range-input [formGroup]=\"rangeForm\" [rangePicker]=\"datePicker\" [dateFilter]=\"dateFilter\" class=\"range-input\">\n        <input\n            matStartDate\n            #input\n            [drDatePickerFormat]=\"datePickerService.format$ | async\"\n            formControlName=\"start\"\n            (dateChange)=\"valueChangedInCalendar(rangeForm.value.start)\" />\n        <input matEndDate [drDatePickerFormat]=\"datePickerService.format$ | async\" formControlName=\"end\" />\n    </mat-date-range-input>\n\n    <mat-date-range-picker\n        #datePicker\n        [startAt]=\"_startAt\"\n        [panelClass]=\"'dr-week-datepicker' + (panelClass ? ' ' + panelClass : '')\"\n        [calendarHeaderComponent]=\"customHeader\"\n        (yearSelected)=\"chosenPeriodHandler($event, timeframeOption.YEAR, datePicker)\"\n        (monthSelected)=\"chosenPeriodHandler($event, timeframeOption.MONTH, datePicker)\"\n        (opened)=\"onOpen()\"\n        (closed)=\"onCLose()\">\n    </mat-date-range-picker>\n</ng-container>\n\n<ng-container *ngIf=\"(datePickerService.timeframe$ | async) !== 'week'\">\n    <input\n        [attr.id]=\"id\"\n        [ngModel]=\"displayValue$ | async\"\n        (ngModelChange)=\"valueChangedInCalendar($event)\"\n        (click)=\"datePicker.open()\"\n        [matDatepicker]=\"datePicker\"\n        [matDatepickerFilter]=\"dateFilter\"\n        [disabled]=\"disabled\"\n        [placeholder]=\"placeholder\"\n        [drDatePickerFormat]=\"datePickerService.format$ | async\"\n        [readonly]=\"readonly\"\n        [min]=\"_min\"\n        [max]=\"_max\"\n        [class.hidden-calendar-input]=\"useButton\" />\n\n    <dr-button\n        *ngIf=\"useButton\"\n        [icon]=\"'dr-icon-date'\"\n        [iconAfter]=\"iconAfterButton\"\n        (click)=\"datePicker.open()\"\n        class=\"datepicker-button\">\n        {{ buttonLabel || 'Select Date' }}\n    </dr-button>\n\n    <mat-datepicker\n        #datePicker\n        [panelClass]=\"panelClass\"\n        [startAt]=\"_startAt\"\n        [calendarHeaderComponent]=\"customHeader\"\n        (yearSelected)=\"chosenPeriodHandler($event, timeframeOption.YEAR, datePicker)\"\n        (monthSelected)=\"chosenPeriodHandler($event, timeframeOption.MONTH, datePicker)\"\n        (opened)=\"onOpen()\"\n        (closed)=\"onCLose()\">\n    </mat-datepicker>\n</ng-container>\n", styles: [":host{position:relative;width:100%;display:flex;flex-direction:row;min-height:32px;height:32px;font-size:14px;font-family:Poppins,sans-serif;background-color:#fff;border:1px solid #9ea1aa;border-radius:6px;color:#333;overflow:hidden;outline:none;cursor:pointer}:host.use-button-picker{border:none}:host:hover{border-color:#9ea1aa}:host.active,:host:focus-within{border-color:#4646ce!important;color:#333}:host.disabled{pointer-events:none;border:1px solid #aeabac;background:#f0f1f4;color:#aeabac}:host.disabled:after{color:#aeabac}:host.ng-valid.ng-dirty{border-color:#037c5a}:host.ng-invalid.ng-dirty:not(:focus-within){border-color:#bf1d30!important}:host.ng-untouched.ng-valid{border-color:#9ea1aa}:host.use-button-picker:after{display:none}:host:not(.use-button-picker):after,:host:not(.use-button-picker):before{position:absolute;display:flex;border-color:#6d6e6f transparent transparent;color:#6d6e6f}:host:not(.use-button-picker):after{font-family:DataRails!important;content:var(--dr-icon-arrow-down, \"\\ea18\");font-size:24px;color:#6d6e6f;top:0;bottom:0;right:8px;pointer-events:none;position:absolute;display:flex;align-items:center;justify-content:center}:host i{display:flex;align-items:center;position:absolute;color:#6d6e6f;left:8px;top:0;bottom:0}:host input{display:flex;flex-grow:1;height:100%;border:none;text-align:left;padding-left:35px;padding-right:25px;cursor:pointer!important;outline:none}:host input.when-quarter{position:absolute;visibility:hidden}:host input:disabled{border:none;color:#aeabac;background:transparent}:host input::-webkit-search-decoration,:host input::-webkit-search-cancel-button,:host input::-webkit-search-results-button,:host input::-webkit-search-results-decoration{-webkit-appearance:none}:host input::placeholder{color:#6d6e6f;font-size:14px;line-height:18px}:host input.hidden-calendar-input{width:0;height:0;padding:0}:host .datepicker-button{width:100%}:host .range-input{position:absolute;height:0;width:0;bottom:0;left:0;z-index:-1}::ng-deep .mat-datepicker-popup .dr-week-datepicker{width:386px!important}::ng-deep .mat-datepicker-popup .dr-week-datepicker .mat-calendar-body-in-range:before{background:initial!important}::ng-deep .mat-datepicker-popup .dr-week-datepicker .mat-calendar-body-in-range .mat-calendar-body-selected,::ng-deep .mat-datepicker-popup .dr-week-datepicker .mat-calendar-body-in-range .mat-calendar-body-cell-content{background:#f2f2fb!important;color:#4646ce!important;font-weight:600!important}::ng-deep .mat-datepicker-popup .mat-datepicker-content{margin:7px 0;box-shadow:0 4px 8px 1px #00000040;border-radius:12px!important}::ng-deep .mat-datepicker-popup .mat-datepicker-content button[disabled]{border:inherit;color:inherit;background-color:inherit}::ng-deep .mat-datepicker-popup .mat-datepicker-content button[disabled]:hover{border:inherit}::ng-deep .mat-datepicker-popup .cdk-keyboard-focused .mat-calendar-body-active>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical),::ng-deep .mat-datepicker-popup .cdk-program-focused .mat-calendar-body-active>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){background-color:#fff}::ng-deep .mat-datepicker-popup .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){background:#f2f2fb;color:#4646ce;font-weight:600}::ng-deep .mat-datepicker-popup .mat-calendar-body-selected{background-color:#4646ce;color:#f2f2fb;font-weight:600}::ng-deep .mat-datepicker-popup .mat-calendar-body-today.mat-calendar-body-selected{box-shadow:none}::ng-deep .mat-datepicker-popup .mat-button-focus-overlay{background:#f5f5f5}::ng-deep .mat-datepicker-popup .mat-calendar-controls .mat-icon-button:hover .mat-button-focus-overlay{opacity:1!important;background:#f5f5f5;transition:opacity .2s cubic-bezier(.35,0,.25,1)}::ng-deep .mat-datepicker-popup .mat-calendar-controls .mat-calendar-period-button:hover{background:#f5f5f5;transition:background .2s cubic-bezier(.35,0,.25,1)}::ng-deep .mat-datepicker-popup .mat-calendar-table-header th{font-size:14px;font-weight:600;color:#333}::ng-deep .mat-datepicker-popup .mat-calendar-table-header-divider{display:none}::ng-deep .mat-datepicker-popup .mat-calendar-body-label{color:#fff;padding:0}::ng-deep .mat-datepicker-popup .mat-calendar-body>tr[aria-hidden=true]>.mat-calendar-body-label{display:none}::ng-deep .mat-datepicker-popup .mat-calendar-content{display:flex}::ng-deep .mat-datepicker-popup .mat-calendar-content dr-week-selector{flex:0}::ng-deep .mat-datepicker-popup .mat-calendar-content mat-month-view,::ng-deep .mat-datepicker-popup .mat-calendar-content mat-multi-year-view,::ng-deep .mat-datepicker-popup .mat-calendar-content mat-year-view{flex:1}\n"] }]
+                ], template: "<i *ngIf=\"!useButton\" class=\"dr-icon-date\" (click)=\"datePicker.open()\"></i>\n\n<ng-container *ngIf=\"(datePickerService.timeframe$ | async) === timeframeOption.WEEK\">\n    <input\n        [attr.id]=\"id\"\n        [ngModel]=\"input.value\"\n        (click)=\"datePicker.open()\"\n        [disabled]=\"disabled\"\n        [placeholder]=\"placeholder\"\n        [readonly]=\"readonly\"\n        [min]=\"_min\"\n        [max]=\"_max\" />\n\n    <mat-date-range-input [formGroup]=\"rangeForm\" [rangePicker]=\"datePicker\" [dateFilter]=\"dateFilter\" class=\"range-input\">\n        <input\n            matStartDate\n            #input\n            [drDatePickerFormat]=\"datePickerService.format$ | async\"\n            formControlName=\"start\"\n            (dateChange)=\"valueChangedInCalendar(rangeForm.value.start)\" />\n        <input matEndDate [drDatePickerFormat]=\"datePickerService.format$ | async\" formControlName=\"end\" />\n    </mat-date-range-input>\n\n    <mat-date-range-picker\n        #datePicker\n        [startAt]=\"_startAt\"\n        [panelClass]=\"'dr-week-datepicker' + (panelClass ? ' ' + panelClass : '')\"\n        [calendarHeaderComponent]=\"customHeader\"\n        (yearSelected)=\"chosenPeriodHandler($event, timeframeOption.YEAR, datePicker)\"\n        (monthSelected)=\"chosenPeriodHandler($event, timeframeOption.MONTH, datePicker)\"\n        (opened)=\"onOpen()\"\n        (closed)=\"onCLose()\">\n    </mat-date-range-picker>\n</ng-container>\n\n<ng-container *ngIf=\"(datePickerService.timeframe$ | async) !== timeframeOption.WEEK\">\n    <input\n        [attr.id]=\"id\"\n        [ngModel]=\"displayValue$ | async\"\n        (ngModelChange)=\"valueChangedInCalendar($event)\"\n        (click)=\"datePicker.open()\"\n        [matDatepicker]=\"datePicker\"\n        [matDatepickerFilter]=\"dateFilter\"\n        [disabled]=\"disabled\"\n        [placeholder]=\"placeholder\"\n        [drDatePickerFormat]=\"datePickerService.format$ | async\"\n        [readonly]=\"readonly\"\n        [min]=\"_min\"\n        [max]=\"_max\"\n        [class.hidden-calendar-input]=\"useButton\" />\n\n    <dr-button\n        *ngIf=\"useButton\"\n        [icon]=\"'dr-icon-date'\"\n        [iconAfter]=\"iconAfterButton\"\n        (click)=\"datePicker.open()\"\n        class=\"datepicker-button\">\n        {{ buttonLabel || 'Select Date' }}\n    </dr-button>\n\n    <mat-datepicker\n        #datePicker\n        [panelClass]=\"panelClass\"\n        [startAt]=\"_startAt\"\n        [calendarHeaderComponent]=\"customHeader\"\n        (yearSelected)=\"chosenPeriodHandler($event, timeframeOption.YEAR, datePicker)\"\n        (monthSelected)=\"chosenPeriodHandler($event, timeframeOption.MONTH, datePicker)\"\n        (opened)=\"onOpen()\"\n        (closed)=\"onCLose()\">\n    </mat-datepicker>\n</ng-container>\n", styles: [":host{position:relative;width:100%;display:flex;flex-direction:row;min-height:32px;height:32px;font-size:14px;font-family:Poppins,sans-serif;background-color:#fff;border:1px solid #9ea1aa;border-radius:6px;color:#333;overflow:hidden;outline:none;cursor:pointer}:host.use-button-picker{border:none}:host:hover{border-color:#9ea1aa}:host.active,:host:focus-within{border-color:#4646ce!important;color:#333}:host.disabled{pointer-events:none;border:1px solid #aeabac;background:#f0f1f4;color:#aeabac}:host.disabled:after{color:#aeabac}:host.ng-valid.ng-dirty{border-color:#037c5a}:host.ng-invalid.ng-dirty:not(:focus-within){border-color:#bf1d30!important}:host.ng-untouched.ng-valid{border-color:#9ea1aa}:host.use-button-picker:after{display:none}:host:not(.use-button-picker):after,:host:not(.use-button-picker):before{position:absolute;display:flex;border-color:#6d6e6f transparent transparent;color:#6d6e6f}:host:not(.use-button-picker):after{font-family:DataRails!important;content:var(--dr-icon-arrow-down, \"\\ea18\");font-size:24px;color:#6d6e6f;top:0;bottom:0;right:8px;pointer-events:none;position:absolute;display:flex;align-items:center;justify-content:center}:host i{display:flex;align-items:center;position:absolute;color:#6d6e6f;left:8px;top:0;bottom:0}:host input{display:flex;flex-grow:1;height:100%;border:none;text-align:left;padding-left:35px;padding-right:25px;cursor:pointer!important;outline:none}:host input.when-quarter{position:absolute;visibility:hidden}:host input:disabled{border:none;color:#aeabac;background:transparent}:host input::-webkit-search-decoration,:host input::-webkit-search-cancel-button,:host input::-webkit-search-results-button,:host input::-webkit-search-results-decoration{-webkit-appearance:none}:host input::placeholder{color:#6d6e6f;font-size:14px;line-height:18px}:host input.hidden-calendar-input{width:0;height:0;padding:0}:host .datepicker-button{width:100%}:host .range-input{position:absolute;height:0;width:0;bottom:0;left:0;z-index:-1}::ng-deep .mat-datepicker-popup .dr-week-datepicker{min-width:min(400px,100vw)!important}::ng-deep .mat-datepicker-popup .dr-week-datepicker .mat-calendar-body-today{background:#f2f2fb;color:#4646ce;border:none;font-weight:600}::ng-deep .mat-datepicker-popup .dr-week-datepicker .mat-calendar-body-cell-preview{border:none}::ng-deep .mat-datepicker-popup .dr-week-datepicker .mat-calendar-body-range-start .mat-calendar-body-cell-preview,::ng-deep .mat-datepicker-popup .dr-week-datepicker .mat-calendar-body-preview-start .mat-calendar-body-cell-preview{left:5%;width:95%;border-top-left-radius:40px;border-bottom-left-radius:40px}::ng-deep .mat-datepicker-popup .dr-week-datepicker .mat-calendar-body-range-end .mat-calendar-body-cell-preview,::ng-deep .mat-datepicker-popup .dr-week-datepicker .mat-calendar-body-preview-end .mat-calendar-body-cell-preview{right:5%;width:95%;border-top-right-radius:40px;border-bottom-right-radius:40px}::ng-deep .mat-datepicker-popup .dr-week-datepicker .mat-calendar-body-in-preview:not(.mat-calendar-body-in-range) .mat-calendar-body-cell-preview{background-color:#f5f5f5}::ng-deep .mat-datepicker-popup .dr-week-datepicker .mat-calendar-body-in-preview:not(.mat-calendar-body-in-range)>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){background-color:transparent!important}::ng-deep .mat-datepicker-popup .dr-week-datepicker .mat-calendar-body-in-preview:not(.mat-calendar-body-in-range)>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical):not(.mat-calendar-body-today){color:#19181a!important;font-weight:400!important}::ng-deep .mat-datepicker-popup .dr-week-datepicker .mat-calendar-body-in-range .mat-calendar-body-cell-preview{background:#4646ce!important}::ng-deep .mat-datepicker-popup .dr-week-datepicker .mat-calendar-body-in-range:before{background:initial!important}::ng-deep .mat-datepicker-popup .dr-week-datepicker .mat-calendar-body-in-range .mat-calendar-body-selected,::ng-deep .mat-datepicker-popup .dr-week-datepicker .mat-calendar-body-in-range .mat-calendar-body-cell-content{background:transparent!important;color:#f2f2fb!important;font-weight:600!important}::ng-deep .mat-datepicker-popup .mat-datepicker-content{margin:7px 0;box-shadow:0 4px 8px 1px #00000040;border-radius:12px!important}::ng-deep .mat-datepicker-popup .mat-datepicker-content button[disabled]{border:inherit;color:inherit;background-color:inherit}::ng-deep .mat-datepicker-popup .mat-datepicker-content button[disabled]:hover{border:inherit}::ng-deep .mat-datepicker-popup .cdk-keyboard-focused .mat-calendar-body-active>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical),::ng-deep .mat-datepicker-popup .cdk-program-focused .mat-calendar-body-active>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){background-color:#fff}::ng-deep .mat-datepicker-popup .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){background:#f2f2fb;color:#4646ce;font-weight:600}::ng-deep .mat-datepicker-popup .mat-calendar-body-selected{background-color:#4646ce;color:#f2f2fb;font-weight:600}::ng-deep .mat-datepicker-popup .mat-calendar-body-today.mat-calendar-body-selected{box-shadow:none}::ng-deep .mat-datepicker-popup .mat-button-focus-overlay{background:#f5f5f5}::ng-deep .mat-datepicker-popup .mat-calendar-controls .mat-icon-button:hover .mat-button-focus-overlay{opacity:1!important;background:#f5f5f5;transition:opacity .2s cubic-bezier(.35,0,.25,1)}::ng-deep .mat-datepicker-popup .mat-calendar-controls .mat-calendar-period-button:hover{background:#f5f5f5;transition:background .2s cubic-bezier(.35,0,.25,1)}::ng-deep .mat-datepicker-popup .mat-calendar-table-header th{font-size:14px;font-weight:600;color:#333}::ng-deep .mat-datepicker-popup .mat-calendar-table-header-divider{display:none}::ng-deep .mat-datepicker-popup .mat-calendar-body-label{color:#fff;padding:0}::ng-deep .mat-datepicker-popup .mat-calendar-body>tr[aria-hidden=true]>.mat-calendar-body-label{display:none}::ng-deep .mat-datepicker-popup .mat-calendar-content{display:flex}::ng-deep .mat-datepicker-popup .mat-calendar-content dr-week-selector{flex:0}::ng-deep .mat-datepicker-popup .mat-calendar-content mat-month-view,::ng-deep .mat-datepicker-popup .mat-calendar-content mat-multi-year-view,::ng-deep .mat-datepicker-popup .mat-calendar-content mat-year-view{flex:1}\n"] }]
     }], null, null); })();
 
 function DrDatePickerWithTimeframeComponent_dr_button_0_Template(rf, ctx) { if (rf & 1) {
@@ -5486,25 +5529,25 @@ class DrDatePickerWithTimeframeComponent extends DrDatePickerComponent {
         this.isNextDateDisabled = false;
         this.isPrevDateDisabled = false;
         this.onChangeDebounced$ = new Subject();
-        this.displayedFormattedValue$ = this.displayValue$.pipe(takeUntil$1(this.destroyed$), map((value) => {
+        this.displayedFormattedValue$ = this.displayValue$.pipe(takeUntil(this.destroyed$), map((value) => {
             if (!value)
                 return this.placeholder;
             return (this.datePickerService.getDisplayPrefix() +
                 this.dateAdapter.format(value, this.datePickerService.getConfiguredFormat(this.datePickerService.timeframe)));
         }));
         datePickerService.isTimeframeSelectionEnabled = true;
-        datePickerService.format$.pipe(takeUntil$1(this.destroyed$)).subscribe((value) => {
+        datePickerService.format$.pipe(takeUntil(this.destroyed$)).subscribe((value) => {
             this.onChangeFormat.emit(datePickerService.normalizeValue(value));
         });
-        datePickerService.presetTag$.pipe(takeUntil$1(this.destroyed$)).subscribe((value) => {
+        datePickerService.presetTag$.pipe(takeUntil(this.destroyed$)).subscribe((value) => {
             let tagObj = PRESET_TAGS_LIST.find((val) => val?.key === value);
             this.presetTagSelected = tagObj?.label;
             this.onChangePresetTag.emit(value);
         });
-        this.datePickerService.onSameDaySelectedInCalendar$.pipe(takeUntil$1(this.destroyed$)).subscribe((value) => {
+        this.datePickerService.onSameDaySelectedInCalendar$.pipe(takeUntil(this.destroyed$)).subscribe((value) => {
             this.setValueFromMoment(value);
         });
-        datePickerService.updatedDateAndClose$.pipe(takeUntil$1(this.destroyed$)).subscribe((value) => {
+        datePickerService.updatedDateAndClose$.pipe(takeUntil(this.destroyed$)).subscribe((value) => {
             if (value) {
                 this.setValueFromMoment(value);
             }
@@ -5518,7 +5561,7 @@ class DrDatePickerWithTimeframeComponent extends DrDatePickerComponent {
         this.datePickerService.isTimeframeSelectionEnabled = this.canSelectTimeframe;
         this.cdr.markForCheck();
         if (this.paginationDebounce) {
-            this.onChangeDebounced$.pipe(takeUntil$1(this.destroyed$), debounceTime(this.paginationDebounce)).subscribe((value) => {
+            this.onChangeDebounced$.pipe(takeUntil(this.destroyed$), debounceTime(this.paginationDebounce)).subscribe((value) => {
                 this.onChangeCallback(value);
             });
         }
@@ -5630,7 +5673,7 @@ class DrDatePickerWithTimeframeComponent extends DrDatePickerComponent {
             i0.ɵɵproperty("ngIf", !ctx.disabled);
             i0.ɵɵadvance(1);
             i0.ɵɵproperty("calendarHeaderComponent", ctx.customHeader)("panelClass", ctx.combinedPanelClass);
-        } }, dependencies: [DrButtonComponent, i2.DefaultValueAccessor, i2.NgControlStatus, i2.NgModel, i1.NgIf, i1.NgTemplateOutlet, i6.MatDatepicker, i6.MatDatepickerInput, DrTooltipDirective, i1.AsyncPipe], styles: ["[_nghost-%COMP%]{position:relative;width:100%;display:flex;flex-direction:row;min-height:32px;height:32px;font-size:14px;font-family:Poppins,sans-serif;background-color:#fff;border:1px solid #9ea1aa;border-radius:6px;color:#333;overflow:hidden;outline:none;cursor:pointer}.use-button-picker[_nghost-%COMP%]{border:none}[_nghost-%COMP%]:hover{border-color:#9ea1aa}.active[_nghost-%COMP%], [_nghost-%COMP%]:focus-within{border-color:#4646ce!important;color:#333}.disabled[_nghost-%COMP%]{pointer-events:none;border:1px solid #aeabac;background:#f0f1f4;color:#aeabac}.disabled[_nghost-%COMP%]:after{color:#aeabac}.ng-valid.ng-dirty[_nghost-%COMP%]{border-color:#037c5a}.ng-invalid.ng-dirty[_nghost-%COMP%]:not(:focus-within){border-color:#bf1d30!important}.ng-untouched.ng-valid[_nghost-%COMP%]{border-color:#9ea1aa}.use-button-picker[_nghost-%COMP%]:after{display:none}[_nghost-%COMP%]:not(.use-button-picker):after, [_nghost-%COMP%]:not(.use-button-picker):before{position:absolute;display:flex;border-color:#6d6e6f transparent transparent;color:#6d6e6f}[_nghost-%COMP%]:not(.use-button-picker):after{font-family:DataRails!important;content:var(--dr-icon-arrow-down, \"\\ea18\");font-size:24px;color:#6d6e6f;top:0;bottom:0;right:8px;pointer-events:none;position:absolute;display:flex;align-items:center;justify-content:center}[_nghost-%COMP%]   i[_ngcontent-%COMP%]{display:flex;align-items:center;position:absolute;color:#6d6e6f;left:8px;top:0;bottom:0}[_nghost-%COMP%]   input[_ngcontent-%COMP%]{display:flex;flex-grow:1;height:100%;border:none;text-align:left;padding-left:35px;padding-right:25px;cursor:pointer!important;outline:none}[_nghost-%COMP%]   input.when-quarter[_ngcontent-%COMP%]{position:absolute;visibility:hidden}[_nghost-%COMP%]   input[_ngcontent-%COMP%]:disabled{border:none;color:#aeabac;background:transparent}[_nghost-%COMP%]   input[_ngcontent-%COMP%]::-webkit-search-decoration, [_nghost-%COMP%]   input[_ngcontent-%COMP%]::-webkit-search-cancel-button, [_nghost-%COMP%]   input[_ngcontent-%COMP%]::-webkit-search-results-button, [_nghost-%COMP%]   input[_ngcontent-%COMP%]::-webkit-search-results-decoration{-webkit-appearance:none}[_nghost-%COMP%]   input[_ngcontent-%COMP%]::placeholder{color:#6d6e6f;font-size:14px;line-height:18px}[_nghost-%COMP%]   input.hidden-calendar-input[_ngcontent-%COMP%]{width:0;height:0;padding:0}[_nghost-%COMP%]   .datepicker-button[_ngcontent-%COMP%]{width:100%}[_nghost-%COMP%]   .range-input[_ngcontent-%COMP%]{position:absolute;height:0;width:0;bottom:0;left:0;z-index:-1}  .mat-datepicker-popup .dr-week-datepicker{width:386px!important}  .mat-datepicker-popup .dr-week-datepicker .mat-calendar-body-in-range:before{background:initial!important}  .mat-datepicker-popup .dr-week-datepicker .mat-calendar-body-in-range .mat-calendar-body-selected,   .mat-datepicker-popup .dr-week-datepicker .mat-calendar-body-in-range .mat-calendar-body-cell-content{background:#f2f2fb!important;color:#4646ce!important;font-weight:600!important}  .mat-datepicker-popup .mat-datepicker-content{margin:7px 0;box-shadow:0 4px 8px 1px #00000040;border-radius:12px!important}  .mat-datepicker-popup .mat-datepicker-content button[disabled]{border:inherit;color:inherit;background-color:inherit}  .mat-datepicker-popup .mat-datepicker-content button[disabled]:hover{border:inherit}  .mat-datepicker-popup .cdk-keyboard-focused .mat-calendar-body-active>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical),   .mat-datepicker-popup .cdk-program-focused .mat-calendar-body-active>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){background-color:#fff}  .mat-datepicker-popup .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){background:#f2f2fb;color:#4646ce;font-weight:600}  .mat-datepicker-popup .mat-calendar-body-selected{background-color:#4646ce;color:#f2f2fb;font-weight:600}  .mat-datepicker-popup .mat-calendar-body-today.mat-calendar-body-selected{box-shadow:none}  .mat-datepicker-popup .mat-button-focus-overlay{background:#f5f5f5}  .mat-datepicker-popup .mat-calendar-controls .mat-icon-button:hover .mat-button-focus-overlay{opacity:1!important;background:#f5f5f5;transition:opacity .2s cubic-bezier(.35,0,.25,1)}  .mat-datepicker-popup .mat-calendar-controls .mat-calendar-period-button:hover{background:#f5f5f5;transition:background .2s cubic-bezier(.35,0,.25,1)}  .mat-datepicker-popup .mat-calendar-table-header th{font-size:14px;font-weight:600;color:#333}  .mat-datepicker-popup .mat-calendar-table-header-divider{display:none}  .mat-datepicker-popup .mat-calendar-body-label{color:#fff;padding:0}  .mat-datepicker-popup .mat-calendar-body>tr[aria-hidden=true]>.mat-calendar-body-label{display:none}  .mat-datepicker-popup .mat-calendar-content{display:flex}  .mat-datepicker-popup .mat-calendar-content dr-week-selector{flex:0}  .mat-datepicker-popup .mat-calendar-content mat-month-view,   .mat-datepicker-popup .mat-calendar-content mat-multi-year-view,   .mat-datepicker-popup .mat-calendar-content mat-year-view{flex:1}[_nghost-%COMP%]{border:none;display:flex;align-items:center;width:-moz-fit-content;width:fit-content;background:transparent}[_nghost-%COMP%]:after{visibility:hidden}.disabled[_nghost-%COMP%]{border:none;padding:0 28px;background:transparent}.disabled[_nghost-%COMP%]   .dr-datepicker-input-container[_ngcontent-%COMP%]{cursor:default;color:#aeabac}.disabled[_nghost-%COMP%]   .dr-datepicker-input-container__formatted-value-display[_ngcontent-%COMP%]{text-decoration:none}[_nghost-%COMP%]   .dr-datepicker-input-container[_ngcontent-%COMP%]{display:flex;align-items:center;gap:4px;cursor:pointer;color:#6d6e6f;padding-right:4px}[_nghost-%COMP%]   .dr-datepicker-input-container[_ngcontent-%COMP%]:hover, [_nghost-%COMP%]   .dr-datepicker-input-container[_ngcontent-%COMP%]:hover   .dr-icon-date[_ngcontent-%COMP%]{color:#333}[_nghost-%COMP%]   .dr-datepicker-input-container[_ngcontent-%COMP%]   input[_ngcontent-%COMP%]{visibility:hidden;position:absolute;width:100%}[_nghost-%COMP%]   .dr-datepicker-input-container__formatted-value-display[_ngcontent-%COMP%]{font-size:14px;line-height:24px;font-weight:400;width:auto;text-decoration-line:underline}[_nghost-%COMP%]   .dr-datepicker-input-container[_ngcontent-%COMP%]   .dr-icon-date[_ngcontent-%COMP%]{display:block;position:relative;left:unset}  .date-picker-preset-tag{width:386px!important}  .date-picker-preset-tag .mat-calendar-content{padding-left:32px!important;padding-right:32px!important}@media screen and (max-width: 410px){.mat-datepicker-input[_ngcontent-%COMP%]{width:100vw!important}  .date-picker-preset-tag{width:calc(100vw - 16px)!important}  .date-picker-preset-tag .dr-datepicker-preset-date__tags{justify-content:center;margin-left:-32px;margin-right:-32px}}"], changeDetection: 0 }); }
+        } }, dependencies: [DrButtonComponent, i2.DefaultValueAccessor, i2.NgControlStatus, i2.NgModel, i1.NgIf, i1.NgTemplateOutlet, i6.MatDatepicker, i6.MatDatepickerInput, DrTooltipDirective, i1.AsyncPipe], styles: ["[_nghost-%COMP%]{position:relative;width:100%;display:flex;flex-direction:row;min-height:32px;height:32px;font-size:14px;font-family:Poppins,sans-serif;background-color:#fff;border:1px solid #9ea1aa;border-radius:6px;color:#333;overflow:hidden;outline:none;cursor:pointer}.use-button-picker[_nghost-%COMP%]{border:none}[_nghost-%COMP%]:hover{border-color:#9ea1aa}.active[_nghost-%COMP%], [_nghost-%COMP%]:focus-within{border-color:#4646ce!important;color:#333}.disabled[_nghost-%COMP%]{pointer-events:none;border:1px solid #aeabac;background:#f0f1f4;color:#aeabac}.disabled[_nghost-%COMP%]:after{color:#aeabac}.ng-valid.ng-dirty[_nghost-%COMP%]{border-color:#037c5a}.ng-invalid.ng-dirty[_nghost-%COMP%]:not(:focus-within){border-color:#bf1d30!important}.ng-untouched.ng-valid[_nghost-%COMP%]{border-color:#9ea1aa}.use-button-picker[_nghost-%COMP%]:after{display:none}[_nghost-%COMP%]:not(.use-button-picker):after, [_nghost-%COMP%]:not(.use-button-picker):before{position:absolute;display:flex;border-color:#6d6e6f transparent transparent;color:#6d6e6f}[_nghost-%COMP%]:not(.use-button-picker):after{font-family:DataRails!important;content:var(--dr-icon-arrow-down, \"\\ea18\");font-size:24px;color:#6d6e6f;top:0;bottom:0;right:8px;pointer-events:none;position:absolute;display:flex;align-items:center;justify-content:center}[_nghost-%COMP%]   i[_ngcontent-%COMP%]{display:flex;align-items:center;position:absolute;color:#6d6e6f;left:8px;top:0;bottom:0}[_nghost-%COMP%]   input[_ngcontent-%COMP%]{display:flex;flex-grow:1;height:100%;border:none;text-align:left;padding-left:35px;padding-right:25px;cursor:pointer!important;outline:none}[_nghost-%COMP%]   input.when-quarter[_ngcontent-%COMP%]{position:absolute;visibility:hidden}[_nghost-%COMP%]   input[_ngcontent-%COMP%]:disabled{border:none;color:#aeabac;background:transparent}[_nghost-%COMP%]   input[_ngcontent-%COMP%]::-webkit-search-decoration, [_nghost-%COMP%]   input[_ngcontent-%COMP%]::-webkit-search-cancel-button, [_nghost-%COMP%]   input[_ngcontent-%COMP%]::-webkit-search-results-button, [_nghost-%COMP%]   input[_ngcontent-%COMP%]::-webkit-search-results-decoration{-webkit-appearance:none}[_nghost-%COMP%]   input[_ngcontent-%COMP%]::placeholder{color:#6d6e6f;font-size:14px;line-height:18px}[_nghost-%COMP%]   input.hidden-calendar-input[_ngcontent-%COMP%]{width:0;height:0;padding:0}[_nghost-%COMP%]   .datepicker-button[_ngcontent-%COMP%]{width:100%}[_nghost-%COMP%]   .range-input[_ngcontent-%COMP%]{position:absolute;height:0;width:0;bottom:0;left:0;z-index:-1}  .mat-datepicker-popup .dr-week-datepicker{min-width:min(400px,100vw)!important}  .mat-datepicker-popup .dr-week-datepicker .mat-calendar-body-today{background:#f2f2fb;color:#4646ce;border:none;font-weight:600}  .mat-datepicker-popup .dr-week-datepicker .mat-calendar-body-cell-preview{border:none}  .mat-datepicker-popup .dr-week-datepicker .mat-calendar-body-range-start .mat-calendar-body-cell-preview,   .mat-datepicker-popup .dr-week-datepicker .mat-calendar-body-preview-start .mat-calendar-body-cell-preview{left:5%;width:95%;border-top-left-radius:40px;border-bottom-left-radius:40px}  .mat-datepicker-popup .dr-week-datepicker .mat-calendar-body-range-end .mat-calendar-body-cell-preview,   .mat-datepicker-popup .dr-week-datepicker .mat-calendar-body-preview-end .mat-calendar-body-cell-preview{right:5%;width:95%;border-top-right-radius:40px;border-bottom-right-radius:40px}  .mat-datepicker-popup .dr-week-datepicker .mat-calendar-body-in-preview:not(.mat-calendar-body-in-range) .mat-calendar-body-cell-preview{background-color:#f5f5f5}  .mat-datepicker-popup .dr-week-datepicker .mat-calendar-body-in-preview:not(.mat-calendar-body-in-range)>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){background-color:transparent!important}  .mat-datepicker-popup .dr-week-datepicker .mat-calendar-body-in-preview:not(.mat-calendar-body-in-range)>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical):not(.mat-calendar-body-today){color:#19181a!important;font-weight:400!important}  .mat-datepicker-popup .dr-week-datepicker .mat-calendar-body-in-range .mat-calendar-body-cell-preview{background:#4646ce!important}  .mat-datepicker-popup .dr-week-datepicker .mat-calendar-body-in-range:before{background:initial!important}  .mat-datepicker-popup .dr-week-datepicker .mat-calendar-body-in-range .mat-calendar-body-selected,   .mat-datepicker-popup .dr-week-datepicker .mat-calendar-body-in-range .mat-calendar-body-cell-content{background:transparent!important;color:#f2f2fb!important;font-weight:600!important}  .mat-datepicker-popup .mat-datepicker-content{margin:7px 0;box-shadow:0 4px 8px 1px #00000040;border-radius:12px!important}  .mat-datepicker-popup .mat-datepicker-content button[disabled]{border:inherit;color:inherit;background-color:inherit}  .mat-datepicker-popup .mat-datepicker-content button[disabled]:hover{border:inherit}  .mat-datepicker-popup .cdk-keyboard-focused .mat-calendar-body-active>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical),   .mat-datepicker-popup .cdk-program-focused .mat-calendar-body-active>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){background-color:#fff}  .mat-datepicker-popup .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){background:#f2f2fb;color:#4646ce;font-weight:600}  .mat-datepicker-popup .mat-calendar-body-selected{background-color:#4646ce;color:#f2f2fb;font-weight:600}  .mat-datepicker-popup .mat-calendar-body-today.mat-calendar-body-selected{box-shadow:none}  .mat-datepicker-popup .mat-button-focus-overlay{background:#f5f5f5}  .mat-datepicker-popup .mat-calendar-controls .mat-icon-button:hover .mat-button-focus-overlay{opacity:1!important;background:#f5f5f5;transition:opacity .2s cubic-bezier(.35,0,.25,1)}  .mat-datepicker-popup .mat-calendar-controls .mat-calendar-period-button:hover{background:#f5f5f5;transition:background .2s cubic-bezier(.35,0,.25,1)}  .mat-datepicker-popup .mat-calendar-table-header th{font-size:14px;font-weight:600;color:#333}  .mat-datepicker-popup .mat-calendar-table-header-divider{display:none}  .mat-datepicker-popup .mat-calendar-body-label{color:#fff;padding:0}  .mat-datepicker-popup .mat-calendar-body>tr[aria-hidden=true]>.mat-calendar-body-label{display:none}  .mat-datepicker-popup .mat-calendar-content{display:flex}  .mat-datepicker-popup .mat-calendar-content dr-week-selector{flex:0}  .mat-datepicker-popup .mat-calendar-content mat-month-view,   .mat-datepicker-popup .mat-calendar-content mat-multi-year-view,   .mat-datepicker-popup .mat-calendar-content mat-year-view{flex:1}[_nghost-%COMP%]{border:none;display:flex;align-items:center;width:-moz-fit-content;width:fit-content;background:transparent}[_nghost-%COMP%]:after{visibility:hidden}.disabled[_nghost-%COMP%]{border:none;padding:0 28px;background:transparent}.disabled[_nghost-%COMP%]   .dr-datepicker-input-container[_ngcontent-%COMP%]{cursor:default;color:#aeabac}.disabled[_nghost-%COMP%]   .dr-datepicker-input-container__formatted-value-display[_ngcontent-%COMP%]{text-decoration:none}[_nghost-%COMP%]   .dr-datepicker-input-container[_ngcontent-%COMP%]{display:flex;align-items:center;gap:4px;cursor:pointer;color:#6d6e6f;padding-right:4px}[_nghost-%COMP%]   .dr-datepicker-input-container[_ngcontent-%COMP%]:hover, [_nghost-%COMP%]   .dr-datepicker-input-container[_ngcontent-%COMP%]:hover   .dr-icon-date[_ngcontent-%COMP%]{color:#333}[_nghost-%COMP%]   .dr-datepicker-input-container[_ngcontent-%COMP%]   input[_ngcontent-%COMP%]{visibility:hidden;position:absolute;width:100%}[_nghost-%COMP%]   .dr-datepicker-input-container__formatted-value-display[_ngcontent-%COMP%]{font-size:14px;line-height:24px;font-weight:400;width:auto;text-decoration-line:underline}[_nghost-%COMP%]   .dr-datepicker-input-container[_ngcontent-%COMP%]   .dr-icon-date[_ngcontent-%COMP%]{display:block;position:relative;left:unset}  .date-picker-preset-tag{width:386px!important}  .date-picker-preset-tag .mat-calendar-content{padding-left:32px!important;padding-right:32px!important}@media screen and (max-width: 410px){.mat-datepicker-input[_ngcontent-%COMP%]{width:100vw!important}  .date-picker-preset-tag{width:calc(100vw - 16px)!important}  .date-picker-preset-tag .dr-datepicker-preset-date__tags{justify-content:center;margin-left:-32px;margin-right:-32px}}"], changeDetection: 0 }); }
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DrDatePickerWithTimeframeComponent, [{
         type: Component,
@@ -5638,7 +5681,7 @@ class DrDatePickerWithTimeframeComponent extends DrDatePickerComponent {
                     { provide: NG_VALUE_ACCESSOR, useExisting: DrDatePickerWithTimeframeComponent, multi: true },
                     { provide: DateAdapter, useClass: CustomDateAdapter },
                     { provide: DrDatePickerService },
-                ], template: "<dr-button\n    [disabled]=\"isPrevDateDisabled\"\n    *ngIf=\"!disabled\"\n    theme=\"icon\"\n    icon=\"dr-icon-arrow-left\"\n    (click)=\"pagingClicked(false)\"></dr-button>\n<div\n    [drTooltip]=\"datepickerTooltip\"\n    [drTooltipPosition]=\"datepickerTooltipPosition\"\n    [drTooltipMousleaveTimeout]=\"datepickerTooltipTimeout\"\n    class=\"dr-datepicker-input-container\">\n    <i class=\"dr-icon-date\" (click)=\"datepickerInput.click()\"></i>\n\n    <div class=\"dr-datepicker-input-container__formatted-value-display\" (click)=\"datepickerInput.click()\">\n        <ng-container\n            [ngTemplateOutlet]=\"formattedValueTmpl\"\n            [ngTemplateOutletContext]=\"{\n                formattedValue: displayedFormattedValue$ | async,\n            }\">\n        </ng-container>\n        <ng-template #formattedValueTmpl let-value=\"formattedValue\">\n            <span>\n                {{\n                    datePickerService.isUsingDateTagPresets && !!presetTagSelected\n                        ? presetTagSelected + ' (' + value + ')'\n                        : value\n                }}\n            </span>\n        </ng-template>\n    </div>\n    <input\n        #datepickerInput\n        [ngModel]=\"displayValue$ | async\"\n        (ngModelChange)=\"valueChangedInCalendar($event)\"\n        (click)=\"datePicker.open()\"\n        [matDatepicker]=\"datePicker\"\n        [readonly]=\"readonly\"\n        [min]=\"_min\"\n        [max]=\"_max\" />\n</div>\n<dr-button\n    [disabled]=\"isNextDateDisabled\"\n    *ngIf=\"!disabled\"\n    theme=\"icon\"\n    icon=\"dr-icon-arrow-right\"\n    (click)=\"pagingClicked(true)\"></dr-button>\n\n<mat-datepicker\n    #datePicker\n    class=\"dr-timeframe-datepicker\"\n    [calendarHeaderComponent]=\"customHeader\"\n    (yearSelected)=\"chosenPeriodHandler($event, timeframeOption.YEAR, datePicker)\"\n    (monthSelected)=\"chosenPeriodHandler($event, timeframeOption.MONTH, datePicker)\"\n    (opened)=\"onOpen()\"\n    (closed)=\"onCLose()\"\n    [panelClass]=\"combinedPanelClass\">\n</mat-datepicker>\n", styles: [":host{position:relative;width:100%;display:flex;flex-direction:row;min-height:32px;height:32px;font-size:14px;font-family:Poppins,sans-serif;background-color:#fff;border:1px solid #9ea1aa;border-radius:6px;color:#333;overflow:hidden;outline:none;cursor:pointer}:host.use-button-picker{border:none}:host:hover{border-color:#9ea1aa}:host.active,:host:focus-within{border-color:#4646ce!important;color:#333}:host.disabled{pointer-events:none;border:1px solid #aeabac;background:#f0f1f4;color:#aeabac}:host.disabled:after{color:#aeabac}:host.ng-valid.ng-dirty{border-color:#037c5a}:host.ng-invalid.ng-dirty:not(:focus-within){border-color:#bf1d30!important}:host.ng-untouched.ng-valid{border-color:#9ea1aa}:host.use-button-picker:after{display:none}:host:not(.use-button-picker):after,:host:not(.use-button-picker):before{position:absolute;display:flex;border-color:#6d6e6f transparent transparent;color:#6d6e6f}:host:not(.use-button-picker):after{font-family:DataRails!important;content:var(--dr-icon-arrow-down, \"\\ea18\");font-size:24px;color:#6d6e6f;top:0;bottom:0;right:8px;pointer-events:none;position:absolute;display:flex;align-items:center;justify-content:center}:host i{display:flex;align-items:center;position:absolute;color:#6d6e6f;left:8px;top:0;bottom:0}:host input{display:flex;flex-grow:1;height:100%;border:none;text-align:left;padding-left:35px;padding-right:25px;cursor:pointer!important;outline:none}:host input.when-quarter{position:absolute;visibility:hidden}:host input:disabled{border:none;color:#aeabac;background:transparent}:host input::-webkit-search-decoration,:host input::-webkit-search-cancel-button,:host input::-webkit-search-results-button,:host input::-webkit-search-results-decoration{-webkit-appearance:none}:host input::placeholder{color:#6d6e6f;font-size:14px;line-height:18px}:host input.hidden-calendar-input{width:0;height:0;padding:0}:host .datepicker-button{width:100%}:host .range-input{position:absolute;height:0;width:0;bottom:0;left:0;z-index:-1}::ng-deep .mat-datepicker-popup .dr-week-datepicker{width:386px!important}::ng-deep .mat-datepicker-popup .dr-week-datepicker .mat-calendar-body-in-range:before{background:initial!important}::ng-deep .mat-datepicker-popup .dr-week-datepicker .mat-calendar-body-in-range .mat-calendar-body-selected,::ng-deep .mat-datepicker-popup .dr-week-datepicker .mat-calendar-body-in-range .mat-calendar-body-cell-content{background:#f2f2fb!important;color:#4646ce!important;font-weight:600!important}::ng-deep .mat-datepicker-popup .mat-datepicker-content{margin:7px 0;box-shadow:0 4px 8px 1px #00000040;border-radius:12px!important}::ng-deep .mat-datepicker-popup .mat-datepicker-content button[disabled]{border:inherit;color:inherit;background-color:inherit}::ng-deep .mat-datepicker-popup .mat-datepicker-content button[disabled]:hover{border:inherit}::ng-deep .mat-datepicker-popup .cdk-keyboard-focused .mat-calendar-body-active>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical),::ng-deep .mat-datepicker-popup .cdk-program-focused .mat-calendar-body-active>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){background-color:#fff}::ng-deep .mat-datepicker-popup .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){background:#f2f2fb;color:#4646ce;font-weight:600}::ng-deep .mat-datepicker-popup .mat-calendar-body-selected{background-color:#4646ce;color:#f2f2fb;font-weight:600}::ng-deep .mat-datepicker-popup .mat-calendar-body-today.mat-calendar-body-selected{box-shadow:none}::ng-deep .mat-datepicker-popup .mat-button-focus-overlay{background:#f5f5f5}::ng-deep .mat-datepicker-popup .mat-calendar-controls .mat-icon-button:hover .mat-button-focus-overlay{opacity:1!important;background:#f5f5f5;transition:opacity .2s cubic-bezier(.35,0,.25,1)}::ng-deep .mat-datepicker-popup .mat-calendar-controls .mat-calendar-period-button:hover{background:#f5f5f5;transition:background .2s cubic-bezier(.35,0,.25,1)}::ng-deep .mat-datepicker-popup .mat-calendar-table-header th{font-size:14px;font-weight:600;color:#333}::ng-deep .mat-datepicker-popup .mat-calendar-table-header-divider{display:none}::ng-deep .mat-datepicker-popup .mat-calendar-body-label{color:#fff;padding:0}::ng-deep .mat-datepicker-popup .mat-calendar-body>tr[aria-hidden=true]>.mat-calendar-body-label{display:none}::ng-deep .mat-datepicker-popup .mat-calendar-content{display:flex}::ng-deep .mat-datepicker-popup .mat-calendar-content dr-week-selector{flex:0}::ng-deep .mat-datepicker-popup .mat-calendar-content mat-month-view,::ng-deep .mat-datepicker-popup .mat-calendar-content mat-multi-year-view,::ng-deep .mat-datepicker-popup .mat-calendar-content mat-year-view{flex:1}:host{border:none;display:flex;align-items:center;width:-moz-fit-content;width:fit-content;background:transparent}:host:after{visibility:hidden}:host.disabled{border:none;padding:0 28px;background:transparent}:host.disabled .dr-datepicker-input-container{cursor:default;color:#aeabac}:host.disabled .dr-datepicker-input-container__formatted-value-display{text-decoration:none}:host .dr-datepicker-input-container{display:flex;align-items:center;gap:4px;cursor:pointer;color:#6d6e6f;padding-right:4px}:host .dr-datepicker-input-container:hover,:host .dr-datepicker-input-container:hover .dr-icon-date{color:#333}:host .dr-datepicker-input-container input{visibility:hidden;position:absolute;width:100%}:host .dr-datepicker-input-container__formatted-value-display{font-size:14px;line-height:24px;font-weight:400;width:auto;text-decoration-line:underline}:host .dr-datepicker-input-container .dr-icon-date{display:block;position:relative;left:unset}::ng-deep .date-picker-preset-tag{width:386px!important}::ng-deep .date-picker-preset-tag .mat-calendar-content{padding-left:32px!important;padding-right:32px!important}@media screen and (max-width: 410px){.mat-datepicker-input{width:100vw!important}::ng-deep .date-picker-preset-tag{width:calc(100vw - 16px)!important}::ng-deep .date-picker-preset-tag .dr-datepicker-preset-date__tags{justify-content:center;margin-left:-32px;margin-right:-32px}}\n"] }]
+                ], template: "<dr-button\n    [disabled]=\"isPrevDateDisabled\"\n    *ngIf=\"!disabled\"\n    theme=\"icon\"\n    icon=\"dr-icon-arrow-left\"\n    (click)=\"pagingClicked(false)\"></dr-button>\n<div\n    [drTooltip]=\"datepickerTooltip\"\n    [drTooltipPosition]=\"datepickerTooltipPosition\"\n    [drTooltipMousleaveTimeout]=\"datepickerTooltipTimeout\"\n    class=\"dr-datepicker-input-container\">\n    <i class=\"dr-icon-date\" (click)=\"datepickerInput.click()\"></i>\n\n    <div class=\"dr-datepicker-input-container__formatted-value-display\" (click)=\"datepickerInput.click()\">\n        <ng-container\n            [ngTemplateOutlet]=\"formattedValueTmpl\"\n            [ngTemplateOutletContext]=\"{\n                formattedValue: displayedFormattedValue$ | async,\n            }\">\n        </ng-container>\n        <ng-template #formattedValueTmpl let-value=\"formattedValue\">\n            <span>\n                {{\n                    datePickerService.isUsingDateTagPresets && !!presetTagSelected\n                        ? presetTagSelected + ' (' + value + ')'\n                        : value\n                }}\n            </span>\n        </ng-template>\n    </div>\n    <input\n        #datepickerInput\n        [ngModel]=\"displayValue$ | async\"\n        (ngModelChange)=\"valueChangedInCalendar($event)\"\n        (click)=\"datePicker.open()\"\n        [matDatepicker]=\"datePicker\"\n        [readonly]=\"readonly\"\n        [min]=\"_min\"\n        [max]=\"_max\" />\n</div>\n<dr-button\n    [disabled]=\"isNextDateDisabled\"\n    *ngIf=\"!disabled\"\n    theme=\"icon\"\n    icon=\"dr-icon-arrow-right\"\n    (click)=\"pagingClicked(true)\"></dr-button>\n\n<mat-datepicker\n    #datePicker\n    class=\"dr-timeframe-datepicker\"\n    [calendarHeaderComponent]=\"customHeader\"\n    (yearSelected)=\"chosenPeriodHandler($event, timeframeOption.YEAR, datePicker)\"\n    (monthSelected)=\"chosenPeriodHandler($event, timeframeOption.MONTH, datePicker)\"\n    (opened)=\"onOpen()\"\n    (closed)=\"onCLose()\"\n    [panelClass]=\"combinedPanelClass\">\n</mat-datepicker>\n", styles: [":host{position:relative;width:100%;display:flex;flex-direction:row;min-height:32px;height:32px;font-size:14px;font-family:Poppins,sans-serif;background-color:#fff;border:1px solid #9ea1aa;border-radius:6px;color:#333;overflow:hidden;outline:none;cursor:pointer}:host.use-button-picker{border:none}:host:hover{border-color:#9ea1aa}:host.active,:host:focus-within{border-color:#4646ce!important;color:#333}:host.disabled{pointer-events:none;border:1px solid #aeabac;background:#f0f1f4;color:#aeabac}:host.disabled:after{color:#aeabac}:host.ng-valid.ng-dirty{border-color:#037c5a}:host.ng-invalid.ng-dirty:not(:focus-within){border-color:#bf1d30!important}:host.ng-untouched.ng-valid{border-color:#9ea1aa}:host.use-button-picker:after{display:none}:host:not(.use-button-picker):after,:host:not(.use-button-picker):before{position:absolute;display:flex;border-color:#6d6e6f transparent transparent;color:#6d6e6f}:host:not(.use-button-picker):after{font-family:DataRails!important;content:var(--dr-icon-arrow-down, \"\\ea18\");font-size:24px;color:#6d6e6f;top:0;bottom:0;right:8px;pointer-events:none;position:absolute;display:flex;align-items:center;justify-content:center}:host i{display:flex;align-items:center;position:absolute;color:#6d6e6f;left:8px;top:0;bottom:0}:host input{display:flex;flex-grow:1;height:100%;border:none;text-align:left;padding-left:35px;padding-right:25px;cursor:pointer!important;outline:none}:host input.when-quarter{position:absolute;visibility:hidden}:host input:disabled{border:none;color:#aeabac;background:transparent}:host input::-webkit-search-decoration,:host input::-webkit-search-cancel-button,:host input::-webkit-search-results-button,:host input::-webkit-search-results-decoration{-webkit-appearance:none}:host input::placeholder{color:#6d6e6f;font-size:14px;line-height:18px}:host input.hidden-calendar-input{width:0;height:0;padding:0}:host .datepicker-button{width:100%}:host .range-input{position:absolute;height:0;width:0;bottom:0;left:0;z-index:-1}::ng-deep .mat-datepicker-popup .dr-week-datepicker{min-width:min(400px,100vw)!important}::ng-deep .mat-datepicker-popup .dr-week-datepicker .mat-calendar-body-today{background:#f2f2fb;color:#4646ce;border:none;font-weight:600}::ng-deep .mat-datepicker-popup .dr-week-datepicker .mat-calendar-body-cell-preview{border:none}::ng-deep .mat-datepicker-popup .dr-week-datepicker .mat-calendar-body-range-start .mat-calendar-body-cell-preview,::ng-deep .mat-datepicker-popup .dr-week-datepicker .mat-calendar-body-preview-start .mat-calendar-body-cell-preview{left:5%;width:95%;border-top-left-radius:40px;border-bottom-left-radius:40px}::ng-deep .mat-datepicker-popup .dr-week-datepicker .mat-calendar-body-range-end .mat-calendar-body-cell-preview,::ng-deep .mat-datepicker-popup .dr-week-datepicker .mat-calendar-body-preview-end .mat-calendar-body-cell-preview{right:5%;width:95%;border-top-right-radius:40px;border-bottom-right-radius:40px}::ng-deep .mat-datepicker-popup .dr-week-datepicker .mat-calendar-body-in-preview:not(.mat-calendar-body-in-range) .mat-calendar-body-cell-preview{background-color:#f5f5f5}::ng-deep .mat-datepicker-popup .dr-week-datepicker .mat-calendar-body-in-preview:not(.mat-calendar-body-in-range)>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){background-color:transparent!important}::ng-deep .mat-datepicker-popup .dr-week-datepicker .mat-calendar-body-in-preview:not(.mat-calendar-body-in-range)>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical):not(.mat-calendar-body-today){color:#19181a!important;font-weight:400!important}::ng-deep .mat-datepicker-popup .dr-week-datepicker .mat-calendar-body-in-range .mat-calendar-body-cell-preview{background:#4646ce!important}::ng-deep .mat-datepicker-popup .dr-week-datepicker .mat-calendar-body-in-range:before{background:initial!important}::ng-deep .mat-datepicker-popup .dr-week-datepicker .mat-calendar-body-in-range .mat-calendar-body-selected,::ng-deep .mat-datepicker-popup .dr-week-datepicker .mat-calendar-body-in-range .mat-calendar-body-cell-content{background:transparent!important;color:#f2f2fb!important;font-weight:600!important}::ng-deep .mat-datepicker-popup .mat-datepicker-content{margin:7px 0;box-shadow:0 4px 8px 1px #00000040;border-radius:12px!important}::ng-deep .mat-datepicker-popup .mat-datepicker-content button[disabled]{border:inherit;color:inherit;background-color:inherit}::ng-deep .mat-datepicker-popup .mat-datepicker-content button[disabled]:hover{border:inherit}::ng-deep .mat-datepicker-popup .cdk-keyboard-focused .mat-calendar-body-active>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical),::ng-deep .mat-datepicker-popup .cdk-program-focused .mat-calendar-body-active>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){background-color:#fff}::ng-deep .mat-datepicker-popup .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){background:#f2f2fb;color:#4646ce;font-weight:600}::ng-deep .mat-datepicker-popup .mat-calendar-body-selected{background-color:#4646ce;color:#f2f2fb;font-weight:600}::ng-deep .mat-datepicker-popup .mat-calendar-body-today.mat-calendar-body-selected{box-shadow:none}::ng-deep .mat-datepicker-popup .mat-button-focus-overlay{background:#f5f5f5}::ng-deep .mat-datepicker-popup .mat-calendar-controls .mat-icon-button:hover .mat-button-focus-overlay{opacity:1!important;background:#f5f5f5;transition:opacity .2s cubic-bezier(.35,0,.25,1)}::ng-deep .mat-datepicker-popup .mat-calendar-controls .mat-calendar-period-button:hover{background:#f5f5f5;transition:background .2s cubic-bezier(.35,0,.25,1)}::ng-deep .mat-datepicker-popup .mat-calendar-table-header th{font-size:14px;font-weight:600;color:#333}::ng-deep .mat-datepicker-popup .mat-calendar-table-header-divider{display:none}::ng-deep .mat-datepicker-popup .mat-calendar-body-label{color:#fff;padding:0}::ng-deep .mat-datepicker-popup .mat-calendar-body>tr[aria-hidden=true]>.mat-calendar-body-label{display:none}::ng-deep .mat-datepicker-popup .mat-calendar-content{display:flex}::ng-deep .mat-datepicker-popup .mat-calendar-content dr-week-selector{flex:0}::ng-deep .mat-datepicker-popup .mat-calendar-content mat-month-view,::ng-deep .mat-datepicker-popup .mat-calendar-content mat-multi-year-view,::ng-deep .mat-datepicker-popup .mat-calendar-content mat-year-view{flex:1}:host{border:none;display:flex;align-items:center;width:-moz-fit-content;width:fit-content;background:transparent}:host:after{visibility:hidden}:host.disabled{border:none;padding:0 28px;background:transparent}:host.disabled .dr-datepicker-input-container{cursor:default;color:#aeabac}:host.disabled .dr-datepicker-input-container__formatted-value-display{text-decoration:none}:host .dr-datepicker-input-container{display:flex;align-items:center;gap:4px;cursor:pointer;color:#6d6e6f;padding-right:4px}:host .dr-datepicker-input-container:hover,:host .dr-datepicker-input-container:hover .dr-icon-date{color:#333}:host .dr-datepicker-input-container input{visibility:hidden;position:absolute;width:100%}:host .dr-datepicker-input-container__formatted-value-display{font-size:14px;line-height:24px;font-weight:400;width:auto;text-decoration-line:underline}:host .dr-datepicker-input-container .dr-icon-date{display:block;position:relative;left:unset}::ng-deep .date-picker-preset-tag{width:386px!important}::ng-deep .date-picker-preset-tag .mat-calendar-content{padding-left:32px!important;padding-right:32px!important}@media screen and (max-width: 410px){.mat-datepicker-input{width:100vw!important}::ng-deep .date-picker-preset-tag{width:calc(100vw - 16px)!important}::ng-deep .date-picker-preset-tag .dr-datepicker-preset-date__tags{justify-content:center;margin-left:-32px;margin-right:-32px}}\n"] }]
     }], function () { return [{ type: i0.ChangeDetectorRef }, { type: i1$3.DateAdapter }, { type: DrDatePickerService }]; }, { dateFormatConfig: [{
             type: Input
         }], canSelectTimeframe: [{
@@ -6391,7 +6434,7 @@ class DateTimePickerComponent {
             .pipe(map$2((value) => ({
             value: this.getCombinedTimestamp(value),
             timezone: value.time?.timeZone || null,
-        })), distinctUntilChanged((a, b) => isEqual(a, b)), takeUntil(this.destroy$))
+        })), distinctUntilChanged((a, b) => isEqual(a, b)), takeUntil$1(this.destroy$))
             .subscribe((value) => {
             this.innerTime = value.value;
             this.onChange(value);
@@ -7731,7 +7774,7 @@ class DrChatSuggestionsComponent {
     }
     ngAfterViewInit() {
         this.onResize$ = DrSharedUtils.fromResizeObserver(this.suggestionContainer?.nativeElement);
-        this.onResize$.pipe(takeUntil$1(this.destroy$)).subscribe(() => {
+        this.onResize$.pipe(takeUntil(this.destroy$)).subscribe(() => {
             this.recalculateColsCount();
         });
         this.recalculateColsCount();
@@ -7888,7 +7931,7 @@ const _c5$1 = ["dr-chat-alert", "dr-chat-form", "dr-ai-search-input", "[drChatFo
 class DrChatComponent {
     set contentUpdateSubject(value) {
         if (value) {
-            value.pipe(takeUntil$1(this.destroy$)).subscribe(() => {
+            value.pipe(takeUntil(this.destroy$)).subscribe(() => {
                 this.updateView();
             });
         }
@@ -8528,16 +8571,52 @@ var DrAlertTheme;
     DrAlertTheme["BOLD_ERROR"] = "bold-error";
     DrAlertTheme["WARNING"] = "warning";
     DrAlertTheme["INFO"] = "info";
+    DrAlertTheme["TIP"] = "tip";
 })(DrAlertTheme || (DrAlertTheme = {}));
 
-function DrAlertComponent_span_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 4);
+function DrAlertComponent_ng_container_2_span_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 7);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r3 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(1);
+    i0.ɵɵtextInterpolate(ctx_r3.title);
+} }
+function DrAlertComponent_ng_container_2_span_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span");
+    i0.ɵɵtext(1, " - ");
+    i0.ɵɵelementEnd();
+} }
+function DrAlertComponent_ng_container_2_span_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 8);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r5 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(1);
+    i0.ɵɵtextInterpolate(ctx_r5.text);
+} }
+function DrAlertComponent_ng_container_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementContainerStart(0);
+    i0.ɵɵtemplate(1, DrAlertComponent_ng_container_2_span_1_Template, 2, 1, "span", 5);
+    i0.ɵɵtemplate(2, DrAlertComponent_ng_container_2_span_2_Template, 2, 0, "span", 1);
+    i0.ɵɵtemplate(3, DrAlertComponent_ng_container_2_span_3_Template, 2, 1, "span", 6);
+    i0.ɵɵelementContainerEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵadvance(1);
-    i0.ɵɵtextInterpolate(ctx_r0.text);
+    i0.ɵɵproperty("ngIf", ctx_r0.title);
+    i0.ɵɵadvance(1);
+    i0.ɵɵproperty("ngIf", ctx_r0.title && ctx_r0.text);
+    i0.ɵɵadvance(1);
+    i0.ɵɵproperty("ngIf", ctx_r0.text);
+} }
+function DrAlertComponent_i_6_Template(rf, ctx) { if (rf & 1) {
+    const _r7 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "i", 9);
+    i0.ɵɵlistener("click", function DrAlertComponent_i_6_Template_i_click_0_listener() { i0.ɵɵrestoreView(_r7); const ctx_r6 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r6.hidden = true); });
+    i0.ɵɵelementEnd();
 } }
 const _c0$F = ["*"];
 const ALERT_THEME_ICONS = {
@@ -8546,13 +8625,16 @@ const ALERT_THEME_ICONS = {
     [DrAlertTheme.ERROR]: 'dr-icon-error',
     [DrAlertTheme.WARNING]: 'dr-icon-warning',
     [DrAlertTheme.INFO]: 'dr-icon-info',
+    [DrAlertTheme.TIP]: 'dr-icon-light',
 };
 class DrAlertComponent {
     constructor() {
         this.theme = DrAlertTheme.INFO;
+        this.showClose = false;
+        this.hidden = false;
     }
     get elementClass() {
-        return `dr-alert dr-alert--${this.theme}`;
+        return `--${this.theme} ${this.hidden ? '--hidden' : ''}`;
     }
     get themeIconClass() {
         return this.customIconClass || ALERT_THEME_ICONS[this.theme];
@@ -8560,31 +8642,37 @@ class DrAlertComponent {
     /** @nocollapse */ static { this.ɵfac = function DrAlertComponent_Factory(t) { return new (t || DrAlertComponent)(); }; }
     /** @nocollapse */ static { this.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: DrAlertComponent, selectors: [["dr-alert"]], hostVars: 2, hostBindings: function DrAlertComponent_HostBindings(rf, ctx) { if (rf & 2) {
             i0.ɵɵclassMap(ctx.elementClass);
-        } }, inputs: { theme: "theme", customIconClass: "customIconClass", text: "text" }, ngContentSelectors: _c0$F, decls: 6, vars: 3, consts: [[1, "dr-alert__content-wrapper"], ["class", "dr-alert__text", 4, "ngIf"], [1, "dr-alert__custom-content"], ["contentRef", ""], [1, "dr-alert__text"]], template: function DrAlertComponent_Template(rf, ctx) { if (rf & 1) {
+        } }, inputs: { theme: "theme", customIconClass: "customIconClass", title: "title", text: "text", showClose: "showClose" }, ngContentSelectors: _c0$F, decls: 7, vars: 4, consts: [[1, "dr-alert__content-wrapper"], [4, "ngIf"], [1, "dr-alert__custom-content"], ["contentRef", ""], ["class", "dr-alert__close-icon dr-icon-exit", 3, "click", 4, "ngIf"], ["class", "dr-alert__title", 4, "ngIf"], ["class", "dr-alert__text", 4, "ngIf"], [1, "dr-alert__title"], [1, "dr-alert__text"], [1, "dr-alert__close-icon", "dr-icon-exit", 3, "click"]], template: function DrAlertComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef();
-            i0.ɵɵelementStart(0, "div", 0);
-            i0.ɵɵelement(1, "i");
-            i0.ɵɵtemplate(2, DrAlertComponent_span_2_Template, 2, 1, "span", 1);
+            i0.ɵɵelement(0, "i");
+            i0.ɵɵelementStart(1, "div", 0);
+            i0.ɵɵtemplate(2, DrAlertComponent_ng_container_2_Template, 4, 3, "ng-container", 1);
             i0.ɵɵelementStart(3, "div", 2, 3);
             i0.ɵɵprojection(5);
             i0.ɵɵelementEnd()();
+            i0.ɵɵtemplate(6, DrAlertComponent_i_6_Template, 1, 0, "i", 4);
         } if (rf & 2) {
             const _r1 = i0.ɵɵreference(4);
-            i0.ɵɵadvance(1);
             i0.ɵɵclassMap("dr-alert__icon " + ctx.themeIconClass);
-            i0.ɵɵadvance(1);
+            i0.ɵɵadvance(2);
             i0.ɵɵproperty("ngIf", !_r1.innerHTML.trim());
-        } }, dependencies: [i1.NgIf], styles: ["[_nghost-%COMP%]{font-family:Poppins,sans-serif;display:flex;padding:8px 16px;align-items:center;border-radius:8px;min-height:56px;color:#6d6e6f}.dr-alert--info[_nghost-%COMP%]{background:#e6efff}.dr-alert--bold-error[_nghost-%COMP%]{color:#fff;background:#bf1d30}.dr-alert--error[_nghost-%COMP%]{background:#f7d9dc}.dr-alert--warning[_nghost-%COMP%]{background:#ffefc7}.dr-alert--success[_nghost-%COMP%]{background:#dbf5e6}[_nghost-%COMP%]   .dr-alert__content-wrapper[_ngcontent-%COMP%]{font-size:12px;line-height:16px;font-weight:400;display:flex;gap:8px}[_nghost-%COMP%]   .dr-alert__text[_ngcontent-%COMP%], [_nghost-%COMP%]   .dr-alert__icon[_ngcontent-%COMP%], [_nghost-%COMP%]   .dr-alert__custom-content[_ngcontent-%COMP%]{line-height:16px}[_nghost-%COMP%]   .dr-alert__text[_ngcontent-%COMP%], [_nghost-%COMP%]   .dr-alert__custom-content[_ngcontent-%COMP%]{white-space:pre-line}"], changeDetection: 0 }); }
+            i0.ɵɵadvance(4);
+            i0.ɵɵproperty("ngIf", ctx.showClose);
+        } }, dependencies: [i1.NgIf], styles: ["[_nghost-%COMP%]{font-family:Poppins,sans-serif;display:flex;padding:8px 16px;border-radius:8px;min-height:40px;color:#333;position:relative;gap:8px}.--info[_nghost-%COMP%]{background:#e6efff}.--bold-error[_nghost-%COMP%]{color:#fff;background:#bf1d30}.--error[_nghost-%COMP%]{background:#f7d9dc}.--warning[_nghost-%COMP%]{background:#ffefc7}.--success[_nghost-%COMP%]{background:#dbf5e6}.--tip[_nghost-%COMP%]{background:#eaeaff}.--hidden[_nghost-%COMP%]{display:none}[_nghost-%COMP%]   .dr-alert__title[_ngcontent-%COMP%]{font-size:12px;line-height:16px;font-weight:600;white-space:pre-line}[_nghost-%COMP%]   .dr-alert__text[_ngcontent-%COMP%]{font-size:12px;line-height:16px;font-weight:400;white-space:pre-line}[_nghost-%COMP%]   .dr-alert__content-wrapper[_ngcontent-%COMP%]{padding-top:4px}[_nghost-%COMP%]   .dr-alert__custom-content[_ngcontent-%COMP%]{white-space:pre-line}[_nghost-%COMP%]   .dr-alert__close-icon[_ngcontent-%COMP%]{margin-left:auto;cursor:pointer}"], changeDetection: 0 }); }
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DrAlertComponent, [{
         type: Component,
-        args: [{ selector: 'dr-alert', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"dr-alert__content-wrapper\">\n    <i [class]=\"'dr-alert__icon ' + themeIconClass\"></i>\n    <span *ngIf=\"!contentRef.innerHTML.trim()\" class=\"dr-alert__text\">{{ text }}</span>\n    <div class=\"dr-alert__custom-content\" #contentRef>\n        <ng-content></ng-content>\n    </div>\n</div>\n", styles: [":host{font-family:Poppins,sans-serif;display:flex;padding:8px 16px;align-items:center;border-radius:8px;min-height:56px;color:#6d6e6f}:host.dr-alert--info{background:#e6efff}:host.dr-alert--bold-error{color:#fff;background:#bf1d30}:host.dr-alert--error{background:#f7d9dc}:host.dr-alert--warning{background:#ffefc7}:host.dr-alert--success{background:#dbf5e6}:host .dr-alert__content-wrapper{font-size:12px;line-height:16px;font-weight:400;display:flex;gap:8px}:host .dr-alert__text,:host .dr-alert__icon,:host .dr-alert__custom-content{line-height:16px}:host .dr-alert__text,:host .dr-alert__custom-content{white-space:pre-line}\n"] }]
+        args: [{ selector: 'dr-alert', changeDetection: ChangeDetectionStrategy.OnPush, template: "<i [class]=\"'dr-alert__icon ' + themeIconClass\"></i>\n<div class=\"dr-alert__content-wrapper\">\n    <ng-container *ngIf=\"!contentRef.innerHTML.trim()\">\n        <span *ngIf=\"title\" class=\"dr-alert__title\">{{ title }}</span>\n        <span *ngIf=\"title && text\"> - </span>\n        <span *ngIf=\"text\" class=\"dr-alert__text\">{{ text }}</span>\n    </ng-container>\n    <div class=\"dr-alert__custom-content\" #contentRef>\n        <ng-content></ng-content>\n    </div>\n</div>\n<i *ngIf=\"showClose\" (click)=\"hidden = true\" class=\"dr-alert__close-icon dr-icon-exit\"></i>\n", styles: [":host{font-family:Poppins,sans-serif;display:flex;padding:8px 16px;border-radius:8px;min-height:40px;color:#333;position:relative;gap:8px}:host.--info{background:#e6efff}:host.--bold-error{color:#fff;background:#bf1d30}:host.--error{background:#f7d9dc}:host.--warning{background:#ffefc7}:host.--success{background:#dbf5e6}:host.--tip{background:#eaeaff}:host.--hidden{display:none}:host .dr-alert__title{font-size:12px;line-height:16px;font-weight:600;white-space:pre-line}:host .dr-alert__text{font-size:12px;line-height:16px;font-weight:400;white-space:pre-line}:host .dr-alert__content-wrapper{padding-top:4px}:host .dr-alert__custom-content{white-space:pre-line}:host .dr-alert__close-icon{margin-left:auto;cursor:pointer}\n"] }]
     }], null, { theme: [{
             type: Input
         }], customIconClass: [{
             type: Input
+        }], title: [{
+            type: Input
         }], text: [{
             type: Input
+        }], showClose: [{
+            type: Input
         }], elementClass: [{
             type: HostBinding,
             args: ['class']
@@ -10468,7 +10556,7 @@ class DrDropdownComponent {
             if (this.drDropdownInHover) {
                 this.dropdownInstanceService
                     .inactive(this)
-                    .pipe(first$1(), takeUntil(merge$1(this.destroy$, this.drDropdownInHoverChange$)))
+                    .pipe(first$1(), takeUntil$1(merge$1(this.destroy$, this.drDropdownInHoverChange$)))
                     .subscribe(() => {
                     this.popoverRef.close();
                 });
@@ -10670,7 +10758,7 @@ class DropdownInstanceService {
         return this.instances.slice(this.instances.indexOf(ref));
     }
     inactive(ref) {
-        return this.instances$.pipe(map$2(() => this.getSequence(ref)), filter$1((value) => !!value.length), switchMap$1((value) => interval(200).pipe(map$2(() => value))), filter$1((emissions) => emissions.every((value) => !value.active())), takeUntil(this.destroy$));
+        return this.instances$.pipe(map$2(() => this.getSequence(ref)), filter$1((value) => !!value.length), switchMap$1((value) => interval(200).pipe(map$2(() => value))), filter$1((emissions) => emissions.every((value) => !value.active())), takeUntil$1(this.destroy$));
     }
 }
 
@@ -11288,7 +11376,7 @@ class DrAccordionItemComponent {
         }
     }
     ngOnInit() {
-        this.accordion.openCloseItems.pipe(takeUntil$1(this.destroy$)).subscribe((collapsed) => {
+        this.accordion.openCloseItems.pipe(takeUntil(this.destroy$)).subscribe((collapsed) => {
             if (!this.disabled) {
                 this.collapsed = collapsed;
             }
@@ -11400,7 +11488,7 @@ class DrAccordionItemHeaderComponent {
         this.theme = accordionItem?.accordion?.theme || 'regular';
     }
     ngOnInit() {
-        this.accordionItem.accordionItemInvalidate.pipe(takeUntil$1(this.destroy$)).subscribe(() => this.cd.markForCheck());
+        this.accordionItem.accordionItemInvalidate.pipe(takeUntil(this.destroy$)).subscribe(() => this.cd.markForCheck());
         this.chevronIconClass = this.getChevronIconClass();
         this.chevronRotationDegree = this.chevronOrientation === 'vertical' ? 180 : 90;
     }
@@ -11516,7 +11604,7 @@ class DrAccordionItemBodyComponent {
         return this.accordionItem.collapsed ? 'collapsed' : 'expanded';
     }
     ngOnInit() {
-        this.accordionItem.accordionItemInvalidate.pipe(takeUntil$1(this.destroy$)).subscribe(() => this.cd.markForCheck());
+        this.accordionItem.accordionItemInvalidate.pipe(takeUntil(this.destroy$)).subscribe(() => this.cd.markForCheck());
     }
     ngOnDestroy() {
         this.destroy$.next();
@@ -11623,7 +11711,7 @@ class DrDetailsListComponent {
             this.list = val;
         }
         else {
-            val.pipe(takeUntil$1(this.destroy$)).subscribe((res) => {
+            val.pipe(takeUntil(this.destroy$)).subscribe((res) => {
                 this.list = res;
             });
         }
@@ -11879,7 +11967,7 @@ class DialogWrapperComponent {
             this.saving$.next(true);
             this.dialogData
                 .confirmFn()
-                .pipe(takeUntil$1(this.destroy$), catchError((error) => {
+                .pipe(takeUntil(this.destroy$), catchError((error) => {
                 this.saving$.next(false);
                 return throwError(() => error);
             }))
@@ -12245,7 +12333,7 @@ class DialogModalWrapperComponent {
             .pipe(finalize(() => {
             this.isLoading = false;
             this.saving$.next(false);
-        }), takeUntil$1(this.destroy$), catchError((err) => {
+        }), takeUntil(this.destroy$), catchError((err) => {
             this.showServerErrorMessage = true;
             this.isLoading = false;
             this.saving$.next(false);
@@ -15352,14 +15440,14 @@ class DrawerContainer extends CdkDialogContainer {
             }
             container.style.transition = 'transform 0.5s cubic-bezier(0.32, 0.72, 0, 1)';
             container.style.transform = `translate3d(0px, 0px, 0px)`;
-        }), takeUntil(mouseup$))), map$2((event) => this.positionStrategy.extractMousePosition(event)), distinctUntilChanged(), tap$1((position) => {
+        }), takeUntil$1(mouseup$))), map$2((event) => this.positionStrategy.extractMousePosition(event)), distinctUntilChanged(), tap$1((position) => {
             let containerPosition = this.getContainerPosition(container);
             containerPosition = Math.min(containerPosition, lastPosition);
             lastPosition = Math.min(containerPosition, lastPosition);
             currentPosition = position;
             container.style.transition = 'none';
             container.style.transform = this.positionStrategy.calculateTransform(position, containerPosition);
-        }), takeUntil(this.destroy$))
+        }), takeUntil$1(this.destroy$))
             .subscribe();
     }
     getContainerPosition(container) {
@@ -15812,7 +15900,7 @@ class StepperWizardComponent {
             this.currentStep = steps.first.drStepWizard;
         };
         onStepsChange(this.steps);
-        this.steps.changes.pipe(takeUntil(this.destroy$)).subscribe(onStepsChange);
+        this.steps.changes.pipe(takeUntil$1(this.destroy$)).subscribe(onStepsChange);
     }
     async next(step, onComplete) {
         const res = await this.complete(onComplete?.());
@@ -15830,7 +15918,7 @@ class StepperWizardComponent {
     async complete(res) {
         if (res instanceof Observable) {
             this.completing$.next(true);
-            return await firstValueFrom(res.pipe(takeUntil(this.destroy$))).finally(() => this.completing$.next(false));
+            return await firstValueFrom(res.pipe(takeUntil$1(this.destroy$))).finally(() => this.completing$.next(false));
         }
     }
     renderStep() {
@@ -16048,7 +16136,7 @@ class ElementOverflowDirective {
     }
     ngOnInit() {
         fromEvent(window, 'resize')
-            .pipe(startWith(null), throttleTime(200, undefined, { leading: true, trailing: true }), takeUntil(this.destroy$), observeOn(asyncScheduler))
+            .pipe(startWith(null), throttleTime(200, undefined, { leading: true, trailing: true }), takeUntil$1(this.destroy$), observeOn(asyncScheduler))
             .subscribe(() => {
             if (this.drElementOverflow !== this.isOverflow) {
                 this.drElementOverflow = this.isOverflow;
@@ -17764,7 +17852,7 @@ class TblHeaderComponent {
     subscribeOnSort() {
         this.gridApi.drEvents
             .on(GridDrEventType.UPDATE_SORT)
-            .pipe(takeUntil$1(this.destroy$))
+            .pipe(takeUntil(this.destroy$))
             .subscribe((sort) => {
             if (sort.header.displayName !== this.params.displayName) {
                 this.sort = null;
@@ -17777,7 +17865,7 @@ class TblHeaderComponent {
     subscribeOnUpdateTableParams() {
         this.gridApi.drEvents
             .on(GridDrEventType.UPDATE_PARAMS)
-            .pipe(takeUntil$1(this.destroy$))
+            .pipe(takeUntil(this.destroy$))
             .subscribe((tableParams) => {
             const columnNameForSorting = tableParams?.ordering?.replace('-', '') || null;
             const sorting = getSortTypeByColumnSorting(tableParams.ordering, columnNameForSorting);
@@ -18198,7 +18286,7 @@ class DrGridComponent {
             _destroy$: destroy$,
             _events$: events$,
             emit: (e) => events$.next(e),
-            on: (type) => events$.asObservable().pipe(takeUntil$1(destroy$), filter((event) => !type || event.type === type), map((event) => (type ? event.data : event))),
+            on: (type) => events$.asObservable().pipe(takeUntil(destroy$), filter((event) => !type || event.type === type), map((event) => (type ? event.data : event))),
             filtersMap: new Map(),
         };
     }; }
@@ -18684,7 +18772,7 @@ class DrGridToolbarComponent {
         this.searchInput = this.activatedRoute.snapshot?.queryParams?.search || '';
         this.updateTitleIfNeeded();
         this.router.events
-            .pipe(takeUntil$1(this.destroy$), filter((event) => event instanceof NavigationEnd))
+            .pipe(takeUntil(this.destroy$), filter((event) => event instanceof NavigationEnd))
             .subscribe(() => this.updateTitleIfNeeded(true));
     }
     updateTitleIfNeeded(routeTitlePriority = false) {