@datarailsshared/datarailsshared 1.6.149 → 1.6.151

package/fesm2022/datarailsshared-datarailsshared.mjs

@@ -13,7 +13,7 @@ import { Observable, BehaviorSubject, distinctUntilChanged, Subject, startWith,
 import * as _ from 'lodash';
 import { isNil, isObject, cloneDeep, find, indexOf, reduce, map as map$1, isNumber, merge, forEach, some, isEqual, orderBy, filter as filter$2, includes, pull, concat, isString, isBoolean, keys } from 'lodash';
 import { skip, debounceTime, filter, distinctUntilChanged as distinctUntilChanged$1, takeUntil as takeUntil$1, startWith as startWith$1, map, tap, shareReplay, switchMap, first, catchError, finalize, take } from 'rxjs/operators';
-import * as i5 from '@angular/material/datepicker';
+import * as i6 from '@angular/material/datepicker';
 import { MatCalendar, DateRange, MAT_DATE_RANGE_SELECTION_STRATEGY, MatDatepickerModule } from '@angular/material/datepicker';
 import { transition, style, animate, trigger, state } from '@angular/animations';
 import * as i1$1 from '@angular/cdk/overlay';
@@ -2107,7 +2107,7 @@ class DrDatePickerCustomHeaderComponent {
         const calendar = document.querySelector('.mat-calendar-content');
         calendar.insertBefore(selector.location.nativeElement, calendar.firstChild);
     }
-    /** @nocollapse */ static { this.ɵfac = function DrDatePickerCustomHeaderComponent_Factory(t) { return new (t || DrDatePickerCustomHeaderComponent)(i0.ɵɵdirectiveInject(i5.MatCalendar), i0.ɵɵdirectiveInject(i1$4.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$4.DateAdapter), i0.ɵɵdirectiveInject(MAT_DATE_FORMATS), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(DrDatePickerService)); }; }
     /** @nocollapse */ static { this.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: DrDatePickerCustomHeaderComponent, selectors: [["dr-date-picker_custom-header", 8, "component"]], attrs: _c0$I, decls: 12, vars: 4, consts: [["class", "dr-datepicker__timeframe-select__wrapper", 4, "ngIf"], [1, "dr-date-paging"], [1, "dr-date-paging", "flip-page-button", 3, "click"], [1, "dr-icon-arrow-left", "presentation_buttons-navigate_input"], [1, "example-header-label"], [3, "click"], [1, "dr-icon-arrow-right", "presentation_buttons-navigate_input"], ["class", "dr-quarterly-datepicker", 4, "ngIf"], [1, "dr-datepicker__timeframe-select__wrapper"], ["class", "dr-datepicker-preset-date", 4, "ngIf"], ["bindLabel", "title", "bindValue", "value", 1, "dr-datepicker__timeframe-select", 3, "ngModel", "items", "ngModelChange"], [1, "dr-datepicker-preset-date"], [1, "dr-datepicker-preset-date__tags"], ["id", "preset_tag", "class", "dr-datepicker-preset-date__tags__tag", 3, "ngClass", "drTooltip", "drTooltipPosition", "click", 4, "ngFor", "ngForOf"], ["id", "preset_tag", 1, "dr-datepicker-preset-date__tags__tag", 3, "ngClass", "drTooltip", "drTooltipPosition", "click"], [1, "dr-quarterly-datepicker"], ["quarterlyDatePicker", ""], ["class", "quarter-selector", 3, "class", "quarter-selector--disabled", "click", 4, "ngFor", "ngForOf"], [1, "quarter-selector", 3, "click"]], template: function DrDatePickerCustomHeaderComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵtemplate(0, DrDatePickerCustomHeaderComponent_div_0_Template, 4, 6, "div", 0);
             i0.ɵɵelementStart(1, "div", 1)(2, "div", 2);
@@ -2140,7 +2140,7 @@ class DrDatePickerCustomHeaderComponent {
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DrDatePickerCustomHeaderComponent, [{
         type: Component,
         args: [{ selector: 'dr-date-picker_custom-header.component', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div *ngIf=\"datePickerService.isTimeframeSelectionEnabled\" class=\"dr-datepicker__timeframe-select__wrapper\">\n    <div *ngIf=\"datePickerService.isUsingDateTagPresets\" class=\"dr-datepicker-preset-date\">\n        <div class=\"dr-datepicker-preset-date__tags\">\n            <div\n                *ngFor=\"let tag of presetTagList\"\n                id=\"preset_tag\"\n                class=\"dr-datepicker-preset-date__tags__tag\"\n                (click)=\"onSelectPresetTag(tag)\"\n                [ngClass]=\"{ 'dr-datepicker-preset-date__tags__tag--selected': tag.key === selectedPresetTag }\"\n                [drTooltip]=\"selectedPresetTag === tag.key ? 'Unselect preset' : ''\"\n                [drTooltipPosition]=\"'top'\">\n                {{ tag.label }}\n            </div>\n        </div>\n    </div>\n    <dr-select\n        class=\"dr-datepicker__timeframe-select\"\n        [ngModel]=\"selectedTimeframe\"\n        [items]=\"timeframeOptions | drShowTimeframePipe: datePickerService.availableTimeframes\"\n        bindLabel=\"title\"\n        bindValue=\"value\"\n        (ngModelChange)=\"setTimeframe($event)\">\n    </dr-select>\n</div>\n\n<div class=\"dr-date-paging\">\n    <div class=\"dr-date-paging flip-page-button\" (click)=\"pagingClicked(false)\">\n        <i class=\"dr-icon-arrow-left presentation_buttons-navigate_input\"></i>\n    </div>\n    <span class=\"example-header-label\">\n        <span (click)=\"switchViewOnClickOnPeriodLabel(calendarView.FOR_MONTHS)\">{{ periodMonthLabel + ' ' }}</span>\n        <span (click)=\"switchViewOnClickOnPeriodLabel(calendarView.FOR_YEARS)\">{{ periodYearLabel }}</span>\n    </span>\n    <div class=\"dr-date-paging flip-page-button\" (click)=\"pagingClicked(true)\">\n        <i class=\"dr-icon-arrow-right presentation_buttons-navigate_input\"></i>\n    </div>\n</div>\n<div #quarterlyDatePicker class=\"dr-quarterly-datepicker\" *ngIf=\"currentViewIsQuarter\">\n    <div\n        *ngFor=\"let quarter of quarters\"\n        class=\"quarter-selector\"\n        (click)=\"onSelectQuarter(quarter)\"\n        [class]=\"quarter === selectedQuarter ? 'selected' : ''\"\n        [class.quarter-selector--disabled]=\"isQuarterDisabled(quarter)\">\n        Q{{ quarter }}\n    </div>\n</div>\n", styles: [":host{height:54px;align-items:center;font-family:Poppins;font-style:normal;font-weight:600;font-size:14px;line-height:22px}.dr-datepicker__timeframe-select__wrapper{background-color:#f9faff;padding:16px 32px;border-radius:18px 18px 0 0}.dr-datepicker-preset-date{display:flex;flex-direction:column}.dr-datepicker-preset-date__tags{display:flex;padding-bottom:21px;padding-top:10px;font-size:12px}.dr-datepicker-preset-date__tags__tag{cursor:pointer;font-weight:400;line-height:20px!important;padding:2px 8px;border:1px solid #9ea1aa;border-radius:18px;background:#fff;margin-right:4px}.dr-datepicker-preset-date__tags__tag--selected{color:#4646ce;background:#f2f2fb;border:1px solid #4646ce}.dr-date-paging{display:flex;flex-direction:row;justify-content:space-between;align-items:center;padding:16px 32px 32px;gap:4px}.dr-date-paging.flip-page-button{width:20px;height:20px;padding:0;color:#4e566c}.dr-date-paging.flip-page-button:hover{border-radius:50%;background:#f2f2fb;color:#4646ce}.example-header-label{cursor:pointer}.dr-quarterly-datepicker{display:flex;justify-content:space-between;padding:10px}.dr-quarterly-datepicker .quarter-selector{display:block;width:74px;height:40px;text-align:center;border-radius:40px;font-weight:400;padding-top:9px}.dr-quarterly-datepicker .quarter-selector:hover{background:#f2f2fb;color:#4646ce;font-weight:600;cursor:pointer}.dr-quarterly-datepicker .quarter-selector.selected{background-color:#4646ce;color:#f3f7ff;font-weight:600}.dr-quarterly-datepicker .quarter-selector--disabled,.dr-quarterly-datepicker .quarter-selector--disabled.selected{pointer-events:none;background-color:transparent;color:#aeabac;font-weight:400}\n"] }]
-    }], function () { return [{ type: i5.MatCalendar }, { type: i1$4.DateAdapter }, { type: CustomDateFormat, decorators: [{
+    }], function () { return [{ type: i6.MatCalendar }, { type: i1$4.DateAdapter }, { type: CustomDateFormat, decorators: [{
                 type: Inject,
                 args: [MAT_DATE_FORMATS]
             }] }, { type: i0.ChangeDetectorRef }, { type: DrDatePickerService }]; }, null); })();
@@ -2173,6 +2173,104 @@ class WeekSelectionStrategy {
         type: Injectable
     }], function () { return [{ type: i1$4.DateAdapter }]; }, null); })();
 
