@datarailsshared/datarailsshared 1.6.206 → 1.6.210

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, Renderer2, numberAttribute } from '@angular/core';
+import { EventEmitter, Component, Output, Input, Injectable, inject, ChangeDetectorRef, DestroyRef, ChangeDetectionStrategy, HostBinding, Injector, EnvironmentInjector, ViewContainerRef, ViewChild, TemplateRef, HostListener, Directive, forwardRef, ContentChild, Pipe, ComponentFactoryResolver, Inject, Optional, ViewEncapsulation, PLATFORM_ID, ContentChildren, NgModule, ElementRef, Host, ViewChildren, InjectionToken, SkipSelf, booleanAttribute, Renderer2, numberAttribute } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule, isPlatformBrowser, DOCUMENT, NgIf, NgTemplateOutlet } from '@angular/common';
 import { MomentDateAdapter, MAT_MOMENT_DATE_ADAPTER_OPTIONS, MatMomentDateModule } from '@angular/material-moment-adapter';
@@ -697,7 +697,7 @@ var TooltipTheme;
     TooltipTheme["DARK"] = "dark";
 })(TooltipTheme || (TooltipTheme = {}));
 
-const _c0$O = ["*"];
+const _c0$P = ["*"];
 class TooltipDefaultComponent {
     constructor() {
         this.theme = TooltipTheme.LIGHT;
@@ -705,7 +705,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" }, standalone: true, features: [i0.ɵɵStandaloneFeature], ngContentSelectors: _c0$O, decls: 2, vars: 1, consts: [[1, "content", 3, "innerHTML"]], template: function TooltipDefaultComponent_Template(rf, ctx) { if (rf & 1) {
+        } }, inputs: { content: "content", theme: "theme" }, standalone: true, features: [i0.ɵɵStandaloneFeature], ngContentSelectors: _c0$P, 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);
@@ -725,36 +725,109 @@ class TooltipDefaultComponent {
             args: ['class']
         }] }); })();
 
+const _c0$O = ["container"];
+class TooltipCustomComponent {
+    constructor() {
+        this.injector = inject(Injector);
+        this.environmentInjector = inject(EnvironmentInjector);
+    }
+    ngOnChanges(changes) {
+        if (changes.content) {
+            this.renderComponent();
+        }
+    }
+    renderComponent() {
+        this.cmpRef?.destroy();
+        this.container.clear();
+        const customInjector = Injector.create({
+            providers: this.content.providers ?? [],
+            parent: this.injector,
+        });
+        this.cmpRef = this.container.createComponent(this.content.component, {
+            injector: customInjector,
+            environmentInjector: this.environmentInjector,
+        });
+        if (this.content.inputs) {
+            Object.entries(this.content.inputs).forEach(([key, value]) => {
+                this.cmpRef.setInput(key, value);
+            });
+            this.cmpRef.changeDetectorRef.detectChanges();
+        }
+    }
+    /** @nocollapse */ static { this.ɵfac = function TooltipCustomComponent_Factory(t) { return new (t || TooltipCustomComponent)(); }; }
+    /** @nocollapse */ static { this.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: TooltipCustomComponent, selectors: [["dr-tooltip-custom"]], viewQuery: function TooltipCustomComponent_Query(rf, ctx) { if (rf & 1) {
+            i0.ɵɵviewQuery(_c0$O, 7, ViewContainerRef);
+        } if (rf & 2) {
+            let _t;
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.container = _t.first);
+        } }, inputs: { content: "content" }, standalone: true, features: [i0.ɵɵNgOnChangesFeature, i0.ɵɵStandaloneFeature], decls: 2, vars: 0, consts: [["container", ""]], template: function TooltipCustomComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementContainer(0, null, 0);
+        } }, dependencies: [CommonModule], encapsulation: 2, changeDetection: 0 }); }
+}
+(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TooltipCustomComponent, [{
+        type: Component,
+        args: [{
+                selector: 'dr-tooltip-custom',
+                template: `<ng-container #container></ng-container>`,
+                standalone: true,
+                imports: [CommonModule],
+                changeDetection: ChangeDetectionStrategy.OnPush,
+            }]
+    }], null, { container: [{
+            type: ViewChild,
+            args: ['container', { read: ViewContainerRef, static: true }]
+        }], content: [{
+            type: Input
+        }] }); })();
+
 function TooltipComponent_div_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "div", 4);
+    i0.ɵɵelement(0, "div", 5);
 } }
 function TooltipComponent_ng_container_2_ng_container_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainer(0);
 } }
 function TooltipComponent_ng_container_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainerStart(0);
-    i0.ɵɵtemplate(1, TooltipComponent_ng_container_2_ng_container_1_Template, 1, 0, "ng-container", 5);
+    i0.ɵɵtemplate(1, TooltipComponent_ng_container_2_ng_container_1_Template, 1, 0, "ng-container", 6);
     i0.ɵɵelementContainerEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵadvance(1);
     i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.content)("ngTemplateOutletContext", ctx_r1.contentContext);
 } }
+function TooltipComponent_ng_template_3_ng_container_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementContainerStart(0);
+    i0.ɵɵelement(1, "dr-tooltip-custom", 7);
+    i0.ɵɵelementContainerEnd();
+} if (rf & 2) {
+    const ctx_r7 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(1);
+    i0.ɵɵproperty("content", ctx_r7.content);
+} }
 function TooltipComponent_ng_template_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "dr-tooltip-default", 6);
+    i0.ɵɵtemplate(0, TooltipComponent_ng_template_3_ng_container_0_Template, 2, 1, "ng-container", 2);
 } if (rf & 2) {
     const ctx_r3 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("content", ctx_r3.content)("theme", ctx_r3.theme);
+    const _r4 = i0.ɵɵreference(6);
+    i0.ɵɵproperty("ngIf", ctx_r3.isCustomTooltip)("ngIfElse", _r4);
+} }
+function TooltipComponent_ng_template_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "dr-tooltip-default", 8);
+} if (rf & 2) {
+    const ctx_r5 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("content", ctx_r5.content)("theme", ctx_r5.theme);
 } }
 const _c0$N = function (a0) { return { "dr-tooltip": a0 }; };
 class TooltipComponent {
     constructor() {
         this.isContentTemplate = false;
+        this.isCustomTooltip = false;
         this.role = 'tooltip';
         this.isMouseOn$ = new BehaviorSubject(false);
     }
     ngOnInit() {
         this.isContentTemplate = this.content instanceof TemplateRef;
+        this.isCustomTooltip = typeof this.content === 'object' && !!this.content?.component;
     }
     setMouseOn() {
         this.isMouseOn$.next(true);
@@ -767,11 +840,12 @@ class TooltipComponent {
             i0.ɵɵlistener("mouseenter", function TooltipComponent_mouseenter_HostBindingHandler() { return ctx.setMouseOn(); })("mouseleave", function TooltipComponent_mouseleave_HostBindingHandler() { return ctx.unsetMouseOn(); });
         } if (rf & 2) {
             i0.ɵɵattribute("role", ctx.role);
-        } }, inputs: { content: "content", contentContext: "contentContext", position: "position", options: "options", class: "class", theme: "theme" }, standalone: true, features: [i0.ɵɵStandaloneFeature], decls: 5, vars: 8, consts: [[3, "ngClass"], ["class", "dr-tooltip-arrow", 4, "ngIf"], [4, "ngIf", "ngIfElse"], ["defaultContent", ""], [1, "dr-tooltip-arrow"], [4, "ngTemplateOutlet", "ngTemplateOutletContext"], [3, "content", "theme"]], template: function TooltipComponent_Template(rf, ctx) { if (rf & 1) {
+        } }, inputs: { content: "content", contentContext: "contentContext", position: "position", options: "options", class: "class", theme: "theme" }, standalone: true, features: [i0.ɵɵStandaloneFeature], decls: 7, vars: 8, consts: [[3, "ngClass"], ["class", "dr-tooltip-arrow", 4, "ngIf"], [4, "ngIf", "ngIfElse"], ["checkCustomTooltip", ""], ["defaultContent", ""], [1, "dr-tooltip-arrow"], [4, "ngTemplateOutlet", "ngTemplateOutletContext"], [3, "content"], [3, "content", "theme"]], template: function TooltipComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 0);
             i0.ɵɵtemplate(1, TooltipComponent_div_1_Template, 1, 0, "div", 1);
             i0.ɵɵtemplate(2, TooltipComponent_ng_container_2_Template, 2, 2, "ng-container", 2);
             i0.ɵɵtemplate(3, TooltipComponent_ng_template_3_Template, 1, 2, "ng-template", null, 3, i0.ɵɵtemplateRefExtractor);
