@datarailsshared/datarailsshared 1.6.21 → 1.6.25

package/fesm2022/datarailsshared-datarailsshared.mjs

@@ -6641,180 +6641,650 @@ class DrChatComponent {
             args: [DrChatSuggestionsComponent]
         }] }); })();
 
-const throwCustomMessageTypeIsRequired = () => {
-    throw new Error('[drCustomMessage]: custom message type is required.');
-};
-class DrChatCustomMessageDirective {
-    /**
-     * Defines a message type which should rendered with the custom message template.
-     *
-     * @type {string}
-     */
-    get drCustomMessage() {
-        return this._type;
+class ClickOutsideDirective {
+    constructor(_document /*: HTMLDocument*/, _el) {
+        this._document = _document;
+        this._el = _el;
+        this.attachOutsideOnClick = false;
+        this.exclude = '';
+        this.clickOutside = new EventEmitter();
+        this._nodesExcluded = [];
+        this._initOnClickBody = this._initOnClickBody.bind(this);
+        this._onClickBody = this._onClickBody.bind(this);
     }
-    set drCustomMessage(value) {
-        this._type = value;
+    ngOnInit() {
+        this._init();
     }
-    get type() {
-        return this._type;
+    ngOnDestroy() {
+        if (this.attachOutsideOnClick) {
+            this._el.nativeElement.removeEventListener('click', this._initOnClickBody);
+        }
+        this._document.body.removeEventListener('click', this._onClickBody);
     }
-    constructor(templateRef, customMessageService) {
-        this.templateRef = templateRef;
-        this.customMessageService = customMessageService;
+    ngOnChanges(changes) {
+        if (changes['attachOutsideOnClick'] || changes['exclude']) {
+            this._init();
+        }
     }
-    ngOnInit() {
-        if (!this._type) {
-            throwCustomMessageTypeIsRequired();
+    _init() {
+        if (this.exclude) {
+            this.exclude.split(',').forEach((selector) => {
+                if (selector) {
+                    try {
+                        const node = this._document.querySelector(selector.trim());
+                        if (node) {
+                            this._nodesExcluded.push(node);
+                        }
+                    }
+                    catch (err) {
+                        if (window.console) {
+                            window.console.error('[ng2-click-outside] Check your exclude selector syntax.', err);
+                        }
+                    }
+                }
+            });
+        }
+        if (this.attachOutsideOnClick) {
+            this._el.nativeElement.addEventListener('click', this._initOnClickBody);
+        }
+        else {
+            this._initOnClickBody();
         }
-        this.customMessageService.register(this.type, this);
     }
-    ngOnDestroy() {
-        this.customMessageService.unregister(this.type);
+    /** @internal */
+    _initOnClickBody() {
+        this._document.body.addEventListener('click', this._onClickBody);
     }
-    /** @nocollapse */ static { this.ɵfac = function DrChatCustomMessageDirective_Factory(t) { return new (t || DrChatCustomMessageDirective)(i0.ɵɵdirectiveInject(i0.TemplateRef), i0.ɵɵdirectiveInject(DrChatCustomMessageService)); }; }
-    /** @nocollapse */ static { this.ɵdir = /** @pureOrBreakMyCode */ i0.ɵɵdefineDirective({ type: DrChatCustomMessageDirective, selectors: [["", "drCustomMessage", ""]], inputs: { drCustomMessage: "drCustomMessage" } }); }
+    /** @internal */
+    _onClickBody(e) {
+        if (!this._el.nativeElement.contains(e.target) && !this._shouldExclude(e.target)) {
+            this.clickOutside.emit(e);
+            if (this.attachOutsideOnClick) {
+                this._document.body.removeEventListener('click', this._onClickBody);
+            }
+        }
+    }
+    /** @internal */
+    _shouldExclude(target) {
+        for (let i = 0; i < this._nodesExcluded.length; i++) {
+            if (this._nodesExcluded[i].contains(target)) {
+                return true;
+            }
+        }
+        return false;
+    }
+    /** @nocollapse */ static { this.ɵfac = function ClickOutsideDirective_Factory(t) { return new (t || ClickOutsideDirective)(i0.ɵɵdirectiveInject(DOCUMENT), i0.ɵɵdirectiveInject(i0.ElementRef)); }; }
+    /** @nocollapse */ static { this.ɵdir = /** @pureOrBreakMyCode */ i0.ɵɵdefineDirective({ type: ClickOutsideDirective, selectors: [["", "clickOutside", ""]], inputs: { attachOutsideOnClick: "attachOutsideOnClick", exclude: "exclude" }, outputs: { clickOutside: "clickOutside" }, features: [i0.ɵɵNgOnChangesFeature] }); }
 }
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DrChatCustomMessageDirective, [{
+(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ClickOutsideDirective, [{
         type: Directive,
-        args: [{
-                selector: `[drCustomMessage]`,
-            }]
-    }], function () { return [{ type: i0.TemplateRef }, { type: DrChatCustomMessageService }]; }, { drCustomMessage: [{
+        args: [{ selector: '[clickOutside]' }]
+    }], function () { return [{ type: undefined, decorators: [{
+                type: Inject,
+                args: [DOCUMENT]
+            }] }, { type: i0.ElementRef }]; }, { attachOutsideOnClick: [{
             type: Input
-        }] }); })();
-
-const _c0$n = ["*"];
-class DrChatAlertComponent {
-    constructor() {
-        this.iconClass = 'dr-icon-info';
-        this.close = new EventEmitter();
-    }
-    /** @nocollapse */ static { this.ɵfac = function DrChatAlertComponent_Factory(t) { return new (t || DrChatAlertComponent)(); }; }
-    /** @nocollapse */ static { this.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: DrChatAlertComponent, selectors: [["dr-chat-alert"]], inputs: { iconClass: "iconClass" }, outputs: { close: "close" }, ngContentSelectors: _c0$n, decls: 3, vars: 2, consts: [["theme", "icon", "icon", "dr-icon-exit", "drTooltip", "Close", 1, "chat-alert-close-btn", 3, "click"]], template: function DrChatAlertComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵprojectionDef();
-            i0.ɵɵelement(0, "i");
-            i0.ɵɵprojection(1);
-            i0.ɵɵelementStart(2, "dr-button", 0);
-            i0.ɵɵlistener("click", function DrChatAlertComponent_Template_dr_button_click_2_listener() { return ctx.close.emit(); });
-            i0.ɵɵelementEnd();
-        } if (rf & 2) {
-            i0.ɵɵclassMap(ctx.iconClass);
-        } }, dependencies: [DrButtonComponent, DrTooltipDirective], styles: ["[_nghost-%COMP%]{display:flex;padding:8px 24px;align-items:center;min-height:40px;color:#6d6e6f;background-color:#f6f7f8;border-top:1px solid #dfe0e3;font-size:12px;line-height:20px;white-space:pre-line}[_nghost-%COMP%]   i[_ngcontent-%COMP%]{margin-right:8px}[_nghost-%COMP%]   .chat-alert-close-btn[_ngcontent-%COMP%]{display:none;position:absolute;right:16px;color:#aeabac}[_nghost-%COMP%]:hover   .chat-alert-close-btn[_ngcontent-%COMP%]{display:block}"], changeDetection: 0 }); }
-}
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DrChatAlertComponent, [{
-        type: Component,
-        args: [{ selector: 'dr-chat-alert', changeDetection: ChangeDetectionStrategy.OnPush, template: "<i [class]=\"iconClass\"></i>\n<ng-content></ng-content>\n<dr-button (click)=\"close.emit()\" theme=\"icon\" icon=\"dr-icon-exit\" class=\"chat-alert-close-btn\" drTooltip=\"Close\"> </dr-button>\n", styles: [":host{display:flex;padding:8px 24px;align-items:center;min-height:40px;color:#6d6e6f;background-color:#f6f7f8;border-top:1px solid #dfe0e3;font-size:12px;line-height:20px;white-space:pre-line}:host i{margin-right:8px}:host .chat-alert-close-btn{display:none;position:absolute;right:16px;color:#aeabac}:host:hover .chat-alert-close-btn{display:block}\n"] }]
-    }], null, { iconClass: [{
+        }], exclude: [{
             type: Input
-        }], close: [{
+        }], clickOutside: [{
             type: Output
         }] }); })();
 
-function DrToggleComponent_span_0_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 5);
-    i0.ɵɵtext(1);
+const _c0$n = ["textAreaElement"];
+const _c1$9 = ["fileInput"];
+function DrChatFormWithHistoryComponent_dr_chat_dropped_files_2_Template(rf, ctx) { if (rf & 1) {
+    const _r8 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "dr-chat-dropped-files", 15);
+    i0.ɵɵlistener("removeFileEvent", function DrChatFormWithHistoryComponent_dr_chat_dropped_files_2_Template_dr_chat_dropped_files_removeFileEvent_0_listener($event) { i0.ɵɵrestoreView(_r8); const ctx_r7 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r7.removeFile($event)); });
+    i0.ɵɵpipe(1, "async");
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
-    i0.ɵɵadvance(1);
-    i0.ɵɵtextInterpolate(ctx_r0.toggleTitle);
+    i0.ɵɵproperty("files", i0.ɵɵpipeBind1(1, 3, ctx_r0.droppedFiles$))("isRemovable", true)("maxLengthText", 15);
 } }
-function DrToggleComponent_span_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 6);
-    i0.ɵɵtext(1);
+function DrChatFormWithHistoryComponent_i_14_Template(rf, ctx) { if (rf & 1) {
+    const _r10 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "i", 16);
+    i0.ɵɵlistener("click", function DrChatFormWithHistoryComponent_i_14_Template_i_click_0_listener($event) { i0.ɵɵrestoreView(_r10); const ctx_r9 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r9.sendMessage($event)); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext();
+    const ctx_r3 = i0.ɵɵnextContext();
+    const _r1 = i0.ɵɵreference(6);
+    i0.ɵɵstyleMap(ctx_r3.getSendButtonPosition(_r1));
+} }
+function DrChatFormWithHistoryComponent_i_15_Template(rf, ctx) { if (rf & 1) {
+    const _r12 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "i", 17);
+    i0.ɵɵlistener("click", function DrChatFormWithHistoryComponent_i_15_Template_i_click_0_listener() { i0.ɵɵrestoreView(_r12); const ctx_r11 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r11.abortMessage()); });
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r4 = i0.ɵɵnextContext();
+    const _r1 = i0.ɵɵreference(6);
+    i0.ɵɵstyleMap(ctx_r4.getSendButtonPosition(_r1));
+} }
+function DrChatFormWithHistoryComponent_dr_dot_flashing_16_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "dr-dot-flashing", 18);
+} }
+function DrChatFormWithHistoryComponent_ng_container_17_Template(rf, ctx) { if (rf & 1) {
+    const _r14 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementContainerStart(0);
+    i0.ɵɵelementStart(1, "div", 19);
+    i0.ɵɵlistener("clickOutside", function DrChatFormWithHistoryComponent_ng_container_17_Template_div_clickOutside_1_listener() { i0.ɵɵrestoreView(_r14); const ctx_r13 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r13.closeHistory()); });
+    i0.ɵɵprojection(2);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementContainerEnd();
+} if (rf & 2) {
+    const ctx_r6 = i0.ɵɵnextContext();
     i0.ɵɵadvance(1);
-    i0.ɵɵtextInterpolate(ctx_r1.toggleTitle);
+    i0.ɵɵproperty("@dropdownAnimation", ctx_r6.isShowedHistory ? "visible" : "hidden")("exclude", ".dr-icon-history");
 } }