+function DrButtonComponent_i_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 4);
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵclassMap(ctx_r0.icon);
+    i0.ɵɵstyleProp("font-size", ctx_r0.iconSize)("color", ctx_r0.iconColor || "inherit");
+} }
+function DrButtonComponent_div_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 5);
+    i0.ɵɵelement(1, "i", 6);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(1);
+    i0.ɵɵstyleProp("font-size", ctx_r1.iconSize);
+} }
+function DrButtonComponent_i_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 7);
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵclassMap(ctx_r2.iconAfter);
+    i0.ɵɵstyleProp("font-size", ctx_r2.iconAfterSize)("color", ctx_r2.iconAfterColor || "inherit");
+} }
+const _c0$H = ["*"];
+class DrButtonComponent {
+    constructor() {
+        this.theme = 'primary';
+        this.iconSize = '24px';
+        this.iconAfterSize = '24px';
+        this.disabled = false;
+        this.isLoading = false;
+        this.isActive = false;
+    }
+    /** @nocollapse */ static { this.ɵfac = function DrButtonComponent_Factory(t) { return new (t || DrButtonComponent)(); }; }
+    /** @nocollapse */ static { this.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: DrButtonComponent, selectors: [["dr-button"]], hostVars: 12, hostBindings: function DrButtonComponent_HostBindings(rf, ctx) { if (rf & 2) {
+            i0.ɵɵclassMap(ctx.theme);
+            i0.ɵɵclassProp("with-icon", ctx.icon)("with-icon-after", ctx.iconAfter)("disabled", ctx.disabled)("loading", ctx.isLoading)("active", ctx.isActive);
+        } }, inputs: { theme: "theme", icon: "icon", iconColor: "iconColor", iconSize: "iconSize", iconAfter: "iconAfter", iconAfterColor: "iconAfterColor", iconAfterSize: "iconAfterSize", disabled: "disabled", isLoading: "isLoading", isActive: "isActive" }, standalone: true, features: [i0.ɵɵStandaloneFeature], ngContentSelectors: _c0$H, decls: 5, vars: 4, consts: [[3, "disabled"], ["class", "dr-button__icon", 3, "class", "font-size", "color", 4, "ngIf"], ["class", "dr-button__spinner", 4, "ngIf"], ["class", "dr-button__icon dr-button__icon--after", 3, "class", "font-size", "color", 4, "ngIf"], [1, "dr-button__icon"], [1, "dr-button__spinner"], [1, "dr-icon-load"], [1, "dr-button__icon", "dr-button__icon--after"]], template: function DrButtonComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵprojectionDef();
+            i0.ɵɵelementStart(0, "button", 0);
+            i0.ɵɵtemplate(1, DrButtonComponent_i_1_Template, 1, 6, "i", 1);
+            i0.ɵɵprojection(2);
+            i0.ɵɵtemplate(3, DrButtonComponent_div_3_Template, 2, 2, "div", 2);
+            i0.ɵɵtemplate(4, DrButtonComponent_i_4_Template, 1, 6, "i", 3);
+            i0.ɵɵelementEnd();
+        } if (rf & 2) {
+            i0.ɵɵproperty("disabled", ctx.disabled);
+            i0.ɵɵadvance(1);
+            i0.ɵɵproperty("ngIf", ctx.icon);
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("ngIf", ctx.isLoading);
+            i0.ɵɵadvance(1);
+            i0.ɵɵproperty("ngIf", ctx.iconAfter);
+        } }, dependencies: [CommonModule, i1.NgIf], styles: ["[_nghost-%COMP%]{display:inline-block}.disabled[_nghost-%COMP%], .loading[_nghost-%COMP%]{pointer-events:none}[_nghost-%COMP%]   button[_ngcontent-%COMP%]{font-size:14px;line-height:24px;font-weight:400;position:relative;display:flex;align-items:center;flex-wrap:nowrap;cursor:pointer;border-radius:16px;padding:4px 16px;height:32px;border:1px solid}[_nghost-%COMP%]   button[_ngcontent-%COMP%]   .dr-button__spinner[_ngcontent-%COMP%]{display:flex;align-items:center;justify-content:center;position:absolute;inset:0;background:inherit;border-radius:inherit}[_nghost-%COMP%]   button[_ngcontent-%COMP%]   .dr-button__spinner[_ngcontent-%COMP%]   i[_ngcontent-%COMP%]{animation-name:_ngcontent-%COMP%_rotate;animation-iteration-count:infinite;animation-duration:1s}.with-icon[_nghost-%COMP%]   button[_ngcontent-%COMP%]{padding-left:8px}.with-icon[_nghost-%COMP%]   button[_ngcontent-%COMP%]   i[_ngcontent-%COMP%]:first-child{margin-right:4px}.with-icon-after[_nghost-%COMP%]   button[_ngcontent-%COMP%]{padding-right:8px}.with-icon-after[_nghost-%COMP%]   button[_ngcontent-%COMP%]   i[_ngcontent-%COMP%]:last-child{margin-left:4px}.split-primary-first[_nghost-%COMP%]   button[_ngcontent-%COMP%], .split-secondary-first[_nghost-%COMP%]   button[_ngcontent-%COMP%]{border-bottom-right-radius:0;border-top-right-radius:0;padding-right:8px}.help[_nghost-%COMP%]   button[_ngcontent-%COMP%]{padding:4px 16px 4px 8px;color:#333;height:28px;border:none;min-width:84px}.help[_nghost-%COMP%]   button[_ngcontent-%COMP%]   i[_ngcontent-%COMP%]{min-width:4px}.split-primary-last[_nghost-%COMP%]   button[_ngcontent-%COMP%], .split-secondary-last[_nghost-%COMP%]   button[_ngcontent-%COMP%]{border-bottom-left-radius:0;border-top-left-radius:0;padding-right:8px;padding-left:4px;border-left:none}.split-primary-last[_nghost-%COMP%]   button[_ngcontent-%COMP%]   i[_ngcontent-%COMP%], .split-secondary-last[_nghost-%COMP%]   button[_ngcontent-%COMP%]   i[_ngcontent-%COMP%]{margin:0!important}.primary[_nghost-%COMP%]   button[_ngcontent-%COMP%], .split-primary-first[_nghost-%COMP%]   button[_ngcontent-%COMP%], .split-primary-last[_nghost-%COMP%]   button[_ngcontent-%COMP%]{color:#fff;background:#4646ce;border-color:#4646ce}.primary[_nghost-%COMP%]   button[_ngcontent-%COMP%]:hover, .split-primary-first[_nghost-%COMP%]   button[_ngcontent-%COMP%]:hover, .split-primary-last[_nghost-%COMP%]   button[_ngcontent-%COMP%]:hover{background:linear-gradient(96.89deg,#25258c,#4646ce);border-color:linear-gradient(96.89deg,#25258c 0%,#4646ce 100%)}.primary.active[_nghost-%COMP%]   button[_ngcontent-%COMP%], .primary[_nghost-%COMP%]   button[_ngcontent-%COMP%]:active, .split-primary-first.active[_nghost-%COMP%]   button[_ngcontent-%COMP%], .split-primary-first[_nghost-%COMP%]   button[_ngcontent-%COMP%]:active, .split-primary-last.active[_nghost-%COMP%]   button[_ngcontent-%COMP%], .split-primary-last[_nghost-%COMP%]   button[_ngcontent-%COMP%]:active{background:#25258c;border-color:#25258c}.primary.disabled[_nghost-%COMP%]   button[_ngcontent-%COMP%], .split-primary-first.disabled[_nghost-%COMP%]   button[_ngcontent-%COMP%], .split-primary-last.disabled[_nghost-%COMP%]   button[_ngcontent-%COMP%]{color:#aeabac;background:#f0f1f4;border-color:#f0f1f4}.split-primary-first[_nghost-%COMP%]   button[_ngcontent-%COMP%]{border-right-color:#dfe0e3}.split-primary-first.disabled[_nghost-%COMP%]   button[_ngcontent-%COMP%]{border-right-color:#aeabac}.secondary[_nghost-%COMP%]   button[_ngcontent-%COMP%], .split-secondary-first[_nghost-%COMP%]   button[_ngcontent-%COMP%], .split-secondary-last[_nghost-%COMP%]   button[_ngcontent-%COMP%]{color:#4646ce;background:#fff;border-color:#4646ce}.secondary[_nghost-%COMP%]   button[_ngcontent-%COMP%]:hover, .split-secondary-first[_nghost-%COMP%]   button[_ngcontent-%COMP%]:hover, .split-secondary-last[_nghost-%COMP%]   button[_ngcontent-%COMP%]:hover{background:#f5f5f5;box-shadow:0 4px 14px #0000001a}.secondary.active[_nghost-%COMP%]   button[_ngcontent-%COMP%], .secondary[_nghost-%COMP%]   button[_ngcontent-%COMP%]:active, .split-secondary-first.active[_nghost-%COMP%]   button[_ngcontent-%COMP%], .split-secondary-first[_nghost-%COMP%]   button[_ngcontent-%COMP%]:active, .split-secondary-last.active[_nghost-%COMP%]   button[_ngcontent-%COMP%], .split-secondary-last[_nghost-%COMP%]   button[_ngcontent-%COMP%]:active{background:#eaeaff;box-shadow:none}.secondary.disabled[_nghost-%COMP%]   button[_ngcontent-%COMP%], .split-secondary-first.disabled[_nghost-%COMP%]   button[_ngcontent-%COMP%], .split-secondary-last.disabled[_nghost-%COMP%]   button[_ngcontent-%COMP%]{color:#aeabac;border-color:#aeabac}.secondary-white[_nghost-%COMP%]   button[_ngcontent-%COMP%]{color:#fff;background:transparent;border-color:#fff}.secondary-white[_nghost-%COMP%]   button[_ngcontent-%COMP%]:hover{background:transparent;box-shadow:0 4px 14px #0000001a}.secondary-white.active[_nghost-%COMP%]   button[_ngcontent-%COMP%], .secondary-white[_nghost-%COMP%]   button[_ngcontent-%COMP%]:active{background:transparent;box-shadow:none}.secondary-white.disabled[_nghost-%COMP%]   button[_ngcontent-%COMP%]{color:#aeabac;border-color:#aeabac}.split-secondary-first[_nghost-%COMP%]   button[_ngcontent-%COMP%]{border-right-color:#4646ce}.split-secondary-first.disabled[_nghost-%COMP%]   button[_ngcontent-%COMP%]{border-right-color:#aeabac}.icon[_nghost-%COMP%]   button[_ngcontent-%COMP%], .icon-primary[_nghost-%COMP%]   button[_ngcontent-%COMP%], .icon-secondary[_nghost-%COMP%]   button[_ngcontent-%COMP%]{width:28px;height:28px;padding:0;justify-content:center}.icon[_nghost-%COMP%]   button[_ngcontent-%COMP%]   i[_ngcontent-%COMP%], .icon-primary[_nghost-%COMP%]   button[_ngcontent-%COMP%]   i[_ngcontent-%COMP%], .icon-secondary[_nghost-%COMP%]   button[_ngcontent-%COMP%]   i[_ngcontent-%COMP%]{margin:0!important}.icon[_nghost-%COMP%]   button[_ngcontent-%COMP%]{background:transparent;border-color:transparent;color:#6d6e6f}.icon[_nghost-%COMP%]   button[_ngcontent-%COMP%]:hover{color:#333;background:#dfe0e3;border-color:#dfe0e3}.icon.active[_nghost-%COMP%]   button[_ngcontent-%COMP%], .icon[_nghost-%COMP%]   button[_ngcontent-%COMP%]:active{color:#4646ce;background:#eaeaff;border-color:#eaeaff}.icon.disabled[_nghost-%COMP%]   button[_ngcontent-%COMP%]{color:#aeabac;background:transparent;border-color:transparent}.icon-primary[_nghost-%COMP%]   button[_ngcontent-%COMP%]{color:#fff;background:#4646ce;border-color:#4646ce}.icon-primary[_nghost-%COMP%]   button[_ngcontent-%COMP%]:hover{color:#fff;background:linear-gradient(96.89deg,#25258c,#4646ce);border-color:linear-gradient(96.89deg,#25258c 0%,#4646ce 100%)}.icon-primary.active[_nghost-%COMP%]   button[_ngcontent-%COMP%], .icon-primary[_nghost-%COMP%]   button[_ngcontent-%COMP%]:active{color:#fff;background:#25258c;border-color:#25258c}.icon-primary.disabled[_nghost-%COMP%]   button[_ngcontent-%COMP%]{color:#aeabac;background:#f0f1f4;border-color:#f0f1f4}.icon-secondary[_nghost-%COMP%]   button[_ngcontent-%COMP%]{color:#4646ce;background:#fff;border-color:#4646ce}.icon-secondary[_nghost-%COMP%]   button[_ngcontent-%COMP%]:hover{color:#4646ce;background:#f5f5f5;border-color:#4646ce}.icon-secondary.active[_nghost-%COMP%]   button[_ngcontent-%COMP%], .icon-secondary[_nghost-%COMP%]   button[_ngcontent-%COMP%]:active{color:#4646ce;background:#eaeaff;border-color:#4646ce}.icon-secondary.disabled[_nghost-%COMP%]   button[_ngcontent-%COMP%]{color:#aeabac;background:#f0f1f4;border-color:#f0f1f4}.ghost[_nghost-%COMP%]   button[_ngcontent-%COMP%]{border-radius:4px;padding:4px;background:transparent;border-color:transparent;color:#6d6e6f}.ghost[_nghost-%COMP%]   button[_ngcontent-%COMP%]   .dr-button__spinner[_ngcontent-%COMP%]{color:#4646ce;background:#fff}.ghost[_nghost-%COMP%]   button[_ngcontent-%COMP%]:hover{color:#333;background:#f5f5f5;border-color:#f5f5f5}.ghost.active[_nghost-%COMP%]   button[_ngcontent-%COMP%], .ghost[_nghost-%COMP%]   button[_ngcontent-%COMP%]:active{color:#4646ce;background:#eaeaff;border-color:#eaeaff}.ghost.disabled[_nghost-%COMP%]   button[_ngcontent-%COMP%]{color:#aeabac;background:transparent;border-color:transparent}.selection[_nghost-%COMP%]   button[_ngcontent-%COMP%]{border-radius:6px;padding:4px 8px;background:#fff;border-color:#9ea1aa;color:#6d6e6f}.selection[_nghost-%COMP%]   button[_ngcontent-%COMP%]:hover{color:#6d6e6f;background:#f5f5f5;border-color:#4e566c}.selection.active[_nghost-%COMP%]   button[_ngcontent-%COMP%], .selection[_nghost-%COMP%]   button[_ngcontent-%COMP%]:active{color:#6d6e6f;background:#eaeaff;border-color:#4646ce}.selection.disabled[_nghost-%COMP%]   button[_ngcontent-%COMP%]{color:#aeabac;background:#f0f1f4;border-color:#aeabac}.highlight[_nghost-%COMP%]   button[_ngcontent-%COMP%]{border:none;background:none;color:#4646ce;padding:0 4px}.highlight[_nghost-%COMP%]   button[_ngcontent-%COMP%]:hover, .highlight.active[_nghost-%COMP%]   button[_ngcontent-%COMP%], .highlight[_nghost-%COMP%]   button[_ngcontent-%COMP%]:active{text-decoration:underline}.highlight.disabled[_nghost-%COMP%]   button[_ngcontent-%COMP%]{color:#aeabac}.dropdown[_nghost-%COMP%]   button[_ngcontent-%COMP%]{font-size:12px;line-height:16px;font-weight:400;border:1px solid #dfe0e3;border-radius:6px;padding:6px 8px;color:#6d6e6f;background-color:#fff}.dropdown[_nghost-%COMP%]   button[_ngcontent-%COMP%]:hover{background-color:#f5f5f5}.dropdown.active[_nghost-%COMP%]   button[_ngcontent-%COMP%], .dropdown[_nghost-%COMP%]   button[_ngcontent-%COMP%]:active{color:#4646ce}.dropdown.active[_nghost-%COMP%]   button[_ngcontent-%COMP%]   i[_ngcontent-%COMP%]:last-child, .dropdown[_nghost-%COMP%]   button[_ngcontent-%COMP%]:active   i[_ngcontent-%COMP%]:last-child{color:#333}.dropdown.disabled[_nghost-%COMP%]   button[_ngcontent-%COMP%]{background-color:#f0f1f4;color:#aeabac}.dropdown.disabled[_nghost-%COMP%]   button[_ngcontent-%COMP%]   i[_ngcontent-%COMP%]:last-child{color:#aeabac}.danger[_nghost-%COMP%]   button[_ngcontent-%COMP%]{color:#fff;background:#bf1d30;border-color:#bf1d30}.danger[_nghost-%COMP%]   button[_ngcontent-%COMP%]:hover{background:#981440;border-color:#981440}.danger.active[_nghost-%COMP%]   button[_ngcontent-%COMP%], .danger[_nghost-%COMP%]   button[_ngcontent-%COMP%]:active{background:#680325;border-color:#680325}.danger.disabled[_nghost-%COMP%]   button[_ngcontent-%COMP%]{color:#aeabac;background:#f0f1f4;border-color:#f0f1f4}.ai-primary[_nghost-%COMP%]   button[_ngcontent-%COMP%]{color:#fff;border:none;background:linear-gradient(266deg,#6969ff 25.2%,#4eb7df 90.24%)}.ai-primary[_nghost-%COMP%]   button[_ngcontent-%COMP%]:hover{background:linear-gradient(0deg,#4d4dcd66 0% 100%),linear-gradient(266deg,#6969ff 25.2%,#4eb7df 90.24%)}.ai-primary.active[_nghost-%COMP%]   button[_ngcontent-%COMP%], .ai-primary[_nghost-%COMP%]   button[_ngcontent-%COMP%]:active{background:linear-gradient(0deg,#4d4dcd66 0% 100%),linear-gradient(266deg,#6969ff 25.2%,#4eb7df 90.24%)}.ai-primary.disabled[_nghost-%COMP%]   button[_ngcontent-%COMP%]{color:#aeabac;background:#f0f1f4;border-color:#f0f1f4}.ai-secondary[_nghost-%COMP%]   button[_ngcontent-%COMP%]{color:#4646ce;border:none!important;z-index:1;background:linear-gradient(269.57deg,#6969ff -4.23%,#4eb7df 103.6%)!important}.ai-secondary[_nghost-%COMP%]   button[_ngcontent-%COMP%]:before{content:\"\";position:absolute;inset:1px;border-radius:15px;background-color:#fff;z-index:-1}.ai-secondary[_nghost-%COMP%]   button[_ngcontent-%COMP%]:hover{box-shadow:0 4px 14px #0000001a}.ai-secondary.active[_nghost-%COMP%]   button[_ngcontent-%COMP%], .ai-secondary[_nghost-%COMP%]   button[_ngcontent-%COMP%]:active{box-shadow:none}.ai-secondary.active[_nghost-%COMP%]   button[_ngcontent-%COMP%]:before, .ai-secondary[_nghost-%COMP%]   button[_ngcontent-%COMP%]:active:before{background:linear-gradient(270deg,#6969ff33 -4.23%,#4eb7df33 103.6%),#fff}.ai-secondary.disabled[_nghost-%COMP%]   button[_ngcontent-%COMP%]{color:#aeabac;background:#f0f1f4!important;border:1px solid #aeabac!important}.ai-secondary.disabled[_nghost-%COMP%]   button[_ngcontent-%COMP%]:before{display:none}@keyframes _ngcontent-%COMP%_rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}"] }); }
+}
+(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DrButtonComponent, [{
+        type: Component,
+        args: [{ selector: 'dr-button', standalone: true, imports: [CommonModule], template: "<button [disabled]=\"disabled\">\n    <i *ngIf=\"icon\" class=\"dr-button__icon\" [class]=\"icon\" [style.font-size]=\"iconSize\" [style.color]=\"iconColor || 'inherit'\">\n    </i>\n    <ng-content></ng-content>\n    <div *ngIf=\"isLoading\" class=\"dr-button__spinner\">\n        <i [style.font-size]=\"iconSize\" class=\"dr-icon-load\"></i>\n    </div>\n    <i\n        *ngIf=\"iconAfter\"\n        class=\"dr-button__icon dr-button__icon--after\"\n        [class]=\"iconAfter\"\n        [style.font-size]=\"iconAfterSize\"\n        [style.color]=\"iconAfterColor || 'inherit'\">\n    </i>\n</button>\n", styles: [":host{display:inline-block}:host.disabled,:host.loading{pointer-events:none}:host button{font-size:14px;line-height:24px;font-weight:400;position:relative;display:flex;align-items:center;flex-wrap:nowrap;cursor:pointer;border-radius:16px;padding:4px 16px;height:32px;border:1px solid}:host button .dr-button__spinner{display:flex;align-items:center;justify-content:center;position:absolute;inset:0;background:inherit;border-radius:inherit}:host button .dr-button__spinner i{animation-name:rotate;animation-iteration-count:infinite;animation-duration:1s}:host.with-icon button{padding-left:8px}:host.with-icon button i:first-child{margin-right:4px}:host.with-icon-after button{padding-right:8px}:host.with-icon-after button i:last-child{margin-left:4px}:host.split-primary-first button,:host.split-secondary-first button{border-bottom-right-radius:0;border-top-right-radius:0;padding-right:8px}:host.help button{padding:4px 16px 4px 8px;color:#333;height:28px;border:none;min-width:84px}:host.help button i{min-width:4px}:host.split-primary-last button,:host.split-secondary-last button{border-bottom-left-radius:0;border-top-left-radius:0;padding-right:8px;padding-left:4px;border-left:none}:host.split-primary-last button i,:host.split-secondary-last button i{margin:0!important}:host.primary button,:host.split-primary-first button,:host.split-primary-last button{color:#fff;background:#4646ce;border-color:#4646ce}:host.primary button:hover,:host.split-primary-first button:hover,:host.split-primary-last button:hover{background:linear-gradient(96.89deg,#25258c,#4646ce);border-color:linear-gradient(96.89deg,#25258c 0%,#4646ce 100%)}:host.primary.active button,:host.primary button:active,:host.split-primary-first.active button,:host.split-primary-first button:active,:host.split-primary-last.active button,:host.split-primary-last button:active{background:#25258c;border-color:#25258c}:host.primary.disabled button,:host.split-primary-first.disabled button,:host.split-primary-last.disabled button{color:#aeabac;background:#f0f1f4;border-color:#f0f1f4}:host.split-primary-first button{border-right-color:#dfe0e3}:host.split-primary-first.disabled button{border-right-color:#aeabac}:host.secondary button,:host.split-secondary-first button,:host.split-secondary-last button{color:#4646ce;background:#fff;border-color:#4646ce}:host.secondary button:hover,:host.split-secondary-first button:hover,:host.split-secondary-last button:hover{background:#f5f5f5;box-shadow:0 4px 14px #0000001a}:host.secondary.active button,:host.secondary button:active,:host.split-secondary-first.active button,:host.split-secondary-first button:active,:host.split-secondary-last.active button,:host.split-secondary-last button:active{background:#eaeaff;box-shadow:none}:host.secondary.disabled button,:host.split-secondary-first.disabled button,:host.split-secondary-last.disabled button{color:#aeabac;border-color:#aeabac}:host.secondary-white button{color:#fff;background:transparent;border-color:#fff}:host.secondary-white button:hover{background:transparent;box-shadow:0 4px 14px #0000001a}:host.secondary-white.active button,:host.secondary-white button:active{background:transparent;box-shadow:none}:host.secondary-white.disabled button{color:#aeabac;border-color:#aeabac}:host.split-secondary-first button{border-right-color:#4646ce}:host.split-secondary-first.disabled button{border-right-color:#aeabac}:host.icon button,:host.icon-primary button,:host.icon-secondary button{width:28px;height:28px;padding:0;justify-content:center}:host.icon button i,:host.icon-primary button i,:host.icon-secondary button i{margin:0!important}:host.icon button{background:transparent;border-color:transparent;color:#6d6e6f}:host.icon button:hover{color:#333;background:#dfe0e3;border-color:#dfe0e3}:host.icon.active button,:host.icon button:active{color:#4646ce;background:#eaeaff;border-color:#eaeaff}:host.icon.disabled button{color:#aeabac;background:transparent;border-color:transparent}:host.icon-primary button{color:#fff;background:#4646ce;border-color:#4646ce}:host.icon-primary button:hover{color:#fff;background:linear-gradient(96.89deg,#25258c,#4646ce);border-color:linear-gradient(96.89deg,#25258c 0%,#4646ce 100%)}:host.icon-primary.active button,:host.icon-primary button:active{color:#fff;background:#25258c;border-color:#25258c}:host.icon-primary.disabled button{color:#aeabac;background:#f0f1f4;border-color:#f0f1f4}:host.icon-secondary button{color:#4646ce;background:#fff;border-color:#4646ce}:host.icon-secondary button:hover{color:#4646ce;background:#f5f5f5;border-color:#4646ce}:host.icon-secondary.active button,:host.icon-secondary button:active{color:#4646ce;background:#eaeaff;border-color:#4646ce}:host.icon-secondary.disabled button{color:#aeabac;background:#f0f1f4;border-color:#f0f1f4}:host.ghost button{border-radius:4px;padding:4px;background:transparent;border-color:transparent;color:#6d6e6f}:host.ghost button .dr-button__spinner{color:#4646ce;background:#fff}:host.ghost button:hover{color:#333;background:#f5f5f5;border-color:#f5f5f5}:host.ghost.active button,:host.ghost button:active{color:#4646ce;background:#eaeaff;border-color:#eaeaff}:host.ghost.disabled button{color:#aeabac;background:transparent;border-color:transparent}:host.selection button{border-radius:6px;padding:4px 8px;background:#fff;border-color:#9ea1aa;color:#6d6e6f}:host.selection button:hover{color:#6d6e6f;background:#f5f5f5;border-color:#4e566c}:host.selection.active button,:host.selection button:active{color:#6d6e6f;background:#eaeaff;border-color:#4646ce}:host.selection.disabled button{color:#aeabac;background:#f0f1f4;border-color:#aeabac}:host.highlight button{border:none;background:none;color:#4646ce;padding:0 4px}:host.highlight button:hover,:host.highlight.active button,:host.highlight button:active{text-decoration:underline}:host.highlight.disabled button{color:#aeabac}:host.dropdown button{font-size:12px;line-height:16px;font-weight:400;border:1px solid #dfe0e3;border-radius:6px;padding:6px 8px;color:#6d6e6f;background-color:#fff}:host.dropdown button:hover{background-color:#f5f5f5}:host.dropdown.active button,:host.dropdown button:active{color:#4646ce}:host.dropdown.active button i:last-child,:host.dropdown button:active i:last-child{color:#333}:host.dropdown.disabled button{background-color:#f0f1f4;color:#aeabac}:host.dropdown.disabled button i:last-child{color:#aeabac}:host.danger button{color:#fff;background:#bf1d30;border-color:#bf1d30}:host.danger button:hover{background:#981440;border-color:#981440}:host.danger.active button,:host.danger button:active{background:#680325;border-color:#680325}:host.danger.disabled button{color:#aeabac;background:#f0f1f4;border-color:#f0f1f4}:host.ai-primary button{color:#fff;border:none;background:linear-gradient(266deg,#6969ff 25.2%,#4eb7df 90.24%)}:host.ai-primary button:hover{background:linear-gradient(0deg,#4d4dcd66 0% 100%),linear-gradient(266deg,#6969ff 25.2%,#4eb7df 90.24%)}:host.ai-primary.active button,:host.ai-primary button:active{background:linear-gradient(0deg,#4d4dcd66 0% 100%),linear-gradient(266deg,#6969ff 25.2%,#4eb7df 90.24%)}:host.ai-primary.disabled button{color:#aeabac;background:#f0f1f4;border-color:#f0f1f4}:host.ai-secondary button{color:#4646ce;border:none!important;z-index:1;background:linear-gradient(269.57deg,#6969ff -4.23%,#4eb7df 103.6%)!important}:host.ai-secondary button:before{content:\"\";position:absolute;inset:1px;border-radius:15px;background-color:#fff;z-index:-1}:host.ai-secondary button:hover{box-shadow:0 4px 14px #0000001a}:host.ai-secondary.active button,:host.ai-secondary button:active{box-shadow:none}:host.ai-secondary.active button:before,:host.ai-secondary button:active:before{background:linear-gradient(270deg,#6969ff33 -4.23%,#4eb7df33 103.6%),#fff}:host.ai-secondary.disabled button{color:#aeabac;background:#f0f1f4!important;border:1px solid #aeabac!important}:host.ai-secondary.disabled button:before{display:none}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
+    }], null, { theme: [{
+            type: Input
+        }, {
+            type: HostBinding,
+            args: ['class']
+        }], icon: [{
+            type: Input
+        }, {
+            type: HostBinding,
+            args: ['class.with-icon']
+        }], iconColor: [{
+            type: Input
+        }], iconSize: [{
+            type: Input
+        }], iconAfter: [{
+            type: Input
+        }, {
+            type: HostBinding,
+            args: ['class.with-icon-after']
+        }], iconAfterColor: [{
+            type: Input
+        }], iconAfterSize: [{
+            type: Input
+        }], disabled: [{
+            type: Input
+        }, {
+            type: HostBinding,
+            args: ['class.disabled']
+        }], isLoading: [{
+            type: Input
+        }, {
+            type: HostBinding,
+            args: ['class.loading']
+        }], isActive: [{
+            type: Input
+        }, {
+            type: HostBinding,
+            args: ['class.active']
+        }] }); })();
+
 class DrDatePickerFormatDirective {
     set datePickerFormat(format) {
         if (this.configDateParse) {
@@ -2221,60 +2319,82 @@ class DrDatePickerFormatDirective {
             args: ['drDatePickerFormat']
         }] }); })();
 