+            i0.ɵɵtemplate(5, TooltipComponent_ng_template_5_Template, 1, 2, "ng-template", null, 4, i0.ɵɵtemplateRefExtractor);
             i0.ɵɵelementEnd();
         } if (rf & 2) {
             const _r2 = i0.ɵɵreference(4);
@@ -781,11 +855,11 @@ class TooltipComponent {
             i0.ɵɵproperty("ngIf", !(ctx.options == null ? null : ctx.options.withoutArrow));
             i0.ɵɵadvance(1);
             i0.ɵɵproperty("ngIf", ctx.isContentTemplate)("ngIfElse", _r2);
-        } }, dependencies: [CommonModule, i1.NgClass, i1.NgIf, i1.NgTemplateOutlet, TooltipDefaultComponent], styles: ["[_nghost-%COMP%]{display:block;font-family:Poppins,sans-serif}.top[_ngcontent-%COMP%], .top-left[_ngcontent-%COMP%], .top-right.dr-tooltip[_ngcontent-%COMP%]{transform:translateY(-8px)}.bottom[_ngcontent-%COMP%], .bottom-left[_ngcontent-%COMP%], .bottom-right.dr-tooltip[_ngcontent-%COMP%]{transform:translateY(8px)}.left[_ngcontent-%COMP%], .left-top[_ngcontent-%COMP%], .left-bottom.dr-tooltip[_ngcontent-%COMP%]{transform:translate(-8px)}.right[_ngcontent-%COMP%], .right-top[_ngcontent-%COMP%], .right-bottom.dr-tooltip[_ngcontent-%COMP%]{transform:translate(8px)}.dr-tooltip[_ngcontent-%COMP%]{background:#fff;border:1px solid #cfd7dd;box-sizing:border-box;border-radius:8px;font-size:12px;color:#545a6b;max-width:80vw!important;box-shadow:0 2px 4px #9199b440}.dr-tooltip-arrow[_ngcontent-%COMP%]{border-width:8px}.dr-tooltip-arrow[_ngcontent-%COMP%], .dr-tooltip-arrow[_ngcontent-%COMP%]:after{position:absolute;display:block;width:0;height:0;border-color:transparent;border-style:solid}.dr-tooltip-arrow[_ngcontent-%COMP%]:after{content:\"\";border-width:8px}.top[_ngcontent-%COMP%]   .dr-tooltip-arrow[_ngcontent-%COMP%], .top-left[_ngcontent-%COMP%]   .dr-tooltip-arrow[_ngcontent-%COMP%], .top-right[_ngcontent-%COMP%]   .dr-tooltip-arrow[_ngcontent-%COMP%]{bottom:-16px;border-top-color:#cfd7dd!important}.top[_ngcontent-%COMP%]   .dr-tooltip-arrow[_ngcontent-%COMP%]:after, .top-left[_ngcontent-%COMP%]   .dr-tooltip-arrow[_ngcontent-%COMP%]:after, .top-right[_ngcontent-%COMP%]   .dr-tooltip-arrow[_ngcontent-%COMP%]:after{bottom:-6px;left:-8px;border-top-color:#fff}.bottom[_ngcontent-%COMP%]   .dr-tooltip-arrow[_ngcontent-%COMP%], .bottom-left[_ngcontent-%COMP%]   .dr-tooltip-arrow[_ngcontent-%COMP%], .bottom-right[_ngcontent-%COMP%]   .dr-tooltip-arrow[_ngcontent-%COMP%]{top:-7px;border-top:none;border-bottom-color:#cfd7dd!important}.bottom[_ngcontent-%COMP%]   .dr-tooltip-arrow[_ngcontent-%COMP%]:after, .bottom-left[_ngcontent-%COMP%]   .dr-tooltip-arrow[_ngcontent-%COMP%]:after, .bottom-right[_ngcontent-%COMP%]   .dr-tooltip-arrow[_ngcontent-%COMP%]:after{border-top:none;top:1px;left:-8px;border-bottom-color:#fff}.left[_ngcontent-%COMP%]   .dr-tooltip-arrow[_ngcontent-%COMP%], .left-top[_ngcontent-%COMP%]   .dr-tooltip-arrow[_ngcontent-%COMP%], .left-bottom[_ngcontent-%COMP%]   .dr-tooltip-arrow[_ngcontent-%COMP%]{right:-16px;border-left-color:#cfd7dd!important}.left[_ngcontent-%COMP%]   .dr-tooltip-arrow[_ngcontent-%COMP%]:after, .left-top[_ngcontent-%COMP%]   .dr-tooltip-arrow[_ngcontent-%COMP%]:after, .left-bottom[_ngcontent-%COMP%]   .dr-tooltip-arrow[_ngcontent-%COMP%]:after{bottom:-8px;left:-9px;border-left-color:#fff}.right[_ngcontent-%COMP%]   .dr-tooltip-arrow[_ngcontent-%COMP%], .right-top[_ngcontent-%COMP%]   .dr-tooltip-arrow[_ngcontent-%COMP%], .right-bottom[_ngcontent-%COMP%]   .dr-tooltip-arrow[_ngcontent-%COMP%]{left:-16px;border-right-color:#cfd7dd!important}.right[_ngcontent-%COMP%]   .dr-tooltip-arrow[_ngcontent-%COMP%]:after, .right-top[_ngcontent-%COMP%]   .dr-tooltip-arrow[_ngcontent-%COMP%]:after, .right-bottom[_ngcontent-%COMP%]   .dr-tooltip-arrow[_ngcontent-%COMP%]:after{bottom:-8px;left:-7px;border-right-color:#fff}.top[_ngcontent-%COMP%]   .dr-tooltip-arrow[_ngcontent-%COMP%], .bottom[_ngcontent-%COMP%]   .dr-tooltip-arrow[_ngcontent-%COMP%]{left:calc(50% - 8px)}.bottom-left[_ngcontent-%COMP%]   .dr-tooltip-arrow[_ngcontent-%COMP%], .top-left[_ngcontent-%COMP%]   .dr-tooltip-arrow[_ngcontent-%COMP%]{left:8px}.bottom-right[_ngcontent-%COMP%]   .dr-tooltip-arrow[_ngcontent-%COMP%], .top-right[_ngcontent-%COMP%]   .dr-tooltip-arrow[_ngcontent-%COMP%]{right:8px}.left[_ngcontent-%COMP%]   .dr-tooltip-arrow[_ngcontent-%COMP%], .right[_ngcontent-%COMP%]   .dr-tooltip-arrow[_ngcontent-%COMP%]{top:calc(50% - 8px)}.left-top[_ngcontent-%COMP%]   .dr-tooltip-arrow[_ngcontent-%COMP%], .dr-tooltip-arrow[_ngcontent-%COMP%]   .right-top[_ngcontent-%COMP%]{top:8px}.right-bottom[_ngcontent-%COMP%]   .dr-tooltip-arrow[_ngcontent-%COMP%], .left-bottom[_ngcontent-%COMP%]   .dr-tooltip-arrow[_ngcontent-%COMP%]{bottom:8px}.dr-tooltip.dark[_ngcontent-%COMP%]{background:#0c142bcc;border:none;border-radius:8px;color:#fff}.dr-tooltip.dark.top[_ngcontent-%COMP%]   .dr-tooltip-arrow[_ngcontent-%COMP%], .dr-tooltip.dark.top-left[_ngcontent-%COMP%]   .dr-tooltip-arrow[_ngcontent-%COMP%], .dr-tooltip.dark.top-right[_ngcontent-%COMP%]   .dr-tooltip-arrow[_ngcontent-%COMP%]{border-top-color:#0c142bcc!important}.dr-tooltip.dark.top[_ngcontent-%COMP%]   .dr-tooltip-arrow[_ngcontent-%COMP%]:after, .dr-tooltip.dark.top-left[_ngcontent-%COMP%]   .dr-tooltip-arrow[_ngcontent-%COMP%]:after, .dr-tooltip.dark.top-right[_ngcontent-%COMP%]   .dr-tooltip-arrow[_ngcontent-%COMP%]:after{border-top-color:transparent}.dr-tooltip.dark.bottom[_ngcontent-%COMP%]   .dr-tooltip-arrow[_ngcontent-%COMP%], .dr-tooltip.dark.bottom-left[_ngcontent-%COMP%]   .dr-tooltip-arrow[_ngcontent-%COMP%], .dr-tooltip.dark.bottom-right[_ngcontent-%COMP%]   .dr-tooltip-arrow[_ngcontent-%COMP%]{border-bottom-color:#0c142bcc!important}.dr-tooltip.dark.bottom[_ngcontent-%COMP%]   .dr-tooltip-arrow[_ngcontent-%COMP%]:after, .dr-tooltip.dark.bottom-left[_ngcontent-%COMP%]   .dr-tooltip-arrow[_ngcontent-%COMP%]:after, .dr-tooltip.dark.bottom-right[_ngcontent-%COMP%]   .dr-tooltip-arrow[_ngcontent-%COMP%]:after{border-bottom-color:transparent}.dr-tooltip.dark.left[_ngcontent-%COMP%]   .dr-tooltip-arrow[_ngcontent-%COMP%], .dr-tooltip.dark.left-top[_ngcontent-%COMP%]   .dr-tooltip-arrow[_ngcontent-%COMP%], .dr-tooltip.dark.left-bottom[_ngcontent-%COMP%]   .dr-tooltip-arrow[_ngcontent-%COMP%]{border-left-color:#0c142bcc!important}.dr-tooltip.dark.left[_ngcontent-%COMP%]   .dr-tooltip-arrow[_ngcontent-%COMP%]:after, .dr-tooltip.dark.left-top[_ngcontent-%COMP%]   .dr-tooltip-arrow[_ngcontent-%COMP%]:after, .dr-tooltip.dark.left-bottom[_ngcontent-%COMP%]   .dr-tooltip-arrow[_ngcontent-%COMP%]:after{border-left-color:transparent}.dr-tooltip.dark.right[_ngcontent-%COMP%]   .dr-tooltip-arrow[_ngcontent-%COMP%], .dr-tooltip.dark.right-top[_ngcontent-%COMP%]   .dr-tooltip-arrow[_ngcontent-%COMP%], .dr-tooltip.dark.right-bottom[_ngcontent-%COMP%]   .dr-tooltip-arrow[_ngcontent-%COMP%]{border-right-color:#0c142bcc!important}.dr-tooltip.dark.right[_ngcontent-%COMP%]   .dr-tooltip-arrow[_ngcontent-%COMP%]:after, .dr-tooltip.dark.right-top[_ngcontent-%COMP%]   .dr-tooltip-arrow[_ngcontent-%COMP%]:after, .dr-tooltip.dark.right-bottom[_ngcontent-%COMP%]   .dr-tooltip-arrow[_ngcontent-%COMP%]:after{border-right-color:transparent}"], data: { animation: [trigger('tooltip', POPUP_ANIMATION)] } }); }
+        } }, dependencies: [CommonModule, i1.NgClass, i1.NgIf, i1.NgTemplateOutlet, TooltipDefaultComponent, TooltipCustomComponent], styles: ["[_nghost-%COMP%]{display:block;font-family:Poppins,sans-serif}.top[_ngcontent-%COMP%], .top-left[_ngcontent-%COMP%], .top-right.dr-tooltip[_ngcontent-%COMP%]{transform:translateY(-8px)}.bottom[_ngcontent-%COMP%], .bottom-left[_ngcontent-%COMP%], .bottom-right.dr-tooltip[_ngcontent-%COMP%]{transform:translateY(8px)}.left[_ngcontent-%COMP%], .left-top[_ngcontent-%COMP%], .left-bottom.dr-tooltip[_ngcontent-%COMP%]{transform:translate(-8px)}.right[_ngcontent-%COMP%], .right-top[_ngcontent-%COMP%], .right-bottom.dr-tooltip[_ngcontent-%COMP%]{transform:translate(8px)}.dr-tooltip[_ngcontent-%COMP%]{background:#fff;border:1px solid #cfd7dd;box-sizing:border-box;border-radius:8px;font-size:12px;color:#545a6b;max-width:80vw!important;box-shadow:0 2px 4px #9199b440}.dr-tooltip-arrow[_ngcontent-%COMP%]{border-width:8px}.dr-tooltip-arrow[_ngcontent-%COMP%], .dr-tooltip-arrow[_ngcontent-%COMP%]:after{position:absolute;display:block;width:0;height:0;border-color:transparent;border-style:solid}.dr-tooltip-arrow[_ngcontent-%COMP%]:after{content:\"\";border-width:8px}.top[_ngcontent-%COMP%]   .dr-tooltip-arrow[_ngcontent-%COMP%], .top-left[_ngcontent-%COMP%]   .dr-tooltip-arrow[_ngcontent-%COMP%], .top-right[_ngcontent-%COMP%]   .dr-tooltip-arrow[_ngcontent-%COMP%]{bottom:-16px;border-top-color:#cfd7dd!important}.top[_ngcontent-%COMP%]   .dr-tooltip-arrow[_ngcontent-%COMP%]:after, .top-left[_ngcontent-%COMP%]   .dr-tooltip-arrow[_ngcontent-%COMP%]:after, .top-right[_ngcontent-%COMP%]   .dr-tooltip-arrow[_ngcontent-%COMP%]:after{bottom:-6px;left:-8px;border-top-color:#fff}.bottom[_ngcontent-%COMP%]   .dr-tooltip-arrow[_ngcontent-%COMP%], .bottom-left[_ngcontent-%COMP%]   .dr-tooltip-arrow[_ngcontent-%COMP%], .bottom-right[_ngcontent-%COMP%]   .dr-tooltip-arrow[_ngcontent-%COMP%]{top:-7px;border-top:none;border-bottom-color:#cfd7dd!important}.bottom[_ngcontent-%COMP%]   .dr-tooltip-arrow[_ngcontent-%COMP%]:after, .bottom-left[_ngcontent-%COMP%]   .dr-tooltip-arrow[_ngcontent-%COMP%]:after, .bottom-right[_ngcontent-%COMP%]   .dr-tooltip-arrow[_ngcontent-%COMP%]:after{border-top:none;top:1px;left:-8px;border-bottom-color:#fff}.left[_ngcontent-%COMP%]   .dr-tooltip-arrow[_ngcontent-%COMP%], .left-top[_ngcontent-%COMP%]   .dr-tooltip-arrow[_ngcontent-%COMP%], .left-bottom[_ngcontent-%COMP%]   .dr-tooltip-arrow[_ngcontent-%COMP%]{right:-16px;border-left-color:#cfd7dd!important}.left[_ngcontent-%COMP%]   .dr-tooltip-arrow[_ngcontent-%COMP%]:after, .left-top[_ngcontent-%COMP%]   .dr-tooltip-arrow[_ngcontent-%COMP%]:after, .left-bottom[_ngcontent-%COMP%]   .dr-tooltip-arrow[_ngcontent-%COMP%]:after{bottom:-8px;left:-9px;border-left-color:#fff}.right[_ngcontent-%COMP%]   .dr-tooltip-arrow[_ngcontent-%COMP%], .right-top[_ngcontent-%COMP%]   .dr-tooltip-arrow[_ngcontent-%COMP%], .right-bottom[_ngcontent-%COMP%]   .dr-tooltip-arrow[_ngcontent-%COMP%]{left:-16px;border-right-color:#cfd7dd!important}.right[_ngcontent-%COMP%]   .dr-tooltip-arrow[_ngcontent-%COMP%]:after, .right-top[_ngcontent-%COMP%]   .dr-tooltip-arrow[_ngcontent-%COMP%]:after, .right-bottom[_ngcontent-%COMP%]   .dr-tooltip-arrow[_ngcontent-%COMP%]:after{bottom:-8px;left:-7px;border-right-color:#fff}.top[_ngcontent-%COMP%]   .dr-tooltip-arrow[_ngcontent-%COMP%], .bottom[_ngcontent-%COMP%]   .dr-tooltip-arrow[_ngcontent-%COMP%]{left:calc(50% - 8px)}.bottom-left[_ngcontent-%COMP%]   .dr-tooltip-arrow[_ngcontent-%COMP%], .top-left[_ngcontent-%COMP%]   .dr-tooltip-arrow[_ngcontent-%COMP%]{left:8px}.bottom-right[_ngcontent-%COMP%]   .dr-tooltip-arrow[_ngcontent-%COMP%], .top-right[_ngcontent-%COMP%]   .dr-tooltip-arrow[_ngcontent-%COMP%]{right:8px}.left[_ngcontent-%COMP%]   .dr-tooltip-arrow[_ngcontent-%COMP%], .right[_ngcontent-%COMP%]   .dr-tooltip-arrow[_ngcontent-%COMP%]{top:calc(50% - 8px)}.left-top[_ngcontent-%COMP%]   .dr-tooltip-arrow[_ngcontent-%COMP%], .right-top[_ngcontent-%COMP%]   .dr-tooltip-arrow[_ngcontent-%COMP%]{top:8px}.right-bottom[_ngcontent-%COMP%]   .dr-tooltip-arrow[_ngcontent-%COMP%], .left-bottom[_ngcontent-%COMP%]   .dr-tooltip-arrow[_ngcontent-%COMP%]{bottom:8px}.dr-tooltip.dark[_ngcontent-%COMP%]{background:#0c142bcc;border:none;border-radius:8px;color:#fff}.dr-tooltip.dark.top[_ngcontent-%COMP%]   .dr-tooltip-arrow[_ngcontent-%COMP%], .dr-tooltip.dark.top-left[_ngcontent-%COMP%]   .dr-tooltip-arrow[_ngcontent-%COMP%], .dr-tooltip.dark.top-right[_ngcontent-%COMP%]   .dr-tooltip-arrow[_ngcontent-%COMP%]{border-top-color:#0c142bcc!important}.dr-tooltip.dark.top[_ngcontent-%COMP%]   .dr-tooltip-arrow[_ngcontent-%COMP%]:after, .dr-tooltip.dark.top-left[_ngcontent-%COMP%]   .dr-tooltip-arrow[_ngcontent-%COMP%]:after, .dr-tooltip.dark.top-right[_ngcontent-%COMP%]   .dr-tooltip-arrow[_ngcontent-%COMP%]:after{border-top-color:transparent}.dr-tooltip.dark.bottom[_ngcontent-%COMP%]   .dr-tooltip-arrow[_ngcontent-%COMP%], .dr-tooltip.dark.bottom-left[_ngcontent-%COMP%]   .dr-tooltip-arrow[_ngcontent-%COMP%], .dr-tooltip.dark.bottom-right[_ngcontent-%COMP%]   .dr-tooltip-arrow[_ngcontent-%COMP%]{border-bottom-color:#0c142bcc!important}.dr-tooltip.dark.bottom[_ngcontent-%COMP%]   .dr-tooltip-arrow[_ngcontent-%COMP%]:after, .dr-tooltip.dark.bottom-left[_ngcontent-%COMP%]   .dr-tooltip-arrow[_ngcontent-%COMP%]:after, .dr-tooltip.dark.bottom-right[_ngcontent-%COMP%]   .dr-tooltip-arrow[_ngcontent-%COMP%]:after{border-bottom-color:transparent}.dr-tooltip.dark.left[_ngcontent-%COMP%]   .dr-tooltip-arrow[_ngcontent-%COMP%], .dr-tooltip.dark.left-top[_ngcontent-%COMP%]   .dr-tooltip-arrow[_ngcontent-%COMP%], .dr-tooltip.dark.left-bottom[_ngcontent-%COMP%]   .dr-tooltip-arrow[_ngcontent-%COMP%]{border-left-color:#0c142bcc!important}.dr-tooltip.dark.left[_ngcontent-%COMP%]   .dr-tooltip-arrow[_ngcontent-%COMP%]:after, .dr-tooltip.dark.left-top[_ngcontent-%COMP%]   .dr-tooltip-arrow[_ngcontent-%COMP%]:after, .dr-tooltip.dark.left-bottom[_ngcontent-%COMP%]   .dr-tooltip-arrow[_ngcontent-%COMP%]:after{border-left-color:transparent}.dr-tooltip.dark.right[_ngcontent-%COMP%]   .dr-tooltip-arrow[_ngcontent-%COMP%], .dr-tooltip.dark.right-top[_ngcontent-%COMP%]   .dr-tooltip-arrow[_ngcontent-%COMP%], .dr-tooltip.dark.right-bottom[_ngcontent-%COMP%]   .dr-tooltip-arrow[_ngcontent-%COMP%]{border-right-color:#0c142bcc!important}.dr-tooltip.dark.right[_ngcontent-%COMP%]   .dr-tooltip-arrow[_ngcontent-%COMP%]:after, .dr-tooltip.dark.right-top[_ngcontent-%COMP%]   .dr-tooltip-arrow[_ngcontent-%COMP%]:after, .dr-tooltip.dark.right-bottom[_ngcontent-%COMP%]   .dr-tooltip-arrow[_ngcontent-%COMP%]:after{border-right-color:transparent}"], data: { animation: [trigger('tooltip', POPUP_ANIMATION)] } }); }
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TooltipComponent, [{
         type: Component,
-        args: [{ selector: 'dr-tooltip', animations: [trigger('tooltip', POPUP_ANIMATION)], standalone: true, imports: [CommonModule, TooltipDefaultComponent], template: "<div [class]=\"position + ' ' + class + ' ' + theme\" [ngClass]=\"{ 'dr-tooltip': !options?.withoutContainerStyles }\">\n    <div *ngIf=\"!options?.withoutArrow\" class=\"dr-tooltip-arrow\"></div>\n    <ng-container *ngIf=\"isContentTemplate; else defaultContent\">\n        <ng-container *ngTemplateOutlet=\"content; context: contentContext\"></ng-container>\n    </ng-container>\n    <ng-template #defaultContent>\n        <dr-tooltip-default [content]=\"content\" [theme]=\"theme\"></dr-tooltip-default>\n    </ng-template>\n</div>\n", styles: [":host{display:block;font-family:Poppins,sans-serif}.top,.top-left,.top-right.dr-tooltip{transform:translateY(-8px)}.bottom,.bottom-left,.bottom-right.dr-tooltip{transform:translateY(8px)}.left,.left-top,.left-bottom.dr-tooltip{transform:translate(-8px)}.right,.right-top,.right-bottom.dr-tooltip{transform:translate(8px)}.dr-tooltip{background:#fff;border:1px solid #cfd7dd;box-sizing:border-box;border-radius:8px;font-size:12px;color:#545a6b;max-width:80vw!important;box-shadow:0 2px 4px #9199b440}.dr-tooltip-arrow{border-width:8px}.dr-tooltip-arrow,.dr-tooltip-arrow:after{position:absolute;display:block;width:0;height:0;border-color:transparent;border-style:solid}.dr-tooltip-arrow:after{content:\"\";border-width:8px}.top .dr-tooltip-arrow,.top-left .dr-tooltip-arrow,.top-right .dr-tooltip-arrow{bottom:-16px;border-top-color:#cfd7dd!important}.top .dr-tooltip-arrow:after,.top-left .dr-tooltip-arrow:after,.top-right .dr-tooltip-arrow:after{bottom:-6px;left:-8px;border-top-color:#fff}.bottom .dr-tooltip-arrow,.bottom-left .dr-tooltip-arrow,.bottom-right .dr-tooltip-arrow{top:-7px;border-top:none;border-bottom-color:#cfd7dd!important}.bottom .dr-tooltip-arrow:after,.bottom-left .dr-tooltip-arrow:after,.bottom-right .dr-tooltip-arrow:after{border-top:none;top:1px;left:-8px;border-bottom-color:#fff}.left .dr-tooltip-arrow,.left-top .dr-tooltip-arrow,.left-bottom .dr-tooltip-arrow{right:-16px;border-left-color:#cfd7dd!important}.left .dr-tooltip-arrow:after,.left-top .dr-tooltip-arrow:after,.left-bottom .dr-tooltip-arrow:after{bottom:-8px;left:-9px;border-left-color:#fff}.right .dr-tooltip-arrow,.right-top .dr-tooltip-arrow,.right-bottom .dr-tooltip-arrow{left:-16px;border-right-color:#cfd7dd!important}.right .dr-tooltip-arrow:after,.right-top .dr-tooltip-arrow:after,.right-bottom .dr-tooltip-arrow:after{bottom:-8px;left:-7px;border-right-color:#fff}.top .dr-tooltip-arrow,.bottom .dr-tooltip-arrow{left:calc(50% - 8px)}.bottom-left .dr-tooltip-arrow,.top-left .dr-tooltip-arrow{left:8px}.bottom-right .dr-tooltip-arrow,.top-right .dr-tooltip-arrow{right:8px}.left .dr-tooltip-arrow,.right .dr-tooltip-arrow{top:calc(50% - 8px)}.left-top .dr-tooltip-arrow,.dr-tooltip-arrow .right-top{top:8px}.right-bottom .dr-tooltip-arrow,.left-bottom .dr-tooltip-arrow{bottom:8px}.dr-tooltip.dark{background:#0c142bcc;border:none;border-radius:8px;color:#fff}.dr-tooltip.dark.top .dr-tooltip-arrow,.dr-tooltip.dark.top-left .dr-tooltip-arrow,.dr-tooltip.dark.top-right .dr-tooltip-arrow{border-top-color:#0c142bcc!important}.dr-tooltip.dark.top .dr-tooltip-arrow:after,.dr-tooltip.dark.top-left .dr-tooltip-arrow:after,.dr-tooltip.dark.top-right .dr-tooltip-arrow:after{border-top-color:transparent}.dr-tooltip.dark.bottom .dr-tooltip-arrow,.dr-tooltip.dark.bottom-left .dr-tooltip-arrow,.dr-tooltip.dark.bottom-right .dr-tooltip-arrow{border-bottom-color:#0c142bcc!important}.dr-tooltip.dark.bottom .dr-tooltip-arrow:after,.dr-tooltip.dark.bottom-left .dr-tooltip-arrow:after,.dr-tooltip.dark.bottom-right .dr-tooltip-arrow:after{border-bottom-color:transparent}.dr-tooltip.dark.left .dr-tooltip-arrow,.dr-tooltip.dark.left-top .dr-tooltip-arrow,.dr-tooltip.dark.left-bottom .dr-tooltip-arrow{border-left-color:#0c142bcc!important}.dr-tooltip.dark.left .dr-tooltip-arrow:after,.dr-tooltip.dark.left-top .dr-tooltip-arrow:after,.dr-tooltip.dark.left-bottom .dr-tooltip-arrow:after{border-left-color:transparent}.dr-tooltip.dark.right .dr-tooltip-arrow,.dr-tooltip.dark.right-top .dr-tooltip-arrow,.dr-tooltip.dark.right-bottom .dr-tooltip-arrow{border-right-color:#0c142bcc!important}.dr-tooltip.dark.right .dr-tooltip-arrow:after,.dr-tooltip.dark.right-top .dr-tooltip-arrow:after,.dr-tooltip.dark.right-bottom .dr-tooltip-arrow:after{border-right-color:transparent}\n"] }]
+        args: [{ selector: 'dr-tooltip', animations: [trigger('tooltip', POPUP_ANIMATION)], standalone: true, imports: [CommonModule, TooltipDefaultComponent, TooltipCustomComponent], template: "<div [class]=\"position + ' ' + class + ' ' + theme\" [ngClass]=\"{ 'dr-tooltip': !options?.withoutContainerStyles }\">\n    <div *ngIf=\"!options?.withoutArrow\" class=\"dr-tooltip-arrow\"></div>\n\n    <ng-container *ngIf=\"isContentTemplate; else checkCustomTooltip\">\n        <ng-container *ngTemplateOutlet=\"content; context: contentContext\"></ng-container>\n    </ng-container>\n\n    <ng-template #checkCustomTooltip>\n        <ng-container *ngIf=\"isCustomTooltip; else defaultContent\">\n            <dr-tooltip-custom [content]=\"content\"></dr-tooltip-custom>\n        </ng-container>\n    </ng-template>\n\n    <ng-template #defaultContent>\n        <dr-tooltip-default [content]=\"content\" [theme]=\"theme\"></dr-tooltip-default>\n    </ng-template>\n</div>\n", styles: [":host{display:block;font-family:Poppins,sans-serif}.top,.top-left,.top-right.dr-tooltip{transform:translateY(-8px)}.bottom,.bottom-left,.bottom-right.dr-tooltip{transform:translateY(8px)}.left,.left-top,.left-bottom.dr-tooltip{transform:translate(-8px)}.right,.right-top,.right-bottom.dr-tooltip{transform:translate(8px)}.dr-tooltip{background:#fff;border:1px solid #cfd7dd;box-sizing:border-box;border-radius:8px;font-size:12px;color:#545a6b;max-width:80vw!important;box-shadow:0 2px 4px #9199b440}.dr-tooltip-arrow{border-width:8px}.dr-tooltip-arrow,.dr-tooltip-arrow:after{position:absolute;display:block;width:0;height:0;border-color:transparent;border-style:solid}.dr-tooltip-arrow:after{content:\"\";border-width:8px}.top .dr-tooltip-arrow,.top-left .dr-tooltip-arrow,.top-right .dr-tooltip-arrow{bottom:-16px;border-top-color:#cfd7dd!important}.top .dr-tooltip-arrow:after,.top-left .dr-tooltip-arrow:after,.top-right .dr-tooltip-arrow:after{bottom:-6px;left:-8px;border-top-color:#fff}.bottom .dr-tooltip-arrow,.bottom-left .dr-tooltip-arrow,.bottom-right .dr-tooltip-arrow{top:-7px;border-top:none;border-bottom-color:#cfd7dd!important}.bottom .dr-tooltip-arrow:after,.bottom-left .dr-tooltip-arrow:after,.bottom-right .dr-tooltip-arrow:after{border-top:none;top:1px;left:-8px;border-bottom-color:#fff}.left .dr-tooltip-arrow,.left-top .dr-tooltip-arrow,.left-bottom .dr-tooltip-arrow{right:-16px;border-left-color:#cfd7dd!important}.left .dr-tooltip-arrow:after,.left-top .dr-tooltip-arrow:after,.left-bottom .dr-tooltip-arrow:after{bottom:-8px;left:-9px;border-left-color:#fff}.right .dr-tooltip-arrow,.right-top .dr-tooltip-arrow,.right-bottom .dr-tooltip-arrow{left:-16px;border-right-color:#cfd7dd!important}.right .dr-tooltip-arrow:after,.right-top .dr-tooltip-arrow:after,.right-bottom .dr-tooltip-arrow:after{bottom:-8px;left:-7px;border-right-color:#fff}.top .dr-tooltip-arrow,.bottom .dr-tooltip-arrow{left:calc(50% - 8px)}.bottom-left .dr-tooltip-arrow,.top-left .dr-tooltip-arrow{left:8px}.bottom-right .dr-tooltip-arrow,.top-right .dr-tooltip-arrow{right:8px}.left .dr-tooltip-arrow,.right .dr-tooltip-arrow{top:calc(50% - 8px)}.left-top .dr-tooltip-arrow,.right-top .dr-tooltip-arrow{top:8px}.right-bottom .dr-tooltip-arrow,.left-bottom .dr-tooltip-arrow{bottom:8px}.dr-tooltip.dark{background:#0c142bcc;border:none;border-radius:8px;color:#fff}.dr-tooltip.dark.top .dr-tooltip-arrow,.dr-tooltip.dark.top-left .dr-tooltip-arrow,.dr-tooltip.dark.top-right .dr-tooltip-arrow{border-top-color:#0c142bcc!important}.dr-tooltip.dark.top .dr-tooltip-arrow:after,.dr-tooltip.dark.top-left .dr-tooltip-arrow:after,.dr-tooltip.dark.top-right .dr-tooltip-arrow:after{border-top-color:transparent}.dr-tooltip.dark.bottom .dr-tooltip-arrow,.dr-tooltip.dark.bottom-left .dr-tooltip-arrow,.dr-tooltip.dark.bottom-right .dr-tooltip-arrow{border-bottom-color:#0c142bcc!important}.dr-tooltip.dark.bottom .dr-tooltip-arrow:after,.dr-tooltip.dark.bottom-left .dr-tooltip-arrow:after,.dr-tooltip.dark.bottom-right .dr-tooltip-arrow:after{border-bottom-color:transparent}.dr-tooltip.dark.left .dr-tooltip-arrow,.dr-tooltip.dark.left-top .dr-tooltip-arrow,.dr-tooltip.dark.left-bottom .dr-tooltip-arrow{border-left-color:#0c142bcc!important}.dr-tooltip.dark.left .dr-tooltip-arrow:after,.dr-tooltip.dark.left-top .dr-tooltip-arrow:after,.dr-tooltip.dark.left-bottom .dr-tooltip-arrow:after{border-left-color:transparent}.dr-tooltip.dark.right .dr-tooltip-arrow,.dr-tooltip.dark.right-top .dr-tooltip-arrow,.dr-tooltip.dark.right-bottom .dr-tooltip-arrow{border-right-color:#0c142bcc!important}.dr-tooltip.dark.right .dr-tooltip-arrow:after,.dr-tooltip.dark.right-top .dr-tooltip-arrow:after,.dr-tooltip.dark.right-bottom .dr-tooltip-arrow:after{border-right-color:transparent}\n"] }]
     }], null, { content: [{
             type: Input
         }], contentContext: [{
@@ -1169,7 +1243,7 @@ function DrInputComponent_button_7_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtextInterpolate1(" ", ctx_r5._buttonOptions.text, "\n");
 } }
 const _c3$7 = [[["", "prefixIcon", ""]], [["", "suffixIcon", ""]]];
-const _c4$5 = ["[prefixIcon]", "[suffixIcon]"];
+const _c4$4 = ["[prefixIcon]", "[suffixIcon]"];
 class DrInputComponent {
     set disabled(value) {
         this.setDisabledState(value);
@@ -1354,7 +1428,7 @@ class DrInputComponent {
                     useExisting: forwardRef((() => DrInputComponent)),
                     multi: true,
                 },
-            ])], ngContentSelectors: _c4$5, decls: 8, vars: 5, consts: [[4, "ngIf", "ngIfElse"], ["maskedInput", ""], ["class", "clear-icon", 3, "click", 4, "ngIf"], ["class", "search-icon", 3, "click", 4, "ngIf"], [3, "click", 4, "ngIf"], [3, "ngModel", "disabled", "readonly", "type", "placeholder", "name", "min", "max", "minlength", "maxlength", "step", "ngModelChange", "ngModelDebounceChange", "blur", "focus"], ["inputRef", ""], [3, "ngModel", "disabled", "readonly", "type", "placeholder", "name", "min", "max", "minlength", "maxlength", "mask", "suffix", "prefix", "step", "ngModelChange", "ngModelDebounceChange", "blur", "focus"], [1, "clear-icon", 3, "click"], [1, "search-icon", 3, "click"], [3, "click"]], template: function DrInputComponent_Template(rf, ctx) { if (rf & 1) {
+            ])], ngContentSelectors: _c4$4, decls: 8, vars: 5, consts: [[4, "ngIf", "ngIfElse"], ["maskedInput", ""], ["class", "clear-icon", 3, "click", 4, "ngIf"], ["class", "search-icon", 3, "click", 4, "ngIf"], [3, "click", 4, "ngIf"], [3, "ngModel", "disabled", "readonly", "type", "placeholder", "name", "min", "max", "minlength", "maxlength", "step", "ngModelChange", "ngModelDebounceChange", "blur", "focus"], ["inputRef", ""], [3, "ngModel", "disabled", "readonly", "type", "placeholder", "name", "min", "max", "minlength", "maxlength", "mask", "suffix", "prefix", "step", "ngModelChange", "ngModelDebounceChange", "blur", "focus"], [1, "clear-icon", 3, "click"], [1, "search-icon", 3, "click"], [3, "click"]], template: function DrInputComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef(_c3$7);
             i0.ɵɵprojection(0);
             i0.ɵɵtemplate(1, DrInputComponent_ng_container_1_Template, 3, 12, "ng-container", 0);
