@datarailsshared/datarailsshared 1.4.95 → 1.4.98

package/fesm2015/datarailsshared-datarailsshared.js

@@ -22,6 +22,7 @@ import { MatButtonToggleModule } from '@angular/material/button-toggle';
 import { NgSelectModule } from '@ng-select/ng-select';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { MatTabsModule } from '@angular/material/tabs';
+import { DomSanitizer } from '@angular/platform-browser';
 
 // import {*} from ""
 class DateTagComponent {
@@ -250,7 +251,7 @@ const MONTH_FORMATS = {
         monthYearA11yLabel: 'MMMM YYYY'
     },
 };
-const ɵ0$6 = MONTH_FORMATS;
+const ɵ0$7 = MONTH_FORMATS;
 class MonthTagComponent extends AnyTagComponent {
     constructor() {
         super();
@@ -309,7 +310,7 @@ MonthTagComponent.decorators = [
                         useClass: MomentDateAdapter,
                         deps: [MAT_DATE_LOCALE, MAT_MOMENT_DATE_ADAPTER_OPTIONS],
                     },
-                    { provide: MAT_DATE_FORMATS, useValue: ɵ0$6 },
+                    { provide: MAT_DATE_FORMATS, useValue: ɵ0$7 },
                 ]
             },] }
 ];
@@ -431,7 +432,7 @@ const WEEK_FORMATS = {
         monthYearA11yLabel: 'MMMM YYYY'
     },
 };
-const ɵ0$5 = WEEK_FORMATS;
+const ɵ0$6 = WEEK_FORMATS;
 class WeekTagComponent extends AnyTagComponent {
     constructor() {
         super();
@@ -527,7 +528,7 @@ WeekTagComponent.decorators = [
                         useClass: MomentDateAdapter,
                         deps: [MAT_DATE_LOCALE, MAT_MOMENT_DATE_ADAPTER_OPTIONS],
                     },
-                    { provide: MAT_DATE_FORMATS, useValue: ɵ0$5 },
+                    { provide: MAT_DATE_FORMATS, useValue: ɵ0$6 },
                 ]
             },] }
 ];
@@ -549,7 +550,7 @@ const YEAR_FORMATS = {
         monthYearA11yLabel: 'MMMM YYYY'
     },
 };
-const ɵ0$4 = YEAR_FORMATS;
+const ɵ0$5 = YEAR_FORMATS;
 class YearTagComponent extends AnyTagComponent {
     constructor() {
         super();
@@ -614,7 +615,7 @@ YearTagComponent.decorators = [
                         useClass: MomentDateAdapter,
                         deps: [MAT_DATE_LOCALE, MAT_MOMENT_DATE_ADAPTER_OPTIONS],
                     },
-                    { provide: MAT_DATE_FORMATS, useValue: ɵ0$4 },
+                    { provide: MAT_DATE_FORMATS, useValue: ɵ0$5 },
                 ]
             },] }
 ];
@@ -728,7 +729,7 @@ const DAY_FORMATS = {
         monthYearA11yLabel: 'MMMM YYYY'
     },
 };
-const ɵ0$3 = DAY_FORMATS;
+const ɵ0$4 = DAY_FORMATS;
 class DayTagComponent extends AnyTagComponent {
     constructor() {
         super();
@@ -779,7 +780,7 @@ DayTagComponent.decorators = [
                         useClass: MomentDateAdapter,
                         deps: [MAT_DATE_LOCALE, MAT_MOMENT_DATE_ADAPTER_OPTIONS],
                     },
-                    { provide: MAT_DATE_FORMATS, useValue: ɵ0$3 },
+                    { provide: MAT_DATE_FORMATS, useValue: ɵ0$4 },
                 ]
             },] }
 ];