-const _c0$H = ["datePicker"];
+const _c0$G = ["datePicker"];
+function DrDatePickerComponent_i_0_Template(rf, ctx) { if (rf & 1) {
+    const _r4 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "i", 2);
+    i0.ɵɵlistener("click", function DrDatePickerComponent_i_0_Template_i_click_0_listener() { i0.ɵɵrestoreView(_r4); const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.datePicker.open()); });
+    i0.ɵɵelementEnd();
+} }
 function DrDatePickerComponent_ng_container_1_Template(rf, ctx) { if (rf & 1) {
-    const _r5 = i0.ɵɵgetCurrentView();
+    const _r8 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementContainerStart(0);
-    i0.ɵɵelementStart(1, "input", 2);
-    i0.ɵɵlistener("click", function DrDatePickerComponent_ng_container_1_Template_input_click_1_listener() { i0.ɵɵrestoreView(_r5); const _r3 = i0.ɵɵreference(9); return i0.ɵɵresetView(_r3.open()); });
+    i0.ɵɵelementStart(1, "input", 3);
+    i0.ɵɵlistener("click", function DrDatePickerComponent_ng_container_1_Template_input_click_1_listener() { i0.ɵɵrestoreView(_r8); const _r6 = i0.ɵɵreference(9); return i0.ɵɵresetView(_r6.open()); });
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(2, "mat-date-range-input", 3)(3, "input", 4, 5);
-    i0.ɵɵlistener("dateChange", function DrDatePickerComponent_ng_container_1_Template_input_dateChange_3_listener() { i0.ɵɵrestoreView(_r5); const ctx_r6 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r6.valueChangedInCalendar(ctx_r6.rangeForm.value.start)); });
+    i0.ɵɵelementStart(2, "mat-date-range-input", 4)(3, "input", 5, 6);
+    i0.ɵɵlistener("dateChange", function DrDatePickerComponent_ng_container_1_Template_input_dateChange_3_listener() { i0.ɵɵrestoreView(_r8); const ctx_r9 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r9.valueChangedInCalendar(ctx_r9.rangeForm.value.start)); });
     i0.ɵɵpipe(5, "async");
     i0.ɵɵelementEnd();
-    i0.ɵɵelement(6, "input", 6);
+    i0.ɵɵelement(6, "input", 7);
     i0.ɵɵpipe(7, "async");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(8, "mat-date-range-picker", 7, 8);
-    i0.ɵɵlistener("yearSelected", function DrDatePickerComponent_ng_container_1_Template_mat_date_range_picker_yearSelected_8_listener($event) { i0.ɵɵrestoreView(_r5); const _r3 = i0.ɵɵreference(9); const ctx_r7 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r7.chosenPeriodHandler($event, ctx_r7.timeframeOption.YEAR, _r3)); })("monthSelected", function DrDatePickerComponent_ng_container_1_Template_mat_date_range_picker_monthSelected_8_listener($event) { i0.ɵɵrestoreView(_r5); const _r3 = i0.ɵɵreference(9); const ctx_r8 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r8.chosenPeriodHandler($event, ctx_r8.timeframeOption.MONTH, _r3)); })("opened", function DrDatePickerComponent_ng_container_1_Template_mat_date_range_picker_opened_8_listener() { i0.ɵɵrestoreView(_r5); const ctx_r9 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r9.onOpen()); })("closed", function DrDatePickerComponent_ng_container_1_Template_mat_date_range_picker_closed_8_listener() { i0.ɵɵrestoreView(_r5); const ctx_r10 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r10.onCLose()); });
+    i0.ɵɵelementStart(8, "mat-date-range-picker", 8, 9);
+    i0.ɵɵlistener("yearSelected", function DrDatePickerComponent_ng_container_1_Template_mat_date_range_picker_yearSelected_8_listener($event) { i0.ɵɵrestoreView(_r8); const _r6 = i0.ɵɵreference(9); const ctx_r10 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r10.chosenPeriodHandler($event, ctx_r10.timeframeOption.YEAR, _r6)); })("monthSelected", function DrDatePickerComponent_ng_container_1_Template_mat_date_range_picker_monthSelected_8_listener($event) { i0.ɵɵrestoreView(_r8); const _r6 = i0.ɵɵreference(9); const ctx_r11 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r11.chosenPeriodHandler($event, ctx_r11.timeframeOption.MONTH, _r6)); })("opened", function DrDatePickerComponent_ng_container_1_Template_mat_date_range_picker_opened_8_listener() { i0.ɵɵrestoreView(_r8); const ctx_r12 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r12.onOpen()); })("closed", function DrDatePickerComponent_ng_container_1_Template_mat_date_range_picker_closed_8_listener() { i0.ɵɵrestoreView(_r8); const ctx_r13 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r13.onCLose()); });
     i0.ɵɵelementEnd();
     i0.ɵɵelementContainerEnd();
 } if (rf & 2) {
-    const _r2 = i0.ɵɵreference(4);
-    const _r3 = i0.ɵɵreference(9);
-    const ctx_r0 = i0.ɵɵnextContext();
+    const _r5 = i0.ɵɵreference(4);
+    const _r6 = i0.ɵɵreference(9);
+    const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵadvance(1);
-    i0.ɵɵproperty("ngModel", _r2.value)("disabled", ctx_r0.disabled)("placeholder", ctx_r0.placeholder)("readonly", ctx_r0.readonly)("min", ctx_r0._min)("max", ctx_r0._max);
-    i0.ɵɵattribute("id", ctx_r0.id);
+    i0.ɵɵproperty("ngModel", _r5.value)("disabled", ctx_r1.disabled)("placeholder", ctx_r1.placeholder)("readonly", ctx_r1.readonly)("min", ctx_r1._min)("max", ctx_r1._max);
+    i0.ɵɵattribute("id", ctx_r1.id);
     i0.ɵɵadvance(1);
-    i0.ɵɵproperty("formGroup", ctx_r0.rangeForm)("rangePicker", _r3)("dateFilter", ctx_r0.dateFilter);
+    i0.ɵɵproperty("formGroup", ctx_r1.rangeForm)("rangePicker", _r6)("dateFilter", ctx_r1.dateFilter);
     i0.ɵɵadvance(1);
-    i0.ɵɵproperty("drDatePickerFormat", i0.ɵɵpipeBind1(5, 15, ctx_r0.datePickerService.format$));
+    i0.ɵɵproperty("drDatePickerFormat", i0.ɵɵpipeBind1(5, 15, ctx_r1.datePickerService.format$));
     i0.ɵɵadvance(3);
-    i0.ɵɵproperty("drDatePickerFormat", i0.ɵɵpipeBind1(7, 17, ctx_r0.datePickerService.format$));
+    i0.ɵɵproperty("drDatePickerFormat", i0.ɵɵpipeBind1(7, 17, ctx_r1.datePickerService.format$));
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("startAt", ctx_r0._startAt)("panelClass", "dr-week-datepicker" + (ctx_r0.panelClass ? " " + ctx_r0.panelClass : ""))("calendarHeaderComponent", ctx_r0.customHeader);
+    i0.ɵɵproperty("startAt", ctx_r1._startAt)("panelClass", "dr-week-datepicker" + (ctx_r1.panelClass ? " " + ctx_r1.panelClass : ""))("calendarHeaderComponent", ctx_r1.customHeader);
+} }
+function DrDatePickerComponent_ng_container_3_dr_button_4_Template(rf, ctx) { if (rf & 1) {
+    const _r17 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "dr-button", 13);
+    i0.ɵɵlistener("click", function DrDatePickerComponent_ng_container_3_dr_button_4_Template_dr_button_click_0_listener() { i0.ɵɵrestoreView(_r17); i0.ɵɵnextContext(); const _r15 = i0.ɵɵreference(6); return i0.ɵɵresetView(_r15.open()); });
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r14 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("icon", "dr-icon-date")("iconAfter", ctx_r14.iconAfterButton);
+    i0.ɵɵadvance(1);
+    i0.ɵɵtextInterpolate1(" ", ctx_r14.buttonLabel || "Select Date", " ");
 } }
 function DrDatePickerComponent_ng_container_3_Template(rf, ctx) { if (rf & 1) {
-    const _r13 = i0.ɵɵgetCurrentView();
+    const _r19 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementContainerStart(0);
-    i0.ɵɵelementStart(1, "input", 9);
-    i0.ɵɵlistener("ngModelChange", function DrDatePickerComponent_ng_container_3_Template_input_ngModelChange_1_listener($event) { i0.ɵɵrestoreView(_r13); const ctx_r12 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r12.valueChangedInCalendar($event)); })("click", function DrDatePickerComponent_ng_container_3_Template_input_click_1_listener() { i0.ɵɵrestoreView(_r13); const _r11 = i0.ɵɵreference(5); return i0.ɵɵresetView(_r11.open()); });
+    i0.ɵɵelementStart(1, "input", 10);
+    i0.ɵɵlistener("ngModelChange", function DrDatePickerComponent_ng_container_3_Template_input_ngModelChange_1_listener($event) { i0.ɵɵrestoreView(_r19); const ctx_r18 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r18.valueChangedInCalendar($event)); })("click", function DrDatePickerComponent_ng_container_3_Template_input_click_1_listener() { i0.ɵɵrestoreView(_r19); const _r15 = i0.ɵɵreference(6); return i0.ɵɵresetView(_r15.open()); });
     i0.ɵɵpipe(2, "async");
     i0.ɵɵpipe(3, "async");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "mat-datepicker", 10, 8);
