@datarailsshared/datarailsshared 1.6.185 → 1.6.189

package/fesm2022/datarailsshared-datarailsshared.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, Component, Output, Input, Injectable, inject, ChangeDetectorRef, DestroyRef, ChangeDetectionStrategy, HostBinding, TemplateRef, HostListener, Directive, forwardRef, ViewChild, ContentChild, Pipe, ComponentFactoryResolver, Injector, Inject, Optional, ViewEncapsulation, PLATFORM_ID, ContentChildren, NgModule, ElementRef, Host, ViewContainerRef, ViewChildren, InjectionToken, SkipSelf, booleanAttribute } from '@angular/core';
+import { EventEmitter, Component, Output, Input, Injectable, inject, ChangeDetectorRef, DestroyRef, ChangeDetectionStrategy, HostBinding, TemplateRef, HostListener, Directive, forwardRef, ViewChild, ContentChild, Pipe, ComponentFactoryResolver, Injector, Inject, Optional, ViewEncapsulation, PLATFORM_ID, ContentChildren, NgModule, ElementRef, Host, ViewContainerRef, ViewChildren, InjectionToken, SkipSelf, booleanAttribute, Renderer2, numberAttribute } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule, isPlatformBrowser, DOCUMENT } from '@angular/common';
 import { MomentDateAdapter, MAT_MOMENT_DATE_ADAPTER_OPTIONS, MatMomentDateModule } from '@angular/material-moment-adapter';
@@ -383,6 +383,7 @@ class DrDatePickerService {
         };
         this.fiscalYearMonthsModifier = 0;
         this.fiscalYearBack = false;
+        this.selectCurrentQuarter = false;
         this._innerValue$ = new BehaviorSubject(null);
         this.innerValue$ = this._innerValue$.asObservable();
     }
@@ -694,7 +695,7 @@ var TooltipTheme;
     TooltipTheme["DARK"] = "dark";
 })(TooltipTheme || (TooltipTheme = {}));
 
-const _c0$N = ["*"];
+const _c0$O = ["*"];
 class TooltipDefaultComponent {
     constructor() {
         this.theme = TooltipTheme.LIGHT;
@@ -702,7 +703,7 @@ class TooltipDefaultComponent {
     /** @nocollapse */ static { this.ɵfac = function TooltipDefaultComponent_Factory(t) { return new (t || TooltipDefaultComponent)(); }; }
     /** @nocollapse */ static { this.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: TooltipDefaultComponent, selectors: [["dr-tooltip-default"]], hostVars: 2, hostBindings: function TooltipDefaultComponent_HostBindings(rf, ctx) { if (rf & 2) {
             i0.ɵɵclassMap(ctx.theme);
-        } }, inputs: { content: "content", theme: "theme" }, ngContentSelectors: _c0$N, decls: 2, vars: 1, consts: [[1, "content", 3, "innerHTML"]], template: function TooltipDefaultComponent_Template(rf, ctx) { if (rf & 1) {
+        } }, inputs: { content: "content", theme: "theme" }, ngContentSelectors: _c0$O, decls: 2, vars: 1, consts: [[1, "content", 3, "innerHTML"]], template: function TooltipDefaultComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef();
             i0.ɵɵelement(0, "span", 0);
             i0.ɵɵprojection(1);
@@ -743,7 +744,7 @@ function TooltipComponent_ng_template_3_Template(rf, ctx) { if (rf & 1) {
     const ctx_r3 = i0.ɵɵnextContext();
     i0.ɵɵproperty("content", ctx_r3.content)("theme", ctx_r3.theme);
 } }
-const _c0$M = function (a0) { return { "dr-tooltip": a0 }; };
+const _c0$N = function (a0) { return { "dr-tooltip": a0 }; };
 class TooltipComponent {
     constructor() {
         this.isContentTemplate = false;
@@ -773,7 +774,7 @@ class TooltipComponent {
         } if (rf & 2) {
             const _r2 = i0.ɵɵreference(4);
             i0.ɵɵclassMap(ctx.position + " " + ctx.class + " " + ctx.theme);
-            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(6, _c0$M, !(ctx.options == null ? null : ctx.options.withoutContainerStyles)));
+            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(6, _c0$N, !(ctx.options == null ? null : ctx.options.withoutContainerStyles)));
             i0.ɵɵadvance(1);
             i0.ɵɵproperty("ngIf", !(ctx.options == null ? null : ctx.options.withoutArrow));
             i0.ɵɵadvance(1);
@@ -1115,8 +1116,8 @@ class DrModelDebounceChangeDirective {
             type: Output
         }] }); })();
 
-const _c0$L = ["prefix"];
-const _c1$k = ["suffix"];
+const _c0$M = ["prefix"];
+const _c1$l = ["suffix"];
 const _c2$c = ["inputRef"];
 function DrInputComponent_ng_container_1_Template(rf, ctx) { if (rf & 1) {
     const _r8 = i0.ɵɵgetCurrentView();
@@ -1328,8 +1329,8 @@ class DrInputComponent {
     }
     /** @nocollapse */ static { this.ɵfac = function DrInputComponent_Factory(t) { return new (t || DrInputComponent)(i0.ɵɵdirectiveInject(i0.ElementRef), i0.ɵɵdirectiveInject(i0.Renderer2), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); }; }
     /** @nocollapse */ static { this.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: DrInputComponent, selectors: [["dr-input"]], contentQueries: function DrInputComponent_ContentQueries(rf, ctx, dirIndex) { if (rf & 1) {
-            i0.ɵɵcontentQuery(dirIndex, _c0$L, 5);
-            i0.ɵɵcontentQuery(dirIndex, _c1$k, 5);
+            i0.ɵɵcontentQuery(dirIndex, _c0$M, 5);
+            i0.ɵɵcontentQuery(dirIndex, _c1$l, 5);
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.prefixIcon = _t.first);
@@ -1452,8 +1453,8 @@ class DrInputComponent {
             args: ['tabindex']
         }] }); })();
 
-const _c0$K = ["labelTemplate"];
-const _c1$j = ["multiLabelTemplate"];
+const _c0$L = ["labelTemplate"];
+const _c1$k = ["multiLabelTemplate"];
 const _c2$b = ["optionTemplate"];
 const _c3$6 = ["optionHeaderTemplate"];
 const _c4$4 = ["optionFooterTemplate"];
@@ -1700,8 +1701,8 @@ class DrSelectComponent {
     }
     /** @nocollapse */ static { this.ɵfac = function DrSelectComponent_Factory(t) { return new (t || DrSelectComponent)(i0.ɵɵdirectiveInject(i0.ElementRef), i0.ɵɵdirectiveInject(i0.Renderer2)); }; }
     /** @nocollapse */ static { this.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: DrSelectComponent, selectors: [["dr-select"]], contentQueries: function DrSelectComponent_ContentQueries(rf, ctx, dirIndex) { if (rf & 1) {
-            i0.ɵɵcontentQuery(dirIndex, _c0$K, 5);
-            i0.ɵɵcontentQuery(dirIndex, _c1$j, 5);
+            i0.ɵɵcontentQuery(dirIndex, _c0$L, 5);
+            i0.ɵɵcontentQuery(dirIndex, _c1$k, 5);
             i0.ɵɵcontentQuery(dirIndex, _c2$b, 5);
             i0.ɵɵcontentQuery(dirIndex, _c3$6, 5);
             i0.ɵɵcontentQuery(dirIndex, _c4$4, 5);
@@ -1764,7 +1765,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, DrInputComponent], 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}.textView[_nghost-%COMP%]  ng-select.ng-select.ng-select-disabled .ng-select-container, .textView[_nghost-%COMP%]  ng-select.ng-select.ng-select-disabled .ng-select-container:hover, .textView[_nghost-%COMP%]  ng-select.ng-select.ng-select-disabled .ng-select-container:focus-within{background:#fff!important;border:none!important;cursor:default}.textView[_nghost-%COMP%]  ng-select.ng-select.ng-select-disabled .ng-select-container .ng-value, .textView[_nghost-%COMP%]  ng-select.ng-select.ng-select-disabled .ng-select-container:hover .ng-value, .textView[_nghost-%COMP%]  ng-select.ng-select.ng-select-disabled .ng-select-container:focus-within .ng-value{color:#aeabac!important}.textView[_nghost-%COMP%]  ng-select.ng-select.ng-select-disabled .ng-select-container .ng-input input::placeholder{color:#aeabac}.textView[_nghost-%COMP%]  ng-select.ng-select.ng-select-disabled .ng-value-container:hover{text-decoration-line: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{font-size:14px;line-height:24px;font-weight:400;top:0!important;padding:0 50px 0 8px!important;color:#333}[_nghost-%COMP%]     ng-select.ng-select .ng-select-container .ng-input input::placeholder{font-size:14px;line-height:24px;font-weight:400;color:#6d6e6f}[_nghost-%COMP%]     ng-select.ng-select .ng-select-container .ng-value-container{font-size:14px;line-height:24px;font-weight:400;padding:0 0 0 8px;height:100%;overflow:auto}[_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:\"\\ea17\";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{font-size:14px;line-height:24px;font-weight:400;max-height:58px}[_nghost-%COMP%]     ng-select.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{font-size:12px;line-height:16px;font-weight:400;color:#333;height:24px;padding:2px 16px;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{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:\"\\ea75\";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}  .ng-dropdown-panel--with-search .ng-dropdown-header{border-bottom:none}.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, DrInputComponent], 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}.textView[_nghost-%COMP%]  ng-select.ng-select.ng-select-disabled .ng-select-container, .textView[_nghost-%COMP%]  ng-select.ng-select.ng-select-disabled .ng-select-container:hover, .textView[_nghost-%COMP%]  ng-select.ng-select.ng-select-disabled .ng-select-container:focus-within{background:#fff!important;border:none!important;cursor:default}.textView[_nghost-%COMP%]  ng-select.ng-select.ng-select-disabled .ng-select-container .ng-value, .textView[_nghost-%COMP%]  ng-select.ng-select.ng-select-disabled .ng-select-container:hover .ng-value, .textView[_nghost-%COMP%]  ng-select.ng-select.ng-select-disabled .ng-select-container:focus-within .ng-value{color:#aeabac!important}.textView[_nghost-%COMP%]  ng-select.ng-select.ng-select-disabled .ng-select-container .ng-input input::placeholder{color:#aeabac}.textView[_nghost-%COMP%]  ng-select.ng-select.ng-select-disabled .ng-value-container:hover{text-decoration-line: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{font-size:14px;line-height:24px;font-weight:400;top:0!important;padding:0 50px 0 8px!important;color:#333}[_nghost-%COMP%]     ng-select.ng-select .ng-select-container .ng-input input::placeholder{font-size:14px;line-height:24px;font-weight:400;color:#6d6e6f}[_nghost-%COMP%]     ng-select.ng-select .ng-select-container .ng-value-container{font-size:14px;line-height:24px;font-weight:400;padding:0 0 0 8px;height:100%;overflow:auto}[_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:\"\\ea17\";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{font-size:14px;line-height:24px;font-weight:400;max-height:58px}[_nghost-%COMP%]     ng-select.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{font-size:12px;line-height:16px;font-weight:400;color:#333;height:24px;padding:2px 16px;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{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:\"\\ea74\";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}  .ng-dropdown-panel--with-search .ng-dropdown-header{border-bottom:none}.custom-backdrop[_ngcontent-%COMP%]{position:fixed;inset:0;overflow:hidden;pointer-events:none}"] }); }
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DrSelectComponent, [{
         type: Component,
@@ -1774,7 +1775,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    [labelForId]=\"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    [virtualScroll]=\"virtualScroll\"\n    [typeahead]=\"typeahead\"\n    (search)=\"search.emit($event)\"\n    (scrollToEnd)=\"scrollToEnd.emit($event)\"\n    (keydown.tab)=\"onTabKeypress($event)\"\n    [compareWith]=\"compareWith\"\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\n        ng-header-tmp\n        *ngIf=\"!optionHeaderTemplate && isDisplayingSearchInHeader && items?.length >= minItemsToDisplaySearchInHeader\"\n        let-item=\"item\">\n        <dr-input\n            class=\"dr-select__search\"\n            [ngModel]=\"selectComponent.searchTerm\"\n            (ngModelChange)=\"selectComponent.itemsList.filter($event + '')\"\n            type=\"search\">\n        </dr-input>\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.textView::ng-deep ng-select.ng-select.ng-select-disabled .ng-select-container,:host.textView::ng-deep ng-select.ng-select.ng-select-disabled .ng-select-container:hover,:host.textView::ng-deep ng-select.ng-select.ng-select-disabled .ng-select-container:focus-within{background:#fff!important;border:none!important;cursor:default}:host.textView::ng-deep ng-select.ng-select.ng-select-disabled .ng-select-container .ng-value,:host.textView::ng-deep ng-select.ng-select.ng-select-disabled .ng-select-container:hover .ng-value,:host.textView::ng-deep ng-select.ng-select.ng-select-disabled .ng-select-container:focus-within .ng-value{color:#aeabac!important}:host.textView::ng-deep ng-select.ng-select.ng-select-disabled .ng-select-container .ng-input input::placeholder{color:#aeabac}:host.textView::ng-deep ng-select.ng-select.ng-select-disabled .ng-value-container:hover{text-decoration-line: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{font-size:14px;line-height:24px;font-weight:400;top:0!important;padding:0 50px 0 8px!important;color:#333}:host ::ng-deep ng-select.ng-select .ng-select-container .ng-input input::placeholder{font-size:14px;line-height:24px;font-weight:400;color:#6d6e6f}:host ::ng-deep ng-select.ng-select .ng-select-container .ng-value-container{font-size:14px;line-height:24px;font-weight:400;padding:0 0 0 8px;height:100%;overflow:auto}: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:\"\\ea17\";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{font-size:14px;line-height:24px;font-weight:400;max-height:58px}:host ::ng-deep ng-select.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{font-size:12px;line-height:16px;font-weight:400;color:#333;height:24px;padding:2px 16px;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{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:\"\\ea75\";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}::ng-deep .ng-dropdown-panel--with-search .ng-dropdown-header{border-bottom:none}.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    [labelForId]=\"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    [virtualScroll]=\"virtualScroll\"\n    [typeahead]=\"typeahead\"\n    (search)=\"search.emit($event)\"\n    (scrollToEnd)=\"scrollToEnd.emit($event)\"\n    (keydown.tab)=\"onTabKeypress($event)\"\n    [compareWith]=\"compareWith\"\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\n        ng-header-tmp\n        *ngIf=\"!optionHeaderTemplate && isDisplayingSearchInHeader && items?.length >= minItemsToDisplaySearchInHeader\"\n        let-item=\"item\">\n        <dr-input\n            class=\"dr-select__search\"\n            [ngModel]=\"selectComponent.searchTerm\"\n            (ngModelChange)=\"selectComponent.itemsList.filter($event + '')\"\n            type=\"search\">\n        </dr-input>\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.textView::ng-deep ng-select.ng-select.ng-select-disabled .ng-select-container,:host.textView::ng-deep ng-select.ng-select.ng-select-disabled .ng-select-container:hover,:host.textView::ng-deep ng-select.ng-select.ng-select-disabled .ng-select-container:focus-within{background:#fff!important;border:none!important;cursor:default}:host.textView::ng-deep ng-select.ng-select.ng-select-disabled .ng-select-container .ng-value,:host.textView::ng-deep ng-select.ng-select.ng-select-disabled .ng-select-container:hover .ng-value,:host.textView::ng-deep ng-select.ng-select.ng-select-disabled .ng-select-container:focus-within .ng-value{color:#aeabac!important}:host.textView::ng-deep ng-select.ng-select.ng-select-disabled .ng-select-container .ng-input input::placeholder{color:#aeabac}:host.textView::ng-deep ng-select.ng-select.ng-select-disabled .ng-value-container:hover{text-decoration-line: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{font-size:14px;line-height:24px;font-weight:400;top:0!important;padding:0 50px 0 8px!important;color:#333}:host ::ng-deep ng-select.ng-select .ng-select-container .ng-input input::placeholder{font-size:14px;line-height:24px;font-weight:400;color:#6d6e6f}:host ::ng-deep ng-select.ng-select .ng-select-container .ng-value-container{font-size:14px;line-height:24px;font-weight:400;padding:0 0 0 8px;height:100%;overflow:auto}: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:\"\\ea17\";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{font-size:14px;line-height:24px;font-weight:400;max-height:58px}:host ::ng-deep ng-select.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{font-size:12px;line-height:16px;font-weight:400;color:#333;height:24px;padding:2px 16px;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{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:\"\\ea74\";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}::ng-deep .ng-dropdown-panel--with-search .ng-dropdown-header{border-bottom:none}.custom-backdrop{position:fixed;inset:0;overflow:hidden;pointer-events:none}\n"] }]
     }], function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }]; }, { type: [{
             type: Input
         }, {
@@ -1902,8 +1903,8 @@ class DrShowTimeframePipe {
             }]
     }], null, null); })();
 
-const _c0$J = ["class", "component"];
-const _c1$i = function (a0) { return { "dr-datepicker-preset-date__tags__tag--selected": a0 }; };
+const _c0$K = ["class", "component"];
+const _c1$j = function (a0) { return { "dr-datepicker-preset-date__tags__tag--selected": a0 }; };
 function DrDatePickerCustomHeaderComponent_div_0_div_1_div_2_Template(rf, ctx) { if (rf & 1) {
     const _r7 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "div", 14);
@@ -1913,7 +1914,7 @@ function DrDatePickerCustomHeaderComponent_div_0_div_1_div_2_Template(rf, ctx) {
 } if (rf & 2) {
     const tag_r5 = ctx.$implicit;
     const ctx_r4 = i0.ɵɵnextContext(3);
-    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(4, _c1$i, tag_r5.key === ctx_r4.selectedPresetTag))("drTooltip", ctx_r4.selectedPresetTag === tag_r5.key ? "Unselect preset" : "")("drTooltipPosition", "top");
+    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(4, _c1$j, tag_r5.key === ctx_r4.selectedPresetTag))("drTooltip", ctx_r4.selectedPresetTag === tag_r5.key ? "Unselect preset" : "")("drTooltipPosition", "top");
     i0.ɵɵadvance(1);
     i0.ɵɵtextInterpolate1(" ", tag_r5.label, " ");
 } }
@@ -1961,13 +1962,13 @@ function DrDatePickerCustomHeaderComponent_div_11_div_2_Template(rf, ctx) { if (
     const quarter_r12 = ctx.$implicit;
     const ctx_r11 = i0.ɵɵnextContext(2);
     i0.ɵɵclassMap(quarter_r12 === ctx_r11.selectedQuarter ? "selected" : "");
-    i0.ɵɵclassProp("quarter-selector--disabled", ctx_r11.isQuarterDisabled(quarter_r12));
+    i0.ɵɵclassProp("quarter-selector--disabled", ctx_r11.isQuarterDisabled(quarter_r12))("quarter-selector--select-current-quarter", ctx_r11.datePickerService.selectCurrentQuarter);
     i0.ɵɵadvance(1);
     i0.ɵɵtextInterpolate1(" Q", quarter_r12, " ");
 } }
 function DrDatePickerCustomHeaderComponent_div_11_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 16, 17);
-    i0.ɵɵtemplate(2, DrDatePickerCustomHeaderComponent_div_11_div_2_Template, 2, 5, "div", 18);
+    i0.ɵɵtemplate(2, DrDatePickerCustomHeaderComponent_div_11_div_2_Template, 2, 7, "div", 18);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
@@ -2050,7 +2051,10 @@ class DrDatePickerCustomHeaderComponent {
             _calendar.currentView = this.selectedTimeframe;
             this.setPeriodLabels();
             if (this.selectedTimeframe === CalendarView.FOR_QUARTERS) {
-                this.selectedQuarter = this.datePickerService.getQuarterAccordingToFiscalYear(this._calendar.activeDate);
+                const date = this.datePickerService.selectCurrentQuarter
+                    ? this._calendar.selected ?? this._calendar.activeDate
+                    : this._calendar.activeDate;
+                this.selectedQuarter = this.datePickerService.getQuarterAccordingToFiscalYear(date);
             }
         });
         this.listenToCalendarViewChanges();
@@ -2105,7 +2109,10 @@ class DrDatePickerCustomHeaderComponent {
         const chosenTimeframeOption = this.timeframeOptions.filter((option) => option.value === this.selectedTimeframe)[0];
         this.datePickerService.updateTimeframeAndFormat(chosenTimeframeOption.format);
         if (this.selectedTimeframe === CalendarView.FOR_QUARTERS) {
-            this.selectedQuarter = this.datePickerService.getQuarterAccordingToFiscalYear(this._calendar.activeDate);
+            const date = this.datePickerService.selectCurrentQuarter
+                ? this._calendar.selected ?? this._calendar.activeDate
+                : this._calendar.activeDate;
+            this.selectedQuarter = this.datePickerService.getQuarterAccordingToFiscalYear(date);
         }
     }
     get currentViewIsQuarter() {
@@ -2187,7 +2194,7 @@ class DrDatePickerCustomHeaderComponent {
         calendar.insertBefore(selector.location.nativeElement, calendar.firstChild);
     }
     /** @nocollapse */ static { this.ɵfac = function DrDatePickerCustomHeaderComponent_Factory(t) { return new (t || DrDatePickerCustomHeaderComponent)(i0.ɵɵdirectiveInject(i6.MatCalendar), i0.ɵɵdirectiveInject(i1$4.DateAdapter), i0.ɵɵdirectiveInject(MAT_DATE_FORMATS), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(DrDatePickerService)); }; }
-    /** @nocollapse */ static { this.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: DrDatePickerCustomHeaderComponent, selectors: [["dr-date-picker_custom-header", 8, "component"]], attrs: _c0$J, decls: 12, vars: 4, consts: [["class", "dr-datepicker__timeframe-select__wrapper", 4, "ngIf"], [1, "dr-date-paging"], [1, "dr-date-paging", "flip-page-button", 3, "click"], [1, "dr-icon-arrow-left", "presentation_buttons-navigate_input"], [1, "example-header-label"], [3, "click"], [1, "dr-icon-arrow-right", "presentation_buttons-navigate_input"], ["class", "dr-quarterly-datepicker", 4, "ngIf"], [1, "dr-datepicker__timeframe-select__wrapper"], ["class", "dr-datepicker-preset-date", 4, "ngIf"], ["class", "dr-datepicker__timeframe-select", "bindLabel", "title", "bindValue", "value", 3, "ngModel", "items", "ngModelChange", 4, "ngIf"], [1, "dr-datepicker-preset-date"], [1, "dr-datepicker-preset-date__tags", 3, "ngClass"], ["id", "preset_tag", "class", "dr-datepicker-preset-date__tags__tag", 3, "ngClass", "drTooltip", "drTooltipPosition", "click", 4, "ngFor", "ngForOf"], ["id", "preset_tag", 1, "dr-datepicker-preset-date__tags__tag", 3, "ngClass", "drTooltip", "drTooltipPosition", "click"], ["bindLabel", "title", "bindValue", "value", 1, "dr-datepicker__timeframe-select", 3, "ngModel", "items", "ngModelChange"], [1, "dr-quarterly-datepicker"], ["quarterlyDatePicker", ""], ["class", "quarter-selector", 3, "class", "quarter-selector--disabled", "click", 4, "ngFor", "ngForOf"], [1, "quarter-selector", 3, "click"]], template: function DrDatePickerCustomHeaderComponent_Template(rf, ctx) { if (rf & 1) {
+    /** @nocollapse */ static { this.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: DrDatePickerCustomHeaderComponent, selectors: [["dr-date-picker_custom-header", 8, "component"]], attrs: _c0$K, decls: 12, vars: 4, consts: [["class", "dr-datepicker__timeframe-select__wrapper", 4, "ngIf"], [1, "dr-date-paging"], [1, "dr-date-paging", "flip-page-button", 3, "click"], [1, "dr-icon-arrow-left", "presentation_buttons-navigate_input"], [1, "example-header-label"], [3, "click"], [1, "dr-icon-arrow-right", "presentation_buttons-navigate_input"], ["class", "dr-quarterly-datepicker", 4, "ngIf"], [1, "dr-datepicker__timeframe-select__wrapper"], ["class", "dr-datepicker-preset-date", 4, "ngIf"], ["class", "dr-datepicker__timeframe-select", "bindLabel", "title", "bindValue", "value", 3, "ngModel", "items", "ngModelChange", 4, "ngIf"], [1, "dr-datepicker-preset-date"], [1, "dr-datepicker-preset-date__tags", 3, "ngClass"], ["id", "preset_tag", "class", "dr-datepicker-preset-date__tags__tag", 3, "ngClass", "drTooltip", "drTooltipPosition", "click", 4, "ngFor", "ngForOf"], ["id", "preset_tag", 1, "dr-datepicker-preset-date__tags__tag", 3, "ngClass", "drTooltip", "drTooltipPosition", "click"], ["bindLabel", "title", "bindValue", "value", 1, "dr-datepicker__timeframe-select", 3, "ngModel", "items", "ngModelChange"], [1, "dr-quarterly-datepicker"], ["quarterlyDatePicker", ""], ["class", "quarter-selector", 3, "class", "quarter-selector--disabled", "quarter-selector--select-current-quarter", "click", 4, "ngFor", "ngForOf"], [1, "quarter-selector", 3, "click"]], template: function DrDatePickerCustomHeaderComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵtemplate(0, DrDatePickerCustomHeaderComponent_div_0_Template, 3, 2, "div", 0);
             i0.ɵɵelementStart(1, "div", 1)(2, "div", 2);
             i0.ɵɵlistener("click", function DrDatePickerCustomHeaderComponent_Template_div_click_2_listener() { return ctx.pagingClicked(false); });
@@ -2214,11 +2221,11 @@ class DrDatePickerCustomHeaderComponent {
             i0.ɵɵtextInterpolate(ctx.periodYearLabel);
             i0.ɵɵadvance(3);
             i0.ɵɵproperty("ngIf", ctx.currentViewIsQuarter);
-        } }, dependencies: [i1$2.NgControlStatus, i1$2.NgModel, i1.NgClass, i1.NgForOf, i1.NgIf, DrTooltipDirective, DrSelectComponent, DrShowTimeframePipe], styles: ["[_nghost-%COMP%]{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[_ngcontent-%COMP%]{background-color:#f9faff;padding:16px 32px;border-radius:18px 18px 0 0}.dr-datepicker-preset-date[_ngcontent-%COMP%]{display:flex;flex-direction:column}.dr-datepicker-preset-date__tags[_ngcontent-%COMP%]{display:flex;flex-wrap:wrap;row-gap:8px;padding-bottom:21px;padding-top:10px;font-size:12px}.dr-datepicker-preset-date__tags--solo[_ngcontent-%COMP%]{padding:16px 32px;gap:16px;justify-content:center}.dr-datepicker-preset-date__tags--solo[_ngcontent-%COMP%]   .dr-datepicker-preset-date__tags__tag[_ngcontent-%COMP%]{padding:4px 8px;justify-content:center;display:flex;flex:1 0 0}.dr-datepicker-preset-date__tags__tag[_ngcontent-%COMP%]{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[_ngcontent-%COMP%]{color:#4646ce;background:#f2f2fb;border:1px solid #4646ce}.dr-date-paging[_ngcontent-%COMP%]{display:flex;flex-direction:row;justify-content:space-between;align-items:center;padding:16px 32px 32px;gap:4px}.dr-date-paging.flip-page-button[_ngcontent-%COMP%]{width:20px;height:20px;padding:0;color:#4e566c}.dr-date-paging.flip-page-button[_ngcontent-%COMP%]:hover{border-radius:50%;background:#f2f2fb;color:#4646ce}.example-header-label[_ngcontent-%COMP%]{cursor:pointer}.dr-quarterly-datepicker[_ngcontent-%COMP%]{display:flex;justify-content:space-between;padding:10px}.dr-quarterly-datepicker[_ngcontent-%COMP%]   .quarter-selector[_ngcontent-%COMP%]{display:block;width:74px;height:40px;text-align:center;border-radius:40px;font-weight:400;padding-top:9px}.dr-quarterly-datepicker[_ngcontent-%COMP%]   .quarter-selector[_ngcontent-%COMP%]:hover{background:#f2f2fb;color:#4646ce;font-weight:600;cursor:pointer}.dr-quarterly-datepicker[_ngcontent-%COMP%]   .quarter-selector.selected[_ngcontent-%COMP%]{background-color:#4646ce;color:#f3f7ff;font-weight:600}.dr-quarterly-datepicker[_ngcontent-%COMP%]   .quarter-selector--disabled[_ngcontent-%COMP%], .dr-quarterly-datepicker[_ngcontent-%COMP%]   .quarter-selector--disabled.selected[_ngcontent-%COMP%]{pointer-events:none;background-color:transparent;color:#aeabac;font-weight:400}"], changeDetection: 0 }); }
+        } }, dependencies: [i1$2.NgControlStatus, i1$2.NgModel, i1.NgClass, i1.NgForOf, i1.NgIf, DrTooltipDirective, DrSelectComponent, DrShowTimeframePipe], styles: ["[_nghost-%COMP%]{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[_ngcontent-%COMP%]{background-color:#f9faff;padding:16px 32px;border-radius:18px 18px 0 0}.dr-datepicker-preset-date[_ngcontent-%COMP%]{display:flex;flex-direction:column}.dr-datepicker-preset-date__tags[_ngcontent-%COMP%]{display:flex;flex-wrap:wrap;row-gap:8px;padding-bottom:21px;padding-top:10px;font-size:12px}.dr-datepicker-preset-date__tags--solo[_ngcontent-%COMP%]{padding:16px 32px;gap:16px;justify-content:center}.dr-datepicker-preset-date__tags--solo[_ngcontent-%COMP%]   .dr-datepicker-preset-date__tags__tag[_ngcontent-%COMP%]{padding:4px 8px;justify-content:center;display:flex;flex:1 0 0}.dr-datepicker-preset-date__tags__tag[_ngcontent-%COMP%]{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[_ngcontent-%COMP%]{color:#4646ce;background:#f2f2fb;border:1px solid #4646ce}.dr-date-paging[_ngcontent-%COMP%]{display:flex;flex-direction:row;justify-content:space-between;align-items:center;padding:16px 32px 32px;gap:4px}.dr-date-paging.flip-page-button[_ngcontent-%COMP%]{width:20px;height:20px;padding:0;color:#4e566c}.dr-date-paging.flip-page-button[_ngcontent-%COMP%]:hover{border-radius:50%;background:#f2f2fb;color:#4646ce}.example-header-label[_ngcontent-%COMP%]{cursor:pointer}.dr-quarterly-datepicker[_ngcontent-%COMP%]{display:flex;justify-content:space-between;padding:10px}.dr-quarterly-datepicker[_ngcontent-%COMP%]   .quarter-selector[_ngcontent-%COMP%]{display:block;width:74px;height:40px;text-align:center;border-radius:40px;font-weight:400;padding-top:9px}.dr-quarterly-datepicker[_ngcontent-%COMP%]   .quarter-selector[_ngcontent-%COMP%]:hover{background:#f2f2fb;color:#4646ce;font-weight:600;cursor:pointer}.dr-quarterly-datepicker[_ngcontent-%COMP%]   .quarter-selector.selected[_ngcontent-%COMP%]{background-color:#4646ce;color:#f3f7ff;font-weight:600}.dr-quarterly-datepicker[_ngcontent-%COMP%]   .quarter-selector--disabled[_ngcontent-%COMP%], .dr-quarterly-datepicker[_ngcontent-%COMP%]   .quarter-selector--disabled.selected[_ngcontent-%COMP%]{pointer-events:none;background-color:transparent;color:#aeabac;font-weight:400}.dr-quarterly-datepicker[_ngcontent-%COMP%]   .quarter-selector--select-current-quarter.quarter-selector--disabled.selected[_ngcontent-%COMP%]{pointer-events:none;background-color:#673ab7;opacity:.4;color:#f2f2fb;font-weight:400}"], changeDetection: 0 }); }
 }
 (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             [ngClass]=\"{ 'dr-datepicker-preset-date__tags--solo': !datePickerService.isUsingTimeFrameSelect }\">\n            <div\n                *ngFor=\"let tag of datePickerService.availableDateTagPresets\"\n                id=\"preset_tag\"\n                class=\"dr-datepicker-preset-date__tags__tag\"\n                (click)=\"onSelectPresetTag(tag)\"\n                [ngClass]=\"{ 'dr-datepicker-preset-date__tags__tag--selected': tag.key === selectedPresetTag }\"\n                [drTooltip]=\"selectedPresetTag === tag.key ? 'Unselect preset' : ''\"\n                [drTooltipPosition]=\"'top'\">\n                {{ tag.label }}\n            </div>\n        </div>\n    </div>\n    <dr-select\n        *ngIf=\"datePickerService.isUsingTimeFrameSelect\"\n        class=\"dr-datepicker__timeframe-select\"\n        [ngModel]=\"selectedTimeframe\"\n        [items]=\"timeframeOptions | drShowTimeframePipe: datePickerService.availableTimeframes\"\n        bindLabel=\"title\"\n        bindValue=\"value\"\n        (ngModelChange)=\"setTimeframe($event)\">\n    </dr-select>\n</div>\n\n<div class=\"dr-date-paging\">\n    <div class=\"dr-date-paging flip-page-button\" (click)=\"pagingClicked(false)\">\n        <i class=\"dr-icon-arrow-left presentation_buttons-navigate_input\"></i>\n    </div>\n    <span class=\"example-header-label\">\n        <span (click)=\"switchViewOnClickOnPeriodLabel(calendarView.FOR_MONTHS)\">{{ periodMonthLabel + ' ' }}</span>\n        <span (click)=\"switchViewOnClickOnPeriodLabel(calendarView.FOR_YEARS)\">{{ periodYearLabel }}</span>\n    </span>\n    <div class=\"dr-date-paging flip-page-button\" (click)=\"pagingClicked(true)\">\n        <i class=\"dr-icon-arrow-right presentation_buttons-navigate_input\"></i>\n    </div>\n</div>\n<div #quarterlyDatePicker class=\"dr-quarterly-datepicker\" *ngIf=\"currentViewIsQuarter\">\n    <div\n        *ngFor=\"let quarter of quarters\"\n        class=\"quarter-selector\"\n        (click)=\"onSelectQuarter(quarter)\"\n        [class]=\"quarter === selectedQuarter ? 'selected' : ''\"\n        [class.quarter-selector--disabled]=\"isQuarterDisabled(quarter)\">\n        Q{{ quarter }}\n    </div>\n</div>\n", styles: [":host{height:54px;align-items:center;font-family:Poppins;font-style:normal;font-weight:600;font-size:14px;line-height:22px}.dr-datepicker__timeframe-select__wrapper{background-color:#f9faff;padding:16px 32px;border-radius:18px 18px 0 0}.dr-datepicker-preset-date{display:flex;flex-direction:column}.dr-datepicker-preset-date__tags{display:flex;flex-wrap:wrap;row-gap:8px;padding-bottom:21px;padding-top:10px;font-size:12px}.dr-datepicker-preset-date__tags--solo{padding:16px 32px;gap:16px;justify-content:center}.dr-datepicker-preset-date__tags--solo .dr-datepicker-preset-date__tags__tag{padding:4px 8px;justify-content:center;display:flex;flex:1 0 0}.dr-datepicker-preset-date__tags__tag{cursor:pointer;font-weight:400;line-height:20px!important;padding:2px 8px;border:1px solid #9ea1aa;border-radius:18px;background:#fff;margin-right:4px}.dr-datepicker-preset-date__tags__tag--selected{color:#4646ce;background:#f2f2fb;border:1px solid #4646ce}.dr-date-paging{display:flex;flex-direction:row;justify-content:space-between;align-items:center;padding:16px 32px 32px;gap:4px}.dr-date-paging.flip-page-button{width:20px;height:20px;padding:0;color:#4e566c}.dr-date-paging.flip-page-button:hover{border-radius:50%;background:#f2f2fb;color:#4646ce}.example-header-label{cursor:pointer}.dr-quarterly-datepicker{display:flex;justify-content:space-between;padding:10px}.dr-quarterly-datepicker .quarter-selector{display:block;width:74px;height:40px;text-align:center;border-radius:40px;font-weight:400;padding-top:9px}.dr-quarterly-datepicker .quarter-selector:hover{background:#f2f2fb;color:#4646ce;font-weight:600;cursor:pointer}.dr-quarterly-datepicker .quarter-selector.selected{background-color:#4646ce;color:#f3f7ff;font-weight:600}.dr-quarterly-datepicker .quarter-selector--disabled,.dr-quarterly-datepicker .quarter-selector--disabled.selected{pointer-events:none;background-color:transparent;color:#aeabac;font-weight:400}\n"] }]
