@datarailsshared/datarailsshared 1.4.95 → 1.4.100

package/bundles/datarailsshared-datarailsshared.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/forms'), require('@angular/material/core'), require('@angular/material-moment-adapter'), require('moment'), require('@angular/common'), require('rxjs'), require('rxjs/operators'), require('@angular/animations'), require('@angular/cdk/overlay'), require('@angular/cdk/portal'), require('@angular/material/dialog'), require('lodash'), require('@angular/material/datepicker'), require('@angular/material/form-field'), require('@angular/material/input'), require('@angular/material/select'), require('@angular/material/button-toggle'), require('@ng-select/ng-select'), require('@angular/material/tooltip'), require('@angular/material/tabs')) :
-    typeof define === 'function' && define.amd ? define('@datarailsshared/datarailsshared', ['exports', '@angular/core', '@angular/forms', '@angular/material/core', '@angular/material-moment-adapter', 'moment', '@angular/common', 'rxjs', 'rxjs/operators', '@angular/animations', '@angular/cdk/overlay', '@angular/cdk/portal', '@angular/material/dialog', 'lodash', '@angular/material/datepicker', '@angular/material/form-field', '@angular/material/input', '@angular/material/select', '@angular/material/button-toggle', '@ng-select/ng-select', '@angular/material/tooltip', '@angular/material/tabs'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.datarailsshared = global.datarailsshared || {}, global.datarailsshared.datarailsshared = {}), global.ng.core, global.ng.forms, global.ng.material.core, global.ng.materialMomentAdapter, global.momentImported, global.ng.common, global.rxjs, global.rxjs.operators, global.ng.animations, global.ng.cdk.overlay, global.ng.cdk.portal, global.ng.material.dialog, global._, global.ng.material.datepicker, global.ng.material.formField, global.ng.material.input, global.ng.material.select, global.ng.material.buttonToggle, global.ngSelect, global.ng.material.tooltip, global.ng.material.tabs));
-})(this, (function (exports, i0, forms, core, materialMomentAdapter, momentImported, common, rxjs, operators, animations, i1, portal, i1$1, _, datepicker, formField, input, select, buttonToggle, ngSelect, tooltip, tabs) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/forms'), require('@angular/material/core'), require('@angular/material-moment-adapter'), require('moment'), require('@angular/common'), require('rxjs'), require('rxjs/operators'), require('@angular/animations'), require('@angular/cdk/overlay'), require('@angular/cdk/portal'), require('@angular/material/dialog'), require('lodash'), require('@angular/material/datepicker'), require('@angular/material/form-field'), require('@angular/material/input'), require('@angular/material/select'), require('@angular/material/button-toggle'), require('@ng-select/ng-select'), require('@angular/material/tooltip'), require('@angular/material/tabs'), require('@angular/platform-browser')) :
+    typeof define === 'function' && define.amd ? define('@datarailsshared/datarailsshared', ['exports', '@angular/core', '@angular/forms', '@angular/material/core', '@angular/material-moment-adapter', 'moment', '@angular/common', 'rxjs', 'rxjs/operators', '@angular/animations', '@angular/cdk/overlay', '@angular/cdk/portal', '@angular/material/dialog', 'lodash', '@angular/material/datepicker', '@angular/material/form-field', '@angular/material/input', '@angular/material/select', '@angular/material/button-toggle', '@ng-select/ng-select', '@angular/material/tooltip', '@angular/material/tabs', '@angular/platform-browser'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.datarailsshared = global.datarailsshared || {}, global.datarailsshared.datarailsshared = {}), global.ng.core, global.ng.forms, global.ng.material.core, global.ng.materialMomentAdapter, global.momentImported, global.ng.common, global.rxjs, global.rxjs.operators, global.ng.animations, global.ng.cdk.overlay, global.ng.cdk.portal, global.ng.material.dialog, global._, global.ng.material.datepicker, global.ng.material.formField, global.ng.material.input, global.ng.material.select, global.ng.material.buttonToggle, global.ngSelect, global.ng.material.tooltip, global.ng.material.tabs, global.ng.platformBrowser));
+})(this, (function (exports, i0, forms, core, materialMomentAdapter, momentImported, common, rxjs, operators, animations, i1, portal, i1$1, _, datepicker, formField, input, select, buttonToggle, ngSelect, tooltip, tabs, platformBrowser) { 'use strict';
 
     function _interopNamespace(e) {
         if (e && e.__esModule) return e;
@@ -589,7 +589,7 @@
             monthYearA11yLabel: 'MMMM YYYY'
         },
     };
-    var ɵ0$6 = MONTH_FORMATS;
+    var ɵ0$7 = MONTH_FORMATS;
     var MonthTagComponent = /** @class */ (function (_super) {
         __extends(MonthTagComponent, _super);
         function MonthTagComponent() {
@@ -651,7 +651,7 @@
                             useClass: materialMomentAdapter.MomentDateAdapter,
                             deps: [core.MAT_DATE_LOCALE, materialMomentAdapter.MAT_MOMENT_DATE_ADAPTER_OPTIONS],
                         },
-                        { provide: core.MAT_DATE_FORMATS, useValue: ɵ0$6 },
+                        { provide: core.MAT_DATE_FORMATS, useValue: ɵ0$7 },
                     ]
                 },] }
     ];
@@ -787,7 +787,7 @@
             monthYearA11yLabel: 'MMMM YYYY'
         },
     };
-    var ɵ0$5 = WEEK_FORMATS;
+    var ɵ0$6 = WEEK_FORMATS;
     var WeekTagComponent = /** @class */ (function (_super) {
         __extends(WeekTagComponent, _super);
         function WeekTagComponent() {
@@ -887,7 +887,7 @@
                             useClass: materialMomentAdapter.MomentDateAdapter,
                             deps: [core.MAT_DATE_LOCALE, materialMomentAdapter.MAT_MOMENT_DATE_ADAPTER_OPTIONS],
                         },
-                        { provide: core.MAT_DATE_FORMATS, useValue: ɵ0$5 },
+                        { provide: core.MAT_DATE_FORMATS, useValue: ɵ0$6 },
                     ]
                 },] }
     ];