-const _c0$m = ["*"];
-class DrToggleComponent {
-    set disabled(value) {
-        this.setDisabledState(value);
-    }
-    get elementClass() {
-        return this._elementClass.join(' ');
-    }
-    constructor(cdr) {
+const _c2$2 = function (a0) { return { "message-row_loading": a0 }; };
+const _c3$2 = function (a0) { return { height: a0 }; };
+const _c4$1 = function (a0, a1) { return { value: a0, params: a1 }; };
+const _c5 = function (a0, a1, a2) { return { "message-row__input--focused": a0, "message-row__input--filled": a1, "showed-dropdown": a2 }; };
+const _c6 = ["*"];
+class DrChatFormWithHistoryComponent {
+    constructor(cdr, domSanitizer) {
         this.cdr = cdr;
-        this._disabled = false;
-        this._elementClass = [];
-        this.checkedChange = new EventEmitter();
-        this.onChange = () => { };
-        this.onTouched = () => { };
+        this.domSanitizer = domSanitizer;
+        this._textareaInitialHeight = true;
+        this.inputFocus = false;
+        this.inputHover = false;
+        this.droppedFiles$ = new BehaviorSubject([]);
+        this.isShowedHistory = false;
+        this.isChatMode = false;
+        this.isLoading = false;
+        /**
+         * Predefined message text
+         *
+         * @type {string}
+         */
+        this.message = '';
+        /**
+         * Message placeholder text
+         *
+         * @type {string}
+         */
+        this.messagePlaceholder = 'Type a message';
+        /**
+         * Show send button
+         *
+         * @type {boolean}
+         */
+        this.dropFiles = false;
+        /**
+         * File drop placeholder text
+         *
+         * @type {string}
+         */
+        this.dropFilePlaceholder = 'Drop file to send';
+        /**
+         * Parameter to check is send message function available
+         *
+         * @type {boolean}
+         */
+        this.waitForReply = false;
+        /**
+         * Parameter to check is send message function available
+         *
+         * @type {boolean}
+         */
+        this.showDotFlashing = false;
+        /**
+         *
+         * @type {EventEmitter<{ message: string, files: IFile[] }>}
+         */
+        this.send = new EventEmitter();
+        this.uploadFiles = new EventEmitter();
+        this.abort = new EventEmitter();
+        /**
+         * Emits when message input value has been changed
+         *
+         * @type {EventEmitter<string>}
+         */
+        this.inputChange = new EventEmitter();
+        this.fileOver = false;
     }
-    ngAfterViewInit() {
-        if (this.toggleTitleRight) {
-            this._elementClass.push('toggle-label-alignment');
+    onDrop(event) {
+        if (this.dropFiles) {
+            event.preventDefault();
+            event.stopPropagation();
+            this.fileOver = false;
+            const files = event.dataTransfer?.files;
+            if (files) {
+                this.saveFiles(files);
+            }
         }
     }
-    writeValue(value) {
-        this.checkedStatus = value;
-        this.cdr.markForCheck();
+    removeFile(file) {
+        const droppedFiles = this.droppedFiles$.value;
+        const index = droppedFiles.indexOf(file);
+        if (index >= 0) {
+            droppedFiles.splice(index, 1);
+            this.droppedFiles$.next(droppedFiles);
+        }
     }
-    registerOnChange(fn) {
-        this.onChange = fn;
+    onDragOver(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        if (this.dropFiles) {
+            this.fileOver = true;
+        }
     }
-    registerOnTouched(fn) {
-        this.onTouched = fn;
+    onDragLeave(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        if (this.dropFiles) {
+            this.fileOver = false;
+        }
     }
-    setDisabledState(isDisabled) {
-        this._disabled = isDisabled;
+    sendMessage($event) {
+        if (!$event || !$event.shiftKey) {
+            $event?.preventDefault();
+            $event?.stopPropagation();
+            if (this.waitForReply) {
+                return;
+            }
+            else if (this.droppedFiles$.value.length || String(this.message).trim().length) {
+                this._textareaInitialHeight = true;
+                this.send.emit({ message: this.message, files: this.droppedFiles$.value });
+                this.message = '';
+                this.droppedFiles$.next([]);
+                this.cdr.markForCheck();
+            }
+        }
     }
-    setValue() {
-        this.checkedStatus = !this.checkedStatus;
-        this.onChange(this.checkedStatus);
-        this.checkedChange.emit(this.checkedStatus);
-        this.onTouched();
+    abortMessage() {
+        this.abort.emit();
     }
-    /** @nocollapse */ static { this.ɵfac = function DrToggleComponent_Factory(t) { return new (t || DrToggleComponent)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); }; }
-    /** @nocollapse */ static { this.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: DrToggleComponent, selectors: [["dr-toggle"]], hostVars: 2, hostBindings: function DrToggleComponent_HostBindings(rf, ctx) { if (rf & 2) {
-            i0.ɵɵclassMap(ctx.elementClass);
-        } }, inputs: { toggleTitle: "toggleTitle", toggleTitleRight: "toggleTitleRight", successType: "successType", checkedStatus: "checkedStatus", disabled: "disabled" }, outputs: { checkedChange: "checkedChange" }, features: [i0.ɵɵProvidersFeature([{ provide: NG_VALUE_ACCESSOR, useExisting: DrToggleComponent, multi: true }])], ngContentSelectors: _c0$m, decls: 7, vars: 9, consts: [["class", "toggle-title mr-3", 4, "ngIf"], [1, "toggle-container"], ["type", "checkbox", 3, "checked", "disabled", "click"], [1, "toggle-body"], ["class", "toggle-title ml-3", 4, "ngIf"], [1, "toggle-title", "mr-3"], [1, "toggle-title", "ml-3"]], template: function DrToggleComponent_Template(rf, ctx) { if (rf & 1) {
+    onModelChange(value) {
+        this._textareaInitialHeight = false;
+        this.inputChange.emit(value);
+    }
+    getTextAreaHeight(textAreaElement) {
+        if (this._textareaInitialHeight) {
+            textAreaElement.style.height = '48px';
+        }
+        else {
+            textAreaElement.style.height = 'auto';
+            textAreaElement.style.height = textAreaElement.scrollHeight + 'px';
+        }
+        return `${textAreaElement.style.height}`;
+    }
+    getSendButtonPosition(textAreaElement) {
+        return `top: calc(${this.getTextAreaHeight(textAreaElement)} - var(--send-button-offset));`;
+    }
+    showHistory() {
+        this.isShowedHistory = !this.isShowedHistory;
+    }
+    closeHistory() {
+        this.isShowedHistory = false;
+        this.cdr.markForCheck();
+    }
+    onFileSelected(event) {
+        const input = event.target;
+        this.fileOver = false;
+        if (input.files.length) {
+            this.saveFiles(Array.from(input.files));
+        }
+        this.fileInput.nativeElement.value = '';
+    }
+    async saveFiles(files) {
+        const uploadedFiles = [];
+        for (const file of files) {
+            let res = file;
+            res.data = (await this.base64Convert(res));
+            this.droppedFiles$.next([...this.droppedFiles$.value, res]);
+            uploadedFiles.push(res);
+            this.cdr.markForCheck();
+            this.cdr.detectChanges();
+        }
+        this.uploadFiles.emit(uploadedFiles.map((item) => ({ data: item.data, name: item.name })));
+    }
+    base64Convert(file) {
+        return new Promise((resolve, reject) => {
+            const reader = new FileReader();
+            reader.onload = () => resolve(reader.result);
+            reader.onerror = (error) => reject(error);
+            reader.readAsDataURL(file);
+        });
+    }
+    /** @nocollapse */ static { this.ɵfac = function DrChatFormWithHistoryComponent_Factory(t) { return new (t || DrChatFormWithHistoryComponent)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(i1$5.DomSanitizer)); }; }
+    /** @nocollapse */ static { this.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: DrChatFormWithHistoryComponent, selectors: [["dr-chat-form-with-history"]], viewQuery: function DrChatFormWithHistoryComponent_Query(rf, ctx) { if (rf & 1) {
+            i0.ɵɵviewQuery(_c0$n, 5);
+            i0.ɵɵviewQuery(_c1$9, 5);
+        } if (rf & 2) {
+            let _t;
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.textAreaElementRef = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.fileInput = _t.first);
+        } }, hostVars: 2, hostBindings: function DrChatFormWithHistoryComponent_HostBindings(rf, ctx) { if (rf & 1) {
+            i0.ɵɵlistener("drop", function DrChatFormWithHistoryComponent_drop_HostBindingHandler($event) { return ctx.onDrop($event); })("dragover", function DrChatFormWithHistoryComponent_dragover_HostBindingHandler($event) { return ctx.onDragOver($event); })("dragleave", function DrChatFormWithHistoryComponent_dragleave_HostBindingHandler($event) { return ctx.onDragLeave($event); });
+        } if (rf & 2) {
+            i0.ɵɵclassProp("file-over", ctx.fileOver);
+        } }, inputs: { isChatMode: "isChatMode", isLoading: "isLoading", message: "message", messagePlaceholder: "messagePlaceholder", dropFiles: "dropFiles", dropFilePlaceholder: "dropFilePlaceholder", waitForReply: "waitForReply", showDotFlashing: "showDotFlashing" }, outputs: { send: "send", uploadFiles: "uploadFiles", abort: "abort", inputChange: "inputChange" }, ngContentSelectors: _c6, decls: 18, vars: 27, consts: [[1, "message-row", 3, "ngClass"], [1, "message-row__input", 3, "ngClass"], [3, "files", "isRemovable", "maxLengthText", "removeFileEvent", 4, "ngIf"], [1, "message-row__input-textarea-wrap"], ["type", "text", 3, "ngModel", "rows", "placeholder", "focus", "blur", "mouseenter", "mouseleave", "ngModelChange", "keydown.enter"], ["textAreaElement", ""], [1, "message-input-tmp"], ["type", "file", "hidden", "", "multiple", "", 3, "change"], ["fileInput", ""], [1, "dr-icon-history", 3, "click"], [1, "dr-icon-attachment", 3, "click"], ["class", "dr-icon-send-arrow-up send-button", 3, "style", "click", 4, "ngIf"], ["class", "dr-icon-stop abort-button", 3, "style", "click", 4, "ngIf"], ["class", "wait-reply-dot-flashing", 4, "ngIf"], [4, "ngIf"], [3, "files", "isRemovable", "maxLengthText", "removeFileEvent"], [1, "dr-icon-send-arrow-up", "send-button", 3, "click"], [1, "dr-icon-stop", "abort-button", 3, "click"], [1, "wait-reply-dot-flashing"], [1, "history-dropdown", 3, "exclude", "clickOutside"]], template: function DrChatFormWithHistoryComponent_Template(rf, ctx) { if (rf & 1) {
+            const _r15 = i0.ɵɵgetCurrentView();
             i0.ɵɵprojectionDef();
-            i0.ɵɵtemplate(0, DrToggleComponent_span_0_Template, 2, 1, "span", 0);
-            i0.ɵɵelementStart(1, "label", 1)(2, "input", 2);
-            i0.ɵɵlistener("click", function DrToggleComponent_Template_input_click_2_listener() { return ctx.setValue(); });
+            i0.ɵɵelementStart(0, "div", 0)(1, "div", 1);
+            i0.ɵɵtemplate(2, DrChatFormWithHistoryComponent_dr_chat_dropped_files_2_Template, 2, 5, "dr-chat-dropped-files", 2);
+            i0.ɵɵpipe(3, "async");
+            i0.ɵɵelementStart(4, "div", 3)(5, "textarea", 4, 5);
+            i0.ɵɵlistener("focus", function DrChatFormWithHistoryComponent_Template_textarea_focus_5_listener() { return ctx.inputFocus = true; })("blur", function DrChatFormWithHistoryComponent_Template_textarea_blur_5_listener() { return ctx.inputFocus = false; })("mouseenter", function DrChatFormWithHistoryComponent_Template_textarea_mouseenter_5_listener() { return ctx.inputHover = true; })("mouseleave", function DrChatFormWithHistoryComponent_Template_textarea_mouseleave_5_listener() { return ctx.inputHover = false; })("ngModelChange", function DrChatFormWithHistoryComponent_Template_textarea_ngModelChange_5_listener($event) { return ctx.message = $event; })("ngModelChange", function DrChatFormWithHistoryComponent_Template_textarea_ngModelChange_5_listener($event) { return ctx.onModelChange($event); })("keydown.enter", function DrChatFormWithHistoryComponent_Template_textarea_keydown_enter_5_listener($event) { return ctx.sendMessage($event); });
+            i0.ɵɵtext(7, "            ");
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(3, "span", 3);
-            i0.ɵɵelement(4, "i");
+            i0.ɵɵelementStart(8, "div", 6);
+            i0.ɵɵtext(9);
             i0.ɵɵelementEnd();
-            i0.ɵɵprojection(5);
+            i0.ɵɵelementStart(10, "input", 7, 8);
+            i0.ɵɵlistener("change", function DrChatFormWithHistoryComponent_Template_input_change_10_listener($event) { return ctx.onFileSelected($event); });
             i0.ɵɵelementEnd();
-            i0.ɵɵtemplate(6, DrToggleComponent_span_6_Template, 2, 1, "span", 4);
+            i0.ɵɵelementStart(12, "i", 9);
+            i0.ɵɵlistener("click", function DrChatFormWithHistoryComponent_Template_i_click_12_listener() { return ctx.showHistory(); });
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(13, "i", 10);
+            i0.ɵɵlistener("click", function DrChatFormWithHistoryComponent_Template_i_click_13_listener() { i0.ɵɵrestoreView(_r15); const _r2 = i0.ɵɵreference(11); return i0.ɵɵresetView(_r2.click()); });
+            i0.ɵɵelementEnd();
+            i0.ɵɵtemplate(14, DrChatFormWithHistoryComponent_i_14_Template, 1, 2, "i", 11);
+            i0.ɵɵtemplate(15, DrChatFormWithHistoryComponent_i_15_Template, 1, 2, "i", 12);
+            i0.ɵɵtemplate(16, DrChatFormWithHistoryComponent_dr_dot_flashing_16_Template, 1, 0, "dr-dot-flashing", 13);
+            i0.ɵɵelementEnd();
+            i0.ɵɵtemplate(17, DrChatFormWithHistoryComponent_ng_container_17_Template, 3, 2, "ng-container", 14);
+            i0.ɵɵelementEnd()();
         } if (rf & 2) {
-            i0.ɵɵproperty("ngIf", ctx.toggleTitle && !ctx.toggleTitleRight);
+            const _r1 = i0.ɵɵreference(6);
+            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(16, _c2$2, ctx.isLoading));
             i0.ɵɵadvance(1);
-            i0.ɵɵclassProp("success", ctx.successType)("disabled", ctx._disabled);
+            i0.ɵɵproperty("@containerHeightAnimation", i0.ɵɵpureFunction2(20, _c4$1, ctx.showHistory ? "expanded" : "collapsed", i0.ɵɵpureFunction1(18, _c3$2, ctx.getTextAreaHeight(_r1))))("ngClass", i0.ɵɵpureFunction3(23, _c5, ctx.inputFocus, !!(ctx.message == null ? null : ctx.message.length), ctx.isShowedHistory));
             i0.ɵɵadvance(1);
-            i0.ɵɵproperty("checked", ctx.checkedStatus)("disabled", ctx._disabled);
-            i0.ɵɵattribute("data-test", ctx.checkedStatus ? "toggle-on" : "toggle-off");
+            i0.ɵɵproperty("ngIf", i0.ɵɵpipeBind1(3, 14, ctx.droppedFiles$).length);
+            i0.ɵɵadvance(3);
+            i0.ɵɵstyleMap(ctx.getTextAreaHeight(_r1));
+            i0.ɵɵpropertyInterpolate("placeholder", ctx.fileOver ? ctx.dropFilePlaceholder : ctx.messagePlaceholder);
+            i0.ɵɵproperty("ngModel", ctx.message)("rows", 1);
             i0.ɵɵadvance(4);
-            i0.ɵɵproperty("ngIf", ctx.toggleTitle && ctx.toggleTitleRight);
-        } }, dependencies: [i1.NgIf], styles: ["[_nghost-%COMP%]{display:flex;justify-content:space-between;align-items:center;font-family:Poppins,sans-serif}.toggle-label-alignment[_nghost-%COMP%]{justify-content:start}[_nghost-%COMP%]   .toggle-container[_ngcontent-%COMP%]{display:flex;align-items:center}[_nghost-%COMP%]   .toggle-container.disabled[_ngcontent-%COMP%]{pointer-events:none}[_nghost-%COMP%]   .toggle-container.disabled[_ngcontent-%COMP%]   .toggle-body[_ngcontent-%COMP%]{background-color:#8f9bb329!important}[_nghost-%COMP%]   .toggle-container.disabled[_ngcontent-%COMP%]   .toggle-body[_ngcontent-%COMP%]   i[_ngcontent-%COMP%]{background:#8f9bb33d!important}[_nghost-%COMP%]   .toggle-container.success[_ngcontent-%COMP%]   input[_ngcontent-%COMP%]:checked + span.toggle-body[_ngcontent-%COMP%]{background-color:#03a678}[_nghost-%COMP%]   .toggle-container[_ngcontent-%COMP%]   input[_ngcontent-%COMP%]{display:none}[_nghost-%COMP%]   .toggle-container[_ngcontent-%COMP%]   input[_ngcontent-%COMP%]:checked + span.toggle-body[_ngcontent-%COMP%] > i[_ngcontent-%COMP%], [_nghost-%COMP%]   .toggle-container[_ngcontent-%COMP%]   input[_ngcontent-%COMP%]:checked + span.toggle-body[_ngcontent-%COMP%]:active > i[_ngcontent-%COMP%]{margin-left:16px}[_nghost-%COMP%]   .toggle-container[_ngcontent-%COMP%]   input[_ngcontent-%COMP%]:checked + span.toggle-body[_ngcontent-%COMP%]{background-color:#4646ce}[_nghost-%COMP%]   .toggle-container[_ngcontent-%COMP%]   .toggle-body[_ngcontent-%COMP%]{cursor:pointer;display:block;width:30px;height:16px;margin:7px auto;border-radius:15px;transition:all .2s ease-in-out;-webkit-transition:all .2s ease-in-out;background-color:#8f929e;line-height:1}[_nghost-%COMP%]   .toggle-container[_ngcontent-%COMP%]   .toggle-body[_ngcontent-%COMP%]:active{background-color:#a6b9cb}[_nghost-%COMP%]   .toggle-container[_ngcontent-%COMP%]   .toggle-body-wrapper[_ngcontent-%COMP%]{display:flex;flex-direction:column}[_nghost-%COMP%]   .toggle-container[_ngcontent-%COMP%]   .toggle-body[_ngcontent-%COMP%]   i[_ngcontent-%COMP%]{height:12px;width:12px;background:#fff;display:inline-block;border-radius:100px;margin-top:2px;margin-left:1.5px;transition:all .2s ease-in-out;-webkit-transition:all .2s ease-in-out;pointer-events:none}[_nghost-%COMP%]   .toggle-title[_ngcontent-%COMP%]{line-height:22px}"], changeDetection: 0 }); }
+            i0.ɵɵtextInterpolate(_r1.value);
+            i0.ɵɵadvance(5);
+            i0.ɵɵproperty("ngIf", !ctx.waitForReply);
+            i0.ɵɵadvance(1);
+            i0.ɵɵproperty("ngIf", ctx.waitForReply && !ctx.showDotFlashing);
+            i0.ɵɵadvance(1);
+            i0.ɵɵproperty("ngIf", ctx.waitForReply && ctx.showDotFlashing);
+            i0.ɵɵadvance(1);
+            i0.ɵɵproperty("ngIf", !ctx.isChatMode);
+        } }, dependencies: [i1$2.DefaultValueAccessor, i1$2.NgControlStatus, i1$2.NgModel, i1.NgClass, i1.NgIf, ClickOutsideDirective, DrDotFlashingComponent, DrChatDroppedFilesComponent, i1.AsyncPipe], styles: ["[_nghost-%COMP%] {--send-button-offset: 42px;display:flex;flex-direction:column;align-items:center;padding:0 16px}[_nghost-%COMP%]  .message-row{display:flex;justify-content:center;width:100%;padding:0 0 21px;max-width:956px}[_nghost-%COMP%]  .message-row__input{flex-direction:column;background-color:#fff;position:relative;display:flex;align-items:center;flex-grow:1;height:auto;overflow:visible;min-width:265px;border-radius:24px;border:1.5px solid transparent;box-shadow:0 2px 16px -10px #603cff29;transition:.35s ease}[_nghost-%COMP%]  .message-row__input .abort-button, [_nghost-%COMP%]  .message-row__input .send-button{width:32px;height:32px;display:flex;align-items:center;justify-content:center;position:absolute;top:2.5px;right:8px;cursor:pointer;font-size:24px;border-radius:100px;color:#fff;transition:.15s ease-in-out;background:linear-gradient(266deg,#6969ff 25.2%,#4eb7df 90.24%) border-box}[_nghost-%COMP%]  .message-row__input .dr-icon-history, [_nghost-%COMP%]  .message-row__input .dr-icon-attachment{display:flex;align-items:center;position:absolute;cursor:pointer;width:32px;height:48px;left:16px;top:-1px}[_nghost-%COMP%]  .message-row__input .dr-icon-attachment{left:52px}[_nghost-%COMP%]  .message-row__input .send-button{opacity:.5;pointer-events:none}[_nghost-%COMP%]  .message-row__input--focused{box-shadow:8px 8px 16px #6969ff40,-4px -4px 8px #40b6e340,8px 8px 60px #00000040;height:auto!important;background:#fff}[_nghost-%COMP%]  .message-row__input--filled{box-shadow:8px 8px 16px #6969ff40,-4px -4px 8px #40b6e340,8px 8px 60px #00000040;background:#fff}[_nghost-%COMP%]  .message-row__input--filled .send-button{opacity:1;pointer-events:all}[_nghost-%COMP%]  .message-row__input .message-input-tmp{display:none}[_nghost-%COMP%]  .message-row__input.showed-dropdown .send-button{opacity:.5}[_nghost-%COMP%]  .message-row__input .wait-reply-dot-flashing{display:flex;position:absolute;align-items:center;width:32px;height:48px;right:25px}[_nghost-%COMP%]  .message-row__input:before{content:\"\";position:absolute;inset:-3px;background:linear-gradient(266deg,#6969ff 25.2%,#4eb7df 90.24%);border-radius:25px;z-index:-1}[_nghost-%COMP%]  .message-row__input textarea, [_nghost-%COMP%]  .message-row__input .message-input-tmp{font-size:14px;color:#333;width:100%;outline:none;min-height:48px;line-height:19px;flex-grow:1;resize:none;padding:13px 55px 13px 88px;margin:auto;border:none;border-radius:22.5px}[_nghost-%COMP%]  .message-row__input textarea:focus, [_nghost-%COMP%]  .message-row__input .message-input-tmp:focus{border:none}[_nghost-%COMP%]  .message-row__input textarea::placeholder, [_nghost-%COMP%]  .message-row__input .message-input-tmp::placeholder{color:#9ea1aa}[_nghost-%COMP%]  .message-row__input-textarea-wrap{display:flex;width:100%;position:relative}[_nghost-%COMP%]  .history-dropdown{width:100%;max-height:220px;overflow-y:auto;padding:12px 16px 0}[_nghost-%COMP%]  .showed-dropdown textarea{visibility:hidden;position:absolute}[_nghost-%COMP%]  .showed-dropdown .message-input-tmp{display:block;margin-left:inherit;white-space:nowrap;font-family:monospace;overflow:hidden;text-overflow:ellipsis}[_nghost-%COMP%]  .showed-dropdown .send-button{top:2.5px!important}[_nghost-%COMP%]  dr-chat-dropped-files{margin-right:auto}[_nghost-%COMP%]  .message-row_loading .send-button, [_nghost-%COMP%]  .message-row_loading .dropped-files__item{opacity:.5;pointer-events:none}"], data: { animation: [
+                trigger('containerHeightAnimation', [
+                    state('collapsed', style({ height: '{{height}}' }), { params: { height: '48px' } }),
+                    state('expanded', style({
+                        height: '*',
+                    })),
+                    transition('collapsed => expanded', [animate('300ms ease-in-out')]),
+                    transition('expanded => collapsed', [query('@dropdownAnimation', animateChild()), animate('300ms ease-in-out')]),
+                ]),
+                trigger('dropdownAnimation', [
+                    state('hidden', style({
+                        opacity: 0,
+                        transform: 'translateY(-30px)',
+                        display: 'none',
+                    })),
+                    state('visible', style({
+                        opacity: 1,
+                        transform: 'translateY(0)',
+                        display: 'block',
+                    })),
+                    transition('hidden => visible', [style({ display: 'block' }), animate('300ms ease-in-out')]),
+                    transition('visible => hidden', [
+                        animate('300ms ease-in-out', style({ opacity: 0, transform: 'translateY(-30px)' })),
+                        style({ display: 'none' }),
+                    ]),
+                ]),
+            ] }, changeDetection: 0 }); }
 }
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DrToggleComponent, [{
+(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DrChatFormWithHistoryComponent, [{
         type: Component,
-        args: [{ selector: 'dr-toggle', providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: DrToggleComponent, multi: true }], changeDetection: ChangeDetectionStrategy.OnPush, template: "<span class=\"toggle-title mr-3\" *ngIf=\"toggleTitle && !toggleTitleRight\">{{ toggleTitle }}</span>\n<label class=\"toggle-container\" [class.success]=\"successType\" [class.disabled]=\"_disabled\">\n    <input\n        type=\"checkbox\"\n        [attr.data-test]=\"checkedStatus ? 'toggle-on' : 'toggle-off'\"\n        [checked]=\"checkedStatus\"\n        [disabled]=\"_disabled\"\n        (click)=\"setValue()\" />\n    <span class=\"toggle-body\">\n        <i></i>\n    </span>\n    <ng-content></ng-content>\n</label>\n<span class=\"toggle-title ml-3\" *ngIf=\"toggleTitle && toggleTitleRight\">{{ toggleTitle }}</span>\n", styles: [":host{display:flex;justify-content:space-between;align-items:center;font-family:Poppins,sans-serif}:host.toggle-label-alignment{justify-content:start}:host .toggle-container{display:flex;align-items:center}:host .toggle-container.disabled{pointer-events:none}:host .toggle-container.disabled .toggle-body{background-color:#8f9bb329!important}:host .toggle-container.disabled .toggle-body i{background:#8f9bb33d!important}:host .toggle-container.success input:checked+span.toggle-body{background-color:#03a678}:host .toggle-container input{display:none}:host .toggle-container input:checked+span.toggle-body>i,:host .toggle-container input:checked+span.toggle-body:active>i{margin-left:16px}:host .toggle-container input:checked+span.toggle-body{background-color:#4646ce}:host .toggle-container .toggle-body{cursor:pointer;display:block;width:30px;height:16px;margin:7px auto;border-radius:15px;transition:all .2s ease-in-out;-webkit-transition:all .2s ease-in-out;background-color:#8f929e;line-height:1}:host .toggle-container .toggle-body:active{background-color:#a6b9cb}:host .toggle-container .toggle-body-wrapper{display:flex;flex-direction:column}:host .toggle-container .toggle-body i{height:12px;width:12px;background:#fff;display:inline-block;border-radius:100px;margin-top:2px;margin-left:1.5px;transition:all .2s ease-in-out;-webkit-transition:all .2s ease-in-out;pointer-events:none}:host .toggle-title{line-height:22px}\n"] }]
-    }], function () { return [{ type: i0.ChangeDetectorRef }]; }, { toggleTitle: [{
+        args: [{ selector: 'dr-chat-form-with-history', changeDetection: ChangeDetectionStrategy.OnPush, animations: [
+                    trigger('containerHeightAnimation', [
+                        state('collapsed', style({ height: '{{height}}' }), { params: { height: '48px' } }),
+                        state('expanded', style({
+                            height: '*',
+                        })),
+                        transition('collapsed => expanded', [animate('300ms ease-in-out')]),
+                        transition('expanded => collapsed', [query('@dropdownAnimation', animateChild()), animate('300ms ease-in-out')]),
+                    ]),
+                    trigger('dropdownAnimation', [
+                        state('hidden', style({
+                            opacity: 0,
+                            transform: 'translateY(-30px)',
+                            display: 'none',
+                        })),
+                        state('visible', style({
+                            opacity: 1,
+                            transform: 'translateY(0)',
+                            display: 'block',
+                        })),
+                        transition('hidden => visible', [style({ display: 'block' }), animate('300ms ease-in-out')]),
+                        transition('visible => hidden', [
+                            animate('300ms ease-in-out', style({ opacity: 0, transform: 'translateY(-30px)' })),
+                            style({ display: 'none' }),
+                        ]),
+                    ]),
+                ], template: "<div class=\"message-row\" [ngClass]=\"{ 'message-row_loading': isLoading }\">\n    <div\n        [@containerHeightAnimation]=\"{\n            value: showHistory ? 'expanded' : 'collapsed',\n            params: { height: getTextAreaHeight(textAreaElement) },\n        }\"\n        class=\"message-row__input\"\n        [ngClass]=\"{\n            'message-row__input--focused': inputFocus,\n            'message-row__input--filled': !!message?.length,\n            'showed-dropdown': isShowedHistory,\n        }\">\n        <dr-chat-dropped-files\n            *ngIf=\"(droppedFiles$ | async).length\"\n            [files]=\"droppedFiles$ | async\"\n            [isRemovable]=\"true\"\n            [maxLengthText]=\"15\"\n            (removeFileEvent)=\"removeFile($event)\"></dr-chat-dropped-files>\n\n        <div class=\"message-row__input-textarea-wrap\">\n            <textarea\n                #textAreaElement\n                (focus)=\"inputFocus = true\"\n                (blur)=\"inputFocus = false\"\n                (mouseenter)=\"inputHover = true\"\n                (mouseleave)=\"inputHover = false\"\n                [(ngModel)]=\"message\"\n                [rows]=\"1\"\n                [style]=\"getTextAreaHeight(textAreaElement)\"\n                (ngModelChange)=\"onModelChange($event)\"\n                type=\"text\"\n                placeholder=\"{{ fileOver ? dropFilePlaceholder : messagePlaceholder }}\"\n                (keydown.enter)=\"sendMessage($event)\">\n            </textarea>\n\n            <div class=\"message-input-tmp\">{{ textAreaElement.value }}</div>\n\n            <input #fileInput type=\"file\" hidden multiple (change)=\"onFileSelected($event)\" />\n            <i (click)=\"showHistory()\" class=\"dr-icon-history\"></i>\n            <i (click)=\"fileInput.click()\" class=\"dr-icon-attachment\"></i>\n\n            <i\n                *ngIf=\"!waitForReply\"\n                [style]=\"getSendButtonPosition(textAreaElement)\"\n                (click)=\"sendMessage($event)\"\n                class=\"dr-icon-send-arrow-up send-button\"></i>\n\n            <i\n                *ngIf=\"waitForReply && !showDotFlashing\"\n                [style]=\"getSendButtonPosition(textAreaElement)\"\n                class=\"dr-icon-stop abort-button\"\n                (click)=\"abortMessage()\"></i>\n            <dr-dot-flashing *ngIf=\"waitForReply && showDotFlashing\" class=\"wait-reply-dot-flashing\"></dr-dot-flashing>\n        </div>\n\n        <ng-container *ngIf=\"!isChatMode\">\n            <div\n                [@dropdownAnimation]=\"isShowedHistory ? 'visible' : 'hidden'\"\n                class=\"history-dropdown\"\n                [exclude]=\"'.dr-icon-history'\"\n                (clickOutside)=\"closeHistory()\">\n                <ng-content></ng-content>\n            </div>\n        </ng-container>\n    </div>\n</div>\n", styles: [":host::ng-deep{--send-button-offset: 42px;display:flex;flex-direction:column;align-items:center;padding:0 16px}:host::ng-deep .message-row{display:flex;justify-content:center;width:100%;padding:0 0 21px;max-width:956px}:host::ng-deep .message-row__input{flex-direction:column;background-color:#fff;position:relative;display:flex;align-items:center;flex-grow:1;height:auto;overflow:visible;min-width:265px;border-radius:24px;border:1.5px solid transparent;box-shadow:0 2px 16px -10px #603cff29;transition:.35s ease}:host::ng-deep .message-row__input .abort-button,:host::ng-deep .message-row__input .send-button{width:32px;height:32px;display:flex;align-items:center;justify-content:center;position:absolute;top:2.5px;right:8px;cursor:pointer;font-size:24px;border-radius:100px;color:#fff;transition:.15s ease-in-out;background:linear-gradient(266deg,#6969ff 25.2%,#4eb7df 90.24%) border-box}:host::ng-deep .message-row__input .dr-icon-history,:host::ng-deep .message-row__input .dr-icon-attachment{display:flex;align-items:center;position:absolute;cursor:pointer;width:32px;height:48px;left:16px;top:-1px}:host::ng-deep .message-row__input .dr-icon-attachment{left:52px}:host::ng-deep .message-row__input .send-button{opacity:.5;pointer-events:none}:host::ng-deep .message-row__input--focused{box-shadow:8px 8px 16px #6969ff40,-4px -4px 8px #40b6e340,8px 8px 60px #00000040;height:auto!important;background:#fff}:host::ng-deep .message-row__input--filled{box-shadow:8px 8px 16px #6969ff40,-4px -4px 8px #40b6e340,8px 8px 60px #00000040;background:#fff}:host::ng-deep .message-row__input--filled .send-button{opacity:1;pointer-events:all}:host::ng-deep .message-row__input .message-input-tmp{display:none}:host::ng-deep .message-row__input.showed-dropdown .send-button{opacity:.5}:host::ng-deep .message-row__input .wait-reply-dot-flashing{display:flex;position:absolute;align-items:center;width:32px;height:48px;right:25px}:host::ng-deep .message-row__input:before{content:\"\";position:absolute;inset:-3px;background:linear-gradient(266deg,#6969ff 25.2%,#4eb7df 90.24%);border-radius:25px;z-index:-1}:host::ng-deep .message-row__input textarea,:host::ng-deep .message-row__input .message-input-tmp{font-size:14px;color:#333;width:100%;outline:none;min-height:48px;line-height:19px;flex-grow:1;resize:none;padding:13px 55px 13px 88px;margin:auto;border:none;border-radius:22.5px}:host::ng-deep .message-row__input textarea:focus,:host::ng-deep .message-row__input .message-input-tmp:focus{border:none}:host::ng-deep .message-row__input textarea::placeholder,:host::ng-deep .message-row__input .message-input-tmp::placeholder{color:#9ea1aa}:host::ng-deep .message-row__input-textarea-wrap{display:flex;width:100%;position:relative}:host::ng-deep .history-dropdown{width:100%;max-height:220px;overflow-y:auto;padding:12px 16px 0}:host::ng-deep .showed-dropdown textarea{visibility:hidden;position:absolute}:host::ng-deep .showed-dropdown .message-input-tmp{display:block;margin-left:inherit;white-space:nowrap;font-family:monospace;overflow:hidden;text-overflow:ellipsis}:host::ng-deep .showed-dropdown .send-button{top:2.5px!important}:host::ng-deep dr-chat-dropped-files{margin-right:auto}:host::ng-deep .message-row_loading .send-button,:host::ng-deep .message-row_loading .dropped-files__item{opacity:.5;pointer-events:none}\n"] }]
+    }], function () { return [{ type: i0.ChangeDetectorRef }, { type: i1$5.DomSanitizer }]; }, { textAreaElementRef: [{
+            type: ViewChild,
+            args: ['textAreaElement']
+        }], fileInput: [{
+            type: ViewChild,
+            args: ['fileInput']
+        }], isChatMode: [{
             type: Input
-        }], toggleTitleRight: [{
+        }], isLoading: [{
             type: Input
-        }], successType: [{
+        }], message: [{
             type: Input
-        }], checkedStatus: [{
+        }], messagePlaceholder: [{
             type: Input
-        }], disabled: [{
+        }], dropFiles: [{
             type: Input
-        }], checkedChange: [{
-            type: Output
-        }], elementClass: [{
-            type: HostBinding,
-            args: ['class']
-        }] }); })();
-
+        }], dropFilePlaceholder: [{
+            type: Input
+        }], waitForReply: [{
+            type: Input
+        }], showDotFlashing: [{
+            type: Input
+        }], send: [{
+            type: Output
+        }], uploadFiles: [{
+            type: Output
+        }], abort: [{
+            type: Output
+        }], inputChange: [{
+            type: Output
+        }], fileOver: [{
+            type: HostBinding,
+            args: ['class.file-over']
+        }], onDrop: [{
+            type: HostListener,
+            args: ['drop', ['$event']]
+        }], onDragOver: [{
+            type: HostListener,
+            args: ['dragover', ['$event']]
+        }], onDragLeave: [{
+            type: HostListener,
+            args: ['dragleave', ['$event']]
+        }] }); })();
+
+const throwCustomMessageTypeIsRequired = () => {
+    throw new Error('[drCustomMessage]: custom message type is required.');
+};
+class DrChatCustomMessageDirective {
+    /**
+     * Defines a message type which should rendered with the custom message template.
+     *
+     * @type {string}
+     */
+    get drCustomMessage() {
+        return this._type;
+    }
+    set drCustomMessage(value) {
+        this._type = value;
+    }
+    get type() {
+        return this._type;
+    }
+    constructor(templateRef, customMessageService) {
+        this.templateRef = templateRef;
+        this.customMessageService = customMessageService;
+    }
+    ngOnInit() {
+        if (!this._type) {
+            throwCustomMessageTypeIsRequired();
+        }
+        this.customMessageService.register(this.type, this);
+    }
+    ngOnDestroy() {
+        this.customMessageService.unregister(this.type);
+    }
+    /** @nocollapse */ static { this.ɵfac = function DrChatCustomMessageDirective_Factory(t) { return new (t || DrChatCustomMessageDirective)(i0.ɵɵdirectiveInject(i0.TemplateRef), i0.ɵɵdirectiveInject(DrChatCustomMessageService)); }; }
+    /** @nocollapse */ static { this.ɵdir = /** @pureOrBreakMyCode */ i0.ɵɵdefineDirective({ type: DrChatCustomMessageDirective, selectors: [["", "drCustomMessage", ""]], inputs: { drCustomMessage: "drCustomMessage" } }); }
+}
+(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DrChatCustomMessageDirective, [{
+        type: Directive,
+        args: [{
+                selector: `[drCustomMessage]`,
+            }]
+    }], function () { return [{ type: i0.TemplateRef }, { type: DrChatCustomMessageService }]; }, { drCustomMessage: [{
+            type: Input
+        }] }); })();
+
+const _c0$m = ["*"];
+class DrChatAlertComponent {
+    constructor() {
+        this.iconClass = 'dr-icon-info';
+        this.close = new EventEmitter();
+    }
+    /** @nocollapse */ static { this.ɵfac = function DrChatAlertComponent_Factory(t) { return new (t || DrChatAlertComponent)(); }; }
+    /** @nocollapse */ static { this.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: DrChatAlertComponent, selectors: [["dr-chat-alert"]], inputs: { iconClass: "iconClass" }, outputs: { close: "close" }, ngContentSelectors: _c0$m, decls: 3, vars: 2, consts: [["theme", "icon", "icon", "dr-icon-exit", "drTooltip", "Close", 1, "chat-alert-close-btn", 3, "click"]], template: function DrChatAlertComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵprojectionDef();
+            i0.ɵɵelement(0, "i");
+            i0.ɵɵprojection(1);
+            i0.ɵɵelementStart(2, "dr-button", 0);
+            i0.ɵɵlistener("click", function DrChatAlertComponent_Template_dr_button_click_2_listener() { return ctx.close.emit(); });
+            i0.ɵɵelementEnd();
+        } if (rf & 2) {
+            i0.ɵɵclassMap(ctx.iconClass);
+        } }, dependencies: [DrButtonComponent, DrTooltipDirective], styles: ["[_nghost-%COMP%]{display:flex;padding:8px 24px;align-items:center;min-height:40px;color:#6d6e6f;background-color:#f6f7f8;border-top:1px solid #dfe0e3;font-size:12px;line-height:20px;white-space:pre-line}[_nghost-%COMP%]   i[_ngcontent-%COMP%]{margin-right:8px}[_nghost-%COMP%]   .chat-alert-close-btn[_ngcontent-%COMP%]{display:none;position:absolute;right:16px;color:#aeabac}[_nghost-%COMP%]:hover   .chat-alert-close-btn[_ngcontent-%COMP%]{display:block}"], changeDetection: 0 }); }
+}
+(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DrChatAlertComponent, [{
+        type: Component,
+        args: [{ selector: 'dr-chat-alert', changeDetection: ChangeDetectionStrategy.OnPush, template: "<i [class]=\"iconClass\"></i>\n<ng-content></ng-content>\n<dr-button (click)=\"close.emit()\" theme=\"icon\" icon=\"dr-icon-exit\" class=\"chat-alert-close-btn\" drTooltip=\"Close\"> </dr-button>\n", styles: [":host{display:flex;padding:8px 24px;align-items:center;min-height:40px;color:#6d6e6f;background-color:#f6f7f8;border-top:1px solid #dfe0e3;font-size:12px;line-height:20px;white-space:pre-line}:host i{margin-right:8px}:host .chat-alert-close-btn{display:none;position:absolute;right:16px;color:#aeabac}:host:hover .chat-alert-close-btn{display:block}\n"] }]
+    }], null, { iconClass: [{
+            type: Input
+        }], close: [{
+            type: Output
+        }] }); })();
+
+function DrToggleComponent_span_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 5);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(1);
+    i0.ɵɵtextInterpolate(ctx_r0.toggleTitle);
+} }
+function DrToggleComponent_span_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 6);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(1);
+    i0.ɵɵtextInterpolate(ctx_r1.toggleTitle);
+} }
+const _c0$l = ["*"];
+class DrToggleComponent {
+    set disabled(value) {
+        this.setDisabledState(value);
+    }
+    get elementClass() {
+        return this._elementClass.join(' ');
+    }
+    constructor(cdr) {
+        this.cdr = cdr;
+        this._disabled = false;
+        this._elementClass = [];
+        this.checkedChange = new EventEmitter();
+        this.onChange = () => { };
+        this.onTouched = () => { };
+    }
+    ngAfterViewInit() {
+        if (this.toggleTitleRight) {
+            this._elementClass.push('toggle-label-alignment');
+        }
+    }
+    writeValue(value) {
+        this.checkedStatus = value;
+        this.cdr.markForCheck();
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this._disabled = isDisabled;
+    }
+    setValue() {
+        this.checkedStatus = !this.checkedStatus;
+        this.onChange(this.checkedStatus);
+        this.checkedChange.emit(this.checkedStatus);
+        this.onTouched();
+    }
+    /** @nocollapse */ static { this.ɵfac = function DrToggleComponent_Factory(t) { return new (t || DrToggleComponent)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); }; }
+    /** @nocollapse */ static { this.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: DrToggleComponent, selectors: [["dr-toggle"]], hostVars: 2, hostBindings: function DrToggleComponent_HostBindings(rf, ctx) { if (rf & 2) {
+            i0.ɵɵclassMap(ctx.elementClass);
+        } }, inputs: { toggleTitle: "toggleTitle", toggleTitleRight: "toggleTitleRight", successType: "successType", checkedStatus: "checkedStatus", disabled: "disabled" }, outputs: { checkedChange: "checkedChange" }, features: [i0.ɵɵProvidersFeature([{ provide: NG_VALUE_ACCESSOR, useExisting: DrToggleComponent, multi: true }])], ngContentSelectors: _c0$l, decls: 7, vars: 9, consts: [["class", "toggle-title mr-3", 4, "ngIf"], [1, "toggle-container"], ["type", "checkbox", 3, "checked", "disabled", "click"], [1, "toggle-body"], ["class", "toggle-title ml-3", 4, "ngIf"], [1, "toggle-title", "mr-3"], [1, "toggle-title", "ml-3"]], template: function DrToggleComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵprojectionDef();
+            i0.ɵɵtemplate(0, DrToggleComponent_span_0_Template, 2, 1, "span", 0);
+            i0.ɵɵelementStart(1, "label", 1)(2, "input", 2);
+            i0.ɵɵlistener("click", function DrToggleComponent_Template_input_click_2_listener() { return ctx.setValue(); });
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(3, "span", 3);
+            i0.ɵɵelement(4, "i");
+            i0.ɵɵelementEnd();
+            i0.ɵɵprojection(5);
+            i0.ɵɵelementEnd();
+            i0.ɵɵtemplate(6, DrToggleComponent_span_6_Template, 2, 1, "span", 4);
+        } if (rf & 2) {
+            i0.ɵɵproperty("ngIf", ctx.toggleTitle && !ctx.toggleTitleRight);
+            i0.ɵɵadvance(1);
+            i0.ɵɵclassProp("success", ctx.successType)("disabled", ctx._disabled);
+            i0.ɵɵadvance(1);
+            i0.ɵɵproperty("checked", ctx.checkedStatus)("disabled", ctx._disabled);
+            i0.ɵɵattribute("data-test", ctx.checkedStatus ? "toggle-on" : "toggle-off");
+            i0.ɵɵadvance(4);
+            i0.ɵɵproperty("ngIf", ctx.toggleTitle && ctx.toggleTitleRight);
+        } }, dependencies: [i1.NgIf], styles: ["[_nghost-%COMP%]{display:flex;justify-content:space-between;align-items:center;font-family:Poppins,sans-serif}.toggle-label-alignment[_nghost-%COMP%]{justify-content:start}[_nghost-%COMP%]   .toggle-container[_ngcontent-%COMP%]{display:flex;align-items:center}[_nghost-%COMP%]   .toggle-container.disabled[_ngcontent-%COMP%]{pointer-events:none}[_nghost-%COMP%]   .toggle-container.disabled[_ngcontent-%COMP%]   .toggle-body[_ngcontent-%COMP%]{background-color:#8f9bb329!important}[_nghost-%COMP%]   .toggle-container.disabled[_ngcontent-%COMP%]   .toggle-body[_ngcontent-%COMP%]   i[_ngcontent-%COMP%]{background:#8f9bb33d!important}[_nghost-%COMP%]   .toggle-container.success[_ngcontent-%COMP%]   input[_ngcontent-%COMP%]:checked + span.toggle-body[_ngcontent-%COMP%]{background-color:#03a678}[_nghost-%COMP%]   .toggle-container[_ngcontent-%COMP%]   input[_ngcontent-%COMP%]{display:none}[_nghost-%COMP%]   .toggle-container[_ngcontent-%COMP%]   input[_ngcontent-%COMP%]:checked + span.toggle-body[_ngcontent-%COMP%] > i[_ngcontent-%COMP%], [_nghost-%COMP%]   .toggle-container[_ngcontent-%COMP%]   input[_ngcontent-%COMP%]:checked + span.toggle-body[_ngcontent-%COMP%]:active > i[_ngcontent-%COMP%]{margin-left:16px}[_nghost-%COMP%]   .toggle-container[_ngcontent-%COMP%]   input[_ngcontent-%COMP%]:checked + span.toggle-body[_ngcontent-%COMP%]{background-color:#4646ce}[_nghost-%COMP%]   .toggle-container[_ngcontent-%COMP%]   .toggle-body[_ngcontent-%COMP%]{cursor:pointer;display:block;width:30px;height:16px;margin:7px auto;border-radius:15px;transition:all .2s ease-in-out;-webkit-transition:all .2s ease-in-out;background-color:#8f929e;line-height:1}[_nghost-%COMP%]   .toggle-container[_ngcontent-%COMP%]   .toggle-body[_ngcontent-%COMP%]:active{background-color:#a6b9cb}[_nghost-%COMP%]   .toggle-container[_ngcontent-%COMP%]   .toggle-body-wrapper[_ngcontent-%COMP%]{display:flex;flex-direction:column}[_nghost-%COMP%]   .toggle-container[_ngcontent-%COMP%]   .toggle-body[_ngcontent-%COMP%]   i[_ngcontent-%COMP%]{height:12px;width:12px;background:#fff;display:inline-block;border-radius:100px;margin-top:2px;margin-left:1.5px;transition:all .2s ease-in-out;-webkit-transition:all .2s ease-in-out;pointer-events:none}[_nghost-%COMP%]   .toggle-title[_ngcontent-%COMP%]{line-height:22px}"], changeDetection: 0 }); }
+}
+(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DrToggleComponent, [{
+        type: Component,
+        args: [{ selector: 'dr-toggle', providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: DrToggleComponent, multi: true }], changeDetection: ChangeDetectionStrategy.OnPush, template: "<span class=\"toggle-title mr-3\" *ngIf=\"toggleTitle && !toggleTitleRight\">{{ toggleTitle }}</span>\n<label class=\"toggle-container\" [class.success]=\"successType\" [class.disabled]=\"_disabled\">\n    <input\n        type=\"checkbox\"\n        [attr.data-test]=\"checkedStatus ? 'toggle-on' : 'toggle-off'\"\n        [checked]=\"checkedStatus\"\n        [disabled]=\"_disabled\"\n        (click)=\"setValue()\" />\n    <span class=\"toggle-body\">\n        <i></i>\n    </span>\n    <ng-content></ng-content>\n</label>\n<span class=\"toggle-title ml-3\" *ngIf=\"toggleTitle && toggleTitleRight\">{{ toggleTitle }}</span>\n", styles: [":host{display:flex;justify-content:space-between;align-items:center;font-family:Poppins,sans-serif}:host.toggle-label-alignment{justify-content:start}:host .toggle-container{display:flex;align-items:center}:host .toggle-container.disabled{pointer-events:none}:host .toggle-container.disabled .toggle-body{background-color:#8f9bb329!important}:host .toggle-container.disabled .toggle-body i{background:#8f9bb33d!important}:host .toggle-container.success input:checked+span.toggle-body{background-color:#03a678}:host .toggle-container input{display:none}:host .toggle-container input:checked+span.toggle-body>i,:host .toggle-container input:checked+span.toggle-body:active>i{margin-left:16px}:host .toggle-container input:checked+span.toggle-body{background-color:#4646ce}:host .toggle-container .toggle-body{cursor:pointer;display:block;width:30px;height:16px;margin:7px auto;border-radius:15px;transition:all .2s ease-in-out;-webkit-transition:all .2s ease-in-out;background-color:#8f929e;line-height:1}:host .toggle-container .toggle-body:active{background-color:#a6b9cb}:host .toggle-container .toggle-body-wrapper{display:flex;flex-direction:column}:host .toggle-container .toggle-body i{height:12px;width:12px;background:#fff;display:inline-block;border-radius:100px;margin-top:2px;margin-left:1.5px;transition:all .2s ease-in-out;-webkit-transition:all .2s ease-in-out;pointer-events:none}:host .toggle-title{line-height:22px}\n"] }]
+    }], function () { return [{ type: i0.ChangeDetectorRef }]; }, { toggleTitle: [{
+            type: Input
+        }], toggleTitleRight: [{
+            type: Input
+        }], successType: [{
+            type: Input
+        }], checkedStatus: [{
+            type: Input
+        }], disabled: [{
+            type: Input
+        }], checkedChange: [{
+            type: Output
+        }], elementClass: [{
+            type: HostBinding,
+            args: ['class']
+        }] }); })();
+
 var BadgeStatus;
 (function (BadgeStatus) {
     BadgeStatus["INFO"] = "info";
@@ -6892,7 +7362,7 @@ function DrAlertComponent_span_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance(1);
     i0.ɵɵtextInterpolate(ctx_r0.text);
 } }