+        args: [{ selector: 'dr-date-picker_custom-header.component', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div *ngIf=\"datePickerService.isTimeframeSelectionEnabled\" class=\"dr-datepicker__timeframe-select__wrapper\">\n    <div *ngIf=\"datePickerService.isUsingDateTagPresets\" class=\"dr-datepicker-preset-date\">\n        <div\n            class=\"dr-datepicker-preset-date__tags\"\n            [ngClass]=\"{ 'dr-datepicker-preset-date__tags--solo': !datePickerService.isUsingTimeFrameSelect }\">\n            <div\n                *ngFor=\"let tag of datePickerService.availableDateTagPresets\"\n                id=\"preset_tag\"\n                class=\"dr-datepicker-preset-date__tags__tag\"\n                (click)=\"onSelectPresetTag(tag)\"\n                [ngClass]=\"{ 'dr-datepicker-preset-date__tags__tag--selected': tag.key === selectedPresetTag }\"\n                [drTooltip]=\"selectedPresetTag === tag.key ? 'Unselect preset' : ''\"\n                [drTooltipPosition]=\"'top'\">\n                {{ tag.label }}\n            </div>\n        </div>\n    </div>\n    <dr-select\n        *ngIf=\"datePickerService.isUsingTimeFrameSelect\"\n        class=\"dr-datepicker__timeframe-select\"\n        [ngModel]=\"selectedTimeframe\"\n        [items]=\"timeframeOptions | drShowTimeframePipe: datePickerService.availableTimeframes\"\n        bindLabel=\"title\"\n        bindValue=\"value\"\n        (ngModelChange)=\"setTimeframe($event)\">\n    </dr-select>\n</div>\n\n<div class=\"dr-date-paging\">\n    <div class=\"dr-date-paging flip-page-button\" (click)=\"pagingClicked(false)\">\n        <i class=\"dr-icon-arrow-left presentation_buttons-navigate_input\"></i>\n    </div>\n    <span class=\"example-header-label\">\n        <span (click)=\"switchViewOnClickOnPeriodLabel(calendarView.FOR_MONTHS)\">{{ periodMonthLabel + ' ' }}</span>\n        <span (click)=\"switchViewOnClickOnPeriodLabel(calendarView.FOR_YEARS)\">{{ periodYearLabel }}</span>\n    </span>\n    <div class=\"dr-date-paging flip-page-button\" (click)=\"pagingClicked(true)\">\n        <i class=\"dr-icon-arrow-right presentation_buttons-navigate_input\"></i>\n    </div>\n</div>\n<div #quarterlyDatePicker class=\"dr-quarterly-datepicker\" *ngIf=\"currentViewIsQuarter\">\n    <div\n        *ngFor=\"let quarter of quarters\"\n        class=\"quarter-selector\"\n        (click)=\"onSelectQuarter(quarter)\"\n        [class]=\"quarter === selectedQuarter ? 'selected' : ''\"\n        [class.quarter-selector--disabled]=\"isQuarterDisabled(quarter)\"\n        [class.quarter-selector--select-current-quarter]=\"datePickerService.selectCurrentQuarter\">\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;flex-wrap:wrap;row-gap:8px;padding-bottom:21px;padding-top:10px;font-size:12px}.dr-datepicker-preset-date__tags--solo{padding:16px 32px;gap:16px;justify-content:center}.dr-datepicker-preset-date__tags--solo .dr-datepicker-preset-date__tags__tag{padding:4px 8px;justify-content:center;display:flex;flex:1 0 0}.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}.dr-quarterly-datepicker .quarter-selector--select-current-quarter.quarter-selector--disabled.selected{pointer-events:none;background-color:#673ab7;opacity:.4;color:#f2f2fb;font-weight:400}\n"] }]
     }], function () { return [{ type: i6.MatCalendar }, { type: i1$4.DateAdapter }, { type: CustomDateFormat, decorators: [{
                 type: Inject,
                 args: [MAT_DATE_FORMATS]
@@ -2275,7 +2282,7 @@ function DrButtonComponent_i_4_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵclassMap(ctx_r2.iconAfter);
     i0.ɵɵstyleProp("font-size", ctx_r2.iconAfterSize)("color", ctx_r2.iconAfterColor || "inherit");
 } }
-const _c0$I = ["*"];
+const _c0$J = ["*"];
 class DrButtonComponent {
     constructor() {
         this.theme = 'primary';
@@ -2289,7 +2296,7 @@ class DrButtonComponent {
     /** @nocollapse */ static { this.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: DrButtonComponent, selectors: [["dr-button"]], hostVars: 12, hostBindings: function DrButtonComponent_HostBindings(rf, ctx) { if (rf & 2) {
             i0.ɵɵclassMap(ctx.theme);
             i0.ɵɵclassProp("with-icon", ctx.icon)("with-icon-after", ctx.iconAfter)("disabled", ctx.disabled)("loading", ctx.isLoading)("active", ctx.isActive);
-        } }, inputs: { theme: "theme", icon: "icon", iconColor: "iconColor", iconSize: "iconSize", iconAfter: "iconAfter", iconAfterColor: "iconAfterColor", iconAfterSize: "iconAfterSize", disabled: "disabled", isLoading: "isLoading", isActive: "isActive" }, standalone: true, features: [i0.ɵɵStandaloneFeature], ngContentSelectors: _c0$I, decls: 5, vars: 4, consts: [[3, "disabled"], ["class", "dr-button__icon", 3, "class", "font-size", "color", 4, "ngIf"], ["class", "dr-button__spinner", 4, "ngIf"], ["class", "dr-button__icon dr-button__icon--after", 3, "class", "font-size", "color", 4, "ngIf"], [1, "dr-button__icon"], [1, "dr-button__spinner"], [1, "dr-icon-load"], [1, "dr-button__icon", "dr-button__icon--after"]], template: function DrButtonComponent_Template(rf, ctx) { if (rf & 1) {
+        } }, inputs: { theme: "theme", icon: "icon", iconColor: "iconColor", iconSize: "iconSize", iconAfter: "iconAfter", iconAfterColor: "iconAfterColor", iconAfterSize: "iconAfterSize", disabled: "disabled", isLoading: "isLoading", isActive: "isActive" }, standalone: true, features: [i0.ɵɵStandaloneFeature], ngContentSelectors: _c0$J, decls: 5, vars: 4, consts: [[3, "disabled"], ["class", "dr-button__icon", 3, "class", "font-size", "color", 4, "ngIf"], ["class", "dr-button__spinner", 4, "ngIf"], ["class", "dr-button__icon dr-button__icon--after", 3, "class", "font-size", "color", 4, "ngIf"], [1, "dr-button__icon"], [1, "dr-button__spinner"], [1, "dr-icon-load"], [1, "dr-button__icon", "dr-button__icon--after"]], template: function DrButtonComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef();
             i0.ɵɵelementStart(0, "button", 0);
             i0.ɵɵtemplate(1, DrButtonComponent_i_1_Template, 1, 6, "i", 1);
@@ -2398,7 +2405,7 @@ class DrDatePickerFormatDirective {
             args: ['drDatePickerFormat']
         }] }); })();
 
-const _c0$H = ["datePicker"];
+const _c0$I = ["datePicker"];
 function DrDatePickerComponent_i_0_Template(rf, ctx) { if (rf & 1) {
     const _r4 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "i", 2);
@@ -2527,8 +2534,7 @@ class DrDatePickerComponent {
         this.placeholder = 'Select...';
         this.fiscalYearMonthsModifier = 0;
         this.fiscalYearBack = false;
-        // TODO: Added as temp solution instead of FF, will remove once stable - https://datarailsteam.atlassian.net/browse/DR-35394
-        this.fixForNormalizedValueWithMaxDate = false;
+        this.selectCurrentQuarter = false;
         this.destroyed$ = new Subject();
         this.calendarViewsTimeframeMapping = {
             year: 'multi-year',
@@ -2587,6 +2593,7 @@ class DrDatePickerComponent {
         this.datePickerService.fiscalYearMonthsModifier = this.fiscalYearMonthsModifier;
         this.datePickerService.fiscalYearBack = this.fiscalYearBack;
         this.datePickerService.datepickerFilter = this.dateFilter;
+        this.datePickerService.selectCurrentQuarter = this.selectCurrentQuarter;
     }
     ngOnDestroy() {
         this.destroyed$.next();
@@ -2602,6 +2609,9 @@ class DrDatePickerComponent {
         if (changes.fiscalYearBack) {
             this.datePickerService.fiscalYearBack = this.fiscalYearBack;
         }
+        if (changes.selectCurrentQuarter) {
+            this.datePickerService.selectCurrentQuarter = this.selectCurrentQuarter;
+        }
     }
     /**
      * Updating component inner value according to datepicker timeframe (day, month etc.)
@@ -2609,7 +2619,7 @@ class DrDatePickerComponent {
      */
     tryToNormalizeTimeframe() {
         const timeframe = this.datePickerService.timeframe;
-        let normalizedValue = this.innerValue.clone();
+        const normalizedValue = this.innerValue.clone();
         const unit = timeframe === TimeframeOption.WEEK ? 'isoWeek' : timeframe;
         switch (this.periodPosition) {
             case DatePickerPeriodPosition.START_OF_PERIOD:
@@ -2657,10 +2667,6 @@ class DrDatePickerComponent {
                 normalizedValue.startOf(unit).set('hours', 12);
                 break;
         }
-        if (this.fixForNormalizedValueWithMaxDate) {
-            const minUnix = Math.min(normalizedValue.unix(), this._max.unix());
-            normalizedValue = moment__default.unix(minUnix).utc();
-        }
         this.datePickerService.innerValue = normalizedValue;
     }
     chosenPeriodHandler(chosenDate, timeframe, picker) {
@@ -2771,14 +2777,14 @@ class DrDatePickerComponent {
     }
     /** @nocollapse */ static { this.ɵfac = function DrDatePickerComponent_Factory(t) { return new (t || DrDatePickerComponent)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(i1$4.DateAdapter), i0.ɵɵdirectiveInject(DrDatePickerService)); }; }
     /** @nocollapse */ static { this.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: DrDatePickerComponent, selectors: [["dr-date-picker"]], viewQuery: function DrDatePickerComponent_Query(rf, ctx) { if (rf & 1) {
-            i0.ɵɵviewQuery(_c0$H, 5);
+            i0.ɵɵviewQuery(_c0$I, 5);
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.datePicker = _t.first);
         } }, hostVars: 7, hostBindings: function DrDatePickerComponent_HostBindings(rf, ctx) { if (rf & 2) {
             i0.ɵɵattribute("id", ctx.hostId);
             i0.ɵɵclassProp("use-button-picker", ctx.useButton)("disabled", ctx.disabled)("active", ctx.active);
-        } }, inputs: { id: "id", useButton: "useButton", buttonLabel: "buttonLabel", iconAfterButton: "iconAfterButton", useDarkTheme: "useDarkTheme", format: "format", min: "min", max: "max", startAt: "startAt", periodPosition: "periodPosition", placeholder: "placeholder", disabled: "disabled", fiscalYearMonthsModifier: "fiscalYearMonthsModifier", fiscalYearBack: "fiscalYearBack", datepickerFilter: "datepickerFilter", fixForNormalizedValueWithMaxDate: "fixForNormalizedValueWithMaxDate" }, features: [i0.ɵɵProvidersFeature([
+        } }, inputs: { id: "id", useButton: "useButton", buttonLabel: "buttonLabel", iconAfterButton: "iconAfterButton", useDarkTheme: "useDarkTheme", format: "format", min: "min", max: "max", startAt: "startAt", periodPosition: "periodPosition", placeholder: "placeholder", disabled: "disabled", fiscalYearMonthsModifier: "fiscalYearMonthsModifier", fiscalYearBack: "fiscalYearBack", datepickerFilter: "datepickerFilter", selectCurrentQuarter: "selectCurrentQuarter" }, features: [i0.ɵɵProvidersFeature([
                 { provide: NG_VALUE_ACCESSOR, useExisting: DrDatePickerComponent, multi: true },
                 { provide: DateAdapter, useClass: CustomDateAdapter },
                 { provide: MAT_DATE_RANGE_SELECTION_STRATEGY, useClass: WeekSelectionStrategy },
@@ -2844,7 +2850,7 @@ class DrDatePickerComponent {
             type: Input
         }], datepickerFilter: [{
             type: Input
-        }], fixForNormalizedValueWithMaxDate: [{
+        }], selectCurrentQuarter: [{
             type: Input
         }], datePicker: [{
             type: ViewChild,
@@ -3978,7 +3984,7 @@ class ListTagComponent {
             type: Output
         }] }); })();
 
-const _c0$G = ["dynamicInputRef"];
+const _c0$H = ["dynamicInputRef"];
 function DrSelectAddItemComponent_div_5_p_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "p", 12);
     i0.ɵɵtext(1);
@@ -4068,7 +4074,7 @@ class DrSelectAddItemComponent {
     }
     /** @nocollapse */ static { this.ɵfac = function DrSelectAddItemComponent_Factory(t) { return new (t || DrSelectAddItemComponent)(i0.ɵɵdirectiveInject(DrSelectComponent)); }; }
     /** @nocollapse */ static { this.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: DrSelectAddItemComponent, selectors: [["dr-select-add-item"]], viewQuery: function DrSelectAddItemComponent_Query(rf, ctx) { if (rf & 1) {
-            i0.ɵɵviewQuery(_c0$G, 5);
+            i0.ɵɵviewQuery(_c0$H, 5);
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.inputRef = _t.first);
@@ -4557,7 +4563,7 @@ class DrTagComponent {
             type: Output
         }] }); })();
 
-const _c0$F = ["*"];
+const _c0$G = ["*"];
 class RadioButtonComponent {
     get disabled() {
         return this._disabled;
@@ -4611,7 +4617,7 @@ class RadioButtonComponent {
                     useExisting: RadioButtonComponent,
                     multi: true,
                 },
-            ])], ngContentSelectors: _c0$F, decls: 4, vars: 5, consts: [["type", "radio", 3, "name", "value", "ngModel", "disabled", "change", "ngModelChange", "click"]], template: function RadioButtonComponent_Template(rf, ctx) { if (rf & 1) {
+            ])], ngContentSelectors: _c0$G, decls: 4, vars: 5, consts: [["type", "radio", 3, "name", "value", "ngModel", "disabled", "change", "ngModelChange", "click"]], template: function RadioButtonComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef();
             i0.ɵɵelementStart(0, "label")(1, "input", 0);
             i0.ɵɵlistener("change", function RadioButtonComponent_Template_input_change_1_listener() { return ctx.valueChanged(ctx.value); })("ngModelChange", function RadioButtonComponent_Template_input_ngModelChange_1_listener($event) { return ctx.modelValue = $event; })("click", function RadioButtonComponent_Template_input_click_1_listener($event) { return ctx.toggleChange($event); });
@@ -4650,8 +4656,8 @@ class RadioButtonComponent {
             type: Input
         }] }); })();
 
-const _c0$E = [[["dr-radio-button"]]];
-const _c1$h = ["dr-radio-button"];
+const _c0$F = [[["dr-radio-button"]]];
+const _c1$i = ["dr-radio-button"];
 class RadioGroupComponent {
     get value() {
         return this._value;
@@ -4790,8 +4796,8 @@ class RadioGroupComponent {
                     useExisting: forwardRef((() => RadioGroupComponent)),
                     multi: true,
                 },
-            ])], ngContentSelectors: _c1$h, decls: 1, vars: 0, template: function RadioGroupComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵprojectionDef(_c0$E);
+            ])], ngContentSelectors: _c1$i, decls: 1, vars: 0, template: function RadioGroupComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵprojectionDef(_c0$F);
             i0.ɵɵprojection(0);
         } }, encapsulation: 2, changeDetection: 0 }); }
 }
@@ -4828,8 +4834,8 @@ class RadioGroupComponent {
             type: Output
         }] }); })();
 
-const _c0$D = ["checkboxContent"];
-const _c1$g = ["*"];
+const _c0$E = ["checkboxContent"];
+const _c1$h = ["*"];
 class CheckboxComponent {
     get indeterminate() {
         return this._indeterminate;
@@ -4879,7 +4885,7 @@ class CheckboxComponent {
     }
     /** @nocollapse */ static { this.ɵfac = function CheckboxComponent_Factory(t) { return new (t || CheckboxComponent)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); }; }
     /** @nocollapse */ static { this.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: CheckboxComponent, selectors: [["dr-checkbox"]], viewQuery: function CheckboxComponent_Query(rf, ctx) { if (rf & 1) {
-            i0.ɵɵviewQuery(_c0$D, 5);
+            i0.ɵɵviewQuery(_c0$E, 5);
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.checkboxContent = _t.first);
@@ -4887,7 +4893,7 @@ class CheckboxComponent {
             i0.ɵɵattribute("id", ctx.hostId);
             i0.ɵɵclassMap(ctx.theme);
             i0.ɵɵclassProp("disabled", ctx.disabled)("text-nowrap", ctx.textNowrap);
-        } }, inputs: { id: "id", checkedStatus: "checkedStatus", disabled: "disabled", icon: "icon", theme: "theme", indeterminate: "indeterminate", textNowrap: "textNowrap" }, outputs: { checkedChange: "checkedChange" }, features: [i0.ɵɵProvidersFeature([{ provide: NG_VALUE_ACCESSOR, useExisting: CheckboxComponent, multi: true }])], ngContentSelectors: _c1$g, decls: 5, vars: 9, consts: [["type", "checkbox", 3, "checked", "disabled", "change", "click"], [3, "drTooltip"], ["checkboxContent", ""]], template: function CheckboxComponent_Template(rf, ctx) { if (rf & 1) {
+        } }, inputs: { id: "id", checkedStatus: "checkedStatus", disabled: "disabled", icon: "icon", theme: "theme", indeterminate: "indeterminate", textNowrap: "textNowrap" }, outputs: { checkedChange: "checkedChange" }, features: [i0.ɵɵProvidersFeature([{ provide: NG_VALUE_ACCESSOR, useExisting: CheckboxComponent, multi: true }])], ngContentSelectors: _c1$h, decls: 5, vars: 9, consts: [["type", "checkbox", 3, "checked", "disabled", "change", "click"], [3, "drTooltip"], ["checkboxContent", ""]], template: function CheckboxComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef();
             i0.ɵɵelementStart(0, "label")(1, "input", 0);
             i0.ɵɵlistener("change", function CheckboxComponent_Template_input_change_1_listener($event) { return ctx.setValue($event); })("click", function CheckboxComponent_Template_input_click_1_listener($event) { return $event.stopPropagation(); });
@@ -4941,7 +4947,7 @@ class CheckboxComponent {
             args: ['checkboxContent']
         }] }); })();
 
-const _c0$C = ["*"];
+const _c0$D = ["*"];
 var LinkTheme;
 (function (LinkTheme) {
     LinkTheme["DEFAULT"] = "DEFAULT";
@@ -4957,7 +4963,7 @@ class DrLinkComponent {
         this.theme = LinkTheme.DEFAULT;
     }
     /** @nocollapse */ static { this.ɵfac = function DrLinkComponent_Factory(t) { return new (t || DrLinkComponent)(); }; }
-    /** @nocollapse */ static { this.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: DrLinkComponent, selectors: [["dr-link"]], inputs: { link: "link", fontSize: "fontSize", fontWeight: "fontWeight", theme: "theme" }, ngContentSelectors: _c0$C, decls: 2, vars: 7, consts: [[1, "dr-link", 3, "href"]], template: function DrLinkComponent_Template(rf, ctx) { if (rf & 1) {
+    /** @nocollapse */ static { this.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: DrLinkComponent, selectors: [["dr-link"]], inputs: { link: "link", fontSize: "fontSize", fontWeight: "fontWeight", theme: "theme" }, ngContentSelectors: _c0$D, decls: 2, vars: 7, consts: [[1, "dr-link", 3, "href"]], template: function DrLinkComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef();
             i0.ɵɵelementStart(0, "a", 0);
             i0.ɵɵprojection(1);
@@ -4982,8 +4988,8 @@ class DrLinkComponent {
             type: Input
         }] }); })();
 
-const _c0$B = ["class", "component"];
-const _c1$f = function (a0) { return { "dr-datepicker-preset-date__tags__tag--selected": a0 }; };
+const _c0$C = ["class", "component"];
+const _c1$g = function (a0) { return { "dr-datepicker-preset-date__tags__tag--selected": a0 }; };
 function DrFiscalMonthCalendarHeaderComponent_div_0_div_1_div_2_Template(rf, ctx) { if (rf & 1) {
     const _r7 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "div", 14);
@@ -4993,7 +4999,7 @@ function DrFiscalMonthCalendarHeaderComponent_div_0_div_1_div_2_Template(rf, ctx
 } if (rf & 2) {
     const tag_r5 = ctx.$implicit;
     const ctx_r4 = i0.ɵɵnextContext(3);
-    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(4, _c1$f, tag_r5.key === ctx_r4.selectedPresetTag))("drTooltip", ctx_r4.selectedPresetTag === tag_r5.key ? "Unselect preset" : "")("drTooltipPosition", "top");
+    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(4, _c1$g, tag_r5.key === ctx_r4.selectedPresetTag))("drTooltip", ctx_r4.selectedPresetTag === tag_r5.key ? "Unselect preset" : "")("drTooltipPosition", "top");
     i0.ɵɵadvance(1);
     i0.ɵɵtextInterpolate1(" ", tag_r5.label, " ");
 } }