@@ -909,7 +909,7 @@
             monthYearA11yLabel: 'MMMM YYYY'
         },
     };
-    var ɵ0$4 = YEAR_FORMATS;
+    var ɵ0$5 = YEAR_FORMATS;
     var YearTagComponent = /** @class */ (function (_super) {
         __extends(YearTagComponent, _super);
         function YearTagComponent() {
@@ -977,7 +977,7 @@
                             useClass: materialMomentAdapter.MomentDateAdapter,
                             deps: [core.MAT_DATE_LOCALE, materialMomentAdapter.MAT_MOMENT_DATE_ADAPTER_OPTIONS],
                         },
-                        { provide: core.MAT_DATE_FORMATS, useValue: ɵ0$4 },
+                        { provide: core.MAT_DATE_FORMATS, useValue: ɵ0$5 },
                     ]
                 },] }
     ];
@@ -1093,7 +1093,7 @@
             monthYearA11yLabel: 'MMMM YYYY'
         },
     };
-    var ɵ0$3 = DAY_FORMATS;
+    var ɵ0$4 = DAY_FORMATS;
     var DayTagComponent = /** @class */ (function (_super) {
         __extends(DayTagComponent, _super);
         function DayTagComponent() {
@@ -1147,7 +1147,7 @@
                             useClass: materialMomentAdapter.MomentDateAdapter,
                             deps: [core.MAT_DATE_LOCALE, materialMomentAdapter.MAT_MOMENT_DATE_ADAPTER_OPTIONS],
                         },
-                        { provide: core.MAT_DATE_FORMATS, useValue: ɵ0$3 },
+                        { provide: core.MAT_DATE_FORMATS, useValue: ɵ0$4 },
                     ]
                 },] }
     ];
@@ -1757,7 +1757,7 @@
     DrSelectComponent.decorators = [
         { type: i0.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: forms.NG_VALUE_ACCESSOR,
                             useExisting: DrSelectComponent,
@@ -3706,7 +3706,7 @@
     DialogModalWrapperComponent.decorators = [
         { type: i0.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"]
                 },] }
     ];
@@ -3929,6 +3929,40 @@
         CalendarView["FOR_YEARS"] = "multi-year";
     })(exports.CalendarView || (exports.CalendarView = {}));
 
+    var IMAGE_TYPES = ['image/png', 'image/jpeg', 'image/gif'];
+    exports.CHAT_MESSAGE_TYPE = void 0;
+    (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";
+    })(exports.CHAT_MESSAGE_TYPE || (exports.CHAT_MESSAGE_TYPE = {}));
+    var ChatMessage = /** @class */ (function () {
+        function ChatMessage(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;
+        }
+        return ChatMessage;
+    }());
+
     var components$3 = [DateTagComponent,
         DayTagComponent,
         WeekTagComponent,
@@ -3937,7 +3971,7 @@
         AnyTagComponent,
         YearTagComponent,
         ForecastTagComponent];
-    var ɵ0$2 = { useUtc: true };
+    var ɵ0$3 = { useUtc: true };
     var DateTagModule = /** @class */ (function () {
         function DateTagModule() {
         }
@@ -3958,7 +3992,7 @@
                     ],
                     exports: components$3,
                     providers: [
-                        { provide: materialMomentAdapter.MAT_MOMENT_DATE_ADAPTER_OPTIONS, useValue: ɵ0$2 }
+                        { provide: materialMomentAdapter.MAT_MOMENT_DATE_ADAPTER_OPTIONS, useValue: ɵ0$3 }
                     ],
                     declarations: components$3,
                 },] }
@@ -4060,6 +4094,7 @@
                 quarter: exports.DateFromats.QUARTER_FORMAT,
                 week: exports.DateFromats.WEEK_FORMAT
             };
