@datarailsshared/datarailsshared 1.5.542 → 1.5.544

package/fesm2022/datarailsshared-datarailsshared.mjs

@@ -1,19 +1,19 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, Component, Output, Input, Injectable, ChangeDetectionStrategy, HostBinding, TemplateRef, HostListener, Directive, ViewContainerRef, ViewChild, ContentChild, Pipe, Inject, Optional, ViewEncapsulation, forwardRef, PLATFORM_ID, ContentChildren, ElementRef, Injector, inject, ChangeDetectorRef, DestroyRef, Host, NgModule, InjectionToken, SkipSelf } from '@angular/core';
+import { EventEmitter, Component, Output, Input, Injectable, inject, ChangeDetectorRef, DestroyRef, ChangeDetectionStrategy, HostBinding, TemplateRef, HostListener, Directive, ViewContainerRef, ViewChild, ContentChild, Pipe, ComponentFactoryResolver, Injector, Inject, Optional, ViewEncapsulation, forwardRef, PLATFORM_ID, ContentChildren, ElementRef, Host, NgModule, InjectionToken, SkipSelf } from '@angular/core';
 import * as i1 from '@angular/common';
-import { isPlatformBrowser, DOCUMENT, CommonModule } from '@angular/common';
+import { CommonModule, isPlatformBrowser, DOCUMENT } from '@angular/common';
 import { MomentDateAdapter, MAT_MOMENT_DATE_ADAPTER_OPTIONS } from '@angular/material-moment-adapter';
-import * as i1$4 from '@angular/material/core';
+import * as i1$3 from '@angular/material/core';
 import { MAT_DATE_FORMATS, DateAdapter, MAT_DATE_LOCALE, MatNativeDateModule, MatCommonModule } from '@angular/material/core';
 import moment from 'moment';
 import * as i1$2 from '@angular/forms';