@@ -1460,22 +1534,23 @@ const _c0$L = ["labelTemplate"];
 const _c1$k = ["multiLabelTemplate"];
 const _c2$b = ["optionTemplate"];
 const _c3$6 = ["optionHeaderTemplate"];
-const _c4$4 = ["optionFooterTemplate"];
-const _c5$3 = function (a0) { return { item: a0 }; };
+const _c4$3 = ["optionFooterTemplate"];
+const _c5$3 = ["notFoundTemplate"];
+const _c6 = function (a0) { return { item: a0 }; };
 function DrSelectComponent_2_ng_template_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainer(0, 6);
 } if (rf & 2) {
-    const item_r12 = ctx.item;
-    const ctx_r11 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("ngTemplateOutlet", ctx_r11.optionHeaderTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c5$3, item_r12));
+    const item_r13 = ctx.item;
+    const ctx_r12 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r12.optionHeaderTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c6, item_r13));
 } }
 function DrSelectComponent_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtemplate(0, DrSelectComponent_2_ng_template_0_Template, 1, 4, "ng-template", 5);
 } }
 function DrSelectComponent_3_ng_template_0_Template(rf, ctx) { if (rf & 1) {
-    const _r16 = i0.ɵɵgetCurrentView();
+    const _r17 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "dr-input", 7);
-    i0.ɵɵlistener("ngModelChange", function DrSelectComponent_3_ng_template_0_Template_dr_input_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r16); i0.ɵɵnextContext(2); const _r0 = i0.ɵɵreference(1); return i0.ɵɵresetView(_r0.itemsList.filter($event + "")); });
+    i0.ɵɵlistener("ngModelChange", function DrSelectComponent_3_ng_template_0_Template_dr_input_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r17); i0.ɵɵnextContext(2); const _r0 = i0.ɵɵreference(1); return i0.ɵɵresetView(_r0.itemsList.filter($event + "")); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     i0.ɵɵnextContext(2);
@@ -1488,33 +1563,33 @@ function DrSelectComponent_3_Template(rf, ctx) { if (rf & 1) {
 function DrSelectComponent_4_ng_template_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainer(0, 6);
 } if (rf & 2) {
-    const item_r18 = ctx.item;
-    const ctx_r17 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("ngTemplateOutlet", ctx_r17.labelTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c5$3, item_r18));
+    const item_r19 = ctx.item;
+    const ctx_r18 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r18.labelTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c6, item_r19));
 } }
 function DrSelectComponent_4_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtemplate(0, DrSelectComponent_4_ng_template_0_Template, 1, 4, "ng-template", 8);
 } }
