@datarailsshared/datarailsshared 1.4.23 → 1.4.24-tigers

package/bundles/datarailsshared-datarailsshared.umd.js

@@ -1948,10 +1948,17 @@
     var TooltipComponent = /** @class */ (function () {
         function TooltipComponent() {
             this.isContentTemplate = false;
+            this.isMouseOn$ = new rxjs.BehaviorSubject(false);
         }
         TooltipComponent.prototype.ngOnInit = function () {
             this.isContentTemplate = this.content instanceof i0.TemplateRef;
         };
+        TooltipComponent.prototype.setMouseOn = function () {
+            this.isMouseOn$.next(true);
+        };
+        TooltipComponent.prototype.unsetMouseOn = function () {
+            this.isMouseOn$.next(false);
+        };
         return TooltipComponent;
     }());
     TooltipComponent.decorators = [
@@ -1970,7 +1977,9 @@
         contentContext: [{ type: i0.Input }],
         position: [{ type: i0.Input }],
         options: [{ type: i0.Input }],
-        class: [{ type: i0.Input }]
+        class: [{ type: i0.Input }],
+        setMouseOn: [{ type: i0.HostListener, args: ['mouseenter',] }],
+        unsetMouseOn: [{ type: i0.HostListener, args: ['mouseleave',] }]
     };
 
     var DrTooltipDirective = /** @class */ (function () {
@@ -1981,6 +1990,8 @@
             this.contentContext = {};
             this.position = 'top';
             this.class = '';
+            // is used for preserve tooltip from being hidden for N milliseconds
+            this.drTooltipMousleaveTimeout = 0;
         }
         Object.defineProperty(DrTooltipDirective.prototype, "drTooltipOptions", {
             set: function (options) {
@@ -2021,16 +2032,37 @@
             if (this.overlayRef) {
                 this.overlayRef.dispose();
             }
+            if (this.tooltipMouseOnSubscription) {
+                this.tooltipMouseOnSubscription.unsubscribe();
+            }
         };
         DrTooltipDirective.prototype.show = function () {
-            if (this.manualHandling)
+            if (this.manualHandling || this.overlayRef)
                 return;
             this.renderTooltip();
         };
         DrTooltipDirective.prototype.hide = function () {
-            if (this.manualHandling)
+            var _this = this;
+            var _a;
+            if (this.manualHandling || !this.tooltipRef || ((_a = this.tooltipRef) === null || _a === void 0 ? void 0 : _a.instance.isMouseOn$.getValue()))
                 return;
-            this.destroyTooltip();
+            // if this timeout value is set - then preserve
+            // tooltip from being hidden N milliseconds and not hiding it
+            // in case mouse is pointed on tooltip
+            if (this.drTooltipMousleaveTimeout) {
+                if (this.mouseleaveTimer) {
+                    clearTimeout(this.mouseleaveTimer);
+                }
+                this.mouseleaveTimer = setTimeout(function () {
+                    var _a;
+                    if (_this.tooltipRef && !((_a = _this.tooltipRef) === null || _a === void 0 ? void 0 : _a.instance.isMouseOn$.getValue())) {
+                        _this.destroyTooltip();
+                    }
+                }, this.drTooltipMousleaveTimeout);
+            }
+            else {
+                this.destroyTooltip();
+            }
         };
         DrTooltipDirective.prototype.createOverlay = function () {
             var positionStrategy = this.overlayPositionBuilder
@@ -2039,15 +2071,21 @@
             this.overlayRef = this.overlay.create({ positionStrategy: positionStrategy });
         };
         DrTooltipDirective.prototype.renderTooltip = function () {
+            var _this = this;
             var _a;
             this.createOverlay();
             if (!((_a = this.overlayRef) === null || _a === void 0 ? void 0 : _a.hasAttached()) && this.content) {
-                var tooltipRef = this.overlayRef.attach(new portal.ComponentPortal(TooltipComponent));
-                tooltipRef.instance.content = this.content;
-                tooltipRef.instance.contentContext = this.contentContext;
-                tooltipRef.instance.position = this.position;
-                tooltipRef.instance.options = this.options;
-                tooltipRef.instance.class = this.class + ' ' + this.position;
+                this.tooltipRef = this.overlayRef.attach(new portal.ComponentPortal(TooltipComponent));
+                this.tooltipRef.instance.content = this.content;
+                this.tooltipRef.instance.contentContext = this.contentContext;
+                this.tooltipRef.instance.position = this.position;
+                this.tooltipRef.instance.options = this.options;
+                this.tooltipRef.instance.class = this.class + ' ' + this.position;
+                this.tooltipMouseOnSubscription = this.tooltipRef.instance.isMouseOn$.pipe(operators.skip(1)).subscribe(function (isMouseOn) {
+                    if (!isMouseOn) {
+                        _this.destroyTooltip();
+                    }
+                });
             }
         };
         DrTooltipDirective.prototype.destroyTooltip = function () {
@@ -2055,6 +2093,10 @@
                 this.overlayRef.dispose();
             }
             this.overlayRef = null;
+            this.tooltipRef = null;
+            if (this.tooltipMouseOnSubscription) {
+                this.tooltipMouseOnSubscription.unsubscribe();
+            }
         };
         return DrTooltipDirective;
     }());
@@ -2073,6 +2115,7 @@
         contentContext: [{ type: i0.Input, args: ['drTooltipContext',] }],
         position: [{ type: i0.Input, args: ['drTooltipPosition',] }],
         class: [{ type: i0.Input, args: ['drTooltipClass',] }],
+        drTooltipMousleaveTimeout: [{ type: i0.Input }],
         drTooltipOptions: [{ type: i0.Input }],
         showTooltip: [{ type: i0.Input, args: ['drTooltipShow',] }],
         show: [{ type: i0.HostListener, args: ['mouseenter',] }],
@@ -2390,978 +2433,525 @@
     <dr-button [isDisabled]="false" [theme]="'text-link'">Text Link</dr-button>
     */
 