@@ -5041,13 +5047,13 @@ function DrFiscalMonthCalendarHeaderComponent_div_11_div_2_Template(rf, ctx) { i
     const quarter_r12 = ctx.$implicit;
     const ctx_r11 = i0.ɵɵnextContext(2);
     i0.ɵɵclassMap(quarter_r12 === ctx_r11.selectedQuarter ? "selected" : "");
-    i0.ɵɵclassProp("quarter-selector--disabled", ctx_r11.isQuarterDisabled(quarter_r12));
+    i0.ɵɵclassProp("quarter-selector--disabled", ctx_r11.isQuarterDisabled(quarter_r12))("quarter-selector--select-current-quarter", ctx_r11.datePickerService.selectCurrentQuarter);
     i0.ɵɵadvance(1);
     i0.ɵɵtextInterpolate1(" Q", quarter_r12, " ");
 } }
 function DrFiscalMonthCalendarHeaderComponent_div_11_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 16, 17);
-    i0.ɵɵtemplate(2, DrFiscalMonthCalendarHeaderComponent_div_11_div_2_Template, 2, 5, "div", 18);
+    i0.ɵɵtemplate(2, DrFiscalMonthCalendarHeaderComponent_div_11_div_2_Template, 2, 7, "div", 18);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
@@ -5085,7 +5091,7 @@ class DrFiscalMonthCalendarHeaderComponent extends DrDatePickerCustomHeaderCompo
         });
     }
     /** @nocollapse */ static { this.ɵfac = /** @pureOrBreakMyCode */ function () { let ɵDrFiscalMonthCalendarHeaderComponent_BaseFactory; return function DrFiscalMonthCalendarHeaderComponent_Factory(t) { return (ɵDrFiscalMonthCalendarHeaderComponent_BaseFactory || (ɵDrFiscalMonthCalendarHeaderComponent_BaseFactory = i0.ɵɵgetInheritedFactory(DrFiscalMonthCalendarHeaderComponent)))(t || DrFiscalMonthCalendarHeaderComponent); }; }(); }
-    /** @nocollapse */ static { this.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: DrFiscalMonthCalendarHeaderComponent, selectors: [["dr-fiscal-month-calendar-header", 8, "component"]], features: [i0.ɵɵInheritDefinitionFeature], attrs: _c0$B, decls: 12, vars: 4, consts: [["class", "dr-datepicker__timeframe-select__wrapper", 4, "ngIf"], [1, "dr-date-paging"], [1, "dr-date-paging", "flip-page-button", 3, "click"], [1, "dr-icon-arrow-left", "presentation_buttons-navigate_input"], [1, "example-header-label"], [3, "click"], [1, "dr-icon-arrow-right", "presentation_buttons-navigate_input"], ["class", "dr-quarterly-datepicker", 4, "ngIf"], [1, "dr-datepicker__timeframe-select__wrapper"], ["class", "dr-datepicker-preset-date", 4, "ngIf"], ["class", "dr-datepicker__timeframe-select", "bindLabel", "title", "bindValue", "value", 3, "ngModel", "items", "ngModelChange", 4, "ngIf"], [1, "dr-datepicker-preset-date"], [1, "dr-datepicker-preset-date__tags", 3, "ngClass"], ["id", "preset_tag", "class", "dr-datepicker-preset-date__tags__tag", 3, "ngClass", "drTooltip", "drTooltipPosition", "click", 4, "ngFor", "ngForOf"], ["id", "preset_tag", 1, "dr-datepicker-preset-date__tags__tag", 3, "ngClass", "drTooltip", "drTooltipPosition", "click"], ["bindLabel", "title", "bindValue", "value", 1, "dr-datepicker__timeframe-select", 3, "ngModel", "items", "ngModelChange"], [1, "dr-quarterly-datepicker"], ["quarterlyDatePicker", ""], ["class", "quarter-selector", 3, "class", "quarter-selector--disabled", "click", 4, "ngFor", "ngForOf"], [1, "quarter-selector", 3, "click"]], template: function DrFiscalMonthCalendarHeaderComponent_Template(rf, ctx) { if (rf & 1) {
+    /** @nocollapse */ static { this.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: DrFiscalMonthCalendarHeaderComponent, selectors: [["dr-fiscal-month-calendar-header", 8, "component"]], features: [i0.ɵɵInheritDefinitionFeature], 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"], ["class", "dr-datepicker__timeframe-select", "bindLabel", "title", "bindValue", "value", 3, "ngModel", "items", "ngModelChange", 4, "ngIf"], [1, "dr-datepicker-preset-date"], [1, "dr-datepicker-preset-date__tags", 3, "ngClass"], ["id", "preset_tag", "class", "dr-datepicker-preset-date__tags__tag", 3, "ngClass", "drTooltip", "drTooltipPosition", "click", 4, "ngFor", "ngForOf"], ["id", "preset_tag", 1, "dr-datepicker-preset-date__tags__tag", 3, "ngClass", "drTooltip", "drTooltipPosition", "click"], ["bindLabel", "title", "bindValue", "value", 1, "dr-datepicker__timeframe-select", 3, "ngModel", "items", "ngModelChange"], [1, "dr-quarterly-datepicker"], ["quarterlyDatePicker", ""], ["class", "quarter-selector", 3, "class", "quarter-selector--disabled", "quarter-selector--select-current-quarter", "click", 4, "ngFor", "ngForOf"], [1, "quarter-selector", 3, "click"]], template: function DrFiscalMonthCalendarHeaderComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵtemplate(0, DrFiscalMonthCalendarHeaderComponent_div_0_Template, 3, 2, "div", 0);
             i0.ɵɵelementStart(1, "div", 1)(2, "div", 2);
             i0.ɵɵlistener("click", function DrFiscalMonthCalendarHeaderComponent_Template_div_click_2_listener() { return ctx.pagingClicked(false); });
@@ -5112,11 +5118,11 @@ class DrFiscalMonthCalendarHeaderComponent extends DrDatePickerCustomHeaderCompo
             i0.ɵɵtextInterpolate(ctx.periodYearLabel);
             i0.ɵɵadvance(3);
             i0.ɵɵproperty("ngIf", ctx.currentViewIsQuarter);
-        } }, dependencies: [i1$2.NgControlStatus, i1$2.NgModel, i1.NgClass, i1.NgForOf, i1.NgIf, DrTooltipDirective, DrSelectComponent, DrShowTimeframePipe], styles: ["[_nghost-%COMP%]{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[_ngcontent-%COMP%]{background-color:#f9faff;padding:16px 32px;border-radius:18px 18px 0 0}.dr-datepicker-preset-date[_ngcontent-%COMP%]{display:flex;flex-direction:column}.dr-datepicker-preset-date__tags[_ngcontent-%COMP%]{display:flex;flex-wrap:wrap;row-gap:8px;padding-bottom:21px;padding-top:10px;font-size:12px}.dr-datepicker-preset-date__tags--solo[_ngcontent-%COMP%]{padding:16px 32px;gap:16px;justify-content:center}.dr-datepicker-preset-date__tags--solo[_ngcontent-%COMP%]   .dr-datepicker-preset-date__tags__tag[_ngcontent-%COMP%]{padding:4px 8px;justify-content:center;display:flex;flex:1 0 0}.dr-datepicker-preset-date__tags__tag[_ngcontent-%COMP%]{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[_ngcontent-%COMP%]{color:#4646ce;background:#f2f2fb;border:1px solid #4646ce}.dr-date-paging[_ngcontent-%COMP%]{display:flex;flex-direction:row;justify-content:space-between;align-items:center;padding:16px 32px 32px;gap:4px}.dr-date-paging.flip-page-button[_ngcontent-%COMP%]{width:20px;height:20px;padding:0;color:#4e566c}.dr-date-paging.flip-page-button[_ngcontent-%COMP%]:hover{border-radius:50%;background:#f2f2fb;color:#4646ce}.example-header-label[_ngcontent-%COMP%]{cursor:pointer}.dr-quarterly-datepicker[_ngcontent-%COMP%]{display:flex;justify-content:space-between;padding:10px}.dr-quarterly-datepicker[_ngcontent-%COMP%]   .quarter-selector[_ngcontent-%COMP%]{display:block;width:74px;height:40px;text-align:center;border-radius:40px;font-weight:400;padding-top:9px}.dr-quarterly-datepicker[_ngcontent-%COMP%]   .quarter-selector[_ngcontent-%COMP%]:hover{background:#f2f2fb;color:#4646ce;font-weight:600;cursor:pointer}.dr-quarterly-datepicker[_ngcontent-%COMP%]   .quarter-selector.selected[_ngcontent-%COMP%]{background-color:#4646ce;color:#f3f7ff;font-weight:600}.dr-quarterly-datepicker[_ngcontent-%COMP%]   .quarter-selector--disabled[_ngcontent-%COMP%], .dr-quarterly-datepicker[_ngcontent-%COMP%]   .quarter-selector--disabled.selected[_ngcontent-%COMP%]{pointer-events:none;background-color:transparent;color:#aeabac;font-weight:400}"], changeDetection: 0 }); }
+        } }, dependencies: [i1$2.NgControlStatus, i1$2.NgModel, i1.NgClass, i1.NgForOf, i1.NgIf, DrTooltipDirective, DrSelectComponent, DrShowTimeframePipe], styles: ["[_nghost-%COMP%]{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[_ngcontent-%COMP%]{background-color:#f9faff;padding:16px 32px;border-radius:18px 18px 0 0}.dr-datepicker-preset-date[_ngcontent-%COMP%]{display:flex;flex-direction:column}.dr-datepicker-preset-date__tags[_ngcontent-%COMP%]{display:flex;flex-wrap:wrap;row-gap:8px;padding-bottom:21px;padding-top:10px;font-size:12px}.dr-datepicker-preset-date__tags--solo[_ngcontent-%COMP%]{padding:16px 32px;gap:16px;justify-content:center}.dr-datepicker-preset-date__tags--solo[_ngcontent-%COMP%]   .dr-datepicker-preset-date__tags__tag[_ngcontent-%COMP%]{padding:4px 8px;justify-content:center;display:flex;flex:1 0 0}.dr-datepicker-preset-date__tags__tag[_ngcontent-%COMP%]{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[_ngcontent-%COMP%]{color:#4646ce;background:#f2f2fb;border:1px solid #4646ce}.dr-date-paging[_ngcontent-%COMP%]{display:flex;flex-direction:row;justify-content:space-between;align-items:center;padding:16px 32px 32px;gap:4px}.dr-date-paging.flip-page-button[_ngcontent-%COMP%]{width:20px;height:20px;padding:0;color:#4e566c}.dr-date-paging.flip-page-button[_ngcontent-%COMP%]:hover{border-radius:50%;background:#f2f2fb;color:#4646ce}.example-header-label[_ngcontent-%COMP%]{cursor:pointer}.dr-quarterly-datepicker[_ngcontent-%COMP%]{display:flex;justify-content:space-between;padding:10px}.dr-quarterly-datepicker[_ngcontent-%COMP%]   .quarter-selector[_ngcontent-%COMP%]{display:block;width:74px;height:40px;text-align:center;border-radius:40px;font-weight:400;padding-top:9px}.dr-quarterly-datepicker[_ngcontent-%COMP%]   .quarter-selector[_ngcontent-%COMP%]:hover{background:#f2f2fb;color:#4646ce;font-weight:600;cursor:pointer}.dr-quarterly-datepicker[_ngcontent-%COMP%]   .quarter-selector.selected[_ngcontent-%COMP%]{background-color:#4646ce;color:#f3f7ff;font-weight:600}.dr-quarterly-datepicker[_ngcontent-%COMP%]   .quarter-selector--disabled[_ngcontent-%COMP%], .dr-quarterly-datepicker[_ngcontent-%COMP%]   .quarter-selector--disabled.selected[_ngcontent-%COMP%]{pointer-events:none;background-color:transparent;color:#aeabac;font-weight:400}.dr-quarterly-datepicker[_ngcontent-%COMP%]   .quarter-selector--select-current-quarter.quarter-selector--disabled.selected[_ngcontent-%COMP%]{pointer-events:none;background-color:#673ab7;opacity:.4;color:#f2f2fb;font-weight:400}"], changeDetection: 0 }); }
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DrFiscalMonthCalendarHeaderComponent, [{
         type: Component,
-        args: [{ selector: 'dr-fiscal-month-calendar-header.component', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div *ngIf=\"datePickerService.isTimeframeSelectionEnabled\" class=\"dr-datepicker__timeframe-select__wrapper\">\n    <div *ngIf=\"datePickerService.isUsingDateTagPresets\" class=\"dr-datepicker-preset-date\">\n        <div class=\"dr-datepicker-preset-date__tags\"\n             [ngClass]=\"{ 'dr-datepicker-preset-date__tags--solo': !datePickerService.isUsingTimeFrameSelect }\">\n            <div\n                *ngFor=\"let tag of datePickerService.availableDateTagPresets\"\n                id=\"preset_tag\"\n                class=\"dr-datepicker-preset-date__tags__tag\"\n                (click)=\"onSelectPresetTag(tag)\"\n                [ngClass]=\"{ 'dr-datepicker-preset-date__tags__tag--selected': tag.key === selectedPresetTag }\"\n                [drTooltip]=\"selectedPresetTag === tag.key ? 'Unselect preset' : ''\"\n                [drTooltipPosition]=\"'top'\">\n                {{ tag.label }}\n            </div>\n        </div>\n    </div>\n    <dr-select\n        *ngIf=\"datePickerService.isUsingTimeFrameSelect\"\n        class=\"dr-datepicker__timeframe-select\"\n        [ngModel]=\"selectedTimeframe\"\n        [items]=\"timeframeOptions | drShowTimeframePipe: datePickerService.availableTimeframes\"\n        bindLabel=\"title\"\n        bindValue=\"value\"\n        (ngModelChange)=\"setTimeframe($event)\">\n    </dr-select>\n</div>\n\n<div class=\"dr-date-paging\">\n    <div class=\"dr-date-paging flip-page-button\" (click)=\"pagingClicked(false)\">\n        <i class=\"dr-icon-arrow-left presentation_buttons-navigate_input\"></i>\n    </div>\n    <span class=\"example-header-label\">\n        <span (click)=\"switchViewOnClickOnPeriodLabel(calendarView.FOR_MONTHS)\">{{ periodMonthLabel + ' ' }}</span>\n        <span (click)=\"switchViewOnClickOnPeriodLabel(calendarView.FOR_YEARS)\">{{ periodYearLabel }}</span>\n    </span>\n    <div class=\"dr-date-paging flip-page-button\" (click)=\"pagingClicked(true)\">\n        <i class=\"dr-icon-arrow-right presentation_buttons-navigate_input\"></i>\n    </div>\n</div>\n<div #quarterlyDatePicker class=\"dr-quarterly-datepicker\" *ngIf=\"currentViewIsQuarter\">\n    <div\n        *ngFor=\"let quarter of quarters\"\n        class=\"quarter-selector\"\n        (click)=\"onSelectQuarter(quarter)\"\n        [class]=\"quarter === selectedQuarter ? 'selected' : ''\"\n        [class.quarter-selector--disabled]=\"isQuarterDisabled(quarter)\">\n        Q{{ quarter }}\n    </div>\n</div>\n", styles: [":host{height:54px;align-items:center;font-family:Poppins;font-style:normal;font-weight:600;font-size:14px;line-height:22px}.dr-datepicker__timeframe-select__wrapper{background-color:#f9faff;padding:16px 32px;border-radius:18px 18px 0 0}.dr-datepicker-preset-date{display:flex;flex-direction:column}.dr-datepicker-preset-date__tags{display:flex;flex-wrap:wrap;row-gap:8px;padding-bottom:21px;padding-top:10px;font-size:12px}.dr-datepicker-preset-date__tags--solo{padding:16px 32px;gap:16px;justify-content:center}.dr-datepicker-preset-date__tags--solo .dr-datepicker-preset-date__tags__tag{padding:4px 8px;justify-content:center;display:flex;flex:1 0 0}.dr-datepicker-preset-date__tags__tag{cursor:pointer;font-weight:400;line-height:20px!important;padding:2px 8px;border:1px solid #9ea1aa;border-radius:18px;background:#fff;margin-right:4px}.dr-datepicker-preset-date__tags__tag--selected{color:#4646ce;background:#f2f2fb;border:1px solid #4646ce}.dr-date-paging{display:flex;flex-direction:row;justify-content:space-between;align-items:center;padding:16px 32px 32px;gap:4px}.dr-date-paging.flip-page-button{width:20px;height:20px;padding:0;color:#4e566c}.dr-date-paging.flip-page-button:hover{border-radius:50%;background:#f2f2fb;color:#4646ce}.example-header-label{cursor:pointer}.dr-quarterly-datepicker{display:flex;justify-content:space-between;padding:10px}.dr-quarterly-datepicker .quarter-selector{display:block;width:74px;height:40px;text-align:center;border-radius:40px;font-weight:400;padding-top:9px}.dr-quarterly-datepicker .quarter-selector:hover{background:#f2f2fb;color:#4646ce;font-weight:600;cursor:pointer}.dr-quarterly-datepicker .quarter-selector.selected{background-color:#4646ce;color:#f3f7ff;font-weight:600}.dr-quarterly-datepicker .quarter-selector--disabled,.dr-quarterly-datepicker .quarter-selector--disabled.selected{pointer-events:none;background-color:transparent;color:#aeabac;font-weight:400}\n"] }]
+        args: [{ selector: 'dr-fiscal-month-calendar-header.component', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div *ngIf=\"datePickerService.isTimeframeSelectionEnabled\" class=\"dr-datepicker__timeframe-select__wrapper\">\n    <div *ngIf=\"datePickerService.isUsingDateTagPresets\" class=\"dr-datepicker-preset-date\">\n        <div\n            class=\"dr-datepicker-preset-date__tags\"\n            [ngClass]=\"{ 'dr-datepicker-preset-date__tags--solo': !datePickerService.isUsingTimeFrameSelect }\">\n            <div\n                *ngFor=\"let tag of datePickerService.availableDateTagPresets\"\n                id=\"preset_tag\"\n                class=\"dr-datepicker-preset-date__tags__tag\"\n                (click)=\"onSelectPresetTag(tag)\"\n                [ngClass]=\"{ 'dr-datepicker-preset-date__tags__tag--selected': tag.key === selectedPresetTag }\"\n                [drTooltip]=\"selectedPresetTag === tag.key ? 'Unselect preset' : ''\"\n                [drTooltipPosition]=\"'top'\">\n                {{ tag.label }}\n            </div>\n        </div>\n    </div>\n    <dr-select\n        *ngIf=\"datePickerService.isUsingTimeFrameSelect\"\n        class=\"dr-datepicker__timeframe-select\"\n        [ngModel]=\"selectedTimeframe\"\n        [items]=\"timeframeOptions | drShowTimeframePipe: datePickerService.availableTimeframes\"\n        bindLabel=\"title\"\n        bindValue=\"value\"\n        (ngModelChange)=\"setTimeframe($event)\">\n    </dr-select>\n</div>\n\n<div class=\"dr-date-paging\">\n    <div class=\"dr-date-paging flip-page-button\" (click)=\"pagingClicked(false)\">\n        <i class=\"dr-icon-arrow-left presentation_buttons-navigate_input\"></i>\n    </div>\n    <span class=\"example-header-label\">\n        <span (click)=\"switchViewOnClickOnPeriodLabel(calendarView.FOR_MONTHS)\">{{ periodMonthLabel + ' ' }}</span>\n        <span (click)=\"switchViewOnClickOnPeriodLabel(calendarView.FOR_YEARS)\">{{ periodYearLabel }}</span>\n    </span>\n    <div class=\"dr-date-paging flip-page-button\" (click)=\"pagingClicked(true)\">\n        <i class=\"dr-icon-arrow-right presentation_buttons-navigate_input\"></i>\n    </div>\n</div>\n<div #quarterlyDatePicker class=\"dr-quarterly-datepicker\" *ngIf=\"currentViewIsQuarter\">\n    <div\n        *ngFor=\"let quarter of quarters\"\n        class=\"quarter-selector\"\n        (click)=\"onSelectQuarter(quarter)\"\n        [class]=\"quarter === selectedQuarter ? 'selected' : ''\"\n        [class.quarter-selector--disabled]=\"isQuarterDisabled(quarter)\"\n        [class.quarter-selector--select-current-quarter]=\"datePickerService.selectCurrentQuarter\">\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;flex-wrap:wrap;row-gap:8px;padding-bottom:21px;padding-top:10px;font-size:12px}.dr-datepicker-preset-date__tags--solo{padding:16px 32px;gap:16px;justify-content:center}.dr-datepicker-preset-date__tags--solo .dr-datepicker-preset-date__tags__tag{padding:4px 8px;justify-content:center;display:flex;flex:1 0 0}.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}.dr-quarterly-datepicker .quarter-selector--select-current-quarter.quarter-selector--disabled.selected{pointer-events:none;background-color:#673ab7;opacity:.4;color:#f2f2fb;font-weight:400}\n"] }]
     }], null, null); })();
 
 function DrFiscalMonthCalendarPickerComponent_i_0_Template(rf, ctx) { if (rf & 1) {
@@ -5276,22 +5282,6 @@ class DrFiscalMonthCalendarPickerComponent extends DrDatePickerComponent {
                 ], template: "<i *ngIf=\"!useButton\" class=\"dr-icon-date\" (click)=\"datePicker.open()\"></i>\n\n<ng-container *ngIf=\"(datePickerService.timeframe$ | async) === 'week'\">\n    <input\n        [attr.id]=\"id\"\n        [ngModel]=\"input.value\"\n        (click)=\"datePicker.open()\"\n        [disabled]=\"disabled\"\n        [placeholder]=\"placeholder\"\n        [readonly]=\"readonly\"\n        [min]=\"_min\"\n        [max]=\"_max\" />\n\n    <mat-date-range-input [formGroup]=\"rangeForm\" [rangePicker]=\"datePicker\" [dateFilter]=\"dateFilter\" class=\"range-input\">\n        <input\n            matStartDate\n            #input\n            [drDatePickerFormat]=\"datePickerService.format$ | async\"\n            formControlName=\"start\"\n            (dateChange)=\"valueChangedInCalendar(rangeForm.value.start)\" />\n        <input matEndDate [drDatePickerFormat]=\"datePickerService.format$ | async\" formControlName=\"end\" />\n    </mat-date-range-input>\n\n    <mat-date-range-picker\n        #datePicker\n        [startAt]=\"_startAt\"\n        [panelClass]=\"'dr-week-datepicker' + (panelClass ? ' ' + panelClass : '')\"\n        [calendarHeaderComponent]=\"customHeader\"\n        (yearSelected)=\"chosenPeriodHandler($event, timeframeOption.YEAR, datePicker)\"\n        (monthSelected)=\"chosenPeriodHandler($event, timeframeOption.MONTH, datePicker)\"\n        (opened)=\"onOpen()\"\n        (closed)=\"onCLose()\">\n    </mat-date-range-picker>\n</ng-container>\n\n<ng-container *ngIf=\"(datePickerService.timeframe$ | async) !== 'week'\">\n    <input\n        [attr.id]=\"id\"\n        [ngModel]=\"displayValue$ | async\"\n        (ngModelChange)=\"valueChangedInCalendar($event)\"\n        (click)=\"datePicker.open()\"\n        [matDatepicker]=\"datePicker\"\n        [matDatepickerFilter]=\"dateFilter\"\n        [disabled]=\"disabled\"\n        [placeholder]=\"placeholder\"\n        [drDatePickerFormat]=\"datePickerService.format$ | async\"\n        [readonly]=\"readonly\"\n        [min]=\"_min\"\n        [max]=\"_max\"\n        [class.hidden-calendar-input]=\"useButton\" />\n\n    <dr-button\n        *ngIf=\"useButton\"\n        [icon]=\"'dr-icon-date'\"\n        [iconAfter]=\"iconAfterButton\"\n        (click)=\"datePicker.open()\"\n        class=\"datepicker-button\">\n        {{ buttonLabel || 'Select Date' }}\n    </dr-button>\n\n    <mat-datepicker\n        #datePicker\n        [panelClass]=\"panelClass\"\n        [startAt]=\"_startAt\"\n        [calendarHeaderComponent]=\"customHeader\"\n        (yearSelected)=\"chosenPeriodHandler($event, timeframeOption.YEAR, datePicker)\"\n        (monthSelected)=\"chosenPeriodHandler($event, timeframeOption.MONTH, datePicker)\"\n        (opened)=\"onOpen()\"\n        (closed)=\"onCLose()\">\n    </mat-datepicker>\n</ng-container>\n", styles: [":host{position:relative;width:100%;display:flex;flex-direction:row;min-height:32px;height:32px;font-size:14px;font-family:Poppins,sans-serif;background-color:#fff;border:1px solid #9ea1aa;border-radius:6px;color:#333;overflow:hidden;outline:none;cursor:pointer}:host.use-button-picker{border:none}:host:hover{border-color:#9ea1aa}:host.active,:host:focus-within{border-color:#4646ce!important;color:#333}:host.disabled{pointer-events:none;border:1px solid #aeabac;background:#f0f1f4;color:#aeabac}:host.disabled:after{color:#aeabac}:host.ng-valid.ng-dirty{border-color:#037c5a}:host.ng-invalid.ng-dirty:not(:focus-within){border-color:#bf1d30!important}:host.ng-untouched.ng-valid{border-color:#9ea1aa}:host.use-button-picker:after{display:none}:host:not(.use-button-picker):after,:host:not(.use-button-picker):before{position:absolute;display:flex;border-color:#6d6e6f transparent transparent;color:#6d6e6f}:host:not(.use-button-picker):after{font-family:DataRails!important;content:\"\\ea17\";font-size:24px;color:#6d6e6f;top:0;bottom:0;right:8px;pointer-events:none;position:absolute;display:flex;align-items:center;justify-content:center}:host i{display:flex;align-items:center;position:absolute;color:#6d6e6f;left:8px;top:0;bottom:0}:host input{display:flex;flex-grow:1;height:100%;border:none;text-align:left;padding-left:35px;padding-right:25px;cursor:pointer!important;outline:none}:host input.when-quarter{position:absolute;visibility:hidden}:host input:disabled{border:none;color:#aeabac;background:transparent}:host input::-webkit-search-decoration,:host input::-webkit-search-cancel-button,:host input::-webkit-search-results-button,:host input::-webkit-search-results-decoration{-webkit-appearance:none}:host input::placeholder{color:#6d6e6f;font-size:14px;line-height:18px}:host input.hidden-calendar-input{width:0;height:0;padding:0}:host .datepicker-button{width:100%}:host .range-input{position:absolute;height:0;width:0;bottom:0;left:0;z-index:-1}::ng-deep .mat-datepicker-popup .dr-week-datepicker{width:386px!important}::ng-deep .mat-datepicker-popup .dr-week-datepicker .mat-calendar-body-in-range:before{background:initial!important}::ng-deep .mat-datepicker-popup .dr-week-datepicker .mat-calendar-body-in-range .mat-calendar-body-selected,::ng-deep .mat-datepicker-popup .dr-week-datepicker .mat-calendar-body-in-range .mat-calendar-body-cell-content{background:#f2f2fb!important;color:#4646ce!important;font-weight:600!important}::ng-deep .mat-datepicker-popup .mat-datepicker-content{margin:7px 0;box-shadow:0 4px 8px 1px #00000040;border-radius:12px!important}::ng-deep .mat-datepicker-popup .mat-datepicker-content button[disabled]{border:inherit;color:inherit;background-color:inherit}::ng-deep .mat-datepicker-popup .mat-datepicker-content button[disabled]:hover{border:inherit}::ng-deep .mat-datepicker-popup .cdk-keyboard-focused .mat-calendar-body-active>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical),::ng-deep .mat-datepicker-popup .cdk-program-focused .mat-calendar-body-active>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){background-color:#fff}::ng-deep .mat-datepicker-popup .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){background:#f2f2fb;color:#4646ce;font-weight:600}::ng-deep .mat-datepicker-popup .mat-calendar-body-selected{background-color:#4646ce;color:#f2f2fb;font-weight:600}::ng-deep .mat-datepicker-popup .mat-calendar-body-today.mat-calendar-body-selected{box-shadow:none}::ng-deep .mat-datepicker-popup .mat-button-focus-overlay{background:#f5f5f5}::ng-deep .mat-datepicker-popup .mat-calendar-controls .mat-icon-button:hover .mat-button-focus-overlay{opacity:1!important;background:#f5f5f5;transition:opacity .2s cubic-bezier(.35,0,.25,1)}::ng-deep .mat-datepicker-popup .mat-calendar-controls .mat-calendar-period-button:hover{background:#f5f5f5;transition:background .2s cubic-bezier(.35,0,.25,1)}::ng-deep .mat-datepicker-popup .mat-calendar-table-header th{font-size:14px;font-weight:600;color:#333}::ng-deep .mat-datepicker-popup .mat-calendar-table-header-divider{display:none}::ng-deep .mat-datepicker-popup .mat-calendar-body-label{color:#fff;padding:0}::ng-deep .mat-datepicker-popup .mat-calendar-body>tr[aria-hidden=true]>.mat-calendar-body-label{display:none}::ng-deep .mat-datepicker-popup .mat-calendar-content{display:flex}::ng-deep .mat-datepicker-popup .mat-calendar-content dr-week-selector{flex:0}::ng-deep .mat-datepicker-popup .mat-calendar-content mat-month-view,::ng-deep .mat-datepicker-popup .mat-calendar-content mat-multi-year-view,::ng-deep .mat-datepicker-popup .mat-calendar-content mat-year-view{flex:1}\n"] }]
     }], null, null); })();
 