-const _c0$l = ["*"];
+const _c0$k = ["*"];
 const ALERT_THEME_ICONS = {
     [DrAlertTheme.SUCCESS]: 'dr-icon-uploaded-success',
     [DrAlertTheme.BOLD_ERROR]: 'dr-icon-error',
@@ -6913,7 +7383,7 @@ class DrAlertComponent {
     /** @nocollapse */ static { this.ɵfac = function DrAlertComponent_Factory(t) { return new (t || DrAlertComponent)(); }; }
     /** @nocollapse */ static { this.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: DrAlertComponent, selectors: [["dr-alert"]], hostVars: 2, hostBindings: function DrAlertComponent_HostBindings(rf, ctx) { if (rf & 2) {
             i0.ɵɵclassMap(ctx.elementClass);
-        } }, inputs: { theme: "theme", customIconClass: "customIconClass", text: "text" }, ngContentSelectors: _c0$l, decls: 6, vars: 3, consts: [[1, "dr-alert__content-wrapper"], ["class", "dr-alert__text", 4, "ngIf"], [1, "dr-alert__custom-content"], ["contentRef", ""], [1, "dr-alert__text"]], template: function DrAlertComponent_Template(rf, ctx) { if (rf & 1) {
+        } }, inputs: { theme: "theme", customIconClass: "customIconClass", text: "text" }, ngContentSelectors: _c0$k, decls: 6, vars: 3, consts: [[1, "dr-alert__content-wrapper"], ["class", "dr-alert__text", 4, "ngIf"], [1, "dr-alert__custom-content"], ["contentRef", ""], [1, "dr-alert__text"]], template: function DrAlertComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef();
             i0.ɵɵelementStart(0, "div", 0);
             i0.ɵɵelement(1, "i");
@@ -6959,7 +7429,7 @@ class CodeEditorHintWrapperComponent {
             }]
     }], null, null); })();
 