-import { NG_VALUE_ACCESSOR, FormGroup, FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { Observable, BehaviorSubject, Subject, combineLatest, noop as noop$3, from, merge as merge$1, fromEvent, filter as filter$1, switchMap as switchMap$1, map as map$2, observeOn, asyncScheduler, withLatestFrom, first as first$1, takeUntil as takeUntil$1, interval, throwError, finalize as finalize$1, distinctUntilChanged as distinctUntilChanged$1, tap as tap$1, defer } from 'rxjs';
+import { NG_VALUE_ACCESSOR, FormBuilder, FormGroup, FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { Observable, BehaviorSubject, distinctUntilChanged, Subject, startWith, takeUntil, combineLatest, noop as noop$3, from, merge as merge$1, fromEvent, filter as filter$1, switchMap as switchMap$1, map as map$2, observeOn, asyncScheduler, withLatestFrom, first as first$1, interval, throwError, finalize as finalize$1, tap as tap$1, defer } from 'rxjs';
 import * as _ from 'lodash';
 import { cloneDeep, find, indexOf, reduce, isObject, isNil, map as map$1, isNumber, merge, forEach, some, orderBy, filter as filter$2, includes, pull, concat, isString, isBoolean } from 'lodash';
-import { skip, takeUntil, distinctUntilChanged, startWith, map, tap, shareReplay, debounceTime, filter, switchMap, first, catchError, finalize, take } from 'rxjs/operators';
-import * as i1$3 from '@angular/material/datepicker';
-import { MatCalendar, MatDatepickerModule } from '@angular/material/datepicker';
+import { skip, takeUntil as takeUntil$1, startWith as startWith$1, distinctUntilChanged as distinctUntilChanged$1, map, tap, shareReplay, filter, debounceTime, switchMap, first, catchError, finalize, take } from 'rxjs/operators';
+import * as i5 from '@angular/material/datepicker';
+import { MatCalendar, DateRange, MAT_DATE_RANGE_SELECTION_STRATEGY, MatDatepickerModule } from '@angular/material/datepicker';
 import { transition, style, animate, trigger, state } from '@angular/animations';
 import * as i1$1 from '@angular/cdk/overlay';
 import { OverlayConfig } from '@angular/cdk/overlay';
@@ -21,21 +21,21 @@ import * as i4 from '@angular/cdk/portal';
 import { ComponentPortal, CdkPortalOutlet, PortalModule } from '@angular/cdk/portal';
 import * as i3 from '@ng-select/ng-select';
 import { NgSelectComponent, NgSelectModule } from '@ng-select/ng-select';
-import * as i1$5 from 'ngx-mask';
+import * as i1$4 from 'ngx-mask';
 import { provideNgxMask, NgxMaskDirective } from 'ngx-mask';
-import * as i1$6 from '@angular/platform-browser';
+import * as i1$5 from '@angular/platform-browser';
 import * as CodeMirror from 'codemirror';
 import * as i2 from '@angular/material/tabs';
 import { MatTabsModule } from '@angular/material/tabs';
-import * as i1$7 from '@angular/material/legacy-dialog';
+import * as i1$6 from '@angular/material/legacy-dialog';
 import { MAT_LEGACY_DIALOG_DATA, MatLegacyDialogRef, MatLegacyDialogModule } from '@angular/material/legacy-dialog';
-import * as i1$8 from 'ngx-toastr';
+import * as i1$7 from 'ngx-toastr';
 import { Toast, ToastrModule } from 'ngx-toastr';
 import 'codemirror/mode/javascript/javascript';
 import 'codemirror/addon/edit/matchbrackets';
 import 'codemirror/addon/hint/show-hint';
 import '@codemirror/autocomplete';
-import * as i1$9 from '@angular/cdk/a11y';
+import * as i1$8 from '@angular/cdk/a11y';
 import { CdkDialogContainer, DialogModule, Dialog, DialogConfig } from '@angular/cdk/dialog';
 import { ESCAPE, hasModifierKey } from '@angular/cdk/keycodes';
 import { coerceCssPixelValue } from '@angular/cdk/coercion';
@@ -212,12 +212,13 @@ class DrDatePickerService {
     constructor() {
         this.isTimeframeSelectionEnabled = false;
         this._timeframe$ = new BehaviorSubject(TimeframeOption.DAY);
-        this.timeframe$ = this._timeframe$.asObservable();
+        this.timeframe$ = this._timeframe$.asObservable().pipe(distinctUntilChanged());
         // TODO: here we can have inconsistency between format and timeframe
         // we need to get rid of a separate subject and use pipe from timeframe$ for it
         // making @Input() format in component just setting the timeframe
         this.format$ = new BehaviorSubject(DateFromats.MAT_DEFAULT_DATE_FORMAT);
         this.updatedQuarter$ = new Subject();
+        this.weekSelectionChange$ = new Subject();
         this.updatedDateAndClose$ = new Subject();
         this.presetTag$ = new BehaviorSubject('');
         this.onSameDaySelectedInCalendar$ = new Subject();
@@ -522,6 +523,89 @@ const PRESET_TAGS_LIST = [
     { key: DateTags.PREV_MONTH, label: 'Prev month' },
 ];
 
+function WeekSelectorComponent_div_4_Template(rf, ctx) { if (rf & 1) {
+    const _r3 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 5);
+    i0.ɵɵlistener("click", function WeekSelectorComponent_div_4_Template_div_click_0_listener() { const restoredCtx = i0.ɵɵrestoreView(_r3); const week_r1 = restoredCtx.$implicit; const ctx_r2 = i0.ɵɵnextContext(); ctx_r2.service.datePickerInstance.close(); return i0.ɵɵresetView(ctx_r2.service.weekSelectionChange$.next(week_r1)); });
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const week_r1 = ctx.$implicit;
+    i0.ɵɵclassProp("selected", week_r1.selected);
+    i0.ɵɵadvance(1);
+    i0.ɵɵtextInterpolate1(" W", week_r1.yearWeekNumber, " ");
+} }
+class WeekSelectorComponent {
+    constructor() {
+        this.service = inject(DrDatePickerService);
+        this.calendar = inject(MatCalendar);
+        this.cdr = inject(ChangeDetectorRef);
+        this.destroy$ = new Subject();
+        this.currentMonthWeeks = [];
+        inject(DestroyRef, { skipSelf: true }).onDestroy(() => {
+            this.destroy$.next();
+            this.destroy$.complete();
+        });
+        this.calendar.stateChanges.pipe(startWith(null), takeUntil(this.destroy$)).subscribe(() => {
+            setTimeout(() => {
+                const activeDate = moment(this.calendar.activeDate);
+                const selectedRange = this.calendar.selected;
+                this.currentMonthWeeks = this.getWeeksInMonth(activeDate, selectedRange);
+                this.cdr.detectChanges();
+            });
+        });
+    }
+    getWeeksInMonth(date, selectedRange) {
+        const weeks = [];
+        const firstDay = moment(date).startOf('month');
+        const lastDay = moment(date).endOf('month');
+        const firstWeekStart = moment(firstDay).startOf('isoWeek');
+        const lastWeekEnd = moment(lastDay).endOf('isoWeek');
+        let currentWeekStart = moment(firstWeekStart);
+        let weekNumber = 1;
+        while (currentWeekStart.isSameOrBefore(lastWeekEnd)) {
+            const weekEnd = moment(currentWeekStart).endOf('isoWeek');
+            const days = [];
+            for (let i = 0; i < 7; i++) {
+                days.push(moment(currentWeekStart).add(i, 'days'));
+            }
+            const isPartial = days.some((day) => !day.isSame(date, 'month'));
+            const selected = days.some((day) => day.isSame(selectedRange.start, 'day'));
+            // isoWeek() returns the ISO week number (1-53)
+            const yearWeekNumber = moment(currentWeekStart).isoWeek();
+            weeks.push({
+                weekNumber,
+                yearWeekNumber,
+                start: moment(currentWeekStart),
+                end: moment(weekEnd),
+                days,
+                isPartial,
+                selected,
+            });
+            currentWeekStart.add(1, 'week');
+            weekNumber++;
+        }
+        return weeks;
+    }
+    /** @nocollapse */ static { this.ɵfac = function WeekSelectorComponent_Factory(t) { return new (t || WeekSelectorComponent)(); }; }
+    /** @nocollapse */ static { this.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: WeekSelectorComponent, selectors: [["dr-week-selector"]], standalone: true, features: [i0.ɵɵStandaloneFeature], decls: 6, vars: 1, consts: [[1, "weeks"], [1, "header"], [1, "weeks__container"], ["class", "btn", 3, "selected", "click", 4, "ngFor", "ngForOf"], [1, "weeks-border"], [1, "btn", 3, "click"]], template: function WeekSelectorComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "div", 0)(1, "div", 1);
+            i0.ɵɵtext(2, "Week");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(3, "div", 2);
+            i0.ɵɵtemplate(4, WeekSelectorComponent_div_4_Template, 2, 3, "div", 3);
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelement(5, "div", 4);
+        } if (rf & 2) {
+            i0.ɵɵadvance(4);
+            i0.ɵɵproperty("ngForOf", ctx.currentMonthWeeks);
+        } }, dependencies: [CommonModule, i1.NgForOf], styles: ["[_nghost-%COMP%]{font-size:14px;font-weight:400;line-height:22px;text-align:center;color:#333;display:flex}[_nghost-%COMP%]   .weeks[_ngcontent-%COMP%]{height:100%;flex-direction:column;display:flex}[_nghost-%COMP%]   .weeks-border[_ngcontent-%COMP%]{height:100%;width:1px;background-color:#dfe0e3;margin:0 4px}[_nghost-%COMP%]   .weeks__container[_ngcontent-%COMP%]{display:flex;flex-direction:column;justify-content:space-between;height:100%}[_nghost-%COMP%]   .weeks[_ngcontent-%COMP%]   .header[_ngcontent-%COMP%]{font-weight:600;color:#19181a;padding-bottom:8px;line-height:16px}[_nghost-%COMP%]   .weeks[_ngcontent-%COMP%]   .btn[_ngcontent-%COMP%]{padding:9px 16px;border-radius:40px;cursor:pointer}[_nghost-%COMP%]   .weeks[_ngcontent-%COMP%]   .btn[_ngcontent-%COMP%]:hover{font-weight:600;background-color:#f2f2fb;color:#4646ce}[_nghost-%COMP%]   .weeks[_ngcontent-%COMP%]   .btn.selected[_ngcontent-%COMP%]{font-weight:600;background-color:#4646ce;color:#fff}"], changeDetection: 0 }); }
+}
+(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(WeekSelectorComponent, [{
+        type: Component,
+        args: [{ selector: 'dr-week-selector', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"weeks\">\n    <div class=\"header\">Week</div>\n\n    <div class=\"weeks__container\">\n        <div\n            (click)=\"service.datePickerInstance.close(); service.weekSelectionChange$.next(week)\"\n            class=\"btn\"\n            [class.selected]=\"week.selected\"\n            *ngFor=\"let week of currentMonthWeeks\">\n            W{{ week.yearWeekNumber }}\n        </div>\n    </div>\n</div>\n<div class=\"weeks-border\"></div>\n", styles: [":host{font-size:14px;font-weight:400;line-height:22px;text-align:center;color:#333;display:flex}:host .weeks{height:100%;flex-direction:column;display:flex}:host .weeks-border{height:100%;width:1px;background-color:#dfe0e3;margin:0 4px}:host .weeks__container{display:flex;flex-direction:column;justify-content:space-between;height:100%}:host .weeks .header{font-weight:600;color:#19181a;padding-bottom:8px;line-height:16px}:host .weeks .btn{padding:9px 16px;border-radius:40px;cursor:pointer}:host .weeks .btn:hover{font-weight:600;background-color:#f2f2fb;color:#4646ce}:host .weeks .btn.selected{font-weight:600;background-color:#4646ce;color:#fff}\n"] }]
+    }], function () { return []; }, null); })();
+
 var TooltipTheme;
 (function (TooltipTheme) {
     TooltipTheme["LIGHT"] = "light";
@@ -1183,7 +1267,7 @@ class DrSelectComponent {
             i0.ɵɵproperty("ngIf", ctx.groupBy);
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("ngIf", ctx.type === "search-input");
-        } }, dependencies: [i1$2.NgControlStatus, i1$2.NgModel, i1.NgIf, i1.NgTemplateOutlet, i3.NgSelectComponent, i3.NgOptgroupTemplateDirective, i3.NgOptionTemplateDirective, i3.NgLabelTemplateDirective, i3.NgMultiLabelTemplateDirective, i3.NgHeaderTemplateDirective, i3.NgFooterTemplateDirective, i3.NgLoadingSpinnerTemplateDirective, DrSpinnerDirective], styles: ["[_nghost-%COMP%]{width:100%;height:32px;font-family:Poppins,sans-serif}.textView[_nghost-%COMP%] {width:auto}.textView[_nghost-%COMP%]  ng-select.ng-select .ng-select-container{border:none!important;cursor:pointer}.textView[_nghost-%COMP%]  ng-select.ng-select .ng-select-container .ng-value-container{padding:0;color:#4646ce}.textView[_nghost-%COMP%]  ng-select.ng-select .ng-select-container .ng-value-container:hover{text-decoration-line:underline}.textView[_nghost-%COMP%]  ng-select.ng-select .ng-select-container .ng-arrow-wrapper{display:none}.no-left-border-radius[_nghost-%COMP%]     ng-select.ng-select .ng-select-container{border-bottom-left-radius:0!important;border-top-left-radius:0!important}.no-right-border-radius[_nghost-%COMP%]     ng-select.ng-select .ng-select-container{border-bottom-right-radius:0!important;border-top-right-radius:0!important}.no-right-border[_nghost-%COMP%]     ng-select.ng-select .ng-select-container{border-right:none!important}.no-left-border[_nghost-%COMP%]     ng-select.ng-select .ng-select-container{border-left:none!important}[_nghost-%COMP%]     ng-select.ng-select .ng-select-container{min-height:32px;height:32px;width:100%;border-radius:6px;border:1px solid #9ea1aa;box-shadow:none!important}[_nghost-%COMP%]     ng-select.ng-select .ng-select-container:hover{border-color:#4646ce}[_nghost-%COMP%]     ng-select.ng-select .ng-select-container:focus-within{border-color:#4646ce}[_nghost-%COMP%]     ng-select.ng-select .ng-select-container .ng-input{top:0!important;line-height:30px;padding:0 50px 0 8px!important;color:#333;font-size:14px;font-weight:400}[_nghost-%COMP%]     ng-select.ng-select .ng-select-container .ng-input input::placeholder{color:#6d6e6f;font-size:14px;line-height:18px}[_nghost-%COMP%]     ng-select.ng-select .ng-select-container .ng-value-container{padding:0 0 0 8px;height:100%;overflow:auto;font-size:14px;line-height:18px}[_nghost-%COMP%]     ng-select.ng-select .ng-select-container .ng-value-container .ng-input{padding:0 0 0 3px!important}[_nghost-%COMP%]     ng-select.ng-select .ng-select-container .ng-arrow-wrapper{margin-right:7px}[_nghost-%COMP%]     ng-select.ng-select .ng-select-container .ng-arrow-wrapper .ng-arrow{border:none;width:auto;height:auto;display:flex;text-decoration-line:none;top:0}[_nghost-%COMP%]     ng-select.ng-select .ng-select-container .ng-arrow-wrapper .ng-arrow:before{font-family:DataRails!important;content:\"\\ea15\";font-size:24px;color:#6d6e6f}[_nghost-%COMP%]     ng-select.ng-select.ng-select-opened .ng-select-container{border-radius:6px}[_nghost-%COMP%]     ng-select.ng-select.ng-select-multiple .ng-select-container{max-height:58px;height:100%}[_nghost-%COMP%]     ng-select.ng-select.ng-select-multiple .ng-select-container .ng-value-container{max-height:58px;font-size:14px;line-height:18px}[_nghost-%COMP%]     ng-select.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{color:#333;height:24px;padding:2px 16px;font-size:12px;margin:2px 4px 2px 0;background:#f0f1f4;display:flex;flex-direction:row-reverse;align-items:center;border-radius:12px}[_nghost-%COMP%]     ng-select.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value-label{line-height:20px;padding:0!important}[_nghost-%COMP%]     ng-select.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value-icon{border:none!important;padding:0!important;width:20px;display:flex;align-items:center;color:transparent;margin-left:4px}[_nghost-%COMP%]     ng-select.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value-icon:before{font-family:DataRails!important;content:\"\\ea61\";font-size:20px;color:#333}[_nghost-%COMP%]     ng-select.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value-icon, [_nghost-%COMP%]     ng-select.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value-icon:hover{background:transparent!important}[_nghost-%COMP%]     ng-select.ng-select.ng-select-disabled .ng-select-container, [_nghost-%COMP%]     ng-select.ng-select.ng-select-disabled .ng-select-container:hover, [_nghost-%COMP%]     ng-select.ng-select.ng-select-disabled .ng-select-container:focus-within{background:#f0f1f4!important;border:1px solid #aeabac!important}[_nghost-%COMP%]     ng-select.ng-select.ng-select-disabled .ng-select-container .ng-value, [_nghost-%COMP%]     ng-select.ng-select.ng-select-disabled .ng-select-container:hover .ng-value, [_nghost-%COMP%]     ng-select.ng-select.ng-select-disabled .ng-select-container:focus-within .ng-value{color:#aeabac!important}[_nghost-%COMP%]     ng-select.ng-select.ng-select-disabled .ng-select-container .ng-arrow{color:#aeabac}[_nghost-%COMP%]     ng-select.ng-select.ng-select-disabled .ng-select-container .ng-arrow:before{color:#aeabac}[_nghost-%COMP%]     ng-select.ng-select.ng-select-disabled .ng-select-container .ng-input input::placeholder{color:#aeabac}[_nghost-%COMP%]     ng-select.ng-select.ng-select-single.ng-invalid.ng-touched .ng-select-container, [_nghost-%COMP%]     ng-select.ng-select.ng-select-multiple.ng-invalid.ng-touched .ng-select-container{border-color:#bf1d30}[_nghost-%COMP%]     ng-select.ng-select--multiple-height-increased.ng-select-multiple .ng-select-container{max-height:88px}[_nghost-%COMP%]     ng-select.ng-select--multiple-height-increased.ng-select-multiple .ng-select-container .ng-value-container{max-height:88px}[_nghost-%COMP%]     ng-select.ng-select--no-value-padding .ng-select-container .ng-value-container .ng-value, [_nghost-%COMP%]     ng-select.ng-select--no-value-padding.ng-select-multiple .ng-select-container .ng-value-container .ng-value{padding:0}[_nghost-%COMP%]     ng-select.ng-select--no-value-padding .ng-select-container .ng-value-container .ng-value .ng-select-user-label, [_nghost-%COMP%]     ng-select.ng-select--no-value-padding.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-select-user-label{height:100%}.ng-invalid.ng-touched[_nghost-%COMP%]  ng-select.ng-select .ng-select-container{border-color:#bf1d30}[_nghost-%COMP%]   .dr-select__loading[_ngcontent-%COMP%]{position:relative;height:32px;width:24px}.search-input[_nghost-%COMP%]{position:relative}.search-input[_nghost-%COMP%]   .search-icon[_ngcontent-%COMP%]{position:absolute;top:4px;right:16px;color:#6d6e6f;z-index:1001}.search-input[_nghost-%COMP%]  ng-select.ng-select .ng-select-container{border-radius:16px}.search-input[_nghost-%COMP%]  ng-select.ng-select .ng-select-container .ng-arrow-wrapper{display:none!important}.search-input[_nghost-%COMP%]  ng-select.ng-select .ng-select-container .ng-clear-wrapper{display:flex;justify-content:center;align-items:center;right:40px;top:1px;width:24px;height:24px}.search-input[_nghost-%COMP%]  ng-select.ng-select .ng-select-container .ng-clear-wrapper .ng-clear{font-size:24px;font-weight:300;color:#6d6e6f}.search-input[_nghost-%COMP%]  ng-select.ng-select .ng-select-container .ng-input, .search-input[_nghost-%COMP%]  ng-select.ng-select .ng-select-container .ng-value-container{padding:0 0 0 16px!important;width:calc(100% - 63px)}.search-input[_nghost-%COMP%]  ng-select.ng-select .ng-select-container .ng-input input, .search-input[_nghost-%COMP%]  ng-select.ng-select .ng-select-container .ng-value-container input{height:100%}  ng-dropdown-panel.ng-dropdown-panel.dr-select{font-family:Poppins,sans-serif;border:1px solid #dfe0e3;border-radius:4px!important;margin:8px 0;box-shadow:0 4px 8px 1px #00000040;background-color:#fff;overflow:hidden;padding:8px 0}  ng-dropdown-panel.ng-dropdown-panel.dr-select.textView{width:auto!important}  ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option:empty{display:none}  ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option{display:flex;align-items:center;min-height:36px;padding:8px 12px;font-size:14px;line-height:22px;background:#fff}  ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option>.ng-option-label{text-overflow:ellipsis;overflow:hidden}  ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option.ng-option-marked{background:#f5f5f5}  ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option.ng-option-selected,   ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option.ng-option-selected.ng-option-marked{background:#eaeaff;color:#333}  ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option.ng-option-selected span,   ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option.ng-option-selected.ng-option-marked span{font-weight:400!important}  ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option.ng-option-disabled{cursor:default}  ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option.ng-option-disabled>div{color:#aeabac}  ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option.ng-option-disabled>div.dr-select__option-with-desc__wrapper .dr-select__option-with-desc__description{color:#aeabac}  ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option.ng-option-disabled[role=group]{font-size:14px;line-height:22px;color:#aeabac;cursor:default}  ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option.ng-option-disabled[role=group]:not(:first-of-type){border-top:1px solid #dfe0e3}  ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option.ng-option-disabled[role=group]:hover{background:#fff}  ng-dropdown-panel.ng-dropdown-panel.dr-select .dr-select__option-with-desc__wrapper{color:#333}  ng-dropdown-panel.ng-dropdown-panel.dr-select .dr-select__option-with-desc__wrapper .dr-select__option-with-desc__description{max-width:-moz-fit-content;max-width:fit-content;word-break:break-word;white-space:normal;color:#6d6e6f;font-weight:400;font-size:12px;line-height:20px}  ng-dropdown-panel.ng-dropdown-panel.dr-select.ng-option-selected .dr-select__option-with-desc__wrapper .dr-select__option-with-desc__description,   ng-dropdown-panel.ng-dropdown-panel.dr-select.ng-option-selected.ng-option-marked .dr-select__option-with-desc__wrapper .dr-select__option-with-desc__description{color:#6d6e6f}.custom-backdrop[_ngcontent-%COMP%]{position:fixed;inset:0;overflow:hidden;pointer-events:none}"] }); }
+        } }, dependencies: [i1$2.NgControlStatus, i1$2.NgModel, i1.NgIf, i1.NgTemplateOutlet, i3.NgSelectComponent, i3.NgOptgroupTemplateDirective, i3.NgOptionTemplateDirective, i3.NgLabelTemplateDirective, i3.NgMultiLabelTemplateDirective, i3.NgHeaderTemplateDirective, i3.NgFooterTemplateDirective, i3.NgLoadingSpinnerTemplateDirective, DrSpinnerDirective], styles: ["[_nghost-%COMP%]{width:100%;height:32px;font-family:Poppins,sans-serif}.textView[_nghost-%COMP%] {width:auto}.textView[_nghost-%COMP%]  ng-select.ng-select .ng-select-container{border:none!important;cursor:pointer}.textView[_nghost-%COMP%]  ng-select.ng-select .ng-select-container .ng-value-container{padding:0;color:#4646ce}.textView[_nghost-%COMP%]  ng-select.ng-select .ng-select-container .ng-value-container:hover{text-decoration-line:underline}.textView[_nghost-%COMP%]  ng-select.ng-select .ng-select-container .ng-arrow-wrapper{display:none}.no-left-border-radius[_nghost-%COMP%]     ng-select.ng-select .ng-select-container{border-bottom-left-radius:0!important;border-top-left-radius:0!important}.no-right-border-radius[_nghost-%COMP%]     ng-select.ng-select .ng-select-container{border-bottom-right-radius:0!important;border-top-right-radius:0!important}.no-right-border[_nghost-%COMP%]     ng-select.ng-select .ng-select-container{border-right:none!important}.no-left-border[_nghost-%COMP%]     ng-select.ng-select .ng-select-container{border-left:none!important}[_nghost-%COMP%]     ng-select.ng-select .ng-select-container{min-height:32px;height:32px;width:100%;border-radius:6px;border:1px solid #9ea1aa;box-shadow:none!important}[_nghost-%COMP%]     ng-select.ng-select .ng-select-container:hover{border-color:#4646ce}[_nghost-%COMP%]     ng-select.ng-select .ng-select-container:focus-within{border-color:#4646ce}[_nghost-%COMP%]     ng-select.ng-select .ng-select-container .ng-input{top:0!important;line-height:30px;padding:0 50px 0 8px!important;color:#333;font-size:14px;font-weight:400}[_nghost-%COMP%]     ng-select.ng-select .ng-select-container .ng-input input::placeholder{color:#6d6e6f;font-size:14px;line-height:18px}[_nghost-%COMP%]     ng-select.ng-select .ng-select-container .ng-value-container{padding:0 0 0 8px;height:100%;overflow:auto;font-size:14px;line-height:18px}[_nghost-%COMP%]     ng-select.ng-select .ng-select-container .ng-value-container .ng-input{padding:0 0 0 3px!important}[_nghost-%COMP%]     ng-select.ng-select .ng-select-container .ng-arrow-wrapper{margin-right:7px}[_nghost-%COMP%]     ng-select.ng-select .ng-select-container .ng-arrow-wrapper .ng-arrow{border:none;width:auto;height:auto;display:flex;text-decoration-line:none;top:0}[_nghost-%COMP%]     ng-select.ng-select .ng-select-container .ng-arrow-wrapper .ng-arrow:before{font-family:DataRails!important;content:\"\\ea15\";font-size:24px;color:#6d6e6f}[_nghost-%COMP%]     ng-select.ng-select.ng-select-opened .ng-select-container{border-radius:6px}[_nghost-%COMP%]     ng-select.ng-select.ng-select-multiple .ng-select-container{max-height:58px;height:100%}[_nghost-%COMP%]     ng-select.ng-select.ng-select-multiple .ng-select-container .ng-value-container{max-height:58px;font-size:14px;line-height:18px}[_nghost-%COMP%]     ng-select.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{color:#333;height:24px;padding:2px 16px;font-size:12px;margin:2px 4px 2px 0;background:#f0f1f4;display:flex;flex-direction:row-reverse;align-items:center;border-radius:12px}[_nghost-%COMP%]     ng-select.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value-label{line-height:20px;padding:0!important}[_nghost-%COMP%]     ng-select.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value-icon{border:none!important;padding:0!important;width:20px;display:flex;align-items:center;color:transparent;margin-left:4px}[_nghost-%COMP%]     ng-select.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value-icon:before{font-family:DataRails!important;content:\"\\ea63\";font-size:20px;color:#333}[_nghost-%COMP%]     ng-select.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value-icon, [_nghost-%COMP%]     ng-select.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value-icon:hover{background:transparent!important}[_nghost-%COMP%]     ng-select.ng-select.ng-select-disabled .ng-select-container, [_nghost-%COMP%]     ng-select.ng-select.ng-select-disabled .ng-select-container:hover, [_nghost-%COMP%]     ng-select.ng-select.ng-select-disabled .ng-select-container:focus-within{background:#f0f1f4!important;border:1px solid #aeabac!important}[_nghost-%COMP%]     ng-select.ng-select.ng-select-disabled .ng-select-container .ng-value, [_nghost-%COMP%]     ng-select.ng-select.ng-select-disabled .ng-select-container:hover .ng-value, [_nghost-%COMP%]     ng-select.ng-select.ng-select-disabled .ng-select-container:focus-within .ng-value{color:#aeabac!important}[_nghost-%COMP%]     ng-select.ng-select.ng-select-disabled .ng-select-container .ng-arrow{color:#aeabac}[_nghost-%COMP%]     ng-select.ng-select.ng-select-disabled .ng-select-container .ng-arrow:before{color:#aeabac}[_nghost-%COMP%]     ng-select.ng-select.ng-select-disabled .ng-select-container .ng-input input::placeholder{color:#aeabac}[_nghost-%COMP%]     ng-select.ng-select.ng-select-single.ng-invalid.ng-touched .ng-select-container, [_nghost-%COMP%]     ng-select.ng-select.ng-select-multiple.ng-invalid.ng-touched .ng-select-container{border-color:#bf1d30}[_nghost-%COMP%]     ng-select.ng-select--multiple-height-increased.ng-select-multiple .ng-select-container{max-height:88px}[_nghost-%COMP%]     ng-select.ng-select--multiple-height-increased.ng-select-multiple .ng-select-container .ng-value-container{max-height:88px}[_nghost-%COMP%]     ng-select.ng-select--no-value-padding .ng-select-container .ng-value-container .ng-value, [_nghost-%COMP%]     ng-select.ng-select--no-value-padding.ng-select-multiple .ng-select-container .ng-value-container .ng-value{padding:0}[_nghost-%COMP%]     ng-select.ng-select--no-value-padding .ng-select-container .ng-value-container .ng-value .ng-select-user-label, [_nghost-%COMP%]     ng-select.ng-select--no-value-padding.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-select-user-label{height:100%}.ng-invalid.ng-touched[_nghost-%COMP%]  ng-select.ng-select .ng-select-container{border-color:#bf1d30}[_nghost-%COMP%]   .dr-select__loading[_ngcontent-%COMP%]{position:relative;height:32px;width:24px}.search-input[_nghost-%COMP%]{position:relative}.search-input[_nghost-%COMP%]   .search-icon[_ngcontent-%COMP%]{position:absolute;top:4px;right:16px;color:#6d6e6f;z-index:1001}.search-input[_nghost-%COMP%]  ng-select.ng-select .ng-select-container{border-radius:16px}.search-input[_nghost-%COMP%]  ng-select.ng-select .ng-select-container .ng-arrow-wrapper{display:none!important}.search-input[_nghost-%COMP%]  ng-select.ng-select .ng-select-container .ng-clear-wrapper{display:flex;justify-content:center;align-items:center;right:40px;top:1px;width:24px;height:24px}.search-input[_nghost-%COMP%]  ng-select.ng-select .ng-select-container .ng-clear-wrapper .ng-clear{font-size:24px;font-weight:300;color:#6d6e6f}.search-input[_nghost-%COMP%]  ng-select.ng-select .ng-select-container .ng-input, .search-input[_nghost-%COMP%]  ng-select.ng-select .ng-select-container .ng-value-container{padding:0 0 0 16px!important;width:calc(100% - 63px)}.search-input[_nghost-%COMP%]  ng-select.ng-select .ng-select-container .ng-input input, .search-input[_nghost-%COMP%]  ng-select.ng-select .ng-select-container .ng-value-container input{height:100%}  ng-dropdown-panel.ng-dropdown-panel.dr-select{font-family:Poppins,sans-serif;border:1px solid #dfe0e3;border-radius:4px!important;margin:8px 0;box-shadow:0 4px 8px 1px #00000040;background-color:#fff;overflow:hidden;padding:8px 0}  ng-dropdown-panel.ng-dropdown-panel.dr-select.textView{width:auto!important}  ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option:empty{display:none}  ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option{display:flex;align-items:center;min-height:36px;padding:8px 12px;font-size:14px;line-height:22px;background:#fff}  ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option>.ng-option-label{text-overflow:ellipsis;overflow:hidden}  ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option.ng-option-marked{background:#f5f5f5}  ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option.ng-option-selected,   ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option.ng-option-selected.ng-option-marked{background:#eaeaff;color:#333}  ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option.ng-option-selected span,   ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option.ng-option-selected.ng-option-marked span{font-weight:400!important}  ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option.ng-option-disabled{cursor:default}  ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option.ng-option-disabled>div{color:#aeabac}  ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option.ng-option-disabled>div.dr-select__option-with-desc__wrapper .dr-select__option-with-desc__description{color:#aeabac}  ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option.ng-option-disabled[role=group]{font-size:14px;line-height:22px;color:#aeabac;cursor:default}  ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option.ng-option-disabled[role=group]:not(:first-of-type){border-top:1px solid #dfe0e3}  ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option.ng-option-disabled[role=group]:hover{background:#fff}  ng-dropdown-panel.ng-dropdown-panel.dr-select .dr-select__option-with-desc__wrapper{color:#333}  ng-dropdown-panel.ng-dropdown-panel.dr-select .dr-select__option-with-desc__wrapper .dr-select__option-with-desc__description{max-width:-moz-fit-content;max-width:fit-content;word-break:break-word;white-space:normal;color:#6d6e6f;font-weight:400;font-size:12px;line-height:20px}  ng-dropdown-panel.ng-dropdown-panel.dr-select.ng-option-selected .dr-select__option-with-desc__wrapper .dr-select__option-with-desc__description,   ng-dropdown-panel.ng-dropdown-panel.dr-select.ng-option-selected.ng-option-marked .dr-select__option-with-desc__wrapper .dr-select__option-with-desc__description{color:#6d6e6f}.custom-backdrop[_ngcontent-%COMP%]{position:fixed;inset:0;overflow:hidden;pointer-events:none}"] }); }
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DrSelectComponent, [{
         type: Component,
@@ -1193,7 +1277,7 @@ class DrSelectComponent {
                         useExisting: DrSelectComponent,
                         multi: true,
                     },
-                ], template: "<ng-select\n    [(ngModel)]=\"selectedItem\"\n    [items]=\"items\"\n    [bindLabel]=\"bindLabel\"\n    [bindValue]=\"bindValue\"\n    [multiple]=\"multiple\"\n    [addTag]=\"addTag\"\n    [appendTo]=\"appendTo\"\n    [clearable]=\"clearable\"\n    [searchable]=\"searchable\"\n    [hideSelected]=\"hideSelected\"\n    [placeholder]=\"placeholder\"\n    [loading]=\"loading\"\n    [loadingText]=\"loadingText\"\n    [readonly]=\"readonly\"\n    [closeOnSelect]=\"closeOnSelect\"\n    [disabled]=\"disabled\"\n    [id]=\"id\"\n    [maxSelectedItems]=\"maxSelectedItems\"\n    [keyDownFn]=\"keyDownFn\"\n    [searchFn]=\"searchFn\"\n    [isOpen]=\"(type !== 'search-input' || !!selectComponent.searchTerm?.length) && isOpen\"\n    [groupBy]=\"groupBy\"\n    [attr.autofocus]=\"autofocus\"\n    [selectOnTab]=\"selectOnTabKeyPress\"\n    (keydown.tab)=\"onTabKeypress($event)\"\n    (change)=\"onValueSelected(selectedItem)\"\n    (open)=\"open.emit($event); onDropdownOpen()\"\n    (close)=\"onClose($event)\"\n    class=\"dr-select\"\n    [class.ng-select--no-value-padding]=\"noValuePadding\"\n    [class.ng-select--multiple-height-increased]=\"multipleHeightIncreased\"\n    #selectComponent>\n    <ng-template *ngIf=\"optionHeaderTemplate\" ng-header-tmp let-item=\"item\">\n        <ng-container [ngTemplateOutlet]=\"optionHeaderTemplate\" [ngTemplateOutletContext]=\"{ item: item }\"></ng-container>\n    </ng-template>\n    <ng-template *ngIf=\"labelTemplate\" ng-label-tmp let-item=\"item\">\n        <ng-container [ngTemplateOutlet]=\"labelTemplate\" [ngTemplateOutletContext]=\"{ item: item }\"></ng-container>\n    </ng-template>\n    <ng-template *ngIf=\"multiLabelTemplate\" ng-multi-label-tmp let-items=\"items\" let-clear=\"clear\">\n        <ng-container [ngTemplateOutlet]=\"multiLabelTemplate\" [ngTemplateOutletContext]=\"{ items: items, clear: clear }\">\n        </ng-container>\n    </ng-template>\n    <ng-template *ngIf=\"optionTemplate\" ng-option-tmp let-item=\"item\" let-item$=\"item$\">\n        <ng-container [ngTemplateOutlet]=\"optionTemplate\" [ngTemplateOutletContext]=\"{ item: item, item$: item$ }\"></ng-container>\n    </ng-template>\n    <ng-template *ngIf=\"optionWithDescription\" ng-option-tmp let-item=\"item\">\n        <div class=\"dr-select__option-with-desc__wrapper\">\n            <div>{{ item.name }}</div>\n            <div class=\"dr-select__option-with-desc__description\">{{ item?.description }}</div>\n        </div>\n    </ng-template>\n    <ng-template *ngIf=\"optionFooterTemplate\" ng-footer-tmp let-item=\"item\">\n        <ng-container\n            [ngTemplateOutlet]=\"optionFooterTemplate\"\n            [ngTemplateOutletContext]=\"{ item: item, close: selectComponent.close.bind(selectComponent) }\"></ng-container>\n    </ng-template>\n    <ng-template *ngIf=\"groupBy\" ng-optgroup-tmp let-item=\"item\">\n        {{ item[groupBy] }}\n    </ng-template>\n    <ng-template ng-loadingspinner-tmp>\n        <div\n            *ngIf=\"loading\"\n            class=\"dr-select__loading\"\n            [drSpinner]=\"loading\"\n            [drSpinnerType]=\"'circle'\"\n            [drSpinnerSize]=\"'small'\"\n            [drSpinnerNoOverlay]=\"true\"></div>\n    </ng-template>\n</ng-select>\n<i *ngIf=\"type === 'search-input'\" class=\"search-icon dr-icon-search\"></i>\n", styles: [":host{width:100%;height:32px;font-family:Poppins,sans-serif}:host.textView::ng-deep{width:auto}:host.textView::ng-deep ng-select.ng-select .ng-select-container{border:none!important;cursor:pointer}:host.textView::ng-deep ng-select.ng-select .ng-select-container .ng-value-container{padding:0;color:#4646ce}:host.textView::ng-deep ng-select.ng-select .ng-select-container .ng-value-container:hover{text-decoration-line:underline}:host.textView::ng-deep ng-select.ng-select .ng-select-container .ng-arrow-wrapper{display:none}:host.no-left-border-radius ::ng-deep ng-select.ng-select .ng-select-container{border-bottom-left-radius:0!important;border-top-left-radius:0!important}:host.no-right-border-radius ::ng-deep ng-select.ng-select .ng-select-container{border-bottom-right-radius:0!important;border-top-right-radius:0!important}:host.no-right-border ::ng-deep ng-select.ng-select .ng-select-container{border-right:none!important}:host.no-left-border ::ng-deep ng-select.ng-select .ng-select-container{border-left:none!important}:host ::ng-deep ng-select.ng-select .ng-select-container{min-height:32px;height:32px;width:100%;border-radius:6px;border:1px solid #9ea1aa;box-shadow:none!important}:host ::ng-deep ng-select.ng-select .ng-select-container:hover{border-color:#4646ce}:host ::ng-deep ng-select.ng-select .ng-select-container:focus-within{border-color:#4646ce}:host ::ng-deep ng-select.ng-select .ng-select-container .ng-input{top:0!important;line-height:30px;padding:0 50px 0 8px!important;color:#333;font-size:14px;font-weight:400}:host ::ng-deep ng-select.ng-select .ng-select-container .ng-input input::placeholder{color:#6d6e6f;font-size:14px;line-height:18px}:host ::ng-deep ng-select.ng-select .ng-select-container .ng-value-container{padding:0 0 0 8px;height:100%;overflow:auto;font-size:14px;line-height:18px}:host ::ng-deep ng-select.ng-select .ng-select-container .ng-value-container .ng-input{padding:0 0 0 3px!important}:host ::ng-deep ng-select.ng-select .ng-select-container .ng-arrow-wrapper{margin-right:7px}:host ::ng-deep ng-select.ng-select .ng-select-container .ng-arrow-wrapper .ng-arrow{border:none;width:auto;height:auto;display:flex;text-decoration-line:none;top:0}:host ::ng-deep ng-select.ng-select .ng-select-container .ng-arrow-wrapper .ng-arrow:before{font-family:DataRails!important;content:\"\\ea15\";font-size:24px;color:#6d6e6f}:host ::ng-deep ng-select.ng-select.ng-select-opened .ng-select-container{border-radius:6px}:host ::ng-deep ng-select.ng-select.ng-select-multiple .ng-select-container{max-height:58px;height:100%}:host ::ng-deep ng-select.ng-select.ng-select-multiple .ng-select-container .ng-value-container{max-height:58px;font-size:14px;line-height:18px}:host ::ng-deep ng-select.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{color:#333;height:24px;padding:2px 16px;font-size:12px;margin:2px 4px 2px 0;background:#f0f1f4;display:flex;flex-direction:row-reverse;align-items:center;border-radius:12px}:host ::ng-deep ng-select.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value-label{line-height:20px;padding:0!important}:host ::ng-deep ng-select.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value-icon{border:none!important;padding:0!important;width:20px;display:flex;align-items:center;color:transparent;margin-left:4px}:host ::ng-deep ng-select.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value-icon:before{font-family:DataRails!important;content:\"\\ea61\";font-size:20px;color:#333}:host ::ng-deep ng-select.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value-icon,:host ::ng-deep ng-select.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value-icon:hover{background:transparent!important}:host ::ng-deep ng-select.ng-select.ng-select-disabled .ng-select-container,:host ::ng-deep ng-select.ng-select.ng-select-disabled .ng-select-container:hover,:host ::ng-deep ng-select.ng-select.ng-select-disabled .ng-select-container:focus-within{background:#f0f1f4!important;border:1px solid #aeabac!important}:host ::ng-deep ng-select.ng-select.ng-select-disabled .ng-select-container .ng-value,:host ::ng-deep ng-select.ng-select.ng-select-disabled .ng-select-container:hover .ng-value,:host ::ng-deep ng-select.ng-select.ng-select-disabled .ng-select-container:focus-within .ng-value{color:#aeabac!important}:host ::ng-deep ng-select.ng-select.ng-select-disabled .ng-select-container .ng-arrow{color:#aeabac}:host ::ng-deep ng-select.ng-select.ng-select-disabled .ng-select-container .ng-arrow:before{color:#aeabac}:host ::ng-deep ng-select.ng-select.ng-select-disabled .ng-select-container .ng-input input::placeholder{color:#aeabac}:host ::ng-deep ng-select.ng-select.ng-select-single.ng-invalid.ng-touched .ng-select-container,:host ::ng-deep ng-select.ng-select.ng-select-multiple.ng-invalid.ng-touched .ng-select-container{border-color:#bf1d30}:host ::ng-deep ng-select.ng-select--multiple-height-increased.ng-select-multiple .ng-select-container{max-height:88px}:host ::ng-deep ng-select.ng-select--multiple-height-increased.ng-select-multiple .ng-select-container .ng-value-container{max-height:88px}:host ::ng-deep ng-select.ng-select--no-value-padding .ng-select-container .ng-value-container .ng-value,:host ::ng-deep ng-select.ng-select--no-value-padding.ng-select-multiple .ng-select-container .ng-value-container .ng-value{padding:0}:host ::ng-deep ng-select.ng-select--no-value-padding .ng-select-container .ng-value-container .ng-value .ng-select-user-label,:host ::ng-deep ng-select.ng-select--no-value-padding.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-select-user-label{height:100%}:host.ng-invalid.ng-touched::ng-deep ng-select.ng-select .ng-select-container{border-color:#bf1d30}:host .dr-select__loading{position:relative;height:32px;width:24px}:host.search-input{position:relative}:host.search-input .search-icon{position:absolute;top:4px;right:16px;color:#6d6e6f;z-index:1001}:host.search-input::ng-deep ng-select.ng-select .ng-select-container{border-radius:16px}:host.search-input::ng-deep ng-select.ng-select .ng-select-container .ng-arrow-wrapper{display:none!important}:host.search-input::ng-deep ng-select.ng-select .ng-select-container .ng-clear-wrapper{display:flex;justify-content:center;align-items:center;right:40px;top:1px;width:24px;height:24px}:host.search-input::ng-deep ng-select.ng-select .ng-select-container .ng-clear-wrapper .ng-clear{font-size:24px;font-weight:300;color:#6d6e6f}:host.search-input::ng-deep ng-select.ng-select .ng-select-container .ng-input,:host.search-input::ng-deep ng-select.ng-select .ng-select-container .ng-value-container{padding:0 0 0 16px!important;width:calc(100% - 63px)}:host.search-input::ng-deep ng-select.ng-select .ng-select-container .ng-input input,:host.search-input::ng-deep ng-select.ng-select .ng-select-container .ng-value-container input{height:100%}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select{font-family:Poppins,sans-serif;border:1px solid #dfe0e3;border-radius:4px!important;margin:8px 0;box-shadow:0 4px 8px 1px #00000040;background-color:#fff;overflow:hidden;padding:8px 0}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select.textView{width:auto!important}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option:empty{display:none}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option{display:flex;align-items:center;min-height:36px;padding:8px 12px;font-size:14px;line-height:22px;background:#fff}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option>.ng-option-label{text-overflow:ellipsis;overflow:hidden}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option.ng-option-marked{background:#f5f5f5}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option.ng-option-selected,::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option.ng-option-selected.ng-option-marked{background:#eaeaff;color:#333}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option.ng-option-selected span,::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option.ng-option-selected.ng-option-marked span{font-weight:400!important}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option.ng-option-disabled{cursor:default}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option.ng-option-disabled>div{color:#aeabac}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option.ng-option-disabled>div.dr-select__option-with-desc__wrapper .dr-select__option-with-desc__description{color:#aeabac}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option.ng-option-disabled[role=group]{font-size:14px;line-height:22px;color:#aeabac;cursor:default}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option.ng-option-disabled[role=group]:not(:first-of-type){border-top:1px solid #dfe0e3}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option.ng-option-disabled[role=group]:hover{background:#fff}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .dr-select__option-with-desc__wrapper{color:#333}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .dr-select__option-with-desc__wrapper .dr-select__option-with-desc__description{max-width:-moz-fit-content;max-width:fit-content;word-break:break-word;white-space:normal;color:#6d6e6f;font-weight:400;font-size:12px;line-height:20px}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select.ng-option-selected .dr-select__option-with-desc__wrapper .dr-select__option-with-desc__description,::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select.ng-option-selected.ng-option-marked .dr-select__option-with-desc__wrapper .dr-select__option-with-desc__description{color:#6d6e6f}.custom-backdrop{position:fixed;inset:0;overflow:hidden;pointer-events:none}\n"] }]
+                ], template: "<ng-select\n    [(ngModel)]=\"selectedItem\"\n    [items]=\"items\"\n    [bindLabel]=\"bindLabel\"\n    [bindValue]=\"bindValue\"\n    [multiple]=\"multiple\"\n    [addTag]=\"addTag\"\n    [appendTo]=\"appendTo\"\n    [clearable]=\"clearable\"\n    [searchable]=\"searchable\"\n    [hideSelected]=\"hideSelected\"\n    [placeholder]=\"placeholder\"\n    [loading]=\"loading\"\n    [loadingText]=\"loadingText\"\n    [readonly]=\"readonly\"\n    [closeOnSelect]=\"closeOnSelect\"\n    [disabled]=\"disabled\"\n    [id]=\"id\"\n    [maxSelectedItems]=\"maxSelectedItems\"\n    [keyDownFn]=\"keyDownFn\"\n    [searchFn]=\"searchFn\"\n    [isOpen]=\"(type !== 'search-input' || !!selectComponent.searchTerm?.length) && isOpen\"\n    [groupBy]=\"groupBy\"\n    [attr.autofocus]=\"autofocus\"\n    [selectOnTab]=\"selectOnTabKeyPress\"\n    (keydown.tab)=\"onTabKeypress($event)\"\n    (change)=\"onValueSelected(selectedItem)\"\n    (open)=\"open.emit($event); onDropdownOpen()\"\n    (close)=\"onClose($event)\"\n    class=\"dr-select\"\n    [class.ng-select--no-value-padding]=\"noValuePadding\"\n    [class.ng-select--multiple-height-increased]=\"multipleHeightIncreased\"\n    #selectComponent>\n    <ng-template *ngIf=\"optionHeaderTemplate\" ng-header-tmp let-item=\"item\">\n        <ng-container [ngTemplateOutlet]=\"optionHeaderTemplate\" [ngTemplateOutletContext]=\"{ item: item }\"></ng-container>\n    </ng-template>\n    <ng-template *ngIf=\"labelTemplate\" ng-label-tmp let-item=\"item\">\n        <ng-container [ngTemplateOutlet]=\"labelTemplate\" [ngTemplateOutletContext]=\"{ item: item }\"></ng-container>\n    </ng-template>\n    <ng-template *ngIf=\"multiLabelTemplate\" ng-multi-label-tmp let-items=\"items\" let-clear=\"clear\">\n        <ng-container [ngTemplateOutlet]=\"multiLabelTemplate\" [ngTemplateOutletContext]=\"{ items: items, clear: clear }\">\n        </ng-container>\n    </ng-template>\n    <ng-template *ngIf=\"optionTemplate\" ng-option-tmp let-item=\"item\" let-item$=\"item$\">\n        <ng-container [ngTemplateOutlet]=\"optionTemplate\" [ngTemplateOutletContext]=\"{ item: item, item$: item$ }\"></ng-container>\n    </ng-template>\n    <ng-template *ngIf=\"optionWithDescription\" ng-option-tmp let-item=\"item\">\n        <div class=\"dr-select__option-with-desc__wrapper\">\n            <div>{{ item.name }}</div>\n            <div class=\"dr-select__option-with-desc__description\">{{ item?.description }}</div>\n        </div>\n    </ng-template>\n    <ng-template *ngIf=\"optionFooterTemplate\" ng-footer-tmp let-item=\"item\">\n        <ng-container\n            [ngTemplateOutlet]=\"optionFooterTemplate\"\n            [ngTemplateOutletContext]=\"{ item: item, close: selectComponent.close.bind(selectComponent) }\"></ng-container>\n    </ng-template>\n    <ng-template *ngIf=\"groupBy\" ng-optgroup-tmp let-item=\"item\">\n        {{ item[groupBy] }}\n    </ng-template>\n    <ng-template ng-loadingspinner-tmp>\n        <div\n            *ngIf=\"loading\"\n            class=\"dr-select__loading\"\n            [drSpinner]=\"loading\"\n            [drSpinnerType]=\"'circle'\"\n            [drSpinnerSize]=\"'small'\"\n            [drSpinnerNoOverlay]=\"true\"></div>\n    </ng-template>\n</ng-select>\n<i *ngIf=\"type === 'search-input'\" class=\"search-icon dr-icon-search\"></i>\n", styles: [":host{width:100%;height:32px;font-family:Poppins,sans-serif}:host.textView::ng-deep{width:auto}:host.textView::ng-deep ng-select.ng-select .ng-select-container{border:none!important;cursor:pointer}:host.textView::ng-deep ng-select.ng-select .ng-select-container .ng-value-container{padding:0;color:#4646ce}:host.textView::ng-deep ng-select.ng-select .ng-select-container .ng-value-container:hover{text-decoration-line:underline}:host.textView::ng-deep ng-select.ng-select .ng-select-container .ng-arrow-wrapper{display:none}:host.no-left-border-radius ::ng-deep ng-select.ng-select .ng-select-container{border-bottom-left-radius:0!important;border-top-left-radius:0!important}:host.no-right-border-radius ::ng-deep ng-select.ng-select .ng-select-container{border-bottom-right-radius:0!important;border-top-right-radius:0!important}:host.no-right-border ::ng-deep ng-select.ng-select .ng-select-container{border-right:none!important}:host.no-left-border ::ng-deep ng-select.ng-select .ng-select-container{border-left:none!important}:host ::ng-deep ng-select.ng-select .ng-select-container{min-height:32px;height:32px;width:100%;border-radius:6px;border:1px solid #9ea1aa;box-shadow:none!important}:host ::ng-deep ng-select.ng-select .ng-select-container:hover{border-color:#4646ce}:host ::ng-deep ng-select.ng-select .ng-select-container:focus-within{border-color:#4646ce}:host ::ng-deep ng-select.ng-select .ng-select-container .ng-input{top:0!important;line-height:30px;padding:0 50px 0 8px!important;color:#333;font-size:14px;font-weight:400}:host ::ng-deep ng-select.ng-select .ng-select-container .ng-input input::placeholder{color:#6d6e6f;font-size:14px;line-height:18px}:host ::ng-deep ng-select.ng-select .ng-select-container .ng-value-container{padding:0 0 0 8px;height:100%;overflow:auto;font-size:14px;line-height:18px}:host ::ng-deep ng-select.ng-select .ng-select-container .ng-value-container .ng-input{padding:0 0 0 3px!important}:host ::ng-deep ng-select.ng-select .ng-select-container .ng-arrow-wrapper{margin-right:7px}:host ::ng-deep ng-select.ng-select .ng-select-container .ng-arrow-wrapper .ng-arrow{border:none;width:auto;height:auto;display:flex;text-decoration-line:none;top:0}:host ::ng-deep ng-select.ng-select .ng-select-container .ng-arrow-wrapper .ng-arrow:before{font-family:DataRails!important;content:\"\\ea15\";font-size:24px;color:#6d6e6f}:host ::ng-deep ng-select.ng-select.ng-select-opened .ng-select-container{border-radius:6px}:host ::ng-deep ng-select.ng-select.ng-select-multiple .ng-select-container{max-height:58px;height:100%}:host ::ng-deep ng-select.ng-select.ng-select-multiple .ng-select-container .ng-value-container{max-height:58px;font-size:14px;line-height:18px}:host ::ng-deep ng-select.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{color:#333;height:24px;padding:2px 16px;font-size:12px;margin:2px 4px 2px 0;background:#f0f1f4;display:flex;flex-direction:row-reverse;align-items:center;border-radius:12px}:host ::ng-deep ng-select.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value-label{line-height:20px;padding:0!important}:host ::ng-deep ng-select.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value-icon{border:none!important;padding:0!important;width:20px;display:flex;align-items:center;color:transparent;margin-left:4px}:host ::ng-deep ng-select.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value-icon:before{font-family:DataRails!important;content:\"\\ea63\";font-size:20px;color:#333}:host ::ng-deep ng-select.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value-icon,:host ::ng-deep ng-select.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value-icon:hover{background:transparent!important}:host ::ng-deep ng-select.ng-select.ng-select-disabled .ng-select-container,:host ::ng-deep ng-select.ng-select.ng-select-disabled .ng-select-container:hover,:host ::ng-deep ng-select.ng-select.ng-select-disabled .ng-select-container:focus-within{background:#f0f1f4!important;border:1px solid #aeabac!important}:host ::ng-deep ng-select.ng-select.ng-select-disabled .ng-select-container .ng-value,:host ::ng-deep ng-select.ng-select.ng-select-disabled .ng-select-container:hover .ng-value,:host ::ng-deep ng-select.ng-select.ng-select-disabled .ng-select-container:focus-within .ng-value{color:#aeabac!important}:host ::ng-deep ng-select.ng-select.ng-select-disabled .ng-select-container .ng-arrow{color:#aeabac}:host ::ng-deep ng-select.ng-select.ng-select-disabled .ng-select-container .ng-arrow:before{color:#aeabac}:host ::ng-deep ng-select.ng-select.ng-select-disabled .ng-select-container .ng-input input::placeholder{color:#aeabac}:host ::ng-deep ng-select.ng-select.ng-select-single.ng-invalid.ng-touched .ng-select-container,:host ::ng-deep ng-select.ng-select.ng-select-multiple.ng-invalid.ng-touched .ng-select-container{border-color:#bf1d30}:host ::ng-deep ng-select.ng-select--multiple-height-increased.ng-select-multiple .ng-select-container{max-height:88px}:host ::ng-deep ng-select.ng-select--multiple-height-increased.ng-select-multiple .ng-select-container .ng-value-container{max-height:88px}:host ::ng-deep ng-select.ng-select--no-value-padding .ng-select-container .ng-value-container .ng-value,:host ::ng-deep ng-select.ng-select--no-value-padding.ng-select-multiple .ng-select-container .ng-value-container .ng-value{padding:0}:host ::ng-deep ng-select.ng-select--no-value-padding .ng-select-container .ng-value-container .ng-value .ng-select-user-label,:host ::ng-deep ng-select.ng-select--no-value-padding.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-select-user-label{height:100%}:host.ng-invalid.ng-touched::ng-deep ng-select.ng-select .ng-select-container{border-color:#bf1d30}:host .dr-select__loading{position:relative;height:32px;width:24px}:host.search-input{position:relative}:host.search-input .search-icon{position:absolute;top:4px;right:16px;color:#6d6e6f;z-index:1001}:host.search-input::ng-deep ng-select.ng-select .ng-select-container{border-radius:16px}:host.search-input::ng-deep ng-select.ng-select .ng-select-container .ng-arrow-wrapper{display:none!important}:host.search-input::ng-deep ng-select.ng-select .ng-select-container .ng-clear-wrapper{display:flex;justify-content:center;align-items:center;right:40px;top:1px;width:24px;height:24px}:host.search-input::ng-deep ng-select.ng-select .ng-select-container .ng-clear-wrapper .ng-clear{font-size:24px;font-weight:300;color:#6d6e6f}:host.search-input::ng-deep ng-select.ng-select .ng-select-container .ng-input,:host.search-input::ng-deep ng-select.ng-select .ng-select-container .ng-value-container{padding:0 0 0 16px!important;width:calc(100% - 63px)}:host.search-input::ng-deep ng-select.ng-select .ng-select-container .ng-input input,:host.search-input::ng-deep ng-select.ng-select .ng-select-container .ng-value-container input{height:100%}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select{font-family:Poppins,sans-serif;border:1px solid #dfe0e3;border-radius:4px!important;margin:8px 0;box-shadow:0 4px 8px 1px #00000040;background-color:#fff;overflow:hidden;padding:8px 0}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select.textView{width:auto!important}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option:empty{display:none}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option{display:flex;align-items:center;min-height:36px;padding:8px 12px;font-size:14px;line-height:22px;background:#fff}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option>.ng-option-label{text-overflow:ellipsis;overflow:hidden}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option.ng-option-marked{background:#f5f5f5}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option.ng-option-selected,::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option.ng-option-selected.ng-option-marked{background:#eaeaff;color:#333}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option.ng-option-selected span,::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option.ng-option-selected.ng-option-marked span{font-weight:400!important}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option.ng-option-disabled{cursor:default}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option.ng-option-disabled>div{color:#aeabac}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option.ng-option-disabled>div.dr-select__option-with-desc__wrapper .dr-select__option-with-desc__description{color:#aeabac}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option.ng-option-disabled[role=group]{font-size:14px;line-height:22px;color:#aeabac;cursor:default}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option.ng-option-disabled[role=group]:not(:first-of-type){border-top:1px solid #dfe0e3}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option.ng-option-disabled[role=group]:hover{background:#fff}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .dr-select__option-with-desc__wrapper{color:#333}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .dr-select__option-with-desc__wrapper .dr-select__option-with-desc__description{max-width:-moz-fit-content;max-width:fit-content;word-break:break-word;white-space:normal;color:#6d6e6f;font-weight:400;font-size:12px;line-height:20px}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select.ng-option-selected .dr-select__option-with-desc__wrapper .dr-select__option-with-desc__description,::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select.ng-option-selected.ng-option-marked .dr-select__option-with-desc__wrapper .dr-select__option-with-desc__description{color:#6d6e6f}.custom-backdrop{position:fixed;inset:0;overflow:hidden;pointer-events:none}\n"] }]
     }], function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }]; }, { type: [{
             type: Input
         }, {
@@ -1434,8 +1518,10 @@ class DrDatePickerCustomHeaderComponent {
         this.periodYearLabel = '';
         this.presetTagList = PRESET_TAGS_LIST;
         this.calendarView = CalendarView;
-        _calendar.stateChanges.pipe(takeUntil(this._destroyed)).subscribe(() => this.setPeriodLabels());
-        this.datePickerService.format$.pipe(takeUntil(this._destroyed)).subscribe((value) => {
+        this.cfr = inject(ComponentFactoryResolver);
+        this.injector = inject(Injector);
+        _calendar.stateChanges.pipe(takeUntil$1(this._destroyed)).subscribe(() => this.setPeriodLabels());
+        this.datePickerService.format$.pipe(takeUntil$1(this._destroyed)).subscribe((value) => {
             const timeframe = this.datePickerService.getTimeframe(value);
             this.selectedTimeframe = this.timeframeOptions.filter((option) => option.timeframe === timeframe)[0].value;
             _calendar.currentView = this.selectedTimeframe;
@@ -1444,7 +1530,7 @@ class DrDatePickerCustomHeaderComponent {
                 this.selectedQuarter = this.datePickerService.getQuarterAccordingToFiscalYear(this._calendar.activeDate);
             }
         });
-        _calendar.viewChanged.pipe(takeUntil(this._destroyed)).subscribe(() => {
+        _calendar.viewChanged.pipe(takeUntil$1(this._destroyed)).subscribe(() => {
             this.setPeriodLabels();
             if (_calendar.multiYearView) {
                 this.transformDateInMultiyearViewAccordingToFY();
@@ -1455,6 +1541,15 @@ class DrDatePickerCustomHeaderComponent {
                 this.datePickerService.onSameDaySelectedInCalendar$.next(date.value);
             }
         });
+        combineLatest([this.datePickerService.timeframe$, this._calendar.viewChanged.pipe(startWith$1(this._calendar.startView))])
+            .pipe(takeUntil$1(this._destroyed))
+            .subscribe(([timeframe, view]) => {
+            const selector = document.querySelector('dr-week-selector');
+            selector?.remove?.();
+            if (timeframe === TimeframeOption.WEEK && view === 'month') {
+                this.insertWeekSelector();
+            }
+        });
         this.datePickerService.calendarInstance = _calendar;
     }
     ngOnInit() {
@@ -1556,7 +1651,12 @@ class DrDatePickerCustomHeaderComponent {
         }
         return false;
     }
-    /** @nocollapse */ static { this.ɵfac = function DrDatePickerCustomHeaderComponent_Factory(t) { return new (t || DrDatePickerCustomHeaderComponent)(i0.ɵɵdirectiveInject(i1$3.MatCalendar), i0.ɵɵdirectiveInject(i1$4.DateAdapter), i0.ɵɵdirectiveInject(MAT_DATE_FORMATS), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(DrDatePickerService)); }; }
+    insertWeekSelector() {
+        const selector = this.cfr.resolveComponentFactory(WeekSelectorComponent).create(this.injector);
+        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$3.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$C, 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);
@@ -1589,11 +1689,39 @@ 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: i1$3.MatCalendar }, { type: i1$4.DateAdapter }, { type: CustomDateFormat, decorators: [{
+    }], function () { return [{ type: i5.MatCalendar }, { type: i1$3.DateAdapter }, { type: CustomDateFormat, decorators: [{
                 type: Inject,
                 args: [MAT_DATE_FORMATS]
             }] }, { type: i0.ChangeDetectorRef }, { type: DrDatePickerService }]; }, null); })();
 
+class WeekSelectionStrategy {
+    constructor(_dateAdapter) {
+        this._dateAdapter = _dateAdapter;
+    }
+    selectionFinished(date) {
+        return this._createWeekRange(date);
+    }
+    createPreview(activeDate) {
+        return this._createWeekRange(activeDate);
+    }
+    _createWeekRange(date) {
+        if (!date) {
+            return new DateRange(null, null);
+        }
+        // ISO week
+        const startDays = moment(date).diff(moment(date).startOf('isoWeek'), 'days');
+        const endDays = moment(date).diff(moment(date).endOf('isoWeek'), 'days');
+        const start = this._dateAdapter.addCalendarDays(date, -Math.abs(startDays));
+        const end = this._dateAdapter.addCalendarDays(date, Math.abs(endDays));
+        return new DateRange(start, end);
+    }
+    /** @nocollapse */ static { this.ɵfac = function WeekSelectionStrategy_Factory(t) { return new (t || WeekSelectionStrategy)(i0.ɵɵinject(i1$3.DateAdapter)); }; }
+    /** @nocollapse */ static { this.ɵprov = /** @pureOrBreakMyCode */ i0.ɵɵdefineInjectable({ token: WeekSelectionStrategy, factory: WeekSelectionStrategy.ɵfac }); }
+}
+(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(WeekSelectionStrategy, [{
+        type: Injectable
+    }], function () { return [{ type: i1$3.DateAdapter }]; }, null); })();
+
 class DrDatePickerFormatDirective {
     set datePickerFormat(format) {
         if (this.configDateParse) {
@@ -1643,6 +1771,58 @@ class DrDatePickerFormatDirective {
         }] }); })();
 
 const _c0$B = ["datePicker"];
+function DrDatePickerComponent_ng_container_1_Template(rf, ctx) { if (rf & 1) {
+    const _r5 = 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.ɵɵ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.ɵɵpipe(5, "async");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelement(6, "input", 6);
+    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.ɵɵelementEnd();
+    i0.ɵɵelementContainerEnd();
+} if (rf & 2) {
+    const _r2 = i0.ɵɵreference(4);
+    const _r3 = i0.ɵɵreference(9);
+    const ctx_r0 = 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.ɵɵadvance(1);
+    i0.ɵɵproperty("formGroup", ctx_r0.rangeForm)("rangePicker", _r3)("dateFilter", ctx_r0.dateFilter);
+    i0.ɵɵadvance(1);
+    i0.ɵɵproperty("drDatePickerFormat", i0.ɵɵpipeBind1(5, 13, ctx_r0.datePickerService.format$));
+    i0.ɵɵadvance(3);
+    i0.ɵɵproperty("drDatePickerFormat", i0.ɵɵpipeBind1(7, 15, ctx_r0.datePickerService.format$));
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("panelClass", "dr-week-datepicker")("calendarHeaderComponent", ctx_r0.customHeader);
+} }
+function DrDatePickerComponent_ng_container_3_Template(rf, ctx) { if (rf & 1) {
+    const _r13 = 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.ɵɵ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.ɵɵelementEnd();
+    i0.ɵɵelementContainerEnd();
+} if (rf & 2) {
+    const _r11 = i0.ɵɵreference(5);
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(1);
+    i0.ɵɵproperty("ngModel", i0.ɵɵpipeBind1(2, 10, ctx_r1.displayValue$))("matDatepicker", _r11)("matDatepickerFilter", ctx_r1.dateFilter)("disabled", ctx_r1.disabled)("placeholder", ctx_r1.placeholder)("drDatePickerFormat", i0.ɵɵpipeBind1(3, 12, ctx_r1.datePickerService.format$))("readonly", ctx_r1.readonly)("min", ctx_r1._min)("max", ctx_r1._max);
+    i0.ɵɵadvance(3);
+    i0.ɵɵproperty("calendarHeaderComponent", ctx_r1.customHeader);
+} }
 const noop$2 = () => { };
 class CustomDateAdapter extends MomentDateAdapter {
     getFirstDayOfWeek() {
@@ -1656,6 +1836,17 @@ class DrDatePickerComponent {
     set max(maxDate) {
         this._max = maxDate ? moment.unix(maxDate).utc() : null;
     }
+    set datePicker(value) {
+        this._datePicker = value;
+        this.datePickerService.datePickerInstance = value;
+        this._datePicker.startView = this.calendarViewsTimeframeMapping[this.datePickerService.timeframe];
+    }
+    get datePicker() {
+        return this._datePicker;
+    }
+    get active() {
+        return this.opened$.getValue();
+    }
     get innerValue() {
         return this.datePickerService.innerValue;
     }
@@ -1666,7 +1857,9 @@ class DrDatePickerComponent {
         this.cdr = cdr;
         this.dateAdapter = dateAdapter;
         this.datePickerService = datePickerService;
-        // Whether to transform date, taking end, start, middle of preiod (i.e. set middle of month if timeframe='month')
+        /**
+         * @description Whether to transform date, taking end, start, middle of period (i.e. set middle of month if timeframe='month')
+         */
         this.periodPosition = DatePickerPeriodPosition.DEFAULT;
         this.placeholder = 'Select...';
         this.fiscalYearMonthsModifier = 0;
@@ -1677,14 +1870,15 @@ class DrDatePickerComponent {
             month: 'year',
             quarter: 'none',
             day: 'month',
+            week: 'month',
         };
         this.customHeader = DrDatePickerCustomHeaderComponent;
         this.readonly = true;
         this.timeframeOption = TimeframeOption;
         this.displayValue$ = combineLatest([
-            this.datePickerService.innerValue$.pipe(distinctUntilChanged()),
-            this.datePickerService.timeframe$.pipe(distinctUntilChanged()),
-        ]).pipe(startWith([null, null]), map(([value, timeframe]) => {
+            this.datePickerService.innerValue$.pipe(distinctUntilChanged$1()),
+            this.datePickerService.timeframe$.pipe(distinctUntilChanged$1()),
+        ]).pipe(startWith$1([null, null]), map(([value, timeframe]) => {
             const valueToReturn = value?.clone();
             if (valueToReturn && this.datePickerService.isTimeframeDependingOnFY(timeframe)) {
                 this.datePickerService.addFiscalYearShiftForYear(valueToReturn);
@@ -1695,7 +1889,13 @@ class DrDatePickerComponent {
                 this.datePickerService.calendarInstance.activeDate = value;
                 this.datePickerService.calendarInstance.selected = value;
             }
-        }), shareReplay(1), takeUntil(this.destroyed$));
+        }), takeUntil$1(this.destroyed$), shareReplay(1));
+        this.opened$ = new BehaviorSubject(false);
+        this.fb = inject(FormBuilder);
+        this.rangeForm = this.fb.group({
+            start: this.fb.control(null),
+            end: this.fb.control(null),
+        });
         this.onTouchedCallback = noop$2;
         this.onChangeCallback = noop$2;
         // Should be as arrow function to avoid lose scope
@@ -1705,10 +1905,16 @@ class DrDatePickerComponent {
             }
             return true;
         };
-        this.active = false;
-        datePickerService.updatedQuarter$.pipe(takeUntil(this.destroyed$)).subscribe((value) => {
+        datePickerService.updatedQuarter$.pipe(takeUntil$1(this.destroyed$)).subscribe((value) => {
             this.valueChangedInCalendar(value);
         });
+        datePickerService.weekSelectionChange$.pipe(takeUntil$1(this.destroyed$)).subscribe(({ start, end }) => {
+            this.rangeForm.patchValue({ start, end });
+            this.valueChangedInCalendar(start);
+        });
+        this.datePickerService.innerValue$.pipe(filter(Boolean), takeUntil$1(this.destroyed$)).subscribe((value) => {
+            this.rangeForm.patchValue({ start: value.clone().startOf('isoWeek'), end: value.clone().endOf('isoWeek') });
+        });
         const dateFormatFn = this.dateAdapter.format;
         this.dateAdapter.format = (date, displayFormat) => {
             let dateToFormat = date.clone();
@@ -1721,9 +1927,7 @@ class DrDatePickerComponent {
     ngAfterViewInit() {
         this.datePickerService.fiscalYearMonthsModifier = this.fiscalYearMonthsModifier;
         this.datePickerService.fiscalYearBack = this.fiscalYearBack;
-        this.datePickerService.datePickerInstance = this.datePicker;
         this.datePickerService.datepickerFilter = this.dateFilter;
-        this.datePicker.startView = this.calendarViewsTimeframeMapping[this.datePickerService.timeframe];
     }
     ngOnDestroy() {
         this.destroyed$.next();
@@ -1748,9 +1952,10 @@ class DrDatePickerComponent {
      * Updating component inner value according to datepicker timeframe (day, month etc.)
      * and date position in period (start, end, middle)
      */
-    tryToNormalaizeTimeframe() {
+    tryToNormalizeTimeframe() {
         const timeframe = this.datePickerService.timeframe;
         const normalizedValue = this.innerValue.clone();
+        const unit = timeframe === TimeframeOption.WEEK ? 'isoWeek' : timeframe;
         switch (this.periodPosition) {
             case DatePickerPeriodPosition.START_OF_PERIOD:
                 if (this.datePickerService.timeframe === TimeframeOption.QUARTER) {
@@ -1760,7 +1965,7 @@ class DrDatePickerComponent {
                     this.datePickerService.setStartOfQuarter(normalizedValue, 1);
                 }
                 else {
-                    normalizedValue.startOf(timeframe);
+                    normalizedValue.startOf(unit);
                 }
                 break;
             case DatePickerPeriodPosition.END_OF_PERIOD:
@@ -1771,7 +1976,7 @@ class DrDatePickerComponent {
                     this.datePickerService.setEndOfQuarter(normalizedValue, 4);
                 }
                 else {
-                    normalizedValue.endOf(timeframe);
+                    normalizedValue.endOf(unit);
                 }
                 break;
             case DatePickerPeriodPosition.MIDDLE_OF_PERIOD:
@@ -1787,19 +1992,19 @@ class DrDatePickerComponent {
                     this.datePickerService.setEndOfQuarter(endOfPeriod, 4);
                 }
                 else {
-                    normalizedValue.startOf(timeframe);
-                    endOfPeriod = normalizedValue.clone().endOf(timeframe);
+                    normalizedValue.startOf(unit);
+                    endOfPeriod = normalizedValue.clone().endOf(unit);
                 }
                 const diff = endOfPeriod.diff(normalizedValue, 'seconds');
                 normalizedValue.add(diff / 2 + 1, 'seconds');
                 break;
             default:
-                normalizedValue.startOf(timeframe).set('hours', 12);
+                normalizedValue.startOf(unit).set('hours', 12);
                 break;
         }
         this.datePickerService.innerValue = normalizedValue;
     }
-    chosenPeriodHandler(chosenDate, timeframe) {
+    chosenPeriodHandler(chosenDate, timeframe, picker) {
         if (timeframe === TimeframeOption.YEAR) {
             chosenDate = this.datePickerService.addFiscalYearMonthsToDate(chosenDate);
         }
@@ -1810,7 +2015,7 @@ class DrDatePickerComponent {
         }
         else if (this.datePickerService.timeframe === timeframe) {
             this.valueChangedInCalendar(chosenDate);
-            this.datePicker.close();
+            picker.close();
         }
     }
     /**
@@ -1824,7 +2029,7 @@ class DrDatePickerComponent {
         const convertedValue = document.is_electron ? moment.unix(value) : moment.unix(value).utc();
         this.innerValue = value ? convertedValue : null;
         if (this.innerValue) {
-            this.tryToNormalaizeTimeframe();
+            this.tryToNormalizeTimeframe();
         }
         this.cdr.markForCheck();
     }
@@ -1868,7 +2073,7 @@ class DrDatePickerComponent {
         });
     }
     onOpen() {
-        this.active = true;
+        this.opened$.next(true);
     }
     onCLose() {
         if (this.innerValue) {
@@ -1879,9 +2084,9 @@ class DrDatePickerComponent {
                 this.onChangeCallback(normalizedValue);
             }
         }
-        this.active = false;
+        this.opened$.next(false);
     }
-    /** @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.ɵfac = function DrDatePickerComponent_Factory(t) { return new (t || DrDatePickerComponent)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(i1$3.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$B, 5);
         } if (rf & 2) {
@@ -1892,34 +2097,32 @@ class DrDatePickerComponent {
         } }, inputs: { format: "format", min: "min", max: "max", periodPosition: "periodPosition", placeholder: "placeholder", disabled: "disabled", fiscalYearMonthsModifier: "fiscalYearMonthsModifier", fiscalYearBack: "fiscalYearBack", datepickerFilter: "datepickerFilter" }, 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: 6, vars: 14, consts: [[1, "dr-icon-date"], [3, "ngModel", "matDatepicker", "matDatepickerFilter", "disabled", "placeholder", "drDatePickerFormat", "readonly", "min", "max", "ngModelChange", "click"], [3, "calendarHeaderComponent", "yearSelected", "monthSelected", "opened", "closed"], ["datePicker", ""]], template: function DrDatePickerComponent_Template(rf, ctx) { if (rf & 1) {
-            const _r1 = i0.ɵɵgetCurrentView();
-            i0.ɵɵelement(0, "i", 0);
-            i0.ɵɵelementStart(1, "input", 1);
-            i0.ɵɵlistener("ngModelChange", function DrDatePickerComponent_Template_input_ngModelChange_1_listener($event) { return ctx.valueChangedInCalendar($event); })("click", function DrDatePickerComponent_Template_input_click_1_listener() { i0.ɵɵrestoreView(_r1); const _r0 = i0.ɵɵreference(5); return i0.ɵɵresetView(_r0.open()); });
-            i0.ɵɵpipe(2, "async");
-            i0.ɵɵpipe(3, "async");
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(4, "mat-datepicker", 2, 3);
-            i0.ɵɵlistener("yearSelected", function DrDatePickerComponent_Template_mat_datepicker_yearSelected_4_listener($event) { return ctx.chosenPeriodHandler($event, ctx.timeframeOption.YEAR); })("monthSelected", function DrDatePickerComponent_Template_mat_datepicker_monthSelected_4_listener($event) { return ctx.chosenPeriodHandler($event, ctx.timeframeOption.MONTH); })("opened", function DrDatePickerComponent_Template_mat_datepicker_opened_4_listener() { return ctx.onOpen(); })("closed", function DrDatePickerComponent_Template_mat_datepicker_closed_4_listener() { return ctx.onCLose(); });
+            ]), 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, "panelClass", "calendarHeaderComponent", "yearSelected", "monthSelected", "opened", "closed"], ["datePicker", ""], [3, "ngModel", "matDatepicker", "matDatepickerFilter", "disabled", "placeholder", "drDatePickerFormat", "readonly", "min", "max", "ngModelChange", "click"], [3, "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.ɵɵtemplate(1, DrDatePickerComponent_ng_container_1_Template, 10, 17, "ng-container", 1);
+            i0.ɵɵpipe(2, "async");
+            i0.ɵɵtemplate(3, DrDatePickerComponent_ng_container_3_Template, 6, 14, "ng-container", 1);
+            i0.ɵɵpipe(4, "async");
         } if (rf & 2) {
-            const _r0 = i0.ɵɵreference(5);
             i0.ɵɵadvance(1);
-            i0.ɵɵproperty("ngModel", i0.ɵɵpipeBind1(2, 10, ctx.displayValue$))("matDatepicker", _r0)("matDatepickerFilter", ctx.dateFilter)("disabled", ctx.disabled)("placeholder", ctx.placeholder)("drDatePickerFormat", i0.ɵɵpipeBind1(3, 12, ctx.datePickerService.format$))("readonly", ctx.readonly)("min", ctx._min)("max", ctx._max);
-            i0.ɵɵadvance(3);
-            i0.ɵɵproperty("calendarHeaderComponent", ctx.customHeader);
-        } }, dependencies: [i1$2.DefaultValueAccessor, i1$2.NgControlStatus, i1$2.NgModel, i1$3.MatDatepicker, i1$3.MatDatepickerInput, 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:\"\\ea15\";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}  .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}"], changeDetection: 0 }); }
+            i0.ɵɵproperty("ngIf", i0.ɵɵpipeBind1(2, 2, 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:\"\\ea15\";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 }); }
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DrDatePickerComponent, [{
         type: Component,
         args: [{ selector: 'dr-date-picker', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                     { provide: NG_VALUE_ACCESSOR, useExisting: DrDatePickerComponent, multi: true },
                     { provide: DateAdapter, useClass: CustomDateAdapter },
+                    { provide: MAT_DATE_RANGE_SELECTION_STRATEGY, useClass: WeekSelectionStrategy },
                     DrDatePickerService,
-                ], template: "<i class=\"dr-icon-date\"></i>\n<input\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<mat-datepicker\n    #datePicker\n    [calendarHeaderComponent]=\"customHeader\"\n    (yearSelected)=\"chosenPeriodHandler($event, timeframeOption.YEAR)\"\n    (monthSelected)=\"chosenPeriodHandler($event, timeframeOption.MONTH)\"\n    (opened)=\"onOpen()\"\n    (closed)=\"onCLose()\">\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:\"\\ea15\";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}::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}\n"] }]
-    }], function () { return [{ type: i0.ChangeDetectorRef }, { type: i1$4.DateAdapter }, { type: DrDatePickerService }]; }, { format: [{
+                ], template: "<i class=\"dr-icon-date\" (click)=\"datePicker.open()\"></i>\n\n<ng-container *ngIf=\"(datePickerService.timeframe$ | async) === 'week'\">\n    <input\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        [panelClass]=\"'dr-week-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    </mat-date-range-picker>\n</ng-container>\n\n<ng-container *ngIf=\"(datePickerService.timeframe$ | async) !== 'week'\">\n    <input\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        [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:\"\\ea15\";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"] }]
+    }], function () { return [{ type: i0.ChangeDetectorRef }, { type: i1$3.DateAdapter }, { type: DrDatePickerService }]; }, { format: [{
             type: Input
         }], min: [{
             type: Input
@@ -3038,7 +3241,7 @@ class DrModelDebounceChangeDirective {
     }
     ngOnInit() {
         this.subscription = this.ngModel.control.valueChanges
-            .pipe(skip(1), debounceTime(this.debounce), filter((value) => value !== this.previousValue), distinctUntilChanged())
+            .pipe(skip(1), debounceTime(this.debounce), filter((value) => value !== this.previousValue), distinctUntilChanged$1())
             .subscribe((value) => {
             this.previousValue = value;
             this.ngModelDebounceChange.emit(value);
@@ -3311,7 +3514,7 @@ class DrInputComponent {
             i0.ɵɵproperty("ngIf", ctx.type === "search");
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("ngIf", ctx._buttonOptions.show || ctx._buttonOptions.showOnFocus && ctx._buttonOptions.focusSet);
-        } }, dependencies: [i1$5.NgxMaskDirective, i1$2.DefaultValueAccessor, i1$2.NgControlStatus, i1$2.MinLengthValidator, i1$2.MaxLengthValidator, i1$2.NgModel, i1.NgIf, DrModelDebounceChangeDirective], 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:#fff;border:1px solid #9ea1aa;border-radius:6px;color:#333;padding:0 8px;overflow:hidden;outline:none}[_nghost-%COMP%]:hover{border-color:#4646ce}[_nghost-%COMP%]:focus-within{border-color:#4646ce!important;color:#333}.disabled[_nghost-%COMP%]{pointer-events:none;color:#aeabac;border-color:#aeabac;background:#f0f1f4}.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%]   input[_ngcontent-%COMP%]{display:flex;font-size:14px;flex-grow:1;height:100%;border:none;padding:4px 0;text-align:left;box-sizing:border-box;outline:none}[_nghost-%COMP%]   input[_ngcontent-%COMP%]::placeholder{color:#6d6e6f;font-size:14px;line-height:18px}[_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%]   .clear-icon[_ngcontent-%COMP%]{visibility:hidden}.clearable[_nghost-%COMP%]   .clear-icon[_ngcontent-%COMP%], .ng-touched.ng-invalid[_nghost-%COMP%]   .clear-icon[_ngcontent-%COMP%]{visibility:visible;content:url('data:image/svg+xml; utf8, <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.91783 5.00001L9.03353 1.88395C9.11924 1.79818 9.16651 1.68374 9.16665 1.56171C9.16665 1.43962 9.11937 1.32504 9.03353 1.2394L8.76047 0.966415C8.67463 0.880433 8.56023 0.833344 8.43808 0.833344C8.31612 0.833344 8.20166 0.880433 8.11582 0.966415L5.00013 4.08227L1.88428 0.966415C1.79858 0.880433 1.68404 0.833344 1.56196 0.833344C1.44001 0.833344 1.32556 0.880433 1.23985 0.966415L0.966646 1.2394C0.788869 1.41719 0.788869 1.70637 0.966646 1.88395L4.08242 5.00001L0.966646 8.11593C0.880873 8.20184 0.833677 8.31628 0.833677 8.43831C0.833677 8.56034 0.880873 8.67478 0.966646 8.76062L1.23978 9.03361C1.32548 9.11952 1.44 9.16668 1.56188 9.16668C1.68397 9.16668 1.7985 9.11952 1.88421 9.03361L5.00005 5.91769L8.11575 9.03361C8.20159 9.11952 8.31605 9.16668 8.438 9.16668H8.43815C8.56017 9.16668 8.67456 9.11952 8.7604 9.03361L9.03346 8.76062C9.11916 8.67484 9.16643 8.56034 9.16643 8.43831C9.16643 8.31628 9.11916 8.20184 9.03346 8.116L5.91783 5.00001Z\" fill=\"%2351566F\"/></svg> ');margin:auto 0 auto 8px;cursor:pointer}[_nghost-%COMP%]   span[_ngcontent-%COMP%] + span[_ngcontent-%COMP%], [_nghost-%COMP%]   span[_ngcontent-%COMP%] + img[_ngcontent-%COMP%]{margin-left:0}.search-type[_nghost-%COMP%]{padding:0 16px;border-radius:16px}.search-type[_nghost-%COMP%]   .search-icon[_ngcontent-%COMP%]{content:url('data:image/svg+xml; utf8, <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M11.5816 10.2097C11.4878 10.1157 11.3605 10.0629 11.2277 10.0629H10.8175C10.7473 10.0629 10.6799 10.035 10.6303 9.98534C10.5322 9.88724 10.527 9.73044 10.6132 9.62178C11.4154 8.6112 11.8925 7.33534 11.8925 5.94625C11.8925 2.66209 9.23042 0 5.94625 0C2.66209 0 0 2.66209 0 5.94625C0 9.23042 2.66209 11.8925 5.94625 11.8925C7.33523 11.8925 8.611 11.4155 9.62155 10.6172C9.7304 10.5312 9.88711 10.5366 9.9852 10.6347C10.0349 10.6845 10.0629 10.7519 10.0629 10.8223V11.2277C10.0629 11.3605 10.1157 11.4878 10.2097 11.5816L14.2834 15.6472C14.4787 15.8421 14.795 15.8419 14.9901 15.6468L15.6468 14.9901C15.8419 14.795 15.8421 14.4787 15.6472 14.2834L11.5816 10.2097ZM5.94625 10.0629C3.67296 10.0629 1.82962 8.21955 1.82962 5.94625C1.82962 3.67296 3.67296 1.82962 5.94625 1.82962C8.21955 1.82962 10.0629 3.67296 10.0629 5.94625C10.0629 8.21955 8.21955 10.0629 5.94625 10.0629Z\" fill=\"%23BCBCBC\"/></svg> ');margin:auto 0 auto 8px;cursor:pointer}.search-type.clearable[_nghost-%COMP%]   .search-icon[_ngcontent-%COMP%]{margin-left:26px}.search-type.clearable[_nghost-%COMP%]   .clear-icon[_ngcontent-%COMP%] + .search-icon[_ngcontent-%COMP%]{margin-left:8px}.search-type-mini[_nghost-%COMP%]{width:200px;min-height:28px;height:28px}.with-button[_nghost-%COMP%]{padding-right:0}.with-button[_nghost-%COMP%]   button[_ngcontent-%COMP%]{color:#fff;background:#4646ce;height:100%;width:auto;padding:0 8px;display:flex;align-items:center;border:none;border-left:1px solid #9ea1aa}.with-button.disabled[_nghost-%COMP%]   button[_ngcontent-%COMP%]{color:#aeabac;background:#f0f1f4;border-left:1px solid #aeabac}[_nghost-%COMP%]     img[prefixIcon], [_nghost-%COMP%]     img[suffixIcon], [_nghost-%COMP%]     i[prefixIcon], [_nghost-%COMP%]     i[suffixIcon]{position:relative;margin:auto 8px}[_nghost-%COMP%]     img[prefixIcon], [_nghost-%COMP%]     i[prefixIcon]{margin-left:0}[_nghost-%COMP%]     img[suffixIcon], [_nghost-%COMP%]     i[suffixIcon]{margin-right:0}"], changeDetection: 0 }); }
+        } }, dependencies: [i1$4.NgxMaskDirective, i1$2.DefaultValueAccessor, i1$2.NgControlStatus, i1$2.MinLengthValidator, i1$2.MaxLengthValidator, i1$2.NgModel, i1.NgIf, DrModelDebounceChangeDirective], 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:#fff;border:1px solid #9ea1aa;border-radius:6px;color:#333;padding:0 8px;overflow:hidden;outline:none}[_nghost-%COMP%]:hover{border-color:#4646ce}[_nghost-%COMP%]:focus-within{border-color:#4646ce!important;color:#333}.disabled[_nghost-%COMP%]{pointer-events:none;color:#aeabac;border-color:#aeabac;background:#f0f1f4}.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%]   input[_ngcontent-%COMP%]{display:flex;font-size:14px;flex-grow:1;height:100%;border:none;padding:4px 0;text-align:left;box-sizing:border-box;outline:none}[_nghost-%COMP%]   input[_ngcontent-%COMP%]::placeholder{color:#6d6e6f;font-size:14px;line-height:18px}[_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%]   .clear-icon[_ngcontent-%COMP%]{visibility:hidden}.clearable[_nghost-%COMP%]   .clear-icon[_ngcontent-%COMP%], .ng-touched.ng-invalid[_nghost-%COMP%]   .clear-icon[_ngcontent-%COMP%]{visibility:visible;content:url('data:image/svg+xml; utf8, <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.91783 5.00001L9.03353 1.88395C9.11924 1.79818 9.16651 1.68374 9.16665 1.56171C9.16665 1.43962 9.11937 1.32504 9.03353 1.2394L8.76047 0.966415C8.67463 0.880433 8.56023 0.833344 8.43808 0.833344C8.31612 0.833344 8.20166 0.880433 8.11582 0.966415L5.00013 4.08227L1.88428 0.966415C1.79858 0.880433 1.68404 0.833344 1.56196 0.833344C1.44001 0.833344 1.32556 0.880433 1.23985 0.966415L0.966646 1.2394C0.788869 1.41719 0.788869 1.70637 0.966646 1.88395L4.08242 5.00001L0.966646 8.11593C0.880873 8.20184 0.833677 8.31628 0.833677 8.43831C0.833677 8.56034 0.880873 8.67478 0.966646 8.76062L1.23978 9.03361C1.32548 9.11952 1.44 9.16668 1.56188 9.16668C1.68397 9.16668 1.7985 9.11952 1.88421 9.03361L5.00005 5.91769L8.11575 9.03361C8.20159 9.11952 8.31605 9.16668 8.438 9.16668H8.43815C8.56017 9.16668 8.67456 9.11952 8.7604 9.03361L9.03346 8.76062C9.11916 8.67484 9.16643 8.56034 9.16643 8.43831C9.16643 8.31628 9.11916 8.20184 9.03346 8.116L5.91783 5.00001Z\" fill=\"%2351566F\"/></svg> ');margin:auto 0 auto 8px;cursor:pointer}[_nghost-%COMP%]   span[_ngcontent-%COMP%] + span[_ngcontent-%COMP%], [_nghost-%COMP%]   span[_ngcontent-%COMP%] + img[_ngcontent-%COMP%]{margin-left:0}.search-type[_nghost-%COMP%]{padding:0 16px;border-radius:16px}.search-type[_nghost-%COMP%]   .search-icon[_ngcontent-%COMP%]{content:url('data:image/svg+xml; utf8, <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M11.5816 10.2097C11.4878 10.1157 11.3605 10.0629 11.2277 10.0629H10.8175C10.7473 10.0629 10.6799 10.035 10.6303 9.98534C10.5322 9.88724 10.527 9.73044 10.6132 9.62178C11.4154 8.6112 11.8925 7.33534 11.8925 5.94625C11.8925 2.66209 9.23042 0 5.94625 0C2.66209 0 0 2.66209 0 5.94625C0 9.23042 2.66209 11.8925 5.94625 11.8925C7.33523 11.8925 8.611 11.4155 9.62155 10.6172C9.7304 10.5312 9.88711 10.5366 9.9852 10.6347C10.0349 10.6845 10.0629 10.7519 10.0629 10.8223V11.2277C10.0629 11.3605 10.1157 11.4878 10.2097 11.5816L14.2834 15.6472C14.4787 15.8421 14.795 15.8419 14.9901 15.6468L15.6468 14.9901C15.8419 14.795 15.8421 14.4787 15.6472 14.2834L11.5816 10.2097ZM5.94625 10.0629C3.67296 10.0629 1.82962 8.21955 1.82962 5.94625C1.82962 3.67296 3.67296 1.82962 5.94625 1.82962C8.21955 1.82962 10.0629 3.67296 10.0629 5.94625C10.0629 8.21955 8.21955 10.0629 5.94625 10.0629Z\" fill=\"%23BCBCBC\"/></svg> ');margin:auto 0 auto 8px;cursor:pointer}.search-type.clearable[_nghost-%COMP%]   .search-icon[_ngcontent-%COMP%]{margin-left:26px}.search-type.clearable[_nghost-%COMP%]   .clear-icon[_ngcontent-%COMP%] + .search-icon[_ngcontent-%COMP%]{margin-left:8px}.search-type-mini[_nghost-%COMP%]{width:200px;min-height:28px;height:28px}.with-button[_nghost-%COMP%]{padding-right:0}.with-button[_nghost-%COMP%]   button[_ngcontent-%COMP%]{color:#fff;background:#4646ce;height:100%;width:auto;padding:0 8px;display:flex;align-items:center;border:none;border-left:1px solid #9ea1aa}.with-button.disabled[_nghost-%COMP%]   button[_ngcontent-%COMP%]{color:#aeabac;background:#f0f1f4;border-left:1px solid #aeabac}[_nghost-%COMP%]     img[prefixIcon], [_nghost-%COMP%]     img[suffixIcon], [_nghost-%COMP%]     i[prefixIcon], [_nghost-%COMP%]     i[suffixIcon]{position:relative;margin:auto 8px}[_nghost-%COMP%]     img[prefixIcon], [_nghost-%COMP%]     i[prefixIcon]{margin-left:0}[_nghost-%COMP%]     img[suffixIcon], [_nghost-%COMP%]     i[suffixIcon]{margin-right:0}"], changeDetection: 0 }); }
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DrInputComponent, [{
         type: Component,
@@ -4159,12 +4362,12 @@ class RadioGroupComponent {
         // last option will stay selected.
         this.updateNames();
         this.radios.changes
-            .pipe(startWith(this.radios), 
+            .pipe(startWith$1(this.radios), 
         // 'changes' emit during change detection run and we can't update
         // option properties right of since they already was initialized.
         // Instead we schedule microtask to update radios after change detection
         // run is finished and trigger one more change detection run.
-        switchMap((radios) => from(Promise.resolve(radios))), takeUntil(this.destroy$))
+        switchMap((radios) => from(Promise.resolve(radios))), takeUntil$1(this.destroy$))
             .subscribe(() => this.updateAndSubscribeToRadios());
     }
     ngOnDestroy() {
@@ -4211,7 +4414,7 @@ class RadioGroupComponent {
             return;
         }
         merge$1(...this.radios.map((radio) => radio.valueChange))
-            .pipe(takeUntil(merge$1(this.radios.changes, this.destroy$)))
+            .pipe(takeUntil$1(merge$1(this.radios.changes, this.destroy$)))
             .subscribe((value) => {
             this.writeValue(value);
             this.propagateValue(value);
@@ -4228,7 +4431,7 @@ class RadioGroupComponent {
         }
         const hostElement = this.hostElement.nativeElement;
         fromEvent(hostElement, 'focusin')
-            .pipe(filter((event) => hostElement.contains(event.target)), switchMap(() => merge$1(fromEvent(this.document, 'focusin'), fromEvent(this.document, 'click'))), filter((event) => !hostElement.contains(event.target)), takeUntil(merge$1(this.radios.changes, this.destroy$)))
+            .pipe(filter((event) => hostElement.contains(event.target)), switchMap(() => merge$1(fromEvent(this.document, 'focusin'), fromEvent(this.document, 'click'))), filter((event) => !hostElement.contains(event.target)), takeUntil$1(merge$1(this.radios.changes, this.destroy$)))
             .subscribe(() => this.onTouched());
     }
     updateAndMarkForCheckRadios(updateFn) {
@@ -4522,7 +4725,6 @@ class DrDatePickerWithTimeframeComponent extends DrDatePickerComponent {
         this.datepickerTooltipPosition = TooltipPosition.TOP;
         this.datepickerTooltipTimeout = 0;
         this.isOpen = false;
-        // eslint-disable-next-line
         this.onChangeFormat = new EventEmitter();
         this.onChangePresetTag = new EventEmitter();
         this.pagingSetup = {
@@ -4535,25 +4737,25 @@ class DrDatePickerWithTimeframeComponent extends DrDatePickerComponent {
         this.isNextDateDisabled = false;
         this.isPrevDateDisabled = false;
         this.onChangeDebounced$ = new Subject();
-        this.displayedFormattedValue$ = this.displayValue$.pipe(takeUntil(this.destroyed$), map((value) => {
+        this.displayedFormattedValue$ = this.displayValue$.pipe(takeUntil$1(this.destroyed$), map((value) => {
             if (!value)
                 return this.placeholder;
             return (this.datePickerService.getDisplayPrefix() +
                 this.dateAdapter.format(value, this.datePickerService.getConfiguredFormat(this.datePickerService.timeframe)));
         }));
         datePickerService.isTimeframeSelectionEnabled = true;
-        datePickerService.format$.pipe(takeUntil(this.destroyed$)).subscribe((value) => {
+        datePickerService.format$.pipe(takeUntil$1(this.destroyed$)).subscribe((value) => {
             this.onChangeFormat.emit(datePickerService.normalizeValue(value));
         });
-        datePickerService.presetTag$.pipe(takeUntil(this.destroyed$)).subscribe((value) => {
+        datePickerService.presetTag$.pipe(takeUntil$1(this.destroyed$)).subscribe((value) => {
             let tagObj = PRESET_TAGS_LIST.find((val) => val?.key === value);
             this.presetTagSelected = tagObj?.label;
             this.onChangePresetTag.emit(value);
         });
-        this.datePickerService.onSameDaySelectedInCalendar$.pipe(takeUntil(this.destroyed$)).subscribe((value) => {
+        this.datePickerService.onSameDaySelectedInCalendar$.pipe(takeUntil$1(this.destroyed$)).subscribe((value) => {
             this.setValueFromMoment(value);
         });
-        datePickerService.updatedDateAndClose$.pipe(takeUntil(this.destroyed$)).subscribe((value) => {
+        datePickerService.updatedDateAndClose$.pipe(takeUntil$1(this.destroyed$)).subscribe((value) => {
             if (value) {
                 this.setValueFromMoment(value);
             }
@@ -4567,7 +4769,7 @@ class DrDatePickerWithTimeframeComponent extends DrDatePickerComponent {
         this.datePickerService.isTimeframeSelectionEnabled = this.canSelectTimeframe;
         this.cdr.markForCheck();
         if (this.paginationDebounce) {
-            this.onChangeDebounced$.pipe(takeUntil(this.destroyed$), debounceTime(this.paginationDebounce)).subscribe((value) => {
+            this.onChangeDebounced$.pipe(takeUntil$1(this.destroyed$), debounceTime(this.paginationDebounce)).subscribe((value) => {
                 this.onChangeCallback(value);
             });
         }
@@ -4629,7 +4831,7 @@ class DrDatePickerWithTimeframeComponent extends DrDatePickerComponent {
         this.isNextDateDisabled = this._max && nextValue && nextValue.unix() > this._max.unix();
         this.isPrevDateDisabled = this._min && prevValue && prevValue.unix() < this._min.unix();
     }
-    /** @nocollapse */ static { this.ɵfac = function DrDatePickerWithTimeframeComponent_Factory(t) { return new (t || DrDatePickerWithTimeframeComponent)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(i1$4.DateAdapter), i0.ɵɵdirectiveInject(DrDatePickerService)); }; }
+    /** @nocollapse */ static { this.ɵfac = function DrDatePickerWithTimeframeComponent_Factory(t) { return new (t || DrDatePickerWithTimeframeComponent)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(i1$3.DateAdapter), i0.ɵɵdirectiveInject(DrDatePickerService)); }; }
     /** @nocollapse */ static { this.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: DrDatePickerWithTimeframeComponent, selectors: [["dr-date-picker-with-timeframe"]], hostVars: 2, hostBindings: function DrDatePickerWithTimeframeComponent_HostBindings(rf, ctx) { if (rf & 2) {
             i0.ɵɵclassProp("dr-date-picker-on-dashboard", ctx.isDashboardClassDisplayed);
         } }, inputs: { isDashboardDatepicker: "isDashboardDatepicker", dateFormatConfig: "dateFormatConfig", canSelectTimeframe: "canSelectTimeframe", availableTimeframes: "availableTimeframes", paginationDebounce: "paginationDebounce", isUsingDateTagPresets: "isUsingDateTagPresets", presetTag: "presetTag", datepickerTooltip: "datepickerTooltip", datepickerTooltipPosition: "datepickerTooltipPosition", datepickerTooltipTimeout: "datepickerTooltipTimeout", isOpen: "isOpen" }, outputs: { onChangeFormat: "onChangeFormat", onChangePresetTag: "onChangePresetTag" }, features: [i0.ɵɵProvidersFeature([
@@ -4653,7 +4855,7 @@ class DrDatePickerWithTimeframeComponent extends DrDatePickerComponent {
             i0.ɵɵelementEnd()();
             i0.ɵɵtemplate(11, DrDatePickerWithTimeframeComponent_dr_button_11_Template, 1, 1, "dr-button", 8);
             i0.ɵɵelementStart(12, "mat-datepicker", 9, 10);
-            i0.ɵɵlistener("yearSelected", function DrDatePickerWithTimeframeComponent_Template_mat_datepicker_yearSelected_12_listener($event) { return ctx.chosenPeriodHandler($event, ctx.timeframeOption.YEAR); })("monthSelected", function DrDatePickerWithTimeframeComponent_Template_mat_datepicker_monthSelected_12_listener($event) { return ctx.chosenPeriodHandler($event, ctx.timeframeOption.MONTH); })("opened", function DrDatePickerWithTimeframeComponent_Template_mat_datepicker_opened_12_listener() { return ctx.onOpen(); })("closed", function DrDatePickerWithTimeframeComponent_Template_mat_datepicker_closed_12_listener() { return ctx.onCLose(); });
+            i0.ɵɵlistener("yearSelected", function DrDatePickerWithTimeframeComponent_Template_mat_datepicker_yearSelected_12_listener($event) { i0.ɵɵrestoreView(_r12); const _r6 = i0.ɵɵreference(13); return i0.ɵɵresetView(ctx.chosenPeriodHandler($event, ctx.timeframeOption.YEAR, _r6)); })("monthSelected", function DrDatePickerWithTimeframeComponent_Template_mat_datepicker_monthSelected_12_listener($event) { i0.ɵɵrestoreView(_r12); const _r6 = i0.ɵɵreference(13); return i0.ɵɵresetView(ctx.chosenPeriodHandler($event, ctx.timeframeOption.MONTH, _r6)); })("opened", function DrDatePickerWithTimeframeComponent_Template_mat_datepicker_opened_12_listener() { return ctx.onOpen(); })("closed", function DrDatePickerWithTimeframeComponent_Template_mat_datepicker_closed_12_listener() { return ctx.onCLose(); });
             i0.ɵɵelementEnd();
         } if (rf & 2) {
             const _r2 = i0.ɵɵreference(7);
@@ -4671,7 +4873,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: [i1$2.DefaultValueAccessor, i1$2.NgControlStatus, i1$2.NgModel, i1.NgIf, i1.NgTemplateOutlet, i1$3.MatDatepicker, i1$3.MatDatepickerInput, DrTooltipDirective, DrButtonComponent, 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:\"\\ea15\";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}  .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}[_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}  .date-picker-preset-tag .dr-datepicker-preset-date__tags__tag{font-size:10px}}"], changeDetection: 0 }); }
+        } }, dependencies: [i1$2.DefaultValueAccessor, i1$2.NgControlStatus, i1$2.NgModel, i1.NgIf, i1.NgTemplateOutlet, i5.MatDatepicker, i5.MatDatepickerInput, DrTooltipDirective, DrButtonComponent, 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:\"\\ea15\";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}  .date-picker-preset-tag .dr-datepicker-preset-date__tags__tag{font-size:10px}}"], changeDetection: 0 }); }
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DrDatePickerWithTimeframeComponent, [{
         type: Component,
@@ -4679,8 +4881,8 @@ 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<mat-datepicker\n    #datePicker\n    class=\"dr-timeframe-datepicker\"\n    [calendarHeaderComponent]=\"customHeader\"\n    (yearSelected)=\"chosenPeriodHandler($event, timeframeOption.YEAR)\"\n    (monthSelected)=\"chosenPeriodHandler($event, timeframeOption.MONTH)\"\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:\"\\ea15\";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}::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}: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}::ng-deep .date-picker-preset-tag .dr-datepicker-preset-date__tags__tag{font-size:10px}}\n"] }]
-    }], function () { return [{ type: i0.ChangeDetectorRef }, { type: i1$4.DateAdapter }, { type: DrDatePickerService }]; }, { isDashboardClassDisplayed: [{
+                ], 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:\"\\ea15\";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}::ng-deep .date-picker-preset-tag .dr-datepicker-preset-date__tags__tag{font-size:10px}}\n"] }]
+    }], function () { return [{ type: i0.ChangeDetectorRef }, { type: i1$3.DateAdapter }, { type: DrDatePickerService }]; }, { isDashboardClassDisplayed: [{
             type: HostBinding,
             args: ['class.dr-date-picker-on-dashboard']
         }], isDashboardDatepicker: [{
@@ -5441,7 +5643,7 @@ class DrChatFormComponent {
     getSendButtonPosition(textAreaElement) {
         return `top: calc(${this.getTextAreaHeight(textAreaElement)} - var(--send-button-offset));`;
     }
-    /** @nocollapse */ static { this.ɵfac = function DrChatFormComponent_Factory(t) { return new (t || DrChatFormComponent)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(i1$6.DomSanitizer)); }; }
+    /** @nocollapse */ static { this.ɵfac = function DrChatFormComponent_Factory(t) { return new (t || DrChatFormComponent)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(i1$5.DomSanitizer)); }; }
     /** @nocollapse */ static { this.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: DrChatFormComponent, selectors: [["dr-chat-form"]], hostVars: 2, hostBindings: function DrChatFormComponent_HostBindings(rf, ctx) { if (rf & 1) {
             i0.ɵɵlistener("drop", function DrChatFormComponent_drop_HostBindingHandler($event) { return ctx.onDrop($event); })("dragover", function DrChatFormComponent_dragover_HostBindingHandler($event) { return ctx.onDragOver($event); })("dragleave", function DrChatFormComponent_dragleave_HostBindingHandler($event) { return ctx.onDragLeave($event); });
         } if (rf & 2) {
@@ -5479,7 +5681,7 @@ class DrChatFormComponent {
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DrChatFormComponent, [{
         type: Component,
         args: [{ selector: 'dr-chat-form', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"dropped-files\" *ngIf=\"droppedFiles?.length\">\n    <div class=\"dropped-files__item\" *ngFor=\"let file of droppedFiles\">\n        <div class=\"dropped-files__item__preview\" [style.background-image]=\"file.urlStyle || 'none'\">\n            <i class=\"dr-icon-file\" *ngIf=\"!file.urlStyle\"></i>\n        </div>\n        <div class=\"dropped-files__item__name\">{{ file.name }}</div>\n        <i class=\"dropped-files__item__remove dr-icon-exit\" (click)=\"removeFile(file)\"></i>\n    </div>\n</div>\n<div class=\"message-row\">\n    <div\n        class=\"message-row__input\"\n        [ngClass]=\"{ 'message-row__input--focused': inputFocus, 'message-row__input--filled': !!message?.length }\">\n        <textarea\n            #textAreaElement\n            (focus)=\"inputFocus = true\"\n            (blur)=\"inputFocus = false\"\n            (mouseenter)=\"inputHover = true\"\n            (mouseleave)=\"inputHover = false\"\n            [(ngModel)]=\"message\"\n            [rows]=\"1\"\n            [style]=\"getTextAreaHeight(textAreaElement)\"\n            (ngModelChange)=\"onModelChange($event)\"\n            type=\"text\"\n            placeholder=\"{{ fileOver ? dropFilePlaceholder : messagePlaceholder }}\"\n            (keydown.enter)=\"sendMessage($event)\">\n        </textarea>\n        <i\n            *ngIf=\"!waitForReply\"\n            [style]=\"getSendButtonPosition(textAreaElement)\"\n            (click)=\"sendMessage($event)\"\n            class=\"dr-icon-notify send-button\"></i>\n        <i\n            *ngIf=\"waitForReply && showDisabledButtonInsteadOfDotFlashing\"\n            (click)=\"sendMessage($event)\"\n            class=\"dr-icon-notify send-button-disabled\"></i>\n        <dr-dot-flashing\n            *ngIf=\"waitForReply && !showDisabledButtonInsteadOfDotFlashing\"\n            class=\"wait-reply-dot-flashing\"></dr-dot-flashing>\n        <dr-button *ngIf=\"waitForReply\" (click)=\"abortMessage()\" theme=\"ghost\" class=\"abort-button\">Stop generating</dr-button>\n    </div>\n</div>\n", styles: [":host{--send-button-offset: 42px;display:flex;flex-direction:column;align-items:center;padding:0 16px;margin-top:12px}:host .message-row{display:flex;justify-content:center;width:100%;padding:0 0 21px;max-width:956px}:host .message-row__input{position:relative;display:flex;align-items:center;flex-grow:1;flex-direction:row;height:auto;overflow:visible;min-width:265px;border-radius:24px;background:#dfe0e3 border-box;border:1.5px solid transparent;box-shadow:0 2px 16px -10px #603cff29}:host .message-row__input .send-button,:host .message-row__input .send-button-disabled{position:absolute;right:4px;top:2.5px;cursor:pointer;font-size:28px;width:68px;border-radius:100px;display:flex;align-items:center;justify-content:center;height:40px;background:#f0f1f4;color:#aeabac}:host .message-row__input--focused{background:linear-gradient(-90deg,#6969ff,#4eb7df) border-box}:host .message-row__input--filled{background:linear-gradient(-90deg,#6969ff,#4eb7df) border-box}:host .message-row__input--filled .send-button{color:#fff;background:linear-gradient(-90deg,#6969ff,#4eb7df) border-box}:host .message-row__input textarea{font-size:14px;color:#333;line-height:19px;flex-grow:1;resize:none;padding:14px 76px 12px 23px;margin:auto;border:none;border-radius:22.5px}:host .message-row__input textarea:focus{border:none}:host .message-row__input textarea::placeholder{color:#9ea1aa}:host .message-row__input .wait-reply-dot-flashing{position:absolute;right:20px}:host .message-row__input .abort-button{position:absolute;right:0;top:-44px}:host .message-row__input .abort-button::ng-deep button{background:#f2f2ff!important;border-radius:4px}:host input{flex:1}:host input.with-button{border-bottom-right-radius:0;border-top-right-radius:0}:host .dropped-files{display:flex;flex-direction:row;margin-bottom:.5rem;flex-wrap:wrap}:host .dropped-files__item{display:flex;flex-direction:column;justify-content:center;margin:0 10px 10px 0;position:relative}:host .dropped-files__item__preview{background-size:cover;background-position:center;width:64px;height:64px;border-radius:8px;border:1px solid #ccc}:host .dropped-files__item__preview i{font-size:62px}:host .dropped-files__item__name{white-space:nowrap;font-size:12px;color:#8f929e;margin-top:4px;max-width:64px;overflow:hidden;text-overflow:ellipsis}:host .dropped-files__item__remove{position:absolute;right:-4px;top:-4px;cursor:pointer;background:#fff;border-radius:12px;color:#8f929e;border:1px solid #8f929e;font-size:14px}\n"] }]
-    }], function () { return [{ type: i0.ChangeDetectorRef }, { type: i1$6.DomSanitizer }]; }, { message: [{
+    }], function () { return [{ type: i0.ChangeDetectorRef }, { type: i1$5.DomSanitizer }]; }, { message: [{
             type: Input
         }], messagePlaceholder: [{
             type: Input
@@ -5782,7 +5984,7 @@ class DrChatMessageFileComponent {
         }
         return false;
     }
-    /** @nocollapse */ static { this.ɵfac = function DrChatMessageFileComponent_Factory(t) { return new (t || DrChatMessageFileComponent)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(i1$6.DomSanitizer)); }; }
+    /** @nocollapse */ static { this.ɵfac = function DrChatMessageFileComponent_Factory(t) { return new (t || DrChatMessageFileComponent)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(i1$5.DomSanitizer)); }; }
     /** @nocollapse */ static { this.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: DrChatMessageFileComponent, selectors: [["dr-chat-message-file"]], inputs: { message: "message", files: "files" }, decls: 2, vars: 1, consts: [[1, "message-content-group"], ["target", "_blank", 3, "href", 4, "ngFor", "ngForOf"], ["target", "_blank", 3, "href"], ["class", "dr-icon-file", 4, "ngIf"], [3, "background-image", 4, "ngIf"], [1, "dr-icon-file"]], template: function DrChatMessageFileComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 0);
             i0.ɵɵtemplate(1, DrChatMessageFileComponent_a_1_Template, 3, 3, "a", 1);
@@ -5795,7 +5997,7 @@ class DrChatMessageFileComponent {
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DrChatMessageFileComponent, [{
         type: Component,
         args: [{ selector: 'dr-chat-message-file', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"message-content-group\">\n    <a *ngFor=\"let file of readyFiles\" [href]=\"file.url\" target=\"_blank\">\n        <i class=\"dr-icon-file\" *ngIf=\"!file.urlStyle && file.icon\"></i>\n        <div *ngIf=\"file.urlStyle\" [style.background-image]=\"file.urlStyle\"></div>\n    </a>\n</div>\n" }]
-    }], function () { return [{ type: i0.ChangeDetectorRef }, { type: i1$6.DomSanitizer }]; }, { message: [{
+    }], function () { return [{ type: i0.ChangeDetectorRef }, { type: i1$5.DomSanitizer }]; }, { message: [{
             type: Input
         }], files: [{
             type: Input
@@ -6059,7 +6261,7 @@ class DrChatSuggestionsComponent {
     }
     ngAfterViewInit() {
         this.onResize$ = DrSharedUtils.fromResizeObserver(this.suggestionContainer?.nativeElement);
-        this.onResize$.pipe(takeUntil(this.destroy$)).subscribe(() => {
+        this.onResize$.pipe(takeUntil$1(this.destroy$)).subscribe(() => {
             this.recalculateColsCount();
         });
         this.recalculateColsCount();
@@ -6196,7 +6398,7 @@ const _c3$2 = ["dr-chat-alert", "dr-chat-form", "dr-chat-message"];
 class DrChatComponent {
     set contentUpdateSubject(value) {
         if (value) {
-            value.pipe(takeUntil(this.destroy$)).subscribe(() => {
+            value.pipe(takeUntil$1(this.destroy$)).subscribe(() => {
                 this.updateView();
             });
         }
@@ -8497,7 +8699,7 @@ class DrDropdownComponent {
             if (this.drDropdownInHover) {
                 this.dropdownInstanceService
                     .inactive(this)
-                    .pipe(first$1(), takeUntil$1(merge$1(this.destroy$, this.drDropdownInHoverChange$)))
+                    .pipe(first$1(), takeUntil(merge$1(this.destroy$, this.drDropdownInHoverChange$)))
                     .subscribe(() => {
                     this.popoverRef.close();
                 });
@@ -8683,7 +8885,7 @@ class DropdownInstanceService {
         return this.instances.slice(this.instances.indexOf(ref));
     }
     inactive(ref) {
-        return this.instances$.pipe(map$2(() => this.getSequence(ref)), filter$1((value) => !!value.length), switchMap$1((value) => interval(200).pipe(map$2(() => value))), filter$1((emissions) => emissions.every((value) => !value.active())), takeUntil$1(this.destroy$));
+        return this.instances$.pipe(map$2(() => this.getSequence(ref)), filter$1((value) => !!value.length), switchMap$1((value) => interval(200).pipe(map$2(() => value))), filter$1((emissions) => emissions.every((value) => !value.active())), takeUntil(this.destroy$));
     }
 }
 
@@ -9287,7 +9489,7 @@ class DrAccordionItemComponent {
         }
     }
     ngOnInit() {
-        this.accordion.openCloseItems.pipe(takeUntil(this.destroy$)).subscribe((collapsed) => {
+        this.accordion.openCloseItems.pipe(takeUntil$1(this.destroy$)).subscribe((collapsed) => {
             if (!this.disabled) {
                 this.collapsed = collapsed;
             }
@@ -9399,7 +9601,7 @@ class DrAccordionItemHeaderComponent {
         this.theme = accordionItem?.accordion?.theme || 'regular';
     }
     ngOnInit() {
-        this.accordionItem.accordionItemInvalidate.pipe(takeUntil(this.destroy$)).subscribe(() => this.cd.markForCheck());
+        this.accordionItem.accordionItemInvalidate.pipe(takeUntil$1(this.destroy$)).subscribe(() => this.cd.markForCheck());
         this.chevronIconClass = this.getChevronIconClass();
         this.chevronRotationDegree = this.chevronOrientation === 'vertical' ? 180 : 90;
     }
@@ -9515,7 +9717,7 @@ class DrAccordionItemBodyComponent {
         return this.accordionItem.collapsed ? 'collapsed' : 'expanded';
     }
     ngOnInit() {
-        this.accordionItem.accordionItemInvalidate.pipe(takeUntil(this.destroy$)).subscribe(() => this.cd.markForCheck());
+        this.accordionItem.accordionItemInvalidate.pipe(takeUntil$1(this.destroy$)).subscribe(() => this.cd.markForCheck());
     }
     ngOnDestroy() {
         this.destroy$.next();
@@ -9622,7 +9824,7 @@ class DrDetailsListComponent {
             this.list = val;
         }
         else {
-            val.pipe(takeUntil(this.destroy$)).subscribe((res) => {
+            val.pipe(takeUntil$1(this.destroy$)).subscribe((res) => {
                 this.list = res;
             });
         }
@@ -9860,7 +10062,7 @@ class DialogWrapperComponent {
             this.saving$.next(true);
             this.dialogData
                 .confirmFn()
-                .pipe(takeUntil(this.destroy$), catchError((error) => {
+                .pipe(takeUntil$1(this.destroy$), catchError((error) => {
                 this.saving$.next(false);
                 return throwError(() => error);
             }))
@@ -9878,7 +10080,7 @@ class DialogWrapperComponent {
         this.destroy$.next(null);
         this.destroy$.complete();
     }
-    /** @nocollapse */ static { this.ɵfac = function DialogWrapperComponent_Factory(t) { return new (t || DialogWrapperComponent)(i0.ɵɵdirectiveInject(i1$7.MatLegacyDialogRef), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(i0.ComponentFactoryResolver), i0.ɵɵdirectiveInject(MAT_LEGACY_DIALOG_DATA)); }; }
+    /** @nocollapse */ static { this.ɵfac = function DialogWrapperComponent_Factory(t) { return new (t || DialogWrapperComponent)(i0.ɵɵdirectiveInject(i1$6.MatLegacyDialogRef), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(i0.ComponentFactoryResolver), i0.ɵɵdirectiveInject(MAT_LEGACY_DIALOG_DATA)); }; }
     /** @nocollapse */ static { this.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: DialogWrapperComponent, selectors: [["dr-dialog-wrapper"]], viewQuery: function DialogWrapperComponent_Query(rf, ctx) { if (rf & 1) {
             i0.ɵɵviewQuery(_c0$5, 5, ViewContainerRef);
         } if (rf & 2) {
@@ -9919,7 +10121,7 @@ class DialogWrapperComponent {
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DialogWrapperComponent, [{
         type: Component,
         args: [{ selector: 'dr-dialog-wrapper', template: "<div class=\"dialog-wrapper\" [class.dialog-wrapper--confirmation-no-title]=\"dialogData.theme?.isConfirmation && !dialogData.title\">\n    <i class=\"dr-icon-exit\" data-test=\"close_btn\" (click)=\"closeDialog()\" *ngIf=\"!dialogData?.hideCloseBtn\"></i>\n\n    <div header class=\"dialog-wrapper__header\" *ngIf=\"dialogData.title\">\n        <h1 class=\"dialog-wrapper__header__title\" data-test=\"dialogTitle\">{{ dialogData.title }}</h1>\n        <h1 class=\"dialog-wrapper__header__subtitle\" data-test=\"dialogSubtitle\" *ngIf=\"dialogData.subtitle\">\n            {{ dialogData.subtitle }}\n        </h1>\n    </div>\n    <div\n        class=\"dialog-wrapper__content\"\n        [class.dialog-wrapper__content--no-padding]=\"dialogData.theme?.contentNoPadding\"\n        [ngClass]=\"{ 'flex-position': dialogData.contentIcon?.class && !childComponent }\">\n        <span *ngIf=\"dialogData.contentIcon?.class\" class=\"dialog-wrapper__content__icon\">\n            <i [ngClass]=\"dialogData.contentIcon.class\" [style.color]=\"dialogData.contentIcon?.color || 'inherit'\"></i>\n        </span>\n        <span class=\"dialog-content__wrapper\" [innerHTML]=\"dialogData.content\"></span>\n        <span #content class=\"dialog-wrapper__content__anchor\"> </span>\n    </div>\n    <dr-details-list\n        *ngIf=\"dialogData.details\"\n        [title]=\"dialogData.details.title\"\n        [items]=\"dialogData.details.items\"\n        [collapse]=\"dialogData.details.collapse\">\n    </dr-details-list>\n    <div footer class=\"dialog-wrapper__footer\" *ngIf=\"dialogData.cancelButton || dialogData.acceptButton\">\n        <div class=\"dialog-wrapper__footer__buttons\">\n            <span\n                *ngIf=\"dialogData.customButton\"\n                class=\"dialog-wrapper__footer__button-wrapper dialog-wrapper__footer__button-wrapper--custom\"\n                [drTooltip]=\"dialogData.customButton.isDisabled && dialogData.tooltips?.customDisabled\">\n                <dr-button\n                    (click)=\"onDecline()\"\n                    [theme]=\"dialogData.customButton?.theme || 'secondary'\"\n                    [isLoading]=\"isLoading\"\n                    data-test=\"declineBtn\"\n                    [disabled]=\"dialogData.customButton.isDisabled\"\n                    [drTooltip]=\"dialogData.tooltips?.custom\"\n                    >{{ dialogData.customButton.label }}</dr-button\n                >\n            </span>\n            <span\n                *ngIf=\"dialogData.cancelButton\"\n                class=\"dialog-wrapper__footer__button-wrapper\"\n                [drTooltip]=\"dialogData.cancelButton.isDisabled && dialogData.tooltips?.cancelDisabled\">\n                <dr-button\n                    (click)=\"closeDialog()\"\n                    [theme]=\"dialogData.cancelButton?.theme || 'secondary'\"\n                    data-test=\"closeBtn\"\n                    [disabled]=\"dialogData.cancelButton.isDisabled\"\n                    [drTooltip]=\"dialogData.tooltips?.cancel\"\n                    >{{ dialogData.cancelButton.label }}</dr-button\n                >\n            </span>\n            <span\n                *ngIf=\"dialogData.acceptButton\"\n                class=\"dialog-wrapper__footer__button-wrapper\"\n                [drTooltip]=\"dialogData.acceptButton.isDisabled && dialogData.tooltips?.acceptDisabled\">\n                <dr-button\n                    (click)=\"onAcceptDialog()\"\n                    [theme]=\"dialogData.acceptButton?.theme || 'primary'\"\n                    [isLoading]=\"isLoading\"\n                    data-test=\"acceptBtn\"\n                    [disabled]=\"dialogData.acceptButton.isDisabled\"\n                    [drTooltip]=\"dialogData.tooltips?.accept\"\n                    >{{ dialogData.acceptButton.label }}</dr-button\n                >\n            </span>\n        </div>\n    </div>\n</div>\n", styles: [":host.small-modal,:host.small-modal-max-height{min-height:188px;max-height:467px;min-width:400px;max-width:400px}:host.medium-modal,:host.medium-modal-max-height{min-height:188px;max-height:467px;min-width:632px;max-width:632px}:host.medium-small-modal{min-height:188px;max-height:345px;min-width:460px;max-width:460px}:host.medium-modal-max-height,:host.small-modal-max-height{max-height:85vh}:host.large-modal{min-width:750px;max-width:750px}:host.xl-medium-modal{min-width:850px;max-width:850px}:host.medium-large-modal{min-width:669px;max-width:669px}:host.xl-modal{min-height:188px;max-height:800px;min-width:1100px;max-width:1100px}:host.xl-custom-modal{min-height:188px;max-height:800px;min-width:1100px;max-width:100%}::ng-deep .dialog-wrapper{display:flex;justify-content:space-between;flex-direction:column;position:relative}::ng-deep .dialog-wrapper>.dr-icon-exit{z-index:1;position:absolute;right:32px;top:16px;color:#6d6e6f;cursor:pointer}::ng-deep .dialog-wrapper__header{display:flex;flex-direction:column;padding:16px 56px 16px 32px;border-bottom:1px solid #dfe0e3}::ng-deep .dialog-wrapper__header__title{color:#333;position:static;font-weight:600;font-size:16px;line-height:24px;margin-top:0;margin-bottom:0}::ng-deep .dialog-wrapper__header__subtitle{color:#333;font-weight:400;font-size:14px;line-height:22px;margin:4px 0 0}::ng-deep .dialog-wrapper--confirmation-no-title{padding-top:16px;height:100%}::ng-deep .dialog-wrapper__content{overflow-y:inherit;font-size:14px;font-weight:400;line-height:22px;padding:24px 32px 32px}::ng-deep .dialog-wrapper__content__anchor{display:none}::ng-deep .dialog-wrapper__content--no-padding{padding:0}::ng-deep .dialog-wrapper__content__icon{margin-right:10px;top:5px;position:relative}::ng-deep .dialog-wrapper__content.flex-position{display:flex}::ng-deep .dialog-wrapper__content .dialog-content__wrapper{white-space:pre-line}::ng-deep .dialog-wrapper dr-details-list{margin-top:-24px;padding:0 32px 32px}::ng-deep .dialog-wrapper .confirmation-question{font-weight:500;margin-top:8px}::ng-deep .dialog-wrapper__footer{border-top:1px solid #dfe0e3}::ng-deep .dialog-wrapper__footer__buttons{display:flex;justify-content:flex-end;padding:11px 32px}::ng-deep .dialog-wrapper__footer__buttons>dr-button:nth-child(n+2){margin-left:12px}::ng-deep .dialog-wrapper__footer__button-wrapper:nth-child(n+2){margin-left:12px}::ng-deep .dialog-wrapper__footer__button-wrapper--custom:nth-last-child(3){margin-right:auto}\n"] }]
-    }], function () { return [{ type: i1$7.MatLegacyDialogRef }, { type: i0.ChangeDetectorRef }, { type: i0.ComponentFactoryResolver }, { type: undefined, decorators: [{
+    }], function () { return [{ type: i1$6.MatLegacyDialogRef }, { type: i0.ChangeDetectorRef }, { type: i0.ComponentFactoryResolver }, { type: undefined, decorators: [{
                 type: Inject,
                 args: [MAT_LEGACY_DIALOG_DATA]
             }] }]; }, { content: [{
@@ -10219,7 +10421,7 @@ class DialogModalWrapperComponent {
             .pipe(finalize(() => {
             this.isLoading = false;
             this.saving$.next(false);
-        }), takeUntil(this.destroy$), catchError((err) => {
+        }), takeUntil$1(this.destroy$), catchError((err) => {
             this.showServerErrorMessage = true;
             this.isLoading = false;
             this.saving$.next(false);
@@ -10243,7 +10445,7 @@ class DialogModalWrapperComponent {
         this.destroy$.next();
         this.destroy$.complete();
     }
-    /** @nocollapse */ static { this.ɵfac = function DialogModalWrapperComponent_Factory(t) { return new (t || DialogModalWrapperComponent)(i0.ɵɵdirectiveInject(i1$7.MatLegacyDialogRef), i0.ɵɵdirectiveInject(MAT_LEGACY_DIALOG_DATA)); }; }
+    /** @nocollapse */ static { this.ɵfac = function DialogModalWrapperComponent_Factory(t) { return new (t || DialogModalWrapperComponent)(i0.ɵɵdirectiveInject(i1$6.MatLegacyDialogRef), i0.ɵɵdirectiveInject(MAT_LEGACY_DIALOG_DATA)); }; }
     /** @nocollapse */ static { this.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: DialogModalWrapperComponent, selectors: [["dr-dialog-modal-wrapper"]], hostVars: 2, hostBindings: function DialogModalWrapperComponent_HostBindings(rf, ctx) { if (rf & 2) {
             i0.ɵɵclassMap(ctx.class);
         } }, decls: 10, vars: 6, consts: [["header", "", 1, "header-dialog"], ["data-test", "modalTitle", 1, "title-dialog"], ["class", "title-dialog__icon", "data-test", "dialogTitleIcon", 3, "class", "click", 4, "ngIf"], [1, "title-dialog__text"], ["class", "dr-icon-exit icon-close", "data-test", "xBtn", 3, "click", 4, "ngIf"], ["class", "content-dialog", 4, "ngIf"], ["class", "dr-smart-from", 3, "formGroup", 4, "ngIf"], ["footer", "", 1, "footer-dialog"], ["class", "buttons-wrapper", 4, "ngIf"], ["data-test", "dialogTitleIcon", 1, "title-dialog__icon", 3, "click"], ["data-test", "xBtn", 1, "dr-icon-exit", "icon-close", 3, "click"], [1, "content-dialog"], [1, "content-anchor"], ["content", ""], [1, "dr-smart-from", 3, "formGroup"], ["class", "dr-smart-form_group", 3, "class", "ngStyle", 4, "ngFor", "ngForOf"], [1, "dr-smart-form_group", 3, "ngStyle"], ["class", "label p-0 d-flex align-items-center", 3, "ngClass", 4, "ngIf"], [1, "input-group", "p-0", 3, "ngClass"], [3, "searchable", "clearable", "formControlName", "bindLabel", "bindValue", "selectedItem", "items", "loading", "required", "placeholder", 4, "ngIf"], ["data-test", "modalInput", "class", "form-control", 3, "formControlName", "placeholder", 4, "ngIf"], [3, "formControlName", "format", "placeholder", 4, "ngIf"], [3, "formControlName", 4, "ngIf"], ["class", "form-field-error-alert", 4, "ngIf"], ["class", "form-error-alert", 4, "ngIf"], [1, "label", "p-0", "d-flex", "align-items-center", 3, "ngClass"], [3, "searchable", "clearable", "formControlName", "bindLabel", "bindValue", "selectedItem", "items", "loading", "required", "placeholder"], [4, "ngIf"], ["optionFooterTemplate", ""], [1, "dr-select-footer__btn", 3, "click"], [3, "class", 4, "ngIf"], ["data-test", "modalInput", 1, "form-control", 3, "formControlName", "placeholder"], [3, "formControlName", "format", "placeholder"], [3, "formControlName"], [1, "form-field-error-alert"], [1, "form-error-alert"], [1, "buttons-wrapper"], ["class", "buttons-wrapper--custom-btn", "data-test", "declineBtn", 3, "theme", "click", 4, "ngIf"], ["data-test", "modalCloseBtn", 3, "theme", "click", 4, "ngIf"], ["data-test", "modalAddBtn", 3, "theme", "isLoading", "disabled", "click", 4, "ngIf"], ["data-test", "declineBtn", 1, "buttons-wrapper--custom-btn", 3, "theme", "click"], ["data-test", "modalCloseBtn", 3, "theme", "click"], ["data-test", "modalAddBtn", 3, "theme", "isLoading", "disabled", "click"]], template: function DialogModalWrapperComponent_Template(rf, ctx) { if (rf & 1) {
@@ -10277,7 +10479,7 @@ class DialogModalWrapperComponent {
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DialogModalWrapperComponent, [{
         type: Component,
         args: [{ selector: 'dr-dialog-modal-wrapper', template: "<div header class=\"header-dialog\">\n    <h1 class=\"title-dialog\" data-test=\"modalTitle\">\n        <i\n            *ngIf=\"dialogData.headerIconClass\"\n            (click)=\"closeDialog()\"\n            class=\"title-dialog__icon\"\n            [class]=\"dialogData.headerIconClass\"\n            data-test=\"dialogTitleIcon\"></i>\n        <span class=\"title-dialog__text\">{{ dialogData.title }}</span>\n    </h1>\n    <i *ngIf=\"!dialogData.hideCloseBtn\" (click)=\"closeDialog()\" class=\"dr-icon-exit icon-close\" data-test=\"xBtn\"></i>\n</div>\n<div *ngIf=\"dialogData.content\" class=\"content-dialog\">\n    <ng-container>{{ dialogData.content }}</ng-container>\n    <span #content class=\"content-anchor\"></span>\n</div>\n<form *ngIf=\"dialogData.fields\" [formGroup]=\"form\" class=\"dr-smart-from\">\n    <div [class]=\"dialogData.formWrapperClass || 'dr-smart-form_wrapper'\">\n        <div\n            *ngFor=\"let field of dialogData.fields\"\n            class=\"dr-smart-form_group\"\n            [class]=\"field.formGroupClass\"\n            [ngStyle]=\"{ display: field.isLabelFullWidth ? 'block' : 'flex' }\">\n            <label\n                *ngIf=\"field.label && field.type !== dialogFieldType.CHECKBOX\"\n                [ngClass]=\"field.isLabelFullWidth ? 'col-md-12 mb-2' : 'col-md-2'\"\n                class=\"label p-0 d-flex align-items-center\"\n                >{{ field.label }}</label\n            >\n            <div\n                class=\"input-group p-0\"\n                [ngClass]=\"{\n                    'col-md-10': field.label && !field.isLabelFullWidth,\n                    'col-md-12': !field.label || field.isLabelFullWidth\n                }\">\n                <dr-select\n                    *ngIf=\"field.type === dialogFieldType.SELECT\"\n                    [searchable]=\"dialogData.searchable\"\n                    [clearable]=\"dialogData.clearable\"\n                    [formControlName]=\"field.name\"\n                    [bindLabel]=\"field.bindLabel || null\"\n                    [bindValue]=\"field.bindValue || null\"\n                    [selectedItem]=\"field.default\"\n                    [items]=\"field.items || (field.items$ | async)\"\n                    [loading]=\"fieldsItemsLoading[field.name] | async\"\n                    [required]=\"true\"\n                    [placeholder]=\"field.placeholder\">\n                    <ng-template *ngIf=\"dialogData?.footerTemplateData\" #optionFooterTemplate let-item=\"item\" let-close=\"close\">\n                        <button (click)=\"footerAction(); close()\" class=\"dr-select-footer__btn\">\n                            <i *ngIf=\"dialogData.footerTemplateData.icon\" class=\"{{ dialogData.footerTemplateData.icon }}\"></i>\n                            {{ dialogData.footerTemplateData.label }}\n                        </button>\n                    </ng-template>\n                </dr-select>\n                <dr-input\n                    *ngIf=\"field.type === dialogFieldType.INPUT\"\n                    data-test=\"modalInput\"\n                    class=\"form-control\"\n                    [formControlName]=\"field.name\"\n                    [placeholder]=\"field.placeholder\"></dr-input>\n                <dr-date-picker\n                    *ngIf=\"field.type === dialogFieldType.DATE_PICKER\"\n                    [formControlName]=\"field.name\"\n                    [format]=\"field.datePickerFormat\"\n                    [placeholder]=\"field.placeholder\"></dr-date-picker>\n                <dr-checkbox *ngIf=\"field.type === dialogFieldType.CHECKBOX\" [formControlName]=\"field.name\">\n                    {{ field.label }}\n                </dr-checkbox>\n                <label\n                    class=\"form-field-error-alert\"\n                    *ngIf=\"form.invalid && form.controls[field.name]?.dirty && form.controls[field.name]?.errors\">\n                    {{ form.controls[field.name].errors.errorString }}\n                </label>\n                <label class=\"form-error-alert\" *ngIf=\"dialogData.errorMessage && !form.pristine && form.invalid\">\n                    {{ dialogData.errorMessage }}\n                </label>\n                <label class=\"form-error-alert\" *ngIf=\"form.valid && showServerErrorMessage && dialogData.serverErrorMessage\">\n                    {{ dialogData.serverErrorMessage }}\n                </label>\n            </div>\n        </div>\n    </div>\n</form>\n\n<div footer class=\"footer-dialog\">\n    <div class=\"buttons-wrapper\" *ngIf=\"dialogData.cancelButton || dialogData.acceptButton\">\n        <dr-button\n            (click)=\"onDecline()\"\n            *ngIf=\"dialogData.customButton\"\n            [theme]=\"dialogData.customButton?.theme || 'secondary'\"\n            class=\"buttons-wrapper--custom-btn\"\n            data-test=\"declineBtn\"\n            >{{ dialogData.customButton.label }}</dr-button\n        >\n        <dr-button *ngIf=\"dialogData.cancelButton\" data-test=\"modalCloseBtn\" (click)=\"closeDialog()\" [theme]=\"'secondary'\">{{\n            dialogData.cancelButton.label\n        }}</dr-button>\n        <dr-button\n            *ngIf=\"dialogData.acceptButton\"\n            data-test=\"modalAddBtn\"\n            (click)=\"onAccept()\"\n            [theme]=\"'primary'\"\n            [isLoading]=\"isLoading\"\n            [disabled]=\"form.invalid\"\n            >{{ dialogData.acceptButton.label }}</dr-button\n        >\n    </div>\n</div>\n", styles: [":host{display:flex;justify-content:space-between;flex-direction:column}:host.small-modal,:host.small-modal-max-height{min-height:188px;max-height:467px;min-width:400px;max-width:400px}:host.medium-modal,:host.medium-modal-max-height{min-height:188px;max-height:467px;min-width:632px;max-width:632px}:host.medium-small-modal{min-height:188px;max-height:345px;min-width:460px;max-width:460px}:host.medium-modal-max-height,:host.small-modal-max-height{max-height:80vh}.header-dialog{position:relative;display:flex;flex-direction:row;justify-content:space-between;align-items:center;padding:16px 56px 16px 32px;border-bottom:1px solid #dfe0e3}.header-dialog>.icon-close{position:absolute;right:32px;top:16px;cursor:pointer}.title-dialog{display:flex;color:#333;position:static;font-weight:600;font-size:16px;line-height:24px;margin-top:0;margin-bottom:0}.title-dialog__icon{font-size:32px;margin-right:8px;line-height:24px;color:#6d6e6f}.content-dialog{font-weight:400;font-size:14px;padding:16px 32px 5px;white-space:pre-line}.icon-close{color:#6d6e6f;cursor:pointer}.dr-smart-from{font-size:14px;font-weight:400;line-height:22px;padding:8px 32px 24px}.dr-smart-from dr-checkbox{font-weight:400}.content-dialog{padding:16px 32px 0;font-weight:400;font-size:14px;line-height:22px}.content-anchor{display:none}.footer-dialog{border-top:1px solid #dfe0e3}.buttons-wrapper{display:flex;justify-content:flex-end;padding:10px 32px 11px}.buttons-wrapper dr-button:nth-of-type(n+2){margin-left:12px}.buttons-wrapper--custom-btn{margin-right:auto}.form-field-error-alert{font-size:12px;color:#bf1d30;line-height:20px}.form-error-alert{position:absolute;margin-top:5px;font-size:12px;color:#bf1d30}.dr-select-footer__btn{background-color:transparent;display:flex;align-items:center;justify-content:flex-start;cursor:pointer;min-width:15rem;font-style:normal;font-weight:400;font-size:14px;line-height:24px;clear:both;width:100%;white-space:nowrap;padding:0 12px;height:36px;flex-shrink:0}\n"] }]
-    }], function () { return [{ type: i1$7.MatLegacyDialogRef }, { type: undefined, decorators: [{
+    }], function () { return [{ type: i1$6.MatLegacyDialogRef }, { type: undefined, decorators: [{
                 type: Inject,
                 args: [MAT_LEGACY_DIALOG_DATA]
             }] }]; }, { class: [{
@@ -10343,7 +10545,7 @@ class DialogService {
     openDialog(componentType, dialogData) {
         return this.dialog.open(componentType, dialogData);
     }
-    /** @nocollapse */ static { this.ɵfac = function DialogService_Factory(t) { return new (t || DialogService)(i0.ɵɵinject(i1$7.MatLegacyDialog)); }; }
+    /** @nocollapse */ static { this.ɵfac = function DialogService_Factory(t) { return new (t || DialogService)(i0.ɵɵinject(i1$6.MatLegacyDialog)); }; }
     /** @nocollapse */ static { this.ɵprov = /** @pureOrBreakMyCode */ i0.ɵɵdefineInjectable({ token: DialogService, factory: DialogService.ɵfac, providedIn: 'root' }); }
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DialogService, [{
@@ -10351,7 +10553,7 @@ class DialogService {
         args: [{
                 providedIn: 'root',
             }]
-    }], function () { return [{ type: i1$7.MatLegacyDialog }]; }, null); })();
+    }], function () { return [{ type: i1$6.MatLegacyDialog }]; }, null); })();
 
 class TreeviewI18n {
     /** @nocollapse */ static { this.ɵfac = function TreeviewI18n_Factory(t) { return new (t || TreeviewI18n)(); }; }
@@ -11307,7 +11509,7 @@ class DefaultToastrComponent extends Toast {
         this.class = this.data.status;
         this.icon = ToastrStatusIcon[this.data.status];
     }
-    /** @nocollapse */ static { this.ɵfac = function DefaultToastrComponent_Factory(t) { return new (t || DefaultToastrComponent)(i0.ɵɵdirectiveInject(i1$8.ToastrService), i0.ɵɵdirectiveInject(i1$8.ToastPackage)); }; }
+    /** @nocollapse */ static { this.ɵfac = function DefaultToastrComponent_Factory(t) { return new (t || DefaultToastrComponent)(i0.ɵɵdirectiveInject(i1$7.ToastrService), i0.ɵɵdirectiveInject(i1$7.ToastPackage)); }; }
     /** @nocollapse */ static { this.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: DefaultToastrComponent, selectors: [["dr-default-toastr"]], hostVars: 2, hostBindings: function DefaultToastrComponent_HostBindings(rf, ctx) { if (rf & 2) {
             i0.ɵɵclassMap(ctx.class);
         } }, features: [i0.ɵɵInheritDefinitionFeature], decls: 10, vars: 4, consts: [[1, "icon-container"], [1, "toastr-icon", 3, "ngClass"], [1, "content-container"], [1, "title"], ["class", "message", 4, "ngIf", "ngIfElse"], ["htmlBody", ""], [1, "dr-icon-exit"], [1, "message"], [1, "message", 3, "innerHTML"]], template: function DefaultToastrComponent_Template(rf, ctx) { if (rf & 1) {
@@ -11336,7 +11538,7 @@ class DefaultToastrComponent extends Toast {
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DefaultToastrComponent, [{
         type: Component,
         args: [{ selector: 'dr-default-toastr', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"icon-container\">\n    <i class=\"toastr-icon\" [ngClass]=\"icon\"></i>\n</div>\n\n<div class=\"content-container\">\n    <span class=\"title\">\n        {{ data.title }}\n    </span>\n\n    <div class=\"message\" *ngIf=\"!data.isHtmlBody; else htmlBody\">\n        {{ data.message }}\n    </div>\n\n    <ng-template #htmlBody>\n        <div class=\"message\" [innerHTML]=\"data.message\"></div>\n    </ng-template>\n</div>\n\n<div class=\"icon-container\">\n    <i class=\"dr-icon-exit\"></i>\n</div>\n", styles: ["::ng-deep .toastr-bottom-left{left:24px!important;bottom:24px!important}::ng-deep dr-default-toastr:not(:last-child){margin-bottom:24px!important}:host.ngx-toastr{display:flex;background:#fff;position:relative;overflow:hidden;pointer-events:auto;max-width:500px;width:450px;border-radius:6px;padding:17px 41px 12px 12px}:host.ngx-toastr:before{content:\"\";display:block;position:absolute;left:0;top:0;width:100%;height:5px}:host.ngx-toastr:hover{cursor:pointer}:host.ngx-toastr .toastr-icon{display:inline-block}:host.ngx-toastr .dr-icon-exit{position:absolute;top:19px;right:19px;color:#6d6e6f}:host.ngx-toastr .content-container{padding-right:24px}:host.ngx-toastr .content-container span.title{font-weight:700;font-size:16px;line-height:24px}:host.ngx-toastr .content-container span.title,:host.ngx-toastr .content-container div.message{color:#333;word-break:break-word;margin:0!important}:host.ngx-toastr .content-container div.message{font-size:16px;font-weight:400;line-height:24px}:host.ngx-toastr .content-container div.message a{text-decoration:underline!important}:host.ngx-toastr .icon-container{font-size:16px!important;background-size:contain!important;min-width:16px!important;min-height:16px!important;align-self:self-start;margin-right:12px!important;margin-left:4px!important}:host.ngx-toastr .icon-container .toastr-icon svg{display:none}:host.ngx-toastr.status-success:before{background-color:#03a678}:host.ngx-toastr.status-success .toastr-icon{color:#03a678}:host.ngx-toastr.status-info:before{background-color:#0061ff}:host.ngx-toastr.status-info .toastr-icon{color:#0061ff}:host.ngx-toastr.status-warning:before{background-color:#fda014}:host.ngx-toastr.status-warning .toastr-icon{color:#fda014}:host.ngx-toastr.status-danger:before{background-color:#de2833}:host.ngx-toastr.status-danger .toastr-icon{color:#de2833}\n"] }]
-    }], function () { return [{ type: i1$8.ToastrService }, { type: i1$8.ToastPackage }]; }, { class: [{
+    }], function () { return [{ type: i1$7.ToastrService }, { type: i1$7.ToastPackage }]; }, { class: [{
             type: HostBinding,
             args: ['class']
         }] }); })();
@@ -11504,7 +11706,7 @@ class DrToastrService {
             isHtmlBody,
         };
     }
-    /** @nocollapse */ static { this.ɵfac = function DrToastrService_Factory(t) { return new (t || DrToastrService)(i0.ɵɵinject(i1$8.ToastrService)); }; }
+    /** @nocollapse */ static { this.ɵfac = function DrToastrService_Factory(t) { return new (t || DrToastrService)(i0.ɵɵinject(i1$7.ToastrService)); }; }
     /** @nocollapse */ static { this.ɵprov = /** @pureOrBreakMyCode */ i0.ɵɵdefineInjectable({ token: DrToastrService, factory: DrToastrService.ɵfac, providedIn: 'root' }); }
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DrToastrService, [{
@@ -11512,7 +11714,7 @@ class DrToastrService {
         args: [{
                 providedIn: 'root',
             }]
-    }], function () { return [{ type: i1$8.ToastrService }]; }, null); })();
+    }], function () { return [{ type: i1$7.ToastrService }]; }, null); })();
 
 const TOOLTIP_COMPONENTS = [TooltipDefaultComponent, TooltipInfoComponent];
 class DrTooltipModule {
@@ -11582,7 +11784,8 @@ class DrInputsModule {
             MatNativeDateModule,
             MatDatepickerModule,
             DrTooltipModule,
-            DrSpinnerModule] }); }
+            DrSpinnerModule,
+            WeekSelectorComponent] }); }
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DrInputsModule, [{
         type: NgModule,
@@ -11600,6 +11803,7 @@ class DrInputsModule {
                     MatDatepickerModule,
                     DrTooltipModule,
                     DrSpinnerModule,
+                    WeekSelectorComponent,
                 ],
             }]
     }], null, null); })();
@@ -11627,7 +11831,8 @@ class DrInputsModule {
         MatNativeDateModule,
         MatDatepickerModule,
         DrTooltipModule,
-        DrSpinnerModule], exports: [DrButtonComponent,
+        DrSpinnerModule,
+        WeekSelectorComponent], exports: [DrButtonComponent,
         RadioButtonComponent,
         RadioGroupComponent,
         CheckboxComponent,
@@ -12331,7 +12536,7 @@ class DrToastrModule {
                 providers: [DrToastrService],
             }]
     }], null, null); })();
-(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(DrToastrModule, { declarations: [DefaultToastrComponent], imports: [CommonModule, i1$8.ToastrModule], exports: [DefaultToastrComponent] }); })();
+(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(DrToastrModule, { declarations: [DefaultToastrComponent], imports: [CommonModule, i1$7.ToastrModule], exports: [DefaultToastrComponent] }); })();
 
 class DrCodeEditorModule {
     /** @nocollapse */ static { this.ɵfac = function DrCodeEditorModule_Factory(t) { return new (t || DrCodeEditorModule)(); }; }
@@ -12549,14 +12754,14 @@ class DrawerContainer extends CdkDialogContainer {
             }
             container.style.transition = 'transform 0.5s cubic-bezier(0.32, 0.72, 0, 1)';
             container.style.transform = `translate3d(0px, 0px, 0px)`;
-        }), takeUntil$1(mouseup$))), map$2((event) => this.positionStrategy.extractMousePosition(event)), distinctUntilChanged$1(), tap$1((position) => {
+        }), takeUntil(mouseup$))), map$2((event) => this.positionStrategy.extractMousePosition(event)), distinctUntilChanged(), tap$1((position) => {
             let containerPosition = this.getContainerPosition(container);
             containerPosition = Math.min(containerPosition, lastPosition);
             lastPosition = Math.min(containerPosition, lastPosition);
             currentPosition = position;
             container.style.transition = 'none';
             container.style.transform = this.positionStrategy.calculateTransform(position, containerPosition);
-        }), takeUntil$1(this.destroy$))
+        }), takeUntil(this.destroy$))
             .subscribe();
     }
     getContainerPosition(container) {
@@ -12580,7 +12785,7 @@ class DrawerContainer extends CdkDialogContainer {
         this._animationStateChanged.emit(event);
     }
     _captureInitialFocus() { }
-    /** @nocollapse */ static { this.ɵfac = function DrawerContainer_Factory(t) { return new (t || DrawerContainer)(i0.ɵɵdirectiveInject(i0.ElementRef), i0.ɵɵdirectiveInject(i1$9.FocusTrapFactory), i0.ɵɵdirectiveInject(DOCUMENT, 8), i0.ɵɵdirectiveInject(DrawerConfig), i0.ɵɵdirectiveInject(i1$9.InteractivityChecker), i0.ɵɵdirectiveInject(i0.NgZone), i0.ɵɵdirectiveInject(i1$1.OverlayRef), i0.ɵɵdirectiveInject(i1$9.FocusMonitor)); }; }
+    /** @nocollapse */ static { this.ɵfac = function DrawerContainer_Factory(t) { return new (t || DrawerContainer)(i0.ɵɵdirectiveInject(i0.ElementRef), i0.ɵɵdirectiveInject(i1$8.FocusTrapFactory), i0.ɵɵdirectiveInject(DOCUMENT, 8), i0.ɵɵdirectiveInject(DrawerConfig), i0.ɵɵdirectiveInject(i1$8.InteractivityChecker), i0.ɵɵdirectiveInject(i0.NgZone), i0.ɵɵdirectiveInject(i1$1.OverlayRef), i0.ɵɵdirectiveInject(i1$8.FocusMonitor)); }; }
     /** @nocollapse */ static { this.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: DrawerContainer, selectors: [["dr-drawer-container"]], viewQuery: function DrawerContainer_Query(rf, ctx) { if (rf & 1) {
             i0.ɵɵviewQuery(CdkPortalOutlet, 7);
             i0.ɵɵviewQuery(_c0, 5);
@@ -12616,12 +12821,12 @@ class DrawerContainer extends CdkDialogContainer {
                     '(@state.start)': '_onAnimationStart($event)',
                     '(@state.done)': '_onAnimationDone($event)',
                 }, standalone: true, imports: [PortalModule, DialogModule, MatCommonModule, CommonModule], template: "<div *ngIf=\"_config.position === 'bottom'\" #handleRef class=\"handle\"></div>\n<ng-template cdkPortalOutlet></ng-template>\n", styles: [".dr-drawer-container{display:block;width:100%;overflow:auto;outline:0;box-sizing:border-box;background-color:#fff;box-shadow:0 4px 14px #d8d9de80}.cdk-high-contrast-active .dr-drawer-container{outline:1px solid}.handle{position:relative;height:24px;cursor:pointer}.handle:after{content:\"\";position:absolute;top:16px;left:50%;transform:translate(-50%,-50%);background-color:#dfe0e3;height:4px;width:64px;border-radius:16px}.dr-drawer-right{transform:translate(100%);border-top-left-radius:16px;border-bottom-left-radius:16px}.dr-drawer-left{transform:translate(-100%);border-top-right-radius:16px;border-bottom-right-radius:16px}.dr-drawer-bottom{transform:translateY(100%);border-top-left-radius:16px;border-top-right-radius:16px}.dr-drawer-top{transform:translateY(-100%);border-bottom-left-radius:16px;border-bottom-right-radius:16px}\n"] }]
-    }], function () { return [{ type: i0.ElementRef }, { type: i1$9.FocusTrapFactory }, { type: Document, decorators: [{
+    }], function () { return [{ type: i0.ElementRef }, { type: i1$8.FocusTrapFactory }, { type: Document, decorators: [{
                 type: Optional
             }, {
                 type: Inject,
                 args: [DOCUMENT]
-            }] }, { type: DrawerConfig }, { type: i1$9.InteractivityChecker }, { type: i0.NgZone }, { type: i1$1.OverlayRef }, { type: i1$9.FocusMonitor }]; }, { _portalOutlet: [{
+            }] }, { type: DrawerConfig }, { type: i1$8.InteractivityChecker }, { type: i0.NgZone }, { type: i1$1.OverlayRef }, { type: i1$8.FocusMonitor }]; }, { _portalOutlet: [{
             type: ViewChild,
             args: [CdkPortalOutlet, { static: true }]
         }], _handleRef: [{
@@ -12758,7 +12963,7 @@ class Drawer {
          * Stream that emits when all open drawer have finished closing.
          * Will emit on subscribe if there are no open drawers to begin with.
          */
-        this.afterAllDismissed = defer(() => this.openDrawers.length ? this._getAfterAllDismissed() : this._getAfterAllDismissed().pipe(startWith(undefined)));
+        this.afterAllDismissed = defer(() => this.openDrawers.length ? this._getAfterAllDismissed() : this._getAfterAllDismissed().pipe(startWith$1(undefined)));
         this._dialog = _injector.get(Dialog);
     }
     open(componentOrTemplateRef, config) {