-var TooltipPosition;
-(function (TooltipPosition) {
-    TooltipPosition["TOP"] = "top";
-    TooltipPosition["BOTTOM"] = "bottom";
-    TooltipPosition["LEFT"] = "left";
-    TooltipPosition["RIGHT"] = "right";
-    TooltipPosition["TOP_RIGHT"] = "top-right";
-    TooltipPosition["TOP_LEFT"] = "top-left";
-    TooltipPosition["BOTTOM_RIGHT"] = "bottom-right";
-    TooltipPosition["BOTTOM_LEFT"] = "bottom-left";
-    TooltipPosition["RIGHT_TOP"] = "right-top";
-    TooltipPosition["RIGHT_BOTTOM"] = "right-bottom";
-    TooltipPosition["LEFT_TOP"] = "left-top";
-    TooltipPosition["LEFT_BOTTOM"] = "left-bottom";
-})(TooltipPosition || (TooltipPosition = {}));
-
 function DrDatePickerWithTimeframeComponent_dr_button_0_Template(rf, ctx) { if (rf & 1) {
     const _r7 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "dr-button", 11);
@@ -5320,7 +5310,7 @@ function DrDatePickerWithTimeframeComponent_dr_button_11_Template(rf, ctx) { if
     const ctx_r4 = i0.ɵɵnextContext();
     i0.ɵɵproperty("disabled", ctx_r4.isNextDateDisabled);
 } }
-const _c0$A = function (a0) { return { formattedValue: a0 }; };
+const _c0$B = function (a0) { return { formattedValue: a0 }; };
 class DrDatePickerWithTimeframeComponent extends DrDatePickerComponent {
     set dateFormatConfig(value) {
         if (value) {
@@ -5357,7 +5347,7 @@ class DrDatePickerWithTimeframeComponent extends DrDatePickerComponent {
         this.dateAdapter = dateAdapter;
         this.datePickerService = datePickerService;
         this.canSelectTimeframe = true;
-        this.datepickerTooltipPosition = TooltipPosition.TOP;
+        this.datepickerTooltipPosition = 'top';
         this.datepickerTooltipTimeout = 0;
         this.isOpen = false;
         this.onChangeFormat = new EventEmitter();
@@ -5509,7 +5499,7 @@ class DrDatePickerWithTimeframeComponent extends DrDatePickerComponent {
             i0.ɵɵadvance(1);
             i0.ɵɵproperty("drTooltip", ctx.datepickerTooltip)("drTooltipPosition", ctx.datepickerTooltipPosition)("drTooltipMousleaveTimeout", ctx.datepickerTooltipTimeout);
             i0.ɵɵadvance(3);
-            i0.ɵɵproperty("ngTemplateOutlet", _r1)("ngTemplateOutletContext", i0.ɵɵpureFunction1(18, _c0$A, i0.ɵɵpipeBind1(5, 14, ctx.displayedFormattedValue$)));
+            i0.ɵɵproperty("ngTemplateOutlet", _r1)("ngTemplateOutletContext", i0.ɵɵpureFunction1(18, _c0$B, i0.ɵɵpipeBind1(5, 14, ctx.displayedFormattedValue$)));
             i0.ɵɵadvance(4);
             i0.ɵɵproperty("ngModel", i0.ɵɵpipeBind1(10, 16, ctx.displayValue$))("matDatepicker", _r5)("readonly", ctx.readonly)("min", ctx._min)("max", ctx._max);
             i0.ɵɵadvance(3);
@@ -5725,7 +5715,7 @@ function DrToggleComponent_span_6_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance(1);
     i0.ɵɵtextInterpolate(ctx_r1.toggleTitle);
 } }
-const _c0$z = ["*"];
+const _c0$A = ["*"];
 class DrToggleComponent {
     set disabled(value) {
         this.setDisabledState(value);
@@ -5770,7 +5760,7 @@ class DrToggleComponent {
     /** @nocollapse */ static { this.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: DrToggleComponent, selectors: [["dr-toggle"]], hostVars: 3, hostBindings: function DrToggleComponent_HostBindings(rf, ctx) { if (rf & 2) {
             i0.ɵɵattribute("id", ctx.hostId);
             i0.ɵɵclassMap(ctx.elementClass);
-        } }, inputs: { id: "id", toggleTitle: "toggleTitle", toggleTitleRight: "toggleTitleRight", successType: "successType", checkedStatus: "checkedStatus", disabled: "disabled" }, outputs: { checkedChange: "checkedChange" }, features: [i0.ɵɵProvidersFeature([{ provide: NG_VALUE_ACCESSOR, useExisting: DrToggleComponent, multi: true }])], ngContentSelectors: _c0$z, decls: 7, vars: 10, consts: [["class", "toggle-title mr-3", 4, "ngIf"], [1, "toggle-container"], ["type", "checkbox", 3, "checked", "disabled", "click"], [1, "toggle-body"], ["class", "toggle-title ml-3", 4, "ngIf"], [1, "toggle-title", "mr-3"], [1, "toggle-title", "ml-3"]], template: function DrToggleComponent_Template(rf, ctx) { if (rf & 1) {
+        } }, inputs: { id: "id", toggleTitle: "toggleTitle", toggleTitleRight: "toggleTitleRight", successType: "successType", checkedStatus: "checkedStatus", disabled: "disabled" }, outputs: { checkedChange: "checkedChange" }, features: [i0.ɵɵProvidersFeature([{ provide: NG_VALUE_ACCESSOR, useExisting: DrToggleComponent, multi: true }])], ngContentSelectors: _c0$A, decls: 7, vars: 10, consts: [["class", "toggle-title mr-3", 4, "ngIf"], [1, "toggle-container"], ["type", "checkbox", 3, "checked", "disabled", "click"], [1, "toggle-body"], ["class", "toggle-title ml-3", 4, "ngIf"], [1, "toggle-title", "mr-3"], [1, "toggle-title", "ml-3"]], template: function DrToggleComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef();
             i0.ɵɵtemplate(0, DrToggleComponent_span_0_Template, 2, 1, "span", 0);
             i0.ɵɵelementStart(1, "label", 1)(2, "input", 2);
@@ -6373,8 +6363,8 @@ class DateTimePickerComponent {
             type: Input
         }] }); })();
 
-const _c0$y = ["stepTextLabel"];
-const _c1$e = ["stepper"];
+const _c0$z = ["stepTextLabel"];
+const _c1$f = ["stepper"];
 function StepperComponent_div_0_Template(rf, ctx) { if (rf & 1) {
     const _r11 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "div", 7);
@@ -6604,12 +6594,12 @@ class StepperComponent {
     }
     /** @nocollapse */ static { this.ɵfac = function StepperComponent_Factory(t) { return new (t || StepperComponent)(); }; }
     /** @nocollapse */ static { this.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: StepperComponent, selectors: [["dr-stepper"]], contentQueries: function StepperComponent_ContentQueries(rf, ctx, dirIndex) { if (rf & 1) {
-            i0.ɵɵcontentQuery(dirIndex, _c0$y, 5);
+            i0.ɵɵcontentQuery(dirIndex, _c0$z, 5);
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.stepTextLabelTemplate = _t.first);
         } }, viewQuery: function StepperComponent_Query(rf, ctx) { if (rf & 1) {
-            i0.ɵɵviewQuery(_c1$e, 5, ElementRef);
+            i0.ɵɵviewQuery(_c1$f, 5, ElementRef);
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.stepper = _t.first);
@@ -6779,7 +6769,7 @@ function DrChatFormComponent_dr_button_9_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtext(1, "Stop generating");
     i0.ɵɵelementEnd();
 } }
-const _c0$x = function (a0, a1) { return { "message-row__input--focused": a0, "message-row__input--filled": a1 }; };
+const _c0$y = function (a0, a1) { return { "message-row__input--focused": a0, "message-row__input--filled": a1 }; };
 class DrChatFormComponent {
     constructor(cdr, domSanitizer) {
         this.cdr = cdr;
@@ -6935,7 +6925,7 @@ class DrChatFormComponent {
             const _r1 = i0.ɵɵreference(4);
             i0.ɵɵproperty("ngIf", ctx.droppedFiles == null ? null : ctx.droppedFiles.length);
             i0.ɵɵadvance(2);
-            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction2(11, _c0$x, ctx.inputFocus, !!(ctx.message == null ? null : ctx.message.length)));
+            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction2(11, _c0$y, ctx.inputFocus, !!(ctx.message == null ? null : ctx.message.length)));
             i0.ɵɵadvance(1);
             i0.ɵɵstyleMap(ctx.getTextAreaHeight(_r1));
             i0.ɵɵpropertyInterpolate("placeholder", ctx.fileOver ? ctx.dropFilePlaceholder : ctx.messagePlaceholder);
@@ -7050,7 +7040,7 @@ function DrAvatarComponent_div_0_Template(rf, ctx) { if (rf & 1) {
     const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵstyleProp("width", ctx_r0.drAvatarSize || null)("height", ctx_r0.drAvatarSize || null);
 } }
-const _c0$w = function (a0, a1) { return { "users-section__default": a0, "users-section__user--clickable": a1 }; };
+const _c0$x = function (a0, a1) { return { "users-section__default": a0, "users-section__user--clickable": a1 }; };
 function DrAvatarComponent_div_1_Template(rf, ctx) { if (rf & 1) {
     const _r7 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "div", 5);
@@ -7064,7 +7054,7 @@ function DrAvatarComponent_div_1_Template(rf, ctx) { if (rf & 1) {
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵclassMap(user_r5.status);
     i0.ɵɵstyleProp("width", ctx_r1.drAvatarSize || null)("height", ctx_r1.drAvatarSize || null)("background-color", ctx_r1.getAvatarColor(user_r5));
-    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction2(18, _c0$w, ctx_r1.showUnassigned && !user_r5.email, ctx_r1.drAvatarIsClickable))("drTooltip", i0.ɵɵpipeBind1(1, 13, user_r5))("drTooltipClass", ctx_r1.drAvatarTooltipClass)("drTooltipPosition", ctx_r1.drAvatarTooltipPosition);
+    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction2(18, _c0$x, ctx_r1.showUnassigned && !user_r5.email, ctx_r1.drAvatarIsClickable))("drTooltip", i0.ɵɵpipeBind1(1, 13, user_r5))("drTooltipClass", ctx_r1.drAvatarTooltipClass)("drTooltipPosition", ctx_r1.drAvatarTooltipPosition);
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind2(3, 15, user_r5, "initials"), "\n");
 } }
@@ -7340,7 +7330,7 @@ class DrChatMessageFileComponent {
             type: Input
         }] }); })();
 
-const _c0$v = ["drChatMessageActions"];
+const _c0$w = ["drChatMessageActions"];
 function DrChatMessageComponent_ng_container_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainerStart(0);
     i0.ɵɵelement(1, "div", 8);
@@ -7442,7 +7432,7 @@ class DrChatMessageComponent {
     }
     /** @nocollapse */ static { this.ɵfac = function DrChatMessageComponent_Factory(t) { return new (t || DrChatMessageComponent)(i0.ɵɵdirectiveInject(DrChatCustomMessageService)); }; }
     /** @nocollapse */ static { this.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: DrChatMessageComponent, selectors: [["dr-chat-message"]], contentQueries: function DrChatMessageComponent_ContentQueries(rf, ctx, dirIndex) { if (rf & 1) {
-            i0.ɵɵcontentQuery(dirIndex, _c0$v, 5);
+            i0.ɵɵcontentQuery(dirIndex, _c0$w, 5);
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.drChatMessageActions = _t.first);
@@ -7513,7 +7503,7 @@ class DrChatMessageComponent {
             args: ['drChatMessageActions']
         }] }); })();
 
-const _c0$u = ["suggestionsContainer"];
+const _c0$v = ["suggestionsContainer"];
 function DrChatSuggestionsComponent_ng_container_2_div_1_ng_container_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainer(0);
 } }
@@ -7552,14 +7542,14 @@ function DrChatSuggestionsComponent_ng_template_3_div_1_Template(rf, ctx) { if (
     i0.ɵɵadvance(1);
     i0.ɵɵtextInterpolate1(" ", item_r9, " ");
 } }
-const _c1$d = function (a0, a1, a2) { return { "chat-suggestions__items--three-cols": a0, "chat-suggestions__items--two-cols": a1, "chat-suggestions__items--one-col": a2 }; };
+const _c1$e = function (a0, a1, a2) { return { "chat-suggestions__items--three-cols": a0, "chat-suggestions__items--two-cols": a1, "chat-suggestions__items--one-col": a2 }; };
 function DrChatSuggestionsComponent_ng_template_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 8);
     i0.ɵɵtemplate(1, DrChatSuggestionsComponent_ng_template_3_div_1_Template, 2, 1, "div", 9);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r3 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction3(2, _c1$d, ctx_r3.colsCount === 3, ctx_r3.colsCount === 2, ctx_r3.colsCount === 1));
+    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction3(2, _c1$e, ctx_r3.colsCount === 3, ctx_r3.colsCount === 2, ctx_r3.colsCount === 1));
     i0.ɵɵadvance(1);
     i0.ɵɵproperty("ngForOf", ctx_r3.visibleValues);
 } }
@@ -7658,7 +7648,7 @@ class DrChatSuggestionsComponent {
     }
     /** @nocollapse */ static { this.ɵfac = function DrChatSuggestionsComponent_Factory(t) { return new (t || DrChatSuggestionsComponent)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); }; }
     /** @nocollapse */ static { this.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: DrChatSuggestionsComponent, selectors: [["dr-chat-suggestions"]], viewQuery: function DrChatSuggestionsComponent_Query(rf, ctx) { if (rf & 1) {
-            i0.ɵɵviewQuery(_c0$u, 5);
+            i0.ɵɵviewQuery(_c0$v, 5);
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.suggestionContainer = _t.first);
@@ -7692,8 +7682,8 @@ class DrChatSuggestionsComponent {
             args: ['suggestionsContainer', { static: false }]
         }] }); })();
 
-const _c0$t = ["drChatHeader"];
-const _c1$c = ["drChatLoader"];
+const _c0$u = ["drChatHeader"];
+const _c1$d = ["drChatLoader"];
 const _c2$6 = ["drChatContent"];
 const _c3$4 = ["messagesContainer"];
 function DrChatComponent_ng_container_2_Template(rf, ctx) { if (rf & 1) {
@@ -7829,8 +7819,8 @@ class DrChatComponent {
     /** @nocollapse */ static { this.ɵfac = function DrChatComponent_Factory(t) { return new (t || DrChatComponent)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); }; }
     /** @nocollapse */ static { this.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: DrChatComponent, selectors: [["dr-chat"]], contentQueries: function DrChatComponent_ContentQueries(rf, ctx, dirIndex) { if (rf & 1) {
             i0.ɵɵcontentQuery(dirIndex, DrChatFormComponent, 5);
-            i0.ɵɵcontentQuery(dirIndex, _c0$t, 5);
-            i0.ɵɵcontentQuery(dirIndex, _c1$c, 5);
+            i0.ɵɵcontentQuery(dirIndex, _c0$u, 5);
+            i0.ɵɵcontentQuery(dirIndex, _c1$d, 5);
             i0.ɵɵcontentQuery(dirIndex, _c2$6, 5);
             i0.ɵɵcontentQuery(dirIndex, DrChatMessageComponent, 4);
         } if (rf & 2) {
@@ -7918,8 +7908,8 @@ class DrChatComponent {
             args: [DrChatSuggestionsComponent]
         }] }); })();
 
-const _c0$s = ["textAreaElement"];
-const _c1$b = ["fileInput"];
+const _c0$t = ["textAreaElement"];
+const _c1$c = ["fileInput"];
 function DrChatFormDropdownComponent_dr_chat_dropped_files_3_Template(rf, ctx) { if (rf & 1) {
     const _r7 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "dr-chat-dropped-files", 12);
@@ -8106,8 +8096,8 @@ class DrChatFormDropdownComponent {
     }
     /** @nocollapse */ static { this.ɵfac = function DrChatFormDropdownComponent_Factory(t) { return new (t || DrChatFormDropdownComponent)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(i1$5.DomSanitizer)); }; }
     /** @nocollapse */ static { this.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: DrChatFormDropdownComponent, selectors: [["dr-chat-form-dropdown"]], viewQuery: function DrChatFormDropdownComponent_Query(rf, ctx) { if (rf & 1) {
-            i0.ɵɵviewQuery(_c0$s, 5);
-            i0.ɵɵviewQuery(_c1$b, 5);
+            i0.ɵɵviewQuery(_c0$t, 5);
+            i0.ɵɵviewQuery(_c1$c, 5);
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.textAreaElementRef = _t.first);
@@ -8245,14 +8235,14 @@ class DrChatCustomMessageDirective {
             type: Input
         }] }); })();
 
-const _c0$r = ["*"];
+const _c0$s = ["*"];
 class DrChatAlertComponent {
     constructor() {
         this.iconClass = 'dr-icon-info';
         this.close = new EventEmitter();
     }
     /** @nocollapse */ static { this.ɵfac = function DrChatAlertComponent_Factory(t) { return new (t || DrChatAlertComponent)(); }; }
-    /** @nocollapse */ static { this.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: DrChatAlertComponent, selectors: [["dr-chat-alert"]], inputs: { iconClass: "iconClass" }, outputs: { close: "close" }, ngContentSelectors: _c0$r, decls: 3, vars: 2, consts: [["theme", "icon", "icon", "dr-icon-exit", "drTooltip", "Close", 1, "chat-alert-close-btn", 3, "click"]], template: function DrChatAlertComponent_Template(rf, ctx) { if (rf & 1) {
+    /** @nocollapse */ static { this.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: DrChatAlertComponent, selectors: [["dr-chat-alert"]], inputs: { iconClass: "iconClass" }, outputs: { close: "close" }, ngContentSelectors: _c0$s, decls: 3, vars: 2, consts: [["theme", "icon", "icon", "dr-icon-exit", "drTooltip", "Close", 1, "chat-alert-close-btn", 3, "click"]], template: function DrChatAlertComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef();
             i0.ɵɵelement(0, "i");
             i0.ɵɵprojection(1);
@@ -8349,7 +8339,7 @@ function DrAlertComponent_span_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance(1);
     i0.ɵɵtextInterpolate(ctx_r0.text);
 } }
-const _c0$q = ["*"];
+const _c0$r = ["*"];
 const ALERT_THEME_ICONS = {
     [DrAlertTheme.SUCCESS]: 'dr-icon-uploaded-success',
     [DrAlertTheme.BOLD_ERROR]: 'dr-icon-error',
@@ -8370,7 +8360,7 @@ class DrAlertComponent {
     /** @nocollapse */ static { this.ɵfac = function DrAlertComponent_Factory(t) { return new (t || DrAlertComponent)(); }; }
     /** @nocollapse */ static { this.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: DrAlertComponent, selectors: [["dr-alert"]], hostVars: 2, hostBindings: function DrAlertComponent_HostBindings(rf, ctx) { if (rf & 2) {
             i0.ɵɵclassMap(ctx.elementClass);
-        } }, inputs: { theme: "theme", customIconClass: "customIconClass", text: "text" }, ngContentSelectors: _c0$q, decls: 6, vars: 3, consts: [[1, "dr-alert__content-wrapper"], ["class", "dr-alert__text", 4, "ngIf"], [1, "dr-alert__custom-content"], ["contentRef", ""], [1, "dr-alert__text"]], template: function DrAlertComponent_Template(rf, ctx) { if (rf & 1) {
+        } }, inputs: { theme: "theme", customIconClass: "customIconClass", text: "text" }, ngContentSelectors: _c0$r, decls: 6, vars: 3, consts: [[1, "dr-alert__content-wrapper"], ["class", "dr-alert__text", 4, "ngIf"], [1, "dr-alert__custom-content"], ["contentRef", ""], [1, "dr-alert__text"]], template: function DrAlertComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef();
             i0.ɵɵelementStart(0, "div", 0);
             i0.ɵɵelement(1, "i");
@@ -8416,7 +8406,7 @@ class CodeEditorHintWrapperComponent {
             }]
     }], null, null); })();
 
-const _c0$p = ["ref"];
+const _c0$q = ["ref"];
 class DrCodemirrorComponent {
     set options(value) {
         this._options = value;
@@ -8546,7 +8536,7 @@ class DrCodemirrorComponent {
     }
     /** @nocollapse */ static { this.ɵfac = function DrCodemirrorComponent_Factory(t) { return new (t || DrCodemirrorComponent)(i0.ɵɵdirectiveInject(i0.KeyValueDiffers), i0.ɵɵdirectiveInject(i0.NgZone)); }; }
     /** @nocollapse */ static { this.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: DrCodemirrorComponent, selectors: [["dr-codemirror"]], viewQuery: function DrCodemirrorComponent_Query(rf, ctx) { if (rf & 1) {
-            i0.ɵɵviewQuery(_c0$p, 5);
+            i0.ɵɵviewQuery(_c0$q, 5);
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.ref = _t.first);
@@ -8698,7 +8688,7 @@ class DrErrorComponent {
             args: ['class.no-icon']
         }] }); })();
 
-const _c0$o = ["codeEditor"];
+const _c0$p = ["codeEditor"];
 function DrCodeEditorComponent_span_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span", 4);
     i0.ɵɵtext(1);
@@ -8977,7 +8967,7 @@ class DrCodeEditorComponent {
     }
     /** @nocollapse */ static { this.ɵfac = function DrCodeEditorComponent_Factory(t) { return new (t || DrCodeEditorComponent)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(i0.ComponentFactoryResolver), i0.ɵɵdirectiveInject(i0.Injector)); }; }
     /** @nocollapse */ static { this.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: DrCodeEditorComponent, selectors: [["dr-code-editor"]], viewQuery: function DrCodeEditorComponent_Query(rf, ctx) { if (rf & 1) {
-            i0.ɵɵviewQuery(_c0$o, 5);
+            i0.ɵɵviewQuery(_c0$p, 5);
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.codeEditor = _t.first);
@@ -9745,7 +9735,7 @@ const getAlignmentDimension = (position) => {
     return DrPopoverAlignmentDimension.Width;
 };
 
-const _c0$n = ["popoverContainer"];
+const _c0$o = ["popoverContainer"];
 function DrPopoverComponent_ng_container_2_ng_container_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainer(0);
 } }
@@ -9835,7 +9825,7 @@ class DrPopoverComponent {
     }
     /** @nocollapse */ static { this.ɵfac = function DrPopoverComponent_Factory(t) { return new (t || DrPopoverComponent)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(i0.ViewContainerRef), i0.ɵɵdirectiveInject(i0.ElementRef), i0.ɵɵdirectiveInject(DrPopoverRef)); }; }
     /** @nocollapse */ static { this.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: DrPopoverComponent, selectors: [["dr-popover"]], viewQuery: function DrPopoverComponent_Query(rf, ctx) { if (rf & 1) {
-            i0.ɵɵviewQuery(_c0$n, 7, ElementRef);
+            i0.ɵɵviewQuery(_c0$o, 7, ElementRef);
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.popoverContainer = _t.first);
@@ -10158,7 +10148,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 var __metadata = (this && this.__metadata) || function (k, v) {
     if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
 };
-const _c0$m = ["menuContainer"];
+const _c0$n = ["menuContainer"];
 function DrDropdownComponent_dr_dropdown_item_4_ng_container_1_i_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "i", 11);
 } if (rf & 2) {
@@ -10208,12 +10198,12 @@ function DrDropdownComponent_dr_dropdown_item_4_ng_container_2_Template(rf, ctx)
     i0.ɵɵadvance(1);
     i0.ɵɵproperty("ngIf", ctx_r5.hasChildren(act_r2));
 } }
-const _c1$a = function (a0) { return { $implicit: a0 }; };
+const _c1$b = function (a0) { return { $implicit: a0 }; };
 function DrDropdownComponent_dr_dropdown_item_4_ng_container_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainer(0, 17);
 } if (rf & 2) {
     const act_r2 = i0.ɵɵnextContext().$implicit;
-    i0.ɵɵproperty("ngTemplateOutlet", act_r2.templateRef)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c1$a, act_r2));
+    i0.ɵɵproperty("ngTemplateOutlet", act_r2.templateRef)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c1$b, act_r2));
 } }
 const _c2$4 = function () { return { withoutArrow: true }; };
 function DrDropdownComponent_dr_dropdown_item_4_Template(rf, ctx) { if (rf & 1) {
@@ -10354,7 +10344,7 @@ class DrDropdownComponent {
     }
     /** @nocollapse */ static { this.ɵfac = function DrDropdownComponent_Factory(t) { return new (t || DrDropdownComponent)(); }; }
     /** @nocollapse */ static { this.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: DrDropdownComponent, selectors: [["dr-dropdown"]], viewQuery: function DrDropdownComponent_Query(rf, ctx) { if (rf & 1) {
-            i0.ɵɵviewQuery(_c0$m, 7);
+            i0.ɵɵviewQuery(_c0$n, 7);
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.menuContainer = _t.first);
@@ -10593,8 +10583,8 @@ class DrDropdownChildDirective {
             }]
     }], null, null); })();
 
-const _c0$l = [[["", "dropdownItemContent", ""]], [["", "dropdownItemActions", ""]]];
-const _c1$9 = ["[dropdownItemContent]", "[dropdownItemActions]"];
+const _c0$m = [[["", "dropdownItemContent", ""]], [["", "dropdownItemActions", ""]]];
+const _c1$a = ["[dropdownItemContent]", "[dropdownItemActions]"];
 class DrDropdownItemComponent {
     constructor() {
         this.role = 'option';
@@ -10602,8 +10592,8 @@ class DrDropdownItemComponent {
     /** @nocollapse */ static { this.ɵfac = function DrDropdownItemComponent_Factory(t) { return new (t || DrDropdownItemComponent)(); }; }
     /** @nocollapse */ static { this.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: DrDropdownItemComponent, selectors: [["dr-dropdown-item"]], hostVars: 1, hostBindings: function DrDropdownItemComponent_HostBindings(rf, ctx) { if (rf & 2) {
             i0.ɵɵattribute("role", ctx.role);
-        } }, inputs: { selected: "selected", disabled: "disabled", divider: "divider" }, ngContentSelectors: _c1$9, decls: 5, vars: 6, consts: [[1, "dr-dropdown-item"], [1, "dr-dropdown-text"], [1, "dr-dropdown-actions"]], template: function DrDropdownItemComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵprojectionDef(_c0$l);
+        } }, inputs: { selected: "selected", disabled: "disabled", divider: "divider" }, ngContentSelectors: _c1$a, decls: 5, vars: 6, consts: [[1, "dr-dropdown-item"], [1, "dr-dropdown-text"], [1, "dr-dropdown-actions"]], template: function DrDropdownItemComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵprojectionDef(_c0$m);
             i0.ɵɵelementStart(0, "div", 0)(1, "span", 1);
             i0.ɵɵprojection(2);
             i0.ɵɵelementEnd();
@@ -10645,7 +10635,7 @@ class DrDropdownItemShowPipe {
 function DrTabComponent_ng_template_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵprojection(0);
 } }
-const _c0$k = ["*"];
+const _c0$l = ["*"];
 class DrTabComponent {
     constructor() { }
     ngOnInit() { }
@@ -10655,7 +10645,7 @@ class DrTabComponent {
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.contentTemplate = _t.first);
-        } }, inputs: { id: "id", label: "label", icon: "icon", disabled: "disabled", tooltip: "tooltip", customLabelTemplate: "customLabelTemplate" }, ngContentSelectors: _c0$k, decls: 1, vars: 0, template: function DrTabComponent_Template(rf, ctx) { if (rf & 1) {
+        } }, inputs: { id: "id", label: "label", icon: "icon", disabled: "disabled", tooltip: "tooltip", customLabelTemplate: "customLabelTemplate" }, ngContentSelectors: _c0$l, decls: 1, vars: 0, template: function DrTabComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef();
             i0.ɵɵtemplate(0, DrTabComponent_ng_template_0_Template, 1, 0, "ng-template");
         } }, encapsulation: 2 }); }