-const _c0$k = ["ref"];
+const _c0$j = ["ref"];
 class DrCodemirrorComponent {
     set options(value) {
         this._options = value;
@@ -7089,7 +7559,7 @@ class DrCodemirrorComponent {
     }
     /** @nocollapse */ static { this.ɵfac = function DrCodemirrorComponent_Factory(t) { return new (t || DrCodemirrorComponent)(i0.ɵɵdirectiveInject(i0.KeyValueDiffers), i0.ɵɵdirectiveInject(i0.NgZone)); }; }
     /** @nocollapse */ static { this.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: DrCodemirrorComponent, selectors: [["dr-codemirror"]], viewQuery: function DrCodemirrorComponent_Query(rf, ctx) { if (rf & 1) {
-            i0.ɵɵviewQuery(_c0$k, 5);
+            i0.ɵɵviewQuery(_c0$j, 5);
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.ref = _t.first);
@@ -7241,7 +7711,7 @@ class DrErrorComponent {
             args: ['class.no-icon']
         }] }); })();
 
-const _c0$j = ["codeEditor"];
+const _c0$i = ["codeEditor"];
 function DrCodeEditorComponent_span_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span", 4);
     i0.ɵɵtext(1);
@@ -7520,7 +7990,7 @@ class DrCodeEditorComponent {
     }
     /** @nocollapse */ static { this.ɵfac = function DrCodeEditorComponent_Factory(t) { return new (t || DrCodeEditorComponent)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(i0.ComponentFactoryResolver), i0.ɵɵdirectiveInject(i0.Injector)); }; }
     /** @nocollapse */ static { this.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: DrCodeEditorComponent, selectors: [["dr-code-editor"]], viewQuery: function DrCodeEditorComponent_Query(rf, ctx) { if (rf & 1) {
-            i0.ɵɵviewQuery(_c0$j, 5);
+            i0.ɵɵviewQuery(_c0$i, 5);
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.codeEditor = _t.first);
@@ -8288,7 +8758,7 @@ const getAlignmentDimension = (position) => {
     return DrPopoverAlignmentDimension.Width;
 };
 
-const _c0$i = ["popoverContainer"];
+const _c0$h = ["popoverContainer"];
 function DrPopoverComponent_ng_container_2_ng_container_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainer(0);
 } }
@@ -8378,7 +8848,7 @@ class DrPopoverComponent {
     }
     /** @nocollapse */ static { this.ɵfac = function DrPopoverComponent_Factory(t) { return new (t || DrPopoverComponent)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(i0.ViewContainerRef), i0.ɵɵdirectiveInject(i0.ElementRef), i0.ɵɵdirectiveInject(DrPopoverRef)); }; }
     /** @nocollapse */ static { this.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: DrPopoverComponent, selectors: [["dr-popover"]], viewQuery: function DrPopoverComponent_Query(rf, ctx) { if (rf & 1) {
-            i0.ɵɵviewQuery(_c0$i, 7, ElementRef);
+            i0.ɵɵviewQuery(_c0$h, 7, ElementRef);
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.popoverContainer = _t.first);
@@ -8695,7 +9165,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 var __metadata = (this && this.__metadata) || function (k, v) {
     if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
 };
-const _c0$h = ["menuContainer"];
+const _c0$g = ["menuContainer"];
 function DrDropdownComponent_dr_dropdown_item_4_ng_container_1_i_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "i", 11);
 } if (rf & 2) {
@@ -8745,14 +9215,14 @@ function DrDropdownComponent_dr_dropdown_item_4_ng_container_2_Template(rf, ctx)
     i0.ɵɵadvance(1);
     i0.ɵɵproperty("ngIf", ctx_r5.hasChildren(act_r2));
 } }
-const _c1$9 = function (a0) { return { $implicit: a0 }; };
+const _c1$8 = function (a0) { return { $implicit: a0 }; };
 function DrDropdownComponent_dr_dropdown_item_4_ng_container_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainer(0, 17);
 } if (rf & 2) {
     const act_r2 = i0.ɵɵnextContext().$implicit;
-    i0.ɵɵproperty("ngTemplateOutlet", act_r2.templateRef)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c1$9, act_r2));
+    i0.ɵɵproperty("ngTemplateOutlet", act_r2.templateRef)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c1$8, act_r2));
 } }
-const _c2$2 = function () { return { withoutArrow: true }; };
+const _c2$1 = function () { return { withoutArrow: true }; };
 function DrDropdownComponent_dr_dropdown_item_4_Template(rf, ctx) { if (rf & 1) {
     const _r20 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "dr-dropdown-item", 4);
@@ -8765,7 +9235,7 @@ function DrDropdownComponent_dr_dropdown_item_4_Template(rf, ctx) { if (rf & 1)
     const act_r2 = ctx.$implicit;
     const index_r3 = ctx.index;
     const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("drTooltip", ctx_r1.tooltipToShow(act_r2))("drTooltipPosition", "left")("drTooltipOptions", i0.ɵɵpureFunction0(15, _c2$2))("drTooltipClass", "dr-dropdown__tooltip")("drDropdown", ctx_r1.hasChildren(act_r2) && act_r2.children)("drDropdownClass", act_r2.childOptions == null ? null : act_r2.childOptions.class)("drDropdownInHover", true)("drDropdownPosition", act_r2.childOptions == null ? null : act_r2.childOptions.position)("disabled", ctx_r1.disabled(act_r2))("selected", ctx_r1.selected(act_r2))("divider", act_r2.separateLine);
+    i0.ɵɵproperty("drTooltip", ctx_r1.tooltipToShow(act_r2))("drTooltipPosition", "left")("drTooltipOptions", i0.ɵɵpureFunction0(15, _c2$1))("drTooltipClass", "dr-dropdown__tooltip")("drDropdown", ctx_r1.hasChildren(act_r2) && act_r2.children)("drDropdownClass", act_r2.childOptions == null ? null : act_r2.childOptions.class)("drDropdownInHover", true)("drDropdownPosition", act_r2.childOptions == null ? null : act_r2.childOptions.position)("disabled", ctx_r1.disabled(act_r2))("selected", ctx_r1.selected(act_r2))("divider", act_r2.separateLine);
     i0.ɵɵattribute("data-analytics", ctx_r1.getDataAnalyticsTag(act_r2, index_r3));
     i0.ɵɵadvance(1);
     i0.ɵɵproperty("ngIf", !act_r2.templateRef);
@@ -8774,8 +9244,8 @@ function DrDropdownComponent_dr_dropdown_item_4_Template(rf, ctx) { if (rf & 1)
     i0.ɵɵadvance(1);
     i0.ɵɵproperty("ngIf", act_r2.templateRef);
 } }
-const _c3$2 = [[["dr-dropdown-item"]]];
-const _c4$1 = ["dr-dropdown-item"];
+const _c3$1 = [[["dr-dropdown-item"]]];
+const _c4 = ["dr-dropdown-item"];
 class DrDropdownComponent {
     set options(data) {
         if (data) {
@@ -8891,12 +9361,12 @@ class DrDropdownComponent {
     }
     /** @nocollapse */ static { this.ɵfac = function DrDropdownComponent_Factory(t) { return new (t || DrDropdownComponent)(); }; }
     /** @nocollapse */ static { this.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: DrDropdownComponent, selectors: [["dr-dropdown"]], viewQuery: function DrDropdownComponent_Query(rf, ctx) { if (rf & 1) {
-            i0.ɵɵviewQuery(_c0$h, 7);
+            i0.ɵɵviewQuery(_c0$g, 7);
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.menuContainer = _t.first);
-        } }, inputs: { options: "options" }, outputs: { onAction: "action" }, features: [i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c4$1, decls: 6, vars: 5, consts: [[1, "dr-dropdown"], ["menuContainer", ""], ["tabindex", "-1", "role", "listbox", 1, "dr-dropdown__container", 3, "mouseenter", "mouseleave"], ["drDropdownChild", "", "role", "option", "tabindex", "0", 3, "drTooltip", "drTooltipPosition", "drTooltipOptions", "drTooltipClass", "drDropdown", "drDropdownClass", "drDropdownInHover", "drDropdownPosition", "disabled", "selected", "divider", "mousedown", 4, "ngFor", "ngForOf"], ["drDropdownChild", "", "role", "option", "tabindex", "0", 3, "drTooltip", "drTooltipPosition", "drTooltipOptions", "drTooltipClass", "drDropdown", "drDropdownClass", "drDropdownInHover", "drDropdownPosition", "disabled", "selected", "divider", "mousedown"], ["dropdownItemContent", "", 4, "ngIf"], ["dropdownItemActions", "", 4, "ngIf"], ["dropdownItemContent", "", 3, "ngTemplateOutlet", "ngTemplateOutletContext", 4, "ngIf"], ["dropdownItemContent", ""], ["class", "dr-dropdown__icon", 3, "class", 4, "ngIf"], [1, "dr-dropdown__text"], [1, "dr-dropdown__icon"], ["dropdownItemActions", ""], [3, "class", "showOnHover", "mousedown", 4, "ngFor", "ngForOf"], ["class", "dr-icon-arrow-right", 4, "ngIf"], [3, "mousedown"], [1, "dr-icon-arrow-right"], ["dropdownItemContent", "", 3, "ngTemplateOutlet", "ngTemplateOutletContext"]], template: function DrDropdownComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵprojectionDef(_c3$2);
+        } }, inputs: { options: "options" }, outputs: { onAction: "action" }, features: [i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c4, decls: 6, vars: 5, consts: [[1, "dr-dropdown"], ["menuContainer", ""], ["tabindex", "-1", "role", "listbox", 1, "dr-dropdown__container", 3, "mouseenter", "mouseleave"], ["drDropdownChild", "", "role", "option", "tabindex", "0", 3, "drTooltip", "drTooltipPosition", "drTooltipOptions", "drTooltipClass", "drDropdown", "drDropdownClass", "drDropdownInHover", "drDropdownPosition", "disabled", "selected", "divider", "mousedown", 4, "ngFor", "ngForOf"], ["drDropdownChild", "", "role", "option", "tabindex", "0", 3, "drTooltip", "drTooltipPosition", "drTooltipOptions", "drTooltipClass", "drDropdown", "drDropdownClass", "drDropdownInHover", "drDropdownPosition", "disabled", "selected", "divider", "mousedown"], ["dropdownItemContent", "", 4, "ngIf"], ["dropdownItemActions", "", 4, "ngIf"], ["dropdownItemContent", "", 3, "ngTemplateOutlet", "ngTemplateOutletContext", 4, "ngIf"], ["dropdownItemContent", ""], ["class", "dr-dropdown__icon", 3, "class", 4, "ngIf"], [1, "dr-dropdown__text"], [1, "dr-dropdown__icon"], ["dropdownItemActions", ""], [3, "class", "showOnHover", "mousedown", 4, "ngFor", "ngForOf"], ["class", "dr-icon-arrow-right", 4, "ngIf"], [3, "mousedown"], [1, "dr-icon-arrow-right"], ["dropdownItemContent", "", 3, "ngTemplateOutlet", "ngTemplateOutletContext"]], template: function DrDropdownComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵprojectionDef(_c3$1);
             i0.ɵɵelementStart(0, "div", 0, 1)(2, "div", 2);
             i0.ɵɵlistener("mouseenter", function DrDropdownComponent_Template_div_mouseenter_2_listener() { return ctx.onMouseenter(); })("mouseleave", function DrDropdownComponent_Template_div_mouseleave_2_listener() { return ctx.onMouseleave(); });
             i0.ɵɵprojection(3);
@@ -9124,12 +9594,12 @@ class DrDropdownChildDirective {
             }]
     }], null, null); })();
 
-const _c0$g = [[["", "dropdownItemContent", ""]], [["", "dropdownItemActions", ""]]];
-const _c1$8 = ["[dropdownItemContent]", "[dropdownItemActions]"];
+const _c0$f = [[["", "dropdownItemContent", ""]], [["", "dropdownItemActions", ""]]];
+const _c1$7 = ["[dropdownItemContent]", "[dropdownItemActions]"];
 class DrDropdownItemComponent {
     /** @nocollapse */ static { this.ɵfac = function DrDropdownItemComponent_Factory(t) { return new (t || DrDropdownItemComponent)(); }; }
-    /** @nocollapse */ static { this.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: DrDropdownItemComponent, selectors: [["dr-dropdown-item"]], inputs: { selected: "selected", disabled: "disabled", divider: "divider" }, ngContentSelectors: _c1$8, decls: 5, vars: 6, consts: [[1, "dr-dropdown-item"], [1, "dr-dropdown-text"], [1, "dr-dropdown-actions"]], template: function DrDropdownItemComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵprojectionDef(_c0$g);
+    /** @nocollapse */ static { this.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: DrDropdownItemComponent, selectors: [["dr-dropdown-item"]], inputs: { selected: "selected", disabled: "disabled", divider: "divider" }, ngContentSelectors: _c1$7, decls: 5, vars: 6, consts: [[1, "dr-dropdown-item"], [1, "dr-dropdown-text"], [1, "dr-dropdown-actions"]], template: function DrDropdownItemComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵprojectionDef(_c0$f);
             i0.ɵɵelementStart(0, "div", 0)(1, "span", 1);
             i0.ɵɵprojection(2);
             i0.ɵɵelementEnd();
@@ -9168,7 +9638,7 @@ class DrDropdownItemShowPipe {
 function DrTabComponent_ng_template_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵprojection(0);
 } }
-const _c0$f = ["*"];
+const _c0$e = ["*"];
 class DrTabComponent {
     constructor() { }
     ngOnInit() { }
@@ -9178,7 +9648,7 @@ class DrTabComponent {
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.contentTemplate = _t.first);
-        } }, inputs: { id: "id", label: "label", icon: "icon", disabled: "disabled", tooltip: "tooltip", customLabelTemplate: "customLabelTemplate" }, ngContentSelectors: _c0$f, decls: 1, vars: 0, template: function DrTabComponent_Template(rf, ctx) { if (rf & 1) {
+        } }, inputs: { id: "id", label: "label", icon: "icon", disabled: "disabled", tooltip: "tooltip", customLabelTemplate: "customLabelTemplate" }, ngContentSelectors: _c0$e, decls: 1, vars: 0, template: function DrTabComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef();
             i0.ɵɵtemplate(0, DrTabComponent_ng_template_0_Template, 1, 0, "ng-template");
         } }, encapsulation: 2 }); }
@@ -9453,8 +9923,8 @@ class DrTabsComponent {
             args: [DrTabComponent]
         }] }); })();
 
-const _c0$e = [[["dr-accordion-item"]]];
-const _c1$7 = ["dr-accordion-item"];
+const _c0$d = [[["dr-accordion-item"]]];
+const _c1$6 = ["dr-accordion-item"];
 class DrAccordionComponent {
     constructor() {
         this.openCloseItems = new Subject();
@@ -9487,8 +9957,8 @@ class DrAccordionComponent {
     /** @nocollapse */ static { this.ɵfac = function DrAccordionComponent_Factory(t) { return new (t || DrAccordionComponent)(); }; }
     /** @nocollapse */ static { this.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: DrAccordionComponent, selectors: [["dr-accordion"]], hostVars: 2, hostBindings: function DrAccordionComponent_HostBindings(rf, ctx) { if (rf & 2) {
             i0.ɵɵclassMap(ctx.theme);
-        } }, inputs: { multi: "multi", theme: "theme" }, ngContentSelectors: _c1$7, decls: 1, vars: 0, template: function DrAccordionComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵprojectionDef(_c0$e);
+        } }, inputs: { multi: "multi", theme: "theme" }, ngContentSelectors: _c1$6, decls: 1, vars: 0, template: function DrAccordionComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵprojectionDef(_c0$d);
             i0.ɵɵprojection(0);
         } }, styles: ["[_nghost-%COMP%]{display:block;box-shadow:#2c33491a 0 5px 10px}.borderless[_nghost-%COMP%]{box-shadow:none}"], changeDetection: 0 }); }
 }
@@ -9505,8 +9975,8 @@ class DrAccordionComponent {
             args: ['class']
         }] }); })();
 
-const _c0$d = [[["dr-accordion-item-header"]], [["dr-accordion-item-body"]]];
-const _c1$6 = ["dr-accordion-item-header", "dr-accordion-item-body"];
+const _c0$c = [[["dr-accordion-item-header"]], [["dr-accordion-item-body"]]];
+const _c1$5 = ["dr-accordion-item-header", "dr-accordion-item-body"];
 class DrAccordionItemComponent {
     /**
      * Item is collapse (`true` by default)
@@ -9606,8 +10076,8 @@ class DrAccordionItemComponent {
     /** @nocollapse */ static { this.ɵfac = function DrAccordionItemComponent_Factory(t) { return new (t || DrAccordionItemComponent)(i0.ɵɵdirectiveInject(DrAccordionComponent, 1), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); }; }
     /** @nocollapse */ static { this.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: DrAccordionItemComponent, selectors: [["dr-accordion-item"]], hostVars: 6, hostBindings: function DrAccordionItemComponent_HostBindings(rf, ctx) { if (rf & 2) {
             i0.ɵɵclassProp("collapsed", ctx.collapsed)("expanded", ctx.expanded)("disabled", ctx.disabled);
-        } }, inputs: { collapsed: "collapsed", expanded: "expanded", disabled: "disabled" }, outputs: { collapsedChange: "collapsedChange" }, features: [i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c1$6, decls: 2, vars: 0, template: function DrAccordionItemComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵprojectionDef(_c0$d);
+        } }, inputs: { collapsed: "collapsed", expanded: "expanded", disabled: "disabled" }, outputs: { collapsedChange: "collapsedChange" }, features: [i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c1$5, decls: 2, vars: 0, template: function DrAccordionItemComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵprojectionDef(_c0$c);
             i0.ɵɵprojection(0);
             i0.ɵɵprojection(1, 1);
         } }, styles: ["[_nghost-%COMP%]{background-color:#fff;color:#222b45;font-family:Poppins,sans-serif;font-size:16px;font-weight:400;line-height:1.25rem;display:flex;flex-direction:column}"], changeDetection: 0 }); }
@@ -9649,8 +10119,8 @@ function DrAccordionItemHeaderComponent_i_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵclassMap("dr-accordion-item-header-icon " + ctx_r0.icon);
     i0.ɵɵclassProp("dr-accordion-item-header-icon--additional-padding", ctx_r0.chevronPosition === "left");
 } }
-const _c0$c = function (a0) { return { rotationDegree: a0 }; };
-const _c1$5 = function (a0, a1) { return { value: a0, params: a1 }; };
+const _c0$b = function (a0) { return { rotationDegree: a0 }; };
+const _c1$4 = function (a0, a1) { return { value: a0, params: a1 }; };
 function DrAccordionItemHeaderComponent_i_1_Template(rf, ctx) { if (rf & 1) {
     const _r3 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "i", 2);
@@ -9659,10 +10129,10 @@ function DrAccordionItemHeaderComponent_i_1_Template(rf, ctx) { if (rf & 1) {
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵclassMap(ctx_r1.chevronIconClass);
-    i0.ɵɵproperty("@expansionIndicator", i0.ɵɵpureFunction2(5, _c1$5, ctx_r1.state, i0.ɵɵpureFunction1(3, _c0$c, ctx_r1.chevronRotationDegree)));
+    i0.ɵɵproperty("@expansionIndicator", i0.ɵɵpureFunction2(5, _c1$4, ctx_r1.state, i0.ɵɵpureFunction1(3, _c0$b, ctx_r1.chevronRotationDegree)));
 } }
-const _c2$1 = [[["dr-accordion-item-title"]], [["dr-accordion-item-description"]], "*"];
-const _c3$1 = ["dr-accordion-item-title", "dr-accordion-item-description", "*"];
+const _c2 = [[["dr-accordion-item-title"]], [["dr-accordion-item-description"]], "*"];
+const _c3 = ["dr-accordion-item-title", "dr-accordion-item-description", "*"];
 class DrAccordionItemHeaderComponent {
     get isCollapsed() {
         return this.accordionItem.collapsed;
@@ -9717,8 +10187,8 @@ class DrAccordionItemHeaderComponent {
             i0.ɵɵattribute("aria-expanded", ctx.expanded)("tabindex", ctx.tabbable)("aria-disabled", ctx.disabled);
             i0.ɵɵclassMap(ctx.theme);
             i0.ɵɵclassProp("accordion-item-header-collapsed", ctx.isCollapsed)("accordion-item-header-expanded", ctx.expanded);
-        } }, inputs: { chevronOrientation: "chevronOrientation", chevronPosition: "chevronPosition", icon: "icon", toggleOnChevronClick: "toggleOnChevronClick" }, ngContentSelectors: _c3$1, decls: 5, vars: 2, consts: [[3, "class", "dr-accordion-item-header-icon--additional-padding", 4, "ngIf"], [3, "class", "click", 4, "ngIf"], [3, "click"]], template: function DrAccordionItemHeaderComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵprojectionDef(_c2$1);
+        } }, inputs: { chevronOrientation: "chevronOrientation", chevronPosition: "chevronPosition", icon: "icon", toggleOnChevronClick: "toggleOnChevronClick" }, ngContentSelectors: _c3, decls: 5, vars: 2, consts: [[3, "class", "dr-accordion-item-header-icon--additional-padding", 4, "ngIf"], [3, "class", "click", 4, "ngIf"], [3, "click"]], template: function DrAccordionItemHeaderComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵprojectionDef(_c2);
             i0.ɵɵtemplate(0, DrAccordionItemHeaderComponent_i_0_Template, 1, 4, "i", 0);
             i0.ɵɵtemplate(1, DrAccordionItemHeaderComponent_i_1_Template, 1, 8, "i", 1);
             i0.ɵɵprojection(2);