-const _c6 = function (a0, a1) { return { items: a0, clear: a1 }; };
+const _c7 = function (a0, a1) { return { items: a0, clear: a1 }; };
 function DrSelectComponent_5_ng_template_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainer(0, 6);
 } if (rf & 2) {
-    const items_r20 = ctx.items;
-    const clear_r21 = ctx.clear;
-    const ctx_r19 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("ngTemplateOutlet", ctx_r19.multiLabelTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction2(2, _c6, items_r20, clear_r21));
+    const items_r21 = ctx.items;
+    const clear_r22 = ctx.clear;
+    const ctx_r20 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r20.multiLabelTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction2(2, _c7, items_r21, clear_r22));
 } }
 function DrSelectComponent_5_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtemplate(0, DrSelectComponent_5_ng_template_0_Template, 1, 5, "ng-template", 9);
 } }
-const _c7 = function (a0, a1) { return { item: a0, item$: a1 }; };
+const _c8 = function (a0, a1) { return { item: a0, item$: a1 }; };
 function DrSelectComponent_6_ng_template_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainer(0, 6);
 } if (rf & 2) {
-    const item_r23 = ctx.item;
-    const item$_r24 = ctx.item$;
-    const ctx_r22 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("ngTemplateOutlet", ctx_r22.optionTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction2(2, _c7, item_r23, item$_r24));
+    const item_r24 = ctx.item;
+    const item$_r25 = ctx.item$;
+    const ctx_r23 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r23.optionTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction2(2, _c8, item_r24, item$_r25));
 } }
 function DrSelectComponent_6_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtemplate(0, DrSelectComponent_6_ng_template_0_Template, 1, 5, "ng-template", 10);
@@ -1527,23 +1602,23 @@ function DrSelectComponent_7_ng_template_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const item_r26 = ctx.item;
+    const item_r27 = ctx.item;
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(item_r26.name);
+    i0.ɵɵtextInterpolate(item_r27.name);
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(item_r26 == null ? null : item_r26.description);
+    i0.ɵɵtextInterpolate(item_r27 == null ? null : item_r27.description);
 } }
 function DrSelectComponent_7_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtemplate(0, DrSelectComponent_7_ng_template_0_Template, 5, 2, "ng-template", 10);
 } }
-const _c8 = function (a0, a1) { return { item: a0, close: a1 }; };
+const _c9 = function (a0, a1) { return { item: a0, close: a1 }; };
 function DrSelectComponent_8_ng_template_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainer(0, 6);
 } if (rf & 2) {
-    const item_r28 = ctx.item;
-    const ctx_r27 = i0.ɵɵnextContext(2);
+    const item_r29 = ctx.item;
+    const ctx_r28 = i0.ɵɵnextContext(2);
     const _r0 = i0.ɵɵreference(1);
-    i0.ɵɵproperty("ngTemplateOutlet", ctx_r27.optionFooterTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction2(2, _c8, item_r28, _r0.close.bind(_r0)));
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r28.optionFooterTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction2(2, _c9, item_r29, _r0.close.bind(_r0)));
 } }
 function DrSelectComponent_8_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtemplate(0, DrSelectComponent_8_ng_template_0_Template, 1, 5, "ng-template", 13);
@@ -1551,9 +1626,9 @@ function DrSelectComponent_8_Template(rf, ctx) { if (rf & 1) {
 function DrSelectComponent_9_ng_template_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtext(0);
 } if (rf & 2) {
-    const item_r30 = ctx.item;
-    const ctx_r29 = i0.ɵɵnextContext(2);
-    i0.ɵɵtextInterpolate1(" ", item_r30[ctx_r29.groupBy], " ");
+    const item_r31 = ctx.item;
+    const ctx_r30 = i0.ɵɵnextContext(2);
+    i0.ɵɵtextInterpolate1(" ", item_r31[ctx_r30.groupBy], " ");
 } }
 function DrSelectComponent_9_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtemplate(0, DrSelectComponent_9_ng_template_0_Template, 1, 1, "ng-template", 14);
@@ -1561,8 +1636,8 @@ function DrSelectComponent_9_Template(rf, ctx) { if (rf & 1) {
 function DrSelectComponent_ng_template_10_div_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "div", 16);
 } if (rf & 2) {
-    const ctx_r31 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("drSpinner", ctx_r31.loading)("drSpinnerType", "circle")("drSpinnerSize", "small")("drSpinnerNoOverlay", true);
+    const ctx_r32 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("drSpinner", ctx_r32.loading)("drSpinnerType", "circle")("drSpinnerSize", "small")("drSpinnerNoOverlay", true);
 } }
 function DrSelectComponent_ng_template_10_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtemplate(0, DrSelectComponent_ng_template_10_div_0_Template, 1, 4, "div", 15);
@@ -1570,8 +1645,17 @@ function DrSelectComponent_ng_template_10_Template(rf, ctx) { if (rf & 1) {
     const ctx_r9 = i0.ɵɵnextContext();
     i0.ɵɵproperty("ngIf", ctx_r9.loading);
 } }