@@ -10930,8 +10920,8 @@ class DrTabsComponent {
             args: [DrTabComponent]
         }] }); })();
 
-const _c0$j = [[["dr-accordion-item"]]];
-const _c1$8 = ["dr-accordion-item"];
+const _c0$k = [[["dr-accordion-item"]]];
+const _c1$9 = ["dr-accordion-item"];
 class DrAccordionComponent {
     constructor() {
         this.openCloseItems = new Subject();
@@ -10964,8 +10954,8 @@ class DrAccordionComponent {
     /** @nocollapse */ static { this.ɵfac = function DrAccordionComponent_Factory(t) { return new (t || DrAccordionComponent)(); }; }
     /** @nocollapse */ static { this.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: DrAccordionComponent, selectors: [["dr-accordion"]], hostVars: 2, hostBindings: function DrAccordionComponent_HostBindings(rf, ctx) { if (rf & 2) {
             i0.ɵɵclassMap(ctx.theme);
-        } }, inputs: { multi: "multi", theme: "theme" }, ngContentSelectors: _c1$8, decls: 1, vars: 0, template: function DrAccordionComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵprojectionDef(_c0$j);
+        } }, inputs: { multi: "multi", theme: "theme" }, ngContentSelectors: _c1$9, decls: 1, vars: 0, template: function DrAccordionComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵprojectionDef(_c0$k);
             i0.ɵɵprojection(0);
         } }, styles: ["[_nghost-%COMP%]{display:block;box-shadow:#2c33491a 0 5px 10px}.borderless[_nghost-%COMP%]{box-shadow:none}"], changeDetection: 0 }); }
 }
@@ -10982,8 +10972,8 @@ class DrAccordionComponent {
             args: ['class']
         }] }); })();
 
-const _c0$i = [[["dr-accordion-item-header"]], [["dr-accordion-item-body"]]];
-const _c1$7 = ["dr-accordion-item-header", "dr-accordion-item-body"];
+const _c0$j = [[["dr-accordion-item-header"]], [["dr-accordion-item-body"]]];
+const _c1$8 = ["dr-accordion-item-header", "dr-accordion-item-body"];
 class DrAccordionItemComponent {
     /**
      * Item is collapse (`true` by default)
@@ -11083,8 +11073,8 @@ class DrAccordionItemComponent {
     /** @nocollapse */ static { this.ɵfac = function DrAccordionItemComponent_Factory(t) { return new (t || DrAccordionItemComponent)(i0.ɵɵdirectiveInject(DrAccordionComponent, 1), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); }; }
     /** @nocollapse */ static { this.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: DrAccordionItemComponent, selectors: [["dr-accordion-item"]], hostVars: 6, hostBindings: function DrAccordionItemComponent_HostBindings(rf, ctx) { if (rf & 2) {
             i0.ɵɵclassProp("collapsed", ctx.collapsed)("expanded", ctx.expanded)("disabled", ctx.disabled);
-        } }, inputs: { collapsed: "collapsed", expanded: "expanded", disabled: "disabled" }, outputs: { collapsedChange: "collapsedChange" }, features: [i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c1$7, decls: 2, vars: 0, template: function DrAccordionItemComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵprojectionDef(_c0$i);
+        } }, inputs: { collapsed: "collapsed", expanded: "expanded", disabled: "disabled" }, outputs: { collapsedChange: "collapsedChange" }, features: [i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c1$8, decls: 2, vars: 0, template: function DrAccordionItemComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵprojectionDef(_c0$j);
             i0.ɵɵprojection(0);
             i0.ɵɵprojection(1, 1);
         } }, styles: ["[_nghost-%COMP%]{background-color:#fff;color:#222b45;font-family:Poppins,sans-serif;font-size:16px;font-weight:400;line-height:1.25rem;display:flex;flex-direction:column}"], changeDetection: 0 }); }
@@ -11126,8 +11116,8 @@ function DrAccordionItemHeaderComponent_i_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵclassMap("dr-accordion-item-header-icon " + ctx_r0.icon);
     i0.ɵɵclassProp("dr-accordion-item-header-icon--additional-padding", ctx_r0.chevronPosition === "left");
 } }
-const _c0$h = function (a0) { return { rotationDegree: a0 }; };
-const _c1$6 = function (a0, a1) { return { value: a0, params: a1 }; };
+const _c0$i = function (a0) { return { rotationDegree: a0 }; };
+const _c1$7 = function (a0, a1) { return { value: a0, params: a1 }; };
 function DrAccordionItemHeaderComponent_i_1_Template(rf, ctx) { if (rf & 1) {
     const _r3 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "i", 2);
@@ -11136,7 +11126,7 @@ function DrAccordionItemHeaderComponent_i_1_Template(rf, ctx) { if (rf & 1) {
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵclassMap(ctx_r1.chevronIconClass);
-    i0.ɵɵproperty("@expansionIndicator", i0.ɵɵpureFunction2(5, _c1$6, ctx_r1.state, i0.ɵɵpureFunction1(3, _c0$h, ctx_r1.chevronRotationDegree)));
+    i0.ɵɵproperty("@expansionIndicator", i0.ɵɵpureFunction2(5, _c1$7, ctx_r1.state, i0.ɵɵpureFunction1(3, _c0$i, ctx_r1.chevronRotationDegree)));
 } }
 const _c2$3 = [[["dr-accordion-item-title"]], [["dr-accordion-item-description"]], "*"];
 const _c3$1 = ["dr-accordion-item-title", "dr-accordion-item-description", "*"];
@@ -11265,8 +11255,8 @@ class DrAccordionItemHeaderComponent {
             args: ['keydown.enter']
         }] }); })();
 
-const _c0$g = function (a0) { return { value: a0 }; };
-const _c1$5 = ["*"];
+const _c0$h = function (a0) { return { value: a0 }; };
+const _c1$6 = ["*"];
 const accordionItemBodyTrigger = trigger('accordionItemBody', [
     state('collapsed', style({
         overflow: 'hidden',
@@ -11297,13 +11287,13 @@ class DrAccordionItemBodyComponent {
         this.destroy$.complete();
     }
     /** @nocollapse */ static { this.ɵfac = function DrAccordionItemBodyComponent_Factory(t) { return new (t || DrAccordionItemBodyComponent)(i0.ɵɵdirectiveInject(DrAccordionItemComponent, 1), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); }; }
-    /** @nocollapse */ static { this.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: DrAccordionItemBodyComponent, selectors: [["dr-accordion-item-body"]], ngContentSelectors: _c1$5, decls: 3, vars: 3, consts: [[1, "item-body"]], template: function DrAccordionItemBodyComponent_Template(rf, ctx) { if (rf & 1) {
+    /** @nocollapse */ static { this.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: DrAccordionItemBodyComponent, selectors: [["dr-accordion-item-body"]], ngContentSelectors: _c1$6, decls: 3, vars: 3, consts: [[1, "item-body"]], template: function DrAccordionItemBodyComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef();
             i0.ɵɵelementStart(0, "div")(1, "div", 0);
             i0.ɵɵprojection(2);
             i0.ɵɵelementEnd()();
         } if (rf & 2) {
-            i0.ɵɵproperty("@accordionItemBody", i0.ɵɵpureFunction1(1, _c0$g, ctx.state));
+            i0.ɵɵproperty("@accordionItemBody", i0.ɵɵpureFunction1(1, _c0$h, ctx.state));
         } }, styles: [".item-body[_ngcontent-%COMP%]{flex:1;-ms-flex:1 1 auto;overflow:auto;position:relative}"], data: { animation: [accordionItemBodyTrigger] }, changeDetection: 0 }); }
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DrAccordionItemBodyComponent, [{
@@ -11319,13 +11309,13 @@ class DrAccordionItemBodyComponent {
                 type: Host
             }] }, { type: i0.ChangeDetectorRef }]; }, null); })();
 
-const _c0$f = [[["dr-layout-header"]], [["dr-layout-body"]]];
-const _c1$4 = ["dr-layout-header", "dr-layout-body"];
+const _c0$g = [[["dr-layout-header"]], [["dr-layout-body"]]];
+const _c1$5 = ["dr-layout-header", "dr-layout-body"];
 class DrLayoutComponent {
     constructor() { }
     /** @nocollapse */ static { this.ɵfac = function DrLayoutComponent_Factory(t) { return new (t || DrLayoutComponent)(); }; }
-    /** @nocollapse */ static { this.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: DrLayoutComponent, selectors: [["dr-layout"]], ngContentSelectors: _c1$4, decls: 6, vars: 0, consts: [[1, "dr-layout"], [1, "dr-layout__container"], [1, "content"], [1, "columns"]], template: function DrLayoutComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵprojectionDef(_c0$f);
+    /** @nocollapse */ static { this.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: DrLayoutComponent, selectors: [["dr-layout"]], ngContentSelectors: _c1$5, decls: 6, vars: 0, consts: [[1, "dr-layout"], [1, "dr-layout__container"], [1, "content"], [1, "columns"]], template: function DrLayoutComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵprojectionDef(_c0$g);
             i0.ɵɵelementStart(0, "div", 0);
             i0.ɵɵprojection(1);
             i0.ɵɵelementStart(2, "div", 1)(3, "div", 2)(4, "div", 3);
@@ -11338,11 +11328,11 @@ class DrLayoutComponent {
         args: [{ selector: 'dr-layout', template: "<div class=\"dr-layout\">\n    <ng-content select=\"dr-layout-header\"></ng-content>\n    <div class=\"dr-layout__container\">\n        <div class=\"content\">\n            <div class=\"columns\">\n                <ng-content select=\"dr-layout-body\"></ng-content>\n            </div>\n        </div>\n    </div>\n</div>\n", styles: [":host{font-size:16px;font-weight:400;font-family:Poppins,sans-serif;line-height:1.25rem;-webkit-font-smoothing:antialiased}:host .dr-layout{display:flex;flex-direction:column;min-height:100vh;font-size:16px;font-weight:400;line-height:1.4rem}:host .dr-layout ::ng-deep dr-layout-header{display:block;position:fixed;top:0;left:0;right:0;z-index:1040}:host .dr-layout ::ng-deep dr-layout-header nav{align-items:center;justify-content:flex-start;display:flex}:host .dr-layout__container{display:flex;flex:1;-ms-flex:1 1 auto;flex-direction:row}:host .dr-layout__container .content{display:flex;flex:1;-ms-flex:1 1 auto;flex-direction:column;min-width:0}:host .dr-layout__container .content .columns{display:flex;flex:1;-ms-flex:1 1 auto;flex-direction:row;width:100%}:host .dr-layout__container .content .columns ::ng-deep dr-layout-body{flex:1 0;min-width:0}\n"] }]
     }], function () { return []; }, null); })();
 
-const _c0$e = ["*"];
+const _c0$f = ["*"];
 class DrLayoutHeaderComponent {
     constructor() { }
     /** @nocollapse */ static { this.ɵfac = function DrLayoutHeaderComponent_Factory(t) { return new (t || DrLayoutHeaderComponent)(); }; }
-    /** @nocollapse */ static { this.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: DrLayoutHeaderComponent, selectors: [["dr-layout-header"]], ngContentSelectors: _c0$e, decls: 2, vars: 0, template: function DrLayoutHeaderComponent_Template(rf, ctx) { if (rf & 1) {
+    /** @nocollapse */ static { this.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: DrLayoutHeaderComponent, selectors: [["dr-layout-header"]], ngContentSelectors: _c0$f, decls: 2, vars: 0, template: function DrLayoutHeaderComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef();
             i0.ɵɵelementStart(0, "nav");
             i0.ɵɵprojection(1);
@@ -11361,11 +11351,11 @@ class DrLayoutHeaderComponent {
             }]
     }], function () { return []; }, null); })();
 
-const _c0$d = ["*"];
+const _c0$e = ["*"];
 class DrLayoutBodyComponent {
     constructor() { }
     /** @nocollapse */ static { this.ɵfac = function DrLayoutBodyComponent_Factory(t) { return new (t || DrLayoutBodyComponent)(); }; }
-    /** @nocollapse */ static { this.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: DrLayoutBodyComponent, selectors: [["dr-layout-body"]], ngContentSelectors: _c0$d, decls: 1, vars: 0, template: function DrLayoutBodyComponent_Template(rf, ctx) { if (rf & 1) {
+    /** @nocollapse */ static { this.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: DrLayoutBodyComponent, selectors: [["dr-layout-body"]], ngContentSelectors: _c0$e, decls: 1, vars: 0, template: function DrLayoutBodyComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef();
             i0.ɵɵprojection(0);
         } }, encapsulation: 2 }); }
@@ -11387,7 +11377,7 @@ function DrDetailsListComponent_li_5_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance(1);
     i0.ɵɵtextInterpolate(item_r1);
 } }
-const _c0$c = function (a0) { return { value: a0 }; };
+const _c0$d = function (a0) { return { value: a0 }; };
 class DrDetailsListComponent {
     set items(val) {
         if (!val) {
@@ -11434,7 +11424,7 @@ class DrDetailsListComponent {
             i0.ɵɵadvance(1);
             i0.ɵɵtextInterpolate1(" ", ctx.title, " ");
             i0.ɵɵadvance(1);
-            i0.ɵɵproperty("@expansionIndicatorList", i0.ɵɵpureFunction1(7, _c0$c, ctx.state));
+            i0.ɵɵproperty("@expansionIndicatorList", i0.ɵɵpureFunction1(7, _c0$d, ctx.state));
             i0.ɵɵadvance(1);
             i0.ɵɵproperty("ngForOf", ctx.list);
         } }, dependencies: [i1.NgForOf], styles: ["[_nghost-%COMP%]{font-family:Poppins,sans-serif;font-size:14px;line-height:22px;color:#6d6e6f;font-weight:400}[_nghost-%COMP%]   .details[_ngcontent-%COMP%]{display:flex;flex-direction:column}[_nghost-%COMP%]   .details__header[_ngcontent-%COMP%]{display:flex;align-items:center;cursor:pointer}[_nghost-%COMP%]   .details__header[_ngcontent-%COMP%]   i[_ngcontent-%COMP%]{margin-right:4px}[_nghost-%COMP%]   .details__list[_ngcontent-%COMP%]{display:flex;flex-direction:column;padding-left:28px;margin:8px 0}[_nghost-%COMP%]   .details__list[_ngcontent-%COMP%]   li[_ngcontent-%COMP%]{list-style-type:disc}"], data: { animation: [
@@ -11478,8 +11468,8 @@ class DrDetailsListComponent {
             type: Input
         }] }); })();
 
-const _c0$b = ["content"];
-const _c1$3 = function (a0, a1) { return { "dr-icon-maximize": a0, "dr-icon-minimize": a1 }; };
+const _c0$c = ["content"];
+const _c1$4 = function (a0, a1) { return { "dr-icon-maximize": a0, "dr-icon-minimize": a1 }; };
 function DialogWrapperComponent_i_1_Template(rf, ctx) { if (rf & 1) {
     const _r8 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "i", 11);
@@ -11487,7 +11477,7 @@ function DialogWrapperComponent_i_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction2(1, _c1$3, !ctx_r0.isMaximized, ctx_r0.isMaximized));
+    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction2(1, _c1$4, !ctx_r0.isMaximized, ctx_r0.isMaximized));
 } }
 function DialogWrapperComponent_i_2_Template(rf, ctx) { if (rf & 1) {
     const _r10 = i0.ɵɵgetCurrentView();
@@ -11673,7 +11663,7 @@ class DialogWrapperComponent {
     }
     /** @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$b, 5, ViewContainerRef);
+            i0.ɵɵviewQuery(_c0$c, 5, ViewContainerRef);
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.content = _t.first);
@@ -11876,8 +11866,8 @@ function DialogModalWrapperComponent_form_7_div_2_label_9_Template(rf, ctx) { if
     i0.ɵɵadvance(1);
     i0.ɵɵtextInterpolate1(" ", ctx_r19.dialogData.serverErrorMessage, " ");
 } }
-const _c0$a = function (a0) { return { display: a0 }; };
-const _c1$2 = function (a0, a1) { return { "col-md-10": a0, "col-md-12": a1 }; };
+const _c0$b = function (a0) { return { display: a0 }; };
+const _c1$3 = function (a0, a1) { return { "col-md-10": a0, "col-md-12": a1 }; };
 function DialogModalWrapperComponent_form_7_div_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 16);
     i0.ɵɵtemplate(1, DialogModalWrapperComponent_form_7_div_2_label_1_Template, 2, 2, "label", 17);
@@ -11894,11 +11884,11 @@ function DialogModalWrapperComponent_form_7_div_2_Template(rf, ctx) { if (rf & 1
     const field_r11 = ctx.$implicit;
     const ctx_r10 = i0.ɵɵnextContext(2);
     i0.ɵɵclassMap(field_r11.formGroupClass);
-    i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction1(12, _c0$a, field_r11.isLabelFullWidth ? "block" : "flex"));
+    i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction1(12, _c0$b, field_r11.isLabelFullWidth ? "block" : "flex"));
     i0.ɵɵadvance(1);
     i0.ɵɵproperty("ngIf", field_r11.label && field_r11.type !== ctx_r10.dialogFieldType.CHECKBOX);
     i0.ɵɵadvance(1);
-    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction2(14, _c1$2, field_r11.label && !field_r11.isLabelFullWidth, !field_r11.label || field_r11.isLabelFullWidth));
+    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction2(14, _c1$3, field_r11.label && !field_r11.isLabelFullWidth, !field_r11.label || field_r11.isLabelFullWidth));
     i0.ɵɵadvance(1);
     i0.ɵɵproperty("ngIf", field_r11.type === ctx_r10.dialogFieldType.SELECT);
     i0.ɵɵadvance(1);
@@ -12602,7 +12592,7 @@ function TreeviewItemComponent_div_0_div_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance(1);
     i0.ɵɵproperty("ngForOf", ctx_r2.item.children);
 } }
-const _c0$9 = function (a0, a1, a2) { return { item: a0, onCollapseExpand: a1, onCheckedChange: a2 }; };
+const _c0$a = function (a0, a1, a2) { return { item: a0, onCollapseExpand: a1, onCheckedChange: a2 }; };
 function TreeviewItemComponent_div_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 1);
     i0.ɵɵtemplate(1, TreeviewItemComponent_div_0_ng_template_1_Template, 0, 0, "ng-template", 2);
@@ -12611,7 +12601,7 @@ function TreeviewItemComponent_div_0_Template(rf, ctx) { if (rf & 1) {
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵadvance(1);
-    i0.ɵɵproperty("ngTemplateOutlet", ctx_r0.template)("ngTemplateOutletContext", i0.ɵɵpureFunction3(3, _c0$9, ctx_r0.item, ctx_r0.onCollapseExpand, ctx_r0.onCheckedChange));
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r0.template)("ngTemplateOutletContext", i0.ɵɵpureFunction3(3, _c0$a, ctx_r0.item, ctx_r0.onCollapseExpand, ctx_r0.onCheckedChange));
     i0.ɵɵadvance(1);
     i0.ɵɵproperty("ngIf", !ctx_r0.item.collapsed);
 } }
@@ -13768,7 +13758,7 @@ class DrImageCropperCanvasService {
         type: Injectable
     }], null, null); })();
 
-const _c0$8 = ["imageCanvas"];
+const _c0$9 = ["imageCanvas"];
 class DrImageCropperComponent {
     constructor(canvasService) {
         this.canvasService = canvasService;
@@ -13826,7 +13816,7 @@ class DrImageCropperComponent {
     }
     /** @nocollapse */ static { this.ɵfac = function DrImageCropperComponent_Factory(t) { return new (t || DrImageCropperComponent)(i0.ɵɵdirectiveInject(DrImageCropperCanvasService)); }; }
     /** @nocollapse */ static { this.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: DrImageCropperComponent, selectors: [["dr-image-cropper"]], viewQuery: function DrImageCropperComponent_Query(rf, ctx) { if (rf & 1) {
-            i0.ɵɵviewQuery(_c0$8, 7);
+            i0.ɵɵviewQuery(_c0$9, 7);
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.canvasElement = _t.first);
@@ -14269,13 +14259,13 @@ function DrChipComponent_i_4_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵlistener("click", function DrChipComponent_i_4_Template_i_click_0_listener() { i0.ɵɵrestoreView(_r4); const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.remove.next(null)); });
     i0.ɵɵelementEnd();
 } }
-const _c0$7 = ["*"];
+const _c0$8 = ["*"];
 class DrChipComponent {
     constructor() {
         this.remove = new EventEmitter();
     }
     /** @nocollapse */ static { this.ɵfac = function DrChipComponent_Factory(t) { return new (t || DrChipComponent)(); }; }
-    /** @nocollapse */ static { this.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: DrChipComponent, selectors: [["dr-chip"]], inputs: { label: "label", icon: "icon", removable: "removable" }, outputs: { remove: "remove" }, standalone: true, features: [i0.ɵɵStandaloneFeature], ngContentSelectors: _c0$7, decls: 5, vars: 4, consts: [["class", "chip__icon", 3, "class", 4, "ngIf"], [1, "chip__label"], [4, "ngIf"], ["class", "chip__remove dr-icon-exit", 3, "click", 4, "ngIf"], [1, "chip__icon"], [1, "chip__remove", "dr-icon-exit", 3, "click"]], template: function DrChipComponent_Template(rf, ctx) { if (rf & 1) {
+    /** @nocollapse */ static { this.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: DrChipComponent, selectors: [["dr-chip"]], inputs: { label: "label", icon: "icon", removable: "removable" }, outputs: { remove: "remove" }, standalone: true, features: [i0.ɵɵStandaloneFeature], ngContentSelectors: _c0$8, decls: 5, vars: 4, consts: [["class", "chip__icon", 3, "class", 4, "ngIf"], [1, "chip__label"], [4, "ngIf"], ["class", "chip__remove dr-icon-exit", 3, "click", 4, "ngIf"], [1, "chip__icon"], [1, "chip__remove", "dr-icon-exit", 3, "click"]], template: function DrChipComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef();
             i0.ɵɵtemplate(0, DrChipComponent_i_0_Template, 1, 2, "i", 0);
             i0.ɵɵelementStart(1, "div", 1);
@@ -14306,8 +14296,8 @@ class DrChipComponent {
             type: Output
         }] }); })();
 
-const _c0$6 = ["carouselContainer"];
-const _c1$1 = ["carouselItem"];
+const _c0$7 = ["carouselContainer"];
+const _c1$2 = ["carouselItem"];
 function DrGalleryComponent_dr_button_0_Template(rf, ctx) { if (rf & 1) {
     const _r5 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "dr-button", 5);
@@ -14532,8 +14522,8 @@ class DrGalleryComponent {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.template = _t.first);
         } }, viewQuery: function DrGalleryComponent_Query(rf, ctx) { if (rf & 1) {
-            i0.ɵɵviewQuery(_c0$6, 5);
-            i0.ɵɵviewQuery(_c1$1, 5);
+            i0.ɵɵviewQuery(_c0$7, 5);
+            i0.ɵɵviewQuery(_c1$2, 5);
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.containerRef = _t.first);
@@ -14594,7 +14584,7 @@ function DrProgressBarComponent_ng_container_4_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance(1);
     i0.ɵɵtextInterpolate1("", ctx_r0.progress || 0, "%");
 } }
-const _c0$5 = ["*"];
+const _c0$6 = ["*"];
 class DrProgressBarComponent {
     constructor() {
         /**
@@ -14606,7 +14596,7 @@ class DrProgressBarComponent {
     /** @nocollapse */ static { this.ɵfac = function DrProgressBarComponent_Factory(t) { return new (t || DrProgressBarComponent)(); }; }
     /** @nocollapse */ static { this.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: DrProgressBarComponent, selectors: [["dr-progress-bar"]], hostVars: 2, hostBindings: function DrProgressBarComponent_HostBindings(rf, ctx) { if (rf & 2) {
             i0.ɵɵclassMap(ctx.theme);
-        } }, inputs: { progress: "progress", showValue: "showValue", theme: "theme" }, standalone: true, features: [i0.ɵɵStandaloneFeature], ngContentSelectors: _c0$5, decls: 5, vars: 3, consts: [[1, "progress-bar__background"], [1, "progress-bar__background__fill"], [1, "progress-bar__value"], [4, "ngIf"]], template: function DrProgressBarComponent_Template(rf, ctx) { if (rf & 1) {
+        } }, inputs: { progress: "progress", showValue: "showValue", theme: "theme" }, standalone: true, features: [i0.ɵɵStandaloneFeature], ngContentSelectors: _c0$6, decls: 5, vars: 3, consts: [[1, "progress-bar__background"], [1, "progress-bar__background__fill"], [1, "progress-bar__value"], [4, "ngIf"]], template: function DrProgressBarComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef();
             i0.ɵɵelementStart(0, "div", 0);
             i0.ɵɵelement(1, "div", 1);
@@ -14637,7 +14627,7 @@ class DrProgressBarComponent {
             args: ['class']
         }] }); })();
 
-const _c0$4 = ["*"];
+const _c0$5 = ["*"];
 class DrBadgeComponent {
     constructor() {
         this.color = 'stone';
@@ -14649,7 +14639,7 @@ class DrBadgeComponent {
     /** @nocollapse */ static { this.ɵfac = function DrBadgeComponent_Factory(t) { return new (t || DrBadgeComponent)(); }; }
     /** @nocollapse */ static { this.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: DrBadgeComponent, selectors: [["dr-badge"]], hostVars: 2, hostBindings: function DrBadgeComponent_HostBindings(rf, ctx) { if (rf & 2) {
             i0.ɵɵclassMap(ctx.elementClasses);
-        } }, inputs: { color: "color", size: "size" }, standalone: true, features: [i0.ɵɵStandaloneFeature], ngContentSelectors: _c0$4, decls: 1, vars: 0, template: function DrBadgeComponent_Template(rf, ctx) { if (rf & 1) {
+        } }, inputs: { color: "color", size: "size" }, standalone: true, features: [i0.ɵɵStandaloneFeature], ngContentSelectors: _c0$5, decls: 1, vars: 0, template: function DrBadgeComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef();
             i0.ɵɵprojection(0);
         } }, styles: ["[_nghost-%COMP%]{display:inline-flex;align-items:center;color:#333;border-radius:4px;box-sizing:border-box;font-size:12px;line-height:16px;font-weight:500}.small[_nghost-%COMP%]{gap:2px;padding:2px 4px}.medium[_nghost-%COMP%]{gap:4px;padding:4px 8px}.light-purple[_nghost-%COMP%]{background-color:#dfd9ff}.water[_nghost-%COMP%]{background-color:#d9f2ff}.baby-blue[_nghost-%COMP%]{background-color:#d9e6ff}.baby-pink[_nghost-%COMP%]{background-color:#ffdbf1}.light-turquoise[_nghost-%COMP%]{background-color:#d6fcf9}.bright-green[_nghost-%COMP%]{background-color:#d9ffea}.stone[_nghost-%COMP%]{background-color:#f6f4f4}.peach[_nghost-%COMP%]{background-color:#ffe5b4}.soft-coral[_nghost-%COMP%]{background-color:#ffd2c2}.pale-yellow[_nghost-%COMP%]{background-color:#fffacd}.pastel-olive[_nghost-%COMP%]{background-color:#dce2b9}.powder-blue-grey[_nghost-%COMP%]{background-color:#d3dbe3}.muted-plum[_nghost-%COMP%]{background-color:#e7c7db}"], changeDetection: 0 }); }
