@datarailsshared/datarailsshared 1.6.212 → 1.6.216
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/datarailsshared-datarailsshared-1.6.216.tgz +0 -0
- package/esm2022/lib/dr-chat/dr-chat-form/chat-form.component.mjs +3 -3
- package/esm2022/lib/dr-chat/dr-chat-form-dropdown/dr-chat-form-dropdown.component.mjs +65 -10
- package/fesm2022/datarailsshared-datarailsshared.mjs +66 -11
- package/fesm2022/datarailsshared-datarailsshared.mjs.map +1 -1
- package/lib/dr-chat/dr-chat-form-dropdown/dr-chat-form-dropdown.component.d.ts +11 -1
- package/package.json +1 -1
- package/datarailsshared-datarailsshared-1.6.212.tgz +0 -0
|
@@ -7034,7 +7034,7 @@ class DrChatFormComponent {
|
|
|
7034
7034
|
i0.ɵɵlistener("drop", function DrChatFormComponent_drop_HostBindingHandler($event) { return ctx.onDrop($event); })("dragover", function DrChatFormComponent_dragover_HostBindingHandler($event) { return ctx.onDragOver($event); })("dragleave", function DrChatFormComponent_dragleave_HostBindingHandler($event) { return ctx.onDragLeave($event); });
|
|
7035
7035
|
} if (rf & 2) {
|
|
7036
7036
|
i0.ɵɵclassProp("file-over", ctx.fileOver);
|
|
7037
|
-
} }, inputs: { message: "message", messagePlaceholder: "messagePlaceholder", dropFiles: "dropFiles", dropFilePlaceholder: "dropFilePlaceholder", waitForReply: "waitForReply", showDisabledButtonInsteadOfDotFlashing: "showDisabledButtonInsteadOfDotFlashing" }, outputs: { send: "send", abort: "abort", inputChange: "inputChange" }, decls: 10, vars: 14, consts: [["class", "dropped-files", 4, "ngIf"], [1, "message-row"], [1, "message-row__input", 3, "ngClass"], ["type", "text",
|
|
7037
|
+
} }, inputs: { message: "message", messagePlaceholder: "messagePlaceholder", dropFiles: "dropFiles", dropFilePlaceholder: "dropFilePlaceholder", waitForReply: "waitForReply", showDisabledButtonInsteadOfDotFlashing: "showDisabledButtonInsteadOfDotFlashing" }, outputs: { send: "send", abort: "abort", inputChange: "inputChange" }, decls: 10, vars: 14, consts: [["class", "dropped-files", 4, "ngIf"], [1, "message-row"], [1, "message-row__input", 3, "ngClass"], ["type", "text", 3, "ngModel", "rows", "placeholder", "focus", "blur", "mouseenter", "mouseleave", "ngModelChange", "keydown.enter"], ["textAreaElement", ""], ["class", "dr-icon-notify send-button", 3, "style", "click", 4, "ngIf"], ["class", "dr-icon-notify send-button-disabled", 3, "click", 4, "ngIf"], ["class", "wait-reply-dot-flashing", 4, "ngIf"], ["theme", "ghost", "class", "abort-button", 3, "click", 4, "ngIf"], [1, "dropped-files"], ["class", "dropped-files__item", 4, "ngFor", "ngForOf"], [1, "dropped-files__item"], [1, "dropped-files__item__preview"], ["class", "dr-icon-file", 4, "ngIf"], [1, "dropped-files__item__name"], [1, "dropped-files__item__remove", "dr-icon-exit", 3, "click"], [1, "dr-icon-file"], [1, "dr-icon-notify", "send-button", 3, "click"], [1, "dr-icon-notify", "send-button-disabled", 3, "click"], [1, "wait-reply-dot-flashing"], ["theme", "ghost", 1, "abort-button", 3, "click"]], template: function DrChatFormComponent_Template(rf, ctx) { if (rf & 1) {
|
|
7038
7038
|
i0.ɵɵtemplate(0, DrChatFormComponent_div_0_Template, 2, 1, "div", 0);
|
|
7039
7039
|
i0.ɵɵelementStart(1, "div", 1)(2, "div", 2)(3, "textarea", 3, 4);
|
|
7040
7040
|
i0.ɵɵlistener("focus", function DrChatFormComponent_Template_textarea_focus_3_listener() { return ctx.inputFocus = true; })("blur", function DrChatFormComponent_Template_textarea_blur_3_listener() { return ctx.inputFocus = false; })("mouseenter", function DrChatFormComponent_Template_textarea_mouseenter_3_listener() { return ctx.inputHover = true; })("mouseleave", function DrChatFormComponent_Template_textarea_mouseleave_3_listener() { return ctx.inputHover = false; })("ngModelChange", function DrChatFormComponent_Template_textarea_ngModelChange_3_listener($event) { return ctx.message = $event; })("ngModelChange", function DrChatFormComponent_Template_textarea_ngModelChange_3_listener($event) { return ctx.onModelChange($event); })("keydown.enter", function DrChatFormComponent_Template_textarea_keydown_enter_3_listener($event) { return ctx.sendMessage($event); });
|
|
@@ -7066,7 +7066,7 @@ class DrChatFormComponent {
|
|
|
7066
7066
|
}
|
|
7067
7067
|
(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DrChatFormComponent, [{
|
|
7068
7068
|
type: Component,
|
|
7069
|
-
args: [{ selector: 'dr-chat-form', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"dropped-files\" *ngIf=\"droppedFiles?.length\">\n <div class=\"dropped-files__item\" *ngFor=\"let file of droppedFiles\">\n <div class=\"dropped-files__item__preview\" [style.background-image]=\"file.urlStyle || 'none'\">\n <i class=\"dr-icon-file\" *ngIf=\"!file.urlStyle\"></i>\n </div>\n <div class=\"dropped-files__item__name\">{{ file.name }}</div>\n <i class=\"dropped-files__item__remove dr-icon-exit\" (click)=\"removeFile(file)\"></i>\n </div>\n</div>\n<div class=\"message-row\">\n <div\n class=\"message-row__input\"\n [ngClass]=\"{ 'message-row__input--focused': inputFocus, 'message-row__input--filled': !!message?.length }\">\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
|
|
7069
|
+
args: [{ selector: 'dr-chat-form', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"dropped-files\" *ngIf=\"droppedFiles?.length\">\n <div class=\"dropped-files__item\" *ngFor=\"let file of droppedFiles\">\n <div class=\"dropped-files__item__preview\" [style.background-image]=\"file.urlStyle || 'none'\">\n <i class=\"dr-icon-file\" *ngIf=\"!file.urlStyle\"></i>\n </div>\n <div class=\"dropped-files__item__name\">{{ file.name }}</div>\n <i class=\"dropped-files__item__remove dr-icon-exit\" (click)=\"removeFile(file)\"></i>\n </div>\n</div>\n<div class=\"message-row\">\n <div\n class=\"message-row__input\"\n [ngClass]=\"{ 'message-row__input--focused': inputFocus, 'message-row__input--filled': !!message?.length }\">\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 <i\n *ngIf=\"!waitForReply\"\n [style]=\"getSendButtonPosition(textAreaElement)\"\n (click)=\"sendMessage($event)\"\n class=\"dr-icon-notify send-button\"></i>\n <i\n *ngIf=\"waitForReply && showDisabledButtonInsteadOfDotFlashing\"\n (click)=\"sendMessage($event)\"\n class=\"dr-icon-notify send-button-disabled\"></i>\n <dr-dot-flashing\n *ngIf=\"waitForReply && !showDisabledButtonInsteadOfDotFlashing\"\n class=\"wait-reply-dot-flashing\"></dr-dot-flashing>\n <dr-button *ngIf=\"waitForReply\" (click)=\"abortMessage()\" theme=\"ghost\" class=\"abort-button\">Stop generating</dr-button>\n </div>\n</div>\n", styles: [":host{--send-button-offset: 42px;display:flex;flex-direction:column;align-items:center;padding:0 16px;margin-top:12px}:host .message-row{display:flex;justify-content:center;width:100%;padding:0 0 21px;max-width:956px}:host .message-row__input{position:relative;display:flex;align-items:center;flex-grow:1;flex-direction:row;height:auto;overflow:visible;min-width:265px;border-radius:24px;background:#dfe0e3 border-box;border:1.5px solid transparent;box-shadow:0 2px 16px -10px #603cff29}:host .message-row__input .send-button,:host .message-row__input .send-button-disabled{position:absolute;right:4px;top:2.5px;cursor:pointer;font-size:28px;width:68px;border-radius:100px;display:flex;align-items:center;justify-content:center;height:40px;background:#f0f1f4;color:#aeabac}:host .message-row__input--focused{background:linear-gradient(-90deg,#6969ff,#4eb7df) border-box}:host .message-row__input--filled{background:linear-gradient(-90deg,#6969ff,#4eb7df) border-box}:host .message-row__input--filled .send-button{color:#fff;background:linear-gradient(-90deg,#6969ff,#4eb7df) border-box}:host .message-row__input textarea{font-size:14px;color:#333;line-height:19px;flex-grow:1;resize:none;padding:14px 76px 12px 23px;margin:auto;border:none;border-radius:22.5px}:host .message-row__input textarea:focus{border:none}:host .message-row__input textarea::placeholder{color:#9ea1aa}:host .message-row__input .wait-reply-dot-flashing{position:absolute;right:20px}:host .message-row__input .abort-button{position:absolute;right:0;top:-44px}:host .message-row__input .abort-button::ng-deep button{background:#f2f2ff!important;border-radius:4px}:host input{flex:1}:host input.with-button{border-bottom-right-radius:0;border-top-right-radius:0}:host .dropped-files{display:flex;flex-direction:row;margin-bottom:.5rem;flex-wrap:wrap}:host .dropped-files__item{display:flex;flex-direction:column;justify-content:center;margin:0 10px 10px 0;position:relative}:host .dropped-files__item__preview{background-size:cover;background-position:center;width:64px;height:64px;border-radius:8px;border:1px solid #ccc}:host .dropped-files__item__preview i{font-size:62px}:host .dropped-files__item__name{white-space:nowrap;font-size:12px;color:#8f929e;margin-top:4px;max-width:64px;overflow:hidden;text-overflow:ellipsis}:host .dropped-files__item__remove{position:absolute;right:-4px;top:-4px;cursor:pointer;background:#fff;border-radius:12px;color:#8f929e;border:1px solid #8f929e;font-size:14px}\n"] }]
|
|
7070
7070
|
}], function () { return [{ type: i0.ChangeDetectorRef }, { type: i1$5.DomSanitizer }]; }, { message: [{
|
|
7071
7071
|
type: Input
|
|
7072
7072
|
}], messagePlaceholder: [{
|
|
@@ -8115,6 +8115,7 @@ class DrChatFormDropdownComponent {
|
|
|
8115
8115
|
this.send = new EventEmitter();
|
|
8116
8116
|
this.uploadFiles = new EventEmitter();
|
|
8117
8117
|
this.abort = new EventEmitter();
|
|
8118
|
+
this.filesRejected = new EventEmitter();
|
|
8118
8119
|
/**
|
|
8119
8120
|
* Emits when message input value has been changed
|
|
8120
8121
|
*
|
|
@@ -8130,7 +8131,7 @@ class DrChatFormDropdownComponent {
|
|
|
8130
8131
|
this.fileOver = false;
|
|
8131
8132
|
const files = event.dataTransfer?.files;
|
|
8132
8133
|
if (files) {
|
|
8133
|
-
this.saveFiles(files);
|
|
8134
|
+
this.saveFiles(Array.from(files));
|
|
8134
8135
|
}
|
|
8135
8136
|
}
|
|
8136
8137
|
}
|
|
@@ -8200,15 +8201,59 @@ class DrChatFormDropdownComponent {
|
|
|
8200
8201
|
}
|
|
8201
8202
|
async saveFiles(files) {
|
|
8202
8203
|
const uploadedFiles = [];
|
|
8204
|
+
const tooLargeFiles = [];
|
|
8205
|
+
const unsupportedFiles = [];
|
|
8206
|
+
const allowedExtensions = this.getAllowedExtensions();
|
|
8207
|
+
let maxExceeded = false;
|
|
8208
|
+
const remainingSlotsInit = Math.max(0, this.maxFilesCount - this.droppedFiles$.value.length);
|
|
8209
|
+
if (files.length > remainingSlotsInit) {
|
|
8210
|
+
this.filesRejected.emit({ oversize: [], unsupported: [], maxExceeded: true });
|
|
8211
|
+
return;
|
|
8212
|
+
}
|
|
8213
|
+
let remainingSlots = remainingSlotsInit;
|
|
8203
8214
|
for (const file of files) {
|
|
8204
|
-
|
|
8215
|
+
if (remainingSlots <= 0) {
|
|
8216
|
+
maxExceeded = true;
|
|
8217
|
+
continue;
|
|
8218
|
+
}
|
|
8219
|
+
const fileExtension = this.getFileExtension(file.name);
|
|
8220
|
+
const isAllowedByType = !allowedExtensions || allowedExtensions.has(fileExtension);
|
|
8221
|
+
if (!isAllowedByType) {
|
|
8222
|
+
unsupportedFiles.push(file.name);
|
|
8223
|
+
continue;
|
|
8224
|
+
}
|
|
8225
|
+
if (file.size > this.maxFileSizeBytes) {
|
|
8226
|
+
tooLargeFiles.push(file.name);
|
|
8227
|
+
continue;
|
|
8228
|
+
}
|
|
8229
|
+
const res = file;
|
|
8205
8230
|
res.data = (await this.base64Convert(res));
|
|
8206
8231
|
this.droppedFiles$.next([...this.droppedFiles$.value, res]);
|
|
8207
8232
|
uploadedFiles.push(res);
|
|
8233
|
+
remainingSlots--;
|
|
8208
8234
|
this.cdr.markForCheck();
|
|
8209
8235
|
this.cdr.detectChanges();
|
|
8210
8236
|
}
|
|
8211
|
-
|
|
8237
|
+
if (tooLargeFiles.length || unsupportedFiles.length || maxExceeded) {
|
|
8238
|
+
this.filesRejected.emit({ oversize: tooLargeFiles, unsupported: unsupportedFiles, maxExceeded });
|
|
8239
|
+
}
|
|
8240
|
+
if (uploadedFiles.length) {
|
|
8241
|
+
this.uploadFiles.emit(uploadedFiles.map((item) => ({ data: item.data, name: item.name })));
|
|
8242
|
+
}
|
|
8243
|
+
}
|
|
8244
|
+
getAllowedExtensions() {
|
|
8245
|
+
if (!this.acceptFormatFiles || !this.acceptFormatFiles.trim())
|
|
8246
|
+
return null;
|
|
8247
|
+
const parts = this.acceptFormatFiles
|
|
8248
|
+
.split(',')
|
|
8249
|
+
.map((p) => p.trim().toLowerCase())
|
|
8250
|
+
.filter(Boolean)
|
|
8251
|
+
.map((p) => (p.startsWith('.') ? p.slice(1) : p));
|
|
8252
|
+
return parts.length ? new Set(parts) : null;
|
|
8253
|
+
}
|
|
8254
|
+
getFileExtension(fileName) {
|
|
8255
|
+
const idx = fileName.lastIndexOf('.');
|
|
8256
|
+
return idx >= 0 ? fileName.slice(idx + 1).toLowerCase() : '';
|
|
8212
8257
|
}
|
|
8213
8258
|
base64Convert(file) {
|
|
8214
8259
|
return new Promise((resolve, reject) => {
|
|
@@ -8230,7 +8275,7 @@ class DrChatFormDropdownComponent {
|
|
|
8230
8275
|
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); });
|
|
8231
8276
|
} if (rf & 2) {
|
|
8232
8277
|
i0.ɵɵclassProp("file-over", ctx.fileOver);
|
|
8233
|
-
} }, 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:
|
|
8278
|
+
} }, 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) {
|
|
8234
8279
|
i0.ɵɵprojectionDef(_c2$5);
|
|
8235
8280
|
i0.ɵɵelementStart(0, "div", 0)(1, "div", 1);
|
|
8236
8281
|
i0.ɵɵpipe(2, "async");
|
|
@@ -8254,16 +8299,18 @@ class DrChatFormDropdownComponent {
|
|
|
8254
8299
|
} if (rf & 2) {
|
|
8255
8300
|
const _r1 = i0.ɵɵreference(7);
|
|
8256
8301
|
let tmp_1_0;
|
|
8257
|
-
i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(
|
|
8302
|
+
i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(16, _c3$3, ctx.isUploadingFiles));
|
|
8258
8303
|
i0.ɵɵadvance(1);
|
|
8259
|
-
i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction2(
|
|
8304
|
+
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));
|
|
8260
8305
|
i0.ɵɵadvance(2);
|
|
8261
|
-
i0.ɵɵproperty("ngIf", i0.ɵɵpipeBind1(4,
|
|
8306
|
+
i0.ɵɵproperty("ngIf", i0.ɵɵpipeBind1(4, 14, ctx.droppedFiles$).length);
|
|
8262
8307
|
i0.ɵɵadvance(3);
|
|
8263
8308
|
i0.ɵɵstyleMap(ctx.getTextAreaHeight(_r1));
|
|
8264
8309
|
i0.ɵɵpropertyInterpolate("placeholder", ctx.fileOver ? ctx.dropFilePlaceholder : ctx.messagePlaceholder);
|
|
8265
8310
|
i0.ɵɵproperty("ngModel", ctx.message)("rows", 1);
|
|
8266
|
-
i0.ɵɵadvance(
|
|
8311
|
+
i0.ɵɵadvance(5);
|
|
8312
|
+
i0.ɵɵproperty("accept", ctx.acceptFormatFiles);
|
|
8313
|
+
i0.ɵɵadvance(2);
|
|
8267
8314
|
i0.ɵɵproperty("ngIf", !ctx.waitForReply);
|
|
8268
8315
|
i0.ɵɵadvance(1);
|
|
8269
8316
|
i0.ɵɵproperty("ngIf", ctx.waitForReply && !ctx.showDotFlashing);
|
|
@@ -8273,13 +8320,19 @@ class DrChatFormDropdownComponent {
|
|
|
8273
8320
|
}
|
|
8274
8321
|
(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DrChatFormDropdownComponent, [{
|
|
8275
8322
|
type: Component,
|
|
8276
|
-
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
|
|
8323
|
+
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"] }]
|
|
8277
8324
|
}], function () { return [{ type: i0.ChangeDetectorRef }, { type: i1$5.DomSanitizer }]; }, { textAreaElementRef: [{
|
|
8278
8325
|
type: ViewChild,
|
|
8279
8326
|
args: ['textAreaElement']
|
|
8280
8327
|
}], fileInput: [{
|
|
8281
8328
|
type: ViewChild,
|
|
8282
8329
|
args: ['fileInput']
|
|
8330
|
+
}], acceptFormatFiles: [{
|
|
8331
|
+
type: Input
|
|
8332
|
+
}], maxFileSizeBytes: [{
|
|
8333
|
+
type: Input
|
|
8334
|
+
}], maxFilesCount: [{
|
|
8335
|
+
type: Input
|
|
8283
8336
|
}], isUploadingFiles: [{
|
|
8284
8337
|
type: Input
|
|
8285
8338
|
}], message: [{
|
|
@@ -8300,6 +8353,8 @@ class DrChatFormDropdownComponent {
|
|
|
8300
8353
|
type: Output
|
|
8301
8354
|
}], abort: [{
|
|
8302
8355
|
type: Output
|
|
8356
|
+
}], filesRejected: [{
|
|
8357
|
+
type: Output
|
|
8303
8358
|
}], inputChange: [{
|
|
8304
8359
|
type: Output
|
|
8305
8360
|
}], fileOver: [{
|