@@ -9788,8 +10258,8 @@ class DrAccordionItemHeaderComponent {
             args: ['keydown.enter']
         }] }); })();
 
-const _c0$b = function (a0) { return { value: a0 }; };
-const _c1$4 = ["*"];
+const _c0$a = function (a0) { return { value: a0 }; };
+const _c1$3 = ["*"];
 const accordionItemBodyTrigger = trigger('accordionItemBody', [
     state('collapsed', style({
         overflow: 'hidden',
@@ -9820,13 +10290,13 @@ class DrAccordionItemBodyComponent {
         this.destroy$.complete();
     }
     /** @nocollapse */ static { this.ɵfac = function DrAccordionItemBodyComponent_Factory(t) { return new (t || DrAccordionItemBodyComponent)(i0.ɵɵdirectiveInject(DrAccordionItemComponent, 1), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); }; }
-    /** @nocollapse */ static { this.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: DrAccordionItemBodyComponent, selectors: [["dr-accordion-item-body"]], ngContentSelectors: _c1$4, decls: 3, vars: 3, consts: [[1, "item-body"]], template: function DrAccordionItemBodyComponent_Template(rf, ctx) { if (rf & 1) {
+    /** @nocollapse */ static { this.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: DrAccordionItemBodyComponent, selectors: [["dr-accordion-item-body"]], ngContentSelectors: _c1$3, decls: 3, vars: 3, consts: [[1, "item-body"]], template: function DrAccordionItemBodyComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef();
             i0.ɵɵelementStart(0, "div")(1, "div", 0);
             i0.ɵɵprojection(2);
             i0.ɵɵelementEnd()();
         } if (rf & 2) {
-            i0.ɵɵproperty("@accordionItemBody", i0.ɵɵpureFunction1(1, _c0$b, ctx.state));
+            i0.ɵɵproperty("@accordionItemBody", i0.ɵɵpureFunction1(1, _c0$a, ctx.state));
         } }, styles: [".item-body[_ngcontent-%COMP%]{flex:1;-ms-flex:1 1 auto;overflow:auto;position:relative}"], data: { animation: [accordionItemBodyTrigger] }, changeDetection: 0 }); }
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DrAccordionItemBodyComponent, [{
@@ -9842,13 +10312,13 @@ class DrAccordionItemBodyComponent {
                 type: Host
             }] }, { type: i0.ChangeDetectorRef }]; }, null); })();
 
-const _c0$a = [[["dr-layout-header"]], [["dr-layout-body"]]];
-const _c1$3 = ["dr-layout-header", "dr-layout-body"];
+const _c0$9 = [[["dr-layout-header"]], [["dr-layout-body"]]];
+const _c1$2 = ["dr-layout-header", "dr-layout-body"];
 class DrLayoutComponent {
     constructor() { }
     /** @nocollapse */ static { this.ɵfac = function DrLayoutComponent_Factory(t) { return new (t || DrLayoutComponent)(); }; }
-    /** @nocollapse */ static { this.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: DrLayoutComponent, selectors: [["dr-layout"]], ngContentSelectors: _c1$3, decls: 6, vars: 0, consts: [[1, "dr-layout"], [1, "dr-layout__container"], [1, "content"], [1, "columns"]], template: function DrLayoutComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵprojectionDef(_c0$a);
+    /** @nocollapse */ static { this.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: DrLayoutComponent, selectors: [["dr-layout"]], ngContentSelectors: _c1$2, decls: 6, vars: 0, consts: [[1, "dr-layout"], [1, "dr-layout__container"], [1, "content"], [1, "columns"]], template: function DrLayoutComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵprojectionDef(_c0$9);
             i0.ɵɵelementStart(0, "div", 0);
             i0.ɵɵprojection(1);
             i0.ɵɵelementStart(2, "div", 1)(3, "div", 2)(4, "div", 3);
@@ -9861,11 +10331,11 @@ class DrLayoutComponent {
         args: [{ selector: 'dr-layout', template: "<div class=\"dr-layout\">\n    <ng-content select=\"dr-layout-header\"></ng-content>\n    <div class=\"dr-layout__container\">\n        <div class=\"content\">\n            <div class=\"columns\">\n                <ng-content select=\"dr-layout-body\"></ng-content>\n            </div>\n        </div>\n    </div>\n</div>\n", styles: [":host{font-size:16px;font-weight:400;font-family:Poppins,sans-serif;line-height:1.25rem;-webkit-font-smoothing:antialiased}:host .dr-layout{display:flex;flex-direction:column;min-height:100vh;font-size:16px;font-weight:400;line-height:1.4rem}:host .dr-layout ::ng-deep dr-layout-header{display:block;position:fixed;top:0;left:0;right:0;z-index:1040}:host .dr-layout ::ng-deep dr-layout-header nav{align-items:center;justify-content:flex-start;display:flex}:host .dr-layout__container{display:flex;flex:1;-ms-flex:1 1 auto;flex-direction:row}:host .dr-layout__container .content{display:flex;flex:1;-ms-flex:1 1 auto;flex-direction:column;min-width:0}:host .dr-layout__container .content .columns{display:flex;flex:1;-ms-flex:1 1 auto;flex-direction:row;width:100%}:host .dr-layout__container .content .columns ::ng-deep dr-layout-body{flex:1 0;min-width:0}\n"] }]
     }], function () { return []; }, null); })();
 
-const _c0$9 = ["*"];
+const _c0$8 = ["*"];
 class DrLayoutHeaderComponent {
     constructor() { }
     /** @nocollapse */ static { this.ɵfac = function DrLayoutHeaderComponent_Factory(t) { return new (t || DrLayoutHeaderComponent)(); }; }
-    /** @nocollapse */ static { this.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: DrLayoutHeaderComponent, selectors: [["dr-layout-header"]], ngContentSelectors: _c0$9, decls: 2, vars: 0, template: function DrLayoutHeaderComponent_Template(rf, ctx) { if (rf & 1) {
+    /** @nocollapse */ static { this.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: DrLayoutHeaderComponent, selectors: [["dr-layout-header"]], ngContentSelectors: _c0$8, decls: 2, vars: 0, template: function DrLayoutHeaderComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef();
             i0.ɵɵelementStart(0, "nav");
             i0.ɵɵprojection(1);
@@ -9884,11 +10354,11 @@ class DrLayoutHeaderComponent {
             }]
     }], function () { return []; }, null); })();
 
-const _c0$8 = ["*"];
+const _c0$7 = ["*"];
 class DrLayoutBodyComponent {
     constructor() { }
     /** @nocollapse */ static { this.ɵfac = function DrLayoutBodyComponent_Factory(t) { return new (t || DrLayoutBodyComponent)(); }; }
-    /** @nocollapse */ static { this.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: DrLayoutBodyComponent, selectors: [["dr-layout-body"]], ngContentSelectors: _c0$8, decls: 1, vars: 0, template: function DrLayoutBodyComponent_Template(rf, ctx) { if (rf & 1) {
+    /** @nocollapse */ static { this.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: DrLayoutBodyComponent, selectors: [["dr-layout-body"]], ngContentSelectors: _c0$7, decls: 1, vars: 0, template: function DrLayoutBodyComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef();
             i0.ɵɵprojection(0);
         } }, encapsulation: 2 }); }
@@ -9910,7 +10380,7 @@ function DrDetailsListComponent_li_5_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance(1);
     i0.ɵɵtextInterpolate(item_r1);
 } }
-const _c0$7 = function (a0) { return { value: a0 }; };
+const _c0$6 = function (a0) { return { value: a0 }; };
 class DrDetailsListComponent {
     set items(val) {
         if (!val) {
@@ -9957,7 +10427,7 @@ class DrDetailsListComponent {
             i0.ɵɵadvance(1);
             i0.ɵɵtextInterpolate1(" ", ctx.title, " ");
             i0.ɵɵadvance(1);
-            i0.ɵɵproperty("@expansionIndicatorList", i0.ɵɵpureFunction1(7, _c0$7, ctx.state));
+            i0.ɵɵproperty("@expansionIndicatorList", i0.ɵɵpureFunction1(7, _c0$6, ctx.state));
             i0.ɵɵadvance(1);
             i0.ɵɵproperty("ngForOf", ctx.list);
         } }, dependencies: [i1.NgForOf], styles: ["[_nghost-%COMP%]{font-family:Poppins,sans-serif;font-size:14px;line-height:22px;color:#6d6e6f;font-weight:400}[_nghost-%COMP%]   .details[_ngcontent-%COMP%]{display:flex;flex-direction:column}[_nghost-%COMP%]   .details__header[_ngcontent-%COMP%]{display:flex;align-items:center;cursor:pointer}[_nghost-%COMP%]   .details__header[_ngcontent-%COMP%]   i[_ngcontent-%COMP%]{margin-right:4px}[_nghost-%COMP%]   .details__list[_ngcontent-%COMP%]{display:flex;flex-direction:column;padding-left:28px;margin:8px 0}[_nghost-%COMP%]   .details__list[_ngcontent-%COMP%]   li[_ngcontent-%COMP%]{list-style-type:disc}"], data: { animation: [
@@ -10001,7 +10471,7 @@ class DrDetailsListComponent {
             type: Input
         }] }); })();
 
-const _c0$6 = ["content"];
+const _c0$5 = ["content"];
 function DialogWrapperComponent_i_1_Template(rf, ctx) { if (rf & 1) {
     const _r7 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "i", 10);
@@ -10103,7 +10573,7 @@ function DialogWrapperComponent_div_9_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance(1);
     i0.ɵɵproperty("ngIf", ctx_r5.dialogData.acceptButton);
 } }
-const _c1$2 = function (a0) { return { "flex-position": a0 }; };
+const _c1$1 = function (a0) { return { "flex-position": a0 }; };
 class DialogWrapperComponent {
     get elementClass() {
         return this.dialogData?.theme?.noThemeSizeClass ? null : this.dialogData?.theme?.themeSize || 'medium-modal';
@@ -10178,7 +10648,7 @@ class DialogWrapperComponent {
     }
     /** @nocollapse */ static { this.ɵfac = function DialogWrapperComponent_Factory(t) { return new (t || DialogWrapperComponent)(i0.ɵɵdirectiveInject(i1$6.MatLegacyDialogRef), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(i0.ComponentFactoryResolver), i0.ɵɵdirectiveInject(MAT_LEGACY_DIALOG_DATA)); }; }
     /** @nocollapse */ static { this.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: DialogWrapperComponent, selectors: [["dr-dialog-wrapper"]], viewQuery: function DialogWrapperComponent_Query(rf, ctx) { if (rf & 1) {
-            i0.ɵɵviewQuery(_c0$6, 5, ViewContainerRef);
+            i0.ɵɵviewQuery(_c0$5, 5, ViewContainerRef);
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.content = _t.first);
@@ -10203,7 +10673,7 @@ class DialogWrapperComponent {
             i0.ɵɵproperty("ngIf", ctx.dialogData.title);
             i0.ɵɵadvance(1);
             i0.ɵɵclassProp("dialog-wrapper__content--no-padding", ctx.dialogData.theme == null ? null : ctx.dialogData.theme.contentNoPadding);
-            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(11, _c1$2, (ctx.dialogData.contentIcon == null ? null : ctx.dialogData.contentIcon.class) && !ctx.childComponent));
+            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(11, _c1$1, (ctx.dialogData.contentIcon == null ? null : ctx.dialogData.contentIcon.class) && !ctx.childComponent));
             i0.ɵɵadvance(1);
             i0.ɵɵproperty("ngIf", ctx.dialogData.contentIcon == null ? null : ctx.dialogData.contentIcon.class);
             i0.ɵɵadvance(1);
@@ -10374,8 +10844,8 @@ function DialogModalWrapperComponent_form_7_div_2_label_9_Template(rf, ctx) { if
     i0.ɵɵadvance(1);
     i0.ɵɵtextInterpolate1(" ", ctx_r19.dialogData.serverErrorMessage, " ");
 } }
-const _c0$5 = function (a0) { return { display: a0 }; };
-const _c1$1 = function (a0, a1) { return { "col-md-10": a0, "col-md-12": a1 }; };
+const _c0$4 = function (a0) { return { display: a0 }; };
+const _c1 = function (a0, a1) { return { "col-md-10": a0, "col-md-12": a1 }; };
 function DialogModalWrapperComponent_form_7_div_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 16);
     i0.ɵɵtemplate(1, DialogModalWrapperComponent_form_7_div_2_label_1_Template, 2, 2, "label", 17);
@@ -10392,11 +10862,11 @@ function DialogModalWrapperComponent_form_7_div_2_Template(rf, ctx) { if (rf & 1
     const field_r11 = ctx.$implicit;
     const ctx_r10 = i0.ɵɵnextContext(2);
     i0.ɵɵclassMap(field_r11.formGroupClass);
-    i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction1(12, _c0$5, field_r11.isLabelFullWidth ? "block" : "flex"));
+    i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction1(12, _c0$4, field_r11.isLabelFullWidth ? "block" : "flex"));
     i0.ɵɵadvance(1);
     i0.ɵɵproperty("ngIf", field_r11.label && field_r11.type !== ctx_r10.dialogFieldType.CHECKBOX);
     i0.ɵɵadvance(1);
-    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction2(14, _c1$1, field_r11.label && !field_r11.isLabelFullWidth, !field_r11.label || field_r11.isLabelFullWidth));
+    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction2(14, _c1, field_r11.label && !field_r11.isLabelFullWidth, !field_r11.label || field_r11.isLabelFullWidth));
     i0.ɵɵadvance(1);
     i0.ɵɵproperty("ngIf", field_r11.type === ctx_r10.dialogFieldType.SELECT);
     i0.ɵɵadvance(1);