@@ -14732,7 +14722,7 @@ class BottomPositionStrategy {
     }
 }
 
-const _c0$3 = ["handleRef"];
+const _c0$4 = ["handleRef"];
 function DrawerContainer_div_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "div", 3, 4);
 } }
@@ -14846,7 +14836,7 @@ class DrawerContainer extends CdkDialogContainer {
     /** @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$3, 5);
+            i0.ɵɵviewQuery(_c0$4, 5);
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx._portalOutlet = _t.first);
@@ -15316,7 +15306,7 @@ function SeparateTableComponent_div_2_div_1_Template(rf, ctx) { if (rf & 1) {
 function SeparateTableComponent_div_2_div_3_ng_container_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainer(0);
 } }
-const _c0$2 = function (a0, a1) { return { $implicit: a0, column: a1 }; };
+const _c0$3 = function (a0, a1) { return { $implicit: a0, column: a1 }; };
 function SeparateTableComponent_div_2_div_3_Template(rf, ctx) { if (rf & 1) {
     const _r14 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "div", 11);
@@ -15330,7 +15320,7 @@ function SeparateTableComponent_div_2_div_3_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵreference(4);
     i0.ɵɵproperty("ngStyle", column_r11.styles);
     i0.ɵɵadvance(1);
-    i0.ɵɵproperty("ngTemplateOutlet", column_r11.cellTemplate || _r1)("ngTemplateOutletContext", i0.ɵɵpureFunction2(3, _c0$2, row_r3, column_r11));
+    i0.ɵɵproperty("ngTemplateOutlet", column_r11.cellTemplate || _r1)("ngTemplateOutletContext", i0.ɵɵpureFunction2(3, _c0$3, row_r3, column_r11));
 } }
 function SeparateTableComponent_div_2_Template(rf, ctx) { if (rf & 1) {
     const _r17 = i0.ɵɵgetCurrentView();
@@ -15447,15 +15437,142 @@ class ElementOverflowDirective {
             type: Input
         }] }); })();
 
+const _c0$2 = ["container"];
+function DrListOverflowComponent_div_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 4);
+    i0.ɵɵtext(1, "...");
+    i0.ɵɵelementEnd();
+} }
+function DrListOverflowComponent_div_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 5);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵstyleProp("width", ctx_r2.drListCounterWidth, "px");
+    i0.ɵɵadvance(1);
+    i0.ɵɵtextInterpolate1(", +", ctx_r2.overflowed, "");
+} }
+const _c1$1 = ["*"];
+/**
+ * Calculate number in HORIZONTAL list that has been overflowed
+ */
+class DrListOverflowComponent {
+    constructor() {
+        this.drListCounterWidth = 25;
+        /** Number of items that have been overflowed */
+        this.drListOverflowedChange = new EventEmitter();
+        this.cdr = inject(ChangeDetectorRef);
+        this.renderer = inject(Renderer2);
+        this.mutationObserver = new MutationObserver(() => this.calculate());
+        this.overflowed = 0;
+        this.hasEllipsis = false;
+        this.usedWidth = 0;
+    }
+    get hasOverflowed() {
+        return !!this.overflowed || this.hasEllipsis;
+    }
+    ngOnInit() {
+        this.mutationObserver.observe(this.container.nativeElement, { childList: true, subtree: false });
+    }
+    ngOnDestroy() {
+        this.mutationObserver.disconnect();
+    }
+    calculate() {
+        const container = this.container.nativeElement;
+        const items = Array.from(container.children);
+        let usedWidth = 0;
+        let rendered = 0;
+        this.usedWidth = 0;
+        this.overflowed = 0; // to get container without the counter
+        this.hasEllipsis = false;
+        this.cdr.detectChanges();
+        if (items.length === 0) {
+            console.error('No items found in dr-list-overflow. Please make sure all children are a HTMLElements and not just plain text node.');
+        }
+        for (const [index, child] of items.entries()) {
+            const prev = items[index - 1];
+            const prevUsedWidth = usedWidth;
+            usedWidth += child.getBoundingClientRect().width; // we need clientRect width, as offsetWidth is an integer
+            // we need this as the container is flexible and can be wider (we don't know the exact width at the start)
+            this.updateWidth(usedWidth);
+            const containerWidth = container.getBoundingClientRect().width; // we need clientRect width, as clientWidth is an integer
+            const isOverflowed = this.usedWidth > containerWidth;
+            const isOverflowedPrevWithCounter = prev && prevUsedWidth > containerWidth - this.drListCounterWidth;
+            // if the first item is larger than the container - we need to render it anyway, but with ellipsis
+            if (isOverflowed && rendered === 0) {
+                rendered++;
+                this.hasEllipsis = true;
+                break;
+            }
+            // if an item is overflowed and counter makes prev item overflow as well - we need to hide this and prev items
+            if (isOverflowed && isOverflowedPrevWithCounter) {
+                rendered--;
+                this.updateWidth(prevUsedWidth - prev.getBoundingClientRect().width);
+                break;
+            }
+            // if an item is overflowed - hide it
+            if (isOverflowed) {
+                this.updateWidth(prevUsedWidth);
+                break;
+            }
+            rendered++;
+        }
+        // "hide" all overflowed items so they don't appear in innerText (textContent still includes all text, even hidden items)
+        // this prevents tests from picking up overflowed text
+        items.forEach((item, index) => this.renderer.setStyle(item, 'visibility', index < rendered ? 'visible' : 'hidden'));
+        this.overflowed = items.length - rendered;
+        this.drListOverflowedChange.emit(this.overflowed);
+        this.cdr.markForCheck();
+    }
+    /** Immediately update the container width to check whether items are overflowing or the container just became wider */
+    updateWidth(width) {
+        this.usedWidth = width;
+        this.renderer.setStyle(this.container.nativeElement, 'width', `${width}px`);
+    }
+    /** @nocollapse */ static { this.ɵfac = function DrListOverflowComponent_Factory(t) { return new (t || DrListOverflowComponent)(); }; }
+    /** @nocollapse */ static { this.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: DrListOverflowComponent, selectors: [["dr-list-overflow"], ["", "drListOverflow", ""]], viewQuery: function DrListOverflowComponent_Query(rf, ctx) { if (rf & 1) {
+            i0.ɵɵviewQuery(_c0$2, 7);
+        } if (rf & 2) {
+            let _t;
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.container = _t.first);
+        } }, inputs: { drListCounterWidth: ["drListCounterWidth", "drListCounterWidth", numberAttribute] }, outputs: { drListOverflowedChange: "drListOverflowedChange" }, exportAs: ["listOverflow"], standalone: true, features: [i0.ɵɵInputTransformsFeature, i0.ɵɵStandaloneFeature], ngContentSelectors: _c1$1, decls: 5, vars: 2, consts: [[1, "overflow-container"], ["container", ""], ["class", "overflow-ellipsis", 4, "ngIf"], ["class", "overflow-counter", 3, "width", 4, "ngIf"], [1, "overflow-ellipsis"], [1, "overflow-counter"]], template: function DrListOverflowComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵprojectionDef();
+            i0.ɵɵelementStart(0, "div", 0, 1);
+            i0.ɵɵprojection(2);
+            i0.ɵɵelementEnd();
+            i0.ɵɵtemplate(3, DrListOverflowComponent_div_3_Template, 2, 0, "div", 2);
+            i0.ɵɵtemplate(4, DrListOverflowComponent_div_4_Template, 2, 3, "div", 3);
+        } if (rf & 2) {
+            i0.ɵɵadvance(3);
+            i0.ɵɵproperty("ngIf", ctx.hasEllipsis);
+            i0.ɵɵadvance(1);
+            i0.ɵɵproperty("ngIf", ctx.overflowed);
+        } }, dependencies: [CommonModule, i1.NgIf], styles: ["[_nghost-%COMP%]{display:flex;align-items:center;max-width:100%;min-width:0}.overflow-container[_ngcontent-%COMP%]{position:relative;display:flex;max-width:100%;overflow:hidden;white-space:nowrap}.overflow-container[_ngcontent-%COMP%]    >*{flex-shrink:0;white-space:nowrap}.overflow-ellipsis[_ngcontent-%COMP%], .overflow-counter[_ngcontent-%COMP%]{text-align:left;white-space:nowrap}"] }); }
+}
+(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DrListOverflowComponent, [{
+        type: Component,
+        args: [{ standalone: true, exportAs: 'listOverflow', selector: 'dr-list-overflow, [drListOverflow]', imports: [CommonModule], template: "<div #container class=\"overflow-container\">\n    <ng-content></ng-content>\n</div>\n\n<div *ngIf=\"hasEllipsis\" class=\"overflow-ellipsis\">...</div>\n<div *ngIf=\"overflowed\" class=\"overflow-counter\" [style.width.px]=\"drListCounterWidth\">, +{{ overflowed }}</div>\n", styles: [":host{display:flex;align-items:center;max-width:100%;min-width:0}.overflow-container{position:relative;display:flex;max-width:100%;overflow:hidden;white-space:nowrap}.overflow-container ::ng-deep>*{flex-shrink:0;white-space:nowrap}.overflow-ellipsis,.overflow-counter{text-align:left;white-space:nowrap}\n"] }]
+    }], null, { drListCounterWidth: [{
+            type: Input,
+            args: [{ transform: numberAttribute }]
+        }], drListOverflowedChange: [{
+            type: Output
+        }], container: [{
+            type: ViewChild,
+            args: ['container', { static: true }]
+        }] }); })();
+
 const _c0$1 = ["*"];
 class TextOverflowComponent {
     constructor() {
         this.overflowType = 'horizontal';
         this.showTooltip = true;
+        this.tooltipPosition = 'top';
         this.isOverflow = false;
     }
     /** @nocollapse */ static { this.ɵfac = function TextOverflowComponent_Factory(t) { return new (t || TextOverflowComponent)(); }; }
-    /** @nocollapse */ static { this.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: TextOverflowComponent, selectors: [["dr-text-overflow"]], inputs: { overflowType: "overflowType", showTooltip: "showTooltip" }, standalone: true, features: [i0.ɵɵStandaloneFeature], ngContentSelectors: _c0$1, decls: 3, vars: 3, consts: [[1, "overflow-element", 3, "drElementOverflow", "drElementOverflowType", "drTooltip", "drElementOverflowChange"], ["el", ""]], template: function TextOverflowComponent_Template(rf, ctx) { if (rf & 1) {
+    /** @nocollapse */ static { this.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: TextOverflowComponent, selectors: [["dr-text-overflow"]], inputs: { overflowType: "overflowType", showTooltip: "showTooltip", tooltipPosition: "tooltipPosition" }, standalone: true, features: [i0.ɵɵStandaloneFeature], ngContentSelectors: _c0$1, decls: 3, vars: 4, consts: [[1, "overflow-element", 3, "drElementOverflow", "drElementOverflowType", "drTooltip", "drTooltipPosition", "drElementOverflowChange"], ["el", ""]], template: function TextOverflowComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef();
             i0.ɵɵelementStart(0, "div", 0, 1);
             i0.ɵɵlistener("drElementOverflowChange", function TextOverflowComponent_Template_div_drElementOverflowChange_0_listener($event) { return ctx.isOverflow = $event; });
@@ -15463,16 +15580,18 @@ class TextOverflowComponent {
             i0.ɵɵelementEnd();
         } if (rf & 2) {
             const _r0 = i0.ɵɵreference(1);
-            i0.ɵɵproperty("drElementOverflow", ctx.isOverflow)("drElementOverflowType", ctx.overflowType)("drTooltip", ctx.showTooltip && ctx.isOverflow && _r0.innerText);
+            i0.ɵɵproperty("drElementOverflow", ctx.isOverflow)("drElementOverflowType", ctx.overflowType)("drTooltip", ctx.showTooltip && ctx.isOverflow && _r0.innerText)("drTooltipPosition", ctx.tooltipPosition);
         } }, dependencies: [CommonModule, ElementOverflowDirective, DrTooltipModule, DrTooltipDirective], styles: ["[_nghost-%COMP%]{overflow:hidden}[_nghost-%COMP%]   .overflow-element[_ngcontent-%COMP%]{text-overflow:ellipsis;overflow:hidden;width:100%;white-space:nowrap}"], changeDetection: 0 }); }
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TextOverflowComponent, [{
         type: Component,
-        args: [{ selector: 'dr-text-overflow', standalone: true, imports: [CommonModule, ElementOverflowDirective, DrTooltipModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n    class=\"overflow-element\"\n    #el\n    [(drElementOverflow)]=\"isOverflow\"\n    [drElementOverflowType]=\"overflowType\"\n    [drTooltip]=\"showTooltip && isOverflow && el.innerText\">\n    <ng-content></ng-content>\n</div>\n", styles: [":host{overflow:hidden}:host .overflow-element{text-overflow:ellipsis;overflow:hidden;width:100%;white-space:nowrap}\n"] }]
+        args: [{ selector: 'dr-text-overflow', standalone: true, imports: [CommonModule, ElementOverflowDirective, DrTooltipModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n    class=\"overflow-element\"\n    #el\n    [(drElementOverflow)]=\"isOverflow\"\n    [drElementOverflowType]=\"overflowType\"\n    [drTooltip]=\"showTooltip && isOverflow && el.innerText\"\n    [drTooltipPosition]=\"tooltipPosition\">\n    <ng-content></ng-content>\n</div>\n", styles: [":host{overflow:hidden}:host .overflow-element{text-overflow:ellipsis;overflow:hidden;width:100%;white-space:nowrap}\n"] }]
     }], null, { overflowType: [{
             type: Input
         }], showTooltip: [{
             type: Input
+        }], tooltipPosition: [{
+            type: Input
         }] }); })();
 
 class TruncateTextDirective {
@@ -15656,228 +15775,237 @@ class SearchPipe {
 
 const _c0 = ["dropdownItemTemplate"];
 const _c1 = ["labelItemTemplate"];
-function FilterDropdownComponent_ng_container_3_ng_container_1_ng_container_1_ng_container_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementContainerStart(0);
-    i0.ɵɵtext(1, ",");
-    i0.ɵɵelementContainerEnd();
-} }
-const _c2 = function (a0) { return { $implicit: a0 }; };
-function FilterDropdownComponent_ng_container_3_ng_container_1_ng_container_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementContainerStart(0);
-    i0.ɵɵtemplate(1, FilterDropdownComponent_ng_container_3_ng_container_1_ng_container_1_ng_container_1_Template, 2, 0, "ng-container", 9);
-    i0.ɵɵelementContainer(2, 10);
-    i0.ɵɵelementContainerEnd();
-} if (rf & 2) {
-    const item_r14 = ctx.$implicit;
-    const i_r15 = ctx.index;
-    const ctx_r12 = i0.ɵɵnextContext(3);
-    const _r7 = i0.ɵɵreference(11);
-    i0.ɵɵadvance(1);
-    i0.ɵɵproperty("ngIf", i_r15);
-    i0.ɵɵadvance(1);
-    i0.ɵɵproperty("ngTemplateOutlet", ctx_r12.labelItemTemplate || _r7)("ngTemplateOutletContext", i0.ɵɵpureFunction1(3, _c2, item_r14));
-} }
-function FilterDropdownComponent_ng_container_3_ng_container_1_ng_container_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementContainerStart(0);
-    i0.ɵɵtext(1);
-    i0.ɵɵelementContainerEnd();
-} if (rf & 2) {
-    const ctx_r13 = i0.ɵɵnextContext(3);
-    i0.ɵɵadvance(1);
-    i0.ɵɵtextInterpolate1(" + ", ctx_r13.selectedArr.length - ctx_r13.showInLabelLimit, "");
-} }
-function FilterDropdownComponent_ng_container_3_ng_container_1_Template(rf, ctx) { if (rf & 1) {
+function FilterDropdownComponent_ng_container_5_ng_container_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainerStart(0);
-    i0.ɵɵtemplate(1, FilterDropdownComponent_ng_container_3_ng_container_1_ng_container_1_Template, 3, 5, "ng-container", 8);
-    i0.ɵɵpipe(2, "slice");
-    i0.ɵɵtemplate(3, FilterDropdownComponent_ng_container_3_ng_container_1_ng_container_3_Template, 2, 1, "ng-container", 9);
+    i0.ɵɵelementContainer(1, 12);
     i0.ɵɵelementContainerEnd();
 } if (rf & 2) {
-    const ctx_r11 = i0.ɵɵnextContext(2);
+    i0.ɵɵnextContext(2);
+    const _r10 = i0.ɵɵreference(15);
     i0.ɵɵadvance(1);
-    i0.ɵɵproperty("ngForOf", i0.ɵɵpipeBind3(2, 2, ctx_r11.selectedArr, 0, ctx_r11.showInLabelLimit));
-    i0.ɵɵadvance(2);
-    i0.ɵɵproperty("ngIf", ctx_r11.selectedArr.length > ctx_r11.showInLabelLimit);
+    i0.ɵɵproperty("ngTemplateOutlet", _r10);
 } }
-function FilterDropdownComponent_ng_container_3_Template(rf, ctx) { if (rf & 1) {
+function FilterDropdownComponent_ng_container_5_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainerStart(0);
-    i0.ɵɵtemplate(1, FilterDropdownComponent_ng_container_3_ng_container_1_Template, 4, 6, "ng-container", 2);
+    i0.ɵɵtemplate(1, FilterDropdownComponent_ng_container_5_ng_container_1_Template, 2, 1, "ng-container", 4);
     i0.ɵɵelementContainerEnd();
 } if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext();
-    const _r1 = i0.ɵɵreference(5);
+    const ctx_r1 = i0.ɵɵnextContext();
+    const _r2 = i0.ɵɵreference(7);
     i0.ɵɵadvance(1);
-    i0.ɵɵproperty("ngIf", ctx_r0.selectedArr.length <= ctx_r0.showManyLimit)("ngIfElse", _r1);
+    i0.ɵɵproperty("ngIf", ctx_r1.selectedArr.length <= ctx_r1.showManyLimit)("ngIfElse", _r2);
 } }
-function FilterDropdownComponent_ng_template_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵtext(0, "Many");
+function FilterDropdownComponent_ng_template_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span");
+    i0.ɵɵtext(1, "Many");
+    i0.ɵɵelementEnd();
 } }
-function FilterDropdownComponent_ng_template_6_ng_container_0_Template(rf, ctx) { if (rf & 1) {
+function FilterDropdownComponent_ng_template_8_ng_container_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainerStart(0);
-    i0.ɵɵelementStart(1, "span", 11);
+    i0.ɵɵelementStart(1, "span", 13);
     i0.ɵɵtext(2, "None");
     i0.ɵɵelementEnd();
     i0.ɵɵelementContainerEnd();
 } }
-function FilterDropdownComponent_ng_template_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵtemplate(0, FilterDropdownComponent_ng_template_6_ng_container_0_Template, 3, 0, "ng-container", 2);
+function FilterDropdownComponent_ng_template_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtemplate(0, FilterDropdownComponent_ng_template_8_ng_container_0_Template, 3, 0, "ng-container", 4);
 } if (rf & 2) {
-    const ctx_r4 = i0.ɵɵnextContext();
-    const _r5 = i0.ɵɵreference(9);
-    i0.ɵɵproperty("ngIf", ctx_r4.useNoneTemplate && !ctx_r4.isSelectedAll)("ngIfElse", _r5);
+    const ctx_r5 = i0.ɵɵnextContext();
+    const _r6 = i0.ɵɵreference(11);
+    i0.ɵɵproperty("ngIf", ctx_r5.useNoneTemplate && !ctx_r5.isSelectedAll)("ngIfElse", _r6);
 } }
-function FilterDropdownComponent_ng_template_8_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 11);
+function FilterDropdownComponent_ng_template_10_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 13);
     i0.ɵɵtext(1, "All");
     i0.ɵɵelementEnd();
 } }
-function FilterDropdownComponent_ng_template_10_Template(rf, ctx) { if (rf & 1) {
+function FilterDropdownComponent_ng_template_12_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtext(0);
 } if (rf & 2) {
     const item_r18 = ctx.$implicit;
-    const ctx_r8 = i0.ɵɵnextContext();
-    i0.ɵɵtextInterpolate(ctx_r8._item(item_r18));
+    const ctx_r9 = i0.ɵɵnextContext();
+    i0.ɵɵtextInterpolate1(" ", ctx_r9._item(item_r18), "");
+} }
+function FilterDropdownComponent_ng_template_14_span_0_ng_container_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementContainerStart(0);
+    i0.ɵɵtext(1, ",");
+    i0.ɵɵelementContainerEnd();
+} }
+const _c2 = function (a0) { return { $implicit: a0 }; };
+function FilterDropdownComponent_ng_template_14_span_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span");
+    i0.ɵɵtemplate(1, FilterDropdownComponent_ng_template_14_span_0_ng_container_1_Template, 2, 0, "ng-container", 15);
+    i0.ɵɵelementContainer(2, 16);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const item_r20 = ctx.$implicit;
+    const i_r21 = ctx.index;
+    const ctx_r19 = i0.ɵɵnextContext(2);
+    const _r8 = i0.ɵɵreference(13);
+    i0.ɵɵadvance(1);
+    i0.ɵɵproperty("ngIf", i_r21);
+    i0.ɵɵadvance(1);
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r19.labelItemTemplate || _r8)("ngTemplateOutletContext", i0.ɵɵpureFunction1(3, _c2, item_r20));
+} }
+function FilterDropdownComponent_ng_template_14_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtemplate(0, FilterDropdownComponent_ng_template_14_span_0_Template, 3, 5, "span", 14);
+} if (rf & 2) {
+    const ctx_r11 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("ngForOf", ctx_r11.selectedArr);
 } }
-function FilterDropdownComponent_ng_template_12_div_0_div_1_Template(rf, ctx) { if (rf & 1) {
-    const _r30 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 21)(1, "dr-input", 22, 23);
-    i0.ɵɵlistener("ngModelChange", function FilterDropdownComponent_ng_template_12_div_0_div_1_Template_dr_input_ngModelChange_1_listener($event) { i0.ɵɵrestoreView(_r30); const ctx_r29 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r29.search = $event); });
+function FilterDropdownComponent_ng_template_16_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "dr-tooltip-default");
+    i0.ɵɵtext(1);
+    i0.ɵɵelementContainer(2, 12);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r13 = i0.ɵɵnextContext();
+    const _r10 = i0.ɵɵreference(15);
+    i0.ɵɵadvance(1);
+    i0.ɵɵtextInterpolate1("", ctx_r13.label, ": ");
+    i0.ɵɵadvance(1);
+    i0.ɵɵproperty("ngTemplateOutlet", _r10);
+} }
+function FilterDropdownComponent_ng_template_18_div_0_div_1_Template(rf, ctx) { if (rf & 1) {
+    const _r34 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 26)(1, "dr-input", 27, 28);
+    i0.ɵɵlistener("ngModelChange", function FilterDropdownComponent_ng_template_18_div_0_div_1_Template_dr_input_ngModelChange_1_listener($event) { i0.ɵɵrestoreView(_r34); const ctx_r33 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r33.search = $event); });
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const ctx_r22 = i0.ɵɵnextContext(3);
+    const ctx_r26 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance(1);
-    i0.ɵɵclassProp("with-value", ctx_r22.search);
-    i0.ɵɵproperty("clearable", true)("ngModel", ctx_r22.search);
+    i0.ɵɵclassProp("with-value", ctx_r26.search);
+    i0.ɵɵproperty("clearable", true)("ngModel", ctx_r26.search);
 } }
-function FilterDropdownComponent_ng_template_12_div_0_a_5_Template(rf, ctx) { if (rf & 1) {
-    const _r32 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "a", 24);
-    i0.ɵɵlistener("click", function FilterDropdownComponent_ng_template_12_div_0_a_5_Template_a_click_0_listener() { i0.ɵɵrestoreView(_r32); const ctx_r31 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r31.onSelectAll()); });
+function FilterDropdownComponent_ng_template_18_div_0_a_5_Template(rf, ctx) { if (rf & 1) {
+    const _r36 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "a", 29);
+    i0.ɵɵlistener("click", function FilterDropdownComponent_ng_template_18_div_0_a_5_Template_a_click_0_listener() { i0.ɵɵrestoreView(_r36); const ctx_r35 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r35.onSelectAll()); });
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r23 = i0.ɵɵnextContext(3);
+    const ctx_r27 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance(1);
-    i0.ɵɵtextInterpolate(ctx_r23.isSelectedAll ? "Select none" : "Select all");
+    i0.ɵɵtextInterpolate(ctx_r27.isSelectedAll ? "Select none" : "Select all");
 } }
-function FilterDropdownComponent_ng_template_12_div_0_dr_dropdown_6_dr_dropdown_item_1_dr_checkbox_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "dr-checkbox", 32);
+function FilterDropdownComponent_ng_template_18_div_0_dr_dropdown_6_dr_dropdown_item_1_dr_checkbox_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "dr-checkbox", 37);
 } if (rf & 2) {
-    const item_r34 = i0.ɵɵnextContext().$implicit;
-    const _r35 = i0.ɵɵreference(1);
-    i0.ɵɵproperty("checkedStatus", _r35.selected)("disabled", item_r34.disabled);
+    const item_r38 = i0.ɵɵnextContext().$implicit;
+    const _r39 = i0.ɵɵreference(1);
+    i0.ɵɵproperty("checkedStatus", _r39.selected)("disabled", item_r38.disabled);
 } }
-function FilterDropdownComponent_ng_template_12_div_0_dr_dropdown_6_dr_dropdown_item_1_ng_template_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 33);
+function FilterDropdownComponent_ng_template_18_div_0_dr_dropdown_6_dr_dropdown_item_1_ng_template_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "dr-text-overflow");
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const item_r34 = i0.ɵɵnextContext().$implicit;
-    const ctx_r38 = i0.ɵɵnextContext(4);
+    const item_r38 = i0.ɵɵnextContext().$implicit;
+    const ctx_r42 = i0.ɵɵnextContext(4);
     i0.ɵɵadvance(1);
-    i0.ɵɵtextInterpolate1(" ", ctx_r38._item(item_r34), " ");
+    i0.ɵɵtextInterpolate1("", ctx_r42._item(item_r38), " ");
 } }