-function DrSelectComponent_i_11_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 17);
+function DrSelectComponent_11_ng_template_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementContainer(0, 18);
+} if (rf & 2) {
+    const ctx_r33 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r33.notFoundTemplate);
+} }
+function DrSelectComponent_11_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtemplate(0, DrSelectComponent_11_ng_template_0_Template, 1, 1, "ng-template", 17);
+} }
+function DrSelectComponent_i_12_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 19);
 } }
 const SELECT_HOST_ATTRIBUTES = ['no-left-border', 'no-left-border-radius', 'no-right-border', 'no-right-border-radius'];
 class DrSelectComponent {
@@ -1708,7 +1792,8 @@ class DrSelectComponent {
             i0.ɵɵcontentQuery(dirIndex, _c1$k, 5);
             i0.ɵɵcontentQuery(dirIndex, _c2$b, 5);
             i0.ɵɵcontentQuery(dirIndex, _c3$6, 5);
-            i0.ɵɵcontentQuery(dirIndex, _c4$4, 5);
+            i0.ɵɵcontentQuery(dirIndex, _c4$3, 5);
+            i0.ɵɵcontentQuery(dirIndex, _c5$3, 5);
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.labelTemplate = _t.first);
@@ -1716,6 +1801,7 @@ class DrSelectComponent {
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.optionTemplate = _t.first);
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.optionHeaderTemplate = _t.first);
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.optionFooterTemplate = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.notFoundTemplate = _t.first);
         } }, viewQuery: function DrSelectComponent_Query(rf, ctx) { if (rf & 1) {
             i0.ɵɵviewQuery(NgSelectComponent, 5, NgSelectComponent);
         } if (rf & 2) {
@@ -1731,7 +1817,7 @@ class DrSelectComponent {
                     useExisting: DrSelectComponent,
                     multi: true,
                 },
-            ])], decls: 12, vars: 40, consts: [[1, "dr-select", 3, "ngModel", "items", "bindLabel", "bindValue", "multiple", "addTag", "appendTo", "clearable", "searchable", "hideSelected", "placeholder", "loading", "loadingText", "readonly", "closeOnSelect", "disabled", "labelForId", "maxSelectedItems", "keyDownFn", "searchFn", "isOpen", "groupBy", "selectOnTab", "virtualScroll", "typeahead", "compareWith", "ngModelChange", "search", "scrollToEnd", "keydown.tab", "change", "open", "close"], ["selectComponent", ""], [4, "ngIf"], ["ng-loadingspinner-tmp", ""], ["class", "search-icon dr-icon-search", 4, "ngIf"], ["ng-header-tmp", ""], [3, "ngTemplateOutlet", "ngTemplateOutletContext"], ["type", "search", 1, "dr-select__search", 3, "ngModel", "ngModelChange"], ["ng-label-tmp", ""], ["ng-multi-label-tmp", ""], ["ng-option-tmp", ""], [1, "dr-select__option-with-desc__wrapper"], [1, "dr-select__option-with-desc__description"], ["ng-footer-tmp", ""], ["ng-optgroup-tmp", ""], ["class", "dr-select__loading", 3, "drSpinner", "drSpinnerType", "drSpinnerSize", "drSpinnerNoOverlay", 4, "ngIf"], [1, "dr-select__loading", 3, "drSpinner", "drSpinnerType", "drSpinnerSize", "drSpinnerNoOverlay"], [1, "search-icon", "dr-icon-search"]], template: function DrSelectComponent_Template(rf, ctx) { if (rf & 1) {
+            ])], decls: 13, vars: 41, consts: [[1, "dr-select", 3, "ngModel", "items", "bindLabel", "bindValue", "multiple", "addTag", "appendTo", "clearable", "searchable", "hideSelected", "placeholder", "loading", "loadingText", "readonly", "closeOnSelect", "disabled", "labelForId", "maxSelectedItems", "keyDownFn", "searchFn", "isOpen", "groupBy", "selectOnTab", "virtualScroll", "typeahead", "compareWith", "ngModelChange", "search", "scrollToEnd", "keydown.tab", "change", "open", "close"], ["selectComponent", ""], [4, "ngIf"], ["ng-loadingspinner-tmp", ""], ["class", "search-icon dr-icon-search", 4, "ngIf"], ["ng-header-tmp", ""], [3, "ngTemplateOutlet", "ngTemplateOutletContext"], ["type", "search", 1, "dr-select__search", 3, "ngModel", "ngModelChange"], ["ng-label-tmp", ""], ["ng-multi-label-tmp", ""], ["ng-option-tmp", ""], [1, "dr-select__option-with-desc__wrapper"], [1, "dr-select__option-with-desc__description"], ["ng-footer-tmp", ""], ["ng-optgroup-tmp", ""], ["class", "dr-select__loading", 3, "drSpinner", "drSpinnerType", "drSpinnerSize", "drSpinnerNoOverlay", 4, "ngIf"], [1, "dr-select__loading", 3, "drSpinner", "drSpinnerType", "drSpinnerSize", "drSpinnerNoOverlay"], ["ng-notfound-tmp", ""], [3, "ngTemplateOutlet"], [1, "search-icon", "dr-icon-search"]], template: function DrSelectComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "ng-select", 0, 1);
             i0.ɵɵlistener("ngModelChange", function DrSelectComponent_Template_ng_select_ngModelChange_0_listener($event) { return ctx.selectedItem = $event; })("search", function DrSelectComponent_Template_ng_select_search_0_listener($event) { return ctx.search.emit($event); })("scrollToEnd", function DrSelectComponent_Template_ng_select_scrollToEnd_0_listener($event) { return ctx.scrollToEnd.emit($event); })("keydown.tab", function DrSelectComponent_Template_ng_select_keydown_tab_0_listener($event) { return ctx.onTabKeypress($event); })("change", function DrSelectComponent_Template_ng_select_change_0_listener() { return ctx.onValueSelected(ctx.selectedItem); })("open", function DrSelectComponent_Template_ng_select_open_0_listener($event) { ctx.open.emit($event); return ctx.onDropdownOpen(); })("close", function DrSelectComponent_Template_ng_select_close_0_listener($event) { return ctx.onClose($event); });
             i0.ɵɵtemplate(2, DrSelectComponent_2_Template, 1, 0, null, 2);