@@ -10566,11 +11036,11 @@ class DialogModalWrapperComponent {
             i0.ɵɵproperty("ngIf", ctx.dialogData.fields);
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("ngIf", ctx.dialogData.cancelButton || ctx.dialogData.acceptButton);
-        } }, dependencies: [i1.NgClass, i1.NgForOf, i1.NgIf, i1.NgStyle, DrButtonComponent, CheckboxComponent, DrInputComponent, DrSelectComponent, DrDatePickerComponent, i1$2.ɵNgNoValidate, i1$2.NgControlStatus, i1$2.NgControlStatusGroup, i1$2.RequiredValidator, i1$2.FormGroupDirective, i1$2.FormControlName, i1.AsyncPipe], styles: ["[_nghost-%COMP%]{display:flex;justify-content:space-between;flex-direction:column}.small-modal[_nghost-%COMP%], .small-modal-max-height[_nghost-%COMP%]{min-height:188px;max-height:467px;min-width:400px;max-width:400px}.medium-modal[_nghost-%COMP%], .medium-modal-max-height[_nghost-%COMP%]{min-height:188px;max-height:467px;min-width:632px;max-width:632px}.medium-small-modal[_nghost-%COMP%]{min-height:188px;max-height:345px;min-width:460px;max-width:460px}.medium-modal-max-height[_nghost-%COMP%], .small-modal-max-height[_nghost-%COMP%]{max-height:80vh}.header-dialog[_ngcontent-%COMP%]{position:relative;display:flex;flex-direction:row;justify-content:space-between;align-items:center;padding:16px 56px 16px 32px;border-bottom:1px solid #dfe0e3}.header-dialog[_ngcontent-%COMP%] > .icon-close[_ngcontent-%COMP%]{position:absolute;right:32px;top:16px;cursor:pointer}.title-dialog[_ngcontent-%COMP%]{display:flex;color:#333;position:static;font-weight:600;font-size:16px;line-height:24px;margin-top:0;margin-bottom:0}.title-dialog__icon[_ngcontent-%COMP%]{font-size:32px;margin-right:8px;line-height:24px;color:#6d6e6f}.content-dialog[_ngcontent-%COMP%]{font-weight:400;font-size:14px;padding:16px 32px 5px;white-space:pre-line}.icon-close[_ngcontent-%COMP%]{color:#6d6e6f;cursor:pointer}.dr-smart-from[_ngcontent-%COMP%]{font-size:14px;font-weight:400;line-height:22px;padding:8px 32px 24px}.dr-smart-from[_ngcontent-%COMP%]   dr-checkbox[_ngcontent-%COMP%]{font-weight:400}.content-dialog[_ngcontent-%COMP%]{padding:16px 32px 0;font-weight:400;font-size:14px;line-height:22px}.content-anchor[_ngcontent-%COMP%]{display:none}.footer-dialog[_ngcontent-%COMP%]{border-top:1px solid #dfe0e3}.buttons-wrapper[_ngcontent-%COMP%]{display:flex;justify-content:flex-end;padding:10px 32px 11px}.buttons-wrapper[_ngcontent-%COMP%]   dr-button[_ngcontent-%COMP%]:nth-of-type(n+2){margin-left:12px}.buttons-wrapper--custom-btn[_ngcontent-%COMP%]{margin-right:auto}.form-field-error-alert[_ngcontent-%COMP%]{font-size:12px;color:#bf1d30;line-height:20px}.form-error-alert[_ngcontent-%COMP%]{position:absolute;margin-top:5px;font-size:12px;color:#bf1d30}.dr-select-footer__btn[_ngcontent-%COMP%]{background-color:transparent;display:flex;align-items:center;justify-content:flex-start;cursor:pointer;min-width:15rem;font-style:normal;font-weight:400;font-size:14px;line-height:24px;clear:both;width:100%;white-space:nowrap;padding:0 12px;height:36px;flex-shrink:0}"] }); }
+        } }, dependencies: [i1.NgClass, i1.NgForOf, i1.NgIf, i1.NgStyle, DrButtonComponent, CheckboxComponent, DrInputComponent, DrSelectComponent, DrDatePickerComponent, i1$2.ɵNgNoValidate, i1$2.NgControlStatus, i1$2.NgControlStatusGroup, i1$2.RequiredValidator, i1$2.FormGroupDirective, i1$2.FormControlName, i1.AsyncPipe], styles: ["[_nghost-%COMP%]{display:flex;justify-content:space-between;flex-direction:column}.small-modal[_nghost-%COMP%], .small-modal-max-height[_nghost-%COMP%]{min-height:188px;max-height:467px;min-width:400px;max-width:400px}.medium-modal[_nghost-%COMP%], .medium-modal-max-height[_nghost-%COMP%]{min-height:188px;max-height:467px;min-width:632px;max-width:632px}.medium-small-modal[_nghost-%COMP%]{min-height:188px;max-height:345px;min-width:460px;max-width:460px}.medium-modal-max-height[_nghost-%COMP%], .small-modal-max-height[_nghost-%COMP%]{max-height:80vh}.header-dialog[_ngcontent-%COMP%]{position:relative;display:flex;flex-direction:row;justify-content:space-between;align-items:center;padding:16px 56px 16px 32px;border-bottom:1px solid #dfe0e3}.header-dialog[_ngcontent-%COMP%] > .icon-close[_ngcontent-%COMP%]{position:absolute;right:32px;top:16px;cursor:pointer}.title-dialog[_ngcontent-%COMP%]{display:flex;color:#333;position:static;font-weight:600;font-size:16px;line-height:24px;margin-top:0;margin-bottom:0}.title-dialog__icon[_ngcontent-%COMP%]{font-size:32px;margin-right:8px;line-height:24px;color:#6d6e6f}.content-dialog[_ngcontent-%COMP%]{font-weight:400;font-size:14px;padding:16px 32px 5px;white-space:pre-line;overflow:auto}.icon-close[_ngcontent-%COMP%]{color:#6d6e6f;cursor:pointer}.dr-smart-from[_ngcontent-%COMP%]{font-size:14px;font-weight:400;line-height:22px;padding:8px 32px 24px}.dr-smart-from[_ngcontent-%COMP%]   dr-checkbox[_ngcontent-%COMP%]{font-weight:400}.content-dialog[_ngcontent-%COMP%]{padding:16px 32px 0;font-weight:400;font-size:14px;line-height:22px}.content-anchor[_ngcontent-%COMP%]{display:none}.footer-dialog[_ngcontent-%COMP%]{border-top:1px solid #dfe0e3}.buttons-wrapper[_ngcontent-%COMP%]{display:flex;justify-content:flex-end;padding:10px 32px 11px}.buttons-wrapper[_ngcontent-%COMP%]   dr-button[_ngcontent-%COMP%]:nth-of-type(n+2){margin-left:12px}.buttons-wrapper--custom-btn[_ngcontent-%COMP%]{margin-right:auto}.form-field-error-alert[_ngcontent-%COMP%]{font-size:12px;color:#bf1d30;line-height:20px}.form-error-alert[_ngcontent-%COMP%]{position:absolute;margin-top:5px;font-size:12px;color:#bf1d30}.dr-select-footer__btn[_ngcontent-%COMP%]{background-color:transparent;display:flex;align-items:center;justify-content:flex-start;cursor:pointer;min-width:15rem;font-style:normal;font-weight:400;font-size:14px;line-height:24px;clear:both;width:100%;white-space:nowrap;padding:0 12px;height:36px;flex-shrink:0}"] }); }
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DialogModalWrapperComponent, [{
         type: Component,
-        args: [{ selector: 'dr-dialog-modal-wrapper', template: "<div header class=\"header-dialog\">\n    <h1 class=\"title-dialog\" data-test=\"modalTitle\">\n        <i\n            *ngIf=\"dialogData.headerIconClass\"\n            (click)=\"closeDialog()\"\n            class=\"title-dialog__icon\"\n            [class]=\"dialogData.headerIconClass\"\n            data-test=\"dialogTitleIcon\"></i>\n        <span class=\"title-dialog__text\">{{ dialogData.title }}</span>\n    </h1>\n    <i *ngIf=\"!dialogData.hideCloseBtn\" (click)=\"closeDialog()\" class=\"dr-icon-exit icon-close\" data-test=\"xBtn\"></i>\n</div>\n<div *ngIf=\"dialogData.content\" class=\"content-dialog\" [innerHTML]=\"dialogData.content\">\n    <span #content class=\"content-anchor\"></span>\n</div>\n<form *ngIf=\"dialogData.fields\" [formGroup]=\"form\" class=\"dr-smart-from\">\n    <div [class]=\"dialogData.formWrapperClass || 'dr-smart-form_wrapper'\">\n        <div\n            *ngFor=\"let field of dialogData.fields\"\n            class=\"dr-smart-form_group\"\n            [class]=\"field.formGroupClass\"\n            [ngStyle]=\"{ display: field.isLabelFullWidth ? 'block' : 'flex' }\">\n            <label\n                *ngIf=\"field.label && field.type !== dialogFieldType.CHECKBOX\"\n                [ngClass]=\"field.isLabelFullWidth ? 'col-md-12 mb-2' : 'col-md-2'\"\n                class=\"label p-0 d-flex align-items-center\"\n                >{{ field.label }}</label\n            >\n            <div\n                class=\"input-group p-0\"\n                [ngClass]=\"{\n                    'col-md-10': field.label && !field.isLabelFullWidth,\n                    'col-md-12': !field.label || field.isLabelFullWidth,\n                }\">\n                <dr-select\n                    *ngIf=\"field.type === dialogFieldType.SELECT\"\n                    [searchable]=\"dialogData.searchable\"\n                    [clearable]=\"dialogData.clearable\"\n                    [formControlName]=\"field.name\"\n                    [bindLabel]=\"field.bindLabel || null\"\n                    [bindValue]=\"field.bindValue || null\"\n                    [selectedItem]=\"field.default\"\n                    [items]=\"field.items || (field.items$ | async)\"\n                    [loading]=\"fieldsItemsLoading[field.name] | async\"\n                    [required]=\"true\"\n                    [placeholder]=\"field.placeholder\">\n                    <ng-template *ngIf=\"dialogData?.footerTemplateData\" #optionFooterTemplate let-item=\"item\" let-close=\"close\">\n                        <button (click)=\"footerAction(); close()\" class=\"dr-select-footer__btn\">\n                            <i *ngIf=\"dialogData.footerTemplateData.icon\" class=\"{{ dialogData.footerTemplateData.icon }}\"></i>\n                            {{ dialogData.footerTemplateData.label }}\n                        </button>\n                    </ng-template>\n                </dr-select>\n                <dr-input\n                    *ngIf=\"field.type === dialogFieldType.INPUT\"\n                    data-test=\"modalInput\"\n                    class=\"form-control\"\n                    [formControlName]=\"field.name\"\n                    [placeholder]=\"field.placeholder\"></dr-input>\n                <dr-date-picker\n                    *ngIf=\"field.type === dialogFieldType.DATE_PICKER\"\n                    [formControlName]=\"field.name\"\n                    [format]=\"field.datePickerFormat\"\n                    [placeholder]=\"field.placeholder\"></dr-date-picker>\n                <dr-checkbox *ngIf=\"field.type === dialogFieldType.CHECKBOX\" [formControlName]=\"field.name\">\n                    {{ field.label }}\n                </dr-checkbox>\n                <label\n                    class=\"form-field-error-alert\"\n                    *ngIf=\"form.invalid && form.controls[field.name]?.dirty && form.controls[field.name]?.errors\">\n                    {{ form.controls[field.name].errors.errorString }}\n                </label>\n                <label class=\"form-error-alert\" *ngIf=\"dialogData.errorMessage && !form.pristine && form.invalid\">\n                    {{ dialogData.errorMessage }}\n                </label>\n                <label class=\"form-error-alert\" *ngIf=\"form.valid && showServerErrorMessage && dialogData.serverErrorMessage\">\n                    {{ dialogData.serverErrorMessage }}\n                </label>\n            </div>\n        </div>\n    </div>\n</form>\n\n<div footer class=\"footer-dialog\">\n    <div class=\"buttons-wrapper\" *ngIf=\"dialogData.cancelButton || dialogData.acceptButton\">\n        <dr-button\n            (click)=\"onDecline()\"\n            *ngIf=\"dialogData.customButton\"\n            [theme]=\"dialogData.customButton?.theme || 'secondary'\"\n            class=\"buttons-wrapper--custom-btn\"\n            data-test=\"declineBtn\"\n            >{{ dialogData.customButton.label }}</dr-button\n        >\n        <dr-button *ngIf=\"dialogData.cancelButton\" data-test=\"modalCloseBtn\" (click)=\"closeDialog()\" [theme]=\"'secondary'\">{{\n            dialogData.cancelButton.label\n        }}</dr-button>\n        <dr-button\n            *ngIf=\"dialogData.acceptButton\"\n            data-test=\"modalAddBtn\"\n            (click)=\"onAccept()\"\n            [theme]=\"'primary'\"\n            [isLoading]=\"isLoading\"\n            [disabled]=\"form.invalid\"\n            >{{ dialogData.acceptButton.label }}</dr-button\n        >\n    </div>\n</div>\n", styles: [":host{display:flex;justify-content:space-between;flex-direction:column}:host.small-modal,:host.small-modal-max-height{min-height:188px;max-height:467px;min-width:400px;max-width:400px}:host.medium-modal,:host.medium-modal-max-height{min-height:188px;max-height:467px;min-width:632px;max-width:632px}:host.medium-small-modal{min-height:188px;max-height:345px;min-width:460px;max-width:460px}:host.medium-modal-max-height,:host.small-modal-max-height{max-height:80vh}.header-dialog{position:relative;display:flex;flex-direction:row;justify-content:space-between;align-items:center;padding:16px 56px 16px 32px;border-bottom:1px solid #dfe0e3}.header-dialog>.icon-close{position:absolute;right:32px;top:16px;cursor:pointer}.title-dialog{display:flex;color:#333;position:static;font-weight:600;font-size:16px;line-height:24px;margin-top:0;margin-bottom:0}.title-dialog__icon{font-size:32px;margin-right:8px;line-height:24px;color:#6d6e6f}.content-dialog{font-weight:400;font-size:14px;padding:16px 32px 5px;white-space:pre-line}.icon-close{color:#6d6e6f;cursor:pointer}.dr-smart-from{font-size:14px;font-weight:400;line-height:22px;padding:8px 32px 24px}.dr-smart-from dr-checkbox{font-weight:400}.content-dialog{padding:16px 32px 0;font-weight:400;font-size:14px;line-height:22px}.content-anchor{display:none}.footer-dialog{border-top:1px solid #dfe0e3}.buttons-wrapper{display:flex;justify-content:flex-end;padding:10px 32px 11px}.buttons-wrapper dr-button:nth-of-type(n+2){margin-left:12px}.buttons-wrapper--custom-btn{margin-right:auto}.form-field-error-alert{font-size:12px;color:#bf1d30;line-height:20px}.form-error-alert{position:absolute;margin-top:5px;font-size:12px;color:#bf1d30}.dr-select-footer__btn{background-color:transparent;display:flex;align-items:center;justify-content:flex-start;cursor:pointer;min-width:15rem;font-style:normal;font-weight:400;font-size:14px;line-height:24px;clear:both;width:100%;white-space:nowrap;padding:0 12px;height:36px;flex-shrink:0}\n"] }]
+        args: [{ selector: 'dr-dialog-modal-wrapper', template: "<div header class=\"header-dialog\">\n    <h1 class=\"title-dialog\" data-test=\"modalTitle\">\n        <i\n            *ngIf=\"dialogData.headerIconClass\"\n            (click)=\"closeDialog()\"\n            class=\"title-dialog__icon\"\n            [class]=\"dialogData.headerIconClass\"\n            data-test=\"dialogTitleIcon\"></i>\n        <span class=\"title-dialog__text\">{{ dialogData.title }}</span>\n    </h1>\n    <i *ngIf=\"!dialogData.hideCloseBtn\" (click)=\"closeDialog()\" class=\"dr-icon-exit icon-close\" data-test=\"xBtn\"></i>\n</div>\n<div *ngIf=\"dialogData.content\" class=\"content-dialog\" [innerHTML]=\"dialogData.content\">\n    <span #content class=\"content-anchor\"></span>\n</div>\n<form *ngIf=\"dialogData.fields\" [formGroup]=\"form\" class=\"dr-smart-from\">\n    <div [class]=\"dialogData.formWrapperClass || 'dr-smart-form_wrapper'\">\n        <div\n            *ngFor=\"let field of dialogData.fields\"\n            class=\"dr-smart-form_group\"\n            [class]=\"field.formGroupClass\"\n            [ngStyle]=\"{ display: field.isLabelFullWidth ? 'block' : 'flex' }\">\n            <label\n                *ngIf=\"field.label && field.type !== dialogFieldType.CHECKBOX\"\n                [ngClass]=\"field.isLabelFullWidth ? 'col-md-12 mb-2' : 'col-md-2'\"\n                class=\"label p-0 d-flex align-items-center\"\n                >{{ field.label }}</label\n            >\n            <div\n                class=\"input-group p-0\"\n                [ngClass]=\"{\n                    'col-md-10': field.label && !field.isLabelFullWidth,\n                    'col-md-12': !field.label || field.isLabelFullWidth,\n                }\">\n                <dr-select\n                    *ngIf=\"field.type === dialogFieldType.SELECT\"\n                    [searchable]=\"dialogData.searchable\"\n                    [clearable]=\"dialogData.clearable\"\n                    [formControlName]=\"field.name\"\n                    [bindLabel]=\"field.bindLabel || null\"\n                    [bindValue]=\"field.bindValue || null\"\n                    [selectedItem]=\"field.default\"\n                    [items]=\"field.items || (field.items$ | async)\"\n                    [loading]=\"fieldsItemsLoading[field.name] | async\"\n                    [required]=\"true\"\n                    [placeholder]=\"field.placeholder\">\n                    <ng-template *ngIf=\"dialogData?.footerTemplateData\" #optionFooterTemplate let-item=\"item\" let-close=\"close\">\n                        <button (click)=\"footerAction(); close()\" class=\"dr-select-footer__btn\">\n                            <i *ngIf=\"dialogData.footerTemplateData.icon\" class=\"{{ dialogData.footerTemplateData.icon }}\"></i>\n                            {{ dialogData.footerTemplateData.label }}\n                        </button>\n                    </ng-template>\n                </dr-select>\n                <dr-input\n                    *ngIf=\"field.type === dialogFieldType.INPUT\"\n                    data-test=\"modalInput\"\n                    class=\"form-control\"\n                    [formControlName]=\"field.name\"\n                    [placeholder]=\"field.placeholder\"></dr-input>\n                <dr-date-picker\n                    *ngIf=\"field.type === dialogFieldType.DATE_PICKER\"\n                    [formControlName]=\"field.name\"\n                    [format]=\"field.datePickerFormat\"\n                    [placeholder]=\"field.placeholder\"></dr-date-picker>\n                <dr-checkbox *ngIf=\"field.type === dialogFieldType.CHECKBOX\" [formControlName]=\"field.name\">\n                    {{ field.label }}\n                </dr-checkbox>\n                <label\n                    class=\"form-field-error-alert\"\n                    *ngIf=\"form.invalid && form.controls[field.name]?.dirty && form.controls[field.name]?.errors\">\n                    {{ form.controls[field.name].errors.errorString }}\n                </label>\n                <label class=\"form-error-alert\" *ngIf=\"dialogData.errorMessage && !form.pristine && form.invalid\">\n                    {{ dialogData.errorMessage }}\n                </label>\n                <label class=\"form-error-alert\" *ngIf=\"form.valid && showServerErrorMessage && dialogData.serverErrorMessage\">\n                    {{ dialogData.serverErrorMessage }}\n                </label>\n            </div>\n        </div>\n    </div>\n</form>\n\n<div footer class=\"footer-dialog\">\n    <div class=\"buttons-wrapper\" *ngIf=\"dialogData.cancelButton || dialogData.acceptButton\">\n        <dr-button\n            (click)=\"onDecline()\"\n            *ngIf=\"dialogData.customButton\"\n            [theme]=\"dialogData.customButton?.theme || 'secondary'\"\n            class=\"buttons-wrapper--custom-btn\"\n            data-test=\"declineBtn\"\n            >{{ dialogData.customButton.label }}</dr-button\n        >\n        <dr-button *ngIf=\"dialogData.cancelButton\" data-test=\"modalCloseBtn\" (click)=\"closeDialog()\" [theme]=\"'secondary'\">{{\n            dialogData.cancelButton.label\n        }}</dr-button>\n        <dr-button\n            *ngIf=\"dialogData.acceptButton\"\n            data-test=\"modalAddBtn\"\n            (click)=\"onAccept()\"\n            [theme]=\"'primary'\"\n            [isLoading]=\"isLoading\"\n            [disabled]=\"form.invalid\"\n            >{{ dialogData.acceptButton.label }}</dr-button\n        >\n    </div>\n</div>\n", styles: [":host{display:flex;justify-content:space-between;flex-direction:column}:host.small-modal,:host.small-modal-max-height{min-height:188px;max-height:467px;min-width:400px;max-width:400px}:host.medium-modal,:host.medium-modal-max-height{min-height:188px;max-height:467px;min-width:632px;max-width:632px}:host.medium-small-modal{min-height:188px;max-height:345px;min-width:460px;max-width:460px}:host.medium-modal-max-height,:host.small-modal-max-height{max-height:80vh}.header-dialog{position:relative;display:flex;flex-direction:row;justify-content:space-between;align-items:center;padding:16px 56px 16px 32px;border-bottom:1px solid #dfe0e3}.header-dialog>.icon-close{position:absolute;right:32px;top:16px;cursor:pointer}.title-dialog{display:flex;color:#333;position:static;font-weight:600;font-size:16px;line-height:24px;margin-top:0;margin-bottom:0}.title-dialog__icon{font-size:32px;margin-right:8px;line-height:24px;color:#6d6e6f}.content-dialog{font-weight:400;font-size:14px;padding:16px 32px 5px;white-space:pre-line;overflow:auto}.icon-close{color:#6d6e6f;cursor:pointer}.dr-smart-from{font-size:14px;font-weight:400;line-height:22px;padding:8px 32px 24px}.dr-smart-from dr-checkbox{font-weight:400}.content-dialog{padding:16px 32px 0;font-weight:400;font-size:14px;line-height:22px}.content-anchor{display:none}.footer-dialog{border-top:1px solid #dfe0e3}.buttons-wrapper{display:flex;justify-content:flex-end;padding:10px 32px 11px}.buttons-wrapper dr-button:nth-of-type(n+2){margin-left:12px}.buttons-wrapper--custom-btn{margin-right:auto}.form-field-error-alert{font-size:12px;color:#bf1d30;line-height:20px}.form-error-alert{position:absolute;margin-top:5px;font-size:12px;color:#bf1d30}.dr-select-footer__btn{background-color:transparent;display:flex;align-items:center;justify-content:flex-start;cursor:pointer;min-width:15rem;font-style:normal;font-weight:400;font-size:14px;line-height:24px;clear:both;width:100%;white-space:nowrap;padding:0 12px;height:36px;flex-shrink:0}\n"] }]
     }], function () { return [{ type: i1$6.MatLegacyDialogRef }, { type: undefined, decorators: [{
                 type: Inject,
                 args: [MAT_LEGACY_DIALOG_DATA]
@@ -11077,7 +11547,7 @@ function TreeviewItemComponent_div_0_div_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance(1);
     i0.ɵɵproperty("ngForOf", ctx_r2.item.children);
 } }
-const _c0$4 = function (a0, a1, a2) { return { item: a0, onCollapseExpand: a1, onCheckedChange: a2 }; };
+const _c0$3 = function (a0, a1, a2) { return { item: a0, onCollapseExpand: a1, onCheckedChange: a2 }; };
 function TreeviewItemComponent_div_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 1);
     i0.ɵɵtemplate(1, TreeviewItemComponent_div_0_ng_template_1_Template, 0, 0, "ng-template", 2);
@@ -11086,7 +11556,7 @@ function TreeviewItemComponent_div_0_Template(rf, ctx) { if (rf & 1) {
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵadvance(1);
-    i0.ɵɵproperty("ngTemplateOutlet", ctx_r0.template)("ngTemplateOutletContext", i0.ɵɵpureFunction3(3, _c0$4, ctx_r0.item, ctx_r0.onCollapseExpand, ctx_r0.onCheckedChange));
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r0.template)("ngTemplateOutletContext", i0.ɵɵpureFunction3(3, _c0$3, ctx_r0.item, ctx_r0.onCollapseExpand, ctx_r0.onCheckedChange));
     i0.ɵɵadvance(1);
     i0.ɵɵproperty("ngIf", !ctx_r0.item.collapsed);
 } }
@@ -11671,124 +12141,35 @@ var TooltipInfoIconTheme;
     TooltipInfoIconTheme["SUCCESS"] = "success";
 })(TooltipInfoIconTheme || (TooltipInfoIconTheme = {}));
 
-class ClickOutsideDirective {
-    constructor(_document /*: HTMLDocument*/, _el) {
-        this._document = _document;
-        this._el = _el;
-        this.attachOutsideOnClick = false;
-        this.exclude = '';
-        this.clickOutside = new EventEmitter();
-        this._nodesExcluded = [];
-        this._initOnClickBody = this._initOnClickBody.bind(this);
-        this._onClickBody = this._onClickBody.bind(this);
+const DR_SHINE_ANIMATION_CLASS = 'dr-shine-effect-animation';
+class DrShineAnimationDirective {
+    constructor(el, renderer) {
+        this.el = el;
+        this.renderer = renderer;
+        this.isShineEnabled = true;
+        this.drShineAnimationInterval = 5000; // Default interval in milliseconds
     }
-    ngOnInit() {
-        this._init();
+    ngOnChanges(changes) {
+        if (changes.isShineEnabled) {
+            if (this.isShineEnabled) {
+                this.startShine();
+            }
+            else {
+                this.stopShine();
+            }
+        }
     }
     ngOnDestroy() {
-        if (this.attachOutsideOnClick) {
-            this._el.nativeElement.removeEventListener('click', this._initOnClickBody);
-        }
-        this._document.body.removeEventListener('click', this._onClickBody);
+        this.stopShine();
     }
-    ngOnChanges(changes) {
-        if (changes['attachOutsideOnClick'] || changes['exclude']) {
-            this._init();
-        }
-    }
-    _init() {
-        if (this.exclude) {
-            this.exclude.split(',').forEach((selector) => {
-                if (selector) {
-                    try {
-                        const node = this._document.querySelector(selector.trim());
-                        if (node) {
-                            this._nodesExcluded.push(node);
-                        }
-                    }
-                    catch (err) {
-                        if (window.console) {
-                            window.console.error('[ng2-click-outside] Check your exclude selector syntax.', err);
-                        }
-                    }
-                }
-            });
-        }
-        if (this.attachOutsideOnClick) {
-            this._el.nativeElement.addEventListener('click', this._initOnClickBody);
-        }
-        else {
-            this._initOnClickBody();
-        }
-    }
-    /** @internal */
-    _initOnClickBody() {
-        this._document.body.addEventListener('click', this._onClickBody);
-    }
-    /** @internal */
-    _onClickBody(e) {
-        if (!this._el.nativeElement.contains(e.target) && !this._shouldExclude(e.target)) {
-            this.clickOutside.emit(e);
-            if (this.attachOutsideOnClick) {
-                this._document.body.removeEventListener('click', this._onClickBody);
-            }
-        }
-    }
-    /** @internal */
-    _shouldExclude(target) {
-        for (let i = 0; i < this._nodesExcluded.length; i++) {
-            if (this._nodesExcluded[i].contains(target)) {
-                return true;
-            }
-        }
-        return false;
-    }
-    /** @nocollapse */ static { this.ɵfac = function ClickOutsideDirective_Factory(t) { return new (t || ClickOutsideDirective)(i0.ɵɵdirectiveInject(DOCUMENT), i0.ɵɵdirectiveInject(i0.ElementRef)); }; }
-    /** @nocollapse */ static { this.ɵdir = /** @pureOrBreakMyCode */ i0.ɵɵdefineDirective({ type: ClickOutsideDirective, selectors: [["", "clickOutside", ""]], inputs: { attachOutsideOnClick: "attachOutsideOnClick", exclude: "exclude" }, outputs: { clickOutside: "clickOutside" }, features: [i0.ɵɵNgOnChangesFeature] }); }
-}
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ClickOutsideDirective, [{
-        type: Directive,
-        args: [{ selector: '[clickOutside]' }]
-    }], function () { return [{ type: undefined, decorators: [{
-                type: Inject,
-                args: [DOCUMENT]
-            }] }, { type: i0.ElementRef }]; }, { attachOutsideOnClick: [{
-            type: Input
-        }], exclude: [{
-            type: Input
-        }], clickOutside: [{
-            type: Output
-        }] }); })();
-
-const DR_SHINE_ANIMATION_CLASS = 'dr-shine-effect-animation';
-class DrShineAnimationDirective {
-    constructor(el, renderer) {
-        this.el = el;
-        this.renderer = renderer;
-        this.isShineEnabled = true;
-        this.drShineAnimationInterval = 5000; // Default interval in milliseconds
-    }
-    ngOnChanges(changes) {
-        if (changes.isShineEnabled) {
-            if (this.isShineEnabled) {
-                this.startShine();
-            }
-            else {
-                this.stopShine();
-            }
-        }
-    }
-    ngOnDestroy() {
-        this.stopShine();
-    }
-    startShine() {
-        this.stopShine(); // Clear any existing intervals
-        // Run the shine animation immediately
-        this.addShineEffect();
-        // Set interval to repeat the shine effect
-        this.intervalId = setInterval(() => {
-            this.addShineEffect();
-        }, this.drShineAnimationInterval);
+    startShine() {
+        this.stopShine(); // Clear any existing intervals
+        // Run the shine animation immediately
+        this.addShineEffect();
+        // Set interval to repeat the shine effect
+        this.intervalId = setInterval(() => {
+            this.addShineEffect();
+        }, this.drShineAnimationInterval);
     }
     stopShine() {
         if (this.intervalId) {
@@ -12366,7 +12747,7 @@ class DrImageCropperCanvasService {
         type: Injectable
     }], null, null); })();
 