@@ -1314,7 +1315,7 @@ class DrSelectComponent {
 DrSelectComponent.decorators = [
     { type: Component, args: [{
                 selector: 'dr-select',
-                template: "<ng-select [(ngModel)]=\"selectedItem\"\n           [items]=\"items\"\n           [bindLabel]=\"bindLabel\"\n           [bindValue]=\"bindValue\"\n           [multiple]=\"multiple\"\n           [addTag]=\"addTag\"\n           [appendTo]=\"appendTo\"\n           [clearable]=\"clearable\"\n           [searchable]=\"searchable\"\n           [hideSelected]=\"hideSelected\"\n           [placeholder]=\"placeholder\"\n           [loading]=\"loading\"\n           [readonly]=\"readonly\"\n           [disabled]=\"disabled\"\n           [id]=\"id\"\n           [keyDownFn]=\"keyDownFn\"\n           [searchFn]=\"searchFn\"\n           [isOpen]=\"isOpen\"\n           [groupBy]=\"groupBy\"\n           [attr.autofocus]=\"autofocus\"\n           (change)=\"onChange(selectedItem); change.emit(selectedItem)\"\n           (open)=\"open.emit($event)\"\n           class=\"dr-select\">\n    <ng-template *ngIf=\"optionHeaderTemplate\" ng-header-tmp let-item=\"item\">\n        <ng-container [ngTemplateOutlet]=\"optionHeaderTemplate\" [ngTemplateOutletContext]=\"{item: item}\"></ng-container>\n    </ng-template>\n    <ng-template *ngIf=\"labelTemplate\" ng-label-tmp let-item=\"item\">\n        <ng-container [ngTemplateOutlet]=\"labelTemplate\" [ngTemplateOutletContext]=\"{item: item}\"></ng-container>\n    </ng-template>\n    <ng-template *ngIf=\"optionTemplate\" ng-option-tmp let-item=\"item\">\n        <ng-container [ngTemplateOutlet]=\"optionTemplate\" [ngTemplateOutletContext]=\"{item: item}\"></ng-container>\n    </ng-template>\n    <ng-template *ngIf=\"optionWithDescription\" ng-option-tmp let-item=\"item\">\n        <div class=\"dr-select__option-with-desc__wrapper\">\n            <div>{{ item.name }}</div>\n            <div class=\"dr-select__option-with-desc__description\"\n            >{{ item?.description }}</div>\n        </div>\n    </ng-template>\n    <ng-template *ngIf=\"optionFooterTemplate\" ng-footer-tmp let-item=\"item\">\n        <ng-container [ngTemplateOutlet]=\"optionFooterTemplate\" [ngTemplateOutletContext]=\"{item: item}\"></ng-container>\n    </ng-template>\n    <ng-template *ngIf=\"groupBy\" ng-optgroup-tmp let-item=\"item\">\n        {{ item[groupBy] }}\n    </ng-template>\n</ng-select>\n",
+                template: "<ng-select [(ngModel)]=\"selectedItem\"\n           [items]=\"items\"\n           [bindLabel]=\"bindLabel\"\n           [bindValue]=\"bindValue\"\n           [multiple]=\"multiple\"\n           [addTag]=\"addTag\"\n           [appendTo]=\"appendTo\"\n           [clearable]=\"clearable\"\n           [searchable]=\"searchable\"\n           [hideSelected]=\"hideSelected\"\n           [placeholder]=\"placeholder\"\n           [loading]=\"loading\"\n           [readonly]=\"readonly\"\n           [disabled]=\"disabled\"\n           [id]=\"id\"\n           [keyDownFn]=\"keyDownFn\"\n           [searchFn]=\"searchFn\"\n           [isOpen]=\"isOpen\"\n           [groupBy]=\"groupBy\"\n           [attr.autofocus]=\"autofocus\"\n           (change)=\"onChange(selectedItem); change.emit(selectedItem)\"\n           (open)=\"open.emit($event)\"\n           class=\"dr-select\"\n           #selectComponent>\n    <ng-template *ngIf=\"optionHeaderTemplate\" ng-header-tmp let-item=\"item\">\n        <ng-container [ngTemplateOutlet]=\"optionHeaderTemplate\" [ngTemplateOutletContext]=\"{item: item}\"></ng-container>\n    </ng-template>\n    <ng-template *ngIf=\"labelTemplate\" ng-label-tmp let-item=\"item\">\n        <ng-container [ngTemplateOutlet]=\"labelTemplate\" [ngTemplateOutletContext]=\"{item: item}\"></ng-container>\n    </ng-template>\n    <ng-template *ngIf=\"optionTemplate\" ng-option-tmp let-item=\"item\">\n        <ng-container [ngTemplateOutlet]=\"optionTemplate\" [ngTemplateOutletContext]=\"{item: item}\"></ng-container>\n    </ng-template>\n    <ng-template *ngIf=\"optionWithDescription\" ng-option-tmp let-item=\"item\">\n        <div class=\"dr-select__option-with-desc__wrapper\">\n            <div>{{ item.name }}</div>\n            <div class=\"dr-select__option-with-desc__description\"\n            >{{ item?.description }}</div>\n        </div>\n    </ng-template>\n    <ng-template *ngIf=\"optionFooterTemplate\" ng-footer-tmp let-item=\"item\">\n        <ng-container [ngTemplateOutlet]=\"optionFooterTemplate\" [ngTemplateOutletContext]=\"{ item: item, close: selectComponent.close.bind(selectComponent) }\"></ng-container>\n    </ng-template>\n    <ng-template *ngIf=\"groupBy\" ng-optgroup-tmp let-item=\"item\">\n        {{ item[groupBy] }}\n    </ng-template>\n</ng-select>\n",
                 providers: [{
                         provide: NG_VALUE_ACCESSOR,
                         useExisting: DrSelectComponent,
@@ -3137,7 +3138,7 @@ class DialogModalWrapperComponent {
 DialogModalWrapperComponent.decorators = [
     { type: Component, args: [{
                 selector: 'dr-dialog-modal-wrapper',
-                template: "<div header class=\"header-dialog\">\n    <h1 class=\"title-dialog\" data-test=\"modalTitle\">{{dialogData.title}}</h1>\n    <i mat-icon-button *ngIf=\"!dialogData.hideCloseBtn\" (click)=\"closeDialog()\" class=\"dr-icon-exit icon-close\"\n       data-test=\"xBtn\"></i>\n</div>\n<div *ngIf=\"dialogData.content\" class=\"content-dialog\">\n    <ng-container>{{dialogData.content}}</ng-container>\n    <span #content class=\"content-anchor\"></span>\n</div>\n<form *ngIf=\"dialogData.fields\" [formGroup]=\"form\" class=\"dr-smart-from\">\n    <div class=\"dr-smart-form_wrapper\">\n        <div *ngFor=\"let field of dialogData.fields\" class=\"dr-smart-form_group\"\n             [ngStyle]=\"{'display': field.isLabelFullWidth ? 'block' : 'flex'}\">\n            <label *ngIf=\"field.label\" [ngClass]=\"field.isLabelFullWidth ? 'col-md-12 mb-2' : 'col-md-2'\"\n                   class=\"label p-0 d-flex align-items-center\">{{field.label}}</label>\n            <div class=\"input-group p-0\"\n                 [ngClass]=\"{'col-md-10': field.label && !field.isLabelFullWidth, 'col-md-12': !field.label || field.isLabelFullWidth}\">\n                <dr-select *ngIf=\"field.type === '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                           [required]=\"true\"\n                           [placeholder]=\"field.placeholder\">\n                    <ng-template *ngIf=\"dialogData?.footerTemplateData\" #optionFooterTemplate>\n                        <button (click)=\"footerAction()\" class=\"dr-select-footer__btn\">\n                            <i *ngIf=\"dialogData.footerTemplateData.icon\"\n                               class=\"{{dialogData.footerTemplateData.icon}}\"></i>\n                            {{dialogData.footerTemplateData.label}}</button>\n                    </ng-template>\n                </dr-select>\n                <dr-input *ngIf=\"field.type === 'input'\" data-test=\"modalInput\" class=\"form-control\"\n                          [formControlName]=\"field.name\" [placeholder]=\"field.placeholder\"></dr-input>\n                <label class=\"form-error-alert\" *ngIf=\"dialogData.errorMessage && !form.pristine && form.invalid\">\n                    {{dialogData.errorMessage}}\n                </label>\n                <label class=\"form-error-alert\"\n                       *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 *ngIf=\"dialogData.cancelButton\" data-test=\"modalCloseBtn\" (click)=\"closeDialog()\"\n                   [theme]=\"'secondary'\"> {{dialogData.cancelButton.label}}</dr-button>\n        <dr-button *ngIf=\"dialogData.acceptButton\" data-test=\"modalAddBtn\" (click)=\"onAccept()\" [theme]=\"'primary'\"\n                   [isLoading]=\"isLoading\" [disabled]=\"form.invalid\"> {{dialogData.acceptButton.label}}</dr-button>\n    </div>\n</div>\n",
+                template: "<div header class=\"header-dialog\">\n    <h1 class=\"title-dialog\" data-test=\"modalTitle\">{{dialogData.title}}</h1>\n    <i mat-icon-button *ngIf=\"!dialogData.hideCloseBtn\" (click)=\"closeDialog()\" class=\"dr-icon-exit icon-close\"\n       data-test=\"xBtn\"></i>\n</div>\n<div *ngIf=\"dialogData.content\" class=\"content-dialog\">\n    <ng-container>{{dialogData.content}}</ng-container>\n    <span #content class=\"content-anchor\"></span>\n</div>\n<form *ngIf=\"dialogData.fields\" [formGroup]=\"form\" class=\"dr-smart-from\">\n    <div class=\"dr-smart-form_wrapper\">\n        <div *ngFor=\"let field of dialogData.fields\" class=\"dr-smart-form_group\"\n             [ngStyle]=\"{'display': field.isLabelFullWidth ? 'block' : 'flex'}\">\n            <label *ngIf=\"field.label\" [ngClass]=\"field.isLabelFullWidth ? 'col-md-12 mb-2' : 'col-md-2'\"\n                   class=\"label p-0 d-flex align-items-center\">{{field.label}}</label>\n            <div class=\"input-group p-0\"\n                 [ngClass]=\"{'col-md-10': field.label && !field.isLabelFullWidth, 'col-md-12': !field.label || field.isLabelFullWidth}\">\n                <dr-select *ngIf=\"field.type === '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                           [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\"\n                               class=\"{{dialogData.footerTemplateData.icon}}\"></i>\n                            {{dialogData.footerTemplateData.label}}</button>\n                    </ng-template>\n                </dr-select>\n                <dr-input *ngIf=\"field.type === 'input'\" data-test=\"modalInput\" class=\"form-control\"\n                          [formControlName]=\"field.name\" [placeholder]=\"field.placeholder\"></dr-input>\n                <label class=\"form-error-alert\" *ngIf=\"dialogData.errorMessage && !form.pristine && form.invalid\">\n                    {{dialogData.errorMessage}}\n                </label>\n                <label class=\"form-error-alert\"\n                       *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 *ngIf=\"dialogData.cancelButton\" data-test=\"modalCloseBtn\" (click)=\"closeDialog()\"\n                   [theme]=\"'secondary'\"> {{dialogData.cancelButton.label}}</dr-button>\n        <dr-button *ngIf=\"dialogData.acceptButton\" data-test=\"modalAddBtn\" (click)=\"onAccept()\" [theme]=\"'primary'\"\n                   [isLoading]=\"isLoading\" [disabled]=\"form.invalid\"> {{dialogData.acceptButton.label}}</dr-button>\n    </div>\n</div>\n",
                 styles: [":host{display:flex;justify-content:space-between;flex-direction:column}:host.small-modal{min-height:188px;max-height:467px;min-width:400px;max-width:400px}:host.medium-modal{min-height:188px;max-height:467px;min-width:632px;max-width:632px}.header-dialog{display:flex;flex-direction:row;justify-content:space-between;align-items:center;padding:8px 39px 8px 32px;border-bottom:1px solid #e5e6ea}.title-dialog{color:#151b3f;position:static;font-weight:bold;font-size:18px;line-height:24px}.content-dialog{font-weight:400;font-size:14px;padding:16px 32px 5px}.icon-close{color:#51566f;cursor:pointer}.dr-smart-from{font-size:14px;font-weight:500;line-height:22px;padding:16px 32px 22px}.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 #e5e6ea}.buttons-wrapper{display:flex;justify-content:flex-end;padding-top:10px;padding-right:32px;padding-bottom:11px}.buttons-wrapper dr-button:nth-of-type(2){margin-left:12px}.form-error-alert{position:absolute;margin-top:5px;font-size:12px;color:red}.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"]
             },] }
 ];
@@ -3348,6 +3349,39 @@ var CalendarView;
     CalendarView["FOR_YEARS"] = "multi-year";
 })(CalendarView || (CalendarView = {}));
 
+const IMAGE_TYPES = ['image/png', 'image/jpeg', 'image/gif'];
+var CHAT_MESSAGE_TYPE;
+(function (CHAT_MESSAGE_TYPE) {
+    CHAT_MESSAGE_TYPE["TEXT"] = "text";
+    CHAT_MESSAGE_TYPE["RICH_TEXT"] = "rich-text";
+    CHAT_MESSAGE_TYPE["IMAGE"] = "image";
+    CHAT_MESSAGE_TYPE["DOWNLOAD_FILE"] = "download-file";
+    CHAT_MESSAGE_TYPE["MAILTO"] = "mailto";
+    CHAT_MESSAGE_TYPE["EMBED"] = "embed";
+    CHAT_MESSAGE_TYPE["WIDGET"] = "widget";
+    CHAT_MESSAGE_TYPE["INPUT"] = "input";
+    CHAT_MESSAGE_TYPE["CODE"] = "code";
+})(CHAT_MESSAGE_TYPE || (CHAT_MESSAGE_TYPE = {}));
+class ChatMessage {
+    constructor(obj, user) {
+        this.id = obj === null || obj === void 0 ? void 0 : obj.id;
+        this.kind = obj === null || obj === void 0 ? void 0 : obj.kind;
+        this.seq = obj === null || obj === void 0 ? void 0 : obj.seq;
+        this.conversationId = obj === null || obj === void 0 ? void 0 : obj.conversationId;
+        this.reply = (obj === null || obj === void 0 ? void 0 : obj.senderId) !== user.id;
+        this.senderId = obj === null || obj === void 0 ? void 0 : obj.senderId;
+        this.parentId = obj === null || obj === void 0 ? void 0 : obj.parentId;
+        this.text = (obj === null || obj === void 0 ? void 0 : obj.text) || obj.body;
+        this.paragraphs = obj === null || obj === void 0 ? void 0 : obj.paragraphs;
+        this.url = obj === null || obj === void 0 ? void 0 : obj.url;
+        this.label = obj === null || obj === void 0 ? void 0 : obj.label;
+        this.subject = obj === null || obj === void 0 ? void 0 : obj.subject;
+        this.body = obj === null || obj === void 0 ? void 0 : obj.body;
+        this.form = obj === null || obj === void 0 ? void 0 : obj.form;
+        this.parameters = obj === null || obj === void 0 ? void 0 : obj.parameters;
+    }
+}
+
 const components$3 = [DateTagComponent,
     DayTagComponent,
     WeekTagComponent,
@@ -3356,7 +3390,7 @@ const components$3 = [DateTagComponent,
     AnyTagComponent,
     YearTagComponent,
     ForecastTagComponent];
-const ɵ0$2 = { useUtc: true };
+const ɵ0$3 = { useUtc: true };
 class DateTagModule {
 }
 DateTagModule.decorators = [
@@ -3374,7 +3408,7 @@ DateTagModule.decorators = [
                 ],
                 exports: components$3,
                 providers: [
-                    { provide: MAT_MOMENT_DATE_ADAPTER_OPTIONS, useValue: ɵ0$2 }
+                    { provide: MAT_MOMENT_DATE_ADAPTER_OPTIONS, useValue: ɵ0$3 }
                 ],
                 declarations: components$3,
             },] }
@@ -3636,7 +3670,7 @@ DrDatePickerCustomHeaderComponent.ctorParameters = () => [
 const moment = require('moment');
 const noop = () => {
 };
-const ɵ0$1 = noop;
+const ɵ0$2 = noop;
 class DrDatePickerComponent {
     constructor(cdr, dateAdapter, datePickerService) {
         this.cdr = cdr;
@@ -4290,7 +4324,7 @@ DrStepperModule.decorators = [
             },] }
 ];
 
-const ɵ0 = {}, ɵ1 = {};
+const ɵ0$1 = {}, ɵ1 = {};
 class DrDialogModule {
 }
 DrDialogModule.decorators = [
@@ -4305,18 +4339,433 @@ DrDialogModule.decorators = [
                 ],
                 exports: [DialogWrapperComponent, DialogModalWrapperComponent],
                 providers: [
-                    { provide: MatDialogRef, useValue: ɵ0 },
+                    { provide: MatDialogRef, useValue: ɵ0$1 },
                     { provide: MAT_DIALOG_DATA, useValue: ɵ1 },
                     DialogService
                 ]
             },] }
 ];
 
+class DrChatFormComponent {
+    constructor(cdr, domSanitizer) {
+        this.cdr = cdr;
+        this.domSanitizer = domSanitizer;
+        this.inputFocus = false;
+        this.inputHover = false;
+        this.droppedFiles = [];
+        /**
+         * 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';
+        /**
+         *
+         * @type {EventEmitter<{ message: string, files: File[] }>}
+         */
+        this.send = new EventEmitter();
+        /**
+         * Emits when message input value has been changed
+         *
+         * @type {EventEmitter<string>}
+         */
+        this.inputChange = new EventEmitter();
+        this.fileOver = false;
+    }
+    onDrop(event) {
+        var _a;
+        if (this.dropFiles) {
+            event.preventDefault();
+            event.stopPropagation();
+            this.fileOver = false;
+            if ((_a = event.dataTransfer) === null || _a === void 0 ? void 0 : _a.files) {
+                for (const file of event.dataTransfer.files) {
+                    const res = file;
+                    if (IMAGE_TYPES.includes(file.type)) {
+                        const fr = new FileReader();
+                        fr.onload = (e) => {
+                            res.src = e.target.result;
+                            res.urlStyle = this.domSanitizer.bypassSecurityTrustStyle(`url(${res.src})`);
+                            this.cdr.detectChanges();
+                        };
+                        fr.readAsDataURL(file);
+                    }
+                    this.droppedFiles.push(res);
+                }
+            }
+        }
+    }
+    removeFile(file) {
+        const index = this.droppedFiles.indexOf(file);
+        if (index >= 0) {
+            this.droppedFiles.splice(index, 1);
+        }
+    }
+    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() {
+        if (this.droppedFiles.length || String(this.message).trim().length) {
+            this.send.emit({ message: this.message, files: this.droppedFiles });
+            this.message = '';
+            this.droppedFiles = [];
+            this.cdr.markForCheck();
+        }
+    }
+    onModelChange(value) {
+        this.inputChange.emit(value);
+    }
+}
+DrChatFormComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'dr-chat-form',
+                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    <dr-input (focus)=\"inputFocus = true\"\n              (blur)=\"inputFocus = false\"\n              (mouseenter)=\"inputHover = true\"\n              (mouseleave)=\"inputHover = false\"\n              [(ngModel)]=\"message\"\n              (ngModelChange)=\"onModelChange($event)\"\n              type=\"text\"\n              placeholder=\"{{ fileOver ? dropFilePlaceholder : messagePlaceholder }}\"\n              (keyup.enter)=\"sendMessage()\">\n    </dr-input>\n    <dr-button (click)=\"sendMessage()\"\n               theme=\"icon\"\n               icon=\"dr-icon-notify\"\n               class=\"send-button\">\n    </dr-button>\n</div>\n",
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                styles: [":host{display:flex;flex-direction:column;padding:16px;border-top:1px solid #ccc}:host .message-row{flex-direction:row;display:flex;align-items:center}:host input{flex:1}:host input.with-button{border-bottom-right-radius:0;border-top-right-radius:0}:host .send-button{margin-left:10px}: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:white;border-radius:12px;color:#8f929e;border:1px solid #8f929e;font-size:14px}\n"]
+            },] }
+];
+DrChatFormComponent.ctorParameters = () => [
+    { type: ChangeDetectorRef },
+    { type: DomSanitizer }
+];
+DrChatFormComponent.propDecorators = {
+    message: [{ type: Input }],
+    messagePlaceholder: [{ type: Input }],
+    dropFiles: [{ type: Input }],
+    dropFilePlaceholder: [{ type: Input }],
+    send: [{ 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'],] }]
+};
+
+/**
+ * `DrCustomMessageService` is used to store instances of `DrChatCustomMessageDirective`s which
+ * were provided in the chat component.
+ */
+class DrChatCustomMessageService {
+    constructor() {
+        this.customMessages = new Map();
+    }
+    register(type, instance) {
+        this.customMessages.set(type, instance);
+    }
+    unregister(type) {
+        return this.customMessages.delete(type);
+    }
+    getInstance(type) {
+        return this.customMessages.get(type);
+    }
+}
+DrChatCustomMessageService.decorators = [
+    { type: Injectable }
+];
+
+class DrChatMessageComponent {
+    constructor(customMessageService) {
+        this.customMessageService = customMessageService;
+        this.MESSAGE_TYPE = CHAT_MESSAGE_TYPE;
+        this.MESSAGE_TYPE_CUSTOM = CHAT_MESSAGE_TYPE.EMBED;
+        this._reply = false;
+    }
+    get flyInOut() {
+        return true;
+    }
+    get notReply() {
+        return !this.reply;
+    }
+    /**
+     * Determines if a message is a reply
+     */
+    get reply() {
+        return this._reply;
+    }
+    set reply(value) {
+        this._reply = !!value;
+    }
+    getTemplate() {
+        this.customMessage = true;
+        const customMessage = this.getCustomMessage(this.type);
+        return customMessage.templateRef;
+    }
+    getTemplateContext() {
+        return { $implicit: this.customMessageData, isReply: this.reply };
+    }
+    getCustomMessage(type) {
+        const customMessageDirective = this.customMessageService.getInstance(type);
+        if (!customMessageDirective) {
+            throw new Error(`dr-chat: Can't find template for custom type '${type}'. ` +
+                `Make sure you provide it in the chat component with *drCustomMessage='${type}'.`);
+        }
+        return customMessageDirective;
+    }
+}
+DrChatMessageComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'dr-chat-message',
+                template: "<div class=\"message\" [class.message--custom]=\"customMessage\">\n    <ng-container [ngSwitch]=\"message.kind\">\n        <dr-chat-message-text *ngSwitchCase=\"MESSAGE_TYPE.TEXT\" [message]=\"message\"></dr-chat-message-text>\n        <dr-chat-message-rich-text *ngSwitchCase=\"MESSAGE_TYPE.RICH_TEXT\" [message]=\"message\"></dr-chat-message-rich-text>\n        <dr-chat-message-file *ngSwitchCase=\"MESSAGE_TYPE.DOWNLOAD_FILE\" [message]=\"message\"></dr-chat-message-file>\n        <ng-container *ngSwitchDefault>\n            <ng-container [ngTemplateOutlet]=\"getTemplate()\" [ngTemplateOutletContext]=\"getTemplateContext()\"></ng-container>\n        </ng-container>\n    </ng-container>\n</div>\n",
+                animations: [
+                    trigger('flyInOut', [
+                        state('in', style({ transform: 'translateX(0)' })),
+                        transition('void => *', [style({ transform: 'translateX(-100%)' }), animate(80)]),
+                        transition('* => void', [animate(80, style({ transform: 'translateX(100%)' }))]),
+                    ]),
+                ],
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                styles: [":host{display:flex;flex-direction:row}:host:not(:first-child){margin-top:8px}.reply+:host.reply,.not-reply+:host.not-reply{margin-top:3px}:host.not-reply{justify-content:flex-end}:host.not-reply .message{color:#fff;background-color:#4646ce}:host .message{display:flex;background-color:#f3f7ff;border-radius:8px;padding:16px;max-width:60%;width:auto}:host .message--custom{max-width:unset;width:80%}\n"]
+            },] }
+];
+DrChatMessageComponent.ctorParameters = () => [
+    { type: DrChatCustomMessageService }
+];
+DrChatMessageComponent.propDecorators = {
+    flyInOut: [{ type: HostBinding, args: ['@flyInOut',] }],
+    notReply: [{ type: HostBinding, args: ['class.not-reply',] }],
+    reply: [{ type: Input }, { type: HostBinding, args: ['class.reply',] }],
+    type: [{ type: Input }],
+    message: [{ type: Input }],
+    customMessageData: [{ type: Input }]
+};
+
+class DrChatComponent {
+    constructor(cdr) {
+        this.cdr = cdr;
+        this.noMessagesPlaceholder = 'No messages yet.';
+        this._scrollBottom = true;
+    }
+    /**
+     * Scroll chat to the bottom of the list when a new message arrives
+     */
+    get scrollBottom() {
+        return this._scrollBottom;
+    }
+    set scrollBottom(value) {
+        this._scrollBottom = !!value;
+    }
+    ngAfterViewInit() {
+        this.messages.changes.subscribe(messages => {
+            this.messages = messages;
+            this.updateView();
+        });
+        this.updateView();
+    }
+    updateView() {
+        if (this.scrollBottom) {
+            this.scrollListBottom();
+        }
+    }
+    scrollListBottom() {
+        setTimeout(() => {
+            this.messagesContainer.nativeElement.scrollTo({ top: this.messagesContainer.nativeElement.scrollHeight, behavior: 'smooth' });
+            this.cdr.markForCheck();
+        });
+    }
+}
+DrChatComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'dr-chat',
+                template: "<div class=\"header\">\n    {{ title }}\n</div>\n\n<div class=\"scrollable\">\n    <div class=\"messages\" #messagesContainer>\n        <ng-content select=\"dr-chat-message\"></ng-content>\n        <p class=\"no-messages\" *ngIf=\"!messages?.length\">{{ noMessagesPlaceholder }}</p>\n    </div>\n</div>\n\n<div class=\"form\">\n    <ng-content select=\"dr-chat-form\"></ng-content>\n</div>\n",
+                providers: [DrChatCustomMessageService],
+                styles: [":host{display:flex;flex-grow:1;flex-direction:column;position:relative;height:100%;background-color:#fff;border:1px solid #e5e6ea;border-radius:8px;box-shadow:0 4px 8px 1px #00000040;color:#151b3f;font-family:\"Poppins\",sans-serif;font-size:14px;font-weight:400;line-height:22px}:host .header{border-bottom:1px solid #e5e6ea;padding:16px 32px;font-weight:bold}:host .scrollable{display:flex;flex-grow:1;overflow-x:hidden;overflow-y:auto;height:100%;width:100%}:host .scrollable .messages{padding:16px;overflow-y:auto;overflow-x:hidden;display:flex;flex-shrink:0;flex-direction:column;width:100%}:host .scrollable .no-messages{text-align:center}\n"]
+            },] }
+];
+DrChatComponent.ctorParameters = () => [
+    { type: ChangeDetectorRef }
+];
+DrChatComponent.propDecorators = {
+    title: [{ type: Input }],
+    noMessagesPlaceholder: [{ type: Input }],
+    scrollBottom: [{ type: Input }],
+    messagesContainer: [{ type: ViewChild, args: ['messagesContainer',] }],
+    messages: [{ type: ContentChildren, args: [DrChatMessageComponent,] }],
+    chatForm: [{ type: ContentChild, args: [DrChatFormComponent,] }]
+};
+
+/**
+ * Chat text message component.
+ */
+class DrChatMessageTextComponent {
+}
+DrChatMessageTextComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'dr-chat-message-text',
+                template: "<div class=\"text\" *ngIf=\"message\">{{ message.text }}</div>\n",
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                styles: [":host{display:flex}:host .text{display:flex;word-break:break-word}\n"]
+            },] }
+];
+DrChatMessageTextComponent.propDecorators = {
+    message: [{ type: Input }]
+};
+
+/**
+ * Chat rich-text message component.
+ */
+class DrChatMessageRichTextComponent {
+}
+DrChatMessageRichTextComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'dr-chat-message-rich-text',
+                template: "<div class=\"paragraphs\">\n    <div *ngFor=\"let paragraph of message.paragraphs\"\n         class=\"paragraphs__item\"\n         [class]=\"paragraph.kind\"\n         [innerText]=\"paragraph.value\">\n    </div>\n</div>\n",
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                styles: [".paragraphs{display:flex;flex-direction:column}.paragraphs__item:not(:first-child){margin-top:8px}.paragraphs__item.code{display:flex;padding:4px;border:1px solid #8f929e;background:#ccc}\n"]
+            },] }
+];
+DrChatMessageRichTextComponent.propDecorators = {
+    message: [{ type: Input }]
+};
+
+/**
+ * Chat message component.
+ */
+class DrChatMessageFileComponent {
+    constructor(cd, domSanitizer) {
+        this.cd = cd;
+        this.domSanitizer = domSanitizer;
+    }
+    /**
+     * Message file path
+     *
+     * @type {Date}
+     */
+    set files(files) {
+        this.readyFiles = (files || []).map((file) => {
+            const isImage = this.isImage(file);
+            return Object.assign(Object.assign({}, file), { urlStyle: isImage && this.domSanitizer.bypassSecurityTrustStyle(`url(${file.url})`), isImage });
+        });
+        this.cd.detectChanges();
+    }
+    isImage(file) {
+        const type = file.type;
+        if (type) {
+            return IMAGE_TYPES.includes(type);
+        }
+        return false;
+    }
+}
+DrChatMessageFileComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'dr-chat-message-file',
+                template: "<div class=\"message-content-group\">\n    <a *ngFor=\"let file of readyFiles\" [href]=\"file.url\" target=\"_blank\">\n        <i class=\"dr-icon-file\" *ngIf=\"!file.urlStyle && file.icon\"></i>\n        <div *ngIf=\"file.urlStyle\" [style.background-image]=\"file.urlStyle\"></div>\n    </a>\n</div>\n",
+                changeDetection: ChangeDetectionStrategy.OnPush
+            },] }
+];
+DrChatMessageFileComponent.ctorParameters = () => [
+    { type: ChangeDetectorRef },
+    { type: DomSanitizer }
+];
+DrChatMessageFileComponent.propDecorators = {
+    message: [{ type: Input }],
+    files: [{ type: Input }]
+};
+
+const throwCustomMessageTypeIsRequired = () => {
+    throw new Error('[drCustomMessage]: custom message type is required.');
+};
+const ɵ0 = throwCustomMessageTypeIsRequired;
+class DrChatCustomMessageDirective {
+    constructor(templateRef, customMessageService) {
+        this.templateRef = templateRef;
+        this.customMessageService = customMessageService;
+    }
+    /**
+     * 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;
+    }
+    ngOnInit() {
+        if (!this._type) {
+            throwCustomMessageTypeIsRequired();
+        }
+        this.customMessageService.register(this.type, this);
+    }
+    ngOnDestroy() {
+        this.customMessageService.unregister(this.type);
+    }
+}
+DrChatCustomMessageDirective.decorators = [
+    { type: Directive, args: [{
+                selector: `[drCustomMessage]`,
+            },] }
+];
+DrChatCustomMessageDirective.ctorParameters = () => [
+    { type: TemplateRef },
+    { type: DrChatCustomMessageService }
+];
+DrChatCustomMessageDirective.propDecorators = {
+    drCustomMessage: [{ type: Input }]
+};
+
+const DR_CHAT_COMPONENTS = [
+    DrChatComponent,
+    DrChatMessageComponent,
+    DrChatFormComponent,
+    DrChatMessageTextComponent,
+    DrChatMessageFileComponent,
+    DrChatMessageRichTextComponent,
+];
+const DR_CHAT_DIRECTIVES = [DrChatCustomMessageDirective];
+class DrChatModule {
+}
+DrChatModule.decorators = [
+    { type: NgModule, args: [{
+                imports: [
+                    FormsModule,
+                    ReactiveFormsModule,
+                    CommonModule,
+                    DrAvatarModule,
+                    DrInputsModule
+                ],
+                declarations: [...DR_CHAT_COMPONENTS, ...DR_CHAT_DIRECTIVES],
+                exports: [...DR_CHAT_COMPONENTS, ...DR_CHAT_DIRECTIVES],
+            },] }
+];
+
 /* components */
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { AnyTagComponent, CalendarView, CheckboxComponent, CustomDateFormat, DIALOG_BUTTON_LABEL, DIALOG_FIELD_TYPE, DIALOG_SIZE, DateFromats, DatePickerPeriodPosition, DateTagComponent, DateTagModule, DayTagComponent, DialogService, DrAccordionComponent, DrAccordionItemBodyComponent, DrAccordionItemComponent, DrAccordionItemHeaderComponent, DrAccordionModule, DrAvatarComponent, DrAvatarModule, DrAvatarPipe, DrButtonComponent, DrDialogModule, DrDropdownComponent, DrDropdownDirective, DrDropdownItemShowPipe, DrDropdownModule, DrDropdownPositionDirective, DrDropdownService, DrErrorComponent, DrErrorModule, DrInputComponent, DrInputsModule, DrLayoutBodyComponent, DrLayoutComponent, DrLayoutHeaderComponent, DrLayoutModule, DrModelDebounceChangeDirective, DrPopoverAlignmentDimension, DrPopoverComponent, DrPopoverDirective, DrPopoverModule, DrPopoverRef, DrPopoverService, DrSelectComponent, DrSharedUtils, DrSpinnerComponent, DrSpinnerDirective, DrSpinnerModule, DrStepperModule, DrTabComponent, DrTabsComponent, DrTabsModule, DrTagComponent, DrTagModule, DrToggleButtonComponent, DrToggleComponent, DrTooltipDirective, DrTooltipModule, ForecastTagComponent, ListTagComponent, ListTagModule, MonthTagComponent, QuarterTagComponent, RadioButtonComponent, RadioGroupComponent, SpinnerSize, SpinnerType, TimeframeOption, TooltipComponent, TooltipPosition, WeekTagComponent, YearTagComponent, components$3 as ɵa, POPUP_ANIMATION as ɵb, DrDatePickerComponent as ɵc, DrDatePickerService as ɵd, DrDatePickerWithTimeframeComponent as ɵe, DrDatePickerFormatDirective as ɵf, DrDatePickerCustomHeaderComponent as ɵg, DrShowTimeframePipe as ɵh, TooltipInfoComponent as ɵi, TooltipInfoSimpleComponent as ɵj, TooltipNoBodyComponent as ɵk, TooltipProcessDefaultComponent as ɵl, StepperComponent as ɵm, DialogWrapperComponent as ɵn, DialogModalWrapperComponent as ɵo };
+export { AnyTagComponent, CHAT_MESSAGE_TYPE, CalendarView, ChatMessage, CheckboxComponent, CustomDateFormat, DIALOG_BUTTON_LABEL, DIALOG_FIELD_TYPE, DIALOG_SIZE, DateFromats, DatePickerPeriodPosition, DateTagComponent, DateTagModule, DayTagComponent, DialogService, DrAccordionComponent, DrAccordionItemBodyComponent, DrAccordionItemComponent, DrAccordionItemHeaderComponent, DrAccordionModule, DrAvatarComponent, DrAvatarModule, DrAvatarPipe, DrButtonComponent, DrChatModule, DrDialogModule, DrDropdownComponent, DrDropdownDirective, DrDropdownItemShowPipe, DrDropdownModule, DrDropdownPositionDirective, DrDropdownService, DrErrorComponent, DrErrorModule, DrInputComponent, DrInputsModule, DrLayoutBodyComponent, DrLayoutComponent, DrLayoutHeaderComponent, DrLayoutModule, DrModelDebounceChangeDirective, DrPopoverAlignmentDimension, DrPopoverComponent, DrPopoverDirective, DrPopoverModule, DrPopoverRef, DrPopoverService, DrSelectComponent, DrSharedUtils, DrSpinnerComponent, DrSpinnerDirective, DrSpinnerModule, DrStepperModule, DrTabComponent, DrTabsComponent, DrTabsModule, DrTagComponent, DrTagModule, DrToggleButtonComponent, DrToggleComponent, DrTooltipDirective, DrTooltipModule, ForecastTagComponent, IMAGE_TYPES, ListTagComponent, ListTagModule, MonthTagComponent, QuarterTagComponent, RadioButtonComponent, RadioGroupComponent, SpinnerSize, SpinnerType, TimeframeOption, TooltipComponent, TooltipPosition, WeekTagComponent, YearTagComponent, components$3 as ɵa, POPUP_ANIMATION as ɵb, DrDatePickerComponent as ɵc, DrDatePickerService as ɵd, DrDatePickerWithTimeframeComponent as ɵe, DrDatePickerFormatDirective as ɵf, DrDatePickerCustomHeaderComponent as ɵg, DrShowTimeframePipe as ɵh, TooltipInfoComponent as ɵi, TooltipInfoSimpleComponent as ɵj, TooltipNoBodyComponent as ɵk, TooltipProcessDefaultComponent as ɵl, StepperComponent as ɵm, DialogWrapperComponent as ɵn, DialogModalWrapperComponent as ɵo, DrChatComponent as ɵp, DrChatCustomMessageService as ɵq, DrChatMessageComponent as ɵr, DrChatFormComponent as ɵs, DrChatMessageTextComponent as ɵt, DrChatMessageFileComponent as ɵu, DrChatMessageRichTextComponent as ɵv, DrChatCustomMessageDirective as ɵw };
 //# sourceMappingURL=datarailsshared-datarailsshared.js.map