@datarailsshared/datarailsshared 1.5.275 → 1.5.277

package/esm2022/lib/dr-chat/chat.component.mjs

@@ -1,4 +1,4 @@
-import { Component, Input, ViewChild, ElementRef, ContentChildren, QueryList, ContentChild, ChangeDetectorRef, Output, EventEmitter, } from '@angular/core';
+import { Component, Input, ViewChild, ElementRef, ContentChildren, QueryList, ContentChild, ChangeDetectorRef, Output, EventEmitter, TemplateRef, } from '@angular/core';
 import { DrChatFormComponent } from './dr-chat-form/chat-form.component';
 import { DrChatMessageComponent } from './dr-chat-message/chat-message.component';
 import { DrChatCustomMessageService } from './dr-chat-message/dr-chat-message-custom/chat-custom-message.service';
@@ -7,9 +7,7 @@ import { takeUntil } from 'rxjs/operators';
 import { DrChatSuggestionsComponent } from './dr-chat-suggestions/chat-suggestions.component';
 import * as i0 from "@angular/core";
 import * as i1 from "@angular/common";
-import * as i2 from "../dr-inputs/button/button.component";
-import * as i3 from "../dr-tooltip/dr-tooltip.directive";
-import * as i4 from "./dr-chat-suggestions/chat-suggestions.component";
+import * as i2 from "./dr-chat-suggestions/chat-suggestions.component";
 export class DrChatComponent {
     set contentUpdateSubject(value) {
         if (value) {
@@ -18,7 +16,6 @@ export class DrChatComponent {
             });
         }
     }
-    ;
     /**
      * Scroll chat to the bottom of the list when a new message arrives
      */
@@ -29,13 +26,11 @@ export class DrChatComponent {
         this._scrollBottom = !!value;
     }
     get messagesContainerWithScroll() {
-        return this.messagesContainer && this.messagesContainer.nativeElement.scrollHeight > this.messagesContainer.nativeElement.offsetHeight;
+        return (this.messagesContainer && this.messagesContainer.nativeElement.scrollHeight > this.messagesContainer.nativeElement.offsetHeight);
     }
