@datarailsshared/datarailsshared 1.6.214 → 1.6.218

package/fesm2022/datarailsshared-datarailsshared.mjs

@@ -1745,6 +1745,10 @@ class DrSelectComponent {
         }
         this.onChange(selectedItem);
         this.change.emit(selectedItem);
+        this.ngSelect.blur();
+        if (this.searchable) {
+            this.ngSelect.searchInput.nativeElement.blur();
+        }
     }
     onTabKeypress(e) {
         if (this.selectOnTabKeyPress && this.ngSelect) {
@@ -4086,7 +4090,7 @@ const _c0$H = ["dynamicInputRef"];
 function DrSelectAddItemComponent_div_1_Template(rf, ctx) { if (rf & 1) {
     const _r3 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "div", 3);
-    i0.ɵɵlistener("click", function DrSelectAddItemComponent_div_1_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r3); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onDynamicAdding()); });
+    i0.ɵɵlistener("click", function DrSelectAddItemComponent_div_1_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r3); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.instantAddValue ? ctx_r2.onDynamicAdd(ctx_r2.instantAddValue) : ctx_r2.onDynamicAdding()); });
     i0.ɵɵelement(1, "i", 4);
     i0.ɵɵelementStart(2, "p", 5);
     i0.ɵɵtext(3);
@@ -4145,6 +4149,7 @@ class DrSelectAddItemComponent {
         this.dynamicAddLabel = 'Add new';
         this.values = [];
         this.showOnlyInput = false;
+        this.instantAddValue = '';
         this.dynamicValueAdded = new EventEmitter();
     }
     ngOnChanges(changes) {
@@ -4168,6 +4173,9 @@ class DrSelectAddItemComponent {
     }
     onDynamicAdd(value, keydownEvent) {
         this.isDirty = true;
+        if (this.instantAddValue) {
+            this.dynamicValue = this.instantAddValue;
+        }
         if (!this.isDynamicValueValid())
             return;
         if (keydownEvent && keydownEvent.key !== 'Enter')
@@ -4190,7 +4198,7 @@ class DrSelectAddItemComponent {
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.inputRef = _t.first);
-        } }, inputs: { dynamicAddLabel: "dynamicAddLabel", bindValue: "bindValue", values: "values", alertMsg: "alertMsg", showOnlyInput: "showOnlyInput" }, outputs: { dynamicValueAdded: "dynamicValueAdded" }, features: [i0.ɵɵNgOnChangesFeature], decls: 3, vars: 2, consts: [[1, "dr-select__dynamic-add", "dynamic-add"], ["class", "dynamic-add__add-item", 3, "click", 4, "ngIf"], ["class", "dynamic-add__field", 4, "ngIf"], [1, "dynamic-add__add-item", 3, "click"], [1, "dr-icon-add"], [1, "dynamic-add__add-item__text"], [1, "dynamic-add__field"], ["class", "dynamic-add__field__alert", 4, "ngIf"], ["placeholder", "Type...", 1, "dynamic-add__field__input", 3, "ngModel", "ngModelChange", "keydown"], ["dynamicInputRef", ""], [1, "dynamic-add__field__buttons"], ["theme", "icon", "icon", "dr-icon-approve", "iconSize", "18px", 3, "click", 4, "ngIf"], ["theme", "icon", "icon", "dr-icon-exit", "iconSize", "18px", 3, "click"], [1, "dynamic-add__field__alert"], ["theme", "icon", "icon", "dr-icon-approve", "iconSize", "18px", 3, "click"]], template: function DrSelectAddItemComponent_Template(rf, ctx) { if (rf & 1) {
+        } }, inputs: { dynamicAddLabel: "dynamicAddLabel", bindValue: "bindValue", values: "values", alertMsg: "alertMsg", showOnlyInput: "showOnlyInput", instantAddValue: "instantAddValue" }, outputs: { dynamicValueAdded: "dynamicValueAdded" }, features: [i0.ɵɵNgOnChangesFeature], decls: 3, vars: 2, consts: [[1, "dr-select__dynamic-add", "dynamic-add"], ["class", "dynamic-add__add-item", 3, "click", 4, "ngIf"], ["class", "dynamic-add__field", 4, "ngIf"], [1, "dynamic-add__add-item", 3, "click"], [1, "dr-icon-add"], [1, "dynamic-add__add-item__text"], [1, "dynamic-add__field"], ["class", "dynamic-add__field__alert", 4, "ngIf"], ["placeholder", "Type...", 1, "dynamic-add__field__input", 3, "ngModel", "ngModelChange", "keydown"], ["dynamicInputRef", ""], [1, "dynamic-add__field__buttons"], ["theme", "icon", "icon", "dr-icon-approve", "iconSize", "18px", 3, "click", 4, "ngIf"], ["theme", "icon", "icon", "dr-icon-exit", "iconSize", "18px", 3, "click"], [1, "dynamic-add__field__alert"], ["theme", "icon", "icon", "dr-icon-approve", "iconSize", "18px", 3, "click"]], template: function DrSelectAddItemComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 0);
             i0.ɵɵtemplate(1, DrSelectAddItemComponent_div_1_Template, 4, 1, "div", 1);
             i0.ɵɵtemplate(2, DrSelectAddItemComponent_div_2_Template, 7, 5, "div", 2);
