@datarailsshared/datarailsshared 1.4.178 → 1.4.180

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,2178 +3629,2234 @@ 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',
-        };
-        this.customHeader = DrDatePickerCustomHeaderComponent;
-        this.readonly = true;
-        this.timeframeOption = TimeframeOption;
-        this.innerValue = null;
-        this.destroyed$ = new Subject();
-        this.onTouchedCallback = noop;
-        this.onChangeCallback = noop;
-        // Should be as arrow function to avoid lose scope
-        this.dateFilter = (moment) => {
-            if (this.datepickerFilter && moment) {
-                return this.datepickerFilter(moment);
-            }
-            return true;
-        };
-        datePickerService.updatedQuarter$.pipe(takeUntil(this.destroyed$)).subscribe((value) => {
-            this.setValueFromMoment(value);
-        });
-    }
-    set format(value) {
-        this.datePickerService.updateTimeframeAndFormat(value);
-    }
-    set min(minDate) {
-        this._min = moment.unix(minDate).utc();
-    }
-    set max(maxDate) {
-        this._max = moment.unix(maxDate).utc();
-    }
-    get value() {
-        return this.innerValue;
-    }
-    set value(v) {
-        if (v !== this.innerValue) {
-            this.setValueFromMoment(v);
-        }
-        this.cdr.markForCheck();
+
+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();
     }
-    ngAfterViewInit() {
-        this.datePickerService.fiscalYearMonthsModifier = this.fiscalYearMonthsModifier;
-        this.datePickerService.datePickerInstance = this.datePicker;
-        this.datePicker.startView = this.calendarViewsTimeframeMapping[this.datePickerService.timeframe];
+    ngOnInit() {
+        this.subscription = this.ngModel.control.valueChanges.pipe(skip(1), debounceTime(this.debounce), distinctUntilChanged()).subscribe(value => this.ngModelDebounceChange.emit(value));
     }
     ngOnDestroy() {
-        this.destroyed$.next();
-        this.destroyed$.complete();
-    }
-    /**
-     * Updating component inner value according to datepicker timeframe (day, month etc.)
-     * and date position in period (start, end, middle)
-     */
-    tryToNormalaizeTimeframe() {
-        const timeframe = this.datePickerService.timeframe;
-        switch (this.periodPosition) {
-            case DatePickerPeriodPosition.START_OF_PERIOD:
-                if (this.datePickerService.timeframe === TimeframeOption.QUARTER) {
-                    this.datePickerService.setStartOfCurrentQuarter(this.innerValue);
-                }
-                else if (this.datePickerService.timeframe === TimeframeOption.YEAR) {
-                    this.datePickerService.setStartOfQuarter(this.innerValue, 1);
-                }
-                else {
-                    this.innerValue.startOf(timeframe);
-                }
-                break;
-            case DatePickerPeriodPosition.END_OF_PERIOD:
-                if (this.datePickerService.timeframe === TimeframeOption.QUARTER) {
-                    this.datePickerService.setEndOfCurrentQuarter(this.innerValue);
-                }
-                else if (this.datePickerService.timeframe === TimeframeOption.YEAR) {
-                    this.datePickerService.setEndOfQuarter(this.innerValue, 4);
-                }
-                else {
-                    this.innerValue.endOf(timeframe);
-                }
-                break;
-            case DatePickerPeriodPosition.MIDDLE_OF_PERIOD:
-                let endOfPeriod;
-                if (this.datePickerService.timeframe === TimeframeOption.QUARTER) {
-                    endOfPeriod = this.innerValue.clone();
-                    this.datePickerService.setStartOfCurrentQuarter(this.innerValue);
-                    this.datePickerService.setEndOfCurrentQuarter(endOfPeriod);
-                }
-                else if (this.datePickerService.timeframe === TimeframeOption.YEAR) {
-                    endOfPeriod = this.innerValue.clone();
-                    this.datePickerService.setStartOfQuarter(this.innerValue, 1);
-                    this.datePickerService.setEndOfQuarter(endOfPeriod, 4);
-                }
-                else {
-                    this.innerValue.startOf(timeframe);
-                    endOfPeriod = this.innerValue.clone().endOf(timeframe);
-                }
-                const diff = endOfPeriod.diff(this.innerValue, 'seconds');
-                this.innerValue.add(diff / 2 + 1, 'seconds');
-                break;
-            default:
-                this.innerValue.startOf(timeframe);
-                break;
-        }
-    }
-    chosenPeriodHandler(chosenDate, timeframe) {
-        if (timeframe === TimeframeOption.YEAR) {
-            chosenDate = this.datePickerService.addFiscalYearMonthsToDate(chosenDate);
-        }
-        if (this.datePickerService.timeframe === TimeframeOption.QUARTER && timeframe === TimeframeOption.YEAR) {
-            this.datePickerService.calendarInstance.currentView = CalendarView.FOR_QUARTERS;
-            this.datePickerService.calendarInstance.activeDate = chosenDate;
-            this.cdr.detectChanges();
-        }
-        else if (this.datePickerService.timeframe === timeframe) {
-            this.setValueFromMoment(chosenDate);
-            this.datePicker.close();
-        }
-    }
-    /**
-     * Setting value from outside of component via ngModel or formControl updates
-     */
-    writeValue(value) {
-        /*
-        * We need keep local timestamp for Electron Application
-        * Issue in electron: when we select date, date select with -1 (if we're choosing 2023, output will be 2022)
-        */
-        const convertedValue = document.is_electron ? moment.unix(value) : moment.unix(value).utc();
-        this.innerValue = value ? convertedValue : value;
-        if (this.innerValue) {
-            this.tryToNormalaizeTimeframe();
-        }
-        this.cdr.markForCheck();
-    }
-    registerOnChange(fn) {
-        this.onChangeCallback = fn;
-    }
-    registerOnTouched(fn) {
-        this.onTouchedCallback = fn;
-    }
-    /**
-     * Set inner value from Moment and propagate
-     *
-     * @param momentDate
-     */
-    setValueFromMoment(momentDate) {
-        this.setValue(momentDate.unix());
-    }
-    /**
-     * Set inner value from timestamp and propagate
-     *
-     * @param timestamp
-     */
-    setValue(timestamp) {
-        // isValueUpdating is required for manage clicks on same dates: if isValueUpdating - true then
-        // days are different and subscription on calendar day click action won't trigger Accessor ngModel update
-        // one more time
-        this.datePickerService.isValueUpdating = true;
-        this.writeValue(timestamp);
-        this.onChangeCallback(this.innerValue.unix());
-        setTimeout(() => {
-            this.datePickerService.isValueUpdating = false;
-        });
+        this.subscription.unsubscribe();
     }
 }
-DrDatePickerComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'dr-date-picker',
-                template: "<i class=\"dr-icon-date\"></i>\n<input [(ngModel)]=\"value\"\n       (click)=\"datePicker.open()\"\n       [matDatepicker]=\"datePicker\"\n       [matDatepickerFilter]=\"dateFilter\"\n       [disabled]=\"disabled\"\n       [placeholder]=\"placeholder\"\n       [drDatePickerFormat]=\"datePickerService.format$ | async\"\n       [readonly]=\"readonly\"\n       [min]=\"_min\"\n       [max]=\"_max\"/>\n<mat-datepicker #datePicker\n                [calendarHeaderComponent]=\"customHeader\"\n                (yearSelected)=\"chosenPeriodHandler($event, timeframeOption.YEAR)\"\n                (monthSelected)=\"chosenPeriodHandler($event, timeframeOption.MONTH)\">\n</mat-datepicker>\n",
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                providers: [
-                    { provide: NG_VALUE_ACCESSOR, useExisting: DrDatePickerComponent, multi: true },
-                    DrDatePickerService
-                ],
-                styles: [":host{position:relative;width:100%;display:flex;flex-direction:row;min-height:32px;height:32px;font-size:14px;font-family:\"Poppins\",sans-serif;background-color:#fff;border:1px solid #9EA1AA;border-radius:6px;color:#85889c;overflow:hidden;outline:none;cursor:pointer}:host:hover{border-color:#85889c}:host:focus-within{border-color:#4646ce!important;color:#151b3f}:host.disabled{pointer-events:none;border:1px solid #aeabac;background:#f0f1f4}:host.disabled:after{color:#aeabac}:host.ng-valid.ng-dirty{border-color:#03a678}:host.ng-invalid.ng-dirty:not(:focus-within){border-color:#de2833!important}:host.ng-untouched.ng-valid{border-color:#9ea1aa}:host:after,:host:before{position:absolute;display:flex;border-color:#999999 transparent transparent;color:#999}:host:after{content:\"\\e9b6\";font-family:DataRails;font-size:24px;color:#6d6e6f;top:0;bottom:0;right:8px;position:absolute;display:flex;align-items:center;justify-content:center}:host i{display:flex;align-items:center;position:absolute;color:#999;left:8px;top:0;bottom:0}:host input{display:flex;flex-grow:1;height:100%;border:none;text-align:left;padding-left:35px;padding-right:25px;cursor:pointer!important;outline:none}:host input.when-quarter{position:absolute;visibility:hidden}:host input:disabled{border:none;color:#aeabac;background:transparent}:host input::-webkit-search-decoration,:host input::-webkit-search-cancel-button,:host input::-webkit-search-results-button,:host input::-webkit-search-results-decoration{-webkit-appearance:none}::ng-deep .mat-datepicker-content{margin:7px 0;box-shadow:0 4px 8px 1px #00000040;border-radius:12px!important}::ng-deep .mat-datepicker-content button[disabled]{border:inherit;color:inherit;background-color:inherit}::ng-deep .mat-datepicker-content button[disabled]:hover{border:inherit}::ng-deep .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){background:#f2f2fb;color:#4646ce;font-weight:600}::ng-deep .mat-calendar-body-selected{background-color:#4646ce;color:#f2f2fb;font-weight:600}::ng-deep .mat-calendar-body-today.mat-calendar-body-selected{box-shadow:none}::ng-deep .mat-button-focus-overlay{background:#f3f7ff}::ng-deep .mat-calendar-controls .mat-icon-button:hover .mat-button-focus-overlay{opacity:1!important;background:#f3f7ff;transition:opacity .2s cubic-bezier(.35,0,.25,1)}::ng-deep .mat-calendar-controls .mat-calendar-period-button:hover{background:#f3f7ff;transition:background .2s cubic-bezier(.35,0,.25,1)}::ng-deep .mat-calendar-table-header th{font-size:14px;font-weight:600;color:#19181a}::ng-deep .mat-calendar-table-header-divider{display:none}::ng-deep .mat-calendar-body-label{color:#fff;padding:0}\n"]
+DrModelDebounceChangeDirective.decorators = [
+    { type: Directive, args: [{
+                selector: '[ngModelDebounceChange]'
             },] }
 ];