@@ -1743,8 +1829,9 @@ class DrSelectComponent {
             i0.ɵɵtemplate(8, DrSelectComponent_8_Template, 1, 0, null, 2);
             i0.ɵɵtemplate(9, DrSelectComponent_9_Template, 1, 0, null, 2);
             i0.ɵɵtemplate(10, DrSelectComponent_ng_template_10_Template, 1, 1, "ng-template", 3);
+            i0.ɵɵtemplate(11, DrSelectComponent_11_Template, 1, 0, null, 2);
             i0.ɵɵelementEnd();
-            i0.ɵɵtemplate(11, DrSelectComponent_i_11_Template, 1, 0, "i", 4);
+            i0.ɵɵtemplate(12, DrSelectComponent_i_12_Template, 1, 0, "i", 4);
         } if (rf & 2) {
             const _r0 = i0.ɵɵreference(1);
             i0.ɵɵclassProp("ng-select--no-value-padding", ctx.noValuePadding)("ng-select--multiple-height-increased", ctx.multipleHeightIncreased);
@@ -1767,8 +1854,10 @@ class DrSelectComponent {
             i0.ɵɵadvance(1);
             i0.ɵɵproperty("ngIf", ctx.groupBy);
             i0.ɵɵadvance(2);
+            i0.ɵɵproperty("ngIf", ctx.notFoundTemplate);
+            i0.ɵɵadvance(1);
             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.NgNotFoundTemplateDirective, 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}"] }); }
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DrSelectComponent, [{
         type: Component,
@@ -1778,7 +1867,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-template *ngIf=\"notFoundTemplate\" ng-notfound-tmp>\n        <ng-container [ngTemplateOutlet]=\"notFoundTemplate\"></ng-container>\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"] }]
     }], function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }]; }, { type: [{
             type: Input
         }, {
@@ -1887,6 +1976,9 @@ class DrSelectComponent {
         }], optionFooterTemplate: [{
             type: ContentChild,
             args: ['optionFooterTemplate']
+        }], notFoundTemplate: [{
+            type: ContentChild,
+            args: ['notFoundTemplate']
         }], asTextView: [{
             type: HostBinding,
             args: ['class.textView']
@@ -2493,7 +2585,7 @@ class CustomDateAdapter extends MomentDateAdapter {
 }
 class DrDatePickerComponent {
     set useDarkTheme(value) {
-        this.panelClass = value ? 'dr-datepicker-dark-theme' : '';
+        this.panelClass = value ? this.panelClass + ' dr-datepicker-dark-theme' : this.panelClass;
     }
     set min(minDate) {
         this._min = minDate ? moment__default.unix(minDate).utc() : null;
@@ -2529,6 +2621,7 @@ class DrDatePickerComponent {
         this.dateAdapter = dateAdapter;
         this.datePickerService = datePickerService;
         this.hostId = null;
+        this.panelClass = '';
         this._startAt = null;
         /**
          * @description Whether to transform date, taking end, start, middle of period (i.e. set middle of month if timeframe='month')
@@ -2787,7 +2880,7 @@ class DrDatePickerComponent {
         } }, 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", selectCurrentQuarter: "selectCurrentQuarter" }, features: [i0.ɵɵProvidersFeature([
+        } }, inputs: { id: "id", useButton: "useButton", buttonLabel: "buttonLabel", iconAfterButton: "iconAfterButton", panelClass: "panelClass", 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 },
@@ -2828,6 +2921,8 @@ class DrDatePickerComponent {
             type: Input
         }], iconAfterButton: [{
             type: Input
+        }], panelClass: [{
+            type: Input
         }], useDarkTheme: [{
             type: Input
         }], format: [{
@@ -3988,42 +4083,55 @@ class ListTagComponent {
         }] }); })();
 
 const _c0$H = ["dynamicInputRef"];
-function DrSelectAddItemComponent_div_5_p_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "p", 12);
+function DrSelectAddItemComponent_div_1_Template(rf, ctx) { if (rf & 1) {
+    const _r3 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 3);
+    i0.ɵɵlistener("click", function DrSelectAddItemComponent_div_1_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r3); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onDynamicAdding()); });
+    i0.ɵɵelement(1, "i", 4);
+    i0.ɵɵelementStart(2, "p", 5);
+    i0.ɵɵtext(3);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(ctx_r0.dynamicAddLabel);
+} }
+function DrSelectAddItemComponent_div_2_p_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "p", 13);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(2);
+    const ctx_r4 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance(1);
-    i0.ɵɵtextInterpolate(ctx_r1.alertMsg);
+    i0.ɵɵtextInterpolate(ctx_r4.alertMsg);
 } }
-function DrSelectAddItemComponent_div_5_dr_button_5_Template(rf, ctx) { if (rf & 1) {
-    const _r5 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "dr-button", 13);
-    i0.ɵɵlistener("click", function DrSelectAddItemComponent_div_5_dr_button_5_Template_dr_button_click_0_listener() { i0.ɵɵrestoreView(_r5); const ctx_r4 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r4.onDynamicAdd(ctx_r4.dynamicValue)); });
+function DrSelectAddItemComponent_div_2_dr_button_5_Template(rf, ctx) { if (rf & 1) {
+    const _r8 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "dr-button", 14);
+    i0.ɵɵlistener("click", function DrSelectAddItemComponent_div_2_dr_button_5_Template_dr_button_click_0_listener() { i0.ɵɵrestoreView(_r8); const ctx_r7 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r7.onDynamicAdd(ctx_r7.dynamicValue)); });
     i0.ɵɵelementEnd();
 } }
-function DrSelectAddItemComponent_div_5_Template(rf, ctx) { if (rf & 1) {
-    const _r7 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 5);
-    i0.ɵɵtemplate(1, DrSelectAddItemComponent_div_5_p_1_Template, 2, 1, "p", 6);
-    i0.ɵɵelementStart(2, "dr-input", 7, 8);
-    i0.ɵɵlistener("ngModelChange", function DrSelectAddItemComponent_div_5_Template_dr_input_ngModelChange_2_listener($event) { i0.ɵɵrestoreView(_r7); const ctx_r6 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r6.dynamicValue = $event); })("keydown", function DrSelectAddItemComponent_div_5_Template_dr_input_keydown_2_listener($event) { i0.ɵɵrestoreView(_r7); const ctx_r8 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r8.onDynamicAdd(ctx_r8.dynamicValue, $event)); });
+function DrSelectAddItemComponent_div_2_Template(rf, ctx) { if (rf & 1) {
+    const _r10 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 6);
+    i0.ɵɵtemplate(1, DrSelectAddItemComponent_div_2_p_1_Template, 2, 1, "p", 7);
+    i0.ɵɵelementStart(2, "dr-input", 8, 9);
+    i0.ɵɵlistener("ngModelChange", function DrSelectAddItemComponent_div_2_Template_dr_input_ngModelChange_2_listener($event) { i0.ɵɵrestoreView(_r10); const ctx_r9 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r9.dynamicValue = $event); })("keydown", function DrSelectAddItemComponent_div_2_Template_dr_input_keydown_2_listener($event) { i0.ɵɵrestoreView(_r10); const ctx_r11 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r11.onDynamicAdd(ctx_r11.dynamicValue, $event)); });
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "div", 9);
-    i0.ɵɵtemplate(5, DrSelectAddItemComponent_div_5_dr_button_5_Template, 1, 0, "dr-button", 10);
-    i0.ɵɵelementStart(6, "dr-button", 11);
-    i0.ɵɵlistener("click", function DrSelectAddItemComponent_div_5_Template_dr_button_click_6_listener() { i0.ɵɵrestoreView(_r7); const ctx_r9 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r9.onDynamicAddingClose()); });
+    i0.ɵɵelementStart(4, "div", 10);
+    i0.ɵɵtemplate(5, DrSelectAddItemComponent_div_2_dr_button_5_Template, 1, 0, "dr-button", 11);
+    i0.ɵɵelementStart(6, "dr-button", 12);
+    i0.ɵɵlistener("click", function DrSelectAddItemComponent_div_2_Template_dr_button_click_6_listener() { i0.ɵɵrestoreView(_r10); const ctx_r12 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r12.onDynamicAddingClose()); });
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext();
+    const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵadvance(1);
-    i0.ɵɵproperty("ngIf", ctx_r0.alertMsg && !ctx_r0.isDynamicValueValid() && ctx_r0.isDirty);
+    i0.ɵɵproperty("ngIf", ctx_r1.alertMsg && !ctx_r1.isDynamicValueValid() && ctx_r1.isDirty);
     i0.ɵɵadvance(1);
-    i0.ɵɵclassProp("dynamic-add__field__input--error", !ctx_r0.isDynamicValueValid() && ctx_r0.isDirty);
-    i0.ɵɵproperty("ngModel", ctx_r0.dynamicValue);
+    i0.ɵɵclassProp("dynamic-add__field__input--error", !ctx_r1.isDynamicValueValid() && ctx_r1.isDirty);
+    i0.ɵɵproperty("ngModel", ctx_r1.dynamicValue);
     i0.ɵɵadvance(3);
-    i0.ɵɵproperty("ngIf", ctx_r0.dynamicValue && ctx_r0.isDynamicValueValid());
+    i0.ɵɵproperty("ngIf", ctx_r1.dynamicValue && ctx_r1.isDynamicValueValid());
 } }
 class DrSelectAddItemComponent {
     set inputRef(input) {
@@ -4036,6 +4144,7 @@ class DrSelectAddItemComponent {
         this.currentValues = [];
         this.dynamicAddLabel = 'Add new';
         this.values = [];
+        this.showOnlyInput = false;
         this.dynamicValueAdded = new EventEmitter();
     }
     ngOnChanges(changes) {
@@ -4081,25 +4190,21 @@ class DrSelectAddItemComponent {
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.inputRef = _t.first);
-        } }, inputs: { dynamicAddLabel: "dynamicAddLabel", bindValue: "bindValue", values: "values", alertMsg: "alertMsg" }, outputs: { dynamicValueAdded: "dynamicValueAdded" }, features: [i0.ɵɵNgOnChangesFeature], decls: 6, vars: 2, consts: [[1, "dr-select__dynamic-add", "dynamic-add"], [1, "dynamic-add__add-item", 3, "click"], [1, "dr-icon-add"], [1, "dynamic-add__add-item__text"], ["class", "dynamic-add__field", 4, "ngIf"], [1, "dynamic-add__field"], ["class", "dynamic-add__field__alert", 4, "ngIf"], ["placeholder", "Type...", 1, "dynamic-add__field__input", 3, "ngModel", "ngModelChange", "keydown"], ["dynamicInputRef", ""], [1, "dynamic-add__field__buttons"], ["theme", "icon", "icon", "dr-icon-approve", "iconSize", "18px", 3, "click", 4, "ngIf"], ["theme", "icon", "icon", "dr-icon-exit", "iconSize", "18px", 3, "click"], [1, "dynamic-add__field__alert"], ["theme", "icon", "icon", "dr-icon-approve", "iconSize", "18px", 3, "click"]], template: function DrSelectAddItemComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵelementStart(0, "div", 0)(1, "div", 1);
-            i0.ɵɵlistener("click", function DrSelectAddItemComponent_Template_div_click_1_listener() { return ctx.onDynamicAdding(); });
-            i0.ɵɵelement(2, "i", 2);
-            i0.ɵɵelementStart(3, "p", 3);
-            i0.ɵɵtext(4);
-            i0.ɵɵelementEnd()();
-            i0.ɵɵtemplate(5, DrSelectAddItemComponent_div_5_Template, 7, 5, "div", 4);
+        } }, inputs: { dynamicAddLabel: "dynamicAddLabel", bindValue: "bindValue", values: "values", alertMsg: "alertMsg", showOnlyInput: "showOnlyInput" }, outputs: { dynamicValueAdded: "dynamicValueAdded" }, features: [i0.ɵɵNgOnChangesFeature], decls: 3, vars: 2, consts: [[1, "dr-select__dynamic-add", "dynamic-add"], ["class", "dynamic-add__add-item", 3, "click", 4, "ngIf"], ["class", "dynamic-add__field", 4, "ngIf"], [1, "dynamic-add__add-item", 3, "click"], [1, "dr-icon-add"], [1, "dynamic-add__add-item__text"], [1, "dynamic-add__field"], ["class", "dynamic-add__field__alert", 4, "ngIf"], ["placeholder", "Type...", 1, "dynamic-add__field__input", 3, "ngModel", "ngModelChange", "keydown"], ["dynamicInputRef", ""], [1, "dynamic-add__field__buttons"], ["theme", "icon", "icon", "dr-icon-approve", "iconSize", "18px", 3, "click", 4, "ngIf"], ["theme", "icon", "icon", "dr-icon-exit", "iconSize", "18px", 3, "click"], [1, "dynamic-add__field__alert"], ["theme", "icon", "icon", "dr-icon-approve", "iconSize", "18px", 3, "click"]], template: function DrSelectAddItemComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "div", 0);
+            i0.ɵɵtemplate(1, DrSelectAddItemComponent_div_1_Template, 4, 1, "div", 1);
+            i0.ɵɵtemplate(2, DrSelectAddItemComponent_div_2_Template, 7, 5, "div", 2);
             i0.ɵɵelementEnd();
         } if (rf & 2) {
-            i0.ɵɵadvance(4);
-            i0.ɵɵtextInterpolate(ctx.dynamicAddLabel);
+            i0.ɵɵadvance(1);
+            i0.ɵɵproperty("ngIf", !(ctx.showOnlyInput && ctx.isDynamicAdding));
             i0.ɵɵadvance(1);
             i0.ɵɵproperty("ngIf", ctx.isDynamicAdding);
         } }, dependencies: [DrButtonComponent, i1$2.NgControlStatus, i1$2.NgModel, i1.NgIf, DrInputComponent], styles: [".dynamic-add__add-item[_ngcontent-%COMP%]{cursor:pointer;display:flex;align-items:center;border-bottom:1px solid #dfe0e3;padding:6px}.dynamic-add__add-item[_ngcontent-%COMP%]:hover{background:#f9f7ff}.dynamic-add__add-item__text[_ngcontent-%COMP%]{font-size:14px;line-height:22px;margin:0;color:#6d6e6f}.dynamic-add__add-item[_ngcontent-%COMP%]   .dr-icon-add[_ngcontent-%COMP%]{color:#6d6e6f}.dynamic-add__field[_ngcontent-%COMP%]{position:relative}.dynamic-add__field__buttons[_ngcontent-%COMP%]{position:absolute;top:0;right:0;bottom:0;display:flex;align-items:center}.dynamic-add__field__alert[_ngcontent-%COMP%]{font-size:12px;position:absolute;color:#bf1d30;z-index:100;right:30px}  .ng-dropdown-panel .ng-dropdown-footer:has(.dynamic-add),   .ng-dropdown-panel .ng-dropdown-header:has(.dynamic-add){padding:0;border:none}  .ng-dropdown-panel .ng-dropdown-footer .dynamic-add__add-item{border-bottom:none}  .dynamic-add__field__input{padding-left:12px!important;height:36px!important;border:none!important;background:#f9f7ff!important;border-radius:0!important}  .dynamic-add__field__input>input{background:#f9f7ff}  .dynamic-add__field__input>input::placeholder{line-height:22px;font-size:14px;font-weight:400;color:#9ea1aa}  .dynamic-add__field__input--error{background:#ffdfe4!important}  .dynamic-add__field__input--error>input{background:#ffdfe4}"], changeDetection: 0 }); }
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DrSelectAddItemComponent, [{
         type: Component,
-        args: [{ selector: 'dr-select-add-item', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"dr-select__dynamic-add dynamic-add\">\n    <div class=\"dynamic-add__add-item\" (click)=\"onDynamicAdding()\">\n        <i class=\"dr-icon-add\"></i>\n        <p class=\"dynamic-add__add-item__text\">{{ dynamicAddLabel }}</p>\n    </div>\n    <div *ngIf=\"isDynamicAdding\" class=\"dynamic-add__field\">\n        <p *ngIf=\"alertMsg && !isDynamicValueValid() && isDirty\"\n              class=\"dynamic-add__field__alert\">{{ alertMsg }}</p>\n        <dr-input\n            #dynamicInputRef\n            class=\"dynamic-add__field__input\"\n            [class.dynamic-add__field__input--error]=\"!isDynamicValueValid() && isDirty\"\n            [(ngModel)]=\"dynamicValue\"\n            (keydown)=\"onDynamicAdd(dynamicValue, $event)\"\n            placeholder=\"Type...\"></dr-input>\n        <div class=\"dynamic-add__field__buttons\">\n            <dr-button\n                *ngIf=\"dynamicValue && isDynamicValueValid()\"\n                theme=\"icon\"\n                icon=\"dr-icon-approve\"\n                iconSize=\"18px\"\n                (click)=\"onDynamicAdd(dynamicValue)\"></dr-button>\n            <dr-button theme=\"icon\" icon=\"dr-icon-exit\" iconSize=\"18px\" (click)=\"onDynamicAddingClose()\"></dr-button>\n        </div>\n    </div>\n</div>\n", styles: [".dynamic-add__add-item{cursor:pointer;display:flex;align-items:center;border-bottom:1px solid #dfe0e3;padding:6px}.dynamic-add__add-item:hover{background:#f9f7ff}.dynamic-add__add-item__text{font-size:14px;line-height:22px;margin:0;color:#6d6e6f}.dynamic-add__add-item .dr-icon-add{color:#6d6e6f}.dynamic-add__field{position:relative}.dynamic-add__field__buttons{position:absolute;top:0;right:0;bottom:0;display:flex;align-items:center}.dynamic-add__field__alert{font-size:12px;position:absolute;color:#bf1d30;z-index:100;right:30px}::ng-deep .ng-dropdown-panel .ng-dropdown-footer:has(.dynamic-add),::ng-deep .ng-dropdown-panel .ng-dropdown-header:has(.dynamic-add){padding:0;border:none}::ng-deep .ng-dropdown-panel .ng-dropdown-footer .dynamic-add__add-item{border-bottom:none}::ng-deep .dynamic-add__field__input{padding-left:12px!important;height:36px!important;border:none!important;background:#f9f7ff!important;border-radius:0!important}::ng-deep .dynamic-add__field__input>input{background:#f9f7ff}::ng-deep .dynamic-add__field__input>input::placeholder{line-height:22px;font-size:14px;font-weight:400;color:#9ea1aa}::ng-deep .dynamic-add__field__input--error{background:#ffdfe4!important}::ng-deep .dynamic-add__field__input--error>input{background:#ffdfe4}\n"] }]
+        args: [{ selector: 'dr-select-add-item', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"dr-select__dynamic-add dynamic-add\">\n    <div *ngIf=\"!(showOnlyInput && isDynamicAdding)\" class=\"dynamic-add__add-item\" (click)=\"onDynamicAdding()\">\n        <i class=\"dr-icon-add\"></i>\n        <p class=\"dynamic-add__add-item__text\">{{ dynamicAddLabel }}</p>\n    </div>\n    <div *ngIf=\"isDynamicAdding\" class=\"dynamic-add__field\">\n        <p *ngIf=\"alertMsg && !isDynamicValueValid() && isDirty\" class=\"dynamic-add__field__alert\">{{ alertMsg }}</p>\n        <dr-input\n            #dynamicInputRef\n            class=\"dynamic-add__field__input\"\n            [class.dynamic-add__field__input--error]=\"!isDynamicValueValid() && isDirty\"\n            [(ngModel)]=\"dynamicValue\"\n            (keydown)=\"onDynamicAdd(dynamicValue, $event)\"\n            placeholder=\"Type...\"></dr-input>\n        <div class=\"dynamic-add__field__buttons\">\n            <dr-button\n                *ngIf=\"dynamicValue && isDynamicValueValid()\"\n                theme=\"icon\"\n                icon=\"dr-icon-approve\"\n                iconSize=\"18px\"\n                (click)=\"onDynamicAdd(dynamicValue)\"></dr-button>\n            <dr-button theme=\"icon\" icon=\"dr-icon-exit\" iconSize=\"18px\" (click)=\"onDynamicAddingClose()\"></dr-button>\n        </div>\n    </div>\n</div>\n", styles: [".dynamic-add__add-item{cursor:pointer;display:flex;align-items:center;border-bottom:1px solid #dfe0e3;padding:6px}.dynamic-add__add-item:hover{background:#f9f7ff}.dynamic-add__add-item__text{font-size:14px;line-height:22px;margin:0;color:#6d6e6f}.dynamic-add__add-item .dr-icon-add{color:#6d6e6f}.dynamic-add__field{position:relative}.dynamic-add__field__buttons{position:absolute;top:0;right:0;bottom:0;display:flex;align-items:center}.dynamic-add__field__alert{font-size:12px;position:absolute;color:#bf1d30;z-index:100;right:30px}::ng-deep .ng-dropdown-panel .ng-dropdown-footer:has(.dynamic-add),::ng-deep .ng-dropdown-panel .ng-dropdown-header:has(.dynamic-add){padding:0;border:none}::ng-deep .ng-dropdown-panel .ng-dropdown-footer .dynamic-add__add-item{border-bottom:none}::ng-deep .dynamic-add__field__input{padding-left:12px!important;height:36px!important;border:none!important;background:#f9f7ff!important;border-radius:0!important}::ng-deep .dynamic-add__field__input>input{background:#f9f7ff}::ng-deep .dynamic-add__field__input>input::placeholder{line-height:22px;font-size:14px;font-weight:400;color:#9ea1aa}::ng-deep .dynamic-add__field__input--error{background:#ffdfe4!important}::ng-deep .dynamic-add__field__input--error>input{background:#ffdfe4}\n"] }]
     }], function () { return [{ type: DrSelectComponent }]; }, { dynamicAddLabel: [{
             type: Input
         }], bindValue: [{
@@ -4108,6 +4213,8 @@ class DrSelectAddItemComponent {
             type: Input
         }], alertMsg: [{
             type: Input
+        }], showOnlyInput: [{
+            type: Input
         }], dynamicValueAdded: [{
             type: Output
         }], inputRef: [{
@@ -5889,11 +5996,20 @@ class TooltipInfoComponent {
             type: Input
         }] }); })();
 
-const TOOLTIP_COMPONENTS = [TooltipDefaultComponent, TooltipInfoComponent, TooltipComponent, DrTooltipDirective];
+const TOOLTIP_COMPONENTS = [
+    TooltipDefaultComponent,
+    TooltipInfoComponent,
+    TooltipCustomComponent,
+    TooltipComponent,
+    DrTooltipDirective,
+];
 class DrTooltipModule {
     /** @nocollapse */ static { this.ɵfac = function DrTooltipModule_Factory(t) { return new (t || DrTooltipModule)(); }; }
     /** @nocollapse */ static { this.ɵmod = /** @pureOrBreakMyCode */ i0.ɵɵdefineNgModule({ type: DrTooltipModule }); }
-    /** @nocollapse */ static { this.ɵinj = /** @pureOrBreakMyCode */ i0.ɵɵdefineInjector({ imports: [TooltipDefaultComponent, TooltipInfoComponent, TooltipComponent] }); }
+    /** @nocollapse */ static { this.ɵinj = /** @pureOrBreakMyCode */ i0.ɵɵdefineInjector({ imports: [TooltipDefaultComponent,
+            TooltipInfoComponent,
+            TooltipCustomComponent,
+            TooltipComponent] }); }
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DrTooltipModule, [{
         type: NgModule,
@@ -5902,7 +6018,15 @@ class DrTooltipModule {
                 exports: [...TOOLTIP_COMPONENTS],
             }]
     }], null, null); })();
-(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(DrTooltipModule, { imports: [TooltipDefaultComponent, TooltipInfoComponent, TooltipComponent, DrTooltipDirective], exports: [TooltipDefaultComponent, TooltipInfoComponent, TooltipComponent, DrTooltipDirective] }); })();
+(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(DrTooltipModule, { imports: [TooltipDefaultComponent,
+        TooltipInfoComponent,
+        TooltipCustomComponent,
+        TooltipComponent,
+        DrTooltipDirective], exports: [TooltipDefaultComponent,
+        TooltipInfoComponent,
+        TooltipCustomComponent,
+        TooltipComponent,
+        DrTooltipDirective] }); })();
 
 const components$3 = [DrSpinnerComponent];
 const directives = [DrSpinnerDirective];
@@ -6432,7 +6556,7 @@ function StepperComponent_ng_container_3_div_1_ng_container_11_Template(rf, ctx)
     const _r6 = i0.ɵɵreference(8);
     i0.ɵɵproperty("ngTemplateOutlet", _r6)("ngTemplateOutletContext", i0.ɵɵpureFunction3(2, _c3$5, index_r13, isLast_r14, step_r12));
 } }
