@datarailsshared/datarailsshared 1.4.177 → 1.4.179

package/bundles/datarailsshared-datarailsshared.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/material/core'), require('@angular/material-moment-adapter'), require('lodash'), require('@angular/forms'), require('@angular/common'), require('rxjs'), require('rxjs/operators'), require('@ng-select/ng-select'), require('@angular/animations'), require('@angular/cdk/overlay'), require('@angular/cdk/portal'), require('@angular/material/dialog'), require('@angular/material/datepicker'), require('moment'), require('@angular/material/tooltip'), require('@angular/material/tabs'), require('@angular/platform-browser')) :
-    typeof define === 'function' && define.amd ? define('@datarailsshared/datarailsshared', ['exports', '@angular/core', '@angular/material/core', '@angular/material-moment-adapter', 'lodash', '@angular/forms', '@angular/common', 'rxjs', 'rxjs/operators', '@ng-select/ng-select', '@angular/animations', '@angular/cdk/overlay', '@angular/cdk/portal', '@angular/material/dialog', '@angular/material/datepicker', 'moment', '@angular/material/tooltip', '@angular/material/tabs', '@angular/platform-browser'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.datarailsshared = global.datarailsshared || {}, global.datarailsshared.datarailsshared = {}), global.ng.core, global.ng.material.core, global.ng.materialMomentAdapter, global._, global.ng.forms, global.ng.common, global.rxjs, global.rxjs.operators, global.ngSelect, global.ng.animations, global.ng.cdk.overlay, global.ng.cdk.portal, global.ng.material.dialog, global.ng.material.datepicker, global.moment$9, global.ng.material.tooltip, global.ng.material.tabs, global.ng.platformBrowser));
-})(this, (function (exports, i0, core, materialMomentAdapter, _, forms, common, rxjs, operators, ngSelect, animations, i1, portal, i1$1, datepicker, moment$9, tooltip, tabs, platformBrowser) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/material/core'), require('@angular/material-moment-adapter'), require('lodash'), require('@angular/forms'), require('@angular/common'), require('rxjs'), require('rxjs/operators'), require('@ng-select/ng-select'), require('@angular/animations'), require('@angular/cdk/overlay'), require('@angular/cdk/portal'), require('@angular/material/dialog'), require('@angular/platform-browser'), require('@angular/material/datepicker'), require('moment'), require('@angular/material/tooltip'), require('@angular/material/tabs')) :
+    typeof define === 'function' && define.amd ? define('@datarailsshared/datarailsshared', ['exports', '@angular/core', '@angular/material/core', '@angular/material-moment-adapter', 'lodash', '@angular/forms', '@angular/common', 'rxjs', 'rxjs/operators', '@ng-select/ng-select', '@angular/animations', '@angular/cdk/overlay', '@angular/cdk/portal', '@angular/material/dialog', '@angular/platform-browser', '@angular/material/datepicker', 'moment', '@angular/material/tooltip', '@angular/material/tabs'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.datarailsshared = global.datarailsshared || {}, global.datarailsshared.datarailsshared = {}), global.ng.core, global.ng.material.core, global.ng.materialMomentAdapter, global._, global.ng.forms, global.ng.common, global.rxjs, global.rxjs.operators, global.ngSelect, global.ng.animations, global.ng.cdk.overlay, global.ng.cdk.portal, global.ng.material.dialog, global.ng.platformBrowser, global.ng.material.datepicker, global.moment$9, global.ng.material.tooltip, global.ng.material.tabs));
+})(this, (function (exports, i0, core, materialMomentAdapter, _, forms, common, rxjs, operators, ngSelect, animations, i1, portal, i1$1, platformBrowser, datepicker, moment$9, tooltip, tabs) { 'use strict';
 
     function _interopNamespace(e) {
         if (e && e.__esModule) return e;
@@ -4221,58 +4221,6 @@
         collapse: [{ type: i0.Input }]
     };
 
-    exports.TooltipPosition = void 0;
-    (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";
-    })(exports.TooltipPosition || (exports.TooltipPosition = {}));
-
-    exports.Scenario = void 0;
-    (function (Scenario) {
-        Scenario["ACTUALS"] = "Actuals";
-        Scenario["FORECAST"] = "Forecast";
-        Scenario["BUDGET"] = "Budget";
-        Scenario["NONE"] = "None";
-    })(exports.Scenario || (exports.Scenario = {}));
-
-    var DrModelDebounceChangeDirective = /** @class */ (function () {
-        function DrModelDebounceChangeDirective(ngModel) {
-            this.ngModel = ngModel;
-            this.debounce = 200;
-            this.ngModelDebounceChange = new i0.EventEmitter();
-        }
-        DrModelDebounceChangeDirective.prototype.ngOnInit = function () {
-            var _this = this;
-            this.subscription = this.ngModel.control.valueChanges.pipe(operators.skip(1), operators.debounceTime(this.debounce), operators.distinctUntilChanged()).subscribe(function (value) { return _this.ngModelDebounceChange.emit(value); });
-        };
-        DrModelDebounceChangeDirective.prototype.ngOnDestroy = function () {
-            this.subscription.unsubscribe();
-        };
-        return DrModelDebounceChangeDirective;
-    }());
-    DrModelDebounceChangeDirective.decorators = [
-        { type: i0.Directive, args: [{
-                    selector: '[ngModelDebounceChange]'
-                },] }
-    ];
-    DrModelDebounceChangeDirective.ctorParameters = function () { return [
-        { type: forms.NgModel }
-    ]; };
-    DrModelDebounceChangeDirective.propDecorators = {
-        debounce: [{ type: i0.Input }],
-        ngModelDebounceChange: [{ type: i0.Output }]
-    };
-
     var IMAGE_TYPES = ['image/png', 'image/jpeg', 'image/gif'];
     exports.CHAT_MESSAGE_TYPE = void 0;
     (function (CHAT_MESSAGE_TYPE) {
@@ -4310,314 +4258,856 @@
         return ChatMessage;
     }());
 
-    exports.BadgeStatus = void 0;
-    (function (BadgeStatus) {
-        BadgeStatus["INFO"] = "info";
-        BadgeStatus["ERROR"] = "error";
-        BadgeStatus["WARNING"] = "warning";
-        BadgeStatus["SUCCESS"] = "success";
-        BadgeStatus["REGULAR"] = "regular";
-        BadgeStatus["PROGRESS"] = "progress";
-        BadgeStatus["DOTTED"] = "dotted";
-    })(exports.BadgeStatus || (exports.BadgeStatus = {}));
-
-    var _a;
-    var allDateTags = (_a = {},
-        _a[TagsConfigSubType.YEAR] = {
-            name: 'Date',
-            toggle: false,
-        },
-        _a[TagsConfigSubType.QUARTER] = {
-            name: 'Date',
-            toggle: false,
-        },
-        _a[TagsConfigSubType.MONTH] = {
-            name: 'Date',
-            toggle: false,
-        },
-        _a[TagsConfigSubType.DAY] = {
-            name: 'Date',
-            toggle: false,
-        },
-        _a[TagsConfigSubType.WEEK] = {
-            name: 'Date',
-            toggle: false,
-        },
-        _a);
-    function getScenarioTagDataConfig(isMultipleDimension) {
-        var _a, _b, _c, _d, _e;
-        return _a = {},
-            _a[exports.Scenario.ACTUALS] = Object.assign(Object.assign({}, allDateTags), (_b = {}, _b[TagsConfigSubType.MONTH] = {
-                name: 'Date',
-                toggle: true,
-            }, _b[TagsConfigSubType.FILE_STATUS] = {
-                toggle: false,
-            }, _b)),
-            _a[exports.Scenario.BUDGET] = (_c = {},
-                _c[TagsConfigSubType.BUDGET_CYCLE] = {
-                    toggle: true,
-                    acceptableDateTags: [TagsConfigSubType.YEAR],
-                    hidden: !isMultipleDimension,
-                },
-                _c[TagsConfigSubType.PLAN] = {
-                    toggle: false,
-                    turnOffDateTags: true,
-                    hidden: isMultipleDimension,
-                },
-                _c[TagsConfigSubType.YEAR] = {
-                    name: 'Date',
-                    toggle: true,
-                },
-                _c[TagsConfigSubType.QUARTER] = {
-                    name: 'Date',
-                    toggle: false,
-                },
-                _c[TagsConfigSubType.FILE_STATUS] = {
-                    toggle: false,
-                },
-                _c),
-            _a[exports.Scenario.FORECAST] = (_d = {},
-                _d[TagsConfigSubType.FORECAST_NEW] = {
-                    toggle: true,
-                    name: 'Date',
-                },
-                _d[TagsConfigSubType.FILE_STATUS] = {
-                    toggle: false,
-                },
-                _d),
-            _a[exports.Scenario.NONE] = Object.assign(Object.assign({}, allDateTags), (_e = {}, _e[TagsConfigSubType.MONTH] = {
-                name: 'Date',
-                toggle: true,
-            }, _e[TagsConfigSubType.FILE_STATUS] = {
-                toggle: true,
-            }, _e)),
-            _a;
-    }
-
-    var ScenarioService = /** @class */ (function () {
-        function ScenarioService() {
-            this.DEFAULT_FORECAST_DATE_TAG = 'Month';
+    var DrChatFormComponent = /** @class */ (function () {
+        function DrChatFormComponent(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 i0.EventEmitter();
+            this.abort = new i0.EventEmitter();
+            /**
+             * Emits when message input value has been changed
+             *
+             * @type {EventEmitter<string>}
+             */
+            this.inputChange = new i0.EventEmitter();
+            this.fileOver = false;
         }
-        Object.defineProperty(ScenarioService.prototype, "scenarios", {
-            get: function () {
-                return _.orderBy(Object.values(exports.Scenario), function (scenario) { return scenario === exports.Scenario.NONE ? 1 : 0; });
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(ScenarioService.prototype, "areExistingTagsConfig", {
-            get: function () {
-                return !!this.currentTagsConfig;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        ScenarioService.prototype.initScenarioTags = function (wholeTagsConfig, currentTagsConfig, isMultipleDimension) {
-            if (!(wholeTagsConfig === null || wholeTagsConfig === void 0 ? void 0 : wholeTagsConfig.length))
-                return;
-            this.wholeTagsConfig = _.cloneDeep(wholeTagsConfig);
-            this.currentTagsConfig = currentTagsConfig;
-            this.isMultipleDimension = isMultipleDimension;
+        DrChatFormComponent.prototype.onDrop = function (event) {
+            var e_1, _b;
+            var _this = this;
+            var _a;
+            if (this.dropFiles) {
+                event.preventDefault();
+                event.stopPropagation();
+                this.fileOver = false;
+                if ((_a = event.dataTransfer) === null || _a === void 0 ? void 0 : _a.files) {
+                    var _loop_1 = function (file) {
+                        var res = file;
+                        if (IMAGE_TYPES.includes(file.type)) {
+                            var fr = new FileReader();
+                            fr.onload = function (e) {
+                                res.src = e.target.result;
+                                res.urlStyle = _this.domSanitizer.bypassSecurityTrustStyle("url(" + res.src + ")");
+                                _this.cdr.detectChanges();
+                            };
+                            fr.readAsDataURL(file);
+                        }
+                        this_1.droppedFiles.push(res);
+                    };
+                    var this_1 = this;
+                    try {
+                        for (var _c = __values(event.dataTransfer.files), _d = _c.next(); !_d.done; _d = _c.next()) {
+                            var file = _d.value;
+                            _loop_1(file);
+                        }
+                    }
+                    catch (e_1_1) { e_1 = { error: e_1_1 }; }
+                    finally {
+                        try {
+                            if (_d && !_d.done && (_b = _c.return)) _b.call(_c);
+                        }
+                        finally { if (e_1) throw e_1.error; }
+                    }
+                }
+            }
         };
-        ScenarioService.prototype.getTagsConfigByScenarioTags = function (scenarioTags, tagsConfig) {
-            var scenarioTagsConfig = _.filter(tagsConfig, function (tagConfig) { return _.some(scenarioTags, function (scenarioTag) { return scenarioTag.toggle && scenarioTag.selectedTagSubType === tagConfig.options.sub_type; }); });
-            return this.sortScenarioTags(scenarioTagsConfig);
+        DrChatFormComponent.prototype.removeFile = function (file) {
+            var index = this.droppedFiles.indexOf(file);
+            if (index >= 0) {
+                this.droppedFiles.splice(index, 1);
+            }
         };
-        ScenarioService.prototype.getScenarioTagsByScenario = function (scenario) {
-            var _this = this;
-            var scenarioTagsConfig = this.getScenarioTagsConfig(scenario, this.wholeTagsConfig);
-            var scenarioTagsUi = [];
-            _.forEach(scenarioTagsConfig, function (scenarioTag) {
-                var isTagWithSubTags = scenarioTag.type === exports.TagTypes.DATE;
-                var tagWithSubTags = isTagWithSubTags && _.find(scenarioTagsUi, { type: scenarioTag.type });
-                var 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);
-            }
-            var isTagNotSupportingDates = _.some(scenarioTagsUi, { turnOffDateTags: true, toggle: true });
-            if (isTagNotSupportingDates) {
-                this.turnOffDateTag(scenarioTagsUi);
-            }
-            var tagWithSpecificDateTags = _.find(scenarioTagsUi, function (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);
-        };
-        ScenarioService.prototype.sortScenarioTags = function (scenarioTagsUi) {
-            return _.orderBy(scenarioTagsUi, [
-                function (tag) { return (tag.type === exports.TagTypes.DATE ? 0 : 1); },
-                function (tag) { return (tag.name === 'File Status'); }
-            ]);
-        };
-        ScenarioService.prototype.initExistingTagsConfig = function (scenario, scenarioTagsUi) {
-            var _this = this;
-            _.forEach(this.currentTagsConfig, function (tagConfig) {
-                var _a;
-                var tagSubType = (_a = tagConfig === null || tagConfig === void 0 ? void 0 : tagConfig.options) === null || _a === void 0 ? void 0 : _a.sub_type;
-                var scenarioTagDataConfig = getScenarioTagDataConfig(_this.isMultipleDimension);
-                if (!scenarioTagDataConfig || !scenarioTagDataConfig[scenario] || !scenarioTagDataConfig[scenario][tagSubType]) {
-                    return;
-                }
-                var scenarioTagUi = tagConfig.type === exports.TagTypes.DATE
-                    ? _.find(scenarioTagsUi, { type: tagConfig.type })
-                    : _.find(scenarioTagsUi, { selectedTagSubType: tagSubType });
-                scenarioTagUi.toggle = true;
-                scenarioTagUi.selectedTagSubType = tagSubType;
-            });
-        };
-        ScenarioService.prototype.prepareScenarioTag = function (scenarioTagsConfig, scenarioTag, scenario, isDateTag) {
-            var toggleStatus = isDateTag
-                ? _.some(scenarioTagsConfig, function (tag) { return tag.type === exports.TagTypes.DATE && tag.scenarioData.toggle; })
-                : scenarioTag.scenarioData.toggle;
-            var selectedTagSubType = isDateTag
-                ? this.getScenarioSelectedDateTag(scenario, scenarioTagsConfig)
-                : scenarioTag.options.sub_type;
-            var tag = {
-                toggle: this.areExistingTagsConfig ? false : toggleStatus,
-                name: scenarioTag.scenarioData.name || scenarioTag.name,
-                description: scenarioTag.scenarioData.description || scenarioTag.description,
-                type: scenarioTag.type,
-                selectedTagSubType: selectedTagSubType,
-            };
-            if (scenarioTag.scenarioData.turnOffDateTags) {
-                tag.turnOffDateTags = scenarioTag.scenarioData.turnOffDateTags;
-            }
-            if (scenarioTag.scenarioData.acceptableDateTags) {
-                tag.acceptableDateTags = scenarioTag.scenarioData.acceptableDateTags;
+        DrChatFormComponent.prototype.onDragOver = function (event) {
+            event.preventDefault();
+            event.stopPropagation();
+            if (this.dropFiles) {
+                this.fileOver = true;
             }
-            return tag;
-        };
-        ScenarioService.prototype.sortedScenarioSubTags = function (tag) {
-            var SUB_TAGS_ORDER = [TagsConfigSubType.DAY, TagsConfigSubType.WEEK, TagsConfigSubType.MONTH, TagsConfigSubType.QUARTER, TagsConfigSubType.YEAR];
-            return _.orderBy(tag.subTags, function (subTag) { return _.indexOf(SUB_TAGS_ORDER, subTag.subType); });
         };
-        ScenarioService.prototype.updateScenarioSubTags = function (tag, scenarioTag) {
-            if (!tag.subTags) {
-                tag.subTags = [];
+        DrChatFormComponent.prototype.onDragLeave = function (event) {
+            event.preventDefault();
+            event.stopPropagation();
+            if (this.dropFiles) {
+                this.fileOver = false;
             }
-            var tagSubType = scenarioTag.options.sub_type;
-            tag.subTags.push({
-                subType: tagSubType,
-                name: tagSubType === TagsConfigSubType.FORECAST_NEW ? this.DEFAULT_FORECAST_DATE_TAG : scenarioTag.name,
-            });
         };
-        ScenarioService.prototype.turnOffDateTag = function (scenarioTags) {
-            var dateTag = _.find(scenarioTags, { type: exports.TagTypes.DATE });
-            if (!dateTag)
+        DrChatFormComponent.prototype.sendMessage = function () {
+            if (this.waitForReply) {
                 return;
-            dateTag.toggle = false;
+            }
+            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();
+            }
         };
-        ScenarioService.prototype.hideNotAvailableTags = function (tagWithSpecificDateTags, scenarioTags) {
-            var _a;
-            var subTags = (_a = _.find(scenarioTags, { type: exports.TagTypes.DATE })) === null || _a === void 0 ? void 0 : _a.subTags;
-            if (!subTags.length)
-                return;
-            _.forEach(scenarioTags, function (tag) {
-                var _a;
-                if (!((_a = tag.acceptableDateTags) === null || _a === void 0 ? void 0 : _a.length))
-                    return;
-                if (tag !== tagWithSpecificDateTags) {
-                    tag.toggle = false;
-                }
-            });
-            _.forEach(subTags, function (subTag) {
-                subTag.hidden = !tagWithSpecificDateTags.acceptableDateTags.includes(subTag.subType);
-            });
+        DrChatFormComponent.prototype.abortMessage = function () {
+            this.abort.emit();
         };
-        ScenarioService.prototype.getScenarioSelectedDateTag = function (scenario, dateTags) {
-            var _c;
-            var _a, _b;
-            var monthSubType = (_b = (_a = _.find(dateTags, function (tag) { return tag.options.sub_type === TagsConfigSubType.MONTH; })) === null || _a === void 0 ? void 0 : _a.options) === null || _b === void 0 ? void 0 : _b.sub_type;
-            var scenarioSelectedDateTag = (_c = {},
-                _c[exports.Scenario.ACTUALS] = function () { return monthSubType; },
-                _c[exports.Scenario.BUDGET] = function () { var _a, _b; return (_b = (_a = _.find(dateTags, function (tag) { return tag.options.sub_type === TagsConfigSubType.YEAR; })) === null || _a === void 0 ? void 0 : _a.options) === null || _b === void 0 ? void 0 : _b.sub_type; },
-                _c[exports.Scenario.FORECAST] = function () { var _a, _b; return (_b = (_a = _.find(dateTags, function (tag) { return tag.options.sub_type === TagsConfigSubType.FORECAST_NEW; })) === null || _a === void 0 ? void 0 : _a.options) === null || _b === void 0 ? void 0 : _b.sub_type; },
-                _c[exports.Scenario.NONE] = function () { return monthSubType; },
-                _c);
-            if (!scenarioSelectedDateTag[scenario])
-                return;
-            return scenarioSelectedDateTag[scenario]();
+        DrChatFormComponent.prototype.onModelChange = function (value) {
+            this._textareaInitialHeight = false;
+            this.inputChange.emit(value);
         };
-        ScenarioService.prototype.getScenarioTagsConfig = function (scenario, tagsConfig) {
-            var _this = this;
-            return _.reduce(tagsConfig, function (acc, tagConfig) {
-                var _a;
-                var tagSubType = (_a = tagConfig === null || tagConfig === void 0 ? void 0 : tagConfig.options) === null || _a === void 0 ? void 0 : _a.sub_type;
-                var scenarioTagDataConfig = getScenarioTagDataConfig(_this.isMultipleDimension);
-                var scenarioTagConfig = scenarioTagDataConfig && scenarioTagDataConfig[scenario] ?
-                    scenarioTagDataConfig[scenario][tagSubType] : null;
-                if (!scenarioTagConfig || scenarioTagConfig.hidden)
-                    return acc;
-                var clonedTagConfig = _.cloneDeep(tagConfig);
-                var scenarioTag = Object.assign(Object.assign({}, clonedTagConfig), { scenarioData: scenarioTagConfig });
-                acc.push(scenarioTag);
-                return acc;
-            }, []);
+        DrChatFormComponent.prototype.getTextAreaHeight = function (textAreaElement) {
+            var height;
+            if (this._textareaInitialHeight) {
+                height = 50;
+            }
+            else {
+                height = textAreaElement.scrollHeight + 2;
+            }
+            return "height: " + height + "px;";
         };
-        return ScenarioService;
+        return DrChatFormComponent;
     }());
-    ScenarioService.decorators = [
-        { type: i0.Injectable }
+    DrChatFormComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'dr-chat-form',
+                    template: "<div class=\"dropped-files\" *ngIf=\"droppedFiles?.length\">\n    <div class=\"dropped-files__item\" *ngFor=\"let file of droppedFiles\">\n        <div class=\"dropped-files__item__preview\" [style.background-image]=\"file.urlStyle || 'none'\">\n            <i class=\"dr-icon-file\" *ngIf=\"!file.urlStyle\"></i>\n        </div>\n        <div class=\"dropped-files__item__name\">{{ file.name }}</div>\n        <i class=\"dropped-files__item__remove dr-icon-exit\" (click)=\"removeFile(file)\"></i>\n    </div>\n</div>\n<div class=\"message-row\">\n    <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: i0.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 = function () { return [
+        { type: i0.ChangeDetectorRef },
+        { type: platformBrowser.DomSanitizer }
+    ]; };
+    DrChatFormComponent.propDecorators = {
+        message: [{ type: i0.Input }],
+        messagePlaceholder: [{ type: i0.Input }],
+        dropFiles: [{ type: i0.Input }],
+        dropFilePlaceholder: [{ type: i0.Input }],
+        waitForReply: [{ type: i0.Input }],
+        send: [{ type: i0.Output }],
+        abort: [{ type: i0.Output }],
+        inputChange: [{ type: i0.Output }],
+        fileOver: [{ type: i0.HostBinding, args: ['class.file-over',] }],
+        onDrop: [{ type: i0.HostListener, args: ['drop', ['$event'],] }],
+        onDragOver: [{ type: i0.HostListener, args: ['dragover', ['$event'],] }],
+        onDragLeave: [{ type: i0.HostListener, args: ['dragleave', ['$event'],] }]
+    };
 
-    var DrSharedUtils = /** @class */ (function () {
-        function DrSharedUtils() {
+    /**
+     * `DrCustomMessageService` is used to store instances of `DrChatCustomMessageDirective`s which
+     * were provided in the chat component.
+     */
+    var DrChatCustomMessageService = /** @class */ (function () {
+        function DrChatCustomMessageService() {
+            this.customMessages = new Map();
         }
-        /**
-         * Get timeframe (day, year, month, quarter) based on passed format
-         *
-         * @param format - date format string. Examples: MM/DD/YYYY, Q/YYYY
-         */
-        DrSharedUtils.getTimeframeByDateFormat = function (format) {
-            var defaultFrame = exports.TimeframeOption.DAY;
-            if (!format) {
-                return defaultFrame;
-            }
-            var lowerCaseFormat = format.toLowerCase();
-            switch (true) {
-                case lowerCaseFormat.includes('q'):
-                    return exports.TimeframeOption.QUARTER;
-                case lowerCaseFormat.includes('d'):
-                    return exports.TimeframeOption.DAY;
-                case lowerCaseFormat.includes('w'):
-                    return exports.TimeframeOption.WEEK;
-                case lowerCaseFormat.includes('m'):
-                    return exports.TimeframeOption.MONTH;
-                case lowerCaseFormat.includes('y'):
-                    return exports.TimeframeOption.YEAR;
-                default:
-                    return defaultFrame;
-            }
+        DrChatCustomMessageService.prototype.register = function (type, instance) {
+            this.customMessages.set(type, instance);
         };
-        DrSharedUtils.getDateByTag = function (tag) {
-            var todayDate = moment__namespace().utc().endOf('day');
-            switch (tag) {
-                case exports.DateTags.TODAY:
-                    return todayDate;
-                case exports.DateTags.YESTERDAY:
-                    todayDate.subtract(1, 'days');
-                    return todayDate;
-                case exports.DateTags.THIS_MONTH:
-                    todayDate.endOf('month');
-                    return todayDate;
-                case exports.DateTags.PREV_MONTH:
-                    todayDate.subtract(1, 'months').endOf('month');
-                    return todayDate;
-            }
+        DrChatCustomMessageService.prototype.unregister = function (type) {
+            return this.customMessages.delete(type);
         };
-        return DrSharedUtils;
+        DrChatCustomMessageService.prototype.getInstance = function (type) {
+            return this.customMessages.get(type);
+        };
+        return DrChatCustomMessageService;
     }());
+    DrChatCustomMessageService.decorators = [
+        { type: i0.Injectable }
+    ];
 
-    // @ts-ignore
+    var DrChatMessageComponent = /** @class */ (function () {
+        function DrChatMessageComponent(customMessageService) {
+            this.customMessageService = customMessageService;
+            this.MESSAGE_TYPE = exports.CHAT_MESSAGE_TYPE;
+            this._reply = false;
+        }
+        Object.defineProperty(DrChatMessageComponent.prototype, "flyInOut", {
+            get: function () {
+                return true;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(DrChatMessageComponent.prototype, "notReply", {
+            get: function () {
+                return !this.reply;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(DrChatMessageComponent.prototype, "reply", {
+            /**
+             * Determines if a message is a reply
+             */
+            get: function () {
+                return this._reply;
+            },
+            set: function (value) {
+                this._reply = !!value;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        DrChatMessageComponent.prototype.getTemplate = function () {
+            this.customMessage = true;
+            var customMessage = this.getCustomMessage(this.type);
+            return customMessage.templateRef;
+        };
+        DrChatMessageComponent.prototype.getTemplateContext = function () {
+            return { $implicit: this.customMessageData, isReply: this.reply };
+        };
+        DrChatMessageComponent.prototype.getCustomMessage = function (type) {
+            var customMessageDirective = this.customMessageService.getInstance(type);
+            if (!customMessageDirective) {
+                throw new Error("dr-chat: Can't find template for custom type '" + type + "'. " +
+                    ("Make sure you provide it in the chat component with *drCustomMessage='" + type + "'."));
+            }
+            return customMessageDirective;
+        };
+        return DrChatMessageComponent;
+    }());
+    DrChatMessageComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'dr-chat-message',
+                    template: "<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: [
+                        animations.trigger('flyInOut', [
+                            animations.state('in', animations.style({ transform: 'translateX(0)' })),
+                            animations.transition('void => *', [animations.style({ transform: 'translateX(-100%)' }), animations.animate(80)]),
+                            animations.transition('* => void', [animations.animate(80, animations.style({ transform: 'translateX(100%)' }))]),
+                        ]),
+                    ],
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    styles: [":host{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 = function () { return [
+        { type: DrChatCustomMessageService }
+    ]; };
+    DrChatMessageComponent.propDecorators = {
+        flyInOut: [{ type: i0.HostBinding, args: ['@flyInOut',] }],
+        notReply: [{ type: i0.HostBinding, args: ['class.not-reply',] }],
+        reply: [{ type: i0.Input }, { type: i0.HostBinding, args: ['class.reply',] }],
+        type: [{ type: i0.Input }],
+        message: [{ type: i0.Input }],
+        customMessageData: [{ type: i0.Input }],
+        user: [{ type: i0.Input }],
+        drChatMessageActions: [{ type: i0.ContentChild, args: ['drChatMessageActions',] }]
+    };
+
+    var DrChatSuggestionsComponent = /** @class */ (function () {
+        function DrChatSuggestionsComponent(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 i0.EventEmitter();
+        }
+        Object.defineProperty(DrChatSuggestionsComponent.prototype, "hiddenValues", {
+            get: function () {
+                return JSON.parse(localStorage.getItem('aiChatSuggestions')) || [];
+            },
+            set: function (values) {
+                localStorage.setItem('aiChatSuggestions', JSON.stringify(values));
+            },
+            enumerable: false,
+            configurable: true
+        });
+        DrChatSuggestionsComponent.prototype.ngOnInit = function () {
+            this.filterValues();
+        };
+        DrChatSuggestionsComponent.prototype.onItemClick = function (item) {
+            if (this.waitForReply) {
+                return;
+            }
+            this.isSuggestedMenuOpen = false;
+            this.suggestionSelect.emit(item);
+            this.hiddenValues = __spreadArray(__spreadArray([], __read(this.hiddenValues)), [item]);
+            this.filterValues();
+        };
+        DrChatSuggestionsComponent.prototype.filterValues = function () {
+            var hiddenValues = this.hiddenValues;
+            this._nonHiddenValues = ___namespace.filter(this.values, function (val) { return !hiddenValues.includes(val); });
+            this.fillVisibleValues();
+        };
+        DrChatSuggestionsComponent.prototype.fillVisibleValues = function () {
+            var maxItemsCount = this.fullScreen ? 6 : 4;
+            var nonHiddenValues = ___namespace.clone(this._nonHiddenValues);
+            this.visibleValues.length = 0;
+            for (var i = 0; i < maxItemsCount; i++) {
+                if (!nonHiddenValues.length) {
+                    break;
+                }
+                var randomIndex = Math.floor(Math.random() * nonHiddenValues.length);
+                var item = nonHiddenValues.splice(randomIndex, 1)[0];
+                this.visibleValues.push(item);
+            }
+            this.cdr.markForCheck();
+        };
+        DrChatSuggestionsComponent.prototype.clearHidden = function () {
+            localStorage.setItem('aiChatSuggestions', null);
+            this.filterValues();
+        };
+        DrChatSuggestionsComponent.prototype.toggleSuggestedMenu = function () {
+            this.isSuggestedMenuOpen = !this.isSuggestedMenuOpen;
+            if (this.isSuggestedMenuOpen) {
+                this.fillVisibleValues();
+            }
+            this.cdr.markForCheck();
+        };
+        return DrChatSuggestionsComponent;
+    }());
+    DrChatSuggestionsComponent.decorators = [
+        { type: i0.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: i0.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 = function () { return [
+        { type: i0.ChangeDetectorRef }
+    ]; };
+    DrChatSuggestionsComponent.propDecorators = {
+        values: [{ type: i0.Input }],
+        fullScreen: [{ type: i0.Input }],
+        buttonMode: [{ type: i0.Input }],
+        waitForReply: [{ type: i0.Input }],
+        suggestionSelect: [{ type: i0.Output }]
+    };
+
+    var DrChatComponent = /** @class */ (function () {
+        function DrChatComponent(cdr) {
+            this.cdr = cdr;
+            this.destroy$ = new rxjs.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 i0.EventEmitter();
+            this.close = new i0.EventEmitter();
+            this.suggestionSelect = new i0.EventEmitter();
+        }
+        Object.defineProperty(DrChatComponent.prototype, "contentUpdateSubject", {
+            set: function (value) {
+                var _this = this;
+                if (value) {
+                    value.pipe(operators.takeUntil(this.destroy$)).subscribe(function () {
+                        _this.updateView();
+                    });
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
+        ;
+        Object.defineProperty(DrChatComponent.prototype, "scrollBottom", {
+            /**
+             * Scroll chat to the bottom of the list when a new message arrives
+             */
+            get: function () {
+                return this._scrollBottom;
+            },
+            set: function (value) {
+                this._scrollBottom = !!value;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(DrChatComponent.prototype, "messagesContainerWithScroll", {
+            get: function () {
+                return this.messagesContainer && this.messagesContainer.nativeElement.scrollHeight > this.messagesContainer.nativeElement.offsetHeight;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        ;
+        DrChatComponent.prototype.ngAfterViewInit = function () {
+            var _this = this;
+            this.messages.changes.subscribe(function (messages) {
+                _this.messages = messages;
+                _this.updateView();
+            });
+            this.updateView();
+        };
+        DrChatComponent.prototype.updateView = function () {
+            if (this.scrollBottom) {
+                this.scrollListBottom();
+            }
+        };
+        DrChatComponent.prototype.scrollListBottom = function () {
+            var _this = this;
+            setTimeout(function () {
+                if (_this.messagesContainer) {
+                    var scrollToOptions = {
+                        top: _this.messagesContainer.nativeElement.scrollHeight,
+                    };
+                    if (!_this.reopen) {
+                        scrollToOptions.behavior = 'smooth';
+                    }
+                    _this.messagesContainer.nativeElement.scrollTo(scrollToOptions);
+                    _this.cdr.markForCheck();
+                }
+            });
+        };
+        DrChatComponent.prototype.ngOnDestroy = function () {
+            this.destroy$.next();
+            this.destroy$.complete();
+        };
+        DrChatComponent.prototype.onClearClick = function ($event) {
+            this.clear.emit($event);
+            if (this._chatSuggestions) {
+                this._chatSuggestions.clearHidden();
+            }
+        };
+        DrChatComponent.prototype.hideSuggestions = function () {
+            if (this._chatSuggestions.isSuggestedMenuOpen) {
+                this._chatSuggestions.toggleSuggestedMenu();
+            }
+        };
+        return DrChatComponent;
+    }());
+    DrChatComponent.decorators = [
+        { type: i0.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"]
+                },] }
+    ];
+    DrChatComponent.ctorParameters = function () { return [
+        { type: i0.ChangeDetectorRef }
+    ]; };
+    DrChatComponent.propDecorators = {
+        fullScreen: [{ type: i0.Input }],
+        title: [{ type: i0.Input }],
+        subtitle: [{ type: i0.Input }],
+        showClearButton: [{ type: i0.Input }],
+        noMessagesPlaceholder: [{ type: i0.Input }],
+        contentUpdateSubject: [{ type: i0.Input }],
+        scrollBottom: [{ type: i0.Input }],
+        suggestions: [{ type: i0.Input }],
+        reopen: [{ type: i0.Input }],
+        waitForReply: [{ type: i0.Input }],
+        messagesContainer: [{ type: i0.ViewChild, args: ['messagesContainer',] }],
+        messages: [{ type: i0.ContentChildren, args: [DrChatMessageComponent,] }],
+        chatForm: [{ type: i0.ContentChild, args: [DrChatFormComponent,] }],
+        clear: [{ type: i0.Output }],
+        close: [{ type: i0.Output }],
+        suggestionSelect: [{ type: i0.Output }],
+        _chatSuggestions: [{ type: i0.ViewChild, args: [DrChatSuggestionsComponent,] }]
+    };
+
+    exports.TooltipPosition = void 0;
+    (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";
+    })(exports.TooltipPosition || (exports.TooltipPosition = {}));
+
+    exports.Scenario = void 0;
+    (function (Scenario) {
+        Scenario["ACTUALS"] = "Actuals";
+        Scenario["FORECAST"] = "Forecast";
+        Scenario["BUDGET"] = "Budget";
+        Scenario["NONE"] = "None";
+    })(exports.Scenario || (exports.Scenario = {}));
+
+    var DrModelDebounceChangeDirective = /** @class */ (function () {
+        function DrModelDebounceChangeDirective(ngModel) {
+            this.ngModel = ngModel;
+            this.debounce = 200;
+            this.ngModelDebounceChange = new i0.EventEmitter();
+        }
+        DrModelDebounceChangeDirective.prototype.ngOnInit = function () {
+            var _this = this;
+            this.subscription = this.ngModel.control.valueChanges.pipe(operators.skip(1), operators.debounceTime(this.debounce), operators.distinctUntilChanged()).subscribe(function (value) { return _this.ngModelDebounceChange.emit(value); });
+        };
+        DrModelDebounceChangeDirective.prototype.ngOnDestroy = function () {
+            this.subscription.unsubscribe();
+        };
+        return DrModelDebounceChangeDirective;
+    }());
+    DrModelDebounceChangeDirective.decorators = [
+        { type: i0.Directive, args: [{
+                    selector: '[ngModelDebounceChange]'
+                },] }
+    ];
+    DrModelDebounceChangeDirective.ctorParameters = function () { return [
+        { type: forms.NgModel }
+    ]; };
+    DrModelDebounceChangeDirective.propDecorators = {
+        debounce: [{ type: i0.Input }],
+        ngModelDebounceChange: [{ type: i0.Output }]
+    };
+
+    exports.BadgeStatus = void 0;
+    (function (BadgeStatus) {
+        BadgeStatus["INFO"] = "info";
+        BadgeStatus["ERROR"] = "error";
+        BadgeStatus["WARNING"] = "warning";
+        BadgeStatus["SUCCESS"] = "success";
+        BadgeStatus["REGULAR"] = "regular";
+        BadgeStatus["PROGRESS"] = "progress";
+        BadgeStatus["DOTTED"] = "dotted";
+    })(exports.BadgeStatus || (exports.BadgeStatus = {}));
+
+    var _a;
+    var allDateTags = (_a = {},
+        _a[TagsConfigSubType.YEAR] = {
+            name: 'Date',
+            toggle: false,
+        },
+        _a[TagsConfigSubType.QUARTER] = {
+            name: 'Date',
+            toggle: false,
+        },
+        _a[TagsConfigSubType.MONTH] = {
+            name: 'Date',
+            toggle: false,
+        },
+        _a[TagsConfigSubType.DAY] = {
+            name: 'Date',
+            toggle: false,
+        },
+        _a[TagsConfigSubType.WEEK] = {
+            name: 'Date',
+            toggle: false,
+        },
+        _a);
+    function getScenarioTagDataConfig(isMultipleDimension) {
+        var _a, _b, _c, _d, _e;
+        return _a = {},
+            _a[exports.Scenario.ACTUALS] = Object.assign(Object.assign({}, allDateTags), (_b = {}, _b[TagsConfigSubType.MONTH] = {
+                name: 'Date',
+                toggle: true,
+            }, _b[TagsConfigSubType.FILE_STATUS] = {
+                toggle: false,
+            }, _b)),
+            _a[exports.Scenario.BUDGET] = (_c = {},
+                _c[TagsConfigSubType.BUDGET_CYCLE] = {
+                    toggle: true,
+                    acceptableDateTags: [TagsConfigSubType.YEAR],
+                    hidden: !isMultipleDimension,
+                },
+                _c[TagsConfigSubType.PLAN] = {
+                    toggle: false,
+                    turnOffDateTags: true,
+                    hidden: isMultipleDimension,
+                },
+                _c[TagsConfigSubType.YEAR] = {
+                    name: 'Date',
+                    toggle: true,
+                },
+                _c[TagsConfigSubType.QUARTER] = {
+                    name: 'Date',
+                    toggle: false,
+                },
+                _c[TagsConfigSubType.FILE_STATUS] = {
+                    toggle: false,
+                },
+                _c),
+            _a[exports.Scenario.FORECAST] = (_d = {},
+                _d[TagsConfigSubType.FORECAST_NEW] = {
+                    toggle: true,
+                    name: 'Date',
+                },
+                _d[TagsConfigSubType.FILE_STATUS] = {
+                    toggle: false,
+                },
+                _d),
+            _a[exports.Scenario.NONE] = Object.assign(Object.assign({}, allDateTags), (_e = {}, _e[TagsConfigSubType.MONTH] = {
+                name: 'Date',
+                toggle: true,
+            }, _e[TagsConfigSubType.FILE_STATUS] = {
+                toggle: true,
+            }, _e)),
+            _a;
+    }
+
+    var ScenarioService = /** @class */ (function () {
+        function ScenarioService() {
+            this.DEFAULT_FORECAST_DATE_TAG = 'Month';
+        }
+        Object.defineProperty(ScenarioService.prototype, "scenarios", {
+            get: function () {
+                return _.orderBy(Object.values(exports.Scenario), function (scenario) { return scenario === exports.Scenario.NONE ? 1 : 0; });
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(ScenarioService.prototype, "areExistingTagsConfig", {
+            get: function () {
+                return !!this.currentTagsConfig;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        ScenarioService.prototype.initScenarioTags = function (wholeTagsConfig, currentTagsConfig, isMultipleDimension) {
+            if (!(wholeTagsConfig === null || wholeTagsConfig === void 0 ? void 0 : wholeTagsConfig.length))
+                return;
+            this.wholeTagsConfig = _.cloneDeep(wholeTagsConfig);
+            this.currentTagsConfig = currentTagsConfig;
+            this.isMultipleDimension = isMultipleDimension;
+        };
+        ScenarioService.prototype.getTagsConfigByScenarioTags = function (scenarioTags, tagsConfig) {
+            var scenarioTagsConfig = _.filter(tagsConfig, function (tagConfig) { return _.some(scenarioTags, function (scenarioTag) { return scenarioTag.toggle && scenarioTag.selectedTagSubType === tagConfig.options.sub_type; }); });
+            return this.sortScenarioTags(scenarioTagsConfig);
+        };
+        ScenarioService.prototype.getScenarioTagsByScenario = function (scenario) {
+            var _this = this;
+            var scenarioTagsConfig = this.getScenarioTagsConfig(scenario, this.wholeTagsConfig);
+            var scenarioTagsUi = [];
+            _.forEach(scenarioTagsConfig, function (scenarioTag) {
+                var isTagWithSubTags = scenarioTag.type === exports.TagTypes.DATE;
+                var tagWithSubTags = isTagWithSubTags && _.find(scenarioTagsUi, { type: scenarioTag.type });
+                var 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);
+            }
+            var isTagNotSupportingDates = _.some(scenarioTagsUi, { turnOffDateTags: true, toggle: true });
+            if (isTagNotSupportingDates) {
+                this.turnOffDateTag(scenarioTagsUi);
+            }
+            var tagWithSpecificDateTags = _.find(scenarioTagsUi, function (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);
+        };
+        ScenarioService.prototype.sortScenarioTags = function (scenarioTagsUi) {
+            return _.orderBy(scenarioTagsUi, [
+                function (tag) { return (tag.type === exports.TagTypes.DATE ? 0 : 1); },
+                function (tag) { return (tag.name === 'File Status'); }
+            ]);
+        };
+        ScenarioService.prototype.initExistingTagsConfig = function (scenario, scenarioTagsUi) {
+            var _this = this;
+            _.forEach(this.currentTagsConfig, function (tagConfig) {
+                var _a;
+                var tagSubType = (_a = tagConfig === null || tagConfig === void 0 ? void 0 : tagConfig.options) === null || _a === void 0 ? void 0 : _a.sub_type;
+                var scenarioTagDataConfig = getScenarioTagDataConfig(_this.isMultipleDimension);
+                if (!scenarioTagDataConfig || !scenarioTagDataConfig[scenario] || !scenarioTagDataConfig[scenario][tagSubType]) {
+                    return;
+                }
+                var scenarioTagUi = tagConfig.type === exports.TagTypes.DATE
+                    ? _.find(scenarioTagsUi, { type: tagConfig.type })
+                    : _.find(scenarioTagsUi, { selectedTagSubType: tagSubType });
+                scenarioTagUi.toggle = true;
+                scenarioTagUi.selectedTagSubType = tagSubType;
+            });
+        };
+        ScenarioService.prototype.prepareScenarioTag = function (scenarioTagsConfig, scenarioTag, scenario, isDateTag) {
+            var toggleStatus = isDateTag
+                ? _.some(scenarioTagsConfig, function (tag) { return tag.type === exports.TagTypes.DATE && tag.scenarioData.toggle; })
+                : scenarioTag.scenarioData.toggle;
+            var selectedTagSubType = isDateTag
+                ? this.getScenarioSelectedDateTag(scenario, scenarioTagsConfig)
+                : scenarioTag.options.sub_type;
+            var tag = {
+                toggle: this.areExistingTagsConfig ? false : toggleStatus,
+                name: scenarioTag.scenarioData.name || scenarioTag.name,
+                description: scenarioTag.scenarioData.description || scenarioTag.description,
+                type: scenarioTag.type,
+                selectedTagSubType: selectedTagSubType,
+            };
+            if (scenarioTag.scenarioData.turnOffDateTags) {
+                tag.turnOffDateTags = scenarioTag.scenarioData.turnOffDateTags;
+            }
+            if (scenarioTag.scenarioData.acceptableDateTags) {
+                tag.acceptableDateTags = scenarioTag.scenarioData.acceptableDateTags;
+            }
+            return tag;
+        };
+        ScenarioService.prototype.sortedScenarioSubTags = function (tag) {
+            var SUB_TAGS_ORDER = [TagsConfigSubType.DAY, TagsConfigSubType.WEEK, TagsConfigSubType.MONTH, TagsConfigSubType.QUARTER, TagsConfigSubType.YEAR];
+            return _.orderBy(tag.subTags, function (subTag) { return _.indexOf(SUB_TAGS_ORDER, subTag.subType); });
+        };
+        ScenarioService.prototype.updateScenarioSubTags = function (tag, scenarioTag) {
+            if (!tag.subTags) {
+                tag.subTags = [];
+            }
+            var tagSubType = scenarioTag.options.sub_type;
+            tag.subTags.push({
+                subType: tagSubType,
+                name: tagSubType === TagsConfigSubType.FORECAST_NEW ? this.DEFAULT_FORECAST_DATE_TAG : scenarioTag.name,
+            });
+        };
+        ScenarioService.prototype.turnOffDateTag = function (scenarioTags) {
+            var dateTag = _.find(scenarioTags, { type: exports.TagTypes.DATE });
+            if (!dateTag)
+                return;
+            dateTag.toggle = false;
+        };
+        ScenarioService.prototype.hideNotAvailableTags = function (tagWithSpecificDateTags, scenarioTags) {
+            var _a;
+            var subTags = (_a = _.find(scenarioTags, { type: exports.TagTypes.DATE })) === null || _a === void 0 ? void 0 : _a.subTags;
+            if (!subTags.length)
+                return;
+            _.forEach(scenarioTags, function (tag) {
+                var _a;
+                if (!((_a = tag.acceptableDateTags) === null || _a === void 0 ? void 0 : _a.length))
+                    return;
+                if (tag !== tagWithSpecificDateTags) {
+                    tag.toggle = false;
+                }
+            });
+            _.forEach(subTags, function (subTag) {
+                subTag.hidden = !tagWithSpecificDateTags.acceptableDateTags.includes(subTag.subType);
+            });
+        };
+        ScenarioService.prototype.getScenarioSelectedDateTag = function (scenario, dateTags) {
+            var _c;
+            var _a, _b;
+            var monthSubType = (_b = (_a = _.find(dateTags, function (tag) { return tag.options.sub_type === TagsConfigSubType.MONTH; })) === null || _a === void 0 ? void 0 : _a.options) === null || _b === void 0 ? void 0 : _b.sub_type;
+            var scenarioSelectedDateTag = (_c = {},
+                _c[exports.Scenario.ACTUALS] = function () { return monthSubType; },
+                _c[exports.Scenario.BUDGET] = function () { var _a, _b; return (_b = (_a = _.find(dateTags, function (tag) { return tag.options.sub_type === TagsConfigSubType.YEAR; })) === null || _a === void 0 ? void 0 : _a.options) === null || _b === void 0 ? void 0 : _b.sub_type; },
+                _c[exports.Scenario.FORECAST] = function () { var _a, _b; return (_b = (_a = _.find(dateTags, function (tag) { return tag.options.sub_type === TagsConfigSubType.FORECAST_NEW; })) === null || _a === void 0 ? void 0 : _a.options) === null || _b === void 0 ? void 0 : _b.sub_type; },
+                _c[exports.Scenario.NONE] = function () { return monthSubType; },
+                _c);
+            if (!scenarioSelectedDateTag[scenario])
+                return;
+            return scenarioSelectedDateTag[scenario]();
+        };
+        ScenarioService.prototype.getScenarioTagsConfig = function (scenario, tagsConfig) {
+            var _this = this;
+            return _.reduce(tagsConfig, function (acc, tagConfig) {
+                var _a;
+                var tagSubType = (_a = tagConfig === null || tagConfig === void 0 ? void 0 : tagConfig.options) === null || _a === void 0 ? void 0 : _a.sub_type;
+                var scenarioTagDataConfig = getScenarioTagDataConfig(_this.isMultipleDimension);
+                var scenarioTagConfig = scenarioTagDataConfig && scenarioTagDataConfig[scenario] ?
+                    scenarioTagDataConfig[scenario][tagSubType] : null;
+                if (!scenarioTagConfig || scenarioTagConfig.hidden)
+                    return acc;
+                var clonedTagConfig = _.cloneDeep(tagConfig);
+                var scenarioTag = Object.assign(Object.assign({}, clonedTagConfig), { scenarioData: scenarioTagConfig });
+                acc.push(scenarioTag);
+                return acc;
+            }, []);
+        };
+        return ScenarioService;
+    }());
+    ScenarioService.decorators = [
+        { type: i0.Injectable }
+    ];
+
+    var DrSharedUtils = /** @class */ (function () {
+        function DrSharedUtils() {
+        }
+        /**
+         * Get timeframe (day, year, month, quarter) based on passed format
+         *
+         * @param format - date format string. Examples: MM/DD/YYYY, Q/YYYY
+         */
+        DrSharedUtils.getTimeframeByDateFormat = function (format) {
+            var defaultFrame = exports.TimeframeOption.DAY;
+            if (!format) {
+                return defaultFrame;
+            }
+            var lowerCaseFormat = format.toLowerCase();
+            switch (true) {
+                case lowerCaseFormat.includes('q'):
+                    return exports.TimeframeOption.QUARTER;
+                case lowerCaseFormat.includes('d'):
+                    return exports.TimeframeOption.DAY;
+                case lowerCaseFormat.includes('w'):
+                    return exports.TimeframeOption.WEEK;
+                case lowerCaseFormat.includes('m'):
+                    return exports.TimeframeOption.MONTH;
+                case lowerCaseFormat.includes('y'):
+                    return exports.TimeframeOption.YEAR;
+                default:
+                    return defaultFrame;
+            }
+        };
+        DrSharedUtils.getDateByTag = function (tag) {
+            var todayDate = moment__namespace().utc().endOf('day');
+            switch (tag) {
+                case exports.DateTags.TODAY:
+                    return todayDate;
+                case exports.DateTags.YESTERDAY:
+                    todayDate.subtract(1, 'days');
+                    return todayDate;
+                case exports.DateTags.THIS_MONTH:
+                    todayDate.endOf('month');
+                    return todayDate;
+                case exports.DateTags.PREV_MONTH:
+                    todayDate.subtract(1, 'months').endOf('month');
+                    return todayDate;
+            }
+        };
+        return DrSharedUtils;
+    }());
+
+    // @ts-ignore
     var moment$2 = require('moment');
     var DrDatePickerService = /** @class */ (function () {
         function DrDatePickerService() {
@@ -5367,1307 +5857,831 @@
                 this.setValueFromMoment(newValue);
             }
         };
-        /**
-        * Set inner value from timestamp and propagate
-        *
-        * @param timestamp
-        */
-        DrDatePickerWithTimeframeComponent.prototype.setValue = function (timestamp) {
-            this.datePickerService.resetPresetTag();
-            _super.prototype.setValue.call(this, timestamp);
-        };
-        DrDatePickerWithTimeframeComponent.prototype.writeValue = function (value) {
-            _super.prototype.writeValue.call(this, value);
-            if (!value)
-                return;
-            this.restrictPagination();
-        };
-        DrDatePickerWithTimeframeComponent.prototype.getNextDate = function (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);
-        };
-        DrDatePickerWithTimeframeComponent.prototype.restrictPagination = function () {
-            if (!this._min && !this._max)
-                return;
-            var nextValue = this.pagingSetup[this.datePickerService.timeframe](true);
-            var 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();
-        };
-        return DrDatePickerWithTimeframeComponent;
-    }(DrDatePickerComponent));
-    DrDatePickerWithTimeframeComponent.decorators = [
-        { type: i0.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: i0.ChangeDetectionStrategy.OnPush,
-                    providers: [
-                        { provide: forms.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 = function () { return [
-        { type: i0.ChangeDetectorRef },
-        { type: core.DateAdapter },
-        { type: DrDatePickerService }
-    ]; };
-    DrDatePickerWithTimeframeComponent.propDecorators = {
-        isDashboardClassDisplayed: [{ type: i0.HostBinding, args: ['class.dr-date-picker-on-dashboard',] }],
-        isDashboardDatepicker: [{ type: i0.Input }],
-        dateFormatConfig: [{ type: i0.Input }],
-        canSelectTimeframe: [{ type: i0.Input }],
-        availableTimeframes: [{ type: i0.Input }],
-        paginationDebounce: [{ type: i0.Input }],
-        isUsingDateTagPresets: [{ type: i0.Input }],
-        presetTag: [{ type: i0.Input }],
-        onChangeFormat: [{ type: i0.Output }],
-        onChangePresetTag: [{ type: i0.Output }]
-    };
-
-    var DrDatePickerFormatDirective = /** @class */ (function () {
-        function DrDatePickerFormatDirective(matDateFormat, ngControl) {
-            this.matDateFormat = matDateFormat;
-            this.ngControl = ngControl;
-        }
-        Object.defineProperty(DrDatePickerFormatDirective.prototype, "datePickerFormat", {
-            set: function (format) {
-                var _a;
-                if (this.configDateParse) {
-                    this.matDateFormat.updateDateFormat(this.configDateParse, this.configDateDisplay);
-                }
-                else {
-                    this.matDateFormat.updateDateFormat({ dateInput: format });
-                }
-                var value = this.ngControl.value;
-                (_a = this.ngControl.valueAccessor) === null || _a === void 0 ? void 0 : _a.writeValue(value);
-            },
-            enumerable: false,
-            configurable: true
-        });
-        return DrDatePickerFormatDirective;
-    }());
-    DrDatePickerFormatDirective.decorators = [
-        { type: i0.Directive, args: [{
-                    selector: '[drDatePickerFormat]',
-                    providers: [
-                        {
-                            provide: core.DateAdapter,
-                            useClass: materialMomentAdapter.MomentDateAdapter
-                        },
-                        {
-                            provide: core.MAT_DATE_FORMATS,
-                            useClass: CustomDateFormat
-                        }
-                    ]
-                },] }
-    ];
-    DrDatePickerFormatDirective.ctorParameters = function () { return [
-        { type: CustomDateFormat, decorators: [{ type: i0.Inject, args: [core.MAT_DATE_FORMATS,] }] },
-        { type: forms.NgControl, decorators: [{ type: i0.Optional }] }
-    ]; };
-    DrDatePickerFormatDirective.propDecorators = {
-        configDateParse: [{ type: i0.Input }],
-        configDateDisplay: [{ type: i0.Input }],
-        datePickerFormat: [{ type: i0.Input, args: ['drDatePickerFormat',] }]
-    };
-
-    var DrShowTimeframePipe = /** @class */ (function () {
-        function DrShowTimeframePipe() {
-        }
-        DrShowTimeframePipe.prototype.transform = function (arr, showOptions) {
-            return arr.filter(function (item) { return showOptions.includes(item.timeframe); });
-        };
-        return DrShowTimeframePipe;
-    }());
-    DrShowTimeframePipe.decorators = [
-        { type: i0.Pipe, args: [{
-                    name: 'drShowTimeframePipe'
-                },] }
-    ];
-
-    var DrSelectAddItemComponent = /** @class */ (function () {
-        function DrSelectAddItemComponent(drSelect) {
-            this.drSelect = drSelect;
-            this.currentValues = [];
-            this.dynamicAddLabel = 'Add new';
-            this.values = [];
-            this.dynamicValueAdded = new i0.EventEmitter();
-        }
-        Object.defineProperty(DrSelectAddItemComponent.prototype, "inputRef", {
-            set: function (input) {
-                if (!input)
-                    return;
-                input.focus();
-            },
-            enumerable: false,
-            configurable: true
-        });
-        DrSelectAddItemComponent.prototype.ngOnChanges = function (changes) {
-            this.calculateCurrentValues();
-        };
-        DrSelectAddItemComponent.prototype.ngOnInit = function () {
-            this.calculateCurrentValues();
-        };
-        DrSelectAddItemComponent.prototype.onDynamicAdding = function () {
-            this.isDynamicAdding = true;
-        };
-        DrSelectAddItemComponent.prototype.onDynamicAddingClose = function () {
-            this.isDynamicAdding = false;
-            this.dynamicValue = '';
-        };
-        DrSelectAddItemComponent.prototype.isDynamicValueValid = function () {
-            var _a;
-            var trimmedValue = (_a = this.dynamicValue) === null || _a === void 0 ? void 0 : _a.trim();
-            if (!trimmedValue)
-                return false;
-            return !this.currentValues.includes(trimmedValue);
-        };
-        DrSelectAddItemComponent.prototype.onDynamicAdd = function (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());
-        };
-        DrSelectAddItemComponent.prototype.calculateCurrentValues = function () {
-            var _this = this;
-            this.currentValues = this.bindValue
-                ? _.reduce(this.values, function (acc, curr) {
-                    acc.push(curr[_this.bindValue]);
-                    return acc;
-                }, [])
-                : this.values;
-        };
-        return DrSelectAddItemComponent;
-    }());
-    DrSelectAddItemComponent.decorators = [
-        { type: i0.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: i0.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 = function () { return [
-        { type: DrSelectComponent }
-    ]; };
-    DrSelectAddItemComponent.propDecorators = {
-        dynamicAddLabel: [{ type: i0.Input }],
-        bindValue: [{ type: i0.Input }],
-        values: [{ type: i0.Input }],
-        dynamicValueAdded: [{ type: i0.Output }],
-        inputRef: [{ type: i0.ViewChild, args: ['dynamicInputRef',] }]
-    };
-
-    var TooltipInfoComponent = /** @class */ (function () {
-        function TooltipInfoComponent() {
-        }
-        return TooltipInfoComponent;
-    }());
-    TooltipInfoComponent.decorators = [
-        { type: i0.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: i0.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 = function () { return []; };
-    TooltipInfoComponent.propDecorators = {
-        data: [{ type: i0.Input }],
-        useDescriptionAsHTML: [{ type: i0.Input }]
-    };
-
-    var TooltipInfoSimpleComponent = /** @class */ (function () {
-        function TooltipInfoSimpleComponent() {
-        }
-        return TooltipInfoSimpleComponent;
-    }());
-    TooltipInfoSimpleComponent.decorators = [
-        { type: i0.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: i0.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 = function () { return []; };
-    TooltipInfoSimpleComponent.propDecorators = {
-        context: [{ type: i0.Input }]
-    };
-
-    var TooltipNoBodyComponent = /** @class */ (function () {
-        function TooltipNoBodyComponent() {
-        }
-        TooltipNoBodyComponent.prototype.ngOnInit = function () {
-        };
-        return TooltipNoBodyComponent;
-    }());
-    TooltipNoBodyComponent.decorators = [
-        { type: i0.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: i0.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 = function () { return []; };
-    TooltipNoBodyComponent.propDecorators = {
-        context: [{ type: i0.Input }]
-    };
-
-    var TooltipProcessDefaultComponent = /** @class */ (function () {
-        function TooltipProcessDefaultComponent() {
-        }
-        return TooltipProcessDefaultComponent;
-    }());
-    TooltipProcessDefaultComponent.decorators = [
+        /**
+        * Set inner value from timestamp and propagate
+        *
+        * @param timestamp
+        */
+        DrDatePickerWithTimeframeComponent.prototype.setValue = function (timestamp) {
+            this.datePickerService.resetPresetTag();
+            _super.prototype.setValue.call(this, timestamp);
+        };
+        DrDatePickerWithTimeframeComponent.prototype.writeValue = function (value) {
+            _super.prototype.writeValue.call(this, value);
+            if (!value)
+                return;
+            this.restrictPagination();
+        };
+        DrDatePickerWithTimeframeComponent.prototype.getNextDate = function (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);
+        };
+        DrDatePickerWithTimeframeComponent.prototype.restrictPagination = function () {
+            if (!this._min && !this._max)
+                return;
+            var nextValue = this.pagingSetup[this.datePickerService.timeframe](true);
+            var 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();
+        };
+        return DrDatePickerWithTimeframeComponent;
+    }(DrDatePickerComponent));
+    DrDatePickerWithTimeframeComponent.decorators = [
         { type: i0.Component, args: [{
-                    selector: 'dr-tooltip-process-default',
-                    template: "\n        <div class=\"container\" [innerHTML]=\"text\"></div>\n    ",
+                    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: i0.ChangeDetectionStrategy.OnPush,
-                    styles: ["\n        .container {\n            width: auto;\n            max-width: 388px;\n            text-align: start;\n            font-size: 14px;\n            line-height: 22px;\n            padding: 10px 12px;\n            color: #151B3F;\n            background-color: #FFF;\n            border-radius: 8px;\n            box-shadow: 0px 4px 8px 1px rgba(0, 0, 0, 0.25);\n            border: 1px solid #C3C4CE;\n        }\n    "]
-                },] }
-    ];
-    TooltipProcessDefaultComponent.ctorParameters = function () { return []; };
-    TooltipProcessDefaultComponent.propDecorators = {
-        text: [{ type: i0.Input }]
-    };
-
-    var TOOLTIP_COMPONENTS = [
-        TooltipInfoComponent,
-        TooltipInfoSimpleComponent,
-        TooltipNoBodyComponent,
-        TooltipProcessDefaultComponent
-    ];
-    var DrTooltipModule = /** @class */ (function () {
-        function DrTooltipModule() {
-        }
-        return DrTooltipModule;
-    }());
-    DrTooltipModule.decorators = [
-        { type: i0.NgModule, args: [{
-                    imports: [
-                        common.CommonModule
+                    providers: [
+                        { provide: forms.NG_VALUE_ACCESSOR, useExisting: DrDatePickerWithTimeframeComponent, multi: true },
+                        { provide: DrDatePickerService }
                     ],
-                    exports: __spreadArray([
-                        TooltipComponent,
-                        DrTooltipDirective
-                    ], __read(TOOLTIP_COMPONENTS)),
-                    providers: [],
-                    declarations: __spreadArray([
-                        TooltipComponent,
-                        DrTooltipDirective
-                    ], __read(TOOLTIP_COMPONENTS)),
+                    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"]
                 },] }
     ];
-
-    // !!! Please do not use such approach in other places
-    // Hard fix for 'none' calendar view selection
-    datepicker.MatCalendar.prototype.focusActiveCell = function () {
-        var _a;
-        (_a = this._getCurrentViewComponent()) === null || _a === void 0 ? void 0 : _a._focusActiveCell(false);
+    DrDatePickerWithTimeframeComponent.ctorParameters = function () { return [
+        { type: i0.ChangeDetectorRef },
+        { type: core.DateAdapter },
+        { type: DrDatePickerService }
+    ]; };
+    DrDatePickerWithTimeframeComponent.propDecorators = {
+        isDashboardClassDisplayed: [{ type: i0.HostBinding, args: ['class.dr-date-picker-on-dashboard',] }],
+        isDashboardDatepicker: [{ type: i0.Input }],
+        dateFormatConfig: [{ type: i0.Input }],
+        canSelectTimeframe: [{ type: i0.Input }],
+        availableTimeframes: [{ type: i0.Input }],
+        paginationDebounce: [{ type: i0.Input }],
+        isUsingDateTagPresets: [{ type: i0.Input }],
+        presetTag: [{ type: i0.Input }],
+        onChangeFormat: [{ type: i0.Output }],
+        onChangePresetTag: [{ type: i0.Output }]
     };
-    var components$3 = [
-        DrButtonComponent,
-        RadioButtonComponent,
-        RadioGroupComponent,
-        CheckboxComponent,
-        DrInputComponent,
-        DrSelectComponent,
-        DrToggleComponent,
-        DrToggleButtonComponent,
-        DrDatePickerComponent,
-        DrDatePickerWithTimeframeComponent,
-        DrDatePickerFormatDirective,
-        DrDatePickerCustomHeaderComponent,
-        DrModelDebounceChangeDirective,
-        DrShowTimeframePipe,
-        DrSelectAddItemComponent
-    ];
-    var DrInputsModule = /** @class */ (function () {
-        function DrInputsModule() {
-        }
-        return DrInputsModule;
-    }());
-    DrInputsModule.decorators = [
-        { type: i0.NgModule, args: [{
-                    declarations: components$3,
-                    exports: components$3,
-                    imports: [
-                        forms.FormsModule,
-                        forms.ReactiveFormsModule,
-                        common.CommonModule,
-                        ngSelect.NgSelectModule,
-                        core.MatNativeDateModule,
-                        datepicker.MatDatepickerModule,
-                        tooltip.MatTooltipModule,
-                        DrTooltipModule
-                    ],
-                    entryComponents: [DrDatePickerCustomHeaderComponent]
-                },] }
-    ];
 
-    var components$2 = [DateTagComponent,
-        DayTagComponent,
-        WeekTagComponent,
-        MonthTagComponent,
-        QuarterTagComponent,
-        AnyTagComponent,
-        YearTagComponent,
-        ForecastTagComponent];
-    var DateTagModule = /** @class */ (function () {
-        function DateTagModule() {
+    var DrDatePickerFormatDirective = /** @class */ (function () {
+        function DrDatePickerFormatDirective(matDateFormat, ngControl) {
+            this.matDateFormat = matDateFormat;
+            this.ngControl = ngControl;
         }
-        return DateTagModule;
+        Object.defineProperty(DrDatePickerFormatDirective.prototype, "datePickerFormat", {
+            set: function (format) {
+                var _a;
+                if (this.configDateParse) {
+                    this.matDateFormat.updateDateFormat(this.configDateParse, this.configDateDisplay);
+                }
+                else {
+                    this.matDateFormat.updateDateFormat({ dateInput: format });
+                }
+                var value = this.ngControl.value;
+                (_a = this.ngControl.valueAccessor) === null || _a === void 0 ? void 0 : _a.writeValue(value);
+            },
+            enumerable: false,
+            configurable: true
+        });
+        return DrDatePickerFormatDirective;
     }());
-    DateTagModule.decorators = [
-        { type: i0.NgModule, args: [{
-                    imports: [
-                        common.CommonModule,
-                        forms.FormsModule,
-                        forms.ReactiveFormsModule,
-                        DrInputsModule,
-                        ngSelect.NgSelectModule
-                    ],
-                    exports: components$2,
-                    declarations: components$2,
+    DrDatePickerFormatDirective.decorators = [
+        { type: i0.Directive, args: [{
+                    selector: '[drDatePickerFormat]',
+                    providers: [
+                        {
+                            provide: core.DateAdapter,
+                            useClass: materialMomentAdapter.MomentDateAdapter
+                        },
+                        {
+                            provide: core.MAT_DATE_FORMATS,
+                            useClass: CustomDateFormat
+                        }
+                    ]
                 },] }
     ];
+    DrDatePickerFormatDirective.ctorParameters = function () { return [
+        { type: CustomDateFormat, decorators: [{ type: i0.Inject, args: [core.MAT_DATE_FORMATS,] }] },
+        { type: forms.NgControl, decorators: [{ type: i0.Optional }] }
+    ]; };
+    DrDatePickerFormatDirective.propDecorators = {
+        configDateParse: [{ type: i0.Input }],
+        configDateDisplay: [{ type: i0.Input }],
+        datePickerFormat: [{ type: i0.Input, args: ['drDatePickerFormat',] }]
+    };
 
-    var ListTagModule = /** @class */ (function () {
-        function ListTagModule() {
+    var DrShowTimeframePipe = /** @class */ (function () {
+        function DrShowTimeframePipe() {
         }
-        return ListTagModule;
+        DrShowTimeframePipe.prototype.transform = function (arr, showOptions) {
+            return arr.filter(function (item) { return showOptions.includes(item.timeframe); });
+        };
+        return DrShowTimeframePipe;
     }());
-    ListTagModule.decorators = [
-        { type: i0.NgModule, args: [{
-                    imports: [
-                        common.CommonModule,
-                        forms.FormsModule,
-                        forms.ReactiveFormsModule,
-                        DrInputsModule,
-                    ],
-                    exports: [ListTagComponent],
-                    providers: [],
-                    declarations: [
-                        ListTagComponent
-                    ],
+    DrShowTimeframePipe.decorators = [
+        { type: i0.Pipe, args: [{
+                    name: 'drShowTimeframePipe'
                 },] }
     ];
 
-    var DrDynamicTagComponent = /** @class */ (function () {
-        function DrDynamicTagComponent() {
-            this.lockedTags = [];
-            this.tagChange = new i0.EventEmitter();
-            this.tagAdd = new i0.EventEmitter();
-        }
-        Object.defineProperty(DrDynamicTagComponent.prototype, "isPrimitiveDataSource", {
-            get: function () {
-                var values = Object.values(this.values) || [];
-                return !_.isObject(values[0]);
+    var DrSelectAddItemComponent = /** @class */ (function () {
+        function DrSelectAddItemComponent(drSelect) {
+            this.drSelect = drSelect;
+            this.currentValues = [];
+            this.dynamicAddLabel = 'Add new';
+            this.values = [];
+            this.dynamicValueAdded = new i0.EventEmitter();
+        }
+        Object.defineProperty(DrSelectAddItemComponent.prototype, "inputRef", {
+            set: function (input) {
+                if (!input)
+                    return;
+                input.focus();
             },
             enumerable: false,
             configurable: true
         });
-        DrDynamicTagComponent.prototype.ngOnChanges = function (changes) {
-            this.updateDynamicTagValues();
+        DrSelectAddItemComponent.prototype.ngOnChanges = function (changes) {
+            this.calculateCurrentValues();
         };
-        DrDynamicTagComponent.prototype.onTagChanged = function ($event) {
-            var _a, _b;
-            var 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);
+        DrSelectAddItemComponent.prototype.ngOnInit = function () {
+            this.calculateCurrentValues();
         };
-        DrDynamicTagComponent.prototype.onOptionClick = function ($event, tagValue) {
-            if (this.lockedTags.includes(tagValue)) {
-                $event.stopImmediatePropagation();
-            }
+        DrSelectAddItemComponent.prototype.onDynamicAdding = function () {
+            this.isDynamicAdding = true;
         };
-        DrDynamicTagComponent.prototype.onDynamicValueAdd = function ($event) {
-            var parentValueKey = this.getParentValueKey();
-            var parentValues = this.values[parentValueKey] || [];
-            if (this.isPrimitiveDataSource) {
-                this.values[parentValueKey] = __spreadArray([$event], __read(parentValues));
-            }
-            else {
-                this.values[parentValueKey] = __spreadArray([{ value: $event }], __read(parentValues));
-            }
-            this.selectedDynamicTag = $event;
-            this.currentValues = this.values[parentValueKey];
-            this.onTagChanged($event);
-            this.tagAdd.emit($event);
+        DrSelectAddItemComponent.prototype.onDynamicAddingClose = function () {
+            this.isDynamicAdding = false;
+            this.dynamicValue = '';
         };
-        DrDynamicTagComponent.prototype.updateDynamicTagValues = function () {
+        DrSelectAddItemComponent.prototype.isDynamicValueValid = function () {
             var _a;
-            var 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);
-        };
-        DrDynamicTagComponent.prototype.getSelectedDynamicTag = function (currentValues, selectedValue) {
-            if (!(currentValues === null || currentValues === void 0 ? void 0 : currentValues.length))
-                return null;
-            if (_.isObject(currentValues[0])) {
-                var valueFromConfig_1 = _.find(currentValues, { value: selectedValue });
-                var favoriteValue = _.find(currentValues, { is_favorite: true });
-                return (valueFromConfig_1 || favoriteValue || currentValues[0]).value;
-            }
-            var valueFromConfig = _.find(currentValues, function (value) { return value === selectedValue; });
-            return (valueFromConfig || currentValues[0]);
+            var trimmedValue = (_a = this.dynamicValue) === null || _a === void 0 ? void 0 : _a.trim();
+            if (!trimmedValue)
+                return false;
+            return !this.currentValues.includes(trimmedValue);
         };
-        DrDynamicTagComponent.prototype.getParentValueKey = function () {
-            return _.map(this.connectedTags, this.tryToParseParentValue).join('__');
+        DrSelectAddItemComponent.prototype.onDynamicAdd = function (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());
         };
-        DrDynamicTagComponent.prototype.tryToParseParentValue = function (connectedTags) {
-            if (_.isNumber(connectedTags.value)) {
-                var momentData = moment__namespace.unix(connectedTags.value);
-                var convertedParentValue = momentData.get('year'); // TODO: add input prop (selectedTimeDimension) or Format
-                if (momentData.isValid() && convertedParentValue) {
-                    return convertedParentValue;
-                }
-            }
-            return connectedTags.value;
+        DrSelectAddItemComponent.prototype.calculateCurrentValues = function () {
+            var _this = this;
+            this.currentValues = this.bindValue
+                ? _.reduce(this.values, function (acc, curr) {
+                    acc.push(curr[_this.bindValue]);
+                    return acc;
+                }, [])
+                : this.values;
         };
-        return DrDynamicTagComponent;
+        return DrSelectAddItemComponent;
     }());
-    DrDynamicTagComponent.decorators = [
+    DrSelectAddItemComponent.decorators = [
         { type: i0.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"]
+                    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: i0.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"]
                 },] }
     ];
-    DrDynamicTagComponent.propDecorators = {
+    DrSelectAddItemComponent.ctorParameters = function () { return [
+        { type: DrSelectComponent }
+    ]; };
+    DrSelectAddItemComponent.propDecorators = {
+        dynamicAddLabel: [{ type: i0.Input }],
+        bindValue: [{ type: i0.Input }],
         values: [{ type: i0.Input }],
-        tagConfig: [{ type: i0.Input }],
-        selectedTag: [{ type: i0.Input }],
-        lockedTags: [{ type: i0.Input }],
-        connectedTags: [{ type: i0.Input }],
-        isDynamicTagAddEnabled: [{ type: i0.Input }],
-        disabled: [{ type: i0.Input }],
-        tagChange: [{ type: i0.Output }],
-        tagAdd: [{ type: i0.Output }]
+        dynamicValueAdded: [{ type: i0.Output }],
+        inputRef: [{ type: i0.ViewChild, args: ['dynamicInputRef',] }]
     };
 
-    var DrDynamicTagModule = /** @class */ (function () {
-        function DrDynamicTagModule() {
+    var TooltipInfoComponent = /** @class */ (function () {
+        function TooltipInfoComponent() {
         }
-        return DrDynamicTagModule;
+        return TooltipInfoComponent;
     }());
-    DrDynamicTagModule.decorators = [
-        { type: i0.NgModule, args: [{
-                    declarations: [DrDynamicTagComponent],
-                    imports: [
-                        common.CommonModule,
-                        DrInputsModule,
-                        forms.FormsModule,
-                    ],
-                    exports: [DrDynamicTagComponent]
+    TooltipInfoComponent.decorators = [
+        { type: i0.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: i0.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 = function () { return []; };
+    TooltipInfoComponent.propDecorators = {
+        data: [{ type: i0.Input }],
+        useDescriptionAsHTML: [{ type: i0.Input }]
+    };
 
-    var DrTagModule = /** @class */ (function () {
-        function DrTagModule() {
+    var TooltipInfoSimpleComponent = /** @class */ (function () {
+        function TooltipInfoSimpleComponent() {
         }
-        return DrTagModule;
+        return TooltipInfoSimpleComponent;
     }());
-    DrTagModule.decorators = [
-        { type: i0.NgModule, args: [{
-                    imports: [
-                        common.CommonModule,
-                        DateTagModule,
-                        ListTagModule,
-                        DrDynamicTagModule
-                    ],
-                    exports: [DrTagComponent],
-                    providers: [],
-                    declarations: [
-                        DrTagComponent
-                    ],
+    TooltipInfoSimpleComponent.decorators = [
+        { type: i0.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: i0.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 = function () { return []; };
+    TooltipInfoSimpleComponent.propDecorators = {
+        context: [{ type: i0.Input }]
+    };
 
-    var DrAvatarModule = /** @class */ (function () {
-        function DrAvatarModule() {
+    var TooltipNoBodyComponent = /** @class */ (function () {
+        function TooltipNoBodyComponent() {
         }
-        return DrAvatarModule;
+        TooltipNoBodyComponent.prototype.ngOnInit = function () {
+        };
+        return TooltipNoBodyComponent;
     }());
-    DrAvatarModule.decorators = [
-        { type: i0.NgModule, args: [{
-                    declarations: [
-                        DrAvatarComponent,
-                        DrAvatarPipe
-                    ],
-                    exports: [
-                        DrAvatarComponent,
-                        DrAvatarPipe
-                    ],
-                    imports: [
-                        tooltip.MatTooltipModule,
-                        DrTooltipModule,
-                        common.CommonModule
-                    ]
+    TooltipNoBodyComponent.decorators = [
+        { type: i0.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: i0.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 = function () { return []; };
+    TooltipNoBodyComponent.propDecorators = {
+        context: [{ type: i0.Input }]
+    };
 
-    var components$1 = [DrSpinnerComponent];
-    var directives = [DrSpinnerDirective];
-    var DrSpinnerModule = /** @class */ (function () {
-        function DrSpinnerModule() {
+    var TooltipProcessDefaultComponent = /** @class */ (function () {
+        function TooltipProcessDefaultComponent() {
         }
-        return DrSpinnerModule;
+        return TooltipProcessDefaultComponent;
     }());
-    DrSpinnerModule.decorators = [
-        { type: i0.NgModule, args: [{
-                    imports: [
-                        common.CommonModule,
-                    ],
-                    exports: __spreadArray(__spreadArray([], __read(components$1)), __read(directives)),
-                    declarations: __spreadArray(__spreadArray([], __read(components$1)), __read(directives))
+    TooltipProcessDefaultComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'dr-tooltip-process-default',
+                    template: "\n        <div class=\"container\" [innerHTML]=\"text\"></div>\n    ",
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    styles: ["\n        .container {\n            width: auto;\n            max-width: 388px;\n            text-align: start;\n            font-size: 14px;\n            line-height: 22px;\n            padding: 10px 12px;\n            color: #151B3F;\n            background-color: #FFF;\n            border-radius: 8px;\n            box-shadow: 0px 4px 8px 1px rgba(0, 0, 0, 0.25);\n            border: 1px solid #C3C4CE;\n        }\n    "]
                 },] }
     ];
+    TooltipProcessDefaultComponent.ctorParameters = function () { return []; };
+    TooltipProcessDefaultComponent.propDecorators = {
+        text: [{ type: i0.Input }]
+    };
 
-    var DrPopoverModule = /** @class */ (function () {
-        function DrPopoverModule() {
+    var TOOLTIP_COMPONENTS = [
+        TooltipInfoComponent,
+        TooltipInfoSimpleComponent,
+        TooltipNoBodyComponent,
+        TooltipProcessDefaultComponent
+    ];
+    var DrTooltipModule = /** @class */ (function () {
+        function DrTooltipModule() {
         }
-        return DrPopoverModule;
+        return DrTooltipModule;
     }());
-    DrPopoverModule.decorators = [
+    DrTooltipModule.decorators = [
         { type: i0.NgModule, args: [{
                     imports: [
-                        common.CommonModule,
-                    ],
-                    exports: [
-                        DrPopoverDirective,
-                        DrPopoverComponent,
+                        common.CommonModule
                     ],
+                    exports: __spreadArray([
+                        TooltipComponent,
+                        DrTooltipDirective
+                    ], __read(TOOLTIP_COMPONENTS)),
                     providers: [],
-                    declarations: [
-                        DrPopoverDirective,
-                        DrPopoverComponent,
-                    ],
+                    declarations: __spreadArray([
+                        TooltipComponent,
+                        DrTooltipDirective
+                    ], __read(TOOLTIP_COMPONENTS)),
                 },] }
     ];
 
-    var DrDropdownModule = /** @class */ (function () {
-        function DrDropdownModule() {
+    // !!! Please do not use such approach in other places
+    // Hard fix for 'none' calendar view selection
+    datepicker.MatCalendar.prototype.focusActiveCell = function () {
+        var _a;
+        (_a = this._getCurrentViewComponent()) === null || _a === void 0 ? void 0 : _a._focusActiveCell(false);
+    };
+    var components$3 = [
+        DrButtonComponent,
+        RadioButtonComponent,
+        RadioGroupComponent,
+        CheckboxComponent,
+        DrInputComponent,
+        DrSelectComponent,
+        DrToggleComponent,
+        DrToggleButtonComponent,
+        DrDatePickerComponent,
+        DrDatePickerWithTimeframeComponent,
+        DrDatePickerFormatDirective,
+        DrDatePickerCustomHeaderComponent,
+        DrModelDebounceChangeDirective,
+        DrShowTimeframePipe,
+        DrSelectAddItemComponent
+    ];
+    var DrInputsModule = /** @class */ (function () {
+        function DrInputsModule() {
         }
-        return DrDropdownModule;
+        return DrInputsModule;
     }());
-    DrDropdownModule.decorators = [
+    DrInputsModule.decorators = [
         { type: i0.NgModule, args: [{
+                    declarations: components$3,
+                    exports: components$3,
                     imports: [
+                        forms.FormsModule,
+                        forms.ReactiveFormsModule,
                         common.CommonModule,
-                        DrTooltipModule,
-                    ],
-                    declarations: [
-                        DrDropdownDirective,
-                        DrDropdownPositionDirective,
-                        DrDropdownComponent,
-                        DrDropdownItemShowPipe,
-                    ],
-                    exports: [
-                        DrDropdownDirective,
-                        DrDropdownPositionDirective,
-                        DrDropdownComponent,
-                        DrDropdownItemShowPipe,
-                    ],
-                    providers: [
-                        DrDropdownService,
+                        ngSelect.NgSelectModule,
+                        core.MatNativeDateModule,
+                        datepicker.MatDatepickerModule,
+                        tooltip.MatTooltipModule,
+                        DrTooltipModule
                     ],
+                    entryComponents: [DrDatePickerCustomHeaderComponent]
                 },] }
     ];
 
-    var DrTabsModule = /** @class */ (function () {
-        function DrTabsModule() {
+    var components$2 = [DateTagComponent,
+        DayTagComponent,
+        WeekTagComponent,
+        MonthTagComponent,
+        QuarterTagComponent,
+        AnyTagComponent,
+        YearTagComponent,
+        ForecastTagComponent];
+    var DateTagModule = /** @class */ (function () {
+        function DateTagModule() {
         }
-        return DrTabsModule;
+        return DateTagModule;
     }());
-    DrTabsModule.decorators = [
+    DateTagModule.decorators = [
         { type: i0.NgModule, args: [{
                     imports: [
                         common.CommonModule,
-                        tabs.MatTabsModule,
                         forms.FormsModule,
                         forms.ReactiveFormsModule,
                         DrInputsModule,
-                        DrTooltipModule
-                    ],
-                    exports: [
-                        DrTabsComponent,
-                        DrTabComponent
-                    ],
-                    providers: [],
-                    declarations: [
-                        DrTabsComponent,
-                        DrTabComponent
+                        ngSelect.NgSelectModule
                     ],
+                    exports: components$2,
+                    declarations: components$2,
                 },] }
     ];
 
-    var DR_ACCORDION_COMPONENTS = [
-        DrAccordionComponent,
-        DrAccordionItemComponent,
-        DrAccordionItemHeaderComponent,
-        DrAccordionItemBodyComponent,
-    ];
-    var DrAccordionModule = /** @class */ (function () {
-        function DrAccordionModule() {
-        }
-        return DrAccordionModule;
-    }());
-    DrAccordionModule.decorators = [
-        { type: i0.NgModule, args: [{
-                    imports: [common.CommonModule],
-                    exports: __spreadArray([], __read(DR_ACCORDION_COMPONENTS)),
-                    declarations: __spreadArray([], __read(DR_ACCORDION_COMPONENTS)),
-                    providers: [],
-                },] }
-    ];
-
-    var components = [
-        DrLayoutComponent,
-        DrLayoutHeaderComponent,
-        DrLayoutBodyComponent
-    ];
-    var DrLayoutModule = /** @class */ (function () {
-        function DrLayoutModule() {
-        }
-        return DrLayoutModule;
-    }());
-    DrLayoutModule.decorators = [
-        { type: i0.NgModule, args: [{
-                    imports: [common.CommonModule],
-                    exports: __spreadArray([], __read(components)),
-                    declarations: __spreadArray([], __read(components)),
-                },] }
-    ];
-
-    var DrErrorModule = /** @class */ (function () {
-        function DrErrorModule() {
+    var ListTagModule = /** @class */ (function () {
+        function ListTagModule() {
         }
-        return DrErrorModule;
+        return ListTagModule;
     }());
-    DrErrorModule.decorators = [
+    ListTagModule.decorators = [
         { type: i0.NgModule, args: [{
                     imports: [
                         common.CommonModule,
                         forms.FormsModule,
-                        DrTooltipModule
+                        forms.ReactiveFormsModule,
+                        DrInputsModule,
                     ],
-                    exports: [DrErrorComponent],
+                    exports: [ListTagComponent],
                     providers: [],
                     declarations: [
-                        DrErrorComponent
+                        ListTagComponent
                     ],
                 },] }
     ];
 
-    var StepperComponent = /** @class */ (function () {
-        function StepperComponent() {
-            this.withoutConnectors = false;
-            this.hiddenNames = false;
-            this.inlineLabels = false;
-            this.disabled = false;
-            this.hiddenIndex = false;
-            this.stepChange = new i0.EventEmitter();
+    var DrDynamicTagComponent = /** @class */ (function () {
+        function DrDynamicTagComponent() {
+            this.lockedTags = [];
+            this.tagChange = new i0.EventEmitter();
+            this.tagAdd = new i0.EventEmitter();
         }
-        StepperComponent.prototype.selectStep = function (step) {
-            if (step !== this.currentStep && !this.disabled) {
-                this.stepChange.emit(step);
+        Object.defineProperty(DrDynamicTagComponent.prototype, "isPrimitiveDataSource", {
+            get: function () {
+                var values = Object.values(this.values) || [];
+                return !_.isObject(values[0]);
+            },
+            enumerable: false,
+            configurable: true
+        });
+        DrDynamicTagComponent.prototype.ngOnChanges = function (changes) {
+            this.updateDynamicTagValues();
+        };
+        DrDynamicTagComponent.prototype.onTagChanged = function ($event) {
+            var _a, _b;
+            var 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);
         };
-        StepperComponent.prototype.getWidth = function (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%';
+        DrDynamicTagComponent.prototype.onOptionClick = function ($event, tagValue) {
+            if (this.lockedTags.includes(tagValue)) {
+                $event.stopImmediatePropagation();
+            }
         };
-        StepperComponent.prototype.scrollLeft = function () {
-            this.stepper.nativeElement.scrollLeft -= 80;
+        DrDynamicTagComponent.prototype.onDynamicValueAdd = function ($event) {
+            var parentValueKey = this.getParentValueKey();
+            var parentValues = this.values[parentValueKey] || [];
+            if (this.isPrimitiveDataSource) {
+                this.values[parentValueKey] = __spreadArray([$event], __read(parentValues));
+            }
+            else {
+                this.values[parentValueKey] = __spreadArray([{ value: $event }], __read(parentValues));
+            }
+            this.selectedDynamicTag = $event;
+            this.currentValues = this.values[parentValueKey];
+            this.onTagChanged($event);
+            this.tagAdd.emit($event);
         };
-        StepperComponent.prototype.scrollRight = function () {
-            this.stepper.nativeElement.scrollLeft += 80;
+        DrDynamicTagComponent.prototype.updateDynamicTagValues = function () {
+            var _a;
+            var 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);
         };
-        StepperComponent.prototype.roundWidth = function (width) {
-            return Math.round(width);
+        DrDynamicTagComponent.prototype.getSelectedDynamicTag = function (currentValues, selectedValue) {
+            if (!(currentValues === null || currentValues === void 0 ? void 0 : currentValues.length))
+                return null;
+            if (_.isObject(currentValues[0])) {
+                var valueFromConfig_1 = _.find(currentValues, { value: selectedValue });
+                var favoriteValue = _.find(currentValues, { is_favorite: true });
+                return (valueFromConfig_1 || favoriteValue || currentValues[0]).value;
+            }
+            var valueFromConfig = _.find(currentValues, function (value) { return value === selectedValue; });
+            return (valueFromConfig || currentValues[0]);
+        };
+        DrDynamicTagComponent.prototype.getParentValueKey = function () {
+            return _.map(this.connectedTags, this.tryToParseParentValue).join('__');
+        };
+        DrDynamicTagComponent.prototype.tryToParseParentValue = function (connectedTags) {
+            if (_.isNumber(connectedTags.value)) {
+                var momentData = moment__namespace.unix(connectedTags.value);
+                var convertedParentValue = momentData.get('year'); // TODO: add input prop (selectedTimeDimension) or Format
+                if (momentData.isValid() && convertedParentValue) {
+                    return convertedParentValue;
+                }
+            }
+            return connectedTags.value;
         };
-        return StepperComponent;
+        return DrDynamicTagComponent;
     }());
-    StepperComponent.decorators = [
+    DrDynamicTagComponent.decorators = [
         { type: i0.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: i0.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"]
+                    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"]
                 },] }
     ];
-    StepperComponent.ctorParameters = function () { return []; };
-    StepperComponent.propDecorators = {
-        steps: [{ type: i0.Input }],
-        currentStep: [{ type: i0.Input }],
-        withoutConnectors: [{ type: i0.Input }],
-        hiddenNames: [{ type: i0.Input }],
-        inlineLabels: [{ type: i0.Input }],
+    DrDynamicTagComponent.propDecorators = {
+        values: [{ type: i0.Input }],
+        tagConfig: [{ type: i0.Input }],
+        selectedTag: [{ type: i0.Input }],
+        lockedTags: [{ type: i0.Input }],
+        connectedTags: [{ type: i0.Input }],
+        isDynamicTagAddEnabled: [{ type: i0.Input }],
         disabled: [{ type: i0.Input }],
-        hiddenIndex: [{ type: i0.Input }],
-        stepChange: [{ type: i0.Output }],
-        stepper: [{ type: i0.ViewChild, args: ['stepper', { read: i0.ElementRef },] }]
+        tagChange: [{ type: i0.Output }],
+        tagAdd: [{ type: i0.Output }]
     };
 
-    var DrStepperModule = /** @class */ (function () {
-        function DrStepperModule() {
+    var DrDynamicTagModule = /** @class */ (function () {
+        function DrDynamicTagModule() {
         }
-        return DrStepperModule;
+        return DrDynamicTagModule;
     }());
-    DrStepperModule.decorators = [
+    DrDynamicTagModule.decorators = [
         { type: i0.NgModule, args: [{
-                    declarations: [StepperComponent],
+                    declarations: [DrDynamicTagComponent],
                     imports: [
                         common.CommonModule,
-                        DrTooltipModule
+                        DrInputsModule,
+                        forms.FormsModule,
                     ],
-                    exports: [StepperComponent]
+                    exports: [DrDynamicTagComponent]
                 },] }
     ];
 
-    var DrDetailsListModule = /** @class */ (function () {
-        function DrDetailsListModule() {
+    var DrTagModule = /** @class */ (function () {
+        function DrTagModule() {
         }
-        return DrDetailsListModule;
+        return DrTagModule;
     }());
-    DrDetailsListModule.decorators = [
+    DrTagModule.decorators = [
         { type: i0.NgModule, args: [{
                     imports: [
                         common.CommonModule,
+                        DateTagModule,
+                        ListTagModule,
+                        DrDynamicTagModule
                     ],
-                    exports: [DrDetailsListComponent],
+                    exports: [DrTagComponent],
                     providers: [],
-                    declarations: [DrDetailsListComponent],
+                    declarations: [
+                        DrTagComponent
+                    ],
                 },] }
     ];
 
-    var ɵ0$1 = {}, ɵ1 = {};
-    var DrDialogModule = /** @class */ (function () {
-        function DrDialogModule() {
+    var DrAvatarModule = /** @class */ (function () {
+        function DrAvatarModule() {
         }
-        return DrDialogModule;
+        return DrAvatarModule;
     }());
-    DrDialogModule.decorators = [
+    DrAvatarModule.decorators = [
         { type: i0.NgModule, args: [{
-                    declarations: [DialogWrapperComponent, DialogModalWrapperComponent],
+                    declarations: [
+                        DrAvatarComponent,
+                        DrAvatarPipe
+                    ],
+                    exports: [
+                        DrAvatarComponent,
+                        DrAvatarPipe
+                    ],
                     imports: [
-                        common.CommonModule,
-                        i1$1.MatDialogModule,
-                        DrInputsModule,
-                        forms.ReactiveFormsModule,
+                        tooltip.MatTooltipModule,
                         DrTooltipModule,
-                        DrDetailsListModule
-                    ],
-                    exports: [DialogWrapperComponent, DialogModalWrapperComponent],
-                    providers: [
-                        { provide: i1$1.MatDialogRef, useValue: ɵ0$1 },
-                        { provide: i1$1.MAT_DIALOG_DATA, useValue: ɵ1 },
-                        DialogService
+                        common.CommonModule
                     ]
                 },] }
     ];
 
-    var DrChatFormComponent = /** @class */ (function () {
-        function DrChatFormComponent(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 i0.EventEmitter();
-            this.abort = new i0.EventEmitter();
-            /**
-             * Emits when message input value has been changed
-             *
-             * @type {EventEmitter<string>}
-             */
-            this.inputChange = new i0.EventEmitter();
-            this.fileOver = false;
+    var components$1 = [DrSpinnerComponent];
+    var directives = [DrSpinnerDirective];
+    var DrSpinnerModule = /** @class */ (function () {
+        function DrSpinnerModule() {
         }
-        DrChatFormComponent.prototype.onDrop = function (event) {
-            var e_1, _b;
-            var _this = this;
-            var _a;
-            if (this.dropFiles) {
-                event.preventDefault();
-                event.stopPropagation();
-                this.fileOver = false;
-                if ((_a = event.dataTransfer) === null || _a === void 0 ? void 0 : _a.files) {
-                    var _loop_1 = function (file) {
-                        var res = file;
-                        if (IMAGE_TYPES.includes(file.type)) {
-                            var fr = new FileReader();
-                            fr.onload = function (e) {
-                                res.src = e.target.result;
-                                res.urlStyle = _this.domSanitizer.bypassSecurityTrustStyle("url(" + res.src + ")");
-                                _this.cdr.detectChanges();
-                            };
-                            fr.readAsDataURL(file);
-                        }
-                        this_1.droppedFiles.push(res);
-                    };
-                    var this_1 = this;
-                    try {
-                        for (var _c = __values(event.dataTransfer.files), _d = _c.next(); !_d.done; _d = _c.next()) {
-                            var file = _d.value;
-                            _loop_1(file);
-                        }
-                    }
-                    catch (e_1_1) { e_1 = { error: e_1_1 }; }
-                    finally {
-                        try {
-                            if (_d && !_d.done && (_b = _c.return)) _b.call(_c);
-                        }
-                        finally { if (e_1) throw e_1.error; }
-                    }
-                }
-            }
-        };
-        DrChatFormComponent.prototype.removeFile = function (file) {
-            var index = this.droppedFiles.indexOf(file);
-            if (index >= 0) {
-                this.droppedFiles.splice(index, 1);
-            }
-        };
-        DrChatFormComponent.prototype.onDragOver = function (event) {
-            event.preventDefault();
-            event.stopPropagation();
-            if (this.dropFiles) {
-                this.fileOver = true;
-            }
-        };
-        DrChatFormComponent.prototype.onDragLeave = function (event) {
-            event.preventDefault();
-            event.stopPropagation();
-            if (this.dropFiles) {
-                this.fileOver = false;
-            }
-        };
-        DrChatFormComponent.prototype.sendMessage = function () {
-            if (this.waitForReply) {
-                return;
-            }
-            if (this.droppedFiles.length || String(this.message).trim().length) {
-                this._textareaInitialHeight = true;
-                this.send.emit({ message: this.message, files: this.droppedFiles });
-                this.message = '';
-                this.droppedFiles = [];
-                this.cdr.markForCheck();
-            }
-        };
-        DrChatFormComponent.prototype.abortMessage = function () {
-            this.abort.emit();
-        };
-        DrChatFormComponent.prototype.onModelChange = function (value) {
-            this._textareaInitialHeight = false;
-            this.inputChange.emit(value);
-        };
-        DrChatFormComponent.prototype.getTextAreaHeight = function (textAreaElement) {
-            var height;
-            if (this._textareaInitialHeight) {
-                height = 50;
-            }
-            else {
-                height = textAreaElement.scrollHeight + 2;
-            }
-            return "height: " + height + "px;";
-        };
-        return DrChatFormComponent;
+        return DrSpinnerModule;
+    }());
+    DrSpinnerModule.decorators = [
+        { type: i0.NgModule, args: [{
+                    imports: [
+                        common.CommonModule,
+                    ],
+                    exports: __spreadArray(__spreadArray([], __read(components$1)), __read(directives)),
+                    declarations: __spreadArray(__spreadArray([], __read(components$1)), __read(directives))
+                },] }
+    ];
+
+    var DrPopoverModule = /** @class */ (function () {
+        function DrPopoverModule() {
+        }
+        return DrPopoverModule;
     }());
-    DrChatFormComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'dr-chat-form',
-                    template: "<div class=\"dropped-files\" *ngIf=\"droppedFiles?.length\">\n    <div class=\"dropped-files__item\" *ngFor=\"let file of droppedFiles\">\n        <div class=\"dropped-files__item__preview\" [style.background-image]=\"file.urlStyle || 'none'\">\n            <i class=\"dr-icon-file\" *ngIf=\"!file.urlStyle\"></i>\n        </div>\n        <div class=\"dropped-files__item__name\">{{ file.name }}</div>\n        <i class=\"dropped-files__item__remove dr-icon-exit\" (click)=\"removeFile(file)\"></i>\n    </div>\n</div>\n<div class=\"message-row\">\n    <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: i0.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"]
+    DrPopoverModule.decorators = [
+        { type: i0.NgModule, args: [{
+                    imports: [
+                        common.CommonModule,
+                    ],
+                    exports: [
+                        DrPopoverDirective,
+                        DrPopoverComponent,
+                    ],
+                    providers: [],
+                    declarations: [
+                        DrPopoverDirective,
+                        DrPopoverComponent,
+                    ],
                 },] }
     ];
-    DrChatFormComponent.ctorParameters = function () { return [
-        { type: i0.ChangeDetectorRef },
-        { type: platformBrowser.DomSanitizer }
-    ]; };
-    DrChatFormComponent.propDecorators = {
-        message: [{ type: i0.Input }],
-        messagePlaceholder: [{ type: i0.Input }],
-        dropFiles: [{ type: i0.Input }],
-        dropFilePlaceholder: [{ type: i0.Input }],
-        waitForReply: [{ type: i0.Input }],
-        send: [{ type: i0.Output }],
-        abort: [{ type: i0.Output }],
-        inputChange: [{ type: i0.Output }],
-        fileOver: [{ type: i0.HostBinding, args: ['class.file-over',] }],
-        onDrop: [{ type: i0.HostListener, args: ['drop', ['$event'],] }],
-        onDragOver: [{ type: i0.HostListener, args: ['dragover', ['$event'],] }],
-        onDragLeave: [{ type: i0.HostListener, args: ['dragleave', ['$event'],] }]
-    };
 
-    /**
-     * `DrCustomMessageService` is used to store instances of `DrChatCustomMessageDirective`s which
-     * were provided in the chat component.
-     */
-    var DrChatCustomMessageService = /** @class */ (function () {
-        function DrChatCustomMessageService() {
-            this.customMessages = new Map();
+    var DrDropdownModule = /** @class */ (function () {
+        function DrDropdownModule() {
         }
-        DrChatCustomMessageService.prototype.register = function (type, instance) {
-            this.customMessages.set(type, instance);
-        };
-        DrChatCustomMessageService.prototype.unregister = function (type) {
-            return this.customMessages.delete(type);
-        };
-        DrChatCustomMessageService.prototype.getInstance = function (type) {
-            return this.customMessages.get(type);
-        };
-        return DrChatCustomMessageService;
+        return DrDropdownModule;
     }());
-    DrChatCustomMessageService.decorators = [
-        { type: i0.Injectable }
+    DrDropdownModule.decorators = [
+        { type: i0.NgModule, args: [{
+                    imports: [
+                        common.CommonModule,
+                        DrTooltipModule,
+                    ],
+                    declarations: [
+                        DrDropdownDirective,
+                        DrDropdownPositionDirective,
+                        DrDropdownComponent,
+                        DrDropdownItemShowPipe,
+                    ],
+                    exports: [
+                        DrDropdownDirective,
+                        DrDropdownPositionDirective,
+                        DrDropdownComponent,
+                        DrDropdownItemShowPipe,
+                    ],
+                    providers: [
+                        DrDropdownService,
+                    ],
+                },] }
     ];
 
-    var DrChatMessageComponent = /** @class */ (function () {
-        function DrChatMessageComponent(customMessageService) {
-            this.customMessageService = customMessageService;
-            this.MESSAGE_TYPE = exports.CHAT_MESSAGE_TYPE;
-            this._reply = false;
+    var DrTabsModule = /** @class */ (function () {
+        function DrTabsModule() {
         }
-        Object.defineProperty(DrChatMessageComponent.prototype, "flyInOut", {
-            get: function () {
-                return true;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(DrChatMessageComponent.prototype, "notReply", {
-            get: function () {
-                return !this.reply;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(DrChatMessageComponent.prototype, "reply", {
-            /**
-             * Determines if a message is a reply
-             */
-            get: function () {
-                return this._reply;
-            },
-            set: function (value) {
-                this._reply = !!value;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        DrChatMessageComponent.prototype.getTemplate = function () {
-            this.customMessage = true;
-            var customMessage = this.getCustomMessage(this.type);
-            return customMessage.templateRef;
-        };
-        DrChatMessageComponent.prototype.getTemplateContext = function () {
-            return { $implicit: this.customMessageData, isReply: this.reply };
-        };
-        DrChatMessageComponent.prototype.getCustomMessage = function (type) {
-            var customMessageDirective = this.customMessageService.getInstance(type);
-            if (!customMessageDirective) {
-                throw new Error("dr-chat: Can't find template for custom type '" + type + "'. " +
-                    ("Make sure you provide it in the chat component with *drCustomMessage='" + type + "'."));
-            }
-            return customMessageDirective;
-        };
-        return DrChatMessageComponent;
+        return DrTabsModule;
     }());
-    DrChatMessageComponent.decorators = [
-        { type: i0.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: [
-                        animations.trigger('flyInOut', [
-                            animations.state('in', animations.style({ transform: 'translateX(0)' })),
-                            animations.transition('void => *', [animations.style({ transform: 'translateX(-100%)' }), animations.animate(80)]),
-                            animations.transition('* => void', [animations.animate(80, animations.style({ transform: 'translateX(100%)' }))]),
-                        ]),
+    DrTabsModule.decorators = [
+        { type: i0.NgModule, args: [{
+                    imports: [
+                        common.CommonModule,
+                        tabs.MatTabsModule,
+                        forms.FormsModule,
+                        forms.ReactiveFormsModule,
+                        DrInputsModule,
+                        DrTooltipModule
+                    ],
+                    exports: [
+                        DrTabsComponent,
+                        DrTabComponent
+                    ],
+                    providers: [],
+                    declarations: [
+                        DrTabsComponent,
+                        DrTabComponent
                     ],
-                    changeDetection: i0.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 = function () { return [
-        { type: DrChatCustomMessageService }
-    ]; };
-    DrChatMessageComponent.propDecorators = {
-        flyInOut: [{ type: i0.HostBinding, args: ['@flyInOut',] }],
-        notReply: [{ type: i0.HostBinding, args: ['class.not-reply',] }],
-        reply: [{ type: i0.Input }, { type: i0.HostBinding, args: ['class.reply',] }],
-        type: [{ type: i0.Input }],
-        message: [{ type: i0.Input }],
-        customMessageData: [{ type: i0.Input }],
-        user: [{ type: i0.Input }],
-        drChatMessageActions: [{ type: i0.ContentChild, args: ['drChatMessageActions',] }]
-    };
 
-    var DrChatSuggestionsComponent = /** @class */ (function () {
-        function DrChatSuggestionsComponent() {
-            this._nonHiddenValues = [];
-            this.visibleValues = [];
-            this.values = [];
-            this.fullScreen = false;
-            this.buttonMode = false;
-            /**
-             * Parameter to check is send message function available
-             *
-             * @type {boolean}
-             */
-            this.waitForReply = false;
-            this.suggestionSelect = new i0.EventEmitter();
+    var DR_ACCORDION_COMPONENTS = [
+        DrAccordionComponent,
+        DrAccordionItemComponent,
+        DrAccordionItemHeaderComponent,
+        DrAccordionItemBodyComponent,
+    ];
+    var DrAccordionModule = /** @class */ (function () {
+        function DrAccordionModule() {
+        }
+        return DrAccordionModule;
+    }());
+    DrAccordionModule.decorators = [
+        { type: i0.NgModule, args: [{
+                    imports: [common.CommonModule],
+                    exports: __spreadArray([], __read(DR_ACCORDION_COMPONENTS)),
+                    declarations: __spreadArray([], __read(DR_ACCORDION_COMPONENTS)),
+                    providers: [],
+                },] }
+    ];
+
+    var components = [
+        DrLayoutComponent,
+        DrLayoutHeaderComponent,
+        DrLayoutBodyComponent
+    ];
+    var DrLayoutModule = /** @class */ (function () {
+        function DrLayoutModule() {
+        }
+        return DrLayoutModule;
+    }());
+    DrLayoutModule.decorators = [
+        { type: i0.NgModule, args: [{
+                    imports: [common.CommonModule],
+                    exports: __spreadArray([], __read(components)),
+                    declarations: __spreadArray([], __read(components)),
+                },] }
+    ];
+
+    var DrErrorModule = /** @class */ (function () {
+        function DrErrorModule() {
+        }
+        return DrErrorModule;
+    }());
+    DrErrorModule.decorators = [
+        { type: i0.NgModule, args: [{
+                    imports: [
+                        common.CommonModule,
+                        forms.FormsModule,
+                        DrTooltipModule
+                    ],
+                    exports: [DrErrorComponent],
+                    providers: [],
+                    declarations: [
+                        DrErrorComponent
+                    ],
+                },] }
+    ];
+
+    var StepperComponent = /** @class */ (function () {
+        function StepperComponent() {
+            this.withoutConnectors = false;
+            this.hiddenNames = false;
+            this.inlineLabels = false;
+            this.disabled = false;
+            this.hiddenIndex = false;
+            this.stepChange = new i0.EventEmitter();
         }
-        Object.defineProperty(DrChatSuggestionsComponent.prototype, "hiddenValues", {
-            get: function () {
-                return JSON.parse(localStorage.getItem('aiChatSuggestions')) || [];
-            },
-            set: function (values) {
-                localStorage.setItem('aiChatSuggestions', JSON.stringify(values));
-            },
-            enumerable: false,
-            configurable: true
-        });
-        DrChatSuggestionsComponent.prototype.ngOnInit = function () {
-            this.filterValues();
-        };
-        DrChatSuggestionsComponent.prototype.onItemClick = function (item) {
-            var _this = this;
-            if (this.waitForReply) {
-                return;
+        StepperComponent.prototype.selectStep = function (step) {
+            if (step !== this.currentStep && !this.disabled) {
+                this.stepChange.emit(step);
             }
-            this.suggestionSelect.emit(item);
-            this.hiddenValues = __spreadArray(__spreadArray([], __read(this.hiddenValues)), [item]);
-            this.filterValues();
-            this.suggestionCardsList.nativeElement.style.visibility = 'hidden';
-            setTimeout(function () { return _this.suggestionCardsList.nativeElement.style.visibility = ''; }, 10);
         };
-        DrChatSuggestionsComponent.prototype.filterValues = function () {
-            var hiddenValues = this.hiddenValues;
-            this._nonHiddenValues = ___namespace.filter(this.values, function (val) { return !hiddenValues.includes(val); });
-            this.fillVisibleValues();
+        StepperComponent.prototype.getWidth = function (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%';
         };
-        DrChatSuggestionsComponent.prototype.fillVisibleValues = function () {
-            var maxItemsCount = this.fullScreen ? 6 : 4;
-            var nonHiddenValues = ___namespace.clone(this._nonHiddenValues);
-            this.visibleValues.length = 0;
-            for (var i = 0; i < maxItemsCount; i++) {
-                if (!nonHiddenValues.length) {
-                    break;
-                }
-                var randomIndex = Math.floor(Math.random() * nonHiddenValues.length);
-                var item = nonHiddenValues.splice(randomIndex, 1)[0];
-                this.visibleValues.push(item);
-            }
+        StepperComponent.prototype.scrollLeft = function () {
+            this.stepper.nativeElement.scrollLeft -= 80;
         };
-        DrChatSuggestionsComponent.prototype.clearHidden = function () {
-            localStorage.setItem('aiChatSuggestions', null);
-            this.filterValues();
+        StepperComponent.prototype.scrollRight = function () {
+            this.stepper.nativeElement.scrollLeft += 80;
         };
-        return DrChatSuggestionsComponent;
+        StepperComponent.prototype.roundWidth = function (width) {
+            return Math.round(width);
+        };
+        return StepperComponent;
     }());
-    DrChatSuggestionsComponent.decorators = [
+    StepperComponent.decorators = [
         { type: i0.Component, args: [{
-                    selector: 'dr-chat-suggestions',
-                    template: "<div class=\"chat-suggestions\">\n    <ng-container *ngIf=\"buttonMode; else suggestionCards\">\n        <div class=\"chat-suggestions__container\" (mouseenter)=\"fillVisibleValues()\">\n            <dr-button theme=\"ghost\" class=\"chat-suggestions__container__button\">\n                Suggested chats\n            </dr-button>\n            <ng-container *ngTemplateOutlet=\"suggestionCards\"></ng-container>\n        </div>\n    </ng-container>\n</div>\n\n<ng-template #suggestionCards>\n    <div class=\"chat-suggestions__items\" #suggestionCardsList>\n        <div class=\"chat-suggestions__items__background\"></div>\n        <div *ngFor=\"let item of visibleValues\"\n             class=\"chat-suggestions__items__item\" (click)=\"onItemClick(item)\">\n            {{ item }}\n        </div>\n    </div>\n</ng-template>\n",
-                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    styles: [":host{display:flex;align-items:flex-start;justify-content:center}:host .chat-suggestions{display:flex;width:100%;max-width:970px}:host .chat-suggestions__container{display:flex;position:relative;width:auto;margin-top:12px;padding:0 24px}:host .chat-suggestions__container:hover{width:100%}:host .chat-suggestions__container:hover .chat-suggestions__container__button::ng-deep button{color:#4646ce;background:#f2f2fb}:host .chat-suggestions__container:hover .chat-suggestions__items,:host .chat-suggestions__container:hover .chat-suggestions__items__background{display:flex}:host .chat-suggestions__container__button::ng-deep button{background:#F2F2FF!important;border-radius:4px}:host .chat-suggestions__container .chat-suggestions__items{display:none;position:absolute;width:100%;bottom:0;left:0;padding-bottom:32px;z-index:2}:host .chat-suggestions__items{display:flex;flex-wrap:wrap;width:100%;justify-content:space-between;padding:0 24px}:host .chat-suggestions__items__background{display:none;position:absolute;top:-32px;right:0;bottom:32px;left:0;background:white;opacity:.7;z-index:-1}:host .chat-suggestions__items__item{margin:0 0 20px;display:inline-flex;height:76px;width:275px;padding:16px;border-radius:8px;background:#F2F2FF;box-shadow:0 1px 2px #00000026;font-size:14px;line-height:24px;color:#25258c}:host .chat-suggestions__items__item:hover{cursor:pointer;background:#EAEAFF}\n"]
+                    selector: 'dr-stepper',
+                    template: "<div class=\"scroll-section\" *ngIf=\"stepper?.scrollLeft !== 0\" (click)=\"scrollLeft()\">\n    <i class=\"dr-icon-arrow-right\"></i>\n</div>\n<div #stepper class=\"stepper\" [ngClass]=\"{'stepper--disabled': disabled}\">\n    <ng-container *ngFor=\"let step of steps; let index = index; last as isLast; first as isFirst\">\n        <div *ngIf=\"!step.hide\" class=\"step\" (click)=\"selectStep(step)\"\n             [class.step-setup]=\"inlineLabels\">\n            <div class=\"step-wrapper\" [drTooltip]=\"step.description && tooltip\"\n                 [drTooltipContext]=\"{ step: step }\"\n                 [drTooltipPosition]=\"'bottom'\">\n                <div data-test=\"step_point\" class=\"step-point\" [class.active]=\"currentStep === step\" [class.completed]=\"step.completed\">\n                    <div *ngIf=\"step === currentStep;\" class=\"ellipse\"></div>\n                    <ng-container [ngSwitch]=\"step.completed\">\n                        <ng-template [ngSwitchCase]=\"true\">\n                            <div class=\"pointer blue\">\n                                <i class=\"dr-icon-approve\"></i>\n                            </div>\n                        </ng-template>\n                        <ng-template [ngSwitchCase]=\"false\">\n                            <div class=\"pointer\" [class.gray]=\"step !== currentStep\"\n                                 [ngClass]=\"{'blue with-ellipse': step === currentStep}\">\n                                <div [hidden]=\"step === currentStep || hiddenIndex\" class=\"text\">{{index + 1}}</div>\n                            </div>\n                        </ng-template>\n                    </ng-container>\n                </div>\n                <div data-test=\"step_label_name\" class=\"step-label\" [class.active]=\"currentStep === step\"\n                     [ngClass]=\"step.completed ? 'completed' : 'uncompleted'\">\n                    <span [hidden]=\"hiddenNames\">{{step.name}}</span>\n                </div>\n                <ng-container *ngIf=\"inlineLabels\" [ngTemplateOutlet]=\"connector\"\n                              [ngTemplateOutletContext]=\"{ index, isLast, step }\">\n                </ng-container>\n                <span *ngIf=\"step.showProgress\"\n                      data-test=\"step_progress\"\n                      class=\"step-progress\">\n                    {{(step.requiredTasks ? step.completedTasks : step.requiredTasks) + '/' + step.requiredTasks}}\n                </span>\n            </div>\n            <ng-container *ngIf=\"!inlineLabels\" [ngTemplateOutlet]=\"connector\"\n                          [ngTemplateOutletContext]=\"{ index, isLast, step }\">\n            </ng-container>\n        </div>\n    </ng-container>\n</div>\n<div (click)=\"scrollRight()\" class=\"scroll-section\"\n     *ngIf=\"stepper?.scrollWidth > stepper?.clientWidth && roundWidth(stepper?.scrollLeft + stepper?.clientWidth) < stepper?.scrollWidth\">\n    <i class=\"dr-icon-arrow-right\"></i>\n</div>\n\n<ng-template #tooltip let-step=\"step\">\n    <div class=\"step-tooltip\">\n        <div class=\"step-tooltip_name\">{{step.name}}</div>\n        <div class=\"step-tooltip_description\">{{step.description}}</div>\n    </div>\n</ng-template>\n\n<ng-template #connector let-step=\"step\" let-isLast=\"isLast\" let-index=\"index\">\n    <div class=\"step-connector\" [class.only-one-step]=\"steps.length === 1\"\n         [class]=\"'step-connector--' + (!inlineLabels ? 'absolute' : 'inline')\"\n         *ngIf=\"steps.length === 1 || !isLast\"\n         [style.visibility]=\"withoutConnectors || steps[step.index + 1]?.hide ? 'hidden' : 'unset'\"\n         [class.connector-grand]=\"!inlineLabels && (index === 0 || index === steps.length - 2)\">\n        <div class=\"progress\" [style.width]=\"getWidth(step)\"></div>\n    </div>\n</ng-template>\n",
+                    changeDetection: i0.ChangeDetectionStrategy.Default,
+                    styles: [":host{font-family:\"Poppins\",sans-serif;display:flex;justify-content:center;height:100%;position:relative}:host .scroll-section{position:absolute;top:0;height:100%;width:108px;display:flex;align-items:center;z-index:10}:host .scroll-section i{font-size:24px;color:#2969b0;background:#f3f7ff;border-radius:24px}:host .scroll-section i:hover{background:#cde1fb;cursor:pointer}:host .scroll-section:first-child{left:0;padding-left:16px;background:linear-gradient(90deg,#ffffff 36.08%,rgba(255,255,255,0) 87.17%)}:host .scroll-section:first-child i{transform:rotate(180deg)}:host .scroll-section:last-child{right:0;padding-right:16px;background:linear-gradient(270deg,#ffffff 36.08%,rgba(255,255,255,0) 87.17%);justify-content:flex-end}:host .stepper{display:flex;align-items:center;height:100%;width:100%;overflow:auto;scroll-behavior:smooth}:host .stepper::-webkit-scrollbar{display:none}:host .stepper--disabled .step:hover{cursor:default}:host .stepper--disabled .step-point .ellipse{border-color:#bcbcbc}:host .stepper--disabled .step-point .pointer{color:#fff;background-color:#bcbcbc;cursor:default}:host .stepper--disabled .step-label{color:#bcbcbc}:host .stepper--disabled .step-connector{background-color:#bcbcbc}:host .stepper--disabled .step-connector .progress{background-color:#bcbcbc}:host .step{position:relative;display:flex;flex-direction:column;width:120px;align-items:center;flex-shrink:0;flex-grow:1}:host .step:hover{cursor:pointer}:host .step:not(.step-setup) .step-wrapper{width:100%}:host .step:not(.step-setup):first-child .step-wrapper,:host .step:not(.step-setup):first-child .step-point,:host .step:not(.step-setup):first-child .step-label,:host .step:not(.step-setup):first-child .step-progress{margin-left:8px}:host .step:not(.step-setup):first-child .only-one-step{left:0!important;margin-left:25px}:host .step-point{display:flex;justify-content:center;width:100%;height:28px;position:relative;align-items:center}:host .step-point .ellipse{width:28px;height:28px;position:absolute;border-radius:50px;border-color:#4646ce;border-style:solid;border-width:2px;background:white;display:flex;justify-content:center;align-items:center;z-index:2}:host .step-point .pointer{width:24px;height:24px;position:absolute;z-index:4;border-radius:20px;display:flex;align-items:center;justify-content:center;font-weight:bold;font-size:16px;line-height:1.4;color:#51566f;transition:box-shadow .2s ease-in-out}:host .step-point .pointer i{color:#fff;font-size:22px}:host .step-point .pointer.blue{background:#4646ce}:host .step-point .pointer.gray{background:#e5e6ea}:host .step-point .pointer.gray:hover{box-shadow:0 0 4px 2px #00000026}:host .step-point.completed :host .step-point.active{background:#4646ce}:host .step-point.active .ellipse{width:28px;height:28px}:host .step-point.active .pointer{width:20px;height:20px}:host .step-label{font-weight:normal;font-size:14px;line-height:22px;line-height:1.5;color:#6d6e6f;display:flex;justify-content:center;overflow:hidden;margin-top:8px}:host .step-label span{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}:host .step-label.active{font-weight:600;color:#333}:host .step-label:last-child{margin-bottom:23px}:host .step-progress{margin-top:3px;font-style:normal;font-weight:normal;font-size:12px;line-height:1.4;display:flex;justify-content:center}:host .step-connector{background-color:#e5e5e5;height:2px}:host .step-connector.connector-grand{width:calc(100% - 25px)}:host .step-connector.connector-grand.only-one-step{width:calc(100% - 50px)}:host .step-connector .progress{background-color:#4646ce;height:2px;width:0}:host .step-connector--absolute{position:absolute;top:calc(28px / 2);width:100%;left:calc(100% / 2 + 12px)}:host .step-connector--inline{width:50px;margin-left:32px;margin-right:32px}:host .step-setup{width:auto}:host .step-setup .step-wrapper{display:flex;flex-direction:row;align-items:center;width:auto}:host .step-setup+.step-setup{margin-left:0}:host .step-setup .step-progress{display:none}:host .step-setup .step-label{position:relative;transform:none;align-items:center;justify-content:start;margin:0 0 0 8px;font-size:16px}:host .step-setup .step-point{width:28px;height:28px}:host .step-setup .step-point .pointer i{font-size:22px}:host .step-setup .step-point .pointer .text{font-size:16px}::ng-deep .step-tooltip{max-width:250px;font-size:14px;line-height:22px;padding:10px 12px}::ng-deep .step-tooltip_name{font-weight:700;overflow:hidden;text-overflow:ellipsis}@media screen and (min-width: 1367px){.stepper .step-label{font-size:14px}}\n"]
                 },] }
     ];
-    DrChatSuggestionsComponent.ctorParameters = function () { return []; };
-    DrChatSuggestionsComponent.propDecorators = {
-        values: [{ type: i0.Input }],
-        fullScreen: [{ type: i0.Input }],
-        buttonMode: [{ type: i0.Input }],
-        waitForReply: [{ type: i0.Input }],
-        suggestionSelect: [{ type: i0.Output }],
-        suggestionCardsList: [{ type: i0.ViewChild, args: ['suggestionCardsList',] }]
+    StepperComponent.ctorParameters = function () { return []; };
+    StepperComponent.propDecorators = {
+        steps: [{ type: i0.Input }],
+        currentStep: [{ type: i0.Input }],
+        withoutConnectors: [{ type: i0.Input }],
+        hiddenNames: [{ type: i0.Input }],
+        inlineLabels: [{ type: i0.Input }],
+        disabled: [{ type: i0.Input }],
+        hiddenIndex: [{ type: i0.Input }],
+        stepChange: [{ type: i0.Output }],
+        stepper: [{ type: i0.ViewChild, args: ['stepper', { read: i0.ElementRef },] }]
     };
 
-    var DrChatComponent = /** @class */ (function () {
-        function DrChatComponent(cdr) {
-            this.cdr = cdr;
-            this.destroy$ = new rxjs.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 i0.EventEmitter();
-            this.close = new i0.EventEmitter();
-            this.suggestionSelect = new i0.EventEmitter();
+    var DrStepperModule = /** @class */ (function () {
+        function DrStepperModule() {
         }
-        Object.defineProperty(DrChatComponent.prototype, "contentUpdateSubject", {
-            set: function (value) {
-                var _this = this;
-                if (value) {
-                    value.pipe(operators.takeUntil(this.destroy$)).subscribe(function () {
-                        _this.updateView();
-                    });
-                }
-            },
-            enumerable: false,
-            configurable: true
-        });
-        ;
-        Object.defineProperty(DrChatComponent.prototype, "scrollBottom", {
-            /**
-             * Scroll chat to the bottom of the list when a new message arrives
-             */
-            get: function () {
-                return this._scrollBottom;
-            },
-            set: function (value) {
-                this._scrollBottom = !!value;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(DrChatComponent.prototype, "messagesContainerWithScroll", {
-            get: function () {
-                return this.messagesContainer && this.messagesContainer.nativeElement.scrollHeight > this.messagesContainer.nativeElement.offsetHeight;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        ;
-        DrChatComponent.prototype.ngAfterViewInit = function () {
-            var _this = this;
-            this.messages.changes.subscribe(function (messages) {
-                _this.messages = messages;
-                _this.updateView();
-            });
-            this.updateView();
-        };
-        DrChatComponent.prototype.updateView = function () {
-            if (this.scrollBottom) {
-                this.scrollListBottom();
-            }
-        };
-        DrChatComponent.prototype.scrollListBottom = function () {
-            var _this = this;
-            setTimeout(function () {
-                if (_this.messagesContainer) {
-                    var scrollToOptions = {
-                        top: _this.messagesContainer.nativeElement.scrollHeight,
-                    };
-                    if (!_this.reopen) {
-                        scrollToOptions.behavior = 'smooth';
-                    }
-                    _this.messagesContainer.nativeElement.scrollTo(scrollToOptions);
-                    _this.cdr.markForCheck();
-                }
-            });
-        };
-        DrChatComponent.prototype.ngOnDestroy = function () {
-            this.destroy$.next();
-            this.destroy$.complete();
-        };
-        DrChatComponent.prototype.onClearClick = function ($event) {
-            this.clear.emit($event);
-            if (this._chatSuggestions) {
-                this._chatSuggestions.clearHidden();
-            }
-        };
-        return DrChatComponent;
+        return DrStepperModule;
     }());
-    DrChatComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'dr-chat',
-                    template: "<div class=\"chat\" [class.chat--in-full-screen]=\"fullScreen\">\n    <div class=\"chat__header\">\n        <div class=\"chat__header__logo\"></div>\n\n        <div class=\"chat__header__text\">\n            <div class=\"chat__header__text__title\">{{ title }}</div>\n            <div *ngIf=\"subtitle\" class=\"chat__header__text__subtitle\">{{ subtitle }}</div>\n        </div>\n\n        <dr-button *ngIf=\"showClearButton\"\n                   (click)=\"onClearClick($event)\"\n                   theme=\"icon\"\n                   icon=\"dr-icon-clear\"\n                   class=\"ml-auto\"\n                   drTooltip=\"Clear chat\">\n        </dr-button>\n\n        <dr-button *ngIf=\"!fullScreen\"\n                   (click)=\"close.emit($event)\"\n                   theme=\"icon\"\n                   icon=\"dr-icon-exit\"\n                   class=\"ml-4\"\n                   drTooltip=\"Close\">\n        </dr-button>\n    </div>\n\n    <div *ngIf=\"!messages?.length\" class=\"chat__empty-state\">\n        <span class=\"chat__empty-state__text\">{{ noMessagesPlaceholder }}</span>\n    </div>\n\n    <div *ngIf=\"messages?.length\" class=\"chat__messages\">\n        <div #messagesContainer class=\"chat__messages__container\"\n             [class.chat__messages__container--scroll]=\"messagesContainerWithScroll\">\n            <ng-content select=\"dr-chat-message\"></ng-content>\n        </div>\n    </div>\n\n    <dr-chat-suggestions *ngIf=\"suggestions?.length\"\n                         [values]=\"suggestions\"\n                         [fullScreen]=\"fullScreen\"\n                         [waitForReply]=\"waitForReply\"\n                         class=\"chat__suggestions\"\n                         [class.chat__suggestions--full-height]=\"fullScreen && !messages?.length\"\n                         [buttonMode]=\"!!messages?.length\"\n                         (suggestionSelect)=\"suggestionSelect.emit($event)\">\n    </dr-chat-suggestions>\n\n    <div class=\"form\">\n        <ng-content select=\"dr-chat-form\"></ng-content>\n    </div>\n</div>\n",
-                    providers: [DrChatCustomMessageService],
-                    styles: [":host{height:100%;width:100%;display:flex;flex-direction:column}.chat{position:relative;display:flex;flex-grow:1;flex-direction:column;height:100%;background-color:#fff;color:#4e566c;font-family:\"Poppins\",sans-serif;font-size:14px;font-weight:400;line-height:22px}.chat__header{display:flex;align-items:center;background-color:#f2f2ff;color:#25258c;padding:15px 24px;font-weight:400;font-size:20px;line-height:28px;box-shadow:0 1px 3px #0003;z-index:1}.chat__header__logo{display:flex;width:43px;height:38px;background:url(\"data:image/svg+xml,%3C%3Fxml version%3D%221.0%22 encoding%3D%22UTF-8%22%3F%3E%3Csvg id%3D%22Layer_1%22 data-name%3D%22Layer 1%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22 viewBox%3D%220 0 74 65%22%3E  %3Cdefs%3E    %3Cstyle%3E      .cls-1%2C .cls-2%2C .cls-3 %7B        fill%3A none%3B      %7D      .cls-4 %7B        fill%3A url(%23linear-gradient)%3B      %7D      .cls-5 %7B        fill%3A %234eb7df%3B      %7D      .cls-2 %7B        stroke%3A %23a6a8aa%3B        stroke-miterlimit%3A 10%3B        stroke-width%3A .37px%3B      %7D      .cls-6 %7B        fill%3A url(%23linear-gradient-3)%3B      %7D      .cls-7 %7B        fill%3A url(%23linear-gradient-2)%3B      %7D      .cls-3 %7B        clip-path%3A url(%23clippath)%3B      %7D    %3C%2Fstyle%3E    %3CclipPath id%3D%22clippath%22%3E      %3Crect class%3D%22cls-1%22 width%3D%2274%22 height%3D%2265%22%2F%3E    %3C%2FclipPath%3E    %3ClinearGradient id%3D%22linear-gradient%22 x1%3D%2224.26%22 y1%3D%22-3.79%22 x2%3D%2295.63%22 y2%3D%2288.82%22 gradientTransform%3D%22translate(0 65.89) scale(1 -1)%22 gradientUnits%3D%22userSpaceOnUse%22%3E      %3Cstop offset%3D%220%22 stop-color%3D%22%237676ff%22%2F%3E      %3Cstop offset%3D%22.18%22 stop-color%3D%22%235959ff%22%2F%3E      %3Cstop offset%3D%22.35%22 stop-color%3D%22%235757e0%22%2F%3E      %3Cstop offset%3D%22.61%22 stop-color%3D%22%234646ce%22%2F%3E      %3Cstop offset%3D%22.84%22 stop-color%3D%22%234b4be4%22%2F%3E      %3Cstop offset%3D%221%22 stop-color%3D%22%234444eb%22%2F%3E    %3C%2FlinearGradient%3E    %3ClinearGradient id%3D%22linear-gradient-2%22 x1%3D%2212.05%22 y1%3D%2277.06%22 x2%3D%2210.77%22 y2%3D%2213.85%22 gradientTransform%3D%22translate(0 65.89) scale(1 -1)%22 gradientUnits%3D%22userSpaceOnUse%22%3E      %3Cstop offset%3D%22.45%22 stop-color%3D%22%232f92b8%22%2F%3E      %3Cstop offset%3D%22.84%22 stop-color%3D%22%234eb7df%22%2F%3E      %3Cstop offset%3D%221%22 stop-color%3D%22%234eb7df%22%2F%3E    %3C%2FlinearGradient%3E    %3ClinearGradient id%3D%22linear-gradient-3%22 x1%3D%2262.26%22 y1%3D%22-2.54%22 x2%3D%2261.76%22 y2%3D%2285.91%22 gradientTransform%3D%22translate(0 65.89) scale(1 -1)%22 gradientUnits%3D%22userSpaceOnUse%22%3E      %3Cstop offset%3D%220%22 stop-color%3D%22%2336369b%22%2F%3E      %3Cstop offset%3D%22.52%22 stop-color%3D%22%234848d0%22%2F%3E    %3C%2FlinearGradient%3E  %3C%2Fdefs%3E  %3Cg class%3D%22cls-3%22%3E    %3Cg%3E      %3Cpath class%3D%22cls-4%22 d%3D%22m73.32%2C24.79v15.73c0%2C13.12-9.87%2C23.79-22%2C23.79h-21.32c-3.46-.06-6.25-3.11-6.25-6.87s2.79-6.81%2C6.25-6.87h21.32c5.13%2C0%2C9.29-4.51%2C9.29-10.05v-15.73c0-5.54-4.17-10.05-9.29-10.05h-7.46c3.51%2C0%2C6.35-3.08%2C6.35-6.88s-2.79-6.8-6.25-6.87h7.35c12.12%2C0%2C22%2C10.67%2C22%2C23.79h0Z%22%2F%3E      %3Cpath class%3D%22cls-5%22 d%3D%22m50.26%2C7.82c0%2C3.8-2.9%2C6.93-6.41%2C6.93h-21.86c-5.13%2C0-9.29%2C4.51-9.29%2C10.05v15.73c0%2C5.54%2C4.17%2C10.05%2C9.29%2C10.05h8.01c-3.46.06-6.25%2C3.11-6.25%2C6.87s2.79%2C6.81%2C6.25%2C6.87h-8.01c-12.12%2C0-22-10.67-22-23.79v-15.73C0%2C11.68%2C9.87%2C1%2C21.99%2C1h21.97c3.46.06%2C6.3%2C3.06%2C6.3%2C6.82Z%22%2F%3E      %3Cpath class%3D%22cls-2%22 d%3D%22m66.45%2C1h-.22.22%2C0Z%22%2F%3E      %3Cpath class%3D%22cls-2%22 d%3D%22m36.05%2C50.58h-.22.22%2C0Z%22%2F%3E      %3Cpath class%3D%22cls-7%22 d%3D%22m0%2C33.78v-2.76C0%2C12.9%2C13.62%2C14.48%2C13.62%2C14.48h8.38c-5.5.46-9.5%2C4.71-9.5%2C9.96l.02%2C15.8c0%2C5.54%2C4.44%2C10.59%2C9.48%2C10.59l-8-.5S0%2C51.88%2C0%2C33.77h0Z%22%2F%3E      %3Cpath class%3D%22cls-6%22 d%3D%22m73%2C31.51v2.76c0%2C18.12-13.62%2C16.53-13.62%2C16.53h-7.99c5.61-.85%2C9.09-4.76%2C9.09-10.02l.02-16.33c0-5.54-4.46-10-9.5-10h8s13.99-1.05%2C13.99%2C17.07h0Z%22%2F%3E    %3C%2Fg%3E  %3C%2Fg%3E%3C%2Fsvg%3E\") no-repeat;background-size:100% 100%}.chat__header__text{display:flex;flex-direction:column;flex-grow:1;margin-left:20px}.chat__header__text__title{display:flex;align-items:center}.chat__header__text__title:after{content:\"BETA\";display:inline-flex;padding:2px 10px;background:#25258C;color:#f4f4f3;font-weight:600;font-size:10px;line-height:14px;border-radius:8px;margin-left:12px;font-family:\"Nunito Sans\",sans-serif}.chat__header__text__subtitle{font-size:14px;line-height:22px}.chat__header dr-button::ng-deep button:not(:hover){color:#25258c}.chat__empty-state{display:flex;justify-content:center}.chat__empty-state__text{padding:20px 0;font-family:Poppins,sans-serif;font-size:20px;font-weight:300;line-height:30px;text-align:center;max-width:440px;color:#4646ce}.chat__messages{display:flex;flex-grow:1;overflow-x:hidden;overflow-y:auto;height:100%;width:100%}.chat__messages__container{overflow-y:auto;overflow-x:hidden;display:flex;flex-shrink:0;flex-direction:column;width:100%;padding-bottom:1px}.chat__messages__container--scroll::ng-deep dr-chat-message{padding-right:16px}.chat__suggestions--full-height{flex-grow:1;height:1px;overflow:auto}.chat--in-full-screen .chat__header{padding-left:48px;padding-right:48px}.chat--in-full-screen .chat__empty-state__text{padding:77px 0;font-size:28px;line-height:46px;max-width:570px}.chat--in-full-screen .chat__messages::ng-deep dr-chat-message{justify-content:center}.chat--in-full-screen .chat__messages::ng-deep .message{max-width:919px}.chat--in-full-screen .chat__suggestions::ng-deep .chat-suggestions__items{padding-left:0;padding-right:0}.chat--in-full-screen .chat__suggestions::ng-deep .chat-suggestions__items__item{margin:0 0 26px;height:80px;width:310px;font-size:16px}.chat--in-full-screen .chat__suggestions::ng-deep .chat-suggestions__container{padding:0}\n"]
+    DrStepperModule.decorators = [
+        { type: i0.NgModule, args: [{
+                    declarations: [StepperComponent],
+                    imports: [
+                        common.CommonModule,
+                        DrTooltipModule
+                    ],
+                    exports: [StepperComponent]
+                },] }
+    ];
+
+    var DrDetailsListModule = /** @class */ (function () {
+        function DrDetailsListModule() {
+        }
+        return DrDetailsListModule;
+    }());
+    DrDetailsListModule.decorators = [
+        { type: i0.NgModule, args: [{
+                    imports: [
+                        common.CommonModule,
+                    ],
+                    exports: [DrDetailsListComponent],
+                    providers: [],
+                    declarations: [DrDetailsListComponent],
+                },] }
+    ];
+
+    var ɵ0$1 = {}, ɵ1 = {};
+    var DrDialogModule = /** @class */ (function () {
+        function DrDialogModule() {
+        }
+        return DrDialogModule;
+    }());
+    DrDialogModule.decorators = [
+        { type: i0.NgModule, args: [{
+                    declarations: [DialogWrapperComponent, DialogModalWrapperComponent],
+                    imports: [
+                        common.CommonModule,
+                        i1$1.MatDialogModule,
+                        DrInputsModule,
+                        forms.ReactiveFormsModule,
+                        DrTooltipModule,
+                        DrDetailsListModule
+                    ],
+                    exports: [DialogWrapperComponent, DialogModalWrapperComponent],
+                    providers: [
+                        { provide: i1$1.MatDialogRef, useValue: ɵ0$1 },
+                        { provide: i1$1.MAT_DIALOG_DATA, useValue: ɵ1 },
+                        DialogService
+                    ]
                 },] }
     ];
-    DrChatComponent.ctorParameters = function () { return [
-        { type: i0.ChangeDetectorRef }
-    ]; };
-    DrChatComponent.propDecorators = {
-        fullScreen: [{ type: i0.Input }],
-        title: [{ type: i0.Input }],
-        subtitle: [{ type: i0.Input }],
-        showClearButton: [{ type: i0.Input }],
-        noMessagesPlaceholder: [{ type: i0.Input }],
-        contentUpdateSubject: [{ type: i0.Input }],
-        scrollBottom: [{ type: i0.Input }],
-        suggestions: [{ type: i0.Input }],
-        reopen: [{ type: i0.Input }],
-        waitForReply: [{ type: i0.Input }],
-        messagesContainer: [{ type: i0.ViewChild, args: ['messagesContainer',] }],
-        messages: [{ type: i0.ContentChildren, args: [DrChatMessageComponent,] }],
-        chatForm: [{ type: i0.ContentChild, args: [DrChatFormComponent,] }],
-        clear: [{ type: i0.Output }],
-        close: [{ type: i0.Output }],
-        suggestionSelect: [{ type: i0.Output }],
-        _chatSuggestions: [{ type: i0.ViewChild, args: [DrChatSuggestionsComponent,] }]
-    };
 
     /**
      * Chat text message component.
@@ -7116,6 +7130,7 @@
     exports.DrAvatarPipe = DrAvatarPipe;
     exports.DrBadgeStatusModule = DrBadgeStatusModule;
     exports.DrButtonComponent = DrButtonComponent;
+    exports.DrChatComponent = DrChatComponent;
     exports.DrChatModule = DrChatModule;
     exports.DrDetailsListComponent = DrDetailsListComponent;
     exports.DrDetailsListModule = DrDetailsListModule;
@@ -7170,34 +7185,33 @@
     exports.YearTagComponent = YearTagComponent;
     exports["ɵa"] = components$2;
     exports["ɵb"] = POPUP_ANIMATION;
-    exports["ɵba"] = DrChatCustomMessageDirective;
-    exports["ɵbb"] = DrScenarioConfigurationComponent;
-    exports["ɵbc"] = DrScenarioTagConfigurationComponent;
-    exports["ɵbd"] = DrBadgeStatusComponent;
-    exports["ɵc"] = DrDatePickerComponent;
-    exports["ɵd"] = DrDatePickerService;
-    exports["ɵe"] = DrDatePickerWithTimeframeComponent;
-    exports["ɵf"] = DrDatePickerFormatDirective;
-    exports["ɵg"] = DrDatePickerCustomHeaderComponent;
-    exports["ɵh"] = DrShowTimeframePipe;
-    exports["ɵi"] = DrSelectAddItemComponent;
-    exports["ɵj"] = TooltipInfoComponent;
-    exports["ɵk"] = TooltipInfoSimpleComponent;
-    exports["ɵl"] = TooltipNoBodyComponent;
-    exports["ɵm"] = TooltipProcessDefaultComponent;
-    exports["ɵn"] = DrDynamicTagModule;
-    exports["ɵo"] = DrDynamicTagComponent;
-    exports["ɵp"] = StepperComponent;
-    exports["ɵq"] = DialogWrapperComponent;
-    exports["ɵr"] = DialogModalWrapperComponent;
-    exports["ɵs"] = DrChatComponent;
-    exports["ɵt"] = DrChatCustomMessageService;
-    exports["ɵu"] = DrChatMessageComponent;
-    exports["ɵv"] = DrChatFormComponent;
-    exports["ɵw"] = DrChatSuggestionsComponent;
-    exports["ɵx"] = DrChatMessageTextComponent;
-    exports["ɵy"] = DrChatMessageFileComponent;
-    exports["ɵz"] = DrDotFlashingComponent;
+    exports["ɵba"] = DrScenarioConfigurationComponent;
+    exports["ɵbb"] = DrScenarioTagConfigurationComponent;
+    exports["ɵbc"] = DrBadgeStatusComponent;
+    exports["ɵc"] = DrChatCustomMessageService;
+    exports["ɵd"] = DrChatMessageComponent;
+    exports["ɵe"] = DrChatFormComponent;
+    exports["ɵf"] = DrChatSuggestionsComponent;
+    exports["ɵg"] = DrDatePickerComponent;
+    exports["ɵh"] = DrDatePickerService;
+    exports["ɵi"] = DrDatePickerWithTimeframeComponent;
+    exports["ɵj"] = DrDatePickerFormatDirective;
+    exports["ɵk"] = DrDatePickerCustomHeaderComponent;
+    exports["ɵl"] = DrShowTimeframePipe;
+    exports["ɵm"] = DrSelectAddItemComponent;
+    exports["ɵn"] = TooltipInfoComponent;
+    exports["ɵo"] = TooltipInfoSimpleComponent;
+    exports["ɵp"] = TooltipNoBodyComponent;
+    exports["ɵq"] = TooltipProcessDefaultComponent;
+    exports["ɵr"] = DrDynamicTagModule;
+    exports["ɵs"] = DrDynamicTagComponent;
+    exports["ɵt"] = StepperComponent;
+    exports["ɵu"] = DialogWrapperComponent;
+    exports["ɵv"] = DialogModalWrapperComponent;
+    exports["ɵw"] = DrChatMessageTextComponent;
+    exports["ɵx"] = DrChatMessageFileComponent;
+    exports["ɵy"] = DrDotFlashingComponent;
+    exports["ɵz"] = DrChatCustomMessageDirective;
 
     Object.defineProperty(exports, '__esModule', { value: true });