-DrDatePickerComponent.ctorParameters = () => [
-    { type: ChangeDetectorRef },
-    { type: DateAdapter },
-    { type: DrDatePickerService }
+DrModelDebounceChangeDirective.ctorParameters = () => [
+    { type: NgModel }
 ];
-DrDatePickerComponent.propDecorators = {
-    format: [{ type: Input }],
-    min: [{ type: Input }],
-    max: [{ type: Input }],
-    periodPosition: [{ type: Input }],
-    placeholder: [{ type: Input }],
-    disabled: [{ type: Input }, { type: HostBinding, args: ['class.disabled',] }],
-    fiscalYearMonthsModifier: [{ type: Input }],
-    datepickerFilter: [{ type: Input }],
-    datePicker: [{ type: ViewChild, args: ['datePicker',] }]
+DrModelDebounceChangeDirective.propDecorators = {
+    debounce: [{ type: Input }],
+    ngModelDebounceChange: [{ type: Output }]
 };
 
-class DrDatePickerWithTimeframeComponent extends DrDatePickerComponent {
-    constructor(cdr, dateAdapter, datePickerService) {
-        super(cdr, dateAdapter, datePickerService);
-        this.cdr = cdr;
-        this.dateAdapter = dateAdapter;
-        this.datePickerService = datePickerService;
-        this.isDashboardDatepicker = false;
-        this.canSelectTimeframe = true;
-        // eslint-disable-next-line
-        this.onChangeFormat = new EventEmitter();
-        this.onChangePresetTag = new EventEmitter();
-        this.pagingSetup = {
-            [TimeframeOption.YEAR]: (forward) => this.getNextDate('addCalendarYears', 1, forward),
-            [TimeframeOption.QUARTER]: (forward) => this.getNextDate('addCalendarMonths', 3, forward),
-            [TimeframeOption.MONTH]: (forward) => this.getNextDate('addCalendarMonths', 1, forward),
-            [TimeframeOption.DAY]: (forward) => this.getNextDate('addCalendarDays', 1, forward),
-            [TimeframeOption.WEEK]: (forward) => this.getNextDate('addCalendarDays', 7, forward)
-        };
-        this.isNextDateDisabled = false;
-        this.isPrevDateDisabled = false;
-        this.onChangeDebounced$ = new Subject();
-        datePickerService.isTimeframeSelectionEnabled = true;
-        datePickerService.format$.pipe(takeUntil(this.destroyed$)).subscribe((value) => {
-            this.onChangeFormat.emit(datePickerService.normalizeValue(value));
-        });
-        datePickerService.presetTag$.pipe(takeUntil(this.destroyed$)).subscribe((value) => {
-            let tagObj = PRESET_TAGS_LIST.find((val) => (val === null || val === void 0 ? void 0 : val.key) === value);
-            this.presetTagSelected = tagObj === null || tagObj === void 0 ? void 0 : tagObj.label;
-            this.onChangePresetTag.emit(value);
-        });
-        this.datePickerService.onSameDaySelectedInCalendar$.pipe(takeUntil(this.destroyed$)).subscribe((value) => {
-            this.setValueFromMoment(value);
-        });
-        datePickerService.updatedDateAndClose$.pipe(takeUntil(this.destroyed$)).subscribe((value) => {
-            if (value) {
-                this.setValueFromMoment(value);
-            }
-            else {
-                this.onChangeCallback(this.innerValue.unix());
-            }
-            this.datePicker.close();
-        });
-    }
-    get isDashboardClassDisplayed() {
-        return this.isDashboardDatepicker;
-    }
-    ;
-    set dateFormatConfig(value) {
-        if (value) {
-            this.datePickerService.formatConfig = Object.assign(Object.assign({}, this.datePickerService.formatConfig), value);
-            this.cdr.markForCheck();
-        }
+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,
     }
-    set availableTimeframes(value) {
-        if (value && value.length) {
-            this.datePickerService.availableTimeframes = value;
-        }
+};
+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';
     }
-    set isUsingDateTagPresets(flag) {
-        this.datePickerService.isUsingDateTagPresets = flag;
+    get scenarios() {
+        return orderBy(Object.values(Scenario), (scenario) => scenario === Scenario.NONE ? 1 : 0);
     }
-    set presetTag(tag) {
-        this.datePickerService.presetTag$.next(tag);
+    get areExistingTagsConfig() {
+        return !!this.currentTagsConfig;
     }
-    get value() {
-        return this.innerValue;
+    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;
     }
-    set value(v) {
-        this.setValueFromMoment(v);
-        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);
     }
-    get displayedFormattedValue() {
-        if (!this.value) {
-            return this.placeholder;
+    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);
         }
-        let displayValue = _.cloneDeep(this.value);
-        if (this.datePickerService.isTimeframeDependingOnFY(this.datePickerService.timeframe)) {
-            displayValue = this.datePickerService.subtractFiscalYearMonthsFromDate(displayValue);
+        const isTagNotSupportingDates = some(scenarioTagsUi, { turnOffDateTags: true, toggle: true });
+        if (isTagNotSupportingDates) {
+            this.turnOffDateTag(scenarioTagsUi);
         }
-        const formatCached = this.datePickerService.format$.getValue();
-        return this.datePickerService.getDisplayPrefix() + displayValue.format(formatCached);
-    }
-    ngOnInit() {
-        this.datePickerService.isTimeframeSelectionEnabled = this.canSelectTimeframe;
-        this.cdr.markForCheck();
-        if (this.paginationDebounce) {
-            this.onChangeDebounced$.pipe(takeUntil(this.destroyed$), debounceTime(this.paginationDebounce)).subscribe((value) => {
-                this.onChangeCallback(value);
-            });
+        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);
     }
-    pagingClicked(forward) {
-        if (this.pagingSetup[this.datePickerService.timeframe]) {
-            const nextValue = this.pagingSetup[this.datePickerService.timeframe](forward);
-            this.pagingDateChange(nextValue);
-        }
-        this.datePicker.close();
+    sortScenarioTags(scenarioTagsUi) {
+        return orderBy(scenarioTagsUi, [
+            (tag) => (tag.type === TagTypes.DATE ? 0 : 1),
+            (tag) => (tag.name === 'File Status')
+        ]);
     }
-    pagingDateChange(newValue) {
-        if (this.paginationDebounce) {
-            // this is required for not sending extra requests when user quickly clicking on pagination
-            // here we do the same as in setValueFromMoment(newValue) with difference
-            // that updating of ngModel/formControl is debounced
-            this.datePickerService.resetPresetTag();
-            const timestamp = newValue.unix();
-            this.writeValue(timestamp);
-            this.onChangeDebounced$.next(this.innerValue.unix());
+    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;
         }
-        else {
-            this.setValueFromMoment(newValue);
+        if (scenarioTag.scenarioData.acceptableDateTags) {
+            tag.acceptableDateTags = scenarioTag.scenarioData.acceptableDateTags;
         }
+        return tag;
     }
-    /**
-    * Set inner value from timestamp and propagate
-    *
-    * @param timestamp
-    */
-    setValue(timestamp) {
-        this.datePickerService.resetPresetTag();
-        super.setValue(timestamp);
+    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));
     }
-    writeValue(value) {
-        super.writeValue(value);
-        if (!value)
-            return;
-        this.restrictPagination();
+    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,
+        });
     }
-    getNextDate(actionCall, amount, forward) {
-        var _a, _b;
-        return (_b = (_a = this.dateAdapter)[actionCall]) === null || _b === void 0 ? void 0 : _b.call(_a, this.innerValue, forward ? amount : -amount);
+    turnOffDateTag(scenarioTags) {
+        const dateTag = find(scenarioTags, { type: TagTypes.DATE });
+        if (!dateTag)
+            return;
+        dateTag.toggle = false;
     }
-    restrictPagination() {
-        if (!this._min && !this._max)
+    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;
-        const nextValue = this.pagingSetup[this.datePickerService.timeframe](true);
-        const prevValue = this.pagingSetup[this.datePickerService.timeframe](false);
-        this.isNextDateDisabled = this._max && nextValue && nextValue.unix() > this._max.unix();
-        this.isPrevDateDisabled = this._min && prevValue && prevValue.unix() < this._min.unix();
+        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;
+        }, []);
     }
 }
-DrDatePickerWithTimeframeComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'dr-date-picker-with-timeframe',
-                template: "<dr-button [disabled]=\"isPrevDateDisabled\" *ngIf=\"!disabled\" theme=\"icon\" icon=\"dr-icon-arrow-left\" (click)=\"pagingClicked(false)\"></dr-button>\n<div class=\"dr-datepicker-input-container\">\n    <i *ngIf=\"isDashboardDatepicker\" class=\"dr-icon-date\"></i>\n\n    <div class=\"dr-datepicker-input-container__formatted-value-display\" (click)=\"datepickerInput.click()\">\n        <span *ngIf=\"presetTagSelected && datePickerService.isUsingDateTagPresets\"> {{ presetTagSelected }} </span>\n        <span>{{ presetTagSelected && datePickerService.isUsingDateTagPresets ? '(' + displayedFormattedValue + ')' : displayedFormattedValue }}</span>\n    </div>\n    <input\n            #datepickerInput\n            [(ngModel)]=\"value\"\n            (click)=\"datePicker.open()\"\n            [matDatepicker]=\"datePicker\"\n            [readonly]=\"readonly\"\n            [min]=\"_min\"\n            [max]=\"_max\"\n    />\n</div>\n<dr-button [disabled]=\"isNextDateDisabled\" *ngIf=\"!disabled\" theme=\"icon\" icon=\"dr-icon-arrow-right\" (click)=\"pagingClicked(true)\"></dr-button>\n<mat-datepicker #datePicker\n                class=\"dr-timeframe-datepicker\"\n                [calendarHeaderComponent]=\"customHeader\"\n                (yearSelected)=\"chosenPeriodHandler($event, timeframeOption.YEAR)\"\n                (monthSelected)=\"chosenPeriodHandler($event, timeframeOption.MONTH)\"\n                [panelClass]=\"datePickerService.isUsingDateTagPresets ? 'date-picker-preset-tag' : 'dr-timeframe-datepicker'\"\n                >\n</mat-datepicker>\n",
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                providers: [
-                    { provide: NG_VALUE_ACCESSOR, useExisting: DrDatePickerWithTimeframeComponent, multi: true },
-                    { provide: DrDatePickerService }
-                ],
-                styles: [":host{position:relative;width:100%;display:flex;flex-direction:row;min-height:32px;height:32px;font-size:14px;font-family:\"Poppins\",sans-serif;background-color:#fff;border:1px solid #9EA1AA;border-radius:6px;color:#85889c;overflow:hidden;outline:none;cursor:pointer}:host:hover{border-color:#85889c}:host:focus-within{border-color:#4646ce!important;color:#151b3f}:host.disabled{pointer-events:none;border:1px solid #aeabac;background:#f0f1f4}:host.disabled:after{color:#aeabac}:host.ng-valid.ng-dirty{border-color:#03a678}:host.ng-invalid.ng-dirty:not(:focus-within){border-color:#de2833!important}:host.ng-untouched.ng-valid{border-color:#9ea1aa}:host:after,:host:before{position:absolute;display:flex;border-color:#999999 transparent transparent;color:#999}:host:after{content:\"\\e9b6\";font-family:DataRails;font-size:24px;color:#6d6e6f;top:0;bottom:0;right:8px;position:absolute;display:flex;align-items:center;justify-content:center}:host i{display:flex;align-items:center;position:absolute;color:#999;left:8px;top:0;bottom:0}:host input{display:flex;flex-grow:1;height:100%;border:none;text-align:left;padding-left:35px;padding-right:25px;cursor:pointer!important;outline:none}:host input.when-quarter{position:absolute;visibility:hidden}:host input:disabled{border:none;color:#aeabac;background:transparent}:host input::-webkit-search-decoration,:host input::-webkit-search-cancel-button,:host input::-webkit-search-results-button,:host input::-webkit-search-results-decoration{-webkit-appearance:none}::ng-deep .mat-datepicker-content{margin:7px 0;box-shadow:0 4px 8px 1px #00000040;border-radius:12px!important}::ng-deep .mat-datepicker-content button[disabled]{border:inherit;color:inherit;background-color:inherit}::ng-deep .mat-datepicker-content button[disabled]:hover{border:inherit}::ng-deep .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){background:#f2f2fb;color:#4646ce;font-weight:600}::ng-deep .mat-calendar-body-selected{background-color:#4646ce;color:#f2f2fb;font-weight:600}::ng-deep .mat-calendar-body-today.mat-calendar-body-selected{box-shadow:none}::ng-deep .mat-button-focus-overlay{background:#f3f7ff}::ng-deep .mat-calendar-controls .mat-icon-button:hover .mat-button-focus-overlay{opacity:1!important;background:#f3f7ff;transition:opacity .2s cubic-bezier(.35,0,.25,1)}::ng-deep .mat-calendar-controls .mat-calendar-period-button:hover{background:#f3f7ff;transition:background .2s cubic-bezier(.35,0,.25,1)}::ng-deep .mat-calendar-table-header th{font-size:14px;font-weight:600;color:#19181a}::ng-deep .mat-calendar-table-header-divider{display:none}::ng-deep .mat-calendar-body-label{color:#fff;padding:0}:host{border:none;display:flex;align-items:center}:host.disabled{background:transparent;color:inherit}:host.disabled.dr-date-picker-on-dashboard .dr-datepicker-input-container__formatted-value-display{text-decoration:none;color:#6d6e6f;font-weight:normal}:host.dr-date-picker-on-dashboard{width:-moz-fit-content;width:fit-content;justify-content:space-between}:host.dr-date-picker-on-dashboard mat-datepicker{position:absolute}:host.dr-date-picker-on-dashboard:after{visibility:hidden}:host.dr-date-picker-on-dashboard .dr-datepicker-input-container{display:flex;flex-direction:row;justify-content:center;align-items:center;margin-left:-10px}:host.dr-date-picker-on-dashboard .dr-datepicker-input-container__formatted-value-display{font-weight:600;width:auto;margin-left:5px}:host.dr-date-picker-on-dashboard .dr-datepicker-input-container .dr-icon-date{display:block;position:relative;top:0;margin-right:8px;color:#4e566c}:host .dr-datepicker-input-container input{visibility:hidden;position:absolute;width:100%}:host .dr-datepicker-input-container__formatted-value-display{width:90px;height:22px;padding-left:0;text-align:center;line-height:22px;color:#0c142b;-webkit-text-decoration-line:underline;text-decoration-line:underline}:host .dr-datepicker-input-container__formatted-value-display:hover{background-color:#f2f2fb;border-radius:5px;cursor:pointer;-webkit-text-decoration-line:underline;text-decoration-line:underline;color:#4646ce}::ng-deep .date-picker-preset-tag{width:386px!important}::ng-deep .date-picker-preset-tag .mat-calendar-content{padding-left:32px!important;padding-right:32px!important}\n"]
-            },] }
-];
-DrDatePickerWithTimeframeComponent.ctorParameters = () => [
-    { type: ChangeDetectorRef },
-    { type: DateAdapter },
-    { type: DrDatePickerService }
+ScenarioService.decorators = [
+    { type: Injectable }
 ];
-DrDatePickerWithTimeframeComponent.propDecorators = {
-    isDashboardClassDisplayed: [{ type: HostBinding, args: ['class.dr-date-picker-on-dashboard',] }],
-    isDashboardDatepicker: [{ type: Input }],
-    dateFormatConfig: [{ type: Input }],
-    canSelectTimeframe: [{ type: Input }],
-    availableTimeframes: [{ type: Input }],
-    paginationDebounce: [{ type: Input }],
-    isUsingDateTagPresets: [{ type: Input }],
-    presetTag: [{ type: Input }],
-    onChangeFormat: [{ type: Output }],
-    onChangePresetTag: [{ type: Output }]
-};
 
-class DrDatePickerFormatDirective {
-    constructor(matDateFormat, ngControl) {
-        this.matDateFormat = matDateFormat;
-        this.ngControl = ngControl;
-    }
-    set datePickerFormat(format) {
-        var _a;
-        if (this.configDateParse) {
-            this.matDateFormat.updateDateFormat(this.configDateParse, this.configDateDisplay);
+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;
         }
-        else {
-            this.matDateFormat.updateDateFormat({ dateInput: format });
+        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;
         }
-        const value = this.ngControl.value;
-        (_a = this.ngControl.valueAccessor) === null || _a === void 0 ? void 0 : _a.writeValue(value);
     }
-}
-DrDatePickerFormatDirective.decorators = [
-    { type: Directive, args: [{
-                selector: '[drDatePickerFormat]',
-                providers: [
-                    {
-                        provide: DateAdapter,
-                        useClass: MomentDateAdapter
-                    },
-                    {
-                        provide: MAT_DATE_FORMATS,
-                        useClass: CustomDateFormat
-                    }
-                ]
-            },] }
-];
-DrDatePickerFormatDirective.ctorParameters = () => [
-    { type: CustomDateFormat, decorators: [{ type: Inject, args: [MAT_DATE_FORMATS,] }] },
-    { type: NgControl, decorators: [{ type: Optional }] }
-];
-DrDatePickerFormatDirective.propDecorators = {
-    configDateParse: [{ type: Input }],
-    configDateDisplay: [{ type: Input }],
-    datePickerFormat: [{ type: Input, args: ['drDatePickerFormat',] }]
-};
-
-class DrShowTimeframePipe {
-    transform(arr, showOptions) {
-        return arr.filter(item => showOptions.includes(item.timeframe));
+    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;
+        }
     }
 }
-DrShowTimeframePipe.decorators = [
-    { type: Pipe, args: [{
-                name: 'drShowTimeframePipe'
-            },] }
-];
 
-class DrSelectAddItemComponent {
-    constructor(drSelect) {
-        this.drSelect = drSelect;
-        this.currentValues = [];
-        this.dynamicAddLabel = 'Add new';
-        this.values = [];
-        this.dynamicValueAdded = new EventEmitter();
-    }
-    set inputRef(input) {
-        if (!input)
-            return;
-        input.focus();
+// @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;
     }
-    ngOnChanges(changes) {
-        this.calculateCurrentValues();
+    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 '';
+        }
     }
