@datarailsshared/datarailsshared 1.4.95 → 1.4.100

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,
             },] }
@@ -3467,6 +3501,7 @@ class DrDatePickerService {
             quarter: DateFromats.QUARTER_FORMAT,
             week: DateFromats.WEEK_FORMAT
         };
+        this.fiscalYearMonthsModifier = 0;
     }
     getDisplayPrefix() {
         const formatCached = this.format$.getValue();
@@ -3493,6 +3528,93 @@ class DrDatePickerService {
     normalizeValue(value) {
         return value.replace(/d/g, 'D');
     }
+    /**
+     * Get quarter number for date according to fiscal year
+     *
+     * @param date
+     */
+    getQuarterAccordingToFiscalYear(date) {
+        let fiscalMonth = this.fiscalYearMonthsModifier;
+        const 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
+     */
+    setEndOfQuarter(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
+     */
+    setStartOfQuarter(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
+     */
+    setEndOfCurrentQuarter(date) {
+        this.setEndOfQuarter(date, this.getQuarterAccordingToFiscalYear(date));
+    }
+    /**
+     * Sets date to start of current quarter (in which date is located) according to FY
+     *
+     * @param date
+     */
+    setStartOfCurrentQuarter(date) {
+        this.setStartOfQuarter(date, this.getQuarterAccordingToFiscalYear(date));
+    }
+    /**
+     * If date selection on this timeframe depends on Fiscal Year
+     *
+     * @param timeframe
+     */
+    isTimeframeDependingOnFY(timeframe) {
+        return _.includes([TimeframeOption.QUARTER, TimeframeOption.YEAR], timeframe);
+    }
+    /**
+     * Subtract from date fiscal year shift months count
+     *
+     * @param date
+     */
+    subtractFiscalYearMonthsFromDate(date) {
+        return this.getDateModifiedByFiscalMonths(date, true);
+    }
+    /**
+     * Add to date fiscal year shift months count
+     *
+     * @param date
+     */
+    addFiscalYearMonthsToDate(date) {
+        return this.getDateModifiedByFiscalMonths(date);
+    }
+    /**
+     * Add or subtract depending on isRevert paremeter Fiscal year month shift
+     *
+     * @param date
+     * @param isSubtract
+     */
+    getDateModifiedByFiscalMonths(date, isSubtract = false) {
+        return date ? _.cloneDeep(date)[isSubtract ? 'subtract' : 'add'](this.fiscalYearMonthsModifier, 'month') : date;
+    }
 }
 DrDatePickerService.decorators = [
     { type: Injectable }
@@ -3526,20 +3648,20 @@ class DrDatePickerCustomHeaderComponent {
                 title: 'Month',
                 value: CalendarView.FOR_MONTHS,
                 format: this.datePickerService.formatConfig.month,
-                periodLabel: () => String(moment$1(this._calendar.activeDate).year())
+                periodLabel: () => String(moment$1(this._calendar.activeDate).utc().year())
             }, {
                 timeframe: TimeframeOption.QUARTER,
                 title: 'Quarter',
                 value: CalendarView.FOR_QUARTERS,
                 format: this.datePickerService.formatConfig.quarter,
-                periodLabel: () => String(moment$1(this._calendar.activeDate).year())
+                periodLabel: () => String(moment$1(this.datePickerService.subtractFiscalYearMonthsFromDate(this._calendar.activeDate)).utc().year())
             }, {
                 timeframe: TimeframeOption.YEAR,
                 title: 'Year',
                 value: CalendarView.FOR_YEARS,
                 format: this.datePickerService.formatConfig.year,
                 periodLabel: () => {
-                    const currentYear = moment$1(this._calendar.activeDate).year();
+                    const currentYear = moment$1(this.datePickerService.subtractFiscalYearMonthsFromDate(this._calendar.activeDate)).utc().year();
                     const startPeriod = Math.floor(currentYear / 24) * 24;
                     return startPeriod + '-' + (startPeriod + 23);
                 }
@@ -3561,12 +3683,24 @@ class DrDatePickerCustomHeaderComponent {
             _calendar.currentView = this.selectedTimeframe;
             this.setPeriodLabels();
             if (this.selectedTimeframe === CalendarView.FOR_QUARTERS) {
-                this.selectedQuarter = moment$1(this._calendar.activeDate).quarter();
+                this.selectedQuarter = this.datePickerService.getQuarterAccordingToFiscalYear(this._calendar.activeDate);
+            }
+        });
+        _calendar.viewChanged.pipe(takeUntil(this._destroyed)).subscribe(() => {
+            this.setPeriodLabels();
+            if (_calendar.multiYearView) {
+                this.transformDateInMultiyearViewAccordingToFY();
             }
         });
-        _calendar.viewChanged.pipe(takeUntil(this._destroyed)).subscribe(() => this.setPeriodLabels());
         this.datePickerService.calendarInstance = _calendar;
     }
+    ngOnInit() {
+        setTimeout(() => {
+            if (this._calendar.multiYearView) {
+                this.transformDateInMultiyearViewAccordingToFY();
+            }
+        });
+    }
     ngOnDestroy() {
         this._destroyed.next();
         this._destroyed.complete();
@@ -3590,7 +3724,7 @@ class DrDatePickerCustomHeaderComponent {
         const chosenTimeframeOption = this.timeframeOptions.filter(option => option.value === this.selectedTimeframe)[0];
         this.datePickerService.updateTimeframeAndFormat(chosenTimeframeOption.format);
         if (this.selectedTimeframe === CalendarView.FOR_QUARTERS) {
-            this.selectedQuarter = moment$1(this._calendar.activeDate).quarter();
+            this.selectedQuarter = this.datePickerService.getQuarterAccordingToFiscalYear(this._calendar.activeDate);
         }
     }
     get currentViewIsQuarter() {
@@ -3600,11 +3734,9 @@ class DrDatePickerCustomHeaderComponent {
         this._calendar.currentView = view;
     }
     onSelectQuarter(quarterNumber) {
-        const monthsInQuarter = 3;
-        this.selectedQuarter = moment$1(this._calendar.activeDate).quarter();
-        const 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();
     }
     pagingClicked(forward) {
@@ -3616,11 +3748,17 @@ class DrDatePickerCustomHeaderComponent {
         this._calendar.activeDate = this._dateAdapter[actionCall](this._calendar.activeDate, forward ? amount : -amount);
         this.setPeriodLabels();
     }
+    transformDateInMultiyearViewAccordingToFY() {
+        const multuYearView = this._calendar.multiYearView;
+        multuYearView._activeDate = this.datePickerService.subtractFiscalYearMonthsFromDate(multuYearView._activeDate);
+        multuYearView._selectedYear = multuYearView._activeDate.year();
+        multuYearView._init();
+    }
 }
 DrDatePickerCustomHeaderComponent.decorators = [
     { type: 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: 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"]
             },] }
@@ -3636,7 +3774,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;
@@ -3645,6 +3783,7 @@ class DrDatePickerComponent {
         // Whether to transform date, taking end, start, middle of preiod (i.e. set middle of month if timeframe='month')
         this.periodPosition = DatePickerPeriodPosition.DEFAULT;
         this.placeholder = 'Select';
+        this.fiscalYearMonthsModifier = 0;
         this.calendarViewsTimeframeMapping = {
             year: 'multi-year',
             month: 'year',
@@ -3681,6 +3820,7 @@ class DrDatePickerComponent {
         this.cdr.markForCheck();
     }
     ngAfterViewInit() {
+        this.datePickerService.fiscalYearMonthsModifier = this.fiscalYearMonthsModifier;
         this.datePickerService.datePickerInstance = this.datePicker;
         this.datePicker.startView = this.calendarViewsTimeframeMapping[this.datePickerService.timeframe];
     }
@@ -3696,14 +3836,43 @@ class DrDatePickerComponent {
         const timeframe = this.datePickerService.timeframe;
         switch (this.periodPosition) {
             case DatePickerPeriodPosition.START_OF_PERIOD:
-                this.innerValue.startOf(timeframe);
+                if (this.datePickerService.timeframe === TimeframeOption.QUARTER) {
+                    this.datePickerService.setStartOfCurrentQuarter(this.innerValue);
+                }
+                else if (this.datePickerService.timeframe === TimeframeOption.YEAR) {
+                    this.datePickerService.setStartOfQuarter(this.innerValue, 1);
+                }
+                else {
+                    this.innerValue.startOf(timeframe);
+                }
                 break;
             case DatePickerPeriodPosition.END_OF_PERIOD:
-                this.innerValue.endOf(timeframe);
+                if (this.datePickerService.timeframe === TimeframeOption.QUARTER) {
+                    this.datePickerService.setEndOfCurrentQuarter(this.innerValue);
+                }
+                else if (this.datePickerService.timeframe === TimeframeOption.YEAR) {
+                    this.datePickerService.setEndOfQuarter(this.innerValue, 4);
+                }
+                else {
+                    this.innerValue.endOf(timeframe);
+                }
                 break;
             case DatePickerPeriodPosition.MIDDLE_OF_PERIOD:
-                this.innerValue.startOf(timeframe);
-                const endOfPeriod = this.innerValue.clone().endOf(timeframe);
+                let endOfPeriod;
+                if (this.datePickerService.timeframe === TimeframeOption.QUARTER) {
+                    endOfPeriod = this.innerValue.clone();
+                    this.datePickerService.setStartOfCurrentQuarter(this.innerValue);
+                    this.datePickerService.setEndOfCurrentQuarter(endOfPeriod);
+                }
+                else if (this.datePickerService.timeframe === 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);
+                }
                 const diff = endOfPeriod.diff(this.innerValue, 'seconds');
                 this.innerValue.add(diff / 2 + 1, 'seconds');
                 break;
@@ -3713,6 +3882,9 @@ class DrDatePickerComponent {
         }
     }
     chosenPeriodHandler(chosenDate, timeframe) {
+        if (timeframe === TimeframeOption.YEAR) {
+            chosenDate = this.datePickerService.addFiscalYearMonthsToDate(chosenDate);
+        }
         if (this.datePickerService.timeframe === TimeframeOption.QUARTER && timeframe === TimeframeOption.YEAR) {
             this.datePickerService.calendarInstance.currentView = CalendarView.FOR_QUARTERS;
             this.datePickerService.calendarInstance.activeDate = chosenDate;
@@ -3780,6 +3952,7 @@ DrDatePickerComponent.propDecorators = {
     max: [{ type: Input }],
     periodPosition: [{ type: Input }],
     placeholder: [{ type: Input }],
+    fiscalYearMonthsModifier: [{ type: Input }],
     datePicker: [{ type: ViewChild, args: ['datePicker',] }]
 };
 
@@ -3824,8 +3997,12 @@ class DrDatePickerWithTimeframeComponent extends DrDatePickerComponent {
         if (!this.value) {
             return this.placeholder;
         }
+        let displayValue = _.cloneDeep(this.value);
+        if (this.datePickerService.isTimeframeDependingOnFY(this.datePickerService.timeframe)) {
+            displayValue = this.datePickerService.subtractFiscalYearMonthsFromDate(displayValue);
+        }
         const formatCached = this.datePickerService.format$.getValue();
-        return this.datePickerService.getDisplayPrefix() + this.value.format(formatCached);
+        return this.datePickerService.getDisplayPrefix() + displayValue.format(formatCached);
     }
     ngOnInit() {
         this.datePickerService.isTimeframeSelectionEnabled = this.canSelectTimeframe;
@@ -4290,7 +4467,7 @@ DrStepperModule.decorators = [
             },] }
 ];
 
-const ɵ0 = {}, ɵ1 = {};
+const ɵ0$1 = {}, ɵ1 = {};
 class DrDialogModule {
 }
 DrDialogModule.decorators = [
@@ -4305,18 +4482,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