-function FilterDropdownComponent_ng_template_12_div_0_dr_dropdown_6_dr_dropdown_item_1_Template(rf, ctx) { if (rf & 1) {
-    const _r42 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "dr-dropdown-item", 27, 28);
-    i0.ɵɵlistener("keyup.enter", function FilterDropdownComponent_ng_template_12_div_0_dr_dropdown_6_dr_dropdown_item_1_Template_dr_dropdown_item_keyup_enter_0_listener() { const restoredCtx = i0.ɵɵrestoreView(_r42); const item_r34 = restoredCtx.$implicit; const _r35 = i0.ɵɵreference(1); const ctx_r41 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(!_r35.selected && ctx_r41.selectedChange.emit(item_r34)); })("click", function FilterDropdownComponent_ng_template_12_div_0_dr_dropdown_6_dr_dropdown_item_1_Template_dr_dropdown_item_click_0_listener() { const restoredCtx = i0.ɵɵrestoreView(_r42); const item_r34 = restoredCtx.$implicit; const _r35 = i0.ɵɵreference(1); const close_r19 = i0.ɵɵnextContext(3).closePopover; const ctx_r43 = i0.ɵɵnextContext(); return i0.ɵɵresetView(!_r35.disabled && ctx_r43.onSelectedItemChanged(item_r34, _r35.selected, close_r19)); });
-    i0.ɵɵelementContainerStart(2, 29);
-    i0.ɵɵtemplate(3, FilterDropdownComponent_ng_template_12_div_0_dr_dropdown_6_dr_dropdown_item_1_dr_checkbox_3_Template, 1, 2, "dr-checkbox", 30);
-    i0.ɵɵelementContainerStart(4, 29);
-    i0.ɵɵelementContainer(5, 10);
+function FilterDropdownComponent_ng_template_18_div_0_dr_dropdown_6_dr_dropdown_item_1_Template(rf, ctx) { if (rf & 1) {
+    const _r46 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "dr-dropdown-item", 32, 33);
+    i0.ɵɵlistener("keyup.enter", function FilterDropdownComponent_ng_template_18_div_0_dr_dropdown_6_dr_dropdown_item_1_Template_dr_dropdown_item_keyup_enter_0_listener() { const restoredCtx = i0.ɵɵrestoreView(_r46); const item_r38 = restoredCtx.$implicit; const _r39 = i0.ɵɵreference(1); const ctx_r45 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(!_r39.selected && ctx_r45.selectedChange.emit(item_r38)); })("click", function FilterDropdownComponent_ng_template_18_div_0_dr_dropdown_6_dr_dropdown_item_1_Template_dr_dropdown_item_click_0_listener() { const restoredCtx = i0.ɵɵrestoreView(_r46); const item_r38 = restoredCtx.$implicit; const _r39 = i0.ɵɵreference(1); const close_r23 = i0.ɵɵnextContext(3).closePopover; const ctx_r47 = i0.ɵɵnextContext(); return i0.ɵɵresetView(!_r39.disabled && ctx_r47.onSelectedItemChanged(item_r38, _r39.selected, close_r23)); });
+    i0.ɵɵelementContainerStart(2, 34);
+    i0.ɵɵtemplate(3, FilterDropdownComponent_ng_template_18_div_0_dr_dropdown_6_dr_dropdown_item_1_dr_checkbox_3_Template, 1, 2, "dr-checkbox", 35);
+    i0.ɵɵelementContainerStart(4, 34);
+    i0.ɵɵelementContainer(5, 16);
     i0.ɵɵelementContainerEnd();
-    i0.ɵɵtemplate(6, FilterDropdownComponent_ng_template_12_div_0_dr_dropdown_6_dr_dropdown_item_1_ng_template_6_Template, 2, 1, "ng-template", null, 31, i0.ɵɵtemplateRefExtractor);
+    i0.ɵɵtemplate(6, FilterDropdownComponent_ng_template_18_div_0_dr_dropdown_6_dr_dropdown_item_1_ng_template_6_Template, 2, 1, "ng-template", null, 36, i0.ɵɵtemplateRefExtractor);
     i0.ɵɵelementContainerEnd();
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const item_r34 = ctx.$implicit;
-    const _r37 = i0.ɵɵreference(7);
-    const ctx_r33 = i0.ɵɵnextContext(4);
-    i0.ɵɵproperty("selected", ctx_r33.isSelected(item_r34))("disabled", item_r34.disabled);
+    const item_r38 = ctx.$implicit;
+    const _r41 = i0.ɵɵreference(7);
+    const ctx_r37 = i0.ɵɵnextContext(4);
+    i0.ɵɵproperty("selected", ctx_r37.isSelected(item_r38))("disabled", item_r38.disabled);
     i0.ɵɵadvance(3);
-    i0.ɵɵproperty("ngIf", ctx_r33.multiple);
+    i0.ɵɵproperty("ngIf", ctx_r37.multiple);
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("ngTemplateOutlet", ctx_r33.dropdownItemTemplate || _r37)("ngTemplateOutletContext", i0.ɵɵpureFunction1(5, _c2, item_r34));
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r37.dropdownItemTemplate || _r41)("ngTemplateOutletContext", i0.ɵɵpureFunction1(5, _c2, item_r38));
 } }
-function FilterDropdownComponent_ng_template_12_div_0_dr_dropdown_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "dr-dropdown", 25);
-    i0.ɵɵtemplate(1, FilterDropdownComponent_ng_template_12_div_0_dr_dropdown_6_dr_dropdown_item_1_Template, 8, 7, "dr-dropdown-item", 26);
+function FilterDropdownComponent_ng_template_18_div_0_dr_dropdown_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "dr-dropdown", 30);
+    i0.ɵɵtemplate(1, FilterDropdownComponent_ng_template_18_div_0_dr_dropdown_6_dr_dropdown_item_1_Template, 8, 7, "dr-dropdown-item", 31);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const filteredItems_r21 = i0.ɵɵnextContext().ngLet;
-    const ctx_r24 = i0.ɵɵnextContext(2);
+    const filteredItems_r25 = i0.ɵɵnextContext().ngLet;
+    const ctx_r28 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance(1);
-    i0.ɵɵproperty("ngForOf", filteredItems_r21)("ngForTrackBy", ctx_r24.trackByFn);
+    i0.ɵɵproperty("ngForOf", filteredItems_r25)("ngForTrackBy", ctx_r28.trackByFn);
 } }
-function FilterDropdownComponent_ng_template_12_div_0_ng_template_7_div_0_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 35);
+function FilterDropdownComponent_ng_template_18_div_0_ng_template_7_div_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 39);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r46 = i0.ɵɵnextContext(4);
+    const ctx_r50 = i0.ɵɵnextContext(4);
     i0.ɵɵadvance(1);
-    i0.ɵɵtextInterpolate1(" ", ctx_r46.noItemsPlaceholder, " ");
+    i0.ɵɵtextInterpolate1(" ", ctx_r50.noItemsPlaceholder, " ");
 } }
-function FilterDropdownComponent_ng_template_12_div_0_ng_template_7_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵtemplate(0, FilterDropdownComponent_ng_template_12_div_0_ng_template_7_div_0_Template, 2, 1, "div", 34);
+function FilterDropdownComponent_ng_template_18_div_0_ng_template_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtemplate(0, FilterDropdownComponent_ng_template_18_div_0_ng_template_7_div_0_Template, 2, 1, "div", 38);
 } if (rf & 2) {
-    const ctx_r26 = i0.ɵɵnextContext(3);
-    i0.ɵɵproperty("ngIf", ctx_r26.noItemsPlaceholder);
+    const ctx_r30 = i0.ɵɵnextContext(3);
+    i0.ɵɵproperty("ngIf", ctx_r30.noItemsPlaceholder);
 } }
-function FilterDropdownComponent_ng_template_12_div_0_div_9_dr_button_1_Template(rf, ctx) { if (rf & 1) {
-    const _r50 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "dr-button", 39);
-    i0.ɵɵlistener("click", function FilterDropdownComponent_ng_template_12_div_0_div_9_dr_button_1_Template_dr_button_click_0_listener() { i0.ɵɵrestoreView(_r50); const close_r19 = i0.ɵɵnextContext(3).closePopover; const ctx_r48 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r48.onClear(close_r19)); });
+function FilterDropdownComponent_ng_template_18_div_0_div_9_dr_button_1_Template(rf, ctx) { if (rf & 1) {
+    const _r54 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "dr-button", 43);
+    i0.ɵɵlistener("click", function FilterDropdownComponent_ng_template_18_div_0_div_9_dr_button_1_Template_dr_button_click_0_listener() { i0.ɵɵrestoreView(_r54); const close_r23 = i0.ɵɵnextContext(3).closePopover; const ctx_r52 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r52.onClear(close_r23)); });
     i0.ɵɵtext(1, " Clear ");
     i0.ɵɵelementEnd();
 } }
-function FilterDropdownComponent_ng_template_12_div_0_div_9_Template(rf, ctx) { if (rf & 1) {
-    const _r53 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 36);
-    i0.ɵɵtemplate(1, FilterDropdownComponent_ng_template_12_div_0_div_9_dr_button_1_Template, 2, 0, "dr-button", 37);
-    i0.ɵɵelementStart(2, "dr-button", 38);
-    i0.ɵɵlistener("click", function FilterDropdownComponent_ng_template_12_div_0_div_9_Template_dr_button_click_2_listener() { i0.ɵɵrestoreView(_r53); const close_r19 = i0.ɵɵnextContext(2).closePopover; const ctx_r51 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r51.onApply(close_r19)); });
+function FilterDropdownComponent_ng_template_18_div_0_div_9_Template(rf, ctx) { if (rf & 1) {
+    const _r57 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 40);
+    i0.ɵɵtemplate(1, FilterDropdownComponent_ng_template_18_div_0_div_9_dr_button_1_Template, 2, 0, "dr-button", 41);
+    i0.ɵɵelementStart(2, "dr-button", 42);
+    i0.ɵɵlistener("click", function FilterDropdownComponent_ng_template_18_div_0_div_9_Template_dr_button_click_2_listener() { i0.ɵɵrestoreView(_r57); const close_r23 = i0.ɵɵnextContext(2).closePopover; const ctx_r55 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r55.onApply(close_r23)); });
     i0.ɵɵtext(3, "Apply");
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const ctx_r27 = i0.ɵɵnextContext(3);
+    const ctx_r31 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance(1);
-    i0.ɵɵproperty("ngIf", ctx_r27.clearable && ctx_r27.hasSelection);
+    i0.ɵɵproperty("ngIf", ctx_r31.clearable && ctx_r31.hasSelection);
 } }
-function FilterDropdownComponent_ng_template_12_div_0_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 13);
-    i0.ɵɵtemplate(1, FilterDropdownComponent_ng_template_12_div_0_div_1_Template, 3, 4, "div", 14);
-    i0.ɵɵelementStart(2, "div", 15)(3, "div", 16);
+function FilterDropdownComponent_ng_template_18_div_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 18);
+    i0.ɵɵtemplate(1, FilterDropdownComponent_ng_template_18_div_0_div_1_Template, 3, 4, "div", 19);
+    i0.ɵɵelementStart(2, "div", 20)(3, "div", 21);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(5, FilterDropdownComponent_ng_template_12_div_0_a_5_Template, 2, 1, "a", 17);
+    i0.ɵɵtemplate(5, FilterDropdownComponent_ng_template_18_div_0_a_5_Template, 2, 1, "a", 22);
     i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(6, FilterDropdownComponent_ng_template_12_div_0_dr_dropdown_6_Template, 2, 2, "dr-dropdown", 18);
-    i0.ɵɵtemplate(7, FilterDropdownComponent_ng_template_12_div_0_ng_template_7_Template, 1, 1, "ng-template", null, 19, i0.ɵɵtemplateRefExtractor);
-    i0.ɵɵtemplate(9, FilterDropdownComponent_ng_template_12_div_0_div_9_Template, 4, 1, "div", 20);
+    i0.ɵɵtemplate(6, FilterDropdownComponent_ng_template_18_div_0_dr_dropdown_6_Template, 2, 2, "dr-dropdown", 23);
+    i0.ɵɵtemplate(7, FilterDropdownComponent_ng_template_18_div_0_ng_template_7_Template, 1, 1, "ng-template", null, 24, i0.ɵɵtemplateRefExtractor);
+    i0.ɵɵtemplate(9, FilterDropdownComponent_ng_template_18_div_0_div_9_Template, 4, 1, "div", 25);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const filteredItems_r21 = ctx.ngLet;
-    const _r25 = i0.ɵɵreference(8);
-    const ctx_r20 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("ngClass", ctx_r20.dropdownClass);
+    const filteredItems_r25 = ctx.ngLet;
+    const _r29 = i0.ɵɵreference(8);
+    const ctx_r24 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("ngClass", ctx_r24.dropdownClass);
     i0.ɵɵadvance(1);
-    i0.ɵɵproperty("ngIf", ctx_r20.showSearch);
+    i0.ɵɵproperty("ngIf", ctx_r24.showSearch);
     i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate1("Filter by ", ctx_r20.label, "");
+    i0.ɵɵtextInterpolate1("Filter by ", ctx_r24.label, "");
     i0.ɵɵadvance(1);
-    i0.ɵɵproperty("ngIf", ctx_r20.showSelectAll);
+    i0.ɵɵproperty("ngIf", ctx_r24.showSelectAll);
     i0.ɵɵadvance(1);
-    i0.ɵɵproperty("ngIf", filteredItems_r21.length)("ngIfElse", _r25);
+    i0.ɵɵproperty("ngIf", filteredItems_r25.length)("ngIfElse", _r29);
     i0.ɵɵadvance(3);
-    i0.ɵɵproperty("ngIf", ctx_r20.multiple);
+    i0.ɵɵproperty("ngIf", ctx_r24.multiple);
 } }
-function FilterDropdownComponent_ng_template_12_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵtemplate(0, FilterDropdownComponent_ng_template_12_div_0_Template, 10, 7, "div", 12);
+function FilterDropdownComponent_ng_template_18_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtemplate(0, FilterDropdownComponent_ng_template_18_div_0_Template, 10, 7, "div", 17);
     i0.ɵɵpipe(1, "search");
 } if (rf & 2) {
-    const ctx_r10 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("ngLet", i0.ɵɵpipeBind3(1, 1, ctx_r10.items, ctx_r10.search, ctx_r10.searchBy));
+    const ctx_r15 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("ngLet", i0.ɵɵpipeBind3(1, 1, ctx_r15.items, ctx_r15.search, ctx_r15.searchBy));
 } }
 class FilterDropdownComponent {
     constructor() {
@@ -15889,13 +16017,13 @@ class FilterDropdownComponent {
         this.noItemsPlaceholder = 'No items found';
         this.dropdownClass = '';
         this.dropdownPosition = 'bottom-right';
+        this.overflowTooltipPosition = 'bottom';
         this.searchBy = [];
         this.multiple = false;
         this.clearable = false;
         this.trackBy = null;
         this.showSearchLimit = 10;
-        this.showManyLimit = 12;
-        this.showInLabelLimit = 3;
+        this.showManyLimit = 9; // from 10 show counter
         this.useNoneTemplate = false;
         this._selected = null;
         this._selectedOriginal = null;
@@ -15983,35 +16111,44 @@ class FilterDropdownComponent {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.dropdownItemTemplate = _t.first);
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.labelItemTemplate = _t.first);
-        } }, inputs: { disabled: ["disabled", "disabled", booleanAttribute], items: "items", label: "label", selectedUser: "selectedUser", users: "users", noItemsPlaceholder: "noItemsPlaceholder", dropdownClass: "dropdownClass", dropdownPosition: "dropdownPosition", bindValue: "bindValue", displayValue: "displayValue", searchBy: "searchBy", multiple: ["multiple", "multiple", booleanAttribute], clearable: ["clearable", "clearable", booleanAttribute], trackBy: "trackBy", showSearchLimit: "showSearchLimit", showManyLimit: "showManyLimit", showInLabelLimit: "showInLabelLimit", selected: "selected", useNoneTemplate: "useNoneTemplate" }, outputs: { selectedChange: "selectedChange" }, standalone: true, features: [i0.ɵɵInputTransformsFeature, i0.ɵɵStandaloneFeature], decls: 14, vars: 7, consts: [["theme", "dropdown", "iconAfter", "dr-icon-arrow-down", "iconAfterSize", "18", 3, "drPopover", "isActive", "disabled", "drPopoverPosition", "drPopoverClose", "click"], [1, "filter-value"], [4, "ngIf", "ngIfElse"], ["manyTemplate", ""], ["noSelection", ""], ["allTemplate", ""], ["defaultLabelTemplate", ""], ["popover", ""], [4, "ngFor", "ngForOf"], [4, "ngIf"], [3, "ngTemplateOutlet", "ngTemplateOutletContext"], [1, "filter-value-all"], ["class", "dropdown__wrapper", "tabindex", "0", 3, "ngClass", 4, "ngLet"], ["tabindex", "0", 1, "dropdown__wrapper", 3, "ngClass"], ["class", "dropdown__search", 4, "ngIf"], [1, "dropdown__header"], [1, "dropdown__header-title"], ["href", "javascript: void(0)", "class", "dropdown__header-select-all", 3, "click", 4, "ngIf"], ["class", "dr-filter-list", "tabindex", "0", 4, "ngIf", "ngIfElse"], ["noDataPlaceholder", ""], ["class", "dropdown__actions", 4, "ngIf"], [1, "dropdown__search"], ["data-analytics", "filter-dropdown_input-0", "drAutofocus", "", "type", "search", "tabindex", "0", "placeholder", "Search", 3, "clearable", "ngModel", "ngModelChange"], ["searchRef", ""], ["href", "javascript: void(0)", 1, "dropdown__header-select-all", 3, "click"], ["tabindex", "0", 1, "dr-filter-list"], ["class", "dr-filter-list__item", "tabindex", "0", 3, "selected", "disabled", "keyup.enter", "click", 4, "ngFor", "ngForOf", "ngForTrackBy"], ["tabindex", "0", 1, "dr-filter-list__item", 3, "selected", "disabled", "keyup.enter", "click"], ["itemRef", ""], ["dropdownItemContent", ""], ["data-analytics", "filter-dropdown_checkbox-0", "class", "dr-filter-list__item-checkbox", 3, "checkedStatus", "disabled", 4, "ngIf"], ["defaultDropdownItemTemplate", ""], ["data-analytics", "filter-dropdown_checkbox-0", 1, "dr-filter-list__item-checkbox", 3, "checkedStatus", "disabled"], [1, "text-ellipsis"], ["class", "dropdown__no-result", 4, "ngIf"], [1, "dropdown__no-result"], [1, "dropdown__actions"], ["theme", "secondary", "data-analytics", "filter-dropdown_button-1", "class", "dropdown__clear", 3, "click", 4, "ngIf"], ["data-analytics", "filter-dropdown_button-0", 3, "click"], ["theme", "secondary", "data-analytics", "filter-dropdown_button-1", 1, "dropdown__clear", 3, "click"]], template: function FilterDropdownComponent_Template(rf, ctx) { if (rf & 1) {
+        } }, inputs: { disabled: ["disabled", "disabled", booleanAttribute], items: "items", label: "label", selectedUser: "selectedUser", users: "users", noItemsPlaceholder: "noItemsPlaceholder", dropdownClass: "dropdownClass", dropdownPosition: "dropdownPosition", overflowTooltipPosition: "overflowTooltipPosition", bindValue: "bindValue", displayValue: "displayValue", searchBy: "searchBy", multiple: ["multiple", "multiple", booleanAttribute], clearable: ["clearable", "clearable", booleanAttribute], trackBy: "trackBy", showSearchLimit: "showSearchLimit", showManyLimit: "showManyLimit", selected: "selected", useNoneTemplate: "useNoneTemplate" }, outputs: { selectedChange: "selectedChange" }, standalone: true, features: [i0.ɵɵInputTransformsFeature, i0.ɵɵStandaloneFeature], decls: 20, vars: 9, consts: [["theme", "dropdown", "iconAfter", "dr-icon-arrow-down", "iconAfterSize", "18", 3, "drTooltip", "drTooltipPosition", "drPopover", "isActive", "disabled", "drPopoverPosition", "drPopoverClose", "click"], [1, "filter-label"], ["drListOverflow", "", 1, "filter-value"], ["listOverflowRef", "listOverflow"], [4, "ngIf", "ngIfElse"], ["manyTemplate", ""], ["noSelection", ""], ["allTemplate", ""], ["defaultLabelTemplate", ""], ["valueTemplate", ""], ["tooltipTemplate", ""], ["popover", ""], [3, "ngTemplateOutlet"], [1, "filter-value-all"], [4, "ngFor", "ngForOf"], [4, "ngIf"], [3, "ngTemplateOutlet", "ngTemplateOutletContext"], ["class", "dropdown__wrapper", "tabindex", "0", 3, "ngClass", 4, "ngLet"], ["tabindex", "0", 1, "dropdown__wrapper", 3, "ngClass"], ["class", "dropdown__search", 4, "ngIf"], [1, "dropdown__header"], [1, "dropdown__header-title"], ["href", "javascript: void(0)", "class", "dropdown__header-select-all", 3, "click", 4, "ngIf"], ["class", "dr-filter-list", "tabindex", "0", 4, "ngIf", "ngIfElse"], ["noDataPlaceholder", ""], ["class", "dropdown__actions", 4, "ngIf"], [1, "dropdown__search"], ["data-analytics", "filter-dropdown_input-0", "drAutofocus", "", "type", "search", "tabindex", "0", "placeholder", "Search", 3, "clearable", "ngModel", "ngModelChange"], ["searchRef", ""], ["href", "javascript: void(0)", 1, "dropdown__header-select-all", 3, "click"], ["tabindex", "0", 1, "dr-filter-list"], ["class", "dr-filter-list__item", "tabindex", "0", 3, "selected", "disabled", "keyup.enter", "click", 4, "ngFor", "ngForOf", "ngForTrackBy"], ["tabindex", "0", 1, "dr-filter-list__item", 3, "selected", "disabled", "keyup.enter", "click"], ["itemRef", ""], ["dropdownItemContent", ""], ["data-analytics", "filter-dropdown_checkbox-0", "class", "dr-filter-list__item-checkbox", 3, "checkedStatus", "disabled", 4, "ngIf"], ["defaultDropdownItemTemplate", ""], ["data-analytics", "filter-dropdown_checkbox-0", 1, "dr-filter-list__item-checkbox", 3, "checkedStatus", "disabled"], ["class", "dropdown__no-result", 4, "ngIf"], [1, "dropdown__no-result"], [1, "dropdown__actions"], ["theme", "secondary", "data-analytics", "filter-dropdown_button-1", "class", "dropdown__clear", 3, "click", 4, "ngIf"], ["data-analytics", "filter-dropdown_button-0", 3, "click"], ["theme", "secondary", "data-analytics", "filter-dropdown_button-1", 1, "dropdown__clear", 3, "click"]], template: function FilterDropdownComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "dr-button", 0);
             i0.ɵɵlistener("drPopoverClose", function FilterDropdownComponent_Template_dr_button_drPopoverClose_0_listener() { return ctx.onPopoverClose(); })("click", function FilterDropdownComponent_Template_dr_button_click_0_listener($event) { return $event.stopPropagation(); });
-            i0.ɵɵtext(1);
-            i0.ɵɵelementStart(2, "span", 1);
-            i0.ɵɵtemplate(3, FilterDropdownComponent_ng_container_3_Template, 2, 2, "ng-container", 2);
+            i0.ɵɵelementStart(1, "span", 1);
+            i0.ɵɵtext(2);
             i0.ɵɵelementEnd();
-            i0.ɵɵtemplate(4, FilterDropdownComponent_ng_template_4_Template, 1, 0, "ng-template", null, 3, i0.ɵɵtemplateRefExtractor);
-            i0.ɵɵtemplate(6, FilterDropdownComponent_ng_template_6_Template, 1, 2, "ng-template", null, 4, i0.ɵɵtemplateRefExtractor);
-            i0.ɵɵtemplate(8, FilterDropdownComponent_ng_template_8_Template, 2, 0, "ng-template", null, 5, i0.ɵɵtemplateRefExtractor);
-            i0.ɵɵtemplate(10, FilterDropdownComponent_ng_template_10_Template, 1, 1, "ng-template", null, 6, i0.ɵɵtemplateRefExtractor);
+            i0.ɵɵelementStart(3, "span", 2, 3);
+            i0.ɵɵtemplate(5, FilterDropdownComponent_ng_container_5_Template, 2, 2, "ng-container", 4);
             i0.ɵɵelementEnd();