+            this.fiscalYearMonthsModifier = 0;
         }
         DrDatePickerService.prototype.getDisplayPrefix = function () {
             var formatCached = this.format$.getValue();
@@ -4086,6 +4121,94 @@
         DrDatePickerService.prototype.normalizeValue = function (value) {
             return value.replace(/d/g, 'D');
         };
+        /**
+         * Get quarter number for date according to fiscal year
+         *
+         * @param date
+         */
+        DrDatePickerService.prototype.getQuarterAccordingToFiscalYear = function (date) {
+            var fiscalMonth = this.fiscalYearMonthsModifier;
+            var dateMonth = date.month();
+            if (dateMonth < fiscalMonth) {
+                fiscalMonth -= 12;
+            }
+            return Math.trunc((date.month() - fiscalMonth) / 3) + 1;
+        };
+        /**
+         * Sets date to end of quarter in FY by passed quarter number
+         *
+         * @param date
+         * @param quarterNumber
+         */
+        DrDatePickerService.prototype.setEndOfQuarter = function (date, quarterNumber) {
+            date
+                .subtract(this.fiscalYearMonthsModifier, 'M')
+                .startOf('year')
+                .add(this.fiscalYearMonthsModifier + quarterNumber * 3 - 1, 'M')
+                .endOf('month');
+        };
+        /**
+         * Sets date to start of quarter in FY by passed quarter number
+         *
+         * @param date
+         * @param quarterNumber
+         */
+        DrDatePickerService.prototype.setStartOfQuarter = function (date, quarterNumber) {
+            date
+                .subtract(this.fiscalYearMonthsModifier, 'M')
+                .startOf('year')
+                .add(this.fiscalYearMonthsModifier + (quarterNumber - 1) * 3, 'M');
+        };
+        /**
+         * Sets date to end of current quarter (in which date is located) according to FY
+         *
+         * @param date
+         */
+        DrDatePickerService.prototype.setEndOfCurrentQuarter = function (date) {
+            this.setEndOfQuarter(date, this.getQuarterAccordingToFiscalYear(date));
+        };
+        /**
+         * Sets date to start of current quarter (in which date is located) according to FY
+         *
+         * @param date
+         */
+        DrDatePickerService.prototype.setStartOfCurrentQuarter = function (date) {
+            this.setStartOfQuarter(date, this.getQuarterAccordingToFiscalYear(date));
+        };
+        /**
+         * If date selection on this timeframe depends on Fiscal Year
+         *
+         * @param timeframe
+         */
+        DrDatePickerService.prototype.isTimeframeDependingOnFY = function (timeframe) {
+            return ___namespace.includes([exports.TimeframeOption.QUARTER, exports.TimeframeOption.YEAR], timeframe);
+        };
+        /**
+         * Subtract from date fiscal year shift months count
+         *
+         * @param date
+         */
+        DrDatePickerService.prototype.subtractFiscalYearMonthsFromDate = function (date) {
+            return this.getDateModifiedByFiscalMonths(date, true);
+        };
+        /**
+         * Add to date fiscal year shift months count
+         *
+         * @param date
+         */
+        DrDatePickerService.prototype.addFiscalYearMonthsToDate = function (date) {
+            return this.getDateModifiedByFiscalMonths(date);
+        };
+        /**
+         * Add or subtract depending on isRevert paremeter Fiscal year month shift
+         *
+         * @param date
+         * @param isSubtract
+         */
+        DrDatePickerService.prototype.getDateModifiedByFiscalMonths = function (date, isSubtract) {
+            if (isSubtract === void 0) { isSubtract = false; }
+            return date ? ___namespace.cloneDeep(date)[isSubtract ? 'subtract' : 'add'](this.fiscalYearMonthsModifier, 'month') : date;
+        };
         return DrDatePickerService;
     }());
     DrDatePickerService.decorators = [
@@ -4122,20 +4245,20 @@
                     title: 'Month',
                     value: exports.CalendarView.FOR_MONTHS,
                     format: this.datePickerService.formatConfig.month,
-                    periodLabel: function () { return String(moment$1(_this._calendar.activeDate).year()); }
+                    periodLabel: function () { return String(moment$1(_this._calendar.activeDate).utc().year()); }
                 }, {
                     timeframe: exports.TimeframeOption.QUARTER,
                     title: 'Quarter',
                     value: exports.CalendarView.FOR_QUARTERS,
                     format: this.datePickerService.formatConfig.quarter,
-                    periodLabel: function () { return String(moment$1(_this._calendar.activeDate).year()); }
+                    periodLabel: function () { return String(moment$1(_this.datePickerService.subtractFiscalYearMonthsFromDate(_this._calendar.activeDate)).utc().year()); }
                 }, {
                     timeframe: exports.TimeframeOption.YEAR,
                     title: 'Year',
                     value: exports.CalendarView.FOR_YEARS,
                     format: this.datePickerService.formatConfig.year,
                     periodLabel: function () {
-                        var currentYear = moment$1(_this._calendar.activeDate).year();
+                        var currentYear = moment$1(_this.datePickerService.subtractFiscalYearMonthsFromDate(_this._calendar.activeDate)).utc().year();
                         var startPeriod = Math.floor(currentYear / 24) * 24;
                         return startPeriod + '-' + (startPeriod + 23);
                     }
@@ -4157,12 +4280,25 @@
                 _calendar.currentView = _this.selectedTimeframe;
                 _this.setPeriodLabels();
                 if (_this.selectedTimeframe === exports.CalendarView.FOR_QUARTERS) {
-                    _this.selectedQuarter = moment$1(_this._calendar.activeDate).quarter();
+                    _this.selectedQuarter = _this.datePickerService.getQuarterAccordingToFiscalYear(_this._calendar.activeDate);
+                }
+            });
+            _calendar.viewChanged.pipe(operators.takeUntil(this._destroyed)).subscribe(function () {
+                _this.setPeriodLabels();
+                if (_calendar.multiYearView) {
+                    _this.transformDateInMultiyearViewAccordingToFY();
                 }
             });
-            _calendar.viewChanged.pipe(operators.takeUntil(this._destroyed)).subscribe(function () { return _this.setPeriodLabels(); });
             this.datePickerService.calendarInstance = _calendar;
         }