-    i0.ɵɵlistener("yearSelected", function DrDatePickerComponent_ng_container_3_Template_mat_datepicker_yearSelected_4_listener($event) { i0.ɵɵrestoreView(_r13); const _r11 = i0.ɵɵreference(5); const ctx_r15 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r15.chosenPeriodHandler($event, ctx_r15.timeframeOption.YEAR, _r11)); })("monthSelected", function DrDatePickerComponent_ng_container_3_Template_mat_datepicker_monthSelected_4_listener($event) { i0.ɵɵrestoreView(_r13); const _r11 = i0.ɵɵreference(5); const ctx_r16 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r16.chosenPeriodHandler($event, ctx_r16.timeframeOption.MONTH, _r11)); })("opened", function DrDatePickerComponent_ng_container_3_Template_mat_datepicker_opened_4_listener() { i0.ɵɵrestoreView(_r13); const ctx_r17 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r17.onOpen()); })("closed", function DrDatePickerComponent_ng_container_3_Template_mat_datepicker_closed_4_listener() { i0.ɵɵrestoreView(_r13); const ctx_r18 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r18.onCLose()); });
+    i0.ɵɵtemplate(4, DrDatePickerComponent_ng_container_3_dr_button_4_Template, 2, 3, "dr-button", 11);
+    i0.ɵɵelementStart(5, "mat-datepicker", 12, 9);
+    i0.ɵɵlistener("yearSelected", function DrDatePickerComponent_ng_container_3_Template_mat_datepicker_yearSelected_5_listener($event) { i0.ɵɵrestoreView(_r19); const _r15 = i0.ɵɵreference(6); const ctx_r21 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r21.chosenPeriodHandler($event, ctx_r21.timeframeOption.YEAR, _r15)); })("monthSelected", function DrDatePickerComponent_ng_container_3_Template_mat_datepicker_monthSelected_5_listener($event) { i0.ɵɵrestoreView(_r19); const _r15 = i0.ɵɵreference(6); const ctx_r22 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r22.chosenPeriodHandler($event, ctx_r22.timeframeOption.MONTH, _r15)); })("opened", function DrDatePickerComponent_ng_container_3_Template_mat_datepicker_opened_5_listener() { i0.ɵɵrestoreView(_r19); const ctx_r23 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r23.onOpen()); })("closed", function DrDatePickerComponent_ng_container_3_Template_mat_datepicker_closed_5_listener() { i0.ɵɵrestoreView(_r19); const ctx_r24 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r24.onCLose()); });
     i0.ɵɵelementEnd();
     i0.ɵɵelementContainerEnd();
 } if (rf & 2) {
-    const _r11 = i0.ɵɵreference(5);
-    const ctx_r1 = i0.ɵɵnextContext();
+    const _r15 = i0.ɵɵreference(6);
+    const ctx_r2 = i0.ɵɵnextContext();
     i0.ɵɵadvance(1);
-    i0.ɵɵproperty("ngModel", i0.ɵɵpipeBind1(2, 13, ctx_r1.displayValue$))("matDatepicker", _r11)("matDatepickerFilter", ctx_r1.dateFilter)("disabled", ctx_r1.disabled)("placeholder", ctx_r1.placeholder)("drDatePickerFormat", i0.ɵɵpipeBind1(3, 15, ctx_r1.datePickerService.format$))("readonly", ctx_r1.readonly)("min", ctx_r1._min)("max", ctx_r1._max);
-    i0.ɵɵattribute("id", ctx_r1.id);
+    i0.ɵɵclassProp("hidden-calendar-input", ctx_r2.useButton);
+    i0.ɵɵproperty("ngModel", i0.ɵɵpipeBind1(2, 16, ctx_r2.displayValue$))("matDatepicker", _r15)("matDatepickerFilter", ctx_r2.dateFilter)("disabled", ctx_r2.disabled)("placeholder", ctx_r2.placeholder)("drDatePickerFormat", i0.ɵɵpipeBind1(3, 18, ctx_r2.datePickerService.format$))("readonly", ctx_r2.readonly)("min", ctx_r2._min)("max", ctx_r2._max);
+    i0.ɵɵattribute("id", ctx_r2.id);
     i0.ɵɵadvance(3);
-    i0.ɵɵproperty("panelClass", ctx_r1.panelClass)("startAt", ctx_r1._startAt)("calendarHeaderComponent", ctx_r1.customHeader);
+    i0.ɵɵproperty("ngIf", ctx_r2.useButton);
+    i0.ɵɵadvance(1);
+    i0.ɵɵproperty("panelClass", ctx_r2.panelClass)("startAt", ctx_r2._startAt)("calendarHeaderComponent", ctx_r2.customHeader);
 } }
 const noop$2 = () => { };
 class CustomDateAdapter extends MomentDateAdapter {
@@ -2572,32 +2692,31 @@ class DrDatePickerComponent {
     }
     /** @nocollapse */ static { this.ɵfac = function DrDatePickerComponent_Factory(t) { return new (t || DrDatePickerComponent)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(i1$4.DateAdapter), i0.ɵɵdirectiveInject(DrDatePickerService)); }; }
     /** @nocollapse */ static { this.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: DrDatePickerComponent, selectors: [["dr-date-picker"]], viewQuery: function DrDatePickerComponent_Query(rf, ctx) { if (rf & 1) {
-            i0.ɵɵviewQuery(_c0$H, 5);
+            i0.ɵɵviewQuery(_c0$G, 5);
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.datePicker = _t.first);
-        } }, hostVars: 5, hostBindings: function DrDatePickerComponent_HostBindings(rf, ctx) { if (rf & 2) {
+        } }, hostVars: 7, hostBindings: function DrDatePickerComponent_HostBindings(rf, ctx) { if (rf & 2) {
             i0.ɵɵattribute("id", ctx.hostId);
-            i0.ɵɵclassProp("disabled", ctx.disabled)("active", ctx.active);
-        } }, inputs: { id: "id", useDarkTheme: "useDarkTheme", format: "format", min: "min", max: "max", startAt: "startAt", periodPosition: "periodPosition", placeholder: "placeholder", disabled: "disabled", fiscalYearMonthsModifier: "fiscalYearMonthsModifier", fiscalYearBack: "fiscalYearBack", datepickerFilter: "datepickerFilter", fixForNormalizedValueWithMaxDate: "fixForNormalizedValueWithMaxDate" }, features: [i0.ɵɵProvidersFeature([
+            i0.ɵɵclassProp("use-button-picker", ctx.useButton)("disabled", ctx.disabled)("active", ctx.active);
+        } }, inputs: { id: "id", useButton: "useButton", buttonLabel: "buttonLabel", iconAfterButton: "iconAfterButton", useDarkTheme: "useDarkTheme", format: "format", min: "min", max: "max", startAt: "startAt", periodPosition: "periodPosition", placeholder: "placeholder", disabled: "disabled", fiscalYearMonthsModifier: "fiscalYearMonthsModifier", fiscalYearBack: "fiscalYearBack", datepickerFilter: "datepickerFilter", fixForNormalizedValueWithMaxDate: "fixForNormalizedValueWithMaxDate" }, features: [i0.ɵɵProvidersFeature([
                 { provide: NG_VALUE_ACCESSOR, useExisting: DrDatePickerComponent, multi: true },
                 { provide: DateAdapter, useClass: CustomDateAdapter },
                 { provide: MAT_DATE_RANGE_SELECTION_STRATEGY, useClass: WeekSelectionStrategy },
                 DrDatePickerService,
-            ]), i0.ɵɵNgOnChangesFeature], decls: 5, vars: 6, consts: [[1, "dr-icon-date", 3, "click"], [4, "ngIf"], [3, "ngModel", "disabled", "placeholder", "readonly", "min", "max", "click"], [1, "range-input", 3, "formGroup", "rangePicker", "dateFilter"], ["matStartDate", "", "formControlName", "start", 3, "drDatePickerFormat", "dateChange"], ["input", ""], ["matEndDate", "", "formControlName", "end", 3, "drDatePickerFormat"], [3, "startAt", "panelClass", "calendarHeaderComponent", "yearSelected", "monthSelected", "opened", "closed"], ["datePicker", ""], [3, "ngModel", "matDatepicker", "matDatepickerFilter", "disabled", "placeholder", "drDatePickerFormat", "readonly", "min", "max", "ngModelChange", "click"], [3, "panelClass", "startAt", "calendarHeaderComponent", "yearSelected", "monthSelected", "opened", "closed"]], template: function DrDatePickerComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵelementStart(0, "i", 0);
-            i0.ɵɵlistener("click", function DrDatePickerComponent_Template_i_click_0_listener() { return ctx.datePicker.open(); });
-            i0.ɵɵelementEnd();
+            ]), i0.ɵɵNgOnChangesFeature], decls: 5, vars: 7, consts: [["class", "dr-icon-date", 3, "click", 4, "ngIf"], [4, "ngIf"], [1, "dr-icon-date", 3, "click"], [3, "ngModel", "disabled", "placeholder", "readonly", "min", "max", "click"], [1, "range-input", 3, "formGroup", "rangePicker", "dateFilter"], ["matStartDate", "", "formControlName", "start", 3, "drDatePickerFormat", "dateChange"], ["input", ""], ["matEndDate", "", "formControlName", "end", 3, "drDatePickerFormat"], [3, "startAt", "panelClass", "calendarHeaderComponent", "yearSelected", "monthSelected", "opened", "closed"], ["datePicker", ""], [3, "ngModel", "matDatepicker", "matDatepickerFilter", "disabled", "placeholder", "drDatePickerFormat", "readonly", "min", "max", "ngModelChange", "click"], ["class", "datepicker-button", 3, "icon", "iconAfter", "click", 4, "ngIf"], [3, "panelClass", "startAt", "calendarHeaderComponent", "yearSelected", "monthSelected", "opened", "closed"], [1, "datepicker-button", 3, "icon", "iconAfter", "click"]], template: function DrDatePickerComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵtemplate(0, DrDatePickerComponent_i_0_Template, 1, 0, "i", 0);
             i0.ɵɵtemplate(1, DrDatePickerComponent_ng_container_1_Template, 10, 19, "ng-container", 1);
             i0.ɵɵpipe(2, "async");
-            i0.ɵɵtemplate(3, DrDatePickerComponent_ng_container_3_Template, 6, 17, "ng-container", 1);
+            i0.ɵɵtemplate(3, DrDatePickerComponent_ng_container_3_Template, 7, 20, "ng-container", 1);
             i0.ɵɵpipe(4, "async");
         } if (rf & 2) {
+            i0.ɵɵproperty("ngIf", !ctx.useButton);
             i0.ɵɵadvance(1);
-            i0.ɵɵproperty("ngIf", i0.ɵɵpipeBind1(2, 2, ctx.datePickerService.timeframe$) === "week");
+            i0.ɵɵproperty("ngIf", i0.ɵɵpipeBind1(2, 3, ctx.datePickerService.timeframe$) === "week");
             i0.ɵɵadvance(2);
-            i0.ɵɵproperty("ngIf", i0.ɵɵpipeBind1(4, 4, ctx.datePickerService.timeframe$) !== "week");
-        } }, dependencies: [i1$2.DefaultValueAccessor, i1$2.NgControlStatus, i1$2.NgControlStatusGroup, i1$2.NgModel, i1$2.FormGroupDirective, i1$2.FormControlName, i1.NgIf, i5.MatDatepicker, i5.MatDatepickerInput, i5.MatDateRangeInput, i5.MatStartDate, i5.MatEndDate, i5.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}[_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}[_nghost-%COMP%]:after, [_nghost-%COMP%]:before{position:absolute;display:flex;border-color:#6d6e6f transparent transparent;color:#6d6e6f}[_nghost-%COMP%]:after{font-family:DataRails!important;content:\"\\ea17\";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%]   .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$) !== "week");
+        } }, dependencies: [DrButtonComponent, i1$2.DefaultValueAccessor, i1$2.NgControlStatus, i1$2.NgControlStatusGroup, i1$2.NgModel, i1$2.FormGroupDirective, i1$2.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-radius:6px;color:#333;overflow:hidden;outline:none;cursor:pointer}[_nghost-%COMP%]:not(.use-button-picker){border:1px solid #9ea1aa}[_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:\"\\ea17\";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 }); }
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DrDatePickerComponent, [{
         type: Component,
@@ -2606,12 +2725,21 @@ class DrDatePickerComponent {
                     { provide: DateAdapter, useClass: CustomDateAdapter },
                     { provide: MAT_DATE_RANGE_SELECTION_STRATEGY, useClass: WeekSelectionStrategy },
                     DrDatePickerService,
-                ], template: "<i 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\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: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:after,:host:before{position:absolute;display:flex;border-color:#6d6e6f transparent transparent;color:#6d6e6f}:host:after{font-family:DataRails!important;content:\"\\ea17\";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 .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) === '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-radius:6px;color:#333;overflow:hidden;outline:none;cursor:pointer}:host:not(.use-button-picker){border:1px solid #9ea1aa}: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:\"\\ea17\";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"] }]
     }], function () { return [{ type: i0.ChangeDetectorRef }, { type: i1$4.DateAdapter }, { type: DrDatePickerService }]; }, { id: [{
             type: Input
         }], hostId: [{
             type: HostBinding,
             args: ['attr.id']
+        }], useButton: [{
+            type: Input
+        }, {
+            type: HostBinding,
+            args: ['class.use-button-picker']
+        }], buttonLabel: [{
+            type: Input
+        }], iconAfterButton: [{
+            type: Input
         }], useDarkTheme: [{
             type: Input
         }], format: [{
@@ -3771,104 +3899,6 @@ class ListTagComponent {
             type: Output
         }] }); })();
 