-const _c4$3 = function (a0) { return { step: a0 }; };
+const _c4$2 = function (a0) { return { step: a0 }; };
 const _c5$2 = function (a0, a1) { return { step: a0, index: a1 }; };
 function StepperComponent_ng_container_3_div_1_Template(rf, ctx) { if (rf & 1) {
     const _r31 = i0.ɵɵgetCurrentView();
@@ -6463,7 +6587,7 @@ function StepperComponent_ng_container_3_div_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵclassProp("step-setup", ctx_r16.inlineLabels);
     i0.ɵɵattribute("data-analytics", ctx_r16.getDataAnalyticsTag(step_r12));
     i0.ɵɵadvance(1);
-    i0.ɵɵproperty("drTooltip", step_r12.description && _r4)("drTooltipContext", i0.ɵɵpureFunction1(22, _c4$3, step_r12))("drTooltipPosition", "bottom");
+    i0.ɵɵproperty("drTooltip", step_r12.description && _r4)("drTooltipContext", i0.ɵɵpureFunction1(22, _c4$2, step_r12))("drTooltipPosition", "bottom");
     i0.ɵɵadvance(1);
     i0.ɵɵclassProp("active", ctx_r16.currentStep === step_r12)("completed", step_r12.completed);
     i0.ɵɵadvance(1);
@@ -7738,7 +7862,7 @@ function DrChatComponent_dr_chat_suggestions_7_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵclassProp("chat__suggestions--full-height", ctx_r3.fullScreen && !(ctx_r3.messages == null ? null : ctx_r3.messages.length));
     i0.ɵɵproperty("values", ctx_r3.suggestions)("fullScreen", ctx_r3.fullScreen)("waitForReply", ctx_r3.waitForReply)("buttonMode", !!(ctx_r3.messages == null ? null : ctx_r3.messages.length));
 } }
-const _c4$2 = [[["dr-chat-alert"]], [["dr-chat-form"]], [["dr-ai-search-input"]], [["", "drChatFormInput", ""]], [["dr-chat-message"]]];
+const _c4$1 = [[["dr-chat-alert"]], [["dr-chat-form"]], [["dr-ai-search-input"]], [["", "drChatFormInput", ""]], [["dr-chat-message"]]];
 const _c5$1 = ["dr-chat-alert", "dr-chat-form", "dr-ai-search-input", "[drChatFormInput]", "dr-chat-message"];
 class DrChatComponent {
     set contentUpdateSubject(value) {
@@ -7838,7 +7962,7 @@ class DrChatComponent {
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.messagesContainer = _t.first);
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx._chatSuggestions = _t.first);
         } }, inputs: { fullScreen: "fullScreen", noMessagesPlaceholder: "noMessagesPlaceholder", contentUpdateSubject: "contentUpdateSubject", scrollBottom: "scrollBottom", suggestions: "suggestions", reopen: "reopen", waitForReply: "waitForReply", scrollDelay: "scrollDelay" }, outputs: { suggestionSelect: "suggestionSelect" }, features: [i0.ɵɵProvidersFeature([DrChatCustomMessageService])], ngContentSelectors: _c5$1, decls: 12, vars: 6, consts: [[1, "chat"], [1, "chat__sticky-top"], [3, "ngTemplateOutlet", 4, "ngIf"], [1, "chat__alert"], ["class", "chat__empty-state", 4, "ngIf"], ["class", "chat__messages", 4, "ngIf"], ["class", "chat__suggestions", 3, "values", "fullScreen", "waitForReply", "chat__suggestions--full-height", "buttonMode", "suggestionSelect", 4, "ngIf"], [1, "form"], [3, "ngTemplateOutlet"], [1, "chat__empty-state"], [1, "chat__empty-state__text"], [1, "chat__messages"], [1, "chat__messages__container"], ["messagesContainer", ""], [1, "chat__suggestions", 3, "values", "fullScreen", "waitForReply", "buttonMode", "suggestionSelect"]], template: function DrChatComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵprojectionDef(_c4$2);
+            i0.ɵɵprojectionDef(_c4$1);
             i0.ɵɵelementStart(0, "div", 0)(1, "div", 1);
             i0.ɵɵtemplate(2, DrChatComponent_ng_container_2_Template, 1, 1, "ng-container", 2);
             i0.ɵɵelementStart(3, "div", 3);
@@ -7937,7 +8061,7 @@ function DrChatFormDropdownComponent_dr_dot_flashing_15_Template(rf, ctx) { if (
 } }
 const _c2$5 = ["*", [["", "dropItem", ""]]];
 const _c3$3 = function (a0) { return { "message-row_loading": a0 }; };
-const _c4$1 = function (a0, a1) { return { "message-row__input--focused": a0, "message-row__input--filled": a1 }; };
+const _c4 = function (a0, a1) { return { "message-row__input--focused": a0, "message-row__input--filled": a1 }; };
 const _c5 = ["*", "[dropItem]"];
 class DrChatFormDropdownComponent {
     constructor(cdr, domSanitizer) {
@@ -8132,7 +8256,7 @@ class DrChatFormDropdownComponent {
             let tmp_1_0;
             i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(15, _c3$3, ctx.isUploadingFiles));
             i0.ɵɵadvance(1);
-            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction2(17, _c4$1, ctx.inputFocus, !!(ctx.message == null ? null : (tmp_1_0 = ctx.message.trim()) == null ? null : tmp_1_0.length) || !!i0.ɵɵpipeBind1(2, 11, ctx.droppedFiles$).length));
+            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction2(17, _c4, ctx.inputFocus, !!(ctx.message == null ? null : (tmp_1_0 = ctx.message.trim()) == null ? null : tmp_1_0.length) || !!i0.ɵɵpipeBind1(2, 11, ctx.droppedFiles$).length));
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("ngIf", i0.ɵɵpipeBind1(4, 13, ctx.droppedFiles$).length);
             i0.ɵɵadvance(3);
@@ -10205,7 +10329,6 @@ function DrDropdownComponent_dr_dropdown_item_4_ng_container_3_Template(rf, ctx)
     const act_r2 = i0.ɵɵnextContext().$implicit;
     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) {
     const _r20 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "dr-dropdown-item", 4);
@@ -10218,7 +10341,7 @@ function DrDropdownComponent_dr_dropdown_item_4_Template(rf, ctx) { if (rf & 1)
     const act_r2 = ctx.$implicit;
     const index_r3 = ctx.index;
     const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("drTooltip", ctx_r1.tooltipToShow(act_r2))("drTooltipPosition", "left")("drTooltipOptions", i0.ɵɵpureFunction0(15, _c2$4))("drTooltipClass", "dr-dropdown__tooltip")("drDropdown", ctx_r1.hasChildren(act_r2) && act_r2.children)("drDropdownClass", act_r2.childOptions == null ? null : act_r2.childOptions.class)("drDropdownInHover", true)("drDropdownPosition", act_r2.childOptions == null ? null : act_r2.childOptions.position)("disabled", ctx_r1.disabled(act_r2))("selected", ctx_r1.selected(act_r2))("divider", act_r2.separateLine);
+    i0.ɵɵproperty("drTooltip", ctx_r1.tooltipToShow(act_r2))("drTooltipPosition", ctx_r1.getTooltipPosition(act_r2))("drTooltipOptions", ctx_r1.getTooltipOptions(act_r2))("drTooltipTheme", ctx_r1.getTooltipTheme(act_r2))("drTooltipMousleaveTimeout", ctx_r1.getTooltipMousleaveTimeout(act_r2))("drTooltipMouseEnterTimeout", ctx_r1.getTooltipMouseEnterTimeout(act_r2))("drTooltipClass", "dr-dropdown__tooltip")("drDropdown", ctx_r1.hasChildren(act_r2) && act_r2.children)("drDropdownClass", act_r2.childOptions == null ? null : act_r2.childOptions.class)("drDropdownInHover", true)("drDropdownPosition", act_r2.childOptions == null ? null : act_r2.childOptions.position)("disabled", ctx_r1.disabled(act_r2))("selected", ctx_r1.selected(act_r2))("divider", act_r2.separateLine);
     i0.ɵɵattribute("data-analytics", ctx_r1.getDataAnalyticsTag(act_r2, index_r3));
     i0.ɵɵadvance(1);
     i0.ɵɵproperty("ngIf", !act_r2.templateRef);
@@ -10227,9 +10350,29 @@ function DrDropdownComponent_dr_dropdown_item_4_Template(rf, ctx) { if (rf & 1)
     i0.ɵɵadvance(1);
     i0.ɵɵproperty("ngIf", act_r2.templateRef);
 } }