+        DrDatePickerCustomHeaderComponent.prototype.ngOnInit = function () {
+            var _this = this;
+            setTimeout(function () {
+                if (_this._calendar.multiYearView) {
+                    _this.transformDateInMultiyearViewAccordingToFY();
+                }
+            });
+        };
         DrDatePickerCustomHeaderComponent.prototype.ngOnDestroy = function () {
             this._destroyed.next();
             this._destroyed.complete();
@@ -4188,7 +4324,7 @@
             var chosenTimeframeOption = this.timeframeOptions.filter(function (option) { return option.value === _this.selectedTimeframe; })[0];
             this.datePickerService.updateTimeframeAndFormat(chosenTimeframeOption.format);
             if (this.selectedTimeframe === exports.CalendarView.FOR_QUARTERS) {
-                this.selectedQuarter = moment$1(this._calendar.activeDate).quarter();
+                this.selectedQuarter = this.datePickerService.getQuarterAccordingToFiscalYear(this._calendar.activeDate);
             }
         };
         Object.defineProperty(DrDatePickerCustomHeaderComponent.prototype, "currentViewIsQuarter", {
@@ -4202,11 +4338,9 @@
             this._calendar.currentView = view;
         };
         DrDatePickerCustomHeaderComponent.prototype.onSelectQuarter = function (quarterNumber) {
-            var monthsInQuarter = 3;
-            this.selectedQuarter = moment$1(this._calendar.activeDate).quarter();
-            var unadaptedDate = this._dateAdapter.addCalendarMonths(this._calendar.activeDate, monthsInQuarter * (quarterNumber - this.selectedQuarter));
-            this._calendar.activeDate = unadaptedDate;
-            this.datePickerService.updatedQuarter$.next(moment$1(unadaptedDate));
+            this.selectedQuarter = quarterNumber;
+            this.datePickerService.setEndOfQuarter(this._calendar.activeDate, quarterNumber);
+            this.datePickerService.updatedQuarter$.next(this._calendar.activeDate);
             this.datePickerService.datePickerInstance.close();
         };
         DrDatePickerCustomHeaderComponent.prototype.pagingClicked = function (forward) {
@@ -4218,12 +4352,18 @@
             this._calendar.activeDate = this._dateAdapter[actionCall](this._calendar.activeDate, forward ? amount : -amount);
             this.setPeriodLabels();
         };
+        DrDatePickerCustomHeaderComponent.prototype.transformDateInMultiyearViewAccordingToFY = function () {
+            var multuYearView = this._calendar.multiYearView;
+            multuYearView._activeDate = this.datePickerService.subtractFiscalYearMonthsFromDate(multuYearView._activeDate);
+            multuYearView._selectedYear = multuYearView._activeDate.year();
+            multuYearView._init();
+        };
         return DrDatePickerCustomHeaderComponent;
     }());
     DrDatePickerCustomHeaderComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'dr-date-picker_custom-header.component',
-                    template: "<div *ngIf=\"datePickerService.isTimeframeSelectionEnabled\" class=\"dr-datepicker__timeframe-select__wrapper\">\n    <dr-select\n            class=\"dr-datepicker__timeframe-select\"\n            [(ngModel)]=\"selectedTimeframe\"\n            [items]=\"timeframeOptions | drShowTimeframePipe: datePickerService.availableTimeframes\"\n            bindLabel=\"title\"\n            bindValue=\"value\"\n            (ngModelChange)=\"setTimeframe()\">\n    </dr-select>\n</div>\n\n<div class=\"dr-date-paging\">\n    <div class=\"dr-date-paging flip-page-button\"\n         (click)=\"pagingClicked(false)\">\n        <i class=\"dr-icon-arrow-left presentation_buttons-navigate_input\"></i>\n    </div>\n    <span class=\"example-header-label\">\n        <span (click)=\"switchViewOnClickOnPeriodLabel(calendarView.FOR_MONTHS)\">{{periodMonthLabel + ' '}}</span>\n        <span (click)=\"switchViewOnClickOnPeriodLabel(calendarView.FOR_YEARS)\">{{periodYearLabel}}</span>\n    </span>\n    <div class=\"dr-date-paging flip-page-button\"\n         (click)=\"pagingClicked(true)\">\n        <i class=\"dr-icon-arrow-right presentation_buttons-navigate_input\"></i>\n    </div>\n</div>\n<div #quarterlyDatePicker class=\"dr-quarterly-datepicker\" *ngIf=\"currentViewIsQuarter\">\n    <div *ngFor=\"let quarter of quarters\"\n         class=\"quarter-selector\" (click)=\"onSelectQuarter(quarter)\"\n         [class]=\"quarter === selectedQuarter ? 'selected' : ''\"\n    >Q{{quarter}}</div>\n</div>\n\n",
+                    template: "<div *ngIf=\"datePickerService.isTimeframeSelectionEnabled\" class=\"dr-datepicker__timeframe-select__wrapper\">\n    <dr-select\n            class=\"dr-datepicker__timeframe-select\"\n            [(ngModel)]=\"selectedTimeframe\"\n            [items]=\"timeframeOptions | drShowTimeframePipe: datePickerService.availableTimeframes\"\n            bindLabel=\"title\"\n            bindValue=\"value\"\n            (ngModelChange)=\"setTimeframe()\">\n    </dr-select>\n</div>\n\n<div class=\"dr-date-paging\">\n    <div class=\"dr-date-paging flip-page-button\"\n         (click)=\"pagingClicked(false)\">\n        <i class=\"dr-icon-arrow-left presentation_buttons-navigate_input\"></i>\n    </div>\n    <span class=\"example-header-label\">\n        <span (click)=\"switchViewOnClickOnPeriodLabel(calendarView.FOR_MONTHS)\">{{ periodMonthLabel + ' ' }}</span>\n        <span (click)=\"switchViewOnClickOnPeriodLabel(calendarView.FOR_YEARS)\">{{ periodYearLabel }}</span>\n    </span>\n    <div class=\"dr-date-paging flip-page-button\"\n         (click)=\"pagingClicked(true)\">\n        <i class=\"dr-icon-arrow-right presentation_buttons-navigate_input\"></i>\n    </div>\n</div>\n<div #quarterlyDatePicker class=\"dr-quarterly-datepicker\" *ngIf=\"currentViewIsQuarter\">\n    <div *ngFor=\"let quarter of quarters\"\n         class=\"quarter-selector\" (click)=\"onSelectQuarter(quarter)\"\n         [class]=\"quarter === selectedQuarter ? 'selected' : ''\"\n    >Q{{quarter}}</div>\n</div>\n\n",
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     styles: [":host{height:54px;align-items:center;font-family:\"Poppins\";font-style:normal;font-weight:600;font-size:14px;line-height:22px}.dr-datepicker__timeframe-select__wrapper{background-color:#f9faff;padding:16px 32px;border-radius:18px 18px 0 0}.dr-date-paging{display:flex;flex-direction:row;justify-content:space-between;align-items:center;padding:16px 8px;grid-gap:4px;gap:4px}.dr-date-paging.flip-page-button{width:20px;height:20px;padding:0;color:#4e566c}.dr-date-paging.flip-page-button:hover{border-radius:50%;background:#f2f2fb;color:#4646ce}.example-header-label{cursor:pointer}.dr-quarterly-datepicker{display:flex;justify-content:space-between;padding:10px}.dr-quarterly-datepicker .quarter-selector{display:block;width:74px;height:40px;text-align:center;border-radius:40px;font-weight:400;padding-top:9px}.dr-quarterly-datepicker .quarter-selector:hover{background:#f2f2fb;color:#4646ce;font-weight:600;cursor:pointer}.dr-quarterly-datepicker .quarter-selector.selected{background-color:#4646ce;color:#f3f7ff;font-weight:600}\n"]
                 },] }