@@ -4204,7 +4212,7 @@ class DrSelectAddItemComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DrSelectAddItemComponent, [{
         type: Component,
-        args: [{ selector: 'dr-select-add-item', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"dr-select__dynamic-add dynamic-add\">\n    <div *ngIf=\"!(showOnlyInput && isDynamicAdding)\" class=\"dynamic-add__add-item\" (click)=\"onDynamicAdding()\">\n        <i class=\"dr-icon-add\"></i>\n        <p class=\"dynamic-add__add-item__text\">{{ dynamicAddLabel }}</p>\n    </div>\n    <div *ngIf=\"isDynamicAdding\" class=\"dynamic-add__field\">\n        <p *ngIf=\"alertMsg && !isDynamicValueValid() && isDirty\" class=\"dynamic-add__field__alert\">{{ alertMsg }}</p>\n        <dr-input\n            #dynamicInputRef\n            class=\"dynamic-add__field__input\"\n            [class.dynamic-add__field__input--error]=\"!isDynamicValueValid() && isDirty\"\n            [(ngModel)]=\"dynamicValue\"\n            (keydown)=\"onDynamicAdd(dynamicValue, $event)\"\n            placeholder=\"Type...\"></dr-input>\n        <div class=\"dynamic-add__field__buttons\">\n            <dr-button\n                *ngIf=\"dynamicValue && isDynamicValueValid()\"\n                theme=\"icon\"\n                icon=\"dr-icon-approve\"\n                iconSize=\"18px\"\n                (click)=\"onDynamicAdd(dynamicValue)\"></dr-button>\n            <dr-button theme=\"icon\" icon=\"dr-icon-exit\" iconSize=\"18px\" (click)=\"onDynamicAddingClose()\"></dr-button>\n        </div>\n    </div>\n</div>\n", styles: [".dynamic-add__add-item{cursor:pointer;display:flex;align-items:center;border-bottom:1px solid #dfe0e3;padding:6px}.dynamic-add__add-item:hover{background:#f9f7ff}.dynamic-add__add-item__text{font-size:14px;line-height:22px;margin:0;color:#6d6e6f}.dynamic-add__add-item .dr-icon-add{color:#6d6e6f}.dynamic-add__field{position:relative}.dynamic-add__field__buttons{position:absolute;top:0;right:0;bottom:0;display:flex;align-items:center}.dynamic-add__field__alert{font-size:12px;position:absolute;color:#bf1d30;z-index:100;right:30px}::ng-deep .ng-dropdown-panel .ng-dropdown-footer:has(.dynamic-add),::ng-deep .ng-dropdown-panel .ng-dropdown-header:has(.dynamic-add){padding:0;border:none}::ng-deep .ng-dropdown-panel .ng-dropdown-footer .dynamic-add__add-item{border-bottom:none}::ng-deep .dynamic-add__field__input{padding-left:12px!important;height:36px!important;border:none!important;background:#f9f7ff!important;border-radius:0!important}::ng-deep .dynamic-add__field__input>input{background:#f9f7ff}::ng-deep .dynamic-add__field__input>input::placeholder{line-height:22px;font-size:14px;font-weight:400;color:#9ea1aa}::ng-deep .dynamic-add__field__input--error{background:#ffdfe4!important}::ng-deep .dynamic-add__field__input--error>input{background:#ffdfe4}\n"] }]
+        args: [{ selector: 'dr-select-add-item', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"dr-select__dynamic-add dynamic-add\">\n    <div\n        *ngIf=\"!(showOnlyInput && isDynamicAdding)\"\n        class=\"dynamic-add__add-item\"\n        (click)=\"instantAddValue ? onDynamicAdd(instantAddValue) : onDynamicAdding()\">\n        <i class=\"dr-icon-add\"></i>\n        <p class=\"dynamic-add__add-item__text\">{{ dynamicAddLabel }}</p>\n    </div>\n    <div *ngIf=\"isDynamicAdding\" class=\"dynamic-add__field\">\n        <p *ngIf=\"alertMsg && !isDynamicValueValid() && isDirty\" class=\"dynamic-add__field__alert\">{{ alertMsg }}</p>\n        <dr-input\n            #dynamicInputRef\n            class=\"dynamic-add__field__input\"\n            [class.dynamic-add__field__input--error]=\"!isDynamicValueValid() && isDirty\"\n            [(ngModel)]=\"dynamicValue\"\n            (keydown)=\"onDynamicAdd(dynamicValue, $event)\"\n            placeholder=\"Type...\"></dr-input>\n        <div class=\"dynamic-add__field__buttons\">\n            <dr-button\n                *ngIf=\"dynamicValue && isDynamicValueValid()\"\n                theme=\"icon\"\n                icon=\"dr-icon-approve\"\n                iconSize=\"18px\"\n                (click)=\"onDynamicAdd(dynamicValue)\"></dr-button>\n            <dr-button theme=\"icon\" icon=\"dr-icon-exit\" iconSize=\"18px\" (click)=\"onDynamicAddingClose()\"></dr-button>\n        </div>\n    </div>\n</div>\n", styles: [".dynamic-add__add-item{cursor:pointer;display:flex;align-items:center;border-bottom:1px solid #dfe0e3;padding:6px}.dynamic-add__add-item:hover{background:#f9f7ff}.dynamic-add__add-item__text{font-size:14px;line-height:22px;margin:0;color:#6d6e6f}.dynamic-add__add-item .dr-icon-add{color:#6d6e6f}.dynamic-add__field{position:relative}.dynamic-add__field__buttons{position:absolute;top:0;right:0;bottom:0;display:flex;align-items:center}.dynamic-add__field__alert{font-size:12px;position:absolute;color:#bf1d30;z-index:100;right:30px}::ng-deep .ng-dropdown-panel .ng-dropdown-footer:has(.dynamic-add),::ng-deep .ng-dropdown-panel .ng-dropdown-header:has(.dynamic-add){padding:0;border:none}::ng-deep .ng-dropdown-panel .ng-dropdown-footer .dynamic-add__add-item{border-bottom:none}::ng-deep .dynamic-add__field__input{padding-left:12px!important;height:36px!important;border:none!important;background:#f9f7ff!important;border-radius:0!important}::ng-deep .dynamic-add__field__input>input{background:#f9f7ff}::ng-deep .dynamic-add__field__input>input::placeholder{line-height:22px;font-size:14px;font-weight:400;color:#9ea1aa}::ng-deep .dynamic-add__field__input--error{background:#ffdfe4!important}::ng-deep .dynamic-add__field__input--error>input{background:#ffdfe4}\n"] }]
     }], function () { return [{ type: DrSelectComponent }]; }, { dynamicAddLabel: [{
             type: Input
         }], bindValue: [{
@@ -4215,6 +4223,8 @@ class DrSelectAddItemComponent {
             type: Input
         }], showOnlyInput: [{
             type: Input
+        }], instantAddValue: [{
+            type: Input
         }], dynamicValueAdded: [{
             type: Output
         }], inputRef: [{
@@ -8115,6 +8125,7 @@ class DrChatFormDropdownComponent {
         this.send = new EventEmitter();
         this.uploadFiles = new EventEmitter();
         this.abort = new EventEmitter();
+        this.filesRejected = new EventEmitter();
         /**
          * Emits when message input value has been changed
          *
@@ -8130,7 +8141,7 @@ class DrChatFormDropdownComponent {
             this.fileOver = false;
             const files = event.dataTransfer?.files;
             if (files) {
-                this.saveFiles(files);
+                this.saveFiles(Array.from(files));
             }
         }
     }
@@ -8200,15 +8211,59 @@ class DrChatFormDropdownComponent {
     }
     async saveFiles(files) {
         const uploadedFiles = [];
+        const tooLargeFiles = [];
+        const unsupportedFiles = [];
+        const allowedExtensions = this.getAllowedExtensions();
+        let maxExceeded = false;
+        const remainingSlotsInit = Math.max(0, this.maxFilesCount - this.droppedFiles$.value.length);
+        if (files.length > remainingSlotsInit) {
+            this.filesRejected.emit({ oversize: [], unsupported: [], maxExceeded: true });
+            return;
+        }
+        let remainingSlots = remainingSlotsInit;
         for (const file of files) {
-            let res = file;
+            if (remainingSlots <= 0) {
+                maxExceeded = true;
+                continue;
+            }
+            const fileExtension = this.getFileExtension(file.name);
+            const isAllowedByType = !allowedExtensions || allowedExtensions.has(fileExtension);
+            if (!isAllowedByType) {
+                unsupportedFiles.push(file.name);
+                continue;
+            }
+            if (file.size > this.maxFileSizeBytes) {
+                tooLargeFiles.push(file.name);
+                continue;
+            }
+            const res = file;
             res.data = (await this.base64Convert(res));
             this.droppedFiles$.next([...this.droppedFiles$.value, res]);
             uploadedFiles.push(res);
+            remainingSlots--;
             this.cdr.markForCheck();
             this.cdr.detectChanges();
         }
-        this.uploadFiles.emit(uploadedFiles.map((item) => ({ data: item.data, name: item.name })));
+        if (tooLargeFiles.length || unsupportedFiles.length || maxExceeded) {
+            this.filesRejected.emit({ oversize: tooLargeFiles, unsupported: unsupportedFiles, maxExceeded });
+        }
+        if (uploadedFiles.length) {
+            this.uploadFiles.emit(uploadedFiles.map((item) => ({ data: item.data, name: item.name })));
+        }
+    }
+    getAllowedExtensions() {
+        if (!this.acceptFormatFiles || !this.acceptFormatFiles.trim())
+            return null;
+        const parts = this.acceptFormatFiles
+            .split(',')
+            .map((p) => p.trim().toLowerCase())
+            .filter(Boolean)
+            .map((p) => (p.startsWith('.') ? p.slice(1) : p));
+        return parts.length ? new Set(parts) : null;
+    }
+    getFileExtension(fileName) {
+        const idx = fileName.lastIndexOf('.');
+        return idx >= 0 ? fileName.slice(idx + 1).toLowerCase() : '';
     }
     base64Convert(file) {
         return new Promise((resolve, reject) => {
@@ -8230,7 +8285,7 @@ class DrChatFormDropdownComponent {
             i0.ɵɵlistener("drop", function DrChatFormDropdownComponent_drop_HostBindingHandler($event) { return ctx.onDrop($event); })("dragover", function DrChatFormDropdownComponent_dragover_HostBindingHandler($event) { return ctx.onDragOver($event); })("dragleave", function DrChatFormDropdownComponent_dragleave_HostBindingHandler($event) { return ctx.onDragLeave($event); });
         } if (rf & 2) {
             i0.ɵɵclassProp("file-over", ctx.fileOver);
-        } }, inputs: { isUploadingFiles: "isUploadingFiles", message: "message", messagePlaceholder: "messagePlaceholder", dropFiles: "dropFiles", dropFilePlaceholder: "dropFilePlaceholder", waitForReply: "waitForReply", showDotFlashing: "showDotFlashing" }, outputs: { send: "send", uploadFiles: "uploadFiles", abort: "abort", inputChange: "inputChange" }, ngContentSelectors: _c5, decls: 17, vars: 20, 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-row__btns"], ["type", "file", "hidden", "", "multiple", "", 3, "change"], ["fileInput", ""], ["class", "dr-icon-send-arrow-up send-button", 3, "click", 4, "ngIf"], ["class", "dr-icon-stop abort-button", 3, "click", 4, "ngIf"], ["class", "wait-reply-dot-flashing", 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"]], template: function DrChatFormDropdownComponent_Template(rf, ctx) { if (rf & 1) {
+        } }, inputs: { acceptFormatFiles: "acceptFormatFiles", maxFileSizeBytes: "maxFileSizeBytes", maxFilesCount: "maxFilesCount", isUploadingFiles: "isUploadingFiles", message: "message", messagePlaceholder: "messagePlaceholder", dropFiles: "dropFiles", dropFilePlaceholder: "dropFilePlaceholder", waitForReply: "waitForReply", showDotFlashing: "showDotFlashing" }, outputs: { send: "send", uploadFiles: "uploadFiles", abort: "abort", filesRejected: "filesRejected", inputChange: "inputChange" }, ngContentSelectors: _c5, decls: 17, vars: 21, 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-row__btns"], ["type", "file", "hidden", "", "multiple", "", 3, "accept", "change"], ["fileInput", ""], ["class", "dr-icon-send-arrow-up send-button", 3, "click", 4, "ngIf"], ["class", "dr-icon-stop abort-button", 3, "click", 4, "ngIf"], ["class", "wait-reply-dot-flashing", 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"]], template: function DrChatFormDropdownComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef(_c2$5);
             i0.ɵɵelementStart(0, "div", 0)(1, "div", 1);
             i0.ɵɵpipe(2, "async");
@@ -8254,16 +8309,18 @@ class DrChatFormDropdownComponent {
         } if (rf & 2) {
             const _r1 = i0.ɵɵreference(7);
             let tmp_1_0;
-            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(15, _c3$3, ctx.isUploadingFiles));
+            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(16, _c3$3, ctx.isUploadingFiles));
             i0.ɵɵadvance(1);
-            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction2(17, _c4, ctx.inputFocus, !!(ctx.message == null ? null : (tmp_1_0 = ctx.message.trim()) == null ? null : tmp_1_0.length) || !!i0.ɵɵpipeBind1(2, 11, ctx.droppedFiles$).length));
+            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction2(18, _c4, ctx.inputFocus, !!(ctx.message == null ? null : (tmp_1_0 = ctx.message.trim()) == null ? null : tmp_1_0.length) || !!i0.ɵɵpipeBind1(2, 12, ctx.droppedFiles$).length));
             i0.ɵɵadvance(2);
-            i0.ɵɵproperty("ngIf", i0.ɵɵpipeBind1(4, 13, ctx.droppedFiles$).length);
+            i0.ɵɵproperty("ngIf", i0.ɵɵpipeBind1(4, 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(7);
+            i0.ɵɵadvance(5);
+            i0.ɵɵproperty("accept", ctx.acceptFormatFiles);
+            i0.ɵɵadvance(2);
             i0.ɵɵproperty("ngIf", !ctx.waitForReply);
             i0.ɵɵadvance(1);
             i0.ɵɵproperty("ngIf", ctx.waitForReply && !ctx.showDotFlashing);
@@ -8273,13 +8330,19 @@ class DrChatFormDropdownComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DrChatFormDropdownComponent, [{
         type: Component,
-        args: [{ selector: 'dr-chat-form-dropdown', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"message-row\" [ngClass]=\"{ 'message-row_loading': isUploadingFiles }\">\n    <div\n        class=\"message-row__input\"\n        [ngClass]=\"{\n            'message-row__input--focused': inputFocus,\n            'message-row__input--filled': !!message?.trim()?.length || !!(droppedFiles$ | async).length,\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        </div>\n        <div class=\"message-row__btns\">\n            <ng-content></ng-content>\n            <input #fileInput type=\"file\" hidden multiple (change)=\"onFileSelected($event)\" />\n            <i *ngIf=\"!waitForReply\" (click)=\"sendMessage($event)\" class=\"dr-icon-send-arrow-up send-button\"></i>\n\n            <i *ngIf=\"waitForReply && !showDotFlashing\" class=\"dr-icon-stop abort-button\" (click)=\"abortMessage()\"></i>\n            <dr-dot-flashing *ngIf=\"waitForReply && showDotFlashing\" class=\"wait-reply-dot-flashing\"></dr-dot-flashing>\n        </div>\n        <ng-content select=\"[dropItem]\"></ng-content>\n    </div>\n</div>\n", styles: [":host::ng-deep{--disabled-bg: linear-gradient(270.95deg, rgba(130, 210, 240, .2) 10.98%, rgba(146, 146, 255, .2) 93.38%);display:flex;flex-direction:column;align-items:center;padding:0}: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;padding:14px 8px 8px 15px;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;will-change:box-shadow}: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;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 .send-button{background:var(--disabled-bg);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{background:linear-gradient(266deg,#6969ff 25.2%,#4eb7df 90.24%) border-box;pointer-events:all}:host::ng-deep .message-row__input .wait-reply-dot-flashing{display:flex;align-items:center;width:32px;height:32px}:host::ng-deep .message-row__input:before{content:\"\";position:absolute;inset:-3px;background:linear-gradient(266.3deg,#6969ff 25.2%,#4eb7df 90.24%);border-radius:25px;z-index:-1}:host::ng-deep .message-row__input textarea{color:#333;width:100%;outline:none;min-height:30px;flex-grow:1;resize:none;padding:4px 48px 4px 4px;margin:auto;border:none;border-radius:22.5px;font-size:14px;line-height:24px;font-weight:400}:host::ng-deep .message-row__input textarea:focus{border:none}:host::ng-deep .message-row__input textarea::placeholder{color:#9ea1aa}:host::ng-deep .message-row__btns{display:flex;justify-content:space-between;width:100%;align-items:center}:host::ng-deep .message-row__input-textarea-wrap{display:flex;width:100%;position:relative}:host::ng-deep dr-chat-dropped-files{margin-right:auto}:host::ng-deep dr-chat-dropped-files .dropped-files{padding:0}:host::ng-deep dr-chat-dropped-files .dropped-files__item{margin:0}:host::ng-deep .message-row_loading .send-button{background:var(--disabled-bg);pointer-events:none}:host::ng-deep .message-row_loading .dropped-files__item{opacity:.5;pointer-events:none}\n"] }]
+        args: [{ selector: 'dr-chat-form-dropdown', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"message-row\" [ngClass]=\"{ 'message-row_loading': isUploadingFiles }\">\n    <div\n        class=\"message-row__input\"\n        [ngClass]=\"{\n            'message-row__input--focused': inputFocus,\n            'message-row__input--filled': !!message?.trim()?.length || !!(droppedFiles$ | async).length,\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        </div>\n        <div class=\"message-row__btns\">\n            <ng-content></ng-content>\n            <input #fileInput type=\"file\" [accept]=\"acceptFormatFiles\" hidden multiple (change)=\"onFileSelected($event)\" />\n            <i *ngIf=\"!waitForReply\" (click)=\"sendMessage($event)\" class=\"dr-icon-send-arrow-up send-button\"></i>\n\n            <i *ngIf=\"waitForReply && !showDotFlashing\" class=\"dr-icon-stop abort-button\" (click)=\"abortMessage()\"></i>\n            <dr-dot-flashing *ngIf=\"waitForReply && showDotFlashing\" class=\"wait-reply-dot-flashing\"></dr-dot-flashing>\n        </div>\n        <ng-content select=\"[dropItem]\"></ng-content>\n    </div>\n</div>\n", styles: [":host::ng-deep{--disabled-bg: linear-gradient(270.95deg, rgba(130, 210, 240, .2) 10.98%, rgba(146, 146, 255, .2) 93.38%);display:flex;flex-direction:column;align-items:center;padding:0}: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;padding:14px 8px 8px 15px;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;will-change:box-shadow}: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;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 .send-button{background:var(--disabled-bg);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{background:linear-gradient(266deg,#6969ff 25.2%,#4eb7df 90.24%) border-box;pointer-events:all}:host::ng-deep .message-row__input .wait-reply-dot-flashing{display:flex;align-items:center;width:32px;height:32px}:host::ng-deep .message-row__input:before{content:\"\";position:absolute;inset:-3px;background:linear-gradient(266.3deg,#6969ff 25.2%,#4eb7df 90.24%);border-radius:25px;z-index:-1}:host::ng-deep .message-row__input textarea{color:#333;width:100%;outline:none;min-height:30px;flex-grow:1;resize:none;padding:4px 48px 4px 4px;margin:auto;border:none;border-radius:22.5px;font-size:14px;line-height:24px;font-weight:400}:host::ng-deep .message-row__input textarea:focus{border:none}:host::ng-deep .message-row__input textarea::placeholder{color:#9ea1aa}:host::ng-deep .message-row__btns{display:flex;justify-content:space-between;width:100%;align-items:center}:host::ng-deep .message-row__input-textarea-wrap{display:flex;width:100%;position:relative}:host::ng-deep dr-chat-dropped-files{margin-right:auto}:host::ng-deep dr-chat-dropped-files .dropped-files{padding:0}:host::ng-deep dr-chat-dropped-files .dropped-files__item{margin:0}:host::ng-deep .message-row_loading .send-button{background:var(--disabled-bg);pointer-events:none}: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']
+        }], acceptFormatFiles: [{
+            type: Input
+        }], maxFileSizeBytes: [{
+            type: Input
+        }], maxFilesCount: [{
+            type: Input
         }], isUploadingFiles: [{
             type: Input
         }], message: [{
@@ -8300,6 +8363,8 @@ class DrChatFormDropdownComponent {
             type: Output
         }], abort: [{
             type: Output
+        }], filesRejected: [{
+            type: Output
         }], inputChange: [{
             type: Output
         }], fileOver: [{