-    ;
     constructor(cdr) {
         this.cdr = cdr;
         this.destroy$ = new Subject();
-        this.showClearButton = true;
         this.noMessagesPlaceholder = 'No messages yet.';
         this._scrollBottom = true;
         this.suggestions = [];
@@ -45,8 +40,6 @@ export class DrChatComponent {
          * @type {boolean}
          */
         this.waitForReply = false;
-        this.clear = new EventEmitter();
-        this.close = new EventEmitter();
         this.suggestionSelect = new EventEmitter();
     }
     ngAfterViewInit() {
@@ -79,8 +72,7 @@ export class DrChatComponent {
         this.destroy$.next();
         this.destroy$.complete();
     }
-    onClearClick($event) {
-        this.clear.emit($event);
+    clearHiddenSuggestions() {
         if (this._chatSuggestions) {
             this._chatSuggestions.clearHidden();
         }
@@ -91,19 +83,13 @@ export class DrChatComponent {
         }
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DrChatComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DrChatComponent, selector: "dr-chat", inputs: { fullScreen: "fullScreen", title: "title", subtitle: "subtitle", showClearButton: "showClearButton", noMessagesPlaceholder: "noMessagesPlaceholder", contentUpdateSubject: "contentUpdateSubject", scrollBottom: "scrollBottom", suggestions: "suggestions", reopen: "reopen", waitForReply: "waitForReply" }, outputs: { clear: "clear", close: "close", suggestionSelect: "suggestionSelect" }, providers: [DrChatCustomMessageService], queries: [{ propertyName: "chatForm", first: true, predicate: DrChatFormComponent, descendants: true }, { propertyName: "messages", predicate: DrChatMessageComponent }], viewQueries: [{ propertyName: "messagesContainer", first: true, predicate: ["messagesContainer"], descendants: true }, { propertyName: "_chatSuggestions", first: true, predicate: DrChatSuggestionsComponent, descendants: true }], ngImport: i0, template: "<div class=\"chat\" [class.chat--in-full-screen]=\"fullScreen\">\n\n    <div class=\"chat__sticky-top\">\n        <div class=\"chat__header\">\n            <div class=\"chat__header__logo\"></div>\n\n            <div class=\"chat__header__text\">\n                <div class=\"chat__header__text__title\">{{ title }}</div>\n                <div *ngIf=\"subtitle\" class=\"chat__header__text__subtitle\">{{ subtitle }}</div>\n            </div>\n\n            <dr-button *ngIf=\"showClearButton\"\n                       (click)=\"onClearClick($event)\"\n                       theme=\"icon\"\n                       icon=\"dr-icon-clear\"\n                       class=\"ml-auto\"\n                       drTooltip=\"Clear chat\">\n            </dr-button>\n\n            <dr-button *ngIf=\"!fullScreen\"\n                       (click)=\"close.emit($event)\"\n                       theme=\"icon\"\n                       icon=\"dr-icon-exit\"\n                       class=\"ml-4\"\n                       drTooltip=\"Close\">\n            </dr-button>\n        </div>\n        <div class=\"chat__alert\">\n            <ng-content select=\"dr-chat-alert\"></ng-content>\n        </div>\n    </div>\n\n    <div *ngIf=\"!messages?.length\" class=\"chat__empty-state\">\n        <span class=\"chat__empty-state__text\">{{ noMessagesPlaceholder }}</span>\n    </div>\n\n    <div *ngIf=\"messages?.length\" class=\"chat__messages\">\n        <div #messagesContainer class=\"chat__messages__container\"\n             [class.chat__messages__container--scroll]=\"messagesContainerWithScroll\">\n            <ng-content select=\"dr-chat-message\"></ng-content>\n        </div>\n    </div>\n\n    <dr-chat-suggestions *ngIf=\"suggestions?.length\"\n                         [values]=\"suggestions\"\n                         [fullScreen]=\"fullScreen\"\n                         [waitForReply]=\"waitForReply\"\n                         class=\"chat__suggestions\"\n                         [class.chat__suggestions--full-height]=\"fullScreen && !messages?.length\"\n                         [buttonMode]=\"!!messages?.length\"\n                         (suggestionSelect)=\"suggestionSelect.emit($event)\">\n    </dr-chat-suggestions>\n\n    <div class=\"form\">\n        <ng-content select=\"dr-chat-form\"></ng-content>\n    </div>\n</div>\n", styles: [":host{height:100%;width:100%;display:flex;flex-direction:column}.chat{position:relative;display:flex;flex-grow:1;flex-direction:column;height:100%;background-color:#fff;color:#4e566c;font-family:Poppins,sans-serif;font-size:14px;font-weight:400;line-height:22px}.chat__sticky-top{display:flex;flex-direction:column;box-shadow:0 1px 3px #0003;z-index:1}.chat__sticky-top .chat__header{display:flex;align-items:center;background-color:#f2f2ff;color:#25258c;padding:11px 22px 10px 15px;font-weight:400;font-size:20px;line-height:28px}.chat__sticky-top .chat__header__text{display:flex;flex-direction:column;flex-grow:1}.chat__sticky-top .chat__header__text__title{display:flex;align-items:center}.chat__sticky-top .chat__header__text__title:after{content:\"BETA\";display:inline-flex;padding:2px 6px;background:#7b61ff;color:#fff;font-weight:600;font-size:10px;line-height:14px;border-radius:4px;margin-left:12px;font-family:Nunito Sans,sans-serif}.chat__sticky-top .chat__header__text__subtitle{font-size:14px;line-height:22px}.chat__sticky-top .chat__header dr-button::ng-deep button:not(:hover){color:#25258c}.chat__empty-state{display:flex;justify-content:center}.chat__empty-state__text{padding:20px 0;font-family:Poppins,sans-serif;font-size:20px;font-weight:300;line-height:30px;text-align:center;max-width:440px;color:#4646ce}.chat__messages{display:flex;flex-grow:1;overflow-x:hidden;overflow-y:auto;height:100%;width:100%}.chat__messages__container{overflow-y:auto;overflow-x:hidden;display:flex;flex-shrink:0;flex-direction:column;width:100%;padding-bottom:1px}.chat__messages__container--scroll::ng-deep dr-chat-message{padding-right:16px}.chat__suggestions--full-height{flex-grow:1;height:1px;overflow:auto}.chat--in-full-screen .chat__header{padding-left:48px;padding-right:48px}.chat--in-full-screen .chat__empty-state__text{padding:77px 0;font-size:28px;line-height:46px;max-width:570px}.chat--in-full-screen .chat__messages::ng-deep dr-chat-message{justify-content:center}.chat--in-full-screen .chat__messages::ng-deep .message{max-width:919px}.chat--in-full-screen .chat__suggestions::ng-deep .chat-suggestions__items{padding-left:0;padding-right:0}.chat--in-full-screen .chat__suggestions::ng-deep .chat-suggestions__items__item{margin:0 0 26px;height:80px;width:310px;font-size:16px}.chat--in-full-screen .chat__suggestions::ng-deep .chat-suggestions__container{padding:0}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.DrButtonComponent, selector: "dr-button", inputs: ["theme", "icon", "iconColor", "iconSize", "iconAfter", "iconAfterColor", "iconAfterSize", "disabled", "isLoading", "isActive"] }, { kind: "directive", type: i3.DrTooltipDirective, selector: "[drTooltip]", inputs: ["drTooltip", "drTooltipContext", "drTooltipPosition", "drTooltipClass", "drTooltipTheme", "drTooltipMousleaveTimeout", "drTooltipOptions", "drTooltipShow"] }, { kind: "component", type: i4.DrChatSuggestionsComponent, selector: "dr-chat-suggestions", inputs: ["values", "fullScreen", "buttonMode", "waitForReply"], outputs: ["suggestionSelect"] }] }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DrChatComponent, selector: "dr-chat", inputs: { fullScreen: "fullScreen", noMessagesPlaceholder: "noMessagesPlaceholder", contentUpdateSubject: "contentUpdateSubject", scrollBottom: "scrollBottom", suggestions: "suggestions", reopen: "reopen", waitForReply: "waitForReply" }, outputs: { suggestionSelect: "suggestionSelect" }, providers: [DrChatCustomMessageService], queries: [{ propertyName: "chatForm", first: true, predicate: DrChatFormComponent, descendants: true }, { propertyName: "chatHeader", first: true, predicate: ["drChatHeader"], descendants: true }, { propertyName: "messages", predicate: DrChatMessageComponent }], viewQueries: [{ propertyName: "messagesContainer", first: true, predicate: ["messagesContainer"], descendants: true }, { propertyName: "_chatSuggestions", first: true, predicate: DrChatSuggestionsComponent, descendants: true }], ngImport: i0, template: "<div class=\"chat\" [class.chat--in-full-screen]=\"fullScreen\">\n    <div class=\"chat__sticky-top\">\n        <ng-container *ngIf=\"chatHeader\" [ngTemplateOutlet]=\"chatHeader\"></ng-container>\n\n        <div class=\"chat__alert\">\n            <ng-content select=\"dr-chat-alert\"></ng-content>\n        </div>\n    </div>\n\n    <div *ngIf=\"!messages?.length\" class=\"chat__empty-state\">\n        <span class=\"chat__empty-state__text\">{{ noMessagesPlaceholder }}</span>\n    </div>\n\n    <div *ngIf=\"messages?.length\" class=\"chat__messages\">\n        <div #messagesContainer class=\"chat__messages__container\"\n             [class.chat__messages__container--scroll]=\"messagesContainerWithScroll\">\n            <ng-content select=\"dr-chat-message\"></ng-content>\n        </div>\n    </div>\n\n    <dr-chat-suggestions *ngIf=\"suggestions?.length\"\n                         [values]=\"suggestions\"\n                         [fullScreen]=\"fullScreen\"\n                         [waitForReply]=\"waitForReply\"\n                         class=\"chat__suggestions\"\n                         [class.chat__suggestions--full-height]=\"fullScreen && !messages?.length\"\n                         [buttonMode]=\"!!messages?.length\"\n                         (suggestionSelect)=\"suggestionSelect.emit($event)\">\n    </dr-chat-suggestions>\n\n    <div class=\"form\">\n        <ng-content select=\"dr-chat-form\"></ng-content>\n    </div>\n</div>\n", styles: [":host{height:100%;width:100%;display:flex;flex-direction:column}.chat{position:relative;display:flex;flex-grow:1;flex-direction:column;height:100%;background-color:#fff;color:#4e566c;font-family:Poppins,sans-serif;font-size:14px;font-weight:400;line-height:22px}.chat__sticky-top{display:flex;flex-direction:column;box-shadow:0 1px 3px #0003;z-index:1}.chat__empty-state{display:flex;justify-content:center}.chat__empty-state__text{padding:20px 0;font-family:Poppins,sans-serif;font-size:20px;font-weight:300;line-height:30px;text-align:center;max-width:440px;color:#4646ce}.chat__messages{display:flex;flex-grow:1;overflow-x:hidden;overflow-y:auto;height:100%;width:100%}.chat__messages__container{overflow-y:auto;overflow-x:hidden;display:flex;flex-shrink:0;flex-direction:column;width:100%;padding-bottom:1px}.chat__messages__container--scroll::ng-deep dr-chat-message{padding-right:16px}.chat__suggestions{flex:1}.chat__suggestions--full-height{flex-grow:1;height:1px;overflow:auto}.chat--in-full-screen .chat__header{padding-left:48px;padding-right:48px}.chat--in-full-screen .chat__empty-state__text{padding:77px 0;font-size:28px;line-height:46px;max-width:570px}.chat--in-full-screen .chat__messages::ng-deep dr-chat-message{justify-content:center}.chat--in-full-screen .chat__messages::ng-deep .message{max-width:919px}.chat--in-full-screen .chat__suggestions::ng-deep .chat-suggestions__items{padding-left:0;padding-right:0}.chat--in-full-screen .chat__suggestions::ng-deep .chat-suggestions__items__item{margin:0 0 26px;height:80px;width:310px;font-size:16px}.chat--in-full-screen .chat__suggestions::ng-deep .chat-suggestions__container{padding:0}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.DrChatSuggestionsComponent, selector: "dr-chat-suggestions", inputs: ["values", "fullScreen", "buttonMode", "waitForReply"], outputs: ["suggestionSelect"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DrChatComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'dr-chat', providers: [DrChatCustomMessageService], template: "<div class=\"chat\" [class.chat--in-full-screen]=\"fullScreen\">\n\n    <div class=\"chat__sticky-top\">\n        <div class=\"chat__header\">\n            <div class=\"chat__header__logo\"></div>\n\n            <div class=\"chat__header__text\">\n                <div class=\"chat__header__text__title\">{{ title }}</div>\n                <div *ngIf=\"subtitle\" class=\"chat__header__text__subtitle\">{{ subtitle }}</div>\n            </div>\n\n            <dr-button *ngIf=\"showClearButton\"\n                       (click)=\"onClearClick($event)\"\n                       theme=\"icon\"\n                       icon=\"dr-icon-clear\"\n                       class=\"ml-auto\"\n                       drTooltip=\"Clear chat\">\n            </dr-button>\n\n            <dr-button *ngIf=\"!fullScreen\"\n                       (click)=\"close.emit($event)\"\n                       theme=\"icon\"\n                       icon=\"dr-icon-exit\"\n                       class=\"ml-4\"\n                       drTooltip=\"Close\">\n            </dr-button>\n        </div>\n        <div class=\"chat__alert\">\n            <ng-content select=\"dr-chat-alert\"></ng-content>\n        </div>\n    </div>\n\n    <div *ngIf=\"!messages?.length\" class=\"chat__empty-state\">\n        <span class=\"chat__empty-state__text\">{{ noMessagesPlaceholder }}</span>\n    </div>\n\n    <div *ngIf=\"messages?.length\" class=\"chat__messages\">\n        <div #messagesContainer class=\"chat__messages__container\"\n             [class.chat__messages__container--scroll]=\"messagesContainerWithScroll\">\n            <ng-content select=\"dr-chat-message\"></ng-content>\n        </div>\n    </div>\n\n    <dr-chat-suggestions *ngIf=\"suggestions?.length\"\n                         [values]=\"suggestions\"\n                         [fullScreen]=\"fullScreen\"\n                         [waitForReply]=\"waitForReply\"\n                         class=\"chat__suggestions\"\n                         [class.chat__suggestions--full-height]=\"fullScreen && !messages?.length\"\n                         [buttonMode]=\"!!messages?.length\"\n                         (suggestionSelect)=\"suggestionSelect.emit($event)\">\n    </dr-chat-suggestions>\n\n    <div class=\"form\">\n        <ng-content select=\"dr-chat-form\"></ng-content>\n    </div>\n</div>\n", styles: [":host{height:100%;width:100%;display:flex;flex-direction:column}.chat{position:relative;display:flex;flex-grow:1;flex-direction:column;height:100%;background-color:#fff;color:#4e566c;font-family:Poppins,sans-serif;font-size:14px;font-weight:400;line-height:22px}.chat__sticky-top{display:flex;flex-direction:column;box-shadow:0 1px 3px #0003;z-index:1}.chat__sticky-top .chat__header{display:flex;align-items:center;background-color:#f2f2ff;color:#25258c;padding:11px 22px 10px 15px;font-weight:400;font-size:20px;line-height:28px}.chat__sticky-top .chat__header__text{display:flex;flex-direction:column;flex-grow:1}.chat__sticky-top .chat__header__text__title{display:flex;align-items:center}.chat__sticky-top .chat__header__text__title:after{content:\"BETA\";display:inline-flex;padding:2px 6px;background:#7b61ff;color:#fff;font-weight:600;font-size:10px;line-height:14px;border-radius:4px;margin-left:12px;font-family:Nunito Sans,sans-serif}.chat__sticky-top .chat__header__text__subtitle{font-size:14px;line-height:22px}.chat__sticky-top .chat__header dr-button::ng-deep button:not(:hover){color:#25258c}.chat__empty-state{display:flex;justify-content:center}.chat__empty-state__text{padding:20px 0;font-family:Poppins,sans-serif;font-size:20px;font-weight:300;line-height:30px;text-align:center;max-width:440px;color:#4646ce}.chat__messages{display:flex;flex-grow:1;overflow-x:hidden;overflow-y:auto;height:100%;width:100%}.chat__messages__container{overflow-y:auto;overflow-x:hidden;display:flex;flex-shrink:0;flex-direction:column;width:100%;padding-bottom:1px}.chat__messages__container--scroll::ng-deep dr-chat-message{padding-right:16px}.chat__suggestions--full-height{flex-grow:1;height:1px;overflow:auto}.chat--in-full-screen .chat__header{padding-left:48px;padding-right:48px}.chat--in-full-screen .chat__empty-state__text{padding:77px 0;font-size:28px;line-height:46px;max-width:570px}.chat--in-full-screen .chat__messages::ng-deep dr-chat-message{justify-content:center}.chat--in-full-screen .chat__messages::ng-deep .message{max-width:919px}.chat--in-full-screen .chat__suggestions::ng-deep .chat-suggestions__items{padding-left:0;padding-right:0}.chat--in-full-screen .chat__suggestions::ng-deep .chat-suggestions__items__item{margin:0 0 26px;height:80px;width:310px;font-size:16px}.chat--in-full-screen .chat__suggestions::ng-deep .chat-suggestions__container{padding:0}\n"] }]
+            args: [{ selector: 'dr-chat', providers: [DrChatCustomMessageService], template: "<div class=\"chat\" [class.chat--in-full-screen]=\"fullScreen\">\n    <div class=\"chat__sticky-top\">\n        <ng-container *ngIf=\"chatHeader\" [ngTemplateOutlet]=\"chatHeader\"></ng-container>\n\n        <div class=\"chat__alert\">\n            <ng-content select=\"dr-chat-alert\"></ng-content>\n        </div>\n    </div>\n\n    <div *ngIf=\"!messages?.length\" class=\"chat__empty-state\">\n        <span class=\"chat__empty-state__text\">{{ noMessagesPlaceholder }}</span>\n    </div>\n\n    <div *ngIf=\"messages?.length\" class=\"chat__messages\">\n        <div #messagesContainer class=\"chat__messages__container\"\n             [class.chat__messages__container--scroll]=\"messagesContainerWithScroll\">\n            <ng-content select=\"dr-chat-message\"></ng-content>\n        </div>\n    </div>\n\n    <dr-chat-suggestions *ngIf=\"suggestions?.length\"\n                         [values]=\"suggestions\"\n                         [fullScreen]=\"fullScreen\"\n                         [waitForReply]=\"waitForReply\"\n                         class=\"chat__suggestions\"\n                         [class.chat__suggestions--full-height]=\"fullScreen && !messages?.length\"\n                         [buttonMode]=\"!!messages?.length\"\n                         (suggestionSelect)=\"suggestionSelect.emit($event)\">\n    </dr-chat-suggestions>\n\n    <div class=\"form\">\n        <ng-content select=\"dr-chat-form\"></ng-content>\n    </div>\n</div>\n", styles: [":host{height:100%;width:100%;display:flex;flex-direction:column}.chat{position:relative;display:flex;flex-grow:1;flex-direction:column;height:100%;background-color:#fff;color:#4e566c;font-family:Poppins,sans-serif;font-size:14px;font-weight:400;line-height:22px}.chat__sticky-top{display:flex;flex-direction:column;box-shadow:0 1px 3px #0003;z-index:1}.chat__empty-state{display:flex;justify-content:center}.chat__empty-state__text{padding:20px 0;font-family:Poppins,sans-serif;font-size:20px;font-weight:300;line-height:30px;text-align:center;max-width:440px;color:#4646ce}.chat__messages{display:flex;flex-grow:1;overflow-x:hidden;overflow-y:auto;height:100%;width:100%}.chat__messages__container{overflow-y:auto;overflow-x:hidden;display:flex;flex-shrink:0;flex-direction:column;width:100%;padding-bottom:1px}.chat__messages__container--scroll::ng-deep dr-chat-message{padding-right:16px}.chat__suggestions{flex:1}.chat__suggestions--full-height{flex-grow:1;height:1px;overflow:auto}.chat--in-full-screen .chat__header{padding-left:48px;padding-right:48px}.chat--in-full-screen .chat__empty-state__text{padding:77px 0;font-size:28px;line-height:46px;max-width:570px}.chat--in-full-screen .chat__messages::ng-deep dr-chat-message{justify-content:center}.chat--in-full-screen .chat__messages::ng-deep .message{max-width:919px}.chat--in-full-screen .chat__suggestions::ng-deep .chat-suggestions__items{padding-left:0;padding-right:0}.chat--in-full-screen .chat__suggestions::ng-deep .chat-suggestions__items__item{margin:0 0 26px;height:80px;width:310px;font-size:16px}.chat--in-full-screen .chat__suggestions::ng-deep .chat-suggestions__container{padding:0}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { fullScreen: [{
                 type: Input
-            }], title: [{
-                type: Input
-            }], subtitle: [{
-                type: Input
-            }], showClearButton: [{
-                type: Input
             }], noMessagesPlaceholder: [{
                 type: Input
             }], contentUpdateSubject: [{
@@ -125,14 +111,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }], chatForm: [{
                 type: ContentChild,
                 args: [DrChatFormComponent]
-            }], clear: [{
-                type: Output
-            }], close: [{
-                type: Output
+            }], chatHeader: [{
+                type: ContentChild,
+                args: ['drChatHeader']
             }], suggestionSelect: [{
                 type: Output
             }], _chatSuggestions: [{
                 type: ViewChild,
                 args: [DrChatSuggestionsComponent]
             }] } });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY2hhdC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9kYXRhcmFpbHNzaGFyZWQvc3JjL2xpYi9kci1jaGF0L2NoYXQuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvZGF0YXJhaWxzc2hhcmVkL3NyYy9saWIvZHItY2hhdC9jaGF0LmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFDSCxTQUFTLEVBQ1QsS0FBSyxFQUNMLFNBQVMsRUFDVCxVQUFVLEVBQ1YsZUFBZSxFQUNmLFNBQVMsRUFFVCxZQUFZLEVBQ1osaUJBQWlCLEVBQ2pCLE1BQU0sRUFDTixZQUFZLEdBRWYsTUFBTSxlQUFlLENBQUM7QUFFdkIsT0FBTyxFQUFFLG1CQUFtQixFQUFFLE1BQU0sb0NBQW9DLENBQUM7QUFDekUsT0FBTyxFQUFFLHNCQUFzQixFQUFFLE1BQU0sMENBQTBDLENBQUM7QUFDbEYsT0FBTyxFQUFFLDBCQUEwQixFQUFFLE1BQU0sc0VBQXNFLENBQUM7QUFDbEgsT0FBTyxFQUFFLE9BQU8sRUFBRSxNQUFNLE1BQU0sQ0FBQztBQUMvQixPQUFPLEVBQUUsU0FBUyxFQUFFLE1BQU0sZ0JBQWdCLENBQUM7QUFDM0MsT0FBTyxFQUFFLDBCQUEwQixFQUFFLE1BQU0sa0RBQWtELENBQUM7Ozs7OztBQVE5RixNQUFNLE9BQU8sZUFBZTtJQVV4QixJQUFhLG9CQUFvQixDQUFDLEtBQW1CO1FBQ2pELElBQUksS0FBSyxFQUFFO1lBQ1AsS0FBSyxDQUFDLElBQUksQ0FBQyxTQUFTLENBQUMsSUFBSSxDQUFDLFFBQVEsQ0FBQyxDQUFDLENBQUMsU0FBUyxDQUFDLEdBQUcsRUFBRTtnQkFDaEQsSUFBSSxDQUFDLFVBQVUsRUFBRSxDQUFDO1lBQ3RCLENBQUMsQ0FBQyxDQUFDO1NBQ047SUFDTCxDQUFDO0lBQUEsQ0FBQztJQUVGOztPQUVHO0lBQ0gsSUFDSSxZQUFZO1FBQ1osT0FBTyxJQUFJLENBQUMsYUFBYSxDQUFDO0lBQzlCLENBQUM7SUFFRCxJQUFJLFlBQVksQ0FBQyxLQUFjO1FBQzNCLElBQUksQ0FBQyxhQUFhLEdBQUcsQ0FBQyxDQUFDLEtBQUssQ0FBQztJQUNqQyxDQUFDO0lBc0JELElBQVcsMkJBQTJCO1FBQ2xDLE9BQU8sSUFBSSxDQUFDLGlCQUFpQixJQUFJLElBQUksQ0FBQyxpQkFBaUIsQ0FBQyxhQUFhLENBQUMsWUFBWSxHQUFHLElBQUksQ0FBQyxpQkFBaUIsQ0FBQyxhQUFhLENBQUMsWUFBWSxDQUFDO0lBQzNJLENBQUM7SUFBQSxDQUFDO0lBRUYsWUFBb0IsR0FBc0I7UUFBdEIsUUFBRyxHQUFILEdBQUcsQ0FBbUI7UUFwRGxDLGFBQVEsR0FBRyxJQUFJLE9BQU8sRUFBUSxDQUFDO1FBSzlCLG9CQUFlLEdBQUcsSUFBSSxDQUFDO1FBQ3ZCLDBCQUFxQixHQUFHLGtCQUFrQixDQUFDO1FBc0IxQyxrQkFBYSxHQUFHLElBQUksQ0FBQztRQUV0QixnQkFBVyxHQUFhLEVBQUUsQ0FBQztRQUdwQzs7OztXQUlHO1FBQ00saUJBQVksR0FBRyxLQUFLLENBQUM7UUFLcEIsVUFBSyxHQUFzQixJQUFJLFlBQVksRUFBTyxDQUFDO1FBQ25ELFVBQUssR0FBc0IsSUFBSSxZQUFZLEVBQU8sQ0FBQztRQUNuRCxxQkFBZ0IsR0FBeUIsSUFBSSxZQUFZLEVBQVUsQ0FBQztJQVE5RSxDQUFDO0lBRUQsZUFBZTtRQUNYLElBQUksQ0FBQyxRQUFRLENBQUMsT0FBTyxDQUFDLFNBQVMsQ0FBQyxRQUFRLENBQUMsRUFBRTtZQUN2QyxJQUFJLENBQUMsUUFBUSxHQUFHLFFBQVEsQ0FBQztZQUN6QixJQUFJLENBQUMsVUFBVSxFQUFFLENBQUM7UUFDdEIsQ0FBQyxDQUFDLENBQUM7UUFFSCxJQUFJLENBQUMsVUFBVSxFQUFFLENBQUM7SUFDdEIsQ0FBQztJQUVELFVBQVU7UUFDTixJQUFJLElBQUksQ0FBQyxZQUFZLEVBQUU7WUFDbkIsSUFBSSxDQUFDLGdCQUFnQixFQUFFLENBQUM7U0FDM0I7SUFDTCxDQUFDO0lBRUQsZ0JBQWdCO1FBQ1IsVUFBVSxDQUFDLEdBQUcsRUFBRTtZQUNaLElBQUksSUFBSSxDQUFDLGlCQUFpQixFQUFFO2dCQUN4QixNQUFNLGVBQWUsR0FBUTtvQkFDekIsR0FBRyxFQUFFLElBQUksQ0FBQyxpQkFBaUIsQ0FBQyxhQUFhLENBQUMsWUFBWTtpQkFDekQsQ0FBQztnQkFFRixJQUFJLENBQUMsSUFBSSxDQUFDLE1BQU0sRUFBRTtvQkFDZCxlQUFlLENBQUMsUUFBUSxHQUFHLFFBQVEsQ0FBQztpQkFDdkM7Z0JBRUQsSUFBSSxDQUFDLGlCQUFpQixDQUFDLGFBQWEsQ0FBQyxRQUFRLENBQUMsZUFBZSxDQUFDLENBQUM7Z0JBQy9ELElBQUksQ0FBQyxHQUFHLENBQUMsWUFBWSxFQUFFLENBQUM7YUFDM0I7UUFDTCxDQUFDLENBQUMsQ0FBQztJQUNYLENBQUM7SUFFRCxXQUFXO1FBQ1AsSUFBSSxDQUFDLFFBQVEsQ0FBQyxJQUFJLEVBQUUsQ0FBQztRQUNyQixJQUFJLENBQUMsUUFBUSxDQUFDLFFBQVEsRUFBRSxDQUFDO0lBQzdCLENBQUM7SUFFRCxZQUFZLENBQUMsTUFBVztRQUNwQixJQUFJLENBQUMsS0FBSyxDQUFDLElBQUksQ0FBQyxNQUFNLENBQUMsQ0FBQztRQUN4QixJQUFJLElBQUksQ0FBQyxnQkFBZ0IsRUFBRTtZQUN2QixJQUFJLENBQUMsZ0JBQWdCLENBQUMsV0FBVyxFQUFFLENBQUM7U0FDdkM7SUFDTCxDQUFDO0lBRUQsZUFBZTtRQUNYLElBQUksSUFBSSxDQUFDLGdCQUFnQixDQUFDLG1CQUFtQixFQUFFO1lBQzNDLElBQUksQ0FBQyxnQkFBZ0IsQ0FBQyxtQkFBbUIsRUFBRSxDQUFDO1NBQy9DO0lBQ0wsQ0FBQztrSUF6R1EsZUFBZTtzSEFBZixlQUFlLDZhQUZiLENBQUMsMEJBQTBCLENBQUMsZ0VBOEN6QixtQkFBbUIsOERBRGhCLHNCQUFzQix3TEFLNUIsMEJBQTBCLGdEQzVFekMsa3lFQXlEQTs7NEZEN0JhLGVBQWU7a0JBTjNCLFNBQVM7K0JBQ0ksU0FBUyxhQUdSLENBQUMsMEJBQTBCLENBQUM7d0dBTTlCLFVBQVU7c0JBQWxCLEtBQUs7Z0JBQ0csS0FBSztzQkFBYixLQUFLO2dCQUNHLFFBQVE7c0JBQWhCLEtBQUs7Z0JBQ0csZUFBZTtzQkFBdkIsS0FBSztnQkFDRyxxQkFBcUI7c0JBQTdCLEtBQUs7Z0JBRU8sb0JBQW9CO3NCQUFoQyxLQUFLO2dCQVlGLFlBQVk7c0JBRGYsS0FBSztnQkFXRyxXQUFXO3NCQUFuQixLQUFLO2dCQUNHLE1BQU07c0JBQWQsS0FBSztnQkFPRyxZQUFZO3NCQUFwQixLQUFLO2dCQUUwQixpQkFBaUI7c0JBQWhELFNBQVM7dUJBQUMsbUJBQW1CO2dCQUNXLFFBQVE7c0JBQWhELGVBQWU7dUJBQUMsc0JBQXNCO2dCQUNKLFFBQVE7c0JBQTFDLFlBQVk7dUJBQUMsbUJBQW1CO2dCQUN2QixLQUFLO3NCQUFkLE1BQU07Z0JBQ0csS0FBSztzQkFBZCxNQUFNO2dCQUNHLGdCQUFnQjtzQkFBekIsTUFBTTtnQkFDZ0MsZ0JBQWdCO3NCQUF0RCxTQUFTO3VCQUFDLDBCQUEwQiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XG4gICAgQ29tcG9uZW50LFxuICAgIElucHV0LFxuICAgIFZpZXdDaGlsZCxcbiAgICBFbGVtZW50UmVmLFxuICAgIENvbnRlbnRDaGlsZHJlbixcbiAgICBRdWVyeUxpc3QsXG4gICAgQWZ0ZXJWaWV3SW5pdCxcbiAgICBDb250ZW50Q2hpbGQsXG4gICAgQ2hhbmdlRGV0ZWN0b3JSZWYsXG4gICAgT3V0cHV0LFxuICAgIEV2ZW50RW1pdHRlcixcbiAgICBPbkRlc3Ryb3ksXG59IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuXG5pbXBvcnQgeyBEckNoYXRGb3JtQ29tcG9uZW50IH0gZnJvbSAnLi9kci1jaGF0LWZvcm0vY2hhdC1mb3JtLmNvbXBvbmVudCc7XG5pbXBvcnQgeyBEckNoYXRNZXNzYWdlQ29tcG9uZW50IH0gZnJvbSAnLi9kci1jaGF0LW1lc3NhZ2UvY2hhdC1tZXNzYWdlLmNvbXBvbmVudCc7XG5pbXBvcnQgeyBEckNoYXRDdXN0b21NZXNzYWdlU2VydmljZSB9IGZyb20gJy4vZHItY2hhdC1tZXNzYWdlL2RyLWNoYXQtbWVzc2FnZS1jdXN0b20vY2hhdC1jdXN0b20tbWVzc2FnZS5zZXJ2aWNlJztcbmltcG9ydCB7IFN1YmplY3QgfSBmcm9tICdyeGpzJztcbmltcG9ydCB7IHRha2VVbnRpbCB9IGZyb20gJ3J4anMvb3BlcmF0b3JzJztcbmltcG9ydCB7IERyQ2hhdFN1Z2dlc3Rpb25zQ29tcG9uZW50IH0gZnJvbSAnLi9kci1jaGF0LXN1Z2dlc3Rpb25zL2NoYXQtc3VnZ2VzdGlvbnMuY29tcG9uZW50JztcblxuQENvbXBvbmVudCh7XG4gICAgc2VsZWN0b3I6ICdkci1jaGF0JyxcbiAgICBzdHlsZVVybHM6IFsnLi9jaGF0LmNvbXBvbmVudC5zY3NzJ10sXG4gICAgdGVtcGxhdGVVcmw6ICdjaGF0LmNvbXBvbmVudC5odG1sJyxcbiAgICBwcm92aWRlcnM6IFtEckNoYXRDdXN0b21NZXNzYWdlU2VydmljZV1cbn0pXG5leHBvcnQgY2xhc3MgRHJDaGF0Q29tcG9uZW50IGltcGxlbWVudHMgQWZ0ZXJWaWV3SW5pdCwgT25EZXN0cm95IHtcblxuICAgIHByaXZhdGUgZGVzdHJveSQgPSBuZXcgU3ViamVjdDx2b2lkPigpO1xuXG4gICAgQElucHV0KCkgZnVsbFNjcmVlbjogYm9vbGVhbjtcbiAgICBASW5wdXQoKSB0aXRsZTogc3RyaW5nO1xuICAgIEBJbnB1dCgpIHN1YnRpdGxlOiBzdHJpbmc7XG4gICAgQElucHV0KCkgc2hvd0NsZWFyQnV0dG9uID0gdHJ1ZTtcbiAgICBASW5wdXQoKSBub01lc3NhZ2VzUGxhY2Vob2xkZXIgPSAnTm8gbWVzc2FnZXMgeWV0Lic7XG5cbiAgICBASW5wdXQoKSBzZXQgY29udGVudFVwZGF0ZVN1YmplY3QodmFsdWU6IFN1YmplY3Q8YW55Pikge1xuICAgICAgICBpZiAodmFsdWUpIHtcbiAgICAgICAgICAgIHZhbHVlLnBpcGUodGFrZVVudGlsKHRoaXMuZGVzdHJveSQpKS5zdWJzY3JpYmUoKCkgPT4ge1xuICAgICAgICAgICAgICAgIHRoaXMudXBkYXRlVmlldygpO1xuICAgICAgICAgICAgfSk7XG4gICAgICAgIH1cbiAgICB9O1xuXG4gICAgLyoqXG4gICAgICogU2Nyb2xsIGNoYXQgdG8gdGhlIGJvdHRvbSBvZiB0aGUgbGlzdCB3aGVuIGEgbmV3IG1lc3NhZ2UgYXJyaXZlc1xuICAgICAqL1xuICAgIEBJbnB1dCgpXG4gICAgZ2V0IHNjcm9sbEJvdHRvbSgpOiBib29sZWFuIHtcbiAgICAgICAgcmV0dXJuIHRoaXMuX3Njcm9sbEJvdHRvbTtcbiAgICB9XG5cbiAgICBzZXQgc2Nyb2xsQm90dG9tKHZhbHVlOiBib29sZWFuKSB7XG4gICAgICAgIHRoaXMuX3Njcm9sbEJvdHRvbSA9ICEhdmFsdWU7XG4gICAgfVxuXG4gICAgcHJvdGVjdGVkIF9zY3JvbGxCb3R0b20gPSB0cnVlO1xuXG4gICAgQElucHV0KCkgc3VnZ2VzdGlvbnM6IHN0cmluZ1tdID0gW107XG4gICAgQElucHV0KCkgcmVvcGVuOiBib29sZWFuO1xuXG4gICAgLyoqXG4gICAgICogUGFyYW1ldGVyIHRvIGNoZWNrIGlzIHNlbmQgbWVzc2FnZSBmdW5jdGlvbiBhdmFpbGFibGVcbiAgICAgKlxuICAgICAqIEB0eXBlIHtib29sZWFufVxuICAgICAqL1xuICAgIEBJbnB1dCgpIHdhaXRGb3JSZXBseSA9IGZhbHNlO1xuXG4gICAgQFZpZXdDaGlsZCgnbWVzc2FnZXNDb250YWluZXInKSBtZXNzYWdlc0NvbnRhaW5lcjogRWxlbWVudFJlZjtcbiAgICBAQ29udGVudENoaWxkcmVuKERyQ2hhdE1lc3NhZ2VDb21wb25lbnQpIG1lc3NhZ2VzOiBRdWVyeUxpc3Q8RHJDaGF0TWVzc2FnZUNvbXBvbmVudD47XG4gICAgQENvbnRlbnRDaGlsZChEckNoYXRGb3JtQ29tcG9uZW50KSBjaGF0Rm9ybTogRHJDaGF0Rm9ybUNvbXBvbmVudDtcbiAgICBAT3V0cHV0KCkgY2xlYXI6IEV2ZW50RW1pdHRlcjxhbnk+ID0gbmV3IEV2ZW50RW1pdHRlcjxhbnk+KCk7XG4gICAgQE91dHB1dCgpIGNsb3NlOiBFdmVudEVtaXR0ZXI8YW55PiA9IG5ldyBFdmVudEVtaXR0ZXI8YW55PigpO1xuICAgIEBPdXRwdXQoKSBzdWdnZXN0aW9uU2VsZWN0OiBFdmVudEVtaXR0ZXI8c3RyaW5nPiA9IG5ldyBFdmVudEVtaXR0ZXI8c3RyaW5nPigpO1xuICAgIEBWaWV3Q2hpbGQoRHJDaGF0U3VnZ2VzdGlvbnNDb21wb25lbnQpIF9jaGF0U3VnZ2VzdGlvbnM6IERyQ2hhdFN1Z2dlc3Rpb25zQ29tcG9uZW50O1xuXG4gICAgcHVibGljIGdldCBtZXNzYWdlc0NvbnRhaW5lcldpdGhTY3JvbGwoKTogYm9vbGVhbiB7XG4gICAgICAgIHJldHVybiB0aGlzLm1lc3NhZ2VzQ29udGFpbmVyICYmIHRoaXMubWVzc2FnZXNDb250YWluZXIubmF0aXZlRWxlbWVudC5zY3JvbGxIZWlnaHQgPiB0aGlzLm1lc3NhZ2VzQ29udGFpbmVyLm5hdGl2ZUVsZW1lbnQub2Zmc2V0SGVpZ2h0O1xuICAgIH07XG5cbiAgICBjb25zdHJ1Y3Rvcihwcml2YXRlIGNkcjogQ2hhbmdlRGV0ZWN0b3JSZWYpIHtcbiAgICB9XG5cbiAgICBuZ0FmdGVyVmlld0luaXQoKSB7XG4gICAgICAgIHRoaXMubWVzc2FnZXMuY2hhbmdlcy5zdWJzY3JpYmUobWVzc2FnZXMgPT4ge1xuICAgICAgICAgICAgdGhpcy5tZXNzYWdlcyA9IG1lc3NhZ2VzO1xuICAgICAgICAgICAgdGhpcy51cGRhdGVWaWV3KCk7XG4gICAgICAgIH0pO1xuXG4gICAgICAgIHRoaXMudXBkYXRlVmlldygpO1xuICAgIH1cblxuICAgIHVwZGF0ZVZpZXcoKSB7XG4gICAgICAgIGlmICh0aGlzLnNjcm9sbEJvdHRvbSkge1xuICAgICAgICAgICAgdGhpcy5zY3JvbGxMaXN0Qm90dG9tKCk7XG4gICAgICAgIH1cbiAgICB9XG5cbiAgICBzY3JvbGxMaXN0Qm90dG9tKCkge1xuICAgICAgICAgICAgc2V0VGltZW91dCgoKSA9PiB7XG4gICAgICAgICAgICAgICAgaWYgKHRoaXMubWVzc2FnZXNDb250YWluZXIpIHtcbiAgICAgICAgICAgICAgICAgICAgY29uc3Qgc2Nyb2xsVG9PcHRpb25zOiBhbnkgPSB7XG4gICAgICAgICAgICAgICAgICAgICAgICB0b3A6IHRoaXMubWVzc2FnZXNDb250YWluZXIubmF0aXZlRWxlbWVudC5zY3JvbGxIZWlnaHQsXG4gICAgICAgICAgICAgICAgICAgIH07XG5cbiAgICAgICAgICAgICAgICAgICAgaWYgKCF0aGlzLnJlb3Blbikge1xuICAgICAgICAgICAgICAgICAgICAgICAgc2Nyb2xsVG9PcHRpb25zLmJlaGF2aW9yID0gJ3Ntb290aCc7XG4gICAgICAgICAgICAgICAgICAgIH1cblxuICAgICAgICAgICAgICAgICAgICB0aGlzLm1lc3NhZ2VzQ29udGFpbmVyLm5hdGl2ZUVsZW1lbnQuc2Nyb2xsVG8oc2Nyb2xsVG9PcHRpb25zKTtcbiAgICAgICAgICAgICAgICAgICAgdGhpcy5jZHIubWFya0ZvckNoZWNrKCk7XG4gICAgICAgICAgICAgICAgfVxuICAgICAgICAgICAgfSk7XG4gICAgfVxuXG4gICAgbmdPbkRlc3Ryb3koKSB7XG4gICAgICAgIHRoaXMuZGVzdHJveSQubmV4dCgpO1xuICAgICAgICB0aGlzLmRlc3Ryb3kkLmNvbXBsZXRlKCk7XG4gICAgfVxuXG4gICAgb25DbGVhckNsaWNrKCRldmVudDogYW55KSB7XG4gICAgICAgIHRoaXMuY2xlYXIuZW1pdCgkZXZlbnQpO1xuICAgICAgICBpZiAodGhpcy5fY2hhdFN1Z2dlc3Rpb25zKSB7XG4gICAgICAgICAgICB0aGlzLl9jaGF0U3VnZ2VzdGlvbnMuY2xlYXJIaWRkZW4oKTtcbiAgICAgICAgfVxuICAgIH1cblxuICAgIGhpZGVTdWdnZXN0aW9ucygpOiB2b2lkIHtcbiAgICAgICAgaWYgKHRoaXMuX2NoYXRTdWdnZXN0aW9ucy5pc1N1Z2dlc3RlZE1lbnVPcGVuKSB7XG4gICAgICAgICAgICB0aGlzLl9jaGF0U3VnZ2VzdGlvbnMudG9nZ2xlU3VnZ2VzdGVkTWVudSgpO1xuICAgICAgICB9XG4gICAgfVxufVxuIiwiPGRpdiBjbGFzcz1cImNoYXRcIiBbY2xhc3MuY2hhdC0taW4tZnVsbC1zY3JlZW5dPVwiZnVsbFNjcmVlblwiPlxuXG4gICAgPGRpdiBjbGFzcz1cImNoYXRfX3N0aWNreS10b3BcIj5cbiAgICAgICAgPGRpdiBjbGFzcz1cImNoYXRfX2hlYWRlclwiPlxuICAgICAgICAgICAgPGRpdiBjbGFzcz1cImNoYXRfX2hlYWRlcl9fbG9nb1wiPjwvZGl2PlxuXG4gICAgICAgICAgICA8ZGl2IGNsYXNzPVwiY2hhdF9faGVhZGVyX190ZXh0XCI+XG4gICAgICAgICAgICAgICAgPGRpdiBjbGFzcz1cImNoYXRfX2hlYWRlcl9fdGV4dF9fdGl0bGVcIj57eyB0aXRsZSB9fTwvZGl2PlxuICAgICAgICAgICAgICAgIDxkaXYgKm5nSWY9XCJzdWJ0aXRsZVwiIGNsYXNzPVwiY2hhdF9faGVhZGVyX190ZXh0X19zdWJ0aXRsZVwiPnt7IHN1YnRpdGxlIH19PC9kaXY+XG4gICAgICAgICAgICA8L2Rpdj5cblxuICAgICAgICAgICAgPGRyLWJ1dHRvbiAqbmdJZj1cInNob3dDbGVhckJ1dHRvblwiXG4gICAgICAgICAgICAgICAgICAgICAgIChjbGljayk9XCJvbkNsZWFyQ2xpY2soJGV2ZW50KVwiXG4gICAgICAgICAgICAgICAgICAgICAgIHRoZW1lPVwiaWNvblwiXG4gICAgICAgICAgICAgICAgICAgICAgIGljb249XCJkci1pY29uLWNsZWFyXCJcbiAgICAgICAgICAgICAgICAgICAgICAgY2xhc3M9XCJtbC1hdXRvXCJcbiAgICAgICAgICAgICAgICAgICAgICAgZHJUb29sdGlwPVwiQ2xlYXIgY2hhdFwiPlxuICAgICAgICAgICAgPC9kci1idXR0b24+XG5cbiAgICAgICAgICAgIDxkci1idXR0b24gKm5nSWY9XCIhZnVsbFNjcmVlblwiXG4gICAgICAgICAgICAgICAgICAgICAgIChjbGljayk9XCJjbG9zZS5lbWl0KCRldmVudClcIlxuICAgICAgICAgICAgICAgICAgICAgICB0aGVtZT1cImljb25cIlxuICAgICAgICAgICAgICAgICAgICAgICBpY29uPVwiZHItaWNvbi1leGl0XCJcbiAgICAgICAgICAgICAgICAgICAgICAgY2xhc3M9XCJtbC00XCJcbiAgICAgICAgICAgICAgICAgICAgICAgZHJUb29sdGlwPVwiQ2xvc2VcIj5cbiAgICAgICAgICAgIDwvZHItYnV0dG9uPlxuICAgICAgICA8L2Rpdj5cbiAgICAgICAgPGRpdiBjbGFzcz1cImNoYXRfX2FsZXJ0XCI+XG4gICAgICAgICAgICA8bmctY29udGVudCBzZWxlY3Q9XCJkci1jaGF0LWFsZXJ0XCI+PC9uZy1jb250ZW50PlxuICAgICAgICA8L2Rpdj5cbiAgICA8L2Rpdj5cblxuICAgIDxkaXYgKm5nSWY9XCIhbWVzc2FnZXM/Lmxlbmd0aFwiIGNsYXNzPVwiY2hhdF9fZW1wdHktc3RhdGVcIj5cbiAgICAgICAgPHNwYW4gY2xhc3M9XCJjaGF0X19lbXB0eS1zdGF0ZV9fdGV4dFwiPnt7IG5vTWVzc2FnZXNQbGFjZWhvbGRlciB9fTwvc3Bhbj5cbiAgICA8L2Rpdj5cblxuICAgIDxkaXYgKm5nSWY9XCJtZXNzYWdlcz8ubGVuZ3RoXCIgY2xhc3M9XCJjaGF0X19tZXNzYWdlc1wiPlxuICAgICAgICA8ZGl2ICNtZXNzYWdlc0NvbnRhaW5lciBjbGFzcz1cImNoYXRfX21lc3NhZ2VzX19jb250YWluZXJcIlxuICAgICAgICAgICAgIFtjbGFzcy5jaGF0X19tZXNzYWdlc19fY29udGFpbmVyLS1zY3JvbGxdPVwibWVzc2FnZXNDb250YWluZXJXaXRoU2Nyb2xsXCI+XG4gICAgICAgICAgICA8bmctY29udGVudCBzZWxlY3Q9XCJkci1jaGF0LW1lc3NhZ2VcIj48L25nLWNvbnRlbnQ+XG4gICAgICAgIDwvZGl2PlxuICAgIDwvZGl2PlxuXG4gICAgPGRyLWNoYXQtc3VnZ2VzdGlvbnMgKm5nSWY9XCJzdWdnZXN0aW9ucz8ubGVuZ3RoXCJcbiAgICAgICAgICAgICAgICAgICAgICAgICBbdmFsdWVzXT1cInN1Z2dlc3Rpb25zXCJcbiAgICAgICAgICAgICAgICAgICAgICAgICBbZnVsbFNjcmVlbl09XCJmdWxsU2NyZWVuXCJcbiAgICAgICAgICAgICAgICAgICAgICAgICBbd2FpdEZvclJlcGx5XT1cIndhaXRGb3JSZXBseVwiXG4gICAgICAgICAgICAgICAgICAgICAgICAgY2xhc3M9XCJjaGF0X19zdWdnZXN0aW9uc1wiXG4gICAgICAgICAgICAgICAgICAgICAgICAgW2NsYXNzLmNoYXRfX3N1Z2dlc3Rpb25zLS1mdWxsLWhlaWdodF09XCJmdWxsU2NyZWVuICYmICFtZXNzYWdlcz8ubGVuZ3RoXCJcbiAgICAgICAgICAgICAgICAgICAgICAgICBbYnV0dG9uTW9kZV09XCIhIW1lc3NhZ2VzPy5sZW5ndGhcIlxuICAgICAgICAgICAgICAgICAgICAgICAgIChzdWdnZXN0aW9uU2VsZWN0KT1cInN1Z2dlc3Rpb25TZWxlY3QuZW1pdCgkZXZlbnQpXCI+XG4gICAgPC9kci1jaGF0LXN1Z2dlc3Rpb25zPlxuXG4gICAgPGRpdiBjbGFzcz1cImZvcm1cIj5cbiAgICAgICAgPG5nLWNvbnRlbnQgc2VsZWN0PVwiZHItY2hhdC1mb3JtXCI+PC9uZy1jb250ZW50PlxuICAgIDwvZGl2PlxuPC9kaXY+XG4iXX0=
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY2hhdC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9kYXRhcmFpbHNzaGFyZWQvc3JjL2xpYi9kci1jaGF0L2NoYXQuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvZGF0YXJhaWxzc2hhcmVkL3NyYy9saWIvZHItY2hhdC9jaGF0LmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFDSCxTQUFTLEVBQ1QsS0FBSyxFQUNMLFNBQVMsRUFDVCxVQUFVLEVBQ1YsZUFBZSxFQUNmLFNBQVMsRUFFVCxZQUFZLEVBQ1osaUJBQWlCLEVBQ2pCLE1BQU0sRUFDTixZQUFZLEVBRVosV0FBVyxHQUNkLE1BQU0sZUFBZSxDQUFDO0FBRXZCLE9BQU8sRUFBRSxtQkFBbUIsRUFBRSxNQUFNLG9DQUFvQyxDQUFDO0FBQ3pFLE9BQU8sRUFBRSxzQkFBc0IsRUFBRSxNQUFNLDBDQUEwQyxDQUFDO0FBQ2xGLE9BQU8sRUFBRSwwQkFBMEIsRUFBRSxNQUFNLHNFQUFzRSxDQUFDO0FBQ2xILE9BQU8sRUFBRSxPQUFPLEVBQUUsTUFBTSxNQUFNLENBQUM7QUFDL0IsT0FBTyxFQUFFLFNBQVMsRUFBRSxNQUFNLGdCQUFnQixDQUFDO0FBQzNDLE9BQU8sRUFBRSwwQkFBMEIsRUFBRSxNQUFNLGtEQUFrRCxDQUFDOzs7O0FBUTlGLE1BQU0sT0FBTyxlQUFlO0lBTXhCLElBQWEsb0JBQW9CLENBQUMsS0FBbUI7UUFDakQsSUFBSSxLQUFLLEVBQUU7WUFDUCxLQUFLLENBQUMsSUFBSSxDQUFDLFNBQVMsQ0FBQyxJQUFJLENBQUMsUUFBUSxDQUFDLENBQUMsQ0FBQyxTQUFTLENBQUMsR0FBRyxFQUFFO2dCQUNoRCxJQUFJLENBQUMsVUFBVSxFQUFFLENBQUM7WUFDdEIsQ0FBQyxDQUFDLENBQUM7U0FDTjtJQUNMLENBQUM7SUFFRDs7T0FFRztJQUNILElBQ0ksWUFBWTtRQUNaLE9BQU8sSUFBSSxDQUFDLGFBQWEsQ0FBQztJQUM5QixDQUFDO0lBRUQsSUFBSSxZQUFZLENBQUMsS0FBYztRQUMzQixJQUFJLENBQUMsYUFBYSxHQUFHLENBQUMsQ0FBQyxLQUFLLENBQUM7SUFDakMsQ0FBQztJQXFCRCxJQUFXLDJCQUEyQjtRQUNsQyxPQUFPLENBQ0gsSUFBSSxDQUFDLGlCQUFpQixJQUFJLElBQUksQ0FBQyxpQkFBaUIsQ0FBQyxhQUFhLENBQUMsWUFBWSxHQUFHLElBQUksQ0FBQyxpQkFBaUIsQ0FBQyxhQUFhLENBQUMsWUFBWSxDQUNsSSxDQUFDO0lBQ04sQ0FBQztJQUVELFlBQW9CLEdBQXNCO1FBQXRCLFFBQUcsR0FBSCxHQUFHLENBQW1CO1FBbERsQyxhQUFRLEdBQUcsSUFBSSxPQUFPLEVBQVEsQ0FBQztRQUc5QiwwQkFBcUIsR0FBRyxrQkFBa0IsQ0FBQztRQXNCMUMsa0JBQWEsR0FBRyxJQUFJLENBQUM7UUFFdEIsZ0JBQVcsR0FBYSxFQUFFLENBQUM7UUFHcEM7Ozs7V0FJRztRQUNNLGlCQUFZLEdBQUcsS0FBSyxDQUFDO1FBTXBCLHFCQUFnQixHQUF5QixJQUFJLFlBQVksRUFBVSxDQUFDO0lBU2pDLENBQUM7SUFFOUMsZUFBZTtRQUNYLElBQUksQ0FBQyxRQUFRLENBQUMsT0FBTyxDQUFDLFNBQVMsQ0FBQyxRQUFRLENBQUMsRUFBRTtZQUN2QyxJQUFJLENBQUMsUUFBUSxHQUFHLFFBQVEsQ0FBQztZQUN6QixJQUFJLENBQUMsVUFBVSxFQUFFLENBQUM7UUFDdEIsQ0FBQyxDQUFDLENBQUM7UUFFSCxJQUFJLENBQUMsVUFBVSxFQUFFLENBQUM7SUFDdEIsQ0FBQztJQUVELFVBQVU7UUFDTixJQUFJLElBQUksQ0FBQyxZQUFZLEVBQUU7WUFDbkIsSUFBSSxDQUFDLGdCQUFnQixFQUFFLENBQUM7U0FDM0I7SUFDTCxDQUFDO0lBRUQsZ0JBQWdCO1FBQ1osVUFBVSxDQUFDLEdBQUcsRUFBRTtZQUNaLElBQUksSUFBSSxDQUFDLGlCQUFpQixFQUFFO2dCQUN4QixNQUFNLGVBQWUsR0FBUTtvQkFDekIsR0FBRyxFQUFFLElBQUksQ0FBQyxpQkFBaUIsQ0FBQyxhQUFhLENBQUMsWUFBWTtpQkFDekQsQ0FBQztnQkFFRixJQUFJLENBQUMsSUFBSSxDQUFDLE1BQU0sRUFBRTtvQkFDZCxlQUFlLENBQUMsUUFBUSxHQUFHLFFBQVEsQ0FBQztpQkFDdkM7Z0JBRUQsSUFBSSxDQUFDLGlCQUFpQixDQUFDLGFBQWEsQ0FBQyxRQUFRLENBQUMsZUFBZSxDQUFDLENBQUM7Z0JBQy9ELElBQUksQ0FBQyxHQUFHLENBQUMsWUFBWSxFQUFFLENBQUM7YUFDM0I7UUFDTCxDQUFDLENBQUMsQ0FBQztJQUNQLENBQUM7SUFFRCxXQUFXO1FBQ1AsSUFBSSxDQUFDLFFBQVEsQ0FBQyxJQUFJLEVBQUUsQ0FBQztRQUNyQixJQUFJLENBQUMsUUFBUSxDQUFDLFFBQVEsRUFBRSxDQUFDO0lBQzdCLENBQUM7SUFFRCxzQkFBc0I7UUFDbEIsSUFBSSxJQUFJLENBQUMsZ0JBQWdCLEVBQUU7WUFDdkIsSUFBSSxDQUFDLGdCQUFnQixDQUFDLFdBQVcsRUFBRSxDQUFDO1NBQ3ZDO0lBQ0wsQ0FBQztJQUVELGVBQWU7UUFDWCxJQUFJLElBQUksQ0FBQyxnQkFBZ0IsQ0FBQyxtQkFBbUIsRUFBRTtZQUMzQyxJQUFJLENBQUMsZ0JBQWdCLENBQUMsbUJBQW1CLEVBQUUsQ0FBQztTQUMvQztJQUNMLENBQUM7a0lBcEdRLGVBQWU7c0hBQWYsZUFBZSxtVUFGYixDQUFDLDBCQUEwQixDQUFDLGdFQTBDekIsbUJBQW1CLDJKQURoQixzQkFBc0Isd0xBSTVCLDBCQUEwQixnREN4RXpDLDA3Q0FrQ0E7OzRGRExhLGVBQWU7a0JBTjNCLFNBQVM7K0JBQ0ksU0FBUyxhQUdSLENBQUMsMEJBQTBCLENBQUM7d0dBSzlCLFVBQVU7c0JBQWxCLEtBQUs7Z0JBQ0cscUJBQXFCO3NCQUE3QixLQUFLO2dCQUVPLG9CQUFvQjtzQkFBaEMsS0FBSztnQkFZRixZQUFZO3NCQURmLEtBQUs7Z0JBV0csV0FBVztzQkFBbkIsS0FBSztnQkFDRyxNQUFNO3NCQUFkLEtBQUs7Z0JBT0csWUFBWTtzQkFBcEIsS0FBSztnQkFFMEIsaUJBQWlCO3NCQUFoRCxTQUFTO3VCQUFDLG1CQUFtQjtnQkFDVyxRQUFRO3NCQUFoRCxlQUFlO3VCQUFDLHNCQUFzQjtnQkFDSixRQUFRO3NCQUExQyxZQUFZO3VCQUFDLG1CQUFtQjtnQkFDSCxVQUFVO3NCQUF2QyxZQUFZO3VCQUFDLGNBQWM7Z0JBQ2xCLGdCQUFnQjtzQkFBekIsTUFBTTtnQkFDZ0MsZ0JBQWdCO3NCQUF0RCxTQUFTO3VCQUFDLDBCQUEwQiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XG4gICAgQ29tcG9uZW50LFxuICAgIElucHV0LFxuICAgIFZpZXdDaGlsZCxcbiAgICBFbGVtZW50UmVmLFxuICAgIENvbnRlbnRDaGlsZHJlbixcbiAgICBRdWVyeUxpc3QsXG4gICAgQWZ0ZXJWaWV3SW5pdCxcbiAgICBDb250ZW50Q2hpbGQsXG4gICAgQ2hhbmdlRGV0ZWN0b3JSZWYsXG4gICAgT3V0cHV0LFxuICAgIEV2ZW50RW1pdHRlcixcbiAgICBPbkRlc3Ryb3ksXG4gICAgVGVtcGxhdGVSZWYsXG59IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuXG5pbXBvcnQgeyBEckNoYXRGb3JtQ29tcG9uZW50IH0gZnJvbSAnLi9kci1jaGF0LWZvcm0vY2hhdC1mb3JtLmNvbXBvbmVudCc7XG5pbXBvcnQgeyBEckNoYXRNZXNzYWdlQ29tcG9uZW50IH0gZnJvbSAnLi9kci1jaGF0LW1lc3NhZ2UvY2hhdC1tZXNzYWdlLmNvbXBvbmVudCc7XG5pbXBvcnQgeyBEckNoYXRDdXN0b21NZXNzYWdlU2VydmljZSB9IGZyb20gJy4vZHItY2hhdC1tZXNzYWdlL2RyLWNoYXQtbWVzc2FnZS1jdXN0b20vY2hhdC1jdXN0b20tbWVzc2FnZS5zZXJ2aWNlJztcbmltcG9ydCB7IFN1YmplY3QgfSBmcm9tICdyeGpzJztcbmltcG9ydCB7IHRha2VVbnRpbCB9IGZyb20gJ3J4anMvb3BlcmF0b3JzJztcbmltcG9ydCB7IERyQ2hhdFN1Z2dlc3Rpb25zQ29tcG9uZW50IH0gZnJvbSAnLi9kci1jaGF0LXN1Z2dlc3Rpb25zL2NoYXQtc3VnZ2VzdGlvbnMuY29tcG9uZW50JztcblxuQENvbXBvbmVudCh7XG4gICAgc2VsZWN0b3I6ICdkci1jaGF0JyxcbiAgICBzdHlsZVVybHM6IFsnLi9jaGF0LmNvbXBvbmVudC5zY3NzJ10sXG4gICAgdGVtcGxhdGVVcmw6ICdjaGF0LmNvbXBvbmVudC5odG1sJyxcbiAgICBwcm92aWRlcnM6IFtEckNoYXRDdXN0b21NZXNzYWdlU2VydmljZV0sXG59KVxuZXhwb3J0IGNsYXNzIERyQ2hhdENvbXBvbmVudCBpbXBsZW1lbnRzIEFmdGVyVmlld0luaXQsIE9uRGVzdHJveSB7XG4gICAgcHJpdmF0ZSBkZXN0cm95JCA9IG5ldyBTdWJqZWN0PHZvaWQ+KCk7XG5cbiAgICBASW5wdXQoKSBmdWxsU2NyZWVuOiBib29sZWFuO1xuICAgIEBJbnB1dCgpIG5vTWVzc2FnZXNQbGFjZWhvbGRlciA9ICdObyBtZXNzYWdlcyB5ZXQuJztcblxuICAgIEBJbnB1dCgpIHNldCBjb250ZW50VXBkYXRlU3ViamVjdCh2YWx1ZTogU3ViamVjdDxhbnk+KSB7XG4gICAgICAgIGlmICh2YWx1ZSkge1xuICAgICAgICAgICAgdmFsdWUucGlwZSh0YWtlVW50aWwodGhpcy5kZXN0cm95JCkpLnN1YnNjcmliZSgoKSA9PiB7XG4gICAgICAgICAgICAgICAgdGhpcy51cGRhdGVWaWV3KCk7XG4gICAgICAgICAgICB9KTtcbiAgICAgICAgfVxuICAgIH1cblxuICAgIC8qKlxuICAgICAqIFNjcm9sbCBjaGF0IHRvIHRoZSBib3R0b20gb2YgdGhlIGxpc3Qgd2hlbiBhIG5ldyBtZXNzYWdlIGFycml2ZXNcbiAgICAgKi9cbiAgICBASW5wdXQoKVxuICAgIGdldCBzY3JvbGxCb3R0b20oKTogYm9vbGVhbiB7XG4gICAgICAgIHJldHVybiB0aGlzLl9zY3JvbGxCb3R0b207XG4gICAgfVxuXG4gICAgc2V0IHNjcm9sbEJvdHRvbSh2YWx1ZTogYm9vbGVhbikge1xuICAgICAgICB0aGlzLl9zY3JvbGxCb3R0b20gPSAhIXZhbHVlO1xuICAgIH1cblxuICAgIHByb3RlY3RlZCBfc2Nyb2xsQm90dG9tID0gdHJ1ZTtcblxuICAgIEBJbnB1dCgpIHN1Z2dlc3Rpb25zOiBzdHJpbmdbXSA9IFtdO1xuICAgIEBJbnB1dCgpIHJlb3BlbjogYm9vbGVhbjtcblxuICAgIC8qKlxuICAgICAqIFBhcmFtZXRlciB0byBjaGVjayBpcyBzZW5kIG1lc3NhZ2UgZnVuY3Rpb24gYXZhaWxhYmxlXG4gICAgICpcbiAgICAgKiBAdHlwZSB7Ym9vbGVhbn1cbiAgICAgKi9cbiAgICBASW5wdXQoKSB3YWl0Rm9yUmVwbHkgPSBmYWxzZTtcblxuICAgIEBWaWV3Q2hpbGQoJ21lc3NhZ2VzQ29udGFpbmVyJykgbWVzc2FnZXNDb250YWluZXI6IEVsZW1lbnRSZWY7XG4gICAgQENvbnRlbnRDaGlsZHJlbihEckNoYXRNZXNzYWdlQ29tcG9uZW50KSBtZXNzYWdlczogUXVlcnlMaXN0PERyQ2hhdE1lc3NhZ2VDb21wb25lbnQ+O1xuICAgIEBDb250ZW50Q2hpbGQoRHJDaGF0Rm9ybUNvbXBvbmVudCkgY2hhdEZvcm06IERyQ2hhdEZvcm1Db21wb25lbnQ7XG4gICAgQENvbnRlbnRDaGlsZCgnZHJDaGF0SGVhZGVyJykgY2hhdEhlYWRlcjogVGVtcGxhdGVSZWY8dW5rbm93bj47XG4gICAgQE91dHB1dCgpIHN1Z2dlc3Rpb25TZWxlY3Q6IEV2ZW50RW1pdHRlcjxzdHJpbmc+ID0gbmV3IEV2ZW50RW1pdHRlcjxzdHJpbmc+KCk7XG4gICAgQFZpZXdDaGlsZChEckNoYXRTdWdnZXN0aW9uc0NvbXBvbmVudCkgX2NoYXRTdWdnZXN0aW9uczogRHJDaGF0U3VnZ2VzdGlvbnNDb21wb25lbnQ7XG5cbiAgICBwdWJsaWMgZ2V0IG1lc3NhZ2VzQ29udGFpbmVyV2l0aFNjcm9sbCgpOiBib29sZWFuIHtcbiAgICAgICAgcmV0dXJuIChcbiAgICAgICAgICAgIHRoaXMubWVzc2FnZXNDb250YWluZXIgJiYgdGhpcy5tZXNzYWdlc0NvbnRhaW5lci5uYXRpdmVFbGVtZW50LnNjcm9sbEhlaWdodCA+IHRoaXMubWVzc2FnZXNDb250YWluZXIubmF0aXZlRWxlbWVudC5vZmZzZXRIZWlnaHRcbiAgICAgICAgKTtcbiAgICB9XG5cbiAgICBjb25zdHJ1Y3Rvcihwcml2YXRlIGNkcjogQ2hhbmdlRGV0ZWN0b3JSZWYpIHt9XG5cbiAgICBuZ0FmdGVyVmlld0luaXQoKSB7XG4gICAgICAgIHRoaXMubWVzc2FnZXMuY2hhbmdlcy5zdWJzY3JpYmUobWVzc2FnZXMgPT4ge1xuICAgICAgICAgICAgdGhpcy5tZXNzYWdlcyA9IG1lc3NhZ2VzO1xuICAgICAgICAgICAgdGhpcy51cGRhdGVWaWV3KCk7XG4gICAgICAgIH0pO1xuXG4gICAgICAgIHRoaXMudXBkYXRlVmlldygpO1xuICAgIH1cblxuICAgIHVwZGF0ZVZpZXcoKSB7XG4gICAgICAgIGlmICh0aGlzLnNjcm9sbEJvdHRvbSkge1xuICAgICAgICAgICAgdGhpcy5zY3JvbGxMaXN0Qm90dG9tKCk7XG4gICAgICAgIH1cbiAgICB9XG5cbiAgICBzY3JvbGxMaXN0Qm90dG9tKCkge1xuICAgICAgICBzZXRUaW1lb3V0KCgpID0+IHtcbiAgICAgICAgICAgIGlmICh0aGlzLm1lc3NhZ2VzQ29udGFpbmVyKSB7XG4gICAgICAgICAgICAgICAgY29uc3Qgc2Nyb2xsVG9PcHRpb25zOiBhbnkgPSB7XG4gICAgICAgICAgICAgICAgICAgIHRvcDogdGhpcy5tZXNzYWdlc0NvbnRhaW5lci5uYXRpdmVFbGVtZW50LnNjcm9sbEhlaWdodCxcbiAgICAgICAgICAgICAgICB9O1xuXG4gICAgICAgICAgICAgICAgaWYgKCF0aGlzLnJlb3Blbikge1xuICAgICAgICAgICAgICAgICAgICBzY3JvbGxUb09wdGlvbnMuYmVoYXZpb3IgPSAnc21vb3RoJztcbiAgICAgICAgICAgICAgICB9XG5cbiAgICAgICAgICAgICAgICB0aGlzLm1lc3NhZ2VzQ29udGFpbmVyLm5hdGl2ZUVsZW1lbnQuc2Nyb2xsVG8oc2Nyb2xsVG9PcHRpb25zKTtcbiAgICAgICAgICAgICAgICB0aGlzLmNkci5tYXJrRm9yQ2hlY2soKTtcbiAgICAgICAgICAgIH1cbiAgICAgICAgfSk7XG4gICAgfVxuXG4gICAgbmdPbkRlc3Ryb3koKSB7XG4gICAgICAgIHRoaXMuZGVzdHJveSQubmV4dCgpO1xuICAgICAgICB0aGlzLmRlc3Ryb3kkLmNvbXBsZXRlKCk7XG4gICAgfVxuXG4gICAgY2xlYXJIaWRkZW5TdWdnZXN0aW9ucygpIHtcbiAgICAgICAgaWYgKHRoaXMuX2NoYXRTdWdnZXN0aW9ucykge1xuICAgICAgICAgICAgdGhpcy5fY2hhdFN1Z2dlc3Rpb25zLmNsZWFySGlkZGVuKCk7XG4gICAgICAgIH1cbiAgICB9XG5cbiAgICBoaWRlU3VnZ2VzdGlvbnMoKTogdm9pZCB7XG4gICAgICAgIGlmICh0aGlzLl9jaGF0U3VnZ2VzdGlvbnMuaXNTdWdnZXN0ZWRNZW51T3Blbikge1xuICAgICAgICAgICAgdGhpcy5fY2hhdFN1Z2dlc3Rpb25zLnRvZ2dsZVN1Z2dlc3RlZE1lbnUoKTtcbiAgICAgICAgfVxuICAgIH1cbn1cbiIsIjxkaXYgY2xhc3M9XCJjaGF0XCIgW2NsYXNzLmNoYXQtLWluLWZ1bGwtc2NyZWVuXT1cImZ1bGxTY3JlZW5cIj5cbiAgICA8ZGl2IGNsYXNzPVwiY2hhdF9fc3RpY2t5LXRvcFwiPlxuICAgICAgICA8bmctY29udGFpbmVyICpuZ0lmPVwiY2hhdEhlYWRlclwiIFtuZ1RlbXBsYXRlT3V0bGV0XT1cImNoYXRIZWFkZXJcIj48L25nLWNvbnRhaW5lcj5cblxuICAgICAgICA8ZGl2IGNsYXNzPVwiY2hhdF9fYWxlcnRcIj5cbiAgICAgICAgICAgIDxuZy1jb250ZW50IHNlbGVjdD1cImRyLWNoYXQtYWxlcnRcIj48L25nLWNvbnRlbnQ+XG4gICAgICAgIDwvZGl2PlxuICAgIDwvZGl2PlxuXG4gICAgPGRpdiAqbmdJZj1cIiFtZXNzYWdlcz8ubGVuZ3RoXCIgY2xhc3M9XCJjaGF0X19lbXB0eS1zdGF0ZVwiPlxuICAgICAgICA8c3BhbiBjbGFzcz1cImNoYXRfX2VtcHR5LXN0YXRlX190ZXh0XCI+e3sgbm9NZXNzYWdlc1BsYWNlaG9sZGVyIH19PC9zcGFuPlxuICAgIDwvZGl2PlxuXG4gICAgPGRpdiAqbmdJZj1cIm1lc3NhZ2VzPy5sZW5ndGhcIiBjbGFzcz1cImNoYXRfX21lc3NhZ2VzXCI+XG4gICAgICAgIDxkaXYgI21lc3NhZ2VzQ29udGFpbmVyIGNsYXNzPVwiY2hhdF9fbWVzc2FnZXNfX2NvbnRhaW5lclwiXG4gICAgICAgICAgICAgW2NsYXNzLmNoYXRfX21lc3NhZ2VzX19jb250YWluZXItLXNjcm9sbF09XCJtZXNzYWdlc0NvbnRhaW5lcldpdGhTY3JvbGxcIj5cbiAgICAgICAgICAgIDxuZy1jb250ZW50IHNlbGVjdD1cImRyLWNoYXQtbWVzc2FnZVwiPjwvbmctY29udGVudD5cbiAgICAgICAgPC9kaXY+XG4gICAgPC9kaXY+XG5cbiAgICA8ZHItY2hhdC1zdWdnZXN0aW9ucyAqbmdJZj1cInN1Z2dlc3Rpb25zPy5sZW5ndGhcIlxuICAgICAgICAgICAgICAgICAgICAgICAgIFt2YWx1ZXNdPVwic3VnZ2VzdGlvbnNcIlxuICAgICAgICAgICAgICAgICAgICAgICAgIFtmdWxsU2NyZWVuXT1cImZ1bGxTY3JlZW5cIlxuICAgICAgICAgICAgICAgICAgICAgICAgIFt3YWl0Rm9yUmVwbHldPVwid2FpdEZvclJlcGx5XCJcbiAgICAgICAgICAgICAgICAgICAgICAgICBjbGFzcz1cImNoYXRfX3N1Z2dlc3Rpb25zXCJcbiAgICAgICAgICAgICAgICAgICAgICAgICBbY2xhc3MuY2hhdF9fc3VnZ2VzdGlvbnMtLWZ1bGwtaGVpZ2h0XT1cImZ1bGxTY3JlZW4gJiYgIW1lc3NhZ2VzPy5sZW5ndGhcIlxuICAgICAgICAgICAgICAgICAgICAgICAgIFtidXR0b25Nb2RlXT1cIiEhbWVzc2FnZXM/Lmxlbmd0aFwiXG4gICAgICAgICAgICAgICAgICAgICAgICAgKHN1Z2dlc3Rpb25TZWxlY3QpPVwic3VnZ2VzdGlvblNlbGVjdC5lbWl0KCRldmVudClcIj5cbiAgICA8L2RyLWNoYXQtc3VnZ2VzdGlvbnM+XG5cbiAgICA8ZGl2IGNsYXNzPVwiZm9ybVwiPlxuICAgICAgICA8bmctY29udGVudCBzZWxlY3Q9XCJkci1jaGF0LWZvcm1cIj48L25nLWNvbnRlbnQ+XG4gICAgPC9kaXY+XG48L2Rpdj5cbiJdfQ==

package/esm2022/lib/dr-inputs/dr-select/dr-select.component.mjs

@@ -77,7 +77,7 @@ export class DrSelectComponent {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: DrSelectComponent,
                 multi: true
-            }], queries: [{ propertyName: "labelTemplate", first: true, predicate: ["labelTemplate"], descendants: true }, { propertyName: "optionTemplate", first: true, predicate: ["optionTemplate"], descendants: true }, { propertyName: "optionHeaderTemplate", first: true, predicate: ["optionHeaderTemplate"], descendants: true }, { propertyName: "optionFooterTemplate", first: true, predicate: ["optionFooterTemplate"], descendants: true }], viewQueries: [{ propertyName: "ngSelect", first: true, predicate: NgSelectComponent, descendants: true, read: NgSelectComponent }], ngImport: i0, template: "<ng-select [(ngModel)]=\"selectedItem\"\n           [items]=\"items\"\n           [bindLabel]=\"bindLabel\"\n           [bindValue]=\"bindValue\"\n           [multiple]=\"multiple\"\n           [addTag]=\"addTag\"\n           [appendTo]=\"appendTo\"\n           [clearable]=\"clearable\"\n           [searchable]=\"searchable\"\n           [hideSelected]=\"hideSelected\"\n           [placeholder]=\"placeholder\"\n           [loading]=\"loading\"\n           [loadingText]=\"loadingText\"\n           [readonly]=\"readonly\"\n           [closeOnSelect]=\"closeOnSelect\"\n           [disabled]=\"disabled\"\n           [id]=\"id\"\n           [keyDownFn]=\"keyDownFn\"\n           [searchFn]=\"searchFn\"\n           [isOpen]=\"isOpen\"\n           [groupBy]=\"groupBy\"\n           [attr.autofocus]=\"autofocus\"\n           (change)=\"onChange(selectedItem); change.emit(selectedItem)\"\n           (open)=\"open.emit($event); onDropdownOpen()\"\n           (close)=\"closeUp.emit($event);\"\n           class=\"dr-select\"\n           #selectComponent>\n    <ng-template *ngIf=\"optionHeaderTemplate\" ng-header-tmp let-item=\"item\">\n        <ng-container [ngTemplateOutlet]=\"optionHeaderTemplate\" [ngTemplateOutletContext]=\"{item: item}\"></ng-container>\n    </ng-template>\n    <ng-template *ngIf=\"labelTemplate\" ng-label-tmp let-item=\"item\">\n        <ng-container [ngTemplateOutlet]=\"labelTemplate\" [ngTemplateOutletContext]=\"{item: item}\"></ng-container>\n    </ng-template>\n    <ng-template *ngIf=\"optionTemplate\" ng-option-tmp let-item=\"item\">\n        <ng-container [ngTemplateOutlet]=\"optionTemplate\" [ngTemplateOutletContext]=\"{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\"\n            >{{ item?.description }}</div>\n        </div>\n    </ng-template>\n    <ng-template *ngIf=\"optionFooterTemplate\" ng-footer-tmp let-item=\"item\">\n        <ng-container [ngTemplateOutlet]=\"optionFooterTemplate\" [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 *ngIf=\"loading\"\n             class=\"dr-select__loading\"\n             [drSpinner]=\"loading\"\n             [drSpinnerType]=\"'circle'\"\n             [drSpinnerSize]=\"'small'\"\n             [drSpinnerNoOverlay]=\"true\">\n        </div>\n    </ng-template>\n</ng-select>\n", styles: [":host{width:100%;height:32px}: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{text-decoration-line:underline;color:#0b5af9}:host.textView::ng-deep ng-select.ng-select .ng-select-container .ng-arrow{border:none;width:auto;height:auto;display:flex;text-decoration-line:none;top:0}:host.textView::ng-deep ng-select.ng-select .ng-select-container .ng-arrow:before{font-family:DataRails!important;content:\"\\ea13\";font-size:24px;color:#333}:host.no-left-border-radius ::ng-deep ng-select.ng-select .ng-select-container{border-bottom-left-radius:0!important;border-top-left-radius:0!important}:host.no-right-border-radius ::ng-deep ng-select.ng-select .ng-select-container{border-bottom-right-radius:0!important;border-top-right-radius:0!important}:host.no-right-border ::ng-deep ng-select.ng-select .ng-select-container{border-right:none!important}:host.no-left-border ::ng-deep ng-select.ng-select .ng-select-container{border-left:none!important}:host ::ng-deep ng-select.ng-select .ng-select-container{min-height:32px;height:32px;width:100%;border-radius:6px;border:1px solid #9EA1AA;box-shadow:none!important}:host ::ng-deep ng-select.ng-select .ng-select-container:hover{border-color:#4646ce}:host ::ng-deep ng-select.ng-select .ng-select-container:focus-within{border-color:#4646ce}:host ::ng-deep ng-select.ng-select .ng-select-container .ng-input{top:0!important;line-height:30px;padding:0 50px 0 8px!important;color:#333;font-size:14px;font-weight:400}:host ::ng-deep ng-select.ng-select .ng-select-container .ng-input input::placeholder{color:#6d6e6f;font-size:14px;line-height:18px}:host ::ng-deep ng-select.ng-select .ng-select-container .ng-value-container{padding:0 0 0 8px;height:100%;overflow:auto;font-size:14px;line-height:18px}:host ::ng-deep ng-select.ng-select .ng-select-container .ng-value-container .ng-input{padding:0 0 0 3px!important}:host ::ng-deep ng-select.ng-select .ng-select-container .ng-arrow-wrapper{margin-right:7px}:host ::ng-deep ng-select.ng-select .ng-select-container .ng-arrow-wrapper .ng-arrow{border:none;width:auto;height:auto;display:flex;text-decoration-line:none;top:0}:host ::ng-deep ng-select.ng-select .ng-select-container .ng-arrow-wrapper .ng-arrow:before{font-family:DataRails!important;content:\"\\ea13\";font-size:24px;color:#6d6e6f}:host ::ng-deep ng-select.ng-select.ng-select-opened .ng-select-container{border-radius:6px}:host ::ng-deep ng-select.ng-select.ng-select-multiple .ng-select-container{max-height:58px;height:100%}:host ::ng-deep ng-select.ng-select.ng-select-multiple .ng-select-container .ng-value-container{max-height:58px;font-size:14px;line-height:18px}:host ::ng-deep ng-select.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{color:#333;height:24px;padding:2px 16px;font-size:12px;margin:2px 4px 2px 0;background:#f0f1f4;display:flex;flex-direction:row-reverse;align-items:center;border-radius:12px}:host ::ng-deep ng-select.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value-label{line-height:20px;padding:0!important}:host ::ng-deep ng-select.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value-icon{border:none!important;padding:0!important;width:20px;display:flex;align-items:center;color:transparent;margin-left:4px}:host ::ng-deep ng-select.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value-icon:before{font-family:DataRails!important;content:\"\\ea54\";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-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}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select{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 .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-disabled{cursor:default}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .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-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-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:97%;word-break:break-word;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}\n"], dependencies: [{ kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i3.NgOptgroupTemplateDirective, selector: "[ng-optgroup-tmp]" }, { kind: "directive", type: i3.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i3.NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { kind: "directive", type: i3.NgHeaderTemplateDirective, selector: "[ng-header-tmp]" }, { kind: "directive", type: i3.NgFooterTemplateDirective, selector: "[ng-footer-tmp]" }, { kind: "directive", type: i3.NgLoadingSpinnerTemplateDirective, selector: "[ng-loadingspinner-tmp]" }, { kind: "directive", type: i4.DrSpinnerDirective, selector: "[drSpinner]", inputs: ["drSpinner", "drSpinnerSize", "drSpinnerType", "drSpinnerNoOverlay"] }] }); }
+            }], queries: [{ propertyName: "labelTemplate", first: true, predicate: ["labelTemplate"], descendants: true }, { propertyName: "optionTemplate", first: true, predicate: ["optionTemplate"], descendants: true }, { propertyName: "optionHeaderTemplate", first: true, predicate: ["optionHeaderTemplate"], descendants: true }, { propertyName: "optionFooterTemplate", first: true, predicate: ["optionFooterTemplate"], descendants: true }], viewQueries: [{ propertyName: "ngSelect", first: true, predicate: NgSelectComponent, descendants: true, read: NgSelectComponent }], ngImport: i0, template: "<ng-select [(ngModel)]=\"selectedItem\"\n           [items]=\"items\"\n           [bindLabel]=\"bindLabel\"\n           [bindValue]=\"bindValue\"\n           [multiple]=\"multiple\"\n           [addTag]=\"addTag\"\n           [appendTo]=\"appendTo\"\n           [clearable]=\"clearable\"\n           [searchable]=\"searchable\"\n           [hideSelected]=\"hideSelected\"\n           [placeholder]=\"placeholder\"\n           [loading]=\"loading\"\n           [loadingText]=\"loadingText\"\n           [readonly]=\"readonly\"\n           [closeOnSelect]=\"closeOnSelect\"\n           [disabled]=\"disabled\"\n           [id]=\"id\"\n           [keyDownFn]=\"keyDownFn\"\n           [searchFn]=\"searchFn\"\n           [isOpen]=\"isOpen\"\n           [groupBy]=\"groupBy\"\n           [attr.autofocus]=\"autofocus\"\n           (change)=\"onChange(selectedItem); change.emit(selectedItem)\"\n           (open)=\"open.emit($event); onDropdownOpen()\"\n           (close)=\"closeUp.emit($event);\"\n           class=\"dr-select\"\n           #selectComponent>\n    <ng-template *ngIf=\"optionHeaderTemplate\" ng-header-tmp let-item=\"item\">\n        <ng-container [ngTemplateOutlet]=\"optionHeaderTemplate\" [ngTemplateOutletContext]=\"{item: item}\"></ng-container>\n    </ng-template>\n    <ng-template *ngIf=\"labelTemplate\" ng-label-tmp let-item=\"item\">\n        <ng-container [ngTemplateOutlet]=\"labelTemplate\" [ngTemplateOutletContext]=\"{item: item}\"></ng-container>\n    </ng-template>\n    <ng-template *ngIf=\"optionTemplate\" ng-option-tmp let-item=\"item\">\n        <ng-container [ngTemplateOutlet]=\"optionTemplate\" [ngTemplateOutletContext]=\"{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\"\n            >{{ item?.description }}</div>\n        </div>\n    </ng-template>\n    <ng-template *ngIf=\"optionFooterTemplate\" ng-footer-tmp let-item=\"item\">\n        <ng-container [ngTemplateOutlet]=\"optionFooterTemplate\" [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 *ngIf=\"loading\"\n             class=\"dr-select__loading\"\n             [drSpinner]=\"loading\"\n             [drSpinnerType]=\"'circle'\"\n             [drSpinnerSize]=\"'small'\"\n             [drSpinnerNoOverlay]=\"true\">\n        </div>\n    </ng-template>\n</ng-select>\n", styles: [":host{width:100%;height:32px}: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{text-decoration-line:underline;color:#0b5af9}:host.textView::ng-deep ng-select.ng-select .ng-select-container .ng-arrow{border:none;width:auto;height:auto;display:flex;text-decoration-line:none;top:0}:host.textView::ng-deep ng-select.ng-select .ng-select-container .ng-arrow:before{font-family:DataRails!important;content:\"\\ea13\";font-size:24px;color:#333}:host.no-left-border-radius ::ng-deep ng-select.ng-select .ng-select-container{border-bottom-left-radius:0!important;border-top-left-radius:0!important}:host.no-right-border-radius ::ng-deep ng-select.ng-select .ng-select-container{border-bottom-right-radius:0!important;border-top-right-radius:0!important}:host.no-right-border ::ng-deep ng-select.ng-select .ng-select-container{border-right:none!important}:host.no-left-border ::ng-deep ng-select.ng-select .ng-select-container{border-left:none!important}:host ::ng-deep ng-select.ng-select .ng-select-container{min-height:32px;height:32px;width:100%;border-radius:6px;border:1px solid #9EA1AA;box-shadow:none!important}:host ::ng-deep ng-select.ng-select .ng-select-container:hover{border-color:#4646ce}:host ::ng-deep ng-select.ng-select .ng-select-container:focus-within{border-color:#4646ce}:host ::ng-deep ng-select.ng-select .ng-select-container .ng-input{top:0!important;line-height:30px;padding:0 50px 0 8px!important;color:#333;font-size:14px;font-weight:400}:host ::ng-deep ng-select.ng-select .ng-select-container .ng-input input::placeholder{color:#6d6e6f;font-size:14px;line-height:18px}:host ::ng-deep ng-select.ng-select .ng-select-container .ng-value-container{padding:0 0 0 8px;height:100%;overflow:auto;font-size:14px;line-height:18px}:host ::ng-deep ng-select.ng-select .ng-select-container .ng-value-container .ng-input{padding:0 0 0 3px!important}:host ::ng-deep ng-select.ng-select .ng-select-container .ng-arrow-wrapper{margin-right:7px}:host ::ng-deep ng-select.ng-select .ng-select-container .ng-arrow-wrapper .ng-arrow{border:none;width:auto;height:auto;display:flex;text-decoration-line:none;top:0}:host ::ng-deep ng-select.ng-select .ng-select-container .ng-arrow-wrapper .ng-arrow:before{font-family:DataRails!important;content:\"\\ea13\";font-size:24px;color:#6d6e6f}:host ::ng-deep ng-select.ng-select.ng-select-opened .ng-select-container{border-radius:6px}:host ::ng-deep ng-select.ng-select.ng-select-multiple .ng-select-container{max-height:58px;height:100%}:host ::ng-deep ng-select.ng-select.ng-select-multiple .ng-select-container .ng-value-container{max-height:58px;font-size:14px;line-height:18px}:host ::ng-deep ng-select.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{color:#333;height:24px;padding:2px 16px;font-size:12px;margin:2px 4px 2px 0;background:#f0f1f4;display:flex;flex-direction:row-reverse;align-items:center;border-radius:12px}:host ::ng-deep ng-select.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value-label{line-height:20px;padding:0!important}:host ::ng-deep ng-select.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value-icon{border:none!important;padding:0!important;width:20px;display:flex;align-items:center;color:transparent;margin-left:4px}:host ::ng-deep ng-select.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value-icon:before{font-family:DataRails!important;content:\"\\ea53\";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-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}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select{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 .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-disabled{cursor:default}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .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-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-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:97%;word-break:break-word;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}\n"], dependencies: [{ kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i3.NgOptgroupTemplateDirective, selector: "[ng-optgroup-tmp]" }, { kind: "directive", type: i3.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i3.NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { kind: "directive", type: i3.NgHeaderTemplateDirective, selector: "[ng-header-tmp]" }, { kind: "directive", type: i3.NgFooterTemplateDirective, selector: "[ng-footer-tmp]" }, { kind: "directive", type: i3.NgLoadingSpinnerTemplateDirective, selector: "[ng-loadingspinner-tmp]" }, { kind: "directive", type: i4.DrSpinnerDirective, selector: "[drSpinner]", inputs: ["drSpinner", "drSpinnerSize", "drSpinnerType", "drSpinnerNoOverlay"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DrSelectComponent, decorators: [{
             type: Component,
@@ -85,7 +85,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: DrSelectComponent,
                             multi: true
-                        }], template: "<ng-select [(ngModel)]=\"selectedItem\"\n           [items]=\"items\"\n           [bindLabel]=\"bindLabel\"\n           [bindValue]=\"bindValue\"\n           [multiple]=\"multiple\"\n           [addTag]=\"addTag\"\n           [appendTo]=\"appendTo\"\n           [clearable]=\"clearable\"\n           [searchable]=\"searchable\"\n           [hideSelected]=\"hideSelected\"\n           [placeholder]=\"placeholder\"\n           [loading]=\"loading\"\n           [loadingText]=\"loadingText\"\n           [readonly]=\"readonly\"\n           [closeOnSelect]=\"closeOnSelect\"\n           [disabled]=\"disabled\"\n           [id]=\"id\"\n           [keyDownFn]=\"keyDownFn\"\n           [searchFn]=\"searchFn\"\n           [isOpen]=\"isOpen\"\n           [groupBy]=\"groupBy\"\n           [attr.autofocus]=\"autofocus\"\n           (change)=\"onChange(selectedItem); change.emit(selectedItem)\"\n           (open)=\"open.emit($event); onDropdownOpen()\"\n           (close)=\"closeUp.emit($event);\"\n           class=\"dr-select\"\n           #selectComponent>\n    <ng-template *ngIf=\"optionHeaderTemplate\" ng-header-tmp let-item=\"item\">\n        <ng-container [ngTemplateOutlet]=\"optionHeaderTemplate\" [ngTemplateOutletContext]=\"{item: item}\"></ng-container>\n    </ng-template>\n    <ng-template *ngIf=\"labelTemplate\" ng-label-tmp let-item=\"item\">\n        <ng-container [ngTemplateOutlet]=\"labelTemplate\" [ngTemplateOutletContext]=\"{item: item}\"></ng-container>\n    </ng-template>\n    <ng-template *ngIf=\"optionTemplate\" ng-option-tmp let-item=\"item\">\n        <ng-container [ngTemplateOutlet]=\"optionTemplate\" [ngTemplateOutletContext]=\"{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\"\n            >{{ item?.description }}</div>\n        </div>\n    </ng-template>\n    <ng-template *ngIf=\"optionFooterTemplate\" ng-footer-tmp let-item=\"item\">\n        <ng-container [ngTemplateOutlet]=\"optionFooterTemplate\" [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 *ngIf=\"loading\"\n             class=\"dr-select__loading\"\n             [drSpinner]=\"loading\"\n             [drSpinnerType]=\"'circle'\"\n             [drSpinnerSize]=\"'small'\"\n             [drSpinnerNoOverlay]=\"true\">\n        </div>\n    </ng-template>\n</ng-select>\n", styles: [":host{width:100%;height:32px}: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{text-decoration-line:underline;color:#0b5af9}:host.textView::ng-deep ng-select.ng-select .ng-select-container .ng-arrow{border:none;width:auto;height:auto;display:flex;text-decoration-line:none;top:0}:host.textView::ng-deep ng-select.ng-select .ng-select-container .ng-arrow:before{font-family:DataRails!important;content:\"\\ea13\";font-size:24px;color:#333}:host.no-left-border-radius ::ng-deep ng-select.ng-select .ng-select-container{border-bottom-left-radius:0!important;border-top-left-radius:0!important}:host.no-right-border-radius ::ng-deep ng-select.ng-select .ng-select-container{border-bottom-right-radius:0!important;border-top-right-radius:0!important}:host.no-right-border ::ng-deep ng-select.ng-select .ng-select-container{border-right:none!important}:host.no-left-border ::ng-deep ng-select.ng-select .ng-select-container{border-left:none!important}:host ::ng-deep ng-select.ng-select .ng-select-container{min-height:32px;height:32px;width:100%;border-radius:6px;border:1px solid #9EA1AA;box-shadow:none!important}:host ::ng-deep ng-select.ng-select .ng-select-container:hover{border-color:#4646ce}:host ::ng-deep ng-select.ng-select .ng-select-container:focus-within{border-color:#4646ce}:host ::ng-deep ng-select.ng-select .ng-select-container .ng-input{top:0!important;line-height:30px;padding:0 50px 0 8px!important;color:#333;font-size:14px;font-weight:400}:host ::ng-deep ng-select.ng-select .ng-select-container .ng-input input::placeholder{color:#6d6e6f;font-size:14px;line-height:18px}:host ::ng-deep ng-select.ng-select .ng-select-container .ng-value-container{padding:0 0 0 8px;height:100%;overflow:auto;font-size:14px;line-height:18px}:host ::ng-deep ng-select.ng-select .ng-select-container .ng-value-container .ng-input{padding:0 0 0 3px!important}:host ::ng-deep ng-select.ng-select .ng-select-container .ng-arrow-wrapper{margin-right:7px}:host ::ng-deep ng-select.ng-select .ng-select-container .ng-arrow-wrapper .ng-arrow{border:none;width:auto;height:auto;display:flex;text-decoration-line:none;top:0}:host ::ng-deep ng-select.ng-select .ng-select-container .ng-arrow-wrapper .ng-arrow:before{font-family:DataRails!important;content:\"\\ea13\";font-size:24px;color:#6d6e6f}:host ::ng-deep ng-select.ng-select.ng-select-opened .ng-select-container{border-radius:6px}:host ::ng-deep ng-select.ng-select.ng-select-multiple .ng-select-container{max-height:58px;height:100%}:host ::ng-deep ng-select.ng-select.ng-select-multiple .ng-select-container .ng-value-container{max-height:58px;font-size:14px;line-height:18px}:host ::ng-deep ng-select.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{color:#333;height:24px;padding:2px 16px;font-size:12px;margin:2px 4px 2px 0;background:#f0f1f4;display:flex;flex-direction:row-reverse;align-items:center;border-radius:12px}:host ::ng-deep ng-select.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value-label{line-height:20px;padding:0!important}:host ::ng-deep ng-select.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value-icon{border:none!important;padding:0!important;width:20px;display:flex;align-items:center;color:transparent;margin-left:4px}:host ::ng-deep ng-select.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value-icon:before{font-family:DataRails!important;content:\"\\ea54\";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-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}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select{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 .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-disabled{cursor:default}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .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-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-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:97%;word-break:break-word;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}\n"] }]
+                        }], template: "<ng-select [(ngModel)]=\"selectedItem\"\n           [items]=\"items\"\n           [bindLabel]=\"bindLabel\"\n           [bindValue]=\"bindValue\"\n           [multiple]=\"multiple\"\n           [addTag]=\"addTag\"\n           [appendTo]=\"appendTo\"\n           [clearable]=\"clearable\"\n           [searchable]=\"searchable\"\n           [hideSelected]=\"hideSelected\"\n           [placeholder]=\"placeholder\"\n           [loading]=\"loading\"\n           [loadingText]=\"loadingText\"\n           [readonly]=\"readonly\"\n           [closeOnSelect]=\"closeOnSelect\"\n           [disabled]=\"disabled\"\n           [id]=\"id\"\n           [keyDownFn]=\"keyDownFn\"\n           [searchFn]=\"searchFn\"\n           [isOpen]=\"isOpen\"\n           [groupBy]=\"groupBy\"\n           [attr.autofocus]=\"autofocus\"\n           (change)=\"onChange(selectedItem); change.emit(selectedItem)\"\n           (open)=\"open.emit($event); onDropdownOpen()\"\n           (close)=\"closeUp.emit($event);\"\n           class=\"dr-select\"\n           #selectComponent>\n    <ng-template *ngIf=\"optionHeaderTemplate\" ng-header-tmp let-item=\"item\">\n        <ng-container [ngTemplateOutlet]=\"optionHeaderTemplate\" [ngTemplateOutletContext]=\"{item: item}\"></ng-container>\n    </ng-template>\n    <ng-template *ngIf=\"labelTemplate\" ng-label-tmp let-item=\"item\">\n        <ng-container [ngTemplateOutlet]=\"labelTemplate\" [ngTemplateOutletContext]=\"{item: item}\"></ng-container>\n    </ng-template>\n    <ng-template *ngIf=\"optionTemplate\" ng-option-tmp let-item=\"item\">\n        <ng-container [ngTemplateOutlet]=\"optionTemplate\" [ngTemplateOutletContext]=\"{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\"\n            >{{ item?.description }}</div>\n        </div>\n    </ng-template>\n    <ng-template *ngIf=\"optionFooterTemplate\" ng-footer-tmp let-item=\"item\">\n        <ng-container [ngTemplateOutlet]=\"optionFooterTemplate\" [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 *ngIf=\"loading\"\n             class=\"dr-select__loading\"\n             [drSpinner]=\"loading\"\n             [drSpinnerType]=\"'circle'\"\n             [drSpinnerSize]=\"'small'\"\n             [drSpinnerNoOverlay]=\"true\">\n        </div>\n    </ng-template>\n</ng-select>\n", styles: [":host{width:100%;height:32px}: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{text-decoration-line:underline;color:#0b5af9}:host.textView::ng-deep ng-select.ng-select .ng-select-container .ng-arrow{border:none;width:auto;height:auto;display:flex;text-decoration-line:none;top:0}:host.textView::ng-deep ng-select.ng-select .ng-select-container .ng-arrow:before{font-family:DataRails!important;content:\"\\ea13\";font-size:24px;color:#333}:host.no-left-border-radius ::ng-deep ng-select.ng-select .ng-select-container{border-bottom-left-radius:0!important;border-top-left-radius:0!important}:host.no-right-border-radius ::ng-deep ng-select.ng-select .ng-select-container{border-bottom-right-radius:0!important;border-top-right-radius:0!important}:host.no-right-border ::ng-deep ng-select.ng-select .ng-select-container{border-right:none!important}:host.no-left-border ::ng-deep ng-select.ng-select .ng-select-container{border-left:none!important}:host ::ng-deep ng-select.ng-select .ng-select-container{min-height:32px;height:32px;width:100%;border-radius:6px;border:1px solid #9EA1AA;box-shadow:none!important}:host ::ng-deep ng-select.ng-select .ng-select-container:hover{border-color:#4646ce}:host ::ng-deep ng-select.ng-select .ng-select-container:focus-within{border-color:#4646ce}:host ::ng-deep ng-select.ng-select .ng-select-container .ng-input{top:0!important;line-height:30px;padding:0 50px 0 8px!important;color:#333;font-size:14px;font-weight:400}:host ::ng-deep ng-select.ng-select .ng-select-container .ng-input input::placeholder{color:#6d6e6f;font-size:14px;line-height:18px}:host ::ng-deep ng-select.ng-select .ng-select-container .ng-value-container{padding:0 0 0 8px;height:100%;overflow:auto;font-size:14px;line-height:18px}:host ::ng-deep ng-select.ng-select .ng-select-container .ng-value-container .ng-input{padding:0 0 0 3px!important}:host ::ng-deep ng-select.ng-select .ng-select-container .ng-arrow-wrapper{margin-right:7px}:host ::ng-deep ng-select.ng-select .ng-select-container .ng-arrow-wrapper .ng-arrow{border:none;width:auto;height:auto;display:flex;text-decoration-line:none;top:0}:host ::ng-deep ng-select.ng-select .ng-select-container .ng-arrow-wrapper .ng-arrow:before{font-family:DataRails!important;content:\"\\ea13\";font-size:24px;color:#6d6e6f}:host ::ng-deep ng-select.ng-select.ng-select-opened .ng-select-container{border-radius:6px}:host ::ng-deep ng-select.ng-select.ng-select-multiple .ng-select-container{max-height:58px;height:100%}:host ::ng-deep ng-select.ng-select.ng-select-multiple .ng-select-container .ng-value-container{max-height:58px;font-size:14px;line-height:18px}:host ::ng-deep ng-select.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{color:#333;height:24px;padding:2px 16px;font-size:12px;margin:2px 4px 2px 0;background:#f0f1f4;display:flex;flex-direction:row-reverse;align-items:center;border-radius:12px}:host ::ng-deep ng-select.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value-label{line-height:20px;padding:0!important}:host ::ng-deep ng-select.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value-icon{border:none!important;padding:0!important;width:20px;display:flex;align-items:center;color:transparent;margin-left:4px}:host ::ng-deep ng-select.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value-icon:before{font-family:DataRails!important;content:\"\\ea53\";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-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}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select{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 .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-disabled{cursor:default}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .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-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-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:97%;word-break:break-word;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}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { className: [{
                 type: Input
             }], items: [{

package/fesm2022/datarailsshared-datarailsshared.mjs

@@ -822,7 +822,7 @@ class DrSelectComponent {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: DrSelectComponent,
                 multi: true
-            }], queries: [{ propertyName: "labelTemplate", first: true, predicate: ["labelTemplate"], descendants: true }, { propertyName: "optionTemplate", first: true, predicate: ["optionTemplate"], descendants: true }, { propertyName: "optionHeaderTemplate", first: true, predicate: ["optionHeaderTemplate"], descendants: true }, { propertyName: "optionFooterTemplate", first: true, predicate: ["optionFooterTemplate"], descendants: true }], viewQueries: [{ propertyName: "ngSelect", first: true, predicate: NgSelectComponent, descendants: true, read: NgSelectComponent }], ngImport: i0, template: "<ng-select [(ngModel)]=\"selectedItem\"\n           [items]=\"items\"\n           [bindLabel]=\"bindLabel\"\n           [bindValue]=\"bindValue\"\n           [multiple]=\"multiple\"\n           [addTag]=\"addTag\"\n           [appendTo]=\"appendTo\"\n           [clearable]=\"clearable\"\n           [searchable]=\"searchable\"\n           [hideSelected]=\"hideSelected\"\n           [placeholder]=\"placeholder\"\n           [loading]=\"loading\"\n           [loadingText]=\"loadingText\"\n           [readonly]=\"readonly\"\n           [closeOnSelect]=\"closeOnSelect\"\n           [disabled]=\"disabled\"\n           [id]=\"id\"\n           [keyDownFn]=\"keyDownFn\"\n           [searchFn]=\"searchFn\"\n           [isOpen]=\"isOpen\"\n           [groupBy]=\"groupBy\"\n           [attr.autofocus]=\"autofocus\"\n           (change)=\"onChange(selectedItem); change.emit(selectedItem)\"\n           (open)=\"open.emit($event); onDropdownOpen()\"\n           (close)=\"closeUp.emit($event);\"\n           class=\"dr-select\"\n           #selectComponent>\n    <ng-template *ngIf=\"optionHeaderTemplate\" ng-header-tmp let-item=\"item\">\n        <ng-container [ngTemplateOutlet]=\"optionHeaderTemplate\" [ngTemplateOutletContext]=\"{item: item}\"></ng-container>\n    </ng-template>\n    <ng-template *ngIf=\"labelTemplate\" ng-label-tmp let-item=\"item\">\n        <ng-container [ngTemplateOutlet]=\"labelTemplate\" [ngTemplateOutletContext]=\"{item: item}\"></ng-container>\n    </ng-template>\n    <ng-template *ngIf=\"optionTemplate\" ng-option-tmp let-item=\"item\">\n        <ng-container [ngTemplateOutlet]=\"optionTemplate\" [ngTemplateOutletContext]=\"{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\"\n            >{{ item?.description }}</div>\n        </div>\n    </ng-template>\n    <ng-template *ngIf=\"optionFooterTemplate\" ng-footer-tmp let-item=\"item\">\n        <ng-container [ngTemplateOutlet]=\"optionFooterTemplate\" [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 *ngIf=\"loading\"\n             class=\"dr-select__loading\"\n             [drSpinner]=\"loading\"\n             [drSpinnerType]=\"'circle'\"\n             [drSpinnerSize]=\"'small'\"\n             [drSpinnerNoOverlay]=\"true\">\n        </div>\n    </ng-template>\n</ng-select>\n", styles: [":host{width:100%;height:32px}: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{text-decoration-line:underline;color:#0b5af9}:host.textView::ng-deep ng-select.ng-select .ng-select-container .ng-arrow{border:none;width:auto;height:auto;display:flex;text-decoration-line:none;top:0}:host.textView::ng-deep ng-select.ng-select .ng-select-container .ng-arrow:before{font-family:DataRails!important;content:\"\\ea13\";font-size:24px;color:#333}:host.no-left-border-radius ::ng-deep ng-select.ng-select .ng-select-container{border-bottom-left-radius:0!important;border-top-left-radius:0!important}:host.no-right-border-radius ::ng-deep ng-select.ng-select .ng-select-container{border-bottom-right-radius:0!important;border-top-right-radius:0!important}:host.no-right-border ::ng-deep ng-select.ng-select .ng-select-container{border-right:none!important}:host.no-left-border ::ng-deep ng-select.ng-select .ng-select-container{border-left:none!important}:host ::ng-deep ng-select.ng-select .ng-select-container{min-height:32px;height:32px;width:100%;border-radius:6px;border:1px solid #9EA1AA;box-shadow:none!important}:host ::ng-deep ng-select.ng-select .ng-select-container:hover{border-color:#4646ce}:host ::ng-deep ng-select.ng-select .ng-select-container:focus-within{border-color:#4646ce}:host ::ng-deep ng-select.ng-select .ng-select-container .ng-input{top:0!important;line-height:30px;padding:0 50px 0 8px!important;color:#333;font-size:14px;font-weight:400}:host ::ng-deep ng-select.ng-select .ng-select-container .ng-input input::placeholder{color:#6d6e6f;font-size:14px;line-height:18px}:host ::ng-deep ng-select.ng-select .ng-select-container .ng-value-container{padding:0 0 0 8px;height:100%;overflow:auto;font-size:14px;line-height:18px}:host ::ng-deep ng-select.ng-select .ng-select-container .ng-value-container .ng-input{padding:0 0 0 3px!important}:host ::ng-deep ng-select.ng-select .ng-select-container .ng-arrow-wrapper{margin-right:7px}:host ::ng-deep ng-select.ng-select .ng-select-container .ng-arrow-wrapper .ng-arrow{border:none;width:auto;height:auto;display:flex;text-decoration-line:none;top:0}:host ::ng-deep ng-select.ng-select .ng-select-container .ng-arrow-wrapper .ng-arrow:before{font-family:DataRails!important;content:\"\\ea13\";font-size:24px;color:#6d6e6f}:host ::ng-deep ng-select.ng-select.ng-select-opened .ng-select-container{border-radius:6px}:host ::ng-deep ng-select.ng-select.ng-select-multiple .ng-select-container{max-height:58px;height:100%}:host ::ng-deep ng-select.ng-select.ng-select-multiple .ng-select-container .ng-value-container{max-height:58px;font-size:14px;line-height:18px}:host ::ng-deep ng-select.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{color:#333;height:24px;padding:2px 16px;font-size:12px;margin:2px 4px 2px 0;background:#f0f1f4;display:flex;flex-direction:row-reverse;align-items:center;border-radius:12px}:host ::ng-deep ng-select.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value-label{line-height:20px;padding:0!important}:host ::ng-deep ng-select.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value-icon{border:none!important;padding:0!important;width:20px;display:flex;align-items:center;color:transparent;margin-left:4px}:host ::ng-deep ng-select.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value-icon:before{font-family:DataRails!important;content:\"\\ea54\";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-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}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select{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 .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-disabled{cursor:default}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .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-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-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:97%;word-break:break-word;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}\n"], dependencies: [{ kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i3.NgOptgroupTemplateDirective, selector: "[ng-optgroup-tmp]" }, { kind: "directive", type: i3.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i3.NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { kind: "directive", type: i3.NgHeaderTemplateDirective, selector: "[ng-header-tmp]" }, { kind: "directive", type: i3.NgFooterTemplateDirective, selector: "[ng-footer-tmp]" }, { kind: "directive", type: i3.NgLoadingSpinnerTemplateDirective, selector: "[ng-loadingspinner-tmp]" }, { kind: "directive", type: DrSpinnerDirective, selector: "[drSpinner]", inputs: ["drSpinner", "drSpinnerSize", "drSpinnerType", "drSpinnerNoOverlay"] }] }); }
+            }], queries: [{ propertyName: "labelTemplate", first: true, predicate: ["labelTemplate"], descendants: true }, { propertyName: "optionTemplate", first: true, predicate: ["optionTemplate"], descendants: true }, { propertyName: "optionHeaderTemplate", first: true, predicate: ["optionHeaderTemplate"], descendants: true }, { propertyName: "optionFooterTemplate", first: true, predicate: ["optionFooterTemplate"], descendants: true }], viewQueries: [{ propertyName: "ngSelect", first: true, predicate: NgSelectComponent, descendants: true, read: NgSelectComponent }], ngImport: i0, template: "<ng-select [(ngModel)]=\"selectedItem\"\n           [items]=\"items\"\n           [bindLabel]=\"bindLabel\"\n           [bindValue]=\"bindValue\"\n           [multiple]=\"multiple\"\n           [addTag]=\"addTag\"\n           [appendTo]=\"appendTo\"\n           [clearable]=\"clearable\"\n           [searchable]=\"searchable\"\n           [hideSelected]=\"hideSelected\"\n           [placeholder]=\"placeholder\"\n           [loading]=\"loading\"\n           [loadingText]=\"loadingText\"\n           [readonly]=\"readonly\"\n           [closeOnSelect]=\"closeOnSelect\"\n           [disabled]=\"disabled\"\n           [id]=\"id\"\n           [keyDownFn]=\"keyDownFn\"\n           [searchFn]=\"searchFn\"\n           [isOpen]=\"isOpen\"\n           [groupBy]=\"groupBy\"\n           [attr.autofocus]=\"autofocus\"\n           (change)=\"onChange(selectedItem); change.emit(selectedItem)\"\n           (open)=\"open.emit($event); onDropdownOpen()\"\n           (close)=\"closeUp.emit($event);\"\n           class=\"dr-select\"\n           #selectComponent>\n    <ng-template *ngIf=\"optionHeaderTemplate\" ng-header-tmp let-item=\"item\">\n        <ng-container [ngTemplateOutlet]=\"optionHeaderTemplate\" [ngTemplateOutletContext]=\"{item: item}\"></ng-container>\n    </ng-template>\n    <ng-template *ngIf=\"labelTemplate\" ng-label-tmp let-item=\"item\">\n        <ng-container [ngTemplateOutlet]=\"labelTemplate\" [ngTemplateOutletContext]=\"{item: item}\"></ng-container>\n    </ng-template>\n    <ng-template *ngIf=\"optionTemplate\" ng-option-tmp let-item=\"item\">\n        <ng-container [ngTemplateOutlet]=\"optionTemplate\" [ngTemplateOutletContext]=\"{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\"\n            >{{ item?.description }}</div>\n        </div>\n    </ng-template>\n    <ng-template *ngIf=\"optionFooterTemplate\" ng-footer-tmp let-item=\"item\">\n        <ng-container [ngTemplateOutlet]=\"optionFooterTemplate\" [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 *ngIf=\"loading\"\n             class=\"dr-select__loading\"\n             [drSpinner]=\"loading\"\n             [drSpinnerType]=\"'circle'\"\n             [drSpinnerSize]=\"'small'\"\n             [drSpinnerNoOverlay]=\"true\">\n        </div>\n    </ng-template>\n</ng-select>\n", styles: [":host{width:100%;height:32px}: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{text-decoration-line:underline;color:#0b5af9}:host.textView::ng-deep ng-select.ng-select .ng-select-container .ng-arrow{border:none;width:auto;height:auto;display:flex;text-decoration-line:none;top:0}:host.textView::ng-deep ng-select.ng-select .ng-select-container .ng-arrow:before{font-family:DataRails!important;content:\"\\ea13\";font-size:24px;color:#333}:host.no-left-border-radius ::ng-deep ng-select.ng-select .ng-select-container{border-bottom-left-radius:0!important;border-top-left-radius:0!important}:host.no-right-border-radius ::ng-deep ng-select.ng-select .ng-select-container{border-bottom-right-radius:0!important;border-top-right-radius:0!important}:host.no-right-border ::ng-deep ng-select.ng-select .ng-select-container{border-right:none!important}:host.no-left-border ::ng-deep ng-select.ng-select .ng-select-container{border-left:none!important}:host ::ng-deep ng-select.ng-select .ng-select-container{min-height:32px;height:32px;width:100%;border-radius:6px;border:1px solid #9EA1AA;box-shadow:none!important}:host ::ng-deep ng-select.ng-select .ng-select-container:hover{border-color:#4646ce}:host ::ng-deep ng-select.ng-select .ng-select-container:focus-within{border-color:#4646ce}:host ::ng-deep ng-select.ng-select .ng-select-container .ng-input{top:0!important;line-height:30px;padding:0 50px 0 8px!important;color:#333;font-size:14px;font-weight:400}:host ::ng-deep ng-select.ng-select .ng-select-container .ng-input input::placeholder{color:#6d6e6f;font-size:14px;line-height:18px}:host ::ng-deep ng-select.ng-select .ng-select-container .ng-value-container{padding:0 0 0 8px;height:100%;overflow:auto;font-size:14px;line-height:18px}:host ::ng-deep ng-select.ng-select .ng-select-container .ng-value-container .ng-input{padding:0 0 0 3px!important}:host ::ng-deep ng-select.ng-select .ng-select-container .ng-arrow-wrapper{margin-right:7px}:host ::ng-deep ng-select.ng-select .ng-select-container .ng-arrow-wrapper .ng-arrow{border:none;width:auto;height:auto;display:flex;text-decoration-line:none;top:0}:host ::ng-deep ng-select.ng-select .ng-select-container .ng-arrow-wrapper .ng-arrow:before{font-family:DataRails!important;content:\"\\ea13\";font-size:24px;color:#6d6e6f}:host ::ng-deep ng-select.ng-select.ng-select-opened .ng-select-container{border-radius:6px}:host ::ng-deep ng-select.ng-select.ng-select-multiple .ng-select-container{max-height:58px;height:100%}:host ::ng-deep ng-select.ng-select.ng-select-multiple .ng-select-container .ng-value-container{max-height:58px;font-size:14px;line-height:18px}:host ::ng-deep ng-select.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{color:#333;height:24px;padding:2px 16px;font-size:12px;margin:2px 4px 2px 0;background:#f0f1f4;display:flex;flex-direction:row-reverse;align-items:center;border-radius:12px}:host ::ng-deep ng-select.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value-label{line-height:20px;padding:0!important}:host ::ng-deep ng-select.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value-icon{border:none!important;padding:0!important;width:20px;display:flex;align-items:center;color:transparent;margin-left:4px}:host ::ng-deep ng-select.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value-icon:before{font-family:DataRails!important;content:\"\\ea53\";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-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}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select{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 .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-disabled{cursor:default}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .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-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-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:97%;word-break:break-word;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}\n"], dependencies: [{ kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i3.NgOptgroupTemplateDirective, selector: "[ng-optgroup-tmp]" }, { kind: "directive", type: i3.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i3.NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { kind: "directive", type: i3.NgHeaderTemplateDirective, selector: "[ng-header-tmp]" }, { kind: "directive", type: i3.NgFooterTemplateDirective, selector: "[ng-footer-tmp]" }, { kind: "directive", type: i3.NgLoadingSpinnerTemplateDirective, selector: "[ng-loadingspinner-tmp]" }, { kind: "directive", type: DrSpinnerDirective, selector: "[drSpinner]", inputs: ["drSpinner", "drSpinnerSize", "drSpinnerType", "drSpinnerNoOverlay"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DrSelectComponent, decorators: [{
             type: Component,
@@ -830,7 +830,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: DrSelectComponent,
                             multi: true
-                        }], template: "<ng-select [(ngModel)]=\"selectedItem\"\n           [items]=\"items\"\n           [bindLabel]=\"bindLabel\"\n           [bindValue]=\"bindValue\"\n           [multiple]=\"multiple\"\n           [addTag]=\"addTag\"\n           [appendTo]=\"appendTo\"\n           [clearable]=\"clearable\"\n           [searchable]=\"searchable\"\n           [hideSelected]=\"hideSelected\"\n           [placeholder]=\"placeholder\"\n           [loading]=\"loading\"\n           [loadingText]=\"loadingText\"\n           [readonly]=\"readonly\"\n           [closeOnSelect]=\"closeOnSelect\"\n           [disabled]=\"disabled\"\n           [id]=\"id\"\n           [keyDownFn]=\"keyDownFn\"\n           [searchFn]=\"searchFn\"\n           [isOpen]=\"isOpen\"\n           [groupBy]=\"groupBy\"\n           [attr.autofocus]=\"autofocus\"\n           (change)=\"onChange(selectedItem); change.emit(selectedItem)\"\n           (open)=\"open.emit($event); onDropdownOpen()\"\n           (close)=\"closeUp.emit($event);\"\n           class=\"dr-select\"\n           #selectComponent>\n    <ng-template *ngIf=\"optionHeaderTemplate\" ng-header-tmp let-item=\"item\">\n        <ng-container [ngTemplateOutlet]=\"optionHeaderTemplate\" [ngTemplateOutletContext]=\"{item: item}\"></ng-container>\n    </ng-template>\n    <ng-template *ngIf=\"labelTemplate\" ng-label-tmp let-item=\"item\">\n        <ng-container [ngTemplateOutlet]=\"labelTemplate\" [ngTemplateOutletContext]=\"{item: item}\"></ng-container>\n    </ng-template>\n    <ng-template *ngIf=\"optionTemplate\" ng-option-tmp let-item=\"item\">\n        <ng-container [ngTemplateOutlet]=\"optionTemplate\" [ngTemplateOutletContext]=\"{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\"\n            >{{ item?.description }}</div>\n        </div>\n    </ng-template>\n    <ng-template *ngIf=\"optionFooterTemplate\" ng-footer-tmp let-item=\"item\">\n        <ng-container [ngTemplateOutlet]=\"optionFooterTemplate\" [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 *ngIf=\"loading\"\n             class=\"dr-select__loading\"\n             [drSpinner]=\"loading\"\n             [drSpinnerType]=\"'circle'\"\n             [drSpinnerSize]=\"'small'\"\n             [drSpinnerNoOverlay]=\"true\">\n        </div>\n    </ng-template>\n</ng-select>\n", styles: [":host{width:100%;height:32px}: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{text-decoration-line:underline;color:#0b5af9}:host.textView::ng-deep ng-select.ng-select .ng-select-container .ng-arrow{border:none;width:auto;height:auto;display:flex;text-decoration-line:none;top:0}:host.textView::ng-deep ng-select.ng-select .ng-select-container .ng-arrow:before{font-family:DataRails!important;content:\"\\ea13\";font-size:24px;color:#333}:host.no-left-border-radius ::ng-deep ng-select.ng-select .ng-select-container{border-bottom-left-radius:0!important;border-top-left-radius:0!important}:host.no-right-border-radius ::ng-deep ng-select.ng-select .ng-select-container{border-bottom-right-radius:0!important;border-top-right-radius:0!important}:host.no-right-border ::ng-deep ng-select.ng-select .ng-select-container{border-right:none!important}:host.no-left-border ::ng-deep ng-select.ng-select .ng-select-container{border-left:none!important}:host ::ng-deep ng-select.ng-select .ng-select-container{min-height:32px;height:32px;width:100%;border-radius:6px;border:1px solid #9EA1AA;box-shadow:none!important}:host ::ng-deep ng-select.ng-select .ng-select-container:hover{border-color:#4646ce}:host ::ng-deep ng-select.ng-select .ng-select-container:focus-within{border-color:#4646ce}:host ::ng-deep ng-select.ng-select .ng-select-container .ng-input{top:0!important;line-height:30px;padding:0 50px 0 8px!important;color:#333;font-size:14px;font-weight:400}:host ::ng-deep ng-select.ng-select .ng-select-container .ng-input input::placeholder{color:#6d6e6f;font-size:14px;line-height:18px}:host ::ng-deep ng-select.ng-select .ng-select-container .ng-value-container{padding:0 0 0 8px;height:100%;overflow:auto;font-size:14px;line-height:18px}:host ::ng-deep ng-select.ng-select .ng-select-container .ng-value-container .ng-input{padding:0 0 0 3px!important}:host ::ng-deep ng-select.ng-select .ng-select-container .ng-arrow-wrapper{margin-right:7px}:host ::ng-deep ng-select.ng-select .ng-select-container .ng-arrow-wrapper .ng-arrow{border:none;width:auto;height:auto;display:flex;text-decoration-line:none;top:0}:host ::ng-deep ng-select.ng-select .ng-select-container .ng-arrow-wrapper .ng-arrow:before{font-family:DataRails!important;content:\"\\ea13\";font-size:24px;color:#6d6e6f}:host ::ng-deep ng-select.ng-select.ng-select-opened .ng-select-container{border-radius:6px}:host ::ng-deep ng-select.ng-select.ng-select-multiple .ng-select-container{max-height:58px;height:100%}:host ::ng-deep ng-select.ng-select.ng-select-multiple .ng-select-container .ng-value-container{max-height:58px;font-size:14px;line-height:18px}:host ::ng-deep ng-select.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{color:#333;height:24px;padding:2px 16px;font-size:12px;margin:2px 4px 2px 0;background:#f0f1f4;display:flex;flex-direction:row-reverse;align-items:center;border-radius:12px}:host ::ng-deep ng-select.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value-label{line-height:20px;padding:0!important}:host ::ng-deep ng-select.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value-icon{border:none!important;padding:0!important;width:20px;display:flex;align-items:center;color:transparent;margin-left:4px}:host ::ng-deep ng-select.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value-icon:before{font-family:DataRails!important;content:\"\\ea54\";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-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}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select{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 .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-disabled{cursor:default}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .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-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-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:97%;word-break:break-word;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}\n"] }]
+                        }], template: "<ng-select [(ngModel)]=\"selectedItem\"\n           [items]=\"items\"\n           [bindLabel]=\"bindLabel\"\n           [bindValue]=\"bindValue\"\n           [multiple]=\"multiple\"\n           [addTag]=\"addTag\"\n           [appendTo]=\"appendTo\"\n           [clearable]=\"clearable\"\n           [searchable]=\"searchable\"\n           [hideSelected]=\"hideSelected\"\n           [placeholder]=\"placeholder\"\n           [loading]=\"loading\"\n           [loadingText]=\"loadingText\"\n           [readonly]=\"readonly\"\n           [closeOnSelect]=\"closeOnSelect\"\n           [disabled]=\"disabled\"\n           [id]=\"id\"\n           [keyDownFn]=\"keyDownFn\"\n           [searchFn]=\"searchFn\"\n           [isOpen]=\"isOpen\"\n           [groupBy]=\"groupBy\"\n           [attr.autofocus]=\"autofocus\"\n           (change)=\"onChange(selectedItem); change.emit(selectedItem)\"\n           (open)=\"open.emit($event); onDropdownOpen()\"\n           (close)=\"closeUp.emit($event);\"\n           class=\"dr-select\"\n           #selectComponent>\n    <ng-template *ngIf=\"optionHeaderTemplate\" ng-header-tmp let-item=\"item\">\n        <ng-container [ngTemplateOutlet]=\"optionHeaderTemplate\" [ngTemplateOutletContext]=\"{item: item}\"></ng-container>\n    </ng-template>\n    <ng-template *ngIf=\"labelTemplate\" ng-label-tmp let-item=\"item\">\n        <ng-container [ngTemplateOutlet]=\"labelTemplate\" [ngTemplateOutletContext]=\"{item: item}\"></ng-container>\n    </ng-template>\n    <ng-template *ngIf=\"optionTemplate\" ng-option-tmp let-item=\"item\">\n        <ng-container [ngTemplateOutlet]=\"optionTemplate\" [ngTemplateOutletContext]=\"{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\"\n            >{{ item?.description }}</div>\n        </div>\n    </ng-template>\n    <ng-template *ngIf=\"optionFooterTemplate\" ng-footer-tmp let-item=\"item\">\n        <ng-container [ngTemplateOutlet]=\"optionFooterTemplate\" [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 *ngIf=\"loading\"\n             class=\"dr-select__loading\"\n             [drSpinner]=\"loading\"\n             [drSpinnerType]=\"'circle'\"\n             [drSpinnerSize]=\"'small'\"\n             [drSpinnerNoOverlay]=\"true\">\n        </div>\n    </ng-template>\n</ng-select>\n", styles: [":host{width:100%;height:32px}: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{text-decoration-line:underline;color:#0b5af9}:host.textView::ng-deep ng-select.ng-select .ng-select-container .ng-arrow{border:none;width:auto;height:auto;display:flex;text-decoration-line:none;top:0}:host.textView::ng-deep ng-select.ng-select .ng-select-container .ng-arrow:before{font-family:DataRails!important;content:\"\\ea13\";font-size:24px;color:#333}:host.no-left-border-radius ::ng-deep ng-select.ng-select .ng-select-container{border-bottom-left-radius:0!important;border-top-left-radius:0!important}:host.no-right-border-radius ::ng-deep ng-select.ng-select .ng-select-container{border-bottom-right-radius:0!important;border-top-right-radius:0!important}:host.no-right-border ::ng-deep ng-select.ng-select .ng-select-container{border-right:none!important}:host.no-left-border ::ng-deep ng-select.ng-select .ng-select-container{border-left:none!important}:host ::ng-deep ng-select.ng-select .ng-select-container{min-height:32px;height:32px;width:100%;border-radius:6px;border:1px solid #9EA1AA;box-shadow:none!important}:host ::ng-deep ng-select.ng-select .ng-select-container:hover{border-color:#4646ce}:host ::ng-deep ng-select.ng-select .ng-select-container:focus-within{border-color:#4646ce}:host ::ng-deep ng-select.ng-select .ng-select-container .ng-input{top:0!important;line-height:30px;padding:0 50px 0 8px!important;color:#333;font-size:14px;font-weight:400}:host ::ng-deep ng-select.ng-select .ng-select-container .ng-input input::placeholder{color:#6d6e6f;font-size:14px;line-height:18px}:host ::ng-deep ng-select.ng-select .ng-select-container .ng-value-container{padding:0 0 0 8px;height:100%;overflow:auto;font-size:14px;line-height:18px}:host ::ng-deep ng-select.ng-select .ng-select-container .ng-value-container .ng-input{padding:0 0 0 3px!important}:host ::ng-deep ng-select.ng-select .ng-select-container .ng-arrow-wrapper{margin-right:7px}:host ::ng-deep ng-select.ng-select .ng-select-container .ng-arrow-wrapper .ng-arrow{border:none;width:auto;height:auto;display:flex;text-decoration-line:none;top:0}:host ::ng-deep ng-select.ng-select .ng-select-container .ng-arrow-wrapper .ng-arrow:before{font-family:DataRails!important;content:\"\\ea13\";font-size:24px;color:#6d6e6f}:host ::ng-deep ng-select.ng-select.ng-select-opened .ng-select-container{border-radius:6px}:host ::ng-deep ng-select.ng-select.ng-select-multiple .ng-select-container{max-height:58px;height:100%}:host ::ng-deep ng-select.ng-select.ng-select-multiple .ng-select-container .ng-value-container{max-height:58px;font-size:14px;line-height:18px}:host ::ng-deep ng-select.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{color:#333;height:24px;padding:2px 16px;font-size:12px;margin:2px 4px 2px 0;background:#f0f1f4;display:flex;flex-direction:row-reverse;align-items:center;border-radius:12px}:host ::ng-deep ng-select.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value-label{line-height:20px;padding:0!important}:host ::ng-deep ng-select.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value-icon{border:none!important;padding:0!important;width:20px;display:flex;align-items:center;color:transparent;margin-left:4px}:host ::ng-deep ng-select.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value-icon:before{font-family:DataRails!important;content:\"\\ea53\";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-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}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select{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 .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-disabled{cursor:default}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .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-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-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:97%;word-break:break-word;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}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { className: [{
                 type: Input
             }], items: [{
@@ -4030,7 +4030,6 @@ class DrChatComponent {
             });
         }
     }