-function DrButtonComponent_i_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 4);
-} if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext();
-    i0.ɵɵclassMap(ctx_r0.icon);
-    i0.ɵɵstyleProp("font-size", ctx_r0.iconSize)("color", ctx_r0.iconColor || "inherit");
-} }
-function DrButtonComponent_div_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 5);
-    i0.ɵɵelement(1, "i", 6);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵadvance(1);
-    i0.ɵɵstyleProp("font-size", ctx_r1.iconSize);
-} }
-function DrButtonComponent_i_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 7);
-} if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext();
-    i0.ɵɵclassMap(ctx_r2.iconAfter);
-    i0.ɵɵstyleProp("font-size", ctx_r2.iconAfterSize)("color", ctx_r2.iconAfterColor || "inherit");
-} }
-const _c0$G = ["*"];
-class DrButtonComponent {
-    constructor() {
-        this.theme = 'primary';
-        this.iconSize = '24px';
-        this.iconAfterSize = '24px';
-        this.disabled = false;
-        this.isLoading = false;
-        this.isActive = false;
-    }
-    /** @nocollapse */ static { this.ɵfac = function DrButtonComponent_Factory(t) { return new (t || DrButtonComponent)(); }; }
-    /** @nocollapse */ static { this.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: DrButtonComponent, selectors: [["dr-button"]], hostVars: 12, hostBindings: function DrButtonComponent_HostBindings(rf, ctx) { if (rf & 2) {
-            i0.ɵɵclassMap(ctx.theme);
-            i0.ɵɵclassProp("with-icon", ctx.icon)("with-icon-after", ctx.iconAfter)("disabled", ctx.disabled)("loading", ctx.isLoading)("active", ctx.isActive);
-        } }, inputs: { theme: "theme", icon: "icon", iconColor: "iconColor", iconSize: "iconSize", iconAfter: "iconAfter", iconAfterColor: "iconAfterColor", iconAfterSize: "iconAfterSize", disabled: "disabled", isLoading: "isLoading", isActive: "isActive" }, standalone: true, features: [i0.ɵɵStandaloneFeature], ngContentSelectors: _c0$G, decls: 5, vars: 4, consts: [[3, "disabled"], ["class", "dr-button__icon", 3, "class", "font-size", "color", 4, "ngIf"], ["class", "dr-button__spinner", 4, "ngIf"], ["class", "dr-button__icon dr-button__icon--after", 3, "class", "font-size", "color", 4, "ngIf"], [1, "dr-button__icon"], [1, "dr-button__spinner"], [1, "dr-icon-load"], [1, "dr-button__icon", "dr-button__icon--after"]], template: function DrButtonComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵprojectionDef();
-            i0.ɵɵelementStart(0, "button", 0);
-            i0.ɵɵtemplate(1, DrButtonComponent_i_1_Template, 1, 6, "i", 1);
-            i0.ɵɵprojection(2);
-            i0.ɵɵtemplate(3, DrButtonComponent_div_3_Template, 2, 2, "div", 2);
-            i0.ɵɵtemplate(4, DrButtonComponent_i_4_Template, 1, 6, "i", 3);
-            i0.ɵɵelementEnd();
-        } if (rf & 2) {
-            i0.ɵɵproperty("disabled", ctx.disabled);
-            i0.ɵɵadvance(1);
-            i0.ɵɵproperty("ngIf", ctx.icon);
-            i0.ɵɵadvance(2);
-            i0.ɵɵproperty("ngIf", ctx.isLoading);
-            i0.ɵɵadvance(1);
-            i0.ɵɵproperty("ngIf", ctx.iconAfter);
-        } }, dependencies: [CommonModule, i1.NgIf], styles: ["[_nghost-%COMP%]{display:inline-block}.disabled[_nghost-%COMP%], .loading[_nghost-%COMP%]{pointer-events:none}[_nghost-%COMP%]   button[_ngcontent-%COMP%]{font-size:14px;line-height:24px;font-weight:400;position:relative;display:flex;align-items:center;flex-wrap:nowrap;cursor:pointer;border-radius:16px;padding:4px 16px;height:32px;border:1px solid}[_nghost-%COMP%]   button[_ngcontent-%COMP%]   .dr-button__spinner[_ngcontent-%COMP%]{display:flex;align-items:center;justify-content:center;position:absolute;inset:0;background:inherit;border-radius:inherit}[_nghost-%COMP%]   button[_ngcontent-%COMP%]   .dr-button__spinner[_ngcontent-%COMP%]   i[_ngcontent-%COMP%]{animation-name:_ngcontent-%COMP%_rotate;animation-iteration-count:infinite;animation-duration:1s}.with-icon[_nghost-%COMP%]   button[_ngcontent-%COMP%]{padding-left:8px}.with-icon[_nghost-%COMP%]   button[_ngcontent-%COMP%]   i[_ngcontent-%COMP%]:first-child{margin-right:4px}.with-icon-after[_nghost-%COMP%]   button[_ngcontent-%COMP%]{padding-right:8px}.with-icon-after[_nghost-%COMP%]   button[_ngcontent-%COMP%]   i[_ngcontent-%COMP%]:last-child{margin-left:4px}.split-primary-first[_nghost-%COMP%]   button[_ngcontent-%COMP%], .split-secondary-first[_nghost-%COMP%]   button[_ngcontent-%COMP%]{border-bottom-right-radius:0;border-top-right-radius:0;padding-right:8px}.help[_nghost-%COMP%]   button[_ngcontent-%COMP%]{padding:4px 16px 4px 8px;color:#333;height:28px;border:none;min-width:84px}.help[_nghost-%COMP%]   button[_ngcontent-%COMP%]   i[_ngcontent-%COMP%]{min-width:4px}.split-primary-last[_nghost-%COMP%]   button[_ngcontent-%COMP%], .split-secondary-last[_nghost-%COMP%]   button[_ngcontent-%COMP%]{border-bottom-left-radius:0;border-top-left-radius:0;padding-right:8px;padding-left:4px;border-left:none}.split-primary-last[_nghost-%COMP%]   button[_ngcontent-%COMP%]   i[_ngcontent-%COMP%], .split-secondary-last[_nghost-%COMP%]   button[_ngcontent-%COMP%]   i[_ngcontent-%COMP%]{margin:0!important}.primary[_nghost-%COMP%]   button[_ngcontent-%COMP%], .split-primary-first[_nghost-%COMP%]   button[_ngcontent-%COMP%], .split-primary-last[_nghost-%COMP%]   button[_ngcontent-%COMP%]{color:#fff;background:#4646ce;border-color:#4646ce}.primary[_nghost-%COMP%]   button[_ngcontent-%COMP%]:hover, .split-primary-first[_nghost-%COMP%]   button[_ngcontent-%COMP%]:hover, .split-primary-last[_nghost-%COMP%]   button[_ngcontent-%COMP%]:hover{background:linear-gradient(96.89deg,#25258c,#4646ce);border-color:linear-gradient(96.89deg,#25258c 0%,#4646ce 100%)}.primary.active[_nghost-%COMP%]   button[_ngcontent-%COMP%], .primary[_nghost-%COMP%]   button[_ngcontent-%COMP%]:active, .split-primary-first.active[_nghost-%COMP%]   button[_ngcontent-%COMP%], .split-primary-first[_nghost-%COMP%]   button[_ngcontent-%COMP%]:active, .split-primary-last.active[_nghost-%COMP%]   button[_ngcontent-%COMP%], .split-primary-last[_nghost-%COMP%]   button[_ngcontent-%COMP%]:active{background:#25258c;border-color:#25258c}.primary.disabled[_nghost-%COMP%]   button[_ngcontent-%COMP%], .split-primary-first.disabled[_nghost-%COMP%]   button[_ngcontent-%COMP%], .split-primary-last.disabled[_nghost-%COMP%]   button[_ngcontent-%COMP%]{color:#aeabac;background:#f0f1f4;border-color:#f0f1f4}.split-primary-first[_nghost-%COMP%]   button[_ngcontent-%COMP%]{border-right-color:#dfe0e3}.split-primary-first.disabled[_nghost-%COMP%]   button[_ngcontent-%COMP%]{border-right-color:#aeabac}.secondary[_nghost-%COMP%]   button[_ngcontent-%COMP%], .split-secondary-first[_nghost-%COMP%]   button[_ngcontent-%COMP%], .split-secondary-last[_nghost-%COMP%]   button[_ngcontent-%COMP%]{color:#4646ce;background:#fff;border-color:#4646ce}.secondary[_nghost-%COMP%]   button[_ngcontent-%COMP%]:hover, .split-secondary-first[_nghost-%COMP%]   button[_ngcontent-%COMP%]:hover, .split-secondary-last[_nghost-%COMP%]   button[_ngcontent-%COMP%]:hover{background:#f5f5f5;box-shadow:0 4px 14px #0000001a}.secondary.active[_nghost-%COMP%]   button[_ngcontent-%COMP%], .secondary[_nghost-%COMP%]   button[_ngcontent-%COMP%]:active, .split-secondary-first.active[_nghost-%COMP%]   button[_ngcontent-%COMP%], .split-secondary-first[_nghost-%COMP%]   button[_ngcontent-%COMP%]:active, .split-secondary-last.active[_nghost-%COMP%]   button[_ngcontent-%COMP%], .split-secondary-last[_nghost-%COMP%]   button[_ngcontent-%COMP%]:active{background:#eaeaff;box-shadow:none}.secondary.disabled[_nghost-%COMP%]   button[_ngcontent-%COMP%], .split-secondary-first.disabled[_nghost-%COMP%]   button[_ngcontent-%COMP%], .split-secondary-last.disabled[_nghost-%COMP%]   button[_ngcontent-%COMP%]{color:#aeabac;border-color:#aeabac}.secondary-white[_nghost-%COMP%]   button[_ngcontent-%COMP%]{color:#fff;background:transparent;border-color:#fff}.secondary-white[_nghost-%COMP%]   button[_ngcontent-%COMP%]:hover{background:transparent;box-shadow:0 4px 14px #0000001a}.secondary-white.active[_nghost-%COMP%]   button[_ngcontent-%COMP%], .secondary-white[_nghost-%COMP%]   button[_ngcontent-%COMP%]:active{background:transparent;box-shadow:none}.secondary-white.disabled[_nghost-%COMP%]   button[_ngcontent-%COMP%]{color:#aeabac;border-color:#aeabac}.split-secondary-first[_nghost-%COMP%]   button[_ngcontent-%COMP%]{border-right-color:#4646ce}.split-secondary-first.disabled[_nghost-%COMP%]   button[_ngcontent-%COMP%]{border-right-color:#aeabac}.icon[_nghost-%COMP%]   button[_ngcontent-%COMP%], .icon-primary[_nghost-%COMP%]   button[_ngcontent-%COMP%], .icon-secondary[_nghost-%COMP%]   button[_ngcontent-%COMP%]{width:28px;height:28px;padding:0;justify-content:center}.icon[_nghost-%COMP%]   button[_ngcontent-%COMP%]   i[_ngcontent-%COMP%], .icon-primary[_nghost-%COMP%]   button[_ngcontent-%COMP%]   i[_ngcontent-%COMP%], .icon-secondary[_nghost-%COMP%]   button[_ngcontent-%COMP%]   i[_ngcontent-%COMP%]{margin:0!important}.icon[_nghost-%COMP%]   button[_ngcontent-%COMP%]{background:transparent;border-color:transparent;color:#6d6e6f}.icon[_nghost-%COMP%]   button[_ngcontent-%COMP%]:hover{color:#333;background:#dfe0e3;border-color:#dfe0e3}.icon.active[_nghost-%COMP%]   button[_ngcontent-%COMP%], .icon[_nghost-%COMP%]   button[_ngcontent-%COMP%]:active{color:#4646ce;background:#eaeaff;border-color:#eaeaff}.icon.disabled[_nghost-%COMP%]   button[_ngcontent-%COMP%]{color:#aeabac;background:transparent;border-color:transparent}.icon-primary[_nghost-%COMP%]   button[_ngcontent-%COMP%]{color:#fff;background:#4646ce;border-color:#4646ce}.icon-primary[_nghost-%COMP%]   button[_ngcontent-%COMP%]:hover{color:#fff;background:linear-gradient(96.89deg,#25258c,#4646ce);border-color:linear-gradient(96.89deg,#25258c 0%,#4646ce 100%)}.icon-primary.active[_nghost-%COMP%]   button[_ngcontent-%COMP%], .icon-primary[_nghost-%COMP%]   button[_ngcontent-%COMP%]:active{color:#fff;background:#25258c;border-color:#25258c}.icon-primary.disabled[_nghost-%COMP%]   button[_ngcontent-%COMP%]{color:#aeabac;background:#f0f1f4;border-color:#f0f1f4}.icon-secondary[_nghost-%COMP%]   button[_ngcontent-%COMP%]{color:#4646ce;background:#fff;border-color:#4646ce}.icon-secondary[_nghost-%COMP%]   button[_ngcontent-%COMP%]:hover{color:#4646ce;background:#f5f5f5;border-color:#4646ce}.icon-secondary.active[_nghost-%COMP%]   button[_ngcontent-%COMP%], .icon-secondary[_nghost-%COMP%]   button[_ngcontent-%COMP%]:active{color:#4646ce;background:#eaeaff;border-color:#4646ce}.icon-secondary.disabled[_nghost-%COMP%]   button[_ngcontent-%COMP%]{color:#aeabac;background:#f0f1f4;border-color:#f0f1f4}.ghost[_nghost-%COMP%]   button[_ngcontent-%COMP%]{border-radius:4px;padding:4px;background:transparent;border-color:transparent;color:#6d6e6f}.ghost[_nghost-%COMP%]   button[_ngcontent-%COMP%]   .dr-button__spinner[_ngcontent-%COMP%]{color:#4646ce;background:#fff}.ghost[_nghost-%COMP%]   button[_ngcontent-%COMP%]:hover{color:#333;background:#f5f5f5;border-color:#f5f5f5}.ghost.active[_nghost-%COMP%]   button[_ngcontent-%COMP%], .ghost[_nghost-%COMP%]   button[_ngcontent-%COMP%]:active{color:#4646ce;background:#eaeaff;border-color:#eaeaff}.ghost.disabled[_nghost-%COMP%]   button[_ngcontent-%COMP%]{color:#aeabac;background:transparent;border-color:transparent}.selection[_nghost-%COMP%]   button[_ngcontent-%COMP%]{border-radius:6px;padding:4px 8px;background:#fff;border-color:#9ea1aa;color:#6d6e6f}.selection[_nghost-%COMP%]   button[_ngcontent-%COMP%]:hover{color:#6d6e6f;background:#f5f5f5;border-color:#4e566c}.selection.active[_nghost-%COMP%]   button[_ngcontent-%COMP%], .selection[_nghost-%COMP%]   button[_ngcontent-%COMP%]:active{color:#6d6e6f;background:#eaeaff;border-color:#4646ce}.selection.disabled[_nghost-%COMP%]   button[_ngcontent-%COMP%]{color:#aeabac;background:#f0f1f4;border-color:#aeabac}.highlight[_nghost-%COMP%]   button[_ngcontent-%COMP%]{border:none;background:none;color:#4646ce;padding:0 4px}.highlight[_nghost-%COMP%]   button[_ngcontent-%COMP%]:hover, .highlight.active[_nghost-%COMP%]   button[_ngcontent-%COMP%], .highlight[_nghost-%COMP%]   button[_ngcontent-%COMP%]:active{text-decoration:underline}.highlight.disabled[_nghost-%COMP%]   button[_ngcontent-%COMP%]{color:#aeabac}.dropdown[_nghost-%COMP%]   button[_ngcontent-%COMP%]{font-size:12px;line-height:16px;font-weight:400;border:1px solid #dfe0e3;border-radius:6px;padding:6px 8px;color:#6d6e6f;background-color:#fff}.dropdown[_nghost-%COMP%]   button[_ngcontent-%COMP%]:hover{background-color:#f5f5f5}.dropdown.active[_nghost-%COMP%]   button[_ngcontent-%COMP%], .dropdown[_nghost-%COMP%]   button[_ngcontent-%COMP%]:active{color:#4646ce}.dropdown.active[_nghost-%COMP%]   button[_ngcontent-%COMP%]   i[_ngcontent-%COMP%]:last-child, .dropdown[_nghost-%COMP%]   button[_ngcontent-%COMP%]:active   i[_ngcontent-%COMP%]:last-child{color:#333}.dropdown.disabled[_nghost-%COMP%]   button[_ngcontent-%COMP%]{background-color:#f0f1f4;color:#aeabac}.dropdown.disabled[_nghost-%COMP%]   button[_ngcontent-%COMP%]   i[_ngcontent-%COMP%]:last-child{color:#aeabac}.danger[_nghost-%COMP%]   button[_ngcontent-%COMP%]{color:#fff;background:#bf1d30;border-color:#bf1d30}.danger[_nghost-%COMP%]   button[_ngcontent-%COMP%]:hover{background:#981440;border-color:#981440}.danger.active[_nghost-%COMP%]   button[_ngcontent-%COMP%], .danger[_nghost-%COMP%]   button[_ngcontent-%COMP%]:active{background:#680325;border-color:#680325}.danger.disabled[_nghost-%COMP%]   button[_ngcontent-%COMP%]{color:#aeabac;background:#f0f1f4;border-color:#f0f1f4}.ai-primary[_nghost-%COMP%]   button[_ngcontent-%COMP%]{color:#fff;border:none;background:linear-gradient(266deg,#6969ff 25.2%,#4eb7df 90.24%)}.ai-primary[_nghost-%COMP%]   button[_ngcontent-%COMP%]:hover{background:linear-gradient(0deg,#4d4dcd66 0% 100%),linear-gradient(266deg,#6969ff 25.2%,#4eb7df 90.24%)}.ai-primary.active[_nghost-%COMP%]   button[_ngcontent-%COMP%], .ai-primary[_nghost-%COMP%]   button[_ngcontent-%COMP%]:active{background:linear-gradient(0deg,#4d4dcd66 0% 100%),linear-gradient(266deg,#6969ff 25.2%,#4eb7df 90.24%)}.ai-primary.disabled[_nghost-%COMP%]   button[_ngcontent-%COMP%]{color:#aeabac;background:#f0f1f4;border-color:#f0f1f4}.ai-secondary[_nghost-%COMP%]   button[_ngcontent-%COMP%]{color:#4646ce;border:none!important;z-index:1;background:linear-gradient(269.57deg,#6969ff -4.23%,#4eb7df 103.6%)!important}.ai-secondary[_nghost-%COMP%]   button[_ngcontent-%COMP%]:before{content:\"\";position:absolute;inset:1px;border-radius:15px;background-color:#fff;z-index:-1}.ai-secondary[_nghost-%COMP%]   button[_ngcontent-%COMP%]:hover{box-shadow:0 4px 14px #0000001a}.ai-secondary.active[_nghost-%COMP%]   button[_ngcontent-%COMP%], .ai-secondary[_nghost-%COMP%]   button[_ngcontent-%COMP%]:active{box-shadow:none}.ai-secondary.active[_nghost-%COMP%]   button[_ngcontent-%COMP%]:before, .ai-secondary[_nghost-%COMP%]   button[_ngcontent-%COMP%]:active:before{background:linear-gradient(270deg,#6969ff33 -4.23%,#4eb7df33 103.6%),#fff}.ai-secondary.disabled[_nghost-%COMP%]   button[_ngcontent-%COMP%]{color:#aeabac;background:#f0f1f4!important;border:1px solid #aeabac!important}.ai-secondary.disabled[_nghost-%COMP%]   button[_ngcontent-%COMP%]:before{display:none}@keyframes _ngcontent-%COMP%_rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}"] }); }
-}
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DrButtonComponent, [{
-        type: Component,
-        args: [{ selector: 'dr-button', standalone: true, imports: [CommonModule], template: "<button [disabled]=\"disabled\">\n    <i *ngIf=\"icon\" class=\"dr-button__icon\" [class]=\"icon\" [style.font-size]=\"iconSize\" [style.color]=\"iconColor || 'inherit'\">\n    </i>\n    <ng-content></ng-content>\n    <div *ngIf=\"isLoading\" class=\"dr-button__spinner\">\n        <i [style.font-size]=\"iconSize\" class=\"dr-icon-load\"></i>\n    </div>\n    <i\n        *ngIf=\"iconAfter\"\n        class=\"dr-button__icon dr-button__icon--after\"\n        [class]=\"iconAfter\"\n        [style.font-size]=\"iconAfterSize\"\n        [style.color]=\"iconAfterColor || 'inherit'\">\n    </i>\n</button>\n", styles: [":host{display:inline-block}:host.disabled,:host.loading{pointer-events:none}:host button{font-size:14px;line-height:24px;font-weight:400;position:relative;display:flex;align-items:center;flex-wrap:nowrap;cursor:pointer;border-radius:16px;padding:4px 16px;height:32px;border:1px solid}:host button .dr-button__spinner{display:flex;align-items:center;justify-content:center;position:absolute;inset:0;background:inherit;border-radius:inherit}:host button .dr-button__spinner i{animation-name:rotate;animation-iteration-count:infinite;animation-duration:1s}:host.with-icon button{padding-left:8px}:host.with-icon button i:first-child{margin-right:4px}:host.with-icon-after button{padding-right:8px}:host.with-icon-after button i:last-child{margin-left:4px}:host.split-primary-first button,:host.split-secondary-first button{border-bottom-right-radius:0;border-top-right-radius:0;padding-right:8px}:host.help button{padding:4px 16px 4px 8px;color:#333;height:28px;border:none;min-width:84px}:host.help button i{min-width:4px}:host.split-primary-last button,:host.split-secondary-last button{border-bottom-left-radius:0;border-top-left-radius:0;padding-right:8px;padding-left:4px;border-left:none}:host.split-primary-last button i,:host.split-secondary-last button i{margin:0!important}:host.primary button,:host.split-primary-first button,:host.split-primary-last button{color:#fff;background:#4646ce;border-color:#4646ce}:host.primary button:hover,:host.split-primary-first button:hover,:host.split-primary-last button:hover{background:linear-gradient(96.89deg,#25258c,#4646ce);border-color:linear-gradient(96.89deg,#25258c 0%,#4646ce 100%)}:host.primary.active button,:host.primary button:active,:host.split-primary-first.active button,:host.split-primary-first button:active,:host.split-primary-last.active button,:host.split-primary-last button:active{background:#25258c;border-color:#25258c}:host.primary.disabled button,:host.split-primary-first.disabled button,:host.split-primary-last.disabled button{color:#aeabac;background:#f0f1f4;border-color:#f0f1f4}:host.split-primary-first button{border-right-color:#dfe0e3}:host.split-primary-first.disabled button{border-right-color:#aeabac}:host.secondary button,:host.split-secondary-first button,:host.split-secondary-last button{color:#4646ce;background:#fff;border-color:#4646ce}:host.secondary button:hover,:host.split-secondary-first button:hover,:host.split-secondary-last button:hover{background:#f5f5f5;box-shadow:0 4px 14px #0000001a}:host.secondary.active button,:host.secondary button:active,:host.split-secondary-first.active button,:host.split-secondary-first button:active,:host.split-secondary-last.active button,:host.split-secondary-last button:active{background:#eaeaff;box-shadow:none}:host.secondary.disabled button,:host.split-secondary-first.disabled button,:host.split-secondary-last.disabled button{color:#aeabac;border-color:#aeabac}:host.secondary-white button{color:#fff;background:transparent;border-color:#fff}:host.secondary-white button:hover{background:transparent;box-shadow:0 4px 14px #0000001a}:host.secondary-white.active button,:host.secondary-white button:active{background:transparent;box-shadow:none}:host.secondary-white.disabled button{color:#aeabac;border-color:#aeabac}:host.split-secondary-first button{border-right-color:#4646ce}:host.split-secondary-first.disabled button{border-right-color:#aeabac}:host.icon button,:host.icon-primary button,:host.icon-secondary button{width:28px;height:28px;padding:0;justify-content:center}:host.icon button i,:host.icon-primary button i,:host.icon-secondary button i{margin:0!important}:host.icon button{background:transparent;border-color:transparent;color:#6d6e6f}:host.icon button:hover{color:#333;background:#dfe0e3;border-color:#dfe0e3}:host.icon.active button,:host.icon button:active{color:#4646ce;background:#eaeaff;border-color:#eaeaff}:host.icon.disabled button{color:#aeabac;background:transparent;border-color:transparent}:host.icon-primary button{color:#fff;background:#4646ce;border-color:#4646ce}:host.icon-primary button:hover{color:#fff;background:linear-gradient(96.89deg,#25258c,#4646ce);border-color:linear-gradient(96.89deg,#25258c 0%,#4646ce 100%)}:host.icon-primary.active button,:host.icon-primary button:active{color:#fff;background:#25258c;border-color:#25258c}:host.icon-primary.disabled button{color:#aeabac;background:#f0f1f4;border-color:#f0f1f4}:host.icon-secondary button{color:#4646ce;background:#fff;border-color:#4646ce}:host.icon-secondary button:hover{color:#4646ce;background:#f5f5f5;border-color:#4646ce}:host.icon-secondary.active button,:host.icon-secondary button:active{color:#4646ce;background:#eaeaff;border-color:#4646ce}:host.icon-secondary.disabled button{color:#aeabac;background:#f0f1f4;border-color:#f0f1f4}:host.ghost button{border-radius:4px;padding:4px;background:transparent;border-color:transparent;color:#6d6e6f}:host.ghost button .dr-button__spinner{color:#4646ce;background:#fff}:host.ghost button:hover{color:#333;background:#f5f5f5;border-color:#f5f5f5}:host.ghost.active button,:host.ghost button:active{color:#4646ce;background:#eaeaff;border-color:#eaeaff}:host.ghost.disabled button{color:#aeabac;background:transparent;border-color:transparent}:host.selection button{border-radius:6px;padding:4px 8px;background:#fff;border-color:#9ea1aa;color:#6d6e6f}:host.selection button:hover{color:#6d6e6f;background:#f5f5f5;border-color:#4e566c}:host.selection.active button,:host.selection button:active{color:#6d6e6f;background:#eaeaff;border-color:#4646ce}:host.selection.disabled button{color:#aeabac;background:#f0f1f4;border-color:#aeabac}:host.highlight button{border:none;background:none;color:#4646ce;padding:0 4px}:host.highlight button:hover,:host.highlight.active button,:host.highlight button:active{text-decoration:underline}:host.highlight.disabled button{color:#aeabac}:host.dropdown button{font-size:12px;line-height:16px;font-weight:400;border:1px solid #dfe0e3;border-radius:6px;padding:6px 8px;color:#6d6e6f;background-color:#fff}:host.dropdown button:hover{background-color:#f5f5f5}:host.dropdown.active button,:host.dropdown button:active{color:#4646ce}:host.dropdown.active button i:last-child,:host.dropdown button:active i:last-child{color:#333}:host.dropdown.disabled button{background-color:#f0f1f4;color:#aeabac}:host.dropdown.disabled button i:last-child{color:#aeabac}:host.danger button{color:#fff;background:#bf1d30;border-color:#bf1d30}:host.danger button:hover{background:#981440;border-color:#981440}:host.danger.active button,:host.danger button:active{background:#680325;border-color:#680325}:host.danger.disabled button{color:#aeabac;background:#f0f1f4;border-color:#f0f1f4}:host.ai-primary button{color:#fff;border:none;background:linear-gradient(266deg,#6969ff 25.2%,#4eb7df 90.24%)}:host.ai-primary button:hover{background:linear-gradient(0deg,#4d4dcd66 0% 100%),linear-gradient(266deg,#6969ff 25.2%,#4eb7df 90.24%)}:host.ai-primary.active button,:host.ai-primary button:active{background:linear-gradient(0deg,#4d4dcd66 0% 100%),linear-gradient(266deg,#6969ff 25.2%,#4eb7df 90.24%)}:host.ai-primary.disabled button{color:#aeabac;background:#f0f1f4;border-color:#f0f1f4}:host.ai-secondary button{color:#4646ce;border:none!important;z-index:1;background:linear-gradient(269.57deg,#6969ff -4.23%,#4eb7df 103.6%)!important}:host.ai-secondary button:before{content:\"\";position:absolute;inset:1px;border-radius:15px;background-color:#fff;z-index:-1}:host.ai-secondary button:hover{box-shadow:0 4px 14px #0000001a}:host.ai-secondary.active button,:host.ai-secondary button:active{box-shadow:none}:host.ai-secondary.active button:before,:host.ai-secondary button:active:before{background:linear-gradient(270deg,#6969ff33 -4.23%,#4eb7df33 103.6%),#fff}:host.ai-secondary.disabled button{color:#aeabac;background:#f0f1f4!important;border:1px solid #aeabac!important}:host.ai-secondary.disabled button:before{display:none}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
-    }], null, { theme: [{
-            type: Input
-        }, {
-            type: HostBinding,
-            args: ['class']
-        }], icon: [{
-            type: Input
-        }, {
-            type: HostBinding,
-            args: ['class.with-icon']
-        }], iconColor: [{
-            type: Input
-        }], iconSize: [{
-            type: Input
-        }], iconAfter: [{
-            type: Input
-        }, {
-            type: HostBinding,
-            args: ['class.with-icon-after']
-        }], iconAfterColor: [{
-            type: Input
-        }], iconAfterSize: [{
-            type: Input
-        }], disabled: [{
-            type: Input
-        }, {
-            type: HostBinding,
-            args: ['class.disabled']
-        }], isLoading: [{
-            type: Input
-        }, {
-            type: HostBinding,
-            args: ['class.loading']
-        }], isActive: [{
-            type: Input
-        }, {
-            type: HostBinding,
-            args: ['class.active']
-        }] }); })();
-
 const _c0$F = ["dynamicInputRef"];
 function DrSelectAddItemComponent_div_5_p_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "p", 12);