-            i0.ɵɵtemplate(12, FilterDropdownComponent_ng_template_12_Template, 2, 5, "ng-template", null, 7, i0.ɵɵtemplateRefExtractor);
+            i0.ɵɵtemplate(6, FilterDropdownComponent_ng_template_6_Template, 2, 0, "ng-template", null, 5, i0.ɵɵtemplateRefExtractor);
+            i0.ɵɵtemplate(8, FilterDropdownComponent_ng_template_8_Template, 1, 2, "ng-template", null, 6, i0.ɵɵtemplateRefExtractor);
+            i0.ɵɵtemplate(10, FilterDropdownComponent_ng_template_10_Template, 2, 0, "ng-template", null, 7, i0.ɵɵtemplateRefExtractor);
+            i0.ɵɵtemplate(12, FilterDropdownComponent_ng_template_12_Template, 1, 1, "ng-template", null, 8, i0.ɵɵtemplateRefExtractor);
+            i0.ɵɵelementEnd();
+            i0.ɵɵtemplate(14, FilterDropdownComponent_ng_template_14_Template, 1, 1, "ng-template", null, 9, i0.ɵɵtemplateRefExtractor);
+            i0.ɵɵtemplate(16, FilterDropdownComponent_ng_template_16_Template, 3, 2, "ng-template", null, 10, i0.ɵɵtemplateRefExtractor);
+            i0.ɵɵtemplate(18, FilterDropdownComponent_ng_template_18_Template, 2, 5, "ng-template", null, 11, i0.ɵɵtemplateRefExtractor);
         } if (rf & 2) {
-            const _r3 = i0.ɵɵreference(7);
-            const _r9 = i0.ɵɵreference(13);
-            i0.ɵɵproperty("drPopover", _r9)("isActive", ctx.hasSelection)("disabled", ctx.disabled)("drPopoverPosition", ctx.dropdownPosition);
-            i0.ɵɵadvance(1);
-            i0.ɵɵtextInterpolate1(" ", ctx.label, ": ");
+            const _r0 = i0.ɵɵreference(4);
+            const _r4 = i0.ɵɵreference(9);
+            const _r12 = i0.ɵɵreference(17);
+            const _r14 = i0.ɵɵreference(19);
+            i0.ɵɵproperty("drTooltip", ctx.hasSelection && (_r0.hasOverflowed || ctx.selectedArr.length > ctx.showManyLimit) && _r12)("drTooltipPosition", ctx.overflowTooltipPosition)("drPopover", _r14)("isActive", ctx.hasSelection)("disabled", ctx.disabled)("drPopoverPosition", ctx.dropdownPosition);
             i0.ɵɵadvance(2);
-            i0.ɵɵproperty("ngIf", ctx.hasSelection)("ngIfElse", _r3);
-        } }, dependencies: [CommonModule, i1.NgClass, i1.NgForOf, i1.NgIf, i1.NgTemplateOutlet, i1.SlicePipe, DrPopoverModule, DrPopoverDirective, DrDropdownModule, DrDropdownComponent, DrDropdownItemComponent, DrInputsModule, CheckboxComponent, DrInputComponent, DrButtonComponent, SearchPipe,
+            i0.ɵɵtextInterpolate1("", ctx.label, ":");
+            i0.ɵɵadvance(3);
+            i0.ɵɵproperty("ngIf", ctx.hasSelection)("ngIfElse", _r4);
+        } }, dependencies: [CommonModule, i1.NgClass, i1.NgForOf, i1.NgIf, i1.NgTemplateOutlet, DrTooltipModule, DrTooltipDirective, TooltipDefaultComponent, DrPopoverModule, DrPopoverDirective, DrDropdownModule, DrDropdownComponent, DrDropdownItemComponent, DrInputsModule, CheckboxComponent, DrInputComponent, DrButtonComponent, SearchPipe,
             FormsModule, i1$2.NgControlStatus, i1$2.NgModel, LetDirective,
-            AutofocusDirective], styles: [".filter-value[_ngcontent-%COMP%]{font-weight:600}.filter-value-all[_ngcontent-%COMP%]{font-weight:400}.dropdown__wrapper[_ngcontent-%COMP%]{min-width:250px;padding:8px 0 0}.dropdown__wrapper[_ngcontent-%COMP%]  .dr-dropdown__container{padding:0;max-height:none;overflow:visible}.dropdown__wrapper[_ngcontent-%COMP%]  .dr-dropdown-item.item-disabled{cursor:not-allowed}.dropdown__wrapper[_ngcontent-%COMP%]   .dr-filter-list[_ngcontent-%COMP%]{overflow:auto;display:block;max-height:180px}.dropdown__wrapper[_ngcontent-%COMP%]   .dr-filter-list__item[_ngcontent-%COMP%]{margin-bottom:4px}.dropdown__wrapper[_ngcontent-%COMP%]   .dr-filter-list__item[_ngcontent-%COMP%]  .dr-dropdown-item{padding:4px 16px;height:auto}.dropdown__wrapper[_ngcontent-%COMP%]   .dr-filter-list__item[_ngcontent-%COMP%]  .dr-dropdown-item .text-ellipsis{text-overflow:ellipsis;overflow:hidden}.dropdown__wrapper[_ngcontent-%COMP%]   .dr-filter-list__item-checkbox[_ngcontent-%COMP%]{margin-right:4px;pointer-events:none}.dropdown__wrapper[_ngcontent-%COMP%]   .dr-filter-list__item-checkbox[_ngcontent-%COMP%]  label input+span{margin:0}.dropdown__wrapper[_ngcontent-%COMP%]   .dr-filter-list__item-checkbox[_ngcontent-%COMP%]  label input+span:before{margin:3px}.dropdown__search[_ngcontent-%COMP%]{padding:4px 8px}.dropdown__header[_ngcontent-%COMP%]{font-size:12px;line-height:16px;font-weight:400;display:flex;align-items:center;margin:2px 0;padding:4px 16px;white-space:nowrap}.dropdown__header-title[_ngcontent-%COMP%]{flex-grow:1;overflow:hidden;text-overflow:ellipsis;color:#6d6e6f;text-transform:uppercase}.dropdown__header-select-all[_ngcontent-%COMP%]{color:#4646ce;margin-left:8px}.dropdown__actions[_ngcontent-%COMP%]{gap:8px;padding:8px 16px;display:flex;justify-content:flex-end;border-top:1px solid #dbdee3}.dropdown__no-result[_ngcontent-%COMP%]{padding:4px 16px 16px}"], changeDetection: 0 }); }
+            AutofocusDirective,
+            TextOverflowComponent,
+            DrListOverflowComponent], styles: ["[_nghost-%COMP%]  dr-button, [_nghost-%COMP%]  dr-button>button{max-width:100%}.filter-label[_ngcontent-%COMP%]{padding-right:.3em}.filter-value[_ngcontent-%COMP%]{font-weight:600}.filter-value-all[_ngcontent-%COMP%]{font-weight:400}.dropdown__wrapper[_ngcontent-%COMP%]{min-width:250px;padding:8px 0 0}.dropdown__wrapper[_ngcontent-%COMP%]  .dr-dropdown__container{padding:0;max-height:none;overflow:visible}.dropdown__wrapper[_ngcontent-%COMP%]  .dr-dropdown-item.item-disabled{cursor:not-allowed}.dropdown__wrapper[_ngcontent-%COMP%]   .dr-filter-list[_ngcontent-%COMP%]{overflow:auto;display:block;max-height:180px}.dropdown__wrapper[_ngcontent-%COMP%]   .dr-filter-list__item[_ngcontent-%COMP%]{margin-bottom:4px}.dropdown__wrapper[_ngcontent-%COMP%]   .dr-filter-list__item[_ngcontent-%COMP%]  .dr-dropdown-item{padding:0 16px;height:32px}.dropdown__wrapper[_ngcontent-%COMP%]   .dr-filter-list__item[_ngcontent-%COMP%]  .dr-dropdown-item .text-ellipsis{text-overflow:ellipsis;overflow:hidden}.dropdown__wrapper[_ngcontent-%COMP%]   .dr-filter-list__item-checkbox[_ngcontent-%COMP%]{margin-right:4px;pointer-events:none}.dropdown__wrapper[_ngcontent-%COMP%]   .dr-filter-list__item-checkbox[_ngcontent-%COMP%]  label input+span{margin:0}.dropdown__wrapper[_ngcontent-%COMP%]   .dr-filter-list__item-checkbox[_ngcontent-%COMP%]  label input+span:before{margin:3px}.dropdown__search[_ngcontent-%COMP%]{padding:4px 8px}.dropdown__header[_ngcontent-%COMP%]{font-size:12px;line-height:16px;font-weight:400;display:flex;align-items:center;margin:2px 0;padding:4px 16px;white-space:nowrap}.dropdown__header-title[_ngcontent-%COMP%]{flex-grow:1;overflow:hidden;text-overflow:ellipsis;color:#6d6e6f;text-transform:uppercase}.dropdown__header-select-all[_ngcontent-%COMP%]{color:#4646ce;margin-left:8px;text-decoration:none}.dropdown__header-select-all[_ngcontent-%COMP%]:hover{text-decoration:underline}.dropdown__actions[_ngcontent-%COMP%]{gap:8px;padding:8px 16px;display:flex;justify-content:flex-end;border-top:1px solid #dbdee3}.dropdown__no-result[_ngcontent-%COMP%]{padding:4px 16px 16px}"], changeDetection: 0 }); }
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(FilterDropdownComponent, [{
         type: Component,
         args: [{ selector: 'dr-filter-dropdown', standalone: true, imports: [
                     CommonModule,
+                    DrTooltipModule,
                     DrPopoverModule,
                     DrDropdownModule,
                     DrInputsModule,
@@ -16020,7 +16157,9 @@ class FilterDropdownComponent {
                     LetDirective,
                     AutofocusDirective,
                     DrButtonComponent,
-                ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<dr-button\n    theme=\"dropdown\"\n    iconAfter=\"dr-icon-arrow-down\"\n    iconAfterSize=\"18\"\n    [drPopover]=\"popover\"\n    (drPopoverClose)=\"onPopoverClose()\"\n    (click)=\"$event.stopPropagation()\"\n    [isActive]=\"hasSelection\"\n    [disabled]=\"disabled\"\n    [drPopoverPosition]=\"dropdownPosition\">\n    {{ label }}:\n\n    <span class=\"filter-value\">\n        <ng-container *ngIf=\"hasSelection; else noSelection\">\n            <ng-container *ngIf=\"selectedArr.length <= showManyLimit; else manyTemplate\">\n                <ng-container *ngFor=\"let item of selectedArr | slice: 0 : showInLabelLimit; let i = index\">\n                    <ng-container *ngIf=\"i\">,</ng-container>\n                    <ng-container\n                        [ngTemplateOutlet]=\"labelItemTemplate || defaultLabelTemplate\"\n                        [ngTemplateOutletContext]=\"{ $implicit: item }\">\n                    </ng-container>\n                </ng-container>\n                <ng-container *ngIf=\"selectedArr.length > showInLabelLimit\">\n                    + {{ selectedArr.length - showInLabelLimit }}</ng-container\n                >\n            </ng-container>\n        </ng-container>\n    </span>\n    <ng-template #manyTemplate>Many</ng-template>\n    <ng-template #noSelection>\n        <ng-container *ngIf=\"useNoneTemplate && !isSelectedAll; else allTemplate\">\n            <span class=\"filter-value-all\">None</span>\n        </ng-container>\n    </ng-template>\n    <ng-template #allTemplate><span class=\"filter-value-all\">All</span></ng-template>\n    <ng-template #defaultLabelTemplate let-item>{{ _item(item) }}</ng-template>\n</dr-button>\n\n<ng-template #popover let-close=\"closePopover\">\n    <div\n        class=\"dropdown__wrapper\"\n        [ngClass]=\"dropdownClass\"\n        tabindex=\"0\"\n        *ngLet=\"items | search: search : searchBy as filteredItems\">\n        <div class=\"dropdown__search\" *ngIf=\"showSearch\">\n            <dr-input\n                data-analytics=\"filter-dropdown_input-0\"\n                drAutofocus\n                #searchRef\n                [class.with-value]=\"search\"\n                type=\"search\"\n                tabindex=\"0\"\n                placeholder=\"Search\"\n                [clearable]=\"true\"\n                [(ngModel)]=\"search\" />\n        </div>\n\n        <div class=\"dropdown__header\">\n            <div class=\"dropdown__header-title\">Filter by {{ label }}</div>\n            <a *ngIf=\"showSelectAll\" href=\"javascript: void(0)\" (click)=\"onSelectAll()\" class=\"dropdown__header-select-all\">{{\n                isSelectedAll ? 'Select none' : 'Select all'\n            }}</a>\n        </div>\n\n        <dr-dropdown class=\"dr-filter-list\" *ngIf=\"filteredItems.length; else noDataPlaceholder\" tabindex=\"0\">\n            <dr-dropdown-item\n                *ngFor=\"let item of filteredItems; trackBy: trackByFn\"\n                class=\"dr-filter-list__item\"\n                [selected]=\"isSelected(item)\"\n                [disabled]=\"item.disabled\"\n                tabindex=\"0\"\n                #itemRef\n                (keyup.enter)=\"!itemRef.selected && selectedChange.emit(item)\"\n                (click)=\"!itemRef.disabled && onSelectedItemChanged(item, itemRef.selected, close)\">\n                <ng-container dropdownItemContent>\n                    <dr-checkbox\n                        data-analytics=\"filter-dropdown_checkbox-0\"\n                        *ngIf=\"multiple\"\n                        class=\"dr-filter-list__item-checkbox\"\n                        [checkedStatus]=\"itemRef.selected\"\n                        [disabled]=\"item.disabled\" />\n                    <ng-container dropdownItemContent>\n                        <ng-container\n                            [ngTemplateOutlet]=\"dropdownItemTemplate || defaultDropdownItemTemplate\"\n                            [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\n                    </ng-container>\n\n                    <ng-template #defaultDropdownItemTemplate>\n                        <span class=\"text-ellipsis\">\n                            {{ _item(item) }}\n                        </span>\n                    </ng-template>\n                </ng-container>\n            </dr-dropdown-item>\n        </dr-dropdown>\n\n        <ng-template #noDataPlaceholder>\n            <div class=\"dropdown__no-result\" *ngIf=\"noItemsPlaceholder\">\n                {{ noItemsPlaceholder }}\n            </div>\n        </ng-template>\n\n        <div *ngIf=\"multiple\" class=\"dropdown__actions\">\n            <dr-button\n                *ngIf=\"clearable && hasSelection\"\n                theme=\"secondary\"\n                data-analytics=\"filter-dropdown_button-1\"\n                class=\"dropdown__clear\"\n                (click)=\"onClear(close)\">\n                Clear\n            </dr-button>\n            <dr-button data-analytics=\"filter-dropdown_button-0\" (click)=\"onApply(close)\">Apply</dr-button>\n        </div>\n    </div>\n</ng-template>\n", styles: [".filter-value{font-weight:600}.filter-value-all{font-weight:400}.dropdown__wrapper{min-width:250px;padding:8px 0 0}.dropdown__wrapper::ng-deep .dr-dropdown__container{padding:0;max-height:none;overflow:visible}.dropdown__wrapper::ng-deep .dr-dropdown-item.item-disabled{cursor:not-allowed}.dropdown__wrapper .dr-filter-list{overflow:auto;display:block;max-height:180px}.dropdown__wrapper .dr-filter-list__item{margin-bottom:4px}.dropdown__wrapper .dr-filter-list__item::ng-deep .dr-dropdown-item{padding:4px 16px;height:auto}.dropdown__wrapper .dr-filter-list__item::ng-deep .dr-dropdown-item .text-ellipsis{text-overflow:ellipsis;overflow:hidden}.dropdown__wrapper .dr-filter-list__item-checkbox{margin-right:4px;pointer-events:none}.dropdown__wrapper .dr-filter-list__item-checkbox::ng-deep label input+span{margin:0}.dropdown__wrapper .dr-filter-list__item-checkbox::ng-deep label input+span:before{margin:3px}.dropdown__search{padding:4px 8px}.dropdown__header{font-size:12px;line-height:16px;font-weight:400;display:flex;align-items:center;margin:2px 0;padding:4px 16px;white-space:nowrap}.dropdown__header-title{flex-grow:1;overflow:hidden;text-overflow:ellipsis;color:#6d6e6f;text-transform:uppercase}.dropdown__header-select-all{color:#4646ce;margin-left:8px}.dropdown__actions{gap:8px;padding:8px 16px;display:flex;justify-content:flex-end;border-top:1px solid #dbdee3}.dropdown__no-result{padding:4px 16px 16px}\n"] }]
+                    TextOverflowComponent,
+                    DrListOverflowComponent,
+                ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<dr-button\n    theme=\"dropdown\"\n    iconAfter=\"dr-icon-arrow-down\"\n    iconAfterSize=\"18\"\n    [drTooltip]=\"hasSelection && (listOverflowRef.hasOverflowed || selectedArr.length > showManyLimit) && tooltipTemplate\"\n    [drTooltipPosition]=\"overflowTooltipPosition\"\n    [drPopover]=\"popover\"\n    (drPopoverClose)=\"onPopoverClose()\"\n    (click)=\"$event.stopPropagation()\"\n    [isActive]=\"hasSelection\"\n    [disabled]=\"disabled\"\n    [drPopoverPosition]=\"dropdownPosition\">\n    <span class=\"filter-label\">{{ label }}:</span>\n\n    <span drListOverflow #listOverflowRef=\"listOverflow\" class=\"filter-value\">\n        <ng-container *ngIf=\"hasSelection; else noSelection\">\n            <ng-container *ngIf=\"selectedArr.length <= showManyLimit; else manyTemplate\">\n                <ng-container [ngTemplateOutlet]=\"valueTemplate\"></ng-container>\n            </ng-container>\n        </ng-container>\n    </span>\n    <ng-template #manyTemplate><span>Many</span></ng-template>\n    <ng-template #noSelection>\n        <ng-container *ngIf=\"useNoneTemplate && !isSelectedAll; else allTemplate\">\n            <span class=\"filter-value-all\">None</span>\n        </ng-container>\n    </ng-template>\n    <ng-template #allTemplate><span class=\"filter-value-all\">All</span></ng-template>\n    <ng-template #defaultLabelTemplate let-item> {{ _item(item) }}</ng-template>\n</dr-button>\n\n<ng-template #valueTemplate>\n    <span *ngFor=\"let item of selectedArr; let i = index\">\n        <ng-container *ngIf=\"i\">,</ng-container>\n        <ng-container\n            [ngTemplateOutlet]=\"labelItemTemplate || defaultLabelTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: item }\">\n        </ng-container>\n    </span>\n</ng-template>\n\n<ng-template #tooltipTemplate>\n    <dr-tooltip-default>{{ label }}: <ng-container [ngTemplateOutlet]=\"valueTemplate\"></ng-container></dr-tooltip-default>\n</ng-template>\n\n<ng-template #popover let-close=\"closePopover\">\n    <div\n        class=\"dropdown__wrapper\"\n        [ngClass]=\"dropdownClass\"\n        tabindex=\"0\"\n        *ngLet=\"items | search: search : searchBy as filteredItems\">\n        <div class=\"dropdown__search\" *ngIf=\"showSearch\">\n            <dr-input\n                data-analytics=\"filter-dropdown_input-0\"\n                drAutofocus\n                #searchRef\n                [class.with-value]=\"search\"\n                type=\"search\"\n                tabindex=\"0\"\n                placeholder=\"Search\"\n                [clearable]=\"true\"\n                [(ngModel)]=\"search\" />\n        </div>\n\n        <div class=\"dropdown__header\">\n            <div class=\"dropdown__header-title\">Filter by {{ label }}</div>\n            <a *ngIf=\"showSelectAll\" href=\"javascript: void(0)\" (click)=\"onSelectAll()\" class=\"dropdown__header-select-all\">{{\n                isSelectedAll ? 'Select none' : 'Select all'\n            }}</a>\n        </div>\n\n        <dr-dropdown class=\"dr-filter-list\" *ngIf=\"filteredItems.length; else noDataPlaceholder\" tabindex=\"0\">\n            <dr-dropdown-item\n                *ngFor=\"let item of filteredItems; trackBy: trackByFn\"\n                class=\"dr-filter-list__item\"\n                [selected]=\"isSelected(item)\"\n                [disabled]=\"item.disabled\"\n                tabindex=\"0\"\n                #itemRef\n                (keyup.enter)=\"!itemRef.selected && selectedChange.emit(item)\"\n                (click)=\"!itemRef.disabled && onSelectedItemChanged(item, itemRef.selected, close)\">\n                <ng-container dropdownItemContent>\n                    <dr-checkbox\n                        data-analytics=\"filter-dropdown_checkbox-0\"\n                        *ngIf=\"multiple\"\n                        class=\"dr-filter-list__item-checkbox\"\n                        [checkedStatus]=\"itemRef.selected\"\n                        [disabled]=\"item.disabled\" />\n                    <ng-container dropdownItemContent>\n                        <ng-container\n                            [ngTemplateOutlet]=\"dropdownItemTemplate || defaultDropdownItemTemplate\"\n                            [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\n                    </ng-container>\n\n                    <ng-template #defaultDropdownItemTemplate>\n                        <dr-text-overflow>{{ _item(item) }} </dr-text-overflow>\n                    </ng-template>\n                </ng-container>\n            </dr-dropdown-item>\n        </dr-dropdown>\n\n        <ng-template #noDataPlaceholder>\n            <div class=\"dropdown__no-result\" *ngIf=\"noItemsPlaceholder\">\n                {{ noItemsPlaceholder }}\n            </div>\n        </ng-template>\n\n        <div *ngIf=\"multiple\" class=\"dropdown__actions\">\n            <dr-button\n                *ngIf=\"clearable && hasSelection\"\n                theme=\"secondary\"\n                data-analytics=\"filter-dropdown_button-1\"\n                class=\"dropdown__clear\"\n                (click)=\"onClear(close)\">\n                Clear\n            </dr-button>\n            <dr-button data-analytics=\"filter-dropdown_button-0\" (click)=\"onApply(close)\">Apply</dr-button>\n        </div>\n    </div>\n</ng-template>\n", styles: [":host::ng-deep dr-button,:host::ng-deep dr-button>button{max-width:100%}.filter-label{padding-right:.3em}.filter-value{font-weight:600}.filter-value-all{font-weight:400}.dropdown__wrapper{min-width:250px;padding:8px 0 0}.dropdown__wrapper::ng-deep .dr-dropdown__container{padding:0;max-height:none;overflow:visible}.dropdown__wrapper::ng-deep .dr-dropdown-item.item-disabled{cursor:not-allowed}.dropdown__wrapper .dr-filter-list{overflow:auto;display:block;max-height:180px}.dropdown__wrapper .dr-filter-list__item{margin-bottom:4px}.dropdown__wrapper .dr-filter-list__item::ng-deep .dr-dropdown-item{padding:0 16px;height:32px}.dropdown__wrapper .dr-filter-list__item::ng-deep .dr-dropdown-item .text-ellipsis{text-overflow:ellipsis;overflow:hidden}.dropdown__wrapper .dr-filter-list__item-checkbox{margin-right:4px;pointer-events:none}.dropdown__wrapper .dr-filter-list__item-checkbox::ng-deep label input+span{margin:0}.dropdown__wrapper .dr-filter-list__item-checkbox::ng-deep label input+span:before{margin:3px}.dropdown__search{padding:4px 8px}.dropdown__header{font-size:12px;line-height:16px;font-weight:400;display:flex;align-items:center;margin:2px 0;padding:4px 16px;white-space:nowrap}.dropdown__header-title{flex-grow:1;overflow:hidden;text-overflow:ellipsis;color:#6d6e6f;text-transform:uppercase}.dropdown__header-select-all{color:#4646ce;margin-left:8px;text-decoration:none}.dropdown__header-select-all:hover{text-decoration:underline}.dropdown__actions{gap:8px;padding:8px 16px;display:flex;justify-content:flex-end;border-top:1px solid #dbdee3}.dropdown__no-result{padding:4px 16px 16px}\n"] }]
     }], null, { dropdownItemTemplate: [{
             type: ContentChild,
             args: ['dropdownItemTemplate', { read: TemplateRef }]
@@ -16048,6 +16187,8 @@ class FilterDropdownComponent {
             type: Input
         }], dropdownPosition: [{
             type: Input
+        }], overflowTooltipPosition: [{
+            type: Input
         }], bindValue: [{
             type: Input
         }], displayValue: [{
@@ -16066,8 +16207,6 @@ class FilterDropdownComponent {
             type: Input
         }], showManyLimit: [{
             type: Input
-        }], showInLabelLimit: [{
-            type: Input
         }], selected: [{
             type: Input,
             args: [{ required: true }]
@@ -16081,5 +16220,5 @@ class FilterDropdownComponent {
  * Generated bundle index. Do not edit.
  */
 
-export { AnyTagComponent, AutofocusDirective, BadgeStatus, CHAT_MESSAGE_TYPE, CROP_IMAGE_MODES, CalendarView, ChatMessage, ChatRole, CheckboxComponent, ClickOutsideDirective, ClickOutsideModule, CodeEditorHintWrapperComponent, CustomDateAdapter, CustomDateFormat, DEFAULT_LINK_FONT_SIZE, DEFAULT_LINK_FONT_WEIGHT, DIALOG_BUTTON_LABEL, DIALOG_FIELD_TYPE, DIALOG_SIZE, DR_DRAWER_DATA, DR_DRAWER_DEFAULT_OPTIONS, DR_SHINE_ANIMATION_CLASS, DataAnalyticsService, DateFromats, DatePickerPeriodPosition, DateTagComponent, DateTagModule, DateTags, DateTimePickerComponent, DayTagComponent, DefaultToastrComponent, DefaultTreeviewEventParser, DefaultTreeviewI18n, DialogModalWrapperComponent, DialogService, DialogWrapperComponent, DownlineTreeviewEventParser, DrAccordionComponent, DrAccordionItemBodyComponent, DrAccordionItemComponent, DrAccordionItemHeaderComponent, DrAccordionModule, DrAlertComponent, DrAlertModule, DrAlertTheme, DrAvatarComponent, DrAvatarModule, DrAvatarPipe, DrAvatarService, DrBadgeComponent, DrBadgeStatusComponent, DrBadgeStatusModule, DrButtonComponent, DrChatAlertComponent, DrChatComponent, DrChatCustomMessageDirective, DrChatDroppedFilesComponent, DrChatFormComponent, DrChatFormDropdownComponent, DrChatMessageComponent, DrChatMessageFileComponent, DrChatMessageTextComponent, DrChatModule, DrChatSuggestionsComponent, DrChipComponent, DrCodeEditorComponent, DrCodeEditorModule, DrCodemirrorComponent, DrDatePickerComponent, DrDatePickerCustomHeaderComponent, DrDatePickerFormatDirective, DrDatePickerRangeComponent, DrDatePickerWithTimeframeComponent, DrDetailsListComponent, DrDetailsListModule, DrDialogModule, DrDotFlashingComponent, DrDropdownChildDirective, DrDropdownComponent, DrDropdownDirective, DrDropdownItemComponent, DrDropdownItemShowPipe, DrDropdownModule, DrDropdownService, DrErrorComponent, DrErrorModule, DrFiscalMonthCalendarHeaderComponent, DrFiscalMonthCalendarPickerComponent, DrGalleryComponent, DrImageCropperComponent, DrInputComponent, DrInputsModule, DrLayoutBodyComponent, DrLayoutComponent, DrLayoutHeaderComponent, DrLayoutModule, DrLinkComponent, DrModelDebounceChangeDirective, DrPopoverAlignmentDimension, DrPopoverComponent, DrPopoverDirective, DrPopoverModule, DrPopoverRef, DrPopoverService, DrProgressBarComponent, DrScenarioConfigurationComponent, DrScenarioModule, DrScenarioTagConfigurationComponent, DrSelectAddItemComponent, DrSelectComponent, DrSharedUtils, DrShineAnimationDirective, DrShowTimeframePipe, DrSliderComponent, DrSpinnerComponent, DrSpinnerDirective, DrSpinnerModule, DrStepperModule, DrTabComponent, DrTabsComponent, DrTabsModule, DrTagComponent, DrTagModule, DrTagsConstructorComponent, DrTagsConstructorModule, DrToastrModule, DrToastrService, DrToggleButtonComponent, DrToggleComponent, DrTooltipDirective, DrTooltipModule, Drawer, DrawerConfig, DrawerContainer, DrawerModule, DrawerRef, DropdownInstanceService, ElementOverflowDirective, FeedbackSentiment, FilterDropdownComponent, FilterPipe, FiscalMonthAdapter, ForecastTagComponent, ForecastTagService, GMT_OFFSETS, ICodeEditorHintIcon, IMAGE_TYPES, ImgPipe, LOCAL_TIME_ZONE_OFFSET, LetContext, LetDirective, LinkTheme, ListTagComponent, ListTagModule, MonthTagComponent, OrderDownlineTreeviewEventParser, QuarterTagComponent, RadioButtonComponent, RadioGroupComponent, Scenario, ScenarioService, SearchPipe, SeparateTableColumnDirective, SeparateTableComponent, StepWizardDirective, StepperComponent, StepperWizardComponent, TagTypes, TagsConfigSubType, TagsConstructorService, TextOverflowComponent, TimePickerComponent, TimeframeOption, ToastrStatus, ToastrStatusIcon, ToggleButtonMode, TooltipComponent, TooltipDefaultComponent, TooltipInfoComponent, TooltipInfoIconTheme, TooltipInfoWidth, TooltipPosition, TooltipTheme, TrackByPropertyDirective, TreeviewComponent, TreeviewConfig, TreeviewEventParser, TreeviewHelper, TreeviewI18n, TreeviewItem, TreeviewModule, TreeviewPipe, TruncateTextDirective, WeekTagComponent, YearTagComponent, getGMTLabel };
+export { AnyTagComponent, AutofocusDirective, BadgeStatus, CHAT_MESSAGE_TYPE, CROP_IMAGE_MODES, CalendarView, ChatMessage, ChatRole, CheckboxComponent, ClickOutsideDirective, ClickOutsideModule, CodeEditorHintWrapperComponent, CustomDateAdapter, CustomDateFormat, DEFAULT_LINK_FONT_SIZE, DEFAULT_LINK_FONT_WEIGHT, DIALOG_BUTTON_LABEL, DIALOG_FIELD_TYPE, DIALOG_SIZE, DR_DRAWER_DATA, DR_DRAWER_DEFAULT_OPTIONS, DR_SHINE_ANIMATION_CLASS, DataAnalyticsService, DateFromats, DatePickerPeriodPosition, DateTagComponent, DateTagModule, DateTags, DateTimePickerComponent, DayTagComponent, DefaultToastrComponent, DefaultTreeviewEventParser, DefaultTreeviewI18n, DialogModalWrapperComponent, DialogService, DialogWrapperComponent, DownlineTreeviewEventParser, DrAccordionComponent, DrAccordionItemBodyComponent, DrAccordionItemComponent, DrAccordionItemHeaderComponent, DrAccordionModule, DrAlertComponent, DrAlertModule, DrAlertTheme, DrAvatarComponent, DrAvatarModule, DrAvatarPipe, DrAvatarService, DrBadgeComponent, DrBadgeStatusComponent, DrBadgeStatusModule, DrButtonComponent, DrChatAlertComponent, DrChatComponent, DrChatCustomMessageDirective, DrChatDroppedFilesComponent, DrChatFormComponent, DrChatFormDropdownComponent, DrChatMessageComponent, DrChatMessageFileComponent, DrChatMessageTextComponent, DrChatModule, DrChatSuggestionsComponent, DrChipComponent, DrCodeEditorComponent, DrCodeEditorModule, DrCodemirrorComponent, DrDatePickerComponent, DrDatePickerCustomHeaderComponent, DrDatePickerFormatDirective, DrDatePickerRangeComponent, DrDatePickerWithTimeframeComponent, DrDetailsListComponent, DrDetailsListModule, DrDialogModule, DrDotFlashingComponent, DrDropdownChildDirective, DrDropdownComponent, DrDropdownDirective, DrDropdownItemComponent, DrDropdownItemShowPipe, DrDropdownModule, DrDropdownService, DrErrorComponent, DrErrorModule, DrFiscalMonthCalendarHeaderComponent, DrFiscalMonthCalendarPickerComponent, DrGalleryComponent, DrImageCropperComponent, DrInputComponent, DrInputsModule, DrLayoutBodyComponent, DrLayoutComponent, DrLayoutHeaderComponent, DrLayoutModule, DrLinkComponent, DrListOverflowComponent, DrModelDebounceChangeDirective, DrPopoverAlignmentDimension, DrPopoverComponent, DrPopoverDirective, DrPopoverModule, DrPopoverRef, DrPopoverService, DrProgressBarComponent, DrScenarioConfigurationComponent, DrScenarioModule, DrScenarioTagConfigurationComponent, DrSelectAddItemComponent, DrSelectComponent, DrSharedUtils, DrShineAnimationDirective, DrShowTimeframePipe, DrSliderComponent, DrSpinnerComponent, DrSpinnerDirective, DrSpinnerModule, DrStepperModule, DrTabComponent, DrTabsComponent, DrTabsModule, DrTagComponent, DrTagModule, DrTagsConstructorComponent, DrTagsConstructorModule, DrToastrModule, DrToastrService, DrToggleButtonComponent, DrToggleComponent, DrTooltipDirective, DrTooltipModule, Drawer, DrawerConfig, DrawerContainer, DrawerModule, DrawerRef, DropdownInstanceService, ElementOverflowDirective, FeedbackSentiment, FilterDropdownComponent, FilterPipe, FiscalMonthAdapter, ForecastTagComponent, ForecastTagService, GMT_OFFSETS, ICodeEditorHintIcon, IMAGE_TYPES, ImgPipe, LOCAL_TIME_ZONE_OFFSET, LetContext, LetDirective, LinkTheme, ListTagComponent, ListTagModule, MonthTagComponent, OrderDownlineTreeviewEventParser, QuarterTagComponent, RadioButtonComponent, RadioGroupComponent, Scenario, ScenarioService, SearchPipe, SeparateTableColumnDirective, SeparateTableComponent, StepWizardDirective, StepperComponent, StepperWizardComponent, TagTypes, TagsConfigSubType, TagsConstructorService, TextOverflowComponent, TimePickerComponent, TimeframeOption, ToastrStatus, ToastrStatusIcon, ToggleButtonMode, TooltipComponent, TooltipDefaultComponent, TooltipInfoComponent, TooltipInfoIconTheme, TooltipInfoWidth, TooltipTheme, TrackByPropertyDirective, TreeviewComponent, TreeviewConfig, TreeviewEventParser, TreeviewHelper, TreeviewI18n, TreeviewItem, TreeviewModule, TreeviewPipe, TruncateTextDirective, WeekTagComponent, YearTagComponent, getGMTLabel };
 //# sourceMappingURL=datarailsshared-datarailsshared.mjs.map