-const _c3$2 = [[["dr-dropdown-item"]]];
-const _c4 = ["dr-dropdown-item"];
+const _c2$4 = [[["dr-dropdown-item"]]];
+const _c3$2 = ["dr-dropdown-item"];
 class DrDropdownComponent {
+    constructor() {
+        this.cdr = inject(ChangeDetectorRef);
+        this.popoverRef = inject(DrPopoverRef, { optional: true });
+        this.dropdownInstanceService = inject(DropdownInstanceService, { optional: true });
+        this.drDropdownInHoverChange$ = new Subject();
+        this.destroy$ = new Subject();
+        this._active = true;
+        this.list = [];
+        this.wasHovered = false;
+        this.asChild = false;
+        this.onAction = new EventEmitter();
+        if (!this.dropdownInstanceService)
+            return;
+        this.dropdownInstanceService.register(this);
+        inject(DestroyRef).onDestroy(() => {
+            this.dropdownInstanceService.unregister(this);
+            this.destroy$.next();
+            this.destroy$.next();
+        });
+    }
     set options(data) {
         if (data) {
             this.drDropdownInHover = data.drDropdownInHover;
@@ -10255,31 +10398,17 @@ class DrDropdownComponent {
             }
         }
     }
-    constructor() {
-        this.cdr = inject(ChangeDetectorRef);
-        this.popoverRef = inject(DrPopoverRef, { optional: true });
-        this.dropdownInstanceService = inject(DropdownInstanceService, { optional: true });
-        this.destroy$ = new Subject();
-        this._active = true;
-        this.drDropdownInHoverChange$ = new Subject();
-        this.list = [];
-        this.wasHovered = false;
-        this.asChild = false;
-        this.onAction = new EventEmitter();
-        if (!this.dropdownInstanceService)
-            return;
-        this.dropdownInstanceService.register(this);
-        inject(DestroyRef).onDestroy(() => {
-            this.dropdownInstanceService.unregister(this);
-            this.destroy$.next();
-            this.destroy$.next();
-        });
-    }
     ngOnChanges(changes) {
         if (!changes?.drDropdownInHover?.isFirstChange()) {
             this.drDropdownInHoverChange$.next();
         }
     }
+    onMouseleave() {
+        this._active = false;
+    }
+    active() {
+        return this._active;
+    }
     disabled(act) {
         if (!act.disabled) {
             return false;
@@ -10303,9 +10432,45 @@ class DrDropdownComponent {
         }
     }
     tooltipToShow(act) {
-        if (act.toolTipIfDisabled && !this.disabled(act))
+        if (act.toolTipIfDisabled && !this.disabled(act)) {
             return '';
-        return act.customTooltip ? act.customTooltip(act.data) : act.toolTip;
+        }
+        if (act.customTooltip) {
+            return act.customTooltip(act.data);
+        }
+        if (act.toolTip) {
+            return act.toolTip;
+        }
+        return '';
+    }
+    getTooltipOptions(act) {
+        const customOptions = this.getCustomTooltipComponent(act)?.options;
+        if (!customOptions)
+            return { withoutArrow: true };
+        return {
+            withoutArrow: customOptions.withoutArrow,
+            withoutContainerStyles: customOptions.withoutContainerStyles,
+        };
+    }
+    getTooltipPosition(act) {
+        return this.getCustomTooltipComponent(act)?.options?.position ?? 'left';
+    }
+    getTooltipTheme(act) {
+        return this.getCustomTooltipComponent(act)?.options?.theme ?? TooltipTheme.LIGHT;
+    }
+    getTooltipMousleaveTimeout(act) {
+        return this.getCustomTooltipComponent(act)?.options?.drTooltipMousleaveTimeout ?? 0;
+    }
+    getTooltipMouseEnterTimeout(act) {
+        return this.getCustomTooltipComponent(act)?.options?.drTooltipMouseEnterTimeout ?? 0;
+    }
+    getCustomTooltipComponent(act) {
+        if (act.customTooltip) {
+            const result = act.customTooltip(act.data);
+            if (typeof result !== 'string')
+                return result;
+        }
+        return null;
     }
     action(act) {
         if (!this.disabled(act)) {
@@ -10329,12 +10494,6 @@ class DrDropdownComponent {
         this.wasHovered = true;
         this._active = true;
     }
-    onMouseleave() {
-        this._active = false;
-    }
-    active() {
-        return this._active;
-    }
     getDataAnalyticsTag(act, index) {
         return act.dataAnalytics
             ? act.dataAnalytics
@@ -10348,12 +10507,12 @@ class DrDropdownComponent {
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.menuContainer = _t.first);
-        } }, inputs: { options: "options" }, outputs: { onAction: "action" }, features: [i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c4, decls: 6, vars: 5, consts: [[1, "dr-dropdown"], ["menuContainer", ""], ["tabindex", "-1", "role", "listbox", 1, "dr-dropdown__container", 3, "mouseenter", "mouseleave"], ["drDropdownChild", "", "tabindex", "0", 3, "drTooltip", "drTooltipPosition", "drTooltipOptions", "drTooltipClass", "drDropdown", "drDropdownClass", "drDropdownInHover", "drDropdownPosition", "disabled", "selected", "divider", "mousedown", 4, "ngFor", "ngForOf"], ["drDropdownChild", "", "tabindex", "0", 3, "drTooltip", "drTooltipPosition", "drTooltipOptions", "drTooltipClass", "drDropdown", "drDropdownClass", "drDropdownInHover", "drDropdownPosition", "disabled", "selected", "divider", "mousedown"], ["dropdownItemContent", "", 4, "ngIf"], ["dropdownItemActions", "", 4, "ngIf"], ["dropdownItemContent", "", 3, "ngTemplateOutlet", "ngTemplateOutletContext", 4, "ngIf"], ["dropdownItemContent", ""], ["class", "dr-dropdown__icon", 3, "class", 4, "ngIf"], [1, "dr-dropdown__text"], [1, "dr-dropdown__icon"], ["dropdownItemActions", ""], [3, "class", "showOnHover", "mousedown", 4, "ngFor", "ngForOf"], ["class", "dr-icon-arrow-right", 4, "ngIf"], [3, "mousedown"], [1, "dr-icon-arrow-right"], ["dropdownItemContent", "", 3, "ngTemplateOutlet", "ngTemplateOutletContext"]], template: function DrDropdownComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵprojectionDef(_c3$2);
+        } }, inputs: { options: "options" }, outputs: { onAction: "action" }, features: [i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c3$2, decls: 6, vars: 5, consts: [[1, "dr-dropdown"], ["menuContainer", ""], ["tabindex", "-1", "role", "listbox", 1, "dr-dropdown__container", 3, "mouseenter", "mouseleave"], ["drDropdownChild", "", "tabindex", "0", 3, "drTooltip", "drTooltipPosition", "drTooltipOptions", "drTooltipTheme", "drTooltipMousleaveTimeout", "drTooltipMouseEnterTimeout", "drTooltipClass", "drDropdown", "drDropdownClass", "drDropdownInHover", "drDropdownPosition", "disabled", "selected", "divider", "mousedown", 4, "ngFor", "ngForOf"], ["drDropdownChild", "", "tabindex", "0", 3, "drTooltip", "drTooltipPosition", "drTooltipOptions", "drTooltipTheme", "drTooltipMousleaveTimeout", "drTooltipMouseEnterTimeout", "drTooltipClass", "drDropdown", "drDropdownClass", "drDropdownInHover", "drDropdownPosition", "disabled", "selected", "divider", "mousedown"], ["dropdownItemContent", "", 4, "ngIf"], ["dropdownItemActions", "", 4, "ngIf"], ["dropdownItemContent", "", 3, "ngTemplateOutlet", "ngTemplateOutletContext", 4, "ngIf"], ["dropdownItemContent", ""], ["class", "dr-dropdown__icon", 3, "class", 4, "ngIf"], [1, "dr-dropdown__text"], [1, "dr-dropdown__icon"], ["dropdownItemActions", ""], [3, "class", "showOnHover", "mousedown", 4, "ngFor", "ngForOf"], ["class", "dr-icon-arrow-right", 4, "ngIf"], [3, "mousedown"], [1, "dr-icon-arrow-right"], ["dropdownItemContent", "", 3, "ngTemplateOutlet", "ngTemplateOutletContext"]], template: function DrDropdownComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵprojectionDef(_c2$4);
             i0.ɵɵelementStart(0, "div", 0, 1)(2, "div", 2);
             i0.ɵɵlistener("mouseenter", function DrDropdownComponent_Template_div_mouseenter_2_listener() { return ctx.onMouseenter(); })("mouseleave", function DrDropdownComponent_Template_div_mouseleave_2_listener() { return ctx.onMouseleave(); });
             i0.ɵɵprojection(3);
-            i0.ɵɵtemplate(4, DrDropdownComponent_dr_dropdown_item_4_Template, 4, 16, "dr-dropdown-item", 3);
+            i0.ɵɵtemplate(4, DrDropdownComponent_dr_dropdown_item_4_Template, 4, 18, "dr-dropdown-item", 3);
             i0.ɵɵpipe(5, "drDropdownItemShowPipe");
             i0.ɵɵelementEnd()();
         } if (rf & 2) {
@@ -10370,7 +10529,7 @@ __decorate([
 ], DrDropdownComponent.prototype, "onMouseleave", null);
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DrDropdownComponent, [{
         type: Component,
-        args: [{ selector: 'dr-dropdown', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div #menuContainer [class]=\"containerClass\" class=\"dr-dropdown\">\n    <div class=\"dr-dropdown__container\" (mouseenter)=\"onMouseenter()\" (mouseleave)=\"onMouseleave()\" tabindex=\"-1\" role=\"listbox\">\n        <ng-content select=\"dr-dropdown-item\"></ng-content>\n\n        <dr-dropdown-item\n            *ngFor=\"let act of list | drDropdownItemShowPipe; let index = index\"\n            (mousedown)=\"action(act)\"\n            [drTooltip]=\"tooltipToShow(act)\"\n            [drTooltipPosition]=\"'left'\"\n            [drTooltipOptions]=\"{ withoutArrow: true }\"\n            [drTooltipClass]=\"'dr-dropdown__tooltip'\"\n            [drDropdown]=\"hasChildren(act) && act.children\"\n            [drDropdownClass]=\"act.childOptions?.class\"\n            [drDropdownInHover]=\"true\"\n            [drDropdownPosition]=\"act.childOptions?.position\"\n            drDropdownChild\n            [disabled]=\"disabled(act)\"\n            [selected]=\"selected(act)\"\n            [divider]=\"act.separateLine\"\n            [attr.data-analytics]=\"getDataAnalyticsTag(act, index)\"\n            tabindex=\"0\">\n            <ng-container dropdownItemContent *ngIf=\"!act.templateRef\">\n                <i *ngIf=\"act.icon\" [class]=\"act.icon\" class=\"dr-dropdown__icon\"></i>\n                <span class=\"dr-dropdown__text\">{{ act.title }}</span>\n            </ng-container>\n\n            <ng-container dropdownItemActions *ngIf=\"!act.templateRef\">\n                <i\n                    *ngFor=\"let actionIcon of act.actionIcons\"\n                    [attr.data-analytics]=\"getDataAnalyticsTag(actionIcon, index)\"\n                    [class]=\"actionIcon.icon\"\n                    [class.showOnHover]=\"actionIcon.showOnHover\"\n                    (mousedown)=\"onActionIconClick($event, actionIcon, act.data)\"></i>\n                <i *ngIf=\"hasChildren(act)\" class=\"dr-icon-arrow-right\"></i>\n            </ng-container>\n\n            <ng-container\n                *ngIf=\"act.templateRef\"\n                dropdownItemContent\n                [ngTemplateOutlet]=\"act.templateRef\"\n                [ngTemplateOutletContext]=\"{ $implicit: act }\">\n            </ng-container>\n        </dr-dropdown-item>\n    </div>\n</div>\n", styles: ["::ng-deep .dr-dropdown__item .dr-dropdown{visibility:hidden;transition-delay:.2s}::ng-deep .dr-dropdown__item:hover>*>.dr-dropdown{visibility:visible;transition-delay:0s}::ng-deep .dr-dropdown__tooltip>.default-content{max-width:300px;white-space:normal!important}.dr-dropdown{width:auto}.dr-dropdown__text{overflow:hidden;text-overflow:ellipsis;flex:1}.dr-dropdown__container{display:flex;flex-direction:column;background:#fff;padding:8px 0;overflow-y:auto;max-height:60vh;max-width:300px}.dr-dropdown__icon{margin-right:8px}.dr-dropdown i:not(:first-child):hover{color:#4646ce}.dr-dropdown dr-dropdown-item:hover .showOnHover{visibility:visible}.dr-dropdown .showOnHover{visibility:hidden}\n"] }]
+        args: [{ selector: 'dr-dropdown', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div #menuContainer [class]=\"containerClass\" class=\"dr-dropdown\">\n    <div class=\"dr-dropdown__container\" (mouseenter)=\"onMouseenter()\" (mouseleave)=\"onMouseleave()\" tabindex=\"-1\" role=\"listbox\">\n        <ng-content select=\"dr-dropdown-item\"></ng-content>\n\n        <dr-dropdown-item\n            *ngFor=\"let act of list | drDropdownItemShowPipe; let index = index\"\n            (mousedown)=\"action(act)\"\n            [drTooltip]=\"tooltipToShow(act)\"\n            [drTooltipPosition]=\"getTooltipPosition(act)\"\n            [drTooltipOptions]=\"getTooltipOptions(act)\"\n            [drTooltipTheme]=\"getTooltipTheme(act)\"\n            [drTooltipMousleaveTimeout]=\"getTooltipMousleaveTimeout(act)\"\n            [drTooltipMouseEnterTimeout]=\"getTooltipMouseEnterTimeout(act)\"\n            [drTooltipClass]=\"'dr-dropdown__tooltip'\"\n            [drDropdown]=\"hasChildren(act) && act.children\"\n            [drDropdownClass]=\"act.childOptions?.class\"\n            [drDropdownInHover]=\"true\"\n            [drDropdownPosition]=\"act.childOptions?.position\"\n            drDropdownChild\n            [disabled]=\"disabled(act)\"\n            [selected]=\"selected(act)\"\n            [divider]=\"act.separateLine\"\n            [attr.data-analytics]=\"getDataAnalyticsTag(act, index)\"\n            tabindex=\"0\">\n            <ng-container dropdownItemContent *ngIf=\"!act.templateRef\">\n                <i *ngIf=\"act.icon\" [class]=\"act.icon\" class=\"dr-dropdown__icon\"></i>\n                <span class=\"dr-dropdown__text\">{{ act.title }}</span>\n            </ng-container>\n\n            <ng-container dropdownItemActions *ngIf=\"!act.templateRef\">\n                <i\n                    *ngFor=\"let actionIcon of act.actionIcons\"\n                    [attr.data-analytics]=\"getDataAnalyticsTag(actionIcon, index)\"\n                    [class]=\"actionIcon.icon\"\n                    [class.showOnHover]=\"actionIcon.showOnHover\"\n                    (mousedown)=\"onActionIconClick($event, actionIcon, act.data)\"></i>\n                <i *ngIf=\"hasChildren(act)\" class=\"dr-icon-arrow-right\"></i>\n            </ng-container>\n\n            <ng-container\n                *ngIf=\"act.templateRef\"\n                dropdownItemContent\n                [ngTemplateOutlet]=\"act.templateRef\"\n                [ngTemplateOutletContext]=\"{ $implicit: act }\">\n            </ng-container>\n        </dr-dropdown-item>\n    </div>\n</div>\n", styles: ["::ng-deep .dr-dropdown__item .dr-dropdown{visibility:hidden;transition-delay:.2s}::ng-deep .dr-dropdown__item:hover>*>.dr-dropdown{visibility:visible;transition-delay:0s}::ng-deep .dr-dropdown__tooltip>.default-content{max-width:300px;white-space:normal!important}.dr-dropdown{width:auto}.dr-dropdown__text{overflow:hidden;text-overflow:ellipsis;flex:1}.dr-dropdown__container{display:flex;flex-direction:column;background:#fff;padding:8px 0;overflow-y:auto;max-height:60vh;max-width:300px}.dr-dropdown__icon{margin-right:8px}.dr-dropdown i:not(:first-child):hover{color:#4646ce}.dr-dropdown dr-dropdown-item:hover .showOnHover{visibility:visible}.dr-dropdown .showOnHover{visibility:hidden}\n"] }]
     }], function () { return []; }, { menuContainer: [{
             type: ViewChild,
             args: ['menuContainer', { static: true }]