@@ -5000,59 +5030,81 @@ class DrFiscalMonthCalendarHeaderComponent extends DrDatePickerCustomHeaderCompo
         args: [{ selector: 'dr-fiscal-month-calendar-header.component', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div *ngIf=\"datePickerService.isTimeframeSelectionEnabled\" class=\"dr-datepicker__timeframe-select__wrapper\">\n    <div *ngIf=\"datePickerService.isUsingDateTagPresets\" class=\"dr-datepicker-preset-date\">\n        <div class=\"dr-datepicker-preset-date__tags\">\n            <div\n                *ngFor=\"let tag of presetTagList\"\n                id=\"preset_tag\"\n                class=\"dr-datepicker-preset-date__tags__tag\"\n                (click)=\"onSelectPresetTag(tag)\"\n                [ngClass]=\"{ 'dr-datepicker-preset-date__tags__tag--selected': tag.key === selectedPresetTag }\"\n                [drTooltip]=\"selectedPresetTag === tag.key ? 'Unselect preset' : ''\"\n                [drTooltipPosition]=\"'top'\">\n                {{ tag.label }}\n            </div>\n        </div>\n    </div>\n    <dr-select\n        class=\"dr-datepicker__timeframe-select\"\n        [ngModel]=\"selectedTimeframe\"\n        [items]=\"timeframeOptions | drShowTimeframePipe: datePickerService.availableTimeframes\"\n        bindLabel=\"title\"\n        bindValue=\"value\"\n        (ngModelChange)=\"setTimeframe($event)\">\n    </dr-select>\n</div>\n\n<div class=\"dr-date-paging\">\n    <div class=\"dr-date-paging flip-page-button\" (click)=\"pagingClicked(false)\">\n        <i class=\"dr-icon-arrow-left presentation_buttons-navigate_input\"></i>\n    </div>\n    <span class=\"example-header-label\">\n        <span (click)=\"switchViewOnClickOnPeriodLabel(calendarView.FOR_MONTHS)\">{{ periodMonthLabel + ' ' }}</span>\n        <span (click)=\"switchViewOnClickOnPeriodLabel(calendarView.FOR_YEARS)\">{{ periodYearLabel }}</span>\n    </span>\n    <div class=\"dr-date-paging flip-page-button\" (click)=\"pagingClicked(true)\">\n        <i class=\"dr-icon-arrow-right presentation_buttons-navigate_input\"></i>\n    </div>\n</div>\n<div #quarterlyDatePicker class=\"dr-quarterly-datepicker\" *ngIf=\"currentViewIsQuarter\">\n    <div\n        *ngFor=\"let quarter of quarters\"\n        class=\"quarter-selector\"\n        (click)=\"onSelectQuarter(quarter)\"\n        [class]=\"quarter === selectedQuarter ? 'selected' : ''\"\n        [class.quarter-selector--disabled]=\"isQuarterDisabled(quarter)\">\n        Q{{ quarter }}\n    </div>\n</div>\n", styles: [":host{height:54px;align-items:center;font-family:Poppins;font-style:normal;font-weight:600;font-size:14px;line-height:22px}.dr-datepicker__timeframe-select__wrapper{background-color:#f9faff;padding:16px 32px;border-radius:18px 18px 0 0}.dr-datepicker-preset-date{display:flex;flex-direction:column}.dr-datepicker-preset-date__tags{display:flex;padding-bottom:21px;padding-top:10px;font-size:12px}.dr-datepicker-preset-date__tags__tag{cursor:pointer;font-weight:400;line-height:20px!important;padding:2px 8px;border:1px solid #9ea1aa;border-radius:18px;background:#fff;margin-right:4px}.dr-datepicker-preset-date__tags__tag--selected{color:#4646ce;background:#f2f2fb;border:1px solid #4646ce}.dr-date-paging{display:flex;flex-direction:row;justify-content:space-between;align-items:center;padding:16px 32px 32px;gap:4px}.dr-date-paging.flip-page-button{width:20px;height:20px;padding:0;color:#4e566c}.dr-date-paging.flip-page-button:hover{border-radius:50%;background:#f2f2fb;color:#4646ce}.example-header-label{cursor:pointer}.dr-quarterly-datepicker{display:flex;justify-content:space-between;padding:10px}.dr-quarterly-datepicker .quarter-selector{display:block;width:74px;height:40px;text-align:center;border-radius:40px;font-weight:400;padding-top:9px}.dr-quarterly-datepicker .quarter-selector:hover{background:#f2f2fb;color:#4646ce;font-weight:600;cursor:pointer}.dr-quarterly-datepicker .quarter-selector.selected{background-color:#4646ce;color:#f3f7ff;font-weight:600}.dr-quarterly-datepicker .quarter-selector--disabled,.dr-quarterly-datepicker .quarter-selector--disabled.selected{pointer-events:none;background-color:transparent;color:#aeabac;font-weight:400}\n"] }]
     }], null, null); })();
 