@@ -4239,7 +4379,7 @@
     var moment = require('moment');
     var noop = function () {
     };
-    var ɵ0$1 = noop;
+    var ɵ0$2 = noop;
     var DrDatePickerComponent = /** @class */ (function () {
         function DrDatePickerComponent(cdr, dateAdapter, datePickerService) {
             var _this = this;
@@ -4249,6 +4389,7 @@
             // Whether to transform date, taking end, start, middle of preiod (i.e. set middle of month if timeframe='month')
             this.periodPosition = exports.DatePickerPeriodPosition.DEFAULT;
             this.placeholder = 'Select';
+            this.fiscalYearMonthsModifier = 0;
             this.calendarViewsTimeframeMapping = {
                 year: 'multi-year',
                 month: 'year',
@@ -4301,6 +4442,7 @@
             configurable: true
         });
         DrDatePickerComponent.prototype.ngAfterViewInit = function () {
+            this.datePickerService.fiscalYearMonthsModifier = this.fiscalYearMonthsModifier;
             this.datePickerService.datePickerInstance = this.datePicker;
             this.datePicker.startView = this.calendarViewsTimeframeMapping[this.datePickerService.timeframe];
         };
@@ -4316,14 +4458,43 @@
             var timeframe = this.datePickerService.timeframe;
             switch (this.periodPosition) {
                 case exports.DatePickerPeriodPosition.START_OF_PERIOD:
-                    this.innerValue.startOf(timeframe);
+                    if (this.datePickerService.timeframe === exports.TimeframeOption.QUARTER) {
+                        this.datePickerService.setStartOfCurrentQuarter(this.innerValue);
+                    }
+                    else if (this.datePickerService.timeframe === exports.TimeframeOption.YEAR) {
+                        this.datePickerService.setStartOfQuarter(this.innerValue, 1);
+                    }
+                    else {
+                        this.innerValue.startOf(timeframe);
+                    }
                     break;
                 case exports.DatePickerPeriodPosition.END_OF_PERIOD:
-                    this.innerValue.endOf(timeframe);
+                    if (this.datePickerService.timeframe === exports.TimeframeOption.QUARTER) {
+                        this.datePickerService.setEndOfCurrentQuarter(this.innerValue);
+                    }
+                    else if (this.datePickerService.timeframe === exports.TimeframeOption.YEAR) {
+                        this.datePickerService.setEndOfQuarter(this.innerValue, 4);
+                    }
+                    else {
+                        this.innerValue.endOf(timeframe);
+                    }
                     break;
                 case exports.DatePickerPeriodPosition.MIDDLE_OF_PERIOD:
-                    this.innerValue.startOf(timeframe);
-                    var endOfPeriod = this.innerValue.clone().endOf(timeframe);
+                    var endOfPeriod = void 0;
+                    if (this.datePickerService.timeframe === exports.TimeframeOption.QUARTER) {
+                        endOfPeriod = this.innerValue.clone();
+                        this.datePickerService.setStartOfCurrentQuarter(this.innerValue);
+                        this.datePickerService.setEndOfCurrentQuarter(endOfPeriod);
+                    }
+                    else if (this.datePickerService.timeframe === exports.TimeframeOption.YEAR) {
+                        endOfPeriod = this.innerValue.clone();
+                        this.datePickerService.setStartOfQuarter(this.innerValue, 1);
+                        this.datePickerService.setEndOfQuarter(endOfPeriod, 4);
+                    }
+                    else {
+                        this.innerValue.startOf(timeframe);
+                        endOfPeriod = this.innerValue.clone().endOf(timeframe);
+                    }
                     var diff = endOfPeriod.diff(this.innerValue, 'seconds');
                     this.innerValue.add(diff / 2 + 1, 'seconds');
                     break;
@@ -4333,6 +4504,9 @@
             }
         };
         DrDatePickerComponent.prototype.chosenPeriodHandler = function (chosenDate, timeframe) {
+            if (timeframe === exports.TimeframeOption.YEAR) {
+                chosenDate = this.datePickerService.addFiscalYearMonthsToDate(chosenDate);
+            }
             if (this.datePickerService.timeframe === exports.TimeframeOption.QUARTER && timeframe === exports.TimeframeOption.YEAR) {
                 this.datePickerService.calendarInstance.currentView = exports.CalendarView.FOR_QUARTERS;
                 this.datePickerService.calendarInstance.activeDate = chosenDate;
@@ -4401,6 +4575,7 @@
         max: [{ type: i0.Input }],
         periodPosition: [{ type: i0.Input }],
         placeholder: [{ type: i0.Input }],
+        fiscalYearMonthsModifier: [{ type: i0.Input }],
         datePicker: [{ type: i0.ViewChild, args: ['datePicker',] }]
     };
 
@@ -4461,8 +4636,12 @@
                 if (!this.value) {
                     return this.placeholder;
                 }
+                var displayValue = ___namespace.cloneDeep(this.value);
+                if (this.datePickerService.isTimeframeDependingOnFY(this.datePickerService.timeframe)) {
+                    displayValue = this.datePickerService.subtractFiscalYearMonthsFromDate(displayValue);
+                }
                 var formatCached = this.datePickerService.format$.getValue();
-                return this.datePickerService.getDisplayPrefix() + this.value.format(formatCached);
+                return this.datePickerService.getDisplayPrefix() + displayValue.format(formatCached);
             },
             enumerable: false,
             configurable: true
@@ -4959,7 +5138,7 @@
                 },] }
     ];
 