-    var MAT_DEFAULT_DATE_FORMAT = 'MM/DD/yyyy';
-    var DATE_INPUT_FORMAT = 'YYYY/MM/DD';
-    var YEAR_FORMAT = 'yyyy';
-    var MONTH_YEAR_FORMAT = 'MM/yyyy';
-    var QUARTER_FORMAT = 'Q/yyyy';
-    var CustomDateFormat = /** @class */ (function () {
-        function CustomDateFormat() {
-            this._parse = {
-                dateInput: DATE_INPUT_FORMAT
-            };
-            this._display = {
-                dateInput: DATE_INPUT_FORMAT,
-                monthYearLabel: 'MMM YYYY',
-                dateA11yLabel: 'LL',
-                monthYearA11yLabel: 'MMM YYYY',
-                quarterYearLabel: 'Q/YYYY',
-                yearLabel: 'YYYY'
-            };
+    var DrPopoverRef = /** @class */ (function () {
+        function DrPopoverRef(overlayRef) {
+            this.overlayRef = overlayRef;
+            this.onClose$ = new rxjs.Subject();
+            // FIXME: this decision was made because of the incompatible rxjs version
+            /**
+             * Correct type is @type {Observable<any>}
+             */
+            this.onClose = this.onClose$.asObservable();
+            this.onBackdropClick = this.overlayRef.backdropClick();
         }
-        Object.defineProperty(CustomDateFormat.prototype, "parse", {
-            get: function () {
-                return this._parse;
-            },
-            set: function (parse) {
-                this._parse = Object.assign({}, this._parse, parse);
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(CustomDateFormat.prototype, "display", {
-            get: function () {
-                return this._display;
-            },
-            set: function (display) {
-                this._display = Object.assign({}, this._display, display);
-            },
-            enumerable: false,
-            configurable: true
-        });
-        CustomDateFormat.prototype.updateDateFormat = function (parse, display) {
-            this.parse = parse;
-            if (!display) {
-                display = parse;
-            }
-            this.display = display;
+        DrPopoverRef.prototype.close = function (res) {
+            this.overlayRef.detach();
+            this.overlayRef.dispose();
+            this.onClose$.next(res);
+            this.onClose$.complete();
         };
-        return CustomDateFormat;
+        return DrPopoverRef;
     }());
 
-    var moment$2 = require('moment');
-    var DrDatePickerService = /** @class */ (function () {
-        function DrDatePickerService() {
-            this.timeframe = 'day';
-            this.format = new rxjs.BehaviorSubject(MAT_DEFAULT_DATE_FORMAT);
-            this.updatedQuater = new rxjs.Subject();
+    exports.DrPopoverAlignmentDimension = void 0;
+    (function (DrPopoverAlignmentDimension) {
+        DrPopoverAlignmentDimension["Width"] = "width";
+        DrPopoverAlignmentDimension["Height"] = "height";
+    })(exports.DrPopoverAlignmentDimension || (exports.DrPopoverAlignmentDimension = {}));
+    var DEFAULT_CONFIG = {
+        hasBackdrop: false,
+        closeOnBackdropClick: false,
+        backdropClass: 'dr-popover-transparent-backdrop',
+    };
+    var DEFAULT_MODEL = {
+        position: 'bottom',
+        class: '',
+        overlayConfig: {},
+        manualClosing: { enabled: false },
+    };
+    function getAlignmentDimension(position) {
+        if (!POPUP_POSITIONS[position])
+            return exports.DrPopoverAlignmentDimension.Width;
+        if ((position === null || position === void 0 ? void 0 : position.includes('left')) || (position === null || position === void 0 ? void 0 : position.includes('right'))) {
+            return exports.DrPopoverAlignmentDimension.Height;
         }
-        DrDatePickerService.prototype.getQuarterDisplay = function (value, format) {
-            return 'Q' + moment$2(value).quarter() + format.charAt(1) + moment$2(value).year();
-        };
-        DrDatePickerService.prototype.setTimeframe = function (format) {
-            var lowerCaseFormat = format.toLowerCase();
-            switch (true) {
-                case lowerCaseFormat.includes('q'):
-                    this.timeframe = 'quarter';
-                    break;
-                case lowerCaseFormat.includes('d'):
-                    this.timeframe = 'day';
-                    break;
-                case lowerCaseFormat.includes('m'):
-                    this.timeframe = 'month';
-                    break;
-                case lowerCaseFormat.includes('y'):
-                    this.timeframe = 'year';
-                    break;
-                default:
-                    this.timeframe = 'day';
-            }
-        };
-        return DrDatePickerService;
-    }());
-    DrDatePickerService.ɵprov = i0__namespace.ɵɵdefineInjectable({ factory: function DrDatePickerService_Factory() { return new DrDatePickerService(); }, token: DrDatePickerService, providedIn: "root" });
-    DrDatePickerService.decorators = [
-        { type: i0.Injectable, args: [{
-                    providedIn: 'root',
-                },] }
-    ];
+        return exports.DrPopoverAlignmentDimension.Width;
+    }
 
-    var moment$1 = require('moment');
-    var DrDatePickerCustomHeaderComponent = /** @class */ (function () {
-        function DrDatePickerCustomHeaderComponent(_calendar, _dateAdapter, _dateFormats, cdr, datePickerService) {
-            var _this = this;
-            this._calendar = _calendar;
-            this._dateAdapter = _dateAdapter;
-            this._dateFormats = _dateFormats;
+    var DrPopoverComponent = /** @class */ (function () {
+        function DrPopoverComponent(cdr, componentFactoryResolver, viewContainerRef, elementRef, popoverRef) {
             this.cdr = cdr;
-            this.datePickerService = datePickerService;
-            this._destroyed = new rxjs.Subject();
-            this.quarters = [1, 2, 3, 4];
-            this.selectedQuarter = 1;
-            this.timeframeOptions = [{
-                    title: 'Day',
-                    value: 'month',
-                    format: MAT_DEFAULT_DATE_FORMAT,
-                    periodLabel: function () { return _this._dateAdapter
-                        .format(_this._calendar.activeDate, _this._dateFormats.display.monthYearLabel)
-                        .toLocaleUpperCase(); }
-                }, {
-                    title: 'Month',
-                    value: 'year',
-                    format: MONTH_YEAR_FORMAT,
-                    periodLabel: function () { return String(moment$1(_this._calendar.activeDate).year()); }
-                }, {
-                    title: 'Quarter',
-                    value: 'none',
-                    format: QUARTER_FORMAT,
-                    periodLabel: function () { return String(moment$1(_this._calendar.activeDate).year()); }
-                }, {
-                    title: 'Year',
-                    value: 'multi-year',
-                    format: YEAR_FORMAT,
-                    periodLabel: function () {
-                        var currentYear = moment$1(_this._calendar.activeDate).year();
-                        var startPeriod = Math.floor(currentYear / 24) * 24;
-                        return startPeriod + '-' + (startPeriod + 23);
-                    }
-                }];
-            this.pagingSetup = {
-                'year': function (forward) { return _this.pagingDateChange('addCalendarYears', 1, forward); },
-                'none': function (forward) { return _this.pagingDateChange('addCalendarYears', 1, forward); },
-                'month': function (forward) { return _this.pagingDateChange('addCalendarMonths', 1, forward); },
-                'multi-year': function (forward) { return _this.pagingDateChange('addCalendarYears', 24, forward); }
-            };
-            this.selectedTimeframe = 'month';
-            this.timeframeSelection = false;
-            this.periodMonthLabel = '';
-            this.periodYearLabel = '';
-            _calendar.stateChanges.pipe(operators.takeUntil(this._destroyed)).subscribe(function () { return _this.setPeriodLabels(); });
-            this.datePickerService.format
-                .pipe(operators.take(1))
-                .subscribe(function (value) {
-                _this.selectedTimeframe = _this.timeframeOptions.filter(function (option) { return option.format == value; })[0].value;
-                _this.setPeriodLabels();
-            });
-            _calendar.viewChanged.pipe(operators.takeUntil(this._destroyed)).subscribe(function () { return _this.setPeriodLabels(); });
+            this.componentFactoryResolver = componentFactoryResolver;
+            this.viewContainerRef = viewContainerRef;
+            this.elementRef = elementRef;
+            this.popoverRef = popoverRef;
+            this.class = '';
+            this.isContentTemplate = false;
+            this.popover = true;
         }
-        DrDatePickerCustomHeaderComponent.prototype.ngOnDestroy = function () {
-            this._destroyed.next();
-            this._destroyed.complete();
-        };
-        DrDatePickerCustomHeaderComponent.prototype.setPeriodLabels = function () {
-            var _this = this;
-            var currentTimeframeOption = this.timeframeOptions.filter(function (option) { return option.value === _this._calendar.currentView; })[0];
-            var fullPeriodLabel = currentTimeframeOption.periodLabel();
-            if (this._calendar.currentView === 'month') {
-                this.periodMonthLabel = fullPeriodLabel.slice(0, 3);
-                this.periodYearLabel = fullPeriodLabel.slice(4);
-            }
-            else {
-                this.periodMonthLabel = '';
-                this.periodYearLabel = fullPeriodLabel;
+        DrPopoverComponent.prototype.clickOutside = function (e) {
+            var isTargetHost = this.hostRef instanceof i0.ElementRef && (this.hostRef.nativeElement === e.target || this.hostRef.nativeElement.contains(e.target));
+            var isTargetInPopover = this.elementRef.nativeElement.contains(e.target);
+            var isTargetInDatepicker = e.target.closest('mat-datepicker-popup');
+            var isTargetInSelect = e.target.closest('ng-dropdown-panel');
+            var isTargetInDatepickerContent = e.target.closest('mat-datepicker-content');
+            if (!isTargetHost
+                && !isTargetInPopover
+                && !isTargetInDatepicker
+                && !isTargetInSelect
+                && !isTargetInDatepickerContent
+                && !this.manualClosing.enabled) {
+                this.popoverRef.close();
             }
-            this.cdr.markForCheck();
         };
-        DrDatePickerCustomHeaderComponent.prototype.setTimeframe = function () {
-            var _this = this;
-            this.timeframeSelection = false;
-            this._calendar.currentView = this.selectedTimeframe;
-            var chosenTimeframeOption = this.timeframeOptions.filter(function (option) { return option.value === _this.selectedTimeframe; })[0];
-            this.datePickerService.format.next(chosenTimeframeOption.format);
-            this.datePickerService.setTimeframe(chosenTimeframeOption.format);
-            if (this.selectedTimeframe == 'none') {
-                this.selectedQuarter = moment$1(this._calendar.activeDate).quarter();
+        DrPopoverComponent.prototype.ngOnInit = function () {
+            this.isContentTemplate = this.content instanceof i0.TemplateRef;
+            if (!this.isContentTemplate) {
+                this.componentRef = this.viewContainerRef.createComponent(this.componentFactoryResolver.resolveComponentFactory(this.content));
+                Object.assign(this.componentRef.instance, this.contentContext);
+                this.popoverContainer.nativeElement.appendChild(this.componentRef.location.nativeElement);
             }
+            if (this.alignment === 'host') {
+                this[getAlignmentDimension(this.position)] = '100%';
+            }
+            this.cdr.detectChanges();
         };
-        Object.defineProperty(DrDatePickerCustomHeaderComponent.prototype, "currentViewIsQuater", {
-            get: function () {
-                return !['month', 'year', 'multi-year'].includes(this._calendar.currentView);
-            },
-            enumerable: false,
-            configurable: true
-        });
-        DrDatePickerCustomHeaderComponent.prototype.switchViewOnClickOnPeriodLabel = function (view) {
-            this._calendar.currentView = view;
-        };
-        DrDatePickerCustomHeaderComponent.prototype.onSelectQuater = function (quarterNumber) {
-            var monthsInQuarter = 3;
-            this.selectedQuarter = moment$1(this._calendar.activeDate).quarter();
-            var unadaptedDate = this._dateAdapter.addCalendarMonths(this._calendar.activeDate, monthsInQuarter * (quarterNumber - this.selectedQuarter));
-            this._calendar.activeDate = unadaptedDate;
-            this.datePickerService.updatedQuater.next(moment$1(unadaptedDate));
-            this.datePickerService.calendarInstance.close();
-        };
-        DrDatePickerCustomHeaderComponent.prototype.pagingClicked = function (forward) {
-            this.pagingSetup[this._calendar.currentView] && this.pagingSetup[this._calendar.currentView](forward);
-        };
-        DrDatePickerCustomHeaderComponent.prototype.pagingDateChange = function (actionCall, amount, forward) {
-            this._calendar.activeDate = this._dateAdapter[actionCall](this._calendar.activeDate, forward ? amount : -amount);
-            this.setPeriodLabels();
-        };
-        return DrDatePickerCustomHeaderComponent;
+        return DrPopoverComponent;
     }());
-    DrDatePickerCustomHeaderComponent.decorators = [
+    DrPopoverComponent.decorators = [
         { type: i0.Component, args: [{
-                    selector: 'dr-date-picker_custom-header.component',
-                    template: "<div class=\"dr-datepicker__timeframe-select__wrapper\">\n    <dr-select \n        class=\"dr-datepicker__timeframe-select\"\n        [(ngModel)]=\"selectedTimeframe\"\n        [items]=\"timeframeOptions\"\n        bindLabel=\"title\"\n        bindValue=\"value\"\n        (ngModelChange)=\"setTimeframe()\">\n    </dr-select>\n</div>\n\n<div class=\"dr-date-paging\">\n    <div class=\"dr-date-paging flip-page-button\"\n        (click)=\"pagingClicked(false)\">\n            <i class=\"dr-icon-arrow-left presentation_buttons-navigate_input\"></i>    \n    </div>\n    <span class=\"example-header-label\">\n        <span (click)=\"switchViewOnClickOnPeriodLabel('year')\">{{periodMonthLabel + ' '}}</span> \n        <span (click)=\"switchViewOnClickOnPeriodLabel('multi-year')\">{{periodYearLabel}}</span>\n    </span>\n    <div class=\"dr-date-paging flip-page-button\"\n        (click)=\"pagingClicked(true)\">\n            <i class=\"dr-icon-arrow-right presentation_buttons-navigate_input\"></i>\n    </div>\n</div>\n<div #quarterlyDatePicker class=\"dr-quarterly-datepicker\" *ngIf=\"currentViewIsQuater\">\n    <div *ngFor=\"let quarter of quarters\" \n        class=\"quarter-selector\" (click)=\"onSelectQuater(quarter)\"\n        [class]=\"quarter == selectedQuarter ? 'selected' : ''\"\n        >Q{{quarter}}</div>\n</div>\n\n",
+                    selector: 'dr-popover',
+                    template: "<div class=\"dr-popover\" [class]=\"class\" #popoverContainer>\n    <ng-container *ngIf=\"isContentTemplate\">\n        <ng-container *ngTemplateOutlet=\"content; context: contentContext\"></ng-container>\n    </ng-container>\n</div>\n",
+                    animations: [
+                        animations.trigger('popover', POPUP_ANIMATION),
+                    ],
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    styles: [":host{height:54px;align-items:center;font-family:\"Poppins\";font-style:normal;font-weight:600;font-size:14px;line-height:22px}.dr-datepicker__timeframe-select__wrapper{background-color:#f9faff;padding:16px 32px;border-radius:18px 18px 0 0}.dr-date-paging{display:flex;flex-direction:row;justify-content:space-between;align-items:center;padding:16px 8px;grid-gap:4px;gap:4px}.dr-date-paging.flip-page-button{width:20px;height:20px;padding:0;color:#4e566c}.dr-date-paging.flip-page-button:hover{border-radius:50%;background:#F2F2FB;color:#4646ce}.example-header-label{cursor:pointer}.dr-quarterly-datepicker{display:flex;justify-content:space-between;padding:10px}.dr-quarterly-datepicker .quarter-selector{display:block;width:74px;height:40px;text-align:center;border-radius:40px;font-weight:400;padding-top:9px}.dr-quarterly-datepicker .quarter-selector:hover{background:#F2F2FB;color:#4646ce;font-weight:600;cursor:pointer}.dr-quarterly-datepicker .quarter-selector.selected{background-color:#4646ce;color:#f3f7ff;font-weight:600}\n"]
+                    styles: [".dr-popover{display:flex;background:#fff;border:1px solid #E5E5E5;border-radius:5px;box-sizing:border-box;box-shadow:0 4px 14px #0003;font-size:12px;color:#545a6b;max-height:100vh;max-width:100vw;overflow:auto}::ng-deep .dr-popover-transparent-backdrop{background-color:transparent}\n"]
                 },] }
     ];
-    DrDatePickerCustomHeaderComponent.ctorParameters = function () { return [
-        { type: datepicker.MatCalendar },
-        { type: core.DateAdapter },
-        { type: CustomDateFormat, decorators: [{ type: i0.Inject, args: [core.MAT_DATE_FORMATS,] }] },
+    DrPopoverComponent.ctorParameters = function () { return [
         { type: i0.ChangeDetectorRef },
-        { type: DrDatePickerService }
+        { type: i0.ComponentFactoryResolver },
+        { type: i0.ViewContainerRef },
+        { type: i0.ElementRef },
+        { type: DrPopoverRef }
     ]; };
+    DrPopoverComponent.propDecorators = {
+        content: [{ type: i0.Input }],
+        contentContext: [{ type: i0.Input }],
+        class: [{ type: i0.Input }],
+        hostRef: [{ type: i0.Input }],
+        manualClosing: [{ type: i0.Input }],
+        alignment: [{ type: i0.Input }],
+        position: [{ type: i0.Input }],
+        popoverContainer: [{ type: i0.ViewChild, args: ['popoverContainer', { read: i0.ElementRef, static: true },] }],
+        width: [{ type: i0.HostBinding, args: ['style.width',] }],
+        height: [{ type: i0.HostBinding, args: ['style.height',] }],
+        popover: [{ type: i0.HostBinding, args: ['@popover',] }],
+        clickOutside: [{ type: i0.HostListener, args: ['document:mouseup', ['$event'],] }]
+    };
 
-    var moment = require('moment');
-    var noop = function () { };
-    var ɵ0$1 = noop;
-    var DrDatePickerComponent = /** @class */ (function () {
-        function DrDatePickerComponent(cdr, _dateAdapter, datePickerService) {
-            var _this = this;
-            this.cdr = cdr;
-            this._dateAdapter = _dateAdapter;
-            this.datePickerService = datePickerService;
-            this._destroyed = new rxjs.Subject();
-            this.readonly = true;
-            this._format = MAT_DEFAULT_DATE_FORMAT;
-            this.customHeader = DrDatePickerCustomHeaderComponent;
-            this.onChangeFormat = new i0.EventEmitter();
-            this.timeframeSelection = false;
-            this.takeEndOfPeriod = false;
-            this.placeholder = 'Select';
-            this.min = null;
-            this.max = null;
-            this.calendarViewSetup = {
-                'year': function (calendar) { return calendar.currentView = 'multi-year'; },
-                'month': function (calendar) { return calendar.currentView = 'year'; },
-                'quarter': function (calendar) { return calendar.currentView = 'none'; },
-                'day': function (calendar) { return calendar.currentView = 'month'; }
-            };
-            this.pagingSetup = {
-                'year': function (forward) { return _this.pagingDateChange('addCalendarYears', 1, forward); },
-                'quarter': function (forward) { return _this.pagingDateChange('addCalendarMonths', 3, forward); },
-                'month': function (forward) { return _this.pagingDateChange('addCalendarMonths', 1, forward); },
-                'day': function (forward) { return _this.pagingDateChange('addCalendarDays', 1, forward); }
-            };
-            this.innerValue = null;
-            this.onTouchedCallback = noop;
-            this.onChangeCallback = noop;
-            datePickerService.format
-                .pipe(operators.takeUntil(this._destroyed))
-                .subscribe(function (value) {
-                _this._format = value;
-                _this.onChangeFormat.emit(_this.normalizeValue(value));
-                cdr.markForCheck();
-            });
-            datePickerService.updatedQuater
-                .pipe(operators.takeUntil(this._destroyed))
-                .subscribe(function (value) {
-                _this.tryToNormalaizeTimeframe(value, 'quarter');
-                _this.writeValue(value);
-                _this.onChangeCallback(value);
-            });
+    var DrPopoverService = /** @class */ (function () {
+        function DrPopoverService(overlay, overlayPositionBuilder, injector) {
+            this.overlay = overlay;
+            this.overlayPositionBuilder = overlayPositionBuilder;
+            this.injector = injector;
         }
-        Object.defineProperty(DrDatePickerComponent.prototype, "format", {
-            set: function (value) {
-                if (value) {
-                    value = this.normalizeValue(value);
-                    this._format = value;
-                    this.datePickerService.format.next(value);
-                    this.datePickerService.setTimeframe(value);
-                    this.cdr.markForCheck();
-                }
-            },
-            enumerable: false,
-            configurable: true
-        });
-        DrDatePickerComponent.prototype.ngAfterViewInit = function () {
-            var _this = this;
-            this.datePickerService.calendarInstance = this.dp;
-            if (this._format === MAT_DEFAULT_DATE_FORMAT) {
+        DrPopoverService.prototype.open = function (content, popoverModel) {
+            if (!content)
                 return;
-            }
-            setTimeout(function () {
-                var popupInstance = _this.dp._popupComponentRef.instance;
-                var calenderInstance = popupInstance._calendar._calendarHeaderPortal._attachedHost._attachedRef.instance;
-                calenderInstance.currentPeriodClicked = function () {
-                    this.calendarViewSetup[this.datePickerService.timeframe] && this.calendarViewSetup[this.datePickerService.timeframe](this.calendar);
-                };
-            }, 1000);
-        };
-        DrDatePickerComponent.prototype.tryToNormalaizeTimeframe = function (normalizedRef, timeframe) {
-            if (this.takeEndOfPeriod) {
-                normalizedRef.endOf(timeframe);
-            }
-            normalizedRef.set('hour', 12);
+            var model = Object.assign(Object.assign({}, DEFAULT_MODEL), popoverModel);
+            var overlayRef = this.createOverlay(model);
+            var popoverRef = new DrPopoverRef(overlayRef);
+            this.attachOverlayContainer(content, model, overlayRef, popoverRef);
+            this.registerListeners(model, overlayRef, popoverRef);
+            return popoverRef;
         };
-        Object.defineProperty(DrDatePickerComponent.prototype, "value", {
-            get: function () {
-                return this.innerValue;
-            },
-            set: function (v) {
-                if (v !== this.innerValue) {
-                    this.innerValue = v;
-                    this.onChangeCallback(v);
-                }
-                this.cdr.markForCheck();
-            },
-            enumerable: false,
-            configurable: true
-        });
-        DrDatePickerComponent.prototype.registerOnChange = function (fn) {
-            this.onChangeCallback = fn;
+        DrPopoverService.prototype.attachOverlayContainer = function (content, _a, overlayRef, popoverRef) {
+            var contentContext = _a.contentContext, position = _a.position, elementClass = _a.class, manualClosing = _a.manualClosing, hostRef = _a.hostRef, alignment = _a.alignment;
+            var componentPortal = new portal.ComponentPortal(DrPopoverComponent, null, this.createInjector(popoverRef));
+            var contentRef = overlayRef.attach(componentPortal);
+            popoverRef.componentRef = contentRef;
+            contentRef.instance.content = content;
+            contentRef.instance.contentContext = Object.assign(Object.assign({}, contentContext), { closePopover: popoverRef.close.bind(popoverRef) });
+            contentRef.instance.class = elementClass + ' ' + position;
+            contentRef.instance.manualClosing = manualClosing;
+            contentRef.instance.hostRef = hostRef;
+            contentRef.instance.alignment = alignment;
+            contentRef.instance.position = position;
         };
-        DrDatePickerComponent.prototype.registerOnTouched = function (fn) {
-            this.onTouchedCallback = fn;
+        DrPopoverService.prototype.createOverlay = function (popoverModel) {
+            var overlayConfig = this.getOverlayConfig(popoverModel);
+            return this.overlay.create(overlayConfig);
         };
-        DrDatePickerComponent.prototype.writeValue = function (value) {
-            if (value !== this.innerValue) {
-                if (value && typeof value === 'number') {
-                    this.innerValue = moment.unix(value);
-                }
-                else {
-                    this.innerValue = value;
-                }
-                this.tryToNormalaizeTimeframe(this.innerValue, this.datePickerService.timeframe);
-                this.cdr.markForCheck();
+        DrPopoverService.prototype.getOverlayConfig = function (popoverModel) {
+            if (!POPUP_POSITIONS[popoverModel.position])
+                throw new Error("DrPopover does not support the '" + (popoverModel === null || popoverModel === void 0 ? void 0 : popoverModel.position) + "' position!");
+            var config = Object.assign(Object.assign({}, DEFAULT_CONFIG), popoverModel.overlayConfig || {});
+            var hostElement = this.getHostElement(popoverModel.hostRef);
+            var positionStrategy = this.overlayPositionBuilder
+                .flexibleConnectedTo(popoverModel.hostRef)
+                .withPositions([POPUP_POSITIONS[popoverModel.position]]);
+            var overlayConfig = new i1.OverlayConfig(Object.assign({ scrollStrategy: this.overlay.scrollStrategies.noop(), positionStrategy: positionStrategy }, config));
+            if (popoverModel.alignment === 'host' && hostElement) {
+                var alignmentDimension = getAlignmentDimension(popoverModel.position);
+                overlayConfig[alignmentDimension] = hostElement.getBoundingClientRect()[alignmentDimension];
             }
+            return overlayConfig;
         };
-        Object.defineProperty(DrDatePickerComponent.prototype, "quarterDisplay", {
-            get: function () {
-                return this.datePickerService.getQuarterDisplay(this.value, this._format);
-            },
-            enumerable: false,
-            configurable: true
-        });
-        DrDatePickerComponent.prototype.normalizeValue = function (value) {
-            if (value.includes('d')) {
-                value = value.replace(/d/g, 'D');
+        DrPopoverService.prototype.createInjector = function (popoverRef) {
+            var injectionTokens = [
+                { provide: DrPopoverRef, useValue: popoverRef },
+            ];
+            return i0.Injector.create({ providers: injectionTokens, parent: this.injector });
+        };
+        DrPopoverService.prototype.registerListeners = function (popoverModel, overlayRef, popoverRef) {
+            var config = popoverModel.overlayConfig || {};
+            var targetElement = popoverModel.targetElement;
+            var hostElement = this.getHostElement(popoverModel.hostRef);
+            if ((config === null || config === void 0 ? void 0 : config.closeOnBackdropClick) && (config === null || config === void 0 ? void 0 : config.hasBackdrop)) {
+                overlayRef.backdropClick().subscribe(function () { return popoverRef.close(); });
             }
-            else if (value.includes('D')) {
-                value = value.replace(/D/g, 'd');
+            if (targetElement) {
+                targetElement.addEventListener('mouseup', function () { return popoverRef.close(); }, { once: true });
             }
-            return value;
-        };
-        DrDatePickerComponent.prototype.chosenMonthHandler = function (normalizedMonth, datepicker) {
-            if (this.datePickerService.timeframe === 'month') {
-                this.tryToNormalaizeTimeframe(normalizedMonth, 'month');
-                this.writeValue(normalizedMonth);
-                this.onChangeCallback(normalizedMonth);
-                datepicker.close();
+            if (popoverModel.alignment === 'host' && hostElement) {
+                var alignmentDimension_1 = getAlignmentDimension(popoverModel.position);
+                var resizeObserver_1 = new ResizeObserver(function (entries) {
+                    entries.forEach(function (host) {
+                        var _a;
+                        return overlayRef.updateSize((_a = {}, _a[alignmentDimension_1] = host.target.getBoundingClientRect()[alignmentDimension_1], _a));
+                    });
+                });
+                resizeObserver_1.observe(hostElement);
+                popoverRef.onClose.pipe(operators.first()).subscribe(function () { return resizeObserver_1.unobserve(hostElement); });
             }
         };
-        DrDatePickerComponent.prototype.chosenYearHandler = function (normalizedYear, datepicker) {
-            if (this.datePickerService.timeframe === 'year') {
-                this.tryToNormalaizeTimeframe(normalizedYear, 'year');
-                this.writeValue(normalizedYear);
-                this.onChangeCallback(normalizedYear);
-                datepicker.close();
+        DrPopoverService.prototype.getHostElement = function (hostRef) {
+            if (!hostRef || hostRef.x)
+                return null;
+            if (hostRef.nativeElement)
+                return hostRef.nativeElement;
+            return hostRef;
+        };
+        return DrPopoverService;
+    }());
+    DrPopoverService.ɵprov = i0__namespace.ɵɵdefineInjectable({ factory: function DrPopoverService_Factory() { return new DrPopoverService(i0__namespace.ɵɵinject(i1__namespace.Overlay), i0__namespace.ɵɵinject(i1__namespace.OverlayPositionBuilder), i0__namespace.ɵɵinject(i0__namespace.INJECTOR)); }, token: DrPopoverService, providedIn: "root" });
+    DrPopoverService.decorators = [
+        { type: i0.Injectable, args: [{
+                    providedIn: 'root',
+                },] }
+    ];
+    DrPopoverService.ctorParameters = function () { return [
+        { type: i1.Overlay },
+        { type: i1.OverlayPositionBuilder },
+        { type: i0.Injector }
+    ]; };
+
+    var DrPopoverDirective = /** @class */ (function () {
+        function DrPopoverDirective(elementRef, drPopoverService) {
+            this.elementRef = elementRef;
+            this.drPopoverService = drPopoverService;
+            this.contentContext = {};
+            this.position = 'bottom';
+            this.class = '';
+            this.overlayConfig = {};
+            this.manualClosing = { enabled: false };
+            this.popoverClose = new i0.EventEmitter();
+            this.showStateChange = new i0.EventEmitter();
+        }
+        DrPopoverDirective.prototype.togglePopover = function () {
+            if (this.popoverRef) {
+                this.closePopover();
+            }
+            else {
+                this.renderPopover();
+                this.showStateChange.emit({ isShown: !!this.popoverRef });
             }
         };
-        DrDatePickerComponent.prototype.pagingClicked = function (forward) {
-            this.pagingSetup[this.datePickerService.timeframe] && this.pagingSetup[this.datePickerService.timeframe](forward);
-            this.datePickerService.calendarInstance.close();
+        DrPopoverDirective.prototype.closePopover = function (res) {
+            if (this.popoverRef) {
+                this.popoverRef.close(res);
+                this.popoverRef = null;
+            }
         };
-        DrDatePickerComponent.prototype.pagingDateChange = function (actionCall, amount, forward) {
-            var newValue = this._dateAdapter[actionCall](this.innerValue, forward ? amount : -amount);
-            this.writeValue(newValue);
-            this.onChangeCallback(newValue);
+        DrPopoverDirective.prototype.renderPopover = function () {
+            var _this = this;
+            var popoverRef = this.popoverRef = this.drPopoverService.open(this.content, {
+                hostRef: this.elementRef,
+                overlayConfig: this.overlayConfig,
+                class: this.class,
+                manualClosing: this.manualClosing,
+                position: this.position,
+                contentContext: this.contentContext,
+                alignment: this.alignment,
+            });
+            popoverRef.onClose.pipe(operators.first()).subscribe(function (res) {
+                _this.closePopover();
+                _this.popoverClose.emit(res);
+                _this.showStateChange.emit({ isShown: !!_this.popoverRef });
+            });
         };
-        DrDatePickerComponent.prototype.ngOnDestroy = function () {
-            this._destroyed.next();
-            this._destroyed.complete();
+        DrPopoverDirective.prototype.ngOnDestroy = function () {
+            this.closePopover();
         };
-        return DrDatePickerComponent;
+        return DrPopoverDirective;
     }());
-    DrDatePickerComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'dr-date-picker',
-                    template: "<div class=\"dr-datepicker__with-timeframe-selection\"\n    *ngIf=\"timeframeSelection;else noTimeframeSelection\">\n    <div class=\"dr-input-date-paging__flip-page-button\"\n        (click)=\"pagingClicked(false)\"\n    >\n        <i class=\"dr-icon-arrow-left presentation_buttons-navigate_input\"></i>    \n    </div>\n        <div class=\"dr-input-date-paging__quarter-display\"\n            *ngIf=\"_format.includes('Q')\"\n            (click)=\"datePicker.open()\"\n        >{{quarterDisplay}}</div>\n            <input [(ngModel)]=\"value\"\n                (click)=\"datePicker.open()\"\n                [matDatepicker]=\"datePicker\"\n                [placeholder]=\"placeholder\"\n                [drDatePickerFormat]=\"_format\"\n                [readonly]=\"readonly\"\n                [class]=\"_format.includes('Q') ? 'when-quarter' : ''\"\n                [min]=\"min\"\n                [max]=\"max\"/>\n    <div class=\"dr-input-date-paging__flip-page-button\"\n        (click)=\"pagingClicked(true)\">\n        <i class=\"dr-icon-arrow-right presentation_buttons-navigate_input\"></i>\n    </div>\n    <mat-datepicker #datePicker\n        class=\"dr-timeframe-datepicker\"\n        [calendarHeaderComponent]=\"customHeader\"\n        (yearSelected)=\"chosenYearHandler($event, datePicker)\"\n        (monthSelected)=\"chosenMonthHandler($event, datePicker)\">\n    </mat-datepicker>\n</div>\n\n<ng-template class=\"dr-datepicker__no-timeframe-selection\"\n    #noTimeframeSelection>\n    <i class=\"dr-icon-schedule\"></i>\n    <input [(ngModel)]=\"value\"\n        (click)=\"datePicker.open()\"\n        [matDatepicker]=\"datePicker\"\n        [placeholder]=\"placeholder\"\n        [drDatePickerFormat]=\"_format\"\n        [readonly]=\"readonly\"\n        [min]=\"min\"\n        [max]=\"max\"/>\n    <mat-datepicker #datePicker\n        (yearSelected)=\"chosenYearHandler($event, datePicker)\"\n        (monthSelected)=\"chosenMonthHandler($event, datePicker)\">\n    </mat-datepicker>\n</ng-template>\n\n",
-                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    providers: [
-                        { provide: forms.NG_VALUE_ACCESSOR, useExisting: DrDatePickerComponent, multi: true }
-                    ],
-                    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 #C3C4CE;border-radius:6px;color:#85889c;overflow:hidden;outline:none;cursor:pointer}:host.period-datepicker{border:none}:host:hover{border-color:#85889c}:host:focus-within{border-color:#21b8f1!important;color:#151b3f}:host.disabled{pointer-events:none;border:none;color:#85889c;background:#E5E6EA}: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:#c3c4ce}:host:after,:host:before{position:absolute;display:flex;border-color:#999999 transparent transparent;color:#999}:host:after{content:\"\";height:0;width:0;border-style:solid;border-width:5px 5px 2.5px;right:11px;top:13px}:host i{position:absolute;color:#999;left:8px;top:3px}: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:#85889c;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}:host .dr-datepicker__with-timeframe-selection{display:flex;align-items:center}:host .dr-datepicker__with-timeframe-selection .dr-input-date-paging__flip-page-button{width:25px;height:25px;border-radius:16px;padding:0;background-color:#fff}:host .dr-datepicker__with-timeframe-selection .dr-input-date-paging__flip-page-button i{position:relative;color:#0c142b;top:unset;left:unset}:host .dr-datepicker__with-timeframe-selection .dr-input-date-paging__flip-page-button:hover{background-color:#f2f2fb;color:#4646ce}:host .dr-datepicker__with-timeframe-selection input{width:90px;padding:0;border-radius:5px;text-decoration:underline;text-align:center}:host .dr-datepicker__with-timeframe-selection input:hover{background-color:#f2f2fb;color:#4646ce}:host .dr-input-date-paging__quarter-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-input-date-paging__quarter-display:hover{background-color:#f2f2fb;border-radius:5px;cursor:pointer;-webkit-text-decoration-line:underline;text-decoration-line:underline;color:#4646ce}::ng-deep .mat-datepicker-content{margin:7px 0;box-shadow:0 4px 8px 1px #00000040;border-radius:12px!important}::ng-deep .mat-datepicker-content button[disabled]{border:inherit;color:inherit;background-color:inherit}::ng-deep .mat-datepicker-content button[disabled]:hover{border:inherit}::ng-deep .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){background:#F2F2FB;color:#4646ce;font-weight:600}::ng-deep .mat-calendar-body-selected{background-color:#4646ce;color:#f2f2fb;font-weight:600}::ng-deep .mat-calendar-body-today.mat-calendar-body-selected{box-shadow:none}::ng-deep .mat-button-focus-overlay{background:#F3F7FF}::ng-deep .mat-calendar-controls .mat-icon-button:hover .mat-button-focus-overlay{opacity:1!important;background:#F3F7FF;transition:opacity .2s cubic-bezier(.35,0,.25,1)}::ng-deep .mat-calendar-controls .mat-calendar-period-button:hover{background:#F3F7FF;transition:background .2s cubic-bezier(.35,0,.25,1)}::ng-deep .mat-calendar-table-header th{font-size:14px;font-weight:600;color:#19181a}::ng-deep .mat-calendar-table-header-divider{display:none}::ng-deep .mat-calendar-body-label{color:#fff;padding:0}\n"]
+    DrPopoverDirective.decorators = [
+        { type: i0.Directive, args: [{
+                    selector: '[drPopover]'
                 },] }
     ];
-    DrDatePickerComponent.ctorParameters = function () { return [
-        { type: i0.ChangeDetectorRef },
-        { type: core.DateAdapter },
-        { type: DrDatePickerService }
+    DrPopoverDirective.ctorParameters = function () { return [
+        { type: i0.ElementRef },
+        { type: DrPopoverService }
     ]; };
-    DrDatePickerComponent.propDecorators = {
-        _format: [{ type: i0.Input }],
-        onChangeFormat: [{ type: i0.Output }],
-        format: [{ type: i0.Input }],
-        timeframeSelection: [{ type: i0.Input }],
-        takeEndOfPeriod: [{ type: i0.Input }],
-        placeholder: [{ type: i0.Input }],
-        min: [{ type: i0.Input }],
-        max: [{ type: i0.Input }],
-        dp: [{ type: i0.ViewChild, args: ['datePicker',] }]
+    DrPopoverDirective.propDecorators = {
+        content: [{ type: i0.Input, args: ['drPopover',] }],
+        contentContext: [{ type: i0.Input, args: ['drPopoverContext',] }],
+        position: [{ type: i0.Input, args: ['drPopoverPosition',] }],
+        class: [{ type: i0.Input, args: ['drPopoverClass',] }],
+        overlayConfig: [{ type: i0.Input, args: ['drPopoverOverlayConfig',] }],
+        manualClosing: [{ type: i0.Input, args: ['drPopoverManualClosing',] }],
+        alignment: [{ type: i0.Input, args: ['drPopoverAlignment',] }],
+        popoverClose: [{ type: i0.Output, args: ['drPopoverClose',] }],
+        showStateChange: [{ type: i0.Output, args: ['drPopoverShowStateChange',] }],
+        togglePopover: [{ type: i0.HostListener, args: ['click',] }]
     };
 
-    var DrDatePickerFormatDirective = /** @class */ (function () {
-        function DrDatePickerFormatDirective(matDateFormat, ngControl) {
-            this.matDateFormat = matDateFormat;
-            this.ngControl = ngControl;
+    var DrDropdownService = /** @class */ (function () {
+        function DrDropdownService() {
+            this.actionItem = new rxjs.Subject();
         }
-        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);
+        Object.defineProperty(DrDropdownService.prototype, "addMenu", {
+            set: function (item) {
+                this.menuInView = item;
             },
             enumerable: false,
             configurable: true
         });
-        return DrDatePickerFormatDirective;
+        DrDropdownService.prototype.destroy = function () {
+            if (this.menuInView) {
+                this.menuInView.destroy();
+            }
+        };
+        return DrDropdownService;
     }());
-    DrDatePickerFormatDirective.decorators = [
-        { type: i0.Directive, args: [{
-                    selector: '[drDatePickerFormat]',
-                    providers: [
-                        {
-                            provide: core.DateAdapter,
-                            useClass: materialMomentAdapter.MomentDateAdapter
-                        },
-                        {
-                            provide: core.MAT_DATE_FORMATS,
-                            useClass: CustomDateFormat
-                        }
-                    ]
+    DrDropdownService.ɵprov = i0__namespace.ɵɵdefineInjectable({ factory: function DrDropdownService_Factory() { return new DrDropdownService(); }, token: DrDropdownService, providedIn: "root" });
+    DrDropdownService.decorators = [
+        { type: i0.Injectable, args: [{
+                    providedIn: 'root'
                 },] }
     ];
-    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 DrPopoverRef = /** @class */ (function () {
-        function DrPopoverRef(overlayRef) {
-            this.overlayRef = overlayRef;
-            this.onClose$ = new rxjs.Subject();
-            // FIXME: this decision was made because of the incompatible rxjs version
-            /**
-             * Correct type is @type {Observable<any>}
-             */
-            this.onClose = this.onClose$.asObservable();
-            this.onBackdropClick = this.overlayRef.backdropClick();
-        }
-        DrPopoverRef.prototype.close = function (res) {
-            this.overlayRef.detach();
-            this.overlayRef.dispose();
-            this.onClose$.next(res);
-            this.onClose$.complete();
-        };
-        return DrPopoverRef;
-    }());
-
-    exports.DrPopoverAlignmentDimension = void 0;
-    (function (DrPopoverAlignmentDimension) {
-        DrPopoverAlignmentDimension["Width"] = "width";
-        DrPopoverAlignmentDimension["Height"] = "height";
-    })(exports.DrPopoverAlignmentDimension || (exports.DrPopoverAlignmentDimension = {}));
-    var DEFAULT_CONFIG = {
-        hasBackdrop: false,
-        closeOnBackdropClick: false,
-        backdropClass: 'dr-popover-transparent-backdrop',
-    };
-    var DEFAULT_MODEL = {
-        position: 'bottom',
-        class: '',
-        overlayConfig: {},
-        manualClosing: { enabled: false },
-    };
-    function getAlignmentDimension(position) {
-        if (!POPUP_POSITIONS[position])
-            return exports.DrPopoverAlignmentDimension.Width;
-        if ((position === null || position === void 0 ? void 0 : position.includes('left')) || (position === null || position === void 0 ? void 0 : position.includes('right'))) {
-            return exports.DrPopoverAlignmentDimension.Height;
-        }
-        return exports.DrPopoverAlignmentDimension.Width;
-    }
+    DrDropdownService.ctorParameters = function () { return []; };
 
-    var DrPopoverComponent = /** @class */ (function () {
-        function DrPopoverComponent(cdr, componentFactoryResolver, viewContainerRef, elementRef, popoverRef) {
+    var DrDropdownComponent = /** @class */ (function () {
+        function DrDropdownComponent(menuService, cdr) {
+            this.menuService = menuService;
             this.cdr = cdr;
-            this.componentFactoryResolver = componentFactoryResolver;
-            this.viewContainerRef = viewContainerRef;
-            this.elementRef = elementRef;
-            this.popoverRef = popoverRef;
-            this.class = '';
-            this.isContentTemplate = false;
-            this.popover = true;
+            this.position = 'left';
         }
-        DrPopoverComponent.prototype.clickOutside = function (e) {
-            var isTargetHost = this.hostRef instanceof i0.ElementRef && (this.hostRef.nativeElement === e.target || this.hostRef.nativeElement.contains(e.target));
-            var isTargetInPopover = this.elementRef.nativeElement.contains(e.target);
-            var isTargetInDatepicker = e.target.closest('mat-datepicker-popup');
-            var isTargetInSelect = e.target.closest('ng-dropdown-panel');
-            var isTargetInDatepickerContent = e.target.closest('mat-datepicker-content');
-            if (!isTargetHost
-                && !isTargetInPopover
-                && !isTargetInDatepicker
-                && !isTargetInSelect
-                && !isTargetInDatepickerContent
-                && !this.manualClosing.enabled) {
-                this.popoverRef.close();
+        Object.defineProperty(DrDropdownComponent.prototype, "options", {
+            set: function (data) {
+                if (data) {
+                    this.option = data.option;
+                    this.position = data.position;
+                    this.drDropdownInHover = data.drDropdownInHover;
+                    this.containerClass = data.class;
+                    this.list = data.list || [];
+                    this.list.forEach(function (item) {
+                        var _a, _b;
+                        if ((_a = item.children) === null || _a === void 0 ? void 0 : _a.length) {
+                            item.childOptions = {
+                                list: item.children,
+                                class: ((_b = item === null || item === void 0 ? void 0 : item.childOptions) === null || _b === void 0 ? void 0 : _b.class) || '',
+                                position: 'child'
+                            };
+                        }
+                    });
+                    this.cdr.markForCheck();
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
+        DrDropdownComponent.prototype.onMouseLeave = function () {
+            if (this.drDropdownInHover)
+                this.menuService.destroy();
+        };
+        DrDropdownComponent.prototype.onClickedOutside = function () {
+            if (this.firstInit) {
+                this.menuService.destroy();
+            }
+            else {
+                this.firstInit = true;
             }
         };
-        DrPopoverComponent.prototype.ngOnInit = function () {
-            this.isContentTemplate = this.content instanceof i0.TemplateRef;
-            if (!this.isContentTemplate) {
-                this.componentRef = this.viewContainerRef.createComponent(this.componentFactoryResolver.resolveComponentFactory(this.content));
-                Object.assign(this.componentRef.instance, this.contentContext);
-                this.popoverContainer.nativeElement.appendChild(this.componentRef.location.nativeElement);
+        DrDropdownComponent.prototype.hide = function () {
+            this.menuService.destroy();
+        };
+        DrDropdownComponent.prototype.disabled = function (act) {
+            if (!act.disabled) {
+                return false;
             }
-            if (this.alignment === 'host') {
-                this[getAlignmentDimension(this.position)] = '100%';
+            if (typeof act.disabled === 'boolean') {
+                return act.disabled;
+            }
+            else {
+                return act.disabled(act.data);
             }
-            this.cdr.detectChanges();
         };
-        return DrPopoverComponent;
+        DrDropdownComponent.prototype.selected = function (act) {
+            if (!act.selected) {
+                return false;
+            }
+            if (typeof act.selected === 'boolean') {
+                return act.selected;
+            }
+            else {
+                return act.selected(act.data);
+            }
+        };
+        DrDropdownComponent.prototype.tooltipToShow = function (act) {
+            if (act.toolTipIfDisabled && !this.disabled(act))
+                return '';
+            return act.toolTip;
+        };
+        DrDropdownComponent.prototype.tooltipPosition = function (widthMoreRight) {
+            return widthMoreRight ? 'right' : 'left';
+        };
+        DrDropdownComponent.prototype.action = function (act) {
+            if (!this.disabled(act)) {
+                if (act.action) {
+                    act.action(act.data);
+                }
+                else {
+                    this.menuService.actionItem.next({ event: act.event || act.title || 'default', data: act.data });
+                }
+                this.hide();
+            }
+        };
+        DrDropdownComponent.prototype.onActionIconClick = function ($event, actionIcon, data) {
+            $event.stopPropagation();
+            if (!this.disabled(actionIcon)) {
+                actionIcon.action(data);
+                this.hide();
+            }
+        };
+        return DrDropdownComponent;
     }());
-    DrPopoverComponent.decorators = [
+    DrDropdownComponent.decorators = [
         { type: i0.Component, args: [{
-                    selector: 'dr-popover',
-                    template: "<div class=\"dr-popover\" [class]=\"class\" #popoverContainer>\n    <ng-container *ngIf=\"isContentTemplate\">\n        <ng-container *ngTemplateOutlet=\"content; context: contentContext\"></ng-container>\n    </ng-container>\n</div>\n",
-                    animations: [
-                        animations.trigger('popover', POPUP_ANIMATION),
-                    ],
+                    selector: 'dr-dropdown',
+                    template: "<div #menuContainer\n     (mouseleave)=\"onMouseLeave()\"\n     (clickOutside)=\"onClickedOutside()\"\n     [drDropdownPosition]=\"option\"\n     #dropdownPosition=\"dropdownPosition\"\n     [position]=\"position\"\n     [class]=\"containerClass\"\n     class=\"dr-dropdown\">\n    <div class=\"dr-dropdown__container\">\n        <div *ngFor=\"let act of list | drDropdownItemShowPipe\"\n             (click)=\"action(act)\"\n             [drTooltip]=\"tooltipToShow(act)\"\n             [drTooltipPosition]=\"tooltipPosition(dropdownPosition.widthMoreRight)\"\n             [drTooltipOptions]=\"{ withoutArrow: true }\"\n             [drTooltipClass]=\"'dr-dropdown__tooltip'\"\n             class=\"dr-dropdown__container__item\"\n             [class.item-disabled]=\"disabled(act)\"\n             [class.item-selected]=\"selected(act)\">\n            <i *ngIf=\"act.icon\" [class]=\"act.icon\"></i>\n            <span class=\"dr-dropdown__container__item__text\">{{act.title}}</span>\n            <i *ngFor=\"let actionIcon of act.actionIcons\"\n               [class]=\"actionIcon.icon\"\n               [class.showOnHover]=\"actionIcon.showOnHover\"\n               (click)=\"onActionIconClick($event, actionIcon, act.data)\"></i>\n            <i *ngIf=\"act.children?.length\" class=\"dr-icon-arrow-right\"></i>\n            <dr-dropdown *ngIf=\"act.children?.length\" [options]=\"act.childOptions\"></dr-dropdown>\n        </div>\n    </div>\n</div>\n",
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    styles: [".dr-popover{display:flex;background:#fff;border:1px solid #E5E5E5;border-radius:5px;box-sizing:border-box;box-shadow:0 4px 14px #0003;font-size:12px;color:#545a6b;max-height:100vh;max-width:100vw;overflow:auto}::ng-deep .dr-popover-transparent-backdrop{background-color:transparent}\n"]
+                    styles: ["::ng-deep .dr-dropdown__container__item .dr-dropdown{visibility:hidden;transition-delay:.2s}::ng-deep .dr-dropdown__container__item:hover>*>.dr-dropdown{visibility:visible;transition-delay:0s}::ng-deep .dr-dropdown__tooltip>.default-content{max-width:300px;white-space:normal!important}.dr-dropdown{position:absolute;z-index:-1;top:0;left:0;width:auto}.dr-dropdown__container{display:flex;flex-direction:column;background:#fff;border-radius:4px;box-shadow:0 4px 8px 1px #00000040;padding:8px 0;overflow-y:auto;max-height:60vh}.dr-dropdown__container__item{display:flex;align-items:center;justify-content:flex-start;cursor:pointer;min-width:15rem;font-style:normal;font-weight:400;font-size:14px;line-height:24px;clear:both;width:100%;white-space:nowrap;padding:0 12px;height:36px;flex-shrink:0}.dr-dropdown__container__item:hover{background-color:#f9faff}.dr-dropdown__container__item:hover .showOnHover{visibility:visible}.dr-dropdown__container__item.item-selected{background:#F3F7FF}.dr-dropdown__container__item.item-disabled,.dr-dropdown__container__item.item-disabled i,.dr-dropdown__container__item.item-disabled .dr-dropdown__container__item__text{color:#bcbcbc}.dr-dropdown__container__item i:first-child{margin-right:8px}.dr-dropdown__container__item__text{margin-right:auto;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.dr-dropdown__container__item i,.dr-dropdown__container__item__text{color:#151b3f}.dr-dropdown__container__item i{color:#4e566c}.dr-dropdown__container__item i:hover{color:#4646ce}.dr-dropdown__container__item .showOnHover{visibility:hidden}.dr-dropdown.content-top{transform:translate(-50%,-100%)}.dr-dropdown.content-top-left{transform:translate(-100%,-100%)}.dr-dropdown.content-bottom{transform:translate(-50%,50%)}.dr-dropdown.content-bottom-left{transform:translate(-90%,35%)}.dr-dropdown.content-bottom-right{transform:translateY(15%)}.dr-dropdown.content-left{transform:translate(-100%)}.dr-dropdown.content-left-center{transform:translate(-100%,-50%)}.dr-dropdown.content-right{transform:translate(5%)}\n"]
                 },] }
     ];
-    DrPopoverComponent.ctorParameters = function () { return [
-        { type: i0.ChangeDetectorRef },
-        { type: i0.ComponentFactoryResolver },
-        { type: i0.ViewContainerRef },
-        { type: i0.ElementRef },
-        { type: DrPopoverRef }
+    DrDropdownComponent.ctorParameters = function () { return [
+        { type: DrDropdownService },
+        { type: i0.ChangeDetectorRef }
     ]; };
-    DrPopoverComponent.propDecorators = {
-        content: [{ type: i0.Input }],
-        contentContext: [{ type: i0.Input }],
-        class: [{ type: i0.Input }],
-        hostRef: [{ type: i0.Input }],
-        manualClosing: [{ type: i0.Input }],
-        alignment: [{ type: i0.Input }],
-        position: [{ type: i0.Input }],
-        popoverContainer: [{ type: i0.ViewChild, args: ['popoverContainer', { read: i0.ElementRef, static: true },] }],
-        width: [{ type: i0.HostBinding, args: ['style.width',] }],
-        height: [{ type: i0.HostBinding, args: ['style.height',] }],
-        popover: [{ type: i0.HostBinding, args: ['@popover',] }],
-        clickOutside: [{ type: i0.HostListener, args: ['document:mouseup', ['$event'],] }]
+    DrDropdownComponent.propDecorators = {
+        viewMenu: [{ type: i0.ViewChild, args: ['listMenu',] }],
+        menuContainer: [{ type: i0.ViewChild, args: ['menuContainer',] }],
+        options: [{ type: i0.Input }]
     };
 
-    var DrPopoverService = /** @class */ (function () {
-        function DrPopoverService(overlay, overlayPositionBuilder, injector) {
-            this.overlay = overlay;
-            this.overlayPositionBuilder = overlayPositionBuilder;
-            this.injector = injector;
+    var DrDropdownDirective = /** @class */ (function () {
+        function DrDropdownDirective(componentFactoryResolver, viewContainerRef, service, el, _document) {
+            this.componentFactoryResolver = componentFactoryResolver;
+            this.viewContainerRef = viewContainerRef;
+            this.service = service;
+            this.el = el;
+            this._document = _document;
+            this.position = 'left';
         }
-        DrPopoverService.prototype.open = function (content, popoverModel) {
-            if (!content)
+        DrDropdownDirective.prototype.elementHover = function () {
+            if (!this.drDropdownInHover)
                 return;
-            var model = Object.assign(Object.assign({}, DEFAULT_MODEL), popoverModel);
-            var overlayRef = this.createOverlay(model);
-            var popoverRef = new DrPopoverRef(overlayRef);
-            this.attachOverlayContainer(content, model, overlayRef, popoverRef);
-            this.registerListeners(model, overlayRef, popoverRef);
-            return popoverRef;
-        };
-        DrPopoverService.prototype.attachOverlayContainer = function (content, _a, overlayRef, popoverRef) {
-            var contentContext = _a.contentContext, position = _a.position, elementClass = _a.class, manualClosing = _a.manualClosing, hostRef = _a.hostRef, alignment = _a.alignment;
-            var componentPortal = new portal.ComponentPortal(DrPopoverComponent, null, this.createInjector(popoverRef));
-            var contentRef = overlayRef.attach(componentPortal);
-            popoverRef.componentRef = contentRef;
-            contentRef.instance.content = content;
-            contentRef.instance.contentContext = Object.assign(Object.assign({}, contentContext), { closePopover: popoverRef.close.bind(popoverRef) });
-            contentRef.instance.class = elementClass + ' ' + position;
-            contentRef.instance.manualClosing = manualClosing;
-            contentRef.instance.hostRef = hostRef;
-            contentRef.instance.alignment = alignment;
-            contentRef.instance.position = position;
-        };
-        DrPopoverService.prototype.createOverlay = function (popoverModel) {
-            var overlayConfig = this.getOverlayConfig(popoverModel);
-            return this.overlay.create(overlayConfig);
+            this.openDropdown();
         };
-        DrPopoverService.prototype.getOverlayConfig = function (popoverModel) {
-            if (!POPUP_POSITIONS[popoverModel.position])
-                throw new Error("DrPopover does not support the '" + (popoverModel === null || popoverModel === void 0 ? void 0 : popoverModel.position) + "' position!");
-            var config = Object.assign(Object.assign({}, DEFAULT_CONFIG), popoverModel.overlayConfig || {});
-            var hostElement = this.getHostElement(popoverModel.hostRef);
-            var positionStrategy = this.overlayPositionBuilder
-                .flexibleConnectedTo(popoverModel.hostRef)
-                .withPositions([POPUP_POSITIONS[popoverModel.position]]);
-            var overlayConfig = new i1.OverlayConfig(Object.assign({ scrollStrategy: this.overlay.scrollStrategies.noop(), positionStrategy: positionStrategy }, config));
-            if (popoverModel.alignment === 'host' && hostElement) {
-                var alignmentDimension = getAlignmentDimension(popoverModel.position);
-                overlayConfig[alignmentDimension] = hostElement.getBoundingClientRect()[alignmentDimension];
-            }
-            return overlayConfig;
+        DrDropdownDirective.prototype.elementClick = function () {
+            this.openDropdown();
         };
-        DrPopoverService.prototype.createInjector = function (popoverRef) {
-            var injectionTokens = [
-                { provide: DrPopoverRef, useValue: popoverRef },
-            ];
-            return i0.Injector.create({ providers: injectionTokens, parent: this.injector });
+        DrDropdownDirective.prototype.documentClick = function (e) {
+            this.closeDropdown(e);
         };
-        DrPopoverService.prototype.registerListeners = function (popoverModel, overlayRef, popoverRef) {
-            var config = popoverModel.overlayConfig || {};
-            var targetElement = popoverModel.targetElement;
-            var hostElement = this.getHostElement(popoverModel.hostRef);
-            if ((config === null || config === void 0 ? void 0 : config.closeOnBackdropClick) && (config === null || config === void 0 ? void 0 : config.hasBackdrop)) {
-                overlayRef.backdropClick().subscribe(function () { return popoverRef.close(); });
-            }
-            if (targetElement) {
-                targetElement.addEventListener('mouseup', function () { return popoverRef.close(); }, { once: true });
+        DrDropdownDirective.prototype.openDropdown = function () {
+            var option = this.el.nativeElement.getBoundingClientRect();
+            this._document.querySelectorAll('dr-dropdown').forEach(function (item) { return item.remove(); });
+            if (this.contentCmpRef && this.contentCmpRef.destroyCbs) {
+                this.contentCmpRef.destroy();
+                this.contentCmpRef = null;
             }
-            if (popoverModel.alignment === 'host' && hostElement) {
-                var alignmentDimension_1 = getAlignmentDimension(popoverModel.position);
-                var resizeObserver_1 = new ResizeObserver(function (entries) {
-                    entries.forEach(function (host) {
-                        var _a;
-                        return overlayRef.updateSize((_a = {}, _a[alignmentDimension_1] = host.target.getBoundingClientRect()[alignmentDimension_1], _a));
-                    });
+            else {
+                this.service.destroy();
+                this.showMenu({
+                    option: option,
+                    drDropdownInHover: this.drDropdownInHover,
+                    position: this.position,
+                    list: this.drDropdown,
+                    class: this.drDropdownClass
                 });
-                resizeObserver_1.observe(hostElement);
-                popoverRef.onClose.pipe(operators.first()).subscribe(function () { return resizeObserver_1.unobserve(hostElement); });
             }
         };
-        DrPopoverService.prototype.getHostElement = function (hostRef) {
-            if (!hostRef || hostRef.x)
-                return null;
-            if (hostRef.nativeElement)
-                return hostRef.nativeElement;
-            return hostRef;
-        };
-        return DrPopoverService;
-    }());
-    DrPopoverService.ɵprov = i0__namespace.ɵɵdefineInjectable({ factory: function DrPopoverService_Factory() { return new DrPopoverService(i0__namespace.ɵɵinject(i1__namespace.Overlay), i0__namespace.ɵɵinject(i1__namespace.OverlayPositionBuilder), i0__namespace.ɵɵinject(i0__namespace.INJECTOR)); }, token: DrPopoverService, providedIn: "root" });
-    DrPopoverService.decorators = [
-        { type: i0.Injectable, args: [{
-                    providedIn: 'root',
-                },] }
-    ];
-    DrPopoverService.ctorParameters = function () { return [
-        { type: i1.Overlay },
-        { type: i1.OverlayPositionBuilder },
-        { type: i0.Injector }
-    ]; };
-
-    var DrPopoverDirective = /** @class */ (function () {
-        function DrPopoverDirective(elementRef, drPopoverService) {
-            this.elementRef = elementRef;
-            this.drPopoverService = drPopoverService;
-            this.contentContext = {};
-            this.position = 'bottom';
-            this.class = '';
-            this.overlayConfig = {};
-            this.manualClosing = { enabled: false };
-            this.popoverClose = new i0.EventEmitter();
-            this.showStateChange = new i0.EventEmitter();
-        }
-        DrPopoverDirective.prototype.togglePopover = function () {
-            if (this.popoverRef) {
-                this.closePopover();
-            }
-            else {
-                this.renderPopover();
-                this.showStateChange.emit({ isShown: !!this.popoverRef });
+        DrDropdownDirective.prototype.closeDropdown = function (e) {
+            var menuItem = e.target.classList;
+            if (menuItem.contains('dr-dropdown__container__item') || menuItem.contains('dr-dropdown__container__item__text')) {
+                return;
             }
-        };
-        DrPopoverDirective.prototype.closePopover = function (res) {
-            if (this.popoverRef) {
-                this.popoverRef.close(res);
-                this.popoverRef = null;
+            var elems = this._document.querySelectorAll('dr-dropdown');
+            if (!e.target.contains(this.el.nativeElement) && this.contentCmpRef || elems.length && !e.target.contains(this.el.nativeElement)) {
+                setTimeout(function () { return elems.forEach(function (item) { return item.remove(); }); }, 100);
             }
         };
-        DrPopoverDirective.prototype.renderPopover = function () {
-            var _this = this;
-            var popoverRef = this.popoverRef = this.drPopoverService.open(this.content, {
-                hostRef: this.elementRef,
-                overlayConfig: this.overlayConfig,
-                class: this.class,
-                manualClosing: this.manualClosing,
-                position: this.position,
-                contentContext: this.contentContext,
-                alignment: this.alignment,
-            });
-            popoverRef.onClose.pipe(operators.first()).subscribe(function (res) {
-                _this.closePopover();
-                _this.popoverClose.emit(res);
-                _this.showStateChange.emit({ isShown: !!_this.popoverRef });
-            });
+        DrDropdownDirective.prototype.showMenu = function (options) {
+            var componentFactory;
+            componentFactory = this.componentFactoryResolver.resolveComponentFactory(DrDropdownComponent);
+            this.contentCmpRef = this.viewContainerRef.createComponent(componentFactory);
+            this.service.addMenu = this.contentCmpRef;
+            this._document.querySelector('nb-layout').appendChild(this.contentCmpRef.location.nativeElement);
+            this.contentCmpRef.instance.options = options;
         };
-        DrPopoverDirective.prototype.ngOnDestroy = function () {
-            this.closePopover();
+        DrDropdownDirective.prototype.ngOnDestroy = function () {
+            if (this.contentCmpRef) {
+                this.contentCmpRef.destroy();
+            }
         };
-        return DrPopoverDirective;
+        return DrDropdownDirective;
     }());
-    DrPopoverDirective.decorators = [
+    DrDropdownDirective.decorators = [
         { type: i0.Directive, args: [{
-                    selector: '[drPopover]'
+                    selector: '[drDropdown]'
                 },] }
     ];
-    DrPopoverDirective.ctorParameters = function () { return [
+    DrDropdownDirective.ctorParameters = function () { return [
+        { type: i0.ComponentFactoryResolver },
+        { type: i0.ViewContainerRef },
+        { type: DrDropdownService },
         { type: i0.ElementRef },
-        { type: DrPopoverService }
+        { type: undefined, decorators: [{ type: i0.Inject, args: [common.DOCUMENT,] }] }
     ]; };
-    DrPopoverDirective.propDecorators = {
-        content: [{ type: i0.Input, args: ['drPopover',] }],
-        contentContext: [{ type: i0.Input, args: ['drPopoverContext',] }],
-        position: [{ type: i0.Input, args: ['drPopoverPosition',] }],
-        class: [{ type: i0.Input, args: ['drPopoverClass',] }],
-        overlayConfig: [{ type: i0.Input, args: ['drPopoverOverlayConfig',] }],
-        manualClosing: [{ type: i0.Input, args: ['drPopoverManualClosing',] }],
-        alignment: [{ type: i0.Input, args: ['drPopoverAlignment',] }],
-        popoverClose: [{ type: i0.Output, args: ['drPopoverClose',] }],
-        showStateChange: [{ type: i0.Output, args: ['drPopoverShowStateChange',] }],
-        togglePopover: [{ type: i0.HostListener, args: ['click',] }]
+    DrDropdownDirective.propDecorators = {
+        position: [{ type: i0.Input }],
+        drDropdown: [{ type: i0.Input }],
+        drDropdownClass: [{ type: i0.Input }],
+        drDropdownInHover: [{ type: i0.Input }],
+        contentCmpRef: [{ type: i0.ViewChild, args: [DrDropdownComponent, { static: true, read: i0.ViewContainerRef },] }],
+        elementHover: [{ type: i0.HostListener, args: ['mouseenter',] }],
+        elementClick: [{ type: i0.HostListener, args: ['click',] }],
+        documentClick: [{ type: i0.HostListener, args: ['document:mouseup', ['$event'],] }]
     };
 
-    var DrDropdownService = /** @class */ (function () {
-        function DrDropdownService() {
-            this.actionItem = new rxjs.Subject();
+    var DrDropdownPositionDirective = /** @class */ (function () {
+        function DrDropdownPositionDirective(el, renderer) {
+            this.el = el;
+            this.renderer = renderer;
+            this.position = 'left';
         }
-        Object.defineProperty(DrDropdownService.prototype, "addMenu", {
-            set: function (item) {
-                this.menuInView = item;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        DrDropdownService.prototype.destroy = function () {
-            if (this.menuInView) {
-                this.menuInView.destroy();
-            }
-        };
-        return DrDropdownService;
-    }());
-    DrDropdownService.ɵprov = i0__namespace.ɵɵdefineInjectable({ factory: function DrDropdownService_Factory() { return new DrDropdownService(); }, token: DrDropdownService, providedIn: "root" });
-    DrDropdownService.decorators = [
-        { type: i0.Injectable, args: [{
-                    providedIn: 'root'
-                },] }
-    ];
-    DrDropdownService.ctorParameters = function () { return []; };
-
-    var DrDropdownComponent = /** @class */ (function () {
-        function DrDropdownComponent(menuService, cdr) {
-            this.menuService = menuService;
-            this.cdr = cdr;
-            this.position = 'left';
-        }
-        Object.defineProperty(DrDropdownComponent.prototype, "options", {
-            set: function (data) {
-                if (data) {
-                    this.option = data.option;
-                    this.position = data.position;
-                    this.drDropdownInHover = data.drDropdownInHover;
-                    this.containerClass = data.class;
-                    this.list = data.list || [];
-                    this.list.forEach(function (item) {
-                        var _a, _b;
-                        if ((_a = item.children) === null || _a === void 0 ? void 0 : _a.length) {
-                            item.childOptions = {
-                                list: item.children,
-                                class: ((_b = item === null || item === void 0 ? void 0 : item.childOptions) === null || _b === void 0 ? void 0 : _b.class) || '',
-                                position: 'child'
-                            };
-                        }
-                    });
-                    this.cdr.markForCheck();
-                }
-            },
-            enumerable: false,
-            configurable: true
-        });
-        DrDropdownComponent.prototype.onMouseLeave = function () {
-            if (this.drDropdownInHover)
-                this.menuService.destroy();
-        };
-        DrDropdownComponent.prototype.onClickedOutside = function () {
-            if (this.firstInit) {
-                this.menuService.destroy();
-            }
-            else {
-                this.firstInit = true;
-            }
-        };
-        DrDropdownComponent.prototype.hide = function () {
-            this.menuService.destroy();
-        };
-        DrDropdownComponent.prototype.disabled = function (act) {
-            if (!act.disabled) {
-                return false;
-            }
-            if (typeof act.disabled === 'boolean') {
-                return act.disabled;
-            }
-            else {
-                return act.disabled(act.data);
-            }
-        };
-        DrDropdownComponent.prototype.selected = function (act) {
-            if (!act.selected) {
-                return false;
-            }
-            if (typeof act.selected === 'boolean') {
-                return act.selected;
-            }
-            else {
-                return act.selected(act.data);
-            }
-        };
-        DrDropdownComponent.prototype.tooltipToShow = function (act) {
-            if (act.toolTipIfDisabled && !this.disabled(act))
-                return '';
-            return act.toolTip;
-        };
-        DrDropdownComponent.prototype.tooltipPosition = function (widthMoreRight) {
-            return widthMoreRight ? 'right' : 'left';
-        };
-        DrDropdownComponent.prototype.action = function (act) {
-            if (!this.disabled(act)) {
-                if (act.action) {
-                    act.action(act.data);
-                }
-                else {
-                    this.menuService.actionItem.next({ event: act.event || act.title || 'default', data: act.data });
-                }
-                this.hide();
-            }
-        };
-        DrDropdownComponent.prototype.onActionIconClick = function ($event, actionIcon, data) {
-            $event.stopPropagation();
-            if (!this.disabled(actionIcon)) {
-                actionIcon.action(data);
-                this.hide();
-            }
-        };
-        return DrDropdownComponent;
-    }());
-    DrDropdownComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'dr-dropdown',
-                    template: "<div #menuContainer\n     (mouseleave)=\"onMouseLeave()\"\n     (clickOutside)=\"onClickedOutside()\"\n     [drDropdownPosition]=\"option\"\n     #dropdownPosition=\"dropdownPosition\"\n     [position]=\"position\"\n     [class]=\"containerClass\"\n     class=\"dr-dropdown\">\n    <div class=\"dr-dropdown__container\">\n        <div *ngFor=\"let act of list | drDropdownItemShowPipe\"\n             (click)=\"action(act)\"\n             [drTooltip]=\"tooltipToShow(act)\"\n             [drTooltipPosition]=\"tooltipPosition(dropdownPosition.widthMoreRight)\"\n             [drTooltipOptions]=\"{ withoutArrow: true }\"\n             [drTooltipClass]=\"'dr-dropdown__tooltip'\"\n             class=\"dr-dropdown__container__item\"\n             [class.item-disabled]=\"disabled(act)\"\n             [class.item-selected]=\"selected(act)\">\n            <i *ngIf=\"act.icon\" [class]=\"act.icon\"></i>\n            <span class=\"dr-dropdown__container__item__text\">{{act.title}}</span>\n            <i *ngFor=\"let actionIcon of act.actionIcons\"\n               [class]=\"actionIcon.icon\"\n               [class.showOnHover]=\"actionIcon.showOnHover\"\n               (click)=\"onActionIconClick($event, actionIcon, act.data)\"></i>\n            <i *ngIf=\"act.children?.length\" class=\"dr-icon-arrow-right\"></i>\n            <dr-dropdown *ngIf=\"act.children?.length\" [options]=\"act.childOptions\"></dr-dropdown>\n        </div>\n    </div>\n</div>\n",
-                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    styles: ["::ng-deep .dr-dropdown__container__item .dr-dropdown{visibility:hidden;transition-delay:.2s}::ng-deep .dr-dropdown__container__item:hover>*>.dr-dropdown{visibility:visible;transition-delay:0s}::ng-deep .dr-dropdown__tooltip>.default-content{max-width:300px;white-space:normal!important}.dr-dropdown{position:absolute;z-index:-1;top:0;left:0;width:auto}.dr-dropdown__container{display:flex;flex-direction:column;background:#fff;border-radius:4px;box-shadow:0 4px 8px 1px #00000040;padding:8px 0;overflow-y:auto;max-height:60vh}.dr-dropdown__container__item{display:flex;align-items:center;justify-content:flex-start;cursor:pointer;min-width:15rem;font-style:normal;font-weight:400;font-size:14px;line-height:24px;clear:both;width:100%;white-space:nowrap;padding:0 12px;height:36px;flex-shrink:0}.dr-dropdown__container__item:hover{background-color:#f9faff}.dr-dropdown__container__item:hover .showOnHover{visibility:visible}.dr-dropdown__container__item.item-selected{background:#F3F7FF}.dr-dropdown__container__item.item-disabled,.dr-dropdown__container__item.item-disabled i,.dr-dropdown__container__item.item-disabled .dr-dropdown__container__item__text{color:#bcbcbc}.dr-dropdown__container__item i:first-child{margin-right:8px}.dr-dropdown__container__item__text{margin-right:auto;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.dr-dropdown__container__item i,.dr-dropdown__container__item__text{color:#151b3f}.dr-dropdown__container__item i{color:#4e566c}.dr-dropdown__container__item i:hover{color:#4646ce}.dr-dropdown__container__item .showOnHover{visibility:hidden}.dr-dropdown.content-top{transform:translate(-50%,-100%)}.dr-dropdown.content-top-left{transform:translate(-100%,-100%)}.dr-dropdown.content-bottom{transform:translate(-50%,50%)}.dr-dropdown.content-bottom-left{transform:translate(-90%,35%)}.dr-dropdown.content-bottom-right{transform:translateY(15%)}.dr-dropdown.content-left{transform:translate(-100%)}.dr-dropdown.content-left-center{transform:translate(-100%,-50%)}.dr-dropdown.content-right{transform:translate(5%)}\n"]
-                },] }
-    ];
-    DrDropdownComponent.ctorParameters = function () { return [
-        { type: DrDropdownService },
-        { type: i0.ChangeDetectorRef }
-    ]; };
-    DrDropdownComponent.propDecorators = {
-        viewMenu: [{ type: i0.ViewChild, args: ['listMenu',] }],
-        menuContainer: [{ type: i0.ViewChild, args: ['menuContainer',] }],
-        options: [{ type: i0.Input }]
-    };
-
-    var DrDropdownDirective = /** @class */ (function () {
-        function DrDropdownDirective(componentFactoryResolver, viewContainerRef, service, el, _document) {
-            this.componentFactoryResolver = componentFactoryResolver;
-            this.viewContainerRef = viewContainerRef;
-            this.service = service;
-            this.el = el;
-            this._document = _document;
-            this.position = 'left';
-        }
-        DrDropdownDirective.prototype.elementHover = function () {
-            if (!this.drDropdownInHover)
-                return;
-            this.openDropdown();
-        };
-        DrDropdownDirective.prototype.elementClick = function () {
-            this.openDropdown();
-        };
-        DrDropdownDirective.prototype.documentClick = function (e) {
-            this.closeDropdown(e);
-        };
-        DrDropdownDirective.prototype.openDropdown = function () {
-            var option = this.el.nativeElement.getBoundingClientRect();
-            this._document.querySelectorAll('dr-dropdown').forEach(function (item) { return item.remove(); });
-            if (this.contentCmpRef && this.contentCmpRef.destroyCbs) {
-                this.contentCmpRef.destroy();
-                this.contentCmpRef = null;
-            }
-            else {
-                this.service.destroy();
-                this.showMenu({
-                    option: option,
-                    drDropdownInHover: this.drDropdownInHover,
-                    position: this.position,
-                    list: this.drDropdown,
-                    class: this.drDropdownClass
-                });
-            }
-        };
-        DrDropdownDirective.prototype.closeDropdown = function (e) {
-            var menuItem = e.target.classList;
-            if (menuItem.contains('dr-dropdown__container__item') || menuItem.contains('dr-dropdown__container__item__text')) {
-                return;
-            }
-            var elems = this._document.querySelectorAll('dr-dropdown');
-            if (!e.target.contains(this.el.nativeElement) && this.contentCmpRef || elems.length && !e.target.contains(this.el.nativeElement)) {
-                setTimeout(function () { return elems.forEach(function (item) { return item.remove(); }); }, 100);
-            }
-        };
-        DrDropdownDirective.prototype.showMenu = function (options) {
-            var componentFactory;
-            componentFactory = this.componentFactoryResolver.resolveComponentFactory(DrDropdownComponent);
-            this.contentCmpRef = this.viewContainerRef.createComponent(componentFactory);
-            this.service.addMenu = this.contentCmpRef;
-            this._document.querySelector('nb-layout').appendChild(this.contentCmpRef.location.nativeElement);
-            this.contentCmpRef.instance.options = options;
-        };
-        DrDropdownDirective.prototype.ngOnDestroy = function () {
-            if (this.contentCmpRef) {
-                this.contentCmpRef.destroy();
-            }
-        };
-        return DrDropdownDirective;
-    }());
-    DrDropdownDirective.decorators = [
-        { type: i0.Directive, args: [{
-                    selector: '[drDropdown]'
-                },] }
-    ];
-    DrDropdownDirective.ctorParameters = function () { return [
-        { type: i0.ComponentFactoryResolver },
-        { type: i0.ViewContainerRef },
-        { type: DrDropdownService },
-        { type: i0.ElementRef },
-        { type: undefined, decorators: [{ type: i0.Inject, args: [common.DOCUMENT,] }] }
-    ]; };
-    DrDropdownDirective.propDecorators = {
-        position: [{ type: i0.Input }],
-        drDropdown: [{ type: i0.Input }],
-        drDropdownClass: [{ type: i0.Input }],
-        drDropdownInHover: [{ type: i0.Input }],
-        contentCmpRef: [{ type: i0.ViewChild, args: [DrDropdownComponent, { static: true, read: i0.ViewContainerRef },] }],
-        elementHover: [{ type: i0.HostListener, args: ['mouseenter',] }],
-        elementClick: [{ type: i0.HostListener, args: ['click',] }],
-        documentClick: [{ type: i0.HostListener, args: ['document:mouseup', ['$event'],] }]
-    };
-
-    var DrDropdownPositionDirective = /** @class */ (function () {
-        function DrDropdownPositionDirective(el, renderer) {
-            this.el = el;
-            this.renderer = renderer;
-            this.position = 'left';
-        }
-        DrDropdownPositionDirective.prototype.ngOnInit = function () {
-            setTimeout(this.calculatePosition.bind(this), 1);
+        DrDropdownPositionDirective.prototype.ngOnInit = function () {
+            setTimeout(this.calculatePosition.bind(this), 1);
         };
         DrDropdownPositionDirective.prototype.calculatePosition = function () {
             var xDifference = 0;
@@ -3439,510 +3029,1039 @@
                 this.renderer.setStyle(this.el.nativeElement, 'z-index', '10010');
             }
         };
-        return DrDropdownPositionDirective;
+        return DrDropdownPositionDirective;
+    }());
+    DrDropdownPositionDirective.decorators = [
+        { type: i0.Directive, args: [{
+                    selector: '[drDropdownPosition]',
+                    exportAs: 'dropdownPosition'
+                },] }
+    ];
+    DrDropdownPositionDirective.ctorParameters = function () { return [
+        { type: i0.ElementRef },
+        { type: i0.Renderer2 }
+    ]; };
+    DrDropdownPositionDirective.propDecorators = {
+        drDropdownPosition: [{ type: i0.Input }],
+        position: [{ type: i0.Input }]
+    };
+
+    var DrDropdownItemShowPipe = /** @class */ (function () {
+        function DrDropdownItemShowPipe() {
+        }
+        DrDropdownItemShowPipe.prototype.transform = function (arr) {
+            return arr.filter(function (item) { return item.show ? item.show(item.data) : true; });
+        };
+        return DrDropdownItemShowPipe;
+    }());
+    DrDropdownItemShowPipe.decorators = [
+        { type: i0.Pipe, args: [{
+                    name: 'drDropdownItemShowPipe'
+                },] }
+    ];
+
+    var DrTabComponent = /** @class */ (function () {
+        function DrTabComponent() {
+        }
+        DrTabComponent.prototype.ngOnInit = function () {
+        };
+        return DrTabComponent;
+    }());
+    DrTabComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'dr-tab',
+                    template: "\n      <ng-template>\n          <ng-content></ng-content>\n      </ng-template>\n       "
+                },] }
+    ];
+    DrTabComponent.ctorParameters = function () { return []; };
+    DrTabComponent.propDecorators = {
+        label: [{ type: i0.Input }],
+        disabled: [{ type: i0.Input }],
+        contentTemplate: [{ type: i0.ViewChild, args: [i0.TemplateRef,] }]
+    };
+
+    var DrTabsComponent = /** @class */ (function () {
+        function DrTabsComponent() {
+            this.selectedTab = 0;
+            this.selectedTabChange = new i0.EventEmitter();
+        }
+        DrTabsComponent.prototype.selectedIndexChange = function ($event) {
+            this.selectedTab = $event;
+            this.selectedTabChange.emit($event);
+        };
+        return DrTabsComponent;
+    }());
+    DrTabsComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'dr-tabs',
+                    template: "<mat-tab-group disableRipple [selectedIndex]=\"selectedTab\"\n               (selectedIndexChange)=\"selectedIndexChange($event)\"\n               [class.with-radio]=\"withRadio\"\n               [class.vertical]=\"vertical\"\n               [animationDuration]=\" vertical ? '0ms' : '500ms'\">\n  <mat-tab *ngFor=\"let tab of tabsContentList; let index = index\" label=\"{{tab.label}}\" [disabled]=\"tab.disabled\" >\n    <ng-container *ngIf=\"withRadio\">\n      <ng-template mat-tab-label>\n        <dr-radio-button [value]=\"index\"\n                         [(ngModel)]=\"selectedTab\">\n        </dr-radio-button>\n        {{tab.label}}\n      </ng-template>\n    </ng-container>\n\n    <ng-container *ngTemplateOutlet=\"tab.contentTemplate\" ></ng-container>\n  </mat-tab>\n</mat-tab-group>\n",
+                    styles: [":host{width:100%}:host ::ng-deep .mat-tab-group,:host ::ng-deep .mat-tab-body-wrapper{height:100%}:host ::ng-deep .mat-tab-nav-bar,:host ::ng-deep .mat-tab-header{border-bottom:1px solid #D5DAE5}:host ::ng-deep .mat-tab-labels{padding:0 17px}:host ::ng-deep .mat-tab-label{padding:0 8px;min-width:0;height:38px;opacity:1}:host ::ng-deep .mat-tab-label:not(:last-child){margin-right:21px}:host ::ng-deep .mat-tab-label-active .mat-tab-label-content{color:#579bf2;font-weight:700}:host ::ng-deep .mat-tab-label-content{font-weight:400;font-size:14px;line-height:22px;color:#51566f;font-family:\"Poppins\",sans-serif}:host ::ng-deep .mat-ink-bar{height:3px;border-radius:5px;background-color:#579bf2!important}:host ::ng-deep .with-radio .mat-tab-labels{padding:0;margin-bottom:8px}:host ::ng-deep .with-radio .mat-tab-label{padding:8px 16px;min-width:0;flex-grow:1;justify-content:start;height:38px;opacity:1}:host ::ng-deep .with-radio .mat-tab-label:not(:last-child){margin-right:8px}:host ::ng-deep .with-radio .mat-tab-label-active{background:#F6F7F8;border-radius:3px}:host ::ng-deep .with-radio .mat-tab-label-active .mat-tab-label-content{color:#0c142b;font-weight:600}:host ::ng-deep .with-radio .mat-ink-bar{display:none!important}:host ::ng-deep .vertical.mat-tab-group{flex-direction:row}:host ::ng-deep .vertical .mat-tab-header{border-bottom:none}:host ::ng-deep .vertical .mat-tab-labels{flex-direction:column;padding:0;border-right:1px solid #D5DAE5}:host ::ng-deep .vertical .mat-ink-bar{display:none!important}:host ::ng-deep .vertical .mat-tab-label{border-bottom:1px solid #D5DAE5;margin:0!important}:host ::ng-deep .vertical .mat-tab-label:before{content:\"\";width:2px;height:100%;display:flex;position:absolute;top:0;left:0}:host ::ng-deep .vertical .mat-tab-label-active{background-color:#f3f7ff}:host ::ng-deep .vertical .mat-tab-label-active:before{background-color:#151a41}:host ::ng-deep .vertical .mat-tab-label-active .mat-tab-label-content{font-weight:normal;color:#151a41}:host ::ng-deep .vertical .mat-tab-body-wrapper{width:100%;padding:16px}\n"]
+                },] }
+    ];
+    DrTabsComponent.ctorParameters = function () { return []; };
+    DrTabsComponent.propDecorators = {
+        selectedTab: [{ type: i0.Input }],
+        withRadio: [{ type: i0.Input }],
+        vertical: [{ type: i0.Input }],
+        selectedTabChange: [{ type: i0.Output }],
+        tabsContentList: [{ type: i0.ContentChildren, args: [DrTabComponent,] }]
+    };
+
+    var DrAccordionComponent = /** @class */ (function () {
+        function DrAccordionComponent() {
+            this.openCloseItems = new rxjs.Subject();
+            this.multiValue = false;
+        }
+        Object.defineProperty(DrAccordionComponent.prototype, "multi", {
+            /**
+             *  Allow multiple items to be expanded at the same time.
+             */
+            get: function () {
+                return this.multiValue;
+            },
+            set: function (val) {
+                this.multiValue = !!val;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        /**
+         * Opens all enabled accordion items.
+         */
+        DrAccordionComponent.prototype.openAll = function () {
+            if (this.multi) {
+                this.openCloseItems.next(false);
+            }
+        };
+        /**
+         * Closes all enabled accordion items.
+         */
+        DrAccordionComponent.prototype.closeAll = function () {
+            this.openCloseItems.next(true);
+        };
+        return DrAccordionComponent;
+    }());
+    DrAccordionComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'dr-accordion',
+                    template: '<ng-content select="dr-accordion-item"></ng-content>',
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    styles: [":host{display:block;box-shadow:#2c33491a 0 5px 10px}\n"]
+                },] }
+    ];
+    DrAccordionComponent.propDecorators = {
+        multi: [{ type: i0.Input, args: ['multi',] }]
+    };
+
+    var DrAccordionItemComponent = /** @class */ (function () {
+        function DrAccordionItemComponent(accordion, cd) {
+            this.accordion = accordion;
+            this.cd = cd;
+            /**
+             * Emits whenever the expanded state of the accordion changes.
+             * Primarily used to facilitate two-way binding.
+             */
+            this.collapsedChange = new i0.EventEmitter();
+            this.accordionItemInvalidate = new rxjs.Subject();
+            this.collapsedValue = true;
+            this.disabledValue = false;
+            this.destroy$ = new rxjs.Subject();
+        }
+        Object.defineProperty(DrAccordionItemComponent.prototype, "collapsed", {
+            /**
+             * Item is collapse (`true` by default)
+             * @type {boolean}
+             */
+            get: function () {
+                return this.collapsedValue;
+            },
+            set: function (val) {
+                this.collapsedValue = !!val;
+                this.collapsedChange.emit(this.collapsedValue);
+                this.invalidate();
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(DrAccordionItemComponent.prototype, "expanded", {
+            /**
+             * Item is expanded (`false` by default)
+             */
+            get: function () {
+                return !this.collapsed;
+            },
+            set: function (val) {
+                this.collapsedValue = !val;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(DrAccordionItemComponent.prototype, "disabled", {
+            /**
+             * Item is disabled and cannot be opened.
+             * @type {boolean}
+             */
+            get: function () {
+                return this.disabledValue;
+            },
+            set: function (val) {
+                this.disabledValue = !!val;
+                this.invalidate();
+            },
+            enumerable: false,
+            configurable: true
+        });
+        /**
+         * Open/close the item
+         */
+        DrAccordionItemComponent.prototype.toggle = function () {
+            if (!this.disabled) {
+                // we need this temporary variable as `openCloseItems.next` will change current value we need to save
+                var willSet = !this.collapsed;
+                if (!this.accordion.multi) {
+                    this.accordion.openCloseItems.next(true);
+                }
+                this.collapsed = willSet;
+            }
+        };
+        /**
+         * Open the item.
+         */
+        DrAccordionItemComponent.prototype.open = function () {
+            if (!this.disabled) {
+                this.collapsed = false;
+            }
+        };
+        /**
+         * Collapse the item.
+         */
+        DrAccordionItemComponent.prototype.close = function () {
+            if (!this.disabled) {
+                this.collapsed = true;
+            }
+        };
+        DrAccordionItemComponent.prototype.ngOnInit = function () {
+            var _this = this;
+            this.accordion.openCloseItems
+                .pipe(operators.takeUntil(this.destroy$))
+                .subscribe(function (collapsed) {
+                if (!_this.disabled) {
+                    _this.collapsed = collapsed;
+                }
+            });
+        };
+        DrAccordionItemComponent.prototype.ngOnChanges = function (changes) {
+            this.accordionItemInvalidate.next(true);
+        };
+        DrAccordionItemComponent.prototype.ngOnDestroy = function () {
+            this.destroy$.next();
+            this.destroy$.complete();
+            this.accordionItemInvalidate.complete();
+        };
+        DrAccordionItemComponent.prototype.invalidate = function () {
+            this.accordionItemInvalidate.next(true);
+            this.cd.markForCheck();
+        };
+        return DrAccordionItemComponent;
+    }());
+    DrAccordionItemComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'dr-accordion-item',
+                    template: "\n    <ng-content select=\"dr-accordion-item-header\"></ng-content>\n    <ng-content select=\"dr-accordion-item-body\"></ng-content>\n  ",
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    styles: [":host{background-color:#fff;color:#222b45;font-family:\"Poppins\",sans-serif;font-size:16px;font-weight:400;line-height:1.25rem;display:flex;flex-direction:column}\n"]
+                },] }
+    ];
+    DrAccordionItemComponent.ctorParameters = function () { return [
+        { type: DrAccordionComponent, decorators: [{ type: i0.Host }] },
+        { type: i0.ChangeDetectorRef }
+    ]; };
+    DrAccordionItemComponent.propDecorators = {
+        collapsed: [{ type: i0.Input, args: ['collapsed',] }, { type: i0.HostBinding, args: ['class.collapsed',] }],
+        expanded: [{ type: i0.Input, args: ['expanded',] }, { type: i0.HostBinding, args: ['class.expanded',] }],
+        disabled: [{ type: i0.Input, args: ['disabled',] }, { type: i0.HostBinding, args: ['class.disabled',] }],
+        collapsedChange: [{ type: i0.Output }]
+    };
+
+    var DrAccordionItemHeaderComponent = /** @class */ (function () {
+        function DrAccordionItemHeaderComponent(accordionItem, cd) {
+            this.accordionItem = accordionItem;
+            this.cd = cd;
+            this.destroy$ = new rxjs.Subject();
+        }
+        Object.defineProperty(DrAccordionItemHeaderComponent.prototype, "isCollapsed", {
+            get: function () {
+                return this.accordionItem.collapsed;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(DrAccordionItemHeaderComponent.prototype, "expanded", {
+            get: function () {
+                return !this.accordionItem.collapsed;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(DrAccordionItemHeaderComponent.prototype, "tabbable", {
+            get: function () {
+                return this.accordionItem.disabled ? '-1' : '0';
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(DrAccordionItemHeaderComponent.prototype, "disabled", {
+            get: function () {
+                return this.accordionItem.disabled;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        DrAccordionItemHeaderComponent.prototype.toggle = function () {
+            this.accordionItem.toggle();
+        };
+        Object.defineProperty(DrAccordionItemHeaderComponent.prototype, "state", {
+            get: function () {
+                if (this.isCollapsed) {
+                    return 'collapsed';
+                }
+                return 'expanded';
+            },
+            enumerable: false,
+            configurable: true
+        });
+        DrAccordionItemHeaderComponent.prototype.ngOnInit = function () {
+            var _this = this;
+            this.accordionItem.accordionItemInvalidate
+                .pipe(operators.takeUntil(this.destroy$))
+                .subscribe(function () { return _this.cd.markForCheck(); });
+        };
+        DrAccordionItemHeaderComponent.prototype.ngOnDestroy = function () {
+            this.destroy$.next();
+            this.destroy$.complete();
+        };
+        return DrAccordionItemHeaderComponent;
+    }());
+    DrAccordionItemHeaderComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'dr-accordion-item-header',
+                    template: "\n    <ng-content select=\"dr-accordion-item-title\"></ng-content>\n    <ng-content select=\"dr-accordion-item-description\"></ng-content>\n    <ng-content></ng-content>\n    <i class=\"dr-icon-arrow-down expansion-indicator\"\n       [@expansionIndicator]=\"state\"\n       *ngIf=\"!disabled\">\n    </i>\n  ",
+                    animations: [
+                        animations.trigger('expansionIndicator', [
+                            animations.state('expanded', animations.style({
+                                transform: 'rotate(180deg)',
+                            })),
+                            animations.transition('collapsed => expanded', animations.animate('100ms ease-in')),
+                            animations.transition('expanded => collapsed', animations.animate('100ms ease-out')),
+                        ]),
+                    ],
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    styles: [":host{display:flex;align-items:center;cursor:pointer;position:relative;border-bottom:1px solid #edf1f7;color:#222b45;font-family:\"Poppins\",sans-serif;font-size:13px;font-weight:600;line-height:1.5rem;padding:1.25rem;text-transform:capitalize}:host:focus{outline:0}:host .expansion-indicator{font-size:24px;position:absolute;right:10px;font-weight:700}\n"]
+                },] }
+    ];
+    DrAccordionItemHeaderComponent.ctorParameters = function () { return [
+        { type: DrAccordionItemComponent, decorators: [{ type: i0.Host }] },
+        { type: i0.ChangeDetectorRef }
+    ]; };
+    DrAccordionItemHeaderComponent.propDecorators = {
+        isCollapsed: [{ type: i0.HostBinding, args: ['class.accordion-item-header-collapsed',] }],
+        expanded: [{ type: i0.HostBinding, args: ['class.accordion-item-header-expanded',] }, { type: i0.HostBinding, args: ['attr.aria-expanded',] }],
+        tabbable: [{ type: i0.HostBinding, args: ['attr.tabindex',] }],
+        disabled: [{ type: i0.HostBinding, args: ['attr.aria-disabled',] }],
+        toggle: [{ type: i0.HostListener, args: ['click',] }, { type: i0.HostListener, args: ['keydown.space',] }, { type: i0.HostListener, args: ['keydown.enter',] }]
+    };
+
+    var accordionItemBodyTrigger = animations.trigger('accordionItemBody', [
+        animations.state('collapsed', animations.style({
+            overflow: 'hidden',
+            visibility: 'hidden',
+            height: 0,
+        })),
+        animations.state('expanded', animations.style({
+            overflow: 'hidden',
+            visibility: 'visible',
+        })),
+        animations.transition('collapsed => expanded', animations.animate('100ms ease-in')),
+        animations.transition('expanded => collapsed', animations.animate('100ms ease-out')),
+    ]);
+    var DrAccordionItemBodyComponent = /** @class */ (function () {
+        function DrAccordionItemBodyComponent(accordionItem, cd) {
+            this.accordionItem = accordionItem;
+            this.cd = cd;
+            this.destroy$ = new rxjs.Subject();
+        }
+        Object.defineProperty(DrAccordionItemBodyComponent.prototype, "state", {
+            get: function () {
+                return this.accordionItem.collapsed ? 'collapsed' : 'expanded';
+            },
+            enumerable: false,
+            configurable: true
+        });
+        DrAccordionItemBodyComponent.prototype.ngOnInit = function () {
+            var _this = this;
+            this.accordionItem.accordionItemInvalidate
+                .pipe(operators.takeUntil(this.destroy$))
+                .subscribe(function () { return _this.cd.markForCheck(); });
+        };
+        DrAccordionItemBodyComponent.prototype.ngOnDestroy = function () {
+            this.destroy$.next();
+            this.destroy$.complete();
+        };
+        return DrAccordionItemBodyComponent;
+    }());
+    DrAccordionItemBodyComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'dr-accordion-item-body',
+                    template: "\n    <div [@accordionItemBody]=\"{ value: state }\">\n      <div class=\"item-body\">\n        <ng-content></ng-content>\n      </div>\n    </div>\n  ",
+                    animations: [accordionItemBodyTrigger],
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    styles: [".item-body{flex:1;-ms-flex:1 1 auto;overflow:auto;position:relative}\n"]
+                },] }
+    ];
+    DrAccordionItemBodyComponent.ctorParameters = function () { return [
+        { type: DrAccordionItemComponent, decorators: [{ type: i0.Host }] },
+        { type: i0.ChangeDetectorRef }
+    ]; };
+
+    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;
     }());
-    DrDropdownPositionDirective.decorators = [
+    DrModelDebounceChangeDirective.decorators = [
         { type: i0.Directive, args: [{
-                    selector: '[drDropdownPosition]',
-                    exportAs: 'dropdownPosition'
+                    selector: '[ngModelDebounceChange]'
                 },] }
     ];
-    DrDropdownPositionDirective.ctorParameters = function () { return [
-        { type: i0.ElementRef },
-        { type: i0.Renderer2 }
+    DrModelDebounceChangeDirective.ctorParameters = function () { return [
+        { type: forms.NgModel }
     ]; };
-    DrDropdownPositionDirective.propDecorators = {
-        drDropdownPosition: [{ type: i0.Input }],
-        position: [{ type: i0.Input }]
+    DrModelDebounceChangeDirective.propDecorators = {
+        debounce: [{ type: i0.Input }],
+        ngModelDebounceChange: [{ type: i0.Output }]
     };
 
-    var DrDropdownItemShowPipe = /** @class */ (function () {
-        function DrDropdownItemShowPipe() {
+    var MAT_DEFAULT_DATE_FORMAT = 'MM/DD/yyyy';
+    var DATE_INPUT_FORMAT = 'YYYY/MM/DD';
+    var YEAR_FORMAT = 'yyyy';
+    var MONTH_YEAR_FORMAT = 'MM/yyyy';
+    var QUARTER_FORMAT = 'Q/yyyy';
+    var CustomDateFormat = /** @class */ (function () {
+        function CustomDateFormat() {
+            this._parse = {
+                dateInput: DATE_INPUT_FORMAT
+            };
+            this._display = {
+                dateInput: DATE_INPUT_FORMAT,
+                monthYearLabel: 'MMM YYYY',
+                dateA11yLabel: 'LL',
+                monthYearA11yLabel: 'MMM YYYY',
+                quarterYearLabel: 'Q/YYYY',
+                yearLabel: 'YYYY'
+            };
         }
-        DrDropdownItemShowPipe.prototype.transform = function (arr) {
-            return arr.filter(function (item) { return item.show ? item.show(item.data) : true; });
+        Object.defineProperty(CustomDateFormat.prototype, "parse", {
+            get: function () {
+                return this._parse;
+            },
+            set: function (parse) {
+                this._parse = Object.assign({}, this._parse, parse);
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(CustomDateFormat.prototype, "display", {
+            get: function () {
+                return this._display;
+            },
+            set: function (display) {
+                this._display = Object.assign({}, this._display, display);
+            },
+            enumerable: false,
+            configurable: true
+        });
+        CustomDateFormat.prototype.updateDateFormat = function (parse, display) {
+            this.parse = parse;
+            if (!display) {
+                display = parse;
+            }
+            this.display = display;
         };
-        return DrDropdownItemShowPipe;
+        return CustomDateFormat;
     }());
-    DrDropdownItemShowPipe.decorators = [
-        { type: i0.Pipe, args: [{
-                    name: 'drDropdownItemShowPipe'
+    exports.DatePickerPeriodPosition = void 0;
+    (function (DatePickerPeriodPosition) {
+        DatePickerPeriodPosition[DatePickerPeriodPosition["END_OF_PERIOD"] = 0] = "END_OF_PERIOD";
+        DatePickerPeriodPosition[DatePickerPeriodPosition["MIDDLE_OF_PERIOD"] = 1] = "MIDDLE_OF_PERIOD";
+        DatePickerPeriodPosition[DatePickerPeriodPosition["START_OF_PERIOD"] = 2] = "START_OF_PERIOD";
+        DatePickerPeriodPosition[DatePickerPeriodPosition["DEFAULT"] = 3] = "DEFAULT";
+    })(exports.DatePickerPeriodPosition || (exports.DatePickerPeriodPosition = {}));
+
+    var components$2 = [DateTagComponent,
+        DayTagComponent,
+        WeekTagComponent,
+        MonthTagComponent,
+        QuarterTagComponent,
+        AnyTagComponent,
+        YearTagComponent,
+        ForecastTagComponent];
+    var ɵ0$1 = { useUtc: true };
+    var DateTagModule = /** @class */ (function () {
+        function DateTagModule() {
+        }
+        return DateTagModule;
+    }());
+    DateTagModule.decorators = [
+        { type: i0.NgModule, args: [{
+                    imports: [
+                        common.CommonModule,
+                        core.MatNativeDateModule,
+                        datepicker.MatDatepickerModule,
+                        forms.FormsModule,
+                        formField.MatFormFieldModule,
+                        forms.ReactiveFormsModule,
+                        input.MatInputModule,
+                        materialMomentAdapter.MatMomentDateModule,
+                        select.MatSelectModule
+                    ],
+                    exports: components$2,
+                    providers: [
+                        { provide: materialMomentAdapter.MAT_MOMENT_DATE_ADAPTER_OPTIONS, useValue: ɵ0$1 }
+                    ],
+                    declarations: components$2,
                 },] }
     ];
+    ;
 
-    var DrTabComponent = /** @class */ (function () {
-        function DrTabComponent() {
+    var ListTagModule = /** @class */ (function () {
+        function ListTagModule() {
         }
-        DrTabComponent.prototype.ngOnInit = function () {
-        };
-        return DrTabComponent;
+        return ListTagModule;
     }());
-    DrTabComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'dr-tab',
-                    template: "\n      <ng-template>\n          <ng-content></ng-content>\n      </ng-template>\n       "
+    ListTagModule.decorators = [
+        { type: i0.NgModule, args: [{
+                    imports: [
+                        common.CommonModule,
+                        forms.FormsModule,
+                        formField.MatFormFieldModule,
+                        forms.ReactiveFormsModule,
+                        materialMomentAdapter.MatMomentDateModule,
+                        select.MatSelectModule,
+                        buttonToggle.MatButtonToggleModule,
+                    ],
+                    exports: [ListTagComponent],
+                    providers: [],
+                    declarations: [
+                        ListTagComponent
+                    ],
                 },] }
     ];
-    DrTabComponent.ctorParameters = function () { return []; };
-    DrTabComponent.propDecorators = {
-        label: [{ type: i0.Input }],
-        disabled: [{ type: i0.Input }],
-        contentTemplate: [{ type: i0.ViewChild, args: [i0.TemplateRef,] }]
-    };
 
-    var DrTabsComponent = /** @class */ (function () {
-        function DrTabsComponent() {
-            this.selectedTab = 0;
-            this.selectedTabChange = new i0.EventEmitter();
+    var DrTagModule = /** @class */ (function () {
+        function DrTagModule() {
         }
-        DrTabsComponent.prototype.selectedIndexChange = function ($event) {
-            this.selectedTab = $event;
-            this.selectedTabChange.emit($event);
-        };
-        return DrTabsComponent;
+        return DrTagModule;
     }());
-    DrTabsComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'dr-tabs',
-                    template: "<mat-tab-group disableRipple [selectedIndex]=\"selectedTab\"\n               (selectedIndexChange)=\"selectedIndexChange($event)\"\n               [class.with-radio]=\"withRadio\"\n               [class.vertical]=\"vertical\"\n               [animationDuration]=\" vertical ? '0ms' : '500ms'\">\n  <mat-tab *ngFor=\"let tab of tabsContentList; let index = index\" label=\"{{tab.label}}\" [disabled]=\"tab.disabled\" >\n    <ng-container *ngIf=\"withRadio\">\n      <ng-template mat-tab-label>\n        <dr-radio-button [value]=\"index\"\n                         [(ngModel)]=\"selectedTab\">\n        </dr-radio-button>\n        {{tab.label}}\n      </ng-template>\n    </ng-container>\n\n    <ng-container *ngTemplateOutlet=\"tab.contentTemplate\" ></ng-container>\n  </mat-tab>\n</mat-tab-group>\n",
-                    styles: [":host{width:100%}:host ::ng-deep .mat-tab-group,:host ::ng-deep .mat-tab-body-wrapper{height:100%}:host ::ng-deep .mat-tab-nav-bar,:host ::ng-deep .mat-tab-header{border-bottom:1px solid #D5DAE5}:host ::ng-deep .mat-tab-labels{padding:0 17px}:host ::ng-deep .mat-tab-label{padding:0 8px;min-width:0;height:38px;opacity:1}:host ::ng-deep .mat-tab-label:not(:last-child){margin-right:21px}:host ::ng-deep .mat-tab-label-active .mat-tab-label-content{color:#579bf2;font-weight:700}:host ::ng-deep .mat-tab-label-content{font-weight:400;font-size:14px;line-height:22px;color:#51566f;font-family:\"Poppins\",sans-serif}:host ::ng-deep .mat-ink-bar{height:3px;border-radius:5px;background-color:#579bf2!important}:host ::ng-deep .with-radio .mat-tab-labels{padding:0;margin-bottom:8px}:host ::ng-deep .with-radio .mat-tab-label{padding:8px 16px;min-width:0;flex-grow:1;justify-content:start;height:38px;opacity:1}:host ::ng-deep .with-radio .mat-tab-label:not(:last-child){margin-right:8px}:host ::ng-deep .with-radio .mat-tab-label-active{background:#F6F7F8;border-radius:3px}:host ::ng-deep .with-radio .mat-tab-label-active .mat-tab-label-content{color:#0c142b;font-weight:600}:host ::ng-deep .with-radio .mat-ink-bar{display:none!important}:host ::ng-deep .vertical.mat-tab-group{flex-direction:row}:host ::ng-deep .vertical .mat-tab-header{border-bottom:none}:host ::ng-deep .vertical .mat-tab-labels{flex-direction:column;padding:0;border-right:1px solid #D5DAE5}:host ::ng-deep .vertical .mat-ink-bar{display:none!important}:host ::ng-deep .vertical .mat-tab-label{border-bottom:1px solid #D5DAE5;margin:0!important}:host ::ng-deep .vertical .mat-tab-label:before{content:\"\";width:2px;height:100%;display:flex;position:absolute;top:0;left:0}:host ::ng-deep .vertical .mat-tab-label-active{background-color:#f3f7ff}:host ::ng-deep .vertical .mat-tab-label-active:before{background-color:#151a41}:host ::ng-deep .vertical .mat-tab-label-active .mat-tab-label-content{font-weight:normal;color:#151a41}:host ::ng-deep .vertical .mat-tab-body-wrapper{width:100%;padding:16px}\n"]
+    DrTagModule.decorators = [
+        { type: i0.NgModule, args: [{
+                    imports: [
+                        common.CommonModule,
+                        DateTagModule,
+                        ListTagModule
+                    ],
+                    exports: [DrTagComponent],
+                    providers: [],
+                    declarations: [
+                        DrTagComponent
+                    ],
                 },] }
     ];
-    DrTabsComponent.ctorParameters = function () { return []; };
-    DrTabsComponent.propDecorators = {
-        selectedTab: [{ type: i0.Input }],
-        withRadio: [{ type: i0.Input }],
-        vertical: [{ type: i0.Input }],
-        selectedTabChange: [{ type: i0.Output }],
-        tabsContentList: [{ type: i0.ContentChildren, args: [DrTabComponent,] }]
-    };
 
-    var DrAccordionComponent = /** @class */ (function () {
-        function DrAccordionComponent() {
-            this.openCloseItems = new rxjs.Subject();
-            this.multiValue = false;
+    var moment$2 = require('moment');
+    var DrDatePickerService = /** @class */ (function () {
+        function DrDatePickerService() {
+            this.isTimeframeSelectionEnabled = false;
+            this.timeframe = 'day';
+            this.format$ = new rxjs.BehaviorSubject(MAT_DEFAULT_DATE_FORMAT);
+            this.updatedQuarter$ = new rxjs.Subject();
+            this.formatConfig = {
+                day: MAT_DEFAULT_DATE_FORMAT,
+                month: MONTH_YEAR_FORMAT,
+                year: YEAR_FORMAT,
+                quarter: QUARTER_FORMAT,
+            };
+        }
+        DrDatePickerService.prototype.getQuarterDisplay = function (value) {
+            return 'Q' + moment$2(value).quarter() + this.format$.getValue().charAt(1) + moment$2(value).year();
+        };
+        DrDatePickerService.prototype.getTimeframe = function (format) {
+            var defaultFrame = 'day';
+            if (!format) {
+                return defaultFrame;
+            }
+            var lowerCaseFormat = format.toLowerCase();
+            switch (true) {
+                case lowerCaseFormat.includes('q'):
+                    return 'quarter';
+                case lowerCaseFormat.includes('d'):
+                    return 'day';
+                case lowerCaseFormat.includes('m'):
+                    return 'month';
+                case lowerCaseFormat.includes('y'):
+                    return 'year';
+                default:
+                    return defaultFrame;
+            }
+        };
+        DrDatePickerService.prototype.getConfiguredFormat = function (timeframe) {
+            return this.formatConfig[timeframe];
+        };
+        DrDatePickerService.prototype.updateTimeframeAndFormat = function (format) {
+            var normalizedFormat = this.normalizeValue(format || this.format$.getValue());
+            this.timeframe = this.getTimeframe(normalizedFormat);
+            this.format$.next(this.getConfiguredFormat(this.timeframe));
+        };
+        DrDatePickerService.prototype.normalizeValue = function (value) {
+            return value.replace(/d/g, 'D');
+        };
+        return DrDatePickerService;
+    }());
+    DrDatePickerService.decorators = [
+        { type: i0.Injectable }
+    ];
+
+    var moment$1 = require('moment');
+    var DrDatePickerCustomHeaderComponent = /** @class */ (function () {
+        function DrDatePickerCustomHeaderComponent(_calendar, _dateAdapter, _dateFormats, cdr, datePickerService) {
+            var _this = this;
+            this._calendar = _calendar;
+            this._dateAdapter = _dateAdapter;
+            this._dateFormats = _dateFormats;
+            this.cdr = cdr;
+            this.datePickerService = datePickerService;
+            this._destroyed = new rxjs.Subject();
+            this.quarters = [1, 2, 3, 4];
+            this.selectedQuarter = 1;
+            this.timeframeOptions = [{
+                    title: 'Day',
+                    value: 'month',
+                    format: this.datePickerService.formatConfig.day,
+                    periodLabel: function () { return _this._dateAdapter
+                        .format(_this._calendar.activeDate, _this._dateFormats.display.monthYearLabel)
+                        .toLocaleUpperCase(); }
+                }, {
+                    title: 'Month',
+                    value: 'year',
+                    format: this.datePickerService.formatConfig.month,
+                    periodLabel: function () { return String(moment$1(_this._calendar.activeDate).year()); }
+                }, {
+                    title: 'Quarter',
+                    value: 'none',
+                    format: this.datePickerService.formatConfig.quarter,
+                    periodLabel: function () { return String(moment$1(_this._calendar.activeDate).year()); }
+                }, {
+                    title: 'Year',
+                    value: 'multi-year',
+                    format: this.datePickerService.formatConfig.year,
+                    periodLabel: function () {
+                        var currentYear = moment$1(_this._calendar.activeDate).year();
+                        var startPeriod = Math.floor(currentYear / 24) * 24;
+                        return startPeriod + '-' + (startPeriod + 23);
+                    }
+                }];
+            this.pagingSetup = {
+                'year': function (forward) { return _this.pagingDateChange('addCalendarYears', 1, forward); },
+                'none': function (forward) { return _this.pagingDateChange('addCalendarYears', 1, forward); },
+                'month': function (forward) { return _this.pagingDateChange('addCalendarMonths', 1, forward); },
+                'multi-year': function (forward) { return _this.pagingDateChange('addCalendarYears', 24, forward); }
+            };
+            this.selectedTimeframe = 'month';
+            this.timeframeSelection = false;
+            this.periodMonthLabel = '';
+            this.periodYearLabel = '';
+            _calendar.stateChanges.pipe(operators.takeUntil(this._destroyed)).subscribe(function () { return _this.setPeriodLabels(); });
+            this.datePickerService.format$
+                .pipe(operators.take(1))
+                .subscribe(function (value) {
+                _this.selectedTimeframe = _this.timeframeOptions.filter(function (option) { return option.format == value; })[0].value;
+                _this.setPeriodLabels();
+            });
+            _calendar.viewChanged.pipe(operators.takeUntil(this._destroyed)).subscribe(function () { return _this.setPeriodLabels(); });
         }
-        Object.defineProperty(DrAccordionComponent.prototype, "multi", {
-            /**
-             *  Allow multiple items to be expanded at the same time.
-             */
+        DrDatePickerCustomHeaderComponent.prototype.ngOnDestroy = function () {
+            this._destroyed.next();
+            this._destroyed.complete();
+        };
+        DrDatePickerCustomHeaderComponent.prototype.setPeriodLabels = function () {
+            var _this = this;
+            var currentTimeframeOption = this.timeframeOptions.filter(function (option) { return option.value === _this._calendar.currentView; })[0];
+            var fullPeriodLabel = currentTimeframeOption.periodLabel();
+            if (this._calendar.currentView === 'month') {
+                this.periodMonthLabel = fullPeriodLabel.slice(0, 3);
+                this.periodYearLabel = fullPeriodLabel.slice(4);
+            }
+            else {
+                this.periodMonthLabel = '';
+                this.periodYearLabel = fullPeriodLabel;
+            }
+            this.cdr.markForCheck();
+        };
+        DrDatePickerCustomHeaderComponent.prototype.setTimeframe = function () {
+            var _this = this;
+            this.timeframeSelection = false;
+            this._calendar.currentView = this.selectedTimeframe;
+            var chosenTimeframeOption = this.timeframeOptions.filter(function (option) { return option.value === _this.selectedTimeframe; })[0];
+            this.datePickerService.updateTimeframeAndFormat(chosenTimeframeOption.format);
+            if (this.selectedTimeframe == 'none') {
+                this.selectedQuarter = moment$1(this._calendar.activeDate).quarter();
+            }
+        };
+        Object.defineProperty(DrDatePickerCustomHeaderComponent.prototype, "currentViewIsQuarter", {
             get: function () {
-                return this.multiValue;
-            },
-            set: function (val) {
-                this.multiValue = !!val;
+                return !['month', 'year', 'multi-year'].includes(this._calendar.currentView);
             },
             enumerable: false,
             configurable: true
         });
-        /**
-         * Opens all enabled accordion items.
-         */
-        DrAccordionComponent.prototype.openAll = function () {
-            if (this.multi) {
-                this.openCloseItems.next(false);
-            }
+        DrDatePickerCustomHeaderComponent.prototype.switchViewOnClickOnPeriodLabel = function (view) {
+            this._calendar.currentView = view;
         };
-        /**
-         * Closes all enabled accordion items.
-         */
-        DrAccordionComponent.prototype.closeAll = function () {
-            this.openCloseItems.next(true);
+        DrDatePickerCustomHeaderComponent.prototype.onSelectQuarter = function (quarterNumber) {
+            var monthsInQuarter = 3;
+            this.selectedQuarter = moment$1(this._calendar.activeDate).quarter();
+            var unadaptedDate = this._dateAdapter.addCalendarMonths(this._calendar.activeDate, monthsInQuarter * (quarterNumber - this.selectedQuarter));
+            this._calendar.activeDate = unadaptedDate;
+            this.datePickerService.updatedQuarter$.next(moment$1(unadaptedDate));
+            this.datePickerService.calendarInstance.close();
         };
-        return DrAccordionComponent;
+        DrDatePickerCustomHeaderComponent.prototype.pagingClicked = function (forward) {
+            this.pagingSetup[this._calendar.currentView] && this.pagingSetup[this._calendar.currentView](forward);
+        };
+        DrDatePickerCustomHeaderComponent.prototype.pagingDateChange = function (actionCall, amount, forward) {
+            this._calendar.activeDate = this._dateAdapter[actionCall](this._calendar.activeDate, forward ? amount : -amount);
+            this.setPeriodLabels();
+        };
+        return DrDatePickerCustomHeaderComponent;
     }());
-    DrAccordionComponent.decorators = [
+    DrDatePickerCustomHeaderComponent.decorators = [
         { type: i0.Component, args: [{
-                    selector: 'dr-accordion',
-                    template: '<ng-content select="dr-accordion-item"></ng-content>',
+                    selector: 'dr-date-picker_custom-header.component',
+                    template: "<div *ngIf=\"datePickerService.isTimeframeSelectionEnabled\" class=\"dr-datepicker__timeframe-select__wrapper\">\n    <dr-select\n        class=\"dr-datepicker__timeframe-select\"\n        [(ngModel)]=\"selectedTimeframe\"\n        [items]=\"timeframeOptions\"\n        bindLabel=\"title\"\n        bindValue=\"value\"\n        (ngModelChange)=\"setTimeframe()\">\n    </dr-select>\n</div>\n\n<div class=\"dr-date-paging\">\n    <div class=\"dr-date-paging flip-page-button\"\n        (click)=\"pagingClicked(false)\">\n            <i class=\"dr-icon-arrow-left presentation_buttons-navigate_input\"></i>\n    </div>\n    <span class=\"example-header-label\">\n        <span (click)=\"switchViewOnClickOnPeriodLabel('year')\">{{periodMonthLabel + ' '}}</span>\n        <span (click)=\"switchViewOnClickOnPeriodLabel('multi-year')\">{{periodYearLabel}}</span>\n    </span>\n    <div class=\"dr-date-paging flip-page-button\"\n        (click)=\"pagingClicked(true)\">\n            <i class=\"dr-icon-arrow-right presentation_buttons-navigate_input\"></i>\n    </div>\n</div>\n<div #quarterlyDatePicker class=\"dr-quarterly-datepicker\" *ngIf=\"currentViewIsQuarter\">\n    <div *ngFor=\"let quarter of quarters\"\n        class=\"quarter-selector\" (click)=\"onSelectQuarter(quarter)\"\n        [class]=\"quarter == selectedQuarter ? 'selected' : ''\"\n        >Q{{quarter}}</div>\n</div>\n\n",
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    styles: [":host{display:block;box-shadow:#2c33491a 0 5px 10px}\n"]
+                    styles: [":host{height:54px;align-items:center;font-family:\"Poppins\";font-style:normal;font-weight:600;font-size:14px;line-height:22px}.dr-datepicker__timeframe-select__wrapper{background-color:#f9faff;padding:16px 32px;border-radius:18px 18px 0 0}.dr-date-paging{display:flex;flex-direction:row;justify-content:space-between;align-items:center;padding:16px 8px;grid-gap:4px;gap:4px}.dr-date-paging.flip-page-button{width:20px;height:20px;padding:0;color:#4e566c}.dr-date-paging.flip-page-button:hover{border-radius:50%;background:#F2F2FB;color:#4646ce}.example-header-label{cursor:pointer}.dr-quarterly-datepicker{display:flex;justify-content:space-between;padding:10px}.dr-quarterly-datepicker .quarter-selector{display:block;width:74px;height:40px;text-align:center;border-radius:40px;font-weight:400;padding-top:9px}.dr-quarterly-datepicker .quarter-selector:hover{background:#F2F2FB;color:#4646ce;font-weight:600;cursor:pointer}.dr-quarterly-datepicker .quarter-selector.selected{background-color:#4646ce;color:#f3f7ff;font-weight:600}\n"]
                 },] }
     ];
-    DrAccordionComponent.propDecorators = {
-        multi: [{ type: i0.Input, args: ['multi',] }]
-    };
+    DrDatePickerCustomHeaderComponent.ctorParameters = function () { return [
+        { type: datepicker.MatCalendar },
+        { type: core.DateAdapter },
+        { type: CustomDateFormat, decorators: [{ type: i0.Inject, args: [core.MAT_DATE_FORMATS,] }] },
+        { type: i0.ChangeDetectorRef },
+        { type: DrDatePickerService }
+    ]; };
 
-    var DrAccordionItemComponent = /** @class */ (function () {
-        function DrAccordionItemComponent(accordion, cd) {
-            this.accordion = accordion;
-            this.cd = cd;
-            /**
-             * Emits whenever the expanded state of the accordion changes.
-             * Primarily used to facilitate two-way binding.
-             */
-            this.collapsedChange = new i0.EventEmitter();
-            this.accordionItemInvalidate = new rxjs.Subject();
-            this.collapsedValue = true;
-            this.disabledValue = false;
-            this.destroy$ = new rxjs.Subject();
+    var moment = require('moment');
+    var noop = function () { };
+    var ɵ0 = noop;
+    var DrDatePickerComponent = /** @class */ (function () {
+        function DrDatePickerComponent(cdr, dateAdapter, datePickerService) {
+            var _this = this;
+            this.cdr = cdr;
+            this.dateAdapter = dateAdapter;
+            this.datePickerService = datePickerService;
+            // Whether to transform date, taking end, start, middle of preiod (i.e. set middle of month if timeframe='month')
+            this.periodPosition = exports.DatePickerPeriodPosition.DEFAULT;
+            this.placeholder = 'Select';
+            this.calendarViewsTimeframeMapping = {
+                year: 'multi-year',
+                month: 'year',
+                quarter: 'none',
+                day: 'month',
+            };
+            this.customHeader = DrDatePickerCustomHeaderComponent;
+            this.readonly = true;
+            this.innerValue = null;
+            this.destroyed$ = new rxjs.Subject();
+            this.onTouchedCallback = noop;
+            this.onChangeCallback = noop;
+            datePickerService.updatedQuarter$
+                .pipe(operators.takeUntil(this.destroyed$))
+                .subscribe(function (value) {
+                _this.setValueFromMoment(value);
+            });
         }
-        Object.defineProperty(DrAccordionItemComponent.prototype, "collapsed", {
-            /**
-             * Item is collapse (`true` by default)
-             * @type {boolean}
-             */
-            get: function () {
-                return this.collapsedValue;
-            },
-            set: function (val) {
-                this.collapsedValue = !!val;
-                this.collapsedChange.emit(this.collapsedValue);
-                this.invalidate();
+        Object.defineProperty(DrDatePickerComponent.prototype, "format", {
+            set: function (value) {
+                this.datePickerService.updateTimeframeAndFormat(value);
             },
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(DrAccordionItemComponent.prototype, "expanded", {
-            /**
-             * Item is expanded (`false` by default)
-             */
-            get: function () {
-                return !this.collapsed;
+        Object.defineProperty(DrDatePickerComponent.prototype, "min", {
+            set: function (minDate) {
+                this._min = moment.unix(minDate).utc();
             },
-            set: function (val) {
-                this.collapsedValue = !val;
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(DrDatePickerComponent.prototype, "max", {
+            set: function (maxDate) {
+                this._max = moment.unix(maxDate).utc();
             },
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(DrAccordionItemComponent.prototype, "disabled", {
-            /**
-             * Item is disabled and cannot be opened.
-             * @type {boolean}
-             */
+        Object.defineProperty(DrDatePickerComponent.prototype, "value", {
             get: function () {
-                return this.disabledValue;
+                return this.innerValue;
             },
-            set: function (val) {
-                this.disabledValue = !!val;
-                this.invalidate();
+            set: function (v) {
+                if (v !== this.innerValue) {
+                    this.setValueFromMoment(v);
+                }
+                this.cdr.markForCheck();
             },
             enumerable: false,
             configurable: true
         });
+        DrDatePickerComponent.prototype.ngAfterViewInit = function () {
+            this.datePickerService.calendarInstance = this.dp;
+            this.dp.startView = this.calendarViewsTimeframeMapping[this.datePickerService.timeframe];
+        };
+        DrDatePickerComponent.prototype.ngOnDestroy = function () {
+            this.destroyed$.next();
+            this.destroyed$.complete();
+        };
         /**
-         * Open/close the item
+         * Updating component inner value according to datepicker timeframe (day, month etc.)
+         * and date position in period (start, end, middle)
          */
-        DrAccordionItemComponent.prototype.toggle = function () {
-            if (!this.disabled) {
-                // we need this temporary variable as `openCloseItems.next` will change current value we need to save
-                var willSet = !this.collapsed;
-                if (!this.accordion.multi) {
-                    this.accordion.openCloseItems.next(true);
-                }
-                this.collapsed = willSet;
+        DrDatePickerComponent.prototype.tryToNormalaizeTimeframe = function () {
+            var timeframe = this.datePickerService.timeframe;
+            switch (this.periodPosition) {
+                case exports.DatePickerPeriodPosition.START_OF_PERIOD:
+                    this.innerValue.startOf(timeframe);
+                    break;
+                case exports.DatePickerPeriodPosition.END_OF_PERIOD:
+                    this.innerValue.endOf(timeframe);
+                    break;
+                case exports.DatePickerPeriodPosition.MIDDLE_OF_PERIOD:
+                    this.innerValue.startOf(timeframe);
+                    var endOfPeriod = this.innerValue.clone().endOf(timeframe);
+                    var diff = endOfPeriod.diff(this.innerValue, 'seconds');
+                    this.innerValue.add(diff / 2 + 1, 'seconds');
+                    break;
+                default:
+                    this.innerValue.startOf(timeframe);
+                    break;
             }
         };
-        /**
-         * Open the item.
-         */
-        DrAccordionItemComponent.prototype.open = function () {
-            if (!this.disabled) {
-                this.collapsed = false;
+        DrDatePickerComponent.prototype.chosenPeriodHandler = function (chosenDate, timeframe) {
+            if (this.datePickerService.timeframe === timeframe) {
+                this.setValueFromMoment(chosenDate);
+                this.dp.close();
             }
         };
         /**
-         * Collapse the item.
+         * Setting value from outside of component via ngModel or formControl updates
          */
-        DrAccordionItemComponent.prototype.close = function () {
-            if (!this.disabled) {
-                this.collapsed = true;
+        DrDatePickerComponent.prototype.writeValue = function (value) {
+            this.innerValue = value ? moment.unix(value).utc() : value;
+            if (this.innerValue) {
+                this.tryToNormalaizeTimeframe();
             }
+            this.cdr.markForCheck();
         };
-        DrAccordionItemComponent.prototype.ngOnInit = function () {
-            var _this = this;
-            this.accordion.openCloseItems
-                .pipe(operators.takeUntil(this.destroy$))
-                .subscribe(function (collapsed) {
-                if (!_this.disabled) {
-                    _this.collapsed = collapsed;
-                }
-            });
+        DrDatePickerComponent.prototype.registerOnChange = function (fn) {
+            this.onChangeCallback = fn;
         };
-        DrAccordionItemComponent.prototype.ngOnChanges = function (changes) {
-            this.accordionItemInvalidate.next(true);
+        DrDatePickerComponent.prototype.registerOnTouched = function (fn) {
+            this.onTouchedCallback = fn;
         };
-        DrAccordionItemComponent.prototype.ngOnDestroy = function () {
-            this.destroy$.next();
-            this.destroy$.complete();
-            this.accordionItemInvalidate.complete();
+        /**
+         * Set inner value from Moment and propagate
+         * @param momentDate
+         */
+        DrDatePickerComponent.prototype.setValueFromMoment = function (momentDate) {
+            this.setValue(momentDate.unix());
         };
-        DrAccordionItemComponent.prototype.invalidate = function () {
-            this.accordionItemInvalidate.next(true);
-            this.cd.markForCheck();
+        /**
+         * Set inner value from timestamp and propagate
+         * @param timestamp
+         */
+        DrDatePickerComponent.prototype.setValue = function (timestamp) {
+            this.writeValue(timestamp);
+            this.onChangeCallback(this.innerValue.unix());
         };
-        return DrAccordionItemComponent;
+        return DrDatePickerComponent;
     }());
-    DrAccordionItemComponent.decorators = [
+    DrDatePickerComponent.decorators = [
         { type: i0.Component, args: [{
-                    selector: 'dr-accordion-item',
-                    template: "\n    <ng-content select=\"dr-accordion-item-header\"></ng-content>\n    <ng-content select=\"dr-accordion-item-body\"></ng-content>\n  ",
+                    selector: 'dr-date-picker',
+                    template: "<i class=\"dr-icon-schedule\"></i>\n<input [(ngModel)]=\"value\"\n    (click)=\"datePicker.open()\"\n    [matDatepicker]=\"datePicker\"\n    [placeholder]=\"placeholder\"\n    [drDatePickerFormat]=\"datePickerService.format$ | async\"\n    [readonly]=\"readonly\"\n    [min]=\"_min\"\n    [max]=\"_max\"/>\n<mat-datepicker #datePicker\n    [calendarHeaderComponent]=\"customHeader\"\n    (yearSelected)=\"chosenPeriodHandler($event, 'year')\"\n    (monthSelected)=\"chosenPeriodHandler($event, 'month')\">\n</mat-datepicker>\n",
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    styles: [":host{background-color:#fff;color:#222b45;font-family:\"Poppins\",sans-serif;font-size:16px;font-weight:400;line-height:1.25rem;display:flex;flex-direction:column}\n"]
+                    providers: [
+                        { provide: forms.NG_VALUE_ACCESSOR, useExisting: DrDatePickerComponent, 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 #C3C4CE;border-radius:6px;color:#85889c;overflow:hidden;outline:none;cursor:pointer}:host:hover{border-color:#85889c}:host:focus-within{border-color:#21b8f1!important;color:#151b3f}:host.disabled{pointer-events:none;border:none;color:#85889c;background:#E5E6EA}: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:#c3c4ce}:host:after,:host:before{position:absolute;display:flex;border-color:#999999 transparent transparent;color:#999}:host:after{content:\"\";height:0;width:0;border-style:solid;border-width:5px 5px 2.5px;right:11px;top:13px}:host i{position:absolute;color:#999;left:8px;top:3px}: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:#85889c;background:transparent}:host input::-webkit-search-decoration,:host input::-webkit-search-cancel-button,:host input::-webkit-search-results-button,:host input::-webkit-search-results-decoration{-webkit-appearance:none}::ng-deep .mat-datepicker-content{margin:7px 0;box-shadow:0 4px 8px 1px #00000040;border-radius:12px!important}::ng-deep .mat-datepicker-content button[disabled]{border:inherit;color:inherit;background-color:inherit}::ng-deep .mat-datepicker-content button[disabled]:hover{border:inherit}::ng-deep .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){background:#F2F2FB;color:#4646ce;font-weight:600}::ng-deep .mat-calendar-body-selected{background-color:#4646ce;color:#f2f2fb;font-weight:600}::ng-deep .mat-calendar-body-today.mat-calendar-body-selected{box-shadow:none}::ng-deep .mat-button-focus-overlay{background:#F3F7FF}::ng-deep .mat-calendar-controls .mat-icon-button:hover .mat-button-focus-overlay{opacity:1!important;background:#F3F7FF;transition:opacity .2s cubic-bezier(.35,0,.25,1)}::ng-deep .mat-calendar-controls .mat-calendar-period-button:hover{background:#F3F7FF;transition:background .2s cubic-bezier(.35,0,.25,1)}::ng-deep .mat-calendar-table-header th{font-size:14px;font-weight:600;color:#19181a}::ng-deep .mat-calendar-table-header-divider{display:none}::ng-deep .mat-calendar-body-label{color:#fff;padding:0}\n"]
                 },] }
     ];
-    DrAccordionItemComponent.ctorParameters = function () { return [
-        { type: DrAccordionComponent, decorators: [{ type: i0.Host }] },
-        { type: i0.ChangeDetectorRef }
+    DrDatePickerComponent.ctorParameters = function () { return [
+        { type: i0.ChangeDetectorRef },
+        { type: core.DateAdapter },
+        { type: DrDatePickerService }
     ]; };
-    DrAccordionItemComponent.propDecorators = {
-        collapsed: [{ type: i0.Input, args: ['collapsed',] }, { type: i0.HostBinding, args: ['class.collapsed',] }],
-        expanded: [{ type: i0.Input, args: ['expanded',] }, { type: i0.HostBinding, args: ['class.expanded',] }],
-        disabled: [{ type: i0.Input, args: ['disabled',] }, { type: i0.HostBinding, args: ['class.disabled',] }],
-        collapsedChange: [{ type: i0.Output }]
+    DrDatePickerComponent.propDecorators = {
+        format: [{ type: i0.Input }],
+        min: [{ type: i0.Input }],
+        max: [{ type: i0.Input }],
+        periodPosition: [{ type: i0.Input }],
+        placeholder: [{ type: i0.Input }],
+        dp: [{ type: i0.ViewChild, args: ['datePicker',] }]
     };
 
-    var DrAccordionItemHeaderComponent = /** @class */ (function () {
-        function DrAccordionItemHeaderComponent(accordionItem, cd) {
-            this.accordionItem = accordionItem;
-            this.cd = cd;
-            this.destroy$ = new rxjs.Subject();
+    var DrDatePickerWithTimeframeComponent = /** @class */ (function (_super) {
+        __extends(DrDatePickerWithTimeframeComponent, _super);
+        function DrDatePickerWithTimeframeComponent(cdr, dateAdapter, datePickerService) {
+            var _this = _super.call(this, cdr, dateAdapter, datePickerService) || this;
+            _this.cdr = cdr;
+            _this.dateAdapter = dateAdapter;
+            _this.datePickerService = datePickerService;
+            _this.isDashboardDatepicker = false;
+            _this.onChangeFormat = new i0.EventEmitter();
+            _this.pagingSetup = {
+                'year': function (forward) { return _this.pagingDateChange('addCalendarYears', 1, forward); },
+                'quarter': function (forward) { return _this.pagingDateChange('addCalendarMonths', 3, forward); },
+                'month': function (forward) { return _this.pagingDateChange('addCalendarMonths', 1, forward); },
+                'day': function (forward) { return _this.pagingDateChange('addCalendarDays', 1, forward); }
+            };
+            datePickerService.isTimeframeSelectionEnabled = true;
+            datePickerService.format$
+                .pipe(operators.takeUntil(_this.destroyed$))
+                .subscribe(function (value) {
+                _this.onChangeFormat.emit(datePickerService.normalizeValue(value));
+            });
+            return _this;
         }
-        Object.defineProperty(DrAccordionItemHeaderComponent.prototype, "isCollapsed", {
-            get: function () {
-                return this.accordionItem.collapsed;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(DrAccordionItemHeaderComponent.prototype, "expanded", {
-            get: function () {
-                return !this.accordionItem.collapsed;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(DrAccordionItemHeaderComponent.prototype, "tabbable", {
+        Object.defineProperty(DrDatePickerWithTimeframeComponent.prototype, "isDashboardClassDisplayed", {
             get: function () {
-                return this.accordionItem.disabled ? '-1' : '0';
+                return this.isDashboardDatepicker;
             },
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(DrAccordionItemHeaderComponent.prototype, "disabled", {
+        ;
+        Object.defineProperty(DrDatePickerWithTimeframeComponent.prototype, "quarterDisplay", {
             get: function () {
-                return this.accordionItem.disabled;
+                return this.datePickerService.getQuarterDisplay(this.value);
             },
             enumerable: false,
             configurable: true
         });
-        DrAccordionItemHeaderComponent.prototype.toggle = function () {
-            this.accordionItem.toggle();
+        DrDatePickerWithTimeframeComponent.prototype.ngOnInit = function () {
+            if (this.dateFormatConfig) {
+                this.datePickerService.formatConfig = Object.assign(Object.assign({}, this.datePickerService.formatConfig), this.dateFormatConfig);
+            }
         };
-        Object.defineProperty(DrAccordionItemHeaderComponent.prototype, "state", {
-            get: function () {
-                if (this.isCollapsed) {
-                    return 'collapsed';
-                }
-                return 'expanded';
-            },
-            enumerable: false,
-            configurable: true
-        });
-        DrAccordionItemHeaderComponent.prototype.ngOnInit = function () {
-            var _this = this;
-            this.accordionItem.accordionItemInvalidate
-                .pipe(operators.takeUntil(this.destroy$))
-                .subscribe(function () { return _this.cd.markForCheck(); });
+        DrDatePickerWithTimeframeComponent.prototype.pagingClicked = function (forward) {
+            this.pagingSetup[this.datePickerService.timeframe] && this.pagingSetup[this.datePickerService.timeframe](forward);
+            this.dp.close();
         };
-        DrAccordionItemHeaderComponent.prototype.ngOnDestroy = function () {
-            this.destroy$.next();
-            this.destroy$.complete();
+        DrDatePickerWithTimeframeComponent.prototype.pagingDateChange = function (actionCall, amount, forward) {
+            var newValue = this.dateAdapter[actionCall](this.innerValue, forward ? amount : -amount);
+            this.setValueFromMoment(newValue);
         };
-        return DrAccordionItemHeaderComponent;
-    }());
-    DrAccordionItemHeaderComponent.decorators = [
+        return DrDatePickerWithTimeframeComponent;
+    }(DrDatePickerComponent));
+    DrDatePickerWithTimeframeComponent.decorators = [
         { type: i0.Component, args: [{
-                    selector: 'dr-accordion-item-header',
-                    template: "\n    <ng-content select=\"dr-accordion-item-title\"></ng-content>\n    <ng-content select=\"dr-accordion-item-description\"></ng-content>\n    <ng-content></ng-content>\n    <i class=\"dr-icon-arrow-down expansion-indicator\"\n       [@expansionIndicator]=\"state\"\n       *ngIf=\"!disabled\">\n    </i>\n  ",
-                    animations: [
-                        animations.trigger('expansionIndicator', [
-                            animations.state('expanded', animations.style({
-                                transform: 'rotate(180deg)',
-                            })),
-                            animations.transition('collapsed => expanded', animations.animate('100ms ease-in')),
-                            animations.transition('expanded => collapsed', animations.animate('100ms ease-out')),
-                        ]),
-                    ],
+                    selector: 'dr-date-picker-with-timeframe',
+                    template: "<div class=\"dr-input-date-paging__flip-page-button\"\n    (click)=\"pagingClicked(false)\"\n>\n    <i class=\"dr-icon-arrow-left presentation_buttons-navigate_input\"></i>\n</div>\n<div class=\"dr-datepicker__input-container\">\n    <i *ngIf=\"isDashboardDatepicker\" class=\"dr-icon-date\"></i>\n    <div\n        class=\"dr-input-date-paging__formatted-value-display\"\n        (click)=\"datepickerInput.click()\"\n    >\n        {{\n          !value\n            ? placeholder\n            : (datePickerService.format$.getValue()?.includes('Q') ? quarterDisplay : value.format(datePickerService.format$.getValue()))\n        }}\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<div class=\"dr-input-date-paging__flip-page-button\"\n    (click)=\"pagingClicked(true)\">\n    <i class=\"dr-icon-arrow-right presentation_buttons-navigate_input\"></i>\n</div>\n<mat-datepicker #datePicker\n    class=\"dr-timeframe-datepicker\"\n    [calendarHeaderComponent]=\"customHeader\"\n    (yearSelected)=\"chosenPeriodHandler($event, 'year')\"\n    (monthSelected)=\"chosenPeriodHandler($event, 'month')\">\n</mat-datepicker>\n",
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    styles: [":host{display:flex;align-items:center;cursor:pointer;position:relative;border-bottom:1px solid #edf1f7;color:#222b45;font-family:\"Poppins\",sans-serif;font-size:13px;font-weight:600;line-height:1.5rem;padding:1.25rem;text-transform:capitalize}:host:focus{outline:0}:host .expansion-indicator{font-size:24px;position:absolute;right:10px;font-weight:700}\n"]
+                    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 #C3C4CE;border-radius:6px;color:#85889c;overflow:hidden;outline:none;cursor:pointer}:host:hover{border-color:#85889c}:host:focus-within{border-color:#21b8f1!important;color:#151b3f}:host.disabled{pointer-events:none;border:none;color:#85889c;background:#E5E6EA}: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:#c3c4ce}:host:after,:host:before{position:absolute;display:flex;border-color:#999999 transparent transparent;color:#999}:host:after{content:\"\";height:0;width:0;border-style:solid;border-width:5px 5px 2.5px;right:11px;top:13px}:host i{position:absolute;color:#999;left:8px;top:3px}: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:#85889c;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.dr-date-picker-on-dashboard{width:180px;justify-content:space-between}:host.dr-date-picker-on-dashboard mat-datepicker{position:absolute}: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 .dr-input-date-paging__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-input-date-paging__flip-page-button{width:25px;height:25px;border-radius:16px;padding:0;background-color:#fff}:host .dr-input-date-paging__flip-page-button i{position:relative;color:#0c142b;top:unset;left:unset}:host .dr-input-date-paging__flip-page-button:hover{background-color:#f2f2fb;color:#4646ce}:host input{visibility:hidden;position:absolute;width:100%}:host .dr-input-date-paging__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-input-date-paging__formatted-value-display:hover{background-color:#f2f2fb;border-radius:5px;cursor:pointer;-webkit-text-decoration-line:underline;text-decoration-line:underline;color:#4646ce}\n"]
                 },] }
     ];
-    DrAccordionItemHeaderComponent.ctorParameters = function () { return [
-        { type: DrAccordionItemComponent, decorators: [{ type: i0.Host }] },
-        { type: i0.ChangeDetectorRef }
+    DrDatePickerWithTimeframeComponent.ctorParameters = function () { return [
+        { type: i0.ChangeDetectorRef },
+        { type: core.DateAdapter },
+        { type: DrDatePickerService }
     ]; };
-    DrAccordionItemHeaderComponent.propDecorators = {
-        isCollapsed: [{ type: i0.HostBinding, args: ['class.accordion-item-header-collapsed',] }],
-        expanded: [{ type: i0.HostBinding, args: ['class.accordion-item-header-expanded',] }, { type: i0.HostBinding, args: ['attr.aria-expanded',] }],
-        tabbable: [{ type: i0.HostBinding, args: ['attr.tabindex',] }],
-        disabled: [{ type: i0.HostBinding, args: ['attr.aria-disabled',] }],
-        toggle: [{ type: i0.HostListener, args: ['click',] }, { type: i0.HostListener, args: ['keydown.space',] }, { type: i0.HostListener, args: ['keydown.enter',] }]
+    DrDatePickerWithTimeframeComponent.propDecorators = {
+        isDashboardClassDisplayed: [{ type: i0.HostBinding, args: ['class.dr-date-picker-on-dashboard',] }],
+        isDashboardDatepicker: [{ type: i0.Input }],
+        dateFormatConfig: [{ type: i0.Input }],
+        onChangeFormat: [{ type: i0.Output }]
     };
 
-    var accordionItemBodyTrigger = animations.trigger('accordionItemBody', [
-        animations.state('collapsed', animations.style({
-            overflow: 'hidden',
-            visibility: 'hidden',
-            height: 0,
-        })),
-        animations.state('expanded', animations.style({
-            overflow: 'hidden',
-            visibility: 'visible',
-        })),
-        animations.transition('collapsed => expanded', animations.animate('100ms ease-in')),
-        animations.transition('expanded => collapsed', animations.animate('100ms ease-out')),
-    ]);
-    var DrAccordionItemBodyComponent = /** @class */ (function () {
-        function DrAccordionItemBodyComponent(accordionItem, cd) {
-            this.accordionItem = accordionItem;
-            this.cd = cd;
-            this.destroy$ = new rxjs.Subject();
+    var DrDatePickerFormatDirective = /** @class */ (function () {
+        function DrDatePickerFormatDirective(matDateFormat, ngControl) {
+            this.matDateFormat = matDateFormat;
+            this.ngControl = ngControl;
         }
-        Object.defineProperty(DrAccordionItemBodyComponent.prototype, "state", {
-            get: function () {
-                return this.accordionItem.collapsed ? 'collapsed' : 'expanded';
+        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
         });
-        DrAccordionItemBodyComponent.prototype.ngOnInit = function () {
-            var _this = this;
-            this.accordionItem.accordionItemInvalidate
-                .pipe(operators.takeUntil(this.destroy$))
-                .subscribe(function () { return _this.cd.markForCheck(); });
-        };
-        DrAccordionItemBodyComponent.prototype.ngOnDestroy = function () {
-            this.destroy$.next();
-            this.destroy$.complete();
-        };
-        return DrAccordionItemBodyComponent;
-    }());
-    DrAccordionItemBodyComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'dr-accordion-item-body',
-                    template: "\n    <div [@accordionItemBody]=\"{ value: state }\">\n      <div class=\"item-body\">\n        <ng-content></ng-content>\n      </div>\n    </div>\n  ",
-                    animations: [accordionItemBodyTrigger],
-                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    styles: [".item-body{flex:1;-ms-flex:1 1 auto;overflow:auto;position:relative}\n"]
-                },] }
-    ];
-    DrAccordionItemBodyComponent.ctorParameters = function () { return [
-        { type: DrAccordionItemComponent, decorators: [{ type: i0.Host }] },
-        { type: i0.ChangeDetectorRef }
-    ]; };
-
-    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;
+        return DrDatePickerFormatDirective;
     }());
-    DrModelDebounceChangeDirective.decorators = [
+    DrDatePickerFormatDirective.decorators = [
         { type: i0.Directive, args: [{
-                    selector: '[ngModelDebounceChange]'
+                    selector: '[drDatePickerFormat]',
+                    providers: [
+                        {
+                            provide: core.DateAdapter,
+                            useClass: materialMomentAdapter.MomentDateAdapter
+                        },
+                        {
+                            provide: core.MAT_DATE_FORMATS,
+                            useClass: CustomDateFormat
+                        }
+                    ]
                 },] }
     ];
-    DrModelDebounceChangeDirective.ctorParameters = function () { return [
-        { type: forms.NgModel }
+    DrDatePickerFormatDirective.ctorParameters = function () { return [
+        { type: CustomDateFormat, decorators: [{ type: i0.Inject, args: [core.MAT_DATE_FORMATS,] }] },
+        { type: forms.NgControl, decorators: [{ type: i0.Optional }] }
     ]; };
-    DrModelDebounceChangeDirective.propDecorators = {
-        debounce: [{ type: i0.Input }],
-        ngModelDebounceChange: [{ type: i0.Output }]
+    DrDatePickerFormatDirective.propDecorators = {
+        configDateParse: [{ type: i0.Input }],
+        configDateDisplay: [{ type: i0.Input }],
+        datePickerFormat: [{ type: i0.Input, args: ['drDatePickerFormat',] }]
     };
 
-    var components$2 = [DateTagComponent,
-        DayTagComponent,
-        WeekTagComponent,
-        MonthTagComponent,
-        QuarterTagComponent,
-        AnyTagComponent,
-        YearTagComponent,
-        ForecastTagComponent];
-    var ɵ0 = { useUtc: true };
-    var DateTagModule = /** @class */ (function () {
-        function DateTagModule() {
-        }
-        return DateTagModule;
-    }());
-    DateTagModule.decorators = [
-        { type: i0.NgModule, args: [{
-                    imports: [
-                        common.CommonModule,
-                        core.MatNativeDateModule,
-                        datepicker.MatDatepickerModule,
-                        forms.FormsModule,
-                        formField.MatFormFieldModule,
-                        forms.ReactiveFormsModule,
-                        input.MatInputModule,
-                        materialMomentAdapter.MatMomentDateModule,
-                        select.MatSelectModule
-                    ],
-                    exports: components$2,
-                    providers: [
-                        { provide: materialMomentAdapter.MAT_MOMENT_DATE_ADAPTER_OPTIONS, useValue: ɵ0 }
-                    ],
-                    declarations: components$2,
-                },] }
-    ];
-    ;
-
-    var ListTagModule = /** @class */ (function () {
-        function ListTagModule() {
-        }
-        return ListTagModule;
-    }());
-    ListTagModule.decorators = [
-        { type: i0.NgModule, args: [{
-                    imports: [
-                        common.CommonModule,
-                        forms.FormsModule,
-                        formField.MatFormFieldModule,
-                        forms.ReactiveFormsModule,
-                        materialMomentAdapter.MatMomentDateModule,
-                        select.MatSelectModule,
-                        buttonToggle.MatButtonToggleModule,
-                    ],
-                    exports: [ListTagComponent],
-                    providers: [],
-                    declarations: [
-                        ListTagComponent
-                    ],
-                },] }
-    ];
-
-    var DrTagModule = /** @class */ (function () {
-        function DrTagModule() {
-        }
-        return DrTagModule;
-    }());
-    DrTagModule.decorators = [
-        { type: i0.NgModule, args: [{
-                    imports: [
-                        common.CommonModule,
-                        DateTagModule,
-                        ListTagModule
-                    ],
-                    exports: [DrTagComponent],
-                    providers: [],
-                    declarations: [
-                        DrTagComponent
-                    ],
-                },] }
-    ];
-
+    // !!! 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$1 = [
         DrButtonComponent,
         RadioButtonComponent,
@@ -3953,6 +4072,7 @@
         DrToggleComponent,
         DrToggleButtonComponent,
         DrDatePickerComponent,
+        DrDatePickerWithTimeframeComponent,
         DrDatePickerFormatDirective,
         DrDatePickerCustomHeaderComponent,
         DrModelDebounceChangeDirective
@@ -3972,9 +4092,6 @@
                         common.CommonModule,
                         ngSelect.NgSelectModule,
                         datepicker.MatDatepickerModule
-                    ],
-                    providers: [
-                        DrDatePickerService
                     ]
                 },] }
     ];
@@ -4146,6 +4263,8 @@
 
     exports.AnyTagComponent = AnyTagComponent;
     exports.CheckboxComponent = CheckboxComponent;
+    exports.CustomDateFormat = CustomDateFormat;
+    exports.DATE_INPUT_FORMAT = DATE_INPUT_FORMAT;
     exports.DateTagComponent = DateTagComponent;
     exports.DateTagModule = DateTagModule;
     exports.DayTagComponent = DayTagComponent;
@@ -4158,8 +4277,6 @@
     exports.DrAvatarModule = DrAvatarModule;
     exports.DrAvatarPipe = DrAvatarPipe;
     exports.DrButtonComponent = DrButtonComponent;
-    exports.DrDatePickerComponent = DrDatePickerComponent;
-    exports.DrDatePickerFormatDirective = DrDatePickerFormatDirective;
     exports.DrDropdownComponent = DrDropdownComponent;
     exports.DrDropdownDirective = DrDropdownDirective;
     exports.DrDropdownItemShowPipe = DrDropdownItemShowPipe;
@@ -4191,18 +4308,24 @@
     exports.ISpinnerOptions = ISpinnerOptions;
     exports.ListTagComponent = ListTagComponent;
     exports.ListTagModule = ListTagModule;
+    exports.MAT_DEFAULT_DATE_FORMAT = MAT_DEFAULT_DATE_FORMAT;
+    exports.MONTH_YEAR_FORMAT = MONTH_YEAR_FORMAT;
     exports.MonthTagComponent = MonthTagComponent;
+    exports.QUARTER_FORMAT = QUARTER_FORMAT;
     exports.QuarterTagComponent = QuarterTagComponent;
     exports.RadioButtonComponent = RadioButtonComponent;
     exports.RadioGroupComponent = RadioGroupComponent;
     exports.TooltipComponent = TooltipComponent;
     exports.WeekTagComponent = WeekTagComponent;
+    exports.YEAR_FORMAT = YEAR_FORMAT;
     exports.YearTagComponent = YearTagComponent;
     exports["ɵa"] = components$2;
     exports["ɵb"] = POPUP_ANIMATION;
-    exports["ɵc"] = DrDatePickerService;
-    exports["ɵd"] = CustomDateFormat;
-    exports["ɵe"] = DrDatePickerCustomHeaderComponent;
+    exports["ɵc"] = DrDatePickerComponent;
+    exports["ɵd"] = DrDatePickerService;
+    exports["ɵe"] = DrDatePickerWithTimeframeComponent;
+    exports["ɵf"] = DrDatePickerFormatDirective;
+    exports["ɵg"] = DrDatePickerCustomHeaderComponent;
 
     Object.defineProperty(exports, '__esModule', { value: true });