-    ngOnInit() {
-        this.calculateCurrentValues();
+    getTimeframe(format) {
+        return DrSharedUtils.getTimeframeByDateFormat(format);
     }
-    onDynamicAdding() {
-        this.isDynamicAdding = true;
+    getConfiguredFormat(timeframe) {
+        return this.formatConfig[timeframe];
     }
-    onDynamicAddingClose() {
-        this.isDynamicAdding = false;
-        this.dynamicValue = '';
+    updateTimeframeAndFormat(format) {
+        const normalizedFormat = this.normalizeValue(format || this.format$.getValue());
+        this.timeframe = this.getTimeframe(normalizedFormat);
+        this.format$.next(this.getConfiguredFormat(this.timeframe));
     }
-    isDynamicValueValid() {
-        var _a;
-        const trimmedValue = (_a = this.dynamicValue) === null || _a === void 0 ? void 0 : _a.trim();
-        if (!trimmedValue)
-            return false;
-        return !this.currentValues.includes(trimmedValue);
+    normalizeValue(value) {
+        return value.replace(/d/g, 'D');
     }
-    onDynamicAdd(value, keydownEvent) {
-        this.isDirty = true;
-        if (!this.isDynamicValueValid())
-            return;
-        if (keydownEvent && keydownEvent.key !== 'Enter')
-            return;
-        this.onDynamicAddingClose();
-        this.drSelect.close();
-        this.dynamicValueAdded.emit(value === null || value === void 0 ? void 0 : value.trim());
+    /**
+     * 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;
     }
-    calculateCurrentValues() {
-        this.currentValues = this.bindValue
-            ? reduce(this.values, (acc, curr) => {
-                acc.push(curr[this.bindValue]);
-                return acc;
-            }, [])
-            : this.values;
+    /**
+     * 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');
     }
-}
-DrSelectAddItemComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'dr-select-add-item',
-                template: "<div class=\"dr-select__dynamic-add dynamic-add\">\n    <div class=\"dynamic-add__add-item\" (click)=\"onDynamicAdding()\">\n        <i class=\"dr-icon-add\"></i>\n        <p class=\"dynamic-add__add-item__text\">{{ dynamicAddLabel }}</p>\n    </div>\n    <div *ngIf=\"isDynamicAdding\" class=\"dynamic-add__field\">\n        <dr-input #dynamicInputRef\n                  class=\"dynamic-add__field__input\"\n                  [class.dynamic-add__field__input--error]=\"!isDynamicValueValid() && isDirty\"\n                  [(ngModel)]=\"dynamicValue\"\n                  (keydown)=\"onDynamicAdd(dynamicValue, $event)\"\n                  placeholder=\"Type...\"></dr-input>\n        <div class=\"dynamic-add__field__buttons\">\n            <dr-button *ngIf=\"dynamicValue && isDynamicValueValid()\"\n                       theme=\"icon\"\n                       icon=\"dr-icon-approve\"\n                       iconSize=\"18px\"\n                       (click)=\"onDynamicAdd(dynamicValue)\"></dr-button>\n            <dr-button theme=\"icon\"\n                       icon=\"dr-icon-exit\"\n                       iconSize=\"18px\"\n                       (click)=\"onDynamicAddingClose()\"></dr-button>\n        </div>\n    </div>\n</div>\n",
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                styles: [".dynamic-add__add-item{cursor:pointer;display:flex;align-items:center;border-bottom:1px solid #dfe0e3;padding:6px}.dynamic-add__add-item:hover{background:#f9f7ff}.dynamic-add__add-item__text{font-size:14px;line-height:22px;margin:0}.dynamic-add__field{position:relative}.dynamic-add__field__buttons{position:absolute;top:0;right:0;bottom:0;display:flex;align-items:center}::ng-deep .ng-dropdown-panel .ng-dropdown-header:has(.dynamic-add){padding:0;border:none}::ng-deep .dynamic-add__field__input{padding-left:12px!important;height:36px!important;border:none!important;background:#f9f7ff!important;border-radius:0!important}::ng-deep .dynamic-add__field__input>input{background:#f9f7ff}::ng-deep .dynamic-add__field__input>input::placeholder{line-height:22px;font-size:14px;font-weight:400;color:#9ea1aa}::ng-deep .dynamic-add__field__input--error{background:#ffdfe4!important}::ng-deep .dynamic-add__field__input--error>input{background:#ffdfe4}\n"]
-            },] }
-];
-DrSelectAddItemComponent.ctorParameters = () => [
-    { type: DrSelectComponent }
-];
-DrSelectAddItemComponent.propDecorators = {
-    dynamicAddLabel: [{ type: Input }],
-    bindValue: [{ type: Input }],
-    values: [{ type: Input }],
-    dynamicValueAdded: [{ type: Output }],
-    inputRef: [{ type: ViewChild, args: ['dynamicInputRef',] }]
-};
-
-class TooltipInfoComponent {
-    constructor() {
+    /**
+     * 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');
     }
-}
-TooltipInfoComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'dr-tooltip-info',
-                template: "<div class=\"tooltip-info\">\n    <i *ngIf=\"data?.icon else defaultIcon\" class=\"fa\" [class]=\"data.icon\" [style.fontSize.px]=\"14\"\n       [style.margin.px]=\"12\" [style.color]=\"data?.iconColor || '#7B61FF'\"></i>\n    <div class=\"tooltip-info-content-wrapper\">\n        <div *ngIf=\"data?.title\" class=\"tooltip-info_header\">\n            <span>{{data.title}}</span>\n        </div>\n        <div *ngIf=\"data?.description\" class=\"tooltip-info_description\"\n             [class.tooltip-info_description-no-border]=\"!data.title\">\n            <ng-container *ngIf=\"!data.title\"></ng-container>\n            <span *ngIf=\"!useDescriptionAsHTML\">{{data.description}}</span>\n            <div *ngIf=\"useDescriptionAsHTML\" [innerHTML]=\"data.description\"></div>\n        </div>\n    </div>\n</div>\n\n<ng-template #defaultIcon>\n    <ng-container *ngIf=\"!data.icon\">\n        <div class=\"default-icon\"></div>\n    </ng-container>\n</ng-template>\n",
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                styles: [".tooltip-info{width:316px;display:flex}.tooltip-info-content-wrapper{display:flex;flex-direction:column;padding-top:10px}.tooltip-info_header{padding:0 16px 6px 0;font-weight:bold;font-size:14px;line-height:16px;letter-spacing:.25px;display:flex;justify-content:flex-start}.tooltip-info_header>i{margin-right:10px}.tooltip-info-content-wrapper{padding-top:10px}.tooltip-info_description{display:flex;align-items:flex-start;border-top:1px solid #aeb5bb;padding:12px 10px 10px 0;text-align:left;font-weight:normal;font-size:14px;line-height:22px}.tooltip-info_description-no-border{padding-top:0;border-top:none}.tooltip-info_description>i{margin-right:10px}:host.tooltip-info-medium .tooltip-info{max-width:272px}:host.tooltip-info-medium .tooltip-info-content-wrapper{padding-top:10px}:host.tooltip-info-medium .tooltip-info_header,:host.tooltip-info-medium .tooltip-info_description{min-height:unset;border-top:none;font-size:14px;line-height:22px}:host.tooltip-info-medium .tooltip-info_header{padding:10px 10px 0 0}:host.tooltip-info-medium .tooltip-info_description{padding:10px 12px 10px 0}:host.tooltip-info-medium .tooltip-info .default-icon:before{background:url(\"data:image/svg+xml,%3Csvg width%3D%2216%22 height%3D%2216%22 viewBox%3D%220 0 16 16%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E    %3Cpath d%3D%22M8.00008 2.66669C5.05341 2.66669 2.66675 5.05335 2.66675 8.00002C2.66675 10.9467 5.05341 13.3334 8.00008 13.3334C10.9467 13.3334 13.3334 10.9467 13.3334 8.00002C13.3334 5.05335 10.9467 2.66669 8.00008 2.66669ZM8.53341 10.6667H7.46675V7.46669H8.53341V10.6667ZM8.53341 6.40002H7.46675V5.33335H8.53341V6.40002Z%22          fill%3D%22%237B61FF%22%2F%3E%3C%2Fsvg%3E\") no-repeat;background-size:100% 100%;display:inline-block;height:20px;width:20px;content:\"\"}:host.tooltip-info-small .tooltip-info{width:auto}:host.tooltip-info-small .tooltip-info-content-wrapper{padding-top:10px}:host.tooltip-info-small .tooltip-info_header,:host.tooltip-info-small .tooltip-info_description{min-height:unset;border-top:none;font-size:14px;line-height:22px}:host.tooltip-info-small .tooltip-info_header{padding:0 10px 0 0}:host.tooltip-info-small .tooltip-info_description{padding:0 12px 10px 0}:host.tooltip-info-small .tooltip-info .default-icon:before{background:url(\"data:image/svg+xml,%3Csvg width%3D%2216%22 height%3D%2216%22 viewBox%3D%220 0 16 16%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E    %3Cpath d%3D%22M8.00008 2.66669C5.05341 2.66669 2.66675 5.05335 2.66675 8.00002C2.66675 10.9467 5.05341 13.3334 8.00008 13.3334C10.9467 13.3334 13.3334 10.9467 13.3334 8.00002C13.3334 5.05335 10.9467 2.66669 8.00008 2.66669ZM8.53341 10.6667H7.46675V7.46669H8.53341V10.6667ZM8.53341 6.40002H7.46675V5.33335H8.53341V6.40002Z%22          fill%3D%22%237B61FF%22%2F%3E%3C%2Fsvg%3E\") no-repeat;background-size:100% 100%;display:inline-block;height:20px;width:20px;content:\"\"}.default-icon{position:relative;width:18px;height:18px;margin:10px}.default-icon:before{background:url(\"data:image/svg+xml,%3Csvg width%3D%2216%22 height%3D%2216%22 viewBox%3D%220 0 16 16%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E    %3Cpath d%3D%22M8.00008 2.66669C5.05341 2.66669 2.66675 5.05335 2.66675 8.00002C2.66675 10.9467 5.05341 13.3334 8.00008 13.3334C10.9467 13.3334 13.3334 10.9467 13.3334 8.00002C13.3334 5.05335 10.9467 2.66669 8.00008 2.66669ZM8.53341 10.6667H7.46675V7.46669H8.53341V10.6667ZM8.53341 6.40002H7.46675V5.33335H8.53341V6.40002Z%22          fill%3D%22%237B61FF%22%2F%3E%3C%2Fsvg%3E\") no-repeat;background-size:100% 100%;display:inline-block;height:18px;width:18px;content:\"\"}\n"]
-            },] }
-];
-TooltipInfoComponent.ctorParameters = () => [];
-TooltipInfoComponent.propDecorators = {
-    data: [{ type: Input }],
-    useDescriptionAsHTML: [{ type: Input }]
-};
-
-class TooltipInfoSimpleComponent {
-    constructor() {
+    /**
+     * 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));
     }
-}
-TooltipInfoSimpleComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'dr-tooltip-info-simple',
-                template: "<div class=\"tooltip-info-simple\">\n    <div *ngIf=\"context?.title\" class=\"tooltip-info-simple__title\">{{context?.title}}</div>\n    <div *ngIf=\"context?.description\" class=\"tooltip-info-simple__description\">{{context?.description}}</div>\n</div>\n",
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                styles: [".tooltip-info-simple{max-width:250px;font-size:14px;line-height:22px;padding:10px 12px;color:#0c142b}.tooltip-info-simple__title{font-weight:600;overflow:hidden;text-overflow:ellipsis}\n"]
-            },] }
-];
-TooltipInfoSimpleComponent.ctorParameters = () => [];
-TooltipInfoSimpleComponent.propDecorators = {
-    context: [{ type: Input }]
-};
-
-class TooltipNoBodyComponent {
-    constructor() {
+    /**
+     * 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));
     }
-    ngOnInit() {
+    /**
+     * If date selection on this timeframe depends on Fiscal Year
+     *
+     * @param timeframe
+     */
+    isTimeframeDependingOnFY(timeframe) {
+        return _.includes([TimeframeOption.QUARTER, TimeframeOption.YEAR], timeframe);
     }
-}
-TooltipNoBodyComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'dr-tooltip-no-body',
-                template: "<div class=\"tooltip-bold\" [ngClass]=\"{'tooltip-bold--icon': context?.icon}\">\n    <div class=\"tooltip-bold__title\">\n        <i *ngIf=\"context?.icon\" [class]=\"context?.icon\" [style.color]=\"context?.iconColor || 'black'\"></i>\n        {{ context.title }}\n    </div>\n    <div class=\"tooltip-bold-text\">\n        {{ context.text }}\n    </div>\n</div>",
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                styles: [".tooltip-bold{position:relative;box-shadow:0 4px 8px 1px #00000040;border:1px solid #c3c4ce;border-radius:8px;font-size:14px;line-height:22px;padding:10px 12px;background-color:#fff}.tooltip-bold--icon{padding-left:44px}.tooltip-bold__title{font-weight:bold}.tooltip-bold__title>i{position:absolute;width:16px;height:16px;left:10px}\n"]
-            },] }
-];
-TooltipNoBodyComponent.ctorParameters = () => [];
-TooltipNoBodyComponent.propDecorators = {
-    context: [{ type: Input }]
-};
-
-class TooltipProcessDefaultComponent {
-    constructor() {
+    /**
+     * Subtract from date fiscal year shift months count
+     *
+     * @param date
+     */
+    subtractFiscalYearMonthsFromDate(date) {
+        return this.getDateModifiedByFiscalMonths(date, true);
     }
-}
-TooltipProcessDefaultComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'dr-tooltip-process-default',
-                template: `
-        <div class="container" [innerHTML]="text"></div>
-    `,
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                styles: [`
-        .container {
-            width: auto;
-            max-width: 388px;
-            text-align: start;
-            font-size: 14px;
-            line-height: 22px;
-            padding: 10px 12px;
-            color: #151B3F;
-            background-color: #FFF;
-            border-radius: 8px;
-            box-shadow: 0px 4px 8px 1px rgba(0, 0, 0, 0.25);
-            border: 1px solid #C3C4CE;
+    /**
+     * 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 }
 ];
-TooltipProcessDefaultComponent.ctorParameters = () => [];
-TooltipProcessDefaultComponent.propDecorators = {
-    text: [{ type: Input }]
-};
 
-const TOOLTIP_COMPONENTS = [
-    TooltipInfoComponent,
-    TooltipInfoSimpleComponent,
-    TooltipNoBodyComponent,
-    TooltipProcessDefaultComponent
-];
-class DrTooltipModule {
-}
-DrTooltipModule.decorators = [
-    { type: NgModule, args: [{
-                imports: [
-                    CommonModule
-                ],
-                exports: [
-                    TooltipComponent,
-                    DrTooltipDirective,
-                    ...TOOLTIP_COMPONENTS
-                ],
-                providers: [],
-                declarations: [
-                    TooltipComponent,
-                    DrTooltipDirective,
-                    ...TOOLTIP_COMPONENTS
-                ],
-            },] }
-];
-
-// !!! Please do not use such approach in other places
-// Hard fix for 'none' calendar view selection
-MatCalendar.prototype.focusActiveCell = function () {
-    var _a;
-    (_a = this._getCurrentViewComponent()) === null || _a === void 0 ? void 0 : _a._focusActiveCell(false);
-};
-const components$3 = [
-    DrButtonComponent,
-    RadioButtonComponent,
-    RadioGroupComponent,
-    CheckboxComponent,
-    DrInputComponent,
-    DrSelectComponent,
-    DrToggleComponent,
-    DrToggleButtonComponent,
-    DrDatePickerComponent,
-    DrDatePickerWithTimeframeComponent,
-    DrDatePickerFormatDirective,
-    DrDatePickerCustomHeaderComponent,
-    DrModelDebounceChangeDirective,
-    DrShowTimeframePipe,
-    DrSelectAddItemComponent
-];
-class DrInputsModule {
+// @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);
+    }
 }
-DrInputsModule.decorators = [
-    { type: NgModule, args: [{
-                declarations: components$3,
-                exports: components$3,
-                imports: [
-                    FormsModule,
-                    ReactiveFormsModule,
-                    CommonModule,
-                    NgSelectModule,
-                    MatNativeDateModule,
-                    MatDatepickerModule,
-                    MatTooltipModule,
-                    DrTooltipModule
-                ],
-                entryComponents: [DrDatePickerCustomHeaderComponent]
+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 }
+];
 
-const components$2 = [DateTagComponent,
-    DayTagComponent,
-    WeekTagComponent,
-    MonthTagComponent,
-    QuarterTagComponent,
-    AnyTagComponent,
-    YearTagComponent,
-    ForecastTagComponent];
-class DateTagModule {
+// @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;
+        this.timeframeOption = TimeframeOption;
+        this.innerValue = null;
+        this.destroyed$ = new Subject();
+        this.onTouchedCallback = noop;
+        this.onChangeCallback = noop;
+        // Should be as arrow function to avoid lose scope
+        this.dateFilter = (moment) => {
+            if (this.datepickerFilter && moment) {
+                return this.datepickerFilter(moment);
+            }
+            return true;
+        };
+        datePickerService.updatedQuarter$.pipe(takeUntil(this.destroyed$)).subscribe((value) => {
+            this.setValueFromMoment(value);
+        });
+    }
+    set format(value) {
+        this.datePickerService.updateTimeframeAndFormat(value);
+    }
+    set min(minDate) {
+        this._min = moment.unix(minDate).utc();
+    }
+    set max(maxDate) {
+        this._max = moment.unix(maxDate).utc();
+    }
+    get value() {
+        return this.innerValue;
+    }
+    set value(v) {
+        if (v !== this.innerValue) {
+            this.setValueFromMoment(v);
+        }
+        this.cdr.markForCheck();
+    }
+    ngAfterViewInit() {
+        this.datePickerService.fiscalYearMonthsModifier = this.fiscalYearMonthsModifier;
+        this.datePickerService.datePickerInstance = this.datePicker;
+        this.datePicker.startView = this.calendarViewsTimeframeMapping[this.datePickerService.timeframe];
+    }
+    ngOnDestroy() {
+        this.destroyed$.next();
+        this.destroyed$.complete();
+    }
+    /**
+     * Updating component inner value according to datepicker timeframe (day, month etc.)
+     * and date position in period (start, end, middle)
+     */
+    tryToNormalaizeTimeframe() {
+        const timeframe = this.datePickerService.timeframe;
+        switch (this.periodPosition) {
+            case DatePickerPeriodPosition.START_OF_PERIOD:
+                if (this.datePickerService.timeframe === TimeframeOption.QUARTER) {
+                    this.datePickerService.setStartOfCurrentQuarter(this.innerValue);
+                }
+                else if (this.datePickerService.timeframe === TimeframeOption.YEAR) {
+                    this.datePickerService.setStartOfQuarter(this.innerValue, 1);
+                }
+                else {
+                    this.innerValue.startOf(timeframe);
+                }
+                break;
+            case DatePickerPeriodPosition.END_OF_PERIOD:
+                if (this.datePickerService.timeframe === TimeframeOption.QUARTER) {
+                    this.datePickerService.setEndOfCurrentQuarter(this.innerValue);
+                }
+                else if (this.datePickerService.timeframe === TimeframeOption.YEAR) {
+                    this.datePickerService.setEndOfQuarter(this.innerValue, 4);
+                }
+                else {
+                    this.innerValue.endOf(timeframe);
+                }
+                break;
+            case DatePickerPeriodPosition.MIDDLE_OF_PERIOD:
+                let endOfPeriod;
+                if (this.datePickerService.timeframe === TimeframeOption.QUARTER) {
+                    endOfPeriod = this.innerValue.clone();
+                    this.datePickerService.setStartOfCurrentQuarter(this.innerValue);
+                    this.datePickerService.setEndOfCurrentQuarter(endOfPeriod);
+                }
+                else if (this.datePickerService.timeframe === TimeframeOption.YEAR) {
+                    endOfPeriod = this.innerValue.clone();
+                    this.datePickerService.setStartOfQuarter(this.innerValue, 1);
+                    this.datePickerService.setEndOfQuarter(endOfPeriod, 4);
+                }
+                else {
+                    this.innerValue.startOf(timeframe);
+                    endOfPeriod = this.innerValue.clone().endOf(timeframe);
+                }
+                const diff = endOfPeriod.diff(this.innerValue, 'seconds');
+                this.innerValue.add(diff / 2 + 1, 'seconds');
+                break;
+            default:
+                this.innerValue.startOf(timeframe);
+                break;
+        }
+    }
+    chosenPeriodHandler(chosenDate, timeframe) {
+        if (timeframe === TimeframeOption.YEAR) {
+            chosenDate = this.datePickerService.addFiscalYearMonthsToDate(chosenDate);
+        }
+        if (this.datePickerService.timeframe === TimeframeOption.QUARTER && timeframe === TimeframeOption.YEAR) {
+            this.datePickerService.calendarInstance.currentView = CalendarView.FOR_QUARTERS;
+            this.datePickerService.calendarInstance.activeDate = chosenDate;
+            this.cdr.detectChanges();
+        }
+        else if (this.datePickerService.timeframe === timeframe) {
+            this.setValueFromMoment(chosenDate);
+            this.datePicker.close();
+        }
+    }
+    /**
+     * Setting value from outside of component via ngModel or formControl updates
+     */
+    writeValue(value) {
+        /*
+        * We need keep local timestamp for Electron Application
+        * Issue in electron: when we select date, date select with -1 (if we're choosing 2023, output will be 2022)
+        */
+        const convertedValue = document.is_electron ? moment.unix(value) : moment.unix(value).utc();
+        this.innerValue = value ? convertedValue : value;
+        if (this.innerValue) {
+            this.tryToNormalaizeTimeframe();
+        }
+        this.cdr.markForCheck();
+    }
+    registerOnChange(fn) {
+        this.onChangeCallback = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouchedCallback = fn;
+    }
+    /**
+     * Set inner value from Moment and propagate
+     *
+     * @param momentDate
+     */
+    setValueFromMoment(momentDate) {
+        this.setValue(momentDate.unix());
+    }
+    /**
+     * Set inner value from timestamp and propagate
+     *
+     * @param timestamp
+     */
+    setValue(timestamp) {
+        // isValueUpdating is required for manage clicks on same dates: if isValueUpdating - true then
+        // days are different and subscription on calendar day click action won't trigger Accessor ngModel update
+        // one more time
+        this.datePickerService.isValueUpdating = true;
+        this.writeValue(timestamp);
+        this.onChangeCallback(this.innerValue.unix());
+        setTimeout(() => {
+            this.datePickerService.isValueUpdating = false;
+        });
+    }
 }
-DateTagModule.decorators = [
-    { type: NgModule, args: [{
-                imports: [
-                    CommonModule,
-                    FormsModule,
-                    ReactiveFormsModule,
-                    DrInputsModule,
-                    NgSelectModule
+DrDatePickerComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'dr-date-picker',
+                template: "<i class=\"dr-icon-date\"></i>\n<input [(ngModel)]=\"value\"\n       (click)=\"datePicker.open()\"\n       [matDatepicker]=\"datePicker\"\n       [matDatepickerFilter]=\"dateFilter\"\n       [disabled]=\"disabled\"\n       [placeholder]=\"placeholder\"\n       [drDatePickerFormat]=\"datePickerService.format$ | async\"\n       [readonly]=\"readonly\"\n       [min]=\"_min\"\n       [max]=\"_max\"/>\n<mat-datepicker #datePicker\n                [calendarHeaderComponent]=\"customHeader\"\n                (yearSelected)=\"chosenPeriodHandler($event, timeframeOption.YEAR)\"\n                (monthSelected)=\"chosenPeriodHandler($event, timeframeOption.MONTH)\">\n</mat-datepicker>\n",
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                providers: [
+                    { provide: NG_VALUE_ACCESSOR, useExisting: DrDatePickerComponent, multi: true },
+                    DrDatePickerService
                 ],
-                exports: components$2,
-                declarations: components$2,
+                styles: [":host{position:relative;width:100%;display:flex;flex-direction:row;min-height:32px;height:32px;font-size:14px;font-family:\"Poppins\",sans-serif;background-color:#fff;border:1px solid #9EA1AA;border-radius:6px;color:#85889c;overflow:hidden;outline:none;cursor:pointer}:host:hover{border-color:#85889c}:host:focus-within{border-color:#4646ce!important;color:#151b3f}:host.disabled{pointer-events:none;border:1px solid #aeabac;background:#f0f1f4}:host.disabled:after{color:#aeabac}:host.ng-valid.ng-dirty{border-color:#03a678}:host.ng-invalid.ng-dirty:not(:focus-within){border-color:#de2833!important}:host.ng-untouched.ng-valid{border-color:#9ea1aa}:host:after,:host:before{position:absolute;display:flex;border-color:#999999 transparent transparent;color:#999}:host:after{content:\"\\e9b6\";font-family:DataRails;font-size:24px;color:#6d6e6f;top:0;bottom:0;right:8px;position:absolute;display:flex;align-items:center;justify-content:center}:host i{display:flex;align-items:center;position:absolute;color:#999;left:8px;top:0;bottom:0}:host input{display:flex;flex-grow:1;height:100%;border:none;text-align:left;padding-left:35px;padding-right:25px;cursor:pointer!important;outline:none}:host input.when-quarter{position:absolute;visibility:hidden}:host input:disabled{border:none;color:#aeabac;background:transparent}:host input::-webkit-search-decoration,:host input::-webkit-search-cancel-button,:host input::-webkit-search-results-button,:host input::-webkit-search-results-decoration{-webkit-appearance:none}::ng-deep .mat-datepicker-content{margin:7px 0;box-shadow:0 4px 8px 1px #00000040;border-radius:12px!important}::ng-deep .mat-datepicker-content button[disabled]{border:inherit;color:inherit;background-color:inherit}::ng-deep .mat-datepicker-content button[disabled]:hover{border:inherit}::ng-deep .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){background:#f2f2fb;color:#4646ce;font-weight:600}::ng-deep .mat-calendar-body-selected{background-color:#4646ce;color:#f2f2fb;font-weight:600}::ng-deep .mat-calendar-body-today.mat-calendar-body-selected{box-shadow:none}::ng-deep .mat-button-focus-overlay{background:#f3f7ff}::ng-deep .mat-calendar-controls .mat-icon-button:hover .mat-button-focus-overlay{opacity:1!important;background:#f3f7ff;transition:opacity .2s cubic-bezier(.35,0,.25,1)}::ng-deep .mat-calendar-controls .mat-calendar-period-button:hover{background:#f3f7ff;transition:background .2s cubic-bezier(.35,0,.25,1)}::ng-deep .mat-calendar-table-header th{font-size:14px;font-weight:600;color:#19181a}::ng-deep .mat-calendar-table-header-divider{display:none}::ng-deep .mat-calendar-body-label{color:#fff;padding:0}\n"]
             },] }
 ];
-
-class ListTagModule {
-}
-ListTagModule.decorators = [
-    { type: NgModule, args: [{
-                imports: [
-                    CommonModule,
-                    FormsModule,
-                    ReactiveFormsModule,
-                    DrInputsModule,
-                ],
-                exports: [ListTagComponent],
-                providers: [],
-                declarations: [
-                    ListTagComponent
-                ],
-            },] }
+DrDatePickerComponent.ctorParameters = () => [
+    { type: ChangeDetectorRef },
+    { type: DateAdapter },
+    { type: DrDatePickerService }
 ];
+DrDatePickerComponent.propDecorators = {
+    format: [{ type: Input }],
+    min: [{ type: Input }],
+    max: [{ type: Input }],
+    periodPosition: [{ type: Input }],
+    placeholder: [{ type: Input }],
+    disabled: [{ type: Input }, { type: HostBinding, args: ['class.disabled',] }],
+    fiscalYearMonthsModifier: [{ type: Input }],
+    datepickerFilter: [{ type: Input }],
+    datePicker: [{ type: ViewChild, args: ['datePicker',] }]
+};
 
-class DrDynamicTagComponent {
-    constructor() {
-        this.lockedTags = [];
-        this.tagChange = new EventEmitter();
-        this.tagAdd = new EventEmitter();
-    }
-    get isPrimitiveDataSource() {
-        const values = Object.values(this.values) || [];
-        return !isObject(values[0]);
+class DrDatePickerWithTimeframeComponent extends DrDatePickerComponent {
+    constructor(cdr, dateAdapter, datePickerService) {
+        super(cdr, dateAdapter, datePickerService);
+        this.cdr = cdr;
+        this.dateAdapter = dateAdapter;
+        this.datePickerService = datePickerService;
+        this.isDashboardDatepicker = false;
+        this.canSelectTimeframe = true;
+        // eslint-disable-next-line
+        this.onChangeFormat = new EventEmitter();
+        this.onChangePresetTag = new EventEmitter();
+        this.pagingSetup = {
+            [TimeframeOption.YEAR]: (forward) => this.getNextDate('addCalendarYears', 1, forward),
+            [TimeframeOption.QUARTER]: (forward) => this.getNextDate('addCalendarMonths', 3, forward),
+            [TimeframeOption.MONTH]: (forward) => this.getNextDate('addCalendarMonths', 1, forward),
+            [TimeframeOption.DAY]: (forward) => this.getNextDate('addCalendarDays', 1, forward),
+            [TimeframeOption.WEEK]: (forward) => this.getNextDate('addCalendarDays', 7, forward)
+        };
+        this.isNextDateDisabled = false;
+        this.isPrevDateDisabled = false;
+        this.onChangeDebounced$ = new Subject();
+        datePickerService.isTimeframeSelectionEnabled = true;
+        datePickerService.format$.pipe(takeUntil(this.destroyed$)).subscribe((value) => {
+            this.onChangeFormat.emit(datePickerService.normalizeValue(value));
+        });
+        datePickerService.presetTag$.pipe(takeUntil(this.destroyed$)).subscribe((value) => {
+            let tagObj = PRESET_TAGS_LIST.find((val) => (val === null || val === void 0 ? void 0 : val.key) === value);
+            this.presetTagSelected = tagObj === null || tagObj === void 0 ? void 0 : tagObj.label;
+            this.onChangePresetTag.emit(value);
+        });
+        this.datePickerService.onSameDaySelectedInCalendar$.pipe(takeUntil(this.destroyed$)).subscribe((value) => {
+            this.setValueFromMoment(value);
+        });
+        datePickerService.updatedDateAndClose$.pipe(takeUntil(this.destroyed$)).subscribe((value) => {
+            if (value) {
+                this.setValueFromMoment(value);
+            }
+            else {
+                this.onChangeCallback(this.innerValue.unix());
+            }
+            this.datePicker.close();
+        });
     }
-    ngOnChanges(changes) {
-        this.updateDynamicTagValues();
+    get isDashboardClassDisplayed() {
+        return this.isDashboardDatepicker;
     }
-    onTagChanged($event) {
-        var _a, _b;
-        const resultEvent = {
-            id: this.tagConfig.id,
-            name: this.tagConfig.name,
-            value: $event,
-            locked: this.lockedTags.includes($event)
-        };
-        if (!isNil((_a = this.selectedTag) === null || _a === void 0 ? void 0 : _a.locked)) {
-            resultEvent.locked = this.selectedTag.locked;
-        }
-        if (!isNil((_b = this.selectedTag) === null || _b === void 0 ? void 0 : _b.label)) {
-            resultEvent.label = this.selectedTag.label;
+    ;
+    set dateFormatConfig(value) {
+        if (value) {
+            this.datePickerService.formatConfig = Object.assign(Object.assign({}, this.datePickerService.formatConfig), value);
+            this.cdr.markForCheck();
         }
-        this.isLockedTagSelected = resultEvent.locked;
-        this.tagChange.emit(resultEvent);
     }
-    onOptionClick($event, tagValue) {
-        if (this.lockedTags.includes(tagValue)) {
-            $event.stopImmediatePropagation();
+    set availableTimeframes(value) {
+        if (value && value.length) {
+            this.datePickerService.availableTimeframes = value;
         }
     }
-    onDynamicValueAdd($event) {
-        const parentValueKey = this.getParentValueKey();
-        const parentValues = this.values[parentValueKey] || [];
-        if (this.isPrimitiveDataSource) {
-            this.values[parentValueKey] = [$event, ...parentValues];
+    set isUsingDateTagPresets(flag) {
+        this.datePickerService.isUsingDateTagPresets = flag;
+    }
+    set presetTag(tag) {
+        this.datePickerService.presetTag$.next(tag);
+    }
+    get value() {
+        return this.innerValue;
+    }
+    set value(v) {
+        this.setValueFromMoment(v);
+        this.cdr.markForCheck();
+    }
+    get displayedFormattedValue() {
+        if (!this.value) {
+            return this.placeholder;
         }
-        else {
-            this.values[parentValueKey] = [{ value: $event }, ...parentValues];
+        let displayValue = _.cloneDeep(this.value);
+        if (this.datePickerService.isTimeframeDependingOnFY(this.datePickerService.timeframe)) {
+            displayValue = this.datePickerService.subtractFiscalYearMonthsFromDate(displayValue);
         }
-        this.selectedDynamicTag = $event;
-        this.currentValues = this.values[parentValueKey];
-        this.onTagChanged($event);
-        this.tagAdd.emit($event);
+        const formatCached = this.datePickerService.format$.getValue();
+        return this.datePickerService.getDisplayPrefix() + displayValue.format(formatCached);
     }
-    updateDynamicTagValues() {
-        var _a;
-        const parentValueKey = this.getParentValueKey();
-        this.currentValues = this.values[parentValueKey];
-        this.selectedDynamicTag = this.getSelectedDynamicTag(this.currentValues, (_a = this.selectedTag) === null || _a === void 0 ? void 0 : _a.value);
-        this.onTagChanged(this.selectedDynamicTag);
+    ngOnInit() {
+        this.datePickerService.isTimeframeSelectionEnabled = this.canSelectTimeframe;
+        this.cdr.markForCheck();
+        if (this.paginationDebounce) {
+            this.onChangeDebounced$.pipe(takeUntil(this.destroyed$), debounceTime(this.paginationDebounce)).subscribe((value) => {
+                this.onChangeCallback(value);
+            });
+        }
     }
-    getSelectedDynamicTag(currentValues, selectedValue) {
-        if (!(currentValues === null || currentValues === void 0 ? void 0 : currentValues.length))
-            return null;
-        if (isObject(currentValues[0])) {
-            const valueFromConfig = find(currentValues, { value: selectedValue });
-            const favoriteValue = find(currentValues, { is_favorite: true });
-            return (valueFromConfig || favoriteValue || currentValues[0]).value;
+    pagingClicked(forward) {
+        if (this.pagingSetup[this.datePickerService.timeframe]) {
+            const nextValue = this.pagingSetup[this.datePickerService.timeframe](forward);
+            this.pagingDateChange(nextValue);
+        }
+        this.datePicker.close();
+    }
+    pagingDateChange(newValue) {
+        if (this.paginationDebounce) {
+            // this is required for not sending extra requests when user quickly clicking on pagination
+            // here we do the same as in setValueFromMoment(newValue) with difference
+            // that updating of ngModel/formControl is debounced
+            this.datePickerService.resetPresetTag();
+            const timestamp = newValue.unix();
+            this.writeValue(timestamp);
+            this.onChangeDebounced$.next(this.innerValue.unix());
+        }
+        else {
+            this.setValueFromMoment(newValue);
         }
-        const valueFromConfig = find(currentValues, (value) => value === selectedValue);
-        return (valueFromConfig || currentValues[0]);
     }
-    getParentValueKey() {
-        return map(this.connectedTags, this.tryToParseParentValue).join('__');
+    /**
+    * Set inner value from timestamp and propagate
+    *
+    * @param timestamp
+    */
+    setValue(timestamp) {
+        this.datePickerService.resetPresetTag();
+        super.setValue(timestamp);
     }
-    tryToParseParentValue(connectedTags) {
-        if (isNumber(connectedTags.value)) {
-            const momentData = moment$9.unix(connectedTags.value);
-            const convertedParentValue = momentData.get('year'); // TODO: add input prop (selectedTimeDimension) or Format
-            if (momentData.isValid() && convertedParentValue) {
-                return convertedParentValue;
-            }
-        }
-        return connectedTags.value;
+    writeValue(value) {
+        super.writeValue(value);
+        if (!value)
+            return;
+        this.restrictPagination();
+    }
+    getNextDate(actionCall, amount, forward) {
+        var _a, _b;
+        return (_b = (_a = this.dateAdapter)[actionCall]) === null || _b === void 0 ? void 0 : _b.call(_a, this.innerValue, forward ? amount : -amount);
+    }
+    restrictPagination() {
+        if (!this._min && !this._max)
+            return;
+        const nextValue = this.pagingSetup[this.datePickerService.timeframe](true);
+        const prevValue = this.pagingSetup[this.datePickerService.timeframe](false);
+        this.isNextDateDisabled = this._max && nextValue && nextValue.unix() > this._max.unix();
+        this.isPrevDateDisabled = this._min && prevValue && prevValue.unix() < this._min.unix();
     }
 }
-DrDynamicTagComponent.decorators = [
+DrDatePickerWithTimeframeComponent.decorators = [
     { type: Component, args: [{
-                selector: 'dr-dynamic-tag',
-                template: "<p class=\"dynamic-tag__label\">{{ tagConfig.name }}</p>\n<dr-select [(ngModel)]=\"selectedDynamicTag\"\n           [class.dynamic-tag__locked]=\"isLockedTagSelected\"\n           bindLabel=\"value\"\n           bindValue=\"value\"\n           [items]=\"currentValues\"\n           [disabled]=\"disabled\"\n           dropdownClass=\"dynamic-tag__select dr-tag__select\"\n           (ngModelChange)=\"onTagChanged($event)\">\n    <ng-template #optionHeaderTemplate *ngIf=\"isDynamicTagAddEnabled\">\n        <dr-select-add-item bindValue=\"value\"\n                            [values]=\"currentValues\"\n                            [dynamicAddLabel]=\"' Add new ' + tagConfig.name\"\n                            (dynamicValueAdded)=\"onDynamicValueAdd($event)\"></dr-select-add-item>\n    </ng-template>\n    <ng-template #labelTemplate let-item=\"item\">\n        <div class=\"dynamic-tag__field--label\">\n            <p class=\"dynamic-tag__field__text\">{{ item?.value || item }}</p>\n            <i *ngIf=\"item?.is_favorite\" class=\"dynamic-tag__field__icon dr-icon-star-fill\"></i>\n        </div>\n    </ng-template>\n    <ng-template #optionTemplate let-item=\"item\">\n        <div class=\"dynamic-tag__field--option\"\n             [class.disabled]=\"lockedTags.includes(item?.value || item)\"\n             (click)=\"onOptionClick($event, item?.value || item)\">\n            <p class=\"dynamic-tag__field__text\">{{ item?.value || item }}</p>\n            <i *ngIf=\"item?.is_favorite\" class=\"dynamic-tag__field__icon dr-icon-star-fill\"></i>\n        </div>\n    </ng-template>\n</dr-select>\n",
-                styles: [".dynamic-tag__label{margin:0 0 4px;color:#0c142b;font-size:14px;font-weight:400;line-height:22px}.dynamic-tag__field,.dynamic-tag__field--option,.dynamic-tag__field--label{cursor:pointer;height:24px}.dynamic-tag__field--option{padding:8px 12px;width:100%;display:flex;justify-content:space-between;align-items:center}.dynamic-tag__field--option.disabled{opacity:.5;box-sizing:content-box}.dynamic-tag__field--label{display:flex;align-items:center}.dynamic-tag__field--label>.dynamic-tag__field__icon{position:absolute;right:25px}.dynamic-tag__field--label>dynamic-tag__field__text{margin:0}.dr-icon-star-fill{color:#f0bc57}::ng-deep dr-select.dynamic-tag__locked>ng-select>.ng-select-container{opacity:.4}::ng-deep .ng-option:has(.dynamic-tag__field--option){padding:0!important}\n"]
-            },] }
-];
-DrDynamicTagComponent.propDecorators = {
-    values: [{ type: Input }],
-    tagConfig: [{ type: Input }],
-    selectedTag: [{ type: Input }],
-    lockedTags: [{ type: Input }],
-    connectedTags: [{ type: Input }],
-    isDynamicTagAddEnabled: [{ type: Input }],
-    disabled: [{ type: Input }],
-    tagChange: [{ type: Output }],
-    tagAdd: [{ type: Output }]
-};
-
-class DrDynamicTagModule {
-}
-DrDynamicTagModule.decorators = [
-    { type: NgModule, args: [{
-                declarations: [DrDynamicTagComponent],
-                imports: [
-                    CommonModule,
-                    DrInputsModule,
-                    FormsModule,
+                selector: 'dr-date-picker-with-timeframe',
+                template: "<dr-button [disabled]=\"isPrevDateDisabled\" *ngIf=\"!disabled\" theme=\"icon\" icon=\"dr-icon-arrow-left\" (click)=\"pagingClicked(false)\"></dr-button>\n<div class=\"dr-datepicker-input-container\">\n    <i *ngIf=\"isDashboardDatepicker\" class=\"dr-icon-date\"></i>\n\n    <div class=\"dr-datepicker-input-container__formatted-value-display\" (click)=\"datepickerInput.click()\">\n        <span *ngIf=\"presetTagSelected && datePickerService.isUsingDateTagPresets\"> {{ presetTagSelected }} </span>\n        <span>{{ presetTagSelected && datePickerService.isUsingDateTagPresets ? '(' + displayedFormattedValue + ')' : displayedFormattedValue }}</span>\n    </div>\n    <input\n            #datepickerInput\n            [(ngModel)]=\"value\"\n            (click)=\"datePicker.open()\"\n            [matDatepicker]=\"datePicker\"\n            [readonly]=\"readonly\"\n            [min]=\"_min\"\n            [max]=\"_max\"\n    />\n</div>\n<dr-button [disabled]=\"isNextDateDisabled\" *ngIf=\"!disabled\" theme=\"icon\" icon=\"dr-icon-arrow-right\" (click)=\"pagingClicked(true)\"></dr-button>\n<mat-datepicker #datePicker\n                class=\"dr-timeframe-datepicker\"\n                [calendarHeaderComponent]=\"customHeader\"\n                (yearSelected)=\"chosenPeriodHandler($event, timeframeOption.YEAR)\"\n                (monthSelected)=\"chosenPeriodHandler($event, timeframeOption.MONTH)\"\n                [panelClass]=\"datePickerService.isUsingDateTagPresets ? 'date-picker-preset-tag' : 'dr-timeframe-datepicker'\"\n                >\n</mat-datepicker>\n",
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                providers: [
+                    { provide: NG_VALUE_ACCESSOR, useExisting: DrDatePickerWithTimeframeComponent, multi: true },
+                    { provide: DrDatePickerService }
                 ],
-                exports: [DrDynamicTagComponent]
+                styles: [":host{position:relative;width:100%;display:flex;flex-direction:row;min-height:32px;height:32px;font-size:14px;font-family:\"Poppins\",sans-serif;background-color:#fff;border:1px solid #9EA1AA;border-radius:6px;color:#85889c;overflow:hidden;outline:none;cursor:pointer}:host:hover{border-color:#85889c}:host:focus-within{border-color:#4646ce!important;color:#151b3f}:host.disabled{pointer-events:none;border:1px solid #aeabac;background:#f0f1f4}:host.disabled:after{color:#aeabac}:host.ng-valid.ng-dirty{border-color:#03a678}:host.ng-invalid.ng-dirty:not(:focus-within){border-color:#de2833!important}:host.ng-untouched.ng-valid{border-color:#9ea1aa}:host:after,:host:before{position:absolute;display:flex;border-color:#999999 transparent transparent;color:#999}:host:after{content:\"\\e9b6\";font-family:DataRails;font-size:24px;color:#6d6e6f;top:0;bottom:0;right:8px;position:absolute;display:flex;align-items:center;justify-content:center}:host i{display:flex;align-items:center;position:absolute;color:#999;left:8px;top:0;bottom:0}:host input{display:flex;flex-grow:1;height:100%;border:none;text-align:left;padding-left:35px;padding-right:25px;cursor:pointer!important;outline:none}:host input.when-quarter{position:absolute;visibility:hidden}:host input:disabled{border:none;color:#aeabac;background:transparent}:host input::-webkit-search-decoration,:host input::-webkit-search-cancel-button,:host input::-webkit-search-results-button,:host input::-webkit-search-results-decoration{-webkit-appearance:none}::ng-deep .mat-datepicker-content{margin:7px 0;box-shadow:0 4px 8px 1px #00000040;border-radius:12px!important}::ng-deep .mat-datepicker-content button[disabled]{border:inherit;color:inherit;background-color:inherit}::ng-deep .mat-datepicker-content button[disabled]:hover{border:inherit}::ng-deep .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){background:#f2f2fb;color:#4646ce;font-weight:600}::ng-deep .mat-calendar-body-selected{background-color:#4646ce;color:#f2f2fb;font-weight:600}::ng-deep .mat-calendar-body-today.mat-calendar-body-selected{box-shadow:none}::ng-deep .mat-button-focus-overlay{background:#f3f7ff}::ng-deep .mat-calendar-controls .mat-icon-button:hover .mat-button-focus-overlay{opacity:1!important;background:#f3f7ff;transition:opacity .2s cubic-bezier(.35,0,.25,1)}::ng-deep .mat-calendar-controls .mat-calendar-period-button:hover{background:#f3f7ff;transition:background .2s cubic-bezier(.35,0,.25,1)}::ng-deep .mat-calendar-table-header th{font-size:14px;font-weight:600;color:#19181a}::ng-deep .mat-calendar-table-header-divider{display:none}::ng-deep .mat-calendar-body-label{color:#fff;padding:0}:host{border:none;display:flex;align-items:center}:host.disabled{background:transparent;color:inherit}:host.disabled.dr-date-picker-on-dashboard .dr-datepicker-input-container__formatted-value-display{text-decoration:none;color:#6d6e6f;font-weight:normal}:host.dr-date-picker-on-dashboard{width:-moz-fit-content;width:fit-content;justify-content:space-between}:host.dr-date-picker-on-dashboard mat-datepicker{position:absolute}:host.dr-date-picker-on-dashboard:after{visibility:hidden}:host.dr-date-picker-on-dashboard .dr-datepicker-input-container{display:flex;flex-direction:row;justify-content:center;align-items:center;margin-left:-10px}:host.dr-date-picker-on-dashboard .dr-datepicker-input-container__formatted-value-display{font-weight:600;width:auto;margin-left:5px}:host.dr-date-picker-on-dashboard .dr-datepicker-input-container .dr-icon-date{display:block;position:relative;top:0;margin-right:8px;color:#4e566c}:host .dr-datepicker-input-container input{visibility:hidden;position:absolute;width:100%}:host .dr-datepicker-input-container__formatted-value-display{width:90px;height:22px;padding-left:0;text-align:center;line-height:22px;color:#0c142b;-webkit-text-decoration-line:underline;text-decoration-line:underline}:host .dr-datepicker-input-container__formatted-value-display:hover{background-color:#f2f2fb;border-radius:5px;cursor:pointer;-webkit-text-decoration-line:underline;text-decoration-line:underline;color:#4646ce}::ng-deep .date-picker-preset-tag{width:386px!important}::ng-deep .date-picker-preset-tag .mat-calendar-content{padding-left:32px!important;padding-right:32px!important}\n"]
             },] }
 ];
-
-class DrTagModule {
-}
-DrTagModule.decorators = [
-    { type: NgModule, args: [{
-                imports: [
-                    CommonModule,
-                    DateTagModule,
-                    ListTagModule,
-                    DrDynamicTagModule
-                ],
-                exports: [DrTagComponent],
-                providers: [],
-                declarations: [
-                    DrTagComponent
-                ],
-            },] }
+DrDatePickerWithTimeframeComponent.ctorParameters = () => [
+    { type: ChangeDetectorRef },
+    { type: DateAdapter },
+    { type: DrDatePickerService }
 ];
+DrDatePickerWithTimeframeComponent.propDecorators = {
+    isDashboardClassDisplayed: [{ type: HostBinding, args: ['class.dr-date-picker-on-dashboard',] }],
+    isDashboardDatepicker: [{ type: Input }],
+    dateFormatConfig: [{ type: Input }],
+    canSelectTimeframe: [{ type: Input }],
+    availableTimeframes: [{ type: Input }],
+    paginationDebounce: [{ type: Input }],
+    isUsingDateTagPresets: [{ type: Input }],
+    presetTag: [{ type: Input }],
+    onChangeFormat: [{ type: Output }],
+    onChangePresetTag: [{ type: Output }]
+};
 
-class DrAvatarModule {
+class DrDatePickerFormatDirective {
+    constructor(matDateFormat, ngControl) {
+        this.matDateFormat = matDateFormat;
+        this.ngControl = ngControl;
+    }
+    set datePickerFormat(format) {
+        var _a;
+        if (this.configDateParse) {
+            this.matDateFormat.updateDateFormat(this.configDateParse, this.configDateDisplay);
+        }
+        else {
+            this.matDateFormat.updateDateFormat({ dateInput: format });
+        }
+        const value = this.ngControl.value;
+        (_a = this.ngControl.valueAccessor) === null || _a === void 0 ? void 0 : _a.writeValue(value);
+    }
 }
-DrAvatarModule.decorators = [
-    { type: NgModule, args: [{
-                declarations: [
-                    DrAvatarComponent,
-                    DrAvatarPipe
-                ],
-                exports: [
-                    DrAvatarComponent,
-                    DrAvatarPipe
-                ],
-                imports: [
-                    MatTooltipModule,
-                    DrTooltipModule,
-                    CommonModule
+DrDatePickerFormatDirective.decorators = [
+    { type: Directive, args: [{
+                selector: '[drDatePickerFormat]',
+                providers: [
+                    {
+                        provide: DateAdapter,
+                        useClass: MomentDateAdapter
+                    },
+                    {
+                        provide: MAT_DATE_FORMATS,
+                        useClass: CustomDateFormat
+                    }
                 ]
             },] }
 ];
+DrDatePickerFormatDirective.ctorParameters = () => [
+    { type: CustomDateFormat, decorators: [{ type: Inject, args: [MAT_DATE_FORMATS,] }] },
+    { type: NgControl, decorators: [{ type: Optional }] }
+];
+DrDatePickerFormatDirective.propDecorators = {
+    configDateParse: [{ type: Input }],
+    configDateDisplay: [{ type: Input }],
+    datePickerFormat: [{ type: Input, args: ['drDatePickerFormat',] }]
+};
 
-const components$1 = [DrSpinnerComponent];
-const directives = [DrSpinnerDirective];
-class DrSpinnerModule {
+class DrShowTimeframePipe {
+    transform(arr, showOptions) {
+        return arr.filter(item => showOptions.includes(item.timeframe));
+    }
 }
-DrSpinnerModule.decorators = [
-    { type: NgModule, args: [{
-                imports: [
-                    CommonModule,
-                ],
-                exports: [...components$1, ...directives],
-                declarations: [...components$1, ...directives]
+DrShowTimeframePipe.decorators = [
+    { type: Pipe, args: [{
+                name: 'drShowTimeframePipe'
             },] }
 ];
 
-class DrPopoverModule {
+class DrSelectAddItemComponent {
+    constructor(drSelect) {
+        this.drSelect = drSelect;
+        this.currentValues = [];
+        this.dynamicAddLabel = 'Add new';
+        this.values = [];
+        this.dynamicValueAdded = new EventEmitter();
+    }
+    set inputRef(input) {
+        if (!input)
+            return;
+        input.focus();
+    }
+    ngOnChanges(changes) {
+        this.calculateCurrentValues();
+    }
+    ngOnInit() {
+        this.calculateCurrentValues();
+    }
+    onDynamicAdding() {
+        this.isDynamicAdding = true;
+    }
+    onDynamicAddingClose() {
+        this.isDynamicAdding = false;
+        this.dynamicValue = '';
+    }
+    isDynamicValueValid() {
+        var _a;
+        const trimmedValue = (_a = this.dynamicValue) === null || _a === void 0 ? void 0 : _a.trim();
+        if (!trimmedValue)
+            return false;
+        return !this.currentValues.includes(trimmedValue);
+    }
+    onDynamicAdd(value, keydownEvent) {
+        this.isDirty = true;
+        if (!this.isDynamicValueValid())
+            return;
+        if (keydownEvent && keydownEvent.key !== 'Enter')
+            return;
+        this.onDynamicAddingClose();
+        this.drSelect.close();
+        this.dynamicValueAdded.emit(value === null || value === void 0 ? void 0 : value.trim());
+    }
+    calculateCurrentValues() {
+        this.currentValues = this.bindValue
+            ? reduce(this.values, (acc, curr) => {
+                acc.push(curr[this.bindValue]);
+                return acc;
+            }, [])
+            : this.values;
+    }
 }
-DrPopoverModule.decorators = [
-    { type: NgModule, args: [{
-                imports: [
-                    CommonModule,
-                ],
-                exports: [
-                    DrPopoverDirective,
-                    DrPopoverComponent,
-                ],
-                providers: [],
-                declarations: [
-                    DrPopoverDirective,
-                    DrPopoverComponent,
-                ],
+DrSelectAddItemComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'dr-select-add-item',
+                template: "<div class=\"dr-select__dynamic-add dynamic-add\">\n    <div class=\"dynamic-add__add-item\" (click)=\"onDynamicAdding()\">\n        <i class=\"dr-icon-add\"></i>\n        <p class=\"dynamic-add__add-item__text\">{{ dynamicAddLabel }}</p>\n    </div>\n    <div *ngIf=\"isDynamicAdding\" class=\"dynamic-add__field\">\n        <dr-input #dynamicInputRef\n                  class=\"dynamic-add__field__input\"\n                  [class.dynamic-add__field__input--error]=\"!isDynamicValueValid() && isDirty\"\n                  [(ngModel)]=\"dynamicValue\"\n                  (keydown)=\"onDynamicAdd(dynamicValue, $event)\"\n                  placeholder=\"Type...\"></dr-input>\n        <div class=\"dynamic-add__field__buttons\">\n            <dr-button *ngIf=\"dynamicValue && isDynamicValueValid()\"\n                       theme=\"icon\"\n                       icon=\"dr-icon-approve\"\n                       iconSize=\"18px\"\n                       (click)=\"onDynamicAdd(dynamicValue)\"></dr-button>\n            <dr-button theme=\"icon\"\n                       icon=\"dr-icon-exit\"\n                       iconSize=\"18px\"\n                       (click)=\"onDynamicAddingClose()\"></dr-button>\n        </div>\n    </div>\n</div>\n",
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                styles: [".dynamic-add__add-item{cursor:pointer;display:flex;align-items:center;border-bottom:1px solid #dfe0e3;padding:6px}.dynamic-add__add-item:hover{background:#f9f7ff}.dynamic-add__add-item__text{font-size:14px;line-height:22px;margin:0}.dynamic-add__field{position:relative}.dynamic-add__field__buttons{position:absolute;top:0;right:0;bottom:0;display:flex;align-items:center}::ng-deep .ng-dropdown-panel .ng-dropdown-header:has(.dynamic-add){padding:0;border:none}::ng-deep .dynamic-add__field__input{padding-left:12px!important;height:36px!important;border:none!important;background:#f9f7ff!important;border-radius:0!important}::ng-deep .dynamic-add__field__input>input{background:#f9f7ff}::ng-deep .dynamic-add__field__input>input::placeholder{line-height:22px;font-size:14px;font-weight:400;color:#9ea1aa}::ng-deep .dynamic-add__field__input--error{background:#ffdfe4!important}::ng-deep .dynamic-add__field__input--error>input{background:#ffdfe4}\n"]
             },] }
 ];
+DrSelectAddItemComponent.ctorParameters = () => [
+    { type: DrSelectComponent }
+];
+DrSelectAddItemComponent.propDecorators = {
+    dynamicAddLabel: [{ type: Input }],
+    bindValue: [{ type: Input }],
+    values: [{ type: Input }],
+    dynamicValueAdded: [{ type: Output }],
+    inputRef: [{ type: ViewChild, args: ['dynamicInputRef',] }]
+};
 
-class DrDropdownModule {
+class TooltipInfoComponent {
+    constructor() {
+    }
 }
-DrDropdownModule.decorators = [
-    { type: NgModule, args: [{
-                imports: [
-                    CommonModule,
-                    DrTooltipModule,
-                ],
-                declarations: [
-                    DrDropdownDirective,
-                    DrDropdownPositionDirective,
-                    DrDropdownComponent,
-                    DrDropdownItemShowPipe,
-                ],
-                exports: [
-                    DrDropdownDirective,
-                    DrDropdownPositionDirective,
-                    DrDropdownComponent,
-                    DrDropdownItemShowPipe,
-                ],
-                providers: [
-                    DrDropdownService,
-                ],
+TooltipInfoComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'dr-tooltip-info',
+                template: "<div class=\"tooltip-info\">\n    <i *ngIf=\"data?.icon else defaultIcon\" class=\"fa\" [class]=\"data.icon\" [style.fontSize.px]=\"14\"\n       [style.margin.px]=\"12\" [style.color]=\"data?.iconColor || '#7B61FF'\"></i>\n    <div class=\"tooltip-info-content-wrapper\">\n        <div *ngIf=\"data?.title\" class=\"tooltip-info_header\">\n            <span>{{data.title}}</span>\n        </div>\n        <div *ngIf=\"data?.description\" class=\"tooltip-info_description\"\n             [class.tooltip-info_description-no-border]=\"!data.title\">\n            <ng-container *ngIf=\"!data.title\"></ng-container>\n            <span *ngIf=\"!useDescriptionAsHTML\">{{data.description}}</span>\n            <div *ngIf=\"useDescriptionAsHTML\" [innerHTML]=\"data.description\"></div>\n        </div>\n    </div>\n</div>\n\n<ng-template #defaultIcon>\n    <ng-container *ngIf=\"!data.icon\">\n        <div class=\"default-icon\"></div>\n    </ng-container>\n</ng-template>\n",
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                styles: [".tooltip-info{width:316px;display:flex}.tooltip-info-content-wrapper{display:flex;flex-direction:column;padding-top:10px}.tooltip-info_header{padding:0 16px 6px 0;font-weight:bold;font-size:14px;line-height:16px;letter-spacing:.25px;display:flex;justify-content:flex-start}.tooltip-info_header>i{margin-right:10px}.tooltip-info-content-wrapper{padding-top:10px}.tooltip-info_description{display:flex;align-items:flex-start;border-top:1px solid #aeb5bb;padding:12px 10px 10px 0;text-align:left;font-weight:normal;font-size:14px;line-height:22px}.tooltip-info_description-no-border{padding-top:0;border-top:none}.tooltip-info_description>i{margin-right:10px}:host.tooltip-info-medium .tooltip-info{max-width:272px}:host.tooltip-info-medium .tooltip-info-content-wrapper{padding-top:10px}:host.tooltip-info-medium .tooltip-info_header,:host.tooltip-info-medium .tooltip-info_description{min-height:unset;border-top:none;font-size:14px;line-height:22px}:host.tooltip-info-medium .tooltip-info_header{padding:10px 10px 0 0}:host.tooltip-info-medium .tooltip-info_description{padding:10px 12px 10px 0}:host.tooltip-info-medium .tooltip-info .default-icon:before{background:url(\"data:image/svg+xml,%3Csvg width%3D%2216%22 height%3D%2216%22 viewBox%3D%220 0 16 16%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E    %3Cpath d%3D%22M8.00008 2.66669C5.05341 2.66669 2.66675 5.05335 2.66675 8.00002C2.66675 10.9467 5.05341 13.3334 8.00008 13.3334C10.9467 13.3334 13.3334 10.9467 13.3334 8.00002C13.3334 5.05335 10.9467 2.66669 8.00008 2.66669ZM8.53341 10.6667H7.46675V7.46669H8.53341V10.6667ZM8.53341 6.40002H7.46675V5.33335H8.53341V6.40002Z%22          fill%3D%22%237B61FF%22%2F%3E%3C%2Fsvg%3E\") no-repeat;background-size:100% 100%;display:inline-block;height:20px;width:20px;content:\"\"}:host.tooltip-info-small .tooltip-info{width:auto}:host.tooltip-info-small .tooltip-info-content-wrapper{padding-top:10px}:host.tooltip-info-small .tooltip-info_header,:host.tooltip-info-small .tooltip-info_description{min-height:unset;border-top:none;font-size:14px;line-height:22px}:host.tooltip-info-small .tooltip-info_header{padding:0 10px 0 0}:host.tooltip-info-small .tooltip-info_description{padding:0 12px 10px 0}:host.tooltip-info-small .tooltip-info .default-icon:before{background:url(\"data:image/svg+xml,%3Csvg width%3D%2216%22 height%3D%2216%22 viewBox%3D%220 0 16 16%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E    %3Cpath d%3D%22M8.00008 2.66669C5.05341 2.66669 2.66675 5.05335 2.66675 8.00002C2.66675 10.9467 5.05341 13.3334 8.00008 13.3334C10.9467 13.3334 13.3334 10.9467 13.3334 8.00002C13.3334 5.05335 10.9467 2.66669 8.00008 2.66669ZM8.53341 10.6667H7.46675V7.46669H8.53341V10.6667ZM8.53341 6.40002H7.46675V5.33335H8.53341V6.40002Z%22          fill%3D%22%237B61FF%22%2F%3E%3C%2Fsvg%3E\") no-repeat;background-size:100% 100%;display:inline-block;height:20px;width:20px;content:\"\"}.default-icon{position:relative;width:18px;height:18px;margin:10px}.default-icon:before{background:url(\"data:image/svg+xml,%3Csvg width%3D%2216%22 height%3D%2216%22 viewBox%3D%220 0 16 16%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E    %3Cpath d%3D%22M8.00008 2.66669C5.05341 2.66669 2.66675 5.05335 2.66675 8.00002C2.66675 10.9467 5.05341 13.3334 8.00008 13.3334C10.9467 13.3334 13.3334 10.9467 13.3334 8.00002C13.3334 5.05335 10.9467 2.66669 8.00008 2.66669ZM8.53341 10.6667H7.46675V7.46669H8.53341V10.6667ZM8.53341 6.40002H7.46675V5.33335H8.53341V6.40002Z%22          fill%3D%22%237B61FF%22%2F%3E%3C%2Fsvg%3E\") no-repeat;background-size:100% 100%;display:inline-block;height:18px;width:18px;content:\"\"}\n"]
             },] }
 ];
+TooltipInfoComponent.ctorParameters = () => [];
+TooltipInfoComponent.propDecorators = {
+    data: [{ type: Input }],
+    useDescriptionAsHTML: [{ type: Input }]
+};
 
-class DrTabsModule {
+class TooltipInfoSimpleComponent {
+    constructor() {
+    }
 }
-DrTabsModule.decorators = [
-    { type: NgModule, args: [{
-                imports: [
-                    CommonModule,
-                    MatTabsModule,
-                    FormsModule,
-                    ReactiveFormsModule,
-                    DrInputsModule,
-                    DrTooltipModule
-                ],
-                exports: [
-                    DrTabsComponent,
-                    DrTabComponent
-                ],
-                providers: [],
-                declarations: [
-                    DrTabsComponent,
-                    DrTabComponent
-                ],
+TooltipInfoSimpleComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'dr-tooltip-info-simple',
+                template: "<div class=\"tooltip-info-simple\">\n    <div *ngIf=\"context?.title\" class=\"tooltip-info-simple__title\">{{context?.title}}</div>\n    <div *ngIf=\"context?.description\" class=\"tooltip-info-simple__description\">{{context?.description}}</div>\n</div>\n",
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                styles: [".tooltip-info-simple{max-width:250px;font-size:14px;line-height:22px;padding:10px 12px;color:#0c142b}.tooltip-info-simple__title{font-weight:600;overflow:hidden;text-overflow:ellipsis}\n"]
             },] }
 ];
+TooltipInfoSimpleComponent.ctorParameters = () => [];
+TooltipInfoSimpleComponent.propDecorators = {
+    context: [{ type: Input }]
+};
 
-const DR_ACCORDION_COMPONENTS = [
-    DrAccordionComponent,
-    DrAccordionItemComponent,
-    DrAccordionItemHeaderComponent,
-    DrAccordionItemBodyComponent,
-];
-class DrAccordionModule {
+class TooltipNoBodyComponent {
+    constructor() {
+    }
+    ngOnInit() {
+    }
 }
-DrAccordionModule.decorators = [
-    { type: NgModule, args: [{
-                imports: [CommonModule],
-                exports: [...DR_ACCORDION_COMPONENTS],
-                declarations: [...DR_ACCORDION_COMPONENTS],
-                providers: [],
+TooltipNoBodyComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'dr-tooltip-no-body',
+                template: "<div class=\"tooltip-bold\" [ngClass]=\"{'tooltip-bold--icon': context?.icon}\">\n    <div class=\"tooltip-bold__title\">\n        <i *ngIf=\"context?.icon\" [class]=\"context?.icon\" [style.color]=\"context?.iconColor || 'black'\"></i>\n        {{ context.title }}\n    </div>\n    <div class=\"tooltip-bold-text\">\n        {{ context.text }}\n    </div>\n</div>",
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                styles: [".tooltip-bold{position:relative;box-shadow:0 4px 8px 1px #00000040;border:1px solid #c3c4ce;border-radius:8px;font-size:14px;line-height:22px;padding:10px 12px;background-color:#fff}.tooltip-bold--icon{padding-left:44px}.tooltip-bold__title{font-weight:bold}.tooltip-bold__title>i{position:absolute;width:16px;height:16px;left:10px}\n"]
             },] }
 ];
+TooltipNoBodyComponent.ctorParameters = () => [];
+TooltipNoBodyComponent.propDecorators = {
+    context: [{ type: Input }]
+};
 
-const components = [
-    DrLayoutComponent,
-    DrLayoutHeaderComponent,
-    DrLayoutBodyComponent
-];
-class DrLayoutModule {
+class TooltipProcessDefaultComponent {
+    constructor() {
+    }
 }
-DrLayoutModule.decorators = [
-    { type: NgModule, args: [{
-                imports: [CommonModule],
-                exports: [...components],
-                declarations: [...components],
+TooltipProcessDefaultComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'dr-tooltip-process-default',
+                template: `
+        <div class="container" [innerHTML]="text"></div>
+    `,
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                styles: [`
+        .container {
+            width: auto;
+            max-width: 388px;
+            text-align: start;
+            font-size: 14px;
+            line-height: 22px;
+            padding: 10px 12px;
+            color: #151B3F;
+            background-color: #FFF;
+            border-radius: 8px;
+            box-shadow: 0px 4px 8px 1px rgba(0, 0, 0, 0.25);
+            border: 1px solid #C3C4CE;
+        }
+    `]
             },] }
 ];
+TooltipProcessDefaultComponent.ctorParameters = () => [];
+TooltipProcessDefaultComponent.propDecorators = {
+    text: [{ type: Input }]
+};
 
-class DrErrorModule {
+const TOOLTIP_COMPONENTS = [
+    TooltipInfoComponent,
+    TooltipInfoSimpleComponent,
+    TooltipNoBodyComponent,
+    TooltipProcessDefaultComponent
+];
+class DrTooltipModule {
 }
-DrErrorModule.decorators = [
+DrTooltipModule.decorators = [
     { type: NgModule, args: [{
                 imports: [
-                    CommonModule,
-                    FormsModule,
-                    DrTooltipModule
+                    CommonModule
+                ],
+                exports: [
+                    TooltipComponent,
+                    DrTooltipDirective,
+                    ...TOOLTIP_COMPONENTS
                 ],
-                exports: [DrErrorComponent],
                 providers: [],
                 declarations: [
-                    DrErrorComponent
+                    TooltipComponent,
+                    DrTooltipDirective,
+                    ...TOOLTIP_COMPONENTS
                 ],
             },] }
 ];
 
-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 },] }]
+// !!! Please do not use such approach in other places
+// Hard fix for 'none' calendar view selection
+MatCalendar.prototype.focusActiveCell = function () {
+    var _a;
+    (_a = this._getCurrentViewComponent()) === null || _a === void 0 ? void 0 : _a._focusActiveCell(false);
 };
-
-class DrStepperModule {
+const components$3 = [
+    DrButtonComponent,
+    RadioButtonComponent,
+    RadioGroupComponent,
+    CheckboxComponent,
+    DrInputComponent,
+    DrSelectComponent,
+    DrToggleComponent,
+    DrToggleButtonComponent,
+    DrDatePickerComponent,
+    DrDatePickerWithTimeframeComponent,
+    DrDatePickerFormatDirective,
+    DrDatePickerCustomHeaderComponent,
+    DrModelDebounceChangeDirective,
+    DrShowTimeframePipe,
+    DrSelectAddItemComponent
+];
+class DrInputsModule {
 }
-DrStepperModule.decorators = [
+DrInputsModule.decorators = [
     { type: NgModule, args: [{
-                declarations: [StepperComponent],
+                declarations: components$3,
+                exports: components$3,
                 imports: [
+                    FormsModule,
+                    ReactiveFormsModule,
                     CommonModule,
+                    NgSelectModule,
+                    MatNativeDateModule,
+                    MatDatepickerModule,
+                    MatTooltipModule,
                     DrTooltipModule
                 ],
-                exports: [StepperComponent]
+                entryComponents: [DrDatePickerCustomHeaderComponent]
             },] }
 ];
 
-class DrDetailsListModule {
+const components$2 = [DateTagComponent,
+    DayTagComponent,
+    WeekTagComponent,
+    MonthTagComponent,
+    QuarterTagComponent,
+    AnyTagComponent,
+    YearTagComponent,
+    ForecastTagComponent];
+class DateTagModule {
 }
-DrDetailsListModule.decorators = [
+DateTagModule.decorators = [
     { type: NgModule, args: [{
                 imports: [
                     CommonModule,
+                    FormsModule,
+                    ReactiveFormsModule,
+                    DrInputsModule,
+                    NgSelectModule
                 ],
-                exports: [DrDetailsListComponent],
-                providers: [],
-                declarations: [DrDetailsListComponent],
+                exports: components$2,
+                declarations: components$2,
             },] }
 ];
 
-const ɵ0$1 = {}, ɵ1 = {};
-class DrDialogModule {
+class ListTagModule {
 }
-DrDialogModule.decorators = [
+ListTagModule.decorators = [
     { type: NgModule, args: [{
-                declarations: [DialogWrapperComponent, DialogModalWrapperComponent],
                 imports: [
                     CommonModule,
-                    MatDialogModule,
-                    DrInputsModule,
+                    FormsModule,
                     ReactiveFormsModule,
-                    DrTooltipModule,
-                    DrDetailsListModule
+                    DrInputsModule,
+                ],
+                exports: [ListTagComponent],
+                providers: [],
+                declarations: [
+                    ListTagComponent
                 ],
-                exports: [DialogWrapperComponent, DialogModalWrapperComponent],
-                providers: [
-                    { provide: MatDialogRef, useValue: ɵ0$1 },
-                    { provide: MAT_DIALOG_DATA, useValue: ɵ1 },
-                    DialogService
-                ]
             },] }
 ];
 
-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;
+class DrDynamicTagComponent {
+    constructor() {
+        this.lockedTags = [];
+        this.tagChange = new EventEmitter();
+        this.tagAdd = new EventEmitter();
     }
-    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 isPrimitiveDataSource() {
+        const values = Object.values(this.values) || [];
+        return !isObject(values[0]);
     }
-    removeFile(file) {
-        const index = this.droppedFiles.indexOf(file);
-        if (index >= 0) {
-            this.droppedFiles.splice(index, 1);
-        }
+    ngOnChanges(changes) {
+        this.updateDynamicTagValues();
     }
-    onDragOver(event) {
-        event.preventDefault();
-        event.stopPropagation();
-        if (this.dropFiles) {
-            this.fileOver = true;
+    onTagChanged($event) {
+        var _a, _b;
+        const resultEvent = {
+            id: this.tagConfig.id,
+            name: this.tagConfig.name,
+            value: $event,
+            locked: this.lockedTags.includes($event)
+        };
+        if (!isNil((_a = this.selectedTag) === null || _a === void 0 ? void 0 : _a.locked)) {
+            resultEvent.locked = this.selectedTag.locked;
+        }
+        if (!isNil((_b = this.selectedTag) === null || _b === void 0 ? void 0 : _b.label)) {
+            resultEvent.label = this.selectedTag.label;
         }
+        this.isLockedTagSelected = resultEvent.locked;
+        this.tagChange.emit(resultEvent);
     }
-    onDragLeave(event) {
-        event.preventDefault();
-        event.stopPropagation();
-        if (this.dropFiles) {
-            this.fileOver = false;
+    onOptionClick($event, tagValue) {
+        if (this.lockedTags.includes(tagValue)) {
+            $event.stopImmediatePropagation();
         }
     }
-    sendMessage() {
-        if (this.waitForReply) {
-            return;
+    onDynamicValueAdd($event) {
+        const parentValueKey = this.getParentValueKey();
+        const parentValues = this.values[parentValueKey] || [];
+        if (this.isPrimitiveDataSource) {
+            this.values[parentValueKey] = [$event, ...parentValues];
         }
-        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();
+        else {
+            this.values[parentValueKey] = [{ value: $event }, ...parentValues];
         }
+        this.selectedDynamicTag = $event;
+        this.currentValues = this.values[parentValueKey];
+        this.onTagChanged($event);
+        this.tagAdd.emit($event);
     }
-    abortMessage() {
-        this.abort.emit();
-    }
-    onModelChange(value) {
-        this._textareaInitialHeight = false;
-        this.inputChange.emit(value);
+    updateDynamicTagValues() {
+        var _a;
+        const parentValueKey = this.getParentValueKey();
+        this.currentValues = this.values[parentValueKey];
+        this.selectedDynamicTag = this.getSelectedDynamicTag(this.currentValues, (_a = this.selectedTag) === null || _a === void 0 ? void 0 : _a.value);
+        this.onTagChanged(this.selectedDynamicTag);
     }
-    getTextAreaHeight(textAreaElement) {
-        let height;
-        if (this._textareaInitialHeight) {
-            height = 50;
+    getSelectedDynamicTag(currentValues, selectedValue) {
+        if (!(currentValues === null || currentValues === void 0 ? void 0 : currentValues.length))
+            return null;
+        if (isObject(currentValues[0])) {
+            const valueFromConfig = find(currentValues, { value: selectedValue });
+            const favoriteValue = find(currentValues, { is_favorite: true });
+            return (valueFromConfig || favoriteValue || currentValues[0]).value;
         }
-        else {
-            height = textAreaElement.scrollHeight + 2;
+        const valueFromConfig = find(currentValues, (value) => value === selectedValue);
+        return (valueFromConfig || currentValues[0]);
+    }
+    getParentValueKey() {
+        return map(this.connectedTags, this.tryToParseParentValue).join('__');
+    }
+    tryToParseParentValue(connectedTags) {
+        if (isNumber(connectedTags.value)) {
+            const momentData = moment$9.unix(connectedTags.value);
+            const convertedParentValue = momentData.get('year'); // TODO: add input prop (selectedTimeDimension) or Format
+            if (momentData.isValid() && convertedParentValue) {
+                return convertedParentValue;
+            }
         }
-        return `height: ${height}px;`;
+        return connectedTags.value;
     }
 }
-DrChatFormComponent.decorators = [
+DrDynamicTagComponent.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"]
+                selector: 'dr-dynamic-tag',
+                template: "<p class=\"dynamic-tag__label\">{{ tagConfig.name }}</p>\n<dr-select [(ngModel)]=\"selectedDynamicTag\"\n           [class.dynamic-tag__locked]=\"isLockedTagSelected\"\n           bindLabel=\"value\"\n           bindValue=\"value\"\n           [items]=\"currentValues\"\n           [disabled]=\"disabled\"\n           dropdownClass=\"dynamic-tag__select dr-tag__select\"\n           (ngModelChange)=\"onTagChanged($event)\">\n    <ng-template #optionHeaderTemplate *ngIf=\"isDynamicTagAddEnabled\">\n        <dr-select-add-item bindValue=\"value\"\n                            [values]=\"currentValues\"\n                            [dynamicAddLabel]=\"' Add new ' + tagConfig.name\"\n                            (dynamicValueAdded)=\"onDynamicValueAdd($event)\"></dr-select-add-item>\n    </ng-template>\n    <ng-template #labelTemplate let-item=\"item\">\n        <div class=\"dynamic-tag__field--label\">\n            <p class=\"dynamic-tag__field__text\">{{ item?.value || item }}</p>\n            <i *ngIf=\"item?.is_favorite\" class=\"dynamic-tag__field__icon dr-icon-star-fill\"></i>\n        </div>\n    </ng-template>\n    <ng-template #optionTemplate let-item=\"item\">\n        <div class=\"dynamic-tag__field--option\"\n             [class.disabled]=\"lockedTags.includes(item?.value || item)\"\n             (click)=\"onOptionClick($event, item?.value || item)\">\n            <p class=\"dynamic-tag__field__text\">{{ item?.value || item }}</p>\n            <i *ngIf=\"item?.is_favorite\" class=\"dynamic-tag__field__icon dr-icon-star-fill\"></i>\n        </div>\n    </ng-template>\n</dr-select>\n",
+                styles: [".dynamic-tag__label{margin:0 0 4px;color:#0c142b;font-size:14px;font-weight:400;line-height:22px}.dynamic-tag__field,.dynamic-tag__field--option,.dynamic-tag__field--label{cursor:pointer;height:24px}.dynamic-tag__field--option{padding:8px 12px;width:100%;display:flex;justify-content:space-between;align-items:center}.dynamic-tag__field--option.disabled{opacity:.5;box-sizing:content-box}.dynamic-tag__field--label{display:flex;align-items:center}.dynamic-tag__field--label>.dynamic-tag__field__icon{position:absolute;right:25px}.dynamic-tag__field--label>dynamic-tag__field__text{margin:0}.dr-icon-star-fill{color:#f0bc57}::ng-deep dr-select.dynamic-tag__locked>ng-select>.ng-select-container{opacity:.4}::ng-deep .ng-option:has(.dynamic-tag__field--option){padding:0!important}\n"]
+            },] }
+];
+DrDynamicTagComponent.propDecorators = {
+    values: [{ type: Input }],
+    tagConfig: [{ type: Input }],
+    selectedTag: [{ type: Input }],
+    lockedTags: [{ type: Input }],
+    connectedTags: [{ type: Input }],
+    isDynamicTagAddEnabled: [{ type: Input }],
+    disabled: [{ type: Input }],
+    tagChange: [{ type: Output }],
+    tagAdd: [{ type: Output }]
+};
+
+class DrDynamicTagModule {
+}
+DrDynamicTagModule.decorators = [
+    { type: NgModule, args: [{
+                declarations: [DrDynamicTagComponent],
+                imports: [
+                    CommonModule,
+                    DrInputsModule,
+                    FormsModule,
+                ],
+                exports: [DrDynamicTagComponent]
+            },] }
+];
+
+class DrTagModule {
+}
+DrTagModule.decorators = [
+    { type: NgModule, args: [{
+                imports: [
+                    CommonModule,
+                    DateTagModule,
+                    ListTagModule,
+                    DrDynamicTagModule
+                ],
+                exports: [DrTagComponent],
+                providers: [],
+                declarations: [
+                    DrTagComponent
+                ],
             },] }
 ];
-DrChatFormComponent.ctorParameters = () => [
-    { type: ChangeDetectorRef },
-    { type: DomSanitizer }
+
+class DrAvatarModule {
+}
+DrAvatarModule.decorators = [
+    { type: NgModule, args: [{
+                declarations: [
+                    DrAvatarComponent,
+                    DrAvatarPipe
+                ],
+                exports: [
+                    DrAvatarComponent,
+                    DrAvatarPipe
+                ],
+                imports: [
+                    MatTooltipModule,
+                    DrTooltipModule,
+                    CommonModule
+                ]
+            },] }
 ];
-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$1 = [DrSpinnerComponent];
+const directives = [DrSpinnerDirective];
+class DrSpinnerModule {
 }
-DrChatCustomMessageService.decorators = [
-    { type: Injectable }
+DrSpinnerModule.decorators = [
+    { type: NgModule, args: [{
+                imports: [
+                    CommonModule,
+                ],
+                exports: [...components$1, ...directives],
+                declarations: [...components$1, ...directives]
+            },] }
 ];
 
-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 DrPopoverModule {
 }
-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%)' }))]),
-                    ]),
+DrPopoverModule.decorators = [
+    { type: NgModule, args: [{
+                imports: [
+                    CommonModule,
+                ],
+                exports: [
+                    DrPopoverDirective,
+                    DrPopoverComponent,
+                ],
+                providers: [],
+                declarations: [
+                    DrPopoverDirective,
+                    DrPopoverComponent,
                 ],
-                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 }
+
+class DrDropdownModule {
+}
+DrDropdownModule.decorators = [
+    { type: NgModule, args: [{
+                imports: [
+                    CommonModule,
+                    DrTooltipModule,
+                ],
+                declarations: [
+                    DrDropdownDirective,
+                    DrDropdownPositionDirective,
+                    DrDropdownComponent,
+                    DrDropdownItemShowPipe,
+                ],
+                exports: [
+                    DrDropdownDirective,
+                    DrDropdownPositionDirective,
+                    DrDropdownComponent,
+                    DrDropdownItemShowPipe,
+                ],
+                providers: [
+                    DrDropdownService,
+                ],
+            },] }
 ];
-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();
-    }
-    get hiddenValues() {
-        return JSON.parse(localStorage.getItem('aiChatSuggestions')) || [];
-    }
-    set hiddenValues(values) {
-        localStorage.setItem('aiChatSuggestions', JSON.stringify(values));
-    }
-    ngOnInit() {
-        this.filterValues();
-    }
-    onItemClick(item) {
-        if (this.waitForReply) {
-            return;
-        }
-        this.isSuggestedMenuOpen = false;
-        this.suggestionSelect.emit(item);
-        this.hiddenValues = [...this.hiddenValues, item];
-        this.filterValues();
-    }
-    filterValues() {
-        const hiddenValues = this.hiddenValues;
-        this._nonHiddenValues = _.filter(this.values, val => !hiddenValues.includes(val));
-        this.fillVisibleValues();
-    }
-    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);
-        }
-        this.cdr.markForCheck();
-    }
-    clearHidden() {
-        localStorage.setItem('aiChatSuggestions', null);
-        this.filterValues();
-    }
-    toggleSuggestedMenu() {
-        this.isSuggestedMenuOpen = !this.isSuggestedMenuOpen;
-        if (this.isSuggestedMenuOpen) {
-            this.fillVisibleValues();
-        }
-    }
+class DrTabsModule {
+}
+DrTabsModule.decorators = [
+    { type: NgModule, args: [{
+                imports: [
+                    CommonModule,
+                    MatTabsModule,
+                    FormsModule,
+                    ReactiveFormsModule,
+                    DrInputsModule,
+                    DrTooltipModule
+                ],
+                exports: [
+                    DrTabsComponent,
+                    DrTabComponent
+                ],
+                providers: [],
+                declarations: [
+                    DrTabsComponent,
+                    DrTabComponent
+                ],
+            },] }
+];
+
+const DR_ACCORDION_COMPONENTS = [
+    DrAccordionComponent,
+    DrAccordionItemComponent,
+    DrAccordionItemHeaderComponent,
+    DrAccordionItemBodyComponent,
+];
+class DrAccordionModule {
 }
-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"]
+DrAccordionModule.decorators = [
+    { type: NgModule, args: [{
+                imports: [CommonModule],
+                exports: [...DR_ACCORDION_COMPONENTS],
+                declarations: [...DR_ACCORDION_COMPONENTS],
+                providers: [],
             },] }
 ];
-DrChatSuggestionsComponent.ctorParameters = () => [
-    { type: ChangeDetectorRef }
+
+const components = [
+    DrLayoutComponent,
+    DrLayoutHeaderComponent,
+    DrLayoutBodyComponent
+];
+class DrLayoutModule {
+}
+DrLayoutModule.decorators = [
+    { type: NgModule, args: [{
+                imports: [CommonModule],
+                exports: [...components],
+                declarations: [...components],
+            },] }
 ];
-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();
+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();
     }
-    set contentUpdateSubject(value) {
-        if (value) {
-            value.pipe(takeUntil(this.destroy$)).subscribe(() => {
-                this.updateView();
-            });
+    selectStep(step) {
+        if (step !== this.currentStep && !this.disabled) {
+            this.stepChange.emit(step);
         }
     }
-    ;
-    /**
-     * 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();
-        }
+    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%';
     }
-    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();
-            }
-        });
+    scrollLeft() {
+        this.stepper.nativeElement.scrollLeft -= 80;
     }
-    ngOnDestroy() {
-        this.destroy$.next();
-        this.destroy$.complete();
+    scrollRight() {
+        this.stepper.nativeElement.scrollLeft += 80;
     }
-    onClearClick($event) {
-        this.clear.emit($event);
-        if (this._chatSuggestions) {
-            this._chatSuggestions.clearHidden();
-        }
+    roundWidth(width) {
+        return Math.round(width);
     }
 }
-DrChatComponent.decorators = [
+StepperComponent.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"]
+                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"]
             },] }
 ];
-DrChatComponent.ctorParameters = () => [
-    { type: ChangeDetectorRef }
-];
-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,] }]
+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
+                ]
+            },] }
+];
+
 /**
  * Chat text message component.
  */
@@ -6199,7 +6205,7 @@ DrBadgeStatusComponent.decorators = [
                 template: "<div class=\"badge-status\" [drTooltip]=\"tooltip\"\n     [ngClass]=\"'badge-status--' + theme\">\n    <i *ngIf=\"icon\" class=\"{{ icon }}\"></i>\n    <span *ngIf=\"label\">{{ label }}</span>\n</div>\n",
                 selector: 'dr-badge-status',
                 encapsulation: ViewEncapsulation.None,
-                styles: [".badge-status{display:flex;align-items:center;font-family:\"Poppins\",sans-serif;font-style:normal;font-size:\"Poppins\",sans-serif;font-weight:12px;line-height:20px;font-weight:600;height:24px;padding:2px 8px 2px 4px;border-radius:4px;cursor:pointer}.badge-status i{font-size:20px;margin-right:4px}.badge-status--info{color:#0b5af9;background:#E6EFFF}.badge-status--error{color:#bf1d30;background:#F7D9DC}.badge-status--warning{color:#ffb800;background:#FFEDBF}.badge-status--success{color:#03a678;background:#DBF5E6}.badge-status--regular{color:#7e828e;background:#F0F1F4}.badge-status--progress{color:#4646ce;background:#F2F2FB}.badge-status--dotted{color:#7e828e;background:transparent}.badge-status--dotted i{display:none}\n"]
+                styles: [".badge-status{display:flex;align-items:center;font-family:\"Poppins\",sans-serif;font-style:normal;font-size:\"Poppins\",sans-serif;font-weight:12px;line-height:20px;font-weight:600;height:24px;padding:2px 8px 2px 4px;border-radius:4px;cursor:pointer}.badge-status i{font-size:20px;margin-right:4px}.badge-status--info{color:#0b5af9;background:#E6EFFF}.badge-status--error{color:#bf1d30;background:#F7D9DC}.badge-status--warning{color:#ffb800;background:#FFEDBF}.badge-status--success{color:#037c5a;background:#DBF5E6}.badge-status--regular{color:#7e828e;background:#F0F1F4}.badge-status--progress{color:#4646ce;background:#F2F2FB}.badge-status--dotted{color:#7e828e;background:transparent}.badge-status--dotted i{display:none}\n"]
             },] }
 ];
 DrBadgeStatusComponent.ctorParameters = () => [];
@@ -6232,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