@datarailsshared/datarailsshared 1.4.177 → 1.4.179

package/fesm2015/datarailsshared-datarailsshared.js

@@ -15,11 +15,11 @@ import { Overlay, OverlayPositionBuilder, OverlayConfig } from '@angular/cdk/ove
 import { ComponentPortal } from '@angular/cdk/portal';
 import * as i1$1 from '@angular/material/dialog';
 import { MatDialogRef, MAT_DIALOG_DATA, MatDialog, MatDialogModule } from '@angular/material/dialog';
+import { DomSanitizer } from '@angular/platform-browser';
 import { MatCalendar, MatDatepickerModule } from '@angular/material/datepicker';
 import * as moment$9 from 'moment';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { MatTabsModule } from '@angular/material/tabs';
-import { DomSanitizer } from '@angular/platform-browser';
 
 // import {*} from ""
 class DateTagComponent {
@@ -3593,56 +3593,6 @@ DrDetailsListComponent.propDecorators = {
     collapse: [{ type: Input }]
 };
 
-var TooltipPosition;
-(function (TooltipPosition) {
-    TooltipPosition["TOP"] = "top";
-    TooltipPosition["BOTTOM"] = "bottom";
-    TooltipPosition["LEFT"] = "left";
-    TooltipPosition["RIGHT"] = "right";
-    TooltipPosition["TOP_RIGHT"] = "top-right";
-    TooltipPosition["TOP_LEFT"] = "top-left";
-    TooltipPosition["BOTTOM_RIGHT"] = "bottom-right";
-    TooltipPosition["BOTTOM_LEFT"] = "bottom-left";
-    TooltipPosition["RIGHT_TOP"] = "right-top";
-    TooltipPosition["RIGHT_BOTTOM"] = "right-bottom";
-    TooltipPosition["LEFT_TOP"] = "left-top";
-    TooltipPosition["LEFT_BOTTOM"] = "left-bottom";
-})(TooltipPosition || (TooltipPosition = {}));
-
-var Scenario;
-(function (Scenario) {
-    Scenario["ACTUALS"] = "Actuals";
-    Scenario["FORECAST"] = "Forecast";
-    Scenario["BUDGET"] = "Budget";
-    Scenario["NONE"] = "None";
-})(Scenario || (Scenario = {}));
-
-class DrModelDebounceChangeDirective {
-    constructor(ngModel) {
-        this.ngModel = ngModel;
-        this.debounce = 200;
-        this.ngModelDebounceChange = new EventEmitter();
-    }
-    ngOnInit() {
-        this.subscription = this.ngModel.control.valueChanges.pipe(skip(1), debounceTime(this.debounce), distinctUntilChanged()).subscribe(value => this.ngModelDebounceChange.emit(value));
-    }
-    ngOnDestroy() {
-        this.subscription.unsubscribe();
-    }
-}
-DrModelDebounceChangeDirective.decorators = [
-    { type: Directive, args: [{
-                selector: '[ngModelDebounceChange]'
-            },] }
-];
-DrModelDebounceChangeDirective.ctorParameters = () => [
-    { type: NgModel }
-];
-DrModelDebounceChangeDirective.propDecorators = {
-    debounce: [{ type: Input }],
-    ngModelDebounceChange: [{ type: Output }]
-};
-
 const IMAGE_TYPES = ['image/png', 'image/jpeg', 'image/gif'];
 var CHAT_MESSAGE_TYPE;
 (function (CHAT_MESSAGE_TYPE) {
@@ -3679,678 +3629,1166 @@ class ChatMessage {
     }
 }
 
-var BadgeStatus;
-(function (BadgeStatus) {
-    BadgeStatus["INFO"] = "info";
-    BadgeStatus["ERROR"] = "error";
-    BadgeStatus["WARNING"] = "warning";
-    BadgeStatus["SUCCESS"] = "success";
-    BadgeStatus["REGULAR"] = "regular";
-    BadgeStatus["PROGRESS"] = "progress";
-    BadgeStatus["DOTTED"] = "dotted";
-})(BadgeStatus || (BadgeStatus = {}));
-
-const allDateTags = {
-    [TagsConfigSubType.YEAR]: {
-        name: 'Date',
-        toggle: false,
-    },
-    [TagsConfigSubType.QUARTER]: {
-        name: 'Date',
-        toggle: false,
-    },
-    [TagsConfigSubType.MONTH]: {
-        name: 'Date',
-        toggle: false,
-    },
-    [TagsConfigSubType.DAY]: {
-        name: 'Date',
-        toggle: false,
-    },
-    [TagsConfigSubType.WEEK]: {
-        name: 'Date',
-        toggle: false,
+class DrChatFormComponent {
+    constructor(cdr, domSanitizer) {
+        this.cdr = cdr;
+        this.domSanitizer = domSanitizer;
+        this._textareaInitialHeight = true;
+        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';
+        /**
+         * Parameter to check is send message function available
+         *
+         * @type {boolean}
+         */
+        this.waitForReply = false;
+        /**
+         *
+         * @type {EventEmitter<{ message: string, files: File[] }>}
+         */
+        this.send = new EventEmitter();
+        this.abort = new EventEmitter();
+        /**
+         * Emits when message input value has been changed
+         *
+         * @type {EventEmitter<string>}
+         */
+        this.inputChange = new EventEmitter();
+        this.fileOver = false;
     }
-};
-function getScenarioTagDataConfig(isMultipleDimension) {
-    return {
-        [Scenario.ACTUALS]: Object.assign(Object.assign({}, allDateTags), { [TagsConfigSubType.MONTH]: {
-                name: 'Date',
-                toggle: true,
-            }, [TagsConfigSubType.FILE_STATUS]: {
-                toggle: false,
-            } }),
-        [Scenario.BUDGET]: {
-            [TagsConfigSubType.BUDGET_CYCLE]: {
-                toggle: true,
-                acceptableDateTags: [TagsConfigSubType.YEAR],
-                hidden: !isMultipleDimension,
-            },
-            [TagsConfigSubType.PLAN]: {
-                toggle: false,
-                turnOffDateTags: true,
-                hidden: isMultipleDimension,
-            },
-            [TagsConfigSubType.YEAR]: {
-                name: 'Date',
-                toggle: true,
-            },
-            [TagsConfigSubType.QUARTER]: {
-                name: 'Date',
-                toggle: false,
-            },
-            [TagsConfigSubType.FILE_STATUS]: {
-                toggle: false,
-            },
-        },
-        [Scenario.FORECAST]: {
-            [TagsConfigSubType.FORECAST_NEW]: {
-                toggle: true,
-                name: 'Date',
-            },
-            [TagsConfigSubType.FILE_STATUS]: {
-                toggle: false,
-            },
-        },
-        [Scenario.NONE]: Object.assign(Object.assign({}, allDateTags), { [TagsConfigSubType.MONTH]: {
-                name: 'Date',
-                toggle: true,
-            }, [TagsConfigSubType.FILE_STATUS]: {
-                toggle: true,
-            } }),
-    };
-}
-
-class ScenarioService {
-    constructor() {
-        this.DEFAULT_FORECAST_DATE_TAG = 'Month';
+    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);
+                }
+            }
+        }
     }
-    get scenarios() {
-        return orderBy(Object.values(Scenario), (scenario) => scenario === Scenario.NONE ? 1 : 0);
+    removeFile(file) {
+        const index = this.droppedFiles.indexOf(file);
+        if (index >= 0) {
+            this.droppedFiles.splice(index, 1);
+        }
     }
-    get areExistingTagsConfig() {
-        return !!this.currentTagsConfig;
+    onDragOver(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        if (this.dropFiles) {
+            this.fileOver = true;
+        }
     }
-    initScenarioTags(wholeTagsConfig, currentTagsConfig, isMultipleDimension) {
-        if (!(wholeTagsConfig === null || wholeTagsConfig === void 0 ? void 0 : wholeTagsConfig.length))
+    onDragLeave(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        if (this.dropFiles) {
+            this.fileOver = false;
+        }
+    }
+    sendMessage() {
+        if (this.waitForReply) {
             return;
-        this.wholeTagsConfig = cloneDeep(wholeTagsConfig);
-        this.currentTagsConfig = currentTagsConfig;
-        this.isMultipleDimension = isMultipleDimension;
+        }
+        if (this.droppedFiles.length || String(this.message).trim().length) {
+            this._textareaInitialHeight = true;
+            this.send.emit({ message: this.message, files: this.droppedFiles });
+            this.message = '';
+            this.droppedFiles = [];
+            this.cdr.markForCheck();
+        }
     }
-    getTagsConfigByScenarioTags(scenarioTags, tagsConfig) {
-        const scenarioTagsConfig = filter$1(tagsConfig, (tagConfig) => some(scenarioTags, (scenarioTag) => scenarioTag.toggle && scenarioTag.selectedTagSubType === tagConfig.options.sub_type));
-        return this.sortScenarioTags(scenarioTagsConfig);
+    abortMessage() {
+        this.abort.emit();
     }
-    getScenarioTagsByScenario(scenario) {
-        const scenarioTagsConfig = this.getScenarioTagsConfig(scenario, this.wholeTagsConfig);
-        const scenarioTagsUi = [];
-        forEach(scenarioTagsConfig, (scenarioTag) => {
-            const isTagWithSubTags = scenarioTag.type === TagTypes.DATE;
-            const tagWithSubTags = isTagWithSubTags && find(scenarioTagsUi, { type: scenarioTag.type });
-            const tag = tagWithSubTags || this.prepareScenarioTag(scenarioTagsConfig, scenarioTag, scenario, isTagWithSubTags);
-            if (isTagWithSubTags) {
-                this.updateScenarioSubTags(tag, scenarioTag);
-                tag.subTags = this.sortedScenarioSubTags(tag);
-            }
-            if (tagWithSubTags)
-                return;
-            scenarioTagsUi.push(tag);
-        });
-        if (this.areExistingTagsConfig) {
-            this.initExistingTagsConfig(scenario, scenarioTagsUi);
-        }
-        const isTagNotSupportingDates = some(scenarioTagsUi, { turnOffDateTags: true, toggle: true });
-        if (isTagNotSupportingDates) {
-            this.turnOffDateTag(scenarioTagsUi);
-        }
-        const tagWithSpecificDateTags = find(scenarioTagsUi, (tag) => { var _a; return tag.toggle && !!((_a = tag.acceptableDateTags) === null || _a === void 0 ? void 0 : _a.length); });
-        if (tagWithSpecificDateTags) {
-            this.hideNotAvailableTags(tagWithSpecificDateTags, scenarioTagsUi);
-        }
-        return this.sortScenarioTags(scenarioTagsUi);
-    }
-    sortScenarioTags(scenarioTagsUi) {
-        return orderBy(scenarioTagsUi, [
-            (tag) => (tag.type === TagTypes.DATE ? 0 : 1),
-            (tag) => (tag.name === 'File Status')
-        ]);
-    }
-    initExistingTagsConfig(scenario, scenarioTagsUi) {
-        forEach(this.currentTagsConfig, (tagConfig) => {
-            var _a;
-            const tagSubType = (_a = tagConfig === null || tagConfig === void 0 ? void 0 : tagConfig.options) === null || _a === void 0 ? void 0 : _a.sub_type;
-            const scenarioTagDataConfig = getScenarioTagDataConfig(this.isMultipleDimension);
-            if (!scenarioTagDataConfig || !scenarioTagDataConfig[scenario] || !scenarioTagDataConfig[scenario][tagSubType]) {
-                return;
-            }
-            const scenarioTagUi = tagConfig.type === TagTypes.DATE
-                ? find(scenarioTagsUi, { type: tagConfig.type })
-                : find(scenarioTagsUi, { selectedTagSubType: tagSubType });
-            scenarioTagUi.toggle = true;
-            scenarioTagUi.selectedTagSubType = tagSubType;
-        });
+    onModelChange(value) {
+        this._textareaInitialHeight = false;
+        this.inputChange.emit(value);
     }
-    prepareScenarioTag(scenarioTagsConfig, scenarioTag, scenario, isDateTag) {
-        const toggleStatus = isDateTag
-            ? some(scenarioTagsConfig, (tag) => tag.type === TagTypes.DATE && tag.scenarioData.toggle)
-            : scenarioTag.scenarioData.toggle;
-        const selectedTagSubType = isDateTag
-            ? this.getScenarioSelectedDateTag(scenario, scenarioTagsConfig)
-            : scenarioTag.options.sub_type;
-        const tag = {
-            toggle: this.areExistingTagsConfig ? false : toggleStatus,
-            name: scenarioTag.scenarioData.name || scenarioTag.name,
-            description: scenarioTag.scenarioData.description || scenarioTag.description,
-            type: scenarioTag.type,
-            selectedTagSubType,
-        };
-        if (scenarioTag.scenarioData.turnOffDateTags) {
-            tag.turnOffDateTags = scenarioTag.scenarioData.turnOffDateTags;
-        }
-        if (scenarioTag.scenarioData.acceptableDateTags) {
-            tag.acceptableDateTags = scenarioTag.scenarioData.acceptableDateTags;
+    getTextAreaHeight(textAreaElement) {
+        let height;
+        if (this._textareaInitialHeight) {
+            height = 50;
         }
-        return tag;
-    }
-    sortedScenarioSubTags(tag) {
-        const SUB_TAGS_ORDER = [TagsConfigSubType.DAY, TagsConfigSubType.WEEK, TagsConfigSubType.MONTH, TagsConfigSubType.QUARTER, TagsConfigSubType.YEAR];
-        return orderBy(tag.subTags, (subTag) => indexOf(SUB_TAGS_ORDER, subTag.subType));
-    }
-    updateScenarioSubTags(tag, scenarioTag) {
-        if (!tag.subTags) {
-            tag.subTags = [];
+        else {
+            height = textAreaElement.scrollHeight + 2;
         }
-        const tagSubType = scenarioTag.options.sub_type;
-        tag.subTags.push({
-            subType: tagSubType,
-            name: tagSubType === TagsConfigSubType.FORECAST_NEW ? this.DEFAULT_FORECAST_DATE_TAG : scenarioTag.name,
-        });
+        return `height: ${height}px;`;
     }
-    turnOffDateTag(scenarioTags) {
-        const dateTag = find(scenarioTags, { type: TagTypes.DATE });
-        if (!dateTag)
-            return;
-        dateTag.toggle = false;
+}
+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    <div class=\"message-row__input\">\n            <textarea #textAreaElement\n                      (focus)=\"inputFocus = true\"\n                      (blur)=\"inputFocus = false\"\n                      (mouseenter)=\"inputHover = true\"\n                      (mouseleave)=\"inputHover = false\"\n                      [(ngModel)]=\"message\"\n                      [rows]=\"1\"\n                      [style]=\"getTextAreaHeight(textAreaElement)\"\n                      (ngModelChange)=\"onModelChange($event)\"\n                      type=\"text\"\n                      placeholder=\"{{ fileOver ? dropFilePlaceholder : messagePlaceholder }}\"\n                      (keyup.enter)=\"sendMessage()\">\n            </textarea>\n        <i *ngIf=\"!waitForReply\" (click)=\"sendMessage()\" class=\"dr-icon-notify send-button\"></i>\n        <dr-dot-flashing *ngIf=\"waitForReply\" class=\"wait-reply-dot-flashing\"></dr-dot-flashing>\n        <dr-button *ngIf=\"waitForReply\" (click)=\"abortMessage()\" theme=\"ghost\" class=\"abort-button\">Stop generating</dr-button>\n    </div>\n</div>\n",
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                styles: [":host{display:flex;flex-direction:column;align-items:center;padding:0 24px;margin-top:12px}:host .message-row{display:flex;justify-content:center;width:100%;padding:0 0 21px;max-width:970px}:host .message-row__input{position:relative;display:flex;align-items:center;flex-grow:1;flex-direction:row;height:auto;overflow:visible;min-width:265px}:host .message-row__input textarea{font-size:14px;line-height:22px;max-height:100%;flex-grow:1;resize:none;padding:14px 40px 12px 23px;margin:auto;border:1px solid #DFE0E3;border-radius:12px;min-height:50px}:host .message-row__input textarea:focus{border:1px solid #7F7FDD}:host .message-row__input textarea::placeholder{color:#9ea1aa}:host .message-row__input .send-button{position:absolute;right:14px;cursor:pointer;color:#dfe0e3;font-size:28px}:host .message-row__input .wait-reply-dot-flashing{position:absolute;right:20px}:host .message-row__input textarea:focus+.send-button,:host .message-row__input .send-button:hover{color:#25258c}:host .message-row__input .abort-button{position:absolute;right:0;top:-44px}:host .message-row__input .abort-button::ng-deep button{background:#F2F2FF!important;border-radius:4px}:host input{flex:1}:host input.with-button{border-bottom-right-radius:0;border-top-right-radius:0}:host .dropped-files{display:flex;flex-direction:row;margin-bottom:.5rem;flex-wrap:wrap}:host .dropped-files__item{display:flex;flex-direction:column;justify-content:center;margin:0 10px 10px 0;position:relative}:host .dropped-files__item__preview{background-size:cover;background-position:center;width:64px;height:64px;border-radius:8px;border:1px solid #ccc}:host .dropped-files__item__preview i{font-size:62px}:host .dropped-files__item__name{white-space:nowrap;font-size:12px;color:#8f929e;margin-top:4px;max-width:64px;overflow:hidden;text-overflow:ellipsis}:host .dropped-files__item__remove{position:absolute;right:-4px;top:-4px;cursor:pointer;background: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 }],
+    waitForReply: [{ type: Input }],
+    send: [{ type: Output }],
+    abort: [{ 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();
     }
-    hideNotAvailableTags(tagWithSpecificDateTags, scenarioTags) {
-        var _a;
-        const subTags = (_a = find(scenarioTags, { type: TagTypes.DATE })) === null || _a === void 0 ? void 0 : _a.subTags;
-        if (!subTags.length)
-            return;
-        forEach(scenarioTags, (tag) => {
-            var _a;
-            if (!((_a = tag.acceptableDateTags) === null || _a === void 0 ? void 0 : _a.length))
-                return;
-            if (tag !== tagWithSpecificDateTags) {
-                tag.toggle = false;
-            }
-        });
-        forEach(subTags, (subTag) => {
-            subTag.hidden = !tagWithSpecificDateTags.acceptableDateTags.includes(subTag.subType);
-        });
+    register(type, instance) {
+        this.customMessages.set(type, instance);
     }
-    getScenarioSelectedDateTag(scenario, dateTags) {
-        var _a, _b;
-        const monthSubType = (_b = (_a = find(dateTags, (tag) => tag.options.sub_type === TagsConfigSubType.MONTH)) === null || _a === void 0 ? void 0 : _a.options) === null || _b === void 0 ? void 0 : _b.sub_type;
-        const scenarioSelectedDateTag = {
-            [Scenario.ACTUALS]: () => monthSubType,
-            [Scenario.BUDGET]: () => { var _a, _b; return (_b = (_a = find(dateTags, (tag) => tag.options.sub_type === TagsConfigSubType.YEAR)) === null || _a === void 0 ? void 0 : _a.options) === null || _b === void 0 ? void 0 : _b.sub_type; },
-            [Scenario.FORECAST]: () => { var _a, _b; return (_b = (_a = find(dateTags, (tag) => tag.options.sub_type === TagsConfigSubType.FORECAST_NEW)) === null || _a === void 0 ? void 0 : _a.options) === null || _b === void 0 ? void 0 : _b.sub_type; },
-            [Scenario.NONE]: () => monthSubType,
-        };
-        if (!scenarioSelectedDateTag[scenario])
-            return;
-        return scenarioSelectedDateTag[scenario]();
+    unregister(type) {
+        return this.customMessages.delete(type);
     }
-    getScenarioTagsConfig(scenario, tagsConfig) {
-        return reduce(tagsConfig, (acc, tagConfig) => {
-            var _a;
-            const tagSubType = (_a = tagConfig === null || tagConfig === void 0 ? void 0 : tagConfig.options) === null || _a === void 0 ? void 0 : _a.sub_type;
-            const scenarioTagDataConfig = getScenarioTagDataConfig(this.isMultipleDimension);
-            const scenarioTagConfig = scenarioTagDataConfig && scenarioTagDataConfig[scenario] ?
-                scenarioTagDataConfig[scenario][tagSubType] : null;
-            if (!scenarioTagConfig || scenarioTagConfig.hidden)
-                return acc;
-            const clonedTagConfig = cloneDeep(tagConfig);
-            const scenarioTag = Object.assign(Object.assign({}, clonedTagConfig), { scenarioData: scenarioTagConfig });
-            acc.push(scenarioTag);
-            return acc;
-        }, []);
+    getInstance(type) {
+        return this.customMessages.get(type);
     }
 }
-ScenarioService.decorators = [
+DrChatCustomMessageService.decorators = [
     { type: Injectable }
 ];
 
-class DrSharedUtils {
+class DrChatMessageComponent {
+    constructor(customMessageService) {
+        this.customMessageService = customMessageService;
+        this.MESSAGE_TYPE = CHAT_MESSAGE_TYPE;
+        this._reply = false;
+    }
+    get flyInOut() {
+        return true;
+    }
+    get notReply() {
+        return !this.reply;
+    }
     /**
-     * Get timeframe (day, year, month, quarter) based on passed format
-     *
-     * @param format - date format string. Examples: MM/DD/YYYY, Q/YYYY
+     * Determines if a message is a reply
      */
-    static getTimeframeByDateFormat(format) {
-        const defaultFrame = TimeframeOption.DAY;
-        if (!format) {
-            return defaultFrame;
-        }
-        const lowerCaseFormat = format.toLowerCase();
-        switch (true) {
-            case lowerCaseFormat.includes('q'):
-                return TimeframeOption.QUARTER;
-            case lowerCaseFormat.includes('d'):
-                return TimeframeOption.DAY;
-            case lowerCaseFormat.includes('w'):
-                return TimeframeOption.WEEK;
-            case lowerCaseFormat.includes('m'):
-                return TimeframeOption.MONTH;
-            case lowerCaseFormat.includes('y'):
-                return TimeframeOption.YEAR;
-            default:
-                return defaultFrame;
-        }
+    get reply() {
+        return this._reply;
     }
-    static getDateByTag(tag) {
-        const todayDate = moment$9().utc().endOf('day');
-        switch (tag) {
-            case DateTags.TODAY:
-                return todayDate;
-            case DateTags.YESTERDAY:
-                todayDate.subtract(1, 'days');
-                return todayDate;
-            case DateTags.THIS_MONTH:
-                todayDate.endOf('month');
-                return todayDate;
-            case DateTags.PREV_MONTH:
-                todayDate.subtract(1, 'months').endOf('month');
-                return todayDate;
+    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;
     }
 }
-
-// @ts-ignore
-const moment$2 = require('moment');
-class DrDatePickerService {
-    constructor() {
-        this.isTimeframeSelectionEnabled = false;
-        this.timeframe = TimeframeOption.DAY;
-        this.format$ = new BehaviorSubject(DateFromats.MAT_DEFAULT_DATE_FORMAT);
-        this.updatedQuarter$ = new Subject();
-        this.updatedDateAndClose$ = new Subject();
-        this.presetTag$ = new BehaviorSubject('');
-        this.onSameDaySelectedInCalendar$ = new Subject();
-        this.keepPresetTag = false;
-        this.isValueUpdating = false;
-        this.availableTimeframes = [
-            TimeframeOption.DAY,
-            TimeframeOption.WEEK,
-            TimeframeOption.MONTH,
-            TimeframeOption.QUARTER,
-            TimeframeOption.YEAR
-        ];
-        this.formatConfig = {
-            day: DateFromats.MAT_DEFAULT_DATE_FORMAT,
-            month: DateFromats.MONTH_YEAR_FORMAT,
-            year: DateFromats.YEAR_FORMAT,
-            quarter: DateFromats.QUARTER_FORMAT,
-            week: DateFromats.WEEK_FORMAT
-        };
-        this.fiscalYearMonthsModifier = 0;
+DrChatMessageComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'dr-chat-message',
+                template: "<ng-container *ngIf=\"message.avatarUrl; else userAvatar\">\n    <div class=\"avatar\" [style.background-image]=\"'url(' + message.avatarUrl + ')'\"></div>\n</ng-container>\n<ng-template #userAvatar>\n    <dr-avatar *ngIf=\"message.user\" [users]=\"message.user\"></dr-avatar>\n</ng-template>\n<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-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 class=\"message__actions\" *ngIf=\"drChatMessageActions;\">\n        <ng-container [ngTemplateOutlet]=\"drChatMessageActions\"></ng-container>\n    </div>\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{position:relative;display:flex;flex-direction:row;width:100%;background:rgba(249,250,255,.7);border-top:1px solid #E5E5E5;padding:16px 24px}:host:first-child{border:none}:host:last-child{border-bottom:1px solid #E5E5E5}.reply+:host.reply,.not-reply+:host.not-reply{border-top:none;padding-top:0;padding-left:75px}.reply+:host.reply .avatar,.reply+:host.reply dr-avatar,.not-reply+:host.not-reply .avatar,.not-reply+:host.not-reply dr-avatar{display:none}:host.not-reply{background-color:#fff}:host .avatar{display:flex;width:28px;height:28px;background-color:#fff;border-radius:16px;flex-shrink:0;box-shadow:0 1px 3px 1px #0003;background-image:url(\"data:image/svg+xml,%3C%3Fxml version%3D%221.0%22 encoding%3D%22UTF-8%22%3F%3E%3Csvg id%3D%22Layer_1%22 data-name%3D%22Layer 1%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22 viewBox%3D%220 0 74 65%22%3E  %3Cdefs%3E    %3Cstyle%3E      .cls-1%2C .cls-2%2C .cls-3 %7B        fill%3A none%3B      %7D      .cls-4 %7B        fill%3A url(%23linear-gradient)%3B      %7D      .cls-5 %7B        fill%3A %234eb7df%3B      %7D      .cls-2 %7B        stroke%3A %23a6a8aa%3B        stroke-miterlimit%3A 10%3B        stroke-width%3A .37px%3B      %7D      .cls-6 %7B        fill%3A url(%23linear-gradient-3)%3B      %7D      .cls-7 %7B        fill%3A url(%23linear-gradient-2)%3B      %7D      .cls-3 %7B        clip-path%3A url(%23clippath)%3B      %7D    %3C%2Fstyle%3E    %3CclipPath id%3D%22clippath%22%3E      %3Crect class%3D%22cls-1%22 width%3D%2274%22 height%3D%2265%22%2F%3E    %3C%2FclipPath%3E    %3ClinearGradient id%3D%22linear-gradient%22 x1%3D%2224.26%22 y1%3D%22-3.79%22 x2%3D%2295.63%22 y2%3D%2288.82%22 gradientTransform%3D%22translate(0 65.89) scale(1 -1)%22 gradientUnits%3D%22userSpaceOnUse%22%3E      %3Cstop offset%3D%220%22 stop-color%3D%22%237676ff%22%2F%3E      %3Cstop offset%3D%22.18%22 stop-color%3D%22%235959ff%22%2F%3E      %3Cstop offset%3D%22.35%22 stop-color%3D%22%235757e0%22%2F%3E      %3Cstop offset%3D%22.61%22 stop-color%3D%22%234646ce%22%2F%3E      %3Cstop offset%3D%22.84%22 stop-color%3D%22%234b4be4%22%2F%3E      %3Cstop offset%3D%221%22 stop-color%3D%22%234444eb%22%2F%3E    %3C%2FlinearGradient%3E    %3ClinearGradient id%3D%22linear-gradient-2%22 x1%3D%2212.05%22 y1%3D%2277.06%22 x2%3D%2210.77%22 y2%3D%2213.85%22 gradientTransform%3D%22translate(0 65.89) scale(1 -1)%22 gradientUnits%3D%22userSpaceOnUse%22%3E      %3Cstop offset%3D%22.45%22 stop-color%3D%22%232f92b8%22%2F%3E      %3Cstop offset%3D%22.84%22 stop-color%3D%22%234eb7df%22%2F%3E      %3Cstop offset%3D%221%22 stop-color%3D%22%234eb7df%22%2F%3E    %3C%2FlinearGradient%3E    %3ClinearGradient id%3D%22linear-gradient-3%22 x1%3D%2262.26%22 y1%3D%22-2.54%22 x2%3D%2261.76%22 y2%3D%2285.91%22 gradientTransform%3D%22translate(0 65.89) scale(1 -1)%22 gradientUnits%3D%22userSpaceOnUse%22%3E      %3Cstop offset%3D%220%22 stop-color%3D%22%2336369b%22%2F%3E      %3Cstop offset%3D%22.52%22 stop-color%3D%22%234848d0%22%2F%3E    %3C%2FlinearGradient%3E  %3C%2Fdefs%3E  %3Cg class%3D%22cls-3%22%3E    %3Cg%3E      %3Cpath class%3D%22cls-4%22 d%3D%22m73.32%2C24.79v15.73c0%2C13.12-9.87%2C23.79-22%2C23.79h-21.32c-3.46-.06-6.25-3.11-6.25-6.87s2.79-6.81%2C6.25-6.87h21.32c5.13%2C0%2C9.29-4.51%2C9.29-10.05v-15.73c0-5.54-4.17-10.05-9.29-10.05h-7.46c3.51%2C0%2C6.35-3.08%2C6.35-6.88s-2.79-6.8-6.25-6.87h7.35c12.12%2C0%2C22%2C10.67%2C22%2C23.79h0Z%22%2F%3E      %3Cpath class%3D%22cls-5%22 d%3D%22m50.26%2C7.82c0%2C3.8-2.9%2C6.93-6.41%2C6.93h-21.86c-5.13%2C0-9.29%2C4.51-9.29%2C10.05v15.73c0%2C5.54%2C4.17%2C10.05%2C9.29%2C10.05h8.01c-3.46.06-6.25%2C3.11-6.25%2C6.87s2.79%2C6.81%2C6.25%2C6.87h-8.01c-12.12%2C0-22-10.67-22-23.79v-15.73C0%2C11.68%2C9.87%2C1%2C21.99%2C1h21.97c3.46.06%2C6.3%2C3.06%2C6.3%2C6.82Z%22%2F%3E      %3Cpath class%3D%22cls-2%22 d%3D%22m66.45%2C1h-.22.22%2C0Z%22%2F%3E      %3Cpath class%3D%22cls-2%22 d%3D%22m36.05%2C50.58h-.22.22%2C0Z%22%2F%3E      %3Cpath class%3D%22cls-7%22 d%3D%22m0%2C33.78v-2.76C0%2C12.9%2C13.62%2C14.48%2C13.62%2C14.48h8.38c-5.5.46-9.5%2C4.71-9.5%2C9.96l.02%2C15.8c0%2C5.54%2C4.44%2C10.59%2C9.48%2C10.59l-8-.5S0%2C51.88%2C0%2C33.77h0Z%22%2F%3E      %3Cpath class%3D%22cls-6%22 d%3D%22m73%2C31.51v2.76c0%2C18.12-13.62%2C16.53-13.62%2C16.53h-7.99c5.61-.85%2C9.09-4.76%2C9.09-10.02l.02-16.33c0-5.54-4.46-10-9.5-10h8s13.99-1.05%2C13.99%2C17.07h0Z%22%2F%3E    %3C%2Fg%3E  %3C%2Fg%3E%3C%2Fsvg%3E\");background-size:20px 22px;background-repeat:no-repeat;background-position-x:4px;background-position-y:3px}:host .avatar,:host dr-avatar{margin:0 23px 0 0}:host .message{display:flex;align-items:center;flex-grow:1}:host .message__actions{display:flex;align-items:center;margin-left:24px;flex-grow:1;justify-content:flex-end}:host .message__actions::ng-deep button:not(:hover) i[class*=dr-icon]{color:#b9b9ec!important}\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 }],
+    user: [{ type: Input }],
+    drChatMessageActions: [{ type: ContentChild, args: ['drChatMessageActions',] }]
+};
+
+class DrChatSuggestionsComponent {
+    constructor(cdr) {
+        this.cdr = cdr;
+        this._nonHiddenValues = [];
+        this.visibleValues = [];
+        this.isSuggestedMenuOpen = false;
+        this.values = [];
+        this.fullScreen = false;
+        this.buttonMode = false;
+        /**
+         * Parameter to check is send message function available
+         *
+         * @type {boolean}
+         */
+        this.waitForReply = false;
+        this.suggestionSelect = new EventEmitter();
     }
-    getDisplayPrefix() {
-        const formatCached = this.format$.getValue();
-        switch (true) {
-            case formatCached === null || formatCached === void 0 ? void 0 : formatCached.includes('Q'):
-                return 'Q';
-            case formatCached === null || formatCached === void 0 ? void 0 : formatCached.includes('W'):
-                return 'W';
-            default:
-                return '';
-        }
+    get hiddenValues() {
+        return JSON.parse(localStorage.getItem('aiChatSuggestions')) || [];
     }
-    getTimeframe(format) {
-        return DrSharedUtils.getTimeframeByDateFormat(format);
+    set hiddenValues(values) {
+        localStorage.setItem('aiChatSuggestions', JSON.stringify(values));
     }
-    getConfiguredFormat(timeframe) {
-        return this.formatConfig[timeframe];
+    ngOnInit() {
+        this.filterValues();
     }
-    updateTimeframeAndFormat(format) {
-        const normalizedFormat = this.normalizeValue(format || this.format$.getValue());
-        this.timeframe = this.getTimeframe(normalizedFormat);
-        this.format$.next(this.getConfiguredFormat(this.timeframe));
+    onItemClick(item) {
+        if (this.waitForReply) {
+            return;
+        }
+        this.isSuggestedMenuOpen = false;
+        this.suggestionSelect.emit(item);
+        this.hiddenValues = [...this.hiddenValues, item];
+        this.filterValues();
     }
-    normalizeValue(value) {
-        return value.replace(/d/g, 'D');
+    filterValues() {
+        const hiddenValues = this.hiddenValues;
+        this._nonHiddenValues = _.filter(this.values, val => !hiddenValues.includes(val));
+        this.fillVisibleValues();
     }
-    /**
-     * 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;
+    fillVisibleValues() {
+        const maxItemsCount = this.fullScreen ? 6 : 4;
+        const nonHiddenValues = _.clone(this._nonHiddenValues);
+        this.visibleValues.length = 0;
+        for (let i = 0; i < maxItemsCount; i++) {
+            if (!nonHiddenValues.length) {
+                break;
+            }
+            const randomIndex = Math.floor(Math.random() * nonHiddenValues.length);
+            const item = nonHiddenValues.splice(randomIndex, 1)[0];
+            this.visibleValues.push(item);
         }
-        return Math.trunc((date.month() - fiscalMonth) / 3) + 1;
+        this.cdr.markForCheck();
     }
-    /**
-     * 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');
+    clearHidden() {
+        localStorage.setItem('aiChatSuggestions', null);
+        this.filterValues();
     }
-    /**
-     * 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');
+    toggleSuggestedMenu() {
+        this.isSuggestedMenuOpen = !this.isSuggestedMenuOpen;
+        if (this.isSuggestedMenuOpen) {
+            this.fillVisibleValues();
+        }
+        this.cdr.markForCheck();
     }
-    /**
-     * 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));
+}
+DrChatSuggestionsComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'dr-chat-suggestions',
+                template: "<div class=\"chat-suggestions\">\n    <ng-container *ngIf=\"buttonMode; else suggestionCards\">\n        <div class=\"chat-suggestions__container\"\n             [class.chat-suggestions__container--opened]=\"isSuggestedMenuOpen\"\n             *ngIf=\"visibleValues.length\">\n            <dr-button theme=\"ghost\" class=\"chat-suggestions__container__button\" (click)=\"toggleSuggestedMenu()\">\n                Suggested chats\n            </dr-button>\n            <ng-container *ngTemplateOutlet=\"suggestionCards\"></ng-container>\n        </div>\n    </ng-container>\n</div>\n\n<ng-template #suggestionCards>\n    <div class=\"chat-suggestions__items\">\n        <div class=\"chat-suggestions__items__background\"></div>\n        <div *ngFor=\"let item of visibleValues\"\n             class=\"chat-suggestions__items__item\" (click)=\"onItemClick(item)\">\n            {{ item }}\n        </div>\n    </div>\n</ng-template>\n",
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                styles: [":host{display:flex;align-items:flex-start;justify-content:center}:host .chat-suggestions{display:flex;width:100%;max-width:970px}:host .chat-suggestions__container{display:flex;position:relative;width:auto;margin-top:12px;padding:0 24px}:host .chat-suggestions__container__button{z-index:3}:host .chat-suggestions__container__button::ng-deep button{background:#F2F2FB!important;border-radius:4px;cursor:pointer}:host .chat-suggestions__container .chat-suggestions__items{display:none;position:absolute;width:100%;bottom:0;left:0;padding-bottom:32px;z-index:2}:host .chat-suggestions__container--opened{width:100%}:host .chat-suggestions__container--opened .chat-suggestions__container__button::ng-deep button{color:#4646ce;background:#F2F2FB}:host .chat-suggestions__container--opened .chat-suggestions__items,:host .chat-suggestions__container--opened .chat-suggestions__items__background{display:flex}:host .chat-suggestions__items{display:flex;flex-wrap:wrap;width:100%;justify-content:space-between;padding:0 24px}:host .chat-suggestions__items__background{display:none;position:absolute;top:-32px;right:0;bottom:32px;left:0;background:#FFFFFF;opacity:.7;z-index:-1}:host .chat-suggestions__items__item{margin:0 0 20px;display:inline-flex;height:76px;width:275px;padding:16px;border-radius:8px;background:#F2F2FB;box-shadow:0 1px 2px #00000026;font-size:14px;line-height:24px;color:#25258c}:host .chat-suggestions__items__item:hover{cursor:pointer;background:#EAEAFF}\n"]
+            },] }
+];
+DrChatSuggestionsComponent.ctorParameters = () => [
+    { type: ChangeDetectorRef }
+];
+DrChatSuggestionsComponent.propDecorators = {
+    values: [{ type: Input }],
+    fullScreen: [{ type: Input }],
+    buttonMode: [{ type: Input }],
+    waitForReply: [{ type: Input }],
+    suggestionSelect: [{ type: Output }]
+};
+
+class DrChatComponent {
+    constructor(cdr) {
+        this.cdr = cdr;
+        this.destroy$ = new Subject();
+        this.showClearButton = true;
+        this.noMessagesPlaceholder = 'No messages yet.';
+        this._scrollBottom = true;
+        this.suggestions = [];
+        /**
+         * Parameter to check is send message function available
+         *
+         * @type {boolean}
+         */
+        this.waitForReply = false;
+        this.clear = new EventEmitter();
+        this.close = new EventEmitter();
+        this.suggestionSelect = new EventEmitter();
     }
-    /**
-     * 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));
+    set contentUpdateSubject(value) {
+        if (value) {
+            value.pipe(takeUntil(this.destroy$)).subscribe(() => {
+                this.updateView();
+            });
+        }
     }
+    ;
     /**
-     * If date selection on this timeframe depends on Fiscal Year
-     *
-     * @param timeframe
+     * Scroll chat to the bottom of the list when a new message arrives
      */
-    isTimeframeDependingOnFY(timeframe) {
-        return _.includes([TimeframeOption.QUARTER, TimeframeOption.YEAR], timeframe);
+    get scrollBottom() {
+        return this._scrollBottom;
     }
-    /**
-     * Subtract from date fiscal year shift months count
-     *
-     * @param date
-     */
-    subtractFiscalYearMonthsFromDate(date) {
-        return this.getDateModifiedByFiscalMonths(date, true);
+    set scrollBottom(value) {
+        this._scrollBottom = !!value;
     }
-    /**
-     * Add to date fiscal year shift months count
-     *
-     * @param date
-     */
-    addFiscalYearMonthsToDate(date) {
-        return this.getDateModifiedByFiscalMonths(date);
+    get messagesContainerWithScroll() {
+        return this.messagesContainer && this.messagesContainer.nativeElement.scrollHeight > this.messagesContainer.nativeElement.offsetHeight;
     }
-    /**
-     * 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;
+    ;
+    ngAfterViewInit() {
+        this.messages.changes.subscribe(messages => {
+            this.messages = messages;
+            this.updateView();
+        });
+        this.updateView();
     }
-    updateDatePickerByPreset(tag, calender) {
-        this.keepPresetTag = true;
-        let date = null;
-        if (tag) {
-            date = DrSharedUtils.getDateByTag(tag);
-            switch (tag) {
-                case DateTags.TODAY:
-                    this.updateTimeframeAndFormat(DateFromats.MAT_DEFAULT_DATE_FORMAT);
-                    break;
-                case DateTags.YESTERDAY:
-                    this.updateTimeframeAndFormat(DateFromats.MAT_DEFAULT_DATE_FORMAT);
-                    break;
-                case DateTags.THIS_MONTH:
-                    this.updateTimeframeAndFormat(DateFromats.MONTH_YEAR_FORMAT);
-                    this.selectDateInCalendarMonthView(date, calender);
-                    break;
-                case DateTags.PREV_MONTH:
-                    this.updateTimeframeAndFormat(DateFromats.MONTH_YEAR_FORMAT);
-                    this.selectDateInCalendarMonthView(date, calender);
-                    break;
-            }
+    updateView() {
+        if (this.scrollBottom) {
+            this.scrollListBottom();
         }
-        this.presetTag$.next(tag);
-        this.updatedDateAndClose$.next(date);
     }
-    selectDateInCalendarMonthView(date, calender) {
+    scrollListBottom() {
         setTimeout(() => {
-            const monthView = calender.monthView;
-            if (monthView) {
-                monthView._activeDate = date;
-                monthView._selected = date;
-                monthView._init();
-            }
-        });
-    }
-    resetPresetTag() {
-        if (!this.keepPresetTag) {
-            this.presetTag$.next(null);
-        }
-        else {
-            this.keepPresetTag = false;
-        }
-    }
-}
-DrDatePickerService.decorators = [
-    { type: Injectable }
-];
-
-// @ts-ignore
-const moment$1 = require('moment');
-class DrDatePickerCustomHeaderComponent {
-    constructor(_calendar, _dateAdapter, _dateFormats, cdr, datePickerService) {
-        this._calendar = _calendar;
-        this._dateAdapter = _dateAdapter;
-        this._dateFormats = _dateFormats;
-        this.cdr = cdr;
-        this.datePickerService = datePickerService;
-        this._destroyed = new Subject();
-        this.quarters = [1, 2, 3, 4];
-        this.selectedQuarter = 1;
-        this.timeframeOptions = [{
-                timeframe: TimeframeOption.DAY,
-                title: 'Day',
-                value: CalendarView.FOR_DAYS,
-                format: this.datePickerService.formatConfig.day,
-                periodLabel: () => this._dateAdapter.format(this._calendar.activeDate, this._dateFormats.display.monthYearLabel).toLocaleUpperCase()
-            }, {
-                timeframe: TimeframeOption.WEEK,
-                title: 'Week',
-                value: CalendarView.FOR_DAYS,
-                format: this.datePickerService.formatConfig.week,
-                periodLabel: () => this._dateAdapter.format(this._calendar.activeDate, this._dateFormats.display.monthYearLabel).toLocaleUpperCase()
-            }, {
-                timeframe: TimeframeOption.MONTH,
-                title: 'Month',
-                value: CalendarView.FOR_MONTHS,
-                format: this.datePickerService.formatConfig.month,
-                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.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.datePickerService.subtractFiscalYearMonthsFromDate(this._calendar.activeDate)).utc().year();
-                    const startPeriod = Math.floor(currentYear / 24) * 24;
-                    return startPeriod + '-' + (startPeriod + 23);
+            if (this.messagesContainer) {
+                const scrollToOptions = {
+                    top: this.messagesContainer.nativeElement.scrollHeight,
+                };
+                if (!this.reopen) {
+                    scrollToOptions.behavior = 'smooth';
                 }
-            }];
-        this.pagingSetup = {
-            [CalendarView.FOR_MONTHS]: (forward) => this.pagingDateChange('addCalendarYears', 1, forward),
-            [CalendarView.FOR_QUARTERS]: (forward) => this.pagingDateChange('addCalendarYears', 1, forward),
-            [CalendarView.FOR_DAYS]: (forward) => this.pagingDateChange('addCalendarMonths', 1, forward),
-            [CalendarView.FOR_YEARS]: (forward) => this.pagingDateChange('addCalendarYears', 24, forward)
-        };
-        this.selectedTimeframe = CalendarView.FOR_DAYS;
-        this.timeframeSelection = false;
-        this.periodMonthLabel = '';
-        this.periodYearLabel = '';
-        this.presetTagList = PRESET_TAGS_LIST;
-        this.calendarView = CalendarView;
-        _calendar.stateChanges.pipe(takeUntil(this._destroyed)).subscribe(() => this.setPeriodLabels());
-        this.datePickerService.format$.pipe(takeUntil(this._destroyed)).subscribe(value => {
-            this.selectedTimeframe = this.timeframeOptions.filter(option => option.format === value)[0].value;
-            _calendar.currentView = this.selectedTimeframe;
-            this.setPeriodLabels();
-            if (this.selectedTimeframe === CalendarView.FOR_QUARTERS) {
-                this.selectedQuarter = this.datePickerService.getQuarterAccordingToFiscalYear(this._calendar.activeDate);
-            }
-        });
-        _calendar.viewChanged.pipe(takeUntil(this._destroyed)).subscribe(() => {
-            this.setPeriodLabels();
-            if (_calendar.multiYearView) {
-                this.transformDateInMultiyearViewAccordingToFY();
-            }
-        });
-        _calendar._userSelection.subscribe(date => {
-            if (!this.datePickerService.isValueUpdating) {
-                this.datePickerService.onSameDaySelectedInCalendar$.next(date.value);
-            }
-        });
-        this.datePickerService.calendarInstance = _calendar;
-    }
-    get selectedPresetTag() {
-        return this.datePickerService.presetTag$.getValue();
-    }
-    ;
-    ngOnInit() {
-        setTimeout(() => {
-            if (this._calendar.multiYearView) {
-                this.transformDateInMultiyearViewAccordingToFY();
+                this.messagesContainer.nativeElement.scrollTo(scrollToOptions);
+                this.cdr.markForCheck();
             }
         });
     }
     ngOnDestroy() {
-        this._destroyed.next();
-        this._destroyed.complete();
-    }
-    setPeriodLabels() {
-        const currentTimeframeOption = this.timeframeOptions.filter(option => option.value === this._calendar.currentView)[0];
-        const fullPeriodLabel = currentTimeframeOption.periodLabel();
-        if (this._calendar.currentView === CalendarView.FOR_DAYS) {
-            this.periodMonthLabel = fullPeriodLabel.slice(0, 3);
-            this.periodYearLabel = fullPeriodLabel.slice(4);
-        }
-        else {
-            this.periodMonthLabel = '';
-            this.periodYearLabel = fullPeriodLabel;
-        }
-        this.cdr.markForCheck();
-    }
-    setTimeframe(value) {
-        if (value !== this.selectedTimeframe) {
-            this.datePickerService.resetPresetTag();
-        }
-        this.selectedTimeframe = value;
-        this.timeframeSelection = false;
-        this._calendar.currentView = this.selectedTimeframe;
-        const chosenTimeframeOption = this.timeframeOptions.filter(option => option.value === this.selectedTimeframe)[0];
-        this.datePickerService.updateTimeframeAndFormat(chosenTimeframeOption.format);
-        if (this.selectedTimeframe === CalendarView.FOR_QUARTERS) {
-            this.selectedQuarter = this.datePickerService.getQuarterAccordingToFiscalYear(this._calendar.activeDate);
-        }
-    }
-    get currentViewIsQuarter() {
-        return ![CalendarView.FOR_DAYS, CalendarView.FOR_MONTHS, CalendarView.FOR_YEARS].includes(this._calendar.currentView);
-    }
-    switchViewOnClickOnPeriodLabel(view) {
-        this._calendar.currentView = view;
-    }
-    onSelectQuarter(quarterNumber) {
-        this.selectedQuarter = quarterNumber;
-        this.datePickerService.setEndOfQuarter(this._calendar.activeDate, quarterNumber);
-        this.datePickerService.updatedQuarter$.next(this._calendar.activeDate);
-        this.datePickerService.datePickerInstance.close();
+        this.destroy$.next();
+        this.destroy$.complete();
     }
-    pagingClicked(forward) {
-        if (this.pagingSetup[this._calendar.currentView]) {
-            this.pagingSetup[this._calendar.currentView](forward);
+    onClearClick($event) {
+        this.clear.emit($event);
+        if (this._chatSuggestions) {
+            this._chatSuggestions.clearHidden();
         }
     }
-    pagingDateChange(actionCall, amount, forward) {
-        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();
-    }
-    onSelectPresetTag(tag) {
-        if (tag.key === this.selectedPresetTag) {
-            this.datePickerService.presetTag$.next(null);
-        }
-        else {
-            this.datePickerService.presetTag$.next(tag.key);
+    hideSuggestions() {
+        if (this._chatSuggestions.isSuggestedMenuOpen) {
+            this._chatSuggestions.toggleSuggestedMenu();
         }
-        this.datePickerService.updateDatePickerByPreset(this.selectedPresetTag, this._calendar);
     }
 }
-DrDatePickerCustomHeaderComponent.decorators = [
+DrChatComponent.decorators = [
     { type: Component, args: [{
-                selector: 'dr-date-picker_custom-header.component',
-                template: "<div *ngIf=\"datePickerService.isTimeframeSelectionEnabled\" class=\"dr-datepicker__timeframe-select__wrapper\">\n\n    <div *ngIf=\"datePickerService.isUsingDateTagPresets\" class=\"dr-datepicker-preset-date\">\n        <div class=\"dr-datepicker-preset-date__tags\">\n            <div *ngFor=\"let tag of presetTagList\" \n                id=\"preset_tag\" \n                class=\"dr-datepicker-preset-date__tags__tag\" \n                (click)=\"onSelectPresetTag(tag)\" \n                [ngClass]=\"{'dr-datepicker-preset-date__tags__tag--selected': tag.key === selectedPresetTag}\"\n                [drTooltip]=\"selectedPresetTag === tag.key? 'Unselect preset' : ''\"\n                [drTooltipPosition]=\"'top'\">\n                {{ tag.label }}\n            </div>\n        </div>\n    </div>\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($event)\">\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-datepicker-preset-date{display:flex;flex-direction:column}.dr-datepicker-preset-date__tags{display:flex;padding-bottom:21px;padding-top:10px;font-size:12px}.dr-datepicker-preset-date__tags__tag{cursor:pointer;font-weight:400;line-height:20px!important;padding:2px 8px;border:1px solid #9EA1AA;border-radius:18px;background:#FFFFFF;margin-right:4px}.dr-datepicker-preset-date__tags__tag--selected{color:#4646ce;background:#F2F2FB;border:1px solid #4646CE}.dr-date-paging{display:flex;flex-direction:row;justify-content:space-between;align-items:center;padding:16px 32px;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"]
+                selector: 'dr-chat',
+                template: "<div class=\"chat\" [class.chat--in-full-screen]=\"fullScreen\">\n    <div class=\"chat__header\">\n        <div class=\"chat__header__logo\"></div>\n\n        <div class=\"chat__header__text\">\n            <div class=\"chat__header__text__title\">{{ title }}</div>\n            <div *ngIf=\"subtitle\" class=\"chat__header__text__subtitle\">{{ subtitle }}</div>\n        </div>\n\n        <dr-button *ngIf=\"showClearButton\"\n                   (click)=\"onClearClick($event)\"\n                   theme=\"icon\"\n                   icon=\"dr-icon-clear\"\n                   class=\"ml-auto\"\n                   drTooltip=\"Clear chat\">\n        </dr-button>\n\n        <dr-button *ngIf=\"!fullScreen\"\n                   (click)=\"close.emit($event)\"\n                   theme=\"icon\"\n                   icon=\"dr-icon-exit\"\n                   class=\"ml-4\"\n                   drTooltip=\"Close\">\n        </dr-button>\n    </div>\n\n    <div *ngIf=\"!messages?.length\" class=\"chat__empty-state\">\n        <span class=\"chat__empty-state__text\">{{ noMessagesPlaceholder }}</span>\n    </div>\n\n    <div *ngIf=\"messages?.length\" class=\"chat__messages\">\n        <div #messagesContainer class=\"chat__messages__container\"\n             [class.chat__messages__container--scroll]=\"messagesContainerWithScroll\">\n            <ng-content select=\"dr-chat-message\"></ng-content>\n        </div>\n    </div>\n\n    <dr-chat-suggestions *ngIf=\"suggestions?.length\"\n                         [values]=\"suggestions\"\n                         [fullScreen]=\"fullScreen\"\n                         [waitForReply]=\"waitForReply\"\n                         class=\"chat__suggestions\"\n                         [class.chat__suggestions--full-height]=\"fullScreen && !messages?.length\"\n                         [buttonMode]=\"!!messages?.length\"\n                         (suggestionSelect)=\"suggestionSelect.emit($event)\">\n    </dr-chat-suggestions>\n\n    <div class=\"form\">\n        <ng-content select=\"dr-chat-form\"></ng-content>\n    </div>\n</div>\n",
+                providers: [DrChatCustomMessageService],
+                styles: [":host{height:100%;width:100%;display:flex;flex-direction:column}.chat{position:relative;display:flex;flex-grow:1;flex-direction:column;height:100%;background-color:#fff;color:#4e566c;font-family:\"Poppins\",sans-serif;font-size:14px;font-weight:400;line-height:22px}.chat__header{display:flex;align-items:center;background-color:#f2f2ff;color:#25258c;padding:15px 24px;font-weight:400;font-size:20px;line-height:28px;box-shadow:0 1px 3px #0003;z-index:1}.chat__header__logo{display:flex;width:43px;height:38px;background:url(\"data:image/svg+xml,%3C%3Fxml version%3D%221.0%22 encoding%3D%22UTF-8%22%3F%3E%3Csvg id%3D%22Layer_1%22 data-name%3D%22Layer 1%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22 viewBox%3D%220 0 74 65%22%3E  %3Cdefs%3E    %3Cstyle%3E      .cls-1%2C .cls-2%2C .cls-3 %7B        fill%3A none%3B      %7D      .cls-4 %7B        fill%3A url(%23linear-gradient)%3B      %7D      .cls-5 %7B        fill%3A %234eb7df%3B      %7D      .cls-2 %7B        stroke%3A %23a6a8aa%3B        stroke-miterlimit%3A 10%3B        stroke-width%3A .37px%3B      %7D      .cls-6 %7B        fill%3A url(%23linear-gradient-3)%3B      %7D      .cls-7 %7B        fill%3A url(%23linear-gradient-2)%3B      %7D      .cls-3 %7B        clip-path%3A url(%23clippath)%3B      %7D    %3C%2Fstyle%3E    %3CclipPath id%3D%22clippath%22%3E      %3Crect class%3D%22cls-1%22 width%3D%2274%22 height%3D%2265%22%2F%3E    %3C%2FclipPath%3E    %3ClinearGradient id%3D%22linear-gradient%22 x1%3D%2224.26%22 y1%3D%22-3.79%22 x2%3D%2295.63%22 y2%3D%2288.82%22 gradientTransform%3D%22translate(0 65.89) scale(1 -1)%22 gradientUnits%3D%22userSpaceOnUse%22%3E      %3Cstop offset%3D%220%22 stop-color%3D%22%237676ff%22%2F%3E      %3Cstop offset%3D%22.18%22 stop-color%3D%22%235959ff%22%2F%3E      %3Cstop offset%3D%22.35%22 stop-color%3D%22%235757e0%22%2F%3E      %3Cstop offset%3D%22.61%22 stop-color%3D%22%234646ce%22%2F%3E      %3Cstop offset%3D%22.84%22 stop-color%3D%22%234b4be4%22%2F%3E      %3Cstop offset%3D%221%22 stop-color%3D%22%234444eb%22%2F%3E    %3C%2FlinearGradient%3E    %3ClinearGradient id%3D%22linear-gradient-2%22 x1%3D%2212.05%22 y1%3D%2277.06%22 x2%3D%2210.77%22 y2%3D%2213.85%22 gradientTransform%3D%22translate(0 65.89) scale(1 -1)%22 gradientUnits%3D%22userSpaceOnUse%22%3E      %3Cstop offset%3D%22.45%22 stop-color%3D%22%232f92b8%22%2F%3E      %3Cstop offset%3D%22.84%22 stop-color%3D%22%234eb7df%22%2F%3E      %3Cstop offset%3D%221%22 stop-color%3D%22%234eb7df%22%2F%3E    %3C%2FlinearGradient%3E    %3ClinearGradient id%3D%22linear-gradient-3%22 x1%3D%2262.26%22 y1%3D%22-2.54%22 x2%3D%2261.76%22 y2%3D%2285.91%22 gradientTransform%3D%22translate(0 65.89) scale(1 -1)%22 gradientUnits%3D%22userSpaceOnUse%22%3E      %3Cstop offset%3D%220%22 stop-color%3D%22%2336369b%22%2F%3E      %3Cstop offset%3D%22.52%22 stop-color%3D%22%234848d0%22%2F%3E    %3C%2FlinearGradient%3E  %3C%2Fdefs%3E  %3Cg class%3D%22cls-3%22%3E    %3Cg%3E      %3Cpath class%3D%22cls-4%22 d%3D%22m73.32%2C24.79v15.73c0%2C13.12-9.87%2C23.79-22%2C23.79h-21.32c-3.46-.06-6.25-3.11-6.25-6.87s2.79-6.81%2C6.25-6.87h21.32c5.13%2C0%2C9.29-4.51%2C9.29-10.05v-15.73c0-5.54-4.17-10.05-9.29-10.05h-7.46c3.51%2C0%2C6.35-3.08%2C6.35-6.88s-2.79-6.8-6.25-6.87h7.35c12.12%2C0%2C22%2C10.67%2C22%2C23.79h0Z%22%2F%3E      %3Cpath class%3D%22cls-5%22 d%3D%22m50.26%2C7.82c0%2C3.8-2.9%2C6.93-6.41%2C6.93h-21.86c-5.13%2C0-9.29%2C4.51-9.29%2C10.05v15.73c0%2C5.54%2C4.17%2C10.05%2C9.29%2C10.05h8.01c-3.46.06-6.25%2C3.11-6.25%2C6.87s2.79%2C6.81%2C6.25%2C6.87h-8.01c-12.12%2C0-22-10.67-22-23.79v-15.73C0%2C11.68%2C9.87%2C1%2C21.99%2C1h21.97c3.46.06%2C6.3%2C3.06%2C6.3%2C6.82Z%22%2F%3E      %3Cpath class%3D%22cls-2%22 d%3D%22m66.45%2C1h-.22.22%2C0Z%22%2F%3E      %3Cpath class%3D%22cls-2%22 d%3D%22m36.05%2C50.58h-.22.22%2C0Z%22%2F%3E      %3Cpath class%3D%22cls-7%22 d%3D%22m0%2C33.78v-2.76C0%2C12.9%2C13.62%2C14.48%2C13.62%2C14.48h8.38c-5.5.46-9.5%2C4.71-9.5%2C9.96l.02%2C15.8c0%2C5.54%2C4.44%2C10.59%2C9.48%2C10.59l-8-.5S0%2C51.88%2C0%2C33.77h0Z%22%2F%3E      %3Cpath class%3D%22cls-6%22 d%3D%22m73%2C31.51v2.76c0%2C18.12-13.62%2C16.53-13.62%2C16.53h-7.99c5.61-.85%2C9.09-4.76%2C9.09-10.02l.02-16.33c0-5.54-4.46-10-9.5-10h8s13.99-1.05%2C13.99%2C17.07h0Z%22%2F%3E    %3C%2Fg%3E  %3C%2Fg%3E%3C%2Fsvg%3E\") no-repeat;background-size:100% 100%}.chat__header__text{display:flex;flex-direction:column;flex-grow:1;margin-left:20px}.chat__header__text__title{display:flex;align-items:center}.chat__header__text__title:after{content:\"BETA\";display:inline-flex;padding:2px 10px;background:#25258C;color:#f4f4f3;font-weight:600;font-size:10px;line-height:14px;border-radius:8px;margin-left:12px;font-family:\"Nunito Sans\",sans-serif}.chat__header__text__subtitle{font-size:14px;line-height:22px}.chat__header dr-button::ng-deep button:not(:hover){color:#25258c}.chat__empty-state{display:flex;justify-content:center}.chat__empty-state__text{padding:20px 0;font-family:Poppins,sans-serif;font-size:20px;font-weight:300;line-height:30px;text-align:center;max-width:440px;color:#4646ce}.chat__messages{display:flex;flex-grow:1;overflow-x:hidden;overflow-y:auto;height:100%;width:100%}.chat__messages__container{overflow-y:auto;overflow-x:hidden;display:flex;flex-shrink:0;flex-direction:column;width:100%;padding-bottom:1px}.chat__messages__container--scroll::ng-deep dr-chat-message{padding-right:16px}.chat__suggestions--full-height{flex-grow:1;height:1px;overflow:auto}.chat--in-full-screen .chat__header{padding-left:48px;padding-right:48px}.chat--in-full-screen .chat__empty-state__text{padding:77px 0;font-size:28px;line-height:46px;max-width:570px}.chat--in-full-screen .chat__messages::ng-deep dr-chat-message{justify-content:center}.chat--in-full-screen .chat__messages::ng-deep .message{max-width:919px}.chat--in-full-screen .chat__suggestions::ng-deep .chat-suggestions__items{padding-left:0;padding-right:0}.chat--in-full-screen .chat__suggestions::ng-deep .chat-suggestions__items__item{margin:0 0 26px;height:80px;width:310px;font-size:16px}.chat--in-full-screen .chat__suggestions::ng-deep .chat-suggestions__container{padding:0}\n"]
             },] }
 ];
-DrDatePickerCustomHeaderComponent.ctorParameters = () => [
-    { type: MatCalendar },
-    { type: DateAdapter },
-    { type: CustomDateFormat, decorators: [{ type: Inject, args: [MAT_DATE_FORMATS,] }] },
-    { type: ChangeDetectorRef },
-    { type: DrDatePickerService }
+DrChatComponent.ctorParameters = () => [
+    { type: ChangeDetectorRef }
 ];
-
-// @ts-ignore
-const moment = require('moment');
-const noop = () => {
+DrChatComponent.propDecorators = {
+    fullScreen: [{ type: Input }],
+    title: [{ type: Input }],
+    subtitle: [{ type: Input }],
+    showClearButton: [{ type: Input }],
+    noMessagesPlaceholder: [{ type: Input }],
+    contentUpdateSubject: [{ type: Input }],
+    scrollBottom: [{ type: Input }],
+    suggestions: [{ type: Input }],
+    reopen: [{ type: Input }],
+    waitForReply: [{ type: Input }],
+    messagesContainer: [{ type: ViewChild, args: ['messagesContainer',] }],
+    messages: [{ type: ContentChildren, args: [DrChatMessageComponent,] }],
+    chatForm: [{ type: ContentChild, args: [DrChatFormComponent,] }],
+    clear: [{ type: Output }],
+    close: [{ type: Output }],
+    suggestionSelect: [{ type: Output }],
+    _chatSuggestions: [{ type: ViewChild, args: [DrChatSuggestionsComponent,] }]
 };
-const ɵ0$2 = noop;
-class DrDatePickerComponent {
-    constructor(cdr, dateAdapter, datePickerService) {
-        this.cdr = cdr;
-        this.dateAdapter = dateAdapter;
-        this.datePickerService = datePickerService;
-        // 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',
-            quarter: 'none',
-            day: 'month',
+
+var TooltipPosition;
+(function (TooltipPosition) {
+    TooltipPosition["TOP"] = "top";
+    TooltipPosition["BOTTOM"] = "bottom";
+    TooltipPosition["LEFT"] = "left";
+    TooltipPosition["RIGHT"] = "right";
+    TooltipPosition["TOP_RIGHT"] = "top-right";
+    TooltipPosition["TOP_LEFT"] = "top-left";
+    TooltipPosition["BOTTOM_RIGHT"] = "bottom-right";
+    TooltipPosition["BOTTOM_LEFT"] = "bottom-left";
+    TooltipPosition["RIGHT_TOP"] = "right-top";
+    TooltipPosition["RIGHT_BOTTOM"] = "right-bottom";
+    TooltipPosition["LEFT_TOP"] = "left-top";
+    TooltipPosition["LEFT_BOTTOM"] = "left-bottom";
+})(TooltipPosition || (TooltipPosition = {}));
+
+var Scenario;
+(function (Scenario) {
+    Scenario["ACTUALS"] = "Actuals";
+    Scenario["FORECAST"] = "Forecast";
+    Scenario["BUDGET"] = "Budget";
+    Scenario["NONE"] = "None";
+})(Scenario || (Scenario = {}));
+
+class DrModelDebounceChangeDirective {
+    constructor(ngModel) {
+        this.ngModel = ngModel;
+        this.debounce = 200;
+        this.ngModelDebounceChange = new EventEmitter();
+    }
+    ngOnInit() {
+        this.subscription = this.ngModel.control.valueChanges.pipe(skip(1), debounceTime(this.debounce), distinctUntilChanged()).subscribe(value => this.ngModelDebounceChange.emit(value));
+    }
+    ngOnDestroy() {
+        this.subscription.unsubscribe();
+    }
+}
+DrModelDebounceChangeDirective.decorators = [
+    { type: Directive, args: [{
+                selector: '[ngModelDebounceChange]'
+            },] }
+];
+DrModelDebounceChangeDirective.ctorParameters = () => [
+    { type: NgModel }
+];
+DrModelDebounceChangeDirective.propDecorators = {
+    debounce: [{ type: Input }],
+    ngModelDebounceChange: [{ type: Output }]
+};
+
+var BadgeStatus;
+(function (BadgeStatus) {
+    BadgeStatus["INFO"] = "info";
+    BadgeStatus["ERROR"] = "error";
+    BadgeStatus["WARNING"] = "warning";
+    BadgeStatus["SUCCESS"] = "success";
+    BadgeStatus["REGULAR"] = "regular";
+    BadgeStatus["PROGRESS"] = "progress";
+    BadgeStatus["DOTTED"] = "dotted";
+})(BadgeStatus || (BadgeStatus = {}));
+
+const allDateTags = {
+    [TagsConfigSubType.YEAR]: {
+        name: 'Date',
+        toggle: false,
+    },
+    [TagsConfigSubType.QUARTER]: {
+        name: 'Date',
+        toggle: false,
+    },
+    [TagsConfigSubType.MONTH]: {
+        name: 'Date',
+        toggle: false,
+    },
+    [TagsConfigSubType.DAY]: {
+        name: 'Date',
+        toggle: false,
+    },
+    [TagsConfigSubType.WEEK]: {
+        name: 'Date',
+        toggle: false,
+    }
+};
+function getScenarioTagDataConfig(isMultipleDimension) {
+    return {
+        [Scenario.ACTUALS]: Object.assign(Object.assign({}, allDateTags), { [TagsConfigSubType.MONTH]: {
+                name: 'Date',
+                toggle: true,
+            }, [TagsConfigSubType.FILE_STATUS]: {
+                toggle: false,
+            } }),
+        [Scenario.BUDGET]: {
+            [TagsConfigSubType.BUDGET_CYCLE]: {
+                toggle: true,
+                acceptableDateTags: [TagsConfigSubType.YEAR],
+                hidden: !isMultipleDimension,
+            },
+            [TagsConfigSubType.PLAN]: {
+                toggle: false,
+                turnOffDateTags: true,
+                hidden: isMultipleDimension,
+            },
+            [TagsConfigSubType.YEAR]: {
+                name: 'Date',
+                toggle: true,
+            },
+            [TagsConfigSubType.QUARTER]: {
+                name: 'Date',
+                toggle: false,
+            },
+            [TagsConfigSubType.FILE_STATUS]: {
+                toggle: false,
+            },
+        },
+        [Scenario.FORECAST]: {
+            [TagsConfigSubType.FORECAST_NEW]: {
+                toggle: true,
+                name: 'Date',
+            },
+            [TagsConfigSubType.FILE_STATUS]: {
+                toggle: false,
+            },
+        },
+        [Scenario.NONE]: Object.assign(Object.assign({}, allDateTags), { [TagsConfigSubType.MONTH]: {
+                name: 'Date',
+                toggle: true,
+            }, [TagsConfigSubType.FILE_STATUS]: {
+                toggle: true,
+            } }),
+    };
+}
+
+class ScenarioService {
+    constructor() {
+        this.DEFAULT_FORECAST_DATE_TAG = 'Month';
+    }
+    get scenarios() {
+        return orderBy(Object.values(Scenario), (scenario) => scenario === Scenario.NONE ? 1 : 0);
+    }
+    get areExistingTagsConfig() {
+        return !!this.currentTagsConfig;
+    }
+    initScenarioTags(wholeTagsConfig, currentTagsConfig, isMultipleDimension) {
+        if (!(wholeTagsConfig === null || wholeTagsConfig === void 0 ? void 0 : wholeTagsConfig.length))
+            return;
+        this.wholeTagsConfig = cloneDeep(wholeTagsConfig);
+        this.currentTagsConfig = currentTagsConfig;
+        this.isMultipleDimension = isMultipleDimension;
+    }
+    getTagsConfigByScenarioTags(scenarioTags, tagsConfig) {
+        const scenarioTagsConfig = filter$1(tagsConfig, (tagConfig) => some(scenarioTags, (scenarioTag) => scenarioTag.toggle && scenarioTag.selectedTagSubType === tagConfig.options.sub_type));
+        return this.sortScenarioTags(scenarioTagsConfig);
+    }
+    getScenarioTagsByScenario(scenario) {
+        const scenarioTagsConfig = this.getScenarioTagsConfig(scenario, this.wholeTagsConfig);
+        const scenarioTagsUi = [];
+        forEach(scenarioTagsConfig, (scenarioTag) => {
+            const isTagWithSubTags = scenarioTag.type === TagTypes.DATE;
+            const tagWithSubTags = isTagWithSubTags && find(scenarioTagsUi, { type: scenarioTag.type });
+            const tag = tagWithSubTags || this.prepareScenarioTag(scenarioTagsConfig, scenarioTag, scenario, isTagWithSubTags);
+            if (isTagWithSubTags) {
+                this.updateScenarioSubTags(tag, scenarioTag);
+                tag.subTags = this.sortedScenarioSubTags(tag);
+            }
+            if (tagWithSubTags)
+                return;
+            scenarioTagsUi.push(tag);
+        });
+        if (this.areExistingTagsConfig) {
+            this.initExistingTagsConfig(scenario, scenarioTagsUi);
+        }
+        const isTagNotSupportingDates = some(scenarioTagsUi, { turnOffDateTags: true, toggle: true });
+        if (isTagNotSupportingDates) {
+            this.turnOffDateTag(scenarioTagsUi);
+        }
+        const tagWithSpecificDateTags = find(scenarioTagsUi, (tag) => { var _a; return tag.toggle && !!((_a = tag.acceptableDateTags) === null || _a === void 0 ? void 0 : _a.length); });
+        if (tagWithSpecificDateTags) {
+            this.hideNotAvailableTags(tagWithSpecificDateTags, scenarioTagsUi);
+        }
+        return this.sortScenarioTags(scenarioTagsUi);
+    }
+    sortScenarioTags(scenarioTagsUi) {
+        return orderBy(scenarioTagsUi, [
+            (tag) => (tag.type === TagTypes.DATE ? 0 : 1),
+            (tag) => (tag.name === 'File Status')
+        ]);
+    }
+    initExistingTagsConfig(scenario, scenarioTagsUi) {
+        forEach(this.currentTagsConfig, (tagConfig) => {
+            var _a;
+            const tagSubType = (_a = tagConfig === null || tagConfig === void 0 ? void 0 : tagConfig.options) === null || _a === void 0 ? void 0 : _a.sub_type;
+            const scenarioTagDataConfig = getScenarioTagDataConfig(this.isMultipleDimension);
+            if (!scenarioTagDataConfig || !scenarioTagDataConfig[scenario] || !scenarioTagDataConfig[scenario][tagSubType]) {
+                return;
+            }
+            const scenarioTagUi = tagConfig.type === TagTypes.DATE
+                ? find(scenarioTagsUi, { type: tagConfig.type })
+                : find(scenarioTagsUi, { selectedTagSubType: tagSubType });
+            scenarioTagUi.toggle = true;
+            scenarioTagUi.selectedTagSubType = tagSubType;
+        });
+    }
+    prepareScenarioTag(scenarioTagsConfig, scenarioTag, scenario, isDateTag) {
+        const toggleStatus = isDateTag
+            ? some(scenarioTagsConfig, (tag) => tag.type === TagTypes.DATE && tag.scenarioData.toggle)
+            : scenarioTag.scenarioData.toggle;
+        const selectedTagSubType = isDateTag
+            ? this.getScenarioSelectedDateTag(scenario, scenarioTagsConfig)
+            : scenarioTag.options.sub_type;
+        const tag = {
+            toggle: this.areExistingTagsConfig ? false : toggleStatus,
+            name: scenarioTag.scenarioData.name || scenarioTag.name,
+            description: scenarioTag.scenarioData.description || scenarioTag.description,
+            type: scenarioTag.type,
+            selectedTagSubType,
+        };
+        if (scenarioTag.scenarioData.turnOffDateTags) {
+            tag.turnOffDateTags = scenarioTag.scenarioData.turnOffDateTags;
+        }
+        if (scenarioTag.scenarioData.acceptableDateTags) {
+            tag.acceptableDateTags = scenarioTag.scenarioData.acceptableDateTags;
+        }
+        return tag;
+    }
+    sortedScenarioSubTags(tag) {
+        const SUB_TAGS_ORDER = [TagsConfigSubType.DAY, TagsConfigSubType.WEEK, TagsConfigSubType.MONTH, TagsConfigSubType.QUARTER, TagsConfigSubType.YEAR];
+        return orderBy(tag.subTags, (subTag) => indexOf(SUB_TAGS_ORDER, subTag.subType));
+    }
+    updateScenarioSubTags(tag, scenarioTag) {
+        if (!tag.subTags) {
+            tag.subTags = [];
+        }
+        const tagSubType = scenarioTag.options.sub_type;
+        tag.subTags.push({
+            subType: tagSubType,
+            name: tagSubType === TagsConfigSubType.FORECAST_NEW ? this.DEFAULT_FORECAST_DATE_TAG : scenarioTag.name,
+        });
+    }
+    turnOffDateTag(scenarioTags) {
+        const dateTag = find(scenarioTags, { type: TagTypes.DATE });
+        if (!dateTag)
+            return;
+        dateTag.toggle = false;
+    }
+    hideNotAvailableTags(tagWithSpecificDateTags, scenarioTags) {
+        var _a;
+        const subTags = (_a = find(scenarioTags, { type: TagTypes.DATE })) === null || _a === void 0 ? void 0 : _a.subTags;
+        if (!subTags.length)
+            return;
+        forEach(scenarioTags, (tag) => {
+            var _a;
+            if (!((_a = tag.acceptableDateTags) === null || _a === void 0 ? void 0 : _a.length))
+                return;
+            if (tag !== tagWithSpecificDateTags) {
+                tag.toggle = false;
+            }
+        });
+        forEach(subTags, (subTag) => {
+            subTag.hidden = !tagWithSpecificDateTags.acceptableDateTags.includes(subTag.subType);
+        });
+    }
+    getScenarioSelectedDateTag(scenario, dateTags) {
+        var _a, _b;
+        const monthSubType = (_b = (_a = find(dateTags, (tag) => tag.options.sub_type === TagsConfigSubType.MONTH)) === null || _a === void 0 ? void 0 : _a.options) === null || _b === void 0 ? void 0 : _b.sub_type;
+        const scenarioSelectedDateTag = {
+            [Scenario.ACTUALS]: () => monthSubType,
+            [Scenario.BUDGET]: () => { var _a, _b; return (_b = (_a = find(dateTags, (tag) => tag.options.sub_type === TagsConfigSubType.YEAR)) === null || _a === void 0 ? void 0 : _a.options) === null || _b === void 0 ? void 0 : _b.sub_type; },
+            [Scenario.FORECAST]: () => { var _a, _b; return (_b = (_a = find(dateTags, (tag) => tag.options.sub_type === TagsConfigSubType.FORECAST_NEW)) === null || _a === void 0 ? void 0 : _a.options) === null || _b === void 0 ? void 0 : _b.sub_type; },
+            [Scenario.NONE]: () => monthSubType,
+        };
+        if (!scenarioSelectedDateTag[scenario])
+            return;
+        return scenarioSelectedDateTag[scenario]();
+    }
+    getScenarioTagsConfig(scenario, tagsConfig) {
+        return reduce(tagsConfig, (acc, tagConfig) => {
+            var _a;
+            const tagSubType = (_a = tagConfig === null || tagConfig === void 0 ? void 0 : tagConfig.options) === null || _a === void 0 ? void 0 : _a.sub_type;
+            const scenarioTagDataConfig = getScenarioTagDataConfig(this.isMultipleDimension);
+            const scenarioTagConfig = scenarioTagDataConfig && scenarioTagDataConfig[scenario] ?
+                scenarioTagDataConfig[scenario][tagSubType] : null;
+            if (!scenarioTagConfig || scenarioTagConfig.hidden)
+                return acc;
+            const clonedTagConfig = cloneDeep(tagConfig);
+            const scenarioTag = Object.assign(Object.assign({}, clonedTagConfig), { scenarioData: scenarioTagConfig });
+            acc.push(scenarioTag);
+            return acc;
+        }, []);
+    }
+}
+ScenarioService.decorators = [
+    { type: Injectable }
+];
+
+class DrSharedUtils {
+    /**
+     * Get timeframe (day, year, month, quarter) based on passed format
+     *
+     * @param format - date format string. Examples: MM/DD/YYYY, Q/YYYY
+     */
+    static getTimeframeByDateFormat(format) {
+        const defaultFrame = TimeframeOption.DAY;
+        if (!format) {
+            return defaultFrame;
+        }
+        const lowerCaseFormat = format.toLowerCase();
+        switch (true) {
+            case lowerCaseFormat.includes('q'):
+                return TimeframeOption.QUARTER;
+            case lowerCaseFormat.includes('d'):
+                return TimeframeOption.DAY;
+            case lowerCaseFormat.includes('w'):
+                return TimeframeOption.WEEK;
+            case lowerCaseFormat.includes('m'):
+                return TimeframeOption.MONTH;
+            case lowerCaseFormat.includes('y'):
+                return TimeframeOption.YEAR;
+            default:
+                return defaultFrame;
+        }
+    }
+    static getDateByTag(tag) {
+        const todayDate = moment$9().utc().endOf('day');
+        switch (tag) {
+            case DateTags.TODAY:
+                return todayDate;
+            case DateTags.YESTERDAY:
+                todayDate.subtract(1, 'days');
+                return todayDate;
+            case DateTags.THIS_MONTH:
+                todayDate.endOf('month');
+                return todayDate;
+            case DateTags.PREV_MONTH:
+                todayDate.subtract(1, 'months').endOf('month');
+                return todayDate;
+        }
+    }
+}
+
+// @ts-ignore
+const moment$2 = require('moment');
+class DrDatePickerService {
+    constructor() {
+        this.isTimeframeSelectionEnabled = false;
+        this.timeframe = TimeframeOption.DAY;
+        this.format$ = new BehaviorSubject(DateFromats.MAT_DEFAULT_DATE_FORMAT);
+        this.updatedQuarter$ = new Subject();
+        this.updatedDateAndClose$ = new Subject();
+        this.presetTag$ = new BehaviorSubject('');
+        this.onSameDaySelectedInCalendar$ = new Subject();
+        this.keepPresetTag = false;
+        this.isValueUpdating = false;
+        this.availableTimeframes = [
+            TimeframeOption.DAY,
+            TimeframeOption.WEEK,
+            TimeframeOption.MONTH,
+            TimeframeOption.QUARTER,
+            TimeframeOption.YEAR
+        ];
+        this.formatConfig = {
+            day: DateFromats.MAT_DEFAULT_DATE_FORMAT,
+            month: DateFromats.MONTH_YEAR_FORMAT,
+            year: DateFromats.YEAR_FORMAT,
+            quarter: DateFromats.QUARTER_FORMAT,
+            week: DateFromats.WEEK_FORMAT
+        };
+        this.fiscalYearMonthsModifier = 0;
+    }
+    getDisplayPrefix() {
+        const formatCached = this.format$.getValue();
+        switch (true) {
+            case formatCached === null || formatCached === void 0 ? void 0 : formatCached.includes('Q'):
+                return 'Q';
+            case formatCached === null || formatCached === void 0 ? void 0 : formatCached.includes('W'):
+                return 'W';
+            default:
+                return '';
+        }
+    }
+    getTimeframe(format) {
+        return DrSharedUtils.getTimeframeByDateFormat(format);
+    }
+    getConfiguredFormat(timeframe) {
+        return this.formatConfig[timeframe];
+    }
+    updateTimeframeAndFormat(format) {
+        const normalizedFormat = this.normalizeValue(format || this.format$.getValue());
+        this.timeframe = this.getTimeframe(normalizedFormat);
+        this.format$.next(this.getConfiguredFormat(this.timeframe));
+    }
+    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;
+    }
+    updateDatePickerByPreset(tag, calender) {
+        this.keepPresetTag = true;
+        let date = null;
+        if (tag) {
+            date = DrSharedUtils.getDateByTag(tag);
+            switch (tag) {
+                case DateTags.TODAY:
+                    this.updateTimeframeAndFormat(DateFromats.MAT_DEFAULT_DATE_FORMAT);
+                    break;
+                case DateTags.YESTERDAY:
+                    this.updateTimeframeAndFormat(DateFromats.MAT_DEFAULT_DATE_FORMAT);
+                    break;
+                case DateTags.THIS_MONTH:
+                    this.updateTimeframeAndFormat(DateFromats.MONTH_YEAR_FORMAT);
+                    this.selectDateInCalendarMonthView(date, calender);
+                    break;
+                case DateTags.PREV_MONTH:
+                    this.updateTimeframeAndFormat(DateFromats.MONTH_YEAR_FORMAT);
+                    this.selectDateInCalendarMonthView(date, calender);
+                    break;
+            }
+        }
+        this.presetTag$.next(tag);
+        this.updatedDateAndClose$.next(date);
+    }
+    selectDateInCalendarMonthView(date, calender) {
+        setTimeout(() => {
+            const monthView = calender.monthView;
+            if (monthView) {
+                monthView._activeDate = date;
+                monthView._selected = date;
+                monthView._init();
+            }
+        });
+    }
+    resetPresetTag() {
+        if (!this.keepPresetTag) {
+            this.presetTag$.next(null);
+        }
+        else {
+            this.keepPresetTag = false;
+        }
+    }
+}
+DrDatePickerService.decorators = [
+    { type: Injectable }
+];
+
+// @ts-ignore
+const moment$1 = require('moment');
+class DrDatePickerCustomHeaderComponent {
+    constructor(_calendar, _dateAdapter, _dateFormats, cdr, datePickerService) {
+        this._calendar = _calendar;
+        this._dateAdapter = _dateAdapter;
+        this._dateFormats = _dateFormats;
+        this.cdr = cdr;
+        this.datePickerService = datePickerService;
+        this._destroyed = new Subject();
+        this.quarters = [1, 2, 3, 4];
+        this.selectedQuarter = 1;
+        this.timeframeOptions = [{
+                timeframe: TimeframeOption.DAY,
+                title: 'Day',
+                value: CalendarView.FOR_DAYS,
+                format: this.datePickerService.formatConfig.day,
+                periodLabel: () => this._dateAdapter.format(this._calendar.activeDate, this._dateFormats.display.monthYearLabel).toLocaleUpperCase()
+            }, {
+                timeframe: TimeframeOption.WEEK,
+                title: 'Week',
+                value: CalendarView.FOR_DAYS,
+                format: this.datePickerService.formatConfig.week,
+                periodLabel: () => this._dateAdapter.format(this._calendar.activeDate, this._dateFormats.display.monthYearLabel).toLocaleUpperCase()
+            }, {
+                timeframe: TimeframeOption.MONTH,
+                title: 'Month',
+                value: CalendarView.FOR_MONTHS,
+                format: this.datePickerService.formatConfig.month,
+                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.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.datePickerService.subtractFiscalYearMonthsFromDate(this._calendar.activeDate)).utc().year();
+                    const startPeriod = Math.floor(currentYear / 24) * 24;
+                    return startPeriod + '-' + (startPeriod + 23);
+                }
+            }];
+        this.pagingSetup = {
+            [CalendarView.FOR_MONTHS]: (forward) => this.pagingDateChange('addCalendarYears', 1, forward),
+            [CalendarView.FOR_QUARTERS]: (forward) => this.pagingDateChange('addCalendarYears', 1, forward),
+            [CalendarView.FOR_DAYS]: (forward) => this.pagingDateChange('addCalendarMonths', 1, forward),
+            [CalendarView.FOR_YEARS]: (forward) => this.pagingDateChange('addCalendarYears', 24, forward)
+        };
+        this.selectedTimeframe = CalendarView.FOR_DAYS;
+        this.timeframeSelection = false;
+        this.periodMonthLabel = '';
+        this.periodYearLabel = '';
+        this.presetTagList = PRESET_TAGS_LIST;
+        this.calendarView = CalendarView;
+        _calendar.stateChanges.pipe(takeUntil(this._destroyed)).subscribe(() => this.setPeriodLabels());
+        this.datePickerService.format$.pipe(takeUntil(this._destroyed)).subscribe(value => {
+            this.selectedTimeframe = this.timeframeOptions.filter(option => option.format === value)[0].value;
+            _calendar.currentView = this.selectedTimeframe;
+            this.setPeriodLabels();
+            if (this.selectedTimeframe === CalendarView.FOR_QUARTERS) {
+                this.selectedQuarter = this.datePickerService.getQuarterAccordingToFiscalYear(this._calendar.activeDate);
+            }
+        });
+        _calendar.viewChanged.pipe(takeUntil(this._destroyed)).subscribe(() => {
+            this.setPeriodLabels();
+            if (_calendar.multiYearView) {
+                this.transformDateInMultiyearViewAccordingToFY();
+            }
+        });
+        _calendar._userSelection.subscribe(date => {
+            if (!this.datePickerService.isValueUpdating) {
+                this.datePickerService.onSameDaySelectedInCalendar$.next(date.value);
+            }
+        });
+        this.datePickerService.calendarInstance = _calendar;
+    }
+    get selectedPresetTag() {
+        return this.datePickerService.presetTag$.getValue();
+    }
+    ;
+    ngOnInit() {
+        setTimeout(() => {
+            if (this._calendar.multiYearView) {
+                this.transformDateInMultiyearViewAccordingToFY();
+            }
+        });
+    }
+    ngOnDestroy() {
+        this._destroyed.next();
+        this._destroyed.complete();
+    }
+    setPeriodLabels() {
+        const currentTimeframeOption = this.timeframeOptions.filter(option => option.value === this._calendar.currentView)[0];
+        const fullPeriodLabel = currentTimeframeOption.periodLabel();
+        if (this._calendar.currentView === CalendarView.FOR_DAYS) {
+            this.periodMonthLabel = fullPeriodLabel.slice(0, 3);
+            this.periodYearLabel = fullPeriodLabel.slice(4);
+        }
+        else {
+            this.periodMonthLabel = '';
+            this.periodYearLabel = fullPeriodLabel;
+        }
+        this.cdr.markForCheck();
+    }
+    setTimeframe(value) {
+        if (value !== this.selectedTimeframe) {
+            this.datePickerService.resetPresetTag();
+        }
+        this.selectedTimeframe = value;
+        this.timeframeSelection = false;
+        this._calendar.currentView = this.selectedTimeframe;
+        const chosenTimeframeOption = this.timeframeOptions.filter(option => option.value === this.selectedTimeframe)[0];
+        this.datePickerService.updateTimeframeAndFormat(chosenTimeframeOption.format);
+        if (this.selectedTimeframe === CalendarView.FOR_QUARTERS) {
+            this.selectedQuarter = this.datePickerService.getQuarterAccordingToFiscalYear(this._calendar.activeDate);
+        }
+    }
+    get currentViewIsQuarter() {
+        return ![CalendarView.FOR_DAYS, CalendarView.FOR_MONTHS, CalendarView.FOR_YEARS].includes(this._calendar.currentView);
+    }
+    switchViewOnClickOnPeriodLabel(view) {
+        this._calendar.currentView = view;
+    }
+    onSelectQuarter(quarterNumber) {
+        this.selectedQuarter = quarterNumber;
+        this.datePickerService.setEndOfQuarter(this._calendar.activeDate, quarterNumber);
+        this.datePickerService.updatedQuarter$.next(this._calendar.activeDate);
+        this.datePickerService.datePickerInstance.close();
+    }
+    pagingClicked(forward) {
+        if (this.pagingSetup[this._calendar.currentView]) {
+            this.pagingSetup[this._calendar.currentView](forward);
+        }
+    }
+    pagingDateChange(actionCall, amount, forward) {
+        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();
+    }
+    onSelectPresetTag(tag) {
+        if (tag.key === this.selectedPresetTag) {
+            this.datePickerService.presetTag$.next(null);
+        }
+        else {
+            this.datePickerService.presetTag$.next(tag.key);
+        }
+        this.datePickerService.updateDatePickerByPreset(this.selectedPresetTag, this._calendar);
+    }
+}
+DrDatePickerCustomHeaderComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'dr-date-picker_custom-header.component',
+                template: "<div *ngIf=\"datePickerService.isTimeframeSelectionEnabled\" class=\"dr-datepicker__timeframe-select__wrapper\">\n\n    <div *ngIf=\"datePickerService.isUsingDateTagPresets\" class=\"dr-datepicker-preset-date\">\n        <div class=\"dr-datepicker-preset-date__tags\">\n            <div *ngFor=\"let tag of presetTagList\" \n                id=\"preset_tag\" \n                class=\"dr-datepicker-preset-date__tags__tag\" \n                (click)=\"onSelectPresetTag(tag)\" \n                [ngClass]=\"{'dr-datepicker-preset-date__tags__tag--selected': tag.key === selectedPresetTag}\"\n                [drTooltip]=\"selectedPresetTag === tag.key? 'Unselect preset' : ''\"\n                [drTooltipPosition]=\"'top'\">\n                {{ tag.label }}\n            </div>\n        </div>\n    </div>\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($event)\">\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-datepicker-preset-date{display:flex;flex-direction:column}.dr-datepicker-preset-date__tags{display:flex;padding-bottom:21px;padding-top:10px;font-size:12px}.dr-datepicker-preset-date__tags__tag{cursor:pointer;font-weight:400;line-height:20px!important;padding:2px 8px;border:1px solid #9EA1AA;border-radius:18px;background:#FFFFFF;margin-right:4px}.dr-datepicker-preset-date__tags__tag--selected{color:#4646ce;background:#F2F2FB;border:1px solid #4646CE}.dr-date-paging{display:flex;flex-direction:row;justify-content:space-between;align-items:center;padding:16px 32px;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"]
+            },] }
+];
+DrDatePickerCustomHeaderComponent.ctorParameters = () => [
+    { type: MatCalendar },
+    { type: DateAdapter },
+    { type: CustomDateFormat, decorators: [{ type: Inject, args: [MAT_DATE_FORMATS,] }] },
+    { type: ChangeDetectorRef },
+    { type: DrDatePickerService }
+];
+
+// @ts-ignore
+const moment = require('moment');
+const noop = () => {
+};
+const ɵ0$2 = noop;
+class DrDatePickerComponent {
+    constructor(cdr, dateAdapter, datePickerService) {
+        this.cdr = cdr;
+        this.dateAdapter = dateAdapter;
+        this.datePickerService = datePickerService;
+        // 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',
+            quarter: 'none',
+            day: 'month',
         };
         this.customHeader = DrDatePickerCustomHeaderComponent;
         this.readonly = true;
@@ -5261,586 +5699,163 @@ DrTabsModule.decorators = [
                 ],
                 providers: [],
                 declarations: [
-                    DrTabsComponent,
-                    DrTabComponent
-                ],
-            },] }
-];
-
-const DR_ACCORDION_COMPONENTS = [
-    DrAccordionComponent,
-    DrAccordionItemComponent,
-    DrAccordionItemHeaderComponent,
-    DrAccordionItemBodyComponent,
-];
-class DrAccordionModule {
-}
-DrAccordionModule.decorators = [
-    { type: NgModule, args: [{
-                imports: [CommonModule],
-                exports: [...DR_ACCORDION_COMPONENTS],
-                declarations: [...DR_ACCORDION_COMPONENTS],
-                providers: [],
-            },] }
-];
-
-const components = [
-    DrLayoutComponent,
-    DrLayoutHeaderComponent,
-    DrLayoutBodyComponent
-];
-class DrLayoutModule {
-}
-DrLayoutModule.decorators = [
-    { type: NgModule, args: [{
-                imports: [CommonModule],
-                exports: [...components],
-                declarations: [...components],
-            },] }
-];
-
-class DrErrorModule {
-}
-DrErrorModule.decorators = [
-    { type: NgModule, args: [{
-                imports: [
-                    CommonModule,
-                    FormsModule,
-                    DrTooltipModule
-                ],
-                exports: [DrErrorComponent],
-                providers: [],
-                declarations: [
-                    DrErrorComponent
-                ],
-            },] }
-];
-
-class StepperComponent {
-    constructor() {
-        this.withoutConnectors = false;
-        this.hiddenNames = false;
-        this.inlineLabels = false;
-        this.disabled = false;
-        this.hiddenIndex = false;
-        this.stepChange = new EventEmitter();
-    }
-    selectStep(step) {
-        if (step !== this.currentStep && !this.disabled) {
-            this.stepChange.emit(step);
-        }
-    }
-    getWidth(step) {
-        if (this.withoutConnectors)
-            return '0%';
-        if (step.completed)
-            return '100%';
-        if (step.index === 0 || this.steps[step.index - 1].completed)
-            return `${((step === null || step === void 0 ? void 0 : step.completedTasks) / (step === null || step === void 0 ? void 0 : step.requiredTasks) * 100) || 0}%`;
-        return '0%';
-    }
-    scrollLeft() {
-        this.stepper.nativeElement.scrollLeft -= 80;
-    }
-    scrollRight() {
-        this.stepper.nativeElement.scrollLeft += 80;
-    }
-    roundWidth(width) {
-        return Math.round(width);
-    }
-}
-StepperComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'dr-stepper',
-                template: "<div class=\"scroll-section\" *ngIf=\"stepper?.scrollLeft !== 0\" (click)=\"scrollLeft()\">\n    <i class=\"dr-icon-arrow-right\"></i>\n</div>\n<div #stepper class=\"stepper\" [ngClass]=\"{'stepper--disabled': disabled}\">\n    <ng-container *ngFor=\"let step of steps; let index = index; last as isLast; first as isFirst\">\n        <div *ngIf=\"!step.hide\" class=\"step\" (click)=\"selectStep(step)\"\n             [class.step-setup]=\"inlineLabels\">\n            <div class=\"step-wrapper\" [drTooltip]=\"step.description && tooltip\"\n                 [drTooltipContext]=\"{ step: step }\"\n                 [drTooltipPosition]=\"'bottom'\">\n                <div data-test=\"step_point\" class=\"step-point\" [class.active]=\"currentStep === step\" [class.completed]=\"step.completed\">\n                    <div *ngIf=\"step === currentStep;\" class=\"ellipse\"></div>\n                    <ng-container [ngSwitch]=\"step.completed\">\n                        <ng-template [ngSwitchCase]=\"true\">\n                            <div class=\"pointer blue\">\n                                <i class=\"dr-icon-approve\"></i>\n                            </div>\n                        </ng-template>\n                        <ng-template [ngSwitchCase]=\"false\">\n                            <div class=\"pointer\" [class.gray]=\"step !== currentStep\"\n                                 [ngClass]=\"{'blue with-ellipse': step === currentStep}\">\n                                <div [hidden]=\"step === currentStep || hiddenIndex\" class=\"text\">{{index + 1}}</div>\n                            </div>\n                        </ng-template>\n                    </ng-container>\n                </div>\n                <div data-test=\"step_label_name\" class=\"step-label\" [class.active]=\"currentStep === step\"\n                     [ngClass]=\"step.completed ? 'completed' : 'uncompleted'\">\n                    <span [hidden]=\"hiddenNames\">{{step.name}}</span>\n                </div>\n                <ng-container *ngIf=\"inlineLabels\" [ngTemplateOutlet]=\"connector\"\n                              [ngTemplateOutletContext]=\"{ index, isLast, step }\">\n                </ng-container>\n                <span *ngIf=\"step.showProgress\"\n                      data-test=\"step_progress\"\n                      class=\"step-progress\">\n                    {{(step.requiredTasks ? step.completedTasks : step.requiredTasks) + '/' + step.requiredTasks}}\n                </span>\n            </div>\n            <ng-container *ngIf=\"!inlineLabels\" [ngTemplateOutlet]=\"connector\"\n                          [ngTemplateOutletContext]=\"{ index, isLast, step }\">\n            </ng-container>\n        </div>\n    </ng-container>\n</div>\n<div (click)=\"scrollRight()\" class=\"scroll-section\"\n     *ngIf=\"stepper?.scrollWidth > stepper?.clientWidth && roundWidth(stepper?.scrollLeft + stepper?.clientWidth) < stepper?.scrollWidth\">\n    <i class=\"dr-icon-arrow-right\"></i>\n</div>\n\n<ng-template #tooltip let-step=\"step\">\n    <div class=\"step-tooltip\">\n        <div class=\"step-tooltip_name\">{{step.name}}</div>\n        <div class=\"step-tooltip_description\">{{step.description}}</div>\n    </div>\n</ng-template>\n\n<ng-template #connector let-step=\"step\" let-isLast=\"isLast\" let-index=\"index\">\n    <div class=\"step-connector\" [class.only-one-step]=\"steps.length === 1\"\n         [class]=\"'step-connector--' + (!inlineLabels ? 'absolute' : 'inline')\"\n         *ngIf=\"steps.length === 1 || !isLast\"\n         [style.visibility]=\"withoutConnectors || steps[step.index + 1]?.hide ? 'hidden' : 'unset'\"\n         [class.connector-grand]=\"!inlineLabels && (index === 0 || index === steps.length - 2)\">\n        <div class=\"progress\" [style.width]=\"getWidth(step)\"></div>\n    </div>\n</ng-template>\n",
-                changeDetection: ChangeDetectionStrategy.Default,
-                styles: [":host{font-family:\"Poppins\",sans-serif;display:flex;justify-content:center;height:100%;position:relative}:host .scroll-section{position:absolute;top:0;height:100%;width:108px;display:flex;align-items:center;z-index:10}:host .scroll-section i{font-size:24px;color:#2969b0;background:#f3f7ff;border-radius:24px}:host .scroll-section i:hover{background:#cde1fb;cursor:pointer}:host .scroll-section:first-child{left:0;padding-left:16px;background:linear-gradient(90deg,#ffffff 36.08%,rgba(255,255,255,0) 87.17%)}:host .scroll-section:first-child i{transform:rotate(180deg)}:host .scroll-section:last-child{right:0;padding-right:16px;background:linear-gradient(270deg,#ffffff 36.08%,rgba(255,255,255,0) 87.17%);justify-content:flex-end}:host .stepper{display:flex;align-items:center;height:100%;width:100%;overflow:auto;scroll-behavior:smooth}:host .stepper::-webkit-scrollbar{display:none}:host .stepper--disabled .step:hover{cursor:default}:host .stepper--disabled .step-point .ellipse{border-color:#bcbcbc}:host .stepper--disabled .step-point .pointer{color:#fff;background-color:#bcbcbc;cursor:default}:host .stepper--disabled .step-label{color:#bcbcbc}:host .stepper--disabled .step-connector{background-color:#bcbcbc}:host .stepper--disabled .step-connector .progress{background-color:#bcbcbc}:host .step{position:relative;display:flex;flex-direction:column;width:120px;align-items:center;flex-shrink:0;flex-grow:1}:host .step:hover{cursor:pointer}:host .step:not(.step-setup) .step-wrapper{width:100%}:host .step:not(.step-setup):first-child .step-wrapper,:host .step:not(.step-setup):first-child .step-point,:host .step:not(.step-setup):first-child .step-label,:host .step:not(.step-setup):first-child .step-progress{margin-left:8px}:host .step:not(.step-setup):first-child .only-one-step{left:0!important;margin-left:25px}:host .step-point{display:flex;justify-content:center;width:100%;height:28px;position:relative;align-items:center}:host .step-point .ellipse{width:28px;height:28px;position:absolute;border-radius:50px;border-color:#4646ce;border-style:solid;border-width:2px;background:white;display:flex;justify-content:center;align-items:center;z-index:2}:host .step-point .pointer{width:24px;height:24px;position:absolute;z-index:4;border-radius:20px;display:flex;align-items:center;justify-content:center;font-weight:bold;font-size:16px;line-height:1.4;color:#51566f;transition:box-shadow .2s ease-in-out}:host .step-point .pointer i{color:#fff;font-size:22px}:host .step-point .pointer.blue{background:#4646ce}:host .step-point .pointer.gray{background:#e5e6ea}:host .step-point .pointer.gray:hover{box-shadow:0 0 4px 2px #00000026}:host .step-point.completed :host .step-point.active{background:#4646ce}:host .step-point.active .ellipse{width:28px;height:28px}:host .step-point.active .pointer{width:20px;height:20px}:host .step-label{font-weight:normal;font-size:14px;line-height:22px;line-height:1.5;color:#6d6e6f;display:flex;justify-content:center;overflow:hidden;margin-top:8px}:host .step-label span{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}:host .step-label.active{font-weight:600;color:#333}:host .step-label:last-child{margin-bottom:23px}:host .step-progress{margin-top:3px;font-style:normal;font-weight:normal;font-size:12px;line-height:1.4;display:flex;justify-content:center}:host .step-connector{background-color:#e5e5e5;height:2px}:host .step-connector.connector-grand{width:calc(100% - 25px)}:host .step-connector.connector-grand.only-one-step{width:calc(100% - 50px)}:host .step-connector .progress{background-color:#4646ce;height:2px;width:0}:host .step-connector--absolute{position:absolute;top:calc(28px / 2);width:100%;left:calc(100% / 2 + 12px)}:host .step-connector--inline{width:50px;margin-left:32px;margin-right:32px}:host .step-setup{width:auto}:host .step-setup .step-wrapper{display:flex;flex-direction:row;align-items:center;width:auto}:host .step-setup+.step-setup{margin-left:0}:host .step-setup .step-progress{display:none}:host .step-setup .step-label{position:relative;transform:none;align-items:center;justify-content:start;margin:0 0 0 8px;font-size:16px}:host .step-setup .step-point{width:28px;height:28px}:host .step-setup .step-point .pointer i{font-size:22px}:host .step-setup .step-point .pointer .text{font-size:16px}::ng-deep .step-tooltip{max-width:250px;font-size:14px;line-height:22px;padding:10px 12px}::ng-deep .step-tooltip_name{font-weight:700;overflow:hidden;text-overflow:ellipsis}@media screen and (min-width: 1367px){.stepper .step-label{font-size:14px}}\n"]
-            },] }
-];
-StepperComponent.ctorParameters = () => [];
-StepperComponent.propDecorators = {
-    steps: [{ type: Input }],
-    currentStep: [{ type: Input }],
-    withoutConnectors: [{ type: Input }],
-    hiddenNames: [{ type: Input }],
-    inlineLabels: [{ type: Input }],
-    disabled: [{ type: Input }],
-    hiddenIndex: [{ type: Input }],
-    stepChange: [{ type: Output }],
-    stepper: [{ type: ViewChild, args: ['stepper', { read: ElementRef },] }]
-};
-
-class DrStepperModule {
-}
-DrStepperModule.decorators = [
-    { type: NgModule, args: [{
-                declarations: [StepperComponent],
-                imports: [
-                    CommonModule,
-                    DrTooltipModule
-                ],
-                exports: [StepperComponent]
-            },] }
-];
-
-class DrDetailsListModule {
-}
-DrDetailsListModule.decorators = [
-    { type: NgModule, args: [{
-                imports: [
-                    CommonModule,
-                ],
-                exports: [DrDetailsListComponent],
-                providers: [],
-                declarations: [DrDetailsListComponent],
-            },] }
-];
-
-const ɵ0$1 = {}, ɵ1 = {};
-class DrDialogModule {
-}
-DrDialogModule.decorators = [
-    { type: NgModule, args: [{
-                declarations: [DialogWrapperComponent, DialogModalWrapperComponent],
-                imports: [
-                    CommonModule,
-                    MatDialogModule,
-                    DrInputsModule,
-                    ReactiveFormsModule,
-                    DrTooltipModule,
-                    DrDetailsListModule
-                ],
-                exports: [DialogWrapperComponent, DialogModalWrapperComponent],
-                providers: [
-                    { provide: MatDialogRef, useValue: ɵ0$1 },
-                    { provide: MAT_DIALOG_DATA, useValue: ɵ1 },
-                    DialogService
-                ]
+                    DrTabsComponent,
+                    DrTabComponent
+                ],
             },] }
 ];
 
-class DrChatFormComponent {
-    constructor(cdr, domSanitizer) {
-        this.cdr = cdr;
-        this.domSanitizer = domSanitizer;
-        this._textareaInitialHeight = true;
-        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';
-        /**
-         * Parameter to check is send message function available
-         *
-         * @type {boolean}
-         */
-        this.waitForReply = false;
-        /**
-         *
-         * @type {EventEmitter<{ message: string, files: File[] }>}
-         */
-        this.send = new EventEmitter();
-        this.abort = 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.waitForReply) {
-            return;
-        }
-        if (this.droppedFiles.length || String(this.message).trim().length) {
-            this._textareaInitialHeight = true;
-            this.send.emit({ message: this.message, files: this.droppedFiles });
-            this.message = '';
-            this.droppedFiles = [];
-            this.cdr.markForCheck();
-        }
-    }
-    abortMessage() {
-        this.abort.emit();
-    }
-    onModelChange(value) {
-        this._textareaInitialHeight = false;
-        this.inputChange.emit(value);
-    }
-    getTextAreaHeight(textAreaElement) {
-        let height;
-        if (this._textareaInitialHeight) {
-            height = 50;
-        }
-        else {
-            height = textAreaElement.scrollHeight + 2;
-        }
-        return `height: ${height}px;`;
-    }
+const DR_ACCORDION_COMPONENTS = [
+    DrAccordionComponent,
+    DrAccordionItemComponent,
+    DrAccordionItemHeaderComponent,
+    DrAccordionItemBodyComponent,
+];
+class DrAccordionModule {
 }
-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    <div class=\"message-row__input\">\n            <textarea #textAreaElement\n                      (focus)=\"inputFocus = true\"\n                      (blur)=\"inputFocus = false\"\n                      (mouseenter)=\"inputHover = true\"\n                      (mouseleave)=\"inputHover = false\"\n                      [(ngModel)]=\"message\"\n                      [rows]=\"1\"\n                      [style]=\"getTextAreaHeight(textAreaElement)\"\n                      (ngModelChange)=\"onModelChange($event)\"\n                      type=\"text\"\n                      placeholder=\"{{ fileOver ? dropFilePlaceholder : messagePlaceholder }}\"\n                      (keyup.enter)=\"sendMessage()\">\n            </textarea>\n        <i *ngIf=\"!waitForReply\" (click)=\"sendMessage()\" class=\"dr-icon-notify send-button\"></i>\n        <dr-dot-flashing *ngIf=\"waitForReply\" class=\"wait-reply-dot-flashing\"></dr-dot-flashing>\n        <dr-button *ngIf=\"waitForReply\" (click)=\"abortMessage()\" theme=\"ghost\" class=\"abort-button\">Stop generating</dr-button>\n    </div>\n</div>\n",
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                styles: [":host{display:flex;flex-direction:column;align-items:center;padding:0 24px;margin-top:12px}:host .message-row{display:flex;justify-content:center;width:100%;padding:0 0 21px;max-width:970px}:host .message-row__input{position:relative;display:flex;align-items:center;flex-grow:1;flex-direction:row;height:auto;overflow:visible;min-width:265px}:host .message-row__input textarea{font-size:14px;line-height:22px;max-height:100%;flex-grow:1;resize:none;padding:14px 40px 12px 23px;margin:auto;border:1px solid #DFE0E3;border-radius:12px;min-height:50px}:host .message-row__input textarea:focus{border:1px solid #7F7FDD}:host .message-row__input textarea::placeholder{color:#9ea1aa}:host .message-row__input .send-button{position:absolute;right:14px;cursor:pointer;color:#dfe0e3;font-size:28px}:host .message-row__input .wait-reply-dot-flashing{position:absolute;right:20px}:host .message-row__input textarea:focus+.send-button,:host .message-row__input .send-button:hover{color:#25258c}:host .message-row__input .abort-button{position:absolute;right:0;top:-44px}:host .message-row__input .abort-button::ng-deep button{background:#F2F2FF!important;border-radius:4px}:host input{flex:1}:host input.with-button{border-bottom-right-radius:0;border-top-right-radius:0}:host .dropped-files{display:flex;flex-direction:row;margin-bottom:.5rem;flex-wrap:wrap}:host .dropped-files__item{display:flex;flex-direction:column;justify-content:center;margin:0 10px 10px 0;position:relative}:host .dropped-files__item__preview{background-size:cover;background-position:center;width:64px;height:64px;border-radius:8px;border:1px solid #ccc}:host .dropped-files__item__preview i{font-size:62px}:host .dropped-files__item__name{white-space:nowrap;font-size:12px;color:#8f929e;margin-top:4px;max-width:64px;overflow:hidden;text-overflow:ellipsis}:host .dropped-files__item__remove{position:absolute;right:-4px;top:-4px;cursor:pointer;background:white;border-radius:12px;color:#8f929e;border:1px solid #8f929e;font-size:14px}\n"]
+DrAccordionModule.decorators = [
+    { type: NgModule, args: [{
+                imports: [CommonModule],
+                exports: [...DR_ACCORDION_COMPONENTS],
+                declarations: [...DR_ACCORDION_COMPONENTS],
+                providers: [],
             },] }
 ];
-DrChatFormComponent.ctorParameters = () => [
-    { type: ChangeDetectorRef },
-    { type: DomSanitizer }
-];
-DrChatFormComponent.propDecorators = {
-    message: [{ type: Input }],
-    messagePlaceholder: [{ type: Input }],
-    dropFiles: [{ type: Input }],
-    dropFilePlaceholder: [{ type: Input }],
-    waitForReply: [{ type: Input }],
-    send: [{ type: Output }],
-    abort: [{ 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);
-    }
+const components = [
+    DrLayoutComponent,
+    DrLayoutHeaderComponent,
+    DrLayoutBodyComponent
+];
+class DrLayoutModule {
 }
-DrChatCustomMessageService.decorators = [
-    { type: Injectable }
+DrLayoutModule.decorators = [
+    { type: NgModule, args: [{
+                imports: [CommonModule],
+                exports: [...components],
+                declarations: [...components],
+            },] }
 ];
 
-class DrChatMessageComponent {
-    constructor(customMessageService) {
-        this.customMessageService = customMessageService;
-        this.MESSAGE_TYPE = CHAT_MESSAGE_TYPE;
-        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;
-    }
+class DrErrorModule {
 }
-DrChatMessageComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'dr-chat-message',
-                template: "<ng-container *ngIf=\"message.avatarUrl; else userAvatar\">\n    <div class=\"avatar\" [style.background-image]=\"'url(' + message.avatarUrl + ')'\"></div>\n</ng-container>\n<ng-template #userAvatar>\n    <dr-avatar *ngIf=\"message.user\" [users]=\"message.user\"></dr-avatar>\n</ng-template>\n<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-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 class=\"message__actions\" *ngIf=\"drChatMessageActions;\">\n        <ng-container [ngTemplateOutlet]=\"drChatMessageActions\"></ng-container>\n    </div>\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%)' }))]),
-                    ]),
+DrErrorModule.decorators = [
+    { type: NgModule, args: [{
+                imports: [
+                    CommonModule,
+                    FormsModule,
+                    DrTooltipModule
+                ],
+                exports: [DrErrorComponent],
+                providers: [],
+                declarations: [
+                    DrErrorComponent
                 ],
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                styles: [":host{position:relative;display:flex;flex-direction:row;width:100%;background:rgba(249,250,255,.7);border-top:1px solid #E5E5E5;padding:16px 24px}:host:first-child{border:none}:host:last-child{border-bottom:1px solid #E5E5E5}.reply+:host.reply,.not-reply+:host.not-reply{border-top:none;padding-top:0;padding-left:75px}.reply+:host.reply .avatar,.reply+:host.reply dr-avatar,.not-reply+:host.not-reply .avatar,.not-reply+:host.not-reply dr-avatar{display:none}:host.not-reply{background-color:#fff}:host .avatar{display:flex;width:28px;height:28px;background-color:#fff;border-radius:16px;flex-shrink:0;box-shadow:0 1px 3px 1px #0003;background-image:url(\"data:image/svg+xml,%3C%3Fxml version%3D%221.0%22 encoding%3D%22UTF-8%22%3F%3E%3Csvg id%3D%22Layer_1%22 data-name%3D%22Layer 1%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22 viewBox%3D%220 0 74 65%22%3E  %3Cdefs%3E    %3Cstyle%3E      .cls-1%2C .cls-2%2C .cls-3 %7B        fill%3A none%3B      %7D      .cls-4 %7B        fill%3A url(%23linear-gradient)%3B      %7D      .cls-5 %7B        fill%3A %234eb7df%3B      %7D      .cls-2 %7B        stroke%3A %23a6a8aa%3B        stroke-miterlimit%3A 10%3B        stroke-width%3A .37px%3B      %7D      .cls-6 %7B        fill%3A url(%23linear-gradient-3)%3B      %7D      .cls-7 %7B        fill%3A url(%23linear-gradient-2)%3B      %7D      .cls-3 %7B        clip-path%3A url(%23clippath)%3B      %7D    %3C%2Fstyle%3E    %3CclipPath id%3D%22clippath%22%3E      %3Crect class%3D%22cls-1%22 width%3D%2274%22 height%3D%2265%22%2F%3E    %3C%2FclipPath%3E    %3ClinearGradient id%3D%22linear-gradient%22 x1%3D%2224.26%22 y1%3D%22-3.79%22 x2%3D%2295.63%22 y2%3D%2288.82%22 gradientTransform%3D%22translate(0 65.89) scale(1 -1)%22 gradientUnits%3D%22userSpaceOnUse%22%3E      %3Cstop offset%3D%220%22 stop-color%3D%22%237676ff%22%2F%3E      %3Cstop offset%3D%22.18%22 stop-color%3D%22%235959ff%22%2F%3E      %3Cstop offset%3D%22.35%22 stop-color%3D%22%235757e0%22%2F%3E      %3Cstop offset%3D%22.61%22 stop-color%3D%22%234646ce%22%2F%3E      %3Cstop offset%3D%22.84%22 stop-color%3D%22%234b4be4%22%2F%3E      %3Cstop offset%3D%221%22 stop-color%3D%22%234444eb%22%2F%3E    %3C%2FlinearGradient%3E    %3ClinearGradient id%3D%22linear-gradient-2%22 x1%3D%2212.05%22 y1%3D%2277.06%22 x2%3D%2210.77%22 y2%3D%2213.85%22 gradientTransform%3D%22translate(0 65.89) scale(1 -1)%22 gradientUnits%3D%22userSpaceOnUse%22%3E      %3Cstop offset%3D%22.45%22 stop-color%3D%22%232f92b8%22%2F%3E      %3Cstop offset%3D%22.84%22 stop-color%3D%22%234eb7df%22%2F%3E      %3Cstop offset%3D%221%22 stop-color%3D%22%234eb7df%22%2F%3E    %3C%2FlinearGradient%3E    %3ClinearGradient id%3D%22linear-gradient-3%22 x1%3D%2262.26%22 y1%3D%22-2.54%22 x2%3D%2261.76%22 y2%3D%2285.91%22 gradientTransform%3D%22translate(0 65.89) scale(1 -1)%22 gradientUnits%3D%22userSpaceOnUse%22%3E      %3Cstop offset%3D%220%22 stop-color%3D%22%2336369b%22%2F%3E      %3Cstop offset%3D%22.52%22 stop-color%3D%22%234848d0%22%2F%3E    %3C%2FlinearGradient%3E  %3C%2Fdefs%3E  %3Cg class%3D%22cls-3%22%3E    %3Cg%3E      %3Cpath class%3D%22cls-4%22 d%3D%22m73.32%2C24.79v15.73c0%2C13.12-9.87%2C23.79-22%2C23.79h-21.32c-3.46-.06-6.25-3.11-6.25-6.87s2.79-6.81%2C6.25-6.87h21.32c5.13%2C0%2C9.29-4.51%2C9.29-10.05v-15.73c0-5.54-4.17-10.05-9.29-10.05h-7.46c3.51%2C0%2C6.35-3.08%2C6.35-6.88s-2.79-6.8-6.25-6.87h7.35c12.12%2C0%2C22%2C10.67%2C22%2C23.79h0Z%22%2F%3E      %3Cpath class%3D%22cls-5%22 d%3D%22m50.26%2C7.82c0%2C3.8-2.9%2C6.93-6.41%2C6.93h-21.86c-5.13%2C0-9.29%2C4.51-9.29%2C10.05v15.73c0%2C5.54%2C4.17%2C10.05%2C9.29%2C10.05h8.01c-3.46.06-6.25%2C3.11-6.25%2C6.87s2.79%2C6.81%2C6.25%2C6.87h-8.01c-12.12%2C0-22-10.67-22-23.79v-15.73C0%2C11.68%2C9.87%2C1%2C21.99%2C1h21.97c3.46.06%2C6.3%2C3.06%2C6.3%2C6.82Z%22%2F%3E      %3Cpath class%3D%22cls-2%22 d%3D%22m66.45%2C1h-.22.22%2C0Z%22%2F%3E      %3Cpath class%3D%22cls-2%22 d%3D%22m36.05%2C50.58h-.22.22%2C0Z%22%2F%3E      %3Cpath class%3D%22cls-7%22 d%3D%22m0%2C33.78v-2.76C0%2C12.9%2C13.62%2C14.48%2C13.62%2C14.48h8.38c-5.5.46-9.5%2C4.71-9.5%2C9.96l.02%2C15.8c0%2C5.54%2C4.44%2C10.59%2C9.48%2C10.59l-8-.5S0%2C51.88%2C0%2C33.77h0Z%22%2F%3E      %3Cpath class%3D%22cls-6%22 d%3D%22m73%2C31.51v2.76c0%2C18.12-13.62%2C16.53-13.62%2C16.53h-7.99c5.61-.85%2C9.09-4.76%2C9.09-10.02l.02-16.33c0-5.54-4.46-10-9.5-10h8s13.99-1.05%2C13.99%2C17.07h0Z%22%2F%3E    %3C%2Fg%3E  %3C%2Fg%3E%3C%2Fsvg%3E\");background-size:20px 22px;background-repeat:no-repeat;background-position-x:4px;background-position-y:3px}:host .avatar,:host dr-avatar{margin:0 23px 0 0}:host .message{display:flex;align-items:center;flex-grow:1}:host .message__actions{display:flex;align-items:center;margin-left:24px;flex-grow:1;justify-content:flex-end}:host .message__actions::ng-deep button:not(:hover) i[class*=dr-icon]{color:#b9b9ec!important}\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 }],
-    user: [{ type: Input }],
-    drChatMessageActions: [{ type: ContentChild, args: ['drChatMessageActions',] }]
-};
 
-class DrChatSuggestionsComponent {
+class StepperComponent {
     constructor() {
-        this._nonHiddenValues = [];
-        this.visibleValues = [];
-        this.values = [];
-        this.fullScreen = false;
-        this.buttonMode = false;
-        /**
-         * Parameter to check is send message function available
-         *
-         * @type {boolean}
-         */
-        this.waitForReply = false;
-        this.suggestionSelect = new EventEmitter();
-    }
-    get hiddenValues() {
-        return JSON.parse(localStorage.getItem('aiChatSuggestions')) || [];
-    }
-    set hiddenValues(values) {
-        localStorage.setItem('aiChatSuggestions', JSON.stringify(values));
-    }
-    ngOnInit() {
-        this.filterValues();
+        this.withoutConnectors = false;
+        this.hiddenNames = false;
+        this.inlineLabels = false;
+        this.disabled = false;
+        this.hiddenIndex = false;
+        this.stepChange = new EventEmitter();
     }
-    onItemClick(item) {
-        if (this.waitForReply) {
-            return;
+    selectStep(step) {
+        if (step !== this.currentStep && !this.disabled) {
+            this.stepChange.emit(step);
         }
-        this.suggestionSelect.emit(item);
-        this.hiddenValues = [...this.hiddenValues, item];
-        this.filterValues();
-        this.suggestionCardsList.nativeElement.style.visibility = 'hidden';
-        setTimeout(() => this.suggestionCardsList.nativeElement.style.visibility = '', 10);
     }
-    filterValues() {
-        const hiddenValues = this.hiddenValues;
-        this._nonHiddenValues = _.filter(this.values, val => !hiddenValues.includes(val));
-        this.fillVisibleValues();
+    getWidth(step) {
+        if (this.withoutConnectors)
+            return '0%';
+        if (step.completed)
+            return '100%';
+        if (step.index === 0 || this.steps[step.index - 1].completed)
+            return `${((step === null || step === void 0 ? void 0 : step.completedTasks) / (step === null || step === void 0 ? void 0 : step.requiredTasks) * 100) || 0}%`;
+        return '0%';
     }
-    fillVisibleValues() {
-        const maxItemsCount = this.fullScreen ? 6 : 4;
-        const nonHiddenValues = _.clone(this._nonHiddenValues);
-        this.visibleValues.length = 0;
-        for (let i = 0; i < maxItemsCount; i++) {
-            if (!nonHiddenValues.length) {
-                break;
-            }
-            const randomIndex = Math.floor(Math.random() * nonHiddenValues.length);
-            const item = nonHiddenValues.splice(randomIndex, 1)[0];
-            this.visibleValues.push(item);
-        }
+    scrollLeft() {
+        this.stepper.nativeElement.scrollLeft -= 80;
     }
-    clearHidden() {
-        localStorage.setItem('aiChatSuggestions', null);
-        this.filterValues();
+    scrollRight() {
+        this.stepper.nativeElement.scrollLeft += 80;
+    }
+    roundWidth(width) {
+        return Math.round(width);
     }
 }
-DrChatSuggestionsComponent.decorators = [
+StepperComponent.decorators = [
     { type: Component, args: [{
-                selector: 'dr-chat-suggestions',
-                template: "<div class=\"chat-suggestions\">\n    <ng-container *ngIf=\"buttonMode; else suggestionCards\">\n        <div class=\"chat-suggestions__container\" (mouseenter)=\"fillVisibleValues()\">\n            <dr-button theme=\"ghost\" class=\"chat-suggestions__container__button\">\n                Suggested chats\n            </dr-button>\n            <ng-container *ngTemplateOutlet=\"suggestionCards\"></ng-container>\n        </div>\n    </ng-container>\n</div>\n\n<ng-template #suggestionCards>\n    <div class=\"chat-suggestions__items\" #suggestionCardsList>\n        <div class=\"chat-suggestions__items__background\"></div>\n        <div *ngFor=\"let item of visibleValues\"\n             class=\"chat-suggestions__items__item\" (click)=\"onItemClick(item)\">\n            {{ item }}\n        </div>\n    </div>\n</ng-template>\n",
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                styles: [":host{display:flex;align-items:flex-start;justify-content:center}:host .chat-suggestions{display:flex;width:100%;max-width:970px}:host .chat-suggestions__container{display:flex;position:relative;width:auto;margin-top:12px;padding:0 24px}:host .chat-suggestions__container:hover{width:100%}:host .chat-suggestions__container:hover .chat-suggestions__container__button::ng-deep button{color:#4646ce;background:#f2f2fb}:host .chat-suggestions__container:hover .chat-suggestions__items,:host .chat-suggestions__container:hover .chat-suggestions__items__background{display:flex}:host .chat-suggestions__container__button::ng-deep button{background:#F2F2FF!important;border-radius:4px}:host .chat-suggestions__container .chat-suggestions__items{display:none;position:absolute;width:100%;bottom:0;left:0;padding-bottom:32px;z-index:2}:host .chat-suggestions__items{display:flex;flex-wrap:wrap;width:100%;justify-content:space-between;padding:0 24px}:host .chat-suggestions__items__background{display:none;position:absolute;top:-32px;right:0;bottom:32px;left:0;background:white;opacity:.7;z-index:-1}:host .chat-suggestions__items__item{margin:0 0 20px;display:inline-flex;height:76px;width:275px;padding:16px;border-radius:8px;background:#F2F2FF;box-shadow:0 1px 2px #00000026;font-size:14px;line-height:24px;color:#25258c}:host .chat-suggestions__items__item:hover{cursor:pointer;background:#EAEAFF}\n"]
+                selector: 'dr-stepper',
+                template: "<div class=\"scroll-section\" *ngIf=\"stepper?.scrollLeft !== 0\" (click)=\"scrollLeft()\">\n    <i class=\"dr-icon-arrow-right\"></i>\n</div>\n<div #stepper class=\"stepper\" [ngClass]=\"{'stepper--disabled': disabled}\">\n    <ng-container *ngFor=\"let step of steps; let index = index; last as isLast; first as isFirst\">\n        <div *ngIf=\"!step.hide\" class=\"step\" (click)=\"selectStep(step)\"\n             [class.step-setup]=\"inlineLabels\">\n            <div class=\"step-wrapper\" [drTooltip]=\"step.description && tooltip\"\n                 [drTooltipContext]=\"{ step: step }\"\n                 [drTooltipPosition]=\"'bottom'\">\n                <div data-test=\"step_point\" class=\"step-point\" [class.active]=\"currentStep === step\" [class.completed]=\"step.completed\">\n                    <div *ngIf=\"step === currentStep;\" class=\"ellipse\"></div>\n                    <ng-container [ngSwitch]=\"step.completed\">\n                        <ng-template [ngSwitchCase]=\"true\">\n                            <div class=\"pointer blue\">\n                                <i class=\"dr-icon-approve\"></i>\n                            </div>\n                        </ng-template>\n                        <ng-template [ngSwitchCase]=\"false\">\n                            <div class=\"pointer\" [class.gray]=\"step !== currentStep\"\n                                 [ngClass]=\"{'blue with-ellipse': step === currentStep}\">\n                                <div [hidden]=\"step === currentStep || hiddenIndex\" class=\"text\">{{index + 1}}</div>\n                            </div>\n                        </ng-template>\n                    </ng-container>\n                </div>\n                <div data-test=\"step_label_name\" class=\"step-label\" [class.active]=\"currentStep === step\"\n                     [ngClass]=\"step.completed ? 'completed' : 'uncompleted'\">\n                    <span [hidden]=\"hiddenNames\">{{step.name}}</span>\n                </div>\n                <ng-container *ngIf=\"inlineLabels\" [ngTemplateOutlet]=\"connector\"\n                              [ngTemplateOutletContext]=\"{ index, isLast, step }\">\n                </ng-container>\n                <span *ngIf=\"step.showProgress\"\n                      data-test=\"step_progress\"\n                      class=\"step-progress\">\n                    {{(step.requiredTasks ? step.completedTasks : step.requiredTasks) + '/' + step.requiredTasks}}\n                </span>\n            </div>\n            <ng-container *ngIf=\"!inlineLabels\" [ngTemplateOutlet]=\"connector\"\n                          [ngTemplateOutletContext]=\"{ index, isLast, step }\">\n            </ng-container>\n        </div>\n    </ng-container>\n</div>\n<div (click)=\"scrollRight()\" class=\"scroll-section\"\n     *ngIf=\"stepper?.scrollWidth > stepper?.clientWidth && roundWidth(stepper?.scrollLeft + stepper?.clientWidth) < stepper?.scrollWidth\">\n    <i class=\"dr-icon-arrow-right\"></i>\n</div>\n\n<ng-template #tooltip let-step=\"step\">\n    <div class=\"step-tooltip\">\n        <div class=\"step-tooltip_name\">{{step.name}}</div>\n        <div class=\"step-tooltip_description\">{{step.description}}</div>\n    </div>\n</ng-template>\n\n<ng-template #connector let-step=\"step\" let-isLast=\"isLast\" let-index=\"index\">\n    <div class=\"step-connector\" [class.only-one-step]=\"steps.length === 1\"\n         [class]=\"'step-connector--' + (!inlineLabels ? 'absolute' : 'inline')\"\n         *ngIf=\"steps.length === 1 || !isLast\"\n         [style.visibility]=\"withoutConnectors || steps[step.index + 1]?.hide ? 'hidden' : 'unset'\"\n         [class.connector-grand]=\"!inlineLabels && (index === 0 || index === steps.length - 2)\">\n        <div class=\"progress\" [style.width]=\"getWidth(step)\"></div>\n    </div>\n</ng-template>\n",
+                changeDetection: ChangeDetectionStrategy.Default,
+                styles: [":host{font-family:\"Poppins\",sans-serif;display:flex;justify-content:center;height:100%;position:relative}:host .scroll-section{position:absolute;top:0;height:100%;width:108px;display:flex;align-items:center;z-index:10}:host .scroll-section i{font-size:24px;color:#2969b0;background:#f3f7ff;border-radius:24px}:host .scroll-section i:hover{background:#cde1fb;cursor:pointer}:host .scroll-section:first-child{left:0;padding-left:16px;background:linear-gradient(90deg,#ffffff 36.08%,rgba(255,255,255,0) 87.17%)}:host .scroll-section:first-child i{transform:rotate(180deg)}:host .scroll-section:last-child{right:0;padding-right:16px;background:linear-gradient(270deg,#ffffff 36.08%,rgba(255,255,255,0) 87.17%);justify-content:flex-end}:host .stepper{display:flex;align-items:center;height:100%;width:100%;overflow:auto;scroll-behavior:smooth}:host .stepper::-webkit-scrollbar{display:none}:host .stepper--disabled .step:hover{cursor:default}:host .stepper--disabled .step-point .ellipse{border-color:#bcbcbc}:host .stepper--disabled .step-point .pointer{color:#fff;background-color:#bcbcbc;cursor:default}:host .stepper--disabled .step-label{color:#bcbcbc}:host .stepper--disabled .step-connector{background-color:#bcbcbc}:host .stepper--disabled .step-connector .progress{background-color:#bcbcbc}:host .step{position:relative;display:flex;flex-direction:column;width:120px;align-items:center;flex-shrink:0;flex-grow:1}:host .step:hover{cursor:pointer}:host .step:not(.step-setup) .step-wrapper{width:100%}:host .step:not(.step-setup):first-child .step-wrapper,:host .step:not(.step-setup):first-child .step-point,:host .step:not(.step-setup):first-child .step-label,:host .step:not(.step-setup):first-child .step-progress{margin-left:8px}:host .step:not(.step-setup):first-child .only-one-step{left:0!important;margin-left:25px}:host .step-point{display:flex;justify-content:center;width:100%;height:28px;position:relative;align-items:center}:host .step-point .ellipse{width:28px;height:28px;position:absolute;border-radius:50px;border-color:#4646ce;border-style:solid;border-width:2px;background:white;display:flex;justify-content:center;align-items:center;z-index:2}:host .step-point .pointer{width:24px;height:24px;position:absolute;z-index:4;border-radius:20px;display:flex;align-items:center;justify-content:center;font-weight:bold;font-size:16px;line-height:1.4;color:#51566f;transition:box-shadow .2s ease-in-out}:host .step-point .pointer i{color:#fff;font-size:22px}:host .step-point .pointer.blue{background:#4646ce}:host .step-point .pointer.gray{background:#e5e6ea}:host .step-point .pointer.gray:hover{box-shadow:0 0 4px 2px #00000026}:host .step-point.completed :host .step-point.active{background:#4646ce}:host .step-point.active .ellipse{width:28px;height:28px}:host .step-point.active .pointer{width:20px;height:20px}:host .step-label{font-weight:normal;font-size:14px;line-height:22px;line-height:1.5;color:#6d6e6f;display:flex;justify-content:center;overflow:hidden;margin-top:8px}:host .step-label span{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}:host .step-label.active{font-weight:600;color:#333}:host .step-label:last-child{margin-bottom:23px}:host .step-progress{margin-top:3px;font-style:normal;font-weight:normal;font-size:12px;line-height:1.4;display:flex;justify-content:center}:host .step-connector{background-color:#e5e5e5;height:2px}:host .step-connector.connector-grand{width:calc(100% - 25px)}:host .step-connector.connector-grand.only-one-step{width:calc(100% - 50px)}:host .step-connector .progress{background-color:#4646ce;height:2px;width:0}:host .step-connector--absolute{position:absolute;top:calc(28px / 2);width:100%;left:calc(100% / 2 + 12px)}:host .step-connector--inline{width:50px;margin-left:32px;margin-right:32px}:host .step-setup{width:auto}:host .step-setup .step-wrapper{display:flex;flex-direction:row;align-items:center;width:auto}:host .step-setup+.step-setup{margin-left:0}:host .step-setup .step-progress{display:none}:host .step-setup .step-label{position:relative;transform:none;align-items:center;justify-content:start;margin:0 0 0 8px;font-size:16px}:host .step-setup .step-point{width:28px;height:28px}:host .step-setup .step-point .pointer i{font-size:22px}:host .step-setup .step-point .pointer .text{font-size:16px}::ng-deep .step-tooltip{max-width:250px;font-size:14px;line-height:22px;padding:10px 12px}::ng-deep .step-tooltip_name{font-weight:700;overflow:hidden;text-overflow:ellipsis}@media screen and (min-width: 1367px){.stepper .step-label{font-size:14px}}\n"]
             },] }
 ];
-DrChatSuggestionsComponent.ctorParameters = () => [];
-DrChatSuggestionsComponent.propDecorators = {
-    values: [{ type: Input }],
-    fullScreen: [{ type: Input }],
-    buttonMode: [{ type: Input }],
-    waitForReply: [{ type: Input }],
-    suggestionSelect: [{ type: Output }],
-    suggestionCardsList: [{ type: ViewChild, args: ['suggestionCardsList',] }]
+StepperComponent.ctorParameters = () => [];
+StepperComponent.propDecorators = {
+    steps: [{ type: Input }],
+    currentStep: [{ type: Input }],
+    withoutConnectors: [{ type: Input }],
+    hiddenNames: [{ type: Input }],
+    inlineLabels: [{ type: Input }],
+    disabled: [{ type: Input }],
+    hiddenIndex: [{ type: Input }],
+    stepChange: [{ type: Output }],
+    stepper: [{ type: ViewChild, args: ['stepper', { read: ElementRef },] }]
 };
 
-class DrChatComponent {
-    constructor(cdr) {
-        this.cdr = cdr;
-        this.destroy$ = new Subject();
-        this.showClearButton = true;
-        this.noMessagesPlaceholder = 'No messages yet.';
-        this._scrollBottom = true;
-        this.suggestions = [];
-        /**
-         * Parameter to check is send message function available
-         *
-         * @type {boolean}
-         */
-        this.waitForReply = false;
-        this.clear = new EventEmitter();
-        this.close = new EventEmitter();
-        this.suggestionSelect = new EventEmitter();
-    }
-    set contentUpdateSubject(value) {
-        if (value) {
-            value.pipe(takeUntil(this.destroy$)).subscribe(() => {
-                this.updateView();
-            });
-        }
-    }
-    ;
-    /**
-     * Scroll chat to the bottom of the list when a new message arrives
-     */
-    get scrollBottom() {
-        return this._scrollBottom;
-    }
-    set scrollBottom(value) {
-        this._scrollBottom = !!value;
-    }
-    get messagesContainerWithScroll() {
-        return this.messagesContainer && this.messagesContainer.nativeElement.scrollHeight > this.messagesContainer.nativeElement.offsetHeight;
-    }
-    ;
-    ngAfterViewInit() {
-        this.messages.changes.subscribe(messages => {
-            this.messages = messages;
-            this.updateView();
-        });
-        this.updateView();
-    }
-    updateView() {
-        if (this.scrollBottom) {
-            this.scrollListBottom();
-        }
-    }
-    scrollListBottom() {
-        setTimeout(() => {
-            if (this.messagesContainer) {
-                const scrollToOptions = {
-                    top: this.messagesContainer.nativeElement.scrollHeight,
-                };
-                if (!this.reopen) {
-                    scrollToOptions.behavior = 'smooth';
-                }
-                this.messagesContainer.nativeElement.scrollTo(scrollToOptions);
-                this.cdr.markForCheck();
-            }
-        });
-    }
-    ngOnDestroy() {
-        this.destroy$.next();
-        this.destroy$.complete();
-    }
-    onClearClick($event) {
-        this.clear.emit($event);
-        if (this._chatSuggestions) {
-            this._chatSuggestions.clearHidden();
-        }
-    }
+class DrStepperModule {
 }
-DrChatComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'dr-chat',
-                template: "<div class=\"chat\" [class.chat--in-full-screen]=\"fullScreen\">\n    <div class=\"chat__header\">\n        <div class=\"chat__header__logo\"></div>\n\n        <div class=\"chat__header__text\">\n            <div class=\"chat__header__text__title\">{{ title }}</div>\n            <div *ngIf=\"subtitle\" class=\"chat__header__text__subtitle\">{{ subtitle }}</div>\n        </div>\n\n        <dr-button *ngIf=\"showClearButton\"\n                   (click)=\"onClearClick($event)\"\n                   theme=\"icon\"\n                   icon=\"dr-icon-clear\"\n                   class=\"ml-auto\"\n                   drTooltip=\"Clear chat\">\n        </dr-button>\n\n        <dr-button *ngIf=\"!fullScreen\"\n                   (click)=\"close.emit($event)\"\n                   theme=\"icon\"\n                   icon=\"dr-icon-exit\"\n                   class=\"ml-4\"\n                   drTooltip=\"Close\">\n        </dr-button>\n    </div>\n\n    <div *ngIf=\"!messages?.length\" class=\"chat__empty-state\">\n        <span class=\"chat__empty-state__text\">{{ noMessagesPlaceholder }}</span>\n    </div>\n\n    <div *ngIf=\"messages?.length\" class=\"chat__messages\">\n        <div #messagesContainer class=\"chat__messages__container\"\n             [class.chat__messages__container--scroll]=\"messagesContainerWithScroll\">\n            <ng-content select=\"dr-chat-message\"></ng-content>\n        </div>\n    </div>\n\n    <dr-chat-suggestions *ngIf=\"suggestions?.length\"\n                         [values]=\"suggestions\"\n                         [fullScreen]=\"fullScreen\"\n                         [waitForReply]=\"waitForReply\"\n                         class=\"chat__suggestions\"\n                         [class.chat__suggestions--full-height]=\"fullScreen && !messages?.length\"\n                         [buttonMode]=\"!!messages?.length\"\n                         (suggestionSelect)=\"suggestionSelect.emit($event)\">\n    </dr-chat-suggestions>\n\n    <div class=\"form\">\n        <ng-content select=\"dr-chat-form\"></ng-content>\n    </div>\n</div>\n",
-                providers: [DrChatCustomMessageService],
-                styles: [":host{height:100%;width:100%;display:flex;flex-direction:column}.chat{position:relative;display:flex;flex-grow:1;flex-direction:column;height:100%;background-color:#fff;color:#4e566c;font-family:\"Poppins\",sans-serif;font-size:14px;font-weight:400;line-height:22px}.chat__header{display:flex;align-items:center;background-color:#f2f2ff;color:#25258c;padding:15px 24px;font-weight:400;font-size:20px;line-height:28px;box-shadow:0 1px 3px #0003;z-index:1}.chat__header__logo{display:flex;width:43px;height:38px;background:url(\"data:image/svg+xml,%3C%3Fxml version%3D%221.0%22 encoding%3D%22UTF-8%22%3F%3E%3Csvg id%3D%22Layer_1%22 data-name%3D%22Layer 1%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22 viewBox%3D%220 0 74 65%22%3E  %3Cdefs%3E    %3Cstyle%3E      .cls-1%2C .cls-2%2C .cls-3 %7B        fill%3A none%3B      %7D      .cls-4 %7B        fill%3A url(%23linear-gradient)%3B      %7D      .cls-5 %7B        fill%3A %234eb7df%3B      %7D      .cls-2 %7B        stroke%3A %23a6a8aa%3B        stroke-miterlimit%3A 10%3B        stroke-width%3A .37px%3B      %7D      .cls-6 %7B        fill%3A url(%23linear-gradient-3)%3B      %7D      .cls-7 %7B        fill%3A url(%23linear-gradient-2)%3B      %7D      .cls-3 %7B        clip-path%3A url(%23clippath)%3B      %7D    %3C%2Fstyle%3E    %3CclipPath id%3D%22clippath%22%3E      %3Crect class%3D%22cls-1%22 width%3D%2274%22 height%3D%2265%22%2F%3E    %3C%2FclipPath%3E    %3ClinearGradient id%3D%22linear-gradient%22 x1%3D%2224.26%22 y1%3D%22-3.79%22 x2%3D%2295.63%22 y2%3D%2288.82%22 gradientTransform%3D%22translate(0 65.89) scale(1 -1)%22 gradientUnits%3D%22userSpaceOnUse%22%3E      %3Cstop offset%3D%220%22 stop-color%3D%22%237676ff%22%2F%3E      %3Cstop offset%3D%22.18%22 stop-color%3D%22%235959ff%22%2F%3E      %3Cstop offset%3D%22.35%22 stop-color%3D%22%235757e0%22%2F%3E      %3Cstop offset%3D%22.61%22 stop-color%3D%22%234646ce%22%2F%3E      %3Cstop offset%3D%22.84%22 stop-color%3D%22%234b4be4%22%2F%3E      %3Cstop offset%3D%221%22 stop-color%3D%22%234444eb%22%2F%3E    %3C%2FlinearGradient%3E    %3ClinearGradient id%3D%22linear-gradient-2%22 x1%3D%2212.05%22 y1%3D%2277.06%22 x2%3D%2210.77%22 y2%3D%2213.85%22 gradientTransform%3D%22translate(0 65.89) scale(1 -1)%22 gradientUnits%3D%22userSpaceOnUse%22%3E      %3Cstop offset%3D%22.45%22 stop-color%3D%22%232f92b8%22%2F%3E      %3Cstop offset%3D%22.84%22 stop-color%3D%22%234eb7df%22%2F%3E      %3Cstop offset%3D%221%22 stop-color%3D%22%234eb7df%22%2F%3E    %3C%2FlinearGradient%3E    %3ClinearGradient id%3D%22linear-gradient-3%22 x1%3D%2262.26%22 y1%3D%22-2.54%22 x2%3D%2261.76%22 y2%3D%2285.91%22 gradientTransform%3D%22translate(0 65.89) scale(1 -1)%22 gradientUnits%3D%22userSpaceOnUse%22%3E      %3Cstop offset%3D%220%22 stop-color%3D%22%2336369b%22%2F%3E      %3Cstop offset%3D%22.52%22 stop-color%3D%22%234848d0%22%2F%3E    %3C%2FlinearGradient%3E  %3C%2Fdefs%3E  %3Cg class%3D%22cls-3%22%3E    %3Cg%3E      %3Cpath class%3D%22cls-4%22 d%3D%22m73.32%2C24.79v15.73c0%2C13.12-9.87%2C23.79-22%2C23.79h-21.32c-3.46-.06-6.25-3.11-6.25-6.87s2.79-6.81%2C6.25-6.87h21.32c5.13%2C0%2C9.29-4.51%2C9.29-10.05v-15.73c0-5.54-4.17-10.05-9.29-10.05h-7.46c3.51%2C0%2C6.35-3.08%2C6.35-6.88s-2.79-6.8-6.25-6.87h7.35c12.12%2C0%2C22%2C10.67%2C22%2C23.79h0Z%22%2F%3E      %3Cpath class%3D%22cls-5%22 d%3D%22m50.26%2C7.82c0%2C3.8-2.9%2C6.93-6.41%2C6.93h-21.86c-5.13%2C0-9.29%2C4.51-9.29%2C10.05v15.73c0%2C5.54%2C4.17%2C10.05%2C9.29%2C10.05h8.01c-3.46.06-6.25%2C3.11-6.25%2C6.87s2.79%2C6.81%2C6.25%2C6.87h-8.01c-12.12%2C0-22-10.67-22-23.79v-15.73C0%2C11.68%2C9.87%2C1%2C21.99%2C1h21.97c3.46.06%2C6.3%2C3.06%2C6.3%2C6.82Z%22%2F%3E      %3Cpath class%3D%22cls-2%22 d%3D%22m66.45%2C1h-.22.22%2C0Z%22%2F%3E      %3Cpath class%3D%22cls-2%22 d%3D%22m36.05%2C50.58h-.22.22%2C0Z%22%2F%3E      %3Cpath class%3D%22cls-7%22 d%3D%22m0%2C33.78v-2.76C0%2C12.9%2C13.62%2C14.48%2C13.62%2C14.48h8.38c-5.5.46-9.5%2C4.71-9.5%2C9.96l.02%2C15.8c0%2C5.54%2C4.44%2C10.59%2C9.48%2C10.59l-8-.5S0%2C51.88%2C0%2C33.77h0Z%22%2F%3E      %3Cpath class%3D%22cls-6%22 d%3D%22m73%2C31.51v2.76c0%2C18.12-13.62%2C16.53-13.62%2C16.53h-7.99c5.61-.85%2C9.09-4.76%2C9.09-10.02l.02-16.33c0-5.54-4.46-10-9.5-10h8s13.99-1.05%2C13.99%2C17.07h0Z%22%2F%3E    %3C%2Fg%3E  %3C%2Fg%3E%3C%2Fsvg%3E\") no-repeat;background-size:100% 100%}.chat__header__text{display:flex;flex-direction:column;flex-grow:1;margin-left:20px}.chat__header__text__title{display:flex;align-items:center}.chat__header__text__title:after{content:\"BETA\";display:inline-flex;padding:2px 10px;background:#25258C;color:#f4f4f3;font-weight:600;font-size:10px;line-height:14px;border-radius:8px;margin-left:12px;font-family:\"Nunito Sans\",sans-serif}.chat__header__text__subtitle{font-size:14px;line-height:22px}.chat__header dr-button::ng-deep button:not(:hover){color:#25258c}.chat__empty-state{display:flex;justify-content:center}.chat__empty-state__text{padding:20px 0;font-family:Poppins,sans-serif;font-size:20px;font-weight:300;line-height:30px;text-align:center;max-width:440px;color:#4646ce}.chat__messages{display:flex;flex-grow:1;overflow-x:hidden;overflow-y:auto;height:100%;width:100%}.chat__messages__container{overflow-y:auto;overflow-x:hidden;display:flex;flex-shrink:0;flex-direction:column;width:100%;padding-bottom:1px}.chat__messages__container--scroll::ng-deep dr-chat-message{padding-right:16px}.chat__suggestions--full-height{flex-grow:1;height:1px;overflow:auto}.chat--in-full-screen .chat__header{padding-left:48px;padding-right:48px}.chat--in-full-screen .chat__empty-state__text{padding:77px 0;font-size:28px;line-height:46px;max-width:570px}.chat--in-full-screen .chat__messages::ng-deep dr-chat-message{justify-content:center}.chat--in-full-screen .chat__messages::ng-deep .message{max-width:919px}.chat--in-full-screen .chat__suggestions::ng-deep .chat-suggestions__items{padding-left:0;padding-right:0}.chat--in-full-screen .chat__suggestions::ng-deep .chat-suggestions__items__item{margin:0 0 26px;height:80px;width:310px;font-size:16px}.chat--in-full-screen .chat__suggestions::ng-deep .chat-suggestions__container{padding:0}\n"]
+DrStepperModule.decorators = [
+    { type: NgModule, args: [{
+                declarations: [StepperComponent],
+                imports: [
+                    CommonModule,
+                    DrTooltipModule
+                ],
+                exports: [StepperComponent]
             },] }
 ];
-DrChatComponent.ctorParameters = () => [
-    { type: ChangeDetectorRef }
+
+class DrDetailsListModule {
+}
+DrDetailsListModule.decorators = [
+    { type: NgModule, args: [{
+                imports: [
+                    CommonModule,
+                ],
+                exports: [DrDetailsListComponent],
+                providers: [],
+                declarations: [DrDetailsListComponent],
+            },] }
+];
+
+const ɵ0$1 = {}, ɵ1 = {};
+class DrDialogModule {
+}
+DrDialogModule.decorators = [
+    { type: NgModule, args: [{
+                declarations: [DialogWrapperComponent, DialogModalWrapperComponent],
+                imports: [
+                    CommonModule,
+                    MatDialogModule,
+                    DrInputsModule,
+                    ReactiveFormsModule,
+                    DrTooltipModule,
+                    DrDetailsListModule
+                ],
+                exports: [DialogWrapperComponent, DialogModalWrapperComponent],
+                providers: [
+                    { provide: MatDialogRef, useValue: ɵ0$1 },
+                    { provide: MAT_DIALOG_DATA, useValue: ɵ1 },
+                    DialogService
+                ]
+            },] }
 ];
-DrChatComponent.propDecorators = {
-    fullScreen: [{ type: Input }],
-    title: [{ type: Input }],
-    subtitle: [{ type: Input }],
-    showClearButton: [{ type: Input }],
-    noMessagesPlaceholder: [{ type: Input }],
-    contentUpdateSubject: [{ type: Input }],
-    scrollBottom: [{ type: Input }],
-    suggestions: [{ type: Input }],
-    reopen: [{ type: Input }],
-    waitForReply: [{ type: Input }],
-    messagesContainer: [{ type: ViewChild, args: ['messagesContainer',] }],
-    messages: [{ type: ContentChildren, args: [DrChatMessageComponent,] }],
-    chatForm: [{ type: ContentChild, args: [DrChatFormComponent,] }],
-    clear: [{ type: Output }],
-    close: [{ type: Output }],
-    suggestionSelect: [{ type: Output }],
-    _chatSuggestions: [{ type: ViewChild, args: [DrChatSuggestionsComponent,] }]
-};
 
 /**
  * Chat text message component.
@@ -6223,5 +6238,5 @@ DrBadgeStatusModule.decorators = [
  * Generated bundle index. Do not edit.
  */
 
-export { AnyTagComponent, BadgeStatus, CHAT_MESSAGE_TYPE, CalendarView, ChatMessage, ChatRole, CheckboxComponent, CustomDateFormat, DIALOG_BUTTON_LABEL, DIALOG_FIELD_TYPE, DIALOG_SIZE, DateFromats, DatePickerPeriodPosition, DateTagComponent, DateTagModule, DateTags, DayTagComponent, DialogService, DrAccordionComponent, DrAccordionItemBodyComponent, DrAccordionItemComponent, DrAccordionItemHeaderComponent, DrAccordionModule, DrAvatarComponent, DrAvatarModule, DrAvatarPipe, DrBadgeStatusModule, DrButtonComponent, DrChatModule, DrDetailsListComponent, DrDetailsListModule, DrDialogModule, DrDropdownComponent, DrDropdownDirective, DrDropdownItemShowPipe, DrDropdownModule, DrDropdownPositionDirective, DrDropdownService, DrErrorComponent, DrErrorModule, DrInputComponent, DrInputsModule, DrLayoutBodyComponent, DrLayoutComponent, DrLayoutHeaderComponent, DrLayoutModule, DrModelDebounceChangeDirective, DrPopoverAlignmentDimension, DrPopoverComponent, DrPopoverDirective, DrPopoverModule, DrPopoverRef, DrPopoverService, DrScenarioModule, DrSelectComponent, DrSharedUtils, DrSpinnerComponent, DrSpinnerDirective, DrSpinnerModule, DrStepperModule, DrTabComponent, DrTabsComponent, DrTabsModule, DrTagComponent, DrTagModule, DrToggleButtonComponent, DrToggleComponent, DrTooltipDirective, DrTooltipModule, ForecastTagComponent, IMAGE_TYPES, ListTagComponent, ListTagModule, MonthTagComponent, QuarterTagComponent, RadioButtonComponent, RadioGroupComponent, Scenario, ScenarioService, SpinnerSize, SpinnerType, TagTypes, TimeframeOption, ToggleButtonMode, TooltipComponent, TooltipPosition, WeekTagComponent, YearTagComponent, components$2 as ɵa, POPUP_ANIMATION as ɵb, DrChatCustomMessageDirective as ɵba, DrScenarioConfigurationComponent as ɵbb, DrScenarioTagConfigurationComponent as ɵbc, DrBadgeStatusComponent as ɵbd, DrDatePickerComponent as ɵc, DrDatePickerService as ɵd, DrDatePickerWithTimeframeComponent as ɵe, DrDatePickerFormatDirective as ɵf, DrDatePickerCustomHeaderComponent as ɵg, DrShowTimeframePipe as ɵh, DrSelectAddItemComponent as ɵi, TooltipInfoComponent as ɵj, TooltipInfoSimpleComponent as ɵk, TooltipNoBodyComponent as ɵl, TooltipProcessDefaultComponent as ɵm, DrDynamicTagModule as ɵn, DrDynamicTagComponent as ɵo, StepperComponent as ɵp, DialogWrapperComponent as ɵq, DialogModalWrapperComponent as ɵr, DrChatComponent as ɵs, DrChatCustomMessageService as ɵt, DrChatMessageComponent as ɵu, DrChatFormComponent as ɵv, DrChatSuggestionsComponent as ɵw, DrChatMessageTextComponent as ɵx, DrChatMessageFileComponent as ɵy, DrDotFlashingComponent as ɵz };
+export { AnyTagComponent, BadgeStatus, CHAT_MESSAGE_TYPE, CalendarView, ChatMessage, ChatRole, CheckboxComponent, CustomDateFormat, DIALOG_BUTTON_LABEL, DIALOG_FIELD_TYPE, DIALOG_SIZE, DateFromats, DatePickerPeriodPosition, DateTagComponent, DateTagModule, DateTags, DayTagComponent, DialogService, DrAccordionComponent, DrAccordionItemBodyComponent, DrAccordionItemComponent, DrAccordionItemHeaderComponent, DrAccordionModule, DrAvatarComponent, DrAvatarModule, DrAvatarPipe, DrBadgeStatusModule, DrButtonComponent, DrChatComponent, DrChatModule, DrDetailsListComponent, DrDetailsListModule, DrDialogModule, DrDropdownComponent, DrDropdownDirective, DrDropdownItemShowPipe, DrDropdownModule, DrDropdownPositionDirective, DrDropdownService, DrErrorComponent, DrErrorModule, DrInputComponent, DrInputsModule, DrLayoutBodyComponent, DrLayoutComponent, DrLayoutHeaderComponent, DrLayoutModule, DrModelDebounceChangeDirective, DrPopoverAlignmentDimension, DrPopoverComponent, DrPopoverDirective, DrPopoverModule, DrPopoverRef, DrPopoverService, DrScenarioModule, DrSelectComponent, DrSharedUtils, DrSpinnerComponent, DrSpinnerDirective, DrSpinnerModule, DrStepperModule, DrTabComponent, DrTabsComponent, DrTabsModule, DrTagComponent, DrTagModule, DrToggleButtonComponent, DrToggleComponent, DrTooltipDirective, DrTooltipModule, ForecastTagComponent, IMAGE_TYPES, ListTagComponent, ListTagModule, MonthTagComponent, QuarterTagComponent, RadioButtonComponent, RadioGroupComponent, Scenario, ScenarioService, SpinnerSize, SpinnerType, TagTypes, TimeframeOption, ToggleButtonMode, TooltipComponent, TooltipPosition, WeekTagComponent, YearTagComponent, components$2 as ɵa, POPUP_ANIMATION as ɵb, DrScenarioConfigurationComponent as ɵba, DrScenarioTagConfigurationComponent as ɵbb, DrBadgeStatusComponent as ɵbc, DrChatCustomMessageService as ɵc, DrChatMessageComponent as ɵd, DrChatFormComponent as ɵe, DrChatSuggestionsComponent as ɵf, DrDatePickerComponent as ɵg, DrDatePickerService as ɵh, DrDatePickerWithTimeframeComponent as ɵi, DrDatePickerFormatDirective as ɵj, DrDatePickerCustomHeaderComponent as ɵk, DrShowTimeframePipe as ɵl, DrSelectAddItemComponent as ɵm, TooltipInfoComponent as ɵn, TooltipInfoSimpleComponent as ɵo, TooltipNoBodyComponent as ɵp, TooltipProcessDefaultComponent as ɵq, DrDynamicTagModule as ɵr, DrDynamicTagComponent as ɵs, StepperComponent as ɵt, DialogWrapperComponent as ɵu, DialogModalWrapperComponent as ɵv, DrChatMessageTextComponent as ɵw, DrChatMessageFileComponent as ɵx, DrDotFlashingComponent as ɵy, DrChatCustomMessageDirective as ɵz };
 //# sourceMappingURL=datarailsshared-datarailsshared.js.map