-    ;
     /**
      * Scroll chat to the bottom of the list when a new message arrives
      */
@@ -4041,13 +4040,11 @@ class DrChatComponent {
         this._scrollBottom = !!value;
     }
     get messagesContainerWithScroll() {
-        return this.messagesContainer && this.messagesContainer.nativeElement.scrollHeight > this.messagesContainer.nativeElement.offsetHeight;
+        return (this.messagesContainer && this.messagesContainer.nativeElement.scrollHeight > this.messagesContainer.nativeElement.offsetHeight);
     }
-    ;
     constructor(cdr) {
         this.cdr = cdr;
         this.destroy$ = new Subject();
-        this.showClearButton = true;
         this.noMessagesPlaceholder = 'No messages yet.';
         this._scrollBottom = true;
         this.suggestions = [];
@@ -4057,8 +4054,6 @@ class DrChatComponent {
          * @type {boolean}
          */
         this.waitForReply = false;
-        this.clear = new EventEmitter();
-        this.close = new EventEmitter();
         this.suggestionSelect = new EventEmitter();
     }
     ngAfterViewInit() {
@@ -4091,8 +4086,7 @@ class DrChatComponent {
         this.destroy$.next();
         this.destroy$.complete();
     }
-    onClearClick($event) {
-        this.clear.emit($event);
+    clearHiddenSuggestions() {
         if (this._chatSuggestions) {
             this._chatSuggestions.clearHidden();
         }
@@ -4103,19 +4097,13 @@ class DrChatComponent {
         }
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DrChatComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DrChatComponent, selector: "dr-chat", inputs: { fullScreen: "fullScreen", title: "title", subtitle: "subtitle", showClearButton: "showClearButton", noMessagesPlaceholder: "noMessagesPlaceholder", contentUpdateSubject: "contentUpdateSubject", scrollBottom: "scrollBottom", suggestions: "suggestions", reopen: "reopen", waitForReply: "waitForReply" }, outputs: { clear: "clear", close: "close", suggestionSelect: "suggestionSelect" }, providers: [DrChatCustomMessageService], queries: [{ propertyName: "chatForm", first: true, predicate: DrChatFormComponent, descendants: true }, { propertyName: "messages", predicate: DrChatMessageComponent }], viewQueries: [{ propertyName: "messagesContainer", first: true, predicate: ["messagesContainer"], descendants: true }, { propertyName: "_chatSuggestions", first: true, predicate: DrChatSuggestionsComponent, descendants: true }], ngImport: i0, template: "<div class=\"chat\" [class.chat--in-full-screen]=\"fullScreen\">\n\n    <div class=\"chat__sticky-top\">\n        <div class=\"chat__header\">\n            <div class=\"chat__header__logo\"></div>\n\n            <div class=\"chat__header__text\">\n                <div class=\"chat__header__text__title\">{{ title }}</div>\n                <div *ngIf=\"subtitle\" class=\"chat__header__text__subtitle\">{{ subtitle }}</div>\n            </div>\n\n            <dr-button *ngIf=\"showClearButton\"\n                       (click)=\"onClearClick($event)\"\n                       theme=\"icon\"\n                       icon=\"dr-icon-clear\"\n                       class=\"ml-auto\"\n                       drTooltip=\"Clear chat\">\n            </dr-button>\n\n            <dr-button *ngIf=\"!fullScreen\"\n                       (click)=\"close.emit($event)\"\n                       theme=\"icon\"\n                       icon=\"dr-icon-exit\"\n                       class=\"ml-4\"\n                       drTooltip=\"Close\">\n            </dr-button>\n        </div>\n        <div class=\"chat__alert\">\n            <ng-content select=\"dr-chat-alert\"></ng-content>\n        </div>\n    </div>\n\n    <div *ngIf=\"!messages?.length\" class=\"chat__empty-state\">\n        <span class=\"chat__empty-state__text\">{{ noMessagesPlaceholder }}</span>\n    </div>\n\n    <div *ngIf=\"messages?.length\" class=\"chat__messages\">\n        <div #messagesContainer class=\"chat__messages__container\"\n             [class.chat__messages__container--scroll]=\"messagesContainerWithScroll\">\n            <ng-content select=\"dr-chat-message\"></ng-content>\n        </div>\n    </div>\n\n    <dr-chat-suggestions *ngIf=\"suggestions?.length\"\n                         [values]=\"suggestions\"\n                         [fullScreen]=\"fullScreen\"\n                         [waitForReply]=\"waitForReply\"\n                         class=\"chat__suggestions\"\n                         [class.chat__suggestions--full-height]=\"fullScreen && !messages?.length\"\n                         [buttonMode]=\"!!messages?.length\"\n                         (suggestionSelect)=\"suggestionSelect.emit($event)\">\n    </dr-chat-suggestions>\n\n    <div class=\"form\">\n        <ng-content select=\"dr-chat-form\"></ng-content>\n    </div>\n</div>\n", styles: [":host{height:100%;width:100%;display:flex;flex-direction:column}.chat{position:relative;display:flex;flex-grow:1;flex-direction:column;height:100%;background-color:#fff;color:#4e566c;font-family:Poppins,sans-serif;font-size:14px;font-weight:400;line-height:22px}.chat__sticky-top{display:flex;flex-direction:column;box-shadow:0 1px 3px #0003;z-index:1}.chat__sticky-top .chat__header{display:flex;align-items:center;background-color:#f2f2ff;color:#25258c;padding:11px 22px 10px 15px;font-weight:400;font-size:20px;line-height:28px}.chat__sticky-top .chat__header__text{display:flex;flex-direction:column;flex-grow:1}.chat__sticky-top .chat__header__text__title{display:flex;align-items:center}.chat__sticky-top .chat__header__text__title:after{content:\"BETA\";display:inline-flex;padding:2px 6px;background:#7b61ff;color:#fff;font-weight:600;font-size:10px;line-height:14px;border-radius:4px;margin-left:12px;font-family:Nunito Sans,sans-serif}.chat__sticky-top .chat__header__text__subtitle{font-size:14px;line-height:22px}.chat__sticky-top .chat__header dr-button::ng-deep button:not(:hover){color:#25258c}.chat__empty-state{display:flex;justify-content:center}.chat__empty-state__text{padding:20px 0;font-family:Poppins,sans-serif;font-size:20px;font-weight:300;line-height:30px;text-align:center;max-width:440px;color:#4646ce}.chat__messages{display:flex;flex-grow:1;overflow-x:hidden;overflow-y:auto;height:100%;width:100%}.chat__messages__container{overflow-y:auto;overflow-x:hidden;display:flex;flex-shrink:0;flex-direction:column;width:100%;padding-bottom:1px}.chat__messages__container--scroll::ng-deep dr-chat-message{padding-right:16px}.chat__suggestions--full-height{flex-grow:1;height:1px;overflow:auto}.chat--in-full-screen .chat__header{padding-left:48px;padding-right:48px}.chat--in-full-screen .chat__empty-state__text{padding:77px 0;font-size:28px;line-height:46px;max-width:570px}.chat--in-full-screen .chat__messages::ng-deep dr-chat-message{justify-content:center}.chat--in-full-screen .chat__messages::ng-deep .message{max-width:919px}.chat--in-full-screen .chat__suggestions::ng-deep .chat-suggestions__items{padding-left:0;padding-right:0}.chat--in-full-screen .chat__suggestions::ng-deep .chat-suggestions__items__item{margin:0 0 26px;height:80px;width:310px;font-size:16px}.chat--in-full-screen .chat__suggestions::ng-deep .chat-suggestions__container{padding:0}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: DrButtonComponent, selector: "dr-button", inputs: ["theme", "icon", "iconColor", "iconSize", "iconAfter", "iconAfterColor", "iconAfterSize", "disabled", "isLoading", "isActive"] }, { kind: "directive", type: DrTooltipDirective, selector: "[drTooltip]", inputs: ["drTooltip", "drTooltipContext", "drTooltipPosition", "drTooltipClass", "drTooltipTheme", "drTooltipMousleaveTimeout", "drTooltipOptions", "drTooltipShow"] }, { kind: "component", type: DrChatSuggestionsComponent, selector: "dr-chat-suggestions", inputs: ["values", "fullScreen", "buttonMode", "waitForReply"], outputs: ["suggestionSelect"] }] }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DrChatComponent, selector: "dr-chat", inputs: { fullScreen: "fullScreen", noMessagesPlaceholder: "noMessagesPlaceholder", contentUpdateSubject: "contentUpdateSubject", scrollBottom: "scrollBottom", suggestions: "suggestions", reopen: "reopen", waitForReply: "waitForReply" }, outputs: { suggestionSelect: "suggestionSelect" }, providers: [DrChatCustomMessageService], queries: [{ propertyName: "chatForm", first: true, predicate: DrChatFormComponent, descendants: true }, { propertyName: "chatHeader", first: true, predicate: ["drChatHeader"], descendants: true }, { propertyName: "messages", predicate: DrChatMessageComponent }], viewQueries: [{ propertyName: "messagesContainer", first: true, predicate: ["messagesContainer"], descendants: true }, { propertyName: "_chatSuggestions", first: true, predicate: DrChatSuggestionsComponent, descendants: true }], ngImport: i0, template: "<div class=\"chat\" [class.chat--in-full-screen]=\"fullScreen\">\n    <div class=\"chat__sticky-top\">\n        <ng-container *ngIf=\"chatHeader\" [ngTemplateOutlet]=\"chatHeader\"></ng-container>\n\n        <div class=\"chat__alert\">\n            <ng-content select=\"dr-chat-alert\"></ng-content>\n        </div>\n    </div>\n\n    <div *ngIf=\"!messages?.length\" class=\"chat__empty-state\">\n        <span class=\"chat__empty-state__text\">{{ noMessagesPlaceholder }}</span>\n    </div>\n\n    <div *ngIf=\"messages?.length\" class=\"chat__messages\">\n        <div #messagesContainer class=\"chat__messages__container\"\n             [class.chat__messages__container--scroll]=\"messagesContainerWithScroll\">\n            <ng-content select=\"dr-chat-message\"></ng-content>\n        </div>\n    </div>\n\n    <dr-chat-suggestions *ngIf=\"suggestions?.length\"\n                         [values]=\"suggestions\"\n                         [fullScreen]=\"fullScreen\"\n                         [waitForReply]=\"waitForReply\"\n                         class=\"chat__suggestions\"\n                         [class.chat__suggestions--full-height]=\"fullScreen && !messages?.length\"\n                         [buttonMode]=\"!!messages?.length\"\n                         (suggestionSelect)=\"suggestionSelect.emit($event)\">\n    </dr-chat-suggestions>\n\n    <div class=\"form\">\n        <ng-content select=\"dr-chat-form\"></ng-content>\n    </div>\n</div>\n", styles: [":host{height:100%;width:100%;display:flex;flex-direction:column}.chat{position:relative;display:flex;flex-grow:1;flex-direction:column;height:100%;background-color:#fff;color:#4e566c;font-family:Poppins,sans-serif;font-size:14px;font-weight:400;line-height:22px}.chat__sticky-top{display:flex;flex-direction:column;box-shadow:0 1px 3px #0003;z-index:1}.chat__empty-state{display:flex;justify-content:center}.chat__empty-state__text{padding:20px 0;font-family:Poppins,sans-serif;font-size:20px;font-weight:300;line-height:30px;text-align:center;max-width:440px;color:#4646ce}.chat__messages{display:flex;flex-grow:1;overflow-x:hidden;overflow-y:auto;height:100%;width:100%}.chat__messages__container{overflow-y:auto;overflow-x:hidden;display:flex;flex-shrink:0;flex-direction:column;width:100%;padding-bottom:1px}.chat__messages__container--scroll::ng-deep dr-chat-message{padding-right:16px}.chat__suggestions{flex:1}.chat__suggestions--full-height{flex-grow:1;height:1px;overflow:auto}.chat--in-full-screen .chat__header{padding-left:48px;padding-right:48px}.chat--in-full-screen .chat__empty-state__text{padding:77px 0;font-size:28px;line-height:46px;max-width:570px}.chat--in-full-screen .chat__messages::ng-deep dr-chat-message{justify-content:center}.chat--in-full-screen .chat__messages::ng-deep .message{max-width:919px}.chat--in-full-screen .chat__suggestions::ng-deep .chat-suggestions__items{padding-left:0;padding-right:0}.chat--in-full-screen .chat__suggestions::ng-deep .chat-suggestions__items__item{margin:0 0 26px;height:80px;width:310px;font-size:16px}.chat--in-full-screen .chat__suggestions::ng-deep .chat-suggestions__container{padding:0}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: DrChatSuggestionsComponent, selector: "dr-chat-suggestions", inputs: ["values", "fullScreen", "buttonMode", "waitForReply"], outputs: ["suggestionSelect"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DrChatComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'dr-chat', providers: [DrChatCustomMessageService], template: "<div class=\"chat\" [class.chat--in-full-screen]=\"fullScreen\">\n\n    <div class=\"chat__sticky-top\">\n        <div class=\"chat__header\">\n            <div class=\"chat__header__logo\"></div>\n\n            <div class=\"chat__header__text\">\n                <div class=\"chat__header__text__title\">{{ title }}</div>\n                <div *ngIf=\"subtitle\" class=\"chat__header__text__subtitle\">{{ subtitle }}</div>\n            </div>\n\n            <dr-button *ngIf=\"showClearButton\"\n                       (click)=\"onClearClick($event)\"\n                       theme=\"icon\"\n                       icon=\"dr-icon-clear\"\n                       class=\"ml-auto\"\n                       drTooltip=\"Clear chat\">\n            </dr-button>\n\n            <dr-button *ngIf=\"!fullScreen\"\n                       (click)=\"close.emit($event)\"\n                       theme=\"icon\"\n                       icon=\"dr-icon-exit\"\n                       class=\"ml-4\"\n                       drTooltip=\"Close\">\n            </dr-button>\n        </div>\n        <div class=\"chat__alert\">\n            <ng-content select=\"dr-chat-alert\"></ng-content>\n        </div>\n    </div>\n\n    <div *ngIf=\"!messages?.length\" class=\"chat__empty-state\">\n        <span class=\"chat__empty-state__text\">{{ noMessagesPlaceholder }}</span>\n    </div>\n\n    <div *ngIf=\"messages?.length\" class=\"chat__messages\">\n        <div #messagesContainer class=\"chat__messages__container\"\n             [class.chat__messages__container--scroll]=\"messagesContainerWithScroll\">\n            <ng-content select=\"dr-chat-message\"></ng-content>\n        </div>\n    </div>\n\n    <dr-chat-suggestions *ngIf=\"suggestions?.length\"\n                         [values]=\"suggestions\"\n                         [fullScreen]=\"fullScreen\"\n                         [waitForReply]=\"waitForReply\"\n                         class=\"chat__suggestions\"\n                         [class.chat__suggestions--full-height]=\"fullScreen && !messages?.length\"\n                         [buttonMode]=\"!!messages?.length\"\n                         (suggestionSelect)=\"suggestionSelect.emit($event)\">\n    </dr-chat-suggestions>\n\n    <div class=\"form\">\n        <ng-content select=\"dr-chat-form\"></ng-content>\n    </div>\n</div>\n", styles: [":host{height:100%;width:100%;display:flex;flex-direction:column}.chat{position:relative;display:flex;flex-grow:1;flex-direction:column;height:100%;background-color:#fff;color:#4e566c;font-family:Poppins,sans-serif;font-size:14px;font-weight:400;line-height:22px}.chat__sticky-top{display:flex;flex-direction:column;box-shadow:0 1px 3px #0003;z-index:1}.chat__sticky-top .chat__header{display:flex;align-items:center;background-color:#f2f2ff;color:#25258c;padding:11px 22px 10px 15px;font-weight:400;font-size:20px;line-height:28px}.chat__sticky-top .chat__header__text{display:flex;flex-direction:column;flex-grow:1}.chat__sticky-top .chat__header__text__title{display:flex;align-items:center}.chat__sticky-top .chat__header__text__title:after{content:\"BETA\";display:inline-flex;padding:2px 6px;background:#7b61ff;color:#fff;font-weight:600;font-size:10px;line-height:14px;border-radius:4px;margin-left:12px;font-family:Nunito Sans,sans-serif}.chat__sticky-top .chat__header__text__subtitle{font-size:14px;line-height:22px}.chat__sticky-top .chat__header dr-button::ng-deep button:not(:hover){color:#25258c}.chat__empty-state{display:flex;justify-content:center}.chat__empty-state__text{padding:20px 0;font-family:Poppins,sans-serif;font-size:20px;font-weight:300;line-height:30px;text-align:center;max-width:440px;color:#4646ce}.chat__messages{display:flex;flex-grow:1;overflow-x:hidden;overflow-y:auto;height:100%;width:100%}.chat__messages__container{overflow-y:auto;overflow-x:hidden;display:flex;flex-shrink:0;flex-direction:column;width:100%;padding-bottom:1px}.chat__messages__container--scroll::ng-deep dr-chat-message{padding-right:16px}.chat__suggestions--full-height{flex-grow:1;height:1px;overflow:auto}.chat--in-full-screen .chat__header{padding-left:48px;padding-right:48px}.chat--in-full-screen .chat__empty-state__text{padding:77px 0;font-size:28px;line-height:46px;max-width:570px}.chat--in-full-screen .chat__messages::ng-deep dr-chat-message{justify-content:center}.chat--in-full-screen .chat__messages::ng-deep .message{max-width:919px}.chat--in-full-screen .chat__suggestions::ng-deep .chat-suggestions__items{padding-left:0;padding-right:0}.chat--in-full-screen .chat__suggestions::ng-deep .chat-suggestions__items__item{margin:0 0 26px;height:80px;width:310px;font-size:16px}.chat--in-full-screen .chat__suggestions::ng-deep .chat-suggestions__container{padding:0}\n"] }]
+            args: [{ selector: 'dr-chat', providers: [DrChatCustomMessageService], template: "<div class=\"chat\" [class.chat--in-full-screen]=\"fullScreen\">\n    <div class=\"chat__sticky-top\">\n        <ng-container *ngIf=\"chatHeader\" [ngTemplateOutlet]=\"chatHeader\"></ng-container>\n\n        <div class=\"chat__alert\">\n            <ng-content select=\"dr-chat-alert\"></ng-content>\n        </div>\n    </div>\n\n    <div *ngIf=\"!messages?.length\" class=\"chat__empty-state\">\n        <span class=\"chat__empty-state__text\">{{ noMessagesPlaceholder }}</span>\n    </div>\n\n    <div *ngIf=\"messages?.length\" class=\"chat__messages\">\n        <div #messagesContainer class=\"chat__messages__container\"\n             [class.chat__messages__container--scroll]=\"messagesContainerWithScroll\">\n            <ng-content select=\"dr-chat-message\"></ng-content>\n        </div>\n    </div>\n\n    <dr-chat-suggestions *ngIf=\"suggestions?.length\"\n                         [values]=\"suggestions\"\n                         [fullScreen]=\"fullScreen\"\n                         [waitForReply]=\"waitForReply\"\n                         class=\"chat__suggestions\"\n                         [class.chat__suggestions--full-height]=\"fullScreen && !messages?.length\"\n                         [buttonMode]=\"!!messages?.length\"\n                         (suggestionSelect)=\"suggestionSelect.emit($event)\">\n    </dr-chat-suggestions>\n\n    <div class=\"form\">\n        <ng-content select=\"dr-chat-form\"></ng-content>\n    </div>\n</div>\n", styles: [":host{height:100%;width:100%;display:flex;flex-direction:column}.chat{position:relative;display:flex;flex-grow:1;flex-direction:column;height:100%;background-color:#fff;color:#4e566c;font-family:Poppins,sans-serif;font-size:14px;font-weight:400;line-height:22px}.chat__sticky-top{display:flex;flex-direction:column;box-shadow:0 1px 3px #0003;z-index:1}.chat__empty-state{display:flex;justify-content:center}.chat__empty-state__text{padding:20px 0;font-family:Poppins,sans-serif;font-size:20px;font-weight:300;line-height:30px;text-align:center;max-width:440px;color:#4646ce}.chat__messages{display:flex;flex-grow:1;overflow-x:hidden;overflow-y:auto;height:100%;width:100%}.chat__messages__container{overflow-y:auto;overflow-x:hidden;display:flex;flex-shrink:0;flex-direction:column;width:100%;padding-bottom:1px}.chat__messages__container--scroll::ng-deep dr-chat-message{padding-right:16px}.chat__suggestions{flex:1}.chat__suggestions--full-height{flex-grow:1;height:1px;overflow:auto}.chat--in-full-screen .chat__header{padding-left:48px;padding-right:48px}.chat--in-full-screen .chat__empty-state__text{padding:77px 0;font-size:28px;line-height:46px;max-width:570px}.chat--in-full-screen .chat__messages::ng-deep dr-chat-message{justify-content:center}.chat--in-full-screen .chat__messages::ng-deep .message{max-width:919px}.chat--in-full-screen .chat__suggestions::ng-deep .chat-suggestions__items{padding-left:0;padding-right:0}.chat--in-full-screen .chat__suggestions::ng-deep .chat-suggestions__items__item{margin:0 0 26px;height:80px;width:310px;font-size:16px}.chat--in-full-screen .chat__suggestions::ng-deep .chat-suggestions__container{padding:0}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { fullScreen: [{
                 type: Input
-            }], title: [{
-                type: Input
-            }], subtitle: [{
-                type: Input
-            }], showClearButton: [{
-                type: Input
             }], noMessagesPlaceholder: [{
                 type: Input
             }], contentUpdateSubject: [{
@@ -4137,10 +4125,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }], chatForm: [{
                 type: ContentChild,
                 args: [DrChatFormComponent]
-            }], clear: [{
-                type: Output
-            }], close: [{
-                type: Output
+            }], chatHeader: [{
+                type: ContentChild,
+                args: ['drChatHeader']
             }], suggestionSelect: [{
                 type: Output
             }], _chatSuggestions: [{