-const _c0$3 = ["imageCanvas"];
+const _c0$2 = ["imageCanvas"];
 class DrImageCropperComponent {
     constructor(canvasService) {
         this.canvasService = canvasService;
@@ -12424,7 +12805,7 @@ class DrImageCropperComponent {
     }
     /** @nocollapse */ static { this.ɵfac = function DrImageCropperComponent_Factory(t) { return new (t || DrImageCropperComponent)(i0.ɵɵdirectiveInject(DrImageCropperCanvasService)); }; }
     /** @nocollapse */ static { this.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: DrImageCropperComponent, selectors: [["dr-image-cropper"]], viewQuery: function DrImageCropperComponent_Query(rf, ctx) { if (rf & 1) {
-            i0.ɵɵviewQuery(_c0$3, 7);
+            i0.ɵɵviewQuery(_c0$2, 7);
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.canvasElement = _t.first);
@@ -12656,387 +13037,6 @@ class ClickOutsideModule {
     }], null, null); })();
 (function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(ClickOutsideModule, { declarations: [ClickOutsideDirective], imports: [CommonModule], exports: [ClickOutsideDirective] }); })();
 
-const _c0$2 = ["textAreaElement"];
-const _c1 = ["fileInput"];
-function DrChatFormWithHistoryComponent_dr_chat_dropped_files_2_Template(rf, ctx) { if (rf & 1) {
-    const _r8 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "dr-chat-dropped-files", 15);
-    i0.ɵɵlistener("removeFileEvent", function DrChatFormWithHistoryComponent_dr_chat_dropped_files_2_Template_dr_chat_dropped_files_removeFileEvent_0_listener($event) { i0.ɵɵrestoreView(_r8); const ctx_r7 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r7.removeFile($event)); });
-    i0.ɵɵpipe(1, "async");
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("files", i0.ɵɵpipeBind1(1, 3, ctx_r0.droppedFiles$))("isRemovable", true)("maxLengthText", 15);
-} }
-function DrChatFormWithHistoryComponent_i_14_Template(rf, ctx) { if (rf & 1) {
-    const _r10 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "i", 16);
-    i0.ɵɵlistener("click", function DrChatFormWithHistoryComponent_i_14_Template_i_click_0_listener($event) { i0.ɵɵrestoreView(_r10); const ctx_r9 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r9.sendMessage($event)); });
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r3 = i0.ɵɵnextContext();
-    const _r1 = i0.ɵɵreference(6);
-    i0.ɵɵstyleMap(ctx_r3.getSendButtonPosition(_r1));
-} }
-function DrChatFormWithHistoryComponent_i_15_Template(rf, ctx) { if (rf & 1) {
-    const _r12 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "i", 17);
-    i0.ɵɵlistener("click", function DrChatFormWithHistoryComponent_i_15_Template_i_click_0_listener() { i0.ɵɵrestoreView(_r12); const ctx_r11 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r11.abortMessage()); });
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r4 = i0.ɵɵnextContext();
-    const _r1 = i0.ɵɵreference(6);
-    i0.ɵɵstyleMap(ctx_r4.getSendButtonPosition(_r1));
-} }
-function DrChatFormWithHistoryComponent_dr_dot_flashing_16_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "dr-dot-flashing", 18);
-} }
-function DrChatFormWithHistoryComponent_ng_container_17_Template(rf, ctx) { if (rf & 1) {
-    const _r14 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementContainerStart(0);
-    i0.ɵɵelementStart(1, "div", 19);
-    i0.ɵɵlistener("clickOutside", function DrChatFormWithHistoryComponent_ng_container_17_Template_div_clickOutside_1_listener() { i0.ɵɵrestoreView(_r14); const ctx_r13 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r13.closeHistory()); });
-    i0.ɵɵprojection(2);
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementContainerEnd();
-} if (rf & 2) {
-    const ctx_r6 = i0.ɵɵnextContext();
-    i0.ɵɵadvance(1);
-    i0.ɵɵproperty("@dropdownAnimation", ctx_r6.isShowedHistory ? "visible" : "hidden")("exclude", ".dr-icon-history");
-} }
-const _c2 = function (a0) { return { "message-row_loading": a0 }; };
-const _c3 = function (a0) { return { height: a0 }; };
-const _c4 = function (a0, a1) { return { value: a0, params: a1 }; };
-const _c5 = function (a0, a1, a2) { return { "message-row__input--focused": a0, "message-row__input--filled": a1, "showed-dropdown": a2 }; };
-const _c6 = ["*"];
-class DrChatFormWithHistoryComponent {
-    constructor(cdr, domSanitizer) {
-        this.cdr = cdr;
-        this.domSanitizer = domSanitizer;
-        this._textareaInitialHeight = true;
-        this.inputFocus = false;
-        this.inputHover = false;
-        this.droppedFiles$ = new BehaviorSubject([]);
-        this.isShowedHistory = false;
-        this.isChatMode = false;
-        this.isLoading = false;
-        /**
-         * Predefined message text
-         *
-         * @type {string}
-         */
-        this.message = '';
-        /**
-         * Message placeholder text
-         *
-         * @type {string}
-         */
-        this.messagePlaceholder = 'Type a message';
-        /**
-         * Show send button
-         *
-         * @type {boolean}
-         */
-        this.dropFiles = false;
-        /**
-         * File drop placeholder text
-         *
-         * @type {string}
-         */
-        this.dropFilePlaceholder = 'Drop file to send';
-        /**
-         * Parameter to check is send message function available
-         *
-         * @type {boolean}
-         */
-        this.waitForReply = false;
-        /**
-         * Parameter to check is send message function available
-         *
-         * @type {boolean}
-         */
-        this.showDotFlashing = false;
-        /**
-         *
-         * @type {EventEmitter<{ message: string, files: IFile[] }>}
-         */
-        this.send = new EventEmitter();
-        this.uploadFiles = new EventEmitter();
-        this.abort = new EventEmitter();
-        /**
-         * Emits when message input value has been changed
-         *
-         * @type {EventEmitter<string>}
-         */
-        this.inputChange = new EventEmitter();
-        this.fileOver = false;
-    }
-    onDrop(event) {
-        if (this.dropFiles) {
-            event.preventDefault();
-            event.stopPropagation();
-            this.fileOver = false;
-            const files = event.dataTransfer?.files;
-            if (files) {
-                this.saveFiles(files);
-            }
-        }
-    }
-    removeFile(file) {
-        const droppedFiles = this.droppedFiles$.value;
-        const index = droppedFiles.indexOf(file);
-        if (index >= 0) {
-            droppedFiles.splice(index, 1);
-            this.droppedFiles$.next(droppedFiles);
-        }
-    }
-    onDragOver(event) {
-        event.preventDefault();
-        event.stopPropagation();
-        if (this.dropFiles) {
-            this.fileOver = true;
-        }
-    }
-    onDragLeave(event) {
-        event.preventDefault();
-        event.stopPropagation();
-        if (this.dropFiles) {
-            this.fileOver = false;
-        }
-    }
-    sendMessage($event) {
-        if (!$event || !$event.shiftKey) {
-            $event?.preventDefault();
-            $event?.stopPropagation();
-            if (this.waitForReply) {
-                return;
-            }
-            else if (this.droppedFiles$.value.length || String(this.message).trim().length) {
-                this._textareaInitialHeight = true;
-                this.send.emit({ message: this.message, files: this.droppedFiles$.value });
-                this.message = '';
-                this.droppedFiles$.next([]);
-                this.cdr.markForCheck();
-            }
-        }
-    }
-    abortMessage() {
-        this.abort.emit();
-    }
-    onModelChange(value) {
-        this._textareaInitialHeight = false;
-        this.inputChange.emit(value);
-    }
-    getTextAreaHeight(textAreaElement) {
-        if (this._textareaInitialHeight) {
-            textAreaElement.style.height = '48px';
-        }
-        else {
-            textAreaElement.style.height = 'auto';
-            textAreaElement.style.height = textAreaElement.scrollHeight + 'px';
-        }
-        return `${textAreaElement.style.height}`;
-    }
-    getSendButtonPosition(textAreaElement) {
-        return `top: calc(${this.getTextAreaHeight(textAreaElement)} - var(--send-button-offset));`;
-    }
-    showHistory() {
-        this.isShowedHistory = !this.isShowedHistory;
-    }
-    closeHistory() {
-        this.isShowedHistory = false;
-        this.cdr.markForCheck();
-    }
-    onFileSelected(event) {
-        const input = event.target;
-        this.fileOver = false;
-        if (input.files.length) {
-            this.saveFiles(Array.from(input.files));
-        }
-        this.fileInput.nativeElement.value = '';
-    }
-    async saveFiles(files) {
-        const uploadedFiles = [];
-        for (const file of files) {
-            let res = file;
-            res.data = (await this.base64Convert(res));
-            this.droppedFiles$.next([...this.droppedFiles$.value, res]);
-            uploadedFiles.push(res);
-            this.cdr.markForCheck();
-            this.cdr.detectChanges();
-        }
-        this.uploadFiles.emit(uploadedFiles.map((item) => ({ data: item.data, name: item.name })));
-    }
-    base64Convert(file) {
-        return new Promise((resolve, reject) => {
-            const reader = new FileReader();
-            reader.onload = () => resolve(reader.result);
-            reader.onerror = (error) => reject(error);
-            reader.readAsDataURL(file);
-        });
-    }
-    /** @nocollapse */ static { this.ɵfac = function DrChatFormWithHistoryComponent_Factory(t) { return new (t || DrChatFormWithHistoryComponent)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(i1$5.DomSanitizer)); }; }
-    /** @nocollapse */ static { this.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: DrChatFormWithHistoryComponent, selectors: [["dr-chat-form-with-history"]], viewQuery: function DrChatFormWithHistoryComponent_Query(rf, ctx) { if (rf & 1) {
-            i0.ɵɵviewQuery(_c0$2, 5);
-            i0.ɵɵviewQuery(_c1, 5);
-        } if (rf & 2) {
-            let _t;
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.textAreaElementRef = _t.first);
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.fileInput = _t.first);
-        } }, hostVars: 2, hostBindings: function DrChatFormWithHistoryComponent_HostBindings(rf, ctx) { if (rf & 1) {
-            i0.ɵɵlistener("drop", function DrChatFormWithHistoryComponent_drop_HostBindingHandler($event) { return ctx.onDrop($event); })("dragover", function DrChatFormWithHistoryComponent_dragover_HostBindingHandler($event) { return ctx.onDragOver($event); })("dragleave", function DrChatFormWithHistoryComponent_dragleave_HostBindingHandler($event) { return ctx.onDragLeave($event); });
-        } if (rf & 2) {
-            i0.ɵɵclassProp("file-over", ctx.fileOver);
-        } }, inputs: { isChatMode: "isChatMode", isLoading: "isLoading", message: "message", messagePlaceholder: "messagePlaceholder", dropFiles: "dropFiles", dropFilePlaceholder: "dropFilePlaceholder", waitForReply: "waitForReply", showDotFlashing: "showDotFlashing" }, outputs: { send: "send", uploadFiles: "uploadFiles", abort: "abort", inputChange: "inputChange" }, ngContentSelectors: _c6, decls: 18, vars: 27, consts: [[1, "message-row", 3, "ngClass"], [1, "message-row__input", 3, "ngClass"], [3, "files", "isRemovable", "maxLengthText", "removeFileEvent", 4, "ngIf"], [1, "message-row__input-textarea-wrap"], ["type", "text", 3, "ngModel", "rows", "placeholder", "focus", "blur", "mouseenter", "mouseleave", "ngModelChange", "keydown.enter"], ["textAreaElement", ""], [1, "message-input-tmp"], ["type", "file", "hidden", "", "multiple", "", 3, "change"], ["fileInput", ""], [1, "dr-icon-history", 3, "click"], [1, "dr-icon-attachment", 3, "click"], ["class", "dr-icon-send-arrow-up send-button", 3, "style", "click", 4, "ngIf"], ["class", "dr-icon-stop abort-button", 3, "style", "click", 4, "ngIf"], ["class", "wait-reply-dot-flashing", 4, "ngIf"], [4, "ngIf"], [3, "files", "isRemovable", "maxLengthText", "removeFileEvent"], [1, "dr-icon-send-arrow-up", "send-button", 3, "click"], [1, "dr-icon-stop", "abort-button", 3, "click"], [1, "wait-reply-dot-flashing"], [1, "history-dropdown", 3, "exclude", "clickOutside"]], template: function DrChatFormWithHistoryComponent_Template(rf, ctx) { if (rf & 1) {
-            const _r15 = i0.ɵɵgetCurrentView();
-            i0.ɵɵprojectionDef();
-            i0.ɵɵelementStart(0, "div", 0)(1, "div", 1);
-            i0.ɵɵtemplate(2, DrChatFormWithHistoryComponent_dr_chat_dropped_files_2_Template, 2, 5, "dr-chat-dropped-files", 2);
-            i0.ɵɵpipe(3, "async");
-            i0.ɵɵelementStart(4, "div", 3)(5, "textarea", 4, 5);
-            i0.ɵɵlistener("focus", function DrChatFormWithHistoryComponent_Template_textarea_focus_5_listener() { return ctx.inputFocus = true; })("blur", function DrChatFormWithHistoryComponent_Template_textarea_blur_5_listener() { return ctx.inputFocus = false; })("mouseenter", function DrChatFormWithHistoryComponent_Template_textarea_mouseenter_5_listener() { return ctx.inputHover = true; })("mouseleave", function DrChatFormWithHistoryComponent_Template_textarea_mouseleave_5_listener() { return ctx.inputHover = false; })("ngModelChange", function DrChatFormWithHistoryComponent_Template_textarea_ngModelChange_5_listener($event) { return ctx.message = $event; })("ngModelChange", function DrChatFormWithHistoryComponent_Template_textarea_ngModelChange_5_listener($event) { return ctx.onModelChange($event); })("keydown.enter", function DrChatFormWithHistoryComponent_Template_textarea_keydown_enter_5_listener($event) { return ctx.sendMessage($event); });
-            i0.ɵɵtext(7, "            ");
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(8, "div", 6);
-            i0.ɵɵtext(9);
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(10, "input", 7, 8);
-            i0.ɵɵlistener("change", function DrChatFormWithHistoryComponent_Template_input_change_10_listener($event) { return ctx.onFileSelected($event); });
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(12, "i", 9);
-            i0.ɵɵlistener("click", function DrChatFormWithHistoryComponent_Template_i_click_12_listener() { return ctx.showHistory(); });
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(13, "i", 10);
-            i0.ɵɵlistener("click", function DrChatFormWithHistoryComponent_Template_i_click_13_listener() { i0.ɵɵrestoreView(_r15); const _r2 = i0.ɵɵreference(11); return i0.ɵɵresetView(_r2.click()); });
-            i0.ɵɵelementEnd();
-            i0.ɵɵtemplate(14, DrChatFormWithHistoryComponent_i_14_Template, 1, 2, "i", 11);
-            i0.ɵɵtemplate(15, DrChatFormWithHistoryComponent_i_15_Template, 1, 2, "i", 12);
-            i0.ɵɵtemplate(16, DrChatFormWithHistoryComponent_dr_dot_flashing_16_Template, 1, 0, "dr-dot-flashing", 13);
-            i0.ɵɵelementEnd();
-            i0.ɵɵtemplate(17, DrChatFormWithHistoryComponent_ng_container_17_Template, 3, 2, "ng-container", 14);
-            i0.ɵɵelementEnd()();
-        } if (rf & 2) {
-            const _r1 = i0.ɵɵreference(6);
-            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(16, _c2, ctx.isLoading));
-            i0.ɵɵadvance(1);
-            i0.ɵɵproperty("@containerHeightAnimation", i0.ɵɵpureFunction2(20, _c4, ctx.showHistory ? "expanded" : "collapsed", i0.ɵɵpureFunction1(18, _c3, ctx.getTextAreaHeight(_r1))))("ngClass", i0.ɵɵpureFunction3(23, _c5, ctx.inputFocus, !!(ctx.message == null ? null : ctx.message.length), ctx.isShowedHistory));
-            i0.ɵɵadvance(1);
-            i0.ɵɵproperty("ngIf", i0.ɵɵpipeBind1(3, 14, ctx.droppedFiles$).length);
-            i0.ɵɵadvance(3);
-            i0.ɵɵstyleMap(ctx.getTextAreaHeight(_r1));
-            i0.ɵɵpropertyInterpolate("placeholder", ctx.fileOver ? ctx.dropFilePlaceholder : ctx.messagePlaceholder);
-            i0.ɵɵproperty("ngModel", ctx.message)("rows", 1);
-            i0.ɵɵadvance(4);
-            i0.ɵɵtextInterpolate(_r1.value);
-            i0.ɵɵadvance(5);
-            i0.ɵɵproperty("ngIf", !ctx.waitForReply);
-            i0.ɵɵadvance(1);
-            i0.ɵɵproperty("ngIf", ctx.waitForReply && !ctx.showDotFlashing);
-            i0.ɵɵadvance(1);
-            i0.ɵɵproperty("ngIf", ctx.waitForReply && ctx.showDotFlashing);
-            i0.ɵɵadvance(1);
-            i0.ɵɵproperty("ngIf", !ctx.isChatMode);
-        } }, dependencies: [i1$2.DefaultValueAccessor, i1$2.NgControlStatus, i1$2.NgModel, i1.NgClass, i1.NgIf, ClickOutsideDirective, DrDotFlashingComponent, DrChatDroppedFilesComponent, i1.AsyncPipe], styles: ["[_nghost-%COMP%] {--send-button-offset: 42px;display:flex;flex-direction:column;align-items:center;padding:0 16px}[_nghost-%COMP%]  .message-row{display:flex;justify-content:center;width:100%;padding:0 0 21px;max-width:956px}[_nghost-%COMP%]  .message-row__input{flex-direction:column;background-color:#fff;position:relative;display:flex;align-items:center;flex-grow:1;height:auto;overflow:visible;min-width:265px;border-radius:24px;border:1.5px solid transparent;box-shadow:0 2px 16px -10px #603cff29;transition:.35s ease}[_nghost-%COMP%]  .message-row__input .abort-button, [_nghost-%COMP%]  .message-row__input .send-button{width:32px;height:32px;display:flex;align-items:center;justify-content:center;position:absolute;top:2.5px;right:8px;cursor:pointer;font-size:24px;border-radius:100px;color:#fff;transition:.15s ease-in-out;background:linear-gradient(266deg,#6969ff 25.2%,#4eb7df 90.24%) border-box}[_nghost-%COMP%]  .message-row__input .dr-icon-history, [_nghost-%COMP%]  .message-row__input .dr-icon-attachment{display:flex;align-items:center;position:absolute;cursor:pointer;width:32px;height:48px;left:16px;top:-1px}[_nghost-%COMP%]  .message-row__input .dr-icon-attachment{left:52px}[_nghost-%COMP%]  .message-row__input .send-button{opacity:.5;pointer-events:none}[_nghost-%COMP%]  .message-row__input--focused{box-shadow:8px 8px 16px #6969ff40,-4px -4px 8px #40b6e340,8px 8px 60px #00000040;height:auto!important;background:#fff}[_nghost-%COMP%]  .message-row__input--filled{box-shadow:8px 8px 16px #6969ff40,-4px -4px 8px #40b6e340,8px 8px 60px #00000040;background:#fff}[_nghost-%COMP%]  .message-row__input--filled .send-button{opacity:1;pointer-events:all}[_nghost-%COMP%]  .message-row__input .message-input-tmp{display:none}[_nghost-%COMP%]  .message-row__input.showed-dropdown .send-button{opacity:.5}[_nghost-%COMP%]  .message-row__input .wait-reply-dot-flashing{display:flex;position:absolute;align-items:center;width:32px;height:48px;right:25px}[_nghost-%COMP%]  .message-row__input:before{content:\"\";position:absolute;inset:-3px;background:linear-gradient(266deg,#6969ff 25.2%,#4eb7df 90.24%);border-radius:25px;z-index:-1}[_nghost-%COMP%]  .message-row__input textarea, [_nghost-%COMP%]  .message-row__input .message-input-tmp{font-size:14px;color:#333;width:100%;outline:none;min-height:48px;line-height:19px;flex-grow:1;resize:none;padding:13px 55px 13px 88px;margin:auto;border:none;border-radius:22.5px}[_nghost-%COMP%]  .message-row__input textarea:focus, [_nghost-%COMP%]  .message-row__input .message-input-tmp:focus{border:none}[_nghost-%COMP%]  .message-row__input textarea::placeholder, [_nghost-%COMP%]  .message-row__input .message-input-tmp::placeholder{color:#9ea1aa}[_nghost-%COMP%]  .message-row__input-textarea-wrap{display:flex;width:100%;position:relative}[_nghost-%COMP%]  .history-dropdown{width:100%;max-height:220px;overflow-y:auto;padding:12px 16px 0}[_nghost-%COMP%]  .showed-dropdown textarea{visibility:hidden;position:absolute}[_nghost-%COMP%]  .showed-dropdown .message-input-tmp{display:block;margin-left:inherit;white-space:nowrap;font-family:monospace;overflow:hidden;text-overflow:ellipsis}[_nghost-%COMP%]  .showed-dropdown .send-button{top:2.5px!important}[_nghost-%COMP%]  dr-chat-dropped-files{margin-right:auto}[_nghost-%COMP%]  .message-row_loading .send-button, [_nghost-%COMP%]  .message-row_loading .dropped-files__item{opacity:.5;pointer-events:none}"], data: { animation: [
-                trigger('containerHeightAnimation', [
-                    state('collapsed', style({ height: '{{height}}' }), { params: { height: '48px' } }),
-                    state('expanded', style({
-                        height: '*',
-                    })),
-                    transition('collapsed => expanded', [animate('300ms ease-in-out')]),
-                    transition('expanded => collapsed', [query('@dropdownAnimation', animateChild()), animate('300ms ease-in-out')]),
-                ]),
-                trigger('dropdownAnimation', [
-                    state('hidden', style({
-                        opacity: 0,
-                        transform: 'translateY(-30px)',
-                        display: 'none',
-                    })),
-                    state('visible', style({
-                        opacity: 1,
-                        transform: 'translateY(0)',
-                        display: 'block',
-                    })),
-                    transition('hidden => visible', [style({ display: 'block' }), animate('300ms ease-in-out')]),
-                    transition('visible => hidden', [
-                        animate('300ms ease-in-out', style({ opacity: 0, transform: 'translateY(-30px)' })),
-                        style({ display: 'none' }),
-                    ]),
-                ]),
-            ] }, changeDetection: 0 }); }
-}
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DrChatFormWithHistoryComponent, [{
-        type: Component,
-        args: [{ selector: 'dr-chat-form-with-history', changeDetection: ChangeDetectionStrategy.OnPush, animations: [
-                    trigger('containerHeightAnimation', [
-                        state('collapsed', style({ height: '{{height}}' }), { params: { height: '48px' } }),
-                        state('expanded', style({
-                            height: '*',
-                        })),
-                        transition('collapsed => expanded', [animate('300ms ease-in-out')]),
-                        transition('expanded => collapsed', [query('@dropdownAnimation', animateChild()), animate('300ms ease-in-out')]),
-                    ]),
-                    trigger('dropdownAnimation', [
-                        state('hidden', style({
-                            opacity: 0,
-                            transform: 'translateY(-30px)',
-                            display: 'none',
-                        })),
-                        state('visible', style({
-                            opacity: 1,
-                            transform: 'translateY(0)',
-                            display: 'block',
-                        })),
-                        transition('hidden => visible', [style({ display: 'block' }), animate('300ms ease-in-out')]),
-                        transition('visible => hidden', [
-                            animate('300ms ease-in-out', style({ opacity: 0, transform: 'translateY(-30px)' })),
-                            style({ display: 'none' }),
-                        ]),
-                    ]),
-                ], template: "<div class=\"message-row\" [ngClass]=\"{ 'message-row_loading': isLoading }\">\n    <div\n        [@containerHeightAnimation]=\"{\n            value: showHistory ? 'expanded' : 'collapsed',\n            params: { height: getTextAreaHeight(textAreaElement) },\n        }\"\n        class=\"message-row__input\"\n        [ngClass]=\"{\n            'message-row__input--focused': inputFocus,\n            'message-row__input--filled': !!message?.length,\n            'showed-dropdown': isShowedHistory,\n        }\">\n        <dr-chat-dropped-files\n            *ngIf=\"(droppedFiles$ | async).length\"\n            [files]=\"droppedFiles$ | async\"\n            [isRemovable]=\"true\"\n            [maxLengthText]=\"15\"\n            (removeFileEvent)=\"removeFile($event)\"></dr-chat-dropped-files>\n\n        <div class=\"message-row__input-textarea-wrap\">\n            <textarea\n                #textAreaElement\n                (focus)=\"inputFocus = true\"\n                (blur)=\"inputFocus = false\"\n                (mouseenter)=\"inputHover = true\"\n                (mouseleave)=\"inputHover = false\"\n                [(ngModel)]=\"message\"\n                [rows]=\"1\"\n                [style]=\"getTextAreaHeight(textAreaElement)\"\n                (ngModelChange)=\"onModelChange($event)\"\n                type=\"text\"\n                placeholder=\"{{ fileOver ? dropFilePlaceholder : messagePlaceholder }}\"\n                (keydown.enter)=\"sendMessage($event)\">\n            </textarea>\n\n            <div class=\"message-input-tmp\">{{ textAreaElement.value }}</div>\n\n            <input #fileInput type=\"file\" hidden multiple (change)=\"onFileSelected($event)\" />\n            <i (click)=\"showHistory()\" class=\"dr-icon-history\"></i>\n            <i (click)=\"fileInput.click()\" class=\"dr-icon-attachment\"></i>\n\n            <i\n                *ngIf=\"!waitForReply\"\n                [style]=\"getSendButtonPosition(textAreaElement)\"\n                (click)=\"sendMessage($event)\"\n                class=\"dr-icon-send-arrow-up send-button\"></i>\n\n            <i\n                *ngIf=\"waitForReply && !showDotFlashing\"\n                [style]=\"getSendButtonPosition(textAreaElement)\"\n                class=\"dr-icon-stop abort-button\"\n                (click)=\"abortMessage()\"></i>\n            <dr-dot-flashing *ngIf=\"waitForReply && showDotFlashing\" class=\"wait-reply-dot-flashing\"></dr-dot-flashing>\n        </div>\n\n        <ng-container *ngIf=\"!isChatMode\">\n            <div\n                [@dropdownAnimation]=\"isShowedHistory ? 'visible' : 'hidden'\"\n                class=\"history-dropdown\"\n                [exclude]=\"'.dr-icon-history'\"\n                (clickOutside)=\"closeHistory()\">\n                <ng-content></ng-content>\n            </div>\n        </ng-container>\n    </div>\n</div>\n", styles: [":host::ng-deep{--send-button-offset: 42px;display:flex;flex-direction:column;align-items:center;padding:0 16px}:host::ng-deep .message-row{display:flex;justify-content:center;width:100%;padding:0 0 21px;max-width:956px}:host::ng-deep .message-row__input{flex-direction:column;background-color:#fff;position:relative;display:flex;align-items:center;flex-grow:1;height:auto;overflow:visible;min-width:265px;border-radius:24px;border:1.5px solid transparent;box-shadow:0 2px 16px -10px #603cff29;transition:.35s ease}:host::ng-deep .message-row__input .abort-button,:host::ng-deep .message-row__input .send-button{width:32px;height:32px;display:flex;align-items:center;justify-content:center;position:absolute;top:2.5px;right:8px;cursor:pointer;font-size:24px;border-radius:100px;color:#fff;transition:.15s ease-in-out;background:linear-gradient(266deg,#6969ff 25.2%,#4eb7df 90.24%) border-box}:host::ng-deep .message-row__input .dr-icon-history,:host::ng-deep .message-row__input .dr-icon-attachment{display:flex;align-items:center;position:absolute;cursor:pointer;width:32px;height:48px;left:16px;top:-1px}:host::ng-deep .message-row__input .dr-icon-attachment{left:52px}:host::ng-deep .message-row__input .send-button{opacity:.5;pointer-events:none}:host::ng-deep .message-row__input--focused{box-shadow:8px 8px 16px #6969ff40,-4px -4px 8px #40b6e340,8px 8px 60px #00000040;height:auto!important;background:#fff}:host::ng-deep .message-row__input--filled{box-shadow:8px 8px 16px #6969ff40,-4px -4px 8px #40b6e340,8px 8px 60px #00000040;background:#fff}:host::ng-deep .message-row__input--filled .send-button{opacity:1;pointer-events:all}:host::ng-deep .message-row__input .message-input-tmp{display:none}:host::ng-deep .message-row__input.showed-dropdown .send-button{opacity:.5}:host::ng-deep .message-row__input .wait-reply-dot-flashing{display:flex;position:absolute;align-items:center;width:32px;height:48px;right:25px}:host::ng-deep .message-row__input:before{content:\"\";position:absolute;inset:-3px;background:linear-gradient(266deg,#6969ff 25.2%,#4eb7df 90.24%);border-radius:25px;z-index:-1}:host::ng-deep .message-row__input textarea,:host::ng-deep .message-row__input .message-input-tmp{font-size:14px;color:#333;width:100%;outline:none;min-height:48px;line-height:19px;flex-grow:1;resize:none;padding:13px 55px 13px 88px;margin:auto;border:none;border-radius:22.5px}:host::ng-deep .message-row__input textarea:focus,:host::ng-deep .message-row__input .message-input-tmp:focus{border:none}:host::ng-deep .message-row__input textarea::placeholder,:host::ng-deep .message-row__input .message-input-tmp::placeholder{color:#9ea1aa}:host::ng-deep .message-row__input-textarea-wrap{display:flex;width:100%;position:relative}:host::ng-deep .history-dropdown{width:100%;max-height:220px;overflow-y:auto;padding:12px 16px 0}:host::ng-deep .showed-dropdown textarea{visibility:hidden;position:absolute}:host::ng-deep .showed-dropdown .message-input-tmp{display:block;margin-left:inherit;white-space:nowrap;font-family:monospace;overflow:hidden;text-overflow:ellipsis}:host::ng-deep .showed-dropdown .send-button{top:2.5px!important}:host::ng-deep dr-chat-dropped-files{margin-right:auto}:host::ng-deep .message-row_loading .send-button,:host::ng-deep .message-row_loading .dropped-files__item{opacity:.5;pointer-events:none}\n"] }]
-    }], function () { return [{ type: i0.ChangeDetectorRef }, { type: i1$5.DomSanitizer }]; }, { textAreaElementRef: [{
-            type: ViewChild,
-            args: ['textAreaElement']
-        }], fileInput: [{
-            type: ViewChild,
-            args: ['fileInput']
-        }], isChatMode: [{
-            type: Input
-        }], isLoading: [{
-            type: Input
-        }], message: [{
-            type: Input
-        }], messagePlaceholder: [{
-            type: Input
-        }], dropFiles: [{
-            type: Input
-        }], dropFilePlaceholder: [{
-            type: Input
-        }], waitForReply: [{
-            type: Input
-        }], showDotFlashing: [{
-            type: Input
-        }], send: [{
-            type: Output
-        }], uploadFiles: [{
-            type: Output
-        }], abort: [{
-            type: Output
-        }], inputChange: [{
-            type: Output
-        }], fileOver: [{
-            type: HostBinding,
-            args: ['class.file-over']
-        }], onDrop: [{
-            type: HostListener,
-            args: ['drop', ['$event']]
-        }], onDragOver: [{
-            type: HostListener,
-            args: ['dragover', ['$event']]
-        }], onDragLeave: [{
-            type: HostListener,
-            args: ['dragleave', ['$event']]
-        }] }); })();
-
 const DR_CHAT_COMPONENTS = [
     DrChatComponent,
     DrChatMessageComponent,
@@ -13765,5 +13765,5 @@ class DrawerModule {
  * Generated bundle index. Do not edit.
  */
 
-export { AnyTagComponent, BadgeStatus, CHAT_MESSAGE_TYPE, CROP_IMAGE_MODES, CalendarView, ChatMessage, ChatRole, CheckboxComponent, ClickOutsideDirective, ClickOutsideModule, CodeEditorHintWrapperComponent, CustomDateAdapter, CustomDateFormat, DEFAULT_LINK_FONT_SIZE, DEFAULT_LINK_FONT_WEIGHT, DIALOG_BUTTON_LABEL, DIALOG_FIELD_TYPE, DIALOG_SIZE, DR_DRAWER_DATA, DR_DRAWER_DEFAULT_OPTIONS, DR_SHINE_ANIMATION_CLASS, DataAnalyticsService, DateFromats, DatePickerPeriodPosition, DateTagComponent, DateTagModule, DateTags, DayTagComponent, DefaultToastrComponent, DefaultTreeviewEventParser, DefaultTreeviewI18n, DialogModalWrapperComponent, DialogService, DialogWrapperComponent, DownlineTreeviewEventParser, DrAccordionComponent, DrAccordionItemBodyComponent, DrAccordionItemComponent, DrAccordionItemHeaderComponent, DrAccordionModule, DrAlertComponent, DrAlertModule, DrAlertTheme, DrAvatarComponent, DrAvatarModule, DrAvatarPipe, DrAvatarService, DrBadgeStatusComponent, DrBadgeStatusModule, DrButtonComponent, DrChatAlertComponent, DrChatComponent, DrChatCustomMessageDirective, DrChatFormComponent, DrChatMessageComponent, DrChatMessageFileComponent, DrChatMessageTextComponent, DrChatModule, DrChatSuggestionsComponent, DrChipComponent, DrCodeEditorComponent, DrCodeEditorModule, DrCodemirrorComponent, DrDatePickerComponent, DrDatePickerCustomHeaderComponent, DrDatePickerFormatDirective, DrDatePickerRangeComponent, DrDatePickerWithTimeframeComponent, DrDetailsListComponent, DrDetailsListModule, DrDialogModule, DrDotFlashingComponent, DrDropdownChildDirective, DrDropdownComponent, DrDropdownDirective, DrDropdownItemComponent, DrDropdownItemShowPipe, DrDropdownModule, DrDropdownService, DrErrorComponent, DrErrorModule, DrImageCropperComponent, DrInputComponent, DrInputsModule, DrLayoutBodyComponent, DrLayoutComponent, DrLayoutHeaderComponent, DrLayoutModule, DrLinkComponent, DrModelDebounceChangeDirective, DrPopoverAlignmentDimension, DrPopoverComponent, DrPopoverDirective, DrPopoverModule, DrPopoverRef, DrPopoverService, DrScenarioConfigurationComponent, DrScenarioModule, DrScenarioTagConfigurationComponent, DrSelectAddItemComponent, DrSelectComponent, DrSharedUtils, DrShineAnimationDirective, DrShowTimeframePipe, DrSliderComponent, DrSpinnerComponent, DrSpinnerDirective, DrSpinnerModule, DrStepperModule, DrTabComponent, DrTabsComponent, DrTabsModule, DrTagComponent, DrTagModule, DrTagsConstructorComponent, DrTagsConstructorModule, DrToastrModule, DrToastrService, DrToggleButtonComponent, DrToggleComponent, DrTooltipDirective, DrTooltipModule, Drawer, DrawerConfig, DrawerContainer, DrawerModule, DrawerRef, DropdownInstanceService, FeedbackSentiment, FilterPipe, ForecastTagComponent, ForecastTagService, ICodeEditorHintIcon, IMAGE_TYPES, ImgPipe, LetContext, LetDirective, LinkTheme, ListTagComponent, ListTagModule, MonthTagComponent, OrderDownlineTreeviewEventParser, QuarterTagComponent, RadioButtonComponent, RadioGroupComponent, Scenario, ScenarioService, StepperComponent, TagTypes, TagsConfigSubType, TagsConstructorService, TimeframeOption, ToastrStatus, ToastrStatusIcon, ToggleButtonMode, TooltipComponent, TooltipDefaultComponent, TooltipInfoComponent, TooltipInfoIconTheme, TooltipInfoWidth, TooltipPosition, TooltipTheme, TrackByPropertyDirective, TreeviewComponent, TreeviewConfig, TreeviewEventParser, TreeviewHelper, TreeviewI18n, TreeviewItem, TreeviewModule, TreeviewPipe, WeekTagComponent, YearTagComponent };
+export { AnyTagComponent, BadgeStatus, CHAT_MESSAGE_TYPE, CROP_IMAGE_MODES, CalendarView, ChatMessage, ChatRole, CheckboxComponent, ClickOutsideDirective, ClickOutsideModule, CodeEditorHintWrapperComponent, CustomDateAdapter, CustomDateFormat, DEFAULT_LINK_FONT_SIZE, DEFAULT_LINK_FONT_WEIGHT, DIALOG_BUTTON_LABEL, DIALOG_FIELD_TYPE, DIALOG_SIZE, DR_DRAWER_DATA, DR_DRAWER_DEFAULT_OPTIONS, DR_SHINE_ANIMATION_CLASS, DataAnalyticsService, DateFromats, DatePickerPeriodPosition, DateTagComponent, DateTagModule, DateTags, DayTagComponent, DefaultToastrComponent, DefaultTreeviewEventParser, DefaultTreeviewI18n, DialogModalWrapperComponent, DialogService, DialogWrapperComponent, DownlineTreeviewEventParser, DrAccordionComponent, DrAccordionItemBodyComponent, DrAccordionItemComponent, DrAccordionItemHeaderComponent, DrAccordionModule, DrAlertComponent, DrAlertModule, DrAlertTheme, DrAvatarComponent, DrAvatarModule, DrAvatarPipe, DrAvatarService, DrBadgeStatusComponent, DrBadgeStatusModule, DrButtonComponent, DrChatAlertComponent, DrChatComponent, DrChatCustomMessageDirective, DrChatDroppedFilesComponent, DrChatFormComponent, DrChatFormWithHistoryComponent, DrChatMessageComponent, DrChatMessageFileComponent, DrChatMessageTextComponent, DrChatModule, DrChatSuggestionsComponent, DrChipComponent, DrCodeEditorComponent, DrCodeEditorModule, DrCodemirrorComponent, DrDatePickerComponent, DrDatePickerCustomHeaderComponent, DrDatePickerFormatDirective, DrDatePickerRangeComponent, DrDatePickerWithTimeframeComponent, DrDetailsListComponent, DrDetailsListModule, DrDialogModule, DrDotFlashingComponent, DrDropdownChildDirective, DrDropdownComponent, DrDropdownDirective, DrDropdownItemComponent, DrDropdownItemShowPipe, DrDropdownModule, DrDropdownService, DrErrorComponent, DrErrorModule, DrImageCropperComponent, DrInputComponent, DrInputsModule, DrLayoutBodyComponent, DrLayoutComponent, DrLayoutHeaderComponent, DrLayoutModule, DrLinkComponent, DrModelDebounceChangeDirective, DrPopoverAlignmentDimension, DrPopoverComponent, DrPopoverDirective, DrPopoverModule, DrPopoverRef, DrPopoverService, DrScenarioConfigurationComponent, DrScenarioModule, DrScenarioTagConfigurationComponent, DrSelectAddItemComponent, DrSelectComponent, DrSharedUtils, DrShineAnimationDirective, DrShowTimeframePipe, DrSliderComponent, DrSpinnerComponent, DrSpinnerDirective, DrSpinnerModule, DrStepperModule, DrTabComponent, DrTabsComponent, DrTabsModule, DrTagComponent, DrTagModule, DrTagsConstructorComponent, DrTagsConstructorModule, DrToastrModule, DrToastrService, DrToggleButtonComponent, DrToggleComponent, DrTooltipDirective, DrTooltipModule, Drawer, DrawerConfig, DrawerContainer, DrawerModule, DrawerRef, DropdownInstanceService, FeedbackSentiment, FilterPipe, ForecastTagComponent, ForecastTagService, ICodeEditorHintIcon, IMAGE_TYPES, ImgPipe, LetContext, LetDirective, LinkTheme, ListTagComponent, ListTagModule, MonthTagComponent, OrderDownlineTreeviewEventParser, QuarterTagComponent, RadioButtonComponent, RadioGroupComponent, Scenario, ScenarioService, StepperComponent, TagTypes, TagsConfigSubType, TagsConstructorService, TimeframeOption, ToastrStatus, ToastrStatusIcon, ToggleButtonMode, TooltipComponent, TooltipDefaultComponent, TooltipInfoComponent, TooltipInfoIconTheme, TooltipInfoWidth, TooltipPosition, TooltipTheme, TrackByPropertyDirective, TreeviewComponent, TreeviewConfig, TreeviewEventParser, TreeviewHelper, TreeviewI18n, TreeviewItem, TreeviewModule, TreeviewPipe, WeekTagComponent, YearTagComponent };
 //# sourceMappingURL=datarailsshared-datarailsshared.mjs.map