+function DrFiscalMonthCalendarPickerComponent_i_0_Template(rf, ctx) { if (rf & 1) {
+    const _r4 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "i", 2);
+    i0.ɵɵlistener("click", function DrFiscalMonthCalendarPickerComponent_i_0_Template_i_click_0_listener() { i0.ɵɵrestoreView(_r4); const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.datePicker.open()); });
+    i0.ɵɵelementEnd();
+} }
 function DrFiscalMonthCalendarPickerComponent_ng_container_1_Template(rf, ctx) { if (rf & 1) {
-    const _r5 = i0.ɵɵgetCurrentView();
+    const _r8 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementContainerStart(0);
-    i0.ɵɵelementStart(1, "input", 2);
-    i0.ɵɵlistener("click", function DrFiscalMonthCalendarPickerComponent_ng_container_1_Template_input_click_1_listener() { i0.ɵɵrestoreView(_r5); const _r3 = i0.ɵɵreference(9); return i0.ɵɵresetView(_r3.open()); });
+    i0.ɵɵelementStart(1, "input", 3);
+    i0.ɵɵlistener("click", function DrFiscalMonthCalendarPickerComponent_ng_container_1_Template_input_click_1_listener() { i0.ɵɵrestoreView(_r8); const _r6 = i0.ɵɵreference(9); return i0.ɵɵresetView(_r6.open()); });
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(2, "mat-date-range-input", 3)(3, "input", 4, 5);
-    i0.ɵɵlistener("dateChange", function DrFiscalMonthCalendarPickerComponent_ng_container_1_Template_input_dateChange_3_listener() { i0.ɵɵrestoreView(_r5); const ctx_r6 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r6.valueChangedInCalendar(ctx_r6.rangeForm.value.start)); });
+    i0.ɵɵelementStart(2, "mat-date-range-input", 4)(3, "input", 5, 6);
+    i0.ɵɵlistener("dateChange", function DrFiscalMonthCalendarPickerComponent_ng_container_1_Template_input_dateChange_3_listener() { i0.ɵɵrestoreView(_r8); const ctx_r9 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r9.valueChangedInCalendar(ctx_r9.rangeForm.value.start)); });
     i0.ɵɵpipe(5, "async");
     i0.ɵɵelementEnd();
-    i0.ɵɵelement(6, "input", 6);
+    i0.ɵɵelement(6, "input", 7);
     i0.ɵɵpipe(7, "async");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(8, "mat-date-range-picker", 7, 8);
-    i0.ɵɵlistener("yearSelected", function DrFiscalMonthCalendarPickerComponent_ng_container_1_Template_mat_date_range_picker_yearSelected_8_listener($event) { i0.ɵɵrestoreView(_r5); const _r3 = i0.ɵɵreference(9); const ctx_r7 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r7.chosenPeriodHandler($event, ctx_r7.timeframeOption.YEAR, _r3)); })("monthSelected", function DrFiscalMonthCalendarPickerComponent_ng_container_1_Template_mat_date_range_picker_monthSelected_8_listener($event) { i0.ɵɵrestoreView(_r5); const _r3 = i0.ɵɵreference(9); const ctx_r8 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r8.chosenPeriodHandler($event, ctx_r8.timeframeOption.MONTH, _r3)); })("opened", function DrFiscalMonthCalendarPickerComponent_ng_container_1_Template_mat_date_range_picker_opened_8_listener() { i0.ɵɵrestoreView(_r5); const ctx_r9 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r9.onOpen()); })("closed", function DrFiscalMonthCalendarPickerComponent_ng_container_1_Template_mat_date_range_picker_closed_8_listener() { i0.ɵɵrestoreView(_r5); const ctx_r10 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r10.onCLose()); });
+    i0.ɵɵelementStart(8, "mat-date-range-picker", 8, 9);
+    i0.ɵɵlistener("yearSelected", function DrFiscalMonthCalendarPickerComponent_ng_container_1_Template_mat_date_range_picker_yearSelected_8_listener($event) { i0.ɵɵrestoreView(_r8); const _r6 = i0.ɵɵreference(9); const ctx_r10 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r10.chosenPeriodHandler($event, ctx_r10.timeframeOption.YEAR, _r6)); })("monthSelected", function DrFiscalMonthCalendarPickerComponent_ng_container_1_Template_mat_date_range_picker_monthSelected_8_listener($event) { i0.ɵɵrestoreView(_r8); const _r6 = i0.ɵɵreference(9); const ctx_r11 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r11.chosenPeriodHandler($event, ctx_r11.timeframeOption.MONTH, _r6)); })("opened", function DrFiscalMonthCalendarPickerComponent_ng_container_1_Template_mat_date_range_picker_opened_8_listener() { i0.ɵɵrestoreView(_r8); const ctx_r12 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r12.onOpen()); })("closed", function DrFiscalMonthCalendarPickerComponent_ng_container_1_Template_mat_date_range_picker_closed_8_listener() { i0.ɵɵrestoreView(_r8); const ctx_r13 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r13.onCLose()); });
     i0.ɵɵelementEnd();
     i0.ɵɵelementContainerEnd();
 } if (rf & 2) {
-    const _r2 = i0.ɵɵreference(4);
-    const _r3 = i0.ɵɵreference(9);
-    const ctx_r0 = i0.ɵɵnextContext();
+    const _r5 = i0.ɵɵreference(4);
+    const _r6 = i0.ɵɵreference(9);
+    const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵadvance(1);
-    i0.ɵɵproperty("ngModel", _r2.value)("disabled", ctx_r0.disabled)("placeholder", ctx_r0.placeholder)("readonly", ctx_r0.readonly)("min", ctx_r0._min)("max", ctx_r0._max);
-    i0.ɵɵattribute("id", ctx_r0.id);
+    i0.ɵɵproperty("ngModel", _r5.value)("disabled", ctx_r1.disabled)("placeholder", ctx_r1.placeholder)("readonly", ctx_r1.readonly)("min", ctx_r1._min)("max", ctx_r1._max);
+    i0.ɵɵattribute("id", ctx_r1.id);
     i0.ɵɵadvance(1);
-    i0.ɵɵproperty("formGroup", ctx_r0.rangeForm)("rangePicker", _r3)("dateFilter", ctx_r0.dateFilter);
+    i0.ɵɵproperty("formGroup", ctx_r1.rangeForm)("rangePicker", _r6)("dateFilter", ctx_r1.dateFilter);
     i0.ɵɵadvance(1);
-    i0.ɵɵproperty("drDatePickerFormat", i0.ɵɵpipeBind1(5, 15, ctx_r0.datePickerService.format$));
+    i0.ɵɵproperty("drDatePickerFormat", i0.ɵɵpipeBind1(5, 15, ctx_r1.datePickerService.format$));
     i0.ɵɵadvance(3);
-    i0.ɵɵproperty("drDatePickerFormat", i0.ɵɵpipeBind1(7, 17, ctx_r0.datePickerService.format$));
+    i0.ɵɵproperty("drDatePickerFormat", i0.ɵɵpipeBind1(7, 17, ctx_r1.datePickerService.format$));
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("startAt", ctx_r0._startAt)("panelClass", "dr-week-datepicker" + (ctx_r0.panelClass ? " " + ctx_r0.panelClass : ""))("calendarHeaderComponent", ctx_r0.customHeader);
+    i0.ɵɵproperty("startAt", ctx_r1._startAt)("panelClass", "dr-week-datepicker" + (ctx_r1.panelClass ? " " + ctx_r1.panelClass : ""))("calendarHeaderComponent", ctx_r1.customHeader);
+} }
+function DrFiscalMonthCalendarPickerComponent_ng_container_3_dr_button_4_Template(rf, ctx) { if (rf & 1) {
+    const _r17 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "dr-button", 13);
+    i0.ɵɵlistener("click", function DrFiscalMonthCalendarPickerComponent_ng_container_3_dr_button_4_Template_dr_button_click_0_listener() { i0.ɵɵrestoreView(_r17); i0.ɵɵnextContext(); const _r15 = i0.ɵɵreference(6); return i0.ɵɵresetView(_r15.open()); });
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r14 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("icon", "dr-icon-date")("iconAfter", ctx_r14.iconAfterButton);
+    i0.ɵɵadvance(1);
+    i0.ɵɵtextInterpolate1(" ", ctx_r14.buttonLabel || "Select Date", " ");
 } }
 function DrFiscalMonthCalendarPickerComponent_ng_container_3_Template(rf, ctx) { if (rf & 1) {
-    const _r13 = i0.ɵɵgetCurrentView();
+    const _r19 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementContainerStart(0);
-    i0.ɵɵelementStart(1, "input", 9);
-    i0.ɵɵlistener("ngModelChange", function DrFiscalMonthCalendarPickerComponent_ng_container_3_Template_input_ngModelChange_1_listener($event) { i0.ɵɵrestoreView(_r13); const ctx_r12 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r12.valueChangedInCalendar($event)); })("click", function DrFiscalMonthCalendarPickerComponent_ng_container_3_Template_input_click_1_listener() { i0.ɵɵrestoreView(_r13); const _r11 = i0.ɵɵreference(5); return i0.ɵɵresetView(_r11.open()); });
+    i0.ɵɵelementStart(1, "input", 10);
+    i0.ɵɵlistener("ngModelChange", function DrFiscalMonthCalendarPickerComponent_ng_container_3_Template_input_ngModelChange_1_listener($event) { i0.ɵɵrestoreView(_r19); const ctx_r18 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r18.valueChangedInCalendar($event)); })("click", function DrFiscalMonthCalendarPickerComponent_ng_container_3_Template_input_click_1_listener() { i0.ɵɵrestoreView(_r19); const _r15 = i0.ɵɵreference(6); return i0.ɵɵresetView(_r15.open()); });
     i0.ɵɵpipe(2, "async");
     i0.ɵɵpipe(3, "async");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "mat-datepicker", 10, 8);
-    i0.ɵɵlistener("yearSelected", function DrFiscalMonthCalendarPickerComponent_ng_container_3_Template_mat_datepicker_yearSelected_4_listener($event) { i0.ɵɵrestoreView(_r13); const _r11 = i0.ɵɵreference(5); const ctx_r15 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r15.chosenPeriodHandler($event, ctx_r15.timeframeOption.YEAR, _r11)); })("monthSelected", function DrFiscalMonthCalendarPickerComponent_ng_container_3_Template_mat_datepicker_monthSelected_4_listener($event) { i0.ɵɵrestoreView(_r13); const _r11 = i0.ɵɵreference(5); const ctx_r16 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r16.chosenPeriodHandler($event, ctx_r16.timeframeOption.MONTH, _r11)); })("opened", function DrFiscalMonthCalendarPickerComponent_ng_container_3_Template_mat_datepicker_opened_4_listener() { i0.ɵɵrestoreView(_r13); const ctx_r17 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r17.onOpen()); })("closed", function DrFiscalMonthCalendarPickerComponent_ng_container_3_Template_mat_datepicker_closed_4_listener() { i0.ɵɵrestoreView(_r13); const ctx_r18 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r18.onCLose()); });
+    i0.ɵɵtemplate(4, DrFiscalMonthCalendarPickerComponent_ng_container_3_dr_button_4_Template, 2, 3, "dr-button", 11);
+    i0.ɵɵelementStart(5, "mat-datepicker", 12, 9);
+    i0.ɵɵlistener("yearSelected", function DrFiscalMonthCalendarPickerComponent_ng_container_3_Template_mat_datepicker_yearSelected_5_listener($event) { i0.ɵɵrestoreView(_r19); const _r15 = i0.ɵɵreference(6); const ctx_r21 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r21.chosenPeriodHandler($event, ctx_r21.timeframeOption.YEAR, _r15)); })("monthSelected", function DrFiscalMonthCalendarPickerComponent_ng_container_3_Template_mat_datepicker_monthSelected_5_listener($event) { i0.ɵɵrestoreView(_r19); const _r15 = i0.ɵɵreference(6); const ctx_r22 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r22.chosenPeriodHandler($event, ctx_r22.timeframeOption.MONTH, _r15)); })("opened", function DrFiscalMonthCalendarPickerComponent_ng_container_3_Template_mat_datepicker_opened_5_listener() { i0.ɵɵrestoreView(_r19); const ctx_r23 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r23.onOpen()); })("closed", function DrFiscalMonthCalendarPickerComponent_ng_container_3_Template_mat_datepicker_closed_5_listener() { i0.ɵɵrestoreView(_r19); const ctx_r24 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r24.onCLose()); });
     i0.ɵɵelementEnd();
     i0.ɵɵelementContainerEnd();
 } if (rf & 2) {
-    const _r11 = i0.ɵɵreference(5);
-    const ctx_r1 = i0.ɵɵnextContext();
+    const _r15 = i0.ɵɵreference(6);
+    const ctx_r2 = i0.ɵɵnextContext();
     i0.ɵɵadvance(1);
-    i0.ɵɵproperty("ngModel", i0.ɵɵpipeBind1(2, 13, ctx_r1.displayValue$))("matDatepicker", _r11)("matDatepickerFilter", ctx_r1.dateFilter)("disabled", ctx_r1.disabled)("placeholder", ctx_r1.placeholder)("drDatePickerFormat", i0.ɵɵpipeBind1(3, 15, ctx_r1.datePickerService.format$))("readonly", ctx_r1.readonly)("min", ctx_r1._min)("max", ctx_r1._max);
-    i0.ɵɵattribute("id", ctx_r1.id);
+    i0.ɵɵclassProp("hidden-calendar-input", ctx_r2.useButton);
+    i0.ɵɵproperty("ngModel", i0.ɵɵpipeBind1(2, 16, ctx_r2.displayValue$))("matDatepicker", _r15)("matDatepickerFilter", ctx_r2.dateFilter)("disabled", ctx_r2.disabled)("placeholder", ctx_r2.placeholder)("drDatePickerFormat", i0.ɵɵpipeBind1(3, 18, ctx_r2.datePickerService.format$))("readonly", ctx_r2.readonly)("min", ctx_r2._min)("max", ctx_r2._max);
+    i0.ɵɵattribute("id", ctx_r2.id);
     i0.ɵɵadvance(3);
-    i0.ɵɵproperty("panelClass", ctx_r1.panelClass)("startAt", ctx_r1._startAt)("calendarHeaderComponent", ctx_r1.customHeader);
+    i0.ɵɵproperty("ngIf", ctx_r2.useButton);
+    i0.ɵɵadvance(1);
+    i0.ɵɵproperty("panelClass", ctx_r2.panelClass)("startAt", ctx_r2._startAt)("calendarHeaderComponent", ctx_r2.customHeader);
 } }
 class FiscalMonthAdapter extends CustomDateAdapter {
     constructor() {
@@ -5112,20 +5164,19 @@ class DrFiscalMonthCalendarPickerComponent extends DrDatePickerComponent {
                 { provide: NG_VALUE_ACCESSOR, useExisting: DrFiscalMonthCalendarPickerComponent, multi: true },
                 { provide: DateAdapter, useClass: FiscalMonthAdapter },
                 DrDatePickerService,
-            ]), i0.ɵɵInheritDefinitionFeature], decls: 5, vars: 6, consts: [[1, "dr-icon-date", 3, "click"], [4, "ngIf"], [3, "ngModel", "disabled", "placeholder", "readonly", "min", "max", "click"], [1, "range-input", 3, "formGroup", "rangePicker", "dateFilter"], ["matStartDate", "", "formControlName", "start", 3, "drDatePickerFormat", "dateChange"], ["input", ""], ["matEndDate", "", "formControlName", "end", 3, "drDatePickerFormat"], [3, "startAt", "panelClass", "calendarHeaderComponent", "yearSelected", "monthSelected", "opened", "closed"], ["datePicker", ""], [3, "ngModel", "matDatepicker", "matDatepickerFilter", "disabled", "placeholder", "drDatePickerFormat", "readonly", "min", "max", "ngModelChange", "click"], [3, "panelClass", "startAt", "calendarHeaderComponent", "yearSelected", "monthSelected", "opened", "closed"]], template: function DrFiscalMonthCalendarPickerComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵelementStart(0, "i", 0);
-            i0.ɵɵlistener("click", function DrFiscalMonthCalendarPickerComponent_Template_i_click_0_listener() { return ctx.datePicker.open(); });
-            i0.ɵɵelementEnd();
+            ]), i0.ɵɵInheritDefinitionFeature], decls: 5, vars: 7, consts: [["class", "dr-icon-date", 3, "click", 4, "ngIf"], [4, "ngIf"], [1, "dr-icon-date", 3, "click"], [3, "ngModel", "disabled", "placeholder", "readonly", "min", "max", "click"], [1, "range-input", 3, "formGroup", "rangePicker", "dateFilter"], ["matStartDate", "", "formControlName", "start", 3, "drDatePickerFormat", "dateChange"], ["input", ""], ["matEndDate", "", "formControlName", "end", 3, "drDatePickerFormat"], [3, "startAt", "panelClass", "calendarHeaderComponent", "yearSelected", "monthSelected", "opened", "closed"], ["datePicker", ""], [3, "ngModel", "matDatepicker", "matDatepickerFilter", "disabled", "placeholder", "drDatePickerFormat", "readonly", "min", "max", "ngModelChange", "click"], ["class", "datepicker-button", 3, "icon", "iconAfter", "click", 4, "ngIf"], [3, "panelClass", "startAt", "calendarHeaderComponent", "yearSelected", "monthSelected", "opened", "closed"], [1, "datepicker-button", 3, "icon", "iconAfter", "click"]], template: function DrFiscalMonthCalendarPickerComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵtemplate(0, DrFiscalMonthCalendarPickerComponent_i_0_Template, 1, 0, "i", 0);
             i0.ɵɵtemplate(1, DrFiscalMonthCalendarPickerComponent_ng_container_1_Template, 10, 19, "ng-container", 1);
             i0.ɵɵpipe(2, "async");