-    var ɵ0 = {}, ɵ1 = {};
+    var ɵ0$1 = {}, ɵ1 = {};
     var DrDialogModule = /** @class */ (function () {
         function DrDialogModule() {
         }
@@ -4977,13 +5156,490 @@
                     ],
                     exports: [DialogWrapperComponent, DialogModalWrapperComponent],
                     providers: [
-                        { provide: i1$1.MatDialogRef, useValue: ɵ0 },
+                        { provide: i1$1.MatDialogRef, useValue: ɵ0$1 },
                         { provide: i1$1.MAT_DIALOG_DATA, useValue: ɵ1 },
                         DialogService
                     ]
                 },] }
     ];
 
+    var DrChatFormComponent = /** @class */ (function () {
+        function DrChatFormComponent(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 i0.EventEmitter();
+            /**
+             * Emits when message input value has been changed
+             *
+             * @type {EventEmitter<string>}
+             */
+            this.inputChange = new i0.EventEmitter();
+            this.fileOver = false;
+        }
+        DrChatFormComponent.prototype.onDrop = function (event) {
+            var e_1, _b;
+            var _this = this;
+            var _a;
+            if (this.dropFiles) {
+                event.preventDefault();
+                event.stopPropagation();
+                this.fileOver = false;
+                if ((_a = event.dataTransfer) === null || _a === void 0 ? void 0 : _a.files) {
+                    var _loop_1 = function (file) {
+                        var res = file;
+                        if (IMAGE_TYPES.includes(file.type)) {
+                            var fr = new FileReader();
+                            fr.onload = function (e) {
+                                res.src = e.target.result;
+                                res.urlStyle = _this.domSanitizer.bypassSecurityTrustStyle("url(" + res.src + ")");
+                                _this.cdr.detectChanges();
+                            };
+                            fr.readAsDataURL(file);
+                        }
+                        this_1.droppedFiles.push(res);
+                    };
+                    var this_1 = this;
+                    try {
+                        for (var _c = __values(event.dataTransfer.files), _d = _c.next(); !_d.done; _d = _c.next()) {
+                            var file = _d.value;
+                            _loop_1(file);
+                        }
+                    }
+                    catch (e_1_1) { e_1 = { error: e_1_1 }; }
+                    finally {
+                        try {
+                            if (_d && !_d.done && (_b = _c.return)) _b.call(_c);
+                        }
+                        finally { if (e_1) throw e_1.error; }
+                    }
+                }
+            }
+        };
+        DrChatFormComponent.prototype.removeFile = function (file) {
+            var index = this.droppedFiles.indexOf(file);
+            if (index >= 0) {
+                this.droppedFiles.splice(index, 1);
+            }
+        };
+        DrChatFormComponent.prototype.onDragOver = function (event) {
+            event.preventDefault();
+            event.stopPropagation();
+            if (this.dropFiles) {
+                this.fileOver = true;
+            }
+        };
+        DrChatFormComponent.prototype.onDragLeave = function (event) {
+            event.preventDefault();
+            event.stopPropagation();
+            if (this.dropFiles) {
+                this.fileOver = false;
+            }
+        };
+        DrChatFormComponent.prototype.sendMessage = function () {
+            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();
+            }
+        };
+        DrChatFormComponent.prototype.onModelChange = function (value) {
+            this.inputChange.emit(value);
+        };
+        return DrChatFormComponent;
+    }());
+    DrChatFormComponent.decorators = [
+        { type: i0.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: i0.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 = function () { return [
+        { type: i0.ChangeDetectorRef },
+        { type: platformBrowser.DomSanitizer }
+    ]; };
+    DrChatFormComponent.propDecorators = {
+        message: [{ type: i0.Input }],
+        messagePlaceholder: [{ type: i0.Input }],
+        dropFiles: [{ type: i0.Input }],
+        dropFilePlaceholder: [{ type: i0.Input }],
+        send: [{ type: i0.Output }],
+        inputChange: [{ type: i0.Output }],
+        fileOver: [{ type: i0.HostBinding, args: ['class.file-over',] }],
+        onDrop: [{ type: i0.HostListener, args: ['drop', ['$event'],] }],
+        onDragOver: [{ type: i0.HostListener, args: ['dragover', ['$event'],] }],
+        onDragLeave: [{ type: i0.HostListener, args: ['dragleave', ['$event'],] }]
+    };
+
+    /**
+     * `DrCustomMessageService` is used to store instances of `DrChatCustomMessageDirective`s which
+     * were provided in the chat component.
+     */
+    var DrChatCustomMessageService = /** @class */ (function () {
+        function DrChatCustomMessageService() {
+            this.customMessages = new Map();
+        }
+        DrChatCustomMessageService.prototype.register = function (type, instance) {
+            this.customMessages.set(type, instance);
+        };
+        DrChatCustomMessageService.prototype.unregister = function (type) {
+            return this.customMessages.delete(type);
+        };
+        DrChatCustomMessageService.prototype.getInstance = function (type) {
+            return this.customMessages.get(type);
+        };
+        return DrChatCustomMessageService;
+    }());
+    DrChatCustomMessageService.decorators = [
+        { type: i0.Injectable }
+    ];
+
+    var DrChatMessageComponent = /** @class */ (function () {
+        function DrChatMessageComponent(customMessageService) {
+            this.customMessageService = customMessageService;
+            this.MESSAGE_TYPE = exports.CHAT_MESSAGE_TYPE;
+            this.MESSAGE_TYPE_CUSTOM = exports.CHAT_MESSAGE_TYPE.EMBED;
+            this._reply = false;
+        }
+        Object.defineProperty(DrChatMessageComponent.prototype, "flyInOut", {
+            get: function () {
+                return true;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(DrChatMessageComponent.prototype, "notReply", {
+            get: function () {
+                return !this.reply;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(DrChatMessageComponent.prototype, "reply", {
+            /**
+             * Determines if a message is a reply
+             */
+            get: function () {
+                return this._reply;
+            },
+            set: function (value) {
+                this._reply = !!value;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        DrChatMessageComponent.prototype.getTemplate = function () {
+            this.customMessage = true;
+            var customMessage = this.getCustomMessage(this.type);
+            return customMessage.templateRef;
+        };
+        DrChatMessageComponent.prototype.getTemplateContext = function () {
+            return { $implicit: this.customMessageData, isReply: this.reply };
+        };
+        DrChatMessageComponent.prototype.getCustomMessage = function (type) {
+            var 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;
+        };
+        return DrChatMessageComponent;
+    }());
+    DrChatMessageComponent.decorators = [
+        { type: i0.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: [
+                        animations.trigger('flyInOut', [
+                            animations.state('in', animations.style({ transform: 'translateX(0)' })),
+                            animations.transition('void => *', [animations.style({ transform: 'translateX(-100%)' }), animations.animate(80)]),
+                            animations.transition('* => void', [animations.animate(80, animations.style({ transform: 'translateX(100%)' }))]),
+                        ]),
+                    ],
+                    changeDetection: i0.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 = function () { return [
+        { type: DrChatCustomMessageService }
+    ]; };
+    DrChatMessageComponent.propDecorators = {
+        flyInOut: [{ type: i0.HostBinding, args: ['@flyInOut',] }],
+        notReply: [{ type: i0.HostBinding, args: ['class.not-reply',] }],
+        reply: [{ type: i0.Input }, { type: i0.HostBinding, args: ['class.reply',] }],
+        type: [{ type: i0.Input }],
+        message: [{ type: i0.Input }],
+        customMessageData: [{ type: i0.Input }]
+    };
+
+    var DrChatComponent = /** @class */ (function () {
+        function DrChatComponent(cdr) {
+            this.cdr = cdr;
+            this.noMessagesPlaceholder = 'No messages yet.';
+            this._scrollBottom = true;
+        }
+        Object.defineProperty(DrChatComponent.prototype, "scrollBottom", {
+            /**
+             * Scroll chat to the bottom of the list when a new message arrives
+             */
+            get: function () {
+                return this._scrollBottom;
+            },
+            set: function (value) {
+                this._scrollBottom = !!value;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        DrChatComponent.prototype.ngAfterViewInit = function () {
+            var _this = this;
+            this.messages.changes.subscribe(function (messages) {
+                _this.messages = messages;
+                _this.updateView();
+            });
+            this.updateView();
+        };
+        DrChatComponent.prototype.updateView = function () {
+            if (this.scrollBottom) {
+                this.scrollListBottom();
+            }
+        };
+        DrChatComponent.prototype.scrollListBottom = function () {
+            var _this = this;
+            setTimeout(function () {
+                _this.messagesContainer.nativeElement.scrollTo({ top: _this.messagesContainer.nativeElement.scrollHeight, behavior: 'smooth' });
+                _this.cdr.markForCheck();
+            });
+        };
+        return DrChatComponent;
+    }());
+    DrChatComponent.decorators = [
+        { type: i0.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 = function () { return [
+        { type: i0.ChangeDetectorRef }
+    ]; };
+    DrChatComponent.propDecorators = {
+        title: [{ type: i0.Input }],
+        noMessagesPlaceholder: [{ type: i0.Input }],
+        scrollBottom: [{ type: i0.Input }],
+        messagesContainer: [{ type: i0.ViewChild, args: ['messagesContainer',] }],
+        messages: [{ type: i0.ContentChildren, args: [DrChatMessageComponent,] }],
+        chatForm: [{ type: i0.ContentChild, args: [DrChatFormComponent,] }]
+    };
+
+    /**
+     * Chat text message component.
+     */
+    var DrChatMessageTextComponent = /** @class */ (function () {
+        function DrChatMessageTextComponent() {
+        }
+        return DrChatMessageTextComponent;
+    }());
+    DrChatMessageTextComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'dr-chat-message-text',
+                    template: "<div class=\"text\" *ngIf=\"message\">{{ message.text }}</div>\n",
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    styles: [":host{display:flex}:host .text{display:flex;word-break:break-word}\n"]
+                },] }
+    ];
+    DrChatMessageTextComponent.propDecorators = {
+        message: [{ type: i0.Input }]
+    };
+
+    /**
+     * Chat rich-text message component.
+     */
+    var DrChatMessageRichTextComponent = /** @class */ (function () {
+        function DrChatMessageRichTextComponent() {
+        }
+        return DrChatMessageRichTextComponent;
+    }());
+    DrChatMessageRichTextComponent.decorators = [
+        { type: i0.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: i0.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: i0.Input }]
+    };
+
+    /**
+     * Chat message component.
+     */
+    var DrChatMessageFileComponent = /** @class */ (function () {
+        function DrChatMessageFileComponent(cd, domSanitizer) {
+            this.cd = cd;
+            this.domSanitizer = domSanitizer;
+        }
+        Object.defineProperty(DrChatMessageFileComponent.prototype, "files", {
+            /**
+             * Message file path
+             *
+             * @type {Date}
+             */
+            set: function (files) {
+                var _this = this;
+                this.readyFiles = (files || []).map(function (file) {
+                    var isImage = _this.isImage(file);
+                    return Object.assign(Object.assign({}, file), { urlStyle: isImage && _this.domSanitizer.bypassSecurityTrustStyle("url(" + file.url + ")"), isImage: isImage });
+                });
+                this.cd.detectChanges();
+            },
+            enumerable: false,
+            configurable: true
+        });
+        DrChatMessageFileComponent.prototype.isImage = function (file) {
+            var type = file.type;
+            if (type) {
+                return IMAGE_TYPES.includes(type);
+            }
+            return false;
+        };
+        return DrChatMessageFileComponent;
+    }());
+    DrChatMessageFileComponent.decorators = [
+        { type: i0.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: i0.ChangeDetectionStrategy.OnPush
+                },] }
+    ];
+    DrChatMessageFileComponent.ctorParameters = function () { return [
+        { type: i0.ChangeDetectorRef },
+        { type: platformBrowser.DomSanitizer }
+    ]; };
+    DrChatMessageFileComponent.propDecorators = {
+        message: [{ type: i0.Input }],
+        files: [{ type: i0.Input }]
+    };
+
+    var throwCustomMessageTypeIsRequired = function () {
+        throw new Error('[drCustomMessage]: custom message type is required.');
+    };
+    var ɵ0 = throwCustomMessageTypeIsRequired;
+    var DrChatCustomMessageDirective = /** @class */ (function () {
+        function DrChatCustomMessageDirective(templateRef, customMessageService) {
+            this.templateRef = templateRef;
+            this.customMessageService = customMessageService;
+        }
+        Object.defineProperty(DrChatCustomMessageDirective.prototype, "drCustomMessage", {
+            /**
+             * Defines a message type which should rendered with the custom message template.
+             *
+             * @type {string}
+             */
+            get: function () {
+                return this._type;
+            },
+            set: function (value) {
+                this._type = value;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(DrChatCustomMessageDirective.prototype, "type", {
+            get: function () {
+                return this._type;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        DrChatCustomMessageDirective.prototype.ngOnInit = function () {
+            if (!this._type) {
+                throwCustomMessageTypeIsRequired();
+            }
+            this.customMessageService.register(this.type, this);
+        };
+        DrChatCustomMessageDirective.prototype.ngOnDestroy = function () {
+            this.customMessageService.unregister(this.type);
+        };
+        return DrChatCustomMessageDirective;
+    }());
+    DrChatCustomMessageDirective.decorators = [
+        { type: i0.Directive, args: [{
+                    selector: "[drCustomMessage]",
+                },] }
+    ];
+    DrChatCustomMessageDirective.ctorParameters = function () { return [
+        { type: i0.TemplateRef },
+        { type: DrChatCustomMessageService }
+    ]; };
+    DrChatCustomMessageDirective.propDecorators = {
+        drCustomMessage: [{ type: i0.Input }]
+    };
+
+    var DR_CHAT_COMPONENTS = [
+        DrChatComponent,
+        DrChatMessageComponent,
+        DrChatFormComponent,
+        DrChatMessageTextComponent,
+        DrChatMessageFileComponent,
+        DrChatMessageRichTextComponent,
+    ];
+    var DR_CHAT_DIRECTIVES = [DrChatCustomMessageDirective];
+    var DrChatModule = /** @class */ (function () {
+        function DrChatModule() {
+        }
+        return DrChatModule;
+    }());
+    DrChatModule.decorators = [
+        { type: i0.NgModule, args: [{
+                    imports: [
+                        forms.FormsModule,
+                        forms.ReactiveFormsModule,
+                        common.CommonModule,
+                        DrAvatarModule,
+                        DrInputsModule
+                    ],
+                    declarations: __spreadArray(__spreadArray([], __read(DR_CHAT_COMPONENTS)), __read(DR_CHAT_DIRECTIVES)),
+                    exports: __spreadArray(__spreadArray([], __read(DR_CHAT_COMPONENTS)), __read(DR_CHAT_DIRECTIVES)),
+                },] }
+    ];
+
     /* components */
 
     /**
@@ -4991,6 +5647,7 @@
      */
 
     exports.AnyTagComponent = AnyTagComponent;
+    exports.ChatMessage = ChatMessage;
     exports.CheckboxComponent = CheckboxComponent;
     exports.CustomDateFormat = CustomDateFormat;
     exports.DateTagComponent = DateTagComponent;
@@ -5006,6 +5663,7 @@
     exports.DrAvatarModule = DrAvatarModule;
     exports.DrAvatarPipe = DrAvatarPipe;
     exports.DrButtonComponent = DrButtonComponent;
+    exports.DrChatModule = DrChatModule;
     exports.DrDialogModule = DrDialogModule;
     exports.DrDropdownComponent = DrDropdownComponent;
     exports.DrDropdownDirective = DrDropdownDirective;
@@ -5043,6 +5701,7 @@
     exports.DrTooltipDirective = DrTooltipDirective;
     exports.DrTooltipModule = DrTooltipModule;
     exports.ForecastTagComponent = ForecastTagComponent;
+    exports.IMAGE_TYPES = IMAGE_TYPES;
     exports.ListTagComponent = ListTagComponent;
     exports.ListTagModule = ListTagModule;
     exports.MonthTagComponent = MonthTagComponent;
@@ -5067,6 +5726,14 @@
     exports["ɵm"] = StepperComponent;
     exports["ɵn"] = DialogWrapperComponent;
     exports["ɵo"] = DialogModalWrapperComponent;
+    exports["ɵp"] = DrChatComponent;
+    exports["ɵq"] = DrChatCustomMessageService;
+    exports["ɵr"] = DrChatMessageComponent;
+    exports["ɵs"] = DrChatFormComponent;
+    exports["ɵt"] = DrChatMessageTextComponent;
+    exports["ɵu"] = DrChatMessageFileComponent;
+    exports["ɵv"] = DrChatMessageRichTextComponent;
+    exports["ɵw"] = DrChatCustomMessageDirective;
 
     Object.defineProperty(exports, '__esModule', { value: true });