-            i0.ɵɵtemplate(3, DrFiscalMonthCalendarPickerComponent_ng_container_3_Template, 6, 17, "ng-container", 1);
+            i0.ɵɵtemplate(3, DrFiscalMonthCalendarPickerComponent_ng_container_3_Template, 7, 20, "ng-container", 1);
             i0.ɵɵpipe(4, "async");
         } if (rf & 2) {
+            i0.ɵɵproperty("ngIf", !ctx.useButton);
             i0.ɵɵadvance(1);
-            i0.ɵɵproperty("ngIf", i0.ɵɵpipeBind1(2, 2, ctx.datePickerService.timeframe$) === "week");
+            i0.ɵɵproperty("ngIf", i0.ɵɵpipeBind1(2, 3, ctx.datePickerService.timeframe$) === "week");
             i0.ɵɵadvance(2);
-            i0.ɵɵproperty("ngIf", i0.ɵɵpipeBind1(4, 4, ctx.datePickerService.timeframe$) !== "week");
-        } }, dependencies: [i1$2.DefaultValueAccessor, i1$2.NgControlStatus, i1$2.NgControlStatusGroup, i1$2.NgModel, i1$2.FormGroupDirective, i1$2.FormControlName, i1.NgIf, i5.MatDatepicker, i5.MatDatepickerInput, i5.MatDateRangeInput, i5.MatStartDate, i5.MatEndDate, i5.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}[_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}[_nghost-%COMP%]:after, [_nghost-%COMP%]:before{position:absolute;display:flex;border-color:#6d6e6f transparent transparent;color:#6d6e6f}[_nghost-%COMP%]:after{font-family:DataRails!important;content:\"\\ea17\";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%]   .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$) !== "week");
+        } }, dependencies: [DrButtonComponent, i1$2.DefaultValueAccessor, i1$2.NgControlStatus, i1$2.NgControlStatusGroup, i1$2.NgModel, i1$2.FormGroupDirective, i1$2.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-radius:6px;color:#333;overflow:hidden;outline:none;cursor:pointer}[_nghost-%COMP%]:not(.use-button-picker){border:1px solid #9ea1aa}[_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:\"\\ea17\";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 }); }
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DrFiscalMonthCalendarPickerComponent, [{
         type: Component,
@@ -5133,7 +5184,7 @@ class DrFiscalMonthCalendarPickerComponent extends DrDatePickerComponent {
                     { provide: NG_VALUE_ACCESSOR, useExisting: DrFiscalMonthCalendarPickerComponent, multi: true },
                     { provide: DateAdapter, useClass: FiscalMonthAdapter },
                     DrDatePickerService,
-                ], template: "<i 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\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: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:after,:host:before{position:absolute;display:flex;border-color:#6d6e6f transparent transparent;color:#6d6e6f}:host:after{font-family:DataRails!important;content:\"\\ea17\";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 .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) === '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-radius:6px;color:#333;overflow:hidden;outline:none;cursor:pointer}:host:not(.use-button-picker){border:1px solid #9ea1aa}: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:\"\\ea17\";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"] }]
     }], null, null); })();
 
 var TooltipPosition;
@@ -5374,7 +5425,7 @@ class DrDatePickerWithTimeframeComponent extends DrDatePickerComponent {
             i0.ɵɵproperty("ngIf", !ctx.disabled);
             i0.ɵɵadvance(1);
             i0.ɵɵproperty("calendarHeaderComponent", ctx.customHeader)("panelClass", ctx.datePickerService.isUsingDateTagPresets ? "date-picker-preset-tag" : "dr-timeframe-datepicker");
-        } }, dependencies: [DrButtonComponent, i1$2.DefaultValueAccessor, i1$2.NgControlStatus, i1$2.NgModel, i1.NgIf, i1.NgTemplateOutlet, i5.MatDatepicker, i5.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}[_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}[_nghost-%COMP%]:after, [_nghost-%COMP%]:before{position:absolute;display:flex;border-color:#6d6e6f transparent transparent;color:#6d6e6f}[_nghost-%COMP%]:after{font-family:DataRails!important;content:\"\\ea17\";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%]   .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}.disabled[_nghost-%COMP%]{background:transparent;color:#aeabac}.disabled.dr-date-picker-on-dashboard[_nghost-%COMP%]{border:none;padding:0 8px}.disabled.dr-date-picker-on-dashboard[_nghost-%COMP%]   .dr-datepicker-input-container__formatted-value-display[_ngcontent-%COMP%]{text-decoration:none;color:#aeabac;font-weight:400}.disabled.dr-date-picker-on-dashboard[_nghost-%COMP%]   .dr-datepicker-input-container[_ngcontent-%COMP%]   i[_ngcontent-%COMP%]{color:#aeabac}.dr-date-picker-on-dashboard[_nghost-%COMP%]{width:-moz-fit-content;width:fit-content;justify-content:space-between}.dr-date-picker-on-dashboard[_nghost-%COMP%]   mat-datepicker[_ngcontent-%COMP%]{position:absolute}.dr-date-picker-on-dashboard[_nghost-%COMP%]:after{visibility:hidden}.dr-date-picker-on-dashboard[_nghost-%COMP%]   .dr-datepicker-input-container[_ngcontent-%COMP%]{display:flex;flex-direction:row;justify-content:center;align-items:center;margin-left:-10px}.dr-date-picker-on-dashboard[_nghost-%COMP%]   .dr-datepicker-input-container__formatted-value-display[_ngcontent-%COMP%]{font-weight:600;width:auto;margin-left:5px}.dr-date-picker-on-dashboard[_nghost-%COMP%]   .dr-datepicker-input-container[_ngcontent-%COMP%]   .dr-icon-date[_ngcontent-%COMP%]{display:block;position:relative;top:0;margin-right:8px;color:#4e566c}[_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%]{width:100px;height:22px;padding-left:0;text-align:center;line-height:22px;color:#0c142b;text-decoration-line:underline}[_nghost-%COMP%]   .dr-datepicker-input-container__formatted-value-display[_ngcontent-%COMP%]:hover{background-color:#f2f2fb;border-radius:5px;cursor:pointer;text-decoration-line:underline;color:#4646ce}  .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, i1$2.DefaultValueAccessor, i1$2.NgControlStatus, i1$2.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-radius:6px;color:#333;overflow:hidden;outline:none;cursor:pointer}[_nghost-%COMP%]:not(.use-button-picker){border:1px solid #9ea1aa}[_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:\"\\ea17\";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}.disabled[_nghost-%COMP%]{background:transparent;color:#aeabac}.disabled.dr-date-picker-on-dashboard[_nghost-%COMP%]{border:none;padding:0 8px}.disabled.dr-date-picker-on-dashboard[_nghost-%COMP%]   .dr-datepicker-input-container__formatted-value-display[_ngcontent-%COMP%]{text-decoration:none;color:#aeabac;font-weight:400}.disabled.dr-date-picker-on-dashboard[_nghost-%COMP%]   .dr-datepicker-input-container[_ngcontent-%COMP%]   i[_ngcontent-%COMP%]{color:#aeabac}.dr-date-picker-on-dashboard[_nghost-%COMP%]{width:-moz-fit-content;width:fit-content;justify-content:space-between}.dr-date-picker-on-dashboard[_nghost-%COMP%]   mat-datepicker[_ngcontent-%COMP%]{position:absolute}.dr-date-picker-on-dashboard[_nghost-%COMP%]:after{visibility:hidden}.dr-date-picker-on-dashboard[_nghost-%COMP%]   .dr-datepicker-input-container[_ngcontent-%COMP%]{display:flex;flex-direction:row;justify-content:center;align-items:center;margin-left:-10px}.dr-date-picker-on-dashboard[_nghost-%COMP%]   .dr-datepicker-input-container__formatted-value-display[_ngcontent-%COMP%]{font-weight:600;width:auto;margin-left:5px}.dr-date-picker-on-dashboard[_nghost-%COMP%]   .dr-datepicker-input-container[_ngcontent-%COMP%]   .dr-icon-date[_ngcontent-%COMP%]{display:block;position:relative;top:0;margin-right:8px;color:#4e566c}[_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%]{width:100px;height:22px;padding-left:0;text-align:center;line-height:22px;color:#0c142b;text-decoration-line:underline}[_nghost-%COMP%]   .dr-datepicker-input-container__formatted-value-display[_ngcontent-%COMP%]:hover{background-color:#f2f2fb;border-radius:5px;cursor:pointer;text-decoration-line:underline;color:#4646ce}  .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,
@@ -5382,7 +5433,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 *ngIf=\"isDashboardDatepicker\" class=\"dr-icon-date\"></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]=\"datePickerService.isUsingDateTagPresets ? 'date-picker-preset-tag' : 'dr-timeframe-datepicker'\">\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: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:after,:host:before{position:absolute;display:flex;border-color:#6d6e6f transparent transparent;color:#6d6e6f}:host:after{font-family:DataRails!important;content:\"\\ea17\";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 .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}:host.disabled{background:transparent;color:#aeabac}:host.disabled.dr-date-picker-on-dashboard{border:none;padding:0 8px}:host.disabled.dr-date-picker-on-dashboard .dr-datepicker-input-container__formatted-value-display{text-decoration:none;color:#aeabac;font-weight:400}:host.disabled.dr-date-picker-on-dashboard .dr-datepicker-input-container i{color:#aeabac}:host.dr-date-picker-on-dashboard{width:-moz-fit-content;width:fit-content;justify-content:space-between}:host.dr-date-picker-on-dashboard mat-datepicker{position:absolute}:host.dr-date-picker-on-dashboard:after{visibility:hidden}:host.dr-date-picker-on-dashboard .dr-datepicker-input-container{display:flex;flex-direction:row;justify-content:center;align-items:center;margin-left:-10px}:host.dr-date-picker-on-dashboard .dr-datepicker-input-container__formatted-value-display{font-weight:600;width:auto;margin-left:5px}:host.dr-date-picker-on-dashboard .dr-datepicker-input-container .dr-icon-date{display:block;position:relative;top:0;margin-right:8px;color:#4e566c}:host .dr-datepicker-input-container input{visibility:hidden;position:absolute;width:100%}:host .dr-datepicker-input-container__formatted-value-display{width:100px;height:22px;padding-left:0;text-align:center;line-height:22px;color:#0c142b;text-decoration-line:underline}:host .dr-datepicker-input-container__formatted-value-display:hover{background-color:#f2f2fb;border-radius:5px;cursor:pointer;text-decoration-line:underline;color:#4646ce}::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 *ngIf=\"isDashboardDatepicker\" class=\"dr-icon-date\"></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]=\"datePickerService.isUsingDateTagPresets ? 'date-picker-preset-tag' : 'dr-timeframe-datepicker'\">\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-radius:6px;color:#333;overflow:hidden;outline:none;cursor:pointer}:host:not(.use-button-picker){border:1px solid #9ea1aa}: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:\"\\ea17\";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}:host.disabled{background:transparent;color:#aeabac}:host.disabled.dr-date-picker-on-dashboard{border:none;padding:0 8px}:host.disabled.dr-date-picker-on-dashboard .dr-datepicker-input-container__formatted-value-display{text-decoration:none;color:#aeabac;font-weight:400}:host.disabled.dr-date-picker-on-dashboard .dr-datepicker-input-container i{color:#aeabac}:host.dr-date-picker-on-dashboard{width:-moz-fit-content;width:fit-content;justify-content:space-between}:host.dr-date-picker-on-dashboard mat-datepicker{position:absolute}:host.dr-date-picker-on-dashboard:after{visibility:hidden}:host.dr-date-picker-on-dashboard .dr-datepicker-input-container{display:flex;flex-direction:row;justify-content:center;align-items:center;margin-left:-10px}:host.dr-date-picker-on-dashboard .dr-datepicker-input-container__formatted-value-display{font-weight:600;width:auto;margin-left:5px}:host.dr-date-picker-on-dashboard .dr-datepicker-input-container .dr-icon-date{display:block;position:relative;top:0;margin-right:8px;color:#4e566c}:host .dr-datepicker-input-container input{visibility:hidden;position:absolute;width:100%}:host .dr-datepicker-input-container__formatted-value-display{width:100px;height:22px;padding-left:0;text-align:center;line-height:22px;color:#0c142b;text-decoration-line:underline}:host .dr-datepicker-input-container__formatted-value-display:hover{background-color:#f2f2fb;border-radius:5px;cursor:pointer;text-decoration-line:underline;color:#4646ce}::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$4.DateAdapter }, { type: DrDatePickerService }]; }, { isDashboardClassDisplayed: [{
             type: HostBinding,
             args: ['class.dr-date-picker-on-dashboard']